/* ============================================================
   COME ON - comeon.gg
   Palette + type lifted from the brand key art.
   ============================================================ */

:root{
  --ink:        #08060c;
  --ink-2:      #100a16;
  --ink-3:      #17101f;
  --line:       #2a1f36;

  --cream:      #f7f2e8;
  --muted:      #9b8fa8;
  --faint:      #6b5f79;

  --red:        #ff2a18;
  --magenta:    #ff1e7a;
  --violet:     #8b2bf0;

  --serif: "Instrument Serif", Georgia, serif;
  --sans:  "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1180px;
  --r:    14px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }

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

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 28px; }

/* ---------- shared type ---------- */

.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.14em;
  color:var(--muted);
  margin:0 0 22px;
}

.mono-note{
  font-family:var(--mono);
  font-size:12.5px;
  color:var(--faint);
  margin:0;
}

.ac-red{ color:var(--red); }

.section-title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(38px,5vw,60px);
  line-height:1.02;
  letter-spacing:-.01em;
  margin:0 0 14px;
}

/* ---------- buttons ---------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--sans);
  font-size:14px;
  font-weight:500;
  padding:11px 20px;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, filter .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); }

.btn-primary{
  background:var(--red);
  color:#fff;
}
.btn-primary:hover{ filter:brightness(1.1); box-shadow:0 8px 30px -8px rgba(255,42,24,.7); }

.btn-ghost{
  background:transparent;
  border-color:var(--line);
  color:var(--cream);
}
.btn-ghost:hover{ border-color:var(--red); color:var(--red); }

.btn-lg{ font-size:15px; padding:14px 28px; }

/* Buy is the one green thing on the page: green reads as "buy" in every
   trading app, and reserving it for the single action you want people to
   take is different from letting it loose in the chart, where it fought
   the palette. Dark text because white on this green is unreadable. */
.btn-buy{
  background:#14cf73;
  color:#04170d;
  font-weight:700;
}
.btn-buy:hover{
  background:#1ee383;
  filter:none;
  box-shadow:0 8px 30px -8px rgba(20,207,115,.65);
}

/* link with no URL in config yet — inert, but not visibly broken */
.is-soon{ cursor:default; }
.is-soon:hover{ transform:none; }
a.is-soon:not(.btn){ opacity:.45; }
a.is-soon:not(.btn):hover{ color:var(--muted); }

/* ============================================================
   NAV
   ============================================================ */

.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(8,6,12,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  display:flex; align-items:center; gap:28px;
  height:64px;
}
.brand{ font-family:var(--mono); font-size:14px; font-weight:500; letter-spacing:.02em; }
.brand-mark{ color:var(--cream); }
.brand-tld{ color:var(--red); }

.nav-links{ display:flex; gap:24px; margin-left:auto; }
.nav-links a{
  font-size:14px; color:var(--muted);
  transition:color .15s ease;
}
.nav-links a:hover{ color:var(--cream); }

/* Icon links sit on the text baseline of their neighbours, so the box is
   line-height'd to match rather than nudged with margins. */
.nav-icon{
  display:inline-flex;
  align-items:center;
  height:1.5em;
}
.nav-icon svg{
  width:15px; height:15px;
  fill:currentColor;          /* inherits the hover colour */
  display:block;
}

/* ============================================================
   HERO
   ============================================================ */

.hero{ position:relative; overflow:hidden; }

.hero-bg{ position:absolute; inset:0; pointer-events:none; }

/* diagonal light rays sweeping up-right: red -> magenta -> violet */
.streaks{
  position:absolute;
  top:-40%; left:-10%;
  width:130%; height:180%;
  background:
    repeating-linear-gradient(
      128deg,
      transparent 0 6px,
      rgba(255,42,24,.30) 6px 7px,
      transparent 7px 22px,
      rgba(255,30,122,.22) 22px 23px,
      transparent 23px 46px,
      rgba(139,43,240,.20) 46px 47px,
      transparent 47px 82px
    );
  -webkit-mask-image:radial-gradient(58% 62% at 74% 46%, #000 0%, rgba(0,0,0,.55) 38%, transparent 76%);
  mask-image:radial-gradient(58% 62% at 74% 46%, #000 0%, rgba(0,0,0,.55) 38%, transparent 76%);
}

/* Rising chart, generated by tools/chart.py: flat at the left, near
   vertical at the right, with the sell marker above the start.
   Width-anchored so the artwork keeps its proportions. */
.chart-wrap{ position:absolute; left:0; bottom:0; width:100%; }
.chart{ display:block; width:100%; opacity:.9; }

/* The marker's label. Kept in HTML rather than inside the SVG so it
   renders in JetBrains Mono — an <img>-loaded SVG can't reach the
   document's webfonts. Positioned as a % of the chart box, which is
   width-anchored, so it tracks the marker at every size. */
.chart-you{
  position:absolute;
  left:8.5%; top:81.9%;
  transform:translate(-50%,-50%);
  font-family:var(--mono);
  font-size:clamp(13px,1.2vw,18px);
  letter-spacing:.06em;
  color:var(--red);
  text-shadow:0 0 20px rgba(255,42,24,.6);
}

.glow{
  position:absolute;
  top:8%; right:6%;
  width:640px; height:640px;
  max-width:70vw;
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,42,24,.18) 0%,
    rgba(255,30,122,.07) 34%,
    rgba(139,43,240,.04) 56%,
    transparent 72%);
  filter:blur(20px);
}

.hero-inner{
  position:relative;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:40px;
  align-items:center;
  padding-top:88px;
  padding-bottom:96px;
  min-height:min(86vh,780px);
}

.hero h1{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(44px,6.4vw,86px);
  line-height:1.0;
  letter-spacing:-.015em;
  margin:0 0 26px;
}
.hero h1 em{
  font-style:italic;
  color:var(--red);
}

.lede{
  font-size:18px;
  color:var(--muted);
  max-width:46ch;
  margin:0 0 32px;
}

.cta-row{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; }

/* contract-address pill */
.ca{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:12.5px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  color:var(--muted);
  border-radius:999px;
  padding:11px 18px;
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
  max-width:100%;
}
.ca:hover{ border-color:var(--red); color:var(--cream); }
.ca-label{ color:var(--red); letter-spacing:.08em; }
.ca-value{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ca[data-ca=""]{ cursor:default; }
.ca[data-ca=""]:hover{ border-color:var(--line); color:var(--muted); }

.hero-foot{
  font-family:var(--mono);
  font-size:12.5px;
  line-height:1.9;
  color:var(--muted);
  margin:44px 0 0;
}

.hero-art{ position:relative; display:flex; justify-content:center; align-items:center; }

/* Backlight behind Dude, as in the key art: a hot core hugging the
   silhouette, falling off fast into black rather than washing across the
   hero. Two layers — a tight bright centre and a wider bloom — because a
   single gradient either reads flat or bleeds over the headline. */
.hero-art::before,
.hero-art::after{
  content:"";
  position:absolute;
  top:46%; left:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  pointer-events:none;
}

/* wider bloom */
.hero-art::after{
  width:min(520px,105%);
  aspect-ratio:1;
  background:radial-gradient(circle,
    rgba(255,42,24,.34) 0%,
    rgba(255,26,10,.20) 38%,
    rgba(180,20,10,.08) 62%,
    transparent 76%);
  filter:blur(38px);
}

/* Rim light.

   A disc behind Dude does not give the key art's look: he is wider than
   any circle small enough to stay tight, so it hides entirely behind him.
   Stacked drop-shadows glow from the alpha channel instead, so the light
   follows his actual outline — arms, legs, the notch under his chin —
   which is what makes it read as backlighting rather than a red blob. */
.character{
  position:relative;
  z-index:2;                 /* above the bloom */
  width:100%;
  max-width:420px;
  filter:
    drop-shadow(0 0 10px rgba(255,140,90,.95))
    drop-shadow(0 0 26px rgba(255,52,26,.85))
    drop-shadow(0 0 62px rgba(235,24,10,.60))
    drop-shadow(0 14px 40px rgba(0,0,0,.55));
}

/* ============================================================
   MARQUEE
   ============================================================ */

.marquee{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--ink-2);
  overflow:hidden;
  padding:13px 0;
}
.marquee-track{
  display:flex;
  width:max-content;
  animation:slide 46s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-item{
  font-family:var(--mono); font-size:12.5px;
  color:var(--muted);
  padding:0 26px;
  white-space:nowrap;
}
.marquee-item b{ color:var(--cream); font-weight:500; }
.marquee-item .loss{ color:var(--red); }
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

@media (prefers-reduced-motion:reduce){
  .marquee-track{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   SECTIONS
   ============================================================ */

.section{ padding:96px 0; }
.section-alt{ background:var(--ink-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

/* ---------- five stages of grief ---------- */

.steps{
  display:grid;
  /* Five cards, so let them find their own column count rather than
     forcing 5-up into a fixed grid: 5 across on desktop, then 3, 2, 1. */
  grid-template-columns:repeat(auto-fit,minmax(196px,1fr));
  gap:16px;
  margin-top:44px;
}
.step{
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:22px 20px 24px;
  transition:border-color .2s ease, transform .2s ease;
}
.step:hover{ border-color:rgba(255,42,24,.5); transform:translateY(-2px); }
.step-no{
  font-family:var(--mono); font-size:12px;
  color:var(--red); letter-spacing:.1em;
}
.step h3{
  font-family:var(--serif); font-weight:400;
  font-size:23px; line-height:1.18;
  margin:10px 0 9px;
}
/* The quote drops to its own line under the stage name rather than
   running on from it. */
.step-sub{ display:block; margin-top:5px; color:var(--muted); font-style:italic; }
.step p{ font-size:13.5px; line-height:1.65; color:var(--muted); margin:0; }

/* ============================================================
   FUMBLE INDEX
   ============================================================ */

.fi-head{
  display:grid;
  grid-template-columns:1fr auto;
  gap:32px;
  align-items:end;
  margin-bottom:34px;
}
.fi-blurb{ font-size:15px; color:var(--muted); max-width:34ch; margin:0; }

.badge{
  display:inline-block;
  font-size:10px; letter-spacing:.14em;
  color:var(--red);
  border:1px solid rgba(255,42,24,.45);
  border-radius:4px;
  padding:2px 7px;
  margin-right:9px;
}

/* ---------- wallet checker ---------- */

.wc{ margin:0 0 22px; }
.wc-label{
  display:block;
  font-family:var(--mono); font-size:12px; letter-spacing:.12em;
  color:var(--muted); margin-bottom:10px;
}
.wc-row{ display:flex; flex-wrap:wrap; gap:10px; }
.wc-input{
  flex:1 1 340px;
  min-width:0;
  font-family:var(--mono); font-size:13px;
  background:var(--ink-3);
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--cream);
  padding:12px 20px;
}
.wc-input::placeholder{ color:var(--faint); }
.wc-input:focus{ outline:none; border-color:var(--red); }
.wc-note{
  font-family:var(--mono); font-size:11.5px; color:var(--faint);
  margin:10px 0 0; max-width:62ch; line-height:1.7;
}

.wc-result{
  background:var(--ink-3);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:20px 22px;
  margin:0 0 22px;
}
.wc-msg{ font-family:var(--mono); font-size:13px; color:var(--muted); margin:0; }
.wc-head{
  display:flex; flex-wrap:wrap; gap:12px; align-items:baseline;
  justify-content:space-between;
  padding-bottom:14px; margin-bottom:6px;
  border-bottom:1px solid var(--line);
}
.wc-head span{ font-family:var(--mono); font-size:13px; color:var(--muted); }
.wc-head b{ font-family:var(--serif); font-weight:400; font-size:26px; color:var(--red); }

.wc-card{
  display:grid;
  grid-template-columns:34px 1fr auto;
  gap:14px; align-items:center;
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
.wc-card:last-of-type{ border-bottom:0; }
.wc-logo{ width:34px; height:34px; border-radius:50%; object-fit:cover; }
.wc-card-main b{ font-size:14px; }
.wc-detail{
  display:block; font-family:var(--mono); font-size:11.5px;
  color:var(--faint); margin-top:3px; line-height:1.6;
}
.wc-num{ text-align:right; }
.wc-num b{ display:block; font-family:var(--mono); font-size:17px; font-weight:500; color:var(--red); }
.wc-num span{ font-family:var(--mono); font-size:10px; color:var(--faint); letter-spacing:.06em; }
.wc-cardbox{
  margin-top:18px; padding-top:18px;
  border-top:1px solid var(--line);
}
.wc-canvas{
  width:100%; height:auto; display:block;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--ink);
}
.wc-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }

.wc-foot{
  font-family:var(--mono); font-size:11px; color:var(--faint);
  margin:16px 0 0; padding-top:14px; border-top:1px solid var(--line);
  line-height:1.7;
}

@media (max-width:560px){
  .wc-card{ grid-template-columns:34px 1fr; }
  .wc-num{ grid-column:2; text-align:left; margin-top:6px; }
}

.fi-grid{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:20px;
  align-items:start;
}

/* coin list */
.fi-coins{ display:flex; flex-direction:column; gap:8px; }

.coin{
  display:grid;
  grid-template-columns:38px 1fr auto;
  align-items:center;
  gap:12px;
  width:100%;
  text-align:left;
  background:var(--ink-3);
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 14px;
  cursor:pointer;
  font-family:inherit;
  color:inherit;
  transition:border-color .15s ease, background .15s ease;
}
.coin:hover{ border-color:rgba(255,42,24,.45); }
.coin[aria-selected="true"]{
  border-color:var(--red);
  background:linear-gradient(90deg, rgba(255,42,24,.13), rgba(255,42,24,.02));
}
.coin-sym{
  width:38px; height:38px;
  display:grid; place-items:center;
  border-radius:50%;
  background:linear-gradient(140deg, var(--red), var(--violet));
  font-family:var(--mono); font-size:11px; font-weight:500;
  color:#fff;
  object-fit:cover;          /* when it is the project logo, not initials */
  flex:none;
}
.coin-name{ font-size:14px; line-height:1.25; }
.coin-name small{ display:block; font-family:var(--mono); font-size:11px; color:var(--faint); }
.coin-x{ font-family:var(--mono); font-size:13px; color:var(--red); }

/* leaderboard panel */
.fi-board{
  background:var(--ink-3);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:28px 28px 24px;
}
.board-head{
  display:flex; flex-wrap:wrap; gap:18px 28px;
  align-items:baseline;
  padding-bottom:20px;
  border-bottom:1px solid var(--line);
  margin-bottom:8px;
}
.board-title{
  font-family:var(--serif); font-weight:400;
  font-size:32px; line-height:1.1; margin:0;
}
.board-stats{ display:flex; gap:26px; margin-left:auto; }
.stat span{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--faint); }
.stat b{ font-family:var(--mono); font-size:15px; font-weight:500; color:var(--cream); }
.stat b.up{ color:var(--magenta); }

.rank{
  display:grid;
  grid-template-columns:34px 1fr auto;
  gap:16px;
  align-items:center;
  padding:18px 0;
  border-bottom:1px solid var(--line);
}
.rank:last-child{ border-bottom:0; }
.rank-no{
  font-family:var(--serif); font-size:30px; line-height:1;
  color:var(--red);
}
.rank-2 .rank-no{ color:var(--magenta); }
.rank-3 .rank-no{ color:var(--violet); }
.rank-wallet{ font-family:var(--mono); font-size:13.5px; color:var(--cream); }
.rank-detail{ font-size:12.5px; color:var(--faint); margin-top:3px; }
.rank-miss{ text-align:right; }
.rank-miss b{ font-family:var(--mono); font-size:19px; font-weight:500; color:var(--red); display:block; }
.rank-miss span{ font-family:var(--mono); font-size:11px; color:var(--faint); letter-spacing:.06em; }

.board-foot{
  font-family:var(--mono); font-size:11.5px; color:var(--faint);
  margin:20px 0 0; padding-top:16px; border-top:1px solid var(--line);
}
.board-link{ color:var(--red); white-space:nowrap; }
.board-empty{
  font-family:var(--mono); font-size:13px; color:var(--faint);
  margin:22px 0 6px; line-height:1.7;
}
/* the wallet you just checked, highlighted in the board */
.rank-you{
  background:linear-gradient(90deg, rgba(255,42,24,.12), transparent);
  box-shadow:inset 3px 0 0 var(--red);
  padding-left:12px;
}
.wc-rank{ color:var(--red); font-weight:500; }
.board-link:hover{ text-decoration:underline; }

/* ============================================================
   CTA STRIP + FOOTER
   ============================================================ */

.strip{ padding:88px 0; text-align:center; }
.strip-inner{ display:flex; flex-direction:column; align-items:center; gap:26px; }
.strip-title{
  font-family:var(--serif); font-weight:400; font-style:italic;
  font-size:clamp(34px,5vw,58px);
  line-height:1.05; margin:0;
  color:var(--red);
}

.footer{ border-top:1px solid var(--line); padding:40px 0 56px; }
.footer-inner{ display:flex; flex-direction:column; gap:16px; }
.footer-links{ display:flex; flex-wrap:wrap; gap:22px; }
.footer-links a{ font-size:14px; color:var(--muted); transition:color .15s ease; }
.footer-links a:hover{ color:var(--red); }
.disclaimer{ font-size:12px; color:var(--faint); max-width:70ch; margin:10px 0 0; line-height:1.7; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width:960px){
  .hero-inner{ grid-template-columns:1fr; padding-top:56px; padding-bottom:64px; min-height:0; }
  .hero-art{ order:-1; }
  .character{ max-width:260px; }
  .fi-grid{ grid-template-columns:1fr; }
  .fi-coins{
    flex-direction:row; overflow-x:auto; padding-bottom:6px;
    scrollbar-width:none;
  }
  .fi-coins::-webkit-scrollbar{ display:none; }
  .coin{ min-width:230px; }
  .fi-head{ grid-template-columns:1fr; align-items:start; }
}

@media (max-width:680px){
  .wrap{ padding:0 20px; }
  /* The chart squashes to ~190px here and crosses the CTA and footer
     lines. Drop it back to texture so the copy stays legible. */
  .chart-wrap{ opacity:.5; }
  .nav-links{ display:none; }
  .section{ padding:68px 0; }
  .board-stats{ margin-left:0; width:100%; }
  .fi-board{ padding:22px 20px; }
  .rank{ grid-template-columns:26px 1fr; }
  .rank-miss{ grid-column:2; text-align:left; margin-top:6px; }
  .hero-foot{ margin-top:32px; }
}