/* Extracted from index.html — page-specific overrides on top of base.css */

/* ── Brain Hero ───────────────────────────────────────────── */
.hero{
  position:relative;
  height:100vh;min-height:620px;
  display:flex;align-items:center;   /* vertically centre text */
  overflow:hidden;
  background:transparent;
}

/* Full-viewport 3D canvas — brain bleeds edge to edge on right */
.hero-brain-canvas{
  position:absolute;
  left:40%;right:0;
  top:0;bottom:0;
  z-index:1;
  overflow:hidden;
  cursor:grab;
}
.hero-brain-canvas:active{ cursor:grabbing; }

/* Gradient fade on left edge — blends brain into dark bg */
.hero-brain-canvas::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(
    to right,
    var(--bg) 0%,
    rgba(11,10,9,0.8) 12%,
    transparent 42%
  );
  z-index:4;
  pointer-events:none;
}
/* Bottom fade */
.hero-brain-canvas::after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:0;height:28%;
  background:linear-gradient(to bottom, transparent, var(--bg));
  z-index:4;
  pointer-events:none;
}

/* Left text column — headline on LEFT */
.hero-content{
  position:relative;
  z-index:5;
  padding:0 3rem 0 3.5rem;
  max-width:520px;
}

/* BIGGER HEADLINE — the key request */
.hero h1{
  font-size:clamp(3.6rem,8vw,6.2rem);
  font-weight:900;
  line-height:0.96;
  letter-spacing:-0.04em;
  color:var(--white);
  text-transform:uppercase;
  margin-bottom:1.3rem;
}
.hero-desc{
  font-size:0.88rem;color:var(--muted);
  max-width:380px;line-height:1.8;
  margin-bottom:1.8rem;
}
.hero-actions{display:flex;gap:0.75rem;flex-wrap:wrap;}

/* Neuro legend — shows which colour = which subject */
.hero-legend{
  display:flex;gap:1rem;flex-wrap:wrap;
  margin-bottom:1.8rem;
}
.hero-legend-item{
  display:flex;align-items:center;gap:0.35rem;
  font-size:0.6rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--muted);
}
.hero-legend-dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
  box-shadow:0 0 6px currentColor;
}

.scroll-hint{
  position:absolute;bottom:1.75rem;left:50%;
  transform:translateX(-50%);z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:0.35rem;opacity:0.28;
}
.scroll-hint span{font-size:0.58rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--white);}
.scroll-line{width:1px;height:36px;background:linear-gradient(to bottom,var(--white),transparent);animation:scrollDown 1.8s ease-in-out infinite;}
@keyframes scrollDown{
  0%  {transform:scaleY(0);transform-origin:top;opacity:0;}
  50% {transform:scaleY(1);transform-origin:top;opacity:1;}
  100%{transform:scaleY(1);transform-origin:bottom;opacity:0;}
}
.stats-strip{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--s1);display:flex;justify-content:center;flex-wrap:wrap;gap:0;}
.stat-strip-item{padding:1.1rem 2.5rem;text-align:center;border-right:1px solid var(--border);}
.stat-strip-item:last-child{border-right:none;}
.stat-strip-num{font-size:1.5rem;font-weight:900;color:var(--violet-bright);display:block;letter-spacing:-0.02em;}
.stat-strip-label{font-size:0.62rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);}
.full-section{padding:5rem 3rem;max-width:1100px;margin:0 auto;position:relative;z-index:2;}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);}
.feat-card{background:var(--s1);padding:1.75rem;transition:background 0.15s;}
.feat-card:hover{background:var(--s2);}
.feat-icon{width:36px;height:36px;background:var(--gold-dim);border:1px solid var(--gold-border);display:flex;align-items:center;justify-content:center;font-size:0.85rem;font-weight:700;color:var(--violet-bright);margin-bottom:1rem;}
.feat-card h3{font-size:0.88rem;font-weight:600;color:var(--white);margin-bottom:0.4rem;letter-spacing:-0.01em;}
.feat-card p{font-size:0.78rem;color:var(--muted);line-height:1.65;}
.feat-tag{display:inline-block;margin-top:0.75rem;font-size:0.58rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--violet-bright);background:var(--gold-dim);padding:0.15rem 0.5rem;}
.tracks-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:0.75rem;}
.track-card{background:var(--s2);border:1px solid var(--border);padding:1.25rem 1rem;text-align:center;transition:all 0.15s;}
.track-card:hover{border-color:var(--gold-border);}
.track-abbr{font-size:0.95rem;font-weight:900;color:var(--violet-bright);margin-bottom:0.3rem;letter-spacing:0.02em;}
.track-name{font-size:0.78rem;font-weight:500;color:var(--white);margin-bottom:0.2rem;}
.track-subs{font-size:0.68rem;color:var(--muted);}
.steps{position:relative;margin-top:1.5rem;}
.steps::before{content:'';position:absolute;left:19px;top:0;bottom:0;width:1px;background:var(--border);}
.step{display:flex;gap:1.25rem;padding:1.25rem 0;}
.step-num{width:38px;height:38px;flex-shrink:0;background:var(--black);border:1px solid var(--gold-border);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.7rem;font-weight:700;color:var(--violet-bright);position:relative;z-index:1;}
.step h3{font-size:0.88rem;font-weight:600;color:var(--white);margin-bottom:0.25rem;padding-top:0.55rem;}
.step p{font-size:0.8rem;color:var(--muted);line-height:1.65;}
.story-card{background:var(--s2);border:1px solid var(--border);padding:2.25rem;position:relative;overflow:hidden;}
.story-card::after{content:'M²';position:absolute;right:1.5rem;top:0.5rem;font-size:7rem;font-weight:900;color:rgba(246,161,92,0.04);line-height:1;pointer-events:none;}
.story-card p{font-size:0.88rem;color:var(--muted);line-height:1.8;max-width:600px;}
.story-card p+p{margin-top:0.9rem;}
.story-card strong{color:var(--violet-bright);font-weight:500;}
.divider{height:1px;background:var(--border);}
.story-video{position:relative;width:100%;padding-top:56.25%;margin:1.6rem 0;background:#000;border:1px solid var(--border);}
.story-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.story-video-credit{font-size:0.62rem;letter-spacing:0.04em;color:var(--dim,var(--muted));margin-top:0.4rem;opacity:0.7;}

/* ── SCIENCE BAND ── */
.science-band{
  background:var(--s1);border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:4.5rem 3rem;position:relative;z-index:2;
}
.science-inner{max-width:1100px;margin:0 auto;}
.science-head{max-width:640px;margin-bottom:2.25rem;}
.science-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);}
.science-card{background:var(--bg);padding:1.5rem 1.6rem;}
.science-card-label{font-size:0.6rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--violet-bright);margin-bottom:0.6rem;}
.science-card p{font-size:0.8rem;color:var(--muted);line-height:1.75;}
.science-card p strong{color:var(--text);font-weight:600;}

/* ── FLAGSHIP SHOWCASE ── */
.flagship-intro{max-width:720px;margin-bottom:1rem;}
.flagship-row{
  display:grid;grid-template-columns:1.02fr 0.98fr;gap:3.5rem;align-items:center;
  padding:4rem 0;border-bottom:1px solid var(--border);
}
.flagship-row:last-of-type{border-bottom:none;}
.flagship-row.reverse .flagship-visual{order:2;}
.flagship-row.reverse .flagship-text{order:1;}
.flagship-num{font-size:0.62rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--violet-bright);margin-bottom:0.75rem;display:flex;align-items:center;gap:0.6rem;}
.flagship-num::after{content:'';flex:1;height:1px;background:var(--border);}
.flagship-text h3{font-family:var(--font-display);font-size:clamp(1.55rem,2.6vw,2.05rem);font-weight:560;color:var(--white);letter-spacing:-0.01em;line-height:1.14;margin-bottom:1rem;}
.flagship-text h3 em{color:var(--violet-bright);font-style:italic;}
.flagship-text > p{font-size:0.86rem;color:var(--muted);line-height:1.85;margin-bottom:1.1rem;}
.flagship-principle{
  display:flex;gap:0.6rem;align-items:flex-start;
  border-left:2px solid var(--gold-border);background:var(--gold-dim);
  padding:0.65rem 0.9rem;font-size:0.75rem;color:var(--muted);line-height:1.6;margin-bottom:1.4rem;
}
.flagship-principle b{color:var(--violet-bright);font-weight:700;letter-spacing:0.02em;white-space:nowrap;}
.flagship-visual{
  background:var(--s1);border:1px solid var(--border);
  padding:1.6rem;position:relative;min-height:320px;
  display:flex;flex-direction:column;justify-content:center;
}
.flagship-visual::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 30% 0%,rgba(246,161,92,0.06),transparent 60%);
}

/* Mock — Focus Lock */
.mock-lock{position:relative;z-index:1;border:1px solid var(--border2);background:var(--black);}
.mock-lock-top{display:flex;align-items:center;gap:0.4rem;padding:0.6rem 0.8rem;border-bottom:1px solid var(--border);}
.mock-dot{width:7px;height:7px;border-radius:50%;background:var(--dim);}
.mock-url{margin-left:0.5rem;font-size:0.62rem;color:var(--muted);font-family:monospace;}
.mock-lock-body{padding:1.6rem 1.4rem;text-align:center;}
.mock-lock-icon{width:38px;height:38px;margin:0 auto 1rem;border:1px solid var(--gold-border);background:var(--gold-dim);display:flex;align-items:center;justify-content:center;color:var(--violet-bright);animation:mockPulse 2.4s ease-in-out infinite;}
@keyframes mockPulse{0%,100%{box-shadow:0 0 0 0 rgba(246,161,92,0.25);}50%{box-shadow:0 0 0 10px rgba(246,161,92,0);}}
.mock-lock-title{font-size:0.88rem;font-weight:700;color:var(--white);margin-bottom:0.3rem;}
.mock-lock-sub{font-size:0.68rem;color:var(--muted);margin-bottom:1.2rem;}
.mock-chip-row{display:flex;flex-wrap:wrap;gap:0.4rem;justify-content:center;margin-bottom:1.2rem;}
.mock-chip{font-size:0.62rem;padding:0.3rem 0.6rem;border:1px solid var(--border2);white-space:nowrap;}
.mock-chip.allow{color:var(--success);border-color:rgba(74,222,128,0.3);background:rgba(74,222,128,0.06);}
.mock-chip.block{color:var(--danger);border-color:rgba(248,113,113,0.25);background:rgba(248,113,113,0.05);}
.mock-unlock{font-size:0.62rem;color:var(--dim);border-top:1px solid var(--border);padding-top:0.9rem;line-height:1.6;}

/* Mock — RevMGrid */
.mock-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:0.6rem;margin-bottom:0.9rem;}
.mock-tile{background:var(--black);border:1px solid var(--border2);padding:1rem 0.8rem;display:flex;flex-direction:column;align-items:center;gap:0.5rem;position:relative;}
.mock-tile.speaking{border-color:var(--gold-border);}
.mock-avatar{width:34px;height:34px;border-radius:50%;background:var(--s3);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:0.72rem;font-weight:700;color:var(--violet-bright);}
.mock-tile-name{font-size:0.62rem;color:var(--muted);}
.mock-wave{position:absolute;top:0.5rem;right:0.5rem;width:16px;height:10px;background:repeating-linear-gradient(90deg,var(--violet-bright) 0 2px,transparent 2px 4px);opacity:0.7;animation:mockWave 1s ease-in-out infinite;}
@keyframes mockWave{0%,100%{opacity:0.35;}50%{opacity:0.9;}}
.mock-tile.dnd .mock-tile-name{color:var(--danger);}
.mock-leaderboard{position:relative;z-index:1;text-align:center;font-size:0.68rem;color:var(--violet-bright);border-top:1px solid var(--border);padding-top:0.9rem;}

/* Mock — Partners */
.mock-swipe{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:1rem;}
.mock-swipe-card{width:100%;max-width:260px;background:var(--black);border:1px solid var(--border2);padding:1.5rem 1.25rem;text-align:center;}
.mock-swipe-avatar{width:46px;height:46px;border-radius:50%;background:var(--s3);border:1px solid var(--gold-border);display:flex;align-items:center;justify-content:center;font-size:0.9rem;font-weight:700;color:var(--violet-bright);margin:0 auto 0.75rem;}
.mock-swipe-name{font-size:0.82rem;font-weight:600;color:var(--white);margin-bottom:0.2rem;}
.mock-compat{font-size:0.68rem;color:var(--violet-bright);margin-bottom:0.85rem;}
.mock-swipe-tags{display:flex;flex-wrap:wrap;gap:0.35rem;justify-content:center;}
.mock-swipe-tags span{font-size:0.6rem;color:var(--muted);border:1px solid var(--border2);padding:0.22rem 0.5rem;}
.mock-swipe-actions{display:flex;gap:0.9rem;}
.mock-swipe-actions button{width:38px;height:38px;border-radius:50%;border:1px solid var(--border2);background:var(--black);color:var(--muted);font-size:0.95rem;cursor:default;}
.mock-swipe-actions .mock-check{color:var(--violet-bright);border-color:var(--gold-border);}

@media(max-width:768px){
  .science-grid{grid-template-columns:1fr;}
  .flagship-row,.flagship-row.reverse{grid-template-columns:1fr;gap:1.75rem;padding:2.75rem 0;}
  .flagship-row.reverse .flagship-visual,.flagship-row.reverse .flagship-text{order:0;}
  .science-band{padding:3rem 1.5rem;}
}
@media(prefers-reduced-motion:reduce){
  .mock-lock-icon,.mock-wave{animation:none!important;}
}

/* ── BENTO GRID ── */
.bento-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  grid-auto-rows:minmax(140px,auto);grid-auto-flow:dense;
  gap:1px;background:var(--border);border:1px solid var(--border);
}
.bento-card{
  background:var(--s1);padding:1.75rem;position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  opacity:0;transform:translateY(18px);
  will-change:transform,opacity;
}
.bento-card.in-view{animation:bentoIn 0.65s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--d,0ms);}
@keyframes bentoIn{from{opacity:0;transform:translateY(18px) scale(0.98);}to{opacity:1;transform:translateY(0) scale(1);}}
.bento-card.in-view:hover{transition:box-shadow 0.25s ease,background 0.25s ease;}
.bento-card:hover{background:var(--s2);box-shadow:inset 0 0 0 1px var(--gold-border),0 20px 46px rgba(0,0,0,0.4);z-index:3;}
.bento-card .flagship-num{margin-bottom:0.6rem;}
.bento-card h3{font-family:var(--font-display);font-weight:560;color:var(--white);letter-spacing:-0.01em;line-height:1.15;margin-bottom:0.6rem;font-size:1.35rem;}
.bento-card h3 em{color:var(--violet-bright);font-style:italic;}
.bento-card > p{font-size:0.8rem;color:var(--muted);line-height:1.75;margin-bottom:0.9rem;}
.bento-card .flagship-principle{margin-bottom:1rem;font-size:0.72rem;}
.bento-2x2{grid-column:span 2;grid-row:span 2;}
.bento-2x1{grid-column:span 2;}
.bento-1x1{grid-column:span 1;}
.bento-4x1{grid-column:span 4;}
.bento-cta{
  flex-direction:row;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;
  background:linear-gradient(120deg,var(--s1) 0%,var(--s2) 100%);
}
.bento-cta h3{font-family:var(--font-display);color:var(--white);margin:0.4rem 0 0.6rem;}
.cta-br{display:none;}

/* Mock — Forgetting curve (loss aversion) */
.mock-curve{display:flex;align-items:flex-end;gap:0.5rem;height:70px;margin:0.4rem 0 0.5rem;}
.mock-curve-bar{
  flex:1;height:var(--h);background:linear-gradient(to top,var(--violet-bright),rgba(246,161,92,0.25));
  position:relative;min-height:6px;
  animation:barGrow 1s cubic-bezier(.16,1,.3,1) both;
}
@keyframes barGrow{from{transform:scaleY(0);transform-origin:bottom;}to{transform:scaleY(1);transform-origin:bottom;}}
.mock-curve-bar span{position:absolute;bottom:-1.15rem;left:50%;transform:translateX(-50%);font-size:0.55rem;color:var(--muted);white-space:nowrap;}
.mock-curve-caption{margin-top:1.4rem;font-size:0.6rem;color:var(--dim);}

/* Mock — Zeigarnik checklist */
.mock-checklist{display:flex;flex-direction:column;gap:0.5rem;margin-top:auto;}
.mock-check-row{display:flex;align-items:center;gap:0.55rem;font-size:0.72rem;color:var(--muted);border:1px solid var(--border2);padding:0.5rem 0.7rem;background:var(--black);}
.mock-check-row.done{color:var(--muted);text-decoration:line-through;opacity:0.6;}
.mock-check-box{width:14px;height:14px;border:1px solid var(--border2);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:0.6rem;color:var(--success);}
.mock-check-row.done .mock-check-box{border-color:var(--success);background:rgba(74,222,128,0.12);}
.mock-check-row.nag{border-color:var(--gold-border);animation:nagPulse 2.2s ease-in-out infinite;}
@keyframes nagPulse{0%,100%{box-shadow:0 0 0 0 rgba(246,161,92,0.18);}50%{box-shadow:0 0 0 6px rgba(246,161,92,0);}}

/* Mock — Streak / identity */
.mock-streak{margin-top:auto;display:flex;align-items:center;gap:1.25rem;padding-top:0.5rem;}
.mock-streak-num{font-size:2.4rem;font-weight:900;color:var(--violet-bright);letter-spacing:-0.03em;line-height:1;}
.mock-streak-label{font-size:0.62rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;margin-top:0.2rem;}
.mock-streak-days{display:flex;gap:0.3rem;margin-left:auto;}
.mock-streak-days span{width:10px;height:22px;background:var(--dim);}
.mock-streak-days span.on{background:var(--violet-bright);animation:streakRise 0.5s cubic-bezier(.16,1,.3,1) both;}
.mock-streak-days span.on:nth-child(1){animation-delay:0.05s;}
.mock-streak-days span.on:nth-child(2){animation-delay:0.1s;}
.mock-streak-days span.on:nth-child(3){animation-delay:0.15s;}
.mock-streak-days span.on:nth-child(4){animation-delay:0.2s;}
.mock-streak-days span.on:nth-child(5){animation-delay:0.25s;}
.mock-streak-days span.on:nth-child(6){animation-delay:0.3s;}
.mock-streak-days span.on:nth-child(7){animation-delay:0.35s;}
@keyframes streakRise{from{transform:scaleY(0);transform-origin:bottom;}to{transform:scaleY(1);transform-origin:bottom;}}

@media(max-width:900px){
  .bento-grid{grid-template-columns:repeat(2,1fr);}
  .bento-2x2{grid-column:span 2;grid-row:span 1;}
  .bento-4x1{grid-column:span 2;}
  .bento-cta{flex-direction:column;align-items:flex-start;}
}
@media(max-width:640px){
  .bento-grid{grid-template-columns:1fr;}
  .bento-2x2,.bento-2x1,.bento-1x1,.bento-4x1{grid-column:span 1;}
  .cta-br{display:inline;}
}
@media(prefers-reduced-motion:reduce){
  .bento-card{opacity:1;transform:none;}
  .bento-card.in-view{animation:none;}
  .mock-curve-bar,.mock-check-row.nag,.mock-streak-days span.on{animation:none!important;}
}

/* ── EARN GRID (Bounty + WynkoHead) ── */
.earn-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:1px;background:var(--border);border:1px solid var(--border);
}
.earn-grid .bento-card{min-height:100%;}
@media(max-width:768px){.earn-grid{grid-template-columns:1fr;}}

.mock-bounty{margin-top:auto;border:1px solid var(--border2);background:var(--black);padding:1rem;}
.mock-bounty-head{display:flex;justify-content:space-between;gap:0.5rem;font-size:0.68rem;color:var(--white);margin-bottom:0.9rem;}
.mock-bounty-pool{color:var(--violet-bright);font-weight:700;white-space:nowrap;}
.mock-bounty-row{display:flex;align-items:center;gap:0.6rem;margin-bottom:0.55rem;}
.mock-bounty-bar{flex:1;height:6px;background:var(--s3);overflow:hidden;}
.mock-bounty-bar div{height:100%;background:var(--violet-bright);transform:scaleX(0);transform-origin:left;animation:bountyFill 1s cubic-bezier(.16,1,.3,1) forwards;}
@keyframes bountyFill{to{transform:scaleX(1);}}
.mock-bounty-pct{font-size:0.62rem;color:var(--muted);width:26px;text-align:right;flex-shrink:0;}

.mock-wynkohead{margin-top:auto;border:1px solid var(--border2);background:var(--black);padding:1rem;}
.mock-wynkohead-link{font-family:monospace;font-size:0.68rem;color:var(--violet-bright);border:1px dashed var(--gold-border);padding:0.55rem 0.7rem;margin-bottom:0.9rem;text-align:center;}
.mock-wynkohead-stats{display:flex;gap:1.75rem;}
.mock-wynkohead-num{display:block;font-size:1.3rem;font-weight:900;color:var(--white);}
.mock-wynkohead-num.gold{color:var(--violet-bright);animation:mockPulse 2s ease-in-out infinite;border-radius:50%;width:fit-content;}
.mock-wynkohead-label{font-size:0.58rem;color:var(--muted);}

/* ── MOBILE HERO ── */
@media(max-width:768px){
  .hero{
    height:auto;min-height:100vh;
    align-items:flex-start;
    padding-top:72px;padding-bottom:2.5rem;
  }
  .hero-brain-canvas{
    left:0;opacity:0.35;
  }
  .hero-brain-canvas::before{
    background:linear-gradient(to right,var(--bg) 0%,rgba(11,10,9,0.85) 40%,rgba(11,10,9,0.55) 100%);
  }
  .hero-content{
    padding:0 1.5rem;max-width:100%;
  }
  .hero h1{
    font-size:clamp(2.3rem,11vw,3.2rem);
    line-height:1.04;
  }
  .hero-desc{max-width:100%;font-size:0.85rem;}
  .hero-legend{gap:0.6rem 1rem;margin-bottom:1.4rem;}
  .hero-actions .btn{flex:1;text-align:center;min-width:140px;}
  .stat-strip-item{padding:0.9rem 1.1rem;}
  .full-section{padding:3rem 1.5rem;}
}
@media(max-width:420px){
  .hero h1{font-size:2.1rem;}
}