/* ==========================================================================
   Premium layer, loaded after style.css: quieter palette (ink + teal + one gold accent), editorial type,
   more air, hairlines instead of boxes, dark textured sections and calm motion (see premium.js).
   Everything animated is off for prefers-reduced-motion, and nothing is hidden without JS.
   ========================================================================== */

:root {
  --ink: #101c2a;
  --ink-2: #3b4a5a;
  --muted: #6b7785;
  --bg: #faf7f2;
  --paper: #ffffff;
  --line: #ebe4d8;
  --teal: #0e4f5c;
  --teal-2: #1a6b78;
  --teal-soft: #e8f1f0;
  --gold: #b8893b;
  --gold-2: #d9b26a;
  --gold-soft: #f6eedf;
  --wa: #0f7a49;
  --wa-hover: #0b6038;
  --radius: 22px;
  --shadow: 0 1px 1px rgba(16, 28, 42, .04), 0 8px 24px -10px rgba(16, 28, 42, .14);
  --shadow-lg: 0 2px 4px rgba(16, 28, 42, .04), 0 28px 64px -24px rgba(16, 28, 42, .28);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

::selection { background: var(--gold-2); color: var(--ink); }

/* ---------- type ---------- */
h1 { font-size: clamp(2.5rem, 5.2vw, 4.3rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.04; }
h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
[dir="rtl"] h1, [dir="rtl"] h2 { letter-spacing: 0; line-height: 1.35; }
h1 em, h2 em { font-style: italic; font-weight: 500; color: var(--teal-2); background: none; }
.hero h1 em { font-style: italic; color: var(--teal-2); background: none; position: relative; white-space: normal; }
[dir="rtl"] h1 em, [dir="rtl"] h2 em, [dir="rtl"] .hero h1 em { font-style: normal; font-weight: 700; }
.lead { font-size: 1.17rem; line-height: 1.7; color: var(--ink-2); }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; color: var(--gold); font-size: .74rem; letter-spacing: .2em; font-weight: 700; }
.eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; flex: none; }
.section-head.center .eyebrow::after { content: ""; width: 26px; height: 1px; background: currentColor; flex: none; }
[dir="rtl"] .eyebrow { letter-spacing: 0; font-size: .9rem; }

/* ---------- rhythm ---------- */
.section { padding-block: clamp(80px, 10vw, 136px); }
.section.alt { background: #f4efe6; border-block: 0; }
.section-head { margin-bottom: clamp(36px, 5vw, 60px); }
.section-head .lead { max-width: 640px; }
.section-head.center .lead { margin-inline: auto; }

/* ---------- buttons ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; letter-spacing: .005em; transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .25s ease, color .25s ease; }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 48%, transparent 66%); transform: translateX(-120%); transition: transform .9s var(--ease); }
.btn:hover::after { transform: translateX(120%); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-wa { background: linear-gradient(180deg, #13905a, #0d7344); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 12px 28px -12px rgba(13, 115, 68, .7); }
.btn-wa:hover { background: linear-gradient(180deg, #11834f, #0b6038); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 18px 34px -12px rgba(13, 115, 68, .75); }
.btn-dark { background: linear-gradient(180deg, #1b2b3c, var(--ink)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 12px 28px -14px rgba(16, 28, 42, .8); }
.btn-ghost { border-width: 1px; border-color: rgba(16, 28, 42, .35); }
.btn-gold { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 12px 28px -12px rgba(184, 137, 59, .8); }
.btn-gold:hover { color: var(--ink); }

/* ---------- header ---------- */
.site-header { background: rgba(250, 247, 242, .72); border-bottom-color: transparent; transition: background-color .4s ease, box-shadow .4s ease, border-color .4s ease; }
.scrolled .site-header { background: rgba(250, 247, 242, .9); border-bottom-color: var(--line); box-shadow: 0 10px 30px -24px rgba(16, 28, 42, .35); }
.nav a { font-weight: 550; }
.nav a:hover, .nav a[aria-current="page"] { background: transparent; color: var(--teal); box-shadow: inset 0 -1px 0 var(--gold-2); border-radius: 0; }
@media (max-width: 1280px) { .nav a:hover, .nav a[aria-current="page"] { box-shadow: none; background: var(--teal-soft); border-radius: 12px; } }

/* thin gold reading progress */
.read-progress { position: fixed; inset-inline: 0; top: 0; height: 2px; z-index: 60; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--gold-2), var(--gold)); pointer-events: none; }
[dir="rtl"] .read-progress { transform-origin: 100% 50%; }

/* ---------- hero ---------- */
.hero { padding-block: clamp(48px, 7vw, 96px) clamp(64px, 8vw, 112px); }
.hero::before { background: radial-gradient(closest-side, rgba(217, 178, 106, .22), transparent 70%); top: -35%; }
.hero::after { content: ""; position: absolute; inset-inline-start: -15%; bottom: -40%; width: 55vw; max-width: 720px; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(14, 79, 92, .09), transparent 70%); pointer-events: none; }
.hero .checks { gap: 12px; margin-top: 26px; }
.hero .checks li { font-size: 1.02rem; }
.hero .checks .ico { color: var(--gold); }
.hero-photo img { border-radius: 200px 200px 28px 28px; border: 0; box-shadow: var(--shadow-lg); }
.hero-photo::before { content: ""; position: absolute; inset: -14px; border: 1px solid rgba(184, 137, 59, .45); border-radius: 214px 214px 40px 40px; pointer-events: none; }
.hello { font-weight: 650; font-size: .95rem; padding: 8px 14px; border-radius: 14px; box-shadow: 0 14px 30px -12px rgba(16, 28, 42, .35); }
.hello-1 { background: var(--ink); color: #fff; }
.hello-2 { background: #fff; color: var(--teal); }
.hello-3 { background: var(--gold-2); color: var(--ink); }
.hello-4 { background: var(--teal); color: #fff; }
.hero-stat { border-radius: 999px; padding: 10px 20px; backdrop-filter: blur(8px); background: rgba(255, 255, 255, .9); }
.hero-stat strong { color: var(--gold); }
.hero-chip img { border-color: var(--gold-soft); }

/* ---------- trust strip: dark band with gold hairlines ---------- */
.trust { background: var(--ink) var(--grain); color: #e9e4da; }
.trust ul { padding: 26px 0; gap: 14px 0; }
.trust li { font-size: .9rem; font-weight: 500; padding-inline: 18px; border-inline-start: 1px solid rgba(217, 178, 106, .22); }
.trust li:first-child { border-inline-start: 0; }
.trust .ico { color: var(--gold-2); width: 22px; height: 22px; }
@media (max-width: 760px) { .trust li { border-inline-start: 0; padding-inline: 0; } }

/* ---------- service explorer ---------- */
.explorer { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: clamp(16px, 3vw, 32px); align-items: start; }
.ex-tabs { display: grid; gap: 6px; position: sticky; top: 100px; }
.ex-tabs button { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 1px solid transparent; border-radius: 18px; background: transparent; text-align: start; cursor: pointer; color: var(--ink); font: inherit; transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease; }
.ex-tabs button:hover { background: rgba(255, 255, 255, .7); }
.ex-tabs button[aria-selected="true"] { background: var(--paper); border-color: var(--line); box-shadow: var(--shadow); }
.ex-tabs button::before { content: ""; position: absolute; inset-inline-start: -1px; top: 18px; bottom: 18px; width: 3px; border-radius: 3px; background: var(--gold); transform: scaleY(0); transition: transform .35s var(--ease); }
.ex-tabs button[aria-selected="true"]::before { transform: scaleY(1); }
.ex-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--teal-soft); color: var(--teal); flex: none; transition: background-color .3s ease, color .3s ease; }
.ex-ico .ico { width: 20px; height: 20px; }
[aria-selected="true"] .ex-ico { background: var(--ink); color: var(--gold-2); }
.ex-t { display: grid; gap: 1px; min-width: 0; }
.ex-t b { font-weight: 650; font-size: .98rem; line-height: 1.3; }
.ex-t small { font-size: .8rem; color: var(--muted); }
.ex-panels { position: relative; min-width: 0; }
.ex-panel { position: relative; background: var(--paper); border-radius: 30px; padding: clamp(24px, 4vw, 48px); box-shadow: var(--shadow-lg); overflow: hidden; }
.ex-panel::before { content: ""; position: absolute; inset-inline-end: -120px; top: -120px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(closest-side, var(--gold-soft), transparent); pointer-events: none; }
.js .ex-panel[data-hidden] { display: none; }
.ex-panel.enter { animation: panelIn .6s var(--ease) both; }
/* starts at 55% opacity, so content stays readable even if a browser pauses the animation */
@keyframes panelIn { from { opacity: .55; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.ex-panel .eyebrow { margin-bottom: 10px; }
.ex-panel h3 { position: relative; font: 600 clamp(1.7rem, 3vw, 2.3rem)/1.15 var(--font-head); letter-spacing: -.015em; margin: 0 0 12px; }
.ex-lead { position: relative; font-size: 1.1rem; color: var(--ink-2); max-width: 620px; margin-bottom: 28px; }
.ex-path { list-style: none; padding: 0; margin: 0 0 30px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; counter-reset: p; border-top: 1px solid var(--line); }
.ex-path li { position: relative; padding: 22px 18px 0 0; }
[dir="rtl"] .ex-path li { padding: 22px 0 0 18px; }
.ex-path li::before { content: ""; position: absolute; top: -5px; inset-inline-start: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--paper); border: 2px solid var(--gold); }
.ex-path .when { background: none; padding: 0; color: var(--gold); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
[dir="rtl"] .ex-path .when { letter-spacing: 0; }
.ex-path p { margin: 0; font-size: .95rem; color: var(--ink-2); line-height: 1.55; }
.ex-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding-top: 24px; border-top: 1px solid var(--line); }
.ex-price { margin: 0; color: var(--muted); font-size: .9rem; }
.ex-price strong { font: 600 1.9rem/1 var(--font-head); color: var(--ink); margin-inline-end: 4px; }
.ex-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; color: var(--teal); text-decoration: none; }
.ex-more .ico { transition: transform .3s var(--ease); }
.ex-more:hover .ico { transform: translateX(4px); }
[dir="rtl"] .ex-more:hover .ico { transform: scaleX(-1) translateX(4px); }
@media (max-width: 900px) {
  .explorer { grid-template-columns: minmax(0, 1fr); }
  .ex-tabs { position: static; display: flex; overflow-x: auto; scrollbar-width: none; gap: 8px; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 10px; scroll-snap-type: x mandatory; }
  .ex-tabs::-webkit-scrollbar { display: none; }
  .ex-tabs button { flex: none; width: auto; max-width: 250px; padding: 10px 14px; border-color: var(--line); background: var(--paper); scroll-snap-align: start; }
  .ex-tabs button[aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
  .ex-tabs button[aria-selected="true"] small { color: var(--gold-2); }
  .ex-tabs button::before { display: none; }
  .ex-ico { width: 34px; height: 34px; }
  .ex-path { grid-template-columns: minmax(0, 1fr); border-top: 0; border-inline-start: 1px solid var(--line); margin-inline-start: 4px; }
  .ex-path li { padding: 0 0 18px 20px; }
  [dir="rtl"] .ex-path li { padding: 0 20px 18px 0; }
  .ex-path li::before { top: 4px; inset-inline-start: -5px; }
  .ex-foot .btn { flex: 1 1 100%; }
}

/* ---------- cards: hairlines, lift and a soft spotlight that follows the pointer ---------- */
.goal, .features li, .timeline li, .persona, .review, .price-card, .word, .lesson-card { transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s ease; }
.spot { position: relative; isolation: isolate; }
.spot::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(217, 178, 106, .16), transparent 60%); opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.spot:hover::before { opacity: 1; }
.features li:hover, .timeline li:hover, .persona:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }

/* ---------- reviews: dark, editorial quotes ---------- */
#reviews { background: var(--ink) var(--grain); color: #e9e4da; position: relative; overflow: hidden; }
#reviews::before { content: "“"; position: absolute; top: -40px; inset-inline-start: 4%; font: 600 22rem/1 var(--font-head); color: rgba(217, 178, 106, .08); pointer-events: none; }
#reviews h2 { color: #fff; }
#reviews .review { background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .08); border-radius: 26px; padding: 32px; backdrop-filter: blur(4px); }
#reviews .review blockquote { font: 500 1.22rem/1.6 var(--font-head); font-style: italic; color: #f5f1ea; }
[dir="rtl"] #reviews .review blockquote { font-family: var(--font-body); font-style: normal; font-size: 1.15rem; }
#reviews .stars { color: var(--gold-2); }
#reviews figcaption { color: rgba(233, 228, 218, .65); }
#reviews figcaption strong { color: #fff; }
#reviews .avatar { background: rgba(217, 178, 106, .16); color: var(--gold-2); }

/* ---------- mid-page CTA ---------- */
.cta-strip { padding: clamp(40px, 6vw, 64px) 0; border-bottom: 1px solid var(--line); }
.cta-strip p { font: 500 clamp(1.25rem, 2.4vw, 1.6rem)/1.3 var(--font-head); font-style: italic; }
[dir="rtl"] .cta-strip p { font-style: normal; }

/* ---------- how it works: a line that draws itself ---------- */
.steps::before { border-top: 1px solid var(--line); }
.steps::after { content: ""; position: absolute; top: 34px; inset-inline: 10%; height: 1px; background: linear-gradient(90deg, var(--gold-2), var(--gold)); transform-origin: 0 50%; transform: scaleX(var(--line-p, 1)); transition: transform 1.6s var(--ease); }
[dir="rtl"] .steps::after { transform-origin: 100% 50%; }
.step-ico { border-radius: 50%; border-color: var(--line); box-shadow: 0 0 0 8px var(--bg), var(--shadow); color: var(--teal); }
.section.alt .step-ico { box-shadow: 0 0 0 8px #f4efe6, var(--shadow); }
.step-n { background: var(--ink); color: var(--gold-2); }
@media (max-width: 900px) {
  .steps::before { border-top: 0; border-inline-start: 1px solid var(--line); }
  .steps::after { top: 10px; bottom: 10px; inset-inline: 33px auto; width: 1px; height: auto; background: linear-gradient(180deg, var(--gold-2), var(--gold)); transform-origin: 50% 0; transform: scaleY(var(--line-p, 1)); }
}

/* ---------- planner ---------- */
.planner-result { border: 1px solid var(--gold-soft); }
.pr-date { color: var(--ink); font-weight: 600; }
.pr-track span.goal { background: var(--gold); box-shadow: 0 8px 18px -8px rgba(184, 137, 59, .8); }
.pr-track span.path { background: var(--gold-soft); color: #8a6420; }
.pr-rec { background: var(--gold-soft); }
.planner-form, .planner-result { box-shadow: var(--shadow); }

/* ---------- pricing ---------- */
.tabs { background: rgba(255, 255, 255, .7); }
.tabs button { transition: background-color .3s ease, color .3s ease; }
.price-card { border-color: var(--line); border-radius: 26px; }
.price-card:hover { box-shadow: var(--shadow-lg); }
.price-card.featured { border: 1.5px solid var(--gold-2); box-shadow: var(--shadow-lg); }
.badge { background: var(--ink); color: var(--gold-2); letter-spacing: .06em; text-transform: uppercase; font-size: .68rem; padding: 6px 14px; }
.badge-alt { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: var(--ink); }
.save { color: var(--gold); }
.saved { color: var(--teal); }
.value-line s, .vstack-total s { color: var(--muted); }
.vstack li.bonus { background: var(--gold-soft); }
.bonus-tag { background: var(--ink); color: var(--gold-2); }
.vstack li.locked { border-color: var(--gold-2); color: #8a6420; }

/* the 90-lesson package: a black card */
.price-grid .price-card:nth-child(3) { background: radial-gradient(120% 80% at 100% 0%, rgba(217, 178, 106, .18), transparent 55%), linear-gradient(180deg, #17283a, var(--ink)); border-color: rgba(217, 178, 106, .35); color: #e9e4da; box-shadow: var(--shadow-lg); }
.price-grid .price-card:nth-child(3) .tier { color: var(--gold-2); }
.price-grid .price-card:nth-child(3) .price { color: #fff; }
.price-grid .price-card:nth-child(3) .per, .price-grid .price-card:nth-child(3) .tagline,
.price-grid .price-card:nth-child(3) .value-line, .price-grid .price-card:nth-child(3) .vstack li,
.price-grid .price-card:nth-child(3) .vstack-total, .price-grid .price-card:nth-child(3) .vstack-pay,
.price-grid .price-card:nth-child(3) .card-guarantee { color: rgba(233, 228, 218, .78); }
.price-grid .price-card:nth-child(3) .vstack { border-top-color: rgba(255, 255, 255, .12); }
.price-grid .price-card:nth-child(3) .vstack summary { color: var(--gold-2); }
.price-grid .price-card:nth-child(3) .vstack .worth { color: rgba(233, 228, 218, .5); }
.price-grid .price-card:nth-child(3) .vstack .worth.incl, .price-grid .price-card:nth-child(3) .vstack li .ico, .price-grid .price-card:nth-child(3) .card-guarantee .ico { color: var(--gold-2); }
.price-grid .price-card:nth-child(3) .vstack li.bonus { background: rgba(217, 178, 106, .12); color: #f5f1ea; }
.price-grid .price-card:nth-child(3) .vstack li.bonus .ico { color: var(--gold-2); }
.price-grid .price-card:nth-child(3) .bonus-tag { background: var(--gold-2); color: var(--ink); }
.price-grid .price-card:nth-child(3) .vstack-total, .price-grid .price-card:nth-child(3) .value-line s { border-color: rgba(255, 255, 255, .12); }
.price-grid .price-card:nth-child(3) .vstack-pay strong { color: #fff; }
.price-grid .price-card:nth-child(3) .saved, .price-grid .price-card:nth-child(3) .save { color: var(--gold-2); }
.price-grid .price-card:nth-child(3) .btn-dark { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 12px 28px -12px rgba(184, 137, 59, .8); }
.price-grid .price-card:nth-child(3) .btn-dark .ico { color: var(--ink); }
.price-start .price-card.trial { background: var(--gold-soft); border-color: #eadbbd; }
.guarantee { background: var(--paper); border: 1px solid var(--gold-soft); box-shadow: var(--shadow); }
.guarantee .ico-xl { background: var(--gold-soft); color: var(--gold); }

/* ---------- FAQ: hairlines instead of boxes ---------- */
.faq { gap: 0; border-top: 1px solid var(--line); }
.faq details { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.faq summary { padding: 22px 4px; font-size: 1.06rem; transition: color .25s ease; }
.faq summary:hover { color: var(--teal); }
.faq summary .ico { width: 30px; height: 30px; padding: 6px; border-radius: 50%; border: 1px solid var(--line); transition: transform .4s var(--ease), background-color .3s ease; }
.faq details[open] summary .ico { background: var(--ink); color: var(--gold-2); border-color: var(--ink); }
.answer { padding: 0 4px 18px; max-width: 760px; }
.faq details[open] .answer { animation: panelIn .5s var(--ease) both; }

/* ---------- dark CTA ---------- */
.cta-section { background: var(--ink) var(--grain); }
.cta-section::before { background: radial-gradient(closest-side, rgba(217, 178, 106, .16), transparent 70%); }
.cta-section .eyebrow { color: var(--gold-2); }
.checks.light .ico { color: var(--gold-2); }

/* ---------- floating WhatsApp ---------- */
.float-wa { box-shadow: 0 16px 34px -14px rgba(13, 115, 68, .8); }
.float-wa::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(19, 144, 90, .45); animation: wa-ring 9s var(--ease) 3s infinite; pointer-events: none; }
/* WhatsApp button (2026-11-02): a soft ring and a small wave of the icon every few seconds, plus an "online" dot */
.float-wa .ico { animation: wa-wave 9s ease-in-out 3.4s infinite; transform-origin: 50% 60%; }
.float-wa::after { content: ""; position: absolute; top: 4px; inset-inline-end: 6px; width: 11px; height: 11px; border-radius: 50%; background: #25d366; border: 2px solid #fff;
                   pointer-events: none; }
@keyframes wa-ring { 0% { box-shadow: 0 0 0 0 rgba(19, 144, 90, .32); } 18% { box-shadow: 0 0 0 12px rgba(19, 144, 90, 0); } 100% { box-shadow: 0 0 0 0 rgba(19, 144, 90, 0); } }
@keyframes wa-wave { 0%, 7%, 100% { transform: rotate(0); } 2% { transform: rotate(-9deg); } 4% { transform: rotate(7deg); } 5.5% { transform: rotate(-3deg); } }
/* 2026-11-02, more life: the button pops in, rings every 5 s and the online dot breathes; after a few seconds a chat
   bubble from Georgia types "…" and then says hello (main.js shows it once per visit, the × closes it) */
.float-wa { animation: wa-pop .7s cubic-bezier(.34, 1.56, .64, 1) .8s backwards; }
.float-wa::before { animation: wa-ring 5s var(--ease) 2s infinite; }
.float-wa::after { animation: wa-dot 2.4s ease-in-out infinite; }
@keyframes wa-pop { from { opacity: 0; transform: translateY(24px) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes wa-dot { 0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .6); } 50% { box-shadow: 0 0 0 5px rgba(37, 211, 102, 0); } }
.float-wa.is-hidden, .float-wa.is-away { animation: none; }

.wa-teaser { position: fixed; inset-inline-end: 18px; bottom: 86px; z-index: 41; width: min(320px, calc(100vw - 36px)); filter: drop-shadow(0 18px 30px rgba(18, 38, 58, .2)); }
.wa-teaser[hidden] { display: none; }
.wa-teaser > a { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; padding-inline-end: 34px; background: #fff; color: var(--ink); text-decoration: none; border-radius: 20px; border-end-end-radius: 6px; }
.wa-teaser > a::after { content: ""; position: absolute; bottom: -9px; inset-inline-end: 22px; border: 9px solid transparent; border-top-color: #fff; border-bottom: 0; }
.wa-teaser img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 2px #25d366; }
.wa-teaser-body { display: flex; flex-direction: column; gap: 4px; font-size: .93rem; line-height: 1.4; }
.wa-teaser-body b { font-size: .86rem; color: var(--teal); }
.wa-teaser-x { position: absolute; top: 6px; inset-inline-end: 6px; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.wa-teaser-x .ico { width: 16px; height: 16px; }
.wa-teaser-x:hover { background: rgba(18, 38, 58, .06); }
.wa-teaser.is-in { animation: wa-teaser-in .45s cubic-bezier(.34, 1.56, .64, 1) both; }
.wa-teaser.is-out { animation: wa-teaser-out .25s ease both; }
@keyframes wa-teaser-in { from { opacity: 0; transform: translateY(14px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes wa-teaser-out { to { opacity: 0; transform: translateY(10px) scale(.96); } }
.wa-dots { display: inline-flex; gap: 4px; padding: 6px 0 4px; }
.wa-dots i { width: 7px; height: 7px; border-radius: 50%; background: #9aa8b4; animation: wa-typing 1s ease-in-out infinite; }
.wa-dots i:nth-child(2) { animation-delay: .15s; }
.wa-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes wa-typing { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.wa-teaser .wa-teaser-msg { display: none; }
.wa-teaser.is-said .wa-dots { display: none; }
.wa-teaser.is-said .wa-teaser-msg { display: block; animation: wa-teaser-in .3s ease both; }
@media (max-width: 560px) { .wa-teaser { bottom: 84px; } }
@media (prefers-reduced-motion: reduce) {
  .float-wa, .float-wa::before, .float-wa::after, .float-wa .ico, .wa-teaser.is-in, .wa-teaser.is-out, .wa-dots i, .wa-teaser.is-said .wa-teaser-msg { animation: none; }
}
@keyframes ring { to { box-shadow: 0 0 0 16px rgba(19, 144, 90, 0); } }

/* ---------- footer ---------- */
.site-footer { background: var(--ink) var(--grain); }

/* ---------- motion (premium.js adds .motion only when the visitor allows motion) ---------- */
/* reveal uses the separate `translate` property so it never fights a card's own transform (hover lift, featured offset) */
.motion .rv { opacity: 0; translate: 0 22px; transition: opacity 1s var(--ease), translate 1s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease); transition-delay: var(--d, 0ms), var(--d, 0ms), 0ms, 0ms; }
.motion .rv.in { opacity: 1; translate: 0 0; }
.motion .rv.done { opacity: 1; translate: 0 0; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.motion .rv-fade { opacity: 0; transition: opacity 1.2s ease; transition-delay: var(--d, 0ms); }
.motion .rv-fade.in { opacity: 1; }
.motion .hero h1 .w { display: inline-block; opacity: 0; transform: translateY(.45em); animation: wordIn .9s var(--ease) forwards; animation-delay: calc(120ms + var(--i) * 55ms); }
@keyframes wordIn { to { opacity: 1; transform: none; } }
.motion .hero .lead, .motion .hero .checks, .motion .hero .hero-chip, .motion .hero .cta-row, .motion .hero .micro, .motion .hero .eyebrow { opacity: 0; animation: fadeUp 1s var(--ease) forwards; }
.motion .hero .eyebrow { animation-delay: 60ms; }
.motion .hero .lead { animation-delay: 520ms; }
.motion .hero .checks { animation-delay: 640ms; }
.motion .hero .hero-chip { animation-delay: 720ms; }
.motion .hero .cta-row { animation-delay: 780ms; }
.motion .hero .micro { animation-delay: 880ms; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.motion .hero-photo img { animation: photoIn 1.6s var(--ease) both; }
@keyframes photoIn { from { opacity: 0; transform: scale(1.04); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.motion .hero-photo::before { animation: frameIn 1.8s var(--ease) .3s both; }
@keyframes frameIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.motion .hello { animation: helloIn .8s var(--ease) both, float 6s ease-in-out infinite; }
.motion .hello-1 { animation-delay: 1s, 1.8s; }
.motion .hello-2 { animation-delay: 1.15s, 2.6s; }
.motion .hello-3 { animation-delay: 1.3s, 3.2s; }
.motion .hello-4 { animation-delay: 1.45s, 2.2s; }
@keyframes helloIn { from { opacity: 0; transform: translateY(10px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.motion .steps:not(.drawn) { --line-p: 0; }
@media (prefers-reduced-motion: reduce) { .read-progress { display: none; } }

/* safety net: once the intro has had time to play, everything in the hero is shown even if animations were paused */
.motion.hero-done .hero h1 .w, .motion.hero-done .hero .lead, .motion.hero-done .hero .checks, .motion.hero-done .hero .hero-chip,
.motion.hero-done .hero .cta-row, .motion.hero-done .hero .micro, .motion.hero-done .hero .eyebrow, .motion.hero-done .hero-photo img,
.motion.hero-done .hero-photo::before { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; }
.motion.hero-done .hello { opacity: 1; animation-name: none, float; }

/* phones: keep the first screen calm and the booking button in reach */
@media (max-width: 560px) {
  h1 { font-size: 2.15rem; }
  .hero { padding-top: 26px; }
  .hero .eyebrow { font-size: .66rem; letter-spacing: .12em; }
  .hero .eyebrow::before { width: 18px; }
  .hero .lead { font-size: 1.04rem; line-height: 1.6; }
  .hero .checks { gap: 6px; margin-top: 18px; }
  .hero .checks li { font-size: .95rem; line-height: 1.45; }
  .ex-panel .eyebrow { letter-spacing: .1em; font-size: .66rem; }
  .ex-tabs button { padding: 8px 12px; }
  .ex-t b { font-size: .9rem; }
  .section { padding-block: 72px; }
  #reviews::before { font-size: 14rem; }
}

/* ---------- service pages ---------- */
.persona-panel h3 { margin-bottom: 18px; }
.persona-panel .pain { position: relative; margin: 0 0 22px; padding: 0; border: 0; font: 500 clamp(1.25rem, 2.4vw, 1.6rem)/1.45 var(--font-head); font-style: italic; color: var(--ink); max-width: 640px; }
[dir="rtl"] .persona-panel .pain { font-family: var(--font-body); font-style: normal; font-weight: 600; }
.persona-panel .outcome { position: relative; display: flex; gap: 12px; align-items: flex-start; font-size: 1.08rem; color: var(--ink-2); font-weight: 500; margin: 0 0 28px; padding: 16px 18px; border-radius: 16px; background: var(--teal-soft); max-width: 640px; }
.persona-panel .outcome .ico { color: var(--teal); margin-top: .3em; }
.timeline li { background: var(--paper); border-color: var(--line); }
.section.alt .timeline li { background: var(--paper); }
.timeline li::after { border-color: var(--gold-2); }
.features li { border-color: var(--line); }
.features .ico-lg, .persona .ico-lg { background: var(--teal-soft); color: var(--teal); border-radius: 50%; }

/* folded extras (a lesson minute by minute, the long guide): open only if the visitor wants more */
.fold { margin-top: 28px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fold > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 20px 4px; cursor: pointer; font-weight: 650; color: var(--ink); transition: color .25s ease; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary span { display: inline-flex; align-items: center; gap: 10px; }
.fold > summary span .ico { color: var(--gold); }
.fold > summary > .ico { width: 30px; height: 30px; padding: 6px; border-radius: 50%; border: 1px solid var(--line); transition: transform .4s var(--ease), background-color .3s ease; }
.fold > summary:hover { color: var(--teal); }
.fold[open] > summary > .ico { transform: rotate(180deg); background: var(--ink); color: var(--gold-2); border-color: var(--ink); }
.fold-in { padding: 4px 0 28px; animation: panelIn .5s var(--ease) both; }
.fold-text { margin-top: 18px; }
.fold-text > summary { color: var(--teal); }
.lesson-card { background: var(--paper); border-color: var(--line); }
.mistakes li { border-color: var(--line); border-radius: 22px; }
.mistakes .num { background: var(--ink); color: var(--gold-2); }

/* ---------- language flags ---------- */
.flag { width: 22px; height: 15px; border-radius: 3px; flex: none; box-shadow: 0 0 0 1px rgba(16, 28, 42, .12); overflow: hidden; display: block; }
.lang summary { gap: 8px; }
.lang summary .flag { width: 20px; height: 14px; }
.lang ul { min-width: 210px; padding: 6px; border-radius: 16px; transform-origin: top right; }
[dir="rtl"] .lang ul { transform-origin: top left; }
.lang[open] ul { animation: popIn .28s var(--ease) both; }
@keyframes popIn { from { opacity: .4; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
.lang a { gap: 12px; padding: 10px 12px; font-weight: 550; }
.lang a .code { margin-inline-start: auto; width: auto; height: auto; padding: 2px 7px; background: transparent; color: var(--muted); border: 1px solid var(--line); font-size: .66rem; }
.lang a[aria-current="true"] { background: var(--gold-soft); color: var(--ink); }
.lang a[aria-current="true"] .code { border-color: var(--gold-2); color: var(--gold); }

/* ---------- burger that morphs into a close icon ---------- */
.burger { width: 46px; height: 46px; display: none; place-items: center; padding: 0; border-radius: 14px; background: var(--paper); transition: background-color .3s ease, border-color .3s ease; }
.burger-lines { position: relative; display: block; width: 20px; height: 14px; }
.burger-lines i { position: absolute; inset-inline: 0; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .45s var(--ease), opacity .25s ease, top .45s var(--ease), width .45s var(--ease); }
.burger-lines i:nth-child(1) { top: 0; }
.burger-lines i:nth-child(2) { top: 6px; width: 70%; }
.burger-lines i:nth-child(3) { top: 12px; }
.burger[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); }
.burger[aria-expanded="true"] .burger-lines i { background: var(--gold-2); }
.burger[aria-expanded="true"] .burger-lines i:nth-child(1) { top: 6px; transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger-lines i:nth-child(2) { opacity: 0; transform: translateX(-8px); }
.burger[aria-expanded="true"] .burger-lines i:nth-child(3) { top: 6px; transform: rotate(-45deg); }
.nav-foot { display: none; }

/* ---------- mobile menu: a curtain that unrolls, items follow one after another ---------- */
@media (max-width: 1280px) {
  .burger { display: grid; }
  .nav { display: flex !important; flex-direction: column; position: fixed; inset: 72px 0 0 0; height: calc(100dvh - 72px); margin: 0; padding: 18px var(--gutter) calc(24px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain;
    background: radial-gradient(120% 60% at 100% 0%, rgba(217, 178, 106, .14), transparent 60%), var(--bg); border: 0; box-shadow: none;
    clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .6s var(--ease), visibility 0s linear .6s; }
  .nav.open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .6s var(--ease), visibility 0s; }
  .nav > ul { gap: 0; }
  .nav > ul > li { border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(16px); transition: opacity .45s ease, transform .55s var(--ease); }
  .nav.open > ul > li { opacity: 1; transform: none; transition-delay: calc(120ms + var(--i, 0) * 45ms); }
  .nav > ul > li > a, .nav .menu summary { display: flex; align-items: center; justify-content: space-between; padding: 18px 4px; font: 600 1.35rem/1.2 var(--font-head); letter-spacing: -.01em; color: var(--ink); border-radius: 0; background: none; box-shadow: none; }
  [dir="rtl"] .nav > ul > li > a, [dir="rtl"] .nav .menu summary { font-family: var(--font-body); font-weight: 650; font-size: 1.2rem; }
  .nav > ul > li > a::after { content: "→"; font: 400 1.1rem var(--font-body); color: var(--gold); opacity: 0; transform: translateX(-8px); transition: opacity .3s ease, transform .3s var(--ease); }
  [dir="rtl"] .nav > ul > li > a::after { content: "←"; transform: translateX(8px); }
  .nav > ul > li > a:hover::after, .nav > ul > li > a[aria-current="page"]::after { opacity: 1; transform: none; }
  .nav > ul > li > a:hover, .nav > ul > li > a[aria-current="page"], .nav .menu summary:hover, .nav .menu summary.active { color: var(--teal); background: none; box-shadow: none; }
  .nav .menu summary .ico { width: 22px; height: 22px; color: var(--gold); transition: transform .4s var(--ease); }
  .nav .menu[open] > ul { padding: 0 0 14px 14px; animation: fadeUp .45s var(--ease) both; }
  [dir="rtl"] .nav .menu[open] > ul { padding: 0 14px 14px 0; }
  .nav .menu ul { background: none; border: 0; box-shadow: none; border-radius: 0; }
  .nav .menu ul a { font: 500 1.02rem var(--font-body); color: var(--ink-2); padding: 9px 12px; border-inline-start: 1px solid var(--gold-2); border-radius: 0; }
  .nav .menu ul a:hover, .nav .menu ul a[aria-current="page"] { color: var(--teal); background: none; }
  .nav-test a { background: none; color: var(--gold) !important; }
  .nav-foot { display: grid; gap: 16px; margin-top: auto; padding-top: 26px; opacity: 0; transform: translateY(16px); transition: opacity .45s ease, transform .55s var(--ease); }
  .nav.open .nav-foot { opacity: 1; transform: none; transition-delay: .45s; }
  .nav-foot .btn-wa, .nav-foot .btn-wa:hover { display: flex; justify-content: center; align-items: center; gap: .55em; padding: 1em 1.4em; border-radius: 999px; color: #fff; font: 650 1.02rem/1.2 var(--font-body); white-space: normal; background: linear-gradient(180deg, #13905a, #0d7344); }
  .nav-langs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .nav-langs a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: 14px; border: 1px solid var(--line); background: var(--paper); font: 700 .78rem var(--font-body); letter-spacing: .06em; color: var(--ink-2); text-decoration: none; transition: border-color .25s ease, transform .3s var(--ease); }
  .nav-langs a:active { transform: scale(.96); }
  .nav-langs a[aria-current="true"] { border-color: var(--gold-2); background: var(--gold-soft); color: var(--ink); }
  .nav-langs .flag { width: 28px; height: 19px; }
  .nav-open, .nav-open body { overflow: hidden; }
  .nav-open .site-header { background: var(--bg); border-bottom-color: var(--line); }
  .nav-open .float-wa { opacity: 0; pointer-events: none; }
}
.nav-quick { display: none; }
/* ---------- phone menu (2026-11-02): a dark panel that opens in a circle from the menu button; cards with prices, the free
   test, quick links and the trial lesson follow one after another, so everything is one tap away ---------- */
@media (max-width: 1280px) {
  .nav { background: radial-gradient(110% 60% at 100% 0%, rgba(217, 178, 106, .24), transparent 62%), radial-gradient(90% 55% at 0% 100%, rgba(19, 144, 90, .22), transparent 60%), #0f2427;
         color: #f3efe6; clip-path: circle(0% at calc(100% - 44px) -36px); transition: clip-path .7s var(--ease), visibility 0s linear .7s; }
  .nav.open { clip-path: circle(160% at calc(100% - 44px) -36px); transition: clip-path .75s var(--ease), visibility 0s; }
  .nav > ul { display: none; }
  .nav-quick { display: grid; gap: 14px; }
  .mq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .nav .mq-card { position: relative; display: grid; gap: 4px; align-content: start; min-height: 112px; padding: 16px 14px 14px; border-radius: 20px; text-decoration: none; color: #f3efe6;
             background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .12);
             opacity: 0; transform: translateY(18px) scale(.97); transition: opacity .5s ease, transform .6s var(--ease), border-color .25s ease, background-color .25s ease; }
  .nav.open .mq-card { opacity: 1; transform: none; transition-delay: calc(140ms + var(--i, 0) * 60ms); }
  .nav .mq-card:active { transform: scale(.97); }
  .nav .mq-card[aria-current="page"] { border-color: var(--gold-2); }
  .nav .mq-card .mq-ico { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: rgba(217, 178, 106, .16); color: var(--gold-2); margin-bottom: 6px; }
  .nav .mq-card .mq-ico .ico { width: 22px; height: 22px; }
  .nav .mq-card { min-width: 0; }
  .nav .mq-card strong { font: 600 1.08rem/1.2 var(--font-head); letter-spacing: -.01em; overflow-wrap: anywhere; hyphens: auto; }
  [dir="rtl"] .nav .mq-card strong { font-family: var(--font-body); font-weight: 700; }
  .nav .mq-card small { font-size: .82rem; color: rgba(243, 239, 230, .72); }
  .nav .mq-grid .mq-card:nth-child(odd):last-child:not(.mq-test) { grid-column: span 2; }
  .nav .mq-test { grid-column: span 2; min-height: 0; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px;
             background: linear-gradient(120deg, rgba(217, 178, 106, .34), rgba(217, 178, 106, .12)); border-color: rgba(217, 178, 106, .5); }
  .nav .mq-test .mq-ico { grid-row: span 2; margin: 0; background: var(--gold-2); color: #0f2427; }
  .mq-links { display: flex; flex-wrap: wrap; gap: 8px; opacity: 0; transform: translateY(12px); transition: opacity .45s ease, transform .55s var(--ease); }
  .nav.open .mq-links { opacity: 1; transform: none; transition-delay: .5s; }
  .nav .mq-links a { padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); color: #f3efe6; text-decoration: none; font: 600 .9rem var(--font-body); }
  .nav .mq-links a[aria-current="page"] { border-color: var(--gold-2); color: var(--gold-2); }
  .mq-trial { padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, .06); border: 1px dashed rgba(217, 178, 106, .45);
              opacity: 0; transform: translateY(12px); transition: opacity .45s ease, transform .55s var(--ease); }
  .nav.open .mq-trial { opacity: 1; transform: none; transition-delay: .58s; }
  .mq-trial p { margin: 0; font-size: .95rem; }
  .mq-trial strong { color: var(--gold-2); }
  .mq-note { display: flex; gap: 8px; align-items: center; margin-top: 6px !important; color: rgba(243, 239, 230, .78); font-size: .86rem !important; }
  .mq-note .ico { width: 16px; height: 16px; color: var(--gold-2); flex: none; }
  .nav-foot { margin-top: 4px; padding-top: 4px; }
  .nav.open .nav-foot { transition-delay: .64s; }
  .nav-langs a { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .14); color: rgba(243, 239, 230, .85); }
  .nav-langs a[aria-current="true"] { background: rgba(217, 178, 106, .16); border-color: var(--gold-2); color: #fff; }
}
@media (prefers-reduced-motion: reduce) { .nav, .nav > ul > li, .nav-foot, .mq-card, .mq-links, .mq-trial { transition: none !important; } }