:root{
  --bg:#0b0f19;
  --bg2:#0e1527;
  --card:#111a2f;
  --text:#eaf0ff;
  --muted:rgba(234,240,255,.72);
  --line:rgba(234,240,255,.10);
  --primary:#6ee7ff;
  --primary2:#8b5cf6;
  --shadow: 0 20px 60px rgba(0,0,0,.45);
  --shadowHover: 0 18px 55px rgba(0,0,0,.55);
  --radius: 18px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: var(--bg);
  color:var(--text);
  line-height:1.55;
}

/* global background (single source of truth) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(1100px 720px at 14% 8%, rgba(139,92,246,.22), transparent 62%),
    radial-gradient(980px 640px at 88% 0%, rgba(110,231,255,.18), transparent 58%),
    radial-gradient(900px 600px at 50% 105%, rgba(110,231,255,.07), transparent 58%),
    linear-gradient(180deg, rgba(14,21,39,.12), rgba(11,15,25,0) 38%, rgba(14,21,39,.06));
}
a{color:inherit; text-decoration:none}
a:hover{opacity:.9}

.container{width:min(1120px, calc(100% - 40px)); margin:0 auto;}

.header{
  position:sticky; top:0; z-index:50;
  background: rgba(11,15,25,.62);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.header__inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:14px}
.brand{display:flex; align-items:baseline; gap:10px}

.ai-banner{
  font-size:12px;
  font-weight:800;
  text-align:center;
  color: rgba(6,16,24,.92);
  padding:9px 20px;
  border-top: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(135deg, rgba(255,214,10,.95), rgba(255,122,0,.92));
}
.ai-banner--desktop{display:none}
.ai-banner--mobile{display:none; padding-left:0; padding-right:0; border-top:none; border-bottom:1px solid rgba(255,255,255,.22)}
.brand__mark{font-weight:800; letter-spacing:.2px}
.brand__sub{font-size:12px; color:var(--muted)}

.nav{display:flex; align-items:center; gap:18px; font-size:14px}
.nav a{color:rgba(234,240,255,.86)}
.nav__cta{padding:10px 14px; border:1px solid var(--line); border-radius:999px; background:rgba(17,26,47,.55)}

.menu{display:none; width:44px; height:40px; border-radius:12px; border:1px solid var(--line); background:rgba(17,26,47,.55); padding:10px; cursor:pointer}
.menu span{display:block; height:2px; background:rgba(234,240,255,.88); margin:5px 0; border-radius:2px}

.mobile-nav{display:none; border-top:1px solid var(--line); padding:12px 20px; background: rgba(11,15,25,.80); backdrop-filter: blur(10px)}
.mobile-nav a{display:block; padding:12px 0; color:rgba(234,240,255,.88)}

/* ensure mobile nav is hidden by default even when media query enables display */
.mobile-nav[hidden]{display:none !important}

.hero{position:relative; padding:68px 0 26px; overflow:visible}
.hero__grid{position:relative; z-index:1; display:grid; grid-template-columns: 1.15fr .85fr; gap:30px; align-items:start}

.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 12px; border-radius:999px;
  border:1px solid var(--line);
  color:rgba(234,240,255,.84);
  background: rgba(17,26,47,.35);
  font-size:13px;
}

h1{font-size:56px; line-height:1.02; margin:16px 0 12px; letter-spacing:-1.0px}
.lead{font-size:17px; color:rgba(234,240,255,.82); max-width:56ch}

.hero__actions{display:flex; gap:12px; flex-wrap:wrap; margin:22px 0 18px}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 16px; border-radius:14px; border:1px solid var(--line); font-weight:600}
.btn--primary{
  border:none;
  color:#061018;
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  box-shadow: 0 12px 35px rgba(110,231,255,.12), 0 20px 60px rgba(139,92,246,.12);
}
.btn--ghost{background: rgba(17,26,47,.35)}
.btn--block{width:100%}

.hero__meta{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; margin-top:20px}
.meta{padding:14px 14px; border-radius:14px; border:1px solid var(--line); background: rgba(17,26,47,.25)}
.meta__k{font-size:12px; color:var(--muted)}
.meta__v{font-size:13px; margin-top:6px; color:rgba(234,240,255,.92)}

.card{border-radius: var(--radius); border:1px solid var(--line); background: linear-gradient(180deg, rgba(17,26,47,.78), rgba(17,26,47,.38)); box-shadow: var(--shadow); padding:18px}
.card__top{display:flex; align-items:center; justify-content:space-between; gap:12px}
.card__title{font-weight:800}

.card__free{margin:12px 0 0; display:inline-flex; align-items:center; justify-content:center; padding:8px 12px; border-radius:999px; border:1px solid rgba(110,231,255,.22); background: rgba(110,231,255,.10); color:rgba(234,240,255,.92); font-size:12px; font-weight:800; letter-spacing:.2px; width:fit-content}
.card__date{margin:12px 0 12px; padding:12px 12px; border-radius:14px; border:1px solid rgba(110,231,255,.22); background: linear-gradient(135deg, rgba(110,231,255,.18), rgba(139,92,246,.16)); display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.card__date-label{font-weight:800; letter-spacing:-.2px}
.card__date-time{font-weight:800; color:rgba(234,240,255,.92)}
.card__meta{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; margin:0 0 12px}
.card__meta .meta{padding:12px 12px; background: rgba(17,26,47,.18)}
.card__meta .meta__k{font-size:11px; text-transform:uppercase; letter-spacing:.10em; font-weight:800; color:#fff}
.card__meta .meta__v{font-size:13px; color:rgba(234,240,255,.92)}

.card__gift{margin:12px 0 0; padding:14px 14px; border-radius: calc(var(--radius) + 2px); border:1px solid rgba(110,231,255,.22); background: linear-gradient(135deg, rgba(110,231,255,.12), rgba(139,92,246,.10));}
.card__gift-title{font-weight:900; letter-spacing:-.2px}
.card__gift-text{margin-top:6px; font-size:13px; color:rgba(234,240,255,.86)}
.card__gift-text strong{color:rgba(234,240,255,.96)}
.card__line{height:1px; background:var(--line); margin:14px 0}

.checklist{list-style:none; padding:0; margin:14px 0 16px}
.checklist li{padding-left:26px; position:relative; margin:10px 0; color:rgba(234,240,255,.86)}
.checklist li::before{content:""; width:14px; height:14px; border-radius:4px; position:absolute; left:0; top:4px; background: linear-gradient(135deg, var(--primary), var(--primary2));}

.fineprint{font-size:12px; color:rgba(234,240,255,.62); margin:10px 0 0}

.section{position:relative; padding:56px 0}

/* keep alt sections very subtle; main background is global */
.section--alt{
  background: rgba(14,21,39,.10);
  border-top: none;
  border-bottom: none;
}

h2{font-size:38px; margin:0 0 18px; letter-spacing:-.5px}

.grid{display:grid; gap:16px}
.grid--3{grid-template-columns: repeat(3, minmax(0,1fr))}
.feature{padding:18px; border-radius: var(--radius); border:1px solid var(--line); background: rgba(17,26,47,.20)}

.about__cta{margin-top:16px}

/* hover animations (desktop) */
.card, .feature, .steps li, .speaker, .faq details{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}
@media (hover:hover) and (pointer:fine){
  .card:hover{transform: translateY(-3px); box-shadow: var(--shadowHover); border-color: rgba(234,240,255,.18)}
  .feature:hover, .steps li:hover, .speaker:hover, .faq details:hover{
    transform: translateY(-2px);
    box-shadow: 0 14px 40px rgba(0,0,0,.40);
    border-color: rgba(234,240,255,.16);
  }
}
.feature h3{margin:2px 0 8px; font-size:18px}
.feature p{margin:0; color:rgba(234,240,255,.74)}

.steps{list-style:none; padding:0; margin:0; display:grid; gap:12px}
.steps li{display:grid; grid-template-columns: 40px 1fr; gap:14px; padding:18px; border-radius: var(--radius); border:1px solid var(--line); background: rgba(17,26,47,.18)}
.steps__n{width:40px; height:40px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-weight:800; color:#061018; background: linear-gradient(135deg, var(--primary), var(--primary2));}
.steps h3{margin:2px 0 6px}
.steps p{margin:0; color:rgba(234,240,255,.74)}

.cta{margin-top:18px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px; border-radius: var(--radius); border:1px solid var(--line); background: rgba(17,26,47,.28)}
.muted{color:var(--muted)}

.speaker{display:flex; align-items:center; gap:14px; padding:18px; border-radius: var(--radius); border:1px solid var(--line); background: rgba(17,26,47,.20)}

/* desktop-only speaker photo */
.speaker__photo{display:none; width:220px; height:320px; border-radius: calc(var(--radius) + 6px); border:1px solid var(--line); overflow:hidden; flex:0 0 auto; background: rgba(17,26,47,.25)}
.speaker__photo img{width:100%; height:100%; object-fit:cover; object-position:50% 18%; display:block}

/* avatar removed */
.speaker__name{font-weight:800; font-size:18px}
.speaker__role{color:rgba(234,240,255,.76); margin-top:2px}

.faq details{border:1px solid var(--line); border-radius: var(--radius); background: rgba(17,26,47,.18); padding:14px 16px}
.faq{display:grid; gap:10px}
.faq summary{cursor:pointer; font-weight:700}
.faq__a{margin-top:10px; color:rgba(234,240,255,.74)}

.footer{padding:26px 0}
.footer__inner{display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--line); padding-top:18px}
.footer__right{display:flex; gap:14px}

@media (max-width: 920px){
  h1{font-size:46px}
  h2{font-size:34px}
  .hero__grid{grid-template-columns: 1fr;}
  .ai-banner--mobile{display:block}
}

@media (min-width: 921px){
  .speaker__photo{display:block}
  .ai-banner--desktop{display:block}
}
@media (max-width: 720px){
  .nav{display:none}
  .menu{display:block}
  .mobile-nav{display:block}
  .hero{padding-top:36px}
  h1{font-size:40px}
  h2{font-size:30px}
  .grid--3{grid-template-columns: 1fr}
  .hero__meta{grid-template-columns: 1fr}
  .card__meta{grid-template-columns: 1fr}
  .cta{flex-direction:column; align-items:flex-start}
}