/* ═══════════════════════════════════════════════════════════
   CRIMSON TECH — page components (loaded after style.css)
   Home sections · product sections · FAQ · two-pillar ·
   nav mega/mobile · MPA view transitions · reduced motion
═══════════════════════════════════════════════════════════ */

/* ── NAV MEGA + MOBILE ──────────────────────────────────────── */
.nav-dropdown-mega { min-width: 600px; }
#mobileNav .m-sec { padding-bottom:16px; border-bottom:1px solid var(--border); margin-bottom:24px; }
#mobileNav .m-title { font-family:var(--font-h); font-weight:700; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--text-faint); margin-bottom:12px; }
#mobileNav .m-link { display:block; font-size:15px; color:var(--text-muted); padding:9px 0; border-bottom:1px solid var(--border); }
#mobileNav .m-sec .m-link:last-child { border-bottom:none; }
#mobileNav .m-top { font-family:var(--font-h); font-weight:600; font-size:16px; }

/* ── HERO (two-pillar) ──────────────────────────────────────── */
.hero { min-height:100vh; background:var(--ink); display:flex; align-items:center; position:relative; overflow:hidden; padding-top:var(--nav-h); }
.hero-orb { position:absolute; border-radius:50%; pointer-events:none; }
.hero-orb-1 { width:600px; height:600px; background:radial-gradient(circle, rgba(190,30,69,.15) 0%, transparent 70%); top:-100px; right:-100px; }
.hero-orb-2 { width:500px; height:500px; background:radial-gradient(circle, rgba(38,59,144,.18) 0%, transparent 70%); bottom:-80px; left:-80px; }
.hero-dots { position:absolute; inset:0; background-image:radial-gradient(rgba(38,59,144,.05) 1px, transparent 1px); background-size:32px 32px; pointer-events:none; }
.hero-inner { position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; padding:80px 0 100px; }
.hero-eyebrow { display:inline-flex; align-items:center; gap:10px; background:rgba(190,30,69,.12); border:1px solid rgba(190,30,69,.25); border-radius:var(--r-full); padding:6px 16px; margin-bottom:28px; }
.hero-eyebrow-dot { width:7px; height:7px; background:var(--crimson); border-radius:50%; animation:liveP 1.8s ease-in-out infinite; }
.hero-eyebrow-text { font-family:var(--font-h); font-weight:600; font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--navy); }
.hero-h1 { margin-bottom:20px; }
.hero-h1 em { font-style:normal; color:var(--crimson); }
.hero-body { font-size:17px; color:var(--text-muted); line-height:1.8; max-width:480px; margin-bottom:32px; }
.hero-ctas { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:40px; }
.hero-proof { display:flex; align-items:center; gap:12px; font-size:13px; color:var(--text-faint); border-top:1px solid var(--border); padding-top:24px; flex-wrap:wrap; }
.hero-proof-badges { display:flex; gap:8px; flex-wrap:wrap; }
.hero-proof-badge { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-full); padding:4px 12px; font-size:11px; color:var(--text-muted); white-space:nowrap; }

/* Two-pillar cards inside hero visual */
.hero-pillars { display:flex; flex-direction:column; gap:16px; }
.pillar-card { background:var(--surface-2); border:1px solid var(--border-bright); border-radius:var(--r-lg); padding:24px; position:relative; overflow:hidden; box-shadow:var(--glow-card); transition:border-color .25s, transform .25s; }
.pillar-card:hover { border-color:var(--crimson); transform:translateY(-3px); }
.pillar-card::before { content:''; position:absolute; top:0; left:0; bottom:0; width:4px; background:var(--grad-primary); }
.pillar-eyebrow { font-family:var(--font-h); font-weight:700; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--crimson); margin-bottom:8px; }
.pillar-title { font-family:var(--font-h); font-weight:800; font-size:20px; color:var(--text-primary); margin-bottom:8px; }
.pillar-body { font-size:13px; color:var(--text-muted); line-height:1.7; margin-bottom:14px; }
.pillar-tags { display:flex; flex-wrap:wrap; gap:6px; }
.pillar-tag { font-family:var(--font-mono); font-size:11px; color:var(--text-faint); background:var(--surface-3); border:1px solid var(--border); border-radius:var(--r-full); padding:3px 10px; }

/* ── PAIN BAR ───────────────────────────────────────────────── */
.pain-bar { background:var(--surface-1); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:28px 0; }
.pain-bar-inner { display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.pain-item { padding:0 32px; border-right:1px solid var(--border); display:flex; align-items:flex-start; gap:12px; }
.pain-item:last-child { border-right:none; }
.pain-icon { font-size:20px; flex-shrink:0; margin-top:2px; }
.pain-text { font-size:14px; color:var(--text-muted); line-height:1.6; }
.pain-text strong { color:var(--crimson); font-weight:700; }

/* ── STATS ──────────────────────────────────────────────────── */
.stats-section { padding:80px 0; background:var(--ink); }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }

/* ── HOW IT WORKS ───────────────────────────────────────────── */
.hiw-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.hiw-step { padding:40px 36px; border-right:1px solid var(--border); position:relative; }
.hiw-step:last-child { border-right:none; }
.hiw-num { font-family:var(--font-mono); font-weight:700; font-size:48px; color:rgba(190,30,69,.12); line-height:1; margin-bottom:-12px; }
.hiw-icon-wrap { width:52px; height:52px; border-radius:14px; background:var(--surface-3); border:1px solid var(--border-bright); display:flex; align-items:center; justify-content:center; margin-bottom:20px; color:var(--crimson); }
.hiw-title { font-family:var(--font-h); font-weight:700; font-size:18px; color:var(--text-primary); margin-bottom:10px; }
.hiw-body { font-size:14px; color:var(--text-muted); line-height:1.7; }
.hiw-connector { position:absolute; right:-1px; top:50%; width:24px; height:24px; border-radius:50%; background:var(--crimson); transform:translate(50%,-50%); display:flex; align-items:center; justify-content:center; font-size:11px; color:#fff; z-index:2; }
.hiw-step:last-child .hiw-connector { display:none; }
.hiw-img { width:100%; height:150px; object-fit:cover; border-radius:var(--r-md); margin-top:20px; opacity:0.85; }

/* ── SOLUTIONS / PRODUCT CARDS ──────────────────────────────── */
.solution-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.sol-card { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-lg); padding:28px 28px 24px; position:relative; overflow:hidden; transition:border-color .25s, transform .25s, box-shadow .25s; text-decoration:none; display:block; }
.sol-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--grad-primary); transform:scaleX(0); transform-origin:left; transition:transform .3s ease; }
.sol-card:hover { border-color:var(--crimson); transform:translateY(-5px); box-shadow:var(--glow-card); }
.sol-card:hover::before { transform:scaleX(1); }
.sol-card-badge { margin-bottom:16px; }
.sol-card-icon { margin-bottom:18px; }
.sol-card-icon img { height:44px; width:44px; object-fit:contain; border-radius:10px; }
.sol-card-title { font-family:var(--font-h); font-weight:700; font-size:17px; color:var(--text-primary); margin-bottom:10px; }
.sol-card-body { font-size:13px; color:var(--text-muted); line-height:1.7; margin-bottom:20px; }
.sol-card-link { font-family:var(--font-h); font-weight:700; font-size:12px; letter-spacing:1px; color:var(--crimson); text-transform:uppercase; }
.sol-card-num { position:absolute; bottom:16px; right:20px; font-family:var(--font-mono); font-size:52px; color:rgba(38,59,144,.05); line-height:1; }

/* ── INDUSTRIES ─────────────────────────────────────────────── */
.ind-grid-8 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.card-ind-bg img { width:100%; height:100%; object-fit:cover; opacity:0.75; transition:transform .4s; }
.card-ind:hover .card-ind-bg img { transform:scale(1.06); }

/* ── COMPARISON ─────────────────────────────────────────────── */
.cmp-section { background:var(--surface-1); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }

/* ── TESTIMONIALS ───────────────────────────────────────────── */
.testi-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }

/* ── MARQUEE / TRUSTED ──────────────────────────────────────── */
.marquee-wrap, .trusted-wrap { overflow:hidden; position:relative; }
.marquee-wrap::before, .marquee-wrap::after, .trusted-wrap::before, .trusted-wrap::after { content:''; position:absolute; top:0; bottom:0; z-index:2; width:120px; pointer-events:none; }
.marquee-wrap::before { left:0; background:linear-gradient(90deg,var(--surface-1),transparent); }
.marquee-wrap::after { right:0; background:linear-gradient(-90deg,var(--surface-1),transparent); }
.trusted-wrap::before { left:0; width:160px; background:linear-gradient(to right,#14193a,transparent); }
.trusted-wrap::after { right:0; width:160px; background:linear-gradient(to left,#14193a,transparent); }
.marquee-track { display:flex; gap:32px; align-items:center; animation:marquee 22s linear infinite; width:max-content; }
.trusted-track { display:flex; gap:60px; align-items:center; animation:marquee 30s linear infinite; width:max-content; padding:16px 0; }
.trusted-track:hover { animation-play-state:paused; }
/* left → right scroll direction */
.trusted-ltr { animation-direction:reverse; }
/* two scrolling rows — parallax: different speeds + opposite directions */
.trusted-rows { display:flex; flex-direction:column; gap:6px; }
.trusted-rows .trusted-track { padding:8px 0; }
.trusted-rows .trusted-track:nth-child(1) { animation-duration:48s; animation-direction:reverse; }  /* slow · left → right */
.trusted-rows .trusted-track:nth-child(2) { animation-duration:30s; animation-direction:normal; }   /* faster · right → left */
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.marquee-partner { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md); padding:12px 20px; display:flex; align-items:center; gap:10px; white-space:nowrap; transition:border-color .2s; flex-shrink:0; }
.marquee-partner:hover { border-color:var(--border-bright); }
.marquee-partner img { height:28px; width:auto; object-fit:contain; filter:grayscale(1) brightness(0.7); transition:filter .2s; }
.marquee-partner:hover img { filter:grayscale(0) brightness(1); }
.marquee-partner span { font-family:var(--font-h); font-weight:600; font-size:12px; color:var(--text-faint); }
.trusted-logo { flex-shrink:0; display:flex; align-items:center; justify-content:center; min-width:120px; height:70px; }
.trusted-logo img { max-width:120px; max-height:56px; width:auto; height:auto; object-fit:contain; opacity:0.8; transition:opacity .3s ease, transform .3s ease; }
.trusted-logo:hover img { opacity:1; transform:scale(1.08); }

/* ── FLOW VIDEO ─────────────────────────────────────────────── */
.flow-section { background:var(--surface-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:80px 0; }
.flow-inner { display:grid; grid-template-columns:1fr 1.4fr; gap:64px; align-items:center; }
.flow-video-wrap { border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--border-bright); box-shadow:var(--glow-card); position:relative; }
.flow-video { width:100%; height:auto; aspect-ratio:16/9; display:block; border-radius:var(--r-xl); background:var(--surface-3); object-fit:cover; }
.flow-features { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:28px; }
.flow-feat { background:var(--surface-3); border:1px solid var(--border); border-radius:var(--r-md); padding:12px 16px; display:flex; align-items:center; gap:10px; font-size:13px; color:var(--text-muted); }
.flow-feat-dot { width:6px; height:6px; border-radius:50%; background:var(--crimson); flex-shrink:0; }

/* ── GLOBAL PRESENCE ────────────────────────────────────────── */
.global-inner { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.global-flag-row { display:flex; align-items:center; gap:16px; padding:16px 20px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md); margin-bottom:12px; transition:border-color .2s; }
.global-flag-row:hover { border-color:var(--border-bright); }
.global-flag-row img { height:22px; border-radius:3px; }
.global-flag-name { font-family:var(--font-h); font-weight:600; font-size:15px; color:var(--text-primary); }
.global-flag-detail { font-size:13px; color:var(--text-faint); margin-left:auto; }
.global-img-wrap { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-lg); padding:32px; display:flex; align-items:center; justify-content:center; }
.global-img-wrap img { max-width:100%; opacity:0.75; }

/* ── CTA BAND ───────────────────────────────────────────────── */
.cta-band { background:var(--grad-primary); padding:96px 0; text-align:center; position:relative; overflow:hidden; }
.cta-band::before { content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E"); pointer-events:none; }
/* subtle depth glow over the CTA gradient */
.cta-band .cta-glow { position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(55% 75% at 12% 15%, rgba(255,255,255,.16), transparent 60%),
             radial-gradient(65% 90% at 88% 92%, rgba(0,0,0,.18), transparent 60%); }
.cta-band .particles { z-index:0; color:#fff; }

/* ═══ FLOATING PARTICLES (hero + CTA) ══════════════════════ */
.particles { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.particles span { position:absolute; border-radius:50%; background:currentColor; opacity:var(--o,.1);
  animation-name:floatP; animation-timing-function:ease-in-out; animation-iteration-count:infinite; will-change:transform,opacity; }
@keyframes floatP { 0%,100%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(0,-26px,0) scale(1.3); opacity:calc(var(--o,.1) * 1.7); } }
/* hero: navy particles + diagonal gradient wash */
.hero .hero-grad { position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(125deg, rgba(190,30,69,.06) 0%, transparent 38%, transparent 62%, rgba(38,59,144,.07) 100%); }
.hero .particles { z-index:1; color:var(--navy); }
@media (prefers-reduced-motion:reduce){ .particles span{ animation:none; } }

/* ── PRODUCT / SOLUTION DETAIL (vision + iot pillar pages) ──── */
.prod-overview-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:64px; }
.prod-card { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-lg); padding:28px; position:relative; overflow:hidden; transition:border-color .25s, transform .25s, box-shadow .25s; text-decoration:none; display:block; }
.prod-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--grad-primary); transform:scaleX(0); transform-origin:left; transition:transform .3s ease; }
.prod-card:hover { border-color:var(--crimson); transform:translateY(-5px); box-shadow:0 16px 40px rgba(190,30,69,.18); }
.prod-card:hover::before { transform:scaleX(1); }
.prod-card-tag { font-family:var(--font-h); font-weight:600; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--text-faint); margin-bottom:16px; display:block; }
.prod-card-icon { width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; overflow:hidden; background:var(--grad-primary); }
.prod-card-icon img { width:100%; height:100%; object-fit:contain; }
.prod-card-name { font-family:var(--font-h); font-weight:800; font-size:17px; color:var(--text-primary); margin-bottom:8px; }
.prod-card-pitch { font-size:13px; color:var(--text-muted); line-height:1.7; margin-bottom:18px; }
.prod-card-link { font-family:var(--font-h); font-weight:700; font-size:12px; letter-spacing:1px; text-transform:uppercase; color:var(--crimson); }
.prod-card-num { position:absolute; bottom:16px; right:20px; font-family:var(--font-mono); font-size:52px; color:rgba(38,59,144,.05); line-height:1; }

.prod-section { padding:88px 0; border-top:1px solid var(--border); scroll-margin-top:calc(var(--nav-h) + 24px); }
.prod-section:nth-child(odd) { background:var(--surface-1); }
.prod-section:nth-child(even) { background:var(--ink); }
.prod-header { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; margin-bottom:56px; }
.prod-name-tag { display:inline-flex; align-items:center; gap:10px; margin-bottom:20px; }
.prod-h2 { font-family:var(--font-h); font-weight:800; font-size:clamp(28px,3.5vw,42px); line-height:1.1; letter-spacing:-.5px; color:var(--text-primary); margin-bottom:16px; }
.prod-desc { font-size:16px; color:var(--text-muted); line-height:1.8; margin-bottom:28px; }
.prod-specs-mini { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px; }
.prod-spec-tag { background:var(--surface-3); border:1px solid var(--border); border-radius:var(--r-full); padding:5px 14px; font-family:var(--font-mono); font-size:12px; color:var(--text-muted); }
.prod-visual { background:var(--surface-2); border:1px solid var(--border-bright); border-radius:var(--r-xl); padding:24px; box-shadow:0 0 60px rgba(190,30,69,.1); }
.prod-visual-img { width:100%; aspect-ratio:16/10; border-radius:var(--r-lg); object-fit:cover; background:var(--surface-3); }
.prod-feature-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.prod-feat { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md); padding:16px 18px; display:flex; gap:14px; align-items:flex-start; transition:border-color .2s; }
.prod-feat:hover { border-color:rgba(190,30,69,.3); }
.prod-feat-dot { width:8px; height:8px; border-radius:50%; background:var(--crimson); flex-shrink:0; margin-top:6px; }
.prod-feat-title { font-family:var(--font-h); font-weight:700; font-size:13px; color:var(--text-primary); margin-bottom:4px; }
.prod-feat-body { font-size:12px; color:var(--text-faint); line-height:1.6; }
.prod-use-cases { list-style:none; display:flex; flex-direction:column; gap:10px; }
.prod-use-cases li { display:flex; align-items:flex-start; gap:12px; font-size:14px; color:var(--text-muted); line-height:1.6; }
.prod-use-cases li::before { content:'→'; color:var(--crimson); font-weight:700; flex-shrink:0; margin-top:1px; }

/* ── FAQ ────────────────────────────────────────────────────── */
.faq-list { display:flex; flex-direction:column; gap:0; border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
.faq-item { border-bottom:1px solid var(--border); }
.faq-item:last-child { border-bottom:none; }
.faq-q { width:100%; background:none; border:none; text-align:left; padding:18px 24px; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; font-family:var(--font-h); font-weight:600; font-size:14px; color:var(--text-primary); transition:background .2s; }
.faq-q:hover { background:var(--surface-3); }
.faq-q-icon { flex-shrink:0; width:24px; height:24px; border-radius:50%; border:1px solid var(--border-bright); display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--crimson); transition:transform .25s; }
.faq-item.open .faq-q-icon { transform:rotate(45deg); }
.faq-a { display:none; padding:0 24px 18px; font-size:14px; color:var(--text-muted); line-height:1.75; }
.faq-item.open .faq-a { display:block; }

/* ── SERVICES GRID ──────────────────────────────────────────── */
.svc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.svc-card { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-lg); padding:32px 28px; transition:border-color .25s, transform .25s; }
.svc-card:hover { border-color:var(--crimson); transform:translateY(-4px); }
.svc-icon { font-size:32px; margin-bottom:18px; }
.svc-title { font-family:var(--font-h); font-weight:700; font-size:18px; color:var(--text-primary); margin-bottom:10px; }
.svc-body { font-size:14px; color:var(--text-muted); line-height:1.7; }

/* ── CASE STUDY CARDS ───────────────────────────────────────── */
.cs-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.cs-card { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; transition:border-color .25s, transform .25s; text-decoration:none; }
.cs-card:hover { border-color:var(--crimson); transform:translateY(-4px); }
.cs-img { height:180px; background:var(--grad-primary); position:relative; overflow:hidden; }
.cs-img img { width:100%; height:100%; object-fit:cover; opacity:.8; }
.cs-pillar { position:absolute; top:14px; left:14px; }
.cs-body { padding:24px; flex:1; display:flex; flex-direction:column; }
.cs-industry { font-family:var(--font-h); font-weight:600; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-faint); margin-bottom:8px; }
.cs-title { font-family:var(--font-h); font-weight:700; font-size:18px; color:var(--text-primary); margin-bottom:10px; line-height:1.3; }
.cs-summary { font-size:13px; color:var(--text-muted); line-height:1.7; margin-bottom:18px; flex:1; }
.cs-metric { display:flex; align-items:baseline; gap:8px; border-top:1px solid var(--border); padding-top:14px; }
.cs-metric-val { font-family:var(--font-mono); font-weight:700; font-size:22px; color:var(--crimson); }
.cs-metric-label { font-size:12px; color:var(--text-faint); }

/* ── MPA PAGE TRANSITIONS ───────────────────────────────────── */
@view-transition { navigation: auto; }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width:900px) {
  .hero-inner { grid-template-columns:1fr; gap:48px; }
  .pain-bar-inner { grid-template-columns:1fr; }
  .pain-item { border-right:none; border-bottom:1px solid var(--border); padding:20px 0; }
  .pain-item:last-child { border-bottom:none; }
  .stats-grid { grid-template-columns:1fr 1fr; gap:16px; }
  .hiw-steps { grid-template-columns:1fr; }
  .hiw-step { border-right:none; border-bottom:1px solid var(--border); }
  .hiw-step:last-child { border-bottom:none; }
  .hiw-connector { display:none !important; }
  .solution-cards { grid-template-columns:1fr 1fr; }
  .ind-grid-8 { grid-template-columns:1fr 1fr; }
  .testi-grid { grid-template-columns:1fr; }
  .global-inner { grid-template-columns:1fr; gap:40px; }
  .global-img-wrap { display:none; }
  .flow-inner { grid-template-columns:1fr; text-align: center;}
  .prod-overview-grid { grid-template-columns:1fr 1fr; }
  .prod-header { grid-template-columns:1fr; gap:40px; }
  .prod-feature-grid { grid-template-columns:1fr; }
  .svc-grid { grid-template-columns:1fr 1fr; }
  .nav-dropdown-mega { min-width:auto; }
}
@media (max-width:600px) {
  .solution-cards { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .prod-overview-grid { grid-template-columns:1fr; }
  .svc-grid { grid-template-columns:1fr; }
  .cs-grid { grid-template-columns:1fr; }
}

/* ── REDUCED MOTION ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal { opacity:1 !important; transform:none !important; }
  .marquee-track, .trusted-track { animation:none !important; }
}

/* ─── WORK GALLERY FILTERS ───────────────────────────────── */
.work-filters { display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.work-filter-group-label {
  font-family:var(--font-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:2px; color:var(--text-faint); padding-top:9px; min-width:86px;
}
.work-chipset { display:flex; gap:8px; flex-wrap:wrap; }
.work-chip {
  background:transparent; border:1px solid var(--border-bright);
  color:var(--text-muted); font-size:13px; font-weight:600;
  padding:7px 16px; border-radius:var(--r-full);
  transition:all .2s ease;
}
.work-chip:hover { border-color:var(--crimson); color:var(--text-primary); }
.work-chip.active {
  background:var(--crimson); border-color:transparent; color:#fff;
}
.app-card { display:flex; flex-direction:column; }
@media (max-width:1023px){ #work-grid{ grid-template-columns:repeat(2,1fr) !important; } }
@media (max-width:767px){ #work-grid{ grid-template-columns:1fr !important; } }

/* ─── FEATURE GRID (engineering / generic pillars) ────────── */
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.feature-box {
  display:flex; gap:16px; align-items:flex-start;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:26px;
  transition:border-color .25s ease, transform .25s ease;
}
.feature-box:hover { border-color:var(--crimson); transform:translateY(-4px); }
.feature-icon { font-size:28px; line-height:1; flex-shrink:0; }
.feature-title { font-weight:700; font-size:16px; margin-bottom:8px; }
.feature-body { font-size:13.5px; color:var(--text-muted); line-height:1.6; }
@media (max-width:1023px){ .feature-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:767px){ .feature-grid{ grid-template-columns:1fr;} }

/* ─── STEPS GRID (how we work) ────────────────────────────── */
.steps-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.step-card {
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:28px 24px;
  transition:border-color .25s ease, transform .25s ease;
}
.step-card:hover { border-color:var(--crimson); transform:translateY(-4px); }
.step-num {
  font-family:var(--font-mono); font-size:30px; font-weight:700;
  color:var(--crimson); margin-bottom:14px;
}
.step-title { font-weight:700; font-size:17px; margin-bottom:10px; }
.step-body { font-size:13.5px; color:var(--text-muted); line-height:1.6; }
@media (max-width:1023px){ .steps-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:767px){ .steps-grid{ grid-template-columns:1fr;} }

/* ─── SAFETY AI PILLAR ────────────────────────────────────── */
.badge-safety { background:rgba(56,189,248,.12); color:var(--info); border:1px solid rgba(56,189,248,.25); }
@media (min-width:1024px){
  .hero-pillars.hero-pillars-4 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .hero-pillars-4 .pillar-card { padding:20px; }
}

/* ─── CARD THUMB + APP HERO VISUAL ────────────────────────── */
.card-thumb {
  width:100%; aspect-ratio:16/9; overflow:hidden;
  border-radius:var(--r-md); border:1px solid var(--border);
  margin-bottom:16px; background:var(--surface-3);
}
.card-thumb img { width:100%; height:100%; object-fit:contain; transition:transform .35s ease; }
.sol-card:hover .card-thumb img { transform:scale(1.05); }
.app-hero-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:center; }
.app-hero-visual { max-height:280px; overflow:hidden; }
.app-hero-visual img { max-height:280px; width:100%; object-fit:cover; }
@media (max-width:1023px){
  .app-hero-grid { grid-template-columns:1fr; }
  .app-hero-visual { display:none; }
}

/* ─── LIGHT THEME ADJUSTMENTS ─────────────────────────────── */
.nav-logo-img { height:38px; width:auto; }
/* pillar/sol left-accent bar: subtle on light, only crimson pillar keeps pop */
.pillar-card::before { width:3px; background:var(--crimson); }

/* CTA band sits on dark gradient — force light controls */
.cta-band .btn-ghost { color:#fff; border-color:rgba(255,255,255,.4); }
.cta-band .btn-ghost:hover { border-color:#fff; background:rgba(255,255,255,.1); }

/* ═══ HERO LIVE INSPECTION DASHBOARD ═══════════════════════ */
.pillar-row { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media (max-width:1023px){ .pillar-row{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .pillar-row{ grid-template-columns:1fr;} }

.inspect-scene {
  background:#fff; border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--glow-card); overflow:hidden; width:100%; max-width:520px; margin-left:auto;
}
.is-topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; background:var(--surface-2); border-bottom:1px solid var(--border);
  font-family:var(--font-mono); font-size:11px; color:var(--text-muted); letter-spacing:.5px;
}
.is-cam { display:flex; align-items:center; gap:7px; font-weight:700; color:var(--navy); }
.is-rec { width:8px; height:8px; border-radius:50%; background:var(--crimson); animation:isRec 1.4s ease-in-out infinite; }
@keyframes isRec { 0%,100%{opacity:1} 50%{opacity:.25} }

.is-view { position:relative; aspect-ratio:16/9; overflow:hidden; background:#eef1f7; }
.is-grid {
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(38,59,144,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(38,59,144,.05) 1px,transparent 1px);
  background-size:26px 26px;
}
.is-panel { position:absolute; inset:8% 6%; z-index:2; }
.is-panel svg { width:100%; height:100%; display:block; border-radius:10px; }

/* defect markers — hidden by default, shown when NG */
.is-defect { position:absolute; opacity:0; transition:opacity .25s; z-index:4; }
.is-defect.show { opacity:1; }
.is-defect .is-tag {
  position:absolute; top:-16px; left:0; background:var(--crimson); color:#fff;
  font-family:var(--font-mono); font-size:9px; padding:1px 5px; border-radius:3px; white-space:nowrap;
}
.is-scratch { left:30%; top:34%; width:26%; height:5px; }
.is-scratch::before {
  content:''; position:absolute; inset:0; border:1.5px solid var(--crimson); border-radius:3px;
  height:26px; top:-10px;
}
.is-scratch::after {
  content:''; position:absolute; left:3px; right:3px; top:2px; height:2px;
  background:var(--crimson); transform:rotate(-8deg); border-radius:2px;
}
.is-pinhole { left:58%; top:56%; width:20px; height:20px; }
.is-pinhole::before { content:''; position:absolute; inset:0; border:1.5px solid var(--crimson); border-radius:4px; }
.is-pinhole::after { content:''; position:absolute; left:50%; top:50%; width:5px; height:5px; background:var(--crimson); border-radius:50%; transform:translate(-50%,-50%); }
.is-pinhole .is-tag { left:auto; right:0; }

/* scan line */
.is-scan {
  position:absolute; left:6%; right:6%; height:2px; top:12%;
  background:linear-gradient(90deg,transparent,var(--navy),transparent);
  box-shadow:0 0 10px rgba(38,59,144,.5); z-index:5; animation:isScan 2.4s ease-in-out infinite;
}
@keyframes isScan { 0%{top:12%;opacity:0} 12%{opacity:1} 50%{top:84%;opacity:1} 88%{opacity:1} 100%{top:12%;opacity:0} }

/* verdict badge */
.is-verdict { position:absolute; top:12px; right:12px; z-index:6; font-family:var(--font-h); font-weight:800; font-size:15px; height:30px; }
.is-verdict span { position:absolute; top:0; right:0; padding:5px 12px; border-radius:var(--r-full); white-space:nowrap; transition:opacity .2s; }
.is-ok { background:rgba(21,128,61,.12); color:var(--success); border:1px solid rgba(21,128,61,.35); }
.is-ng { background:rgba(190,30,69,.12); color:var(--crimson); border:1px solid rgba(190,30,69,.35); opacity:0; }
.inspect-scene.ng .is-ok { opacity:0; }
.inspect-scene.ng .is-ng { opacity:1; }

/* dashboard */
.is-dash { padding:14px 16px; background:var(--surface-2); border-top:1px solid var(--border); }
.is-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:12px; }
.is-metric { display:flex; flex-direction:column; }
.is-m-val { font-family:var(--font-mono); font-size:17px; font-weight:700; color:var(--navy); line-height:1.1; }
.is-m-val.is-pass { color:var(--success); }
.is-m-val.is-fail { color:var(--crimson); }
.is-m-lab { font-size:9px; text-transform:uppercase; letter-spacing:1px; color:var(--text-faint); margin-top:3px; }
.is-spark { display:flex; align-items:flex-end; gap:3px; height:26px; margin-bottom:10px; }
.is-spark span { flex:1; background:var(--success); border-radius:1px; min-height:3px; transition:height .3s; }
.is-spark span.bad { background:var(--crimson); }
.is-log {
  font-family:var(--font-mono); font-size:10px; color:var(--text-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.is-log-time { color:var(--navy); font-weight:700; }
@media (prefers-reduced-motion:reduce){ .is-rec,.is-scan{ animation:none; } }

/* ═══ WEBGL WIREFRAME FACTORY (hero backdrop) ═══════════════ */
.hero { position:relative; }
.factory-bg {
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; opacity:0;
  transition:opacity 1.2s ease;
}
.factory-bg.ready { opacity:.5; }
/* video-ready hero background (hidden until a real clip decodes) */
.hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:0; opacity:0; transition:opacity .9s ease; pointer-events:none; }
.hero-video.ready { opacity:1; }
/* when a real clip is live, retire the 3D factory to save the paint */
.hero.hero-has-video .factory-bg { opacity:0 !important; }
/* keep left text crisp: fade factory toward the text side */
.hero-mask {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, var(--ink) 0%, var(--ink) 20%, rgba(255,255,255,.30) 48%, transparent 74%);
}
/* faint navy pool so the white 3D scene reads against the page */
.hero { background:radial-gradient(130% 95% at 80% 42%, rgba(38,59,144,.07) 0%, rgba(38,59,144,.03) 38%, transparent 66%); }
.hero .container { position:relative; z-index:2; }

/* ═══ HOLOGRAM GLASS TREATMENT (inspect-scene) ═════════════ */
.inspect-scene {
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(16px) saturate(1.35);
  backdrop-filter:blur(16px) saturate(1.35);
  border:1px solid rgba(38,59,144,.22);
  box-shadow:0 16px 48px rgba(38,59,144,.18),
             inset 0 0 0 1px rgba(255,255,255,.55),
             0 0 34px rgba(90,150,255,.12);
  position:relative;
}
/* holographic sheen sweep */
.inspect-scene::after {
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit; z-index:8;
  background:linear-gradient(120deg,transparent 34%,rgba(120,170,255,.14) 48%,rgba(190,30,69,.05) 54%,transparent 64%);
  background-size:260% 260%; animation:holoSheen 7s ease-in-out infinite;
}
@keyframes holoSheen { 0%{background-position:0% 0%} 100%{background-position:130% 130%} }
/* translucent sub-panels so the factory shows through */
.inspect-scene .is-topbar { background:rgba(242,243,248,.4); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border-bottom-color:rgba(38,59,144,.14); }
.inspect-scene .is-view   { background:rgba(233,238,247,.30); }
.inspect-scene .is-grid   { opacity:.6; }
.inspect-scene .is-dash   { background:rgba(242,243,248,.42); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border-top-color:rgba(38,59,144,.14); }
/* panel surface slightly translucent for holo depth */
.inspect-scene .is-panel svg rect[fill^="url"] { opacity:.9; }
@media (prefers-reduced-motion:reduce){ .inspect-scene::after{ animation:none; } }


/* ─── OCR + BARCODE READERS (inspect-scene) ───────────────── */
.is-read {
  position:absolute; z-index:6; display:flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.82); border:1px solid rgba(38,59,144,.2);
  border-radius:6px; padding:3px 8px; font-family:var(--font-mono); font-size:9px;
  color:var(--navy); box-shadow:0 2px 8px rgba(38,59,144,.12); overflow:hidden;
}
.is-ocr     { top:10px; left:10px; }
.is-barcode { bottom:10px; left:10px; }
.is-read-lab { font-weight:700; color:var(--crimson); letter-spacing:1px; }
.is-read-val { color:var(--text-primary); }
.is-read-ok  { color:var(--success); font-weight:700; }
.is-bars {
  display:inline-block; width:36px; height:14px;
  background:repeating-linear-gradient(90deg,#1c1c1c 0 1px,transparent 1px 2px,#1c1c1c 2px 4px,transparent 4px 5px,#1c1c1c 5px 6px,transparent 6px 8px,#1c1c1c 8px 9px,transparent 9px 11px);
}
.is-bc-scan {
  position:absolute; top:0; bottom:0; width:16px;
  background:linear-gradient(90deg,transparent,rgba(190,30,69,.5),transparent);
  animation:bcScan 2.2s linear infinite;
}
@keyframes bcScan { 0%{left:-16px} 100%{left:100%} }
@media (prefers-reduced-motion:reduce){ .is-bc-scan{ animation:none; } }

/* ═══ INSPECTION PANEL — 3 stations stacked in one device frame ═══ */
.stations {
  display:flex; flex-direction:column; gap:10px; width:100%; max-width:370px; margin-left:auto;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid var(--border); border-radius:18px;
  box-shadow:0 26px 64px rgba(38,59,144,.16), inset 0 0 0 1px rgba(255,255,255,.6);
  padding:14px;
}
.stn-panel-head { display:flex; align-items:center; gap:9px; padding:2px 3px 11px; border-bottom:1px solid var(--border); }
.stn-panel-dots { display:flex; gap:5px; }
.stn-panel-dots i { width:8px; height:8px; border-radius:50%; background:var(--border); }
.stn-panel-title { font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:1px; color:var(--navy); }
.stn-panel-live { margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:1px; color:var(--crimson); }
.stn-card {
  position:relative; width:100%; max-width:100%;
  background:var(--surface-1,#f5f7fb);
  border:1px solid var(--border); border-radius:12px;
  box-shadow:none; padding:11px 13px;
}
.stn-dot { display:none; }

.stn-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.stn-chip { display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:9.5px; font-weight:700; letter-spacing:.5px; color:var(--navy); }
.stn-rec { width:6px; height:6px; border-radius:50%; background:var(--crimson); animation:isRec 1.4s ease-in-out infinite; }
.stn-verdict { position:relative; font-family:var(--font-h); font-weight:800; font-size:12px; }
.stn-verdict .v-ok { color:var(--success); }
.stn-verdict .v-ng { color:var(--crimson); display:none; }
.stn-card.ng .v-ok { display:none; }
.stn-card.ng .v-ng { display:inline; }

.stn-view { position:relative; height:52px; border-radius:8px; overflow:hidden; background:rgba(233,238,247,.5); margin-bottom:8px; }
.stn-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(38,59,144,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(38,59,144,.06) 1px,transparent 1px); background-size:16px 16px; }
.stn-scan { position:absolute; left:6%; right:6%; height:2px; top:20%; background:linear-gradient(90deg,transparent,var(--navy),transparent); box-shadow:0 0 8px rgba(38,59,144,.5); animation:isScan 2.2s ease-in-out infinite; }
.stn-box { position:absolute; left:24%; top:28%; width:34%; height:44%; border:1.5px solid var(--crimson); border-radius:3px; opacity:0; transition:opacity .2s; }
.stn-card.ng .stn-box { opacity:1; }
.stn-tag { position:absolute; top:-15px; left:0; background:var(--crimson); color:#fff; font-family:var(--font-mono); font-size:8px; padding:1px 5px; border-radius:3px; white-space:nowrap; }
/* assembly part dots */
.stn-parts { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:12px; z-index:2; }
.stn-parts i { width:12px; height:12px; border-radius:3px; background:rgba(38,59,144,.25); border:1.5px solid var(--navy); transition:all .3s; }
.stn-parts i.ok { background:var(--success); border-color:var(--success); }
.stn-parts i.bad { background:var(--crimson); border-color:var(--crimson); }
/* packaging count dots */
.stn-count { position:absolute; inset:8px 10px; display:grid; grid-template-columns:repeat(6,1fr); gap:4px; z-index:2; }
.stn-count i { border-radius:2px; background:rgba(38,59,144,.15); transition:background .15s; }
.stn-count i.on { background:var(--success); }

.stn-metric { font-family:var(--font-mono); font-size:10px; color:var(--text-muted); }
.stn-metric b { color:var(--navy); }
.stn-card.ng .stn-metric b { color:var(--crimson); }
@media (prefers-reduced-motion:reduce){ .stn-rec,.stn-scan{ animation:none; } }
@media (max-width:1023px){ .stations{ max-width:340px; } .stn-card[data-stn]{ margin-right:0; } }

@media (min-width:1024px){ .hero .stations { max-width:380px; } }

/* leader lines retired — panel is self-contained now */
.stn-lines { display:none !important; }

/* subject images in station mini-views (replaces abstract green boxes) */
.stn-img { position:absolute; inset:0; width:100%; height:100%; z-index:2; }

/* ─── IoT LIVE TILE (smart-factory pillar in the hero) ────── */
.iot-tile {
  width:100%; max-width:100%; margin:0;
  background:var(--surface-1,#f5f7fb);
  border:1px solid var(--border); border-radius:12px;
  box-shadow:none; padding:11px 13px;
}
.iot-head { display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:9.5px; font-weight:700; letter-spacing:.5px; color:var(--navy); margin-bottom:10px; }
.iot-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:10px; }
.iot-metrics b { display:block; font-family:var(--font-mono); font-size:16px; font-weight:700; color:var(--navy); line-height:1.1; }
.iot-metrics span { font-size:8px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-faint); }
.iot-spark { display:flex; align-items:flex-end; gap:2px; height:20px; }
.iot-spark i { flex:1; background:var(--navy); opacity:.7; border-radius:1px; min-height:2px; transition:height .3s; }
@media (min-width:1024px){
  .hero { min-height:100vh; overflow:hidden; }
}

/* ═══ OUR TECHNOLOGY GRID ══════════════════════════════════ */
.tech-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.tech-card { background:var(--surface,#fff); border:1px solid var(--border); border-radius:16px; padding:26px; transition:border-color .18s, box-shadow .18s, transform .18s; }
.tech-card:hover { border-color:var(--crimson); box-shadow:0 12px 30px rgba(190,30,69,.08); transform:translateY(-3px); }
.tech-ico { width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:rgba(190,30,69,.09); font-size:23px; margin-bottom:16px; }
.tech-title { font-family:var(--font-h); font-weight:700; font-size:16px; color:var(--text-primary); margin-bottom:8px; line-height:1.3; }
.tech-body { font-family:var(--font-b); font-size:13.5px; color:var(--text-muted); line-height:1.6; }
@media (max-width:860px){ .tech-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .tech-grid{ grid-template-columns:1fr; } }

/* ═══ PARTNER CARD GRID (simple) ═══════════════════════════ */
.partner-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; max-width:1080px; margin:0 auto; }
.partner-card { display:flex; align-items:center; gap:12px; min-width:0; min-height:68px; background:var(--surface,#fff); border:1px solid var(--border); border-radius:12px; padding:14px 16px; transition:border-color .18s, box-shadow .18s, transform .18s; }
.partner-card:hover { border-color:var(--crimson); box-shadow:0 8px 22px rgba(190,30,69,.09); transform:translateY(-2px); }
.partner-mark { flex:0 0 auto; width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:rgba(190,30,69,.08); color:var(--crimson); font-family:var(--font-h); font-weight:800; font-size:17px; }
.partner-logo { flex:0 0 auto; width:44px; height:38px; object-fit:contain; object-position:left center; filter:grayscale(1); opacity:.78; transition:filter .2s, opacity .2s; }
.partner-card:hover .partner-logo { filter:grayscale(0); opacity:1; }
.partner-meta { display:flex; flex-direction:column; min-width:0; }
.partner-name { font-family:var(--font-h); font-weight:700; font-size:14px; color:var(--text-primary); line-height:1.25; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow: hidden;}
.partner-sub { font-family:var(--font-b); font-size:11px; color:var(--text-muted); }
@media (max-width:900px){ .partner-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:560px){ .partner-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .partner-card{ padding:12px; gap:10px; } .partner-logo{ width:36px; height:32px; } .partner-mark{ width:32px; height:32px; font-size:15px; } .partner-name{ font-size:13px; } }
@media (max-width:400px){ .partner-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .partner-card{ padding:14px 16px; }}

/* ═══ PARTNER NETWORK GRAPH (legacy, unused) ═══════════════ */
.pnet { position:relative; max-width:1000px; margin:0 auto; }
.pnet-svg { width:100%; height:auto; display:block; overflow:visible; }
/* energy-flow links: dashes travel hub → partner (powering) */
.pnet-link {
  stroke:var(--crimson); stroke-width:1.6; opacity:.45;
  stroke-dasharray:5 9; stroke-linecap:round;
  animation:pnetFlow 1.1s linear infinite;
}
@keyframes pnetFlow { to { stroke-dashoffset:-14; } }
/* partner nodes */
.pnet-dot { fill:#fff; stroke:var(--navy); stroke-width:2.5; transition:all .2s; }
.pnet-ring { fill:none; stroke:var(--navy); stroke-width:1.5; opacity:.4; transform-box:fill-box; transform-origin:center;
  animation:pnetPing 2.6s ease-out infinite; }
@keyframes pnetPing { 0%{ transform:scale(1); opacity:.5; } 70%,100%{ transform:scale(2.6); opacity:0; } }
.pnet-label { font-family:var(--font-h); font-weight:600; font-size:15px; fill:var(--text-muted); }
.pnet-node:hover .pnet-dot { fill:var(--crimson); stroke:var(--crimson); r:9; }
.pnet-node:hover .pnet-label { fill:var(--navy); }
/* orbit guide rings */
.pnet-orbit { fill:none; stroke:var(--navy); opacity:.12; stroke-dasharray:2 7; }
/* broadcast waves radiating from the core */
.pnet-wave { fill:none; stroke:var(--crimson); stroke-width:2; opacity:0; transform-box:fill-box; transform-origin:center; animation:pnetWave 4.2s ease-out infinite; }
@keyframes pnetWave { 0%{ transform:scale(.12); opacity:.5; } 80%,100%{ transform:scale(1); opacity:0; } }
/* Crimson hub */
.pnet-hub-glow { fill:var(--crimson); opacity:.14; animation:pnetGlow 2.4s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes pnetGlow { 0%,100%{ transform:scale(1); opacity:.14; } 50%{ transform:scale(1.25); opacity:.06; } }
.pnet-hub { fill:var(--crimson); filter:drop-shadow(0 6px 16px rgba(190,30,69,.35)); }
.pnet-hub-t1 { font-family:var(--font-h); font-weight:800; font-size:15px; fill:#fff; letter-spacing:1px; }
.pnet-hub-t2 { font-family:var(--font-h); font-weight:600; font-size:11px; fill:rgba(255,255,255,.85); letter-spacing:3px; }
.pnet-stat { text-align:center; margin-top:8px; font-family:var(--font-mono); font-size:13px; color:var(--text-muted); }
.pnet-stat b { color:var(--navy); }
@media (max-width:640px){ .pnet-label{ font-size:19px; } }
@media (prefers-reduced-motion:reduce){ .pnet-link,.pnet-ring,.pnet-hub-glow,.pnet-wave{ animation:none; } }


/* hero sub-headline + proof line (hero copy optimization) */
.hero-sub { font-family:var(--font-h); font-weight:700; font-size:clamp(17px,1.6vw,21px); color:var(--navy); margin:-6px 0 16px; letter-spacing:.2px; }
.hero-proofline { font-size:13px; color:var(--text-muted); margin:20px 0 10px; }
.hero-proofline strong { color:var(--crimson); font-weight:700; }

/* ═══ WORLD MAP — global presence · command-center layout ═══ */
.wmap-cmd { display:grid; grid-template-columns:0.9fr 1.6fr; gap:48px; align-items:center; }
/* LEFT column */
.wmap-side { max-width:400px; }
.wmap-h { font-family:var(--font-h); font-weight:800; font-size:clamp(26px,3vw,38px); line-height:1.12; letter-spacing:-.01em;
  color:var(--text-primary); margin:12px 0 0; }
.wmap-h span { color:var(--crimson); }
.wmap-lede { font-family:var(--font-b); color:var(--text-muted); font-size:15px; line-height:1.6; margin:14px 0 26px; }
.wmap-stats { display:flex; flex-direction:column; gap:12px; }
.wmap-stat { display:flex; align-items:baseline; gap:14px; text-align:left; width:100%; cursor:pointer;
  background:var(--surface,#fff); border:1px solid var(--border); border-radius:12px; padding:16px 18px;
  transition:border-color .18s, box-shadow .18s, transform .18s; }
.wmap-stat:hover, .wmap-stat:focus-visible { border-color:var(--crimson); box-shadow:0 6px 20px rgba(190,30,69,.1); transform:translateY(-2px); outline:none; }
.wmap-num { font-family:var(--font-mono); font-weight:700; font-size:30px; line-height:1; color:var(--crimson); min-width:78px; }
.wmap-lab { font-family:var(--font-b); font-weight:600; font-size:14px; color:var(--text-primary); }
/* RIGHT canvas */
.wmap-canvas { position:relative; }
.wmap-svg { width:100%; height:auto; display:block; overflow:visible; }
/* landmasses */
.sa-land { fill:#e9ecf3; stroke:#d3d8e6; stroke-width:1.2; stroke-linejoin:round; }
.sa-land.on { fill:rgba(190,30,69,.09); stroke:rgba(190,30,69,.4); }
.sa-country { font-family:var(--font-h); font-weight:800; font-size:30px; letter-spacing:8px; fill:var(--navy); opacity:.10; }
/* nodes */
.wmap-hit { fill:transparent; cursor:pointer; }
.wmap-core { fill:var(--crimson); }
.wmap-mark { fill:#fff; stroke:var(--crimson); stroke-width:2; }
.wmap-ping { fill:none; stroke:var(--crimson); stroke-width:1.5; opacity:.5; transform-box:fill-box; transform-origin:center; animation:wmapPing 2.4s ease-out infinite; }
@keyframes wmapPing { 0%{ transform:scale(1); opacity:.55; } 70%,100%{ transform:scale(3); opacity:0; } }
/* node types: HQ solid, active hollow, expansion gray dashed */
.wmap-node.is-hq .wmap-mark { fill:var(--crimson); stroke-width:2.5; filter:drop-shadow(0 0 7px rgba(190,30,69,.55)); }
.wmap-node.is-hq .wmap-core { fill:#fff; }
.wmap-node.is-active .wmap-core { fill:var(--crimson); }
.wmap-node:hover .wmap-mark, .wmap-node:focus-visible .wmap-mark { transform:scale(1.15); transform-box:fill-box; transform-origin:center; }
.wmap-node:focus-visible { outline:none; }
/* stat-hover highlight states */
.wmap-node.dim { opacity:.28; transition:opacity .2s; }
.wmap-node.hot .wmap-ping { animation-duration:1.2s; stroke-width:2.4; }
/* tooltip */
.wmap-tip { position:absolute; transform:translate(-50%,-100%); pointer-events:none; z-index:5;
  background:var(--text-primary,#12151c); color:#fff; border-radius:10px; padding:8px 12px; min-width:120px;
  box-shadow:0 10px 30px rgba(0,0,0,.22); font-family:var(--font-b); white-space:nowrap; }
.wmap-tip::after { content:''; position:absolute; left:50%; bottom:-5px; width:10px; height:10px; background:inherit; transform:translateX(-50%) rotate(45deg); }
.wmap-tip b { display:block; font-family:var(--font-h); font-weight:700; font-size:14px; }
.wmap-tip span { display:block; font-size:12px; opacity:.75; margin-top:2px; }
/* legend */
.wmap-legend { display:flex; justify-content:flex-end; gap:22px; margin-top:14px; font-family:var(--font-mono); font-size:12px; color:var(--text-muted); flex-wrap:wrap; }
.wmap-legend span { display:inline-flex; align-items:center; gap:7px; }
.wmap-key { width:11px; height:11px; border-radius:50%; display:inline-block; }
.wmap-key.k-hq { background:var(--crimson); box-shadow:0 0 0 2px rgba(190,30,69,.25); }
.wmap-key.k-active { background:#fff; border:2px solid var(--crimson); width:9px; height:9px; }
/* USA global-presence chip */
.wmap-usa { position:absolute; top:14px; left:14px; display:flex; align-items:center; gap:11px;
  background:var(--surface,#fff); border:1px solid var(--border); border-radius:12px; padding:9px 14px;
  box-shadow:0 6px 20px rgba(0,0,0,.07); transition:border-color .2s, opacity .2s; }
.wmap-usa b { display:block; font-family:var(--font-h); font-weight:700; font-size:13px; color:var(--text-primary); line-height:1.2; }
.wmap-usa small { font-family:var(--font-b); font-size:11px; color:var(--text-muted); }
.wmap-usa-dot { width:12px; height:12px; border-radius:50%; background:var(--crimson); flex:0 0 auto; position:relative; box-shadow:0 0 0 4px rgba(190,30,69,.16); }
.wmap-usa-dot::after { content:''; position:absolute; inset:0; border-radius:50%; border:1.5px solid var(--crimson); animation:usaPing 2.4s ease-out infinite; }
@keyframes usaPing { 0%{ transform:scale(1); opacity:.6; } 70%,100%{ transform:scale(2.4); opacity:0; } }
.wmap-usa.hot { border-color:var(--crimson); box-shadow:0 8px 24px rgba(190,30,69,.16); }
.wmap-usa.dim { opacity:.4; }
@media (max-width:860px){ .wmap-cmd{ grid-template-columns:1fr; gap:28px; } .wmap-side{ max-width:none; text-align: center;} .wmap-legend{ justify-content:center; } }
@media (max-width:520px){ .wmap-usa small{ display:none; }}
@media (prefers-reduced-motion:reduce){ .wmap-ping,.wmap-usa-dot::after{ animation:none; } }

/* ═══════════════════════════════════════════════════════════════
   MICRO-INTERACTIONS — hover / press / focus polish (site-wide)
═══════════════════════════════════════════════════════════════ */
/* unified smooth transitions incl. shadow on all interactive cards */
.pillar-card, .sol-card, .tech-card, .partner-card, .prod-card, .svc-card,
.cs-card, .feature-box, .step-card, .work-chip, .global-flag-row {
  transition: border-color .22s ease,
              transform .22s cubic-bezier(.22,.61,.36,1),
              box-shadow .28s ease,
              background .2s ease, color .2s ease;
  will-change: transform;
}
/* add real shadow lift where hover only moved the card */
.pillar-card:hover, .tech-card:hover, .svc-card:hover, .cs-card:hover,
.feature-box:hover, .step-card:hover { box-shadow: var(--shadow-lift); }

/* TACTILE PRESS — click feedback */
.btn:active { transform: translateY(0) scale(.97); box-shadow: 0 2px 8px rgba(190,30,69,.20); }
.pillar-card:active, .sol-card:active, .tech-card:active, .partner-card:active,
.prod-card:active, .svc-card:active, .cs-card:active, .feature-box:active,
.step-card:active, .wmap-stat:active { transform: translateY(-1px) scale(.994); }
.trusted-logo:active img, .nav-cta:active, .work-chip:active { transform: scale(.96); }

/* ARROW / LINK nudge on card hover */
.sol-card-link { display:inline-block; transition: transform .2s ease, color .2s ease; }
.sol-card:hover .sol-card-link { transform: translateX(4px); color: var(--crimson-h); }

/* playful ICON pop on hover */
.partner-mark, .tech-ico, .sol-card-icon img { transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.partner-card:hover .partner-mark { transform: scale(1.08) rotate(-3deg); }
.tech-card:hover .tech-ico { transform: translateY(-2px) scale(1.07); }
.sol-card:hover .sol-card-icon img { transform: scale(1.08) rotate(2deg); }

/* TAG pills warm on hover */
.pillar-tag { transition: border-color .2s, color .2s, background .2s; }
.pillar-card:hover .pillar-tag { border-color: var(--border-bright); color: var(--text-muted); }

/* NAV link underline grows from centre on hover (+ stays for active) */
.nav-link::after {
  content:''; position:absolute; left:14px; right:14px; bottom:-2px; height:2px;
  background: var(--navy); border-radius:2px;
  transform: scaleX(0); transform-origin: center; transition: transform .22s ease;
}
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
.nav-cta { transition: background .2s ease, transform .18s ease, box-shadow .2s ease; }
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(190,30,69,.26); }

/* form controls: lift + hover border */
.form-input, .form-select, .form-textarea { transition: border-color .2s, box-shadow .2s, transform .15s ease; }
.form-input:hover, .form-select:hover, .form-textarea:hover { border-color: var(--border-bright); }
.form-input:focus, .form-select:focus, .form-textarea:focus { transform: translateY(-1px); }

@media (prefers-reduced-motion:reduce){
  .pillar-card, .sol-card, .tech-card, .partner-card, .prod-card, .svc-card,
  .cs-card, .feature-box, .step-card, .btn, .nav-cta, .form-input, .form-select, .form-textarea { transition:none; }
}

/* ═══ LEGAL DOCUMENTS (privacy, terms) ═════════════════════ */
.legal-doc { max-width:760px; }
.legal-doc .t-h2 { font-size:clamp(19px,2.2vw,25px); margin:38px 0 12px; color:var(--text-primary); }
.legal-doc .t-body { margin-bottom:14px; }
.legal-doc a { color:var(--crimson); text-decoration:underline; text-underline-offset:2px; }
.legal-list { margin:0 0 16px 20px; padding:0; }
.legal-list li { font-family:var(--font-b); font-size:15px; line-height:1.75; color:var(--text-muted); margin-bottom:8px; }
.legal-note { margin-top:40px; padding:18px 22px; background:var(--surface-2); border:1px solid var(--border);
  border-left:3px solid var(--crimson); border-radius:var(--r-md); font-size:15px; color:var(--text-muted); }
.footer-legal-link { margin-left:14px; color:var(--text-faint); font-size:13px; transition:color .18s; }
.footer-legal-link:hover { color:var(--crimson); }

/* ═══ INTEGRATIONS (engineering page) ══════════════════════ */
.integ-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px 32px; }
.integ-label { font-family:var(--font-h); font-weight:700; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--text-faint); margin-bottom:12px; }
.integ-chips { display:flex; flex-wrap:wrap; gap:8px; }
.integ-chip { font-family:var(--font-mono); font-size:12.5px; color:var(--text-primary); background:var(--surface,#fff); border:1px solid var(--border-bright); border-radius:var(--r-sm); padding:7px 13px; transition:border-color .18s, color .18s; }
.integ-chip:hover { border-color:var(--crimson); color:var(--crimson); }
@media (max-width:700px){ .integ-grid{ grid-template-columns:1fr; } }

/* ═══ WMS PROOF BAND (Vaarnaap) ═════════════════════════════ */
.wms-proof-band { background:#14193a; padding:32px 0; }
.wms-proof-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.wms-proof-item { display:flex; align-items:center; gap:10px; font-family:var(--font-h); font-weight:600; font-size:14px; color:#fff; }
.wms-proof-check { flex-shrink:0; width:22px; height:22px; border-radius:50%; background:var(--crimson); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; }
@media (max-width:900px){ .wms-proof-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .wms-proof-grid{ grid-template-columns:1fr; } }

/* ═══ ACCESSIBILITY ════════════════════════════════════════ */
/* Skip link — visible only when focused */
.skip-link {
  position:absolute; left:-9999px; top:0; z-index:3000;
  background:var(--crimson); color:#fff; padding:12px 20px;
  font-family:var(--font-h); font-weight:600; font-size:14px;
  border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus { left:0; outline:3px solid #fff; outline-offset:-3px; }

/* Screen-reader-only utility */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Keyboard access for nav dropdowns (was hover-only = unusable by keyboard) */
.nav-item:focus-within .nav-dropdown { opacity:1; pointer-events:all; transform:translateX(-50%) translateY(0); }
.nav-dd-row:focus-within .nav-flyout { opacity:1; pointer-events:all; transform:translateX(0); }
.nav-item:focus-within .nav-chevron { transform:rotate(180deg); }

/* Respect reduced-motion globally for transitions/animations */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after {
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

/* ═══ MICRO-INTERACTIONS — round 2 ═════════════════════════ */
/* FAQ: smooth open, clearer affordance */
.faq-q { transition:background .18s ease, color .18s ease, padding-left .18s ease; }
.faq-q:hover { padding-left:28px; }
.faq-q[aria-expanded="true"] { color:var(--crimson); }
.faq-item.open { background:var(--surface-1); }
.faq-a { animation:faqIn .22s ease both; }
@keyframes faqIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }

/* Integration chips + proof items: subtle lift */
.integ-chip:hover { transform:translateY(-2px); }
.wms-proof-item { transition:transform .18s ease; }
.wms-proof-item:hover { transform:translateX(3px); }
.wms-proof-item:hover .wms-proof-check { transform:scale(1.12); }
.wms-proof-check { transition:transform .25s cubic-bezier(.34,1.56,.64,1); }

/* Footer links: slide on hover */
.footer-link { display:inline-block; transition:color .18s ease, transform .18s ease; }
.footer-link:hover { color:var(--crimson); transform:translateX(3px); }

/* Client/partner logo tiles already lift — add focus parity for keyboard users */
.partner-card:focus-visible, .wmap-stat:focus-visible, .faq-q:focus-visible {
  outline:2px solid var(--crimson); outline-offset:3px;
}

/* Form: clearer invalid state after the user has interacted */
.form-input:not(:placeholder-shown):invalid,
.form-textarea:not(:placeholder-shown):invalid { border-color:var(--danger); }

/* Section labels: small animated leading rule */
.sec-label { position:relative; }

/* ═══════════════════════════════════════════════════════════════
   INTERACTION LAYER — toasts, offline state, form feedback
   (paired with assets/js/ux.js)
═══════════════════════════════════════════════════════════════ */

/* ── Toasts ──────────────────────────────────────────────── */
.toast-host{
  position:fixed; z-index:9000; left:50%; bottom:24px; transform:translateX(-50%);
  display:flex; flex-direction:column; gap:10px; align-items:center;
  pointer-events:none; width:min(94vw,440px);
}
.toast{
  width:100%; pointer-events:auto;
  background:var(--navy,#0d1030); color:#f4f6f8;
  border:1px solid rgba(255,255,255,.14); border-radius:12px;
  padding:13px 18px; font-size:14px; line-height:1.5;
  box-shadow:0 12px 34px rgba(13,16,48,.28);
  opacity:0; transform:translateY(14px) scale(.97);
  transition:opacity .28s ease, transform .28s cubic-bezier(.22,.61,.36,1);
}
.toast.in{opacity:1; transform:translateY(0) scale(1);}
.toast-ok{border-left:3px solid #22c55e}
.toast-warn{border-left:3px solid #e0b020}
.toast-info{border-left:3px solid var(--crimson)}

/* ── Offline bar ─────────────────────────────────────────── */
.offline-bar{
  position:fixed; z-index:9100; left:0; right:0; top:0;
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:#2b2f52; color:#fff; font-size:13.5px; font-weight:500;
  padding:9px 18px; text-align:center;
  transform:translateY(-100%); transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.offline-bar.show{transform:translateY(0)}
.offline-dot{
  width:8px; height:8px; border-radius:50%; background:#e0b020; flex:0 0 auto;
  animation:offlinePulse 1.8s ease-in-out infinite;
}
@keyframes offlinePulse{0%,100%{opacity:1}50%{opacity:.35}}
/* push the fixed nav down so the bar never covers it */
.is-offline #nav{top:36px}
.is-offline{scroll-padding-top:calc(var(--nav-h,68px) + 36px)}

/* ── Inline field validation ─────────────────────────────── */
.form-input.is-invalid,.form-select.is-invalid,.form-textarea.is-invalid{
  border-color:var(--danger,#ef4444);
  box-shadow:0 0 0 3px rgba(239,68,68,.12);
}
.field-err{
  margin:7px 0 0; font-size:12.5px; line-height:1.45; color:var(--danger,#ef4444);
  display:flex; gap:6px; align-items:flex-start;
}
.field-err::before{content:'⚠'; flex:0 0 auto; font-size:12px; line-height:1.5}

.char-count{
  margin-top:6px; font-size:11.5px; color:var(--text-faint); text-align:right;
  opacity:0; transition:opacity .2s, color .2s;
}
.char-count.show{opacity:1}
.char-count.warn{color:#e0b020}
.char-count.over{color:var(--danger,#ef4444); font-weight:600}

.offline-note{
  margin:0 0 14px; padding:11px 15px; border-radius:10px; font-size:13.5px; line-height:1.55;
  background:rgba(224,176,32,.1); border:1px solid rgba(224,176,32,.32); color:#8a6a10;
}

/* ── Submit button: busy state ───────────────────────────── */
.btn.is-loading{opacity:.82; cursor:progress; pointer-events:none}
.btn.is-blocked{opacity:.55}
.spinner{
  width:15px; height:15px; border-radius:50%; flex:0 0 auto;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Ripple ──────────────────────────────────────────────── */
.btn{overflow:hidden}
.ripple{
  position:absolute; border-radius:50%; pointer-events:none;
  background:rgba(255,255,255,.38); transform:scale(0); opacity:.85;
  animation:ripple .6s ease-out forwards;
}
.btn-ghost .ripple,.btn-outline-crimson .ripple{background:rgba(190,30,69,.22)}
@keyframes ripple{to{transform:scale(1); opacity:0}}

/* ── Copy affordance ─────────────────────────────────────── */
[data-copy]{
  cursor:pointer; border:none; background:none; font:inherit; color:inherit;
  padding:0; display:inline-flex; align-items:center; gap:6px;
  transition:color .18s;
}
[data-copy]::after{
  content:'copy'; font-size:10px; letter-spacing:.6px; text-transform:uppercase;
  color:var(--text-faint); border:1px solid var(--border); border-radius:5px;
  padding:1px 5px; opacity:0; transition:opacity .18s, color .18s, border-color .18s;
}
[data-copy]:hover::after,[data-copy]:focus-visible::after{opacity:1}
[data-copy].copied::after{content:'copied'; color:#22c55e; border-color:#22c55e; opacity:1}

/* ── Back to top ─────────────────────────────────────────── */
.to-top{
  /* 84px, not 22px: the floating CTA occupies the bottom-right corner and
     the two were overlapping once both were on screen. This sits above it. */
  position:fixed; z-index:800; right:22px; bottom:84px;
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface,#fff); color:var(--text-primary);
  border:1px solid var(--border); box-shadow:0 6px 20px rgba(13,16,48,.14);
  opacity:0; visibility:hidden; transform:translateY(10px) scale(.9);
  transition:opacity .25s, transform .25s cubic-bezier(.22,.61,.36,1), visibility .25s, border-color .2s, color .2s;
}
.to-top.show{opacity:1; visibility:visible; transform:translateY(0) scale(1)}
.to-top:hover{border-color:var(--crimson); color:var(--crimson); transform:translateY(-2px)}
.to-top:active{transform:translateY(0) scale(.94)}
/* Three things live at the bottom of the screen: the floating CTA, the
   back-to-top button and the toast stack. They appear at different scroll
   depths and were overlapping once two were on screen together, so they
   are stacked explicitly instead of left to collide.

   Phone — bottom to top:  CTA → toast (full width) → back-to-top
   Desktop — the toast is centred and the CTA sits right, so only the
   back-to-top needs to clear the CTA.                                   */
.toast-host{bottom:88px}
@media (max-width:760px){ .to-top{right:16px; bottom:148px} }
@media (min-width:761px){ .toast-host{bottom:24px} }

/* ── Keyboard focus, site-wide ───────────────────────────── */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--crimson); outline-offset:2px; border-radius:4px;
}
body.nav-open{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .toast,.offline-bar,.to-top{transition:none}
  .ripple,.spinner,.offline-dot{animation:none}
  .spinner{border-top-color:transparent; border-right-color:#fff}
}

/* ── 404 "did you mean" ──────────────────────────────────── */
.nf-suggest{
  max-width:620px; margin:0 auto 30px; padding:20px 22px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-lg);
}
.nf-suggest-label{
  font-family:var(--font-h); font-size:12px; font-weight:700; letter-spacing:.8px;
  text-transform:uppercase; color:var(--text-faint); margin:0 0 14px;
}
.nf-suggest-list{display:flex; flex-direction:column; gap:8px;}
.nf-suggest-link{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 15px; border-radius:var(--r-md); text-decoration:none;
  background:var(--surface); border:1px solid var(--border);
  font-family:var(--font-h); font-weight:600; font-size:14.5px; color:var(--text-primary);
  transition:border-color .2s, transform .18s cubic-bezier(.22,.61,.36,1), color .2s, box-shadow .22s;
}
.nf-suggest-link span{color:var(--crimson); transition:transform .2s ease;}
.nf-suggest-link:hover{
  border-color:var(--crimson); color:var(--crimson);
  transform:translateX(3px); box-shadow:var(--shadow-lift);
}
.nf-suggest-link:hover span{transform:translateX(3px);}
.nf-suggest-link:active{transform:translateX(1px) scale(.995);}
@media (prefers-reduced-motion:reduce){
  .nf-suggest-link,.nf-suggest-link span{transition:none;}
}