/* =========================================================
   Homepage hero: cinematic film background + animated online lesson
   ========================================================= */
.hero-film { background: #0f1e28; }
.film-bg { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); }
.hero-film .grain { z-index: -1; }
.hero-film .hero-grid { grid-template-columns: .86fr 1.14fr; gap: 56px; }

.hero-film .lead { color: rgba(244, 238, 220, .92); }

/* ---------- the call window ---------- */
.call-stage { position: relative; perspective: 1400px; animation: fadeUp 1.2s .5s var(--ease) both; }
.call { position: relative; border-radius: 18px; overflow: hidden; background: #0c1822; border: 1px solid rgba(244,238,220,.14); box-shadow: 0 60px 120px -40px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.4), 0 0 80px -20px rgba(201,162,39,.25); transform: rotateY(-14deg) rotateX(5deg); transform-origin: 60% 50%; transition: transform .2s ease-out; will-change: transform; }
.call-top { display: flex; align-items: center; gap: 12px; padding: 11px 16px; background: #0a141d; border-bottom: 1px solid rgba(244,238,220,.08); color: rgba(244,238,220,.8); font: 600 12.5px/1 Montserrat; }
.win-dots { display: flex; gap: 6px; }
.win-dots i { width: 11px; height: 11px; border-radius: 50%; background: #e0645b; }
.win-dots i:nth-child(2) { background: #e3b341; } .win-dots i:nth-child(3) { background: #55b86a; }
.call-title { flex: 1; text-align: center; transition: opacity .5s; }
.rec { display: flex; align-items: center; gap: 6px; font-weight: 700; color: #ff8a80; }
.rec i { width: 8px; height: 8px; border-radius: 50%; background: #ff4d4d; animation: blink 1.4s steps(1) infinite; }
.rec b { color: rgba(244,238,220,.85); font-variant-numeric: tabular-nums; }
@keyframes blink { 50% { opacity: .2; } }

.call-body { display: grid; grid-template-columns: 1fr 28%; gap: 8px; padding: 8px; background: #08121a; }
.wb { position: relative; aspect-ratio: 16 / 11; border-radius: 10px; overflow: hidden; background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.06), transparent 55%), #14261f; box-shadow: inset 0 0 0 6px #3a2a1c, inset 0 0 0 8px #24180f; }
.wb::after { content: ""; position: absolute; inset: 0; opacity: .3; mix-blend-mode: overlay; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
#wb-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#wb-svg .ch { fill: none; stroke: rgba(244,238,220,.9); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: url(#chalky); }
#wb-svg text.ch { font: 400 26px "Playfair Display", serif; stroke-width: .9; fill: rgba(244,238,220,0); transition: fill 1s; }
#wb-svg text.ch.filled { fill: rgba(244,238,220,.85); }
#wb-svg .gold { stroke: rgba(230,195,90,.95); }
#wb-svg text.gold.filled { fill: rgba(230,195,90,.95); }
#wb-svg g { transition: opacity 1s; }
.wb-label { position: absolute; right: 12px; top: 12px; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 99px; background: rgba(0,0,0,.35); color: rgba(244,238,220,.75); font: 600 11px/1 Montserrat; z-index: 2; }
.wb-label i { width: 7px; height: 7px; border-radius: 50%; background: #55b86a; box-shadow: 0 0 8px #55b86a; }

/* participants */
.people { display: grid; gap: 8px; grid-template-rows: 1fr 1fr; min-height: 0; }
.ptile { position: relative; border-radius: 10px; overflow: hidden; background: #0e1c29; transition: box-shadow .4s; }
.ptile .person { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ptile.speaking { box-shadow: 0 0 0 2px var(--gold), 0 0 24px -4px rgba(201,162,39,.7); }
.ptile .who { position: absolute; left: 6px; bottom: 6px; padding: 4px 8px; border-radius: 6px; background: rgba(0,0,0,.5); color: var(--cream); font: 700 10.5px/1 Montserrat; }
.ptile .bars { position: absolute; right: 7px; bottom: 7px; display: flex; align-items: flex-end; gap: 2px; height: 14px; opacity: 0; transition: opacity .3s; }
.ptile .bars i { width: 3px; border-radius: 2px; background: var(--gold); height: 30%; }
.ptile.speaking .bars { opacity: 1; }
.ptile.speaking .bars i { animation: talk .5s ease-in-out infinite alternate; }
.ptile.speaking .bars i:nth-child(2) { animation-delay: .15s; } .ptile.speaking .bars i:nth-child(3) { animation-delay: .3s; }
@keyframes talk { from { height: 25%; } to { height: 100%; } }

/* chat toasts on the whiteboard */
.toasts { position: absolute; z-index: 6; left: 28px; bottom: -64px; width: 300px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; pointer-events: none; }
.toast { max-width: 100%; padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: rgba(244,238,220,.97); color: var(--navy); font: 600 13px/1.4 Montserrat; box-shadow: 0 18px 34px -12px rgba(0,0,0,.7); animation: toastIn .5s var(--ease) both; }
.toast b { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.toast.tutor { align-self: flex-end; border-radius: 12px 12px 4px 12px; background: var(--gold); }
.toast.tutor b { color: rgba(17,33,47,.6); }
.toast.out { animation: toastOut .5s ease both; }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px) scale(.95); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-8px); } }

.call-bar { display: flex; justify-content: center; gap: 10px; padding: 10px; background: #0a141d; border-top: 1px solid rgba(244,238,220,.08); }
.cb { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(244,238,220,.08); color: rgba(244,238,220,.85); }
.cb svg { width: 17px; height: 17px; }
.cb.on { background: rgba(85,184,106,.2); color: #7fd493; }
.cb.end { background: #d9534f; color: #fff; width: 46px; border-radius: 99px; }

.call-chip { position: absolute; right: -12px; bottom: -30px; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; background: rgba(17,33,47,.85); border: 1px solid rgba(244,238,220,.16); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--cream); font: 600 13px/1.2 Montserrat; box-shadow: var(--shadow-sm); animation: float 7s ease-in-out infinite; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #55b86a; box-shadow: 0 0 0 0 rgba(85,184,106,.6); animation: livePulse 2s infinite; }
@keyframes livePulse { 70% { box-shadow: 0 0 0 10px rgba(85,184,106,0); } 100% { box-shadow: 0 0 0 0 rgba(85,184,106,0); } }

@media (max-width: 1000px) {
  .hero-film .hero-grid { grid-template-columns: 1fr; }
  .call-stage { max-width: 640px; margin: 20px auto 0; }
  .toasts { left: 16px; bottom: -64px; width: 280px; }
  .call { transform: none !important; }
}
@media (max-width: 640px) {
  .call-body { grid-template-columns: 1fr; }
  .people { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .ptile { aspect-ratio: 4 / 3; }
  #wb-svg text.ch { font-size: 22px; }
  .call-top { font-size: 11px; padding: 9px 12px; }
  .call-chip { position: relative; left: 0; bottom: 0; margin-top: 14px; width: fit-content; }
  .toast { font-size: 11.5px; }
  .toasts { position: relative; left: 0; bottom: 0; width: 100%; min-height: 96px; margin-top: 12px; justify-content: flex-end; }
}


/* ---------- fit the whole hero (text + lesson) on the first screen ---------- */
@media (min-width: 1001px) {
  .hero-film { min-height: calc(100vh - var(--hdr, 170px)); min-height: calc(100svh - var(--hdr, 170px)); padding: clamp(14px, 2.6vh, 34px) 0 clamp(50px, 7vh, 76px); align-items: center; }
  .hero-film .hero-grid { align-items: center; }
  .hero-film h1 { font-size: clamp(36px, min(4vw, 7.4vh), 66px); white-space: nowrap; margin: clamp(10px, 1.8vh, 20px) 0 clamp(12px, 2.2vh, 24px); }
  .hero-film .lead { font-size: clamp(15px, min(1.2vw, 2.2vh), 18px); max-width: 50ch; line-height: 1.6; }
  .hero-film .hero-actions { margin-top: clamp(14px, 3vh, 32px); }
  .hero-film .hero-badges { margin-top: clamp(12px, 2.6vh, 34px); gap: 18px; }
  /* the call window's width is capped by the screen height, so its full height always fits */
  .hero-film .call-stage { justify-self: end; width: min(100%, calc((100vh - var(--hdr, 170px) - 205px) * 1.42)); width: min(100%, calc((100svh - var(--hdr, 170px) - 205px) * 1.42)); }
  .hero-film .scroll-cue { display: none; }
  .hero-film .hero-curve { height: 46px; }
}
@media (min-width: 1001px) and (max-height: 720px) {
  .hero-film .hero-badges { display: none; }
}

/* ---------- tutor + student body language ---------- */
.person g { transform-box: view-box; }
.person .eyes { transform-origin: 60px 40px; animation: blink 4.2s infinite; }
#tile-student .person .eyes { animation-duration: 5.1s; animation-delay: -2s; }
.person .mouth { transform-origin: 60px 48px; }
.ptile.speaking .person .mouth { animation: mouthTalk .32s ease-in-out infinite alternate; }

/* tutor: always explaining, much more animated while speaking */
.t-body { transform-origin: 60px 90px; animation: sway 3.4s ease-in-out infinite; }
.t-head { transform-origin: 60px 52px; animation: headIdle 3.8s ease-in-out infinite; }
.t-armL { transform-origin: 40px 68px; animation: tPointArm 3s ease-in-out infinite; }
.t-foreL { transform-origin: 24px 84px; animation: tPointFore 3s ease-in-out infinite; }
.t-armR { transform-origin: 80px 68px; animation: tGestArm 2.4s ease-in-out infinite; }
.t-foreR { transform-origin: 96px 84px; animation: tGestFore 2.4s ease-in-out infinite; }
#tile-tutor.speaking .t-head { animation: headTalk 1.1s ease-in-out infinite; }
#tile-tutor.speaking .t-armL, #tile-tutor.speaking .t-foreL { animation-duration: 1.5s; }
#tile-tutor.speaking .t-armR { animation: tGestArmBig 1.15s ease-in-out infinite; }
#tile-tutor.speaking .t-foreR { animation: tGestForeBig 1.15s ease-in-out infinite; }
#tile-tutor.speaking .brow { animation: brows 1.1s ease-in-out infinite; transform-origin: 60px 31px; }

/* student: listens, thinks with a hand on the chin, takes notes, raises a hand to ask */
.s-body { transform-origin: 60px 90px; animation: sway 4.6s ease-in-out infinite; }
.s-head { transform-origin: 60px 54px; animation: sTilt 5.2s ease-in-out infinite; }
.s-armR { transform-origin: 80px 72px; }
.s-foreR { transform-origin: 90px 90px; animation: sThink 9s ease-in-out infinite; }
.s-pen { animation: scribble .55s steps(3) infinite; }
#tile-student.speaking .s-head { animation: headTalk 1.2s ease-in-out infinite; }
#tile-student.speaking .s-armR { animation: sRaiseArm 1.4s ease-out forwards; }
#tile-student.speaking .s-foreR { animation: sRaiseFore 1.4s ease-out forwards, wave .5s .9s ease-in-out infinite alternate; }

@keyframes blink { 0%, 93%, 100% { scale: 1 1; } 96% { scale: 1 .1; } }
@keyframes mouthTalk { from { scale: 1 .45; } to { scale: 1.08 1.7; } }
@keyframes sway { 0%, 100% { rotate: 0deg; } 50% { rotate: 1.6deg; } }
@keyframes headIdle { 0%, 100% { rotate: 0deg; } 50% { rotate: -3deg; } }
@keyframes headTalk { 0%, 100% { rotate: 0deg; translate: 0 0; } 25% { rotate: -6deg; translate: 0 -.8px; } 60% { rotate: 5deg; } }
@keyframes brows { 0%, 100% { translate: 0 0; } 40% { translate: 0 -1.6px; } }
@keyframes tPointArm { 0%, 100% { rotate: 0deg; } 35% { rotate: -14deg; } 65% { rotate: -6deg; } }
@keyframes tPointFore { 0%, 100% { rotate: 0deg; } 25% { rotate: -22deg; } 45% { rotate: -10deg; } 70% { rotate: -24deg; } }
@keyframes tGestArm { 0%, 100% { rotate: 0deg; } 30% { rotate: 12deg; } 65% { rotate: -6deg; } }
@keyframes tGestFore { 0%, 100% { rotate: 0deg; } 25% { rotate: 20deg; } 55% { rotate: -16deg; } 80% { rotate: 12deg; } }
@keyframes tGestArmBig { 0%, 100% { rotate: -4deg; } 30% { rotate: 22deg; } 60% { rotate: -14deg; } 80% { rotate: 10deg; } }
@keyframes tGestForeBig { 0%, 100% { rotate: 0deg; } 20% { rotate: 34deg; } 45% { rotate: -28deg; } 70% { rotate: 24deg; } }
@keyframes sTilt { 0%, 100% { rotate: 0deg; } 30% { rotate: 6deg; } 60% { rotate: 2deg; } 80% { rotate: -3deg; } }
@keyframes sThink { 0%, 28% { rotate: 62deg; } 38%, 70% { rotate: 0deg; } 80%, 100% { rotate: 62deg; } }
@keyframes scribble { 0% { translate: 0 0; } 33% { translate: 1.6px -.8px; } 66% { translate: -1px .6px; } }
@keyframes sRaiseArm { to { rotate: -38deg; } }
@keyframes sRaiseFore { to { rotate: 34deg; } }
@keyframes wave { from { rotate: 26deg; } to { rotate: 42deg; } }

/* ---------- layered chalkboard background ---------- */
.board-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.slate { position: absolute; inset: -6%; animation: slateDrift 40s ease-in-out infinite alternate;
  background:
    radial-gradient(ellipse 40% 30% at 22% 30%, rgba(244,238,220,.06), transparent 70%),
    radial-gradient(ellipse 35% 25% at 70% 70%, rgba(244,238,220,.05), transparent 70%),
    radial-gradient(ellipse 50% 22% at 60% 18%, rgba(244,238,220,.04), transparent 70%),
    repeating-linear-gradient(-8deg, rgba(244,238,220,.018) 0 2px, transparent 2px 46px),
    linear-gradient(160deg, #18303a 0%, #122630 45%, #0d1d27 100%); }
.slate::after { content: ""; position: absolute; inset: 0; opacity: .5; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes slateDrift { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.05) translate(-1.5%, 1%); } }
.chalk-far { position: absolute; inset: -40px; }
.chalk-far span { position: absolute; color: var(--cream); font-family: "Playfair Display", serif; font-style: italic; white-space: nowrap; filter: blur(.4px); transform: rotate(var(--r)); animation: farDrift 20s ease-in-out infinite alternate; }
@keyframes farDrift { from { translate: 0 0; } to { translate: 14px -10px; } }
.chalk-mid { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; }
.chalk-mid .ch { fill: none; stroke: rgba(244,238,220,.85); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: url(#chalkyBg); }
.chalk-mid text.ch { font: 400 30px "Playfair Display", serif; stroke-width: .9; fill: rgba(244,238,220,0); transition: fill .8s; }
.chalk-mid text.ch.filled { fill: rgba(244,238,220,.8); }
.chalk-mid .gold { stroke: rgba(230,195,90,.95); }
.chalk-mid text.gold.filled { fill: rgba(230,195,90,.9); }
.chalk-mid g { transition: opacity 1.4s; }
/* keeps the headline crisp over the busy board */
.board-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,22,30,.86) 0%, rgba(11,22,30,.62) 34%, rgba(11,22,30,.12) 62%, rgba(11,22,30,.25) 100%), radial-gradient(ellipse at 50% 120%, rgba(0,0,0,.55), transparent 60%); }
@media (max-width: 1000px) { .board-shade { background: linear-gradient(180deg, rgba(11,22,30,.82) 0%, rgba(11,22,30,.55) 45%, rgba(11,22,30,.35) 100%); } }

/* ---------- messages + Zoom tag sit in their own row under the call, never on top of it ---------- */
.call-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; min-height: 64px; }
.call-foot .toasts { position: relative; left: auto; bottom: auto; width: auto; flex: 1; min-width: 0; display: grid; align-items: center; }
.call-foot .toast, .call-foot .toast.tutor { grid-area: 1 / 1; align-self: center; justify-self: start; max-width: 100%; }
.call-foot .toast.out { animation: toastOut .4s ease both; }
.call-foot .call-chip { position: static; flex-shrink: 0; animation: none; }
@media (max-width: 640px) {
  .call-foot { flex-direction: column; align-items: stretch; min-height: 0; }
  .call-foot .toasts { min-height: 62px; margin-top: 0; }
  .call-foot .call-chip { margin-top: 0; width: fit-content; }
}
.call-foot .call-chip { padding: 9px 14px; font-size: 12.5px; line-height: 1.25; gap: 9px; }
.call-foot .call-chip small { display: block; font: 500 11px/1.3 Montserrat, sans-serif; opacity: .7; }
.call-foot .toast { font-size: 12.5px; padding: 8px 12px; }
.call-foot .toast { min-width: min(100%, 220px); }
/* on short screens the message gets the whole row; the Zoom tag steps aside */
@media (min-width: 1001px) and (max-height: 720px) { .call-foot .call-chip { display: none; } }