:root{
    --accent:#44B7D9;
    --accent-rgb:68,183,217;
    --accent-deep:#26708B;
    --glow:0.6;
    --ink:#0A0B0D;
    --paper:#F2F2F2;
    --white:#FAFBFC;
    --mut:rgba(250,251,252,.55);
    --mut-dark:rgba(10,11,13,.58);
    --line:rgba(250,251,252,.12);
    --line-dark:rgba(10,11,13,.14);
    --font-display:'Space Grotesk',sans-serif;
    --font-mono:'JetBrains Mono',monospace;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html.is-loading{overflow:hidden}
  body{font-family:var(--font-display);background:#0A0B0D;color:var(--white);-webkit-font-smoothing:antialiased;overflow-x:hidden}
  body.nav-locked{overflow:hidden}
  a{color:inherit;text-decoration:none}
  img{display:block;max-width:100%}
  section{position:relative}
  .wrap{width:min(1300px,92vw);margin:0 auto}
  .w{display:inline-block;overflow:hidden;vertical-align:bottom}
  .wi{display:inline-block;will-change:transform}
  [data-split]{visibility:hidden}
  .ln-w{display:inline-block;overflow:hidden;vertical-align:bottom}
  .ln{display:inline-block;will-change:transform}
  .kicker{font-family:var(--font-mono);font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--accent)}
  .chapter{font-family:var(--font-mono);font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--mut);display:flex;align-items:center;gap:14px;margin-bottom:26px}
  .chapter i{font-style:normal;color:var(--accent)}
  .chapter::after{content:'';flex:1;height:1px;background:var(--line)}
  .light .chapter{color:var(--mut-dark)}
  .light .chapter::after{background:var(--line-dark)}
  .light .chapter i{color:var(--accent-deep)}
  .light .kicker{color:var(--accent-deep)}
  .btn{display:inline-flex;align-items:center;gap:12px;font-weight:600;font-size:16px;background:var(--accent);color:#06272f;
    border:none;cursor:pointer;padding:18px 36px;border-radius:100px;transition:box-shadow .35s;will-change:transform;font-family:inherit}
  .btn:hover{box-shadow:0 18px 44px rgba(var(--accent-rgb),.35)}
  .btn[disabled]{opacity:.55;cursor:progress}
  .breath{height:20vh}
  :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
  /* Arrow glyphs are drawn, not typed — no text arrows or emoji in the UI. */
  .ico-arr{width:1em;height:1em;flex:0 0 auto;display:inline-block;vertical-align:-0.12em}

  /* preloader */
  .preloader{position:fixed;inset:0;z-index:1000;background:#0A0B0D;display:flex;flex-direction:column;justify-content:flex-end;padding:6vw}
  .preloader img{width:260px;height:auto;margin-bottom:auto;margin-top:6vh}
  .pre-num{font-weight:600;font-size:clamp(80px,14vw,220px);line-height:.85;letter-spacing:-.05em;color:var(--white)}
  .pre-bar{width:100%;height:1px;background:var(--line);margin-top:30px}
  .pre-bar-fill{height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}

  /* nav */
  .site-nav{position:fixed;top:0;left:0;right:0;z-index:900;display:flex;align-items:center;justify-content:space-between;
    padding:22px 4vw;transition:.4s;border-bottom:1px solid transparent}
  .site-nav.scrolled{background:rgba(10,11,13,.82);backdrop-filter:blur(18px);padding:14px 4vw;border-bottom-color:var(--line)}
  .site-nav .logo{flex:0 0 auto}
  .site-nav .logo img{height:32px;width:auto;max-width:none}
  .site-nav .logo .logo-l{display:none}
  .nav-links{display:flex;gap:36px;font-size:15px;font-weight:500}
  .nav-links a{color:var(--mut)}
  .nav-links a:hover{color:var(--white)}
  .nav-right{display:flex;align-items:center;gap:20px}
  .nav-ch{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:11px;color:var(--mut)}
  .nav-ch-line{width:72px;height:1px;background:var(--line);display:block;overflow:hidden}
  .nav-ch-line i{display:block;height:100%;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}
  .lang-sw{display:flex;font-family:var(--font-mono);font-size:12px;border:1px solid var(--line);border-radius:100px;overflow:hidden}
  .lang-btn{background:transparent;border:none;color:var(--mut);padding:7px 12px;cursor:pointer;font-family:inherit;font-size:inherit}
  .lang-btn.active{background:var(--accent);color:#06272f}
  .nav-cta{font-weight:600;font-size:15px;background:var(--white);color:var(--ink);padding:11px 24px;border-radius:100px;transition:background .3s}
  .nav-cta:hover{background:var(--accent)}
  .nav-burger{display:none;background:transparent;border:0;cursor:pointer;padding:8px;color:var(--white)}
  .nav-burger span{display:block;width:22px;height:2px;background:currentColor;margin:5px 0;transition:.3s}
  .nav-mobile{position:fixed;inset:0;z-index:899;background:rgba(10,11,13,.97);backdrop-filter:blur(20px);
    display:flex;flex-direction:column;justify-content:center;gap:8px;padding:12vh 8vw;
    transform:translateY(-100%);transition:transform .45s cubic-bezier(.5,0,.2,1);visibility:hidden}
  .nav-mobile.open{transform:translateY(0);visibility:visible}
  .nav-mobile a{font-size:clamp(28px,7vw,44px);font-weight:600;letter-spacing:-.02em;padding:10px 0;border-bottom:1px solid var(--line)}
  .nav-mobile .nm-cta{margin-top:28px;border:none;color:var(--accent)}
  body[data-theme="light"] .site-nav.scrolled{background:rgba(242,242,242,.86);border-bottom-color:var(--line-dark)}
  body[data-theme="light"] .site-nav .nav-links a{color:var(--mut-dark)}
  body[data-theme="light"] .site-nav .nav-links a:hover{color:var(--ink)}
  body[data-theme="light"] .site-nav .lang-sw{border-color:var(--line-dark)}
  body[data-theme="light"] .site-nav .lang-btn{color:var(--mut-dark)}
  body[data-theme="light"] .site-nav .lang-btn.active{color:#06272f}
  body[data-theme="light"] .site-nav .nav-cta{background:var(--ink);color:var(--white)}
  body[data-theme="light"] .site-nav .logo .logo-d{display:none}
  body[data-theme="light"] .site-nav .logo .logo-l{display:block}
  body[data-theme="light"] .site-nav .nav-ch{color:var(--mut-dark)}
  body[data-theme="light"] .site-nav .nav-ch-line{background:var(--line-dark)}
  body[data-theme="light"] .site-nav .nav-ch-line i{background:var(--accent-deep)}
  body[data-theme="light"] .nav-burger{color:var(--ink)}

  /* CH01 hero */
  .hero{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:clip;padding:16vh 0 8vh}
  .hero-bg{position:absolute;inset:0;pointer-events:none}
  .hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.5;will-change:transform}
  .hero-bg::after{content:'';position:absolute;inset:0;background:
    radial-gradient(ellipse 75% 65% at 50% 45%, rgba(10,11,13,.42) 0%, rgba(10,11,13,.94) 78%),
    linear-gradient(rgba(10,11,13,.35), rgba(10,11,13,.92))}
  .hero-inner{position:relative;z-index:2;width:min(1150px,92vw)}
  .hero .chapter{justify-content:center;max-width:420px;margin:0 auto 30px}
  .hero .chapter::before{content:'';flex:1;height:1px;background:var(--line)}
  .hero h1{font-size:clamp(50px,7.2vw,120px);font-weight:600;letter-spacing:-.035em;line-height:1.0}
  .hero h1 .rot{color:var(--accent);text-shadow:0 0 50px rgba(var(--accent-rgb), calc(.6 * var(--glow) * 1.5))}
  .hero-sub{font-size:clamp(17px,1.45vw,22px);line-height:1.55;color:var(--mut);max-width:50ch;margin:36px auto 0}
  .hero-ctas{display:flex;justify-content:center;gap:18px;margin-top:52px;flex-wrap:wrap}
  .hero-ghost{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:16px;padding:18px 32px;border-radius:100px;border:1px solid var(--line);color:var(--white);transition:border-color .3s}
  .hero-ghost:hover{border-color:var(--accent)}

  /* marquee */
  .mq{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 0;white-space:nowrap;background:#0A0B0D;position:relative;z-index:2}
  .mq-inner{display:inline-flex;gap:60px;will-change:transform}
  .mq-inner span{font-size:clamp(20px,2vw,30px);font-weight:600;text-transform:uppercase;letter-spacing:-.01em;display:inline-flex;align-items:center;gap:60px;color:var(--white)}
  .ico-globe{width:.72em;height:.72em;flex:0 0 auto;color:var(--accent)}

  /* CH02 compare */
  .compare{height:100vh;overflow:hidden}
  .cmp-pane{position:absolute;inset:0;display:flex;align-items:center}
  .cmp-before{background:#101114}
  .cmp-after{background:linear-gradient(150deg,#07242e 0%, #0A0B0D 65%);will-change:clip-path}
  .cmp-handle{position:absolute;top:0;bottom:0;width:1px;background:var(--accent);z-index:5;box-shadow:0 0 26px rgba(var(--accent-rgb),.8)}
  .cmp-inner{width:min(1300px,92vw);margin:0 auto}
  .cmp-tag{font-family:var(--font-mono);font-size:12px;letter-spacing:.26em;text-transform:uppercase;display:block;margin-bottom:24px}
  .cmp-before .cmp-tag{color:rgba(250,251,252,.4)}
  .cmp-after .cmp-tag{color:var(--accent)}
  .cmp-pane h2{font-size:clamp(34px,3.8vw,62px);font-weight:600;letter-spacing:-.025em;line-height:1.04;max-width:20ch}
  .cmp-before h2{color:rgba(250,251,252,.45)}
  .cmp-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:52px}
  .cmp-card{display:flex;flex-direction:column;gap:14px}
  .cc-img{width:100%;height:auto;aspect-ratio:3/4;border-radius:12px;background:rgba(255,255,255,.025);
    border:1px solid rgba(255,255,255,.08);object-fit:cover}
  /* The name leads the card. A hairline anchors it and a min-height keeps the
     four images on one baseline when a label wraps to two lines and its
     neighbour does not. */
  .cmp-card .cc-lbl{font-size:clamp(14px,1.05vw,16px);font-weight:600;line-height:1.3;letter-spacing:-.005em;
    color:rgba(250,251,252,.95);padding-top:14px;border-top:1px solid rgba(250,251,252,.16);
    min-height:calc(2.6em + 14px)}
  .cmp-after .cc-sol{overflow:hidden;border:1px solid rgba(var(--accent-rgb),.4);background:rgba(var(--accent-rgb),.06);aspect-ratio:3/4;border-radius:12px;
    display:flex;flex-direction:column;padding:0}
  .cmp-after .cc-sol .cs-img{width:100%;flex:1;min-height:0;object-fit:cover;object-position:top center;
    border-bottom:1px solid rgba(var(--accent-rgb),.28)}
  .cmp-after .cc-sol .cs-txt{padding:11px 16px 13px;display:flex;flex-direction:column;gap:3px;background:rgba(7,36,46,.55)}
  .cmp-after .cc-sol b{font-size:clamp(16px,1.3vw,20px);font-weight:600;line-height:1.2}
  .cmp-after .cc-sol span{font-family:var(--font-mono);font-size:12px;color:var(--accent)}

  /* CH03 capabilities */
  .caps{height:100vh;overflow:hidden;color:var(--ink);background:var(--paper)}
  .caps-head{position:absolute;top:8vh;left:50%;transform:translateX(-50%);width:min(1300px,92vw);z-index:2}
  .caps-head h2{font-size:clamp(32px,3.4vw,54px);font-weight:600;letter-spacing:-.02em}
  .stack-zone{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
  .stack-card{position:absolute;width:min(1180px,90vw);height:min(60vh,560px);display:grid;grid-template-columns:1fr 1.05fr;
    border-radius:16px;overflow:hidden;background:var(--ink);color:var(--white);top:calc(50% - min(30vh,280px) + 4vh);
    box-shadow:0 40px 90px rgba(10,11,13,.35);will-change:transform}
  .stack-card .sc-txt{padding:clamp(28px,4vw,60px);display:flex;flex-direction:column;justify-content:space-between}
  .stack-card .sc-num{font-family:var(--font-mono);font-size:13px;color:var(--accent);letter-spacing:.22em}
  .stack-card h3{font-size:clamp(26px,2.5vw,42px);font-weight:600;letter-spacing:-.02em;line-height:1.1;margin:18px 0 16px}
  .stack-card p{font-size:clamp(15px,1.15vw,18px);line-height:1.6;color:var(--mut);max-width:42ch}
  .stack-card .sc-img{position:relative;overflow:hidden}
  .stack-card .sc-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top}
  .stack-card:nth-child(2){background:#0e1c24}
  .stack-card:nth-child(3){background:#101114}

  /* CH04 devstory */
  .devstory{height:100vh;overflow:hidden;background:#0A0B0D}
  .ds-grid{position:absolute;inset:0;display:grid;grid-template-columns:0.8fr 1.5fr;gap:4vw;align-items:center;width:min(1400px,94vw);margin:0 auto;left:0;right:0;padding-top:6vh}
  .ds-left h2{font-size:clamp(34px,3.8vw,62px);font-weight:600;letter-spacing:-.03em;margin:20px 0 40px}
  .plat-means{font-family:var(--font-mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--mut);margin-bottom:16px}
  .seq-caps{display:flex;flex-direction:column;gap:2px}
  .seq-cap{font-size:clamp(15px,1.2vw,19px);font-weight:500;padding:11px 0 11px 20px;color:rgba(250,251,252,.28);transition:color .4s;border-left:1px solid var(--line);position:relative}
  .seq-cap::before{content:'';position:absolute;left:-1px;top:0;bottom:0;width:1px;background:var(--accent);transform:scaleY(0);transition:transform .4s;transform-origin:top}
  .seq-cap.active{color:var(--white)}
  .seq-cap.active::before{transform:scaleY(1)}
  .ds-link{display:inline-flex;gap:10px;margin-top:36px;font-weight:600;font-size:16px;color:var(--accent);border-bottom:1px solid rgba(var(--accent-rgb),.4);padding-bottom:5px}
  .ds-devices{position:relative;will-change:transform}
  .dev-monitor .scr{background:#000;border-radius:14px;padding:14px;box-shadow:0 50px 120px rgba(0,0,0,.65), 0 0 90px rgba(var(--accent-rgb), calc(.12 * var(--glow) * 2))}
  .dev-monitor .scr-img{border-radius:6px;overflow:hidden;aspect-ratio:1348/838;background:#0d0f13;position:relative}
  .dev-monitor .scr-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s}
  .dev-monitor .scr-img img.on{opacity:1}
  .dev-monitor .neck{width:12%;height:54px;background:linear-gradient(#1a1d22,#101216);margin:0 auto}
  .dev-monitor .foot{width:32%;height:12px;background:#16181d;border-radius:0 0 10px 10px;margin:0 auto}
  .dev-phone{position:absolute;right:-4%;bottom:-6%;width:21%;z-index:2;will-change:transform}
  .dev-phone .ph{background:#000;border-radius:10.5%/5%;padding:5.5%;box-shadow:0 34px 80px rgba(0,0,0,.7)}
  .dev-phone .ph-img{border-radius:7%/3.4%;overflow:hidden;aspect-ratio:304/698;background:#0d0f13;position:relative}
  .dev-phone .ph-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;opacity:0;transition:opacity .35s}
  .dev-phone .ph-img img.on{opacity:1}

  /* CH05 about */
  .about{padding:19vh 0;color:var(--ink);background:var(--paper)}
  .about-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:6vw;align-items:center;margin-top:34px}
  .about h2{font-family:var(--font-mono);font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent-deep);margin-top:24px}
  .about .big{font-size:clamp(28px,2.9vw,48px);font-weight:500;letter-spacing:-.02em;line-height:1.22;margin-top:24px}
  .about-link{display:inline-flex;gap:10px;margin-top:38px;font-weight:600;font-size:16px;color:var(--ink);border-bottom:2px solid var(--accent);padding-bottom:5px}
  .about-img .ai-img{width:100%;height:auto;aspect-ratio:4/5;border-radius:16px;object-fit:cover}

  /* CH06 numbers */
  .numbers{padding:20vh 0}
  .num-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);margin-top:60px}
  .num-cell{padding:60px 40px 12px;border-left:1px solid var(--line)}
  .num-cell:first-child{border-left:none;padding-left:0}
  .num-val{font-size:clamp(70px,7.5vw,128px);font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}
  .num-lbl{margin-top:22px;font-size:17px;color:var(--mut);line-height:1.45}
  .numbers h2{font-size:clamp(32px,3.4vw,54px);font-weight:600;letter-spacing:-.02em;margin-top:20px}

  /* CH07 pricing — light */
  .pricing{padding:18vh 0 16vh;color:var(--ink);background:var(--paper)}
  .pr-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap}
  .pricing h2{font-size:clamp(32px,3.4vw,54px);font-weight:600;letter-spacing:-.02em;max-width:16ch}
  .pr-sub{font-size:clamp(16px,1.25vw,19px);line-height:1.55;color:var(--mut-dark);max-width:46ch;margin-top:18px}
  .pr-toggle{display:inline-flex;align-items:center;gap:14px}
  .pr-tgs{display:flex;border:1px solid var(--line-dark);border-radius:100px;overflow:hidden;background:rgba(10,11,13,.03)}
  .pr-tg{background:transparent;border:none;cursor:pointer;font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;
    text-transform:uppercase;padding:11px 20px;color:var(--mut-dark)}
  .pr-tg.active{background:var(--ink);color:var(--white)}
  .pr-save{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:var(--accent-deep)}
  .pr-stale{font-family:var(--font-mono);font-size:12px;color:var(--mut-dark);margin-top:20px}
  .pr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:60px;align-items:stretch}
  .pr-card{display:flex;flex-direction:column;border:1px solid var(--line-dark);border-radius:16px;padding:34px 30px;
    background:rgba(255,255,255,.5);position:relative}
  .pr-card.is-popular{border-color:rgba(var(--accent-rgb),.55);background:rgba(var(--accent-rgb),.05);
    box-shadow:0 24px 60px rgba(var(--accent-rgb),.14)}
  .pr-badge{position:absolute;top:-11px;left:30px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;
    text-transform:uppercase;background:var(--accent);color:#06272f;padding:5px 12px;border-radius:100px;font-weight:600}
  .pr-name{font-size:20px;font-weight:600;letter-spacing:-.01em}
  .pr-price{margin-top:20px;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
  .pr-from{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut-dark)}
  .pr-val{font-size:clamp(38px,3.6vw,54px);font-weight:600;letter-spacing:-.035em;line-height:1}
  .pr-unit{font-size:15px;color:var(--mut-dark)}
  .pr-custom{font-size:clamp(30px,3vw,42px);font-weight:600;letter-spacing:-.03em}
  .pr-trial{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--accent-deep);margin-top:12px;min-height:1.2em}
  .pr-feats{list-style:none;margin:26px 0 30px;display:flex;flex-direction:column;gap:13px;flex:1}
  .pr-feats li{font-size:15px;line-height:1.5;color:rgba(10,11,13,.78);padding-left:26px;position:relative}
  .pr-feats li::before{content:'';position:absolute;left:0;top:.5em;width:12px;height:2px;background:var(--accent-deep)}
  .pr-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:600;font-size:15px;
    padding:15px 26px;border-radius:100px;border:1px solid var(--ink);color:var(--ink);transition:.3s;text-align:center}
  .pr-cta:hover{background:var(--ink);color:var(--white)}
  .pr-cta-solid{background:var(--accent);border-color:var(--accent);color:#06272f}
  .pr-cta-solid:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:var(--white)}
  .pr-foot{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-top:44px;align-items:flex-start}
  .pr-note{font-size:14.5px;line-height:1.6;color:var(--mut-dark);max-width:64ch}
  .pr-all{display:inline-flex;gap:9px;font-weight:600;font-size:15px;color:var(--ink);border-bottom:2px solid var(--accent);padding-bottom:5px;white-space:nowrap;min-height:44px;align-items:center}

  /* CH08 closing */
  .closing{min-height:100vh;display:flex;align-items:center;text-align:center;overflow:clip;background:#05161c}
  .closing-glow{position:absolute;left:50%;top:60%;transform:translate(-50%,-50%);width:90vw;height:90vw;border-radius:50%;pointer-events:none;
    background:radial-gradient(circle, rgba(var(--accent-rgb), calc(.2 * var(--glow) * 1.8)) 0%, transparent 58%)}
  .closing h2{font-size:clamp(44px,6.4vw,104px);font-weight:600;letter-spacing:-.03em;line-height:1.06;margin:0 auto;max-width:18ch}
  .closing .btn{margin-top:60px}

  /* contact */
  .contact{padding:16vh 0 14vh}
  .contact h2{font-size:clamp(34px,3.8vw,62px);font-weight:600;letter-spacing:-.025em;margin-top:16px}
  .contact .sub{font-size:clamp(16px,1.3vw,20px);color:var(--mut);margin-top:18px;max-width:52ch;line-height:1.55}
  .contact-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;margin-top:54px;max-width:860px}
  .cf-field{display:flex;flex-direction:column;gap:9px}
  .cf-full{grid-column:1/-1}
  .cf-field label{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
  .cf-field input,.cf-field textarea{background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--white);padding:15px 16px;border-radius:10px;font-family:var(--font-display);font-size:15px;outline:none;transition:border-color .3s}
  .cf-field input:focus,.cf-field textarea:focus{border-color:var(--accent)}
  .cf-field textarea{min-height:130px;resize:vertical}
  .cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  .cf-msg{font-size:15px;margin-top:18px;min-height:1.4em}
  .cf-msg.ok{color:var(--accent)}
  .cf-msg.err{color:#ff8080}

  /* footer */
  footer{border-top:1px solid var(--line);padding:90px 0 44px;background:#08090b}
  .foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1.2fr);gap:6vw}
  .foot-grid img{height:30px;width:auto;margin-bottom:26px}
  .foot-contact{font-size:15px;line-height:1.8;color:var(--mut)}
  .foot-h{font-family:var(--font-mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--mut);margin-bottom:22px}
  .foot-links{display:flex;flex-direction:column;gap:13px;font-size:16px;font-weight:500}
  .foot-links a:hover{color:var(--accent)}
  .foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;margin-top:80px;padding-top:30px;border-top:1px solid var(--line);font-size:13px;color:var(--mut)}
  .foot-base .pol{display:flex;flex-wrap:wrap;gap:24px}
  .foot-base a:hover{color:var(--white)}
  .socials{display:flex;gap:18px;font-family:var(--font-mono);font-size:13px}

  /* back to top */
  .to-top{position:fixed;right:clamp(16px,2.4vw,32px);bottom:clamp(16px,2.4vw,32px);z-index:880;
    width:52px;height:52px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
    background:rgba(10,11,13,.72);backdrop-filter:blur(14px);border:1px solid var(--line);color:var(--white);
    opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .35s,transform .35s,visibility .35s,border-color .3s,background .3s}
  .to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
  .to-top:hover{border-color:var(--accent);background:rgba(var(--accent-rgb),.14)}
  .to-top svg{width:18px;height:18px;display:block}
  /* The page flips between dark and light sections, so the button follows. */
  body[data-theme="light"] .to-top{background:rgba(242,242,242,.82);border-color:var(--line-dark);color:var(--ink)}
  body[data-theme="light"] .to-top:hover{border-color:var(--accent-deep);background:rgba(var(--accent-rgb),.12)}
  .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}
  @media (hover:none),(max-width:820px){ .to-top{width:46px;height:46px} }
  @media (max-width:820px){ .site-nav .logo img{height:26px} }
  @media (prefers-reduced-motion:reduce){ .to-top{transition:opacity .2s,visibility .2s} }

  /* Six items in Romanian ("Funcționalități", "Studii de caz") wrap onto two
     lines just above the old 960px burger breakpoint. Hand over to the burger
     before that happens rather than shrinking the type any further. */
  @media (max-width:1160px){
    .nav-links{display:none}
    .nav-ch{display:none}
    .nav-burger{display:block}
  }

  @media (max-width:960px){
    .nav-links{display:none}
    .nav-ch{display:none}
    .nav-burger{display:block}
    .cmp-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
    /* The art is authored 3:4. A 4:3 box with object-fit:cover was cropping
       away more than half of it, so the illustrations read as fragments.
       Keep the box wide but letterbox instead of cropping. */
    .cc-img{aspect-ratio:4/3;object-fit:contain;padding:8px}
    /* Two labels sit side by side per row, so only the row needs a common
       floor — a single line is enough on the narrow grid. */
    .cmp-card .cc-lbl{min-height:calc(2.6em + 10px);padding-top:10px}
    .cmp-after .cc-sol{aspect-ratio:4/3}
    .stack-card{grid-template-columns:1fr;height:min(74vh,640px)}
    .stack-card .sc-img{order:-1;min-height:180px}
    .about-grid{grid-template-columns:1fr}
    .num-grid{grid-template-columns:1fr}
    .num-cell{border-left:none;padding:44px 0 0}
    .pr-grid{grid-template-columns:1fr;gap:18px}
    .pr-head{flex-direction:column;align-items:flex-start}
    .foot-grid{grid-template-columns:1fr}
    .contact-form{grid-template-columns:1fr}
    .devstory{height:100vh;min-height:0;overflow:hidden}
    .ds-grid{position:static;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;height:100%;padding:11vh 4vw 4vh;gap:0}
    .ds-left{text-align:center;width:100%}
    .ds-left .chapter{display:none}
    .ds-left h2{font-size:clamp(24px,3.6vw,40px);margin:0 0 12px}
    .plat-means{display:none}
    .seq-caps{display:grid;grid-template-columns:repeat(3,auto);gap:4px 18px;justify-content:center;text-align:left}
    .seq-cap{font-size:12.5px;padding:6px 0 6px 10px}
    .ds-link{display:none}
    .ds-devices{width:min(80vw,52vh);margin:0 auto}
  }

  @media (max-width:640px){
    /* Letterboxing a 3:4 drawing into a 4:3 box wastes most of the width.
       A square box gives the art back its height without pushing the pane
       past the viewport (measured: 59px of slack left at 390x844). */
    .cc-img{aspect-ratio:1/1}
    .cmp-after .cc-sol{aspect-ratio:5/7;padding:0}
    .cmp-after .cc-sol .cs-img{flex:0 0 66%;min-height:0}
    .cmp-after .cc-sol .cs-txt{flex:1;padding:7px 11px 9px;gap:2px;justify-content:center}
    .cmp-after .cc-sol b{font-size:12.5px;line-height:1.2}
    .cmp-after .cc-sol span{font-size:10.5px}
    .cmp-cards{gap:10px}
  }

  @media (max-width:700px){ .seq-caps{grid-template-columns:repeat(2,auto)} }

  /* Touch targets. The nav language pills, inline arrow links and footer
     contact lines all measured under 32px tall on phones. */
  @media (hover:none), (max-width:820px){
    .site-nav .logo{display:inline-flex;align-items:center;min-height:44px;padding:11px 0}
    .lang-btn{padding:12px 14px}
    .nav-cta{padding:14px 24px}
    .about-link,.ds-link,.pr-all,.foot-links a{min-height:44px;align-items:center}
    .about-link,.ds-link{display:inline-flex}
    .foot-links a{display:inline-flex}
    .foot-contact a{display:inline-block;padding:6px 0}
    .socials a,.foot-base .pol a{display:inline-block;padding:10px 0}
  }

  /* Very small phones: the pinned capability card is height-capped by the
     viewport, so its copy was being clipped at 320x568. Tighten the box and
     clamp the paragraph rather than let text disappear. */
  @media (max-width:460px){
    /* logo + language pills + CTA + burger do not fit a 320px bar; the CTA
       already exists inside the burger menu, so drop it from the top bar. */
    .site-nav .logo img{height:20px}
    .site-nav .nav-cta{display:none}
    .lang-btn{padding:12px 9px}
    .site-nav{padding:14px 4vw}
    .nav-right{gap:10px}
  }
  @media (max-width:420px){
    .stack-card{height:min(78vh,640px)}
    .stack-card .sc-txt{padding:20px}
    .stack-card .sc-img{min-height:120px}
    .stack-card h3{font-size:22px;margin:10px 0 10px}
    .stack-card p{font-size:14px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
    .caps-head h2{font-size:26px}
    .pr-all{white-space:normal}
    .pr-card{padding:26px 22px}
    .foot-base{gap:14px}
  }

  /* Landscape phones: 100vh sections have almost no vertical room. */
  @media (max-height:520px) and (orientation:landscape){
    .stack-card{height:88vh}
    .stack-card .sc-img{min-height:0}
    .stack-card p{-webkit-line-clamp:4;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
    .hero{padding:14vh 0 6vh}
  }

  /* ---------- EXPLORE · Quantrex in action ---------- */
  .explore{min-height:100vh;display:flex;align-items:center;padding:96px 0;background:#0A0B0D}
  .explore h2{font-size:clamp(32px,3.2vw,50px);font-weight:600;letter-spacing:-.02em}
  .ex-sub{margin-top:14px;max-width:46ch;font-size:clamp(15px,1.15vw,17px);line-height:1.55;color:var(--mut)}
  /* Steps read down the left, the artefact they produce sits on the right. */
  .ex-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    column-gap:clamp(40px,5vw,84px);grid-template-areas:"head stage" "track stage" "link stage";
    grid-template-rows:auto auto 1fr;align-items:start}
  .ex-head{grid-area:head}
  .ex-stage{grid-area:stage;align-self:center;display:grid}
  .ex-track{grid-area:track;list-style:none;margin-top:34px}
  /* A grid item stretches by default, which would drag the link's underline
     across the whole column. */
  .ex-link{grid-area:link;align-self:start;justify-self:start}
  /* Every frame shares one grid cell, so the stage is as tall as the tallest
     step and nothing reflows as the sequence advances. */
  .ex-frame{grid-area:1/1;opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .4s ease;pointer-events:none}
  .ex-frame.on{opacity:1;transform:none;pointer-events:auto}
  .ex-card{border:1px solid rgba(250,251,252,.1);background:rgba(250,251,252,.028);border-radius:16px;padding:20px 24px 22px}
  .ex-card-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
  .ex-card-head svg{width:16px;height:16px;flex:0 0 auto}
  .ex-row{display:flex;gap:18px;padding:9px 0;border-top:1px solid rgba(250,251,252,.07);font-size:14.5px;line-height:1.4}
  .ex-row:first-of-type{border-top:0;padding-top:0}
  .ex-k{flex:0 0 148px;color:var(--mut);font-size:13.5px}
  .ex-v{color:var(--white);min-width:0;word-break:break-word}
  .ex-v.hi{color:var(--accent);font-weight:600}
  .ex-title{font-size:17px;font-weight:600;color:var(--white);margin-bottom:12px;line-height:1.3}
  .ex-quote{margin-top:12px;font-size:14.5px;line-height:1.55;color:rgba(250,251,252,.7)}
  .ex-verdict{margin-top:14px;padding:11px 14px;border-radius:10px;border:1px solid rgba(var(--accent-rgb),.38);background:rgba(var(--accent-rgb),.08);color:var(--white);font-size:14.5px;font-weight:500;line-height:1.4}
  .ex-node{position:relative;padding:0 0 17px 30px}
  .ex-node:last-child{padding-bottom:0}
  /* The connector doubles as the progress bar: a segment turns accent once its
     step has been passed, so the spine fills as you scroll. */
  .ex-node::before{content:'';position:absolute;left:5px;top:16px;bottom:2px;width:1px;background:rgba(250,251,252,.14);transition:background .35s ease}
  .ex-node:last-child::before{display:none}
  .ex-node.done::before{background:rgba(var(--accent-rgb),.5)}
  .ex-dot{position:absolute;left:0;top:4px;width:11px;height:11px;border-radius:50%;background:#0A0B0D;border:1px solid rgba(250,251,252,.32);transition:background .3s ease,border-color .3s ease,box-shadow .3s ease}
  .ex-node.done .ex-dot{border-color:rgba(var(--accent-rgb),.7);background:rgba(var(--accent-rgb),.7)}
  .ex-node.on .ex-dot{border-color:var(--accent);background:var(--accent);box-shadow:0 0 0 5px rgba(var(--accent-rgb),.16)}
  .ex-node b{display:block;font-size:15px;font-weight:600;line-height:1.25;color:rgba(250,251,252,.36);transition:color .3s ease}
  .ex-node.done b{color:rgba(250,251,252,.6)}
  .ex-node.on b{color:var(--white)}
  @media (max-width:960px){
    .ex-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "stage" "track" "link";grid-template-rows:auto}
    .ex-stage{margin:30px 0 4px}
    .ex-sub{max-width:60ch}
    .ex-k{flex:0 0 128px}
  }
  @media (max-width:640px){
    .explore{padding:72px 0}
    .ex-card{padding:16px 16px 18px;border-radius:14px}
    .ex-row{flex-direction:column;gap:2px;padding:8px 0;font-size:14px}
    .ex-k{flex:none;font-size:12px;letter-spacing:.04em}
    .ex-node b{font-size:14px}
    .ex-node{padding-bottom:15px}
    .ex-track{margin-top:26px}
  }

  /* ---------- Subpages: shared page header + feature grid ---------- */
  .subhero{padding:190px 0 78px;background:#0A0B0D}
  .subhero h1{font-size:clamp(34px,4.4vw,68px);font-weight:600;letter-spacing:-.03em;line-height:1.04;max-width:17ch}
  .subhero .sub-lead{margin-top:24px;max-width:62ch;font-size:clamp(16px,1.35vw,20px);line-height:1.5;color:var(--mut)}
  .crumbs{display:flex;align-items:center;gap:9px;margin-bottom:26px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--mut)}
  .crumbs a{color:var(--mut);border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
  .crumbs a:hover{color:var(--accent);border-color:rgba(var(--accent-rgb),.5)}
  .crumbs .sep{opacity:.45}
  .crumbs .cur{color:var(--accent)}

  .feat-sec{padding:20px 0 120px;background:#0A0B0D}
  .feat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
  .feat{position:relative;border:1px solid rgba(250,251,252,.1);background:rgba(250,251,252,.028);border-radius:16px;padding:26px 24px 28px;
    transition:border-color .3s ease,background .3s ease,transform .3s ease}
  .feat:hover{border-color:rgba(var(--accent-rgb),.42);background:rgba(var(--accent-rgb),.05);transform:translateY(-3px)}
  .feat-ico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;margin-bottom:18px;
    color:var(--accent);border:1px solid rgba(var(--accent-rgb),.35);background:rgba(var(--accent-rgb),.09)}
  .feat-ico svg{width:19px;height:19px}
  .feat-n{position:absolute;top:26px;right:24px;font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;color:rgba(250,251,252,.26)}
  .feat h3{font-size:18.5px;font-weight:600;letter-spacing:-.01em;line-height:1.25;margin-bottom:10px;color:var(--white)}
  .feat p{font-size:14.8px;line-height:1.58;color:var(--mut)}

  .feat-cta{padding:0 0 130px;background:#0A0B0D}
  .feat-cta-in{border:1px solid rgba(var(--accent-rgb),.3);background:rgba(var(--accent-rgb),.055);border-radius:20px;padding:clamp(34px,4vw,58px);text-align:center}
  .feat-cta h2{font-size:clamp(26px,2.9vw,44px);font-weight:600;letter-spacing:-.02em;line-height:1.12;max-width:22ch;margin:0 auto}
  .feat-cta p{margin:16px auto 0;max-width:56ch;font-size:clamp(15px,1.2vw,17.5px);line-height:1.55;color:var(--mut)}
  .feat-cta .hero-ctas{justify-content:center;margin-top:30px}

  @media (max-width:960px){
    .subhero{padding:150px 0 60px}
    .feat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  }
  @media (max-width:640px){
    .subhero{padding:126px 0 46px}
    .feat-sec{padding:12px 0 84px}
    .feat-grid{grid-template-columns:minmax(0,1fr);gap:13px}
    .feat{padding:22px 20px 24px;border-radius:14px}
    .feat-n{top:22px;right:20px}
    .feat-cta{padding-bottom:92px}
  }

  /* The stack cards are absolutely positioned across the whole section, so a
     link placed after them in the DOM is covered by .stack-zone and cannot be
     clicked. It belongs with the heading, which sits above that layer. On the
     light panel the bright accent would not hold contrast, hence accent-deep. */
  .caps-link{margin-top:22px;color:var(--accent-deep);border-bottom-color:rgba(38,112,139,.45)}
  .caps-link:hover{border-bottom-color:var(--accent-deep)}
  @media (max-width:640px){ .caps-link{margin-top:16px;font-size:15px} }

  /* ---------- Case studies ---------- */
  .cs-list{padding:16px 0 120px;background:#0A0B0D}
  .cs-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
  .cs-item{display:flex;flex-direction:column;border:1px solid rgba(250,251,252,.1);background:rgba(250,251,252,.028);
    border-radius:16px;overflow:hidden;transition:border-color .3s ease,transform .3s ease}
  .cs-item:hover{border-color:rgba(var(--accent-rgb),.42);transform:translateY(-3px)}
  .cs-item.is-draft{opacity:.72}
  .cs-item.is-draft:hover{transform:none;border-color:rgba(250,251,252,.1)}
  .cs-thumb{aspect-ratio:16/10;display:grid;place-items:center;color:rgba(var(--accent-rgb),.5);
    border-bottom:1px solid rgba(250,251,252,.08);background:
      radial-gradient(120% 90% at 20% 0%,rgba(var(--accent-rgb),.13),transparent 62%),#0d0f12}
  .cs-thumb svg{width:38px;height:38px}
  .cs-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:9px;flex:1}
  .cs-meta{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
  .cs-badge{padding:3px 8px;border-radius:20px;border:1px solid rgba(250,251,252,.2);color:rgba(250,251,252,.6);letter-spacing:.14em}
  .cs-item h3{font-size:19px;font-weight:600;letter-spacing:-.01em;line-height:1.26;color:var(--white)}
  .cs-item p{font-size:14.6px;line-height:1.55;color:var(--mut)}
  .cs-more{margin-top:auto;padding-top:12px;display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;color:var(--accent)}

  /* ---------- Case study article ---------- */
  .art{padding:16px 0 40px;background:#0A0B0D}
  .art-wrap{width:min(760px,92vw);margin:0 auto}
  .art-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:34px 0 8px}
  .art-metric{border:1px solid rgba(var(--accent-rgb),.28);background:rgba(var(--accent-rgb),.06);border-radius:14px;padding:18px 18px 20px}
  .art-metric b{display:block;font-size:clamp(24px,2.6vw,34px);font-weight:600;letter-spacing:-.02em;color:var(--accent);line-height:1.1}
  .art-metric span{display:block;margin-top:7px;font-size:13px;line-height:1.4;color:var(--mut)}
  .art h2{margin:44px 0 14px;font-size:clamp(22px,2.2vw,30px);font-weight:600;letter-spacing:-.015em}
  .art p{font-size:16.5px;line-height:1.68;color:rgba(250,251,252,.78)}
  .art p + p{margin-top:15px}
  .art blockquote{margin:36px 0;padding:22px 24px;border-left:2px solid var(--accent);
    background:rgba(var(--accent-rgb),.05);border-radius:0 12px 12px 0}
  .art blockquote p{font-size:18px;line-height:1.6;color:var(--white)}
  .art blockquote footer{margin-top:12px;font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
  /* Placeholders are meant to be impossible to miss: a draft must never reach
     production looking like finished copy. */
  .todo{display:block;margin:14px 0;padding:14px 16px;border:1px dashed rgba(240,180,60,.55);
    border-radius:10px;background:rgba(240,180,60,.07);color:rgba(250,238,214,.9);
    font-family:var(--font-mono);font-size:13px;line-height:1.55}
  .todo::before{content:'TO BE WRITTEN — ';color:rgb(240,180,60);letter-spacing:.1em}
  /* Sits in the flow below the fixed nav rather than sticking to top:0,
     where the nav would cover it. */
  .draft-bar{margin-bottom:26px;padding:11px 16px;border-radius:8px;text-align:center;
    background:rgb(240,180,60);color:#1b1405;font-family:var(--font-mono);font-size:12px;
    letter-spacing:.14em;text-transform:uppercase;line-height:1.5}

  @media (max-width:960px){
    .cs-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
    .art-metrics{gap:12px}
  }
  @media (max-width:640px){
    .cs-list{padding-bottom:84px}
    .cs-cards{grid-template-columns:minmax(0,1fr);gap:13px}
    .art-metrics{grid-template-columns:minmax(0,1fr)}
    .art p{font-size:16px}
  }

  /* Caption for the zoomed frame: all six occupy one grid cell so the block
     never changes height as the sequence advances. */
  .ds-caps{display:grid;margin-top:20px;min-height:2.8em}
  .ds-cap{grid-area:1/1;font-size:15px;line-height:1.45;color:var(--mut);
    opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease}
  .ds-cap.on{opacity:1;transform:none}
  @media (max-width:960px){ .ds-caps{margin-top:14px;min-height:3.2em} .ds-cap{font-size:13.5px} }
  @media (max-width:640px){ .ds-cap{font-size:12.5px} }

  /* Six nav items instead of four: below ~1360px the row runs out of room and
     the links start touching the logo and the CTA. Tighten, then drop the
     decorative chapter indicator before anything functional goes. */
  @media (max-width:1360px){ .nav-links{gap:24px;font-size:14.5px} }
  @media (max-width:1200px){ .nav-ch{display:none} .nav-links{gap:20px} }
  /* Romanian labels run longer ("Funcționalități" vs "Features"), so the
     squeeze arrives earlier than the English measurements suggest. */
  @media (max-width:1100px){ .nav-links{gap:15px;font-size:14px} }

  /* The 404 has no content below it, so it carries the page on its own. */
  .notfound{min-height:72vh;display:flex;align-items:center}
  .notfound .hero-ctas{margin-top:34px}

  /* On a phone the text column is a fixed 353px box holding ~130px of content,
     and justify-content:space-between spent the difference as a 177px hole
     between the slide number and the heading. Let the text row hug its content
     and hand the slack to the screenshot instead. */
  @media (max-width:960px){
    .stack-card{grid-template-rows:1fr auto}
    .stack-card .sc-txt{justify-content:flex-start}
    .stack-card .sc-num{margin-bottom:12px}
  }

  /* 20vh of empty divider reads as breathing room between full-bleed sections
     on a desktop. On a phone it is 169px of nothing, three times over — half a
     screen of scrolling that shows the visitor no content at all. */
  @media (max-width:960px){ .breath{height:12vh} }
  @media (max-width:700px){ .breath{height:7vh} }