/* Learn AI with Meah — the marketing site. One stylesheet, no framework, no build server. */

:root{
  --ink:#fbfaf7;          /* warm paper */
  --panel:#ffffff;
  --panel-2:#f3f1ec;
  --line:#e3dfd6;
  --text:#2b2933;
  --dim:#6a6776;
  --white:#141220;        /* the strong colour is now near-black */

  --g1:#22d3ee;   /* electric cyan */
  --g2:#f472b6;   /* hot pink */
  --g3:#fb923c;   /* amber */
  --grad:linear-gradient(115deg, var(--g1), var(--g2) 52%, var(--g3));

  --wrap:1600px;
  --gap:clamp(20px,3vw,44px);
  --r:20px;
  --font:"Futura","Jost","Century Gothic",ui-sans-serif,system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
html,body{max-width:100%; overflow-x:hidden}
body{
  margin:0; background:var(--ink); color:var(--text);
  font-family:var(--font); font-size:clamp(16px,1.05vw,19px); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--g1); text-decoration:none}
a:hover{color:var(--g2)}

body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1100px 760px at 6% -10%, color-mix(in oklab, var(--g1) 14%, transparent), transparent 64%),
    radial-gradient(900px 620px at 98% 2%, color-mix(in oklab, var(--g2) 12%, transparent), transparent 64%),
    radial-gradient(1000px 720px at 45% 110%, color-mix(in oklab, var(--g3) 10%, transparent), transparent 62%);
}

.wrap{width:min(100% - 2*var(--gap), var(--wrap)); margin-inline:auto}

/* header */
header.site{position:sticky; top:0; z-index:50; backdrop-filter:blur(18px) saturate(140%);
  background:color-mix(in srgb, var(--ink) 86%, transparent); border-bottom:1px solid var(--line)}
header.site .bar{display:flex; align-items:center; gap:20px; padding:12px 0}
.brand{display:block; flex:none; line-height:0}
.brand img{width:132px}
nav.site{margin-left:auto; display:flex; gap:4px; align-items:center}
nav.site a{padding:9px 14px; border-radius:999px; color:var(--text); font-size:.92rem; white-space:nowrap}
nav.site a:hover,nav.site a.on{background:var(--panel-2); color:var(--white)}
nav.site a.cta{background:var(--grad); color:#1a0d18; font-weight:700}
nav.site a.cta:hover{filter:brightness(1.1); color:#1a0d18}

/* type */
h1,h2,h3{color:var(--white); line-height:1.06; letter-spacing:-.02em; margin:0 0 .5em; font-weight:700}
h1{font-size:clamp(2.4rem,5.4vw,5rem)}
h2{font-size:clamp(1.8rem,3.1vw,3rem)}
h3{font-size:clamp(1.1rem,1.5vw,1.4rem)}
p{margin:0 0 1.1em; max-width:74ch}
.lede{font-size:clamp(1.1rem,1.5vw,1.4rem); max-width:62ch}
.grad{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.eyebrow{text-transform:uppercase; letter-spacing:.24em; font-size:.72rem; color:var(--g1); margin-bottom:14px}
.dim{color:var(--dim)}
strong{color:var(--white)}

section{padding:clamp(56px,7vw,110px) 0}
section.tight{padding:clamp(34px,4vw,62px) 0}
.rule{height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent)}

/* hero */
.hero{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(26px,4vw,64px); align-items:center;
  padding-top:clamp(34px,5vw,80px); padding-bottom:clamp(40px,6vw,90px)}
.hero-mark img{width:min(100%,520px); margin-inline:auto;
  filter:drop-shadow(0 28px 70px color-mix(in oklab, var(--g2) 40%, transparent));
  animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@media (prefers-reduced-motion:reduce){.hero-mark img{animation:none}}
.hero-wordmark{width:min(100%,470px); margin:0 0 26px}
@media (max-width:940px){ .hero{grid-template-columns:1fr} .hero-mark{order:-1; max-width:340px; margin-inline:auto} .hero-wordmark{width:min(100%,330px)} }

/* buttons */
.btn{display:inline-flex; align-items:center; gap:10px; padding:15px 26px; border-radius:999px;
  font-weight:700; font-size:1rem; border:1px solid transparent; cursor:pointer}
.btn.primary{background:var(--grad); color:#1a0d18}
.btn.primary:hover{filter:brightness(1.1); color:#1a0d18}
.btn.ghost{border-color:var(--line); background:var(--panel); color:var(--white)}
.btn.ghost:hover{border-color:var(--g1); color:var(--white)}
.row{display:flex; gap:14px; flex-wrap:wrap; align-items:center}

/* cards */
.grid{display:grid; gap:var(--gap)}
.g3{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(420px,1fr))}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(22px,2.4vw,34px); box-shadow:0 1px 2px rgba(20,18,32,.04), 0 14px 34px -24px rgba(20,18,32,.30)}
.card.hi{border-color:color-mix(in oklab,var(--g2) 50%,var(--line))}
.card p:last-child{margin-bottom:0}
.num{font-size:.78rem; letter-spacing:.2em; color:var(--dim); text-transform:uppercase; margin-bottom:8px}

.price{font-size:clamp(2rem,3vw,2.8rem); font-weight:700; letter-spacing:-.02em}
.price small{display:block; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); font-weight:400; margin-top:8px}

ul.ticks{list-style:none; padding:0; margin:0 0 1.2em}
ul.ticks li{position:relative; padding-left:26px; margin-bottom:.55em}
ul.ticks li::before{content:""; position:absolute; left:0; top:.6em; width:9px; height:9px; border-radius:3px; background:var(--grad)}

/* stats */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:var(--gap)}
.stat b{display:block; font-size:clamp(2rem,3.4vw,3.2rem); font-weight:700; letter-spacing:-.03em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.stat span{color:var(--dim); font-size:.9rem}

/* track list */
.tracks{display:grid; gap:14px}
.track{display:grid; grid-template-columns:64px 1fr auto; gap:18px; align-items:start;
  border:1px solid var(--line); border-radius:16px; padding:20px 22px; background:var(--panel)}
.track b{font-size:1.6rem; font-weight:700; letter-spacing:-.02em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1}
.track h3{margin-bottom:.3em}
.track p{margin:0; color:var(--dim); font-size:.95rem}
.track .n{color:var(--dim); font-size:.85rem; white-space:nowrap}
@media (max-width:700px){ .track{grid-template-columns:44px 1fr} .track .n{grid-column:2; margin-top:6px} }

/* steps */
ol.steps{list-style:none; counter-reset:s; padding:0; margin:0; display:grid; gap:20px}
ol.steps li{counter-increment:s; position:relative; padding-left:66px}
ol.steps li::before{content:counter(s,decimal-leading-zero); position:absolute; left:0; top:-4px;
  font-size:1.7rem; font-weight:700; letter-spacing:-.02em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
ol.steps h3{margin-bottom:.25em}
@media (max-width:600px){ ol.steps li{padding-left:0} ol.steps li::before{position:static; display:block; margin-bottom:4px} }

.note{border-left:3px solid transparent; border-image:var(--grad) 1; padding:2px 0 2px 18px}
table{width:100%; border-collapse:collapse; margin:0 0 1.2em}
th,td{text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top}
th{color:var(--white); font-size:.76rem; text-transform:uppercase; letter-spacing:.14em}
.scroll-x{overflow-x:auto}

footer.site{border-top:1px solid var(--line); padding:44px 0 64px; color:var(--dim); font-size:.9rem}
footer.site .cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--gap)}
footer.site h4{color:var(--white); font-size:.76rem; text-transform:uppercase; letter-spacing:.2em; margin:0 0 12px}
footer.site ul{list-style:none; padding:0; margin:0}
footer.site li{margin-bottom:8px}
footer.site a{color:var(--text)}

@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:1; transform:none}
  html.motion .reveal:not(.in){opacity:0; transform:translateY(18px)}
  html.motion .reveal{transition:opacity .6s ease, transform .6s ease}
}
@media (max-width:760px){
  :root{--gap:18px}
  header.site .bar{flex-wrap:wrap; gap:10px}
  .brand img{width:104px}
  nav.site{margin-left:0; width:100%; overflow-x:auto; scrollbar-width:none}
  nav.site::-webkit-scrollbar{display:none}
  .g3,.g2{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  p,.lede{max-width:100%}
}

/* ============================================================ motion ====== */
#ambient{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.42;filter:invert(1) hue-rotate(180deg) saturate(1.4)}

/* every block rises into place, staggered along its row */
/* Content is visible by default. It is only hidden once the motion script has run and
   put .motion on <html> — so if that script never loads, the page still reads. */
@media (prefers-reduced-motion:no-preference){
  html.motion .will-rise{opacity:0;transform:translateY(26px) scale(.985);
    transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
  html.motion .will-rise.in{opacity:1;transform:none}
}

/* parallax layers read --py from scroll and --mx/--my from the pointer */
/* Parallax: these move only as the page scrolls. Nothing idles. */
[data-par]{transform:translate3d(0,var(--py,0px),0);will-change:transform}


/* the gradient in headings drifts, so the page is never static */
.grad{background:linear-gradient(115deg,var(--g1),var(--g2) 40%,var(--g3) 70%,var(--g1));
  background-size:280% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:drift 14s linear infinite}
@keyframes drift{to{background-position:280% 0}}
@media (prefers-reduced-motion:reduce){.grad{animation:none;background-size:100% 100%}}

/* cards light where the pointer is, and lift */
.card,.track{position:relative;overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s}
.card::before,.track::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .35s;background:radial-gradient(340px circle at var(--gx,50%) var(--gy,0%),
    color-mix(in oklab,var(--g2) 16%,transparent), transparent 62%)}
.card:hover,.track:hover{transform:translateY(-3px);border-color:color-mix(in oklab,var(--g2) 40%,var(--line))}
.card:hover::before,.track:hover::before{opacity:1}
@media (prefers-reduced-motion:reduce){.card:hover,.track:hover{transform:none}}

/* the buttons get a moving edge */
.btn.primary{background:linear-gradient(115deg,var(--g1),var(--g2) 45%,var(--g3),var(--g1));
  background-size:260% 100%;animation:drift 9s linear infinite}
@media (prefers-reduced-motion:reduce){.btn.primary{animation:none;background-size:100% 100%}}

/* the numbers, once they have counted up */
.stat b{font-variant-numeric:tabular-nums}




/* the mark: her image, static */
.mark-still{width:min(100%,540px);margin-inline:auto;display:block;animation:none}

/* depth: each section's heading rises a little slower than the page */
.eyebrow,[data-par-slow]{will-change:transform}