/* ========== THEME ========== */
    :root{
      --bg0:#0c0a08;
      --bg1:#1a1410;
      --bg2:#221a14;

      --stone:#3a2a1a;
      --brown:#5d4037;
      --brown2:#8d6e63;

      --gold:#d4af37;
      --gold2:#ffcc00;

      --red:#8b0000;
      --red2:#5d0000;

      --text:#f5f5f5;
      --muted:#d6d1c8;
      --muted2:#b9b0a5;

      --stroke: rgba(255,255,255,.12);
      --shadow: 0 18px 70px rgba(0,0,0,.55);
      --radius: 18px;

      --font-title: "Cinzel", serif;
      --font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    }

    body.light{
      --bg0:#f7f3ea;
      --bg1:#f0e7d7;
      --bg2:#eadfc8;

      --stone:#eadfc8;
      --brown:#6a5148;
      --brown2:#7b675b;

      --text:#1a1410;
      --muted:#3f3a33;
      --muted2:#6a6257;

      --stroke: rgba(0,0,0,.10);
      --shadow: 0 18px 70px rgba(0,0,0,.14);
    }

    *{ margin:0; padding:0; box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      font-family: var(--font-body);
      color: var(--text);
      line-height: 1.6;
      overflow-x:hidden;
      background:
        radial-gradient(1100px 600px at 20% 10%, rgba(212,175,55,.18), transparent 60%),
        radial-gradient(1100px 600px at 75% 25%, rgba(139,0,0,.16), transparent 60%),
        linear-gradient(135deg, var(--bg0), var(--stone));
      /* subtle pattern */
      background-image:
        radial-gradient(1100px 600px at 20% 10%, rgba(212,175,55,.18), transparent 60%),
        radial-gradient(1100px 600px at 75% 25%, rgba(139,0,0,.16), transparent 60%),
        linear-gradient(135deg, var(--bg0), var(--stone)),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="110" height="110" viewBox="0 0 110 110"><rect width="110" height="110" fill="%230c0a08"/><path d="M0 0L110 110M110 0L0 110" stroke="%233a2a1a" stroke-width="1"/></svg>');
      background-blend-mode: normal,normal,normal,overlay;
    }

    a{ color:inherit; text-decoration:none; }
    .container{ width:min(1200px, calc(100% - 40px)); margin:0 auto; }
    .mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

    /* ========== TOPBAR ========== */
    .topbar{
      position:sticky; top:0; z-index:70;
      background: linear-gradient(180deg, rgba(20,16,14,.92), rgba(20,16,14,.60));
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--stroke);
    }
    body.light .topbar{ background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.55)); }
    .topbar-inner{
      display:flex; align-items:center; justify-content:space-between;
      gap:14px; padding:10px 0;
      font-size:13px;
    }
    .topbar-left{ display:flex; align-items:center; gap:10px; color:var(--muted2); }
    .topbar-right{ display:flex; gap:14px; flex-wrap:wrap; }
    .toplink{ color:var(--muted2); font-weight:800; }
    .toplink:hover{ color:var(--text); }

    .dot{ width:10px; height:10px; border-radius:50%; display:inline-block; border:1px solid rgba(255,255,255,.25); }
    .dot.live{ background:rgba(212,175,55,.35); }
    .dot.ok{ background:#2fbf71; box-shadow:0 0 0 6px rgba(47,191,113,.12); }
    .dot.bad{ background:#a43d2c; box-shadow:0 0 0 6px rgba(164,61,44,.12); }

    /* ========== HEADER / NAV ========== */
    header{
      position:sticky; top:41px; z-index:60;
      background: linear-gradient(to bottom, rgba(93,64,55,.65), rgba(12,10,8,.50));
      backdrop-filter: blur(12px);
      box-shadow: 0 5px 15px rgba(0,0,0,0.35);
      border-bottom: 3px solid rgba(212,175,55,.75);
    }
    body.light header{
      background: linear-gradient(to bottom, rgba(255,255,255,.72), rgba(240,231,215,.55));
      box-shadow: 0 5px 15px rgba(0,0,0,0.10);
    }

    .header-content{
      display:flex; justify-content:space-between; align-items:center;
      gap:16px; padding:14px 0;
    }

    .logo{
      display:flex; align-items:center; gap:14px;
    }
    .logo .crown{
      width:44px; height:44px; border-radius:14px;
      display:grid; place-items:center;
      background: linear-gradient(135deg, rgba(212,175,55,.22), rgba(212,175,55,.08));
      border: 1px solid rgba(212,175,55,.35);
      box-shadow: 0 10px 30px rgba(0,0,0,.25);
      color: var(--gold);
      font-size: 1.35rem;
    }
    .logo h1{
      font-family: var(--font-title);
      font-size: 2rem;
      letter-spacing: 2px;
      text-transform: uppercase;
      background: linear-gradient(to right, var(--gold), var(--gold2));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .logo small{
      display:block;
      margin-top:2px;
      color:var(--muted2);
      font-weight:700;
      font-size:12px;
      letter-spacing:.2px;
    }

    nav ul{
      display:flex;
      list-style:none;
      gap:10px;
      align-items:center;
      flex-wrap:wrap;
      justify-content:center;
    }
    nav a{
      color:var(--text);
      font-weight:800;
      font-size:14px;
      padding:8px 12px;
      border-radius: 12px;
      transition: all .2s ease;
      position:relative;
      opacity:.92;
    }
    nav a:hover{
      background: rgba(212,175,55,.16);
      color: var(--gold2);
      opacity: 1;
    }

    .nav-actions{
      display:flex;
      gap:10px;
      align-items:center;
    }

    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      gap:10px;
      padding:11px 14px;
      border-radius: 14px;
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.05);
      color: var(--text);
      font-weight:900;
      cursor:pointer;
      transition: transform .12s ease, background .12s ease, border-color .12s ease;
      user-select:none;
      white-space:nowrap;
    }
    .btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
    .btn:active{ transform: translateY(0); }

    .btn.primary{
      border-color: rgba(212,175,55,.55);
      background: linear-gradient(to bottom, rgba(212,175,55,.95), rgba(184,134,11,.78));
      color: #1a1410;
      box-shadow: 0 10px 30px rgba(0,0,0,.25);
    }
    .btn.primary:hover{
      background: linear-gradient(to bottom, rgba(255,204,0,.96), rgba(212,175,55,.88));
      border-color: rgba(212,175,55,.75);
    }

    .btn.ghost{
      color: var(--muted);
      background: rgba(0,0,0,.15);
    }
    body.light .btn.ghost{ background: rgba(255,255,255,.55); }

    .hamburger{
      display:none;
      width:44px; height:42px;
      border-radius: 14px;
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.04);
      cursor:pointer;
    }
    .hamburger span{
      display:block;
      height:2px; width:18px;
      margin:4px auto;
      background: currentColor;
      border-radius:2px;
      opacity:.9;
    }

    .mobilemenu{
      display:none;
      border-top:1px solid var(--stroke);
      padding:12px 0 16px;
      background: rgba(10,9,9,.65);
      backdrop-filter: blur(12px);
    }
    body.light .mobilemenu{ background: rgba(255,255,255,.75); }
    .mobilemenu a{
      display:block;
      padding:10px 10px;
      border-radius:12px;
      color:var(--muted);
      font-weight:900;
    }
    .mobilemenu a:hover{ background: rgba(212,175,55,.15); color: var(--text); }
    .w100{ width:100%; }

    /* ========== HERO ========== */
    .hero{
      position:relative;
      padding: 70px 0 26px;
      text-align:center;
      overflow:hidden;
    }
    .hero::before{
      content:"";
      position:absolute;
      inset:-40px;
      background:
        radial-gradient(circle at center, rgba(139,0,0,0.22) 0%, transparent 70%),
        radial-gradient(circle at 20% 30%, rgba(212,175,55,0.20) 0%, transparent 60%);
      pointer-events:none;
      filter: blur(1px);
    }

    /* Optional: replace this with a real image later */
    .hero-bg{
      position:absolute;
      inset:0;
      background:
        linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.86)),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="600" height="320" viewBox="0 0 600 320"><rect width="600" height="320" fill="%233a2a1a"/><g opacity="0.55"><circle cx="80" cy="80" r="7" fill="%235d4037"/><circle cx="260" cy="160" r="5" fill="%235d4037"/><circle cx="520" cy="240" r="9" fill="%235d4037"/></g></svg>');
      background-size: cover;
      background-position:center;
      filter: saturate(1.05) contrast(1.05);
      transform: scale(1.03);
      z-index:-1;
    }

    .hero-inner{
      position:relative;
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap:24px;
      align-items:start;
      text-align:left;
    }

    .badge{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:10px 12px;
      border-radius:999px;
      border:1px solid rgba(212,175,55,.35);
      background: rgba(0,0,0,.28);
      color: var(--muted);
      font-weight:900;
      backdrop-filter: blur(10px);
      width: fit-content;
    }
    .badge i{ color: var(--gold); }

    .hero h2{
      font-family: var(--font-title);
      font-size: clamp(34px, 4vw, 56px);
      line-height: 1.05;
      letter-spacing: 1px;
      margin: 14px 0 10px;
      text-shadow: 0 18px 60px rgba(0,0,0,.70);
    }
    .hero p{
      font-size: 16px;
      max-width: 60ch;
      color: var(--muted);
      margin: 0 0 18px;
      line-height: 1.7;
    }
    .hero-cta{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      margin: 12px 0 18px;
    }

    .quick-info{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:12px;
      margin-top: 10px;
    }
    .qi{
      border-radius: var(--radius);
      border:1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.26);
      backdrop-filter: blur(10px);
      padding:12px;
    }
    body.light .qi{ background: rgba(255,255,255,.55); }
    .qi-k{ font-size:12px; color:var(--muted2); font-weight:800; }
    .qi-v{ margin-top:4px; font-weight:1000; }

    /* right side panels */
    .panel{
      border-radius: var(--radius);
      border:1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.26);
      backdrop-filter: blur(12px);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    body.light .panel{ background: rgba(255,255,255,.62); }
    .panel-header{
      padding:14px 14px 10px;
      border-bottom:1px solid rgba(255,255,255,.10);
    }
    .panel-title{
      font-family: var(--font-title);
      font-weight:900;
      letter-spacing:.4px;
    }
    .panel-sub{
      color:var(--muted2);
      font-size:12px;
      margin-top:4px;
      font-weight:700;
    }
    .panel-body{
      padding:12px 14px 14px;
      display:grid;
      gap:10px;
    }

    .newsitem{
      display:flex;
      gap:12px;
      align-items:flex-start;
      padding:10px 10px;
      border-radius: 14px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
    }
    body.light .newsitem{ background: rgba(255,255,255,.55); }
    .newsicon{
      width:34px; height:34px; border-radius:12px;
      display:grid; place-items:center;
      background: linear-gradient(135deg, rgba(212,175,55,.22), rgba(212,175,55,.08));
      border:1px solid rgba(212,175,55,.28);
      color: var(--gold);
    }
    .newstitle{ font-weight:1000; }
    .newsmeta{ color:var(--muted2); font-size:12px; margin-top:3px; font-weight:700; }

    .event-card{
      display:flex; gap:12px; align-items:flex-start;
      padding:12px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
    }
    body.light .event-card{ background: rgba(255,255,255,.55); }
    .event-icon{
      width:40px; height:40px; border-radius:14px;
      display:grid; place-items:center;
      background: rgba(139,0,0,.20);
      border:1px solid rgba(139,0,0,.28);
      color: var(--gold2);
    }
    .event-name{ font-weight:1000; }
    .event-desc{ color:var(--muted2); font-size:13px; margin-top:3px; font-weight:700; }

    .hero-divider{
      height:1px;
      background: linear-gradient(90deg, transparent, rgba(212,175,55,.45), transparent);
      margin-top: 28px;
      opacity:.95;
    }

    /* ========== STATS ========== */
    .stats{
      background: rgba(0,0,0, 0.38);
      padding: 26px 0;
      margin: 26px 0 0;
      border-top: 1px solid rgba(212,175,55,.55);
      border-bottom: 1px solid rgba(212,175,55,.55);
    }
    body.light .stats{ background: rgba(255,255,255,.55); }
    .stats-container{
      display:flex;
      justify-content:space-around;
      flex-wrap:wrap;
      gap:14px;
    }
    .stat-card{
      background: rgba(58,42,26,.60);
      padding: 18px;
      border-radius: 14px;
      text-align:center;
      min-width: 180px;
      border: 1px solid rgba(141,110,99,.55);
      box-shadow: 0 10px 30px rgba(0,0,0,.25);
    }
    body.light .stat-card{ background: rgba(255,255,255,.70); }
    .stat-card i{ font-size: 2rem; color: var(--gold); margin-bottom: 10px; }
    .stat-card h3{ font-size: 2.25rem; color: var(--gold2); letter-spacing:.2px; }
    .stat-card p{ color: var(--muted2); font-weight:800; }

    /* ========== SECTIONS ========== */
    .section{
      padding: 56px 0;
    }
    .section.alt{
      background:
        radial-gradient(900px 420px at 20% 30%, rgba(212,175,55,.10), transparent 60%),
        radial-gradient(900px 420px at 80% 40%, rgba(139,0,0,.08), transparent 60%),
        linear-gradient(180deg, var(--bg0), var(--bg2));
    }
    .section-head{
      text-align:center;
      margin-bottom: 18px;
    }
    .section-title{
      font-family: var(--font-title);
      font-size: 2.4rem;
      letter-spacing:.6px;
      margin: 0 0 10px;
      text-shadow: 0 3px 6px rgba(0,0,0,0.35);
    }
    .section-sub{
      max-width: 75ch;
      margin: 0 auto;
      color: var(--muted);
      font-weight:700;
    }
    .section-title::after{
      content:'';
      display:block;
      width: 150px;
      height: 3px;
      background: rgba(212,175,55,.85);
      margin: 14px auto 0;
      border-radius: 3px;
    }

    /* ========== SERVERS GRID (DYNAMIC) ========== */
    .servers{
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 16px;
      margin-top: 22px;
    }
    .server-card{
      background: rgba(58,42,26,.70);
      border-radius: 16px;
      overflow:hidden;
      border: 1px solid rgba(141,110,99,.55);
      box-shadow: 0 12px 34px rgba(0,0,0,.25);
      transition: transform .18s ease, box-shadow .18s ease;
    }
    body.light .server-card{ background: rgba(255,255,255,.70); }
    .server-card:hover{
      transform: translateY(-6px);
      box-shadow: 0 18px 50px rgba(0,0,0,.32);
    }
    .server-header{
      background: linear-gradient(to right, var(--red), var(--red2));
      padding: 18px;
      text-align:center;
      position:relative;
    }
    .server-header h3{
      font-family: var(--font-title);
      font-size: 1.7rem;
      margin-bottom: 6px;
      letter-spacing:.5px;
    }
    .server-header p{ color: rgba(255,255,255,.88); font-weight:700; }
    body.light .server-header p{ color: rgba(255,255,255,.92); }

    .server-body{
      padding: 18px;
      display:grid;
      gap: 12px;
    }

    .server-row{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.20);
    }
    body.light .server-row{ background: rgba(255,255,255,.60); }

    .label{ color: var(--muted2); font-size: 12px; font-weight:900; }
    .value{ font-weight:1000; }
    .server-status{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding: 7px 10px;
      border-radius: 999px;
      border:1px solid rgba(255,255,255,.18);
      background: rgba(0,0,0,.18);
      font-weight:1000;
      font-size:12px;
      color: var(--muted);
    }
    body.light .server-status{ background: rgba(255,255,255,.55); }

    .tags{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }
    .tag{
      font-size:12px;
      font-weight:900;
      padding: 6px 10px;
      border-radius: 999px;
      border:1px solid rgba(212,175,55,.25);
      background: rgba(212,175,55,.10);
      color: var(--text);
      opacity:.95;
    }
    body.light .tag{ color: var(--text); }

    /* ========== FEATURES ========== */
    .features-wrap{
      margin-top: 22px;
      border-radius: 16px;
      border: 1px solid rgba(141,110,99,.55);
      background: rgba(58,42,26,.45);
      padding: 18px;
    }
    body.light .features-wrap{ background: rgba(255,255,255,.55); }
    .features-grid{
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 14px;
      margin-top: 14px;
    }
    .feature-card{
      background: rgba(26,26,26,.55);
      padding: 18px;
      border-radius: 14px;
      text-align:center;
      border: 1px solid rgba(139,0,0,.28);
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    }
    body.light .feature-card{ background: rgba(255,255,255,.65); }
    .feature-card:hover{
      transform: translateY(-4px);
      background: rgba(58,42,26,.75);
      box-shadow: 0 0 22px rgba(212,175,55,.20);
    }
    .feature-card i{ font-size: 2.4rem; color: var(--gold); margin-bottom: 10px; }
    .feature-card h3{ font-family: var(--font-title); margin-bottom: 8px; letter-spacing:.3px; }
    .feature-card p{ color: var(--muted); font-weight:700; }

    /* ========== STORE / PRICING ========== */
    .pricing-grid{
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 14px;
      margin-top: 22px;
    }
    .price{
      border-radius: 16px;
      border: 1px solid rgba(141,110,99,.55);
      background: rgba(58,42,26,.60);
      padding: 18px;
      box-shadow: 0 12px 34px rgba(0,0,0,.18);
    }
    body.light .price{ background: rgba(255,255,255,.70); }
    .price.featured{
      border-color: rgba(212,175,55,.60);
      box-shadow: 0 20px 70px rgba(212,175,55,.12);
    }
    .price-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
    .price-name{ font-family: var(--font-title); font-weight:900; font-size: 1.2rem; }
    .price-tag{
      font-size:12px;
      font-weight:1000;
      padding: 6px 10px;
      border-radius:999px;
      border: 1px solid rgba(212,175,55,.30);
      background: rgba(212,175,55,.12);
      color: var(--gold2);
    }
    .price-cost{ font-size: 34px; font-weight:1000; margin: 10px 0 10px; color: var(--gold2); }
    .price-cost span{ font-size: 13px; color: var(--muted2); margin-left: 6px; font-weight:900; }
    .ul{ margin: 0 0 12px; padding-left: 18px; color: var(--muted); line-height: 1.85; font-weight:700; }

    /* ========== RULES ========== */
    .rules-grid{
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 14px;
      margin-top: 22px;
    }
    .rule{
      display:flex; gap:12px;
      border-radius: 16px;
      border: 1px solid rgba(141,110,99,.55);
      background: rgba(58,42,26,.60);
      padding: 16px;
    }
    body.light .rule{ background: rgba(255,255,255,.70); }
    .rule-num{
      width:44px; height:44px;
      border-radius: 16px;
      display:grid; place-items:center;
      border:1px solid rgba(212,175,55,.25);
      background: rgba(212,175,55,.12);
      font-family: var(--font-title);
      font-weight:1000;
      color: var(--gold2);
      flex:0 0 auto;
    }
    .rule-title{ font-weight:1000; }
    .rule-text{ color: var(--muted); margin-top:4px; font-weight:700; }

    /* ========== FAQ ========== */
    .faq{
      display:grid;
      gap:10px;
      margin-top: 22px;
      text-align:left;
    }
    details{
      border-radius: 16px;
      border: 1px solid rgba(141,110,99,.55);
      background: rgba(58,42,26,.55);
      padding: 14px 16px;
    }
    body.light details{ background: rgba(255,255,255,.70); }
    summary{
      cursor:pointer;
      font-weight:1000;
      list-style:none;
    }
    summary::-webkit-details-marker{ display:none; }
    details p{
      margin-top: 10px;
      color: var(--muted);
      font-weight:700;
    }

    /* ========== COMMUNITY / CONTACT ========== */
    .contact-grid{
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 14px;
      margin-top: 22px;
    }
    .contact-card{
      border-radius: 16px;
      border: 1px solid rgba(141,110,99,.55);
      background: rgba(58,42,26,.60);
      padding: 18px;
    }
    body.light .contact-card{ background: rgba(255,255,255,.70); }
    .social-icons{
      display:flex; gap:12px; flex-wrap:wrap;
      margin-top: 12px;
    }
    .social-icons a{
      width:42px; height:42px;
      display:inline-flex; align-items:center; justify-content:center;
      border-radius: 50%;
      background: rgba(212,175,55,.16);
      border: 1px solid rgba(212,175,55,.22);
      color: var(--gold2);
      transition: transform .15s ease, background .15s ease;
    }
    .social-icons a:hover{
      transform: translateY(-2px);
      background: rgba(212,175,55,.28);
    }

    /* ========== FOOTER ========== */
    footer{
      background: linear-gradient(to top, rgba(12,10,8,.95), rgba(93,64,55,.35));
      padding: 34px 0 18px;
      text-align:center;
      border-top: 3px solid rgba(212,175,55,.75);
    }
    .footer-grid{
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 16px;
      text-align:left;
      margin-bottom: 18px;
    }
    .footer-col h3{
      font-family: var(--font-title);
      font-size: 1.25rem;
      margin-bottom: 12px;
      color: var(--gold2);
    }
    .footer-col ul{ list-style:none; }
    .footer-col li{ margin: 8px 0; }
    .footer-col a{ color: var(--muted2); font-weight:800; }
    .footer-col a:hover{ color: var(--gold2); }
    .copyright{
      padding-top: 14px;
      border-top: 1px solid rgba(255,255,255,.10);
      color: var(--muted2);
      font-size: 13px;
      font-weight:700;
    }

    /* ========== TOAST ========== */
    .toast{
      position:fixed;
      left:50%; bottom:18px;
      transform: translateX(-50%);
      padding:12px 14px;
      border-radius: 14px;
      border:1px solid rgba(255,255,255,.16);
      background: rgba(0,0,0,.65);
      backdrop-filter: blur(12px);
      box-shadow: 0 20px 80px rgba(0,0,0,.55);
      opacity:0; pointer-events:none;
      transition: opacity .18s ease, transform .18s ease;
      font-weight:1000;
      z-index: 999;
    }
    body.light .toast{ background: rgba(255,255,255,.78); color: #1a1410; }
    .toast.show{ opacity:1; transform: translateX(-50%) translateY(-4px); }

    /* ========== SCROLL REVEAL ANIM ========== */
    .reveal{
      opacity:0;
      transform: translateY(14px);
      transition: opacity .55s ease, transform .55s ease;
    }
    .reveal.show{
      opacity:1;
      transform: translateY(0);
    }

    /* Responsive */
    @media (max-width: 980px){
      .hero-inner{ grid-template-columns: 1fr; text-align:left; }
      .quick-info{ grid-template-columns: 1fr; }
      nav{ display:none; }
      .hamburger{ display:inline-grid; place-items:center; }
      .mobilemenu.show{ display:block; }
      .stat-card{ min-width: 150px; }
    }
    @media (max-width: 480px){
      .logo h1{ font-size: 1.6rem; }
      .section-title{ font-size: 2.0rem; }
    }