/* =====================================================================
   ROUNDRUN — cinematic 3D scroll site
   "Your round, on autopilot."
   Palette: deep teal-navy base · brand blue (#2563EB) · teal (#12C9B6) · cyan
   Blue→teal gradient blends (jeskojets-style), Cleo-style AI chat phone.
   ===================================================================== */
:root{
  --blue:#2f7ff0;
  --blue-2:#4aa3ff;
  --blue-deep:#1c5fd0;
  --teal:#15dcc6;
  --teal-2:#24f0da;
  --cyan:#32f0e2;
  --cyan-2:#8ffff3;
  --ink:#eafcff;
  --ink-dim:#aad4e0;
  --bg:#07343f;
  --bg-2:#0b4a58;
  --glass:rgba(255,255,255,.055);
  --glass-line:rgba(255,255,255,.13);
  --radius:26px;
  --maxw:1200px;
  --grad:linear-gradient(100deg,#48b6ff 0%,#1ff0d6 100%);
  --grad-solid:linear-gradient(100deg,var(--blue) 0%,var(--teal) 115%);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scrollbar-width:none;-webkit-text-size-adjust:100%;scrollbar-gutter:stable}
html::-webkit-scrollbar{display:none}
html.show-scrollbar{scrollbar-width:thin;scrollbar-color:rgba(36,240,218,.72) rgba(2,22,30,.45)}
html.show-scrollbar::-webkit-scrollbar{display:block;width:12px}
html.show-scrollbar::-webkit-scrollbar-track{background:rgba(2,22,30,.48)}
html.show-scrollbar::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--blue),var(--teal));border-radius:999px;border:3px solid rgba(2,22,30,.48)}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Poppins",system-ui,-apple-system,sans-serif;
  overflow-x:hidden;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--teal);color:#012}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:"Sora",system-ui,sans-serif;line-height:1.04;letter-spacing:-.02em;font-weight:800}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Buttons ---------- */
.btn{
  --mag-x:0px;--mag-y:0px;
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:"Poppins",sans-serif;font-weight:600;font-size:15px;
  padding:14px 26px;border-radius:100px;border:1px solid transparent;
  cursor:pointer;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .25s;
  white-space:nowrap;
  transform:translate3d(var(--mag-x),var(--mag-y),0);
}
.btn:hover{transform:translate3d(var(--mag-x),calc(var(--mag-y) - 2px),0)}
.btn-primary{
  background:var(--grad-solid);
  color:#fff;box-shadow:0 10px 30px -8px rgba(21,220,198,.6),inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-primary:hover{box-shadow:0 16px 44px -8px rgba(21,220,198,.75),inset 0 1px 0 rgba(255,255,255,.32)}
.btn-ghost{background:var(--glass);border-color:var(--glass-line);color:var(--ink);backdrop-filter:blur(12px)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-pill{padding:10px 20px;font-size:14px}
.btn-lg{padding:18px 36px;font-size:17px}

/* ---------- Nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(16px,4vw,40px);
  transition:background .4s,backdrop-filter .4s,padding .4s,border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  /* kept fully transparent at all scroll positions (per request) — no bg/blur/border */
  background:transparent;backdrop-filter:none;
  border-bottom-color:transparent;padding-top:12px;padding-bottom:12px;
}
.nav-brand img{height:34px;width:auto;filter:drop-shadow(0 2px 8px rgba(0,0,0,.45))}
.nav-links{display:flex;gap:30px}
.nav-links a{font-size:14.5px;font-weight:500;color:var(--ink-dim);transition:color .2s;position:relative}
.nav-links a:hover{color:#fff}
.nav-cta .dot{width:8px;height:8px;border-radius:50%;background:#34e6b0;box-shadow:0 0 10px #34e6b0;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ---------- Scrub stage (shared) ---------- */
.scrub{position:relative}
.hero{height:520vh}
.feature{height:330vh}
.sticky{position:sticky;top:0;height:100vh;width:100%;overflow:hidden;background:var(--bg)}
.sticky canvas{position:absolute;inset:0;width:100%;height:100%}
.scrim{position:absolute;inset:0;pointer-events:none}
.scrim-hero{background:
  radial-gradient(120% 80% at 62% 34%,transparent 24%,rgba(5,34,42,.5) 100%),
  linear-gradient(180deg,rgba(5,34,42,.55) 0%,transparent 20%,transparent 52%,rgba(5,34,42,.94) 100%),
  linear-gradient(90deg,rgba(5,34,42,.86) 0%,rgba(5,34,42,.34) 46%,transparent 72%);}
.scrim-round{background:
  radial-gradient(72% 60% at 22% 46%,rgba(120,200,238,.20),rgba(86,176,202,.06) 46%,transparent 70%),
  linear-gradient(96deg,rgba(10,38,68,.92) 0%,rgba(13,58,82,.5) 40%,rgba(17,98,104,.12) 68%,transparent 86%),
  linear-gradient(168deg,rgba(12,47,72,.5) 0%,transparent 28%,rgba(10,42,62,.84) 100%);}
.scrim-ai{background:
  radial-gradient(80% 70% at 50% 50%,transparent 20%,rgba(5,34,42,.55) 100%),
  linear-gradient(270deg,rgba(5,34,42,.9) 0%,rgba(5,34,42,.42) 44%,transparent 70%),
  linear-gradient(180deg,rgba(5,34,42,.5),transparent 30%,rgba(5,34,42,.86));}

/* progress bar */
.prog{display:none}
.prog-fill{height:100%;width:0;background:var(--grad);box-shadow:0 0 14px var(--teal)}
.scroll-hint{position:absolute;bottom:46px;left:50%;transform:translateX(-50%);z-index:14;
  font-size:11px;letter-spacing:.4em;color:rgba(233,246,255,.6);animation:bob 1.8s ease-in-out infinite;transition:opacity .4s}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(7px)}}

/* ---------- Hero content ---------- */
.hero-grid{
  position:relative;z-index:10;height:100%;max-width:var(--maxw);margin:0 auto;
  padding:0 clamp(20px,4vw,40px);
  display:grid;grid-template-columns:1.12fr .88fr;align-items:center;gap:24px;
}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cyan-2);padding:7px 16px;border:1px solid var(--glass-line);border-radius:100px;background:var(--glass);backdrop-filter:blur(10px);margin-bottom:22px}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:#34e6b0;box-shadow:0 0 10px #34e6b0;animation:pulse 2s infinite}
/* jesko-style hero type — big, tight, soft glow */
.hero-headline{margin-bottom:20px}
.hero-headline h1{font-family:"Poppins",sans-serif;font-weight:800;font-size:clamp(2.9rem,6.6vw,5.8rem);
  line-height:.95;letter-spacing:-.035em;text-shadow:0 6px 50px rgba(0,0,0,.45),0 0 64px rgba(21,220,198,.14)}
.hero-sub{max-width:36ch;color:var(--ink-dim);font-size:clamp(15px,1.5vw,18px);margin-bottom:28px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:24px}
.trust-strip{display:flex;gap:22px;flex-wrap:wrap;list-style:none}
.trust-strip li{font-size:13.5px;color:var(--ink-dim);font-weight:500}

/* ---------- Device / phone ---------- */
.hero-phone{justify-self:center;display:flex;flex-direction:column;align-items:center;gap:16px;will-change:transform,opacity}
.device{position:relative;width:300px;height:620px;border-radius:46px;
  background:linear-gradient(160deg,#1b2733,#0a121b);
  padding:11px;border:1px solid rgba(255,255,255,.12);
  box-shadow:0 40px 80px -20px rgba(0,0,0,.7),0 0 0 1px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.14);
  animation:float 7s ease-in-out infinite;will-change:transform}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.device-glow{position:absolute;inset:-30px;border-radius:60px;z-index:-1;
  background:radial-gradient(60% 50% at 50% 40%,rgba(21,220,198,.5),transparent 70%);filter:blur(28px)}
.device-screen{position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;
  background:#eef5fb;color:#13212f;font-family:"Poppins",sans-serif;display:flex;flex-direction:column}
.device-screen::after{content:"";position:absolute;top:11px;left:50%;transform:translateX(-50%);width:96px;height:7px;border-radius:10px;background:rgba(0,0,0,.35);z-index:5}

/* RoundRun app UI */
.rr-statusbar{display:flex;justify-content:space-between;align-items:center;padding:14px 22px 6px;font-size:12px;font-weight:600;color:#13212f}
.rr-statusbar.dark{color:#fff}
.rr-header{background:var(--grad-solid);color:#fff;padding:12px 16px 14px}
.rr-brandrow{display:flex;align-items:center;gap:9px;font-family:"Sora";font-weight:700;font-size:18px}
.rr-icon{height:22px;width:22px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}
.rr-activebar{background:linear-gradient(90deg,#0b9b6a,#12c9b6);color:#fff;display:flex;justify-content:space-between;align-items:center;padding:8px 16px;font-size:13px;font-weight:600}
.rr-activebar .pulse{display:inline-block;width:8px;height:8px;border-radius:50%;background:#fff;margin-right:7px;animation:pulse 1.3s infinite;vertical-align:middle}
.rr-activebar .auto{font-size:10px;letter-spacing:.06em;text-transform:uppercase;opacity:.92;background:rgba(255,255,255,.2);padding:3px 8px;border-radius:7px;margin-left:6px}
.rr-timer{font-variant-numeric:tabular-nums;font-size:15px}
.rr-body{flex:1;overflow:hidden;padding:14px 14px 0;background:#eef5fb}
.rr-body.pad{padding:14px}
.rr-greeting .rr-hello{font-family:"Sora";font-weight:700;font-size:19px}
.rr-greeting .rr-date{font-size:12.5px;color:#647a8f;margin-top:1px}
.rr-stats{display:flex;gap:8px;margin:14px 0 6px}
.rr-stat{flex:1;background:#fff;border-radius:14px;padding:10px 4px;text-align:center;box-shadow:0 2px 8px rgba(20,40,80,.06)}
.rr-stat b{display:block;font-family:"Sora";font-size:20px;color:var(--blue)}
.rr-stat b.ok{color:#0b9b6a}
.rr-stat span{font-size:9.5px;text-transform:uppercase;letter-spacing:.04em;color:#7d8ba3}
.rr-sec{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#93a4ba;margin:13px 2px 7px}
.rr-job{display:flex;align-items:center;gap:11px;background:#fff;border-radius:13px;padding:11px;margin-bottom:8px;box-shadow:0 2px 8px rgba(20,40,80,.05)}
.rr-job i.bar{width:4px;height:38px;border-radius:3px;background:var(--blue)}
.rr-job i.bar.ok{background:#0b9b6a}
.rr-job div{flex:1;min-width:0}
.rr-job b{display:block;font-size:14.5px;font-weight:600}
.rr-job span{font-size:12px;color:#647a8f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.rr-job em{font-style:normal;font-weight:700;color:var(--blue);font-size:14px}
.rr-job.done{opacity:.62}
.rr-job.done em{color:#0b9b6a}
.rr-tabbar{display:flex;justify-content:space-around;align-items:center;height:58px;background:#fff;border-top:1px solid #e4ecf4}
.rr-tabbar .t{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:18px;color:#aebccf}
.rr-tabbar .t i{font-style:normal;font-size:9.5px;font-weight:600}
.rr-tabbar .t.active{color:var(--blue)}
/* rounds + invoices screens */
.rr-roundsum{display:flex;justify-content:space-around;background:var(--grad-solid);color:#fff;padding:13px 6px}
.rr-roundsum div{text-align:center}
.rr-roundsum b{display:block;font-family:"Sora";font-size:19px}
.rr-roundsum span{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:#d4f4ee}
.rr-round{display:flex;align-items:center;gap:11px;background:#fff;border-radius:13px;padding:11px;margin-bottom:8px;box-shadow:0 2px 8px rgba(20,40,80,.05)}
.rr-round i.rdot{width:34px;height:34px;border-radius:10px;flex-shrink:0}
.rr-round i.b{background:rgba(47,127,240,.16)}.rr-round i.c{background:rgba(21,220,198,.2)}
.rr-round i.g{background:rgba(11,155,106,.16)}.rr-round i.o{background:rgba(251,140,0,.18)}
.rr-round div{flex:1}.rr-round b{display:block;font-size:14px;font-weight:600}
.rr-round span{font-size:12px;color:#647a8f}
.rr-round .tag{font-style:normal;font-size:11px;font-weight:700;padding:4px 9px;border-radius:8px}
.tag.b{background:rgba(47,127,240,.14);color:var(--blue)}.tag.c{background:rgba(21,220,198,.18);color:#0a8c7e}
.tag.g{background:rgba(11,155,106,.14);color:#0b9b6a}.tag.o{background:rgba(251,140,0,.16);color:#d97706}
.rr-inv{display:flex;align-items:center;justify-content:space-between;background:#fff;border-radius:13px;padding:12px 13px;margin-bottom:8px;box-shadow:0 2px 8px rgba(20,40,80,.05)}
.rr-inv b{display:block;font-size:14px;font-weight:600}.rr-inv span{font-size:11.5px;color:#647a8f}
.rr-inv-r{display:flex;align-items:center;gap:9px}.rr-inv-r em{font-style:normal;font-weight:700;font-size:14px}
.pill{font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:7px;background:#eaf0f7;color:#7d8ba3;text-transform:uppercase;letter-spacing:.03em}
.pill.ok{background:rgba(11,155,106,.15);color:#0b9b6a}
.rr-collected{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding:14px;border-radius:14px;background:linear-gradient(120deg,rgba(47,127,240,.1),rgba(21,220,198,.12));border:1px solid rgba(21,220,198,.22)}
.rr-collected span{font-size:13px;color:#4d627a}.rr-collected b{font-family:"Sora";font-size:21px;color:var(--blue)}
.phone-caption{font-size:13px;color:var(--ink-dim)}.phone-caption b{color:#fff}

/* ---------- Numbered route pins (overlay, app-styled) — shared by hero + round ---------- */
.hero-pins,.round-pins{position:absolute;inset:0;z-index:11;pointer-events:none}
.hpin{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-100%);will-change:transform,opacity}
.hpin .badge{position:relative;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--grad-solid);color:#fff;font-family:"Sora";font-weight:800;font-size:20px;line-height:1;
  border:3px solid rgba(255,255,255,.8);box-shadow:0 16px 34px -8px rgba(21,220,198,.95),inset 0 1px 0 rgba(255,255,255,.55)}
.hpin .badge::after{content:"";position:absolute;bottom:-7px;left:50%;width:15px;height:15px;
  transform:translateX(-50%) rotate(45deg);background:var(--teal);
  border-right:3px solid rgba(255,255,255,.8);border-bottom:3px solid rgba(255,255,255,.8)}
.hpin .glow{position:absolute;inset:-17px;border-radius:50%;z-index:-1;filter:blur(9px);
  background:radial-gradient(circle,rgba(21,220,198,.75),transparent 70%)}

/* ---------- Hero autopilot callouts (revealed across the back half of the van clip) ---------- */
.hero-callouts{position:absolute;inset:0;z-index:11;pointer-events:none}
.hcallout{position:absolute;width:min(310px,78vw);padding:16px 18px;border-radius:18px;opacity:0;
  background:rgba(7,42,52,.6);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.18);color:#eafcff}
.hc-progress{left:clamp(20px,6vw,96px);top:24%}
.hc-done{right:clamp(20px,6vw,96px);bottom:22%}
.hc-row{display:flex;align-items:center;gap:9px;font-weight:600;font-size:14.5px}
.hc-dot{width:9px;height:9px;border-radius:50%;background:#34e6b0;box-shadow:0 0 10px #34e6b0;animation:pulse 1.3s infinite}
.hc-tag{margin-left:auto;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#bff7ee;
  background:rgba(21,220,198,.18);border:1px solid rgba(21,220,198,.42);padding:3px 9px;border-radius:7px}
.hc-check{width:20px;height:20px;border-radius:50%;background:linear-gradient(120deg,#0b9b6a,#15dcc6);color:#fff;
  display:grid;place-items:center;font-size:12px;font-weight:800}
.hc-timer{font-family:"Sora";font-weight:800;font-size:30px;margin:9px 0 4px;font-variant-numeric:tabular-nums;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hc-sub{font-size:12.5px;color:var(--ink-dim)}
.hc-inv{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:11px;
  border-top:1px solid rgba(255,255,255,.12);font-size:12.5px;color:var(--ink-dim)}
.hc-inv b{font-family:"Sora";font-size:17px;color:#fff}

/* ---------- Reward badge (gamified £/hr records — real RoundRun feature) ---------- */
.reward-badge{display:inline-flex;align-items:center;gap:18px;padding:20px 30px 20px 20px;border-radius:22px;min-width:240px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 26px 60px -28px rgba(0,0,0,.65)}
.reward-badge .rb-ico{width:62px;height:62px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:radial-gradient(circle at 35% 30%,#ffd874,#d99a1c);box-shadow:0 0 26px -4px rgba(224,160,32,.78)}
.reward-badge .rb-ico svg{width:28px;height:28px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.reward-badge .rb-ico.bolt{background:radial-gradient(circle at 35% 30%,#ff86e4,#b026a8);box-shadow:0 0 24px -4px rgba(176,38,168,.7)}
.reward-badge .rb-ico.trend{background:radial-gradient(circle at 35% 30%,#9b8bff,#6a3df0);box-shadow:0 0 24px -4px rgba(106,61,240,.7)}
.reward-badge .rb-t{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-2);margin-bottom:3px}
.reward-badge .rb-v{font-family:"Sora";font-weight:800;font-size:30px;line-height:1.05}
.reward-badge .rb-v small{font-size:15px;color:var(--ink-dim);font-weight:600}
.rewards-cap{text-align:center;color:var(--ink-dim);font-size:14.5px;margin-top:50px}
.rewards-row{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-top:20px}

/* ---------- Planner phone (real RoundRun planner UI) ---------- */
.device-screen.planner{background:linear-gradient(180deg,#1b46a3 0%,#137e86 58%,#0e7d72 100%);color:#eafcff}
.pl-status{display:flex;justify-content:space-between;padding:13px 18px 4px;font-size:11px;font-weight:600;color:#fff}
.pl-top{display:flex;align-items:center;gap:6px;padding:3px 11px 8px}
.pl-acct{display:flex;align-items:center;gap:5px;font-size:10.5px;color:#dfeffb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.pl-acct i{width:7px;height:7px;border-radius:50%;background:#34e6b0;flex-shrink:0}
.pl-flag{font-size:8.5px;font-weight:700;padding:4px 7px;border-radius:100px;white-space:nowrap;border:1px solid}
.pl-flag.sms{color:#ffd27a;border-color:rgba(255,210,122,.5);background:rgba(255,180,60,.14)}
.pl-flag.auto{color:#7bf0c4;border-color:rgba(123,240,196,.5);background:rgba(52,230,176,.14)}
.pl-datebar{display:flex;align-items:center;gap:8px;margin:2px 11px 8px;padding:7px 11px;border-radius:100px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16)}
.pl-burger{font-size:13px;color:#cfe6f2}.pl-nav{color:#cfe6f2;font-size:14px}
.pl-date{flex:1;text-align:center;font-size:10.5px;font-weight:700;color:#fff}
.pl-days{display:flex;gap:5px;padding:0 11px 8px}
.pl-day{flex:1;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);border-radius:12px 12px 14px 14px;padding:6px 1px 0;text-align:center;overflow:hidden}
.pl-day b{display:block;font-family:"Sora";font-size:13px;color:#fff;line-height:1}
.pl-day span{font-size:7px;letter-spacing:.04em;color:#bcd6e6}
.pl-day .cnt{display:block;margin-top:5px;font-size:8px;font-weight:700;padding:3px 0;background:rgba(21,220,198,.32);color:#eafffb}
.pl-day .cnt.rain{background:rgba(255,200,80,.3);color:#fff6df}
.pl-day .cnt.dim{background:transparent;color:#9fc0d6}
.pl-day.sel{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.32)}
.pl-summary{display:flex;gap:6px;padding:0 11px 8px}
.pl-sp{font-size:9px;font-weight:600;padding:5px 9px;border-radius:100px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);color:#eafcff;white-space:nowrap}
.pl-sp.grn{color:#7bf0c4}
.pl-actions{display:flex;gap:5px;padding:0 11px 9px}
.pl-btn{flex:1;text-align:center;font-size:9px;font-weight:700;padding:8px 2px;border-radius:10px;color:#fff}
.pl-btn.ov{background:#5a52e0}.pl-btn.msg{background:#15b87a}.pl-btn.rep{background:#1f86d6}.pl-btn.opt{background:#7a3df0}
.pl-round{display:flex;align-items:center;gap:7px;margin:0 11px 8px;padding:9px 11px;border-radius:12px;background:rgba(255,255,255,.1);font-size:11.5px;font-weight:700;color:#fff}
.pl-round .pl-rdot{width:9px;height:9px;border-radius:50%;background:#19e6cf;flex-shrink:0}
.pl-round b{margin-left:auto;font-family:"Sora";font-size:12px}
.pl-jobs{padding:0 11px;display:flex;flex-direction:column;gap:6px}
.pl-job{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.1);border-radius:11px;padding:7px 9px}
.pl-job .pl-n{width:18px;height:18px;border-radius:50%;background:#19e6cf;color:#03303a;font-family:"Sora";font-weight:800;font-size:10px;display:grid;place-items:center;flex-shrink:0}
.pl-ad{flex:1;min-width:0}
.pl-ad b{display:block;font-size:11px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-ad span{font-size:9px;color:#c2dbe8}
.pl-ck{width:19px;height:19px;border-radius:7px;background:rgba(52,230,176,.22);color:#34e6b0;display:grid;place-items:center;font-size:10px;flex-shrink:0}
.pl-x{width:19px;height:19px;border-radius:7px;background:rgba(255,200,80,.2);color:#ffce6a;display:grid;place-items:center;font-size:9px;flex-shrink:0}
.pl-job em{font-style:normal;font-family:"Sora";font-weight:700;font-size:11px;color:#fff;flex-shrink:0}

/* ---------- Hero autopilot banners (appear where the phone was) ---------- */
.hero-banners{position:absolute;inset:0;z-index:12;pointer-events:none}
.hbanner{position:absolute;right:clamp(20px,12vw,200px);top:52%;width:min(460px,46vw);opacity:0;
  transform:translateY(-50%) scale(.92);transform-origin:center;will-change:transform,opacity;
  padding:32px 36px;border-radius:28px;color:#eafcff;
  background:linear-gradient(140deg,rgba(56,140,255,.66),rgba(21,220,198,.58));
  border:1.5px solid rgba(255,255,255,.44);backdrop-filter:blur(22px) saturate(1.4);
  box-shadow:0 44px 96px -24px rgba(6,40,80,.82),inset 0 1px 0 rgba(255,255,255,.38)}
.hb-head{display:flex;align-items:center;gap:12px;font-weight:700;font-size:22px;color:#fff}
.hb-dot{width:11px;height:11px;border-radius:50%;background:#34e6b0;box-shadow:0 0 12px #34e6b0;animation:pulse 1.3s infinite}
.hb-tag{margin-left:auto;font-size:12.5px;font-weight:800;letter-spacing:.02em;color:#063b33;background:#7bf0c4;padding:6px 13px;border-radius:9px}
.hb-timer{font-family:"Sora";font-weight:800;font-size:66px;letter-spacing:-.02em;margin:16px 0 8px;font-variant-numeric:tabular-nums;color:#fff;text-shadow:0 4px 24px rgba(0,0,0,.3)}
.hb-sub{font-size:16px;color:#eaf6ff;opacity:.94}
.hb-check{width:30px;height:30px;border-radius:50%;background:#34e6b0;color:#033;display:grid;place-items:center;font-size:17px;font-weight:800}
.hb-steps{display:flex;flex-direction:column;gap:16px;margin-top:24px}
.hb-step{display:flex;align-items:center;gap:14px;font-size:17px;font-weight:500;color:#fff;opacity:.3;transform:translateX(7px)}
.hb-step.on{opacity:1;transform:none}
.s-ico{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:15px;flex-shrink:0}
.s-ico.ok{background:#34e6b0;color:#033;font-weight:800}
.s-ico.send{background:#ffd27a;color:#5a3a00}
.s-ico.radar{background:rgba(255,255,255,.22);position:relative}
.s-ico.radar::after{content:"";position:absolute;inset:5px;border-radius:50%;border:2px solid #7bf0c4;border-top-color:transparent;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.band-pain .pain{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22)}

/* ---------- Generic band ---------- */
.band{position:relative;padding:clamp(80px,11vw,150px) clamp(20px,4vw,40px);z-index:2}
.band-inner{max-width:var(--maxw);margin:0 auto}
.section-head{max-width:760px;margin-bottom:54px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.kicker{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-2);margin-bottom:16px}
.section-head h2,.cta-inner h2,.app-copy h2,.chat-copy h2{font-size:clamp(2rem,4.6vw,3.6rem);margin-bottom:18px}
.section-head p{color:var(--ink-dim);font-size:clamp(15px,1.6vw,18.5px);max-width:60ch}
.section-head.center p{margin-left:auto;margin-right:auto}

/* gradient blends between sections (jeskojets-style) */
.band-pain{background:
  radial-gradient(95% 75% at 50% -12%,rgba(120,200,255,.30),transparent 60%),
  radial-gradient(70% 55% at 16% 18%,rgba(21,220,198,.24),transparent 60%),
  linear-gradient(160deg,#1657a8 0%,#127e86 60%,#0e6f74 100%)}
/* #why keeps its diagonal up top but settles to a FLAT #0e6f74 across its base,
   so it meets #texts (which starts at #0e6f74) with no hard diagonal seam */
#why{background:
  linear-gradient(180deg,rgba(14,111,116,0) 60%,#0e6f74 92%),
  radial-gradient(95% 75% at 50% -12%,rgba(120,200,255,.30),transparent 60%),
  radial-gradient(70% 55% at 16% 18%,rgba(21,220,198,.24),transparent 60%),
  linear-gradient(160deg,#1657a8 0%,#127e86 60%,#0e6f74 100%)}
#texts{margin-top:-1px}
.band-features{background:linear-gradient(180deg,#0b4a58 0%,#07343f 60%,#093e4b 100%)}
/* route optimisation + compare maps cards */
.opt-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:38px}
.opt-card{border-radius:20px;padding:32px}
.opt-ico{width:56px;height:56px;border-radius:15px;display:grid;place-items:center;margin-bottom:20px;
  background:rgba(21,220,198,.13);border:1px solid rgba(21,220,198,.28)}
.opt-ico svg{width:28px;height:28px;stroke:var(--teal);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.opt-card h3{font-family:"Sora",sans-serif;font-weight:700;font-size:1.32rem;margin:0 0 11px;color:#f3fbff;letter-spacing:-.01em}
.opt-card p{font-size:15px;line-height:1.62;color:var(--ink-dim)}
@media (max-width:980px){ .opt-grid{grid-template-columns:1fr} }
.band-map{overflow:hidden;background:
  radial-gradient(68% 82% at 82% 14%,rgba(21,220,198,.22),transparent 58%),
  radial-gradient(72% 88% at 15% 75%,rgba(47,127,240,.2),transparent 62%),
  linear-gradient(180deg,#07343f 0%,#041b24 100%)}
.map-inner{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(28px,5vw,70px);align-items:center}
.map-copy h2{font-size:clamp(2rem,4.8vw,3.8rem);margin-bottom:18px}
.map-copy p{color:var(--ink-dim);font-size:17px;max-width:44ch}
.map-metrics{display:flex;gap:14px;flex-wrap:wrap;margin:28px 0 14px}
.map-metrics div{min-width:145px;padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.map-metrics b{display:block;font-family:"Sora";font-size:clamp(1.45rem,2.7vw,2.15rem);line-height:1.05;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.map-metrics span,.map-note{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#95c9d4;font-weight:700}
.map-note{margin-top:10px}
.map-stage{position:relative;min-height:420px;border-radius:30px;overflow:hidden;
  background:linear-gradient(145deg,rgba(3,31,44,.88),rgba(7,77,88,.72));border:1px solid rgba(255,255,255,.14);
  box-shadow:0 44px 110px -46px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.15)}
.map-stage::before{content:"";position:absolute;inset:-20%;background:
  radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(75,219,255,.2),transparent 28%),
  radial-gradient(circle at 70% 30%,rgba(21,220,198,.18),transparent 36%);opacity:.9;transition:opacity .25s}
.map-grid{position:absolute;inset:0;background:
  linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:54px 54px;mask-image:radial-gradient(ellipse at center,#000 45%,transparent 86%);opacity:.55}
.route-map{position:absolute;inset:6%;width:88%;height:82%;overflow:visible}
.route{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:8;filter:url(#routeGlow);
  stroke-dasharray:900;stroke-dashoffset:900}
.route--messy{stroke:rgba(255,196,94,.72);opacity:.58}
.route--clean{stroke:#20ead5;opacity:0}
.map-stage.in .route--messy{animation:routeDraw 1.15s cubic-bezier(.22,.8,.24,1) forwards,routeFade .6s ease 1.4s forwards}
.map-stage.in .route--clean{animation:routeDraw 1.25s cubic-bezier(.22,.8,.24,1) 1.25s forwards,routeShow .2s ease 1.25s forwards}
@keyframes routeDraw{to{stroke-dashoffset:0}}
@keyframes routeFade{to{opacity:.16}}
@keyframes routeShow{to{opacity:1}}
.map-pins g{opacity:0;filter:drop-shadow(0 10px 14px rgba(0,0,0,.34))}
.map-pins circle{r:19;fill:#20ead5;stroke:rgba(255,255,255,.86);stroke-width:4}
.map-pins text{font-family:"Sora";font-size:16px;font-weight:800;text-anchor:middle;dominant-baseline:central;fill:#032b32}
.map-stage.in .map-pins g{animation:pinFade .42s cubic-bezier(.2,.9,.22,1.3) forwards}
.map-stage.in .map-pins g:nth-child(2){animation-delay:.15s}.map-stage.in .map-pins g:nth-child(3){animation-delay:.3s}
.map-stage.in .map-pins g:nth-child(4){animation-delay:.45s}.map-stage.in .map-pins g:nth-child(5){animation-delay:.6s}
@keyframes pinFade{from{opacity:0}to{opacity:1}}
.map-van{fill:#eafcff;stroke:#0a3842;stroke-width:2;filter:drop-shadow(0 12px 18px rgba(0,0,0,.38));opacity:0}
.map-stage.in .map-van{animation:vanDrive 1.55s cubic-bezier(.2,.85,.2,1) 1.5s forwards}
@keyframes vanDrive{0%{opacity:0;transform:translate(92px,348px)}15%{opacity:1}100%{opacity:1;transform:translate(624px,96px)}}
.map-legend{position:absolute;left:22px;right:22px;bottom:20px;display:flex;gap:16px;justify-content:flex-end;color:#cfe7ef;font-size:13px;font-weight:700}
.map-legend span{display:inline-flex;align-items:center;gap:8px}.map-legend i{width:28px;height:4px;border-radius:4px;display:inline-block}
.map-legend .messy{background:#ffc45e}.map-legend .clean{background:#20ead5}
@media (max-width:980px){.map-inner{grid-template-columns:1fr}.map-stage{min-height:360px}.map-legend{justify-content:flex-start}}
@property --ai-ang{syntax:"<angle>";inherits:true;initial-value:0deg}
/* AI section goes deep/dark so the edge glow reads (oryzo's near-black centre) */
.band-chat{position:relative;overflow:hidden;background:
  radial-gradient(125% 112% at 50% 50%,transparent 34%,rgba(1,6,16,.9) 100%),
  radial-gradient(95% 75% at 50% -12%,rgba(110,180,255,.34),transparent 60%),
  radial-gradient(70% 55% at 16% 18%,rgba(70,150,255,.24),transparent 60%),
  linear-gradient(160deg,#1a52a0 0%,#16517e 55%,#0e3a5c 100%)}
.band-chat .band-inner{position:relative;z-index:2}

/* ===== oryzo / Apple-Intelligence iridescent edge glow — sits at the ABSOLUTE section/browser edge and
   blooms INWARD (overflow:hidden clips the outward half of each blurred ring). Colours FLOW around the
   edge via --ai-ang, advanced by a setInterval in site.js (the rAF/animation clock is unreliable here). ===== */
.ai-stage{position:absolute;inset:0;border-radius:4px;z-index:0;pointer-events:none;overflow:hidden}
/* image-based glow: a generated smooth conic-rainbow PNG, rotated for the colour flow (a real image → NO CSS
   gradient banding), radial-masked so it hugs the edges and blooms inward over the darkened section. */
.ai-glow{position:absolute;inset:0;overflow:hidden;opacity:var(--ai-w,1);
  -webkit-mask:radial-gradient(150% 128% at 50% 50%,transparent 30%,#000 72%);
          mask:radial-gradient(150% 128% at 50% 50%,transparent 30%,#000 72%)}
/* background-size 200% (not cover) so the saturated mid-ring of the wheel lands on the section edges
   regardless of the section's height — cover let the faded outer ring fall on the edges on tall sections */
/* a large CENTERED SQUARE (sized off the width, aspect-ratio 1) so the round wheel stays circular and its
   radius always exceeds the section's half-diagonal — at any rotation it covers the corners, so you never see
   the circle's edge; only the colours flow round. Mask (on .ai-glow) keeps the visible glow hugging the edges. */
.ai-glow__img{position:absolute;left:50%;top:50%;width:200%;aspect-ratio:1;height:auto;
  background:url(assets/ai-glow.png) center/cover no-repeat;
  transform:translate(-50%,-50%) rotate(0deg);will-change:transform;filter:blur(17px) saturate(2.15) brightness(1.52)}
/* tall mobile AI section: size the rainbow wheel to the HEIGHT (not width) so its colours reach the edges */
@media (max-width:980px){ .ai-glow__img{width:auto;height:150%} }
@media (max-width:560px){ .ai-stage{border-radius:10px} .ai-glow__img{height:140%;filter:blur(12px) saturate(1.5) brightness(1.4)} }
/* big oryzo-style section title over the glow */
.ai-bigtitle{font-family:var(--display-x);font-weight:900;text-align:center;position:relative;z-index:2;
  font-size:clamp(2.2rem,6.4vw,5rem);line-height:.96;letter-spacing:-.025em;color:#f4faf8;
  margin:0 auto clamp(30px,5vh,64px);text-shadow:0 2px 44px rgba(0,0,0,.5)}
.ai-bigtitle__star{color:var(--teal);font-size:.46em;vertical-align:super;margin-left:.03em;font-weight:800}
/* matches the top hero screen — the deep teal-navy base (--bg #07343f), cinematic darkening rather than the old bluer lift */
/* starts at #why's bottom teal (#0e6f74) so the boundary blends seamlessly, then deepens down */
.band-sms{background:linear-gradient(180deg,#0e6f74 0%,#0b4a5e 42%,#072c40 100%)}
/* "See more" fold-down (free-texts detail) — hidden markup, toggled by a class; no extra page-load cost */
.see-more-btn{margin-top:16px;background:none;border:1px solid rgba(120,230,235,.34);color:#bdeef0;
  font-family:"Poppins",sans-serif;font-weight:600;font-size:13.5px;padding:.62em 1.15em;border-radius:999px;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;transition:background .2s,border-color .2s}
.see-more-btn:hover{background:rgba(120,230,235,.12);border-color:rgba(120,230,235,.55)}
.see-more-btn .sm-ico{font-size:1.1em;line-height:1;transition:transform .3s}
.see-more-btn[aria-expanded="true"] .sm-ico{transform:rotate(180deg)}
.sms-more{overflow:hidden;max-height:0;transition:max-height .45s ease}
.sms-more.open{max-height:760px}
.sms-more-list{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-direction:column;gap:12px}
.sms-more-list li{position:relative;padding-left:25px;font-size:14.5px;line-height:1.5;color:#cfe7ef;font-weight:500}
.sms-more-list li b{color:#eafdff;font-weight:700}
/* #texts CTA — bright teal→aqua, on-brand for the dark-teal free-texts band (image-2 restyle) */
#texts .btn-primary{
  background:linear-gradient(100deg,#0fb9c2 0%,#1fd9cf 48%,#62f0e4 100%);
  color:#04313a;font-weight:700;
  box-shadow:0 12px 32px -10px rgba(25,225,205,.7),inset 0 1px 0 rgba(255,255,255,.42);
}
#texts .btn-primary:hover{box-shadow:0 18px 48px -10px rgba(25,225,205,.85),inset 0 1px 0 rgba(255,255,255,.52)}
.sms-more-list li::before{content:"✓";position:absolute;left:0;top:1px;color:var(--teal);font-weight:800}
.band-app{background:linear-gradient(180deg,#0c4555 0%,#093e4b 100%)}
.band-compare{background:linear-gradient(180deg,#093e4b 0%,#07343f 100%)}
.band-pricing{background:
  radial-gradient(70% 90% at 50% 0%,rgba(21,220,198,.16),transparent 55%),
  linear-gradient(180deg,#07343f 0%,#0b4a58 100%)}
.band-faq{background:linear-gradient(180deg,#0b4a58 0%,#07343f 100%)}
.stats-band{position:relative;z-index:2;padding:clamp(40px,6vw,70px) clamp(20px,4vw,40px);
  background:linear-gradient(120deg,rgba(47,127,240,.16),rgba(21,220,198,.14));border-block:1px solid rgba(255,255,255,.08)}

/* glass card base */
.glass{position:relative;overflow:hidden;background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(18px) saturate(1.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 30px 60px -30px rgba(0,0,0,.6)}
.glass::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .25s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(99,239,230,.18),transparent 44%)}
.glass:hover::before{opacity:1}
.glass>*{position:relative;z-index:1}

/* ---------- Pain bar ---------- */
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pain{border-radius:20px;padding:26px 26px;display:flex;gap:18px;align-items:stretch}
.pain .x{flex-shrink:0;width:62px;display:grid;place-items:center;border-radius:15px;
  background:rgba(21,220,198,.12);border:1px solid rgba(21,220,198,.26);color:#7af0e6}
.pain .x svg{width:auto;height:68%;max-height:96px;max-width:46px;stroke:#7af0e6;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pain p{font-size:15.5px;color:var(--ink);font-weight:500}
.pain p span{display:block;color:var(--ink-dim);font-size:13.5px;font-weight:400;margin-top:4px}

/* ---------- Features grid ---------- */
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{border-radius:var(--radius);padding:32px 30px;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s}
.card:hover{transform:translateY(-6px);border-color:rgba(21,220,198,.4)}
.card-ico{font-size:30px;width:62px;height:62px;display:grid;place-items:center;border-radius:18px;
  background:linear-gradient(140deg,rgba(47,127,240,.34),rgba(21,220,198,.28));border:1px solid var(--glass-line);margin-bottom:20px}
.card-ico svg{width:30px;height:30px;stroke:#dffbff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:20px;margin-bottom:10px}
.card p{color:var(--ink-dim);font-size:14.5px}
.card .tagline{display:inline-block;margin-top:14px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--teal-2)}

/* ---------- Cleo-style AI chat showcase ---------- */
.chat-inner{display:grid;grid-template-columns:1fr 360px;gap:60px;align-items:center}
.chat-copy h2{font-size:clamp(2rem,4.2vw,3.3rem)}
.chat-copy p{color:var(--ink-dim);font-size:17px;margin-bottom:22px;max-width:44ch}
.chat-points{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:8px}
.chat-points li{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:500}
.chat-points li b{color:#fff;font-weight:600}
.chat-points li span{width:34px;height:34px;flex-shrink:0;display:grid;place-items:center;border-radius:11px;
  background:linear-gradient(140deg,rgba(47,127,240,.22),rgba(21,220,198,.2));
  border:1px solid rgba(120,230,235,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.chat-points li span svg{width:17px;height:17px;display:block;stroke:#7af0e6;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* AI example questions → floating bubbles (gentle drift; hover to enlarge & read) */
.ai-bubbles{display:flex;flex-wrap:wrap;gap:11px;margin:4px 0 2px}
.qbubble{display:inline-flex;animation:qfloat 6s ease-in-out infinite;will-change:transform}
.qbubble:nth-child(6n+2){animation-delay:-1s}
.qbubble:nth-child(6n+3){animation-delay:-2s}
.qbubble:nth-child(6n+4){animation-delay:-3s}
.qbubble:nth-child(6n+5){animation-delay:-4s}
.qbubble:nth-child(6n+6){animation-delay:-5s}
@keyframes qfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.qb{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-family:"Poppins",sans-serif;
  font-weight:600;font-size:13.5px;color:#e6fbff;text-align:left;
  background:rgba(255,255,255,.06);border:1px solid rgba(123,240,230,.26);
  padding:.58em 1.05em .58em .58em;border-radius:100px;backdrop-filter:blur(8px);
  box-shadow:0 6px 22px -12px rgba(0,0,0,.7);
  transition:transform .28s cubic-bezier(.2,.8,.2,1),background .28s,border-color .28s,box-shadow .28s,color .28s}
.qb .qb-ico{display:grid;place-items:center;width:26px;height:26px;flex:0 0 auto;border-radius:9px;background:rgba(21,220,198,.16)}
.qb .qb-ico svg{width:15px;height:15px;stroke:#7af0e6;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.qbubble:hover{animation-play-state:paused;z-index:4}
.qb:hover{transform:scale(1.16);background:rgba(21,220,198,.18);border-color:rgba(123,240,230,.62);
  box-shadow:0 16px 44px -12px rgba(21,220,198,.5);color:#fff}
.qbubbles-more{overflow:hidden;max-height:0;transition:max-height .5s ease}
.qbubbles-more.open{max-height:600px}
.qbubbles-more .ai-bubbles{margin-top:11px}
.ai-more-btn{margin-top:16px}
.chat-phone{justify-self:center}
.device.device-chat{height:660px}
.device-screen.chat{background:linear-gradient(180deg,#0a1622 0%,#0c2436 60%,#0a1622 100%)}
.ai-top{display:flex;align-items:center;gap:10px;padding:48px 18px 14px;border-bottom:1px solid rgba(255,255,255,.06)}
.ai-top img{height:26px;width:26px}
.ai-top b{font-family:"Sora";font-size:15.5px;color:#fff;display:block;line-height:1.15}
.ai-top span{font-size:11px;color:#7fd8cd}
.ai-thread{flex:1;padding:18px 16px;display:flex;flex-direction:column;gap:12px;overflow:hidden}
.ai-msg{max-width:86%;padding:12px 15px;border-radius:18px;font-size:13.6px;line-height:1.5}
.ai-msg.user{align-self:flex-end;background:var(--grad-solid);color:#fff;border-bottom-right-radius:5px}
.ai-msg.bot{align-self:flex-start;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09);color:#eaf6ff;border-bottom-left-radius:5px}
.ai-msg.bot b{color:#fff}
.ai-card{align-self:flex-start;width:90%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:14px;margin-top:-2px}
.ai-card .ac-h{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#8fb6c9;margin-bottom:11px;font-weight:700}
.ac-bar{display:flex;align-items:center;gap:10px;margin-bottom:9px;font-size:12px}
.ac-bar .lbl{width:64px;color:#cfe6f2;flex-shrink:0}
.ac-bar .track{flex:1;height:9px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden}
.ac-bar .fill{height:100%;border-radius:6px;background:var(--grad)}
.ac-bar .val{width:40px;text-align:right;color:#fff;font-weight:700;font-variant-numeric:tabular-nums}
.ai-input{display:flex;align-items:center;gap:10px;margin:0 14px 16px;padding:11px 16px;border-radius:100px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:#7fa9bd;font-size:13px}
.ai-input .send{margin-left:auto;width:26px;height:26px;border-radius:50%;background:var(--grad-solid);display:grid;place-items:center;color:#fff;font-size:13px}

/* ---------- SMS proof ---------- */
.sms-proof{display:grid;grid-template-columns:1fr 320px;gap:54px;align-items:center}
.sms-copy h3{font-size:clamp(1.6rem,3.2vw,2.6rem);margin:14px 0 16px}
.sms-copy p{color:var(--ink-dim);margin-bottom:22px;max-width:46ch}
.sms-copy .free-badge{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:#bff7ee;background:rgba(21,220,198,.14);border:1px solid rgba(21,220,198,.3);padding:8px 15px;border-radius:100px;margin-bottom:22px}
.device-sm{width:300px;height:600px;justify-self:center}
.device-screen.sms{background:#0a1320}
.sms-head{display:flex;align-items:center;gap:11px;padding:46px 16px 13px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.07)}
.sms-head img{height:30px;width:auto}
.sms-head b{display:block;font-size:14.5px;color:#eaf6ff;font-family:"Sora"}
.sms-head span{font-size:11px;color:#7fa9bd}
.sms-thread{padding:16px 14px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.bubble{max-width:84%;padding:11px 14px;border-radius:18px;font-size:13.5px;line-height:1.5}
.bubble.in{align-self:flex-start;background:#22323f;color:#eaf6ff;border-bottom-left-radius:5px}
.bubble.out{align-self:flex-end;background:var(--grad-solid);color:#fff;border-bottom-right-radius:5px}
.bubble.invoice{background:#fff;color:#13212f;width:88%;max-width:88%;padding:0;overflow:hidden;border-radius:16px}
.inv-top{display:flex;justify-content:space-between;align-items:center;padding:13px 15px;background:#eef5fb;border-bottom:1px solid #e4ecf4}
.inv-top span{font-size:11px;color:#7d8ba3;font-weight:600}.inv-top b{font-family:"Sora";font-size:18px;color:var(--blue)}
.inv-rows{padding:11px 15px;font-size:13px;color:#3d506b}
.inv-rows div{display:flex;justify-content:space-between}
.inv-pay{margin:4px 15px 10px;text-align:center;background:var(--grad-solid);color:#fff;font-weight:700;font-size:14px;padding:12px;border-radius:12px}
.inv-opts{display:flex;gap:6px;padding:0 15px 14px}
.inv-opts span{flex:1;text-align:center;font-size:10.5px;color:#4d627a;background:#eef5fb;padding:6px 4px;border-radius:8px;border:1px solid #e4ecf4}

/* feature copy (scrub overlay) */
.feature-copy{position:relative;z-index:10;height:100%;max-width:var(--maxw);margin:0 auto;
  padding:0 clamp(20px,4vw,40px);display:flex;flex-direction:column;justify-content:center}
.feature-copy>*{max-width:32ch}
.feature-copy .kicker{margin-bottom:14px}
.feature-copy h2{font-size:clamp(2.4rem,6vw,5rem);margin-bottom:20px}
.feature-copy p{color:var(--ink-dim);font-size:clamp(15px,1.6vw,19px)}
/* #round extra content — capability checklist + stat strip over the aerial */
.feature-copy .round-points{list-style:none;margin:24px 0 0;padding:0;max-width:44ch;display:flex;flex-direction:column;gap:13px}
.round-points li{display:flex;align-items:center;gap:13px;font-size:clamp(14.5px,1.45vw,17px);font-weight:500;color:#dceef4;text-shadow:0 2px 14px rgba(0,0,0,.55)}
.round-points li b{color:#fff;font-weight:700}
.round-points .rp-ico{flex:0 0 auto;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:rgba(21,220,198,.15);border:1px solid rgba(21,220,198,.32)}
.round-points .rp-ico svg{width:20px;height:20px;stroke:#7af0e6;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.feature-copy .round-stats{display:flex;gap:clamp(18px,2.6vw,38px);margin-top:28px;max-width:none;flex-wrap:wrap}
.round-stats .rstat b{display:block;font-family:"Sora",sans-serif;font-weight:800;font-size:clamp(1.15rem,1.9vw,1.55rem);background:linear-gradient(100deg,#48b6ff,#1ff0d6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;letter-spacing:-.01em}
.round-stats .rstat span{display:block;font-size:12.5px;color:#a8d0db;margin-top:3px}
.feature-right .feature-copy{align-items:flex-end;text-align:right}
.feature-right .feature-copy>*{margin-left:auto}
.reveal-line{opacity:0;will-change:opacity,transform}

/* stats */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;text-align:center}
.stat b{display:block;font-family:"Sora";font-weight:800;font-size:clamp(2.2rem,5vw,3.4rem);
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.stat span{font-size:13.5px;color:var(--ink-dim);margin-top:8px;display:block}

/* app showcase */
.app-inner{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.app-copy p{color:var(--ink-dim);font-size:17px;margin-bottom:26px;max-width:48ch}
.app-list{list-style:none;display:flex;flex-direction:column;gap:14px}
.app-list li{display:flex;align-items:center;gap:14px;font-size:15.5px;font-weight:500}
.app-list li span{width:40px;height:40px;flex-shrink:0;display:grid;place-items:center;border-radius:12px;
  background:linear-gradient(140deg,rgba(47,127,240,.35),rgba(21,220,198,.3));border:1px solid var(--glass-line);font-size:18px}
.app-phones{position:relative;height:640px;display:flex;justify-content:center;align-items:center}
.app-phones .device{position:absolute;animation:none}
.band-app .app-phones .device-tilt{transform:rotate(-8deg) translateX(-100px) scale(.9);z-index:2}
.band-app .app-phones .device-tilt2{transform:rotate(8deg) translateX(100px) scale(.9);z-index:1}

/* comparison */
.compare-wrap{overflow:hidden;border-radius:var(--radius)}
.compare{width:100%;border-collapse:collapse;font-size:15px;background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(18px)}
.compare th,.compare td{padding:18px 22px;text-align:left;border-bottom:1px solid rgba(255,255,255,.08)}
.compare thead th{font-family:"Sora";font-size:14px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-dim);font-weight:700}
.compare thead th.rr{color:#fff}
.compare thead th.rr small{display:block;font-size:11px;letter-spacing:.04em;color:var(--teal-2);font-weight:600;text-transform:none;margin-top:2px}
.compare td.feat{color:var(--ink);font-weight:500}
.compare td.rr{font-weight:700;color:#fff;background:linear-gradient(120deg,rgba(47,127,240,.14),rgba(21,220,198,.14))}
.compare td.them{color:var(--ink-dim)}
.compare tr:last-child td{border-bottom:none}
.compare .ck{color:var(--teal-2);margin-right:6px}

/* pricing */
.pricing-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:880px;margin:0 auto}
.price{border-radius:var(--radius);padding:36px 34px;position:relative;display:flex;flex-direction:column}
.price.glass{overflow:visible}
.price.glass::before{border-radius:var(--radius);clip-path:inset(0 round var(--radius))}
.price.hot{border:1px solid rgba(21,220,198,.5);box-shadow:0 0 0 1px rgba(21,220,198,.25),0 40px 90px -40px rgba(21,220,198,.4),inset 0 1px 0 rgba(255,255,255,.12)}
.price .badge{position:absolute;top:-13px;left:34px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:var(--grad-solid);color:#fff;padding:6px 14px;border-radius:100px;box-shadow:0 8px 20px -6px rgba(21,220,198,.6)}
.price h3{font-size:21px;margin-bottom:6px}
.price .sub{color:var(--ink-dim);font-size:14px;margin-bottom:20px;min-height:20px}
.price .amount{font-family:"Sora";font-weight:800;line-height:1;margin-bottom:6px}
.price .amount b{font-size:clamp(2.6rem,5vw,3.4rem);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.price .amount s{color:var(--ink-dim);opacity:.6;font-size:1.3rem;font-weight:600;margin-right:10px;font-family:"Poppins"}
.price .per{color:var(--ink-dim);font-size:14px;margin-bottom:22px}
.price ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:26px;flex:1}
.price li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--ink)}
.price li .ck{color:var(--teal-2);flex-shrink:0;margin-top:2px}
.price .btn{width:100%}
.price-foot{text-align:center;color:var(--ink-dim);font-size:14px;margin-top:26px}

/* faq */
.faq-grid{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq{border-radius:16px;overflow:hidden;border:1px solid var(--glass-line);background:var(--glass)}
.faq summary{list-style:none;cursor:pointer;padding:20px 24px;font-family:"Sora";font-weight:600;font-size:16.5px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;color:#fff}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ico{flex-shrink:0;width:24px;height:24px;border-radius:50%;border:1px solid var(--glass-line);display:grid;place-items:center;
  font-size:16px;color:var(--teal-2);transition:transform .3s}
.faq[open] summary .ico{transform:rotate(45deg)}
.faq .ans{padding:0 24px 22px;color:var(--ink-dim);font-size:15px;max-width:64ch}
.faq .ans a{color:var(--teal-2);border-bottom:1px solid rgba(122,246,236,.4)}

/* CTA */
.band-cta{background:
  radial-gradient(80% 120% at 50% 0%,rgba(21,220,198,.24),transparent 60%),
  linear-gradient(180deg,#07343f,#0c4555);text-align:center}
.cta-inner{max-width:780px;margin:0 auto}
.cta-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin:34px 0 18px}
.cta-note{color:var(--ink-dim);font-size:14.5px}
.cta-inner p{color:var(--ink-dim);font-size:18px;max-width:48ch;margin:0 auto}

/* footer */
.footer{background:#04222a;border-top:1px solid rgba(255,255,255,.07);padding:60px clamp(20px,4vw,40px) 30px}
.footer-inner{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
.footer-brand img{height:40px;margin-bottom:16px}
.footer-brand p{color:var(--ink-dim);font-size:14px;max-width:38ch}
.footer-col h4{font-family:"Sora";font-size:14px;text-transform:uppercase;letter-spacing:.1em;color:#fff;margin-bottom:14px}
.footer-col a,.footer-col span{display:block;color:var(--ink-dim);font-size:14.5px;margin-bottom:8px;transition:color .2s}
.footer-col a:hover{color:var(--cyan-2)}
.footer-base{max-width:var(--maxw);margin:40px auto 0;padding-top:24px;border-top:1px solid rgba(255,255,255,.07);
  color:#5e7d92;font-size:13px;text-align:center}

/* reveal-on-scroll — driven by JS in site.js. Class-triggered CSS transitions
   AND animations get re-created every frame under this page's perpetual
   rAF + Lenis loop and freeze near their start (infinite CSS anims are fine).
   So we tween opacity/transform directly in JS — the same approach the scrub
   engine uses for .reveal-line, which renders correctly. */
.reveal{opacity:0;transform:translateY(30px)}
.snap-arrived .section-head,.snap-arrived .sms-copy,.snap-arrived .chat-copy,.snap-arrived .map-copy,
.snap-arrived .glass,.snap-arrived .map-stage,.snap-arrived .stat,.snap-arrived .compare-wrap{
  animation:snapGlow 1.08s cubic-bezier(.2,.8,.2,1) both;
}
.snap-arrived .glass:nth-child(2),.snap-arrived .stat:nth-child(2){animation-delay:.06s}
.snap-arrived .glass:nth-child(3),.snap-arrived .stat:nth-child(3){animation-delay:.12s}
.snap-arrived .glass:nth-child(4),.snap-arrived .stat:nth-child(4){animation-delay:.18s}
@keyframes snapGlow{
  0%{opacity:.82;filter:saturate(.86) brightness(.94)}
  46%{opacity:1;filter:saturate(1.18) brightness(1.08)}
  100%{opacity:1;filter:none}
}

/* ============================================================
   JESKO-STYLE HERO — window→phone zoom, corner statement, line eyebrow
   ============================================================ */
:root{ --display-x:"Zalando Sans Expanded","Archivo Black","Archivo",system-ui,sans-serif; --stretch:1; --hg:clamp(24px,5vw,66px); }

/* transparent nav (whole site is dark → nav text stays light) */
.nav__brand{display:inline-flex;align-items:center}
.nav__brand img{height:32px;width:auto;transform-origin:left center;will-change:transform;filter:drop-shadow(0 2px 8px rgba(0,0,0,.45))}
.nav__links{display:flex;gap:clamp(18px,2.4vw,42px)}
.nav__link{position:relative;font-size:14.5px;font-weight:500;color:#eafcff;overflow:hidden;padding:2px 0}
.nav__link span{display:inline-block;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.nav__link::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.nav__link:hover::after{transform:scaleX(1);transform-origin:left}
.nav__right{display:flex;align-items:center;gap:12px}
.nav__book{display:flex;align-items:center;gap:9px}
.nav__book-pill{display:inline-flex;align-items:center;background:#fff;color:#0a2230;border-radius:100px;
  padding:.82em 1.45em;font-weight:600;font-size:13.5px;white-space:nowrap;
  box-shadow:0 8px 26px rgba(4,32,42,.28);transition:background .4s,color .4s,box-shadow .4s}
.nav__book-pill:hover{background:var(--teal);color:#04303a;box-shadow:0 12px 32px rgba(21,220,198,.5)}
.nav__book-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#fff;flex:0 0 auto;
  box-shadow:0 8px 26px rgba(4,32,42,.28);transition:background .4s}
.nav__book-icon svg{width:18px;height:18px;fill:var(--blue);transition:fill .4s}
.nav__book-icon:hover{background:var(--teal)}
.nav__book-icon:hover svg{fill:#04303a}
.nav__menu{display:none;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.12);
  color:#fff;place-items:center;gap:4px;padding:12px;cursor:pointer;border:1px solid rgba(255,255,255,.18);
  box-shadow:0 8px 26px rgba(4,32,42,.24);backdrop-filter:blur(12px)}
.nav__menu span{display:block;width:18px;height:2px;border-radius:2px;background:#fff;transition:transform .25s,opacity .25s}
.nav__menu[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav__menu[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__menu[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:99;display:none;background:rgba(2,18,25,.58);backdrop-filter:blur(8px)}
.mobile-menu.open{display:block}
.mobile-menu__panel{position:absolute;top:78px;right:16px;left:16px;padding:18px;border-radius:22px;
  background:linear-gradient(160deg,rgba(6,41,52,.96),rgba(8,72,83,.94));border:1px solid rgba(255,255,255,.18);
  box-shadow:0 28px 80px -30px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.14)}
.mobile-menu__panel a{display:flex;align-items:center;justify-content:space-between;padding:15px 14px;border-radius:14px;
  font-family:"Sora",sans-serif;font-weight:700;color:#f2fdff;border-bottom:1px solid rgba(255,255,255,.07)}
.mobile-menu__panel a:hover{background:rgba(255,255,255,.08)}
.mobile-menu__cta{margin-top:12px;background:var(--grad-solid);justify-content:center!important;color:#fff!important;border-bottom:0!important}
.mobile-menu__close{position:absolute;top:-58px;right:0;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.13);display:grid;place-items:center;color:#fff;cursor:pointer}
.mobile-menu__close svg{width:20px;height:20px;stroke:#fff;stroke-width:2.2;stroke-linecap:round}

/* perspective stage for the zoom */
.hero .sticky{perspective:1500px;perspective-origin:50% 46%}

/* eyebrow line (Private-jet-charter ——— worldwide style) */
.hero__eyebrow{position:absolute;top:clamp(84px,12vh,130px);left:var(--hg);right:var(--hg);z-index:13;
  display:flex;align-items:center;gap:1.2em;font-size:clamp(.7rem,.92vw,.92rem);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:#dff1f7;will-change:opacity;text-shadow:0 2px 18px rgba(0,0,0,.55)}
.hero__eyebrow-line{flex:1;height:1px;background:rgba(234,252,255,.34)}

/* corner statement texts */
.hero__text{position:absolute;inset:0;z-index:12;pointer-events:none}
.hero__t{position:absolute;margin:0;line-height:.9;color:#eef9ff;text-shadow:0 6px 50px rgba(0,0,0,.42)}
.hero__t-in{display:block}
.hero__t--tl{top:clamp(178px,24vh,285px);right:calc(50% + 180px);left:auto;text-align:left;transform-origin:right top;
  font-family:var(--display-x);font-weight:900;font-size:clamp(2.3rem,5.9vw,6.3rem);letter-spacing:-.02em}
.hero__t--br{bottom:clamp(222px,30vh,362px);left:calc(50% + 180px);right:auto;text-align:left;transform-origin:left bottom;
  font-family:var(--display-x);font-weight:900;font-size:clamp(2.3rem,5.9vw,6.3rem);letter-spacing:-.02em}
.hero__t--bl{bottom:clamp(46px,8vh,98px);left:var(--hg);text-align:left;
  font-family:"Poppins",sans-serif;font-weight:500;font-size:clamp(.95rem,1.3vw,1.3rem);line-height:1.25;color:#cfeaf2}
.hero__t--tl .hero__t-in{transform:none}
.hero__t--br .hero__t-in{transform:none;
  background:linear-gradient(100deg,#2f8fff 0%,#33c7e6 58%,#17e8d0 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* bottom-left block — image-1 style: heading + rule + paragraph; fades with the intro */
.hero__lead{position:absolute;left:calc(var(--hg) + 40px);bottom:clamp(124px,16.5vh,186px);z-index:12;
  width:min(420px,36vw);text-align:left;pointer-events:auto;will-change:opacity}
.hero__lead-h{margin:0;font-family:"Sora",sans-serif;font-weight:600;
  font-size:clamp(1.05rem,1.55vw,1.55rem);line-height:1.0;letter-spacing:-.02em;color:#f3fbff;
  text-shadow:0 2px 22px rgba(0,0,0,.5)}
.hero__lead-rule{display:block;width:34px;height:2px;margin:13px 0;background:rgba(234,252,255,.55)}
.hero__lead-p{margin:0;font-family:"Poppins",sans-serif;font-weight:500;
  font-size:clamp(.84rem,.9vw,1rem);line-height:1.38;letter-spacing:-.01em;color:#cfe7ef;text-shadow:0 2px 16px rgba(0,0,0,.5)}
/* bottom-right actions (buttons + badges) under "on autopilot." — left-aligned; fades with the intro */
.hero__actions{position:absolute;left:calc(50% + 180px);right:auto;bottom:clamp(124px,16.5vh,186px);z-index:12;
  display:flex;flex-direction:column;align-items:flex-start;gap:13px;pointer-events:auto;will-change:opacity}
.hero__cta-btns{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:10px}
.hero__cta-btns .btn{font-size:13.5px;padding:.82em 1.45em}
.hero__cta-badges{list-style:none;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:8px 18px;margin:0;padding:0}
.hero__cta-badges li{position:relative;padding-left:21px;font-size:13.5px;font-weight:500;
  color:#d6eef5;text-shadow:0 1px 10px rgba(0,0,0,.55)}
.hero__cta-badges li::before{content:"✓";position:absolute;left:0;top:-1px;color:var(--teal);font-weight:800}
/* ---- narrow-desktop hero fit (≈981–1410px) ----
   The corner statement and bottom-left lead are pinned around the 300px centred phone
   (calc(50% ± 180px)). At narrow desktop widths the big 5.9vw words overflow into the
   phone, and the lead block runs under it. These two overrides shrink ONLY where space
   is tight: min()/calc() means each equals the original clamp once the viewport is wide
   enough, so the wide "perfect" desktop is byte-identical — no breakpoint snap. */
.hero__t--tl,.hero__t--br{font-size:min(clamp(2.3rem,5.9vw,6.3rem),calc((50vw - 246px) / 5.6))}
.hero__lead{width:min(420px,calc(50vw - 285px))}
/* At narrow widths the two CTA buttons wrap to two rows, so the actions block grows
   UP into "on autopilot.". Lift the headline by a width-driven amount: 0px at ≥1300px
   (wide desktop untouched, no snap), growing up to 60px as the viewport narrows. */
.hero__t--br{bottom:calc(clamp(222px,30vh,362px) + clamp(0px,(1300px - 100vw) * 0.26,60px))}
/* end-of-hero headline (bottom-left) — "Work faster with" + a stacked list of phrases that blend up into
   place one by one as you scroll the drone reveal (image-1 layout). Same display font as the corner statement. */
.hero-end{position:fixed;left:var(--hg);top:50%;z-index:11;
  text-align:left;pointer-events:none;opacity:0;transform:translateY(-50%);will-change:opacity,transform}
.hero-end__h{margin:0;font-family:var(--display-x);font-weight:900;
  font-size:clamp(1.6rem,3.8vw,4rem);letter-spacing:-.02em;line-height:1.12;color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.55)}
.hef-list{display:inline-flex;flex-direction:column;vertical-align:top}
.hef-i{display:block;font-style:normal;white-space:nowrap;
  background:linear-gradient(100deg,#3aa5ff 0%,#27e3e6 50%,#2cffc0 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 2px 15px rgba(0,0,0,.55))}
.hef-i[data-k="1"],.hef-i[data-k="2"]{opacity:0;will-change:opacity,transform}
@media (max-width:980px){ .hero-end{display:none} }
/* real planner screenshot fills the phone (overlays the HTML recreation) */
.device-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:36px;z-index:3}
.device-screen.planner .device-shot{display:block}
@media (max-width:980px){ .hero__lead,.hero__actions{display:none} }

/* centered phone "window" that zooms through */
.hero-phone{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:8;will-change:transform,opacity}
.hpin{opacity:0}
.hero-stop{position:absolute;inset:0;z-index:11;pointer-events:none}
/* glowing route line that connects the numbered house stops */
.hero-route{position:absolute;inset:0;z-index:10;width:100%;height:100%;pointer-events:none;opacity:0;will-change:opacity}
.hero-route path{fill:none;stroke:#28ecd8;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 5px rgba(40,236,216,.95)) drop-shadow(0 0 13px rgba(40,236,216,.55))}

/* image-1 blue→teal atmosphere (mist) — glowing centre + dark vignette edges; lifts on zoom */
.hero__mist{position:absolute;inset:0;z-index:2;pointer-events:none;will-change:opacity,transform;
  /* EXPERIMENT (easy to roll back): fade the atmosphere rightward from the phone centre, so the street/houses
     on the canvas underneath faintly bleed through on the right side of the phone */
  -webkit-mask:linear-gradient(96deg,#000 55%,rgba(0,0,0,.8) 100%);
          mask:linear-gradient(96deg,#000 55%,rgba(0,0,0,.8) 100%);
  background:
    radial-gradient(58% 46% at 50% 45%,rgba(150,228,238,.42),rgba(86,176,202,.12) 46%,transparent 72%),
    radial-gradient(125% 96% at 50% 42%,transparent 36%,rgba(5,26,46,.55) 100%),
    linear-gradient(168deg,#0c2f59 0%,#134f6e 38%,#15727a 68%,#14796d 100%)}
/* persistent vignette so the revealed van keeps image-1's moody edges */
.hero .scrim-hero{z-index:3;background:
  radial-gradient(128% 98% at 50% 45%,transparent 40%,rgba(4,20,34,.66) 100%),
  linear-gradient(180deg,rgba(4,20,34,.5) 0%,transparent 20%,transparent 58%,rgba(4,20,34,.88) 100%)}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .nav-links{display:none}
  .hero-pins,.round-pins,.hero-stop{display:none}   /* pins off on mobile (cover-fit crops them); banners DO show */
  .hero{height:430vh}                               /* shorter hero track on mobile — less scrolling to get through/back */
  .hero .sticky{overflow:hidden}
  .hero-grid{grid-template-columns:1fr;text-align:center;gap:30px;padding-top:108px;padding-bottom:70px;align-content:center;height:auto}
  .hero-headline{height:auto;position:static;margin-bottom:18px}
  .hero-headline h1{position:static}
  .hero-headline h1.reveal-line[data-in="0.5"]{display:none}
  .hero-sub,.hero-cta,.trust-strip{justify-content:center;margin-left:auto;margin-right:auto}
  .hero-cta{justify-content:center}.trust-strip{justify-content:center}
  .pain-grid{grid-template-columns:1fr}
  .features-grid{grid-template-columns:1fr}
  .chat-inner{grid-template-columns:1fr;gap:40px}
  .chat-copy{text-align:left}.chat-copy p{margin-left:0;margin-right:0}
  .chat-points{align-items:flex-start}
  .sms-proof{grid-template-columns:1fr;gap:36px}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:30px}
  .app-inner{grid-template-columns:1fr;gap:30px}
  .app-phones{height:520px;transform:scale(.8)}
  .band-app .app-phones .device-tilt{transform:rotate(-7deg) translateX(-50px) scale(.84)}
  .band-app .app-phones .device-tilt2{transform:rotate(7deg) translateX(50px) scale(.84)}
  .pricing-grid{grid-template-columns:1fr;max-width:440px}
  .footer-inner{grid-template-columns:1fr;gap:28px}
  .feature-right .feature-copy,.feature-copy{align-items:center;text-align:center}
  .feature-right .feature-copy>*,.feature-copy>*{margin-left:auto;margin-right:auto}
  .compare{font-size:13.5px}.compare th,.compare td{padding:13px 13px}
}
@media (max-width:480px){
  .device{width:280px;height:580px}
  .device.device-chat{height:600px}
  .hero-headline h1{font-size:clamp(2.2rem,11vw,3rem)}
  .btn-lg{width:100%}
}
/* hero runs the FULL choreography on mobile too (intro phone → reveal → drive → cards), like desktop */
@media (max-width:980px){
  .hero .sticky{display:block;padding:0}
  .hero .sticky canvas{position:absolute;inset:0;width:100%;height:100%}
  .nav__links,.nav__book-pill{display:none}
  .nav__menu{display:grid}
  /* intro phone — smaller + a touch lower; never trap touch-scroll (JS sets it interactive at the top otherwise) */
  .hero-phone{top:calc(57.75% + 45px);pointer-events:none !important}   /* centred in the space between the headline and the SCROLL hint */
  .hero-phone .device{width:clamp(156px,44vw,188px);height:clamp(322px,91vw,388px);overflow:hidden}
  .hero-phone .device-screen{height:100%}
  /* corner statement → ABOVE the phone (upper area), not behind it */
  .hero__text{position:absolute;left:0;right:0;top:15.5vh;bottom:auto;display:flex;flex-direction:column;align-items:center;gap:0;text-align:center;pointer-events:none;z-index:6}
  .hero__t{position:static;inset:auto;text-align:center;text-shadow:0 4px 30px rgba(0,0,0,.6)}
  .hero__t--tl,.hero__t--br{font-size:clamp(2.2rem,11vw,3.6rem)}
  .hero__t--tl .hero__t-in,.hero__t--br .hero__t-in{transform:none}
  .hero__eyebrow{position:absolute;top:78px;left:0;right:0;justify-content:center;flex-wrap:wrap;gap:.6em;z-index:5}
  .hero__eyebrow-line{display:none}
  /* Job-in-progress / Job-complete cards — centred + sized for a phone (JS still sets translateY(-50%) + scale) */
  .hbanner{left:6vw;right:6vw;width:auto;top:50%}
  .hb-timer{font-size:46px;margin:10px 0 6px}
  .hb-head{font-size:18px}
  .hb-tag{font-size:11px;padding:5px 10px}
  .hb-sub{font-size:14px}
  .hb-steps{gap:11px;margin-top:16px}
.hb-step{font-size:14.5px}
}

/* Slide-fit sections: keep the big beats readable inside a single viewport,
   while JS still lets taller content free-scroll once the slide has landed. */
@media (min-width:981px){
  #features.band,#pricing.band{min-height:100vh;display:grid;align-items:center;padding-block:clamp(40px,6vh,68px)}
  #features .band-inner{display:grid;grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);gap:clamp(28px,4vw,56px);align-items:center}
  #features .section-head{max-width:440px;margin-bottom:0}
  #features .section-head h2{font-size:clamp(2.05rem,3.65vw,3.15rem)}
  #features .section-head p{font-size:15.5px}
  #features .features-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  #features .card{border-radius:18px;padding:14px 16px}
  #features .card-ico{width:40px;height:40px;border-radius:13px;margin-bottom:9px}
  #features .card-ico svg{width:22px;height:22px}
  #features .card h3{font-size:15.5px;margin-bottom:6px}
  #features .card p{font-size:12.2px;line-height:1.38}
  #features .card .tagline{display:none}

  #pricing .section-head{margin-bottom:20px}
  #pricing .section-head h2{font-size:clamp(2rem,3.9vw,3rem)}
  #pricing .section-head p{font-size:15.5px}
  #pricing .pricing-grid{max-width:940px;gap:18px}
  #pricing .price{padding:22px 22px}
  #pricing .price h3{font-size:19px}
  #pricing .price .sub{font-size:13px;margin-bottom:11px}
  #pricing .price .amount b{font-size:clamp(2.25rem,3.5vw,2.8rem)}
  #pricing .price .per{font-size:12.8px;margin-bottom:13px}
  #pricing .price ul{gap:6px;margin-bottom:14px}
  #pricing .price li{font-size:12.8px;line-height:1.4}
  #pricing .price .btn{padding:12px 20px}
  #pricing .price-foot{margin-top:13px;font-size:12.8px}
}

@media (max-width:980px) and (hover:hover) and (pointer:fine){
  #features.band,#pricing.band{padding-block:70px}
  #features .section-head{margin-bottom:28px}
  #features .features-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  #features .card{border-radius:18px;padding:14px 16px}
  #features .card-ico{width:40px;height:40px;border-radius:13px;margin-bottom:9px}
  #features .card-ico svg{width:22px;height:22px}
  #features .card h3{font-size:15.5px;margin-bottom:6px}
  #features .card p{font-size:12.2px;line-height:1.38}
  #features .card .tagline{display:none}
  #pricing .section-head{margin-bottom:28px}
  #pricing .price{padding:22px 22px}
  #pricing .price .sub{font-size:13px;margin-bottom:11px}
  #pricing .price .amount b{font-size:clamp(2.25rem,8vw,2.8rem)}
  #pricing .price .per{font-size:12.8px;margin-bottom:13px}
  #pricing .price ul{gap:6px;margin-bottom:14px}
  #pricing .price li{font-size:12.8px;line-height:1.4}
  #pricing .price .btn{padding:12px 20px}
}

@media (prefers-reduced-motion:reduce){
  .device,.scroll-hint,.qbubble,.s-ico.radar::after{animation:none}
  .reveal,.reveal.in,.reveal-line{animation:none;opacity:1!important;transform:none!important}
  .snap-arrived .section-head,.snap-arrived .sms-copy,.snap-arrived .chat-copy,.snap-arrived .map-copy,
  .snap-arrived .glass,.snap-arrived .map-stage,.snap-arrived .stat,.snap-arrived .compare-wrap{animation:none}
  .route,.map-stage.in .route,.map-stage.in .map-pins g,.map-stage.in .map-van{animation:none;opacity:1;stroke-dashoffset:0}
  .route--messy{opacity:.18}
  .map-van{transform:translate(624px,96px)}
  .btn{transform:none!important}
}