/* ==========================================================================
   BITSINK — Design System
   AI Data Center Cooling & Electrical Switchgear Manufacturing
   ========================================================================== */

:root{
  /* ---- Color: base surfaces (light) ---- */
  --bg:            #f6f8fb;
  --bg-alt:        #eef2f7;
  --surface:       #ffffff;
  --surface-sunken:#f1f4f8;
  --border:        #e2e8f0;
  --border-strong: #cbd5e1;

  /* ---- Color: text ---- */
  --text-900: #0f1b2d;
  --text-700: #27374d;
  --text-500: #55677e;
  --text-400: #7f90a3;
  --text-on-dark: #eef3f9;
  --text-on-dark-muted: #a9bbd0;

  /* ---- Color: brand ---- */
  --brand-900: #05263f;
  --brand-800: #0a3a5c;
  --brand-700: #0f4c75;
  --brand-600: #146a9c;
  --brand-500: #1a86c0;

  /* ---- Color: accent (brand — orange) ---- */
  --cyan-700: #c2410c;
  --cyan-600: #ea580c;
  --cyan-500: #f97316;
  --cyan-400: #fb923c;
  --cyan-100: #ffedd5;
  --cyan-50:  #fff7ed;

  /* ---- Color: accent (electrical — amber) ---- */
  --amber-600: #b45309;
  --amber-500: #d97706;
  --amber-400: #f59e0b;
  --amber-100: #fef3e2;

  /* ---- Color: semantic ---- */
  --success: #15803d;
  --success-bg: #e7f6ec;
  --danger:  #b91c1c;
  --danger-bg:#fdecec;
  --info-bg: #e8f2fb;

  /* ---- Typography ---- */
  --font-head: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.625rem;
  --fs-2xl:  2rem;
  --fs-3xl:  2.5rem;
  --fs-4xl:  3.25rem;

  /* ---- Spacing (8pt rhythm) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* ---- Radius & elevation ---- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(15,27,45,0.06), 0 1px 1px rgba(15,27,45,0.04);
  --shadow-md: 0 4px 16px rgba(15,27,45,0.08), 0 1px 2px rgba(15,27,45,0.06);
  --shadow-lg: 0 16px 40px rgba(15,27,45,0.14), 0 2px 8px rgba(15,27,45,0.06);
  --shadow-focus: 0 0 0 3px rgba(234,88,12,0.35);

  /* ---- Motion ---- */
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 320ms;
  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);

  /* ---- Layout ---- */
  --container: 1240px;
  --header-h: 76px;
  --z-header: 100;
  --z-mega: 90;
  --z-modal: 200;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ---- Reset ---- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; max-width:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text-700);
  font-family:var(--font-body);
  font-size:var(--fs-base);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  max-width:100%;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4,h5{ font-family:var(--font-head); color:var(--text-900); line-height:1.2; margin:0; font-weight:600; }
p{ margin:0; }
table{ border-collapse:collapse; width:100%; }

:focus-visible{ outline:none; box-shadow:var(--shadow-focus); border-radius:4px; }
a:focus-visible, button:focus-visible{ box-shadow:var(--shadow-focus); }

/* ---- Skip link ---- */
.skip-link{
  position:absolute; left:8px; top:-48px; background:var(--brand-900); color:#fff;
  padding:10px 16px; border-radius:var(--r-sm); z-index:1000; transition:top var(--dur-base) var(--ease-out);
}
.skip-link:focus{ top:8px; }

/* ---- Layout helpers ---- */
.container{ max-width:var(--container); margin-inline:auto; padding-inline:var(--sp-5); }
@media (max-width:640px){ .container{ padding-inline:var(--sp-4); } .header-actions .btn-primary{ display:none; } }

.section{ padding-block:var(--sp-8); }
.section--sm{ padding-block:var(--sp-6); }
.section--alt{ background:var(--bg-alt); }
.section--dark{ background:linear-gradient(160deg,var(--brand-900),var(--brand-800) 60%,#0d3350); color:var(--text-on-dark); }
.section--dark h2,.section--dark h3{ color:#fff; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-head); font-weight:600;
  font-size:var(--fs-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--cyan-700);
  background:var(--cyan-50); border:1px solid var(--cyan-100); padding:6px 14px; border-radius:var(--r-pill);
}
.section--dark .eyebrow{ background:rgba(234,88,12,0.14); border-color:rgba(234,88,12,0.35); color:var(--cyan-400); }

.section-head{ max-width:720px; margin-bottom:var(--sp-7); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head h2{ font-size:var(--fs-2xl); margin-top:var(--sp-3); }
.section-head p{ color:var(--text-500); font-size:var(--fs-md); margin-top:var(--sp-3); }
.section--dark .section-head p{ color:var(--text-on-dark-muted); }

.grid{ display:grid; gap:var(--sp-5); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:960px){ .grid-4{ grid-template-columns:repeat(2,1fr); } .grid-3{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-head); font-weight:600; font-size:var(--fs-sm);
  padding:13px 24px; border-radius:var(--r-md); transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast), background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
  white-space:nowrap; min-height:44px; border:1px solid transparent;
}
.btn svg{ width:18px; height:18px; flex:none; }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--cyan-600); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--cyan-700); box-shadow:var(--shadow-md); }
.btn-secondary{ background:var(--surface); color:var(--brand-800); border-color:var(--border-strong); }
.btn-secondary:hover{ border-color:var(--brand-700); background:var(--bg-alt); }
.btn-ghost{ background:transparent; color:var(--brand-700); }
.btn-ghost:hover{ background:var(--bg-alt); }
.btn-on-dark{ background:#fff; color:var(--brand-900); }
.btn-on-dark:hover{ background:var(--cyan-50); }
.btn-outline-on-dark{ background:transparent; color:#fff; border-color:rgba(255,255,255,0.4); }
.btn-outline-on-dark:hover{ background:rgba(255,255,255,0.1); border-color:#fff; }
.btn-block{ width:100%; }
.btn-sm{ padding:9px 16px; font-size:var(--fs-xs); min-height:36px; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* ==========================================================================
   Header & Navigation
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:var(--z-header);
  height:var(--header-h);
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center;
}
.header-inner{ display:flex; align-items:center; gap:var(--sp-6); width:100%; }
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-head); font-weight:700; font-size:var(--fs-md); color:var(--brand-900); flex:none; }
.brand-mark{ width:36px; height:36px; flex:none; }
.brand-logo{ height:26px; width:auto; flex:none; display:block; }

.nav-primary{ display:flex; align-items:stretch; gap:2px; flex:1; }
.nav-item{ position:relative; display:flex; align-items:center; }
.nav-link{
  display:flex; align-items:center; gap:6px; height:var(--header-h);
  padding-inline:var(--sp-3); font-family:var(--font-head); font-weight:600; font-size:var(--fs-sm);
  color:var(--text-700); border-bottom:2px solid transparent; transition:color var(--dur-fast), border-color var(--dur-fast);
}
.nav-link svg{ width:16px; height:16px; transition:transform var(--dur-base) var(--ease-out); }
.nav-item:hover .nav-link, .nav-link[aria-expanded="true"], .nav-link.is-active{ color:var(--cyan-700); border-color:var(--cyan-600); }
.nav-item:hover .nav-link svg, .nav-link[aria-expanded="true"] svg{ transform:rotate(180deg); }

.header-actions{ display:flex; align-items:center; gap:var(--sp-3); flex:none; }
.header-search{ display:flex; align-items:center; gap:8px; background:var(--surface-sunken); border:1px solid var(--border); border-radius:var(--r-pill); padding:8px 14px; color:var(--text-400); font-size:var(--fs-xs); min-width:200px; }
.header-search svg{ width:16px; height:16px; flex:none; }
.header-search input{ background:none; border:none; width:100%; color:var(--text-700); }
.header-search input::placeholder{ color:var(--text-400); }

.nav-toggle{ display:none; flex:none; padding:8px; }
.nav-toggle svg{ width:26px; height:26px; }

/* ---- Dropdown (simple) ---- */
.dropdown-panel{
  position:absolute; top:100%; left:0; min-width:280px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-lg);
  padding:var(--sp-3); opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
}
.nav-item.is-open .dropdown-panel, .nav-item:hover .dropdown-panel{ opacity:1; visibility:visible; transform:translateY(4px); }
.dropdown-panel a{ display:flex; flex-direction:column; gap:2px; padding:10px 14px; border-radius:var(--r-sm); }
.dropdown-panel a:hover{ background:var(--bg-alt); }
.dropdown-panel .dd-title{ font-weight:600; color:var(--text-900); font-size:var(--fs-sm); }
.dropdown-panel .dd-desc{ font-size:var(--fs-xs); color:var(--text-500); }

/* ---- Mega menu ---- */
.mega-panel{
  position:absolute; top:100%; left:0; transform:translateY(8px);
  width:min(920px, 92vw); background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:var(--sp-6);
  opacity:0; visibility:hidden; transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
  display:grid; grid-template-columns:1.1fr 1.1fr 1.1fr 0.9fr; gap:var(--sp-6);
}
.nav-item.is-open .mega-panel, .nav-item:hover .mega-panel{ opacity:1; visibility:visible; transform:translateY(4px); }
.mega-col-title{ display:flex; align-items:center; gap:8px; font-family:var(--font-head); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em; color:var(--text-400); margin-bottom:var(--sp-3); }
.mega-col-title svg{ width:16px; height:16px; color:var(--cyan-600); }
.mega-link{ display:flex; align-items:flex-start; gap:10px; padding:9px 8px; border-radius:var(--r-sm); margin-inline:-8px; }
.mega-link:hover{ background:var(--bg-alt); }
.mega-link .ic{ width:32px; height:32px; flex:none; border-radius:8px; background:var(--cyan-50); color:var(--cyan-700); display:flex; align-items:center; justify-content:center; }
.mega-link .ic svg{ width:18px; height:18px; }
.mega-link-title{ font-weight:600; font-size:var(--fs-sm); color:var(--text-900); display:block; }
.mega-link-desc{ font-size:var(--fs-xs); color:var(--text-500); }
.mega-promo{ background:var(--brand-900); border-radius:var(--r-md); padding:var(--sp-5); color:#fff; display:flex; flex-direction:column; gap:var(--sp-3); }
.mega-promo h4{ color:#fff; font-size:var(--fs-sm); }
.mega-promo p{ color:var(--text-on-dark-muted); font-size:var(--fs-xs); }
.mega-view-all{ grid-column:1/-1; border-top:1px solid var(--border); margin-top:var(--sp-2); padding-top:var(--sp-4); display:flex; justify-content:space-between; align-items:center; }

/* ---- Mobile nav ---- */
@media (max-width:1024px){
  /* backdrop-filter on .site-header creates a new containing block for position:fixed
     descendants, which breaks the full-viewport sizing of the off-canvas .nav-primary panel */
  .site-header{ backdrop-filter:none; -webkit-backdrop-filter:none; }
  .header-search{ display:none; }
  .nav-primary{ position:fixed; inset:var(--header-h) 0 0 0; background:var(--surface); flex-direction:column; padding:var(--sp-4); overflow-y:auto; transform:translateX(100%); transition:transform var(--dur-slow) var(--ease-in-out); gap:0; }
  .nav-primary.is-open{ transform:translateX(0); }
  .nav-item{ flex-direction:column; align-items:stretch; border-bottom:1px solid var(--border); }
  .nav-link{ height:auto; padding-block:var(--sp-4); justify-content:space-between; }
  .mega-panel,.dropdown-panel{ position:static; width:100%; transform:none; opacity:1; visibility:visible; box-shadow:none; border:none; display:none; grid-template-columns:1fr; padding:0 0 var(--sp-3); }
  .nav-item.is-open .mega-panel, .nav-item.is-open .dropdown-panel{ display:grid; }
  .mega-promo{ display:none; }
  .nav-toggle{ display:flex; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{ position:relative; overflow:hidden; padding-block:var(--sp-9) var(--sp-9); isolation:isolate; }
.hero-bg{ position:absolute; inset:0; z-index:-1; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; }
.hero-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(5,15,26,0.94) 0%, rgba(5,20,34,0.86) 32%, rgba(5,25,41,0.55) 62%, rgba(5,25,41,0.32) 100%); }
.hero-copy{ max-width:640px; }
.hero h1{ font-size:2.5rem; font-weight:700; letter-spacing:-0.03em; line-height:1.1; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,0.25); }
.hero h1 .accent{ color:var(--cyan-400); }
.hero .eyebrow{ background:rgba(234,88,12,0.16); border-color:rgba(234,88,12,0.4); color:var(--cyan-400); }
.hero-lede{ font-size:var(--fs-md); color:var(--text-on-dark-muted); margin-top:var(--sp-5); max-width:560px; }
.hero-actions{ display:flex; gap:var(--sp-3); margin-top:var(--sp-6); flex-wrap:wrap; }
.hero-stats{ display:flex; gap:var(--sp-6); margin-top:var(--sp-7); flex-wrap:wrap; }
.hero-stat b{ display:block; font-family:var(--font-head); font-size:var(--fs-xl); color:#fff; }
.hero-stat span{ font-size:var(--fs-xs); color:var(--text-on-dark-muted); }
@media (max-width:960px){ .hero{ padding-block:var(--sp-7) var(--sp-7); } .hero h1{ font-size:var(--fs-2xl);} .hero-bg::after{ background:linear-gradient(180deg, rgba(5,15,26,0.75) 0%, rgba(5,20,34,0.88) 55%, rgba(5,25,41,0.94) 100%); } }

/* ---- Logo / trust strip ---- */
.trust-strip{ display:flex; align-items:center; gap:var(--sp-7); flex-wrap:wrap; justify-content:space-between; padding-block:var(--sp-6); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.trust-strip .label{ font-size:var(--fs-xs); color:var(--text-400); text-transform:uppercase; letter-spacing:.08em; font-family:var(--font-head); flex:none; }
.trust-logos{ display:flex; gap:var(--sp-7); flex-wrap:wrap; color:var(--text-400); font-family:var(--font-head); font-weight:700; font-size:var(--fs-md); opacity:.8; }

/* ==========================================================================
   Cards
   ========================================================================== */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--sp-5); transition:box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base), transform var(--dur-base) var(--ease-out); }
.card-hover:hover{ box-shadow:var(--shadow-md); border-color:var(--border-strong); transform:translateY(-2px); }

.icon-card .ic{ width:52px; height:52px; border-radius:var(--r-md); background:var(--cyan-50); color:var(--cyan-700); display:flex; align-items:center; justify-content:center; margin-bottom:var(--sp-4); }
.icon-card .ic svg{ width:26px; height:26px; }
.icon-card h3{ font-size:var(--fs-md); margin-bottom:var(--sp-2); }
.icon-card p{ color:var(--text-500); font-size:var(--fs-sm); }
.icon-card.amber .ic{ background:var(--amber-100); color:var(--amber-600); }

/* ---- Product cards ---- */
.product-card{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
.product-card .thumb{ aspect-ratio:16/10; background:linear-gradient(135deg,var(--brand-800),var(--cyan-700)); position:relative; display:flex; align-items:center; justify-content:center; }
.product-card .thumb svg{ width:64px; height:64px; color:rgba(255,255,255,0.9); }
.product-card .thumb.thumb--photo{ padding:0; overflow:hidden; }
.product-card .thumb.thumb--photo img{ width:100%; height:100%; object-fit:cover; }
.product-card .badge{ position:absolute; top:12px; left:12px; }
.product-card .body{ padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-2); flex:1; }
.product-card .cat{ font-size:var(--fs-xs); color:var(--cyan-700); font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.product-card h3{ font-size:var(--fs-md); }
.product-card p{ color:var(--text-500); font-size:var(--fs-sm); flex:1; }
.product-card .meta{ display:flex; gap:var(--sp-4); font-size:var(--fs-xs); color:var(--text-500); padding-top:var(--sp-3); border-top:1px solid var(--border); margin-top:var(--sp-2); }
.product-card .meta b{ display:block; color:var(--text-900); font-size:var(--fs-sm); }
.product-card .cta-row{ display:flex; justify-content:space-between; align-items:center; margin-top:var(--sp-3); }

.badge{ display:inline-flex; align-items:center; gap:4px; font-size:var(--fs-xs); font-weight:600; padding:5px 11px; border-radius:var(--r-pill); background:var(--info-bg); color:var(--brand-700); }
.badge.cyan{ background:var(--info-bg); color:var(--brand-700); }
.badge.amber{ background:var(--amber-100); color:var(--amber-600); }
.badge.success{ background:var(--success-bg); color:var(--success); }
.badge.on-dark{ background:rgba(255,255,255,0.15); color:#fff; }

/* ==========================================================================
   Pipeline / Process diagram
   ========================================================================== */
.pipeline{ display:grid; grid-template-columns:repeat(5,1fr); gap:var(--sp-4); position:relative; }
.pipeline::before{ content:""; position:absolute; top:28px; left:10%; right:10%; height:2px; background:repeating-linear-gradient(90deg,var(--border-strong) 0 8px, transparent 8px 14px); z-index:0; }
.pipeline-step{ position:relative; z-index:1; text-align:center; display:flex; flex-direction:column; align-items:center; gap:var(--sp-3); }
.pipeline-step .num{ width:56px; height:56px; border-radius:50%; background:var(--surface); border:2px solid var(--cyan-600); color:var(--cyan-700); display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:700; font-size:var(--fs-md); }
.pipeline-step h4{ font-size:var(--fs-sm); }
.pipeline-step p{ font-size:var(--fs-xs); color:var(--text-500); }
@media (max-width:860px){ .pipeline{ grid-template-columns:1fr; } .pipeline::before{ display:none; } }

/* ==========================================================================
   Filter bar (category / pipeline pages)
   ========================================================================== */
.filter-bar{ display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--sp-4); }
.filter-bar .filter-label{ font-size:var(--fs-xs); color:var(--text-400); font-weight:600; text-transform:uppercase; letter-spacing:.05em; margin-right:4px; }
.select-wrap{ position:relative; }
.select-wrap svg.chev{ position:absolute; right:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--text-400); pointer-events:none; }
.select{
  appearance:none; background:var(--surface-sunken); border:1px solid var(--border); border-radius:var(--r-pill);
  padding:10px 36px 10px 16px; font-size:var(--fs-sm); font-weight:500; color:var(--text-700); min-height:44px; min-width:170px;
  transition:border-color var(--dur-fast);
}
.select:hover{ border-color:var(--border-strong); }
.filter-bar .results-count{ margin-left:auto; font-size:var(--fs-xs); color:var(--text-500); }

/* ==========================================================================
   Accordion (spec detail dropdowns)
   ========================================================================== */
.accordion{ border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; background:var(--surface); }
.accordion-item + .accordion-item{ border-top:1px solid var(--border); }
.accordion-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-5); text-align:left; font-family:var(--font-head); font-weight:600; font-size:var(--fs-sm); color:var(--text-900);
}
.accordion-trigger:hover{ background:var(--bg-alt); }
.accordion-trigger .row{ display:flex; align-items:center; gap:12px; }
.accordion-trigger .ic{ width:34px; height:34px; border-radius:8px; background:var(--cyan-50); color:var(--cyan-700); display:flex; align-items:center; justify-content:center; flex:none; }
.accordion-trigger .ic svg{ width:18px; height:18px; }
.accordion-trigger .chev{ width:20px; height:20px; color:var(--text-400); transition:transform var(--dur-base) var(--ease-out); flex:none; }
.accordion-trigger[aria-expanded="true"] .chev{ transform:rotate(180deg); }
.accordion-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--dur-base) var(--ease-out); }
.accordion-panel > div{ overflow:hidden; }
.accordion-item.is-open .accordion-panel{ grid-template-rows:1fr; }
.accordion-body{ padding:0 var(--sp-5) var(--sp-5); }

/* ==========================================================================
   Spec tables
   ========================================================================== */
.spec-table{ width:100%; font-size:var(--fs-sm); }
.spec-table tr{ border-bottom:1px solid var(--border); }
.spec-table tr:last-child{ border-bottom:none; }
.spec-table th,.spec-table td{ text-align:left; padding:12px 16px; vertical-align:top; }
.spec-table th{ width:38%; color:var(--text-500); font-weight:500; }
.spec-table td{ color:var(--text-900); font-weight:600; }
.spec-table tr:nth-child(odd){ background:var(--surface-sunken); }

/* ==========================================================================
   Tabs (product spec page)
   ========================================================================== */
.tabs{ display:flex; gap:var(--sp-2); border-bottom:1px solid var(--border); overflow-x:auto; }
.tab-btn{ padding:14px 6px; margin-right:var(--sp-6); font-family:var(--font-head); font-weight:600; font-size:var(--fs-sm); color:var(--text-500); border-bottom:2px solid transparent; white-space:nowrap; }
.tab-btn.is-active{ color:var(--cyan-700); border-color:var(--cyan-600); }
.tab-panel{ display:none; padding-top:var(--sp-6); }
.tab-panel.is-active{ display:block; }

/* ==========================================================================
   Dense mega menu (Vertiv-style text columns)
   ========================================================================== */
.mega-panel--dense{ grid-template-columns:repeat(5,1fr); width:min(1080px,94vw); padding:var(--sp-5) var(--sp-6); gap:var(--sp-5); }
.mega-panel--dense .mega-col-title{ color:var(--text-900); font-size:var(--fs-sm); text-transform:none; letter-spacing:0; border-bottom:2px solid var(--cyan-600); padding-bottom:10px; margin-bottom:var(--sp-3); }
.mega-text-link{ display:block; padding:7px 4px; font-size:var(--fs-sm); color:var(--text-500); border-radius:6px; }
.mega-text-link:hover{ color:var(--cyan-700); background:var(--bg-alt); }
.mega-panel--dense .mega-bottom{ grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); border-top:1px solid var(--border); margin-top:var(--sp-2); padding-top:var(--sp-5); }
.mega-panel--dense .mega-bottom h5{ font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em; color:var(--text-400); margin-bottom:var(--sp-2); }

/* ==========================================================================
   Catalog layout (sidebar filters + result list) — category pages
   ========================================================================== */
.catalog-layout{ display:grid; grid-template-columns:260px 1fr; gap:var(--sp-8); align-items:start; }
.filter-sidebar{ position:sticky; top:calc(var(--header-h) + 24px); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--sp-5); }
.filter-sidebar .clear-all{ font-size:var(--fs-xs); color:var(--cyan-700); font-weight:600; margin-bottom:var(--sp-4); display:inline-block; }
.filter-group{ border-top:1px solid var(--border); padding-block:var(--sp-4); }
.filter-group:first-of-type{ border-top:none; padding-top:0; }
.filter-group h5{ font-family:var(--font-head); font-size:var(--fs-sm); color:var(--text-900); margin-bottom:var(--sp-3); display:flex; justify-content:space-between; align-items:center; }
.filter-check{ display:flex; align-items:center; gap:10px; padding:6px 0; font-size:var(--fs-sm); color:var(--text-700); cursor:pointer; }
.filter-check input[type="checkbox"]{ width:18px; height:18px; accent-color:var(--cyan-600); flex:none; }
.filter-check .fc-count{ margin-left:auto; color:var(--text-400); font-size:var(--fs-xs); }

.catalog-toolbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--sp-5); flex-wrap:wrap; gap:var(--sp-3); padding-bottom:var(--sp-4); border-bottom:1px solid var(--border); }
.catalog-toolbar .showing{ font-size:var(--fs-md); color:var(--text-900); font-family:var(--font-head); font-weight:600; }
.catalog-toolbar .showing b{ color:var(--cyan-700); }
.toolbar-controls{ display:flex; gap:var(--sp-3); align-items:center; }

.result-row{ display:grid; grid-template-columns:150px 1fr 190px; gap:var(--sp-5); padding:var(--sp-5) 0; border-bottom:1px solid var(--border); align-items:start; }
.result-row:last-child{ border-bottom:none; }
.result-row .thumb-sm{ width:150px; height:104px; border-radius:var(--r-md); background:linear-gradient(135deg,var(--brand-800),var(--cyan-700)); display:flex; align-items:center; justify-content:center; flex:none; }
.result-row .thumb-sm svg{ width:44px; height:44px; color:rgba(255,255,255,0.92); }
.result-row .thumb-sm.thumb-sm--photo{ padding:0; overflow:hidden; }
.result-row .thumb-sm.thumb-sm--photo img{ width:100%; height:100%; object-fit:cover; }
.result-row .r-title{ font-size:var(--fs-md); color:var(--brand-800); font-family:var(--font-head); font-weight:600; }
.result-row a.r-title:hover{ color:var(--cyan-700); text-decoration:underline; }
.result-row .part-no{ font-size:var(--fs-xs); color:var(--text-400); font-family:var(--font-mono); margin-top:2px; display:block; }
.result-row .r-desc{ color:var(--text-500); font-size:var(--fs-sm); margin-top:8px; }
.result-row .r-tags{ display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; }
.result-links{ display:flex; flex-direction:column; gap:9px; font-size:var(--fs-sm); }
.result-links a{ color:var(--cyan-700); display:flex; gap:7px; align-items:center; font-weight:500; }
.result-links a svg{ width:15px; height:15px; flex:none; }
.result-links a:hover{ text-decoration:underline; }
@media (max-width:860px){ .catalog-layout{ grid-template-columns:1fr; } .filter-sidebar{ position:static; } .result-row{ grid-template-columns:100px 1fr; } .result-row .thumb-sm{ width:100px; height:70px; } .result-links{ grid-column:1/-1; flex-direction:row; flex-wrap:wrap; gap:var(--sp-4); border-top:1px solid var(--border); padding-top:var(--sp-3); margin-top:var(--sp-2); } }

/* ==========================================================================
   Spec table with banded section headers
   ========================================================================== */
.spec-table tr.spec-section td{ background:var(--brand-800); color:#fff; font-family:var(--font-head); font-weight:700; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em; padding:11px 16px; }
.spec-table tr.spec-section:first-child td{ border-top-left-radius:var(--r-sm); border-top-right-radius:var(--r-sm); }

/* ---- Product gallery thumbnails ---- */
.gallery-thumbs{ display:flex; gap:10px; margin-top:var(--sp-4); }
.gallery-thumbs button{ width:64px; height:64px; border-radius:var(--r-sm); border:2px solid var(--border); background:linear-gradient(135deg,var(--brand-800),var(--cyan-700)); display:flex; align-items:center; justify-content:center; flex:none; transition:border-color var(--dur-fast); }
.gallery-thumbs button svg{ width:26px; height:26px; color:#fff; }
.gallery-thumbs button.is-active{ border-color:var(--cyan-600); }
.gallery-thumbs button.thumb--photo{ background:var(--surface-sunken); padding:0; overflow:hidden; }
.gallery-thumbs button.thumb--photo img{ width:100%; height:100%; object-fit:cover; }

/* ---- Suited-for tag pills / meta lines on product hero ---- */
.suited-for{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:var(--fs-sm); color:var(--text-500); }
.suited-for .label{ font-weight:600; color:var(--text-900); }
.tag-pill{ background:var(--surface-sunken); border:1px solid var(--border); padding:4px 12px; border-radius:var(--r-pill); font-size:var(--fs-xs); color:var(--text-700); }
.meta-line{ font-size:var(--fs-sm); color:var(--text-500); }
.meta-line b{ color:var(--text-900); }

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */
.breadcrumb{ display:flex; align-items:center; gap:8px; font-size:var(--fs-xs); color:var(--text-500); flex-wrap:wrap; }
.breadcrumb a:hover{ color:var(--cyan-700); }
.breadcrumb svg{ width:14px; height:14px; color:var(--text-400); }
.breadcrumb .current{ color:var(--text-900); font-weight:600; }

/* ==========================================================================
   Product hero (spec page top)
   ========================================================================== */
.product-hero{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:var(--sp-8); align-items:center; padding-block:var(--sp-6) var(--sp-7); }
.product-hero .visual{ aspect-ratio:1/1; border-radius:var(--r-lg); background:linear-gradient(135deg,var(--brand-800),var(--cyan-700)); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md); overflow:hidden; }
.product-hero .visual svg{ width:120px; height:120px; color:rgba(255,255,255,0.92); }
.product-hero .visual--photo{ background:var(--surface-sunken); border:1px solid var(--border); }
.product-hero .visual--photo img{ width:100%; height:100%; object-fit:cover; }
.product-hero .tags{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:var(--sp-3); }
.product-hero h1{ font-size:var(--fs-2xl); }
.product-hero .desc{ color:var(--text-500); margin-top:var(--sp-3); font-size:var(--fs-md); }
.quick-specs{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); margin-top:var(--sp-6); }
.quick-specs .qs{ background:var(--surface-sunken); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--sp-4); }
.quick-specs .qs span{ display:block; font-size:var(--fs-xs); color:var(--text-500); margin-bottom:4px; }
.quick-specs .qs b{ font-family:var(--font-head); color:var(--brand-900); font-size:var(--fs-md); }
.product-hero .actions{ display:flex; gap:var(--sp-3); margin-top:var(--sp-6); flex-wrap:wrap; }
@media (max-width:860px){ .product-hero{ grid-template-columns:1fr; } .quick-specs{ grid-template-columns:repeat(2,1fr);} }

/* ==========================================================================
   Timeline (about / process)
   ========================================================================== */
.stats-bar{ display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; background:var(--surface); }
.stats-bar .stat{ padding:var(--sp-6) var(--sp-5); text-align:center; border-right:1px solid var(--border); }
.stats-bar .stat:last-child{ border-right:none; }
.stats-bar .stat b{ display:block; font-family:var(--font-head); font-size:var(--fs-2xl); color:var(--cyan-700); }
.stats-bar .stat span{ font-size:var(--fs-xs); color:var(--text-500); }
@media (max-width:768px){ .stats-bar{ grid-template-columns:repeat(2,1fr);} .stats-bar .stat:nth-child(2){ border-right:none; } }

/* ==========================================================================
   CTA banner
   ========================================================================== */
.cta-banner{ background:linear-gradient(120deg,var(--brand-900),var(--brand-700)); border-radius:var(--r-lg); padding:var(--sp-8); display:flex; align-items:center; justify-content:space-between; gap:var(--sp-6); flex-wrap:wrap; color:#fff; }
.cta-banner h2{ color:#fff; font-size:var(--fs-2xl); max-width:560px; }
.cta-banner p{ color:var(--text-on-dark-muted); margin-top:var(--sp-2); }
.cta-actions{ display:flex; gap:var(--sp-3); flex-wrap:wrap; }

/* ==========================================================================
   Forms
   ========================================================================== */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5); }
.field{ display:flex; flex-direction:column; gap:8px; }
.field.full{ grid-column:1/-1; }
.field label{ font-size:var(--fs-sm); font-weight:600; color:var(--text-900); }
.field .req{ color:var(--danger); }
.field input,.field select,.field textarea{
  background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--r-sm); padding:12px 14px; font-size:var(--fs-sm); min-height:48px;
  transition:border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.field textarea{ min-height:120px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--cyan-600); box-shadow:var(--shadow-focus); }
.field .hint{ font-size:var(--fs-xs); color:var(--text-500); }
.field .error-msg{ font-size:var(--fs-xs); color:var(--danger); display:none; }
.field.has-error input,.field.has-error select,.field.has-error textarea{ border-color:var(--danger); }
.field.has-error .error-msg{ display:block; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }

.form-status{ display:flex; gap:10px; align-items:flex-start; padding:var(--sp-4); border-radius:var(--r-md); font-size:var(--fs-sm); margin-top:var(--sp-4); }
.form-status.success{ background:var(--success-bg); color:var(--success); }
.form-status.error{ background:var(--danger-bg); color:var(--danger); }
.form-status svg{ width:20px; height:20px; flex:none; }
[hidden]{ display:none !important; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background:var(--brand-900); color:var(--text-on-dark-muted); padding-block:var(--sp-8) var(--sp-6); }
.footer-grid{ display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:var(--sp-6); }
.footer-brand{ display:flex; align-items:center; gap:10px; color:#fff; font-family:var(--font-head); font-weight:700; font-size:var(--fs-md); margin-bottom:var(--sp-3); }
.footer-brand .logo-chip{ display:inline-flex; align-items:center; height:32px; padding-inline:10px; background:#fff; border-radius:8px; }
.footer-brand .logo-chip img{ height:18px; width:auto; display:block; }
.site-footer p{ font-size:var(--fs-sm); max-width:280px; }
.footer-col h5{ color:#fff; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em; margin-bottom:var(--sp-4); }
.footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.footer-col a{ font-size:var(--fs-sm); transition:color var(--dur-fast); }
.footer-col a:hover{ color:#fff; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; margin-top:var(--sp-7); padding-top:var(--sp-5); border-top:1px solid rgba(255,255,255,0.1); font-size:var(--fs-xs); flex-wrap:wrap; gap:var(--sp-3); }
.footer-social{ display:flex; gap:var(--sp-3); }
.footer-social a{ width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center; }
.footer-social a:hover{ background:rgba(255,255,255,0.16); }
.footer-social svg{ width:16px; height:16px; }
@media (max-width:960px){ .footer-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .footer-grid{ grid-template-columns:1fr; } .footer-bottom{ flex-direction:column; align-items:flex-start; } }

/* ==========================================================================
   Utilities
   ========================================================================== */
.text-center{ text-align:center; }
.mt-1{ margin-top:var(--sp-6); }
.flex{ display:flex; }
.items-center{ align-items:center; }
.gap-2{ gap:var(--sp-2); }
.gap-3{ gap:var(--sp-3); }
.divider{ height:1px; background:var(--border); width:100%; }

/* Reveal-on-scroll (respects reduced motion via base rule above) */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.reveal.in-view{ opacity:1; transform:translateY(0); }