:root{
  --bg:#0A0F0D;
  --bg-soft:#0F1512;
  --card:#121A16;
  --text:#E6F5EE;
  --muted:#B6DCC9;
  --accent:#11C76F;
  --accent-2:#0AA85D;
  --border:#1F2A24;
  --shadow: 0 10px 30px rgba(17,199,111,0.12);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:linear-gradient(180deg,var(--bg) 0%, #0D1411 100%);
}
.container{max-width:1120px;margin:0 auto;padding:0 20px}
a{color:inherit;text-decoration:none}
.site-header{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(180%) blur(8px);
  background:rgba(10,15,13,0.7);
  border-bottom:1px solid var(--border);
}
.nav{display:flex;align-items:center;gap:20px;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:0.2px}
.brand .logo{width:28px;height:28px}
.menu{display:flex;gap:16px}
.menu a{opacity:0.85}
.menu a:hover{opacity:1}
.cta-wrap{display:flex;gap:10px;align-items:center}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border-radius:12px;border:1px solid var(--border);box-shadow:none;transition:transform .08s ease,box-shadow .2s ease}
.btn.primary{background:var(--accent);color:#08140E;border-color:transparent;box-shadow:var(--shadow);font-weight:700}
.btn.primary:hover{transform:translateY(-1px)}
.btn.ghost{background:transparent}
.btn.outline{background:transparent;border-color:var(--accent);color:var(--accent)}
.btn.block{width:100%;text-align:center}
.btn.small{padding:8px 12px;border-radius:10px}

.hero{padding:64px 0 32px;border-bottom:1px solid var(--border)}
.grid-2{display:grid;grid-template-columns:1.2fr 0.8fr;gap:28px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hero h1{font-size:40px;line-height:1.08;margin:0 0 12px}
.accent{color:var(--accent)}
.lead{opacity:0.9;margin:0 0 18px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.tiny{font-size:12px;opacity:0.8}
.note{margin-top:8px}
.hero-card .card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px}
.checklist{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:10px}
.checklist li{display:flex;gap:10px;align-items:flex-start;opacity:0.95}

.values{padding:36px 0;border-bottom:1px solid var(--border)}
.vcard{background:var(--bg-soft);border:1px solid var(--border);border-radius:16px;padding:18px}
.vcard .icon{font-size:22px;margin-bottom:8px}

.course{padding:56px 0;border-bottom:1px solid var(--border)}
.course h2{margin-top:0;font-size:28px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.step{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px}
.course-cta{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}

.proof{padding:56px 0;border-bottom:1px solid var(--border)}
.proof h2{margin:0 0 16px}
.tcard{background:var(--bg-soft);border:1px solid var(--border);border-radius:16px;padding:18px}
blockquote{margin:0 0 8px}
.author{font-size:14px;opacity:0.8}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.imgbox{background:#0C130F;border:1px dashed var(--border);border-radius:14px;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;opacity:0.9}
.ph{opacity:0.8}

.modules{padding:56px 0;border-bottom:1px solid var(--border)}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px}
.card.premium{border-color:rgba(17,199,111,0.35);box-shadow:var(--shadow)}
.bullets{margin:10px 0 16px;padding-left:18px}
.bullets li{margin:6px 0}

.faq{padding:56px 0}
details{background:var(--bg-soft);border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin:10px 0}
summary{cursor:pointer;font-weight:600}

.site-footer{border-top:1px solid var(--border);padding:20px 0 30px}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:16px;align-items:start}
.brand.mini{font-weight:700}
.footer-nav{display:flex;gap:14px;flex-wrap:wrap}
.footer-cta{display:flex;gap:10px;justify-content:flex-end}

@media (max-width: 960px){
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .menu{display:none}
}

/* --- Professional polish upgrades --- */
.site-header{
  box-shadow: 0 6px 24px rgba(0,0,0,0.25);
  background: linear-gradient(180deg, rgba(10,15,13,0.85), rgba(10,15,13,0.6));
}
.hero{
  background: radial-gradient(1200px 480px at 10% 0%, rgba(17,199,111,0.07), rgba(0,0,0,0) 60%);
}
.card, .tcard, .vcard, details{
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
h1, h2, h3, h4{ letter-spacing: .2px }

/* Tokenomics section */
.tokenomics{ padding: 56px 0; border-bottom:1px solid var(--border) }
.tokenomics .head{ max-width:800px; margin:0 auto 18px; text-align:center }
.tokenomics .sub{ opacity:.9 }
.tnk-grid{ margin-top: 16px }
.tnk-card{
  background: var(--bg-soft);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
}
.tnk-card h4{ margin:6px 0 6px }
.tnk-card ul{ margin:8px 0 0 16px; }
.tnk-rubric{ margin-top:22px }
.rubric-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin:10px 0 6px }
.rubric-grid h5{ margin:6px 0 }
.rubric-grid ul{ margin:8px 0 0 16px }
.rubric-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:12px }

@media (max-width: 960px){
  .rubric-grid{ grid-template-columns:1fr }
}


/* === Tracker Aesthetic === */
body{
  background:
    linear-gradient(180deg, var(--bg) 0%, #0A110E 100%),
    radial-gradient(800px 400px at 10% -10%, rgba(17,199,111,0.06), transparent 60%);
}
.dashboard-grid{ display:grid; gap:16px }
.kpi-strip{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:12px;
  margin:12px 0 6px;
}
.kpi{
  background: rgba(18,26,22,0.85);
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}
.kpi-label{ font-size:12px; opacity:.8; margin-bottom:4px }
.kpi-value{ font-family:"JetBrains Mono", monospace; font-weight:700; font-size:20px }

.tracker-panel{
  background: linear-gradient(180deg, rgba(18,26,22,0.7), rgba(18,26,22,0.5));
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02), 0 10px 24px rgba(0,0,0,0.25);
}

.tracker-tabs{
  display:flex; gap:8px; margin:6px 0 14px;
}
.tracker-tabs .tab{
  background: rgba(18,26,22,0.8);
  border:1px solid var(--border);
  padding:8px 12px;
  border-radius:999px;
  font-weight:600;
  cursor:pointer;
  transition: background .15s ease;
}
.tracker-tabs .tab.active{
  background: rgba(17,199,111,0.12);
  border-color: rgba(17,199,111,0.35);
}

.table-note{ font-size:12px; opacity:.8; margin-bottom:8px }

/* Table-like lists */
.tnk-card ul li, .bullets li, .checklist li{
  font-family: Inter, system-ui;
  line-height:1.4;
}
.tnk-grid .tnk-card{ position:relative }
.tnk-grid .tnk-card:after{
  content:"";
  position:absolute; inset:-1px;
  border-radius:16px;
  pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}

/* Data chip badges */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  background: rgba(17,199,111,0.12);
  border:1px solid rgba(17,199,111,0.35);
  color: var(--text);
  padding:4px 8px; border-radius:999px; font-size:12px;
}

/* Make gallery boxes mimic tracker cards */
.gallery .imgbox{
  background: linear-gradient(180deg, #0E1411, #0A120F);
  border-style: solid; border-width:1px;
  border-color: var(--border);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

/* Buttons subtle hover */
.btn:hover{ box-shadow: 0 10px 28px rgba(17,199,111,0.18) }

/* Tracker data table */
.tracker-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:14px;
  min-width:720px;
}
.tracker-table thead th{
  text-align:left;
  padding:10px 12px;
  background:rgba(17,199,111,0.06);
  border-bottom:1px solid var(--border);
  position:sticky; top:0;
}
.tracker-table tbody td{
  padding:10px 12px;
  border-bottom:1px solid var(--border);
}
.tracker-table tbody tr:nth-child(odd){
  background:rgba(18,26,22,0.3);
}
.tracker-table tbody tr:hover{
  background:rgba(17,199,111,0.08);
}

/* Flashcards */
.flashcards{ padding:56px 0; border-bottom:1px solid var(--border); }
.flashcard-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-top:18px }
.flashcard{
  background: var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  transition: transform .15s ease;
}
.flashcard:hover{ transform:translateY(-2px) }
.flashcard h4{ margin:0 0 8px }
.flashcard p{ margin:0; font-size:14px; line-height:1.4 }

/* Mobile-first tweaks */
@media (max-width: 600px){
  .hero h1{ font-size:28px }
  .hero .lead{ font-size:15px }
  .course h2, .tokenomics h2, .flashcards h2{ font-size:22px }
  .btn{ padding:10px 14px; font-size:15px }
}


/* --- Flashcards (mobile-first) --- */
.flashcards{ padding: 42px 0; border-bottom:1px solid var(--border) }
.flashcards .sub{ opacity:.9; margin: 6px 0 14px }
.deck-controls{ display:flex; gap:10px; align-items:center; margin-bottom:12px; flex-wrap:wrap }
.select{
  background: var(--bg-soft);
  border:1px solid var(--border);
  color: var(--text);
  padding:10px 12px;
  border-radius:12px;
  font-size:14px;
}
.card-grid{ display:grid; grid-template-columns:1fr; gap:12px }
.fcard{
  background: var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.fcard details{ cursor:pointer }
.fcard summary{
  font-weight:700;
  list-style:none;
  outline:none;
  padding:6px 0;
}
.fcard summary::-webkit-details-marker{ display:none }
.fcard .answer{ opacity:.95; margin-top:8px; line-height:1.5 }
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Buttons: bigger tap targets on mobile */
.btn, .select{ min-height:44px }

/* Improve mobile spacing */
@media (min-width: 720px){
  .card-grid{ grid-template-columns: repeat(2, 1fr) }
}
@media (min-width: 1024px){
  .card-grid{ grid-template-columns: repeat(3, 1fr) }
}


/* --- Intro, Learning, CTA --- */
.intro{ padding:64px 0; text-align:center; border-bottom:1px solid var(--border) }
.intro h1{ font-size:32px; margin-bottom:12px }
.intro .lead{ max-width:640px; margin:0 auto 18px }
.learning{ padding:56px 0; border-bottom:1px solid var(--border) }
.cta{ padding:64px 0; text-align:center; background:linear-gradient(180deg,var(--bg-soft),var(--bg)); }
.cta h2{ font-size:28px; margin-bottom:12px }
.cta .lead{ max-width:640px; margin:0 auto 20px; opacity:.9 }
.cta-buttons{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center }

/* 3-section CTA styles */
.cta{ padding:48px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border) }
.cta-box{
  background: var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px;
  text-align:center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.cta .sub{ opacity:.9; margin:6px 0 14px }
.cta-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap }

/* CTA reductions: tighten spacing */
.hero .lead{ margin-bottom: 6px }