:root{
  --bg:#080c11; --surface:rgba(255,255,255,.06); --text:#e9eef5; --muted:#a5b4c3;
  --accent:#00FA9A; --accent-2:#00c786; --radius:18px; --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 1200px at 80% -10%, rgba(0,250,154,.15), transparent 60%),
             radial-gradient(900px 900px at -10% 20%, rgba(0,250,154,.10), transparent 70%),
             linear-gradient(180deg, #0a0f16 0%, #06090d 100%);
  line-height:1.5;
}
a{color:var(--accent); text-decoration:none}
img{max-width:100%; display:block}
.container{width:min(1120px,92%); margin-inline:auto}
.btn{
  display:inline-flex; align-items:center; gap:.65rem; padding:.95rem 1.2rem; border-radius:calc(var(--radius) - 6px);
  font-weight:600; letter-spacing:.2px; border:1px solid rgba(255,255,255,.08); backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); color:var(--text); box-shadow: var(--shadow); transition:.25s ease
}
.btn:hover{transform:translateY(-2px); box-shadow: 0 12px 34px rgba(0,250,154,.25); border-color: rgba(0,250,154,.45)}
.btn.primary{background:linear-gradient(180deg, var(--accent), var(--accent-2)); color:#06120d; border:0}
.badge{display:inline-flex; align-items:center; gap:.45rem; padding:.35rem .6rem; border-radius:999px; font-size:.8rem; color:#012416; background:rgba(0,250,154,.14); border:1px solid rgba(0,250,154,.35)}

/* NAV */
header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(10px); background: rgba(6,12,16,.6); border-bottom:1px solid rgba(255,255,255,.07)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:.9rem 0}
.brand{display:flex; gap:.6rem; align-items:center}
.brand .logo{width:36px; height:36px; background:radial-gradient(60% 60% at 40% 30%, #fff, #d8ffe4 40%, #00fa9a 41%, #00c786 100%); border-radius:10px; box-shadow:0 6px 18px rgba(0,250,154,.35)}
.brand strong{font-size:1.05rem; letter-spacing:.3px}
nav ul{display:flex; list-style:none; gap:1.2rem; padding:0; margin:0}
nav a{color:var(--muted)}
nav a:hover{color:var(--text)}

/* HERO */
.hero{position:relative; isolation:isolate; padding:clamp(64px, 8vw, 120px) 0 48px}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:2rem; align-items:center}
h1{font-size:clamp(1.9rem, 3.9vw, 3.2rem); line-height:1.12; margin:.35rem 0 .8rem}
.grad{background:linear-gradient(90deg, #fff, var(--accent)); -webkit-background-clip:text; color:transparent}
.hero p{color:var(--muted); font-size:1.05rem}
.stats{display:flex; gap:1rem; flex-wrap:wrap; margin:1.2rem 0}
.stat{padding:.75rem 1rem; border-radius:12px; background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); border:1px solid rgba(255,255,255,.08)}
.card{background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); box-shadow: var(--shadow)}
.card-inner{padding:1.2rem}
.countdown{display:grid; grid-template-columns:repeat(4, 1fr); gap:.8rem; text-align:center}
.tick{padding:1rem .5rem; border-radius:14px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1)}
.tick strong{display:block; font-size:1.6rem}
.hero-media{position:relative}
.hero-media::before{content:""; position:absolute; inset:-12px; background:conic-gradient(from 180deg, rgba(0,250,154,.0), rgba(0,250,154,.35), rgba(0,250,154,0)); filter: blur(18px); z-index:-1; border-radius: clamp(16px, 2.4vw, 22px)}
.mock{aspect-ratio:16/10; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.1); border-radius: clamp(16px, 2.4vw, 22px); display:grid; place-items:center; overflow:hidden}
.play{width:78px; height:78px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(180deg, var(--accent), var(--accent-2)); box-shadow:0 12px 34px rgba(0,250,154,.35)}

/* SECTIONS */
section{padding:72px 0}
.section-title{display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1.4rem}
h2{font-size:clamp(1.35rem, 2.2vw, 2rem); margin:0}
.grid-3{display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem}
.grid-2{display:grid; grid-template-columns:repeat(2, 1fr); gap:1rem}

.agenda-item{display:grid; grid-template-columns: 120px 1fr; gap:1rem; align-items:center; border:1px dashed rgba(255,255,255,.13); border-radius:14px; padding:1rem}
.agenda-item time{font-weight:700; font-size:1.1rem; color:#dffef0}

.speaker{display:flex; gap:1rem; align-items:center}
.speaker img{width:74px; height:74px; border-radius:50%; border:2px solid rgba(0,250,154,.6)}
.speaker small{color:var(--muted)}

/* FORM */
form{display:grid; gap:.8rem}
input, select, textarea{width:100%; background:rgba(255,255,255,.06); color:var(--text); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:.9rem; font:inherit; outline:none}
input::placeholder, textarea::placeholder{color:#9fb1bf}
.policy{font-size:.85rem; color:var(--muted)}
.checkbox-row{display:flex; gap:.6rem; align-items:flex-start}
.cta-row{margin-top:1rem; display:flex; gap:.8rem; flex-wrap:wrap}

/* FAQ */
details{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:1rem}
summary{cursor:pointer; font-weight:600}

/* FOOTER */
footer{padding:48px 0 72px; border-top:1px solid rgba(255,255,255,.08); color:var(--muted)}
.footer-wrap{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.footer-actions{display:flex; gap:.8rem}

/* DIALOG */
.dialog{border:0; padding:0; border-radius:16px; background:rgba(10,14,18,.9); color:var(--text); width:min(920px, 92%)}
.dialog-head{padding:1rem; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid rgba(255,255,255,.1)}
.dialog-body{padding:1rem}
.video-embed{aspect-ratio:16/9; border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.1)}

.floating{position:fixed; right:18px; bottom:18px; z-index:60}

/* RESPONSIVE */
@media (max-width: 980px){
  .hero-grid, .grid-3, .grid-2{grid-template-columns:1fr}
  nav ul{display:none}
}

/* ANIMS */
@keyframes floaty {from{transform:translateY(0)} 50%{transform:translateY(-6px)} to{transform:translateY(0)}}
.floaty{animation: floaty 5s ease-in-out infinite}
.reveal{opacity:0; transform:translateY(12px); transition: .6s ease}
.reveal.visible{opacity:1; transform:none}