@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,500;0,600;0,700;1,600&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --black: #090b0d;
  --panel: #11151a;
  --yellow: #ffd31a;
  --white: #f8fafc;
  --muted: #aeb5bd;
  --line: rgba(255, 255, 255, .16);
  --display: "Barlow Condensed", Arial Narrow, sans-serif;
  --body: "Inter", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--black); color: var(--white); }
body { font-family: var(--body); }
button { font: inherit; }

.deck { position: relative; width: 100%; height: 100%; background: var(--black); }
.slide {
  position: absolute;
  inset: 0;
  display: grid;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.018);
  transition: opacity .7s ease, transform 1.1s cubic-bezier(.2,.8,.2,1), visibility .7s;
  overflow: hidden;
  background: var(--black);
}
.slide.is-active { opacity: 1; visibility: visible; transform: scale(1); z-index: 2; }
.slide::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 1px solid rgba(255,255,255,.035); }
img { display: block; max-width: 100%; }
.hero-media, .quality-bg, .product-bg, .finale-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-media { object-position: center 60%; transform: scale(1.03); }
.shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,6,8,.94) 0%, rgba(4,6,8,.72) 42%, rgba(4,6,8,.08) 76%), linear-gradient(0deg, rgba(4,6,8,.85), transparent 45%); }
.shade.deep { background: linear-gradient(90deg, rgba(4,6,8,.96), rgba(4,6,8,.68) 52%, rgba(4,6,8,.30)), linear-gradient(0deg, rgba(4,6,8,.86), transparent 58%); }
.shade.left { background: linear-gradient(90deg, rgba(4,6,8,.97) 0%, rgba(4,6,8,.88) 30%, rgba(4,6,8,.10) 66%); }

.brand-row { position: absolute; z-index: 3; top: 4.5vh; left: 4.5vw; right: 4.5vw; display: flex; align-items: center; gap: 1.25rem; }
.brand-row::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.logo { width: clamp(180px, 17vw, 330px); filter: drop-shadow(0 12px 25px rgba(0,0,0,.35)); }
.eyebrow, .kicker { font: 700 clamp(.75rem, .9vw, 1rem)/1 var(--body); letter-spacing: .22em; text-transform: uppercase; }
.eyebrow { color: var(--yellow); white-space: nowrap; }
.kicker { color: var(--yellow); margin: 0 0 1.4rem; }

.hero-copy { position: absolute; z-index: 3; left: 4.5vw; bottom: 21vh; max-width: 56vw; }
h1, h2 { font-family: var(--display); text-transform: uppercase; letter-spacing: -.025em; margin: 0; line-height: .88; }
h1 { font-size: clamp(4.6rem, 8.2vw, 10rem); }
h2 { font-size: clamp(4rem, 7vw, 8.4rem); }
h1 em, h2 em { color: var(--yellow); font-style: italic; font-weight: 600; }
.lead { font-size: clamp(1rem, 1.4vw, 1.55rem); line-height: 1.55; color: #d6dbe0; max-width: 48rem; }
.hero-copy .lead { max-width: 44rem; margin-top: 1.8rem; }
.hero-stats { position: absolute; z-index: 3; bottom: 5vh; left: 4.5vw; display: flex; gap: clamp(2rem, 5vw, 6rem); }
.hero-stats div { display: grid; gap: .25rem; }
.hero-stats strong { font: 700 clamp(1.7rem, 2.6vw, 3.1rem)/1 var(--display); color: var(--yellow); }
.hero-stats span { color: #d5d9dc; font-size: clamp(.74rem, .9vw, 1rem); }

.section-no { position: absolute; top: 4.5vh; right: 4.5vw; font: 500 clamp(4.5rem, 9vw, 10rem)/.8 var(--display); color: rgba(255,255,255,.06); }
.section-head { position: absolute; z-index: 2; left: 4.5vw; top: 10vh; }
.section-head.compact h2 { font-size: clamp(3.6rem, 6.2vw, 7.6rem); }

.dark-grid { background: radial-gradient(circle at 82% 18%, rgba(255,211,26,.12), transparent 25%), linear-gradient(145deg, #151a20, #07090b 65%); }
.dark-grid::before { content:""; position:absolute; inset:0; opacity:.24; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 5vw 5vw; mask-image: linear-gradient(90deg,transparent,black); }
.metric-grid { position: absolute; z-index: 2; right: 4.5vw; top: 14vh; width: 45vw; display: grid; grid-template-columns: 1fr 1fr; }
.metric-grid article { min-height: 19vh; padding: 2.2vw; border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: end; background: rgba(255,255,255,.025); }
.metric-grid strong { font: 700 clamp(2.2rem, 4vw, 5rem)/1 var(--display); color: var(--yellow); }
.metric-grid span { margin-top: .65rem; color: var(--muted); font-size: clamp(.85rem, 1vw, 1.1rem); }
.timeline { position: absolute; z-index: 2; left: 4.5vw; right: 4.5vw; bottom: 7vh; display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr auto; align-items: center; gap: 1rem; }
.timeline div { display: grid; gap: .3rem; }
.timeline b { font: 700 clamp(1.8rem, 2.7vw, 3rem)/1 var(--display); }
.timeline span { color: var(--muted); font-size: clamp(.72rem, .9vw, 1rem); white-space: nowrap; }
.timeline i { height: 1px; background: linear-gradient(90deg,var(--yellow),rgba(255,211,26,.14)); }

.split { grid-template-columns: 48% 52%; }
.split-copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: 7vh 5vw 8vh; background: linear-gradient(145deg,#11151a,#07090b); }
.split-copy h2 { font-size: clamp(3.7rem, 6vw, 7.4rem); margin-bottom: 4vh; }
.statement { display: grid; grid-template-columns: 5.4rem 1fr; gap: 1.5rem; padding: 2vh 0; border-top: 1px solid var(--line); }
.statement span { color: var(--yellow); font-weight: 700; text-transform: uppercase; font-size: .85rem; letter-spacing: .12em; }
.statement p { margin: 0; color: #cdd2d7; line-height: 1.55; font-size: clamp(.9rem, 1.05vw, 1.15rem); }
.full-figure { margin: 0; height: 100%; overflow: hidden; position: relative; }
.full-figure::after { content:""; position:absolute; inset:0; box-shadow: inset 45px 0 70px rgba(7,9,11,.58); }
.full-figure img { width: 100%; height: 100%; object-fit: cover; }

.process { background: #0b0e11; }
.process-rail { position: absolute; z-index: 2; left: 36vw; right: 4vw; top: 10vh; bottom: 11vh; display: grid; grid-template-columns: repeat(2,1fr); gap: 1.4vw; }
.process-rail article { position: relative; overflow: hidden; min-height: 0; background: #15191e; border: 1px solid rgba(255,255,255,.1); padding: 1.4vw; display: grid; grid-template-columns: 42% 1fr; grid-template-rows: auto 1fr; column-gap: 1.4vw; }
.process-rail img { grid-row: 1/3; width: 100%; height: 100%; min-height: 0; object-fit: cover; filter: saturate(.78) contrast(1.06); }
.process-rail article > span { position: absolute; top: .7rem; left: .7rem; background: var(--yellow); color: #07090b; font: 800 .78rem/1 var(--body); padding: .55rem; }
.process-rail h3 { align-self: end; margin: 0 0 .5rem; font: 700 clamp(1.4rem, 2.2vw, 2.7rem)/1 var(--display); text-transform: uppercase; }
.process-rail p { margin: 0; color: var(--muted); line-height: 1.45; font-size: clamp(.74rem,.9vw,1rem); }

.engineering { grid-template-columns: 47% 53%; background: radial-gradient(circle at 15% 70%, rgba(255,211,26,.1), transparent 32%), #090b0d; }
.engineering-copy { position: relative; z-index: 2; align-self: center; padding: 6vw; }
.engineering-copy h2 { font-size: clamp(3.5rem,5.8vw,7rem); }
.check-list { list-style: none; margin: 4vh 0 0; padding: 0; border-top: 1px solid var(--line); }
.check-list li { padding: 1.2rem 0 1.2rem 2rem; border-bottom: 1px solid var(--line); position: relative; color: #d6dbe0; }
.check-list li::before { content:""; position:absolute; left:0; top:1.55rem; width:.7rem; height:.7rem; background:var(--yellow); transform:rotate(45deg); }
.engineering-visuals { display:grid; grid-template-rows: 43% 57%; padding: 7vh 4.5vw 7vh 0; gap: 1.4vw; }
.engineering-visuals figure { margin: 0; overflow: hidden; background: #fff; border: 1px solid var(--line); }
.engineering-visuals img { width: 100%; height: 100%; object-fit: cover; }
.engineering-visuals .blueprint { margin-left: 10vw; }

.quality { align-items:center; }
.quality-bg { object-position:center; filter: saturate(.55) contrast(1.1); }
.quality-copy { position: relative; z-index:2; width: 49vw; padding-left: 6vw; }
.quality-copy h2 { font-size: clamp(4.2rem,7.2vw,8.5rem); }
.quality-copy > p { max-width: 42rem; color:#d6dbe0; font-size:clamp(1rem,1.25vw,1.35rem); line-height:1.6; }
.quality-tags { display:flex; gap:.7rem; margin-top:3vh; }
.quality-tags span { border:1px solid rgba(255,211,26,.55); color:var(--yellow); min-width:4rem; padding:.75rem 1.1rem; text-align:center; font-weight:700; letter-spacing:.08em; }

.testing { grid-template-columns: 58% 42%; background:#0b0e11; }
.testing-visual { margin:5vh 0 5vh 4vw; position:relative; overflow:hidden; }
.testing-visual::after { content:""; position:absolute; inset:0; box-shadow:inset -90px 0 120px #0b0e11; }
.testing-visual img { width:100%; height:100%; object-fit:cover; }
.testing-copy { align-self:center; z-index:2; padding:4vw 5vw 4vw 1vw; }
.testing-copy h2 { font-size:clamp(3.8rem,6vw,7.2rem); }
.test-items { margin-top:4vh; border-top:1px solid var(--line); }
.test-items div { display:grid; grid-template-columns:3rem 1fr; align-items:center; padding:1.25rem 0; border-bottom:1px solid var(--line); }
.test-items b { color:var(--yellow); font:700 1.2rem/1 var(--display); }
.test-items span { color:#d3d8dc; line-height:1.4; }

.world { grid-template-columns: 64% 36%; background: linear-gradient(120deg,#f2f3f3 0%,#dadddf 64%,#101419 64%); }
.world-map { display:flex; align-items:center; justify-content:center; padding:7vw; }
.world-map img { width:100%; filter:contrast(1.08); mix-blend-mode:multiply; }
.world-copy { position:relative; z-index:2; align-self:center; padding:4vw; }
.world-copy h2 { font-size:clamp(3.5rem,5.7vw,6.8rem); }
.world-copy h2 strong { color:var(--yellow); }
.world-copy p { color:var(--muted); line-height:1.55; max-width:24rem; }

.portfolio { background:#090b0d; grid-template-columns:31% 69%; }
.portfolio-head { align-self:center; padding:5vw; position:relative; z-index:2; }
.portfolio-head h2 { font-size:clamp(3.6rem,5.5vw,6.8rem); }
.portfolio-grid { padding:5vh 4vw 8vh 0; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,1fr); gap:.8vw; }
.portfolio-grid article { position:relative; overflow:hidden; background:#171b1f; }
.portfolio-grid article::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.8),transparent 54%); }
.portfolio-grid img { width:100%; height:100%; object-fit:cover; transition:transform 5s ease; }
.slide.is-active .portfolio-grid article:nth-child(odd) img { transform:scale(1.045); }
.portfolio-grid span { position:absolute; z-index:2; left:1.1rem; right:1rem; bottom:1rem; text-transform:uppercase; font:600 clamp(.85rem,1.05vw,1.2rem)/1.15 var(--display); letter-spacing:.04em; }

.product-feature { align-items:center; }
.product-bg { object-position:center 60%; }
.product-copy { position:relative; z-index:2; margin-left:5vw; width:43vw; }
.product-copy h2 { font-size:clamp(4rem,6.8vw,8.2rem); }
.product-copy > p { color:#d6dbe0; line-height:1.55; font-size:clamp(1rem,1.2vw,1.3rem); max-width:36rem; }
.spec-row { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:3vh; }
.spec-row span { border:1px solid rgba(255,255,255,.26); padding:.75rem 1rem; font-size:.85rem; color:#e8ebed; backdrop-filter:blur(8px); }

.mosaic { grid-template-columns:32% 68%; background:#0b0e11; }
.mosaic-copy { align-self:center; padding:5vw; }
.mosaic-copy h2 { font-size:clamp(3.8rem,6vw,7.2rem); }
.mosaic-copy > p { color:var(--muted); line-height:1.6; }
.mosaic-grid { padding:5vh 4vw 8vh 0; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1.25fr .75fr; gap:1vw; }
.mosaic-grid figure { margin:0; position:relative; overflow:hidden; background:#171b1f; }
.mosaic-grid .wide { grid-column:1/3; }
.mosaic-grid img { width:100%; height:100%; object-fit:cover; }
.mosaic-grid figcaption { position:absolute; left:0; bottom:0; padding:1rem 1.3rem; background:var(--yellow); color:#090b0d; text-transform:uppercase; font:700 .9rem/1 var(--display); letter-spacing:.06em; }

.finale { align-items:center; justify-items:center; text-align:center; }
.finale-bg { filter:saturate(.68) contrast(1.1); }
.finale-copy { position:relative; z-index:2; display:grid; justify-items:center; }
.finale-logo { margin-bottom:5vh; width:clamp(220px,22vw,430px); }
.finale-copy h2 { font-size:clamp(4rem,7vw,8.8rem); }
.finale-copy p { margin-top:4vh; color:#cbd1d6; letter-spacing:.2em; font-size:clamp(.7rem,.95vw,1rem); }

.controls { position:fixed; z-index:20; right:2.2vw; bottom:2.2vh; display:flex; align-items:center; gap:.45rem; padding:.42rem; border:1px solid rgba(255,255,255,.15); background:rgba(5,7,9,.72); backdrop-filter:blur(14px); }
.control-button { display:grid; place-items:center; width:2.7rem; height:2.7rem; border:0; background:transparent; color:#fff; cursor:pointer; font-size:1.15rem; transition:.2s ease; }
.control-button:hover, .control-button:focus-visible { background:var(--yellow); color:#090b0d; outline:0; }
.control-button.play { color:var(--yellow); }
.control-button.play:hover { color:#090b0d; }
.counter { display:flex; align-items:center; gap:.55rem; padding:0 .55rem; font:700 .74rem/1 var(--body); letter-spacing:.08em; }
.counter i { width:1.8rem; height:1px; background:rgba(255,255,255,.38); }
.counter span:last-child { color:#89919a; }
.progress { position:fixed; z-index:20; left:0; bottom:0; width:100%; height:3px; background:rgba(255,255,255,.08); }
.progress span { display:block; height:100%; width:0; background:var(--yellow); }
.progress.running span { animation:run var(--duration, 8s) linear forwards; }
@keyframes run { from { width:0; } to { width:100%; } }
.slide-label { position:fixed; z-index:20; left:2.4vw; bottom:2.9vh; color:rgba(255,255,255,.52); text-transform:uppercase; font:600 .72rem/1 var(--body); letter-spacing:.18em; }

@media (max-width: 900px) {
  .split, .engineering, .testing, .world, .portfolio, .mosaic { grid-template-columns:1fr; }
  .slide { overflow-y:auto; }
  .full-figure, .engineering-visuals, .testing-visual, .world-map, .portfolio-grid, .mosaic-grid { display:none; }
  .split-copy, .engineering-copy, .testing-copy, .world-copy, .portfolio-head, .mosaic-copy { align-self:center; padding:9vw; }
  .hero-copy { max-width:88vw; bottom:26vh; }
  .hero-stats { flex-wrap:wrap; gap:1.2rem 2.3rem; }
  .metric-grid { left:5vw; right:5vw; width:auto; top:42vh; }
  .timeline { display:none; }
  .process-rail { left:5vw; top:40vh; grid-template-columns:1fr; overflow-y:auto; }
  .process-rail article { min-height:14rem; }
  .quality-copy, .product-copy { width:88vw; margin-left:0; padding:8vw; }
  .world { background:#101419; }
}

@media (prefers-reduced-motion: reduce) {
  .slide { transition:opacity .15s; transform:none; }
  .progress span, .portfolio-grid img { animation:none!important; transition:none!important; }
}