/* ============================================================
   PREMIUM THEME – Stocgle modern design
   Loads last — finalises design decisions.
   ============================================================ */

/* ── GLOBAL ───────────────────────────────────────────────── */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ═══════════════════════════════════════════════════════════
   HERO — cool single-temperature atmosphere
   ═══════════════════════════════════════════════════════════ */

/* ── HERO MESH GRADIENT — logo palette: teal, lime, purple, yellow ── */
.hero-figma-wrap {
    background:
        radial-gradient(ellipse 65% 55% at 0% 5%,    rgba(0,188,212,0.42) 0%, transparent 65%),
        radial-gradient(ellipse 50% 48% at 52% 0%,   rgba(141,198,63,0.30) 0%, transparent 60%),
        radial-gradient(ellipse 58% 52% at 100% 28%,  rgba(186,104,200,0.28) 0%, transparent 65%),
        radial-gradient(ellipse 62% 55% at 100% 90%,  rgba(255,193,7,0.36) 0%, transparent 65%),
        radial-gradient(ellipse 48% 48% at 18% 92%,   rgba(41,182,246,0.24) 0%, transparent 60%),
        linear-gradient(150deg, #e6f9fb 0%, #f8f5ff 45%, #fffef0 100%);
}

/* Base orb: vivid glows */
.hero-figma-orb { filter: blur(70px); opacity: 0.55; }

/* Orb 1 — Teal glow (top-left, logo dominant color) */
.hero-figma-orb-1 {
    width: 40rem; height: 40rem;
    background: radial-gradient(circle, rgba(0,188,212,0.80) 0%, transparent 70%);
    opacity: 0.55;
}
/* Orb 2 — Purple/magenta glow (right, logo accent) */
.hero-figma-orb-2 {
    width: 44rem; height: 44rem;
    background: radial-gradient(circle, rgba(186,104,200,0.65) 0%, transparent 70%);
    opacity: 0.45;
}
/* Orb 3 — Yellow-orange glow (bottom-right, logo warm) */
.hero-figma-orb-3 {
    width: 38rem; height: 38rem;
    background: radial-gradient(circle, rgba(255,193,7,0.72) 0%, transparent 70%);
    opacity: 0.50;
}
/* Orb 4 — Lime green glow (top-center, logo lime) */
.hero-figma-orb-4 {
    display: block !important;
    top: -6rem; left: 32%;
    width: 30rem; height: 30rem;
    background: radial-gradient(circle, rgba(141,198,63,0.65) 0%, transparent 70%);
    opacity: 0.42;
    filter: blur(65px);
}
/* Orb 5 — Sky blue glow (bottom-left) */
.hero-figma-orb-5 {
    display: block !important;
    bottom: 0; left: 2%;
    width: 28rem; height: 28rem;
    background: radial-gradient(circle, rgba(41,182,246,0.60) 0%, transparent 70%);
    opacity: 0.42;
    filter: blur(60px);
}
.hero-figma-orb-6 { display: none !important; }

/* Dark theme hero */
.dark-theme .hero-figma-wrap {
    background: linear-gradient(140deg, #050A14 0%, #0A1628 40%, #070E1C 100%);
}
.dark-theme .hero-figma-orb   { filter: blur(100px); opacity: 0.3; }
.dark-theme .hero-figma-orb-1 { opacity: 0.28; background: radial-gradient(circle, rgba(14,165,233,0.8) 0%, transparent 70%); }
.dark-theme .hero-figma-orb-2 { opacity: 0.25; background: radial-gradient(circle, rgba(99,102,241,0.7) 0%, transparent 70%); }
.dark-theme .hero-figma-orb-3 { opacity: 0.20; background: radial-gradient(circle, rgba(14,165,233,0.5) 0%, transparent 70%); }

/* Hero content: more breathing room */
.hero-figma-content { padding: 5rem 1.5rem 6rem; }
@media (min-width: 1024px) {
    .hero-figma-content { padding: 7rem 2rem 8rem; }
}

/* ── HERO TYPOGRAPHY ──────────────────────────────────────── */
.hero-figma-headline {
    font-size: 3rem;
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 1.05;
}
@media (min-width: 768px)  { .hero-figma-headline { font-size: 3.75rem; } }
@media (min-width: 1024px) { .hero-figma-headline { font-size: 4.5rem; } }

/* "60 Seconds" — full logo palette gradient: teal → purple → amber */
.hero-figma-headline .hero-gradient-text {
    background: linear-gradient(100deg, #00BCD4 0%, #7C3AED 50%, #F59E0B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-figma-subline {
    font-size: 1.125rem;
    line-height: 1.75;
    color: #475569;
    margin-bottom: 2rem;
}
.dark-theme .hero-figma-subline { color: #94A3B8; }

/* ── HERO BUTTONS — PILL STYLE (Ayudo signature) ─────────── */
.hero-figma-btn-primary {
    padding: 0.875rem 2rem;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 9999px;
    background: #0F172A;
    letter-spacing: -0.01em;
    box-shadow: 0 2px 8px rgba(15,23,42,0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hero-figma-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(15,23,42,0.3), 0 0 20px rgba(14,165,233,0.12);
}
.dark-theme .hero-figma-btn-primary {
    background: #fff;
    color: #0A1628;
}

.hero-figma-btn-secondary {
    padding: 0.875rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 9999px;
    border: 1.5px solid #CBD5E1;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.hero-figma-btn-secondary:hover {
    transform: translateY(-2px);
    border-color: #94A3B8;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.dark-theme .hero-figma-btn-secondary { border-color: rgba(255,255,255,0.15); }

/* ── HERO STOCK CARD ──────────────────────────────────────── */
.hero-figma-card {
    border-radius: 28px;
    box-shadow: 0 32px 80px rgba(0,0,0,0.10), 0 8px 24px rgba(0,0,0,0.06);
    border: 1px solid rgba(255,255,255,0.9);
}
.dark-theme .hero-figma-card {
    background: rgba(255,255,255,0.06);
    border-color: rgba(14,165,233,0.18);
    box-shadow: 0 32px 80px rgba(0,0,0,0.5), 0 0 40px rgba(14,165,233,0.06);
}

/* Score value: 2-color brand gradient */
.hero-figma-score-value {
    background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.dark-theme .hero-figma-score-value {
    background: linear-gradient(135deg, #38bdf8 0%, #818CF8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Badge: brand indigo */
.hero-figma-card-badge {
    background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(14,165,233,0.12));
    color: #4f46e5;
    border: 1px solid rgba(99,102,241,0.25);
    border-radius: 9999px;
    box-shadow: none;
}

/* Pill: brand sky-blue */
.hero-figma-pill {
    background: linear-gradient(135deg, #e0f2fe, #ede9fe);
    color: #0369a1;
    border: 1px solid rgba(14,165,233,0.2);
    border-radius: 9999px;
    box-shadow: none;
}
.hero-figma-card-row span:last-child { color: #0891B2; }
.dark-theme .hero-figma-card-row span:last-child { color: #38bdf8; }

/* ═══════════════════════════════════════════════════════════
   SECTION PILLS — remove ::before duplicates
   (Real <span class="section-pill"> are in the HTML)
   ═══════════════════════════════════════════════════════════ */
.section-why-figma .figma-section-inner::before,
.section-ai-figma .figma-section-inner::before,
.section-how-figma .figma-section-inner::before,
.section-trust-figma .figma-section-inner::before,
.section-pulse-figma .figma-section-inner::before {
    display: none !important;
    content: none !important;
}

/* ── SECTION TYPOGRAPHY: BIGGER, HEAVIER ─────────────────── */
.figma-section-title {
    font-size: 2.5rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.1 !important;
}
@media (min-width: 768px) {
    .figma-section-title { font-size: 3rem !important; }
}

.figma-section-subtitle {
    font-size: 1.125rem !important;
    line-height: 1.75 !important;
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
}

/* Section title: dark text (all light-bg sections) */
.section-why-figma .figma-section-title,
.section-ai-figma .figma-section-title,
.section-how-figma .figma-section-title,
.section-trust-figma .figma-section-title {
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Section padding: Ayudo breathing room */
.section-why-figma,
.section-ai-figma,
.section-how-figma,
.section-trust-figma { padding: 6rem 1.5rem; }
@media (min-width: 1024px) {
    .section-why-figma,
    .section-ai-figma,
    .section-how-figma,
    .section-trust-figma { padding: 7rem 2rem; }
}

/* ═══════════════════════════════════════════════════════════
   WHY STOCGLE — clean white section, colored tinted cards
   ═══════════════════════════════════════════════════════════ */
.section-why-figma { background: #ffffff; }
.dark-theme .section-why-figma { background: #070D1C; }

/* Feature cards: Ayudo-style subtle gradient fills */
.figma-why-card {
    background: #fff;
    border: 1px solid rgba(15,23,42,0.06);
    box-shadow: 0 4px 24px rgba(15,23,42,0.06);
    transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s ease;
    padding: 2rem;
}
.figma-why-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 48px rgba(15,23,42,0.1);
}
/* Each card: subtle colour-matched gradient */
.figma-why-card:nth-child(1) { background: linear-gradient(150deg, rgba(14,165,233,0.07) 0%, #ffffff 60%); border-color: rgba(14,165,233,0.12); }
.figma-why-card:nth-child(2) { background: linear-gradient(150deg, rgba(22,163,74,0.07) 0%, #ffffff 60%);  border-color: rgba(22,163,74,0.12);  }
.figma-why-card:nth-child(3) { background: linear-gradient(150deg, rgba(220,38,38,0.06) 0%, #ffffff 60%);  border-color: rgba(220,38,38,0.10);  }
.figma-why-card:nth-child(4) { background: linear-gradient(150deg, rgba(99,102,241,0.07) 0%, #ffffff 60%); border-color: rgba(99,102,241,0.12); }

.dark-theme .figma-why-card { border: 1px solid rgba(255,255,255,0.06); box-shadow: none; }
.dark-theme .figma-why-card:nth-child(1) { background: linear-gradient(150deg, rgba(14,165,233,0.10) 0%, rgba(255,255,255,0.03) 60%); }
.dark-theme .figma-why-card:nth-child(2) { background: linear-gradient(150deg, rgba(22,163,74,0.10) 0%, rgba(255,255,255,0.03) 60%); }
.dark-theme .figma-why-card:nth-child(3) { background: linear-gradient(150deg, rgba(220,38,38,0.09) 0%, rgba(255,255,255,0.03) 60%); }
.dark-theme .figma-why-card:nth-child(4) { background: linear-gradient(150deg, rgba(99,102,241,0.10) 0%, rgba(255,255,255,0.03) 60%); }
.dark-theme .figma-why-card:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(0,0,0,0.3); }

.figma-why-card h4 { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; }

/* ═══════════════════════════════════════════════════════════
   MARKET PULSE — LIGHT (matches brand palette, not dark navy)
   One section per page is dark (Stats). Not two.
   ═══════════════════════════════════════════════════════════ */
.section-pulse-figma {
    padding: 6rem 1.5rem;
    background: linear-gradient(140deg, #f0f9ff 0%, #ede9fe 100%);
    position: relative;
}
@media (min-width: 1024px) { .section-pulse-figma { padding: 7rem 2rem; } }

/* Remove the dark ambient glow orb */
.section-pulse-figma::before { display: none !important; }

/* Section heading: dark on light bg */
.section-pulse-figma .figma-section-title {
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.section-pulse-figma .figma-section-subtitle { color: #64748B !important; }

/* Pulse cards: white with brand accent on light bg */
.pulse-card {
    background: #ffffff;
    border: 1px solid rgba(14,165,233,0.14);
    border-top: 2.5px solid #0ea5e9;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s ease;
}
.pulse-card:hover {
    transform: scale(1.03) translateY(-3px);
    border-top-color: #6366f1;
    box-shadow: 0 16px 40px rgba(14,165,233,0.15);
}

/* Card text: dark on white */
.pulse-card-name       { color: #0f172a; }
.pulse-card-status-label { color: #64748b; }
.pulse-card-status-value { color: #1e293b; }
.pulse-card-footer { color: #64748b; border-top-color: rgba(0,0,0,0.06); }

/* Score circles: strong layered glow (keep vivid) */
.pulse-card-score-circle.strong {
    background: linear-gradient(135deg, #22C55E, #16A34A);
    box-shadow: 0 0 0 4px rgba(34,197,94,0.12), 0 0 22px rgba(34,197,94,0.55), 0 4px 16px rgba(22,163,74,0.5);
}
.pulse-card-score-circle.good {
    background: linear-gradient(135deg, #FBBF24, #D97706);
    box-shadow: 0 0 0 4px rgba(251,191,36,0.12), 0 0 22px rgba(245,158,11,0.55), 0 4px 16px rgba(217,119,6,0.5);
}
.pulse-card-score-circle.weak {
    background: linear-gradient(135deg, #EF4444, #DC2626);
    box-shadow: 0 0 0 4px rgba(239,68,68,0.12), 0 0 22px rgba(239,68,68,0.55), 0 4px 16px rgba(220,38,38,0.5);
}

/* Best-stock card layout on light bg */
.pulse-card-best .pulse-card-title { color: #0f172a; }
.pulse-card-best .pulse-card-badge {
    background: rgba(14,165,233,0.10);
    color: #0369a1;
    border-color: rgba(14,165,233,0.22);
    box-shadow: none;
    border-radius: 9999px;
}
.pulse-card-best .pulse-card-metrics-block {
    background: rgba(14,165,233,0.04);
    border-color: rgba(14,165,233,0.08);
}
.pulse-card-best .pulse-card-metrics-block .pulse-card-metric-label { color: #64748b; }
.pulse-card-best .pulse-card-metrics-block .pulse-card-metric-value { color: #2563eb; }
.pulse-card-best .pulse-card-footer { color: #64748b; border-top-color: rgba(0,0,0,0.06); }

/* Gate (login prompt) on light bg */
.section-pulse-figma .hero-figma-gate-text { color: #475569; }

/* ═══════════════════════════════════════════════════════════
   ASK AI — clean white/light section
   ═══════════════════════════════════════════════════════════ */
.section-ai-figma { background: linear-gradient(135deg, #f0f9ff 0%, #f5f3ff 100%); }
.dark-theme .section-ai-figma { background: #070D1C; }

.figma-ai-card {
    box-shadow: 0 24px 64px rgba(0,0,0,0.10), 0 0 0 1px rgba(255,255,255,0.9) inset;
    border-radius: 28px;
}
.dark-theme .figma-ai-card {
    background: rgba(255,255,255,0.05);
    border-color: rgba(14,165,233,0.12);
    box-shadow: 0 24px 64px rgba(0,0,0,0.5);
}

/* AI avatar: brand teal-indigo gradient */
.figma-ai-card-avatar {
    background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
    box-shadow: 0 4px 14px rgba(14,165,233,0.3);
}

/* CTA button: pill shape */
.figma-ai-cta-btn {
    background: #0F172A;
    border-radius: 9999px;
    font-weight: 700;
    letter-spacing: -0.01em;
    box-shadow: 0 4px 16px rgba(15,23,42,0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.figma-ai-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(15,23,42,0.35), 0 0 20px rgba(14,165,233,0.12);
}
.dark-theme .figma-ai-cta-btn { background: #fff; color: #0F172A; }

/* ═══════════════════════════════════════════════════════════
   HOW IT WORKS — barely-sky light section
   ═══════════════════════════════════════════════════════════ */
.section-how-figma { background: linear-gradient(135deg, #f8fafc 0%, #f0f9ff 100%); }
.dark-theme .section-how-figma { background: linear-gradient(140deg, #060C1A 0%, #0A1628 50%, #060C1A 100%); }

/* Step hover animation */
.figma-how-step-circle {
    box-shadow: 0 8px 24px rgba(0,0,0,0.10);
    transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s ease;
}
.figma-how-step:hover .lucide-icon-wrap {
    transform: scale(1.08) translateY(-3px);
    box-shadow: 0 12px 32px rgba(14,165,233,0.20);
}
.figma-how-step h4 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }

/* ═══════════════════════════════════════════════════════════
   STATS / TRUST — dark navy (the ONE dark section, Ayudo pattern)
   ═══════════════════════════════════════════════════════════ */
/* The .section-trust-dark class in ayudo_modern.css handles this.
   Just ensure the title gradient is overridden to white on dark. */
.section-trust-dark .figma-section-title {
    background: none !important;
    -webkit-text-fill-color: #f8fafc !important;
    color: #f8fafc !important;
}

/* ═══════════════════════════════════════════════════════════
   NAVBAR — minimal, like Ayudo
   ═══════════════════════════════════════════════════════════ */
.dark-theme .main-nav,
.dark-theme .navbar,
.dark-theme header nav {
    border-bottom: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 1px 0 rgba(255,255,255,0.04);
}

/* ═══════════════════════════════════════════════════════════
   BEST STOCKS / CARD HOVER
   ═══════════════════════════════════════════════════════════ */
.dark-theme .hero-figma-card.top20-card {
    transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s ease, border-color 0.25s ease;
}
.dark-theme .hero-figma-card.top20-card:hover {
    border-color: rgba(14,165,233,0.25);
    box-shadow: 0 24px 64px rgba(0,0,0,0.5), 0 0 28px rgba(14,165,233,0.1);
}

/* ═══════════════════════════════════════════════════════════
   MESH GLOW THEME — navbar transparent, hero bleeds through.
   ═══════════════════════════════════════════════════════════ */

/* ── Extend hero gradient behind navbar (negative margin-top) */
.main-content-dark:has(.hero-figma-wrap),
.main-content:has(.hero-figma-wrap) {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* ── Navbar — transparent glass, part of the hero gradient ── */
.navbar,
.navbar-dark,
.light-theme .navbar-dark {
    background: rgba(255, 255, 255, 0.08) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: none !important;
    backdrop-filter: blur(16px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
}

/* ── Nav text/links visible on gradient background ─────────  */
.light-theme .navbar-dark .nav-link,
.navbar-dark .nav-link {
    color: #0f172a !important;
}
.light-theme .navbar-dark .nav-brand-dark,
.navbar-dark .nav-brand-dark {
    color: #0f172a !important;
}