:root{
    --bg-0:#0f1218; --bg-1:#151a23; --bg-2:#0c1016;
    --text:#e8f0ff; --muted:#a8b0c2;
    --stake-green:#16ff8b; --accent:#69c6ff; --accent-2:#b7e3ff;
    --radius:18px; --shadow:0 10px 30px rgba(0,0,0,.45);
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0; color:var(--text);
    font-family:Inter,system-ui,Arial,Helvetica,sans-serif;
    background: var(--bg-2);
    overflow-x:hidden;
  }
  /* Unified site-wide background (fixed, non-overlapping) */
  html::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-2;           /* below .animated-bg (-1) */
    pointer-events:none;
    background:
      radial-gradient(1200px 600px at 110% -10%, #122135 0%, transparent 60%),
      radial-gradient(900px 500px at -10% 110%, #101c2a 0%, transparent 60%),
      linear-gradient(180deg, var(--bg-0), var(--bg-2));
    background-repeat:no-repeat;
  }
  .animated-bg{
    position:fixed; inset:0; z-index:-1; pointer-events:none;
    background:
      radial-gradient(40% 40% at 10% 10%, color-mix(in oklab, var(--accent) 35%, transparent) 0%, transparent 60%),
      radial-gradient(35% 35% at 90% 20%, color-mix(in oklab, var(--accent) 25%, transparent) 0%, transparent 65%),
      radial-gradient(45% 45% at 50% 110%, color-mix(in oklab, var(--accent) 20%, transparent) 0%, transparent 70%);
    filter:blur(30px) saturate(110%);
    animation:floaty 16s ease-in-out infinite alternate;
  }
  @keyframes floaty{
    0%{transform:translate3d(0,0,0) scale(1)}
    50%{transform:translate3d(0,-10px,0) scale(1.03)}
    100%{transform:translate3d(0,0,0) scale(1)}
  }
  .container{max-width:1100px; margin:0 auto; padding:0 20px}
  .header{display:flex; align-items:center; justify-content:space-between; padding:28px 20px 8px}
  .brand{display:flex; align-items:center; gap:12px}
  .logo{
    width:34px; height:34px; border-radius:10px;
    background:linear-gradient(145deg, var(--accent), var(--accent-2));
    display:grid; place-items:center; color:#04111f; font-weight:900;
    box-shadow:0 6px 18px rgba(105,198,255,.35);
  }
  .title{font-weight:800; letter-spacing:.2px}
  .pill{padding:8px 12px; border-radius:999px; background:#0b1420; color:var(--accent-2); border:1px solid rgba(255,255,255,.06)}
  .grid{display:grid; gap:18px; grid-template-columns:1.2fr .8fr}
  @media (max-width:900px){.grid{grid-template-columns:1fr}}
  .card{
    background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)), var(--bg-1);
    border:1px solid rgba(255,255,255,.06); border-radius:var(--radius);
    box-shadow:var(--shadow); padding:20px; margin-bottom:18px;
  }
  h1{font-size:26px; margin:6px 0 2px}
  .sub{color:var(--muted); margin:0 0 10px}
  .kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
  .kpi{background:#0e141f; padding:16px; border-radius:14px; border:1px solid rgba(255,255,255,.06)}
  .kpi .label{color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.12em}
  .kpi .value{font-size:26px; font-weight:800; margin-top:4px}
  .image-strip{
    margin-top:16px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
  }
  .image-strip img{width:100%; height:130px; object-fit:cover; border-radius:14px; border:1px solid rgba(255,255,255,.06); background:#0e141f}
  .progress{height:12px; border-radius:999px; background:#0a0f18; border:1px solid rgba(255,255,255,.06); overflow:hidden}
  .progress > span{display:block; height:100%; background:linear-gradient(90deg, var(--stake-green), var(--accent)); border-radius:999px; box-shadow:0 0 20px rgba(22,255,139,.35) inset; transition:width .8s cubic-bezier(.2,.8,.2,1)}
  .row{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:12px 0}
  .meta{color:var(--muted)}
  .badge{padding:6px 10px; border-radius:999px; background:rgba(105,198,255,.12); color:var(--accent-2); border:1px solid rgba(105,198,255,.24); font-weight:600}
  .footer-note{color:var(--muted); text-align:center; padding:20px 0 40px}
  /* Table */
  .table{display:grid; border:1px solid rgba(255,255,255,.12); border-radius:14px; overflow:hidden}
  .thead .tr, .tbody .tr{display:grid; grid-template-columns:1fr 1fr 2fr}
  .th, .td{padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.08)}
  .thead{background:#0d141f}
  .th{font-weight:700}
  .tbody .tr:nth-child(odd){background:#0e141f}
  .tbody .tr:last-child .td{border-bottom:none}
  .bar{display:flex; align-items:center; gap:8px}
  .bar .progress{flex:1}

/* =========================
   VIP Rewards (list layout)
   ========================= */
:root{
  --cta: var(--accent);
  --cta-dark: var(--accent-2);
  --cta-glow: rgba(105,198,255,.35);
  --card-hover:rgba(255,255,255,.03);
  --border:rgba(255,255,255,.06);
}

.rewards-list{list-style:none; margin:0; padding:0; display:grid; gap:14px}

.reward-row{
  display:grid; grid-template-columns:1.2fr 1fr auto; align-items:center; gap:18px;
  background:#0e141f; border:1px solid var(--border); border-radius:14px; padding:16px 16px;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.reward-row:hover{
  transform: translateY(-2px);
  background:linear-gradient(180deg, var(--card-hover), transparent), #0e141f;
  border-color: rgba(105,198,255,.28);
  box-shadow: 0 10px 24px rgba(0,0,0,.35), 0 0 0 1px rgba(105,198,255,.12) inset;
}

/* left group */
.row-left{display:flex; align-items:center; gap:14px}
.row-text{display:flex; flex-direction:column}
.row-title{font-weight:800}
.row-sub{color:var(--muted); font-size:12px}

/* middle text */
.row-middle{color:#d8dee9; font-weight:600; text-align:left; opacity:.9}

/* claim button */
.btn-claim{
  appearance:none;
  border:none;
  cursor:pointer;
  user-select:none;
  background: linear-gradient(180deg, var(--cta), var(--cta-dark));
  color: #000000;
  font-weight:800;
  letter-spacing:.02em;
  font-size:14px;
  padding:10px 16px;
  border-radius:12px;
  box-shadow:0 10px 20px var(--cta-glow);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
}
.btn-claim:hover{ filter:brightness(1.06); transform: translateY(-1px); box-shadow:0 12px 24px var(--cta-glow); text-decoration: none; }
.btn-claim:active{ transform: translateY(0); filter:brightness(.98)}
.btn-claim:focus{ outline:2px solid color-mix(in oklab, var(--accent) 70%, transparent); outline-offset:2px }

/* tier icons (simple soft gradient dots) */
.tier-icon{ width:36px; height:36px; border-radius:10px; display:block; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 6px 14px rgba(0,0,0,.35) }
.tier-icon.wood{     background:linear-gradient(145deg,#c77e4a,#b0632f) }
.tier-icon.iron{     background:linear-gradient(145deg,#b9c2d3,#8e9bb2) }
.tier-icon.bronze{   background:linear-gradient(145deg,#cd7f32,#a85e22) }
.tier-icon.silver{   background:linear-gradient(145deg,#dfe5ee,#b8c3d6) }
.tier-icon.gold{     background:linear-gradient(145deg,#ffd773,#f2b93c) }
.tier-icon.jade{     background:linear-gradient(145deg,#2fe6a1,#16b77f) }
.tier-icon.platinum{ background:linear-gradient(145deg,#e2efff,#a9c8ff) }
.tier-icon.diamond{  background:linear-gradient(145deg,#c6e7ff,#8fd0ff) }
.tier-icon.black{    background:linear-gradient(145deg,#2a2e36,#0e1116) }
.tier-icon.obsidian{ background:linear-gradient(145deg,#3a2b4b,#1a1124) }
.tier-icon.mythic{   background:linear-gradient(145deg,#b96bff,#8e41e6) }

/* responsive tweaks */
@media (max-width:900px){
  .reward-row{grid-template-columns:1fr; gap:10px}
  .row-middle{order:3}
  .btn-claim{order:4; width:100%}
}

/* =========================
   ONZKI Layout & Hero Theme
   ========================= */
:root{
  --sidebar-w: 260px;
}

/* Page & containers */
.page{min-height:100dvh}
.section{position:relative; padding:64px 20px}
.section .container{max-width:1100px}
.container.container{ /* ensure nested containers stay centered */
  margin:0 auto;
}

/* Sidebar */
.sidebar{position:fixed; inset:0 auto 0 0; width:var(--sidebar-w); background:linear-gradient(180deg, #0e1218, #0b0f15);
  border-right:1px solid rgba(255,255,255,.06); z-index:30; display:flex; flex-direction:column; transform:translateX(0);
}
.sidebar-inner{display:flex; flex-direction:column; height:100%}
.profile{padding:18px; display:flex; align-items:center; gap:12px}
.avatar{width:44px; height:44px; border-radius:999px; object-fit:cover; border:2px solid rgba(255,255,255,.15)}
.name{font-weight:800}
.status{color:var(--muted); font-size:12px}
.status .dot{display:inline-block; width:8px; height:8px; border-radius:999px; background:#ee5a5a; margin-right:6px}

.nav{display:flex; flex-direction:column; gap:4px; padding:8px}
.nav-link{padding:10px 14px; border-radius:10px; color:var(--text); text-decoration:none; display:flex; align-items:center; gap:8px;
  border:1px solid transparent}
.nav-link:hover{background:rgba(105,198,255,.10); border-color:rgba(105,198,255,.18)}
.nav-link.external::after{content:"\2197"; opacity:.7; margin-left:6px; font-size:12px}
.sidebar-footer{margin-top:auto; padding:14px; color:var(--muted); font-size:12px}
/* Sidebar nav icon sizing & polish */
.nav-link{ padding:12px 14px; gap:12px; }
.nav-link .icon{
  width:18px; height:18px; flex:0 0 18px;
  display:inline-block;
  opacity:.9;
  transition: transform .18s ease, opacity .18s ease, filter .18s ease;
}
.nav-link:hover .icon{
  opacity:1;
  transform: translateX(2px) scale(1.06);
}
.nav-link:active{ transform: translateX(1px); }
.nav-link:focus-visible{
  outline:2px solid color-mix(in oklab, var(--accent) 65%, transparent);
  outline-offset:2px;
}
/* nicer spacing for the ↗ on external links */
.nav-link.external::after{ margin-left:8px; line-height:1; }

/* Optional 'active' state if you add class=\"active\" or aria-current=\"page\" */
.nav-link.active,
.nav-link[aria-current="page"]{
  background: rgba(105,198,255,.12);
  border-color: rgba(105,198,255,.28);
}

/* Ensure SVG <img> tier icons look like the old blocks */
img.tier-icon{
  width:36px; height:36px;
  border-radius:10px;
  display:block;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 6px 14px rgba(0,0,0,.35);
}

/* Layout offset for main page */
.page{margin-left:var(--sidebar-w)}

/* Mobile sidebar (drawer) */
.menu-toggle{position:fixed; top:12px; left:12px; z-index:40; background:#0e141f; color:var(--text); border:1px solid rgba(255,255,255,.10);
  border-radius:10px; padding:8px 10px; display:none}
@media (max-width:900px){
  .page{margin-left:0}
  .sidebar{transform:translateX(-100%); transition:transform .25s ease}
  .sidebar.open{transform:translateX(0)}
  .menu-toggle{display:block}
}

/* Hero */
.hero{min-height:70dvh; display:grid; place-items:center; text-align:center; overflow:hidden}
.hero-inner{position:relative; z-index:1}
.eyebrow{letter-spacing:.18em; font-size:12px; color:var(--accent-2); text-transform:uppercase}
.hero-title{font-size: clamp(42px, 7vw, 72px); font-weight:800; letter-spacing:.5px; white-space:nowrap; overflow-wrap:normal; word-break:keep-all}
.hero-title .dotcom{ color: var(--accent); }
.hero-sub{color:var(--muted); max-width:720px; margin:8px auto 16px}
.hero-cta{display:flex; gap:12px; justify-content:center}
.scroll-cue{
  margin-top:22px;
  opacity:.6;
  font-size: 18px;
  animation: bounce 2s ease-in-out infinite;
}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; border-radius:999px; text-decoration:none; cursor:pointer;
  font-weight:800; color:#04111f; background:linear-gradient(180deg, var(--accent), var(--accent-2)); border:1px solid rgba(255,255,255,.08);
  box-shadow:0 8px 22px rgba(105,198,255,.25);}
.btn:hover{filter:brightness(1.05)}
.btn:active{filter:brightness(.98)}
.btn.ghost{background:transparent; color:var(--accent-2); border-color:rgba(105,198,255,.28)}
.btn.ghost:hover{background:rgba(105,198,255,.10)}

/* Animated particles over hero */
.stars{position:absolute; inset:0; pointer-events:none; background-image:
  radial-gradient(2px 2px at 10% 20%, rgba(105,198,255,.9) 60%, transparent 61%),
  radial-gradient(2px 2px at 30% 40%, rgba(105,198,255,.6) 60%, transparent 61%),
  radial-gradient(2px 2px at 70% 30%, rgba(105,198,255,.7) 60%, transparent 61%),
  radial-gradient(2px 2px at 85% 65%, rgba(105,198,255,.6) 60%, transparent 61%),
  radial-gradient(2px 2px at 55% 80%, rgba(105,198,255,.8) 60%, transparent 61%);
  animation: drift 18s linear infinite;
}
@keyframes drift{from{background-position:0 0, 0 0, 0 0, 0 0, 0 0} to{background-position:200px 120px, -160px 100px, 140px -140px, -180px -180px, 120px 200px}}

/* Section headers */
.section-header{display:grid; gap:6px; margin-bottom:14px}
.section-title{font-size:28px; font-weight:800}
.section-sub{color:var(--muted)}

/* Offers */
.offers-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.offer-card{display:flex; flex-direction:column; gap:10px; background:#0e141f; border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:12px;
  text-decoration:none; color:var(--text); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.offer-card img{width:100%; height:160px; object-fit:cover; border-radius:10px; border:1px solid rgba(255,255,255,.06)}
.offer-card .offer-caption{font-weight:700}
.offer-card:hover{transform:translateY(-2px); border-color:rgba(105,198,255,.28); box-shadow:0 10px 24px rgba(0,0,0,.35)}
.offer-card.placeholder{display:grid; place-items:center; color:var(--muted)}
@media (max-width:900px){.offers-grid{grid-template-columns:1fr}}

/* Sidebar footer social links */
.sidebar-footer .social-links{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  align-items:center;
  padding:12px 0 8px;
  margin-bottom:6px;
  border-top:1px solid rgba(255,255,255,.10);
}
.sidebar-footer .social-links a{
  color:var(--accent-2);
  text-decoration:none;
  font-weight:600;
  letter-spacing:.02em;
  opacity:.9;
}
.sidebar-footer .social-links a:hover{
  color:var(--text);
  opacity:1;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* Mobile centering/scaling fixes for hero */
@media (max-width: 540px){
  .hero{ padding: 72px 0 56px; }
  .hero-inner{ width: min(92vw, 720px); margin-inline:auto; padding-inline:16px; }
  .hero-title{ font-size: clamp(28px, 8.2vw, 56px); line-height:1.05; letter-spacing:.3px; white-space:nowrap; overflow-wrap:normal; word-break:keep-all; }
  .hero-sub{ max-width: 90vw; margin-left:auto; margin-right:auto; }
  .hero-cta{ justify-content:center; gap:10px; }
}

/* ===== Offers: Stake-style card ===== */
.offer-card.offer-stake{ padding:0; border-radius:18px; overflow:hidden; background:#0f131b; border:1px solid rgba(255,255,255,.08) }
.offer-card.offer-stake .offer-cover{ width:100%; height:180px; object-fit:cover; border:none; border-radius:18px 18px 0 0 }
.offer-card.offer-stake .offer-body{ padding:16px 16px 18px; display:flex; flex-direction:column; gap:12px; height:100% }
.offer-card.offer-stake .offer-title{ font-weight:900; letter-spacing:.05em; font-size:14px }
.offer-card.offer-stake .offer-bullets{ margin:0; padding-left:18px; display:grid; gap:4px; font-size:13px; flex:1 }
.offer-card.offer-stake .offer-bullets li{ line-height:1.35 }
.offer-card.offer-stake .offer-cta-wrap{ display:flex; justify-content:center; margin-top:auto }
.offer-card.offer-stake .offer-cta{ display:inline-block; padding:10px 18px; border-radius:12px; font-weight:900; letter-spacing:.05em; 
  border:2px solid color-mix(in oklab, var(--accent) 85%, #ffffff 0%); background:rgba(105,198,255,.10); color:var(--text);
  box-shadow:0 0 0 2px rgba(255,255,255,.02) inset, 0 8px 24px rgba(105,198,255,.15); text-align:center; 
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease; will-change: transform; }
.offer-card.offer-stake .offer-cta:hover{ filter:brightness(1.05); background:rgba(105,198,255,.14); transform: scale(1.03); }
.offer-card.offer-stake .offer-legal{ text-align:center; color:var(--muted); font-size:11px; letter-spacing:.06em; margin-top:6px }

/* Make placeholders equal height visually */
.offer-card.placeholder{ min-height:284px }


/* ===== Claim Instructions (below milestones) ===== */
.claim-instructions{
  margin-top: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)), #0e141f;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 22px 18px 24px;
  text-align: center;
}
.claim-instructions h3{
  margin: 0 0 8px;
  font-size: clamp(18px, 2.1vw, 22px);
  font-weight: 900;
  letter-spacing: .02em;
}
.claim-instructions h3 .highlight{ color: var(--accent); }
.claim-instructions p{
  margin: 0 0 14px;
  color: var(--muted);
}

/* Discord CTA (match primary buttons) */
.btn-discord{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 18px; border-radius: 12px; font-weight: 800; letter-spacing:.02em;
  color:#04111f; text-decoration:none; cursor:pointer;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 8px 22px rgba(105,198,255,.25);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.btn-discord:hover{ filter:brightness(1.05); transform: translateY(-1px); box-shadow:0 12px 26px rgba(105,198,255,.30); }
.btn-discord:active{ filter:brightness(.98); transform: translateY(0); }
.btn-discord:focus-visible{ outline:2px solid color-mix(in oklab, var(--accent) 65%, transparent); outline-offset:2px; }

@media (max-width: 600px){
  .claim-instructions{ padding:18px 14px; }
}