/* =========================================================
   FE School — Clay/Diorama 3D system
   Ported directly from the app's real design tokens (farin-english-app.html)
   so the website and the app finally share one brand: solid "clay" surfaces
   with a glossy highlight + soft inset, a vivid coral accent, and the same
   deep teal-green ink — not a separate glassmorphic invention.
   DM Serif Display + Plus Jakarta Sans, spring-physics motion.
   ========================================================= */

:root{
  --bg-deep:#14201f;
  --cream:#fdfbf8;
  --cream-soft:#f0efe9;
  --bg-elevated:#ffffff;
  --surface: #ffffff;
  --surface-solid: #ffffff;
  --surface-border: #eeebe3;
  --ink:#14332e;
  --ink-soft:#4d6b66;
  --ink-faint:#8aa19c;
  --primary:#ff7a59;
  --primary-deep:#e85c3b;
  --primary-glow: rgba(255, 122, 89, 0.4);
  --gold:#FFA53D;
  --gold-deep:#E8790A;
  --gold-glow: rgba(255, 165, 61, 0.5);
  --teal:#4FC3E8;
  --teal-deep:#1F8FB0;
  --lavender:#A99BEA;
  --lavender-deep:#7C68D6;
  --peach:#FF6F5E;
  --peach-deep:#E44736;
  --sage:#8FAE85;
  --sage-deep:#5F8455;
  --border: var(--surface-border);
  --radius:28px;
  --radius-sm:18px;
  --wrap:1200px;
  --serif:'DM Serif Display', Georgia, 'Times New Roman', serif;
  --sans:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --shadow: 0 1px 2px rgba(20,51,46,.08), 0 8px 24px -12px rgba(20,51,46,.22);
  --shadow-lg: 0 4px 8px rgba(20,51,46,.1), 0 20px 45px -15px rgba(20,51,46,.3);
  --clay-shadow: inset 0 2px 3px rgba(255,255,255,.4), inset 0 -14px 22px -10px rgba(0,0,0,.2), 0 14px 30px -12px rgba(0,0,0,.32);
  --clay-shadow-soft: inset 0 1.5px 2px rgba(255,255,255,.8), inset 0 -8px 14px -10px rgba(20,51,46,.14), 0 10px 22px -15px rgba(20,51,46,.22);
  --clay-inset: inset 0 3px 6px -2px rgba(20,51,46,.16), inset 0 -1px 1px rgba(255,255,255,.6);
  --diorama-bg: radial-gradient(circle at 18% -8%, rgba(255,165,61,.12), transparent 38%), radial-gradient(circle at 102% 12%, rgba(124,147,255,.10), transparent 42%), radial-gradient(circle at 12% 96%, rgba(143,174,133,.10), transparent 40%);
  --spring: cubic-bezier(.34,1.56,.64,1);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark){
  :root{
    --cream:#14201f;
    --cream-soft:#0e1715;
    --bg-elevated:#1c2b28;
    --surface: #1c2b28;
    --surface-solid:#1c2b28;
    --surface-border: #2b433d;
    --ink:#eef5f2;
    --ink-soft:#a9c2bd;
    --ink-faint:#77938d;
    --primary:#ff8a6b;
    --primary-deep:#ffa382;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
    --shadow-lg: 0 6px 10px rgba(0,0,0,.35), 0 24px 50px -15px rgba(0,0,0,.55);
    --clay-shadow-soft: inset 0 1.5px 2px rgba(255,255,255,.12), inset 0 -8px 14px -10px rgba(0,0,0,.35), 0 10px 22px -15px rgba(0,0,0,.5);
    --clay-inset: inset 0 3px 6px -2px rgba(0,0,0,.4), inset 0 -1px 1px rgba(255,255,255,.08);
    --diorama-bg: radial-gradient(circle at 18% -8%, rgba(255,166,72,.07), transparent 38%), radial-gradient(circle at 102% 12%, rgba(124,147,255,.07), transparent 42%), radial-gradient(circle at 12% 96%, rgba(143,174,133,.06), transparent 40%);
  }
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  background: var(--diorama-bg), var(--cream);
  color:var(--ink);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font:inherit; }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 32px; }
@media (max-width:700px){ .wrap{ padding:0 16px; } }
section{ position:relative; isolation:isolate; padding:clamp(64px,10vw,120px) 0; }

h1,h2,h3{ font-family:var(--serif); font-weight:400; line-height:1.15; margin:0 0 .4em; color:var(--ink); }
h1{ font-size:clamp(2.4rem,5vw + .5rem,4.5rem); line-height:1.1; }
h2{ font-size:clamp(1.9rem,3vw + .6rem,3rem); line-height:1.2; }
h3{ font-size:1.3rem; }
p{ margin:0 0 1em; }
.lead{ font-size:clamp(1.05rem,1vw + .8rem,1.375rem); font-weight:500; color:var(--ink-soft); max-width:600px; }
.body-text{ font-size:1.0625rem; line-height:1.7; color:var(--ink-soft); }
.center{ text-align:center; margin-left:auto; margin-right:auto; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
::selection{ background:var(--gold-glow); color:var(--ink); }
.accent-italic{ font-family:var(--serif); font-style:italic; color:var(--primary); }

/* ---------- eyebrow ---------- */
.eyebrow{
  display:inline-block; font-family:var(--sans); font-weight:700; font-size:.75rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--primary); margin-bottom:16px;
}
.section-head{ max-width:680px; margin:0 auto 56px; text-align:center; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; cursor:pointer; text-decoration:none;
  font-family:var(--sans); font-weight:600; font-size:1rem; height:48px; padding:0 32px; border-radius:99px;
  transition:transform .3s var(--spring), box-shadow .3s var(--spring), border-color .2s ease, background .2s ease;
  white-space:nowrap;
}
.btn-primary{
  background:var(--primary);
  color:#fff;
  box-shadow: inset 0 1.5px 2px rgba(255,255,255,.45), inset 0 -5px 8px -3px rgba(0,0,0,.22), 0 8px 20px var(--primary-glow);
}
.btn-primary:hover{ transform:translateY(-3px) scale(1.02); box-shadow: inset 0 1.5px 2px rgba(255,255,255,.5), inset 0 -5px 8px -3px rgba(0,0,0,.22), 0 0 26px var(--gold-glow), 0 12px 26px var(--primary-glow); }
.btn-primary:active{ transform:translateY(1px) scale(.99); box-shadow: var(--clay-inset); }
.btn-cta{ background:var(--gold); color:var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 8px 20px var(--gold-glow); }
.btn-cta:hover{ transform:translateY(-3px) scale(1.02); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 0 26px var(--gold-glow), 0 12px 26px var(--gold-glow); }
.btn-ghost{ background:var(--surface-solid); color:var(--primary); border:2px solid var(--primary); }
.btn-dark{ background:var(--ink); color:var(--cream); box-shadow: inset 0 1.5px 2px rgba(255,255,255,.15), 0 8px 18px rgba(20,51,46,.35); }
.btn-dark:hover{ transform:translateY(-2px); background:color-mix(in srgb, var(--ink) 85%, black 15%); }
.btn-ghost:hover{ border-width:2.5px; transform:translateY(-2px); background:var(--surface); }
.btn-light{ background:#fff; color:var(--primary-deep); }
.btn-light:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,.14); }
.btn:active{ transform:scale(.97) !important; }
.btn-block{ width:100%; }
.btn-lg{ height:60px; padding:0 44px; font-size:1.1rem; font-weight:700; }

/* ---------- hero primary CTA — the one unmissable action on the page ---------- */
/* Uses .liquid-glass for its surface (translucent, frosted, reads over any photo/video);
   this rule only adds the CTA's size/motion, not its background. */
.hero-cta{ margin-top:28px; color:#fff; }
.hero-cta:hover{ transform:translateY(-4px) scale(1.03); box-shadow:inset 0 1px 1px rgba(255,255,255,.45), 0 16px 40px rgba(26,20,16,.3); }
.btn-sm{ height:40px; padding:0 22px; font-size:.9rem; }
.cta-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.center .cta-row, .cta-row.center{ justify-content:center; }
.icon-svg{ width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; }
@media (prefers-reduced-motion: reduce){ .btn{ transition:background .2s ease; } .btn:hover{ transform:none; } }

/* ---------- top announcement bar ---------- */
.topbar{
  background:var(--primary); color:#fff; text-align:center; font-weight:600; font-size:.85rem; padding:10px 14px;
}
.topbar a{ text-decoration:underline; text-underline-offset:2px; color:inherit; }

/* ---------- header ---------- */
header.site{
  position:sticky; top:0; z-index:60;
  background:rgba(253,251,248,.78);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--surface-border);
}
@media (prefers-color-scheme: dark){ header.site{ background:rgba(20,32,31,.78); } }
.nav{ display:flex; align-items:center; justify-content:space-between; padding:16px 24px; gap:16px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand .mark{ width:38px; height:38px; flex:none; border-radius:10px; }
.brand .word{ white-space:nowrap; font-family:var(--serif); font-size:1.25rem; color:var(--ink); }
.lang-chip{
  font-family:var(--sans); font-size:.68rem; font-weight:700; letter-spacing:.04em;
  background:var(--gold-glow); color:var(--gold-deep);
  padding:4px 10px; border-radius:99px; margin-left:2px; white-space:nowrap;
}
@media (max-width:420px){ .lang-chip{ display:none; } }
.nav-links{ display:flex; align-items:center; gap:30px; list-style:none; margin:0; padding:0; }
.nav-links a{ text-decoration:none; font-weight:600; font-size:.95rem; color:var(--ink-soft); transition:color .15s; }
.nav-links a:hover{ color:var(--primary); }
.nav-app-link{
  font-weight:700 !important; color:var(--gold-deep) !important;
  padding:6px 16px !important; border-radius:99px;
  background:var(--gold-glow); border:1.5px solid var(--gold);
}
.nav-app-link:hover{ transform:translateY(-1px); background:color-mix(in srgb, var(--gold) 55%, transparent); }
.nav-actions{ display:flex; align-items:center; gap:10px; }
.burger{ display:none; background:none; border:none; padding:8px; cursor:pointer; }
.burger span{ display:block; width:22px; height:2px; margin:5px 0; background:var(--ink); border-radius:2px; }

@media (max-width:900px){
  .nav-links{
    position:fixed; inset:66px 14px auto 14px; flex-direction:column; align-items:stretch;
    background:var(--surface-solid); border:1px solid var(--surface-border); border-radius:var(--radius-sm);
    padding:18px; box-shadow:var(--shadow-lg); backdrop-filter:blur(14px);
    transform:translateY(-14px); opacity:0; pointer-events:none; transition:all .25s var(--spring);
  }
  .nav-links.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .nav-links a{ padding:10px 6px; border-bottom:1px solid var(--surface-border); display:block; }
  .nav-links li:last-child a{ border-bottom:none; }
  .burger{ display:block; }
  .nav-actions .btn-primary span.long, .nav-actions .btn-dark span.long{ display:none; }
}

/* ---------- glass card (primary surface) ---------- */
.card{
  position:relative; background:var(--bg-elevated); border:1px solid var(--surface-border); border-radius:var(--radius);
  padding:32px 28px; overflow:hidden;
  box-shadow:var(--clay-shadow-soft);
  transition:transform .3s var(--spring), box-shadow .3s var(--spring), border-color .3s ease;
}
.card::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--primary); }
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg), var(--clay-shadow-soft); border-color:color-mix(in srgb, var(--primary) 40%, var(--surface-border)); }
.card p{ color:var(--ink-soft); margin-bottom:0; font-size:.97rem; }

/* ---------- blog-card — .card variant that's a whole clickable link,
   used on /blog/ index for article listings ---------- */
.blog-card{ display:block; text-decoration:none; }
.blog-card h3{ color:var(--ink); margin:0 0 10px; font-size:1.15rem; }
.blog-card p{ margin-bottom:14px; }
.blog-card .blog-read-more{ display:inline-flex; align-items:center; gap:4px; font-weight:700; font-size:.9rem; color:var(--primary); }
.blog-card:hover .blog-read-more{ text-decoration:underline; }

/* section tint */
.tint{ background:var(--cream-soft); }

/* ---------- floating 3D object — gentle idle drift ---------- */
.floating-3d{ animation:floatDrift 6s ease-in-out infinite; }
.floating-3d.delay-1{ animation-delay:-1.5s; }
.floating-3d.delay-2{ animation-delay:-3s; }
@keyframes floatDrift{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-14px) rotate(-1.2deg); }
}
@media (prefers-reduced-motion: reduce){
  .floating-3d{ animation:none; }
}

/* ---------- generic grids ---------- */
.grid{ display:grid; gap:24px; }
.grid.cols-5{ grid-template-columns:repeat(5,1fr); }
.grid.cols-4{ grid-template-columns:repeat(4,1fr); }
.grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.grid.cols-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:980px){ .grid.cols-5{ grid-template-columns:repeat(3,1fr); } .grid.cols-4{ grid-template-columns:repeat(2,1fr); } .grid.cols-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .grid.cols-5,.grid.cols-4,.grid.cols-3,.grid.cols-2{ grid-template-columns:1fr; } }

/* ---------- goal roadmap — compact flow for the FE Method:
   Hedef → Karakter → Yol Haritan → Pratik → Sonuç ---------- */
.goal-roadmap{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:8px; }
.goal-roadmap .rm-step{
  display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center;
  padding:18px 28px; border-radius:20px; min-width:130px;
  background:var(--surface); border:1px solid var(--surface-border); backdrop-filter:blur(12px);
  box-shadow:var(--shadow); transition:transform .3s var(--spring), box-shadow .3s var(--spring);
}
.goal-roadmap .rm-step:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.goal-roadmap .rm-num{
  display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%;
  background:var(--gold); color:#fff; font-family:var(--sans); font-weight:800; font-size:.85rem;
  box-shadow:var(--clay-shadow-soft); margin-bottom:2px;
}
.goal-roadmap .rm-step:nth-of-type(3) .rm-num{ background:var(--lavender); }
.goal-roadmap .rm-step:nth-of-type(4) .rm-num{ background:var(--peach); }
.goal-roadmap .rm-word{ font-weight:700; font-size:1.1rem; color:var(--ink); }
.goal-roadmap .rm-arrow{ flex:none; color:var(--gold-deep); font-size:1.5rem; line-height:1; }
.goal-roadmap .rm-step.is-final{ background:linear-gradient(155deg, var(--gold), var(--primary)); border-color:transparent; }
.goal-roadmap .rm-step.is-final .rm-word, .goal-roadmap .rm-step.is-final .rm-num{ color:#fff; }

/* ---------- method tagline — "goal decides what, character decides how" ---------- */
.method-tagline{ margin-top:26px; font-weight:600; }

/* ---------- tile — bold solid-color clay block, ported from the app's .tile/.goal-card.
   Used wherever a grid needs real color punch instead of white cards with a small icon. ---------- */
.tile{
  position:relative; overflow:hidden; border-radius:28px; padding:24px 24px 26px; text-align:left; color:var(--ink);
  display:flex; flex-direction:column; gap:8px; min-height:180px; justify-content:flex-end;
  background:var(--bg-elevated); border:1px solid var(--surface-border);
  box-shadow:var(--clay-shadow-soft);
  transition:transform .3s var(--spring), box-shadow .3s var(--spring);
}
.tile:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg), var(--clay-shadow-soft); }
.tile .tile-icon{
  width:48px; height:48px; display:flex; align-items:center; justify-content:center; color:#fff;
  border-radius:50%; background:var(--primary); margin-bottom:4px; box-shadow:var(--clay-shadow-soft);
}
.tile .tile-icon svg{ width:22px; height:22px; }
.tile .tile-icon img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.tile h3{ color:var(--ink); margin:0 0 2px; font-size:1.1rem; }
.tile p{ color:var(--ink-soft); margin:0; font-size:.9rem; }
.tile-orange .tile-icon{ background:var(--gold); }
.tile-coral .tile-icon{ background:var(--peach); }
.tile-lavender .tile-icon{ background:var(--lavender); }
.tile-sage .tile-icon{ background:var(--sage); }
.tile-sky .tile-icon{ background:var(--teal); }
.tile-sky{ background-color:var(--teal); background-image:radial-gradient(circle at 14% 10%, rgba(255,255,255,.4), transparent 46%), linear-gradient(155deg, #83d9f0, var(--teal-deep)); }

/* ---------- tile-expandable — click-to-expand variant of .tile, used by the
   homepage "system" cards (site.js toggles the .open class + max-height) ---------- */
.tile-expandable{ cursor:pointer; }
.tile-expandable:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }
.tile-more{ display:inline-flex; align-items:center; gap:4px; margin-top:2px; font-size:.78rem; font-weight:700; color:var(--primary); }
.tile-more .tile-plus{ display:inline-block; transition:transform .3s var(--spring); }
.tile-expandable.open .tile-more .tile-plus{ transform:rotate(45deg); }
.tile-detail{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.tile-detail p{ margin:10px 0 0; padding-top:10px; border-top:1px solid var(--surface-border); font-size:.85rem; color:var(--ink-soft); }

/* ---------- testimonials + stat callout ---------- */
.stat-callout{ display:flex; align-items:center; justify-content:center; gap:14px; margin:0 auto 44px; }
.stat-character{ width:90px; height:90px; object-fit:contain; filter:drop-shadow(0 12px 18px rgba(20,51,46,.2)); position:relative; z-index:1; }

/* ---------- deco-wrap — soft colored glow behind an accent character/icon image,
   carrying the hero's "floating object with a glow" motif into other sections ---------- */
.deco-wrap{ position:relative; display:inline-block; }
.deco-wrap::before{
  content:""; position:absolute; left:50%; top:50%; width:82%; height:82%; transform:translate(-50%,-50%);
  border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--gold) 42%, transparent), transparent 72%); z-index:-1;
}
.deco-wrap.deco-lavender::before{ background:radial-gradient(circle, color-mix(in srgb, var(--lavender) 42%, transparent), transparent 72%); }
.deco-wrap.deco-coral::before{ background:radial-gradient(circle, color-mix(in srgb, var(--peach) 42%, transparent), transparent 72%); }
.deco-wrap.deco-sage::before{ background:radial-gradient(circle, color-mix(in srgb, var(--sage) 42%, transparent), transparent 72%); }
.stat-callout .stat-number{ font-family:var(--serif); font-size:clamp(2.6rem,4vw + 1rem,4rem); color:var(--primary); font-weight:400; line-height:1; }
.stat-callout .stat-label{ font-weight:700; font-size:1.05rem; color:var(--ink-soft); }
.testimonial-card{ display:flex; flex-direction:column; gap:16px; }
.testimonial-grid .testimonial-card:nth-child(2)::before{ background:var(--gold); }
.testimonial-grid .testimonial-card:nth-child(3)::before{ background:var(--lavender); }
.testimonial-quote{ font-family:var(--serif); font-style:italic; font-size:1.05rem; line-height:1.5; color:var(--ink); margin:0; }
.testimonial-author{ margin:0; font-weight:700; font-size:.92rem; color:var(--ink); }
.testimonial-author span{ font-weight:600; color:var(--ink-soft); }

.ecosystem-anchor{ width:110px; height:110px; object-fit:contain; margin:0 auto 18px; display:block; filter:drop-shadow(0 14px 20px rgba(61,43,31,.2)); }

/* ---------- compact tag row reusing audience-tag look, for method environment chips ---------- */
.chip-row{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:760px; margin:28px auto 0; }
.chip-row .audience-tag{ font-size:.85rem; }
@media (max-width:760px){
  .goal-roadmap{ flex-direction:column; }
  .goal-roadmap .rm-arrow{ transform:rotate(90deg); }
}

/* ---------- WIZARD ---------- */
.wizard{
  background:var(--surface); border:1px solid var(--surface-border); border-radius:28px;
  backdrop-filter:blur(14px); box-shadow:var(--shadow-lg);
  padding:clamp(26px,4vw,48px); max-width:820px; margin:0 auto;
}
.wizard-progress{ display:flex; gap:6px; margin-bottom:28px; }
.wizard-progress i{ flex:1; height:4px; border-radius:99px; background:rgba(216,112,78,.15); overflow:hidden; font-style:normal; }
.wizard-progress i span{ display:block; height:100%; width:0; background:var(--primary); transition:width .4s var(--spring); }
.wizard-progress i.done span{ width:100%; }
.wizard-progress i.active span{ width:55%; }
.wizard-step-label{ font-weight:700; color:var(--primary); font-size:.78rem; text-transform:uppercase; letter-spacing:.14em; margin-bottom:8px; }
.wizard h3{ font-size:clamp(1.3rem,1.6vw + .6rem,1.7rem); margin-bottom:26px; }

/* ---------- wizard question options — vertical icon-list, matching the app's own quiz screens ---------- */
.opt-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:28px; }
.opt{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  padding:14px 18px; border-radius:20px; border:1.5px solid var(--surface-border); background:var(--surface-solid);
  cursor:pointer; transition:all .25s var(--spring);
}
.opt:hover{ border-color:var(--primary); transform:translateY(-2px); box-shadow:var(--shadow); }
.opt.selected{ border-color:var(--primary); background:linear-gradient(155deg, rgba(216,112,78,.14), rgba(232,185,79,.10)); box-shadow:0 0 0 3px var(--primary-glow); }
.opt-ic{ flex:none; width:46px; height:46px; border-radius:14px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:var(--surface); }
.opt-ic img{ width:100%; height:100%; object-fit:cover; }
.opt-ic.opt-ic-text{ font-family:var(--serif); font-weight:700; font-size:1rem; color:var(--primary); background:var(--primary-glow); }
.opt-text{ flex:1; min-width:0; }
.opt-main{ display:block; font-size:1rem; font-weight:700; }
.opt-sub{ display:block; color:var(--ink-soft); font-size:.85rem; margin-top:2px; }
.opt-check{ flex:none; color:var(--primary); font-weight:700; opacity:0; transition:opacity .2s; }
.opt.selected .opt-check{ opacity:1; }
.wizard-nav{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
.wizard-nav .spacer{ flex:1; }

.result-card{ text-align:center; }
.result-badge-ring{
  width:88px; height:88px; border-radius:50%; margin:0 auto 16px;
  background:linear-gradient(155deg, var(--gold), var(--primary)); box-shadow:0 10px 26px var(--gold-glow);
  display:flex; align-items:center; justify-content:center;
}
.result-badge{ font-family:var(--serif); font-style:italic; font-size:2.2rem; color:#fff; display:block; }
.result-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:28px 0; text-align:left; }
@media (max-width:640px){ .result-grid{ grid-template-columns:1fr; } }
.result-item{ background:var(--surface-solid); border:1px solid var(--surface-border); border-radius:var(--radius-sm); padding:16px; }
.result-item .k{ font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:var(--primary); margin-bottom:4px; }
.result-item .v{ font-weight:700; }
.result-plan{ background:linear-gradient(155deg, rgba(216,112,78,.12), rgba(155,139,196,.10)); border-radius:var(--radius-sm); padding:24px; margin-bottom:20px; text-align:left; }
.result-plan h4{ margin:0 0 6px; font-size:1.05rem; font-family:var(--serif); font-weight:400; }
.result-plan p{ margin:0; color:var(--ink-soft); font-size:.92rem; }

/* ---------- story game ---------- */
.story-box{
  max-width:720px; margin:0 auto; background:var(--surface); border:1px solid var(--surface-border);
  border-radius:28px; backdrop-filter:blur(14px); box-shadow:var(--shadow-lg); overflow:hidden;
}
.story-photo{ position:relative; overflow:hidden; }
.story-photo img{ width:100%; height:auto; max-height:260px; object-fit:cover; display:block; }
.story-scene{ padding:clamp(26px,4vw,44px); }
.story-tag{ font-family:var(--sans); display:inline-block; font-weight:700; font-size:.78rem; color:var(--primary-deep); background:var(--primary-glow); padding:5px 14px; border-radius:99px; margin-bottom:16px; }
.story-en{ font-family:var(--serif); font-size:1.35rem; margin:0 0 8px; }
.story-tr{ color:var(--ink-soft); margin-bottom:22px; }
.story-tip{ background:rgba(232,185,79,.12); border-left:3px solid var(--gold); padding:12px 16px; border-radius:10px; font-size:.92rem; margin-bottom:24px; }
.story-choices{ display:grid; gap:12px; }
.story-choice{
  text-align:left; padding:16px 18px; border-radius:var(--radius-sm); border:1.5px solid var(--surface-border);
  background:var(--surface-solid); cursor:pointer; font-weight:600; font-size:.98rem; transition:all .25s var(--spring);
}
.story-choice:hover{ border-color:var(--primary); transform:translateX(4px); }
.story-foot{ padding:16px clamp(26px,4vw,44px); border-top:1px solid var(--surface-border); display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; background:var(--cream-soft); }
.story-foot span{ font-size:.85rem; color:var(--ink-soft); font-weight:600; }

/* ---------- pricing / private classes ---------- */
.price-note{ text-align:center; max-width:640px; margin:0 auto 44px; color:var(--ink-soft); font-size:.95rem; }
.pricing-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; align-items:stretch; }
@media (max-width:980px){ .pricing-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .pricing-grid{ grid-template-columns:1fr; } }
.plan{
  background:var(--surface); border:1px solid var(--surface-border); border-radius:var(--radius); overflow:hidden;
  backdrop-filter:blur(12px); display:flex; flex-direction:column; position:relative; box-shadow:var(--shadow);
  transition:transform .3s var(--spring), box-shadow .3s var(--spring);
}
.plan:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.plan.popular{ border-color:rgba(216,112,78,.5); animation:planBreathe 3.4s ease-in-out infinite; }
@keyframes planBreathe{ 0%,100%{ box-shadow:var(--shadow); } 50%{ box-shadow:var(--shadow-lg), 0 0 30px var(--primary-glow); } }
@media (prefers-reduced-motion: reduce){ .plan.popular{ animation:none; } }
.plan-badge{ position:absolute; top:16px; right:16px; max-width:96px; text-align:center; line-height:1.25; background:rgba(255,255,255,.85); color:var(--ink); font-size:.68rem; font-weight:700; padding:5px 12px; border-radius:99px; }
.plan-head{ padding:26px 108px 18px 24px; position:relative; box-shadow:var(--clay-shadow-soft); }
.plan-head, .plan-head h3, .plan-head .sessions{ color:#fff; }
.plan-head h3{ margin:0; font-size:1.15rem; font-family:var(--sans); font-weight:700; }
.plan-head .sessions{ font-size:.82rem; font-weight:600; margin-top:4px; opacity:.92; }
.plan:nth-child(1) .plan-head{ background-color:var(--sage); background-image:radial-gradient(circle at 14% 10%, rgba(255,255,255,.4), transparent 46%); }
.plan:nth-child(2) .plan-head{ background-color:var(--teal); background-image:radial-gradient(circle at 14% 10%, rgba(255,255,255,.4), transparent 46%); }
.plan:nth-child(3) .plan-head{ background-color:var(--primary); background-image:radial-gradient(circle at 14% 10%, rgba(255,255,255,.4), transparent 46%); }
.plan:nth-child(4) .plan-head{ background-color:var(--gold); background-image:radial-gradient(circle at 14% 10%, rgba(255,255,255,.4), transparent 46%); }
.plan-body{ padding:24px; display:flex; flex-direction:column; gap:16px; flex:1; border-top:1px solid var(--surface-border); }
.plan-price{ display:flex; align-items:baseline; gap:6px; }
.plan-price .num{ font-family:var(--serif); font-size:2rem; }
.plan-price .unit{ font-weight:600; color:var(--ink-soft); font-size:.85rem; }
.plan-total{ font-size:.82rem; color:var(--ink-soft); margin-top:-10px; }
.plan-body ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; flex:1; }
.plan-body li{ font-size:.9rem; display:flex; gap:8px; align-items:flex-start; color:var(--ink-soft); }
.plan-body li::before{ content:"✓"; color:#fff; background:var(--teal); border-radius:50%; width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; font-size:.65rem; font-weight:900; flex:none; }

/* ---------- app promo (glass, floating phone) ---------- */
.app-promo{
  background:linear-gradient(155deg, rgba(216,112,78,.14), rgba(155,139,196,.10)), var(--surface);
  border:1px solid var(--surface-border); border-radius:32px; backdrop-filter:blur(14px);
  padding:clamp(36px,5vw,64px); overflow:hidden; position:relative; box-shadow:var(--shadow-lg);
}
.app-promo .grid{ grid-template-columns:1.1fr .9fr; align-items:center; position:relative; z-index:1; }
@media (max-width:900px){ .app-promo .grid{ grid-template-columns:1fr; } }
.app-promo h2{ color:var(--ink); }
.app-promo p.lead{ color:var(--ink-soft); max-width:520px; }
.app-qr{ display:flex; gap:18px; flex-wrap:wrap; margin-top:28px; }
.qr-card{ background:#fff; border-radius:16px; padding:12px; text-align:center; width:120px; box-shadow:var(--shadow); }
.qr-card img{ width:96px; height:96px; margin:0 auto; border-radius:6px; }
.qr-card span{ display:block; margin-top:6px; font-size:.68rem; font-weight:700; color:#111; }
.phone-mock-3d{ position:relative; margin:0 auto; max-width:280px; animation:phoneFloat 5s ease-in-out infinite; filter:drop-shadow(0 24px 40px rgba(61,43,31,.28)); }
.phone-mock-3d img{ width:100%; }
@keyframes phoneFloat{ 0%,100%{ transform:translateY(0) rotate(-2deg); } 50%{ transform:translateY(-16px) rotate(2deg); } }
@media (prefers-reduced-motion: reduce){ .phone-mock-3d{ animation:none; } }
.app-badge-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:24px; }
.app-badge{ font-size:.78rem; font-weight:700; padding:7px 16px; border-radius:99px; }
.app-badge.live{ background:var(--primary); color:#fff; }
.app-badge.soon{ background:transparent; border:1.5px solid var(--surface-border); color:var(--ink-soft); }

/* ---------- feature showcase — infinite-loop glass card marquee ---------- */
.feature-marquee{
  overflow:hidden; margin:0 calc(-1 * clamp(16px,4vw,32px)); padding:8px clamp(16px,4vw,32px) 20px;
  -webkit-mask-image:linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  mask-image:linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}
.feature-track{ display:flex; gap:22px; width:max-content; animation:featureMarquee 34s linear infinite; }
.feature-marquee:hover .feature-track{ animation-play-state:paused; }
@keyframes featureMarquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.feature-card{
  position:relative; flex:none; width:230px; display:flex; flex-direction:column; gap:14px;
  background:linear-gradient(155deg, rgba(255,255,255,.4), rgba(255,255,255,.12));
  border:1px solid rgba(255,255,255,.4); border-radius:var(--radius);
  backdrop-filter:blur(20px) saturate(1.4); -webkit-backdrop-filter:blur(20px) saturate(1.4);
  padding:28px 24px; box-shadow:0 8px 32px rgba(61,43,31,.14), inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .3s var(--spring), box-shadow .3s var(--spring);
}
.feature-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--gold); border-radius:var(--radius) var(--radius) 0 0; }
.feature-card:hover{ transform:translateY(-6px); box-shadow:0 16px 40px rgba(61,43,31,.2), inset 0 1px 0 rgba(255,255,255,.5); }
.feature-icon-wrap{
  width:64px; height:64px; border-radius:18px; flex:none;
  background:linear-gradient(155deg, rgba(216,112,78,.16), rgba(232,185,79,.16));
  display:flex; align-items:center; justify-content:center;
}
.feature-icon-wrap img{ width:38px; height:38px; object-fit:contain; filter:drop-shadow(0 6px 12px rgba(61,43,31,.18)); }
.feature-card h3{ margin:0; font-size:1.05rem; }
.feature-card p{ margin:0; color:var(--ink-soft); font-size:.92rem; }
@media (prefers-reduced-motion: reduce){ .feature-track{ animation:none; } }

/* ---------- course cards (3 Courses — Same System) — branded like the app itself:
   the app's own icon + ink/accent colors, flat "clay" gradients instead of photo textures ---------- */
.lang-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:820px){ .lang-grid{ grid-template-columns:1fr; } }
.lang-card{
  position:relative; display:flex; align-items:flex-start; justify-content:flex-start; text-decoration:none; color:#fff; aspect-ratio:3/4;
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--clay-shadow);
  background-image:radial-gradient(circle at 16% 10%, rgba(255,255,255,.4), transparent 46%);
  transition:transform .3s var(--spring), box-shadow .3s var(--spring);
  padding:18px;
}
.lang-card:hover{ transform:translateY(-8px); box-shadow:0 28px 55px rgba(20,51,46,.32), var(--clay-shadow); }
.lang-card.lc-en{ background-color:var(--peach); background-image:radial-gradient(circle at 16% 10%, rgba(255,255,255,.4), transparent 46%), linear-gradient(155deg, #ff9a7a, var(--peach-deep)); }
.lang-card.lc-es{ background-color:var(--gold); background-image:radial-gradient(circle at 16% 10%, rgba(255,255,255,.4), transparent 46%), linear-gradient(155deg, #ffc266, var(--gold-deep)); }
.lang-card.lc-de{ background-color:var(--teal); background-image:radial-gradient(circle at 16% 10%, rgba(255,255,255,.4), transparent 46%), linear-gradient(155deg, #83d9f0, var(--teal-deep)); }
.lang-card .app-mark{ width:44px; height:44px; transition:transform .5s var(--spring); filter:drop-shadow(0 6px 12px rgba(0,0,0,.18)); border-radius:12px; }
.lang-card:hover .app-mark{ transform:scale(1.08) translateY(-4px); }
.lang-card .lang-watermark{
  position:absolute; right:-.1em; top:38%; transform:translateY(-50%);
  font-family:var(--serif); font-size:8rem; font-weight:400; line-height:1;
  color:rgba(255,255,255,.22); pointer-events:none; user-select:none;
}
.lang-card .status-badge{
  position:absolute; top:16px; right:16px; z-index:2;
  background:rgba(20,51,46,.45); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.4); color:#fff; font-size:.68rem; font-weight:700; padding:5px 12px; border-radius:99px;
}
/* frosted-glass panel tinted with the app's own ink color, not the site's warm brown */
.lang-card .lang-body{
  position:absolute; left:14px; right:14px; bottom:14px; z-index:2;
  background:rgba(20,51,46,.55); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.25); border-radius:18px; box-shadow:0 8px 24px rgba(0,0,0,.18);
  padding:20px 20px 22px;
}
.lang-card .lang-name{ font-family:var(--serif); font-size:1.6rem; margin:0 0 6px; color:#fff; }
.lang-card .lang-body p{ color:rgba(255,255,255,.9); margin:0 0 10px; font-size:.92rem; }
.lang-card .lang-enter{ font-weight:700; font-size:.9rem; display:inline-flex; align-items:center; gap:6px; color:#fff; }
.lang-tags{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; }
.lang-tags span{ font-size:.72rem; font-weight:700; padding:3px 9px; border-radius:99px; background:rgba(255,255,255,.22); color:#fff; }

/* ---------- audience list ---------- */
.audience .card{ padding:24px 26px; }
.audience h3{ margin-bottom:4px; font-size:1.05rem; }
.audience p{ margin:0; font-size:.9rem; color:var(--ink-soft); }

/* ---------- audience tags (compact strip, folded into The Difference) ---------- */
.audience-tag{
  padding:11px 20px; border-radius:99px; font-weight:600; font-size:.88rem;
  background:var(--surface); border:1px solid var(--surface-border); backdrop-filter:blur(10px);
  color:var(--ink-soft);
}

/* ---------- FAQ ---------- */
.faq{ max-width:760px; margin:0 auto; display:grid; gap:14px; }
.faq-item{ background:var(--surface); border:1px solid var(--surface-border); border-radius:var(--radius-sm); overflow:hidden; backdrop-filter:blur(10px); }
.faq-q{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px; background:none; border:none; text-align:left; padding:20px 24px; cursor:pointer; font-weight:700; font-size:1rem; color:var(--ink); }
.faq-q .plus{ font-size:1.3rem; color:var(--primary); transition:transform .3s var(--spring); flex:none; font-weight:400; }
.faq-item.open .faq-q .plus{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-a p{ padding:0 24px 20px; color:var(--ink-soft); margin:0; font-size:.95rem; }

/* ---------- contact / footer ---------- */
.contact{
  position:relative; overflow:hidden; text-align:center;
  background:linear-gradient(155deg, var(--primary-deep), var(--primary) 60%, var(--lavender));
  border-radius:32px; padding:clamp(48px,6vw,80px) 24px; color:#fff; box-shadow:var(--shadow-lg);
}
.contact-visual{ width:100px; height:100px; object-fit:contain; margin:0 auto 18px; display:block; filter:drop-shadow(0 14px 20px rgba(0,0,0,.25)); }
.contact h2{ color:#fff; }
.contact p.lead{ color:rgba(255,255,255,.88); margin-left:auto; margin-right:auto; }
.contact .whatsapp-number{ margin-top:18px; font-weight:700; opacity:.95; }

.cross-lang{ text-align:center; padding:36px 0 0; }
.cross-lang p{ color:var(--ink-soft); font-size:.92rem; margin-bottom:14px; }
.cross-lang .links{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.cross-lang .links a{ text-decoration:none; font-weight:700; font-size:.88rem; padding:9px 18px; border-radius:99px; border:1.5px solid var(--surface-border); color:var(--ink-soft); background:var(--surface-solid); }
.cross-lang .links a:hover{ border-color:var(--primary); color:var(--primary); }

footer.site{ padding:64px 0 32px; border-top:1px solid var(--surface-border); }
.footer-grid{ display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; padding-bottom:32px; border-bottom:1px solid var(--surface-border); }
.footer-brand .brand{ margin-bottom:12px; }
.footer-brand p{ color:var(--ink-soft); font-size:.9rem; max-width:280px; }
.footer-social{ display:flex; gap:10px; margin-top:16px; }
.footer-social a{ width:36px; height:36px; border-radius:50%; background:var(--surface-solid); border:1px solid var(--surface-border); display:flex; align-items:center; justify-content:center; transition:transform .25s var(--spring), background .2s ease; }
.footer-social a:hover{ transform:translateY(-2px); background:var(--primary-glow); }
.footer-cols{ display:flex; gap:56px; flex-wrap:wrap; }
.footer-col h4{ font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; margin:0 0 14px; color:var(--ink-soft); font-weight:700; }
.footer-col a{ display:block; text-decoration:none; color:var(--ink); font-weight:600; font-size:.92rem; margin-bottom:10px; }
.footer-col a:hover{ color:var(--primary); }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding-top:22px; font-size:.82rem; color:var(--ink-soft); }

/* ---------- floating whatsapp ---------- */
.fab-whatsapp{
  position:fixed; right:24px; bottom:24px; z-index:70; width:56px; height:56px; border-radius:50%;
  background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px var(--primary-glow); text-decoration:none;
  transition:transform .3s var(--spring), box-shadow .3s var(--spring);
  animation:fabBreathe 3s ease-in-out infinite;
}
.fab-whatsapp:hover{ transform:translateY(-3px) scale(1.05); }
@keyframes fabBreathe{ 0%,100%{ box-shadow:0 10px 26px var(--primary-glow); } 50%{ box-shadow:0 14px 34px var(--gold-glow); } }
@media (prefers-reduced-motion: reduce){ .fab-whatsapp{ animation:none; } }
.fab-whatsapp .icon-svg{ width:22px; height:22px; }

/* =========================================================
   HERO — real 3D depth-parallax scene (perspective + translateZ)
   ========================================================= */
.hero-scene{
  position:relative; min-height:min(92vh,880px); display:flex; align-items:flex-end; justify-content:center;
  overflow:hidden; padding:120px 0 70px; isolation:isolate;
  perspective:1200px;
}
.hero-scene .layer{ position:absolute; inset:0; pointer-events:none; will-change:transform; }
.hero-scene .layer img, .hero-scene .layer video{ width:100%; height:100%; object-fit:cover; }
.hero-scene .layer-backdrop{ z-index:0; }
.hero-scene .layer-backdrop::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(26,20,16,0) 55%, var(--cream) 96%);
}
@media (prefers-color-scheme: dark){ .hero-scene .layer-backdrop::after{ background:linear-gradient(to bottom, rgba(26,20,16,0) 55%, var(--bg-deep) 96%); } }

.hero-particles{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.hero-particles span{ position:absolute; width:5px; height:5px; border-radius:50%; background:var(--gold); box-shadow:0 0 8px var(--gold-glow); animation:particleDrift 8s ease-in-out infinite; opacity:0; }
@keyframes particleDrift{ 0%{ transform:translateY(20px); opacity:0; } 20%{ opacity:.9; } 100%{ transform:translateY(-140px); opacity:0; } }
@media (prefers-reduced-motion: reduce){ .hero-particles span{ animation:none; opacity:.5; } }

.hero-content{ position:relative; z-index:4; text-align:center; width:100%; max-width:820px; margin:0 auto; padding:0 24px; }
.hero-content .eyebrow{ display:block; text-shadow:0 1px 3px rgba(0,0,0,.5), 0 2px 10px rgba(0,0,0,.35); }
.hero-content h1{
  margin-bottom:.42em; font-weight:400; color:#FFF9F0;
  font-size:clamp(2.8rem,6vw + 1rem,6.4rem); line-height:1.08; letter-spacing:-.01em;
  text-shadow:0 2px 4px rgba(0,0,0,.45), 0 6px 20px rgba(0,0,0,.3);
}
.hero-content .lead{ max-width:560px; margin:0 auto 32px; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.5), 0 3px 12px rgba(0,0,0,.35); }
.hero-content .cta-row{ margin-bottom:40px; }

/* ---------- hero-journey — homepage-only hero variant: warm gradient instead of a
   full-bleed photo, dark ink text, floating clay objects instead of a backdrop image.
   Scoped so english/spanish/german pages keep the original photo hero untouched. ---------- */
.hero-scene.hero-journey{
  align-items:center; justify-content:center;
  background: var(--diorama-bg), var(--cream);
  min-height:min(96vh,940px); padding:160px 0 90px;
}
.hero-journey .hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:32px; align-items:center; width:100%; }
.hero-journey .hero-content{ position:relative; z-index:4; text-align:left; width:100%; max-width:none; margin:0; padding:0; }
.hero-journey .hero-content .eyebrow{ color:var(--primary); text-shadow:none; }
.hero-journey .hero-content h1{ color:var(--ink); text-shadow:none; font-size:clamp(3rem,6.5vw + 1rem,7.2rem); }
.hero-journey .hero-content .lead{ margin:0 0 32px; color:var(--ink-soft); text-shadow:none; max-width:480px; font-size:clamp(1.1rem,1vw + .9rem,1.5rem); }
.hero-journey .hero-content .cta-row{ justify-content:flex-start; }
.hero-visual{ position:relative; display:flex; align-items:center; justify-content:center; min-height:460px; z-index:3; }
.hero-visual::before{
  content:""; position:absolute; width:380px; height:380px; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--gold) 42%, transparent), transparent 72%);
  z-index:0;
}
.hero-visual img{ max-width:300px; width:78%; filter:drop-shadow(0 30px 36px rgba(61,43,31,.28)); }
.hero-visual .hero-visual-character{ position:relative; z-index:2; max-width:420px; width:95%; }
.hero-visual .hero-visual-start{
  position:absolute; left:-2%; bottom:-2%; width:32%; max-width:150px; z-index:1;
  filter:drop-shadow(0 18px 22px rgba(61,43,31,.24));
}
@media (max-width:900px){
  .hero-journey .hero-grid{ grid-template-columns:1fr; text-align:center; }
  .hero-journey .hero-content{ text-align:center; }
  .hero-journey .hero-content .lead{ margin-left:auto; margin-right:auto; }
  .hero-journey .hero-content .cta-row{ justify-content:center; }
  .hero-visual{ min-height:240px; }
}
.hero-feature-line{ font-size:clamp(1.05rem,1vw + .8rem,1.35rem); font-weight:600; color:var(--ink-soft); margin:0 0 32px; }
.hero-feature-line .hl-orange{ font-weight:800; color:var(--gold-deep); }
.hero-trust-line{ margin-top:18px; font-size:.88rem; font-weight:700; color:var(--ink-soft); }
.hero-lang-pills-mini{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:26px; font-size:.88rem; color:var(--ink-soft); }
.hero-lang-pills-mini a{
  font-weight:700; color:var(--primary-deep); text-decoration:none; padding:4px 12px; border-radius:99px;
  background:var(--surface-solid); border:1px solid var(--surface-border);
}
.hero-lang-pills-mini a:hover{ background:var(--primary-glow); }
@media (max-width:900px){ .hero-lang-pills-mini{ justify-content:center; } }

/* ---------- liquid glass — cinematic translucent surface for the hero CTA (and anywhere
   else a frosted, barely-there panel reads better than a solid color, e.g. over video/photo) ---------- */
.liquid-glass{
  background:rgba(20,14,10,.34);
  backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border:none; box-shadow:inset 0 1px 1px rgba(255,255,255,.35), 0 12px 34px rgba(26,20,16,.22);
  position:relative; overflow:hidden;
}
.liquid-glass::before{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1.4px; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(255,255,255,.65) 0%, rgba(255,255,255,.2) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(255,255,255,.2) 80%, rgba(255,255,255,.65) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}

/* ---------- fade-rise — one-shot entrance animation for hero content, staggered per element ---------- */
@keyframes fade-rise{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:translateY(0); } }
.animate-fade-rise{ animation:fade-rise .8s ease-out both; }
.animate-fade-rise-delay{ animation:fade-rise .8s ease-out .2s both; }
.animate-fade-rise-delay-2{ animation:fade-rise .8s ease-out .4s both; }
.animate-fade-rise-delay-3{ animation:fade-rise .8s ease-out .6s both; }
.animate-fade-rise-delay-4{ animation:fade-rise .8s ease-out .8s both; }

/* ---------- reveal on scroll (spring pop-in) ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .5s ease, transform .6s var(--spring); }
.reveal.in{ opacity:1; transform:translateY(0); }
.grid.reveal > *, .pricing-grid.reveal > *, .lang-grid.reveal > *{
  opacity:0; transform:translateY(24px) scale(.94);
  transition:opacity .5s ease, transform .55s var(--spring);
}
.grid.reveal.in > *, .pricing-grid.reveal.in > *, .lang-grid.reveal.in > *{
  opacity:1; transform:translateY(0) scale(1);
}
.grid > *:nth-child(1),.pricing-grid > *:nth-child(1),.lang-grid > *:nth-child(1){ transition-delay:.03s; }
.grid > *:nth-child(2),.pricing-grid > *:nth-child(2),.lang-grid > *:nth-child(2){ transition-delay:.11s; }
.grid > *:nth-child(3),.pricing-grid > *:nth-child(3),.lang-grid > *:nth-child(3){ transition-delay:.19s; }
.grid > *:nth-child(4),.pricing-grid > *:nth-child(4){ transition-delay:.27s; }

/* ---------- global sparkles — magical dots that follow the whole scroll journey, not just the hero ---------- */
.global-sparkles{ position:fixed; inset:0; z-index:15; pointer-events:none; overflow:hidden; }
.global-sparkles span{
  position:absolute; width:4px; height:4px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 8px var(--gold-glow); opacity:0; animation:globalSparkle 9s ease-in-out infinite;
}
@keyframes globalSparkle{
  0%{ transform:translateY(0) scale(.6); opacity:0; }
  12%{ opacity:.9; }
  85%{ opacity:.7; }
  100%{ transform:translateY(-90vh) scale(1); opacity:0; }
}
@media (max-width:640px){ .global-sparkles span:nth-child(n+13){ display:none; } }
@media (prefers-reduced-motion: reduce){ .global-sparkles{ display:none; } }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ---- About Farin (homepage #hakkimda) ---- */
.about-grid{ display:grid; grid-template-columns:minmax(200px,340px) 1fr; gap:56px; align-items:center; max-width:960px; margin:0 auto; }
.about-photo{ width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow-lg); display:block; }
.about-body h2{ margin-bottom:.5em; }
.about-body p{ color:var(--ink-soft); }
.about-facts{ list-style:none; padding:0; margin:22px 0 0; display:flex; flex-wrap:wrap; gap:10px; }
.about-facts li{ padding:8px 16px; border-radius:999px; background:var(--surface); border:1px solid var(--surface-border); color:var(--ink); font-weight:600; font-size:.9rem; }
@media (max-width:760px){
  .about-grid{ grid-template-columns:1fr; gap:28px; }
  .about-photo{ max-width:280px; margin:0 auto; }
  .about-body{ text-align:center; }
  .about-facts{ justify-content:center; }
}

/* ---- language pages: "other languages" cards reuse the homepage lang-card, two per row ---- */
.lang-grid.two{ grid-template-columns:repeat(2,1fr); max-width:680px; margin:0 auto; }
@media (max-width:820px){
  .lang-grid.two{ grid-template-columns:1fr; max-width:380px; }
  .lang-grid.two .lang-card{ aspect-ratio:4/3; }
}
.cross-lang{ padding:56px 0 0; }
.cross-lang .section-head{ margin-bottom:36px; }

/* sky tile sits on a saturated teal gradient — use dark ink for readable text */
.tile-sky p, .tile-sky .tile-more{ color:var(--ink); }
.tile-sky .tile-detail p{ color:var(--ink); border-top-color:rgba(20,51,46,.25); }

/* =========================================================
   v4 - APP-FIRST REDESIGN (2026-10-07)
   Scoped to body.v4 so the blog and legal pages, which still use the
   older components above, are unaffected. Fredoka (the app's own display
   face) + Plus Jakarta Sans; vivid app colours; chunky "pressable"
   buttons; real app screens instead of feature paragraphs.
   ========================================================= */
body.v4{
  --v-purple:#7C5CFC; --v-purple-deep:#5B3FE0;
  --v-coral:#FF6B4A; --v-coral-deep:#E2502F;
  --v-sun:#FFC23D; --v-sun-deep:#D99A12;
  --v-mint:#2EC4A6; --v-pink:#FF5FA2; --v-blue:#5B7CFF;
  --v-round:'Fredoka', 'Plus Jakarta Sans', system-ui, sans-serif;
  background:var(--cream);
}
body.v4 h1, body.v4 h2, body.v4 h3, body.v4 .brand .word{ font-family:var(--v-round); font-weight:700; letter-spacing:-.01em; }
body.v4 h1{ font-size:clamp(2.4rem,4.4vw + .5rem,4.3rem); line-height:1.04; }
body.v4 h2{ font-size:clamp(1.85rem,3.2vw + .7rem,3.05rem); line-height:1.08; }
body.v4 h3{ font-size:1.2rem; line-height:1.2; }
body.v4 section{ padding:clamp(56px,8vw,100px) 0; }
body.v4 .eyebrow{ font-family:var(--sans); font-weight:800; letter-spacing:.14em; color:var(--v-coral); margin-bottom:12px; }
body.v4 .lead{ max-width:560px; }
body.v4 .section-head{ margin-bottom:40px; }
body.v4 .section-head .lead{ margin-left:auto; margin-right:auto; }
body.v4 .tint{ background:var(--cream-soft); }

/* topbar + header */
body.v4 .topbar{ background:var(--v-purple-deep); font-size:.84rem; }
body.v4 .topbar a{ font-weight:800; }
body.v4 .nav{ padding:12px 24px; }
body.v4 .nav-links{ gap:24px; }
body.v4 .nav-links a{ font-weight:700; }
@media (max-width:420px){ body.v4 .nav{ padding:10px 14px; } body.v4 .nav-actions .v-btn{ padding:0 14px; } }

/* buttons: one chunky, pressable style everywhere */
.v-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--v-round); font-weight:700; font-size:1.08rem; line-height:1.1; text-align:center;
  min-height:54px; padding:0 28px; border-radius:18px; text-decoration:none; border:0; cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, filter .2s ease;
}
.v-btn:hover{ filter:brightness(1.04); transform:translateY(-1px); }
.v-btn:active{ transform:translateY(4px); }
.v-btn-sun{ background:var(--v-sun); color:#1d1a14; box-shadow:0 5px 0 var(--v-sun-deep), 0 14px 28px -10px rgba(217,154,18,.6); }
.v-btn-sun:active{ box-shadow:0 1px 0 var(--v-sun-deep); }
.v-btn-coral{ background:var(--v-coral); color:#fff; box-shadow:0 5px 0 var(--v-coral-deep), 0 14px 28px -10px rgba(226,80,47,.55); }
.v-btn-coral:active{ box-shadow:0 1px 0 var(--v-coral-deep); }
.v-btn-white{ background:#fff; color:#1d1a14; box-shadow:0 5px 0 #d9d3c7; }
.v-btn-white:active{ box-shadow:0 1px 0 #d9d3c7; }
.v-btn-ghost{ background:rgba(255,255,255,.14); color:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,.55); }
.v-btn-line{ background:var(--surface-solid); color:var(--ink); box-shadow:inset 0 0 0 2px var(--surface-border), 0 5px 0 var(--surface-border); }
.v-btn-sm{ min-height:42px; padding:0 18px; font-size:.95rem; border-radius:14px; }
.v-ctas{ display:flex; flex-wrap:wrap; gap:16px 12px; align-items:center; }
.v-micro{ font-size:.85rem; font-weight:600; color:var(--ink-soft); margin:14px 0 0; }
.v-link{ font-weight:800; color:var(--v-coral-deep); text-decoration:none; border-bottom:2px solid currentColor; padding-bottom:1px; }
.v-link:hover{ color:var(--v-coral); }
.v-center{ text-align:center; }
.v-center .v-ctas{ justify-content:center; }
.v-below{ margin-top:36px; }

/* hero */
body.v4 .v-hero{ position:relative; overflow:hidden; background:var(--v-purple); color:#fff; padding:clamp(44px,7vw,84px) 0 0;
  background-image:radial-gradient(circle at 12% 18%, rgba(255,255,255,.18), transparent 34%), radial-gradient(circle at 92% 82%, rgba(255,194,61,.35), transparent 38%); }
.v-hero::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:44px; background:var(--cream); border-radius:44px 44px 0 0; z-index:2; }
.v-hero-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:end; position:relative; z-index:1; }
.v-hero-copy{ padding-bottom:100px; }
body.v4 .v-hero .eyebrow{ color:var(--v-sun); }
.v-hero h1{ color:#fff; margin-bottom:18px; }
.v-hero h1 em{ font-style:normal; color:var(--v-sun); }
.v-hero .v-sub{ font-size:clamp(1.1rem,1vw + .85rem,1.4rem); font-weight:600; color:rgba(255,255,255,.94); max-width:520px; margin-bottom:28px; }
.v-hero .v-micro{ color:rgba(255,255,255,.82); }
.v-hero .v-link{ color:#fff; }
.v-langs{ display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 0; align-items:center; }
.v-langs a{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:99px; background:rgba(255,255,255,.16); color:#fff; font-weight:800; font-size:.9rem; text-decoration:none; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35); }
.v-langs a:hover{ background:rgba(255,255,255,.26); }
.v-hero-art{ position:relative; display:flex; justify-content:center; align-items:flex-end; min-height:440px; }
.v-hero-art .v-phone{ width:min(290px,70vw); margin-bottom:-60px; transform:rotate(3deg); z-index:1; }
.v-hero-art .v-phone.v-phone-back{ position:absolute; left:0; bottom:120px; width:min(210px,50vw); transform:rotate(-8deg); z-index:0; }
@media (max-width:900px){
  .v-hero-grid{ grid-template-columns:1fr; gap:4px; }
  .v-hero-copy{ padding-bottom:8px; }
  .v-hero-art{ min-height:0; padding-top:20px; height:330px; overflow:hidden; align-items:flex-start; }
  .v-hero-art .v-phone{ width:min(250px,66vw); margin-bottom:0; }
  .v-hero-art .v-phone.v-phone-back{ display:none; }
}

/* phone frame around a real screenshot */
.v-phone{ position:relative; border-radius:38px; padding:9px; background:#17142a; box-shadow:0 30px 60px -24px rgba(23,20,42,.55), inset 0 0 0 2px #2c2850; }
.v-phone img{ width:100%; height:auto; border-radius:30px; display:block; background:#fff; }

/* how it works - 3 real screens */
.v-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; counter-reset:vstep; }
.v-step{ text-align:center; margin:0; }
.v-step .v-phone{ width:min(230px,66vw); margin:0 auto 22px; }
.v-step h3{ margin:0 0 4px; }
.v-step h3::before{ counter-increment:vstep; content:counter(vstep); display:inline-flex; width:32px; height:32px; margin-right:10px; border-radius:10px; align-items:center; justify-content:center; background:var(--v-coral); color:#fff; font-size:1rem; vertical-align:2px; box-shadow:0 3px 0 var(--v-coral-deep); }
.v-step:nth-child(2) h3::before{ background:var(--v-purple); box-shadow:0 3px 0 var(--v-purple-deep); }
.v-step:nth-child(3) h3::before{ background:var(--v-mint); box-shadow:0 3px 0 #1f9a82; }
.v-step p{ color:var(--ink-soft); font-weight:600; margin:0; }
@media (max-width:820px){
  .v-steps{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:16px; margin:0 -16px; padding:0 16px 14px; scrollbar-width:none; }
  .v-steps::-webkit-scrollbar{ display:none; }
  .v-step{ flex:0 0 68%; scroll-snap-align:center; }
  .v-step .v-phone{ width:100%; border-radius:28px; padding:7px; }
  .v-step .v-phone img{ border-radius:22px; }
}

/* SELIF chips */
.v-selif{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.v-chip{ border-radius:22px; padding:20px 18px; background:var(--surface-solid); box-shadow:inset 0 0 0 2px var(--surface-border), 0 6px 0 var(--surface-border); }
.v-chip h3{ display:flex; align-items:center; gap:10px; font-size:1.12rem; margin:0 0 6px; color:var(--ink); }
.v-chip h3 span{ width:38px; height:38px; flex:none; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:1.25rem; }
.v-chip p{ margin:0; color:var(--ink-soft); font-weight:600; font-size:.95rem; line-height:1.45; }
.v-chip:nth-child(1) h3 span{ background:var(--v-coral); }
.v-chip:nth-child(2) h3 span{ background:var(--v-pink); }
.v-chip:nth-child(3) h3 span{ background:var(--v-sun); color:#1d1a14; }
.v-chip:nth-child(4) h3 span{ background:var(--v-blue); }
.v-chip:nth-child(5) h3 span{ background:var(--v-mint); }
@media (max-width:980px){ .v-selif{ grid-template-columns:repeat(2,1fr); } .v-chip:last-child{ grid-column:1/-1; } }
@media (max-width:480px){ .v-chip{ padding:14px 12px; } .v-chip h3{ font-size:1rem; gap:8px; } .v-chip h3 span{ width:30px; height:30px; font-size:1rem; border-radius:9px; } .v-chip p{ font-size:.86rem; } }

/* games */
.v-band-sun{ background:#FFF1CC; }
@media (prefers-color-scheme: dark){ .v-band-sun{ background:#2a2412; } }
.v-game-shots{ display:flex; justify-content:center; gap:22px; margin:0 auto 44px; }
.v-game-shots figure{ margin:0; width:min(210px,30vw); text-align:center; }
.v-game-shots figure:nth-child(1){ transform:rotate(-3deg); }
.v-game-shots figure:nth-child(3){ transform:rotate(3deg); }
.v-game-shots figcaption{ font-family:var(--v-round); font-weight:700; margin-top:12px; color:var(--ink); }
.v-games{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.v-game{ border-radius:20px; padding:18px 18px 16px; color:#fff; position:relative; overflow:hidden; min-height:108px;
  box-shadow:inset 0 2px 2px rgba(255,255,255,.35), inset 0 -10px 18px -10px rgba(0,0,0,.25), 0 6px 0 rgba(0,0,0,.14); }
.v-game h3{ color:inherit; margin:0 0 6px; font-size:1.15rem; }
.v-game p{ margin:0; font-weight:600; font-size:.92rem; line-height:1.4; }
.v-game::after{ content:""; position:absolute; right:-18px; top:-18px; width:70px; height:70px; border-radius:50%; background:rgba(255,255,255,.16); }
.v-game.g1{ background:var(--v-coral); } .v-game.g2{ background:var(--v-purple); } .v-game.g3{ background:var(--v-blue); }
.v-game.g4{ background:#13917a; } .v-game.g5{ background:var(--v-sun); color:#1d1a14; } .v-game.g6{ background:#E23E86; }
.v-game.g7{ background:#17142a; }
.v-game.v-game-cta{ background:var(--surface-solid); color:var(--ink); display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:10px; box-shadow:inset 0 0 0 2px var(--surface-border), 0 6px 0 var(--surface-border); }
.v-game.v-game-cta::after{ display:none; }
@media (max-width:900px){ .v-games{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .v-game-shots{ gap:10px; } .v-game-shots figure{ width:31%; } .v-game-shots figcaption{ font-size:.82rem; } .v-game-shots .v-phone{ border-radius:20px; padding:5px; } .v-game-shots .v-phone img{ border-radius:16px; } }
@media (max-width:380px){ .v-games{ grid-template-columns:1fr; } }

/* personalisation compare */
.v-compare{ display:flex; justify-content:center; gap:clamp(16px,4vw,48px); align-items:flex-start; }
.v-compare figure{ margin:0; width:min(280px,44vw); text-align:center; }
.v-tag{ display:inline-block; margin-top:16px; padding:8px 16px; border-radius:99px; font-weight:800; font-size:.95rem; background:var(--v-purple); color:#fff; }
.v-compare figure:nth-child(2) .v-tag{ background:var(--v-coral-deep); }
@media (max-width:480px){ .v-compare .v-phone{ border-radius:24px; padding:6px; } .v-compare .v-phone img{ border-radius:19px; } .v-tag{ font-size:.82rem; padding:6px 10px; } }

/* split rows (text + visual) */
.v-split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px); align-items:center; }
.v-split .v-phone{ width:min(270px,70vw); margin:0 auto; }
.v-split.flip > :first-child{ order:2; }
@media (max-width:860px){ .v-split, .v-split.flip{ grid-template-columns:1fr; } .v-split.flip > :first-child{ order:0; } }

/* teacher band */
.v-teacher{ background:var(--v-mint); color:#0f2f29; border-radius:36px; padding:clamp(28px,5vw,56px); display:grid; grid-template-columns:1.2fr .8fr; gap:32px; align-items:center; }
.v-teacher h2{ color:#0f2f29; }
body.v4 .v-teacher .eyebrow{ color:#0f2f29; opacity:.8; }
.v-teacher p{ font-weight:600; font-size:1.08rem; }
.v-teacher .v-micro{ color:#0f2f29; opacity:.9; }
.v-teacher .v-link{ color:#0f2f29; }
.v-teacher-card{ background:#fff; border-radius:26px; padding:24px; color:#14332e; box-shadow:0 18px 40px -20px rgba(0,0,0,.35); }
.v-teacher-card ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; font-weight:700; }
.v-teacher-card li{ display:flex; justify-content:space-between; gap:10px; border-bottom:1px dashed rgba(20,51,46,.18); padding-bottom:8px; }
.v-teacher-card li:last-child{ border-bottom:0; padding-bottom:0; }
.v-teacher-card li span:last-child{ color:var(--v-coral-deep); text-align:right; }
@media (max-width:860px){ .v-teacher{ grid-template-columns:1fr; border-radius:28px; } }

/* goals tiles (language pages) */
.v-goals{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.v-goal{ display:block; text-decoration:none; color:var(--ink); background:var(--surface-solid); border-radius:24px; padding:18px 14px; text-align:center;
  box-shadow:inset 0 0 0 2px var(--surface-border), 0 6px 0 var(--surface-border); transition:transform .15s ease; }
a.v-goal:hover{ transform:translateY(-3px); }
.v-goal img{ width:84px; height:84px; object-fit:contain; margin:0 auto 8px; }
.v-goal h3{ margin:0 0 4px; font-size:1.08rem; }
.v-goal p{ margin:0; font-size:.88rem; font-weight:600; color:var(--ink-soft); line-height:1.4; }
.v-goal .v-goal-more{ display:inline-block; margin-top:8px; font-weight:800; font-size:.85rem; color:var(--v-coral-deep); }
@media (max-width:980px){ .v-goals{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:600px){ .v-goals{ grid-template-columns:repeat(2,1fr); } }

/* moments tiles (business / IELTS) */
.v-moments{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.v-moment{ border-radius:22px; padding:20px; background:var(--surface-solid); box-shadow:inset 0 0 0 2px var(--surface-border), 0 6px 0 var(--surface-border); border-top:6px solid var(--v-coral); }
.v-moment:nth-child(2){ border-top-color:var(--v-purple); } .v-moment:nth-child(3){ border-top-color:var(--v-mint); }
.v-moment:nth-child(4){ border-top-color:var(--v-sun); } .v-moment:nth-child(5){ border-top-color:var(--v-pink); } .v-moment:nth-child(6){ border-top-color:var(--v-blue); }
.v-moment h3{ margin:0 0 4px; }
.v-moment p{ margin:0; font-weight:600; color:var(--ink-soft); }
@media (max-width:860px){ .v-moments{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:440px){ .v-moments{ grid-template-columns:1fr; } }

/* packages: reuse .pricing-grid/.plan, tuned for v4 */
body.v4 .plan{ border-radius:24px; }
body.v4 .plan-head h3{ font-family:var(--v-round); font-size:1.25rem; }
body.v4 .plan-head{ padding:22px 24px 16px; }
body.v4 .plan-price .num{ font-family:var(--v-round); font-weight:700; }
body.v4 .plan-body > p{ margin:0; font-weight:600; color:var(--ink-soft); flex:1; }
body.v4 .plan .v-btn{ width:100%; }

/* proof block (homepage; content kept unchanged per Farin's 2026-09-19 decision) */
.v-proof{ display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:center; }
.v-proof .stat-callout{ margin:0; }
.v-proof .testimonial-grid{ grid-template-columns:repeat(3,1fr); }
body.v4 .testimonial-card{ border-radius:22px; padding:22px; }
body.v4 .testimonial-quote{ font-family:var(--sans); font-style:normal; font-size:.98rem; }
@media (max-width:980px){ .v-proof{ grid-template-columns:1fr; } }
@media (max-width:760px){ .v-proof .testimonial-grid{ grid-template-columns:1fr; } }

/* studio strip */
.v-rooms{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.v-rooms figure{ margin:0; border-radius:22px; overflow:hidden; background:#17142a; color:#fff; box-shadow:0 18px 40px -22px rgba(0,0,0,.5); }
.v-rooms img{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; display:block; }
.v-rooms figcaption{ padding:12px 16px 14px; font-weight:700; display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; font-size:.95rem; }
.v-rooms figcaption span{ color:var(--v-mint); font-size:.85rem; }
@media (max-width:760px){
  .v-rooms{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; margin:0 -16px; padding:0 16px 14px; scrollbar-width:none; }
  .v-rooms::-webkit-scrollbar{ display:none; }
  .v-rooms figure{ flex:0 0 80%; scroll-snap-align:center; }
}

/* founder */
.v-founder{ display:grid; grid-template-columns:200px 1fr; gap:36px; align-items:center; max-width:860px; margin:0 auto; }
.v-founder img{ width:200px; height:200px; border-radius:36px; object-fit:cover; transform:rotate(-3deg); box-shadow:0 8px 0 var(--v-sun), 0 24px 40px -20px rgba(0,0,0,.4); }
.v-founder p{ font-size:1.08rem; color:var(--ink-soft); font-weight:500; }
.v-facts{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:16px 0 0; padding:0; }
.v-facts li{ padding:7px 14px; border-radius:99px; background:var(--surface-solid); box-shadow:inset 0 0 0 2px var(--surface-border); font-weight:700; font-size:.9rem; }
@media (max-width:700px){ .v-founder{ grid-template-columns:1fr; text-align:center; } .v-founder img{ width:160px; height:160px; margin:0 auto; } .v-facts{ justify-content:center; } }

/* final CTA */
.v-final{ background:var(--v-purple); color:#fff; border-radius:40px; padding:clamp(40px,6vw,72px) 22px; text-align:center; position:relative; overflow:hidden;
  background-image:radial-gradient(circle at 85% 10%, rgba(255,194,61,.35), transparent 40%), radial-gradient(circle at 8% 90%, rgba(255,255,255,.15), transparent 35%); }
.v-final h2{ color:#fff; }
.v-final p{ color:rgba(255,255,255,.92); font-weight:600; font-size:1.1rem; }
.v-final .v-link{ color:#fff; }
.v-final .v-tagline{ margin:28px auto 0; font-family:var(--v-round); font-weight:600; font-size:1.08rem; color:var(--v-sun); max-width:520px; }
@media (max-width:600px){ .v-final{ border-radius:28px; } }

/* FAQ with native details (indexable, no JS) */
.v-faq{ max-width:780px; margin:0 auto; display:grid; gap:12px; }
.v-faq details{ background:var(--surface-solid); border-radius:20px; box-shadow:inset 0 0 0 2px var(--surface-border); padding:0 22px; }
.v-faq summary{ cursor:pointer; list-style:none; font-family:var(--v-round); font-weight:600; font-size:1.1rem; padding:18px 30px 18px 0; position:relative; }
.v-faq summary::-webkit-details-marker{ display:none; }
.v-faq summary::after{ content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%); font-size:1.5rem; color:var(--v-coral); transition:transform .2s ease; }
.v-faq details[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.v-faq details p{ margin:0 0 18px; color:var(--ink-soft); font-weight:500; }

/* footer + misc */
body.v4 .footer-brand p{ max-width:300px; }
body.v4 .v-foot-tag{ font-family:var(--v-round); font-weight:600; color:var(--ink); }
body.v4 .story-box{ border-radius:28px; }
body.v4 .fab-whatsapp{ background:#25a95a; }
.v-hero-portrait img, .v-hero-still img{ display:block; margin-bottom:100px; box-shadow:0 10px 0 var(--v-sun), 0 30px 60px -24px rgba(23,20,42,.55); }
.v-hero-portrait img{ width:min(320px,70vw); height:auto; aspect-ratio:1/1; object-fit:cover; border-radius:40px; transform:rotate(3deg); }
.v-hero-still img{ width:100%; height:auto; border-radius:28px; transform:rotate(2deg); }
@media (max-width:900px){
  .v-hero-art.v-hero-portrait, .v-hero-art.v-hero-still{ height:auto; overflow:visible; padding:16px 0 0; }
  .v-hero-portrait img, .v-hero-still img{ margin-bottom:64px; }
  .v-hero-portrait img{ width:min(240px,60vw); }
}
body.v4 .stat-callout .stat-number{ font-family:var(--v-round); font-weight:700; }
body.v4 .plan:nth-child(1) .plan-head{ background-color:#13917a; }
body.v4 .plan:nth-child(2) .plan-head{ background-color:var(--v-blue); }
body.v4 .plan:nth-child(3) .plan-head{ background-color:var(--v-coral); }
body.v4 .plan:nth-child(4) .plan-head{ background-color:var(--v-purple); }
@media (max-width:600px){ .v-goal:last-child:nth-child(odd){ grid-column:1/-1; } }

/* Student Club strip above the package cards (Farin, me LO6PjZ9H, 2026-10-07) */
.v-club{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:880px; margin:0 auto 34px; }
.v-club > div{ border-radius:22px; padding:18px 20px; background:var(--surface-solid); box-shadow:inset 0 0 0 2px var(--surface-border), 0 6px 0 var(--surface-border); }
.v-club h3{ font-size:1.08rem; margin:0 0 4px; color:var(--ink); }
.v-club p{ margin:0; color:var(--ink-soft); font-weight:600; font-size:.95rem; line-height:1.45; }
.v-club > div:nth-child(2){ box-shadow:inset 0 0 0 2px var(--v-coral, var(--primary)), 0 6px 0 var(--surface-border); }
body.v4 .v-club-pk{ display:block; text-align:center; margin:0 0 16px; }
body.v4 .plan.has-badge .plan-head{ padding-right:112px; }
body.v4 .plan-badge{ z-index:2; }
@media (max-width:760px){ .v-club{ grid-template-columns:1fr; gap:10px; } }

/* =========================================================
   v5 - DESIGN + UX PASS (2026-10-14, Farin me YY060hXe + oztXBT0S)
   1. One real phone frame for every app screen: a fixed 390x844 screen,
      the screenshot fitted to it (no stretch, no odd crop), bezel and
      island that scale with the phone width (container units).
   2. Hero art that sits fully inside the hero at every width.
   3. Steps as rows on phones (no half-hidden carousel).
   4. Games: two featured cards, five real game screens, the rest as a list.
   5. Contrast fixes (eyebrows, links, hero), anchor offsets, nav menu.
   ========================================================= */
body.v4{ --v-coral-ink:#C2410C; --v-hero-a:#6A48F0; --v-hero-b:#5B3FE0; }
@media (prefers-color-scheme: dark){ body.v4{ --v-coral-ink:#FF9B7E; } }
body.v4 .eyebrow{ color:var(--v-coral-ink); }
.v-link{ color:var(--v-coral-ink); }
.v-link:hover{ color:var(--v-coral-deep); }
body.v4 [id]{ scroll-margin-top:84px; }
body.v4 .lead{ font-size:clamp(1.02rem,.4vw + .95rem,1.15rem); line-height:1.6; }
body.v4 .section-head h2{ text-wrap:balance; }

/* header: the mobile menu hangs from the header, wherever the header is */
body.v4 header.site .nav{ position:relative; }
@media (max-width:900px){
  body.v4 .nav-links{ position:absolute; inset:calc(100% + 8px) 14px auto 14px; }
  body.v4 .nav-links a{ padding:13px 8px; font-size:1.02rem; }
  body.v4 .burger{ width:44px; height:44px; display:inline-flex; flex-direction:column; justify-content:center; align-items:center; border-radius:12px; }
  body.v4 .burger span{ transition:transform .2s ease, opacity .2s ease; margin:2.5px 0; }
  body.v4 .burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  body.v4 .burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  body.v4 .burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}
body.v4 .nav-links a:focus-visible, .v-btn:focus-visible, .v-link:focus-visible{ outline:3px solid var(--v-sun); outline-offset:3px; border-radius:6px; }

/* ---- the phone ---- */
.v-phone{ container-type:inline-size; position:relative; display:block; padding:0; border-radius:13.5% / 6.4%;
  background:linear-gradient(160deg,#2b2747,#121022 60%); box-shadow:inset 0 0 0 1.5px #3b3663, inset 0 0 0 4px #0c0b17, 0 34px 60px -28px rgba(23,20,42,.6), 0 10px 22px -12px rgba(23,20,42,.35); }
.v-phone img{ display:block; width:92.6%; height:auto; margin:3.7cqw auto; aspect-ratio:390/844; object-fit:cover; object-position:top center; border-radius:10cqw; background:#fbf6ee; }
.v-phone::after{ content:""; position:absolute; top:5.6cqw; left:50%; width:21cqw; height:5.6cqw; transform:translateX(-50%); border-radius:99px; background:#0b0a14; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); pointer-events:none; }
/* reset the old per-section frame tweaks: the frame now scales by itself */
.v-step .v-phone, .v-compare .v-phone, .v-game-shots .v-phone{ padding:0; border-radius:13.5% / 6.4%; }
.v-step .v-phone img, .v-compare .v-phone img, .v-game-shots .v-phone img{ border-radius:10cqw; }

/* ---- hero ---- */
body.v4 .v-hero{ background-color:var(--v-hero-a); background-image:radial-gradient(circle at 12% 18%, rgba(255,255,255,.16), transparent 34%), radial-gradient(circle at 92% 82%, rgba(255,194,61,.30), transparent 40%), linear-gradient(160deg,var(--v-hero-a),var(--v-hero-b)); }
body.v4 .v-hero .eyebrow{ display:inline-block; background:var(--v-sun); color:#1d1a14; padding:6px 12px; border-radius:99px; letter-spacing:.1em; font-size:.74rem; }
.v-hero-grid{ align-items:center; }
.v-hero-copy{ padding-bottom:96px; }
.v-hero .v-ctas{ gap:14px; }
.v-hero-teacher{ display:inline-block; margin-top:18px; color:#fff; font-weight:700; text-decoration:none; border-bottom:2px solid rgba(255,255,255,.5); padding-bottom:1px; }
.v-hero-teacher:hover{ border-bottom-color:#fff; }
.v-langs .v-langs-label{ color:rgba(255,255,255,.85); font-weight:700; font-size:.88rem; margin-right:2px; }
.v-hero-art{ min-height:0; display:flex; justify-content:center; align-items:flex-end; gap:0; padding:0 0 92px; }
.v-hero-art .v-phone{ width:min(270px,24vw); margin:0; transform:rotate(3deg); z-index:1; }
.v-hero-art .v-phone.v-phone-back{ position:relative; left:auto; bottom:auto; width:min(220px,19.5vw); margin:0 -34px 54px 0; transform:rotate(-6deg); z-index:0; }
@media (max-width:900px){
  .v-hero-grid{ grid-template-columns:1fr; gap:8px; }
  .v-hero-copy{ padding-bottom:6px; }
  .v-hero-art{ height:auto; overflow:visible; padding:22px 0 76px; align-items:flex-end; }
  .v-hero-art .v-phone{ width:min(190px,46vw); margin:0; }
  .v-hero-art .v-phone.v-phone-back{ display:block; width:min(160px,39vw); margin:0 -20px 40px 0; }
}

/* ---- how it works ---- */
.v-steps{ align-items:start; }
.v-step .v-phone{ width:min(220px,100%); margin:0 auto 22px; }
@media (max-width:820px){
  .v-steps{ display:grid; grid-template-columns:1fr; overflow:visible; margin:0; padding:0; gap:18px; }
  .v-step{ display:grid; grid-template-columns:min(36%,150px) 1fr; column-gap:18px; align-items:center; text-align:left; background:var(--surface-solid); border-radius:24px; padding:14px; box-shadow:inset 0 0 0 2px var(--surface-border), 0 6px 0 var(--surface-border); }
  .v-step .v-phone{ width:100%; margin:0; grid-row:1 / span 2; }
  .v-step h3{ align-self:end; font-size:1.15rem; }
  .v-step h3::before{ display:flex; margin:0 0 10px; }
  .v-step p{ align-self:start; margin-top:4px; }
}

/* ---- compare ---- */
.v-compare figure{ width:min(260px,42vw); }

/* ---- split rows on the language pages ---- */
.v-split .v-phone{ width:min(260px,64vw); }

/* ---- games ---- */
.v-fgames{ display:grid; grid-template-columns:1.25fr 1fr; gap:20px; margin-bottom:22px; }
.v-fgame{ position:relative; border-radius:30px; padding:clamp(22px,3vw,34px); display:grid; grid-template-columns:1fr auto; gap:22px; align-items:center; overflow:hidden; }
.v-fgame h3{ font-size:clamp(1.6rem,1.6vw + 1rem,2.2rem); margin:12px 0 8px; line-height:1.05; }
.v-fgame p{ margin:0; font-weight:600; font-size:1.02rem; line-height:1.5; }
.v-fgame .v-phone{ width:clamp(150px,15vw,200px); transform:rotate(3deg); }
.v-fgame-chores{ background:#17708A; color:#fff; background-image:radial-gradient(circle at 90% 0%, rgba(255,255,255,.2), transparent 45%); }
.v-fgame-chores h3{ color:#fff; }
.v-fgame-chores p{ color:#fff; }
.v-fgame-call{ background:#FCC48D; color:#3a1d06; grid-template-columns:1fr; align-content:space-between; }
.v-fgame-call h3{ color:#3a1d06; }
.v-fgame-call p{ color:#4a2a10; max-width:32ch; }
.v-fgame-art{ width:min(210px,60%); height:auto; justify-self:end; margin:-4px -8px -16px 0; mix-blend-mode:multiply; }
.v-badge{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:99px; font-weight:800; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; }
.v-badge-new{ background:var(--v-sun); color:#1d1a14; }
.v-badge-soon{ background:#3a1d06; color:#FFE3C4; }
.v-fgame p.v-fgame-note{ font-size:.88rem; font-weight:700; margin-top:12px; opacity:.92; }
@media (max-width:900px){ .v-fgames{ grid-template-columns:1fr; } }
@media (max-width:520px){
  .v-fgame{ grid-template-columns:1fr 38%; gap:14px; padding:22px 16px 22px 20px; border-radius:26px; }
  .v-fgame .v-phone{ width:100%; }
  .v-fgame p{ font-size:.95rem; }
  .v-fgame-call{ grid-template-columns:1fr; }
  .v-fgame-art{ width:56%; margin-top:-30px; }
}

.v-gcards{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.v-gcard{ margin:0; border-radius:26px; padding:16px 14px 18px; background:var(--surface-solid); box-shadow:inset 0 0 0 2px var(--surface-border), 0 6px 0 var(--surface-border); display:flex; flex-direction:column; gap:14px; border-top:8px solid var(--gc, var(--v-coral)); }
.v-gcard .v-phone{ width:100%; max-width:200px; margin:0 auto; }
.v-gcard h3{ margin:0 0 4px; font-size:1.12rem; color:var(--ink); display:flex; align-items:center; gap:8px; }
.v-gcard h3::before{ content:""; width:10px; height:10px; border-radius:50%; background:var(--gc, var(--v-coral)); flex:none; }
.v-gcard p{ margin:0; color:var(--ink-soft); font-weight:600; font-size:.92rem; line-height:1.45; }
.gc-order{ --gc:#F08A1C; } .gc-mystery{ --gc:#5B7CFF; } .gc-desk{ --gc:#1F8FB0; } .gc-spell{ --gc:#7C5CFC; } .gc-cross{ --gc:#13917a; }
@media (max-width:1080px){ .v-gcards{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:700px){ .v-gcards{ grid-template-columns:repeat(2,1fr); gap:12px; } .v-gcard{ padding:12px 10px 14px; border-radius:22px; } .v-gcard p{ font-size:.86rem; } .v-gcard h3{ font-size:1rem; } }

.v-gmore{ margin-top:22px; border-radius:26px; padding:22px clamp(18px,3vw,30px); background:var(--surface-solid); box-shadow:inset 0 0 0 2px var(--surface-border), 0 6px 0 var(--surface-border); }
.v-gmore h3{ margin:0 0 12px; font-size:1.15rem; }
.v-gmore ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:10px 28px; }
.v-gmore li{ display:flex; gap:8px; align-items:baseline; font-weight:600; color:var(--ink-soft); line-height:1.4; font-size:.95rem; }
.v-gmore li b{ color:var(--ink); white-space:nowrap; font-family:var(--v-round); font-weight:700; font-size:1.02rem; }
@media (max-width:700px){ .v-gmore ul{ grid-template-columns:1fr; } .v-gmore li{ flex-direction:column; gap:0; } }
.v-games-cta{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px 22px; margin-top:30px; }
/* the base body.v4 h3 rule is more specific than .v-fgame h3: say it again here */
body.v4 .v-fgame h3{ font-size:clamp(1.7rem,1.8vw + 1rem,2.5rem); margin:14px 0 10px; line-height:1.04; }
body.v4 .v-fgame-call{ grid-template-columns:1fr; align-content:space-between; }
body.v4 .v-fgame-call > div{ align-self:start; }
body.v4 .v-fgame-call .v-fgame-art{ width:72%; max-width:320px; justify-self:end; margin:0 -14px -24px 0; }
@media (max-width:700px){
  /* five cards in two columns: the fifth one lies down across both */
  .v-gcard:last-child:nth-child(odd){ grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,150px) minmax(0,190px); justify-content:center; align-items:center; column-gap:18px; }
  .v-gcard:last-child:nth-child(odd) .v-phone{ max-width:none; }
}
@media (max-width:520px){
  body.v4 .v-fgame-call{ grid-template-columns:1fr 38%; align-items:center; }
  body.v4 .v-fgame-call .v-fgame-art{ width:100%; margin:0 -6px 0 0; }
}

/* related posts on the service pages (farin-seo priority 1, 2026-10-14) */
.v-related{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.v-rel{ display:flex; flex-direction:column; gap:10px; text-decoration:none; color:var(--ink); background:var(--surface-solid); border-radius:24px; padding:22px; box-shadow:inset 0 0 0 2px var(--surface-border), 0 6px 0 var(--surface-border); transition:transform .15s ease, box-shadow .15s ease; }
.v-rel:hover{ transform:translateY(-3px); box-shadow:inset 0 0 0 2px var(--v-purple), 0 6px 0 var(--surface-border); }
.v-rel:focus-visible{ outline:3px solid var(--v-sun); outline-offset:3px; }
.v-rel-tag{ align-self:flex-start; font-size:.74rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:var(--v-purple-deep); padding:5px 10px; border-radius:99px; }
.v-rel:nth-child(2) .v-rel-tag{ background:#13917a; } .v-rel:nth-child(3) .v-rel-tag{ background:var(--v-coral-ink); }
.v-rel-title{ font-family:var(--v-round); font-weight:600; font-size:1.12rem; line-height:1.3; flex:1; }
.v-rel-more{ font-weight:800; color:var(--v-coral-ink); font-size:.95rem; }
@media (max-width:860px){ .v-related{ grid-template-columns:1fr; gap:12px; } .v-rel{ padding:18px; } }