/* ===================================================================
   AimRPG — home / landing page
   Shares the wiki's muted rose / dusk palette. Static, no backend.
=================================================================== */

:root {
  --bg-0:#140a10; --bg-1:#1c0f17; --bg-2:#271620;
  --panel:#22121b; --panel-2:#2c1824;
  --border:#3f2735; --border-lit:#5e3a4f;
  --ink:#ece0e6; --ink-dim:#b89dab; --ink-faint:#866c79;
  --rose:#d98aae; --rose-deep:#9c4f73; --rose-glow:#ecb0cb;
  --gold:#d8b58f; --plum:#9a6fa6; --plum-deep:#5f3a66;
  --good:#8cc79e;
  --radius:12px; --shadow:0 10px 30px rgba(0,0,0,.45);
  --maxw:1080px;
  --font:"Trebuchet MS","Segoe UI",system-ui,sans-serif;
}
* { box-sizing:border-box; }
html,body{
  margin:0;padding:0;color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.6;
  background:radial-gradient(1200px 700px at 50% -15%,#3a2030 0%,transparent 60%),linear-gradient(180deg,var(--bg-1),var(--bg-0));
  background-attachment:fixed;min-height:100vh;
}
img{image-rendering:pixelated;image-rendering:crisp-edges;}
a{color:var(--rose);text-decoration:none;}
a:hover{color:var(--rose-glow);text-decoration:underline;}

/* top bar */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:18px;padding:12px 22px;
  background:linear-gradient(180deg,rgba(28,15,23,.96),rgba(20,10,16,.9));border-bottom:1px solid var(--border-lit);
  backdrop-filter:blur(6px);box-shadow:0 4px 18px rgba(0,0,0,.4);}
.brand{display:flex;align-items:baseline;gap:10px;font-weight:700;letter-spacing:.5px;}
.brand .mark{color:var(--rose);text-shadow:0 0 12px rgba(217,138,174,.35);font-size:1.25rem;}
.brand a{color:inherit;} .brand a:hover{text-decoration:none;}
.nav{margin-left:auto;display:flex;gap:20px;align-items:center;}
.nav a{color:var(--ink-dim);font-size:.95rem;}
.nav a:hover{color:var(--rose-glow);text-decoration:none;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px;}

/* hero */
.hero{text-align:center;padding:64px 22px 30px;}
.status{display:inline-flex;align-items:center;gap:9px;padding:6px 16px;border-radius:999px;
  background:rgba(217,138,174,.1);border:1px solid var(--rose-deep);color:var(--rose-glow);
  font-size:.82rem;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;}
.status .dot{width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 8px var(--good);}
.hero h1{margin:18px 0 6px;font-size:3.2rem;letter-spacing:.5px;line-height:1.05;
  background:linear-gradient(90deg,var(--rose-glow),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero .tagline{color:var(--ink-dim);font-size:1.2rem;max-width:640px;margin:0 auto;}
.countdown{margin:22px auto 0;display:inline-flex;gap:14px;}
.countdown .unit{min-width:74px;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--border);
  border-radius:10px;padding:10px 6px;}
.countdown .n{display:block;font-size:1.9rem;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;}
.countdown .l{font-size:.66rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-faint);}
.cta{margin-top:30px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:10px;font-weight:700;
  border:1px solid var(--border-lit);background:var(--panel-2);color:var(--ink);transition:transform .12s,border-color .12s,box-shadow .12s;}
.btn:hover{transform:translateY(-2px);text-decoration:none;border-color:var(--rose-deep);box-shadow:var(--shadow);}
.btn.primary{background:linear-gradient(180deg,var(--rose-deep),#7a3a59);border-color:var(--rose);color:#1a0c13;}
.btn.primary:hover{color:#1a0c13;}

/* sections */
.section{padding:42px 0;}
.section h2{font-size:1.5rem;color:var(--gold);text-align:center;margin:0 0 26px;letter-spacing:.5px;}

/* video facade */
.video{max-width:820px;margin:0 auto;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--border-lit);box-shadow:var(--shadow);position:relative;
  background:radial-gradient(circle at 50% 45%,#3a2030,#160b11);}
.video button.play{all:unset;cursor:pointer;position:absolute;inset:0;display:grid;place-items:center;width:100%;height:100%;}
.video .play .ring{width:78px;height:78px;border-radius:50%;background:rgba(217,138,174,.18);border:2px solid var(--rose);
  display:grid;place-items:center;transition:transform .15s,background .15s;}
.video .play:hover .ring{transform:scale(1.08);background:rgba(217,138,174,.3);}
.video .play .tri{width:0;height:0;border-left:22px solid var(--rose-glow);border-top:14px solid transparent;border-bottom:14px solid transparent;margin-left:6px;}
.video .play .cap{position:absolute;bottom:18px;left:0;right:0;color:var(--ink-dim);font-size:.85rem;}
.video iframe{width:100%;height:100%;border:0;display:block;}

/* features */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;}
.feature{background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--border);border-radius:var(--radius);padding:22px;}
.feature .ic{width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--border);border-radius:10px;margin-bottom:14px;
  background:radial-gradient(circle at 50% 40%,rgba(217,138,174,.12),transparent 70%);}
.feature .ic img{max-width:38px;max-height:38px;}
.feature h3{margin:0 0 6px;font-size:1.08rem;color:var(--ink);}
.feature p{margin:0;color:var(--ink-dim);font-size:.93rem;}

/* FAQ (native details/summary, no JS) */
.faq{max-width:760px;margin:0 auto;}
.faq details{background:var(--panel);border:1px solid var(--border);border-radius:10px;margin-bottom:12px;overflow:hidden;}
.faq details[open]{border-color:var(--border-lit);}
.faq summary{cursor:pointer;list-style:none;padding:15px 18px;font-weight:600;color:var(--ink);display:flex;align-items:center;justify-content:space-between;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";color:var(--rose);font-size:1.3rem;line-height:1;}
.faq details[open] summary::after{content:"–";}
.faq summary:hover{color:var(--rose-glow);}
.faq .a{padding:0 18px 16px;color:var(--ink-dim);font-size:.95rem;}

/* contribute page */
.lead{max-width:680px;margin:14px auto 0;color:var(--ink-dim);text-align:center;font-size:1.08rem;}
.tier{display:flex;align-items:center;justify-content:center;gap:12px;margin:6px 0 18px;}
.tier h2{margin:0;border:0;}
.tier .badge{font-size:.7rem;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;padding:4px 11px;border-radius:999px;}
.tier .badge.hot{background:linear-gradient(180deg,var(--rose-deep),#7a3a59);color:#1a0c13;}
.tier .badge.soft{background:var(--bg-2);border:1px solid var(--border-lit);color:var(--ink-dim);}
.roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;max-width:880px;margin:0 auto;}
.role{background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--border);
  border-left:4px solid var(--border-lit);border-radius:10px;padding:16px 18px;}
.role.hot{border-left-color:var(--rose);}
.role h3{margin:0 0 5px;font-size:1.06rem;color:var(--ink);}
.role p{margin:0;color:var(--ink-dim);font-size:.92rem;}
.discord-cta{max-width:620px;margin:46px auto 0;text-align:center;padding:30px 26px;border-radius:14px;
  background:radial-gradient(circle at 50% 0,#3a2030,var(--panel));border:1px solid var(--border-lit);box-shadow:var(--shadow);}
.discord-cta h2{border:0;margin:0 0 8px;}
.discord-cta p{color:var(--ink-dim);margin:0 0 18px;}

/* footer */
.foot{text-align:center;color:var(--ink-faint);font-size:.84rem;padding:34px 22px;border-top:1px solid var(--border);margin-top:30px;}
.foot a{color:var(--ink-dim);}

@media(max-width:560px){
  .hero h1{font-size:2.2rem;} .hero{padding:44px 16px 20px;}
  .nav{gap:14px;} .nav a:not(.btn){display:none;}
}