/* The homepage (ec-landing.html), 2026-10 (EC-4859): the homepage concept's design
   (prototypes/homepage-concept.html, EC-4589 / EC-4858) as the live page. Moved out of
   the page so it fits its byte budget; the /es, /de ... copies load the same file. */
/* main sits below the fixed header (the preview banner did this before). */
main#main{margin-top:var(--nav-h)}

/* ── Live chrome (ec-landing.html at a04075f04): reset, header, forms ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; color-scheme: dark; }
html:has(body.light-mode) { color-scheme: light; }
body { background: var(--bg); color: var(--txt); font-family: 'Barlow', sans-serif; font-size: 16px; line-height: 1.6; overflow-x: hidden; }
:root {
  --amber:#F59E0B; --red:#EF4444; --bg:#0F1117; --bg2:#131722; --s1:#181C27; --s2:#1E2334; --s3:#242A3D;
  --bdr:#2A3045; --bdr2:#363D57; --txt:#E4E2DD; --sub:#C8C4BE; --mut:#9A958E;
  --up:#34D399; --down:#F87171; --sup:#A78BFA; --bro:#F97316; --car:#10B981; --cus:#FBBF24;
  --note:#7DD3FC; --note-bg:rgba(125,211,252,.08); --accent-text:#F59E0B;
  --grad:linear-gradient(90deg,#F59E0B,#EF4444); --grad-cta:linear-gradient(90deg,#F59E0B,#EF4444);
  --display:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  --wrap:1180px; --gut:clamp(16px,4vw,40px);
  --nav-h:72px; --nav-h-mobile:60px;
}
.lang-scroll::-webkit-scrollbar{width:5px}
.lang-scroll::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#F59E0B,#EF4444);border-radius:10px}
.lang-scroll::-webkit-scrollbar-track{background:transparent}
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 48px;height:72px;background:rgba(15,17,23,0.88);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,0.04);}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;}
.nav-wordmark{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:18px;letter-spacing:0.06em;text-transform:uppercase;color:var(--txt);white-space:nowrap;}
.nav-tagline{font-size:11px;letter-spacing:0.18em;color:var(--amber);text-transform:uppercase;margin-top:1px;font-weight:500;white-space:nowrap;}
.nav-links{display:flex;align-items:center;gap:24px;}
.nav-links a{color:var(--sub);text-decoration:none;font-size:14px;font-weight:600;letter-spacing:0.04em;transition:color 0.2s;white-space:nowrap;}
.nav-links a:hover{color:var(--txt);}
.nav-right{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.lang-btn{background:var(--s2);border:1px solid var(--bdr);border-radius:8px;padding:6px 12px;color:var(--txt);cursor:pointer;font-size:14px;font-family:inherit;transition:all 0.2s;white-space:nowrap;}
.lang-btn:hover{border-color:var(--amber);}
.lang-dropdown{position:absolute;top:calc(100% + 8px);right:0;background:var(--s1);border:1px solid var(--bdr);border-radius:12px;overflow:hidden;min-width:190px;max-height:340px;overflow-y:auto;box-shadow:0 12px 40px rgba(0,0,0,0.4);z-index:200;}
.lang-item{display:flex;align-items:center;justify-content:space-between;padding:10px 14px 10px 18px;cursor:pointer;transition:background 0.12s;border-left:3px solid transparent;color:inherit;text-decoration:none;}
.lang-item:hover{background:rgba(245,158,11,0.08);}
.lang-item.active{background:rgba(245,158,11,0.1);border-left-color:var(--amber);}
.lang-item.active span{font-weight:700;color:var(--amber);}
.lang-item .check{font-size:13px;color:var(--amber);font-weight:800;}
.nav-cta{background:var(--grad-cta);border:none;border-radius:8px;padding:10px 24px;color:white;font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;cursor:pointer;transition:opacity 0.2s;text-decoration:none;}
.nav-cta:hover{opacity:0.85;}
.btn-secondary{background:transparent;border:1px solid var(--bdr);border-radius:10px;padding:16px 40px;color:var(--sub);font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;cursor:pointer;transition:all 0.2s;text-decoration:none;display:inline-block;}
nav .btn-secondary{padding:9px 18px;font-size:14px}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;z-index:200;}
.hamburger span{display:block;width:22px;height:2px;background:var(--txt);border-radius:2px;transition:all 0.25s;}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mobile-menu{display:none;position:fixed;top:var(--nav-h-mobile);left:0;right:0;bottom:0;z-index:99;flex-direction:column;background:var(--s1);border-top:1px solid var(--bdr);padding:24px 24px 40px;gap:0;overflow-y:auto;}
.mobile-menu a{display:block;padding:16px 0;font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--txt);text-decoration:none;border-bottom:1px solid var(--bdr);}
.mobile-menu a:last-child{border-bottom:none;}
.mobile-menu a:hover{color:var(--amber);}
.mobile-menu .mob-cta{margin-top:24px;background:var(--grad-cta);border-radius:10px;color:white !important;text-align:center;padding:16px !important;border-bottom:none !important;}
/* The tagline shows once, in the hero kicker. */
#t-nav-tagline{display:none !important}
.contact-form{background:var(--bg);border:1px solid var(--bdr);border-radius:20px;padding:32px;text-align:left;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form-group{display:flex;flex-direction:column;gap:8px;}
.form-group.full{grid-column:1/-1;}
.form-label{font-size:13px;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:var(--mut);}
.form-input,.form-select,.form-textarea{background:var(--s1);border:1px solid var(--bdr);border-radius:10px;padding:13px 16px;color:var(--txt);font-family:'Barlow',sans-serif;font-size:14px;transition:border-color 0.2s;width:100%;-webkit-appearance:none;}
.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--amber);}
.form-input::placeholder,.form-textarea::placeholder{color:var(--mut);}
.form-input.filled{border-color:color-mix(in srgb,var(--amber) 55%,var(--bdr))}
.form-textarea{resize:vertical;min-height:100px;}
.form-submit{width:100%;padding:16px;background:var(--grad-cta);border:none;border-radius:10px;color:white;font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;cursor:pointer;margin-top:8px;box-shadow:0 0 40px rgba(245,158,11,0.25);transition:opacity 0.2s,box-shadow 0.2s;}
.form-submit:hover{opacity:0.9;box-shadow:0 4px 40px rgba(245,158,11,0.4);}
.ec-hp{position:absolute;left:-9999px;top:0;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden;}
.role-checklist{display:flex;flex-direction:column;gap:6px;width:100%;}
.role-check-item{display:flex;align-items:center;gap:12px;padding:11px 14px;background:var(--s1);border:1px solid var(--bdr);border-radius:8px;cursor:pointer;transition:border-color 0.15s,background 0.15s;user-select:none;}
.role-check-item:hover{border-color:var(--amber);}
.role-check-item.selected{border-color:var(--amber);background:rgba(245,158,11,0.07);}
.role-check-box{width:18px;height:18px;border-radius:4px;border:1.5px solid var(--bdr);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all 0.15s;background:transparent;}
.role-check-item.selected .role-check-box{background:var(--amber);border-color:var(--amber);}
.role-check-tick{font-size:11px;font-weight:900;color:white;display:none;line-height:1;}
.role-check-item.selected .role-check-tick{display:block;}
.role-check-lbl{font-size:14px;color:var(--sub);font-weight:500;line-height:1.3;}
.role-check-item.selected .role-check-lbl{color:var(--txt);font-weight:600;}
@media(max-width:1024px){
  .nav-links{display:none}
  .nav-cta{display:none !important}
  nav .btn-secondary{display:none}
  .hamburger{display:flex !important}
  .mobile-menu{top:72px}
}
@media(max-width:768px){
  nav{padding:0 16px !important;height:var(--nav-h-mobile) !important;}
  #lang-btn{font-size:12px !important;padding:5px 8px !important}
  .mobile-menu{top:var(--nav-h-mobile) !important}
  .form-grid{grid-template-columns:1fr !important}
  .contact-form{padding:20px 16px !important}
  .form-input,.form-select,.form-textarea{font-size:16px !important}
  .role-check-item{padding:10px 12px !important}
}
@media(max-width:480px){ nav{padding:0 12px} }

/* ── Concept: section shell ── */
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.num{font-variant-numeric:tabular-nums}
h1,h2,h3{font-family:var(--display);text-wrap:balance;letter-spacing:.005em;hyphens:auto;overflow-wrap:break-word}
/* Long single words in h2/h3 hyphenate in the page language (marketing-nav.js sets <html lang>)
   instead of running past a phone's edge. The hero .h1 opts out (hyphens:manual, EC-4876: "SUP- /
   PLY," was hard to read) and keeps CJK runs whole (word-break:keep-all; text-wrap:balance otherwise
   splits "散裝液 | 體" on phones). A language whose longest hero word cannot fit the hero column at the
   English size (German "Schüttflüssigkeiten" is 451px at 52px) gets a smaller hero instead, via a
   per-language --h1-cap container-query rule below .h1. */
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:4px}
main{display:block}
.sec{padding-block:clamp(64px,9vw,112px)}
/* The alternate tone fades in and out over the section's first and last 140px,
   so no section starts or ends on a hard edge. */
.sec.alt{background:linear-gradient(180deg,var(--bg) 0,var(--bg2) 140px,var(--bg2) calc(100% - 140px),var(--bg) 100%)}
.kicker{font:700 12px 'Barlow',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text);margin-bottom:14px}
.h2{font-size:clamp(38px,5.4vw,64px);line-height:.98;font-weight:800;text-transform:uppercase}
.h2 em,.h1 em{font-style:normal;display:inline-block;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.04em}
.lede{color:var(--sub);font-size:clamp(16px,1.6vw,18px);max-width:62ch;margin-top:18px}
.sec-head{display:grid;gap:4px;margin-bottom:clamp(32px,4vw,52px)}
@supports (animation-timeline:view()){
  .wipe{animation:wipe linear both;animation-timeline:view();animation-range:entry 10% cover 32%}
  @keyframes wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;padding:12px 20px;font:700 15px 'Barlow',sans-serif;
  text-decoration:none;border:1px solid var(--bdr2);background:var(--s2);color:var(--txt);cursor:pointer;transition:transform .2s var(--ease),border-color .2s,background .2s}
.btn:hover{transform:translateY(-1px);border-color:var(--amber)}
.btn.primary{background:var(--grad);border-color:transparent;color:#160B02}
.btn.sm{padding:9px 16px;font-size:14px}
.btn.ghost{background:transparent}
.progress{position:fixed;top:0;left:0;right:0;height:2px;background:var(--grad);transform-origin:0 50%;transform:scaleX(0);z-index:101;pointer-events:none}

/* ── Hero ── */
/* overflow-x only: the glows may bleed down into the next section instead of
   stopping on a straight line at the hero's bottom edge. */
.hero{position:relative;overflow-x:clip;padding-block:clamp(48px,7vw,88px) clamp(56px,8vw,96px)}
.glow{position:absolute;z-index:-1;border-radius:50%;filter:blur(90px);opacity:.33;pointer-events:none}
.glow.a{width:520px;height:520px;background:#F59E0B;left:-160px;top:-180px;animation:drift 26s ease-in-out infinite alternate}
.glow.b{width:460px;height:460px;background:#EF4444;right:-140px;bottom:-200px;opacity:.22;animation:drift 31s ease-in-out infinite alternate-reverse}
@keyframes drift{to{transform:translate(90px,60px)}}
.hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,4vw,56px);align-items:center}
.h1{font-size:clamp(52px,8.2vw,112px);line-height:.9;font-weight:900;text-transform:uppercase;-webkit-hyphens:manual;hyphens:manual;word-break:keep-all}
.hero .wrap>:first-child{container-type:inline-size}
@supports (width:1cqi){
  .h1{font-size:min(clamp(52px,8.2vw,112px),var(--h1-cap,112px))}
  /* 100cqi / (longest unbreakable hero run in em + .15em margin), measured in Chromium with
     word-break:keep-all (EC-4876): DE "Schüttflüssigkeiten" 8.67em, NL "Vloeistoffen" 5.46em,
     JA "つながる。" 5.07em (バルク液体 5.03em), ES/PT "Conectados." 5.14em. Uncapped on purpose:
     EN "Connected." 4.70em and FR "Connectés." 4.68em run into the grid gap at 1440px but clear
     the hero visual; IT 3.96em and ZH 4.08em fit the column.
     DE also gives up 10px of column: on CI Linux Chromium the word's em width grows as the type
     shrinks (8.58em at 58px, 8.89em at 37px; macOS stays at 8.67em), so a pure ratio left it
     2.55px too wide at 360px. 10px keeps >=4px of Linux slack down to a 320px phone. */
  html:lang(de) .h1{--h1-cap:calc((100cqi - 10px) / 8.82)}
  html:lang(nl) .h1{--h1-cap:calc(100cqi / 5.61)}
  html:lang(ja) .h1{--h1-cap:calc(100cqi / 5.22)}
  html:lang(es) .h1{--h1-cap:calc(100cqi / 5.29)}
  html:lang(pt) .h1{--h1-cap:calc(100cqi / 5.29)}
}
.hero .lede{margin-top:22px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
/* EC-4877: the industries row under the hero lede; each chip jumps to its card in #industries. */
.ind{margin-top:20px}
.ind-lbl{font:700 12px 'Barlow',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.ind-row{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0;padding:0;list-style:none}
.ind-row a{display:inline-block;font:600 14px 'Barlow',sans-serif;color:var(--sub);text-decoration:none;background:var(--s1);border:1px solid var(--bdr);border-radius:999px;padding:5px 13px;transition:border-color .2s,color .2s}
.ind-row a:hover{border-color:var(--amber);color:var(--txt)}
@media (max-width:960px){.hero .wrap{grid-template-columns:minmax(0,1fr)}}
.board-wrap{position:relative;padding-bottom:176px;min-width:0}
.board{background:var(--s1);border:1px solid var(--bdr);border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.45);overflow:hidden;margin:0}
.board-top{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--bdr);flex-wrap:wrap}
.board-top h3{font-size:19px;font-weight:800;text-transform:uppercase}
.tag{font:600 11px 'Barlow',sans-serif;letter-spacing:.06em;color:var(--mut);border:1px solid var(--bdr2);border-radius:999px;padding:3px 9px}
.ticker{margin-left:auto;display:flex;align-items:baseline;gap:8px;font-size:13px;color:var(--sub)}
.ticker .px{font:500 15px var(--mono);color:var(--txt);padding:2px 6px;border-radius:6px;transition:background .6s,color .6s}
.ticker .px.up{background:rgba(52,211,153,.18);color:var(--up)}
.ticker .px.down{background:rgba(248,113,113,.18);color:var(--down)}
.ticker .chg{font:500 12px var(--mono);display:inline-block;min-width:44px}
.ticker .chg.up{color:var(--up)}.ticker .chg.down{color:var(--down)}
.tbl{overflow-x:auto}
.tbl table{width:100%;border-collapse:collapse;font-size:14px;min-width:520px;table-layout:fixed}
.tbl th{white-space:nowrap;font:600 11px 'Barlow',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);text-align:left;padding:10px 16px}
.tbl td{padding:12px 12px;border-top:1px solid var(--bdr);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
/* The phone mockup's route box is scoped to .phone: unscoped, `.route` also matched the En route status pill,
   making that row 12px taller until its status changed (a layout shift on phones). */
.tbl td.lane b{font-weight:600}
.tbl tr.enter{animation:rowin .7s var(--ease)}
@keyframes rowin{from{opacity:0;background:rgba(245,158,11,.12)}to{opacity:1;background:transparent}}
.pill{display:inline-flex;align-items:center;gap:6px;font:700 12px/1.25 'Barlow',sans-serif;border-radius:999px;padding:4px 10px;transition:background .4s,color .4s}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.open{color:var(--sub);background:rgba(200,196,190,.1)}
.pill.bids{color:var(--cus);background:rgba(251,191,36,.12)}
.pill.booked{color:var(--sup);background:rgba(167,139,250,.14)}
.pill.route{color:var(--bro);background:rgba(249,115,22,.14)}
.pill.done{color:var(--car);background:rgba(16,185,129,.14)}
.pill.pop{animation:pop .5s var(--ease)}
@keyframes pop{40%{transform:scale(1.12)}}
.phone{--s1:#181C27;--txt:#E4E2DD;--sub:#C8C4BE;--mut:#9A958E;--bdr2:#363D57;color:var(--txt);position:absolute;right:24px;bottom:0;width:208px;background:#0B0D13;border:1px solid var(--bdr2);border-radius:26px;padding:14px 12px 12px;box-shadow:0 24px 60px rgba(0,0,0,.55)}
.phone .top{display:flex;justify-content:space-between;font:600 11px 'Barlow',sans-serif;color:var(--mut)}
.phone .ph-h{font:800 17px var(--display);text-transform:uppercase;margin:8px 0 2px}
.phone .meta{font-size:12px;color:var(--sub)}
.phone .route{margin-top:10px;background:var(--s1);border-radius:12px;padding:6px}
.phone .route svg{display:block;width:100%;height:auto}
.truck{offset-path:path("M14 66 C 50 60, 60 20, 100 26 S 160 14, 172 12");offset-rotate:0deg;animation:drive 9s linear infinite}
@keyframes drive{from{offset-distance:0%}to{offset-distance:100%}}
.phone .eta{display:flex;justify-content:space-between;font-size:12px;margin-top:8px;color:var(--sub)}
@media (max-width:560px){
  .phone{position:relative;right:auto;margin:-24px 0 0 auto;width:190px}.board-wrap{padding-bottom:0}
  .tbl table{min-width:0}
  .tbl col.c-prod,.tbl col.c-win{display:none}
  .tbl :is(th,td):is(:nth-child(2),:nth-child(4)){display:none}
  .tbl th,.tbl td{padding:10px 10px}
  .ticker{margin-left:0}
}

/* ── How it works (network) ── */
.net{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(20px,3vw,36px);align-items:stretch}
.stage{position:relative;height:clamp(340px,40vw,460px);border:1px solid var(--bdr);border-radius:18px;overflow:hidden;
  background:radial-gradient(circle at 50% 50%,rgba(245,158,11,.07),transparent 60%),var(--s1)}
.stage::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--bdr) 1px,transparent 1px),linear-gradient(90deg,var(--bdr) 1px,transparent 1px);background-size:32px 32px;opacity:.25}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y pinch-zoom}
.stage canvas.lq{filter:url(#goo);pointer-events:none}
.phys-fail{position:absolute;left:16px;right:16px;bottom:16px;color:var(--mut);font-size:14px;text-align:center}
.stage-bar{display:flex;align-items:flex-start;gap:12px;margin-top:12px}
/* Send a load lives in the sketch's top-right corner, so it reads as a control of the animation. */
.stage-act{position:absolute;top:12px;right:12px;z-index:2;background:color-mix(in srgb,var(--s2) 82%,transparent);backdrop-filter:blur(6px)}
.stage-act.pulse{border-color:color-mix(in srgb,var(--amber) 70%,var(--bdr2));animation:actpulse 2.4s ease-in-out infinite}
@keyframes actpulse{0%{box-shadow:0 0 0 0 rgba(245,158,11,.38)}70%,100%{box-shadow:0 0 0 12px rgba(245,158,11,0)}}
.step.got{animation:got .9s var(--ease)}
@keyframes got{30%{border-color:var(--c);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 22%,transparent)}}
.status{color:var(--mut);font-size:13.5px;flex:1;min-width:0;line-height:1.45;min-height:2.9em}
.steps{display:grid;gap:10px;align-content:start;counter-reset:s}
.step{position:relative;text-align:left;background:var(--s1);border:1px solid var(--bdr);border-radius:14px;padding:16px 18px 16px 62px;cursor:pointer;
  transition:border-color .3s,background .3s,transform .3s var(--ease)}
.step::before{counter-increment:s;content:"0" counter(s);position:absolute;left:18px;top:15px;font:800 22px var(--display);color:var(--c);opacity:.55;transition:opacity .3s}
.step-title{display:block;font:800 20px/1.2 var(--display);text-transform:uppercase;color:var(--txt);padding-right:76px}
.step-body{display:block;color:var(--sub);font-size:14.5px;margin-top:4px}
.step:hover{transform:translateX(3px)}
.step.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 9%,var(--s1))}
.step.on::before{opacity:1}
.step .hand{position:absolute;right:14px;top:14px;font:800 11px var(--display);letter-spacing:.06em;color:var(--c);border:1.5px solid var(--c);border-radius:999px;padding:2px 9px;opacity:.5}
.step.on .hand{opacity:1}
@media (max-width:900px){.net{grid-template-columns:1fr}}
@media (max-width:560px){.status{min-height:4.4em}.stage-bar{flex-wrap:wrap}}

/* ── Platform + trust cards ── */
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.card{position:relative;background:var(--s1);border:1px solid var(--bdr);border-radius:16px;padding:24px;overflow:hidden;min-width:0}
.card.spot::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(245,158,11,.12),transparent 60%)}
.card.spot:hover::after{opacity:1}
.card h3{font-size:22px;font-weight:800;text-transform:uppercase}
.card p{color:var(--sub);font-size:15px;margin-top:8px}
.ic-box{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:rgba(245,158,11,.1);color:var(--amber);margin-bottom:16px;font-size:20px}
@media (max-width:900px){.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.grid3{grid-template-columns:1fr}}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:1000px){.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.grid4{grid-template-columns:1fr}}
.demo-box{height:92px;border-radius:12px;background:var(--bg);border:1px solid var(--bdr);margin-bottom:18px;position:relative;overflow:hidden;display:grid;place-items:center}
.bb{position:relative;font:700 17px 'Barlow',sans-serif;width:100%;text-align:center;height:24px;margin-top:-14px}
.bb span{position:absolute;inset:0}
.bb .co{opacity:0;filter:blur(6px)}
.bb .city{opacity:1;color:var(--accent-text)}
.trust.play .bb .co{animation:coOut 2.4s var(--ease) both}
.trust.play .bb .city{animation:cityIn 2.4s var(--ease) both}
@keyframes coOut{0%,45%{opacity:1;filter:none}75%,100%{opacity:0;filter:blur(6px)}}
@keyframes cityIn{0%,50%{opacity:0;filter:blur(6px)}85%,100%{opacity:1;filter:none}}
.bb-sub{font-size:11.5px;color:var(--mut);position:absolute;bottom:10px;left:8px;right:8px;text-align:center;line-height:1.3}
.fm{display:flex;align-items:center;gap:10px;font:500 14px var(--mono);color:var(--sub)}
.fm svg{width:30px;height:30px}
.fm circle{stroke:var(--car)}
.fm path{stroke:var(--car);stroke-dasharray:24;stroke-dashoffset:0}
.trust.play .fm path{animation:tick 1.2s .4s var(--ease) both}
@keyframes tick{from{stroke-dashoffset:24}}
.stars{display:grid;gap:6px;font-size:12px;color:var(--mut)}
.stars div{display:flex;align-items:center;gap:8px}
.stars span{min-width:64px}
.stars i{display:block;width:84px;height:14px;background:linear-gradient(90deg,var(--cus) var(--f),var(--bdr2) var(--f));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 14'%3E%3Cg fill='%23000'%3E%3Cpath id='s' d='M7 0l2 4.6 5 .4-3.8 3.3 1.2 4.9L7 10.6 2.6 13.2l1.2-4.9L0 5l5-.4z'/%3E%3Cuse href='%23s' x='17.5'/%3E%3Cuse href='%23s' x='35'/%3E%3Cuse href='%23s' x='52.5'/%3E%3Cuse href='%23s' x='70'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 14'%3E%3Cg fill='%23000'%3E%3Cpath id='s' d='M7 0l2 4.6 5 .4-3.8 3.3 1.2 4.9L7 10.6 2.6 13.2l1.2-4.9L0 5l5-.4z'/%3E%3Cuse href='%23s' x='17.5'/%3E%3Cuse href='%23s' x='35'/%3E%3Cuse href='%23s' x='52.5'/%3E%3Cuse href='%23s' x='70'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
.trust.play .stars i{animation:fill 1.4s var(--ease) both}
.trust.play .stars div:nth-child(2) i{animation-delay:.35s}
@keyframes fill{from{--f:0%}}
@property --f{syntax:'<percentage>';inherits:false;initial-value:0%}
.docs{position:relative;width:150px;height:60px}
.docs span{position:absolute;left:50%;top:8px;width:46px;height:52px;margin-left:-23px;border-radius:6px;background:var(--s2);border:1px solid var(--bdr2);
  font:800 12px/52px var(--display);text-align:center;color:var(--sub)}
.docs span:nth-child(1){transform:translateX(-60px) rotate(-10deg)}
.docs span:nth-child(2){transform:translateX(-20px) rotate(-3deg)}
.docs span:nth-child(3){transform:translateX(20px) rotate(3deg)}
.docs span:nth-child(4){transform:translateX(60px) rotate(10deg);color:var(--amber);border-color:var(--amber)}
.trust.play .docs span{animation:fan .9s var(--ease) both}
.trust.play .docs span:nth-child(2){animation-delay:.08s}.trust.play .docs span:nth-child(3){animation-delay:.16s}.trust.play .docs span:nth-child(4){animation-delay:.24s}
@keyframes fan{from{transform:none}}

/* ── Integrations row ── */
.intline{display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:space-between;background:var(--s1);border:1px solid var(--bdr);border-radius:18px;padding:26px clamp(18px,3vw,32px)}
.intline > div{flex:1 1 420px;min-width:0}
.intline h2{font-size:clamp(24px,3vw,32px);font-weight:800;text-transform:uppercase;line-height:1.1}
.intline p{color:var(--sub);margin-top:6px;max-width:64ch}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;list-style:none}
.chip{font:600 13px 'Barlow',sans-serif;color:var(--sub);border:1px solid var(--bdr2);border-radius:999px;padding:5px 12px}

/* ── ATOM band ── */
.atom-band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:center}
.atom-band .stage{height:clamp(300px,32vw,380px)}
.atom-band ul{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:10px;color:var(--sub)}
.atom-band li{display:flex;gap:10px}
.atom-band li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--amber);margin-top:9px}
.atom-art{position:relative;width:96px;height:126.72px;margin:0 0 22px 6px}
.atom-art div,.atom-art svg{position:absolute}
@media (max-width:900px){.atom-band{grid-template-columns:1fr}}

/* ── Pricing line ── */
.price-line{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;border-block:1px solid var(--bdr);padding-block:30px}
.price-line h2{font-size:clamp(26px,3.4vw,38px);font-weight:800;text-transform:uppercase}
.price-line p{color:var(--sub);margin-top:6px}

/* ── CTA + gauge ── */
/* clip, not hidden: overflow:hidden would make the section a scroll container and break the sticky gauge.
   x only, so the glow fades up into the pricing line instead of starting on a straight edge. */
.cta{position:relative;overflow-x:clip}
.cta .glow.a{left:30%;top:-260px;opacity:.18}
.cta .h2{font-size:clamp(42px,5.6vw,80px)}
.cta .wrap{position:relative}
.cta-body{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:start;margin-top:36px}
.cta-body .contact-form{order:1}
.cta-gauge{order:2;position:sticky;top:96px}
.cta-stage .stage{height:clamp(320px,32vw,400px)}
.meter-row{display:flex;align-items:center;gap:12px;margin-top:12px}
.meter-title{font:800 15px var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--txt);white-space:nowrap}
.meter{flex:1;height:10px;border-radius:999px;background:var(--s3);overflow:hidden}
.meter-fill{display:block;height:100%;background:var(--grad);transform-origin:0 50%;transform:scaleX(0);transition:transform .8s var(--ease)}
.meter-pct{font:800 16px var(--display);min-width:44px;text-align:right}
.gauge-status{margin-top:8px}
@media (max-width:768px){
  html{scroll-padding-top:176px}
  main#main{margin-top:var(--nav-h-mobile)}
  .cta-body{display:block;margin-top:28px}
  .cta-gauge{position:sticky;top:calc(var(--nav-h-mobile) + 8px);z-index:20;background:rgba(24,28,39,.97);border:1px solid var(--bdr2);border-radius:14px;padding:10px 14px;margin-bottom:16px;box-shadow:0 10px 30px rgba(0,0,0,.45)}
  .cta-stage{display:none}
  .meter-row{margin-top:0}
  .meter-title{font-size:14px}
  .gauge-status{margin-top:4px;font-size:12.5px;min-height:0;height:2.9em;overflow:hidden}
}

/* ── FAQ ── */
.faq{display:grid;gap:10px;max-width:860px}
.qa{border:1px solid var(--bdr);border-radius:14px;background:var(--s1)}
.qa button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;background:none;border:0;padding:18px 20px;text-align:left;font:600 17px 'Barlow',sans-serif;cursor:pointer}
.qa .x{flex:none;width:22px;height:22px;position:relative;transition:transform .35s var(--ease)}
.qa .x::before,.qa .x::after{content:"";position:absolute;left:3px;right:3px;top:10px;height:2px;background:var(--amber);border-radius:2px}
.qa .x::after{transform:rotate(90deg)}
.qa[data-open] .x{transform:rotate(45deg)}
.qa .a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.qa[data-open] .a{grid-template-rows:1fr}
.qa .a>div{overflow:hidden}
.qa .a p{color:var(--sub);padding:0 20px 18px;max-width:70ch}
.site-footer{padding-bottom:72px}

/* ── Light theme: the live landing's palette (ec-landing.html), plus the concept's own tokens.
   Role colours darken to ≥4.5:1 on the light surfaces; gradient words use the live darker stops. ── */
body.light-mode{
  --bg:#F1EFE9; --bg2:#F8F7F4; --s1:#FFFFFF; --s2:#F8F7F4; --s3:#EDEAE3; --bdr:#DDD9D0; --bdr2:#CFCAC0;
  --txt:#1A1816; --sub:#524E49; --mut:#6B6862; --accent-text:#8A4700;
  --sup:#6D28D9; --bro:#C2410C; --car:#047857; --cus:#92400E; --up:#047857; --down:#B91C1C;
  --note:#0369A1; --note-bg:rgba(3,105,161,.07);
  --grad-text:linear-gradient(90deg,#C2410C,#B91C1C);
}
body.light-mode nav{background:rgba(248,247,244,.92);border-bottom-color:rgba(0,0,0,.08)}
body.light-mode .h2 em,body.light-mode .h1 em{background:var(--grad-text);-webkit-background-clip:text;background-clip:text}
body.light-mode .glow{opacity:.16}body.light-mode .glow.b{opacity:.1}
body.light-mode .board{box-shadow:0 30px 70px -28px rgba(15,17,23,.28)}
body.light-mode .phone{box-shadow:0 24px 50px -16px rgba(15,17,23,.4)}
body.light-mode .card.spot::after{background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(245,158,11,.14),transparent 60%)}
body.light-mode .stage{background:radial-gradient(circle at 50% 50%,rgba(245,158,11,.06),transparent 60%),var(--s1)}
body.light-mode .stage::before{opacity:.5}
@media (max-width:768px){body.light-mode .cta-gauge{background:rgba(255,255,255,.97);box-shadow:0 10px 30px rgba(15,17,23,.12)}}

/* ── QA fixes: small type and touch targets ── */
.tbl th,.tag{font-size:12px}
.step .hand{font-size:12px}
@media (pointer:coarse){
  .btn.sm{min-height:44px}
  .site-footer .sf-col a{display:inline-block;padding-block:5px;min-height:44px;line-height:34px}
  .site-footer .sf-social{min-width:44px;min-height:44px;display:inline-grid;place-items:center}
}

/* ── Motion: smooth scroll (Lenis) and scroll reveals ──
   Nothing here applies until the motion script sets html.motion, which it does
   only when reduced motion is off and IntersectionObserver exists. Reveals use
   opacity and transform only, so they cause no layout shift. */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
:root{--out:cubic-bezier(.16,1,.3,1)}
html.motion .rv{opacity:0;transform:translate3d(0,var(--ry,34px),0)}
html.motion .rv.rv-fade{transform:none}
html.motion .rv.in{opacity:1;transform:none;transition:opacity .9s var(--out) var(--d,0s),transform 1.2s var(--out) var(--d,0s)}
/* Headings rise out of a mask, like a line of type sliding up into place. */
html.motion .rh{clip-path:inset(0 -6% 100% -6%);transform:translate3d(0,.5em,0)}
html.motion .rh.in{clip-path:inset(-25% -6% -25% -6%);transform:none;transition:clip-path 1.15s var(--out) var(--d,0s),transform 1.15s var(--out) var(--d,0s)}
html.motion .kicker.rv{--ry:14px}
.parallax{will-change:translate}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ── Email sign-up (the live page's #signup, kept: the newsletter list collects here) ── */
#signup .su-box{max-width:640px;margin:0 auto;text-align:center}
#signup .lede{margin-inline:auto}
#signup .lede a{color:var(--accent-text)}
#signup .su-form{display:flex;gap:10px;max-width:520px;margin:22px auto 0;text-align:left}
#signup .su-form .form-group{flex:1;margin:0}
#signup .su-form .form-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#signup .su-form .form-submit{width:auto;white-space:nowrap;padding-inline:22px}
#signup .ec-form-status{flex-basis:100%}
@media (max-width:560px){#signup .su-form{flex-wrap:wrap}#signup .su-form .form-submit{width:100%}}