:root{--bg0:#070b16;--bg2:#0e1b2f;--text:#e6f0ff;--muted:#a9b6cc;--ring:#24314f;--card:rgba(255,255,255,.045)}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--text)}
/* animated bg with two blobs */
body::before,body::after{content:"";position:fixed;inset:-20%;z-index:-2;background:
radial-gradient(40% 30% at 15% 20%, rgba(60,160,255,.22), transparent 60%),
radial-gradient(35% 30% at 85% 35%, rgba(25,220,240,.19), transparent 60%),
linear-gradient(180deg,var(--bg0),var(--bg2));
animation:bgMove 60s ease-in-out infinite}
@keyframes bgMove{0%{transform:translate(0,0)}50%{transform:translate(60px,-40px)}100%{transform:translate(0,0)}}
.container{max-width:1180px;margin:0 auto;padding:20px}
.header{position:sticky;top:0;z-index:50;background:rgba(7,11,22,.75);backdrop-filter:blur(8px);border-bottom:1px solid var(--ring)}
.nav{display:flex;align-items:center;gap:18px;height:64px}
.logo{display:flex;align-items:center;gap:12px}
.logo-badge{width:34px;height:34px;border-radius:12px;background:linear-gradient(180deg,#36e1ff,#4f7dff);display:flex;align-items:center;justify-content:center;color:#05243a;font-weight:900}
.brand{font-weight:900;letter-spacing:.08em}.sub{font-size:12px;color:var(--muted);margin-top:-2px}.spacer{flex:1}
.menu{display:flex;gap:12px}.menu-group{position:relative}
.btn{border:0;border-radius:10px;padding:8px 12px;background:transparent;color:var(--text);cursor:pointer}
.btn:hover{background:rgba(255,255,255,.06)}
.dropdown{position:absolute;top:calc(100% + 8px);left:0;display:none;min-width:240px;padding:8px;background:rgba(8,13,24,.97);border:1px solid var(--ring);border-radius:12px;box-shadow:0 12px 35px rgba(0,0,0,.45)}
.menu-group.open>.dropdown{display:block}
.dropdown a{display:block;padding:10px 12px;border-radius:8px;text-decoration:none;color:var(--text)}
.dropdown a:hover{background:rgba(255,255,255,.06)}
.main{min-height:60vh;padding:28px 0}.card{border:1px solid var(--ring);border-radius:20px;background:var(--card);padding:18px}
.h1{font-size:34px;font-weight:900;margin:0 0 8px;background:linear-gradient(90deg,#36e1ff,#5fa8ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.h2{font-size:20px;font-weight:800;margin:0 0 8px}
.grid-2{display:grid;grid-template-columns:1fr;gap:16px}@media(min-width:900px){.grid-2{grid-template-columns:1fr 1fr}}
.hero{position:relative;height:56vh;border-radius:24px;overflow:hidden;border:1px solid var(--ring)}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05);transition:opacity .7s ease,transform 1.2s ease}
.hero img.active{opacity:1;transform:scale(1)}.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,11,22,.6),transparent 30%, rgba(7,11,22,.65))}
.feature{display:flex;gap:12px;align-items:flex-start}
.icon{width:36px;height:36px;border-radius:12px;background:linear-gradient(180deg,#36e1ff,#4f7dff);display:flex;align-items:center;justify-content:center;color:#05243a;font-weight:900}
/* accordion */
.sec-acc{display:grid;gap:10px}.sec-item{border:1px solid var(--ring);border-radius:16px;background:rgba(255,255,255,.05);overflow:hidden}
.sec-btn{width:100%;text-align:left;padding:14px 16px;background:transparent;border:0;color:var(--text);font-weight:900;display:flex;align-items:center;justify-content:space-between;font-size:16px;cursor:pointer}
.sec-btn .chev{opacity:.8;transition:transform .2s ease}.sec-item.open .sec-btn .chev{transform:rotate(180deg)}
.sec-panel{display:none;padding:12px 14px;background:rgba(2,6,23,.35)}.sec-item.open .sec-panel{display:block}
.sub-acc{display:grid;gap:8px;margin-top:6px}.sub-item{border:1px solid var(--ring);border-radius:12px;background:rgba(255,255,255,.04);overflow:hidden}
.sub-head{padding:10px 12px;font-weight:800;color:#bcd1ff;font-size:15px}.sub-body{padding:10px 12px;color:#d6def0;font-size:14px;line-height:1.6}
/* footer */
.footer{border-top:1px solid var(--ring);background:rgba(5,8,16,.75)}.footer .cols{display:grid;gap:18px}
@media(min-width:900px){.footer .cols{grid-template-columns:1fr 1fr 1fr}}.list a{color:var(--text);text-decoration:none}.list a:hover{color:#5fa8ff}
.tiny{font-size:12px;color:var(--muted)}.muted{color:var(--muted)}.btn-primary{background:linear-gradient(90deg,#36e1ff,#5fa8ff);color:#05243a;font-weight:800}.btn-ghost{background:rgba(255,255,255,.06)}