/* styles.css — modern 2025 aesthetic, inspired but not identical */
@font-face{font-family:InterVar;src:local("Inter"), local("Inter var");}
:root{--bg:#020317;--card:#071028;--accent:#7c5cff;--accent-2:#00d4ff;--glass:rgba(255,255,255,0.04);--muted:#9fb0c8;--radius:16px}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:InterVar,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial;color:#e6f0ff;background:radial-gradient(1200px 600px at 10% 10%, rgba(124,92,255,0.08), transparent), linear-gradient(180deg,#020317,#071028);-webkit-font-smoothing:antialiased}
.wrap{max-width:1100px;margin:0 auto;padding:28px}
.header{backdrop-filter:blur(6px);position:sticky;top:0;z-index:20;background:linear-gradient(180deg,rgba(7,16,36,0.6),transparent);border-bottom:1px solid rgba(255,255,255,0.02)}
.header .wrap{display:flex;align-items:center;gap:16px;justify-content:space-between}
.logo{font-weight:700;color:#fff;font-size:18px;text-decoration:none}
.logo .dot{color:var(--accent);margin-left:4px}
.main-nav a{color:var(--muted);margin:0 12px;text-decoration:none;font-weight:600}
.header-actions{display:flex;align-items:center;gap:10px}
.btn{padding:10px 14px;border-radius:12px;border:0;cursor:pointer;font-weight:700}
.btn-ghost{background:transparent;color:var(--muted);border:1px solid rgba(255,255,255,0.03)}
.btn-primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#021;box-shadow:0 6px 20px rgba(124,92,255,0.12)}
.hero{display:flex;gap:28px;align-items:stretch;padding-top:36px;padding-bottom:36px}
.hero-left{flex:1;max-width:720px}
.hero-right{width:320px}
h1{font-size:28px;margin:0 0 12px 0;line-height:1.05}
.sub{color:var(--muted);margin:0 0 18px 0}
.hero-ctas{display:flex;gap:12px;margin-bottom:18px}
.trust{display:flex;gap:12px;margin:18px 0 0;list-style:none;padding:0}
.trust li{background:var(--glass);padding:10px;border-radius:12px;min-width:140px}
.card{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));padding:18px;border-radius:var(--radius);border:1px solid rgba(255,255,255,0.02)}
.glass{backdrop-filter:blur(8px);padding:18px;border-radius:14px}
.card-row{display:flex;justify-content:space-between;align-items:center}
.token{font-weight:800;color:var(--accent);background:rgba(124,92,255,0.08);padding:6px 10px;border-radius:10px}
.amount{font-size:20px;font-weight:800}
.cards-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.mini.card{padding:12px;text-align:center}
.features .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.feature h3{margin:0 0 8px 0}
.tasks .task-list{list-style:none;padding:0;margin:0}
.task{display:flex;justify-content:space-between;align-items:center;padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,0.02);margin-bottom:10px;background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent)}
.task .muted{display:block;color:var(--muted);font-size:13px}
.reward{font-weight:800;color:var(--accent)}
.btn-sm{padding:8px 10px;border-radius:10px;font-size:13px}
.cta-footer{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.cta-actions{display:flex;gap:12px}
.footer{border-top:1px solid rgba(255,255,255,0.02);padding:18px 0;margin-top:28px}
.footer .wrap{display:flex;justify-content:space-between;align-items:center}
.muted{color:var(--muted);font-size:13px}
@media (max-width:900px){
  .features .grid{grid-template-columns:1fr}
  .hero{flex-direction:column}
  .hero-right{width:100%}
  .cards-grid{grid-template-columns:repeat(3,1fr)}
}