:root{
    --ink:#0b1220;--ink-2:#131c2e;--ink-3:#070d18;
    --slate:#475569;--slate-2:#64748b;--muted:#94a3b8;
    --line:#e2e8f0;--line-2:#eef2f7;--bg:#fff;--soft:#f6f8fb;
    --orange:#969674;--orange-2:#aeae8a;--orange-dk:#767650;--orange-wash:#f2f2e8;
    --green:#15803d;--green-2:#22c55e;--green-wash:#e8f5ec;
    --disp:'Space Grotesk',sans-serif;--body:'Inter',system-ui,sans-serif;--mono:'JetBrains Mono',monospace;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{scroll-behavior:smooth}
  body{font-family:var(--body);color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  a{text-decoration:none;color:inherit}
  h1,h2,h3,h4{font-family:var(--disp);letter-spacing:-.02em;line-height:1.1}
  .wrap{max-width:1180px;margin:0 auto;padding:0 24px}
  .ic{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
  .ic.fill{fill:currentColor;stroke:none}
  .eyebrow{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--orange-2)}
  .btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--body);font-weight:600;border-radius:11px;padding:13px 22px;font-size:15px;cursor:pointer;border:0;transition:transform .18s,background .18s,box-shadow .18s}
  .btn .ic{width:18px;height:18px}
  .btn-orange{background:var(--orange);color:#fff;box-shadow:0 14px 28px -12px rgba(150,150,116,.7)}
  .btn-orange:hover{background:var(--orange-dk);transform:translateY(-2px)}
  .btn-ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.25)}
  .btn-ghost:hover{background:rgba(255,255,255,.16)}
  .btn-dark{background:var(--ink);color:#fff}
  .btn-dark:hover{background:var(--ink-2);transform:translateY(-2px)}
  a:focus-visible,button:focus-visible{outline:3px solid var(--orange-2);outline-offset:3px;border-radius:8px}

  /* fixed backdrop (behind canvas) + WebGL canvas */
  #bg{position:fixed;inset:0;z-index:0;background:radial-gradient(900px 500px at 78% 42%,rgba(150,150,116,.14),transparent 60%),linear-gradient(135deg,#0b1220 0%,#0a1526 55%,#070d18 100%)}
  #bg::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(720px 520px at 20% 55%,#000,transparent);mask-image:radial-gradient(720px 520px at 20% 55%,#000,transparent)}
  #gl{position:fixed;inset:0;width:100vw;height:100vh;z-index:1;pointer-events:none;transition:opacity .3s linear}
  .stage{position:relative;z-index:2}

  /* nav */
  header{position:fixed;top:0;left:0;right:0;z-index:40;transition:background .3s,border-color .3s,backdrop-filter .3s;border-bottom:1px solid transparent}
  header.solid{background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom-color:var(--line)}
  nav{display:flex;align-items:center;justify-content:space-between;height:74px}
  .logo{display:flex;align-items:center;gap:12px}
  .logo .mark{width:42px;height:42px;border-radius:11px;background:var(--orange);display:grid;place-items:center;color:#fff}
  .logo .mark .ic{width:24px;height:24px}
  .logo .txt{font-family:var(--disp);font-weight:700;font-size:18px;line-height:1.05;color:#fff;transition:color .3s}
  .logo .txt small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:#9fb0c4;font-weight:500;margin-top:2px;transition:color .3s}
  header.solid .logo .txt{color:var(--ink)} header.solid .logo .txt small{color:var(--slate-2)}
  .menu{display:flex;gap:30px;font-weight:500;font-size:15px;color:#dbe5f0;transition:color .3s}
  header.solid .menu{color:#334155}
  .menu a:hover{color:var(--orange-2)}
  .nav-cta{display:flex;gap:10px;align-items:center}
  .logo img{height:54px;width:auto;display:block;filter:drop-shadow(0 2px 8px rgba(0,0,0,.45))}
  header.solid .logo img{filter:none}
  .fprods{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
  .fprod{display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);border-radius:13px;padding:8px 15px 8px 8px;transition:transform .2s,background .2s}
  .fprod:hover{background:rgba(255,255,255,.12);transform:translateY(-3px)}
  .fprod .im{width:48px;height:48px;border-radius:9px;background-size:cover;background-position:center;flex:0 0 auto;border:1px solid rgba(255,255,255,.12)}
  .fprod .ft b{color:#fff;font-size:13px;display:block;font-family:var(--disp);font-weight:600}
  .fprod .ft small{color:#9fb0c4;font-size:10.5px;font-family:var(--mono)}

  /* ===== futuristic polish ===== */
  #progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:60;background:linear-gradient(90deg,var(--orange),var(--orange-2));box-shadow:0 0 14px rgba(150,150,116,.85)}
  @keyframes riseIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
  @keyframes lineReveal{from{transform:translateY(115%)}to{transform:translateY(0)}}
  @keyframes shine{to{background-position:200% center}}
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
  .hero .anim{opacity:0;animation:riseIn .9s cubic-bezier(.2,.7,.2,1) both}
  .hero .d1{animation-delay:.05s} .hero .d3{animation-delay:.7s} .hero .d4{animation-delay:.85s} .hero .d5{animation-delay:1s}
  .hl-line{display:block;overflow:hidden;padding-bottom:.06em}
  .hl-line>span{display:block;transform:translateY(115%);animation:lineReveal .95s cubic-bezier(.2,.75,.2,1) both}
  .hl-line:nth-child(1)>span{animation-delay:.28s}
  .hl-line:nth-child(2)>span{animation-delay:.42s}
  .hl-line:nth-child(3)>span{animation-delay:.56s}
  .hero h1 .hl{background:linear-gradient(100deg,var(--orange-2) 8%,#e5e6d3 42%,var(--orange-2) 72%);background-size:220% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:shine 5s linear infinite}
  /* card polish + staggered reveals */
  .cat:hover{box-shadow:0 26px 54px -30px rgba(11,18,32,.55),0 0 0 1px rgba(150,150,116,.35)}
  .cats .cat:nth-child(2){transition-delay:.07s} .cats .cat:nth-child(3){transition-delay:.14s}
  .cats .cat:nth-child(4){transition-delay:.21s} .cats .cat:nth-child(5){transition-delay:.28s} .cats .cat:nth-child(6){transition-delay:.35s}
  .vals .val:nth-child(2){transition-delay:.08s} .vals .val:nth-child(3){transition-delay:.16s} .vals .val:nth-child(4){transition-delay:.24s}
  .val .ic-w{transition:transform .25s} .val:hover .ic-w{transform:translateY(-4px) scale(1.06)}
  /* keyword marquee */
  .marquee{overflow:hidden;background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;position:relative;z-index:2}
  .marquee .track{display:flex;width:max-content;white-space:nowrap;animation:scrollx 32s linear infinite;font-family:var(--disp);font-weight:600;font-size:19px;color:#33415a}
  .marquee .track>span{display:inline-flex;align-items:center;gap:40px;padding-right:40px}
  .marquee .dot{color:var(--orange);font-size:13px}
  .marquee:hover .track{animation-play-state:paused}
  @keyframes scrollx{to{transform:translateX(-50%)}}

  /* hero — premium dark, its own distinct band (leads into the light clients strip) */
  .hero{min-height:100vh;display:flex;align-items:center;position:relative;isolation:isolate;
    background:
      radial-gradient(900px 560px at 84% 22%,rgba(150,150,116,.20),transparent 60%),
      radial-gradient(760px 620px at 8% 92%,rgba(56,110,220,.14),transparent 62%),
      linear-gradient(160deg,#0c1526 0%,#0a1424 46%,#060b16 100%)}
  .hero::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:52px 52px;-webkit-mask-image:radial-gradient(820px 560px at 22% 46%,#000,transparent 78%);mask-image:radial-gradient(820px 560px at 22% 46%,#000,transparent 78%);pointer-events:none}
  .hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;z-index:-1;background:linear-gradient(180deg,transparent,rgba(3,7,15,.55));pointer-events:none}
  .hero>.wrap{width:100%;position:relative;z-index:2}
  /* premium trust row under the CTA */
  .htrust{display:flex;gap:22px;flex-wrap:wrap;margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1)}
  .htrust .t{display:flex;align-items:center;gap:9px;color:#c8d4e4;font-size:13.5px;font-weight:500}
  .htrust .t .ic{width:17px;height:17px;color:var(--orange-2)}
  .hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center}
  .hero-inner{max-width:600px;color:#fff}
  .hero h1{font-size:clamp(32px,4.6vw,56px);font-weight:700;margin:18px 0 20px}

  /* hero carousel — real work + materials */
  .carousel{position:relative;border-radius:20px;overflow:hidden;background:#0a1120;box-shadow:0 50px 110px -45px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.09),inset 0 0 0 1px rgba(255,255,255,.05);aspect-ratio:4/3}
  .hero-media{position:relative}
  .hero-media::before{content:"";position:absolute;inset:-14px;z-index:-1;border-radius:28px;background:linear-gradient(140deg,rgba(150,150,116,.28),transparent 55%);filter:blur(24px);opacity:.7}
  .carousel .slides{position:absolute;inset:0}
  .carousel .slide{position:absolute;inset:0;opacity:0;transform:scale(1.04);transition:opacity .8s ease,transform 6s ease}
  .carousel .slide.on{opacity:1;transform:scale(1)}
  .carousel .slide img{width:100%;height:100%;object-fit:cover;display:block}
  .carousel .slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,12,24,.05) 40%,rgba(6,12,24,.82) 100%)}
  .carousel .cap{position:absolute;left:18px;right:18px;bottom:16px;z-index:3;color:#fff;display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
  .carousel .cap b{font-family:var(--disp);font-weight:600;font-size:16px;display:block}
  .carousel .cap small{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:#c9d5e4}
  .carousel .tag{flex:0 0 auto;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:rgba(10,17,32,.5);backdrop-filter:blur(4px);display:inline-flex;align-items:center;gap:6px;color:#fff}
  .carousel .tag.mat{color:#e5e6d3;border-color:rgba(150,150,116,.5);background:rgba(150,150,116,.18)}
  .carousel .tag .ic{width:13px;height:13px}
  .carousel .nav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(10,17,32,.55);backdrop-filter:blur(6px);color:#fff;display:grid;place-items:center;cursor:pointer;transition:.18s;opacity:0}
  .carousel:hover .nav{opacity:1}
  .carousel .nav:hover{background:var(--orange);border-color:var(--orange)}
  .carousel .nav.prev{left:12px} .carousel .nav.next{right:12px} .carousel .nav .ic{width:20px;height:20px}
  .carousel .nav.prev .ic{transform:rotate(180deg)}
  .hero-media{align-self:center}
  .carousel .dots{position:absolute;top:14px;left:14px;z-index:4;display:flex;gap:7px}
  .carousel .dots button{width:8px;height:8px;border-radius:50%;border:0;background:rgba(255,255,255,.4);cursor:pointer;padding:0;transition:.2s}
  .carousel .dots button.on{background:var(--orange-2);width:22px;border-radius:5px}
  .car-under{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;flex-wrap:wrap}
  .car-under .cu-note{font-family:var(--mono);font-size:11px;color:#8ea0b6;display:flex;align-items:center;gap:7px}
  .car-under .cu-note .ic{width:14px;height:14px;color:var(--orange-2)}

  /* clients / trusted-by strip */
  .clients{background:var(--soft);border-bottom:1px solid var(--line);padding:34px 0;position:relative;z-index:2}
  .clients .lab{text-align:center;font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--slate-2);margin-bottom:22px}
  .clients .row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px}
  .clients .cl{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:66px;padding:8px 22px;border:1px solid var(--line);border-radius:12px;background:#fff;transition:.2s;min-width:150px}
  .clients .cl:hover{transform:translateY(-3px);box-shadow:0 18px 34px -22px rgba(11,18,32,.5);border-color:rgba(150,150,116,.35)}
  .clients .cl img{max-height:32px;max-width:120px;width:auto;display:block;filter:grayscale(1) opacity(.58);transition:filter .25s}
  .clients .cl:hover img{filter:grayscale(0) opacity(1)}
  .clients .cl b{font-family:var(--disp);font-weight:700;font-size:16px;color:#334155;letter-spacing:-.01em;line-height:1.1}
  .clients .cl small{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  .clients .foot{text-align:center;font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:16px}
  @media(max-width:900px){.hero{align-items:flex-start;min-height:auto;padding-top:98px;padding-bottom:54px}.hero-grid{grid-template-columns:1fr;gap:30px}.hero-inner{max-width:none}.carousel{aspect-ratio:16/10}}
  .hero h1 .hl{color:var(--orange-2)}
  .hero p{font-size:clamp(15px,1.6vw,19px);color:#c2cedd;max-width:520px;margin-bottom:30px}
  .hero-cta{display:flex;gap:13px;flex-wrap:wrap}
  .scrollcue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);color:#8ea0b6;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px}
  .scrollcue .m{width:22px;height:34px;border:2px solid #47566b;border-radius:12px;position:relative}
  .scrollcue .m::after{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:3px;height:6px;border-radius:2px;background:var(--orange-2);animation:wheel 1.5s infinite}
  @keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}100%{opacity:0;transform:translate(-50%,10px)}}

  /* showcase (pipe stays visible, text overlays on dark) */
  .showcase{min-height:90vh;display:flex;align-items:center;position:relative;color:#fff}
  .showcase .wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
  .showcase .copy{max-width:560px}
  .showcase h2{font-size:clamp(30px,3.9vw,46px);font-weight:700;margin:14px 0 18px}
  .showcase p{color:#aebbcd;font-size:17.5px;margin-bottom:24px}
  .showcase .spec-list .r{font-size:15.5px}
  .spec-list{display:flex;flex-direction:column;gap:12px}
  .spec-list .r{display:flex;gap:12px;align-items:center;font-size:14.5px;color:#dbe5f0}
  .spec-list .r .ic{width:20px;height:20px;color:var(--orange-2)}

  /* sections */
  section.light{background:var(--bg);position:relative;z-index:2}
  .pad{padding:92px 0}
  .sec-head{max-width:720px;margin:0 auto 52px;text-align:center}
  .sec-head h2{font-size:clamp(28px,3.4vw,38px);font-weight:700;margin:12px 0 12px}
  .sec-head p{color:var(--slate);font-size:17px}

  /* products */
  .cats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .cat{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;transition:transform .25s,box-shadow .25s,border-color .25s}
  .cat:hover{transform:translateY(-6px);box-shadow:0 24px 50px -30px rgba(11,18,32,.5);border-color:transparent}
  .cat .top{height:140px;display:grid;place-items:center;position:relative;color:#fff}
  .cat .top .ic{width:44px;height:44px;position:relative;z-index:2}
  .cat .top::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);background-size:22px 22px}
  .cat:nth-child(1) .top{background:linear-gradient(135deg,#475569,#334155)}
  .cat:nth-child(2) .top{background:linear-gradient(135deg,#1d4ed8,#1e3a8a)}
  .cat:nth-child(3) .top{background:linear-gradient(135deg,#0891b2,#155e75)}
  .cat:nth-child(4) .top{background:linear-gradient(135deg,#15803d,#166534)}
  .cat:nth-child(5) .top{background:linear-gradient(135deg,#969674,#767650)}
  .cat .b{padding:20px 22px 24px}
  .cat h3{font-size:18px;margin-bottom:7px}
  .cat p{font-size:13.5px;color:var(--slate)}

  /* value props */
  .vals{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
  .val{text-align:center;padding:8px}
  .val .ic-w{width:58px;height:58px;border-radius:16px;background:var(--orange-wash);color:var(--orange-dk);display:grid;place-items:center;margin:0 auto 14px}
  .val .ic-w .ic{width:26px;height:26px}
  .val h4{font-size:16.5px;margin-bottom:6px}
  .val p{font-size:13.5px;color:var(--slate)}

  /* about band */
  .about{background:var(--ink);color:#fff;position:relative;overflow:hidden;z-index:2}
  .about .glow{position:absolute;top:-160px;right:-120px;width:480px;height:480px;background:radial-gradient(circle,rgba(150,150,116,.16),transparent 60%)}
  .about .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
  .about h2{font-size:clamp(26px,3.2vw,36px);font-weight:700;margin:12px 0 16px}
  .about p.lead{color:#aebbcd;font-size:16px;margin-bottom:20px}
  .vm{display:flex;flex-direction:column;gap:16px}
  .vm .c{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:20px 22px}
  .vm .c h4{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-2);margin-bottom:8px}
  .vm .c p{font-size:14.5px;color:#cdd8e6;margin:0}

  /* sustainability strip */
  .eco{background:linear-gradient(135deg,#0f5132,#15803d);color:#fff;position:relative;overflow:hidden;z-index:2}
  .eco::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:40px 40px;mask-image:radial-gradient(600px 300px at 80% 20%,#000,transparent)}
  .eco .wrap{position:relative;z-index:2;display:flex;align-items:center;gap:24px;flex-wrap:wrap;justify-content:space-between}
  .eco .l{display:flex;gap:18px;align-items:center;max-width:640px}
  .eco .l .ic-w{width:56px;height:56px;border-radius:15px;background:rgba(255,255,255,.14);display:grid;place-items:center;flex:0 0 auto}
  .eco .l .ic-w .ic{width:28px;height:28px}
  .eco h3{font-size:23px;margin-bottom:5px}
  .eco p{color:#d4f0de;font-size:14.5px}

  /* cta */
  .cta{text-align:center;background:linear-gradient(135deg,var(--orange),#767650);border-radius:26px;color:#fff;padding:60px 30px;position:relative;overflow:hidden}
  .cta::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:40px 40px;mask-image:radial-gradient(600px 300px at 50% 0%,#000,transparent)}
  .cta h2{font-size:clamp(26px,3.4vw,36px);font-weight:700;margin-bottom:11px;position:relative}
  .cta p{font-size:17px;margin-bottom:24px;color:#edefe0;position:relative}
  .cta .row{position:relative;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

  /* footer */
  footer{background:var(--ink-3);color:#8497ad;padding:60px 0 26px;font-size:14px;position:relative;z-index:2}
  .fgrid{display:grid;grid-template-columns:1.5fr 1fr .9fr 1.1fr;gap:34px;margin-bottom:40px}
  footer h5{color:#fff;font-size:14px;margin-bottom:16px}
  footer .col a,.col .li{display:block;color:#8497ad;margin-bottom:10px}
  footer .col a:hover{color:var(--orange-2)}
  .fbot{border-top:1px solid rgba(255,255,255,.08);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:#647588;font-size:13px}

  /* ===== app (coming soon) ===== */
  .app-card{position:relative;display:grid;grid-template-columns:1.12fr .88fr;gap:44px;align-items:center;background:linear-gradient(135deg,#0e1729,#0a1120 58%,#101a2e);border:1px solid rgba(255,255,255,.07);border-radius:28px;padding:58px 56px;color:#fff;overflow:hidden}
  .app-card::before{content:"";position:absolute;inset:0;background:radial-gradient(560px 340px at 84% 14%,rgba(150,150,116,.2),transparent 62%)}
  .app-card::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(640px 420px at 80% 30%,#000,transparent);mask-image:radial-gradient(640px 420px at 80% 30%,#000,transparent)}
  .app-copy,.app-visual{position:relative;z-index:2}
  .chip-soon{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#7ef7ab;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.32);padding:7px 14px;border-radius:20px}
  .dot-pulse{width:8px;height:8px;border-radius:50%;background:#22c55e;animation:pulse 1.8s infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(126,247,171,.55)}70%{box-shadow:0 0 0 9px rgba(126,247,171,0)}100%{box-shadow:0 0 0 0 rgba(126,247,171,0)}}
  .app-card h2{font-size:clamp(28px,3.6vw,42px);font-weight:700;margin:18px 0 14px}
  .app-card h2 .grad{background:linear-gradient(100deg,var(--orange-2) 10%,#e5e6d3 55%,var(--orange-2) 95%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
  .app-copy>p{color:#aebbcd;font-size:16.5px;max-width:480px;margin-bottom:20px}
  .app-feats{list-style:none;display:flex;flex-direction:column;gap:11px;margin:0 0 26px}
  .app-feats li{display:flex;gap:12px;align-items:center;font-size:14.5px;color:#dbe5f0}
  .app-feats .ic{width:19px;height:19px;color:var(--orange-2)}
  .store-badges{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px}
  .store{display:inline-flex;align-items:center;gap:11px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:9px 16px;min-width:176px}
  .store .slogo{width:24px;height:24px;fill:#fff;flex:0 0 auto}
  .store small{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:#9fb0c4;line-height:1.4}
  .store b{font-family:var(--disp);font-size:15.5px;line-height:1.1;color:#fff}
  .wait-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
  .wl-note{font-size:13px;color:#8ea2b8}
  .app-visual{display:flex;align-items:center;justify-content:center;gap:28px}
  .phone{width:224px;height:456px;border-radius:36px;background:#0d1526;border:1px solid rgba(255,255,255,.16);box-shadow:0 44px 90px -44px rgba(0,0,0,.85),0 0 0 7px rgba(255,255,255,.045);padding:11px;transform:rotate(3deg);flex:0 0 auto;animation:floaty 6s ease-in-out infinite}
  .phone-screen{background:linear-gradient(180deg,#111d33,#0b1220);border-radius:26px;height:100%;padding:20px 15px 14px;display:flex;flex-direction:column;gap:11px;overflow:hidden}
  .ph-brand{display:flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:700;font-size:12.5px;color:#fff}
  .ph-brand .dot{width:22px;height:22px;border-radius:7px;background:var(--orange);display:grid;place-items:center}
  .ph-brand .dot .ic{width:12px;height:12px;color:#fff}
  .ph-search{height:32px;border-radius:9px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09);display:flex;align-items:center;padding:0 11px;font-size:10px;color:#7d90a7}
  .ph-card{border-radius:12px;padding:12px 13px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);display:flex;align-items:center;gap:10px}
  .ph-card.hot{background:linear-gradient(120deg,rgba(150,150,116,.28),rgba(150,150,116,.1));border-color:rgba(150,150,116,.4)}
  .ph-card .pic{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.1);display:grid;place-items:center;flex:0 0 auto}
  .ph-card .pic .ic{width:15px;height:15px;color:var(--orange-2)}
  .ph-card b{display:block;font-family:var(--disp);font-size:11.5px;color:#fff;line-height:1.25}
  .ph-card small{font-size:9px;color:#8ea2b8}
  .ph-bar{margin-top:auto;height:36px;border-radius:11px;background:var(--orange);display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:11px;color:#fff;letter-spacing:.04em}
  .qr{text-align:center;color:#8ea2b8;font-family:var(--mono);font-size:10.5px;line-height:1.5}
  .qr-box{width:112px;height:112px;border-radius:14px;background:#fff;padding:10px;margin:0 auto 9px;box-shadow:0 18px 40px -22px rgba(0,0,0,.7)}
  .qr-box svg{width:100%;height:100%;display:block}
  @media(max-width:900px){.app-card{grid-template-columns:1fr;padding:44px 28px}.phone{transform:rotate(0)}.app-visual{flex-wrap:wrap}}

  /* reveal */
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
  .reveal.in{opacity:1;transform:none}

  /* ===== premium polish ===== */
  ::selection{background:var(--orange);color:#fff}
  .btn{position:relative;overflow:hidden}
  .btn-orange::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 32%,rgba(255,255,255,.28) 50%,transparent 68%);transform:translateX(-130%);transition:transform .55s ease}
  .btn-orange:hover::after{transform:translateX(130%)}
  header.solid{box-shadow:0 12px 34px -26px rgba(11,18,32,.4)}
  .cat .top .ic{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
  .cat:hover .top .ic{transform:scale(1.12) rotate(-3deg)}
  .vm .c{transition:transform .25s,border-color .25s}
  .vm .c:hover{transform:translateY(-3px);border-color:rgba(150,150,116,.4)}
  .fbot a:hover{color:var(--orange-2)}
  @media (prefers-reduced-motion: reduce){.btn-orange::after{display:none}.phone{animation:none}.dot-pulse{animation:none}}

  @media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}.reveal{opacity:1;transform:none}.hero .anim{opacity:1!important}.hl-line>span{transform:none!important}#progress{display:none}}
  @media(max-width:900px){
    .menu{display:none}
    .showcase .wrap,.about .wrap{grid-template-columns:1fr}
    .cats{grid-template-columns:1fr 1fr}
    .vals{grid-template-columns:1fr 1fr}
    .fgrid{grid-template-columns:1fr 1fr}
    #gl{opacity:.5}
  }
  @media(max-width:560px){.cats,.vals,.fgrid{grid-template-columns:1fr}}

  /* mobile nav (hamburger) */
  nav{position:relative}
  .navtog{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
  .hamb{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;align-items:center;justify-content:center;color:var(--ink);padding:0;flex:0 0 auto}
  .hamb svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
  @media(max-width:900px){
    .menu{display:none!important}
    .hamb{display:inline-flex}
    .navtog:checked ~ .menu{display:flex!important;flex-direction:column;position:absolute;top:calc(100% + 1px);left:0;right:0;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 24px 40px -22px rgba(11,18,32,.45);padding:6px 24px 14px;gap:0;z-index:60}
    .navtog:checked ~ .menu a{padding:13px 2px;border-bottom:1px solid var(--line);color:#334155!important;font-size:16px;text-align:left}
    .navtog:checked ~ .menu a:last-child{border-bottom:0}
  }

/* mobile header fix */
header{padding-top:env(safe-area-inset-top,0px)}
@media(max-width:900px){.logo img{height:46px}nav{height:64px}.nav-cta{order:2;margin-left:auto}.hamb{order:3;margin-left:8px}}

/* ===== Fixed-header clearance: include iOS safe-area (notch) so content is never hidden under the fixed header on any device ===== */
.stockbar{margin-top:calc(75px + env(safe-area-inset-top,0px))}
@media(max-width:900px){.hero{padding-top:calc(98px + env(safe-area-inset-top,0px))}}