/* =========================================================
   À La Class — landing page
   Original artwork + copy. Layout study only.
   ========================================================= */

:root{
  --brand-red:    #bc2f28;   /* sampled from the À La Class wordmark */
  --brand:        #2e77f0;   /* primary */
  --brand-dark:   #1e58c4;
  --brand-soft:   #e9f1fe;
  --sky:          #21b3d4;
  --sky-soft:     #e2f7fc;
  --violet:       #8b5cf6;
  --coral:        #ff6b5e;
  --sun:          #ffc93c;
  --ink:          #21322c;
  --ink-soft:     #6b7f78;
  --line:         #e3e8e5;
  --night:        #131538;
  --night-2:      #1d2050;
  --radius:       18px;
  --shadow-lift:  0 10px 30px rgba(33,50,44,.10);
  --wrap:         1080px;
  --ease-pop:     cubic-bezier(.34,1.56,.64,1);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:700;
  color:var(--ink);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.sprite{position:absolute;width:0;height:0;overflow:hidden}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:16px}

a{color:inherit}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:#fff;padding:10px 16px;border-radius:0 0 10px 0;
}
.skip:focus{left:0}

:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:8px}

/* ---------------------------------------------------------
   Buttons — chunky, 3D, press on click
   --------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:50px;padding:0 24px;
  border:none;border-radius:16px;
  font:inherit;font-weight:800;font-size:15px;letter-spacing:.8px;
  text-transform:uppercase;text-decoration:none;text-align:center;
  cursor:pointer;user-select:none;
  transition:transform .12s var(--ease-pop), filter .15s ease, box-shadow .12s ease;
}
.btn--brand{
  background:var(--brand);color:#fff;
  box-shadow:0 4px 0 var(--brand-dark);
}
.btn--brand:hover{filter:brightness(1.06)}
.btn--brand:active{transform:translateY(4px);box-shadow:0 0 0 var(--brand-dark)}

.btn--ghost{
  background:#fff;color:var(--sky);
  box-shadow:0 4px 0 var(--line), inset 0 0 0 2px var(--line);
}
.btn--ghost:hover{background:#f7faf9}
.btn--ghost:active{transform:translateY(4px);box-shadow:inset 0 0 0 2px var(--line)}

.btn--white{
  background:#fff;color:var(--night);
  box-shadow:0 4px 0 rgba(0,0,0,.35);
}
.btn--white:active{transform:translateY(4px);box-shadow:0 0 0 rgba(0,0,0,.35)}

.btn--outline{
  background:#fff;color:var(--brand);
  box-shadow:0 4px 0 var(--line), inset 0 0 0 2px var(--line);
}
.btn--outline:hover{background:var(--brand-soft)}
.btn--outline:active{transform:translateY(4px);box-shadow:inset 0 0 0 2px var(--line)}

/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.4) blur(8px);
  transition:box-shadow .25s ease, border-color .25s ease;
  border-bottom:1px solid transparent;
}
.site-header.is-stuck{box-shadow:0 2px 14px rgba(33,50,44,.08);border-bottom-color:var(--line)}

.header-in{display:flex;align-items:center;height:92px;gap:16px}

.brand{display:flex;align-items:center;text-decoration:none}
/* the supplied logo is used whole and unaltered — it already carries the wordmark */
.brand-logo{
  width:auto;height:74px;display:block;
  transition:transform .4s var(--ease-pop);
}
.brand:hover .brand-logo{transform:scale(1.07)}


@keyframes drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

.tico{width:24px;height:24px;flex:none}

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */
.hero{padding:44px 0 56px}
.hero-in{
  display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;
}
.hero-copy h1{
  margin:0 0 26px;
  font-size:clamp(26px,3.4vw,38px);line-height:1.25;font-weight:800;
  letter-spacing:-.4px;
}
.hero-actions{display:flex;flex-direction:column;gap:12px;max-width:330px}

.hero-art{display:flex;justify-content:center}
.orbit{position:relative;width:min(100%,420px);aspect-ratio:1/.92}

.tiff{width:46%;height:auto;position:absolute;left:27%;top:12%;filter:drop-shadow(0 12px 18px rgba(33,50,44,.14))}
.tiff--md{width:210px;position:static;left:auto;top:auto}
.tiff--lg{width:230px;position:static;left:auto;top:auto}

.chip{position:absolute;width:74px;display:block}
.chip svg{width:100%;height:auto;filter:drop-shadow(0 8px 12px rgba(33,50,44,.16))}
.chip--a{left:2%;top:26%}
.chip--b{right:0;top:12%}
.chip--c{right:8%;bottom:2%}

.bit{position:absolute;width:44px;display:block}
.bit svg{width:100%;height:auto;filter:drop-shadow(0 6px 10px rgba(33,50,44,.18))}
.bit--1{left:22%;top:2%;width:50px}
.bit--2{left:0;bottom:16%}
.bit--3{right:16%;top:44%;width:38px}
.bit--4{left:40%;bottom:0;width:40px}
.bit--5{left:58%;top:6%;width:46px}

/* float / bob keyframes */
@keyframes floaty{
  0%,100%{transform:translateY(0) rotate(var(--r,0deg))}
  50%{transform:translateY(-12px) rotate(var(--r,0deg))}
}
@keyframes bobby{
  0%,100%{transform:translateY(0) rotate(-1.5deg)}
  50%{transform:translateY(-10px) rotate(1.5deg)}
}
.float{animation:floaty 4.2s ease-in-out infinite;animation-delay:var(--d,0s)}
.bob{animation:bobby 3.6s ease-in-out infinite}

/* ---------------------------------------------------------
   Course strip
   --------------------------------------------------------- */
.strip{border-block:2px solid var(--line);background:#fff;position:sticky;top:92px;z-index:40}
.strip-in{display:flex;align-items:center;gap:8px;height:72px}

.strip-nav{
  flex:none;width:34px;height:34px;display:grid;place-items:center;
  background:none;border:none;border-radius:50%;cursor:pointer;color:var(--ink-soft);
  transition:background .15s ease,color .15s ease,transform .15s var(--ease-pop);
}
.strip-nav:hover{background:#f0f4f2;color:var(--ink);transform:scale(1.1)}
.strip-nav svg{width:18px;height:18px}
.strip-nav[disabled]{opacity:.3;cursor:default;transform:none;background:none}

.strip-rail{
  flex:1;display:flex;gap:6px;margin:0;padding:0 2px;list-style:none;
  overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;
}
.strip-rail::-webkit-scrollbar{display:none}
.strip-rail button{
  display:flex;align-items:center;gap:8px;white-space:nowrap;
  background:none;border:none;border-radius:12px;cursor:pointer;
  font:inherit;font-size:13px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;
  color:var(--ink-soft);padding:10px 12px;
  transition:color .15s ease,background .15s ease,transform .18s var(--ease-pop);
}
.strip-rail button:hover{color:var(--ink);background:#f3f6f5;transform:translateY(-2px)}
.strip-rail button[aria-current="true"]{color:var(--brand);background:var(--brand-soft)}

/* ---------------------------------------------------------
   Features
   --------------------------------------------------------- */
.features{padding:20px 0 40px}
.feature{
  display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;
  padding:64px 16px;
}
.feature--flip .feature-copy{order:2}
.feature--flip .feature-art{order:1}

.feature-copy h2{
  margin:0 0 14px;font-size:clamp(26px,3vw,34px);font-weight:900;letter-spacing:-.4px;
}
.feature-copy p{margin:0;font-size:17px;line-height:1.7;color:var(--ink-soft);font-weight:700;max-width:46ch}
.feature-copy p a{color:var(--sky);text-decoration-thickness:2px;text-underline-offset:3px}
.h-brand{color:var(--brand)}
.h-sky{color:var(--sky)}
.h-violet{color:var(--violet)}

.feature-art{position:relative;display:grid;place-items:center;min-height:300px}
.phone{width:170px;filter:drop-shadow(0 18px 30px rgba(33,50,44,.18))}
.tilt{transform:rotate(-6deg);transition:transform .5s var(--ease-pop)}
.feature:hover .tilt{transform:rotate(0) scale(1.03)}

.kid{filter:drop-shadow(0 14px 20px rgba(33,50,44,.16))}
.kid--big{width:170px}
.kid--sm{width:110px;position:absolute;right:14%;bottom:6%}

.bit--f1{right:18%;top:12%;width:50px}
.bit--f2{left:20%;bottom:16%;width:40px}
.bit--f3{left:16%;top:18%;width:48px}
.bit--f4{right:16%;bottom:14%;width:46px}
.bit--f5{right:18%;top:14%;width:52px}
.bit--f6{left:16%;bottom:18%;width:44px}

/* ---------------------------------------------------------
   Anywhere (parallax drift)
   --------------------------------------------------------- */
.anywhere{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--sky-soft),#f2fbff);
  padding:96px 0 120px;text-align:center;
}
.anywhere-in{position:relative;z-index:2}
.anywhere h2{
  margin:0 0 26px;font-size:clamp(30px,4.2vw,46px);font-weight:900;
  color:var(--night);letter-spacing:-.8px;line-height:1.2;
}
.stores{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.store{
  display:flex;flex-direction:column;align-items:flex-start;
  background:var(--ink);color:#fff;text-decoration:none;
  padding:9px 20px;border-radius:12px;min-width:160px;
  transition:transform .18s var(--ease-pop),box-shadow .18s ease;
}
.store:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(33,50,44,.25)}
.store-k{font-size:10px;letter-spacing:1px;text-transform:uppercase;opacity:.75}
.store-v{font-size:17px;font-weight:900}

.drift{position:absolute;inset:-40px 0;z-index:1;pointer-events:none}
.drift .d-phone{position:absolute;width:120px;opacity:.95;filter:drop-shadow(0 16px 26px rgba(20,60,90,.18))}
.d1{left:4%;top:18%;transform:rotate(-18deg)}
.d2{right:6%;top:26%;transform:rotate(16deg)}
.drift .d-bit{position:absolute;width:44px;display:block}
.drift .d-bit svg{width:100%;height:auto;filter:drop-shadow(0 8px 12px rgba(20,60,90,.18))}
.b1{left:16%;top:8%}
.b2{right:18%;top:10%;width:38px}
.b3{left:9%;bottom:16%;width:48px}
.b4{right:12%;bottom:20%;width:42px}
.b5{left:34%;top:4%;width:40px}
.b6{right:32%;bottom:8%;width:36px}

/* ---------------------------------------------------------
   Super
   --------------------------------------------------------- */
.super{background:var(--night);padding:88px 0;overflow:hidden}
.super-in{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px}
.super-art{position:relative;display:grid;place-items:center;min-height:280px}
.blob{
  position:absolute;place-self:center;width:280px;height:230px;border-radius:52% 48% 60% 40%/55% 45% 55% 45%;
  background:#fff;animation:morph 9s ease-in-out infinite;
}
@keyframes morph{
  0%,100%{border-radius:52% 48% 60% 40%/55% 45% 55% 45%;transform:rotate(0)}
  50%{border-radius:42% 58% 44% 56%/48% 58% 42% 52%;transform:rotate(6deg)}
}
.super-art .tiff{position:relative;z-index:2}
.bit--s1{right:20%;top:12%;width:44px;z-index:3}

.kicker{margin:0 0 4px;color:#fff;font-size:15px;letter-spacing:3px;text-transform:uppercase;font-weight:800;font-style:italic}
.super-copy h2{
  margin:0 0 16px;font-size:clamp(30px,4.4vw,48px);font-weight:900;font-style:italic;
  letter-spacing:-.5px;
  background:linear-gradient(100deg,#60a5fa 0%,#22d3ee 28%,#e879f9 56%,#60a5fa 100%);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shine 6s linear infinite;
}
@keyframes shine{to{background-position:300% 0}}
.super-sub{margin:0 0 24px;color:#c7cbe8;font-size:16px;line-height:1.6;max-width:40ch}

/* ---------------------------------------------------------
   Test
   --------------------------------------------------------- */
.test{
  display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;padding:90px 16px;
}
.test .btn{margin-top:22px}
.ring{
  position:absolute;width:250px;height:250px;border-radius:50%;
  background:var(--brand);
  box-shadow:0 0 0 14px var(--brand-soft);
  animation:pulse 4.5s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{transform:scale(1);box-shadow:0 0 0 14px var(--brand-soft)}
  50%{transform:scale(1.04);box-shadow:0 0 0 24px var(--brand-soft)}
}
.test .kid{position:relative;z-index:2}

/* ---------------------------------------------------------
   Final CTA + wave
   --------------------------------------------------------- */
.final{position:relative;padding:90px 0 0;text-align:center}
.final h2{
  margin:0 0 26px;font-size:clamp(30px,4.4vw,46px);font-weight:900;
  color:var(--brand);letter-spacing:-.6px;line-height:1.2;
}
.final .btn{min-width:260px}
.final-art{position:relative;display:grid;place-items:center;margin-top:18px;min-height:250px}
.fb1{left:16%;top:18%;width:48px}
.fb2{right:18%;top:10%;width:50px}
.fb3{left:24%;bottom:22%;width:42px}
.fb4{right:22%;bottom:26%;width:40px}
.wave{display:block;width:100%;height:110px;margin-top:-60px}

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */
.site-footer{background:var(--brand);color:#fff;padding:10px 0 0}
.foot-cols{
  display:grid;grid-template-columns:1fr;gap:28px;padding:20px 0 44px;
}
.foot-cols h3{margin:0 0 14px;font-size:13px;letter-spacing:1.4px;text-transform:uppercase;font-weight:900}
.foot-cols ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:10px 24px}
.foot-cols a{
  font-size:14px;font-weight:700;text-decoration:none;opacity:.92;
  transition:opacity .15s ease,transform .15s ease;display:inline-block;
}
.foot-cols a:hover{opacity:1;transform:translateX(3px);text-decoration:underline}

.foot-langs{background:var(--brand-dark);padding:22px 0 30px;overflow:hidden}
.foot-langs-k{margin:0 0 12px;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;font-weight:900;opacity:.85}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-track{
  display:flex;gap:22px;margin:0;padding:6px 0;list-style:none;width:max-content;
  animation:slide 40s linear infinite;
}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee-track li{font-size:13px;font-weight:800;letter-spacing:.6px;opacity:.9;display:flex;align-items:center;gap:7px}
.foot-note{margin:18px 0 0;font-size:12px;opacity:.75;font-weight:700}

/* ---------------------------------------------------------
   Scroll reveal
   --------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(38px);transition:opacity .7s ease,transform .7s var(--ease-pop)}
.reveal.is-in{opacity:1;transform:none}
.reveal.is-in .feature-art{animation:pop .7s var(--ease-pop) both;animation-delay:.12s}
@keyframes pop{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width:900px){
}
@media (max-width:780px){
  .hero{padding:26px 0 40px}
  .hero-in,.feature,.super-in,.test{grid-template-columns:1fr;gap:28px;text-align:center}
  .hero-copy h1{font-size:26px}
  .hero-actions{margin-inline:auto;width:100%;max-width:340px}
  .feature{padding:44px 16px}
  .feature--flip .feature-copy{order:0}
  .feature--flip .feature-art{order:0}
  .feature-copy p{margin-inline:auto}
  .super-sub{margin-inline:auto}
  .strip{top:72px}
  .strip-in{height:64px}
  .site-header .header-in{height:72px}
  .brand-logo{height:56px}
  .drift .d-phone{width:82px}
  .drift .d-bit{width:34px}
  .anywhere{padding:72px 0 96px}
  .tiff--md,.tiff--lg{width:170px}
  .test .feature-art{min-height:270px}
  .ring{width:200px;height:200px}
}
@media (max-width:480px){
  .brand-logo{height:48px}
  .final .btn{min-width:min(100%,280px)}
}

/* ---------------------------------------------------------
   Reduced motion
   --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .float,.bob,.marquee-track,.blob,.ring,.super-copy h2{animation:none !important}
  .reveal{opacity:1;transform:none;transition:none}
  .reveal.is-in .feature-art{animation:none}
  .super-copy h2{color:#7ee2a8;background:none;-webkit-background-clip:border-box;background-clip:border-box}
  .btn,.store,.strip-rail button{transition:none}
}