:root{ --bg:#05070d; --bg2:#090c15; --ink:#eef2f8; --muted:rgba(238,242,248,.52); --faint:rgba(238,242,248,.32); --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; } /* vignette overlay (film-grain overlay removed — page reads cleaner/sharper) */ body::before{ content:""; position:fixed; inset:0; z-index:2; pointer-events:none; background:radial-gradient(130% 90% at 50% 0%, transparent 55%, rgba(0,0,0,.55) 100%); } .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); } .brand{display:flex; align-items:center; gap:10px; font-family:var(--disp); font-weight:800; font-size:1.15rem; letter-spacing:-.02em; color:var(--ink); text-decoration:none} .brand .dot{width:9px;height:9px;border-radius:50%;background:var(--amber);box-shadow:0 0 18px 3px rgba(251,172,60,.7)} .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 ===== */ .hero{position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:120px 20px 80px; 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)}} .hero-scrim{position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg,rgba(5,7,13,.58) 0%,rgba(5,7,13,.16) 34%,rgba(5,7,13,.5) 78%,var(--bg) 100%), radial-gradient(120% 80% at 50% 42%,transparent 36%,rgba(5,7,13,.6) 100%)} .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:30px 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 */ .paths{display:flex; gap:14px; margin-top:44px; flex-wrap:wrap; justify-content:center; opacity:0; animation:rise .9s cubic-bezier(.16,1,.3,1) both 1.2s} .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:7px; transition:letter-spacing .3s} .path:hover .pa{letter-spacing:.18em} .hero-sub-cta{margin-top:30px; font-size:.92rem; color:var(--muted); opacity:0; animation:rise .9s ease both 1.5s} .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. ===== */ .bridge-rail{min-height:100vh; display:flex; align-items:center; justify-content:center; padding-top:0; padding-bottom:0} .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} /* 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)} .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:-.02em; display:flex; align-items:center; gap:8px; margin-bottom:14px} .footer-brand .dot{width:8px; height:8px; border-radius:50%; background:var(--amber)} .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}} /* ===== LIVE NETWORK MAP (route map section, between hero and the load-to-paid rail) ===== */ /* z-index:3 lifts the map ABOVE the fixed film-grain overlay (body::after, z-index:2) so the continent + roads render crisp instead of grainy. */ .network{position:relative; z-index:3; max-width:min(1640px,95vw); margin:0 auto; padding:clamp(48px,8vh,110px) clamp(16px,2.5vw,40px) clamp(18px,4vh,44px)} .network .net-head{display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; margin-bottom:28px} .network .overline{margin-bottom:16px} .network .net-h{font-family:var(--disp); font-weight:700; font-size:clamp(2rem,4.4vw,3.2rem); line-height:1.04; letter-spacing:-.04em; color:var(--ink)} .network .net-h .grad{background:linear-gradient(110deg,var(--amber),#ffd9a0 45%,var(--teal)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent} .network .net-sub{color:var(--muted); margin:14px 0 0; max-width:48ch; font-size:clamp(.98rem,1.4vw,1.1rem); line-height:1.6} .network .net-legend{display:grid; gap:9px; min-width:236px} .network .leg{display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:.76rem; color:var(--muted)} .network .leg .sw{width:22px; height:2px; border-radius:2px; background:var(--teal); box-shadow:0 0 8px rgba(45,212,191,.5); flex:none} .network .leg.on .sw{background:var(--amber); box-shadow:0 0 8px rgba(251,172,60,.6)} .network .leg b{color:var(--ink); font-weight:600} .network .leg .ar{color:var(--faint)} .network .leg .st{margin-left:auto; color:var(--teal)} .network .leg.on .st{color:var(--amber)} .network .map-frame{position:relative; border:1px solid var(--line); border-radius:20px; overflow:hidden; perspective:1300px; perspective-origin:50% 50%; background:radial-gradient(120% 90% at 50% 0%,rgba(45,212,191,.05),transparent 55%),var(--bg2)} .network #routemap{display:block; width:100%; height:clamp(480px,58vw,760px); transform:scale(1.06); transform-origin:center center; will-change:transform} .network .map-badge{position:absolute; top:14px; left:16px; display:inline-flex; align-items:center; gap:8px; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); background:rgba(9,12,21,.7); border:1px solid var(--line); padding:6px 11px; border-radius:9px} .network .map-badge .p{width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 10px var(--teal); animation:npulse 2s infinite} @keyframes npulse{70%{box-shadow:0 0 0 7px rgba(45,212,191,0)}100%{box-shadow:0 0 0 0 rgba(45,212,191,0)}} @media(max-width:760px){.network .net-legend{min-width:0; width:100%}}