:root{
  --bg:#0F1630; --bg2:#16204A; --card:#1B2757; --line:#2A3A78;
  --text:#EEF2FF; --muted:#A9B4D9;
  --yellow:#FFC93C; --teal:#2EE6C5; --pink:#FF6B9A; --blue:#5B8CFF;
  --radius:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:Fredoka,Inter,sans-serif;line-height:1.15}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
section{padding:80px 0}
.eyebrow{display:inline-block;font-family:"JetBrains Mono",monospace;font-size:.8rem;color:var(--yellow);letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
h2{font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:14px}
.lead{color:var(--muted);font-size:1.08rem;max-width:680px}

/* nav */
nav{position:sticky;top:0;z-index:20;background:rgba(15,22,48,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-family:Fredoka;font-weight:700;font-size:1.25rem;color:var(--text)}
.logo span{color:var(--yellow);font-family:"JetBrains Mono",monospace}
nav ul{display:flex;gap:22px;list-style:none}
nav ul a{color:var(--muted);font-size:.95rem}
.btn{display:inline-block;padding:12px 22px;border-radius:999px;font-weight:600;border:0;cursor:pointer;font-size:1rem;transition:transform .15s}
.btn:hover{transform:translateY(-2px);text-decoration:none}
.btn-yellow{background:var(--yellow);color:#101935}
.btn-ghost{border:2px solid var(--line);color:var(--text)}
.btn-sm{padding:8px 16px;font-size:.9rem}

/* hero */
.hero{padding:70px 0 90px;position:relative;overflow:hidden;isolation:isolate}
.hero .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
.badge{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);padding:6px 14px;border-radius:999px;font-size:.85rem;color:var(--muted);margin-bottom:22px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 0 var(--teal);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(46,230,197,.6)}70%{box-shadow:0 0 0 10px rgba(46,230,197,0)}100%{box-shadow:0 0 0 0 rgba(46,230,197,0)}}
.hero h1{font-size:clamp(2.4rem,6vw,4rem);margin-bottom:18px}
.hero h1 .hl{color:var(--yellow)}
.hero h1 .hl2{color:var(--teal)}
.hero p{color:var(--muted);font-size:1.15rem;margin-bottom:28px;max-width:520px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.hero .wrap>*,.about .wrap>*,.grid2>*{min-width:0}
.code pre{overflow-x:auto}
.logo{white-space:nowrap}
.code{background:#0A1024;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 30px 60px rgba(0,0,0,.35);overflow:hidden}
.code-top{display:flex;gap:7px;padding:12px 14px;background:#111a3a;border-bottom:1px solid var(--line)}
.code-top i{width:11px;height:11px;border-radius:50%;display:block}
.code pre{font-family:"JetBrains Mono",monospace;font-size:.92rem;padding:20px;min-height:270px;white-space:pre-wrap;color:#cfd8ff}
.k{color:var(--pink)}.s{color:var(--yellow)}.f{color:var(--teal)}.c{color:#6b78a8}
.caret{display:inline-block;width:8px;height:1.1em;background:var(--yellow);vertical-align:-3px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.25;z-index:-1}

/* cards */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.card h3{font-size:1.25rem;margin-bottom:8px}
.card p{color:var(--muted);font-size:.97rem}
.icon{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:1.4rem;margin-bottom:16px}

/* timeline */
.timeline{margin-top:44px;display:grid;gap:18px}
.phase{display:grid;grid-template-columns:120px 1fr;gap:24px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;position:relative}
.phase .tag{font-family:"JetBrains Mono",monospace;font-size:.8rem;color:#101935;background:var(--yellow);border-radius:10px;padding:6px 10px;height:fit-content;text-align:center;font-weight:600}
.phase:nth-child(2) .tag{background:var(--teal)}
.phase:nth-child(3) .tag{background:var(--pink)}
.phase:nth-child(4) .tag{background:var(--blue)}
.phase h3{font-size:1.2rem;margin-bottom:6px}
.phase p{color:var(--muted)}
.phase ul{margin:10px 0 0 18px;color:var(--muted);font-size:.95rem}
.phase li{margin:3px 0}

/* about */
.about{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.about .wrap{display:grid;grid-template-columns:1fr 1.4fr;gap:48px;align-items:center}
.avatar{aspect-ratio:1;border-radius:28px;background:linear-gradient(135deg,var(--yellow),var(--pink) 55%,var(--blue));display:grid;place-items:center;font-family:Fredoka;font-size:6rem;font-weight:700;color:#101935;max-width:320px;width:100%}
.facts{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}
.chip{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:.88rem;color:var(--text)}

/* sponsor */
.sponsor-box{background:linear-gradient(135deg,#1c2a63,#26195a);border:1px solid var(--line);border-radius:28px;padding:48px;margin-top:10px}
.sponsor-box h2 .hl{color:var(--yellow)}
.checks{list-style:none;margin-top:16px}
.checks li{padding:8px 0 8px 32px;position:relative;color:var(--text)}
.checks li::before{content:"✓";position:absolute;left:0;top:7px;width:22px;height:22px;border-radius:50%;background:var(--teal);color:#101935;font-weight:700;font-size:.8rem;display:grid;place-items:center}
.need li::before{content:"→";background:var(--yellow)}

/* form */
form{display:grid;gap:14px;margin-top:30px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{font-size:.88rem;color:var(--muted);display:block;margin-bottom:6px}
input,select,textarea{width:100%;background:#0A1024;border:1px solid var(--line);border-radius:12px;padding:13px 14px;color:var(--text);font:inherit;font-size:1rem}
input:focus,select:focus,textarea:focus{outline:2px solid var(--teal);border-color:transparent}
textarea{min-height:140px;resize:vertical}
.hp{position:absolute;left:-9999px}
.alert{padding:14px 18px;border-radius:12px;font-weight:500;display:none}
.alert.ok{display:block;background:rgba(46,230,197,.15);border:1px solid var(--teal);color:var(--teal)}
.alert.err{display:block;background:rgba(255,107,154,.12);border:1px solid var(--pink);color:var(--pink)}

footer{padding:40px 0;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

.js .reveal{opacity:0;transform:translateY(24px);transition:all .7s ease}
.js .reveal.in{opacity:1;transform:none}

@media (max-width:860px){
  nav ul{display:none}
  .hero .wrap,.about .wrap,.grid2{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
  .phase{grid-template-columns:1fr;gap:12px}
  .phase .tag{width:fit-content}
  .row2{grid-template-columns:1fr}
  .sponsor-box{padding:28px 22px}
  section{padding:60px 0}
  .avatar{max-width:200px;font-size:4rem}
}