/* ============================================
   JIGA BHAI VIP — enhancements
   Loaded after main.css
   ============================================ */

html { color-scheme: dark; }

.skip-link {
    position: absolute;
    left: 12px;
    top: -48px;
    z-index: 2000;
    background: var(--gold);
    color: #000;
    font-weight: 800;
    padding: 8px 14px;
    border-radius: 8px;
}

.skip-link:focus { top: 12px; }

:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

/* Indic scripts — Bebas Neue has no Gujarati/Devanagari */
html[lang="gu"] body,
html[lang="hi"] body {
    font-family: "Noto Sans Gujarati", "Noto Sans Devanagari", "Nirmala UI", var(--font-body);
}

html[lang="gu"] .hero-title,
html[lang="gu"] .section-title,
html[lang="gu"] .about-heading,
html[lang="gu"] .plan-name,
html[lang="gu"] .final-cta-title,
html[lang="gu"] .logo-primary,
html[lang="hi"] .hero-title,
html[lang="hi"] .section-title,
html[lang="hi"] .about-heading,
html[lang="hi"] .plan-name,
html[lang="hi"] .final-cta-title,
html[lang="hi"] .logo-primary {
    font-family: "Noto Sans Gujarati", "Noto Sans Devanagari", "Nirmala UI", var(--font-body);
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.2;
    font-weight: 800;
}

html[lang="gu"] .hero-title,
html[lang="hi"] .hero-title {
    font-size: clamp(1.7rem, 7vw, 3.4rem);
}

/* Language switch */
.lang-switch {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-glass);
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 200, 61, 0.06);
    flex-shrink: 0;
}

.lang-switch button {
    min-width: 34px;
    min-height: 32px;
    padding: 4px 7px;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--text-secondary);
    line-height: 1;
}

.lang-switch button.active {
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    color: #000;
}

.lang-switch button:hover:not(.active) { color: #fff; }

/* Honest tape — not a fake live feed */
.ticker-label {
    min-width: 74px;
    justify-content: center;
    letter-spacing: 1px;
    background: linear-gradient(135deg, #1c2438, #0a0e1a);
    border-right: 1px solid var(--border-glass);
    box-shadow: none;
}

.ticker-label.is-open {
    background: linear-gradient(135deg, #0d8a55, #04663c);
}

.ticker-label.is-pre {
    background: linear-gradient(135deg, #b8860b, #7a5a06);
}

html[lang="gu"] .ticker-label,
html[lang="hi"] .ticker-label,
.session-card .badge-title,
.session-card .badge-sub {
    font-family: "Noto Sans Gujarati", "Noto Sans Devanagari", "Nirmala UI", var(--font-body);
    letter-spacing: 0;
}

html[lang="gu"] .ticker-label,
html[lang="hi"] .ticker-label {
    font-size: 0.68rem;
    min-width: 92px;
    padding: 0 8px;
}

.ticker-item.info em {
    color: var(--gold);
    text-shadow: none;
    font-weight: 700;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ticker-wrap {
    -webkit-mask-image: none;
    mask-image: none;
}

.ticker {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}

/* Founder frame fallback if the remote photo is blocked */
.founder-frame,
.about-image {
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 226, 138, 0.45), transparent 42%),
        linear-gradient(160deg, #ffe28a, #b8860b 70%, #050810);
}

.founder-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 5.5rem;
    color: #050810;
    letter-spacing: 2px;
    z-index: 0;
}

.founder-img { position: relative; z-index: 1; background: #0a0e1a; }
.founder-img.is-broken { display: none; }

.founder-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 55%, rgba(5, 8, 16, 0.82) 100%);
}

.founder-badge { z-index: 2; }

/* Stats read as facts, not stretched slogans */
.stat-num { font-size: clamp(1.4rem, 4vw, 2rem); }
.stat-label {
    font-size: 0.68rem;
    line-height: 1.3;
}

.session-card .badge-title { letter-spacing: 0.5px; }
.session-card .badge-sub { color: var(--text-secondary); }

/* How it works */
.steps-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.step-card {
    padding: 20px 18px;
    position: relative;
    min-height: 100%;
}

.step-num {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--gold);
    line-height: 1;
    text-shadow: 0 0 16px var(--gold-glow);
    margin-bottom: 8px;
}

.step-card h3 {
    font-size: 1.02rem;
    margin-bottom: 8px;
    color: #fff;
}

.step-card p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Free community banner */
.free-banner {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 18px;
    margin: 0 auto 28px;
    max-width: 980px;
    border: 1.5px solid rgba(55, 187, 254, 0.45);
    background: linear-gradient(135deg, rgba(55, 187, 254, 0.12), rgba(10, 14, 26, 0.9));
}

.free-banner h3 {
    font-family: var(--font-display);
    font-size: 1.8rem;
    letter-spacing: 1px;
    line-height: 1;
    margin: 8px 0;
}

.free-banner p {
    color: var(--text-secondary);
    font-size: 0.92rem;
}

.free-banner .btn-telegram { display: inline-flex; width: 100%; }

html[lang="gu"] .free-banner h3,
html[lang="hi"] .free-banner h3 {
    font-family: "Noto Sans Gujarati", "Noto Sans Devanagari", var(--font-body);
    letter-spacing: 0;
    font-size: 1.35rem;
    line-height: 1.3;
}

/* Compliance strip */
.compliance {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin: -8px auto 28px;
    max-width: 860px;
}

.compliance span {
    border: 1px solid var(--border-glass);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.03);
}

/* Performance cards were built for giant numbers — titles need room */
.perf-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    letter-spacing: 0.5px;
    color: var(--gold);
    margin-bottom: 6px;
    line-height: 1.1;
}

.perf-copy {
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.45;
    font-weight: 600;
}

html[lang="gu"] .perf-title,
html[lang="hi"] .perf-title,
html[lang="gu"] .author-profit,
html[lang="hi"] .author-profit,
html[lang="gu"] .plan-ribbon,
html[lang="hi"] .plan-ribbon,
html[lang="gu"] .eyebrow,
html[lang="hi"] .eyebrow {
    font-family: "Noto Sans Gujarati", "Noto Sans Devanagari", var(--font-body);
    letter-spacing: 0;
    font-weight: 800;
    text-transform: none;
}

html[lang="gu"] .perf-title,
html[lang="hi"] .perf-title {
    font-size: 1.05rem;
}

html[lang="gu"] .author-profit,
html[lang="hi"] .author-profit {
    font-size: 0.78rem;
    text-align: right;
    max-width: 46%;
    line-height: 1.3;
}

.proof-image-placeholder.has-image {
    padding: 0;
    border-style: solid;
    overflow: hidden;
    display: block;
}

.proof-screenshot {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.proof-note,
.plans-fineprint {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.55;
    max-width: 720px;
    margin: 18px auto 0;
}

/* Plans: 2-up is easier to read than four cramped columns */
.plans-grid {
    max-width: 980px;
    padding-top: 16px;
}

.plan-card .btn {
    white-space: normal;
    text-align: center;
    margin-top: auto;
}

.price-equiv {
    width: 100%;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    margin-top: 4px;
}

.nav-link.is-active { color: #fff; }
.nav-link.is-active::after { width: 40px; }

/* Mobile dock */
.mobile-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 98;
    display: flex;
    gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(5, 8, 16, 0.94);
    border-top: 1px solid var(--border-glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.mobile-dock .btn { flex: 1; white-space: normal; text-align: center; font-size: 0.75rem; }

body { padding-bottom: 78px; }

.float-wa { bottom: 86px; }

.video-caption {
    margin-top: 12px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.yt-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 22px;
}

.yt-actions .btn { width: 100%; }

@media (min-width: 768px) {
    .steps-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .free-banner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 26px 28px;
    }
    .free-banner .btn-telegram { width: auto; flex-shrink: 0; }
    .yt-actions { flex-direction: row; justify-content: center; }
    .yt-actions .btn { width: auto; }
}

@media (min-width: 1024px) and (max-width: 1180px) {
    .nav-actions .btn-telegram span { display: none; }
    .nav-menu { gap: 12px; }
    .nav-link { font-size: 0.78rem; }
}

@media (min-width: 1024px) {
    .nav-menu { gap: 18px; }
    .nav-link { font-size: 0.84rem; }
    .steps-grid { grid-template-columns: repeat(4, 1fr); }
    .plans-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 980px;
        gap: 22px;
    }
    .plan-card { width: auto; }
    .plan-card.featured { transform: translateY(-6px); }
    .mobile-dock { display: none; }
    body { padding-bottom: 0; }
    .float-wa { bottom: 24px; }
    .hero-stats { gap: 18px; }
}

@media (max-width: 420px) {
    .logo-primary { font-size: 0.95rem; letter-spacing: 0.4px; }
    .nav-container { padding: 0 10px; gap: 8px; }
}

@media (max-width: 380px) {
    .lang-switch button { min-width: 30px; padding: 4px 5px; font-size: 0.68rem; }
    .logo-secondary { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .plan-card.featured { transform: none; }
}

/* ============================================
   READABILITY
   Neon text-shadow was blurring letters.
   Cards keep a crisp border; glyphs stay sharp.
   ============================================ */
:root {
    --text-secondary: #e6ebf5;
    --text-muted: #c5ccdb;
    --gold: #ffb800;
    --gold-light: #ffc83d;
    --gold-dark: #c47d00;
    --green: #00e08a;
    --red: #ff3b5c;
    --gold-glow: rgba(255, 184, 0, 0.22);
    --green-glow: rgba(0, 224, 138, 0.16);
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: auto;
}

h1, h2, h3, h4, h5, h6,
p, a, li, span, em, b, strong, button, label, summary, small,
.text-gold, .text-green, .text-red,
.hero-title, .section-title, .final-cta-title,
.plan-name, .price-amount, .price-currency, .price-period, .price-equiv, .price-old,
.eyebrow, .logo-primary, .logo-secondary,
.badge-title, .badge-sub, .stat-num, .stat-label,
.perf-title, .perf-copy, .proof-symbol, .proof-date, .proof-result,
.plan-tag, .plan-desc, .plan-slots, .plan-ribbon,
.exp-num, .exp-text, .author-profit, .author-name, .author-loc,
.footer-col h4, .modal-price .new, .modal-content h3, .modal-content h4,
.ticker-item, .ticker-item em, .ticker-item span, .ticker-item b,
.step-num, .faq-item summary, .faq-item summary::after,
.contact-label, .contact-value, .trust-item, .section-sub,
.disclaimer h5, .disclaimer p, .plans-note, .plans-fineprint, .proof-note {
    text-shadow: none !important;
}

.hero-title,
.section-title,
.final-cta-title,
.plan-name,
.price-amount {
    letter-spacing: 0.4px;
}

.logo-secondary {
    font-size: 0.62rem;
    letter-spacing: 1.2px;
    color: #ffb800;
    font-weight: 800;
}

.eyebrow {
    letter-spacing: 1.4px;
    color: #ffb800;
    background: rgba(255, 184, 0, 0.14);
    border-color: rgba(255, 184, 0, 0.7);
}

.stat-label,
.contact-label,
.proof-stats span,
.author-loc,
.proof-date,
.plan-slots,
.price-period,
.price-equiv,
.badge-sub {
    color: #d5dbea;
    font-size: 0.78rem;
    letter-spacing: 0.4px;
    font-weight: 700;
}

.section-sub,
.plan-desc,
.about-text,
.hero-description,
.footer-about,
.faq-item > p,
.step-card p,
.perf-copy,
.testimonial-card > p,
.disclaimer p,
.plans-fineprint,
.proof-note,
.video-caption {
    color: #e8edf6;
    font-weight: 500;
}

.hero-description,
.section-sub,
.plan-desc,
.faq-item > p {
    font-size: 1rem;
    line-height: 1.65;
}

.badge-title,
.proof-symbol,
.author-profit,
.footer-col h4,
.plan-tag,
.plan-ribbon {
    font-family: var(--font-body);
    font-weight: 800;
    letter-spacing: 0.3px;
}

.proof-symbol,
.plan-tag,
.footer-col h4,
.badge-title,
.text-gold {
    color: #ffb800;
}

.text-green,
.author-profit,
.proof-stats b.text-green,
.ticker-item.up em {
    color: #00e08a;
}

.plan-features li.muted {
    color: #b7c0d4;
    opacity: 1;
}

.plan-features li.muted i {
    color: #ff4d6a;
    opacity: 1;
}

.quote-icon {
    opacity: 0.28;
    text-shadow: none;
}

.nav-link {
    color: #eef2f8;
    font-weight: 700;
}

.ticker-item span,
.ticker-item em {
    color: #f2f5fb;
    font-weight: 700;
}

.glass,
.plan-card,
.proof-card,
.testimonial-card,
.faq-item,
.perf-card,
.step-card,
.float-stat {
    border-color: rgba(255, 184, 0, 0.55);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.plan-card.featured,
.plan-card.ultimate,
.final-cta-box,
.faq-item[open],
.founder-frame,
.about-image {
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
}

.plans-note,
.modal-box {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
}

.price-amount,
.exp-num,
.stat-num,
.modal-price .new,
.step-num {
    color: #ffb800;
}

@keyframes glowPulse {
    0%, 100% { box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35); }
    50% { box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45); }
}
