/* ============ Design tokens: "Indigo Pulse" ============
     Applied 2026-07-20, replacing the "Friendly Luxury" ivory/pine/gold palette per
     Ádám's decision (dev-planning/13-friendly-luxury-message-architecture.md). Values
     sourced verbatim from tmp/friendly-luxury-palette-comparison/palettes.md, section 3.
     --deep/-2/-3, --on-deep(-soft), --on-pine, --on-gold, --gold-deep are new tokens
     introduced there to tokenize colors that were previously hardcoded in this file
     (the .engine/.cta-card/.subject-hero dark bands and their button/text colors),
     so any future palette swap is a token-only change again. */
  :root {
    --paper: #f7f8fc;
    --paper-2: #edeffa;
    --ink: #191b2e;
    --ink-soft: #4e5170;
    --pine: #4038a8;           /* indigo, primary brand */
    --pine-soft: #5a51c8;
    --gold: #14b8a6;           /* teal accent */
    --gold-soft: #5eead4;
    --gold-deep: #0f8577;
    --coral: #e5604f;          /* teacher handwriting ink accent */
    --sky: #3d87d8;            /* student ink accent */
    --card: #ffffff;
    --line: rgba(25, 27, 46, .12);
    --shadow: 0 20px 60px -20px rgba(64, 56, 168, .25);
    --deep: #2b2570;           /* dark band gradients (engine/cta-card/subject-hero) */
    --deep-2: #1c1850;
    --deep-3: #241f62;
    --on-deep: #eeeffa;        /* text on dark bands */
    --on-deep-soft: rgba(238, 239, 250, .78);
    --on-pine: #ffffff;        /* text on .btn / primary-color surfaces */
    --on-gold: #04302a;        /* text on gold/teal-accent surfaces */
    --radius: 22px;
    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --paper: #101223;
      --paper-2: #171a33;
      --ink: #eaebf5;
      --ink-soft: #a6a8c4;
      --pine: #9d97f2;
      --pine-soft: #b6b1f6;
      --gold: #2dd4bf;
      --gold-soft: #14a897;
      --gold-deep: #0f8577;
      --coral: #f08a7a;
      --sky: #6faee8;
      --card: #181b36;
      --line: rgba(234, 235, 245, .14);
      --shadow: 0 20px 60px -20px rgba(0, 0, 0, .6);
      --deep: #37308f;
      --deep-2: #241f62;
      --deep-3: #2d2778;
      --on-deep: #eeeffa;
      --on-deep-soft: rgba(238, 239, 250, .75);
      --on-pine: #10122a;
      --on-gold: #04302a;
    }
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    font-family: var(--sans);
    background: var(--paper);
    color: var(--ink);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, .serif { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; }
  a { color: inherit; text-decoration: none; }
  img { max-width: 100%; }
  ::selection { background: var(--gold-soft); color: var(--on-gold); }

  .wrap { width: min(1160px, 92vw); margin: 0 auto; }

  /* ============ Scroll progress bar ============ */
  #progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0;
    background: linear-gradient(90deg, var(--pine), var(--gold));
    z-index: 200; transition: width .1s linear;
  }

  /* ============ Nav ============ */
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    transition: background .4s, box-shadow .4s, padding .4s;
    padding: 22px 0;
  }
  nav.scrolled {
    background: color-mix(in srgb, var(--paper) 82%, transparent);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 1px 0 var(--line);
    padding: 12px 0;
  }
  .nav-inner { display: flex; align-items: center; gap: 28px; }
  .logo { font-family: var(--serif); font-size: 1.5rem; font-weight: 700; display: flex; align-items: center; gap: 10px; }
  .logo-mark {
    width: 34px; height: 34px; object-fit: contain; display: block; flex: none;
  }
  /* source art is solid black on transparent; invert for dark backgrounds */
  @media (prefers-color-scheme: dark) { .logo-mark { filter: invert(1); } }
  .logo em { color: var(--pine); font-style: normal; }
  .nav-links { display: flex; gap: 22px; margin-left: auto; font-size: .92rem; color: var(--ink-soft); }
  .nav-links a { position: relative; padding: 4px 0; transition: color .25s; }
  .nav-links a::after {
    content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
    background: var(--gold); transition: width .3s cubic-bezier(.6,0,.2,1);
  }
  .nav-links a:hover { color: var(--ink); }
  .nav-links a:hover::after { width: 100%; }
  .btn {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--pine); color: var(--on-pine); font-weight: 600; font-size: .95rem;
    padding: 13px 26px; border-radius: 999px; border: none; cursor: pointer;
    box-shadow: 0 10px 25px -10px color-mix(in srgb, var(--pine) 55%, transparent);
    transition: transform .25s cubic-bezier(.3,1.4,.5,1), box-shadow .25s, background .25s;
  }
  .btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 16px 35px -12px color-mix(in srgb, var(--pine) 60%, transparent); background: var(--pine-soft); }
  .btn:active { transform: translateY(0) scale(.99); }
  .btn.ghost { background: transparent; color: var(--pine); border: 1.5px solid var(--pine); box-shadow: none; }
  .btn.ghost:hover { background: color-mix(in srgb, var(--pine) 8%, transparent); }
  .btn.gold { background: linear-gradient(120deg, var(--gold), var(--gold-deep)); color: var(--on-gold); }
  .btn.gold:hover { background: linear-gradient(120deg, var(--gold-soft), var(--gold)); }

  /* ============ Mobile nav toggle (hamburger) ============
     Below the breakpoint the desktop link row becomes a dropdown panel. The
     header CTA is hidden on mobile and reappears inside the open panel, so the
     bar stays uncluttered on a 375px phone. */
  .nav-toggle {
    display: none; width: 44px; height: 44px; flex: none;
    flex-direction: column; justify-content: center; gap: 5px;
    margin-left: auto; padding: 10px;
    background: transparent; border: none; cursor: pointer;
  }
  .nav-toggle span {
    display: block; height: 2px; width: 100%; border-radius: 2px;
    background: var(--ink);
    transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .2s;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-links .mobile-cta { display: none; }

  @media (max-width: 880px) {
    .nav-toggle { display: flex; }
    .nav-inner > .nav-cta { display: none; }
    nav.menu-open { background: var(--paper); }
    .nav-links {
      position: absolute; top: 100%; left: 0; right: 0;
      flex-direction: column; gap: 0; margin-left: 0;
      padding: 8px 0 20px;
      /* Solid, not translucent: page text showing through an open menu reads as
         a rendering bug on a phone. */
      background: var(--paper);
      border-top: 1px solid var(--line);
      box-shadow: var(--shadow);
      max-height: calc(100svh - 100%); overflow-y: auto;
      opacity: 0; visibility: hidden; transform: translateY(-10px);
      transition: opacity .25s ease, transform .25s cubic-bezier(.2,.8,.2,1), visibility .25s;
    }
    .nav-links.open { opacity: 1; visibility: visible; transform: none; }
    .nav-links a { padding: 14px 6vw; font-size: 1.02rem; color: var(--ink); }
    .nav-links a::after { display: none; }
    .nav-links a:active { background: color-mix(in srgb, var(--pine) 8%, transparent); }
    .nav-links .mobile-cta {
      display: inline-flex; justify-content: center;
      margin: 14px 6vw 0; padding: 14px 26px; color: var(--on-pine);
    }
  }

  /* ============ Hero ============ */
  header.hero {
    position: relative; min-height: 100svh;
    display: flex; align-items: center;
    padding: 130px 0 90px;
    overflow: hidden;
  }
  /* animated aurora background */
  .aurora { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
  .aurora span {
    position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5;
    animation: drift 18s ease-in-out infinite alternate;
  }
  .aurora span:nth-child(1) { width: 55vw; height: 55vw; background: color-mix(in srgb, var(--pine) 28%, transparent); top: -20%; left: -12%; }
  .aurora span:nth-child(2) { width: 40vw; height: 40vw; background: color-mix(in srgb, var(--gold) 30%, transparent); bottom: -18%; right: -8%; animation-delay: -6s; animation-duration: 22s; }
  .aurora span:nth-child(3) { width: 30vw; height: 30vw; background: color-mix(in srgb, var(--coral) 18%, transparent); top: 35%; right: 28%; animation-delay: -12s; animation-duration: 26s; }
  @keyframes drift {
    from { transform: translate(0,0) scale(1); }
    to   { transform: translate(6vw, -4vh) scale(1.15); }
  }
  /* faint grid paper texture */
  .gridpaper {
    position: absolute; inset: 0; z-index: -1; opacity: .5;
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, black 30%, transparent 75%);
  }

  .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
  @media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; gap: 48px; } }

  .kicker {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--pine); background: color-mix(in srgb, var(--pine) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--pine) 25%, transparent);
    padding: 7px 16px; border-radius: 999px; margin-bottom: 24px;
  }
  .kicker .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: pulse 2s ease-in-out infinite; }
  @keyframes pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: .5; } }

  .hero h1 {
    font-size: clamp(2.3rem, 5.2vw, 3.9rem);
    line-height: 1.12; margin-bottom: 26px;
  }
  .hero h1 .accent {
    background: linear-gradient(100deg, var(--pine) 20%, var(--gold) 90%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    position: relative;
  }
  .hero h1 .underline-svg { position: absolute; left: 0; right: 0; bottom: -10px; width: 100%; height: 14px; }
  .hero h1 .underline-svg path {
    fill: none; stroke: var(--gold); stroke-width: 3.5; stroke-linecap: round;
    stroke-dasharray: 320; stroke-dashoffset: 320;
    animation: drawline 1.1s .9s cubic-bezier(.6,0,.2,1) forwards;
  }
  @keyframes drawline { to { stroke-dashoffset: 0; } }

  .hero p.lede { font-size: 1.13rem; color: var(--ink-soft); max-width: 34rem; margin-bottom: 34px; }
  .hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
  .hero-note { font-size: .85rem; color: var(--ink-soft); margin-top: 16px; display: flex; align-items: center; gap: 8px; }
  .hero-note svg { color: var(--pine); flex: none; }

  /* staged entrance for hero text */
  .stagger > * { opacity: 0; transform: translateY(26px); animation: rise .9s cubic-bezier(.2,.8,.2,1) forwards; }
  .stagger > *:nth-child(1) { animation-delay: .05s; }
  .stagger > *:nth-child(2) { animation-delay: .18s; }
  .stagger > *:nth-child(3) { animation-delay: .32s; }
  .stagger > *:nth-child(4) { animation-delay: .46s; }
  .stagger > *:nth-child(5) { animation-delay: .60s; }
  @keyframes rise { to { opacity: 1; transform: none; } }

  /* ============ Hero app mockup ============ */
  .hero-visual { position: relative; perspective: 1200px; }
  .app-window {
    background: var(--card); border-radius: var(--radius);
    box-shadow: var(--shadow), 0 0 0 1px var(--line);
    overflow: hidden;
    transform-style: preserve-3d;
    transition: transform .3s ease-out;
    animation: rise 1s .35s cubic-bezier(.2,.8,.2,1) both;
  }
  .app-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 13px 18px; border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--paper-2) 60%, var(--card));
    font-size: .78rem; color: var(--ink-soft);
  }
  .app-bar .dots { display: flex; gap: 6px; }
  .app-bar .dots i { width: 11px; height: 11px; border-radius: 50%; display: block; }
  .app-bar .dots i:nth-child(1) { background: #f1685f; }
  .app-bar .dots i:nth-child(2) { background: #f5bf4f; }
  .app-bar .dots i:nth-child(3) { background: #62c554; }
  .app-bar .title { margin: 0 auto; display: flex; align-items: center; gap: 7px; font-weight: 600; }
  .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); animation: pulse 1.6s infinite; }
  .app-body { display: grid; grid-template-columns: 1.5fr 1fr; }
  @media (max-width: 480px) { .app-body { grid-template-columns: 1fr; } .sheet-panel { border-left: none !important; border-top: 1px solid var(--line); } }

  .doc-pane { padding: 22px; position: relative; }
  .doc-pane svg { width: 100%; height: auto; display: block; }

  /* self-drawing ink strokes */
  .ink { fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .draw { stroke-dasharray: 600; stroke-dashoffset: 600; }
  .in-view .draw { animation: drawline 1.6s cubic-bezier(.5,0,.3,1) forwards; }
  .in-view .draw.d2 { animation-delay: .9s; }
  .in-view .draw.d3 { animation-delay: 1.8s; }
  .in-view .draw.d4 { animation-delay: 2.6s; }

  /* named live cursors */
  .cursor {
    position: absolute; display: flex; align-items: flex-start; gap: 2px;
    pointer-events: none; z-index: 3; filter: drop-shadow(0 3px 6px rgba(0,0,0,.25));
  }
  .cursor .tag {
    font-size: .66rem; font-weight: 700; color: #fff; padding: 3px 9px;
    border-radius: 999px; margin-top: 12px; white-space: nowrap;
  }
  .cursor.teacher { animation: curT 9s ease-in-out infinite; }
  .cursor.teacher .tag { background: var(--coral); }
  .cursor.student { animation: curS 11s ease-in-out infinite; }
  .cursor.student .tag { background: var(--sky); }
  @keyframes curT {
    0%   { top: 24%; left: 12%; }
    30%  { top: 46%; left: 47%; }
    55%  { top: 66%; left: 26%; }
    80%  { top: 38%; left: 55%; }
    100% { top: 24%; left: 12%; }
  }
  @keyframes curS {
    0%   { top: 70%; left: 58%; }
    35%  { top: 30%; left: 30%; }
    60%  { top: 58%; left: 12%; }
    100% { top: 70%; left: 58%; }
  }

  /* answer-sheet panel inside the mockup */
  .sheet-panel {
    border-left: 1px solid var(--line);
    background: color-mix(in srgb, var(--paper-2) 45%, var(--card));
    padding: 18px 16px; display: flex; flex-direction: column; gap: 10px;
  }
  .sheet-panel h4 {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
    color: var(--pine); display: flex; align-items: center; gap: 7px;
    font-family: var(--sans); font-weight: 700;
  }
  .ans-row {
    display: flex; align-items: center; gap: 10px;
    background: var(--card); border: 1px solid var(--line);
    padding: 9px 12px; border-radius: 12px; font-size: .8rem;
    opacity: 0; transform: translateX(18px);
  }
  .in-view .ans-row { animation: slideIn .6s cubic-bezier(.2,.8,.2,1) forwards; }
  .in-view .ans-row:nth-child(2) { animation-delay: 1.2s; }
  .in-view .ans-row:nth-child(3) { animation-delay: 2.0s; }
  .in-view .ans-row:nth-child(4) { animation-delay: 2.8s; }
  .in-view .ans-row:nth-child(5) { animation-delay: 3.6s; }
  @keyframes slideIn { to { opacity: 1; transform: none; } }
  .ans-row .num { font-weight: 700; color: var(--ink-soft); width: 20px; }
  .ans-row .val { font-family: var(--serif); }
  .check {
    margin-left: auto; width: 20px; height: 20px; border-radius: 50%;
    display: grid; place-items: center; flex: none;
    background: color-mix(in srgb, var(--pine) 15%, transparent); color: var(--pine);
  }
  .check.warn { background: color-mix(in srgb, var(--gold) 22%, transparent); color: var(--gold); }
  .sheet-score {
    margin-top: auto; text-align: center; font-size: .78rem; color: var(--ink-soft);
    border-top: 1px dashed var(--line); padding-top: 12px;
  }
  .sheet-score b { font-family: var(--serif); font-size: 1.35rem; color: var(--pine); display: block; }

  /* floating chips around the mockup */
  .float-chip {
    position: absolute; background: var(--card); border: 1px solid var(--line);
    border-radius: 16px; padding: 12px 16px; font-size: .8rem;
    box-shadow: var(--shadow); display: flex; align-items: center; gap: 10px;
    animation: bob 5s ease-in-out infinite;
    z-index: 4;
  }
  .float-chip .ico {
    width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none;
    background: color-mix(in srgb, var(--pine) 12%, transparent); color: var(--pine);
  }
  .float-chip b { display: block; font-size: .82rem; }
  .float-chip span { color: var(--ink-soft); font-size: .72rem; }
  .chip-report { top: -26px; right: -14px; animation-delay: -1.5s; }
  .chip-hw { bottom: -24px; left: -18px; animation-delay: -3s; }
  @keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
  @media (max-width: 600px) { .chip-report { right: 4px; } .chip-hw { left: 4px; } }

  /* ============ generic section scaffolding + scroll reveals ============ */
  section { padding: 110px 0; position: relative; }
  .sec-head { max-width: 46rem; margin-bottom: 56px; }
  .sec-head .kicker { margin-bottom: 18px; }
  .sec-head h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); line-height: 1.18; margin-bottom: 16px; }
  .sec-head p { color: var(--ink-soft); font-size: 1.05rem; }
  .center { text-align: center; margin-left: auto; margin-right: auto; }

  .reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
  .reveal.in-view { opacity: 1; transform: none; }
  .reveal.delay-1 { transition-delay: .12s; }
  .reveal.delay-2 { transition-delay: .24s; }
  .reveal.delay-3 { transition-delay: .36s; }

  /* ============ The System (3 pillars) ============ */
  #rendszer { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--paper-2) 55%, transparent) 30%, transparent); }
  .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  @media (max-width: 900px) { .pillars { grid-template-columns: 1fr; } }
  .pillar {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 34px 30px; position: relative; overflow: hidden;
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
  }
  .pillar:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
  .pillar::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
    background: linear-gradient(90deg, var(--pine), var(--gold));
    transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.6,0,.2,1);
  }
  .pillar:hover::before { transform: scaleX(1); }
  .pillar .ico {
    width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center;
    background: color-mix(in srgb, var(--pine) 10%, transparent); color: var(--pine);
    margin-bottom: 22px; transition: transform .35s;
  }
  .pillar:hover .ico { transform: scale(1.1) rotate(-4deg); }
  .pillar h3 { font-size: 1.3rem; margin-bottom: 10px; }
  .pillar p { color: var(--ink-soft); font-size: .95rem; }
  .pillar .tagline { display: inline-block; margin-top: 18px; font-size: .8rem; font-weight: 700; color: var(--gold); letter-spacing: .04em; }

  /* Sorting Hat engine strip */
  .engine {
    margin-top: 60px; border-radius: var(--radius);
    background: linear-gradient(120deg, var(--deep), var(--deep-2) 60%, var(--deep-3));
    color: var(--on-deep); padding: 46px clamp(26px, 5vw, 60px);
    display: grid; grid-template-columns: auto 1fr auto; gap: 34px; align-items: center;
    position: relative; overflow: hidden;
    box-shadow: 0 30px 70px -30px color-mix(in srgb, var(--deep-2) 60%, transparent);
  }
  @media (max-width: 900px) { .engine { grid-template-columns: 1fr; text-align: center; } .engine .hat { margin: 0 auto; } }
  .engine::after {
    content: ""; position: absolute; width: 400px; height: 400px; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--gold) 35%, transparent), transparent 65%);
    top: -180px; right: -120px; animation: drift 14s ease-in-out infinite alternate;
  }
  .engine .hat { font-size: 3.2rem; line-height: 1; animation: hatTilt 6s ease-in-out infinite; transform-origin: 50% 90%; }
  @keyframes hatTilt { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(7deg); } }
  .engine h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-bottom: 8px; }
  .engine p { color: var(--on-deep-soft); font-size: .96rem; max-width: 42rem; }
  .engine .btn { background: var(--gold); color: var(--on-gold); box-shadow: none; position: relative; z-index: 1; }
  .engine .btn:hover { background: var(--gold-soft); }

  /* ============ Kollaboracios ter showcase ============ */
  #kollaboracios-ter .split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items: center; }
  @media (max-width: 980px) { #kollaboracios-ter .split { grid-template-columns: 1fr; } }
  .feature-list { list-style: none; display: flex; flex-direction: column; gap: 18px; margin-top: 30px; }
  .feature-list li { display: flex; gap: 14px; align-items: flex-start; }
  .feature-list .fico {
    width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center;
    background: color-mix(in srgb, var(--pine) 10%, transparent); color: var(--pine);
  }
  .feature-list b { display: block; margin-bottom: 2px; }
  .feature-list span { color: var(--ink-soft); font-size: .92rem; }
  .badge-star {
    display: inline-flex; align-items: center; gap: 7px;
    background: color-mix(in srgb, var(--gold) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
    color: color-mix(in srgb, var(--gold) 70%, var(--ink));
    font-size: .78rem; font-weight: 700; padding: 5px 13px; border-radius: 999px;
    margin-left: 8px; vertical-align: middle; font-family: var(--sans); letter-spacing: 0;
  }

  /* big annotated document mockup */
  .collab-stage { position: relative; }
  .collab-doc {
    background: var(--card); border-radius: var(--radius); border: 1px solid var(--line);
    box-shadow: var(--shadow); overflow: hidden; position: relative;
  }
  .collab-doc .page { padding: 26px; }
  .collab-doc svg { width: 100%; height: auto; display: block; }
  .avatar-stack { display: flex; margin-left: auto; }
  .avatar-stack i {
    width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--card);
    display: grid; place-items: center; font-size: .6rem; font-weight: 700; color: #fff; font-style: normal;
  }
  .avatar-stack i:nth-child(1) { background: var(--coral); }
  .avatar-stack i:nth-child(2) { background: var(--sky); margin-left: -8px; }

  /* small overlay card: "beepitett valaszlap" callout */
  .overlay-callout {
    position: absolute; right: -22px; bottom: 34px; width: 232px;
    background: var(--card); border: 1px solid var(--line); border-radius: 18px;
    box-shadow: var(--shadow); padding: 18px; font-size: .8rem; z-index: 5;
    animation: bob 6s ease-in-out infinite; animation-delay: -2s;
  }
  @media (max-width: 600px) { .overlay-callout { right: 6px; } }
  .overlay-callout h5 { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--pine); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
  .mini-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
  .mini-row:last-of-type { border-bottom: none; }
  .mini-row .bubble { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--line); flex: none; position: relative; }
  .mini-row.done .bubble { background: var(--pine); border-color: var(--pine); }
  .mini-row.done .bubble::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: .6rem; }
  .mini-row span { color: var(--ink-soft); }
  .mini-row.done span { color: var(--ink); }

  /* ============ Monthly report + homework band ============ */
  .band { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 70px; }
  @media (max-width: 900px) { .band { grid-template-columns: 1fr; } }
  .band-card {
    border-radius: var(--radius); border: 1px solid var(--line); background: var(--card);
    padding: 36px; overflow: hidden; position: relative;
    transition: transform .35s, box-shadow .35s;
  }
  .band-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
  .band-card h3 { font-size: 1.35rem; margin-bottom: 10px; }
  .band-card > p { color: var(--ink-soft); font-size: .95rem; margin-bottom: 24px; }
  /* report mock: animated bars */
  .report-mock {
    background: color-mix(in srgb, var(--paper-2) 55%, var(--card));
    border: 1px solid var(--line); border-radius: 16px; padding: 20px;
  }
  .report-mock .rm-head { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); margin-bottom: 14px; display: flex; justify-content: space-between; }
  .bar-row { display: grid; grid-template-columns: 96px 1fr 42px; gap: 10px; align-items: center; font-size: .8rem; margin-bottom: 10px; }
  .bar-track { height: 9px; background: var(--line); border-radius: 99px; overflow: hidden; }
  .bar-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--pine), var(--pine-soft)); width: 0; transition: width 1.4s cubic-bezier(.2,.8,.2,1) .3s; }
  .bar-fill.gold { background: linear-gradient(90deg, var(--gold), var(--gold-soft)); }
  .in-view .bar-fill { width: var(--w); }
  .bar-row .pct { text-align: right; font-weight: 700; color: var(--pine); font-size: .78rem; }
  /* homework mock: task cards */
  .hw-mock { display: flex; flex-direction: column; gap: 10px; }
  .hw-item {
    display: flex; align-items: center; gap: 12px; background: color-mix(in srgb, var(--paper-2) 55%, var(--card));
    border: 1px solid var(--line); border-radius: 14px; padding: 13px 16px; font-size: .85rem;
    opacity: 0; transform: translateY(14px);
  }
  .in-view .hw-item { animation: rise .7s cubic-bezier(.2,.8,.2,1) forwards; }
  .in-view .hw-item:nth-child(2) { animation-delay: .15s; }
  .in-view .hw-item:nth-child(3) { animation-delay: .3s; }
  .hw-item .tag { font-size: .66rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; margin-left: auto; flex: none; }
  .tag.easy { background: color-mix(in srgb, var(--pine) 14%, transparent); color: var(--pine); }
  .tag.mid { background: color-mix(in srgb, var(--gold) 20%, transparent); color: color-mix(in srgb, var(--gold) 75%, var(--ink)); }
  .tag.hard { background: color-mix(in srgb, var(--coral) 16%, transparent); color: var(--coral); }

  /* ============ Tantargyak ============ */
  .subjects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
  @media (max-width: 900px) { .subjects { grid-template-columns: 1fr; } }
  .subject-hero {
    grid-column: 1 / -1;
    background: linear-gradient(115deg, var(--deep-2), var(--deep) 55%, var(--deep-3));
    color: var(--on-deep); border-radius: var(--radius); padding: clamp(30px, 5vw, 52px);
    display: grid; grid-template-columns: 1.3fr .7fr; gap: 30px; align-items: center;
    position: relative; overflow: hidden;
  }
  @media (max-width: 780px) { .subject-hero { grid-template-columns: 1fr; } }
  .subject-hero::before {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.14) 1.5px, transparent 1.5px);
    background-size: 26px 26px; opacity: .35;
    mask-image: linear-gradient(115deg, transparent 40%, black);
    -webkit-mask-image: linear-gradient(115deg, transparent 40%, black);
  }
  .subject-hero .pill { display: inline-block; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); padding: 5px 14px; border-radius: 999px; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 16px; }
  .subject-hero h3 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 12px; }
  .subject-hero p { color: var(--on-deep-soft); max-width: 36rem; font-size: .98rem; }
  .stat-cluster { display: flex; gap: 18px; justify-content: flex-end; flex-wrap: wrap; position: relative; }
  @media (max-width: 780px) { .stat-cluster { justify-content: flex-start; } }
  .stat {
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
    border-radius: 18px; padding: 18px 22px; text-align: center; min-width: 118px;
    backdrop-filter: blur(4px);
  }
  .stat b { display: block; font-family: var(--serif); font-size: 1.9rem; color: var(--gold-soft); }
  .stat span { font-size: .72rem; color: var(--on-deep-soft); letter-spacing: .04em; }
  .subject-card {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 30px; transition: transform .35s, box-shadow .35s, border-color .35s;
  }
  .subject-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--pine) 35%, transparent); }
  .subject-card .emoji { font-size: 1.8rem; display: block; margin-bottom: 14px; }
  .subject-card h4 { font-family: var(--serif); font-size: 1.15rem; margin-bottom: 8px; }
  .subject-card p { color: var(--ink-soft); font-size: .9rem; }

  /* ============ Araink ============ */
  #araink { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--paper-2) 60%, transparent) 25%, color-mix(in srgb, var(--paper-2) 60%, transparent) 75%, transparent); }
  .price-stage { display: grid; grid-template-columns: .95fr 1.05fr; gap: 40px; align-items: start; }
  @media (max-width: 980px) { .price-stage { grid-template-columns: 1fr; } }
  .price-anchor {
    background: var(--card); border-radius: var(--radius); border: 1px solid var(--line);
    box-shadow: var(--shadow); padding: 44px 40px; text-align: center; position: sticky; top: 110px;
    overflow: hidden;
  }
  @media (max-width: 980px) { .price-anchor { position: static; } }
  .price-anchor::before {
    content: ""; position: absolute; inset: -60% auto auto -30%; width: 90%; aspect-ratio: 1;
    background: radial-gradient(circle, color-mix(in srgb, var(--gold) 22%, transparent), transparent 70%);
    pointer-events: none;
  }
  .price-anchor > * { position: relative; }
  .price-anchor .from { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
  .price-big { font-family: var(--serif); font-size: clamp(3rem, 6vw, 4.2rem); color: var(--pine); line-height: 1.05; margin: 10px 0 2px; }
  .price-big small { font-size: 1.15rem; color: var(--ink-soft); font-family: var(--sans); }
  .price-anchor .per { color: var(--ink-soft); font-size: .92rem; margin-bottom: 22px; }
  .included { text-align: left; margin: 22px 0 28px; display: flex; flex-direction: column; gap: 10px; font-size: .9rem; list-style: none; }
  .included li { display: flex; gap: 10px; align-items: flex-start; }
  .included svg { color: var(--pine); flex: none; margin-top: 3px; }
  .addon-ladder { display: flex; flex-direction: column; gap: 14px; position: relative; padding-left: 26px; }
  .addon-ladder::before {
    content: ""; position: absolute; left: 8px; top: 24px; bottom: 24px; width: 2px;
    background: linear-gradient(180deg, var(--pine), var(--gold)); border-radius: 2px; opacity: .4;
  }
  .addon {
    background: var(--card); border: 1px solid var(--line); border-radius: 18px;
    padding: 22px 24px; display: flex; gap: 16px; align-items: center; position: relative;
    transition: transform .3s, box-shadow .3s, border-color .3s;
  }
  .addon::before {
    content: ""; position: absolute; left: -22px; top: 50%; width: 10px; height: 10px;
    border-radius: 50%; background: var(--gold); transform: translateY(-50%);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 25%, transparent);
  }
  .addon:hover { transform: translateX(8px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
  .addon .ico { width: 44px; height: 44px; border-radius: 13px; flex: none; display: grid; place-items: center; background: color-mix(in srgb, var(--gold) 14%, transparent); color: color-mix(in srgb, var(--gold) 70%, var(--ink)); }
  .addon b { display: block; font-size: .98rem; }
  .addon span { color: var(--ink-soft); font-size: .85rem; }
  .addon .plus { margin-left: auto; font-family: var(--serif); font-size: 1.2rem; color: var(--gold); flex: none; }
  .price-note { font-size: .78rem; color: var(--ink-soft); margin-top: 22px; font-style: italic; }

  /* ============ Testimonials ============ */
  .quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  @media (max-width: 880px) { .quotes { grid-template-columns: 1fr; } }
  .quote {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 40px 36px; position: relative; overflow: hidden;
    transition: transform .35s, box-shadow .35s;
  }
  .quote:hover { transform: translateY(-6px) rotate(-.4deg); box-shadow: var(--shadow); }
  .quote .qmark {
    font-family: var(--serif); font-size: 5.5rem; line-height: 1; color: color-mix(in srgb, var(--gold) 35%, transparent);
    position: absolute; top: 10px; right: 24px;
  }
  .quote p { font-family: var(--serif); font-size: 1.08rem; line-height: 1.65; margin-bottom: 24px; position: relative; }
  /* A single long, real testimonial spans the grid instead of sitting in a
     half-width card. Reading measure is capped so the story stays readable at
     desktop widths rather than running the full container. */
  .quote.featured { grid-column: 1 / -1; padding: 52px 48px; }
  .quote.featured p { max-width: 62ch; }
  .quote.featured p:last-of-type { margin-bottom: 28px; }
  .quote.featured .quote-close { font-style: italic; color: var(--ink-soft); }
  @media (max-width: 880px) { .quote.featured { padding: 36px 26px; } }
  .quote .who { display: flex; align-items: center; gap: 14px; }
  .quote .who .av {
    width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
    font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--pine), var(--pine-soft)); flex: none;
  }
  .quote .who b { display: block; font-size: .95rem; }
  .quote .who span { font-size: .8rem; color: var(--ink-soft); }
  .quote .result-chip {
    display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
    background: color-mix(in srgb, var(--pine) 10%, transparent); color: var(--pine);
    font-size: .78rem; font-weight: 700; padding: 6px 14px; border-radius: 999px;
  }

  /* ============ Tanaraink teaser ============ */
  .teachers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
  @media (max-width: 880px) { .teachers { grid-template-columns: 1fr; } }
  .teacher {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 34px 28px; text-align: center; transition: transform .35s, box-shadow .35s;
  }
  .teacher:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
  .teacher .face {
    width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 18px;
    display: grid; place-items: center; font-family: var(--serif); font-size: 1.8rem; color: #fff;
    background: linear-gradient(135deg, var(--pine), var(--gold));
    box-shadow: 0 12px 30px -12px rgba(20,82,74,.5);
    transition: transform .4s cubic-bezier(.3,1.4,.5,1);
  }
  .teacher:hover .face { transform: scale(1.08) rotate(3deg); }
  .teacher h4 { font-family: var(--serif); font-size: 1.2rem; margin-bottom: 4px; }
  .teacher .role { color: var(--gold); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 12px; }
  .teacher p { color: var(--ink-soft); font-size: .88rem; }

  /* ============ Teacher full profiles (real bios, longer-form) ============ */
  .teacher-profiles { display: flex; flex-direction: column; gap: 28px; }
  .teacher-profile {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 36px clamp(22px, 4vw, 44px);
  }
  .teacher-profile-head { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
  .teacher-profile-head .face {
    width: 64px; height: 64px; border-radius: 50%; flex: none;
    display: grid; place-items: center; font-family: var(--serif); font-size: 1.4rem; color: #fff;
    background: linear-gradient(135deg, var(--pine), var(--gold));
    box-shadow: 0 12px 30px -12px rgba(20,82,74,.5);
  }
  .teacher-profile-head h4 { font-family: var(--serif); font-size: 1.4rem; margin-bottom: 2px; }
  .teacher-profile-head .role { color: var(--gold); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .teacher-profile .prose { max-width: none; }
  .teacher-profile .prose p:last-child { margin-bottom: 0; }

  /* ============ Final CTA ============ */
  #cta-final { padding: 120px 0 130px; }
  .cta-card {
    background: linear-gradient(120deg, var(--deep), var(--deep-2));
    border-radius: 30px; padding: clamp(44px, 7vw, 80px); text-align: center;
    color: var(--on-deep); position: relative; overflow: hidden;
    box-shadow: 0 40px 90px -35px color-mix(in srgb, var(--deep-2) 65%, transparent);
  }
  .cta-card::before, .cta-card::after {
    content: ""; position: absolute; border-radius: 50%;
  }
  .cta-card::before { width: 420px; height: 420px; background: radial-gradient(circle, color-mix(in srgb, var(--gold) 40%, transparent), transparent 65%); top: -200px; left: -140px; animation: drift 16s ease-in-out infinite alternate; }
  .cta-card::after { width: 360px; height: 360px; background: radial-gradient(circle, color-mix(in srgb, var(--sky) 30%, transparent), transparent 65%); bottom: -180px; right: -110px; animation: drift 20s ease-in-out infinite alternate-reverse; }
  .cta-card h2 { font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: 18px; position: relative; z-index: 1; }
  .cta-card p { color: var(--on-deep-soft); max-width: 36rem; margin: 0 auto 34px; position: relative; z-index: 1; }
  .cta-card .btn { position: relative; z-index: 1; font-size: 1.05rem; padding: 17px 36px; background: linear-gradient(120deg, var(--gold), var(--gold-deep)); color: var(--on-gold); }
  .cta-card .btn:hover { background: linear-gradient(120deg, var(--gold-soft), var(--gold)); }
  .cta-sub { margin-top: 18px; font-size: .82rem; color: color-mix(in srgb, var(--on-deep) 60%, transparent); position: relative; z-index: 1; }

  /* ============ Footer ============ */
  footer { border-top: 1px solid var(--line); padding: 56px 0 40px; color: var(--ink-soft); font-size: .88rem; }
  .foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
  @media (max-width: 780px) { .foot-grid { grid-template-columns: 1fr; } }
  footer h5 { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink); margin-bottom: 14px; }
  footer ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
  footer a:hover { color: var(--pine); }
  .foot-bottom { border-top: 1px dashed var(--line); padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: .78rem; }

  /* ============ Reduced motion ============ */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001s !important; animation-delay: 0s !important; transition-duration: .001s !important; }
    .reveal { opacity: 1; transform: none; }
    html { scroll-behavior: auto; }
  }

  /* ================================================================
     Multi-page additions (B2 build). Everything ABOVE this comment was
     the approved prototype stylesheet, extracted byte-for-byte from
     tmp/friendly-luxury-homepage-prototype/index.html; the palette
     personalization pass (2026-07-20, "Indigo Pulse" per Ádám's choice
     from tmp/friendly-luxury-palette-comparison/) has since been applied
     directly to it. Everything BELOW is shared scaffolding for the
     subpages (page headers, prose, contact form, visible placeholder
     marks), added during the B2 build. It only uses the existing tokens.
     ================================================================ */

  /* ============ Subpage header ============ */
  .page-hero {
    position: relative; padding: 168px 0 74px; overflow: hidden;
  }
  .page-hero h1 {
    font-size: clamp(2.1rem, 4.6vw, 3.3rem); line-height: 1.14;
    margin-bottom: 20px; max-width: 46rem;
  }
  .page-hero h1 .accent {
    background: linear-gradient(100deg, var(--pine) 20%, var(--gold) 90%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .page-hero p.lede { font-size: 1.1rem; color: var(--ink-soft); max-width: 42rem; }

  /* ============ Long-form prose ============ */
  .prose { max-width: 46rem; }
  .prose h2 { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; margin-bottom: 16px; }
  .prose h3 { font-size: 1.25rem; margin: 28px 0 10px; }
  .prose p { color: var(--ink-soft); margin-bottom: 18px; }
  .prose p.lead { color: var(--ink); font-size: 1.08rem; }

  /* ============ Visible placeholder mark ============ */
  /* For content that intentionally awaits real copy/assets (bios,
     contact facts, screenshots). Keep it obviously unfinished. */
  .placeholder-note {
    display: block; font-size: .85rem; font-style: italic; color: var(--ink-soft);
    border: 1.5px dashed color-mix(in srgb, var(--gold) 55%, transparent);
    background: color-mix(in srgb, var(--gold) 8%, transparent);
    border-radius: 12px; padding: 10px 14px; margin-top: 14px;
  }

  /* ============ Contact page ============ */
  .contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: start; }
  @media (max-width: 940px) { .contact-grid { grid-template-columns: 1fr; } }
  .form-card {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: clamp(26px, 4vw, 42px);
  }
  .form-card h3 { font-size: 1.35rem; margin-bottom: 6px; }
  .form-card > p { color: var(--ink-soft); font-size: .92rem; margin-bottom: 24px; }
  .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
  .field label { font-size: .85rem; font-weight: 600; }
  .field input, .field textarea {
    font: inherit; color: var(--ink);
    background: color-mix(in srgb, var(--paper-2) 40%, var(--card));
    border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
    transition: border-color .25s, box-shadow .25s;
  }
  .field textarea { resize: vertical; min-height: 110px; }
  .field input:focus, .field textarea:focus {
    outline: none; border-color: var(--pine);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pine) 18%, transparent);
  }
  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  @media (max-width: 540px) { .field-row { grid-template-columns: 1fr; } }
  .checkbox-field {
    display: flex; gap: 10px; align-items: flex-start;
    font-size: .92rem; color: var(--ink-soft); margin: 4px 0 22px; cursor: pointer;
  }
  .checkbox-field input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--pine); flex: none; cursor: pointer; }
  .form-status { display: none; margin-top: 16px; font-size: .9rem; color: var(--pine); font-weight: 600; }
  .form-status.visible { display: block; }
  .form-status.error { color: var(--coral); }
  .contact-facts {
    display: flex; flex-direction: column; gap: 18px;
  }
  .fact-card {
    background: var(--card); border: 1px solid var(--line); border-radius: 18px;
    padding: 22px 24px; display: flex; gap: 16px; align-items: flex-start;
    transition: transform .3s, box-shadow .3s;
  }
  .fact-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
  .fact-card .ico {
    width: 44px; height: 44px; border-radius: 13px; flex: none; display: grid; place-items: center;
    background: color-mix(in srgb, var(--pine) 10%, transparent); color: var(--pine);
  }
  .fact-card b { display: block; margin-bottom: 2px; }
  .fact-card span { color: var(--ink-soft); font-size: .9rem; }

  /* ============ Numbered step list (Kollaborációs tér) ============ */
  .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
  @media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }
  .step {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 30px 28px; position: relative;
    transition: transform .35s, box-shadow .35s;
  }
  .step:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
  .step .n {
    font-family: var(--serif); font-size: 2rem; color: var(--gold);
    display: block; margin-bottom: 12px;
  }
  .step h3 { font-size: 1.15rem; margin-bottom: 8px; }
  .step p { color: var(--ink-soft); font-size: .92rem; }

  /* ============ Reviews: external-platform rating badges + write-a-review CTA ============ */
  .review-band {
    display: flex; flex-direction: column; align-items: center; gap: 30px;
    margin-top: 52px; text-align: center;
  }
  .rating-badges { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
  .rating-badge {
    display: inline-flex; align-items: center; gap: 13px;
    background: var(--card); border: 1px solid var(--line); border-radius: 999px;
    padding: 12px 24px; box-shadow: var(--shadow);
    transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s;
  }
  .rating-badge:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
  .rating-badge .stars { color: var(--gold); letter-spacing: 2px; font-size: 1rem; }
  .rating-badge .rb-text b { font-family: var(--serif); font-size: 1.12rem; }
  .rating-badge .rb-text span { color: var(--ink-soft); font-size: .84rem; margin-left: 6px; }
  .review-invite {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: clamp(30px, 5vw, 46px); max-width: 46rem;
    position: relative; overflow: hidden;
  }
  .review-invite::before {
    content: ""; position: absolute; inset: -60% auto auto 50%; width: 120%; aspect-ratio: 1;
    transform: translateX(-50%);
    background: radial-gradient(circle, color-mix(in srgb, var(--gold) 16%, transparent), transparent 70%);
    pointer-events: none;
  }
  .review-invite > * { position: relative; }
  .review-invite h3 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin-bottom: 12px; }
  .review-invite p { color: var(--ink-soft); font-size: 1rem; max-width: 36rem; margin: 0 auto 26px; }
  .review-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }