:root {
    --deep: #0a1530;
    --navy: #0d1b3e;
    --navy2: #12234b;
    --primary: #1464be;
    --sky: #50a0e6;
    --ink: #f3f6fb;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--deep);
    color: var(--ink);
    font-family: "Inter", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Hexagonal grid background */
.hex-grid {
    background-image:
        linear-gradient(rgba(80, 160, 230, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(80, 160, 230, 0.05) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 85%);
    -webkit-mask-image: radial-gradient(
        ellipse at center,
        black 30%,
        transparent 85%
    );
}

/* Radial glow */
.glow-ellipse {
    background: radial-gradient(
        ellipse at center,
        rgba(80, 160, 230, 0.35),
        rgba(20, 100, 190, 0.15) 35%,
        transparent 70%
    );
    filter: blur(20px);
}

.glow-primary {
    box-shadow:
        0 0 0 1px rgba(80, 160, 230, 0.3),
        0 20px 60px -15px rgba(20, 100, 190, 0.55),
        0 0 80px -10px rgba(80, 160, 230, 0.35);
}

.text-glow {
    text-shadow: 0 0 30px rgba(80, 160, 230, 0.35);
}

/* Gradient text */
.gradient-text {
    background: linear-gradient(120deg, #ffffff 0%, #c9dcfa 40%, #50a0e6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.gradient-text-accent {
    background: linear-gradient(120deg, #50a0e6, #1464be);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ArtemisX — X diferenciado */
.x-mark {
    background: linear-gradient(135deg, #f1f1f1 0%, #bebebe 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    font-weight: 900;
}

/* Glass card */
.glass {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.04),
        rgba(255, 255, 255, 0.01)
    );
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.glass-hover:hover {
    border-color: rgba(80, 160, 230, 0.35);
    background: linear-gradient(
        180deg,
        rgba(80, 160, 230, 0.08),
        rgba(20, 100, 190, 0.03)
    );
}

/* Gradient border using pseudo */
.grad-border {
    position: relative;
}

.grad-border::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
        140deg,
        rgba(80, 160, 230, 0.6),
        rgba(80, 160, 230, 0.05) 40%,
        rgba(20, 100, 190, 0.4)
    );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* Buttons */
.btn-primary {
    background: linear-gradient(130deg, #1464be 0%, #50a0e6 100%);
    color: #fff;
    box-shadow:
        0 10px 30px -8px rgba(20, 100, 190, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
}

.btn-primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow:
        0 15px 40px -8px rgba(20, 100, 190, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.btn-ghost {
    background: rgba(255, 255, 255, 0.04);
    color: #e8f1ff;
    border: 1px solid rgba(80, 160, 230, 0.25);
    transition: all 0.2s;
}

.btn-ghost:hover {
    background: rgba(80, 160, 230, 0.1);
    border-color: rgba(80, 160, 230, 0.55);
}

/* Nav blur */
.nav-scrolled {
    background: rgba(10, 21, 48, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(80, 160, 230, 0.08);
}

/* Video panel */
.video-panel {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: #060c1e;
    border: 1px solid rgba(80, 160, 230, 0.15);
}

.video-panel video {
    width: 100%;
    display: block;
    background: #000;
    aspect-ratio: 16/9;
    object-fit: cover;
}

/* Clock display */
.clock {
    font-family: "JetBrains Mono", monospace;
    font-weight: 600;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
}

/* Floating badge for clock on video */
.clock-overlay {
    position: absolute;
    top: 16px;
    left: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(6, 12, 30, 0.7);
    border: 1px solid rgba(80, 160, 230, 0.3);
    border-radius: 12px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #e8f1ff;
}

.clock-overlay .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #50a0e6;
    box-shadow: 0 0 10px #50a0e6;
    animation: pulse 1.5s ease-in-out infinite;
}

.clock-overlay.done .dot {
    background: #5ee0a8;
    box-shadow: 0 0 12px #5ee0a8;
    animation: none;
}

.clock-overlay.manual .dot {
    background: #ff7b6b;
    box-shadow: 0 0 10px #ff7b6b;
}

@keyframes pulse {
    0%,
    100% {
        opacity: 0.55;
        transform: scale(0.9);
    }

    50% {
        opacity: 1;
        transform: scale(1.15);
    }
}

.video-label-top {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(6, 12, 30, 0.75);
    border: 1px solid rgba(80, 160, 230, 0.25);
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.video-status {
    position: absolute;
    bottom: 16px;
    left: 16px;
    right: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    background: rgba(6, 12, 30, 0.82);
    border: 1px solid rgba(80, 160, 230, 0.2);
    border-radius: 10px;
    font-size: 13px;
}

/* Play button overlay */
.video-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
        180deg,
        rgba(10, 21, 48, 0.1),
        rgba(10, 21, 48, 0.55)
    );
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.video-play-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.play-circle {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1464be, #50a0e6);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 0 60px rgba(80, 160, 230, 0.55),
        0 20px 40px -10px rgba(20, 100, 190, 0.5);
    transition: transform 0.3s ease;
}

.video-play-overlay:hover .play-circle {
    transform: scale(1.08);
}

/* Hex motif for logo area */
.hex-logo-bg {
    background:
        radial-gradient(
            circle at 30% 30%,
            rgba(80, 160, 230, 0.35),
            transparent 55%
        ),
        radial-gradient(
            circle at 70% 70%,
            rgba(20, 100, 190, 0.35),
            transparent 55%
        );
}

/* Animated gradient mesh */
.mesh-bg {
    background:
        radial-gradient(
            800px 400px at 20% 10%,
            rgba(20, 100, 190, 0.25),
            transparent 60%
        ),
        radial-gradient(
            800px 500px at 80% 30%,
            rgba(80, 160, 230, 0.18),
            transparent 60%
        ),
        radial-gradient(
            700px 400px at 50% 90%,
            rgba(20, 100, 190, 0.14),
            transparent 70%
        );
}

/* Reveal on scroll */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.reveal.in {
    opacity: 1;
    transform: translateY(0);
}

/* Marquee */
.marquee-track {
    animation: marquee 40s linear infinite;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Grid tag for features */
.feat-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(
        135deg,
        rgba(80, 160, 230, 0.2),
        rgba(20, 100, 190, 0.05)
    );
    border: 1px solid rgba(80, 160, 230, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #50a0e6;
}

/* Hexagon clip */
.hex-clip {
    clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
}

/* Accordion */
details summary {
    list-style: none;
    cursor: pointer;
}

details summary::-webkit-details-marker {
    display: none;
}

details[open] .faq-icon {
    transform: rotate(45deg);
}

.faq-icon {
    transition: transform 0.25s ease;
}

/* Subtle scrollbar on dark */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #060b1c;
}

::-webkit-scrollbar-thumb {
    background: #1b2d58;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #2c4a8a;
}

/* Price card highlight */
.price-highlight {
    position: relative;
    background: linear-gradient(
        180deg,
        rgba(80, 160, 230, 0.12),
        rgba(20, 100, 190, 0.05)
    );
}

.price-highlight::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(
        180deg,
        #50a0e6,
        #1464be,
        rgba(80, 160, 230, 0.1)
    );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/* Tab active */
.tab-active {
    background: linear-gradient(
        135deg,
        rgba(20, 100, 190, 0.2),
        rgba(80, 160, 230, 0.1)
    );
    border-color: rgba(80, 160, 230, 0.55);
    color: #fff;
}

/* Floating plugin screenshot mockup */
.mock-window {
    background: #0f1a36;
    border: 1px solid rgba(80, 160, 230, 0.2);
    border-radius: 14px;
    box-shadow:
        0 40px 100px -20px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.04);
}

.mock-titlebar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mock-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/* Subtle ticker on hero */
.hero-ring {
    position: absolute;
    inset: auto;
    width: 1100px;
    height: 1100px;
    border-radius: 50%;
    border: 1px solid rgba(80, 160, 230, 0.1);
    pointer-events: none;
}

/* ========================================================
       THEME TOGGLE BUTTON
    ======================================================== */
.theme-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(80, 160, 230, 0.22);
    color: #e8f1ff;
    cursor: pointer;
    transition: all 0.25s ease;
}

.theme-toggle:hover {
    background: rgba(80, 160, 230, 0.12);
    border-color: rgba(80, 160, 230, 0.55);
    transform: translateY(-1px);
}

.theme-toggle .sun-icon {
    display: none;
}

.theme-toggle .moon-icon {
    display: block;
}

/* ========================================================
       MODAL + TOAST
    ======================================================== */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(5, 10, 25, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-backdrop.open {
    display: flex;
    animation: modalFade 0.25s ease;
}

@keyframes modalFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-card {
    position: relative;
    background: linear-gradient(180deg, #101e44, #0a1530);
    border: 1px solid rgba(80, 160, 230, 0.28);
    border-radius: 22px;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    color: #f3f6fb;
    box-shadow:
        0 40px 120px -20px rgba(0, 0, 0, 0.85),
        0 0 60px -10px rgba(80, 160, 230, 0.15);
    animation: modalSlide 0.32s cubic-bezier(0.2, 0.8, 0.3, 1);
}

@keyframes modalSlide {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(80, 160, 230, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    cursor: pointer;
    transition: all 0.2s;
}

.modal-close:hover {
    background: rgba(255, 90, 90, 0.12);
    border-color: rgba(255, 90, 90, 0.5);
    color: #ff7b6b;
}

.modal-input,
.modal-select,
.modal-textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(80, 160, 230, 0.22);
    color: inherit;
    font-size: 14px;
    font-family: inherit;
    transition: all 0.2s;
}

.modal-input:focus,
.modal-select:focus,
.modal-textarea:focus {
    outline: none;
    border-color: #50a0e6;
    background: rgba(255, 255, 255, 0.07);
    box-shadow: 0 0 0 3px rgba(80, 160, 230, 0.18);
}

.modal-textarea {
    resize: vertical;
    min-height: 100px;
}

.modal-justified {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    line-height: 1.85;
}

.modal-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(243, 246, 251, 0.6);
    margin-bottom: 6px;
}

/* Toast */
.toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(120px);
    z-index: 200;
    background: linear-gradient(135deg, #1464be, #50a0e6);
    color: #ffffff;
    padding: 14px 22px;
    border-radius: 14px;
    box-shadow:
        0 20px 50px -10px rgba(20, 100, 190, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    font-size: 14px;
    font-weight: 500;
    opacity: 0;
    transition: all 0.35s cubic-bezier(0.2, 0.8, 0.3, 1);
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100vw - 32px);
}

.toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.toast.error {
    background: linear-gradient(135deg, #b34545, #ff7b6b);
}

/* ========================================================
       LIGHT THEME OVERRIDES
    ======================================================== */
html[data-theme="light"] body {
    background: #f4f7fc;
    color: #0d1b3e;
}

/* Grid + glows more subtle on light */
html[data-theme="light"] .hex-grid {
    background-image:
        linear-gradient(rgba(20, 100, 190, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20, 100, 190, 0.07) 1px, transparent 1px);
}

html[data-theme="light"] .mesh-bg {
    background:
        radial-gradient(
            800px 400px at 20% 10%,
            rgba(20, 100, 190, 0.1),
            transparent 60%
        ),
        radial-gradient(
            800px 500px at 80% 30%,
            rgba(80, 160, 230, 0.08),
            transparent 60%
        ),
        radial-gradient(
            700px 400px at 50% 90%,
            rgba(20, 100, 190, 0.06),
            transparent 70%
        );
}

html[data-theme="light"] .glow-ellipse {
    background: radial-gradient(
        ellipse at center,
        rgba(20, 100, 190, 0.16),
        rgba(80, 160, 230, 0.07) 35%,
        transparent 70%
    );
}

html[data-theme="light"] .hero-ring {
    border-color: rgba(20, 100, 190, 0.15);
}

/* Gradient text: legible on light */
html[data-theme="light"] .gradient-text {
    background: linear-gradient(120deg, #0d1b3e 0%, #1464be 55%, #50a0e6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

html[data-theme="light"] .text-glow {
    text-shadow: none;
}

/* Glass surfaces */
html[data-theme="light"] .glass {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.95),
        rgba(255, 255, 255, 0.8)
    );
    border: 1px solid rgba(20, 100, 190, 0.12);
    backdrop-filter: blur(14px);
    box-shadow: 0 2px 10px rgba(13, 27, 62, 0.04);
}

html[data-theme="light"] .glass-hover:hover {
    border-color: rgba(20, 100, 190, 0.4);
    background: linear-gradient(
        180deg,
        rgba(80, 160, 230, 0.07),
        rgba(255, 255, 255, 0.95)
    );
    box-shadow: 0 10px 30px -8px rgba(20, 100, 190, 0.18);
}

/* Gradient borders */
html[data-theme="light"] .grad-border::before {
    background: linear-gradient(
        140deg,
        rgba(20, 100, 190, 0.5),
        rgba(80, 160, 230, 0.08) 40%,
        rgba(20, 100, 190, 0.32)
    );
}

/* Ghost button */
html[data-theme="light"] .btn-ghost {
    background: rgba(20, 100, 190, 0.04);
    color: #0d1b3e;
    border: 1px solid rgba(20, 100, 190, 0.22);
}

html[data-theme="light"] .btn-ghost:hover {
    background: rgba(80, 160, 230, 0.12);
    border-color: rgba(20, 100, 190, 0.5);
}

/* Nav scrolled */
html[data-theme="light"] .nav-scrolled {
    background: rgba(244, 247, 252, 0.85);
    border-bottom: 1px solid rgba(20, 100, 190, 0.1);
}

/* Scrollbars */
html[data-theme="light"] ::-webkit-scrollbar-track {
    background: #e7eef8;
}

html[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: #b6c8e3;
}

html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: #8da8d0;
}

/* Mock window */
html[data-theme="light"] .mock-window {
    background: #ffffff;
    border: 1px solid rgba(20, 100, 190, 0.16);
    box-shadow:
        0 30px 80px -20px rgba(20, 100, 190, 0.28),
        0 0 0 1px rgba(20, 100, 190, 0.04);
}

html[data-theme="light"] .mock-titlebar {
    border-bottom-color: rgba(20, 100, 190, 0.08);
}

/* Video panel */
html[data-theme="light"] .video-panel {
    background: #e3ecf7;
    border: 1px solid rgba(20, 100, 190, 0.18);
}

/* Clock overlay + status on light */
html[data-theme="light"] .clock-overlay {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(20, 100, 190, 0.22);
    color: #0d1b3e;
}

html[data-theme="light"] .video-label-top {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(20, 100, 190, 0.22);
    color: #0d1b3e;
}

html[data-theme="light"] .video-status {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(20, 100, 190, 0.2);
    color: #0d1b3e;
}

html[data-theme="light"] .video-play-overlay {
    background: linear-gradient(
        180deg,
        rgba(244, 247, 252, 0.15),
        rgba(13, 27, 62, 0.45)
    );
}

/* Text inversions */
html[data-theme="light"] .text-white {
    color: #0d1b3e !important;
}

html[data-theme="light"] .text-white\/90 {
    color: rgba(13, 27, 62, 0.92) !important;
}

html[data-theme="light"] .text-white\/80 {
    color: rgba(13, 27, 62, 0.82) !important;
}

html[data-theme="light"] .text-white\/75 {
    color: rgba(13, 27, 62, 0.78) !important;
}

html[data-theme="light"] .text-white\/70 {
    color: rgba(13, 27, 62, 0.72) !important;
}

html[data-theme="light"] .text-white\/65 {
    color: rgba(13, 27, 62, 0.68) !important;
}

html[data-theme="light"] .text-white\/60 {
    color: rgba(13, 27, 62, 0.62) !important;
}

html[data-theme="light"] .text-white\/55 {
    color: rgba(13, 27, 62, 0.58) !important;
}

html[data-theme="light"] .text-white\/50 {
    color: rgba(13, 27, 62, 0.5) !important;
}

html[data-theme="light"] .text-white\/45 {
    color: rgba(13, 27, 62, 0.48) !important;
}

html[data-theme="light"] .text-white\/40 {
    color: rgba(13, 27, 62, 0.45) !important;
}

html[data-theme="light"] .text-white\/35 {
    color: rgba(13, 27, 62, 0.4) !important;
}

html[data-theme="light"] .text-white\/30 {
    color: rgba(13, 27, 62, 0.3) !important;
}

html[data-theme="light"] .text-white\/25 {
    color: rgba(13, 27, 62, 0.3) !important;
}

/* Borders */
html[data-theme="light"] .border-white\/5 {
    border-color: rgba(20, 100, 190, 0.1) !important;
}

html[data-theme="light"] .border-white\/10 {
    border-color: rgba(20, 100, 190, 0.14) !important;
}

/* Hard-coded dark bgs */
html[data-theme="light"] .bg-\[\#05091A\] {
    background-color: #0d1b3e !important;
    /* footer stays dark — brand navy */
}

html[data-theme="light"] .bg-\[\#08112a\]\/60 {
    background-color: rgba(234, 241, 250, 0.85) !important;
}

/* Feature icon bubbles */
html[data-theme="light"] .feat-icon {
    background: linear-gradient(
        135deg,
        rgba(80, 160, 230, 0.14),
        rgba(20, 100, 190, 0.04)
    );
    border: 1px solid rgba(20, 100, 190, 0.25);
    color: #1464be;
}

/* Price-highlight (anual card) */
html[data-theme="light"] .price-highlight {
    background: linear-gradient(
        180deg,
        rgba(80, 160, 230, 0.1),
        rgba(255, 255, 255, 0.9)
    );
}

/* Tab active */
html[data-theme="light"] .tab-active {
    background: linear-gradient(
        135deg,
        rgba(20, 100, 190, 0.14),
        rgba(80, 160, 230, 0.1)
    );
    border-color: rgba(20, 100, 190, 0.45);
    color: #0d1b3e;
}

html[data-theme="light"] .tab-btn:not(.tab-active) {
    color: rgba(13, 27, 62, 0.6);
}

html[data-theme="light"] .tab-btn:not(.tab-active):hover {
    color: #0d1b3e;
}

/* Hex logo bg (team avatars) */
html[data-theme="light"] .hex-logo-bg {
    background:
        radial-gradient(
            circle at 30% 30%,
            rgba(20, 100, 190, 0.28),
            transparent 55%
        ),
        radial-gradient(
            circle at 70% 70%,
            rgba(80, 160, 230, 0.28),
            transparent 55%
        ),
        #eef4fc;
}

/* Clock overlay internal label */
html[data-theme="light"] .clock-overlay .text-white\/50 {
    color: rgba(13, 27, 62, 0.55) !important;
}

/* Hero tag pill text sky */
html[data-theme="light"] .text-sky {
    color: #1464be;
}

html[data-theme="light"] .text-sky\/90 {
    color: rgba(20, 100, 190, 0.9);
}

/* Input focus accent for newsletter */
html[data-theme="light"] .modal-input,
html[data-theme="light"] .modal-select,
html[data-theme="light"] .modal-textarea {
    background: #f7fafd;
    border: 1px solid rgba(20, 100, 190, 0.18);
    color: #0d1b3e;
}

html[data-theme="light"] .modal-input:focus,
html[data-theme="light"] .modal-select:focus,
html[data-theme="light"] .modal-textarea:focus {
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(80, 160, 230, 0.22);
}

html[data-theme="light"] .modal-label {
    color: rgba(13, 27, 62, 0.55);
}

/* Modal on light */
html[data-theme="light"] .modal-backdrop {
    background: rgba(13, 27, 62, 0.35);
}

html[data-theme="light"] .modal-card {
    background: linear-gradient(180deg, #ffffff, #f7fafd);
    border: 1px solid rgba(20, 100, 190, 0.18);
    color: #0d1b3e;
    box-shadow: 0 40px 100px -20px rgba(20, 100, 190, 0.3);
}

html[data-theme="light"] .modal-close {
    background: rgba(13, 27, 62, 0.04);
    border: 1px solid rgba(20, 100, 190, 0.14);
}

/* Theme toggle in light */
html[data-theme="light"] .theme-toggle {
    background: rgba(20, 100, 190, 0.06);
    border: 1px solid rgba(20, 100, 190, 0.22);
    color: #0d1b3e;
}

html[data-theme="light"] .theme-toggle:hover {
    background: rgba(80, 160, 230, 0.14);
    border-color: rgba(20, 100, 190, 0.5);
}

html[data-theme="light"] .theme-toggle .sun-icon {
    display: block;
}

html[data-theme="light"] .theme-toggle .moon-icon {
    display: none;
}

/* Footer stays dark for premium contrast on light page */
html[data-theme="light"] footer {
    color: #f3f6fb;
}

html[data-theme="light"] footer .text-white {
    color: #f3f6fb !important;
}

html[data-theme="light"] footer .text-white\/90 {
    color: rgba(243, 246, 251, 0.92) !important;
}

html[data-theme="light"] footer .text-white\/80 {
    color: rgba(243, 246, 251, 0.82) !important;
}

html[data-theme="light"] footer .text-white\/70 {
    color: rgba(243, 246, 251, 0.72) !important;
}

html[data-theme="light"] footer .text-white\/65 {
    color: rgba(243, 246, 251, 0.68) !important;
}

html[data-theme="light"] footer .text-white\/60 {
    color: rgba(243, 246, 251, 0.62) !important;
}

html[data-theme="light"] footer .text-white\/55 {
    color: rgba(243, 246, 251, 0.58) !important;
}

html[data-theme="light"] footer .text-white\/50 {
    color: rgba(243, 246, 251, 0.5) !important;
}

html[data-theme="light"] footer .text-white\/40 {
    color: rgba(243, 246, 251, 0.45) !important;
}

html[data-theme="light"] footer .border-white\/5 {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="light"] footer .modal-input {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.18);
    color: #f3f6fb;
}

/* Section borders — retarget to section tags */
html[data-theme="light"] section.border-y,
html[data-theme="light"] section.border-t {
    border-color: rgba(20, 100, 190, 0.1);
}

/* Section bg variant */
.section-alt {
    background: #08112a;
}

html[data-theme="light"] .section-alt {
    background: #edf2fa;
}

/* Mobile menu in light theme */
html[data-theme="light"] #mobile-menu > div {
    background: rgba(244, 247, 252, 0.94) !important;
    border-top-color: rgba(20, 100, 190, 0.1);
}

html[data-theme="light"] #mobile-menu {
    border-top-color: rgba(20, 100, 190, 0.1);
}

/* ========================================================
       MOBILE FIXES
    ======================================================== */
@media (max-width: 640px) {
    /* Hero typography scales down */
    #hero h1 {
        font-size: 2.5rem !important;
        line-height: 1.05 !important;
    }

    #hero .text-lg {
        font-size: 1rem !important;
    }

    /* Hero floating cards: ease overflow on small screens */
    #hero .absolute.-bottom-6.-left-6 {
        position: static !important;
        width: 100% !important;
        margin-top: 12px;
    }

    #hero .absolute.-top-6.-right-6 {
        position: static !important;
        width: 100% !important;
        margin-bottom: 12px;
    }

    /* Proof row: stack 3 stats on very small */
    #hero .grid-cols-3 {
        grid-template-columns: 1fr;
        gap: 12px;
        max-width: 100%;
    }

    #hero .font-display.text-3xl {
        font-size: 1.75rem;
    }

    /* Scroll hint may overlap on short screens — hide on very small */
    #hero .absolute.bottom-6 {
        display: none;
    }

    /* Section padding reduced */
    section {
        padding-top: 3.5rem !important;
        padding-bottom: 3.5rem !important;
    }

    /* Video comparison: clock font size */
    .clock-overlay .clock.text-2xl {
        font-size: 1.1rem;
    }

    .clock-overlay {
        padding: 7px 10px;
        gap: 7px;
        top: 10px;
        left: 10px;
    }

    .video-label-top {
        top: 10px;
        right: 10px;
        font-size: 10px;
        padding: 4px 9px;
    }

    .video-status {
        bottom: 10px;
        left: 10px;
        right: 10px;
        font-size: 11px;
        padding: 6px 10px;
    }

    /* Pricing cards: ease padding */
    #lancamento .rounded-3xl {
        padding: 1.5rem;
    }

    #lancamento .text-5xl {
        font-size: 2.5rem;
    }

    /* Feature cards, steps, testimonials, problem cards */
    .glass.rounded-2xl.p-7 {
        padding: 1.25rem;
    }

    .glass.rounded-2xl.p-8 {
        padding: 1.5rem;
    }

    .glass.rounded-2xl.p-6 {
        padding: 1rem;
    }

    /* Hero section min-height reduced for mobile */
    #hero {
        min-height: auto !important;
        padding-top: 6rem;
        padding-bottom: 3rem;
    }

    /* Hero rings hidden (too big, caused overflow glows) */
    .hero-ring {
        display: none;
    }

    /* Headline sizes (h2) */
    h2.text-4xl,
    h2.text-5xl {
        font-size: 1.8rem !important;
        line-height: 1.1 !important;
    }

    /* Play controls row: stack */
    #comparacao .md\:flex-row {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    #comparacao .md\:text-right {
        text-align: center;
    }

    /* Newsletter form on footer */
    #newsletter-form .flex.gap-2 {
        flex-direction: column;
    }

    #newsletter-form button {
        width: 100%;
    }

    /* Modal on small */
    .modal-card {
        max-width: calc(100vw - 24px);
        padding: 24px !important;
    }

    .modal-card .font-display.text-xl {
        font-size: 1.15rem;
    }

    /* Nav: reduce nav height on mobile */
    nav .h-16 {
        height: 56px;
    }

    /* Marquee: slower on mobile */
    .marquee-track {
        animation-duration: 30s;
    }
}

@media (max-width: 420px) {
    #hero h1 {
        font-size: 2.1rem !important;
    }

    .btn-primary,
    .btn-ghost {
        padding-left: 1.1rem;
        padding-right: 1.1rem;
    }

    /* Hide "Começar agora" label in nav, keep arrow via icon — already hidden on sm */
}

/* Logo mark color tweak — subtle on light */
html[data-theme="light"] nav img[alt="ArtemisX"] {
    filter: none;
}