/* =========================================================
   SRI SAI SIVA — dark futuristic theme
   Charcoal base · warm off-white text · Jeans Blue accent
   ========================================================= */

:root {
  --bg: #1c1d21;
  --bg-deep: #141518;
  --surface: rgba(255, 255, 255, 0.035);
  --surface-2: rgba(255, 255, 255, 0.06);
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);

  --text: #ece8df;
  --text-2: #b8bbc3;
  --muted: #868a94;

  --accent: #5b8fc7;      /* Jeans Blue */
  --accent-2: #8db8e6;    /* lifted highlight */
  --accent-deep: #2f5a8a;
  --glow: rgba(91, 143, 199, 0.35);

  --font-display: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-accent: 'Instrument Serif', Georgia, serif;

  --radius: 18px;
  --radius-sm: 10px;
  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1240px;
  --nav-h: 72px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* strong ease-out for press/hover feedback */

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent; /* no grey flash on tap; :active states give feedback instead */
  overflow-x: hidden;
}
/* ambient glow behind the transparent WebGL canvas */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 50% at 50% 70%, rgba(91, 143, 199, 0.16), transparent 70%),
    radial-gradient(40% 40% at 85% 10%, rgba(91, 143, 199, 0.08), transparent 70%),
    linear-gradient(180deg, #1f2025 0%, var(--bg) 45%, var(--bg-deep) 100%);
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
em {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  color: var(--accent-2);
  letter-spacing: 0;
}
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; line-height: 1.08; letter-spacing: -0.02em; font-weight: 600; }
p { margin: 0 0 1em; }
::selection { background: var(--accent); color: #fff; }

.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 100;
  padding: 10px 14px; background: var(--accent); color: #fff; border-radius: 8px;
}
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 6px; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent-2);
  margin: 0 0 18px;
}
.eyebrow::before { content: ''; width: 22px; height: 1px; background: currentColor; opacity: 0.7; }
.hero .eyebrow::before { display: none; }
.pulse {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 var(--glow); animation: pulse 2.2s infinite;
}
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(91,143,199,.6); } 70% { box-shadow: 0 0 0 12px rgba(91,143,199,0); } 100% { box-shadow: 0 0 0 0 rgba(91,143,199,0); } }

.section-title { font-size: clamp(34px, 5vw, 64px); font-weight: 600; margin-bottom: 20px; max-width: 16ch; }
.section-title em { font-size: 1.08em; }
.lead { font-size: clamp(16px, 1.4vw, 19px); color: var(--text-2); max-width: 56ch; }

/* ---------- buttons ---------- */
.btn {
  --h: 52px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--h); padding: 0 26px; border-radius: 999px;
  font-family: var(--font-display); font-weight: 500; font-size: 16px; letter-spacing: 0.01em;
  border: 1px solid transparent; cursor: pointer; overflow: hidden; isolation: isolate;
  transition: transform .2s var(--ease-out), box-shadow .3s var(--ease-out), background-color .2s, border-color .2s;
}
.btn.btn:active { transform: scale(.97); transition-duration: .1s; } /* doubled class beats the :hover lift */
.btn:disabled { opacity: .65; cursor: progress; transform: none; }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease); }
.btn--primary { background: var(--accent); color: #fff; box-shadow: 0 10px 30px -10px var(--glow), inset 0 1px 0 rgba(255,255,255,.25); }
.btn--primary::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-100%); transition: transform .8s var(--ease);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -12px rgba(91,143,199,.7), inset 0 1px 0 rgba(255,255,255,.25); }
.btn--primary:hover::after { transform: translateX(100%); }
.btn--primary:hover svg { transform: translateY(2px); }
/* sits over the 3D machines on small screens, so it needs its own backing to stay legible */
.btn--ghost { border-color: var(--line-strong); color: var(--text); background: rgba(22,23,27,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn--ghost:hover { border-color: var(--accent); background: rgba(91,143,199,.1); transform: translateY(-2px); }
.btn--block { width: 100%; }
.btn--block:hover svg { transform: translateX(3px); }

/* ---------- 3D stage ---------- */
.stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s var(--ease); }
.stage.is-ready { opacity: 1; }
.stage canvas { width: 100%; height: 100%; display: block; }
.no-webgl .stage { display: none; }

.hotspots { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hotspot-group { position: absolute; inset: 0; opacity: 0; transition: opacity .5s var(--ease); }
.hotspot-group.is-on { opacity: 1; }
.hotspot {
  position: absolute; left: 0; top: 0; will-change: transform;
  display: flex; align-items: center; gap: 8px;
}
.hotspot__dot {
  position: relative; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: var(--accent-2); box-shadow: 0 0 0 4px rgba(141,184,230,.18), 0 0 18px var(--accent);
}
.hotspot__dot::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(141,184,230,.5); animation: ring 2.4s infinite var(--ease); }
@keyframes ring { from { transform: scale(.6); opacity: 1; } to { transform: scale(2); opacity: 0; } }
.hotspot__line { width: 28px; height: 1px; background: linear-gradient(90deg, var(--accent-2), transparent); margin-top: -5px; }
.hotspot__label {
  margin-top: -5px; white-space: nowrap;
  font-family: var(--font-display); font-size: 12px; font-weight: 500; letter-spacing: .04em;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(20,21,24,.78); border: 1px solid rgba(141,184,230,.35); color: var(--text);
}
.hotspot.is-left { flex-direction: row-reverse; }
.hotspot.is-left .hotspot__dot { margin: -5px -5px 0 0; }
.hotspot.is-left .hotspot__line { background: linear-gradient(270deg, var(--accent-2), transparent); }
.hotspot-group.is-on .hotspot { animation: hs-in .6s var(--ease) both; }

@keyframes hs-in { from { opacity: 0; } to { opacity: 1; } }

main { position: relative; z-index: 2; }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--nav-h); padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  transition: background-color .4s, backdrop-filter .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled { background: rgba(22,23,26,.72); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-color: var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand__logo { width: 42px; height: 42px; flex: none; border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,.45); }
.footer .brand__logo { width: 56px; height: 56px; }
.brand__name { font-family: var(--font-display); font-weight: 500; font-size: 17px; letter-spacing: .18em; }
.brand__name b { font-weight: 700; color: var(--accent-2); }
.nav__links { display: flex; align-items: center; gap: 6px; }
.nav__links a {
  position: relative; padding: 8px 14px; border-radius: 999px;
  font-family: var(--font-display); font-size: 15px; color: var(--text-2);
  transition: color .3s, background-color .3s;
}
.nav__links a:hover, .nav__links a.is-active { color: var(--text); }
.nav__links a.is-active::after { content: ''; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--accent); }
.nav__links .nav__cta { margin-left: 8px; color: #fff; background: var(--accent); padding: 9px 18px; }
.nav__links .nav__cta { transition: background-color .2s, transform .2s var(--ease-out); }
.nav__links .nav__cta:hover { background: #6c9dd2; }
.nav__links .nav__cta:active { transform: scale(.97); transition-duration: .1s; }
.nav__links .nav__cta::after { display: none; }
.nav__toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 12px; background: rgba(255,255,255,.04); cursor: pointer; position: relative; }
.nav__toggle span { position: absolute; left: 12px; right: 12px; height: 1.5px; background: var(--text); transition: transform .35s var(--ease), top .35s var(--ease); }
.nav__toggle span:first-child { top: 17px; }
.nav__toggle span:last-child { top: 25px; }
.nav__toggle[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center;
  padding: calc(var(--nav-h) + clamp(24px, 9vh, 110px)) var(--gutter) 40px;
  text-align: center;
}
.hero__inner { max-width: 980px; display: flex; flex-direction: column; align-items: center; }
.wordmark {
  font-size: clamp(52px, 9vw, 140px); font-weight: 700; letter-spacing: -0.035em; line-height: .95;
  display: flex; flex-wrap: wrap; justify-content: center; column-gap: .22em; margin-bottom: 22px;
}
.wordmark__word { display: inline-flex; }
.wordmark .ch { display: inline-block; opacity: 0; transform: translateY(.5em) rotateX(-60deg); transform-origin: 50% 100%; animation: ch-in 1s var(--ease) forwards; animation-delay: calc(var(--i) * 55ms + 150ms); }
@keyframes ch-in { to { opacity: 1; transform: none; } }
.wordmark__word--accent {
  background: linear-gradient(100deg, var(--accent) 0%, var(--accent-2) 35%, #e9f2fc 50%, var(--accent-2) 65%, var(--accent) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sheen 6s linear infinite;
}
.wordmark__word--accent .ch { color: transparent; }
@keyframes sheen { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.hero__tagline { font-family: var(--font-display); font-weight: 500; font-size: clamp(19px, 2.3vw, 30px); letter-spacing: -.01em; color: var(--text); margin: -6px 0 14px; }
.hero__tagline em { font-size: 1.12em; }
.hero__sub { font-size: clamp(17px, 1.6vw, 21px); color: var(--text-2); max-width: 40ch; margin-bottom: 30px; }
.hero__sub em { font-size: 1.12em; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.hero__inner > * { opacity: 0; animation: fade-up 1s var(--ease) forwards; }
.hero__inner > .eyebrow { animation-delay: .05s; }
.hero__inner > .wordmark { opacity: 1; animation: none; }
.hero__inner > .hero__tagline { animation-delay: .65s; }
.hero__inner > .hero__sub { animation-delay: .75s; }
.hero__inner > .hero__cta { animation-delay: .9s; }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.hero__tags {
  list-style: none; margin: auto 0 0; padding: 0;
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 84px; /* clears the WhatsApp button */
  display: flex; justify-content: space-between; gap: 8px;
  font-family: var(--font-display); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
  opacity: 0; animation: fade-up 1s 1.2s var(--ease) forwards;
}
.hero__tags li { flex: 1; text-align: center; }
.hero__tags li:first-child { text-align: left; }
.hero__tags li:last-child { text-align: right; }
.hero__scroll {
  position: absolute; left: 50%; bottom: 70px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted);
  opacity: 0; animation: fade-up 1s 1.4s var(--ease) forwards;
}
.hero__scroll span { width: 1px; height: 36px; background: linear-gradient(var(--accent-2), transparent); animation: drip 2s infinite var(--ease); transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.hero__fallback { display: none; }
.hero__fallback img { width: 100%; height: auto; border-radius: inherit; }
.no-webgl .hero__fallback {
  display: block; position: absolute; left: 50%; bottom: 80px; transform: translateX(-50%);
  width: min(1200px, 94vw); border-radius: var(--radius); opacity: .9; z-index: -1;
  -webkit-mask-image: linear-gradient(transparent, #000 25%); mask-image: linear-gradient(transparent, #000 25%);
}

/* ---------- spares (pinned scroll) ---------- */
.spares { position: relative; height: 520vh; }
.spares__sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  padding: calc(var(--nav-h) + 16px) var(--gutter) 32px;
  display: flex; flex-direction: column; justify-content: center; gap: 22px;
  max-width: 1440px; margin: 0 auto;
}
.spares__head, .spares__panels, .spares__nav { width: min(470px, 42vw); }
.spares__title { font-size: clamp(30px, 3.4vw, 46px); }
.spares__head { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.spares.is-live .spares__head { opacity: 1; transform: none; }
.spares__panels { position: relative; display: grid; align-items: start; }
.spare-panel {
  grid-area: 1 / 1; position: relative; width: 100%;
  padding: 26px 26px 24px; border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(36,38,44,.72), rgba(24,25,29,.62));
  border: 1px solid var(--line);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.6);
  opacity: 0; transform: translateY(26px) scale(.98); pointer-events: none; visibility: hidden;
  transition: opacity .55s var(--ease), transform .7s var(--ease), visibility 0s .7s;
}
.spare-panel.is-active { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .55s var(--ease) .1s, transform .7s var(--ease) .1s, visibility 0s; }
.spare-panel__meta { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: 13px; color: var(--muted); letter-spacing: .12em; margin-bottom: 14px; }
.spare-panel__idx { color: var(--accent-2); font-weight: 600; }
.spare-panel__rule { flex: 0 0 48px; height: 1px; background: var(--line-strong); position: relative; overflow: hidden; }
.spare-panel__rule::after { content: ''; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease) .3s; }
.spare-panel.is-active .spare-panel__rule::after { transform: scaleX(1); }
.spare-panel__title { font-size: clamp(26px, 2.6vw, 36px); margin-bottom: 10px; }
.spare-panel__desc { color: var(--text-2); font-size: 15px; margin-bottom: 18px; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li {
  font-size: 13px; font-weight: 500; line-height: 1; padding: 9px 12px; border-radius: 999px;
  background: rgba(91,143,199,.08); border: 1px solid rgba(91,143,199,.28); color: var(--text);
  opacity: 0; transform: translateY(8px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), background-color .25s, border-color .25s;
}
.spare-panel.is-active .chips li { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 32ms + 200ms), calc(var(--i, 0) * 32ms + 200ms), 0s, 0s; }
.spare-panel__link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  font-family: var(--font-display); font-weight: 500; font-size: 14px; color: var(--accent-2);
  border-bottom: 1px solid rgba(141,184,230,.35); padding-bottom: 2px; transition: color .2s, border-color .2s;
}
.spare-panel__link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease-out); }
.spare-panel__link:hover { color: var(--text); border-color: var(--text); }
.spare-panel__link:hover svg { transform: translateX(3px); }
.chips .chip--more { background: transparent; border-style: dashed; color: var(--accent-2); }

/* nav fades with the heading so it doesn't float on its own once the panels have gone */
.spares__nav { display: flex; gap: 6px; opacity: 0; pointer-events: none; transition: opacity .4s var(--ease); }
.spares.is-live .spares__nav { opacity: 1; pointer-events: auto; }
.spares__nav button:active { transform: scale(.97); }
.spares__nav button {
  flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 10px 12px; border-radius: 12px; cursor: pointer;
  background: transparent; border: 1px solid var(--line);
  font-family: var(--font-display); font-size: 14px; color: var(--text-2);
  transition: border-color .3s, color .3s, background-color .3s, transform .15s var(--ease-out);
  position: relative; overflow: hidden;
}
.spares__nav button span { font-size: 11px; color: var(--muted); letter-spacing: .1em; }
.spares__nav button::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.spares__nav button:hover { color: var(--text); border-color: var(--line-strong); }
.spares__nav button.is-active { color: var(--text); border-color: rgba(91,143,199,.5); background: rgba(91,143,199,.08); }
.spares__nav button.is-active::after { transform: scaleX(1); }
.spares__nav button.is-active span { color: var(--accent-2); }

/* fallback (no WebGL): static panels list */
.no-webgl .spares { height: auto; }
.no-webgl .spares__sticky { position: relative; height: auto; padding-block: 120px 60px; }
.no-webgl .spares__head, .no-webgl .spares__panels, .no-webgl .spares__nav { width: 100%; max-width: 760px; }
.no-webgl .spares__head { opacity: 1; transform: none; }
.no-webgl .spares__panels { display: grid; gap: 16px; min-height: 0; }
.no-webgl .spare-panel { grid-area: auto; position: relative; opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
.no-webgl .chips li { opacity: 1; transform: none; }
.no-webgl .spares__nav { display: none; }

/* ---------- accessories ---------- */
.beyond { position: relative; padding: clamp(100px, 14vw, 180px) 0 clamp(60px, 8vw, 110px); }
/* Conveyor, side elevation of a troughed belt conveyor on a lattice frame.
   Belt speed is 70px/s everywhere (BELT_SPEED in main.js): a wheel of diameter d turns once every π·d/70 s,
   so every roller matches the belt. The -n variables are the same sizes without units, for those timings. */
.conveyor {
  --belt: 7px; --edge: 17px; --bed: 112px; --drum-n: 98;
  --idler: 26px; --idler-n: 26; --ridler: 16px; --ridler-n: 16;
  --st-top: 8px; --str-top: 46px; --str-h: 40px; --bay: 44px; --legs: 136px; --k: 1;
  --drum: calc(var(--bed) - var(--belt) * 2);
  --paint: linear-gradient(90deg, #1f3b5c, #4f7fb0 42%, #2b5079 72%, #1a3350);
  position: relative;
  margin: clamp(40px, 6vw, 80px) var(--gutter) clamp(40px, 6vw, 70px);
}
/* parts sit down in the trough, so their bases are hidden behind the near edge of the belt */
.conveyor__cargo {
  position: relative; height: calc(140px * var(--k)); margin: 0 calc(var(--bed) / 2) calc(6px - var(--edge)); overflow: hidden;
  display: flex; align-items: flex-end;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.conveyor__track {
  display: flex; align-items: flex-end; width: max-content;
  animation: cargo var(--cargo-dur, 30s) linear infinite; will-change: transform;
}
@keyframes cargo { to { transform: translateX(-50%); } }
.conveyor__item { position: relative; flex: none; margin-right: calc(54px * var(--k)); }
.conveyor__item img { display: block; height: calc(var(--h) * var(--k) * 1px); width: auto; max-width: none; }

.conveyor__bed { position: relative; z-index: 1; height: var(--bed); }
/* the rubber loop, wrapped round both pulleys */
.conveyor__belt {
  position: absolute; inset: 0; border: var(--belt) solid #1b1c20; border-radius: calc(var(--bed) / 2);
  box-shadow: 0 -1px 0 rgba(255,255,255,.09), 0 14px 24px -12px rgba(0,0,0,.8), inset 0 1px 0 rgba(0,0,0,.6);
}
.conveyor__tread {
  position: absolute; left: calc(var(--bed) / 2); right: calc(var(--bed) / 2); height: var(--belt);
  background: repeating-linear-gradient(90deg, #34373e 0 2px, #1b1c20 2px 16px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.5);
}
/* carrying strand: troughed, so from the side you see the raised wing of the belt; it flattens out onto the pulleys */
.conveyor__tread--top {
  top: 0; height: var(--edge);
  background:
    linear-gradient(180deg, rgba(255,255,255,.16) 0 1px, rgba(255,255,255,.04) 1px 3px, transparent 3px, rgba(0,0,0,.4)),
    repeating-linear-gradient(90deg, #34373e 0 2px, #1d1e22 2px 16px);
  clip-path: polygon(0 0, 100% 0, 100% var(--belt), calc(100% - 46px) 100%, 46px 100%, 0 var(--belt));
  box-shadow: none;
  animation: tread-left .2286s linear infinite;
}
.conveyor__tread--bottom { bottom: 0; animation: tread-right .2286s linear infinite; }
@keyframes tread-left { to { background-position: 0 0, -16px 0; } }
@keyframes tread-right { to { background-position-x: 16px; } }

/* stringer: a painted lattice girder — top and bottom chords, posts every bay, cross bracing between */
.conveyor__stringer {
  position: absolute; top: var(--str-top); height: var(--str-h);
  left: calc(var(--bed) / 2 - 14px); right: calc(var(--bed) / 2 - 14px);
  background:
    linear-gradient(180deg, #7aa6d2 0 1px, #3d6b9b 1px 3px, #2b5079 3px 6px, #173252 6px 7px, transparent 7px) top / 100% 7px no-repeat,
    linear-gradient(180deg, #5f8fc0 0 1px, #2f5a8a 1px 4px, #1d3856 4px 6px, #10233a 6px 7px) bottom / 100% 7px no-repeat,
    linear-gradient(90deg, #1f3b5c 0 1px, #4a7aab 1px 3px, #2b5079 3px 5px, transparent 5px) 0 0 / var(--bay) 100% repeat-x,
    linear-gradient(to top right, transparent calc(50% - 2px), #23466c calc(50% - 2px), #3f6f9f 50%, #23466c calc(50% + 2px), transparent calc(50% + 2px)) 0 0 / var(--bay) 100% repeat-x,
    linear-gradient(to top left, transparent calc(50% - 2px), #1c3a5c calc(50% - 2px), #35618f 50%, #1c3a5c calc(50% + 2px), transparent calc(50% + 2px)) 0 0 / var(--bay) 100% repeat-x;
  filter: drop-shadow(0 6px 6px rgba(0,0,0,.45));
}

/* idlers: troughing sets under the carrying strand, flat return rollers under the bottom strand */
.conveyor__idlers { position: absolute; display: flex; justify-content: space-between; }
.conveyor__idlers--carry { top: var(--st-top); left: calc(var(--bed) / 2 + 30px); right: calc(var(--bed) / 2 + 30px); height: calc(var(--str-top) - var(--st-top)); }
.conveyor__idlers--return { top: 100%; left: calc(var(--bed) / 2 + 80px); right: calc(var(--bed) / 2 + 80px); height: var(--ridler); }
.conveyor__idlers i { position: relative; flex: none; }

/* troughing set seen from outside: the wing roller tilts up towards you, so you see its end cap with the
   shell running down behind it, held by the tall outer bracket of the idler frame bolted to the girder */
.conveyor__idlers--carry i {
  width: var(--idler); height: 100%;
  border-radius: calc(var(--idler) / 2) calc(var(--idler) / 2) 3px 3px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.7), transparent 26%, rgba(255,255,255,.22) 44%, transparent 62%, rgba(0,0,0,.75)),
    repeating-linear-gradient(90deg, #4d4a55 0 9px, #625e6b 9px 11px, #4d4a55 11px 22px);
  animation: shell calc(22 / 70 * 1s) linear infinite;
}
@keyframes shell { to { background-position: 0 0, -22px 0; } }
.conveyor__idlers--carry i::before { /* end cap, slightly foreshortened */
  content: ''; position: absolute; left: 0; top: -1px; width: var(--idler); height: var(--idler); border-radius: 50%;
  background:
    radial-gradient(circle at 50% 20%, #aab2bb 0 7%, transparent 8%),
    radial-gradient(circle, #d9dee4 0 16%, #17181c 17% 34%, #8a929c 35% 44%, #55515e 45% 100%);
  box-shadow: inset 0 0 0 1.5px #1b1a20, inset 0 3px 3px rgba(255,255,255,.3);
  animation: cap-spin calc(3.1416 * var(--idler-n) / 70 * 1s) linear infinite;
}
@keyframes cap-spin { from { transform: scaleY(.84) rotate(0); } to { transform: scaleY(.84) rotate(-360deg); } }
.conveyor__idlers--carry i::after { /* outer bracket + bolted foot */
  content: ''; position: absolute; left: 50%; width: 28px; margin-left: -14px;
  top: calc(var(--idler) / 2 - 5px); bottom: -4px;
  background:
    radial-gradient(circle at 50% 5px, #dfe4e9 0 2.2px, #14263b 2.8px 3.8px, transparent 4.3px),
    radial-gradient(circle, #c3cad2 0 1.3px, transparent 1.8px) 2px calc(100% - 1px) / 5px 5px no-repeat,
    radial-gradient(circle, #c3cad2 0 1.3px, transparent 1.8px) calc(100% - 2px) calc(100% - 1px) / 5px 5px no-repeat,
    linear-gradient(90deg, #244a73, #5b8cbd 45%, #2f5a8a 75%, #1c3a5c);
  clip-path: polygon(38% 0, 62% 0, 72% calc(100% - 6px), 100% calc(100% - 6px), 100% 100%, 0 100%, 0 calc(100% - 6px), 28% calc(100% - 6px));
}

/* return roller seen end-on, on a drop hanger from the girder */
.conveyor__idlers--return i { width: var(--ridler); height: var(--ridler); }
.conveyor__idlers--return i::before {
  content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 50%;
  background:
    linear-gradient(#22242a, #22242a) 50% 50% / 46% 9% no-repeat,
    radial-gradient(circle, #d9dee4 0 22%, #17181c 23% 40%, #6f7781 41% 52%, #2f2b34 53% 100%);
  box-shadow: inset 0 0 0 1.5px #121216, inset 0 3px 3px rgba(255,255,255,.2), 0 2px 4px rgba(0,0,0,.5);
  animation: spin-cw calc(3.1416 * var(--ridler-n) / 70 * 1s) linear infinite;
}
.conveyor__idlers--return i::after {
  content: ''; position: absolute; left: 50%; bottom: 50%; width: 6px; margin-left: -3px; z-index: 2; border-radius: 1px;
  height: calc(var(--bed) - var(--str-top) - var(--str-h) + var(--ridler) / 2 + 2px);
  background: var(--paint);
}
@keyframes spin { to { transform: rotate(-360deg); } }
@keyframes spin-cw { to { transform: rotate(360deg); } }

/* drum pulleys: rubber-lagged shell, painted end disc with lightening holes, shaft in a plummer block */
.conveyor__drum { position: absolute; top: var(--belt); width: var(--drum); height: var(--drum); }
.conveyor__drum--l { left: var(--belt); }
.conveyor__drum--r { right: var(--belt); }
.conveyor__drum::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 24%, #101216 0 6.5%, #5e8cbd 7% 8%, transparent 8.5%),
    radial-gradient(circle at 76% 50%, #101216 0 6.5%, #5e8cbd 7% 8%, transparent 8.5%),
    radial-gradient(circle at 50% 76%, #101216 0 6.5%, #5e8cbd 7% 8%, transparent 8.5%),
    radial-gradient(circle at 24% 50%, #101216 0 6.5%, #5e8cbd 7% 8%, transparent 8.5%),
    radial-gradient(circle, #4a7aab 0 16%, #2b5079 17% 56%, #1a3350 57% 60%, transparent 61%),
    repeating-conic-gradient(#33363d 0 5deg, #17181c 5deg 12deg);
  box-shadow: inset 0 0 0 1px #0c0d10, inset 0 6px 8px rgba(255,255,255,.1), inset 0 -8px 10px rgba(0,0,0,.45);
  animation: spin calc(3.1416 * var(--drum-n) / 70 * 1s) linear infinite;
}
.conveyor__drum i { /* plummer block bearing housing, bolted to the frame */
  position: absolute; left: 50%; top: 50%; width: 32px; height: 22px; margin: -12px 0 0 -16px;
  border-radius: 11px 11px 2px 2px;
  background:
    radial-gradient(circle at 50% 54%, #e6eaee 0 3.5px, #6a727c 4px 5px, #2a2d33 5.5px 7px, transparent 7.5px),
    linear-gradient(180deg, #f1e7cf, #d6c8a6 60%, #b3a583);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 0 rgba(0,0,0,.15), 0 3px 6px rgba(0,0,0,.55);
}
.conveyor__drum i::after { /* base plate with two hold-down bolts */
  content: ''; position: absolute; left: -8px; right: -8px; top: 100%; height: 5px; border-radius: 1px 1px 2px 2px;
  background:
    radial-gradient(circle, #3a3d44 0 1.6px, transparent 2px) 3px 50% / 6px 6px no-repeat,
    radial-gradient(circle, #3a3d44 0 1.6px, transparent 2px) calc(100% - 3px) 50% / 6px 6px no-repeat,
    linear-gradient(180deg, #e3d7b9, #b3a583);
  box-shadow: 0 2px 4px rgba(0,0,0,.5);
}

/* trestles: two posts tied top and bottom with X bracing in two panels, standing on concrete pads */
.conveyor__legs {
  position: relative; z-index: 2; height: var(--legs);
  margin: calc(var(--str-top) + var(--str-h) - var(--bed)) calc(var(--bed) / 2 + 24px) 0;
  display: flex; justify-content: space-between;
}
.conveyor__legs i {
  --post: 8px; --pad: 9px;
  position: relative; flex: none; width: 92px; height: 100%;
  background:
    linear-gradient(#8f9296, #5d6064) 0 100% / 100% var(--pad) no-repeat,
    var(--paint) 6px 0 / var(--post) calc(100% - var(--pad)) no-repeat,
    var(--paint) calc(100% - 6px) 0 / var(--post) calc(100% - var(--pad)) no-repeat,
    linear-gradient(180deg, #5b8cbd, #244a73) 50% 0 / calc(100% - 12px) 6px no-repeat,
    linear-gradient(180deg, #5b8cbd, #244a73) 50% calc((100% - var(--pad)) / 2) / calc(100% - 12px) 5px no-repeat,
    linear-gradient(180deg, #5b8cbd, #244a73) 50% calc(100% - var(--pad)) / calc(100% - 12px) 5px no-repeat;
  -webkit-mask: none;
}
.conveyor__legs i::before, .conveyor__legs i::after { /* the two braced panels */
  content: ''; position: absolute; left: 12px; right: 12px; height: calc((100% - var(--pad)) / 2);
  background:
    linear-gradient(to top right, transparent calc(50% - 2.5px), #23466c calc(50% - 2.5px), #4576a8 50%, #23466c calc(50% + 2.5px), transparent calc(50% + 2.5px)),
    linear-gradient(to top left, transparent calc(50% - 2.5px), #1c3a5c calc(50% - 2.5px), #35618f 50%, #1c3a5c calc(50% + 2.5px), transparent calc(50% + 2.5px));
}
.conveyor__legs i::before { top: 0; }
.conveyor__legs i::after { top: calc((100% - var(--pad)) / 2); }
.conveyor::after { /* floor */
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong) 12%, var(--line-strong) 88%, transparent);
  box-shadow: 0 10px 24px 4px rgba(0,0,0,.45);
}

.conveyor:hover .conveyor__track, .conveyor:hover .conveyor__tread,
.conveyor:hover .conveyor__drum::before, .conveyor:hover .conveyor__idlers i, .conveyor:hover .conveyor__idlers i::before,
.conveyor.is-offscreen .conveyor__track, .conveyor.is-offscreen .conveyor__tread,
.conveyor.is-offscreen .conveyor__drum::before, .conveyor.is-offscreen .conveyor__idlers i, .conveyor.is-offscreen .conveyor__idlers i::before { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .conveyor__track, .conveyor__tread, .conveyor__drum::before, .conveyor__idlers i, .conveyor__idlers i::before { animation: none; }
  .conveyor__idlers--carry i::before { transform: scaleY(.84); }
}
@media (max-width: 900px) {
  .conveyor { --k: .82; }
}
@media (max-width: 600px) {
  .conveyor {
    --k: .64; --belt: 6px; --edge: 13px; --bed: 84px; --drum-n: 72;
    --idler: 20px; --idler-n: 20; --ridler: 12px; --ridler-n: 12;
    --st-top: 6px; --str-top: 35px; --str-h: 29px; --bay: 32px; --legs: 96px;
  }
  .conveyor__tread--top { clip-path: polygon(0 0, 100% 0, 100% var(--belt), calc(100% - 34px) 100%, 34px 100%, 0 var(--belt)); }
  .conveyor__idlers--carry { left: calc(var(--bed) / 2 + 20px); right: calc(var(--bed) / 2 + 20px); }
  .conveyor__idlers--carry i::after { width: 22px; margin-left: -11px; }
  .conveyor__idlers--return { left: calc(var(--bed) / 2 + 50px); right: calc(var(--bed) / 2 + 50px); }
  .conveyor__idlers--return i::after { width: 4px; margin-left: -2px; }
  .conveyor__drum i { width: 24px; height: 17px; margin: -9px 0 0 -12px; border-radius: 8px 8px 2px 2px; }
  .conveyor__drum i::after { left: -6px; right: -6px; height: 4px; }
  .conveyor__legs { margin-left: calc(var(--bed) / 2 + 10px); margin-right: calc(var(--bed) / 2 + 10px); }
  .conveyor__legs i { --post: 6px; --pad: 7px; width: 62px; }
}

.acc-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.acc-grid li {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 14px; background: var(--surface); border: 1px solid var(--line);
  transition: border-color .3s, background-color .3s;
}
/* not clickable, so no lift — a lift promises a click that does nothing */
.acc-grid li:hover { border-color: rgba(91,143,199,.45); background: rgba(91,143,199,.06); }
.acc-grid__img {
  position: relative; aspect-ratio: 4 / 3;
  background: radial-gradient(65% 55% at 50% 58%, rgba(91,143,199,.2), transparent 72%);
}
.acc-grid__img::after { /* contact shadow */
  content: ''; position: absolute; left: 22%; right: 22%; bottom: 9%; height: 12px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.55), transparent);
}
.acc-grid__img img {
  position: absolute; z-index: 1; left: 14%; top: 12%; width: 72%; height: 76%; object-fit: contain;
  filter: drop-shadow(0 10px 10px rgba(0,0,0,.4));
  transition: transform .6s var(--ease);
}
.acc-grid li:hover .acc-grid__img img { transform: scale(1.05); }
.acc-grid__img svg { position: absolute; inset: 0; margin: auto; width: 40px; height: 40px; fill: none; stroke: var(--accent-2); stroke-width: 2; stroke-linecap: round; }
.acc-grid__name {
  padding: 12px 16px 14px; border-top: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 500; font-size: 15px; line-height: 1.3;
}
.acc-grid__name small { display: block; margin-top: 3px; font-family: var(--font-body); font-weight: 400; font-size: 12.5px; color: var(--text-2); }
.acc-grid__more { border-style: dashed !important; color: var(--accent-2); }
.acc-grid__more .acc-grid__img::after { display: none; }
.acc-grid__more a { display: flex; flex-direction: column; height: 100%; }
.acc-grid__more .acc-grid__name { flex: 1; }
.acc-grid__more .acc-grid__img svg { transition: transform .3s var(--ease-out); }
.acc-grid__more:hover .acc-grid__img svg { transform: translateX(4px); }
@media (hover: none) { .acc-grid li:hover .acc-grid__img img { transform: none; } }

/* ---------- services ---------- */
.services { padding: clamp(80px, 10vw, 140px) 0; }
.section-head { margin-bottom: clamp(40px, 5vw, 64px); }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; perspective: 1200px; }
.card {
  position: relative; padding: 28px 24px 26px; border-radius: var(--radius);
  background: linear-gradient(170deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  border: 1px solid var(--line);
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .5s var(--ease), border-color .4s, box-shadow .4s;
  overflow: hidden;
}
.card:hover { border-color: rgba(91,143,199,.45); box-shadow: 0 30px 60px -30px rgba(91,143,199,.35); }
.card__glare {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s; z-index: 1;
  background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), rgba(141,184,230,.16), transparent 45%);
}
.tilt:hover .card__glare { opacity: 1; }
.card__icon {
  width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 40px;
  background: radial-gradient(circle at 30% 25%, rgba(141,184,230,.3), rgba(47,90,138,.18));
  border: 1px solid rgba(141,184,230,.3);
  transform: translateZ(40px);
  box-shadow: 0 12px 24px -10px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.15);
}
.card__icon svg { width: 30px; height: 30px; fill: none; stroke: var(--text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .8s var(--ease); }
.card__num { position: absolute; top: 26px; right: 24px; font-family: var(--font-display); font-size: 13px; color: var(--muted); letter-spacing: .12em; }
.card h3 { font-size: 22px; margin-bottom: 12px; transform: translateZ(20px); }
.card h3 em { display: block; font-size: 1.12em; }
.card p { color: var(--text-2); font-size: 15px; margin: 0; transform: translateZ(10px); }
/* icon micro-interactions */
.ico-gear svg { transform-origin: 50% 50%; }
.card:hover .ico-gear svg { transform: rotate(120deg); }
.card:hover .ico-wrench svg { transform: rotate(-24deg); animation: wobble .9s var(--ease); }
@keyframes wobble { 30% { transform: rotate(-30deg); } 60% { transform: rotate(-16deg); } 100% { transform: rotate(-24deg); } }
.ico-conveyor .ico-box { transition: transform .9s var(--ease); }
.card:hover .ico-conveyor .ico-box { transform: translateX(14px); }
.ico-loop .ico-draw { stroke-dasharray: 60; stroke-dashoffset: 0; transition: stroke-dashoffset 1s var(--ease); }
.card:hover .ico-loop .ico-draw { stroke-dashoffset: 120; }
.card:hover .ico-loop svg { transform: rotate(180deg); }

/* ---------- about ---------- */
.about { padding: clamp(80px, 10vw, 140px) 0; }
.about__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(36px, 6vw, 90px); align-items: center; }
.about__copy > p { color: var(--text-2); font-size: 17px; max-width: 54ch; }
.values { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 2px; }
.values li { display: grid; grid-template-columns: 190px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.values li:last-child { border-bottom: 1px solid var(--line); }
.values__k { font-family: var(--font-display); font-weight: 600; color: var(--text); }
.values li span:last-child { color: var(--text-2); font-size: 15px; }
.about__visual { position: relative; }
.range { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; perspective: 1100px; }
.range__tile {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  aspect-ratio: 1 / 0.92; padding: 18px 18px 16px; border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(70% 55% at 50% 62%, rgba(91,143,199,.22), transparent 70%),
    linear-gradient(170deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  border: 1px solid var(--line);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform .5s var(--ease), border-color .4s, box-shadow .4s;
}
.range__tile::after { /* floor line + contact shadow */
  content: ''; position: absolute; left: 14%; right: 14%; bottom: 22%; height: 14px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.55), transparent); z-index: 0;
}
.range__tile img {
  position: relative; z-index: 1; align-self: center; margin-top: 4%;
  width: 82%; height: 72%; object-fit: contain; object-position: center bottom;
  filter: drop-shadow(0 18px 18px rgba(0,0,0,.45));
  transform: translateZ(30px);
  transition: transform .6s var(--ease);
}
.range__tile:hover { border-color: rgba(91,143,199,.5); box-shadow: 0 30px 60px -30px rgba(91,143,199,.4); }
.range__tile:hover img { transform: translateZ(30px) translateY(-6px) scale(1.04); }
.range__tile:active { transform: scale(.98); transition-duration: .1s; }
.range__name {
  position: relative; z-index: 2; display: flex; align-items: baseline; gap: 10px;
  font-family: var(--font-display); font-weight: 500; font-size: 15px; color: var(--text);
}
.range__name span { font-size: 11px; letter-spacing: .14em; color: var(--accent-2); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0 0; }
.stats div { padding: 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.stats dt { font-family: var(--font-display); font-size: clamp(30px, 3.4vw, 44px); font-weight: 700; color: var(--accent-2); line-height: 1; margin-bottom: 8px; }
.stats dd { margin: 0; font-size: 13px; color: var(--text-2); }

/* ---------- contact ---------- */
.contact { padding: clamp(80px, 10vw, 140px) 0; position: relative; }
.contact::before { content: ''; position: absolute; inset: 10% 0 0; background: radial-gradient(50% 60% at 70% 50%, rgba(91,143,199,.12), transparent 70%); pointer-events: none; }
.contact__grid { position: relative; display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(36px, 6vw, 90px); align-items: start; }
.contact__list { list-style: none; padding: 0; margin: 36px 0 0; display: grid; gap: 14px; }
.contact__list li { display: grid; grid-template-columns: 112px 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.contact__label { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.contact__list a { color: var(--text); border-bottom: 1px solid rgba(91,143,199,.4); transition: color .25s, border-color .25s; justify-self: start; }
.contact__list a:hover { color: var(--accent-2); border-color: var(--accent-2); }
.contact__stack { display: grid; gap: 8px; justify-items: start; }
.contact__unit { display: grid; gap: 2px; line-height: 1.5; color: var(--text); }
.contact__unit + .contact__unit { margin-top: 8px; }
.contact__unit a { font-size: 14px; justify-self: start; margin-top: 2px; }
.contact__stack b { font-family: var(--font-display); font-weight: 500; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2); margin-right: 10px; }

.form {
  padding: clamp(22px, 3vw, 34px); border-radius: 22px;
  background: linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid var(--line); display: grid; gap: 16px;
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.7);
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 7px; }
.field > span { font-size: 13px; font-weight: 500; color: var(--text-2); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--text);
  background: rgba(10,11,13,.45); border: 1px solid var(--line-strong); border-radius: 12px;
  padding: 13px 14px; transition: border-color .25s, box-shadow .25s, background-color .25s;
  appearance: none; -webkit-appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238db8e6' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 40px;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(91,143,199,.18); background: rgba(10,11,13,.6); }
.field__err { display: none; color: #f0a3a3; font-size: 12px; }
.field.is-invalid input, .field.is-invalid textarea { border-color: #d77a7a; }
.field.is-invalid .field__err { display: block; }
.field.is-invalid input:focus, .field.is-invalid textarea:focus { box-shadow: 0 0 0 4px rgba(215,122,122,.2); }
.form__status { margin: 0; min-height: 1.4em; font-size: 14px; color: var(--accent-2); }
.form__status.is-error { color: #f0a3a3; }

/* ---------- footer ---------- */
.footer { position: relative; z-index: 2; border-top: 1px solid var(--line); background: rgba(14,15,17,.6); padding: 64px 0 96px; } /* bottom room so the WhatsApp button never covers "Back to top" */
.footer__grid { display: grid; grid-template-columns: 1.3fr .8fr 1fr 1.4fr; gap: 32px; }
.footer__brand p { color: var(--muted); font-size: 14px; max-width: 34ch; margin-top: 16px; }
.footer__brand .footer__tagline { font-family: var(--font-display); font-weight: 500; font-size: 16px; color: var(--accent-2); margin-bottom: -8px; }
.footer h4 { font-size: 13px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.footer nav a { display: block; padding: 5px 0; color: var(--text-2); font-size: 15px; transition: color .25s, transform .25s var(--ease); }
.footer nav a:hover { color: var(--text); transform: translateX(3px); }
.socials { display: flex; gap: 10px; margin: 20px 0 0; }
.socials a { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; border: 1px solid var(--line-strong); color: var(--text-2); transition: color .25s, border-color .25s, transform .3s var(--ease), background-color .25s; }
.socials a:hover { color: #fff; border-color: var(--accent); background: rgba(91,143,199,.15); transform: translateY(-3px); }
.socials svg { width: 18px; height: 18px; fill: currentColor; }
.footer__contact { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 4px; }
.footer__contact a { display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; color: var(--text-2); font-size: 15px; transition: color .25s; }
.footer__contact a:hover { color: var(--text); }
.footer__wa svg { width: 16px; height: 16px; fill: #4fce6f; }
.footer__units { font-style: normal; display: grid; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.footer__units a { color: var(--accent-2); white-space: nowrap; margin-left: 4px; }
.footer__units a:hover { color: var(--text); }
.footer__units b { font-weight: 500; color: var(--text-2); margin-right: 6px; }

/* floating WhatsApp: the fastest way to reach the plant from a phone */
.wa-fab {
  position: fixed; z-index: 40;
  right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 18px 0 14px; border-radius: 999px;
  background: #25d366; color: #0b2913;
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  box-shadow: 0 12px 30px -10px rgba(37,211,102,.55), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .2s var(--ease-out), opacity .25s var(--ease), visibility 0s;
}
.wa-fab svg { width: 24px; height: 24px; fill: currentColor; flex: none; }
.wa-fab:active { transform: scale(.96); transition-duration: .1s; }
/* out of the way while the spares panels own the bottom of the screen, and while the mobile menu is open */
body.spares-live .wa-fab, .nav.is-open ~ .wa-fab { opacity: 0; visibility: hidden; transform: translateY(8px); transition: transform .2s var(--ease-out), opacity .2s, visibility 0s .2s; }
@media (max-width: 600px) {
  .wa-fab { width: 54px; height: 54px; padding: 0; justify-content: center; }
  .wa-fab span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .wa-fab svg { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) { .wa-fab, .wa-fab:active, body.spares-live .wa-fab { transform: none; } }
.footer__bottom { display: flex; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.footer__bottom a:hover { color: var(--text); }

/* ---------- category pages ---------- */
.page main { padding-top: var(--nav-h); }
.page .nav { background: rgba(22,23,26,.72); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-color: var(--line); }
.page-hero { padding: clamp(36px, 6vw, 80px) 0 clamp(40px, 6vw, 70px); }
.page-hero__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 70px); align-items: center; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; font-size: 13px; color: var(--muted); }
.crumbs a { color: var(--text-2); transition: color .2s; }
.crumbs a:hover { color: var(--accent-2); }
.crumbs [aria-current] { color: var(--accent-2); }
.page-title { font-size: clamp(38px, 5.6vw, 72px); font-weight: 600; margin-bottom: 20px; }
.page-title em { font-size: 1.06em; }
.page-hero .lead { margin-bottom: 28px; }
.page-hero .hero__cta { justify-content: flex-start; }
.page-hero__img {
  position: relative; margin: 0; padding: 8% 6% 10%; border-radius: var(--radius);
  background: radial-gradient(70% 55% at 50% 62%, rgba(91,143,199,.24), transparent 70%), linear-gradient(170deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  border: 1px solid var(--line);
}
.page-hero__img::after { content: ''; position: absolute; left: 16%; right: 16%; bottom: 9%; height: 18px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.6), transparent); }
.page-hero__img img { position: relative; z-index: 1; width: 100%; height: auto; max-height: 420px; object-fit: contain; filter: drop-shadow(0 22px 22px rgba(0,0,0,.45)); }
.page-hero__img--parts img { max-height: 360px; }

.parts { padding: clamp(40px, 6vw, 80px) 0; }
.parts .section-title { max-width: 22ch; margin-bottom: clamp(28px, 4vw, 44px); }
.part-group { font-size: 22px; margin: 40px 0 16px; padding-top: 22px; border-top: 1px solid var(--line); }
.part-group:first-of-type { margin-top: 0; }
.part-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.part-list li {
  position: relative; padding: 22px 20px 20px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line); transition: border-color .3s, background-color .3s;
}
.part-list li:hover { border-color: rgba(91,143,199,.45); background: rgba(91,143,199,.06); }
.part-list__n { display: block; font-family: var(--font-display); font-size: 12px; letter-spacing: .14em; color: var(--accent-2); margin-bottom: 10px; }
.part-list h3 { font-size: 18px; line-height: 1.25; margin-bottom: 8px; }
.part-list p { margin: 0; font-size: 14.5px; color: var(--text-2); }

.cta-band { padding: clamp(30px, 5vw, 60px) 0; }
.cta-band__inner {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: center;
  padding: clamp(24px, 4vw, 44px); border-radius: 22px;
  background: radial-gradient(60% 120% at 0% 0%, rgba(91,143,199,.2), transparent 60%), linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(91,143,199,.3);
}
.cta-band__title { font-size: clamp(26px, 3.2vw, 40px); margin-bottom: 12px; }
.cta-band__title em { display: block; }
.cta-band p { margin: 0; color: var(--text-2); max-width: 48ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

.cat-links { padding: clamp(40px, 6vw, 80px) 0 clamp(60px, 8vw, 110px); }
.cat-links__title { font-size: clamp(22px, 2.4vw, 30px); margin-bottom: 22px; }
.cat-links__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.cat-tile {
  display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 16px;
  background: radial-gradient(70% 55% at 50% 45%, rgba(91,143,199,.18), transparent 70%), var(--surface);
  border: 1px solid var(--line); transition: border-color .3s, transform .3s var(--ease-out);
}
.cat-tile img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; filter: drop-shadow(0 12px 12px rgba(0,0,0,.4)); }
.cat-tile span { font-family: var(--font-display); font-weight: 500; font-size: 16px; }
.cat-tile:hover { border-color: rgba(91,143,199,.5); transform: translateY(-3px); }
.cat-tile:active { transform: scale(.98); }
@media (hover: none) { .cat-tile:hover { transform: none; } }

@media (max-width: 1100px) {
  .part-list { grid-template-columns: repeat(2, 1fr); }
  .cta-band__inner { grid-template-columns: 1fr; }
  .cta-band__actions { justify-content: flex-start; }
}
@media (max-width: 900px) {
  .page-hero__grid { grid-template-columns: 1fr; }
  .page-hero__img { order: -1; max-width: 560px; }
  .page-hero__img img { max-height: 300px; }
  .cat-links__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .part-list { grid-template-columns: 1fr; }
  .part-list li { padding: 18px 16px 16px; }
  .page-hero .hero__cta .btn { flex: 1 1 auto; }
  .cta-band__actions .btn { flex: 1 1 100%; }
  .cat-tile { padding: 12px; }
  .cat-tile span { font-size: 14px; }
}

/* ---------- scroll reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0ms); }
[data-reveal].is-in { opacity: 1; transform: none; }
.card[data-reveal].is-in { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .wordmark .ch, .hero__inner > *, .hero__tags, .hero__scroll { animation: none !important; opacity: 1 !important; transform: none !important; }
  /* looping decoration off; state changes become plain cross-fades */
  .pulse, .wordmark__word--accent, .hotspot__dot::after, .hero__scroll span, .hotspot-group.is-on .hotspot { animation: none; }
  .spare-panel, .spare-panel.is-active, .chips li, .spares__head { transform: none !important; }
  .btn.btn:hover, .btn.btn:active, .range__tile:active, .spares__nav button:active, .nav__links .nav__cta:active { transform: none; }
}

/* Touch screens fire :hover on tap and leave it stuck — drop the movement there, keep colour changes */
@media (hover: none) {
  .btn--primary:hover, .btn--ghost:hover, .socials a:hover, .footer nav a:hover { transform: none; }
  .btn--primary:hover::after { transform: translateX(-100%); }
  .btn--primary:hover svg, .btn--block:hover svg { transform: none; }
  .range__tile:hover img { transform: translateZ(30px); }
  .card:hover .ico-gear svg, .card:hover .ico-wrench svg, .card:hover .ico-loop svg { transform: none; animation: none; }
  .card:hover .ico-conveyor .ico-box { transform: none; }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1100px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .acc-grid { grid-template-columns: repeat(3, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  :root { --nav-h: 64px; }
  .nav__toggle { display: block; }
  .nav__links {
    position: fixed; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 12px var(--gutter) 24px;
    background: rgba(20,21,24,.97); border-bottom: 1px solid var(--line);
    transform: translateY(-12px); opacity: 0; visibility: hidden;
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s;
  }
  .nav.is-open .nav__links { opacity: 1; transform: none; visibility: visible; transition: opacity .3s var(--ease), transform .3s var(--ease); }
  .nav.is-open { background: rgba(20,21,24,.97); }
  .nav__links a { padding: 14px 4px; font-size: 18px; border-radius: 0; border-bottom: 1px solid var(--line); }
  .nav__links a.is-active::after { display: none; }
  .nav__links .nav__cta { margin: 16px 0 0; text-align: center; border-radius: 999px; border: 0; }

  .about__grid, .contact__grid { grid-template-columns: 1fr; }
  .about__visual { order: -1; }

  .hotspot__label { font-size: 11px; padding: 4px 8px; }
  .hotspot__line { width: 16px; }
  .hero__tags { display: none; }
  .hero .eyebrow { letter-spacing: .14em; font-size: 11px; }
  .hero__scroll { bottom: 28px; }
}

/* Spares layout follows the 3D scene, which switches on shape rather than width (portrait = aspect < 0.9 in scene.js):
   portrait puts the machine on top and the panel in a bottom sheet; anything wider keeps the panel beside the machine. */
@media (max-aspect-ratio: 9/10) {
  /* spares: machine top, panel bottom-sheet */
  .spares { height: 480vh; }
  .spares__sticky { justify-content: flex-end; gap: 12px; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .spares__head, .spares__panels, .spares__nav { width: 100%; max-width: 620px; margin: 0 auto; }
  .spares__head { position: absolute; top: calc(var(--nav-h) + 8px); left: var(--gutter); right: var(--gutter); width: auto; }
  .spares__head .eyebrow { margin-bottom: 0; }
  .spares__title { display: none; }
  .spares__panels { height: min(44svh, 380px); align-items: end; }
  .spare-panel {
    max-height: min(44svh, 380px); overflow-y: auto; overscroll-behavior: contain;
    padding: 20px 18px; backdrop-filter: none; -webkit-backdrop-filter: none;
    background: linear-gradient(160deg, rgba(34,36,41,.94), rgba(22,23,27,.94));
  }
  .spare-panel__desc { font-size: 14px; margin-bottom: 14px; }
  .chips { gap: 6px; }
  .chips li { font-size: 12px; padding: 8px 10px; }
  .spares__nav button { padding: 8px 10px; font-size: 13px; }
}
/* short landscape (phones on their side, small laptop windows): keep the side panel but make it fit the height */
@media (min-aspect-ratio: 9/10) and (max-height: 620px) {
  .spares__sticky { justify-content: flex-end; gap: 10px; padding-top: calc(var(--nav-h) + 8px); padding-bottom: 12px; }
  .spares__head .eyebrow { margin-bottom: 0; }
  .spares__title { display: none; }
  .spare-panel { padding: 16px 18px; max-height: calc(100svh - var(--nav-h) - 100px); overflow-y: auto; overscroll-behavior: contain; }
  .spare-panel__meta { margin-bottom: 8px; }
  .spare-panel__title { font-size: 22px; margin-bottom: 6px; }
  .spare-panel__desc { font-size: 13px; margin-bottom: 10px; }
  .chips { gap: 6px; }
  .chips li { font-size: 12px; padding: 7px 9px; }
  .spares__nav button { flex-direction: row; align-items: baseline; gap: 6px; padding: 7px 10px; font-size: 13px; }
}

/* short screens: the hero copy overlaps the 3D machines, so give it a soft backing to stay readable */
@media (max-height: 700px) {
  .hero__inner { position: relative; }
  .hero__inner::before {
    content: ''; position: absolute; inset: -4% -10% -8%; z-index: -1; pointer-events: none; border-radius: 40%;
    background: radial-gradient(closest-side, rgba(20,21,24,.82), rgba(20,21,24,.6) 65%, transparent);
  }
}
@media (max-height: 480px) and (min-aspect-ratio: 9/10) {
  .hero { padding-top: calc(var(--nav-h) + 10px); }
  .wordmark { font-size: clamp(40px, 17vh, 76px); margin-bottom: 14px; }
  .hero .eyebrow { margin-bottom: 10px; }
  .hero__sub, .hero__scroll { display: none; }
  .hero__cta .btn { --h: 44px; }
}

@media (max-width: 600px) {
  .cards { grid-template-columns: 1fr; }
  .acc-grid { grid-template-columns: repeat(2, 1fr); }
  .form__row { grid-template-columns: 1fr; }
  .values li { grid-template-columns: 1fr; gap: 4px; }
  .stats { gap: 8px; }
  .stats div { padding: 14px 12px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__bottom { flex-direction: column; }
  .hero__cta .btn { --h: 50px; padding: 0 22px; }
  .card__icon { margin-bottom: 28px; }
  .hotspot:nth-child(4) { display: none; }
  /* eyebrow wraps to two lines here: balance it and drop the dot so it isn't stranded at the edge */
  .hero .eyebrow { text-wrap: balance; line-height: 1.6; }
  .hero .eyebrow .pulse { display: none; }
  .hero__inner > .eyebrow { display: none; } /* the tagline takes its place so the hero keeps its height */
  .contact__stack b, .footer__units b { display: block; margin: 0 0 2px; }
  .footer__grid > div:last-child { grid-column: 1 / -1; }
}