:root{
    --yellow:#ffc857;
    --ink:#111111;
    --f:'Onest', -apple-system, system-ui, sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{-webkit-font-smoothing:antialiased;overflow-x:hidden;}
  html,body{background:#111;}
  body{font-family:var(--f);color:var(--ink);}
  img{display:block;}
  p{margin:0;}

  /* ---- responsive scale via zoom (keeps position:sticky working); off-screen sections are skipped for smooth scroll ---- */
  #stage{width:100%;}
  #scaler{width:1440px;}
  /* skip painting whole sections while they're off-screen (major scroll-perf win) */
  .learn,.show,.blogs{content-visibility:auto;}
  .learn{contain-intrinsic-size:auto 878px;}
  .show{contain-intrinsic-size:auto 849px;}
  .blogs{contain-intrinsic-size:auto 521px;}
  /* how-it-works pin: section stays put while scroll drives its content */
  .how-pin{position:relative;background:#fff;}
  .how-sticky{position:sticky;top:0;overflow:hidden;}

  .page{width:1440px;background:#fff;display:flex;flex-direction:column;align-items:flex-start;}

  /* Desktop-1 frame: exactly 1440x1024 like Figma; hero fills remaining height */
  .desktop1{background:#fff;width:1440px;height:1024px;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;}

  .reg{font-weight:400;}
  .med{font-weight:500;}
  .semi{font-weight:600;}
  .bold{font-weight:700;}

  .btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;border-radius:40px;cursor:pointer;
       font-weight:500;font-size:16px;letter-spacing:.32px;color:var(--ink);white-space:nowrap;text-decoration:none;}
  .btn.yellow{background:var(--yellow);padding:16px 24px;}
  .btn.ghost{border:1px solid #e1e1e1;padding:16px 24px;color:var(--ink);}
  .btn.round{padding:16px;border:1px solid #e1e1e1;border-radius:40px;}
  .ic16{width:16px;height:16px;flex:none;}
  .ic{display:block;}

  /* ===================== TOPBAR ===================== */
  .topbar{background:var(--yellow);display:flex;gap:10px;align-items:center;justify-content:center;padding:10px;width:1440px;}
  .topbar .t{font-size:14px;letter-spacing:.28px;color:var(--ink);white-space:nowrap;font-weight:400;}
  .topbar .join{display:flex;gap:8px;align-items:center;}
  .topbar .join a{font-weight:500;font-size:14px;letter-spacing:.28px;color:var(--ink);text-decoration:underline;text-underline-position:from-font;}

  /* ===================== NAV ===================== */
  .nav{background:#fff;display:flex;align-items:center;justify-content:center;padding:12px 80px;width:1440px;position:sticky;top:0;z-index:50;transition:box-shadow .25s ease;}
  .nav.nav-stuck{box-shadow:0 6px 24px rgba(0,0,0,.08);}
  .nav-in{display:flex;height:43px;align-items:center;justify-content:space-between;width:1280px;}
  .nav-logo{height:30px;width:140px;}
  .nav-links{display:flex;gap:24px;align-items:center;font-weight:400;font-size:16px;letter-spacing:.48px;color:var(--ink);white-space:nowrap;}
  .nav-links a{color:var(--ink);text-decoration:none;}
  .nav-cta{display:flex;gap:6px;align-items:center;}
  .pill{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 20px;border-radius:40px;font-weight:500;font-size:16px;letter-spacing:.32px;color:var(--ink);white-space:nowrap;cursor:pointer;}
  .pill.yellow{background:var(--yellow);}
  .pill.ghost{border:1px solid #e1e1e1;}

  /* ===================== HERO ===================== */
  .hero{position:relative;width:1440px;height:919px;overflow:hidden;}
  .hero .bg{position:absolute;inset:0;pointer-events:none;}
  .hero .bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
  .hero .bg .grad{position:absolute;inset:0;background:linear-gradient(59.224deg, rgba(0,0,0,.8) 15.486%, rgba(0,0,0,.08) 98.535%);}

  .hero-copy{position:absolute;left:64px;top:414px;width:529px;display:flex;flex-direction:column;gap:32px;align-items:flex-start;}
  .eyebrow{font-weight:600;font-size:12px;letter-spacing:4px;color:var(--yellow);white-space:nowrap;}
  .hero-copy .ttl{display:flex;flex-direction:column;gap:12px;color:#fff;}
  .hero-copy h1{font-weight:500;font-size:36px;letter-spacing:-.36px;line-height:.95;width:auto;white-space:nowrap;}
  .hero-copy .sub{font-weight:400;font-size:16px;letter-spacing:.32px;line-height:1.2;width:auto;white-space:nowrap;}

  .membership{position:absolute;left:64px;top:48px;display:flex;gap:14.913px;align-items:center;}
  .avatars{display:flex;align-items:center;}
  .avatars .a{width:54px;height:54px;border-radius:70px;overflow:hidden;display:flex;align-items:center;justify-content:center;}
  .avatars .a img{width:100%;height:100%;object-fit:cover;}
  .avatars .a.b{border:3px solid #fff;margin-right:-12.201px;}
  .avatars .a.o{margin-right:-12.201px;}
  .mtexts{display:flex;flex-direction:column;align-items:flex-start;}
  .mtexts .mc{font-weight:500;font-size:20px;letter-spacing:-.4px;line-height:1.5;color:#fff;}
  .mtexts .md{font-weight:400;font-size:16px;letter-spacing:.32px;line-height:1.2;color:#fff;}

  .deco-square{position:absolute;left:948.31px;top:90px;width:250px;height:250px;overflow:visible;}
  .draw-rect{stroke-dasharray:988;stroke-dashoffset:988;}
  .play .draw-rect{animation:draw988 1.5s cubic-bezier(.6,.02,.2,1) .55s forwards;}
  @keyframes draw988{to{stroke-dashoffset:0;}}
  .deco-br{position:absolute;left:948.31px;top:290px;width:50px;height:50px;opacity:0;}
  .deco-tr{position:absolute;left:1146.94px;top:91.53px;width:50px;height:50px;transform:rotate(180deg);opacity:0;}
  .play .deco-br,.play .deco-tr{animation:fadeIn .7s ease 1.5s forwards;}
  .deco-br img,.deco-tr img{width:51.5px;height:51.5px;}

  .hero-card{position:absolute;left:1135px;top:406px;width:225px;background:#fff;border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:16px;align-items:flex-start;}
  .hero-card .img{height:150px;width:100%;border-radius:12px;overflow:hidden;}
  .hero-card .img img{width:100%;height:100%;object-fit:cover;}
  .hero-card .lvl{font-weight:600;font-size:10px;letter-spacing:4px;color:#999;text-transform:uppercase;line-height:1.2;}
  .hero-card .nm{font-weight:500;font-size:16px;color:var(--ink);line-height:1;margin-top:4px;}
  .hero-card .price{display:flex;gap:4px;align-items:baseline;white-space:nowrap;margin-top:12px;}
  .hero-card .price .now{font-weight:500;font-size:20px;letter-spacing:-.4px;color:var(--ink);line-height:1;}
  .hero-card .price .was{font-weight:400;font-size:16px;color:#999;line-height:1;text-decoration:line-through;}

  .hero-aster{position:absolute;left:450.51px;top:401.12px;width:64px;height:62.877px;}

  /* Big MIXROOM word + marquee */
  .bigword{position:absolute;font-weight:600;color:#fff;font-size:250px;letter-spacing:-7.5px;line-height:1;white-space:nowrap;}
  .hero .bigword{left:0;bottom:-37px;font-size:240px;}
  .marquee{background:var(--yellow);overflow:hidden;padding:4px 10px;width:1168px;height:100%;display:flex;align-items:center;}
  .mtrack{display:flex;gap:12px;align-items:center;width:max-content;will-change:transform;animation:marquee-scroll 100s linear infinite;}
  .marquee p{font-weight:600;font-size:10px;letter-spacing:.2px;color:var(--ink);white-space:nowrap;}
  .marquee .d{width:2px;height:2px;flex:none;}
  @keyframes marquee-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
  .hero .marquee-wrap{position:absolute;left:0;top:817.63px;width:1135px;height:61.75px;display:flex;align-items:center;justify-content:center;}
  .hero .marquee{width:1135px;}
  .marquee-wrap .rot{transform:rotate(-2deg);}

  /* ===================== SECTION: LEARN (dark) ===================== */
  .learn{background:#111;display:flex;flex-direction:column;gap:32px;align-items:center;justify-content:center;padding:80px;width:1440px;}
  .learn h2{font-weight:500;font-size:36px;letter-spacing:-.16px;color:#fff;width:500px;line-height:.95;}
  .learn h2 .muted{color:#b2b2b2;}
  .hr-dark{height:1px;width:100%;background:rgba(255,255,255,.12);}
  .learn-grid{display:flex;align-items:stretch;justify-content:space-between;width:100%;}
  .lg-col{width:300px;display:flex;flex-direction:column;justify-content:space-between;}
  .lg-col .top{font-weight:500;font-size:16px;letter-spacing:.32px;color:#b2b2b2;line-height:1.2;width:100%;}
  .lg-bottom{display:flex;flex-direction:column;gap:40px;align-items:flex-start;}
  .thumbs{display:flex;gap:10px;align-items:center;}
  .thumbs .t{width:76px;height:76px;border-radius:12px;overflow:hidden;}
  .thumbs .t img{width:100%;height:100%;object-fit:cover;}
  .dots{display:flex;gap:6px;align-items:center;}
  .dots .bar{width:64px;height:6px;border-radius:6px;background:var(--yellow);}
  .dots .dt{width:6px;height:6px;border-radius:6px;}
  .vr-dark{width:1px;align-self:stretch;background:rgba(255,255,255,.12);}
  .learn-card{background:#111;display:flex;flex-direction:column;gap:20px;align-items:flex-start;padding:20px;border-radius:16px;width:450px;}
  .learn-card .img{height:275px;width:100%;border-radius:12px;overflow:hidden;}
  .learn-card .img img{width:100%;height:100%;object-fit:cover;}
  .learn-card h3{font-weight:500;font-size:24px;color:#fff;width:285.56px;line-height:1;}
  .learn-card .row{display:flex;align-items:center;justify-content:flex-end;width:100%;}
  .learn-card .row p{font-weight:400;font-size:14px;letter-spacing:.28px;color:#fff;width:242.855px;line-height:1.2;}
  .lg-col.pills{padding-bottom:24px;}
  .pill-wrap{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;justify-content:flex-end;padding-top:48px;width:100%;}
  .cat{display:flex;align-items:center;justify-content:center;padding:12px 20px;border-radius:10px;font-weight:500;font-size:16px;letter-spacing:.32px;white-space:nowrap;}
  .cat.on{background:var(--yellow);color:var(--ink);}
  .cat.off{background:#252525;color:#fff;}
  .infinity{width:139.327px;height:64px;}
  .learn .tag{font-weight:500;font-size:20px;color:#b2b2b2;text-align:center;width:500px;line-height:.95;}

  /* ===================== SECTION: CLASSES (grey) ===================== */
  .classes{background:#f5f5f5;display:flex;flex-direction:column;gap:40px;align-items:flex-start;justify-content:center;padding:80px;width:1440px;position:relative;overflow:hidden;}
  .classes .vline{position:absolute;top:0;left:calc(50% + 240px);transform:translateX(-50%);width:2px;height:755.159px;background:#ededed;z-index:0;}
  .classes .sec-head,.classes .hr-light,.classes .cards{position:relative;z-index:1;}
  .sec-head{display:flex;align-items:flex-end;justify-content:space-between;width:100%;}
  .sec-head .l{display:flex;flex-direction:column;gap:32px;align-items:flex-start;color:var(--ink);}
  .kicker{font-weight:600;font-size:12px;letter-spacing:4px;white-space:nowrap;line-height:1.2;}
  .sec-title{font-weight:500;font-size:36px;letter-spacing:-.36px;line-height:.95;}
  .hr-light{height:2px;width:100%;background:#ededed;}
  .cards{display:flex;gap:12px;align-items:flex-start;width:100%;}
  .card{background:#fff;flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:28px;align-items:flex-start;padding:20px;border-radius:24px;}
  .card .img{height:200px;width:100%;border-radius:16px;overflow:hidden;}
  .card .img img{width:100%;height:100%;object-fit:cover;}
  .card .meta{display:flex;flex-direction:column;gap:8px;width:100%;}
  .card .lvl{font-weight:600;font-size:14px;letter-spacing:4px;color:#999;text-transform:uppercase;line-height:1.2;}
  .card .nm{font-weight:500;font-size:24px;color:var(--ink);line-height:1;}
  .join-btn{display:flex;gap:8px;align-items:center;justify-content:center;padding:16px 20px;border:1px solid #e1e1e1;border-radius:40px;width:100%;}
  .join-btn .jt{font-weight:500;font-size:16px;letter-spacing:.32px;color:var(--ink);white-space:nowrap;line-height:1.2;}
  .join-btn .jt b{font-weight:600;}
  .badge{background:var(--yellow);display:flex;align-items:center;justify-content:center;padding:4px 8px;border-radius:6px;font-weight:600;font-size:10px;letter-spacing:.4px;color:var(--ink);line-height:1.2;white-space:nowrap;}

  /* ===================== SECTION: HOW IT WORKS (white) ===================== */
  .how{background:#fff;display:flex;flex-direction:column;justify-content:center;padding:80px;width:1440px;overflow:hidden;}
  .how-in{display:flex;align-items:flex-start;justify-content:space-between;width:100%;}
  .how-left{display:flex;gap:64px;align-items:flex-start;}
  .how-a{display:flex;flex-direction:column;gap:40px;align-items:flex-start;padding-top:40px;}
  .how-a .img{width:325px;height:425px;border-radius:16px;overflow:hidden;}
  .how-a .img img{width:100%;height:100%;object-fit:cover;}
  .how-b{display:flex;flex-direction:column;gap:64px;align-items:flex-start;justify-content:center;}
  .how-b h2{font-weight:500;font-size:36px;letter-spacing:-.16px;width:550px;line-height:.95;text-indent:120px;}
  .how-b h2 .muted{color:#777;}
  .steps{display:flex;flex-direction:column;gap:24px;align-items:flex-start;width:100%;}
  .step{display:flex;gap:24px;align-items:center;padding:16px 0;border-bottom:1px solid #e1e1e1;width:500px;white-space:nowrap;transition:width .5s cubic-bezier(.22,.61,.36,1), border-color .5s ease;}
  .step .num{font-weight:600;font-size:12px;letter-spacing:-.12px;color:#999;text-transform:uppercase;line-height:1.2;transition:color .5s ease;align-self:flex-start;padding-top:4px;}
  .step .lbl{font-weight:500;font-size:20px;color:#777;line-height:1;letter-spacing:0;transition:font-size .5s cubic-bezier(.22,.61,.36,1), color .5s ease, letter-spacing .5s ease;}
  .step .steparrow{width:0;height:36px;opacity:0;object-fit:contain;flex:none;transition:width .5s cubic-bezier(.22,.61,.36,1), opacity .45s ease;}
  .step.active{border-bottom:1px solid #111;width:100%;}
  .step.active .num{color:#111;}
  .step.active .lbl{font-size:36px;color:#111;letter-spacing:-.36px;}
  .step.active .steparrow{width:36px;opacity:1;}
  .how-right{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;align-self:stretch;width:250px;padding-bottom:24px;}
  .how-mark{width:115.304px;height:64px;}
  .how-r-b{display:flex;flex-direction:column;gap:32px;align-items:flex-end;width:100%;}
  .how-mem{display:flex;flex-direction:column;gap:32px;align-items:flex-start;width:100%;}
  .mem-row{display:flex;gap:12px;align-items:center;width:100%;}
  .mem-av{display:flex;align-items:center;}
  .mem-av .a{width:40px;height:40px;border-radius:52px;overflow:hidden;display:flex;align-items:center;justify-content:center;}
  .mem-av .a img{width:100%;height:100%;object-fit:cover;}
  .mem-av .a.b{border:2.222px solid #fff;margin-right:-12px;}
  .mem-av .a.o{margin-right:-12px;}
  .mem-tx{display:flex;flex-direction:column;align-items:flex-start;color:#111;white-space:nowrap;}
  .mem-tx .c{font-weight:500;font-size:16px;letter-spacing:-.32px;line-height:1.2;}
  .mem-tx .d{font-weight:400;font-size:12px;letter-spacing:.24px;line-height:1.2;}
  .how-mem .p{font-weight:400;font-size:16px;letter-spacing:.32px;color:#777;line-height:1.2;width:100%;}

  /* ===================== SECTION: SHOWCASE (white) ===================== */
  .show{background:#fff;display:flex;flex-direction:column;gap:40px;align-items:flex-start;justify-content:center;padding:64px 80px;width:1440px;}
  .show-head{display:flex;align-items:flex-start;justify-content:space-between;padding-right:24px;width:100%;}
  .show-head .l{display:flex;flex-direction:column;gap:32px;align-items:flex-start;color:#111;}
  .show-head .l .sec-title{width:335.667px;}
  .show-head .r{display:flex;gap:100px;align-items:flex-start;padding-top:40px;}
  .yearcirc{width:300px;height:150px;border-radius:150px;overflow:hidden;position:relative;}
  .yearcirc img{width:100%;height:100%;object-fit:cover;}
  .yearcirc .yr{position:absolute;right:213.72px;bottom:50.19px;transform:translate(100%,50%);font-weight:700;font-size:164.534px;letter-spacing:-1.6453px;color:var(--yellow);line-height:.95;white-space:nowrap;}
  .social-col{display:flex;flex-direction:column;gap:40px;align-items:flex-start;}
  .social-h{display:flex;gap:8px;align-items:center;}
  .social-h .t{font-weight:500;font-size:20px;color:#111;line-height:1;white-space:nowrap;}
  .social-h .a{width:20px;height:20px;flex:none;}
  .social-ic{display:flex;gap:8px;align-items:center;}
  .sic{width:56px;height:56px;flex:none;border:1px solid #e1e1e1;display:flex;align-items:center;justify-content:center;border-radius:40px;box-sizing:border-box;}
  .sic img{width:24px;height:24px;}
  .sic.fb img{width:11.666px;height:24px;}

  .gallery{display:flex;height:491px;align-items:flex-end;justify-content:space-between;padding-left:64px;width:100%;}
  .vmarq{width:21px;height:550px;display:flex;align-items:center;justify-content:center;flex:none;}
  .vmarq .rot{transform:rotate(-90deg);}
  .vmarq .marquee{width:550px;height:21px;}
  .gal-right{flex:1 0 0;min-width:0;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;padding-left:100px;}
  .gal-in{display:flex;flex-direction:column;gap:32px;align-items:flex-start;position:relative;}
  .gal-clip{overflow:hidden;width:100%;}
  .gal-imgs{position:relative;width:1074px;height:400px;}
  .gal-imgs .xlayer{display:flex;gap:12px;align-items:center;}
  .gal-imgs .g{height:400px;border-radius:16px;overflow:hidden;flex:none;}
  .gal-imgs .g img{width:100%;height:100%;object-fit:cover;}
  .gal-imgs .g1{width:300px;}
  .gal-imgs .g2{width:450px;}
  .gal-imgs .g3{width:300px;}
  .gal-ctrls{display:flex;align-items:flex-start;justify-content:space-between;padding-right:40px;width:100%;position:relative;}
  .gal-ctrls .left{display:flex;gap:8px;align-items:flex-start;}
  .arrbtn{border:1px solid #e1e1e1;display:flex;align-items:center;justify-content:center;padding:16px;border-radius:40px;}
  .arrbtn img{width:24px;height:24px;}
  .gal-aster{position:absolute;left:731.65px;top:-137.04px;width:194.647px;height:193.041px;display:flex;align-items:center;justify-content:center;}
  .gal-aster .rot{transform:rotate(19.92deg);}
  .gal-aster .rot img{width:152.679px;height:150px;}

  /* ===================== SECTION: BLOGS (white) ===================== */
  .blogs{background:#fff;display:flex;flex-direction:column;gap:40px;align-items:flex-end;justify-content:center;padding:40px 80px;width:1440px;}
  .blogs-head{display:flex;align-items:flex-end;justify-content:space-between;width:100%;}
  .blogs-head .l{display:flex;flex-direction:column;gap:32px;align-items:flex-start;color:#111;}
  .blogs-head .l .sec-title{width:386.749px;}
  .blogs-head .r{display:flex;gap:6px;align-items:center;justify-content:center;}
  .blogs-body{display:flex;align-items:flex-end;justify-content:space-between;padding-left:60px;width:100%;}
  .blogs-body .intro{font-weight:400;font-size:16px;letter-spacing:.32px;color:#111;width:250px;line-height:1.2;}
  .blog-cards{position:relative;overflow:hidden;width:846px;height:241px;flex:none;}
  .blog-cards .xlayer{display:flex;gap:12px;align-items:stretch;}
  .bcard{background:#f5f5f5;display:flex;gap:28px;align-items:stretch;padding:8px;border-radius:24px;width:593px;flex:none;box-sizing:border-box;text-decoration:none;color:#111;}
  .bcard.mirror{flex-direction:row-reverse;}
  .bcard .content{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:space-between;align-self:stretch;padding:24px 0 24px 24px;}
  .bcard .date{display:flex;gap:10px;align-items:center;}
  .bcard .date .dt{font-weight:500;font-size:24px;color:#111;line-height:1;white-space:nowrap;}
  .bcard .date .sc{width:89.343px;height:24px;transform:scaleY(-1);}
  .bcard .foot{display:flex;flex-direction:column;gap:12px;align-items:flex-start;}
  .bcard .foot .ttl{font-weight:500;font-size:20px;color:#111;width:300px;line-height:1;}
  .bcard .thumb{width:225px;height:225px;border-radius:16px;overflow:hidden;flex:none;}
  .bcard .thumb img{width:100%;height:100%;object-fit:cover;}

  /* ===================== SECTION: CTA (image) ===================== */
  .cta{position:relative;width:1440px;height:600px;overflow:hidden;}
  .cta .bg{position:absolute;inset:0;pointer-events:none;}
  .cta .bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
  .cta .bg .grad{position:absolute;inset:0;background:
      linear-gradient(70.61deg, rgba(0,0,0,.5) 18.96%, rgba(0,0,0,0) 36.35%),
      linear-gradient(-72.7deg, rgba(0,0,0,.8) 28.148%, rgba(0,0,0,.08) 63.225%);}
  .cta .bigword{left:271.99px;top:-80px;line-height:1.2;}
  .cta .marquee-wrap{position:absolute;left:271.98px;top:-2.37px;width:1168.021px;height:61.75px;display:flex;align-items:center;justify-content:center;}
  .cta-content{position:absolute;left:50%;transform:translateX(-50%);top:176.5px;width:1280px;display:flex;flex-direction:column;gap:40px;align-items:flex-start;}
  .cta-row{display:flex;align-items:flex-start;justify-content:space-between;width:100%;}
  .cta-row .r{display:flex;flex-direction:column;gap:32px;align-items:flex-start;width:450px;}
  .cta-row .r .h{padding-top:40px;width:100%;}
  .cta-row .r h2{font-weight:500;font-size:36px;letter-spacing:-.36px;color:#fff;line-height:.95;width:100%;}
  .cta-note{font-weight:500;font-size:18px;letter-spacing:.36px;color:#fff;width:320px;line-height:1.2;}

  /* ===================== FOOTER ===================== */
  .footer{background:#111;width:1440px;position:relative;height:871px;overflow:hidden;}
  .impact{position:absolute;left:0;top:64px;width:1440px;display:flex;align-items:flex-start;justify-content:space-between;padding:0 80px;}
  .impact-l{display:flex;gap:39px;align-items:flex-start;}
  .impact-card{width:224px;height:276px;border-radius:24px;position:relative;overflow:hidden;}
  .impact-card img{position:absolute;height:166.14%;left:-29.1%;top:-5.29%;width:149.09%;max-width:none;}
  .impact-card .ov{position:absolute;inset:0;background:rgba(0,0,0,.24);border-radius:24px;}
  .impact-title{width:500px;font-weight:500;font-size:36px;letter-spacing:-.16px;color:#fff;line-height:.95;}
  .impact-title .muted{color:#b2b2b2;}
  .menus{display:flex;gap:96px;align-items:center;color:#fff;}
  .mcol{display:flex;flex-direction:column;gap:15px;align-items:flex-start;}
  .mcol .h{font-weight:600;font-size:18px;letter-spacing:-.54px;line-height:1.5;}
  .mcol a{font-weight:400;font-size:16px;letter-spacing:.32px;line-height:1.5;color:#fff;text-decoration:none;white-space:nowrap;}
  .foot-logo{position:absolute;left:397.63px;top:265px;width:126px;height:126px;}
  .foot-content{position:absolute;left:0;top:440px;width:1440px;display:flex;flex-direction:column;gap:40px;align-items:center;padding:0 80px;}
  .foot-row{display:flex;align-items:center;justify-content:space-between;width:1234px;font-weight:400;font-size:16px;letter-spacing:.32px;color:#fff;white-space:nowrap;}
  .foot-row .info{display:flex;gap:44px;align-items:center;}
  .foot-row p{line-height:1.5;}
  .foot-div{display:flex;flex-direction:column;gap:40px;align-items:flex-start;width:100%;}
  .foot-div .line{height:1px;width:100%;background:rgba(255,255,255,.12);}
  .foot-links{display:flex;align-items:flex-start;justify-content:space-between;width:100%;font-weight:400;font-size:16px;letter-spacing:.32px;color:#fff;white-space:nowrap;}
  .foot-big{position:absolute;left:0;top:692px;width:1168.021px;height:179px;overflow:visible;}
  .foot-big .word{position:relative;top:-28px;font-weight:600;font-size:248px;line-height:1;color:#fff;letter-spacing:-7.5px;white-space:nowrap;}
  .foot-big .marquee-wrap{position:absolute;left:0;top:118.39px;width:1168.021px;height:61.75px;display:flex;align-items:center;justify-content:center;}

  /* ===================== ANIMATIONS ===================== */
  @keyframes fadeUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}
  @keyframes fadeInRight{from{opacity:0;transform:translateX(40px);}to{opacity:1;transform:translateX(0);}}
  @keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
  @keyframes spin{to{transform:rotate(360deg);}}
  @keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}

  /* hero entrance (plays on load) */
  .anim{opacity:0;}
  .play .anim{animation:fadeUp .8s cubic-bezier(.22,.61,.36,1) forwards;}
  .play .anim.d1{animation-delay:.05s;}
  .play .anim.d2{animation-delay:.18s;}
  .play .anim.d3{animation-delay:.31s;}
  .play .anim.d4{animation-delay:.44s;}
  .play .anim-mem{animation:fadeUp .8s cubic-bezier(.22,.61,.36,1) .1s forwards;}
  .play .anim-card{opacity:0;animation:fadeInRight .9s cubic-bezier(.22,.61,.36,1) .5s forwards;}
  .play .anim-word{opacity:0;animation:fadeUp 1s cubic-bezier(.22,.61,.36,1) .35s forwards;}

  /* once entrance finishes, drop the animation so hover transforms work */
  .a-done{animation:none !important;opacity:1 !important;}

  /* reveal-on-scroll for later sections */
  .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);}
  .reveal.in{opacity:1;transform:none;}

  /* class cards: fade + slide-in from left, one by one when visible */
  .creveal{opacity:0;transform:translateX(-48px);transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);}
  .creveal.in{opacity:1;transform:none;}

  /* CTA entrance (like the hero): stagger fade-up when it scrolls into view */
  .cta .anim-c{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);}
  .cta.in .anim-c{opacity:1;transform:none;}
  .cta.in .anim-c.d1{transition-delay:.06s;}
  .cta.in .anim-c.d2{transition-delay:.2s;}
  .cta.in .anim-c.d3{transition-delay:.34s;}
  .cta.in .anim-c.d4{transition-delay:.48s;}
  .cta .bigword{font-size:250px;opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1);}
  .cta.in .bigword{opacity:1;transform:none;}

  /* footer big paragraph fills grey -> white automatically on enter */
  .impact-title .fw{color:#b2b2b2;transition:color .3s ease;}

  /* section 2 enter: hero-style staggered reveal of each row top-to-bottom */
  .learn.reveal{opacity:1;transform:none;}                 /* cancel whole-section fade; children stagger instead */
  .learn.reveal > *{opacity:0;transform:translateY(30px);transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);}
  .learn.reveal.in > *{opacity:1;transform:none;}
  .learn.reveal.in > *:nth-child(1){transition-delay:.05s;}
  .learn.reveal.in > *:nth-child(2){transition-delay:.16s;}
  .learn.reveal.in > *:nth-child(3){transition-delay:.27s;}
  .learn.reveal.in > *:nth-child(4){transition-delay:.38s;}
  .learn.reveal.in > *:nth-child(5){transition-delay:.49s;}

  /* learn section: paragraph fills grey -> white on scroll (word by word) */
  .learn h2 .fw{color:#b2b2b2;transition:color .3s ease;}
  /* how-it-works big paragraph fills grey -> dark on scroll */
  .how-b h2 .fw{color:#777;transition:color .3s ease;}

  /* learn carousel dots */
  .learn-dots .ldot{width:6px;height:6px;border-radius:6px;background:#666;cursor:pointer;transition:width .35s cubic-bezier(.22,.61,.36,1), background .35s ease;}
  .learn-dots .ldot.on{width:64px;background:var(--yellow);}
  .blog-dots .bdot{width:6px;height:6px;border-radius:6px;background:#d1d1d1;cursor:pointer;transition:width .35s cubic-bezier(.22,.61,.36,1), background .35s ease;}
  .blog-dots .bdot.on{width:64px;background:var(--yellow);}
  /* in-place crossfade layers (content swaps without moving position) */
  .xlayer{position:absolute;inset:0;transition:opacity .45s ease;will-change:opacity;}
  .learn-imgwrap{position:relative;}
  .learn-imgwrap .learn-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s ease;}
  .learn-imgwrap .learn-slide-b{opacity:0;}

  /* infinity draws its path in once (not repeating) */
  .draw-inf{transition:stroke-dashoffset 1.5s cubic-bezier(.6,.02,.2,1);}

  /* spinning asterisks + subtle repeating icon pulse */
  .hero-aster{animation:spin 14s linear infinite;}
  .gal-aster .rot{animation:spin 16s linear infinite;}
  .footer .foot-logo{animation:floaty 5s ease-in-out infinite;}
  .how-mark{animation:pulse 2s ease-in-out infinite;transform-origin:center center;}
  @keyframes pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.15) rotate(3deg);}}

  /* interactive hovers (color only — no lift) */
  .btn,.pill,.join-btn,.sic,.arrbtn,.cat,.nav-links a{transition:background-color .22s ease, color .22s ease, border-color .22s ease;cursor:pointer;}
  .btn.yellow:hover,.pill.yellow:hover{background:#eeb43e;}                 /* primary: darken a bit */
  .btn.ghost:hover,.pill.ghost:hover,.sic:hover,.arrbtn:hover{background:var(--yellow);border-color:var(--yellow);color:#111;} /* secondary -> primary */
  .join-btn:hover{border-color:#111;}
  .cat.off:hover{background:#333;}
  .nav-links a:hover{color:#8a6a12;}

  /* image-hover zoom (cards are NOT lifted; only their image zooms) */
  .thumbs .t,.gal-imgs .g,.hero-card .img,.bcard .thumb,.card .img,.learn-card .img,.how-a .img,.avatars .a,.mem-av .a,.impact-card{overflow:hidden;}
  .gal-imgs .g img,.card .img img,.bcard .thumb img,.hero-card .img img,.thumbs .t img,.learn-card .img img,.how-a .img img{transition:transform .5s ease;cursor:pointer;}
  .gal-imgs .g:hover img,.card .img:hover img,.bcard:hover .thumb img,.hero-card .img:hover img,.learn-card .img:hover img,.how-a .img:hover img{transform:scale(1.05);}
  .thumbs .t:hover img{transform:scale(1.08);}
  /* small round images + footer impact card also zoom on hover */
  .avatars .a img,.mem-av .a img{transition:transform .45s ease;cursor:pointer;}
  .avatars .a:hover img,.mem-av .a:hover img{transform:scale(1.15);}
  .impact-card img{transition:transform .6s ease;cursor:pointer;}
  .impact-card:hover img{transform:scale(1.06);}

  /* youtube icon keeps its native 24x16 ratio (was stretched to a square) */
  .sic.yt img{width:24px;height:16px;}


  /* infinity line-forming draw (no shadow) */
  .draw-inf{stroke-linecap:round;stroke-linejoin:round;}

  @media (prefers-reduced-motion: reduce){
    *{animation:none !important;transition:none !important;}
    .anim,.reveal,.anim-card,.anim-word{opacity:1 !important;transform:none !important;}
  }

  /* ===================== PROGRAM PAGE ===================== */
  .prog-head{background:#fff;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:64px 80px;width:1440px;}
  .prog-head-in{display:flex;align-items:flex-end;justify-content:space-between;width:100%;}
  .prog-head .l{display:flex;flex-direction:column;gap:32px;align-items:flex-start;color:#111;}
  .prog-head .sec-title{width:345.939px;}

  .prog-main{background:#fff;display:flex;gap:12px;align-items:flex-start;padding:0 80px 80px;width:1440px;}
  .filters{width:311px;flex:none;display:flex;flex-direction:column;gap:24px;align-items:flex-start;padding-right:40px;box-sizing:border-box;position:sticky;top:24px;}
  .filters .fhead{display:flex;align-items:center;justify-content:space-between;width:100%;}
  .filters .fhead .ft{font-weight:500;font-size:16px;color:#111;letter-spacing:-.32px;}
  .filters .fhead .clr{font-weight:500;font-size:16px;color:#e43636;letter-spacing:.32px;text-decoration:underline;cursor:pointer;}
  .filters .fdiv{height:1px;width:100%;background:#ededed;}
  .fgroup{display:flex;flex-direction:column;gap:14px;align-items:flex-start;width:100%;}
  .fgroup .gt{font-weight:500;font-size:16px;color:#111;letter-spacing:-.32px;line-height:1.2;}
  .frow{display:flex;gap:10px;align-items:center;width:100%;cursor:pointer;}
  .frow .box{width:18px;height:18px;border-radius:5px;border:1.5px solid #e1e1e1;flex:none;display:flex;align-items:center;justify-content:center;box-sizing:border-box;transition:background .2s ease, border-color .2s ease;}
  .frow .box img{width:12px;height:12px;opacity:0;transition:opacity .15s ease;}
  .frow.on .box{background:var(--yellow);border-color:var(--yellow);}
  .frow.on .box img{opacity:1;}
  .frow .lbl{flex:1;min-width:0;font-weight:400;font-size:16px;color:#777;letter-spacing:.32px;line-height:1.2;transition:color .2s ease;}
  .frow.on .lbl{font-weight:500;color:#111;}
  .frow:hover .lbl{color:#111;}
  .frow .cnt{font-size:12px;color:#999;line-height:16px;white-space:nowrap;}

  .prog-grid{flex:1;min-width:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-content:start;}
  .prog-grid .card{width:auto;}
  .prog-empty{grid-column:1/-1;padding:32px 0;color:#777;font-size:18px;font-weight:500;}

  /* ===================== BLOGS LISTING PAGE ===================== */
  .blogp-head{background:#fff;display:flex;flex-direction:column;align-items:flex-start;padding:64px 80px 40px;width:1440px;position:relative;}
  .blogp-head .l{display:flex;flex-direction:column;gap:32px;align-items:flex-start;color:#111;}
  .blogp-head .sec-title{width:470px;}
  .blogp-search{display:flex;flex-direction:column;gap:16px;align-items:center;width:100%;margin-top:24px;}
  .searchbox{display:flex;gap:16px;align-items:center;justify-content:center;padding:18px 24px;border:1.49px solid #e1e1e1;border-radius:40px;width:382px;box-sizing:border-box;}
  .searchbox img{width:18px;height:18px;flex:none;}
  .searchbox input{border:none;outline:none;background:none;font-family:var(--f);font-size:16px;letter-spacing:.32px;color:#111;width:100%;}
  .searchbox input::placeholder{color:#777;}
  .blog-tabs{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:center;}
  .btab{padding:12px 20px;border-radius:40px;border:1px solid #e1e1e1;font-weight:500;font-size:14px;letter-spacing:.28px;color:#111;white-space:nowrap;cursor:pointer;background:#fff;transition:background .2s ease, border-color .2s ease;}
  .btab.on{background:var(--yellow);border-color:var(--yellow);}
  .btab:hover{border-color:#111;}
  .btab.on:hover{border-color:var(--yellow);}

  .blog-sec{background:#fff;display:flex;flex-direction:column;align-items:center;padding:0 80px 80px;width:1440px;}
  .blog-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;width:1280px;}
  .blog-list .bcard{width:auto;cursor:pointer;text-decoration:none;}
  .blog-list .bcard .thumb{width:225px;height:225px;flex:none;}
  .blog-empty{padding:40px 0;color:#777;font-size:18px;font-weight:500;text-align:center;}

  /* ===================== BLOG DETAIL PAGE ===================== */
  .article{background:#fff;display:flex;flex-direction:column;align-items:flex-start;gap:40px;padding:80px 100px;width:1440px;box-sizing:border-box;}
  .article-head{display:flex;flex-direction:column;gap:32px;align-items:flex-start;width:100%;color:#111;}
  .article-meta{font-weight:600;font-size:12px;letter-spacing:4px;line-height:1.2;text-transform:uppercase;}
  .article-title{font-weight:500;font-size:48px;letter-spacing:-.48px;line-height:.95;width:671px;}
  .article-hero{width:1240px;height:550px;border-radius:24px;overflow:hidden;}
  .article-hero img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;cursor:pointer;}
  .article-hero:hover img{transform:scale(1.04);}
  .article-body{display:flex;flex-direction:column;gap:24px;width:1240px;}
  .article-body p{font-weight:400;font-size:16px;line-height:1.8;letter-spacing:.2px;color:#555;}