/* ESL Nearby — public marketing site
   Warm, playful, Maya-orange palette. */

:root {
  --orange:   #F07D20;
  --orange-2: #FFAA5C;
  --green:    #27AE80;
  --green-2:  #5CD6A0;
  --pink:     #FF7DA6;
  --ink:      #2A2140;
  --ink-soft: #6C6685;
  --cream:    #FFF7EE;
  --card:     #FFFFFF;
  --line:     #F0E6DA;
  --shadow:   0 18px 46px rgba(240, 125, 32, .18);
  --radius:   26px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Nunito', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1100px 620px at 82% -8%, #FFE7CE 0%, rgba(255,231,206,0) 60%),
    radial-gradient(900px 560px at 6% 10%, #FFDCE8 0%, rgba(255,220,232,0) 58%),
    radial-gradient(1000px 700px at 50% 108%, #DDEBFF 0%, rgba(221,235,255,0) 60%),
    linear-gradient(180deg, #FFF7EE 0%, #FFF3F0 52%, #F3F8FF 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .brand-name { font-family: 'Baloo 2', 'Nunito', sans-serif; }

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

.wrap { width: min(1120px, 92vw); margin-inline: auto; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 247, 238, .85);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 82px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 900; }
.brand-logo { height: 64px; width: auto; display: block; }
.footer-logo { height: 52px; width: auto; display: block; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav-left { position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.nav-link {
  position: relative; padding: 8px 12px; font-weight: 800; font-size: 15px;
  color: var(--ink); letter-spacing: .2px; transition: color .16s;
}
/* Animated underline — a clean "text" design. */
.nav-link::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2.5px;
  border-radius: 2px; background: var(--orange); transform: scaleX(0);
  transform-origin: left; transition: transform .2s ease;
}
.nav-link:hover { color: var(--orange); }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link.is-active { color: var(--orange); }
.nav-link.is-active::after { transform: scaleX(1); }
.nav-cta {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  padding: 11px 22px; border-radius: 999px; font-weight: 900; font-size: 15px;
  color: #fff; background: linear-gradient(135deg, var(--orange), #E4680E);
  box-shadow: 0 8px 20px rgba(240, 125, 32, .35);
  transition: transform .14s, box-shadow .14s;
}
.nav-cta:hover { transform: translateY(-50%) scale(1.04); box-shadow: 0 12px 26px rgba(240, 125, 32, .45); }

@media (max-width: 900px) {
  .header-inner { flex-wrap: wrap; height: auto; padding: 8px 0; row-gap: 6px; }
  .brand { order: 1; margin-right: auto; }
  .brand-logo { height: 48px; }
  .nav-cta { order: 2; position: static; transform: none; }
  .nav-cta:hover { transform: scale(1.04); }
  .nav-left { order: 3; position: static; transform: none; width: 100%;
    justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; gap: 2px;
    -webkit-overflow-scrolling: touch; }
  .nav-left::-webkit-scrollbar { display: none; }
  .nav-link { flex: 0 0 auto; }
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden; padding: 14px 0 0;
  min-height: calc(100vh - 82px);
  display: flex; flex-direction: column;
}
.hero .hero-inner { flex: 1 0 auto; display: flex; flex-direction: column; }
.hero-blobs { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(46px); opacity: .5; }
.blob.b1 { width: 420px; height: 420px; left: -120px; top: -80px;
  background: radial-gradient(circle, var(--orange-2), transparent 68%); }
.blob.b2 { width: 380px; height: 380px; right: -110px; top: 40px;
  background: radial-gradient(circle, var(--green-2), transparent 68%); }
.blob.b3 { width: 300px; height: 300px; left: 40%; bottom: -140px;
  background: radial-gradient(circle, var(--pink), transparent 70%); opacity: .35; }

.hero-inner { position: relative; z-index: 1; text-align: center; }
.eyebrow {
  display: inline-block; margin-bottom: 14px; padding: 7px 16px; border-radius: 999px;
  background: #fff; color: var(--orange); font-weight: 900; font-size: 13px;
  letter-spacing: .6px; text-transform: uppercase; box-shadow: 0 6px 16px rgba(0,0,0,.06);
}
.hero h1 { font-size: clamp(34px, 6vw, 60px); line-height: 1.02; margin: 0 0 14px; }
.hero h1 .hl { color: var(--orange); }
.hero p.lead {
  max-width: 620px; margin: 0 auto 8px; font-size: clamp(16px, 2.2vw, 20px);
  color: var(--ink-soft); font-weight: 600;
}

/* ── Maya stage (centered) + caption cloud floating to her right ─────────── */
.maya-zone {
  position: relative; z-index: 1; margin: clamp(30px, 11vh, 130px) auto 0; width: 100%;
  display: flex; align-items: center; justify-content: center;
}
.maya-stage {
  position: relative; width: min(420px, 84vw); aspect-ratio: 460 / 470;
  cursor: pointer; user-select: none; flex: 0 0 auto;
  animation: mayaFloat 5.2s ease-in-out infinite;
  filter: drop-shadow(0 26px 30px rgba(240, 125, 32, .22));
}
/* Cloud is absolutely placed so Maya stays dead-centre on the page. */
.maya-cloud {
  position: absolute; top: 42%; left: calc(50% + 195px); transform: translateY(-50%);
  width: min(360px, 30vw); z-index: 2;
}
.maya-bubble {
  position: relative;
  background: #fff; border-radius: 34px;
  padding: 20px 24px; box-shadow: 0 20px 44px rgba(42, 33, 64, .13);
  font-size: 20px; font-weight: 800; line-height: 1.5; color: var(--ink);
  /* Fixed two-line stage; pages fade through it. */
  height: calc(2 * 1.5em + 40px);
}
/* Cloud tail + puffs pointing left toward Maya. */
.maya-bubble::after {
  content: ""; position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
  border: 15px solid transparent; border-right-color: #fff; border-left: 0; z-index: 3;
}
.maya-bubble::before {
  content: ""; position: absolute; left: -26px; top: 62%;
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: -13px 12px 0 -4px #fff, -22px 22px 0 -7px #fff; z-index: 3;
}
/* Each two-line page is stacked and cross-fades. */
.maya-bubble .page {
  position: absolute; left: 24px; right: 24px; top: 20px;
  opacity: 0; transition: opacity .35s ease; pointer-events: none;
}
.maya-bubble .page.show { opacity: 1; }
.maya-bubble .w { transition: color .14s, opacity .14s, transform .14s; opacity: .42; }
.maya-bubble .w.done { opacity: 1; color: var(--ink); }
.maya-bubble .w.active {
  opacity: 1; color: var(--orange); transform: translateY(-1px);
  text-shadow: 0 2px 10px rgba(240, 125, 32, .35);
}
.maya-bubble.idle .w { opacity: .92; color: var(--ink); }

@media (max-width: 900px) {
  .maya-zone { flex-direction: column; }
  .maya-cloud { position: static; transform: none; width: min(440px, 92vw); margin-top: 10px; }
}

/* ── Floating alphabet in the hero background ───────────────────────────── */
.alpha-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.alpha {
  position: absolute; opacity: .38; filter: saturate(1.05);
  animation-name: alphaDrift; animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes alphaDrift {
  0%   { transform: translateY(0) rotate(-6deg); }
  50%  { transform: translateY(-26px) rotate(6deg); }
  100% { transform: translateY(0) rotate(-6deg); }
}

/* ── Objects orbiting the mouse cursor ──────────────────────────────────── */
.cursor-orbit { position: fixed; left: 0; top: 0; z-index: 45; pointer-events: none;
  width: 0; height: 0; will-change: transform; }
.orbit-obj { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  left: 0; top: 0; will-change: transform;
  filter: drop-shadow(0 4px 6px rgba(42,33,64,.18)); }
@media (hover: none) { .cursor-orbit { display: none; } }
@media (max-width: 680px) {
  .maya-bubble::after, .maya-bubble::before { display: none; }
  .maya-cloud { flex-basis: 100%; }
  .alpha { opacity: .26; }
}
.maya-stage svg { width: 100%; height: 100%; display: block; overflow: visible; }
@keyframes mayaFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.maya-hint {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
  padding: 9px 18px; border-radius: 999px; font-weight: 900; font-size: 14px;
  color: var(--orange); background: #fff; border: 2px solid var(--line);
  box-shadow: 0 8px 20px rgba(0,0,0,.06); cursor: pointer;
  animation: hintPulse 1.8s ease-in-out infinite;
  transition: opacity .25s;
}
.maya-hint:hover { transform: translateY(-1px); }
@keyframes hintPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.maya-hint.hidden { display: none; }

/* ── Character strip (bottom of the hero viewport) ──────────────────────── */
.char-strip {
  position: relative; z-index: 1; margin-top: auto; padding: 22px 0 26px;
}
.char-strip .strip-label {
  text-align: center; font-weight: 800; color: var(--ink-soft);
  font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 14px;
}
.char-track {
  display: flex; gap: 20px; overflow-x: auto; padding: 8px 6px 14px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; justify-content: flex-start;
}
.char-track::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .char-track { justify-content: center; } }
.char {
  scroll-snap-align: center; flex: 0 0 auto; width: 92px; text-align: center;
  cursor: default;
}
.char-orb {
  width: 84px; height: 84px; margin: 0 auto 8px; border-radius: 50%;
  overflow: hidden; background: #fff;
  border: 3px solid #fff; box-shadow: 0 10px 24px rgba(42, 33, 64, .12);
  transition: transform .16s, box-shadow .16s;
}
.char:hover .char-orb { transform: translateY(-6px) scale(1.05); box-shadow: 0 16px 30px rgba(240,125,32,.28); }
.char-orb img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center 14%;
}
.char-name { font-weight: 800; font-size: 13px; color: var(--ink); }

/* ── CTA row ────────────────────────────────────────────────────────────── */
.cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.btn {
  display: inline-flex; align-items: center; gap: 9px; padding: 14px 26px;
  border-radius: 999px; font-weight: 900; font-size: 16px; cursor: pointer; border: 0;
  transition: transform .14s, box-shadow .14s;
}
.btn-primary { color: #fff; background: linear-gradient(135deg, var(--orange), #E4680E);
  box-shadow: 0 12px 26px rgba(240, 125, 32, .38); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(240, 125, 32, .48); }
.btn-ghost { color: var(--ink); background: #fff; border: 2px solid var(--line); }
.btn-ghost:hover { transform: translateY(-2px); border-color: var(--orange-2); }

/* ── Sections ───────────────────────────────────────────────────────────── */
section { padding: 64px 0; }
.section-head { text-align: center; margin-bottom: 40px; }
.section-head h2 { font-size: clamp(26px, 4vw, 40px); margin: 0 0 10px; }
.section-head p { color: var(--ink-soft); font-weight: 600; max-width: 560px; margin: 0 auto; font-size: 17px; }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.feature {
  background: var(--card); border-radius: var(--radius); padding: 28px 24px;
  box-shadow: 0 12px 30px rgba(42, 33, 64, .07); border: 1px solid var(--line);
  transition: transform .16s, box-shadow .16s;
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.feature .ico {
  width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
  font-size: 27px; margin-bottom: 16px;
}
.feature h3 { margin: 0 0 8px; font-size: 20px; }
.feature p { margin: 0; color: var(--ink-soft); font-weight: 600; line-height: 1.55; }
.ico.o { background: #FFEBD8; } .ico.g { background: #DDF6EC; } .ico.p { background: #FFE3EE; } .ico.b { background: #E1EFFF; }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; counter-reset: step; }
.step { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 24px 24px; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: -18px; left: 24px; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; font-family: 'Baloo 2'; font-weight: 800; color: #fff; font-size: 18px;
  background: linear-gradient(135deg, var(--orange), #E4680E); box-shadow: 0 8px 18px rgba(240,125,32,.4);
}
.step h3 { margin: 6px 0 8px; font-size: 19px; }
.step p { margin: 0; color: var(--ink-soft); font-weight: 600; line-height: 1.55; }

/* ── App band ───────────────────────────────────────────────────────────── */
.app-band {
  background: linear-gradient(135deg, #2A2140, #3A2C5E); color: #fff; border-radius: 34px;
  padding: 54px 40px; text-align: center; position: relative; overflow: hidden;
}
.app-band h2 { color: #fff; font-size: clamp(26px, 4vw, 38px); margin: 0 0 12px; }
.app-band p { color: #D8CFEA; font-weight: 600; max-width: 560px; margin: 0 auto 26px; font-size: 17px; }
.store-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.store-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 16px;
  background: #fff; color: var(--ink); font-weight: 900; box-shadow: 0 10px 24px rgba(0,0,0,.25);
  transition: transform .14s;
}
.store-btn:hover { transform: translateY(-2px); }
.store-btn .big { font-size: 22px; }

/* ── Content pages (legal / about) ──────────────────────────────────────── */
.page-hero { text-align: center; padding: 54px 0 8px; }
.page-hero h1 { font-size: clamp(30px, 5vw, 46px); margin: 0 0 8px; }
.page-hero p { color: var(--ink-soft); font-weight: 600; margin: 0; }
.doc {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 40px clamp(22px, 4vw, 48px); margin: 30px auto 70px; max-width: 860px;
  box-shadow: 0 12px 30px rgba(42,33,64,.06); line-height: 1.7;
}
.doc h2 { font-size: 22px; margin: 30px 0 10px; }
.doc h2:first-child { margin-top: 0; }
.doc p, .doc li { color: #4a4360; font-weight: 500; }
.doc a { color: var(--orange); font-weight: 800; }
.doc .updated { color: var(--ink-soft); font-weight: 700; font-size: 14px; }

/* ── Teachers page ──────────────────────────────────────────────────────── */
.lead-maya {
  display: flex; align-items: center; gap: clamp(16px, 4vw, 50px);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(20px, 3vw, 36px); box-shadow: 0 12px 30px rgba(42, 33, 64, .06); flex-wrap: wrap;
}
.lead-maya-art { flex: 0 0 auto; width: min(230px, 58vw); margin: 0 auto; }
.lead-maya-art img { width: 100%; display: block; filter: drop-shadow(0 18px 24px rgba(240, 125, 32, .22)); }
.lead-maya-copy { flex: 1 1 300px; }
.lead-maya-copy h2 { font-size: 32px; margin: 0 0 2px; }
.lead-maya-copy .role { color: var(--orange); font-weight: 900; margin: 0 0 10px; }
.lead-maya-copy p { color: var(--ink-soft); font-weight: 600; line-height: 1.6; margin: 0; }

.tgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.tcard {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 20px; text-align: center; box-shadow: 0 12px 30px rgba(42, 33, 64, .07);
  transition: transform .16s, box-shadow .16s;
}
.tcard:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.tcard-orb {
  width: 96px; height: 96px; margin: 0 auto 12px; border-radius: 50%; overflow: hidden;
  background: #fff; border: 3px solid #fff;
}
.tcard-orb img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; display: block; }
.tcard h3 { margin: 0 0 2px; font-size: 19px; }
.tcard-role { color: var(--orange); font-weight: 800; font-size: 13px; margin-bottom: 8px; }
.tcard p { margin: 0; color: var(--ink-soft); font-weight: 600; font-size: 14.5px; line-height: 1.5; }

/* ── Pricing page ───────────────────────────────────────────────────────── */
.pricing {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px;
  max-width: 820px; margin: 0 auto; align-items: start;
}
.plan {
  position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px 28px; box-shadow: 0 12px 30px rgba(42, 33, 64, .07);
}
.plan-featured { border: 2px solid var(--orange); box-shadow: var(--shadow); }
.plan-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--orange), #E4680E); color: #fff;
  font-weight: 900; font-size: 12px; letter-spacing: .5px; padding: 6px 14px; border-radius: 999px;
}
.plan-name { font-family: 'Baloo 2'; font-weight: 800; font-size: 22px; }
.plan-price { font-family: 'Baloo 2'; font-weight: 800; font-size: 44px; color: var(--ink); margin: 4px 0 2px; }
.plan-price span { font-family: 'Nunito'; font-size: 16px; font-weight: 800; color: var(--ink-soft); }
.plan-tag { color: var(--ink-soft); font-weight: 700; margin: 0 0 16px; }
.plan-list { list-style: none; padding: 0; margin: 0 0 22px; }
.plan-list li { padding: 9px 0 9px 30px; position: relative; font-weight: 700; color: #4a4360; border-bottom: 1px dashed var(--line); }
.plan-list li::before { content: "✓"; position: absolute; left: 0; top: 8px; color: var(--green); font-weight: 900; }
.plan .btn { width: 100%; justify-content: center; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer { background: #211A33; color: #C9C2DD; padding: 56px 0 26px; margin-top: 40px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 30px; }
.footer-brand .brand-name { color: #fff; }
.footer-tag { margin: 14px 0 0; font-weight: 600; max-width: 280px; line-height: 1.6; }
.footer-col h4 { color: #fff; margin: 0 0 14px; font-size: 15px; letter-spacing: .3px; }
.footer-col a { display: block; padding: 6px 0; font-weight: 700; color: #C9C2DD; transition: color .14s; }
.footer-col a:hover { color: var(--orange-2); }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.10);
  font-weight: 700; font-size: 14px;
}
.footer-mini a { color: #C9C2DD; }
.footer-mini a:hover { color: var(--orange-2); }

@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .brand-name { display: none; }
  .footer-brand .brand-name { display: inline; }
  .nav-link { padding: 8px 10px; }
}