/* ============================================================
   JUGAZO — WEBSITE STYLESHEET (mockup)
   Design tokens follow Jugazo Brand Guidelines v2
   ============================================================ */

:root {
  --nocturne: #1E1533;
  --nocturne-soft: #2A1F45;
  --nocturne-softer: #362a54;
  --amatista: #8B4FE0;
  --amatista-dim: #6E3FB8;
  --verd: #2FBE7A;
  --grana: #6B2942;
  --chalk: #F7F5F2;
  --ink: #1B1B1F;
  --mist: #8D8798;

  --chalk-dim: #EFEBE5;
  --hairline: #E1DCE8;            /* 1px card borders on light (ToJo design system) */
  --border-light: var(--hairline);
  --text-muted: #5E5870;          /* labels, captions on light */
  --text-on-dark: #C4BCD6;        /* body copy on Nocturne */
  --text-muted-on-dark: #B7AECB;  /* secondary copy on Nocturne */
  --text-faint-on-dark: #9E93B4;  /* tertiary copy on Nocturne */
  --border-dark: rgba(247,245,242,0.12);

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --max-w: 1220px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --pad-section: clamp(4rem, 9vw, 7.5rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--chalk);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
.display { font-family: var(--font-display); }
.mono { font-family: var(--font-mono); }
.wrap { max-width: var(--max-w); margin: 0 auto; padding-left: 6vw; padding-right: 6vw; }
@media (min-width: 1400px) { .wrap { padding-left: 2rem; padding-right: 2rem; } }
section { position: relative; }
.section-pad { padding: var(--pad-section) 0; }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

.eyebrow {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--verd); display: inline-flex;
  align-items: center; gap: 0.55rem; font-weight: 600; margin-bottom: 1.25rem;
}
.eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--verd); flex-shrink: 0; }
.eyebrow.on-light { color: var(--amatista-dim); }
.eyebrow.on-light::before { background: var(--amatista); }
.eyebrow.grana { color: var(--grana); }
.eyebrow.grana::before { background: var(--grana); }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; line-height: 1.08; }
h1 { font-size: clamp(2.4rem, 5.4vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); }
p.lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--mist); max-width: 56ch; }

.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 3rem; }
.section-head .head-copy { max-width: 640px; }
.section-head p { color: var(--mist); margin-top: 0.9rem; font-size: 1.02rem; }

/* NAV */
.site-nav { position: sticky; top: 0; z-index: 100; background: rgba(30, 21, 51, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-dark); }
.nav-inner { max-width: var(--max-w); margin: 0 auto; padding: 1.1rem 6vw; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand-lockup { display: flex; align-items: center; gap: 0.6rem; color: var(--chalk); }
.brand-lockup .flash { width: 26px; height: 26px; flex-shrink: 0; }
.brand-lockup .word { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; }
.brand-lockup .word .z { color: var(--amatista); }
.nav-links { display: flex; align-items: center; gap: 2.1rem; }
.nav-links a { color: var(--text-on-dark); font-size: 0.92rem; font-weight: 500; transition: color 0.15s ease; }
.nav-links a:hover, .nav-links a:focus-visible { color: var(--chalk); }
.nav-links a.current { color: var(--verd); }
.nav-cta { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--amatista); color: #fff; padding: 0.6rem 1.15rem; border-radius: 999px; font-size: 0.88rem; font-weight: 600; white-space: nowrap; transition: background 0.15s ease, transform 0.15s ease; }
.nav-cta:hover { background: #9c63e5; transform: translateY(-1px); }
.nav-toggle { display: none; background: none; border: 1px solid var(--border-dark); border-radius: 8px; width: 40px; height: 40px; color: var(--chalk); font-size: 1.1rem; cursor: pointer; align-items: center; justify-content: center; }
.nav-mobile-panel { display: none; flex-direction: column; gap: 0.2rem; background: var(--nocturne); border-bottom: 1px solid var(--border-dark); padding: 0.5rem 6vw 1.5rem; }
.nav-mobile-panel a { color: var(--text-on-dark); padding: 0.85rem 0.2rem; border-bottom: 1px solid var(--border-dark); font-size: 1rem; font-weight: 500; }
.nav-mobile-panel a.current { color: var(--verd); }
.nav-mobile-panel .nav-cta { margin-top: 1rem; justify-content: center; }
body.nav-open .nav-mobile-panel { display: flex; }
@media (max-width: 880px) { .nav-links { display: none; } .nav-toggle { display: flex; } }

.flash-svg path { fill: var(--amatista); }
.flash-svg.verd path { fill: var(--verd); }
.flash-svg.chalk path { fill: var(--chalk); }
.flash-sweep-el { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.flash-sweep-el::before { content: ''; position: absolute; top: 0; left: -25%; width: 35%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.08), transparent); animation: sweep 3.2s ease-in-out 0.5s 1 both; }
@keyframes sweep { to { left: 130%; } }

/* HERO — brand illustration worked into the background */
.hero {
  background:
    linear-gradient(100deg, rgba(30,21,51,0.96) 0%, rgba(30,21,51,0.90) 26%, rgba(30,21,51,0.62) 46%, rgba(30,21,51,0.18) 68%, rgba(30,21,51,0) 100%),
    linear-gradient(0deg, rgba(30,21,51,0.9) 0%, rgba(30,21,51,0) 22%),
    url('../images/jugazo-hero-game-day-wide.webp');
  background-size: cover, cover, cover;
  background-position: center, center, center 75%;
  background-repeat: no-repeat;
  color: var(--chalk); padding: 7rem 0 6rem; position: relative; overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 55% 50% at 80% 10%, rgba(139,79,224,0.22), transparent 60%), radial-gradient(ellipse 45% 45% at 5% 95%, rgba(47,190,122,0.14), transparent 60%);
  pointer-events: none;
}
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 540px) minmax(0, 1fr); gap: 3.5rem; align-items: center; }
.hero h1 { margin-top: 0.4rem; }
.hero h1 .accent { color: var(--amatista); }
.hero .lede { color: var(--text-on-dark); margin-top: 1.4rem; }
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2.2rem; }

.btn { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.96rem; padding: 0.85rem 1.6rem; border-radius: 999px; transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease; cursor: pointer; border: 1px solid transparent; white-space: nowrap; }
.btn-primary { background: var(--amatista); color: #fff; }
.btn-primary:hover { background: #9c63e5; transform: translateY(-1px); }
.btn-ghost-dark { border-color: rgba(247,245,242,0.3); color: var(--chalk); }
.btn-ghost-dark:hover { border-color: var(--chalk); background: rgba(247,245,242,0.06); }
.btn-ghost-light { border-color: #d8d2e4; color: var(--ink); }
.btn-ghost-light:hover { border-color: var(--amatista); color: var(--amatista); }
.btn-verd { background: var(--verd); color: var(--nocturne); }
.btn-verd:hover { background: #3fd390; transform: translateY(-1px); }
.btn-lg { padding: 1rem 2rem; font-size: 1.02rem; }

.trust-strip { margin-top: 3.2rem; padding-top: 2rem; border-top: 1px solid var(--border-dark); display: flex; flex-wrap: wrap; gap: 1.6rem 2.4rem; }
.trust-strip .item { display: flex; align-items: center; gap: 0.55rem; font-size: 0.85rem; color: var(--text-muted-on-dark); font-family: var(--font-mono); }
.trust-strip .item svg { width: 15px; height: 15px; color: var(--verd); flex-shrink: 0; }


.phone-mock { position: relative; justify-self: end; width: min(250px, 90%); margin-right: -1.5rem; }
.phone-glow { position: absolute; inset: -55px -35px; background: radial-gradient(ellipse at center, rgba(15,10,28,0.6), rgba(15,10,28,0.25) 55%, transparent 72%); z-index: -1; filter: blur(6px); border-radius: 50%; }
.phone-frame { background: #0F0A1C; border-radius: 34px; padding: 12px; box-shadow: 0 40px 90px -20px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.08); }
.phone-frame img { border-radius: 24px; display: block; width: 100%; height: auto; }
.float-card { position: absolute; background: rgba(30,21,51,0.85); backdrop-filter: blur(8px); border: 1px solid var(--border-dark); border-radius: 14px; padding: 0.85rem 1.05rem; box-shadow: 0 20px 40px -14px rgba(0,0,0,0.55); }
.float-card .label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted-on-dark); margin-bottom: 0.25rem; }
.float-card .value { font-family: var(--font-mono); font-weight: 600; font-size: 1.35rem; color: var(--verd); }
.float-card.top { top: 6%; left: -14%; }
.float-card.bottom { bottom: 10%; right: -12%; }

@media (max-width: 1200px) and (min-width: 981px) { .hero-grid { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 2rem; } }
@media (max-width: 980px) {
  /* Narrow screens: the wide scene sits as a banner under the text instead of behind it. */
  .hero { background: var(--nocturne); padding-bottom: 0; }
  .hero-grid { grid-template-columns: 1fr; }
  .phone-mock { justify-self: center; margin-top: 1rem; }
  .float-card { display: none; }
  .hero::after { content: ''; display: block; position: relative; height: min(66.7vw, 440px); margin-top: 2.5rem; background: linear-gradient(180deg, var(--nocturne) 0%, rgba(30,21,51,0) 30%), url('../images/jugazo-hero-game-day-wide.webp') center 60% / cover no-repeat; }
}


/* OPPORTUNITY */
.opportunity { background: var(--chalk); }
.opportunity-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 3.5rem; align-items: start; }
.tool-chip-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.6rem; }
.tool-chip { font-family: var(--font-mono); font-size: 0.78rem; padding: 0.4rem 0.85rem; border: 1px solid var(--border-light); border-radius: 999px; color: var(--mist); background: #fff; }
.opportunity-copy p { color: #45414c; margin-bottom: 1.1rem; max-width: 60ch; }
.opportunity-copy p:last-child { margin-bottom: 0; }
.opportunity-copy strong { color: var(--ink); }
@media (max-width: 900px) { .opportunity-grid { grid-template-columns: 1fr; } }

/* MODULES */
.module-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.1rem; }
.module-grid .module-card { grid-column: span 3; }
.module-grid .module-card.featured { grid-column: span 6; }
.module-card { background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 1.7rem 1.6rem; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.module-card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -22px rgba(30,21,51,0.35); border-color: transparent; }
.module-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.1rem; }
.module-icon svg { width: 20px; height: 20px; }
.module-card h4 { font-size: 1.08rem; margin-bottom: 0.55rem; }
.module-card p { color: var(--mist); font-size: 0.93rem; }
.module-card:nth-child(3n+1) .module-icon { background: rgba(139,79,224,0.12); } .module-card:nth-child(3n+1) .module-icon svg { color: var(--amatista); }
.module-card:nth-child(3n+2) .module-icon { background: rgba(47,190,122,0.14); } .module-card:nth-child(3n+2) .module-icon svg { color: #1f9c60; }
.module-card:nth-child(3n+3) .module-icon { background: rgba(107,41,66,0.12); } .module-card:nth-child(3n+3) .module-icon svg { color: var(--grana); }
.module-card:nth-child(3n+1) .module-icon { background: rgba(139,79,224,0.12); } .module-card:nth-child(3n+1) .module-icon svg { color: var(--amatista); }
.module-card:nth-child(3n+2) .module-icon { background: rgba(47,190,122,0.14); } .module-card:nth-child(3n+2) .module-icon svg { color: #1f9c60; }
.module-card:nth-child(3n+3) .module-icon { background: rgba(107,41,66,0.12); } .module-card:nth-child(3n+3) .module-icon svg { color: var(--grana); }
.module-card:nth-child(3n+1) .module-icon { background: rgba(139,79,224,0.12); } .module-card:nth-child(3n+1) .module-icon svg { color: var(--amatista); }
.module-card:nth-child(3n+2) .module-icon { background: rgba(47,190,122,0.14); } .module-card:nth-child(3n+2) .module-icon svg { color: #1f9c60; }
.module-card:nth-child(3n+3) .module-icon { background: rgba(107,41,66,0.12); } .module-card:nth-child(3n+3) .module-icon svg { color: var(--grana); }
@media (max-width: 980px) { .module-grid { grid-template-columns: repeat(2, 1fr); } .module-grid .module-card, .module-grid .module-card.featured { grid-column: auto; } }
@media (max-width: 620px) { .module-grid { grid-template-columns: 1fr; } }
.fit-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.1rem; }
.fit-card { background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: 1.8rem; }
.fit-card.muted { background: transparent; }
.fit-card h4 { font-size: 1.1rem; margin-bottom: 0.9rem; }
.fit-card ul { display: flex; flex-direction: column; gap: 0.6rem; }
.fit-card li { padding-left: 1.4rem; position: relative; color: #34313a; font-size: 0.95rem; }
.fit-card li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--amatista); }
.fit-card p { margin-top: 1rem; color: var(--text-muted); font-size: 0.9rem; }
@media (max-width: 900px) { .fit-grid { grid-template-columns: 1fr; } }

/* SPOTLIGHT */
.spotlight { background: var(--nocturne); color: var(--chalk); overflow: hidden; }
.spotlight-row { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; padding: 3.4rem 0; border-bottom: 1px solid var(--border-dark); }
.spotlight-row:last-child { border-bottom: none; padding-bottom: 0; }
.spotlight-row:first-child { padding-top: 0; }
.spotlight-row.reverse .spotlight-copy { order: 2; }
.spotlight-row.reverse .spotlight-media { order: 1; }
.spotlight-copy .tag { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--verd); margin-bottom: 0.9rem; display: block; }
.spotlight-copy h3 { margin-bottom: 0.9rem; font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.spotlight-copy p { color: var(--text-on-dark); margin-bottom: 1.3rem; }
.spotlight-copy ul { display: flex; flex-direction: column; gap: 0.7rem; }
.spotlight-copy li { display: flex; gap: 0.65rem; align-items: flex-start; font-size: 0.94rem; color: #E4DFEE; }
.spotlight-copy li svg { width: 15px; height: 15px; color: var(--verd); margin-top: 0.25rem; flex-shrink: 0; }
.spotlight-media { display: flex; justify-content: center; }
.spotlight-media .frame { border-radius: 22px; overflow: hidden; border: 1px solid var(--border-dark); box-shadow: 0 30px 70px -25px rgba(0,0,0,0.55); max-width: 300px; }
.spotlight-media img { width: 100%; }
@media (max-width: 880px) {
  .spotlight-row, .spotlight-row.reverse { grid-template-columns: 1fr; }
  .spotlight-row.reverse .spotlight-copy, .spotlight-row.reverse .spotlight-media { order: initial; }
  .spotlight-media { order: -1; }
}

/* SAFETY */
.safety { background: var(--chalk); position: relative; }
.safety-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: center; }
.safety-phones { display: flex; gap: 1.2rem; justify-content: center; }
.safety-phones img { width: min(220px, 44%); height: auto; }
.safety-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.6rem; }
.safety-item { display: flex; gap: 1.1rem; }
.safety-num { font-family: var(--font-mono); font-weight: 600; color: var(--grana); font-size: 0.85rem; flex-shrink: 0; width: 28px; }
.safety-item h4 { font-size: 1rem; margin-bottom: 0.35rem; }
.safety-item p { color: var(--mist); font-size: 0.93rem; }
@media (max-width: 900px) { .safety-grid { grid-template-columns: 1fr; } }

/* COMPARISON TABLE */
.compare-wrap { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--border-light); }
table.compare { width: 100%; border-collapse: collapse; background: #fff; min-width: 720px; }
table.compare th, table.compare td { text-align: left; padding: 1rem 1.3rem; font-size: 0.92rem; border-bottom: 1px solid var(--border-light); }
table.compare thead th { font-family: var(--font-display); font-weight: 600; color: var(--ink); background: var(--chalk-dim); font-size: 0.88rem; }
table.compare thead th:first-child { border-top-left-radius: var(--radius-md); }
table.compare thead th:last-child { border-top-right-radius: var(--radius-md); }
table.compare td:first-child { color: var(--ink); font-weight: 500; }
table.compare td.yes { color: #1f9c60; font-weight: 600; font-family: var(--font-mono); font-size: 0.85rem; }
table.compare td.partial { color: var(--amatista-dim); font-family: var(--font-mono); font-size: 0.85rem; }
table.compare td.no { color: var(--mist); font-family: var(--font-mono); font-size: 0.85rem; }
table.compare th.hero-col { background: var(--nocturne); color: var(--chalk); }
table.compare tbody tr:last-child td { border-bottom: none; }

/* ROADMAP */
.roadmap { background: var(--nocturne); color: var(--chalk); }
.roadmap-track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.2rem; position: relative; }
.roadmap-step { background: var(--nocturne-soft); border-radius: var(--radius-md); padding: 1.6rem 1.4rem; border: 1px solid var(--border-dark); position: relative; }
.roadmap-step.active { border-color: var(--verd); background: linear-gradient(160deg, var(--nocturne-softer), var(--nocturne-soft)); }
.roadmap-step .num { font-family: var(--font-mono); color: var(--verd); font-size: 0.8rem; margin-bottom: 0.9rem; display: block; }
.roadmap-step h4 { font-size: 1.02rem; margin-bottom: 0.4rem; }
.roadmap-step p { color: var(--text-muted-on-dark); font-size: 0.87rem; }
.roadmap-step .pill { display: inline-block; margin-top: 0.8rem; font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.25rem 0.6rem; border-radius: 999px; background: rgba(47,190,122,0.15); color: var(--verd); }
@media (max-width: 900px) { .roadmap-track { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .roadmap-track { grid-template-columns: 1fr; } }

/* CTA BAND */
.cta-band { background: linear-gradient(120deg, var(--amatista) 0%, var(--amatista-dim) 100%); color: #fff; border-radius: var(--radius-lg); padding: clamp(2.4rem, 5vw, 4rem); display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; position: relative; overflow: hidden; }
.cta-band::after { content: ''; position: absolute; width: 320px; height: 320px; background: rgba(255,255,255,0.08); border-radius: 50%; top: -140px; right: -100px; }
.cta-band h2 { color: #fff; max-width: 30ch; }
.cta-band .lede { color: rgba(255,255,255,0.85); }
.cta-band .btn-primary { background: #fff; color: var(--amatista); }
.cta-band .btn-primary:hover { background: var(--chalk); }

/* FOOTER */
footer.site-footer { background: var(--nocturne); color: var(--text-muted-on-dark); padding: 4.5rem 0 2.5rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid var(--border-dark); }
.footer-brand .brand-lockup { margin-bottom: 0.35rem; }
.footer-brand .by-tojo { display: block; margin: 0 0 1rem 2.15rem; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted-on-dark); }
.footer-brand .by-tojo b { font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; letter-spacing: 0; text-transform: none; color: var(--chalk); }
.footer-brand p { font-size: 0.9rem; max-width: 32ch; color: var(--text-faint-on-dark); }
.footer-col h5 { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--verd); margin-bottom: 1.1rem; }
.footer-col ul { display: flex; flex-direction: column; gap: 0.7rem; }
.footer-col a { font-size: 0.9rem; color: var(--text-on-dark); transition: color 0.15s ease; }
.footer-col a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding-top: 2rem; font-size: 0.82rem; color: #7A6F91; }
@media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* PAGE HERO */
.page-hero { background: var(--nocturne); color: var(--chalk); padding: 6rem 0 4.5rem; position: relative; overflow: hidden; }
.page-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 60% at 85% 0%, rgba(139,79,224,0.25), transparent 60%); pointer-events: none; }
.page-hero .lede { color: var(--text-on-dark); margin-top: 1.2rem; }
.page-hero .crumb { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-faint-on-dark); margin-bottom: 1rem; display: block; }

/* PROGRAM HERO — same illustration treatment, warmer/heritage tone */
.program-hero {
  background:
    linear-gradient(100deg, var(--nocturne) 0%, var(--nocturne) 30%, rgba(30,21,51,0.85) 48%, rgba(30,21,51,0.5) 68%, rgba(30,21,51,0.22) 100%),
    linear-gradient(0deg, var(--nocturne) 0%, rgba(30,21,51,0.1) 25%, rgba(30,21,51,0.5) 100%),
    url('../images/jugazo-hero-game-day.webp');
  background-size: cover, cover, cover;
  background-position: center, center, 85% top;
  background-repeat: no-repeat;
  color: var(--chalk); padding: 6.5rem 0 5rem; position: relative; overflow: hidden;
}
.program-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 55% at 15% 10%, rgba(107,41,66,0.35), transparent 60%), radial-gradient(ellipse 40% 45% at 90% 90%, rgba(139,79,224,0.18), transparent 60%);
  pointer-events: none;
}
@media (max-width: 900px) {
  .program-hero { background: linear-gradient(180deg, var(--nocturne) 0%, rgba(30,21,51,0.9) 45%, rgba(30,21,51,0.88) 100%), url('../images/jugazo-hero-game-day.webp'); background-size: cover, cover; background-position: center, 70% top; }
}

/* GENERIC CONTENT */
.prose { max-width: 74ch; }
.prose p { margin-bottom: 1.2rem; color: #34313a; }
.prose h2, .prose h3 { margin-top: 2.6rem; margin-bottom: 1rem; }
.prose ul { margin: 1rem 0 1.4rem 0; display: flex; flex-direction: column; gap: 0.6rem; }
.prose li { padding-left: 1.4rem; position: relative; color: #34313a; }
.prose li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--amatista); }

.pillar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.pillar-card { background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 1.6rem 1.4rem; }
.pillar-card .num { font-family: var(--font-mono); color: var(--amatista); font-size: 0.8rem; margin-bottom: 0.8rem; display: block; }
.pillar-card h4 { font-size: 1rem; margin-bottom: 0.5rem; }
.pillar-card p { color: var(--mist); font-size: 0.88rem; }
@media (max-width: 980px) { .pillar-grid { grid-template-columns: repeat(2, 1fr); } }
.pillar-grid.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .pillar-grid.three { grid-template-columns: 1fr; } }

/* ToJo Football (parent brand) section on About — Verd accent only, never Amatista */
.tojo-section { background: var(--nocturne); color: var(--chalk); }
.tojo-section h2 { color: var(--chalk); }
.value-list { margin-top: 2.2rem; border-top: 1px solid var(--border-dark); }
.value-item { display: grid; grid-template-columns: 3rem minmax(0, 14rem) minmax(0, 1fr); gap: 1rem; align-items: baseline; padding: 1.2rem 0; border-bottom: 1px solid var(--border-dark); }
.value-item .num { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted-on-dark); }
.value-item h4 { font-size: 1.2rem; color: var(--chalk); }
.value-item p { color: var(--text-on-dark); font-size: 0.95rem; }
@media (max-width: 900px) { .value-item { grid-template-columns: 2.4rem 1fr; } .value-item p { grid-column: 2; } }
@media (max-width: 560px) { .pillar-grid { grid-template-columns: 1fr; } }

.founder-block { display: grid; grid-template-columns: 0.4fr 0.6fr; gap: 3rem; align-items: start; }
.founder-card { background: var(--nocturne); color: var(--chalk); border-radius: var(--radius-lg); padding: 2.2rem; }
.founder-card .flash-svg { width: 40px; height: 40px; margin-bottom: 1.4rem; }
.founder-card p { color: var(--text-on-dark); font-size: 0.92rem; margin-bottom: 1rem; }
.founder-card p:last-child { margin-bottom: 0; }
.founder-card strong { color: #fff; }
@media (max-width: 900px) { .founder-block { grid-template-columns: 1fr; } }


/* PROGRAM PAGE SPECIFIC */

.tier-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.tier-card { background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 2rem; }
.tier-card.highlight { border: 1.5px solid var(--amatista); position: relative; }
.tier-card .kicker { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--grana); margin-bottom: 0.6rem; display: block; }
.tier-card h3 { margin-bottom: 0.8rem; }
.tier-card p { color: var(--mist); font-size: 0.93rem; margin-bottom: 1.2rem; }
.tier-card ul { display: flex; flex-direction: column; gap: 0.55rem; }
.tier-card li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.9rem; color: #34313a; }
.tier-card li svg { width: 14px; height: 14px; color: var(--verd); margin-top: 0.3rem; flex-shrink: 0; }
@media (max-width: 860px) { .tier-grid { grid-template-columns: 1fr; } }

.rate-timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.2rem; }
.rate-step { background: var(--nocturne-soft); border-radius: var(--radius-md); border: 1px solid var(--border-dark); padding: 1.6rem; text-align: center; }
.rate-step .yr { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted-on-dark); text-transform: uppercase; letter-spacing: 0.08em; }
.rate-step .pct { font-family: var(--font-mono); font-size: 2.1rem; font-weight: 600; color: var(--verd); margin: 0.5rem 0 0.2rem; }
.rate-step .desc { font-size: 0.8rem; color: var(--text-muted-on-dark); }
@media (max-width: 700px) { .rate-timeline { grid-template-columns: 1fr; } }

.ask-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 1.5rem; }
.ask-card { background: var(--chalk); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 1.5rem; }
.ask-card h4 { font-size: 0.98rem; margin-bottom: 0.5rem; }
.ask-card p { color: var(--mist); font-size: 0.87rem; }
@media (max-width: 860px) { .ask-list { grid-template-columns: 1fr; } }

.steps-list { display: flex; flex-direction: column; gap: 0; }
.step-row { display: grid; grid-template-columns: 60px 1fr; gap: 1.4rem; padding: 1.6rem 0; border-bottom: 1px solid var(--border-light); }
.step-row:last-child { border-bottom: none; }
.step-row .step-num { font-family: var(--font-mono); font-weight: 600; font-size: 1.1rem; color: var(--amatista); background: rgba(139,79,224,0.1); width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.step-row h4 { font-size: 1.02rem; margin-bottom: 0.4rem; }
.step-row p { color: var(--mist); font-size: 0.92rem; }

/* CONTACT PAGE */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.contact-form { background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 2.2rem; }
.form-row { margin-bottom: 1.3rem; }
.form-row label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.45rem; color: var(--ink); }
.form-row .req { color: var(--grana); }
.form-row input, .form-row select, .form-row textarea { width: 100%; border: 1px solid var(--border-light); border-radius: 10px; padding: 0.8rem 0.95rem; font-family: var(--font-body); font-size: 0.95rem; background: var(--chalk); color: var(--ink); transition: border-color 0.15s ease, background 0.15s ease; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: var(--amatista); background: #fff; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-note { font-size: 0.82rem; color: var(--mist); margin-top: 1rem; }
.form-success { display: none; background: rgba(47,190,122,0.12); border: 1px solid rgba(47,190,122,0.35); color: #1f9c60; border-radius: 10px; padding: 1rem 1.2rem; font-size: 0.92rem; margin-bottom: 1.3rem; }
.form-success.show { display: block; }
.contact-info-card { background: var(--nocturne); color: var(--chalk); border-radius: var(--radius-lg); padding: 2.2rem; margin-bottom: 1.4rem; }
.contact-info-card h3 { margin-bottom: 0.9rem; }
.contact-info-card p { color: var(--text-on-dark); font-size: 0.93rem; margin-bottom: 1rem; }
.contact-info-card a.contact-link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--verd); font-family: var(--font-mono); font-size: 0.9rem; font-weight: 600; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } .form-row-2 { grid-template-columns: 1fr; } }

/* LEGAL PAGES */
.legal-banner { background: #FBF0E4; border: 1px solid #EAD3AF; color: #7A5320; border-radius: var(--radius-md); padding: 1.3rem 1.6rem; font-size: 0.9rem; margin-bottom: 3rem; display: flex; gap: 0.9rem; align-items: flex-start; }
.legal-banner svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 0.15rem; color: #B8791E; }
.legal-banner strong { display: block; margin-bottom: 0.25rem; color: #5C3F16; }
.legal-layout { display: grid; grid-template-columns: 240px 1fr; gap: 3.5rem; align-items: start; }
.legal-toc { position: sticky; top: 100px; background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 1.4rem; }
.legal-toc h5 { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mist); margin-bottom: 0.9rem; }
.legal-toc ul { display: flex; flex-direction: column; gap: 0.55rem; }
.legal-toc a { font-size: 0.85rem; color: #45414c; }
.legal-toc a:hover { color: var(--amatista); }
.legal-body h2 { font-size: 1.35rem; margin-top: 2.6rem; margin-bottom: 1rem; scroll-margin-top: 100px; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 { font-size: 1.05rem; margin-top: 1.6rem; margin-bottom: 0.7rem; }
.legal-body p { color: #3c3742; margin-bottom: 1rem; font-size: 0.96rem; }
.legal-body ul { margin: 0.6rem 0 1.2rem 0; display: flex; flex-direction: column; gap: 0.5rem; }
.legal-body li { padding-left: 1.3rem; position: relative; color: #3c3742; font-size: 0.95rem; }
.legal-body li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background: var(--mist); }
.legal-body .meta { font-family: var(--font-mono); font-size: 0.8rem; color: var(--mist); margin-bottom: 2rem; display: block; }
.legal-fill { background: #F1ECF9; color: var(--amatista-dim); padding: 0.1rem 0.4rem; border-radius: 4px; font-family: var(--font-mono); font-size: 0.86em; }
@media (max-width: 980px) { .legal-layout { grid-template-columns: 1fr; } .legal-toc { position: static; } }
.legal-index-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.legal-doc-card { background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 1.8rem; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.legal-doc-card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -24px rgba(30,21,51,0.3); }
.legal-doc-card .tag2 { font-family: var(--font-mono); font-size: 0.7rem; color: var(--mist); text-transform: uppercase; letter-spacing: 0.06em; }
.legal-doc-card h3 { margin: 0.7rem 0 0.6rem; font-size: 1.05rem; }
.legal-doc-card p { color: var(--mist); font-size: 0.88rem; margin-bottom: 1.1rem; }
.legal-doc-card .go { color: var(--amatista); font-weight: 600; font-size: 0.88rem; display: inline-flex; align-items: center; gap: 0.4rem; }
@media (max-width: 900px) { .legal-index-grid { grid-template-columns: 1fr; } }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

.center { text-align: center; }
.stack-lg > * + * { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.divider { height: 1px; background: var(--border-light); border: none; margin: 3rem 0; }
@media (max-width: 980px) { .pillar-grid, .ask-list { grid-template-columns: 1fr 1fr; } }


/* One-line section headers (desktop); wrap normally on narrow screens */
.section-head .head-copy.wide { max-width: none; width: 100%; }
@media (min-width: 900px) { .section-head .head-copy.wide h2 { white-space: nowrap; font-size: clamp(1.6rem, 2.6vw, 2.3rem); } }

/* Roadmap: upcoming milestone pill */
.roadmap-step .pill.upcoming { background: rgba(255,255,255,0.08); color: var(--text-on-dark); }

/* About: dictionary-style definition card */
.definition .def-word { font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; color: #fff; line-height: 1.1; margin-bottom: 0.4rem; }
.definition .def-meta { font-size: 0.95rem; margin-bottom: 1.2rem; }
.definition .def-pron { font-family: var(--font-mono); color: var(--text-on-dark); }
.definition .def-meta em { color: var(--text-muted-on-dark); }
.definition .def-body { font-size: 1.1rem; color: #fff; border-left: 4px solid var(--amatista); padding-left: 1rem; }

/* About: Why ToJo exists statement */
.why-statement { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 3.6vw, 2.8rem); line-height: 1.15; margin-top: 1rem; }
.why-question { font-size: 1.2rem; font-style: italic; color: var(--text-muted); margin-top: 1.2rem; }

p.lede.wide { max-width: none; }
.founder-block .prose h2 { margin-top: 0; }
@media (min-width: 900px) { .why-statement { white-space: nowrap; } }
.program-hero .lede { margin-top: 1.1rem; }