:root{
  --bg:#070b16;
  --bg2:#0c1122;
  --panel:rgba(17,24,47,.78);
  --text:#edf1ff;
  --muted:#a9b3d7;
  --accent:#7c5cff;
  --accent2:#22d3ee;
  --shadow: 0 24px 70px rgba(0,0,0,.34);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 15% 15%, rgba(124,92,255,.18), transparent 24%),
    radial-gradient(circle at 80% 10%, rgba(34,211,238,.12), transparent 24%),
    linear-gradient(180deg, var(--bg), var(--bg2) 65%, #070b12 100%);
  min-height:100vh;
}
a{color:inherit}
.container{width:min(1120px, calc(100% - 32px)); margin:0 auto}
.nav{
  position:sticky; top:0; z-index:1000;
  backdrop-filter: blur(18px);
  background: rgba(7,11,22,.58);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:14px 0;
}
.brand{
  display:flex; align-items:center; gap:12px; text-decoration:none;
  min-width:0;
}
.brand-logo{
  display:block;
  width:128px;
  height:auto;
  flex:0 0 auto;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.35));
}
.brand-text{
  display:flex; flex-direction:column; min-width:0;
}
.brand-text strong{
  font-size:1rem; letter-spacing:.08em; text-transform:uppercase;
}
.brand-text span{font-size:.82rem; color:var(--muted)}
.nav-links{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  justify-content:flex-end;
}
.nav-links a{
  text-decoration:none; color:var(--muted); font-size:.95rem;
  padding:10px 12px; border-radius:999px;
  transition: all .2s ease;
}
.nav-links a:hover,
.nav-links a.active{
  color:var(--text);
  background: rgba(255,255,255,.06);
}
.hero{
  position:relative;
  overflow:hidden;
  padding:100px 0 96px;
  min-height: calc(100vh - 86px);
  display:flex;
  align-items:center;
}
.orb{
  position:absolute;
  filter: blur(24px);
  opacity:.7;
  pointer-events:none;
  animation: float 10s ease-in-out infinite;
}
.orb.one{width:240px;height:240px; background:rgba(124,92,255,.20); left:-60px; top:20px;}
.orb.two{width:180px;height:180px; background:rgba(34,211,238,.16); right:30px; top:40px; animation-delay:-3s}
.orb.three{width:140px;height:140px; background:rgba(255,107,203,.12); right:15%; bottom:0; animation-delay:-6s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(16px)}}
.hero-center{
  text-align:center;
  width:100%;
}
.hero-logo{
  width:min(72vw, 760px);
  max-width:760px;
  height:auto;
  margin:0 auto 18px;
  display:block;
  filter: drop-shadow(0 22px 60px rgba(0,0,0,.40));
}
.badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 14px; border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  border-radius:999px; color:var(--muted); font-size:.92rem;
}
.badge i{
  width:10px; height:10px; border-radius:50%;
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  box-shadow: 0 0 0 6px rgba(34,211,238,.10);
}
h1{
  font-size: clamp(3.2rem, 11vw, 6.4rem);
  line-height: .92;
  margin:0;
  letter-spacing:-.06em;
}
.lead{
  color:var(--muted);
  font-size:1.08rem;
  line-height:1.8;
  max-width: 56ch;
  margin:14px auto 0;
}
.actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:26px; justify-content:center}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  text-decoration:none; font-weight:700;
  padding:14px 18px; border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{
  background: linear-gradient(135deg, var(--accent), #5b8cff);
  color:white; box-shadow: 0 18px 42px rgba(124,92,255,.28);
}
.section{padding:38px 0}
.panel{
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px; padding:22px;
}
.footer{
  padding:30px 0 48px;
  color:var(--muted);
  font-size:.95rem;
}
.footer-inner{
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:22px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.prose{max-width:82ch; color:#d8def5}
.prose h1,.prose h2,.prose h3{margin-top:1.4em}
.prose p,.prose li{line-height:1.85; color:#d0d6ef}
.prose a{color:#8bc5ff}
.reveal{opacity:0; transform: translateY(14px); transition: all .7s ease}
.reveal.in{opacity:1; transform:none}
.small{font-size:.92rem;color:var(--muted)}
@media (max-width: 820px){
  .nav-inner{flex-direction:column; align-items:flex-start}
  .nav-links{justify-content:flex-start}
  .brand-logo{width:112px}
}
@media (max-width: 720px){
  .nav-links{gap:8px}
  .nav-links a{padding:8px 10px}
  .hero{padding:86px 0 72px; min-height:auto}
  .hero-logo{width:min(84vw, 560px)}
  h1{font-size: clamp(2.8rem, 20vw, 5rem)}
}