/* ==========================================================================
   ALX — E-Bike Battery Case & Housing Manufacturer
   Global Design System
   --------------------------------------------------------------------------
   Theme: dark industrial / energy
   Accent: electric lime (#C8F135)
   Zero dependencies. No external fonts. No external images.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces */
  --bg:          #0A0D12;
  --bg-2:        #101620;
  --surface:     #161D28;
  --surface-2:   #1D2634;
  --surface-3:   #253040;

  /* Lines */
  --line:        rgba(255, 255, 255, 0.08);
  --line-2:      rgba(255, 255, 255, 0.14);
  --line-3:      rgba(255, 255, 255, 0.24);

  /* Text */
  --text:        #EAEEF4;
  --text-2:      #9AA6B6;
  --text-3:      #6A7686;
  --text-inv:    #0A0D12;

  /* Brand */
  --accent:      #C8F135;
  --accent-dim:  #A8CE22;
  --accent-soft: rgba(200, 241, 53, 0.12);
  --mint:        #5FE3A1;
  --mint-soft:   rgba(95, 227, 161, 0.12);
  --orange:      #FF8A3D;
  --orange-soft: rgba(255, 138, 61, 0.13);
  --blue:        #5AA9FF;
  --blue-soft:   rgba(90, 169, 255, 0.12);
  --red:         #FF5F5F;

  /* Light island (used for contrast sections) */
  --paper:       #F4F6F8;
  --paper-2:     #E8ECF1;
  --ink:         #0D1219;
  --ink-2:       #4A5563;

  /* Geometry */
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;
  --r-xl: 24px;

  --maxw: 1220px;
  --gutter: 24px;

  /* Type */
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono",
          Menlo, Consolas, monospace;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px -8px rgba(0,0,0,.5);
  --shadow-lg: 0 24px 64px -16px rgba(0,0,0,.7);
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }

h1, h2, h3, h4, h5 {
  margin: 0 0 .6em;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.022em;
}
h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); }
h2 { font-size: clamp(1.65rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
h4 { font-size: 1.06rem; letter-spacing: -0.01em; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--accent); color: var(--text-inv); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: 880px; }
.wrap-wide { max-width: 1400px; }

section { padding: clamp(56px, 8vw, 104px) 0; position: relative; }
.sec-tight { padding: clamp(40px, 5vw, 64px) 0; }

.sec-head { max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px); }
.sec-head.center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .74rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: ""; width: 22px; height: 2px; background: var(--accent); border-radius: 2px;
}
.sec-head.center .eyebrow::before { display: none; }

.lead { font-size: clamp(1rem, 1.6vw, 1.14rem); color: var(--text-2); line-height: 1.7; }
.lead strong { color: var(--text); font-weight: 600; }

.grid { display: grid; gap: 22px; }
/* min() keeps the track from forcing a 320px minimum inside a 272px content
   column, which is what pushed .card past the viewport on a 320px screen */
.g-2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
/* forces two columns even inside a narrow column, e.g. pair of figures
   sitting beside a text block where the 320px minimum would not fit twice */
.g-2-fixed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(auto-fit, minmax(min(268px, 100%), 1fr)); }
.g-4 { grid-template-columns: repeat(auto-fit, minmax(206px, 1fr)); }
.g-5 { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }

.bg-alt { background: var(--bg-2); }
.bg-paper { background: var(--paper); color: var(--ink); }
.bg-paper h1, .bg-paper h2, .bg-paper h3, .bg-paper h4 { color: var(--ink); }
.bg-paper .lead, .bg-paper p { color: var(--ink-2); }
.bg-paper .eyebrow { color: #5C7A0F; }
.bg-paper .eyebrow::before { background: #5C7A0F; }

.divider { height: 1px; background: var(--line); border: 0; margin: 0; }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 24px; border-radius: var(--r-sm);
  font-size: .93rem; font-weight: 700; letter-spacing: .01em;
  white-space: nowrap;
  transition: transform .16s var(--ease), background .16s, border-color .16s, color .16s, box-shadow .16s;
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--accent); color: var(--text-inv); }
.btn-primary:hover { background: #DAFF55; box-shadow: 0 8px 28px -6px rgba(200,241,53,.45); }

.btn-outline { border: 1px solid var(--line-3); color: var(--text); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

.btn-ghost { color: var(--text-2); padding-inline: 12px; }
.btn-ghost:hover { color: var(--accent); }

.btn-sm { padding: 9px 16px; font-size: .84rem; }
.btn-lg { padding: 16px 32px; font-size: 1rem; }
.btn-block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* --------------------------------------------------------------------------
   5. Badges / pills / chips
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 100px;
  font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  background: var(--surface-3); color: var(--text-2); border: 1px solid var(--line-2);
}
.badge svg { width: 12px; height: 12px; }
.badge-accent { background: var(--accent-soft); color: var(--accent); border-color: rgba(200,241,53,.32); }
.badge-mint   { background: var(--mint-soft);   color: var(--mint);   border-color: rgba(95,227,161,.3); }
.badge-orange { background: var(--orange-soft); color: var(--orange); border-color: rgba(255,138,61,.3); }
.badge-blue   { background: var(--blue-soft);   color: var(--blue);   border-color: rgba(90,169,255,.3); }
.bg-paper .badge { background: #fff; border-color: #D3DAE3; color: var(--ink-2); }

.dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--mint);
  box-shadow: 0 0 0 0 rgba(95,227,161,.6); animation: pulse 2.2s infinite;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 8px rgba(95,227,161,0); }
  100% { box-shadow: 0 0 0 0 rgba(95,227,161,0); }
}

.chip-row { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  padding: 8px 16px; border-radius: 100px;
  border: 1px solid var(--line-2); background: transparent;
  color: var(--text-2); font-size: .85rem; font-weight: 600;
  transition: all .16s var(--ease);
}
.chip:hover { border-color: var(--line-3); color: var(--text); }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--text-inv); }

/* --------------------------------------------------------------------------
   6. Top bar + header
   -------------------------------------------------------------------------- */
.topbar {
  background: #06080B; border-bottom: 1px solid var(--line);
  font-size: .78rem; color: var(--text-3);
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 40px; }
.topbar-list { display: flex; align-items: center; gap: 20px; list-style: none; margin: 0; padding: 0; }
.topbar-list a { display: inline-flex; align-items: center; gap: 6px; transition: color .14s; }
.topbar-list a:hover { color: var(--accent); }
.topbar-list svg { width: 13px; height: 13px; opacity: .7; }
.topbar-hide-sm { display: none; }
@media (min-width: 860px) { .topbar-hide-sm { display: flex; } }

.site-header {
  position: sticky; top: 0; z-index: 70;
  background: rgba(10,13,18,.82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: background .2s, box-shadow .2s;
}
.site-header.stuck { background: rgba(10,13,18,.96); box-shadow: 0 10px 30px -16px rgba(0,0,0,.9); }
.site-header .wrap { display: flex; align-items: center; gap: 28px; height: 72px; }

/* Logo */
.logo { display: flex; align-items: center; gap: 11px; flex: none; }
.logo-mark {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  background: linear-gradient(150deg, var(--accent), #7CC71A);
  display: grid; place-items: center; color: var(--text-inv);
  box-shadow: 0 4px 16px -4px rgba(200,241,53,.5);
}
/* The mark is a frame with cells inside, so it reads smaller than the old solid
   bolt at the same box size — 21px rather than 19px restores the optical weight. */
/* 24px in a 34px plate: the mark is a frame with cells inside, and at 21px the
   lime padding read as a mistake rather than a margin. */
.logo-mark svg { width: 24px; height: 24px; }
.logo-text { line-height: 1.1; }
/* Two lines, because the legal name is 46 characters: a single line would either
   be unreadably small or overflow a 375px viewport. */
.logo-name {
  display: block; font-size: .88rem; font-weight: 700;
  letter-spacing: .028em; text-transform: uppercase; white-space: nowrap;
}
.logo-sub {
  display: block; margin-top: 3px; font-size: .5rem; font-weight: 700;
  letter-spacing: .115em; text-transform: uppercase; color: var(--text-3); white-space: nowrap;
}
@media (max-width: 560px) {
  .logo-name { font-size: .8rem; }
  .logo-sub { font-size: .44rem; letter-spacing: .045em; }
}
@media (max-width: 400px) {
  /* The legal line stays visible even at 320px: measured, it needs ~145px and
     the header has ~230px for it beside the burger. Hiding it would mean the
     company name disappears on exactly the screens where it is the only
     identity on show. */
  .logo-name { font-size: .78rem; }
}

/* Nav */
.nav { display: none; align-items: center; gap: 4px; margin-left: auto; }
@media (min-width: 1000px) { .nav { display: flex; } }
.nav-item { position: relative; }
.nav-link {
  display: flex; align-items: center; gap: 5px;
  padding: 10px 13px; border-radius: var(--r-sm);
  font-size: .89rem; font-weight: 600; color: var(--text-2);
  transition: color .14s, background .14s;
}
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--text); background: rgba(255,255,255,.05); }
.nav-link[aria-current="page"] { color: var(--accent); }
.nav-link svg { width: 13px; height: 13px; opacity: .6; transition: transform .18s; }
.nav-item:hover .nav-link svg { transform: rotate(180deg); }

.dropdown {
  position: absolute; top: calc(100% + 10px); left: 0;
  min-width: 290px; padding: 10px;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: all .18s var(--ease); z-index: 90;
}
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 10px 12px; border-radius: var(--r-sm); transition: background .14s;
}
.dropdown a:hover { background: var(--surface-2); }
.dd-ic {
  width: 32px; height: 32px; border-radius: 8px; flex: none;
  display: grid; place-items: center; background: var(--surface-3); color: var(--accent);
}
.dd-ic svg { width: 16px; height: 16px; }
.dd-t { display: block; font-size: .87rem; font-weight: 600; color: var(--text); }
.dd-d { display: block; margin-top: 2px; font-size: .76rem; color: var(--text-3); line-height: 1.4; }

.header-cta { display: none; margin-left: 8px; }
@media (min-width: 1000px) { .header-cta { display: inline-flex; } }

/* Burger */
.burger {
  display: grid; place-items: center; width: 42px; height: 42px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm); margin-left: auto;
}
@media (min-width: 1000px) { .burger { display: none; } }
.burger span { display: block; width: 18px; height: 2px; background: var(--text); border-radius: 2px; position: relative; transition: .2s; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--text); border-radius: 2px; transition: .2s;
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
body.nav-open .burger span { background: transparent; }
body.nav-open .burger span::before { transform: rotate(45deg); top: 0; }
body.nav-open .burger span::after { transform: rotate(-45deg); top: 0; }

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 80;
  background: var(--bg); overflow-y: auto;
  padding: 100px 24px 48px;
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: all .22s var(--ease);
}
body.nav-open .drawer { opacity: 1; visibility: visible; transform: translateY(0); }
.drawer-group { border-bottom: 1px solid var(--line); padding: 6px 0; }
.drawer-group > a { display: block; padding: 14px 2px; font-size: 1.05rem; font-weight: 700; }
.drawer-sub { display: flex; flex-direction: column; gap: 2px; padding: 0 0 14px 4px; }
.drawer-sub a { font-size: .9rem; color: var(--text-2); padding: 7px 0; }
.drawer-sub a:hover { color: var(--accent); }
.drawer .btn { margin-top: 24px; }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(56px, 9vw, 108px) 0 clamp(48px, 7vw, 88px);
  background:
    radial-gradient(900px 520px at 78% -10%, rgba(200,241,53,.16), transparent 62%),
    radial-gradient(700px 480px at 8% 100%, rgba(90,169,255,.11), transparent 60%),
    var(--bg);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 75%);
}
.hero .wrap { position: relative; z-index: 2; }
.hero-grid { display: grid; gap: clamp(36px, 5vw, 60px); align-items: center; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: 1.06fr .94fr; } }

.hero h1 { margin-bottom: 20px; }
.hero h1 .hl {
  color: var(--accent); position: relative; white-space: nowrap;
}
.hero h1 .hl::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .04em; height: .3em;
  background: var(--accent-soft); border-radius: 3px; z-index: -1;
}
.hero-lead { font-size: clamp(1rem, 1.7vw, 1.16rem); color: var(--text-2); max-width: 560px; margin-bottom: 28px; }

.hero-stats {
  display: flex; flex-wrap: wrap; gap: clamp(18px, 3vw, 34px);
  margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line);
}
.hstat-n { font-family: var(--mono); font-size: clamp(1.4rem, 2.4vw, 1.85rem); font-weight: 700; color: var(--accent); letter-spacing: -0.03em; line-height: 1; }
.hstat-l { font-size: .76rem; color: var(--text-3); margin-top: 6px; }

/* Hero product art */
.hero-art { position: relative; }
.hero-art svg { width: 100%; height: auto; filter: drop-shadow(0 30px 60px rgba(0,0,0,.6)); }

.float-card {
  position: absolute; padding: 11px 15px;
  background: rgba(22,29,40,.92); backdrop-filter: blur(10px);
  border: 1px solid var(--line-2); border-radius: var(--r);
  box-shadow: var(--shadow); font-size: .78rem; font-weight: 600;
  display: flex; align-items: center; gap: 9px; white-space: nowrap;
}
.float-card svg { width: 15px; height: 15px; color: var(--accent); }
.fc-1 { top: 6%; left: -3%; animation: bob 5s ease-in-out infinite; }
.fc-2 { bottom: 1%; right: -5%; animation: bob 5s ease-in-out infinite .9s; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (max-width: 640px) { .float-card { display: none; } }

/* --------------------------------------------------------------------------
   8. Trust bar
   -------------------------------------------------------------------------- */
.trustbar { border-block: 1px solid var(--line); background: #06080B; padding: 22px 0; }
.trustbar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(18px, 4vw, 48px); }
.trust-item {
  display: flex; align-items: center; gap: 9px;
  font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3);
  transition: color .18s;
}
.trust-item:hover { color: var(--text-2); }
.trust-item svg { width: 17px; height: 17px; color: var(--accent); opacity: .85; }

/* --------------------------------------------------------------------------
   9. Cards
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(22px, 2.6vw, 30px);
  transition: border-color .2s, transform .2s var(--ease), background .2s;
}
.card:hover { border-color: var(--line-2); }
.card-lift:hover { transform: translateY(-4px); border-color: var(--line-3); background: var(--surface-2); }
.bg-paper .card { background: #fff; border-color: #E2E7ED; box-shadow: 0 1px 3px rgba(16,24,40,.06); }
.bg-paper .card:hover { border-color: #CBD4DE; }

.card-ic {
  width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); margin-bottom: 16px;
  border: 1px solid rgba(200,241,53,.2);
}
.card-ic svg { width: 21px; height: 21px; }
.card-ic.mint { background: var(--mint-soft); color: var(--mint); border-color: rgba(95,227,161,.22); }
.card-ic.blue { background: var(--blue-soft); color: var(--blue); border-color: rgba(90,169,255,.22); }
.card-ic.orange { background: var(--orange-soft); color: var(--orange); border-color: rgba(255,138,61,.22); }

.card h3 { margin-bottom: 8px; }
.card p { color: var(--text-2); font-size: .92rem; }
.bg-paper .card p { color: var(--ink-2); }

/* Numbered step card */
.card-num {
  font-family: var(--mono); font-size: .74rem; font-weight: 700; letter-spacing: .1em;
  color: var(--accent); margin-bottom: 14px; display: block;
}
.bg-paper .card-num { color: #5C7A0F; }

/* --------------------------------------------------------------------------
   10. Product grid
   -------------------------------------------------------------------------- */
.p-card {
  /* position:relative is load-bearing. The stretched link below is
     `position:absolute; inset:0`, and without a positioned ancestor here its
     containing block becomes <section> (which is position:relative). It only
     stays inside the card because overflow:hidden happens to clip it — an
     accident of CSS clipping rules, not a design. Make the containing block
     explicit so the hit target cannot silently swell to the whole section. */
  position: relative;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column;
  transition: transform .22s var(--ease), border-color .2s, box-shadow .22s;
}
.p-card:hover { transform: translateY(-5px); border-color: var(--line-3); box-shadow: var(--shadow); }
/* stretched link: makes the whole card a hit target while the footer button
   keeps its own, higher z-index destination */
.p-card-link::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: var(--r-lg); }
.p-foot .btn { position: relative; z-index: 3; }
.p-thumb {
  position: relative; aspect-ratio: 1 / 1;
  /* Light plate behind the product renders. They ship on white, and a white
     photo sitting directly on a dark card reads as a hole punched in the page. */
  background: linear-gradient(170deg, #F3F6FA, #FFFFFF 46%, #E5EAF1);
  display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid var(--line);
}
.p-thumb img {
  width: 82%; height: 82%; object-fit: contain;
  /* multiply drops the render's white backdrop into the plate behind it, so
     the photo reads as a product on a surface rather than a pasted rectangle.
     No drop-shadow: the render is opaque, so a shadow would trace its bounding
     box and reintroduce exactly the rectangle we just removed. */
  mix-blend-mode: multiply;
  transition: transform .38s var(--ease);
}
.p-card:hover .p-thumb img { transform: scale(1.045); }
.p-thumb svg { width: 84%; height: auto; }
.p-tag { position: absolute; top: 12px; left: 12px; z-index: 2; }
.p-tag-r { position: absolute; top: 12px; right: 12px; z-index: 2; }
.p-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.p-model { font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .09em; color: var(--accent); margin-bottom: 7px; }
.p-title { font-size: 1.06rem; font-weight: 700; margin: 0 0 8px; letter-spacing: -0.01em; }
.p-desc { font-size: .85rem; color: var(--text-2); margin: 0 0 16px; flex: 1; }
.p-specs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.p-spec {
  font-family: var(--mono); font-size: .7rem; padding: 3px 8px;
  background: var(--surface-3); border-radius: var(--r-sm); color: var(--text-2);
}
.p-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px 12px; padding-top: 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.p-moq { font-size: .78rem; color: var(--text-3); }
.p-moq b { color: var(--text); font-family: var(--mono); font-size: .85rem; }
.p-moq { white-space: nowrap; }

/* --------------------------------------------------------------------------
   10b. Series card with product render
   --------------------------------------------------------------------------
   White-background renders sit on a light plate (same treatment as the product
   grid) so the photo reads as a product on a surface, not a pasted rectangle.
   -------------------------------------------------------------------------- */
.series-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.series-thumb {
  aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(170deg, #F3F6FA, #FFFFFF 46%, #E5EAF1);
  border-bottom: 1px solid var(--line);
}
.series-thumb img {
  width: 74%; height: 74%; object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform .42s var(--ease);
}
.series-card:hover .series-thumb img { transform: scale(1.06); }
.series-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.series-body p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   11. Spec table
   -------------------------------------------------------------------------- */
.spec-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
table.spec { width: 100%; border-collapse: collapse; min-width: 480px; font-size: .89rem; }
table.spec th, table.spec td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); }
table.spec thead th {
  background: var(--surface-2); font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-3);
  position: sticky; top: 0;
}
table.spec tbody tr:last-child td { border-bottom: 0; }
table.spec tbody tr:hover { background: rgba(255,255,255,.028); }
table.spec td:first-child { color: var(--text-2); width: 38%; }
table.spec td:last-child { font-family: var(--mono); font-size: .84rem; }
.bg-paper table.spec { background: #fff; border-color: #E2E7ED; }
.bg-paper table.spec th, .bg-paper table.spec td { border-color: #E8ECF1; color: var(--ink); }
.bg-paper table.spec thead th { background: var(--paper-2); color: var(--ink-2); }
.bg-paper table.spec td:first-child { color: var(--ink-2); }

/* --------------------------------------------------------------------------
   12. Feature split (text + art)
   -------------------------------------------------------------------------- */
.split { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split.rev > *:first-child { order: 2; } }

.check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; font-size: .93rem; color: var(--text-2); }
.check-list li b { color: var(--text); font-weight: 600; }
.check-list svg { width: 19px; height: 19px; flex: none; color: var(--accent); margin-top: 2px; }
.bg-paper .check-list li { color: var(--ink-2); }
.bg-paper .check-list li b { color: var(--ink); }
.bg-paper .check-list svg { color: #5C7A0F; }

/* auto-fit left the fourth figure orphaned on its own row: the strip lives in a
   half-width column where four 140px tracks do not fit. Pin it to 2x2. */
.stat-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.stat-cell { background: var(--surface); padding: 26px 20px; }
.stat-n { font-family: var(--mono); font-size: clamp(1.5rem, 3vw, 2.05rem); font-weight: 700; color: var(--accent); letter-spacing: -0.035em; line-height: 1; }
.stat-l { font-size: .78rem; color: var(--text-3); margin-top: 8px; }
.bg-paper .stat-strip { background: #E2E7ED; border-color: #E2E7ED; }
.bg-paper .stat-cell { background: #fff; }
.bg-paper .stat-n { color: #5C7A0F; }
.bg-paper .stat-l { color: var(--ink-2); }

/* --------------------------------------------------------------------------
   13. Process / steps
   -------------------------------------------------------------------------- */
.steps { display: grid; gap: 0; counter-reset: s; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { padding: 26px 22px; border: 1px solid var(--line); border-right: 0; background: var(--surface); position: relative; }
.step:first-child { border-radius: var(--r-lg) 0 0 var(--r-lg); }
.step:last-child { border-right: 1px solid var(--line); border-radius: 0 var(--r-lg) var(--r-lg) 0; }
@media (max-width: 859px) {
  .step { border-right: 1px solid var(--line); border-bottom: 0; }
  .step:first-child { border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .step:last-child { border-bottom: 1px solid var(--line); border-radius: 0 0 var(--r-lg) var(--r-lg); }
}
.step::before {
  counter-increment: s; content: "0" counter(s);
  font-family: var(--mono); font-size: .74rem; font-weight: 700; color: var(--accent);
  display: block; margin-bottom: 12px; letter-spacing: .08em;
}
.step h4 { margin-bottom: 7px; }
.step p { font-size: .85rem; color: var(--text-2); margin: 0; }
.step-note { font-family: var(--mono); font-size: .72rem; color: var(--text-3); margin-top: 12px; display: block; }

/* --------------------------------------------------------------------------
   14. Certificates
   -------------------------------------------------------------------------- */
.cert-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.cert {
  border: 1px solid var(--line); border-radius: var(--r); padding: 20px 16px; text-align: center;
  background: var(--surface); transition: border-color .2s, background .2s;
}
.cert:hover { border-color: rgba(200,241,53,.34); background: var(--surface-2); }
.cert-ic { width: 40px; height: 40px; margin: 0 auto 12px; display: grid; place-items: center; color: var(--accent); }
.cert-ic svg { width: 30px; height: 30px; }
.cert-n { font-size: .86rem; font-weight: 700; }
.cert-d { font-size: .72rem; color: var(--text-3); margin-top: 4px; }

/* --------------------------------------------------------------------------
   15. Forms
   -------------------------------------------------------------------------- */
.form-card {
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-xl); padding: clamp(26px, 3.6vw, 44px);
  box-shadow: var(--shadow);
}
.form-grid { display: grid; gap: 18px; }
@media (min-width: 700px) { .form-grid.cols-2 { grid-template-columns: 1fr 1fr; } .span-2 { grid-column: 1 / -1; } }

.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: .8rem; font-weight: 600; color: var(--text-2); letter-spacing: .01em; }
.field label .req { color: var(--accent); }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px;
  background: var(--bg-2); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); font-size: .92rem; color: var(--text);
  transition: border-color .16s, background .16s, box-shadow .16s;
}
.field textarea { resize: vertical; min-height: 118px; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-color: var(--accent); background: var(--bg);
  box-shadow: 0 0 0 3px rgba(200,241,53,.14);
}
.field select {
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA6B6' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 16px; padding-right: 40px;
}
.field .hint { font-size: .74rem; color: var(--text-3); }
.field.err input, .field.err select, .field.err textarea { border-color: var(--red); }
.field .err-msg { font-size: .74rem; color: var(--red); display: none; }
.field.err .err-msg { display: block; }

.file-drop {
  border: 1.5px dashed var(--line-3); border-radius: var(--r);
  padding: 24px 18px; text-align: center; cursor: pointer;
  transition: border-color .18s, background .18s; background: var(--bg-2);
}
.file-drop:hover, .file-drop.drag { border-color: var(--accent); background: var(--accent-soft); }
.file-drop svg { width: 24px; height: 24px; color: var(--accent); margin: 0 auto 9px; }
.file-drop-t { font-size: .86rem; font-weight: 600; }
.file-drop-d { font-size: .74rem; color: var(--text-3); margin-top: 4px; }
.file-drop input[type="file"] { display: none; }

.checkline { display: flex; gap: 10px; align-items: flex-start; font-size: .8rem; color: var(--text-3); }
.checkline input { width: auto; margin-top: 3px; accent-color: var(--accent); flex: none; }
.checkline a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.form-note {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 13px 15px; border-radius: var(--r-sm);
  background: var(--accent-soft); border: 1px solid rgba(200,241,53,.24);
  font-size: .79rem; color: var(--text-2); line-height: 1.55;
}
.form-note svg { width: 16px; height: 16px; color: var(--accent); flex: none; margin-top: 1px; }

/* Form states */
.form-ok, .form-fail {
  display: none; align-items: flex-start; gap: 12px;
  padding: 16px 18px; border-radius: var(--r);
  font-size: .88rem; margin-bottom: 22px;
}
.form-ok { background: var(--mint-soft); border: 1px solid rgba(95,227,161,.3); color: var(--mint); }
.form-fail { background: rgba(255,95,95,.1); border: 1px solid rgba(255,95,95,.3); color: var(--red); }
.form-ok svg, .form-fail svg { width: 19px; height: 19px; flex: none; margin-top: 1px; }
.form-ok.on, .form-fail.on { display: flex; }
.form-ok b, .form-fail b { display: block; margin-bottom: 2px; }

/* --------------------------------------------------------------------------
   16. FAQ
   -------------------------------------------------------------------------- */
.faq { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.faq-item + .faq-item { border-top: 1px solid var(--line); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 24px; text-align: left; font-size: .96rem; font-weight: 600;
  transition: background .16s, color .16s;
}
.faq-q:hover { background: var(--surface-2); color: var(--accent); }
.faq-q svg { width: 18px; height: 18px; flex: none; color: var(--text-3); transition: transform .22s var(--ease), color .16s; }
.faq-item.open .faq-q { color: var(--accent); }
.faq-item.open .faq-q svg { transform: rotate(45deg); color: var(--accent); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s var(--ease); }
.faq-a-inner { padding: 0 24px 22px; font-size: .89rem; color: var(--text-2); line-height: 1.72; }
.faq-a-inner ul { margin: 10px 0 0; padding-left: 20px; }
.faq-a-inner li { margin-bottom: 6px; }
.bg-paper .faq { background: #fff; border-color: #E2E7ED; }
.bg-paper .faq-item + .faq-item { border-color: #E8ECF1; }
.bg-paper .faq-q:hover { background: var(--paper-2); }
.bg-paper .faq-a-inner { color: var(--ink-2); }

/* --------------------------------------------------------------------------
   17. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, #101620, #0A0D12 55%);
  border-block: 1px solid var(--line);
}
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(760px 380px at 88% 50%, rgba(200,241,53,.15), transparent 65%);
}
.cta-band .wrap { position: relative; z-index: 2; }
.cta-inner { display: grid; gap: 30px; align-items: center; }
@media (min-width: 900px) { .cta-inner { grid-template-columns: 1.3fr auto; } }

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: #06080B; border-top: 1px solid var(--line); padding: clamp(48px, 6vw, 76px) 0 0; }
.foot-grid { display: grid; gap: 40px; }
/* Six columns: about / products / company / find-your-case / by-application / contact.
   Everything I added had been piled into COMPANY, leaving it 14 links against 6 in
   Products and mixing four unrelated kinds of link. */
@media (min-width: 900px) { .foot-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 28px; } }
@media (min-width: 1180px) { .foot-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1.1fr; gap: 38px; } }
.foot-col h4 { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 18px; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.foot-col a { font-size: .87rem; color: var(--text-2); transition: color .15s; }
.foot-col a:hover { color: var(--accent); }
.foot-about p { font-size: .87rem; color: var(--text-3); line-height: 1.7; max-width: 320px; }
.foot-contact li { display: flex; gap: 10px; font-size: .87rem; color: var(--text-2); align-items: flex-start; }
.foot-contact svg { width: 15px; height: 15px; color: var(--accent); flex: none; margin-top: 4px; }
.foot-bottom {
  margin-top: 48px; padding: 22px 0; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  font-size: .79rem; color: var(--text-3);
}
.foot-bottom-links { display: flex; gap: 20px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   19. Page hero (inner pages)
   -------------------------------------------------------------------------- */
.page-hero {
  padding: clamp(40px, 6vw, 68px) 0 clamp(32px, 4vw, 48px);
  background: radial-gradient(700px 320px at 15% 0%, rgba(200,241,53,.1), transparent 60%), var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.page-hero h1 { font-size: clamp(1.85rem, 4vw, 2.7rem); margin-bottom: 14px; }
.crumb { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--text-3); margin-bottom: 18px; flex-wrap: wrap; }
.crumb a:hover { color: var(--accent); }
.crumb svg { width: 12px; height: 12px; opacity: .5; }

/* --------------------------------------------------------------------------
   20. Product detail specifics
   -------------------------------------------------------------------------- */
.pd-gallery { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.pd-main { aspect-ratio: 1 / 1; display: grid; place-items: center; background: linear-gradient(170deg, #F3F6FA, #FFFFFF 46%, #E5EAF1); border-bottom: 1px solid var(--line); }
.pd-main img { width: 84%; height: 84%; object-fit: contain; mix-blend-mode: multiply; }
.pd-main svg { width: 82%; height: auto; }
.pd-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); }
.pd-thumb { aspect-ratio: 1 / 1; background: linear-gradient(170deg, #F3F6FA, #E9EEF4); display: grid; place-items: center; cursor: pointer; transition: background .16s; }
.pd-thumb:hover, .pd-thumb.on { background: #FFFFFF; }
.pd-thumb img { width: 76%; height: 76%; object-fit: contain; }
.pd-thumb svg { width: 66%; height: auto; }

.pd-meta { display: flex; flex-direction: column; gap: 20px; }
.pd-price { font-size: .84rem; color: var(--text-3); }
/* the full listing title, kept visible under the h1 so the model number and
   the descriptive keywords both appear above the fold — but set small and
   muted so it never competes with the h1 for attention */
.p-alias {
  font-size: .82rem; line-height: 1.6; color: var(--text-3);
  margin: -2px 0 14px; max-width: 46ch;
}
.pd-price b { font-family: var(--mono); color: var(--accent); font-size: 1.1rem; }
.pd-quick {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
  /* it is a <dl> — reset the user-agent margins and indent */
  margin: 0; padding: 0;
}
@media (max-width: 420px) { .pd-quick { grid-template-columns: repeat(2, 1fr); } }
.pd-quick div { background: var(--surface); padding: 14px 16px; }
.pd-quick dt { font-size: .7rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 5px; }
.pd-quick dd { margin: 0; font-family: var(--mono); font-size: .88rem; font-weight: 600; }

.tabbar { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; margin-bottom: 32px; }
.tab {
  padding: 13px 20px; font-size: .9rem; font-weight: 600; color: var(--text-3);
  border-bottom: 2px solid transparent; white-space: nowrap; transition: color .16s, border-color .16s;
}
.tab:hover { color: var(--text); }
.tab.on { color: var(--accent); border-bottom-color: var(--accent); }

/* --------------------------------------------------------------------------
   21. Image slot (replace with real photo)
   -------------------------------------------------------------------------- */
.img-slot {
  position: relative; border: 1.5px dashed var(--line-3); border-radius: var(--r-lg);
  background: var(--surface); display: grid; place-items: center; text-align: center;
  padding: 34px 22px; min-height: 200px;
}
.img-slot-ic { color: var(--text-3); margin-bottom: 12px; }
.img-slot-ic svg { width: 28px; height: 28px; margin: 0 auto; }
.img-slot-t { font-size: .85rem; font-weight: 600; color: var(--text-2); }
.img-slot-d { font-size: .74rem; color: var(--text-3); margin-top: 5px; max-width: 300px; }
.img-slot code { font-family: var(--mono); font-size: .7rem; background: var(--surface-3); padding: 2px 6px; border-radius: 4px; color: var(--accent); }

/* --------------------------------------------------------------------------
   22. Filter panel (products page)
   -------------------------------------------------------------------------- */
.filter-panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 22px 24px;
  display: flex; flex-direction: column; gap: 16px;
}
.filter-bar-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding-bottom: 4px;
}
.filter-bar-top b { color: var(--accent); font-size: 1rem; }
.filter-group { display: grid; gap: 9px; }
@media (min-width: 800px) {
  .filter-group { grid-template-columns: 116px 1fr; align-items: center; gap: 14px; }
}
.filter-label {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-3);
}

/* --------------------------------------------------------------------------
   23. Timeline (about page)
   -------------------------------------------------------------------------- */
.timeline { display: flex; flex-direction: column; }
.tl-item {
  display: grid; gap: 6px 26px; padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 640px) { .tl-item { grid-template-columns: 104px 1fr; } }
.tl-item:first-child { border-top: 1px solid var(--line); }
.tl-year {
  font-family: var(--mono); font-weight: 700; font-size: 1.02rem;
  color: var(--accent); letter-spacing: -0.02em; line-height: 1.4;
}
.tl-item h4 { margin-bottom: 6px; }
.tl-item p { font-size: .9rem; color: var(--text-2); margin: 0; }

/* --------------------------------------------------------------------------
   24. Comparison table variant (route A / B / C)
   -------------------------------------------------------------------------- */
table.spec.compare td:last-child,
table.spec.compare td:nth-child(3) { font-family: var(--sans); font-size: .85rem; }
table.spec.compare thead th { text-align: left; }
table.spec.compare td:first-child { width: 22%; font-weight: 600; color: var(--text); }

/* --------------------------------------------------------------------------
   25. No-JS safety net
   --------------------------------------------------------------------------
   .reveal elements start hidden and are faded in by main.js. If scripting is
   unavailable the content must still be readable, so unhide it outright.
   -------------------------------------------------------------------------- */
@media (scripting: none) {
  .reveal { opacity: 1 !important; transform: none !important; }
  .faq-a { max-height: none !important; }
}

/* --------------------------------------------------------------------------
   26. Photographic figures
   -------------------------------------------------------------------------- */
.figure {
  position: relative; margin: 0; overflow: hidden;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--surface-2);
}
.figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.figure-4x3   { aspect-ratio: 4 / 3; }
.figure-16x10 { aspect-ratio: 16 / 10; }
.figure-wide  { aspect-ratio: 21 / 9; }
/* matches the 1600x541 source so the six fitments are not cropped */
.figure-strip { aspect-ratio: 1600 / 389; }
@media (max-width: 640px) { .figure-wide { aspect-ratio: 16 / 9; } }

.figure-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 30px 18px 14px;
  background: linear-gradient(to top, rgba(6, 8, 11, .92), rgba(6, 8, 11, 0));
  font-size: .82rem; font-weight: 600; color: #fff; line-height: 1.35;
}
.figure-cap small { display: block; font-weight: 400; color: rgba(255,255,255,.62); font-size: .74rem; margin-top: 3px; }

.gallery { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
@media (min-width: 880px) { .gallery { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------------------------
   27. Utilities
   -------------------------------------------------------------------------- */
.mono { font-family: var(--mono); }
.accent { color: var(--accent); }
.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.tc { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-2 { margin-top: 18px; } .mt-3 { margin-top: 30px; } .mt-4 { margin-top: 44px; }
.mb-2 { margin-bottom: 18px; } .mb-3 { margin-bottom: 30px; } .mb-4 { margin-bottom: 44px; }
.nowrap { white-space: nowrap; }
.hide { display: none !important; }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   28. Motion & finish
   --------------------------------------------------------------------------
   Polish layer. Deliberately CSS-first: transforms, opacity and backdrop-filter
   are GPU-composited, so the page stays fast on a slow connection. JS only
   handles what CSS cannot observe — scroll position, counters, pointer input.
   -------------------------------------------------------------------------- */

/* --- reading progress --- */
.scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 200;
  height: 2px; width: 0;
  background: linear-gradient(90deg, var(--accent), var(--mint));
  box-shadow: 0 0 12px rgba(200, 241, 53, .45);
  transition: width .08s linear;
}

/* --- glass surface --- */
.glass {
  background: rgba(20, 27, 38, .5);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .1);
}

/* --- light sweep on hover --- */
.shine { position: relative; overflow: hidden; }
.shine::after {
  content: ""; position: absolute; top: 0; left: -140%; width: 55%; height: 100%;
  background: linear-gradient(112deg, rgba(255,255,255,0), rgba(255, 255, 255, .10), rgba(255,255,255,0));
  transform: skewX(-16deg); pointer-events: none;
  transition: left .75s var(--ease);
}
.shine:hover::after { left: 150%; }

/* --- hero ambience (moved by pointer, see main.js) --- */
.hero { isolation: isolate; }
/* Two things keep the light edgeless: the element is far larger than the
   section so its centre is all that shows, and the falloff tapers to nearly
   nothing well before the gradient ends — where a gradient *stops* is itself
   visible, which is what produced the ellipse outline in earlier passes. */
.hero-glow {
  position: absolute; z-index: 1; pointer-events: none;
  filter: blur(60px); will-change: transform;
}
.hero-glow-a {
  width: 1600px; height: 1300px; top: -58%; right: -40%;
  background: radial-gradient(closest-side,
    rgba(200, 241, 53, .26) 0%,
    rgba(200, 241, 53, .15) 28%,
    rgba(200, 241, 53, .07) 50%,
    rgba(200, 241, 53, .025) 70%,
    rgba(200, 241, 53, .005) 87%,
    rgba(200, 241, 53, 0) 100%);
}
.hero-glow-b {
  width: 1200px; height: 1000px; bottom: -64%; left: -36%;
  background: radial-gradient(closest-side,
    rgba(90, 169, 255, .22) 0%,
    rgba(90, 169, 255, .12) 28%,
    rgba(90, 169, 255, .055) 50%,
    rgba(90, 169, 255, .02) 70%,
    rgba(90, 169, 255, .004) 87%,
    rgba(90, 169, 255, 0) 100%);
}

/* --- gloss on the primary button --- */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; top: 0; left: -80%; width: 45%; height: 100%;
  background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255, 255, 255, .45), rgba(255,255,255,0));
  transform: skewX(-18deg); pointer-events: none;
  transition: left .6s var(--ease);
}
.btn-primary:hover::after { left: 135%; }

/* --- full-bleed photo band --- */
.photo-band {
  position: relative; overflow: hidden; display: grid; align-items: end;
  min-height: clamp(340px, 44vw, 540px);
  border-block: 1px solid var(--line);
}
.photo-band-bg {
  position: absolute; inset: -14% 0; z-index: 0;
  background-size: cover; background-position: center;
  will-change: transform;
}
.photo-band::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  /* factory interiors are bright; the scrim has to stay heavy through the
     text band or the copy loses contrast against the machines */
  background: linear-gradient(to top,
    rgba(5, 7, 10, .96) 2%,
    rgba(5, 7, 10, .88) 26%,
    rgba(5, 7, 10, .70) 52%,
    rgba(5, 7, 10, .78) 78%,
    rgba(5, 7, 10, .90) 100%);
}
.photo-band-inner { position: relative; z-index: 2; padding: clamp(40px, 5.5vw, 72px) 0; }
.photo-band h2 { max-width: 780px; margin-bottom: 14px; }
.photo-band .lead { max-width: 660px; }
.photo-band-stats {
  display: flex; flex-wrap: wrap; gap: clamp(22px, 4vw, 54px);
  margin-top: 30px; padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.pbs-n {
  font-family: var(--mono); font-weight: 700; line-height: 1;
  font-size: clamp(1.4rem, 2.6vw, 1.95rem);
  color: var(--accent); letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.pbs-l { font-size: .78rem; color: var(--text-2); margin-top: 7px; }

/* --- counters keep their width while animating --- */
.count { font-variant-numeric: tabular-nums; }

/* --- scroll cue --- */
.scroll-cue {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 32px;
  font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; color: var(--text-3);
}
.scroll-cue-bar {
  position: relative; width: 46px; height: 2px; border-radius: 2px;
  background: var(--line-3); overflow: hidden;
}
.scroll-cue-bar::after {
  content: ""; position: absolute; inset: 0; width: 38%;
  background: var(--accent); border-radius: 2px;
  animation: cue 2.1s var(--ease) infinite;
}
@keyframes cue { 0% { transform: translateX(-110%); } 62%, 100% { transform: translateX(270%); } }

/* --- scrollbar --- */
@supports (scrollbar-color: red blue) {
  html { scrollbar-color: var(--surface-3) var(--bg); scrollbar-width: thin; }
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: var(--surface-3); border: 3px solid var(--bg); border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: #33415a; }

/* --- honour reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .scroll-cue-bar::after { animation: none; transform: none; width: 100%; }
  .hero-glow { display: none; }
  .shine::after, .btn-primary::after { display: none; }
  .photo-band-bg { transform: none !important; }
}

/* Print */
@media print {
  .site-header, .topbar, .drawer, .cta-band, .site-footer, .float-card { display: none !important; }
  body { background: #fff; color: #000; }
}


/* --------------------------------------------------------------------------
   29. Factory wash — the plant as a faint backdrop
   The photo is a bright daylight shot, so a dark scrim carries almost all of
   it. What survives is a light, textured panel that lifts the capability copy
   off the flat section background without becoming a picture the eye has to
   read. It fades to nothing before the stat strip, because numbers set on top
   of a photograph stop being numbers.
   -------------------------------------------------------------------------- */
.factory-wash { position: relative; overflow: hidden; }
.factory-wash > .wrap { position: relative; z-index: 1; }
.factory-wash::before {
  content: "";
  position: absolute;
  inset: 0 24% 0 0;
  background-image:
    linear-gradient(to bottom,
      rgba(16, 22, 32, 0.74) 0%,
      rgba(16, 22, 32, 0.82) 28%,
      rgba(16, 22, 32, 0.90) 52%,
      rgba(16, 22, 32, 0.97) 78%,
      rgba(16, 22, 32, 1) 100%),
    url("../img/factory-building.webp");
  background-size: 100% 100%, 100% auto;
  background-position: 0 0, 0 0;
  background-repeat: no-repeat, no-repeat;
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 44%, rgba(0, 0, 0, .45) 78%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0%, #000 44%, rgba(0, 0, 0, .45) 78%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
/* On a phone the section is roughly 0.16:1 — a 1.5:1 landscape shot cannot
   fill it without becoming a 200px-wide slice of one window. So the photo is
   confined to a band at the top, where the headline sits, and the scrim is
   compressed to match: it must clear 0.85 before the first line of body copy,
   which the contrast report measures rather than assumes. */
@media (max-width: 900px) {
  .factory-wash::before {
    inset: 0;
    background-image:
      linear-gradient(to bottom,
        rgba(16, 22, 32, 0.66) 0%,
        rgba(16, 22, 32, 0.85) 7%,
        rgba(16, 22, 32, 0.95) 15%,
        rgba(16, 22, 32, 1) 26%),
      url("../img/factory-building.webp");
    background-size: 100% 100%, 148% auto;
    background-position: center, 44% top;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* --------------------------------------------------------------------------
   28. Spec sheet figure — orthographic drawing
   A dimension drawing must never be cropped and must never have a caption
   laid over it, so it gets its own sheet-style plate and a caption that sits
   underneath in normal flow.
   -------------------------------------------------------------------------- */
.spec-fig { margin: 22px 0 0; }
.spec-sheet {
  background: #FFFFFF;
  border-radius: var(--r-lg);
  padding: 30px 34px;
}
.spec-sheet img { display: block; width: 100%; height: auto; }
.spec-fig .figure-cap {
  position: static;
  background: none;
  padding: 14px 2px 0;
  color: var(--text);
}
.spec-fig .figure-cap small { color: var(--text-3); }
@media (max-width: 640px) { .spec-sheet { padding: 16px 14px; } }

/* Photo band: two 3:2 factory shots side by side. */
.figure-3x2 { aspect-ratio: 3 / 2; }
.photo-2up { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.photo-4up { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .photo-4up { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.photo-4up .figure-cap { font-size: .74rem; padding: 22px 12px 10px; }
.photo-2up .figure-cap { font-size: .78rem; }
/* the default caption scrim is tuned for full-bleed bands; on a half-width
   figure the text lands on bright machine panels and disappears, so darken it */
.photo-2up .figure-cap, .photo-4up .figure-cap {
  background: linear-gradient(to top, rgba(6,8,11,.96) 0%, rgba(6,8,11,.90) 34%,
                              rgba(6,8,11,.58) 68%, rgba(6,8,11,0) 100%);
  padding: 46px 16px 14px;
}
.photo-2up .figure-cap small, .photo-4up .figure-cap small { color: rgba(255,255,255,.76); }
/* contact: portrait-ish card photo facing the form */
.contact-photo { padding: 0; overflow: hidden; }
.contact-photo img { display: block; width: 100%; height: 210px; object-fit: cover; }
.contact-photo .cp-cap { padding: 14px 18px 16px; font-size: .82rem; color: var(--text-2); }
.contact-photo .cp-cap b { display: block; color: var(--text); font-size: .9rem; margin-bottom: 3px; }


/* --------------------------------------------------------------------------
   WhatsApp in the utility bar. It is the fastest route to a human for buyers in
   Turkey, the Gulf and South America, where email is a detour — so it carries
   the accent colour rather than sitting in the same muted grey as the mail link.
   -------------------------------------------------------------------------- */
.topbar a[href*="wa.me"] { color: var(--accent); }
.topbar a[href*="wa.me"] svg { width: 14px; height: 14px; }
@media (max-width: 700px) {
  /* the utility bar hides secondary items on small screens; the WhatsApp link
     is the one that should survive that */
  .topbar a[href*="wa.me"] span { font-size: .74rem; }
}


/* --------------------------------------------------------------------------
   Language switcher. Without this the three codes render flush against each
   other — the topbar reads "ENDETR" instead of EN / DE / TR.
   -------------------------------------------------------------------------- */
.topbar [data-lang-switch] { display: inline-flex; align-items: center; gap: 2px; }
.lang-link {
  display: inline-block; padding: 1px 6px; border-radius: 4px;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  color: var(--text-3); text-decoration: none; line-height: 1.4;
}
  .lang-link:hover { color: var(--text); background: rgba(255,255,255,.06); }
  .lang-link.on { color: var(--accent); background: rgba(200,241,53,.1); }

  /* ------------------------------------------------- Sticky contact rail */
  /* WhatsApp and WeChat, pinned bottom-right on every page.
     Kept out of the topbar because that scrolls away and the product pages run
     long — a buyer who decides halfway down has no way to reach us.

     The bottom offset clears Netlify's free-plan badge, which is an iframe
     pinned to the same corner (measured at 64px tall). That default is set here
     rather than left to the script, so the rail can never land on top of the
     badge even if the measurement never runs. */
  .crail {
    position: fixed; right: 20px; bottom: 88px; z-index: 60;
    display: flex; flex-direction: column; gap: 10px;
  }
  .crail-b {
    width: 52px; height: 52px; border-radius: 50%;
    border: 1px solid var(--line); background: var(--surface);
    display: grid; place-items: center; cursor: pointer; padding: 0;
    transition: transform .18s var(--ease), background .18s var(--ease);
  }
  .crail-b svg { width: 25px; height: 25px; }
  .crail-b:hover { transform: translateY(-2px); }
  .crail-wa { background: var(--mint); border-color: var(--mint); }
  .crail-wa svg { fill: var(--bg); }
  .crail-wa:hover { background: var(--text); border-color: var(--text); }
  .crail-wc svg { fill: var(--mint); }
  .crail-wc:hover { background: var(--mint-soft); border-color: var(--mint); }

  .crail-pop {
    position: fixed; right: 20px; bottom: 214px; z-index: 61;
    width: 272px; padding: 16px 18px;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); display: none; flex-direction: column; gap: 5px;
    box-shadow: 0 18px 44px rgba(0,0,0,.5);
  }
  .crail-pop.on { display: flex; }
  .crail-pop-k {
    font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--text-3);
  }
  /* the second label doubles as a divider between the two contacts */
  .crail-pop-k2 {
    margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
  }
  .crail-pop-v {
    font-size: 1.28rem; font-weight: 700; letter-spacing: .03em;
    font-variant-numeric: tabular-nums; line-height: 1.3;
    color: var(--accent); text-decoration: none;
  }
  .crail-pop-v:hover { text-decoration: underline; }
  .crail-pop-v2 {
    font-size: 1.06rem; font-weight: 700; letter-spacing: .06em;
    font-variant-numeric: tabular-nums; color: var(--text);
    line-height: 1.35;
  }
  .crail-pop-n { font-size: .82rem; color: var(--text-3); line-height: 1.55; }

  @media (max-width: 640px) {
    .crail { right: 13px; bottom: 84px; gap: 8px; }
    .crail-b { width: 46px; height: 46px; }
    .crail-b svg { width: 22px; height: 22px; }
    .crail-pop { right: 13px; left: 13px; width: auto; bottom: 198px; }
  }

  /* ------------------------------------------------ Full-range model table */
  /* Every model in the series, not just the ones with their own page. Reuses the
     existing table.spec styling so it reads as the same component; the .range
     modifier only narrows the first column, because a six-column table cannot
     afford the 38% that the two-column spec table uses. */
  .range-table { padding: 64px 0 8px; }
  .range-table .range-sub { margin: 8px 0 22px; color: var(--text-3); font-size: .92rem; max-width: 66ch; }
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.spec.range td:first-child,
  table.spec.range td.r-model { width: auto; color: var(--text); font-family: var(--mono); white-space: nowrap; }
  table.spec.range td { padding: 11px 14px; font-size: .84rem; vertical-align: top; }
  table.spec.range td:last-child { font-size: .82rem; white-space: nowrap; }
  table.spec.range thead th { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
  table.spec.range a { color: var(--accent); text-decoration: none; }
  table.spec.range a:hover { text-decoration: underline; }
  @media (max-width: 700px) { .range-table { padding: 48px 0 8px; } }

  /* --------------------------------------------------- Case selector form */
  .hero-sm { padding: 56px 0 28px; }
  .sel-form { padding: 24px 26px 22px; }
  .sel-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .sel-field { display: flex; flex-direction: column; gap: 7px; }
  .sel-lab { font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
  .sel-field select, .sel-field input {
    width: 100%; padding: 11px 12px; border-radius: var(--r-sm);
    background: var(--bg); border: 1px solid var(--line); color: var(--text);
    font: inherit; font-size: .94rem;
  }
  .sel-field select:focus, .sel-field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
  .sel-out { margin-top: 22px; }
  .sel-sum { font-size: 1.02rem; margin-bottom: 14px; color: var(--text-2); }
  .sel-sum b { color: var(--accent); font-size: 1.14rem; }
  .sel-note { margin-top: 12px; font-size: .84rem; color: var(--text-3); }
  .sel-none { padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r);
    background: rgba(255,255,255,.02); color: var(--text-2); font-size: .94rem; }
  .sel-none b { color: var(--text); display: block; margin-bottom: 8px; }
  @media (max-width: 820px) { .sel-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 520px) { .sel-row { grid-template-columns: 1fr; } .sel-form { padding: 20px 18px; } }

  /* -------------------------------------------------- Format comparison */
  .cmp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .cmp-card { padding: 24px 24px 20px; }
  .cmp-head h3 { margin: 0 0 6px; font-size: 1.18rem; }
  .cmp-head h3 a { color: var(--text); text-decoration: none; }
  .cmp-head h3 a:hover { color: var(--accent); }
  .cmp-also { margin: 0 0 4px; font-size: .8rem; color: var(--text-3); }
  .cmp-stat { margin: 0 0 14px; font-size: .8rem; color: var(--accent); font-family: var(--mono); }
  .cmp-what { margin: 0 0 16px; font-size: .92rem; color: var(--text-2); }
  .cmp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 14px; }
  .cmp-tag { display: block; font-size: .68rem; letter-spacing: .09em; text-transform: uppercase;
    color: var(--text-3); margin-bottom: 7px; }
  .cmp-split ul { margin: 0; padding-left: 16px; }
  .cmp-split li { font-size: .84rem; line-height: 1.5; margin-bottom: 6px; color: var(--text-2); }
  .cmp-pro li::marker { color: var(--mint); }
  .cmp-con li::marker { color: var(--orange); }
  .cmp-fits { margin: 0 0 10px; font-size: .84rem; color: var(--text-3); }
  .cmp-fits b { color: var(--text-2); }
  .cmp-link { margin: 0; font-size: .84rem; }
  .cmp-link a { color: var(--accent); text-decoration: none; }
  @media (max-width: 860px) { .cmp-grid { grid-template-columns: 1fr; } }
  @media (max-width: 560px) { .cmp-split { grid-template-columns: 1fr; gap: 12px; } }

  /* ------------------------------------------------------- Article body */
  .prose { max-width: 74ch; }
  .prose p { margin: 0 0 18px; color: var(--text-2); line-height: 1.68; }
  .prose .answer { font-size: 1.06rem; color: var(--text); border-left: 3px solid var(--accent);
    padding-left: 16px; margin-bottom: 26px; }
  .prose h2 { margin: 34px 0 14px; font-size: 1.28rem; }
  .prose h3 { margin: 26px 0 10px; font-size: 1.06rem; }
  .prose ul, .prose ol { margin: 0 0 20px; padding-left: 22px; }
  .prose li { margin-bottom: 9px; color: var(--text-2); line-height: 1.62; }
  .prose li b, .prose p b { color: var(--text); }
  .prose a { color: var(--accent); }
  .prose table.spec { margin-bottom: 24px; }
  .prose table.spec td { font-size: .87rem; }