/* ================================================================
   JJVP-PRO: Theme
   Redesign: deep dark + electric purple/cyan PRO palette
   ================================================================ */

:root {
    --jjvp-bg:       #09090f;
    --jjvp-surface:  #13131f;
    --jjvp-border:   rgba(124, 92, 252, 0.2);
    --jjvp-accent:   #7C5CFC;
    --jjvp-accent2:  #00D8FF;
    --jjvp-text:     #e2e2ef;
    --jjvp-muted:    rgba(226, 226, 239, 0.5);
    --navbar-size:   106px;
}

/* ── Base overrides ───────────────────────────────────────────── */

body {
    background-color: var(--jjvp-bg);
    color: var(--jjvp-text);
}

a {
    color: var(--jjvp-accent2);
}

a:hover {
    color: #fff;
}

/* ── Navbar ───────────────────────────────────────────────────── */

.navbar {
    border-bottom: 1px solid var(--jjvp-border);
    background: rgba(9, 9, 15, 0.9) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.navbar-nav .nav-link {
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0 1.25rem !important;
    color: var(--jjvp-muted) !important;
    transition: color 0.2s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: #fff !important;
}

/* ── Entrance ─────────────────────────────────────────────────── */

.entrance {
    overflow: hidden;
}

/* Replace tileable pattern with animated gradient */
.entrance::before {
    background:
        linear-gradient(135deg,
            rgba(124, 92, 252, 0.18) 0%,
            rgba(0, 216, 255, 0.08) 50%,
            rgba(9, 9, 15, 0) 100%),
        radial-gradient(ellipse 80% 60% at 20% 50%, rgba(124, 92, 252, 0.12) 0%, transparent 70%),
        radial-gradient(ellipse 60% 80% at 80% 60%, rgba(0, 216, 255, 0.08) 0%, transparent 70%),
        var(--jjvp-bg);
    animation: jjvp-entrance-shift 12s ease-in-out infinite alternate;
}

@keyframes jjvp-entrance-shift {
    0%   { opacity: 1; filter: hue-rotate(0deg); }
    100% { opacity: 0.85; filter: hue-rotate(20deg); }
}

/* Entrance: media left, text right (desktop), text top, media bottom (mobile) */
.entrance .row > div.col-lg-6:first-child { /* text col */
    order: 1; /* top on mobile */
}
.entrance .row > div.col-lg-6:last-child { /* media col */
    order: 2; /* bottom on mobile */
}

@media (min-width: 992px) {
    .entrance .row > div.col-lg-6:first-child { /* text col → right */
        order: 2;
    }
    .entrance .row > div.col-lg-6:last-child { /* media col → left */
        order: 1;
    }
}

/* ── Seções agrupadas: Macrokeys + Volume ─────────────────────── */

#macros {
    background: var(--jjvp-surface);
    border-top: 1px solid var(--jjvp-border);
}

#audio {
    background: var(--jjvp-surface);
    border-bottom: 1px solid var(--jjvp-border);
}

/* ── Section02 cards: PRO theme accent ──────────────────────── */

.s02-card {
    border-color: var(--jjvp-border);
    background: rgba(124, 92, 252, 0.04);
}

.s02-card:hover {
    border-color: rgba(124, 92, 252, 0.45);
    background: rgba(124, 92, 252, 0.1);
}

.s02-card-icon {
    color: var(--jjvp-accent);
}

/* Placeholder border accent in PRO theme */
.entrance-media-placeholder {
    border-color: var(--jjvp-border);
    background: rgba(124, 92, 252, 0.04);
    color: var(--jjvp-muted);
}

/* Titles */
.entrance-title {
    font-size: clamp(2.5rem, 5vw, 5rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    background: linear-gradient(135deg, #fff 30%, var(--jjvp-accent2) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
}

.entrance-text {
    font-size: clamp(0.95rem, 2vw, 1.2rem);
    color: var(--jjvp-muted);
    line-height: 1.6;
}

/* ── Entrance eyebrow ─────────────────────────────────────────── */

.entrance-eyebrow {
    font-size: clamp(0.85rem, 2vw, 1.25rem);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    background: linear-gradient(135deg, #fff 30%, var(--jjvp-accent2) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    margin-bottom: 0.15rem;
}

/* ── Entrance CTA button ──────────────────────────────────────── */

.entrance-cta {
    display: inline-block;
    margin-top: 1.75rem;
    padding: 0.75rem 2rem;
    border-radius: 999px;
    background: var(--jjvp-accent);
    color: #fff !important;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-shadow: none;
    -webkit-text-fill-color: #fff;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    box-shadow: 0 0 24px rgba(124, 92, 252, 0.35);
    animation: jjvp-cta-pulse 2.5s ease-in-out infinite;
}

.entrance-cta:hover {
    background: #9575FF;
    box-shadow: 0 0 40px rgba(124, 92, 252, 0.7);
    transform: translateY(-1px);
    color: #fff !important;
    animation: none;
}

@keyframes jjvp-cta-pulse {
    0%, 100% { box-shadow: 0 0 20px rgba(124, 92, 252, 0.3); }
    50%       { box-shadow: 0 0 42px rgba(124, 92, 252, 0.65); }
}

/* ── PRO Badge ────────────────────────────────────────────────── */

.jjvp-pro-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 1.5rem;
    margin-right: 0.5rem;
    padding: 0.4rem 1.1rem;
    border-radius: 999px;
    border: 1px solid var(--jjvp-accent);
    color: var(--jjvp-accent);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(124, 92, 252, 0.08);
    box-shadow: 0 0 12px rgba(124, 92, 252, 0.15);
}

/* SVG inside badge: override inline style, keep flex centering */
.jjvp-pro-badge svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0;
    margin-right: 0 !important;
    vertical-align: unset !important;
}


/* ── CTA Banner: PRO theme ───────────────────────────────────── */

.cta-banner {
    background: linear-gradient(135deg,
        rgba(124, 92, 252, 0.1) 0%,
        rgba(0, 216, 255, 0.05) 100%);
    border-top: 1px solid var(--jjvp-border);
    border-bottom: 1px solid var(--jjvp-border);
}

.cta-banner-hero {
    background:
        radial-gradient(ellipse 70% 60% at 50% 40%, rgba(124, 92, 252, 0.15) 0%, transparent 70%),
        radial-gradient(ellipse 40% 50% at 80% 70%, rgba(0, 216, 255, 0.07) 0%, transparent 60%),
        var(--jjvp-bg);
    border-top: 1px solid var(--jjvp-border);
    border-bottom: 1px solid var(--jjvp-border);
}

.cta-hero-title {
    color: #fff;
}

.cta-hero-btn {
    background: var(--jjvp-accent);
    color: #fff;
    box-shadow: 0 0 32px rgba(124, 92, 252, 0.4);
}

.cta-hero-btn:hover {
    background: #9575FF;
    color: #fff;
    box-shadow: 0 0 52px rgba(124, 92, 252, 0.65);
    opacity: 1;
}

.cta-banner-btn {
    background: var(--jjvp-accent);
    color: #fff;
    box-shadow: 0 0 24px rgba(124, 92, 252, 0.35);
}

.cta-banner-btn:hover {
    color: #fff;
    box-shadow: 0 0 40px rgba(124, 92, 252, 0.6);
    opacity: 1;
    background: #9575FF;
}

.downloads-cta {
    background: linear-gradient(135deg,
        rgba(124, 92, 252, 0.1) 0%,
        rgba(0, 216, 255, 0.05) 100%);
    border: 1px solid var(--jjvp-border);
}

/* ── Downloads hero: PRO theme ───────────────────────────────── */

.dl-hero {
    background: linear-gradient(135deg,
        rgba(124, 92, 252, 0.12) 0%,
        rgba(0, 216, 255, 0.06) 100%);
    border-color: var(--jjvp-border);
    padding: 3rem 3.5rem;
    box-shadow: 0 0 80px rgba(124, 92, 252, 0.08);
}

.dl-hero-eyebrow {
    color: var(--jjvp-accent2);
    opacity: 1 !important;
}

.dl-hero-included {
    color: var(--jjvp-accent2);
    opacity: 0.85 !important;
}

.dl-hero-logo {
    width: 80px;
    height: 80px;
}

.dl-hero-title {
    font-size: clamp(1.4rem, 3vw, 2rem) !important;
}

.dl-hero-download .dl-hero-title {
    font-size: clamp(1.6rem, 3.5vw, 2.4rem) !important;
}

.dl-hero-version-badge {
    border-color: var(--jjvp-border);
    color: var(--jjvp-accent2);
    opacity: 1 !important;
}

.dl-btn-primary {
    background: var(--jjvp-accent);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 20px rgba(124, 92, 252, 0.3);
}

.dl-btn-primary:hover {
    background: #9575FF;
    color: #fff;
    box-shadow: 0 0 32px rgba(124, 92, 252, 0.55);
}

.dl-hero-link {
    display: inline-block;
    margin-top: 1.25rem;
    padding: 0.6rem 1.4rem;
    border-radius: 0.5rem;
    border: 1px solid var(--jjvp-accent);
    background: transparent;
    color: var(--jjvp-accent);
    font-size: 0.9rem;
    font-weight: 600;
    opacity: 1 !important;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.dl-hero-link:hover {
    background: var(--jjvp-accent);
    color: #fff;
    box-shadow: 0 0 24px rgba(124, 92, 252, 0.45);
}

/* ── Section01 content alignment ─────────────────────────────── */

/* Fix: .block-text wraps block <p> elements, force block context */
.block-text {
    display: block;
}

/* Ensure title, description and CTA button stay left-aligned in section01 */
#o-que-e .block-title,
#o-que-e .block-text,
#pro .block-title,
#pro .block-text {
    text-align: left;
}

/* ── #pro section: JJManager logo image ─────────────────────── */

/* blend-mode removes white bg from logo on dark surface */
#pro img {
    mix-blend-mode: multiply;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0.75rem !important;
}

/* ── Section01 image circles ──────────────────────────────────── */

img[style*="border-radius:50%"],
img[style*="border-radius: 50%"] {
    background-color: var(--jjvp-surface) !important;
    border: 1px solid var(--jjvp-border);
    box-shadow: 0 0 40px rgba(124, 92, 252, 0.1);
}

/* ── Section02 tabs ───────────────────────────────────────────── */

.s02-tab-btn.active {
    border-bottom-color: var(--jjvp-accent) !important;
    color: #fff;
}

.s02-tab-btn:hover {
    color: rgba(226, 226, 239, 0.9);
}

.s02-tabs {
    border-bottom-color: var(--jjvp-border);
}

.s02-img {
    background-color: var(--jjvp-surface) !important;
    border: 1px solid var(--jjvp-border);
    box-shadow: 0 0 40px rgba(124, 92, 252, 0.1);
}

/* ── Headings ─────────────────────────────────────────────────── */

.title,
.block-title {
    color: #fff;
}

.title {
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Section titles accent underline */
.title::after {
    content: '';
    display: block;
    width: 3rem;
    height: 3px;
    margin: 0.75rem auto 0;
    background: linear-gradient(90deg, var(--jjvp-accent), var(--jjvp-accent2));
    border-radius: 2px;
}

/* ── Section01 section headings ───────────────────────────────── */

.block-title {
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    font-weight: 700;
    color: #fff;
    -webkit-text-fill-color: unset;
    background: none;
    text-shadow: none;
}

/* ── CTA Button (Section01 link) ──────────────────────────────── */

.btn-primary {
    background: var(--jjvp-accent);
    border-color: var(--jjvp-accent);
    font-weight: 600;
    letter-spacing: 0.03em;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary:hover,
.btn-primary:focus {
    background: #9575FF;
    border-color: #9575FF;
    box-shadow: 0 0 20px rgba(124, 92, 252, 0.4);
}

/* ── Footer ───────────────────────────────────────────────────── */

footer {
    border-top: 1px solid var(--jjvp-border);
    background: var(--jjvp-surface);
}

/* ── Scrollbar ────────────────────────────────────────────────── */

::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: var(--jjvp-bg);
}
::-webkit-scrollbar-thumb {
    background: var(--jjvp-accent);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #9575FF;
}

/* ── Language Switcher ────────────────────────────────────────── */

.lang-switcher {
    position: fixed;
    top: 0;
    right: 1.5rem;
    height: var(--navbar-size);
    display: flex;
    align-items: center;
    gap: 0.35rem;
    z-index: 1031;
}

.lang-btn {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-decoration: none;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    border: 1px solid transparent;
    color: var(--jjvp-muted);
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    text-transform: uppercase;
    text-shadow: none;
}

.lang-btn:hover {
    color: #fff;
    background: rgba(124, 92, 252, 0.12);
    border-color: var(--jjvp-border);
}

.lang-btn.active {
    color: var(--jjvp-accent);
    border-color: var(--jjvp-accent);
    background: rgba(124, 92, 252, 0.1);
}

/* ── Responsive ───────────────────────────────────────────────── */

@media (max-width: 1199.98px) {
    /* Bootstrap's .container has fixed max-width per breakpoint and centers
       itself with auto margins, so the toggler's distance from the viewport
       edge jumps around at each breakpoint. Force the navbar container edge
       to edge here so that distance becomes constant and the lang-switcher
       can reserve a fixed, always-safe gap next to the toggler. */
    .navbar > .container {
        max-width: 100%;
    }

    .lang-switcher {
        right: 76px; /* clears the toggler (~56px) + its container padding */
        gap: 0.2rem;
    }
    .lang-btn {
        padding: 0.15rem 0.4rem;
        font-size: 0.65rem;
    }
}

@media (max-width: 991.98px) {
    .entrance .row > div.col-lg-6:first-child {
        padding: 0 1.5rem;
        text-align: center !important;
    }

    .entrance-title {
        font-size: clamp(2.2rem, 10vw, 3.5rem);
    }
}