@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',system-ui,sans-serif;background:#0c0a09;color:#fafaf9;-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden}
.stars{position:fixed;inset:0;pointer-events:none;z-index:0}
.star{position:absolute;background:#fff;border-radius:50%;opacity:0;animation:twinkle ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:0}50%{opacity:.6}}

.profile-card,.site-section,.site-footer{position:relative;z-index:1;max-width:700px;margin:0 auto;padding:0 24px}

/* Profile */
.profile-card{display:flex;align-items:center;gap:16px;padding-top:48px;padding-bottom:32px;flex-wrap:wrap}
.profile-avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#f97316,#ea580c);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:#fff;flex-shrink:0}
.profile-info{flex:1;min-width:120px}
.profile-name{font-size:20px;font-weight:700}
.profile-handle{font-size:12px;color:#78716c}
.profile-actions{display:flex;gap:8px}
.profile-btn{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:8px;font-size:12px;font-weight:600;color:#d6d3d1;background:#1c1917;border:1px solid #33302e;text-decoration:none;transition:all .2s}
.profile-btn:hover{border-color:#f97316;color:#f97316}
.profile-btn-accent{background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;border:none}
.profile-btn-accent:hover{box-shadow:0 4px 16px rgba(249,115,22,.3)}

/* Section */
.site-section{margin-bottom:36px}
.section-title{font-size:18px;font-weight:700;margin-bottom:16px}

/* FAQ */
.faq-list{background:#1c1917;border:1px solid #33302e;border-radius:14px;overflow:hidden}
.faq-item{border-bottom:1px solid #292524}
.faq-item:last-child{border-bottom:none}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:none;border:none;color:#d6d3d1;font-family:inherit;font-size:13px;font-weight:500;cursor:pointer;text-align:left;transition:color .2s}
.faq-q:hover{color:#f97316}
.faq-arrow{font-size:14px;color:#78716c;transition:transform .2s}
.faq-a{display:none;padding:0 18px 14px}
.faq-a p{font-size:12px;color:#a8a29e;line-height:1.6}
.faq-item.open .faq-a{display:block}
.faq-item.open .faq-arrow{transform:rotate(180deg)}
.faq-item.open .faq-q{color:#f97316}

/* Extension Cards */
.ext-card{display:flex;align-items:center;gap:14px;padding:16px 18px;background:#1c1917;border:1px solid #33302e;border-radius:12px;margin-bottom:10px;transition:all .2s}
.ext-card:hover{border-color:#44403c}
.ext-card.ext-coming-soon{opacity:.5}
.ext-icon{font-size:28px;flex-shrink:0}
.ext-info{flex:1;min-width:0}
.ext-info strong{font-size:14px;color:#fafaf9;display:block;margin-bottom:2px}
.ext-info p{font-size:11.5px;color:#a8a29e;line-height:1.4}
.ext-install-btn{padding:6px 16px;border-radius:8px;font-size:12px;font-weight:600;color:#fff;background:linear-gradient(135deg,#f97316,#ea580c);text-decoration:none;transition:all .2s;white-space:nowrap}
.ext-install-btn:hover{box-shadow:0 4px 12px rgba(249,115,22,.3)}
.ext-soon-badge{padding:4px 12px;border-radius:8px;font-size:11px;font-weight:600;color:#78716c;background:#292524;white-space:nowrap}

/* Connect */
.connect-desc{font-size:12.5px;color:#a8a29e;margin-bottom:14px}
.connect-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.connect-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px;border-radius:12px;text-decoration:none;font-size:12px;font-weight:600;color:#fafaf9;transition:all .2s}
.connect-icon{font-size:24px}
.connect-card.discord{background:linear-gradient(135deg,#5865f2,#4752c4)}
.connect-card.telegram{background:linear-gradient(135deg,#2aabee,#1e96d1)}
.connect-card.youtube{background:linear-gradient(135deg,#ef4444,#dc2626)}
.connect-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.3)}

/* Footer */
.site-footer{text-align:center;padding-top:24px;padding-bottom:48px}
.footer-links{display:flex;justify-content:center;gap:24px;margin-bottom:12px}
.footer-links a{color:#78716c;font-size:12px;text-decoration:none;transition:color .2s}
.footer-links a:hover{color:#fb923c}
.footer-disclaimer{font-size:11px;color:#57534e;margin-bottom:6px;font-style:italic}
.footer-copy{font-size:11px;color:#44403c}

@media(max-width:600px){
  .profile-card{flex-direction:column;text-align:center}
  .profile-actions{justify-content:center}
  .connect-grid{grid-template-columns:1fr}
}