/* =============================================================
   Smooth Power Corporate — 2026 Design System
   Inspired by: Anthropic · Linear · Vercel · Stripe · Apple
   Typography: Geist Sans + Fraunces + Geist Mono
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800;900&family=Geist+Mono:wght@400;500;600&family=Fraunces:ital,wght@0,500;0,700;1,400;1,500;1,700&display=swap');

:root{
  /* Colors — warm dim palette (softened from pitch-black) */
  --bg-0:     #1a1a1f;   /* warm charcoal — lighter than pure black */
  --bg-1:     #222228;   /* surface */
  --bg-2:     #2b2b32;   /* elevated surface */
  --bg-3:     #34343d;

  --ink-0:    #faf7f2;   /* warm off-white, slightly brighter */
  --ink-1:    #eae6de;
  --ink-2:    #b8b3aa;
  --ink-3:    #7e7a72;
  --ink-4:    #4d4b46;

  --line-0:   rgba(255,255,255,.08);
  --line-1:   rgba(255,255,255,.13);
  --line-2:   rgba(255,255,255,.2);

  /* Light mode */
  --bg-light-0: #ffffff;
  --bg-light-1: #fafaf8;
  --bg-light-2: #f5f3ee;
  --ink-light-0: #0a0a0b;
  --ink-light-1: #1c1c1f;
  --ink-light-2: #5a5753;
  --ink-light-3: #8b8680;
  --line-light-0: rgba(0,0,0,.08);
  --line-light-1: rgba(0,0,0,.12);

  /* Accent — Smooth Power red + warm amber */
  --red:       #DC1E2A;
  --red-2:     #FF3B44;
  --red-soft:  #FFD4D7;

  --amber:     #FF9F43;
  --amber-2:   #FFB866;

  --violet:    #8B5CF6;
  --cyan:      #06B6D4;
  --emerald:   #10B981;

  /* Transitions */
  --t-fast: 180ms cubic-bezier(.4,0,.2,1);
  --t:      320ms cubic-bezier(.4,0,.2,1);
  --t-slow: 600ms cubic-bezier(.25,.46,.45,.94);
  --t-spring: 420ms cubic-bezier(.34,1.56,.64,1);

  /* Spacing / radii */
  --r-sm: 8px;
  --r:    14px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 32px;

  /* Shadows — subtle, warm */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.2);
  --shadow:    0 8px 24px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.08);
  --shadow-lg: 0 24px 60px -12px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.06);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{
  scroll-behavior:smooth;
  scroll-padding-top:84px;
  -webkit-text-size-adjust:100%;
  background:var(--bg-0);
  color-scheme: dark;
}
body{
  font-family:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink-0);
  background:var(--bg-0);
  line-height:1.55;
  font-size:16px;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:'ss01','ss02','ss03','cv11';
  overflow-x:hidden;
  letter-spacing:-.01em;
}

img,svg,video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:none; background:none; color:inherit; font-family:inherit; }

/* =============================================================
   Scroll Progress Bar
   ============================================================= */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:2px;
  z-index:200; pointer-events:none;
  background:linear-gradient(90deg,var(--red) 0%,var(--amber) 50%,var(--violet) 100%);
  transform-origin:left;
  animation: scroll-progress linear;
  animation-timeline: scroll(root);
  transform: scaleX(0);
}
@keyframes scroll-progress { to { transform: scaleX(1); } }

/* =============================================================
   Grain / Noise overlay
   ============================================================= */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* =============================================================
   Layout
   ============================================================= */
.container{ max-width:1400px; margin:0 auto; padding:0 40px; position:relative; z-index:2; }
.container-narrow{ max-width:1040px; margin:0 auto; padding:0 40px; position:relative; z-index:2; }
.section{ padding:120px 0; position:relative; }
.section-sm{ padding:80px 0; position:relative; }
.section-lg{ padding:160px 0; position:relative; }
@media(max-width:768px){
  .container,.container-narrow{ padding:0 22px; }
  .section{ padding:72px 0; }
  .section-sm{ padding:52px 0; }
  .section-lg{ padding:96px 0; }
}

/* =============================================================
   Typography
   ============================================================= */

/* Mono — for specs, year numbers, technical callouts */
.mono{
  font-family:'Geist Mono','SF Mono',Menlo,monospace;
  letter-spacing:-.01em;
  font-feature-settings:'ss01','ss03','zero';
}

/* Serif italic — editorial accents */
.serif-it{
  font-family:'Fraunces',Georgia,serif;
  font-style:italic;
  font-weight:500;
  letter-spacing:-.02em;
  font-feature-settings:'ss01';
}
.serif{
  font-family:'Fraunces',Georgia,serif;
  font-weight:500;
  letter-spacing:-.025em;
}

/* Eyebrow — small caps label */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Geist Mono',monospace;
  font-size:11px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-2); margin-bottom:24px;
}
.eyebrow::before{
  content:''; width:20px; height:1px;
  background:linear-gradient(90deg,var(--red),transparent);
}
.eyebrow.red{ color:var(--red-2); }
.eyebrow.amber{ color:var(--amber); }

/* Headings */
h1,h2,h3,h4,h5,h6{
  font-family:'Geist',-apple-system,sans-serif;
  letter-spacing:-.03em; line-height:1.04; font-weight:700;
  color:var(--ink-0);
}

.h-monumental{
  font-size:clamp(72px,14vw,220px);
  font-weight:800; letter-spacing:-.055em; line-height:.88;
}
.h-display{
  font-size:clamp(56px,8vw,128px);
  font-weight:800; letter-spacing:-.045em; line-height:.94;
}
.h-1{
  font-size:clamp(40px,5.5vw,80px);
  font-weight:700; letter-spacing:-.035em; line-height:1.02;
}
.h-2{
  font-size:clamp(30px,4vw,56px);
  font-weight:700; letter-spacing:-.025em; line-height:1.08;
}
.h-3{
  font-size:clamp(22px,2.2vw,34px);
  font-weight:600; letter-spacing:-.02em; line-height:1.2;
}
.h-4{ font-size:20px; font-weight:600; letter-spacing:-.015em; line-height:1.3; }

.lead{
  font-size:clamp(17px,1.3vw,21px); font-weight:400; line-height:1.55;
  color:var(--ink-2); max-width:640px;
}
.lead-lg{ font-size:clamp(20px,1.6vw,26px); line-height:1.5; }

/* Animated gradient text */
.grad-text{
  background:linear-gradient(135deg,var(--ink-0) 0%,var(--ink-2) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.grad-aurora{
  background:linear-gradient(90deg,#FF3B44 0%,#FF9F43 30%,#8B5CF6 65%,#06B6D4 100%);
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  animation: shift-grad 8s linear infinite;
}
@keyframes shift-grad{
  0%{ background-position:0% center; }
  100%{ background-position:200% center; }
}
.grad-amber{
  background:linear-gradient(135deg,#FF9F43 0%,#FFB866 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}

/* Selection */
::selection{ background:var(--red); color:#fff; }

/* =============================================================
   Aurora gradient background (for hero + dark sections)
   ============================================================= */
.aurora{
  position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;
}
.aurora::before, .aurora::after{
  content:''; position:absolute; border-radius:50%; filter:blur(120px);
  animation: drift 24s ease-in-out infinite alternate;
}
.aurora::before{
  width:700px; height:700px; top:-200px; right:-100px;
  background:radial-gradient(circle,rgba(220,30,42,.5) 0%,transparent 70%);
}
.aurora::after{
  width:600px; height:600px; bottom:-200px; left:-100px;
  background:radial-gradient(circle,rgba(139,92,246,.4) 0%,transparent 70%);
  animation-delay:-12s;
}
.aurora-orb{
  position:absolute; width:400px; height:400px; border-radius:50%;
  filter:blur(100px); pointer-events:none;
  animation: drift 20s ease-in-out infinite alternate;
}
.aurora-orb.amber{
  background:radial-gradient(circle,rgba(255,159,67,.3) 0%,transparent 70%);
  top:40%; left:30%;
}
.aurora-orb.cyan{
  background:radial-gradient(circle,rgba(6,182,212,.25) 0%,transparent 70%);
  bottom:20%; right:20%; animation-delay:-8s;
}
@keyframes drift{
  0%{ transform:translate(0,0) scale(1); }
  100%{ transform:translate(80px,-60px) scale(1.15); }
}

/* Grid pattern overlay */
.grid-overlay{
  position:absolute; inset:0; pointer-events:none; z-index:1;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,#000 30%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,#000 30%,transparent 80%);
}

/* =============================================================
   Buttons
   ============================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 22px; border-radius:100px;
  font-size:14px; font-weight:500; letter-spacing:-.005em;
  transition: all var(--t);
  white-space:nowrap; position:relative; overflow:hidden;
  border:1px solid transparent;
}
.btn-lg{ padding:15px 26px; font-size:14.5px; }
.btn-xl{ padding:17px 30px; font-size:15px; }

.btn-primary{
  background:var(--ink-0); color:var(--bg-0);
  font-weight:600;
}
.btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 30px -6px rgba(245,242,237,.25);
}

.btn-red{
  background:linear-gradient(135deg,var(--red) 0%,var(--red-2) 100%); color:#fff;
  font-weight:600;
  box-shadow:0 1px 0 rgba(255,255,255,.15) inset, 0 8px 22px -6px rgba(220,30,42,.4);
}
.btn-red:hover{
  transform:translateY(-2px);
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset, 0 16px 34px -8px rgba(220,30,42,.55);
}

.btn-ghost{
  background:rgba(255,255,255,.04); color:var(--ink-0); border-color:var(--line-1);
  backdrop-filter:blur(10px);
}
.btn-ghost:hover{
  background:rgba(255,255,255,.08); border-color:var(--line-2);
}

.btn-outline{
  background:transparent; color:var(--ink-0); border-color:var(--line-2);
}
.btn-outline:hover{
  background:rgba(255,255,255,.04); border-color:var(--ink-0);
}

.btn .arrow{ transition:transform var(--t); }
.btn:hover .arrow{ transform:translateX(3px); }

/* Magnetic button wrapper */
.magnet{ display:inline-block; }

/* Pill */
.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:6px 14px 6px 6px;
  background:rgba(255,255,255,.04); border:1px solid var(--line-1); border-radius:100px;
  font-size:12.5px; font-weight:500; color:var(--ink-1);
  backdrop-filter:blur(12px);
  position:relative; overflow:hidden;
}
.pill-tag{
  display:inline-block; padding:3px 9px;
  background:linear-gradient(135deg,var(--red),var(--red-2)); color:#fff;
  border-radius:100px; font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
}
.pill-tag.amber{ background:linear-gradient(135deg,var(--amber),var(--amber-2)); color:var(--bg-0); }
.pill-tag.violet{ background:linear-gradient(135deg,var(--violet),#A78BFA); color:#fff; }

/* =============================================================
   Navigation
   ============================================================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  backdrop-filter:blur(16px) saturate(180%); -webkit-backdrop-filter:blur(16px) saturate(180%);
  background:rgba(10,10,11,.72);
  border-bottom:1px solid var(--line-0);
  transition: all var(--t);
}
.nav.scrolled{
  background:rgba(10,10,11,.9);
  border-bottom-color:var(--line-1);
}
.nav-inner{
  max-width:1400px; margin:0 auto; padding:0 40px;
  height:66px; display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav-logo{
  display:flex; align-items:center; gap:10px;
  font-size:16.5px; font-weight:700; letter-spacing:-.02em; color:var(--ink-0);
}
.nav-logo-mark{
  width:28px; height:28px;
  background:linear-gradient(135deg,var(--red) 0%,var(--red-2) 100%);
  border-radius:7px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(220,30,42,.35), inset 0 1px 0 rgba(255,255,255,.18);
  position:relative; overflow:hidden;
}

.nav-links{
  display:flex; align-items:center; gap:2px;
}
.nav-links a{
  padding:8px 14px; font-size:13.5px; font-weight:500;
  color:var(--ink-2); border-radius:100px;
  transition:all var(--t-fast); position:relative;
}
.nav-links a:hover{ background:rgba(255,255,255,.04); color:var(--ink-0); }
.nav-links a.active{ background:rgba(255,255,255,.06); color:var(--ink-0); }

.nav-cta{ display:flex; align-items:center; gap:8px; }
.nav-toggle{ display:none; padding:10px; border-radius:10px; }
.nav-toggle svg{ width:20px; height:20px; stroke:var(--ink-0); }

@media(max-width:1024px){
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
  .nav-cta .btn:not(:last-child){ display:none; }
  .nav-inner{ padding:0 22px; }
}

/* Mobile menu */
.mobile-menu{
  position:fixed; inset:66px 0 0 0; z-index:99;
  background:var(--bg-0); padding:28px 22px;
  transform:translateX(100%); transition:transform var(--t);
  overflow-y:auto;
}
.mobile-menu.open{ transform:translateX(0); }
.mobile-menu a{
  display:block; padding:18px 0; border-bottom:1px solid var(--line-0);
  font-size:20px; font-weight:600; letter-spacing:-.02em; color:var(--ink-0);
}
.mobile-menu .btn{ margin-top:24px; width:100%; }

/* =============================================================
   HERO — Monumental typography
   ============================================================= */
.hero{
  position:relative; padding:180px 0 96px;
  background:var(--bg-0); overflow:hidden;
}
.hero-inner{ position:relative; z-index:2; }

/* ---------- Hero backdrop photo (PCB image) ---------- */
.hero-bg-image{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  overflow:hidden;
}
.hero-bg-image picture,
.hero-bg-image img{
  position:absolute; top:0; right:0; bottom:0; left:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center right;
  /* Keep the amber highlights, push shadows deeper — photo blends into bg-0 */
  filter:saturate(1.08) contrast(1.08) brightness(.78);
  opacity:.78;
}
/* Curtain layer: top/bottom vignette + left-to-right curtain so headline reads */
.hero-bg-image::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(10,10,12,.55) 0%, rgba(10,10,12,0) 18%, rgba(10,10,12,0) 70%, rgba(10,10,12,.85) 100%),
    linear-gradient(90deg, var(--bg-0) 0%, rgba(10,10,12,.92) 22%, rgba(10,10,12,.55) 48%, rgba(10,10,12,.25) 72%, rgba(10,10,12,.15) 100%);
}
/* Subtle red/amber brand glow over the photo */
.hero-bg-image::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 45% 55% at 88% 45%, rgba(220,30,42,.18) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 70% 80%, rgba(240,168,48,.10) 0%, transparent 70%);
  mix-blend-mode:screen;
}
/* ---------- City lights cross-fade hero (off → on) ----------
   The panorama is 3:1 (1536×512). To keep it from being cropped we anchor
   the container to the bottom of the hero and give it the image's NATIVE
   aspect ratio — width fills the viewport, height = width / 3. The rest
   of the hero (text + metrics) sits in the area above the panorama, with
   a soft gradient masking the panorama's top edge into the page bg. */
.hero.has-hero-cityfade{
  overflow:hidden;
  padding:120px 0 0;
  min-height:100vh;
}
/* Trim headline + spacing for the cityfade variant so the text block fits
   in the upper viewport area, leaving the bottom for the full-quality
   panorama anchored at the bottom edge. */
.hero.has-hero-cityfade .hero-inner{ padding-bottom:8vw; }
.hero.has-hero-cityfade h1{
  font-size:clamp(48px, 8.4vw, 132px);
  margin-bottom:24px;
}
.hero.has-hero-cityfade .hero-pill{ margin-bottom:24px; }
.hero.has-hero-cityfade .hero-sub{ margin-bottom:24px; }
.hero.has-hero-cityfade .hero-metrics{
  margin-top:32px; gap:18px;
}
.hero.has-hero-cityfade .hero-metric .num{ font-size:clamp(28px, 3.4vw, 44px); }
.hero.has-hero-cityfade .hero-bg-image.hero-cityfade{
  position:absolute; left:0; right:0; bottom:0; top:auto;
  width:100%; height:auto;
  aspect-ratio: 1536 / 512;
}
@media (max-width:900px){
  .hero.has-hero-cityfade{ padding:96px 0 0; min-height:auto; }
  .hero.has-hero-cityfade .hero-inner{ padding-bottom:18vw; }
}
.hero-cityfade .hero-bg-on,
.hero-cityfade .hero-bg-off{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center center;
  filter:saturate(1.06) contrast(1.04);
  pointer-events:none;
}
.hero-cityfade .hero-bg-on { z-index:0; opacity:1 !important; }
.hero-cityfade .hero-bg-off{ z-index:1; }

/* Narrow fade at the panorama's top + bottom so it blends into the page bg
   without a hard horizon line. Most of the panorama remains untouched. */
.hero-cityfade::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:
    linear-gradient(180deg,
      var(--bg-0)         0%,
      rgba(10,10,12,.55)  3%,
      rgba(10,10,12,0)    8%,
      rgba(10,10,12,0)    92%,
      rgba(10,10,12,.45)100%);
  transition:opacity 1100ms cubic-bezier(.4,0,.2,1);
}
.hero-cityfade.is-lit::before{ opacity:.7; }
/* Warm bloom that lifts once the city lights up */
.hero-cityfade::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:
    radial-gradient(ellipse 60% 80% at 50% 88%, rgba(240,168,48,.14) 0%, transparent 70%),
    radial-gradient(ellipse 35% 55% at 88% 60%, rgba(220,30,42,.10) 0%, transparent 70%);
  mix-blend-mode:screen; opacity:0;
  transition:opacity 1400ms cubic-bezier(.4,0,.2,1);
}
.hero-cityfade.is-lit::after{ opacity:1; }

@media (prefers-reduced-motion: reduce){
  .hero-cityfade .hero-bg-off,
  .hero-cityfade::before,
  .hero-cityfade::after{ transition:none; }
}

@media (max-width: 900px){
  .hero-bg-image img{ object-position: 70% center; filter:saturate(1.05) contrast(1.05) brightness(.62); opacity:.55; }
  .hero-cityfade .hero-bg-on,
  .hero-cityfade .hero-bg-off{ object-position:center center; filter:saturate(1.05) contrast(1.05); }
  .hero-bg-image::before{
    background:
      linear-gradient(180deg, rgba(10,10,12,.92) 0%, rgba(10,10,12,.6) 30%, rgba(10,10,12,.45) 60%, rgba(10,10,12,.92) 100%);
  }
}
@media (prefers-reduced-motion: no-preference){
  /* Animating <video> directly is unreliable across browsers (compositor layer).
     We animate the wrapper instead — same visual effect, works on every browser. */
  .hero.has-hero-bg .hero-bg-image{
    animation: hero-breathe 22s ease-in-out infinite alternate;
    transform-origin: 65% 55%;
    will-change: transform;
  }
  @keyframes hero-breathe{
    0%{ transform: scale(1.0); }
    100%{ transform: scale(1.14); }
  }
}

.hero-pill{ margin-bottom:40px; }

.hero h1{
  font-size:clamp(64px,11.5vw,188px);
  font-weight:800; letter-spacing:-.055em; line-height:.88;
  margin-bottom:40px;
  color:var(--ink-0);
}
.hero h1 .line{ display:block; }
.hero h1 em{
  font-family:'Fraunces',serif; font-style:italic; font-weight:500;
  background:linear-gradient(90deg,#FF3B44 0%,#FF9F43 50%,#8B5CF6 100%);
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  animation: shift-grad 10s linear infinite;
  letter-spacing:-.03em;
}

.hero-sub{
  font-size:clamp(17px,1.4vw,21px); font-weight:400;
  color:var(--ink-2); max-width:560px; line-height:1.55;
  margin-bottom:48px;
}

.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; }

.hero-metrics{
  margin-top:88px; padding-top:48px; border-top:1px solid var(--line-0);
  display:grid; grid-template-columns:repeat(4,1fr); gap:40px;
}
.hero-metric .num{
  font-family:'Geist',sans-serif;
  font-size:clamp(36px,4.2vw,56px); font-weight:700; letter-spacing:-.035em; line-height:1;
  color:var(--ink-0); margin-bottom:10px;
}
.hero-metric .num sup{ font-size:.55em; color:var(--ink-3); margin-left:2px; font-weight:500; }
.hero-metric .lbl{
  font-family:'Geist Mono',monospace;
  font-size:11px; font-weight:500;
  color:var(--ink-3); letter-spacing:.14em; text-transform:uppercase;
}
@media(max-width:768px){
  .hero{ padding:130px 0 72px; }
  .hero-metrics{ grid-template-columns:repeat(2,1fr); gap:28px 24px; margin-top:56px; padding-top:32px; }
}

/* =============================================================
   MARQUEE — Infinite scrolling strip
   ============================================================= */
.marquee{
  position:relative;
  padding:32px 0;
  border-top:1px solid var(--line-0);
  border-bottom:1px solid var(--line-0);
  background:var(--bg-1);
  overflow:hidden;
}
.marquee::before,.marquee::after{
  content:''; position:absolute; top:0; bottom:0; width:120px; z-index:2; pointer-events:none;
}
.marquee::before{ left:0; background:linear-gradient(90deg,var(--bg-1),transparent); }
.marquee::after{ right:0; background:linear-gradient(270deg,var(--bg-1),transparent); }

.marquee-track{
  display:flex; gap:64px; width:max-content;
  animation: marquee 50s linear infinite;
  font-family:'Geist Mono',monospace;
  font-size:14px; font-weight:500;
  color:var(--ink-3); letter-spacing:-.01em;
  white-space:nowrap;
}
.marquee-track:hover{ animation-play-state:paused; }
.marquee-item{
  display:inline-flex; align-items:center; gap:12px; flex-shrink:0;
}
.marquee-dot{ color:var(--ink-4); opacity:.6; }
.marquee-item strong{ color:var(--ink-0); font-weight:600; }
@keyframes marquee{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}

/* =============================================================
   BENTO GRID
   ============================================================= */
.bento{
  display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:minmax(240px,auto);
  gap:16px;
}
.bento-card{
  position:relative; padding:32px; border-radius:24px;
  background:var(--bg-1);
  border:1px solid var(--line-0);
  overflow:hidden;
  transition:all var(--t); cursor:pointer;
  display:flex; flex-direction:column; justify-content:space-between;
}
.bento-card::before{
  content:''; position:absolute; inset:0; border-radius:24px;
  padding:1px;
  background:linear-gradient(135deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,0) 50%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events:none; opacity:.6;
}
.bento-card:hover{
  transform:translateY(-2px); background:var(--bg-2);
  border-color:var(--line-2);
}
.bento-card:hover::before{ opacity:1; }

.bento-card .b-eyebrow{
  font-family:'Geist Mono',monospace; font-size:10.5px; font-weight:500;
  color:var(--ink-3); letter-spacing:.14em; text-transform:uppercase;
}
.bento-card h3{
  font-size:clamp(22px,2.2vw,30px); font-weight:600; letter-spacing:-.025em; line-height:1.12;
  margin-top:12px; color:var(--ink-0);
}
.bento-card p{
  font-size:14.5px; color:var(--ink-2); line-height:1.55; margin-top:12px;
  max-width:480px;
}
.bento-card .b-footer{
  display:flex; justify-content:space-between; align-items:flex-end; margin-top:24px;
}
.bento-card .b-link{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13.5px; font-weight:500; color:var(--ink-0);
}
.bento-card .b-link .arrow{ transition:transform var(--t); }
.bento-card:hover .b-link .arrow{ transform:translateX(3px); }

/* Bento sizes */
.bento-6 { grid-column: span 6; }
.bento-5 { grid-column: span 5; }
.bento-4 { grid-column: span 4; }
.bento-3 { grid-column: span 3; }
.bento-2 { grid-column: span 2; }
.bento-tall { grid-row: span 2; }

/* Hero / Large bento cards */
.bento-card.hero-card{
  padding:48px; grid-row:span 2;
  background:linear-gradient(135deg,var(--bg-1) 0%,var(--bg-2) 100%);
}
.bento-card.hero-card::after{
  content:''; position:absolute; top:-50%; right:-20%; width:600px; height:600px;
  background:radial-gradient(circle,rgba(220,30,42,.18) 0%,transparent 60%);
  filter:blur(60px); pointer-events:none;
}
.bento-card.hero-card h3{ font-size:clamp(30px,3vw,44px); }

/* Bento art (decorative SVG / image inside cards) */
.bento-card .b-content{ position:relative; z-index:2; max-width:62%; }
.bento-card.hero-card .b-content{ max-width:60%; }
.bento-card .b-footer{ position:relative; z-index:2; }
.bento-card .b-art{
  position:absolute; right:0; bottom:0;
  pointer-events:none; z-index:1;
  transition:opacity var(--t), transform var(--t);
  opacity:.85;
}
.bento-card:hover .b-art{ opacity:1; transform:translate(-2px,-2px); }
.bento-card .b-art-radar-svg,
.bento-card .b-art-spd,
.bento-card .b-art-iso,
.bento-card .b-art-noniso,
.bento-card .b-art-strip,
.bento-card .b-art-dim,
.bento-card .b-art-surge{
  width:62%; height:auto; max-height:78%;
}
/* Hand-sketched product images on bento tiles (Strip / Dimmable / Flicker / Dusk / UPS).
   Sketch sits as the prominent base at right-bottom; the existing decorative SVG sits
   above as a smaller, lower-opacity animated overlay so both stories tell together. */
.bento-card .b-art-sketch{
  position:absolute; right:0; bottom:0;
  width:60%; height:auto; max-height:88%;
  object-fit:contain; object-position:right bottom;
  pointer-events:none; z-index:1;
  opacity:.95;
  transition:opacity var(--t), transform var(--t);
}
.bento-card:hover .b-art-sketch{
  opacity:1; transform:translate(-2px,-2px);
}
/* When a sketch is present, the animated SVG moves to the LEFT side of the tile
   (the open "light" background area below the body text and above the footer link).
   Sketch stays on the right (the product image), SVG sits on the left blending into
   the tile background (showing what the product does). They don't overlap. */
.bento-card .b-art-sketch ~ .b-art-strip,
.bento-card .b-art-sketch ~ .b-art-dim,
.bento-card .b-art-sketch ~ .b-art-flicker,
.bento-card .b-art-sketch ~ .b-art-ups-svg,
.bento-card .b-art-sketch ~ .b-art-dusk{
  z-index:2;
  position:absolute; left:0; right:auto; bottom:60px;  /* above the footer link */
  width:38%; height:auto; max-height:42%;
  opacity:.85;
  mix-blend-mode:screen;
  pointer-events:none;
}
:root[data-theme="light"] .bento-card .b-art-sketch ~ .b-art-strip,
:root[data-theme="light"] .bento-card .b-art-sketch ~ .b-art-dim,
:root[data-theme="light"] .bento-card .b-art-sketch ~ .b-art-flicker,
:root[data-theme="light"] .bento-card .b-art-sketch ~ .b-art-ups-svg,
:root[data-theme="light"] .bento-card .b-art-sketch ~ .b-art-dusk{
  mix-blend-mode:multiply;
  opacity:.92;
}
.bento-card:hover .b-art-sketch ~ .b-art-strip,
.bento-card:hover .b-art-sketch ~ .b-art-dim,
.bento-card:hover .b-art-sketch ~ .b-art-flicker,
.bento-card:hover .b-art-sketch ~ .b-art-ups-svg,
.bento-card:hover .b-art-sketch ~ .b-art-dusk{
  opacity:1;
}
@media(max-width:640px){
  .bento-card .b-art-sketch ~ .b-art-strip,
  .bento-card .b-art-sketch ~ .b-art-dim,
  .bento-card .b-art-sketch ~ .b-art-flicker,
  .bento-card .b-art-sketch ~ .b-art-ups-svg,
  .bento-card .b-art-sketch ~ .b-art-dusk{ display:none; }
}
:root[data-theme="light"] .bento-card .b-art-sketch{ opacity:.92; }
@media(max-width:640px){
  .bento-card .b-art-sketch{ width:78%; max-height:80%; }
  .bento-card .b-art-sketch ~ .b-art-strip,
  .bento-card .b-art-sketch ~ .b-art-dim,
  .bento-card .b-art-sketch ~ .b-art-flicker,
  .bento-card .b-art-sketch ~ .b-art-ups-svg,
  .bento-card .b-art-sketch ~ .b-art-dusk{ display:none; }
}

/* Radar art: sketch image + animated radar effects layered together */
.bento-card .b-art-radar-stack{
  position:absolute; right:0; bottom:0;
  width:62%; height:92%;
  pointer-events:none; z-index:1;
  transition:opacity var(--t), transform var(--t);
}
.bento-card:hover .b-art-radar-stack{
  transform:translate(-2px,-2px);
}
.bento-card .b-art-radar-sketch{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain; object-position:right bottom;
  opacity:.95;
}
.bento-card .b-art-radar-svg{
  position:absolute; inset:0;
  width:100%; height:100%;
}

/* In light mode the radar card is cream: subdue the red radial glow on ::after so it doesn't muddy the sketch */
:root[data-theme="light"] .bento-card.hero-card::after{
  background:radial-gradient(circle,rgba(220,30,42,.06) 0%,transparent 60%);
}

@media(max-width:640px){
  .bento-card .b-content{ max-width:100%; }
  .bento-card .b-art-radar-stack,
  .bento-card .b-art-spd,
  .bento-card .b-art-iso,
  .bento-card .b-art-noniso,
  .bento-card .b-art-strip,
  .bento-card .b-art-dim,
  .bento-card .b-art-surge{ width:50%; opacity:.5; }
}

/* =============================================================
   BENTO ART HOVER ANIMATIONS
   Each tile's motif comes alive when the cursor is on the card.
   ============================================================= */

/* --- Radar: arcs ripple outward, scan beam sweeps, blips blink --- */
.b-art-radar-svg .r-arcs circle{
  transform-origin:center;
  transform-box:fill-box;
  opacity:1;
}
.bento-card:hover .b-art-radar-svg .r-arcs circle{
  animation: arc-ripple 2.4s ease-out infinite;
}
.bento-card:hover .b-art-radar-svg .r-arcs circle:nth-child(1){ animation-delay:0s; }
.bento-card:hover .b-art-radar-svg .r-arcs circle:nth-child(2){ animation-delay:.15s; }
.bento-card:hover .b-art-radar-svg .r-arcs circle:nth-child(3){ animation-delay:.30s; }
.bento-card:hover .b-art-radar-svg .r-arcs circle:nth-child(4){ animation-delay:.45s; }
.bento-card:hover .b-art-radar-svg .r-arcs circle:nth-child(5){ animation-delay:.60s; }
@keyframes arc-ripple{
  0%   { stroke-opacity:1; }
  60%  { stroke-opacity:.05; }
  100% { stroke-opacity:.15; }
}

/* Sweep beam (a rotating line that originates from the sensor focal point at 312,224) */
.b-art-radar-svg .r-sweep{
  transform-origin:312px 224px;
  transform-box:view-box;
}
.bento-card:hover .b-art-radar-svg .r-sweep{
  animation: radar-sweep 3.2s linear infinite;
}
@keyframes radar-sweep{
  0%   { transform:rotate(0deg);   stroke-opacity:.6; }
  100% { transform:rotate(360deg); stroke-opacity:.15; }
}

/* Sensor module pulse on hover (green radar PCB) */
.bento-card:hover .b-art-radar-svg .r-sensor > rect:first-of-type{
  animation: sensor-pulse 2s ease-in-out infinite;
}
@keyframes sensor-pulse{
  0%,100% { stroke-opacity:.85; filter:drop-shadow(0 0 0 transparent); }
  50%     { stroke-opacity:1;   filter:drop-shadow(0 0 6px rgba(52,211,153,.65)); }
}

/* Output wires shimmer on hover — current flowing PCB → sensor */
.bento-card:hover .b-art-radar-svg .r-wires path{
  stroke-dasharray: 4 6;
  animation: wire-flow 1.6s linear infinite;
}
.bento-card:hover .b-art-radar-svg .r-wires path:nth-child(2){ animation-delay:.2s; }
.bento-card:hover .b-art-radar-svg .r-wires path:nth-child(3){ animation-delay:.4s; }
.bento-card:hover .b-art-radar-svg .r-wires path:nth-child(4){ animation-delay:.6s; }
@keyframes wire-flow{
  0%   { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -20; }
}

/* Driver components glow on hover */
.bento-card:hover .b-art-radar-svg .r-driver{
  animation: driver-glow 2.5s ease-in-out infinite;
}
@keyframes driver-glow{
  0%,100% { filter:drop-shadow(0 0 0 #FF3B44); }
  50%     { filter:drop-shadow(0 0 4px rgba(255,107,107,.5)); }
}

/* Blips blink in/out staggered */
.bento-card:hover .b-art-radar-svg .r-blips circle{
  animation: blip-blink 1.6s ease-in-out infinite;
}
.bento-card:hover .b-art-radar-svg .r-blips circle:nth-child(1){ animation-delay:.0s; }
.bento-card:hover .b-art-radar-svg .r-blips circle:nth-child(2){ animation-delay:.4s; }
.bento-card:hover .b-art-radar-svg .r-blips circle:nth-child(3){ animation-delay:.8s; }
.bento-card:hover .b-art-radar-svg .r-blips circle:nth-child(4){ animation-delay:1.2s; }
.bento-card:hover .b-art-radar-svg .r-blips circle:nth-child(5){ animation-delay:.6s; }
@keyframes blip-blink{
  0%,100% { opacity:.3; }
  50%     { opacity:1; transform:scale(1.4); }
}
.b-art-radar-svg .r-blips circle{
  transform-origin:center;
  transform-box:fill-box;
}

/* --- SPD: bolt flickers, sine wave flows --- */
.b-art-spd .spd-bolt{
  transform-origin:150px 90px;
  transform-box:fill-box;
}
.bento-card:hover .b-art-spd .spd-bolt{
  animation: bolt-flash 1.2s ease-in-out infinite;
}
@keyframes bolt-flash{
  0%,100% { opacity:1;   transform:scale(1); filter:drop-shadow(0 0 0 #FFD27A); }
  50%     { opacity:.55; transform:scale(.92); }
  60%     { opacity:1;   transform:scale(1.08); filter:drop-shadow(0 0 8px #FFD27A); }
}

/* sine wave dashoffset slide */
.b-art-spd .spd-wave{
  stroke-dasharray:4 4;
  stroke-dashoffset:0;
}
.bento-card:hover .b-art-spd .spd-wave{
  animation: dash-flow 1.2s linear infinite;
}
@keyframes dash-flow{
  0%   { stroke-dashoffset:0; }
  100% { stroke-dashoffset:-16; }
}

/* shield pulse */
.bento-card:hover .b-art-spd .spd-shield{
  animation: shield-pulse 2s ease-in-out infinite;
}
@keyframes shield-pulse{
  0%,100% { stroke-opacity:.55; }
  50%     { stroke-opacity:.95; }
}

/* --- Iso HPF: coils glow alternately, ISO label pulses --- */
.bento-card:hover .b-art-iso .iso-coil-l{
  animation: coil-pulse 1.6s ease-in-out infinite;
}
.bento-card:hover .b-art-iso .iso-coil-r{
  animation: coil-pulse 1.6s ease-in-out infinite;
  animation-delay:.8s;
}
@keyframes coil-pulse{
  0%,100% { stroke-opacity:.4; stroke-width:1.4; }
  50%     { stroke-opacity:1;  stroke-width:2; filter:drop-shadow(0 0 4px #60A5FA); }
}

.bento-card:hover .b-art-iso .iso-bar{
  animation: iso-bar-glow 1.6s ease-in-out infinite;
}
@keyframes iso-bar-glow{
  0%,100% { stroke-opacity:.45; }
  50%     { stroke-opacity:1; filter:drop-shadow(0 0 4px #FF3B44); }
}

.bento-card:hover .b-art-iso .iso-label{
  animation: iso-label-pulse 1.6s ease-in-out infinite;
}
@keyframes iso-label-pulse{
  0%,100% { fill-opacity:.6; }
  50%     { fill-opacity:1; }
}

/* --- Non-Iso HPF: current flows along traces --- */
.b-art-noniso .ni-flow path{
  stroke-dasharray:8 220;
  stroke-dashoffset:228;
  opacity:0;
  filter:drop-shadow(0 0 3px #34D399);
}
.bento-card:hover .b-art-noniso .ni-flow path{
  opacity:1;
  animation: trace-flow 2s linear infinite;
}
@keyframes trace-flow{
  0%   { stroke-dashoffset:228; }
  100% { stroke-dashoffset:0; }
}

/* nodes pulse */
.b-art-noniso .ni-nodes circle{ transform-origin:center; transform-box:fill-box; }
.bento-card:hover .b-art-noniso .ni-nodes circle{
  animation: node-pulse 1.4s ease-in-out infinite;
}
.bento-card:hover .b-art-noniso .ni-nodes circle:nth-child(1){ animation-delay:0s; }
.bento-card:hover .b-art-noniso .ni-nodes circle:nth-child(2){ animation-delay:.35s; }
.bento-card:hover .b-art-noniso .ni-nodes circle:nth-child(3){ animation-delay:.70s; }
.bento-card:hover .b-art-noniso .ni-nodes circle:nth-child(4){ animation-delay:1.05s; }
@keyframes node-pulse{
  0%,100% { transform:scale(1);   filter:drop-shadow(0 0 0 #34D399); }
  50%     { transform:scale(1.6); filter:drop-shadow(0 0 6px #34D399); }
}

/* --- Strip: LEDs chase pattern --- */
.bento-card:hover .b-art-strip .led{
  animation: led-chase 1.4s ease-in-out infinite;
  transform-origin:center;
  transform-box:fill-box;
}
.bento-card:hover .b-art-strip .led-1{ animation-delay:0s; }
.bento-card:hover .b-art-strip .led-2{ animation-delay:.13s; }
.bento-card:hover .b-art-strip .led-3{ animation-delay:.26s; }
.bento-card:hover .b-art-strip .led-4{ animation-delay:.39s; }
.bento-card:hover .b-art-strip .led-5{ animation-delay:.52s; }
.bento-card:hover .b-art-strip .led-6{ animation-delay:.65s; }
@keyframes led-chase{
  0%,100% { opacity:.5; transform:scale(1); }
  20%     { opacity:1;  transform:scale(1.25); filter:drop-shadow(0 0 8px #FFE3A8); }
  60%     { opacity:.55; transform:scale(1); }
}

/* --- Dimmable: arc fills from 10% to 100%, holds, fades back --- */
/* Active arc length ≈ π·60·(0.9) ≈ 170 (90% of full semicircle) */
.b-art-dim .dim-arc{
  stroke-dasharray:170;
  stroke-dashoffset:0;
}
.bento-card:hover .b-art-dim .dim-arc{
  animation: dial-sweep 2.6s ease-in-out infinite;
}
@keyframes dial-sweep{
  0%   { stroke-dashoffset:170; }                                        /* empty (only 10% mark visible) */
  45%  { stroke-dashoffset:0; filter:drop-shadow(0 0 6px #A78BFA); }     /* full 100% */
  75%  { stroke-dashoffset:0; filter:drop-shadow(0 0 6px #A78BFA); }     /* hold at 100% */
  100% { stroke-dashoffset:170; }                                        /* gentle reset */
}

.b-art-dim .dim-handle{
  transform-origin:center;
  transform-box:fill-box;
}
.bento-card:hover .b-art-dim .dim-handle{
  animation: dial-handle 2.6s ease-in-out infinite;
}
@keyframes dial-handle{
  0%   { opacity:.4; transform:scale(.85); }
  45%  { opacity:1;  transform:scale(1.25); filter:drop-shadow(0 0 8px #A78BFA); }
  75%  { opacity:1;  transform:scale(1.15); filter:drop-shadow(0 0 8px #A78BFA); }
  100% { opacity:.4; transform:scale(.85); }
}

/* --- Surge: ghost spike flashes, real spike clips, Vc line glows --- */
.b-art-surge .surge-ghost{
  opacity:.22;
}
.bento-card:hover .b-art-surge .surge-ghost{
  animation: ghost-spike 1.8s ease-in-out infinite;
}
@keyframes ghost-spike{
  0%,100% { opacity:.05; }
  50%     { opacity:.55; }
}

.bento-card:hover .b-art-surge .surge-spike{
  animation: spike-clip 1.8s ease-in-out infinite;
  filter:drop-shadow(0 0 4px #FFD27A);
}
@keyframes spike-clip{
  0%,100% { stroke-opacity:.6; }
  50%     { stroke-opacity:1; stroke-width:2.2; }
}

.bento-card:hover .b-art-surge .surge-vc{
  animation: vc-flash 1.8s ease-in-out infinite;
}
@keyframes vc-flash{
  0%,100% { stroke-opacity:.35; }
  50%     { stroke-opacity:1; filter:drop-shadow(0 0 4px #FF3B44); }
}

/* sine baseline subtle wave */
.b-art-surge .surge-ac{
  stroke-dasharray:3 3;
  stroke-dashoffset:0;
}
.bento-card:hover .b-art-surge .surge-ac{
  animation: dash-flow 1.6s linear infinite;
}

/* Honor reduced-motion */
@media (prefers-reduced-motion: reduce){
  .bento-card:hover .b-art-radar-svg .r-arcs circle,
  .bento-card:hover .b-art-radar-svg .r-sweep,
  .bento-card:hover .b-art-radar-svg .r-blips circle,
  .bento-card:hover .b-art-spd .spd-bolt,
  .bento-card:hover .b-art-spd .spd-wave,
  .bento-card:hover .b-art-spd .spd-shield,
  .bento-card:hover .b-art-iso .iso-coil-l,
  .bento-card:hover .b-art-iso .iso-coil-r,
  .bento-card:hover .b-art-iso .iso-bar,
  .bento-card:hover .b-art-iso .iso-label,
  .bento-card:hover .b-art-noniso .ni-flow path,
  .bento-card:hover .b-art-noniso .ni-nodes circle,
  .bento-card:hover .b-art-strip .led,
  .bento-card:hover .b-art-dim .dim-arc,
  .bento-card:hover .b-art-dim .dim-handle,
  .bento-card:hover .b-art-surge .surge-ghost,
  .bento-card:hover .b-art-surge .surge-spike,
  .bento-card:hover .b-art-surge .surge-vc,
  .bento-card:hover .b-art-surge .surge-ac{
    animation:none !important;
  }
}

.bento-card.accent-red{
  background:linear-gradient(135deg,#1a0608 0%,#0a0a0b 100%);
  border-color:rgba(220,30,42,.2);
}
.bento-card.accent-amber{
  background:linear-gradient(135deg,#1a1204 0%,#0a0a0b 100%);
  border-color:rgba(255,159,67,.2);
}
.bento-card.accent-violet{
  background:linear-gradient(135deg,#14091a 0%,#0a0a0b 100%);
  border-color:rgba(139,92,246,.2);
}

/* Light theme — accent cards use cream paper with subtle tint */
:root[data-theme="light"] .bento-card.accent-red{
  background:linear-gradient(135deg,#fff8f7 0%,#faefee 100%);
  border-color:rgba(220,30,42,.18);
}
:root[data-theme="light"] .bento-card.accent-amber{
  background:linear-gradient(135deg,#fff8ee 0%,#fbf0e0 100%);
  border-color:rgba(255,159,67,.22);
}
:root[data-theme="light"] .bento-card.accent-violet{
  background:linear-gradient(135deg,#f9f6ff 0%,#f1ebfb 100%);
  border-color:rgba(139,92,246,.2);
}

/* Light theme — bento art SVGs.
   `mix-blend-mode: multiply` makes the SVG colors blend INTO the cream tile
   background (dark traces stay dark, light areas disappear). Per-art tuning
   below because each SVG uses different palettes and reads differently after
   multiply. */
:root[data-theme="light"] .bento-card .b-art,
:root[data-theme="light"] .bento-card .b-art-radar-stack{
  mix-blend-mode: multiply;
  opacity: .68;
  filter: saturate(1.0) contrast(1.15);
}
:root[data-theme="light"] .bento-card:hover .b-art,
:root[data-theme="light"] .bento-card:hover .b-art-radar-stack{
  opacity: .85;
}
/* Per-SVG opacity tuning. Lighter palettes (amber/cyan) need higher opacity since
   their lightness is mostly washed out by multiply on cream. */
:root[data-theme="light"] .bento-card .b-art-radar-svg{ opacity: .75; mix-blend-mode: multiply; }
:root[data-theme="light"] .bento-card .b-art-strip{ opacity: .95; filter: saturate(1.15) contrast(1.25); }
:root[data-theme="light"] .bento-card .b-art-flicker{ opacity: .92; filter: saturate(1.15) contrast(1.2); }
:root[data-theme="light"] .bento-card .b-art-dim{ opacity: .85; filter: saturate(1.1) contrast(1.15); }
:root[data-theme="light"] .bento-card .b-art-ups-svg{ opacity: .82; filter: saturate(1.1) contrast(1.15); }
:root[data-theme="light"] .bento-card .b-art-dusk{ opacity: .85; }

.bento-stat{
  font-family:'Geist',sans-serif;
  font-size:clamp(56px,7vw,96px); font-weight:700; letter-spacing:-.05em; line-height:.95;
  color:var(--ink-0);
}
.bento-stat.amber{
  background:linear-gradient(135deg,#FF9F43,#FFB866);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.bento-stat.red{
  background:linear-gradient(135deg,#FF3B44,#DC1E2A);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}

@media(max-width:1024px){
  .bento{ grid-template-columns:repeat(2,1fr); }
  .bento-card{ grid-column:span 1; grid-row:span 1; }
  .bento-card.hero-card{ grid-column:span 2; padding:36px; }
  .bento-6, .bento-5, .bento-4{ grid-column:span 2; }
  .bento-tall{ grid-row:span 1; }
}
@media(max-width:640px){
  .bento{ grid-template-columns:1fr; }
  .bento-card{ grid-column:span 1; padding:28px; }
  .bento-card.hero-card{ grid-column:span 1; padding:32px; }
  .bento-6, .bento-5, .bento-4, .bento-3, .bento-2{ grid-column:span 1; }
}

/* =============================================================
   Sticky Scroll Showcase
   ============================================================= */
.sticky-section{
  display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start;
  padding:80px 0;
}
.sticky-media{
  position:sticky; top:100px; aspect-ratio:1/1; border-radius:32px;
  background:linear-gradient(135deg,var(--bg-1) 0%,var(--bg-2) 100%);
  border:1px solid var(--line-0);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.sticky-media::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 400px 300px at 30% 40%, rgba(220,30,42,.25) 0%, transparent 60%);
}
.sticky-media-inner{ position:relative; z-index:2; padding:56px; text-align:center; }
/* Lab-photo variant: image fills the card, dark gradient overlay carries the headline */
.sticky-media-lab .sticky-media-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
  filter:saturate(1.05) contrast(1.05) brightness(.78);
  transform:scale(1.04);
  transition:transform 1.2s ease;
}
.sticky-media-lab:hover .sticky-media-bg{ transform:scale(1.08); }
.sticky-media-lab::before{
  background:
    linear-gradient(180deg, rgba(10,10,12,.35) 0%, rgba(10,10,12,.0) 30%, rgba(10,10,12,.45) 60%, rgba(10,10,12,.92) 100%),
    radial-gradient(ellipse 60% 45% at 50% 88%, rgba(220,30,42,.30) 0%, transparent 70%);
}
.sticky-media-lab .sticky-media-inner{
  position:absolute; inset:auto 0 0 0; padding:32px 32px 36px;
  text-align:left;
  text-shadow:0 2px 22px rgba(0,0,0,.55);
}
:root[data-theme="light"] .sticky-media-lab::before{
  background:
    linear-gradient(180deg, rgba(10,10,12,.10) 0%, rgba(10,10,12,.05) 35%, rgba(10,10,12,.55) 70%, rgba(10,10,12,.95) 100%),
    radial-gradient(ellipse 60% 45% at 50% 88%, rgba(220,30,42,.30) 0%, transparent 70%);
}
.sticky-steps{ display:flex; flex-direction:column; gap:120px; padding:40px 0; }
.sticky-step h3{ font-size:clamp(30px,3.4vw,48px); font-weight:600; letter-spacing:-.03em; line-height:1.08; margin-bottom:20px; }
.sticky-step p{ color:var(--ink-2); font-size:17px; line-height:1.6; max-width:460px; }
.sticky-step .step-num{
  font-family:'Geist Mono',monospace; font-size:12px; font-weight:500;
  color:var(--red-2); letter-spacing:.16em; text-transform:uppercase; margin-bottom:16px; display:block;
}

@media(max-width:1024px){
  .sticky-section{ grid-template-columns:1fr; gap:40px; padding:40px 0; }
  /* keep position:relative so absolutely-positioned children (lab bg image, inner overlay) stay contained */
  .sticky-media{ position:relative; top:auto; aspect-ratio:4/3; }
  .sticky-steps{ gap:56px; padding:0; }
}

/* =============================================================
   Category Grid (new)
   ============================================================= */
.cat-head{ text-align:center; max-width:740px; margin:0 auto 64px; }
.cat-head .eyebrow{ justify-content:center; }
.cat-head h2{ margin-bottom:20px; }
.cat-head .lead{ margin:0 auto; color:var(--ink-2); }

.cat-grid-new{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
}
.cat-card-new{
  position:relative; padding:32px; border-radius:22px;
  background:var(--bg-1); border:1px solid var(--line-0);
  min-height:300px; display:flex; flex-direction:column;
  transition:all var(--t); cursor:pointer; overflow:hidden;
}
.cat-card-new::before{
  content:''; position:absolute; top:0; right:0; width:200px; height:200px;
  background:radial-gradient(circle at top right,rgba(220,30,42,.08),transparent 70%);
  opacity:0; transition:opacity var(--t);
}
.cat-card-new:hover{
  transform:translateY(-3px); background:var(--bg-2); border-color:var(--line-1);
}
.cat-card-new:hover::before{ opacity:1; }

.cat-card-new .c-tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:100px;
  font-family:'Geist Mono',monospace; font-size:10px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  background:rgba(220,30,42,.12); color:var(--red-2); margin-bottom:16px; align-self:flex-start;
}
.cat-card-new .c-tag.amber{ background:rgba(255,159,67,.12); color:var(--amber); }
.cat-card-new .c-tag.violet{ background:rgba(139,92,246,.12); color:#B794F4; }
.cat-card-new .c-tag.emerald{ background:rgba(16,185,129,.12); color:#6EE7B7; }

.cat-card-new h3{
  font-size:20px; font-weight:600; letter-spacing:-.02em; line-height:1.25;
  color:var(--ink-0); margin-bottom:10px;
}
.cat-card-new p{
  font-size:14px; color:var(--ink-2); line-height:1.55; flex:1; margin-bottom:20px;
}
.cat-card-new .c-meta{
  font-family:'Geist Mono',monospace; font-size:11px;
  color:var(--ink-3); letter-spacing:.06em; text-transform:uppercase;
  padding-top:16px; border-top:1px solid var(--line-0);
  display:flex; justify-content:space-between; align-items:center;
}
.cat-card-new .c-meta .arrow{
  color:var(--ink-0); transition:transform var(--t);
}
.cat-card-new:hover .c-meta .arrow{ transform:translateX(4px); }

/* Corner art — small SVG floating in lower-right of cat-card-new */
.cat-card-new .c-art{
  position:absolute;
  right:14px;
  bottom:62px;          /* sits above the c-meta divider */
  width:78px;
  height:78px;
  opacity:.55;
  pointer-events:none;
  transition:opacity var(--t), transform var(--t);
}
.cat-card-new:hover .c-art{
  opacity:.95;
  transform:translateY(-2px);
}
@media(max-width:640px){
  .cat-card-new .c-art{ width:64px; height:64px; right:10px; bottom:58px; }
}

/* Hover micro-animations for corner art */
/* Iso transformer — barrier line pulse */
.cat-card-new:hover .c-art-iso .iso-bar{
  animation: c-iso-bar 1.6s ease-in-out infinite;
}
@keyframes c-iso-bar{
  0%,100% { stroke-opacity:.55; }
  50%     { stroke-opacity:1;   filter:drop-shadow(0 0 4px #FF3B44); }
}

/* Strip light — LED dots pulse staggered */
.cat-card-new:hover .c-art-strip .led-dot{
  animation: c-led-pulse 1.5s ease-in-out infinite;
}
.cat-card-new:hover .c-art-strip .led-dot:nth-child(1){ animation-delay:0s; }
.cat-card-new:hover .c-art-strip .led-dot:nth-child(2){ animation-delay:.18s; }
.cat-card-new:hover .c-art-strip .led-dot:nth-child(3){ animation-delay:.36s; }
.cat-card-new:hover .c-art-strip .led-dot:nth-child(4){ animation-delay:.54s; }
.cat-card-new:hover .c-art-strip .led-dot:nth-child(5){ animation-delay:.72s; }
@keyframes c-led-pulse{
  0%,100% { opacity:.45; }
  50%     { opacity:1;   filter:drop-shadow(0 0 5px #FFE3A8); }
}

/* DOB — LED matrix sequential blink */
.cat-card-new:hover .c-art-dob .dob-led{
  animation: c-dob-blink 2.4s ease-in-out infinite;
}
.cat-card-new:hover .c-art-dob .dob-led:nth-child(1) { animation-delay:0s;   }
.cat-card-new:hover .c-art-dob .dob-led:nth-child(2) { animation-delay:.12s; }
.cat-card-new:hover .c-art-dob .dob-led:nth-child(3) { animation-delay:.24s; }
.cat-card-new:hover .c-art-dob .dob-led:nth-child(4) { animation-delay:.36s; }
.cat-card-new:hover .c-art-dob .dob-led:nth-child(5) { animation-delay:.48s; }
.cat-card-new:hover .c-art-dob .dob-led:nth-child(6) { animation-delay:.60s; }
.cat-card-new:hover .c-art-dob .dob-led:nth-child(7) { animation-delay:.72s; }
.cat-card-new:hover .c-art-dob .dob-led:nth-child(8) { animation-delay:.84s; }
.cat-card-new:hover .c-art-dob .dob-led:nth-child(9) { animation-delay:.96s; }
.cat-card-new:hover .c-art-dob .dob-led:nth-child(10){ animation-delay:1.08s;}
@keyframes c-dob-blink{
  0%,100% { fill-opacity:.55; }
  50%     { fill-opacity:1; filter:drop-shadow(0 0 4px #FFE3A8); }
}

/* Dimmable mini — fill 10→100% on hover */
.cat-card-new .c-art-dim .c-dim-arc{ stroke-dasharray:80; stroke-dashoffset:0; }
.cat-card-new:hover .c-art-dim .c-dim-arc{
  animation: c-dim-fill 2.6s ease-in-out infinite;
}
@keyframes c-dim-fill{
  0%   { stroke-dashoffset:80; }
  45%  { stroke-dashoffset:0; filter:drop-shadow(0 0 4px #A78BFA); }
  75%  { stroke-dashoffset:0; filter:drop-shadow(0 0 4px #A78BFA); }
  100% { stroke-dashoffset:80; }
}
.cat-card-new:hover .c-art-dim .c-dim-handle,
.cat-card-new:hover .c-art-dim .c-dim-halo{
  animation: c-dim-handle 2.6s ease-in-out infinite;
  transform-origin:72px 60px;
  transform-box:view-box;
}
@keyframes c-dim-handle{
  0%   { opacity:.4; transform:scale(.8); }
  45%  { opacity:1;  transform:scale(1.25); filter:drop-shadow(0 0 6px #A78BFA); }
  75%  { opacity:1;  transform:scale(1.15); filter:drop-shadow(0 0 6px #A78BFA); }
  100% { opacity:.4; transform:scale(.8); }
}

/* CCT — three swatches breathe one after another */
.cat-card-new:hover .c-art-cct .cct-c1,
.cat-card-new:hover .c-art-cct .cct-c2,
.cat-card-new:hover .c-art-cct .cct-c3{
  animation: c-cct-breathe 2.4s ease-in-out infinite;
  transform-origin:center;
  transform-box:fill-box;
}
.cat-card-new:hover .c-art-cct .cct-c1{ animation-delay:0s; }
.cat-card-new:hover .c-art-cct .cct-c2{ animation-delay:.3s; }
.cat-card-new:hover .c-art-cct .cct-c3{ animation-delay:.6s; }
@keyframes c-cct-breathe{
  0%,100% { transform:scale(.9); opacity:.6; }
  50%     { transform:scale(1.1); opacity:1; }
}

/* SPD mini — bolt flash */
.cat-card-new:hover .c-art-spd .spd-bolt-mini{
  animation: c-bolt-flash 1.4s ease-in-out infinite;
  transform-origin:center;
  transform-box:fill-box;
}
@keyframes c-bolt-flash{
  0%,100% { opacity:.7; transform:scale(1); filter:drop-shadow(0 0 0 transparent); }
  50%     { opacity:1;  transform:scale(1.08); filter:drop-shadow(0 0 6px #FFD27A); }
}

/* Outdoor — raindrop ripple */
.cat-card-new:hover .c-art-outdoor path:last-of-type{
  animation: c-drop-ripple 2s ease-in-out infinite;
  transform-origin:45px 50px;
  transform-box:view-box;
}
@keyframes c-drop-ripple{
  0%,100% { transform:scale(1); }
  50%     { transform:scale(1.1); filter:drop-shadow(0 0 5px #6EB4FF); }
}

/* DC-DC — arrow flow */
.cat-card-new:hover .c-art-dcdc line[stroke="#FFD27A"]{
  animation: c-dc-flow 1.4s ease-in-out infinite;
}
@keyframes c-dc-flow{
  0%,100% { stroke-opacity:.7; }
  50%     { stroke-opacity:1; filter:drop-shadow(0 0 4px #FFD27A); }
}

/* Reduced motion: kill corner art animations */
@media (prefers-reduced-motion: reduce){
  .cat-card-new:hover .c-art *,
  .cat-card-new:hover .c-art{
    animation: none !important;
    transform: none !important;
  }
}


.cat-card-new.featured{
  grid-column:span 2; min-height:360px;
  background:linear-gradient(135deg,#1a0608 0%,#0a0a0b 50%);
  border-color:rgba(220,30,42,.25);
}
.cat-card-new.featured h3{
  font-size:clamp(28px,2.6vw,38px); margin-bottom:14px;
}
.cat-card-new.featured p{ font-size:16px; max-width:480px; }

@media(max-width:1024px){
  .cat-grid-new{ grid-template-columns:repeat(2,1fr); }
  .cat-card-new.featured{ grid-column:span 2; }
}
@media(max-width:640px){
  .cat-grid-new{ grid-template-columns:1fr; }
  .cat-card-new.featured{ grid-column:span 1; }
}

/* =============================================================
   Editorial / Split / Pull quote
   ============================================================= */
.editorial{
  display:grid; grid-template-columns:0.5fr 1fr; gap:80px; align-items:start;
}
.editorial .ed-side{
  position:sticky; top:120px;
}
.editorial .ed-label{
  font-family:'Geist Mono',monospace; font-size:11px; font-weight:500;
  color:var(--ink-3); letter-spacing:.16em; text-transform:uppercase;
}
.editorial h2.ed-quote{
  font-family:'Fraunces',Georgia,serif;
  font-weight:500; font-style:italic;
  font-size:clamp(32px,3.6vw,54px); line-height:1.15; letter-spacing:-.025em;
  color:var(--ink-0);
}
.editorial h2.ed-quote em{
  color:var(--amber); font-style:italic;
}
.editorial .ed-body p{
  font-size:17px; color:var(--ink-1); line-height:1.65; margin-bottom:20px;
  max-width:620px;
}
.editorial .ed-body strong{ color:var(--ink-0); font-weight:600; }

@media(max-width:900px){
  .editorial{ grid-template-columns:1fr; gap:32px; }
  .editorial .ed-side{ position:static; }
}

/* =============================================================
   Testimonials
   ============================================================= */
.testim-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:16px;
}
.testim-card{
  padding:36px; background:var(--bg-1); border:1px solid var(--line-0);
  border-radius:22px; position:relative;
  transition:all var(--t);
}
.testim-card:hover{
  border-color:var(--line-1); transform:translateY(-2px);
}
.testim-card q{
  font-family:'Fraunces',Georgia,serif; font-style:italic;
  font-size:20px; color:var(--ink-0); font-weight:500; line-height:1.45; quotes:none;
  display:block; margin-bottom:28px; letter-spacing:-.015em;
}
.testim-card .author{
  display:flex; align-items:center; gap:14px;
}
.testim-card .avatar{
  width:42px; height:42px; border-radius:50%;
  background:linear-gradient(135deg,var(--red),var(--red-2));
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:14px; color:#fff; letter-spacing:-.02em;
}
.testim-card .avatar.amber{ background:linear-gradient(135deg,var(--amber),var(--amber-2)); color:var(--bg-0); }
.testim-card .avatar.violet{ background:linear-gradient(135deg,var(--violet),#A78BFA); }
.testim-card .avatar.emerald{ background:linear-gradient(135deg,var(--emerald),#34D399); color:var(--bg-0); }
.testim-card .name{ font-size:14px; font-weight:600; color:var(--ink-0); letter-spacing:-.01em; }
.testim-card .role{ font-size:12.5px; color:var(--ink-3); margin-top:2px; }
@media(max-width:768px){ .testim-grid{ grid-template-columns:1fr; } }

/* =============================================================
   CTA band
   ============================================================= */
.cta-band{
  position:relative; border-radius:32px;
  padding:96px 56px; text-align:center;
  background:linear-gradient(135deg,var(--bg-1) 0%,var(--bg-2) 100%);
  border:1px solid var(--line-0); overflow:hidden;
}
.cta-band::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(ellipse 700px 400px at 50% 100%, rgba(220,30,42,.2) 0%, transparent 60%),
    radial-gradient(ellipse 500px 300px at 20% 0%, rgba(139,92,246,.12) 0%, transparent 60%);
}
.cta-band-inner{ position:relative; z-index:2; max-width:760px; margin:0 auto; }
.cta-band h2{ margin-bottom:20px; }
.cta-band .lead{ color:var(--ink-2); margin:0 auto 36px; }
.cta-band-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

@media(max-width:640px){ .cta-band{ padding:64px 28px; border-radius:22px; } }

/* =============================================================
   Footer — mega with typography
   ============================================================= */
.footer{
  background:var(--bg-0); padding:80px 0 32px;
  border-top:1px solid var(--line-0);
  position:relative; overflow:hidden;
}
.footer-mega{
  padding-bottom:64px; border-bottom:1px solid var(--line-0); margin-bottom:32px;
}
.footer-mega-text{
  font-size:clamp(44px,9vw,144px); font-weight:800; letter-spacing:-.05em; line-height:.92;
  color:var(--ink-0); margin-bottom:32px;
}
.footer-mega-text em{
  font-family:'Fraunces',serif; font-style:italic; font-weight:500;
  background:linear-gradient(90deg,#FF3B44,#FF9F43,#8B5CF6);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  letter-spacing:-.035em;
}
.footer-mega-actions{ display:flex; gap:12px; flex-wrap:wrap; }

.footer-grid{
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:40px;
  padding-bottom:48px; border-bottom:1px solid var(--line-0);
}
.footer-col h4{
  font-family:'Geist Mono',monospace;
  font-size:11px; font-weight:500; color:var(--ink-3);
  letter-spacing:.14em; text-transform:uppercase; margin-bottom:18px;
}
.footer-col a{
  display:block; font-size:14.5px; padding:6px 0;
  color:var(--ink-1); transition:color var(--t-fast);
}
.footer-col a:hover{ color:var(--ink-0); }
.footer-brand-col p{ font-size:14px; color:var(--ink-2); line-height:1.6; margin-bottom:24px; max-width:340px; }
.footer-social{ display:flex; gap:10px; flex-wrap:wrap; }
.footer-social a{
  width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,.04);
  display:flex; align-items:center; justify-content:center;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), background .25s, box-shadow .25s, border-color .25s;
  border:1px solid var(--line-0); position:relative; overflow:hidden;
}
.footer-social a::before{
  content:''; position:absolute; inset:0; opacity:0; transition:opacity .25s;
  background:var(--brand-grad, transparent);
}
.footer-social a:hover{
  transform:translateY(-3px) scale(1.05);
  border-color:transparent;
  box-shadow:0 8px 22px var(--brand-shadow, rgba(0,0,0,.25));
}
.footer-social a:hover::before{ opacity:1; }
.footer-social a svg{ width:20px; height:20px; fill:var(--ink-1); position:relative; z-index:1; transition:fill .25s; }
.footer-social a:hover svg{ fill:#fff; }
/* Brand-specific colors on hover */
.footer-social .sb-call    { --brand-grad:linear-gradient(135deg,#DC1E2A,#9A1620); --brand-shadow:rgba(220,30,42,.45); }
.footer-social .sb-wa      { --brand-grad:linear-gradient(135deg,#25D366,#128C7E); --brand-shadow:rgba(37,211,102,.45); }
.footer-social .sb-email   { --brand-grad:linear-gradient(135deg,#EA4335,#C5221F); --brand-shadow:rgba(234,67,53,.45); }
.footer-social .sb-insta   { --brand-grad:linear-gradient(135deg,#F58529 0%,#DD2A7B 50%,#8134AF 100%); --brand-shadow:rgba(221,42,123,.45); }
.footer-social .sb-youtube { --brand-grad:linear-gradient(135deg,#FF0000,#CC0000); --brand-shadow:rgba(255,0,0,.45); }

.footer-bottom{
  padding-top:28px; display:flex; justify-content:space-between;
  align-items:center; flex-wrap:wrap; gap:12px;
  font-family:'Geist Mono',monospace; font-size:12px;
  color:var(--ink-3); letter-spacing:.04em;
}

@media(max-width:900px){
  .footer-grid{ grid-template-columns:1fr 1fr; gap:32px; }
  .footer-brand-col{ grid-column:span 2; }
  .footer-mega-text{ font-size:clamp(36px,11vw,80px); }
}

/* =============================================================
   Page-specific (non-home) overrides
   ============================================================= */
.page-head{
  padding:160px 0 80px; position:relative; overflow:hidden;
  background:var(--bg-0); border-bottom:1px solid var(--line-0);
}
.page-head-inner{ position:relative; z-index:2; max-width:880px; }
.page-head h1{ margin-bottom:20px; }
.page-head .breadcrumb{
  display:flex; gap:8px; align-items:center; font-size:12px;
  color:var(--ink-3); margin-bottom:24px;
  font-family:'Geist Mono',monospace; letter-spacing:.06em; text-transform:uppercase;
}
.page-head .breadcrumb a{ color:var(--ink-3); }
.page-head .breadcrumb a:hover{ color:var(--ink-0); }

/* =============================================================
   Products page carryovers (dark mode)
   ============================================================= */
.prod-hero{
  padding:160px 0 72px;
  background:var(--bg-0); border-bottom:1px solid var(--line-0);
  position:relative; overflow:hidden;
}
.prod-hero-inner{ max-width:940px; position:relative; z-index:2; }
.prod-hero h1{ color:var(--ink-0); }

.cat-section{ padding:96px 0 48px; scroll-margin-top:90px; }
.cat-section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom:40px; gap:32px; flex-wrap:wrap;
}
.cat-section-head .copy{ max-width:680px; }
.cat-section-head h2{ margin-bottom:12px; }
.cat-section-head p{ color:var(--ink-2); font-size:15px; line-height:1.55; max-width:580px; }

.badge-row{ display:flex; gap:8px; flex-wrap:wrap; }
.cat-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 13px; background:var(--bg-1); border:1px solid var(--line-0); border-radius:100px;
  font-family:'Geist Mono',monospace; font-size:11px; font-weight:500;
  color:var(--ink-2); letter-spacing:.04em;
}
.cat-badge.red{ background:rgba(220,30,42,.08); color:var(--red-2); border-color:rgba(220,30,42,.2); }
.cat-badge.amber{ background:rgba(255,159,67,.08); color:var(--amber); border-color:rgba(255,159,67,.2); }
.cat-badge.emerald{ background:rgba(16,185,129,.08); color:#34D399; border-color:rgba(16,185,129,.2); }
.cat-badge.violet{ background:rgba(139,92,246,.08); color:#B794F4; border-color:rgba(139,92,246,.2); }

/* Product cards — dark theme */
.prod-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
}
.prod-card{
  background:var(--bg-1); border:1px solid var(--line-0); border-radius:18px;
  overflow:hidden; transition:all var(--t); cursor:pointer;
  display:flex; flex-direction:column;
}
.prod-card:hover{
  transform:translateY(-3px); border-color:var(--line-1); background:var(--bg-2);
}
.prod-img{
  aspect-ratio:4/3; background:linear-gradient(135deg,#1e1e24 0%,#17171c 100%);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; position:relative;
}
.prod-img img{
  width:100%; height:100%; object-fit:contain; padding:26px;
  transition:transform var(--t-slow);
}
.prod-card:hover .prod-img img{ transform:scale(1.08); }
.prod-body{ padding:18px 20px 20px; flex:1; display:flex; flex-direction:column; }
.prod-name{
  font-size:15px; font-weight:600; letter-spacing:-.015em; line-height:1.3;
  margin-bottom:6px; color:var(--ink-0);
}
.prod-spec{
  font-family:'Geist Mono',monospace; font-size:11.5px;
  color:var(--ink-3); letter-spacing:-.005em; margin-bottom:12px; flex:1;
}
/* Compact 2x2 spec grid — Output / Input / IP / Mode per card */
.prod-specs{
  display:grid; grid-template-columns:1fr 1fr; gap:8px 14px;
  margin:0 0 16px;
  padding:10px 0; border-top:1px dashed var(--line-0);
}
.prod-specs .row{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.prod-specs .k{
  font-family:'Geist Mono',monospace; font-size:9.5px; font-weight:500;
  color:var(--ink-3); text-transform:uppercase; letter-spacing:.07em;
}
.prod-specs .v{
  font-family:'Geist Mono',monospace; font-size:11.5px; font-weight:500;
  color:var(--ink-0); font-variant-numeric:tabular-nums;
  /* Allow wrapping so values like "54-80V DC · 500mA" never truncate to "5…". */
  line-height:1.35; word-break:break-word; overflow-wrap:anywhere;
  margin-top:1px;
}
:root[data-theme="light"] .prod-specs{ border-top-color:rgba(0,0,0,.08); }

/* ---- Feature-rich card variant (radar / smart products) -----------------
   - Headline blurb sits prominent, weight 600 so a layperson reads it as
     part of the product identity, not body copy.
   - Specs grid drops "Mode" cell to make room for a dedicated Features list.
   - Features section: section header in caps + bulleted list with red dots. */
.prod-card .blurb,
.prod-card--feature .blurb,
.prod-card--variants .blurb,
.prod-card--imaged .blurb{
  font-size:13.5px !important; font-weight:700 !important; line-height:1.4 !important;
  color:var(--ink-0) !important; letter-spacing:-.005em;
  margin-bottom:10px; flex:0 0 auto;
}
.prod-features{
  margin:0 0 16px;
  padding:10px 0 0; border-top:1px dashed var(--line-0);
  flex:0 0 auto;
}
.prod-features .k{
  font-family:'Geist Mono',monospace; font-size:9.5px; font-weight:500;
  color:var(--ink-3); text-transform:uppercase; letter-spacing:.07em;
  margin-bottom:8px;
}
.prod-features ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:5px;
}
.prod-features li{
  font-family:'Geist Mono',monospace; font-size:11px; font-weight:500;
  color:var(--ink-1); line-height:1.45;
  padding-left:13px; position:relative;
}
.prod-features li::before{
  content:""; position:absolute; left:2px; top:6px;
  width:5px; height:5px; border-radius:50%;
  background:var(--accent-red);
}
:root[data-theme="light"] .prod-features{ border-top-color:rgba(0,0,0,.08); }

/* ---- Action row: View + Ask Price (WhatsApp) ----------------------------- */
.prod-actions{
  display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center;
  margin-top:auto; padding-top:12px; border-top:1px solid var(--line-0);
}
:root[data-theme="light"] .prod-actions{ border-top-color:rgba(0,0,0,.08); }
.prod-actions .enq-btn{ padding:0; }
.ask-price-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px; border-radius:99px;
  background:#25D366; color:#fff;
  font:600 12px/1 'Geist',sans-serif; letter-spacing:.01em;
  text-decoration:none; white-space:nowrap;
  transition:background var(--t), transform var(--t), box-shadow var(--t);
  box-shadow:0 1px 3px rgba(37,211,102,.18);
}
.ask-price-btn:hover{
  background:#1faa54; transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(37,211,102,.28);
}
.ask-price-btn svg{ width:13px; height:13px; flex:0 0 auto; }

.prod-footer{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:14px; border-top:1px solid var(--line-0);
}
.prod-cat-tag{
  font-family:'Geist Mono',monospace; font-size:10.5px; font-weight:500;
  color:var(--ink-3); text-transform:uppercase; letter-spacing:.08em;
}
.prod-enquire{
  font-size:12px; font-weight:600; color:var(--red-2);
  display:inline-flex; align-items:center; gap:3px;
}
.prod-enquire .arrow{ transition:transform var(--t); }
.prod-card:hover .prod-enquire .arrow{ transform:translateX(3px); }

.prod-badge{
  position:absolute; top:10px; left:10px; z-index:2;
  padding:4px 10px; border-radius:100px;
  font-family:'Geist Mono',monospace; font-size:10px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  background:var(--bg-0); color:var(--ink-0);
}
.prod-badge.new{ background:linear-gradient(135deg,var(--red),var(--red-2)); color:#fff; }
.prod-badge.sensor{ background:linear-gradient(135deg,var(--violet),var(--cyan)); color:#fff; }
.prod-badge.ups{ background:linear-gradient(135deg,var(--emerald),#34D399); color:var(--bg-0); }

@media(max-width:1024px){ .prod-grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:768px){ .prod-grid{ grid-template-columns:repeat(2,1fr); gap:10px; } }

/* =============================================================
   Anchor nav (products)
   ============================================================= */
.anchor-nav{
  position:sticky; top:66px; z-index:50;
  background:rgba(10,10,11,.88); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-0);
  padding:12px 0;
}
.anchor-nav-inner{
  display:flex; gap:4px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding:0 40px;
}
.anchor-nav-inner::-webkit-scrollbar{ display:none; }
.anchor-link{
  padding:7px 13px; border-radius:100px; font-size:13px; font-weight:500;
  color:var(--ink-2); white-space:nowrap; transition:all var(--t-fast);
}
.anchor-link:hover{ background:rgba(255,255,255,.06); color:var(--ink-0); }
.anchor-link.active{
  background:linear-gradient(135deg, rgba(220,30,42,.2), rgba(240,168,48,.14));
  color:var(--ink-0);
  box-shadow:inset 0 0 0 1px rgba(240,168,48,.25);
}

/* =============================================================
   About / Why-us / Contact page styling (dark mode)
   ============================================================= */
.about-hero{
  padding:160px 0 80px;
  background:var(--bg-0);
  position:relative; overflow:hidden;
  border-bottom:1px solid var(--line-0);
}
.about-hero-inner{ position:relative; z-index:2; max-width:780px; }
.about-hero h1{ color:var(--ink-0); margin-bottom:24px; }
.about-hero .lead{ color:var(--ink-2); }

/* About Stats */
.about-stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px; text-align:left;
}
.about-stat{
  padding:36px 32px; background:var(--bg-1); border:1px solid var(--line-0); border-radius:22px;
}
.about-stat-num{
  font-size:clamp(44px,5vw,68px); font-weight:700; letter-spacing:-.04em; line-height:1; margin-bottom:12px;
  color:var(--ink-0);
}
.about-stat-label{ font-size:15px; font-weight:600; color:var(--ink-0); margin-bottom:6px; }
.about-stat-sub{ font-family:'Geist Mono',monospace; font-size:11px; color:var(--ink-3); letter-spacing:.06em; text-transform:uppercase; }
@media(max-width:768px){ .about-stats{ grid-template-columns:1fr; } }

/* Timeline */
.timeline{ position:relative; padding:24px 0 24px 40px; }
.timeline::before{
  content:''; position:absolute; left:16px; top:24px; bottom:24px; width:1px;
  background:linear-gradient(180deg,var(--red) 0%,var(--amber) 50%,var(--violet) 100%);
  opacity:.3;
}
.tl-item{ position:relative; padding:24px 0; display:flex; flex-direction:column; }
.tl-item::before{
  content:''; position:absolute; left:-34px; top:32px; width:12px; height:12px;
  background:var(--red); border-radius:50%;
  box-shadow:0 0 0 6px rgba(220,30,42,.12);
}
.tl-year{
  font-family:'Geist Mono',monospace; font-size:11px; font-weight:500;
  color:var(--red-2); letter-spacing:.14em; text-transform:uppercase; margin-bottom:10px;
}
.tl-title{ font-size:22px; font-weight:600; margin-bottom:10px; letter-spacing:-.02em; color:var(--ink-0); }
.tl-desc{ color:var(--ink-2); font-size:15px; line-height:1.6; max-width:620px; }

/* Certifications */
.certs{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px;
}
.cert-card{
  padding:24px; background:var(--bg-1); border:1px solid var(--line-0); border-radius:18px;
  display:flex; align-items:center; gap:14px;
  transition:all var(--t);
}
.cert-card:hover{ border-color:var(--line-1); background:var(--bg-2); }
.cert-mark{
  width:44px; height:44px; border-radius:12px; background:var(--bg-2);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  border:1px solid var(--line-0);
}
.cert-mark svg{ stroke:var(--red-2); stroke-width:1.8; fill:none; width:20px; height:20px; }
.cert-name{ font-size:14.5px; font-weight:600; margin-bottom:2px; color:var(--ink-0); }
.cert-sub{ font-family:'Geist Mono',monospace; font-size:11px; color:var(--ink-3); letter-spacing:.04em; }

/* Why-Us pillar sections */
.pillar-section{
  display:grid; grid-template-columns:0.8fr 1.2fr; gap:80px;
  padding:96px 0; align-items:center;
  border-bottom:1px solid var(--line-0);
}
.pillar-section:last-child{ border-bottom:none; }
.pillar-section.reverse{ direction:rtl; }
.pillar-section.reverse > *{ direction:ltr; }
.pillar-label{
  display:inline-flex; align-items:center; gap:10px;
  padding:6px 13px; border-radius:100px;
  background:rgba(220,30,42,.08); color:var(--red-2);
  font-family:'Geist Mono',monospace; font-size:11px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  margin-bottom:20px; border:1px solid rgba(220,30,42,.2);
}
.pillar-label .num{
  width:20px; height:20px; border-radius:50%;
  background:var(--red); color:#fff; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:10px;
}
.pillar-label.amber{ background:rgba(255,159,67,.08); color:var(--amber); border-color:rgba(255,159,67,.2); }
.pillar-label.amber .num{ background:var(--amber); color:var(--bg-0); }
.pillar-label.violet{ background:rgba(139,92,246,.08); color:#B794F4; border-color:rgba(139,92,246,.2); }
.pillar-label.violet .num{ background:var(--violet); }
.pillar-label.emerald{ background:rgba(16,185,129,.08); color:#34D399; border-color:rgba(16,185,129,.2); }
.pillar-label.emerald .num{ background:var(--emerald); color:var(--bg-0); }
.pillar-label.blue{ background:rgba(6,182,212,.08); color:#67E8F9; border-color:rgba(6,182,212,.2); }
.pillar-label.blue .num{ background:var(--cyan); color:var(--bg-0); }

.pillar-visual{
  aspect-ratio:4/3; border-radius:24px; overflow:hidden;
  background:linear-gradient(135deg,var(--bg-1) 0%,var(--bg-2) 100%);
  border:1px solid var(--line-0); position:relative;
  display:flex; align-items:center; justify-content:center;
}
.pillar-visual::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 300px 200px at 30% 40%, rgba(220,30,42,.15) 0%, transparent 60%),
    radial-gradient(ellipse 300px 200px at 80% 80%, rgba(139,92,246,.1) 0%, transparent 60%);
}
.pillar-visual-inner{ position:relative; z-index:2; padding:40px; text-align:center; }
.pillar-feature-list{
  list-style:none; padding:0; margin-top:32px;
  display:flex; flex-direction:column; gap:14px;
}
.pillar-feature-list li{
  display:flex; gap:14px; align-items:flex-start;
  font-size:15.5px; color:var(--ink-1); line-height:1.55;
}
.pillar-feature-list .check{
  flex-shrink:0; width:20px; height:20px; border-radius:50%;
  background:rgba(220,30,42,.15); display:flex; align-items:center; justify-content:center;
  margin-top:2px;
}
.pillar-feature-list .check svg{ stroke:var(--red-2); stroke-width:3; width:10px; height:10px; fill:none; }
.pillar-feature-list strong{ color:var(--ink-0); font-weight:600; }
.big-stat{
  font-size:clamp(60px,8vw,120px); font-weight:800; letter-spacing:-.055em; line-height:.95;
  background:linear-gradient(135deg,var(--ink-0) 0%,var(--ink-2) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
@media(max-width:960px){
  .pillar-section{ grid-template-columns:1fr; gap:40px; padding:64px 0; }
  .pillar-section.reverse{ direction:ltr; }
}

/* VS Table (why us) */
.vs-table{
  background:var(--bg-1); border:1px solid var(--line-0); border-radius:22px; overflow:hidden;
}
.vs-head{
  display:grid; grid-template-columns:1.4fr 1fr 1fr;
  background:var(--bg-2); border-bottom:1px solid var(--line-0);
}
.vs-head > div{
  padding:22px 28px; font-family:'Geist Mono',monospace; font-size:11.5px; font-weight:500;
  color:var(--ink-2); letter-spacing:.1em; text-transform:uppercase;
}
.vs-head > div.us{ background:var(--red); color:#fff; }
.vs-row{
  display:grid; grid-template-columns:1.4fr 1fr 1fr;
  border-bottom:1px solid var(--line-0);
}
.vs-row:last-child{ border-bottom:none; }
.vs-row > div{ padding:20px 28px; font-size:14.5px; color:var(--ink-2); line-height:1.5; }
.vs-row > div:first-child{ font-weight:500; color:var(--ink-0); background:var(--bg-2); }
.vs-row > div.us{ font-weight:500; color:var(--ink-0); }
.vs-yes{ color:#6EE7B7; font-weight:500; }
.vs-no{ color:var(--ink-3); }
@media(max-width:768px){
  .vs-head, .vs-row{ grid-template-columns:1fr 1fr; }
  .vs-head > div:first-child, .vs-row > div:first-child{ grid-column:span 2; padding:12px 20px; border-bottom:1px solid var(--line-0); font-size:11px; }
  .vs-head > div, .vs-row > div{ padding:14px 20px; font-size:13.5px; }
}

/* Contact page */
.contact-grid{ display:grid; grid-template-columns:1fr 1.2fr; gap:24px; align-items:start; }
.info-card{
  padding:36px; background:linear-gradient(135deg,var(--bg-1) 0%,var(--bg-2) 100%);
  border:1px solid var(--line-0); border-radius:24px; position:relative; overflow:hidden;
}
.info-card::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 300px 200px at 90% 30%, rgba(220,30,42,.15) 0%, transparent 60%);
}
.info-card-inner{ position:relative; z-index:2; }
.info-card h3{ color:var(--ink-0); font-size:20px; font-weight:600; margin-bottom:28px; letter-spacing:-.02em; }
.info-block{ padding:18px 0; border-bottom:1px solid var(--line-0); }
.info-block:last-child{ border-bottom:none; padding-bottom:0; }
.info-block:first-child{ padding-top:0; }
.info-label{
  font-family:'Geist Mono',monospace; font-size:10.5px; font-weight:500; color:var(--ink-3);
  letter-spacing:.14em; text-transform:uppercase; margin-bottom:8px;
}
.info-val{ font-size:15px; color:var(--ink-0); line-height:1.6; }
.info-val a{ color:var(--ink-0); }
.info-val a:hover{ color:var(--red-2); }

.contact-channels{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:48px;
}
.channel-card{
  padding:28px; background:var(--bg-1); border:1px solid var(--line-0); border-radius:20px;
  transition:all var(--t); display:flex; flex-direction:column; align-items:flex-start;
}
.channel-card:hover{ transform:translateY(-2px); border-color:var(--line-1); background:var(--bg-2); }
.channel-icon{
  width:44px; height:44px; border-radius:12px;
  background:rgba(220,30,42,.08); display:flex; align-items:center; justify-content:center; margin-bottom:20px;
  border:1px solid rgba(220,30,42,.15);
}
.channel-icon svg{ stroke:var(--red-2); stroke-width:1.8; fill:none; width:20px; height:20px; }
.channel-icon.wa{ background:rgba(37,211,102,.08); border-color:rgba(37,211,102,.15); }
.channel-icon.wa svg{ stroke:#25D366; }
.channel-icon.phone{ background:rgba(6,182,212,.08); border-color:rgba(6,182,212,.15); }
.channel-icon.phone svg{ stroke:var(--cyan); }
.channel-title{ font-family:'Geist Mono',monospace; font-size:10.5px; font-weight:500; color:var(--ink-3); letter-spacing:.12em; text-transform:uppercase; margin-bottom:8px; }
.channel-value{ font-size:18px; font-weight:600; color:var(--ink-0); margin-bottom:6px; letter-spacing:-.015em; }
.channel-sub{ font-size:13px; color:var(--ink-3); }
@media(max-width:900px){ .contact-channels{ grid-template-columns:1fr; } }

.form-card{
  padding:40px; background:var(--bg-1); border:1px solid var(--line-0); border-radius:24px;
}
.form-card h2{ font-size:28px; font-weight:600; margin-bottom:10px; letter-spacing:-.025em; color:var(--ink-0); }
.form-card .form-sub{ color:var(--ink-2); margin-bottom:32px; font-size:15px; }

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-grid .full{ grid-column:span 2; }
.form-label{
  display:block; font-size:12.5px; font-weight:500; color:var(--ink-0); margin-bottom:7px;
  letter-spacing:-.005em;
}
.form-label .req{ color:var(--red-2); }
.form-input,.form-select,.form-textarea{
  width:100%; padding:12px 14px;
  border:1px solid var(--line-0); border-radius:10px;
  font:inherit; font-size:14.5px; color:var(--ink-0);
  background:var(--bg-2);
  transition:all var(--t-fast);
}
.form-input::placeholder,.form-textarea::placeholder{ color:var(--ink-3); }
.form-input:focus,.form-select:focus,.form-textarea:focus{
  outline:none; border-color:var(--red-2); background:var(--bg-2);
  box-shadow:0 0 0 4px rgba(220,30,42,.12);
}
.form-select{ cursor:pointer; color:var(--ink-0); }
.form-select option{ background:var(--bg-2); color:var(--ink-0); }
.form-textarea{ min-height:120px; resize:vertical; }
.form-submit{ grid-column:span 2; margin-top:8px; }

@media(max-width:900px){
  .contact-grid{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .form-grid .full, .form-submit{ grid-column:span 1; }
}

.success-msg{
  background:linear-gradient(135deg,rgba(16,185,129,.1) 0%,rgba(16,185,129,.04) 100%);
  border:1px solid rgba(16,185,129,.3); border-radius:16px;
  padding:32px; text-align:center; display:none;
}
.success-msg.show{ display:block; }
.success-icon{
  width:56px; height:56px; margin:0 auto 20px;
  background:var(--emerald); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.success-msg h3{ font-size:20px; color:#6EE7B7; margin-bottom:10px; }
.success-msg p{ color:var(--ink-1); }

/* =============================================================
   Utility classes
   ============================================================= */
.text-center{ text-align:center; }
.text-red{ color:var(--red-2); }
.text-amber{ color:var(--amber); }
.text-muted{ color:var(--ink-2); }
.mt-0{ margin-top:0 !important; }
.mt-8{ margin-top:8px; } .mt-16{ margin-top:16px; } .mt-24{ margin-top:24px; } .mt-32{ margin-top:32px; } .mt-48{ margin-top:48px; } .mt-64{ margin-top:64px; }
.mb-0{ margin-bottom:0 !important; }
.mb-8{ margin-bottom:8px; } .mb-16{ margin-bottom:16px; } .mb-24{ margin-bottom:24px; } .mb-32{ margin-bottom:32px; } .mb-48{ margin-bottom:48px; }
.hide-mobile{ }
@media(max-width:640px){ .hide-mobile{ display:none !important; } }

/* =============================================================
   Reveal animations (scroll-triggered)
   ============================================================= */
.reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity .8s ease, transform .8s cubic-bezier(.25,.46,.45,.94);
}
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-fade{ opacity:0; transition:opacity 1.2s ease; }
.reveal-fade.in{ opacity:1; }

/* WhatsApp float */
.wa-float{
  position:fixed; bottom:24px; right:24px; z-index:80;
  width:54px; height:54px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px rgba(37,211,102,.35), 0 1px 0 rgba(255,255,255,.1) inset;
  transition:transform var(--t);
}
.wa-float:hover{ transform:scale(1.08) rotate(4deg); }
.wa-float svg{ width:26px; height:26px; fill:#fff; }

/* Cursor-follow glow (light effect) */
.cursor-glow{
  position:fixed; top:0; left:0; width:400px; height:400px;
  border-radius:50%; pointer-events:none; z-index:3;
  background:radial-gradient(circle, rgba(220,30,42,.08) 0%, transparent 70%);
  transform:translate(-50%,-50%); filter:blur(20px);
  transition:opacity var(--t);
  opacity:0;
}
@media(hover:hover){ .cursor-glow{ opacity:1; } }

/* =============================================================
   Applications grid — 2026 addition
   ============================================================= */
.apps-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:14px;
}
.app-tile{
  position:relative; padding:28px 24px 24px;
  background:var(--bg-1); border:1px solid var(--line-0);
  border-radius:18px; overflow:hidden;
  transition:all var(--t); display:flex; flex-direction:column; gap:12px;
  min-height:190px;
}
.app-tile::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 80% 0%, rgba(255,159,67,.10), transparent 50%);
  opacity:0; transition:opacity var(--t);
}
.app-tile:hover{ transform:translateY(-3px); border-color:var(--line-1); background:var(--bg-2); }
.app-tile:hover::before{ opacity:1; }
.app-tile:hover .app-arrow{ transform:translateX(4px); color:var(--amber); }
.app-icon{
  width:44px; height:44px; border-radius:12px;
  background:linear-gradient(135deg, rgba(255,159,67,.12), rgba(220,30,42,.08));
  display:flex; align-items:center; justify-content:center;
  color:var(--amber); border:1px solid rgba(255,159,67,.2);
  position:relative; z-index:2;
}
.app-icon svg{ width:22px; height:22px; stroke-width:1.8; }
.app-tile h3{
  font-size:18px; font-weight:600; letter-spacing:-.02em; line-height:1.25;
  color:var(--ink-0); position:relative; z-index:2;
}
.app-tile p{
  font-size:13.5px; line-height:1.5; color:var(--ink-2);
  position:relative; z-index:2; margin:0;
}
.app-tile .app-meta{
  margin-top:auto; padding-top:10px;
  display:flex; justify-content:space-between; align-items:center;
  font-family:'Geist Mono',monospace; font-size:10.5px;
  color:var(--ink-3); letter-spacing:.08em; text-transform:uppercase;
  position:relative; z-index:2;
}
.app-arrow{ color:var(--ink-2); transition:transform var(--t), color var(--t); }
@media(max-width:1100px){ .apps-grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:768px){ .apps-grid{ grid-template-columns:repeat(2,1fr); gap:10px; } .app-tile{ padding:22px 18px 18px; min-height:170px; } }
@media(max-width:480px){ .apps-grid{ grid-template-columns:1fr; } }

/* =============================================================
   FAQ section
   ============================================================= */
.faq-grid{ display:grid; grid-template-columns:1fr; gap:12px; max-width:920px; margin:0 auto; }
.faq-item{
  background:var(--bg-1); border:1px solid var(--line-0);
  border-radius:16px; overflow:hidden; transition:border-color var(--t);
}
.faq-item:hover{ border-color:var(--line-1); }
.faq-item[open]{ border-color:rgba(255,159,67,.25); background:var(--bg-2); }
.faq-q{
  padding:22px 28px; cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  font-size:16.5px; font-weight:500; letter-spacing:-.015em;
  color:var(--ink-0);
}
.faq-q::-webkit-details-marker{ display:none; }
.faq-q::after{
  content:''; flex:none; width:22px; height:22px; border-radius:50%;
  background:var(--bg-2); color:var(--amber);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23FF9F43' stroke-width='2.5' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>");
  background-repeat:no-repeat; background-position:center;
  transition:transform var(--t);
}
.faq-item[open] .faq-q::after{
  transform:rotate(135deg);
}
.faq-a{
  padding:0 28px 24px; color:var(--ink-2); font-size:14.5px; line-height:1.65;
}
.faq-a p + p{ margin-top:10px; }
.faq-a strong{ color:var(--ink-0); font-weight:600; }
@media(max-width:640px){ .faq-q{ padding:18px 20px; font-size:15px; } .faq-a{ padding:0 20px 20px; font-size:13.5px; } }

/* =============================================================
   Driver finder — parametric search
   ============================================================= */
.finder-wrap{
  background:linear-gradient(135deg, rgba(220,30,42,.06) 0%, rgba(26,26,31,0) 60%), var(--bg-1);
  border:1px solid var(--line-0); border-radius:22px;
  padding:32px; position:relative; overflow:hidden;
}
.finder-wrap::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 95% 0%, rgba(255,159,67,.14), transparent 50%);
  pointer-events:none;
}
.finder-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; margin-bottom:22px; position:relative; z-index:2;
  flex-wrap:wrap;
}
.finder-head h3{
  font-size:clamp(22px, 2.4vw, 30px); font-weight:600;
  letter-spacing:-.025em; color:var(--ink-0);
}
.finder-head p{ color:var(--ink-2); font-size:14px; margin-top:4px; }
.finder-controls{
  display:grid; grid-template-columns:repeat(3, 1fr) auto; gap:12px;
  position:relative; z-index:2;
}
.finder-control label{
  display:block; font-family:'Geist Mono',monospace;
  font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:6px;
}
.finder-control select{
  width:100%; padding:14px 18px; font:inherit; font-size:14.5px;
  background:var(--bg-0); color:var(--ink-0);
  border:1px solid var(--line-1); border-radius:12px;
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23b8b3aa' stroke-width='2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 16px center;
  padding-right:44px; transition:border-color var(--t);
}
.finder-control select:hover{ border-color:var(--line-2); }
.finder-control select:focus{ outline:none; border-color:var(--amber); }
.finder-btn{
  align-self:end; padding:14px 22px; background:var(--red);
  color:#fff; border-radius:12px; font-weight:600;
  display:flex; align-items:center; gap:8px; transition:all var(--t);
  border:1px solid var(--red); height:48px;
}
.finder-btn:hover{ background:var(--red-2); transform:translateY(-1px); }
.finder-results{
  margin-top:22px; padding-top:22px;
  border-top:1px solid var(--line-0);
  position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:12px;
  min-height:48px;
}
.finder-empty{
  grid-column:1/-1; text-align:center; padding:24px;
  color:var(--ink-3); font-size:14px;
}
.finder-pill{
  padding:10px 14px 10px 10px; background:var(--bg-2);
  border:1px solid var(--line-0); border-radius:12px;
  display:flex; align-items:center; gap:12px;
  transition:all var(--t);
  text-decoration:none; color:inherit;
}
.finder-pill:hover{ border-color:var(--amber); transform:translateY(-2px); }
.finder-pill-thumb{
  flex:0 0 52px; width:52px; height:52px; border-radius:8px;
  background:rgba(255,255,255,.04); border:1px solid var(--line-0);
  position:relative; overflow:hidden;
}
.finder-pill-thumb img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:4px;
}
.finder-pill-thumb img.theme-light{ display:none; }
.finder-pill-thumb img.theme-dark{ display:block; }
:root[data-theme="light"] .finder-pill-thumb{ background:rgba(0,0,0,.03); }
:root[data-theme="light"] .finder-pill-thumb img.theme-light{ display:block; }
:root[data-theme="light"] .finder-pill-thumb img.theme-dark{ display:none; }
.finder-pill-text{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; }
.finder-pill strong{
  font-size:14.5px; color:var(--ink-0); letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.finder-pill span{
  font-family:'Geist Mono',monospace; font-size:11px;
  color:var(--ink-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
@media(max-width:780px){
  .finder-controls{ grid-template-columns:1fr 1fr; }
  .finder-btn{ grid-column:1/-1; justify-content:center; }
}
@media(max-width:480px){
  .finder-controls{ grid-template-columns:1fr; }
  .finder-wrap{ padding:22px; }
}

/* =============================================================
   Product spec table
   ============================================================= */
.spec-table-wrap{ overflow-x:auto; margin:20px 0 36px; border-radius:14px; border:1px solid var(--line-0); }
.spec-table{
  width:100%; border-collapse:collapse; font-size:13.5px; min-width:640px;
  background:var(--bg-1);
}
.spec-table thead th{
  background:var(--bg-2); color:var(--ink-1);
  padding:14px 16px; text-align:left; font-weight:600;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  border-bottom:1px solid var(--line-1);
}
.spec-table tbody td{
  padding:14px 16px; color:var(--ink-1);
  border-bottom:1px solid var(--line-0); font-family:'Geist Mono',monospace; font-size:12.5px;
}
.spec-table tbody tr:last-child td{ border-bottom:none; }
.spec-table tbody tr:hover{ background:var(--bg-2); }
.spec-table tbody td:first-child{ color:var(--ink-0); font-weight:500; }
.spec-table .spec-model{
  color:var(--amber); font-weight:600; letter-spacing:.02em;
}

/* =============================================================
   Collapsible spec tables (<details>)
   ============================================================= */
.spec-fold{
  border:1px solid var(--line-0); border-radius:14px;
  margin:14px 0 32px; background:var(--bg-1);
  overflow:hidden;
}
.spec-fold > summary{
  list-style:none; cursor:pointer;
  padding:16px 20px; display:flex; align-items:center; justify-content:space-between;
  font-size:13px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-1); font-weight:600;
  transition:background .15s ease, color .15s ease;
}
.spec-fold > summary::-webkit-details-marker{ display:none; }
.spec-fold > summary::after{
  content:"+"; font-size:22px; font-weight:300; color:var(--amber);
  line-height:1; transition:transform .22s ease;
}
.spec-fold[open] > summary::after{ transform:rotate(45deg); }
.spec-fold > summary:hover{ background:var(--bg-2); color:var(--ink-0); }
.spec-fold .spec-body{
  padding:0 20px 18px; border-top:1px solid var(--line-0);
}
.spec-fold .spec-legend{
  font-size:12px; color:var(--ink-2);
  padding:10px 0 14px; font-family:'Geist Mono', monospace;
  display:flex; gap:18px; flex-wrap:wrap;
}
.spec-fold .spec-table-wrap{ margin:0; border:1px solid var(--line-0); }

/* =============================================================
   Trust band (post-marquee)
   ============================================================= */
.trust-band{
  padding:56px 0 40px;
  border-top:1px solid var(--line-0);
  border-bottom:1px solid var(--line-0);
  background:
    radial-gradient(circle at 20% 30%, rgba(220,30,42,.06), transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(240,168,48,.05), transparent 60%),
    var(--bg-0);
}
.trust-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:28px;
}
.trust-item{
  padding:4px 6px;
  border-left:1px solid var(--line-0);
  padding-left:22px;
}
.trust-item:first-child{ border-left:none; padding-left:6px; }
.trust-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:10px;
  background:rgba(240,168,48,.08); color:var(--amber);
  margin-bottom:14px;
}
.trust-icon svg{ width:22px; height:22px; }
.trust-item h4{
  font-size:15px; letter-spacing:-.005em; font-weight:600;
  color:var(--ink-0); margin:0 0 8px;
}
.trust-item p{
  font-size:13.5px; line-height:1.55; color:var(--ink-2); margin:0;
}
@media (max-width:980px){
  .trust-grid{ grid-template-columns:repeat(2, 1fr); gap:24px 28px; }
  .trust-item:nth-child(3){ border-left:none; padding-left:6px; }
}
@media (max-width:580px){
  .trust-grid{ grid-template-columns:1fr; gap:24px; }
  .trust-item{ border-left:none; padding-left:6px; border-top:1px solid var(--line-0); padding-top:22px; }
  .trust-item:first-child{ border-top:none; padding-top:0; }
}

/* =============================================================
   Trusted-by brand logo wall
   ============================================================= */
.brands-section{
  padding-top:64px;
  padding-bottom:24px;
}
.brands-head{
  text-align:left;
  max-width:760px;
  margin:0 0 36px;
}
.brands-head .eyebrow{ margin-bottom:14px; }
.brands-head h2.h-2{ margin:0 0 12px; }
.brands-head .lead{ margin:0; }

.brands-grid{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:14px;
}

.brand-card{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  height:96px;
  padding:14px 18px;
  background:#FFFFFF;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 8px 24px -12px rgba(0,0,0,.45);
  overflow:hidden;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.brand-card img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  filter:saturate(.92);
  transition: filter var(--t), transform var(--t);
  user-select:none;
  -webkit-user-drag:none;
}
.brand-card:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.16);
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 14px 32px -10px rgba(0,0,0,.55),
    0 0 0 1px rgba(240,168,48,.18);
}
.brand-card:hover img{
  filter:saturate(1.1);
  transform:scale(1.04);
}

/* "+ many more" filler tile */
.brand-card.brand-and-more{
  background:transparent;
  border:1px dashed rgba(255,255,255,.18);
  box-shadow:none;
}
.brand-card.brand-and-more .brand-more{
  font-family:'Geist Mono', ui-monospace, monospace;
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-2);
}
.brand-card.brand-and-more:hover{
  border-color:rgba(240,168,48,.55);
  transform:translateY(-3px);
}
.brand-card.brand-and-more:hover .brand-more{ color:var(--amber); }

.brands-foot{
  margin:24px 0 0;
  font-size:11px; letter-spacing:.06em;
  color:var(--ink-3);
  text-align:left;
}

/* Tablet: 4 across */
@media (max-width:1100px){
  .brands-grid{ grid-template-columns:repeat(4, 1fr); }
}
/* Small tablet / large phone: 3 across */
@media (max-width:780px){
  .brands-grid{ grid-template-columns:repeat(3, 1fr); gap:12px; }
  .brand-card{ height:80px; padding:10px 12px; }
}
/* Phone: 2 across */
@media (max-width:480px){
  .brands-grid{ grid-template-columns:repeat(2, 1fr); gap:10px; }
  .brand-card{ height:72px; padding:8px 10px; border-radius:12px; }
  .brands-head h2.h-2{ font-size:clamp(28px,7vw,40px); }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .brand-card,
  .brand-card img,
  .brand-card:hover,
  .brand-card:hover img{
    transform:none !important;
    transition:none !important;
  }
}

/* =============================================================
   Process / how-we-deliver timeline
   ============================================================= */
.process-track{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;
  list-style:none; padding:0; margin:40px 0 0;
  counter-reset: step;
}
.process-step{
  position:relative;
  padding:28px 24px 24px;
  border-radius:16px; border:1px solid var(--line-0);
  background:
    linear-gradient(135deg, rgba(220,30,42,.04), transparent 40%),
    var(--bg-1);
  transition:transform .22s ease, border-color .22s ease, background .22s ease;
}
.process-step:hover{
  transform:translateY(-3px);
  border-color:rgba(240,168,48,.25);
  background:
    linear-gradient(135deg, rgba(240,168,48,.07), rgba(220,30,42,.04) 60%),
    var(--bg-1);
}
.process-num{
  position:absolute; top:-16px; left:22px;
  font-family:'Geist Mono', monospace; font-size:11px;
  font-weight:600; letter-spacing:.18em; color:var(--amber);
  background:var(--bg-0);
  padding:4px 10px; border-radius:999px;
  border:1px solid var(--line-1);
}
.process-step h4{
  font-size:17px; letter-spacing:-.01em; font-weight:600;
  color:var(--ink-0); margin:0 0 10px;
}
.process-step p{
  font-size:13.5px; line-height:1.6; color:var(--ink-2); margin:0 0 14px;
}
.process-sla{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'Geist Mono', monospace; font-size:11px;
  color:var(--ink-1); letter-spacing:.06em;
  padding:6px 10px; border-radius:6px;
  background:rgba(240,168,48,.06);
  border:1px solid rgba(240,168,48,.15);
}
.process-sla::before{
  content:""; width:6px; height:6px; border-radius:999px;
  background:var(--amber); box-shadow:0 0 8px rgba(240,168,48,.6);
}
@media (max-width:980px){
  .process-track{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:640px){
  .process-track{ grid-template-columns:1fr; }
}

/* =============================================================
   Live factory-status pill (in nav)
   ============================================================= */
.factory-status{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 11px; border-radius:999px;
  background:rgba(38,38,42,.55);
  border:1px solid var(--line-0);
  font-family:'Geist Mono', monospace;
  font-size:11px; color:var(--ink-1);
  letter-spacing:.04em;
  white-space:nowrap;
  margin-right:6px;
  transition:background .2s ease, border-color .2s ease;
}
.factory-status .fs-dot{
  width:6px; height:6px; border-radius:999px; flex-shrink:0;
}
.factory-status .fs-dot.on{
  background:#2fd06a;
  box-shadow:0 0 0 0 rgba(47,208,106,.55);
  animation: fs-pulse 2.2s infinite ease-out;
}
.factory-status .fs-dot.off{
  background:#f0a830;
  box-shadow:0 0 6px rgba(240,168,48,.25);
}
@keyframes fs-pulse {
  0%   { box-shadow:0 0 0 0 rgba(47,208,106,.55); }
  70%  { box-shadow:0 0 0 7px rgba(47,208,106,0); }
  100% { box-shadow:0 0 0 0 rgba(47,208,106,0); }
}
@media (max-width:900px){
  .factory-status{ display:none; }
}

/* =============================================================
   Floating WhatsApp quick-enquiry — compact icon-only FAB
   ============================================================= */
.wa-float{
  position:fixed; bottom:20px; right:20px;
  width:48px; height:48px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color:#fff;
  text-decoration:none;
  box-shadow:
    0 6px 16px rgba(18,140,126,.22),
    0 2px 6px rgba(18,140,126,.14);
  z-index:60;
  transition:transform .2s ease, box-shadow .25s ease, width .2s ease;
  overflow:hidden;
  white-space:nowrap;
}
.wa-float:hover{
  transform:translateY(-2px);
  box-shadow:
    0 10px 22px rgba(18,140,126,.32),
    0 4px 10px rgba(18,140,126,.2);
}
.wa-float .wa-icon{ width:22px; height:22px; flex-shrink:0; }
.wa-float .wa-text{ display:none; }
@media print {
  .wa-float{ display:none !important; }
}

/* =============================================================
   Print-friendly stylesheet
   ============================================================= */
@media print {
  * { background:transparent !important; color:#000 !important; box-shadow:none !important; }
  body { font-size:11pt; line-height:1.4; }
  .nav, .footer, .marquee, .trust-band, .hero, .mobile-menu,
  .bento, .app-tile::after, .cta-band, .faq-grid, .process-track,
  .finder-wrap, .nav-cta, .nav-toggle, .factory-status, .hero-metrics,
  .footer-mega, .footer-legal, .wa-float { display:none !important; }
  .section { padding:12px 0 !important; }
  .container, .container-narrow { max-width:100%; padding:0; }
  a { color:#000 !important; text-decoration:none !important; }
  a[href^="http"]::after { content:" (" attr(href) ")"; font-size:9pt; color:#555 !important; }
  .cat-section { break-inside:avoid; page-break-inside:avoid; }
  .spec-fold { border:1px solid #aaa !important; }
  .spec-fold[open] > summary::after { content:"—"; }
  .spec-fold:not([open]) > summary::after { content:"+"; }
  .spec-fold .spec-body { display:block !important; }
  .spec-table { font-size:10pt; }
  .spec-table thead th { background:#eee !important; }
  .prod-grid { display:block; }
  .prod-card { display:block; margin:8px 0; padding:8px 0; border-bottom:1px dotted #aaa !important; break-inside:avoid; }
  .prod-img { display:none; }
  h1, h2, h3, h4 { color:#000 !important; margin:8px 0 4px; page-break-after:avoid; }
  .h-1, .h-2 { font-size:18pt; }
  .grad-text { color:#000 !important; -webkit-text-fill-color:#000 !important; }
  .eyebrow { color:#555 !important; font-size:9pt; }
}

/* =============================================================
   Copy-to-clipboard button + toast
   ============================================================= */
.copy-btn{
  display:inline-flex; align-items:center; gap:5px;
  margin-left:8px; padding:4px 9px 4px 7px;
  background:rgba(38,38,42,.55);
  border:1px solid var(--line-0);
  border-radius:6px; color:var(--ink-2);
  font-family:'Geist Mono', monospace; font-size:11px;
  letter-spacing:.04em;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
  vertical-align:middle;
}
.copy-btn:hover{
  background:rgba(240,168,48,.08);
  border-color:rgba(240,168,48,.25);
  color:var(--amber);
}
.copy-btn.copied{
  background:rgba(47,208,106,.1);
  border-color:rgba(47,208,106,.3);
  color:#2fd06a;
}
.copy-btn svg{ width:12px; height:12px; }
.copy-btn-label{ line-height:1; }

.copy-toast{
  position:fixed; bottom:22px; left:50%;
  transform:translateX(-50%) translateY(20px);
  padding:12px 20px; border-radius:8px;
  background:rgba(34,34,38,.95);
  border:1px solid var(--line-1);
  color:var(--ink-0);
  font-family:'Geist Mono', monospace; font-size:12.5px;
  letter-spacing:.02em;
  box-shadow:0 8px 28px rgba(0,0,0,.35);
  opacity:0; pointer-events:none; z-index:70;
  transition:transform .22s ease, opacity .22s ease;
}
.copy-toast.show{
  transform:translateX(-50%) translateY(0);
  opacity:1;
}

/* =============================================================
   Scroll progress bar
   ============================================================= */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--red) 0%, var(--amber) 100%);
  transform:scaleX(0); transform-origin:left;
  z-index:100; pointer-events:none;
  box-shadow:0 0 8px rgba(240,168,48,.35);
}
@media print {
  .scroll-progress{ display:none !important; }
}

/* =============================================================
   Back-to-top button
   ============================================================= */
.back-to-top{
  position:fixed; bottom:90px; right:22px;
  width:42px; height:42px; border-radius:999px;
  border:1px solid var(--line-1);
  background:rgba(34,34,38,.88);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:var(--ink-0);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; opacity:0; pointer-events:none;
  transform:translateY(8px) scale(.94);
  transition:opacity .22s ease, transform .22s ease, background .2s ease, border-color .2s ease;
  z-index:55;
}
.back-to-top svg{ width:18px; height:18px; }
.back-to-top:hover{
  background:rgba(240,168,48,.12);
  border-color:rgba(240,168,48,.4);
  color:var(--amber);
}
.back-to-top.visible{
  opacity:1; pointer-events:auto;
  transform:translateY(0) scale(1);
}
@media (max-width:640px){
  .back-to-top{ bottom:80px; right:16px; width:38px; height:38px; }
}
@media print {
  .back-to-top{ display:none !important; }
}

/* =============================================================
   Command-K search modal
   ============================================================= */
.cmdk-root{
  position:fixed; inset:0; z-index:110;
  display:none; opacity:0;
  transition:opacity .18s ease;
}
.cmdk-root.show{ display:block; opacity:1; }
.cmdk-backdrop{
  position:absolute; inset:0;
  background:rgba(8,8,10,.72);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.cmdk-panel{
  position:absolute; top:15vh; left:50%;
  transform:translateX(-50%) translateY(-8px);
  width:min(92vw, 620px);
  background:rgba(22,22,26,.98);
  border:1px solid var(--line-1);
  border-radius:14px;
  box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(240,168,48,.06);
  overflow:hidden;
  transition:transform .2s ease;
}
.cmdk-root.show .cmdk-panel{ transform:translateX(-50%) translateY(0); }
.cmdk-head{
  display:flex; align-items:center; gap:12px;
  padding:16px 18px;
  border-bottom:1px solid var(--line-0);
}
.cmdk-icon{ width:18px; height:18px; color:var(--ink-3); flex-shrink:0; }
#cmdk-input{
  flex:1; background:transparent; border:0; outline:0;
  /* Panel is always dark, so the input must always show LIGHT text
     regardless of site theme — otherwise typed text disappears in light mode. */
  color:#F1F5F9 !important; font-size:16px; font-family:inherit;
  letter-spacing:-.005em;
  -webkit-text-fill-color:#F1F5F9;
  caret-color:#F1F5F9;
}
#cmdk-input::placeholder{ color:#7E848D; }
.cmdk-esc{
  font-family:'Geist Mono', monospace; font-size:11px;
  color:var(--ink-2);
  padding:4px 8px; border-radius:5px;
  background:rgba(38,38,42,.6);
  border:1px solid var(--line-0);
}
.cmdk-list{
  max-height:56vh; overflow-y:auto;
  padding:8px;
}
.cmdk-item{
  display:grid; grid-template-columns:auto auto 1fr auto; align-items:center;
  gap:12px; padding:8px 12px;
  border-radius:9px;
  color:var(--ink-1); text-decoration:none;
  cursor:pointer;
  transition:background .12s ease, color .12s ease;
}
.cmdk-thumb{
  width:38px; height:38px; flex-shrink:0;
  background:rgba(255,255,255,.04); border:1px solid var(--line-0);
  border-radius:6px; position:relative; overflow:hidden;
}
.cmdk-thumb img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:3px;
}
.cmdk-thumb img.theme-light{ display:none; }
.cmdk-thumb img.theme-dark{ display:block; }
:root[data-theme="light"] .cmdk-thumb{ background:rgba(0,0,0,.03); }
:root[data-theme="light"] .cmdk-thumb img.theme-light{ display:block; }
:root[data-theme="light"] .cmdk-thumb img.theme-dark{ display:none; }
/* Items without a thumbnail (family/page/term) — thumb cell is empty, so collapse it */
.cmdk-item:not(:has(.cmdk-thumb)){ grid-template-columns:auto 1fr auto; }
.cmdk-item.active, .cmdk-item:hover{
  background:rgba(240,168,48,.08);
  color:var(--ink-0);
}
.cmdk-kind{
  font-family:'Geist Mono', monospace; font-size:10px;
  padding:3px 8px; border-radius:999px;
  background:rgba(38,38,42,.6);
  border:1px solid var(--line-0);
  color:var(--ink-2);
  letter-spacing:.06em;
  text-transform:uppercase;
  min-width:62px; text-align:center;
}
.cmdk-kind-sku{ color:#FF6B6B; border-color:rgba(255,107,107,.25); background:rgba(220,30,42,.08); }
.cmdk-kind-family{ color:var(--amber); border-color:rgba(240,168,48,.25); background:rgba(240,168,48,.06); }
.cmdk-kind-page{ color:#8CB4FF; border-color:rgba(140,180,255,.18); background:rgba(140,180,255,.05); }
.cmdk-kind-term{ color:#7FE7A6; border-color:rgba(127,231,166,.2); background:rgba(127,231,166,.05); }
.cmdk-t{ font-size:14px; font-weight:500; }
.cmdk-s{ font-size:12px; color:var(--ink-3); margin-top:2px; }
.cmdk-arr{ width:14px; height:14px; opacity:0; color:var(--amber); transition:opacity .12s ease; }
.cmdk-item.active .cmdk-arr{ opacity:1; }
.cmdk-empty{ padding:24px 16px; text-align:center; color:var(--ink-3); font-size:13.5px; }
.cmdk-footer{
  display:flex; justify-content:flex-end; gap:16px;
  padding:10px 16px; border-top:1px solid var(--line-0);
  font-size:11px; color:var(--ink-3);
  font-family:'Geist Mono', monospace; letter-spacing:.04em;
}
.cmdk-footer kbd{
  display:inline-block; padding:2px 6px; border-radius:4px;
  background:rgba(38,38,42,.6); border:1px solid var(--line-0);
  color:var(--ink-2); margin-right:4px; font-family:inherit; font-size:10px;
}
html.cmdk-open{ overflow:hidden; }
@media (max-width:640px){
  .cmdk-panel{ top:8vh; width:94vw; }
  .cmdk-list{ max-height:70vh; }
  .cmdk-footer{ display:none; }
}
@media print {
  .cmdk-root{ display:none !important; }
}

/* ============================================
   CMD-K HINT BUTTON (in main nav)
   ============================================ */
.cmdk-hint{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 11px 7px 11px;
  border-radius:9px;
  background:rgba(38,38,42,.55);
  border:1px solid var(--line-0);
  color:var(--ink-2);
  font:inherit; font-size:13px; letter-spacing:.01em;
  cursor:pointer;
  transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.cmdk-hint:hover, .cmdk-hint:focus-visible{
  background:rgba(240,168,48,.08);
  border-color:rgba(240,168,48,.28);
  color:var(--ink-0);
  outline:none;
}
.cmdk-hint svg{ width:14px; height:14px; flex-shrink:0; opacity:.75; }
.cmdk-hint:hover svg{ opacity:1; color:var(--amber); }
.cmdk-hint .cmdk-hint-text{ font-size:13px; }
.cmdk-hint kbd{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:28px; height:18px; padding:0 5px;
  font-family:'Geist Mono', monospace; font-size:10.5px;
  background:rgba(38,38,42,.7);
  border:1px solid var(--line-0);
  border-radius:4px;
  color:var(--ink-2); letter-spacing:.02em;
}
@media (max-width:900px){
  .cmdk-hint .cmdk-hint-text, .cmdk-hint kbd{ display:none; }
  .cmdk-hint{ padding:8px; }
  .cmdk-hint svg{ width:16px; height:16px; opacity:1; }
}
@media print {
  .cmdk-hint{ display:none !important; }
}

/* ============================================
   STATS BAND + ANIMATED NUMBER COUNTERS
   ============================================ */
.stats-band{
  padding:64px 0 40px;
  border-top:1px solid var(--line-0);
  background:
    radial-gradient(ellipse at 20% 0%, rgba(240,168,48,.05) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 100%, rgba(220,30,42,.035) 0%, transparent 55%);
}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:28px;
}
.stat-card{
  position:relative;
  padding:32px 24px;
  border:1px solid var(--line-0);
  border-radius:16px;
  background:rgba(28,28,32,.35);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:border-color .3s ease, transform .3s ease, background .3s ease;
  overflow:hidden;
}
.stat-card::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--amber), transparent);
  opacity:0;
  transition:opacity .4s ease;
}
.stat-card:hover{
  border-color:rgba(240,168,48,.28);
  transform:translateY(-3px);
  background:rgba(32,32,36,.5);
}
.stat-card:hover::before{ opacity:1; }
.stat-num{
  font-family:'Geist', system-ui, sans-serif;
  font-size:clamp(40px, 5.5vw, 64px);
  font-weight:300;
  letter-spacing:-0.03em;
  color:var(--ink-0);
  line-height:1;
  margin-bottom:14px;
  display:flex; align-items:baseline;
}
.stat-suffix{
  font-size:.55em;
  font-weight:400;
  color:var(--amber);
  margin-left:2px;
}
.stat-lbl strong{
  display:block;
  font-weight:500;
  font-size:15px;
  color:var(--ink-1);
  margin-bottom:4px;
  letter-spacing:.005em;
}
.stat-lbl span{
  display:block;
  font-size:12.5px;
  color:var(--ink-3);
  letter-spacing:.01em;
  line-height:1.5;
}
.counter[data-counter]{
  display:inline-block;
  font-variant-numeric:tabular-nums;
}
.counter.counting{ color:var(--amber); }
.counter.done{ color:inherit; }
@media (max-width:900px){
  .stats-grid{ grid-template-columns:repeat(2, 1fr); gap:20px; }
  .stat-card{ padding:24px 20px; }
  .stat-num{ font-size:clamp(36px, 10vw, 52px); margin-bottom:10px; }
}
@media (max-width:520px){
  .stats-grid{ grid-template-columns:1fr; }
  .stats-band{ padding:40px 0 28px; }
}

/* ============================================
   PRODUCT IMAGE LIGHTBOX
   ============================================ */
.lbx-root{
  position:fixed; inset:0; z-index:9000;
  display:none;
  align-items:center; justify-content:center;
}
.lbx-root.show{ display:flex; animation:lbx-in .18s ease-out; }
@keyframes lbx-in { from { opacity:0; } to { opacity:1; } }
.lbx-backdrop{
  position:absolute; inset:0;
  background:rgba(8,8,10,.82);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  cursor:zoom-out;
}
.lbx-stage{
  position:relative;
  max-width:min(92vw, 1100px);
  max-height:90vh;
  display:flex; flex-direction:column;
  align-items:center; gap:14px;
  animation:lbx-zoom .22s cubic-bezier(.2,.9,.3,1.1);
}
@keyframes lbx-zoom { from { transform:scale(.94); opacity:.4; } to { transform:scale(1); opacity:1; } }
.lbx-img{
  max-width:100%; max-height:78vh;
  border-radius:14px;
  border:1px solid var(--line-0);
  background:rgba(24,24,26,.8);
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.lbx-caption{
  font-size:13.5px;
  color:var(--ink-2);
  letter-spacing:.01em;
  text-align:center;
  max-width:720px;
}
.lbx-close{
  position:absolute;
  top:-44px; right:-4px;
  width:36px; height:36px;
  border-radius:999px;
  border:1px solid var(--line-0);
  background:rgba(28,28,32,.8);
  color:var(--ink-1);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.lbx-close:hover{
  background:rgba(220,30,42,.15);
  color:#FF6B6B;
  border-color:rgba(220,30,42,.4);
}
html.lbx-open{ overflow:hidden; }
@media (max-width:640px){
  .lbx-close{ top:-40px; }
  .lbx-img{ max-height:72vh; }
}
@media print {
  .lbx-root{ display:none !important; }
}

/* ============================================
   ENQUIRY BASKET
   "+ Add" button injected onto each prod-card
   ============================================ */
.prod-img{ position:relative; }
.prod-add{
  position:absolute;
  top:10px; right:10px;
  z-index:5;
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 10px;
  font:500 11.5px/1 'Geist', system-ui, sans-serif;
  letter-spacing:.02em;
  background:rgba(18,18,20,.78);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  color:var(--ink-1);
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  cursor:pointer;
  opacity:0;
  transform:translateY(-2px);
  transition:opacity .18s ease, transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.prod-card:hover .prod-add,
.prod-add:focus-visible,
.prod-add.added{
  opacity:1;
  transform:translateY(0);
}
.prod-add:hover{
  background:rgba(240,168,48,.18);
  color:var(--amber);
  border-color:rgba(240,168,48,.4);
}
.prod-add.added{
  background:rgba(42,188,106,.18);
  color:#7FE7A6;
  border-color:rgba(42,188,106,.4);
}
.prod-add svg{ flex-shrink:0; }
.prod-add.added svg{ transform:rotate(45deg); transition:transform .22s ease; }
@media (pointer:coarse){
  .prod-add{ opacity:1; transform:none; }
}

/* ---- Floating tray (bottom-right) ---- */
.eb-tray{
  position:fixed;
  right:18px;
  bottom:74px;   /* sits above .back-to-top */
  z-index:800;
  display:none;
  align-items:center; gap:8px;
  padding:10px 14px 10px 12px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(28,28,32,.9), rgba(20,20,22,.9));
  border:1px solid rgba(240,168,48,.25);
  color:var(--ink-0);
  font:500 13.5px/1 'Geist', system-ui, sans-serif;
  cursor:pointer;
  box-shadow:0 14px 36px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.02) inset;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.eb-tray.has-items{ display:inline-flex; }
.eb-tray:hover{
  transform:translateY(-2px);
  border-color:rgba(240,168,48,.5);
  box-shadow:0 18px 44px rgba(0,0,0,.55), 0 0 0 1px rgba(240,168,48,.1) inset;
}
.eb-tray-count{
  min-width:22px; height:22px;
  padding:0 7px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--amber);
  color:#0B0B0E;
  font-family:'Geist Mono', monospace; font-size:11.5px; font-weight:600;
  border-radius:999px;
  letter-spacing:.02em;
}
.eb-tray svg{ opacity:.85; }
.eb-tray.pulse{ animation:eb-pulse .6s cubic-bezier(.3,.9,.3,1.1); }
@keyframes eb-pulse {
  0%   { transform:scale(1); }
  40%  { transform:scale(1.08); }
  100% { transform:scale(1); }
}
@media (max-width:640px){
  .eb-tray{ right:14px; bottom:70px; padding:10px 12px; }
  .eb-tray-label{ display:none; }
}
@media print {
  .eb-tray{ display:none !important; }
}

/* ---- Basket sheet modal ---- */
.eb-sheet{
  position:fixed; inset:0; z-index:9100;
  display:none;
}
.eb-sheet.show{ display:block; }
.eb-sheet-backdrop{
  position:absolute; inset:0;
  background:rgba(8,8,10,.7);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  animation:eb-bd-in .16s ease-out;
}
@keyframes eb-bd-in { from { opacity:0; } to { opacity:1; } }
.eb-sheet-panel{
  position:absolute;
  right:0; top:0; bottom:0;
  width:min(440px, 100vw);
  background:linear-gradient(180deg, rgba(20,20,22,.98), rgba(14,14,16,.98));
  border-left:1px solid var(--line-0);
  display:flex; flex-direction:column;
  animation:eb-slide .24s cubic-bezier(.2,.9,.3,1.05);
}
@keyframes eb-slide { from { transform:translateX(40px); opacity:.3; } to { transform:translateX(0); opacity:1; } }
.eb-sheet-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:22px 22px 16px;
  border-bottom:1px solid var(--line-0);
  gap:16px;
}
.eb-sheet-title{
  font-family:'Fraunces', serif;
  font-size:20px; font-weight:500;
  color:var(--ink-0);
  letter-spacing:-0.01em;
}
.eb-sheet-sub{
  font-size:12.5px; color:var(--ink-3);
  margin-top:3px;
  letter-spacing:.01em;
}
.eb-sheet-close{
  flex-shrink:0;
  width:32px; height:32px;
  border-radius:8px;
  border:1px solid var(--line-0);
  background:rgba(28,28,32,.5);
  color:var(--ink-2);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .16s ease, color .16s ease;
}
.eb-sheet-close:hover{ background:rgba(220,30,42,.15); color:#FF6B6B; }
.eb-sheet-list{
  flex:1; overflow-y:auto;
  padding:8px 12px;
}
.eb-item{
  display:flex; align-items:center; gap:10px;
  padding:12px 12px;
  border-radius:10px;
  border:1px solid transparent;
  transition:background .14s ease, border-color .14s ease;
}
.eb-item:hover{ background:rgba(38,38,42,.4); border-color:var(--line-0); }
.eb-item-copy{ flex:1; min-width:0; }
.eb-item-name{
  font-size:14px; font-weight:500;
  color:var(--ink-0);
  letter-spacing:.005em;
}
.eb-item-spec{
  font-size:12px; color:var(--ink-3);
  margin-top:3px; line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.eb-item-rm{
  flex-shrink:0;
  width:28px; height:28px;
  border-radius:999px;
  background:rgba(38,38,42,.5);
  border:1px solid var(--line-0);
  color:var(--ink-3);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.eb-item-rm:hover{
  background:rgba(220,30,42,.18);
  color:#FF6B6B;
  border-color:rgba(220,30,42,.4);
}
.eb-empty{
  padding:40px 20px;
  text-align:center;
  color:var(--ink-3);
  font-size:13.5px; line-height:1.55;
}
.eb-empty strong{ color:var(--amber); font-weight:500; }
.eb-sheet-foot{
  display:flex; gap:10px; justify-content:space-between; align-items:center;
  padding:14px 18px;
  border-top:1px solid var(--line-0);
}
.eb-sheet-foot .btn-ghost{
  padding:8px 14px;
  font-size:12.5px;
  background:transparent;
  color:var(--ink-3);
  border:1px solid var(--line-0);
  border-radius:999px;
  cursor:pointer;
  transition:color .16s ease, border-color .16s ease;
}
.eb-sheet-foot .btn-ghost:hover{ color:#FF6B6B; border-color:rgba(220,30,42,.3); }
.eb-sheet-foot [data-eb-send]{ flex:1; max-width:260px; text-align:center; }
.eb-sheet-foot [data-eb-send].disabled{
  opacity:.35;
  pointer-events:none;
  cursor:not-allowed;
}
html.eb-open{ overflow:hidden; }
@media (max-width:520px){
  .eb-sheet-panel{ width:100vw; }
}
@media print {
  .eb-sheet{ display:none !important; }
}

/* ============================================
   PRODUCT LIVE FILTER BAR
   ============================================ */
.filter-bar{
  position:sticky;
  top:calc(var(--nav-h, 64px) + 44px);  /* below nav + anchor-nav */
  z-index:40;
  background:rgba(12,12,14,.88);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  border-bottom:1px solid var(--line-0);
  padding:12px 0;
}
.filter-bar-inner{
  max-width:var(--max-w, 1280px);
  margin:0 auto;
  padding:0 24px;
  display:flex; align-items:center; gap:16px;
  flex-wrap:wrap;
}
.filter-search{
  display:inline-flex; align-items:center; gap:8px;
  flex:1; min-width:240px;
  background:rgba(22,22,26,.6);
  border:1px solid var(--line-0);
  border-radius:10px;
  padding:7px 12px 7px 11px;
  transition:border-color .18s ease, background .18s ease;
}
.filter-search:focus-within{
  border-color:rgba(240,168,48,.4);
  background:rgba(28,28,32,.75);
}
.filter-search svg{ opacity:.55; color:var(--ink-2); flex-shrink:0; }
.filter-search:focus-within svg{ opacity:1; color:var(--amber); }
#fb-q{
  flex:1; border:none; background:transparent;
  font:400 14px/1.3 'Geist', system-ui, sans-serif;
  /* Filter bar background is always dark — force light text regardless of theme
     (otherwise text disappears in light mode: dark-on-dark). */
  color:#F1F5F9 !important; outline:none;
  -webkit-text-fill-color:#F1F5F9;
  caret-color:#F1F5F9;
  letter-spacing:.005em;
}
#fb-q::placeholder{ color:#7E848D; }
.filter-clear{
  flex-shrink:0;
  width:22px; height:22px;
  border-radius:999px;
  border:1px solid var(--line-0);
  background:rgba(38,38,42,.5);
  color:var(--ink-2);
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .16s ease, color .16s ease;
}
.filter-clear[hidden]{ display:none; }
.filter-clear:hover{ background:rgba(220,30,42,.2); color:#FF6B6B; }
.filter-chips{
  display:inline-flex; flex-wrap:wrap; gap:6px;
}
.filter-chip{
  padding:7px 11px;
  font:500 12px/1 'Geist', system-ui, sans-serif;
  letter-spacing:.015em;
  background:rgba(22,22,26,.5);
  color:var(--ink-2);
  border:1px solid var(--line-0);
  border-radius:999px;
  cursor:pointer;
  transition:color .16s ease, background .16s ease, border-color .16s ease;
}
.filter-chip:hover{ color:var(--ink-0); border-color:rgba(240,168,48,.3); }
.filter-chip.active{
  background:rgba(240,168,48,.12);
  color:var(--amber);
  border-color:rgba(240,168,48,.35);
}
.filter-count{
  margin-left:auto;
  font:400 12px/1.4 'Geist Mono', monospace;
  color:var(--ink-3);
  letter-spacing:.02em;
  white-space:nowrap;
}
.filter-count strong{ color:var(--ink-0); font-weight:500; }
.filter-empty{
  max-width:var(--max-w, 1280px);
  margin:14px auto 0;
  padding:12px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  color:var(--ink-2);
  font-size:13.5px;
}
.filter-empty[hidden]{ display:none; }
.filter-empty strong{ color:var(--amber); }
.filter-empty .btn-ghost{
  padding:7px 14px; font-size:12.5px;
  background:transparent; border:1px solid var(--line-0);
  color:var(--ink-1);
  border-radius:999px; cursor:pointer;
  transition:border-color .16s ease, color .16s ease;
}
.filter-empty .btn-ghost:hover{ border-color:rgba(240,168,48,.4); color:var(--amber); }
.prod-card.fb-hidden, .cat-section.fb-hidden{ display:none !important; }
.prod-card{ transition:opacity .2s ease, transform .3s ease; }

/* ============================================
   KEYBOARD SHORTCUTS OVERLAY
   ============================================ */
.kbd-help{
  position:fixed; inset:0; z-index:9200;
  display:none;
  align-items:center; justify-content:center;
}
.kbd-help.show{ display:flex; animation:kbd-in .18s ease-out; }
@keyframes kbd-in { from { opacity:0; } to { opacity:1; } }
.kbd-backdrop{
  position:absolute; inset:0;
  background:rgba(8,8,10,.75);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.kbd-panel{
  position:relative;
  width:min(460px, 92vw);
  max-height:82vh;
  overflow-y:auto;
  background:linear-gradient(180deg, rgba(20,20,22,.98), rgba(14,14,16,.98));
  border:1px solid var(--line-0);
  border-radius:14px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  animation:kbd-zoom .22s cubic-bezier(.2,.9,.3,1.05);
}
@keyframes kbd-zoom { from { transform:scale(.96); opacity:.5; } to { transform:scale(1); opacity:1; } }
.kbd-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:20px 22px 14px;
  border-bottom:1px solid var(--line-0);
  gap:16px;
}
.kbd-title{
  font-family:'Fraunces', serif;
  font-size:19px; font-weight:500;
  color:var(--ink-0);
  letter-spacing:-0.01em;
}
.kbd-sub{
  font-size:12.5px; color:var(--ink-3);
  margin-top:3px;
}
.kbd-sub kbd{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px;
  font-family:'Geist Mono', monospace; font-size:10.5px;
  background:rgba(38,38,42,.7);
  border:1px solid var(--line-0);
  border-radius:4px;
  color:var(--ink-2);
}
.kbd-close{
  flex-shrink:0;
  width:30px; height:30px;
  border-radius:8px;
  border:1px solid var(--line-0);
  background:rgba(28,28,32,.5);
  color:var(--ink-2);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .16s ease, color .16s ease;
}
.kbd-close:hover{ background:rgba(220,30,42,.15); color:#FF6B6B; }
.kbd-rows{ padding:10px 16px 18px; }
.kbd-row{
  display:grid;
  grid-template-columns:160px 1fr;
  align-items:center;
  padding:10px 8px;
  border-radius:8px;
}
.kbd-row:hover{ background:rgba(38,38,42,.35); }
.kbd-keys{
  display:inline-flex; align-items:center; gap:4px;
  flex-wrap:wrap;
}
.kbd-keys kbd{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:28px; height:24px; padding:0 7px;
  font-family:'Geist Mono', monospace; font-size:11px;
  background:rgba(28,28,32,.8);
  border:1px solid var(--line-0);
  border-bottom-width:2px;
  border-radius:5px;
  color:var(--ink-1); letter-spacing:.02em;
}
.kbd-plus{
  color:var(--ink-3);
  font-size:11px;
  padding:0 2px;
}
.kbd-lbl{
  font-size:13px; color:var(--ink-2);
  letter-spacing:.005em;
}
html.kbd-open{ overflow:hidden; }
@media (max-width:520px){
  .kbd-row{ grid-template-columns:130px 1fr; }
  .kbd-keys kbd{ min-width:24px; padding:0 5px; }
}
@media print {
  .kbd-help{ display:none !important; }
}

/* ============================================
   TECHNICAL GLOSSARY
   ============================================ */
.glossary-section{
  border-top:1px solid var(--line-0);
  background:radial-gradient(ellipse at 50% 0%, rgba(240,168,48,.04) 0%, transparent 70%);
}
.glossary-head{
  text-align:center;
  max-width:720px;
  margin:0 auto 40px;
}
.glossary-head .eyebrow{ justify-content:center; }
.glossary-head h2{ margin:12px 0 14px; }
.glossary-head .lead{ color:var(--ink-2); font-size:15.5px; line-height:1.55; }
.glossary-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
.gloss-card{
  padding:20px 22px;
  border:1px solid var(--line-0);
  border-radius:14px;
  background:rgba(22,22,26,.4);
  transition:border-color .25s ease, background .25s ease, transform .25s ease;
}
.gloss-card:hover{
  border-color:rgba(240,168,48,.25);
  background:rgba(30,30,34,.55);
  transform:translateY(-2px);
}
.gloss-term{
  font-family:'Geist Mono', monospace;
  font-size:16px; font-weight:600;
  color:var(--amber);
  letter-spacing:.02em;
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin-bottom:10px;
}
.gloss-meta{
  font-family:'Geist', system-ui, sans-serif;
  font-weight:400;
  font-size:12.5px;
  color:var(--ink-3);
  letter-spacing:.01em;
  text-transform:none;
}
.gloss-card p{
  font-size:13.5px;
  color:var(--ink-2);
  line-height:1.6;
  margin:0;
  letter-spacing:.005em;
}
.gloss-card p strong{ color:var(--ink-0); font-weight:500; }
.gloss-card p em{ font-family:'Fraunces', serif; font-style:italic; color:var(--ink-1); }
@media (max-width:900px){
  .glossary-grid{ grid-template-columns:repeat(2, 1fr); gap:16px; }
}
@media (max-width:560px){
  .glossary-grid{ grid-template-columns:1fr; }
  .gloss-card{ padding:18px 20px; }
}
@media (max-width:800px){
  .filter-bar{ padding:10px 0; }
  .filter-bar-inner{ gap:10px; padding:0 14px; }
  .filter-search{ min-width:0; flex:1 1 100%; }
  .filter-chips{ overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; }
  .filter-chips::-webkit-scrollbar{ display:none; }
  .filter-count{ flex:1 1 auto; text-align:right; }
}
@media print {
  .filter-bar{ display:none !important; }
}

/* ============================================
   CATEGORY HERO BANNER (Gemini-generated)
   A dramatic image banner at the top of each product category section.
   ============================================ */
.cat-hero-banner{
  position:relative; margin:28px 0 40px;
  border-radius:18px; overflow:hidden;
  border:1px solid var(--line-0);
  background:var(--bg-1);
  aspect-ratio: 21 / 9;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.02),
    0 30px 70px -40px rgba(0,0,0,.8),
    0 60px 120px -60px rgba(220,30,42,.18);
}
.cat-hero-banner picture,
.cat-hero-banner img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  filter:saturate(1.08) contrast(1.06);
  transition: transform .9s cubic-bezier(.2,.9,.25,1);
}
.cat-hero-banner:hover img{ transform:scale(1.04); }
.cat-hero-banner::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.25) 0%, transparent 30%, transparent 55%, rgba(0,0,0,.85) 100%),
    linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.1) 50%, rgba(0,0,0,.35) 100%);
  z-index:1;
}
.cat-hero-banner figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:24px 30px 26px;
  display:flex; align-items:flex-end; gap:20px; flex-wrap:wrap;
  color:var(--ink-0);
}
.cat-hero-tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px;
  font:500 10.5px/1 'Geist Mono', monospace;
  letter-spacing:.2em; text-transform:uppercase;
  color:#FF9F43;
  background:rgba(240,168,48,.12);
  border:1px solid rgba(240,168,48,.32);
  border-radius:999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  flex-shrink:0;
}
.cat-hero-tag::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:#FF9F43; box-shadow:0 0 10px #FF9F43;
  animation:cat-hero-pulse 1.8s ease-in-out infinite;
}
@keyframes cat-hero-pulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.45; transform:scale(.8); }
}
.cat-hero-cap{
  font:400 15.5px/1.5 'Inter', system-ui, sans-serif;
  color:rgba(250,247,242,.92);
  max-width:620px;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}
@media(max-width:780px){
  .cat-hero-banner{ aspect-ratio: 16 / 10; margin:24px 0 32px; border-radius:14px; }
  .cat-hero-banner figcaption{ padding:18px 20px 20px; gap:12px; }
  .cat-hero-cap{ font-size:14px; line-height:1.5; }
}

/* =============================================================
   Real logo (image) — replaces the SVG bolt placeholder
   ============================================================= */
.nav-logo-img{
  height:44px; width:auto; display:block;
  transition: opacity var(--t-fast);
}
@media (max-width: 720px){ .nav-logo-img{ height:38px; } }
.nav-logo-img.logo-light{ display:none; }
:root[data-theme="light"] .nav-logo-img.logo-dark{ display:none; }
:root[data-theme="light"] .nav-logo-img.logo-light{ display:block; }
.footer-logo-img{
  height:64px; width:auto; display:block; margin-bottom:18px;
}
.footer-logo-img.logo-light{ display:none; }
:root[data-theme="light"] .footer-logo-img.logo-dark{ display:none; }
:root[data-theme="light"] .footer-logo-img.logo-light{ display:block; }

/* =============================================================
   Theme toggle button (sun / moon)
   ============================================================= */
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:100px;
  background:rgba(255,255,255,.04); border:1px solid var(--line-1);
  color:var(--ink-1);
  transition: all var(--t-fast);
  cursor:pointer; flex-shrink:0;
}
.theme-toggle:hover{
  background:rgba(255,255,255,.08); border-color:var(--line-2); color:var(--ink-0);
  transform:translateY(-1px);
}
.theme-toggle svg{ width:18px; height:18px; transition: transform var(--t); }
.theme-toggle .icon-sun{ display:none; }
.theme-toggle .icon-moon{ display:block; }
:root[data-theme="light"] .theme-toggle{
  background:rgba(0,0,0,.04); border-color:var(--line-light-1); color:var(--ink-light-1);
}
:root[data-theme="light"] .theme-toggle:hover{
  background:rgba(0,0,0,.08); color:var(--ink-light-0);
}
:root[data-theme="light"] .theme-toggle .icon-sun{ display:block; }
:root[data-theme="light"] .theme-toggle .icon-moon{ display:none; }

/* =============================================================
   LIGHT MODE — variable remap + targeted overrides
   Activated by <html data-theme="light">
   ============================================================= */
:root[data-theme="light"]{
  --bg-0:   #ffffff;
  --bg-1:   #fafaf8;
  --bg-2:   #f5f3ee;
  --bg-3:   #ebe8e0;

  --ink-0:  #0a0a0b;
  --ink-1:  #1c1c1f;
  --ink-2:  #5a5753;
  --ink-3:  #8b8680;
  --ink-4:  #b8b3aa;

  --line-0: rgba(0,0,0,.07);
  --line-1: rgba(0,0,0,.11);
  --line-2: rgba(0,0,0,.18);

  color-scheme: light;
}
:root[data-theme="light"] body{ background:var(--bg-0); color:var(--ink-0); }
html[data-theme="light"]{ background:var(--bg-0); color-scheme: light; }

/* Nav bar — light blur */
:root[data-theme="light"] .nav{
  background:rgba(255,255,255,.78);
  border-bottom:1px solid var(--line-0);
}
:root[data-theme="light"] .nav.scrolled{
  background:rgba(255,255,255,.94);
  border-bottom-color:var(--line-1);
}
:root[data-theme="light"] .nav-links a:hover{ background:rgba(0,0,0,.04); color:var(--ink-0); }
:root[data-theme="light"] .nav-links a.active{ background:rgba(0,0,0,.06); color:var(--ink-0); }

/* Buttons — flip dark surfaces */
:root[data-theme="light"] .btn-primary{
  background:#0a0a0b; color:#ffffff;
}
:root[data-theme="light"] .btn-primary:hover{
  box-shadow:0 10px 30px -6px rgba(10,10,11,.3);
}
:root[data-theme="light"] .btn-ghost{
  background:rgba(0,0,0,.04); color:var(--ink-0); border-color:var(--line-1);
}
:root[data-theme="light"] .btn-ghost:hover{
  background:rgba(0,0,0,.08); border-color:var(--line-2);
}
:root[data-theme="light"] .btn-outline{
  background:transparent; color:var(--ink-0); border-color:var(--line-2);
}
:root[data-theme="light"] .btn-outline:hover{
  background:rgba(0,0,0,.04); border-color:var(--ink-0);
}

/* Light mode: keep banners visible but slightly darken the figcaption for legibility */
:root[data-theme="light"] .cat-hero-banner img{ filter: saturate(.95) brightness(.95); }
:root[data-theme="light"] .cat-hero-banner::before{
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.55) 100%);
}
/* Light mode: keep the PCB image visible but blend it into the warm cream background
   instead of looking like a dark hole. multiply makes dark traces stay dark, light areas
   become transparent — capacitors and traces show through as warm tones. */
:root[data-theme="light"] .hero-bg-image{ opacity:1; }
:root[data-theme="light"] .hero-bg-image picture,
:root[data-theme="light"] .hero-bg-image img{
  opacity:.42;
  filter:saturate(1.15) contrast(.95) brightness(1.08);
  mix-blend-mode:normal;
}
/* Curtain: heavy cream veil over the left two-thirds where the headline + sub sit.
   Hard cutoff around 55% so right side keeps the PCB visible & vivid. */
:root[data-theme="light"] .hero-bg-image::before{
  background:
    linear-gradient(180deg, rgba(246,243,238,.4) 0%, rgba(246,243,238,0) 30%, rgba(246,243,238,0) 60%, rgba(246,243,238,.92) 100%),
    linear-gradient(90deg, var(--bg-0) 0%, rgba(246,243,238,.97) 38%, rgba(246,243,238,.78) 55%, rgba(246,243,238,.25) 78%, rgba(246,243,238,0) 100%);
}
/* Subtler brand glow in light mode */
:root[data-theme="light"] .hero-bg-image::after{
  background:
    radial-gradient(ellipse 45% 55% at 88% 45%, rgba(220,30,42,.10) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 70% 80%, rgba(240,168,48,.08) 0%, transparent 70%);
  mix-blend-mode:multiply;
}

/* City-lights cross-fade hero — locked to the DARK appearance regardless
   of theme. The panorama is a dusk/night scene that fights warm cream
   tones; keeping it dark in both themes reads cleanly and intentionally,
   like a cinematic intro followed by a light body. We override the
   light-theme defaults on the hero, its panorama, headline, and sub. */
:root[data-theme="light"] .hero.has-hero-cityfade{ background:#0a0a0c; }
:root[data-theme="light"] .hero-cityfade .hero-bg-on,
:root[data-theme="light"] .hero-cityfade .hero-bg-off{
  opacity:1; mix-blend-mode:normal;
  filter:saturate(1.06) contrast(1.04);
}
/* Restore the dark-theme curtain (don't apply the cream one) */
:root[data-theme="light"] .hero-cityfade::before{
  background:
    linear-gradient(180deg,
      #0a0a0c             0%,
      rgba(10,10,12,.55)  3%,
      rgba(10,10,12,0)    8%,
      rgba(10,10,12,0)    92%,
      rgba(10,10,12,.45)100%);
}
/* Force headline / sub / metrics to read on dark, even when site is in light theme */
:root[data-theme="light"] .hero.has-hero-cityfade h1{ color:#f1f5f9; }
:root[data-theme="light"] .hero.has-hero-cityfade .hero-sub{ color:rgba(241,245,249,.78); }
:root[data-theme="light"] .hero.has-hero-cityfade .hero-pill{
  background:rgba(255,255,255,.06); color:#f1f5f9; border-color:rgba(255,255,255,.12);
}
:root[data-theme="light"] .hero.has-hero-cityfade .hero-metric .num{ color:#f1f5f9; }
:root[data-theme="light"] .hero.has-hero-cityfade .hero-metric .lbl{ color:rgba(241,245,249,.55); }
/* Section directly after the hero gets the page's normal light bg back */
:root[data-theme="light"] .hero.has-hero-cityfade + section{ background:var(--bg-0); }

/* Cursor-follow LED matrix overlay (canvas) — used on landing & products hero */
.led-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:1; display:block;
}
/* Landing hero LED matrix — full-bleed, screen-blended for warm-on-dark */
.hero-led-canvas{ mix-blend-mode: screen; }
:root[data-theme="light"] .hero-led-canvas{ mix-blend-mode:multiply; opacity:.55; }
@media (max-width:900px){
  .led-canvas{ display:none; }
}

/* Grain — invert colour */
:root[data-theme="light"] .grain{ opacity:.025; mix-blend-mode:multiply; }

/* Cards / surfaces with hardcoded white-alpha — flip them */
:root[data-theme="light"] .pill,
:root[data-theme="light"] .pill-outline,
:root[data-theme="light"] .chip,
:root[data-theme="light"] .kbd{
  background:rgba(0,0,0,.04); border-color:var(--line-1); color:var(--ink-1);
}

/* Footer */
:root[data-theme="light"] .footer{ background:var(--bg-1); border-top:1px solid var(--line-0); }
:root[data-theme="light"] .footer-social a,
:root[data-theme="light"] .footer-mega-contact a{
  background:rgba(0,0,0,.04); color:var(--ink-1); border-color:var(--line-0);
}
:root[data-theme="light"] .footer-social a:hover,
:root[data-theme="light"] .footer-mega-contact a:hover{
  background:rgba(0,0,0,.07); color:var(--ink-0);
}

/* Product cards lift on white */
:root[data-theme="light"] .prod-card{
  background:var(--bg-1); border-color:var(--line-0);
  box-shadow:0 1px 2px rgba(0,0,0,.03), 0 6px 18px -10px rgba(0,0,0,.08);
}
:root[data-theme="light"] .prod-card:hover{
  border-color:var(--line-1);
  box-shadow:0 8px 22px -10px rgba(0,0,0,.12), 0 24px 50px -24px rgba(0,0,0,.15);
}
:root[data-theme="light"] .prod-card-img{ background:#ffffff; }

/* Make sure any rgba(255,255,255,.0X) translucent backgrounds inside cards still read */
:root[data-theme="light"] .stat-card,
:root[data-theme="light"] .feature-card,
:root[data-theme="light"] .pillar-card,
:root[data-theme="light"] .testimonial-card{
  background:var(--bg-1); border-color:var(--line-0);
}

/* Scrollbar */
:root[data-theme="light"]{ scrollbar-color: rgba(0,0,0,.25) transparent; }

/* Mobile menu in light mode */
:root[data-theme="light"] .nav-mobile{
  background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--line-0);
}

/* Smooth theme cross-fade */
html, body, .nav, .footer, .prod-card, .cat-hero-banner, .btn{
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}

/* =============================================================
   Wi-Fi Mini UPS bento art — animated story:
   UPS device → flowing power → router → continuous Wi-Fi waves
   ============================================================= */

/* Constrain SVG so it sits cleanly in the bottom-right of the bento card
   without colliding with the description text. */
.bento-card .b-art-ups-svg{
  width:54%;
  max-height:78%;
}

/* Always-on: power dashes flow from UPS to router */
.b-art-ups-svg .ups-current{
  animation: ups-flow 1.6s linear infinite;
}
@keyframes ups-flow{
  to { stroke-dashoffset: -36; }
}
.bento-card:hover .b-art-ups-svg .ups-current{
  animation-duration: .9s;          /* speeds up on hover */
}

/* Always-on: green LED on UPS slowly pulses (full / charged) */
.b-art-ups-svg .ups-led-g{
  animation: ups-led-breath 2.4s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes ups-led-breath{
  0%,100% { opacity: 1;   r: 1.8; filter: drop-shadow(0 0 0 transparent); }
  50%     { opacity:.85;  r: 2.1; filter: drop-shadow(0 0 3px rgba(52,211,153,.7)); }
}

/* The blue (charging) and red (backup) LEDs sit dim — they're "off" by default,
   only the green is active because mains is fine and battery is full. */
.b-art-ups-svg .ups-led-r,
.b-art-ups-svg .ups-led-b{
  opacity:.22;
}

/* On hover: simulate a power-cut moment — red lights up briefly,
   showing the UPS would kick into backup mode if mains failed.
   The router's link LED also glows (network never drops). */
.bento-card:hover .b-art-ups-svg .ups-led-r{
  animation: ups-led-alert 1.2s ease-in-out infinite;
}
@keyframes ups-led-alert{
  0%,100% { opacity:.22; }
  50%     { opacity:1; filter: drop-shadow(0 0 4px rgba(255,59,68,.85)); }
}

/* Router activity LED blinks (always on) — packets flowing */
.b-art-ups-svg .ups-rt-led-act{
  animation: ups-rt-blink 1.4s ease-in-out infinite;
}
@keyframes ups-rt-blink{
  0%,100% { opacity:.4; }
  50%     { opacity:1; }
}

/* Router antenna tips faintly glow on hover */
.bento-card:hover .b-art-ups-svg .ups-router circle{
  filter: drop-shadow(0 0 3px rgba(220,30,42,.6));
}

/* Cable subtly thickens on hover, showing strong power flow */
.bento-card:hover .b-art-ups-svg .ups-cable path{
  stroke-opacity: 1;
}

/* Reduced motion fallback — kill keyframes, keep static layout */
@media (prefers-reduced-motion: reduce){
  .b-art-ups-svg .ups-current,
  .b-art-ups-svg .ups-led-g,
  .b-art-ups-svg .ups-led-r,
  .b-art-ups-svg .ups-rt-led-act{
    animation: none !important;
  }
}

/* =============================================================
   STRIP LIGHT bento — chasing LEDs ripple along the strip
   ============================================================= */
.b-art-strip .led{ transform-origin:center; transform-box:fill-box; }
.b-art-strip .led .halo{ fill-opacity:.15; }
.b-art-strip .led .core{ fill-opacity:1; }
.b-art-strip .led{
  animation: strip-chase 2.4s ease-in-out infinite;
}
.b-art-strip .led-1{ animation-delay:0s; }
.b-art-strip .led-2{ animation-delay:.18s; }
.b-art-strip .led-3{ animation-delay:.36s; }
.b-art-strip .led-4{ animation-delay:.54s; }
.b-art-strip .led-5{ animation-delay:.72s; }
.b-art-strip .led-6{ animation-delay:.90s; }
@keyframes strip-chase{
  0%, 70%, 100% { opacity:.55; }
  15%, 30%      { opacity:1; filter: drop-shadow(0 0 6px rgba(255,227,168,.85)); }
}
.bento-card:hover .b-art-strip .led{ animation-duration:1.2s; }
/* 12V tag pulses softly — like the active "selected" voltage */
.b-art-strip .strip-v-12{
  animation: strip-v-active 3.2s ease-in-out infinite;
}
@keyframes strip-v-active{
  0%,100% { stroke-opacity:.5; }
  50%     { stroke-opacity:.95; }
}

/* =============================================================
   NON-ISO HPF bento — AC sine in, CC flat-line out
   ============================================================= */
.b-art-noniso .ni-flow{
  animation: niso-current 1.8s linear infinite;
}
@keyframes niso-current{
  to { stroke-dashoffset: -36; }
}
.bento-card:hover .b-art-noniso .ni-flow{ animation-duration:.9s; }

.b-art-noniso .ni-ac-in{
  animation: niso-ac 2.4s ease-in-out infinite;
}
@keyframes niso-ac{
  0%,100% { stroke-opacity:.5; }
  50%     { stroke-opacity:.95; }
}

.bento-card:hover .b-art-noniso .ni-regulator rect:first-child{
  filter: drop-shadow(0 0 6px rgba(52,211,153,.65));
}

/* =============================================================
   SURGE bento — lightning bolt → spike → clipped storyline
   The cycle repeats every 4 seconds. Bolt strikes, spike rises,
   gets clamped at Vc, then everything settles back to baseline AC.
   ============================================================= */
.b-art-surge .surge-bolt{
  animation: surge-bolt-strike 4s ease-in-out infinite;
}
@keyframes surge-bolt-strike{
  0%, 12%, 60%, 100% { stroke-opacity:0; filter:none; }
  18%, 22%           { stroke-opacity:1; filter:drop-shadow(0 0 8px rgba(255,210,122,.85)); }
  30%                { stroke-opacity:.4; }
  40%                { stroke-opacity:0; }
}

.b-art-surge .surge-spike{
  animation: surge-clamp 4s ease-in-out infinite;
}
@keyframes surge-clamp{
  0%, 12%, 60%, 100% { stroke-opacity:.25; }
  20%, 35%           { stroke-opacity:1; filter:drop-shadow(0 0 4px rgba(255,210,122,.7)); }
}

.b-art-surge .surge-ghost{
  animation: surge-ghost 4s ease-in-out infinite;
}
@keyframes surge-ghost{
  0%, 12%, 60%, 100% { stroke-opacity:0; }
  20%, 30%           { stroke-opacity:.20; }
}

.b-art-surge .surge-vc{
  animation: surge-vc-glow 4s ease-in-out infinite;
}
@keyframes surge-vc-glow{
  0%, 12%, 60%, 100% { stroke-opacity:.55; stroke-width:1; }
  18%, 35%           { stroke-opacity:1; stroke-width:1.4; }
}

/* =============================================================
   CCT / TRI-COLOR catalog — single bulb morphs through 3 K levels
   The fill animation is inline SMIL so it just works.
   The K labels light up in sequence below.
   ============================================================= */
.c-art-cct .cct-k{
  fill-opacity:.4;
  animation: cct-label 6s ease-in-out infinite;
}
.c-art-cct .cct-k1{ animation-delay:0s; }
.c-art-cct .cct-k2{ animation-delay:-4s; }   /* 6s × .33 = 2s into the cycle */
.c-art-cct .cct-k3{ animation-delay:-2s; }   /* 6s × .66 = 4s into the cycle */
@keyframes cct-label{
  0%, 33%, 100% { fill-opacity:.4; }
  10%, 23%      { fill-opacity:1; }
}

/* =============================================================
   DOB catalog — concentric LEDs around center IC, breathing in waves
   ============================================================= */
.c-art-dob .dob-led,
.c-art-dob .dob-halo{
  transform-origin:center; transform-box:fill-box;
}
.c-art-dob .dob-led,
.c-art-dob .dob-halo{
  animation: dob-breathe 2.4s ease-in-out infinite;
}
/* stagger ring positions for a rotating chase — 8 slots × .3s = 2.4s */
.c-art-dob .dl-1, .c-art-dob .dh-1{ animation-delay:0s; }
.c-art-dob .dl-2, .c-art-dob .dh-2{ animation-delay:.3s; }
.c-art-dob .dl-3, .c-art-dob .dh-3{ animation-delay:.6s; }
.c-art-dob .dl-4, .c-art-dob .dh-4{ animation-delay:.9s; }
.c-art-dob .dl-5, .c-art-dob .dh-5{ animation-delay:1.2s; }
.c-art-dob .dl-6, .c-art-dob .dh-6{ animation-delay:1.5s; }
.c-art-dob .dl-7, .c-art-dob .dh-7{ animation-delay:1.8s; }
.c-art-dob .dl-8, .c-art-dob .dh-8{ animation-delay:2.1s; }
@keyframes dob-breathe{
  0%, 100% { opacity:.55; }
  50%      { opacity:1; filter: drop-shadow(0 0 4px rgba(255,227,168,.7)); }
}

/* =============================================================
   DC-DC catalog — input voltage fluctuates, output stays rock-solid
   ============================================================= */
.c-art-dcdc .dcdc-in-fill{
  animation: dcdc-input-vary 3.2s ease-in-out infinite;
}
@keyframes dcdc-input-vary{
  /* simulate varying battery voltage 10V → 30V → 18V cycle */
  0%, 100% { y:46; height:15; }
  25%      { y:30; height:31; }
  50%      { y:38; height:23; }
  75%      { y:33; height:28; }
}
.c-art-dcdc .dcdc-coil{
  animation: dcdc-coil-pulse 1.6s ease-in-out infinite;
}
@keyframes dcdc-coil-pulse{
  0%,100% { stroke-opacity:.7; }
  50%     { stroke-opacity:1; filter:drop-shadow(0 0 3px rgba(255,210,122,.7)); }
}

/* =============================================================
   OUTDOOR & STREET catalog — lamp glow + raindrops falling, IP67 badge
   ============================================================= */
.c-art-outdoor .outdoor-glow{
  animation: outdoor-lamp-pulse 3s ease-in-out infinite;
}
@keyframes outdoor-lamp-pulse{
  0%,100% { fill-opacity:.45; }
  50%     { fill-opacity:.75; }
}

.c-art-outdoor .rain{
  animation: outdoor-rain-fall 1.4s linear infinite;
}
.c-art-outdoor .rain-1{ animation-delay:0s; }
.c-art-outdoor .rain-2{ animation-delay:.28s; }
.c-art-outdoor .rain-3{ animation-delay:.56s; }
.c-art-outdoor .rain-4{ animation-delay:.84s; }
.c-art-outdoor .rain-5{ animation-delay:1.12s; }
@keyframes outdoor-rain-fall{
  0%   { transform:translateY(-12px); opacity:0; }
  20%  { opacity:.85; }
  90%  { opacity:.85; }
  100% { transform:translateY(20px); opacity:0; }
}

/* IP67 badge breathes (always-on) */
.c-art-outdoor .outdoor-ip rect{
  animation: outdoor-badge 3s ease-in-out infinite;
}
@keyframes outdoor-badge{
  0%,100% { stroke-opacity:.65; }
  50%     { stroke-opacity:1;   filter:drop-shadow(0 0 4px rgba(110,180,255,.55)); }
}

/* =============================================================
   ISO LPF & NON-ISO LPF catalog — rough waveform animates fill-in
   ============================================================= */
.c-art-iso-lpf .lpf-wave,
.c-art-niso-lpf .lpf-wave-2{
  stroke-dasharray:200;
  stroke-dashoffset:0;
  animation: lpf-wave-roll 4s linear infinite;
}
@keyframes lpf-wave-roll{
  to { stroke-dashoffset:-200; }
}

/* =============================================================
   DUSK-TO-DAWN catalog — sun fades / moon brightens / lamp glows at night
   8s cycle: 0-4s = day (sun bright, lamp dim), 4-8s = night (moon bright, lamp glows)
   ============================================================= */
.c-art-d2d .d2d-sun{
  animation: d2d-day 8s ease-in-out infinite;
  transform-origin:center; transform-box:fill-box;
}
.c-art-d2d .d2d-moon{
  animation: d2d-night 8s ease-in-out infinite;
}
.c-art-d2d .d2d-glow{
  animation: d2d-lamp 8s ease-in-out infinite;
}
@keyframes d2d-day{
  0%, 30% { opacity:1; }
  50%, 80% { opacity:.15; }
  100% { opacity:1; }
}
@keyframes d2d-night{
  0%, 30% { opacity:.15; }
  50%, 80% { opacity:.9; }
  100% { opacity:.15; }
}
@keyframes d2d-lamp{
  0%, 30% { fill-opacity:.15; }
  50%, 80% { fill-opacity:.85; }
  100% { fill-opacity:.15; }
}

/* =============================================================
   FLICKER-FREE catalog — typical wave subtly oscillates in opacity,
   flicker-free flat line periodically pulses to draw the eye
   ============================================================= */
.c-art-ff .ff-typical{
  animation: ff-typical-flutter 1.4s ease-in-out infinite;
}
@keyframes ff-typical-flutter{
  0%,100% { stroke-opacity:.35; }
  50%     { stroke-opacity:.6; }
}
.c-art-ff .ff-flat{
  animation: ff-flat-pulse 3s ease-in-out infinite;
}
@keyframes ff-flat-pulse{
  0%,100% { stroke-opacity:.85; }
  50%     { stroke-opacity:1; filter: drop-shadow(0 0 5px rgba(52,211,153,.6)); }
}

/* Reduced-motion fallback for the new SVGs */
@media (prefers-reduced-motion: reduce){
  .c-art-d2d .d2d-sun,
  .c-art-d2d .d2d-moon,
  .c-art-d2d .d2d-glow,
  .c-art-ff .ff-typical,
  .c-art-ff .ff-flat{
    animation: none !important;
  }
}

/* Reduced-motion blanket (extends previous one) */
@media (prefers-reduced-motion: reduce){
  .b-art-strip .led,
  .b-art-strip .strip-v-12,
  .b-art-noniso .ni-flow,
  .b-art-noniso .ni-ac-in,
  .b-art-surge .surge-bolt,
  .b-art-surge .surge-spike,
  .b-art-surge .surge-ghost,
  .b-art-surge .surge-vc,
  .c-art-cct .cct-k,
  .c-art-dob .dob-led,
  .c-art-dob .dob-halo,
  .c-art-dcdc .dcdc-in-fill,
  .c-art-dcdc .dcdc-coil,
  .c-art-outdoor .outdoor-glow,
  .c-art-outdoor .rain,
  .c-art-outdoor .outdoor-ip rect,
  .c-art-iso-lpf .lpf-wave,
  .c-art-niso-lpf .lpf-wave-2{
    animation: none !important;
  }
}


/* =============================================================
   Featured bento tiles (landing page — special products only)
   ============================================================= */
.bento-feature{
  min-height: 380px;
  padding: 40px;
  background: linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 100%);
}
.bento-feature .b-eyebrow{
  font-size: 11.5px; letter-spacing: .16em;
}
.bento-feature h3{
  font-size: clamp(28px, 2.6vw, 38px);
  margin-top: 14px; line-height: 1.08; letter-spacing: -.025em;
}
.bento-feature p{
  font-size: 15px; margin-top: 14px; max-width: 92%;
}
.bento-feature .b-content{ max-width: 70%; }
.bento-feature .b-art{
  /* slightly bigger art for the larger tiles */
  width: clamp(180px, 56%, 360px);
  max-height: 78%;
}

/* Subtle dramatic glow on the radar feature tile (replaces hero-card) */
.bento-feature.accent-red::after{
  content:""; position:absolute; top:-30%; right:-20%;
  width:480px; height:480px;
  background:radial-gradient(circle, rgba(220,30,42,.22) 0%, transparent 60%);
  filter:blur(60px); pointer-events:none; z-index:0;
}
.bento-feature.accent-amber::after{
  content:""; position:absolute; top:-30%; right:-20%;
  width:420px; height:420px;
  background:radial-gradient(circle, rgba(255,159,67,.22) 0%, transparent 60%);
  filter:blur(60px); pointer-events:none; z-index:0;
}
.bento-feature.accent-violet::after{
  content:""; position:absolute; top:-30%; right:-20%;
  width:420px; height:420px;
  background:radial-gradient(circle, rgba(168,85,247,.20) 0%, transparent 60%);
  filter:blur(60px); pointer-events:none; z-index:0;
}

@media(max-width:900px){
  .bento-feature{ min-height: 300px; padding: 28px; }
  .bento-feature .b-content{ max-width: 100%; }
  .bento-feature h3{ font-size: clamp(24px, 5vw, 32px); }
}

/* === Themed product images: show light variant in light theme, dark variant in dark theme === */
.prod-img-themed{ background:transparent; }
.prod-img-themed img.theme-light{ display:none; }
.prod-img-themed img.theme-dark{ display:block; }
:root[data-theme="light"] .prod-img-themed img.theme-light{ display:block; }
:root[data-theme="light"] .prod-img-themed img.theme-dark{ display:none; }

/* =============================================================
   HERO BG VIDEO — layered above static picture
   ============================================================= */
.hero-bg-static{ position:absolute; inset:0; z-index:0; display:block; }
.hero-bg-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:65% 55%;
  /* match the static image's dark-theme filter so they blend at fade-in */
  filter:saturate(1.05) contrast(1.05) brightness(.62);
  opacity:0; transition:opacity 1200ms ease;
  z-index:1; pointer-events:none;
}
.hero-bg-video.is-playing{ opacity:1; }
/* In light theme, the static image uses mix-blend:multiply against a cream bg.
   Mirror that for the video so the overlay text stays readable. */
:root[data-theme="light"] .hero-bg-video{
  filter:saturate(1.15) contrast(1.0) brightness(1.05);
  mix-blend-mode:multiply;
}
:root[data-theme="light"] .hero-bg-video.is-playing{ opacity:.55; }
/* Hide the video on mobile (use the lighter mobile poster image only) */
@media (max-width: 768px){
  .hero-bg-video{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .hero-bg-video{ display:none; }
}

/* =============================================================
   MANIFESTO BILLBOARD — terminal-grade founding principles
   ============================================================= */
.manifesto-billboard{
  position:relative;
  padding-top:clamp(80px, 12vw, 160px);
  padding-bottom:clamp(72px, 10vw, 128px);
  border-top:1px solid var(--line-0);
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(255,159,67,.05) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 80% 100%, rgba(220,30,42,.04) 0%, transparent 60%);
  overflow:hidden;
}
.manifesto-billboard::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--line-1) 20%, var(--line-1) 80%, transparent);
  pointer-events:none;
}
.manifesto-head{ max-width:1180px; margin-bottom:clamp(60px, 8vw, 120px); }
.manifesto-eyebrow{
  display:flex; align-items:center; gap:18px;
  font-family:'Geist Mono',monospace; font-size:11px; font-weight:500;
  color:var(--ink-3); letter-spacing:.18em; text-transform:uppercase;
  margin-bottom:36px;
}
.manifesto-eyebrow .manifesto-rule{
  flex:1; max-width:340px;
  height:1px;
  background:linear-gradient(90deg, var(--line-1), transparent);
}
.manifesto-h{
  font-size:clamp(40px, 7.2vw, 124px);
  font-weight:800; letter-spacing:-.045em; line-height:.92;
  color:var(--ink-0); margin-bottom:32px;
}
.manifesto-h br{ display:block; }
.manifesto-h .serif-it{
  font-family:'Fraunces',Georgia,serif; font-style:italic; font-weight:500;
  background:linear-gradient(90deg,#FF3B44 0%,#FF9F43 50%,#8B5CF6 100%);
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  letter-spacing:-.03em;
  animation: shift-grad 14s linear infinite;
}
.manifesto-lead{
  font-size:clamp(17px, 1.4vw, 22px); font-weight:400;
  color:var(--ink-2); max-width:680px; line-height:1.55;
  letter-spacing:-.005em;
}

.manifesto-grid{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:clamp(24px, 3vw, 48px) clamp(24px, 2.4vw, 40px);
  padding-top:clamp(40px, 5vw, 72px);
  border-top:1px solid var(--line-0);
}
.manifesto-item{
  display:flex; flex-direction:column; gap:14px;
  position:relative;
  padding-top:8px;
}
.manifesto-num{
  font-family:'Geist Mono',monospace; font-size:13px; font-weight:500;
  color:var(--ink-3); letter-spacing:.16em;
  padding-bottom:14px;
  position:relative; width:fit-content;
  margin-bottom:6px;
}
.manifesto-num::before{
  content:""; position:absolute; left:0; right:-12px; bottom:0; height:1px;
  background:var(--line-1);
}
.manifesto-num::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:linear-gradient(90deg, var(--red), var(--amber));
  transition:width 600ms cubic-bezier(.25,.46,.45,.94);
}
.manifesto-item:hover .manifesto-num::after,
.manifesto-item.in-view .manifesto-num::after{ width:38px; }
.manifesto-item h3{
  font-size:clamp(18px, 1.6vw, 22px); font-weight:600; letter-spacing:-.02em;
  color:var(--ink-0); line-height:1.25;
}
.manifesto-item p{
  font-size:15px; color:var(--ink-2); line-height:1.6;
  letter-spacing:-.005em;
}

@media (max-width:1100px){
  .manifesto-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .manifesto-grid{ grid-template-columns:1fr; gap:36px; }
  .manifesto-eyebrow .manifesto-rule{ max-width:140px; }
}

/* light-theme overrides */
:root[data-theme="light"] .manifesto-billboard{
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(255,159,67,.06) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 80% 100%, rgba(220,30,42,.04) 0%, transparent 60%);
  border-top-color:var(--line-light-0);
}
:root[data-theme="light"] .manifesto-billboard::before{ background:linear-gradient(90deg, transparent, var(--line-light-1) 20%, var(--line-light-1) 80%, transparent); }
:root[data-theme="light"] .manifesto-h{ color:var(--ink-light-0); }
:root[data-theme="light"] .manifesto-eyebrow{ color:var(--ink-light-2); }
:root[data-theme="light"] .manifesto-eyebrow .manifesto-rule{ background:linear-gradient(90deg, var(--line-light-1), transparent); }
:root[data-theme="light"] .manifesto-lead{ color:var(--ink-light-2); }
:root[data-theme="light"] .manifesto-grid{ border-top-color:var(--line-light-0); }
:root[data-theme="light"] .manifesto-num{ color:var(--ink-light-2); }
:root[data-theme="light"] .manifesto-num::before{ background:var(--line-light-1); }
:root[data-theme="light"] .manifesto-item h3{ color:var(--ink-light-0); }
:root[data-theme="light"] .manifesto-item p{ color:var(--ink-light-2); }