*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --blue-deep:    #1e3a8a;
      --blue-mid:     #2563eb;
      --blue-light:   #4ab8fe;
      --blue-pale:    #dbeafe;
      --glass:        rgba(255,255,255,0.42);
      --glass-border: rgba(255,255,255,0.65);
      --glass-shadow: rgba(59,130,246,0.12);
      --text:         #0f172a;
      --text-mid:     #334155;
      --text-soft:    #64748b;
      --bg:           #f0f6ff;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Outfit', sans-serif;
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
      overflow-x: hidden;
    }

    /* ── BACKGROUND ── */
    .bg-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(145deg, #e8f3ff 0%, #f0f6ff 40%, #fafcff 100%); }
    .bg-orb { position: fixed; border-radius: 50%; filter: blur(100px); opacity: 0.22; pointer-events: none; animation: orbDrift 18s ease-in-out infinite; }
    .bg-orb-1 { width: 700px; height: 700px; background: radial-gradient(#93c5fd, #1d4ed8); top: -200px; left: -200px; }
    .bg-orb-2 { width: 500px; height: 500px; background: radial-gradient(#bae6fd, #0284c7); bottom: -100px; right: -100px; }
    .bg-orb-3 { width: 350px; height: 350px; background: radial-gradient(#e0f2fe, #38bdf8); top: 50%; left: 50%; }
    @keyframes orbDrift {
      0%,100% { transform: translate(0,0) scale(1); }
      33%      { transform: translate(30px,-20px) scale(1.04); }
      66%      { transform: translate(-15px,18px) scale(0.97); }
    }

    /* ── HERO ── */
    .hero {
      position: relative; z-index: 1;
      min-height: 520px; display: flex; align-items: center; justify-content: center;
      text-align: center; padding: 100px 24px 80px; overflow: hidden;
    }
    .hero-banner-bg { position: absolute; inset: 0; background: url('../assets/banner.png') center/cover no-repeat; filter: blur(4px) brightness(0.28) saturate(1.2); transform: scale(1.06); }
    .hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,23,42,0.3) 0%, rgba(15,23,42,0.7) 100%), radial-gradient(ellipse at 30% 60%, rgba(37,99,235,0.35) 0%, transparent 60%), radial-gradient(ellipse at 70% 40%, rgba(74,184,254,0.2) 0%, transparent 60%); }
    .hero-content { position: relative; z-index: 2; max-width: 680px; animation: heroIn 0.9s cubic-bezier(0.16,1,0.3,1) both; }
    @keyframes heroIn { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }

    .hero-logo { width: auto; height: 88px; max-width: 200px; display: block; margin: 0 auto 24px; object-fit: contain; filter: drop-shadow(0 0 24px rgba(74,184,254,0.5)); }
    .hero h1 { font-size: clamp(2rem,5vw,3.4rem); font-weight: 800; color: #fff; line-height: 1.15; letter-spacing: -0.03em; margin-bottom: 16px; }
    .hero h1 span { background: linear-gradient(135deg,#4ab8fe,#a5f3fc); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
    .hero p { font-size: 1.05rem; color: rgba(255,255,255,0.7); line-height: 1.7; max-width: 500px; margin: 0 auto 36px; font-weight: 400; }
    .hero-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

    .btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 13px 28px; border-radius: 12px; background: linear-gradient(135deg,#2563eb,#1e40af); color: white; font-family: 'Outfit',sans-serif; font-size: 0.92rem; font-weight: 600; text-decoration: none; box-shadow: 0 4px 20px rgba(37,99,235,0.45); transition: all 0.2s; }
    .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(37,99,235,0.5); }
    .btn-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 13px 28px; border-radius: 12px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.28); color: white; font-family: 'Outfit',sans-serif; font-size: 0.92rem; font-weight: 600; text-decoration: none; transition: all 0.2s; }
    .btn-ghost:hover { background: rgba(255,255,255,0.2); transform: translateY(-2px); }

    .hero-discord-bar { display: inline-flex; align-items: center; gap: 16px; margin-top: 20px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 100px; padding: 8px 22px; backdrop-filter: blur(12px); }
    .hero-discord-stat { display: flex; align-items: center; gap: 6px; }
    .hero-discord-num { font-size: 0.88rem; font-weight: 800; color: #fff; }
    .hero-discord-label { font-size: 0.75rem; font-weight: 500; color: rgba(255,255,255,0.5); }
    .hero-discord-divider { width: 1px; height: 16px; background: rgba(255,255,255,0.15); }
    .hero-discord-dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 6px #4ade80; }

    /* ── TICKER ── */
    .ticker-wrap { position: relative; z-index: 1; background: linear-gradient(90deg, var(--blue-deep), var(--blue-mid), var(--blue-deep)); border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); overflow: hidden; padding: 14px 0; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); }
    .ticker-track { display: flex; align-items: center; gap: 0; white-space: nowrap; animation: tickerScroll 40s linear infinite; width: max-content; }
    @keyframes tickerScroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
    .ticker-item { font-size: 0.85rem; font-weight: 700; color: rgba(255,255,255,0.9); letter-spacing: 0.08em; padding: 0 24px; white-space: nowrap; }
    .ticker-sep { color: rgba(255,255,255,0.25); font-size: 0.5rem; padding: 0 4px; }

    /* ── LAYOUT ── */
    .main-wrap { position: relative; z-index: 1; max-width: 1160px; margin: 0 auto; padding: 56px 24px 80px; display: grid; grid-template-columns: 1fr 320px; gap: 36px; align-items: start; }

    /* ── SECTION HEADER ── */
    .section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
    .section-header-icon { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--blue-mid), var(--blue-deep)); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; flex-shrink: 0; box-shadow: 0 4px 12px rgba(37,99,235,0.3); }
    .section-header h2 { font-size: 1.05rem; font-weight: 700; color: var(--text); }
    .section-header-line { flex: 1; height: 1px; background: linear-gradient(to right, rgba(74,184,254,0.3), transparent); }

    /* ── GLASS CARD ── */
    .glass-card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 20px; backdrop-filter: blur(16px); box-shadow: 0 4px 24px var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,0.7); padding: 22px; }

    /* ── CHANGELOG ── */
    .changelog-entry { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 18px; margin-bottom: 10px; overflow: hidden; }
    .changelog-head { display: flex; align-items: center; gap: 14px; padding: 14px 20px; cursor: pointer; background: rgba(255,255,255,0.4); }
    .changelog-version { font-size: 0.88rem; font-weight: 800; color: var(--blue-deep); }
    .changelog-date { font-size: 0.76rem; color: var(--text-soft); }
    .changelog-body { padding: 0 20px; max-height: 0; overflow: hidden; transition: all 0.3s ease; }
    .changelog-entry.open .changelog-body { max-height: 600px; padding: 14px 20px 18px; }
    .cl-tag { font-size: 0.65rem; font-weight: 800; padding: 2px 7px; border-radius: 5px; text-transform: uppercase; margin-right: 5px; }
    .cl-tag.added { background: #dcfce7; color: #16a34a; }
    .cl-tag.fixed { background: #dbeafe; color: #2563eb; }

    /* ── TEAM GRID ── */
    .team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }

    .member-card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 20px; backdrop-filter: blur(16px); box-shadow: 0 4px 24px var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,0.7); overflow: hidden; text-align: center; transition: transform 0.25s ease, box-shadow 0.25s ease; }
    .member-card:hover { transform: translateY(-4px); box-shadow: 0 10px 32px rgba(37,99,235,0.16), inset 0 1px 0 rgba(255,255,255,0.8); }
    .member-card.founder { border-color: rgba(245,158,11,0.4); box-shadow: 0 4px 24px rgba(245,158,11,0.12), inset 0 1px 0 rgba(255,255,255,0.7); }

    .card-banner { height: 64px; position: relative; overflow: hidden; background: linear-gradient(135deg, var(--blue-deep), var(--blue-mid)); }
    .card-banner.founder-banner { background: linear-gradient(135deg, #92400e, #d97706, #f59e0b); }
    .banner-emoji { position: absolute; right: 12px; bottom: -4px; font-size: 2.2rem; opacity: 0.3; }

    .card-avatar-wrap { margin-top: -28px; position: relative; z-index: 1; display: flex; justify-content: center; margin-bottom: 10px; }
    .card-avatar { width: 58px; height: 58px; border-radius: 16px; border: 3px solid rgba(255,255,255,0.9); overflow: hidden; background: var(--blue-pale); box-shadow: 0 4px 14px rgba(37,99,235,0.2); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 800; color: var(--blue-mid); }
    .card-avatar img { width: 100%; height: 100%; object-fit: cover; }

    .card-body { padding: 0 16px 20px; }
    .card-username { font-size: 0.95rem; font-weight: 800; color: var(--text); letter-spacing: -0.02em; margin-bottom: 6px; overflow-wrap: break-word; }

    .role-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 0.68rem; font-weight: 700; padding: 3px 10px; border-radius: 100px; margin-bottom: 12px; letter-spacing: 0.04em; }
    .role-badge.founder { background: rgba(245,158,11,0.15); color: #f59e0b; border: 1px solid rgba(245,158,11,0.3); }
    .role-badge.team    { background: rgba(37,99,235,0.1); color: var(--blue-mid); border: 1px solid rgba(37,99,235,0.25); }

    .card-divider { border: none; border-top: 1px solid rgba(74,184,254,0.12); margin: 0 0 12px; }
    .card-meta { display: flex; flex-direction: column; gap: 7px; }
    .card-meta-item { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 0.76rem; color: var(--text-soft); }
    .card-meta-item i { color: var(--blue-light); font-size: 0.72rem; width: 14px; text-align: center; }
    .lang-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; }
    .lang-tag { font-size: 0.62rem; font-weight: 700; color: var(--blue-mid); background: rgba(37,99,235,0.08); border: 1px solid rgba(37,99,235,0.15); padding: 1px 6px; border-radius: 5px; }

    /* ── REVIEWS ── */
    .reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }

    .review-card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 16px; backdrop-filter: blur(16px); box-shadow: 0 2px 14px var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,0.7); padding: 16px 18px; display: flex; gap: 12px; transition: all 0.2s; }
    .review-card:hover { background: rgba(255,255,255,0.6); border-color: rgba(37,99,235,0.2); transform: translateY(-2px); }

    .review-avatar { width: 42px; height: 42px; border-radius: 11px; overflow: hidden; flex-shrink: 0; border: 2px solid rgba(255,255,255,0.6); }
    .review-avatar img { width: 100%; height: 100%; object-fit: cover; }

    .review-body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
    .review-header { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
    .review-name { font-size: 0.82rem; font-weight: 700; color: var(--text); }
    .review-stars { display: flex; gap: 1px; }
    .review-star { font-size: 0.68rem; color: #f59e0b; }
    .review-text { font-size: 0.79rem; color: var(--text-soft); line-height: 1.45; }
    .review-date { font-size: 0.66rem; color: #94a3b8; margin-top: 2px; }

    /* ── SIDEBAR ── */
    .sidebar { display: flex; flex-direction: column; gap: 20px; }

    .mod-links { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
    .mod-link { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; text-decoration: none; color: var(--text-mid); font-size: 0.9rem; font-weight: 600; border: 1px solid rgba(74,184,254,0.15); background: rgba(255,255,255,0.4); transition: all 0.2s; }
    .mod-link:hover { background: rgba(37,99,235,0.08); border-color: rgba(37,99,235,0.25); color: var(--blue-mid); transform: translateX(4px); }
    .mod-link-icon { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,0.6); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .mod-link-arrow { margin-left: auto; color: #cbd5e1; }

    /* ── FOOTER ── */
   
    .footer-inner { max-width: 1160px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 16px; }
    .footer-socials { display: flex; gap: 10px; }
    .footer-social { width: 40px; height: 40px; border-radius: 10px; background: #fff; border: 1px solid #ddd; display: flex; align-items: center; justify-content: center; color: var(--blue-mid); text-decoration: none; }
    .footer-links { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
    .footer-links a { font-size: 0.82rem; color: var(--text-soft); text-decoration: none; }
    .footer-copy { font-size: 0.78rem; color: #94a3b8; }

    .site-footer { background: rgba(255,255,255,0.5); padding: 36px 24px; text-align: center; border-top: 1px solid rgba(74,184,254,0.2); }

    @media (max-width: 900px) {
      .main-wrap { grid-template-columns: 1fr; padding: 24px 16px 60px; }
      .sidebar { order: -1; }
      .hero { padding: 80px 16px 60px; min-height: auto; }
      .hero-discord-bar { flex-wrap: wrap; justify-content: center; gap: 10px; border-radius: 16px; padding: 10px 16px; }
      .team-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
      .reviews-grid { grid-template-columns: 1fr; }
    }