*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { --bg:#0a0a0f; --bg2:#12121a; --bg3:#1a1a26; --surface:#1e1e2e; --border:rgba(255,255,255,0.07); --border-hover:rgba(255,255,255,0.15); --text:#f0eeff; --muted:#7a7a9a; --accent:#a78bfa; --accent2:#60a5fa; }
html { scroll-behavior: smooth; }
body { background:var(--bg); color:var(--text); font-family:'DM Sans',sans-serif; font-size:16px; line-height:1.6; overflow-x:hidden; cursor:none; }
#cursor { position:fixed; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); font-size:20px; line-height:1; filter:drop-shadow(0 0 6px rgba(167,139,250,0.6)); }
#cursor-dot { position:fixed; width:6px; height:6px; background:var(--accent); border-radius:50%; pointer-events:none; z-index:9998; transform:translate(-50%,-50%); }
body::before { content:''; position:fixed; inset:0; background-image:linear-gradient(rgba(167,139,250,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(167,139,250,0.03) 1px,transparent 1px); background-size:60px 60px; pointer-events:none; z-index:0; }
.orb { position:fixed; border-radius:50%; filter:blur(100px); pointer-events:none; z-index:0; opacity:0.18; }
.orb-1 { width:600px; height:600px; background:#7c3aed; top:-200px; left:-200px; }
.orb-2 { width:400px; height:400px; background:#1d4ed8; bottom:10%; right:-100px; }
.orb-3 { width:300px; height:300px; background:#7c3aed; top:50%; left:60%; }
nav { position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:16px 40px; background:rgba(10,10,15,0.75); backdrop-filter:blur(16px); border-bottom:1px solid var(--border); }
.nav-logo { font-family:'Syne',sans-serif; font-size:1.1rem; font-weight:700; color:var(--text); text-decoration:none; display:flex; align-items:center; gap:8px; }
.nav-logo span { color:var(--accent); }
.nav-links { display:flex; align-items:center; gap:24px; list-style:none; }
.nav-links a { font-size:13px; color:var(--muted); text-decoration:none; transition:color 0.2s; }
.nav-links a:hover { color:var(--text); }
.nav-cta { color:var(--accent)!important; border:1px solid rgba(167,139,250,0.3); padding:6px 16px; border-radius:100px; }
header { position:relative; z-index:10; text-align:center; padding:160px 24px 80px; animation:fadeUp 0.6s ease both; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:500; letter-spacing:0.2em; text-transform:uppercase; color:var(--accent); border:1px solid rgba(167,139,250,0.25); border-radius:100px; padding:6px 16px; margin-bottom:32px; backdrop-filter:blur(8px); background:rgba(167,139,250,0.05); }
.eyebrow::before { content:'✦'; font-size:10px; }
h1 { font-family:'Syne',sans-serif; font-size:clamp(3rem,8vw,6rem); font-weight:800; line-height:1.0; letter-spacing:-0.03em; margin-bottom:24px; }
h1 span.grad { background:linear-gradient(135deg,#a78bfa 0%,#60a5fa 50%,#a78bfa 100%); background-size:200% 200%; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:gradShift 4s ease infinite; }
@keyframes gradShift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
.subtitle { font-size:1.1rem; font-weight:300; color:var(--muted); max-width:460px; margin:0 auto 48px; }
.stats-bar { display:inline-flex; border:1px solid var(--border); border-radius:16px; overflow:hidden; backdrop-filter:blur(12px); background:rgba(255,255,255,0.02); }
.stat { padding:14px 28px; border-right:1px solid var(--border); }
.stat:last-child { border-right:none; }
.stat-num { font-family:'Syne',sans-serif; font-size:1.5rem; font-weight:700; color:var(--accent); display:block; line-height:1; margin-bottom:4px; }
.stat-label { font-size:11px; text-transform:uppercase; letter-spacing:0.12em; color:var(--muted); }
.section-wrap { position:relative; z-index:10; max-width:1200px; margin:0 auto; padding:0 24px; }
.section-label { position:relative; z-index:10; max-width:1200px; margin:0 auto 20px; padding:0 24px; font-size:11px; text-transform:uppercase; letter-spacing:0.2em; color:var(--muted); display:flex; align-items:center; gap:12px; }
.section-label::after { content:''; flex:1; height:1px; background:var(--border); }
.section-eyebrow { font-size:11px; text-transform:uppercase; letter-spacing:0.2em; color:var(--accent); margin-bottom:16px; }
.about-section { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:center; margin-bottom:80px; }
.about-text h2 { font-family:'Syne',sans-serif; font-size:2rem; font-weight:700; line-height:1.2; margin-bottom:16px; }
.about-text p { color:var(--muted); font-size:15px; line-height:1.7; margin-bottom:12px; }
.services-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.service-item { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px 18px; transition:border-color 0.2s,transform 0.2s; }
.service-item:hover { border-color:var(--border-hover); transform:translateY(-2px); }
.service-icon { font-size:22px; margin-bottom:8px; }
.service-title { font-family:'Syne',sans-serif; font-size:0.9rem; font-weight:600; margin-bottom:4px; }
.service-desc { font-size:12px; color:var(--muted); line-height:1.5; }
.stack-pills { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; margin-bottom:80px; }
.stack-pill { display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border); border-radius:100px; padding:8px 16px; font-size:13px; font-weight:500; color:var(--text); transition:border-color 0.2s,transform 0.2s; }
.stack-pill:hover { border-color:var(--border-hover); transform:translateY(-2px); }
.stack-pill-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.bots-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:80px; }
.bot-card { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:20px; text-align:center; transition:border-color 0.2s,transform 0.2s; position:relative; overflow:hidden; }
.bot-card:hover { border-color:var(--border-hover); transform:translateY(-4px); }
.bot-card::before { content:''; position:absolute; inset:0; opacity:0.04; pointer-events:none; }
.bot-simba::before{background:radial-gradient(circle at 50% 0%,#f59e0b,transparent 70%)}
.bot-stardust::before{background:radial-gradient(circle at 50% 0%,#60a5fa,transparent 70%)}
.bot-pinny::before{background:radial-gradient(circle at 50% 0%,#f472b6,transparent 70%)}
.bot-shared::before{background:radial-gradient(circle at 50% 0%,#a78bfa,transparent 70%)}
.bot-emoji { font-size:36px; margin-bottom:10px; display:block; }
.bot-name { font-family:'Syne',sans-serif; font-size:1.1rem; font-weight:700; margin-bottom:4px; }
.bot-stream { font-size:11px; color:var(--muted); margin-bottom:10px; }
.bot-desc { font-size:12px; color:var(--muted); line-height:1.5; }
.bot-badge { display:inline-block; font-size:10px; font-weight:600; padding:3px 10px; border-radius:100px; margin-top:10px; }
.bot-simba .bot-badge{background:rgba(245,158,11,0.15);border:1px solid rgba(245,158,11,0.3);color:#fcd34d}
.bot-stardust .bot-badge{background:rgba(96,165,250,0.15);border:1px solid rgba(96,165,250,0.3);color:#93c5fd}
.bot-pinny .bot-badge{background:rgba(244,114,182,0.15);border:1px solid rgba(244,114,182,0.3);color:#f9a8d4}
.bot-shared .bot-badge{background:rgba(167,139,250,0.15);border:1px solid rgba(167,139,250,0.3);color:#c4b5fd}
.grid-container { position:relative; z-index:10; max-width:1200px; margin:0 auto; padding:0 24px 80px; display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.card { position:relative; border-radius:20px; border:1px solid var(--border); background:var(--surface); overflow:hidden; transition:transform 0.3s,border-color 0.3s,box-shadow 0.3s; cursor:none; text-decoration:none; display:block; color:inherit; opacity:0; transform:translateY(30px); }
.card.visible { animation:fadeUp 0.5s ease forwards; }
.card:hover { transform:translateY(-6px); border-color:var(--border-hover); box-shadow:0 24px 60px rgba(0,0,0,0.4); }
.card:hover .card-arrow { transform:translate(3px,-3px); }
.card-bar { height:4px; width:100%; }
.live-badge { position:absolute; top:44px; right:12px; z-index:10; display:flex; align-items:center; gap:5px; background:rgba(239,68,68,0.9); color:#fff; font-size:10px; font-weight:700; letter-spacing:0.1em; padding:3px 8px; border-radius:6px; }
.live-dot { width:6px; height:6px; background:#fff; border-radius:50%; animation:livePulse 1s ease infinite; }
@keyframes livePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(0.7)}}
.preview-wrap { position:relative; height:220px; overflow:hidden; background:var(--bg2); border-bottom:1px solid var(--border); }
.preview-overlay { position:absolute; inset:0; background:linear-gradient(to bottom,transparent 40%,var(--surface) 100%); z-index:2; }
.browser-chrome { position:absolute; top:0; left:0; right:0; height:32px; background:var(--bg3); border-bottom:1px solid var(--border); display:flex; align-items:center; padding:0 12px; gap:6px; z-index:3; }
.dot{width:8px;height:8px;border-radius:50%} .dot-r{background:#ff5f57} .dot-y{background:#febc2e} .dot-g{background:#28c840}
.url-bar { flex:1; margin-left:8px; background:rgba(255,255,255,0.05); border-radius:6px; height:18px; display:flex; align-items:center; padding:0 10px; font-size:10px; color:var(--muted); overflow:hidden; white-space:nowrap; }
.preview-fallback { width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; position:absolute; top:32px; left:0; right:0; bottom:0; z-index:1; }
.preview-emoji{font-size:48px} .preview-desc{font-size:13px;color:var(--muted);text-align:center;padding:0 20px;line-height:1.5}
.card-body{padding:20px 24px 24px}
.card-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px}
.card-title{font-family:'Syne',sans-serif;font-size:1.35rem;font-weight:700;color:var(--text);line-height:1.2}
.card-arrow{font-size:20px;color:var(--muted);transition:transform 0.2s,color 0.2s;flex-shrink:0;margin-top:2px}
.card:hover .card-arrow{color:var(--accent)}
.card-handle{font-size:12px;color:var(--muted);margin-bottom:12px}
.card-desc{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:16px}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-size:11px;font-weight:500;padding:4px 10px;border-radius:100px;border:1px solid;letter-spacing:0.04em}
.theme-brittney .card-bar{background:linear-gradient(90deg,#60a5fa,#a78bfa)} .theme-brittney .preview-fallback{background:linear-gradient(135deg,#0a1628,#0f2144)} .theme-brittney .tag{background:rgba(96,165,250,0.1);border-color:rgba(96,165,250,0.25);color:#93c5fd}
.theme-winter .card-bar{background:linear-gradient(90deg,#1e3a5f,#60a5fa)} .theme-winter .preview-fallback{background:linear-gradient(135deg,#080d14,#0d1a2e)} .theme-winter .tag{background:rgba(30,58,95,0.4);border-color:rgba(96,165,250,0.2);color:#7dd3fc}
.theme-rivers .card-bar{background:linear-gradient(90deg,#064e3b,#10b981)} .theme-rivers .preview-fallback{background:linear-gradient(135deg,#0d1a14,#061f15)} .theme-rivers .tag{background:rgba(6,78,59,0.4);border-color:rgba(16,185,129,0.2);color:#6ee7b7}
.theme-fae .card-bar{background:linear-gradient(90deg,#7c3aed,#c084fc)} .theme-fae .preview-fallback{background:linear-gradient(135deg,#1a0a2e,#2d1054)} .theme-fae .tag{background:rgba(124,58,237,0.15);border-color:rgba(192,132,252,0.25);color:#c084fc}
.theme-darling .card-bar{background:linear-gradient(90deg,#f472b6,#fb7185)} .theme-darling .preview-fallback{background:linear-gradient(135deg,#1a0a12,#2a0d1c)} .theme-darling .tag{background:rgba(244,114,182,0.1);border-color:rgba(244,114,182,0.25);color:#f9a8d4}
.coming-soon-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:#f9a8d4;background:rgba(244,114,182,0.12);border:1px solid rgba(244,114,182,0.25);border-radius:100px;padding:4px 12px;margin-bottom:10px}
.coming-soon-badge::before{content:'◉';font-size:8px;animation:pulse 1.5s ease infinite}
.coming-soon-badge.amber{color:#fcd34d;background:rgba(245,158,11,0.12);border-color:rgba(245,158,11,0.25)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.3}}
.card-contact{grid-column:1/-1;background:var(--surface);border-radius:20px;border:1px solid var(--border);padding:40px 48px;display:flex;align-items:center;justify-content:space-between;gap:32px;transition:border-color 0.3s}
.card-contact:hover{border-color:var(--border-hover)}
.contact-left{flex:1} .contact-eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:0.2em;color:var(--accent);margin-bottom:12px}
.contact-title{font-family:'Syne',sans-serif;font-size:1.8rem;font-weight:700;margin-bottom:12px;line-height:1.2}
.contact-desc{color:var(--muted);font-size:14px;max-width:420px;line-height:1.6}
.contact-links{display:flex;flex-direction:column;gap:12px;flex-shrink:0}
.contact-btn{display:inline-flex;align-items:center;gap:10px;padding:13px 24px;border-radius:12px;font-size:14px;font-weight:500;text-decoration:none;transition:transform 0.2s,opacity 0.2s;white-space:nowrap}
.contact-btn:hover{transform:translateX(3px);opacity:0.85}
.contact-btn-primary{background:linear-gradient(135deg,#7c3aed,#6d28d9);color:#fff}
.contact-btn-secondary{background:rgba(255,255,255,0.05);border:1px solid var(--border);color:var(--text)}
.testimonials-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:32px}
.testimonials-empty{text-align:center;padding:48px;background:var(--surface);border:1px solid var(--border);border-radius:16px;margin-bottom:32px}
.testimonial-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px;position:relative;transition:border-color 0.2s}
.testimonial-card:hover{border-color:var(--border-hover)}
.testimonial-card::before{content:'"';position:absolute;top:12px;right:20px;font-size:60px;font-family:Georgia,serif;color:var(--accent);opacity:0.15;line-height:1}
.testimonial-text{font-size:14px;color:var(--muted);line-height:1.7;margin-bottom:16px;font-style:italic}
.testimonial-author{display:flex;align-items:center;gap:10px}
.testimonial-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;background:rgba(167,139,250,0.15)}
.testimonial-name{font-family:'Syne',sans-serif;font-size:0.9rem;font-weight:600}
.testimonial-handle{font-size:11px;color:var(--muted)}
.testimonial-form-wrap{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:32px}
.testimonial-form-title{font-family:'Syne',sans-serif;font-size:1.2rem;font-weight:700;margin-bottom:8px}
.testimonial-form-desc{font-size:14px;color:var(--muted);margin-bottom:24px}
.testimonial-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.testimonial-form .form-group{margin-bottom:16px}
.testimonial-form label{display:block;font-size:12px;font-weight:500;color:var(--muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:0.08em}
.testimonial-form input,.testimonial-form textarea{width:100%;background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:10px 14px;color:var(--text);font-family:'DM Sans',sans-serif;font-size:14px;outline:none;transition:border-color 0.2s}
.testimonial-form input:focus,.testimonial-form textarea:focus{border-color:var(--accent)}
.char-count{float:right;font-size:11px;color:var(--muted)}
.form-submit{background:linear-gradient(135deg,#7c3aed,#6d28d9);color:#fff;border:none;padding:13px 28px;border-radius:12px;font-size:14px;font-weight:500;cursor:pointer;transition:opacity 0.2s,transform 0.2s}
.form-submit:hover{opacity:0.85;transform:translateY(-1px)}
.changelog-list{margin-bottom:80px}
.changelog-item{display:flex;gap:20px;padding:16px 0;border-bottom:1px solid var(--border);align-items:flex-start}
.changelog-item:last-child{border-bottom:none}
.changelog-date{font-size:11px;color:var(--muted);white-space:nowrap;padding-top:3px;min-width:90px}
.changelog-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:6px}
.changelog-content{flex:1}
.changelog-title{font-size:14px;font-weight:500;margin-bottom:2px}
.changelog-desc{font-size:12px;color:var(--muted)}
.cl-live .changelog-dot{background:#10b981} .cl-dev .changelog-dot{background:#f472b6} .cl-discuss .changelog-dot{background:#f59e0b} .cl-feature .changelog-dot{background:#a78bfa}
.changelog-legend{display:flex;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.cl-legend-item{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}
.cl-legend-dot{width:7px;height:7px;border-radius:50%}
.discord-banner{position:relative;z-index:10;max-width:1200px;margin:0 auto 60px;padding:0 24px}
.discord-card{border-radius:20px;border:1px solid rgba(88,101,242,0.3);background:linear-gradient(135deg,rgba(88,101,242,0.08),rgba(88,101,242,0.03));padding:36px 48px;display:flex;align-items:center;justify-content:space-between;gap:32px;position:relative;overflow:hidden;transition:border-color 0.3s,transform 0.3s}
.discord-card:hover{border-color:rgba(88,101,242,0.5);transform:translateY(-3px)}
.discord-left{flex:1} .discord-eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:0.2em;color:#818cf8;margin-bottom:10px}
.discord-title{font-family:'Syne',sans-serif;font-size:1.6rem;font-weight:700;margin-bottom:8px;line-height:1.2}
.discord-desc{color:var(--muted);font-size:14px;max-width:400px;line-height:1.6}
.discord-right{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.discord-members{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px}
.discord-members::before{content:'●';color:#57f287;font-size:10px}
.discord-btn{display:inline-flex;align-items:center;gap:10px;padding:13px 28px;border-radius:12px;font-size:14px;font-weight:600;text-decoration:none;background:#5865f2;color:#fff;transition:transform 0.2s,opacity 0.2s;white-space:nowrap}
.discord-btn:hover{transform:translateX(3px);opacity:0.9}
.support-card{background:var(--surface);border:1px solid rgba(167,139,250,0.2);border-radius:20px;padding:40px 48px;display:flex;align-items:center;justify-content:space-between;gap:32px;margin-bottom:40px;position:relative;overflow:hidden;transition:border-color 0.3s}
.support-card:hover{border-color:rgba(167,139,250,0.4)}
.support-left{flex:1} .support-title{font-family:'Syne',sans-serif;font-size:1.6rem;font-weight:700;margin-bottom:10px}
.support-desc{color:var(--muted);font-size:14px;max-width:420px;line-height:1.6}
.support-right{flex-shrink:0;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.support-btn{display:inline-flex;align-items:center;gap:10px;padding:13px 24px;border-radius:12px;font-size:14px;font-weight:500;text-decoration:none;transition:transform 0.2s,opacity 0.2s;white-space:nowrap}
.support-btn:hover{transform:translateX(3px);opacity:0.85}
.support-btn-kofi{background:#ff5f5f;color:#fff}
.support-note{font-size:12px;color:var(--muted);text-align:right}
footer{position:relative;z-index:10;text-align:center;padding:40px 24px 60px;border-top:1px solid var(--border);color:var(--muted);font-size:13px}
footer strong{color:var(--accent);font-weight:500}
.footer-links{display:flex;justify-content:center;gap:24px;margin-top:12px}
.footer-links a{color:var(--muted);text-decoration:none;font-size:12px;transition:color 0.2s}
.footer-links a:hover{color:var(--accent)}
.flash{position:fixed;top:80px;left:50%;transform:translateX(-50%);z-index:1000;padding:12px 24px;border-radius:12px;font-size:14px;font-weight:500;white-space:nowrap;animation:flashIn 0.4s ease both}
@keyframes flashIn{from{opacity:0;transform:translateX(-50%) translateY(-10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.flash-success{background:#065f46;border:1px solid #059669;color:#d1fae5}
.flash-error{background:#7f1d1d;border:1px solid #dc2626;color:#fee2e2}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.fade-up{opacity:0;transform:translateY(30px);transition:opacity 0.6s ease,transform 0.6s ease}
.fade-up.visible{opacity:1;transform:translateY(0)}
#easter-egg{position:fixed;inset:0;pointer-events:none;z-index:99999;overflow:hidden}
.paw-particle{position:absolute;animation:pawFall linear forwards;pointer-events:none}
@keyframes pawFall{0%{transform:translateY(-50px) rotate(0deg);opacity:1}100%{transform:translateY(110vh) rotate(720deg);opacity:0}}
#egg-toast{position:fixed;bottom:32px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--surface);border:1px solid rgba(167,139,250,0.4);border-radius:14px;padding:12px 24px;font-size:14px;font-weight:500;color:var(--text);z-index:99998;transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1),opacity 0.4s;opacity:0;white-space:nowrap}
#egg-toast.show{transform:translateX(-50%) translateY(0);opacity:1}
@media(max-width:900px){.bots-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.grid-container,.testimonials-grid,.about-section{grid-template-columns:1fr}.discord-card,.card-contact,.support-card{flex-direction:column;padding:28px 24px}.discord-right,.support-right,.contact-links{align-items:flex-start;width:100%}.discord-btn,.contact-btn,.support-btn{width:100%;justify-content:center}h1{font-size:2.8rem}.stats-bar{flex-direction:column;width:200px}.stat{border-right:none;border-bottom:1px solid var(--border)}.stat:last-child{border-bottom:none}nav{padding:14px 20px}.nav-links{gap:14px}.nav-links li:not(:last-child):not(:nth-last-child(2)){display:none}.testimonial-form .form-row{grid-template-columns:1fr}}

/* MOBILE NAV */
.nav-hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; }
.nav-hamburger span { display:block; width:22px; height:2px; background:var(--text); border-radius:2px; transition:all 0.2s; }
.mobile-menu { position:fixed; top:0; right:0; bottom:0; width:280px; background:var(--surface); z-index:200; padding:60px 32px 40px; transform:translateX(100%); transition:transform 0.3s cubic-bezier(0.4,0,0.2,1); border-left:1px solid var(--border); }
.mobile-menu.open { transform:translateX(0); }
.mobile-menu ul { list-style:none; display:flex; flex-direction:column; gap:8px; }
.mobile-menu a { display:block; font-size:1.1rem; font-weight:500; color:var(--muted); text-decoration:none; padding:12px 0; border-bottom:1px solid var(--border); transition:color 0.2s; }
.mobile-menu a:hover { color:var(--accent); }
.mobile-menu-close { position:absolute; top:20px; right:20px; background:none; border:none; color:var(--muted); font-size:20px; cursor:pointer; padding:4px; }
.mobile-menu-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:199; opacity:0; pointer-events:none; transition:opacity 0.3s; }
.mobile-menu-overlay.open { opacity:1; pointer-events:all; }
@media(max-width:900px) { .nav-hamburger { display:flex; } .nav-links { display:none; } }

/* SOCIAL LINKS ON CARDS */
.card-socials { display:flex; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid var(--border); }
.social-link { font-size:16px; text-decoration:none; opacity:0.6; transition:opacity 0.2s, transform 0.2s; display:inline-block; }
.social-link:hover { opacity:1; transform:translateY(-2px); }

/* ERROR PAGES */
.error-page { position:relative; z-index:10; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:80vh; text-align:center; padding:24px; }
.error-emoji { font-size:64px; margin-bottom:16px; }
.error-code { font-family:'Syne',sans-serif; font-size:6rem; font-weight:800; color:var(--accent); line-height:1; margin-bottom:8px; opacity:0.3; }
.error-title { font-family:'Syne',sans-serif; font-size:1.8rem; font-weight:700; margin-bottom:12px; }
.error-desc { color:var(--muted); font-size:15px; max-width:380px; margin-bottom:32px; line-height:1.6; }
.error-btn { display:inline-flex; align-items:center; gap:10px; padding:13px 28px; border-radius:12px; font-size:14px; font-weight:500; text-decoration:none; background:linear-gradient(135deg,#7c3aed,#6d28d9); color:#fff; transition:opacity 0.2s, transform 0.2s; }
.error-btn:hover { opacity:0.85; transform:translateY(-2px); }

/* LIGHT MODE */
[data-theme="light"] {
  --bg: #f5f4ff;
  --bg2: #ede9ff;
  --bg3: #e0daff;
  --surface: #ffffff;
  --border: rgba(100,80,200,0.12);
  --border-hover: rgba(100,80,200,0.25);
  --text: #1a1030;
  --muted: #6b5fa0;
  --accent: #7c3aed;
  --accent2: #2563eb;
}
[data-theme="light"] body::before { background-image: linear-gradient(rgba(124,58,237,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(124,58,237,0.04) 1px,transparent 1px); }
[data-theme="light"] .orb { opacity:0.08; }
[data-theme="light"] nav { background:rgba(245,244,255,0.85); }
[data-theme="light"] .preview-overlay { background:linear-gradient(to bottom,transparent 40%,#ffffff 100%); }
[data-theme="light"] h1 span.grad { background:linear-gradient(135deg,#7c3aed 0%,#2563eb 50%,#7c3aed 100%); background-size:200% 200%; -webkit-background-clip:text; background-clip:text; }
[data-theme="light"] .mobile-menu { background:#fff; }
[data-theme="light"] .discord-card { background:linear-gradient(135deg,rgba(88,101,242,0.06),rgba(88,101,242,0.02)); }
[data-theme="light"] .support-card { background:#fff; }
[data-theme="light"] footer { background:#f5f4ff; }

/* THEME TOGGLE BUTTON */
.theme-toggle { position:fixed; bottom:24px; right:24px; z-index:200; width:44px; height:44px; border-radius:50%; border:1px solid var(--border); background:var(--surface); font-size:18px; cursor:pointer; transition:transform 0.2s,border-color 0.2s; display:flex; align-items:center; justify-content:center; }
.theme-toggle:hover { transform:scale(1.1); border-color:var(--border-hover); }

/* SPOTLIGHT */
.spotlight-wrap { position:relative; }
.spotlight-card { background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:32px; gap:28px; align-items:center; overflow:hidden; transition:border-color 0.3s; position:relative; }
.spotlight-card:hover { border-color:var(--border-hover); }
.spotlight-card .card-bar { position:absolute; top:0; left:0; right:0; height:4px; }
.theme-brittney.spotlight-card .card-bar { background:linear-gradient(90deg,#60a5fa,#a78bfa); }
.theme-winter.spotlight-card .card-bar { background:linear-gradient(90deg,#1e3a5f,#60a5fa); }
.theme-rivers.spotlight-card .card-bar { background:linear-gradient(90deg,#064e3b,#10b981); }
.theme-fae.spotlight-card .card-bar { background:linear-gradient(90deg,#7c3aed,#c084fc); }
.theme-darling.spotlight-card .card-bar { background:linear-gradient(90deg,#f472b6,#fb7185); }
.spotlight-left { flex-shrink:0; }
.spotlight-avatar { width:100px; height:100px; border-radius:50%; object-fit:cover; border:3px solid var(--border); }
.spotlight-emoji { display:flex; align-items:center; justify-content:center; font-size:48px; background:var(--bg2); }
.spotlight-right { flex:1; }
.spotlight-name { font-family:'Syne',sans-serif; font-size:1.6rem; font-weight:700; margin-bottom:4px; }
.spotlight-handle { font-size:13px; color:var(--muted); margin-bottom:12px; }
.spotlight-desc { font-size:14px; color:var(--muted); line-height:1.6; margin-bottom:20px; max-width:500px; }
.spotlight-actions { display:flex; gap:12px; flex-wrap:wrap; }
.spotlight-btn { display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:10px; font-size:13px; font-weight:500; text-decoration:none; background:rgba(255,255,255,0.05); border:1px solid var(--border); color:var(--text); transition:border-color 0.2s,transform 0.2s; }
.spotlight-btn:hover { border-color:var(--border-hover); transform:translateY(-2px); }
.spotlight-btn-twitch { background:rgba(145,69,255,0.1); border-color:rgba(145,69,255,0.3); color:#c084fc; }
.spotlight-embed { width:100%; margin-top:16px; }
.spotlight-embed iframe { width:100%; height:200px; border-radius:12px; border:none; }
.spotlight-dots { display:flex; gap:8px; justify-content:center; margin-top:16px; }
.spotlight-dot { width:8px; height:8px; border-radius:50%; background:var(--border); border:none; cursor:pointer; transition:background 0.2s,transform 0.2s; }
.spotlight-dot.active { background:var(--accent); transform:scale(1.3); }

/* PREVIEW AVATAR */
.preview-avatar { width:64px; height:64px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,0.1); }

/* COPY LINK BUTTON */
.copy-link-btn { background:none; border:none; cursor:none; font-size:14px; color:var(--muted); padding:2px; transition:color 0.2s; }
.copy-link-btn:hover { color:var(--accent); }

/* DRAG HANDLE */
.drag-handle { cursor:grab; font-size:18px; color:var(--muted); padding:4px; user-select:none; }
.drag-handle:active { cursor:grabbing; }

/* STAT CARD HIGHLIGHT */
.stat-card.highlight { border-color:rgba(245,158,11,0.4); }