/* ─────────────────────────────────────────────
   WCINU — Shared Chalkboard Brand Chassis
   Brand variables + universal components.
   Page-specific styles live inline per page.
   ───────────────────────────────────────────── */

:root{
  --chalk-bg:#1c3d27;
  --chalk-bg-2:#163322;
  --chalk-bg-3:#0d2014;
  --chalk-white:#f7f3e9;
  --chalk-cream:#f0e6c8;
  --chalk-dim:#a4b6a9;
  --chalk-dim-2:#7a8d7f;
  --chalk-yellow:#f2c94c;
  --chalk-amber:#e89b2c;
  --chalk-pink:#f08aa8;
  --chalk-red:#e25656;
  --chalk-green:#5dc77a;
  --board-edge:#0a1b11;
  --r-card:8px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html,body{
  background:var(--board-edge);
  color:var(--chalk-white);
  font-family:'Inter', system-ui, sans-serif;
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  letter-spacing:0.005em;
}
body{
  background:
    radial-gradient(ellipse 1200px 600px at 18% 6%, rgba(247,243,233,0.06) 0%, transparent 50%),
    radial-gradient(ellipse 1400px 800px at 82% 96%, rgba(247,243,233,0.045) 0%, transparent 60%),
    radial-gradient(ellipse 900px 500px at 50% 50%, rgba(247,243,233,0.02) 0%, transparent 70%),
    repeating-linear-gradient(118deg, rgba(247,243,233,0.011) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, var(--chalk-bg) 0%, var(--chalk-bg-2) 60%, var(--chalk-bg-3) 100%);
  background-attachment:fixed;
  min-height:100vh;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence baseFrequency='0.78' numOctaves='2' seed='9'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 0.91  0 0 0 0.12 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:260px 260px;
  opacity:0.50;
  mix-blend-mode:overlay;
}
body > *{position:relative; z-index:1;}

.container{max-width:1760px; margin:0 auto; padding:0 32px;}

/* ── Type helpers ── */
.script{ font-family:'Permanent Marker', cursive; font-weight:400; letter-spacing:0.02em;}
.caveat{ font-family:'Caveat', cursive; font-weight:700;}

a{ color:inherit; text-decoration:none;}

/* ── Chalk-edge card ── */
.chalk-edge{
  border:1.5px solid rgba(247,243,233,0.40);
  border-radius:var(--r-card);
  background:linear-gradient(180deg, rgba(247,243,233,0.025), rgba(247,243,233,0.005) 60%, rgba(0,0,0,0.12) 100%);
  box-shadow:inset 0 0 0 1px rgba(247,243,233,0.05), 4px 4px 0 var(--board-edge), 0 12px 28px rgba(0,0,0,0.35);
  position:relative;
}
.chalk-edge.tilted-left{ transform:rotate(-0.5deg);}
.chalk-edge.tilted-right{ transform:rotate(0.5deg);}

/* ── Chalk arrow icon ── */
.chalk-arrow{ display:inline-block; vertical-align:middle; position:relative; width:36px; height:14px;}
.chalk-arrow::before{ content:""; position:absolute; left:0; top:50%; width:100%; height:1.8px; background:var(--chalk-white); transform:translateY(-50%);}
.chalk-arrow::after{ content:""; position:absolute; right:-2px; top:50%; width:0; height:0; border-left:10px solid var(--chalk-white); border-top:6px solid transparent; border-bottom:6px solid transparent; transform:translateY(-50%);}
.chalk-arrow.sm{ width:24px; height:10px;}
.chalk-arrow.sm::after{ border-left:7px solid var(--chalk-white); border-top:4px solid transparent; border-bottom:4px solid transparent;}

/* ── Wordmark ── */
.wordmark{display:inline-flex; align-items:center; gap:10px;}
.wordmark .mark{ font-family:'Permanent Marker', cursive; font-size:26px; line-height:1; letter-spacing:0.03em; color:var(--chalk-white);}
.wordmark .mark .dot{ color:var(--chalk-yellow);}
.wordmark.lg .mark{ font-size:42px;}

/* ── Buttons ── */
.btn{padding:11px 18px; border-radius:6px; font-weight:800; font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase; cursor:pointer; border:none; font-family:'Inter', sans-serif;}
.btn-bot{ background:var(--chalk-yellow); color:#0d2014; box-shadow:3px 3px 0 var(--board-edge);}
.btn-wallet{background:transparent; color:var(--chalk-white); border:1.5px solid rgba(247,243,233,0.50);}
.btn-ghost{background:transparent; color:var(--chalk-dim); border:1px dashed rgba(247,243,233,0.30); font-weight:700;}
.btn-pri-lg{ padding:18px 32px; font-size:14px;}
.btn-sec-lg{ padding:17px 30px; font-size:13px;}

/* ── Nav ── */
.nav{
  padding:16px 0;
  border-bottom:1px dashed rgba(247,243,233,0.22);
  background:rgba(13,32,20,0.55);
  backdrop-filter:blur(10px);
  position:sticky; top:0; z-index:30;
}
.nav-inner{display:flex; align-items:center; gap:32px;}
.nav-links{display:flex; gap:4px; margin-left:16px;}
.nav-links a{padding:8px 13px; border-radius:5px; color:var(--chalk-dim); font-size:13px; font-weight:700; letter-spacing:0.02em;}
.nav-links a:hover, .nav-links a.active{color:var(--chalk-white); background:rgba(247,243,233,0.07);}
.nav-links a.live::after{content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--chalk-red); margin-left:7px; box-shadow:0 0 6px var(--chalk-red); animation:livepulse 1.5s ease-in-out infinite;}
@keyframes livepulse{0%,100%{opacity:1;} 50%{opacity:0.4;}}
.nav-cta{margin-left:auto; display:flex; gap:10px; align-items:center;}

/* ── Section frame ── */
.section{ padding:72px 0;}
.section.tight{ padding:48px 0;}
.sec-head{ display:flex; align-items:end; justify-content:space-between; margin-bottom:36px; gap:24px;}
.sec-head .eyebrow{ font-family:'Permanent Marker', cursive; font-size:14px; color:var(--chalk-yellow); letter-spacing:0.08em; text-transform:uppercase; margin-bottom:8px;}
.sec-head h2{ font-family:'Permanent Marker', cursive; font-size:54px; line-height:0.98; color:var(--chalk-white); letter-spacing:0.005em;}
.sec-head h2 .accent{ color:var(--chalk-yellow);}
.sec-head .sub{ color:var(--chalk-dim); font-size:14px; font-style:italic; margin-top:8px; max-width:540px; line-height:1.5;}
.sec-head .more{ color:var(--chalk-yellow); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:0.08em; display:flex; align-items:center; gap:8px; white-space:nowrap;}

/* ── Page header (h1 + subtitle for subpages) ── */
.page-head{ padding:56px 0 32px;}
.page-head .eyebrow{ font-family:'Permanent Marker', cursive; font-size:14px; color:var(--chalk-yellow); letter-spacing:0.1em; text-transform:uppercase; margin-bottom:14px; display:inline-flex; align-items:center; gap:10px;}
.page-head h1{ font-family:'Permanent Marker', cursive; font-size:84px; line-height:0.95; letter-spacing:0.005em; color:var(--chalk-white);}
.page-head h1 .accent{ color:var(--chalk-yellow);}
.page-head .lede{ color:var(--chalk-cream); font-size:17px; line-height:1.55; max-width:660px; margin-top:18px;}
.page-head .lede strong{ color:var(--chalk-white);}

/* ── Tag/Pill component ── */
.chalk-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:999px;
  border:1.5px dashed rgba(247,243,233,0.32);
  font-family:'Permanent Marker', cursive; font-size:12.5px;
  color:var(--chalk-white); letter-spacing:0.05em;
}
.chalk-pill.yellow{ border-color:rgba(242,201,76,0.55); color:var(--chalk-yellow);}
.chalk-pill .dot{ width:7px; height:7px; border-radius:50%; background:var(--chalk-green); box-shadow:0 0 8px var(--chalk-green); animation:livepulse 1.6s ease-in-out infinite;}

/* ── Footer ── */
.footer{
  border-top:1px dashed rgba(247,243,233,0.22);
  padding:48px 0 24px;
  background:rgba(10,27,17,0.55);
  margin-top:48px;
}
.foot-row{ display:grid; grid-template-columns:auto 1fr auto; gap:36px; align-items:start;}
.foot-brand .tag{ display:block; font-size:11.5px; color:var(--chalk-dim); letter-spacing:0.18em; margin-top:8px;}
.foot-cols{ display:grid; grid-template-columns:repeat(4, 1fr); gap:24px;}
.foot-col h5{ font-family:'Permanent Marker', cursive; font-size:14px; color:var(--chalk-yellow); margin-bottom:10px;}
.foot-col a{ display:block; color:var(--chalk-dim); font-size:12.5px; padding:4px 0;}
.foot-col a:hover{ color:var(--chalk-white);}
.foot-disclaimer{
  margin-top:32px; padding-top:24px;
  border-top:1px dashed rgba(247,243,233,0.15);
  font-size:11.5px; color:var(--chalk-dim-2); line-height:1.6; max-width:1000px;
}

/* ── Responsive breakpoints for universal pieces ── */
@media (max-width: 1280px){
  .container{ padding:0 24px;}
  .sec-head h2{ font-size:44px;}
  .page-head h1{ font-size:64px;}
  .foot-row{ grid-template-columns:1fr; gap:32px;}
}

@media (max-width: 720px){
  .container{ padding:0 16px;}
  .nav{ padding:14px 0;}
  .nav-inner{ gap:12px; flex-wrap:wrap;}
  .nav-links{ display:none;}
  .nav-cta .btn-wallet{ display:none;}
  .sec-head{ flex-direction:column; align-items:flex-start; gap:12px;}
  .sec-head h2{ font-size:36px;}
  .page-head{ padding:36px 0 24px;}
  .page-head h1{ font-size:46px;}
  .foot-cols{ grid-template-columns:repeat(2, 1fr);}
}