/* ══════════════════════════════════════════════════════════════════════════
   Tiny Tales — shared site stylesheet.

   Moved verbatim out of index.html so every marketing surface (the homepage and
   the /lp landing page) renders from ONE source of truth. A component restyled
   here changes on both pages at once; never fork a copy of these rules into a
   page. Font urls are absolute (/fonts/...) because this file lives under /css/.
   ══════════════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/vazirmatn-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/vazirmatn-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF;
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/vazirmatn-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
  :root {
    --sun: #FF8A63;
    --peach: #FF8A63;
    --coral: #FF6B5C;
    --sky: #5E3A9E;
    --lavender: #5E3A9E;
    --mint: #1D9E75;
    --cream: #FFF9F3;
    --deep: #2E1A47;
    --mid: #3F2A6B;
    --soft: #F4EDFB;
    --gold: #5E3A9E;
    --white: #FFFFFF;
    --text: #2E1A47;
    --muted: #7B6EA0;
    --trust: #1D9E75;
    --card-bg: rgba(255,255,255,0.92);
    --radius: 24px;
    --radius-sm: 14px;
    --shadow: 0 8px 40px rgba(45,27,78,0.12);
    --shadow-lg: 0 20px 60px rgba(45,27,78,0.18);
    /* ── redesign system additions ── */
    --shadow-sm: 0 4px 20px rgba(45,27,78,0.07);
    --shadow-card: 0 10px 34px rgba(45,27,78,0.09);
    --ink: #221238;                     /* cinematic ink for dark panels */
    --hairline: rgba(94,58,158,0.14);   /* structural hairline */
    --hairline-strong: rgba(94,58,158,0.28);
    --hairline-soft: rgba(200,168,233,0.28);
    --star: #C8A8E9;                    /* the studio star mark */
    --card-radius: 22px;
    /* Single source of truth for how far the bottom-sheet CTA rests above the
       sheet floor. Must stay identical across every step of the order journey
       (and mirrored in public/account.html) — see the sticky .form-submit rule. */
    --sheet-cta-inset: 1.5rem;
    --sec-pad: 104px;                   /* desktop vertical section rhythm */
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  html { scroll-behavior: smooth; }

  body {
    font-family: 'Vazirmatn', sans-serif;
    background: var(--cream);
    color: var(--text);
    overflow-x: hidden;
    line-height: 1.8;
    direction: rtl;
    text-align: right;
  }

  h1, h2, h3, h4 {
    font-family: 'Vazirmatn', sans-serif;
    line-height: 1.4;
    font-weight: 800;
  }

  /* ─── STARS CANVAS ─── */
  #stars-canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.45;
  }

  /* ─── NAVBAR ─── */
  .navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5%;
    height: 74px;
    background: rgba(255,248,240,0.72);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border-bottom: 1px solid transparent;
    transition: background 0.3s, box-shadow 0.3s, border-color 0.3s, height 0.3s;
  }
  .navbar.scrolled {
    height: 66px;
    background: rgba(255,248,240,0.9);
    border-bottom-color: var(--hairline);
    box-shadow: 0 6px 30px rgba(45,27,78,0.09);
  }

  .nav-logo {
    font-family: 'Vazirmatn', sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--mid);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
  }
  .nav-logo .star-icon { font-size: 1.3rem; }

  .nav-links {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    list-style: none;
    flex-direction: row-reverse;
  }
  .nav-links a {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.2s, background 0.2s;
    padding: 8px 13px;
    border-radius: 50px;
    line-height: 1;
  }
  .nav-links a:hover { color: var(--deep); background: rgba(94,58,158,0.07); }

  /* account link gets a quiet outlined treatment to separate it from the plain
     nav links without competing with the primary order CTA */
  .nav-links a#nav-account {
    color: var(--mid);
    border: 1.5px solid var(--hairline-strong);
    font-weight: 700;
  }
  .nav-links a#nav-account:hover { border-color: var(--lavender); background: rgba(94,58,158,0.06); }

  .nav-cta {
    background: linear-gradient(135deg, #7B52C8, #5E3A9E);
    color: white !important;
    padding: 10px 22px !important;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 6px 18px rgba(94,58,158,0.32);
    transition: transform 0.2s, box-shadow 0.2s !important;
  }
  .nav-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(94,58,158,0.42) !important; background: linear-gradient(135deg, #7B52C8, #5E3A9E) !important; }

  .hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    width: 42px; height: 42px;
    align-items: center;
    border-radius: 13px;
    border: 1.5px solid var(--hairline-strong);
    background: rgba(255,255,255,0.5);
    transition: background 0.2s, border-color 0.2s;
  }
  .hamburger:active { background: rgba(94,58,158,0.08); }
  .hamburger span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--mid);
    border-radius: 4px;
    transition: all 0.3s;
  }
  .hamburger.active { background: rgba(94,58,158,0.08); border-color: var(--lavender); }
  .hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .hamburger.active span:nth-child(2) { opacity: 0; }
  .hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* ─── SECTIONS WRAPPER ─── */
  section { position: relative; z-index: 1; }

  /* ─── HERO ─── */
  .hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2.6rem;
    padding: 100px 0 60px;       /* no side padding — carousel runs full-bleed, edge to edge */
    background: linear-gradient(165deg, #F4EDFB 0%, #FCF4FB 55%, #FFF9F3 100%);
    overflow: hidden;
  }

  /* text block: stays within a readable measure and keeps its own side padding
     while the carousel above it bleeds to the viewport edges */
  .hero-inner {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 0 5%;
    text-align: center;
    direction: rtl;
  }

  .hero-content { width: 100%; }

  .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(200,168,233,0.25);
    border: 1.5px solid rgba(200,168,233,0.5);
    border-radius: 50px;
    padding: 6px 16px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--mid);
    margin-bottom: 1.2rem;
  }

  .hero h1 {
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    font-weight: 800;
    color: var(--deep);
    margin-bottom: 1.2rem;
    line-height: 1.5;
  }

  .hero h1 .highlight {
    background: linear-gradient(135deg, #7B52C8, var(--mid));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .hero-sub {
    font-size: 1.15rem;
    color: var(--muted);
    margin: 0 auto 2rem;
    max-width: 540px;
    font-weight: 500;
    line-height: 1.9;
  }

  .hero-btns {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
  }

  .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #7B52C8, #5E3A9E);
    color: white;
    padding: 16px 32px;
    border-radius: 50px;
    font-family: 'Vazirmatn', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 30px rgba(94,58,158,0.4);
    transition: transform 0.25s, box-shadow 0.25s;
    cursor: pointer;
    border: none;
  }
  .btn-primary:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 12px 40px rgba(94,58,158,0.5); }
  .btn-primary:active { transform: translateY(0) scale(0.98); }

  .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--mid);
    padding: 15px 28px;
    border-radius: 50px;
    font-family: 'Vazirmatn', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    border: 2px solid rgba(200,168,233,0.6);
    transition: all 0.25s;
    cursor: pointer;
  }
  .btn-secondary:hover { background: rgba(200,168,233,0.15); border-color: var(--lavender); transform: translateY(-2px); }

  .hero-stats {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
  }
  .hero-stat { display: flex; flex-direction: column; text-align: right; }
  .hero-stat .num {
    font-family: 'Vazirmatn', sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--mid);
    line-height: 1;
  }
  .hero-stat .lbl {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
    margin-top: 2px;
  }

  /* ─── HERO CAROUSEL ─── */
  .hero-visual {
    width: 100%;                 /* full-bleed: spans the whole viewport, sits above the copy */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }

  .hero-carousel {
    width: 100%;
    max-width: none;             /* no cap — the filmstrip runs corner to corner */
    margin: 0 auto;
    direction: ltr;              /* internal LTR track; page stays RTL */
    touch-action: pan-y;         /* horizontal swipe = carousel, vertical = page scroll */
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
    position: relative;
    z-index: 2;                  /* rides above the skeleton so the two can crossfade */
    opacity: 0;                  /* hidden until the first slide's media has decoded */
    transition: opacity .55s ease;
  }
  .hero-carousel.is-ready { opacity: 1; }
  .hero-carousel:active { cursor: grabbing; }

  .hc-viewport {
    overflow-x: clip;            /* clip the off-screen filmstrip horizontally (no page scroll)... */
    overflow-y: visible;         /* ...but let each avatar's round shadow spill below, uncut */
    padding: 8px 0 48px;         /* bottom room so the overhanging avatar sits clear of the copy */
  }

  .hc-track {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    will-change: transform;
  }

  /* The slide (not the frame) carries the scale so the avatar, which lives
     outside the clipped frame, scales together with it. */
  .hc-slide {
    position: relative;
    flex: 0 0 52%;               /* active fills ~half; big neighbours peek to both edges */
    opacity: 0.4;
    transform: scale(0.94);
    /* symmetric ease-in-out so slides glide into place (soft at both ends),
       not the launch-fast/ease-out feel of the previous curve */
    transition: opacity .78s cubic-bezier(.65,0,.35,1), transform .78s cubic-bezier(.65,0,.35,1);
  }
  .hc-slide.is-active { opacity: 1; transform: scale(1); }

  .hc-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 20px;
    overflow: hidden;            /* clips the video to rounded corners */
    background: var(--deep);
    border: 4px solid #fff;
    /* tight, self-contained card shadow — hugs each frame instead of pooling
       into one diffuse band under the whole filmstrip */
    box-shadow: 0 4px 14px rgba(46, 26, 71, 0.14);
    transition: box-shadow .78s cubic-bezier(.65,0,.35,1);
  }
  .hc-slide.is-active .hc-frame {
    box-shadow: 0 8px 22px rgba(46, 26, 71, 0.18);
  }

  /* Poster still sits behind the shared video in EVERY frame, so an inactive
     slide (or one whose clip is still buffering) always shows an image, never a
     blank/black box. The single reused <video> is layered on top of the active
     frame's poster. */
  .hc-frame .hc-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 1;
  }
  .hc-frame video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: transparent;   /* let the poster show through while buffering */
    z-index: 2;
  }

  /* Real photo: a full circle floating ON TOP of the animated frame, overhanging
     its bottom-left edge. It sits outside .hc-frame so it isn't clipped. */
  .hc-avatar {
    position: absolute;
    left: -1.5%;
    bottom: -9%;
    width: 20%;                  /* diameter = 20% of the video width */
    aspect-ratio: 1;
    border-radius: 50%;
    z-index: 3;
    animation: hc-avatar-float 4.6s ease-in-out infinite;
  }
  .hc-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 0 12px 26px rgba(46, 26, 71, 0.40), 0 3px 8px rgba(46, 26, 71, 0.22);
    display: block;
    /* Hidden until fully decoded (JS adds .is-loaded) so it never shows a
       half-painted photo, then fades in as one piece. */
    opacity: 0;
    transition: opacity .35s ease;
  }
  .hc-avatar img.is-loaded { opacity: 1; }

  @keyframes hc-avatar-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
  }

  /* ─── HERO SKELETON ───
     A placeholder filmstrip that holds the visual's exact geometry while the
     CDN posters + avatar photos stream in, so on a slow connection the hero
     rises into a finished-looking frame instead of a blank gap that pops. It
     mirrors .hc-viewport / .hc-slide / .hc-frame / .hc-avatar 1:1 (same widths,
     gap, radius, border, insets — desktop AND mobile) and crossfades out the
     moment the first slide's media decodes (JS adds .is-hidden). */
  .hero-skeleton {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;                   /* == .hc-track gap */
    padding: 8px 0 48px;         /* == .hc-viewport padding, so the card lines up */
    overflow: visible;           /* side cards clip on .hero; avatar overhangs freely */
    pointer-events: none;
    transition: opacity .55s ease, visibility 0s linear .55s;
  }
  .hero-skeleton.is-hidden { opacity: 0; visibility: hidden; }

  .sk-slide { position: relative; flex: 0 0 52%; }   /* == .hc-slide flex-basis */
  .sk-slide.sk-side { opacity: 0.4; transform: scale(0.94); }  /* == inactive slide */

  .sk-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 20px;
    border: 4px solid #fff;
    overflow: hidden;
    background:
      linear-gradient(135deg, #ece2f8 0%, #f4edfb 55%, #efe7f8 100%);
    box-shadow: 0 4px 14px rgba(46, 26, 71, 0.12);
  }
  .sk-slide.sk-main .sk-frame { box-shadow: 0 8px 22px rgba(46, 26, 71, 0.16); }

  .sk-avatar {
    position: absolute;
    left: -1.5%;
    bottom: -9%;                 /* == .hc-avatar placement */
    width: 20%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 4px solid #fff;
    overflow: hidden;
    background: #e6d9f4;
    box-shadow: 0 12px 26px rgba(46, 26, 71, 0.32), 0 3px 8px rgba(46, 26, 71, 0.20);
    z-index: 3;
  }

  /* One shimmer sweep across each placeholder — a single quiet motion, not a
     field of blinking blocks. Highlight is white so it reads on the lavender tint. */
  .sk-frame::after, .sk-avatar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
      transparent 25%, rgba(255, 255, 255, 0.62) 50%, transparent 75%);
    transform: translateX(-120%);
    animation: sk-sweep 1.7s ease-in-out infinite;
  }
  .sk-slide.sk-side .sk-frame::after { animation-delay: .12s; }

  @keyframes sk-sweep {
    0%   { transform: translateX(-120%); }
    100% { transform: translateX(120%); }
  }

  @media (prefers-reduced-motion: reduce) {
    /* No travelling sweep under reduced motion — a calm static placeholder. */
    .sk-frame::after, .sk-avatar::after { animation: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    /* The hero showcase is core content, not ambient decoration, so the slide
       glide is kept even under reduced-motion (leaving it on made iPhone 17 snap
       between slides). Only the looping avatar float — purely ambient motion — is
       dropped here. */
    .hc-avatar { animation: none; }
  }

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

  /* ─── SECTION STYLES ─── */
  .section-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(200,168,233,0.2);
    border: 1.5px solid rgba(200,168,233,0.4);
    border-radius: 50px;
    padding: 5px 14px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--mid);
    margin-bottom: 0.8rem;
    letter-spacing: 0;
  }

  .section-title {
    font-family: 'Vazirmatn', sans-serif;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    color: var(--deep);
    margin-bottom: 0.9rem;
    line-height: 1.35;
    letter-spacing: -0.4px;
  }

  .section-sub {
    font-size: 1.05rem;
    color: var(--muted);
    max-width: 540px;
    margin: 0 auto;
    font-weight: 500;
    line-height: 1.85;
  }

  .section-header {
    text-align: center;
    margin-bottom: 3.4rem;
  }

  /* ── Studio eyebrow: the ✦ star-mark flanked by hairlines. The single
     recurring signature that ties every section into one identity. ── */
  .kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    margin-bottom: 1.15rem;
    line-height: 1;
  }
  .kicker::before,
  .kicker::after {
    content: '';
    width: 30px;
    height: 1.5px;
    border-radius: 2px;
  }
  .kicker::before { background: linear-gradient(90deg, transparent, var(--star)); }
  .kicker::after  { background: linear-gradient(90deg, var(--star), transparent); }
  .kicker span {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    color: var(--lavender);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
  }
  .kicker span::before {
    content: '✦';
    color: var(--star);
    font-size: 0.8rem;
    line-height: 1;
  }
  /* eyebrow sitting on a dark panel */
  .kicker.on-dark span { color: rgba(255,255,255,0.82); }
  .kicker.on-dark span::before { color: var(--star); }
  .kicker.on-dark::before { background: linear-gradient(90deg, transparent, rgba(200,168,233,0.7)); }
  .kicker.on-dark::after  { background: linear-gradient(90deg, rgba(200,168,233,0.7), transparent); }

  /* ─── HOW IT WORKS ─── */
  .how-section {
    padding: var(--sec-pad) 5%;
    background: linear-gradient(180deg, #F4EDFB 0%, #FFF9F3 100%);
  }

  .steps-grid {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    position: relative;
  }

  .steps-grid::before {
    content: '';
    position: absolute;
    top: 70px;
    left: 16.5%;
    right: 16.5%;
    height: 3px;
    background: linear-gradient(90deg, var(--lavender), var(--mid));
    border-radius: 4px;
    z-index: 0;
  }

  .step-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 2rem 1.5rem 1.8rem;
    text-align: center;
    box-shadow: var(--shadow);
    border: 1.5px solid rgba(200,168,233,0.2);
    position: relative;
    z-index: 1;
    transition: transform 0.3s, box-shadow 0.3s;
  }
  .step-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }

  .step-num {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px; height: 28px;
    background: linear-gradient(135deg, var(--lavender), var(--mid));
    border-radius: 50%;
    color: white;
    font-family: 'Vazirmatn', sans-serif;
    font-weight: 800;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .step-icon {
    width: 90px; height: 90px;
    margin: 0 auto 1.2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .step-icon svg {
    width: 38px;
    height: 38px;
    stroke: var(--deep);
  }

  .step-icon.s1 { background: linear-gradient(135deg, #F4EDFB, #EBDDF7); }
  .step-icon.s2 { background: linear-gradient(135deg, #F4EDFB, #EBDDF7); }
  .step-icon.s3 { background: linear-gradient(135deg, #F4EDFB, #EBDDF7); }

  .step-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--deep);
    margin-bottom: 0.6rem;
  }

  .step-card p {
    font-size: 0.92rem;
    color: var(--muted);
    line-height: 1.8;
  }


  /* ─── PORTFOLIO / "NOW SHOWING" FILM CARDS ─── */
  .portfolio-section {
    padding: var(--sec-pad) 5%;
    background: var(--cream);
  }

  /* Every sample track is a centre-anchored carousel — see the SAMPLE
     CAROUSELS block further down for the layout rules. */

  /* each card is a framed film still: screen on top, credits below */
  .story-card {
    background: #fff;
    border-radius: var(--card-radius);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--hairline-soft, rgba(200,168,233,0.28));
    transition: transform 0.35s cubic-bezier(.2,.7,.2,1), box-shadow 0.35s;
    display: flex;
    flex-direction: column;
  }
  /* hover lift lives with the carousel rules below — it has to out-specify
     .reveal.visible, which also writes `transform` */

  /* the "screen" — video sits flush at the top, framed by a dark inset bar */
  .video-card { cursor: default; }
  .video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    background: #17102a;
    border-bottom: 3px solid var(--soft);
  }
  .video-wrapper iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: none;
  }

  .story-info {
    padding: 1.15rem 1.35rem 1.35rem;
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .story-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.55rem;
  }

  .story-name {
    font-family: 'Vazirmatn', sans-serif;
    font-size: 1.14rem;
    font-weight: 800;
    color: var(--deep);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    letter-spacing: -0.2px;
  }
  /* the star mark preceding each starring child's name */
  .story-name::before {
    content: '✦';
    color: var(--star);
    font-size: 0.75rem;
  }

  .story-age-group { display: flex; gap: 6px; flex-shrink: 0; }

  .story-age {
    background: var(--soft);
    color: var(--mid);
    font-size: 0.74rem;
    font-weight: 800;
    padding: 3px 11px;
    border-radius: 50px;
    white-space: nowrap;
  }

  .story-summary {
    font-size: 0.88rem;
    color: var(--muted);
    line-height: 1.75;
    font-style: normal;
  }

  .story-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px dashed var(--hairline);
  }

  .tag {
    background: transparent;
    border: 1px solid var(--hairline-strong);
    color: var(--mid);
    font-size: 0.74rem;
    font-weight: 700;
    padding: 3px 11px;
    border-radius: 50px;
  }

  /* ─── SAMPLE GROUPS — one track per production tier (Woody / REX) ─── */
  .samples-group { max-width: 1000px; margin: 0 auto; }
  .samples-group + .samples-group { margin-top: 3.4rem; }

  .samples-group-head {
    margin-bottom: 1.5rem;
    text-align: right;
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  .samples-plan-thumb {
    width: 66px;
    height: 66px;
    flex-shrink: 0;
    object-fit: cover;
    object-position: center top;
    border-radius: 16px;
    border: 2px solid #fff;
    box-shadow: 0 6px 18px rgba(45,27,78,0.18), 0 0 0 1px var(--hairline-soft);
  }
  .samples-group-headtext { min-width: 0; }
  .samples-plan-chip {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.2px;
    color: #fff;
    background: var(--lavender);
    padding: 4px 13px;
    border-radius: 50px;
    margin-bottom: 0.7rem;
  }
  /* all three plan chips (Woody / REX / Buzz) share the base lavender fill — kept همرنگ */
  .samples-group-title {
    font-family: 'Vazirmatn', sans-serif;
    font-size: 1.22rem;
    font-weight: 800;
    color: var(--deep);
    letter-spacing: -0.2px;
    margin: 0;
  }
  .samples-group-sub {
    font-size: 0.9rem;
    color: var(--muted);
    line-height: 1.75;
    margin: 0.4rem 0 0;
    max-width: 46ch;
  }

  /* ─── SAMPLE CAROUSELS — centre-anchored tracks ──────────────────────
     Every track is a horizontal carousel on every viewport. On desktop the
     row is anchored to the middle rather than the start edge: a track whose
     samples all fit sits centred under its header, and a track that overflows
     opens at its midpoint (see initSampleTracks()) so there are as many
     samples to reach to the left as to the right. Card order is never
     touched — only where the row is parked. `safe` keeps the first card
     reachable once the row is wider than the viewport. */
  .samples-track { position: relative; }
  .portfolio-grid {
    display: flex;
    justify-content: safe center;
    max-width: none;
    width: 100vw;
    margin-inline: calc(50% - 50vw);           /* full-bleed row */
    /* inset both edges to the 1000px column so a centred row lines up under
       the header, then bleeds symmetrically past it while scrolling */
    padding: 16px max(20px, calc(50vw - 500px));
    gap: 1.6rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .portfolio-grid::-webkit-scrollbar { display: none; }
  /* No scroll-snap on desktop: an even-numbered track parks between its two
     middle cards, and snapping would tug the row off that midpoint. The
     controls step exactly one card pitch, so the row stays aligned anyway.
     Mobile re-enables mandatory snap, where thumb swiping needs it. */
  .portfolio-grid > .story-card {
    flex: 0 0 auto;
    width: min(420px, 78vw);
  }
  .portfolio-grid > .story-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
  /* Fade the cards in without the vertical slide: inside a horizontal track
     that motion fights the direction the reader is actually scrolling. */
  .portfolio-grid > .story-card.reveal:not(.visible) { transform: none; }

  /* ─── REX REELS SHELF ───────────────────────────────────────────────
     The REX track is deliberately unlike the Woody/Buzz tracks: portrait
     9:16 cards that carry the video edge-to-edge with no credits panel,
     flicked through like an Instagram reels feed. Same treatment on every
     viewport — this IS the format. */
  .samples-group.is-reels .portfolio-grid { gap: 0.9rem; }
  .samples-group.is-reels .story-card {
    width: 258px;
    max-width: 74vw;
    border: none;
    border-radius: 22px;
    background: #17102a;                        /* fills any letterbox */
    box-shadow: 0 16px 38px rgba(45,27,78,0.24);
  }
  .samples-group.is-reels .story-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px rgba(45,27,78,0.30);
  }
  .samples-group.is-reels .video-wrapper {
    padding-bottom: 177.78%;                    /* 9:16 portrait reel */
    border-bottom: none;
    border-radius: 22px;
  }
  /* The REX clips are audio-player videos: a portrait artwork baked into a
     16:9 frame with black rails on the left and right. Fitting that 16:9
     frame into a portrait card would double the black (side rails + our own
     top/bottom letterbox). Instead COVER the card: keep the iframe true 16:9
     (no letterbox) and blow it up so only its central column — artwork,
     title, waveform — fills the reel, clipping the black rails away.
     width = height × (16/9)² ≈ 316% renders the iframe at 16:9 when its
     height fills a 9:16 box; the wrapper's overflow:hidden clips the sides. */
  .samples-group.is-reels .video-wrapper iframe {
    top: 50%;
    left: 50%;
    width: 316%;
    height: 100%;
    transform: translate(-50%, -50%);
  }

  /* ─── PRICING — three production tiers ─── */
  .pricing-section {
    padding: var(--sec-pad) 5%;
    background: linear-gradient(180deg, #F6F0FD 0%, #FFF9F3 100%);
  }

  .pricing-grid {
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
    align-items: stretch;
  }

  .price-card {
    position: relative;
    background: #fff;
    border-radius: var(--card-radius);
    padding: 1.7rem 1.6rem 1.8rem;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--hairline-soft);
    transition: transform 0.3s, box-shadow 0.3s;
    text-align: right;
    direction: rtl;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .price-card:hover,
  .price-card.visible:hover { transform: translateY(-6px) !important; box-shadow: var(--shadow-lg); }

  /* ── card head: thumbnail + identity, with the tier chip pinned corner ── */
  .pc-tier {
    position: absolute;
    top: 0;
    left: 0;
    font-family: 'Vazirmatn', sans-serif;
    font-size: 0.68rem;
    font-weight: 800;
    color: #fff;
    background: var(--lavender);
    padding: 5px 13px;
    border-radius: 0 var(--card-radius) 0 13px;
    letter-spacing: 0.1px;
  }
  .pc-head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding-top: 0.3rem;
  }
  .pc-thumb {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    object-fit: cover;
    object-position: center top;
    border-radius: 15px;
    border: 2px solid #fff;
    box-shadow: 0 6px 18px rgba(45,27,78,0.18), 0 0 0 1px var(--hairline-soft);
  }
  .pc-id { min-width: 0; }
  .pc-name {
    font-family: 'Vazirmatn', sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--deep);
    line-height: 1.2;
    letter-spacing: -0.3px;
  }
  .pc-type {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--muted);
    line-height: 1.5;
    margin-top: 3px;
  }

  /* ── price block — mirrors the step-4 plan picker exactly: a subtle coral-tinted
     panel, discount chip + struck original on one side, final price on the other ── */
  .pc-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    margin: 1.2rem 0 1.3rem;
    padding: 0.8rem;
    border-radius: 14px;
    background: rgba(255,138,99,0.09);
  }
  .pc-price-side { display: flex; flex-direction: column; align-items: flex-start; gap: 0.38rem; min-width: 0; }
  .pc-save {
    font-size: 0.7rem;
    font-weight: 800;
    color: #fff;
    background: var(--coral);
    padding: 0.26rem 0.55rem;
    border-radius: 7px;
    white-space: nowrap;
  }
  .pc-old {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--muted);
    text-decoration: line-through;
    white-space: nowrap;
  }
  .pc-now {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    font-family: 'Vazirmatn', sans-serif;
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--deep);
    line-height: 1.1;
    letter-spacing: -0.5px;
    white-space: nowrap;
  }
  .pc-now .unit { font-size: 0.78rem; font-weight: 700; color: var(--muted); letter-spacing: 0; }

  /* ── trimmed feature list — 3 essentials on the face, rest behind the toggle ── */
  .price-features {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }
  .price-features li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 9px;
    font-size: 0.88rem;
    color: var(--text);
    line-height: 1.6;
  }
  .price-features li::before {
    content: '✓';
    color: var(--lavender);
    font-weight: 800;
    font-size: 0.85rem;
    margin-top: 1px;
  }
  .price-features.collapsed li.extra { display: none; }

  .plan-details-toggle {
    align-self: flex-start;
    background: none;
    border: none;
    color: var(--mid);
    font-family: 'Vazirmatn', sans-serif;
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    margin: -0.1rem 0 1rem;
    padding: 4px;
  }
  .plan-details-toggle:hover { color: var(--deep); }

  /* CTA pinned to the bottom so cards align regardless of feature count */
  .price-card .btn-primary { width: 100%; justify-content: center; font-size: 1rem; padding: 14px 24px; margin-top: auto; }

  .pricing-urgency {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Vazirmatn', sans-serif;
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--lavender);
    background: rgba(94,58,158,0.08);
    border: 1.5px solid rgba(94,58,158,0.25);
    border-radius: 50px;
    padding: 6px 18px;
    margin-top: 0.9rem;
    direction: rtl;
  }
  .pricing-urgency::before {
    content: '✦';
    color: var(--coral);
    font-size: 0.8rem;
  }

  .pricing-help {
    text-align: center;
    margin: 2.2rem auto 0;
    font-family: 'Vazirmatn', sans-serif;
    font-size: 0.95rem;
    color: var(--muted);
    direction: rtl;
  }
  .pricing-help button {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--lavender);
    font-family: 'Vazirmatn', sans-serif;
    font-weight: 800;
    font-size: 0.95rem;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* ─── ORDER FORM ─── */
  .order-section {
    padding: 90px 5%;
    background: var(--cream);
  }

  .order-inner {
    max-width: 700px;
    margin: 0 auto;
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 3rem;
    box-shadow: var(--shadow-lg);
    border: 1.5px solid rgba(200,168,233,0.25);
  }

  .trust-strip {
    max-width: 760px;
    margin: 0 auto 1.6rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.7rem;
  }
  .trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.45rem;
    background: #fff;
    border: 1.5px solid rgba(94,58,158,0.14);
    border-radius: var(--radius-sm);
    padding: 0.9rem 0.6rem;
  }
  .trust-item .ti-ico {
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(29,158,117,0.12);
    color: var(--trust);
    flex-shrink: 0;
  }
  .trust-item .ti-ico svg { width: 18px; height: 18px; }
  .trust-item span {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--deep);
    line-height: 1.4;
  }
  @media (max-width: 768px) {
    .order-section { display: none; }
    .final-cta { display: none; }
    .trust-strip { grid-template-columns: repeat(2, 1fr); }
  }

  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 1.2rem;
  }

  .form-group.full { grid-column: 1 / -1; }

  label {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--mid);
    display: flex;
    align-items: center;
    gap: 5px;
    flex-direction: row-reverse;
    justify-content: flex-end;
  }


  input, select, textarea {
    font-family: 'Vazirmatn', sans-serif;
    /* Must stay >= 16px: iOS Safari auto-zooms the page when a focused input's
       font-size is under 16px. Anything smaller re-introduces the zoom-on-tap bug. */
    font-size: 16px;
    color: var(--text);
    background: #fff;
    border: 2px solid rgba(200,168,233,0.35);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
    text-align: right;
    direction: rtl;
  }
  input:focus, select:focus, textarea:focus {
    border-color: var(--lavender);
    box-shadow: 0 0 0 3px rgba(94,58,158,0.1);
  }

  select {
    appearance: none;
    -webkit-appearance: none;
    padding-left: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239B7EC8' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 12px center;
  }
  textarea { resize: vertical; min-height: 100px; background: #fff; }
  input::placeholder, textarea::placeholder { color: #c4b8d4; opacity: 1; font-weight: 400; }
  #phone { direction: ltr; text-align: left; }
  .form-error-inline { color: #cc3333; font-size: 0.85rem; font-weight: 600; margin: 0.25rem 0 0.5rem; text-align: right; }

  /* When a step is shown it is display:flex (set inline); stack its contents. */
  .form-step { flex-direction: column; }
  #child-select-group, #child-edit-group { flex-direction: column; }

  .form-submit { margin-top: 1rem; }
  .form-submit .btn-primary { width: 100%; justify-content: center; font-size: 1.05rem; padding: 16px; }
  .step-actions { display: flex; gap: 0.6rem; align-items: stretch; }
  .step-actions .step-next { flex: 1; width: auto; }
  .step-actions .btn-back {
    flex: 0 0 auto;
    width: auto;
    background: #f3edfa;
    color: var(--deep);
    border: 2px solid #c9b8e0;
    border-radius: 50px;
    padding: 14px 22px;
    font-family: 'Vazirmatn', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
  }
  .step-actions .btn-back:hover { background: #e9dff5; border-color: var(--lavender); }

  /* ─── SHARED CHOICE CARD (gender / plan / child picker) ─── */
  .choice-card {
    border: 1.5px solid rgba(94,58,158,0.18);
    border-radius: 12px;
    background: transparent;
    cursor: pointer;
    font-family: 'Vazirmatn', sans-serif;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  }
  .choice-card.selected {
    border-color: var(--lavender);
    background: rgba(94,58,158,0.06);
    box-shadow: 0 0 0 2px rgba(94,58,158,0.12);
  }
  .choice-radio {
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid #c9b8e0; flex-shrink: 0; display: inline-block;
    transition: background 0.2s, border-color 0.2s;
  }
  .choice-card.selected .choice-radio { background: var(--lavender); border-color: var(--lavender); }

  /* ─── PLAN PICKER (order form step 4) — bold decision cards ─── */
  .plan-picker-v2 { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 0.35rem; }
  .plan-card-v2 {
    position: relative;
    border: 1.5px solid rgba(94,58,158,0.16);
    border-radius: 16px;
    background: #fff;
    padding: 0.9rem 0.95rem;
    cursor: pointer;
    direction: rtl;
    font-family: 'Vazirmatn', sans-serif;
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s, transform 0.18s;
  }
  .plan-card-v2:hover { border-color: rgba(94,58,158,0.42); }
  .plan-card-v2.is-popular { border-color: rgba(94,58,158,0.4); box-shadow: 0 5px 16px rgba(94,58,158,0.09); }
  .plan-card-v2.selected {
    border-color: var(--lavender);
    background: linear-gradient(180deg, rgba(94,58,158,0.055), rgba(94,58,158,0.015));
    box-shadow: 0 8px 22px rgba(94,58,158,0.17);
  }
  .plan-v2-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; }
  .plan-v2-titles { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
  .plan-v2-name { font-size: 1.05rem; font-weight: 800; color: var(--deep); line-height: 1.2; }
  .plan-v2-en {
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em;
    color: var(--lavender); opacity: 0.75; text-transform: uppercase; direction: ltr; text-align: right;
  }
  .plan-v2-check {
    width: 24px; height: 24px; border-radius: 50%;
    border: 2px solid #cdbce6; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; transition: background 0.18s, border-color 0.18s;
  }
  .plan-v2-check svg { width: 13px; height: 13px; opacity: 0; transition: opacity 0.15s; }
  .plan-card-v2.selected .plan-v2-check { background: var(--lavender); border-color: var(--lavender); }
  .plan-card-v2.selected .plan-v2-check svg { opacity: 1; }
  .plan-v2-desc { font-size: 0.8rem; color: var(--muted); margin-top: 0.5rem; line-height: 1.55; }
  .plan-v2-specs { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.65rem; }
  .plan-v2-chip {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.68rem; font-weight: 700; color: var(--mid);
    background: rgba(94,58,158,0.07); padding: 0.26rem 0.52rem; border-radius: 8px;
  }
  .plan-v2-chip svg {
    width: 13px; height: 13px; stroke: var(--lavender); stroke-width: 2;
    fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0;
  }
  .plan-v2-price {
    display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
    margin-top: 0.8rem; padding: 0.55rem 0.7rem; border-radius: 12px;
    background: rgba(255,138,99,0.09);
  }
  /* right column (RTL start): discount label above the struck original price */
  .plan-v2-price-side { display: flex; flex-direction: column; align-items: flex-start; gap: 0.32rem; }
  .plan-v2-save {
    font-size: 0.68rem; font-weight: 800; color: #fff; background: var(--coral);
    padding: 0.22rem 0.55rem; border-radius: 6px; white-space: nowrap;
  }
  .plan-v2-old { font-size: 0.78rem; font-weight: 700; color: var(--muted); text-decoration: line-through; white-space: nowrap; }
  /* left column (RTL end): the final price, larger and bolder */
  .plan-v2-price-main { display: flex; flex-direction: column; align-items: flex-end; }
  .plan-v2-now { font-size: 1.45rem; font-weight: 800; color: var(--deep); line-height: 1.1; white-space: nowrap; }
  .plan-v2-now span { font-size: 0.78rem; font-weight: 700; }

  /* ─── CHILD PROFILE FORM (order form step 3) — no wrapper box; fields sit on the sheet ─── */
  .child-card {
    background: transparent;
    border: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    margin-bottom: 1.2rem;
  }
  /* identity hero — a live profile avatar reframes the step as building the child's profile */
  .child-hero { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; margin-bottom: 0.35rem; }
  .child-avatar {
    width: 78px; height: 78px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(140deg, rgba(94,58,158,0.18), rgba(255,138,99,0.16));
    color: var(--lavender);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.9rem; font-family: 'Vazirmatn', sans-serif;
    box-shadow: 0 0 0 5px rgba(94,58,158,0.06);
    transition: transform 0.2s;
  }
  .child-avatar.is-empty { color: #b6a2d4; }
  .child-avatar svg { width: 36px; height: 36px; }
  .child-hero-field { width: 100%; display: flex; flex-direction: column; gap: 6px; }
  .child-hero-field input { background: #fff; }
  .child-identity-field { flex: 1; display: flex; flex-direction: column; gap: 6px; }
  .child-card-group { display: flex; flex-direction: column; gap: 8px; }

  /* gender — segmented control (selected segment fills lavender) */
  .gender-seg { display: flex; gap: 5px; direction: rtl; background: #f0e9f9; border-radius: 13px; padding: 5px; }
  .gender-seg .gender-btn {
    flex: 1; border: none; background: transparent; cursor: pointer; border-radius: 9px;
    padding: 0.74rem 1rem; font-family: 'Vazirmatn', sans-serif; font-weight: 700; font-size: 0.95rem;
    color: var(--muted); transition: background 0.18s, color 0.18s, box-shadow 0.18s;
  }
  .gender-seg .gender-btn.selected {
    background: var(--lavender); color: #fff; box-shadow: 0 3px 10px rgba(94,58,158,0.28);
  }

  /* birthdate — tappable field with calendar + chevron affordances */
  .birthdate-field {
    width: 100%; display: flex; align-items: center; gap: 0.6rem;
    text-align: right; direction: rtl; font-family: 'Vazirmatn', sans-serif;
    font-size: 0.98rem; color: var(--text); background: #fff;
    border: 2px solid rgba(200,168,233,0.35); border-radius: var(--radius-sm);
    padding: 12px 16px; cursor: pointer; transition: border-color 0.18s, box-shadow 0.18s;
  }
  .birthdate-field:hover { border-color: rgba(94,58,158,0.5); }
  .birthdate-field .bd-cal { width: 19px; height: 19px; stroke: var(--lavender); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
  .birthdate-field .bd-chev { width: 15px; height: 15px; stroke: #b6a2d4; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; margin-inline-start: auto; flex-shrink: 0; }
  #birthdate-field-text { flex: 1; }
  .birthdate-placeholder { color: #c4b8d4; }

  .choice-list { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.35rem; padding-bottom: 1.25rem; }

  /* ─── CHILD SUMMARY CARD (read-only, selectable) — matches the plan-card DNA ─── */
  .child-summary { padding: 0.9rem 1rem; border-radius: 16px; }
  .choice-card.child-summary.selected { box-shadow: 0 8px 22px rgba(94,58,158,0.15); }
  .child-summary-head { display: flex; align-items: center; gap: 0.7rem; direction: rtl; }
  .child-avatar-sm {
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(140deg, rgba(94,58,158,0.16), rgba(255,138,99,0.14)); color: var(--lavender);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.05rem; font-family: 'Vazirmatn', sans-serif;
  }
  .child-summary-idwrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; }
  .child-summary-name {
    font-family: 'Vazirmatn', sans-serif; font-weight: 800; font-size: 1rem; color: var(--deep); line-height: 1.2;
  }
  .child-summary-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
  .cs-chip {
    display: inline-flex; align-items: center; gap: 0.28rem;
    font-family: 'Vazirmatn', sans-serif; font-size: 0.7rem; font-weight: 700; color: var(--mid);
    background: rgba(94,58,158,0.07); padding: 0.2rem 0.46rem; border-radius: 7px;
  }
  .cs-chip svg { width: 12px; height: 12px; stroke: var(--lavender); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
  .child-summary-interests {
    direction: rtl; margin: 0.7rem 0 0; padding-top: 0.7rem; border-top: 1px solid rgba(94,58,158,0.1);
    font-family: 'Vazirmatn', sans-serif; font-size: 0.82rem; color: var(--muted); line-height: 1.6;
    display: flex; gap: 0.4rem; align-items: baseline;
  }
  .child-summary-interests b { color: var(--mid); font-weight: 700; flex-shrink: 0; }
  .child-summary-interests span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .child-summary-incomplete {
    font-family: 'Vazirmatn', sans-serif; font-size: 0.8rem; font-weight: 700; color: var(--coral);
  }
  .child-summary-edit-icon {
    width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--lavender); background: rgba(94,58,158,0.08); border: none; cursor: pointer;
    transition: background 0.18s, color 0.18s;
  }
  .child-summary-edit-icon:hover { background: rgba(94,58,158,0.16); color: var(--mid); }
  .child-summary-edit-icon svg { width: 15px; height: 15px; }
  .child-check {
    width: 24px; height: 24px; border-radius: 50%; border: 2px solid #cdbce6; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; color: #fff; transition: background 0.18s, border-color 0.18s;
  }
  .child-check svg { width: 13px; height: 13px; opacity: 0; transition: opacity 0.15s; }
  .choice-card.child-summary.selected .child-check { background: var(--lavender); border-color: var(--lavender); }
  .choice-card.child-summary.selected .child-check svg { opacity: 1; }

  /* ─── ADD-NEW-CHILD CARD — echoes the avatar motif ─── */
  .child-add-card {
    display: flex; align-items: center; gap: 0.7rem;
    width: 100%; padding: 0.8rem 1rem; direction: rtl;
    font-family: 'Vazirmatn', sans-serif; font-size: 0.92rem; font-weight: 700; color: var(--lavender);
    background: transparent;
    border: 1.5px dashed rgba(94,58,158,0.4); border-radius: 16px; cursor: pointer;
    transition: background 0.18s, border-color 0.18s;
  }
  .child-add-card:hover { background: rgba(94,58,158,0.06); border-color: var(--lavender); }
  .child-add-card .add-av {
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(94,58,158,0.09); color: var(--lavender);
  }
  .child-add-card .add-av svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

  /* ─── BIRTHDATE WHEEL PICKER ─── */
  .date-picker-overlay {
    display: none; position: fixed; inset: 0; z-index: 2600;
    background: rgba(20, 8, 45, 0.55); align-items: flex-end;
    opacity: 0; transition: opacity 0.28s ease;
  }
  .date-picker-overlay.active { display: flex; }
  .date-picker-overlay.open { opacity: 1; }
  .date-picker-panel {
    width: 100%; background: var(--cream); border-radius: 24px 24px 0 0;
    padding: 0.5rem 1rem 1.5rem; transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .date-picker-overlay.open .date-picker-panel { transform: translateY(0); }
  .date-picker-hdr {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 4px; direction: rtl;
    font-family: 'Vazirmatn', sans-serif; font-weight: 800; font-size: 1rem; color: var(--deep);
  }
  .dp-cancel, .dp-confirm {
    border: none; background: none; cursor: pointer;
    font-family: 'Vazirmatn', sans-serif; font-weight: 700; font-size: 0.9rem;
    padding: 6px 4px;
  }
  .dp-cancel { color: var(--muted); }
  .dp-confirm { color: var(--lavender); font-weight: 800; }
  .wheel-wrap { position: relative; display: flex; direction: rtl; height: 215px; margin-top: 0.5rem; }
  .wheel-highlight {
    position: absolute; top: 50%; left: 0; right: 0; height: 43px; margin-top: -21.5px;
    border-top: 1.5px solid rgba(94,58,158,0.25); border-bottom: 1.5px solid rgba(94,58,158,0.25);
    background: rgba(200,168,233,0.08); pointer-events: none;
  }
  .wheel-col {
    flex: 1; height: 215px; overflow-y: auto; scroll-snap-type: y mandatory;
    overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch;
  }
  .wheel-col::-webkit-scrollbar { display: none; }
  .wheel-list { list-style: none; padding: 86px 0; margin: 0; }
  .wheel-list li {
    height: 43px; display: flex; align-items: center; justify-content: center;
    scroll-snap-align: center; font-family: 'Vazirmatn', sans-serif;
    font-weight: 700; font-size: 1rem; color: #c4b8d4; transition: color 0.15s;
  }
  .wheel-list li.wheel-active { color: var(--deep); font-weight: 800; font-size: 1.05rem; }

  .form-note {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }

  /* ─── PROGRESS STEPPER ─── */
  .form-stepper { margin-bottom: 1.6rem; }
  .stepper-track { display: flex; gap: 6px; direction: rtl; }
  .stepper-seg {
    flex: 1; height: 5px; border-radius: 50px;
    background: #e6dcf2; transition: background 0.35s ease;
  }
  .stepper-seg.filled { background: var(--lavender); }
  .stepper-label {
    display: flex; align-items: center; gap: 7px;
    margin-top: 0.65rem; direction: rtl;
    font-size: 0.82rem; font-weight: 700;
  }
  .stepper-count { color: var(--muted); }
  .stepper-sep { color: #c9b8e0; }
  .stepper-title { color: var(--deep); font-weight: 800; }

  /* ─── OTP SEGMENTED INPUT ─── */
  #otp-group { margin-top: 1.25rem; }
  .otp-phone-line {
    font-size: 0.86rem; color: var(--muted); line-height: 1.95;
    text-align: center; margin-bottom: 1.1rem; direction: rtl;
  }
  .otp-phone-line bdi { font-weight: 800; color: var(--deep); unicode-bidi: isolate; }
  .otp-edit {
    background: none; border: none; padding: 0 2px;
    color: var(--lavender); font-family: 'Vazirmatn', sans-serif;
    font-weight: 800; font-size: 0.86rem; cursor: pointer;
    text-decoration: underline; text-underline-offset: 3px;
  }
  .otp-boxes {
    display: flex; gap: 0.6rem; justify-content: center;
    direction: ltr; margin: 0 auto 0.4rem;
  }
  .otp-box {
    width: 56px; height: 64px; padding: 0;
    text-align: center; font-size: 1.6rem; font-weight: 800;
    color: var(--deep); direction: ltr;
    border: 2px solid #d8c9ee; border-radius: 14px;
    background: #faf7ff; caret-color: var(--lavender);
    transition: border-color 0.18s, background 0.18s, box-shadow 0.18s, transform 0.1s;
  }
  .otp-box:focus {
    border-color: var(--lavender); background: #fff;
    box-shadow: 0 0 0 4px rgba(94,58,158,0.14);
  }
  .otp-box.filled { border-color: var(--lavender); background: rgba(94,58,158,0.07); }
  .otp-boxes.error .otp-box {
    border-color: #cc3333; background: #fff5f5;
    animation: otp-shake 0.4s;
  }
  @keyframes otp-shake {
    0%,100% { transform: translateX(0); }
    20% { transform: translateX(-7px); }
    40% { transform: translateX(7px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(5px); }
  }
  .otp-resend-line { text-align: center; margin-top: 1rem; }
  #otp-resend {
    background: none; border: none;
    font-family: 'Vazirmatn', sans-serif; font-size: 0.86rem; font-weight: 800;
    color: var(--lavender); cursor: pointer; padding: 6px 4px;
    text-decoration: underline; text-underline-offset: 3px;
  }
  #otp-resend:disabled {
    color: var(--muted); text-decoration: none; cursor: default;
  }
  .otp-error {
    color: #cc3333; font-size: 0.85rem; font-weight: 700;
    text-align: center; margin: 0.6rem 0 0; background: none;
  }

  .success-msg {
    display: none;
    text-align: center;
    padding: 2.5rem;
    animation: pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .success-msg .success-badge {
    width: 78px; height: 78px; margin: 0 auto 1.3rem;
    border-radius: 50%; background: rgba(94,58,158,0.1);
    display: flex; align-items: center; justify-content: center;
  }
  .success-msg .success-badge svg { width: 40px; height: 40px; }
  .success-msg h3 { font-size: 1.5rem; color: var(--deep); margin-bottom: 0.5rem; }
  .success-msg p { color: var(--muted); font-size: 1rem; line-height: 1.8; }
  .success-msg.show { display: block; }

  @keyframes pop-in {
    from { opacity: 0; transform: scale(0.7); }
    to { opacity: 1; transform: scale(1); }
  }

  /* ─── TESTIMONIALS ─── */
  .testimonials-section {
    padding: var(--sec-pad) 5%;
    background: linear-gradient(180deg, #F6F0FD 0%, #FFF9F3 100%);
  }

  .testimonials-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
    align-items: start;
  }

  .testi-card {
    background: #fff;
    border-radius: var(--card-radius);
    padding: 1.9rem 1.7rem 1.6rem;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--hairline-soft);
    position: relative;
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
  }
  .testi-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

  /* rating leads the card */
  .stars {
    color: #E9BE63;
    font-size: 1rem;
    letter-spacing: 3px;
    direction: ltr;
  }

  .quote-mark {
    font-size: 3.6rem;
    line-height: 0.7;
    color: var(--star);
    opacity: 0.32;
    font-family: Georgia, serif;
    font-weight: 900;
    position: absolute;
    top: 1.4rem;
    left: 1.5rem;
  }

  .testi-text {
    font-size: 0.95rem;
    color: var(--text);
    line-height: 1.95;
    margin: 1rem 0 1.5rem;
    font-style: normal;
    position: relative;
    z-index: 1;
  }

  .testi-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 1.1rem;
    border-top: 1px solid var(--hairline);
  }

  .testi-author {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-direction: row;
    justify-content: flex-end;
    text-align: right;
  }

  .testi-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7B52C8, #5E3A9E);
    color: #fff;
    font-family: 'Vazirmatn', sans-serif;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(94,58,158,0.28);
  }

  .testi-name {
    font-family: 'Vazirmatn', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    color: var(--deep);
  }
  .testi-role { font-size: 0.8rem; color: var(--muted); }

  /* ─── FAQ ─── */
  .faq-section {
    padding: var(--sec-pad) 5%;
    background: var(--cream);
  }

  .faq-inner {
    max-width: 760px;
    margin: 0 auto;
  }

  .faq-item {
    background: #fff;
    border-radius: 16px;
    border: 1px solid var(--hairline-soft);
    margin-bottom: 0.7rem;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s, border-color 0.2s;
  }
  .faq-item.open { box-shadow: var(--shadow); border-color: var(--hairline-strong); }

  .faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.4rem;
    cursor: pointer;
    font-family: 'Vazirmatn', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--deep);
    user-select: none;
    gap: 1rem;
    flex-direction: row;
    direction: rtl;
    transition: color 0.2s;
  }
  .faq-item.open .faq-q { color: var(--lavender); }

  /* animated plus → minus affordance */
  .faq-chevron {
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 1.5px solid var(--hairline-strong);
    position: relative;
    flex-shrink: 0;
    font-size: 0;
    transition: background 0.25s, border-color 0.25s;
  }
  .faq-chevron::before,
  .faq-chevron::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    background: var(--mid);
    border-radius: 2px;
    transition: transform 0.3s cubic-bezier(.2,.7,.2,1), background 0.25s, opacity 0.2s;
  }
  .faq-chevron::before { width: 11px; height: 2px; transform: translate(-50%, -50%); }
  .faq-chevron::after  { width: 2px; height: 11px; transform: translate(-50%, -50%); }
  .faq-item.open .faq-chevron { background: var(--lavender); border-color: var(--lavender); }
  .faq-item.open .faq-chevron::before,
  .faq-item.open .faq-chevron::after { background: #fff; }
  .faq-item.open .faq-chevron::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; }

  .faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
  }
  .faq-item.open .faq-a { max-height: 520px; }

  .faq-a p {
    padding: 0 1.4rem 1.4rem;
    font-size: 0.93rem;
    color: var(--muted);
    line-height: 1.95;
  }

  /* ─── FINAL CTA — cinematic starlit band ─── */
  .final-cta {
    padding: 108px 5%;
    background: radial-gradient(ellipse 90% 120% at 50% -10%, #3a2568 0%, var(--deep) 52%, var(--ink) 100%);
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  /* sprinkled starfield across the band */
  .final-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(1.6px 1.6px at 12% 24%, rgba(255,255,255,0.9), transparent),
      radial-gradient(1.4px 1.4px at 28% 68%, rgba(200,168,233,0.85), transparent),
      radial-gradient(1.8px 1.8px at 44% 18%, rgba(255,255,255,0.75), transparent),
      radial-gradient(1.3px 1.3px at 62% 78%, rgba(255,255,255,0.7), transparent),
      radial-gradient(1.7px 1.7px at 78% 34%, rgba(200,168,233,0.9), transparent),
      radial-gradient(1.4px 1.4px at 88% 62%, rgba(255,255,255,0.8), transparent),
      radial-gradient(1.5px 1.5px at 55% 46%, rgba(255,255,255,0.55), transparent),
      radial-gradient(1.3px 1.3px at 35% 40%, rgba(255,255,255,0.5), transparent);
    opacity: 0.75;
    pointer-events: none;
  }

  .final-cta-inner { position: relative; z-index: 1; max-width: 700px; margin: 0 auto; }

  .final-cta h2 {
    font-size: clamp(1.9rem, 4.5vw, 2.9rem);
    font-weight: 800;
    color: #fff;
    margin-bottom: 1rem;
    line-height: 1.45;
    letter-spacing: -0.5px;
  }

  .final-cta p {
    font-size: 1.12rem;
    color: rgba(255,255,255,0.72);
    margin-bottom: 2.6rem;
    line-height: 1.9;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }

  .final-btns {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
  }

  /* primary: a glowing light button that pops off the dark field */
  .btn-white {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: var(--deep);
    padding: 16px 34px;
    border-radius: 50px;
    font-family: 'Vazirmatn', sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 12px 40px rgba(200,168,233,0.35), 0 0 0 1px rgba(255,255,255,0.4) inset;
    transition: transform 0.25s, box-shadow 0.25s;
    border: none;
    cursor: pointer;
  }
  .btn-white:hover { transform: translateY(-3px); box-shadow: 0 18px 50px rgba(200,168,233,0.5); }

  .btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.06);
    color: #fff;
    padding: 15px 30px;
    border-radius: 50px;
    font-family: 'Vazirmatn', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    border: 1.5px solid rgba(255,255,255,0.28);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.25s;
  }
  .btn-ghost:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.55); }

  /* ─── FOOTER ─── */
  footer {
    background:
      radial-gradient(ellipse 70% 100% at 50% 0%, rgba(94,58,158,0.35) 0%, transparent 60%),
      var(--ink);
    padding: 62px 5% 22px;
    color: rgba(255,255,255,0.7);
    position: relative;
  }
  /* thin star-tinted rule across the very top of the footer */
  footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200,168,233,0.5), transparent);
  }

  .footer-inner {
    max-width: 1160px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2.2fr 1fr 1fr;
    gap: 2.4rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 1.3rem;
    direction: rtl;
  }

  /* footer brand star-mark */
  .footer-star {
    color: var(--star);
    font-size: 1.5rem;
    line-height: 1;
    margin-bottom: 0.9rem;
  }

  .footer-logo {
    font-family: 'Vazirmatn', sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    color: white;
    margin-bottom: 0.6rem;
    line-height: 1;
    display: inline-block;
  }

  .footer-tagline {
    font-size: 0.86rem;
    line-height: 1.85;
    margin-bottom: 1.1rem;
    max-width: 42ch;
    color: rgba(255,255,255,0.62);
  }

  .social-links {
    display: flex;
    gap: 9px;
  }

  .social-btn {
    width: 42px; height: 42px;
    border-radius: 13px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    font-size: 1.1rem;
    transition: all 0.2s;
  }
  .social-btn svg { width: 20px; height: 20px; }
  .social-btn:hover { transform: translateY(-3px); }
  .social-btn.instagram { background: linear-gradient(45deg, #F58529, #DD2A7B 50%, #8134AF 80%, #515BD4); border-color: transparent; }
  .social-btn.instagram:hover { box-shadow: 0 8px 24px rgba(221,42,123,0.45); }
  .social-btn.youtube { background: #FF0000; border-color: transparent; }
  .social-btn.youtube:hover { box-shadow: 0 8px 24px rgba(255,0,0,0.4); }
  .social-btn.telegram { background: linear-gradient(135deg, #2AABEE, #229ED9); border-color: transparent; }
  .social-btn.telegram:hover { box-shadow: 0 8px 24px rgba(34,158,217,0.45); }
  .social-btn.aparat { background: linear-gradient(135deg, #ED145B, #B30E45); border-color: transparent; }
  .social-btn.aparat:hover { box-shadow: 0 8px 24px rgba(237,20,91,0.45); }
  .social-btn.bale { background: #0ACA9B; border-color: transparent; }
  .social-btn.bale:hover { box-shadow: 0 8px 24px rgba(10,202,155,0.45); }
  .social-btn.bale svg { width: 24px; height: 24px; }

  .footer-col h4 {
    font-family: 'Vazirmatn', sans-serif;
    font-size: 0.82rem;
    font-weight: 800;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.4px;
    margin-bottom: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
  }
  .footer-col h4::before {
    content: '✦';
    color: var(--star);
    font-size: 0.7rem;
  }

  .footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 9px;
  }

  .footer-links a {
    color: rgba(255,255,255,0.72);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s, padding 0.2s;
  }
  .footer-links a:hover { color: #fff; padding-inline-start: 4px; }

  .footer-bottom {
    max-width: 1160px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.42);
    flex-wrap: wrap;
    gap: 0.9rem;
    direction: rtl;
  }

  /* ─── GOFTINO LIVE CHAT ─── */

  /* ─── SCROLL REVEAL ─── */
  .reveal {
    opacity: 0;
    transform: translateY(35px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }
  .reveal-delay-1 { transition-delay: 0.1s; }
  .reveal-delay-2 { transition-delay: 0.2s; }
  .reveal-delay-3 { transition-delay: 0.3s; }

  /* ─── COUNTERS ─── */
  .counter { display: inline; }

  /* ─── MOBILE MENU (full-screen sheet) ─── */
  .mobile-menu {
    display: none;
    position: fixed;
    inset: 0;
    background: linear-gradient(185deg, #FBF6FF 0%, #FFF9F3 72%);
    padding: 96px 7% calc(26px + env(safe-area-inset-bottom));
    z-index: 999;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
  }
  .mobile-menu.open { display: flex; animation: mmFade 0.28s ease both; }
  @keyframes mmFade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

  .mm-links { display: flex; flex-direction: column; }
  .mm-links a {
    font-family: 'Vazirmatn', sans-serif;
    font-weight: 700;
    font-size: 1.18rem;
    color: var(--deep);
    text-decoration: none;
    padding: 1.15rem 0.2rem;
    border-bottom: 1px solid var(--hairline);
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .mm-links a::after {
    content: '';
    width: 8px; height: 8px;
    border-left: 2px solid var(--star);
    border-bottom: 2px solid var(--star);
    transform: rotate(45deg);
    opacity: 0.7;
  }
  .mm-links a:active { color: var(--lavender); }

  /* actions pinned toward the bottom of the sheet */
  .mm-actions {
    margin-top: auto;
    padding-top: 1.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
  }
  .mm-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #7B52C8, #5E3A9E);
    color: #fff;
    font-weight: 800;
    font-size: 1.1rem;
    text-decoration: none;
    padding: 1.05rem;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(94,58,158,0.35);
  }
  .mm-account {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--mid);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    padding: 0.9rem;
    border-radius: 16px;
    border: 1.5px solid var(--hairline-strong);
    background: rgba(255,255,255,0.5);
  }

  /* ─── RESPONSIVE ─── */
  @media (max-width: 1024px) {
    .pricing-grid { grid-template-columns: 1fr; max-width: 440px; }
    .steps-grid { grid-template-columns: 1fr; }
    .steps-grid::before { display: none; }
    .testimonials-grid { grid-template-columns: 1fr; max-width: 540px; margin: 0 auto; }
  }

  @media (max-width: 768px) {
    /* tighter, intentional mobile rhythm */
    :root { --sec-pad: 68px; }
    .hero { padding: 112px 0 40px; min-height: auto; gap: 1.9rem; }
    .final-cta { padding: 74px 6%; }
    footer { padding: 50px 6% 22px; }
    .section-header { margin-bottom: 2.1rem; }
    .kicker { margin-bottom: 0.9rem; }
    .hc-slide { flex-basis: 82%; }        /* center ~82%, neighbours peek right to the edges */
    .hc-track { gap: 10px; }
    .hc-viewport { padding: 6px 0 34px; }
    /* skeleton tracks the carousel's mobile geometry so the crossfade holds still */
    .hero-skeleton { gap: 10px; padding: 6px 0 34px; }
    .sk-slide { flex-basis: 82%; }
    .nav-links { display: none; }
    .navbar { justify-content: center; height: 66px; }
    .navbar.scrolled { height: 60px; }
    .nav-logo { padding: 6px 0; }
    .nav-logo-img { height: 62px; max-width: 220px; }
    .hamburger { display: flex; position: absolute; right: 5%; top: 50%; transform: translateY(-50%); }
    .mobile-menu { padding-top: 88px; }
    .footer-inner { grid-template-columns: 1fr 1fr; gap: 1.6rem 1.2rem; }
    .footer-inner > div:first-child { grid-column: 1 / -1; }
    .form-row { grid-template-columns: 1fr; }
    .order-inner { padding: 2rem 1.5rem; }
    /* mobile: the track opens on the first card with a peek of the next —
       swiping is the affordance, so the flanking controls come off */
    .samples-group { max-width: none; }
    .samples-group + .samples-group { margin-top: 2.6rem; }
    .samples-group-head { margin-bottom: 1.1rem; gap: 0.8rem; }
    .samples-plan-thumb { width: 56px; height: 56px; border-radius: 14px; }
    .portfolio-grid {
      justify-content: flex-start;
      padding: 6px 5% 1.4rem;
      gap: 0.9rem;
      scroll-snap-type: x mandatory;
      scroll-padding-inline-start: 5%;
    }
    .portfolio-grid > .story-card {
      width: 82%;
      max-width: 340px;
      scroll-snap-align: start;
    }
    .portfolio-grid > .story-card:hover { transform: none; box-shadow: var(--shadow-card); }
    /* reels stay portrait on mobile — narrower cards so a taller reel + a
       peek of the next both fit the viewport */
    .samples-group.is-reels .portfolio-grid { padding: 8px 5% 1.4rem; }
    .samples-group.is-reels .story-card { width: 60%; max-width: 300px; }
    .samples-group.is-reels .story-card:hover { transform: none; box-shadow: 0 16px 38px rgba(45,27,78,0.24); }
    .pricing-grid { gap: 1.15rem; }
    .testimonials-grid { gap: 1.15rem; }
    .price-card { padding: 1.9rem 1.5rem 1.7rem; }
    .testi-card { padding: 1.75rem 1.5rem 1.4rem; }
    .faq-q { font-size: 0.95rem; padding: 1.15rem 1.2rem; }
    .faq-a p { padding: 0 1.2rem 1.3rem; }
  }

  @media (max-width: 480px) {
    :root { --sec-pad: 56px; }
    .hero { padding: 112px 0 32px; }
    .final-cta { padding: 62px 6%; }
    .hero h1 { font-size: 1.75rem; }
    .section-title { font-size: 1.55rem; }
    .final-btns { flex-direction: column; align-items: center; }
    .final-btns .btn-white, .final-btns .btn-ghost { width: 100%; justify-content: center; }
    .footer-bottom { flex-direction: column; text-align: center; }
    .footer-inner { grid-template-columns: 1fr; gap: 1.6rem; }
    .hero-stats { flex-wrap: nowrap; gap: 1rem; }
    .hero-stat { flex: 1; min-width: 0; }
  }

  /* ─── LOGO IMAGE ─── */
  .nav-logo {
    padding: 2px 0 !important;
    gap: 0 !important;
  }
  .nav-logo-img {
    height: 70px;
    width: auto;
    max-width: 240px;
    display: block;
    object-fit: contain;
  }
  .footer-logo-img {
    height: 56px;
    width: auto;
    max-width: 210px;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.25));
  }
  @media (max-width: 900px) {
    .footer-logo-img { height: 46px; max-width: 170px; }
  }
  @media (max-width: 480px) {
    .footer-logo-img { height: 38px; max-width: 140px; }
  }

  /* ─── GOFTINO POSITION FIX ─── */

  /* ─── MOBILE STICKY ORDER BAR ─── */
  .mobile-cta-bar {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 998;
    padding: 1.1rem 0.9rem calc(1.1rem + env(safe-area-inset-bottom, 0px));
    background: rgba(240, 235, 252, 0.97);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(45, 27, 78, 0.08);
    box-shadow: 0 -6px 20px rgba(45, 27, 78, 0.08);
    transform: translateY(110%);
    transition: transform 0.3s ease;
    align-items: center;
    gap: 0.6rem;
  }
  .mobile-cta-bar.visible { transform: translateY(0); }
  .mobile-cta-bar a {
    display: block;
    flex: 1;
    text-align: center;
    padding: 0.85rem 1rem;
    background: linear-gradient(135deg, #7B52C8, #5E3A9E);
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(94, 58, 158, 0.4);
  }
  .mobile-cta-support {
    display: none;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(200, 190, 220, 0.35);
    color: var(--mid);
    border: 1.5px solid rgba(94, 58, 158, 0.2);
    cursor: pointer;
    box-shadow: none;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
  }
  .mobile-cta-support:active { transform: scale(0.92); }
  @media (max-width: 768px) {
    .mobile-cta-bar { display: flex; }
    .mobile-cta-support { display: flex; }
    body.mobile-cta-visible { padding-bottom: 92px; }
  }

/* ─── MOBILE: hide Goftino default launcher, show custom left-edge tab ─── */
  .goftino-fab {
    display: none;
    position: fixed;
    left: 0;
    bottom: 160px;
    z-index: 997;
    width: 50px;
    height: 54px;
    border-radius: 0 999px 999px 0;
    background: linear-gradient(135deg, var(--lavender), var(--mid));
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(107, 70, 193, 0.4);
    font-size: 1.7rem;
    line-height: 1;
    padding: 0;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
  }
  .goftino-fab:active { transform: scale(0.92); }
  @media (max-width: 768px) {
    .goftino-fab { display: none; }
    body.goftino-icon-hidden #goftino_w { display: none !important; }
  }

  /* ─── ORDER BOTTOM SHEET (mobile only) ─── */
  .order-sheet-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2500;
    background: rgba(20, 8, 45, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.33s ease;
    align-items: flex-end;
    /* When the mobile keyboard opens it overlays the bottom of the layout viewport,
       hiding the sticky CTA. --kb-inset (set from the VisualViewport API) is the
       keyboard height; padding here floats the whole sheet above it. */
    padding-bottom: var(--kb-inset, 0px);
  }
  .order-sheet-overlay.sheet-active { display: flex; }
  .order-sheet-overlay.sheet-open { opacity: 1; }

  .order-sheet {
    width: 100%;
    background: var(--cream);
    border-radius: 28px 28px 0 0;
    /* Fixed height per step-group (compact for signup, tall for the order journey)
       so the sheet doesn't jump between individual steps within a group, but does
       resize — smoothly — when crossing the signup ↔ order boundary. */
    height: 90vh;
    height: 90dvh;
    max-height: 90vh;
    /* Cap to the visible viewport (set from VisualViewport) so an open keyboard
       shrinks the sheet to fit the space above it; --overlay padding-bottom then
       floats that shorter sheet up so the sticky CTA clears the keyboard. */
    max-height: min(90dvh, var(--vvh, 100dvh));
    display: flex;
    flex-direction: column;
    transform: translateY(102%);
    will-change: transform;
    transition: transform 0.44s cubic-bezier(0.32, 0.72, 0, 1), height 0.38s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 -28px 90px rgba(45, 27, 78, 0.32);
    overflow: hidden;
  }
  .sheet-open .order-sheet { transform: translateY(0); }
  /* Compact height for the signup journey (steps 1-2: phone/OTP, name) — sized to
     fit that content without the large empty gap the fixed 90vh sheet used to leave. */
  .order-sheet.sheet-compact {
    height: 53vh;
    height: 53dvh;
    max-height: 53vh;
    max-height: min(53dvh, var(--vvh, 100dvh));
  }

  .sheet-drag-zone {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 14px 0 6px;
    cursor: grab;
    user-select: none;
    touch-action: none;
  }
  .sheet-drag-zone:active { cursor: grabbing; }
  .sheet-drag-pill {
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: rgba(94, 58, 158, 0.2);
    transition: background 0.18s, width 0.18s;
  }
  .sheet-drag-zone:active .sheet-drag-pill {
    background: rgba(94, 58, 158, 0.42);
    width: 54px;
  }

  .sheet-hdr {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 16px 14px;
    border-bottom: 1.5px solid rgba(200, 168, 233, 0.22);
    direction: rtl;
  }
  .sheet-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--deep);
    line-height: 1.3;
  }
  .sheet-title-icon { display: none; }

  .sheet-close {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: none;
    background: rgba(94, 58, 158, 0.08);
    color: var(--mid);
    font-size: 1.05rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s, transform 0.15s;
    flex-shrink: 0;
    font-family: 'Vazirmatn', sans-serif;
    line-height: 1;
  }
  .sheet-close:hover { background: rgba(94, 58, 158, 0.16); transform: scale(1.08); }
  .sheet-close:active { transform: scale(0.88); }

  .sheet-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 1.4rem 1.25rem;
    /* No bottom padding: the sticky CTA (.form-submit) carries its own bottom inset
       and must reach the true sheet edge, so nothing peeks below it. */
    padding-bottom: 0;
    /* Column layout lets the active step fill the sheet so its CTA sits at the bottom. */
    display: flex;
    flex-direction: column;
  }
  .sheet-body > #form-wrap { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
  /* Every container that holds a bottom CTA fills the sheet so the CTA drops to
     the bottom. display:flex here also covers the default-visible step 1 on open
     (which has no inline display set by goToStep yet). */
  .sheet-body .form-step { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  .sheet-body #otp-group,
  .sheet-body #child-select-group,
  .sheet-body #child-edit-group { flex: 1 1 auto; min-height: 0; }
  /* #otp-group is toggled to display:flex by JS — keep it a column so its
     phone line, boxes and verify button stack (not sit in a row). */
  #otp-group { flex-direction: column; }
  /* Do NOT set display here — JS toggles it (none → flex). Just define the fill
     + column layout that take effect once it is shown. */
  /* The success screen is a step like any other: its CTA lives in a .form-submit
     footer, so no bottom padding here — the footer owns the whole bottom inset. */
  .sheet-body .success-msg.show { display: flex; }
  .sheet-body .success-msg { padding: 1.5rem 0 0; flex: 1 1 auto; min-height: 0; flex-direction: column; }
  /* Pin the CTA (form-submit block, OTP verify button, success link) to the sheet
     bottom, seamless with the cream background.
     The CTA is always the LAST element of its step — nothing (resend link, note,
     back button) may be placed after it — so `--sheet-cta-inset` alone decides how
     far it rests above the sheet floor, identically on every step of the journey. */
  .sheet-body .form-submit {
    margin-top: auto;
    position: sticky;
    bottom: 0;
    background: var(--cream);
    padding-top: 1rem;
    padding-bottom: calc(var(--sheet-cta-inset) + env(safe-area-inset-bottom, 0px));
    z-index: 5;
    /* Soft lift so the frozen CTA reads as a distinct layer over content
       scrolling beneath it. */
    box-shadow: 0 -10px 16px -8px var(--cream);
  }
  /* Larger touch targets for the OTP boxes inside the mobile sheet. */
  .sheet-body .otp-box { width: 60px; height: 66px; }

  body.sheet-lock { overflow: hidden; }