/* ==========================================================================
   ANAM INDUSTRIES — CORE STYLESHEET
   Design language: "Rating Plate & Busbar" — panels read like enclosure
   doors, dividers read like single-line circuit traces with junction nodes.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --ink:#0B1E33;
  --ink-70: rgba(11,30,51,.72);
  --ink-50: rgba(11,30,51,.5);
  --blue:#0057D9;
  --blue-deep:#003C99;
  --amber:#FF7A1A;
  --amber-deep:#E35F00;
  --steel:#EDF1F6;
  --steel-2:#DCE3EC;
  --white:#FFFFFF;
  --green:#21C167;
  --line: rgba(11,30,51,.14);
  --radius: 14px;
  --shadow-card: 0 2px 6px rgba(11,30,51,.06), 0 14px 34px rgba(11,30,51,.08);
  --shadow-lift: 0 20px 50px rgba(11,30,51,.16);
  --maxw: 1240px;
  --ff-display: 'Space Grotesk', sans-serif;
  --ff-body: 'Inter', sans-serif;
  --ff-mono: 'IBM Plex Mono', monospace;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}
body{
  margin:0; font-family:var(--ff-body); color:var(--ink); background:var(--white);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,video{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
ul{margin:0; padding:0; list-style:none;}
h1,h2,h3,h4{font-family:var(--ff-display); margin:0; line-height:1.08; letter-spacing:-0.01em;}
p{margin:0;}
:focus-visible{outline:3px solid var(--amber); outline-offset:2px;}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
.eyebrow{
  font-family:var(--ff-mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue); display:flex; align-items:center; gap:10px; font-weight:600;
}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--amber); display:inline-block;}

section{position:relative;}
.section-pad{padding:96px 0;}
@media (max-width:780px){.section-pad{padding:64px 0;}}

/* ---- trace divider (PCB-trace section separator) ---- */
.trace-divider{ position:relative; height:34px; overflow:hidden; }
.trace-divider svg{ width:100%; height:100%; display:block; }

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:10px; padding:14px 26px; border-radius:999px;
  font-weight:600; font-size:15px; border:2px solid transparent; transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--amber); color:var(--white); box-shadow:0 10px 24px rgba(255,122,26,.35);}
.btn-primary:hover{background:var(--amber-deep); box-shadow:0 14px 30px rgba(255,122,26,.45); transform:translateY(-2px);}
.btn-ghost{background:var(--white); color:var(--ink); border-color:var(--line);}
.btn-ghost:hover{border-color:var(--blue); color:var(--blue); transform:translateY(-2px);}
.btn-line{background:transparent; color:var(--blue); border-color:var(--blue);}
.btn-line:hover{background:var(--blue); color:var(--white);}
.btn-sm{padding:10px 18px; font-size:13.5px;}
.btn svg{width:18px; height:18px;}

/* ==========================================================================
   NAV — "Breaker Strip"
   ========================================================================== */
.breaker-nav{
  position:sticky; top:0; z-index:500; background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.breaker-nav .wrap{display:flex; align-items:center; justify-content:space-between; height:76px; gap:24px;}
.brand{display:flex; align-items:center; gap:12px; font-family:var(--ff-display); font-weight:700; font-size:20px;}
.brand .mark{
  width:38px; height:38px; border-radius:8px; background:var(--ink); position:relative; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
}
.brand .mark::before{
  content:"⚡"; font-size:18px; color:var(--amber);
}
.brand small{display:block; font-family:var(--ff-mono); font-weight:500; font-size:10.5px; letter-spacing:.12em; color:var(--ink-50); text-transform:uppercase;}

.nav-links{display:flex; align-items:center; gap:4px;}
.nav-links a{
  font-weight:600; font-size:14.5px; padding:10px 16px; border-radius:8px; color:var(--ink-70);
  position:relative; transition:color .15s ease;
}
.nav-links a .dot{width:7px; height:7px; border-radius:50%; background:var(--steel-2); display:inline-block; margin-right:8px; vertical-align:middle; transition:background .2s ease, box-shadow .2s ease;}
.nav-links a:hover{color:var(--blue);}
.nav-links a:hover .dot{background:var(--green); box-shadow:0 0 0 4px rgba(33,193,103,.18);}
.nav-links a.active{color:var(--blue);}
.nav-links a.active .dot{background:var(--green); box-shadow:0 0 0 4px rgba(33,193,103,.18);}
.nav-cta{display:flex; align-items:center; gap:10px;}
.nav-burger{display:none; width:44px; height:44px; border-radius:8px; border:1px solid var(--line); background:var(--white); align-items:center; justify-content:center;}
.nav-burger span, .nav-burger span::before, .nav-burger span::after{content:""; display:block; width:18px; height:2px; background:var(--ink); position:relative; transition:.2s;}
.nav-burger span::before{position:absolute; top:-6px;}
.nav-burger span::after{position:absolute; top:6px;}

@media (max-width:960px){
  .nav-links{display:none; position:absolute; top:76px; left:0; right:0; background:var(--white); flex-direction:column; align-items:stretch; padding:10px 20px 20px; border-bottom:1px solid var(--line); box-shadow:var(--shadow-card);}
  .nav-links.open{display:flex;}
  .nav-links a{padding:14px 10px; border-bottom:1px solid var(--steel);}
  .nav-burger{display:flex;}
  .nav-cta .btn span.long{display:none;}
}

/* ==========================================================================
   WELCOME ANIMATION (intro overlay)
   ========================================================================== */
#welcome-overlay{
  position:fixed; inset:0; z-index:3000; background:var(--ink);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:18px;
  transition:opacity .6s ease, visibility .6s ease;
}
#welcome-overlay.hide{opacity:0; visibility:hidden; pointer-events:none;}
.welcome-mark{ font-family:var(--ff-display); font-weight:700; color:var(--white); font-size:clamp(28px,6vw,54px); letter-spacing:.02em; display:flex; align-items:center; gap:14px;}
.welcome-mark .bolt{color:var(--amber); animation:boltPulse 1.1s ease-in-out infinite;}
@keyframes boltPulse{0%,100%{opacity:1; filter:drop-shadow(0 0 0px var(--amber));} 50%{opacity:.55; filter:drop-shadow(0 0 14px var(--amber));}}
.welcome-line{font-family:var(--ff-mono); color:rgba(255,255,255,.65); font-size:13px; letter-spacing:.14em; text-transform:uppercase;}
.welcome-bar{width:220px; height:3px; background:rgba(255,255,255,.15); border-radius:3px; overflow:hidden;}
.welcome-bar i{display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--blue),var(--amber)); animation:loadbar 1.7s ease forwards;}
@keyframes loadbar{to{width:100%;}}

/* ==========================================================================
   TRUST MARQUEE
   ========================================================================== */
.marquee{ background:var(--ink); color:var(--white); overflow:hidden; padding:14px 0; }
.marquee-track{display:flex; width:max-content; animation:scrollMarquee 32s linear infinite; gap:56px;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes scrollMarquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}
.marquee-item{display:flex; align-items:center; gap:10px; font-family:var(--ff-mono); font-size:13px; letter-spacing:.06em; white-space:nowrap; color:rgba(255,255,255,.85);}
.marquee-item .dot{width:6px;height:6px;border-radius:50%;background:var(--green);}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{ padding:64px 0 40px; background:
   radial-gradient(circle at 85% 8%, rgba(0,87,217,.08), transparent 45%),
   radial-gradient(circle at 10% 90%, rgba(255,122,26,.08), transparent 40%), var(--white);
}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;}
.hero h1{font-size:clamp(34px,4.6vw,58px); margin:18px 0 20px;}
.hero h1 em{font-style:normal; color:var(--blue);}
.hero p.lead{font-size:18px; color:var(--ink-70); max-width:520px; line-height:1.6; margin-bottom:30px;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:36px;}
.hero-stats{display:flex; gap:0; border-top:1px solid var(--line);}
.hero-stats div{flex:1; padding:16px 18px 0; border-right:1px solid var(--line);}
.hero-stats div:last-child{border-right:none;}
.hero-stats b{font-family:var(--ff-display); font-size:26px; display:block;}
.hero-stats span{font-family:var(--ff-mono); font-size:11.5px; color:var(--ink-50); text-transform:uppercase; letter-spacing:.08em;}
.hero-media{ position:relative; border-radius:20px; overflow:hidden; box-shadow:var(--shadow-lift); border:1px solid var(--line); background:var(--ink); aspect-ratio:4/3.1;}
.hero-media video{width:100%; height:100%; object-fit:cover;}
.hero-media .badge{
  position:absolute; top:18px; left:18px; background:rgba(11,30,51,.75); backdrop-filter:blur(6px);
  color:var(--white); font-family:var(--ff-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  padding:8px 14px; border-radius:999px; display:flex; align-items:center; gap:8px;
}
.hero-media .badge .dot{width:6px;height:6px;border-radius:50%;background:var(--green); animation:blinkDot 1.4s infinite;}
@keyframes blinkDot{0%,100%{opacity:1;} 50%{opacity:.25;}}
@media (max-width:960px){ .hero-grid{grid-template-columns:1fr;} .hero-stats{flex-wrap:wrap;} .hero-stats div{flex:1 1 45%; margin-bottom:14px;} }

/* ==========================================================================
   CARDS — "Enclosure Panel" (bolt-corner card)
   ========================================================================== */
.panel-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px; position:relative; box-shadow:var(--shadow-card); transition:transform .2s ease, box-shadow .2s ease;
}
.panel-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lift);}
.panel-card::before, .panel-card::after{
  content:""; position:absolute; width:6px; height:6px; border-radius:50%; background:var(--steel-2); top:10px;
}
.panel-card::before{left:10px;} .panel-card::after{right:10px;}
.panel-card .bolt-b1,.panel-card .bolt-b2{position:absolute; width:6px; height:6px; border-radius:50%; background:var(--steel-2); bottom:10px;}
.panel-card .bolt-b1{left:10px;} .panel-card .bolt-b2{right:10px;}

/* ==========================================================================
   PRODUCT GRID
   ========================================================================== */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
@media (max-width:960px){.grid-3{grid-template-columns:repeat(2,1fr);} .grid-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.grid-3{grid-template-columns:1fr;} .grid-4{grid-template-columns:1fr;}}

.product-card{ display:flex; flex-direction:column; overflow:hidden; padding:0; }
.product-card .thumb{ aspect-ratio:4/3; overflow:hidden; background:var(--steel);}
.product-card .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.product-card:hover .thumb img{transform:scale(1.06);}
.product-card .body{padding:20px 20px 22px;}
.product-card .cat{font-family:var(--ff-mono); font-size:11px; color:var(--blue); letter-spacing:.08em; text-transform:uppercase;}
.product-card h3{font-size:19px; margin:8px 0 8px;}
.product-card p{color:var(--ink-70); font-size:14px; line-height:1.55; margin-bottom:16px;}
.product-card .row{display:flex; align-items:center; justify-content:space-between;}
.product-card .view{font-weight:600; font-size:14px; color:var(--blue); display:flex; align-items:center; gap:6px;}

.filter-bar{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:36px;}
.filter-chip{
  padding:9px 18px; border-radius:999px; border:1.5px solid var(--line); font-weight:600; font-size:13.5px;
  background:var(--white); color:var(--ink-70); transition:.15s ease;
}
.filter-chip.active, .filter-chip:hover{border-color:var(--blue); color:var(--blue); background:rgba(0,87,217,.06);}

/* ==========================================================================
   HOTSPOT DIAGRAM — "Inside the Panel"
   ========================================================================== */
.hotspot-section{ background:var(--ink); color:var(--white); border-radius:24px; overflow:hidden; position:relative;}
.hotspot-section .head{padding:52px 40px 0;}
.hotspot-section .head .eyebrow{color:var(--amber);}
.hotspot-section .head .eyebrow::before{background:var(--blue);}
.hotspot-section h2{color:var(--white); font-size:clamp(26px,3.4vw,40px); margin:16px 0 10px;}
.hotspot-section .head p{color:rgba(255,255,255,.65); max-width:560px; margin-bottom:10px; line-height:1.6;}
.hotspot-stage{ position:relative; padding:30px 40px 50px; }
.hotspot-svg-wrap{position:relative; width:100%; max-width:900px; margin:0 auto;}
.hotspot-svg-wrap svg{width:100%; height:auto; display:block;}
.hotspot-dot{
  position:absolute; width:22px; height:22px; border-radius:50%; background:rgba(255,122,26,.18);
  border:2px solid var(--amber); display:flex; align-items:center; justify-content:center; cursor:pointer;
  transform:translate(-50%,-50%);
}
.hotspot-dot::after{content:""; width:7px; height:7px; border-radius:50%; background:var(--amber); animation:pulseDot 1.8s infinite;}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(255,122,26,.55);} 70%{box-shadow:0 0 0 12px rgba(255,122,26,0);} 100%{box-shadow:0 0 0 0 rgba(255,122,26,0);}}
.hotspot-tip{
  position:absolute; z-index:20; width:230px; background:var(--white); color:var(--ink); border-radius:12px;
  padding:16px 18px; box-shadow:var(--shadow-lift); opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease; pointer-events:none;
}
.hotspot-tip.show{opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;}
.hotspot-tip b{display:block; font-family:var(--ff-display); font-size:14.5px; margin-bottom:6px; color:var(--blue-deep);}
.hotspot-tip p{font-size:12.8px; line-height:1.5; color:var(--ink-70);}
.hotspot-legend{display:flex; gap:16px; flex-wrap:wrap; padding:0 40px 40px; font-family:var(--ff-mono); font-size:11.5px; color:rgba(255,255,255,.5); letter-spacing:.04em;}
.hotspot-legend span{display:flex; align-items:center; gap:6px;}
.hotspot-legend i{width:8px;height:8px;border-radius:50%;background:var(--amber); display:inline-block;}

/* ==========================================================================
   CONFIGURATOR — "Live Panel Configurator"
   ========================================================================== */
.configurator{
  border-radius:24px; background:linear-gradient(180deg,#0B1E33,#0d2540); color:var(--white); padding:0; overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
}
.cfg-head{padding:44px 44px 0;}
.cfg-head h2{color:var(--white); font-size:clamp(26px,3.2vw,38px); margin:14px 0 12px;}
.cfg-head p{color:rgba(255,255,255,.62); max-width:560px; line-height:1.6;}
.cfg-steps{display:flex; gap:8px; padding:28px 44px 0; flex-wrap:wrap;}
.cfg-step-pill{
  font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; padding:8px 14px;
  border-radius:999px; border:1px solid rgba(255,255,255,.16); color:rgba(255,255,255,.45); display:flex; align-items:center; gap:8px;
}
.cfg-step-pill.active{border-color:var(--amber); color:var(--white); background:rgba(255,122,26,.12);}
.cfg-step-pill b{width:6px; height:6px; border-radius:50%; background:currentColor; display:inline-block;}
.cfg-body{padding:30px 44px 44px; display:grid; grid-template-columns:1.2fr .8fr; gap:36px;}
.cfg-panel{min-height:230px;}
.cfg-panel h4{color:rgba(255,255,255,.5); font-family:var(--ff-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:16px;}
.cfg-options{display:grid; grid-template-columns:repeat(2,1fr); gap:12px;}
.cfg-opt{
  border:1.5px solid rgba(255,255,255,.14); border-radius:12px; padding:14px 16px; text-align:left; background:rgba(255,255,255,.03);
  color:var(--white); font-weight:600; font-size:14px; transition:.15s ease;
}
.cfg-opt:hover{border-color:var(--blue);}
.cfg-opt.sel{border-color:var(--amber); background:rgba(255,122,26,.14);}
.cfg-nav{display:flex; gap:12px; margin-top:24px;}
.cfg-readout{
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:22px;
  font-family:var(--ff-mono); font-size:13px; line-height:2; color:rgba(255,255,255,.85);
}
.cfg-readout .rline{display:flex; justify-content:space-between; border-bottom:1px dashed rgba(255,255,255,.12); padding:4px 0;}
.cfg-readout .rline b{color:var(--white); font-weight:600;}
.cfg-readout .rline span:first-child{color:rgba(255,255,255,.45);}
.cfg-readout .rblank{color:rgba(255,255,255,.25);}
.cfg-trace{ height:2px; background:linear-gradient(90deg,transparent,var(--blue),var(--amber),transparent); margin:22px 0; position:relative; overflow:hidden;}
.cfg-trace i{position:absolute; top:0; left:-40%; width:40%; height:100%; background:rgba(255,255,255,.9); filter:blur(2px); animation:tracePulse 2.6s linear infinite;}
@keyframes tracePulse{to{left:100%;}}
@media (max-width:860px){.cfg-body{grid-template-columns:1fr;} .cfg-options{grid-template-columns:1fr 1fr;}}

/* ==========================================================================
   SCROLL STORY — "25 Years, One Factory Floor"
   ========================================================================== */
.scroll-story{background:var(--steel); border-radius:24px; overflow:hidden;}
.story-head{padding:52px 44px 10px;}
.story-head h2{font-size:clamp(26px,3.4vw,40px); margin:14px 0 10px;}
.story-head p{color:var(--ink-70); max-width:600px; line-height:1.6;}
.story-track{display:flex; overflow-x:auto; gap:0; padding:20px 0 44px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;}
.story-track::-webkit-scrollbar{height:6px;}
.story-track::-webkit-scrollbar-thumb{background:var(--steel-2); border-radius:6px;}
.story-slide{ scroll-snap-align:start; flex:0 0 300px; padding:0 16px; position:relative;}
.story-slide::before{content:""; position:absolute; top:34px; left:0; right:0; height:2px; background:var(--steel-2);}
.story-slide:first-child::before{left:16px;}
.story-num{
  width:38px; height:38px; border-radius:50%; background:var(--white); border:2px solid var(--blue); color:var(--blue);
  display:flex; align-items:center; justify-content:center; font-family:var(--ff-mono); font-size:12px; font-weight:600;
  position:relative; z-index:2; margin-bottom:18px;
}
.story-slide.milestone .story-num{background:var(--blue); color:var(--white);}
.story-year{font-family:var(--ff-mono); font-size:12px; color:var(--blue); letter-spacing:.08em; margin-bottom:6px; display:block;}
.story-slide h4{font-size:17px; margin-bottom:8px;}
.story-slide p{font-size:13.6px; color:var(--ink-70); line-height:1.55;}
.story-video-close{padding:0 44px 52px;}
.story-video-close .frame{border-radius:16px; overflow:hidden; box-shadow:var(--shadow-card); position:relative; background:var(--ink);}
.story-video-close video{width:100%; display:block;}
.play-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(11,30,51,.35);
  transition:opacity .2s ease;
}
.play-overlay button{
  width:70px; height:70px; border-radius:50%; background:var(--white); border:none; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,.3);
}
.play-overlay button svg{width:26px; height:26px; margin-left:3px; color:var(--amber);}
.play-overlay.hidden{opacity:0; pointer-events:none;}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testi-scroller{display:flex; gap:22px; overflow-x:auto; padding:8px 4px 20px; scroll-snap-type:x proximity;}
.testi-scroller::-webkit-scrollbar{height:6px;}
.testi-scroller::-webkit-scrollbar-thumb{background:var(--steel-2); border-radius:6px;}
.testi-card{flex:0 0 340px; scroll-snap-align:start; display:flex; flex-direction:column; gap:16px;}
.testi-top{display:flex; gap:14px; align-items:center;}
.testi-top img{width:54px; height:54px; border-radius:50%; object-fit:cover; border:2px solid var(--steel-2);}
.testi-top b{display:block; font-size:15px;}
.testi-top span{font-family:var(--ff-mono); font-size:11.5px; color:var(--ink-50);}
.testi-card p{font-size:14.5px; line-height:1.65; color:var(--ink-70);}
.stars{color:var(--amber); font-size:13px; letter-spacing:2px;}

/* ==========================================================================
   FAQ TABS
   ========================================================================== */
.faq-tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:30px; border-bottom:1px solid var(--line); padding-bottom:14px;}
.faq-tab{padding:10px 18px; border-radius:999px; font-weight:600; font-size:14px; color:var(--ink-70); border:1px solid transparent;}
.faq-tab.active{color:var(--blue); background:rgba(0,87,217,.07); border-color:rgba(0,87,217,.2);}
.faq-panel{display:none;}
.faq-panel.active{display:block;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{width:100%; text-align:left; background:none; border:none; padding:18px 0; display:flex; justify-content:space-between; align-items:center; font-weight:600; font-size:15.5px; color:var(--ink);}
.faq-q .plus{width:22px; height:22px; border-radius:50%; border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; flex:0 0 auto; position:relative;}
.faq-q .plus::before, .faq-q .plus::after{content:""; position:absolute; background:var(--blue);}
.faq-q .plus::before{width:9px; height:1.6px;}
.faq-q .plus::after{width:1.6px; height:9px; transition:transform .2s ease;}
.faq-item.open .faq-q .plus::after{transform:scaleY(0);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.faq-a p{padding:0 0 18px; color:var(--ink-70); font-size:14.5px; line-height:1.65; max-width:760px;}

/* ==========================================================================
   FLOATING CATEGORY STRIP (breaker toggles)
   ========================================================================== */
.side-strip{
  position:fixed; right:18px; top:50%; transform:translateY(-50%); z-index:400; display:flex; flex-direction:column; gap:8px;
  background:var(--white); border:1px solid var(--line); border-radius:14px; padding:10px; box-shadow:var(--shadow-card);
}
.side-strip a{
  width:46px; height:46px; border-radius:9px; background:var(--steel); display:flex; align-items:center; justify-content:center;
  position:relative; font-size:18px; transition:.15s ease;
}
.side-strip a:hover{background:var(--blue); color:var(--white);}
.side-strip a .tag{
  position:absolute; right:56px; top:50%; transform:translateY(-50%); background:var(--ink); color:var(--white); font-size:12px;
  padding:6px 12px; border-radius:6px; white-space:nowrap; opacity:0; pointer-events:none; transition:.15s ease; font-weight:600;
}
.side-strip a:hover .tag{opacity:1;}
@media (max-width:960px){.side-strip{display:none;}}

/* ==========================================================================
   FLOATERS (WhatsApp / Email) + Sticky mobile CTA
   ========================================================================== */
.floaters{position:fixed; left:22px; bottom:22px; z-index:450; display:flex; flex-direction:column; gap:12px;}
.floaters a{
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-lift);
  color:var(--white); font-size:24px;
}
.floaters .wa{background:#25D366;}
.floaters .em{background:var(--blue);}
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:440; background:var(--ink); color:var(--white); display:none;
  align-items:center; justify-content:space-between; padding:12px 18px; gap:12px;
}
.sticky-cta b{font-size:13.5px;}
.sticky-cta span{display:block; font-family:var(--ff-mono); font-size:10.5px; color:rgba(255,255,255,.55);}
@media (max-width:780px){ .sticky-cta{display:flex;} .floaters{bottom:84px;} }

/* ==========================================================================
   POPUP (persona lead capture)
   ========================================================================== */
.popup-overlay{
  position:fixed; inset:0; background:rgba(11,30,51,.55); z-index:2000; display:none; align-items:center; justify-content:center; padding:20px;
}
.popup-overlay.show{display:flex;}
.popup-card{
  background:var(--white); border-radius:20px; max-width:460px; width:100%; padding:30px; position:relative; box-shadow:var(--shadow-lift);
}
.popup-close{position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%; background:var(--steel); border:none; font-size:16px;}
.popup-persona{display:flex; gap:14px; align-items:center; margin-bottom:18px;}
.popup-persona img{width:54px; height:54px; border-radius:50%; object-fit:cover;}
.popup-persona b{display:block; font-size:15.5px;}
.popup-persona span{font-family:var(--ff-mono); font-size:11.5px; color:var(--green);}
.popup-card h3{font-size:20px; margin-bottom:8px;}
.popup-card p.sub{color:var(--ink-70); font-size:14px; margin-bottom:20px;}
.form-row{margin-bottom:14px;}
.form-row label{display:block; font-size:12.5px; font-weight:600; color:var(--ink-70); margin-bottom:6px;}
.form-row input, .form-row select, .form-row textarea{
  width:100%; padding:12px 14px; border-radius:10px; border:1.5px solid var(--line); font-family:inherit; font-size:14.5px; background:var(--white);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{border-color:var(--blue);}
.form-grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer{background:var(--ink); color:rgba(255,255,255,.85); padding:64px 0 0; margin-top:100px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.1);}
.footer-grid h4{color:var(--white); font-size:14px; margin-bottom:16px; font-family:var(--ff-mono); letter-spacing:.06em; text-transform:uppercase;}
.footer-grid p, .footer-grid li{font-size:14px; color:rgba(255,255,255,.55); line-height:1.9;}
.footer-grid a:hover{color:var(--white);}
.footer-brand{display:flex; align-items:center; gap:10px; font-family:var(--ff-display); font-weight:700; font-size:20px; color:var(--white); margin-bottom:14px;}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding:24px 0; flex-wrap:wrap; gap:10px; font-size:12.5px; color:rgba(255,255,255,.45);}
.footer-bottom a{color:rgba(255,255,255,.7); font-weight:600;}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr;}}

/* legal modal */
.legal-overlay{position:fixed; inset:0; background:rgba(11,30,51,.6); z-index:2200; display:none; align-items:center; justify-content:center; padding:24px;}
.legal-overlay.show{display:flex;}
.legal-card{background:var(--white); border-radius:18px; max-width:640px; width:100%; max-height:80vh; overflow-y:auto; padding:36px; position:relative;}
.legal-card h3{margin-bottom:16px; font-size:22px;}
.legal-card p{color:var(--ink-70); font-size:14.5px; line-height:1.7; margin-bottom:14px;}
.legal-close{position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%; background:var(--steel); border:none;}

/* ==========================================================================
   PRODUCT PAGE SPECIFIC
   ========================================================================== */
.breadcrumb{font-family:var(--ff-mono); font-size:12.5px; color:var(--ink-50); display:flex; gap:8px; align-items:center; margin-bottom:18px;}
.breadcrumb a:hover{color:var(--blue);}
.p-hero{display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center;}
.p-hero h1{font-size:clamp(30px,4vw,46px); margin:16px 0 16px;}
.p-hero p.tag{font-size:17px; color:var(--ink-70); line-height:1.6; max-width:520px; margin-bottom:26px;}
.p-hero-media{border-radius:18px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-card); aspect-ratio:4/3.2; background:var(--steel);}
.p-hero-media img{width:100%; height:100%; object-fit:cover;}

.gallery-row{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.gallery-item{border-radius:14px; overflow:hidden; border:1px solid var(--line); position:relative; aspect-ratio:4/3; cursor:pointer; background:var(--steel);}
.gallery-item img, .gallery-item video{width:100%; height:100%; object-fit:cover;}
.gallery-item .tagv{position:absolute; bottom:10px; left:10px; background:rgba(11,30,51,.75); color:#fff; font-family:var(--ff-mono); font-size:10.5px; padding:5px 10px; border-radius:999px; letter-spacing:.06em;}
@media (max-width:780px){.gallery-row{grid-template-columns:1fr;}}

.lightbox{position:fixed; inset:0; background:rgba(6,14,26,.92); z-index:2500; display:none; align-items:center; justify-content:center; padding:24px;}
.lightbox.show{display:flex;}
.lightbox-inner{max-width:900px; width:100%;}
.lightbox-inner img, .lightbox-inner video{width:100%; border-radius:12px;}
.lightbox-close{position:absolute; top:22px; right:26px; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.1); color:#fff; border:none; font-size:20px;}

.spec-table{width:100%; border-collapse:collapse; font-size:14.5px;}
.spec-table tr{border-bottom:1px solid var(--line);}
.spec-table td{padding:14px 12px; vertical-align:top;}
.spec-table td:first-child{font-family:var(--ff-mono); color:var(--ink-50); width:38%; font-size:12.8px; letter-spacing:.02em; text-transform:uppercase;}
.spec-table td:last-child{font-weight:600;}
.spec-note{margin-top:18px; padding:16px 18px; background:rgba(255,122,26,.08); border-left:3px solid var(--amber); border-radius:0 10px 10px 0; font-size:14px; color:var(--ink-70);}

.app-cards{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.app-card{padding:22px; text-align:left;}
.app-card .ic{width:40px; height:40px; border-radius:10px; background:var(--steel); display:flex; align-items:center; justify-content:center; margin-bottom:14px; font-size:18px;}
.app-card h4{font-size:15px; margin-bottom:6px;}
.app-card p{font-size:13px; color:var(--ink-70); line-height:1.5;}
@media (max-width:960px){.app-cards{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.app-cards{grid-template-columns:1fr;}}

.why-row{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.why-card{display:flex; gap:14px;}
.why-card .num{font-family:var(--ff-mono); font-size:13px; color:var(--blue); font-weight:600;}
.why-card h4{font-size:15.5px; margin-bottom:6px;}
.why-card p{font-size:13.5px; color:var(--ink-70); line-height:1.55;}
@media (max-width:860px){.why-row{grid-template-columns:1fr;}}

.related-scroller{display:flex; gap:20px; overflow-x:auto; padding-bottom:10px;}
.related-scroller .product-card{flex:0 0 280px;}

.mini-testi{display:flex; gap:20px; align-items:center; background:var(--steel); border-radius:18px; padding:28px;}
.mini-testi img{width:64px; height:64px; border-radius:50%; object-fit:cover; flex:0 0 auto;}
.mini-testi p{font-size:15px; color:var(--ink); line-height:1.6; font-style:italic; margin-bottom:10px;}
.mini-testi b{font-size:13.5px;} .mini-testi span{font-family:var(--ff-mono); font-size:11.5px; color:var(--ink-50);}
@media (max-width:780px){.p-hero{grid-template-columns:1fr;} .mini-testi{flex-direction:column; text-align:center;}}

.pdf-btn{display:inline-flex; align-items:center; gap:10px; padding:14px 22px; border-radius:12px; border:1.5px solid var(--line); font-weight:600; font-size:14.5px;}
.pdf-btn:hover{border-color:var(--blue); color:var(--blue);}

/* Section headers */
.sec-head{max-width:620px; margin-bottom:44px;}
.sec-head h2{font-size:clamp(26px,3.4vw,40px); margin:14px 0 12px;}
.sec-head p{color:var(--ink-70); font-size:16px; line-height:1.6;}
.sec-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.sec-head.between{display:flex; justify-content:space-between; align-items:flex-end; max-width:none;}

.two-col{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
@media (max-width:860px){.two-col{grid-template-columns:1fr;}}

.stat-strip{display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:18px; overflow:hidden;}
.stat-strip div{padding:30px 22px; border-right:1px solid var(--line); text-align:center;}
.stat-strip div:last-child{border-right:none;}
.stat-strip b{font-family:var(--ff-display); font-size:32px; display:block; color:var(--blue);}
.stat-strip span{font-family:var(--ff-mono); font-size:11.5px; color:var(--ink-50); text-transform:uppercase; letter-spacing:.06em;}
@media (max-width:780px){.stat-strip{grid-template-columns:1fr 1fr;} .stat-strip div{border-bottom:1px solid var(--line);}}