/* ============================================================
   WIREZEN INDUSTRIES — Futuristic Industrial Design System
   Dark foundation · controlled vibrant accents · engineered feel
   All legacy class names are preserved and restyled.
   ============================================================ */

/* ---------- TOKENS ---------- */
:root {
  /* Foundation — carbon / graphite / gunmetal */
  --bg-950: #05070a;
  --bg-900: #080b10;
  --bg-850: #0b0f15;
  --bg-800: #0f141c;
  --bg-700: #151c26;
  --bg-600: #1e2733;
  --panel:  #10151d;
  --panel-2:#141b24;

  /* Lines / hairlines */
  --line:        rgba(255,255,255,0.08);
  --line-soft:   rgba(255,255,255,0.05);
  --line-strong: rgba(255,255,255,0.16);

  /* Text */
  --text:      #e8edf4;
  --text-dim:  #9fadbe;
  --text-mute: #66748a;

  /* Vibrant accents (used sparingly) */
  --cyan:   #35e0f0;
  --cyan-d: #12b7cc;
  --blue:   #3b82f6;
  --blue-d: #1d4ed8;
  --orange: #ff6a25;
  --orange-l:#ff9a4d;
  --lime:   #b6f24a;
  --silver: #c9d3de;

  /* Gradients — lighting, metal, interactive states */
  --grad-accent: linear-gradient(120deg, var(--cyan) 0%, var(--blue) 100%);
  --grad-heat:   linear-gradient(120deg, var(--orange) 0%, var(--orange-l) 100%);
  --grad-metal:  linear-gradient(135deg,#e9eef4 0%,#9aa7b6 38%,#5c6a7a 62%,#c3ced9 100%);
  --grad-panel:  linear-gradient(180deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.012) 100%);
  --glow-cyan:   0 0 0 1px rgba(53,224,240,0.30), 0 12px 40px -10px rgba(53,224,240,0.35);
  --glow-heat:   0 0 0 1px rgba(255,106,37,0.30), 0 12px 40px -10px rgba(255,106,37,0.35);

  /* Radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;

  /* Shadows on dark */
  --shadow-sm: 0 2px 10px rgba(0,0,0,0.35);
  --shadow-md: 0 12px 34px -12px rgba(0,0,0,0.55);
  --shadow-lg: 0 40px 90px -30px rgba(0,0,0,0.75);

  /* Motion */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 0.22s var(--ease-out);
  --t-med:  0.4s  var(--ease-out);
  --t-slow: 0.7s  var(--ease-out);

  /* Type */
  --font-display: "Space Grotesk", "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Spacing rhythm */
  --pad-section: clamp(4.5rem, 9vw, 8.5rem);
  --container: 1240px;

  /* legacy aliases still referenced by inline styles / older rules */
  --color-bg-light: var(--bg-850);
  --color-bg-white: var(--panel);
  --color-text-primary: var(--text);
  --color-text-secondary: var(--text-dim);
  --color-industrial-blue: var(--blue);
  --color-steel-grey: #64748b;
  --color-accent: var(--orange);
  --color-accent-alt: var(--cyan);
  --color-dark-footer: var(--bg-900);
  --color-border: var(--line);
  --color-hover: rgba(255,255,255,0.04);
  --color-success: #1f9d5b;
  --spacing-xs:.5rem; --spacing-sm:1rem; --spacing-md:1.5rem; --spacing-lg:2rem;
  --spacing-xl:3rem; --spacing-2xl:4rem; --spacing-3xl:5rem;
  --font-size-sm:14px; --font-size-base:16px; --font-size-lg:18px; --font-size-xl:20px;
  --font-size-2xl:24px; --font-size-3xl:30px; --font-size-4xl:40px; --font-size-5xl:56px; --font-size-6xl:72px;
  --font-weight-regular:400; --font-weight-medium:500; --font-weight-semibold:600; --font-weight-bold:700;
  --radius-sm:var(--r-sm); --radius-md:var(--r-md); --radius-lg:var(--r-md); --radius-xl:var(--r-lg);
  --transition-fast:var(--t-fast); --transition-normal:var(--t-med); --transition-slow:var(--t-slow);
  --z-sticky:900; --z-fixed:1000; --z-modal:2000;
}

/* ---------- RESET ---------- */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--font-body);
  background:var(--bg-950);
  color:var(--text);
  line-height:1.6;
  font-size:16px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img,svg,video { max-width:100%; display:block; }
a { color:var(--cyan); text-decoration:none; transition:color var(--t-fast); }
a:hover { color:var(--cyan-d); }
button { font-family:inherit; }
::selection { background:rgba(53,224,240,0.28); color:#fff; }

/* subtle page-wide engineering texture */
body::before {
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1200px 700px at 78% -10%, rgba(59,130,246,0.10), transparent 60%),
    radial-gradient(900px 600px at 8% 8%, rgba(53,224,240,0.06), transparent 55%),
    linear-gradient(180deg, var(--bg-950), var(--bg-900) 40%, var(--bg-950));
}
body::after {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.4;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 75%);
          mask-image:radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 75%);
}

/* ---------- TYPOGRAPHY ---------- */
h1,h2,h3,h4,h5,h6 { font-family:var(--font-display); font-weight:600; line-height:1.08; letter-spacing:-0.02em; color:var(--text); }
h1 { font-size:clamp(2.6rem, 6vw, 4.6rem); }
h2 { font-size:clamp(2rem, 3.6vw, 3rem); }
h3 { font-size:clamp(1.3rem, 2vw, 1.6rem); }
h4 { font-size:1.1rem; letter-spacing:-0.01em; }
p  { color:var(--text-dim); }
strong { color:var(--text); }

.eyebrow, .section-header > .section-subtitle ~ .eyebrow {
  font-family:var(--font-mono);
  font-size:.74rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--cyan);
  display:inline-flex; align-items:center; gap:.6rem;
}
.eyebrow::before {
  content:""; width:26px; height:1px; background:linear-gradient(90deg, var(--cyan), transparent);
}
.grad-text {
  background:var(--grad-accent); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.grad-text--heat { background:var(--grad-heat); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------- LAYOUT ---------- */
.container, .u-container {
  width:100%; max-width:var(--container); margin-inline:auto;
  padding-inline:clamp(1.15rem, 4vw, 2.4rem);
}
main { display:block; position:relative; z-index:1; }
.section { padding-block:var(--pad-section); position:relative; }
.section--alt { background:linear-gradient(180deg, var(--bg-900), var(--bg-850)); border-block:1px solid var(--line-soft); }
.section--dark { background:var(--bg-950); }
.section-header { max-width:720px; margin-bottom:clamp(2.5rem,5vw,4rem); }
.section-header.section-header--center { margin-inline:auto; text-align:center; }
.section-header h2 { margin:.8rem 0 .9rem; }
.section-subtitle { color:var(--text-dim); font-size:1.05rem; }

.divider {
  height:1px; border:0; margin:0;
  background:linear-gradient(90deg, transparent, var(--line-strong) 20%, var(--line-strong) 80%, transparent);
}

/* ---------- BUTTONS ---------- */
.btn, .btn-primary, .btn-secondary, .btn--primary, .btn--ghost, .btn--heat, .download-btn, .btn-cta {
  --btn-bg: var(--grad-accent);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--font-display); font-weight:600; font-size:.95rem; letter-spacing:.01em;
  padding:.9rem 1.5rem; border-radius:999px; cursor:pointer; border:1px solid transparent;
  transition:transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  will-change:transform; text-align:center; line-height:1;
}
.btn svg, .btn-primary svg, .btn--primary svg, .btn-cta svg { width:1.05em; height:1.05em; transition:transform var(--t-fast); }
.btn:hover svg, .btn--primary:hover svg, .btn-cta:hover svg, .btn-primary:hover svg { transform:translateX(4px); }

.btn--primary, .btn-primary, .btn-cta {
  background:var(--grad-accent); color:#04121a; border-color:rgba(255,255,255,0.14);
  box-shadow:0 10px 30px -12px rgba(53,224,240,0.5);
}
.btn--primary:hover, .btn-primary:hover, .btn-cta:hover {
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 18px 44px -14px rgba(53,224,240,0.75), var(--glow-cyan);
  color:#04121a;
}
.btn--primary:active, .btn-primary:active, .btn-cta:active { transform:translateY(0) scale(.99); }

.btn--ghost, .btn-secondary {
  background:rgba(255,255,255,0.03); color:var(--text); border-color:var(--line-strong);
  backdrop-filter:blur(6px);
}
.btn--ghost:hover, .btn-secondary:hover {
  transform:translateY(-2px) scale(1.03); border-color:var(--cyan); color:#fff;
  box-shadow:0 14px 40px -16px rgba(53,224,240,0.5);
}
.btn--heat { background:var(--grad-heat); color:#160a03; box-shadow:0 10px 30px -12px rgba(255,106,37,0.55); }
.btn--heat:hover { transform:translateY(-2px) scale(1.03); box-shadow:0 18px 44px -14px rgba(255,106,37,0.8), var(--glow-heat); }

.btn-large, .btn--lg { padding:1.05rem 2rem; font-size:1rem; }
.btn-sm { padding:.55rem 1rem; font-size:.82rem; }

/* magnetic wrapper keeps layout, inner moves */
[data-magnetic] { display:inline-flex; will-change:transform; }

/* ---------- SCROLL PROGRESS ---------- */
.scroll-progress {
  position:fixed; top:0; left:0; height:2px; width:100%; transform-origin:0 50%; transform:scaleX(0);
  background:var(--grad-accent); z-index:1200; pointer-events:none;
  box-shadow:0 0 12px rgba(53,224,240,0.6);
}

/* ---------- CUSTOM CURSOR ---------- */
.cursor-dot, .cursor-ring { position:fixed; top:0; left:0; border-radius:50%; pointer-events:none; z-index:1300; mix-blend-mode:difference; }
.cursor-dot { width:6px; height:6px; background:#fff; transform:translate(-50%,-50%); }
.cursor-ring {
  width:34px; height:34px; border:1px solid rgba(255,255,255,0.6); transform:translate(-50%,-50%);
  transition:width .25s var(--ease-out), height .25s var(--ease-out), border-color .25s var(--ease-out), background .25s var(--ease-out);
}
.cursor-ring.is-hot { width:52px; height:52px; border-color:var(--cyan); background:rgba(53,224,240,0.08); }
body.has-cursor, body.has-cursor a, body.has-cursor button, body.has-cursor [data-magnetic] { cursor:none; }
@media (hover:none), (pointer:coarse) { .cursor-dot,.cursor-ring { display:none !important; } }

/* ---------- HEADER / NAV ---------- */
.site-header, .header {
  position:fixed; top:0; left:0; width:100%; z-index:1000;
  transition:background var(--t-med), border-color var(--t-med), backdrop-filter var(--t-med), box-shadow var(--t-med);
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled, .header.is-scrolled {
  background:rgba(8,11,16,0.72); backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line); box-shadow:0 10px 40px -20px rgba(0,0,0,0.8);
}
.site-header__inner, .header .container, .header-content {
  display:flex; align-items:center; justify-content:space-between;
  height:74px; width:100%; max-width:var(--container); margin-inline:auto;
  padding-inline:clamp(1.15rem, 4vw, 2.4rem);
}
.header .container { height:74px; }

.logo, .logo a, .brand {
  font-family:var(--font-display); font-weight:700; font-size:1.16rem; letter-spacing:.04em;
  color:var(--text); text-transform:uppercase; display:flex; align-items:center; gap:.6rem;
}
.logo a:hover, .brand:hover { color:var(--text); }
.brand__mark {
  content:""; width:26px; height:26px; flex:none; border-radius:7px; display:inline-block;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.15)) padding-box,
    var(--grad-accent) border-box;
  border:1.5px solid transparent;
  position:relative; overflow:hidden;
  box-shadow:0 0 18px -4px rgba(53,224,240,0.7);
}
.brand__mark::after {
  content:""; position:absolute; inset:5px; border-radius:3px;
  background:var(--grad-accent);
  clip-path:polygon(0 0, 60% 0, 100% 100%, 40% 100%);
}
.logo > a { gap:.6rem; display:flex; align-items:center; }
.brand__logo {
  height:42px; width:auto; flex:none; display:block; object-fit:contain;
  border-radius:10px; padding:3px;
  background:linear-gradient(160deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03));
  border:1px solid rgba(255,255,255,0.16);
  box-shadow:0 6px 20px -8px rgba(53,224,240,0.4), inset 0 1px 0 rgba(255,255,255,0.15);
  transition:height var(--t-med), transform var(--t-fast);
}
.logo a:hover .brand__logo { transform:translateY(-1px) scale(1.03); }
.site-header.is-scrolled .brand__logo, .header.is-scrolled .brand__logo { height:36px; }
.footer .footer-brand .brand__logo { height:44px; margin-bottom:.7rem; }
@media (max-width:820px){ .brand__logo { height:36px; } }

.nav-list { display:flex; align-items:center; gap:.35rem; list-style:none; }
.nav-link {
  position:relative; display:inline-block; padding:.55rem .85rem; border-radius:8px;
  font-size:.9rem; font-weight:500; color:var(--text-dim); transition:color var(--t-fast);
}
.nav-link::after {
  content:""; position:absolute; left:.85rem; right:.85rem; bottom:.34rem; height:1.5px;
  background:var(--grad-accent); transform:scaleX(0); transform-origin:left; transition:transform var(--t-fast);
}
.nav-link:hover, .nav-link[aria-current="page"], .nav-link.is-active { color:#fff; }
.nav-link:hover::after, .nav-link[aria-current="page"]::after, .nav-link.is-active::after { transform:scaleX(1); }

.header-cta { display:flex; align-items:center; gap:1rem; }
.header-cta .btn, .header-cta .btn-primary, .nav-cta { padding:.62rem 1.15rem; font-size:.85rem; }

/* dropdown */
.dropdown { position:relative; }
.dropdown > .nav-link { cursor:default; }
.dropdown-menu {
  position:absolute; top:calc(100% + .3rem); left:0; min-width:210px; list-style:none;
  background:rgba(12,16,22,0.96); backdrop-filter:blur(14px);
  border:1px solid var(--line); border-radius:var(--r-md); padding:.4rem;
  opacity:0; visibility:hidden; transform:translateY(8px); transition:all var(--t-fast);
  box-shadow:var(--shadow-md);
}
.dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { opacity:1; visibility:visible; transform:translateY(0); }
.dropdown-menu a { display:block; padding:.6rem .8rem; border-radius:7px; font-size:.88rem; color:var(--text-dim); }
.dropdown-menu a:hover { background:rgba(255,255,255,0.05); color:#fff; }

/* mobile toggle */
.menu-toggle { display:none; width:42px; height:42px; border:1px solid var(--line-strong); border-radius:10px; background:rgba(255,255,255,0.03); position:relative; }
.menu-toggle span { position:absolute; left:11px; right:11px; height:2px; background:var(--text); transition:transform var(--t-fast), opacity var(--t-fast); }
.menu-toggle span:nth-child(1){ top:14px; } .menu-toggle span:nth-child(2){ top:20px; } .menu-toggle span:nth-child(3){ top:26px; }
.menu-toggle.active span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.menu-toggle.active span:nth-child(2){ opacity:0; }
.menu-toggle.active span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ---------- HERO ---------- */
.hero {
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding-top:96px; padding-bottom:64px; overflow:hidden;
  background:radial-gradient(120% 90% at 72% 12%, #0d1a2b 0%, var(--bg-950) 62%);
}
.hero__bg { position:absolute; inset:0; z-index:0; pointer-events:none; }
/* readability scrim so hero copy stays legible over the 3D layer */
.hero::after {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, var(--bg-950) 0%, rgba(5,7,10,0.82) 34%, rgba(5,7,10,0.15) 60%, transparent 78%);
}
.hero__grid {
  position:absolute; inset:-2px;
  background-image:
    linear-gradient(rgba(120,170,255,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,170,255,0.10) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(90% 70% at 62% 42%, #000 0%, transparent 78%);
          mask-image:radial-gradient(90% 70% at 62% 42%, #000 0%, transparent 78%);
  animation:gridDrift 26s linear infinite;
}
@keyframes gridDrift { to { background-position:56px 56px; } }
.hero__glow { position:absolute; border-radius:50%; filter:blur(90px); opacity:.6; }
.hero__glow--cyan   { width:520px; height:520px; right:2%;  top:6%;  background:radial-gradient(circle, rgba(53,224,240,0.55), transparent 60%); }
.hero__glow--orange { width:460px; height:460px; left:-6%;  bottom:-8%; background:radial-gradient(circle, rgba(255,106,37,0.42), transparent 62%); }
.hero__scan {
  position:absolute; left:0; right:0; height:34%; top:0;
  background:linear-gradient(180deg, rgba(53,224,240,0.10), transparent);
  animation:scan 7s var(--ease-inout) infinite;
}
@keyframes scan { 0%{ transform:translateY(-40%); opacity:0 } 15%{opacity:1} 60%{opacity:.4} 100%{ transform:translateY(320%); opacity:0 } }

.hero__canvas {
  position:absolute; inset:0; z-index:0; width:100%; height:100%;
  pointer-events:none;
  -webkit-mask-image:radial-gradient(52% 62% at 82% 52%, #000 50%, transparent 100%);
          mask-image:radial-gradient(52% 62% at 82% 52%, #000 50%, transparent 100%);
}

.hero__inner {
  position:relative; z-index:2; max-width:680px;
  margin-right:auto; text-align:left;
}
.hero__title { margin:1.4rem 0 1.3rem; }
.hero__lead { font-size:clamp(1.05rem,1.5vw,1.3rem); color:var(--text-dim); max-width:560px; }
.hero__cta { display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.2rem; }
.hero__stats {
  display:flex; flex-wrap:wrap; gap:2.4rem; margin-top:3.2rem; padding-top:2rem;
  border-top:1px solid var(--line);
}
.hero__stat { min-width:120px; }
.hero__stat dt { font-family:var(--font-mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text-mute); margin-bottom:.35rem; }
.hero__stat dd { font-family:var(--font-display); font-size:1.65rem; font-weight:600; color:var(--text); }
.hero__stat dd .unit { color:var(--cyan); font-size:1rem; }

.hero__scrollcue {
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; color:var(--text-mute);
  display:flex; flex-direction:column; align-items:center; gap:.5rem; z-index:2;
}
.hero__scrollcue::after { content:""; width:1px; height:34px; background:linear-gradient(var(--cyan), transparent); animation:cue 1.8s var(--ease-inout) infinite; }
@keyframes cue { 0%,100%{ transform:scaleY(.4); opacity:.4 } 50%{ transform:scaleY(1); opacity:1 } }

/* hero load sequence */
[data-hero] { opacity:0; transform:translateY(22px); }
.hero.is-ready [data-hero] { animation:heroIn .9s var(--ease-out) forwards; }
.hero.is-ready [data-hero="1"]{ animation-delay:.05s } .hero.is-ready [data-hero="2"]{ animation-delay:.16s }
.hero.is-ready [data-hero="3"]{ animation-delay:.28s } .hero.is-ready [data-hero="4"]{ animation-delay:.4s }
.hero.is-ready [data-hero="5"]{ animation-delay:.52s }
@keyframes heroIn { to { opacity:1; transform:none; } }
.hero.is-ready .hero__canvas { animation:canvasIn 1.4s var(--ease-out) .35s both; }
@keyframes canvasIn { from { opacity:0; transform:scale(1.06); } to { opacity:1; transform:none; } }

/* legacy hero classes (product sub-pages use .hero with bg image) */
.hero-spotlight-effect, .hero-spotlight-container, .hero-3d-coil, .coil-3d-object, .coil-image, .hero-bg { display:none !important; }
.hero.hero--compact { min-height:auto; padding:130px 0 70px; background:linear-gradient(180deg,#0c1826,var(--bg-950)); }
.hero .hero-overlay { position:absolute; inset:0; background:linear-gradient(180deg, rgba(5,7,10,0.4), var(--bg-950) 92%); z-index:0; }
.hero .hero-content, .hero .hero-text { position:relative; z-index:2; }
.hero-title { font-family:var(--font-display); }
.hero-subtitle { color:var(--text-dim); }
.hero-label {
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:var(--cyan);
  background:none; border:0; padding:0;
}

/* ---------- REVEAL ---------- */
[data-reveal] { opacity:0; will-change:transform,opacity; transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
[data-reveal="fade-up"]    { transform:translateY(34px); }
[data-reveal="fade"]       { transform:none; }
[data-reveal="fade-scale"] { transform:scale(.94) translateY(20px); }
[data-reveal="slide-left"] { transform:translateX(-46px); }
[data-reveal="slide-right"]{ transform:translateX(46px); }
[data-reveal].is-visible, [data-reveal].scroll-visible { opacity:1; transform:none; }
[data-stagger] > * { opacity:0; transform:translateY(26px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); }
[data-stagger].is-visible > * { opacity:1; transform:none; }

.parallax { will-change:transform; }

/* ---------- PRODUCTS ---------- */
.products { background:linear-gradient(180deg, var(--bg-950), var(--bg-900)); }
.products-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.4rem,3vw,2.4rem); margin-top:2.5rem; }

.product-card {
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:var(--grad-panel), var(--panel);
  border:1px solid var(--line); border-radius:var(--r-lg);
  transition:transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
  transform-style:preserve-3d; will-change:transform;
}
.product-card::before {
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(130deg, rgba(53,224,240,0.5), transparent 40%, rgba(255,106,37,0.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity var(--t-med);
}
.product-card::after {
  content:""; position:absolute; width:340px; height:340px; border-radius:50%; pointer-events:none;
  left:var(--mx,50%); top:var(--my,20%); transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(53,224,240,0.18), transparent 60%);
  opacity:0; transition:opacity var(--t-med); mix-blend-mode:screen;
}
.product-card:hover { transform:translateY(-8px); border-color:transparent; box-shadow:var(--shadow-lg); }
.product-card:hover::before, .product-card:hover::after { opacity:1; }

.product-image {
  position:relative; aspect-ratio:4/3; overflow:hidden;
  background:linear-gradient(160deg,#eef1f4,#d3d9e0);
  border-bottom:1px solid var(--line);
}
.product-image img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  filter:contrast(1.05) saturate(1.03) brightness(1.01);
  transform:scale(1.04); transition:transform var(--t-slow), filter var(--t-med);
  will-change:transform;
}
/* framing: soft top sheen + bottom depth + faint brand tint — never muddies the product */
.product-image::before {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14) 0%, transparent 22%),
    linear-gradient(0deg, rgba(6,9,14,0.55) 0%, transparent 34%);
}
.product-image::after {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0;
  background:radial-gradient(60% 70% at var(--mx,50%) var(--my,30%), rgba(53,224,240,0.22), transparent 60%);
  mix-blend-mode:screen; transition:opacity var(--t-med);
}
.product-card:hover .product-image::after { opacity:1; }
.product-card:hover .product-image img { transform:scale(1.09); filter:contrast(1.08) saturate(1.06); }

.product-badge {
  position:absolute; left:16px; bottom:16px; z-index:2;
  font-family:var(--font-mono); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase;
  padding:.42rem .78rem; border-radius:999px;
  background:rgba(5,7,10,0.72); border:1px solid rgba(255,255,255,0.22); color:var(--cyan);
  backdrop-filter:blur(8px); box-shadow:0 6px 18px -6px rgba(0,0,0,0.6);
}
.product-content { padding:clamp(1.4rem,3vw,2rem); display:flex; flex-direction:column; gap:1rem; flex:1; }
.product-title { font-size:1.5rem; }
.product-description { color:var(--text-dim); font-size:.97rem; flex:0 0 auto; }

.product-specs { border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:rgba(255,255,255,0.015); }
.spec-item { display:flex; justify-content:space-between; gap:1rem; padding:.7rem .95rem; border-bottom:1px solid var(--line-soft); font-size:.85rem; }
.spec-item:last-child { border-bottom:0; }
.spec-label { color:var(--text-mute); font-family:var(--font-mono); font-size:.76rem; letter-spacing:.04em; text-transform:uppercase; }
.spec-value { color:var(--text); font-weight:500; text-align:right; }
.product-cta { display:flex; gap:.8rem; margin-top:auto; flex-wrap:wrap; }
.product-cta .btn { flex:1 1 auto; }

/* ---------- INDUSTRIAL BANNER ---------- */
.industrial-banner {
  position:relative; overflow:hidden; border-radius:var(--r-lg); padding:clamp(2rem,5vw,3.4rem);
  background:linear-gradient(120deg, #0c1b2c, #0a0f16);
  border:1px solid var(--line);
}
.industrial-banner::before {
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(45deg, rgba(255,106,37,0.08) 0 10px, transparent 10px 20px);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000, transparent);
          mask-image:linear-gradient(90deg, transparent, #000, transparent);
}
.banner-text {
  position:relative; text-align:center; font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.1rem,2.4vw,1.8rem); letter-spacing:.16em; text-transform:uppercase; color:var(--text);
}

/* ---------- MANUFACTURING / STORY SPLIT ---------- */
.manufacturing { background:linear-gradient(180deg, var(--bg-900), var(--bg-850)); }
.manufacturing-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.manufacturing-image {
  position:relative; aspect-ratio:4/5; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); background:#070b10;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.04), 0 30px 70px -30px rgba(0,0,0,0.8);
}
.manufacturing-image img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.manufacturing-image::after {
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:linear-gradient(160deg, rgba(53,224,240,0.10), transparent 38%, rgba(255,106,37,0.06));
  box-shadow:inset 0 -60px 90px -50px rgba(0,0,0,0.7);
}
.manufacturing-content h3, .quality-content h3 {
  font-family:var(--font-mono); font-size:.76rem; letter-spacing:.28em; text-transform:uppercase; color:var(--cyan); font-weight:500;
}
.manufacturing-title, .quality-title { margin:.9rem 0 1.6rem; }
.manufacturing-process { display:flex; flex-direction:column; gap:.4rem; }
.process-step {
  display:grid; grid-template-columns:auto 1fr; gap:1.1rem; align-items:start;
  padding:1.1rem 0; border-top:1px solid var(--line-soft);
}
.process-step:first-child { border-top:0; }
.step-number {
  font-family:var(--font-mono); font-size:.85rem; font-weight:600; color:var(--cyan);
  width:42px; height:42px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-strong); border-radius:10px; background:rgba(53,224,240,0.06);
}
.step-title, .step-text h4 { font-family:var(--font-display); font-size:1.02rem; color:var(--text); margin-bottom:.25rem; }
.step-text p { font-size:.9rem; color:var(--text-dim); margin:0; }
.process-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1rem; }
.process-grid .process-step { border:1px solid var(--line); border-radius:var(--r-md); padding:1.3rem; background:var(--panel); }

/* ---------- WHY CHOOSE / FEATURES ---------- */
.why-choose-us { background:var(--bg-950); }
.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:2.5rem; }
.feature-card {
  position:relative; padding:1.8rem; border-radius:var(--r-md);
  background:var(--grad-panel), var(--panel);
  border:1px solid var(--line); overflow:hidden;
  transition:transform var(--t-med), border-color var(--t-med), background var(--t-med);
}
.feature-card::before {
  content:""; position:absolute; left:0; top:0; width:100%; height:2px;
  background:var(--grad-accent); transform:scaleX(0); transform-origin:left; transition:transform var(--t-med);
}
.feature-card:hover { transform:translateY(-6px); border-color:var(--line-strong); }
.feature-card:hover::before { transform:scaleX(1); }
.feature-card h3 { font-size:1.12rem; margin-bottom:.5rem; }
.feature-card p { font-size:.9rem; color:var(--text-dim); margin:0; }
.feature-card .feature-index {
  font-family:var(--font-mono); font-size:.72rem; color:var(--cyan); letter-spacing:.1em; display:block; margin-bottom:.9rem;
}

/* ---------- APPLICATIONS ---------- */
.applications { background:linear-gradient(180deg, var(--bg-900), var(--bg-950)); }
.applications-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:2.5rem; }
.application-card {
  border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--panel);
  transition:transform var(--t-med), border-color var(--t-med), box-shadow var(--t-med);
}
.application-card:hover { transform:translateY(-6px); border-color:var(--line-strong); box-shadow:var(--shadow-md); }
.application-image {
  position:relative; aspect-ratio:16/10; overflow:hidden;
  display:flex; align-items:center; justify-content:center; color:var(--text-mute);
  font-family:var(--font-mono); font-size:.76rem; letter-spacing:.08em;
  background:
    radial-gradient(120% 100% at 20% 0%, rgba(59,130,246,0.16), transparent 55%),
    linear-gradient(160deg,#0f1620,#070b10);
  border-bottom:1px solid var(--line);
}
.application-image img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.application-card:hover .application-image img { transform:scale(1.04); transition:transform var(--t-slow); }
.application-image span {
  position:absolute; left:12px; bottom:12px; z-index:2;
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  padding:.34rem .62rem; border-radius:999px;
  background:rgba(5,7,10,0.72); border:1px solid rgba(255,255,255,0.2); color:var(--cyan);
  backdrop-filter:blur(6px);
}
.application-content { padding:1.3rem 1.4rem 1.5rem; }
.application-content h3 { font-size:1.1rem; margin-bottom:.4rem; }
.application-content p { font-size:.88rem; color:var(--text-dim); margin:0; }

/* ---------- TESTIMONIALS (only rendered when content exists) ---------- */
.testimonials { background:linear-gradient(180deg, var(--bg-950), var(--bg-900)); }
.testimonials-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.2rem; }
.testimonial {
  margin:0; padding:1.6rem; border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--grad-panel), var(--panel);
}
.testimonial blockquote {
  margin:0 0 1rem; font-size:1.02rem; color:var(--text); line-height:1.6; position:relative; padding-left:1.1rem;
}
.testimonial blockquote::before {
  content:"\201C"; position:absolute; left:-.1rem; top:-.4rem; font-family:var(--font-display);
  font-size:2.4rem; line-height:1; color:var(--cyan); opacity:.5;
}
.testimonial figcaption { display:flex; flex-direction:column; gap:.1rem; }
.testimonial__author { font-family:var(--font-display); font-weight:600; color:var(--text); font-size:.92rem; }
.testimonial__role { font-size:.82rem; color:var(--text-mute); }

/* ---------- QUALITY ---------- */
.quality { background:var(--bg-950); }
.quality-grid { display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.quality-image {
  aspect-ratio:4/5; border-radius:var(--r-lg); border:1px solid var(--line); overflow:hidden;
  background:
    conic-gradient(from 210deg at 60% 40%, rgba(53,224,240,0.18), transparent 40%, rgba(255,106,37,0.14) 70%, transparent),
    linear-gradient(160deg,#0f1620,#070b10);
  display:flex; align-items:center; justify-content:center; color:var(--text-mute);
  font-family:var(--font-mono); font-size:.8rem;
}
.quality-image img { width:100%; height:100%; object-fit:cover; }
.quality-checklist { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin-top:1.6rem; }
.quality-item {
  display:flex; align-items:center; gap:.75rem; padding:.85rem 1rem;
  border:1px solid var(--line); border-radius:var(--r-sm); background:rgba(255,255,255,0.015);
}
.quality-item::before {
  content:""; flex:none; width:9px; height:9px; border-radius:2px; background:var(--grad-accent);
  box-shadow:0 0 10px rgba(53,224,240,0.7);
}
.quality-item-text { margin:0; font-size:.88rem; color:var(--text); }

/* metric blocks (only used with real values) */
.metric-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1rem; margin-top:2rem; }
.metric { border:1px solid var(--line); border-radius:var(--r-md); padding:1.4rem; background:var(--panel); }
.metric__index { font-family:var(--font-mono); font-size:.72rem; color:var(--cyan); letter-spacing:.16em; }
.metric__value { font-family:var(--font-display); font-size:2rem; font-weight:600; margin:.4rem 0 .2rem; }
.metric__label { font-size:.82rem; color:var(--text-dim); }

/* ---------- CTA ---------- */
.cta-section {
  position:relative; overflow:hidden; border-radius:var(--r-xl);
  padding:clamp(3rem,7vw,6rem) clamp(1.5rem,5vw,4rem); text-align:center;
  background:linear-gradient(130deg, #0b1a2a 0%, #0a0f16 55%, #16100a 100%);
  border:1px solid var(--line);
}
.cta-section::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(50% 60% at 15% 20%, rgba(53,224,240,0.22), transparent 60%),
    radial-gradient(50% 60% at 85% 80%, rgba(255,106,37,0.2), transparent 60%);
}
.cta-section::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:60%;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 40px);
  -webkit-mask-image:linear-gradient(#000, transparent); mask-image:linear-gradient(#000, transparent);
}
.cta-section > * { position:relative; z-index:1; }
.cta-section h2 { font-size:clamp(2rem,4.5vw,3.4rem); margin-bottom:1rem; }
.cta-section p { color:var(--text-dim); max-width:560px; margin:0 auto 2rem; }
.cta-buttons { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ---------- FLOATING CONTACT ---------- */
.floating-contact { position:fixed; right:20px; bottom:20px; z-index:950; display:flex; flex-direction:column; gap:.7rem; }
.floating-btn {
  width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  color:#04121a; border:1px solid rgba(255,255,255,0.2);
  box-shadow:var(--shadow-md); transition:transform var(--t-fast), box-shadow var(--t-fast);
}
.floating-btn svg { width:22px; height:22px; }
.floating-btn.whatsapp { background:linear-gradient(135deg,#2bd66a,#12a552); color:#04140a; }
.floating-btn.call     { background:var(--grad-accent); }
.floating-btn.quote    { background:var(--grad-heat); color:#160a03; }
.floating-btn:hover { transform:translateY(-3px) scale(1.06); box-shadow:var(--shadow-lg), var(--glow-cyan); }

/* ---------- FOOTER ---------- */
.footer {
  position:relative; margin-top:0; padding:clamp(3.5rem,7vw,6rem) 0 2rem;
  background:linear-gradient(180deg, var(--bg-900), var(--bg-950));
  border-top:1px solid var(--line);
}
.footer::before {
  content:""; position:absolute; top:-1px; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--cyan), var(--orange), transparent); opacity:.5;
}
.footer-grid { display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:2.5rem; padding-bottom:2.5rem; border-bottom:1px solid var(--line); }
.footer-section h3, .footer-section h4 {
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-mute);
  margin-bottom:1.1rem; font-weight:500;
}
.footer-section ul { list-style:none; display:flex; flex-direction:column; gap:.6rem; }
.footer-section a { color:var(--text-dim); font-size:.9rem; }
.footer-section a:hover { color:#fff; }
.footer-section p { font-size:.88rem; color:var(--text-dim); margin-bottom:.5rem; }
.footer .brand, .footer-section .footer-brand {
  font-family:var(--font-display); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text);
  font-size:1.1rem; margin-bottom:1rem;
}
.footer-bottom {
  display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
  padding-top:1.8rem; font-size:.82rem; color:var(--text-mute);
}
.footer-links a, .footer-bottom a { color:var(--text-mute); margin-right:1.2rem; }
.footer-links a:hover, .footer-bottom a:hover { color:var(--cyan); }

/* ---------- SECONDARY-PAGE PRIMITIVES ---------- */
.breadcrumb { background:rgba(255,255,255,0.02); border-bottom:1px solid var(--line); padding:.9rem 0; font-size:.82rem; }
.breadcrumb a { color:var(--text-dim); } .breadcrumb a:hover { color:var(--cyan); }

.panel, .about-image, .highlight-item,
.resource-card, .contact-info-box, .contact-form-wrapper {
  background:var(--grad-panel), var(--panel);
  border:1px solid var(--line); border-radius:var(--r-md);
}
.about-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.about-image { aspect-ratio:4/3; overflow:hidden; display:flex; align-items:center; justify-content:center; color:var(--text-mute); }
.about-image:has(img[style*="display: none"])::after, .about-image:has(img[style*="display:none"])::after { content:"WIREZEN INDUSTRIES"; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.2em; opacity:.4; }
.about-image img { width:100%; height:100%; object-fit:cover; }
.about-highlights { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.highlight-item { padding:1.2rem; }
.highlight-item h4 { font-size:.95rem; margin-bottom:.4rem; color:var(--text); }
.highlight-item p { font-size:.85rem; color:var(--text-dim); margin:0; }

.benefits-grid, .industries-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:2rem; }
.benefit-card, .industry-card {
  padding:1.6rem; border-radius:var(--r-md);
  background:var(--grad-panel), var(--panel); border:1px solid var(--line);
  transition:transform var(--t-med), border-color var(--t-med);
}
.benefit-card:hover, .industry-card:hover { transform:translateY(-5px); border-color:var(--line-strong); }
.benefit-card h3, .industry-card h3 { font-size:1.05rem; margin-bottom:.5rem; }
.benefit-card p, .industry-card p { font-size:.88rem; color:var(--text-dim); margin:0; }

.faq-grid { display:flex; flex-direction:column; gap:.8rem; }
.faq-item { border:1px solid var(--line); border-radius:var(--r-md); padding:1.3rem 1.5rem; background:var(--panel); }
.faq-question { font-size:1rem; margin-bottom:.5rem; color:var(--text); }
.faq-answer { font-size:.9rem; color:var(--text-dim); margin:0; }

.resource-card { padding:1.6rem; text-align:center; transition:transform var(--t-med), border-color var(--t-med); }
.resource-card:hover { transform:translateY(-5px); border-color:var(--line-strong); }
.resource-card h3 { font-size:1.02rem; margin-bottom:.6rem; }
.resource-card p { font-size:.86rem; color:var(--text-dim); margin-bottom:1.1rem; }
.download-btn { padding:.7rem 1.2rem; font-size:.85rem; }

.contact-info-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.2rem; margin-top:1.5rem; }
.contact-info-box { padding:1.4rem; }
.contact-info-box h3 { font-size:.95rem; margin-bottom:.6rem; color:var(--text); }
.contact-info-box p { font-size:.88rem; color:var(--text-dim); }
.map-container { border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; margin-top:1.5rem; filter:grayscale(.3) contrast(1.05); }

/* forms */
input, select, textarea,
.form-input, .form-select, .form-textarea {
  width:100%; font-family:inherit; font-size:.95rem; color:var(--text);
  background:rgba(255,255,255,0.03); border:1px solid var(--line-strong); border-radius:var(--r-sm);
  padding:.8rem .9rem; transition:border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
input::placeholder, textarea::placeholder { color:var(--text-mute); }
input:focus, select:focus, textarea:focus,
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline:none; border-color:var(--cyan); background:rgba(53,224,240,0.05);
  box-shadow:0 0 0 3px rgba(53,224,240,0.14);
}
select option { background:var(--bg-800); color:var(--text); }
label, .form-label { color:var(--text); font-weight:500; font-size:.9rem; }
.form-required { color:var(--orange); }
.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.2rem; }
.form-full { grid-column:1 / -1; }
.form-section-title { font-family:var(--font-display); font-size:1.1rem; margin:2rem 0 1rem; padding-bottom:.8rem; border-bottom:1px solid var(--line-strong); }
.form-group { margin-bottom:1.2rem; }
.success-message { border-radius:var(--r-md) !important; border:1px solid rgba(43,214,106,0.4); }
/* spam honeypot — visually and semantically hidden, still in the DOM for bots */
.hp-field { position:absolute !important; left:-9999px !important; top:-9999px !important; width:1px; height:1px; overflow:hidden; }

/* legal pages */
.legal-content { max-width:820px; margin:0 auto; }
.legal-content h2 { font-size:1.35rem; margin:2rem 0 .8rem; }
.legal-content h3 { font-size:1.05rem; margin:1.4rem 0 .6rem; }
.legal-content p, .legal-content li { color:var(--text-dim); line-height:1.8; }
.legal-content ul { margin:1rem 0 1rem 1.4rem; }

/* generic tables on dark */
table { width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
th, td { padding:.9rem 1rem; text-align:left; border-bottom:1px solid var(--line-soft); font-size:.9rem; }
thead th { background:rgba(255,255,255,0.04); font-family:var(--font-mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); }
tbody tr:last-child td { border-bottom:0; }
tbody tr:nth-child(even) td { background:rgba(255,255,255,0.03); }
td { color:var(--text-dim); }
td:first-child { color:var(--text); font-weight:500; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:1080px) {
  .products-grid, .manufacturing-grid, .quality-grid, .about-grid { grid-template-columns:1fr; }
  .features-grid, .applications-grid, .benefits-grid, .industries-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .manufacturing-image, .quality-image { aspect-ratio:16/10; }
}
@media (max-width:820px) {
  .nav-list { display:none; }
  .menu-toggle { display:block; }
  .site-header .nav.active, .header .nav.active {
    position:absolute; top:74px; left:0; right:0; display:block;
    background:rgba(8,11,16,0.97); backdrop-filter:blur(16px); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    padding:1rem clamp(1.15rem,4vw,2.4rem) 1.4rem;
  }
  .site-header .nav.active .nav-list, .header .nav.active .nav-list { display:flex; flex-direction:column; align-items:stretch; gap:.2rem; }
  .nav.active .nav-link { padding:.85rem .4rem; font-size:1rem; }
  .nav.active .dropdown-menu { position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; background:transparent; padding:0 0 .4rem 1rem; }
  /* keep a compact quote button in the header on mobile instead of hiding it */
  .header-cta { gap:.6rem; }
  .header-cta [data-magnetic] .btn, .header-cta .btn, .header-cta .btn-primary { padding:.5rem .8rem; font-size:.76rem; }
  .header-cta [data-magnetic] { transform:none !important; }
  .hero { padding-top:112px; padding-bottom:74px; text-align:left; }
  .hero__canvas { display:none; }
  .hero::after { background:linear-gradient(180deg, rgba(5,7,10,0.32), rgba(5,7,10,0.72)); }
  .hero__glow { filter:blur(60px); opacity:.4; }
  .hero__glow--cyan { width:280px; height:280px; }
  .hero__glow--orange { width:260px; height:260px; }
  .hero__inner { max-width:100%; }
  .cta-buttons .btn { width:100%; }
  .product-cta { flex-direction:column; }
}

/* ==================== MOBILE ==================== */
@media (max-width:820px) {
  /* no horizontal overflow, ever */
  html, body { max-width:100%; overflow-x:hidden; }
  img, svg, video, iframe, table { max-width:100%; }

  /* inline 2-column grids on secondary pages -> single column */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: repeat(2"] { grid-template-columns:1fr !important; gap:1.4rem !important; }

  /* oversized inline page-title headings */
  h1[style*="2.5rem"] { font-size:1.85rem !important; line-height:1.15; }
  [style*="font-size: 1.125rem"] { font-size:1rem !important; }

  /* form action buttons must not overflow */
  [style*="min-width: 200px"] { min-width:0 !important; width:100% !important; flex:1 1 100% !important; }

  /* tap targets */
  .btn, .btn-primary, .btn-secondary, .btn--primary, .btn--ghost, .btn--heat,
  .download-btn, .nav-link, .floating-btn, input, select, textarea, button { min-height:44px; }
  .nav-link { display:flex; align-items:center; }
  /* >=16px stops iOS Safari from zooming the page when a field is focused */
  input, select, textarea, .form-input, .form-select, .form-textarea { font-size:16px; }

  /* stacked hero CTAs full width */
  .hero__cta, .cta-buttons { flex-direction:column; align-items:stretch; width:100%; }
  .hero__cta [data-magnetic], .cta-buttons [data-magnetic] { width:100%; }
  .hero__cta [data-magnetic] .btn, .cta-buttons [data-magnetic] .btn, .hero__cta .btn { width:100%; }

  /* section rhythm */
  .section { padding-block:clamp(3rem,10vw,4.2rem); }
  #main section[style*="padding: 3rem 0"] { padding-block:2.4rem !important; }
  #main + section, #main + .breadcrumb, #main + div { margin-top:74px; }
  .container, .u-container { padding-inline:1.15rem; }

  /* tables: allow horizontal scroll, tighten cells */
  #main div[style*="overflow-x: auto"], .table-scroll { -webkit-overflow-scrolling:touch; }
  table { font-size:.82rem; }
  th, td, td[style], th[style] { padding:.6rem .55rem !important; }

  .map-container { height:280px; }
  .manufacturing-image, .quality-image { aspect-ratio:4/3; }
  .product-image { aspect-ratio:16/11; }
  .cta-section { padding:2.6rem 1.2rem; }
  .cta-section h2 { font-size:clamp(1.7rem,7vw,2.3rem); }
  .industrial-banner { padding:1.6rem 1.2rem; }
  .banner-text { font-size:clamp(.85rem,3.6vw,1.15rem); letter-spacing:.1em; }
}

@media (max-width:560px) {
  :root { --pad-section:3.4rem; }
  .features-grid, .applications-grid, .benefits-grid, .industries-grid,
  .about-highlights, .quality-checklist, .contact-info-grid,
  .process-grid { grid-template-columns:1fr !important; }
  .footer-grid { grid-template-columns:1fr; gap:1.8rem; }
  .footer-bottom { flex-direction:column; align-items:flex-start; gap:.8rem; }
  .footer-links a { display:inline-block; margin:0 1rem .4rem 0; }
  .floating-contact { right:12px; bottom:12px; gap:.55rem; }
  .floating-btn { width:46px; height:46px; }
  .hero__title { font-size:clamp(2rem,9vw,2.7rem); }
  .hero__lead { font-size:1rem; }
  .section-header h2, h2 { font-size:clamp(1.6rem,6.5vw,2.1rem); }
  .logo a { font-size:.95rem; }
  .brand__logo { height:34px; }
  .breadcrumb { font-size:.78rem; }
  .breadcrumb .container { display:flex; flex-wrap:wrap; gap:.15rem; }
}

@media (max-width:380px) {
  /* free up header space: logo mark only, no wordmark */
  .logo a { font-size:0; gap:0; }
  .header-cta [data-magnetic] .btn, .header-cta .btn { font-size:.72rem; padding:.5rem .7rem; }
  .site-header__inner, .header .container, .header-content { padding-inline:.9rem; }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .hero__grid, .hero__scan, .hero__scrollcue::after { animation:none !important; }
  [data-reveal], [data-hero], [data-stagger] > * { opacity:1 !important; transform:none !important; }
  .hero__canvas { display:none !important; }
}

/* ---------- FIXED-HEADER OFFSET (secondary pages) ---------- */
#main + .breadcrumb, #main + section, #main + div { margin-top:74px; }
[id] { scroll-margin-top:92px; }
/* secondary-page title band */
#main + section[style*="border-bottom"], #main + .breadcrumb + .hero {
  background:linear-gradient(180deg, #0c1826, var(--bg-950)) !important;
  border-bottom:1px solid var(--line) !important;
  padding-block:clamp(2.6rem,6vw,4.5rem) !important;
}
#main + section h1 { font-family:var(--font-display); }

/* ---------- FOCUS ---------- */
:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; border-radius:3px; }
.skip-link {
  position:absolute; left:12px; top:-60px; z-index:2000; background:var(--cyan); color:#04121a;
  padding:.6rem 1rem; border-radius:8px; font-weight:600; transition:top var(--t-fast);
}
.skip-link:focus { top:12px; }