*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#000;color:#f5f5f7;overflow-x:hidden}

/* Nav */
.nav{
  position:fixed;
  top:0;left:0;right:0;
  height:44px;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  z-index:1000;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-inner{
  max-width:1024px;
  margin:0 auto;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 22px;
}
.nav-logo{
  color:#f5f5f7;
  display:flex;
  align-items:center;
  text-decoration:none;
  opacity:.88;
  transition:opacity .2s;
}
.nav-logo:hover{opacity:1}
.nav-links{
  display:flex;
  list-style:none;
  gap:0;
}
.nav-links li a{
  color:#f5f5f7;
  text-decoration:none;
  font-size:12px;
  font-weight:400;
  opacity:.8;
  padding:0 10px;
  transition:opacity .2s;
}
.nav-links li a:hover{opacity:1}
.nav-actions{
  display:flex;
  gap:6px;
}
.nav-icon{
  color:#f5f5f7;
  opacity:.8;
  display:flex;
  align-items:center;
  padding:4px;
  transition:opacity .2s;
}
.nav-icon:hover{opacity:1}

/* Hero */
.hero{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:100px 24px 40px;
  background:linear-gradient(180deg,#000 0%,#1a1a2e 50%,#16213e 100%);
  position:relative;
}

.hero-content{z-index:2;max-width:800px}

.eyebrow{
  font-size:14px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#86868b;
  margin-bottom:8px;
}

.headline{
  font-size:clamp(48px,8vw,96px);
  font-weight:700;
  letter-spacing:-2px;
  background:linear-gradient(135deg,#fff 0%,#a5b4fc 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  margin-bottom:12px;
}

.subhead{
  font-size:clamp(18px,2.5vw,24px);
  color:#a1a1a6;
  font-weight:400;
  line-height:1.4;
  margin-bottom:28px;
}

.cta-group{
  display:flex;
  gap:20px;
  align-items:center;
  justify-content:center;
}

.cta-primary{
  background:#fff;
  color:#000;
  padding:12px 32px;
  border-radius:980px;
  text-decoration:none;
  font-size:16px;
  font-weight:500;
  transition:opacity .2s;
}
.cta-primary:hover{opacity:.85}

.cta-secondary{
  color:#2997ff;
  text-decoration:none;
  font-size:16px;
}
.cta-secondary:hover{text-decoration:underline}

.hero-image{
  margin-top:48px;
  z-index:1;
  max-width:900px;
  width:100%;
}
.hero-image img{
  width:100%;
  height:auto;
  filter:drop-shadow(0 20px 60px rgba(0,0,0,.6));
}

@media (max-width:768px){
  .hero{padding-top:80px}
  .cta-group{flex-direction:column;gap:14px}
  .nav-links{display:none}
  .footer-top{grid-template-columns:repeat(2,1fr)}
  .footer-legal{flex-direction:column;gap:8px;align-items:flex-start}
}

/* Footer */
.footer{
  background:#1d1d1f;
  padding:40px 22px 20px;
  border-top:1px solid rgba(255,255,255,.1);
}
.footer-inner{
  max-width:1024px;
  margin:0 auto;
}
.footer-top{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:24px;
  padding-bottom:28px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.footer-col h4{
  font-size:12px;
  font-weight:600;
  color:#f5f5f7;
  margin-bottom:10px;
}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:6px}
.footer-col li a{
  color:#86868b;
  text-decoration:none;
  font-size:12px;
  transition:color .2s;
}
.footer-col li a:hover{color:#f5f5f7}

.footer-bottom{
  padding-top:20px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.footer-note{
  font-size:12px;
  color:#86868b;
}
.footer-note a{
  color:#2997ff;
  text-decoration:none;
}
.footer-note a:hover{text-decoration:underline}
.footer-legal{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
}
.footer-legal p{
  font-size:12px;
  color:#86868b;
}
.legal-links{
  display:flex;
  list-style:none;
  gap:14px;
  flex-wrap:wrap;
}
.legal-links li a{
  color:#86868b;
  text-decoration:none;
  font-size:12px;
  transition:color .2s;
}
.legal-links li a:hover{color:#f5f5f7}