/* =====================================================================
   Nextin.py - 1-on-1 online tutoring for kids and teens
   Playful-professional redesign.

   Palette: cool sky-tinted base, navy ink, brand tomato accent (carried
   from the logo mark). Four subject colours (sun, sky, mint, berry) are
   semantic: each subject owns one, and they only reappear for
   celebration moments (stat bubbles, confetti, the scroll bar).

   Shape rule: cards 28px, inner panels 18px, every interactive control
   is a full pill, avatars and badges are circles.

   Theme: follows prefers-color-scheme, with data-theme overrides.
   Motion: everything animated is gated behind prefers-reduced-motion.
   Z-index scale: page 0-2, header 40, confetti 90, progress 95, modal 100.
   ===================================================================== */

:root{
  --bg:#F4F7FE;
  --bg-2:#E9EFFC;
  --panel:#FDFDFF;

  --ink:#15203B;
  --ink-2:#46526E;
  --ink-3:#5C6784;
  --line:#DAE2F3;

  --accent:#D63C24;
  --accent-deep:#A62B16;
  --accent-ink:#BF3219;
  --on-accent:#FFF9F6;
  --accent-wash:#FDE6E1;

  --sun:#FFC53D;   --sun-edge:#D99A06;   --sun-ink:#825400;  --sun-wash:#FFF2CC;
  --sky:#3B94F0;   --sky-edge:#1F6CC4;   --sky-ink:#1A5FAF;  --sky-wash:#E2EEFF;
  --mint:#1FB58F;  --mint-edge:#128064;  --mint-ink:#0C6E54; --mint-wash:#D8F5EA;
  --berry:#EE5A99; --berry-edge:#BC3874; --berry-ink:#AD2A63;--berry-wash:#FDE3EE;

  --navy:#15203B;          /* fixed dark surface: code block, CTA card */
  --on-navy:#EEF2FF;
  --on-navy-2:#B6C1E4;

  --hack-bg:#FFD24F;
  --hack-ink:#15203B;
  --hack-ink-2:#4B3C10;

  --blob-o:.5;
  --shadow:0 22px 44px -22px rgba(31,56,120,.35);
  --shadow-soft:0 10px 30px -18px rgba(31,56,120,.3);

  --r:28px;
  --r-m:18px;
  --pill:999px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --wrap:1180px;

  --font-display:'Fredoka','Nunito',system-ui,sans-serif;
  --font-body:'Nunito',system-ui,'Segoe UI',Helvetica,Arial,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0E1427;
    --bg-2:#131B33;
    --panel:#18213D;
    --ink:#EDF1FF;
    --ink-2:#B4BDD8;
    --ink-3:#95A0BF;
    --line:#29345B;
    --accent:#FF6A4D;
    --accent-deep:#B83E27;
    --accent-ink:#FF8B73;
    --on-accent:#1B0904;
    --accent-wash:#3A1F24;
    --sun:#FFCF5C;   --sun-edge:#A87A10;   --sun-ink:#FFD979;  --sun-wash:#322A17;
    --sky:#5AA8FF;   --sky-edge:#2E6BB8;   --sky-ink:#8CC4FF;  --sky-wash:#1A2B4E;
    --mint:#3ACFA7;  --mint-edge:#1A7B61;  --mint-ink:#6FE0C0; --mint-wash:#133530;
    --berry:#FF79B0; --berry-edge:#B44878; --berry-ink:#FF9DC5;--berry-wash:#36192F;
    --navy:#1A2650;
    --hack-bg:#2C2615;
    --hack-ink:#FFF0C8;
    --hack-ink-2:#DCCB93;
    --blob-o:.22;
    --shadow:0 22px 44px -22px rgba(0,0,0,.7);
    --shadow-soft:0 10px 30px -18px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --bg:#0E1427;
  --bg-2:#131B33;
  --panel:#18213D;
  --ink:#EDF1FF;
  --ink-2:#B4BDD8;
  --ink-3:#95A0BF;
  --line:#29345B;
  --accent:#FF6A4D;
  --accent-deep:#B83E27;
  --accent-ink:#FF8B73;
  --on-accent:#1B0904;
  --accent-wash:#3A1F24;
  --sun:#FFCF5C;   --sun-edge:#A87A10;   --sun-ink:#FFD979;  --sun-wash:#322A17;
  --sky:#5AA8FF;   --sky-edge:#2E6BB8;   --sky-ink:#8CC4FF;  --sky-wash:#1A2B4E;
  --mint:#3ACFA7;  --mint-edge:#1A7B61;  --mint-ink:#6FE0C0; --mint-wash:#133530;
  --berry:#FF79B0; --berry-edge:#B44878; --berry-ink:#FF9DC5;--berry-wash:#36192F;
  --navy:#1A2650;
  --hack-bg:#2C2615;
  --hack-ink:#FFF0C8;
  --hack-ink-2:#DCCB93;
  --blob-o:.22;
  --shadow:0 22px 44px -22px rgba(0,0,0,.7);
  --shadow-soft:0 10px 30px -18px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,svg{max-width:100%;display:block;}
a{color:inherit;}
::selection{background:var(--sun);color:#15203B;}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px;}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:600;
  margin:0;
  text-wrap:balance;
  letter-spacing:-.01em;
  line-height:1.1;
  color:var(--ink);
}

.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding-inline:32px;
}
@media (max-width:600px){ .wrap{padding-inline:18px;} }

/* ---------- scroll progress (CSS scroll-driven, progressive) ---------- */
.progress{
  position:fixed;top:0;left:0;right:0;height:5px;z-index:95;
  transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,var(--accent),var(--sun),var(--mint),var(--sky),var(--berry));
  pointer-events:none;display:none;
}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .progress{display:block;animation:grow linear both;animation-timeline:scroll(root);}
  }
}
@keyframes grow{ to{transform:scaleX(1);} }

/* ---------- pill eyebrow (used twice on the page) ---------- */
.pill-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 16px 7px 11px;border-radius:var(--pill);
  background:var(--panel);
  box-shadow:inset 0 0 0 2px var(--line);
  font-weight:800;font-size:14px;color:var(--ink-2);
}
.pill-eyebrow i{font-size:19px;color:var(--accent);}

/* ---------- nav ---------- */
header.top{
  position:sticky;top:0;z-index:40;
  padding-top:12px;
}
.nav-row{
  display:flex;align-items:center;gap:16px;
  height:66px;padding:0 10px 0 22px;
  border-radius:var(--pill);
  background:color-mix(in srgb,var(--panel) 84%,transparent);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  box-shadow:inset 0 0 0 1.5px var(--line),var(--shadow-soft);
}
.wordmark{
  display:inline-flex;align-items:center;
  color:var(--ink);text-decoration:none;flex-shrink:0;
  transition:scale .3s var(--spring);
}
.wordmark:hover{scale:1.04;}
.logo{height:24px;width:auto;display:block;}
@media (max-width:600px){ .logo{height:21px;} }

nav.links{
  display:flex;gap:2px;
  font-size:15px;font-weight:700;color:var(--ink-2);
  margin-right:auto;margin-left:18px;
}
nav.links a{
  text-decoration:none;padding:8px 13px;border-radius:var(--pill);
  transition:background .2s var(--ease),color .2s var(--ease),translate .25s var(--spring);
}
nav.links a:hover{background:var(--bg-2);color:var(--ink);translate:0 -1px;}
nav.links a[aria-current]{background:var(--accent-wash);color:var(--accent-ink);}
.nav-cta{flex-shrink:0;}
.nav-cta.btn{padding:12px 20px;font-size:15px;box-shadow:0 4px 0 var(--b-edge);}

.menu-btn{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:46px;height:46px;padding:0;margin-left:auto;
  border:0;background:var(--bg-2);
  border-radius:50%;cursor:pointer;flex-shrink:0;
}
.menu-btn-bar{
  display:block;width:18px;height:2.2px;margin:0 auto;background:var(--ink);border-radius:2px;
  transition:transform .25s var(--spring),opacity .2s var(--ease);
}
.menu-btn[aria-expanded="true"] .menu-btn-bar:nth-child(1){transform:translateY(7.2px) rotate(45deg);}
.menu-btn[aria-expanded="true"] .menu-btn-bar:nth-child(2){opacity:0;}
.menu-btn[aria-expanded="true"] .menu-btn-bar:nth-child(3){transform:translateY(-7.2px) rotate(-45deg);}

.mobile-menu{
  display:none;flex-direction:column;gap:2px;
  margin-top:10px;padding:12px;
  border-radius:var(--r);
  background:var(--panel);
  box-shadow:inset 0 0 0 1.5px var(--line),var(--shadow);
}
.mobile-menu a{
  text-decoration:none;color:var(--ink);font-size:17px;font-weight:700;
  padding:13px 16px;border-radius:var(--r-m);
}
.mobile-menu a:hover{background:var(--bg-2);}
.mobile-menu .btn{justify-content:center;margin-top:8px;}
.mobile-menu .btn:hover{background:var(--accent);}

@media (max-width:1080px){
  .nav-row nav.links,.nav-row .nav-cta{display:none;}
  .menu-btn{display:flex;}
  .mobile-menu.is-open{display:flex;}
}
@media (prefers-reduced-motion:no-preference){
  .mobile-menu.is-open{animation:drop .35s var(--spring);}
}
@keyframes drop{ from{opacity:0;transform:translateY(-10px) scale(.97);} }

/* ---------- buttons: chunky, pressable ---------- */
.btn{
  --b-bg:var(--panel);--b-fg:var(--ink);--b-edge:var(--line);--b-ring:0 0 #0000;
  font-family:var(--font-body);
  font-size:16.5px;font-weight:800;line-height:1;
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 26px;
  border:0;border-radius:var(--pill);
  background:var(--b-bg);color:var(--b-fg);
  box-shadow:var(--b-ring),0 5px 0 var(--b-edge);
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:transform .2s var(--spring),box-shadow .2s var(--ease),background .2s var(--ease);
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--b-ring),0 7px 0 var(--b-edge);}
.btn:active{transform:translateY(5px);box-shadow:var(--b-ring),0 0 0 var(--b-edge);transition-duration:.06s;}
.btn i{font-size:19px;transition:transform .25s var(--spring);}
.btn:hover .ph-arrow-right{transform:translateX(4px);}
.btn-primary{--b-bg:var(--accent);--b-fg:var(--on-accent);--b-edge:var(--accent-deep);}
.btn-soft{--b-ring:inset 0 0 0 2px var(--line);}
.btn-soft:hover{--b-bg:var(--bg-2);}
.btn-lg{font-size:18px;padding:19px 30px;}

/* ---------- section rhythm ---------- */
section[id]{scroll-margin-top:96px;}
.section{padding-block:104px;}
@media (max-width:640px){ .section{padding-block:72px;} }

.head{max-width:62ch;margin-bottom:48px;}
.head h2{font-size:clamp(2rem,4.2vw,3.1rem);}
.head p{color:var(--ink-2);margin:16px 0 0;font-size:1.12rem;max-width:54ch;}
.head-center{text-align:center;margin-inline:auto;}
.head-center p{margin-inline:auto;}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{position:relative;padding-block:48px 72px;isolation:isolate;overflow-x:clip;}
@media (max-width:900px){ .hero{padding-block:28px 56px;} }

.hero-bg{
  position:absolute;inset:-90px 0 0;z-index:-1;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent);
  mask-image:linear-gradient(to bottom,#000 62%,transparent);
}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:var(--blob-o);}
.blob-a{width:440px;height:440px;background:var(--sun);top:-80px;right:10%;}
.blob-b{width:420px;height:420px;background:var(--sky);bottom:-200px;right:-120px;}
.blob-c{width:340px;height:340px;background:var(--berry);top:34%;left:-200px;opacity:calc(var(--blob-o) * .6);}

/* parallax: --mx / --my are set on .hero by main.js, range -1..1 */
.px{
  translate:calc(var(--mx,0) * var(--d,10) * 1px) calc(var(--my,0) * var(--d,10) * 1px);
  transition:translate .7s var(--ease);
}
.shape{position:absolute;}
.s-ring{width:56px;height:56px;border:7px solid var(--sky);border-radius:50%;top:16%;left:47%;}
.s-square{width:34px;height:34px;background:var(--mint);border-radius:10px;rotate:18deg;bottom:4%;left:47%;}
.s-dot{width:18px;height:18px;background:var(--accent);border-radius:50%;top:9%;left:3%;}
.s-star-wrap{bottom:8%;left:2%;}
.s-star{display:block;font-size:42px;color:var(--sun);}
.s-plus{font-size:30px;color:var(--berry);top:10%;right:2%;}
@media (max-width:900px){ .s-ring,.s-square{display:none;} }

.hero-grid{
  display:grid;grid-template-columns:1.18fr .82fr;gap:40px;align-items:center;
}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr;gap:48px;} }

h1.headline{
  font-size:clamp(2.5rem,5vw,3.6rem);
  line-height:1.08;
  letter-spacing:-.015em;
  margin-top:22px;
  position:relative;z-index:0;
}
h1.headline .w{display:inline-block;}
.mark{position:relative;white-space:nowrap;color:var(--accent-ink);}
.mark::after{
  content:"";position:absolute;z-index:-1;
  left:-.06em;right:-.06em;bottom:.02em;height:.26em;
  background:var(--sun);border-radius:var(--pill);
  transform-origin:left center;
}
.hero .sub{
  font-size:1.2rem;color:var(--ink-2);
  max-width:50ch;margin:22px 0 0;line-height:1.6;
}
.hero-actions{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap;align-items:center;}

/* hero collage */
.hero-art{
  position:relative;width:100%;max-width:470px;aspect-ratio:1/1.02;
  margin-inline:auto;
}
@media (max-width:900px){ .hero-art{max-width:400px;} }
.photo{
  position:absolute;margin:0;overflow:hidden;
  background:var(--bg-2);
  border-radius:var(--r);
  box-shadow:0 0 0 8px var(--panel),var(--shadow);
}
.photo img{width:100%;height:100%;object-fit:cover;}
.photo-main{inset:10% 12% 8% 6%;rotate:-3deg;}
.photo-side{width:34%;aspect-ratio:1;right:0;top:0;border-radius:50%;rotate:6deg;}

.sticker{
  position:absolute;z-index:2;
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 16px;border-radius:var(--r-m);
  font-weight:800;line-height:1;
  box-shadow:var(--shadow);
  transition:translate .7s var(--ease),scale .3s var(--spring);
}
.sticker:hover{scale:1.1;}
.sticker > .in{display:inline-flex;align-items:center;gap:8px;}
.st-code{left:-8%;top:18%;background:var(--navy);color:var(--on-navy);font-family:var(--font-mono);font-size:15px;font-weight:600;--rot:-4deg;}
.st-code i{font-size:20px;color:var(--sun);}
.st-code code{font:inherit;}
.st-code .s{color:#6FE0C0;}
.st-math{right:-6%;top:44%;background:var(--sun);color:#15203B;font-family:var(--font-display);font-weight:600;font-size:21px;--rot:5deg;}
.st-lang{left:0;bottom:1%;background:var(--mint);color:#08271F;font-family:var(--font-display);font-weight:600;font-size:21px;border-radius:18px 18px 18px 4px;--rot:-3deg;}
.st-ai{right:14%;bottom:-1%;width:66px;height:66px;padding:0;justify-content:center;border-radius:50%;background:var(--berry);color:#fff;font-size:34px;--rot:8deg;}
.sticker{rotate:var(--rot,0deg);}
@media (max-width:600px){
  .st-code{left:-2%;top:14%;font-size:13.5px;padding:10px 13px;}
  .st-math{right:-1%;font-size:18px;padding:10px 13px;}
  .st-lang{font-size:18px;}
  .st-ai{width:56px;height:56px;font-size:28px;}
}

/* hero choreography */
@media (prefers-reduced-motion:no-preference){
  .rise{animation:rise .75s var(--ease) backwards;}
  .rise-1{animation-delay:.05s;}
  .rise-2{animation-delay:.14s;}
  .rise-3{animation-delay:.24s;}
  .rise-4{animation-delay:.34s;}
  .rise-5{animation-delay:.46s;}
  .rise-6{animation-delay:.56s;}
  .mark::after{animation:swipe .7s var(--ease) .75s backwards;}

  .photo-main{animation:photo-in .9s var(--spring) .2s backwards;}
  .photo-side{animation:photo-in .9s var(--spring) .42s backwards;}

  .sticker{animation:pop .7s var(--spring) backwards;}
  .sticker > .in{animation:bob 6s ease-in-out infinite;}
  .st-code{animation-delay:.7s;}
  .st-math{animation-delay:.85s;}
  .st-math > .in{animation-duration:7s;animation-delay:-2s;}
  .st-lang{animation-delay:1s;}
  .st-lang > .in{animation-duration:5.5s;animation-delay:-3s;}
  .st-ai{animation-delay:1.15s;}
  .st-ai > .in{animation-duration:6.5s;animation-delay:-1s;}

  .s-star{animation:spin 16s linear infinite;}
}
@keyframes rise{ from{opacity:0;translate:0 22px;} }
@keyframes swipe{ from{transform:scaleX(0);} }
@keyframes photo-in{ from{opacity:0;scale:.82;} }
@keyframes pop{ from{opacity:0;scale:.3;} }
@keyframes bob{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-11px);}
}
@keyframes spin{ to{rotate:360deg;} }
@keyframes wiggle{
  0%,100%{rotate:0deg;}
  25%{rotate:-12deg;}
  50%{rotate:9deg;}
  75%{rotate:-5deg;}
}

/* ---------- tools ribbon (the one marquee) ---------- */
.ribbon-wrap{overflow-x:clip;padding-block:22px 6px;}
.ribbon{
  background:var(--accent);color:var(--on-accent);
  rotate:-1.6deg;margin-inline:-24px;
  padding-block:15px;overflow:hidden;
  box-shadow:0 6px 0 var(--accent-deep);
}
.ribbon-track{display:flex;width:max-content;}
.ribbon ul{
  display:flex;gap:30px;margin:0;padding:0 15px;list-style:none;
  font-family:var(--font-display);font-weight:600;font-size:1.3rem;white-space:nowrap;line-height:1.2;
}
.ribbon li{display:flex;align-items:center;gap:30px;}
.ribbon li i{font-size:20px;color:var(--sun);}
@media (prefers-reduced-motion:no-preference){
  .ribbon-track{animation:marquee 40s linear infinite;}
  .ribbon:hover .ribbon-track{animation-play-state:paused;}
}
@media (prefers-reduced-motion:reduce){
  .ribbon ul[aria-hidden="true"]{display:none;}
  .ribbon-track,.ribbon ul{flex-wrap:wrap;width:auto;justify-content:center;white-space:normal;}
}
@keyframes marquee{ to{transform:translateX(-50%);} }

/* ---------- stat bubbles ---------- */
.stats{
  display:flex;flex-wrap:wrap;justify-content:center;gap:18px;
  padding-top:64px;
}
.bubble{
  --c-wash:var(--sky-wash);--c-ink:var(--sky-ink);--tilt:-3deg;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;min-width:176px;padding:24px 26px;
  border-radius:var(--r);
  background:var(--c-wash);
  rotate:var(--tilt);
  transition:rotate .35s var(--spring),scale .35s var(--spring);
}
.bubble:hover{rotate:0deg;scale:1.06;}
.bubble b{
  font-family:var(--font-display);font-weight:600;
  font-size:2.3rem;line-height:1;color:var(--c-ink);
  font-variant-numeric:tabular-nums;
}
.bubble span{margin-top:8px;font-weight:700;font-size:14.5px;color:var(--ink-2);max-width:18ch;line-height:1.35;}
.b-sun{--c-wash:var(--sun-wash);--c-ink:var(--sun-ink);--tilt:2deg;}
.b-mint{--c-wash:var(--mint-wash);--c-ink:var(--mint-ink);--tilt:-1.5deg;}
.b-berry{--c-wash:var(--berry-wash);--c-ink:var(--berry-ink);--tilt:3deg;}
.b-accent{--c-wash:var(--accent-wash);--c-ink:var(--accent-ink);--tilt:-2deg;}
@media (max-width:600px){
  .stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  .bubble{min-width:0;padding:20px 14px;}
  .bubble:last-child{grid-column:1 / -1;}
  .bubble b{font-size:2rem;}
}

/* =====================================================================
   SUBJECTS BENTO
   ===================================================================== */
.bento{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;
}
.tile{
  --t:var(--sky);--t-wash:var(--sky-wash);--t-ink:var(--sky-ink);--t-edge:var(--sky-edge);
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:12px;
  padding:28px;border-radius:var(--r);
  background:var(--t-wash);
  transition:translate .4s var(--spring),box-shadow .4s var(--ease);
}
.tile:hover{translate:0 -6px;box-shadow:var(--shadow);}
.t-code{grid-column:span 2;grid-row:span 2;}
.t-math{--t:var(--sun);--t-wash:var(--sun-wash);--t-ink:var(--sun-ink);--t-edge:var(--sun-edge);}
.t-eng{--t:var(--berry);--t-wash:var(--berry-wash);--t-ink:var(--berry-ink);--t-edge:var(--berry-edge);}
.t-ger{--t:var(--mint);--t-wash:var(--mint-wash);--t-ink:var(--mint-ink);--t-edge:var(--mint-edge);}
.t-ai{--t:var(--accent);--t-wash:var(--accent-wash);--t-ink:var(--accent-ink);--t-edge:var(--accent-deep);}

.ico{
  width:56px;height:56px;border-radius:18px;flex-shrink:0;
  display:grid;place-items:center;
  background:var(--t);color:#15203B;font-size:30px;
  box-shadow:0 4px 0 var(--t-edge);
}
.t-ai .ico{color:#fff;}
.tile h3{font-size:1.4rem;margin-top:6px;}
.t-code h3{font-size:clamp(1.5rem,2.4vw,1.9rem);}
.tile p{margin:0;color:var(--ink-2);font-size:1rem;}
.taglist{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:6px;}
.tag{
  font-size:13.5px;font-weight:700;line-height:1.2;
  color:var(--t-ink);
  padding:7px 13px;border-radius:var(--pill);
  background:var(--panel);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--t) 40%,transparent);
  transition:translate .25s var(--spring),background .2s var(--ease);
}
.tag:hover{translate:0 -2px;}
@media (prefers-reduced-motion:no-preference){
  .tile:hover .ico{animation:wiggle .6s var(--ease);}
}

/* live code block in the coding tile */
.code{
  margin:6px 0 4px;
  background:var(--navy);color:#DCE6FF;
  border-radius:var(--r-m);
  padding:18px 20px 20px;
  font-family:var(--font-mono);font-size:15px;line-height:1.75;
  box-shadow:0 5px 0 var(--sky-edge);
  overflow:hidden;
}
.code .file{
  display:flex;align-items:center;gap:6px;
  font-family:var(--font-body);font-size:12.5px;font-weight:800;color:#93A2CC;margin-bottom:8px;
}
.code .file i{font-size:15px;color:var(--sun);}
.code .ln{display:block;white-space:pre;overflow:hidden;max-width:100%;}
.code .out{color:#FF9DC5;line-height:1.5;}
.code .out.first{margin-top:10px;}
.code .k{color:#FFC53D;}
.code .s{color:#6FE0C0;}
.code .f{color:#8CC4FF;}
.caret{
  display:inline-block;width:.6ch;height:1.15em;margin-left:2px;
  background:var(--sun);vertical-align:-.22em;border-radius:2px;
}
@media (prefers-reduced-motion:no-preference){
  /* base width is the full line; the animation only supplies the start,
     so the resting state never depends on step rounding */
  .js .reveal .code .ln{width:0;}
  .js .reveal.in .code .ln{
    width:calc(var(--n) * 1ch);
    animation:type calc(var(--n) * 45ms + 60ms) steps(var(--n)) backwards;
    animation-delay:var(--at);
  }
  .caret{animation:blink 1s steps(1) infinite;}
}
@keyframes type{ from{width:0;} }
@keyframes blink{ 50%{opacity:0;} }

@media (max-width:980px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));}
  .t-code{grid-row:auto;}
}
@media (max-width:620px){
  .bento{grid-template-columns:1fr;}
  .t-code{grid-column:auto;}
  .tile{padding:24px;}
}

/* =====================================================================
   HOW IT WORKS: journey path
   ===================================================================== */
.journey{
  position:relative;list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;
}
.journey-path{
  position:absolute;z-index:0;
  left:16.66%;width:66.68%;top:2px;height:120px;
  overflow:visible;pointer-events:none;
}
.journey-path path{fill:none;stroke-linecap:round;}
.journey-path .track{stroke:var(--line);stroke-width:5;stroke-dasharray:1 14;}
.journey-path .draw{stroke:var(--accent);stroke-width:5;}
.stop{
  --s:var(--sky);--s-edge:var(--sky-edge);--s-wash:var(--sky-wash);--s-ink:var(--sky-ink);
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.stop:nth-child(3){--s:var(--sun);--s-edge:var(--sun-edge);--s-wash:var(--sun-wash);--s-ink:var(--sun-ink);}
.stop:nth-child(4){--s:var(--mint);--s-edge:var(--mint-edge);--s-wash:var(--mint-wash);--s-ink:var(--mint-ink);}
.stop-badge{
  width:124px;height:124px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--s);color:#15203B;font-size:56px;
  box-shadow:0 0 0 10px var(--bg),0 18px 0 -2px var(--s-edge);
  transition:rotate .4s var(--spring),scale .4s var(--spring);
}
.stop:hover .stop-badge{rotate:-8deg;scale:1.06;}
.dur{
  display:inline-flex;align-items:center;gap:6px;margin-top:30px;
  padding:6px 13px;border-radius:var(--pill);
  background:var(--s-wash);color:var(--s-ink);
  font-size:13.5px;font-weight:800;
}
.dur i{font-size:16px;}
.stop h3{font-size:1.45rem;margin-top:14px;}
.stop p{color:var(--ink-2);margin:10px 0 0;max-width:34ch;font-size:1rem;}

@media (prefers-reduced-motion:no-preference){
  .js .journey .draw{stroke-dasharray:1;stroke-dashoffset:1;}
  .js .journey.in .draw{animation:draw 1.6s var(--ease) .2s forwards;}
  .js .journey .stop-badge{scale:.4;opacity:0;}
  .js .journey.in .stop-badge{scale:1;opacity:1;transition:scale .7s var(--spring),opacity .3s var(--ease),rotate .4s var(--spring);}
  .js .journey.in .stop:nth-child(2) .stop-badge{transition-delay:.15s;}
  .js .journey.in .stop:nth-child(3) .stop-badge{transition-delay:.75s;}
  .js .journey.in .stop:nth-child(4) .stop-badge{transition-delay:1.35s;}
  .js .journey.in .stop:hover .stop-badge{transition-delay:0s;}
}
@keyframes draw{ to{stroke-dashoffset:0;} }

@media (max-width:820px){
  .journey{grid-template-columns:1fr;gap:28px;}
  .journey-path{display:none;}
  .stop{
    display:grid;grid-template-columns:84px 1fr;column-gap:20px;
    text-align:left;align-items:start;
  }
  .stop-badge{width:84px;height:84px;font-size:40px;grid-row:span 4;box-shadow:0 10px 0 -2px var(--s-edge);}
  .dur{margin-top:4px;justify-self:start;}
  .stop h3{margin-top:10px;}
}

/* =====================================================================
   INSTRUCTORS
   ===================================================================== */
.teach{
  display:grid;grid-template-columns:.8fr 1.2fr;gap:72px;align-items:center;
}
@media (max-width:860px){ .teach{grid-template-columns:1fr;gap:48px;} }
.teach-num{
  position:relative;
  width:100%;max-width:320px;aspect-ratio:1;margin-inline:auto;
  border-radius:50%;
  background:var(--sun);color:#15203B;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 12px 0 var(--sun-edge);
}
.teach-num::before{
  content:"";position:absolute;inset:-20px;border-radius:50%;
  border:3px dashed color-mix(in srgb,var(--sun-edge) 70%,transparent);
}
.teach-num b{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(4.2rem,9vw,6.4rem);line-height:.95;
}
.teach-num span{font-weight:800;font-size:15.5px;margin-top:6px;}
.teach-num .orbit{
  position:absolute;width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;font-size:28px;
  box-shadow:var(--shadow-soft);
}
.orbit.o1{background:var(--sky);color:#15203B;top:-4%;left:4%;}
.orbit.o2{background:var(--berry);color:#fff;bottom:2%;right:-4%;}
.orbit.o3{background:var(--mint);color:#15203B;bottom:-6%;left:14%;width:46px;height:46px;font-size:22px;}
@media (prefers-reduced-motion:no-preference){
  .teach-num::before{animation:spin 40s linear infinite;}
  .orbit{animation:bob 5s ease-in-out infinite;}
  .orbit.o2{animation-delay:-2s;}
  .orbit.o3{animation-delay:-3.5s;animation-duration:6s;}
}
.teach-copy h2{font-size:clamp(2rem,4.2vw,3rem);}
.teach-copy > p{color:var(--ink-2);margin:18px 0 0;font-size:1.12rem;max-width:52ch;}
.fields{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:28px 0 0;}
.fields li{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 17px 10px 12px;border-radius:var(--pill);
  background:var(--panel);box-shadow:inset 0 0 0 2px var(--line);
  font-weight:800;font-size:15px;
  transition:translate .3s var(--spring);
}
.fields li:hover{translate:0 -3px;}
.fields i{font-size:22px;}
.fields li:nth-child(1) i{color:var(--sky-ink);}
.fields li:nth-child(2) i{color:var(--sun-ink);}
.fields li:nth-child(3) i{color:var(--berry-ink);}
.fields li:nth-child(4) i{color:var(--accent-ink);}

/* =====================================================================
   HACKATHONS
   ===================================================================== */
.hack{
  position:relative;overflow:hidden;isolation:isolate;
  display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;
  padding:64px;border-radius:var(--r);
  background:var(--hack-bg);color:var(--hack-ink);
}
@media (max-width:860px){ .hack{grid-template-columns:1fr;gap:44px;padding:44px 26px;} }
.hack h2{color:inherit;font-size:clamp(2rem,4.2vw,3rem);margin-top:20px;}
.hack-copy > p{color:var(--hack-ink-2);margin:18px 0 0;font-size:1.1rem;max-width:50ch;}
.hack .pill-eyebrow{background:color-mix(in srgb,var(--panel) 70%,transparent);box-shadow:none;color:var(--ink);}
.perks{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px;}
.perks li{display:flex;align-items:center;gap:12px;font-weight:800;}
.perks .pk{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;font-size:23px;
  background:color-mix(in srgb,var(--panel) 75%,transparent);color:var(--accent-ink);
}
.hack-deco{position:absolute;z-index:-1;border-radius:50%;pointer-events:none;}
.hack-deco.d1{width:260px;height:260px;right:-80px;top:-90px;background:color-mix(in srgb,var(--panel) 28%,transparent);}
.hack-deco.d2{width:120px;height:120px;left:42%;bottom:-60px;border:14px solid color-mix(in srgb,var(--panel) 32%,transparent);}

.cal-wrap{position:relative;justify-self:center;width:100%;max-width:330px;}
.cal{
  width:100%;
  background:var(--panel);color:var(--ink);
  border-radius:var(--r);
  padding:22px 22px 18px;
  rotate:3deg;
  box-shadow:0 10px 0 color-mix(in srgb,var(--hack-ink) 22%,transparent),var(--shadow);
  transition:rotate .5s var(--spring);
}
.cal-wrap:hover .cal{rotate:0deg;}
.cal-top,.cal-days{display:grid;grid-template-columns:repeat(7,1fr);}
.cal-top{gap:2px;padding-bottom:10px;margin-bottom:8px;border-bottom:2px dashed var(--line);}
.cal-top span{font-size:12px;font-weight:800;color:var(--ink-3);text-align:center;}
.cal-days{gap:4px;}
.cal-days span{
  position:relative;aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:500;font-size:15px;
  color:var(--ink-2);border-radius:50%;
}
.cal-days .is-hack{color:var(--on-accent);font-weight:600;background:var(--accent);}
.cal-ring{
  position:absolute;left:50%;top:50%;
  width:150%;height:150%;
  transform:translate(-50%,-50%);
  color:var(--accent);pointer-events:none;overflow:visible;
}
.cal-ring circle{
  fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round;
  transform:rotate(-90deg);transform-origin:center;
}
@media (prefers-reduced-motion:no-preference){
  .js .cal-ring circle{stroke-dasharray:283;stroke-dashoffset:283;}
  .js .reveal.in .cal-ring circle{animation:ring .8s var(--ease) .35s forwards;}
}
@keyframes ring{ to{stroke-dashoffset:0;} }
.cal-foot{margin-top:14px;font-size:13px;font-weight:800;color:var(--ink-2);text-align:center;}
.trophy{
  position:absolute;right:-18px;top:-24px;z-index:2;
  width:74px;height:74px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--mint);color:#15203B;font-size:38px;
  box-shadow:0 6px 0 var(--mint-edge);
  rotate:12deg;
}
@media (prefers-reduced-motion:no-preference){
  .js .reveal .trophy{scale:0;}
  .js .reveal.in .trophy{scale:1;transition:scale .7s var(--spring) 1s;}
  .cal-wrap:hover .trophy{animation:wiggle .6s var(--ease);}
}

/* =====================================================================
   TESTIMONIALS (carousel mechanics unchanged; main.js depends on the
   24px gap and the slide widths below)
   ===================================================================== */
.section-testimonials{overflow:hidden;}

.carousel-wrapper{
  position:relative;
  max-width:1180px;margin:0 auto;
  padding:0 52px;
}
@media (max-width:640px){ .carousel-wrapper{padding:0 4px;} }

.carousel-viewport{
  overflow:hidden;
  padding:40px 14px 40px;
  margin:-40px -14px -20px;
  touch-action:pan-y;
}
.carousel-track{
  display:flex;gap:24px;
  transition:transform .55s cubic-bezier(.25,1,.5,1);
  will-change:transform;
}
.carousel-slide{flex:0 0 calc((100% - 48px) / 3);min-width:0;}
@media (max-width:960px){ .carousel-slide{flex:0 0 calc((100% - 24px) / 2);} }
@media (max-width:620px){ .carousel-slide{flex:0 0 100%;} }

.tm-card{
  --tc:var(--sky);--tc-wash:var(--sky-wash);--tc-ink:var(--sky-ink);--tilt:-1.2deg;
  position:relative;
  display:flex;flex-direction:column;
  height:100%;
  padding:30px 28px 26px;
  border-radius:var(--r);
  background:var(--panel);
  box-shadow:inset 0 0 0 2px var(--line);
  rotate:var(--tilt);
  transition:rotate .45s var(--spring),scale .45s var(--spring),box-shadow .35s var(--ease);
}
.tone-1{--tc:var(--sun);--tc-wash:var(--sun-wash);--tc-ink:var(--sun-ink);--tilt:.8deg;}
.tone-2{--tc:var(--mint);--tc-wash:var(--mint-wash);--tc-ink:var(--mint-ink);--tilt:-.6deg;}
.tone-3{--tc:var(--berry);--tc-wash:var(--berry-wash);--tc-ink:var(--berry-ink);--tilt:1deg;}
.nowrap{white-space:nowrap;}
.carousel-slide.is-active .tm-card{
  rotate:0deg;scale:1.03;
  box-shadow:inset 0 0 0 2.5px var(--tc),var(--shadow);
}

.tm-mark{
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--tc);color:#15203B;font-size:24px;
  margin-bottom:18px;
}
.tm-quote{margin:0 0 18px;padding:0;border:none;flex-grow:1;}
.tm-quote p{margin:0;font-size:1rem;line-height:1.62;color:var(--ink-2);}
.tm-quote.is-clamped p{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;overflow:hidden;
}
.tm-read-more{
  align-self:flex-start;
  margin:-6px 0 18px;padding:6px 12px;
  border:none;border-radius:var(--pill);
  background:var(--tc-wash);color:var(--tc-ink);
  font-family:var(--font-body);font-size:13px;font-weight:800;
  cursor:pointer;
  transition:translate .25s var(--spring);
}
.tm-read-more:hover{translate:0 -2px;}

.tm-author{
  margin-top:auto;padding-top:16px;
  border-top:2px dashed var(--line);
  display:flex;align-items:center;gap:12px;
}
.tm-avatar{
  width:46px;height:46px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;
  background:var(--tc-wash);color:var(--tc-ink);
  font-family:var(--font-display);font-weight:600;font-size:19px;
}
.tm-who{display:flex;flex-direction:column;min-width:0;}
.tm-name{font-family:var(--font-display);font-weight:600;font-size:1.1rem;color:var(--ink);line-height:1.25;}
.tm-role{font-size:13.5px;font-weight:700;color:var(--tc-ink);line-height:1.35;}
.tm-subtag{font-size:12.5px;color:var(--ink-3);margin-top:10px;display:block;}

/* read-more modal */
.tm-modal-overlay{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:rgba(12,18,38,.6);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.tm-modal-overlay[hidden]{display:none;}
.tm-modal{
  position:relative;width:100%;max-width:580px;max-height:80vh;overflow-y:auto;
  background:var(--panel);border-radius:var(--r);
  padding:48px 34px 30px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.45);
}
@media (prefers-reduced-motion:no-preference){
  .tm-modal-overlay:not([hidden]) .tm-modal{animation:photo-in .45s var(--spring);}
}
.tm-modal-close{
  position:absolute;top:14px;right:14px;
  width:38px;height:38px;border:none;border-radius:50%;
  background:var(--bg-2);color:var(--ink);font-size:22px;line-height:1;cursor:pointer;
}
.tm-modal-close:hover{background:var(--accent-wash);color:var(--accent-ink);}
.tm-modal-quote{margin:0 0 20px;padding:0;border:none;}
.tm-modal-quote p{margin:0;font-size:1.02rem;line-height:1.7;color:var(--ink-2);white-space:pre-line;}
.tm-modal .tm-author{border-top-color:var(--line);}
.tm-modal .tm-role{color:var(--accent-ink);}

/* carousel nav */
.carousel-nav{
  position:absolute;top:50%;z-index:2;
  width:48px;height:48px;border-radius:50%;
  border:none;background:var(--panel);color:var(--ink);
  display:grid;place-items:center;font-size:22px;cursor:pointer;
  box-shadow:inset 0 0 0 2px var(--line),0 4px 0 var(--line);
  transform:translateY(-50%);
  transition:transform .25s var(--spring),background .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease);
}
.carousel-nav:hover{
  background:var(--accent);color:var(--on-accent);
  box-shadow:inset 0 0 0 2px var(--accent),0 4px 0 var(--accent-deep);
  transform:translateY(-50%) scale(1.08);
}
.carousel-nav:active{transform:translateY(calc(-50% + 3px));}
.carousel-prev{left:-2px;}
.carousel-next{right:-2px;}
@media (max-width:640px){ .carousel-nav{display:none;} }

.carousel-dots{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:30px;}
.carousel-dot{
  width:10px;height:10px;border-radius:var(--pill);
  border:none;padding:0;cursor:pointer;
  background:var(--line);
  transition:width .35s var(--spring),background .2s var(--ease);
}
.carousel-dot:hover{background:var(--ink-3);}
.carousel-dot.is-active{background:var(--accent);width:30px;}

/* outcomes row */
.facts{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;
  margin-top:72px;padding-top:36px;
  border-top:2px dashed var(--line);
}
@media (max-width:760px){ .facts{grid-template-columns:1fr;gap:26px;} }
.fact b{
  display:block;font-family:var(--font-display);font-weight:600;
  font-size:2.6rem;line-height:1;margin-bottom:10px;
}
.fact:nth-child(1) b{color:var(--sky-ink);}
.fact:nth-child(2) b{color:var(--accent-ink);}
.fact:nth-child(3) b{color:var(--mint-ink);}
.fact span{color:var(--ink-2);font-size:1rem;display:block;max-width:34ch;}

/* =====================================================================
   REACH + PAY
   ===================================================================== */
.reach-grid{
  display:grid;grid-template-columns:1.55fr 1fr;gap:20px;align-items:stretch;
}
@media (max-width:900px){ .reach-grid{grid-template-columns:1fr;} }
.map-panel{
  display:flex;align-items:center;justify-content:center;
  padding:32px;border-radius:var(--r);
  background:var(--panel);box-shadow:inset 0 0 0 2px var(--line);
}
@media (max-width:640px){ .map-panel{padding:18px;} }
.map-panel img{width:100%;height:auto;}
.pay{
  padding:34px 32px;border-radius:var(--r);
  background:var(--mint-wash);
  display:flex;flex-direction:column;
}
.pay h3{font-size:1.6rem;}
.pay-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px;}
.pay-chip{
  display:flex;align-items:center;justify-content:center;gap:9px;
  min-height:58px;padding:12px 14px;
  border-radius:var(--pill);
  background:var(--panel);
  box-shadow:0 4px 0 color-mix(in srgb,var(--mint-edge) 45%,transparent);
  font-family:var(--font-display);font-weight:600;font-size:16px;
  color:var(--ink);white-space:nowrap;
  transition:translate .3s var(--spring);
}
.pay-chip:hover{translate:0 -3px;}
.pay-chip i{width:10px;height:10px;border-radius:50%;background:var(--brand,var(--accent));flex-shrink:0;}
.pay-note{margin:auto 0 0;padding-top:22px;font-size:14.5px;color:var(--ink-2);max-width:40ch;}

/* =====================================================================
   FOOTER + FINAL CTA
   ===================================================================== */
footer{padding-block:16px 36px;}
.cta-card{
  position:relative;overflow:hidden;isolation:isolate;
  display:grid;grid-template-columns:1fr auto;gap:36px;align-items:center;
  padding:76px 64px;border-radius:var(--r);
  background:var(--navy);color:var(--on-navy);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--on-navy) 10%,transparent);
}
@media (max-width:820px){ .cta-card{grid-template-columns:1fr;padding:56px 28px;gap:28px;} }
.cta-card h2{color:inherit;font-size:clamp(2rem,4.4vw,3.2rem);max-width:15ch;}
.cta-card p{color:var(--on-navy-2);margin:14px 0 0;font-size:1.1rem;max-width:44ch;}
.cta-card .shape{z-index:-1;}
.cta-card .c1{width:190px;height:190px;border-radius:50%;border:22px solid var(--sun);right:-50px;top:-70px;opacity:.9;}
.cta-card .c2{width:46px;height:46px;border-radius:14px;background:var(--mint);left:48%;bottom:22px;rotate:20deg;}
.cta-card .c3{width:22px;height:22px;border-radius:50%;background:var(--berry);left:38%;top:30px;}
.cta-card .c4{font-size:40px;color:var(--sky);right:24%;bottom:18px;}
@media (max-width:820px){ .cta-card .c2,.cta-card .c4{display:none;} }
@media (prefers-reduced-motion:no-preference){
  .cta-card .c1{animation:spin 30s linear infinite;}
  .cta-card .c2,.cta-card .c3{animation:bob 5s ease-in-out infinite;}
  .cta-card .c3{animation-delay:-2.5s;}
  .cta-card .c4{animation:spin 14s linear infinite;}
}

.foot-bottom{
  margin-top:30px;padding-inline:6px;
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:14px 24px;
  font-size:14.5px;color:var(--ink-2);
}
.foot-logo .logo{height:22px;}
.foot-line{color:var(--ink-2);max-width:42ch;flex:1 1 240px;}
.foot-bottom > a[href^="mailto"]{
  font-weight:700;text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:2px;text-decoration-color:var(--line);color:var(--ink-2);
}
.foot-bottom > a[href^="mailto"]:hover{color:var(--accent-ink);text-decoration-color:var(--accent);}
@media (max-width:640px){ .foot-bottom{flex-direction:column;align-items:flex-start;} }

/* ---------- confetti (spawned by main.js) ---------- */
.confetti{position:fixed;inset:0;z-index:90;pointer-events:none;overflow:hidden;}
.confetti i{position:absolute;width:10px;height:14px;border-radius:3px;}

/* =====================================================================
   SCROLL REVEAL
   Content is visible by default; the `js` class (set by main.js) opts
   into the hidden-then-revealed state so a JS failure never blanks a
   section.
   ===================================================================== */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;translate:0 28px;transition:opacity .7s var(--ease),translate .8s var(--ease);}
  .js .reveal.in{opacity:1;translate:0 0;}

  .js .reveal .stagger{opacity:0;translate:0 22px;transition:opacity .55s var(--ease),translate .7s var(--spring);}
  .js .reveal.in .stagger{opacity:1;translate:0 0;}

  .js .reveal .pop{opacity:0;scale:.55;transition:opacity .4s var(--ease),scale .7s var(--spring),rotate .35s var(--spring);}
  .js .reveal.in .pop{opacity:1;scale:1;}
  .js .reveal.in .pop:hover{scale:1.06;}

  .js .reveal.in :is(.stagger,.pop):nth-child(2){transition-delay:.08s;}
  .js .reveal.in :is(.stagger,.pop):nth-child(3){transition-delay:.16s;}
  .js .reveal.in :is(.stagger,.pop):nth-child(4){transition-delay:.24s;}
  .js .reveal.in :is(.stagger,.pop):nth-child(5){transition-delay:.32s;}
  .js .reveal.in :is(.stagger,.pop):nth-child(6){transition-delay:.4s;}
  .js .reveal.in :is(.stagger,.pop):hover{transition-delay:0s;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}