/*
 * neomorphism.css — Conversaio Web Design System (Neomorphic)
 * -----------------------------------------------------------
 * Source of truth:
 *   - Figma: Conversaio — Design System (file 88yi8i005PDVOaKw24fSXa)
 *   - iOS prototype: /Conversaio/neomorphism-home-prototype.html
 *
 * Goals
 *   - Visual parity with the iOS app's neomorphism layer
 *   - Full light + dark support via prefers-color-scheme
 *   - Preserve existing scroll-animation contract (.sa / data-sa / .in-view)
 *   - Accessible: WCAG AA contrast, focus-visible, reduced-motion respected
 *   - Multilingual: no content baked into CSS; works with any locale's copy length
 *
 * Layering
 *   1. Tokens       — CSS custom properties (colors, shadows, spacing, typography)
 *   2. Reset & Base — document defaults
 *   3. Primitives   — neu-raised / neu-pressed / neu-flat / neu-inset
 *   4. Layout       — page-wrap, page-header, section
 *   5. Components   — hero, cta, feature/lang/plan cards, form, footer, etc.
 *   6. Utilities    — scroll animations, responsive, a11y
 */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */

:root {
    /* --- Brand palette (Figma appPrimary, appPurpleSecondary, appBlueAccent) --- */
    --neu-accent:           #4A8CE6;
    --neu-accent-secondary: #7A8CCC;
    --neu-accent-tertiary:  #3B7AFF;
    --neu-accent-rgb:       74, 140, 230;
    /* Darker accent for inline text/links on light surfaces
       — needed for WCAG AA (--neu-accent fails 4.5:1 on #F6F8FA) */
    --neu-accent-text:      #2E67B8;

    /* --- Text --- */
    --neu-text-primary:   #121414;
    --neu-text-secondary: #525A66;
    --neu-text-tertiary:  #8A92A0;
    --neu-text-on-accent: #FFFFFF;

    /* --- Surfaces (Figma NeuSurface.*) --- */
    --neu-bg:                #F6F8FA;
    --neu-surface:           #F6F8FA;
    --neu-surface-elevated:  #FFFFFF;
    --neu-surface-recessed:  #EAEEF2;
    --neu-border-subtle:     rgba(255, 255, 255, 0.6);

    /* --- Gradients (Figma appGradientStart/End + brand) --- */
    --neu-gradient-bg:    linear-gradient(135deg, #D8E0E8 0%, #C8D0D8 100%);
    --neu-gradient-brand: linear-gradient(135deg, #4A8CE6 0%, #7A8CCC 100%);
    --neu-gradient-cta:   linear-gradient(90deg,  #4A8CE6 0%, #3B7AFF 100%);

    /* --- Neumorphic shadow stops (light mode) --- */
    --neu-shadow-light:         rgba(255, 255, 255, 0.85);
    --neu-shadow-dark:          rgba(166, 177, 195, 0.50);
    --neu-shadow-light-strong:  rgba(255, 255, 255, 0.95);
    --neu-shadow-dark-strong:   rgba(150, 160, 180, 0.50);
    --neu-inset-light:          rgba(255, 255, 255, 0.55);
    --neu-inset-dark:           rgba(166, 177, 195, 0.35);

    /* Accent glow (used by CTA buttons, avatars, etc.) */
    --neu-accent-glow:    rgba(74, 140, 230, 0.25);
    --neu-accent-glow-lg: rgba(74, 140, 230, 0.38);

    /* Status colors */
    --neu-success-bg:    rgba(34, 197, 94, 0.14);
    --neu-success-text:  #15803D;
    --neu-success-ring:  rgba(34, 197, 94, 0.45);
    --neu-error-bg:      rgba(239, 68, 68, 0.14);
    --neu-error-text:    #B91C1C;
    --neu-error-ring:    rgba(239, 68, 68, 0.45);

    /* --- Typography --- */
    --neu-font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --neu-fs-xs:   0.75rem;   /* 12 */
    --neu-fs-sm:   0.875rem;  /* 14 */
    --neu-fs-base: 1rem;      /* 16 */
    --neu-fs-md:   1.125rem;  /* 18 */
    --neu-fs-lg:   1.375rem;  /* 22 */
    --neu-fs-xl:   1.75rem;   /* 28 */
    --neu-fs-2xl:  2.25rem;   /* 36 */
    --neu-fs-3xl:  3rem;      /* 48 */
    --neu-fs-hero: clamp(2.25rem, 6vw, 4rem);

    /* --- Spacing scale (8 pt) --- */
    --neu-space-1:  4px;
    --neu-space-2:  8px;
    --neu-space-3:  12px;
    --neu-space-4:  16px;
    --neu-space-5:  20px;
    --neu-space-6:  24px;
    --neu-space-8:  32px;
    --neu-space-10: 40px;
    --neu-space-12: 48px;
    --neu-space-16: 64px;
    --neu-space-20: 80px;

    /* --- Radii --- */
    --neu-radius-sm:   8px;
    --neu-radius-md:   14px;
    --neu-radius-lg:   20px;
    --neu-radius-xl:   28px;
    --neu-radius-2xl:  36px;
    --neu-radius-pill: 999px;

    /* --- Shadow presets --- */
    --neu-raised-shadow:
          -6px -6px 12px var(--neu-shadow-light),
           6px  6px 12px var(--neu-shadow-dark);
    --neu-raised-strong-shadow:
          -10px -10px 20px var(--neu-shadow-light-strong),
           10px  10px 20px var(--neu-shadow-dark-strong);
    --neu-flat-shadow:
          -3px -3px 6px var(--neu-shadow-light),
           3px  3px 6px var(--neu-shadow-dark);
    --neu-pressed-shadow:
          inset -3px -3px 6px var(--neu-inset-light),
          inset  3px  3px 6px var(--neu-inset-dark);

    /* --- Motion --- */
    --neu-ease:    cubic-bezier(0.22, 1, 0.36, 1);
    --neu-dur-fast: 160ms;
    --neu-dur-md:   320ms;
    --neu-dur-slow: 560ms;

    /* --- Layout --- */
    --neu-max-w:     1200px;
    --neu-max-w-sm:  720px;
    --neu-gutter:    24px;
}

/* ============================================================
   Dark mode token overrides
   ============================================================ */

@media (prefers-color-scheme: dark) {
    :root {
        --neu-accent:           #6633FF;
        --neu-accent-secondary: #9966FF;
        --neu-accent-tertiary:  #3366FF;
        --neu-accent-rgb:       102, 51, 255;
        /* On dark backgrounds #6633FF already meets AA with #F8FAFC.
           --neu-accent-text is lightened for inline text so the same
           variable works as a link color in both modes. */
        --neu-accent-text:      #B8A3FF;

        --neu-text-primary:   #F8FAFC;
        --neu-text-secondary: #B8C0CC;
        --neu-text-tertiary:  #7A7A9E;

        --neu-bg:               #1A1A2E;
        --neu-surface:          #1A1A2E;
        --neu-surface-elevated: #222244;
        --neu-surface-recessed: #141426;
        --neu-border-subtle:    rgba(255, 255, 255, 0.06);

        --neu-gradient-bg:    linear-gradient(135deg, #1A1A2E 0%, #141426 100%);
        --neu-gradient-brand: linear-gradient(135deg, #6633FF 0%, #9966FF 100%);
        --neu-gradient-cta:   linear-gradient(90deg,  #6633FF 0%, #3366FF 100%);

        --neu-shadow-light:         rgba(255, 255, 255, 0.05);
        --neu-shadow-dark:          rgba(0, 0, 0, 0.55);
        --neu-shadow-light-strong:  rgba(255, 255, 255, 0.07);
        --neu-shadow-dark-strong:   rgba(0, 0, 0, 0.70);
        --neu-inset-light:          rgba(255, 255, 255, 0.04);
        --neu-inset-dark:           rgba(0, 0, 0, 0.45);

        --neu-accent-glow:    rgba(102, 51, 255, 0.35);
        --neu-accent-glow-lg: rgba(102, 51, 255, 0.55);

        --neu-success-text:  #86EFAC;
        --neu-success-bg:    rgba(34, 197, 94, 0.18);
        --neu-error-text:    #FCA5A5;
        --neu-error-bg:      rgba(239, 68, 68, 0.18);
    }
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--neu-font-body);
    font-size: var(--neu-fs-base);
    font-weight: 400;
    line-height: 1.6;
    color: var(--neu-text-primary);
    background: var(--neu-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    min-height: 100vh;
}

img { max-width: 100%; height: auto; display: block; }
a  { color: var(--neu-accent-text); text-decoration: none; transition: color var(--neu-dur-fast) var(--neu-ease); }
a:hover { color: var(--neu-accent); text-decoration: underline; text-underline-offset: 3px; }

h1, h2, h3, h4 {
    font-family: inherit;
    color: var(--neu-text-primary);
    line-height: 1.25;
    letter-spacing: -0.02em;
}

:focus-visible {
    outline: 3px solid var(--neu-accent);
    outline-offset: 3px;
    border-radius: var(--neu-radius-sm);
}

/* ============================================================
   3. NEUMORPHIC PRIMITIVES
   ============================================================ */

.neu-raised {
    background: var(--neu-surface);
    border-radius: var(--neu-radius-lg);
    box-shadow: var(--neu-raised-shadow);
    border: 1px solid var(--neu-border-subtle);
}

.neu-raised-strong {
    background: var(--neu-surface);
    border-radius: var(--neu-radius-xl);
    box-shadow: var(--neu-raised-strong-shadow);
    border: 1px solid var(--neu-border-subtle);
}

.neu-flat {
    background: var(--neu-surface-elevated);
    border-radius: var(--neu-radius-md);
    box-shadow: var(--neu-flat-shadow);
    border: 1px solid var(--neu-border-subtle);
}

.neu-pressed {
    background: var(--neu-surface-recessed);
    border-radius: var(--neu-radius-md);
    box-shadow: var(--neu-pressed-shadow);
}

/* Make any raised element look pressed on active */
.neu-interactive {
    cursor: pointer;
    transition:
        transform  var(--neu-dur-fast) var(--neu-ease),
        box-shadow var(--neu-dur-fast) var(--neu-ease);
}
.neu-interactive:hover {
    transform: translateY(-2px);
    box-shadow: var(--neu-raised-strong-shadow);
}
.neu-interactive:active {
    transform: translateY(0);
    box-shadow: var(--neu-pressed-shadow);
}

/* ============================================================
   4. LAYOUT
   ============================================================ */

.page-wrap {
    position: relative;
    z-index: 1;
    max-width: var(--neu-max-w);
    margin: 0 auto;
    padding: 0 var(--neu-gutter);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Subtle ambient gradient background that matches the iOS app
   — never interferes with text contrast because it sits behind content */
.neu-bg-field {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(1100px 700px at 10% -10%, var(--neu-accent-glow), transparent 60%),
        radial-gradient(900px  600px at 110% 20%, rgba(var(--neu-accent-rgb), 0.10), transparent 60%),
        var(--neu-gradient-bg);
    opacity: 0.85;
}

/* Page header (sub-pages: learn, privacy, terms, contact) */
.page-header {
    text-align: center;
    padding: 96px 0 var(--neu-space-6);
}
.page-header-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--neu-space-6);
    flex-wrap: wrap;
    margin-bottom: var(--neu-space-6);
}
.page-logo {
    width: 76px;
    height: 76px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--neu-surface);
    box-shadow: var(--neu-raised-shadow), 0 8px 28px var(--neu-accent-glow);
    transition: transform var(--neu-dur-md) var(--neu-ease), box-shadow var(--neu-dur-md) var(--neu-ease);
}
.page-logo:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: var(--neu-raised-strong-shadow), 0 14px 36px var(--neu-accent-glow-lg);
}
.page-logo img { width: 46px; height: 46px; border-radius: 12px; }

.page-header h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    background: var(--neu-gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.page-subtitle {
    color: var(--neu-text-secondary);
    font-size: var(--neu-fs-md);
    text-align: center;
    max-width: var(--neu-max-w-sm);
    margin: 0 auto var(--neu-space-12);
    line-height: 1.65;
}

/* Section dividers — now a faint gradient line, not a glow bar */
.section-divider {
    height: 1px;
    border: 0;
    margin: var(--neu-space-8) 0;
    background: linear-gradient(90deg,
        transparent,
        rgba(var(--neu-accent-rgb), 0.20),
        transparent);
    opacity: 0;
    transition: opacity var(--neu-dur-slow) var(--neu-ease);
}
.section-divider.in-view,
.section-divider.visible { opacity: 1; }

/* ============================================================
   5. COMPONENTS
   ============================================================ */

/* --- Neu section (replaces .glass-section) ---------------- */
.neu-section {
    background: var(--neu-surface);
    border-radius: var(--neu-radius-2xl);
    padding: var(--neu-space-12) var(--neu-space-10);
    margin-bottom: var(--neu-space-10);
    box-shadow: var(--neu-raised-shadow);
    border: 1px solid var(--neu-border-subtle);
    position: relative;
}
.neu-section h2 {
    font-size: clamp(1.5rem, 3.2vw, 2rem);
    font-weight: 800;
    color: var(--neu-text-primary);
    margin-bottom: var(--neu-space-5);
    padding-bottom: var(--neu-space-4);
    display: flex;
    align-items: center;
    gap: var(--neu-space-3);
    border-bottom: 1px solid var(--neu-border-subtle);
}
.neu-section h2::before {
    content: '';
    width: 5px;
    height: 26px;
    border-radius: 3px;
    background: var(--neu-gradient-brand);
    flex-shrink: 0;
}
.neu-section h3 {
    color: var(--neu-text-primary);
    font-size: var(--neu-fs-lg);
    font-weight: 700;
    margin: var(--neu-space-8) 0 var(--neu-space-3);
}
.neu-section p {
    color: var(--neu-text-secondary);
    font-size: var(--neu-fs-base);
    line-height: 1.75;
    margin-bottom: var(--neu-space-4);
}
.neu-section ul {
    color: var(--neu-text-secondary);
    line-height: 1.8;
    padding-left: var(--neu-space-6);
    margin-bottom: var(--neu-space-4);
}
.neu-section li { margin-bottom: var(--neu-space-2); }
.neu-section li::marker { color: var(--neu-accent); }
.neu-section strong { color: var(--neu-text-primary); font-weight: 600; }
.neu-section a { color: var(--neu-accent-text); font-weight: 600; }
.neu-section a:hover { color: var(--neu-accent); }

/* --- Highlight box (sidebar-accent callout) --------------- */
.neu-highlight {
    background: var(--neu-surface-recessed);
    box-shadow: var(--neu-pressed-shadow);
    border-radius: var(--neu-radius-md);
    padding: var(--neu-space-5) var(--neu-space-6);
    margin: var(--neu-space-5) 0;
    position: relative;
    overflow: hidden;
}
.neu-highlight::before {
    content: '';
    position: absolute;
    left: 0; top: 10%; bottom: 10%;
    width: 4px;
    border-radius: 2px;
    background: var(--neu-gradient-brand);
}
.neu-highlight p { color: var(--neu-text-secondary); margin-bottom: var(--neu-space-2); }
.neu-highlight p:last-child { margin-bottom: 0; }
.neu-highlight strong { color: var(--neu-text-primary); }

/* --- Hero (landing page) ---------------------------------- */
.hero {
    min-height: 100vh;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
    padding: var(--neu-space-16) var(--neu-space-5);
    position: relative;
}
.hero-icon-wrap {
    position: relative;
    margin-bottom: var(--neu-space-12);
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-icon {
    width: 160px;
    height: 160px;
    border-radius: var(--neu-radius-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--neu-surface);
    box-shadow:
        var(--neu-raised-strong-shadow),
        0 0 80px var(--neu-accent-glow),
        0 0 160px var(--neu-accent-glow);
    animation: heroFloat 6s ease-in-out infinite;
    position: relative;
}
.hero-icon img {
    width: 104px;
    height: 104px;
    border-radius: var(--neu-radius-xl);
}
@keyframes heroFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-16px); }
}

.hero h1 {
    font-size: var(--neu-fs-hero);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin-bottom: var(--neu-space-6);
    background: var(--neu-gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    /* No max-width in ch — long-word locales (ru, tr, de) need room */
    max-width: 20ch;
    text-wrap: balance;
}
.hero-subtitle {
    font-size: clamp(1.05rem, 2.2vw, 1.3rem);
    color: var(--neu-text-secondary);
    font-weight: 400;
    max-width: 620px;
    margin: 0 auto var(--neu-space-12);
    line-height: 1.65;
}

/* Typed cursor blink (kept for markup compatibility) */
.typed-cursor {
    display: inline-block;
    width: 3px;
    height: 1.1em;
    background: var(--neu-accent);
    margin-left: 4px;
    vertical-align: text-bottom;
    animation: cursorBlink 0.7s step-end infinite;
}
@keyframes cursorBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* --- CTA buttons ------------------------------------------ */
.cta-row {
    display: flex;
    gap: var(--neu-space-5);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--neu-space-20);
}
.cta-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--neu-space-3);
    padding: 18px 40px;
    border: 0;
    border-radius: var(--neu-radius-pill);
    font-family: inherit;
    font-size: var(--neu-fs-md);
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition:
        transform var(--neu-dur-md)   var(--neu-ease),
        box-shadow var(--neu-dur-md)  var(--neu-ease);
}
.cta-primary {
    color: var(--neu-text-on-accent);
    background: var(--neu-gradient-cta);
    box-shadow:
        var(--neu-raised-shadow),
        0 10px 30px var(--neu-accent-glow-lg);
}
.cta-primary::after {
    /* glossy top highlight */
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.22), transparent);
    border-radius: var(--neu-radius-pill) var(--neu-radius-pill) 0 0;
    pointer-events: none;
}
.cta-primary:hover {
    transform: translateY(-3px);
    box-shadow:
        var(--neu-raised-strong-shadow),
        0 16px 44px var(--neu-accent-glow-lg);
}
.cta-primary:active {
    transform: translateY(0);
    box-shadow:
        var(--neu-pressed-shadow),
        0 4px 12px var(--neu-accent-glow);
}

.cta-secondary {
    color: var(--neu-text-primary);
    background: var(--neu-surface);
    box-shadow: var(--neu-raised-shadow);
}
.cta-secondary:hover {
    transform: translateY(-3px);
    box-shadow: var(--neu-raised-strong-shadow);
    color: var(--neu-accent);
}
.cta-secondary:active {
    transform: translateY(0);
    box-shadow: var(--neu-pressed-shadow);
}

/* Scroll hint */
.scroll-hint {
    position: absolute;
    bottom: var(--neu-space-10);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--neu-space-2);
    color: var(--neu-text-tertiary);
    font-size: var(--neu-fs-xs);
    letter-spacing: 0.14em;
    animation: scrollHintBounce 2.4s ease-in-out infinite;
}
.scroll-hint-arrow {
    width: 22px;
    height: 22px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.6;
}
@keyframes scrollHintBounce {
    0%, 100% { transform: translateY(0); opacity: 0.6; }
    50%      { transform: translateY(8px); opacity: 1; }
}

/* --- Screenshot showcase ---------------------------------- */
.screenshot-wrap {
    background: var(--neu-surface);
    border-radius: var(--neu-radius-2xl);
    padding: var(--neu-space-12) var(--neu-space-10);
    text-align: center;
    box-shadow: var(--neu-raised-shadow);
    border: 1px solid var(--neu-border-subtle);
    margin-bottom: var(--neu-space-12);
}
.screenshot-wrap h2 {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    margin-bottom: var(--neu-space-3);
    color: var(--neu-text-primary);
    font-weight: 800;
}
.screenshot-wrap > p {
    color: var(--neu-text-secondary);
    font-size: var(--neu-fs-md);
    margin-bottom: var(--neu-space-10);
}
.screenshot-frame {
    border-radius: var(--neu-radius-2xl);
    overflow: hidden;
    background: var(--neu-surface-recessed);
    box-shadow: var(--neu-pressed-shadow);
    padding: var(--neu-space-4);
    transition: transform var(--neu-dur-slow) var(--neu-ease);
}
.screenshot-frame:hover { transform: scale(1.02) translateY(-4px); }
.screenshot-frame img { border-radius: var(--neu-radius-xl); }

/* --- Stats row -------------------------------------------- */
.stat-row {
    display: flex;
    justify-content: center;
    gap: var(--neu-space-12);
    flex-wrap: wrap;
    margin: var(--neu-space-10) 0;
}
.stat-item { text-align: center; }
.stat-num {
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 900;
    background: var(--neu-gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    line-height: 1;
}
.stat-label {
    color: var(--neu-text-secondary);
    font-size: var(--neu-fs-sm);
    margin-top: var(--neu-space-2);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* --- Feature cards ---------------------------------------- */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--neu-space-6);
}
.feature-card {
    background: var(--neu-surface);
    border: 1px solid var(--neu-border-subtle);
    border-radius: var(--neu-radius-xl);
    padding: var(--neu-space-10) var(--neu-space-6);
    text-align: center;
    box-shadow: var(--neu-raised-shadow);
    transition:
        transform var(--neu-dur-md)   var(--neu-ease),
        box-shadow var(--neu-dur-md)  var(--neu-ease);
    position: relative;
    overflow: hidden;
}
.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--neu-raised-strong-shadow);
}
.feature-card:active { box-shadow: var(--neu-pressed-shadow); transform: translateY(0); }
.feature-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--neu-space-5);
    background: var(--neu-surface);
    border-radius: 50%;
    box-shadow: var(--neu-pressed-shadow);
    font-size: 1.9rem;
}
.feature-card h3 {
    color: var(--neu-text-primary);
    font-size: var(--neu-fs-lg);
    font-weight: 700;
    margin-bottom: var(--neu-space-2);
}
.feature-card p {
    color: var(--neu-text-secondary);
    font-size: var(--neu-fs-sm);
    line-height: 1.65;
}

/* --- Language grid / marquee ------------------------------ */
.languages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--neu-space-4);
}
.lang-card {
    background: var(--neu-surface);
    border-radius: var(--neu-radius-lg);
    padding: var(--neu-space-6) var(--neu-space-4);
    text-align: center;
    box-shadow: var(--neu-flat-shadow);
    border: 1px solid var(--neu-border-subtle);
    transition:
        transform var(--neu-dur-md)   var(--neu-ease),
        box-shadow var(--neu-dur-md)  var(--neu-ease);
}
.lang-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--neu-raised-shadow);
}
.lang-flag {
    font-size: 2.4rem;
    margin-bottom: var(--neu-space-2);
    transition: transform var(--neu-dur-md) var(--neu-ease);
    display: block;
}
.lang-card:hover .lang-flag { transform: scale(1.18) rotate(-6deg); }
.lang-name {
    color: var(--neu-text-primary);
    font-weight: 600;
    font-size: var(--neu-fs-sm);
}

.lang-marquee-wrap {
    overflow: hidden;
    margin: var(--neu-space-10) calc(-1 * var(--neu-space-10)) 0;
    padding: var(--neu-space-5) 0;
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.lang-marquee {
    display: flex;
    gap: var(--neu-space-4);
    width: max-content;
    animation: marqueeScroll 40s linear infinite;
}
.lang-marquee:hover { animation-play-state: paused; }
.lang-marquee .lang-card { flex-shrink: 0; min-width: 160px; }
@keyframes marqueeScroll { to { transform: translateX(-50%); } }

/* --- Plan cards ------------------------------------------- */
.plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--neu-space-6);
}
.plan-card {
    background: var(--neu-surface);
    border-radius: var(--neu-radius-xl);
    padding: var(--neu-space-10) var(--neu-space-8);
    text-align: center;
    border: 1px solid var(--neu-border-subtle);
    box-shadow: var(--neu-raised-shadow);
    transition:
        transform var(--neu-dur-md)   var(--neu-ease),
        box-shadow var(--neu-dur-md)  var(--neu-ease);
    position: relative;
}
.plan-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--neu-raised-strong-shadow);
}
.plan-card.featured {
    box-shadow:
        var(--neu-raised-strong-shadow),
        0 0 40px var(--neu-accent-glow);
    transform: translateY(-6px);
}
.plan-card.featured::before {
    content: '★';
    position: absolute;
    top: -14px; left: 50%;
    transform: translateX(-50%);
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--neu-gradient-cta);
    color: #fff;
    font-size: 1.1rem;
    box-shadow: var(--neu-raised-shadow);
}
.plan-icon { font-size: 2.6rem; margin-bottom: var(--neu-space-4); }
.plan-name {
    color: var(--neu-text-primary);
    font-size: var(--neu-fs-xl);
    font-weight: 800;
    margin-bottom: var(--neu-space-3);
}
.plan-description {
    color: var(--neu-text-secondary);
    font-size: var(--neu-fs-base);
    margin-bottom: var(--neu-space-5);
    line-height: 1.6;
}
.plan-highlight {
    background: var(--neu-surface-recessed);
    box-shadow: var(--neu-pressed-shadow);
    border-radius: var(--neu-radius-md);
    padding: var(--neu-space-4) var(--neu-space-5);
}
.plan-lessons, .plan-duration {
    color: var(--neu-text-primary);
    font-weight: 600;
    font-size: var(--neu-fs-base);
}
.plan-duration { color: var(--neu-text-secondary); font-weight: 500; margin-top: var(--neu-space-1); }

/* All plans include */
.all-plans-features { margin-top: var(--neu-space-16); }
.features-heading {
    color: var(--neu-text-primary);
    font-size: var(--neu-fs-xl);
    font-weight: 800;
    text-align: center;
    margin-bottom: var(--neu-space-8);
}
.common-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--neu-space-3);
}
.feature-box {
    background: var(--neu-surface);
    border: 1px solid var(--neu-border-subtle);
    border-radius: var(--neu-radius-md);
    padding: var(--neu-space-4) var(--neu-space-5);
    display: flex;
    align-items: center;
    gap: var(--neu-space-3);
    box-shadow: var(--neu-flat-shadow);
    transition:
        transform var(--neu-dur-md)   var(--neu-ease),
        box-shadow var(--neu-dur-md)  var(--neu-ease);
}
.feature-box:hover {
    transform: translateX(4px);
    box-shadow: var(--neu-raised-shadow);
}
.feature-emoji { font-size: 1.4rem; flex-shrink: 0; }
.feature-text {
    color: var(--neu-text-primary);
    font-weight: 500;
    font-size: var(--neu-fs-sm);
}

/* --- Download CTA ----------------------------------------- */
.download-cta {
    background: var(--neu-surface);
    border-radius: var(--neu-radius-2xl);
    padding: var(--neu-space-16) var(--neu-space-10);
    /* Bulletproof centering: flex column + text-align so the Apple badge
       (inline-flex) AND any future inline children are centered regardless
       of their display type. text-align is kept as a belt-and-braces. */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: var(--neu-space-12);
    box-shadow:
        var(--neu-raised-strong-shadow),
        0 0 60px var(--neu-accent-glow);
    border: 1px solid var(--neu-border-subtle);
    position: relative;
    overflow: hidden;
}
/* Defensive centering for the badge anchor inside the download CTA — in case
   any stale/cached rule tries to override the parent's flex alignment. */
.download-cta > .apple-badge-link {
    align-self: center;
    margin-left: auto;
    margin-right: auto;
}
.download-cta::before {
    content: '';
    position: absolute;
    top: -120px; right: -80px;
    width: 360px; height: 360px;
    background: radial-gradient(circle, var(--neu-accent-glow) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    animation: dlOrb 14s ease-in-out infinite alternate;
}
@keyframes dlOrb { to { transform: translate(-40px, 50px) scale(1.25); } }
.download-cta h2 {
    color: var(--neu-text-primary);
    font-size: clamp(1.6rem, 3.2vw, 2.2rem);
    margin-bottom: var(--neu-space-5);
    font-weight: 800;
    position: relative;
    /* Span the flex row so text-align: center continues to govern wrapping */
    width: 100%;
}
.download-cta p {
    color: var(--neu-text-secondary);
    font-size: var(--neu-fs-md);
    margin-bottom: var(--neu-space-8);
    max-width: 560px;
    /* In a flex column, align-self centers the cross axis; keep auto-margins
       as a fallback for browsers that dropped to the block fallback. */
    align-self: center;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
.download-cta strong { color: var(--neu-text-primary); }

/* --- Official Apple "Download on the App Store" badge ------
 * Follows Apple Marketing Tools guidelines:
 *   - Badge image is rendered unmodified (no background, filter, or border)
 *   - Clear space ≥ 1/10 of badge height on all sides (enforced by padding)
 *   - Minimum height 40px; we ship 48px default and 56px large variant
 *   - Hover/active feedback uses opacity + subtle lift only — the badge
 *     artwork itself is never recolored or distorted
 * Reference: https://toolbox.marketingtools.apple.com/en-us/app-store/us
 * ----------------------------------------------------------- */
.apple-badge-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Clear space: 1/10 of 48px badge = ~5px → 6px for safety */
    padding: 6px;
    border-radius: 12px;
    text-decoration: none;
    line-height: 0;
    transition:
        transform var(--neu-dur-md) var(--neu-ease),
        opacity   var(--neu-dur-fast) var(--neu-ease);
    -webkit-tap-highlight-color: transparent;
}
.apple-badge-img {
    display: block;
    /* Default size — visually balanced with neumorphic CTA next to it.
       Apple minimum is 40px; we ship 60px for strong hero presence. */
    height: 60px;
    width: auto;
    /* Guarantee the asset is rendered unmodified */
    filter: none;
    box-shadow: none;
    border: 0;
    background: transparent;
    user-select: none;
    -webkit-user-drag: none;
}
.apple-badge-link:hover {
    transform: translateY(-2px);
    opacity: 0.92;
}
.apple-badge-link:active {
    transform: translateY(0);
    opacity: 1;
}
.apple-badge-link:focus-visible {
    outline: 3px solid var(--neu-accent-text);
    outline-offset: 4px;
    border-radius: 12px;
}

/* Larger variant used in the dedicated download section */
.apple-badge-link--lg .apple-badge-img {
    /* Bigger hit-area for the hero download section */
    height: 72px;
}
.apple-badge-link--lg {
    /* 1/10 of 72px ≈ 7px → round up to 10px for breathing room */
    padding: 10px;
}

/* Retain a minimal alias for legacy usages so existing templates don't break. */
.app-store-badge, .download-button {
    display: inline-flex;
    align-items: center;
    gap: var(--neu-space-3);
    background: var(--neu-gradient-cta);
    color: var(--neu-text-on-accent) !important;
    padding: 18px 48px;
    border-radius: var(--neu-radius-pill);
    font-size: var(--neu-fs-md);
    font-weight: 700;
    text-decoration: none;
    box-shadow:
        var(--neu-raised-shadow),
        0 12px 32px var(--neu-accent-glow-lg);
    transition:
        transform var(--neu-dur-md)   var(--neu-ease),
        box-shadow var(--neu-dur-md)  var(--neu-ease);
    position: relative;
}
.app-store-badge:hover, .download-button:hover {
    transform: translateY(-4px);
    box-shadow:
        var(--neu-raised-strong-shadow),
        0 18px 48px var(--neu-accent-glow-lg);
}
.app-store-badge:active, .download-button:active {
    transform: translateY(0);
    box-shadow: var(--neu-pressed-shadow), 0 4px 12px var(--neu-accent-glow);
}

/* --- Contact form ----------------------------------------- */
.form-wrap {
    background: var(--neu-surface);
    border-radius: var(--neu-radius-xl);
    padding: var(--neu-space-10);
    box-shadow: var(--neu-raised-shadow);
    border: 1px solid var(--neu-border-subtle);
}
.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--neu-space-5);
}
.form-field {
    display: flex;
    align-items: stretch;
    background: var(--neu-surface-recessed);
    border-radius: var(--neu-radius-md);
    box-shadow: var(--neu-pressed-shadow);
    overflow: hidden;
    transition: box-shadow var(--neu-dur-fast) var(--neu-ease);
}
.form-field:focus-within {
    box-shadow:
        var(--neu-pressed-shadow),
        0 0 0 2px var(--neu-accent-glow-lg);
}
.field-icon {
    padding: var(--neu-space-4) var(--neu-space-5);
    color: var(--neu-accent);
    font-size: var(--neu-fs-md);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 52px;
}
.form-field input,
.form-field textarea {
    flex: 1;
    padding: var(--neu-space-4) var(--neu-space-5) var(--neu-space-4) 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--neu-text-primary);
    font-family: inherit;
    font-size: var(--neu-fs-base);
    line-height: 1.5;
    resize: vertical;
    min-height: 48px;
}
.form-field input::placeholder,
.form-field textarea::placeholder {
    color: var(--neu-text-tertiary);
}

.submit-btn {
    align-self: center;
    padding: 16px 44px;
    border: 0;
    border-radius: var(--neu-radius-pill);
    background: var(--neu-gradient-cta);
    color: var(--neu-text-on-accent);
    font-family: inherit;
    font-size: var(--neu-fs-md);
    font-weight: 700;
    cursor: pointer;
    box-shadow:
        var(--neu-raised-shadow),
        0 10px 24px var(--neu-accent-glow-lg);
    transition:
        transform var(--neu-dur-md)   var(--neu-ease),
        box-shadow var(--neu-dur-md)  var(--neu-ease);
    min-width: 200px;
}
.submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--neu-raised-strong-shadow), 0 16px 36px var(--neu-accent-glow-lg);
}
.submit-btn:active {
    transform: translateY(0);
    box-shadow: var(--neu-pressed-shadow);
}

/* Status messages */
.message-status {
    padding: var(--neu-space-4) var(--neu-space-6);
    border-radius: var(--neu-radius-md);
    margin-bottom: var(--neu-space-5);
    font-weight: 600;
    text-align: center;
    box-shadow: var(--neu-flat-shadow);
}
.message-status.success {
    background: var(--neu-success-bg);
    color: var(--neu-success-text);
    box-shadow: var(--neu-flat-shadow), 0 0 0 1px var(--neu-success-ring);
}
.message-status.error {
    background: var(--neu-error-bg);
    color: var(--neu-error-text);
    box-shadow: var(--neu-flat-shadow), 0 0 0 1px var(--neu-error-ring);
}

/* --- Footer ------------------------------------------------ */
.site-footer {
    margin-top: auto;
    padding: var(--neu-space-16) var(--neu-space-10) var(--neu-space-10);
    background: var(--neu-surface);
    border-radius: var(--neu-radius-2xl) var(--neu-radius-2xl) 0 0;
    box-shadow: var(--neu-raised-shadow);
    border: 1px solid var(--neu-border-subtle);
    border-bottom: 0;
}
.footer-inner { max-width: var(--neu-max-w); margin: 0 auto; }
.footer-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--neu-space-4);
    margin-bottom: var(--neu-space-3);
}
.footer-brand img {
    width: 44px; height: 44px;
    border-radius: var(--neu-radius-md);
    box-shadow: var(--neu-flat-shadow);
}
.footer-brand span {
    color: var(--neu-text-primary);
    font-size: var(--neu-fs-lg);
    font-weight: 700;
}
.footer-tagline {
    color: var(--neu-text-secondary);
    text-align: center;
    margin-bottom: var(--neu-space-6);
    font-size: var(--neu-fs-sm);
}
.footer-nav {
    display: flex;
    justify-content: center;
    gap: var(--neu-space-3);
    flex-wrap: wrap;
    margin-bottom: var(--neu-space-6);
}
.footer-nav a {
    color: var(--neu-text-secondary);
    text-decoration: none;
    font-weight: 500;
    font-size: var(--neu-fs-sm);
    /* 12+12+(14*1.6) ≈ 46 px — meets 44 px min touch target */
    padding: 12px var(--neu-space-4);
    border-radius: var(--neu-radius-pill);
    transition:
        color var(--neu-dur-fast)    var(--neu-ease),
        box-shadow var(--neu-dur-fast) var(--neu-ease),
        background var(--neu-dur-fast) var(--neu-ease);
}
.footer-nav a:hover {
    color: var(--neu-accent-text);
    background: var(--neu-surface);
    box-shadow: var(--neu-flat-shadow);
}
.footer-nav a:focus-visible {
    color: var(--neu-accent-text);
    background: var(--neu-surface);
    box-shadow: var(--neu-flat-shadow);
}
.footer-copy {
    text-align: center;
    color: var(--neu-text-tertiary);
    font-size: var(--neu-fs-xs);
}
.footer-copy p { margin-bottom: var(--neu-space-1); }

/* ============================================================
   6. UTILITIES — scroll animations (compatible w/ cosmic.js)
   ============================================================ */

.sa {
    opacity: 0;
    will-change: transform, opacity, filter;
    transition:
        transform var(--neu-dur-slow) var(--neu-ease),
        opacity   var(--neu-dur-slow) var(--neu-ease),
        filter    var(--neu-dur-slow) var(--neu-ease);
}
.sa[data-sa="fade-up"]    { transform: translateY(40px); }
.sa[data-sa="fade-left"]  { transform: translateX(-40px); }
.sa[data-sa="fade-right"] { transform: translateX(40px); }
.sa[data-sa="scale-in"]   { transform: scale(0.94); }
.sa[data-sa="flip-up"]    { transform: perspective(800px) rotateX(12deg) translateY(30px); transform-origin: bottom; }
.sa[data-sa="rotate-in"]  { transform: rotate(-4deg) translateY(24px) scale(0.97); }
.sa[data-sa="blur-in"]    { transform: translateY(24px); filter: blur(6px); }
.sa[data-sa="slide-skew"] { transform: translateX(-30px) skewX(-4deg); }
.sa.in-view {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}

/* Scroll progress bar (slimmer and brand-aware) */
.scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0%;
    background: var(--neu-gradient-cta);
    z-index: 9999;
    transition: width 0.05s linear;
    box-shadow: 0 0 12px var(--neu-accent-glow);
}

/* Canvas + orbs (compat) — used only if the page renders them.
   On neumorphic pages they're hidden; the ambient gradient replaces them. */
#bgCanvas { display: none; }
.orb, .orb-a, .orb-b, .orb-c, .orb1, .orb2, .orb3 { display: none; }

/* ============================================================
   7. RESPONSIVE
   ============================================================ */

@media (max-width: 960px) {
    .neu-section { padding: var(--neu-space-10) var(--neu-space-6); }
    .download-cta { padding: var(--neu-space-12) var(--neu-space-6); }
    .site-footer { padding: var(--neu-space-12) var(--neu-space-6) var(--neu-space-8); }
}
@media (max-width: 768px) {
    :root { --neu-gutter: 16px; }
    .page-header { padding: 72px 0 var(--neu-space-4); }
    .page-header-inner { flex-direction: column; gap: var(--neu-space-4); }
    .page-logo { width: 64px; height: 64px; border-radius: 18px; }
    .page-logo img { width: 38px; height: 38px; border-radius: 10px; }
    .hero { min-height: 88vh; padding: var(--neu-space-12) var(--neu-space-4); }
    .hero-icon { width: 132px; height: 132px; border-radius: var(--neu-radius-xl); }
    .hero-icon img { width: 84px; height: 84px; border-radius: var(--neu-radius-lg); }
    .cta-row { gap: var(--neu-space-3); }
    .cta-btn { padding: 16px 28px; font-size: var(--neu-fs-base); }
    .stat-row { gap: var(--neu-space-8); }
    .lang-marquee-wrap { margin-left: calc(-1 * var(--neu-space-6)); margin-right: calc(-1 * var(--neu-space-6)); }
    .neu-section h2 { font-size: 1.4rem; }
    .form-wrap { padding: var(--neu-space-6) var(--neu-space-5); }
    /* Apple badge scales down slightly on tablet/large phones — still well above 40px min */
    .apple-badge-img { height: 54px; }
    .apple-badge-link--lg .apple-badge-img { height: 64px; }
}
@media (max-width: 480px) {
    .features-grid, .plans-grid { grid-template-columns: 1fr; }
    .languages-grid  { grid-template-columns: repeat(2, 1fr); }
    .cta-row { flex-direction: column; align-items: stretch; padding: 0 var(--neu-space-3); }
    .cta-btn { justify-content: center; }
    /* Apple-compliant: min-height stays ≥ 40px on phones, centred in its flex row */
    .apple-badge-link { align-self: center; }
    .footer-nav { flex-direction: column; align-items: center; gap: var(--neu-space-2); }
    .hero-icon {
        box-shadow:
            var(--neu-raised-shadow),
            0 0 40px var(--neu-accent-glow);
    }
}

/* ============================================================
   8. ACCESSIBILITY — reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .hero-icon, .download-cta::before { animation: none; }
    .sa { opacity: 1; transform: none; filter: none; }
}

/* ============================================================
   9. PRINT — keeps legal pages readable on paper
   ============================================================ */

@media print {
    .neu-bg-field, .scroll-progress, .scroll-hint,
    .hero-icon, .download-cta { display: none !important; }
    body, .neu-section, .page-wrap {
        background: #fff !important; color: #000 !important; box-shadow: none !important;
    }
    .neu-section { page-break-inside: avoid; }
}