:root{
  --bg:#f3f3f3;
  --surface:#ffffff;
  --surface-2:#f4f5fb;
  --text:#101010;
  --muted:#4d4d4d;
  --brand:#b2ff00;
  --brand-2:#ff00b8;
  --ink:#0f0f12;
  --dark:#141419;
  --max:1120px;
  --radius:14px;
  --shadow:0 10px 24px rgba(0,0,0,.12)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.62
}
img{max-width:100%;height:auto;border-radius:10px}
a{color:#5733ff;text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--max);margin:0 auto;padding:0 1rem}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:1rem;top:1rem;background:#fff;color:#000;padding:.5rem 1rem;border-radius:8px;z-index:50}

.site-header{
  position:sticky;top:0;z-index:30;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(8px);
  border-bottom:2px solid #111
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0}
.logo{font-weight:900;letter-spacing:.3px;color:#111}
.main-nav ul{list-style:none;display:flex;gap:.6rem;padding:0;margin:0}
.main-nav a{
  color:#111;
  font-weight:700;
  padding:.45rem .68rem;
  border:2px solid transparent;
  border-radius:999px
}
.main-nav a[aria-current=page],.main-nav a:hover{
  background:var(--brand);
  border-color:#111;
  text-decoration:none
}

.home-hero{
  background:linear-gradient(135deg,var(--brand),#d6ff5a 35%,#ecff9a);
  border-bottom:3px solid #111;
  padding:2.4rem 0
}
.hero-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:1.1rem;
  align-items:start
}
.eyebrow{
  display:inline-block;
  margin:0 0 .4rem;
  padding:.25rem .6rem;
  border:2px solid #111;
  border-radius:999px;
  font-weight:800;
  font-size:.82rem;
  background:#fff
}
h1{
  margin:.2rem 0 .9rem;
  font-size:clamp(1.9rem,4.2vw,3rem);
  line-height:1.05;
  letter-spacing:-.4px
}
.home-hero p{max-width:72ch;color:#111}
.hero-actions{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.9rem}
.hero-panel{
  background:#15151a;
  color:#f8f8fb;
  border:3px solid #111;
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:1rem
}
.hero-panel h2{
  margin:.2rem 0 .55rem;
  color:#fff;
  font-size:1.1rem
}
.hero-panel ul{margin:0;padding-left:1.1rem}
.hero-panel li{margin:.4rem 0}

.btn{
  display:inline-block;
  font-weight:800;
  padding:.66rem .95rem;
  border-radius:10px;
  border:2px solid #111;
  background:#111;
  color:#fff
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn.secondary{
  background:#fff;
  color:#111
}

.info-strip{
  background:#111;
  color:#fff;
  border-bottom:3px solid #111
}
.strip-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.5rem;
  padding:.55rem 0
}
.strip-grid p{
  margin:0;
  font-size:.84rem;
  font-weight:700;
  text-align:center
}

.home-section{padding:2.2rem 0}
.home-section h2{
  margin:0 0 .45rem;
  font-size:clamp(1.4rem,3.2vw,2.1rem);
  line-height:1.1
}
.home-section p{max-width:84ch;color:#2a2a2a}

.reward-grid{
  margin-top:1rem;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.8rem
}
.reward-card{
  background:#fff;
  border:3px solid #111;
  border-radius:14px;
  padding:1rem;
  box-shadow:var(--shadow)
}
.reward-card h3{margin:.1rem 0 .45rem;line-height:1.2}
.reward-card.accent{background:#efe4ff}
.reward-card.pink{background:#ffecf8}
.reward-card.dark{background:#17171d;color:#f0f0f6}
.reward-card.dark p{color:#d9d9e3}

.home-section.alt{
  background:#fff;
  border-top:2px solid #111;
  border-bottom:2px solid #111
}
.split-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:1rem;
  align-items:start
}
.panel-box{
  background:linear-gradient(160deg,#bfff2d,#f0ffad);
  border:3px solid #111;
  border-radius:16px;
  padding:1rem
}
.panel-box h3{margin:.15rem 0 .45rem}
.panel-box ul{margin:0;padding-left:1.1rem}
.panel-box li{margin:.35rem 0}

.faq-home{background:#f7f7f7}
.faq details{
  background:#fff;
  border:2px solid #111;
  border-radius:10px;
  padding:.75rem;
  margin-bottom:.5rem
}
.faq summary{font-weight:700;cursor:pointer}

.cta-band{
  background:linear-gradient(160deg,#ff00b8,#ff42ca 38%,#ff7bdc);
  color:#fff;
  border-top:3px solid #111;
  border-bottom:3px solid #111;
  padding:2.1rem 0
}
.cta-band h2{margin:0 0 .55rem;line-height:1.1}
.cta-band p{max-width:80ch}
.stat-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.65rem;
  margin:.9rem 0
}
.stat-grid article{
  background:#fff;
  color:#111;
  border:2px solid #111;
  border-radius:10px;
  padding:.75rem
}
.stat-grid strong{display:block;line-height:1.2}
.stat-grid span{display:block;margin-top:.25rem;font-size:.92rem}

/* Existing pages support */
.hero{padding:2.6rem 0 1.6rem}
.hero h1{font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.2;margin:0 0 .8rem}
.hero p{max-width:75ch;color:#333}
.grid{display:grid;gap:1rem}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{
  background:#fff;
  border:2px solid #111;
  border-radius:var(--radius);
  padding:1rem;
  box-shadow:var(--shadow)
}
.breadcrumbs{font-size:.92rem;padding:1rem 0;color:#444}
.breadcrumbs ol{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.4rem}
.breadcrumbs li::after{content:"/";margin-left:.4rem;color:#888}
.breadcrumbs li:last-child::after{content:""}
.content{display:grid;gap:1.2rem}
.content h2{margin:1.75rem 0 .45rem;line-height:1.3}
.content h3{margin:1.2rem 0 .4rem;line-height:1.35}
.content ul{padding-left:1.2rem}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.8rem}
.kpi{
  background:#fff;
  padding:.9rem;
  border-radius:10px;
  border:2px solid #111
}
.cta{
  margin:1.6rem 0;
  padding:1rem;
  border:2px solid #111;
  border-radius:var(--radius);
  background:#f2f2f2
}
.related ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.8rem}
.related a{
  display:block;
  background:#fff;
  padding:1rem;
  border-radius:10px;
  border:2px solid #111
}
.site-footer{
  margin-top:2.2rem;
  border-top:2px solid #111;
  padding:1.4rem 0;
  color:#333;
  background:#fff
}
.topical-nav{display:flex;flex-wrap:wrap;gap:.55rem}
.topical-nav a{
  background:#f2f2f2;
  color:#111;
  border:2px solid #111;
  padding:.42rem .65rem;
  border-radius:999px
}
.sr-only{
  position:absolute!important;
  width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0
}
@media (max-width:920px){
  .hero-grid,.split-grid{grid-template-columns:1fr}
  .reward-grid{grid-template-columns:1fr}
  .strip-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  .main-nav ul{gap:.2rem;flex-wrap:wrap;justify-content:flex-end}
  .main-nav a{padding:.35rem .58rem}
  .home-hero{padding:1.8rem 0}
  .stat-grid{grid-template-columns:1fr}
}
