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

:root {
  color-scheme: dark;
  --bg: #070812;
  --panel: #0d1020;
  --cyan: #00f5d4;
  --blue: #3a8bff;
  --gold: #ffd36a;
  --text: #f7f8ff;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; color: var(--text);
  background: radial-gradient(ellipse at 50% 0%, #17244a 0%, #090b18 42%, #05060c 100%);
  font-family: Inter, sans-serif;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .17;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 75%);
}
.page-shell { width: min(1380px, calc(100% - 44px)); margin: 0 auto; position: relative; }
.site-header { height: 82px; display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; gap:11px; align-items:center; color:white; text-decoration:none; font:800 19px 'Space Grotesk',sans-serif; letter-spacing:.09em; }
.brand-mark { width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--cyan); border-radius:10px; color:#06121a; background:linear-gradient(135deg,var(--cyan),#4b9dff); box-shadow:0 0 18px #00f5d477; }
.brand-accent { color:var(--cyan); }
.header-tag { color:#aab4d0; font-size:10px; letter-spacing:.2em; font-weight:700; }
.header-tag i,.live-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 12px var(--cyan); margin-right:8px; }
.hero { position:relative; padding:30px 0 44px; }
.ambient { position:absolute; width:420px; height:420px; border-radius:50%; filter:blur(100px); opacity:.18; pointer-events:none; }
.ambient-one { background:#00e8cf; left:-210px; top:15%; }
.ambient-two { background:#386dff; right:-180px; top:5%; }
.slider-frame {
  position:relative; z-index:1; overflow:hidden; border-radius:22px; padding:14px;
  background:linear-gradient(145deg,rgba(20,31,57,.96),rgba(6,9,20,.98));
  border:1px solid rgba(112,238,255,.38);
  box-shadow:0 0 0 1px rgba(0,245,212,.08), 0 22px 80px #000a, 0 0 45px #00e8cf22, inset 0 1px rgba(255,255,255,.1);
}
.slider-topline { position:absolute; z-index:5; top:26px; left:29px; right:29px; display:flex; align-items:center; justify-content:space-between; pointer-events:none; }
.eyebrow { color:#d9fff9; font-size:10px; font-weight:800; letter-spacing:.18em; text-shadow:0 0 12px #00e8cf; }
.slide-count { font:600 12px 'Space Grotesk',sans-serif; color:#b5c4dc; letter-spacing:.1em; }
.slide-count b { color:var(--cyan); font-size:16px; margin-right:6px; }
.slide-count span { margin-right:6px; }
.slides { position:relative; aspect-ratio: 8 / 3; min-height:210px; overflow:hidden; border-radius:12px; background:#050711; }
.slide { position:absolute; inset:0; opacity:0; visibility:hidden; transform:scale(1.025); transition:opacity .75s ease, transform 1.2s cubic-bezier(.2,.7,.2,1), visibility .75s; }
.slide.is-active { opacity:1; visibility:visible; transform:scale(1); }
.slide img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.slide-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(3,6,18,.78),rgba(3,6,18,.38) 35%,transparent 72%), linear-gradient(0deg,rgba(3,5,15,.5),transparent 35%); }
.slide-caption { position:absolute; left:6%; top:50%; transform:translateY(-43%); max-width:360px; text-shadow:0 3px 20px #000; }
.caption-kicker { display:inline-block; padding:7px 11px; border:1px solid #00f5d488; border-radius:5px; color:#a8fff2; background:#001b20aa; font-size:9px; font-weight:800; letter-spacing:.22em; }
.slide-caption h1 { margin:15px 0 8px; font:900 clamp(26px,4vw,54px)/.98 'Space Grotesk',sans-serif; letter-spacing:-.045em; }
.slide-caption h1 em { color:var(--gold); font-style:normal; text-shadow:0 0 24px #ffb62b88; }
.slide-caption p { max-width:290px; color:#e0e7f5; font-size:clamp(10px,1.1vw,13px); line-height:1.6; }
.cta { display:inline-flex; gap:20px; align-items:center; margin-top:8px; padding:12px 17px; border-radius:7px; color:#041019; background:linear-gradient(100deg,#00f5d4,#6deaff); text-decoration:none; font-size:10px; font-weight:900; letter-spacing:.12em; box-shadow:0 0 24px #00f5d455; transition:transform .2s,box-shadow .2s; }
.cta:hover { transform:translateY(-2px); box-shadow:0 0 34px #00f5d488; }
.cta span { font-size:16px; }
.nav-arrow { position:absolute; z-index:6; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; border:1px solid #d7ffff66; color:white; background:#071323aa; backdrop-filter:blur(10px); font-size:28px; line-height:1; cursor:pointer; transition:.2s; }
.nav-arrow:hover { color:#041019; background:var(--cyan); box-shadow:0 0 22px #00f5d488; }
.prev { left:25px; } .next { right:25px; }
.slider-bottom { display:flex; align-items:center; gap:16px; padding:13px 7px 1px; }
.dots { display:flex; align-items:center; gap:8px; }
.dot { width:7px; height:7px; border:0; border-radius:20px; padding:0; background:#64708a; cursor:pointer; transition:width .25s,background .25s; }
.dot.is-active { width:27px; background:var(--cyan); box-shadow:0 0 12px #00f5d4aa; }
.progress-track { height:2px; flex:1; background:#29334b; overflow:hidden; border-radius:5px; }
.progress-track span { display:block; width:0; height:100%; background:linear-gradient(90deg,var(--cyan),var(--blue)); box-shadow:0 0 10px var(--cyan); }
.pause-btn { width:25px; height:25px; border:1px solid #62718c66; border-radius:50%; background:transparent; color:#dce6f7; font-size:10px; cursor:pointer; }
.under-glow { width:70%; height:34px; margin:-2px auto 0; border-radius:50%; background:#00cbb9; filter:blur(55px); opacity:.25; }
.below { display:flex; align-items:end; justify-content:space-between; gap:24px; padding:12px 4px 36px; }
.section-label { color:var(--cyan); font-size:9px; letter-spacing:.2em; font-weight:800; }
.below h2 { margin:9px 0 6px; font:700 clamp(22px,3vw,34px) 'Space Grotesk',sans-serif; }
.below h2 span { color:var(--gold); }
.below p { margin:0; color:#9ba8c2; font-size:12px; }
.feature-pills { display:flex; flex-wrap:wrap; gap:8px; }
.feature-pills span { padding:8px 10px; border:1px solid #5b6d8a55; border-radius:5px; color:#b8c5dd; font-size:8px; letter-spacing:.13em; font-weight:800; }
footer { padding:18px 4px 26px; border-top:1px solid #ffffff13; color:#67738c; font-size:10px; letter-spacing:.08em; }
@media (max-width:700px) {
  .page-shell { width:calc(100% - 22px); }
  .site-header { height:65px; }
  .header-tag { font-size:8px; letter-spacing:.1em; }
  .hero { padding:18px 0 30px; }
  .slider-frame { padding:7px; border-radius:15px; }
  .slides { aspect-ratio: 4 / 3; min-height:260px; }
  .slide img { object-fit:cover; object-position:center; }
  .slide-shade { background:linear-gradient(90deg,rgba(3,6,18,.83),rgba(3,6,18,.42) 70%,rgba(3,6,18,.12)),linear-gradient(0deg,rgba(3,5,15,.5),transparent 55%); }
  .slider-topline { top:16px; left:17px; right:17px; }
  .slide-caption { left:8%; top:56%; max-width:230px; }
  .slide-caption h1 { font-size:clamp(25px,8vw,42px); }
  .slide-caption p { max-width:210px; font-size:10px; }
  .caption-kicker { font-size:8px; }
  .nav-arrow { width:32px; height:32px; font-size:22px; }
  .prev { left:12px; } .next { right:12px; }
  .below { display:block; padding-bottom:25px; }
  .feature-pills { margin-top:18px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}