/* ==== tokens.css ==== */
/* ============================================================
Design tokens — Spectrum Retailer V2 ("daylight editorial")
Palette: off-white page #F6F8FB, navy ink #0B1B30,
Spectrum blue #0061FF / deep #003A99, warm marker #FFB01F.
Gradient: 135deg #0061FF → #00B5FF (no green).
Type: Space Grotesk (display) + Manrope (body).
============================================================ */
/* ---- Self-hosted fonts. fonts.gstatic.com drops connections on some
networks (ERR_CONNECTION_CLOSED), which collapsed the typography to
system fallbacks. No third-party font requests anymore. ---- */
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/space-grotesk-400.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/space-grotesk-500.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/space-grotesk-600.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/space-grotesk-700.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/manrope-400.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/manrope-500.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/manrope-600.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/manrope-700.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/manrope-800.woff2") format("woff2"); }
:root {
/* Brand */
--blue: #0061ff;
--blue-dark: #003A99;
--blue-bright:#2e8cff;
--cyan: #00b5ff;
--green: #0ac34f; /* kept for success/tick use only */
--navy: #0B1B30;
--navy-800: #112540;
--navy-900: #091729;
--navy-950: #060f1d;
--marker: #FFB01F; /* warm highlight — decorative only, never on prices */
--grad: linear-gradient(135deg, #0061ff 0%, #00b5ff 100%);
--grad-soft: linear-gradient(135deg, rgba(0,97,255,.10) 0%, rgba(0,181,255,.07) 100%);
/* Light surface system */
--bg: #F6F8FB;
--fg: #0B1B30;
--card: #ffffff;
--muted: #edf1f7;
--muted-2: #e2e9f2;
--muted-fg: #4a5e78;
--border: #E2E9F2;
--sky: #ddeeff;
/* Dark surface system — footer + one accent band only */
--dk-bg: #060f1d;
--dk-card: rgba(255,255,255,.06);
--dk-border: rgba(255,255,255,.13);
--dk-fg: #e8f0fa;
--dk-muted: #8fa5be;
/* Effects */
--radius-sm: 10px;
--radius: 22px; /* cards */
--radius-lg: 22px; /* cards (synonym kept for compat) */
--radius-pill: 999px;
--shadow-sm: 0 2px 12px rgba(11,27,48,.06);
--shadow: 0 16px 40px rgba(11,27,48,.10);
--shadow-blue: 0 14px 36px rgba(0,97,255,.26);
--shadow-blue-strong: 0 18px 46px rgba(0,97,255,.42);
--ring: 0 0 0 4px rgba(0,181,255,.30);
/* Layout */
--container: 1200px;
--gutter: clamp(16px, 4vw, 32px);
--nav-h: 76px;
--offer-h: 36px;
/* Type */
--font-display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
--font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
/* Motion */
--ease-out: cubic-bezier(.22, 1, .36, 1);
--t-fast: .18s;
--t: .3s;
}
/* ==== base.css ==== */
/* ============================================================
Base — reset, typography, buttons, shared atoms (V2 light)
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font);
font-size: 17px;
line-height: 1.6;
color: var(--fg);
background: var(--bg);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-dark); }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, h4 {
margin: 0 0 .5em; line-height: 1.1; font-weight: 800; letter-spacing: -0.025em;
color: inherit; font-family: var(--font-display);
}
p { margin: 0 0 1em; }
.net-container { max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.net-h1 { font-size: clamp(2.4rem, 5.6vw, 4.2rem); font-family: var(--font-display); }
.net-h2 { font-size: clamp(1.85rem, 3.6vw, 2.7rem); color: var(--navy); font-family: var(--font-display); }
.net-h3 { font-size: 1.25rem; font-family: var(--font-display); }
.net-lede { font-size: clamp(1.02rem, 1.5vw, 1.18rem); color: var(--muted-fg); max-width: 640px; margin-left: auto; margin-right: auto; }
/* Numbered editorial eyebrow — e.g. 01 Plans
*/
.net-eyebrow {
display: inline-flex; align-items: center; gap: 10px;
font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-variant: small-caps;
color: var(--muted-fg); margin: 0 0 14px;
}
.net-eyebrow__num {
font-family: var(--font-display); font-size: 1.05rem; font-weight: 800;
color: var(--blue); letter-spacing: -.02em; text-transform: none; font-variant: normal;
padding-right: .35em;
/* slash divider */
border-right: 1.5px solid var(--border);
margin-right: 2px;
}
/* Legacy eyebrow without num (keeps the gradient bar) */
.net-eyebrow:not(:has(.net-eyebrow__num))::before {
content: ""; width: 22px; height: 3px; border-radius: 2px;
background: var(--grad); flex-shrink: 0;
}
.net-eyebrow--light { color: var(--cyan); }
.net-grad-text {
background: var(--grad);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
/* ---- Buttons ---- */
.net-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
padding: 14px 26px; border: 0; border-radius: 14px; /* V2: squared radius 14 */
font-family: var(--font); font-size: 1rem; font-weight: 700; line-height: 1; white-space: nowrap;
transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t) var(--ease-out),
background-color var(--t-fast), color var(--t-fast);
position: relative; overflow: hidden;
}
.net-btn:active { transform: scale(.97); }
/* Primary: solid blue — darken + lift on hover.
NOTE: button labels are bare text nodes, so a sliding ::before overlay
(the old approach) painted ABOVE the text and hid it. We change the
button's OWN background instead — the label always stays on top. */
.net-btn--blue {
background-color: var(--blue); color: #fff; box-shadow: var(--shadow-blue);
}
.net-btn--blue:hover {
background-color: var(--blue-dark); color: #fff;
transform: translateY(-2px); box-shadow: var(--shadow-blue-strong);
}
/* Gradient button — DEEPEN the gradient on hover by sliding an oversized
gradient's position (no covering overlay → stays a gradient AND the white
label is never hidden). Default window = blue→cyan (brand); hover window =
deep-blue→blue. */
.net-btn--gradient {
background-image: linear-gradient(120deg, var(--blue-dark) 0%, var(--blue) 50%, var(--cyan) 100%);
background-size: 200% 100%;
background-position: 100% 50%;
color: #fff; box-shadow: var(--shadow-blue);
/* own transition (no `transform` so GSAP-magnetic buttons stay snappy) */
transition: background-position .5s var(--ease-out),
box-shadow var(--t) var(--ease-out), color var(--t-fast);
}
.net-btn--gradient:hover {
background-position: 0% 50%; color: #fff;
transform: translateY(-2px); box-shadow: var(--shadow-blue-strong);
}
/* Secondary: 2px outline navy */
.net-btn--dark {
background: transparent; color: var(--navy);
box-shadow: inset 0 0 0 2px var(--navy);
}
.net-btn--dark:hover { background: var(--navy); color: #fff; transform: translateY(-2px); }
.net-btn--ghost { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 2px var(--border); }
.net-btn--ghost:hover { box-shadow: inset 0 0 0 2px var(--blue); color: var(--blue); }
.net-btn--ghostlight { background: rgba(255,255,255,.08); color: #fff; box-shadow: inset 0 0 0 1.5px var(--dk-border); }
.net-btn--ghostlight:hover { background: rgba(255,255,255,.16); color: #fff; }
.net-btn--block { width: 100%; }
.net-btn--lg { padding: 16px 32px; font-size: 1.05rem; }
.net-btn--xl { padding: 20px 44px; font-size: 1.18rem; border-radius: 14px; }
/* Pulsing ring for the final CTA — retained from V1 */
.net-btn__pulse {
position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
box-shadow: 0 0 0 0 rgba(0, 181, 255, .55);
animation: netPulse 2.6s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes netPulse {
0% { box-shadow: 0 0 0 0 rgba(0, 181, 255, .55); }
70% { box-shadow: 0 0 0 22px rgba(0, 181, 255, 0); }
100% { box-shadow: 0 0 0 0 rgba(0, 181, 255, 0); }
}
/* ---- Section scaffolding ---- */
.net-section { padding: clamp(64px, 9vw, 110px) 0; position: relative; }
.net-section--muted { background: var(--muted); }
.net-section--dark { background: var(--dk-bg); color: var(--dk-fg); }
.net-section--dark .net-h2 { color: #fff; }
.net-section--dark .net-lede { color: var(--dk-muted); }
.net-section__head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 56px); }
.net-section__head.is-center { margin-left: auto; margin-right: auto; text-align: center; }
/* ---- Scroll progress ---- */
.net-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1200; pointer-events: none; }
.net-progress span { display: block; height: 100%; background: var(--grad); transform: scaleX(0); transform-origin: 0 50%; }
/* ---- Fine print + mandatory disclaimers ---- */
.net-fine { font-size: .8rem; color: var(--muted-fg); line-height: 1.55; }
.net-required-note { font-size: 1.02rem; font-weight: 700; color: var(--navy); }
/* Required note stays legible on any dark surface */
.net-section--dark .net-required-note,
.net-phero .net-required-note,
.net-hero .net-required-note,
.net-band .net-required-note { color: #dce9ff; }
.net-disclaimers { border-top: 1px solid var(--border); margin-top: 38px; padding-top: 26px; }
.net-disclaimers__title { font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-fg); margin-bottom: 14px; }
.net-disclaimers__item { font-size: .76rem; line-height: 1.6; color: var(--muted-fg); margin-bottom: 10px; }
/* On dark footer the disclaimers stay legible */
.net-footer .net-disclaimers { border-top-color: rgba(255,255,255,.10); }
.net-footer .net-disclaimers__title { color: #b9c9dc; }
.net-footer .net-disclaimers__item { color: #93a7bd; }
/* ---- Cookie consent — light identity ---- */
.net-consent {
position: fixed; right: 18px; bottom: 18px; z-index: 1300; max-width: 420px;
opacity: 0; transform: translateY(16px);
transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.net-consent.is-in { opacity: 1; transform: none; }
.net-consent__card {
background: var(--card); border: 1.5px solid var(--border);
border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px;
}
.net-consent__card::before {
content: ""; display: block; height: 4px; border-radius: 3px;
background: var(--grad); margin-bottom: 14px;
}
.net-consent__title { font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 6px; color: var(--navy); font-weight: 800; }
.net-consent__txt { font-size: .86rem; color: var(--muted-fg); margin-bottom: 14px; line-height: 1.55; }
.net-consent__row { display: flex; gap: 10px; flex-wrap: wrap; }
.net-consent__row .net-btn { padding: 11px 20px; font-size: .9rem; border-radius: 10px; }
/* Override ghostlight for light consent card */
.net-consent__row .net-btn--ghostlight {
color: var(--navy); background: var(--muted);
box-shadow: inset 0 0 0 1.5px var(--border);
}
.net-consent__row .net-btn--ghostlight:hover {
color: var(--blue); background: var(--bg);
box-shadow: inset 0 0 0 1.5px var(--blue);
}
/* ---- Mobile sticky phone bar — solid blue ---- */
.net-phonebar {
position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 1100;
display: flex; align-items: center; justify-content: center; gap: 10px;
background: var(--blue); color: #fff; font-weight: 700; font-size: 1rem;
padding: 15px 18px calc(15px + env(safe-area-inset-bottom, 0px)); border-radius: 14px;
box-shadow: var(--shadow-blue);
transform: translateY(130%); transition: transform .4s var(--ease-out);
}
.net-phonebar.is-on { transform: none; animation: netBarPulse 8s ease-in-out infinite 2s; }
.net-phonebar svg { width: 19px; height: 19px; }
.net-phonebar:hover { color: #fff; }
@keyframes netBarPulse { 0%, 94%, 100% { transform: scale(1); } 97% { transform: scale(1.02); } }
@media (min-width: 1024px) { .net-phonebar { display: none; } }
/* ==== animations.css ==== */
/* ============================================================
Animations — shared motion utilities (V2)
(.net-reveal initial state lives in the critical inline CSS,
gated on html.net-js so no-JS visitors always see content.)
============================================================ */
/* Revealed state — permanent resting state after any entrance */
.net-reveal.is-in { opacity: 1; transform: none; }
.net-split.is-done .net-split__w { transform: none; }
/* No-JS safety: ensure resting .is-in covers data-rv elements too */
html.net-js .net-reveal[data-rv]:not(.is-in) { opacity: 0; }
/* Split-text heading masks */
.net-split .net-split__m { display: inline-block; overflow: hidden; vertical-align: bottom; }
.net-split .net-split__w { display: inline-block; will-change: transform; }
/* V2 marker highlight: warm sweep underline instead of gradient text */
.net-split .net-split__w.is-hl {
position: relative;
/* ensure text itself stays ink-colored (override any inherited grad-text) */
-webkit-text-fill-color: inherit;
color: inherit;
background: none;
-webkit-background-clip: initial;
background-clip: initial;
}
.net-split .net-split__w.is-hl::after {
content: "";
position: absolute;
left: 0; right: 0;
bottom: 0.08em;
height: 0.42em;
background: var(--marker);
opacity: .45;
z-index: -1;
transform: scaleX(0);
transform-origin: left center;
transition: none; /* no transition until heading is done */
border-radius: 2px;
}
/* Sweep in once heading is complete */
.net-split.is-done .net-split__w.is-hl::after {
transform: scaleX(1);
transition: transform .5s .15s var(--ease-out);
}
.net-split.is-done .net-split__w { will-change: auto; }
/* Hover lift for cards */
.net-lift { transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out); }
.net-lift:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
/* Cursor-glow cards: radial highlight follows --mx/--my (set in JS) */
[data-glow] { position: relative; }
[data-glow]::before {
content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(0,97,255,.09), transparent 70%);
opacity: 0; transition: opacity .35s ease; z-index: 0;
}
[data-glow]:hover::before { opacity: 1; }
[data-glow] > * { position: relative; z-index: 1; }
/* Gradient-border card */
.net-gborder { position: relative; background: var(--card); border-radius: var(--radius-lg); }
.net-gborder::after {
content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
background: var(--grad);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
opacity: .45; transition: opacity var(--t);
pointer-events: none;
}
.net-gborder:hover::after { opacity: 1; }
/* Marquee (track duplicated in markup) */
.net-marquee { overflow: hidden; position: relative; }
.net-marquee::before, .net-marquee::after {
content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none;
}
.net-marquee::before { left: 0; background: linear-gradient(90deg, var(--mq-fade, var(--bg)), transparent); }
.net-marquee::after { right: 0; background: linear-gradient(-90deg, var(--mq-fade, var(--bg)), transparent); }
.net-marquee__track {
display: flex; align-items: center; gap: 48px; width: max-content;
animation: netMarquee var(--mq-dur, 36s) linear infinite;
padding-right: 48px;
}
.net-marquee.is-paused .net-marquee__track { animation-play-state: paused; }
.net-marquee:hover .net-marquee__track { animation-play-state: paused; }
@keyframes netMarquee { to { transform: translateX(-50%); } }
/* Floating chips */
.net-float { animation: netFloat 7s ease-in-out infinite; }
.net-float.f2 { animation-duration: 8.5s; animation-delay: .8s; }
.net-float.f3 { animation-duration: 9.5s; animation-delay: 1.6s; }
@keyframes netFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
/* Slow aurora drift (retained for legacy use in dark sections) */
@keyframes netAurora {
0%, 100% { transform: translate3d(-4%, -2%, 0) scale(1); }
50% { transform: translate3d(4%, 3%, 0) scale(1.08); }
}
/* Scanning beam sweep */
@keyframes netBeam { 0% { transform: translateX(-130%) skewX(-14deg); } 100% { transform: translateX(330%) skewX(-14deg); } }
/* Gentle dash draw for connector lines */
@keyframes netDash { to { stroke-dashoffset: 0; } }
/* Grid dots — used only on dark sections */
.net-griddots {
position: absolute; inset: 0; pointer-events: none; opacity: .5;
background-image: radial-gradient(rgba(120, 170, 255, .14) 1px, transparent 1.4px);
background-size: 28px 28px;
-webkit-mask-image: radial-gradient(75% 70% at 50% 35%, #000, transparent);
mask-image: radial-gradient(75% 70% at 50% 35%, #000, transparent);
}
/* ==== nav.css ==== */
/* ============================================================
Navbar — V2 light: white/96 frosted glass always; ink links;
blue active underline; offer bar = slim navy strip.
Logo is a white webp on a navy chip so it stays legible.
============================================================ */
.net-nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
background: rgba(255,255,255,.96);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--border);
transition: box-shadow var(--t) ease;
}
.net-nav.is-scrolled { box-shadow: 0 6px 24px rgba(11,27,48,.08); }
/* Offer bar — slim navy strip */
.net-nav__offer {
height: var(--offer-h);
display: flex; align-items: center; justify-content: center;
background: var(--navy); color: var(--dk-fg);
font-size: .8rem; padding: 0 12px;
text-align: center; overflow: hidden;
}
.net-nav__offer p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.net-nav__offer a { color: var(--cyan); text-decoration: underline; font-weight: 700; }
.net-nav__offer-short { display: none; }
@media (max-width: 767px) {
.net-nav__offer-long { display: none; }
.net-nav__offer-short { display: inline; }
}
.net-nav__inner {
height: var(--nav-h);
display: flex; align-items: center; gap: 28px;
max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter);
}
/* Logo lockup: navy chip so the white webp stays legible on white nav */
.net-nav__brand {
display: inline-flex; align-items: center; flex-shrink: 0;
background: var(--navy); padding: 8px 12px; border-radius: 12px;
transition: opacity var(--t-fast);
}
.net-nav__brand:hover { opacity: .88; }
.net-nav__brand img { width: 190px; height: auto; display: block; }
/* Nav links — ink colored */
.net-nav__links {
display: flex; align-items: center; gap: 4px;
list-style: none; margin: 0 0 0 auto; padding: 0;
}
.net-nav__link {
display: inline-block; padding: 9px 14px; border-radius: var(--radius-pill);
color: var(--fg); font-size: .95rem; font-weight: 600; position: relative;
transition: color var(--t-fast), background var(--t-fast);
}
.net-nav__link::after {
content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px;
background: var(--blue); border-radius: 2px;
transform: scaleX(0); transform-origin: 0 50%;
transition: transform .3s var(--ease-out);
}
.net-nav__link:hover { color: var(--blue); background: var(--sky); }
.net-nav__link:hover::after, .net-nav__link.is-active::after { transform: scaleX(1); }
.net-nav__link.is-active { color: var(--blue); }
/* Call button */
.net-nav__call {
display: inline-flex; align-items: center; gap: 9px;
background: var(--blue); color: #fff; font-weight: 700; font-size: .95rem;
padding: 11px 20px; border-radius: 14px; box-shadow: var(--shadow-blue);
transition: background var(--t-fast), transform var(--t-fast);
}
.net-nav__call:hover { background: var(--blue-dark); color: #fff; transform: translateY(-1px); }
.net-nav__call svg { width: 17px; height: 17px; }
/* Mobile icon call button */
.net-nav__mcall {
display: none; width: 44px; height: 44px; border-radius: 50%;
background: var(--blue); color: #fff;
align-items: center; justify-content: center;
box-shadow: var(--shadow-blue);
}
.net-nav__mcall svg { width: 19px; height: 19px; }
.net-nav__mcall:hover { color: #fff; background: var(--blue-dark); }
/* Hamburger toggle — ink bars on light nav */
.net-nav__toggle {
display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 10px;
}
.net-nav__toggle span {
width: 24px; height: 2.5px; border-radius: 2px;
background: var(--fg);
transition: transform var(--t), opacity var(--t);
}
.net-nav.is-open .net-nav__toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.net-nav.is-open .net-nav__toggle span:nth-child(2) { opacity: 0; }
.net-nav.is-open .net-nav__toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
/* Drawer — light panel */
.net-nav__drawer {
background: var(--card); border-top: 1px solid var(--border);
padding: 14px var(--gutter) 22px;
display: flex; flex-direction: column; gap: 2px;
}
/* [hidden] must always beat author display:flex */
.net-nav__drawer[hidden] { display: none !important; }
@media (min-width: 1024px) { .net-nav__drawer { display: none !important; } }
.net-nav__dlink { padding: 13px 10px; color: var(--fg); font-weight: 600; border-radius: 10px; }
.net-nav__dlink:hover, .net-nav__dlink.is-active {
background: var(--muted); color: var(--blue);
}
.net-nav__dcall {
margin-top: 12px; text-align: center;
background: var(--blue); color: #fff; font-weight: 700;
padding: 14px; border-radius: 14px; box-shadow: var(--shadow-blue);
}
.net-nav__dcall:hover { color: #fff; background: var(--blue-dark); }
@media (max-width: 1023px) {
.net-nav__links, .net-nav__call { display: none; }
.net-nav__mcall { display: inline-flex; margin-left: auto; }
.net-nav__toggle { display: inline-flex; }
.net-nav__brand img { width: 158px; }
}
/* ---- text brand badge (replaces image logo) ---- */
.net-nav__brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.net-footer__brandline{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.net-brandmark{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;flex:none;
background:var(--net-ink,#0B1B30);color:var(--net-marker,#FFB01F);
font:700 18px/1 "Space Grotesk",sans-serif;letter-spacing:-.02em}
.net-footer .net-brandmark{background:var(--net-marker,#FFB01F);color:var(--net-ink,#0B1B30)}
.net-brandword{display:flex;flex-direction:column;line-height:1.08;color:var(--net-ink,#0B1B30);
font:600 16px/1.1 "Space Grotesk",sans-serif;letter-spacing:-.01em;white-space:nowrap}
.net-brandword em{font:600 9px/1.4 "Manrope",sans-serif;font-style:normal;letter-spacing:.16em;
text-transform:uppercase;color:var(--net-muted,#5B6B7E)}
.net-footer .net-brandword{color:#fff}
.net-footer .net-brandword em{color:rgba(255,255,255,.62)}
/* ==== hero.css ==== */
/* ============================================================
Hero — V2 light editorial: off-white bg, drifting gradient
blob canvas, giant Space Grotesk heading, kinetic rotator,
SVG speed gauge, light ZIP panel, outline chips, light phero.
============================================================ */
/* ---- Main hero ---- */
.net-hero {
position: relative;
min-height: clamp(640px, 96vh, 880px);
display: flex; align-items: center;
background: var(--bg);
color: var(--fg);
overflow: hidden;
padding-top: calc(var(--nav-h) + var(--offer-h));
}
/* Gradient blob canvas mount (gauge.js attaches