/* ===========================================================
   CHAMUNDA FABCHEM — PRECISION MACHINERY DIGITAL SHOWROOM
   Design system: instrument-panel aesthetic.
   =========================================================== */

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

:root{
  --navy: #0A1A2B;
  --navy-2: #0F2438;
  --white: #F5F7F5;
  --paper: #FFFFFF;
  --teal: #12B5A6;
  --teal-dim: #0E8F84;
  --steel: #6E7B85;
  --steel-light: #A8B2B9;
  --hairline: #DCE1DF;
  --ink: #0B1420;
  --amber: #C77B3E;

  --display: 'Space Grotesk', sans-serif;
  --body: 'IBM Plex Sans', sans-serif;
  --mono: 'IBM Plex Mono', monospace;

  --container: 1240px;
  --radius: 2px;
  --ease: cubic-bezier(.22,.68,.32,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation:none !important; transition:none !important; } }

body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ list-style:none; }

.wrap{ max-width:var(--container); margin:0 auto; padding:0 32px; }
@media (max-width:640px){ .wrap{ padding:0 20px; } }

h1,h2,h3,h4{ font-family:var(--display); font-weight:600; letter-spacing:-0.01em; color:var(--navy); }
h1{ font-size:clamp(2.4rem,5vw,4.4rem); line-height:1.04; }
h2{ font-size:clamp(1.9rem,3.4vw,3rem); line-height:1.1; }
h3{ font-size:1.3rem; line-height:1.3; }
p{ color:#2B3742; }
.lede{ font-size:1.15rem; color:var(--steel); max-width:620px; }

.mono{ font-family:var(--mono); }
.eyebrow{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--teal-dim); display:flex; align-items:center; gap:10px; margin-bottom:14px; font-weight:500;
}
.eyebrow::before{ content:''; width:24px; height:1px; background:var(--teal); display:inline-block; }

.section{ padding:96px 0; position:relative; }
@media (max-width:768px){ .section{ padding:60px 0; } }
.section-navy{ background:var(--navy); color:var(--white); }
.section-navy h2, .section-navy h3{ color:var(--white); }
.section-navy p{ color:#B7C2C8; }
.hairline-top{ border-top:1px solid var(--hairline); }
.section-navy.hairline-top{ border-top:1px solid rgba(255,255,255,.1); }

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:.85rem; letter-spacing:.03em; font-weight:500;
  padding:15px 28px; border-radius:var(--radius); border:1px solid transparent;
  transition:all .25s var(--ease); white-space:nowrap;
}
.btn-primary{ background:var(--teal); color:var(--navy); }
.btn-primary:hover{ background:var(--teal-dim); transform:translateY(-2px); box-shadow:0 8px 24px rgba(18,181,166,.25); }
.btn-ghost{ background:transparent; color:var(--white); border-color:rgba(255,255,255,.3); }
.btn-ghost:hover{ border-color:var(--teal); color:var(--teal); }
.btn-outline-navy{ background:transparent; color:var(--navy); border-color:var(--navy); }
.btn-outline-navy:hover{ background:var(--navy); color:var(--white); }
.btn-sm{ padding:10px 18px; font-size:.75rem; }
.btn svg{ width:16px; height:16px; flex-shrink:0; }

/* ---------- NAV ---------- */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  background:rgba(10,26,43,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:transform .3s var(--ease);
}
.site-nav.nav-hide{ transform:translateY(-100%); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:76px; }
.nav-logo{ display:flex; flex-direction:column; color:var(--white); font-family:var(--display); }
.nav-logo b{ font-size:1.15rem; letter-spacing:.01em; }
.nav-logo span{ font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; color:var(--teal); text-transform:uppercase; }
.nav-links{ display:flex; gap:36px; align-items:center; }
.nav-links a{ color:#C9D2D6; font-size:.88rem; font-weight:500; position:relative; padding:6px 0; }
.nav-links a:hover, .nav-links a.active{ color:var(--white); }
.nav-links a::after{ content:''; position:absolute; bottom:0; left:0; right:100%; height:1px; background:var(--teal); transition:right .25s var(--ease); }
.nav-links a:hover::after, .nav-links a.active::after{ right:0; }
.nav-cta{ display:flex; align-items:center; gap:16px; }
.nav-burger{ display:none; background:none; border:none; color:var(--white); width:28px; height:20px; position:relative; }
.nav-burger span, .nav-burger::before, .nav-burger::after{ content:''; position:absolute; left:0; right:0; height:1.5px; background:var(--white); transition:.25s; }
.nav-burger span{ top:9px; }
.nav-burger::before{ top:0; }
.nav-burger::after{ bottom:0; }
@media (max-width:960px){
  .nav-links{ position:fixed; top:76px; left:0; right:0; bottom:0; background:var(--navy-2); flex-direction:column; justify-content:flex-start; padding:40px 32px; gap:26px; transform:translateX(100%); transition:transform .35s var(--ease); overflow-y:auto; }
  .nav-links.open{ transform:translateX(0); }
  .nav-links a{ font-size:1.3rem; }
  .nav-burger{ display:block; }
  .nav-cta .btn-primary{ display:none; }
}

/* ---------- HERO ---------- */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:flex-end;
  background:var(--navy); overflow:hidden; padding-top:76px;
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media video, .hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,26,43,.55) 0%, rgba(10,26,43,.35) 40%, rgba(10,26,43,.96) 100%);
}
.hero-inner{ position:relative; z-index:2; width:100%; padding-bottom:90px; }
.hero-tag{ font-family:var(--mono); font-size:.78rem; letter-spacing:.14em; color:var(--teal); text-transform:uppercase; margin-bottom:22px; display:flex; align-items:center; gap:10px; }
.hero-tag .dot{ width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 4px rgba(18,181,166,.25); animation:pulse 2s infinite; }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.4;} }
.hero h1{ color:var(--white); max-width:900px; }
.hero h1 em{ font-style:normal; color:var(--teal); }
.hero .lede{ color:#C7D0D3; margin-top:22px; font-size:1.2rem; max-width:560px; }
.hero-ctas{ display:flex; gap:16px; margin-top:38px; flex-wrap:wrap; }
.hero-readouts{ display:flex; gap:0; margin-top:64px; border-top:1px solid rgba(255,255,255,.15); padding-top:28px; flex-wrap:wrap; }
.readout{ padding-right:44px; margin-right:44px; border-right:1px solid rgba(255,255,255,.12); }
.readout:last-child{ border-right:none; }
.readout .num{ font-family:var(--mono); font-size:2rem; color:var(--white); font-weight:500; }
.readout .num span{ color:var(--teal); }
.readout .lbl{ font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--steel-light); margin-top:4px; }
@media (max-width:768px){ .hero-inner{ padding-bottom:60px; } .readout{ padding-right:24px; margin-right:24px; } .readout .num{ font-size:1.5rem; } }

.scroll-cue{ position:absolute; bottom:28px; left:32px; z-index:2; display:flex; align-items:center; gap:10px; color:var(--steel-light); font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; }
.scroll-cue .line{ width:1px; height:34px; background:linear-gradient(var(--teal), transparent); animation:scrolldown 1.8s infinite; }
@keyframes scrolldown{ 0%{ transform:scaleY(0); transform-origin:top; } 50%{ transform:scaleY(1); transform-origin:top; } 51%{ transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }
@media (max-width:768px){ .scroll-cue{ display:none; } }

/* ---------- MARQUEE ---------- */
.marquee-band{ background:var(--paper); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); padding:22px 0; overflow:hidden; }
.marquee-track{ display:flex; gap:56px; white-space:nowrap; width:max-content; animation:marquee 32s linear infinite; }
.marquee-band:hover .marquee-track{ animation-play-state:paused; }
.marquee-track span{ font-family:var(--mono); font-size:.82rem; letter-spacing:.06em; color:var(--steel); display:flex; align-items:center; gap:10px; text-transform:uppercase; }
.marquee-track span::before{ content:'◆'; color:var(--teal); font-size:.6rem; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- REVEAL ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-delay-1{ transition-delay:.1s; }
.reveal-delay-2{ transition-delay:.2s; }
.reveal-delay-3{ transition-delay:.3s; }

/* ---------- GRID / CARDS ---------- */
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:56px; flex-wrap:wrap; }
.category-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hairline); border:1px solid var(--hairline); }
@media (max-width:900px){ .category-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .category-grid{ grid-template-columns:1fr; } }
.cat-card{ background:var(--paper); padding:34px 28px; transition:background .25s; }
.cat-card:hover{ background:#FAFBFA; }
.cat-card .cat-num{ font-family:var(--mono); font-size:.72rem; color:var(--teal-dim); }
.cat-card h3{ margin:14px 0 10px; }
.cat-card p{ font-size:.92rem; color:var(--steel); }

/* Product cards */
.product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hairline); border:1px solid var(--hairline); }
@media (max-width:900px){ .product-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .product-grid{ grid-template-columns:1fr; } }
.product-card{ background:var(--paper); display:flex; flex-direction:column; }
.product-card .thumb{ aspect-ratio:4/3; overflow:hidden; position:relative; background:var(--navy); }
.product-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.product-card:hover .thumb img{ transform:scale(1.06); }
.flag{ position:absolute; top:12px; left:12px; background:var(--teal); color:var(--navy); font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; padding:4px 9px; text-transform:uppercase; font-weight:600; }
.product-card .body{ padding:22px 24px 26px; flex:1; display:flex; flex-direction:column; }
.product-card .cat-tag{ font-family:var(--mono); font-size:.68rem; color:var(--teal-dim); text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px; }
.product-card h3{ font-size:1.12rem; margin-bottom:8px; }
.product-card .spec-line{ font-family:var(--mono); font-size:.78rem; color:var(--steel); margin-top:auto; padding-top:14px; border-top:1px solid var(--hairline); display:flex; justify-content:space-between; }
.product-card .cta-row{ margin-top:16px; display:flex; gap:12px; }
.product-card .cta-row a{ font-family:var(--mono); font-size:.75rem; color:var(--navy); font-weight:600; display:flex; align-items:center; gap:6px; }
.product-card .cta-row a:hover{ color:var(--teal-dim); }

/* Feature toggle tabs */
.tab-bar{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:44px; }
.tab-btn{ font-family:var(--mono); font-size:.78rem; letter-spacing:.04em; padding:11px 20px; border:1px solid var(--hairline); background:var(--paper); color:var(--steel); border-radius:var(--radius); transition:.2s; text-transform:uppercase; }
.tab-btn:hover{ border-color:var(--teal); color:var(--navy); }
.tab-btn.active{ background:var(--navy); border-color:var(--navy); color:var(--white); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

/* ---------- MEGA MENU (Products dropdown) ---------- */
.nav-mega-wrap{ position:relative; }
.mega-trigger{ display:flex; align-items:center; gap:6px; }
.mega-trigger svg{ width:11px; height:11px; transition:transform .25s; }
.nav-mega{
  position:fixed; left:0; right:0; top:76px; background:rgba(10,26,43,.98); backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08);
  display:grid; grid-template-columns:repeat(6,1fr) 1.3fr; gap:0;
  opacity:0; visibility:hidden; transform:translateY(-10px); transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  box-shadow:0 30px 60px rgba(0,0,0,.35); z-index:199;
}
.nav-mega-wrap:hover .nav-mega, .nav-mega-wrap.mega-open .nav-mega{ opacity:1; visibility:visible; transform:translateY(0); }
.nav-mega-wrap:hover .mega-trigger svg, .nav-mega-wrap.mega-open .mega-trigger svg{ transform:rotate(180deg); }
.nav-mega-col{ padding:34px 26px; border-right:1px solid rgba(255,255,255,.06); }
.nav-mega-col h5{ font-family:var(--mono); font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; color:var(--teal); margin-bottom:18px; }
.nav-mega-col a{ display:block; color:#C9D2D6; font-size:.86rem; padding:8px 0; transition:color .2s, padding-left .2s; }
.nav-mega-col a:hover{ color:var(--white); padding-left:4px; }
.nav-mega-cta{ background:rgba(18,181,166,.06); border-right:none; display:flex; flex-direction:column; justify-content:center; }
.nav-mega-cta p{ color:#B7C2C8; font-size:.84rem; margin-bottom:16px; }
.nav-mega-cta .btn{ align-self:flex-start; }
@media (max-width:1180px){ .nav-mega{ grid-template-columns:repeat(3,1fr); } .nav-mega-cta{ grid-column:1/-1; } }
@media (max-width:960px){ .nav-mega{ display:none !important; } }

/* ---------- WHY GRID ---------- */
.why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px; }
@media (max-width:900px){ .why-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .why-grid{ grid-template-columns:1fr; } }
.why-card{ border-top:2px solid var(--teal); padding-top:22px; }
.why-card .ico{ width:38px; height:38px; margin-bottom:20px; color:var(--teal); }
.why-card h3{ font-size:1.05rem; margin-bottom:10px; }
.why-card p{ font-size:.92rem; color:var(--steel); }

/* ---------- TIMELINE ---------- */
.timeline{ position:relative; }
.timeline-track{ position:absolute; left:20px; top:0; bottom:0; width:1px; background:var(--hairline); }
.section-navy .timeline-track{ background:rgba(255,255,255,.15); }
.timeline-item{ position:relative; padding-left:64px; padding-bottom:64px; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-dot{ position:absolute; left:14px; top:4px; width:13px; height:13px; border-radius:50%; background:var(--navy); border:2px solid var(--teal); }
.section-navy .timeline-dot{ background:var(--navy-2); }
.timeline-year{ font-family:var(--mono); color:var(--teal); font-size:.85rem; letter-spacing:.06em; margin-bottom:8px; }
.timeline-item h3{ margin-bottom:8px; }
.timeline-item p{ max-width:520px; }

/* ---------- HOTSPOT DIAGRAM ---------- */
.hotspot-wrap{ position:relative; background:var(--navy-2); border:1px solid rgba(255,255,255,.08); }
.hotspot-diagram{ position:relative; width:100%; }
.hotspot-diagram svg{ width:100%; height:auto; display:block; }
.hotspot{ cursor:pointer; }
.hotspot circle.ring{ fill:rgba(18,181,166,.15); stroke:var(--teal); stroke-width:1.4; animation:hs-pulse 2.4s infinite; transform-origin:center; }
.hotspot circle.dot{ fill:var(--teal); }
@keyframes hs-pulse{ 0%{ transform:scale(1); opacity:1; } 70%{ transform:scale(2.1); opacity:0; } 100%{ opacity:0; } }
.hotspot-card{
  position:absolute; max-width:260px; background:var(--paper); color:var(--ink); padding:16px 18px;
  border-left:3px solid var(--teal); font-size:.85rem; box-shadow:0 20px 50px rgba(0,0,0,.35);
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; transform:translateY(6px); z-index:10;
}
.hotspot-card.show{ opacity:1; pointer-events:auto; transform:translateY(0); }
.hotspot-card b{ display:block; font-family:var(--display); color:var(--navy); margin-bottom:5px; font-size:.95rem; }
.hotspot-legend{ display:flex; gap:22px; flex-wrap:wrap; padding:20px 28px; border-top:1px solid rgba(255,255,255,.08); }
.hotspot-legend span{ font-family:var(--mono); font-size:.72rem; color:var(--steel-light); display:flex; align-items:center; gap:8px; }
.hotspot-legend .sw{ width:8px; height:8px; background:var(--teal); border-radius:50%; }

/* ---------- CALCULATOR ---------- */
.calc-box{ background:var(--paper); border:1px solid var(--hairline); display:grid; grid-template-columns:1fr 1fr; }
@media (max-width:860px){ .calc-box{ grid-template-columns:1fr; } }
.calc-steps{ padding:48px; border-right:1px solid var(--hairline); }
@media (max-width:860px){ .calc-steps{ border-right:none; border-bottom:1px solid var(--hairline); padding:36px 28px; } }
.calc-progress{ display:flex; gap:8px; margin-bottom:36px; }
.calc-progress .bar{ height:2px; flex:1; background:var(--hairline); position:relative; overflow:hidden; }
.calc-progress .bar.done::after{ content:''; position:absolute; inset:0; background:var(--teal); }
.calc-step{ display:none; }
.calc-step.active{ display:block; }
.calc-step .step-label{ font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--teal-dim); margin-bottom:10px; }
.opt-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:20px; }
.opt-btn{ text-align:left; padding:16px 18px; border:1px solid var(--hairline); background:var(--paper); transition:.2s; }
.opt-btn:hover{ border-color:var(--teal); }
.opt-btn.sel{ border-color:var(--teal); background:rgba(18,181,166,.06); }
.opt-btn .t{ font-weight:600; font-size:.92rem; color:var(--navy); }
.opt-btn .d{ font-family:var(--mono); font-size:.72rem; color:var(--steel); margin-top:4px; }
.range-row{ margin-top:26px; }
.range-row label{ font-family:var(--mono); font-size:.78rem; color:var(--steel); display:flex; justify-content:space-between; margin-bottom:10px; }
.range-row input[type=range]{ width:100%; accent-color:var(--teal); }
.calc-nav{ display:flex; justify-content:space-between; margin-top:36px; }
.calc-visual{ padding:48px; display:flex; flex-direction:column; justify-content:center; background:var(--navy); color:var(--white); }
.calc-visual .readout-box{ font-family:var(--mono); }
.calc-visual .big-num{ font-size:3rem; color:var(--teal); line-height:1; }
.calc-visual .flow-bar{ height:6px; background:rgba(255,255,255,.1); margin:22px 0; position:relative; overflow:hidden; }
.calc-visual .flow-bar span{ position:absolute; left:0; top:0; bottom:0; background:var(--teal); width:0%; transition:width 1s var(--ease); }
.result-line{ display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.1); font-family:var(--mono); font-size:.85rem; }
.result-line b{ color:var(--white); }

/* ---------- TESTIMONIALS ---------- */
.testi-track-wrap{ overflow:hidden; }
.testi-track{ display:flex; gap:1px; background:var(--hairline); border:1px solid var(--hairline); transition:transform .5s var(--ease); }
.testi-card{ background:var(--paper); min-width:100%; padding:44px; display:grid; grid-template-columns:120px 1fr; gap:32px; align-items:center; }
@media (max-width:640px){ .testi-card{ grid-template-columns:1fr; padding:30px; } }
.testi-card img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:50%; }
.testi-card .stars{ color:var(--amber); font-size:.85rem; margin-bottom:14px; letter-spacing:2px; }
.testi-card p.quote{ font-family:var(--display); font-size:1.15rem; color:var(--navy); line-height:1.45; margin-bottom:16px; }
.testi-card .who{ font-family:var(--mono); font-size:.78rem; color:var(--steel); }
.testi-card .who b{ color:var(--navy); }
.testi-dots{ display:flex; gap:10px; justify-content:center; margin-top:28px; }
.testi-dots button{ width:8px; height:8px; border-radius:50%; background:var(--hairline); border:none; }
.testi-dots button.active{ background:var(--teal); }

/* ---------- FAQ ---------- */
.faq-item{ border-bottom:1px solid var(--hairline); }
.faq-q{ display:flex; justify-content:space-between; align-items:center; padding:24px 0; cursor:pointer; gap:20px; }
.faq-q h3{ font-size:1.02rem; }
.faq-q .plus{ font-family:var(--mono); color:var(--teal); font-size:1.3rem; flex-shrink:0; transition:transform .25s; }
.faq-item.open .faq-q .plus{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s var(--ease); }
.faq-item.open .faq-a{ max-height:400px; }
.faq-a p{ padding-bottom:24px; color:var(--steel); max-width:700px; }

/* ---------- BROCHURE / LEAD ---------- */
.lead-box{ background:var(--navy); color:var(--white); padding:64px; display:grid; grid-template-columns:1.3fr 1fr; gap:48px; align-items:center; }
@media (max-width:860px){ .lead-box{ grid-template-columns:1fr; padding:40px 28px; } }
.lead-form{ display:flex; flex-direction:column; gap:12px; }
.lead-form input, .lead-form select{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); color:var(--white);
  padding:14px 16px; font-family:var(--body); font-size:.92rem; border-radius:var(--radius);
}
.lead-form input::placeholder{ color:#8492A0; }
.lead-form input:focus, .lead-form select:focus{ outline:1px solid var(--teal); border-color:var(--teal); }

/* ---------- FOOTER ---------- */
.footer{ background:var(--navy); color:#B7C2C8; padding:72px 0 28px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:48px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.1); }
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.footer h4{ color:var(--white); font-family:var(--mono); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:20px; }
.footer ul li{ margin-bottom:11px; font-size:.9rem; }
.footer ul li a:hover{ color:var(--teal); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:26px; flex-wrap:wrap; gap:14px; font-size:.82rem; }
.footer-social{ display:flex; gap:16px; }
.footer-social a{ width:36px; height:36px; border:1px solid rgba(255,255,255,.2); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:.2s; }
.footer-social a:hover{ border-color:var(--teal); color:var(--teal); }
.footer-credit{ font-family:var(--mono); font-size:.75rem; }
.footer-credit a{ color:var(--teal); }

/* ---------- SIDEBAR (contextual, appears after hero) ---------- */
.side-nav{
  position:fixed; right:26px; top:50%; transform:translateY(-50%) translateX(120%); z-index:150;
  display:flex; flex-direction:column; gap:2px; background:rgba(10,26,43,.88); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.1); padding:8px; transition:transform .5s var(--ease);
}
.side-nav.show{ transform:translateY(-50%) translateX(0); }
.side-nav button{
  background:none; border:none; color:#AEB8BE; font-family:var(--mono); font-size:.72rem;
  padding:11px 18px; text-align:left; white-space:nowrap; display:flex; align-items:center; gap:10px;
  border-left:2px solid transparent; transition:.2s;
}
.side-nav button .sq{ width:5px; height:5px; background:var(--steel); flex-shrink:0; }
.side-nav button:hover, .side-nav button.active{ color:var(--white); border-left-color:var(--teal); background:rgba(255,255,255,.04); }
.side-nav button.active .sq{ background:var(--teal); }
@media (max-width:1180px){ .side-nav{ display:none; } }

.side-nav-mobile-btn{
  position:fixed; right:18px; bottom:88px; z-index:150; width:52px; height:52px; border-radius:50%;
  background:var(--navy); border:1px solid var(--teal); color:var(--teal); display:none;
  align-items:center; justify-content:center; transform:scale(0); transition:transform .3s var(--ease);
}
.side-nav-mobile-btn.show{ transform:scale(1); }
@media (max-width:1180px){ .side-nav-mobile-btn{ display:flex; } }
.side-drawer{
  position:fixed; inset:0 0 0 auto; width:82%; max-width:320px; background:var(--navy-2); z-index:250;
  transform:translateX(100%); transition:transform .35s var(--ease); padding:30px 26px; overflow-y:auto;
}
.side-drawer.open{ transform:translateX(0); }
.side-drawer-close{ background:none; border:none; color:var(--white); font-size:1.4rem; margin-bottom:20px; }
.side-drawer button.d-item{ display:block; width:100%; text-align:left; background:none; border:none; border-bottom:1px solid rgba(255,255,255,.08); color:var(--white); padding:16px 0; font-family:var(--mono); font-size:.85rem; }
.drawer-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:240; opacity:0; pointer-events:none; transition:opacity .3s; }
.drawer-overlay.show{ opacity:1; pointer-events:auto; }

/* ---------- FLOATERS ---------- */
.floaters{ position:fixed; right:22px; bottom:22px; z-index:180; display:flex; flex-direction:column; gap:14px; align-items:flex-end; }
.floater-btn{
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--white); box-shadow:0 10px 30px rgba(0,0,0,.25); position:relative;
}
.floater-btn.wa{ background:#25D366; }
.floater-btn.mail{ background:var(--navy); border:1px solid var(--teal); }
.floater-btn.wa::before{ content:''; position:absolute; inset:0; border-radius:50%; border:2px solid #25D366; animation:hs-pulse 2.2s infinite; }

.mobile-sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:170; background:linear-gradient(90deg,var(--navy),var(--navy-2));
  padding:14px 20px; display:none; align-items:center; justify-content:space-between; gap:14px;
  border-top:1px solid rgba(255,255,255,.1);
}
@media (max-width:768px){ .mobile-sticky-cta{ display:flex; } body{ padding-bottom:78px; } }
.mobile-sticky-cta span{ color:var(--white); font-family:var(--display); font-size:.9rem; }
.mobile-sticky-cta a{ background:var(--teal); color:var(--navy); font-family:var(--mono); font-size:.78rem; font-weight:600; padding:11px 18px; }

/* ---------- WELCOME SCREEN ---------- */
.welcome-screen{
  position:fixed; inset:0; background:var(--navy); z-index:999; display:flex; flex-direction:column;
  align-items:center; justify-content:center; transition:opacity .6s, visibility .6s;
}
.welcome-screen.hide{ opacity:0; visibility:hidden; pointer-events:none; }
.welcome-mono{ font-family:var(--mono); color:var(--teal); font-size:.75rem; letter-spacing:.18em; text-transform:uppercase; margin-bottom:26px; }
.welcome-hooks{ position:relative; height:60px; text-align:center; padding:0 20px; }
.welcome-hooks span{
  position:absolute; left:0; right:0; color:var(--white); font-family:var(--display); font-size:clamp(1.2rem,3vw,1.8rem);
  opacity:0; transition:opacity .5s;
}
.welcome-hooks span.show{ opacity:1; }
.welcome-bar{ width:220px; height:2px; background:rgba(255,255,255,.12); margin-top:40px; overflow:hidden; }
.welcome-bar span{ display:block; height:100%; background:var(--teal); width:0%; transition:width 5.2s linear; }
.welcome-skip{ position:absolute; bottom:34px; right:34px; color:var(--steel-light); font-family:var(--mono); font-size:.72rem; border:1px solid rgba(255,255,255,.2); padding:9px 16px; letter-spacing:.06em; }

/* ---------- GALLERY / MEDIA ---------- */
.gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; }
@media (max-width:768px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); } }
.gallery-grid img{ width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; cursor:pointer; transition:opacity .2s; }
.gallery-grid img:hover{ opacity:.8; }
.lightbox{ position:fixed; inset:0; background:rgba(6,12,20,.94); z-index:300; display:none; align-items:center; justify-content:center; padding:40px; }
.lightbox.open{ display:flex; }
.lightbox img{ max-width:90vw; max-height:85vh; object-fit:contain; }
.lightbox-close{ position:absolute; top:24px; right:32px; color:var(--white); font-size:2rem; background:none; border:none; }

.video-frame{ position:relative; aspect-ratio:16/9; background:var(--navy); overflow:hidden; }
.video-frame video{ width:100%; height:100%; object-fit:cover; }
.video-frame .play-mask{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(10,26,43,.3); cursor:pointer; transition:opacity .3s; }
.video-frame .play-mask .pb{ width:76px; height:76px; border-radius:50%; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.4); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; }
.video-frame .play-mask .pb svg{ width:26px; height:26px; color:var(--white); margin-left:4px; }
.video-frame.playing .play-mask{ opacity:0; pointer-events:none; }
.video-caption{ position:absolute; left:20px; bottom:16px; font-family:var(--mono); color:var(--white); font-size:.72rem; letter-spacing:.06em; background:rgba(10,26,43,.6); padding:6px 12px; }

/* ---------- MACHINES IN MOTION (video showcase strip) ---------- */
.motion-scroll{ display:flex; gap:2px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px; }
.motion-scroll::-webkit-scrollbar{ height:4px; }
.motion-scroll::-webkit-scrollbar-thumb{ background:var(--teal); }
.motion-card{ position:relative; flex:0 0 320px; aspect-ratio:4/5; scroll-snap-align:start; overflow:hidden; background:var(--navy); }
@media (max-width:640px){ .motion-card{ flex-basis:78vw; } }
.motion-card video, .motion-card img{ width:100%; height:100%; object-fit:cover; }
.motion-card .overlay{ position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(10,26,43,.92) 100%); display:flex; flex-direction:column; justify-content:flex-end; padding:22px; }
.motion-card .cat{ font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--teal); margin-bottom:6px; }
.motion-card h3{ color:var(--white); font-size:1.05rem; margin-bottom:10px; }
.motion-card a{ font-family:var(--mono); font-size:.72rem; color:var(--white); border-bottom:1px solid var(--teal); width:fit-content; padding-bottom:2px; }
.motion-card .pulse-badge{ position:absolute; top:16px; left:16px; display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:.6rem; letter-spacing:.08em; color:var(--white); background:rgba(10,26,43,.6); padding:5px 10px; text-transform:uppercase; }
.motion-card .pulse-badge .dot{ width:6px; height:6px; border-radius:50%; background:var(--teal); animation:pulse 2s infinite; }

/* ---------- SPEC TABLE ---------- */
.spec-table{ width:100%; border-collapse:collapse; }
.spec-table tr{ border-bottom:1px solid var(--hairline); }
.spec-table td{ padding:16px 0; font-size:.92rem; }
.spec-table td:first-child{ color:var(--steel); font-family:var(--mono); font-size:.82rem; width:44%; }
.spec-table td:last-child{ color:var(--navy); font-weight:600; text-align:right; }

/* ---------- MISC ---------- */
.pill{ display:inline-block; font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; background:rgba(18,181,166,.1); color:var(--teal-dim); padding:5px 12px; border:1px solid rgba(18,181,166,.3); }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
@media (max-width:860px){ .two-col{ grid-template-columns:1fr; gap:36px; } }
.divider{ height:1px; background:var(--hairline); margin:64px 0; }
.legal-modal{ position:fixed; inset:0; background:rgba(6,12,20,.7); z-index:400; display:none; align-items:center; justify-content:center; padding:24px; }
.legal-modal.open{ display:flex; }
.legal-modal-box{ background:var(--paper); max-width:640px; max-height:80vh; overflow-y:auto; padding:44px; position:relative; }
.legal-modal-box h3{ margin-bottom:18px; }
.legal-modal-box p{ margin-bottom:14px; font-size:.92rem; color:var(--steel); }
.legal-modal-close{ position:absolute; top:20px; right:20px; background:none; border:none; font-size:1.4rem; color:var(--steel); }