/* ══════════════════════════════════════════════════════════════
   Dr. Ahmadpour English Institute — "Language Atelier" edition
   Warm paper & ink · chalkboard hero · bilingual RTL-first
   ══════════════════════════════════════════════════════════════ */

/* The HTML `hidden` attribute must always win over class display rules.
   (Overlays like .spotlight/.quiz-panel/.tools-panel set display:grid/flex,
   which would otherwise override [hidden] and leave them stuck on screen.) */
[hidden] { display: none !important; }

/* ---------- fonts ---------- */
/* Persian: Vazirmatn (falls back to Tahoma if CDN unreachable) */
@font-face {
  font-family: "Vazirmatn";
  src: url("/assets/fonts/Vazirmatn-Regular.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("/assets/fonts/Vazirmatn-Bold.woff2") format("woff2");
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("/assets/fonts/Vazirmatn-ExtraBold.woff2") format("woff2");
  font-weight: 800; font-display: swap;
}
/* Latin display: Fraunces — warm editorial serif (falls back to Georgia) */
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/Fraunces-600.woff2") format("woff2");
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/Fraunces-900.woff2") format("woff2");
  font-weight: 900; font-display: swap;
}

:root {
  /* ink & paper */
  --ink: #1c2a26;
  --ink-2: #14211d;
  --ink-soft: #5d6b60;
  --paper: #f6f1e5;
  --paper-2: #efe8d6;
  --card: #fdfbf5;
  --line: #e2d9c4;
  --rule: rgba(28, 42, 38, 0.055);       /* notebook ruled lines */
  --margin-line: rgba(201, 104, 58, 0.3); /* the red margin stroke */
  /* board */
  --board: #16332c;
  --board-2: #0e211d;
  --chalk-text: #f2efe4;
  --chalk-dim: #b9c4b4;
  /* brand accents */
  --teal: #10b195;
  --teal-deep: #0b8f78;
  --blue: #3d7bd9;
  --gold: #f4b942;
  --terra: #c9683a;
  --radius: 20px;
  --font: "Vazirmatn", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Tahoma, Arial, sans-serif;
  --font-latin: "Fraunces", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }

/* ---------- the paper ---------- */
body {
  font-family: var(--font);
  color: var(--ink);
  background:
    /* ruled notebook lines */
    repeating-linear-gradient(180deg,
      transparent 0px, transparent 35px,
      var(--rule) 35px, var(--rule) 36px),
    /* soft warm pools of light */
    radial-gradient(900px 480px at 88% -6%, rgba(16, 177, 149, 0.09), transparent 60%),
    radial-gradient(760px 480px at -4% 38%, rgba(244, 185, 66, 0.10), transparent 55%),
    linear-gradient(180deg, #f9f5ec 0%, var(--paper) 40%, var(--paper-2) 100%);
  -webkit-font-smoothing: antialiased;
}

/* paper grain */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 3;
  opacity: 0.05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

/* the red margin line, like a real notebook (paper side only) */
body:not(.classpage)::before {
  content: "";
  position: fixed; top: 0; bottom: 0;
  inset-inline-start: clamp(18px, 4vw, 62px);
  width: 2px;
  background: var(--margin-line);
  z-index: 0; pointer-events: none;
}

/* keep real content above the decoration layer */
.lobby, .footer { position: relative; z-index: 1; }

/* ============ page-wide decoration ============ */
.bg-deco { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  animation: orbdrift 18s ease-in-out infinite alternate;
}
.orb-1 { width: 420px; height: 420px; top: -120px; inset-inline-start: -140px;
         background: radial-gradient(circle, rgba(16, 177, 149, 0.16), transparent 65%); }
.orb-2 { width: 460px; height: 460px; bottom: -160px; inset-inline-end: -160px;
         background: radial-gradient(circle, rgba(244, 185, 66, 0.15), transparent 65%);
         animation-delay: -6s; }

@keyframes orbdrift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(50px, -40px) scale(1.12); }
}

/* giant ghost letters — set in the editorial serif */
.ghost {
  position: absolute;
  font-family: var(--font-latin);
  font-weight: 900;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px rgba(28, 42, 38, 0.08);
  animation: floaty 11s ease-in-out infinite;
  user-select: none;
}
.ghost-1 { font-size: 280px; top: 16%; inset-inline-start: -40px; }
.ghost-2 { font-size: 240px; bottom: 4%; inset-inline-start: 3%; animation-delay: -4s; font-family: var(--font); font-weight: 800; }
.ghost-3 { font-size: 300px; top: 42%; inset-inline-end: -50px; animation-delay: -7s; }

@supports not (-webkit-text-stroke: 2px black) {
  .ghost { color: rgba(28, 42, 38, 0.05); -webkit-text-stroke: 0; }
}

@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-18px) rotate(3deg); }
}

/* ================= header ================= */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 28px;
  background: rgba(250, 246, 237, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(226, 217, 196, 0.9);
  position: sticky; top: 0; z-index: 30;
  animation: dropin 0.5s ease both;
}

@keyframes dropin {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; letter-spacing: -0.01em; }
.brand-dot {
  width: 14px; height: 14px; border-radius: 5px;
  background: linear-gradient(135deg, var(--teal), var(--gold));
  transform: rotate(45deg);
  box-shadow: 0 2px 10px rgba(16, 177, 149, 0.45);
  animation: breathe 3.4s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { transform: rotate(45deg) scale(1); }
  50%      { transform: rotate(45deg) scale(1.15); }
}
.topbar-side { display: flex; align-items: center; gap: 14px; }
.clock { color: var(--ink-soft); font-size: 14px; font-variant-numeric: tabular-nums; }

.lang-toggle {
  font-family: inherit; font-size: 13px; font-weight: 700;
  padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink); cursor: pointer;
  transition: all 0.15s ease;
}
.lang-toggle:hover { border-color: var(--teal); color: var(--teal-deep); }
.lang-toggle:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }

/* ================= lobby ================= */
.lobby { max-width: 1080px; margin: 0 auto; padding: 34px 20px 40px; }

/* ═══════════ HERO — the chalkboard ═══════════ */
.hero {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  padding: clamp(34px, 5.5vw, 62px);
  color: var(--chalk-text);
  background:
    radial-gradient(700px 320px at 85% 0%, rgba(16, 177, 149, 0.18), transparent 60%),
    radial-gradient(560px 300px at 0% 100%, rgba(61, 123, 217, 0.14), transparent 60%),
    linear-gradient(155deg, var(--board) 0%, var(--board-2) 78%);
  box-shadow:
    0 30px 70px rgba(20, 33, 29, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(242, 239, 228, 0.06);
  animation: rise 0.7s ease both;
}

/* chalk dust on the board */
.hero .board-frame {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: 0.10;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23c)' opacity='1' fill='white'/%3E%3C/svg%3E");
  mix-blend-mode: screen;
}
/* golden chalk tray line along the bottom */
.hero::after {
  content: "";
  position: absolute; z-index: 1;
  inset-inline: 26px; bottom: 14px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, rgba(244, 185, 66, 0.55) 18%, rgba(244, 185, 66, 0.55) 82%, transparent);
  opacity: 0.7;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.eyebrow {
  position: relative; z-index: 2;
  font-size: 12.5px; font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--gold);
  margin-bottom: 14px;
  text-transform: uppercase;
}

.hero h1 {
  font-size: clamp(30px, 4.8vw, 50px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 800;
  max-width: 600px;
  position: relative; z-index: 2;
  text-wrap: balance;
}
html[lang="en"] .hero h1 {
  font-family: var(--font-latin);
  font-weight: 900;
  letter-spacing: 0;
}

.chalk-underline {
  position: relative; z-index: 2;
  display: block;
  width: min(220px, 46%);
  height: 12px;
  margin-top: 10px;
  opacity: 0.9;
}
.chalk-underline path {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  animation: chalkdraw 0.9s ease 0.5s forwards;
}
@keyframes chalkdraw { to { stroke-dashoffset: 0; } }

.hero p:not(.eyebrow) {
  margin-top: 14px;
  color: var(--chalk-dim);
  font-size: 16.5px;
  line-height: 1.75;
  max-width: 500px;
  position: relative; z-index: 2;
}

/* animated illustration (book, cap, bubbles) */
.hero-art {
  position: absolute;
  inset-inline-end: 3%;
  bottom: -14px;
  width: clamp(220px, 30vw, 330px);
  z-index: 1;
  pointer-events: none;
  animation: artfloat 7s ease-in-out infinite;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.28));
}
.hero-art svg { width: 100%; height: auto; display: block; }

@keyframes artfloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

.art-cap { animation: capbob 5s ease-in-out infinite; transform-origin: 180px 100px; }
@keyframes capbob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-9px) rotate(-2.5deg); }
}

.art-bubble1 { animation: bubble 6s ease-in-out infinite; }
.art-bubble2 { animation: bubble 6s ease-in-out infinite reverse; animation-delay: -2s; }
@keyframes bubble {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

.art-star { animation: twinkle 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.art-star.s2 { animation-delay: -0.9s; }
.art-star.s3 { animation-delay: -1.7s; }

/* floating chalk letters */
.float-letters { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.float-letters span {
  position: absolute;
  font-family: var(--font-latin);
  font-weight: 900;
  color: rgba(242, 239, 228, 0.06);
  text-shadow: 0 0 40px rgba(62, 230, 195, 0.12);
  animation: floaty 9s ease-in-out infinite;
}
.float-letters span:nth-child(1) { font-size: 130px; top: -24px; inset-inline-end: 7%; animation-delay: 0s; }
.float-letters span:nth-child(2) { font-size: 84px;  top: 48%;  inset-inline-end: 22%; animation-delay: -2s; }
.float-letters span:nth-child(3) { font-size: 100px; bottom: -20px; inset-inline-end: 3%; animation-delay: -4s; }
.float-letters span:nth-child(4) { font-size: 72px;  top: 10%;  inset-inline-start: 40%; animation-delay: -3s; }
.float-letters span:nth-child(5) { font-size: 64px;  bottom: 10%; inset-inline-start: 48%; animation-delay: -6s; }
.float-letters span:nth-child(6) { font-size: 58px;  top: 58%;  inset-inline-end: 42%; animation-delay: -7.5s; }

/* word of the day — a pinned flashcard */
.wod {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 22px;
  padding: 10px 18px;
  border-radius: 4px 14px 14px 14px;
  background: rgba(244, 185, 66, 0.12);
  border: 1px dashed rgba(244, 185, 66, 0.55);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
  font-size: 14px;
  transform: rotate(-1deg);
  transition: transform 0.25s ease;
}
.wod:hover { transform: rotate(0.5deg) scale(1.03); }
/* the "pin" */
.wod::before {
  content: "";
  position: absolute;
  top: -5px; inset-inline-start: 10px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--terra);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), inset 0 -2px 3px rgba(0, 0, 0, 0.3);
}
.wod-label {
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--gold);
}
.wod-label::after { content: " ✦"; display: inline-block; animation: twinkle 2.6s ease-in-out infinite; }

@keyframes twinkle {
  0%, 100% { opacity: 0.5; transform: scale(0.9); }
  50%      { opacity: 1;   transform: scale(1.15); }
}
.wod-en { font-family: var(--font-latin); font-weight: 900; color: #fff; font-size: 16px; }
.wod-fa { color: var(--chalk-dim); }

/* scrolling English words strip */
.marquee {
  position: relative; z-index: 2;
  margin-top: 22px;
  overflow: hidden;
  max-width: 520px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee-track {
  display: inline-flex;
  gap: 18px;
  white-space: nowrap;
  animation: slide 26s linear infinite;
}

.marquee-track span {
  font-family: var(--font-latin);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(242, 239, 228, 0.3);
}

@keyframes slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* name + teacher fields */
.namebox { position: relative; z-index: 2; margin-top: 28px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.namebox input {
  flex: 1; min-width: 240px; max-width: 380px;
  padding: 15px 18px; font-size: 16px; font-family: inherit;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 15px;
  background: rgba(253, 251, 245, 0.97);
  color: var(--ink);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  transition: box-shadow 0.2s ease;
}
.namebox input:focus {
  outline: 3px solid var(--teal); outline-offset: 1px; border-color: transparent;
  box-shadow: 0 8px 30px rgba(16, 177, 149, 0.35);
}

.hint { font-size: 13px; color: var(--chalk-dim); width: 100%; }
.hint.error { color: #ffb0a3; font-weight: 700; }

.teacherbox { position: relative; z-index: 2; margin-top: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.teacher-check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--chalk-dim); cursor: pointer; user-select: none; }
.teacher-check input { width: 16px; height: 16px; accent-color: var(--teal); cursor: pointer; }

.t-field {
  padding: 11px 15px; font-size: 16px; font-family: inherit;
  border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 12px;
  background: rgba(253, 251, 245, 0.97); color: var(--ink); width: 180px;
}
.t-field:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: transparent; }
.t-field::placeholder { text-align: start; }

/* ═══════════ ROOM CARDS — classroom doors ═══════════ */
.rooms {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 22px;
}

.room {
  position: relative;
  background: linear-gradient(180deg, var(--card) 0%, #faf6ec 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 24px 22px;
  overflow: hidden;
  display: flex; flex-direction: column; gap: 6px;
  box-shadow: 0 4px 18px rgba(28, 42, 38, 0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  animation: rise 0.7s ease both;
  animation-delay: calc(0.12s + var(--stagger, 0) * 0.1s);
}

.room::before {
  content: "";
  position: absolute;
  top: 0; inset-inline: 0; height: 5px;
  background: linear-gradient(90deg, var(--room-color, var(--teal)), transparent 90%);
}

/* soft colored glow that appears on hover */
.room::after {
  content: "";
  position: absolute;
  width: 220px; height: 220px;
  border-radius: 50%;
  top: -110px; inset-inline-end: -80px;
  background: radial-gradient(circle, var(--room-color, var(--teal)), transparent 70%);
  opacity: 0.06;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.room:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--room-color, var(--teal)) 45%, var(--line));
  box-shadow: 0 20px 44px rgba(28, 42, 38, 0.14);
}
.room:hover::after { opacity: 0.14; }
.room:hover .badge { animation: wobble 0.55s ease; }

@keyframes wobble {
  0%   { transform: rotate(0deg) scale(1); }
  30%  { transform: rotate(-7deg) scale(1.08); }
  60%  { transform: rotate(5deg) scale(1.05); }
  100% { transform: rotate(0deg) scale(1); }
}

.room-top { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }

/* big letter badge — serif, like a printed monogram */
.badge {
  width: 52px; height: 52px; flex: none;
  display: grid; place-items: center;
  border-radius: 16px;
  font-family: var(--font-latin);
  font-size: 26px; font-weight: 900;
  color: #fff;
  background: linear-gradient(140deg, var(--room-color, var(--teal)), color-mix(in srgb, var(--room-color, var(--teal)) 60%, #14211d));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--room-color, var(--teal)) 45%, transparent);
}

.room .subject {
  font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--room-color, var(--teal));
}
.room h2 { font-size: 23px; letter-spacing: -0.01em; }
.room .teacher { color: var(--ink-soft); font-size: 14px; }
.room .sched {
  margin-top: 6px;
  display: inline-block; width: fit-content;
  font-size: 12.5px; font-weight: 700; color: var(--ink);
  background: color-mix(in srgb, var(--room-color, var(--teal)) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--room-color, var(--teal)) 25%, transparent);
  padding: 5px 10px; border-radius: 999px;
}

.room .capacity { margin-top: 12px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #9fb0a0; }
.dot.live { background: #2fae5f; box-shadow: 0 0 0 4px rgba(47, 174, 95, 0.15); animation: pulse 2.4s ease-in-out infinite; }

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(47, 174, 95, 0.15); }
  50%      { box-shadow: 0 0 0 8px rgba(47, 174, 95, 0.06); }
}

.room button {
  padding: 14px 16px;
  font-size: 15px; font-weight: 800; font-family: inherit;
  color: #fff;
  background: linear-gradient(135deg, var(--room-color, var(--teal)), color-mix(in srgb, var(--room-color, var(--teal)) 70%, #14211d));
  border: none; border-radius: 14px; cursor: pointer;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--room-color, var(--teal)) 35%, transparent);
  transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease;
  position: relative; overflow: hidden;
}
.room button:hover {
  transform: translateY(-2px);
  filter: brightness(1.07);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--room-color, var(--teal)) 45%, transparent);
}
.room button:active { transform: translateY(0); }
.room button::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 60px;
  inset-inline-start: -80px;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-18deg);
  animation: sheen 5.5s ease-in-out infinite;
}

@keyframes sheen {
  0%, 68%  { inset-inline-start: -80px; }
  86%, 100% { inset-inline-start: 130%; }
}
.room button:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

.room-actions { display: flex; gap: 8px; margin-top: 16px; align-items: stretch; }
.room-actions button:first-child { flex: 1; margin-top: 0; }

.share-btn {
  flex: none; width: 52px;
  font-size: 19px; font-family: inherit;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--card); cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.share-btn:hover {
  transform: translateY(-2px);
  border-color: var(--room-color, var(--teal));
  box-shadow: 0 8px 18px rgba(28, 42, 38, 0.12);
}
.share-btn::after { content: none; }

/* highlighted card when arriving via a shared link */
.room.wanted {
  border-color: var(--room-color, var(--teal));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--room-color, var(--teal)) 25%, transparent),
              0 18px 40px rgba(28, 42, 38, 0.14);
  animation: wantpulse 1.6s ease-in-out 3;
}
@keyframes wantpulse {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--room-color, var(--teal)) 25%, transparent); }
  50%      { box-shadow: 0 0 0 10px color-mix(in srgb, var(--room-color, var(--teal)) 12%, transparent); }
}

/* ═══════════ SECTIONS: how-it-works + features ═══════════ */
.sec-head { text-align: center; margin-bottom: 30px; }
.sec-kicker {
  display: inline-block;
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 8px;
}
.sec-head h2 {
  font-size: clamp(22px, 3.4vw, 32px);
  font-weight: 800; letter-spacing: -0.01em;
}
html[lang="en"] .sec-head h2 { font-family: var(--font-latin); font-weight: 900; }

/* scroll-in reveal */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

.how { margin-top: 64px; }
.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  counter-reset: step;
}
.step {
  position: relative;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 18px 24px;
  box-shadow: 0 4px 16px rgba(28, 42, 38, 0.05);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.step:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(28, 42, 38, 0.1); }
.step .num {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  margin: 0 auto 14px;
  border-radius: 50%;
  font-size: 20px; font-weight: 800;
  color: #fff;
  background: linear-gradient(140deg, var(--teal), var(--teal-deep));
  box-shadow: 0 8px 18px rgba(16, 177, 149, 0.35);
}
.step:nth-child(2) .num { background: linear-gradient(140deg, var(--blue), #2b5eb0); box-shadow: 0 8px 18px rgba(61, 123, 217, 0.35); }
.step:nth-child(3) .num { background: linear-gradient(140deg, var(--gold), #d99a1d); box-shadow: 0 8px 18px rgba(244, 185, 66, 0.4); }
.step b { display: block; font-size: 16.5px; margin-bottom: 6px; }
.step small { color: var(--ink-soft); font-size: 13px; line-height: 1.7; }

/* dashed connectors between the steps */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50px;
  inset-inline-end: -14px;
  width: 14px; height: 2px;
  border-top: 2px dashed var(--line);
}

.features { margin-top: 64px; }
.feats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.feat {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px 18px;
  display: flex; flex-direction: column; gap: 4px;
  box-shadow: 0 4px 14px rgba(28, 42, 38, 0.04);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.feat:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--teal) 40%, var(--line));
  box-shadow: 0 14px 30px rgba(28, 42, 38, 0.1);
}
.f-ico {
  font-size: 26px;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--teal) 9%, transparent);
  margin-bottom: 8px;
}
.feat:nth-child(2) .f-ico { background: color-mix(in srgb, var(--gold) 14%, transparent); }
.feat:nth-child(3) .f-ico { background: color-mix(in srgb, var(--blue) 10%, transparent); }
.feat:nth-child(4) .f-ico { background: color-mix(in srgb, var(--terra) 11%, transparent); }
.feat:nth-child(5) .f-ico { background: color-mix(in srgb, var(--blue) 10%, transparent); }
.feat:nth-child(6) .f-ico { background: color-mix(in srgb, var(--gold) 14%, transparent); }
.feat b { font-size: 15.5px; }
.feat small { color: var(--ink-soft); font-size: 13px; line-height: 1.7; }

/* smooth exit when joining a class */
body { transition: opacity 0.26s ease; }
body.leaving { opacity: 0; }

/* ================= footer / contact ================= */
.footer { text-align: center; padding: 40px 16px 60px; color: var(--ink-soft); font-size: 13px; }
.footer p { margin-bottom: 18px; }

.contact {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 24px 18px; max-width: 560px; margin: 0 auto;
  background: linear-gradient(180deg, var(--card), #f8f3e8);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 14px; color: var(--ink);
  box-shadow: 0 6px 22px rgba(28, 42, 38, 0.06);
}
.contact-line a { color: var(--teal-deep); font-weight: 800; text-decoration: none; font-size: 16px; }
.contact-line a:hover { text-decoration: underline; }
.contact-links { display: flex; gap: 12px; color: var(--ink-soft); }
.contact-links a { color: var(--ink-soft); font-weight: 700; transition: color 0.15s ease; }
.contact-links a:hover { color: var(--teal-deep); }

.toast {
  position: fixed; bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(16px);
  z-index: 90;
  padding: 12px 22px; border-radius: 999px;
  background: var(--ink); color: #fff;
  font-size: 14px; font-weight: 700;
  box-shadow: 0 14px 34px rgba(28, 42, 38, 0.35);
  opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ══════════════════════════════════════════════════════════════
   CLASSROOM PAGE (dark theme)
   ══════════════════════════════════════════════════════════════ */
.classpage { display: flex; flex-direction: column; height: 100vh; height: 100dvh; background: #0f151c; color: #e9eef3; }
.classpage::after { content: none; } /* no paper grain over video */

.classbar {
  animation: dropin 0.45s ease both;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px;
  background: #161e27; border-bottom: 1px solid #24303c; font-size: 14px;
}
.classbar .room-name { font-weight: 700; }
.classbar .count { color: #9db0c2; font-variant-numeric: tabular-nums; }
.classbar a { color: #e9eef3; text-decoration: none; background: #24303c; padding: 8px 14px; border-radius: 10px; font-weight: 600; }
.classbar a:hover { background: #2e3d4c; }

.teacher-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.tc-btn {
  font-family: inherit; font-size: 13px; font-weight: 600;
  padding: 8px 12px; border: none; border-radius: 10px;
  background: #34506b; color: #fff; cursor: pointer;
}
.tc-btn:hover { background: #40617f; }
.tc-btn:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

.people-panel {
  position: absolute; top: 56px; inset-inline-end: 16px; z-index: 20;
  width: 260px; max-width: calc(100vw - 24px); max-height: 60vh; overflow-y: auto;
  background: #161e27; border: 1px solid #24303c; border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4); padding: 8px;
}
.people-panel ul { list-style: none; }
.people-panel li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 10px; font-size: 14px; }
.people-panel li:hover { background: #1d2833; }
.people-panel li em { font-style: normal; font-size: 11px; font-weight: 700; color: #7fd8c6; }
.people-panel li button { font-family: inherit; font-size: 12px; font-weight: 700; padding: 5px 10px; border: none; border-radius: 8px; background: #b3402f; color: #fff; cursor: pointer; }
.people-panel li button:hover { background: #cc4c39; }
.pp-empty { color: #9db0c2; justify-content: center; }

#meet { flex: 1; position: relative; }
#meet iframe { width: 100%; height: 100%; border: 0; }

/* connecting state — shown until the video is ready */
.meet-loading {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-items: center; align-content: center; gap: 18px;
  background: #0f151c;
  animation: fadein 0.3s ease both;
}
.ml-ring {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 4px solid #24303c;
  border-top-color: var(--teal);
  animation: mlspin 0.9s linear infinite;
}
@keyframes mlspin { to { transform: rotate(360deg); } }
.meet-loading p { color: #9db0c2; font-size: 15px; font-weight: 600; }

.notice { margin: auto; text-align: center; max-width: 420px; padding: 32px; animation: rise 0.6s ease both; }
.notice h2 { margin-bottom: 10px; }
.notice p { color: #9db0c2; line-height: 1.5; }
.notice-btn {
  display: inline-block; margin-top: 20px; padding: 11px 20px;
  border-radius: 12px; background: var(--teal); color: #fff;
  font-weight: 700; font-size: 14px; text-decoration: none;
}
.notice-btn:hover { filter: brightness(1.08); }

/* ============ QUIZ — Kahoot-style ============ */
.quiz-panel {
  position: absolute; top: 56px; inset-inline-start: 16px; z-index: 21;
  width: 340px; max-width: calc(100vw - 24px); max-height: 72vh; overflow-y: auto;
  background: #161e27; border: 1px solid #24303c; border-radius: 16px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
  padding: 16px;
  animation: rise 0.35s ease both;
}
.quiz-panel h3 { font-size: 15px; margin-bottom: 10px; color: #fff; }

#qz-question {
  width: 100%; resize: vertical;
  font-family: inherit; font-size: 14px;
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid #2c3a48; background: #0f151c; color: #e9eef3;
}
#qz-question:focus { outline: 2px solid var(--teal); }

.qz-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.qz-opt { display: flex; align-items: center; gap: 8px; }
.qz-shape {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border-radius: 8px; color: #fff; font-size: 13px; font-weight: 800;
  background: var(--c, #34506b);
}
.qz-opt input[type="text"] {
  flex: 1; font-family: inherit; font-size: 14px;
  padding: 8px 10px; border-radius: 8px;
  border: 1px solid #2c3a48; background: #0f151c; color: #e9eef3;
  min-width: 0;
}
.qz-opt input[type="text"]:focus { outline: 2px solid var(--c, var(--teal)); }
.qz-correct {
  display: grid; place-items: center;
  font-size: 13px; color: #7fd8c6; cursor: pointer;
  padding: 4px 6px; border-radius: 8px; border: 1px dashed #2c3a48;
}
.qz-correct input { accent-color: var(--teal); cursor: pointer; }

.qz-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.qz-row label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #9db0c2; }
#qz-time {
  width: 64px; font-family: inherit; font-size: 14px;
  padding: 7px 8px; border-radius: 8px;
  border: 1px solid #2c3a48; background: #0f151c; color: #e9eef3;
}

.qz-go {
  font-family: inherit; font-size: 13px; font-weight: 800;
  padding: 10px 14px; border: none; border-radius: 10px; cursor: pointer;
  color: #fff; background: linear-gradient(135deg, var(--teal), #0b8f78);
  box-shadow: 0 6px 16px rgba(16, 177, 149, 0.3);
}
.qz-go:hover { filter: brightness(1.08); }
.qz-go.alt { background: #34506b; box-shadow: none; }
.qz-go.alt:hover { background: #40617f; }

.qz-bars { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.qz-bar { display: flex; align-items: center; gap: 8px; }
.qz-track { flex: 1; height: 14px; background: #0f151c; border-radius: 999px; overflow: hidden; }
.qz-track div { height: 100%; border-radius: 999px; transition: width 0.3s ease; }
.qz-bar b { min-width: 22px; text-align: center; font-size: 13px; }
.qz-count { margin-top: 10px; font-size: 13px; color: #9db0c2; }

/* student overlay */
.quiz-overlay {
  position: absolute; inset: 0; z-index: 40;
  display: grid; place-items: center;
  background: rgba(10, 15, 21, 0.72);
  backdrop-filter: blur(6px);
  padding: 16px;
  animation: fadein 0.25s ease both;
}

@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

.qo-card {
  width: 100%; max-width: 520px;
  background: #161e27; border: 1px solid #2c3a48; border-radius: 20px;
  padding: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  animation: rise 0.35s ease both;
}

.qo-timer {
  height: 8px; border-radius: 999px; background: #0f151c;
  overflow: hidden; margin-bottom: 14px;
}
.qo-timer span {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--teal), #f4b942);
  border-radius: 999px;
  transition: width 0.1s linear;
}

.qo-card h3 { font-size: 18px; line-height: 1.5; margin-bottom: 16px; color: #fff; }

.qo-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qo-answers button {
  font-family: inherit; font-size: 15px; font-weight: 700;
  color: #fff; border: none; border-radius: 14px;
  padding: 18px 12px; cursor: pointer; text-align: start;
  transition: transform 0.12s ease, opacity 0.2s ease, box-shadow 0.12s ease;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}
.qo-answers button b { font-size: 17px; margin-inline-end: 6px; }
.qo-answers button:hover:not(:disabled) { transform: translateY(-3px); filter: brightness(1.1); }
.qo-answers button:disabled { cursor: default; }
.qo-answers button.picked { outline: 3px solid #fff; }
.qo-answers button.correct { outline: 3px solid #3ee6c3; animation: winner 0.7s ease; }

@keyframes winner {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.qo-status { margin-top: 14px; text-align: center; font-size: 15px; font-weight: 800; color: #f4b942; min-height: 22px; }

.qo-rank {
  grid-column: 1 / -1;
  display: flex; justify-content: space-between; align-items: center;
  background: #0f151c; border: 1px solid #2c3a48;
  padding: 12px 14px; border-radius: 12px; font-size: 15px;
  animation: rise 0.4s ease both;
}
.qo-rank b { color: #f4b942; }

/* ============ CLASS TOOLS ============ */
.tools-panel {
  position: absolute; top: 56px; inset-inline-start: 16px; z-index: 22;
  width: 290px; max-width: calc(100vw - 24px);
  background: #161e27; border: 1px solid #24303c; border-radius: 16px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
  padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
  animation: rise 0.3s ease both;
}

.tool {
  font-family: inherit; font-size: 14px; font-weight: 700;
  text-align: start;
  padding: 12px 14px; border: 1px solid #2c3a48; border-radius: 12px;
  background: #0f151c; color: #e9eef3; cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease;
}
.tool:hover { background: #1d2833; transform: translateX(-2px); }
[dir="ltr"] .tool:hover { transform: translateX(2px); }

.tool-row { display: flex; gap: 8px; align-items: stretch; }
.tool-row .tool { flex: 1; }
#break-min {
  width: 62px; font-family: inherit; font-size: 15px; font-weight: 700;
  text-align: center;
  border: 1px solid #2c3a48; border-radius: 12px;
  background: #0f151c; color: #e9eef3;
}

.tool-note { font-size: 11.5px; color: #9db0c2; line-height: 1.6; padding: 0 4px; }

/* break pill */
.break-pill {
  position: absolute; top: 64px; left: 50%; transform: translateX(-50%);
  z-index: 45;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px; border-radius: 999px;
  background: linear-gradient(135deg, #f4b942, #e09b1a);
  color: #1c1608; font-weight: 800; font-size: 15px;
  box-shadow: 0 10px 28px rgba(244, 185, 66, 0.4);
  animation: rise 0.4s ease both;
}
.break-pill b { font-variant-numeric: tabular-nums; font-size: 17px; }

/* spotlight */
.spotlight {
  position: absolute; inset: 0; z-index: 46;
  display: grid; place-items: center;
  background: rgba(10, 15, 21, 0.55);
  backdrop-filter: blur(4px);
  animation: fadein 0.2s ease both;
}
.spot-card {
  display: flex; align-items: center; gap: 14px;
  padding: 26px 38px; border-radius: 24px;
  background: linear-gradient(140deg, #122238, #0b8f78);
  border: 1px solid rgba(62, 230, 195, 0.4);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 60px rgba(16, 177, 149, 0.3);
  animation: spotpop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.spot-card span { font-size: 34px; animation: twinkle 1.2s ease-in-out infinite; }
.spot-card b { font-size: 24px; color: #fff; }

@keyframes spotpop {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* confetti pieces */
.cfx {
  position: fixed; top: -20px; z-index: 60;
  display: block; border-radius: 2px;
  pointer-events: none;
  animation: cfall linear both;
}
@keyframes cfall {
  from { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  to   { transform: translateY(110vh) rotate(720deg); opacity: 0.9; }
}

/* ================= mobile ================= */
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .step:not(:last-child)::after { content: none; }
  .feats { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .topbar { padding: 12px 16px; }
  .clock { display: none; }
  .brand { font-size: 16px; }

  .lobby { padding: 16px 12px 32px; }
  body:not(.classpage)::before { display: none; }

  .hero { border-radius: 22px; padding: 28px 20px 32px; }
  .hero h1 { font-size: 28px; }
  .hero p:not(.eyebrow) { font-size: 15px; }

  .hero-art { width: 190px; inset-inline-end: -30px; bottom: -20px; opacity: 0.5; }

  .ghost { display: none; }
  .orb { filter: blur(60px); opacity: 0.7; }

  .float-letters span:nth-child(4),
  .float-letters span:nth-child(5),
  .float-letters span:nth-child(6) { display: none; }
  .float-letters span:nth-child(1) { font-size: 88px; }
  .float-letters span:nth-child(2) { font-size: 58px; }
  .float-letters span:nth-child(3) { font-size: 68px; }

  .wod { flex-wrap: wrap; font-size: 13px; padding: 8px 13px; gap: 8px; }

  .namebox input { min-width: 0; width: 100%; max-width: none; }
  .t-field { width: 100%; }

  .rooms { grid-template-columns: 1fr; gap: 14px; margin-top: 26px; }
  .room { padding: 22px 20px 20px; }
  .room button { padding: 15px 16px; }

  .how, .features { margin-top: 44px; }
  .feats { grid-template-columns: 1fr; }

  .contact { font-size: 13px; }

  .classbar { flex-wrap: wrap; row-gap: 8px; padding: 8px 10px; font-size: 13px; }
  .classbar .room-name { max-width: 55vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .classbar a { padding: 7px 11px; font-size: 13px; }
  .tc-btn { padding: 7px 10px; font-size: 12px; }
  .people-panel { top: 96px; inset-inline-end: 8px; }
  .quiz-panel { inset-inline-start: 8px; top: 96px; width: calc(100vw - 16px); }
  .qo-answers { grid-template-columns: 1fr; }
  .qo-card { padding: 16px; }
  .tools-panel { inset-inline-start: 8px; top: 96px; }
  .break-pill { top: 100px; font-size: 13px; padding: 8px 14px; }
  .spot-card { padding: 20px 26px; }
  .spot-card b { font-size: 19px; }
}

@media (max-width: 360px) {
  .hero h1 { font-size: 25px; }
  .float-letters span:nth-child(2) { display: none; }
}

/* ================= motion sensitivity ================= */
@media (prefers-reduced-motion: reduce) {
  .float-letters span, .dot.live, .hero::after { animation: none; }
  .hero, .room, .step, .feat { animation: none; }
  .wod-label::after, .brand-dot,
  .room button::after, .marquee-track, .room:hover .badge { animation: none; }
  .hero-art, .art-cap, .art-bubble1, .art-bubble2, .art-star,
  .topbar, .contact, .classbar, .notice { animation: none; }
  .orb, .ghost { animation: none; }
  .chalk-underline path { animation: none; stroke-dashoffset: 0; }
  body { transition: none; }
  .room, .room:hover, .room button, .step, .feat { transition: none; transform: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .quiz-panel, .quiz-overlay, .qo-card, .qo-rank,
  .qo-answers button.correct { animation: none; }
  .tools-panel, .break-pill, .spotlight, .spot-card,
  .spot-card span, .cfx { animation: none; }
  .cfx { display: none; }
  .toast, .toast.show { transition: none; }
  .room.wanted { animation: none; }
  .ml-ring { animation: none; border-top-color: #24303c; }
}

/* ══════════════════════════════════════════════════════════════
   PUBLIC / MARKETING HOME PAGE  (index.html)
   Age groups · online & in-person · registration form · phones
   ══════════════════════════════════════════════════════════════ */

.mkt { max-width: 1080px; margin: 0 auto; padding: 0 clamp(14px, 3vw, 26px) 40px; }

/* --- header: "enter class" button --- */
.enter-class, .home-link {
  display: inline-flex; align-items: center;
  padding: 7px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 800; text-decoration: none;
  color: #fff; background: linear-gradient(135deg, var(--teal), var(--teal-deep));
  border: 2px solid var(--ink);
  box-shadow: 0 3px 0 var(--ink);
  transition: transform .12s ease, box-shadow .12s ease;
}
.enter-class:hover, .home-link:hover { transform: translateY(-1px); box-shadow: 0 5px 0 var(--ink); }
.enter-class:active, .home-link:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.home-link { background: var(--card); color: var(--ink); }

/* --- hero: two real columns, so text and artwork can never overlap --- */
.mkt-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(200px, 26vw, 310px);
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  text-align: start;
}
/* Explicit columns: the artwork sits earlier in the markup, so without this it
   would claim the flexible column and squeeze the text into the narrow one. */
.mkt-hero .hero-copy { grid-column: 1; grid-row: 1; position: relative; z-index: 2; min-width: 0; }
/* the shared .hero-art is absolutely positioned for the lobby — here it is a grid cell */
.mkt-hero .hero-art {
  grid-column: 2;
  grid-row: 1;
  position: static;
  inset: auto;
  width: 100%;
  align-self: center;
  animation: artfloat 7s ease-in-out infinite;
}
.mkt-hero h1, .mkt-hero p:not(.eyebrow) { max-width: none; }
.mkt-hero .mkt-sub { max-width: 46ch; }

@media (max-width: 860px) {
  .mkt-hero { grid-template-columns: 1fr; }
  .mkt-hero .hero-art { display: none; }   /* phone: text gets the whole board */
}

.mkt-cta {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: flex-start; margin-top: 26px; position: relative; z-index: 2;
}
.btn-primary, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 26px; border-radius: 14px;
  font-size: 16px; font-weight: 800; text-decoration: none;
  border: 2px solid var(--ink); cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn-primary {
  color: var(--ink); background: linear-gradient(135deg, var(--gold), #e9a91f);
  box-shadow: 0 5px 0 var(--ink);
}
.btn-ghost {
  color: var(--chalk-text); background: rgba(255,255,255,.06);
  border-color: rgba(242,239,228,.5); box-shadow: none;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--ink); }
.btn-primary:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.btn-ghost:hover { background: rgba(255,255,255,.13); }

.mkt-chips {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: flex-start; margin: 24px 0 0; padding: 0;
  position: relative; z-index: 2;
}
.mkt-chips li {
  font-size: 12.5px; font-weight: 700; color: var(--chalk-dim);
  border: 1px dashed rgba(242,239,228,.35);
  padding: 6px 12px; border-radius: 999px;
}

/* --- generic marketing section --- */
.mkt-sec { margin-top: clamp(48px, 7vw, 84px); }

/* --- age groups --- */
.group-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.group {
  position: relative; overflow: hidden;
  background: var(--card); border: 2px solid var(--line);
  border-radius: 20px; padding: 26px 22px;
  box-shadow: 0 10px 26px rgba(20,33,29,.07);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.group::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 6px;
  background: var(--group-color, var(--teal));
}
.group:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--group-color, var(--teal)) 45%, var(--line));
  box-shadow: 0 18px 38px rgba(20,33,29,.13);
}
.group-ico { font-size: 34px; line-height: 1; display: block; margin-bottom: 10px; }
.group h3 { margin: 0 0 4px; font-size: 21px; color: var(--ink); }
.group-age {
  display: inline-block; font-size: 12.5px; font-weight: 800;
  color: var(--group-color, var(--teal)); margin-bottom: 10px;
}
.group p { margin: 0; font-size: 14.5px; line-height: 1.85; color: var(--ink-soft); }

/* --- online / in-person --- */
.mode-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.mode {
  background: var(--card); border: 2px solid var(--line);
  border-radius: 20px; padding: 28px 24px;
  box-shadow: 0 10px 26px rgba(20,33,29,.07);
}
.mode-online  { border-color: color-mix(in srgb, var(--teal) 40%, var(--line)); }
.mode-inperson{ border-color: color-mix(in srgb, var(--terra, #c9683a) 40%, var(--line)); }
.mode-ico { font-size: 34px; display: block; margin-bottom: 10px; }
.mode h3 { margin: 0 0 8px; font-size: 21px; color: var(--ink); }
.mode p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.85; color: var(--ink-soft); }
.mode-link { font-weight: 800; font-size: 14px; color: var(--teal-deep); text-decoration: none; }
.mode-link:hover { text-decoration: underline; }

/* --- why us --- */
.why-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.why-item {
  text-align: center; padding: 22px 16px;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 16px;
}
.why-ico { font-size: 28px; display: block; margin-bottom: 8px; }
.why-item b { display: block; font-size: 15.5px; color: var(--ink); margin-bottom: 6px; }
.why-item small { display: block; font-size: 13px; line-height: 1.8; color: var(--ink-soft); }

/* --- registration form --- */
.form-lead { max-width: 52ch; margin: 10px auto 0; font-size: 14.5px; color: var(--ink-soft); line-height: 1.85; }
.signup-form {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  background: var(--card); border: 2px solid var(--line); border-radius: 22px;
  padding: clamp(22px, 3.5vw, 34px);
  box-shadow: 0 14px 34px rgba(20,33,29,.09);
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.field input {
  font: inherit; font-size: 15px;
  padding: 12px 14px; border-radius: 12px;
  border: 2px solid var(--line); background: #fff; color: var(--ink);
}
.field input:focus { outline: 3px solid var(--teal); outline-offset: 1px; border-color: transparent; }

/* honeypot — hidden from people, visible to bots */
/* honeypot: hidden by clipping, NOT by a negative offset — on this RTL page a
   left:-9999px box adds ~10000px of sideways scroll to the document. */
.hp {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.form-submit { grid-column: 1 / -1; justify-self: center; margin-top: 6px; }
.form-submit:disabled { opacity: .65; cursor: progress; }

.form-msg {
  grid-column: 1 / -1; margin: 4px 0 0;
  padding: 14px 16px; border-radius: 12px;
  font-size: 14.5px; font-weight: 700; line-height: 1.8; text-align: center;
}
.form-msg.good { background: color-mix(in srgb, var(--teal) 14%, #fff); color: var(--teal-deep); border: 1px solid color-mix(in srgb, var(--teal) 40%, #fff); }
.form-msg.bad  { background: #fdeeea; color: #b04a24; border: 1px solid #f0c4b4; }
.msg-phones { display: block; margin-top: 8px; }
.msg-phones a { color: inherit; font-weight: 800; margin: 0 6px; }

/* --- phone cards --- */
.phone-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.phone-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 20px 14px; text-decoration: none;
  background: var(--card); border: 2px solid var(--line); border-radius: 18px;
  box-shadow: 0 8px 20px rgba(20,33,29,.06);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.phone-card:hover {
  transform: translateY(-3px); border-color: var(--teal);
  box-shadow: 0 14px 30px rgba(20,33,29,.12);
}
.phone-ico { font-size: 24px; }
.phone-label { font-size: 12.5px; font-weight: 800; color: var(--ink-soft); }
.phone-num { font-size: 19px; font-weight: 800; color: var(--ink); letter-spacing: .02em; }

@media (max-width: 560px) {
  .mkt-cta { flex-direction: column; }
  .btn-primary, .btn-ghost { width: 100%; }
  .enter-class { font-size: 12px; padding: 6px 11px; }
}

/* ══════════════════════════════════════════════════════════════
   LOGO — speech bubble + "A" mark with English wordmark
   Inline SVG: sharp at any size, and it still shows if the CDN
   fonts or any external asset fail to load (important in Iran).
   ══════════════════════════════════════════════════════════════ */
.logo {
  display: inline-flex; align-items: center; gap: 11px;
  text-decoration: none; color: inherit;
  /* the wordmark is a Latin lockup — keep it LTR even on the RTL page */
  direction: ltr;
}
.logo-mark {
  width: 40px; height: 40px; flex: none; display: block;
  transition: transform .18s ease;
}
.logo:hover .logo-mark { transform: rotate(-4deg) scale(1.05); }

.logo-words { display: flex; flex-direction: column; line-height: 1.05; }
.logo-words b {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.logo-words em {
  font-style: normal;
  font-weight: 800;
  font-size: 9.5px;
  letter-spacing: 0.19em;
  color: var(--teal-deep);
  margin-top: 3px;
}

@media (max-width: 560px) {
  .logo-mark { width: 34px; height: 34px; }
  .logo-words b { font-size: 15.5px; }
  .logo-words em { font-size: 8.5px; letter-spacing: 0.15em; }
}

/* ══════════════════════════════════════════════════════════════════
   THE PORTAL OF LANGUAGES - lobby only
   Every rule below is scoped under .lobby-page so index.html and
   class.html are untouched.
   ══════════════════════════════════════════════════════════════════ */

/* ---------- LOBBY PAGE FOUNDATION ---------- */
.lobby-page{
  --pl-night:#07131F;
  --pl-deep:#0D2545;
  --pl-ivory:#F5F1E8;
  --pl-gold:#C8A75A;
  --pl-cyan:#58D5E8;
  --pl-grey:#8FA6BA;
  --pl-line:rgba(143,166,186,.22);
  --pl-glass:rgba(13,37,69,.55);
  --pl-r:16px;
  background:
    radial-gradient(120% 80% at 50% -10%, #123055 0%, rgba(18,48,85,0) 60%),
    radial-gradient(90% 60% at 12% 100%, rgba(88,213,232,.10) 0%, rgba(88,213,232,0) 70%),
    linear-gradient(180deg,#0A1B2E 0%,var(--pl-night) 55%,#050D16 100%);
  color:var(--pl-ivory);
  min-height:100%;
}
.lobby-page::before{            /* atrium floor grid, far below */
  content:"";position:fixed;inset:52% 0 0 0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(var(--pl-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--pl-line) 1px,transparent 1px);
  background-size:70px 70px;
  transform:perspective(620px) rotateX(70deg);
  transform-origin:top center;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.55),transparent 72%);
  opacity:.55;
}
.lobby-page main.lobby,.lobby-page .topbar{position:relative;z-index:2}
.lobby-page .bg-deco{opacity:.35}
.lobby-page .ghost{color:rgba(88,213,232,.07)}

/* ---------- HEADER: floating architectural bar ---------- */
.lobby-page .topbar{
  position:sticky;top:0;
  background:linear-gradient(180deg,rgba(7,19,31,.92),rgba(7,19,31,.62));
  border-bottom:1px solid var(--pl-line);
  backdrop-filter:blur(10px);
}
.lobby-page .topbar::after{                 /* champagne hairline */
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(200,167,90,.55),transparent);
}
.lobby-page .logo-words b{color:var(--pl-ivory)}
.lobby-page .logo-words em{color:var(--pl-gold);letter-spacing:.26em}
.lobby-page .home-link{color:var(--pl-grey)}
.lobby-page .home-link:hover{color:var(--pl-ivory)}
.lobby-page .lang-toggle{
  background:rgba(88,213,232,.08);border:1px solid var(--pl-line);
  color:var(--pl-ivory);border-radius:999px;
}
.lobby-page .lang-toggle:hover{border-color:var(--pl-cyan);background:rgba(88,213,232,.16)}
.lobby-page .clock{
  color:var(--pl-grey);font-variant-numeric:tabular-nums;
  border-inline-start:1px solid var(--pl-line);padding-inline-start:12px;
}

/* ---------- VIRTUAL ATRIUM (hero) ---------- */
.lobby-page .hero{
  position:relative;overflow:hidden;border-radius:24px;
  background:
    linear-gradient(180deg,rgba(13,37,69,.85),rgba(7,19,31,.92));
  border:1px solid var(--pl-line);
  box-shadow:0 40px 90px rgba(3,8,14,.6), inset 0 1px 0 rgba(255,255,255,.05);
}
/* curved glass wall */
.lobby-page .hero::before{
  content:"";position:absolute;inset:-30% -10% auto -10%;height:140%;
  background:
    radial-gradient(60% 70% at 50% 0%, rgba(88,213,232,.16), transparent 62%),
    repeating-linear-gradient(90deg, rgba(143,166,186,.10) 0 1px, transparent 1px 92px);
  mask-image:radial-gradient(80% 70% at 50% 20%, #000 40%, transparent 78%);
  pointer-events:none;
}
/* light shaft, drifts slowly */
.lobby-page .hero::after{
  content:"";position:absolute;top:-40%;inset-inline-start:12%;width:34%;height:180%;
  background:linear-gradient(180deg,rgba(245,241,232,.13),rgba(245,241,232,0) 70%);
  transform:rotate(13deg);filter:blur(14px);pointer-events:none;
  animation:plShaft 22s ease-in-out infinite alternate;
}
@keyframes plShaft{from{transform:rotate(13deg) translateX(0)}to{transform:rotate(13deg) translateX(60px)}}

.lobby-page .board-frame{
  border-color:rgba(200,167,90,.32);
  box-shadow:inset 0 0 90px rgba(3,10,20,.55);
  background:none;
}
.lobby-page .eyebrow,.lobby-page #t-eyebrow{color:var(--pl-gold);letter-spacing:.3em}
.lobby-page .hero h1,.lobby-page #t-headline{color:var(--pl-ivory)}
.lobby-page #t-sub{color:var(--pl-grey)}
.lobby-page .chalk-underline{background:linear-gradient(90deg,var(--pl-gold),transparent)}

/* the kinetic language sculpture replaces the cartoon art */
.lobby-page .hero-art{opacity:.9;filter:saturate(.5) hue-rotate(160deg) brightness(1.05)}
.lobby-page .hero-art svg{animation:plFloat 9s ease-in-out infinite alternate}
@keyframes plFloat{from{transform:translateY(-6px)}to{transform:translateY(10px)}}
.lobby-page .float-letters{color:rgba(88,213,232,.16)}

/* ---------- RECEPTION CHECK-IN ---------- */
.lobby-page #student-name{
  background:rgba(7,19,31,.72);
  border:1px solid var(--pl-line);
  color:var(--pl-ivory);
  border-radius:14px;
  padding-block:14px;
  font-size:16px;                      /* stops iOS zoom on focus */
  transition:border-color .2s, box-shadow .25s, background .2s;
}
.lobby-page #student-name::placeholder{color:rgba(143,166,186,.7)}
.lobby-page #student-name:focus{
  outline:none;background:rgba(13,37,69,.85);
  border-color:var(--pl-cyan);
  box-shadow:0 0 0 3px rgba(88,213,232,.16), 0 0 26px rgba(88,213,232,.22);
}
.lobby-page .name-row,.lobby-page .checkin{
  border:1px solid var(--pl-line);border-radius:var(--pl-r);
  background:linear-gradient(180deg,rgba(13,37,69,.6),rgba(7,19,31,.5));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.lobby-page #name-hint{color:var(--pl-grey)}
.lobby-page #name-hint.error,.lobby-page .hint.error{color:#ff9d94}

/* ---------- STAFF ACCESS ---------- */
.lobby-page #t-teacher-label,.lobby-page label[for="is-teacher"]{
  color:var(--pl-grey);font-size:13px;
}
.lobby-page #teacher-user,.lobby-page #teacher-pass{
  background:rgba(7,19,31,.72);border:1px solid var(--pl-line);
  color:var(--pl-ivory);border-radius:11px;font-size:16px;
}
.lobby-page #teacher-user:focus,.lobby-page #teacher-pass:focus{
  outline:none;border-color:var(--pl-gold);
  box-shadow:0 0 0 3px rgba(200,167,90,.16);
}
.lobby-page #teacher-hint{color:#ff9d94}

/* ---------- CLASSROOM PORTALS ---------- */
.lobby-page #rooms{gap:18px}
.lobby-page .room{
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:18px 18px 10px 10px;
  border:1px solid var(--pl-line);
  background:linear-gradient(180deg,rgba(13,37,69,.72),rgba(7,19,31,.86));
  box-shadow:0 22px 48px rgba(3,8,14,.5), inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .28s cubic-bezier(.22,1,.3,1), border-color .28s, box-shadow .28s;
}
/* light from inside the classroom, revealed on hover/focus */
.lobby-page .room::before{
  content:"";position:absolute;inset:auto 0 0 0;height:78%;z-index:-1;
  background:radial-gradient(70% 100% at 50% 100%, rgba(88,213,232,.26), transparent 72%);
  opacity:0;transition:opacity .35s;
}
/* doorway arch */
.lobby-page .room::after{
  content:"";position:absolute;inset:10px 14px auto 14px;height:64px;z-index:-1;
  border:1px solid rgba(200,167,90,.28);border-bottom:0;
  border-radius:44px 44px 0 0;opacity:.85;pointer-events:none;
}
.lobby-page .room:hover,.lobby-page .room:focus-within{
  transform:translateY(-4px);
  border-color:rgba(88,213,232,.45);
  box-shadow:0 30px 66px rgba(3,8,14,.6), 0 0 0 1px rgba(88,213,232,.18);
}
.lobby-page .room:hover::before,.lobby-page .room:focus-within::before{opacity:1}

.lobby-page .room h3,.lobby-page .room .title{color:var(--pl-ivory)}
.lobby-page .room .badge{
  background:rgba(200,167,90,.14);color:var(--pl-gold);
  border:1px solid rgba(200,167,90,.3);border-radius:999px;
}
.lobby-page .room .capacity,.lobby-page .room .teacher,.lobby-page .room .schedule{
  color:var(--pl-grey);
}
.lobby-page .dot.live{
  background:var(--pl-cyan);box-shadow:0 0 0 0 rgba(88,213,232,.55);
  animation:plPulse 2.4s ease-out infinite;
}
@keyframes plPulse{
  0%{box-shadow:0 0 0 0 rgba(88,213,232,.5)}
  70%{box-shadow:0 0 0 9px rgba(88,213,232,0)}
  100%{box-shadow:0 0 0 0 rgba(88,213,232,0)}
}

/* join = the clearest action on the page */
.lobby-page .room [data-room]{
  background:linear-gradient(180deg,#1f9fb4,#12798c);
  color:#04121a;border:0;border-radius:12px;font-weight:800;
  box-shadow:0 8px 20px rgba(18,121,140,.35);
  transition:transform .16s, box-shadow .25s, filter .25s;
}
.lobby-page .room [data-room]:hover{
  filter:brightness(1.08);box-shadow:0 12px 28px rgba(88,213,232,.4);
}
.lobby-page .room [data-room]:active{transform:translateY(1px)}
.lobby-page .room [data-share]{
  background:transparent;border:1px solid var(--pl-line);
  color:var(--pl-grey);border-radius:12px;transition:border-color .2s,color .2s;
}
.lobby-page .room [data-share]:hover{border-color:var(--pl-gold);color:var(--pl-gold)}

/* ---------- WAYFINDING (how it works) ---------- */
.lobby-page #how{position:relative}
.lobby-page #how-kicker{color:var(--pl-gold)}
.lobby-page #how-title,.lobby-page #feat-title{color:var(--pl-ivory)}
.lobby-page .steps,.lobby-page .how-steps{position:relative}
.lobby-page .steps::before,.lobby-page .how-steps::before{
  content:"";position:absolute;inset-inline:8%;top:38px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(200,167,90,.4),transparent);
}
.lobby-page .step{
  background:linear-gradient(180deg,rgba(13,37,69,.55),rgba(7,19,31,.45));
  border:1px solid var(--pl-line);border-radius:var(--pl-r);
  color:var(--pl-ivory);
}
.lobby-page .step .n,.lobby-page .step-num{
  background:rgba(88,213,232,.12);border:1px solid rgba(88,213,232,.35);
  color:var(--pl-cyan);border-radius:50%;
}

/* ---------- CLASSROOM FEATURES ---------- */
.lobby-page #feat-kicker{color:var(--pl-gold)}
.lobby-page .feat{
  background:linear-gradient(180deg,rgba(13,37,69,.5),rgba(7,19,31,.42));
  border:1px solid var(--pl-line);border-radius:var(--pl-r);
  color:var(--pl-ivory);transition:border-color .25s, transform .25s;
}
.lobby-page .feat:hover{border-color:rgba(88,213,232,.4);transform:translateY(-2px)}
.lobby-page .feat p,.lobby-page .feat small{color:var(--pl-grey)}
/* calm the emoji down into a consistent monochrome exhibit mark */
.lobby-page .f-ico{
  filter:grayscale(1) brightness(1.7) sepia(.35) hue-rotate(150deg) saturate(2.4);
  opacity:.9;
}

/* ---------- FOOTER / CONTACT ---------- */
.lobby-page .footer,.lobby-page .contact{border-top:1px solid var(--pl-line)}
.lobby-page .contact-line,.lobby-page #t-footer{color:var(--pl-grey)}
.lobby-page .contact-links a{color:var(--pl-cyan);text-decoration:none}
.lobby-page .contact-links a:hover{color:var(--pl-gold)}

/* ---------- TOAST ---------- */
.lobby-page #toast{
  background:rgba(7,19,31,.95);border:1px solid rgba(88,213,232,.35);
  color:var(--pl-ivory);border-radius:12px;
}

/* ---------- FOCUS VISIBILITY (accessibility) ---------- */
.lobby-page a:focus-visible,
.lobby-page button:focus-visible,
.lobby-page input:focus-visible{
  outline:2px solid var(--pl-cyan);outline-offset:2px;border-radius:8px;
}

/* ---------- LOBBY RESPONSIVE ---------- */
@media (max-width:900px){
  .lobby-page #rooms{grid-template-columns:1fr}
  .lobby-page .room{border-radius:16px}
}
@media (max-width:640px){
  .lobby-page::before{display:none}          /* drop the perspective floor */
  .lobby-page .hero{border-radius:18px}
  .lobby-page .hero::after{display:none}     /* one less blur layer */
  .lobby-page .topbar{backdrop-filter:none;background:rgba(7,19,31,.96)}
  .lobby-page .hero-art{opacity:.5}
  .lobby-page .room [data-room]{padding-block:14px;font-size:16px}
  .lobby-page .steps::before,.lobby-page .how-steps::before{display:none}
  .lobby-page .clock{border:0;padding-inline-start:0}
}

/* ---------- LOBBY REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  .lobby-page .hero::after,
  .lobby-page .hero-art svg,
  .lobby-page .dot.live{animation:none}
  .lobby-page .room,.lobby-page .feat{transition:none}
  .lobby-page .room:hover{transform:none}
  .lobby-page #pl-atrium *{animation:none !important}
}

/* ══════════════════════════════════════════════════════════════════
   THE PORTAL OF LANGUAGES - home page
   Scoped under .home-page so lobby.html and class.html are untouched.
   ══════════════════════════════════════════════════════════════════ */

/* ---------- HOME FOUNDATION ---------- */
.home-page{
  --pl-night:#07131F; --pl-deep:#0D2545; --pl-ivory:#F5F1E8;
  --pl-gold:#C8A75A; --pl-cyan:#58D5E8; --pl-grey:#8FA6BA;
  --pl-line:rgba(143,166,186,.22); --pl-r:16px;
  background:
    radial-gradient(120% 80% at 50% -10%, #123055 0%, rgba(18,48,85,0) 60%),
    radial-gradient(90% 60% at 88% 100%, rgba(88,213,232,.09) 0%, rgba(88,213,232,0) 70%),
    linear-gradient(180deg,#0A1B2E 0%,var(--pl-night) 55%,#050D16 100%);
  color:var(--pl-ivory);
}
.home-page .marketing,.home-page .topbar{position:relative;z-index:2}
.home-page .bg-deco{opacity:.3}
.home-page .ghost{color:rgba(88,213,232,.07)}
.home-page .orb{opacity:.35;filter:blur(60px)}

/* ---------- HEADER ---------- */
.home-page .topbar{
  position:sticky;top:0;
  background:linear-gradient(180deg,rgba(7,19,31,.92),rgba(7,19,31,.6));
  border-bottom:1px solid var(--pl-line);backdrop-filter:blur(10px);
}
.home-page .topbar::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(200,167,90,.55),transparent);
}
.home-page .logo-words b{color:var(--pl-ivory)}
.home-page .logo-words em{color:var(--pl-gold);letter-spacing:.26em}
.home-page .lang-toggle{
  background:rgba(88,213,232,.08);border:1px solid var(--pl-line);
  color:var(--pl-ivory);border-radius:999px;
}
.home-page .lang-toggle:hover{border-color:var(--pl-cyan);background:rgba(88,213,232,.16)}
.home-page .enter-class{
  background:linear-gradient(180deg,#1f9fb4,#12798c);color:#04121a;
  border:0;border-radius:11px;font-weight:800;
  box-shadow:0 8px 20px rgba(18,121,140,.32);
}
.home-page .enter-class:hover{filter:brightness(1.08)}

/* ---------- HERO ---------- */
.home-page .mkt-hero{
  position:relative;overflow:hidden;border-radius:24px;
  background:linear-gradient(180deg,rgba(13,37,69,.82),rgba(7,19,31,.9));
  border:1px solid var(--pl-line);
  box-shadow:0 40px 90px rgba(3,8,14,.55), inset 0 1px 0 rgba(255,255,255,.05);
}
.home-page .mkt-hero::before{
  content:"";position:absolute;inset:-30% -10% auto -10%;height:140%;pointer-events:none;
  background:
    radial-gradient(60% 70% at 50% 0%, rgba(88,213,232,.15), transparent 62%),
    repeating-linear-gradient(90deg, rgba(143,166,186,.09) 0 1px, transparent 1px 96px);
  mask-image:radial-gradient(80% 70% at 50% 20%, #000 40%, transparent 78%);
}
.home-page .mkt-hero::after{
  content:"";position:absolute;top:-40%;inset-inline-end:14%;width:32%;height:180%;
  background:linear-gradient(180deg,rgba(245,241,232,.12),rgba(245,241,232,0) 70%);
  transform:rotate(-12deg);filter:blur(14px);pointer-events:none;
  animation:plShaftH 24s ease-in-out infinite alternate;
}
@keyframes plShaftH{from{transform:rotate(-12deg) translateX(0)}to{transform:rotate(-12deg) translateX(-56px)}}
.home-page .board-frame{border-color:rgba(200,167,90,.3);background:none;
  box-shadow:inset 0 0 90px rgba(3,10,20,.5)}
.home-page .mkt-t,.home-page .hero-copy h1{color:var(--pl-ivory)}
.home-page .mkt-sub,.home-page .hero-copy p{color:var(--pl-grey)}
.home-page .eyebrow,.home-page .sec-kicker{color:var(--pl-gold);letter-spacing:.3em}
.home-page .sec-head{color:var(--pl-ivory)}
.home-page .chalk-underline{background:linear-gradient(90deg,var(--pl-gold),transparent)}
.home-page .hero-art{opacity:.85;filter:saturate(.5) hue-rotate(160deg) brightness(1.05)}
.home-page .hero-art svg{animation:plFloatH 10s ease-in-out infinite alternate}
@keyframes plFloatH{from{transform:translateY(-6px)}to{transform:translateY(10px)}}
.home-page .mkt-chips span{
  background:rgba(88,213,232,.10);border:1px solid var(--pl-line);
  color:var(--pl-ivory);border-radius:999px;
}

/* ---------- BUTTONS ---------- */
.home-page .btn-primary,.home-page .form-submit{
  background:linear-gradient(180deg,#1f9fb4,#12798c);color:#04121a;border:0;
  border-radius:12px;font-weight:800;box-shadow:0 8px 22px rgba(18,121,140,.35);
  transition:filter .2s,transform .14s,box-shadow .25s;
}
.home-page .btn-primary:hover,.home-page .form-submit:hover{
  filter:brightness(1.08);box-shadow:0 12px 28px rgba(88,213,232,.38);
}
.home-page .btn-primary:active,.home-page .form-submit:active{transform:translateY(1px)}
.home-page .btn-ghost{
  background:transparent;border:1px solid var(--pl-line);color:var(--pl-ivory);
  border-radius:12px;transition:border-color .2s,color .2s;
}
.home-page .btn-ghost:hover{border-color:var(--pl-gold);color:var(--pl-gold)}

/* ---------- AGE GROUPS + MODES + WHY ---------- */
.home-page .group,
.home-page .mode,
.home-page .why-item,
.home-page .phone-card{
  background:linear-gradient(180deg,rgba(13,37,69,.6),rgba(7,19,31,.5));
  border:1px solid var(--pl-line);border-radius:var(--pl-r);
  color:var(--pl-ivory);
  box-shadow:0 18px 40px rgba(3,8,14,.4), inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform .26s cubic-bezier(.22,1,.3,1),border-color .26s,box-shadow .26s;
}
.home-page .group:hover,
.home-page .mode:hover,
.home-page .why-item:hover,
.home-page .phone-card:hover{
  transform:translateY(-4px);border-color:rgba(88,213,232,.42);
  box-shadow:0 26px 56px rgba(3,8,14,.52), 0 0 0 1px rgba(88,213,232,.16);
}
.home-page .group p,.home-page .mode p,.home-page .why-item p{color:var(--pl-grey)}
.home-page .group-age{
  color:var(--pl-gold);background:rgba(200,167,90,.12);
  border:1px solid rgba(200,167,90,.3);border-radius:999px;
}
.home-page .group-ico,.home-page .mode-ico,.home-page .why-ico,.home-page .phone-ico{
  filter:grayscale(1) brightness(1.7) sepia(.35) hue-rotate(150deg) saturate(2.4);
  opacity:.9;
}
.home-page .mode-online{border-color:rgba(88,213,232,.3)}
.home-page .mode-inperson{border-color:rgba(200,167,90,.28)}
.home-page .mode-link{color:var(--pl-cyan);text-decoration:none}
.home-page .mode-link:hover{color:var(--pl-gold)}

/* ---------- SIGN-UP ---------- */
.home-page .signup-sec{
  background:linear-gradient(180deg,rgba(13,37,69,.52),rgba(7,19,31,.44));
  border:1px solid var(--pl-line);border-radius:22px;
}
.home-page .form-lead{color:var(--pl-grey)}
.home-page .field input{
  background:rgba(7,19,31,.72);border:1px solid var(--pl-line);
  color:var(--pl-ivory);border-radius:12px;font-size:16px;
  transition:border-color .2s,box-shadow .25s,background .2s;
}
.home-page .field input::placeholder{color:rgba(143,166,186,.7)}
.home-page .field input:focus{
  outline:none;background:rgba(13,37,69,.85);border-color:var(--pl-cyan);
  box-shadow:0 0 0 3px rgba(88,213,232,.16), 0 0 24px rgba(88,213,232,.2);
}
.home-page .field span,.home-page .field label{color:var(--pl-grey)}
.home-page .form-msg{color:var(--pl-grey)}
.home-page .msg-phones a{color:var(--pl-cyan)}

/* ---------- PHONES / FOOTER ---------- */
.home-page .phone-num{color:var(--pl-ivory);font-variant-numeric:tabular-nums}
.home-page .phone-label{color:var(--pl-grey)}
.home-page .phone-card{text-decoration:none}
.home-page .footer,.home-page .contact{border-top:1px solid var(--pl-line);color:var(--pl-grey)}
.home-page .contact-links a{color:var(--pl-cyan);text-decoration:none}
.home-page .contact-links a:hover{color:var(--pl-gold)}

/* ---------- FOCUS ---------- */
.home-page a:focus-visible,
.home-page button:focus-visible,
.home-page input:focus-visible{
  outline:2px solid var(--pl-cyan);outline-offset:2px;border-radius:8px;
}

/* ---------- HOME RESPONSIVE ---------- */
@media (max-width:640px){
  .home-page .mkt-hero{border-radius:18px}
  .home-page .mkt-hero::after{display:none}
  .home-page .topbar{backdrop-filter:none;background:rgba(7,19,31,.96)}
  .home-page .hero-art{opacity:.45}
  .home-page .orb{display:none}
  .home-page .btn-primary,.home-page .form-submit{padding-block:14px;font-size:16px}
}

/* ---------- HOME REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  .home-page .mkt-hero::after,.home-page .hero-art svg{animation:none}
  .home-page .group,.home-page .mode,.home-page .why-item,.home-page .phone-card{transition:none}
  .home-page .group:hover,.home-page .mode:hover,
  .home-page .why-item:hover,.home-page .phone-card:hover{transform:none}
}

/* ══════════════════════════════════════════════════════════════════
   PORTAL v2 - modern palette override
   Near-black canvas, electric lime as the single action colour,
   warm coral for brand accents. Flatter surfaces, less glass.
   Applies to .home-page and .lobby-page only.
   ══════════════════════════════════════════════════════════════════ */
.home-page,.lobby-page{
  --pl-night:#0B0D10;
  --pl-deep:#14181E;
  --pl-ivory:#F4F2ED;
  --pl-gold:#FF7A55;      /* warm coral - brand accent */
  --pl-cyan:#C8F24E;      /* electric lime - action + live only */
  --pl-grey:#98A2AD;
  --pl-line:rgba(152,162,173,.18);
  --pl-r:14px;
  background:
    radial-gradient(100% 70% at 50% -15%, #1A2028 0%, rgba(26,32,40,0) 62%),
    radial-gradient(70% 50% at 90% 105%, rgba(200,242,78,.07) 0%, rgba(200,242,78,0) 70%),
    linear-gradient(180deg,#0F1318 0%,var(--pl-night) 60%,#07090C 100%);
}
/* flatter, more modern surfaces */
.home-page .group,.home-page .mode,.home-page .why-item,.home-page .phone-card,
.lobby-page .room,.lobby-page .feat,.lobby-page .step{
  background:#12161B;
  box-shadow:none;
}
.home-page .mkt-hero,.lobby-page .hero{
  background:linear-gradient(180deg,#151A21,#0D1116);
  box-shadow:0 30px 70px rgba(0,0,0,.55);
}
.home-page .signup-sec,.lobby-page .name-row,.lobby-page .checkin{
  background:#12161B;box-shadow:none;
}
/* lime action buttons */
.home-page .btn-primary,.home-page .form-submit,
.home-page .enter-class,.lobby-page .room [data-room]{
  background:var(--pl-cyan);color:#0B0D10;
  box-shadow:0 6px 18px rgba(200,242,78,.22);
}
.home-page .btn-primary:hover,.home-page .form-submit:hover,
.home-page .enter-class:hover,.lobby-page .room [data-room]:hover{
  background:#D6FF63;filter:none;box-shadow:0 10px 26px rgba(200,242,78,.34);
}
.lobby-page .dot.live{background:var(--pl-cyan)}
@keyframes plPulse{
  0%{box-shadow:0 0 0 0 rgba(200,242,78,.5)}
  70%{box-shadow:0 0 0 9px rgba(200,242,78,0)}
  100%{box-shadow:0 0 0 0 rgba(200,242,78,0)}
}
/* coral for brand marks, lime never used decoratively */
.home-page .group-age,.lobby-page .room .badge{
  color:var(--pl-gold);background:rgba(255,122,85,.12);
  border-color:rgba(255,122,85,.32);
}
.home-page .logo-words em,.lobby-page .logo-words em,
.home-page .eyebrow,.home-page .sec-kicker,
.lobby-page .eyebrow,.lobby-page #t-eyebrow,
.lobby-page #how-kicker,.lobby-page #feat-kicker{color:var(--pl-gold)}
.home-page .chalk-underline,.lobby-page .chalk-underline{
  background:linear-gradient(90deg,var(--pl-gold),transparent);
}
.home-page .topbar::after,.lobby-page .topbar::after{
  background:linear-gradient(90deg,transparent,rgba(255,122,85,.45),transparent);
}
.home-page .mode-link,.home-page .contact-links a,
.lobby-page .contact-links a{color:var(--pl-cyan)}
.home-page .mode-link:hover,.home-page .contact-links a:hover,
.lobby-page .contact-links a:hover{color:var(--pl-gold)}
/* de-tint the illustrations toward the new accent */
.home-page .hero-art,.lobby-page .hero-art{filter:saturate(.35) hue-rotate(58deg) brightness(1.08)}
.home-page .group-ico,.home-page .mode-ico,.home-page .why-ico,.home-page .phone-ico,
.lobby-page .f-ico{filter:grayscale(1) brightness(1.9);opacity:.85}
.home-page .ghost,.lobby-page .ghost{color:rgba(200,242,78,.05)}

/* ══════════════════════════════════════════════════════════════════
   AURA - ambient light, grain and vignette.
   Purely atmospheric, scoped to .home-page / .lobby-page.
   ══════════════════════════════════════════════════════════════════ */
.home-page::after,.lobby-page::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  /* two slow ambient blooms: lime low-left, coral high-right */
  background:
    radial-gradient(38vw 38vw at 12% 78%, rgba(200,242,78,.10), transparent 68%),
    radial-gradient(42vw 42vw at 88% 12%, rgba(255,122,85,.09), transparent 68%),
    radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%);
  animation:auraDrift 26s ease-in-out infinite alternate;
}
@keyframes auraDrift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-2.5%,2%,0) scale(1.06)}
}
/* film grain - one tiny inline SVG, no image request */
.home-page .bg-deco::after,.lobby-page .bg-deco::after{
  content:"";position:fixed;inset:-50%;z-index:1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  animation:auraGrain 7s steps(6) infinite;
}
@keyframes auraGrain{
  0%,100%{transform:translate(0,0)}   20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)}    60%{transform:translate(-2%,-2%)}
  80%{transform:translate(3%,1%)}
}
/* headline picks up a faint halo so it feels lit, not printed */
.home-page .mkt-t,.lobby-page #t-headline{
  text-shadow:0 0 42px rgba(244,242,237,.16);
}
/* the primary action glows softly - the one thing that must pull the eye */
.home-page .btn-primary,.home-page .enter-class,
.home-page .form-submit,.lobby-page .room [data-room]{
  box-shadow:0 6px 18px rgba(200,242,78,.22), 0 0 44px rgba(200,242,78,.14);
}
/* cards catch a faint rim light from above */
.home-page .group,.home-page .mode,.home-page .why-item,.home-page .phone-card,
.lobby-page .room,.lobby-page .feat{
  box-shadow:inset 0 1px 0 rgba(244,242,237,.06);
}
@media (max-width:640px){
  .home-page .bg-deco::after,.lobby-page .bg-deco::after{display:none}
  .home-page::after,.lobby-page::after{animation:none}
}
@media (prefers-reduced-motion:reduce){
  .home-page::after,.lobby-page::after,
  .home-page .bg-deco::after,.lobby-page .bg-deco::after{animation:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   AURA LANGUAGE CAMPUS
   A living, cinematic environment. Visual only - no markup, ID or JS change.
   Scoped to .aura-campus, so class.html is never touched.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ─────────────────────────────────────────────────────────── */
.aura-campus{
  --aura-bg:#050A12; --aura-surface:#0A1421; --aura-surface-2:#101E2D;
  --aura-text:#F5F7FA; --aura-muted:#9BAABC;
  --aura-cyan:#50E3F2; --aura-teal:#3BE0B8; --aura-violet:#8C7CFF;
  --aura-gold:#D5B56B; --aura-border:rgba(167,210,230,.16);
  --aura-r:18px;
  background:var(--aura-bg);
  color:var(--aura-text);
  font-family:"Vazirmatn",Tahoma,system-ui,sans-serif;   /* no serif anywhere */
}

/* ── 2. FOUNDATION ─────────────────────────────────────────────────────── */
.aura-campus main,.aura-campus .topbar{position:relative;z-index:3}
.aura-campus .orb,.aura-campus .ghost{display:none}      /* retire old deco */

/* ── 3. ANIMATED AURA BACKGROUND ───────────────────────────────────────── */
.aura-campus::before{                    /* aurora ribbons */
  content:"";position:fixed;inset:-25%;z-index:0;pointer-events:none;
  background:
    radial-gradient(38vw 22vw at 22% 30%, rgba(80,227,242,.20), transparent 62%),
    radial-gradient(44vw 26vw at 78% 22%, rgba(140,124,255,.16), transparent 64%),
    radial-gradient(50vw 24vw at 55% 80%, rgba(59,224,184,.16), transparent 66%);
  filter:blur(46px);
  animation:auraFlow 34s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes auraFlow{
  0%{transform:translate3d(0,0,0) scale(1) rotate(0deg)}
  50%{transform:translate3d(-3%,2%,0) scale(1.08) rotate(1.2deg)}
  100%{transform:translate3d(3%,-2%,0) scale(1.04) rotate(-1deg)}
}
.aura-campus::after{                     /* architectural floor + vignette */
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(transparent 62%, rgba(80,227,242,.05) 62%, transparent 63%),
    radial-gradient(120% 95% at 50% 45%, transparent 52%, rgba(2,5,9,.72) 100%);
}
/* grain, one inline SVG, no request */
.aura-campus .bg-deco{opacity:1 !important}
.aura-campus .bg-deco::after{
  content:"";position:fixed;inset:-40%;z-index:2;pointer-events:none;opacity:.38;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
  animation:auraGrain2 8s steps(5) infinite;
}
@keyframes auraGrain2{0%,100%{transform:translate(0,0)}25%{transform:translate(-2%,2%)}
  50%{transform:translate(2%,-2%)}75%{transform:translate(-1%,-2%)}}

/* ── 4. HEADER CAPSULE ─────────────────────────────────────────────────── */
.aura-campus .topbar{
  position:sticky;top:10px;margin:10px auto 0;width:min(1180px,94%);
  border:1px solid var(--aura-border);border-radius:999px;
  background:rgba(10,20,33,.72);backdrop-filter:blur(14px);
  padding-block:10px;overflow:hidden;
}
.aura-campus .topbar::after{             /* reflection sweeping the glass */
  content:"";position:absolute;top:0;bottom:0;width:34%;
  background:linear-gradient(100deg,transparent,rgba(245,247,250,.07),transparent);
  animation:auraSweep 9s ease-in-out infinite;pointer-events:none;
}
@keyframes auraSweep{0%{inset-inline-start:-40%}55%,100%{inset-inline-start:110%}}
.aura-campus .logo-words b{color:var(--aura-text);font-weight:700}
.aura-campus .logo-words em{color:var(--aura-gold);letter-spacing:.24em;font-style:normal}
.aura-campus .home-link{color:var(--aura-muted)}
.aura-campus .home-link:hover{color:var(--aura-text)}
.aura-campus .lang-toggle{
  background:rgba(80,227,242,.10);border:1px solid var(--aura-border);
  color:var(--aura-text);border-radius:999px;
}
.aura-campus .lang-toggle:hover{border-color:var(--aura-cyan)}
.aura-campus .clock{color:var(--aura-muted);font-variant-numeric:tabular-nums}

/* ── 5. HERO + LANGUAGE SCULPTURE ──────────────────────────────────────── */
.aura-campus .hero,.aura-campus .mkt-hero{
  position:relative;overflow:hidden;border-radius:26px;
  border:1px solid var(--aura-border);
  background:linear-gradient(165deg,rgba(16,30,45,.82),rgba(5,10,18,.9));
}
.aura-campus .hero::after,.aura-campus .mkt-hero::after{
  content:"";position:absolute;top:-50%;inset-inline-start:18%;width:26%;height:200%;
  background:linear-gradient(180deg,rgba(80,227,242,.14),transparent 68%);
  transform:rotate(14deg);filter:blur(20px);pointer-events:none;
  animation:auraBeam 20s ease-in-out infinite alternate;
}
@keyframes auraBeam{from{transform:rotate(14deg) translateX(-30px)}
  to{transform:rotate(14deg) translateX(70px)}}
.aura-campus .board-frame{display:none}          /* chalkboard frame gone */

/* typography: modern, architectural, not gigantic */
.aura-campus h1,.aura-campus #t-headline,.aura-campus .mkt-t{
  font-family:"Vazirmatn",Tahoma,sans-serif;font-weight:800;
  font-size:clamp(26px,3.4vw,44px);line-height:1.45;letter-spacing:-.01em;
  color:var(--aura-text);
}
.aura-campus #t-sub,.aura-campus .mkt-sub{color:var(--aura-muted);font-size:15px;line-height:2}
.aura-campus .eyebrow,.aura-campus #t-eyebrow,
.aura-campus .sec-kicker,.aura-campus #how-kicker,.aura-campus #feat-kicker{
  color:var(--aura-cyan);letter-spacing:.28em;font-size:11px;font-weight:700;
}
.aura-campus .chalk-underline{
  background:linear-gradient(90deg,var(--aura-cyan),var(--aura-violet),transparent);
  height:2px;border-radius:2px;
}

/* the cartoon book + cap are replaced by an abstract kinetic sculpture */
.aura-campus .hero-art svg{display:none}
.aura-campus .hero-art{
  position:relative;display:grid;place-items:center;min-height:260px;opacity:1;filter:none;
}
.aura-campus .hero-art::before{          /* orbital rings */
  content:"";width:min(300px,62vw);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(80,227,242,.34);
  box-shadow:0 0 0 1px rgba(140,124,255,.12) inset,
             0 0 60px rgba(80,227,242,.18);
  background:
    radial-gradient(circle at 50% 50%, rgba(80,227,242,.16), transparent 58%),
    conic-gradient(from 0deg, transparent 0 78%, rgba(59,224,184,.55) 88%, transparent 100%);
  animation:auraSpin 26s linear infinite;
}
.aura-campus .hero-art::after{           /* luminous core */
  content:"A";position:absolute;font-weight:800;font-size:clamp(48px,7vw,84px);
  color:var(--aura-text);text-shadow:0 0 40px rgba(80,227,242,.6),0 0 90px rgba(140,124,255,.4);
  animation:auraBreathe 6s ease-in-out infinite alternate;
}
@keyframes auraSpin{to{transform:rotate(360deg)}}
@keyframes auraBreathe{from{transform:scale(.97);opacity:.85}to{transform:scale(1.03);opacity:1}}
.aura-campus .float-letters{color:rgba(80,227,242,.12)}

/* ── 6. WORD OF THE DAY CAPSULE ────────────────────────────────────────── */
.aura-campus #wod{
  position:relative;border:1px solid var(--aura-border);border-radius:999px;
  background:rgba(16,30,45,.6);backdrop-filter:blur(8px);overflow:hidden;
  padding:10px 18px;
}
.aura-campus #wod::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(110deg,transparent,rgba(80,227,242,.16),transparent);
  animation:auraSweep 7s ease-in-out infinite;
}
.aura-campus #wod-label{color:var(--aura-cyan);letter-spacing:.2em;font-size:10px}
.aura-campus #wod-en{color:var(--aura-text);font-weight:700}
.aura-campus #wod-fa{color:var(--aura-muted)}

/* ── 7. CHECK-IN CONSOLE + FACULTY ACCESS ──────────────────────────────── */
.aura-campus #student-name,
.aura-campus #teacher-user,.aura-campus #teacher-pass,
.aura-campus .field input{
  background:rgba(5,10,18,.7);border:1px solid var(--aura-border);
  color:var(--aura-text);border-radius:14px;font-size:16px;padding-block:14px;
  transition:border-color .22s,box-shadow .28s,background .22s;
}
.aura-campus #student-name::placeholder,.aura-campus .field input::placeholder{
  color:rgba(155,170,188,.65);
}
.aura-campus #student-name:focus,.aura-campus .field input:focus{
  outline:none;background:rgba(16,30,45,.85);border-color:var(--aura-cyan);
  box-shadow:0 0 0 3px rgba(80,227,242,.16),0 0 30px rgba(80,227,242,.24);
}
.aura-campus #teacher-user:focus,.aura-campus #teacher-pass:focus{
  outline:none;border-color:var(--aura-gold);box-shadow:0 0 0 3px rgba(213,181,107,.16);
}
.aura-campus #name-hint{color:var(--aura-muted)}
.aura-campus #name-hint.error,.aura-campus .hint.error,.aura-campus #teacher-hint{color:#ff9d94}
.aura-campus #t-teacher-label{color:var(--aura-muted);font-size:13px}

/* ── 8. CLASSROOM PORTALS ──────────────────────────────────────────────── */
.aura-campus .room{
  position:relative;isolation:isolate;overflow:hidden;
  border:1px solid var(--aura-border);border-radius:22px 22px 12px 12px;
  background:linear-gradient(180deg,rgba(16,30,45,.8),rgba(5,10,18,.9));
  transition:transform .3s cubic-bezier(.22,1,.3,1),border-color .3s,box-shadow .3s;
}
.aura-campus .room::before{               /* light inside the room */
  content:"";position:absolute;inset:auto 0 0 0;height:80%;z-index:-1;
  background:radial-gradient(72% 100% at 50% 100%,rgba(80,227,242,.3),transparent 72%);
  opacity:.22;transition:opacity .35s;
}
.aura-campus .room::after{                /* scanning line down the doorway */
  content:"";position:absolute;inset-inline:14px;top:0;height:1px;z-index:-1;
  background:linear-gradient(90deg,transparent,rgba(80,227,242,.55),transparent);
  animation:auraScan 6s ease-in-out infinite;
}
@keyframes auraScan{0%{top:6%;opacity:0}12%{opacity:.9}88%{opacity:.9}100%{top:92%;opacity:0}}
.aura-campus .room:hover,.aura-campus .room:focus-within{
  transform:translateY(-4px);border-color:rgba(80,227,242,.5);
  box-shadow:0 26px 60px rgba(2,6,12,.6),0 0 0 1px rgba(80,227,242,.2);
}
.aura-campus .room:hover::before,.aura-campus .room:focus-within::before{opacity:1}
.aura-campus .room .badge{
  background:rgba(213,181,107,.14);color:var(--aura-gold);
  border:1px solid rgba(213,181,107,.3);border-radius:999px;
}
.aura-campus .room .capacity,.aura-campus .room .teacher,.aura-campus .room .schedule{
  color:var(--aura-muted);
}
.aura-campus .dot.live{
  background:var(--aura-teal);animation:auraLive 3.2s ease-out infinite;
}
@keyframes auraLive{
  0%{box-shadow:0 0 0 0 rgba(59,224,184,.5)}
  70%{box-shadow:0 0 0 10px rgba(59,224,184,0)}
  100%{box-shadow:0 0 0 0 rgba(59,224,184,0)}
}
/* join = the brightest thing in the room */
.aura-campus .room [data-room],
.aura-campus .btn-primary,.aura-campus .form-submit,.aura-campus .enter-class{
  background:linear-gradient(180deg,var(--aura-cyan),#26B8CC);
  color:#03151A;border:0;border-radius:13px;font-weight:800;
  box-shadow:0 8px 22px rgba(80,227,242,.26),0 0 40px rgba(80,227,242,.14);
  transition:filter .2s,transform .14s,box-shadow .28s;
}
.aura-campus .room [data-room]:hover,.aura-campus .btn-primary:hover,
.aura-campus .form-submit:hover,.aura-campus .enter-class:hover{
  filter:brightness(1.1);box-shadow:0 12px 30px rgba(80,227,242,.4);
}
.aura-campus .room [data-room]:active{transform:translateY(1px)}
.aura-campus .room [data-share],.aura-campus .btn-ghost{
  background:transparent;border:1px solid var(--aura-border);
  color:var(--aura-muted);border-radius:13px;
}
.aura-campus .room [data-share]:hover,.aura-campus .btn-ghost:hover{
  border-color:var(--aura-gold);color:var(--aura-gold);
}

/* ── 9. CAMPUS PATHWAY ─────────────────────────────────────────────────── */
.aura-campus .step,.aura-campus .group,.aura-campus .mode,
.aura-campus .why-item,.aura-campus .phone-card,.aura-campus .feat{
  background:rgba(16,30,45,.55);border:1px solid var(--aura-border);
  border-radius:var(--aura-r);color:var(--aura-text);
  box-shadow:inset 0 1px 0 rgba(245,247,250,.05);
  transition:border-color .26s,transform .26s;
}
.aura-campus .step:hover,.aura-campus .group:hover,.aura-campus .mode:hover,
.aura-campus .why-item:hover,.aura-campus .phone-card:hover,.aura-campus .feat:hover{
  border-color:rgba(80,227,242,.42);transform:translateY(-3px);
}
.aura-campus .step p,.aura-campus .group p,.aura-campus .mode p,
.aura-campus .why-item p,.aura-campus .feat p{color:var(--aura-muted)}
.aura-campus .step .n,.aura-campus .step-num{
  background:rgba(80,227,242,.12);border:1px solid rgba(80,227,242,.35);
  color:var(--aura-cyan);border-radius:50%;
}
.aura-campus .group-age{
  color:var(--aura-gold);background:rgba(213,181,107,.12);
  border:1px solid rgba(213,181,107,.3);border-radius:999px;
}

/* ── 10. FEATURE MODULES ───────────────────────────────────────────────── */
.aura-campus .f-ico,.aura-campus .group-ico,.aura-campus .mode-ico,
.aura-campus .why-ico,.aura-campus .phone-ico{
  filter:grayscale(1) brightness(2);opacity:.8;
}

/* ── 11. FOOTER / MISC ─────────────────────────────────────────────────── */
.aura-campus .footer,.aura-campus .contact{border-top:1px solid var(--aura-border)}
.aura-campus .contact-line,.aura-campus #t-footer,.aura-campus .phone-label{color:var(--aura-muted)}
.aura-campus .contact-links a,.aura-campus .mode-link{color:var(--aura-cyan);text-decoration:none}
.aura-campus .contact-links a:hover,.aura-campus .mode-link:hover{color:var(--aura-gold)}
.aura-campus #toast{
  background:rgba(5,10,18,.95);border:1px solid rgba(80,227,242,.35);
  color:var(--aura-text);border-radius:13px;
}
.aura-campus a:focus-visible,.aura-campus button:focus-visible,
.aura-campus input:focus-visible{
  outline:2px solid var(--aura-cyan);outline-offset:2px;border-radius:9px;
}

/* ── 12. RESPONSIVE ────────────────────────────────────────────────────── */
@media (max-width:900px){ .aura-campus #rooms{grid-template-columns:1fr} }
@media (max-width:640px){
  .aura-campus::before{filter:blur(34px);animation:none}   /* cheaper on phones */
  .aura-campus .bg-deco::after{display:none}
  .aura-campus .topbar{border-radius:18px;backdrop-filter:none;
    background:rgba(5,10,18,.96);top:0;margin-top:0;width:100%}
  .aura-campus .topbar::after{display:none}
  .aura-campus .hero::after,.aura-campus .mkt-hero::after{display:none}
  .aura-campus .hero-art{min-height:180px}
  .aura-campus .hero-art::before{width:min(190px,52vw)}
  .aura-campus .room::after{animation:none}
  .aura-campus .room [data-room]{padding-block:15px;font-size:16px}
}

/* ── 13. REDUCED MOTION ────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .aura-campus::before,.aura-campus .bg-deco::after,
  .aura-campus .topbar::after,.aura-campus .hero::after,
  .aura-campus .mkt-hero::after,.aura-campus #wod::after,
  .aura-campus .hero-art::before,.aura-campus .hero-art::after,
  .aura-campus .room::after,.aura-campus .dot.live{animation:none !important}
  .aura-campus .room,.aura-campus .step,.aura-campus .feat{transition:none}
  .aura-campus .room:hover{transform:none}
}