/* ============================================================
   Quivr — Token Launch and Launchpad Landing Page
   Look: "Outlaws in the jungle at night". Deep canopy canvas,
   neon-lime accent, parchment serif accents, procedural foliage,
   fireflies, a hooded thief and a "Wanted" poster for the whales.
   Re-theme everything from the CSS variables in :root below.
   ============================================================ */

:root{
  /* ---- Canvas ---- */
  --bg:#06100B;            /* page background */
  --bg-2:#0A1711;          /* alternate section band */
  --surface:#0D1C15;       /* cards */
  --surface-2:#122519;     /* inputs, nested boxes */
  --line:rgba(198,255,61,.12);
  --line-2:rgba(242,232,207,.10);

  /* ---- Text ---- */
  --text:#EEF3EA;
  --text-2:#B4C2B6;
  --text-3:#7C8F81;

  /* ---- Brand ---- */
  --accent:#C6FF3D;        /* neon lime: CTAs, highlights */
  --accent-ink:#07120C;    /* text on accent */
  --accent-soft:rgba(198,255,61,.12);
  --parchment:#F2E8CF;     /* serif accent words, fletching */
  --ember:#FF7849;         /* sell side, warnings */
  --ember-soft:rgba(255,120,73,.14);
  --moss:#3FB27F;

  /* ---- Jungle (foliage drawn by ART in script.js) ---- */
  --leaf-1:#0C2116;
  --leaf-2:#11301F;
  --leaf-3:#174029;
  --leaf-4:#1F5434;
  --vine:#1A3A25;
  --leaf-edge:rgba(198,255,61,.07);  /* faint rim light on every leaf */
  --firefly:#D8FF6A;
  --wood:#B07D45;          /* arrow shafts */
  --wood-hi:#E2B77C;

  /* ---- Wanted poster ---- */
  --paper:#EADFC2;
  --paper-2:#CDB88A;
  --paper-ink:#2A1D10;
  --stamp:#B23A1A;

  /* ---- Tokenomics slice colors (used by TOKENOMICS[].color) ---- */
  --c1:#C6FF3D;
  --c2:#3FB27F;
  --c3:#F2E8CF;
  --c4:#6FA8FF;
  --c5:#FF7849;
  --c6:#B58CFF;

  /* ---- Shape ---- */
  --radius:14px;           /* cards, panels */
  --radius-sm:10px;        /* nested boxes, icon tiles, inputs */
  --radius-xs:8px;         /* small rows, countdown cells */
  --radius-btn:10px;       /* buttons (use 999px for pill buttons) */
  --shadow:0 30px 80px -30px rgba(0,0,0,.65);
  --glow:0 0 0 1px rgba(198,255,61,.35), 0 10px 40px -10px rgba(198,255,61,.45);

  /* ---- Type ---- */
  --font-display:"Unbounded", system-ui, sans-serif;
  --font:"Manrope", system-ui, sans-serif;
  --font-serif:"Instrument Serif", Georgia, serif;
  --font-mono:"JetBrains Mono", ui-monospace, monospace;
}

/* ===================== BASE ===================== */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:84px; overflow-x:hidden; overflow-x:clip; }
body{
  margin:0; background:var(--bg); color:var(--text-2);
  font-family:var(--font); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; overflow-x:clip;
  background-image:
    radial-gradient(900px 520px at 85% -5%, rgba(198,255,61,.10), transparent 60%),
    radial-gradient(700px 500px at -10% 30%, rgba(63,178,127,.10), transparent 60%);
  background-repeat:no-repeat;
}
h1,h2,h3,h4{ color:var(--text); margin:0; font-family:var(--font-display); font-weight:700; letter-spacing:-.02em; line-height:1.1; }
p{ margin:0; }
a{ color:inherit; }
button{ font:inherit; color:inherit; cursor:pointer; }
svg{ display:block; }
em{ font-family:var(--font-serif); font-style:italic; font-weight:400; color:var(--parchment); letter-spacing:0; }
.mono{ font-family:var(--font-mono); }
.muted{ color:var(--text-3); }
.small{ font-size:.85rem; }
.accent{ color:var(--accent); }
.wrap{ width:100%; max-width:1200px; margin:0 auto; padding:0 20px; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
.skip-link{ position:absolute; left:-999px; top:10px; z-index:100; background:var(--accent); color:var(--accent-ink); padding:8px 14px; border-radius:10px; font-weight:700; }
.skip-link:focus{ left:10px; }
[hidden]{ display:none !important; }

/* Lucide icons default size */
[data-lucide], .lucide{ width:18px; height:18px; stroke-width:2; flex-shrink:0; }

/* ===================== BUTTONS ===================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid transparent; border-radius:var(--radius-btn); padding:12px 20px;
  font-weight:700; font-size:.95rem; text-decoration:none; white-space:nowrap;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--accent); color:var(--accent-ink); }
.btn-primary:hover{ box-shadow:var(--glow); }
.btn-primary[disabled]{ opacity:.45; cursor:not-allowed; box-shadow:none; }
.btn-ghost{ background:rgba(255,255,255,.03); border-color:var(--line-2); color:var(--text); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn-sell{ background:var(--ember); color:#1B0A03; }
.btn-sell:hover{ box-shadow:0 10px 40px -10px var(--ember); }
.btn-sm{ padding:9px 16px; font-size:.88rem; }
.btn-lg{ padding:15px 26px; font-size:1rem; }
.btn-block{ width:100%; }
.icon-btn{
  display:inline-grid; place-items:center; width:40px; height:40px; border-radius:var(--radius-sm);
  background:rgba(255,255,255,.03); border:1px solid var(--line-2); color:var(--text-2);
  text-decoration:none; transition:color .2s, border-color .2s;
}
.icon-btn:hover{ color:var(--accent); border-color:var(--accent); }
.icon-btn-sm{ width:30px; height:30px; border-radius:6px; }
.icon-btn-sm .lucide{ width:14px; height:14px; }

/* ===================== HEADER ===================== */
.header{ position:sticky; top:0; z-index:50; transition:background .25s, border-color .25s; border-bottom:1px solid transparent; }
.header.scrolled{ background:rgba(6,16,11,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-color:var(--line); }
.header-inner{ display:flex; align-items:center; gap:24px; height:72px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand-mark{ width:38px; height:38px; display:grid; place-items:center; border-radius:var(--radius-sm); background:var(--accent); }
.brand-mark svg{ width:24px; height:24px; fill:none; stroke:var(--accent-ink); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.brand-mark svg .fill{ fill:var(--accent-ink); }
.brand-name{ font-family:var(--font-display); font-weight:800; font-size:1.25rem; color:var(--text); letter-spacing:-.03em; }
.nav{ display:flex; align-items:center; gap:4px; margin-left:12px; }
.nav a{ text-decoration:none; color:var(--text-2); font-weight:600; font-size:.92rem; padding:8px 12px; border-radius:var(--radius-xs); transition:color .2s, background .2s; }
.nav a:hover{ color:var(--text); }
.nav a.active{ color:var(--accent); background:var(--accent-soft); }
.header-actions{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.chain-pill{ display:inline-flex; align-items:center; gap:8px; font-size:.82rem; font-weight:600; color:var(--text-2); padding:8px 12px; border:1px solid var(--line-2); border-radius:999px; }
.chain-pill .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent); }
.nav-toggle{ display:none; }

/* ===================== HERO ===================== */
.hero{ padding:56px 0 40px; position:relative; isolation:isolate; }
/* light rays falling through the canopy */
.hero::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:repeating-linear-gradient(104deg, transparent 0 70px, rgba(198,255,61,.03) 70px 130px, transparent 130px 210px);
  -webkit-mask-image:linear-gradient(180deg, #000, transparent 75%); mask-image:linear-gradient(180deg, #000, transparent 75%); }
.hero > .wrap{ position:relative; z-index:1; }
.hero-grid{ display:grid; grid-template-columns:1.08fr .92fr; gap:40px; align-items:center; }
.eyebrow{ display:inline-flex; align-items:center; gap:10px; padding:7px 14px 7px 10px; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-weight:700; font-size:.82rem; border:1px solid var(--line); }
.pulse{ width:8px; height:8px; border-radius:50%; background:currentColor; position:relative; display:inline-block; }
.pulse::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid currentColor; animation:pulse 1.6s ease-out infinite; }
@keyframes pulse{ from{ transform:scale(.6); opacity:1; } to{ transform:scale(1.8); opacity:0; } }
.hero-title{ font-size:clamp(2.3rem, 5.4vw, 4.4rem); font-weight:800; line-height:1.02; margin:22px 0 20px; letter-spacing:-.04em; }
.hero-title em{ font-size:1.12em; letter-spacing:-.01em; }
.hero-title .hl{ color:var(--accent); }
.hero-sub{ font-size:1.12rem; max-width:540px; color:var(--text-2); }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:12px; margin:30px 0 26px; }
.ca-chip{ display:inline-flex; align-items:center; gap:8px; padding:6px 6px 6px 14px; border-radius:var(--radius-sm); background:var(--surface); border:1px solid var(--line-2); max-width:100%; }
.ca-label{ font-family:var(--font-mono); font-size:.72rem; font-weight:700; color:var(--accent-ink); background:var(--parchment); padding:2px 7px; border-radius:6px; }
.ca-addr{ font-family:var(--font-mono); font-size:.88rem; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Bullseye */
.hero-art{ display:flex; justify-content:center; }
.target{ position:relative; width:min(460px, 100%); aspect-ratio:1; }
.target-svg{ position:relative; z-index:1; width:100%; height:100%; overflow:visible; }
.target-foliage{ position:absolute; inset:-16%; z-index:0; opacity:.95; }
.target-foliage svg{ width:100%; height:100%; overflow:visible; }
.ring{ fill:none; stroke-width:2; }
.ring.r1{ fill:rgba(242,232,207,.03); stroke:var(--line-2); }
.ring.r2{ fill:rgba(63,178,127,.10); stroke:rgba(63,178,127,.45); }
.ring.r3{ fill:rgba(242,232,207,.06); stroke:var(--line-2); }
.ring.r4{ fill:rgba(198,255,61,.14); stroke:rgba(198,255,61,.55); }
.bull{ fill:var(--accent); filter:drop-shadow(0 0 14px var(--accent)); }
.ring.dashed{ stroke:rgba(198,255,61,.35); stroke-dasharray:2 10; stroke-linecap:round; }
.ring.ticks{ stroke:rgba(242,232,207,.22); stroke-dasharray:1 22; stroke-width:8; }
.ring-spin, .ring-spin-rev{ transform-origin:200px 200px; transform-box:view-box; }
.ring-spin{ animation:spin 60s linear infinite; }
.ring-spin-rev{ animation:spin 90s linear infinite reverse; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Arrows (SVG from ART.arrow): the tip sits on the anchor point, the arrow
   flies in, sticks, then quivers. --len = length, --rot = angle, --ad = delay */
.arrow{ position:absolute; left:50%; top:50%; width:0; height:0; z-index:2;
  transform:translate(var(--x), var(--y)) rotate(var(--rot)); animation:thunk .7s cubic-bezier(.2,1.3,.4,1) var(--ad, 0s) both; }
.arrow svg{ position:absolute; left:0; top:calc(var(--len) * -15 / 220); width:var(--len); height:calc(var(--len) * 30 / 220); overflow:visible;
  transform-origin:0 50%; filter:drop-shadow(0 6px 5px rgba(0,0,0,.5)); animation:twang 1.3s ease-out calc(var(--ad, 0s) + .6s) both; }
.arrow svg.twang{ animation:twang2 1.3s ease-out both; }
.arrow.a1{ --x:4px; --y:-3px; --len:230px; --rot:-32deg; }
.arrow.a2{ --x:-58px; --y:44px; --len:200px; --rot:-148deg; --ad:.25s; }
.arrow.a3{ --x:52px; --y:62px; --len:175px; --rot:28deg; --ad:.5s; }
.a-hole{ fill:rgba(0,0,0,.55); }
.a-head{ fill:#C9D3CD; stroke:#5F6B64; stroke-width:.6; }
.a-metal{ fill:#8C9993; }
.a-wood{ fill:var(--wood); }
.a-wood-hi{ fill:var(--wood-hi); opacity:.7; }
.a-crest1, .a-vane1{ fill:var(--accent); }
.a-crest2{ fill:var(--ember); }
.a-vane2{ fill:var(--moss); }
.a-vane3{ fill:var(--parchment); }
.a-barb{ fill:none; stroke:rgba(7,18,12,.35); stroke-width:.8; }
.a-bind{ fill:#3A2414; }
.a-nock{ fill:var(--parchment); }
@keyframes twang{ 0%{ transform:rotate(0); } 12%{ transform:rotate(3.2deg); } 24%{ transform:rotate(-2.6deg); } 36%{ transform:rotate(1.9deg); } 48%{ transform:rotate(-1.3deg); } 60%{ transform:rotate(.8deg); } 72%{ transform:rotate(-.4deg); } 86%{ transform:rotate(.15deg); } 100%{ transform:rotate(0); } }
@keyframes twang2{ 0%{ transform:rotate(0); } 12%{ transform:rotate(2.4deg); } 24%{ transform:rotate(-2deg); } 36%{ transform:rotate(1.4deg); } 48%{ transform:rotate(-.9deg); } 62%{ transform:rotate(.5deg); } 78%{ transform:rotate(-.2deg); } 100%{ transform:rotate(0); } }
@keyframes thunk{ 0%{ opacity:0; transform:translate(var(--x), var(--y)) rotate(var(--rot)) translateX(120px); } 70%{ opacity:1; } 100%{ transform:translate(var(--x), var(--y)) rotate(var(--rot)); } }

.float-card{
  position:absolute; display:flex; flex-direction:column; gap:2px; padding:10px 14px; border-radius:var(--radius-sm);
  background:rgba(13,28,21,.86); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--line); box-shadow:var(--shadow); animation:bob 6s ease-in-out infinite; z-index:3;
}
.fc-k{ font-size:.7rem; text-transform:uppercase; letter-spacing:.14em; color:var(--text-3); font-weight:700; }
.fc-v{ color:var(--text); font-weight:700; font-size:.95rem; }
.fc1{ left:-2%; top:14%; }
.fc2{ right:-2%; top:40%; animation-delay:-2s; }
.fc3{ left:10%; bottom:6%; flex-direction:row; align-items:center; gap:8px; color:var(--ember); animation-delay:-4s; }
@keyframes bob{ 50%{ transform:translateY(-10px); } }

/* Stats strip */
.stats-strip{ margin-top:48px; display:grid; grid-template-columns:repeat(4, 1fr); border:1px solid var(--line); border-radius:var(--radius); background:rgba(13,28,21,.72); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); overflow:hidden; }
.stat{ padding:20px 24px; border-right:1px solid var(--line); }
.stat:last-child{ border-right:0; }
.stat-k{ display:flex; align-items:center; gap:6px; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--text-3); }
.stat-k .lucide{ width:14px; height:14px; color:var(--accent); }
.stat-v{ font-family:var(--font-display); color:var(--text); font-size:1.45rem; font-weight:700; margin-top:6px; letter-spacing:-.02em; }

/* ===================== MARQUEE ===================== */
.marquee{ overflow:hidden; border-block:1px solid var(--line); background:var(--accent); color:var(--accent-ink); transform:rotate(-1.2deg); margin:36px -10px; }
.marquee-track{ display:flex; width:max-content; animation:marquee 40s linear infinite; }
.marquee-item{ display:inline-flex; align-items:center; gap:18px; padding:14px 18px; font-family:var(--font-display); font-weight:800; font-size:1rem; text-transform:uppercase; letter-spacing:.02em; white-space:nowrap; }
.marquee-item svg{ width:18px; height:18px; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ===================== SECTIONS ===================== */
.section{ padding:96px 0; }
.section-head{ max-width:760px; margin-bottom:44px; }
.kicker{ display:inline-block; font-family:var(--font-mono); font-size:.78rem; font-weight:700; color:var(--accent); letter-spacing:.06em; text-transform:uppercase; margin-bottom:16px; }
.section-title{ font-size:clamp(1.8rem, 3.8vw, 3rem); font-weight:700; letter-spacing:-.035em; }
.section-title em{ font-size:1.1em; }
.section-sub{ margin-top:16px; font-size:1.06rem; color:var(--text-2); max-width:640px; }
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow); }
.card-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.card-head h3{ display:flex; align-items:center; gap:10px; font-size:1rem; }
.card-head h3 .lucide{ color:var(--accent); }

/* Reveal on scroll */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ===================== PILLARS ===================== */
.about-grid{ display:grid; grid-template-columns:1.12fr .88fr; gap:64px; align-items:center; }
.about-grid .section-head{ margin-bottom:32px; }
.pillars{ display:grid; grid-template-columns:1fr; gap:12px; }
.pillar{ position:relative; overflow:hidden; display:grid; grid-template-columns:52px 1fr; column-gap:18px; padding:20px 22px; }
.pillar-ico{ grid-row:1 / span 2; width:52px; height:52px; display:grid; place-items:center; border-radius:var(--radius-sm); background:var(--accent-soft); color:var(--accent); border:1px solid var(--line); }
.pillar-ico .lucide{ width:24px; height:24px; }
.pillar h3{ font-size:1.05rem; margin:4px 0 6px; }
.pillar p{ font-size:.95rem; }
.pillar-num{ position:absolute; right:18px; top:6px; font-family:var(--font-serif); font-style:italic; font-size:4.5rem; line-height:1; color:rgba(242,232,207,.07); }

/* ===================== TOKENOMICS ===================== */
.tok-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:20px; align-items:start; }
.donut-card{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:28px; align-items:center; }
.donut-wrap{ position:relative; width:100%; max-width:340px; margin:0 auto; aspect-ratio:1; }
.donut{ width:100%; height:100%; transform:rotate(-90deg); overflow:visible; }
.donut .slice{ fill:none; stroke-width:30; cursor:pointer; transition:stroke-width .2s ease, opacity .2s ease; }
.donut.has-focus .slice{ opacity:.28; }
.donut.has-focus .slice.on{ opacity:1; stroke-width:36; }
.donut-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; pointer-events:none; padding:0 22%; }
.dc-k{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); font-weight:700; }
.dc-v{ font-family:var(--font-display); font-weight:800; color:var(--text); font-size:clamp(1.3rem, 2.6vw, 1.9rem); margin:4px 0 2px; letter-spacing:-.03em; }
.dc-s{ font-size:.8rem; color:var(--text-2); }
.legend{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.legend li{ display:grid; grid-template-columns:12px 1fr auto; gap:12px; align-items:center; padding:10px 12px; border-radius:var(--radius-xs); cursor:pointer; transition:background .2s; outline:none; }
.legend li:hover, .legend li.on, .legend li:focus-visible{ background:var(--surface-2); }
.legend .sw{ width:12px; height:12px; border-radius:4px; }
.legend .lg-name{ color:var(--text); font-weight:700; font-size:.94rem; line-height:1.3; }
.legend .lg-note{ display:block; font-size:.78rem; color:var(--text-3); font-weight:500; }
.legend .lg-pct{ font-family:var(--font-mono); color:var(--text); font-weight:700; }

.tok-side{ display:flex; flex-direction:column; gap:20px; }
.facts{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.fact{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px 18px; }
.fact-k{ display:flex; align-items:center; gap:6px; font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:var(--text-3); font-weight:700; }
.fact-k .lucide{ width:14px; height:14px; color:var(--accent); }
.fact-v{ display:block; margin-top:6px; color:var(--text); font-weight:700; font-size:1.05rem; }

.unlock{ display:flex; flex-direction:column; gap:12px; }
.unlock-row{ display:grid; grid-template-columns:72px 1fr 48px; gap:12px; align-items:center; font-size:.85rem; }
.unlock-row .u-label{ color:var(--text-2); font-weight:600; }
.unlock-row .u-bar{ height:10px; border-radius:999px; background:var(--surface-2); overflow:hidden; display:flex; }
.unlock-row .u-bar span{ height:100%; }
.unlock-row .u-pct{ font-family:var(--font-mono); color:var(--text); text-align:right; font-weight:700; }

/* ===================== LAUNCHPAD ===================== */
.section-launch{ position:relative; isolation:isolate; padding-top:150px; background:linear-gradient(180deg, transparent, var(--bg-2) 18%, var(--bg-2) 82%, transparent); }
.section-launch > .wrap{ position:relative; z-index:1; }
.launch-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:20px; align-items:start; }
.launch-left, .launch-right{ display:flex; flex-direction:column; gap:20px; min-width:0; }

.sale-card{ position:relative; }
.sale-top{ display:flex; justify-content:space-between; gap:20px; align-items:flex-start; flex-wrap:wrap; }
.badge{ display:inline-flex; align-items:center; gap:8px; font-size:.75rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:5px 10px; border-radius:999px; }
.badge-live{ background:var(--accent-soft); color:var(--accent); }
.badge-soon{ background:rgba(111,168,255,.14); color:var(--c4); }
.badge-ended{ background:var(--ember-soft); color:var(--ember); }
.sale-title{ font-size:1.4rem; margin-top:12px; }
.countdown{ display:flex; gap:8px; }
.countdown div{ display:flex; flex-direction:column; align-items:center; min-width:58px; padding:10px 6px; border-radius:var(--radius-xs); background:var(--surface-2); border:1px solid var(--line); }
.countdown b{ font-family:var(--font-mono); color:var(--text); font-size:1.4rem; line-height:1; }
.countdown span{ font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); margin-top:6px; font-weight:700; }
#countdown-label{ margin-top:10px; text-align:right; }

.progress-block{ margin-top:22px; }
.progress-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; color:var(--text); font-size:1.05rem; }
.progress{ position:relative; height:16px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line); }
.progress-fill{ position:absolute; inset:0 auto 0 0; width:0; border-radius:999px; background:linear-gradient(90deg, var(--moss), var(--accent)); box-shadow:0 0 20px rgba(198,255,61,.4); transition:width .8s cubic-bezier(.2,.8,.2,1); }
.progress-fill::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:repeating-linear-gradient(-45deg, rgba(255,255,255,.18) 0 8px, transparent 8px 16px); animation:stripes 1.2s linear infinite; }
@keyframes stripes{ to{ background-position:22px 0; } }
.progress-mark{ position:absolute; top:-5px; bottom:-5px; width:2px; background:var(--parchment); border-radius:2px; }
.progress-foot{ display:flex; justify-content:space-between; margin-top:10px; gap:12px; flex-wrap:wrap; }
.progress-foot b{ color:var(--text-2); }

.phases{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:24px; }
.phase{ padding:14px; border-radius:var(--radius-sm); border:1px solid var(--line-2); background:rgba(255,255,255,.015); }
.phase .ph-top{ display:flex; align-items:center; gap:8px; font-weight:700; color:var(--text); font-size:.9rem; }
.phase .ph-top .lucide{ width:16px; height:16px; color:var(--text-3); }
.phase .ph-date{ display:block; font-size:.78rem; color:var(--text-3); margin-top:4px; }
.phase.done .ph-top .lucide{ color:var(--moss); }
.phase.now{ border-color:var(--accent); background:var(--accent-soft); }
.phase.now .ph-top .lucide{ color:var(--accent); }

.curve{ width:100%; height:200px; overflow:visible; }
.curve .grid line{ stroke:var(--line-2); stroke-dasharray:3 6; }
.curve .c-line{ fill:none; stroke:var(--text-3); stroke-width:2; stroke-dasharray:5 6; vector-effect:non-scaling-stroke; }
.curve .c-done{ fill:none; stroke:var(--accent); stroke-width:3; vector-effect:non-scaling-stroke; }
.curve .c-area{ fill:url(#curve-fill); }
.curve .c-now{ stroke:var(--parchment); stroke-width:1.5; stroke-dasharray:3 4; vector-effect:non-scaling-stroke; }
.curve-dot{ fill:var(--accent); stroke:var(--bg); stroke-width:3; }
.curve-axis{ display:flex; justify-content:space-between; margin-top:10px; gap:8px; }
#curve-now{ color:var(--accent); font-weight:700; }

/* Swap widget */
.swap-card{ position:relative; padding:20px; border-color:rgba(198,255,61,.22); box-shadow:var(--shadow), 0 0 80px -40px rgba(198,255,61,.5); }
.swap-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.tabs{ display:inline-flex; padding:4px; background:var(--surface-2); border-radius:999px; border:1px solid var(--line); }
.tab{ border:0; background:transparent; padding:8px 22px; border-radius:999px; font-weight:700; color:var(--text-3); transition:background .2s, color .2s; }
.tab.active{ background:var(--accent); color:var(--accent-ink); }
.swap-card.is-sell .tab.active{ background:var(--ember); color:#1B0A03; }
.swap-settings{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; margin-bottom:12px; border-radius:var(--radius-sm); background:var(--surface-2); border:1px solid var(--line); flex-wrap:wrap; }
.seg{ display:flex; gap:4px; }
.seg button{ border:1px solid var(--line-2); background:transparent; border-radius:999px; padding:5px 11px; font-size:.8rem; font-family:var(--font-mono); color:var(--text-2); }
.seg button.on{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:700; }
.swap-box{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 16px; transition:border-color .2s; }
.swap-box:focus-within{ border-color:rgba(198,255,61,.5); }
.swap-row-top{ display:flex; justify-content:space-between; gap:10px; }
.swap-row-top b{ color:var(--text-2); }
.swap-row{ display:flex; align-items:center; gap:12px; margin-top:6px; }
.swap-input{ flex:1; min-width:0; background:transparent; border:0; outline:none; color:var(--text); font-size:1.9rem; font-weight:700; padding:2px 0; letter-spacing:-.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; }
.swap-input::placeholder{ color:var(--text-3); }
.asset{ display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 6px; border-radius:999px; background:var(--surface); border:1px solid var(--line-2); color:var(--text); font-weight:700; white-space:nowrap; }
.asset-ico{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:.7rem; font-weight:800; }
.asset-ico.eth{ background:#E6E9F2; color:#2B2F3A; }
.asset-ico.tok{ background:var(--accent); color:var(--accent-ink); }
.asset-ico svg{ width:16px; height:16px; }
.quick{ display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; }
.quick button{ border:1px solid var(--line-2); background:transparent; border-radius:999px; padding:4px 11px; font-size:.78rem; font-weight:700; color:var(--text-2); }
.quick button:hover{ border-color:var(--accent); color:var(--accent); }
.swap-flip{ display:grid; place-items:center; width:42px; height:42px; margin:-12px auto; position:relative; z-index:2; border-radius:var(--radius-sm); background:var(--surface); border:4px solid var(--surface); color:var(--text); outline:1px solid var(--line); transition:transform .3s ease, color .2s; }
.swap-flip:hover{ color:var(--accent); transform:rotate(180deg); }
.quote{ margin:16px 0; padding:4px 4px 0; display:flex; flex-direction:column; gap:8px; }
.quote div{ display:flex; justify-content:space-between; gap:12px; font-size:.86rem; }
.quote dt{ color:var(--text-3); }
.quote dd{ margin:0; color:var(--text); text-align:right; }
.quote dd.warn{ color:var(--ember); }
.swap-note{ text-align:center; margin-top:12px; min-height:1.2em; }

/* Trades feed */
.trades{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; max-height:300px; overflow:hidden; }
.trade{ display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:9px 10px; border-radius:var(--radius-xs); background:var(--surface-2); font-size:.84rem; }
.trade.fresh{ animation:slideIn .45s ease both; }
.trade .t-side{ font-weight:800; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; padding:3px 8px; border-radius:999px; }
.trade.buy .t-side{ background:var(--accent-soft); color:var(--accent); }
.trade.sell .t-side{ background:var(--ember-soft); color:var(--ember); }
.trade .t-who{ font-family:var(--font-mono); color:var(--text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.trade .t-who small{ color:var(--text-3); margin-left:6px; font-family:var(--font); }
.trade .t-amt{ font-family:var(--font-mono); color:var(--text); font-weight:700; text-align:right; }
.trade.mine{ outline:1px solid var(--parchment); }
@keyframes slideIn{ from{ opacity:0; transform:translateY(-8px); } }

/* ===================== HOW TO BUY ===================== */
.steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; counter-reset:step; }
.step{ position:relative; padding:24px; border-radius:var(--radius); border:1px solid var(--line); background:var(--surface); }
.step::before{ counter-increment:step; content:"0" counter(step); position:absolute; right:20px; top:18px; font-family:var(--font-mono); font-size:.8rem; color:var(--text-3); font-weight:700; }
.step-ico{ width:46px; height:46px; display:grid; place-items:center; border-radius:var(--radius-sm); background:var(--accent); color:var(--accent-ink); margin-bottom:20px; }
.step h3{ font-size:1rem; margin-bottom:8px; }
.step p{ font-size:.92rem; }
.step a{ color:var(--accent); font-weight:700; font-size:.88rem; display:inline-flex; align-items:center; gap:4px; margin-top:12px; text-decoration:none; }
.step a .lucide{ width:14px; height:14px; }
.network-card{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:20px; flex-wrap:wrap; }
.network-card h3{ font-size:1.05rem; margin-bottom:6px; }
.network-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* ===================== ROADMAP ===================== */
.roadmap{ display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; position:relative; }
.roadmap::before{ content:""; position:absolute; left:0; right:0; top:27px; height:2px; background:linear-gradient(90deg, var(--accent), var(--line-2)); }
.rm{ position:relative; padding-top:62px; }
.rm-dot{ position:absolute; top:12px; left:0; width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:var(--bg); border:2px solid var(--line-2); color:var(--text-3); }
.rm-dot .lucide{ width:15px; height:15px; }
.rm.done .rm-dot{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.rm.now .rm-dot{ border-color:var(--accent); color:var(--accent); box-shadow:0 0 0 6px var(--accent-soft); }
.rm-card{ padding:22px; border-radius:var(--radius); border:1px solid var(--line); background:var(--surface); height:100%; }
.rm.now .rm-card{ border-color:rgba(198,255,61,.4); }
.rm-tag{ font-family:var(--font-mono); font-size:.75rem; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.06em; }
.rm-card h3{ font-size:1.05rem; margin:8px 0 14px; }
.rm-card ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.rm-card li{ display:flex; gap:8px; font-size:.9rem; line-height:1.4; }
.rm-card li .lucide{ width:16px; height:16px; margin-top:1px; color:var(--text-3); }
.rm-card li.ok .lucide{ color:var(--moss); }

/* ===================== COMMUNITY ===================== */
.community{ display:grid; grid-template-columns:1.05fr .95fr; gap:40px; padding:44px; position:relative; overflow:hidden;
  background:radial-gradient(600px 300px at 100% 0%, rgba(198,255,61,.14), transparent 70%), var(--surface); }
.join-form{ display:flex; gap:10px; margin-top:28px; flex-wrap:wrap; }
.input{ flex:1; min-width:200px; background:var(--surface-2); border:1px solid var(--line-2); border-radius:var(--radius-btn); padding:13px 20px; color:var(--text); font:inherit; outline:none; transition:border-color .2s; }
.input:focus{ border-color:var(--accent); }
.input.invalid{ border-color:var(--ember); }
#join-msg{ margin-top:12px; }
#join-msg.ok{ color:var(--accent); }
#join-msg.err{ color:var(--ember); }
.channels{ display:grid; grid-template-columns:1fr 1fr; gap:12px; align-content:center; }
.channel{ display:flex; flex-direction:column; gap:14px; padding:20px; border-radius:var(--radius-sm); background:var(--surface-2); border:1px solid var(--line); text-decoration:none; transition:transform .2s, border-color .2s; }
.channel:hover{ transform:translateY(-3px); border-color:var(--accent); }
.channel-top{ display:flex; justify-content:space-between; align-items:center; }
.channel-ico{ width:42px; height:42px; display:grid; place-items:center; border-radius:var(--radius-sm); background:var(--accent-soft); color:var(--accent); }
.channel-ico svg{ width:20px; height:20px; }
.channel-top > .lucide{ color:var(--text-3); width:16px; height:16px; }
.channel b{ display:block; color:var(--text); font-size:1rem; }
.channel small{ color:var(--text-3); font-size:.82rem; }
.channel .ch-count{ font-family:var(--font-display); font-weight:700; color:var(--text); font-size:1.25rem; }

/* ===================== FAQ ===================== */
.faq-wrap{ display:grid; grid-template-columns:.8fr 1.2fr; gap:40px; align-items:start; }
.faq{ display:flex; flex-direction:column; gap:10px; }
.faq-item{ border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); overflow:hidden; }
.faq-q{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 20px; border:0; background:transparent; text-align:left; color:var(--text); font-weight:700; font-size:1rem; }
.faq-q .lucide{ transition:transform .25s; color:var(--accent); }
.faq-item.open .faq-q .lucide{ transform:rotate(45deg); }
.faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease; }
.faq-a > div{ overflow:hidden; }
.faq-a p{ padding:0 20px 18px; font-size:.95rem; }
.faq-item.open .faq-a{ grid-template-rows:1fr; }

/* ===================== FOOTER ===================== */
.footer{ position:relative; isolation:isolate; padding:150px 0 28px; background:linear-gradient(180deg, transparent, rgba(12,33,22,.7) 120px, var(--bg)); }
.footer > .wrap{ position:relative; z-index:1; }
.footer-grid{ display:grid; grid-template-columns:1fr 1.2fr; gap:28px 40px; }
.footer-tag{ margin-top:14px; max-width:320px; }
.footer-links{ display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:flex-end; align-content:flex-start; }
.footer-links a{ text-decoration:none; color:var(--text-2); font-weight:600; font-size:.92rem; }
.footer-links a:hover{ color:var(--accent); }
.disclaimer{ grid-column:1 / -1; color:var(--text-3); border-top:1px solid var(--line-2); padding-top:22px; line-height:1.6; }
.footer-bottom{ display:flex; justify-content:space-between; margin-top:22px; gap:12px; flex-wrap:wrap; }
.to-top{ display:inline-flex; align-items:center; gap:6px; text-decoration:none; }
.to-top:hover{ color:var(--accent); }
.to-top .lucide{ width:14px; height:14px; }

/* ===================== MODAL ===================== */
.modal{ position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:20px; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(2,6,4,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.modal-panel{ position:relative; width:100%; max-width:420px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); animation:pop .25s ease; }
@keyframes pop{ from{ opacity:0; transform:scale(.96) translateY(8px); } }
.modal-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.modal-head h3{ font-size:1.1rem; }
.wallet-list{ display:flex; flex-direction:column; gap:10px; }
.wallet-opt{ display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; text-align:left; padding:14px; border-radius:var(--radius-sm); border:1px solid var(--line-2); background:var(--surface-2); transition:border-color .2s; }
.wallet-opt:hover{ border-color:var(--accent); }
.wallet-opt b{ display:block; color:var(--text); }
.wallet-opt small{ color:var(--text-3); font-size:.8rem; }
.wallet-ico{ width:42px; height:42px; display:grid; place-items:center; border-radius:var(--radius-sm); background:var(--accent-soft); color:var(--accent); }
.modal-foot{ margin-top:16px; }

/* ===================== TOAST ===================== */
.toast-wrap{ position:fixed; right:20px; bottom:20px; z-index:90; display:flex; flex-direction:column; gap:10px; pointer-events:none; }
.toast{ display:flex; align-items:center; gap:10px; max-width:340px; padding:12px 16px; border-radius:var(--radius-sm); background:var(--surface-2); border:1px solid var(--line); color:var(--text); font-weight:600; font-size:.9rem; box-shadow:var(--shadow); animation:pop .25s ease; pointer-events:auto; }
.toast .lucide{ color:var(--accent); }
.toast.err .lucide{ color:var(--ember); }
.toast a{ color:var(--accent); }

/* ===================== JUNGLE ART ===================== */
/* Leaf fills used by every procedural shape (ART in script.js) */
.lf1{ fill:var(--leaf-1); } .lf2{ fill:var(--leaf-2); } .lf3{ fill:var(--leaf-3); } .lf4{ fill:var(--leaf-4); }
.lf1, .lf2, .lf3, .lf4{ stroke:var(--leaf-edge); stroke-width:1; }
.spine{ fill:none; stroke:var(--leaf-3); stroke-width:3; stroke-linecap:round; }
.vine-stem{ fill:none; stroke:var(--vine); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }

.jungle{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.vine{ position:absolute; top:0; width:60px; transform-origin:50% 0; animation:sway 9s ease-in-out infinite; }
.vine svg{ display:block; width:60px; }
.vine-1{ left:1.5%; }
.vine-2{ left:8%; animation-delay:-3s; opacity:.7; }
.vine-3{ right:2%; animation-delay:-5s; }
.vine-4{ right:10%; animation-delay:-1.5s; opacity:.6; }
@keyframes sway{ 0%,100%{ transform:rotate(1.6deg); } 50%{ transform:rotate(-1.6deg); } }
.fronds{ position:absolute; bottom:-10px; width:min(520px, 42vw); aspect-ratio:1; }
.fronds svg{ width:100%; height:100%; overflow:visible; }
.fronds-left{ left:-70px; }
.fronds-right{ right:-70px; transform:scaleX(-1); }

/* Swaying foliage: frond groups rock around their base, grass blades bend in a wind wave */
.sway{ animation:frond-sway var(--s, 6s) ease-in-out var(--d, 0s) infinite alternate; }
@keyframes frond-sway{ from{ transform:rotate(-1.8deg); } to{ transform:rotate(1.8deg); } }
.grass{ position:absolute; left:0; right:0; bottom:0; height:120px; pointer-events:none; }
.grass svg{ display:block; width:100%; height:100%; }
.blade{ animation:blade-sway 4s ease-in-out var(--d, 0s) infinite; }
@keyframes blade-sway{ 0%,100%{ transform:skewX(-5deg); } 50%{ transform:skewX(7deg); } }
.grass-front{ z-index:2; height:72px; }

/* Fireflies: <div class="fireflies" data-fireflies="12"> is filled by script.js */
.fireflies{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.ff{ position:absolute; left:var(--x); top:var(--y); width:4px; height:4px; border-radius:50%; background:var(--firefly);
  box-shadow:0 0 10px 3px rgba(216,255,106,.55); opacity:0;
  animation:ff-drift var(--t) ease-in-out var(--d) infinite, ff-glow calc(var(--t) / 3) ease-in-out var(--d) infinite; }
@keyframes ff-drift{ 0%,100%{ transform:translate(0,0); } 25%{ transform:translate(22px,-26px); } 50%{ transform:translate(-8px,-48px); } 75%{ transform:translate(-26px,-16px); } }
@keyframes ff-glow{ 0%,100%{ opacity:0; } 50%{ opacity:.95; } }

/* Eyes watching from the dark foliage */
.eyes{ position:absolute; z-index:2; width:30px; height:8px; }
.eyes::before, .eyes::after{ content:""; position:absolute; top:0; width:11px; height:6px; border-radius:50% 50% 50% 50% / 70% 70% 30% 30%;
  background:var(--accent); box-shadow:0 0 10px var(--accent); animation:blink 6s ease-in-out infinite; }
.eyes::before{ left:0; } .eyes::after{ right:0; }
.eyes.e1{ left:-4%; top:74%; }
.eyes.e2{ right:-2%; top:12%; transform:scale(.8); }
.eyes.e2::before, .eyes.e2::after{ animation-delay:-2.7s; background:var(--parchment); box-shadow:0 0 10px var(--parchment); }
@keyframes blink{ 0%,46%,52%,100%{ transform:scaleY(1); } 49%{ transform:scaleY(.1); } }

/* Canopy edge: leaves hanging from the top of a section */
.canopy-edge{ position:absolute; left:0; right:0; top:0; height:130px; z-index:0; pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 26px); mask-image:linear-gradient(180deg, transparent, #000 26px); }
.canopy-edge svg{ width:100%; height:130px; }

/* ===================== WANTED POSTER ===================== */
.poster-wrap{ position:relative; padding:20px 12px; filter:drop-shadow(0 30px 40px rgba(0,0,0,.6)); }
.poster{
  position:relative; text-align:center; color:var(--paper-ink); padding:44px 30px 70px; transform:rotate(-2.5deg);
  background:
    repeating-linear-gradient(0deg, rgba(42,29,16,.035) 0 2px, transparent 2px 6px),
    radial-gradient(ellipse at 50% 45%, var(--paper) 50%, var(--paper-2) 100%);
  box-shadow:inset 0 0 70px rgba(110,70,20,.45);
  clip-path:polygon(0 2%, 6% 0, 14% 1.6%, 22% 0, 33% 1.2%, 45% 0, 58% 1.8%, 70% 0, 82% 1.2%, 92% 0, 100% 1.6%, 99% 12%, 100% 26%, 98.6% 40%, 100% 55%, 99% 70%, 100% 86%, 99.2% 100%, 88% 98.4%, 76% 100%, 63% 98.8%, 50% 100%, 37% 98.6%, 24% 100%, 12% 98.8%, 0 100%, 1% 85%, 0 70%, 1.2% 54%, 0 38%, 1% 22%);
}
.poster-nail{ position:absolute; top:14px; left:50%; width:13px; height:13px; margin-left:-6px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #B9B9B9, #2E2E2E); box-shadow:0 2px 3px rgba(0,0,0,.4); }
.poster-title{ font-family:var(--font-display); font-weight:800; font-size:clamp(2.6rem, 5vw, 3.7rem); letter-spacing:.07em; text-transform:uppercase; color:var(--paper-ink); line-height:1; }
.poster-sub{ font-family:var(--font-serif); font-style:italic; font-size:1.2rem; margin-top:6px; }
.poster-art{ margin:14px auto 4px; max-width:290px; padding:10px 0 4px; border-block:2px solid rgba(42,29,16,.45); }
.poster-art svg{ width:100%; }
.poster-name{ font-family:var(--font-display); font-weight:800; font-size:1.45rem; margin-top:8px; letter-spacing:-.01em; }
.poster-crimes{ list-style:none; padding:0; margin:10px 0 0; display:grid; gap:3px; font-size:.92rem; font-weight:600; }
.poster-crimes li::before{ content:"✕"; color:var(--stamp); font-weight:800; margin-right:8px; }
.poster-reward{ display:inline-flex; flex-direction:column; margin-top:18px; padding:8px 20px; border:2px dashed var(--paper-ink); }
.poster-reward span{ font-size:.7rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; }
.poster-reward b{ font-size:1.25rem; }
.poster-stamp{ position:absolute; right:14px; bottom:18px; transform:rotate(-8deg); padding:6px 10px; border:3px solid var(--stamp); border-radius:6px; color:var(--stamp);
  font-family:var(--font-display); font-weight:800; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; opacity:.85; mix-blend-mode:multiply; }
.arrow.a-poster{ left:20%; top:22%; --x:0px; --y:0px; --len:170px; --rot:-148deg; --ad:.2s; z-index:3; }
/* whale engraving */
.w-body{ fill:rgba(42,29,16,.1); stroke:var(--paper-ink); stroke-width:2.5; stroke-linejoin:round; }
.w-belly, .w-mouth, .w-chain, .w-spout, .w-water{ fill:none; stroke:var(--paper-ink); stroke-width:2; stroke-linecap:round; }
.w-water{ opacity:.45; }
.w-eye, .w-hat{ fill:var(--paper-ink); }
.w-mono{ fill:none; stroke:var(--paper-ink); stroke-width:2; }
.w-hatband{ fill:var(--stamp); }
.w-bag path{ fill:#B8862F; stroke:var(--paper-ink); stroke-width:2; }
.w-bag text{ font:800 13px var(--font-display); fill:var(--paper-ink); }

/* "Looted" stamp on the sale card */
.loot-stamp{ position:absolute; left:42%; top:22px; z-index:1; display:inline-flex; flex-direction:column; align-items:center; padding:4px 12px 5px; border:2px solid var(--ember); border-radius:8px;
  color:var(--ember); font-family:var(--font-display); font-weight:800; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; transform:rotate(-9deg); opacity:.9; pointer-events:none; }
.loot-stamp .mono{ font-size:1.05rem; letter-spacing:0; }

/* ===================== CTA BAND + OUTLAW ===================== */
.cta-section{ padding-top:24px; padding-bottom:40px; }
.cta-band{ position:relative; isolation:isolate; overflow:hidden; display:grid; grid-template-columns:1.1fr .9fr; align-items:end; gap:20px; min-height:440px; padding:56px 56px 0;
  border:1px solid var(--line); border-radius:calc(var(--radius) + 4px);
  background:radial-gradient(520px 360px at 78% 70%, rgba(198,255,61,.16), transparent 70%), linear-gradient(180deg, var(--leaf-1), var(--bg)); }
.cta-copy{ position:relative; z-index:3; padding-bottom:76px; }
.cta-copy .hero-ctas{ margin-bottom:0; }
.cta-fronds{ position:absolute; right:-50px; bottom:-10px; width:520px; aspect-ratio:1; z-index:0; transform:scaleX(-1); }
.cta-fronds svg{ width:100%; height:100%; overflow:visible; }
.outlaw{ position:relative; z-index:1; justify-self:center; width:min(380px, 100%); }
.outlaw svg{ display:block; width:100%; }
.outlaw{ -webkit-mask-image:linear-gradient(180deg, #000 82%, transparent); mask-image:linear-gradient(180deg, #000 82%, transparent); }
.o-rings circle{ fill:none; stroke:rgba(198,255,61,.14); stroke-width:1.5; stroke-dasharray:2 8; stroke-linecap:round; }
.o-bow{ fill:none; stroke:var(--wood); stroke-width:6; stroke-linecap:round; }
.o-bow-grip{ fill:none; stroke:#3A2414; stroke-width:8; stroke-linecap:round; }
.o-bow-tip{ fill:none; stroke:var(--wood-hi); stroke-width:3; stroke-linecap:round; }
.o-string{ stroke:var(--parchment); stroke-width:1.2; opacity:.55; }
.o-quiver{ fill:#4A2C17; stroke:#2A170A; stroke-width:2; }
.o-quiver-hi{ fill:#6B4223; opacity:.75; }
.o-stitch{ fill:none; stroke:#C9A36A; stroke-width:1.2; stroke-dasharray:3 4; }
.o-band{ stroke:#B8862F; stroke-width:4; }
.o-cloak{ fill:var(--leaf-2); stroke:var(--leaf-edge); stroke-width:1.5; }
.o-fold{ fill:none; stroke:var(--leaf-1); stroke-width:7; stroke-linecap:round; opacity:.85; }
.o-rim, .o-hood-rim{ fill:none; stroke:var(--accent); stroke-width:2.2; stroke-linecap:round; opacity:.5; }
.o-strap{ stroke:#3A2414; stroke-width:8; stroke-linecap:round; }
.o-hood{ fill:var(--leaf-3); stroke:var(--leaf-edge); stroke-width:1.5; }
.o-hood-shade{ fill:var(--leaf-2); opacity:.9; }
.o-tip{ fill:var(--leaf-4); }
.o-face{ fill:#020604; }
.o-mask{ fill:#0B1A11; stroke:rgba(198,255,61,.22); stroke-width:1; }
.o-eyes path{ fill:var(--accent); filter:drop-shadow(0 0 6px var(--accent)); }
.o-eyes{ transform-box:fill-box; transform-origin:center; animation:blink 5s ease-in-out infinite; }
.o-smirk{ fill:none; stroke:rgba(198,255,61,.3); stroke-width:2; stroke-linecap:round; }
.o-brooch circle:nth-child(1){ fill:var(--accent-ink); stroke:var(--accent); stroke-width:2; }
.o-brooch circle:nth-child(2){ fill:none; stroke:var(--accent); stroke-width:1.5; }
.o-brooch circle:nth-child(3){ fill:var(--accent); }

/* ===================== RESPONSIVE ===================== */
@media (max-width:1080px){
  .nav a{ padding:8px 9px; }
  .hide-sm{ display:none; }
  .tok-grid, .launch-grid{ grid-template-columns:1fr; }
  .steps, .roadmap{ grid-template-columns:repeat(2, 1fr); }
  .roadmap::before{ display:none; }
  .rm{ padding-top:0; }
  .rm-dot{ display:none; }
}
@media (max-width:900px){
  .nav-toggle{ display:inline-grid; }
  .nav{
    position:fixed; left:0; right:0; top:72px; margin:0; flex-direction:column; align-items:stretch; gap:2px;
    padding:12px 20px 20px; background:var(--bg); box-shadow:0 30px 60px rgba(0,0,0,.6); border-bottom:1px solid var(--line);
    transform:translateY(-12px); opacity:0; visibility:hidden; transition:all .2s ease;
  }
  .nav.open{ transform:none; opacity:1; visibility:visible; }
  .nav a{ padding:12px 14px; font-size:1rem; }
  .header.menu-open{ background:var(--bg); }
  .hero-grid{ grid-template-columns:1fr; }
  .hero-art{ margin-top:8px; }
  .target{ width:min(340px, 78%); }
  .stats-strip{ grid-template-columns:repeat(2, 1fr); }
  .stat:nth-child(2){ border-right:0; }
  .stat:nth-child(-n+2){ border-bottom:1px solid var(--line); }
  .about-grid{ grid-template-columns:1fr; gap:40px; }
  .poster-wrap{ max-width:420px; margin:0 auto; width:100%; }
  .cta-band{ grid-template-columns:1fr; padding:36px 24px 0; }
  .cta-copy{ padding-bottom:0; }
  .outlaw{ width:min(260px, 70%); }
  .cta-fronds{ width:340px; }
  .fronds{ width:min(300px, 62vw); }
  .vine-2, .vine-4{ display:none; }
  .community{ grid-template-columns:1fr; padding:28px; }
  .faq-wrap{ grid-template-columns:1fr; gap:0; }
  .footer-grid{ grid-template-columns:1fr; }
  .footer-links{ justify-content:flex-start; }
}
@media (max-width:640px){
  .section{ padding:68px 0; }
  .wrap{ padding:0 16px; }
  .header-inner{ gap:10px; }
  .wallet-label{ max-width:96px; overflow:hidden; text-overflow:ellipsis; }
  .hero{ padding-top:28px; }
  .hero-ctas .btn{ flex:1; }
  .donut-card{ grid-template-columns:1fr; }
  .facts{ grid-template-columns:1fr 1fr; }
  .steps, .roadmap{ grid-template-columns:1fr; }
  .phases{ grid-template-columns:1fr; }
  .sale-top{ flex-direction:column; }
  .countdown{ width:100%; }
  .countdown div{ flex:1; min-width:0; }
  #countdown-label{ text-align:left; }
  .channels{ grid-template-columns:1fr 1fr; }
  .card{ padding:20px; }
  .swap-input{ font-size:1.55rem; }
  .fc1{ left:-6%; } .fc2{ right:-6%; }
  .toast-wrap{ left:16px; right:16px; }
  .loot-stamp{ left:auto; right:16px; top:18px; }
  .arrow.a1{ --x:2px; --y:-2px; --len:160px; }
  .arrow.a2{ --x:-40px; --y:30px; --len:140px; }
  .arrow.a3{ --x:36px; --y:42px; --len:125px; }
  .section-launch, .footer{ padding-top:110px; }
  .vine-3{ right:-2%; }
  .toast{ max-width:none; }
}
@media (max-width:380px){
  .brand-name{ display:none; }
  .channels{ grid-template-columns:1fr; }
  .facts{ grid-template-columns:1fr; }
  .stat{ padding:16px; }
  .stat-v{ font-size:1.2rem; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
}