:root{
  --navy-deep:#0A2540;
  --blue-primary:#1E5FBF;
  --blue-bright:#3B82F6;
  --blue-glow:#60A5FA;
  --ice:#EAF3FF;
  --white:#FFFFFF;
  --slate:#5B6B85;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family:'Inter',sans-serif;
  color:var(--navy-deep);
  min-height:100vh;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.9), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(96,165,250,0.7), transparent 55%),
    linear-gradient(150deg, #EAF3FF 0%, #BFDBFE 45%, #3B82F6 100%);
}
a{ color:inherit; }

body{ transition:opacity .4s ease; }
body.fade-out{ opacity:0; }

nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 32px;
}
.brand{ display:flex; align-items:center; gap:9px; }
.logo-dot{
  width:10px; height:10px; border-radius:50%;
  background:var(--navy-deep);
}
.brand-name{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:18px; color:var(--navy-deep); }
.brand-name span{ color:var(--blue-primary); }

.nav-cta{
  appearance:none; border:1px solid rgba(10,37,64,0.15); cursor:pointer;
  background:rgba(255,255,255,0.5); color:var(--navy-deep);
  font-weight:600; font-size:16px;
  padding:15px 32px; border-radius:999px;
}

.hero{
  min-height:calc(100vh - 65px);
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding:40px 24px;
}
.hero-inner{
  max-width:860px;
  width:100%;
}

.hero h1{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(32px, 5.5vw, 50px);
  font-weight:800;
  line-height:1.15;
  letter-spacing:-0.02em;
  margin-bottom:14px;
  color:var(--navy-deep);
}
.hero h1 .grad{ color:var(--blue-primary); }

.hero .tagline, .hero-points{ display:none; }

.hero-lede{
  font-size:15px; line-height:1.6; color:var(--slate);
  max-width:440px; margin:0 auto 48px;
}

.choices{
  display:grid; grid-template-columns:1fr 1fr; gap:22px;
  width:100%;
}

.choice-card{
  appearance:none; cursor:pointer; text-align:left;
  background:linear-gradient(160deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.22) 100%);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,0.6);
  border-radius:22px; padding:32px 28px;
  display:flex; flex-direction:column; gap:16px;
  box-shadow:0 24px 50px -26px rgba(10,37,64,0.3), inset 0 1px 0 rgba(255,255,255,0.7);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  font-family:'Inter',sans-serif;
}
.choice-card:hover{
  transform:translateY(-4px);
  box-shadow:0 30px 60px -24px rgba(10,37,64,0.35), inset 0 1px 0 rgba(255,255,255,0.8);
  border-color:rgba(255,255,255,0.85);
  background:linear-gradient(160deg, rgba(255,255,255,0.68) 0%, rgba(255,255,255,0.32) 100%);
}
.choice-card:active{ transform:translateY(-1px); }

.choice-icon{
  width:52px; height:52px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
}
.choice-card.host .choice-icon{ background:var(--navy-deep); color:var(--white); }
.choice-card.viewer .choice-icon{ background:var(--ice); color:var(--blue-primary); border:1px solid rgba(30,95,191,0.18); }

.choice-title{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:19px;
  letter-spacing:-0.01em; color:var(--navy-deep);
}
.choice-desc{
  font-size:13.5px; line-height:1.6; color:var(--slate);
}

.choice-cta{
  margin-top:auto; display:flex; align-items:center; gap:8px;
  font-size:13.5px; font-weight:700;
}
.choice-card.host .choice-cta{ color:var(--navy-deep); }
.choice-card.viewer .choice-cta{ color:var(--blue-primary); }
.choice-cta svg{ transition:transform .18s ease; }
.choice-card:hover .choice-cta svg{ transform:translateX(3px); }

@media (max-width:640px){
  .choices{ grid-template-columns:1fr; }
}