/* Russian Tutor Brisbane. Premium, warm, storybook. No flags anywhere.
   Fairytale night blue + gold (Palekh-inspired) on cream paper pages.
   Lora + Inter, cyrillic subsets. Motion switches off under prefers-reduced-motion. */
:root {
  /* v8: primary blue sampled from Bart's logo (#2C8FE1 light / #1871CA avg / #084896 deep),
     accents softened. Var names kept from the night palette to avoid churn. */
  --paper: #FBF8F1;
  --card: #FFFFFF;
  --ink: #223047;
  --soft: #5C6980;
  --night: #1871CA;
  --night-deep: #0C4EA2;
  --gold: #C9D6E8;
  --gold-deep: #55688A;
  --blush: #E4EEFB;
  --line: #E1E6EE;
  --radius: 20px;
  --shadow-soft: 0 10px 30px rgba(18, 62, 122, .08);
  --shadow-lift: 0 18px 44px rgba(18, 62, 122, .14);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: "Lora", Georgia, serif; line-height: 1.18; color: var(--ink); letter-spacing: -.01em; }
img { max-width: 100%; display: block; }
a { color: var(--night); }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

/* the honey highlight sweep on key words */
.hl {
  background: linear-gradient(180deg, transparent 55%, rgba(174, 203, 240, .45) 55%, rgba(174, 203, 240, .45) 92%, transparent 92%);
  border-radius: 4px; padding: 0 .08em;
}

/* ---------- header ---------- */
.top {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 245, 236, .92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s ease;
}
.top.scrolled { box-shadow: 0 8px 26px rgba(18, 62, 122, .09); }
.top .wrap { display: flex; align-items: center; gap: 14px; height: 68px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 1.03rem; }
.brand .mark {
  width: 38px; height: 38px; border-radius: 12px; background: var(--night);
  color: var(--gold); display: flex; align-items: center; justify-content: center;
  font-family: "Lora", serif; font-weight: 700; font-size: 1.3rem;
  box-shadow: 2px 2px 0 var(--gold);
}
.top nav { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.top nav a.nlink { text-decoration: none; color: var(--soft); font-size: .94rem; font-weight: 500; }
.top nav a.nlink:hover { color: var(--night); }
.lang { display: flex; border: 1.5px solid var(--night); border-radius: 999px; overflow: hidden; font-size: .84rem; font-weight: 700; }
.lang a { text-decoration: none; padding: 6px 13px; color: var(--night); transition: background .2s ease, color .2s ease; }
.lang a.on { background: var(--night); color: #fff; }
.cta-top {
  text-decoration: none; background: var(--gold); color: var(--night-deep);
  font-weight: 700; font-size: .92rem; padding: 10px 20px; border-radius: 999px;
  white-space: nowrap; border: 1.5px solid var(--night-deep);
  box-shadow: 3px 3px 0 var(--night-deep);
  transition: transform .15s ease, box-shadow .15s ease;
}
.cta-top:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--night-deep); }
.cta-top:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--night-deep); }
@media (max-width: 760px) {
  .top nav a.nlink { display: none; }
  .top .wrap { gap: 8px; }
  .top nav { gap: 8px; }
  .cta-top { padding: 8px 14px; font-size: .85rem; box-shadow: 2px 2px 0 var(--night-deep); }
  .lang a { padding: 5px 10px; }
  .brand { font-size: .95rem; }
}
@media (max-width: 520px) { .brand .bsub { display: none; } }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding: 84px 0 56px; }
.hero .wrap { display: grid; grid-template-columns: 1.15fr .85fr; gap: 52px; align-items: center; }
.hero h1 { font-size: clamp(2rem, 4.6vw, 3.3rem); margin: 16px 0 20px; }
.hero .kick,
.sec-kick {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--gold-deep); font-weight: 700; font-size: .78rem;
  letter-spacing: .13em; text-transform: uppercase;
}
.hero .kick:before, .sec-kick:before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--gold); }
.sec-kick { margin-bottom: 12px; }
.hero p.lead { color: var(--soft); font-size: 1.1rem; max-width: 33em; }
.hero .acts { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  font-weight: 700; border-radius: 999px; padding: 14px 26px; font-size: .98rem;
  border: 1.5px solid var(--night-deep);
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.btn.primary { background: var(--gold); color: var(--night-deep); box-shadow: 3px 3px 0 var(--night-deep); }
.btn.primary:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--night-deep); }
.btn.primary:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--night-deep); }
.btn.ghost { border-color: var(--night); color: var(--night); background: transparent; }
.btn.ghost:hover { background: var(--night); color: #fff; }

/* rotating verb (glue keeps the comma attached to the word on line breaks) */
.glue { white-space: nowrap; }
.rot { display: inline-block; color: var(--night); transition: opacity .26s ease, transform .26s ease; }
.rot.out { opacity: 0; transform: translateY(.35em); }

/* the letter composition */
.letters { position: relative; aspect-ratio: 1/1.05; }
.letters > span {
  position: absolute; font-family: "Lora", serif; font-weight: 700;
  color: var(--night); opacity: .12; user-select: none; line-height: 1;
  transform: translate(var(--px, 0), var(--py, 0));
  transition: transform .4s ease-out;
}
.letters .l1 { font-size: 11.5rem; top: 0; left: 6%; opacity: .16; color: var(--gold-deep); animation: drift 7s ease-in-out infinite; }
.letters .l2 { font-size: 7.5rem; bottom: 16%; right: 4%; animation: drift 9s ease-in-out 1.2s infinite; }
.letters .l3 { font-size: 5rem; top: 34%; right: 26%; opacity: .1; animation: drift 11s ease-in-out .6s infinite; }
.letters .l4 { font-size: 3.6rem; top: 8%; right: 8%; opacity: .09; animation: drift 8s ease-in-out 2s infinite; }
@keyframes drift {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -14px; }
}
.letters .card-note {
  position: absolute; left: 0; bottom: 0; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 22px; max-width: 300px; box-shadow: var(--shadow-lift);
  animation: drift 8s ease-in-out .8s infinite;
}
.letters .card-note b { display: block; margin-bottom: 4px; font-family: "Lora", serif; font-size: 1.05rem; }
.letters .card-note span { position: static; opacity: 1; font-family: "Inter", sans-serif; font-weight: 400; color: var(--soft); font-size: .92rem; transform: none; animation: none; }
@media (max-width: 860px) {
  .hero { padding: 56px 0 40px; }
  .hero .wrap { grid-template-columns: 1fr; gap: 30px; }
  .letters { max-width: 420px; aspect-ratio: 2/1.15; }
  .letters .l1 { font-size: 7rem; }
  .letters .l2 { font-size: 5rem; }
}

/* trust band under the hero */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 26px 0 0; padding: 0 0 28px; }
.stat {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 16px 20px; display: flex; flex-direction: column; gap: 2px;
}
.stat b { font-family: "Lora", serif; font-size: 1.25rem; color: var(--night); }
.stat span { color: var(--soft); font-size: .88rem; }
@media (max-width: 760px) { .stats { grid-template-columns: 1fr; gap: 10px; } }

/* ---------- sections ---------- */
section { padding: 76px 0; }
section.alt { background: #EFF4FB; }
section h2 { font-size: clamp(1.55rem, 3.1vw, 2.25rem); margin-bottom: 14px; max-width: 22em; }
.sub { color: var(--soft); max-width: 44em; font-size: 1.02rem; }

.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 34px; }
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 34px; }
@media (max-width: 860px) { .grid3, .grid2 { grid-template-columns: 1fr; } }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.card .em {
  width: 48px; height: 48px; border-radius: 14px; background: var(--blush);
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
  font-family: "Lora", serif; font-weight: 700; color: var(--night); margin-bottom: 16px;
  box-shadow: 2px 2px 0 var(--gold);
}
.card h3 { font-size: 1.15rem; margin-bottom: 8px; }
.card p { color: var(--soft); font-size: .96rem; }

/* steps */
.steps { counter-reset: st; margin-top: 34px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
.step {
  position: relative; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.step:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.step:before {
  counter-increment: st; content: counter(st);
  display: inline-flex; width: 38px; height: 38px; border-radius: 50%;
  background: var(--night); color: var(--gold); font-weight: 700;
  align-items: center; justify-content: center; margin-bottom: 14px;
  font-family: "Lora", serif; font-size: 1.1rem; box-shadow: 2px 2px 0 var(--gold);
}
.step h3 { font-size: 1.1rem; margin-bottom: 6px; }
.step p { color: var(--soft); font-size: .95rem; }

/* ---------- alphabet band ---------- */
.band-azbuka {
  background: linear-gradient(180deg, var(--blush), #D6E6F9);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.azletters { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; max-width: 780px; }
.azletter {
  width: 56px; height: 56px; border-radius: 15px; border: 1.5px solid var(--night);
  background: var(--card); color: var(--night);
  font-family: "Lora", serif; font-weight: 700; font-size: 1.5rem; cursor: pointer;
  transition: transform .16s ease, background .2s ease, color .2s ease, box-shadow .16s ease;
}
.azletter:hover { transform: translateY(-4px); box-shadow: 3px 4px 0 var(--gold); }
.azletter.on { background: var(--night); color: var(--gold); box-shadow: 3px 3px 0 var(--gold); }
.azword {
  margin-top: 26px; min-height: 96px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 28px; max-width: 560px; box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column; gap: 2px; justify-content: center;
}
.azword .azhint { color: var(--soft); font-size: .98rem; }
.azword .azw { font-family: "Lora", serif; font-weight: 700; font-size: 1.7rem; color: var(--night); }
.azword .aztr { color: var(--gold-deep); font-size: .92rem; font-weight: 600; letter-spacing: .03em; }
.azword .azt { color: var(--soft); font-size: .98rem; }
.azword.pop .azw { animation: pop .45s ease; display: inline-block; }
@keyframes pop {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* about */
.about { display: grid; grid-template-columns: .9fr 1.1fr; gap: 44px; align-items: center; }
@media (max-width: 860px) { .about { grid-template-columns: 1fr; } }
.about .frame { border-radius: var(--radius); background: var(--blush); padding: 14px; box-shadow: var(--shadow-soft); }
.about .frame .inner {
  border-radius: 13px; background: var(--card); border: 1px solid var(--line);
  aspect-ratio: 4/4.6; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.about .frame .inner img { width: 100%; height: 100%; object-fit: cover; }
.about .frame .ph { text-align: center; color: var(--soft); padding: 24px; }
.about .frame .ph .big { font-family: "Lora", serif; font-size: 4rem; color: var(--night); opacity: .25; line-height: 1; }
.about ul { list-style: none; margin-top: 18px; }
.about ul li { padding-left: 32px; position: relative; margin-bottom: 11px; color: var(--soft); }
.about ul li:before { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 16px; border-radius: 5px; background: var(--gold); box-shadow: 1.5px 1.5px 0 var(--night); }

/* reviews */
.quote {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; transition: transform .25s ease, box-shadow .25s ease;
}
.quote:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.quote p { font-size: .98rem; }
.quote .who { margin-top: 14px; color: var(--soft); font-size: .9rem; font-weight: 600; }
.stars { color: var(--gold-deep); letter-spacing: 3px; margin-bottom: 10px; }

/* faq */
.faq { margin-top: 30px; display: grid; gap: 12px; max-width: 780px; }
.faq details {
  background: var(--card); border: 1px solid var(--line); border-radius: 15px;
  padding: 17px 22px; transition: box-shadow .25s ease;
}
.faq details[open] { box-shadow: var(--shadow-soft); }
.faq summary {
  cursor: pointer; font-weight: 700; font-family: "Lora", serif; font-size: 1.03rem;
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:after {
  content: "+"; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--night); color: var(--night);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Inter", sans-serif; font-weight: 600; font-size: 1rem;
  transition: transform .25s ease, background .2s ease, color .2s ease;
}
.faq details[open] summary:after { content: "+"; transform: rotate(45deg); background: var(--night); color: var(--gold); }
.faq details p { margin-top: 12px; color: var(--soft); font-size: .96rem; animation: pop .4s ease; }

/* contact */
.contact {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--night), var(--night-deep));
  color: #F4F8FE; border-radius: 28px; padding: 56px 44px;
  box-shadow: var(--shadow-lift);
}
.contact:before {
  content: "Я"; position: absolute; right: -20px; bottom: -60px;
  font-family: "Lora", serif; font-weight: 700; font-size: 16rem;
  color: rgba(232, 169, 76, .1); line-height: 1; pointer-events: none;
}
.contact h2 { color: #fff; }
.contact .sub { color: #DCEAFB; }
.cbtns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; position: relative; }
.cbtn {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  background: rgba(255, 255, 255, .08); border: 1.5px solid rgba(255, 255, 255, .35);
  color: #fff; font-weight: 700; padding: 13px 22px; border-radius: 999px; font-size: .95rem;
  transition: transform .16s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.cbtn:hover { background: var(--gold); border-color: var(--gold); color: var(--night-deep); transform: translateY(-3px); }
.cbtn svg { width: 18px; height: 18px; fill: currentColor; }
.contact .fine { margin-top: 20px; font-size: .86rem; color: #AECBF0; position: relative; }
@media (max-width: 640px) { .contact { padding: 38px 24px; } .contact:before { font-size: 10rem; } }

/* footer */
footer { padding: 52px 0 46px; color: var(--soft); font-size: .93rem; border-top: 1px solid var(--line); margin-top: 30px; }
.fcols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 34px; }
@media (max-width: 760px) { .fcols { grid-template-columns: 1fr; gap: 26px; } }
.fbrand .brand { margin-bottom: 10px; }
.fbrand p { max-width: 26em; font-size: .92rem; }
footer h4 { font-family: "Lora", serif; color: var(--ink); font-size: 1rem; margin-bottom: 12px; }
footer ul { list-style: none; }
footer ul li { margin-bottom: 8px; }
footer a { color: var(--soft); text-decoration: none; }
footer a:hover { color: var(--night); text-decoration: underline; }
.fbottom { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); font-size: .85rem; display: flex; flex-wrap: wrap; gap: 10px 24px; }

/* language suggest banner */
.langbar { display: none; background: var(--night-deep); color: #fff; font-size: .92rem; text-align: center; padding: 10px 16px; }
.langbar a { color: var(--gold); font-weight: 700; }
.langbar button { background: none; border: 0; color: #BFD7F2; margin-left: 14px; cursor: pointer; font-size: .85rem; }

/* ---------- scroll reveals ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .65s ease, transform .65s ease; }
.reveal.in { opacity: 1; transform: none; }

/* reduced motion: everything settles down */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *:before, *:after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Google rating badge (hero) ---------- */
.gbadge {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 22px;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 15px; text-decoration: none; color: var(--ink);
  box-shadow: var(--shadow-soft); transition: transform .16s ease, box-shadow .16s ease;
}
.gbadge:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.glogo { display: inline-flex; width: 16px; height: 16px; }
.glogo svg { width: 100%; height: 100%; }
.gbadge .gstars { color: var(--gold-deep); letter-spacing: 2px; font-size: .88rem; }
.gbadge b { font-family: "Lora", serif; font-size: 1rem; }
.gbadge .gtxt { color: var(--soft); font-size: .88rem; }
@media (max-width: 480px) { .gbadge .gtxt { display: none; } }

/* ---------- reviews, the powerful version ---------- */
.revhead { display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center; }
@media (max-width: 760px) { .revhead { grid-template-columns: 1fr; gap: 18px; } }
.rlockup {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 30px; text-align: center; box-shadow: var(--shadow-soft); min-width: 210px;
}
.rlockup .rnum { font-family: "Lora", serif; font-weight: 700; font-size: 3.6rem; line-height: 1; color: var(--night); }
.rlockup .rstars { color: var(--gold-deep); letter-spacing: 4px; font-size: 1.15rem; margin: 8px 0 10px; }
.rlockup .rsrc { display: inline-flex; align-items: center; gap: 8px; color: var(--soft); font-size: .9rem; font-weight: 600; }
.rlockup .rsrc .glogo { width: 15px; height: 15px; }
.quote.featured {
  grid-column: 1 / -1; position: relative; padding: 34px 38px;
  border-left: 5px solid var(--gold);
}
.quote.featured p:first-of-type { font-family: "Lora", serif; font-size: 1.3rem; line-height: 1.5; color: var(--ink); }
.quote.featured:before {
  content: "\00AB"; position: absolute; top: -14px; right: 22px;
  font-family: "Lora", serif; font-weight: 700; font-size: 7rem; line-height: 1;
  color: var(--gold); opacity: .35; pointer-events: none;
}
.rnote { margin-top: 14px; color: var(--soft); font-size: .88rem; }
.racts { margin-top: 26px; }
.racts .btn.ghost { gap: 11px; }
.racts .glogo { width: 16px; height: 16px; }

/* ---------- 3D floating background field ---------- */
.bg3d {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  pointer-events: none; perspective: 900px;
}
.bg3d span {
  position: absolute; font-family: "Lora", serif; font-weight: 700;
  color: var(--night); user-select: none; line-height: 1;
  will-change: transform; transform-style: preserve-3d;
}
.bg3d span.honeyc { color: var(--gold-deep); }
/* content rides above the field; alt bands cover it, cream bands reveal it */
.langbar, section, footer { position: relative; z-index: 1; }
@media (max-width: 760px) { .bg3d span.m-hide { display: none; } }
@media (prefers-reduced-motion: reduce) { .bg3d { display: none; } }

/* ============ Fairytale redesign layer: night hero, folklore, new mark ============ */

/* header + footer hexagon mark */
.brand .mark { background: none; border-radius: 0; box-shadow: none; width: 40px; height: 40px; }
.brand .mark svg { width: 100%; height: 100%; filter: drop-shadow(2px 2px 0 rgba(201, 214, 232, .85)); }

/* the night-sky book cover */
.hero {
  color: #F5EFDF;
  background:
    radial-gradient(1.6px 1.6px at 15% 18%, rgba(255, 255, 255, .85), transparent 60%),
    radial-gradient(1.2px 1.2px at 32% 64%, rgba(255, 255, 255, .5), transparent 60%),
    radial-gradient(1.8px 1.8px at 58% 28%, rgba(255, 255, 255, .75), transparent 60%),
    radial-gradient(1.2px 1.2px at 74% 74%, rgba(255, 255, 255, .45), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 20%, rgba(255, 255, 255, .7), transparent 60%),
    radial-gradient(1.2px 1.2px at 44% 88%, rgba(255, 255, 255, .4), transparent 60%),
    radial-gradient(1.6px 1.6px at 6% 76%, rgba(255, 255, 255, .5), transparent 60%),
    radial-gradient(1.3px 1.3px at 66% 8%, rgba(255, 255, 255, .6), transparent 60%),
    linear-gradient(180deg, #0B4796 0%, #1871CA 58%, #2C8FE1 100%);
}
.hero h1 { color: #FFFFFF; }
.hero .kick { color: var(--gold); }
.hero .rot { color: var(--gold); }
.hero .hl {
  background: linear-gradient(180deg, transparent 70%, rgba(255, 255, 255, .22) 70%, rgba(255, 255, 255, .22) 94%, transparent 94%);
}
.hero p.lead { color: #DCEAFB; }
.hero .btn.ghost { border-color: rgba(255, 255, 255, .75); color: #FFFFFF; }
.hero .btn.ghost:hover { background: #FFFFFF; color: var(--night-deep); border-color: #FFFFFF; }
.hero .stat { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .16); }
.hero .stat b { color: var(--gold); }
.hero .stat span { color: #CFE2F8; }
.letters > span { color: var(--gold); opacity: .2; }
.letters .l1 { color: var(--gold); opacity: .22; }

/* the Firebird */
.letters .firebird {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transform: translate(var(--px, 0), var(--py, 0));
  animation: drift 9s ease-in-out .4s infinite;
  filter: drop-shadow(0 4px 22px rgba(255, 255, 255, .3));
  pointer-events: none;
}

/* Kolobok's dotted trail under the steps */
.skazka-path { display: block; width: 100%; height: auto; margin: 26px auto 0; overflow: visible; }
.skazka-path .kolobok-rock { animation: rock 5.5s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes rock {
  0%, 100% { transform: rotate(-7deg); }
  50% { transform: rotate(9deg); }
}

/* the golden fish on the night contact band */
.contact {
  background:
    radial-gradient(1.5px 1.5px at 12% 24%, rgba(255, 255, 255, .7), transparent 60%),
    radial-gradient(1.2px 1.2px at 38% 78%, rgba(255, 255, 255, .4), transparent 60%),
    radial-gradient(1.7px 1.7px at 64% 14%, rgba(255, 255, 255, .65), transparent 60%),
    radial-gradient(1.2px 1.2px at 86% 62%, rgba(255, 255, 255, .45), transparent 60%),
    radial-gradient(1.4px 1.4px at 94% 30%, rgba(255, 255, 255, .55), transparent 60%),
    linear-gradient(135deg, var(--night), var(--night-deep));
}
.contact:before { content: none; }
.contact .goldfish {
  position: absolute; right: 20px; bottom: 10px; width: 250px; height: auto;
  animation: drift 8s ease-in-out infinite; pointer-events: none;
}
@media (max-width: 760px) { .contact .goldfish { width: 150px; right: 6px; bottom: 4px; opacity: .8; } }
.letters .l1 { left: auto; right: 0; top: 0; font-size: 7.5rem; }
.letters .l3 { top: auto; bottom: 26%; left: 2%; right: auto; font-size: 4rem; }
.letters .card-note { color: var(--ink); }
.letters .l1, .letters .l3 { color: var(--gold); opacity: .3; }
.hero .hl { background: linear-gradient(180deg, transparent 74%, rgba(174, 203, 240, .45) 74%, rgba(174, 203, 240, .45) 96%, transparent 96%); }
.brand .mark img { width: 100%; height: 100%; object-fit: contain; display: block; filter: none; }
.brand .mark:has(img) { filter: none; }
/* v8 polish: opaque honey underline in the hero (alpha over blue went grey), airy white letters */
.hero .hl { background: linear-gradient(180deg, transparent 74%, rgba(255, 255, 255, .22) 74%, rgba(255, 255, 255, .22) 96%, transparent 96%); }
.letters .l1, .letters .l3 { color: #FFFFFF; opacity: .22; }

/* v9: Bart's generated character art (transparent PNGs) */
.letters .firebird { object-fit: contain; }
.contact .goldfish { width: 300px; right: 26px; bottom: 2px; opacity: .92; }
.skazka-art {
  display: block; width: min(340px, 62%); height: auto;
  margin: 6px 4vw 0 auto; opacity: .9;
  animation: drift 8s ease-in-out infinite;
}
#faq .wrap { position: relative; }
.faq-matryoshka {
  position: absolute; right: 24px; bottom: 0; width: 250px; height: auto;
  opacity: .9; animation: drift 9s ease-in-out .5s infinite; pointer-events: none;
}
@media (max-width: 1140px) { .faq-matryoshka { display: none; } }
@media (max-width: 760px) { .contact .goldfish { width: 170px; opacity: .8; } .skazka-art { margin-right: 0; } }
@media (min-width: 1000px) { .contact .cbtns { max-width: 620px; } .contact .goldfish { width: 290px; right: 22px; bottom: 6px; } }
@media (min-width: 761px) and (max-width: 999px) { .contact .goldfish { width: 190px; bottom: 0; } }

/* v10: silver and white accents (Katerina's request, no gold with the blue) */
.cta-top, .btn.primary { background: #FFFFFF; }
.sec-kick:before { background: var(--night); }
.hero .kick:before { background: #FFFFFF; }
.hero .rot { color: #DDE8F6; }
.hero .stat b { color: #FFFFFF; }
.step:before { color: #FFFFFF; }
.azletter.on { color: #FFFFFF; }
.about ul li:before { background: var(--night); box-shadow: 1.5px 1.5px 0 #C9D6E8; }
.quote.featured { border-left-color: var(--night); }
.gbadge .gstars, .rlockup .rstars, .stars { color: var(--night); }
.cbtn:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--night-deep); }
.contact .sec-kick:before { background: #FFFFFF; }

/* v11: characters pop (frost glow on blue, ink blue on light), rotator chip */
.letters .firebird {
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, .35)) drop-shadow(0 0 22px rgba(255, 255, 255, .28));
}
.contact .goldfish {
  opacity: 1; width: 320px;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, .3)) drop-shadow(0 0 20px rgba(255, 255, 255, .22));
}
.skazka-art {
  opacity: 1; width: min(380px, 64%);
  filter: drop-shadow(0 10px 22px rgba(24, 113, 202, .16));
}
.faq-matryoshka {
  opacity: 1; width: 280px;
  filter: drop-shadow(0 10px 22px rgba(24, 113, 202, .16));
}
.hero .rot {
  color: #FFFFFF;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 14px;
  padding: .02em .2em .06em;
  text-shadow: 0 0 16px rgba(255, 255, 255, .45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 4px 18px rgba(8, 30, 70, .18);
}
@media (min-width: 1000px) { .contact .goldfish { width: 320px; } }
.hl { white-space: nowrap; }

/* v12: lesson photo album */
.snaps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 34px; }
.snap {
  margin: 0; background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: 10px 10px 12px; box-shadow: var(--shadow-soft);
  transition: transform .28s ease, box-shadow .28s ease;
}
.snap img { width: 100%; height: auto; border-radius: 9px; }
.snap figcaption { margin-top: 9px; text-align: center; color: var(--soft); font-size: .88rem; font-weight: 600; }
.snap:nth-child(1) { transform: rotate(-1.6deg); }
.snap:nth-child(2) { transform: rotate(1.2deg); }
.snap:nth-child(3) { transform: rotate(-1deg); }
.snap:nth-child(4) { transform: rotate(1.6deg); }
.snap:hover { transform: rotate(0) translateY(-6px); box-shadow: var(--shadow-lift); }
@media (max-width: 1000px) { .snaps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .snaps { grid-template-columns: 1fr; max-width: 360px; } }

/* v13: real reading photo framed in the hero */
.letters .firebird { inset: auto; top: -4%; left: -7%; width: 74%; height: 74%; }
.hero-photo {
  position: absolute; right: 0; top: 5%; width: 86%; z-index: 1;
  background: var(--card); padding: 11px 11px 13px; border-radius: 18px;
  box-shadow: var(--shadow-lift); transform: rotate(-2deg);
  animation: drift 10s ease-in-out .6s infinite;
}
.hero-photo img { width: 100%; height: auto; border-radius: 10px; display: block; }
.letters .card-note { z-index: 2; }
.letters .l1 { display: none; }
@media (max-width: 860px) {
  .letters { aspect-ratio: auto; padding-bottom: 46px; }
  .hero-photo { position: relative; top: 0; width: 100%; transform: rotate(-1.2deg); }
  .letters .firebird { top: -2%; left: -4%; width: 58%; height: 58%; }
}

/* v14 FIX: the goldfish must never cover the contact buttons on small screens.
   Below 1000px it leaves its corner and sits under the buttons in normal flow. */
@media (max-width: 999px) {
  .contact .goldfish {
    position: static; display: block; width: 150px; height: auto;
    margin: 20px auto 0; opacity: .95;
  }
}

/* v16: four hero tiles, so a 2x2 block instead of a 3-across row */
.stats { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 480px) { .stats { grid-template-columns: 1fr; } }
@media (min-width: 481px) and (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

/* v17: multi-paragraph bio in the about column */
.about .sub + .sub { margin-top: 14px; }

/* v18: the feather trail. A Firebird feather rides down the right side as
   you scroll, drawing a dotted silver path behind it. Decorative only:
   pointer-events none, created by JS only when motion is allowed. */
.trail { position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; z-index: 4; }
.trail .tpath { position: absolute; top: 0; left: 0; overflow: visible; }
.trail .tline { fill: none; stroke: #AFC6E4; stroke-width: 2.25; stroke-linecap: round; opacity: .9; }
.trail-feather {
  position: absolute; top: 0; left: 0; width: 52px; height: 104px; margin: -52px 0 0 -26px;
  will-change: transform;
  filter: drop-shadow(0 0 5px rgba(234, 242, 251, .95)) drop-shadow(0 0 16px rgba(24, 113, 202, .5));
}
.trail-feather svg, .trail-feather img { width: 100%; height: 100%; display: block; animation: featherpulse 3.2s ease-in-out infinite; }
@keyframes featherpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.tspark { position: absolute; top: 0; left: 0; width: 12px; height: 12px; opacity: 0;
  filter: drop-shadow(0 0 5px rgba(178, 210, 246, .95)); }
.tspark.on { animation: sparkpop .85s ease forwards; }
@keyframes sparkpop {
  0% { opacity: 0; transform: scale(.3) rotate(0deg); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.15) rotate(80deg) translateY(8px); }
}
@media (max-width: 999px) {
  .trail-feather { width: 34px; height: 68px; margin: -34px 0 0 -17px; }
  .trail .tline { stroke-width: 1.75; opacity: .7; }
}