@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,700;0,800;1,700;1,800;1,900&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --bg:#060812;
  --bg-soft:#0a0e1c;
  --panel:#0d1226;
  --panel-2:rgba(255,255,255,0.035);
  --line:rgba(255,255,255,0.09);
  --ink:#f2f3f8;
  --muted:#9aa0b4;
  --muted-2:#666d85;
  --blue:#3d6bff;
  --violet:#8b5cf6;
  --magenta:#ec4899;
  --cyan:#22d3ee;
  --amber:#fbbf24;
  --orange:#ff7a1a;
  --orange-deep:#ff4d00;
  --green:#3ddc84;
  --grad-1:linear-gradient(120deg,var(--blue),var(--magenta) 55%,var(--orange));
  --grad-2:linear-gradient(120deg,var(--cyan),var(--blue));
  --grad-move:linear-gradient(100deg,#ffffff 0%,var(--amber) 42%,var(--orange) 72%,var(--orange-deep) 100%);
  --grad-arc:conic-gradient(from 200deg,var(--blue),var(--cyan) 25%,var(--magenta) 55%,var(--orange) 80%,var(--blue) 100%);
  --grad-perform:linear-gradient(120deg,var(--magenta),#ff4d6d 55%,var(--orange));
  --grad-think:linear-gradient(120deg,var(--cyan),var(--blue) 70%,var(--violet));
  --grad-build:linear-gradient(120deg,var(--green),var(--cyan) 70%,var(--blue));
  --grad-solve:linear-gradient(120deg,var(--amber),var(--orange) 55%,var(--orange-deep));
  --radius:14px;
}

*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Space Grotesk',sans-serif;
  overflow-x:hidden;
  position:relative;
}

/* grain texture */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

::selection{background:var(--magenta);color:#fff;}

.wrap{max-width:1240px;margin:0 auto;padding:0 28px;}

h1,h2,h3,.display{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:800;
  font-style:italic;
  text-transform:uppercase;
  line-height:0.92;
  letter-spacing:0.005em;
}

.eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:12.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--cyan);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:22px;height:1px;
  background:var(--cyan);
  display:inline-block;
}

.grad-text{
  background:var(--grad-move);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

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

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 30px;
  border-radius:999px;
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  font-size:14.5px;
  letter-spacing:.02em;
  cursor:pointer;
  border:1px solid transparent;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
  white-space:nowrap;
}
.btn:active{transform:scale(.97);}
.btn-primary{
  background:var(--grad-1);
  color:#fff;
  box-shadow:0 8px 30px -8px rgba(139,92,246,.55);
}
.btn-primary:hover{box-shadow:0 12px 40px -6px rgba(236,72,153,.6);transform:translateY(-2px);}
.btn-ghost{
  background:transparent;
  border-color:var(--line);
  color:var(--ink);
}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan);}
.btn-block{width:100%;justify-content:center;}
.btn-sm{padding:10px 20px;font-size:13px;}

/* ===== NAV ===== */
.navbar{
  position:sticky;top:0;z-index:500;
  backdrop-filter:blur(16px) saturate(140%);
  background:rgba(6,8,18,.72);
  border-bottom:1px solid var(--line);
}
.navbar .wrap{
  display:flex;align-items:center;justify-content:space-between;
  height:74px;
}
.nav-brand{display:flex;align-items:center;gap:12px;}
.nav-brand img{height:34px;width:34px;object-fit:cover;border-radius:8px;}
.nav-brand .divider{width:1px;height:22px;background:var(--line);}
.nav-brand .mim{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-style:italic;
  font-size:14px;
  letter-spacing:-.01em;
}
.nav-brand .mim span{color:var(--cyan);}
.mim-logo-mark{
  height:40px;width:40px;
  border-radius:50%;
  object-fit:cover;
}

.nav-links{display:flex;align-items:center;gap:34px;list-style:none;}
.nav-links a{
  font-size:14px;font-weight:500;color:var(--muted);
  transition:color .2s ease;
  position:relative;
}
.nav-links a:hover{color:var(--ink);}

.nav-cta{display:flex;align-items:center;gap:12px;}

.nav-toggle{
  display:none;
  width:42px;height:42px;
  align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--line);border-radius:10px;
  cursor:pointer;
}
.nav-toggle span{display:block;width:18px;height:1.5px;background:var(--ink);position:relative;}
.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:0;width:18px;height:1.5px;background:var(--ink);transition:transform .2s ease;
}
.nav-toggle span::before{top:-6px;}
.nav-toggle span::after{top:6px;}

.mobile-menu{
  display:none;
  position:fixed;inset:74px 0 0 0;
  background:var(--bg-soft);
  z-index:499;
  padding:30px 28px;
  overflow-y:auto;
}
.mobile-menu.open{display:block;}
.mobile-menu a{
  display:block;
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-style:italic;
  font-size:26px;
  text-transform:uppercase;
  padding:16px 0;
  border-bottom:1px solid var(--line);
}
.mobile-menu .mob-cta{margin-top:26px;display:flex;flex-direction:column;gap:12px;}

/* ===== HERO ===== */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  padding:120px 0 80px;
  overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;
  z-index:0;
  background:
    radial-gradient(60% 50% at 18% 20%, rgba(61,107,255,.35), transparent 60%),
    radial-gradient(50% 45% at 85% 15%, rgba(236,72,153,.28), transparent 60%),
    radial-gradient(60% 55% at 60% 90%, rgba(139,92,246,.28), transparent 60%),
    var(--bg);
}
.hero-lines{
  position:absolute;inset:0;z-index:0;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(60% 60% at 50% 40%, black, transparent 90%);
}
.hero-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(4px);
  z-index:0;
  animation:float 9s ease-in-out infinite;
}
.orb-1{width:10px;height:10px;background:var(--cyan);top:22%;left:12%;box-shadow:0 0 30px 6px var(--cyan);}
.orb-2{width:7px;height:7px;background:var(--amber);top:65%;left:82%;box-shadow:0 0 24px 6px var(--amber);animation-delay:-3s;}
.orb-3{width:12px;height:12px;background:var(--magenta);top:15%;left:78%;box-shadow:0 0 34px 8px var(--magenta);animation-delay:-6s;}
@keyframes float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-26px);}
}

.hero-content{position:relative;z-index:2;text-align:center;max-width:980px;margin:0 auto;}
.hero-logo{
  width:96px;height:96px;
  border-radius:50%;
  object-fit:cover;
  margin:0 auto 24px;
  display:block;
  box-shadow:0 0 40px -6px rgba(139,92,246,.6);
}
.hero-eyebrow{justify-content:center;margin-bottom:26px;}
.hero h1{
  font-size:clamp(52px,10vw,128px);
  margin-bottom:26px;
}
.hero h1 .line2{
  -webkit-text-stroke:1.5px rgba(255,255,255,.85);
  color:transparent;
  display:block;
}
.hero .sub{
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  font-size:clamp(15px,2.4vw,20px);
  letter-spacing:.06em;
  color:var(--ink);
  margin-bottom:14px;
  text-transform:uppercase;
}
.hero .datecity{
  font-family:'JetBrains Mono',monospace;
  font-size:14px;
  color:var(--cyan);
  letter-spacing:.08em;
  margin-bottom:26px;
}
.hero .desc{
  font-size:17px;
  color:var(--muted);
  max-width:560px;
  margin:0 auto 40px;
  line-height:1.6;
}
.hero-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}

.hero-scroll{
  position:absolute;bottom:34px;left:50%;transform:translateX(-50%);
  z-index:2;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  letter-spacing:.18em;
  color:var(--muted-2);
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.hero-scroll .bar{width:1px;height:34px;background:linear-gradient(var(--cyan),transparent);animation:scrolldown 1.8s ease-in-out infinite;}
@keyframes scrolldown{0%{opacity:0;transform:translateY(0);}50%{opacity:1;}100%{opacity:0;transform:translateY(16px);}}

/* ===== SECTION shell ===== */
section{position:relative;padding:120px 0;}
.section-head{max-width:760px;margin-bottom:64px;}
.section-head h2{font-size:clamp(34px,5.4vw,58px);margin-top:18px;}
.section-head p{color:var(--muted);font-size:17px;margin-top:20px;max-width:600px;line-height:1.65;}
.center{text-align:center;margin-left:auto;margin-right:auto;}

/* ===== WHAT IS MIM ===== */
.statement-block{
  padding:60px 0;
  text-align:center;
}
.statement-block .stack{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-style:italic;
  font-size:clamp(38px,9vw,110px);
  line-height:.98;
  text-transform:uppercase;
}
.statement-block .stack span{
  display:block;
  opacity:.18;
  transition:opacity .5s ease, color .5s ease;
}
.statement-block .stack span.active{
  opacity:1;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.statement-block .stack span.track-perform.active{background-image:var(--grad-perform);}
.statement-block .stack span.track-think.active{background-image:var(--grad-think);}
.statement-block .stack span.track-build.active{background-image:var(--grad-build);}
.statement-block .stack span.track-solve.active{background-image:var(--grad-solve);}

/* ===== TRACKS ===== */
.tracks-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.track-card{
  background:var(--bg-soft);
  padding:48px 36px 44px;
  position:relative;
  overflow:hidden;
  min-height:280px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  transition:background .35s ease;
  cursor:pointer;
}
.track-card::after{
  content:"";
  position:absolute;top:0;left:0;right:0;height:3px;
  z-index:1;
}
.track-perform::after{background:var(--grad-perform);}
.track-think::after{background:var(--grad-think);}
.track-build::after{background:var(--grad-build);}
.track-solve::after{background:var(--grad-solve);}
.track-card::before{
  content:"";
  position:absolute;inset:0;
  opacity:.08;
  transition:opacity .4s ease;
  z-index:0;
}
.track-card:hover::before{opacity:.22;}
.track-perform::before{background:radial-gradient(circle at 25% 15%, var(--magenta), transparent 55%),radial-gradient(circle at 85% 90%, var(--orange), transparent 60%);}
.track-think::before{background:radial-gradient(circle at 25% 15%, var(--cyan), transparent 55%),radial-gradient(circle at 85% 90%, var(--violet), transparent 60%);}
.track-build::before{background:radial-gradient(circle at 25% 15%, var(--green), transparent 55%),radial-gradient(circle at 85% 90%, var(--cyan), transparent 60%);}
.track-solve::before{background:radial-gradient(circle at 25% 15%, var(--amber), transparent 55%),radial-gradient(circle at 85% 90%, var(--orange-deep), transparent 60%);}
.track-num{
  position:absolute;top:34px;right:36px;
  font-family:'JetBrains Mono',monospace;
  font-size:15px;
  z-index:1;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  opacity:.9;
}
.track-perform .track-num{background-image:var(--grad-perform);}
.track-think .track-num{background-image:var(--grad-think);}
.track-build .track-num{background-image:var(--grad-build);}
.track-solve .track-num{background-image:var(--grad-solve);}
.track-icon{margin-bottom:22px;z-index:1;position:relative;}
.track-icon svg{width:34px;height:34px;}
.track-card h3{
  font-size:clamp(28px,3.4vw,38px);margin-bottom:14px;z-index:1;position:relative;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.track-perform h3{background-image:var(--grad-perform);}
.track-think h3{background-image:var(--grad-think);}
.track-build h3{background-image:var(--grad-build);}
.track-solve h3{background-image:var(--grad-solve);}
.track-card p{color:var(--muted);font-size:15px;line-height:1.6;max-width:380px;z-index:1;position:relative;}
.track-explore{
  margin-top:22px;
  font-family:'JetBrains Mono',monospace;
  font-size:12px;letter-spacing:.1em;
  display:inline-flex;align-items:center;gap:8px;
  color:var(--ink);
  opacity:.75;
  z-index:1;
  position:relative;
  transition:gap .25s ease,opacity .25s ease;
}
.track-card:hover .track-explore{gap:14px;opacity:1;}

/* ===== WHY ===== */
.why-hero-num{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-style:italic;
  font-size:clamp(60px,14vw,180px);
  line-height:.85;
  margin-bottom:8px;
}
.why-words{
  display:flex;flex-wrap:wrap;gap:14px;margin-top:50px;
}
.why-word{
  font-family:'JetBrains Mono',monospace;
  font-size:13px;letter-spacing:.1em;
  border:1px solid var(--line);
  border-radius:999px;
  padding:12px 22px;
  color:var(--muted);
  transition:all .25s ease;
}
.why-word:hover{color:var(--ink);border-color:var(--cyan);background:rgba(34,211,238,.06);}

/* ===== FOR STUDENTS ===== */
.students-wrap{
  display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;
}
.quiz-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:36px;
}
.quiz-card h4{font-family:'Space Grotesk';font-size:20px;margin-bottom:6px;}
.quiz-card p.hint{color:var(--muted);font-size:14px;margin-bottom:24px;}
.quiz-options{display:flex;flex-direction:column;gap:10px;margin-bottom:22px;}
.quiz-opt{
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px 16px;
  cursor:pointer;
  font-size:14.5px;
  transition:all .2s ease;
  display:flex;justify-content:space-between;align-items:center;
}
.quiz-opt:hover{border-color:var(--violet);background:rgba(139,92,246,.07);}
.quiz-opt.selected{border-color:var(--cyan);background:rgba(34,211,238,.08);color:var(--cyan);}
.quiz-result{
  display:none;
  border-top:1px solid var(--line);
  padding-top:22px;margin-top:6px;
}
.quiz-result.show{display:block;}
.quiz-result .track-name{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-style:italic;text-transform:uppercase;
  font-size:34px;
  background:var(--grad-move);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  margin-bottom:8px;
}

/* ===== SCHOOLS ===== */
.schools-wrap{
  display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;
}
.school-cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px;}
.coord-box{
  margin-top:30px;
  border:1px dashed var(--line);
  border-radius:var(--radius);
  padding:22px 24px;
  font-size:14px;
  color:var(--muted);
}
.coord-box a{color:var(--cyan);}

/* ===== FORM ===== */
.form-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:44px;
  max-width:720px;
  margin:0 auto;
}
.form-note{
  font-family:'JetBrains Mono',monospace;
  font-size:12.5px;
  color:var(--amber);
  border:1px solid rgba(251,191,36,.3);
  background:rgba(251,191,36,.06);
  border-radius:10px;
  padding:14px 16px;
  margin-bottom:30px;
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.field{margin-bottom:18px;}
.field.full{grid-column:1/-1;}
.field label{
  display:block;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px;font-family:'JetBrains Mono',monospace;
}
.field input,.field select{
  width:100%;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-radius:10px;
  padding:13px 15px;
  color:var(--ink);
  font-family:'Space Grotesk',sans-serif;
  font-size:14.5px;
  outline:none;
  transition:border-color .2s ease, background .2s ease;
}
.field input::placeholder{color:var(--muted-2);}
.field input:focus,.field select:focus{border-color:var(--cyan);background:rgba(34,211,238,.04);}
.track-pick{display:flex;gap:10px;flex-wrap:wrap;}
.track-pick label{
  flex:1;min-width:120px;
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px;
  text-align:center;
  cursor:pointer;
  font-size:13.5px;
  transition:all .2s ease;
  text-transform:none;
}
.track-pick input{display:none;}
.track-pick input:checked + span{color:var(--cyan);}
.track-pick label:has(input:checked){border-color:var(--cyan);background:rgba(34,211,238,.08);}
.form-success{
  display:none;
  text-align:center;
  padding:40px 10px;
}
.form-success.show{display:block;}
.form-success .check{font-size:44px;margin-bottom:14px;}

/* ===== TIMELINE ===== */
.timeline{
  display:flex;
  flex-direction:column;
  border-left:1px solid var(--line);
  margin-left:8px;
}
.tl-item{
  position:relative;
  padding:0 0 46px 34px;
}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{
  content:"";
  position:absolute;left:-6.5px;top:2px;
  width:12px;height:12px;border-radius:50%;
  background:var(--bg);
  border:2px solid var(--cyan);
}
.tl-item.highlight::before{background:var(--grad-1);border-color:transparent;}
.tl-date{
  font-family:'JetBrains Mono',monospace;
  font-size:13px;color:var(--cyan);letter-spacing:.08em;margin-bottom:6px;
}
.tl-item h4{font-family:'Space Grotesk';font-weight:700;font-size:20px;margin-bottom:4px;}
.tl-item p{color:var(--muted);font-size:14.5px;}

/* ===== EXPERIENCE TEASER ===== */
.teaser-words{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  margin-top:56px;
}
.teaser-word{
  background:var(--bg-soft);
  padding:46px 20px;
  text-align:center;
  font-family:'Barlow Condensed';font-weight:800;font-style:italic;
  font-size:clamp(18px,2.6vw,26px);
  letter-spacing:-.01em;
}

/* ===== FAQ ===== */
.faq-list{max-width:800px;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%;text-align:left;background:none;border:none;color:var(--ink);
  padding:26px 0;display:flex;justify-content:space-between;align-items:center;
  cursor:pointer;font-family:'Space Grotesk';font-size:17px;font-weight:600;gap:20px;
}
.faq-q .plus{font-family:'JetBrains Mono';font-size:20px;color:var(--cyan);transition:transform .3s ease;flex-shrink:0;}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;}
.faq-a p{color:var(--muted);font-size:15px;line-height:1.6;padding-bottom:24px;max-width:640px;}

/* ===== PARTNERS ===== */
.partners-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
}
.partner-slot{
  aspect-ratio:1.6;
  border:1px dashed var(--line);
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;
  font-size:11.5px;letter-spacing:.08em;
  color:var(--muted-2);text-transform:uppercase;
}

/* ===== FOOTER ===== */
footer{
  border-top:1px solid var(--line);
  padding:80px 0 34px;
  background:var(--bg-soft);
}
.footer-top{
  display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr 1fr 1fr;gap:32px;
  margin-bottom:70px;
}
.footer-brand img{height:38px;width:38px;border-radius:8px;object-fit:cover;margin-bottom:16px;}
.footer-brand h4{font-family:'Barlow Condensed';font-weight:800;font-style:italic;font-size:16px;margin-bottom:6px;}
.footer-brand p{color:var(--muted);font-size:14px;line-height:1.6;}
.footer-col h5{
  font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.1em;
  color:var(--muted-2);text-transform:uppercase;margin-bottom:18px;
}
.footer-col a, .footer-col p{
  display:block;color:var(--muted);font-size:14.5px;margin-bottom:12px;
}
.footer-col a:hover{color:var(--cyan);}
.footer-final{
  text-align:center;
  font-family:'Barlow Condensed';font-weight:800;font-style:italic;
  font-size:clamp(22px,4.4vw,40px);
  padding:40px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin-bottom:30px;
}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
  font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted-2);
}

/* ===== reveal animation ===== */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1;transform:translateY(0);}

/* ===== responsive ===== */
@media (max-width:900px){
  .nav-links,.nav-cta .btn-ghost{display:none;}
  .nav-toggle{display:flex;}
  .tracks-grid{grid-template-columns:1fr;}
  .students-wrap,.schools-wrap{grid-template-columns:1fr;gap:36px;}
  .form-grid{grid-template-columns:1fr;}
  .teaser-words{grid-template-columns:1fr 1fr;}
  .footer-top{grid-template-columns:1fr 1fr;gap:32px;}
  .partners-grid{grid-template-columns:repeat(2,1fr);}
  .nav-brand img{height:30px;width:30px;}
  .mim-logo-mark{height:30px;width:30px;}
}
@media (max-width:560px){
  .wrap{padding:0 20px;}
  section{padding:80px 0;}
  .teaser-words{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr;}
  .hero-buttons{flex-direction:column;width:100%;}
  .hero-buttons .btn{width:100%;justify-content:center;}
}

/* ===== TRACK DETAIL PAGES ===== */
.track-hero{
  position:relative;
  padding:170px 0 100px;
  overflow:hidden;
}
.track-hero-bg{position:absolute;inset:0;z-index:0;}
.track-perform-page .track-hero-bg{background:radial-gradient(65% 60% at 25% 10%, rgba(236,72,153,.30), transparent 60%),radial-gradient(55% 50% at 90% 80%, rgba(255,122,26,.22), transparent 60%),var(--bg);}
.track-think-page .track-hero-bg{background:radial-gradient(65% 60% at 25% 10%, rgba(34,211,238,.28), transparent 60%),radial-gradient(55% 50% at 90% 80%, rgba(139,92,246,.24), transparent 60%),var(--bg);}
.track-build-page .track-hero-bg{background:radial-gradient(65% 60% at 25% 10%, rgba(61,220,132,.26), transparent 60%),radial-gradient(55% 50% at 90% 80%, rgba(34,211,238,.24), transparent 60%),var(--bg);}
.track-solve-page .track-hero-bg{background:radial-gradient(65% 60% at 25% 10%, rgba(251,191,36,.28), transparent 60%),radial-gradient(55% 50% at 90% 80%, rgba(255,77,0,.22), transparent 60%),var(--bg);}

/* ---- poster artwork, right-hand side, faded into the dark bg ---- */
.track-hero-art{
  position:absolute;
  top:0;right:0;bottom:0;
  width:56%;
  background-size:cover;
  background-position:center 20%;
  opacity:.5;
  z-index:0;
  -webkit-mask-image:linear-gradient(to right, transparent, black 42%), linear-gradient(to bottom, black 55%, transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right, transparent, black 42%), linear-gradient(to bottom, black 55%, transparent);
  mask-composite:intersect;
}
.track-perform-page .track-hero-art{background-image:url('images/poster-perform.png');}
.track-think-page .track-hero-art{background-image:url('images/poster-think.png');}
.track-build-page .track-hero-art{background-image:url('images/poster-build.png');}
.track-solve-page .track-hero-art{background-image:url('images/poster-solve.png');}

.track-hero-inner{position:relative;z-index:2;max-width:820px;}
.track-crumb{
  display:flex;align-items:center;gap:12px;margin-bottom:28px;
  font-family:'JetBrains Mono',monospace;font-size:12.5px;letter-spacing:.14em;color:var(--muted);
}
.track-crumb a{color:var(--muted);transition:color .2s ease;}
.track-crumb a:hover{color:var(--ink);}
.track-crumb .num{
  width:26px;height:26px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;color:#fff;
}
.track-perform-page .track-crumb .num{background:var(--grad-perform);}
.track-think-page .track-crumb .num{background:var(--grad-think);}
.track-build-page .track-crumb .num{background:var(--grad-build);}
.track-solve-page .track-crumb .num{background:var(--grad-solve);}

.track-hero-inner h1{
  font-size:clamp(56px,11vw,140px);
  margin-bottom:22px;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.track-perform-page .track-hero-inner h1{background-image:var(--grad-perform);}
.track-think-page .track-hero-inner h1{background-image:var(--grad-think);}
.track-build-page .track-hero-inner h1{background-image:var(--grad-build);}
.track-solve-page .track-hero-inner h1{background-image:var(--grad-solve);}

.track-hero-inner .tagline{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-style:italic;text-transform:uppercase;
  font-size:clamp(22px,3.6vw,34px);
  color:var(--ink);
  margin-bottom:24px;
  line-height:1.05;
}
.track-hero-inner .lede{font-size:18px;color:var(--muted);max-width:640px;line-height:1.7;}
.track-hero-inner .lede + .lede{margin-top:16px;}
.track-hero-inner .lede strong{color:var(--ink);font-weight:600;}

/* big graphic number watermark */
.track-hero-num{
  position:absolute;
  right:-2%;top:50%;
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-style:italic;
  font-size:min(46vw,520px);
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.08);
  z-index:0;
  pointer-events:none;
  user-select:none;
  animation:trackNumFloat 8s ease-in-out infinite;
}
@keyframes trackNumFloat{
  0%,100%{transform:translateY(-50%);}
  50%{transform:translateY(-56%);}
}

/* ---- poster-referenced light sweep, one diagonal stroke of brightness
   drifting through the hero, echoing the poster's paint-stroke bands ---- */
.track-hero-sweep{
  position:absolute;inset:0;z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.track-hero-sweep::before{
  content:"";
  position:absolute;
  top:-30%;left:-35%;
  width:45%;height:160%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.06) 45%, transparent 65%);
  transform:skewX(-16deg) translateX(-10%);
  animation:heroSweep 9s ease-in-out infinite;
}
@keyframes heroSweep{
  0%,100%{transform:skewX(-16deg) translateX(-10%);}
  50%{transform:skewX(-16deg) translateX(260%);}
}

/* ---- brush-stroke underline beneath the track tagline ---- */
.track-brush{
  height:6px;
  width:120px;
  border-radius:3px;
  margin:4px 0 26px;
  transform-origin:left center;
  animation:brushGrow 1.1s cubic-bezier(.2,.8,.2,1) .15s both;
}
.track-perform-page .track-brush{background:var(--grad-perform);}
.track-think-page .track-brush{background:var(--grad-think);}
.track-build-page .track-brush{background:var(--grad-build);}
.track-solve-page .track-brush{background:var(--grad-solve);}
@keyframes brushGrow{
  0%{transform:scaleX(0);opacity:0;}
  60%{opacity:1;}
  100%{transform:scaleX(1);opacity:1;}
}
@media (prefers-reduced-motion: reduce){
  .track-hero-num, .track-hero-sweep::before, .track-brush{animation:none;}
}

/* ---- WHAT TO EXPECT grid ---- */
.expect-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.expect-card{
  background:var(--bg-soft);
  padding:38px 28px;
  display:flex;flex-direction:column;gap:18px;
  min-height:180px;
  transition:background .3s ease, transform .3s ease;
}
.expect-card:hover{transform:translateY(-3px);}
.expect-card .expect-icon{
  width:52px;height:52px;
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.04);
}
.expect-card .expect-icon svg{width:26px;height:26px;}
.expect-card p{
  font-size:15.5px;font-weight:600;color:var(--ink);
  font-family:'Space Grotesk',sans-serif;
  line-height:1.4;
}
.track-perform-page .expect-card .expect-icon{background:rgba(236,72,153,.12);}
.track-think-page .expect-card .expect-icon{background:rgba(34,211,238,.12);}
.track-build-page .expect-card .expect-icon{background:rgba(61,220,132,.12);}
.track-solve-page .expect-card .expect-icon{background:rgba(251,191,36,.12);}

/* ---- callout / experience banner ---- */
.callout-banner{
  border-radius:var(--radius);
  padding:64px 48px;
  position:relative;
  overflow:hidden;
  text-align:center;
}
.track-perform-page .callout-banner{background:linear-gradient(160deg, rgba(236,72,153,.14), rgba(255,122,26,.08));border:1px solid rgba(236,72,153,.22);}
.track-think-page .callout-banner{background:linear-gradient(160deg, rgba(34,211,238,.14), rgba(139,92,246,.08));border:1px solid rgba(34,211,238,.22);}
.track-build-page .callout-banner{background:linear-gradient(160deg, rgba(61,220,132,.14), rgba(34,211,238,.08));border:1px solid rgba(61,220,132,.22);}
.track-solve-page .callout-banner{background:linear-gradient(160deg, rgba(251,191,36,.14), rgba(255,77,0,.08));border:1px solid rgba(251,191,36,.22);}
.callout-banner .eyebrow{justify-content:center;margin-bottom:22px;}
.callout-banner p{
  font-size:clamp(19px,2.6vw,26px);
  color:var(--ink);
  max-width:680px;
  margin:0 auto;
  line-height:1.5;
}
.callout-banner p strong{
  display:block;
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-style:italic;text-transform:uppercase;
  font-size:clamp(26px,3.6vw,38px);
  margin-top:8px;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.track-perform-page .callout-banner p strong{background-image:var(--grad-perform);}
.track-think-page .callout-banner p strong{background-image:var(--grad-think);}
.track-build-page .callout-banner p strong{background-image:var(--grad-build);}
.track-solve-page .callout-banner p strong{background-image:var(--grad-solve);}

/* ---- closing mantra strip ---- */
.mantra-strip{
  text-align:center;
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-style:italic;text-transform:uppercase;
  font-size:clamp(24px,5vw,56px);
  letter-spacing:.01em;
  padding:20px 0;
}
.track-perform-page .mantra-strip{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;background-image:var(--grad-perform);}
.track-think-page .mantra-strip{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;background-image:var(--grad-think);}
.track-build-page .mantra-strip{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;background-image:var(--grad-build);}
.track-solve-page .mantra-strip{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;background-image:var(--grad-solve);}

/* ---- prev/next track nav ---- */
.track-switch{
  display:grid;grid-template-columns:1fr 1fr;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
}
.track-switch a{
  padding:30px 32px;
  display:flex;flex-direction:column;gap:6px;
  transition:background .25s ease;
}
.track-switch a:hover{background:rgba(255,255,255,.03);}
.track-switch a.next{text-align:right;align-items:flex-end;border-left:1px solid var(--line);}
.track-switch .switch-label{
  font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.12em;color:var(--muted-2);text-transform:uppercase;
}
.track-switch .switch-name{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-style:italic;text-transform:uppercase;font-size:28px;
}

@media (max-width:900px){
  .expect-grid{grid-template-columns:repeat(2,1fr);}
  .track-hero-num{display:none;}
}
@media (max-width:560px){
  .expect-grid{grid-template-columns:1fr;}
  .track-switch{grid-template-columns:1fr;}
  .track-switch a.next{border-left:none;border-top:1px solid var(--line);text-align:left;align-items:flex-start;}
  .callout-banner{padding:44px 26px;}
  .track-hero{padding:140px 0 70px;}
}

/* ============================================================
   TRACK CHARACTERS
   Four line-art figures (mim-characters.js) that act out their
   track: dancing, hand up, coding, reading a building.
   Joints rotate about explicit viewBox coordinates, so every
   transform-origin below is in SVG user units — which requires
   transform-box:view-box on the animated groups.
   ============================================================ */
.ch-slot{
  position:absolute;
  pointer-events:none;
  z-index:0;
}
.ch-slot svg{
  width:100%;height:100%;display:block;
  overflow:visible;
}
.ch-slot g,.ch-slot path,.ch-slot circle,.ch-slot ellipse,.ch-slot rect{
  transform-box:view-box;
}
/* Figures hold a neutral pose until scrolled into view. */
.ch-slot .ch-shadow{opacity:.35;}
.ch-slot .ch-windows rect{opacity:.28;}
.ch-slot .ch-code path{stroke-dasharray:none;}

/* ---- where the figures sit ---- */
.track-card .ch-slot{
  right:-14px;bottom:-18px;
  width:176px;height:230px;
  opacity:.26;
  transition:opacity .4s ease,transform .4s ease;
  transform:translateY(6px);
}
.track-card:hover .ch-slot{opacity:.62;transform:translateY(0);}
.track-hero .ch-slot{
  right:4%;bottom:0;
  width:min(30vw,340px);height:min(40vw,440px);
  opacity:.75;
  z-index:1;
}
/* The figure carries the hero now — pull the poster wash back so the two
   don't fight for the same corner. */
.track-hero .track-hero-art{opacity:.3;}

/* ---------- PERFORM: the dance ---------- */
.ch-live .ch-perform .ch-hair{
  transform-origin:88px 48px;
  animation:chHairSwing 1.6s ease-in-out infinite;
}
.ch-live .ch-perform .ch-arm-a{
  transform-origin:102px 90px;
  animation:chArmA 1.6s ease-in-out infinite;
}
.ch-live .ch-perform .ch-arm-b{
  transform-origin:100px 96px;
  animation:chArmB 1.6s ease-in-out infinite;
}
.ch-live .ch-perform .ch-skirt{
  transform-origin:98px 121px;
  animation:chSkirt 1.6s ease-in-out infinite;
}
.ch-live .ch-perform .ch-leg{
  transform-origin:112px 170px;
  animation:chKick 1.6s ease-in-out infinite;
}
.ch-live .ch-perform .ch-sparks{animation:chSparks 1.6s ease-in-out infinite;}
@keyframes chHairSwing{0%,100%{transform:rotate(-7deg);}50%{transform:rotate(9deg);}}
@keyframes chArmA{0%,100%{transform:rotate(-14deg);}50%{transform:rotate(12deg);}}
@keyframes chArmB{0%,100%{transform:rotate(10deg);}50%{transform:rotate(-16deg);}}
@keyframes chSkirt{0%,100%{transform:skewX(7deg);}50%{transform:skewX(-8deg);}}
@keyframes chKick{0%,100%{transform:rotate(-12deg);}50%{transform:rotate(14deg);}}
@keyframes chSparks{0%,100%{opacity:.25;}50%{opacity:1;}}

/* ---------- THINK: hand goes up, idea arrives first ---------- */
.ch-live .ch-think .ch-arm-raise{
  transform-origin:94px 98px;
  animation:chRaise 3.4s cubic-bezier(.3,.9,.3,1) infinite;
}
.ch-live .ch-think .ch-idea{
  transform-origin:120px 40px;
  animation:chIdea 3.4s ease-in-out infinite;
}
@keyframes chRaise{
  0%,12%{transform:rotate(56deg);}
  32%,72%{transform:rotate(0deg);}
  92%,100%{transform:rotate(56deg);}
}
@keyframes chIdea{
  0%,26%{opacity:0;transform:scale(.6);}
  40%,70%{opacity:1;transform:scale(1);}
  86%,100%{opacity:0;transform:scale(.6);}
}

/* ---------- BUILD: typing, code filling in, caret blinking ---------- */
.ch-live .ch-build .ch-arm-type-b{
  transform-origin:86px 166px;
  animation:chTypeB .42s ease-in-out infinite;
}
.ch-live .ch-build .ch-arm-type-a{
  transform-origin:84px 142px;
  animation:chTypeA .42s ease-in-out infinite;
}
.ch-live .ch-build .ch-lean{
  transform-origin:54px 200px;
  animation:chLean 3.6s ease-in-out infinite;
}
.ch-live .ch-build .ch-code path{
  stroke-dasharray:1;
  animation:chCodeType 3.6s ease-out infinite;
}
.ch-live .ch-build .ch-code path:nth-child(1){animation-delay:0s;}
.ch-live .ch-build .ch-code path:nth-child(2){animation-delay:.5s;}
.ch-live .ch-build .ch-code path:nth-child(3){animation-delay:1s;}
.ch-live .ch-build .ch-caret{animation:chBlink 1s steps(1,end) infinite;}
@keyframes chTypeA{0%,100%{transform:rotate(0deg);}50%{transform:rotate(3.5deg);}}
@keyframes chTypeB{0%,100%{transform:rotate(3.5deg);}50%{transform:rotate(0deg);}}
@keyframes chLean{0%,100%{transform:rotate(0deg);}50%{transform:rotate(1.2deg);}}
@keyframes chCodeType{
  0%{stroke-dashoffset:1;}
  22%,84%{stroke-dashoffset:0;}
  96%,100%{stroke-dashoffset:1;}
}
@keyframes chBlink{0%,49%{opacity:1;}50%,100%{opacity:0;}}

/* ---------- SOLVE: point, sight-line travels, building wakes up ---------- */
.ch-live .ch-solve .ch-arm-point{
  transform-origin:50px 98px;
  animation:chPoint 4s ease-in-out infinite;
}
.ch-live .ch-solve .ch-hair{
  transform-origin:52px 60px;
  animation:chHairSwing 4s ease-in-out infinite;
}
.ch-live .ch-solve .ch-sight{animation:chSight 4s linear infinite;}
.ch-live .ch-solve .ch-windows rect{
  opacity:.28;
  animation:chWindow 4s ease-in-out infinite;
}
.ch-live .ch-solve .ch-windows rect:nth-child(1){animation-delay:1.0s;}
.ch-live .ch-solve .ch-windows rect:nth-child(2){animation-delay:1.15s;}
.ch-live .ch-solve .ch-windows rect:nth-child(3){animation-delay:1.3s;}
.ch-live .ch-solve .ch-windows rect:nth-child(4){animation-delay:1.45s;}
.ch-live .ch-solve .ch-windows rect:nth-child(5){animation-delay:1.6s;}
.ch-live .ch-solve .ch-windows rect:nth-child(6){animation-delay:1.75s;}
.ch-live .ch-solve .ch-windows rect:nth-child(7){animation-delay:1.9s;}
.ch-live .ch-solve .ch-windows rect:nth-child(8){animation-delay:2.05s;}
@keyframes chPoint{
  0%,100%{transform:rotate(4deg);}
  18%,72%{transform:rotate(-3deg);}
}
@keyframes chSight{
  0%{opacity:0;stroke-dashoffset:56;}
  20%,80%{opacity:.9;}
  100%{opacity:0;stroke-dashoffset:0;}
}
@keyframes chWindow{
  0%,20%{opacity:.28;}
  45%,80%{opacity:1;}
  100%{opacity:.12;}
}

@media (max-width:900px){
  .track-hero .ch-slot{
    width:min(46vw,220px);height:min(58vw,280px);
    right:-12%;opacity:.34;
  }
  .track-card .ch-slot{width:128px;height:168px;opacity:.2;}
}

@media (prefers-reduced-motion: reduce){
  .ch-slot *{animation:none !important;}
  .ch-solve .ch-windows rect{opacity:.7;}
  .ch-think .ch-idea{opacity:1;}
}

/* ============================================================
   MOTION LAYER  (set up by mim-motion.js)
   ============================================================ */

/* ---- scroll progress ---- */
.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:3px;
  background:var(--grad-1);
  transform:scaleX(0);
  transform-origin:left center;
  z-index:999;
  pointer-events:none;
}

/* ---- kinetic headline ---- */
.hero h1.kinetic .kin{
  display:inline-block;
  animation:kinRise .8s cubic-bezier(.2,.85,.25,1) both;
}
.hero h1.kinetic .line2{display:block;}
@keyframes kinRise{
  0%{opacity:0;transform:translateY(.5em) rotate(4deg);}
  100%{opacity:1;transform:translateY(0) rotate(0);}
}
/* No drift on .grad-text: MOVE uses the logo's exact colour ramp, and
   animating background-position slides pale stops across the word. */

/* ---- marquee band ---- */
.marquee{
  overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--bg-soft);
  padding:18px 0;
  display:flex;
  user-select:none;
}
.marquee-row{
  display:flex;
  flex:0 0 auto;
  gap:38px;
  padding-right:38px;
  animation:marqueeRun 26s linear infinite;
}
.marquee:hover .marquee-row{animation-play-state:paused;}
.marquee span{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-style:italic;
  text-transform:uppercase;
  font-size:clamp(22px,3.4vw,40px);
  white-space:nowrap;
  color:var(--ink);
  opacity:.85;
}
.marquee span.hot{
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  background-image:var(--grad-1);
  opacity:1;
}
.marquee i{
  font-style:normal;
  align-self:center;
  color:var(--cyan);
  font-size:18px;
  opacity:.7;
}
@keyframes marqueeRun{
  0%{transform:translateX(0);}
  100%{transform:translateX(-100%);}
}

/* ---- track cards: cursor spotlight + tilt ---- */
.tracks-grid{perspective:1100px;}
.track-card{
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style:preserve-3d;
  transition:background .35s ease,transform .3s ease;
}
.track-card .track-spot{
  content:"";
  position:absolute;inset:0;
  z-index:0;
  opacity:0;
  transition:opacity .35s ease;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
             rgba(255,255,255,.12), transparent 70%);
}
.track-card:hover .track-spot{opacity:1;}

/* ---- buttons catch the light on hover ---- */
.btn-primary{position:relative;overflow:hidden;}
.btn-primary::after{
  content:"";
  position:absolute;top:0;bottom:0;left:-60%;
  width:40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-18deg);
  opacity:0;
}
.btn-primary:hover::after{animation:btnShine .75s ease-out;}
@keyframes btnShine{
  0%{left:-60%;opacity:1;}
  100%{left:120%;opacity:0;}
}

/* ---- grids deal themselves in ---- */
.stagger.reveal.in > *{
  animation:tileIn .55s cubic-bezier(.2,.8,.25,1) both;
  animation-delay:calc(var(--i,0) * 70ms);
}
@keyframes tileIn{
  0%{opacity:0;transform:translateY(16px);}
  100%{opacity:1;transform:translateY(0);}
}

@media (prefers-reduced-motion: reduce){
  .scroll-progress{display:none;}
  .hero h1.kinetic .kin,
  .marquee-row,
  .btn-primary::after,
  .stagger.reveal.in > *{animation:none;}
  .track-card{transform:none;}
}

/* ============================================================
   SET PIECES  (driven by mim-showpiece.js)
   ============================================================ */

/* ---------- 1. SCROLL-DRIVEN TRACK TAKEOVER ----------
   A tall section whose stage sticks to the viewport: scrolling
   through it plays four full-screen chapters, one per track. */
.takeover{position:relative;height:440vh;}
.takeover-stage{
  position:sticky;
  top:var(--nav-h,74px);
  height:calc(100vh - var(--nav-h,74px));
  overflow:hidden;
}
.tk-chapter{
  position:absolute;inset:0;
  opacity:0;
  will-change:opacity;
}
.tk-chapter:not(.on){pointer-events:none;}
/* only the chapter on screen spends cycles animating its figure */
.tk-chapter:not(.on) .ch-slot *{animation-play-state:paused;}

.tk-bg{position:absolute;inset:0;z-index:0;}
.tk-perform .tk-bg{background:radial-gradient(70% 70% at 28% 18%,rgba(236,72,153,.34),transparent 62%),radial-gradient(60% 60% at 88% 86%,rgba(255,122,26,.26),transparent 62%),var(--bg);}
.tk-think   .tk-bg{background:radial-gradient(70% 70% at 28% 18%,rgba(34,211,238,.30),transparent 62%),radial-gradient(60% 60% at 88% 86%,rgba(139,92,246,.28),transparent 62%),var(--bg);}
.tk-build   .tk-bg{background:radial-gradient(70% 70% at 28% 18%,rgba(61,220,132,.28),transparent 62%),radial-gradient(60% 60% at 88% 86%,rgba(34,211,238,.26),transparent 62%),var(--bg);}
.tk-solve   .tk-bg{background:radial-gradient(70% 70% at 28% 18%,rgba(251,191,36,.30),transparent 62%),radial-gradient(60% 60% at 88% 86%,rgba(255,77,0,.26),transparent 62%),var(--bg);}

/* the giant word drifts across the screen as that chapter plays */
.tk-word{
  position:absolute;
  top:42%;left:50%;
  transform:translate(-50%,-50%) translateX(calc((0.5 - var(--p,.5)) * 32vw));
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-style:italic;
  font-size:clamp(74px,15vw,240px);
  line-height:.82;
  white-space:nowrap;
  letter-spacing:-.01em;
  z-index:1;
  pointer-events:none;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  will-change:transform;
}
.tk-perform .tk-word{background-image:var(--grad-perform);}
.tk-think   .tk-word{background-image:var(--grad-think);}
.tk-build   .tk-word{background-image:var(--grad-build);}
.tk-solve   .tk-word{background-image:var(--grad-solve);}

.tk-fig{
  position:absolute;
  right:4%;bottom:0;
  width:min(30vw,380px);
  height:min(66vh,520px);
  opacity:.95;
  z-index:2;
}
.tk-fig::before{
  content:"";
  position:absolute;inset:-14% -10% -6%;
  background:radial-gradient(58% 52% at 50% 56%,rgba(6,8,18,.92),rgba(6,8,18,.55) 62%,transparent 78%);
  z-index:-1;
}
.tk-meta{
  position:absolute;
  left:6%;bottom:12%;
  max-width:430px;
  z-index:3;
  transform:translateY(calc((var(--p,.5) - .5) * -40px));
}
.tk-meta .tk-num{
  font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.16em;
  display:block;margin-bottom:14px;color:var(--muted);
}
.tk-meta p{font-size:18px;line-height:1.65;color:var(--ink);margin-bottom:22px;}

/* chapter rail */
.tk-rail{
  position:absolute;left:6%;top:12%;
  display:flex;gap:8px;z-index:4;
}
.tk-rail i{
  width:34px;height:3px;border-radius:2px;
  background:rgba(255,255,255,.18);
  transition:background .3s ease;
}
.tk-rail i.lit{background:var(--ink);}

@media (max-width:900px){
  .takeover{height:400vh;}
  .tk-fig{width:52vw;height:44vh;right:-4%;opacity:.42;}
  .tk-meta{left:7%;right:7%;bottom:9%;max-width:none;}
  .tk-meta p{font-size:16px;}
  .tk-word{top:36%;}
}

/* ---------- 2. CINEMATIC INTRO ---------- */
.intro{display:none;}
html.intro-lock body{overflow:hidden;}
html.intro-armed .intro{
  display:grid;place-items:center;
  position:fixed;inset:0;z-index:2000;
  text-align:center;
}
/* A disc of pure border: the hole is the element's content box, so at
   width:0 the screen is solid, and growing the width opens the site up
   from the middle. Sits under the logo, above the page. */
.intro-iris{
  position:fixed;
  left:50%;top:46%;
  transform:translate(-50%,-50%);
  box-sizing:content-box;
  width:0;height:0;
  border-radius:50%;
  border:110vmax solid var(--bg);
  z-index:0;
}
.intro-inner{position:relative;z-index:2;}
.intro-skip{z-index:3;}
/* Two beats, in order: the logo pushes in at you, and only then does the
   site open out of the middle of it. */
.intro.out{pointer-events:none;animation:introSafety 2s linear forwards;}
/* last-resort reveal if anything below misfires */
@keyframes introSafety{0%,96%{opacity:1;}100%{opacity:0;}}

/* Outro, two beats. The badge winds up and grows to its full laid-out size
   (scale 1, still sharp). Then, rather than pushing the image on into soft
   pixels, a thin gradient ring breaks out from the badge's edge and sweeps
   past the screen, opening the site inside it while the badge dissolves.
   Only the ring and the opening keep growing, and both are drawn by CSS, so
   they stay crisp at any size. */
.intro.out .intro-logo{animation:introZoom 2s linear forwards;}
@keyframes introZoom{
  0%{transform:scale(calc(1 / var(--logo-z)));opacity:1;animation-timing-function:cubic-bezier(.3,0,.6,1);}
  10%{transform:scale(calc(.84 / var(--logo-z)));opacity:1;animation-timing-function:cubic-bezier(.2,.8,.3,1);}   /* wind-up, as the spokes land */
  19%{transform:scale(calc(1.08 / var(--logo-z)));opacity:1;animation-timing-function:cubic-bezier(.45,0,.3,1);} /* the punch */
  50%{transform:scale(1);opacity:1;animation-timing-function:cubic-bezier(.3,0,.7,1);}                              /* full size, still sharp */
  74%{transform:scale(1.06);opacity:0;}
  100%{transform:scale(1.06);opacity:0;}
}
/* the dark backdrop opens from exactly the badge's edge... */
.intro.out .intro-iris{animation:irisOpen .95s cubic-bezier(.55,0,.25,1) 1s forwards;}
@keyframes irisOpen{
  0%{width:calc(var(--logo) * var(--logo-z));height:calc(var(--logo) * var(--logo-z));}
  100%{width:260vmax;height:260vmax;}
}
/* ...led by a thin gradient ring riding the edge of the opening */
.intro-ring{
  position:fixed;
  left:50%;top:46%;
  transform:translate(-50%,-50%);
  width:0;height:0;
  border-radius:50%;
  background:conic-gradient(from 200deg,var(--blue),var(--cyan) 22%,var(--magenta) 48%,var(--orange) 72%,var(--amber) 86%,var(--blue));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px));
  opacity:0;
  z-index:1;
  pointer-events:none;
}
.intro.out .intro-ring{animation:ringOut .95s cubic-bezier(.55,0,.25,1) 1s forwards;}
@keyframes ringOut{
  0%{width:calc(var(--logo) * var(--logo-z));height:calc(var(--logo) * var(--logo-z));opacity:1;}
  78%{opacity:1;}
  100%{width:260vmax;height:260vmax;opacity:0;}
}
.intro.out .intro-words,
.intro.out .intro-title,
.intro.out .intro-skip{animation:introClear .22s ease forwards;}
@keyframes introClear{to{opacity:0;transform:translateY(-10px);}}
/* The badge is laid out at its LARGEST on-screen size (--logo x --logo-z)
   and shown scaled down, instead of laid out small and scaled up. A
   transformed image is rasterised at its layout size, so growing towards
   scale(1) stays sharp all the way; scaling a small image up past its
   layout size is what turned the old zoom into soft pixels. 5x keeps the
   1254px source at or above one image pixel per device pixel even on
   2-3x phone screens. */
.intro{--logo:clamp(84px,13vw,116px);--logo-z:5;}
/* a fixed-width block isn't centred by the intro's text-align, so centre
   it explicitly — without this the badge sat at the left of the stack */
.intro-badge{width:var(--logo);height:var(--logo);margin-inline:auto;}
.intro-logo{
  position:absolute;
  left:50%;top:50%;
  width:calc(var(--logo) * var(--logo-z));
  height:calc(var(--logo) * var(--logo-z));
  margin-left:calc(var(--logo) * var(--logo-z) / -2);
  margin-top:calc(var(--logo) * var(--logo-z) / -2);
  border-radius:50%;object-fit:cover;
  transform:scale(calc(1 / var(--logo-z)));
  animation:introLogo .75s cubic-bezier(.2,.85,.25,1) both;
}
@keyframes introLogo{
  0%{opacity:0;transform:scale(calc(.55 / var(--logo-z))) rotate(-14deg);}
  100%{opacity:1;transform:scale(calc(1 / var(--logo-z))) rotate(0);}
}
.intro-words{
  position:relative;
  height:1.05em;
  margin-top:30px;
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-style:italic;
  font-size:clamp(38px,8vw,86px);
  line-height:1.05;
}
.intro-words span{
  position:absolute;left:50%;top:0;
  transform:translateX(-50%);
  white-space:nowrap;
  opacity:0;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:introSlam .46s cubic-bezier(.2,.9,.25,1) both;
}
.intro-words span:nth-child(1){background-image:var(--grad-perform);animation-delay:.46s;}
.intro-words span:nth-child(2){background-image:var(--grad-think);animation-delay:.74s;}
.intro-words span:nth-child(3){background-image:var(--grad-build);animation-delay:1.02s;}
.intro-words span:nth-child(4){background-image:var(--grad-solve);animation-delay:1.30s;}
@keyframes introSlam{
  0%{opacity:0;transform:translateX(-50%) scale(1.5);}
  15%{opacity:1;transform:translateX(-50%) scale(1);}
  75%{opacity:1;transform:translateX(-50%) scale(1);}
  100%{opacity:0;transform:translateX(-50%) scale(.92);}
}
.intro-title{
  margin-top:8px;
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-style:italic;
  font-size:clamp(30px,6vw,64px);
  line-height:1.05;
  opacity:0;
  animation:introTitle .65s cubic-bezier(.2,.85,.25,1) 1.60s both;
}
.intro-title em{
  font-style:italic;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  background-image:var(--grad-move);
}
@keyframes introTitle{
  0%{opacity:0;transform:translateY(22px);}
  100%{opacity:1;transform:translateY(0);}
}
.intro-skip{
  position:absolute;right:22px;bottom:20px;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;
  color:var(--muted);background:none;border:0;cursor:pointer;
  padding:10px;
}
.intro-skip:hover{color:var(--ink);}

/* ---------- 3. COUNTDOWN ----------
   A split-flap board. Every digit card always has the same layers: a
   static top half and bottom half, and — only while that digit changes —
   two flaps. Both halves draw the glyph at the card's full height and just
   slice it, so every digit shares one baseline no matter which cards have
   flipped. (The old version centred a digit only after its first flip;
   untouched cards were plain text on a different line, which is what
   pushed the 4 out of line.) Upright tabular numerals, so 4 and 1 are the
   same width as 0 and 8. */
.countdown{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--bg-soft);
  padding:52px 0 46px;
  text-align:center;
}
.countdown .eyebrow{display:block;margin-bottom:30px;}
.cd-grid{
  --cd-w:clamp(27px,7.2vw,78px);
  --cd-h:clamp(38px,10vw,108px);
  --cd-r:calc(var(--cd-w) * .16);
  display:flex;justify-content:center;align-items:flex-start;
  gap:clamp(6px,1.6vw,20px);
}
.cd-unit{display:flex;flex-direction:column;align-items:center;gap:14px;}
.cd-digits{display:flex;gap:clamp(3px,.7vw,8px);}

.cd-cell{
  position:relative;
  width:var(--cd-w);height:var(--cd-h);
  perspective:calc(var(--cd-h) * 4);
  border-radius:var(--cd-r);
  box-shadow:0 12px 26px rgba(0,0,0,.38), inset 0 0 0 1px var(--line);
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;font-style:normal;
  font-variant-numeric:tabular-nums;
  font-size:calc(var(--cd-h) * .72);
  color:var(--ink);
}
.cd-half,.cd-flap{
  position:absolute;left:0;right:0;
  height:50%;
  overflow:hidden;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
}
.cd-top,.cd-flap-top{
  top:0;
  border-radius:var(--cd-r) var(--cd-r) 0 0;
  background:linear-gradient(180deg,#171d38,#121832);
  transform-origin:50% 100%;
}
.cd-bottom,.cd-flap-bottom{
  bottom:0;
  border-radius:0 0 var(--cd-r) var(--cd-r);
  background:linear-gradient(180deg,#0f1429,#0b1023);
  transform-origin:50% 0;
}
.cd-half b,.cd-flap b{
  position:absolute;left:0;right:0;
  height:var(--cd-h);
  line-height:var(--cd-h);
  text-align:center;
  font-weight:inherit;
}
.cd-top b,.cd-flap-top b{top:0;}
.cd-bottom b,.cd-flap-bottom b{bottom:0;}

/* the hinge line across the middle of every card */
.cd-cell::after{
  content:"";
  position:absolute;left:0;right:0;top:50%;
  height:2px;margin-top:-1px;
  background:rgba(6,8,18,.92);
  z-index:3;
}

/* the flip: old top leaf falls away, then the new bottom leaf lands */
.cd-flap{z-index:2;}
.cd-flap-top{animation:cdFlapTop .3s cubic-bezier(.55,0,.9,.45) forwards;}
.cd-flap-bottom{transform:rotateX(90deg);animation:cdFlapBottom .3s cubic-bezier(.12,.62,.4,1) .3s forwards;}
@keyframes cdFlapTop{from{transform:rotateX(0);}to{transform:rotateX(-90deg);}}
@keyframes cdFlapBottom{from{transform:rotateX(90deg);}to{transform:rotateX(0);}}
.cd-flap-top::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.45));
  opacity:0;
  animation:cdShade .3s ease-in forwards;
}
@keyframes cdShade{to{opacity:1;}}

/* separators: two dots, centred on the cards */
.cd-sep{
  height:var(--cd-h);
  display:flex;flex-direction:column;justify-content:center;
  gap:calc(var(--cd-h) * .18);
}
.cd-sep i{
  display:block;
  width:clamp(4px,.7vw,7px);height:clamp(4px,.7vw,7px);
  border-radius:50%;
  background:var(--muted-2);
}
.cd-label{
  font-family:'JetBrains Mono',monospace;
  font-size:10.5px;letter-spacing:.18em;color:var(--muted);
}
@media (max-width:480px){
  .cd-label{font-size:9px;letter-spacing:.12em;}
  .cd-unit{gap:10px;}
}
.cd-done{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-style:italic;
  font-size:clamp(30px,6vw,64px);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  background-image:var(--grad-1);
}

/* ---------- 4. PAGE TRANSITION CURTAIN ---------- */
.curtain{
  position:fixed;inset:0;z-index:1500;
  background:var(--grad-1);
  transform:translateY(100%);
  pointer-events:none;
  will-change:transform;
}
.curtain.in{animation:curtainIn .48s cubic-bezier(.7,0,.3,1) forwards;}
.curtain.out{animation:curtainOut .62s cubic-bezier(.7,0,.3,1) forwards;}
@keyframes curtainIn{from{transform:translateY(100%);}to{transform:translateY(0);}}
@keyframes curtainOut{from{transform:translateY(0);}to{transform:translateY(-100%);}}

@media (prefers-reduced-motion: reduce){
  /* the takeover collapses into four plain stacked panels */
  .takeover{height:auto;}
  .takeover-stage{position:static;height:auto;overflow:visible;}
  .tk-chapter{position:relative;inset:auto;opacity:1 !important;min-height:70vh;}
  .tk-word{position:static;transform:none;text-align:center;display:block;padding:40px 0 0;}
  .tk-meta{position:static;transform:none;margin:0 auto 40px;padding:0 6%;}
  .tk-fig,.tk-rail{display:none;}
  .intro{display:none !important;}
  .intro-streaks,.intro-inner,.intro-fig,.intro-charge{animation:none !important;}
  .curtain{display:none;}
  .cd-flap{display:none;animation:none !important;}
}


/* ============================================================
   OPENING ACTION — speed lines, impact jolt, character cameos,
   and a charge-up before the launch.
   ============================================================ */

/* ---- speed lines: the streaks already in the logo, run full-frame ---- */
.intro-streaks{
  position:fixed;inset:0;z-index:1;
  overflow:hidden;
  pointer-events:none;
}
.intro-streaks i{
  position:absolute;
  left:-60%;
  height:3px;
  width:55vw;
  border-radius:3px;
  transform:rotate(-18deg);
  opacity:0;
  animation:streakRun 1.05s linear infinite;
}
.intro-streaks i:nth-child(1){top:12%;animation-delay:.20s;animation-duration:0.96s;background:linear-gradient(90deg,transparent,var(--cyan),transparent);}
.intro-streaks i:nth-child(2){top:22%;animation-delay:.46s;animation-duration:1.26s;background:linear-gradient(90deg,transparent,#fff,transparent);}
.intro-streaks i:nth-child(3){top:31%;animation-delay:.12s;animation-duration:1.10s;background:linear-gradient(90deg,transparent,var(--magenta),transparent);}
.intro-streaks i:nth-child(4){top:40%;animation-delay:.62s;animation-duration:0.89s;background:linear-gradient(90deg,transparent,var(--amber),transparent);}
.intro-streaks i:nth-child(5){top:49%;animation-delay:.30s;animation-duration:1.38s;background:linear-gradient(90deg,transparent,#fff,transparent);}
.intro-streaks i:nth-child(6){top:58%;animation-delay:.72s;animation-duration:1.03s;background:linear-gradient(90deg,transparent,var(--green),transparent);}
.intro-streaks i:nth-child(7){top:67%;animation-delay:.24s;animation-duration:1.18s;background:linear-gradient(90deg,transparent,var(--violet),transparent);}
.intro-streaks i:nth-child(8){top:76%;animation-delay:.54s;animation-duration:0.96s;background:linear-gradient(90deg,transparent,var(--cyan),transparent);}
.intro-streaks i:nth-child(9){top:85%;animation-delay:.38s;animation-duration:1.30s;background:linear-gradient(90deg,transparent,var(--orange),transparent);}
.intro-streaks i:nth-child(10){top:94%;animation-delay:.66s;animation-duration:1.08s;background:linear-gradient(90deg,transparent,#fff,transparent);}
@keyframes streakRun{
  0%{transform:translateX(0) rotate(-18deg);opacity:0;}
  12%{opacity:.85;}
  70%{opacity:.85;}
  100%{transform:translateX(200vw) rotate(-18deg);opacity:0;}
}
.intro.out .intro-streaks{animation:streakClear .18s ease forwards;}
@keyframes streakClear{to{opacity:0;}}

/* ---- the screen takes a hit on every word ---- */
.intro-inner,.intro-streaks{animation:introJolt 1.9s linear both;}
@keyframes introJolt{
  0%,27%{transform:translate3d(0,0,0) scale(1);}
  27.8%{transform:translate3d(-7px,4px,0) scale(1.014);}
  30.2%,41.8%{transform:translate3d(0,0,0) scale(1);}
  42.6%{transform:translate3d(6px,-4px,0) scale(1.014);}
  45%,56.5%{transform:translate3d(0,0,0) scale(1);}
  57.3%{transform:translate3d(-5px,-5px,0) scale(1.016);}
  59.7%,71.3%{transform:translate3d(0,0,0) scale(1);}
  72.1%{transform:translate3d(5px,5px,0) scale(1.02);}
  74.5%,100%{transform:translate3d(0,0,0) scale(1);}
}

/* ---- each track's character flashes up behind its word ---- */
.intro-figs{position:fixed;inset:0;z-index:1;pointer-events:none;}
/* They alternate sides so each one clears the badge instead of wearing it,
   and the sequence gets a left-right rhythm. */
.intro-fig{
  position:absolute;
  left:50%;top:50%;
  width:min(46vw,420px);
  height:min(62vh,520px);
  opacity:0;
  transform:translate(calc(-50% + var(--fx)),-50%);
  animation:figFlash .46s cubic-bezier(.2,.9,.25,1) both;
}
.intro-fig:nth-child(odd){--fx:-17vw;}
.intro-fig:nth-child(even){--fx:17vw;}
.intro-fig:nth-child(1){animation-delay:.46s;}
.intro-fig:nth-child(2){animation-delay:.74s;}
.intro-fig:nth-child(3){animation-delay:1.02s;}
.intro-fig:nth-child(4){animation-delay:1.30s;}
@keyframes figFlash{
  0%{opacity:0;transform:translate(calc(-50% + var(--fx)),-50%) scale(.88);}
  22%{opacity:.6;transform:translate(calc(-50% + var(--fx)),-50%) scale(1);}
  72%{opacity:.6;transform:translate(calc(-50% + var(--fx)),-50%) scale(1);}
  100%{opacity:0;transform:translate(calc(-50% + var(--fx)),-50%) scale(1.06);}
}
@media (max-width:700px){
  .intro-fig{width:66vw;height:50vh;}
  .intro-fig:nth-child(odd){--fx:-13vw;}
  .intro-fig:nth-child(even){--fx:13vw;}
}

/* ---- charge-up: spokes rush in, the badge winds up, then fires ---- */
.intro-badge{position:relative;display:grid;place-items:center;}
.intro-charge{
  position:absolute;left:50%;top:50%;
  width:0;height:0;
  opacity:0;
  pointer-events:none;
}
.intro-charge i{
  position:absolute;left:0;top:0;
  width:3px;height:34px;
  margin:-17px 0 0 -1.5px;
  border-radius:3px;
}
.intro-charge i:nth-child(1){transform:rotate(0deg) translateY(-58px);background:linear-gradient(var(--amber),transparent);}
.intro-charge i:nth-child(2){transform:rotate(60deg) translateY(-58px);background:linear-gradient(var(--cyan),transparent);}
.intro-charge i:nth-child(3){transform:rotate(120deg) translateY(-58px);background:linear-gradient(var(--magenta),transparent);}
.intro-charge i:nth-child(4){transform:rotate(180deg) translateY(-58px);background:linear-gradient(var(--amber),transparent);}
.intro-charge i:nth-child(5){transform:rotate(240deg) translateY(-58px);background:linear-gradient(var(--green),transparent);}
.intro-charge i:nth-child(6){transform:rotate(300deg) translateY(-58px);background:linear-gradient(var(--violet),transparent);}
.intro.out .intro-charge{animation:chargeIn .40s cubic-bezier(.4,0,.6,1) forwards;}
@keyframes chargeIn{
  0%{opacity:0;transform:translate(-50%,-50%) scale(9) rotate(0deg);}
  35%{opacity:1;}
  100%{opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(38deg);}
}

/* ---- PERFORM categories ----
   Eleven cards on the expect-grid look. Eleven never fills a grid evenly,
   and the grid's 1px line colour would show in the empty cell, so the last
   card ("Other / Unique Talent") spans two columns wherever there are at
   least two: 4 cols -> 4/4/2+2, 2 cols -> 2x5 + 2. */
.cat-grid{grid-template-columns:repeat(4,1fr);}
.cat-grid .cat-card{position:relative;min-height:168px;padding:34px 26px;}
.cat-grid .cat-card:last-child{grid-column:span 2;}
.cat-num{
  position:absolute;top:22px;right:24px;
  font-family:'JetBrains Mono',monospace;
  font-size:12px;letter-spacing:.12em;
  color:var(--muted-2);
}
.cat-grid .cat-note{
  font-family:inherit;
  font-size:13.5px;font-weight:400;
  color:var(--muted);
  margin-top:-8px;
  line-height:1.5;
}
@media (max-width:900px){
  .cat-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .cat-grid{grid-template-columns:1fr;}
  .cat-grid .cat-card:last-child{grid-column:auto;}
  .cat-grid .cat-card{min-height:auto;flex-direction:row;align-items:center;padding:22px 22px;}
  .cat-grid .cat-note{display:none;}
}