:root {
      /* Brand — deep indigo / amethyst / gold */
      --color-primary:        #6b4fa0;
      --color-primary-dark:   #4a3270;
      --color-primary-light:  #9b7fd4;
      --color-secondary:      #c4a4e8;
      --color-glow:           rgba(107,79,160,0.45);
      --color-glow-soft:      rgba(107,79,160,0.12);
      --color-accent:         #d4a847;
      --color-accent-light:   #f0cc7a;
      --color-accent-bg:      rgba(212,168,71,0.12);
      --color-accent-border:  rgba(212,168,71,0.35);

      /* Surfaces — deep near-black with purple warmth */
      --color-bg:       #07050f;
      --color-surface:  #0d0a1c;
      --color-card:     #130f24;
      --color-card-alt: #1a1430;

      /* Text */
      --color-text:        #f0ecff;
      --color-text-sec:    #b8aed8;
      --color-text-muted:  #5a4e7a;
      --color-text-on-pri: #ffffff;

      /* Borders */
      --color-border:        rgba(255,255,255,0.06);
      --color-border-brand:  rgba(107,79,160,0.28);
      --color-border-accent: rgba(212,168,71,0.32);
      --color-border-glow:   rgba(107,79,160,0.55);

      /* Type */
      --font-display: Georgia, 'Times New Roman', serif;
      --font-body:    'Trebuchet MS', 'Segoe UI', Verdana, sans-serif;

      --text-xs:   0.7rem;
      --text-sm:   0.875rem;
      --text-base: 1rem;
      --text-md:   1.125rem;
      --text-lg:   1.375rem;
      --text-xl:   1.75rem;
      --text-2xl:  2.25rem;
      --text-3xl:  3rem;
      --text-4xl:  4.25rem;
      --text-5xl:  5.75rem;

      --w-normal: 400; --w-medium: 500; --w-semibold: 600;
      --w-bold: 700; --w-black: 900;

      --lead-tight: 1.0; --lead-snug: 1.25; --lead-normal: 1.65; --lead-relaxed: 1.8;

      /* Space */
      --sp-xs: 0.375rem; --sp-sm: 0.75rem; --sp-md: 1.25rem; --sp-lg: 2rem;
      --sp-xl: 3.25rem; --sp-2xl: 5rem; --sp-3xl: 8rem;

      /* Container */
      --ctr-max: 1180px; --ctr-pad: 1.25rem; --ctr-pad-lg: 2.5rem;

      /* Header */
      --hdr-h:  70px;
      --hdr-bg: rgba(7,5,15,0.96);
      --hdr-blur: 14px;
      --hdr-border: rgba(107,79,160,0.2);
      --hdr-px: 1.5rem;

      /* Logo */
      --logo-sm: 128px; --logo-md: 150px; --logo-lg: 168px;

      /* Buttons */
      --btn-py: 0.8rem; --btn-px: 2rem;
      --btn-py-lg: 1.05rem; --btn-px-lg: 2.75rem;
      --btn-r: 2px; --btn-sz: 0.875rem; --btn-sz-lg: 1rem;
      --btn-w: 700; --btn-track: 0.1em;

      /* Cards */
      --card-r: 6px;
      --card-sh: 0 4px 28px rgba(0,0,0,0.55);
      --card-shh: 0 8px 48px rgba(107,79,160,0.22);
      --card-pad: 1.75rem;

      /* Sections */
      --sec-sm: 4rem; --sec-lg: 7rem;

      /* Motion */
      --ease: 240ms ease; --ease-f: 140ms ease;

      /* Badge */
      --badge-r: 1px; --badge-pad: 0.28rem 0.75rem; --badge-txt: 0.66rem;

      /* Stats */
      --stat-sm: 2rem; --stat-lg: 2.75rem;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; font-size: 16px; }
    body {
      background: var(--color-bg);
      color: var(--color-text);
      font-family: var(--font-body);
      font-size: var(--text-base);
      line-height: var(--lead-normal);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }
    img { display: block; max-width: 100%; height: auto; }
    a   { color: inherit; text-decoration: none; }
    ul  { list-style: none; }

    /* ── UTILITY ─────────────────────────────────────────── */
    .container { width: 100%; max-width: var(--ctr-max); margin-inline: auto; padding-inline: var(--ctr-pad); }

    .text-gradient {
      background: linear-gradient(110deg, var(--color-primary-light), var(--color-accent-light));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .text-gold { color: var(--color-accent); }

    /* Mystical divider */
    .soul-rule {
      border: none;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--color-primary-light), var(--color-accent), var(--color-primary-light), transparent);
      opacity: 0.4;
      margin-block: var(--sp-xl);
      position: relative;
    }
    .soul-rule::after {
      content: '✦';
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      background: var(--color-bg);
      padding: 0 var(--sp-sm);
      color: var(--color-accent);
      font-size: 0.9rem;
    }

    /* ── ANIMATIONS ──────────────────────────────────────── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(28px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes pulseGlow {
      0%,100% { box-shadow: 0 0 14px var(--color-glow), 0 0 36px var(--color-glow-soft); }
      50%      { box-shadow: 0 0 28px var(--color-glow), 0 0 72px var(--color-glow-soft); }
    }
    @keyframes marquee {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
    @keyframes badgePop {
      from { opacity: 0; transform: scale(0.78); }
      to   { opacity: 1; transform: scale(1); }
    }
    @keyframes floatOrb {
      0%,100% { transform: translateY(0) scale(1); opacity: 0.18; }
      50%      { transform: translateY(-18px) scale(1.05); opacity: 0.28; }
    }

    .u0 { animation: fadeUp 0.7s 0.00s ease both; }
    .u1 { animation: fadeUp 0.7s 0.15s ease both; }
    .u2 { animation: fadeUp 0.7s 0.30s ease both; }
    .u3 { animation: fadeUp 0.7s 0.45s ease both; }
    .bp { animation: badgePop 0.5s 0.55s ease both; }

    /* ── BUTTONS ─────────────────────────────────────────── */
    .btn {
      display: inline-flex; align-items: center; justify-content: center;
      gap: var(--sp-xs);
      padding: var(--btn-py) var(--btn-px);
      border-radius: var(--btn-r);
      font-family: var(--font-body);
      font-size: var(--btn-sz);
      font-weight: var(--btn-w);
      letter-spacing: var(--btn-track);
      text-transform: uppercase;
      white-space: nowrap;
      border: none; cursor: pointer;
      position: relative; overflow: hidden;
      transition: transform var(--ease), box-shadow var(--ease);
    }
    .btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
    .btn-primary {
      background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary), var(--color-primary-light));
      color: #fff;
      animation: pulseGlow 3.5s ease-in-out infinite;
    }
    .btn-primary::before {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent);
      opacity: 0;
      transition: opacity var(--ease-f);
    }
    .btn-primary:hover { transform: translateY(-2px); }
    .btn-primary:hover::before { opacity: 1; }
    .btn-outline { background: transparent; color: var(--color-accent); border: 2px solid var(--color-accent); }
    .btn-outline:hover { background: var(--color-accent-bg); transform: translateY(-2px); }
    .btn-ghost { background: transparent; color: var(--color-text-sec); border: 1px solid var(--color-border); }
    .btn-ghost:hover { border-color: var(--color-primary-light); color: var(--color-primary-light); }
    .btn-lg { padding: var(--btn-py-lg) var(--btn-px-lg); font-size: var(--btn-sz-lg); }

    /* ── BADGE ───────────────────────────────────────────── */
    .badge {
      display: inline-block;
      padding: var(--badge-pad);
      border-radius: var(--badge-r);
      font-size: var(--badge-txt);
      font-weight: var(--w-bold);
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }
    .badge-brand { background: var(--color-glow-soft); color: var(--color-primary-light); border: 1px solid var(--color-border-brand); }
    .badge-gold  { background: var(--color-accent-bg); color: var(--color-accent-light); border: 1px solid var(--color-accent-border); }
    .cta-band .badge { margin-bottom: 1.5rem; }

    /* ── HEADER ──────────────────────────────────────────── */
    .site-header {
      position: fixed; top: 0; left: 0; right: 0;
      z-index: 100;
      height: var(--hdr-h);
      background: var(--hdr-bg);
      backdrop-filter: blur(var(--hdr-blur));
      -webkit-backdrop-filter: blur(var(--hdr-blur));
      border-bottom: 1px solid var(--hdr-border);
    }
    .site-header .container { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); padding-inline: var(--hdr-px); }
    .site-logo { width: var(--logo-sm); height: auto; }
    .header-nav { display: none; align-items: center; gap: var(--sp-lg); }
    .header-nav a { font-size: var(--text-sm); font-weight: var(--w-medium); color: var(--color-text-sec); letter-spacing: 0.05em; text-transform: uppercase; transition: color var(--ease-f); }
    .header-nav a:hover { color: var(--color-accent); }
    .header-actions { display: flex; align-items: center; gap: var(--sp-sm); }
    .login-link { font-size: var(--text-sm); font-weight: var(--w-medium); color: var(--color-text-sec); transition: color var(--ease-f); letter-spacing: 0.04em; }
    .login-link:hover { color: var(--color-text); }

    /* ── MARQUEE ─────────────────────────────────────────── */
    .marquee-bar {
      position: fixed; top: var(--hdr-h); left: 0; right: 0;
      z-index: 99; overflow: hidden;
      background: linear-gradient(90deg, var(--color-primary-dark), var(--color-primary), var(--color-primary-dark));
      padding-block: 7px;
      border-bottom: 1px solid var(--color-border-accent);
    }
    .marquee-track { display: flex; width: max-content; animation: marquee 36s linear infinite; }
    .marquee-item {
      display: flex; align-items: center; gap: var(--sp-lg);
      padding-inline: var(--sp-xl);
      font-size: var(--text-xs); font-weight: var(--w-bold);
      letter-spacing: 0.12em; text-transform: uppercase;
      color: rgba(255,255,255,0.9); white-space: nowrap;
    }
    .marquee-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--color-accent); opacity: 0.6; }

    /* ── HERO ────────────────────────────────────────────── */
    .hero {
      padding-top: calc(var(--hdr-h) + 38px);
      min-height: 100svh;
      display: flex; flex-direction: column;
      position: relative; overflow: hidden;
    }
    .hero-bg { position: absolute; inset: 0; z-index: 0; }
    .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }

    /* Deep gradient overlay */
    .hero-bg::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(
        to bottom,
        rgba(7,5,15,0.4) 0%,
        rgba(7,5,15,0.58) 50%,
        rgba(7,5,15,0.97) 100%
      );
    }
    /* Cosmic vignette */
    .hero-bg::before {
      content: '';
      position: absolute; inset: 0; z-index: 1;
      background:
        radial-gradient(ellipse at 80% 15%, rgba(107,79,160,0.22) 0%, transparent 50%),
        radial-gradient(ellipse at 15% 80%, rgba(212,168,71,0.1) 0%, transparent 45%);
      pointer-events: none;
    }

    /* Floating orbs */
    .hero-orb {
      position: absolute; z-index: 1;
      border-radius: 50%;
      pointer-events: none;
    }
    .hero-orb-1 {
      width: 340px; height: 340px;
      top: 8%; right: 5%;
      background: radial-gradient(circle, rgba(107,79,160,0.22) 0%, transparent 70%);
      animation: floatOrb 7s ease-in-out infinite;
    }
    .hero-orb-2 {
      width: 220px; height: 220px;
      bottom: 22%; left: 3%;
      background: radial-gradient(circle, rgba(212,168,71,0.14) 0%, transparent 70%);
      animation: floatOrb 10s ease-in-out 2s infinite;
    }

    .hero-content { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; justify-content: center; padding-block: var(--sec-sm); }
    .hero-eyebrow { display: flex; align-items: center; gap: var(--sp-sm); margin-bottom: var(--sp-md); }
    .hero h1 {
      font-family: var(--font-display);
      font-size: var(--text-3xl);
      font-weight: var(--w-black);
      line-height: var(--lead-tight);
      font-style: italic;
      max-width: 18ch;
      margin-bottom: var(--sp-md);
    }
    .hero-sub { font-size: var(--text-md); color: var(--color-text-sec); max-width: 48ch; line-height: var(--lead-relaxed); margin-bottom: var(--sp-xl); }
    .hero-cta-group { display: flex; flex-direction: column; gap: var(--sp-sm); max-width: 340px; }
    .hero-trust { display: flex; flex-wrap: wrap; gap: var(--sp-md); margin-top: var(--sp-md); }
    .hero-trust-item { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: var(--w-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
    .hero-trust-star { color: var(--color-accent); font-size: 0.85rem; }

    /* STATS */
    .hero-stats { position: relative; z-index: 2; background: rgba(7,5,15,0.85); backdrop-filter: blur(10px); border-top: 1px solid var(--color-border-brand); }
    .hero-stats-inner { display: grid; grid-template-columns: repeat(3,1fr); }
    .stat-cell { padding: var(--sp-lg) var(--sp-md); text-align: center; border-right: 1px solid var(--color-border); }
    .stat-cell:last-child { border-right: none; }
    .stat-num { font-family: var(--font-display); font-size: var(--stat-sm); font-weight: var(--w-black); line-height: 1; margin-bottom: 4px; font-style: italic; }
    .stat-label { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.1em; }

    /* ── SECTION COMMONS ─────────────────────────────────── */
    .section { padding-block: var(--sec-sm); }
    .section-header { margin-bottom: var(--sp-xl); }
    .section-header.centered { text-align: center; }
    .section-label { display: inline-block; font-size: var(--text-xs); font-weight: var(--w-bold); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--sp-sm); }
    .section-title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--w-black); font-style: italic; line-height: var(--lead-snug); margin-bottom: var(--sp-sm); }
    .section-body { font-size: var(--text-base); color: var(--color-text-sec); max-width: 58ch; line-height: var(--lead-relaxed); }
    .section-header.centered .section-body { margin-inline: auto; }

    /* ── INTEREST TAGS ───────────────────────────────────── */
    .interests-section { background: var(--color-bg); padding-block: var(--sp-xl); text-align: center; }
    .interests-label { font-size: var(--text-xs); font-weight: var(--w-bold); letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--sp-md); }
    .interests-tags { display: flex; flex-wrap: wrap; gap: var(--sp-sm); justify-content: center; max-width: 820px; margin-inline: auto; }
    .interest-tag { display: inline-block; padding: 0.45rem 1rem; border-radius: 100px; border: 1px solid var(--color-border); font-size: var(--text-xs); font-weight: var(--w-semibold); letter-spacing: 0.05em; color: var(--color-text-sec); text-transform: uppercase; transition: all var(--ease-f); }
    .interest-tag.active { background: var(--color-glow-soft); border-color: var(--color-primary-light); color: var(--color-primary-light); }

    /* ── HOW IT WORKS ────────────────────────────────────── */
    .hiw-section { background: var(--color-surface); }
    .steps-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-md); }
    .step-card {
      background: var(--color-card); border: 1px solid var(--color-border);
      border-radius: var(--card-r); padding: var(--card-pad);
      display: flex; gap: var(--sp-md); align-items: flex-start;
      transition: border-color var(--ease), box-shadow var(--ease);
      position: relative; overflow: hidden;
    }
    .step-card::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: linear-gradient(180deg, var(--color-primary-light), var(--color-accent)); opacity: 0; transition: opacity var(--ease); }
    .step-card:hover { border-color: var(--color-border-brand); box-shadow: var(--card-shh); }
    .step-card:hover::before { opacity: 1; }
    .step-num {
      flex-shrink: 0; width: 48px; height: 48px;
      border-radius: var(--card-r);
      background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
      color: #fff;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-display); font-size: var(--text-xl);
      font-weight: var(--w-black); font-style: italic;
    }
    .step-body h3 { font-size: var(--text-md); font-weight: var(--w-bold); font-style: italic; margin-bottom: var(--sp-xs); }
    .step-body p { font-size: var(--text-sm); color: var(--color-text-sec); line-height: var(--lead-relaxed); }

    /* ── LIFESTYLE SPLIT ─────────────────────────────────── */
    .lifestyle-section { background: var(--color-surface); overflow: hidden; }
    .split-block { display: flex; flex-direction: column; gap: var(--sp-xl); }
    .split-visual { border-radius: var(--card-r); overflow: hidden; position: relative; flex-shrink: 0; }
    .split-visual img { width: 100%; height: 280px; object-fit: cover; }
    .split-visual-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--color-primary-light), var(--color-accent)); }
    .split-text { display: flex; flex-direction: column; gap: var(--sp-md); }
    .split-text h2 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--w-black); font-style: italic; line-height: var(--lead-snug); }
    .split-text p { color: var(--color-text-sec); line-height: var(--lead-relaxed); }
    .check-list { display: flex; flex-direction: column; gap: var(--sp-sm); }
    .check-item { display: flex; align-items: flex-start; gap: var(--sp-sm); font-size: var(--text-sm); color: var(--color-text-sec); }
    .check-tick { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--color-glow-soft); border: 1px solid var(--color-border-brand); display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--color-primary-light); margin-top: 1px; }

    /* ── TESTIMONIALS ────────────────────────────────────── */
    .testimonials-section { background: var(--color-surface); position: relative; overflow: hidden; }
    .testimonials-section::before { content: ''; position: absolute; top: -120px; right: -120px; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, var(--color-glow-soft) 0%, transparent 70%); pointer-events: none; }
    .testimonials-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-md); }
    .testimonial-card { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--card-r); padding: var(--card-pad); transition: all var(--ease); position: relative; }
    .testimonial-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--color-accent), transparent); opacity: 0; transition: opacity var(--ease); }
    .testimonial-card:hover { border-color: var(--color-border-brand); box-shadow: var(--card-shh); }
    .testimonial-card:hover::after { opacity: 1; }
    .testimonial-stars { display: flex; gap: 3px; margin-bottom: var(--sp-md); }
    .star { width: 14px; height: 14px; color: var(--color-accent); fill: var(--color-accent); }
    .testimonial-path { position: absolute; top: var(--card-pad); right: var(--card-pad); }
    .testimonial-quote { font-size: var(--text-sm); color: var(--color-text-sec); line-height: var(--lead-relaxed); margin-bottom: var(--sp-md); font-style: italic; }
    .testimonial-author { display: flex; align-items: center; gap: var(--sp-sm); }
    .testimonial-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--color-border-accent); }
    .testimonial-name { font-weight: var(--w-semibold); font-size: var(--text-sm); font-style: italic; }
    .testimonial-meta { font-size: var(--text-xs); color: var(--color-text-muted); }

    /* ── SEO SECTION ─────────────────────────────────────── */
    .seo-section { background: var(--color-bg); }
    .seo-intro { max-width: 820px; margin-inline: auto; text-align: center; margin-bottom: var(--sp-xl); }
    .seo-intro p { color: var(--color-text-sec); line-height: var(--lead-relaxed); margin-bottom: var(--sp-md); }
    .seo-cols { display: grid; grid-template-columns: 1fr; gap: var(--sp-xl); }
    .seo-col h3 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--w-black); font-style: italic; margin-bottom: var(--sp-sm); color: var(--color-text); }
    .seo-col p { font-size: var(--text-sm); color: var(--color-text-sec); line-height: var(--lead-relaxed); }

    /* ── CTA BAND ────────────────────────────────────────── */
    .cta-band {
      background: linear-gradient(135deg, #0c0618, var(--color-bg) 45%, #0c0618);
      border-top: 1px solid var(--color-border-glow);
      border-bottom: 1px solid var(--color-border-glow);
      padding-block: var(--sp-3xl);
      text-align: center;
      position: relative; overflow: hidden;
    }
    .cta-band::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 720px; height: 420px; background: radial-gradient(ellipse, rgba(107,79,160,0.12) 0%, transparent 70%); pointer-events: none; }
    .cta-band::after { content: '✦'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 22rem; color: rgba(107,79,160,0.04); pointer-events: none; line-height: 1; }
    .cta-band-content { position: relative; z-index: 1; }
    .cta-band h2 { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--w-black); font-style: italic; line-height: var(--lead-snug); margin-bottom: var(--sp-md); }
    .cta-band p { font-size: var(--text-md); color: var(--color-text-sec); max-width: 50ch; margin-inline: auto; margin-bottom: var(--sp-xl); line-height: var(--lead-relaxed); }
    .cta-band-actions { display: flex; flex-direction: column; align-items: center; gap: var(--sp-sm); }
    .cta-fine { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--sp-md); }

    /* ── FOOTER ──────────────────────────────────────────── */
    .site-footer { background: var(--color-surface); border-top: 1px solid var(--color-border); padding-block: var(--sp-2xl); }
    .footer-top { display: flex; flex-direction: column; gap: var(--sp-xl); margin-bottom: var(--sp-xl); }
    .footer-brand p { font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--lead-relaxed); max-width: 34ch; margin-top: var(--sp-sm); }
    .footer-cols { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--sp-lg); }
    .footer-col h4 { font-size: var(--text-xs); font-weight: var(--w-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--sp-md); }
    .footer-col ul { display: flex; flex-direction: column; gap: var(--sp-sm); }
    .footer-col li a { font-size: var(--text-sm); color: var(--color-text-muted); transition: color var(--ease-f); }
    .footer-col li a:hover { color: var(--color-accent); }
    .footer-bottom { border-top: 1px solid var(--color-border); padding-top: var(--sp-lg); display: flex; flex-direction: column; gap: var(--sp-md); }
    .footer-legal { display: flex; flex-wrap: wrap; gap: var(--sp-md); }
    .footer-legal a { font-size: var(--text-xs); color: var(--color-text-muted); transition: color var(--ease-f); }
    .footer-legal a:hover { color: var(--color-text-sec); }
    .footer-copy { font-size: var(--text-xs); color: var(--color-text-muted); }

    /* ── RESPONSIVE ──────────────────────────────────────── */
    @media (min-width: 768px) {
      .container { padding-inline: var(--ctr-pad-lg); }
      .site-logo { width: var(--logo-md); }
      .header-nav { display: flex; }
      .hero h1 { font-size: var(--text-4xl); }
      .hero-cta-group { flex-direction: row; max-width: none; }
      .steps-grid        { grid-template-columns: repeat(2,1fr); }
      .testimonials-grid { grid-template-columns: repeat(2,1fr); }
      .seo-cols          { grid-template-columns: repeat(2,1fr); }
      .split-block { flex-direction: row; align-items: center; gap: var(--sp-2xl); }
      .split-block.reverse { flex-direction: row-reverse; }
      .split-visual { flex: 1; }
      .split-visual img { height: 400px; }
      .split-text { flex: 1; }
      .split-text h2 { font-size: var(--text-3xl); }
      .footer-top { flex-direction: row; justify-content: space-between; }
      .footer-cols { grid-template-columns: repeat(4,1fr); }
      .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; }
      .stat-num { font-size: var(--stat-lg); }
      .cta-band h2 { font-size: var(--text-4xl); }
      .cta-band-actions { flex-direction: row; justify-content: center; }
      .section { padding-block: var(--sec-lg); }
    }
    @media (min-width: 1024px) {
      .site-logo { width: var(--logo-lg); }
      .hero h1 { font-size: var(--text-5xl); }
      .steps-grid        { grid-template-columns: repeat(3,1fr); }
      .testimonials-grid { grid-template-columns: repeat(3,1fr); }
      .seo-cols          { grid-template-columns: repeat(3,1fr); }
    }
    :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
  

    /* ---- rebuilt platform pages ---- */
    .section-alt { background: var(--color-surface); }
    .tp-head { padding-block: var(--sp-xl) var(--sp-lg); background: var(--color-bg); }
    .tp-head-center { text-align: center; }
    .tp-center { justify-content: center; }
    .tp-title { font-family: var(--font-display); font-size: clamp(2.2rem, 5.5vw, var(--text-3xl)); font-weight: var(--w-black); line-height: var(--lead-snug); margin-bottom: var(--sp-md); }
    .tp-head p { font-size: var(--text-md); color: var(--color-text-sec); line-height: var(--lead-relaxed); margin-bottom: var(--sp-md); max-width: 58ch; }
    .tp-actions { display: flex; flex-wrap: wrap; gap: var(--sp-sm); margin-top: var(--sp-md); }
    .tp-split { display: grid; gap: var(--sp-lg); align-items: center; }
    .tp-photo img { width: 100%; height: auto; max-width: 420px; border-radius: var(--card-r); border: 1px solid var(--color-border-brand); box-shadow: var(--card-shh); }
    .tp-grid { display: grid; gap: var(--sp-md); grid-template-columns: 1fr; }
    .tp-card { background: var(--color-card); border: 1px solid var(--color-border-brand); border-radius: var(--card-r); overflow: hidden; display: flex; flex-direction: column; }
    .tp-card img { width: 100%; height: auto; background: var(--color-card-alt); }
    .tp-card-body { padding: var(--sp-md); }
    .tp-card h2 { font-family: var(--font-display); font-size: var(--text-lg); line-height: var(--lead-snug); margin-bottom: var(--sp-xs); }
    .tp-card h3 { font-size: var(--text-sm); color: var(--color-accent-light); font-weight: var(--w-semibold); margin-bottom: var(--sp-sm); }
    .tp-card p { color: var(--color-text-sec); line-height: var(--lead-relaxed); }
    .tp-faq { display: grid; gap: var(--sp-sm); max-width: 820px; }
    .tp-faq-item { background: var(--color-card); border: 1px solid var(--color-border-brand); border-left: 3px solid var(--color-accent); border-radius: var(--card-r); padding: var(--sp-md); }
    .tp-faq-item h3 { font-family: var(--font-display); font-size: var(--text-md); margin-bottom: var(--sp-xs); }
    .tp-faq-item p { color: var(--color-text-sec); line-height: var(--lead-relaxed); }
    .tp-rules { display: grid; gap: var(--sp-md); counter-reset: rule; max-width: 820px; list-style: none; }
    .tp-rule { counter-increment: rule; position: relative; padding-left: 3rem; }
    .tp-rule::before { content: counter(rule); position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid var(--color-accent); color: var(--color-accent-light); font-family: var(--font-display); font-weight: var(--w-bold); display: flex; align-items: center; justify-content: center; font-size: var(--text-sm); }
    .tp-rule h3 { font-size: var(--text-md); margin-bottom: var(--sp-xs); }
    .tp-rule p { color: var(--color-text-sec); line-height: var(--lead-relaxed); margin-bottom: var(--sp-xs); }
    @media (min-width: 768px) {
      .tp-split { grid-template-columns: 1.2fr 0.8fr; gap: var(--sp-xl); }
      .tp-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (min-width: 1024px) {
      .tp-grid { grid-template-columns: repeat(3, 1fr); }
    }

    /* ---- buddhist dating page ---- */
    .tp-points { display: grid; gap: var(--sp-sm); max-width: 820px; list-style: none; }
    .tp-points li { background: var(--color-card); border: 1px solid var(--color-border-brand); border-left: 3px solid var(--color-accent); border-radius: var(--card-r); padding: var(--sp-md); }
    .tp-points h3 { font-family: var(--font-display); font-size: var(--text-md); margin-bottom: var(--sp-xs); }
    .tp-points p { color: var(--color-text-sec); line-height: var(--lead-relaxed); }
    .feature-grid { display: grid; gap: var(--sp-md); grid-template-columns: 1fr; }
    .feature-card { background: var(--color-card); border: 1px solid var(--color-border-brand); border-radius: var(--card-r); padding: var(--sp-md); }
    .feature-icon { display: block; font-size: 1.75rem; color: var(--color-accent-light); margin-bottom: var(--sp-sm); }
    .feature-card h3 { font-family: var(--font-display); font-size: var(--text-md); margin-bottom: var(--sp-xs); }
    .feature-card p { color: var(--color-text-sec); line-height: var(--lead-relaxed); }
    @media (min-width: 768px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1024px) { .feature-grid { grid-template-columns: repeat(4, 1fr); } }
    .tp-link { color: var(--color-accent-light); text-decoration: underline; text-underline-offset: 3px; }
    .tp-link:hover { color: var(--color-text); }