/* ==========================================================
   Climb Creator Network — styles
   Brand (from Climb logo + flyer)
     --black   #050505  page background
     --card    #0E100D  card surface
     --green   #8CE63C  Climb neon green (accents, CTAs, icons)
     --lime    #B9E432  logo lime (highlights)
     --white   #FFFFFF  headings
     --text    #D9DDD5  body text
   Fonts: Barlow Condensed (bold uppercase headings), Barlow (body)
   ========================================================== */
:root {
  --black: #050505;
  --card: #0E100D;
  --card-2: #131611;
  --green: #8CE63C;
  --green-dk: #5FA824;
  --lime: #B9E432;
  --white: #FFFFFF;
  --text: #D9DDD5;
  --muted: #9AA195;
  --line: rgba(255, 255, 255, .1);
  --gline: rgba(140, 230, 60, .55);
  --glow: 0 0 0 1px rgba(140, 230, 60, .7), 0 0 28px rgba(140, 230, 60, .25);
  --radius: 14px;
  --font-display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --container: 1180px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
html, body { overflow-x: clip; }
body {
  margin: 0; background: var(--black); color: var(--text);
  font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1; margin: 0; text-transform: uppercase; color: var(--white); letter-spacing: .01em; }
p { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
.g { color: var(--green); }
.muted { color: var(--muted); }
.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 1rem; top: -100px; background: var(--green); color: var(--black); padding: .6rem 1rem; border-radius: 8px; z-index: 100; font-weight: 700; }
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 4px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: .06em; text-transform: uppercase;
  padding: .85rem 1.6rem; border-radius: 8px; text-decoration: none; min-height: 50px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, border-color .25s, color .25s;
}
.btn-green { background: var(--green); color: var(--black); box-shadow: 0 0 0 0 rgba(140, 230, 60, 0); }
.btn-green:hover { transform: translateY(-2px); background: #9DF04F; box-shadow: 0 8px 30px rgba(140, 230, 60, .4); }
.btn-green:active { transform: translateY(0); }
.btn-ghost { border: 1.5px solid rgba(255, 255, 255, .35); color: var(--white); }
.btn-ghost:hover { border-color: var(--green); color: var(--green); transform: translateY(-2px); }
.btn-sm { padding: .5rem 1.05rem; font-size: 1rem; min-height: 42px; }
.btn-lg { padding: 1rem 2rem; font-size: 1.3rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(5, 5, 5, .78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent; transition: border-color .3s, background .3s;
}
.site-header.scrolled { border-bottom-color: var(--line); background: rgba(5, 5, 5, .92); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.logo-link { display: inline-block; text-decoration: none; }
.logo-img { height: 46px; width: auto; }

.nav-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 6px;
  width: 46px; height: 46px; border-radius: 10px; border: 1px solid var(--line);
  background: transparent; cursor: pointer; padding: 0 12px;
}
.nav-toggle .bar { display: block; height: 2.5px; background: var(--white); border-radius: 2px; transition: transform .25s ease; }
.nav-toggle[aria-expanded="true"] .bar:first-of-type { transform: translateY(4.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:last-of-type { transform: translateY(-4.25px) rotate(-45deg); }
.site-nav {
  position: absolute; top: 72px; left: 0; right: 0; display: none; flex-direction: column;
  padding: .5rem 1.25rem 1.5rem; background: var(--black); border-bottom: 1px solid var(--line);
}
.site-nav.open { display: flex; }
.site-nav a:not(.btn) {
  padding: .85rem .25rem; text-decoration: none; border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; letter-spacing: .06em; text-transform: uppercase; color: var(--white);
}
.site-nav .btn { margin-top: 1rem; align-self: flex-start; }
@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .site-nav { position: static; display: flex; flex-direction: row; align-items: center; gap: 1.8rem; padding: 0; background: none; border: 0; }
  .site-nav a:not(.btn) { border: 0; padding: .25rem 0; font-size: 1.05rem; color: var(--text); position: relative; transition: color .2s; }
  .site-nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
  .site-nav a:not(.btn):hover { color: var(--white); }
  .site-nav a:not(.btn):hover::after { transform: scaleX(1); }
  .site-nav .btn { margin: 0; }
  .site-nav a { white-space: nowrap; }
}
@media (min-width: 900px) and (max-width: 1099px) { .site-nav { gap: 1.15rem; } .site-nav a:not(.btn) { font-size: .98rem; } }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: 3.5rem 0 6rem; text-align: center; isolation: isolate; }
.mountains { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.hero::after { /* vignette into page */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(80% 60% at 50% 35%, transparent 40%, rgba(5, 5, 5, .7) 100%), linear-gradient(180deg, rgba(5,5,5,.25), transparent 30%, transparent 75%, var(--black));
}
.beam { position: absolute; top: -40px; width: 3px; height: 300px; z-index: -1; background: linear-gradient(180deg, transparent, var(--green), transparent); filter: drop-shadow(0 0 8px var(--green)); opacity: .8; }
.beam-l { left: 7%; transform: rotate(-48deg); transform-origin: top; }
.beam-r { right: 7%; transform: rotate(48deg); transform-origin: top; }
.hero-inner { display: flex; flex-direction: column; align-items: center; }
.hero-logo { width: min(78vw, 400px); height: auto; filter: drop-shadow(0 6px 30px rgba(0, 0, 0, .8)); }
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.6rem;
  font-family: var(--font-display); font-weight: 700; font-size: .95rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--green); border: 1px solid var(--gline); background: rgba(140, 230, 60, .07);
  padding: .35rem .9rem; border-radius: 999px;
}
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #FF3B5C; box-shadow: 0 0 0 0 rgba(255, 59, 92, .7); animation: pulse 1.8s infinite; flex: none; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(255, 59, 92, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 59, 92, 0); } }
.hero-title { font-family: var(--font-display); text-transform: uppercase; margin: 1.3rem 0 1.2rem; line-height: .95; }
.ht-1 { display: block; font-weight: 700; font-size: clamp(1.6rem, 5.6vw, 2.9rem); color: var(--white); letter-spacing: .02em; }
.ht-2 { display: block; font-weight: 800; font-size: clamp(2.9rem, 12vw, 6.4rem); color: var(--green); margin-top: .1em; text-shadow: 0 0 40px rgba(140, 230, 60, .35); }
.hero-pitch { font-size: clamp(1.05rem, 2.4vw, 1.25rem); max-width: 40rem; color: var(--text); }
.hero-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: 1.6rem 0 1.8rem; }
.hero-badges li {
  display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; font-size: .98rem;
  padding: .45rem 1rem .45rem .75rem; border-radius: 999px; background: rgba(14, 16, 13, .8); border: 1px solid var(--line); color: var(--white);
}
.hero-badges svg { width: 18px; height: 18px; color: var(--green); }
.hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; }
@media (max-width: 899px) { .mountains { top: auto; height: 62%; } }
@media (min-width: 900px) { .hero { padding: 3.25rem 0 7rem; } .hero-title { margin: 1.1rem 0 1rem; } .hero-badges { margin: 1.3rem 0 1.5rem; } }

/* ---------- Section basics ---------- */
section { position: relative; }
.section-eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: .2em; text-transform: uppercase; color: var(--green); margin-bottom: .7rem; }
.section-eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--green); box-shadow: 0 0 8px var(--green); }
.section-title { font-size: clamp(2.3rem, 7vw, 4rem); font-weight: 800; max-width: 20ch; }
.section-lead { color: var(--text); font-size: 1.1rem; margin-top: 1rem; max-width: 38rem; }
.placeholder-tag {
  display: inline-block; font-family: var(--font-body); font-weight: 700; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: #111; background: repeating-linear-gradient(-45deg, #FFD23F 0 8px, #FFC400 8px 16px); padding: .28rem .6rem; border-radius: 5px;
}
.placeholder-tag.sm { font-size: .6rem; padding: .2rem .45rem; margin-top: .5rem; }

/* card base: green outline + hover lift/glow */
.gcard { }
.creator, .perk-card, .runner, .spotlight, .step, .resource-card, .closer-card, .extras-row, .invest-banner {
  border: 1px solid var(--gline); border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(140, 230, 60, .05), transparent 40%), var(--card);
}
.creator, .perk-card, .runner, .spotlight, .step, .resource-card {
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s, opacity .7s var(--ease);
}
.creator:hover, .perk-card:hover, .runner:hover, .spotlight:hover, .step:hover, .resource-card:hover {
  transform: translateY(-6px); border-color: var(--green); box-shadow: var(--glow);
}

/* ---------- Creators strip ---------- */
.creators { padding: 3rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #080907; }
.creators-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.kicker-title { font-size: 1.15rem; letter-spacing: .18em; color: var(--muted); font-weight: 700; }
/* mobile: swipeable strip; desktop: 5-up row */
.creator-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 46%; gap: .9rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .5rem 1.25rem 1rem; margin: -.5rem -1.25rem -1rem; scroll-padding-inline: 1.25rem; scrollbar-width: none; }
.creator-strip::-webkit-scrollbar { display: none; }
.creator-strip > li { scroll-snap-align: start; }
/* tablet/desktop: wrap into centered rows (handles any number of creators) */
@media (min-width: 640px) {
  .creator-strip { display: flex; flex-wrap: wrap; justify-content: center; overflow: visible; padding: 0; margin: 0; }
  .creator-strip > .creator { flex: 0 0 calc((100% - 2 * .9rem) / 3); }
}
@media (min-width: 1000px) { .creator-strip > .creator { flex-basis: calc((100% - 4 * .9rem) / 5); } }
.creator { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .2rem; padding: 1.2rem .6rem; }
.avatar {
  width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; margin-bottom: .55rem;
  font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: var(--green);
  background: radial-gradient(circle at 30% 25%, #2a3322, #0b0d0a); border: 2px solid var(--green); box-shadow: 0 0 16px rgba(140, 230, 60, .3);
}
.avatar-photo { object-fit: cover; padding: 0; background: #111; }
.creator.is-placeholder { border-style: dashed; }
.creator .placeholder-tag.sm { margin-top: .45rem; }
@media (max-width: 639px) { .creator-name { font-size: 1.05rem; } .creator-handle { font-size: .8rem; } }
.creator-handle { line-height: 1.3; }
a.creator-handle { color: var(--green); text-decoration: none; font-weight: 600; overflow-wrap: anywhere; }
a.creator-handle:hover { text-decoration: underline; }
.creator-name { overflow-wrap: anywhere; line-height: 1.15; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; text-transform: uppercase; color: var(--white); letter-spacing: .03em; }
.creator-handle { font-size: .88rem; color: var(--muted); }

/* ---------- Creators of the Month ---------- */
.cotm { padding: 5rem 0 3rem; }
.cotm-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 2.2rem; }
.cotm-month { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: .1em; text-transform: uppercase; color: var(--white); border: 1px solid var(--gline); padding: .45rem 1rem; border-radius: 8px; }
.cotm-month svg { width: 22px; height: 22px; color: var(--green); }
.cotm-grid { display: grid; gap: 1.1rem; }
.photo-ph {
  display: grid; place-items: center; align-content: center; gap: .3rem; color: rgba(140, 230, 60, .6);
  background: repeating-linear-gradient(135deg, #10130e 0 12px, #0b0d0a 12px 24px);
  font-family: var(--font-display); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; font-size: .85rem;
}
.spotlight { position: relative; overflow: hidden; display: grid; }
.spotlight::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; background: radial-gradient(60% 50% at 100% 0%, rgba(140, 230, 60, .18), transparent 70%); }
.spot-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-bottom: 1px solid var(--gline); }
.spot-photo.photo-ph svg { width: 84px; height: 84px; }
.spot-body { position: relative; padding: 1.6rem 1.5rem 1.8rem; display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.rank-badge {
  display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .8rem; border-radius: 6px;
  background: var(--green); color: var(--black); font-family: var(--font-display); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: .95rem;
  box-shadow: 0 0 24px rgba(140, 230, 60, .45);
}
.rank-badge svg { width: 20px; height: 20px; }
.spot-name { font-size: clamp(2.2rem, 6vw, 3.2rem); font-weight: 800; margin-top: .4rem; }
.spot-handle { color: var(--green); font-weight: 600; text-decoration: none; font-size: 1.1rem; }
.spot-handle:hover { text-decoration: underline; }
.spot-blurb { color: var(--text); max-width: 32rem; }
.runners { display: grid; gap: 1rem; }
.runner { display: flex; gap: 1rem; align-items: center; padding: 1rem; }
.runner-photo { flex: none; width: 88px; height: 88px; border-radius: 10px; object-fit: cover; border: 1px solid var(--gline); }
.runner-photo.photo-ph svg { width: 40px; height: 40px; }
.runner-photo.has-img { border-radius: 50%; border: 2px solid var(--green); box-shadow: 0 0 16px rgba(140, 230, 60, .3); background: #111; }
.runner-rank { font-family: var(--font-display); font-weight: 800; color: var(--green); font-size: 1rem; letter-spacing: .1em; }
.runner h3 { font-size: 1.5rem; font-weight: 700; margin: .1rem 0 .15rem; }
.runner a { color: var(--green); text-decoration: none; font-weight: 600; font-size: .95rem; }
.runner a:hover { text-decoration: underline; }
.runner p { color: var(--muted); font-size: .95rem; margin-top: .2rem; }
@media (min-width: 720px) {
  .spotlight { grid-template-columns: 1fr 1.1fr; }
  .spot-photo { aspect-ratio: auto; height: 100%; min-height: 320px; border-bottom: 0; border-right: 1px solid var(--gline); }
  .spot-body { justify-content: center; padding: 2.2rem; }
}
@media (min-width: 1000px) {
  .cotm-grid { grid-template-columns: 1.55fr 1fr; align-items: stretch; }
  .runners { grid-template-rows: repeat(3, 1fr); }
}

/* ---------- Testimonials ---------- */
.testimonials { padding: 3rem 0 4rem; }
.t-grid { display: grid; gap: 1rem; margin-top: 2.4rem; }
@media (min-width: 760px) { .t-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .t-grid { grid-template-columns: repeat(3, 1fr); } }
.t-card {
  position: relative; display: flex; flex-direction: column; gap: 1.1rem; padding: 1.7rem 1.5rem 1.5rem;
  border: 1px solid var(--gline); border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(140, 230, 60, .05), transparent 40%), var(--card);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s, opacity .7s var(--ease);
}
.t-card:hover, .js .t-card.reveal.in:hover { transform: translateY(-6px); border-color: var(--green); box-shadow: var(--glow); }
.t-card.is-placeholder { border-style: dashed; }
.t-mark { width: 38px; height: 38px; color: var(--green); filter: drop-shadow(0 0 8px rgba(140, 230, 60, .4)); }
.t-quote { margin: 0; color: var(--white); font-size: 1.05rem; line-height: 1.65; }
.t-quote p + p { margin-top: .8rem; }
.is-placeholder .t-quote { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.6rem; line-height: 1.05; color: var(--muted); }
.t-quote.clamped { max-height: calc(1.65em * 7); overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); }
.t-more {
  align-self: flex-start; margin-top: -.4rem; padding: .3rem 0; background: none; border: 0; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: .08em; text-transform: uppercase; color: var(--green);
}
.t-more::after { content: " ↓"; }
.t-more[aria-expanded="true"]::after { content: " ↑"; }
.t-more:hover { text-decoration: underline; }
.t-more[hidden] { display: none; }
.t-person { display: flex; align-items: center; gap: .9rem; margin-top: auto; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.t-avatar { flex: none; width: 60px; height: 60px; margin: 0; font-size: 1.05rem; }
.t-photo { border-radius: 50%; object-fit: cover; border: 2px solid var(--green); box-shadow: 0 0 16px rgba(140, 230, 60, .3); }
.t-meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.t-name { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; text-transform: uppercase; color: var(--white); letter-spacing: .02em; overflow-wrap: anywhere; }
.t-handle { color: var(--green); font-weight: 600; font-size: .95rem; text-decoration: none; overflow-wrap: anywhere; }
a.t-handle:hover { text-decoration: underline; }
.t-label { font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: .15rem; }
.t-tag { position: absolute; top: 1rem; right: 1rem; }

/* ---------- Meet the Founder ---------- */
.founder { padding: 3rem 0 4rem; }
.founder [data-founder-root] { margin-top: 2.4rem; }
.founder-visual, .spot-visual {
  position: relative; display: grid; place-items: center; min-height: 260px; overflow: hidden;
  border-bottom: 1px solid var(--gline);
  background:
    radial-gradient(55% 55% at 50% 50%, rgba(140, 230, 60, .16), transparent 70%),
    linear-gradient(180deg, transparent 55%, rgba(140, 230, 60, .06)),
    repeating-linear-gradient(135deg, #10130e 0 12px, #0b0d0a 12px 24px);
}
.founder-visual::after, .spot-visual::after { /* mountain silhouette */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; pointer-events: none;
  background: #070806;
  clip-path: polygon(0 100%, 0 70%, 18% 35%, 30% 58%, 50% 8%, 66% 48%, 78% 30%, 100% 66%, 100% 100%);
  opacity: .9;
}
.founder-avatar {
  position: relative; z-index: 1; width: 156px; height: 156px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 5.4rem; line-height: 1; color: var(--green);
  background: radial-gradient(circle at 30% 25%, #2a3322, #0b0d0a 70%);
  border: 4px solid var(--green);
  box-shadow: 0 0 0 8px rgba(140, 230, 60, .12), 0 0 40px rgba(140, 230, 60, .45), inset 0 0 24px rgba(140, 230, 60, .15);
  text-shadow: 0 0 24px rgba(140, 230, 60, .55);
}
.founder-visual.has-photo, .spot-visual { padding: 2rem; }
.founder-photo, .spot-avatar { position: relative; z-index: 1; width: 200px; height: 200px; border-radius: 50%; object-fit: cover; background: #222; border: 4px solid var(--green); box-shadow: 0 0 0 8px rgba(140, 230, 60, .12), 0 0 40px rgba(140, 230, 60, .45); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.founder-card:hover .founder-photo, .spotlight:hover .spot-avatar { transform: scale(1.03); box-shadow: 0 0 0 10px rgba(140, 230, 60, .16), 0 0 56px rgba(140, 230, 60, .6); }
.founder-title { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: .1em; text-transform: uppercase; color: var(--green); margin-top: -.1rem; line-height: 1.2; }
.founder-bio { margin-top: .6rem; max-width: 40rem; }
.founder-bio p { color: var(--text); font-size: 1.06rem; }
.founder-bio p + p { margin-top: .8rem; }
.founder-sign { display: inline-flex; align-items: center; gap: .55rem; margin-top: .9rem; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: .14em; text-transform: uppercase; color: var(--white); }
.founder-sign svg { width: 22px; height: 22px; color: var(--green); }
@media (min-width: 720px) {
  .founder-card { grid-template-columns: .8fr 1.2fr; }
  .founder-visual { min-height: 100%; border-bottom: 0; border-right: 1px solid var(--gline); }
  .founder-avatar { width: 190px; height: 190px; font-size: 6.6rem; }
  .founder-photo, .spot-avatar { width: 240px; height: 240px; }
  .spot-visual { min-height: 100%; border-bottom: 0; border-right: 1px solid var(--gline); }
}

/* ---------- Meet the Team ---------- */
.team { padding: 1rem 0 4rem; }
.team-grid { display: grid; gap: 1.1rem; margin-top: 2.4rem; }
@media (min-width: 860px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
.team-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  border: 1px solid var(--gline); border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(140, 230, 60, .05), transparent 40%), var(--card);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s, opacity .7s var(--ease);
}
.team-card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; background: radial-gradient(60% 40% at 100% 0%, rgba(140, 230, 60, .14), transparent 70%); }
.team-card:hover, .js .team-card.reveal.in:hover { transform: translateY(-6px); border-color: var(--green); box-shadow: var(--glow); }
.team-visual {
  position: relative; display: grid; place-items: center; min-height: 240px; padding: 1.8rem; overflow: hidden;
  border-bottom: 1px solid var(--gline);
  background:
    radial-gradient(55% 60% at 50% 50%, rgba(140, 230, 60, .16), transparent 70%),
    linear-gradient(180deg, transparent 55%, rgba(140, 230, 60, .06)),
    repeating-linear-gradient(135deg, #10130e 0 12px, #0b0d0a 12px 24px);
}
.team-visual::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; pointer-events: none; background: #070806; opacity: .9;
  clip-path: polygon(0 100%, 0 72%, 14% 44%, 26% 62%, 44% 14%, 60% 52%, 74% 32%, 88% 56%, 100% 40%, 100% 100%);
}
.team-photo, .team-avatar { position: relative; z-index: 1; width: 176px; height: 176px; border-radius: 50%; object-fit: cover; background: #222; border: 4px solid var(--green); box-shadow: 0 0 0 8px rgba(140, 230, 60, .12), 0 0 40px rgba(140, 230, 60, .45); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.team-avatar { width: 150px; height: 150px; font-size: 5rem; }
.team-card:hover .team-photo { transform: scale(1.03); box-shadow: 0 0 0 10px rgba(140, 230, 60, .16), 0 0 56px rgba(140, 230, 60, .6); }
.team-body { position: relative; flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; padding: 1.6rem 1.5rem 1.7rem; }
.team-badge {
  display: inline-flex; align-items: center; gap: .45rem; padding: .32rem .8rem .32rem .65rem; border-radius: 6px;
  border: 1px solid var(--green); background: rgba(140, 230, 60, .1); color: var(--green);
  font-family: var(--font-display); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: .95rem;
  box-shadow: 0 0 18px rgba(140, 230, 60, .22);
}
.team-badge svg { width: 20px; height: 20px; }
.team-name { font-size: clamp(2rem, 5vw, 2.6rem); font-weight: 800; margin-top: .35rem; line-height: 1; overflow-wrap: anywhere; }
.team-role { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: .1em; text-transform: uppercase; color: var(--green); line-height: 1.2; }
.team-bio { color: var(--text); font-size: 1.04rem; margin-top: .35rem; }
.team-helps { width: 100%; margin-top: .7rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.team-helps-title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: .14em; text-transform: uppercase; color: var(--white); margin-bottom: .55rem; }
.team-helps ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.team-helps li { display: flex; align-items: flex-start; gap: .55rem; color: var(--text); font-size: .98rem; line-height: 1.4; }
.team-helps li svg { flex: none; width: 18px; height: 18px; margin-top: .1rem; padding: 2px; border-radius: 50%; color: var(--black); background: var(--green); box-shadow: 0 0 10px rgba(140, 230, 60, .4); }
@media (min-width: 560px) { .team-helps ul { grid-template-columns: 1fr 1fr; gap: .5rem 1rem; } }
@media (min-width: 860px) and (max-width: 1079px) { .team-helps ul { grid-template-columns: 1fr; } }

/* ---------- Perks ---------- */
.perks { padding: 3rem 0 4rem; }
.perk-grid { display: grid; gap: 1rem; margin-top: 2.4rem; }
@media (min-width: 640px) { .perk-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .perk-grid { grid-template-columns: repeat(3, 1fr); } }
.perk-card { padding: 1.6rem 1.5rem 1.7rem; }
.perk-head { display: flex; align-items: center; gap: 1rem; margin-bottom: .9rem; }
.perk-icon { width: 54px; height: 54px; flex: none; color: var(--green); filter: drop-shadow(0 0 6px rgba(140, 230, 60, .35)); transition: transform .35s var(--ease); }
.perk-card:hover .perk-icon { transform: translateY(-3px) scale(1.06); }
.perk-card h3 { font-size: 1.65rem; font-weight: 700; line-height: 1.02; }
.perk-card p { color: var(--text); }
.invest-banner {
  display: flex; align-items: center; justify-content: center; gap: .8rem; text-align: left;
  margin-top: 2rem; padding: 1rem 1.3rem; border-color: var(--green); box-shadow: 0 0 24px rgba(140, 230, 60, .12);
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--white); font-size: clamp(1.1rem, 3vw, 1.5rem); line-height: 1.15;
}
.invest-banner svg { width: 30px; height: 30px; flex: none; color: var(--green); }
.extras-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin-top: 1rem; padding: .4rem; }
.extras-row li { display: flex; align-items: center; gap: .7rem; padding: .9rem .8rem; color: var(--white); font-weight: 600; font-size: .98rem; line-height: 1.2; }
.extras-row svg { width: 34px; height: 34px; flex: none; color: var(--green); }
.extras-row li:last-child { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .extras-row { grid-template-columns: repeat(5, 1fr); padding: .6rem; }
  .extras-row li { justify-content: center; }
  .extras-row li:last-child { grid-column: auto; }
  .extras-row li + li { border-left: 1px solid var(--line); }
}

/* ---------- Marquee ---------- */
.marquee-wrap { overflow: hidden; padding: 2rem 0 2.5rem; }
.marquee { background: var(--green); color: var(--black); overflow: hidden; padding: .9rem 0; transform: rotate(-2deg); margin: 0 -2rem; box-shadow: 0 0 40px rgba(140, 230, 60, .35); }
.marquee-track { display: flex; width: max-content; gap: 1.8rem; align-items: center; animation: scroll 30s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 4.5vw, 3rem); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; line-height: 1; }
.marquee-track svg { width: clamp(28px, 4vw, 40px); height: clamp(28px, 4vw, 40px); flex: none; }
@keyframes scroll { to { transform: translateX(-50%); } }

/* ---------- Apply ---------- */
.apply { padding: 4.5rem 0 4rem; }
.apply-head { display: grid; gap: 2rem; align-items: end; }
.apply-cta { display: flex; flex-direction: column; align-items: flex-start; }
.fine-print { margin-top: .9rem; font-size: .92rem; color: var(--muted); }
.steps { display: grid; gap: 1rem; margin-top: 3rem; }
.step { position: relative; padding: 1.5rem 1.4rem 1.6rem; }
.step-num { display: inline-grid; place-items: center; min-width: 54px; height: 54px; padding: 0 .5rem; border-radius: 10px; background: var(--green); color: var(--black); font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; margin-bottom: 1rem; }
.step h3 { font-size: 1.7rem; margin-bottom: .4rem; }
.step p { color: var(--text); }
.step-3 { border-color: var(--green); box-shadow: 0 0 30px rgba(140, 230, 60, .15); }
.step-flag { position: absolute; top: -20px; right: 18px; width: 28px; height: 36px; color: var(--white); }
@media (min-width: 900px) {
  .apply-head { grid-template-columns: 1.5fr 1fr; }
  .apply-cta { align-items: flex-end; text-align: right; }
  .steps { grid-template-columns: repeat(3, 1fr); align-items: end; position: relative; }
  /* ascending staircase */
  .step-1 { min-height: 210px; }
  .step-2 { min-height: 250px; }
  .step-3 { min-height: 290px; }
}

/* ---------- Resources ---------- */
.resources { padding: 3rem 0 4rem; }
.resource-grid { display: grid; gap: 1rem; margin-top: 2.4rem; }
@media (min-width: 760px) { .resource-grid { grid-template-columns: 1fr 1fr; } }
.resource-card { display: flex; flex-direction: column; gap: .7rem; text-decoration: none; padding: 1.8rem 1.6rem; }
.res-icon { width: 50px; height: 50px; color: var(--green); }
.resource-card h3 { font-size: 1.8rem; }
.resource-card p { color: var(--text); }
.res-link { margin-top: auto; padding-top: .6rem; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: .06em; text-transform: uppercase; color: var(--green); }
.res-link span { display: inline-block; transition: transform .25s var(--ease); }
.resource-card:hover .res-link span { transform: translateX(5px); }
/* ---------- Diamond calculator ---------- */
.resource-grid > * { min-width: 0; }
@media (min-width: 760px) { .resource-grid { align-items: start; } }
.calc-card { gap: 1rem; }
.calc-card:hover { transform: none; }
.js .calc-card.reveal.in:hover { transform: none; }
.calc-top { display: flex; gap: 1rem; align-items: flex-start; }
.calc-top .res-icon { flex: none; margin-top: .1rem; filter: drop-shadow(0 0 8px rgba(140, 230, 60, .4)); }
.calc-sub { color: var(--text); margin-top: .35rem; }
.calc { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; min-width: 0; }
.calc > * { min-width: 0; }
.calc-modes { min-inline-size: 0; }
.calc-input { width: 100%; }
.calc-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--gline); border-radius: 10px; padding: 4px; margin: 0; background: var(--black); }
.calc-mode { position: relative; cursor: pointer; }
.calc-mode input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.calc-mode span { display: block; text-align: center; padding: .6rem .4rem; line-height: 1.15; border-radius: 7px; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); transition: background .2s, color .2s; }
.calc-mode input:checked + span { background: var(--green); color: var(--black); box-shadow: 0 0 18px rgba(140, 230, 60, .35); }
.calc-mode input:focus-visible + span { outline: 3px solid var(--green); outline-offset: 2px; }
.calc-label { font-weight: 700; color: var(--white); font-size: .95rem; margin-top: .2rem; }
.calc-field { display: flex; align-items: center; gap: .6rem; border: 1.5px solid var(--gline); border-radius: 10px; background: var(--black); padding: 0 .9rem; transition: border-color .2s, box-shadow .2s; }
.calc-field:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(140, 230, 60, .2); }
.calc-prefix { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; color: var(--green); min-width: 1.4rem; text-align: center; }
.calc-input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--white); font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; padding: .55rem 0; outline: none; -moz-appearance: textfield; }
.calc-input::-webkit-outer-spin-button, .calc-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc-presets { display: flex; flex-wrap: wrap; gap: .5rem; }
.calc-presets button { cursor: pointer; border: 1px solid var(--gline); background: transparent; color: var(--white); border-radius: 999px; padding: .4rem .9rem; font-weight: 700; font-size: .9rem; font-family: var(--font-body); min-height: 36px; transition: border-color .2s, background .2s, color .2s; }
.calc-presets button:hover { border-color: var(--green); color: var(--green); }
.calc-presets button[aria-pressed="true"] { background: rgba(140, 230, 60, .15); border-color: var(--green); color: var(--green); }
.calc-result { display: grid; gap: .15rem; padding: 1rem 1.1rem; border-radius: 12px; border: 1px solid var(--green); background: linear-gradient(150deg, rgba(140, 230, 60, .12), rgba(140, 230, 60, .02)); box-shadow: 0 0 26px rgba(140, 230, 60, .12); }
.calc-result-label { font-family: var(--font-display); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .9rem; color: var(--muted); }
.calc-output { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 7vw, 3rem); line-height: 1.05; color: var(--green); text-shadow: 0 0 24px rgba(140, 230, 60, .35); overflow-wrap: anywhere; }
.calc-extra { color: var(--text); font-size: .92rem; }
.calc-help { color: var(--muted); font-size: .88rem; }
.calc-disclaimer { font-size: .82rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: .8rem; margin-top: auto; }

/* ---------- Closer ---------- */
.closer { padding: 1rem 0 5rem; }
.closer-card { display: grid; gap: 2rem; padding: 2.2rem 1.6rem; align-items: center; position: relative; overflow: hidden; }
.closer-card::after { content: ""; position: absolute; right: -60px; bottom: -80px; width: 340px; height: 340px; background: radial-gradient(circle, rgba(140, 230, 60, .14), transparent 65%); pointer-events: none; }
.closer-title { font-size: clamp(2.2rem, 6.5vw, 3.6rem); font-weight: 800; }
.closer-title span { display: block; }
.closer-copy p { margin-top: 1rem; max-width: 34rem; }
.closer-brand { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.1rem; position: relative; z-index: 1; }
.closer-logo { width: min(100%, 300px); height: auto; }
.slogan { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; color: var(--white); font-size: clamp(1.6rem, 4vw, 2.2rem); letter-spacing: .03em; line-height: 1; }
@media (min-width: 900px) { .closer-card { grid-template-columns: 1.3fr 1fr; padding: 3rem; } }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 3rem 0 2rem; background: #030303; }
.footer-inner { display: flex; flex-direction: column; gap: 2rem; }
.footer-logo { height: 54px; width: auto; }
.footer-tag { display: flex; align-items: center; gap: .6rem; margin-top: 1rem; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; letter-spacing: .14em; text-transform: uppercase; color: var(--white); }
.footer-tag svg { width: 24px; height: 24px; color: var(--green); }
.footer-links { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; }
.footer-links a { text-decoration: none; font-weight: 600; color: var(--muted); padding: .3rem 0; transition: color .2s; }
.footer-links a:hover { color: var(--green); }
.footer-legal { display: flex; flex-direction: column; gap: .3rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: .86rem; color: var(--muted); }
@media (min-width: 760px) {
  .footer-inner { flex-direction: row; justify-content: space-between; align-items: flex-start; }
  .footer-legal { flex-direction: row; justify-content: space-between; }
}

/* ---------- Scroll reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease), box-shadow .35s var(--ease), border-color .35s; }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal.in:hover { transition-delay: 0s !important; }
.js .creator.reveal.in:hover, .js .perk-card.reveal.in:hover, .js .runner.reveal.in:hover, .js .spotlight.reveal.in:hover, .js .step.reveal.in:hover, .js .resource-card.reveal.in:hover { transform: translateY(-6px); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .marquee-track { animation: none; }
}
@media (max-width: 420px) {
  .calc-card { padding: 1.4rem 1.1rem; }
  .calc-mode span { font-size: .9rem; letter-spacing: .03em; }
  .calc-top .res-icon { width: 40px; height: 40px; }
}