:root{
--bg:#05070d; --bg2:#090c15;
/* --muted was .52. On flat --bg that measured 5.17:1, which passes; the
failure was over the hero photograph, where the same colour fell to 2.0:1
against the bright sunset band — far under the 4.5:1 AA floor. Every one of
the five cinematic landing pages puts body copy on that photo, and --muted
is also the text colour inside the translucent .path cards that sit on it,
so the fix belongs here rather than in a hero-only override. At .72 it is
9.28:1 on flat --bg and >=4.5:1 everywhere measured over the photo.
--faint is decorative only (rules, scroll cue, eyebrow ticks) — never put
sentence copy in it; it measures ~3.2:1 over the hero. */
--ink:#eef2f8; --muted:rgba(238,242,248,.72); --faint:rgba(238,242,248,.38);
--amber:#fbac3c; --amber-deep:#f5871f;
--teal:#2dd4bf; --cyan:#34e3e3; --indigo:#7c83ff; --lime:#a3e635;
--line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.05);
--disp:'Bricolage Grotesque',serif;
--body:'Hanken Grotesk',sans-serif;
--mono:'IBM Plex Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
/* NOTE: do NOT add `scroll-behavior:smooth` on — it fights GSAP
ScrollTrigger (janky / "fighting" scroll around the scrubbed lifecycle
rail). Native scrolling only. */
body{
background:var(--bg); color:var(--ink); font-family:var(--body);
-webkit-font-smoothing:antialiased; overflow-x:hidden; line-height:1.6;
}
/* The fixed vignette overlay that used to live here was removed 2026-07-25.
On a --bg of #05070d an 8-bit buffer cannot represent
`transparent -> rgba(0,0,0,.55)` smoothly, so the radial quantised into
visible concentric ARCS across every landing page — ellipses centred at
50% 0%, which is why they dipped in the middle and rose at both edges.
Darkening an already-near-black page bought almost nothing visually while
producing the worst banding on the site, so the whole layer went.
The teal/amber washes below are kept and dithered instead. */
/* Anti-banding dither for the two radial washes that survive (.glow, .glow2).
A ~4% fractal-noise tile laid over each wash pushes neighbouring pixels
across the quantisation boundary in both directions, so the step edge
scatters instead of drawing a clean arc. Scoped INSIDE the wash element,
never over body text — the full-page film grain was deliberately dropped
earlier for sharpness and must not come back.
⚠ The mask is not optional. `overlay` lightens uniformly, so an unmasked
noise layer paints the wash's own 900x520 / 1000x1000 BOX and you trade a
set of arcs for a visible rectangle. Each mask must mirror the falloff of
the gradient it sits on — keep the stop % in sync with the rule above it.
.viz .orb is deliberately NOT in this list: it carries filter:blur(28px),
which would blur the dither away and leave only the cost. */
.bridge .glow::after,
.closing .glow2::after{
content:""; position:absolute; inset:0; pointer-events:none;
background-image:url("data:image/svg+xml;utf8,");
opacity:.042; mix-blend-mode:overlay;
}
.bridge .glow::after{
-webkit-mask-image:radial-gradient(circle,#000,transparent 62%);
mask-image:radial-gradient(circle,#000,transparent 62%);
}
.closing .glow2::after{
-webkit-mask-image:radial-gradient(circle,#000,transparent 60%);
mask-image:radial-gradient(circle,#000,transparent 60%);
}
.mono{font-family:var(--mono)}
/* ===== NAV ===== */
nav{
position:fixed; top:0; left:0; right:0; z-index:20;
display:flex; align-items:center; justify-content:space-between;
padding:22px clamp(20px,5vw,64px);
backdrop-filter:saturate(120%) blur(2px);
}
/* Two-tone wordmark: "Trucker" in ink, "Pro" in amber. Replaces the floating
amber orb + text, which carried no meaning and read as a stray bullet at
small sizes.
display:inline-block, NOT flex — the amber "Pro" is an inline so the
letter-spacing and kerning run continuously across the r|P seam. Making this
a flex container turns "Trucker" and "Pro" into separate flex items and
opens a visible gap between them.
Tracking is -.035em (was -.02em): the word should read as one object. */
.brand{display:inline-block; font-family:var(--disp); font-weight:800; font-size:1.15rem; letter-spacing:-.035em; color:var(--ink); text-decoration:none; white-space:nowrap}
.brand-pro{color:var(--amber)}
.nav-links{display:flex; gap:30px; align-items:center}
.nav-links a{color:var(--muted); text-decoration:none; font-size:.92rem; transition:color .25s}
.nav-links a:hover{color:var(--ink)}
.nav-cta{
font-family:var(--mono); font-size:.78rem; letter-spacing:.05em; text-transform:uppercase;
padding:10px 18px; border:1px solid var(--line); border-radius:100px; color:var(--ink);
background:rgba(255,255,255,.02); cursor:pointer; transition:.25s;
}
.nav-cta:hover{border-color:rgba(251,172,60,.6); box-shadow:0 0 24px -6px rgba(251,172,60,.5)}
.nav-burger{display:none; width:42px; height:42px; padding:0; border:1px solid var(--line); border-radius:100px; background:rgba(255,255,255,.02); cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px; transition:.25s}
.nav-burger span{display:block; width:16px; height:2px; border-radius:2px; background:var(--ink); transition:transform .25s,opacity .25s}
.nav-burger:hover{border-color:rgba(251,172,60,.6); box-shadow:0 0 24px -6px rgba(251,172,60,.5)}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{position:fixed; inset:0; z-index:19; display:none; flex-direction:column; padding:104px clamp(20px,5vw,64px) 34px; background:rgba(5,7,13,.92); backdrop-filter:saturate(120%) blur(16px); -webkit-backdrop-filter:saturate(120%) blur(16px)}
.mobile-menu.open{display:flex; animation:mmin .28s ease both}
@keyframes mmin{from{opacity:0; transform:translateY(-8px)}to{opacity:1; transform:none}}
.mobile-menu a{display:flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; font-family:var(--disp); font-weight:700; font-size:1.5rem; letter-spacing:-.02em; padding:16px 2px; border-bottom:1px solid var(--line2)}
.mobile-menu a::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--amber); box-shadow:0 0 14px 2px rgba(251,172,60,.6); opacity:0; transition:opacity .25s}
.mobile-menu a:hover::before,.mobile-menu a:focus-visible::before{opacity:1}
.mobile-menu .mm-cta{margin-top:auto; justify-content:center; border-bottom:none; border-radius:100px; font-size:1.05rem; padding:15px 28px; background:var(--ink); color:#0a0d14; box-shadow:0 18px 40px -12px rgba(251,172,60,.5)}
.mobile-menu .mm-cta::before{display:none}
@media(max-width:860px){.nav-links a:not(.nav-cta){display:none} .nav-links{gap:14px} .nav-burger{display:flex} body.menu-open{overflow:hidden}}
/* ===== HERO ===== */
/* padding-bottom clears the absolutely-positioned .scroll-cue (bottom:26px,
~46px tall). At the old 80px the cue overlapped the last line of hero copy. */
.hero{position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:104px 20px 118px; overflow:hidden}
#net{position:absolute; inset:0; z-index:1; opacity:.22}
.hero-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 38%; z-index:0; transform:scale(1.08); transition:transform .25s ease-out; animation:photoin 1.5s ease both}
@keyframes photoin{from{opacity:0; transform:scale(1.15)}to{opacity:1; transform:scale(1.08)}}
/* The scrim carries the hero's legibility, so it is tuned against measured
contrast rather than by eye. The old 34% stop sat at rgba(5,7,13,.16) —
almost no darkening exactly where .lead falls — which put the body copy at
2.0:1 against the bright sunset band (AA wants 4.5:1).
Rather than flatten the whole photograph, the ramp is lifted moderately and
a third layer darkens only the centre column where the text actually sits,
so the sunset keeps its colour at the edges of the frame. */
.hero-scrim{position:absolute; inset:0; z-index:1; pointer-events:none;
background:linear-gradient(180deg,rgba(5,7,13,.62) 0%,rgba(5,7,13,.48) 34%,rgba(5,7,13,.62) 78%,var(--bg) 100%),
radial-gradient(76% 58% at 50% 46%,rgba(5,7,13,.50),transparent 88%),
radial-gradient(120% 80% at 50% 42%,transparent 36%,rgba(5,7,13,.6) 100%)}
/* Narrow viewports need a heavier scrim: the hero grows tall as the headline
and lead wrap, which slides the text off the centre of the readability
radial and onto the brightest part of the sky. Measured 4.18:1 at 390px
with the desktop scrim. */
@media(max-width:760px){
.hero-scrim{background:linear-gradient(180deg,rgba(5,7,13,.68) 0%,rgba(5,7,13,.60) 34%,rgba(5,7,13,.68) 78%,var(--bg) 100%),
radial-gradient(120% 60% at 50% 46%,rgba(5,7,13,.42),transparent 92%),
radial-gradient(120% 80% at 50% 42%,transparent 36%,rgba(5,7,13,.6) 100%)}
}
/* display:contents so the wrapper introduces no box of its own and
.hero-photo keeps positioning against .hero. See _landing_hero_photo.html. */
.hero-photo-wrap{display:contents}
.sun{
position:absolute; left:50%; bottom:-8%; transform:translateX(-50%); z-index:0;
width:min(1180px,150vw); height:min(1180px,150vw); border-radius:50%;
background:radial-gradient(circle at 50% 50%,
rgba(255,210,130,.95) 0%, rgba(251,140,30,.55) 16%,
rgba(245,120,20,.22) 30%, rgba(120,60,10,.06) 46%, transparent 62%);
filter:blur(2px); animation:sunpulse 7s ease-in-out infinite;
}
@keyframes sunpulse{0%,100%{opacity:.92; transform:translateX(-50%) scale(1)}50%{opacity:1; transform:translateX(-50%) scale(1.03)}}
.horizon{position:absolute; left:0; right:0; bottom:0; height:34%; z-index:0;
background:linear-gradient(180deg, transparent, rgba(5,7,13,.4) 40%, var(--bg) 92%)}
.truck{position:absolute; left:50%; bottom:4%; transform:translateX(-50%); z-index:1; width:min(500px,72vw); filter:drop-shadow(0 18px 30px rgba(0,0,0,.55)); animation:trk 1.6s cubic-bezier(.16,1,.3,1) both .2s}
@keyframes trk{from{opacity:0; transform:translateX(-50%) translateY(26px) scale(.98)}to{opacity:1; transform:translateX(-50%) translateY(0) scale(1)}}
.truck svg{display:block; width:100%; height:auto}
.hero-inner{position:relative; z-index:3; max-width:1120px; display:flex; flex-direction:column; align-items:center; transform:translateY(-1vh)}
/* audience switcher */
.switch{display:inline-flex; gap:6px; padding:6px; border:1px solid var(--line); border-radius:100px; background:rgba(10,13,22,.55); backdrop-filter:blur(8px); margin-bottom:30px; opacity:0; animation:rise .8s cubic-bezier(.16,1,.3,1) both .15s}
.switch button{font-family:var(--mono); font-size:.8rem; letter-spacing:.02em; padding:9px 18px; border-radius:100px; border:0; background:transparent; color:var(--muted); cursor:pointer; transition:.3s; white-space:nowrap}
.switch button .ar{opacity:.0; margin-left:6px; transition:.3s}
.switch button:hover{color:var(--ink)}
.switch button.active{color:#1a1205; background:linear-gradient(135deg,var(--amber),var(--amber-deep)); box-shadow:0 6px 24px -8px rgba(251,140,30,.8); font-weight:600}
.switch button:not(.active):hover .ar{opacity:.6; margin-left:8px}
.overline{font-family:var(--mono); font-size:.78rem; letter-spacing:.36em; text-transform:uppercase; color:var(--amber); margin-bottom:26px; opacity:0; animation:rise .8s cubic-bezier(.16,1,.3,1) both .25s}
.overline::before{content:"";display:inline-block;width:26px;height:1px;background:var(--amber);vertical-align:middle;margin-right:14px;opacity:.7}
h1{font-family:var(--disp); font-weight:700; font-size:clamp(2.6rem,7vw,5.6rem); line-height:1.02; letter-spacing:-.04em; max-width:14ch}
h1 .w{display:inline-block; opacity:0; transform:translateY(28px) rotateX(40deg); animation:wordin .9s cubic-bezier(.16,1,.3,1) forwards}
h1 .grad{background:linear-gradient(110deg,var(--amber) 10%,#ffd9a0 55%,var(--teal) 120%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
h1 .l{display:inline-block; opacity:0; transform:translateY(.5em); animation:lin .55s cubic-bezier(.16,1,.3,1) forwards}
h1 .grad .l{background:linear-gradient(180deg,#ffe2b4,var(--amber) 70%,var(--amber-deep)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
@keyframes wordin{to{opacity:1; transform:none}}
@keyframes lin{to{opacity:1; transform:none}}
@keyframes rise{from{opacity:0; transform:translateY(18px)}to{opacity:1; transform:none}}
.lead{font-size:clamp(1rem,1.6vw,1.22rem); color:var(--muted); max-width:50ch; margin:26px auto 0; line-height:1.7; opacity:0; animation:rise .9s cubic-bezier(.16,1,.3,1) both 1.15s}
.cta-row{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:40px; opacity:0; animation:rise .9s cubic-bezier(.16,1,.3,1) both 1.35s}
.btn{font-family:var(--body); font-weight:600; font-size:.98rem; padding:15px 28px; border-radius:100px; cursor:pointer; border:1px solid transparent; transition:.28s; text-decoration:none; display:inline-flex; align-items:center; gap:9px}
.btn-1{background:var(--ink); color:#0a0d14}
.btn-1:hover{box-shadow:0 0 0 4px rgba(255,255,255,.08),0 18px 40px -12px rgba(251,172,60,.6); transform:translateY(-2px)}
.btn-2{background:rgba(255,255,255,.03); color:var(--ink); border-color:var(--line)}
.btn-2:hover{border-color:rgba(45,212,191,.5); color:#fff; box-shadow:0 0 30px -10px rgba(45,212,191,.55)}
/* audience path cards */
/* Primary conversion pair, above the audience fork. */
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:30px; opacity:0; animation:rise .9s cubic-bezier(.16,1,.3,1) both 1.2s}
.hero-reassure{margin-top:16px; font-family:var(--mono); font-size:.74rem; letter-spacing:.08em; color:var(--muted); opacity:0; animation:rise .9s ease both 1.32s}
/* --muted, not --faint: this is a sentence the visitor is meant to read, and
--faint measured 3.19:1 against the hero photo. --faint stays for rules and
ornament only. */
.paths-lead{margin-top:38px; font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); opacity:0; animation:rise .9s ease both 1.42s}
.paths-lead::before,.paths-lead::after{content:""; display:inline-block; width:26px; height:1px; background:var(--line); vertical-align:middle; margin:0 12px}
.paths{display:flex; gap:14px; margin-top:20px; flex-wrap:wrap; justify-content:center; align-items:stretch; opacity:0; animation:rise .9s cubic-bezier(.16,1,.3,1) both 1.5s}
/* align-items:stretch above + margin-top:auto on .pa below: "Safety Providers"
is the only card whose description wraps to two lines, which used to shove
its "Enter →" a line lower than the other three. Now every arrow sits on one
baseline no matter how the copy wraps. */
.path{position:relative; width:252px; padding:24px 22px; border:1px solid var(--line); border-radius:18px; background:rgba(9,12,21,.6); backdrop-filter:blur(10px); display:flex; flex-direction:column; align-items:flex-start; gap:7px; text-decoration:none; color:var(--ink); overflow:hidden; transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .3s}
.path::after{content:""; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(251,172,60,.65),transparent); opacity:0; transition:opacity .35s}
.path:hover{transform:translateY(-7px); border-color:rgba(251,172,60,.55); box-shadow:0 26px 54px -22px rgba(251,140,30,.55)}
.path:hover::after{opacity:1}
.path .pic{width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,rgba(251,172,60,.2),rgba(45,212,191,.12)); border:1px solid var(--line); margin-bottom:6px}
.path .pic svg{width:23px; height:23px; stroke:var(--amber); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.path .pl{font-family:var(--disp); font-weight:700; font-size:1.4rem; letter-spacing:-.02em}
.path .pd{font-size:.86rem; color:var(--muted); line-height:1.45}
.path .pa{font-family:var(--mono); font-size:.74rem; letter-spacing:.08em; color:var(--amber); margin-top:auto; padding-top:7px; transition:letter-spacing .3s}
.path:hover .pa{letter-spacing:.18em}
.hero-sub-cta{margin-top:26px; font-size:.92rem; color:var(--muted); opacity:0; animation:rise .9s ease both 1.62s}
/* On a short or narrow viewport the hero content already fills the frame; the cue
would sit on top of the copy, and there is nothing left to hint at. */
@media(max-height:820px),(max-width:760px){.scroll-cue{display:none}}
.hero-sub-cta a{color:var(--ink); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.22); padding-bottom:1px; transition:.25s}
.hero-sub-cta a:hover{color:var(--amber); border-color:var(--amber)}
.brow .explore{display:inline-flex; align-items:center; gap:7px; margin-top:16px; font-family:var(--mono); font-size:.8rem; letter-spacing:.04em; color:var(--amber); text-decoration:none; transition:gap .3s}
.brow .explore:hover{gap:13px}
@media(max-width:1100px) and (min-width:761px){.path{width:calc(50% - 7px); max-width:360px}}
@media(max-width:760px){.path{width:100%; max-width:380px}}
.scroll-cue{position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:3; font-family:var(--mono); font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; color:var(--faint); display:flex; flex-direction:column; align-items:center; gap:10px; opacity:0; animation:rise 1s ease both 1.7s}
.scroll-cue .bar{width:1px; height:36px; background:linear-gradient(var(--amber),transparent); animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{opacity:.2; transform:scaleY(.4); transform-origin:top}50%{opacity:1; transform:scaleY(1)}100%{opacity:.2; transform:scaleY(.4); transform-origin:bottom}}
/* ===== BRIDGE STATEMENT ===== */
.bridge{position:relative; padding:clamp(110px,18vh,200px) 20px; text-align:center; overflow:hidden}
.bridge .glow{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:900px; height:520px; background:radial-gradient(circle,rgba(45,212,191,.13),transparent 62%); pointer-events:none}
.bridge h2{font-family:var(--disp); font-weight:600; font-size:clamp(1.7rem,4.4vw,3.4rem); line-height:1.18; letter-spacing:-.03em; max-width:18ch; margin:0 auto; color:var(--faint)}
.bridge h2 .on{color:var(--ink)}
.bridge h2 .tl{color:var(--teal)}
.reveal .on,.reveal .tl,.reveal .word{animation:fillin .02s linear forwards}
.bridge h2 span{transition:color .5s}
/* ===== BRIDGE — lifecycle rail (home). Default state = COMPLETE so it is
SEO / no-JS / reduced-motion safe; JS dims it then scrubs on scroll. ===== */
/* min-height:100vh reserved a whole viewport (980px at 1440x900) for one
horizontal timeline, and it sat between the hero and the first product
screenshot — pushing the actual proof to 3630px. Explicit padding gives the
rail room to breathe at roughly half the height. */
.bridge-rail{display:flex; align-items:center; justify-content:center;
padding-top:clamp(78px,11vh,140px); padding-bottom:clamp(78px,11vh,140px)}
.bridge-rail .rail-wrap{position:relative; z-index:1; width:100%; max-width:1080px; margin:0 auto; text-align:center; padding:0 clamp(20px,5vw,40px)}
.bridge-rail .rail-over{font-family:var(--mono); font-size:.76rem; letter-spacing:.34em; text-transform:uppercase; color:var(--amber); margin-bottom:24px}
.bridge-rail .rail-h{font-family:var(--disp); font-weight:700; font-size:clamp(2.2rem,5.6vw,4.6rem); line-height:1.04; letter-spacing:-.04em; color:var(--ink); max-width:none}
.bridge-rail .rail-h .grad{background:linear-gradient(110deg,#fbac3c,#ffd9a0 45%,#2dd4bf); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.bridge-rail .rail-sub{color:var(--muted); margin:20px auto 0; max-width:52ch; font-size:clamp(.98rem,1.4vw,1.12rem); line-height:1.6}
.bridge-rail .rail{position:relative; margin-top:clamp(64px,11vh,120px); padding-bottom:64px}
.bridge-rail .rail-track{position:absolute; left:0; right:0; top:7px; height:2px; background:rgba(255,255,255,.10); border-radius:2px}
.bridge-rail .rail-fill{position:absolute; left:0; top:7px; height:2px; width:100%; background:linear-gradient(90deg,#fbac3c,#ffd9a0 45%,#2dd4bf); border-radius:2px; box-shadow:0 0 16px rgba(45,212,191,.45)}
.bridge-rail .rail-travel{position:absolute; left:100%; top:8px; width:9px; height:9px; border-radius:50%; background:#fff; transform:translate(-50%,-50%); box-shadow:0 0 18px 5px rgba(255,255,255,.55),-22px 0 26px 2px rgba(251,172,60,.45); z-index:2}
.bridge-rail .rail-node{position:absolute; top:0; left:var(--p); transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; width:max-content}
.bridge-rail .rail-node .dot{width:12px; height:12px; border-radius:50%; background:var(--accent,#2dd4bf); box-shadow:0 0 0 5px rgba(255,255,255,.04),0 0 22px 3px var(--accent,#2dd4bf)}
.bridge-rail .rail-node .rl{margin-top:18px; text-align:center; opacity:1}
.bridge-rail .rail-node .rn{font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; color:var(--faint); margin-bottom:6px}
.bridge-rail .rail-node .rt{font-family:var(--disp); font-weight:600; font-size:clamp(.84rem,1.3vw,1.05rem); color:var(--ink); white-space:nowrap}
.bridge-rail .rail-node .rd{font-size:.74rem; color:var(--muted); margin-top:3px; white-space:nowrap}
@media(max-width:680px){.bridge-rail .rail-node .rd{display:none} .bridge-rail .rail-node .rt{font-size:.78rem}}
/* ===== NUMBERED BENEFITS ===== */
.benefits{max-width:1140px; margin:0 auto; padding:40px 24px 60px; position:relative}
.benefits-head{position:relative; z-index:1; max-width:62ch; padding:clamp(20px,4vh,40px) 0 clamp(28px,5vh,52px)}
.benefits-h{font-family:var(--disp); font-weight:700; font-size:clamp(1.7rem,3.4vw,2.7rem); letter-spacing:-.03em; line-height:1.1; margin:14px 0 0; text-wrap:balance}
.benefits-sub{color:var(--muted); margin-top:18px; max-width:56ch; line-height:1.7; font-size:clamp(.98rem,1.4vw,1.08rem)}
/* cursor spotlight that follows the pointer through the empty space around the
cards; its tint picks up the audience row under the cursor (--gx/--gy/--gcol
set by JS). Sits behind the rows so it glows through the negative space. */
.benefits::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0; transition:opacity .6s ease; background:radial-gradient(560px circle at var(--gx,50%) var(--gy,16%),color-mix(in srgb,var(--gcol,var(--amber)) 14%,transparent),transparent 58%)}
.benefits:hover::before{opacity:1}
.benefits>.brow{position:relative; z-index:1}
@media(prefers-reduced-motion:reduce){.benefits::before{display:none}}
.brow{display:grid; grid-template-columns:90px 1.1fr 1fr; gap:clamp(20px,4vw,60px); align-items:center; padding:clamp(40px,7vh,80px) 0; border-top:1px solid var(--line)}
/* Four consecutive rows of num | copy | mock read as one repeated stamp.
.brow-flip mirrors a row to mock | copy | num so the eye crosses the page
instead of tracking straight down. Explicit grid placement keeps DOM order
(and therefore reading + tab order) intact — only the paint position flips.
Marked with a class rather than :nth-child so that inserting anything else
into .benefits cannot silently re-phase the alternation. */
@media(min-width:781px){
.brow-flip{grid-template-columns:1fr 1.1fr 90px}
.brow-flip .viz{grid-column:1; grid-row:1}
.brow-flip>div:nth-of-type(2){grid-column:2; grid-row:1}
.brow-flip .num{grid-column:3; grid-row:1; text-align:right}
}
.brow .num{font-family:var(--mono); font-size:1rem; color:var(--amber); letter-spacing:.1em}
.brow h3{font-family:var(--disp); font-weight:700; font-size:clamp(1.5rem,3vw,2.3rem); letter-spacing:-.03em; line-height:1.08; margin-bottom:14px}
.brow p{color:var(--muted); max-width:42ch}
.viz{height:200px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(160deg,rgba(255,255,255,.035),transparent); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center}
.viz .tag{font-family:var(--mono); font-size:.72rem; color:var(--faint); letter-spacing:.2em; text-transform:uppercase}
.viz .mesh{position:absolute; inset:0; background-image:linear-gradient(var(--line2) 1px,transparent 1px),linear-gradient(90deg,var(--line2) 1px,transparent 1px); background-size:26px 26px; mask-image:radial-gradient(circle at 70% 30%,#000,transparent 75%)}
.viz .orb{position:absolute; width:160px; height:160px; border-radius:50%; filter:blur(28px); opacity:.6}
/* .signal — "broadcasting node" benefit card: the label is a live node on a
connected grid; accent signal rings ping outward from it (echoes the hero's
particle network + the "one connected system" line). Pure CSS, no markup —
so every .viz.signal across all 5 landing pages is upgraded at once. */
.viz.signal{background:linear-gradient(160deg,rgba(255,255,255,.05),transparent)}
.viz.signal::after{content:""; position:absolute; left:50%; bottom:-30%; width:78%; height:78%; transform:translateX(-50%); border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--accent,var(--amber)) 22%,transparent),transparent 68%); pointer-events:none; z-index:0}
.viz.signal .mesh{background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px); background-size:30px 30px; mask-image:radial-gradient(circle at 50% 50%,#000 30%,transparent 84%); -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 30%,transparent 84%)}
.viz.signal .orb{left:50%; right:auto; top:50%; bottom:auto; transform:translate(-50%,-50%); width:140px; height:140px; filter:blur(42px); opacity:.24; background:var(--accent,var(--amber)); z-index:0}
/* radar ping rings — two staggered, clipped by the card's overflow:hidden */
.viz.signal .mesh::before,.viz.signal .mesh::after{content:""; position:absolute; left:50%; top:50%; width:72px; height:72px; margin:-36px 0 0 -36px; border-radius:50%; border:1.5px solid color-mix(in srgb,var(--accent,var(--amber)) 80%,transparent); opacity:.6; transform:scale(.4); animation:vizping 3.6s cubic-bezier(.16,1,.3,1) infinite}
.viz.signal .mesh::after{animation-delay:1.8s}
@keyframes vizping{0%{transform:scale(.3); opacity:0}12%{opacity:.85}100%{transform:scale(3.2); opacity:0}}
.viz.signal .tag{position:relative; z-index:2; color:var(--ink); opacity:.94; font-size:.74rem; letter-spacing:.24em; display:inline-flex; align-items:center; gap:10px; padding:7px 15px 7px 13px; border-radius:100px; background:rgba(5,7,13,.5); border:1px solid color-mix(in srgb,var(--accent,var(--amber)) 26%,var(--line)); backdrop-filter:blur(4px); box-shadow:0 6px 22px -10px rgba(0,0,0,.7)}
.viz.signal .tag::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--accent,var(--amber)); box-shadow:0 0 10px 2px var(--accent,var(--amber)); animation:vizpulse 3.6s ease-in-out infinite}
@keyframes vizpulse{0%,100%{box-shadow:0 0 8px 1px var(--accent,var(--amber))}50%{box-shadow:0 0 16px 4px var(--accent,var(--amber))}}
/* ===== .viz.mock — miniature, on-brand product mockups for the home benefit
cards (carriers=dispatch board, drivers=app, brokers=tender, safety=DQ file).
All inner selectors scoped under .mk so they never touch other pages'
.viz.signal radar cards or the global .btn/.row classes. Each card sets its
own --accent inline. ===== */
.viz.mock{height:288px; background:linear-gradient(160deg,rgba(255,255,255,.045),transparent)}
.viz.mock::before{content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:30px 30px; mask-image:radial-gradient(circle at 72% 0%,#000,transparent 80%); -webkit-mask-image:radial-gradient(circle at 72% 0%,#000,transparent 80%)}
.viz.mock::after{content:""; position:absolute; left:50%; bottom:-44%; width:80%; height:80%; transform:translateX(-50%); border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--accent,var(--amber)) 18%,transparent),transparent 66%); pointer-events:none}
.mk{position:absolute; inset:0; padding:18px; display:flex; flex-direction:column; z-index:1}
.mk-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:13px}
.mk-ttl{font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); opacity:.82; display:inline-flex; align-items:center; gap:8px}
.mk-ttl::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--accent,var(--amber)); box-shadow:0 0 9px 1px var(--accent,var(--amber)); animation:blip 2.6s ease-in-out infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.45}}
.mk-badge{font-family:var(--mono); font-size:.64rem; letter-spacing:.06em; padding:3px 9px; border-radius:100px; color:var(--accent,var(--amber)); background:color-mix(in srgb,var(--accent,var(--amber)) 12%,transparent); border:1px solid color-mix(in srgb,var(--accent,var(--amber)) 30%,transparent)}
.mk .pill{font-family:var(--mono); font-size:.6rem; letter-spacing:.04em; padding:3px 8px; border-radius:100px; white-space:nowrap}
.mk .p-amber{color:#fbca7d; background:rgba(251,172,60,.13); border:1px solid rgba(251,172,60,.32)}
.mk .p-teal{color:#7fe6d6; background:rgba(45,212,191,.13); border:1px solid rgba(45,212,191,.32)}
.mk .p-lime{color:#cdee8a; background:rgba(163,230,53,.13); border:1px solid rgba(163,230,53,.32)}
.mk .p-mute{color:var(--faint); background:rgba(255,255,255,.04); border:1px solid var(--line)}
/* carriers — dispatch board */
.mk-board .row{display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:10px; padding:9px 11px; border-radius:10px; background:rgba(255,255,255,.02); border:1px solid var(--line2); margin-bottom:7px}
.mk-board .id{font-family:var(--mono); font-size:.66rem; color:var(--muted)}
.mk-board .lane{font-size:.78rem; font-weight:600; color:var(--ink); letter-spacing:-.01em}
.mk-board .drv{font-size:.68rem; color:var(--faint)}
.mk-board .row.hi{background:color-mix(in srgb,var(--accent,var(--amber)) 7%,transparent); border-color:color-mix(in srgb,var(--accent,var(--amber)) 28%,transparent)}
/* drivers — app screen */
.mk-app{padding:16px}
.mk-app .load{border-radius:12px; padding:13px 14px; background:linear-gradient(150deg,color-mix(in srgb,var(--accent,var(--teal)) 14%,transparent),rgba(255,255,255,.02)); border:1px solid color-mix(in srgb,var(--accent,var(--teal)) 22%,transparent); margin-bottom:11px}
.mk-app .load .lbl{font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent,var(--teal)); margin-bottom:6px}
.mk-app .load .lane{font-family:var(--disp); font-weight:700; font-size:1.05rem; letter-spacing:-.02em}
.mk-app .load .meta{font-size:.7rem; color:var(--muted); margin-top:3px}
.mk-app .grid2{display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:11px}
.mk-app .cell{border-radius:10px; padding:10px 11px; background:rgba(255,255,255,.025); border:1px solid var(--line2)}
.mk-app .cell .k{font-family:var(--mono); font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; color:var(--faint)}
.mk-app .cell .v{font-family:var(--disp); font-weight:700; font-size:1.18rem; letter-spacing:-.02em; margin-top:3px}
.mk-app .cell .v.acc{color:var(--accent,var(--teal))}
.mk-app .btn{margin-top:auto; text-align:center; padding:11px; border-radius:10px; font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:#06210d; background:linear-gradient(135deg,var(--accent,var(--teal)),#8fe3d4)}
/* brokers — tender / carrier match */
.mk-tender .lane-bar{display:flex; align-items:center; justify-content:space-between; padding:8px 11px; border-radius:9px; background:rgba(255,255,255,.025); border:1px solid var(--line2); margin-bottom:9px}
.mk-tender .lane-bar .ln{font-size:.78rem; font-weight:600}
.mk-tender .lane-bar .mg{font-family:var(--mono); font-size:.64rem; color:var(--lime); background:rgba(163,230,53,.12); border:1px solid rgba(163,230,53,.3); padding:3px 8px; border-radius:100px}
.mk-tender .car{display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:9px; padding:9px 11px; border-radius:10px; background:rgba(255,255,255,.02); border:1px solid var(--line2); margin-bottom:7px}
.mk-tender .car.hi{background:color-mix(in srgb,var(--accent,var(--indigo)) 9%,transparent); border-color:color-mix(in srgb,var(--accent,var(--indigo)) 32%,transparent)}
.mk-tender .car .nm{font-size:.76rem; font-weight:600; color:var(--ink)}
.mk-tender .car .st{font-family:var(--mono); font-size:.62rem; color:var(--faint)}
.mk-tender .car .stars{letter-spacing:1px; font-size:.66rem; color:var(--accent,var(--indigo))}
.mk-tender .car .rt{font-family:var(--mono); font-size:.72rem; color:var(--ink)}
.mk-tender .car .go{font-family:var(--mono); font-size:.58rem; letter-spacing:.06em; text-transform:uppercase; color:var(--accent,var(--indigo)); border:1px solid color-mix(in srgb,var(--accent,var(--indigo)) 34%,transparent); border-radius:100px; padding:3px 9px}
/* safety — DQ compliance file */
.mk-dq .dq-row{display:flex; align-items:center; gap:10px; padding:8px 4px; border-bottom:1px solid var(--line2)}
.mk-dq .dq-row:last-child{border-bottom:none}
.mk-dq .ic{width:18px; height:18px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:.62rem; font-weight:700}
.mk-dq .ic.ok{background:rgba(163,230,53,.14); color:var(--lime); border:1px solid rgba(163,230,53,.35)}
.mk-dq .ic.warn{background:rgba(251,172,60,.14); color:var(--amber); border:1px solid rgba(251,172,60,.4)}
.mk-dq .nm{font-size:.76rem; color:var(--ink); flex:1}
.mk-dq .exp{font-family:var(--mono); font-size:.62rem; color:var(--faint)}
.mk-dq .exp.w{color:var(--amber)}
.mk-dq .ring{position:relative; width:46px; height:46px; border-radius:50%; background:conic-gradient(var(--accent,var(--lime)) calc(var(--pct,98)*1%),rgba(255,255,255,.08) 0); display:flex; align-items:center; justify-content:center; flex-shrink:0}
.mk-dq .ring::before{content:""; position:absolute; inset:4px; border-radius:50%; background:var(--bg)}
.mk-dq .ring span{position:relative; font-family:var(--disp); font-weight:700; font-size:.74rem}
/* interactivity — card lifts, a cursor-tracked spotlight sweeps the UI, and
individual rows / buttons respond to hover (--mx/--my set by JS) */
/* NOTE: no transform on hover — GSAP's .brow reveal writes an inline transform
on this card (it's a .brow child), which would override a CSS hover transform.
The accent border + shadow + cursor spotlight + row hovers carry the
interaction instead. */
.viz.mock{cursor:default; transition:border-color .4s,box-shadow .4s}
.viz.mock:hover{border-color:color-mix(in srgb,var(--accent,var(--amber)) 42%,var(--line)); box-shadow:0 26px 60px -30px color-mix(in srgb,var(--accent,var(--amber)) 55%,transparent)}
.mk::after{content:""; position:absolute; inset:0; z-index:4; pointer-events:none; opacity:0; transition:opacity .3s; background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--accent,var(--amber)) 20%,transparent),transparent 56%); mix-blend-mode:screen}
.viz.mock:hover .mk::after{opacity:1}
.mk-board .row{transition:border-color .25s,background .25s,transform .25s}
.mk-board .row:hover{border-color:color-mix(in srgb,var(--accent,var(--amber)) 42%,transparent); background:color-mix(in srgb,var(--accent,var(--amber)) 7%,transparent)}
.mk-app .btn{cursor:pointer; transition:transform .25s,box-shadow .25s,filter .25s}
.mk-app .btn:hover{transform:translateY(-1px); box-shadow:0 12px 28px -10px color-mix(in srgb,var(--accent,var(--teal)) 75%,transparent); filter:brightness(1.06)}
.mk-tender .car{transition:border-color .25s,background .25s}
.mk-tender .car:hover{border-color:color-mix(in srgb,var(--accent,var(--indigo)) 42%,transparent); background:color-mix(in srgb,var(--accent,var(--indigo)) 8%,transparent)}
.mk-tender .car .go{cursor:pointer; transition:background .25s,color .25s}
.mk-tender .car .go:hover{background:color-mix(in srgb,var(--accent,var(--indigo)) 18%,transparent)}
.mk-dq .dq-row{border-radius:7px; transition:background .2s}
.mk-dq .dq-row:hover{background:rgba(255,255,255,.035)}
/* ===== LIVE mockup archetypes for the 4 audience landing pages — continuous
CSS animations so each card feels alive (route dots travel, bars pulse, rings
sweep, AI-match scans, live dots blink). Frozen states are intentional under
prefers-reduced-motion. All scoped under .mk. ===== */
/* board / stops: a route line under the rows with a travelling vehicle dot */
.mk-route{position:relative; margin-top:auto; height:3px; border-radius:3px; background:rgba(255,255,255,.08); overflow:visible}
.mk-route i{position:absolute; left:0; top:0; height:100%; border-radius:3px; width:64%; background:linear-gradient(90deg,transparent,var(--accent,var(--amber))); animation:mkfill 4.6s cubic-bezier(.65,0,.35,1) infinite}
.mk-route b{position:absolute; top:50%; left:64%; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border-radius:50%; background:#fff; box-shadow:0 0 12px 3px var(--accent,var(--amber)); animation:mktravel 4.6s cubic-bezier(.65,0,.35,1) infinite}
.mk-route span{position:absolute; top:50%; width:6px; height:6px; margin-top:-3px; border-radius:50%; background:var(--accent,var(--amber)); opacity:.35}
@keyframes mkfill{0%{width:6%}90%{width:100%}100%{width:100%}}
@keyframes mktravel{0%{left:6%}90%{left:100%}100%{left:100%}}
/* app: an ETA progress bar that fills under the load card */
.mk-prog{height:5px; border-radius:5px; background:rgba(255,255,255,.08); overflow:hidden; margin:2px 0 11px}
.mk-prog i{display:block; height:100%; width:58%; border-radius:5px; background:linear-gradient(90deg,var(--accent,var(--teal)),#8fe3d4); animation:mketa 5s cubic-bezier(.65,0,.35,1) infinite}
@keyframes mketa{0%{width:8%}88%{width:92%}100%{width:92%}}
/* tender / AI matching: a scan band sweeps the rows, matched badge pulses */
.mk-tender{position:relative}
.mk-scan{position:absolute; left:10px; right:10px; height:34px; border-radius:9px; pointer-events:none; background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent,var(--indigo)) 16%,transparent),transparent); top:64px; animation:mkscan 3.8s ease-in-out infinite}
@keyframes mkscan{0%{top:58px; opacity:0}15%{opacity:1}85%{opacity:1}100%{top:150px; opacity:0}}
.mk .matched{animation:mkpulse 2.2s ease-in-out infinite}
@keyframes mkpulse{0%,100%{opacity:.6}50%{opacity:1}}
/* dq / compliance: ring sweep + the warning row gently blinks */
.mk-dq .ring{animation:mkring 4s ease-in-out infinite}
@keyframes mkring{0%{filter:drop-shadow(0 0 0 transparent)}50%{filter:drop-shadow(0 0 7px color-mix(in srgb,var(--accent,var(--lime)) 60%,transparent))}100%{filter:drop-shadow(0 0 0 transparent)}}
.mk-dq .dq-row .ic.warn{animation:mkwarn 1.8s ease-in-out infinite}
@keyframes mkwarn{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 4px rgba(251,172,60,.14)}}
/* fin: animated bar chart + total */
.mk-fin .bars{display:flex; align-items:flex-end; gap:8px; height:96px; margin:6px 0 12px}
.mk-fin .bars b{flex:1; border-radius:5px 5px 0 0; height:46%; background:linear-gradient(180deg,var(--accent,var(--amber)),color-mix(in srgb,var(--accent,var(--amber)) 22%,transparent)); animation:mkbar 3.6s ease-in-out infinite}
.mk-fin .bars b:nth-child(2){animation-delay:.3s} .mk-fin .bars b:nth-child(3){animation-delay:.6s} .mk-fin .bars b:nth-child(4){animation-delay:.9s} .mk-fin .bars b:nth-child(5){animation-delay:1.2s} .mk-fin .bars b:nth-child(6){animation-delay:1.5s}
@keyframes mkbar{0%,100%{height:34%}50%{height:86%}}
.mk-fin .tot{display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.025); border:1px solid var(--line2)}
.mk-fin .tot .k{font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}
.mk-fin .tot .v{font-family:var(--disp); font-weight:700; font-size:1.15rem; color:var(--accent,var(--amber)); letter-spacing:-.02em}
/* intg: pulsing chip grid */
.mk-intg .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:11px; margin:auto 0}
.mk-intg .chip{height:62px; border-radius:11px; background:rgba(255,255,255,.025); border:1px solid var(--line2); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:.62rem; letter-spacing:.04em; color:var(--muted); animation:mkchip 3.2s ease-in-out infinite}
.mk-intg .chip:nth-child(2){animation-delay:.35s} .mk-intg .chip:nth-child(3){animation-delay:.7s} .mk-intg .chip:nth-child(4){animation-delay:1.05s} .mk-intg .chip:nth-child(5){animation-delay:1.4s} .mk-intg .chip:nth-child(6){animation-delay:1.75s}
@keyframes mkchip{0%,100%{border-color:var(--line2); color:var(--muted); box-shadow:none}50%{border-color:color-mix(in srgb,var(--accent,var(--amber)) 50%,transparent); color:var(--ink); box-shadow:0 0 18px -7px var(--accent,var(--amber))}}
/* docs: file rows, top one scanning then verified */
.mk-docs .file{display:grid; grid-template-columns:22px 1fr auto; align-items:center; gap:10px; padding:9px 11px; border-radius:10px; background:rgba(255,255,255,.02); border:1px solid var(--line2); margin-bottom:7px}
.mk-docs .file .ico{width:22px; height:26px; border-radius:4px; background:color-mix(in srgb,var(--accent,var(--amber)) 16%,rgba(255,255,255,.04)); border:1px solid color-mix(in srgb,var(--accent,var(--amber)) 30%,transparent)}
.mk-docs .file .nm{font-size:.76rem; color:var(--ink)}
.mk-docs .file .sub{font-family:var(--mono); font-size:.58rem; color:var(--faint)}
.mk-docs .file .chk{font-family:var(--mono); font-size:.58rem; color:var(--accent,var(--amber))}
.mk-docs .scanbar{height:4px; border-radius:4px; background:rgba(255,255,255,.08); overflow:hidden; margin-top:5px}
.mk-docs .scanbar i{display:block; height:100%; width:40%; border-radius:4px; background:var(--accent,var(--amber)); animation:mkscanbar 3.2s ease-in-out infinite}
@keyframes mkscanbar{0%{width:6%}70%{width:100%}100%{width:100%}}
/* rate: labelled bars filling (ratings / IFTA / scorecards / margin) */
.mk-rate{justify-content:space-between}
.mk-rate .r{display:grid; grid-template-columns:84px 1fr 38px; align-items:center; gap:10px; margin-bottom:0}
.mk-rate .r .lab{font-size:.72rem; color:var(--muted)}
.mk-rate .r .track{height:7px; border-radius:7px; background:rgba(255,255,255,.08); overflow:hidden}
.mk-rate .r .track i{display:block; height:100%; border-radius:7px; background:linear-gradient(90deg,color-mix(in srgb,var(--accent,var(--amber)) 55%,transparent),var(--accent,var(--amber))); transform:scaleX(var(--v,.85)); transform-origin:left; animation:mktrack 3.8s ease-in-out infinite}
.mk-rate .r .pc{font-family:var(--mono); font-size:.66rem; color:var(--accent,var(--amber)); text-align:right}
.mk-rate .r:nth-child(3) .track i{animation-delay:.3s} .mk-rate .r:nth-child(4) .track i{animation-delay:.6s} .mk-rate .r:nth-child(5) .track i{animation-delay:.9s}
@keyframes mktrack{0%{transform:scaleX(.18)}55%{transform:scaleX(var(--v,.85))}100%{transform:scaleX(var(--v,.85))}}
/* console: client list, live status dots blink, a selection band drifts */
.mk-console{position:relative}
.mk-console .c{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; padding:13px 12px; border-radius:10px; background:rgba(255,255,255,.02); border:1px solid var(--line2); margin-bottom:11px; position:relative; z-index:1}
.mk-console .c .lv{width:8px; height:8px; border-radius:50%; background:var(--accent,var(--amber)); box-shadow:0 0 9px 1px var(--accent,var(--amber)); animation:mkblink 2.4s ease-in-out infinite}
.mk-console .c:nth-child(3) .lv{animation-delay:.8s} .mk-console .c:nth-child(4) .lv{animation-delay:1.6s}
@keyframes mkblink{0%,100%{opacity:1}50%{opacity:.35}}
.mk-console .c .nm{font-size:.76rem; color:var(--ink)}
.mk-console .c .st{font-family:var(--mono); font-size:.6rem; color:var(--faint)}
.mk-console .sel{position:absolute; left:0; right:0; height:50px; border-radius:10px; z-index:0; background:color-mix(in srgb,var(--accent,var(--amber)) 9%,transparent); border:1px solid color-mix(in srgb,var(--accent,var(--amber)) 26%,transparent); top:40px; animation:mksel 5.4s cubic-bezier(.65,0,.35,1) infinite}
@keyframes mksel{0%,18%{top:40px}33%,51%{top:101px}66%,84%{top:162px}100%{top:40px}}
@media(max-width:780px){.viz.mock{height:280px}}
.reveal-up{opacity:0; transform:translateY(40px); transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.reveal-up.in{opacity:1; transform:none}
@media(max-width:780px){.brow{grid-template-columns:1fr; gap:18px}.viz{height:150px}.brow .num{font-size:.85rem}}
/* ===== STAT STRIP ===== */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:30px}
.stat{background:var(--bg); padding:clamp(34px,6vh,64px) 24px; text-align:center}
.stat .n{font-family:var(--disp); font-weight:800; font-size:clamp(2.2rem,5vw,3.6rem); letter-spacing:-.04em; background:linear-gradient(120deg,#fff,var(--amber)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.stat .lab{font-family:var(--mono); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:10px}
@media(max-width:780px){.stats{grid-template-columns:repeat(2,1fr)}}
/* ===== CLOSING ===== */
.closing{position:relative; text-align:center; padding:clamp(120px,20vh,220px) 20px; overflow:hidden}
.closing .glow2{position:absolute; left:50%; bottom:-40%; transform:translateX(-50%); width:1000px; height:1000px; background:radial-gradient(circle,rgba(251,140,30,.18),transparent 60%); pointer-events:none}
.closing h2{font-family:var(--disp); font-weight:700; font-size:clamp(2.2rem,6vw,4.4rem); letter-spacing:-.04em; line-height:1.04; max-width:16ch; margin:0 auto}
.closing h2 .grad{background:linear-gradient(110deg,var(--amber),#ffdca6 60%,var(--teal)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.closing p{color:var(--muted); margin:24px auto 0; max-width:46ch}
@media(prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}.reveal-up{opacity:1; transform:none}h1 .w,h1 .l,.switch,.overline,.lead,.cta-row,.scroll-cue{opacity:1!important; transform:none!important}}
/* ===== CINE CONTENT SECTIONS ===== */
/* .cine-block: always visible (no opacity:0 default — SEO/no-JS safe; GSAP tweens from 0 briefly during reveal) */
.cine-block{will-change:transform,opacity}
.cine-section{padding:clamp(80px,14vh,160px) 24px; position:relative; overflow:hidden}
.cine-section::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent,rgba(7,212,191,.03) 50%,transparent); pointer-events:none}
.cine-container{max-width:1140px; margin:0 auto}
.cine-header{text-align:center; margin-bottom:clamp(40px,6vh,72px)}
.cine-h2{font-family:var(--disp); font-weight:700; font-size:clamp(2rem,5vw,3.8rem); line-height:1.06; letter-spacing:-.04em; margin:14px 0 20px; background:linear-gradient(160deg,var(--ink) 30%,rgba(238,242,248,.45)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.cine-lead{font-size:clamp(.95rem,1.5vw,1.18rem); color:var(--muted); max-width:52ch; margin:0 auto; line-height:1.7}
/* Integration grid */
.intg-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media(max-width:860px){.intg-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.intg-grid{grid-template-columns:1fr}}
.intg-card{background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.06); border-radius:20px; padding:32px 28px; transition:background .4s,transform .4s,border-color .4s; position:relative; overflow:hidden}
.intg-card::after{content:""; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent); opacity:0; transition:opacity .4s}
.intg-card:hover{background:rgba(255,255,255,.05); transform:translateY(-6px); border-color:rgba(255,255,255,.1)}
.intg-card:hover::after{opacity:1}
.intg-icon{width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; color:#fff; margin-bottom:18px}
.intg-title{font-family:var(--disp); font-size:1.05rem; font-weight:700; letter-spacing:-.01em; margin-bottom:8px; color:var(--ink)}
.intg-desc{font-size:.88rem; color:var(--muted); line-height:1.65; margin:0}
/* Feature grid */
.feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media(max-width:860px){.feat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.feat-grid{grid-template-columns:1fr}}
.feat-card{background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.06); border-radius:20px; padding:32px 28px; transition:background .4s,transform .4s,border-color .4s; position:relative; overflow:hidden}
.feat-card::after{content:""; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent); opacity:0; transition:opacity .4s}
.feat-card:hover{background:rgba(255,255,255,.05); transform:translateY(-6px); border-color:rgba(255,255,255,.1)}
.feat-card:hover::after{opacity:1}
.feat-icon{width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; color:#fff; margin-bottom:18px}
.feat-title{font-family:var(--disp); font-size:1.05rem; font-weight:700; letter-spacing:-.01em; margin-bottom:8px; color:var(--ink)}
.feat-desc{font-size:.88rem; color:var(--muted); line-height:1.6; margin:0 0 14px}
.feat-list{list-style:none; padding:0; margin:0}
.feat-list li{font-size:.84rem; color:rgba(238,242,248,.48); padding:5px 0; display:flex; align-items:center; gap:9px; border-bottom:1px solid rgba(255,255,255,.04)}
.feat-list li:last-child{border-bottom:none}
.feat-list li i{color:var(--teal); font-size:.7rem; flex-shrink:0}
/* AI showcase */
.ai-showcase{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
@media(max-width:640px){.ai-showcase{grid-template-columns:1fr}}
.ai-card{background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.06); border-radius:20px; padding:36px 30px; transition:background .4s,transform .4s,border-color .4s; position:relative; overflow:hidden}
.ai-card::after{content:""; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(124,131,255,.25),transparent); opacity:0; transition:opacity .4s}
.ai-card:hover{background:rgba(255,255,255,.05); transform:translateY(-6px); border-color:rgba(124,131,255,.18)}
.ai-card:hover::after{opacity:1}
.ai-icon{width:50px; height:50px; border-radius:15px; display:flex; align-items:center; justify-content:center; font-size:1.15rem; color:#fff; margin-bottom:20px}
.ai-title{font-family:var(--disp); font-size:1.1rem; font-weight:700; letter-spacing:-.02em; margin-bottom:10px; color:var(--ink)}
.ai-desc{font-size:.9rem; color:var(--muted); line-height:1.68; margin:0}
/* Standalone products */
.prod-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
@media(max-width:860px){.prod-grid{grid-template-columns:1fr 1fr}}
@media(max-width:580px){.prod-grid{grid-template-columns:1fr}}
.prod-card{background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.06); border-radius:22px; padding:36px 30px; display:flex; flex-direction:column; transition:background .4s,transform .4s; position:relative; overflow:hidden}
.prod-card::after{content:""; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent); opacity:0; transition:opacity .4s}
.prod-card:hover{background:rgba(255,255,255,.05); transform:translateY(-8px)}
.prod-card:hover::after{opacity:1}
.prod-icon{width:52px; height:52px; border-radius:15px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; color:#fff; margin-bottom:20px}
.prod-title{font-family:var(--disp); font-size:1.1rem; font-weight:700; letter-spacing:-.02em; margin-bottom:10px; color:var(--ink)}
.prod-desc{font-size:.88rem; color:var(--muted); line-height:1.65; margin-bottom:18px}
.prod-list{list-style:none; padding:0; margin:0 0 24px; flex:1}
.prod-list li{font-size:.84rem; color:rgba(238,242,248,.48); padding:5px 0; display:flex; align-items:center; gap:9px; border-bottom:1px solid rgba(255,255,255,.04)}
.prod-list li:last-child{border-bottom:none}
.prod-list li i{color:var(--teal); font-size:.7rem; flex-shrink:0}
.prod-btn{display:inline-flex; align-items:center; gap:8px; margin-top:auto; padding:12px 22px; border-radius:100px; font-family:var(--mono); font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; color:#fff; background:var(--prod-btn-bg); text-decoration:none; font-weight:600; transition:transform .3s,box-shadow .3s; border:none; cursor:pointer}
.prod-btn:hover{transform:scale(1.05); box-shadow:0 12px 36px -8px rgba(0,0,0,.45); color:#fff}
/* ===== FOOTER ===== */
footer{border-top:1px solid var(--line); padding:clamp(60px,10vh,100px) clamp(20px,5vw,64px) 40px; display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:clamp(20px,4vw,60px)}
.footer-brand{font-family:var(--disp); font-weight:800; font-size:1.1rem; letter-spacing:-.035em; display:inline-block; margin-bottom:14px; white-space:nowrap}
.footer-tagline{font-size:.88rem; color:var(--muted); max-width:28ch; line-height:1.6}
.footer-col h4{font-family:var(--mono); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); margin-bottom:16px}
.footer-col a{display:block; color:var(--muted); text-decoration:none; font-size:.9rem; margin-bottom:10px; transition:color .25s}
.footer-col a:hover{color:var(--ink)}
.footer-bottom{grid-column:1/-1; border-top:1px solid var(--line); margin-top:30px; padding-top:24px; display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:.72rem; color:var(--faint); flex-wrap:wrap; gap:10px}
@media(max-width:780px){footer{grid-template-columns:1fr 1fr}.footer-brand,.footer-tagline{grid-column:1/-1}}
@media(max-width:520px){footer{grid-template-columns:1fr}}