/* =================================================================\n HAUL ROUTER — Operations Control Room\n Design system: midnight navy + electric blue + warm gold\n ================================================================= */\n\n/* Fonts loaded via in each page for faster first paint */\n\n:root {\n /* Navy field */\n --navy-950: #060d18;\n --navy-900: #081120;\n --navy-850: #0a1626;\n --navy-800: #0c1c33;\n --navy-750: #102542;\n --navy-700: #163056;\n --navy-600: #1d3c69;\n\n /* Blue structure */\n --blue-600: #245ab0;\n --blue-500: #2f6fd0;\n --blue-400: #4a8ce8;\n --blue-300: #7db4f2;\n\n /* Gold accent */\n --gold-600: #c9952c;\n --gold-500: #e3b341;\n --gold-400: #f0c95a;\n --gold-300: #f7dd92;\n\n /* Paper / text */\n --cream: #f4efe1;\n --paper: #fbf8f0;\n --slate-100: #d6deec;\n --slate-300: #9fb0cb;\n --slate-400: #6f82a1;\n --slate-500: #4f6285;\n --line: rgba(125, 180, 242, 0.14);\n --line-strong: rgba(125, 180, 242, 0.26);\n\n /* Type */\n --display: 'Bricolage Grotesque', 'Times New Roman', serif;\n --sans: 'IBM Plex Sans', system-ui, sans-serif;\n --mono: 'IBM Plex Mono', 'SFMono-Regular', monospace;\n\n --maxw: 1240px;\n --ease: cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n/* Light mode overrides */\nhtml[data-theme=\"light\"] {\n /* Light backgrounds */\n --navy-950: #f5f5f5;\n --navy-900: #ffffff;\n --navy-850: #f9f9f9;\n --navy-800: #f0f0f0;\n --navy-750: #e8e8e8;\n --navy-700: #e0e0e0;\n --navy-600: #d0d0d0;\n\n /* Keep blues but adjust for light */\n --blue-600: #1e4a99;\n --blue-500: #2563d4;\n --blue-400: #3b7dd8;\n --blue-300: #5b8edb;\n\n /* Keep golds */\n --gold-600: #b8851f;\n --gold-500: #d4a532;\n --gold-400: #e8b84d;\n --gold-300: #f0d580;\n\n /* Light text colors */\n --cream: #2a2a2a;\n --paper: #f5f5f5;\n --slate-100: #404040;\n --slate-300: #666666;\n --slate-400: #888888;\n --slate-500: #aaaaaa;\n --line: rgba(0, 0, 0, 0.08);\n --line-strong: rgba(0, 0, 0, 0.14);\n}\n\n/* ---------- reset ---------- */\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\nhtml { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }\nbody {\n font-family: var(--sans);\n background: var(--navy-900);\n color: var(--cream);\n line-height: 1.6;\n font-size: 17px;\n overflow-x: hidden;\n -webkit-font-smoothing: antialiased;\n text-rendering: optimizeLegibility;\n transition: background .3s, color .3s;\n}\na { color: inherit; text-decoration: none; }\nimg, svg { display: block; max-width: 100%; }\nbutton { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }\nul { list-style: none; }\n\n/* ---------- selection ---------- */\n::selection { background: var(--gold-500); color: var(--navy-950); }\n\n/* ---------- atmospheric base ---------- */\nbody::before {\n content: \"\";\n position: fixed; inset: 0;\n background:\n radial-gradient(900px 600px at 78% -5%, rgba(47,111,208,0.20), transparent 60%),\n radial-gradient(700px 700px at 8% 12%, rgba(227,179,65,0.07), transparent 55%),\n linear-gradient(180deg, var(--navy-900), var(--navy-950));\n z-index: -2;\n transition: background .3s;\n}\n/* faint blueprint grid */\nbody::after {\n content: \"\";\n position: fixed; inset: 0;\n background-image:\n linear-gradient(rgba(125,180,242,0.035) 1px, transparent 1px),\n linear-gradient(90deg, rgba(125,180,242,0.035) 1px, transparent 1px);\n background-size: 64px 64px;\n mask-image: radial-gradient(ellipse 100% 80% at 50% 0%, #000 35%, transparent 85%);\n z-index: -1;\n transition: background-image .3s;\n}\n\nhtml[data-theme=\"light\"]::before {\n background:\n radial-gradient(900px 600px at 78% -5%, rgba(37, 99, 212, 0.08), transparent 60%),\n radial-gradient(700px 700px at 8% 12%, rgba(212, 165, 50, 0.04), transparent 55%),\n linear-gradient(180deg, #ffffff, #f5f5f5) !important;\n}\n\nhtml[data-theme=\"light\"]::after {\n background-image:\n linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),\n linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px) !important;\n}\n\n/* ---------- layout ---------- */\n.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }\nsection { position: relative; }\n.section-pad { padding: clamp(64px, 9vw, 128px) 0; }\n\n/* ---------- type utilities ---------- */\nh1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1.02; letter-spacing: -0.02em; }\n.eyebrow {\n font-family: var(--mono);\n font-size: 12.5px;\n font-weight: 500;\n letter-spacing: 0.22em;\n text-transform: uppercase;\n color: var(--gold-400);\n display: inline-flex; align-items: center; gap: 10px;\n}\n.eyebrow::before {\n content: \"\"; width: 26px; height: 1px; background: var(--gold-500);\n display: inline-block; opacity: 0.7;\n}\n.lede { color: var(--slate-100); font-size: clamp(17px, 1.6vw, 20px); max-width: 56ch; }\n.muted { color: var(--slate-300); }\n.gold { color: var(--gold-400); }\n.mono { font-family: var(--mono); }\n\n/* ---------- buttons ---------- */\n.btn {\n display: inline-flex; align-items: center; gap: 10px;\n font-family: var(--mono); font-size: 13.5px; font-weight: 500;\n letter-spacing: 0.04em;\n padding: 14px 22px; border-radius: 2px;\n transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s;\n white-space: nowrap;\n}\n.btn .arr { transition: transform .3s var(--ease); }\n.btn:hover .arr { transform: translateX(4px); }\n.btn-gold {\n background: var(--gold-500); color: var(--navy-950); font-weight: 600;\n box-shadow: 0 0 0 1px var(--gold-400), 0 14px 40px -16px rgba(227,179,65,0.7);\n}\n.btn-gold:hover { background: var(--gold-400); transform: translateY(-2px); box-shadow: 0 0 0 1px var(--gold-300), 0 20px 50px -16px rgba(227,179,65,0.85); }\n.btn-ghost { color: var(--cream); box-shadow: inset 0 0 0 1px var(--line-strong); background: rgba(125,180,242,0.03); }\n.btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--blue-400); background: rgba(74,140,232,0.1); transform: translateY(-2px); }\n\n/* Theme toggle button */\n.btn-theme {\n width: 40px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center;\n box-shadow: inset 0 0 0 1px var(--line-strong); border-radius: 2px;\n background: rgba(125,180,242,0.03);\n transition: background .2s, box-shadow .2s;\n}\n.btn-theme:hover {\n box-shadow: inset 0 0 0 1px var(--blue-400);\n background: rgba(74,140,232,0.1);\n}\n.btn-theme svg { width: 18px; height: 18px; }\n\n/* ---------- chips / tags ---------- */\n.chip {\n font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em;\n padding: 5px 11px; border-radius: 2px;\n background: rgba(74,140,232,0.1);\n box-shadow: inset 0 0 0 1px var(--line-strong);\n color: var(--blue-300);\n}\n\n/* =================================================================\n NAV\n ================================================================= */\n.topbar {\n background: linear-gradient(90deg, var(--gold-600), var(--gold-500));\n color: var(--navy-950);\n font-family: var(--mono); font-size: 12.5px; font-weight: 500;\n letter-spacing: 0.04em;\n text-align: center; padding: 8px 16px;\n position: relative; z-index: 60;\n}\n.topbar a { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }\n\nheader.nav {\n position: sticky; top: 0; z-index: 50;\n backdrop-filter: blur(14px);\n background: rgba(8,17,32,0.72);\n border-bottom: 1px solid var(--line);\n transition: background .3s, border-color .3s;\n}\nheader.nav.scrolled { background: rgba(6,13,24,0.92); border-color: var(--line-strong); }\nhtml[data-theme=\"light\"] header.nav { background: rgba(255, 255, 255, 0.85); }\nhtml[data-theme=\"light\"] header.nav.scrolled { background: rgba(245, 245, 245, 0.95); }\n\n.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 70px; }\n.brand { display: flex; align-items: center; gap: 11px; font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; }\n.brand .mark { width: 34px; height: 34px; flex: none; }\n.brand b { color: var(--gold-400); font-weight: 700; }\n.nav-links { display: flex; align-items: center; gap: 30px; }\n.nav-links a { font-size: 14.5px; color: var(--slate-100); font-weight: 500; transition: color .2s; position: relative; }\n.nav-links a:hover { color: var(--gold-400); }\n.nav-actions { display: flex; align-items: center; gap: 16px; }\n.nav-actions .login { font-family: var(--mono); font-size: 13px; color: var(--slate-100); }\n.nav-actions .login:hover { color: var(--gold-400); }\n.burger { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px var(--line-strong); border-radius: 2px; }\n.burger span { display: block; width: 18px; height: 2px; background: var(--cream); position: relative; }\n.burger span::before, .burger span::after { content: \"\"; position: absolute; left: 0; width: 18px; height: 2px; background: var(--cream); }\n.burger span::before { top: -6px; } .burger span::after { top: 6px; }\n\n/* =================================================================\n HERO\n ================================================================= */\n.hero { position: relative; overflow: hidden; padding-top: clamp(48px, 7vw, 92px); padding-bottom: clamp(56px, 8vw, 110px); }\n.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }\n\n.hero h1 { font-size: clamp(44px, 6.6vw, 86px); font-weight: 700; line-height: 0.96; }\n.hero h1 em { font-style: normal; color: var(--gold-400); position: relative; }\n.hero h1 .stroke { -webkit-text-stroke: 1.5px var(--blue-400); color: transparent; }\n.hero .lede { margin: 26px 0 34px; font-size: clamp(17px, 1.7vw, 21px); }\n.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }\n.hero-note { font-family: var(--mono); font-size: 12.5px; color: var(--slate-400); margin-top: 22px; letter-spacing: 0.03em; }\n\n/* route panel visual */\n.route-panel {\n position: relative;\n background: linear-gradient(160deg, var(--navy-800), var(--navy-850));\n border: 1px solid var(--line-strong);\n border-radius: 6px;\n overflow: hidden;\n box-shadow: 0 50px 110px -50px rgba(0,0,0,0.9), inset 0 1px 0 rgba(125,180,242,0.08);\n transition: background .3s, border-color .3s, box-shadow .3s;\n}\nhtml[data-theme=\"light\"] .route-panel {\n background: linear-gradient(160deg, #ffffff, #f9f9f9);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(0, 0, 0, 0.04);\n}\n\n.route-panel .panel-head {\n display: flex; align-items: center; justify-content: space-between;\n padding: 13px 16px; border-bottom: 1px solid var(--line);\n font-family: var(--mono); font-size: 12px; color: var(--slate-300);\n background: rgba(6,13,24,0.5);\n transition: background .3s;\n}\nhtml[data-theme=\"light\"] .route-panel .panel-head {\n background: rgba(0, 0, 0, 0.02);\n}\n\n.route-panel .dots { display: flex; gap: 6px; }\n.route-panel .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--navy-600); display: block; transition: background .3s; }\n.route-panel .dots i:nth-child(3) { background: var(--gold-500); }\n.route-map { position: relative; aspect-ratio: 4 / 3.2; background:\n radial-gradient(circle at 30% 30%, rgba(47,111,208,0.12), transparent 60%); transition: background .3s; }\nhtml[data-theme=\"light\"] .route-map { background: radial-gradient(circle at 30% 30%, rgba(37, 99, 212, 0.06), transparent 60%); }\n\n.route-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }\n.panel-foot {\n display: flex; gap: 0; border-top: 1px solid var(--line);\n font-family: var(--mono); font-size: 11.5px;\n}\n.panel-foot div { flex: 1; padding: 12px 14px; border-right: 1px solid var(--line); }\n.panel-foot div:last-child { border-right: none; }\n.panel-foot span { display: block; color: var(--slate-400); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 4px; }\n.panel-foot b { color: var(--gold-400); font-size: 16px; font-weight: 600; }\n\n/* route line animation */\n.route-line { fill: none; stroke: var(--gold-500); stroke-width: 2.5; stroke-linecap: round;\n stroke-dasharray: 8 10; animation: dash 3.4s linear infinite; filter: drop-shadow(0 0 6px rgba(227,179,65,0.5)); }\n.route-line-2 { fill: none; stroke: var(--blue-400); stroke-width: 2; stroke-dasharray: 5 8; opacity: 0.6; animation: dash 5s linear infinite reverse; }\n@keyframes dash { to { stroke-dashoffset: -360; } }\n.grid-street { stroke: rgba(125,180,242,0.16); stroke-width: 1; fill: none; transition: stroke .3s; }\nhtml[data-theme=\"light\"] .grid-street { stroke: rgba(0, 0, 0, 0.1); }\n\n.stop-node { fill: var(--navy-850); stroke: var(--gold-400); stroke-width: 2; transition: fill .3s; }\nhtml[data-theme=\"light\"] .stop-node { fill: #f0f0f0; }\n\n.stop-node.pulse { animation: pulse 2.6s ease-in-out infinite; }\n@keyframes pulse { 0%,100% { r: 5; opacity: 1; } 50% { r: 7.5; opacity: 0.65; } }\n.truck-dot { fill: var(--gold-400); filter: drop-shadow(0 0 8px var(--gold-400)); }\n\n/* =================================================================\n MARQUEE / TRUST\n ================================================================= */\n.trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 26px 0; }\n.trust-inner { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; justify-content: center; }\n.trust p { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--slate-400); }\n.trust .logos { display: flex; gap: 36px; flex-wrap: wrap; justify-content: center; }\n.trust .logos b { font-family: var(--display); font-size: 18px; font-weight: 600; color: var(--slate-300); opacity: 0.8; }\n\n/* =================================================================\n SECTION HEADINGS\n ================================================================= */\n.shead { max-width: 760px; margin-bottom: 56px; }\n.shead h2 { font-size: clamp(32px, 4.4vw, 56px); margin: 18px 0 0; line-height: 1.0; }\n.shead .lede { margin-top: 20px; }\n.shead.center { margin-left: auto; margin-right: auto; text-align: center; }\n.shead.center .eyebrow { justify-content: center; }\n.shead.center .lede { margin-left: auto; margin-right: auto; }\n\n/* =================================================================\n PROBLEM (editorial)\n ================================================================= */\n.problem { border-top: 1px solid var(--line); }\n.problem-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start; }\n.problem h2 { font-size: clamp(30px, 4vw, 50px); }\n.legacy-list { display: grid; gap: 2px; }\n.legacy-row {\n display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center;\n padding: 20px 0; border-bottom: 1px solid var(--line);\n}\n.legacy-row .old { color: var(--slate-400); }\n.legacy-row .old s { color: var(--slate-500); text-decoration-color: rgba(227,179,65,0.6); }\n.legacy-row .new { font-family: var(--mono); font-size: 13.5px; color: var(--gold-400); display: inline-flex; align-items: center; gap: 8px; }\n.legacy-row .new::before { content: \"→\"; color: var(--blue-400); }\n\n/* =================================================================\n MODULE GRID\n ================================================================= */\n.modules { background:\n linear-gradient(180deg, transparent, rgba(6,13,24,0.5) 50%, transparent); transition: background .3s; }\nhtml[data-theme=\"light\"] .modules { background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.02) 50%, transparent); }\n\n.mod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }\n.mod {\n background: var(--navy-850); padding: 30px 28px 34px;\n position: relative; transition: background .35s var(--ease);\n min-height: 220px; display: flex; flex-direction: column;\n}\n.mod:hover { background: var(--navy-800); }\n.mod::after { content: \"\"; position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--gold-500); transition: width .4s var(--ease); }\n.mod:hover::after { width: 100%; }\n.mod .ico { width: 42px; height: 42px; margin-bottom: 20px; color: var(--gold-400); }\n.mod .num { position: absolute; top: 24px; right: 26px; font-family: var(--mono); font-size: 12px; color: var(--slate-500); }\n.mod h3 { font-size: 21px; font-weight: 600; margin-bottom: 9px; }\n.mod p { font-size: 14.5px; color: var(--slate-300); line-height: 1.55; }\n.mod .tags { margin-top: auto; padding-top: 16px; display: flex; flex-wrap: wrap; gap: 6px; }\n.mod .tags span { font-family: var(--mono); font-size: 10.5px; color: var(--slate-400); letter-spacing: 0.05em; }\n.mod .tags span:not(:last-child)::after { content: \"·\"; margin-left: 6px; color: var(--slate-500); }\n\n/* =================================================================\n FEATURE DEEP DIVES (alternating)\n ================================================================= */\n.feature { border-top: 1px solid var(--line); }\n.feat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }\n.feat-grid.flip .feat-text { order: 2; }\n.feat-text h2 { font-size: clamp(28px, 3.6vw, 46px); margin: 16px 0 18px; }\n.feat-list { margin-top: 26px; display: grid; gap: 16px; }\n.feat-list li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }\n.feat-list .tick { width: 22px; height: 22px; flex: none; margin-top: 2px; color: var(--gold-400); }\n.feat-list b { font-weight: 600; color: var(--cream); }\n.feat-list span { color: var(--slate-300); font-size: 15px; }\n\n/* visual cards used in features */\n.viz {\n background: linear-gradient(160deg, var(--navy-800), var(--navy-850));\n border: 1px solid var(--line-strong); border-radius: 6px; overflow: hidden;\n box-shadow: 0 40px 90px -50px rgba(0,0,0,0.85);\n transition: background .3s, border-color .3s, box-shadow .3s;\n}\nhtml[data-theme=\"light\"] .viz {\n background: linear-gradient(160deg, #ffffff, #f9f9f9);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n}\n\n.viz-head { padding: 12px 16px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 12px; color: var(--slate-300); display: flex; justify-content: space-between; align-items: center; }\n.viz-head .live { display: inline-flex; align-items: center; gap: 7px; color: var(--gold-400); }\n.viz-head .live i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-400); box-shadow: 0 0 0 0 rgba(227,179,65,0.6); animation: blip 2s infinite; }\n@keyframes blip { 0% { box-shadow: 0 0 0 0 rgba(227,179,65,0.6); } 70% { box-shadow: 0 0 0 9px rgba(227,179,65,0); } 100% { box-shadow: 0 0 0 0 rgba(227,179,65,0); } }\n\n/* invoice mock */\n.invoice { padding: 22px; font-family: var(--mono); font-size: 13px; }\n.invoice .inv-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }\n.invoice .inv-id { color: var(--gold-400); font-size: 15px; }\n.invoice .inv-status { font-size: 11px; padding: 4px 9px; border-radius: 2px; background: rgba(74,140,232,0.14); color: var(--blue-300); box-shadow: inset 0 0 0 1px var(--line-strong); }\n.invoice .line { display: grid; grid-template-columns: 1fr auto; padding: 9px 0; border-bottom: 1px dashed var(--line); color: var(--slate-300); }\n.invoice .line.tot { border-bottom: none; border-top: 2px solid var(--gold-500); margin-top: 6px; padding-top: 14px; color: var(--cream); font-weight: 600; }\n.invoice .line.tot b { color: var(--gold-400); font-size: 18px; }\n.invoice .line small { color: var(--slate-500); font-size: 11px; display: block; }\n\n/* tablet mock */\n.tablet { padding: 18px; }\n.tablet .stop {\n display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;\n padding: 13px 14px; border-radius: 4px; margin-bottom: 8px;\n background: var(--navy-800); box-shadow: inset 0 0 0 1px var(--line);\n transition: background .3s;\n}\nhtml[data-theme=\"light\"] .tablet .stop {\n background: #f0f0f0;\n}\n\n.tablet .stop .seq { font-family: var(--mono); font-size: 13px; font-weight: 600; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 3px; background: rgba(227,179,65,0.14); color: var(--gold-400); box-shadow: inset 0 0 0 1px rgba(227,179,65,0.3); }\n.tablet .stop .addr { font-size: 13.5px; }\n.tablet .stop .addr small { display: block; font-family: var(--mono); font-size: 11px; color: var(--slate-400); }\n.tablet .stop .pin { width: 9px; height: 9px; border-radius: 50%; }\n.tablet .stop.done { opacity: 0.55; }\n.tablet .stop.done .seq { background: rgba(74,140,232,0.14); color: var(--blue-300); box-shadow: inset 0 0 0 1px var(--line-strong); }\n.pin.green { background: #5cc98c; } .pin.gold { background: var(--gold-400); } .pin.red { background: #e07a6a; } .pin.blue { background: var(--blue-400); }\n\n/* =================================================================\n STATS BAND\n ================================================================= */\n.stats { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(6,13,24,0.5); transition: background .3s; }\nhtml[data-theme=\"light\"] .stats { background: rgba(0, 0, 0, 0.02); }\n\n.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }\n.stat { padding: 16px 26px; border-right: 1px solid var(--line); }\n.stat:last-child { border-right: none; }\n.stat .n { font-family: var(--display); font-size: clamp(38px, 4.6vw, 58px); font-weight: 700; color: var(--gold-400); line-height: 1; letter-spacing: -0.03em; }\n.stat .n small { font-size: 0.5em; color: var(--blue-300); }\n.stat .l { font-family: var(--mono); font-size: 12px; color: var(--slate-300); margin-top: 12px; letter-spacing: 0.04em; }\n\n/* =================================================================\n AUDIENCE / SOLUTIONS\n ================================================================= */\n.aud-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }\n.aud-card {\n position: relative; padding: 38px 36px 36px; border-radius: 6px; overflow: hidden;\n background: linear-gradient(165deg, var(--navy-800), var(--navy-850));\n border: 1px solid var(--line-strong);\n transition: transform .4s var(--ease), border-color .4s, background .3s;\n}\nhtml[data-theme=\"light\"] .aud-card {\n background: linear-gradient(165deg, #ffffff, #f9f9f9);\n}\n\n.aud-card:hover { transform: translateY(-4px); border-color: var(--blue-400); }\n.aud-card .tag { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; color: var(--gold-400); text-transform: uppercase; }\n.aud-card h3 { font-size: 27px; margin: 14px 0 12px; }\n.aud-card p { color: var(--slate-300); font-size: 15px; }\n.aud-card ul { margin-top: 22px; display: grid; gap: 11px; }\n.aud-card li { display: flex; gap: 10px; align-items: center; font-size: 14.5px; color: var(--slate-100); }\n.aud-card li::before { content: \"▸\"; color: var(--blue-400); font-size: 12px; }\n.aud-card .glow { position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(227,179,65,0.18), transparent 70%); pointer-events: none; }\n\n/* =================================================================\n INTEGRATIONS\n ================================================================= */\n.integ { border-top: 1px solid var(--line); }\n.integ-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }\n.integ-cell { background: var(--navy-850); padding: 26px 22px; transition: background .3s; }\n.integ-cell:hover { background: var(--navy-800); }\n.integ-cell .k { font-family: var(--mono); font-size: 11px; color: var(--gold-500); letter-spacing: 0.08em; text-transform: uppercase; }\n.integ-cell h4 { font-family: var(--display); font-size: 17px; font-weight: 600; margin: 10px 0 6px; }\n.integ-cell p { font-size: 13px; color: var(--slate-400); }\n\n/* =================================================================\n QUOTE\n ================================================================= */\n.quote { border-top: 1px solid var(--line); }\n.quote-inner { max-width: 920px; margin: 0 auto; text-align: center; }\n.quote blockquote { font-family: var(--display); font-size: clamp(26px, 3.4vw, 42px); font-weight: 500; line-height: 1.18; letter-spacing: -0.02em; }\n.quote blockquote .gold { font-style: italic; }\n.quote .by { margin-top: 30px; font-family: var(--mono); font-size: 13px; color: var(--slate-300); letter-spacing: 0.04em; }\n.quote .by b { color: var(--gold-400); }\n\n/* =================================================================\n CTA\n ================================================================= */\n.cta { position: relative; overflow: hidden; }\n.cta-box {\n position: relative;\n background: linear-gradient(150deg, var(--navy-750), var(--navy-850));\n border: 1px solid var(--line-strong); border-radius: 10px;\n padding: clamp(44px, 6vw, 80px); text-align: center;\n box-shadow: 0 50px 120px -60px rgba(0,0,0,0.9);\n transition: background .3s, border-color .3s, box-shadow .3s;\n}\nhtml[data-theme=\"light\"] .cta-box {\n background: linear-gradient(150deg, #ffffff, #f9f9f9);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n}\n\n.cta-box::before { content: \"\"; position: absolute; inset: 0; background:\n radial-gradient(600px 300px at 50% 0%, rgba(227,179,65,0.16), transparent 65%); pointer-events: none; }\n.cta-box h2 { font-size: clamp(32px, 5vw, 60px); position: relative; }\n.cta-box .lede { margin: 20px auto 34px; text-align: center; }\n.cta-box .hero-cta { justify-content: center; }\n\n/* =================================================================\n FOOTER\n ================================================================= */\nfooter.site {\n border-top: 1px solid var(--line-strong);\n background: var(--navy-950);\n padding: 72px 0 36px;\n transition: background .3s;\n}\nhtml[data-theme=\"light\"] footer.site {\n background: #f5f5f5;\n}\n\n.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 36px; }\n.foot-brand .brand { margin-bottom: 18px; }\n.foot-brand p { color: var(--slate-400); font-size: 14px; max-width: 30ch; }\n.foot-col h5 { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-500); margin-bottom: 18px; }\n.foot-col a { display: block; color: var(--slate-300); font-size: 14px; padding: 6px 0; transition: color .2s; }\n.foot-col a:hover { color: var(--gold-400); }\n.foot-bottom { margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; align-items: center; }\n.foot-bottom p { font-family: var(--mono); font-size: 12px; color: var(--slate-500); letter-spacing: 0.03em; }\n.foot-bottom .route-code { color: var(--gold-500); }\n\n/* =================================================================\n PAGE HERO (sub pages)\n ================================================================= */\n.page-hero { padding: clamp(56px, 8vw, 100px) 0 clamp(40px, 6vw, 70px); border-bottom: 1px solid var(--line); position: relative; }\n.page-hero h1 { font-size: clamp(40px, 6vw, 76px); font-weight: 700; }\n.page-hero .lede { margin-top: 22px; }\n.breadcrumb { font-family: var(--mono); font-size: 12px; color: var(--slate-400); letter-spacing: 0.05em; margin-bottom: 22px; }\n.breadcrumb a:hover { color: var(--gold-400); }\n.breadcrumb span { color: var(--gold-500); }\n\n/* =================================================================\n PRICING\n ================================================================= */\n.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }\n.price-card {\n display: flex; flex-direction: column;\n background: linear-gradient(165deg, var(--navy-800), var(--navy-850));\n border: 1px solid var(--line-strong); border-radius: 8px; padding: 34px 30px;\n position: relative; transition: transform .35s var(--ease), border-color .35s, background .3s;\n}\nhtml[data-theme=\"light\"] .price-card {\n background: linear-gradient(165deg, #ffffff, #f9f9f9);\n}\n\n.price-card:hover { transform: translateY(-4px); }\n.price-card.featured { border-color: var(--gold-500); box-shadow: 0 0 0 1px var(--gold-500), 0 40px 90px -50px rgba(227,179,65,0.4); }\n.price-card .badge { position: absolute; top: -12px; left: 30px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; background: var(--gold-500); color: var(--navy-950); padding: 5px 12px; border-radius: 2px; font-weight: 600; }\n.price-card .tier { font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-400); }\n.price-card .price { font-family: var(--display); font-size: 52px; font-weight: 700; margin: 16px 0 4px; line-height: 1; }\n.price-card .price small { font-family: var(--mono); font-size: 14px; color: var(--slate-400); font-weight: 400; }\n.price-card .desc { color: var(--slate-300); font-size: 14px; margin-bottom: 24px; min-height: 42px; }\n.price-card ul { display: grid; gap: 12px; margin-bottom: 28px; }\n.price-card li { display: grid; grid-template-columns: auto 1fr; gap: 11px; font-size: 14px; color: var(--slate-100); }\n.price-card li .tick { color: var(--gold-400); width: 18px; }\n.price-card .btn { margin-top: auto; justify-content: center; }\n\n/* =================================================================\n FAQ\n ================================================================= */\n.faq-grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; max-width: 880px; margin: 0 auto; }\n.faq { background: var(--navy-850); transition: background .3s; }\nhtml[data-theme=\"light\"] .faq { background: #f9f9f9; }\n\n.faq summary { padding: 24px 26px; font-family: var(--display); font-size: 19px; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; transition: color .2s; }\n.faq summary::-webkit-details-marker { display: none; }\n.faq summary:hover { color: var(--gold-400); }\n.faq summary .pl { font-family: var(--mono); color: var(--gold-500); transition: transform .3s; flex: none; }\n.faq[open] summary .pl { transform: rotate(45deg); }\n.faq .ans { padding: 0 26px 26px; color: var(--slate-300); font-size: 15px; max-width: 70ch; }\n\n/* =================================================================\n CONTACT FORM\n ================================================================= */\n.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }\n.field { margin-bottom: 20px; }\n.field label { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate-300); margin-bottom: 8px; }\n.field input, .field select, .field textarea {\n width: 100%; background: var(--navy-850); color: var(--cream);\n border: 1px solid var(--line-strong); border-radius: 3px; padding: 13px 15px;\n font-family: var(--sans); font-size: 15px; transition: border-color .2s, box-shadow .2s, background .2s, color .2s;\n}\nhtml[data-theme=\"light\"] .field input,\nhtml[data-theme=\"light\"] .field select,\nhtml[data-theme=\"light\"] .field textarea {\n background: #ffffff;\n color: #2a2a2a;\n border-color: rgba(0, 0, 0, 0.12);\n}\n\n.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(227,179,65,0.14); }\n.field textarea { resize: vertical; min-height: 120px; }\n.contact-side { background: linear-gradient(165deg, var(--navy-800), var(--navy-850)); border: 1px solid var(--line-strong); border-radius: 8px; padding: 34px; transition: background .3s; }\nhtml[data-theme=\"light\"] .contact-side {\n background: linear-gradient(165deg, #ffffff, #f9f9f9);\n}\n\n.contact-side h3 { font-size: 24px; margin-bottom: 18px; }\n.contact-side .ci { display: flex; gap: 13px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: flex-start; }\n.contact-side .ci:last-child { border-bottom: none; }\n.contact-side .ci .ico { color: var(--gold-400); width: 22px; flex: none; margin-top: 2px; }\n.contact-side .ci b { display: block; font-size: 15px; }\n.contact-side .ci span { font-family: var(--mono); font-size: 13px; color: var(--slate-300); }\n\n/* =================================================================\n GENERIC CONTENT\n ================================================================= */\n.split-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }\n.split-list .item { background: var(--navy-850); padding: 28px; transition: background .3s; }\nhtml[data-theme=\"light\"] .split-list .item { background: #f9f9f9; }\n\n.split-list .item:hover { background: var(--navy-800); }\nhtml[data-theme=\"light\"] .split-list .item:hover { background: #f0f0f0; }\n\n.split-list .item .k { font-family: var(--mono); font-size: 12px; color: var(--gold-500); }\n.split-list .item h4 { font-size: 19px; margin: 10px 0 8px; }\n.split-list .item p { color: var(--slate-300); font-size: 14.5px; }\n\nhtml.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }\nhtml.js .reveal.in { opacity: 1; transform: none; }\n@media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; transform: none; transition: none; } }\n\n/* =================================================================\n RESPONSIVE\n ================================================================= */\n@media (max-width: 1000px) {\n .hero-grid, .problem-grid, .feat-grid, .form-grid { grid-template-columns: 1fr; gap: 40px; }\n .feat-grid.flip .feat-text { order: 0; }\n .mod-grid, .integ-grid { grid-template-columns: repeat(2, 1fr); }\n .stats-grid { grid-template-columns: repeat(2, 1fr); }\n .stat { border-bottom: 1px solid var(--line); }\n .price-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }\n .aud-grid { grid-template-columns: 1fr; }\n .foot-grid { grid-template-columns: 1fr 1fr; gap: 30px; }\n .foot-brand { grid-column: 1 / -1; }\n}\n@media (max-width: 720px) {\n body { font-size: 16px; }\n .nav-links, .nav-actions .login, .nav-actions .btn-gold { display: none; }\n .burger { display: flex; }\n .mod-grid, .integ-grid, .split-list, .stats-grid { grid-template-columns: 1fr; }\n .stat { padding: 22px; }\n .route-panel { margin-top: 8px; }\n .foot-grid { grid-template-columns: 1fr; }\n .wrap { padding: 0 20px; }\n .nav-mobile.open { display: flex; }\n}\n\n/* mobile menu */\n.nav-mobile { display: none; flex-direction: column; gap: 4px; padding: 16px 20px 24px; border-top: 1px solid var(--line); background: var(--navy-900); transition: background .3s; }\nhtml[data-theme=\"light\"] .nav-mobile { background: #ffffff; }\n\n.nav-mobile a { padding: 12px 0; font-size: 16px; border-bottom: 1px solid var(--line); color: var(--slate-100); }\n.nav-mobile .btn { margin-top: 14px; justify-content: center; }\n" }