:root{
  --bg:#0b0b0c;           /* luxe charcoal */
  --card:#121214;
  --text:#e8e8ea;
  --muted:#a9a9b2;
  --gold:#d4af37;         /* premium gold */
  --line:#1d1d20;
  --shadow:0 10px 30px rgba(0,0,0,.45);
}

/* Base */
html,body{height:100%}
*{box-sizing:border-box}
body{
  margin:0;
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial;
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 120% -10%, rgba(212,175,55,.08), transparent 60%),
    radial-gradient(900px 600px at -20% 110%, rgba(212,175,55,.06), transparent 55%),
    var(--bg);
}
a{color:var(--gold);text-decoration:none}
a:hover{opacity:.9}

.wrap{max-width:1000px;margin:0 auto;padding:28px}

/* Header */
header.site{
  position:sticky; top:0; z-index:10;
  /* Safari support */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background:rgba(11,11,12,.6);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{font-weight:700; letter-spacing:.6px}
.badge{color:var(--bg); background:var(--gold); padding:3px 8px; border-radius:999px; font-size:.78rem; margin-left:8px}
.toggle{border:1px solid var(--line); background:transparent; color:var(--text); padding:8px 12px; border-radius:10px; cursor:pointer}
.menu .nav-link{margin-right:14px}
.menu .nav-link:last-of-type{margin-right:16px}

/* Hero */
.hero{display:grid; grid-template-columns:1.2fr .8fr; gap:26px; align-items:center; padding:52px 0 22px}
.title{font-size:clamp(32px, 6vw, 54px); line-height:1.1; margin:0 0 14px}
.subtitle{color:var(--muted); margin:0 0 20px}
.pillrow{display:flex; flex-wrap:wrap; gap:10px; margin:18px 0}
.pill{border:1px solid var(--line); padding:8px 12px; border-radius:999px; color:#cfcfd6}
.cta{display:inline-block; margin-top:16px; background:linear-gradient(135deg,var(--gold),#b4932b);
     color:#141415; font-weight:700; padding:12px 18px; border-radius:12px; box-shadow:var(--shadow)}
.card{background:linear-gradient(180deg,#141416, #101012); border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow:var(--shadow)}
.stat{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:8px}
.stat div{background:#0e0e10; border:1px solid var(--line); border-radius:12px; padding:12px; text-align:center}
.kpi{font-size:1.4rem; color:var(--gold); font-weight:800}
.card-title{margin:0 0 10px}

/* Sections */
section{padding:38px 0; border-top:1px solid var(--line)}
h2{font-size:1.6rem; margin:0 0 18px}
.grid{display:grid; gap:16px}
.grid.cards{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.item{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; transition:transform .25s ease, border-color .25s ease}
.item:hover{transform:translateY(-2px); border-color:#2a2a2f}
.muted{color:var(--muted); font-size:.95rem}
.tag{display:inline-block; border:1px solid var(--line); padding:4px 10px; border-radius:999px; font-size:.8rem; color:#cfcfd6; margin:4px 6px 0 0}

/* Footer */
footer{border-top:1px solid var(--line); padding:26px 0; color:var(--muted); text-align:center}

/* Animation */
[data-appear]{opacity:0; transform:translateY(8px); animation:rise .6s ease forwards}
[data-appear="2"]{animation-delay:.08s}
[data-appear="3"]{animation-delay:.16s}
[data-appear="4"]{animation-delay:.24s}
@keyframes rise{to{opacity:1; transform:none}}

/* Light mode */
.light{
  --bg:#fbfbfd; --card:#ffffff; --text:#0e0e11; --muted:#555a66; --line:#e7e7ee; --shadow:0 6px 24px rgba(0,0,0,.08);
}
.light body{background:#fbfbfd}
.light .toggle{border-color:#dcdce6}
.light .badge{color:#0d0d10}
.light .item:hover{border-color:#d6d6e0}
.light .cta{color:#111}

/* Responsive */
@media (max-width:900px){ .hero{grid-template-columns:1fr} }