:root{
  --black:#000; --white:#fff; --ink:#0a0a0a;
  --hot:#ff2a2a; --warm:#ffa200;
  --pad:clamp(16px,2vw,32px); --max:1200px;
  --h1:clamp(38px,7vw,108px); --h2:clamp(28px,5vw,64px); --lead:clamp(16px,2vw,22px);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:#000; color:#fff;
  font-family: Inter, ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}

/* NAV */
.nav{
  position:fixed; inset:0 0 auto 0; height:72px; z-index:50;
  display:flex; align-items:center; justify-content:space-between; padding:0 var(--pad);
  background:linear-gradient(to bottom, rgba(0,0,0,.6), rgba(0,0,0,0));
  backdrop-filter:saturate(130%) blur(6px);
}
.logo{display:flex; align-items:center; gap:12px}
.logo img{width:48px;height:48px;border-radius:50%;
  filter:drop-shadow(0 0 20px rgba(255,90,0,.35));
  transition:transform .35s ease, filter .35s ease}
.logo:hover img{transform:rotate(6deg) scale(1.04); filter:drop-shadow(0 0 26px rgba(255,140,0,.6))}
.logo .word{font-weight:800; letter-spacing:.04em}
.nav-links{display:flex; gap:22px}
.nav-links a.glow{position:relative; font-weight:600}
.nav-links a.glow::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background:linear-gradient(90deg,var(--hot),var(--warm));
  transform:scaleX(0); transform-origin:right; transition:transform .3s ease;
}
.nav-links a.glow:hover::after{transform-origin:left; transform:scaleX(1)}

/* HERO */
.hero{position:relative; min-height:100svh; display:grid; place-items:end start; overflow:hidden}
.hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1}
.hero::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.35) 40%, rgba(0,0,0,.85) 100%);
}
.hero-inner{position:relative; z-index:1; padding:calc(72px + var(--pad)) var(--pad) var(--pad); max-width:var(--max)}
.brand{
  margin:0 0 .4rem; font-weight:900; text-transform:uppercase;
  font-size:var(--h1); line-height:.9; letter-spacing:.04em;
  text-shadow:0 0 24px rgba(255,30,0,.25);
}
.sub{margin:0 0 18px; max-width:min(70ch,92vw); color:rgba(255,255,255,.9)}
.hero-cta{display:flex; gap:14px; align-items:center}
.btn{
  display:inline-block; padding:12px 18px; border-radius:10px; font-weight:800; color:#000;
  background:linear-gradient(90deg,var(--hot),var(--warm)); box-shadow:0 0 24px rgba(255,80,0,.25);
}
.btn.big{padding:16px 22px; font-size:18px}
.link{opacity:.9} .link:hover{opacity:1}

/* Ticker */
.ticker{position:absolute; left:0; right:0; bottom:0; height:42px; overflow:hidden;
  border-top:1px solid rgba(255,255,255,.15); background:rgba(0,0,0,.35)}
.ticker-track{
  display:flex; align-items:center; gap:14px; white-space:nowrap;
  padding:0 var(--pad); font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  animation:marquee 18s linear infinite;
}
.ticker i{opacity:.35; font-style:normal}
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* SECTIONS */
.section{padding: clamp(72px, 12vh, 160px) 0}
.section--white{background:#fff; color:#000}
.container{max-width:var(--max); margin:0 auto; padding:0 var(--pad)}
.headline{font-size:var(--h2); line-height:1; margin:0 0 24px; font-weight:900}
.lead{font-size:var(--lead); margin:0}

/* METRICS */
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; padding:0; margin:0; list-style:none}
.kpis li{background:#f6f6f6; border:1px solid #e9e9e9; border-radius:12px; padding:18px 16px; text-align:center}
.kpis strong{display:block; font-size:clamp(20px,4vw,40px)}
.kpis span{opacity:.7}
.metrics .note{margin-top:10px; opacity:.6}

/* CASES rail (horizontal) */
.cases{background:#0a0a0a; color:#fff}
.rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(280px, 38vw);
  gap:16px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
  padding:0 var(--pad) var(--pad);
}
.card{
  scroll-snap-align:center; background:#111; border:1px solid rgba(255,255,255,.12);
  border-radius:12px; overflow:hidden; display:flex; flex-direction:column;
}
.card img{width:100%; height:50svh; object-fit:cover}
.card.tall img{height:60svh}
.card.wide img{height:42svh}
.card h3{margin:12px 12px 6px; font-size:18px}
.card p{margin:0 12px 16px; opacity:.8}

/* SERVICES */
.grid-2{display:grid; grid-template-columns:1.1fr .9fr; gap:28px}
@media (max-width:900px){ .grid-2{grid-template-columns:1fr} }
.services{margin:0; padding:0; list-style:none; display:grid; gap:16px}
.services li{border:1px solid #e9e9e9; border-radius:12px; padding:16px; background:#f7f7f7}

/* TECH STRIP */
.tech{background:#000; color:#fff}
.logos{
  margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:14px;
}
.logos li{
  padding:10px 14px; border-radius:10px; border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03)
}

/* CONTACT */
.closer{background:#000; color:#fff}
.center{text-align:center}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  .ticker-track{animation:none}
}

/* Utilities */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}