/* ============================================================
   DreamCabs — shared stylesheet
   Used by: index.html, terms-conditions.html,
            privacy-policy.html, our-vision.html
   ============================================================ */

:root{
  --bg:#f4f6f5;
  --bg-2:#e9edeb;
  --panel:#ffffff;
  --ink:#0c1622;
  --muted:#5a6672;
  --muted-2:#8a949e;
  --deep:#0b1622;          /* navy ink — matches the logo backdrop */
  --deep-2:#111f2f;
  --green:#16a34a;
  --green-2:#22c55e;
  --lime:#c8f169;
  --lime-2:#dcfa8f;
  --blue:#1a8fd1;          /* from the logo mark */
  --pink:#d1367c;          /* from the logo mark */
  --stroke:rgba(12,22,34,.1);
  --stroke-2:rgba(12,22,34,.18);

  /* Reusable film grain. Not a gradient — a real generated texture. */
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:'Space Grotesk',sans-serif;overflow-x:hidden;line-height:1.5}
body.loading{overflow:hidden;height:100vh}
h1,h2,h3,h4,.dsp{font-family:'Sora',sans-serif;letter-spacing:-.025em;line-height:1.07}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit}
::selection{background:var(--green);color:#fff}
.wrap{width:100%;max-width:1280px;margin:0 auto;padding:0 5vw}

/* ---------------- shared atoms ---------------- */
/* Plain label pill — no leading dot. */
.eyebrow{display:inline-flex;align-items:center;padding:8px 17px;border-radius:99px;
  background:rgba(22,163,74,.09);border:1px solid rgba(22,163,74,.2);color:#117a3b;
  font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.eyebrow.on-dark{background:rgba(200,241,105,.1);border-color:rgba(200,241,105,.26);color:var(--lime)}
.eyebrow.center{margin:0 auto}

/* Buttons: flat, crisp, no coloured glow, no lift. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:11px;font-weight:600;font-size:15px;
  cursor:pointer;border:1px solid transparent;border-radius:99px;padding:15px 28px;white-space:nowrap;
  transition:background .25s ease,color .25s ease,border-color .25s ease}
.btn .arw{width:23px;height:23px;border-radius:50%;display:grid;place-items:center;font-size:11px;
  background:rgba(255,255,255,.2);transition:background .25s ease}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{background:#0f8940}
.btn-lime{background:var(--lime);color:var(--deep)}
.btn-lime .arw{background:rgba(12,22,34,.14)}
.btn-lime:hover{background:var(--lime-2)}
.btn-dark{background:var(--deep);color:#fff}
.btn-dark:hover{background:#17293c}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--stroke-2)}
.btn-ghost .arw{background:rgba(12,22,34,.1)}
.btn-ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-outline-d{background:transparent;color:#fff;border-color:rgba(255,255,255,.32)}
.btn-outline-d:hover{background:#fff;color:var(--deep);border-color:#fff}

.sec{position:relative;padding:clamp(78px,10vh,128px) 0}
.sec-h{font-size:clamp(29px,4vw,50px);font-weight:800;margin-top:20px}
.sec-h+.sec-h{margin-top:0}
.sec-p{color:var(--muted);font-size:clamp(15px,1.2vw,17.5px);margin-top:18px;max-width:560px}
.sec-head{max-width:660px}
.sec-head.center{margin:0 auto;text-align:center}
.sec-head.center .sec-p{margin-left:auto;margin-right:auto}
.on-dark-txt{color:#fff}
.on-dark-p{color:rgba(255,255,255,.7)}

.mask{display:block;overflow:hidden;padding-bottom:.06em}
.mask>span{display:inline-block;transform:translateY(110%)}
[data-reveal]{opacity:0;transform:translateY(38px);will-change:transform,opacity}

/* ---------------- icon system ----------------
   One inline <symbol> sprite, referenced with <use>. No emoji anywhere. */
#sprite{display:none}
svg.i{width:22px;height:22px;display:block;flex-shrink:0;
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
svg.i.solid{fill:currentColor;stroke:none}
svg.i.xs{width:14px;height:14px}
svg.i.sm{width:17px;height:17px}
svg.i.lg{width:26px;height:26px}
/* every round icon tile paints its glyph green unless told otherwise */
.ic{color:var(--green)}
.btn svg.i{margin-right:-2px}
.tab svg.i{margin-right:-3px}
.stars{display:inline-flex;gap:2px;color:var(--lime)}
.tc .stars{color:var(--green)}
.tb-in svg.i{opacity:.9}
.tb-left svg.i-tb{color:var(--lime)}
.fx-hint svg.i,.strip-visual a svg.i{flex-shrink:0}
.hp-avs .av svg.i{width:13px;height:13px;stroke-width:2.4}
.news button{display:inline-grid;place-items:center}

/* ---------------- preloader ---------------- */
#pre{position:fixed;inset:0;z-index:9999;background:var(--deep);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:26px}
#pre::after{content:"";position:absolute;inset:0;background-image:var(--noise);opacity:.05;pointer-events:none}
#pre img{width:clamp(110px,20vw,170px);position:relative;z-index:2}
#pre .barw{width:min(280px,56vw);height:2px;background:rgba(255,255,255,.14);border-radius:99px;overflow:hidden;position:relative;z-index:2}
#pre .barw i{display:block;height:100%;width:0;background:var(--lime)}
#pre .pc{font-size:11.5px;letter-spacing:.35em;color:rgba(255,255,255,.45);position:relative;z-index:2}

/* ---------------- nav ---------------- */
header{position:fixed;top:0;left:0;width:100%;z-index:900}
.topbar{background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.09);color:rgba(255,255,255,.78);
  font-size:12.5px;overflow:hidden;transition:max-height .4s,opacity .35s,border-color .4s;max-height:42px;backdrop-filter:blur(10px)}
header.scrolled .topbar{max-height:0;opacity:0;border-color:transparent}
.tb-in{display:flex;align-items:center;justify-content:space-between;height:42px;padding:0 5vw;gap:20px}
.tb-left{display:flex;align-items:center;gap:26px;min-width:0}
.tb-left span{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.tb-left .i{color:var(--lime)}
.tb-social{display:flex;align-items:center;gap:16px}
.tb-social a{transition:color .25s}
.tb-social a:hover{color:var(--lime)}

.navwrap{padding:14px 5vw;transition:padding .35s}
header.scrolled .navwrap{padding:10px 5vw}
.bar{display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:rgba(11,22,34,.5);border:1px solid rgba(255,255,255,.11);backdrop-filter:blur(16px);
  border-radius:99px;padding:8px 8px 8px 20px;transition:background .35s,border-color .35s}
header.scrolled .bar{background:rgba(8,17,26,.94)}
/* Logo lockup — one text node so there is no flex gap inside the wordmark. */
.logo{display:flex;align-items:center;gap:11px;font-family:'Sora';font-weight:800;font-size:20px;color:#fff;letter-spacing:-.03em}
.logo img{width:43px;height:auto;flex-shrink:0}
.logo .wm{white-space:nowrap}
.logo .wm b{color:var(--lime);font-weight:800}
.menu{display:flex;align-items:center;gap:4px;background:rgba(255,255,255,.05);border-radius:99px;padding:4px}
.menu a{padding:9px 16px;border-radius:99px;font-size:13.5px;font-weight:600;color:#dbe3ea;transition:background .25s,color .25s}
.menu a:hover,.menu a.active{background:var(--lime);color:var(--deep)}
.nav-right{display:flex;align-items:center;gap:10px}
.nav-cta{display:inline-flex;align-items:center;gap:9px;background:#fff;color:var(--deep);border-radius:99px;
  padding:11px 11px 11px 20px;font-size:13.5px;font-weight:600;cursor:pointer;transition:background .25s,color .25s}
.nav-cta i{width:24px;height:24px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-size:11px;font-style:normal;transition:background .25s}
.nav-cta:hover{background:var(--lime)}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:12px;border-radius:50%;background:rgba(255,255,255,.1)}
.burger span{width:20px;height:2px;background:#fff;transition:transform .3s,opacity .3s}
.mobile-menu{position:fixed;inset:0;z-index:899;background:rgba(8,17,26,.98);backdrop-filter:blur(20px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;font-family:'Sora';font-size:23px;
  transform:translateY(-100%);transition:transform .45s cubic-bezier(.7,0,.2,1)}
.mobile-menu.open{transform:translateY(0)}
.mobile-menu a{color:#aab6c0}
.mobile-menu a:hover{color:var(--lime)}

/* ---------------- hero ----------------
   Flat navy base + generated grain + hairline grid + hard-edged solid
   shapes. No colour gradients, no blurred glow blobs anywhere. */
#hero{position:relative;overflow:hidden;padding:clamp(138px,17vh,186px) 0 clamp(56px,10vh,118px);background:var(--deep)}
.hero-noise{position:absolute;inset:0;background-image:var(--noise);opacity:.08;pointer-events:none}
.hero-grid-bg{position:absolute;inset:0;pointer-events:none;
  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:76px 76px}
/* thin diagonal hatch — adds depth without a gradient wash */
.hero-hatch{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:repeating-linear-gradient(-45deg,rgba(255,255,255,.03) 0 1px,transparent 1px 9px)}
.hero-rule{position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.1)}
/* solid organic underlay — asymmetric, sits directly behind the device.
   `translate` (not `transform`) so GSAP's transform tweens compose with it. */
.hero-blob{position:absolute;z-index:0;pointer-events:none;
  width:122%;left:-14%;top:50%;translate:0 -50%}
.hero-blob path{fill:#14532d}
.hero-dot{position:absolute;border-radius:50%;z-index:1;pointer-events:none}
.hero-dot.d1{width:58px;height:58px;background:var(--lime);top:16%;left:2%}
.hero-dot.d2{width:34px;height:34px;background:var(--blue);top:30%;right:2%}
.hero-dot.d3{width:16px;height:16px;background:var(--pink);bottom:12%;right:3.5%}
.hero-bars{position:absolute;left:38%;bottom:0;z-index:1;display:flex;align-items:flex-end;gap:7px;pointer-events:none}
.hero-bars i{display:block;width:7px;background:rgba(255,255,255,.07)}
.scroll-cue{position:absolute;left:5vw;bottom:30px;z-index:4;display:flex;flex-direction:column;gap:2px;color:rgba(255,255,255,.28)}
.scroll-cue svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hero-in{position:relative;z-index:3;display:grid;grid-template-columns:1.14fr .86fr;gap:36px;align-items:center}
.hero-copy{max-width:640px}
.hero-h{font-size:clamp(32px,3.9vw,52px);font-weight:800;color:#fff;margin-top:24px}
.hero-h .ln{display:block;overflow:hidden;padding-bottom:.05em}
.hero-h .ln>span{display:inline-block;transform:translateY(110%)}
.hero-h em{font-style:normal;color:var(--lime);white-space:nowrap}
.hero-sub{color:rgba(255,255,255,.68);font-size:clamp(15px,1.25vw,17.5px);max-width:520px;margin-top:22px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.hero-proof{display:flex;align-items:center;gap:28px;margin-top:40px;flex-wrap:wrap}
.hp-rate{display:flex;align-items:center;gap:14px}
.hp-rate b{font-family:'Sora';font-size:38px;font-weight:800;color:#fff;line-height:1}
.hp-rate .stars{color:var(--lime);font-size:13px;letter-spacing:2px}
.hp-rate small{display:block;color:rgba(255,255,255,.5);font-size:12px;margin-top:3px}
.hp-sep{width:1px;height:44px;background:rgba(255,255,255,.14)}
.hp-avs{display:flex;align-items:center}
.hp-avs .av{width:38px;height:38px;border-radius:50%;border:2px solid var(--deep);margin-left:-11px;
  display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--deep)}
.hp-avs .av:first-child{margin-left:0}
.hp-avs .av:nth-child(1){background:#a7e8bd}
.hp-avs .av:nth-child(2){background:var(--lime)}
.hp-avs .av:nth-child(3){background:#8fd8ff}
.hp-avs .av:nth-child(4){background:#fff;color:var(--green);font-size:16px}
.hp-avs-tx{margin-left:14px;color:rgba(255,255,255,.58);font-size:12.5px;line-height:1.35}
.hp-avs-tx b{display:block;color:#fff;font-size:13.5px}

/* hero stage — a single phone rendered in true 3D perspective */
.hero-stage{position:relative;z-index:3;min-height:min(600px,56vh);display:flex;align-items:center;justify-content:center}
/* wider than the phone so the floating cards have room to sit outside it */
.stage-3d{position:relative;width:100%;max-width:440px;display:flex;justify-content:center;
  perspective:1600px;perspective-origin:60% 45%}
.hero-stage .phone3d{width:246px;flex-basis:246px;transform:rotateY(-22deg) rotateX(4deg) rotateZ(1.5deg);
  box-shadow:-34px 46px 80px rgba(0,0,0,.5)}
/* flat contact shadow on the floor */
.stage-floor{position:absolute;left:50%;bottom:-14px;width:74%;height:26px;border-radius:50%;
  background:rgba(0,0,0,.42);transform:translateX(-52%) rotateX(72deg);filter:blur(16px);z-index:1}
.float-chip{position:absolute;z-index:5;display:flex;align-items:center;gap:10px;background:#fff;border-radius:14px;
  padding:11px 15px;box-shadow:0 16px 34px rgba(0,0,0,.34);font-size:12.5px;font-weight:600;color:var(--ink);max-width:222px}
.float-chip .ci{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex-shrink:0}
.float-chip .ci svg{width:14px;height:14px}
.float-chip.c1{top:5%;left:-7%}
.float-chip.c1 .ci{background:rgba(22,163,74,.13);color:var(--green)}
.float-chip.c2{bottom:-3%;left:-13%;background:var(--lime);color:var(--deep)}
.float-chip.c2 .ci{background:rgba(12,22,34,.13)}
.exp-badge{position:absolute;bottom:21%;right:-9%;z-index:5;background:#fff;color:var(--deep);
  border-radius:18px;padding:15px 21px;text-align:center}
.exp-badge b{display:block;font-family:'Sora';font-size:30px;font-weight:800;line-height:1}
.exp-badge span{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.7}

/* ---------------- phone mockups ---------------- */
.phone{width:268px;flex:0 0 268px;aspect-ratio:9/19.2;border-radius:40px;background:#080d13;padding:8px;
  box-shadow:0 34px 78px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.08) inset;position:relative}
.phone.sm{width:236px;flex-basis:236px}

/* --- 3D device treatment: every mockup on the page is a real angled render --- */
.phone3d{transform-style:preserve-3d}
/* rear slab: with preserve-3d it peeks past the front face and reads as body depth */
.phone3d .p-edge{position:absolute;inset:0;border-radius:40px;background:#161d26;transform:translateZ(-15px)}
.phone3d .p-edge::after{content:"";position:absolute;inset:0;border-radius:40px;box-shadow:0 0 0 1px rgba(255,255,255,.07) inset}
/* physical side buttons */
.phone3d .p-btns{position:absolute;left:-3px;top:132px;width:3px;height:52px;background:#202934;border-radius:3px;transform:translateZ(-8px)}
.phone3d .p-btns::after{content:"";position:absolute;left:0;top:74px;width:3px;height:34px;background:#202934;border-radius:3px}
/* ph3 = perspective carrier; the .phone inside stays free for GSAP transforms */
.ph3{position:relative;transform-style:preserve-3d}
.phone::before{content:"";position:absolute;top:16px;left:50%;transform:translateX(-50%);width:78px;height:20px;border-radius:99px;background:#080d13;z-index:9}
.pscreen{width:100%;height:100%;border-radius:33px;overflow:hidden;background:#fff;position:relative;display:flex;flex-direction:column;font-size:10px;color:var(--ink)}
/* Real screenshots of the shipping apps (captured at 2x from the running
   builds — see images/app/). The device frame is ours; the screen is theirs. */
.pshot{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;border-radius:33px}
.pstatus{position:absolute;top:0;left:0;right:0;height:30px;display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;font-size:9px;font-weight:700;z-index:8;pointer-events:none}
.pstatus.dark{color:#fff}
.pstatus .r{display:flex;gap:2px;align-items:flex-end;line-height:1}
.pstatus .r i{display:block;width:2.5px;background:currentColor;border-radius:1px}
.pstatus .r i:nth-child(1){height:4px}
.pstatus .r i:nth-child(2){height:6px}
.pstatus .r i:nth-child(3){height:8px}
.pstatus .r b{width:15px;height:8px;border:1px solid currentColor;border-radius:2.5px;margin-left:4px;position:relative}
.pstatus .r b::after{content:"";position:absolute;top:1.5px;left:1.5px;bottom:1.5px;right:5px;background:currentColor;border-radius:1px}

.mmap{position:absolute;inset:0;background:#e8edea}
.mmap::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(12,22,34,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(12,22,34,.05) 1px,transparent 1px);
  background-size:26px 26px}
.mmap i{position:absolute;background:#fff;border-radius:2px}
.mmap .rd1{left:-10%;top:26%;width:120%;height:11px;transform:rotate(-11deg)}
.mmap .rd2{left:-10%;top:62%;width:120%;height:8px;transform:rotate(7deg)}
.mmap .rd3{left:34%;top:-10%;width:10px;height:120%;transform:rotate(9deg)}
.mmap .pk{position:absolute;background:#d8e7d5;border-radius:12px}
.mmap .pk1{left:6%;top:38%;width:22%;height:16%}
.mmap .pk2{right:8%;top:66%;width:26%;height:14%}
.mmap .wt{position:absolute;left:-6%;bottom:8%;width:70%;height:10%;background:#cfe0ee;border-radius:20px;transform:rotate(-6deg)}
.mmap .route{position:absolute;left:22%;top:20%;width:2.5px;height:56%;background:repeating-linear-gradient(to bottom,var(--green) 0 7px,transparent 7px 13px);transform:rotate(14deg);border-radius:2px}
.mmap .me{position:absolute;left:30%;top:56%;width:14px;height:14px;border-radius:50%;background:#2563eb;border:2.5px solid #fff;box-shadow:0 0 0 6px rgba(37,99,235,.16)}
.mmap .pin{position:absolute;width:20px;height:20px;border-radius:50% 50% 50% 2px;transform:rotate(-45deg);border:2px solid #fff}
.mmap .pin.a{left:20%;top:20%;background:var(--green)}
.mmap .pin.b{right:22%;top:64%;background:#ef4444}

/* floating top bar inside a phone mockup */
.p-topbar{position:absolute;top:36px;left:10px;right:10px;display:flex;align-items:center;gap:7px;z-index:6}
.p-topdark-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.p-pill{display:inline-flex;align-items:center;gap:6px;background:#fff;border-radius:99px;padding:7px 11px;
  box-shadow:0 5px 15px rgba(12,22,34,.13);font-size:9.5px;font-weight:600}
.p-sheet{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:22px 22px 0 0;padding:9px 14px 16px;
  box-shadow:0 -12px 34px rgba(12,22,34,.12);z-index:6}
.p-grip{width:34px;height:4px;border-radius:99px;background:#dee4e1;margin:0 auto 11px}
.p-title{font-family:'Sora';font-size:13px;font-weight:700;margin-bottom:10px}
.p-fab{position:absolute;right:12px;width:32px;height:32px;border-radius:50%;background:#fff;display:grid;place-items:center;
  box-shadow:0 5px 15px rgba(12,22,34,.15);font-size:12px;color:var(--green);z-index:6}
.p-prods{display:flex;gap:7px;margin-bottom:11px}
.p-prod{flex:1;border:1px solid var(--stroke);border-radius:13px;padding:9px 5px;text-align:center;background:#fbfcfb}
.p-prod.on{border-color:var(--green);background:rgba(22,163,74,.07)}
.p-prod .ic{width:28px;height:28px;border-radius:50%;background:rgba(22,163,74,.1);display:grid;place-items:center;margin:0 auto 6px;font-size:13px}
.p-prod span{font-size:8.6px;font-weight:600;display:block}
.p-wt{display:flex;align-items:center;gap:8px;background:#f1f4f2;border:1px solid var(--stroke);border-radius:13px;padding:11px 13px;font-size:10.5px;font-weight:600;color:#6a7680}
.p-wt .arw{margin-left:auto;color:var(--green)}
.p-loc{flex:1;display:flex;align-items:center;gap:8px;background:#fff;border-radius:99px;padding:7px 11px;box-shadow:0 5px 15px rgba(12,22,34,.13);min-width:0}
.p-loc .dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0}
.p-loc small{display:block;font-size:7px;letter-spacing:.12em;color:var(--muted-2);font-weight:700}
.p-loc b{display:block;font-size:9.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.p-welcome{flex:1;display:flex;flex-direction:column;padding:44px 20px 20px;position:relative;overflow:hidden}
.p-welcome.cust{background:#fbfdfc}
.p-welcome.drv{background:var(--deep);color:#fff}
.p-welcome::after{content:"";position:absolute;inset:0;background-image:var(--noise);opacity:.04;pointer-events:none}
.p-welcome.drv::after{opacity:.07}
.p-brand{display:flex;align-items:center;gap:8px;font-family:'Sora';font-weight:800;font-size:13.5px;position:relative;z-index:2;letter-spacing:-.03em}
.p-brand img{width:24px}
.p-brand .wm{white-space:nowrap}   /* one flex item, so "DreamCabs" keeps no gap */
.p-welcome.cust .p-brand .g{color:var(--green)}
.p-welcome.drv .p-brand{color:#fff}
.p-welcome.drv .p-brand .g{color:var(--lime)}
.p-illus{position:relative;z-index:2;margin:18px 0 auto;height:150px;display:grid;place-items:center;font-size:56px}
.p-illus img{width:96px;opacity:.95}
/* label pill inside the mockups — no dot either */
.p-eyebrow{display:inline-flex;align-self:flex-start;background:rgba(22,163,74,.09);color:#117a3b;
  border-radius:99px;padding:5px 11px;font-size:8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;position:relative;z-index:2}
.p-welcome.drv .p-eyebrow{background:rgba(255,255,255,.12);color:var(--lime)}
.p-wtitle{font-family:'Sora';font-size:19px;font-weight:800;margin:11px 0 8px;position:relative;z-index:2;line-height:1.15;letter-spacing:-.03em}
.p-wtitle .g{color:var(--green)}
.p-welcome.drv .p-wtitle .g{color:var(--lime)}
.p-wsub{font-size:9.5px;color:var(--muted);line-height:1.55;position:relative;z-index:2}
.p-welcome.drv .p-wsub{color:rgba(255,255,255,.68)}
.p-cta{margin-top:16px;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--green);color:#fff;
  border-radius:14px;padding:13px;font-size:10.5px;font-weight:700;position:relative;z-index:2}
.p-welcome.drv .p-cta{background:var(--lime);color:var(--deep)}
.p-terms{font-size:7.6px;color:var(--muted-2);text-align:center;margin-top:11px;line-height:1.6;position:relative;z-index:2}
.p-terms u{color:var(--green);text-decoration:none;font-weight:600}
.p-welcome.drv .p-terms{color:rgba(255,255,255,.45)}
.p-welcome.drv .p-terms u{color:var(--lime)}

.drv-badge{display:inline-flex;align-items:center;background:var(--deep);color:var(--lime);border-radius:99px;
  padding:5px 10px;font-size:7.6px;font-weight:800;letter-spacing:.14em}
.drv-status{display:inline-flex;align-items:center;gap:6px;background:#fff;border-radius:99px;padding:7px 12px;
  font-size:9.5px;font-weight:700;box-shadow:0 5px 15px rgba(12,22,34,.13)}
.drv-status .d{width:7px;height:7px;border-radius:50%;background:var(--green-2)}
.p-stats{display:flex;gap:7px;margin-bottom:10px}
.p-stat{flex:1;background:#f3f6f4;border-radius:12px;padding:9px;text-align:center}
.p-stat b{display:block;font-family:'Sora';font-size:14px;font-weight:800}
.p-stat span{font-size:7.6px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);font-weight:700}
.p-mode{border:1px solid rgba(22,163,74,.26);background:rgba(22,163,74,.05);border-radius:14px;padding:11px;margin-bottom:9px}
.p-mode strong{display:block;font-size:10.5px;margin-bottom:3px}
.p-mode span{font-size:8.6px;color:var(--muted);line-height:1.45;display:block}
.p-mode .go{margin-top:9px;display:flex;align-items:center;justify-content:center;gap:6px;background:var(--green);color:#fff;border-radius:10px;padding:9px;font-size:9.5px;font-weight:700}
.p-off{display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--stroke-2);border-radius:13px;padding:11px;font-size:10px;font-weight:700;color:var(--muted)}

.p-tabs{display:flex;gap:4px;background:#f1f4f2;border-radius:11px;padding:3px;margin-bottom:9px}
.p-tabs span{flex:1;text-align:center;padding:7px 3px;border-radius:9px;font-size:8.6px;font-weight:700;color:#78838c}
.p-tabs span.on{background:#fff;color:var(--ink)}
.p-tabs span i{font-style:normal;background:#e5eae7;border-radius:99px;padding:1px 5px;margin-left:3px;font-size:7.6px}
.p-search{display:flex;align-items:center;gap:7px;border:1px solid var(--stroke);border-radius:12px;padding:9px 11px;font-size:9.5px;color:var(--muted-2);margin-bottom:9px}
.p-row{display:flex;align-items:center;gap:9px;border:1px solid var(--stroke);border-radius:13px;padding:10px 11px;margin-bottom:7px}
.p-row .t{flex:1;min-width:0}
.p-row .t b{display:block;font-size:9.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-row .t small{font-size:7.6px;color:var(--muted-2)}
.p-row .f{text-align:right;flex-shrink:0}
.p-row .f b{display:block;font-size:11.5px;font-weight:800;color:var(--green);font-family:'Sora'}
.p-row .f small{font-size:7px;color:var(--muted-2)}
.p-row .go{width:22px;height:22px;border-radius:50%;background:#f1f4f2;display:grid;place-items:center;font-size:10px;color:var(--muted);flex-shrink:0}
.p-row.on{border-color:var(--green);background:rgba(22,163,74,.04)}

.p-topdark{background:var(--deep);color:#fff;padding:34px 16px 18px;border-radius:0 0 20px 20px}
.p-topdark h4{font-family:'Sora';font-size:15px;font-weight:800}
.p-topdark p{font-size:8.6px;color:rgba(255,255,255,.58);margin-top:3px}
.p-body{flex:1;background:#f3f6f4;padding:11px 12px;overflow:hidden}
.p-card{background:#fff;border-radius:15px;padding:11px;margin-bottom:9px}
.p-chip{display:inline-flex;background:rgba(34,197,94,.12);color:#117a3b;border-radius:8px;padding:4px 9px;font-size:8.6px;font-weight:700;margin-bottom:9px}
.p-seats{display:flex;gap:6px;margin-bottom:9px}
.p-seats div{flex:1;background:#f3f6f4;border-radius:10px;padding:8px 4px;text-align:center}
.p-seats b{display:block;font-family:'Sora';font-size:15px;font-weight:800}
.p-seats span{font-size:7px;letter-spacing:.1em;color:var(--muted-2);font-weight:700}
.p-fill{display:flex;justify-content:space-between;font-size:8px;font-weight:700;color:#78838c;letter-spacing:.08em;margin-bottom:5px}
.p-fill b{color:var(--ink)}
.p-bar{height:6px;border-radius:99px;background:#e5eae7;overflow:hidden;margin-bottom:11px}
.p-bar i{display:block;height:100%;width:33%;background:var(--green);border-radius:99px}
.p-start{display:flex;align-items:center;justify-content:center;gap:7px;background:var(--green);color:#fff;border-radius:12px;padding:12px;font-size:11px;font-weight:700}
.p-checks{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.p-checks span{flex:1 1 46%;background:#f3f6f4;border-radius:9px;padding:7px 5px;text-align:center;font-size:8.6px;font-weight:600;color:var(--muted)}
.p-checks span.warn{background:rgba(249,115,22,.09);color:#c2410c}
.p-sub{font-size:7.6px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);font-weight:700;margin-bottom:7px}
.p-prog div{display:flex;justify-content:space-between;font-size:8.6px;padding:6px 0;border-bottom:1px solid var(--stroke);color:var(--muted)}
.p-prog div b{color:var(--ink);font-weight:600}
.p-prog div span.nx{color:var(--green);font-weight:700}

/* ---------------- dark card strip ---------------- */
.strip{margin-top:-70px;position:relative;z-index:20}
.strip-in{display:grid;grid-template-columns:.72fr 2fr;gap:16px}
.strip-visual{border-radius:22px;overflow:hidden;position:relative;min-height:210px;background:var(--deep-2);
  display:flex;flex-direction:column;justify-content:flex-end;padding:22px}
.strip-visual::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:32px 32px}
.strip-visual::after{content:"";position:absolute;inset:0;background-image:var(--noise);opacity:.07}
.strip-visual .car{position:absolute;top:26px;right:24px;font-size:42px}
.strip-visual h4{color:#fff;font-size:18px;font-weight:700;position:relative;z-index:2}
.strip-visual a{display:inline-flex;align-items:center;gap:7px;color:var(--lime);font-size:12.5px;font-weight:600;margin-top:9px;position:relative;z-index:2}
.strip-cards{background:var(--deep);border-radius:22px;padding:30px;display:grid;grid-template-columns:repeat(3,1fr);gap:26px;position:relative;overflow:hidden}
.strip-cards::after{content:"";position:absolute;inset:0;background-image:var(--noise);opacity:.05;pointer-events:none}
.strip-c{position:relative;z-index:2}
.strip-c .ic{width:44px;height:44px;border-radius:50%;background:var(--lime);color:var(--deep);display:grid;place-items:center;font-size:19px;margin-bottom:16px}
.strip-c h4{color:#fff;font-size:17px;font-weight:700;line-height:1.25}
.strip-c p{color:rgba(255,255,255,.58);font-size:13px;margin-top:9px}

/* ---------------- stats ---------------- */
.stats-strip{padding:76px 0 44px}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.hero-stats .s{border-top:3px solid var(--lime);padding-top:16px}
.hero-stats .s b{font-family:'Sora';font-size:clamp(28px,3.3vw,46px);font-weight:800;display:block;line-height:1}
.hero-stats .s b em{font-style:normal;color:var(--green)}
.hero-stats .s>span{color:var(--muted);font-size:13px;display:block;margin-top:8px}

/* ---------------- about ---------------- */
.about-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:60px;align-items:center}
.about-visual{position:relative;border-radius:26px;aspect-ratio:4/4.3;overflow:hidden;background:var(--deep)}
.about-visual::before{content:"";position:absolute;inset:0;
  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:36px 36px}
.about-visual::after{content:"";position:absolute;inset:0;background-image:var(--noise);opacity:.07}
.about-visual .rd{position:absolute;left:50%;bottom:-4%;width:3px;height:76%;transform:translateX(-50%);
  background:repeating-linear-gradient(to top,var(--lime) 0 18px,transparent 18px 36px);opacity:.7}
.about-visual .logo-lg{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:58%;z-index:3}
.about-visual .rings{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:74%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(200,241,105,.22)}
.about-visual .rings::before{content:"";position:absolute;inset:18%;border-radius:50%;border:1px solid rgba(200,241,105,.14)}
.about-badge{position:absolute;top:20px;left:20px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  border-radius:16px;padding:13px 17px;backdrop-filter:blur(8px);z-index:4}
.about-badge b{font-family:'Sora';font-size:23px;color:var(--lime);display:block}
.about-badge span{color:rgba(255,255,255,.6);font-size:11.5px}
.about-mission{display:flex;gap:14px;align-items:flex-start;margin-top:26px}
.about-mission .ic{width:44px;height:44px;border-radius:50%;background:rgba(22,163,74,.1);border:1px solid rgba(22,163,74,.2);
  display:grid;place-items:center;font-size:18px;flex-shrink:0}
.about-mission h4{font-size:16px;font-weight:700;margin-bottom:5px}
.about-mission p{color:var(--muted);font-size:14px}
.about-note{display:flex;align-items:center;gap:14px;background:var(--deep);border-radius:99px;padding:12px 12px 12px 22px;margin-top:26px;flex-wrap:wrap}
.about-note p{color:rgba(255,255,255,.8);font-size:13.5px;flex:1;min-width:200px}
.about-note .btn{padding:11px 20px;font-size:13px}
.about-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:30px}
.about-stats .as{border-left:2px solid var(--green);padding-left:15px}
.about-stats .as b{font-family:'Sora';font-size:clamp(24px,2.6vw,34px);font-weight:800;display:block}
.about-stats .as>span{color:var(--muted);font-size:13px}

/* ---------------- features ---------------- */
#features{background:var(--bg-2)}

/* ============================================================
   SECTION LAYOUT  —  INDEX PAGE ONLY
   Full-height sections, gated behind `html.full` so the sub-pages
   (vision / privacy / terms) stay plain documents.

   There is deliberately NO scroll snapping: the page scrolls normally
   and the sections announce themselves through the GSAP reveals, which
   play on the way down and rewind on the way back up.
   ============================================================ */
.panel{
  display:flex;flex-direction:column;justify-content:center;
  position:relative;
}
html.full .panel{
  min-height:100vh;min-height:100svh;
}
.panel > .panel-in{width:100%}
.panel.sec{padding-top:clamp(92px,11vh,128px);padding-bottom:clamp(56px,8vh,104px)}
#hero.panel{justify-content:center}

/* Merged strip + stats panel. Sized to its content rather than held at 100vh:
   as a full panel its centred content sat in the middle of the white band,
   leaving dead space directly under the hero. The strip is meant to straddle
   the hero's closing rule (.hero-rule), which is what the negative top margin
   and the z-index:20 on .strip were always for. */
#network{background:var(--bg);padding:0;justify-content:flex-start}
html.full #network.panel{min-height:0}
#network .strip{margin-top:clamp(-104px,-7.5vh,-70px)}
#network .stats-strip{padding:clamp(40px,6vh,70px) 0 clamp(48px,7vh,88px)}

/* contact + footer share the closing panel */
/* The footer is its own panel — centred in the viewport so the last thing
   the reader lands on is the footer alone, with no strip of the previous
   section's background above or below it. */
footer.panel{justify-content:center;padding:clamp(56px,8vh,84px) 0 clamp(30px,4vh,48px)}

/* ============================================================
   FEATURES — pinned left rail, cascading right column
   ============================================================ */
#features{position:relative;background:var(--bg-2);transition:none}
.fx-stage{padding:clamp(126px,15vh,168px) 0 clamp(70px,9vh,110px)}  /* top clears the fixed nav when pinned */
.fx-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(40px,6vw,90px);align-items:start}

.fx-left{position:relative;padding-bottom:6vh}
.fx-left .sec-h{margin-top:16px}
.fx-left .sec-p{margin-top:16px;max-width:400px}
.fx-stats{display:flex;gap:30px;margin-top:38px;flex-wrap:wrap}
.fxs b{display:block;font-family:'Sora';font-size:clamp(26px,3vw,38px);font-weight:800;line-height:1;color:var(--deep)}
.fxs b em{font-style:normal;color:var(--green)}
.fxs>span{display:block;font-size:12.5px;color:var(--muted);margin-top:7px}
.fx-prog{margin-top:34px;height:3px;border-radius:3px;background:rgba(12,22,34,.1);overflow:hidden;max-width:260px}
.fx-prog i{display:block;height:100%;background:var(--green);transform:scaleX(0);transform-origin:0 50%}
.fx-hint{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:12.5px;color:var(--muted-2)}

.fx-right{display:flex;flex-direction:column;gap:16px}
.fxc{display:flex;gap:20px;align-items:flex-start;padding:26px 28px;border-radius:20px;background:#fff;
  border:1px solid var(--line);position:relative;transition:background .35s ease,border-color .35s ease,transform .35s ease}
.fxc .no{font-family:'Sora';font-weight:800;font-size:13px;color:rgba(12,22,34,.2);flex-shrink:0;width:24px;padding-top:14px;transition:color .35s ease}
.fxc .ic{width:52px;height:52px;border-radius:16px;background:rgba(22,163,74,.1);color:var(--green);
  display:grid;place-items:center;flex-shrink:0;transition:background .35s ease,color .35s ease}
.fxc h3{font-size:19px;font-weight:700}
.fxc p{color:var(--muted);font-size:14px;margin-top:7px;max-width:46ch}
.fxc:hover{background:var(--deep);border-color:var(--deep);transform:translateX(6px)}
.fxc:hover h3{color:#fff}
.fxc:hover p{color:rgba(255,255,255,.62)}
.fxc:hover .no{color:rgba(255,255,255,.28)}
.fxc:hover .ic{background:var(--lime);color:var(--deep)}

/* The section darkens as it takes over the viewport. The pinned rail's text
   colours are scrubbed on the same timeline as the background (see script.js)
   rather than switched by a class — `color:inherit` here used to resolve to
   --ink (#0c1622) sitting on --deep (#0b1622), i.e. the heading and the stat
   numbers went invisible the moment the background finished darkening. */

/* ============================================================
   HOW IT WORKS — horizontal scrub track
   ============================================================ */
#steps{background:var(--deep);color:#fff;overflow:hidden}
#steps::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:74px 74px;pointer-events:none}
#steps::after{content:"";position:absolute;inset:0;background-image:var(--noise);opacity:.06;pointer-events:none}
.hz-stage{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  gap:clamp(28px,5vh,52px);padding:clamp(78px,9vh,110px) 0 clamp(40px,6vh,70px);position:relative;z-index:2}
.hz-head{max-width:1280px}
.hz-head .sec-h,.hz-head .sec-p,.hz-head .hz-rail{max-width:640px}
.hz-head .eyebrow{background:rgba(200,241,105,.1);border-color:rgba(200,241,105,.22);color:var(--lime)}
.hz-head .sec-h{color:#fff;margin-top:16px}
.hz-head .sec-p{color:rgba(255,255,255,.62);margin-top:14px}
.hz-rail{margin-top:26px;height:3px;border-radius:3px;background:rgba(255,255,255,.13);overflow:hidden;max-width:300px}
.hz-rail i{display:block;height:100%;background:var(--lime);transform:scaleX(0);transform-origin:0 50%}

.hz-view{overflow:hidden}
.hz-track{display:flex;gap:26px;padding:0 5vw;will-change:transform}
/* no max-height: .hz-view clips overflow, so a capped card would
   silently cut its own copy off on short viewports */
.hzc{flex:0 0 clamp(280px,26vw,360px);border-radius:24px;padding:32px;position:relative;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);
  display:flex;flex-direction:column;min-height:clamp(270px,40vh,380px)}
.hzc-n{position:absolute;top:26px;right:30px;font-family:'Sora';font-weight:800;font-size:52px;line-height:1;color:rgba(255,255,255,.11)}
.hzc-ic{width:56px;height:56px;border-radius:17px;background:rgba(200,241,105,.13);border:1px solid rgba(200,241,105,.22);
  color:var(--lime);display:grid;place-items:center;margin-bottom:auto}
.hzc h3{font-size:22px;font-weight:700;color:#fff;margin-top:26px}
.hzc p{color:rgba(255,255,255,.6);font-size:14.5px;margin-top:9px}

/* ---------------- apps (tabbed) ---------------- */
#apps{background:var(--deep);overflow:hidden;position:relative}
/* The stage is what gets pinned, so the decorative grid/noise live on it —
   left on #apps they would drift behind the pinned content. */
/* Own background, not #apps's: while pinned this element is position:fixed, so
   a transparent stage would let whatever is scrolling behind it show through. */
.apps-stage{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(88px,10vh,116px) 0 clamp(26px,3.4vh,52px);position:relative;overflow:hidden;
  background:var(--deep);z-index:3}
.apps-stage::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.038) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.038) 1px,transparent 1px);
  background-size:72px 72px}
.apps-stage::after{content:"";position:absolute;inset:0;background-image:var(--noise);opacity:.06;pointer-events:none}
.apps-rail{height:3px;border-radius:3px;background:rgba(255,255,255,.13);overflow:hidden;
  width:min(320px,60vw);margin:12px auto 0}
.apps-rail i{display:block;height:100%;background:var(--lime);transform:scaleX(0);transform-origin:0 50%}
#apps .wrap{position:relative;z-index:2}
.tabs-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;margin-top:34px}
.tabs{display:inline-flex;gap:4px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.11);border-radius:99px;padding:5px}
.tab{display:inline-flex;align-items:center;gap:9px;background:transparent;border:none;color:rgba(255,255,255,.62);
  padding:12px 24px;border-radius:99px;font-size:14px;font-weight:600;cursor:pointer;
  transition:background .25s,color .25s;white-space:nowrap}
.tab:hover{color:#fff}
.tab.on{background:var(--lime);color:var(--deep)}
.panes{margin-top:52px;position:relative}
/* Mobile keeps the plain tabbed swap. Desktop stacks the panes (see the
   viewport-fit block) so the pinned stage never changes height mid-scroll. */
.pane{display:none}
.pane.on{display:block}
.pane-in{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.pane-in.wide-left{grid-template-columns:1.35fr .65fr;perspective:2600px;perspective-origin:58% 45%}
.pane-phones{display:flex;gap:26px;justify-content:center;align-items:center;flex-wrap:wrap;
  perspective:1700px;perspective-origin:52% 45%}
/* the pair leans away from each other — one left, one right */
.pane-phones .ph3:nth-child(1){transform:rotateY(18deg) rotateX(4deg) rotateZ(-1.5deg);z-index:1}
.pane-phones .ph3:nth-child(2){transform:rotateY(-18deg) rotateX(4deg) rotateZ(1.5deg) translateY(26px);z-index:2}
.pane-phones .ph3:nth-child(1) .phone{box-shadow:28px 40px 72px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08) inset}
.pane-phones .ph3:nth-child(2) .phone{box-shadow:-28px 40px 72px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08) inset}
.pane-copy h3{font-size:clamp(25px,3vw,38px);font-weight:800;color:#fff}
.pane-copy>p{color:rgba(255,255,255,.64);font-size:16px;margin-top:16px;max-width:480px}
.pane-list{margin-top:28px;display:flex;flex-direction:column;gap:4px}
.pl{display:flex;gap:14px;align-items:flex-start;padding:15px;border-radius:16px;transition:background .3s}
.pl:hover{background:rgba(255,255,255,.045)}
.pl .ic{width:40px;height:40px;border-radius:12px;background:rgba(200,241,105,.12);border:1px solid rgba(200,241,105,.2);
  display:grid;place-items:center;font-size:17px;flex-shrink:0}
.pl h4{color:#fff;font-size:15.5px;font-weight:700}
.pl p{color:rgba(255,255,255,.56);font-size:13.5px;margin-top:3px}
.pane-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.pane-tags span{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);color:rgba(255,255,255,.78);
  border-radius:99px;padding:8px 15px;font-size:12.5px;font-weight:600}

/* ---------------- admin dashboard mockup ---------------- */
.dw3{position:relative;transform:rotateY(-11deg) rotateX(3deg);transform-style:preserve-3d}
.dashwin{border-radius:20px;overflow:hidden;background:#fff;box-shadow:-30px 44px 82px rgba(0,0,0,.5)}
.dw-bar{display:flex;align-items:center;gap:8px;background:#e8ebe9;padding:11px 15px;border-bottom:1px solid var(--stroke)}
.dw-bar .d{width:10px;height:10px;border-radius:50%}
.dw-bar .d:nth-child(1){background:#ef4444}
.dw-bar .d:nth-child(2){background:#f59e0b}
.dw-bar .d:nth-child(3){background:#22c55e}
.dw-bar .url{margin-left:12px;flex:1;background:#fff;border-radius:7px;padding:5px 12px;font-size:11px;color:var(--muted-2)}
.dw-body{display:grid;grid-template-columns:154px 1fr;min-height:400px}
.dw-side{background:var(--deep);padding:18px 12px;display:flex;flex-direction:column;gap:3px}
.dw-side .lg{display:flex;align-items:center;gap:8px;color:#fff;font-family:'Sora';font-weight:800;font-size:12.5px;padding:0 8px 16px;letter-spacing:-.03em}
.dw-side .lg img{width:22px}
.dw-side a{display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.52);font-size:11.5px;font-weight:500;padding:9px 10px;border-radius:9px;transition:background .25s,color .25s}
.dw-side a.on,.dw-side a:hover{background:rgba(200,241,105,.12);color:var(--lime)}
.dw-main{padding:20px;background:#f5f7f6}
.dw-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:10px}
.dw-head h4{font-size:17px;font-weight:700}
.dw-head small{color:var(--muted);font-size:11.5px;display:block;margin-top:2px}
.dw-head .pill{background:rgba(22,163,74,.09);color:#117a3b;border-radius:99px;padding:6px 13px;font-size:11px;font-weight:700}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:14px}
.kpi{background:#fff;border:1px solid var(--stroke);border-radius:14px;padding:14px;transition:border-color .3s}
.kpi:hover{border-color:rgba(22,163,74,.35)}
.kpi .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.kpi .lab{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700}
.kpi .ic{width:28px;height:28px;border-radius:9px;background:rgba(22,163,74,.1);display:grid;place-items:center;font-size:13px}
.kpi .val{font-family:'Sora';font-size:23px;font-weight:800;line-height:1}
.kpi .hint{font-size:10.5px;color:var(--muted-2);margin-top:5px}
.charts2{display:grid;grid-template-columns:1.35fr 1fr;gap:11px}
.chartc{background:#fff;border:1px solid var(--stroke);border-radius:14px;padding:14px}
.chartc .ch{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.chartc h5{font-size:12.5px;font-weight:700}
.chartc small{font-size:10px;color:var(--muted-2)}
.bars{display:flex;align-items:flex-end;gap:9px;height:110px}
.bars .bg{flex:1;display:flex;align-items:flex-end;gap:3px;height:100%}
.bars .bg i{flex:1;border-radius:4px 4px 0 0;transform:scaleY(0);transform-origin:bottom;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.bars .bg i.a{background:var(--green-2)}
.bars .bg i.b{background:#ef4444;opacity:.85}
.bars.lit .bg i{transform:scaleY(1)}
.blabels{display:flex;gap:9px;margin-top:8px}
.blabels span{flex:1;text-align:center;font-size:9px;color:var(--muted-2);font-weight:600}
.legend{display:flex;gap:14px;margin-top:12px}
.legend span{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;color:var(--muted)}
.legend i{width:9px;height:9px;border-radius:3px;display:block}
.donut{width:120px;height:120px;border-radius:50%;margin:6px auto 0;
  background:conic-gradient(var(--green-2) 0 62%,var(--lime) 62% 84%,#e1e6e3 84% 100%);
  display:grid;place-items:center;position:relative}
.donut::after{content:"";position:absolute;width:72px;height:72px;border-radius:50%;background:#fff}
.donut b{position:relative;z-index:2;font-family:'Sora';font-size:19px;font-weight:800}
.dlist{margin-top:14px;display:flex;flex-direction:column;gap:7px}
.dlist div{display:flex;align-items:center;gap:8px;font-size:10.5px;color:var(--muted)}
.dlist i{width:9px;height:9px;border-radius:3px;flex-shrink:0}
.dlist b{margin-left:auto;color:var(--ink);font-weight:700}

/* ---------------- split sections ---------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mini{background:var(--panel);border:1px solid var(--stroke);border-radius:16px;padding:20px;transition:border-color .3s,background .3s}
.mini:hover{border-color:rgba(22,163,74,.35);background:rgba(22,163,74,.04)}
.mini .ic{width:44px;height:44px;border-radius:50%;background:rgba(22,163,74,.1);display:grid;place-items:center;font-size:19px;margin-bottom:13px}
.mini.o .ic{background:var(--lime)}
.mini h4{font-size:15px;font-weight:600}
.dash{margin-top:24px;border-radius:20px;overflow:hidden;aspect-ratio:16/8.4;background:var(--deep);position:relative}
.dash::after{content:"";position:absolute;inset:0;background-image:var(--noise);opacity:.06;pointer-events:none}
.dash .tag{position:absolute;top:15px;left:19px;font-size:10.5px;letter-spacing:.16em;color:rgba(255,255,255,.5);font-weight:700;z-index:2}
.dash .amt{position:absolute;top:34px;left:19px;font-family:'Sora';font-size:24px;font-weight:800;color:#fff;z-index:2}
.dash .up{position:absolute;top:15px;right:19px;background:rgba(200,241,105,.14);color:var(--lime);border-radius:99px;padding:5px 11px;font-size:11px;font-weight:700;z-index:2}
.dash .bars{position:absolute;inset:auto 22px 22px 22px;top:78px;display:flex;align-items:stretch;gap:4px;height:auto;z-index:2}
.dash .bars i{flex:1;height:100%;border-radius:3px 3px 0 0;background:var(--lime);transform-origin:bottom;transform:scaleY(0);transition:transform .9s cubic-bezier(.2,.7,.2,1)}

/* ---------------- ai ---------------- */
.ai-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ai-c{border:1px solid var(--stroke);background:var(--panel);border-radius:18px;padding:24px;transition:border-color .3s}
.ai-c:hover{border-color:rgba(22,163,74,.35)}
.ai-c .ic{width:44px;height:44px;border-radius:50%;background:rgba(22,163,74,.1);display:grid;place-items:center;font-size:19px;margin-bottom:14px}
.ai-c h4{font-size:16.5px;font-weight:700}
.ai-c p{color:var(--muted);font-size:13px;margin-top:6px}

/* ---------------- sustainability ---------------- */
#sus{position:relative;overflow:hidden;background:#0a3d28}
#sus::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:64px 64px}
#sus::after{content:"";position:absolute;inset:0;background-image:var(--noise);opacity:.06;pointer-events:none}
#sus .wrap{position:relative;z-index:2}
#sus .globe{position:absolute;right:-8%;top:50%;transform:translateY(-50%);width:min(540px,52vw);aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,255,255,.14);opacity:.4;z-index:1}
#sus .globe::before,#sus .globe::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,.1)}
#sus .globe::before{transform:rotateY(72deg)}
#sus .globe::after{transform:rotateX(72deg)}
.sus-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:13px;margin-top:42px}
.sus{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:22px;transition:background .3s;color:#fff}
.sus:hover{background:rgba(255,255,255,.13)}
.sus .ic{font-size:23px;margin-bottom:13px}
.sus h4{font-size:14px;font-weight:600}
.sdgs{display:flex;gap:11px;margin-top:28px;flex-wrap:wrap}
.sdg{background:var(--lime);color:#06301c;font-weight:700;font-family:'Sora';padding:9px 19px;border-radius:99px;font-size:14px}

/* ---------------- investors ---------------- */
.inv-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:14px;margin-top:48px}
.inv{border:1px solid var(--stroke);background:var(--panel);border-radius:20px;padding:28px;transition:border-color .3s}
.inv:hover{border-color:var(--stroke-2)}
.inv.big{grid-row:span 2;background:var(--deep);border-color:var(--deep);display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.inv.big::after{content:"";position:absolute;inset:0;background-image:var(--noise);opacity:.06;pointer-events:none}
.inv.big>*{position:relative;z-index:2}
.inv.big h4{color:#fff}
.inv.big p{color:rgba(255,255,255,.72)}
.inv .ic{width:48px;height:48px;border-radius:50%;background:rgba(22,163,74,.1);display:grid;place-items:center;font-size:20px;margin-bottom:18px}
.inv.big .ic{background:var(--lime)}
.inv h4{font-size:18px;font-weight:700;margin-bottom:7px}
.inv p{color:var(--muted);font-size:14px}
.inv-cta{display:flex;gap:12px;justify-content:center;margin-top:40px;flex-wrap:wrap}

/* ---------------- cta band ---------------- */
.cta-band{border-radius:26px;background:var(--green);position:relative;overflow:hidden;
  display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:center;padding:52px 52px 0}
.cta-band::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.075) 1px,transparent 1px);background-size:44px 44px}
.cta-band::after{content:"";position:absolute;inset:0;background-image:var(--noise);opacity:.07;pointer-events:none}
.cta-l{position:relative;z-index:2;padding-bottom:52px}
.cta-l h3{color:#fff;font-size:clamp(25px,3.2vw,40px);font-weight:800}
.cta-l p{color:rgba(255,255,255,.85);font-size:15px;margin-top:16px;max-width:440px}
.cta-btns{display:flex;gap:11px;margin-top:26px;flex-wrap:wrap}
.store{display:inline-flex;align-items:center;gap:10px;background:var(--deep);color:#fff;border-radius:13px;padding:11px 20px;transition:background .25s}
.store .g{font-size:22px}
.store small{display:block;font-size:9.5px;opacity:.6;line-height:1.2}
.store b{display:block;font-size:14px;font-family:'Sora'}
.store:hover{background:#000}
.cta-r{position:relative;z-index:2;display:flex;justify-content:center;gap:16px;align-items:flex-end;
  perspective:1600px;perspective-origin:55% 55%}
.cta-r .phone{margin-bottom:-44px;transform:rotateY(16deg) rotateX(4deg) rotateZ(-1.5deg);
  box-shadow:28px 40px 72px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.08) inset}
.cta-r .p-sheet{padding-bottom:92px}   /* the band clips the phone — keep the cut through empty space */

/* ---------------- testimonials ---------------- */
#tst{background:var(--bg-2)}
.t-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
.tc{border:1px solid var(--stroke);background:#fff;border-radius:22px;padding:30px;transition:border-color .3s}
.tc:hover{border-color:rgba(22,163,74,.35)}
.tc .stars{color:var(--green);font-size:13px;letter-spacing:2px}
.tc p{font-size:15.5px;color:#333e48;margin:16px 0 24px}
.tp{display:flex;align-items:center;gap:12px}
.tp .av{width:44px;height:44px;border-radius:50%;background:var(--green);display:grid;place-items:center;font-weight:700;font-size:13.5px;color:#fff}
.tp b{display:block;font-size:14.5px}
.tp small{color:var(--muted);font-size:12.5px}

/* ---------------- faq ---------------- */
.faq{max-width:900px;margin:48px auto 0}
.fitem{background:#fff;border:1px solid var(--stroke);border-radius:16px;margin-bottom:11px;transition:border-color .3s}
.fitem.open{border-color:rgba(22,163,74,.35)}
.fq{display:flex;align-items:center;gap:18px;padding:22px 24px;cursor:pointer}
.fq .fn{font-family:'Sora';font-weight:800;font-size:14px;color:var(--green);min-width:26px}
.fq .ft{font-family:'Sora';font-weight:600;font-size:clamp(15.5px,1.5vw,19px);flex:1}
.fq .fx{width:30px;height:30px;border-radius:50%;background:rgba(22,163,74,.09);color:var(--green);display:grid;place-items:center;
  transition:transform .35s,background .3s,color .3s;font-size:17px;line-height:1;flex-shrink:0}
.fitem.open .fx{transform:rotate(45deg);background:var(--green);color:#fff}
.fa{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.4,0,.2,1)}
/* answers ship open, so nothing is hidden behind a click (and they stay
   readable even if JS never runs); the toggle then collapses/expands */
.fitem.open .fa{max-height:600px}
.fa p{color:var(--muted);font-size:15px;padding:0 24px 24px 68px;max-width:700px}

/* ---------------- contact ---------------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.02fr;gap:56px;align-items:start}
.cinfo{margin-top:30px;display:flex;flex-direction:column;gap:16px}
.ci{display:flex;gap:14px;align-items:center}
.ci .ic{width:46px;height:46px;border-radius:50%;background:rgba(22,163,74,.1);display:grid;place-items:center;font-size:18px}
.ci small{color:var(--muted);font-size:12.5px;display:block}
.ci b{font-size:15.5px}
.cmap{margin-top:26px;border-radius:18px;overflow:hidden;border:1px solid var(--stroke);aspect-ratio:16/7.4;position:relative;background:#e8edea}
.cmap::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(12,22,34,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(12,22,34,.05) 1px,transparent 1px);background-size:30px 30px}
.cmap .rdx{position:absolute;background:#fff;border-radius:2px}
.cmap .rdx.a{left:-5%;top:44%;width:110%;height:12px;transform:rotate(-6deg)}
.cmap .rdx.b{left:40%;top:-10%;width:10px;height:120%;transform:rotate(8deg)}
.cmap .pin{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;
  background:var(--green);display:grid;place-items:center;color:#fff;box-shadow:0 0 0 8px rgba(22,163,74,.2)}
.cmap .lbl{position:absolute;bottom:13px;left:13px;background:#fff;padding:6px 12px;border-radius:9px;font-size:12px;font-weight:600}
.form{background:#fff;border:1px solid var(--stroke);border-radius:24px;padding:32px}
.form .fld{margin-bottom:18px}
.form label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:7px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form input,.form textarea{width:100%;padding:14px 16px;background:#f5f7f6;border:1px solid var(--stroke);border-radius:12px;
  color:var(--ink);font-family:inherit;font-size:15px;transition:border-color .25s,background .25s}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--green);background:rgba(22,163,74,.04)}
.form textarea{min-height:118px;resize:vertical}
.form .btn-primary{width:100%;padding:16px;margin-top:4px}

/* ---------------- footer ---------------- */
footer{background:var(--deep);padding:68px 0 30px;color:#e7eaec;position:relative;overflow:hidden}
footer::after{content:"";position:absolute;inset:0;background-image:var(--noise);opacity:.05;pointer-events:none}
footer .wrap{position:relative;z-index:2}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:42px}
.foot-brand p{color:rgba(255,255,255,.52);font-size:14px;margin:16px 0 20px;max-width:300px}
.socials{display:flex;gap:10px}
.socials a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.13);display:grid;place-items:center;
  color:rgba(255,255,255,.58);transition:background .25s,color .25s,border-color .25s;font-size:13.5px}
.socials a:hover{color:var(--deep);background:var(--lime);border-color:var(--lime)}
.fcol h5{font-family:'Sora';font-size:14.5px;margin-bottom:16px;color:#fff}
.fcol a{display:block;color:rgba(255,255,255,.52);font-size:14px;margin-bottom:11px;transition:color .25s}
.fcol a:hover{color:var(--lime)}
.news p{color:rgba(255,255,255,.52);font-size:13.5px;margin-bottom:14px}
.news .nf{display:flex;gap:8px}
.news input{flex:1;min-width:0;padding:13px 15px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
  border-radius:99px;color:#fff;font-family:inherit;font-size:14px;outline:none;transition:border-color .25s}
.news input::placeholder{color:rgba(255,255,255,.38)}
.news input:focus{border-color:var(--lime)}
.news button{background:var(--lime);border:none;border-radius:99px;color:var(--deep);padding:0 20px;cursor:pointer;font-weight:700;transition:background .25s}
.news button:hover{background:var(--lime-2)}
.foot-bot{display:flex;justify-content:space-between;align-items:center;margin-top:44px;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.09);color:rgba(255,255,255,.48);font-size:13px;flex-wrap:wrap;gap:10px}

#prog{position:fixed;top:0;left:0;height:3px;width:0;background:var(--lime);z-index:950}

/* ============================================================
   LEGAL / CONTENT SUB-PAGES
   ============================================================ */
.page-hero{background:var(--deep);position:relative;overflow:hidden;padding:180px 0 80px}
.page-hero::before{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:76px 76px}
.page-hero::after{content:"";position:absolute;inset:0;background-image:var(--noise);opacity:.08;pointer-events:none}
.page-hero .wrap{position:relative;z-index:2}
.page-hero h1{color:#fff;font-size:clamp(32px,4.6vw,56px);font-weight:800;margin-top:20px}
.page-hero p{color:rgba(255,255,255,.62);font-size:16px;margin-top:16px;max-width:560px}
.crumb{display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.45);font-size:13px;margin-bottom:22px}
.crumb a:hover{color:var(--lime)}

.doc{display:grid;grid-template-columns:250px 1fr;gap:56px;align-items:start;padding:clamp(56px,7vh,88px) 0}
.doc-nav{position:sticky;top:120px;border-left:2px solid var(--stroke);padding-left:20px}
.doc-nav h5{font-family:'Sora';font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);margin-bottom:14px}
.doc-nav a{display:block;font-size:14px;color:var(--muted);padding:7px 0;transition:color .25s}
.doc-nav a:hover{color:var(--green)}
.doc-body{max-width:760px}
.doc-body .updated{display:inline-flex;background:rgba(22,163,74,.09);border:1px solid rgba(22,163,74,.2);color:#117a3b;
  border-radius:99px;padding:7px 16px;font-size:12.5px;font-weight:600;margin-bottom:30px}
.doc-body h2{font-size:clamp(22px,2.4vw,30px);font-weight:800;margin:44px 0 14px;scroll-margin-top:120px}
.doc-body h2:first-of-type{margin-top:0}
.doc-body h3{font-size:18px;font-weight:700;margin:26px 0 10px}
.doc-body p{color:var(--muted);font-size:15.5px;margin-bottom:15px}
.doc-body ul{margin:0 0 18px 20px}
.doc-body li{color:var(--muted);font-size:15.5px;margin-bottom:9px}
.doc-body a{color:var(--green);font-weight:600}
.doc-body a:hover{text-decoration:underline}
.doc-note{background:#fff;border:1px solid var(--stroke);border-left:3px solid var(--green);border-radius:14px;padding:20px 24px;margin:26px 0}
.doc-note p{margin:0;font-size:14.5px}
.placeholder{background:rgba(200,241,105,.16);border:1px dashed rgba(22,163,74,.4);border-radius:14px;padding:18px 22px;margin:26px 0}
.placeholder p{margin:0;color:#3f5a25;font-size:14px;font-weight:500}

/* Our Vision page */
.vision-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
.vcard{background:#fff;border:1px solid var(--stroke);border-radius:20px;padding:28px;transition:border-color .3s}
.vcard:hover{border-color:rgba(22,163,74,.35)}
.vcard .ic{width:50px;height:50px;border-radius:50%;background:rgba(22,163,74,.1);display:grid;place-items:center;font-size:21px;margin-bottom:18px}
.vcard h3{font-size:19px;font-weight:700;margin-bottom:8px}
.vcard p{color:var(--muted);font-size:14.5px}
.pillars{display:flex;flex-direction:column;gap:2px;margin-top:44px}
.pillar{display:grid;grid-template-columns:64px 1fr;gap:24px;padding:28px 0;border-top:1px solid var(--stroke);align-items:start}
.pillar:last-child{border-bottom:1px solid var(--stroke)}
.pillar .n{font-family:'Sora';font-size:26px;font-weight:800;color:rgba(12,22,34,.15)}
.pillar h3{font-size:21px;font-weight:700;margin-bottom:8px}
.pillar p{color:var(--muted);font-size:15px;max-width:640px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1180px){
  .hero-in{grid-template-columns:1fr;gap:56px}
  .hero-copy{max-width:none}
  .strip-in{grid-template-columns:1fr}
  .pane-in,.pane-in.wide-left{grid-template-columns:1fr;gap:40px}
  .steps-stage{grid-template-columns:1fr;gap:44px}
  .steps-col.left{text-align:left}
  .steps-col.left .stp .n{margin-left:0}
  .steps-col.left .stp p{margin-left:0}
  .steps-col{flex-direction:row;flex-wrap:wrap;gap:26px}
  .steps-col .stp{flex:1 1 220px}
  .cta-band{grid-template-columns:1fr;padding:44px 34px 0}
  .cta-r{margin-top:20px}
  .doc{grid-template-columns:1fr;gap:34px}
  .doc-nav{position:static;display:flex;flex-wrap:wrap;gap:6px 18px;border-left:none;border-top:2px solid var(--stroke);
    padding:18px 0 0}
  .doc-nav h5{width:100%;margin-bottom:6px}
}
@media(max-width:1024px){
  .menu,.nav-right .nav-cta{display:none}
  .burger{display:flex}
  .about-grid,.split,.contact-grid{grid-template-columns:1fr;gap:42px}
  .hero-stats{grid-template-columns:1fr 1fr}
  .strip-cards{grid-template-columns:1fr;gap:22px;padding:26px}
  .ai-cards{grid-template-columns:1fr 1fr}
  .sus-grid{grid-template-columns:1fr 1fr 1fr}
  .inv-grid{grid-template-columns:1fr 1fr}
  .inv.big{grid-row:auto;grid-column:1/-1}
  .t-grid,.vision-grid{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr 1fr}
  .dw-body{grid-template-columns:1fr}
  .dw-side{flex-direction:row;overflow-x:auto;gap:6px;padding:12px}
  .dw-side .lg{display:none}
  .dw-side a{white-space:nowrap}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .charts2{grid-template-columns:1fr}
  .tb-left span:nth-child(3){display:none}
}

/* ---- Mobile hero: stack cleanly, flatten the 3D, nothing absolute ---- */
@media(max-width:860px){
  #hero{padding:146px 0 64px}
  .hero-stage{min-height:0;padding:16px 0 0}
  .float-chip,.exp-badge,.hero-dot,.hero-bars,.scroll-cue{display:none}
  .stage-3d{perspective:1200px;max-width:min(420px,92vw)}
  .hero-blob{width:104%;left:-2%}
  .hero-stage .phone3d{transform:rotateY(-13deg) rotateX(4deg);width:min(240px,62vw);flex-basis:auto}
  .stage-floor{width:60%;bottom:-8px}
  .steps-center .phone,.cta-r .phone{transform:rotateY(11deg) rotateX(3deg)}
  .pane-phones .ph3:nth-child(1){transform:rotateY(12deg) rotateX(3deg)}
  .pane-phones .ph3:nth-child(2){transform:rotateY(-12deg) rotateX(3deg)}
  .dw3{transform:rotateY(-7deg) rotateX(2deg)}
  .hero-proof{gap:20px}
  .hp-sep{display:none}
}
@media(max-width:720px){
  .navwrap{padding:10px 4vw}
  .bar{padding:7px 7px 7px 16px}
  .logo{font-size:17px;gap:9px}
  .logo img{width:32px}
  /* #network .strip outranks a bare .strip, so it has to be named here too */
  .strip,#network .strip{margin-top:-40px}
  .stats-strip,#network .stats-strip{padding:56px 0 70px}
  .hero-stats,.mini-grid,.ai-cards,.sus-grid,.inv-grid,.form-row,.foot-top{grid-template-columns:1fr}
  .about-stats{grid-template-columns:1fr 1fr}
  .fcard{flex-basis:78vw}
  .foot-bot{flex-direction:column;text-align:center}
  .fa p{padding-left:24px}
  .tabs{flex-direction:column;width:100%}
  .tabs-wrap{margin-top:28px}
  .pane-phones{gap:34px}
  .pane-phones .ph3:nth-child(1){transform:rotateY(10deg) rotateX(3deg)}
  .pane-phones .ph3:nth-child(2){transform:rotateY(-10deg) rotateX(3deg)}
  .steps-center .st-floor{display:none}
  .cta-band{padding:34px 22px 0;border-radius:20px}
  .cta-r .phone{margin-bottom:-30px}
  .tb-left span:nth-child(2){display:none}
  .form,.doc-note{padding:22px}
  .pillar{grid-template-columns:1fr;gap:8px}
}
@media(max-width:430px){
  .tb-in{gap:10px}
  .tb-social{display:none}
  .hero-proof{flex-direction:column;align-items:flex-start;gap:18px}
  .hero-cta .btn{width:100%}
  .about-stats{grid-template-columns:1fr}
  .p-checks span{flex-basis:100%}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  [data-reveal],.mask>span,.hero-h .ln>span{opacity:1!important;transform:none!important}
}

/* ============================================================
   RESPONSIVE — the heavy scroll effects are for pointer devices with
   room. Phones get a plain document.
   ============================================================ */
@media(max-width:900px){
  html.full .panel{min-height:0}
  .panel{display:block}
  .panel.sec{padding-top:clamp(64px,9vh,96px);padding-bottom:clamp(48px,7vh,80px)}

  .fx-stage{padding:clamp(64px,8vh,90px) 0}
  .fx-grid{grid-template-columns:1fr;gap:34px}
  .fx-left{position:static!important;padding:0;transform:none!important}
  .fx-prog,.fx-hint{display:none}
  .fx-stats{gap:22px}
  .fxc{padding:22px;gap:15px}
  .fxc .no{display:none}
  .fxc:hover{transform:none}

  .hz-stage{min-height:0;padding:clamp(64px,8vh,90px) 0;gap:26px}
  /* the track becomes a normal swipeable rail */
  .hz-view{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .hz-view::-webkit-scrollbar{display:none}
  .hz-track{transform:none!important;padding-bottom:6px}
  .hzc{flex-basis:min(78vw,330px);min-height:0}
  .hzc-visual{display:none}
  .hz-rail{display:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.full .panel{min-height:0}
}

/* ============================================================
   SUB-PAGES (our vision / privacy / terms)
   Deliberately simple: normal document flow — no 100vh panels and
   no pinning. The scroll treatment is the index page's job only.
   ============================================================ */
.doc-sec{display:block;padding:clamp(24px,4vh,44px) 0;scroll-margin-top:96px}
.doc-sec:first-of-type{padding-top:clamp(18px,3vh,34px)}
.doc-sec > h2:first-child{margin-top:0}
@media(max-width:900px){
  .doc-sec{padding:clamp(20px,3vh,34px) 0}
}

/* ============================================================
   VIEWPORT FIT — desktop
   Sections are full-height, so their content has to fit one viewport or
   it spills past the fold. #apps, #faq and #investors were the three
   that overflowed, so their vertical rhythm is scaled against viewport
   height here until each one sits inside 100vh.
   ============================================================ */
@media(min-width:901px){

  /* --- APPS ---
     The two mockups were wrapping: the column measures 546px while two
     282px phones plus their gap need 562px, so the second phone dropped
     onto a new row and doubled the section to 1169px. They now never
     wrap, and scale with viewport height instead. */
     The screen UI inside the frame is laid out in fixed px against a 268px
     phone, so the frame is scaled as a whole rather than narrowed —
     narrowing the frame alone clips its own screen content (the login
     button was being cut in half). --ph steps down with viewport height. */
  .pane-phones{--ph:.86;flex-wrap:nowrap;gap:clamp(12px,1.6vh,26px)}
  .pane-phones .ph3{width:calc(268px * var(--ph));height:calc(572px * var(--ph))}
  .pane-phones .phone{transform:scale(var(--ph));transform-origin:top left}
  .pane-phones .ph3:nth-child(2){
    transform:rotateY(-18deg) rotateX(4deg) rotateZ(1.5deg) translateY(clamp(8px,1.8vh,26px))}
  .tabs-wrap{margin-top:clamp(9px,1.5vh,34px)}
  .panes{margin-top:clamp(9px,1.7vh,52px)}
  /* All three panes share one grid cell, so .panes is always as tall as the
     tallest pane. Without this the stage would resize as the scroll advances
     from Customer to Driver to Admin and the content would jump. */
  .panes{display:grid}
  .pane{grid-area:1/1;display:block;opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .35s ease}
  .pane.on{opacity:1;visibility:visible;pointer-events:auto}
  .pane-in{gap:clamp(28px,4vw,56px)}
  .pane-copy h3{font-size:clamp(21px,2.5vw,32px)}
  .pane-copy>p{margin-top:clamp(9px,1.5vh,16px);font-size:clamp(14px,1.1vw,16px)}
  .pane-list{margin-top:clamp(10px,1.8vh,28px)}
  .pl{padding:clamp(7px,1.15vh,15px)}
  .pane-tags{margin-top:clamp(8px,1.6vh,26px)}

  /* --- FAQ ---
     Six answers ship open, which is 1008px in one column. Two columns
     turn that into three rows and it fits with room to spare. */
  .faq{max-width:1180px;margin-top:clamp(20px,3.2vh,48px);
    display:grid;grid-template-columns:1fr 1fr;gap:0 18px;align-content:start}
  .fq{padding:clamp(12px,1.8vh,22px) 22px}
  .fa p{padding:0 22px clamp(12px,1.8vh,24px) 62px;font-size:14.5px}

  /* --- INVESTORS --- */
  .inv-grid{margin-top:clamp(18px,2.6vh,48px);gap:clamp(9px,1.1vh,14px)}
  .inv{padding:clamp(14px,2.1vh,28px)}
  .inv-cta{margin-top:clamp(14px,2vh,36px)}

  /* --- shared ---
     A centred section head sits above every dense grid, so trimming it
     buys height in #apps, #investors, #faq and #tst at once. The panel
     padding is only a minimum — .panel.sec centres its content — so
     tightening it costs nothing visually on sections that already fit
     and buys headroom on the ones that do not. */
  .panel.sec{padding-top:clamp(94px,10vh,120px);padding-bottom:clamp(38px,4.8vh,68px)}
  .sec-head.center{max-width:620px}
  .sec-head.center .sec-h{font-size:clamp(26px,min(3.6vw,4.4vh),44px);margin-top:clamp(8px,1.4vh,18px)}
  .sec-head.center .sec-p{font-size:clamp(13.5px,1.05vw,16px);margin-top:clamp(8px,1.3vh,16px)}

  /* --- apps: denser copy column --- */
  .pane-copy>p{max-width:440px}
  .pane-tags{gap:6px}
  .pane-tags span{padding:clamp(5px,.8vh,8px) clamp(10px,1vw,15px);font-size:12px}
  .pl .ic{width:clamp(32px,4.2vh,40px);height:clamp(32px,4.2vh,40px)}
  .pl h4{font-size:clamp(14px,1.6vh,15.5px)}
  .pl p{font-size:clamp(12.5px,1.4vh,13.5px)}

  /* --- apps: the admin dashboard mockup drives the stacked pane cell,
     so it scales with viewport height as well --- */
  .dw-body{min-height:clamp(170px,24vh,400px)}
  .dw-main{padding:clamp(11px,1.8vh,20px)}
  .dw-head{margin-bottom:clamp(8px,1.4vh,16px)}
  .dw-head h4{font-size:clamp(13.5px,1.7vh,17px)}
  .kpis{gap:clamp(6px,.95vh,11px);margin-bottom:clamp(7px,1.2vh,14px)}
  .kpi{padding:clamp(8px,1.3vh,14px)}
  .kpi .top{margin-bottom:clamp(4px,.8vh,9px)}
  .kpi .ic{width:clamp(21px,2.6vh,28px);height:clamp(21px,2.6vh,28px)}
  .kpi .val{font-size:clamp(15px,2vh,23px)}
  .charts2{gap:clamp(6px,.95vh,11px)}
  .chartc{padding:clamp(8px,1.3vh,14px)}
  .chartc .ch{margin-bottom:clamp(5px,.9vh,14px)}
  .bars{height:clamp(40px,7.4vh,110px)}
  .donut{width:clamp(58px,9vh,120px);height:clamp(58px,9vh,120px)}
  .legend{margin-top:clamp(4px,.8vh,12px)}
  .blabels{margin-top:clamp(4px,.7vh,8px)}
  .dw-bar{padding:clamp(6px,1vh,11px) 15px}
  .dw-side{padding:clamp(10px,1.6vh,18px) 12px}
  .dw-side a{padding:clamp(4px,.8vh,9px) 10px}
  .dw-side .lg{padding-bottom:clamp(8px,1.4vh,16px)}

  /* --- investors: denser cards --- */
  .inv .ic{width:clamp(34px,4.4vh,48px);height:clamp(34px,4.4vh,48px);
    margin-bottom:clamp(8px,1.4vh,18px)}
  .inv h4{font-size:clamp(15px,1.8vh,18px);margin-bottom:clamp(4px,.8vh,7px)}
  .inv p{font-size:clamp(12.5px,1.5vh,14px)}
}
/* phone-frame scale steps — see --ph above */
@media(min-width:901px) and (max-height:1000px){ .pane-phones{--ph:.78} }
@media(min-width:901px) and (max-height:900px) { .pane-phones{--ph:.72} }
@media(min-width:901px) and (max-height:820px) { .pane-phones{--ph:.64} }

@media(min-width:901px) and (max-height:920px){
  .panel.sec{padding-top:clamp(84px,10vh,106px);padding-bottom:clamp(34px,4.4vh,58px)}

  /* #about and #contact are the two that still overflow a 768px laptop */
  .about-grid{gap:clamp(28px,4vw,44px)}
  .about-visual{aspect-ratio:4/3.2}
  .about-visual .logo-lg{width:48%}
  .about-mission{gap:12px;margin-top:clamp(12px,1.9vh,26px)}
  .about-mission .ic{width:38px;height:38px}
  .about-note{margin-top:clamp(12px,2vh,26px);padding:8px 8px 8px 16px}
  .about-stats{margin-top:clamp(14px,2.1vh,30px);gap:14px}

  .cinfo{margin-top:clamp(16px,2.4vh,30px);gap:clamp(9px,1.4vh,16px)}
  .ci .ic{width:40px;height:40px}
  .cmap{margin-top:clamp(14px,2.2vh,26px);aspect-ratio:16/5.4}
  .form{padding:clamp(18px,2.8vh,32px)}
  .form textarea{min-height:clamp(74px,11vh,118px)}

  /* The #apps stage is PINNED, so anything past 100vh is cut off rather than
     scrollable — on short screens it has to be squeezed to fit exactly. */
  .apps-stage{padding:clamp(84px,9.6vh,110px) 0 clamp(18px,2.4vh,40px)}
  #apps .sec-head.center .sec-h{font-size:clamp(23px,3vw,34px)}
  #apps .sec-head.center .sec-p{font-size:13px;margin-top:7px}
  .apps-rail{margin-top:9px}
  .pane-copy h3{font-size:clamp(19px,2.2vw,26px)}
  .dw-body{min-height:clamp(150px,21vh,400px)}
  .bars{height:clamp(34px,6.4vh,110px)}
  .donut{width:clamp(50px,7.8vh,120px);height:clamp(50px,7.8vh,120px)}
  .kpi{padding:clamp(7px,1.1vh,14px)}
  .kpi .val{font-size:clamp(14px,1.8vh,23px)}

  /* #apps is the densest section — squeeze its copy column further */
  .tabs-wrap{margin-top:clamp(12px,2vh,34px)}
  .panes{margin-top:clamp(14px,2.4vh,52px)}
  .pane-list{margin-top:clamp(8px,1.5vh,28px);gap:2px}
  .pl{padding:clamp(6px,1vh,15px)}
  .pane-copy>p{font-size:13.5px}
  .pane-tags{margin-top:clamp(8px,1.4vh,26px)}
  .about-mission p,.about-note p{font-size:13.5px}

  .fitem{margin-bottom:8px}
  .hz-stage{padding-top:clamp(96px,12vh,124px)}
  .fx-stage{padding-top:clamp(118px,14vh,150px)}
}

/* Very short laptops: last squeeze so the pinned #apps stage still fits
   exactly one viewport and nothing is cut off the bottom of it. */
@media(min-width:901px) and (max-height:820px){
  .apps-stage{padding:clamp(80px,9.2vh,100px) 0 clamp(12px,1.6vh,28px)}
  .dw-body{min-height:clamp(100px,14vh,400px)}
  .dw-main{padding:clamp(9px,1.4vh,20px)}
  .chartc{padding:clamp(7px,1.1vh,14px)}
  .bars{height:clamp(24px,4.4vh,110px)}
  .donut{width:clamp(40px,5.8vh,120px);height:clamp(40px,5.8vh,120px)}
  .kpi .val{font-size:clamp(13px,1.6vh,23px)}
  .kpi .lab{font-size:9.5px}
  .kpi .hint{font-size:9.5px;margin-top:3px}
  .pane-list{gap:1px}
  .pane-tags span{padding:4px 10px;font-size:11.5px}
}

/* ------------------------------------------------------------
   Short viewports: tighten panel rhythm so more sections fit a
   single screen.
   ------------------------------------------------------------ */

/* ============================================================
   OUR VISION — founder note, before/after and leadership
   ============================================================ */
.founder-note{display:grid;grid-template-columns:minmax(200px,240px) 1fr;gap:clamp(24px,4vw,52px);
  align-items:start;background:var(--panel);border:1px solid var(--stroke);border-radius:24px;
  padding:clamp(24px,3.4vw,40px)}
.founder-id{display:flex;flex-direction:column;gap:14px;position:sticky;top:110px}
.founder-id b{display:block;font-family:'Sora';font-size:17px;font-weight:700}
.founder-id small{display:block;color:var(--muted);font-size:13px;margin-top:3px}
.fav{width:66px;height:66px;border-radius:50%;background:var(--deep);color:var(--lime);
  display:grid;place-items:center;font-family:'Sora';font-weight:800;font-size:21px;letter-spacing:-.02em}
.founder-body p{color:var(--muted);font-size:15.5px;line-height:1.75;margin-bottom:15px}
.founder-body p:last-child{margin-bottom:0}
.founder-body .lead{color:var(--ink);font-family:'Sora';font-weight:700;font-size:clamp(18px,2vw,23px);
  line-height:1.45;margin:22px 0}

.vs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:34px}
.vs{border-radius:22px;padding:clamp(20px,2.6vw,30px);border:1px solid var(--stroke);background:var(--panel)}
.vs p{color:var(--muted);font-size:14.5px;line-height:1.7;margin-top:12px}
.vs-tag{display:inline-flex;align-items:center;border-radius:99px;padding:6px 14px;
  font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.vs-before .vs-tag{background:rgba(12,22,34,.07);color:var(--muted)}
.vs-after{background:var(--deep);border-color:var(--deep)}
.vs-after .vs-tag{background:rgba(200,241,105,.14);color:var(--lime)}
.vs-after p{color:rgba(255,255,255,.72)}

.vs-pills{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.vs-pills span{background:rgba(22,163,74,.09);border:1px solid rgba(22,163,74,.2);color:var(--green);
  border-radius:99px;padding:9px 17px;font-size:13.5px;font-weight:600}

.vision-sign{font-family:'Sora';font-weight:800;font-size:clamp(22px,3vw,34px);color:var(--green);
  letter-spacing:-.02em;margin-top:26px}

.lead-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.leader{background:var(--panel);border:1px solid var(--stroke);border-radius:22px;
  padding:clamp(22px,2.6vw,32px);transition:border-color .3s}
.leader:hover{border-color:var(--stroke-2)}
.leader h4{font-family:'Sora';font-size:19px;font-weight:700;margin-top:16px}
.leader .role{display:block;color:var(--green);font-size:13.5px;font-weight:600;margin-top:5px}
.leader p{color:var(--muted);font-size:14.5px;line-height:1.7;margin-top:12px}

@media(max-width:900px){
  .founder-note{grid-template-columns:1fr;gap:22px}
  .founder-id{position:static;flex-direction:row;align-items:center;gap:16px}
  .vs-grid,.lead-grid{grid-template-columns:1fr}
}

/* ============================================================
   CONTACT LINKS, FORM STATUS AND THE FLOATING LEAD SHEET
   ============================================================ */
.tb-link{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:color .25s}
.tb-link:hover{color:var(--lime)}
.ci-link{display:block;font-size:15.5px;font-weight:600;color:var(--ink);transition:color .25s}
.ci-link:hover{color:var(--green)}
footer .foot-bot a{color:inherit;text-decoration:underline;text-underline-offset:3px}
footer .foot-bot a:hover{color:var(--lime)}

.form-msg{margin-top:14px;font-size:13.5px;font-weight:600;min-height:1.2em}
.form-msg.ok{color:var(--green)}
.form-msg.err{color:#d33a3a}
.form-msg.busy{color:var(--muted)}

.lead-wrap{position:fixed;left:0;right:0;bottom:0;z-index:960;display:flex;justify-content:center;
  padding:0 16px calc(16px + env(safe-area-inset-bottom,0px));pointer-events:none}
.lead-wrap[hidden]{display:none}
.lead-card{pointer-events:auto;position:relative;width:min(720px,100%);
  background:var(--deep);border:1px solid rgba(255,255,255,.14);border-radius:22px;
  padding:22px 24px;box-shadow:0 26px 60px rgba(0,0,0,.42);
  animation:leadUp .38s cubic-bezier(.2,.8,.25,1) both}
@keyframes leadUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.lead-card h4{color:#fff;font-family:'Sora';font-size:18px;font-weight:700}
.lead-sub{color:rgba(255,255,255,.6);font-size:13.5px;margin-top:5px}
.lead-row{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;margin-top:16px}
.lead-row input{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:12px;padding:13px 15px;color:#fff;font-family:inherit;font-size:14.5px;
  transition:border-color .25s,background .25s}
.lead-row input::placeholder{color:rgba(255,255,255,.42)}
.lead-row input:focus{outline:none;border-color:var(--lime);background:rgba(255,255,255,.1)}
.lead-row .btn{white-space:nowrap}
.lead-x{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.09);border:none;color:rgba(255,255,255,.7);cursor:pointer;
  display:grid;place-items:center;transition:background .25s,color .25s}
.lead-x:hover{background:rgba(255,255,255,.16);color:#fff}
.lead-card .form-msg{margin-top:11px}
.lead-card .form-msg.ok{color:var(--lime)}
.lead-card .form-msg.busy{color:rgba(255,255,255,.6)}
@media(max-width:700px){
  .lead-row{grid-template-columns:1fr}
  .lead-card{padding:20px 18px}
}