:root {
  --bg: #08060f;
  --panel: #110a1c;
  --panel2: #160d24;
  --text: #f6f1fb;
  --muted: #a79db3;
  --line: rgba(170, 87, 255, .28);
  --purple: #8e45db;
  --purple2: #bd6dff;
  --shadow: 0 24px 80px rgba(0,0,0,.42);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: radial-gradient(circle at 78% 8%, rgba(128,54,190,.16), transparent 28%), var(--bg); color: var(--text); font-family: Inter, system-ui, sans-serif; line-height: 1.55; }
a { color: inherit; text-decoration: none; }
.noise { position: fixed; inset: 0; pointer-events: none; opacity: .045; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
.topbar { position: sticky; top: 0; z-index: 20; display:flex; justify-content:space-between; align-items:center; gap:24px; padding:18px clamp(20px,5vw,72px); background: rgba(8,6,15,.78); backdrop-filter: blur(16px); border-bottom:1px solid rgba(255,255,255,.05); }
.brand { display:flex; align-items:center; gap:12px; min-width:220px; }
.brand-mark { width:38px; height:38px; display:grid; place-items:center; border:1px solid rgba(190,109,255,.55); background:linear-gradient(145deg,#7f39c7,#180d27); border-radius:11px; font-weight:800; box-shadow:0 8px 26px rgba(118,48,190,.25); }
.brand strong { display:block; font-size:15px; letter-spacing:.08em; }
.brand small { display:block; color:var(--muted); font-size:8px; letter-spacing:.18em; margin-top:2px; }
.nav { display:flex; gap:28px; align-items:center; font-size:13px; color:#c8becf; }
.nav a:hover { color:white; }
.nav-toggle { display:none; background:none; color:white; border:0; font-size:24px; }
.section-pad { padding: 110px clamp(20px,6vw,92px); }
.hero { min-height: calc(100vh - 80px); display:grid; grid-template-columns: 1.05fr .95fr; align-items:center; gap:64px; max-width:1440px; margin:auto; }
.eyebrow,.kicker { color:var(--purple2); text-transform:uppercase; letter-spacing:.18em; font-size:11px; font-weight:700; }
.eyebrow { display:flex; gap:9px; align-items:center; }
.dot { width:7px; height:7px; border-radius:50%; background:var(--purple2); box-shadow:0 0 15px var(--purple2); }
h1 { font-size:clamp(48px,7vw,92px); line-height:.98; margin:18px 0 24px; letter-spacing:-.055em; }
h1 span { color:#b96cff; }
.hero-text { max-width:650px; color:var(--muted); font-size:16px; }
.hero-actions,.join-actions { display:flex; gap:12px; margin-top:28px; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 20px; border-radius:10px; font-size:13px; font-weight:700; border:1px solid rgba(255,255,255,.08); transition:.18s ease; }
.btn-primary { background:linear-gradient(135deg,#8d42da,#a553eb); box-shadow:0 12px 30px rgba(135,57,212,.27); }
.btn-primary:hover { transform:translateY(-2px); filter:brightness(1.07); }
.btn-ghost { background:rgba(255,255,255,.025); color:#ddd4e5; }
.btn-ghost:hover { background:rgba(255,255,255,.055); }
.btn-wide { min-width:180px; }
.hero-meta { display:flex; gap:36px; margin-top:44px; }
.meta-label { display:block; font-size:9px; letter-spacing:.18em; color:#786e83; margin-bottom:4px; }
.hero-card-wrap { display:grid; place-items:center; }
.hero-card { width:min(520px,90%); aspect-ratio:1.05/1; border:1px solid rgba(190,109,255,.22); border-radius:32px; background:linear-gradient(145deg,rgba(34,17,49,.98),rgba(10,7,16,.98)); box-shadow:var(--shadow); position:relative; overflow:hidden; transform:rotate(-3deg); }
.card-glow { position:absolute; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle,rgba(167,73,255,.35),transparent 66%); top:14%; left:27%; filter:blur(10px); }
.hero-logo { position:absolute; inset:0; display:grid; place-items:center; font-size:clamp(44px,7vw,86px); font-weight:800; letter-spacing:.03em; text-shadow:0 0 35px rgba(189,109,255,.38); }
.hero-subtitle { position:absolute; top:57%; width:100%; text-align:center; letter-spacing:.42em; font-size:11px; color:#a996b8; }
.hero-lines { position:absolute; left:34px; right:34px; bottom:34px; display:flex; gap:10px; }
.hero-lines i { display:block; height:4px; flex:1; background:linear-gradient(90deg,#7d39c7,rgba(125,57,199,0)); border-radius:999px; }
.section-dark { background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.006)); border-block:1px solid rgba(255,255,255,.04); }
.section-head { max-width:1080px; margin:0 auto 42px; display:grid; grid-template-columns:1.05fr .95fr; gap:50px; align-items:end; }
.section-head.compact { margin-bottom:34px; }
h2 { margin:10px 0 0; font-size:clamp(34px,4vw,56px); line-height:1.05; letter-spacing:-.045em; }
.section-head p { color:var(--muted); margin:0; max-width:520px; }
.feature-grid { max-width:1080px; margin:auto; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.feature-card { padding:26px; min-height:210px; background:linear-gradient(145deg,rgba(25,14,37,.96),rgba(14,9,22,.94)); border:1px solid rgba(180,93,255,.11); border-radius:16px; }
.feature-card:hover { border-color:rgba(180,93,255,.32); transform:translateY(-3px); transition:.18s ease; }
.feature-num { color:var(--purple2); font-size:10px; letter-spacing:.14em; }
.feature-card h3 { margin:28px 0 10px; font-size:18px; }
.feature-card p { color:var(--muted); font-size:13px; margin:0; }
.rules { max-width:1180px; margin:auto; }
.rule-list { border-top:1px solid rgba(255,255,255,.07); }
.rule-list div { display:grid; grid-template-columns:70px 1fr; padding:20px 0; border-bottom:1px solid rgba(255,255,255,.07); color:#d2c8da; }
.rule-list b { color:var(--purple2); }
.join-section { max-width:1180px; margin:auto; }
.join-box { border:1px solid rgba(180,93,255,.18); border-radius:22px; background:linear-gradient(145deg,rgba(28,14,42,.98),rgba(13,8,20,.98)); padding:52px; display:flex; justify-content:space-between; align-items:center; gap:40px; box-shadow:var(--shadow); }
.join-box p { color:var(--muted); max-width:570px; }
.footer { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:28px clamp(20px,6vw,92px); color:#83798a; font-size:12px; border-top:1px solid rgba(255,255,255,.05); }
.footer-brand { min-width:auto; }
@media (max-width: 980px) { .hero{grid-template-columns:1fr; min-height:auto; padding-top:80px}.hero-card{max-width:580px}.feature-grid{grid-template-columns:repeat(2,1fr)}.section-head{grid-template-columns:1fr}.join-box{flex-direction:column;align-items:flex-start}.nav{display:none}.nav-toggle{display:block}.topbar{padding-inline:20px}.section-pad{padding-block:80px} }
@media (max-width: 640px) { .feature-grid{grid-template-columns:1fr}.hero-meta{gap:18px; flex-wrap:wrap}.hero-card{width:100%}.join-box{padding:32px 24px}.footer{flex-direction:column;align-items:flex-start} h1{font-size:52px}.btn-wide{width:100%} }