/* ==========================================================================
   أرباحي — Landing Page v2 (Task ID: C, refined by Task ID: A)
   --------------------------------------------------------------------------
   A complete mobile-app-feel redesign of the public homepage.

   Design principles:
     • Mobile-first, app-like feel (touch-friendly, native-app animations)
     • Dark theme: bg #0a0a14, cards rgba(255,255,255,0.04)
     • Modern gradients: purple-pink, blue-cyan, green-teal, orange-red
     • All classes prefixed with `.lp-` to avoid conflicts with the legacy
       landing-desktop.css / landing-mobile.css styles.
     • Honours RTL (Arabic) and LTR (English / German) via logical properties.
     • Honours `prefers-reduced-motion`.

   Sections:
     1.  Hero (gradient + typewriter + CTAs + trust badges)
     2.  Live stats bar (count-up)
     3.  "How You Earn" (4 fake-ad showcase cards)
     4.  Earning Simulator (interactive widget)
     5.  Payment Proofs (horizontal scroll)
     6.  Platform Partners (logo row)
     7.  How It Works (4 steps)
     8.  Testimonials
     9.  FAQ (accordion)
     10. Final CTA banner
     11. Sticky mobile CTA

   Task ID: A refinements:
     • Removed the floating-dollars decoration (.lp-dollars-layer, .lp-dollar*,
       @keyframes lpFloatUp) from the hero to reduce GPU/CPU load on mobile.
     • Removed the infinite `lpBlobDrift` background-blob animations (kept the
       static blurred blobs) — purely decorative and a performance hog.
     • Reduced every `backdrop-filter: blur()` that was 18px+ down to ≤15px.
   ========================================================================== */

/* ---------- 0. CSS custom properties for the landing page ---------- */
:root {
    --lp-bg: #0a0a14;
    --lp-bg-2: #0d0d1d;
    --lp-card: rgba(255, 255, 255, 0.04);
    --lp-card-hover: rgba(255, 255, 255, 0.07);
    --lp-border: rgba(255, 255, 255, 0.08);
    --lp-border-strong: rgba(255, 255, 255, 0.16);
    --lp-text: #f5f6fa;
    --lp-text-2: rgba(245, 246, 250, 0.72);
    --lp-text-3: rgba(245, 246, 250, 0.45);
    --lp-radius: 22px;
    --lp-radius-sm: 14px;
    --lp-radius-pill: 999px;
    --lp-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.55);
    --lp-shadow-card: 0 12px 36px -16px rgba(0, 0, 0, 0.6);
    --lp-grad-purple: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 50%, #fd79a8 100%);
    --lp-grad-cyan: linear-gradient(135deg, #00cec9 0%, #74b9ff 100%);
    --lp-grad-green: linear-gradient(135deg, #00b894 0%, #55efc4 100%);
    --lp-grad-orange: linear-gradient(135deg, #fdcb6e 0%, #e17055 50%, #d63031 100%);
    --lp-grad-pink: linear-gradient(135deg, #fd79a8 0%, #e84393 50%, #a29bfe 100%);
    --lp-grad-teal: linear-gradient(135deg, #00b894 0%, #00cec9 100%);
    --lp-grad-mesh: linear-gradient(120deg, #6c5ce7 0%, #00cec9 40%, #fd79a8 80%, #6c5ce7 100%);
    --lp-max-w: 1180px;
    --lp-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- 0.1 Body background override for the landing page ---------- */
body {
    background: var(--lp-bg);
    color: var(--lp-text);
    font-family: "Cairo", "Tajawal", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Soft static background gradient blobs (Task ID: A — animations removed
   for performance; the static blur is enough to give depth). */
body::before,
body::after {
    content: "";
    position: fixed;
    width: 70vmax;
    height: 70vmax;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.28;
    z-index: -1;
    pointer-events: none;
}
body::before {
    top: -25vmax;
    inset-inline-start: -20vmax;
    background: radial-gradient(circle, #6c5ce7 0%, transparent 70%);
}
body::after {
    bottom: -25vmax;
    inset-inline-end: -20vmax;
    background: radial-gradient(circle, #fd79a8 0%, transparent 70%);
}

/* ---------- 0.2 Reveal-on-scroll utility ---------- */
.lp-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s var(--lp-ease), transform 0.7s var(--lp-ease);
    will-change: opacity, transform;
}
.lp-reveal.lp-in {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .lp-reveal { opacity: 1; transform: none; transition: none; }
    body::before, body::after { animation: none; }
}

/* ---------- 0.3 Section scaffolding ---------- */
.lp-section {
    width: 100%;
    padding: clamp(56px, 9vw, 110px) 0;
    position: relative;
}
.lp-container {
    width: 100%;
    max-width: var(--lp-max-w);
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 32px);
}
.lp-section-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto clamp(32px, 5vw, 56px);
}
.lp-section-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: var(--lp-radius-pill);
    background: rgba(108, 92, 231, 0.14);
    border: 1px solid rgba(108, 92, 231, 0.32);
    color: #c8c0ff;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.lp-section-badge i { font-size: 0.85rem; }
.lp-section-title {
    font-size: clamp(1.7rem, 4vw, 2.6rem);
    font-weight: 900;
    line-height: 1.18;
    margin: 0 0 14px;
    color: var(--lp-text);
}
.lp-section-title .lp-grad {
    background: var(--lp-grad-mesh);
    background-size: 220% 220%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: lpGradShift 8s ease infinite;
}
@keyframes lpGradShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.lp-section-desc {
    font-size: clamp(0.95rem, 1.4vw, 1.08rem);
    line-height: 1.7;
    color: var(--lp-text-2);
    margin: 0;
}

/* ==========================================================================
   1.  HERO
   ========================================================================== */
.lp-hero {
    position: relative;
    min-height: 100svh;
    min-height: 100vh;
    padding: clamp(80px, 14vh, 140px) 0 clamp(48px, 8vh, 96px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
}
/* Animated gradient backdrop */
.lp-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(60% 50% at 50% 0%, rgba(108, 92, 231, 0.35) 0%, transparent 60%),
        radial-gradient(50% 40% at 80% 30%, rgba(0, 206, 201, 0.22) 0%, transparent 60%),
        radial-gradient(45% 35% at 20% 70%, rgba(253, 121, 168, 0.22) 0%, transparent 60%),
        linear-gradient(180deg, #0a0a14 0%, #0c0c1f 100%);
}
.lp-hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 75%);
    opacity: 0.45;
}

/* Hero content */
.lp-hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 32px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}
.lp-hero-pretitle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 12px;
    border-radius: var(--lp-radius-pill);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--lp-border-strong);
    color: var(--lp-text);
    font-size: 0.85rem;
    font-weight: 600;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.45);
}
.lp-hero-pretitle .lp-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #55efc4;
    box-shadow: 0 0 0 0 rgba(85, 239, 196, 0.7);
    animation: lpPulse 2s infinite;
}
@keyframes lpPulse {
    0%   { box-shadow: 0 0 0 0 rgba(85, 239, 196, 0.7); }
    70%  { box-shadow: 0 0 0 12px rgba(85, 239, 196, 0); }
    100% { box-shadow: 0 0 0 0 rgba(85, 239, 196, 0); }
}

.lp-hero-title {
    font-size: clamp(2.2rem, 7vw, 4rem);
    font-weight: 900;
    line-height: 1.08;
    margin: 0;
    letter-spacing: -0.02em;
    color: var(--lp-text);
}
.lp-hero-title .lp-grad {
    background: var(--lp-grad-mesh);
    background-size: 220% 220%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: lpGradShift 8s ease infinite;
    display: inline-block;
}

/* Typewriter */
.lp-typewriter {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-radius: var(--lp-radius-pill);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--lp-border);
    color: var(--lp-text);
    font-size: clamp(0.95rem, 2vw, 1.15rem);
    font-weight: 700;
    min-height: 46px;
}
.lp-typewriter i { color: #fdcb6e; }
.lp-typewriter .lp-tw-text { min-width: 90px; text-align: start; }
.lp-typewriter .lp-tw-cursor {
    width: 2px;
    height: 1.1em;
    background: var(--lp-text);
    margin-inline-start: 2px;
    animation: lpBlink 1s steps(2) infinite;
}
@keyframes lpBlink { 50% { opacity: 0; } }

/* CTAs */
.lp-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin-top: 8px;
}
.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 56px;
    padding: 0 28px;
    border-radius: var(--lp-radius-pill);
    font-size: 1.02rem;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: transform 0.25s var(--lp-ease), box-shadow 0.3s var(--lp-ease), background 0.3s var(--lp-ease);
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}
.lp-btn i { font-size: 1.05em; }
.lp-btn-primary {
    background: var(--lp-grad-purple);
    color: #fff;
    box-shadow: 0 16px 40px -12px rgba(108, 92, 231, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.lp-btn-primary::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 80%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-20deg);
    animation: lpShine 3.4s ease-in-out infinite;
}
@keyframes lpShine { 0%, 60% { left: -120%; } 100% { left: 140%; } }
.lp-btn-primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 22px 50px -10px rgba(108, 92, 231, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.lp-btn-ghost {
    background: rgba(255, 255, 255, 0.06);
    color: var(--lp-text);
    border: 1px solid var(--lp-border-strong);
    backdrop-filter: blur(10px);
}
.lp-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.28);
}
.lp-btn:active { transform: translateY(0) scale(0.98); }

/* Trust badges */
.lp-trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 16px;
    max-width: 640px;
}
.lp-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--lp-radius-pill);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--lp-border);
    color: var(--lp-text-2);
    font-size: 0.82rem;
    font-weight: 600;
    backdrop-filter: blur(8px);
}

/* Scroll-down hint */
.lp-scroll-hint {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--lp-text-3);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    z-index: 1;
    pointer-events: none;
}
.lp-scroll-hint .lp-mouse {
    width: 22px;
    height: 36px;
    border: 2px solid var(--lp-text-3);
    border-radius: 14px;
    position: relative;
}
.lp-scroll-hint .lp-mouse::after {
    content: "";
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 7px;
    background: var(--lp-text-2);
    border-radius: 2px;
    animation: lpWheel 1.8s ease-in-out infinite;
}
@keyframes lpWheel {
    0%   { opacity: 0; transform: translate(-50%, 0); }
    40%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, 10px); }
}

/* ==========================================================================
   2.  LIVE STATS BAR
   ========================================================================== */
.lp-stats-bar {
    padding: 24px 0;
    background: rgba(255, 255, 255, 0.025);
    border-block: 1px solid var(--lp-border);
}
.lp-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
@media (min-width: 720px) { .lp-stats-grid { grid-template-columns: repeat(4, 1fr); } }
.lp-stat {
    text-align: center;
    padding: 18px 12px;
    border-radius: var(--lp-radius-sm);
    background: var(--lp-card);
    border: 1px solid var(--lp-border);
    transition: transform 0.3s var(--lp-ease), border-color 0.3s;
}
.lp-stat:hover { transform: translateY(-3px); border-color: var(--lp-border-strong); }
.lp-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    margin-bottom: 10px;
}
.lp-stat-icon.lp-i-purple { background: rgba(108, 92, 231, 0.18); color: #a29bfe; }
.lp-stat-icon.lp-i-cyan   { background: rgba(0, 206, 201, 0.18); color: #00cec9; }
.lp-stat-icon.lp-i-green  { background: rgba(0, 184, 148, 0.18); color: #55efc4; }
.lp-stat-icon.lp-i-amber  { background: rgba(253, 203, 110, 0.18); color: #fdcb6e; }
.lp-stat-value {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 900;
    line-height: 1;
    margin: 4px 0;
    background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.65) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.lp-stat-label {
    font-size: 0.82rem;
    color: var(--lp-text-2);
    font-weight: 600;
}

/* ==========================================================================
   3.  HOW YOU EARN — fake-ad showcase
   ========================================================================== */
.lp-earn-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}
@media (min-width: 720px) { .lp-earn-grid { grid-template-columns: repeat(2, 1fr); } }

.lp-earn-card {
    position: relative;
    border-radius: var(--lp-radius);
    padding: 24px;
    overflow: hidden;
    background: var(--lp-card);
    border: 1px solid var(--lp-border);
    transition: transform 0.35s var(--lp-ease), box-shadow 0.35s var(--lp-ease), border-color 0.35s;
    isolation: isolate;
}
.lp-earn-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.16;
    transition: opacity 0.35s;
}
.lp-earn-card.lp-ec-install::before { background: var(--lp-grad-green); }
.lp-earn-card.lp-ec-video::before   { background: var(--lp-grad-orange); }
.lp-earn-card.lp-ec-survey::before  { background: var(--lp-grad-cyan); }
.lp-earn-card.lp-ec-ai::before      { background: var(--lp-grad-pink); }
.lp-earn-card:hover {
    transform: translateY(-6px);
    border-color: var(--lp-border-strong);
    box-shadow: var(--lp-shadow-card);
}
.lp-earn-card:hover::before { opacity: 0.28; }

.lp-ec-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}
.lp-ec-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.4);
}
.lp-ec-install .lp-ec-icon { background: var(--lp-grad-green); }
.lp-ec-video   .lp-ec-icon { background: var(--lp-grad-orange); }
.lp-ec-survey  .lp-ec-icon { background: var(--lp-grad-cyan); }
.lp-ec-ai      .lp-ec-icon { background: var(--lp-grad-pink); }

.lp-ec-title {
    font-size: 1.18rem;
    font-weight: 800;
    margin: 0 0 2px;
    color: var(--lp-text);
}
.lp-ec-desc {
    font-size: 0.88rem;
    color: var(--lp-text-2);
    margin: 0;
    line-height: 1.55;
}

/* App icons row */
.lp-app-icons {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0 14px;
    flex-wrap: wrap;
}
.lp-app-icon {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 0.85rem;
    box-shadow: 0 8px 22px -8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    overflow: hidden;
    flex-shrink: 0;
}
.lp-app-icon img { width: 100%; height: 100%; object-fit: contain; }
.lp-app-icon .lp-app-pay {
    position: absolute;
    bottom: -8px;
    inset-inline-end: -8px;
    background: #00b894;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 8px;
    border: 2px solid var(--lp-bg);
    white-space: nowrap;
}
.lp-app-icon.lp-ai-tiktok   { background: linear-gradient(135deg, #010101 0%, #25f4ee 50%, #fe2c55 100%); }
.lp-app-icon.lp-ai-youtube  { background: linear-gradient(135deg, #ff0000, #c4302b); }
.lp-app-icon.lp-ai-cashg    { background: linear-gradient(135deg, #f7971e, #ffd200); color: #4a2c00; }
.lp-app-icon.lp-ai-moomoo   { background: linear-gradient(135deg, #11998e, #38ef7d); }
.lp-app-icon.lp-ai-chatgpt  { background: linear-gradient(135deg, #0f8a5f, #16a085); }
.lp-app-icon.lp-ai-roblox   { background: linear-gradient(135deg, #e2241c, #ff5a4d); }
.lp-app-icon.lp-ai-twitch   { background: linear-gradient(135deg, #6441a5, #b9a3e1); }
.lp-app-icon.lp-ai-discord  { background: linear-gradient(135deg, #5865f2, #8a93ff); }

/* Workflow pill */
.lp-workflow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--lp-radius-pill);
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid var(--lp-border);
    color: var(--lp-text);
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 14px;
}
.lp-workflow .lp-arrow { color: var(--lp-text-3); font-size: 0.7rem; }
.lp-workflow .lp-amount { color: #55efc4; font-weight: 900; }

/* Video mockup */
.lp-video-mock {
    position: relative;
    border-radius: var(--lp-radius-sm);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #1f1f3a, #2a1a3a);
    border: 1px solid var(--lp-border);
    margin: 12px 0 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lp-video-mock::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 30%, rgba(253, 121, 168, 0.4) 0%, transparent 50%),
        radial-gradient(circle at 70% 70%, rgba(108, 92, 231, 0.4) 0%, transparent 50%);
}
.lp-video-play {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: #e74c3c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    box-shadow: 0 10px 30px -6px rgba(0, 0, 0, 0.6);
    animation: lpPlayPulse 2s ease-in-out infinite;
}
@keyframes lpPlayPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 10px 30px -6px rgba(0, 0, 0, 0.6); }
    50%      { transform: scale(1.08); box-shadow: 0 14px 40px -4px rgba(231, 76, 60, 0.6); }
}
.lp-video-progress {
    position: absolute;
    bottom: 0;
    inset-inline-start: 0;
    height: 4px;
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
}
.lp-video-progress::after {
    content: "";
    display: block;
    height: 100%;
    width: 35%;
    background: linear-gradient(90deg, #fdcb6e, #e17055);
    border-radius: 0 4px 4px 0;
    animation: lpProgressBar 8s linear infinite;
}
@keyframes lpProgressBar {
    0%   { width: 0%; }
    100% { width: 100%; }
}
.lp-video-timer {
    position: absolute;
    bottom: 14px;
    inset-inline-end: 14px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
}

/* Survey mockup */
.lp-survey-mock {
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-sm);
    padding: 14px;
    margin: 12px 0 14px;
}
.lp-survey-q {
    font-size: 0.82rem;
    color: var(--lp-text);
    margin: 0 0 8px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}
.lp-survey-q-num {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--lp-grad-cyan);
    color: #04121c;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 900;
    flex-shrink: 0;
}
.lp-survey-opts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.lp-survey-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--lp-border);
    border-radius: 10px;
    font-size: 0.78rem;
    color: var(--lp-text-2);
}
.lp-survey-opt .lp-radio {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--lp-text-3);
    flex-shrink: 0;
}
.lp-survey-opt.lp-checked {
    background: rgba(0, 206, 201, 0.12);
    border-color: rgba(0, 206, 201, 0.4);
    color: var(--lp-text);
}
.lp-survey-opt.lp-checked .lp-radio {
    border-color: #00cec9;
    background: radial-gradient(circle at center, #00cec9 40%, transparent 50%);
}
.lp-survey-progress {
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    overflow: hidden;
}
.lp-survey-progress::after {
    content: "";
    display: block;
    height: 100%;
    width: 60%;
    background: var(--lp-grad-cyan);
    border-radius: 4px;
    animation: lpProgressBar 12s linear infinite;
}

/* AI mockup */
.lp-ai-mock {
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-sm);
    padding: 14px;
    margin: 12px 0 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lp-ai-msg {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    max-width: 88%;
}
.lp-ai-msg.lp-ai-bot { align-self: flex-start; }
.lp-ai-msg.lp-ai-user { align-self: flex-end; flex-direction: row-reverse; }
.lp-ai-av {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: #fff;
    flex-shrink: 0;
}
.lp-ai-bot .lp-ai-av { background: var(--lp-grad-pink); }
.lp-ai-user .lp-ai-av { background: var(--lp-grad-purple); }
.lp-ai-bubble {
    padding: 8px 12px;
    border-radius: 14px;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--lp-text);
}
.lp-ai-bot .lp-ai-bubble { background: rgba(253, 121, 168, 0.18); border: 1px solid rgba(253, 121, 168, 0.3); border-top-inline-start-radius: 4px; }
.lp-ai-user .lp-ai-bubble { background: rgba(108, 92, 231, 0.18); border: 1px solid rgba(108, 92, 231, 0.3); border-top-inline-end-radius: 4px; }

/* See-how button */
.lp-see-how {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: var(--lp-radius-pill);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--lp-border-strong);
    color: var(--lp-text);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s var(--lp-ease);
}
.lp-see-how:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
}
.lp-see-how i { font-size: 0.75rem; transition: transform 0.25s; }
.lp-see-how:hover i { transform: translateX(3px); }
[dir="rtl"] .lp-see-how:hover i { transform: translateX(-3px); }

/* ==========================================================================
   4.  EARNING SIMULATOR
   ========================================================================== */
.lp-sim-section {
    background:
        radial-gradient(60% 60% at 50% 0%, rgba(108, 92, 231, 0.18) 0%, transparent 60%),
        var(--lp-bg-2);
    border-block: 1px solid var(--lp-border);
}
.lp-sim-card {
    max-width: 720px;
    margin: 0 auto;
    background: var(--lp-card);
    border: 1px solid var(--lp-border-strong);
    border-radius: var(--lp-radius);
    padding: clamp(20px, 4vw, 36px);
    box-shadow: var(--lp-shadow);
    position: relative;
    overflow: hidden;
}
.lp-sim-card::before {
    content: "";
    position: absolute;
    top: -2px;
    inset-inline-start: 0;
    width: 100%;
    height: 4px;
    background: var(--lp-grad-mesh);
    background-size: 200% 200%;
    animation: lpGradShift 6s ease infinite;
}
.lp-sim-balance-wrap {
    text-align: center;
    margin-bottom: 22px;
    padding: 18px;
    border-radius: var(--lp-radius-sm);
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid var(--lp-border);
}
.lp-sim-balance-label {
    font-size: 0.78rem;
    color: var(--lp-text-2);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 700;
    margin-bottom: 6px;
}
.lp-sim-balance {
    font-size: clamp(2.4rem, 8vw, 3.4rem);
    font-weight: 900;
    line-height: 1;
    background: var(--lp-grad-mesh);
    background-size: 220% 220%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: lpGradShift 6s ease infinite;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.lp-sim-progress {
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 14px;
}
.lp-sim-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--lp-grad-purple);
    border-radius: 4px;
    transition: width 0.3s ease;
}
.lp-sim-controls {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.lp-sim-btn {
    padding: 12px 24px;
    border-radius: var(--lp-radius-pill);
    font-weight: 800;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
    transition: all 0.25s var(--lp-ease);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    -webkit-tap-highlight-color: transparent;
}
.lp-sim-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.lp-sim-btn-start {
    background: var(--lp-grad-green);
    color: #04140e;
    box-shadow: 0 12px 30px -10px rgba(0, 184, 148, 0.6);
}
.lp-sim-btn-start:not(:disabled):hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 18px 36px -10px rgba(0, 184, 148, 0.75); }
.lp-sim-btn-reset {
    background: rgba(255, 255, 255, 0.06);
    color: var(--lp-text);
    border: 1px solid var(--lp-border-strong);
}
.lp-sim-btn-reset:hover { background: rgba(255, 255, 255, 0.12); }

.lp-sim-log {
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-sm);
    padding: 12px;
    height: 220px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}
.lp-sim-log::-webkit-scrollbar { width: 6px; }
.lp-sim-log::-webkit-scrollbar-track { background: transparent; }
.lp-sim-log::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 3px; }
.lp-sim-log-empty {
    margin: auto;
    color: var(--lp-text-3);
    font-size: 0.85rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.lp-sim-log-empty i { font-size: 1.8rem; opacity: 0.5; }

.lp-sim-entry {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--lp-border);
    font-size: 0.85rem;
    animation: lpEntryIn 0.4s var(--lp-ease) both;
}
@keyframes lpEntryIn {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.lp-sim-entry .lp-se-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    color: #fff;
    flex-shrink: 0;
}
.lp-sim-entry.lp-se-install .lp-se-icon { background: var(--lp-grad-green); }
.lp-sim-entry.lp-se-video   .lp-se-icon { background: var(--lp-grad-orange); }
.lp-sim-entry.lp-se-survey  .lp-se-icon { background: var(--lp-grad-cyan); }
.lp-sim-entry.lp-se-ai      .lp-se-icon { background: var(--lp-grad-pink); }
.lp-sim-entry.lp-se-app     .lp-se-icon { background: var(--lp-grad-purple); }
.lp-sim-entry.lp-se-register .lp-se-icon { background: var(--lp-grad-teal); }
.lp-sim-entry .lp-se-text { flex: 1; color: var(--lp-text); font-weight: 600; line-height: 1.3; min-width: 0; }
.lp-sim-entry .lp-se-amt { color: #55efc4; font-weight: 900; flex-shrink: 0; }

.lp-sim-complete {
    text-align: center;
    padding: 18px;
    margin-top: 14px;
    border-radius: var(--lp-radius-sm);
    background: linear-gradient(135deg, rgba(0, 184, 148, 0.15), rgba(108, 92, 231, 0.15));
    border: 1px solid rgba(85, 239, 196, 0.32);
    animation: lpEntryIn 0.5s var(--lp-ease) both;
    display: none;
}
.lp-sim-complete.lp-show { display: block; }
.lp-sim-complete-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #55efc4;
    margin: 0 0 6px;
}
.lp-sim-complete-desc { color: var(--lp-text); font-size: 0.92rem; margin: 0 0 14px; }

/* Confetti */
.lp-confetti-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 2;
}
.lp-confetti-piece {
    position: absolute;
    top: -10px;
    width: 8px;
    height: 14px;
    border-radius: 2px;
    opacity: 0;
    animation: lpConfettiFall 2.6s ease-in forwards;
}
@keyframes lpConfettiFall {
    0%   { opacity: 1; transform: translateY(-20px) rotate(0deg); }
    100% { opacity: 0; transform: translateY(560px) rotate(720deg); }
}

/* ==========================================================================
   5.  PAYMENT PROOFS
   ========================================================================== */
.lp-proofs-scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding: 8px 4px 22px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.lp-proofs-scroll::-webkit-scrollbar { height: 6px; }
.lp-proofs-scroll::-webkit-scrollbar-track { background: transparent; }
.lp-proofs-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); border-radius: 3px; }

.lp-proof-card {
    flex: 0 0 280px;
    scroll-snap-align: start;
    background: var(--lp-card);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-sm);
    padding: 18px;
    transition: transform 0.3s var(--lp-ease), border-color 0.3s;
}
.lp-proof-card:hover { transform: translateY(-4px); border-color: var(--lp-border-strong); }
.lp-proof-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.lp-proof-av {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #fff;
    font-size: 1rem;
    flex-shrink: 0;
}
.lp-proof-name { font-weight: 700; color: var(--lp-text); font-size: 0.95rem; margin: 0; }
.lp-proof-date { color: var(--lp-text-3); font-size: 0.78rem; margin: 0; }
.lp-proof-amount {
    font-size: 1.6rem;
    font-weight: 900;
    color: #55efc4;
    margin: 8px 0;
    line-height: 1;
}
.lp-proof-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: var(--lp-radius-pill);
    background: rgba(0, 184, 148, 0.15);
    border: 1px solid rgba(0, 184, 148, 0.3);
    color: #55efc4;
    font-size: 0.75rem;
    font-weight: 700;
}
.lp-proof-badge i { font-size: 0.85rem; color: #0070ba; }

.lp-disclaimer {
    text-align: center;
    margin-top: 18px;
    color: var(--lp-text-3);
    font-size: 0.78rem;
    font-style: italic;
}

/* ==========================================================================
   6.  LIVE MARKET DASHBOARD (v3 — sparkline cards + country flags)
   ========================================================================== */
.lp-ticker-section { background: rgba(255, 255, 255, 0.018); }

/* --- Ticker board (shared by both rows) --- */
.lp-ticker-board {
    position: relative;
    overflow: hidden;
    border-radius: var(--lp-radius-sm);
    background: linear-gradient(180deg, rgba(0,0,0,0.34) 0%, rgba(0,0,0,0.18) 100%);
    border: 1px solid var(--lp-border);
    padding: 14px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
}
.lp-ticker-track {
    display: flex;
    align-items: stretch;
    gap: 12px;
    width: max-content;
    padding: 0 16px;
    animation: lpTickerScroll 50s linear infinite;
}
.lp-ticker-track-reverse {
    animation: lpTickerScrollReverse 60s linear infinite;
}
.lp-ticker-board:hover .lp-ticker-track { animation-play-state: paused; }
@keyframes lpTickerScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes lpTickerScrollReverse {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

/* --- Ticker card (one per symbol) --- */
.lp-ticker-card {
    flex-shrink: 0;
    width: 180px;
    background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 100%);
    border: 1px solid var(--lp-border);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: transform 0.25s var(--lp-ease), border-color 0.25s, box-shadow 0.25s;
    position: relative;
    overflow: hidden;
}
.lp-ticker-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 1px;
    background: linear-gradient(135deg, transparent 0%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}
.lp-ticker-card:hover {
    transform: translateY(-3px);
    border-color: var(--lp-border-strong);
    box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.5);
}
.lp-ticker-card.up::before {
    background: linear-gradient(135deg, rgba(0, 214, 143, 0.35) 0%, transparent 60%);
    opacity: 1;
}
.lp-ticker-card.down::before {
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.35) 0%, transparent 60%);
    opacity: 1;
}

.lp-ticker-card-header {
    display: flex;
    align-items: center;
    gap: 6px;
}
.lp-ticker-flag {
    font-size: 1.2rem;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
.lp-ticker-sym {
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--lp-text);
    letter-spacing: 0.4px;
}
.lp-ticker-card.up .lp-ticker-sym { color: #5eddaa; }
.lp-ticker-card.down .lp-ticker-sym { color: #ff8b87; }

.lp-ticker-card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.lp-ticker-card-pricewrap {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
}
.lp-ticker-price {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--lp-text);
    direction: ltr;
    font-variant-numeric: tabular-nums;
    transition: color 0.3s, background 0.3s;
    padding: 1px 4px;
    border-radius: 4px;
}
.lp-ticker-price.flash {
    background: rgba(255,255,255,0.10);
    color: #fff;
}
.lp-ticker-change {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.76rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    padding: 2px 6px;
    border-radius: 6px;
}
.lp-ticker-change i { font-size: 0.85rem; }
.lp-ticker-card.up .lp-ticker-change {
    color: #00d68f;
    background: rgba(0, 214, 143, 0.10);
}
.lp-ticker-card.down .lp-ticker-change {
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.10);
}

/* --- Mini sparkline chart (SVG, animated by JS) --- */
.lp-spark {
    width: 100%;
    height: 32px;
    display: block;
    margin-top: 2px;
}
.lp-spark-line {
    stroke: #00d68f; /* default — JS overrides based on trend */
    transition: stroke 0.4s ease;
}
.lp-ticker-card.down .lp-spark-line {
    stroke: #ff6b6b;
}
.lp-spark-fill {
    transition: fill 0.4s ease;
}

/* --- Responsive --- */
@media (max-width: 640px) {
    .lp-ticker-card { width: 150px; padding: 8px 10px; }
    .lp-ticker-flag { font-size: 1.05rem; }
    .lp-ticker-sym { font-size: 0.82rem; }
    .lp-ticker-price { font-size: 0.85rem; }
    .lp-ticker-change { font-size: 0.7rem; }
    .lp-spark { height: 26px; }
    .lp-ticker-track { animation-duration: 40s; }
    .lp-ticker-track-reverse { animation-duration: 48s; }
}

/* Honor reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .lp-ticker-track,
    .lp-ticker-track-reverse {
        animation: none;
    }
    .lp-ticker-board {
        overflow-x: auto;
    }
}

/* ==========================================================================
   7.  HOW IT WORKS — 4 steps
   ========================================================================== */
.lp-steps-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    position: relative;
}
@media (min-width: 768px) { .lp-steps-grid { grid-template-columns: repeat(4, 1fr); } }

.lp-step {
    position: relative;
    padding: 26px 22px;
    background: var(--lp-card);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius);
    text-align: center;
    transition: transform 0.35s var(--lp-ease), border-color 0.35s;
    z-index: 1;
}
.lp-step:hover { transform: translateY(-5px); border-color: var(--lp-border-strong); }
.lp-step-num {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 900;
    color: #fff;
    background: var(--lp-grad-purple);
    box-shadow: 0 10px 28px -8px rgba(108, 92, 231, 0.6);
}
.lp-step:nth-child(2) .lp-step-num { background: var(--lp-grad-cyan); box-shadow: 0 10px 28px -8px rgba(0, 206, 201, 0.6); }
.lp-step:nth-child(3) .lp-step-num { background: var(--lp-grad-orange); box-shadow: 0 10px 28px -8px rgba(253, 121, 168, 0.6); }
.lp-step:nth-child(4) .lp-step-num { background: var(--lp-grad-green); box-shadow: 0 10px 28px -8px rgba(0, 184, 148, 0.6); }
.lp-step-icon { font-size: 1.4rem; color: var(--lp-text); margin-bottom: 10px; }
.lp-step-title { font-size: 1.05rem; font-weight: 800; margin: 0 0 6px; color: var(--lp-text); }
.lp-step-desc { font-size: 0.85rem; color: var(--lp-text-2); margin: 0; line-height: 1.55; }

/* Dashed connector line between steps (desktop only) */
@media (min-width: 768px) {
    .lp-steps-grid::before {
        content: "";
        position: absolute;
        top: 52px;
        inset-inline-start: 12%;
        inset-inline-end: 12%;
        height: 2px;
        background-image: linear-gradient(90deg, var(--lp-border-strong) 50%, transparent 50%);
        background-size: 14px 2px;
        z-index: 0;
        opacity: 0.6;
    }
}

/* ==========================================================================
   8.  TESTIMONIALS
   ========================================================================== */
.lp-testimonials-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}
@media (min-width: 640px) { .lp-testimonials-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .lp-testimonials-grid { grid-template-columns: repeat(3, 1fr); } }

.lp-testimonial {
    padding: 22px;
    background: var(--lp-card);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius);
    transition: transform 0.3s var(--lp-ease), border-color 0.3s;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.lp-testimonial:hover { transform: translateY(-4px); border-color: var(--lp-border-strong); }
.lp-testi-stars { color: #fdcb6e; font-size: 0.85rem; letter-spacing: 1px; }
.lp-testi-text {
    color: var(--lp-text);
    font-size: 0.95rem;
    line-height: 1.65;
    margin: 0;
    flex: 1;
}
.lp-testi-head { display: flex; align-items: center; gap: 12px; }
.lp-testi-av {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--lp-grad-purple);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
}
.lp-testi-av img { width: 100%; height: 100%; object-fit: cover; }
.lp-testi-name { font-weight: 700; color: var(--lp-text); font-size: 0.95rem; margin: 0; }
.lp-testi-meta { color: var(--lp-text-3); font-size: 0.78rem; margin: 0; }

/* ==========================================================================
   9.  FAQ ACCORDION
   ========================================================================== */
.lp-faq-list {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.lp-faq-item {
    background: var(--lp-card);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-sm);
    overflow: hidden;
    transition: border-color 0.25s;
}
.lp-faq-item.lp-open { border-color: rgba(108, 92, 231, 0.42); }
.lp-faq-q {
    width: 100%;
    padding: 18px 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    color: var(--lp-text);
    font-size: clamp(0.95rem, 1.6vw, 1.05rem);
    font-weight: 700;
    text-align: start;
    font-family: inherit;
    transition: background 0.25s;
    -webkit-tap-highlight-color: transparent;
}
.lp-faq-q:hover { background: rgba(255, 255, 255, 0.03); }
.lp-faq-q .lp-faq-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(108, 92, 231, 0.18);
    color: #a29bfe;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
    transition: transform 0.35s var(--lp-ease), background 0.25s;
}
.lp-faq-item.lp-open .lp-faq-q .lp-faq-icon {
    transform: rotate(135deg);
    background: var(--lp-grad-purple);
    color: #fff;
}
.lp-faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.45s var(--lp-ease);
}
.lp-faq-a-inner {
    padding: 0 20px 18px;
    color: var(--lp-text-2);
    font-size: 0.92rem;
    line-height: 1.7;
}

/* ==========================================================================
   10. FINAL CTA
   ========================================================================== */
.lp-final-cta-section {
    padding: clamp(48px, 7vw, 80px) 0;
}
.lp-final-cta {
    position: relative;
    max-width: var(--lp-max-w);
    margin: 0 auto;
    border-radius: var(--lp-radius);
    padding: clamp(36px, 6vw, 64px) clamp(20px, 4vw, 48px);
    text-align: center;
    overflow: hidden;
    background: var(--lp-grad-mesh);
    background-size: 220% 220%;
    animation: lpGradShift 10s ease infinite;
    box-shadow: var(--lp-shadow);
    isolation: isolate;
}
.lp-final-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(50% 60% at 20% 20%, rgba(255, 255, 255, 0.22) 0%, transparent 60%),
        radial-gradient(50% 60% at 80% 80%, rgba(0, 0, 0, 0.28) 0%, transparent 60%);
}
.lp-final-cta-title {
    font-size: clamp(1.8rem, 4.5vw, 3rem);
    font-weight: 900;
    color: #fff;
    margin: 0 0 10px;
    line-height: 1.15;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}
.lp-final-cta-sub {
    color: rgba(255, 255, 255, 0.85);
    font-size: clamp(0.95rem, 1.5vw, 1.1rem);
    margin: 0 0 28px;
}
.lp-final-cta .lp-btn-primary {
    background: rgba(255, 255, 255, 0.96);
    color: #6c5ce7;
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.35);
}
.lp-final-cta .lp-btn-primary::after { display: none; }
.lp-final-cta .lp-btn-primary:hover {
    transform: translateY(-3px) scale(1.03);
    background: #fff;
    box-shadow: 0 28px 60px -10px rgba(0, 0, 0, 0.45);
}

/* ==========================================================================
   11. STICKY MOBILE CTA
   ========================================================================== */
.lp-sticky-cta {
    position: fixed;
    bottom: 0;
    inset-inline: 0;
    z-index: 9500;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(10, 10, 20, 0.92);
    backdrop-filter: blur(15px) saturate(160%);
    -webkit-backdrop-filter: blur(15px) saturate(160%);
    border-top: 1px solid var(--lp-border-strong);
    box-shadow: 0 -10px 30px -10px rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    gap: 12px;
    transform: translateY(100%);
    transition: transform 0.4s var(--lp-ease);
}
.lp-sticky-cta.lp-show { transform: translateY(0); }
.lp-sticky-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.lp-sticky-text strong { color: var(--lp-text); font-size: 0.95rem; font-weight: 800; }
.lp-sticky-text span { color: var(--lp-text-2); font-size: 0.75rem; }
.lp-sticky-cta .lp-btn {
    min-height: 48px;
    padding: 0 22px;
    flex-shrink: 0;
}
@media (min-width: 768px) {
    .lp-sticky-cta { display: none; }
}

/* ==========================================================================
   12. SMALL TWEAKS
   ========================================================================== */
.lp-cta-row .lp-btn { min-width: 200px; }
@media (max-width: 480px) {
    .lp-cta-row { flex-direction: column; width: 100%; }
    .lp-cta-row .lp-btn { width: 100%; min-width: 0; }
    .lp-hero { min-height: calc(100vh - 64px); }
    .lp-scroll-hint { display: none; }
}

/* Footer sits naturally below the final CTA */
.landing-footer { margin-top: 0; }

/* Respect reduced motion globally */
@media (prefers-reduced-motion: reduce) {
    .lp-hero-bg::after, .lp-video-mock .lp-video-progress::after,
    .lp-survey-progress::after, .lp-confetti-piece, .lp-video-play,
    .lp-section-title .lp-grad, .lp-hero-title .lp-grad, .lp-sim-balance,
    .lp-btn-primary::after, .lp-sim-card::before, .lp-final-cta,
    body::before, body::after, .lp-hero-pretitle .lp-pulse,
    .lp-wave-1, .lp-wave-2, .lp-wave-3 {
        animation: none !important;
    }
    .lp-reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   13. MOBILE-FIRST BASE + ROOT SIZING (Task ID E)
   --------------------------------------------------------------------------
   The previous design loaded 5 separate CSS files (style-desktop.css,
   style-mobile.css, landing-desktop.css, landing-mobile.css, responsive.css)
   that fought each other. landing-desktop.css had `max-width:1280px` on
   `.nav-container`, `font-size:1.5rem` on `.nav-logo`, etc. — all
   desktop-first rules that, on a 360px phone, made the whole nav look tiny.
   --------------------------------------------------------------------------
   Strategy (Task ID E):
     • Lock the root font-size to 16px so 1rem = 16px everywhere.
       Below 380px we shrink to 15px to fit ultra-narrow phones.
     • Make every text element use clamp() so it scales fluidly with the
       viewport — never a tiny fixed px size.
     • Define all public-nav classes here (.landing-nav, .nav-container,
       .nav-sidebar, .hamburger-landing, .nav-right-actions, …) with
       mobile-first sizing. Desktop enhancements live inside
       `@media (min-width: 1024px)`.
   ========================================================================== */
html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}
@media (max-width: 380px) {
    html { font-size: 15px; }
}
body {
    font-size: 1rem;
    line-height: 1.6;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* All form inputs use 16px (1rem) by default to prevent iOS zoom-on-focus */
input, button, select, textarea {
    font-size: 1rem;
    font-family: inherit;
}

/* ==========================================================================
   14. PUBLIC HEADER NAV — mobile-first (Task ID E)
   --------------------------------------------------------------------------
   Replaces landing-desktop.css + landing-mobile.css entirely.
   Mobile (default)  : 56px sticky glass bar — logo on start side,
                       hamburger + lang on end side. Slide-in drawer.
   Desktop (≥1024px)  : 64px bar — logo + center links + lang + login btn.
   ========================================================================== */
.landing-nav {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9990;
    height: 56px;
    display: flex;
    align-items: center;
    background: rgba(10, 10, 20, 0.78);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: background 0.35s ease, box-shadow 0.35s ease, height 0.3s ease;
}
.landing-nav.scrolled {
    background: rgba(10, 10, 20, 0.94);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.35);
    height: 52px;
}

.nav-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 14px;
    display: flex;
    align-items: center;
    height: 100%;
    gap: 10px;
}

/* Logo — large & readable on mobile */
.nav-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-size: clamp(1.15rem, 4vw, 1.5rem);
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary, #6c5ce7), var(--secondary, #00cec9));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    white-space: nowrap;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}
.nav-logo:hover { transform: scale(1.03); }
.nav-logo img {
    height: clamp(28px, 7vw, 36px);
    width: auto;
    border-radius: 9px;
    object-fit: contain;
    transition: transform 0.3s ease;
}
.nav-logo:hover img { transform: rotate(-4deg) scale(1.04); }

/* Right side actions: language switcher + hamburger */
.nav-right-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-inline-start: auto;
    flex-shrink: 0;
}

/* Hamburger — 44x44 tap target */
.hamburger-landing {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    border-radius: 12px;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.hamburger-landing:hover,
.hamburger-landing:active {
    background: rgba(108, 92, 231, 0.18);
    border-color: rgba(108, 92, 231, 0.4);
}
.hamburger-landing:active { transform: scale(0.94); }

/* Overlay behind the drawer */
.nav-sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9980;
    opacity: 0;
    pointer-events: none;
    visibility: hidden; /* Task ID: V2-A — bulletproof default hidden state */
    transition: opacity 0.35s ease, visibility 0.35s ease;
}
.nav-sidebar-overlay.active {
    opacity: 1;
    pointer-events: auto;
    visibility: visible; /* Task ID: V2-A */
}

/* Slide-in drawer (mobile) */
.nav-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0; /* Task ID: V2-A — default to RTL right-side positioning */
    left: auto;
    width: min(280px, 80vw);
    height: 100vh;
    height: 100dvh;
    background: rgba(10, 10, 20, 0.97);
    backdrop-filter: blur(15px) saturate(160%);
    -webkit-backdrop-filter: blur(15px) saturate(160%);
    border-inline-start: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);
    z-index: 9990;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    padding: 0;
}
[dir="rtl"] .nav-sidebar {
    right: 0;
    left: auto;
    transform: translateX(100%);
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);
}
[dir="ltr"] .nav-sidebar {
    left: 0;
    right: auto;
    transform: translateX(-100%);
    border-inline-start: none;
    border-inline-end: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 10px 0 40px rgba(0, 0, 0, 0.5);
}
.nav-sidebar.mobile-open { transform: translateX(0) !important; }

/* Drawer header */
.nav-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 18px 18px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.nav-sidebar-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nav-sidebar-brand i {
    color: var(--primary-light, #a29bfe);
    font-size: 1.2rem;
}
.nav-sidebar-close {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-2, rgba(255, 255, 255, 0.7));
    font-size: 1rem;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}
.nav-sidebar-close:hover,
.nav-sidebar-close:active {
    background: rgba(231, 76, 60, 0.18);
    color: #fff;
    border-color: rgba(231, 76, 60, 0.4);
}
.nav-sidebar-close:active { transform: scale(0.94); }

/* Drawer body — sectioned nav */
.nav-sidebar-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 10px 14px;
    -webkit-overflow-scrolling: touch;
}
.nav-sidebar-body::-webkit-scrollbar { width: 6px; }
.nav-sidebar-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
}
.nav-sidebar-section { margin-top: 14px; }
.nav-sidebar-section:first-child { margin-top: 6px; }
.nav-sidebar-section-title {
    padding: 8px 14px 6px;
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}
.nav-sidebar-body a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    min-height: 48px;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 12px;
    margin: 2px 0;
    transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.nav-sidebar-body a i {
    width: 22px;
    text-align: center;
    font-size: 1rem;
    color: var(--primary-light, #a29bfe);
    flex-shrink: 0;
}
.nav-sidebar-body a:hover,
.nav-sidebar-body a:active {
    background: rgba(108, 92, 231, 0.14);
    color: #fff;
    transform: translateX(-2px);
}
[dir="ltr"] .nav-sidebar-body a:hover,
[dir="ltr"] .nav-sidebar-body a:active { transform: translateX(2px); }

/* Drawer footer (login + register buttons) */
.nav-sidebar-footer {
    padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}
.nav-sidebar-login,
.nav-sidebar-register {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 18px;
    min-height: 48px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}
.nav-sidebar-login {
    background: rgba(108, 92, 231, 0.16);
    border: 1px solid rgba(108, 92, 231, 0.32);
    color: #fff;
}
.nav-sidebar-login:hover {
    background: rgba(108, 92, 231, 0.28);
    transform: translateY(-1px);
}
.nav-sidebar-register {
    background: linear-gradient(135deg, #6c5ce7 0%, #00cec9 100%);
    color: #fff;
    border: none;
    box-shadow: 0 8px 22px -8px rgba(108, 92, 231, 0.6);
}
.nav-sidebar-register:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -8px rgba(108, 92, 231, 0.75);
}
.nav-btn-text { display: inline; }

/* Hide nav-links (legacy desktop links) — drawer is used on all sizes now */
.nav-links,
.nav-actions,
.btn-nav-primary { display: none !important; }

/* ==========================================================================
   14.1. PUBLIC NAV — DESKTOP ENHANCEMENTS (≥1024px)
   ========================================================================== */
@media (min-width: 1024px) {
    .landing-nav { height: 64px; }
    .landing-nav.scrolled { height: 60px; }
    .nav-container { padding: 0 28px; gap: 18px; }
    .nav-logo img { height: 38px; }
    .hamburger-landing { display: none; }
    /* Show the inline center links + register button on desktop */
    .nav-links {
        display: flex !important;
        align-items: center;
        gap: 2px;
        flex: 1;
        justify-content: center;
    }
    .nav-links a {
        color: rgba(255, 255, 255, 0.78);
        text-decoration: none;
        padding: 9px 16px;
        border-radius: 10px;
        font-size: 0.95rem;
        font-weight: 600;
        transition: color 0.25s ease, background 0.25s ease;
        white-space: nowrap;
    }
    .nav-links a:hover {
        color: #fff;
        background: rgba(108, 92, 231, 0.12);
    }
    .nav-actions {
        display: inline-flex !important;
        align-items: center;
        gap: 10px;
    }
    .btn-nav-primary {
        display: inline-flex !important;
        align-items: center;
        gap: 8px;
        padding: 10px 22px;
        background: linear-gradient(135deg, #6c5ce7, #00cec9);
        color: #fff;
        text-decoration: none;
        border-radius: 12px;
        font-weight: 700;
        font-size: 0.95rem;
        box-shadow: 0 6px 22px -4px rgba(108, 92, 231, 0.45);
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .btn-nav-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 30px -4px rgba(108, 92, 231, 0.6);
    }
    /* On desktop the drawer overlay is hidden — but the drawer itself can
       still be opened if needed; we leave it as-is. */
}

/* Very small phones: tighten the drawer + nav */
@media (max-width: 360px) {
    .nav-container { padding: 0 10px; gap: 8px; }
    .nav-sidebar { width: min(260px, 85vw); }
    .nav-sidebar-body a { padding: 12px 12px; font-size: 0.95rem; }
}

/* ==========================================================================
   15. CSS-ONLY ANIMATED WAVES at the hero bottom (Task ID E)
   --------------------------------------------------------------------------
   Three layered SVG paths, each filled with a translucent gradient, each
   animated horizontally at a different speed for a liquid parallax effect.
   Lightweight: 3 SVG nodes + 3 CSS animations. No JS, no 3D, no canvas.
   ========================================================================== */
.lp-hero { position: relative; }
.lp-hero-waves {
    position: absolute;
    inset-inline: 0;
    bottom: -1px;
    height: 110px;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    line-height: 0;
}
.lp-wave {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    width: 200%;
    height: 100%;
    margin: 0;
    will-change: transform;
}
.lp-wave path {
    fill: currentColor;
    fill-opacity: 1;
}
.lp-wave-1 {
    color: rgba(10, 10, 26, 0.55);
    z-index: 1;
    animation: lpWaveShift1 14s linear infinite;
    opacity: 0.7;
}
.lp-wave-2 {
    color: rgba(108, 92, 231, 0.32);
    z-index: 2;
    animation: lpWaveShift2 11s linear infinite reverse;
    opacity: 0.8;
}
.lp-wave-3 {
    color: rgba(0, 206, 201, 0.28);
    z-index: 3;
    animation: lpWaveShift3 8s linear infinite;
    opacity: 0.85;
}
@keyframes lpWaveShift1 {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes lpWaveShift2 {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes lpWaveShift3 {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@media (max-width: 480px) {
    .lp-hero-waves { height: 70px; }
}
@media (prefers-reduced-motion: reduce) {
    .lp-wave-1, .lp-wave-2, .lp-wave-3 { animation: none !important; }
}

/* ==========================================================================
   16. GLOBAL READABILITY SAFETY-NET (Task ID E)
   --------------------------------------------------------------------------
   Force 16px+ on form fields and key interactive elements across all
   public pages so iOS never zooms and nothing looks tiny.
   ========================================================================== */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
    font-size: 1rem !important;
}
.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.95rem;
}
button,
.btn,
.btn-login,
.btn-register {
    min-height: 48px;
    font-size: 1rem;
    font-weight: 700;
}
@media (max-width: 480px) {
    .form-control,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    textarea,
    select {
        padding: 14px 16px !important;
    }
    .login-card,
    .register-card {
        padding: 24px 18px !important;
        max-width: 100% !important;
    }
    .login-card .auth-logo h1,
    .register-card .auth-logo h1 {
        font-size: 1.5rem !important;
    }
    .login-card .auth-logo p,
    .register-card .auth-logo p {
        font-size: 0.95rem !important;
    }
    .form-group label {
        font-size: 0.95rem !important;
    }
}