/* ============================================
   PAKHUIS — main.css (gededupliceerd v32-final)
   Eén definitie per selector per breakpoint.
   ============================================ */

* { box-sizing:border-box;margin:0;padding:0 }
html { scroll-behavior:smooth }
body { font-family:var(--pk-font);background:var(--pk-page-gradient);color:var(--pk-text);line-height:1.55;overflow-x:hidden }
a { text-decoration:none;color:inherit }
img { display:block;max-width:100% }
::selection { background:rgba(18,183,176,.22);color:var(--pk-navy) }
:focus-visible { outline:none;box-shadow:var(--pk-focus) }
h1,h2,h3,h4 { font-family:var(--pk-font-display) }
.container { width:min(1180px,91vw);margin:0 auto }
.site-header { position:sticky;
  top:0;
  z-index:120;
  background:rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--pk-line);
  transition:box-shadow .25s ease,background .25s ease; }
.site-header.scrolled { background:rgba(255,255,255,.97);
  box-shadow:0 10px 34px rgba(16,33,74,.09); }
.header-inner { min-height:96px;
  display:flex;
  align-items:center;
  justify-content: space-between; }
.logo-img { width: 200px !important;
  max-height: 80px !important;
  height: auto !important;
  object-fit: contain !important; }
.nav { display:flex;align-items:center;gap:8px }
.nav a { font-size:14px;font-weight:800;color:var(--pk-navy);padding:10px 13px;border-radius:999px;transition:background .15s ease,color .15s ease }
.nav a:hover { background:rgba(16,33,74,.06) }
.nav a.active { background:var(--pk-teal-soft);color:var(--pk-teal-dark) }
.mobile-nav a.active { border-color:rgba(18,183,176,.4);background:var(--pk-teal-soft);color:var(--pk-teal-dark) }
.header-actions { display:flex;align-items:center;gap:12px }
.btn { position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid transparent;border-radius:15px;padding:14px 21px;font-size:15px;font-weight:900;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;white-space:nowrap }
.btn:active { transform:translateY(0) scale(.98) }
.btn-primary { background:var(--pk-gradient);color:#fff;box-shadow:0 16px 38px rgba(255,63,69,.23) }
.btn-primary::after { content:'';position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .5s ease }
.btn-primary:hover::after { left:130% }
.btn-primary:hover { transform:translateY(-2px);box-shadow:0 22px 48px rgba(255,63,69,.30) }
.btn-outline { background:#fff;color:var(--pk-navy);border-color:var(--pk-navy) }
.btn-outline:hover { background:var(--pk-navy);color:#fff;transform:translateY(-2px) }
.btn-soft { background:#fff;color:var(--pk-navy);border-color:var(--pk-line);box-shadow:0 10px 28px rgba(16,33,74,.06) }
.mobile-menu-button { display:none;background:#fff;border:1px solid var(--pk-line);color:var(--pk-navy);border-radius:14px;padding:10px 13px;font-weight:950 }
.mobile-nav { display:none;gap:6px;padding:0 0 18px }
.mobile-nav a { display:block;padding:13px 16px;border-radius:16px;background:#fff;border:1px solid var(--pk-line);font-weight:850 }
.hero { position:relative;padding:64px 0 74px }
.hero::before { content:'';position:absolute;inset:0;pointer-events:none;
  background-image:var(--pk-grid-dots);
  background-size:var(--pk-grid-size);
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 0%,#000 30%,transparent 75%);
  mask-image:radial-gradient(ellipse 70% 80% at 50% 0%,#000 30%,transparent 75%); }
.hero .container { position:relative }
.hero-grid { display:grid;grid-template-columns:1fr 1.13fr;gap:52px;align-items:center }
.pill { display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;background:rgba(234,255,253,.9);border:1px solid rgba(18,183,176,.28);color:var(--pk-teal-dark);font-weight:900;font-size:14px;margin-bottom:26px }
.pill-dot { width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:var(--pk-teal);color:#fff;font-size:11px }
.hero h1 { font-size:clamp(44px,5.2vw,72px);line-height:1.06;letter-spacing:-.028em;font-weight:700;margin-bottom:26px }
.hero h1 span { display:block;background:var(--pk-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--pk-red) }
.hero-lead { max-width:560px;color:var(--pk-muted);font-size:19px;line-height:1.75;margin-bottom:30px }
.feature-icons { display:grid;grid-template-columns:repeat(4,minmax(75px,1fr));gap:18px;max-width:500px;margin:0 0 32px }
.feature-icon { display:grid;justify-items:center;gap:10px;color:var(--pk-navy);font-size:13px;font-weight:850;text-align:center }
.bubble { width:52px;height:52px;display:grid;place-items:center;color:#fff;border-radius:18px;box-shadow:0 13px 30px rgba(16,33,74,.12);transition:transform .2s ease }
.feature-icon:hover .bubble,.info-card:hover .bubble { transform:translateY(-3px) rotate(-4deg) }
.bubble.red { background:linear-gradient(135deg,var(--pk-red),#ff6b4a) }
.bubble.orange { background:linear-gradient(135deg,var(--pk-orange),#ff9a2e) }
.bubble.teal { background:linear-gradient(135deg,var(--pk-teal),#0d948e) }
.bubble.purple { background:linear-gradient(135deg,var(--pk-purple),#8c5de6) }
.hero-actions { display:flex;gap:14px;flex-wrap:wrap;margin-bottom:22px }
.platform-note { display:flex;align-items:center;gap:10px;color:var(--pk-muted);font-size:14px;font-weight:750 }
.hero-visual { min-height:520px;position:relative;display:grid;place-items:center }
.hero-orb { position:absolute;right:3%;bottom:6%;width:72%;aspect-ratio:1/1;border-radius:50%;background:radial-gradient(circle at 24% 22%,rgba(255,63,69,.16),transparent 38%),radial-gradient(circle at 84% 12%,rgba(18,183,176,.19),transparent 40%),rgba(255,255,255,.42) }
.phone-row { position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:515px }
.phone { position:absolute;width:245px;border-radius:38px;background:#111827;padding:8px;box-shadow:var(--pk-shadow-strong) }
.phone:before { content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);width:72px;height:20px;background:#111827;border-radius:0 0 15px 15px;z-index:2 }
.phone-screen { border-radius:31px;overflow:hidden;background:#fff;aspect-ratio:9/19.5 }
.phone-screen img { width:100%;height:100%;object-fit:cover;object-position:center top }
.phone.center { width:285px;z-index:3;transform:translateY(-6px);animation:pk-float-c 7s ease-in-out infinite }
.phone.left { z-index:2;transform:translateX(-160px) rotate(-4deg) scale(.94);animation:pk-float-l 8s ease-in-out infinite }
.phone.right { z-index:1;transform:translateX(168px) rotate(5deg) scale(.94);animation:pk-float-r 9s ease-in-out infinite }
@keyframes pk-float-c { 0%,100%{transform:translateY(-6px)} 50%{transform:translateY(-18px)} }
@keyframes pk-float-l { 0%,100%{transform:translateX(-160px) rotate(-4deg) scale(.94)} 50%{transform:translateX(-160px) translateY(-10px) rotate(-4.6deg) scale(.94)} }
@keyframes pk-float-r { 0%,100%{transform:translateX(168px) rotate(5deg) scale(.94)} 50%{transform:translateX(168px) translateY(-12px) rotate(5.6deg) scale(.94)} }
.section { padding:82px 0 }
.section-card { position:relative;overflow:hidden;background:rgba(255,255,255,.90);border:1px solid var(--pk-line);border-radius:var(--pk-radius-xl);padding:42px;box-shadow:var(--pk-shadow) }
.section-card::before { content:'';position:absolute;top:0;right:0;width:44%;height:52%;pointer-events:none;
  background-image:var(--pk-grid-dots);background-size:var(--pk-grid-size);
  -webkit-mask-image:radial-gradient(ellipse at 100% 0%,#000,transparent 72%);
  mask-image:radial-gradient(ellipse at 100% 0%,#000,transparent 72%); }
.section-card > * { position:relative }
.section-top { display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:34px }
.label { display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:900;color:var(--pk-teal-dark);text-transform:uppercase;letter-spacing:.14em;margin-bottom:12px }
.label::before { content:'';width:22px;height:3px;border-radius:99px;background:var(--pk-gradient) }
h2 { font-size:clamp(32px,4vw,48px);line-height:1.12;letter-spacing:-.022em;font-weight:700 }
.section-text { color:var(--pk-muted);font-size:17px;line-height:1.75 }
.cards-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:22px }
.info-card { position:relative;min-height:205px;background:#fff;border:1px solid var(--pk-line);border-radius:24px;padding:28px 24px;text-align:center;display:grid;align-content:center;justify-items:center;box-shadow:0 10px 30px rgba(16,33,74,.045);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease }
.info-card:hover { transform:translateY(-5px);box-shadow:0 18px 44px rgba(16,33,74,.10);border-color:var(--pk-line-2) }
.info-card .bubble { margin-bottom:18px }
.info-card h3 { font-size:18px;margin-bottom:10px }
.info-card p { color:var(--pk-muted);font-size:14px }
.screenshots { background:linear-gradient(180deg,rgba(255,255,255,.60),rgba(246,249,253,.80));border-block:1px solid rgba(223,232,243,.72) }
.app-showcase { grid-template-columns: 1fr 1fr !important;
  gap: 52px !important;
  align-items: start !important; }
.showcase-copy h2 { margin-bottom:18px }
.showcase-copy p { color: var(--pk-muted);
  font-size: 17px;
  line-height: 1.75;
  margin-bottom: 0; }
.showcase-points { display:grid;gap:14px }
.showcase-point { display:flex;gap:14px;align-items:flex-start;padding:16px 18px;background:#fff;border:1px solid var(--pk-line);border-radius:20px;transition:transform .2s ease,box-shadow .2s ease }
.showcase-point:hover { transform:translateX(4px);box-shadow:var(--pk-shadow-sm) }
.showcase-point b { display:block;margin-bottom:3px }
.showcase-point span { color:var(--pk-muted);font-size:14px }
.check { flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#eafffd;color:var(--pk-teal-dark);font-weight:950 }
.screenshot-strip { margin-top:52px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;align-items:end }
.shot { text-align:center }
.shot-frame { background:#fff;border:1px solid var(--pk-line);border-radius:24px;padding:10px;box-shadow:0 18px 45px rgba(16,33,74,.12);margin-bottom:14px }
.shot-frame img { border-radius:18px;width:100%;aspect-ratio:9/19.5;object-fit:cover;object-position:center top }
.brand-banner { border-radius:38px;overflow:hidden;border:1px solid var(--pk-line);box-shadow:var(--pk-shadow);background:#fff }
.brand-banner img { width:100%;height:auto }
.banner-section { padding:74px 0 }
.roadmap { position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 0% 10%,rgba(255,63,69,.16),transparent 32%),
    radial-gradient(circle at 100% 0%,rgba(18,183,176,.18),transparent 36%),
    linear-gradient(180deg,#071534 0%,#08193f 100%) !important;

  border-top:1px solid rgba(255,255,255,.06); }
.roadmap:before { content:'';position:absolute;inset:0;background:radial-gradient(circle at 8% 10%,rgba(255,63,69,.22),transparent 36%),radial-gradient(circle at 88% 6%,rgba(18,183,176,.22),transparent 34%) }
.roadmap .container { position:relative;
  z-index:1; }
.roadmap .label { color:#83ede6 }
.roadmap .section-text { opacity:.82; }
.roadmap-grid { position:relative;
  z-index:1; }
.roadmap-item { background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  backdrop-filter:blur(12px);
  box-shadow:
    0 18px 48px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.04); }
.roadmap-item small { display:block;color:rgba(255,255,255,.52);text-transform:uppercase;letter-spacing:.11em;font-weight:950;margin-bottom:10px }
.roadmap-item h3 { color:#ffffff !important; }
.roadmap-item p { color:rgba(255,255,255,.72) !important; }
.download { padding:72px 0 }
.download-card { border-radius:38px;overflow:hidden;background:var(--pk-gradient-wide);color:#fff;display:grid;grid-template-columns:.82fr 1.18fr;align-items:center;min-height:210px;box-shadow:var(--pk-shadow) }
.house-mark { min-height:210px;display:grid;place-items:center;font-size:98px;opacity:.92 }
.download-content { padding:40px 42px;display:flex;align-items:center;justify-content:space-between;gap:24px }
.download-content h2 { font-size:34px;margin-bottom:8px }
.download-content p { color:rgba(255,255,255,.84) }
.download-content .btn { color:#fff;border-color:rgba(255,255,255,.72);background:rgba(255,255,255,.10);box-shadow:none }
.contact { padding:72px 0 84px }
.contact-grid { display:grid;grid-template-columns:.95fr 1.05fr;gap:36px;align-items:start }
.contact-card { background:#fff;border:1px solid var(--pk-line);border-radius:32px;padding:34px;box-shadow:var(--pk-shadow) }
.form { display:grid;gap:14px }
.form-row { display:grid;grid-template-columns:1fr 1fr;gap:14px }
input,select,textarea { width:100%;border:1px solid var(--pk-line);border-radius:16px;padding:15px 16px;background:var(--pk-bg);color:var(--pk-text);font:inherit }
textarea { min-height:120px;resize:vertical }
input:focus,select:focus,textarea:focus { outline:3px solid rgba(18,183,176,.15);border-color:var(--pk-teal) }
.form-status { font-size:14px;color:var(--pk-teal-dark);font-weight:800;min-height:22px }
.footer { position:relative;background:#0d172e;color:#fff;padding:48px 0 26px }
.footer::before { content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--pk-gradient-wide) }
.footer a { transition:color .15s ease }
.footer a:hover { color:#fff }
.footer-grid { display:grid;
  grid-template-columns:1.25fr .8fr .9fr .9fr .9fr;
  gap:42px;
  align-items:start; }
.footer-logo { width:150px;max-height:80px;object-fit:contain;background:#fff;border-radius:18px;padding:8px }
.footer p { color:rgba(255,255,255,.58);font-size:14px;max-width:340px }
.footer h4 { font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.42);margin-bottom:13px }
.footer a { display:block;color:rgba(255,255,255,.64);font-size:14px;margin-bottom:8px }
.footer-bottom { border-top:1px solid rgba(255,255,255,.09);padding-top:20px;color:rgba(255,255,255,.38);font-size:13px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap }
.download-banner { min-height:150px;
  border-radius:28px;
  overflow:hidden;
  background:var(--pk-gradient-wide);
  box-shadow:var(--pk-shadow);
  display:grid;
  grid-template-columns:210px 1fr auto;
  align-items:center;
  gap:26px;
  padding:0 34px 0 0;
  color:#fff; }
.download-house { height:100%;
  min-height:150px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.08); }
.download-house svg { width:124px;
  height:98px;
  fill:none;
  stroke:#fff;
  stroke-width:13;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.94; }
.download-house rect { fill:#fff;stroke:none;opacity:.94 }
.download-copy h2 { font-size:clamp(26px,3vw,38px);line-height:1.08;letter-spacing:-.035em;margin-bottom:8px }
.download-copy p { font-size:17px;color:rgba(255,255,255,.86) }
.download-button { background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.72);
  color:#fff;
  box-shadow:none; }
.download-button:hover { background:rgba(255,255,255,.20) }
.bubble .pk-svg-icon { width:25px;
  height:25px;
  display:block;
  fill:none;
  stroke:#fff;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round; }
.info-card .bubble .pk-svg-icon { width:28px;
  height:28px; }
.cookie-banner { position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  z-index:200;
  width:min(920px,calc(100vw - 28px));
  background:rgba(255,255,255,.96);
  border:1px solid var(--pk-line);
  border-radius:24px;
  box-shadow:var(--pk-shadow-strong);
  padding:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  backdrop-filter:blur(18px); }
.cookie-banner[hidden] { display:none }
.cookie-banner strong { display:block;
  color:var(--pk-navy);
  margin-bottom:4px; }
.cookie-banner p { color:var(--pk-muted);
  font-size:14px;
  line-height:1.45; }
.cookie-actions { display:flex;
  gap:10px;
  flex:0 0 auto; }
.cookie-actions .btn { padding:11px 15px;
  border-radius:14px;
  font-size:14px; }
.footer-subtitle { margin-top:18px; }
.social-links { display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px; }
.social-links a { display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  text-decoration:none;
  font-weight:700;
  transition:all .2s ease;
  margin-bottom:0; }
.social-links a:hover { transform:translateY(-2px);
  background:rgba(255,255,255,.14); }
.logo-link { display:flex;
  align-items:center;
  flex:0 0 auto; }
.bubble .pk-white-icon { width:25px !important;
  height:25px !important;
  display:block !important;
  overflow:visible !important; }
.bubble .pk-white-icon, .bubble .pk-white-icon * { fill:none !important;
  stroke:#ffffff !important; }
.info-card .bubble .pk-white-icon { width:28px !important;
  height:28px !important; }
.mobile-app-note { display:none; }
.legal-hero { padding:78px 0 72px;
  background:
    radial-gradient(circle at 6% 8%,rgba(255,63,69,.10),transparent 34%),
    radial-gradient(circle at 92% 8%,rgba(18,183,176,.12),transparent 34%),
    linear-gradient(180deg,#ffffff 0%,#f7fbff 55%,#ffffff 100%); }
.legal-card { width:min(980px,100%);
  margin:0 auto;
  background:rgba(255,255,255,.92);
  border:1px solid var(--pk-line);
  border-radius:var(--pk-radius-xl);
  box-shadow:var(--pk-shadow);
  padding:48px;
  position:relative;
  overflow:hidden; }
.legal-card::before { content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:8px;
  background:var(--pk-gradient-wide); }
.legal-card h1 { font-size:clamp(38px,5vw,58px);
  line-height:1.08;
  letter-spacing:-.025em;
  font-weight:700;
  margin:12px 0 12px;
  color:var(--pk-navy); }
.legal-card .updated { display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:var(--pk-teal-soft);
  color:var(--pk-teal-dark);
  font-size:13px;
  font-weight:850;
  margin-bottom:30px; }
.legal-content { display:grid;
  gap:24px; }
.legal-content section { background:#fff;
  border:1px solid var(--pk-line-2);
  border-radius:22px;
  padding:24px;
  box-shadow:0 10px 28px rgba(16,33,74,.035); }
.legal-content h2 { font-size:22px;
  line-height:1.25;
  letter-spacing:-.015em;
  font-weight:700;
  margin:0 0 10px;
  color:var(--pk-navy); }
.legal-content p, .legal-content li { color:var(--pk-muted);
  font-size:15.5px;
  line-height:1.75; }
.legal-content a { color:var(--pk-teal-dark);
  font-weight:850;
  text-decoration:underline;
  text-underline-offset:3px; }
.legal-content ul { padding-left:20px;
  display:grid;
  gap:7px;
  margin-top:8px; }
.legal-note { background:
    radial-gradient(circle at 0% 0%,rgba(18,183,176,.14),transparent 44%),
    var(--pk-teal-soft);
  border:1px solid rgba(18,183,176,.25);
  color:var(--pk-teal-dark);
  padding:18px 20px;
  border-radius:22px;
  font-weight:800;
  line-height:1.55; }
.roadmap::before { content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.22;
  background:
    linear-gradient(
      90deg,
      #ff494f,
      #ff8c00,
      #12b7b0,
      #10214a,
      #7b3fc6
    );
  mix-blend-mode:overlay; }
.roadmap .label, .roadmap h2, .roadmap .section-text { color:#ffffff !important; }
.roadmap-item .phase { background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.12);
  color:#ffffff !important; }
.page-hero { padding:72px 0 66px;background:radial-gradient(circle at 6% 8%,rgba(255,63,69,.10),transparent 34%),radial-gradient(circle at 92% 8%,rgba(18,183,176,.12),transparent 34%),linear-gradient(180deg,#ffffff 0%,#f7fbff 55%,#ffffff 100%) }
.page-hero-grid { display:grid;grid-template-columns:1fr .9fr;gap:48px;align-items:center }
.page-hero h1 { font-size:clamp(42px,5.4vw,72px);line-height:1.02;letter-spacing:-.028em;font-weight:700;margin-bottom:22px;color:var(--pk-navy) }
.page-phone-wrap { min-height:470px;position:relative;display:grid;place-items:center }
.page-phone-wrap .phone { position:relative }
.video-placeholder { min-height:360px;border-radius:32px;background:radial-gradient(circle at 18% 18%,rgba(255,63,69,.18),transparent 38%),radial-gradient(circle at 82% 18%,rgba(18,183,176,.20),transparent 38%),linear-gradient(135deg,#0b1734,#10214a);color:#fff;display:grid;place-items:center;text-align:center;padding:38px;box-shadow:var(--pk-shadow) }
.play-button { width:82px;height:82px;border-radius:999px;display:grid;place-items:center;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);font-size:32px;margin-bottom:18px }
.video-placeholder h3 { font-size:28px;margin-bottom:8px }
.video-placeholder p { color:rgba(255,255,255,.78);max-width:560px }
.feature-detail-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:22px }
.detail-card,.story-card,.beta-status-card,.faq-item { background:#fff;border:1px solid var(--pk-line);border-radius:28px;padding:30px;box-shadow:var(--pk-shadow-sm) }
.detail-card h2 { font-size:30px;margin:16px 0 10px }
.detail-card p,.story-card p,.beta-status-card span,.faq-item p { color:var(--pk-muted);line-height:1.7 }
.story-card { background:radial-gradient(circle at 0% 0%,rgba(18,183,176,.12),transparent 45%),#fff }
.story-card h3,.beta-status-card h3,.faq-item h3 { font-size:22px;margin-bottom:10px;color:var(--pk-navy) }
.status-list { display:grid;gap:12px }
.status-list span { display:flex;justify-content:space-between;gap:12px;padding:14px 16px;background:var(--pk-bg);border:1px solid var(--pk-line);border-radius:16px }
.faq-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:18px }
.video-coming-soon { display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 52px 24px;
  background: var(--pk-bg);
  border-radius: 22px;
  border: 1px dashed var(--pk-line);
  text-align: center; }
.video-coming-soon svg { width: 64px;
  height: 64px; }
.video-coming-soon p { color: var(--pk-muted);
  font-size: 15px;
  font-weight: 700; }
.form-privacy { display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--pk-muted);
  line-height: 1.5;
  cursor: pointer; }
.form-privacy input[type="checkbox"] { width: auto;
  margin-top: 2px;
  flex-shrink: 0; }
.form-privacy a { color: var(--pk-teal-dark);
  text-decoration: underline; }
.over-story { display: grid;
  gap: 16px;
  margin-top: 32px;
  max-width: 800px; }
.over-story p { color: var(--pk-muted);
  font-size: 17px;
  line-height: 1.8; }
.over-tagline { color: var(--pk-navy) !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
  padding: 20px 24px;
  border-left: 4px solid var(--pk-red);
  background: rgba(255,63,69,.05);
  border-radius: 0 12px 12px 0;
  margin-top: 8px; }
.founder-grid { display: grid;
  grid-template-columns: 340px 1fr;
  gap: 60px;
  align-items: start; }
.founder-photo-wrap { position: static !important;
  top: auto !important; }
.founder-photo { width: 100%;
  border-radius: 24px;
  box-shadow: var(--pk-shadow-strong);
  object-fit: cover;
  aspect-ratio: 3/4;
  object-position: center top; }
.founder-copy h2 { margin: 10px 0 24px; }
.founder-copy p { color: var(--pk-muted);
  font-size: 17px;
  line-height: 1.8;
  margin-bottom: 16px; }
.founder-tagline { background: linear-gradient(135deg, rgba(255,63,69,.07), rgba(18,183,176,.07));
  border: 1px solid var(--pk-line);
  border-radius: 18px;
  padding: 20px 24px;
  font-size: 16px;
  font-weight: 750;
  color: var(--pk-navy);
  line-height: 1.6;
  margin: 24px 0 28px; }
.section-top-single { margin-bottom: 34px; }
.section-top-single h2 { margin-top: 10px; }
.faq-layout { display: grid;
  gap: 48px; }
.faq-category-label { font-size: 12px;
  font-weight: 950;
  color: var(--pk-teal-dark);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 16px;
  padding-left: 4px; }
.faq-list { display: grid;
  gap: 10px; }
.faq-item { background: #fff;
  border: 1px solid var(--pk-line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(16,33,74,.04);
  transition: box-shadow .2s; }
.faq-item[open] { box-shadow: 0 8px 32px rgba(16,33,74,.09);
  border-color: rgba(18,183,176,.3); }
.faq-item summary { display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  font-size: 16px;
  font-weight: 800;
  color: var(--pk-navy);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background .15s; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+';
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--pk-bg);
  border: 1px solid var(--pk-line);
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 400;
  color: var(--pk-teal-dark);
  transition: transform .2s, background .2s;
  line-height: 1; }
.faq-item[open] summary::after { content: '−';
  background: rgba(18,183,176,.1);
  border-color: rgba(18,183,176,.3);
  transform: rotate(0deg); }
.faq-item summary:hover { background: var(--pk-bg); }
.faq-answer { padding: 0 24px 22px;
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--pk-line);
  padding-top: 18px; }
.faq-answer p { color: var(--pk-muted);
  font-size: 15px;
  line-height: 1.75; }
.faq-link { display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 800;
  color: var(--pk-teal-dark);
  text-decoration: none;
  margin-top: 4px;
  transition: gap .15s; }
.faq-link:hover { gap: 10px; }
.showcase-actions { display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px; }
.showcase-note { font-size: 13px !important;
  color: var(--pk-muted);
  margin-top: 14px !important;
  opacity: .8; }
.app-video-wrap { max-width: 360px !important;
  margin: 0 auto !important; }
.app-video-wrap video { aspect-ratio: 4 / 5 !important;
  max-height: none !important;
  width: 100% !important;
  object-fit: cover !important; }
.sitelock-badge img { height: 28px;
  width: auto;
  opacity: .75;
  transition: opacity .2s; }
.sitelock-badge:hover img { opacity: 1; }
.demo-inner { display: grid !important;
  grid-template-columns: 1fr 360px !important;
  gap: 52px !important;
  align-items: center !important; }
.demo-text { align-self: center; }
.beta-hero-grid { display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center; }
.beta-status-grid { display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px; }
.bstat-card { background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 18px;
  padding: 20px 18px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.15);
  transition: transform 0.2s, box-shadow 0.2s; }
.bstat-card:hover { transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.2); }
.bstat-live { border-color: rgba(42,184,160,0.45);
  background: rgba(42,184,160,0.12); }
.bstat-wip { border-color: rgba(244,126,34,0.35);
  background: rgba(244,126,34,0.08); }
.bstat-icon { font-size: 1.2rem;
  margin-bottom: 8px;
  display: block; }
.bstat-label { color: rgba(255,255,255,0.75) !important; }
.bstat-val { color: rgba(255,255,255,1) !important;
  font-size: 1rem !important; }
.changelog-intro { color: var(--pk-muted);
  font-size: 1rem;
  line-height: 1.7;
  margin-top: 12px;
  max-width: 640px; }
.updates-grid { display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 36px; }
.update-card { background: rgba(255,255,255,0.72);
  border: 1px solid rgba(255,255,255,0.65);
  border-radius: 18px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 2px 16px rgba(16,33,74,0.05), inset 0 1px 0 rgba(255,255,255,0.9);
  transition: transform 0.2s, box-shadow 0.2s; }
.update-card:hover { transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(16,33,74,0.10), inset 0 1px 0 rgba(255,255,255,0.95); }
.update-new { background: rgba(42,184,160,0.08);
  border-color: rgba(42,184,160,0.30);
  box-shadow: 0 2px 16px rgba(42,184,160,0.08), inset 0 1px 0 rgba(255,255,255,0.8); }
.update-version { font-size: 0.70rem;
  font-weight: 900;
  color: var(--pk-teal-dark);
  text-transform: uppercase;
  letter-spacing: 0.10em; }
.update-card h3 { font-size: 0.95rem;
  font-weight: 800;
  color: var(--pk-navy);
  margin: 0;
  line-height: 1.3; }
.update-card p { font-size: 0.83rem;
  color: var(--pk-muted);
  line-height: 1.65;
  flex: 1;
  margin: 0; }
.update-tags { display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px; }
.tag { font-size: 0.68rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 50px; }
.tag-feature { background: rgba(42,184,160,0.12);  color: var(--pk-teal-dark); }
.tag-fix { background: rgba(232,70,42,0.10);   color: var(--pk-red); }
.tag-improvement { background: rgba(244,126,34,0.12);  color: var(--pk-orange); }
.tag-tech { background: rgba(124,77,255,0.10);  color: #6b3fd4; }
.signup-perks { display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px; }
.perk { display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.90rem;
  font-weight: 700;
  color: var(--pk-navy); }
.perk span { width: 24px;
  height: 24px;
  background: rgba(42,184,160,0.12);
  color: var(--pk-teal-dark);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 900;
  flex-shrink: 0; }
.roadmap-intro { margin-top: 12px;
  max-width: 600px;
  color: rgba(255,255,255,0.70);
  font-size: 1rem;
  line-height: 1.7; }
.roadmap-step { font-size: 0.85rem;
  font-weight: 900;
  margin-bottom: 8px;
  opacity: 0.75;
  display: block; }
.done-item { border-top: 4px solid var(--pk-teal-dark); }
.wip-item { border-top: 4px solid var(--pk-orange); }
.plan-item { border-top: 4px solid rgba(255,255,255,0.18); }
.bstat-live .bstat-label, .bstat-live .bstat-val, .bstat-wip .bstat-label, .bstat-wip .bstat-val { color: var(--pk-navy) !important; }
.bstat-live .bstat-label { color: rgba(16,33,74,0.6) !important; }
.bstat-wip .bstat-label { color: rgba(16,33,74,0.6) !important; }
.demo-grid { display:grid;grid-template-columns:1fr .85fr;gap:48px;align-items:center }
.demo-copy { align-self:center }
.video-card { background:#fff;border:1px solid var(--pk-line);border-radius:28px;padding:14px;box-shadow:var(--pk-shadow);overflow:hidden;max-width:340px;margin:0 auto }
.video-card video { width:100%;display:block;border-radius:20px;background:#071534;aspect-ratio:4/5;object-fit:contain }
.page-hero .story-card,.page-hero .beta-status-card { align-self:center }
.product-download { background:#fff;
  border:1px solid var(--pk-line);
  border-radius:26px;
  padding:26px;
  box-shadow:var(--pk-shadow-sm); }
.product-download h2 { font-size:28px; }
.landing-points { display: grid;
  gap: 28px;
  margin-top: 32px; }
.landing-point { display: grid;
  grid-template-columns: 48px 1fr;
  gap: 20px;
  align-items: start; }
.landing-point-num { width: 48px; height: 48px;
  background: linear-gradient(135deg, var(--pk-red), var(--pk-orange));
  color: #fff;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  font-weight: 900;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(255,63,69,.25); }
.landing-point h3 { font-size: 1.05rem;
  font-weight: 800;
  color: var(--pk-navy);
  margin-bottom: 8px; }
.landing-point p { color: var(--pk-muted);
  font-size: 0.95rem;
  line-height: 1.7; }
.landing-cta { margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--pk-line);
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap; }
.landing-cta-note { font-size: 0.83rem;
  color: var(--pk-muted); }
.showcase-two-col { display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center; }
.showcase-screens { overflow: hidden; }
.screen-scroll { display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px; }
.screen-item { display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px; }
.screen-item picture, .screen-item img { width: 100%;
  border-radius: 22px;
  box-shadow: 0 12px 40px rgba(16,33,74,0.15);
  border: 4px solid var(--pk-navy);
  display: block;
  aspect-ratio: 9/19;
  object-fit: cover; }
.screen-item span { font-size: 0.80rem;
  font-weight: 800;
  color: var(--pk-muted); }
.persona-grid { display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px; }
.persona-card { background: rgba(255,255,255,0.75);
  border: 1px solid rgba(255,255,255,0.65);
  border-radius: 20px;
  padding: 28px 22px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 2px 16px rgba(16,33,74,0.05), inset 0 1px 0 rgba(255,255,255,0.9);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.2s, box-shadow 0.2s; }
.persona-card:hover { transform: translateY(-4px);
  box-shadow: 0 10px 32px rgba(16,33,74,0.10); }
.persona-card:nth-child(1) { border-top: 4px solid var(--pk-red); }
.persona-card:nth-child(2) { border-top: 4px solid var(--pk-teal); }
.persona-card:nth-child(3) { border-top: 4px solid var(--pk-orange); }
.persona-icon { font-size: 2rem;
  line-height: 1; }
.persona-card h3 { font-size: 1.05rem;
  font-weight: 800;
  color: var(--pk-navy);
  margin: 0; }
.persona-card p { font-size: 0.88rem;
  color: var(--pk-muted);
  line-height: 1.65;
  flex: 1; }
.persona-quote { font-size: 0.82rem;
  font-style: italic;
  color: var(--pk-navy);
  background: rgba(16,33,74,0.04);
  border-left: 3px solid var(--pk-red);
  padding: 10px 14px;
  border-radius: 0 8px 8px 0;
  line-height: 1.55; }
.sr-only { position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0; }
.hero-copy { display: flex; flex-direction: column; }
.showcase-copy { display: flex; flex-direction: column; }
.android-dot { width: 8px; height: 8px; background: #3DDC84; border-radius: 50%; display: inline-block; }
.thanks-page { min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px; }
.thanks-card { background: #fff;
  border: 1px solid var(--pk-line);
  border-radius: 28px;
  padding: 48px 36px;
  text-align: center;
  max-width: 440px;
  box-shadow: var(--pk-shadow); }
.thanks-icon { width: 64px;
  height: 64px;
  background: rgba(18,183,176,0.12);
  color: var(--pk-teal-dark);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 28px;
  margin: 0 auto 20px; }

/* ============================================
   MOTION — v34-visual
   Scroll-reveal + hero-stagger. JS voegt .pk-reveal
   toe; zonder JS blijft alles gewoon zichtbaar.
   ============================================ */
.pk-reveal { opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s cubic-bezier(.22,.8,.3,1) }
.pk-reveal.in-view { opacity:1;transform:none }
.pk-reveal:nth-child(2) { transition-delay:.07s }
.pk-reveal:nth-child(3) { transition-delay:.14s }
.pk-reveal:nth-child(4) { transition-delay:.21s }

@keyframes pk-rise { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
.js .hero-copy > * { animation:pk-rise .6s cubic-bezier(.22,.8,.3,1) both }
.js .hero-copy > :nth-child(1) { animation-delay:.05s }
.js .hero-copy > :nth-child(2) { animation-delay:.14s }
.js .hero-copy > :nth-child(3) { animation-delay:.23s }
.js .hero-copy > :nth-child(4) { animation-delay:.32s }
.js .hero-copy > :nth-child(5) { animation-delay:.41s }
.js .hero-copy > :nth-child(6) { animation-delay:.50s }

.screen-item picture,.screen-item img { transition:transform .25s ease,box-shadow .25s ease }
.screen-item:hover picture,.screen-item:hover img { transform:translateY(-5px);box-shadow:0 20px 52px rgba(16,33,74,.22) }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto }
  *,*::before,*::after { animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important }
  .pk-reveal { opacity:1;transform:none }
}

/* ============================================
   MOBIEL — max-width: 720px
   ============================================ */
@media (max-width: 720px) {
.video-card { padding: 8px;
    border-radius: 20px;
    max-width: 280px;
    margin: 0 auto; }
.video-card video { aspect-ratio: 4 / 5 !important;
    object-fit: contain !important;
    border-radius: 16px; }
.demo-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
.mobile-only { display: block; }
.desktop-only { display: none; }
.hero-grid { display: flex !important; flex-direction: column; gap: 24px; }
.hero-visual, .hero-visual-responsive { display: none !important; }
.page-hero-grid { display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important; }
.page-hero-grid > div, .page-hero-grid > .story-card, .page-hero-grid > .beta-status-card, .page-hero-grid > .page-phone-wrap { width: 100% !important;
    max-width: 100% !important; }
.page-hero-grid .desktop-only { display: none !important; }
.page-hero-grid .story-card, .page-hero-grid .beta-status-card { margin-top: 4px; }
.status-list span { padding: 11px 13px !important;
    font-size: 13px !important;
    border-radius: 12px !important; }
.page-hero { padding: 32px 0 28px; }
.page-hero h1 { font-size: clamp(26px, 8vw, 36px) !important;
    line-height: 1.18 !important;
    letter-spacing: -.02em !important;
    margin-bottom: 14px !important; }
.page-hero .hero-lead { font-size: 15px !important;
    max-width: 100% !important;
    margin-bottom: 18px !important; }
.page-hero .pill { font-size: 12px !important;
    padding: 6px 12px !important;
    margin-bottom: 14px !important; }
.page-hero .hero-actions { flex-direction: column !important;
    gap: 10px !important;
    width: 100%; }
.page-hero .btn { width: 100% !important;
    justify-content: center !important; }
.story-card, .detail-card, .beta-status-card { padding: 20px 18px !important;
    border-radius: 18px !important; }
.story-card h3, .detail-card h2, .beta-status-card h3 { font-size: 17px !important; }
.story-card p, .detail-card p, .beta-status-card span { font-size: 13.5px !important; }
html, body { overflow-x: hidden; width: 100%; }
.container { width: 100%; padding: 0 20px; max-width: 100%; box-sizing: border-box; }
.header-inner { min-height: 64px; padding: 0; gap: 12px; justify-content: space-between; }
.logo-img { width: 130px; height: auto; max-height: 44px; object-fit: contain; }
.nav { display: none; }
.header-actions .btn-outline, .header-actions .btn-primary { display: none; }
.mobile-menu-button { display: flex !important;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    background: #fff;
    border: 1px solid var(--pk-line);
    border-radius: 12px;
    position: relative;
    font-size: 0; 
    flex-shrink: 0; }
.mobile-menu-button::before, .mobile-menu-button::after, .mobile-menu-button span.bar { content: '';
    position: absolute;
    left: 11px;
    width: 20px;
    height: 2px;
    background: var(--pk-navy);
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease; }
.mobile-menu-button::before { top: 14px; }
.mobile-menu-button::after { top: 27px; }
.mobile-menu-button .bar { top: 20.5px; }
.mobile-menu-button[aria-expanded="true"]::before { top: 20.5px;
    transform: rotate(45deg); }
.mobile-menu-button[aria-expanded="true"]::after { top: 20.5px;
    transform: rotate(-45deg); }
.mobile-menu-button[aria-expanded="true"] .bar { opacity: 0; }
.mobile-nav { display: none;
    flex-direction: column;
    gap: 6px;
    padding: 12px 20px 20px; }
.mobile-nav.open { display: flex; }
.mobile-nav a { display: block;
    padding: 14px 16px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--pk-line);
    font-weight: 800;
    font-size: 15px;
    color: var(--pk-navy); }
h1 { font-size: clamp(28px, 8vw, 38px) !important; line-height: 1.18 !important; letter-spacing: -.02em !important; }
h2 { font-size: clamp(22px, 6.5vw, 30px) !important; line-height: 1.22 !important; letter-spacing: -.01em !important; }
h3 { font-size: 17px; line-height: 1.3; }
.label { font-size: 11px; }
.section-text { font-size: 15px; line-height: 1.65; }
p { font-size: 15px; line-height: 1.65; }
.hero { padding: 28px 0 36px; }
.hero-lead { font-size: 15.5px; max-width: 100%; margin-bottom: 20px; }
.pill { font-size: 12px; padding: 6px 12px; margin-bottom: 16px; }
.pill-dot { width: 15px; height: 15px; font-size: 9px; }
.feature-icons { grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    max-width: 100%;
    margin-bottom: 24px; }
.bubble { width: 38px; height: 38px; border-radius: 10px; }
.feature-icon { font-size: 10px; gap: 6px; }
.hero-actions { flex-direction: column; gap: 10px; width: 100%; margin-bottom: 16px; }
.hero-actions .btn { width: 100%; justify-content: center; padding: 13px 18px; font-size: 15px; }
.platform-note { font-size: 12.5px; }
.section { padding: 36px 0; }
.section-card { padding: 22px 16px; border-radius: 18px; }
.section-top { grid-template-columns: 1fr; gap: 10px; margin-bottom: 22px; }
.section-top-single { margin-bottom: 20px; }
.btn { font-size: 14.5px; padding: 11px 18px; border-radius: 13px; }
.cards-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
.info-card { min-height: auto; padding: 16px 12px; border-radius: 14px; }
.info-card .bubble { width: 40px; height: 40px; margin-bottom: 10px; }
.info-card h3 { font-size: 13.5px; margin-bottom: 5px; }
.info-card p { font-size: 12px; line-height: 1.5; }
.persona-grid { grid-template-columns: 1fr; gap: 12px; }
.persona-card { padding: 18px 16px; }
.persona-icon { font-size: 1.5rem; }
.persona-card h3 { font-size: 15px; }
.persona-card p { font-size: 13px; }
.persona-quote { font-size: 12.5px; padding: 8px 10px; }
.app-showcase, .showcase-two-col { grid-template-columns: 1fr !important;
    gap: 24px !important; }
.showcase-copy h2 { font-size: clamp(20px, 6vw, 26px) !important; }
.showcase-copy p { font-size: 14px; }
.showcase-points { gap: 10px; }
.showcase-point { padding: 12px 14px; border-radius: 14px; }
.showcase-point b { font-size: 13.5px; }
.showcase-point span { font-size: 12.5px; }
.showcase-actions { flex-direction: column; gap: 10px; }
.showcase-actions .btn { width: 100%; justify-content: center; }
.screenshot-strip, .screen-scroll { display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 12px !important;
    padding-bottom: 10px !important;
    margin-top: 24px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch; }
.screenshot-strip::-webkit-scrollbar, .screen-scroll::-webkit-scrollbar { display: none; }
.shot, .screen-item { flex: 0 0 130px !important;
    scroll-snap-align: start !important; }
.shot-frame { padding: 6px; border-radius: 16px; margin-bottom: 8px; }
.shot-frame img, .screen-item img, .screen-item picture { width: 100%;
    border-radius: 12px; }
.shot span, .screen-item span { font-size: 11px; }
.brand-banner { border-radius: 20px; }
.brand-banner img { width: 100%; height: auto; display: block; }
.banner-section { padding: 32px 0; }
.download { padding: 36px 0; }
.download-card { grid-template-columns: 1fr !important; min-height: auto; }
.house-mark { display: none; }
.download-content { flex-direction: column;
    text-align: center;
    gap: 16px;
    padding: 28px 20px; }
.download-content h2 { font-size: clamp(20px, 6vw, 26px); }
.download-content .btn { width: 100%; justify-content: center; }
.download-banner { flex-direction: column; text-align: center; gap: 16px; padding: 24px 18px; border-radius: 18px; }
.download-button { width: 100%; justify-content: center; }
.download-house { display: none; }
.roadmap { padding: 36px 0; }
.roadmap-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 22px; }
.roadmap-item, .rcard { padding: 16px 14px; border-radius: 14px; }
.roadmap-item h3, .rcard h3 { font-size: 14.5px; }
.roadmap-item p, .rcard p { font-size: 12.5px; }
.founder-grid { grid-template-columns: 1fr; gap: 20px; }
.founder-photo-wrap { max-width: 160px; margin: 0 auto; }
.founder-photo { aspect-ratio: 1/1; border-radius: 16px; }
.founder-copy h2 { font-size: clamp(20px, 6vw, 26px); }
.founder-copy p { font-size: 13.5px; }
.founder-tagline { font-size: 12.5px; padding: 12px; }
.about-box { padding: 16px; gap: 8px; }
.a-stat { padding: 10px 12px; gap: 8px; }
.a-icon { width: 32px; height: 32px; font-size: 0.9rem; }
.a-val { font-size: 12px; }
.a-label { font-size: 10.5px; }
.faq-layout { max-width: 100%; }
.faq-item summary { padding: 13px 14px; font-size: 14px; }
.faq-answer { padding: 10px 14px 14px; }
.faq-answer p { font-size: 13px; }
.faq-category-label { font-size: 10.5px; margin-bottom: 10px; }
.beta-hero-grid { grid-template-columns: 1fr; gap: 20px; }
.beta-status-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
.bstat-card { padding: 12px 10px; border-radius: 12px; }
.bstat-icon { font-size: 0.9rem; }
.bstat-label { font-size: 9.5px; }
.bstat-val { font-size: 12px; }
.updates-grid { grid-template-columns: 1fr; gap: 10px; }
.update-card { padding: 14px 12px; }
.update-card h3 { font-size: 13.5px; }
.update-card p { font-size: 12.5px; }
.signup-perks { gap: 6px; }
.perk { font-size: 12.5px; }
.app-download-grid, .version-card { grid-template-columns: 1fr; padding: 16px; }
.feature-detail-grid { grid-template-columns: 1fr; gap: 16px; }
.feature-detail-visual { max-width: 200px; margin: 0 auto; }
.demo-inner { grid-template-columns: 1fr; gap: 18px; }
.app-video-wrap { max-width: 220px; margin: 0 auto; }
.landing-point { grid-template-columns: 32px 1fr; gap: 10px; }
.landing-point-num { width: 32px; height: 32px; border-radius: 9px; font-size: 13px; }
.landing-point h3 { font-size: 13.5px; }
.landing-point p { font-size: 12.5px; }
.landing-cta { flex-direction: column; gap: 10px; padding-top: 20px; margin-top: 24px; }
.landing-cta .btn { width: 100%; justify-content: center; }
.contact-grid { grid-template-columns: 1fr; gap: 20px; }
.contact-card, .cform { padding: 18px 14px; }
.form-row { grid-template-columns: 1fr; }
input, select, textarea { font-size: 16px; padding: 12px 14px; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 20px; padding-bottom: 24px; }
.footer-grid > div:first-child { grid-column: 1 / -1; }
.footer-logo { width: 100px; }
.footer p { font-size: 12px; max-width: 100%; }
.footer h4 { font-size: 11.5px; margin-bottom: 8px; }
.footer a { font-size: 12.5px; margin-bottom: 6px; }
.footer-bottom { flex-direction: column; gap: 8px; text-align: center; font-size: 11px; padding-top: 16px; }
.sitelock-badge img { height: 20px; }
.thanks-card { padding: 32px 24px; border-radius: 20px; }
.thanks-icon { width: 52px; height: 52px; font-size: 22px; }
}

/* ============================================
   KLEIN SCHERM — max-width: 420px
   ============================================ */
@media (max-width: 420px) {
.container { padding: 0 16px; }
h1 { font-size: 26px !important; }
h2 { font-size: 21px !important; }
.cards-grid { grid-template-columns: 1fr; }
.beta-status-grid { grid-template-columns: 1fr; }
.feature-icons { grid-template-columns: repeat(2, 1fr); }
.shot, .screen-item { flex: 0 0 115px !important; }
.logo-img { width: 112px; max-height: 40px; }
.footer-grid { grid-template-columns: 1fr; }
.hero-visual, .hero-visual-responsive { max-width: 180px; }
.phone { max-width: 170px; }
}