:root{
  --bg:#0a0c10; --bg2:#10131a; --card:#141821; --line:#20262f;
  --text:#eaf2ff; --muted:#9aa6b8;
  --amber:#ffba5a; --white:#eaf2ff;
  --glow:0 0 40px rgba(255,186,90,.25);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6; overflow-x:hidden;
}
h1,h2,h3,h4{line-height:1.15; font-weight:700; letter-spacing:-.02em}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}

/* NAV */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:24px;
  padding:16px 40px; backdrop-filter:blur(14px);
  background:rgba(10,12,16,.72); border-bottom:1px solid var(--line);
  transition:padding .3s,background .3s;
}
.nav.shrink{padding:10px 40px; background:rgba(10,12,16,.92)}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:20px; letter-spacing:.04em}
.brand-mark{width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#fff,var(--amber)); box-shadow:var(--glow)}
.nav-links{display:flex; gap:26px; margin-left:auto; flex-wrap:wrap}
.nav-links a{color:var(--muted); font-size:14px; transition:color .2s}
.nav-links a:hover{color:var(--text)}
.btn{display:inline-block; padding:12px 22px; border-radius:8px; font-size:14px; font-weight:600;
  transition:transform .2s,box-shadow .2s,background .2s; cursor:pointer; border:1px solid transparent}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(135deg,var(--amber),#ff9d3a); color:#1a1206; box-shadow:var(--glow)}
.btn-ghost{border-color:var(--line); color:var(--text)}
.btn-ghost:hover{border-color:var(--amber)}
.btn-quote{background:var(--amber); color:#1a1206}

/* HERO */
.hero{position:relative; padding:90px 40px 80px; overflow:hidden}
.hero-bg{position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(60% 50% at 75% 20%,rgba(255,186,90,.20),transparent 60%),
    radial-gradient(50% 60% at 15% 80%,rgba(120,170,255,.16),transparent 60%),
    var(--bg);
  animation:pulseGlow 7s ease-in-out infinite alternate}
@keyframes pulseGlow{from{opacity:.7}to{opacity:1}}
.hero-inner{position:relative; z-index:1; max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1.1fr 1fr; gap:50px; align-items:center}
.eyebrow{color:var(--amber); font-size:13px; letter-spacing:.18em; text-transform:uppercase; font-weight:600}
.hero h1{font-size:clamp(34px,5vw,60px); margin:14px 0 18px;
  background:linear-gradient(120deg,#fff,var(--amber)); -webkit-background-clip:text; background-clip:text; color:transparent}
.lede{color:var(--muted); font-size:18px; max-width:540px}
.hero-actions{display:flex; gap:14px; margin:28px 0 22px; flex-wrap:wrap}
.badges{display:flex; gap:10px; flex-wrap:wrap}
.badge{font-size:12px; font-weight:600; padding:6px 12px; border:1px solid var(--line);
  border-radius:6px; color:var(--muted); background:var(--bg2)}
.hero-art{position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--glow)}
.hero-art img{width:100%; height:560px; object-fit:cover}

/* MARQUEE */
.marquee{overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--bg2); padding:14px 0}
.marquee-track{display:flex; gap:46px; white-space:nowrap; width:max-content;
  animation:scroll 26s linear infinite}
.marquee-track span{color:var(--muted); font-size:14px; font-weight:600; letter-spacing:.08em}
.marquee-track span::before{content:"\25C6"; color:var(--amber); margin-right:46px}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* SECTIONS */
.section{padding:80px 40px; max-width:1200px; margin:0 auto}
.section-head{text-align:center; max-width:680px; margin:0 auto 48px}
.section-head h2{font-size:clamp(28px,4vw,42px)}
.section-head p{color:var(--muted); margin-top:12px; font-size:17px}
.grid{display:grid; gap:22px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  transition:transform .3s,border-color .3s,box-shadow .3s}
.card:hover{transform:translateY(-6px); border-color:var(--amber); box-shadow:var(--glow)}
.card .thumb{position:relative; overflow:hidden; height:220px}
.card .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .6s}
.card:hover .thumb img{transform:scale(1.12)}
.card .body{padding:18px 20px}
.card .body h3{font-size:19px}
.card .body p{color:var(--muted); font-size:14px; margin-top:6px}
.card .tag{display:inline-block; margin-top:12px; font-size:12px; color:var(--amber);
  border:1px solid var(--line); padding:4px 10px; border-radius:20px}
.card.pad{padding:26px}
.card.pad h3{color:var(--amber); margin-bottom:8px}
.card.pad p{color:var(--muted); font-size:15px}

/* FACTORY */
.factory{max-width:1200px}
.factory-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:46px; align-items:center}
.factory-video{position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--glow); aspect-ratio:16/10}
.factory-video video{position:relative; z-index:1; width:100%; height:100%; object-fit:cover}
.factory-fallback{position:absolute; inset:0; z-index:0;
  background:linear-gradient(135deg,#1a1206,#10131a)}
.factory-copy h2{font-size:clamp(26px,3.4vw,38px); margin:12px 0 16px}
.factory-copy p{color:var(--muted); margin-bottom:18px}

/* STATS */
.stats{text-align:center}
.stat{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:34px 18px}
.stat .num{display:block; font-size:46px; font-weight:800; color:var(--amber); text-shadow:var(--glow)}
.stat .label{color:var(--muted); font-size:14px; letter-spacing:.04em}

/* CERTS */
.certs{display:flex; justify-content:center; gap:18px; flex-wrap:wrap}
.cert{display:grid; place-items:center; width:110px; height:80px; font-weight:800; font-size:22px;
  letter-spacing:.05em; color:var(--text); background:var(--card); border:1px solid var(--line);
  border-radius:12px; transition:transform .3s,color .3s,border-color .3s}
.cert:hover{transform:translateY(-4px); color:var(--amber); border-color:var(--amber)}

/* CTA */
.cta{text-align:center; padding:90px 40px; max-width:760px; margin:20px auto;
  background:radial-gradient(60% 120% at 50% 0%,rgba(255,186,90,.15),transparent),var(--bg2);
  border:1px solid var(--line); border-radius:20px}
.cta h2{font-size:clamp(28px,4vw,42px)}
.cta p{color:var(--muted); margin:14px auto 26px; max-width:520px}

/* FOOTER */
.footer{border-top:1px solid var(--line); padding:60px 40px 30px; background:var(--bg2)}
.foot-grid{max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px}
.foot-grid h4{margin-bottom:12px; font-size:15px}
.foot-grid p{color:var(--muted); font-size:14px}
.foot-note{margin-top:12px; max-width:280px}
.copyright{text-align:center; color:var(--muted); font-size:13px; margin-top:40px;
  border-top:1px solid var(--line); padding-top:24px}

/* REVEAL */
.reveal{opacity:0; transform:translateY(32px); transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1; transform:none}

@media(max-width:900px){
  .hero-inner,.factory-grid{grid-template-columns:1fr}
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
  .hero-art img{height:340px}
}
@media(max-width:560px){
  .grid-3,.grid-4{grid-template-columns:1fr}
  .section,.hero{padding-left:20px; padding-right:20px}
}