:root {
    /* TRON Dark Theme Premium / Autonomix Neural Architect */
    --bg-dark: #111220;
    --surface: #111220;
    --surface-container-low: #191b28;
    --surface-container-high: #262940;
    --surface-container-highest: #323442;

    --bg-card: var(--surface-container-low);

    --text-primary: #ffffff;
    --text-secondary: #bac9c9;

    /* TRON Neons */
    --cyan-neon: #47eaed;
    --cyan-container: #00ced1;
    --cyan-glow: rgba(71, 234, 237, 0.5);

    --orange-neon: #ffb77d;
    --orange-container: #fd8b00;
    --orange-glow: rgba(255, 183, 125, 0.5);

    --border-light: rgba(133, 148, 147, 0.15);
    --outline: #859493;

    /* Typography */
    --font-heading: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* Effects */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-secondary);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
    /* subtle base pattern */
    background-image: radial-gradient(circle at center, var(--surface-container-low) 0%, var(--surface) 100%);
    background-attachment: fixed;
}

/* -----------------------------
   BACKGROUND EFFECTS (TRON)
------------------------------*/
.background-effects {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

/* Perspective Floor Grid */
.tron-grid {
    position: absolute;
    bottom: -30vh;
    left: -50vw;
    width: 200vw;
    height: 70vh;
    background-image:
        linear-gradient(rgba(0, 243, 255, 0.3) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 243, 255, 0.3) 1px, transparent 1px);
    background-size: 60px 60px;
    transform: perspective(600px) rotateX(75deg);
    animation: gridMove 4s linear infinite;
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 80%);
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 80%);
}

@keyframes gridMove {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 0 60px;
    }
}

/* Lasers */
.laser-vertical {
    position: absolute;
    top: -10vh;
    bottom: 0;
    width: 2px;
    background: var(--cyan-neon);
    box-shadow: 0 0 15px var(--cyan-neon), 0 0 30px var(--cyan-neon);
    opacity: 0.2;
}

.left-laser {
    left: 10%;
    animation: pulseOpacity 4s infinite alternate;
}

.right-laser {
    right: 10%;
    animation: pulseOpacity 5s infinite alternate-reverse;
}

@keyframes pulseOpacity {
    0% {
        opacity: 0.1;
    }

    100% {
        opacity: 0.4;
    }
}

/* Glow Orbs */
.glow-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.2;
}

.orb-cyan {
    width: 40vw;
    height: 40vw;
    background: var(--cyan-neon);
    top: -10vw;
    left: -10vw;
    animation: float 15s ease-in-out infinite alternate;
}

.orb-orange {
    width: 30vw;
    height: 30vw;
    background: var(--orange-neon);
    bottom: 20vw;
    right: -10vw;
    animation: float 12s ease-in-out infinite alternate-reverse;
}

@keyframes float {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(60px, 80px);
    }
}

/* Reactive Scroll Lighting */
.scroll-lighting-overlay {
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 0.8;
    transition: opacity 0.1s linear;
    z-index: 1;
}

.scroll-beams {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.beam {
    position: absolute;
    width: 300px;
    height: 1000px;
    background: linear-gradient(to bottom, transparent, var(--cyan-neon), transparent);
    filter: blur(100px);
    opacity: 0;
    transform: rotate(-45deg) translateY(-200px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.beam-1 {
    left: -10%;
    top: -20%;
}

.beam-2 {
    left: 40%;
    top: -10%;
    background: linear-gradient(to bottom, transparent, var(--orange-neon), transparent);
}

.beam-3 {
    right: -10%;
    top: 20%;
}

/* -----------------------------
   UTILITIES
------------------------------*/
h1,
h2,
h3,
h4 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.text-center {
    text-align: center;
}

.mt-40 {
    margin-top: 40px;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 10;
}

.text-gradient {
    background: linear-gradient(to right, var(--cyan-neon) 0%, var(--orange-neon) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-neon-cyan {
    color: var(--cyan-neon);
    text-shadow: 0 0 10px rgba(0, 243, 255, 0.4);
}

.text-neon-orange {
    color: var(--orange-neon);
    text-shadow: 0 0 10px rgba(255, 122, 0, 0.4);
}

.glow-text-cyan {
    color: var(--text-primary);
    text-shadow: 0 0 10px var(--cyan-neon);
}

/* Glow Boxes */
.glow-box {
    background: var(--bg-card);
    border: none;
    box-shadow: none;
    border-radius: 0.375rem;
    transition: var(--transition-smooth);
}

.glow-box:hover {
    background: var(--surface-container-high);
    border-left: 2px solid var(--orange-neon);
}

.glow-box-orange {
    background: var(--bg-card);
    border: none;
    box-shadow: none;
    border-radius: 0.375rem;
    transition: var(--transition-smooth);
}

.glow-box-orange:hover {
    background: var(--surface-container-high);
    border-left: 2px solid var(--orange-neon);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    border-radius: 0.375rem;
    font-family: var(--font-heading);
    font-weight: 700;
    text-decoration: none;
    font-size: 1rem;
    transition: var(--transition-smooth);
    cursor: pointer;
    border: none;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.btn-primary {
    background: var(--cyan-container);
    color: #000;
}

.btn-primary:hover {
    box-shadow: 0 0 15px var(--cyan-neon);
    transform: translateY(-2px);
    background: var(--cyan-container);
}

.btn-outline-cyan {
    background: transparent;
    color: var(--cyan-neon);
    border: 1px solid rgba(71, 234, 237, 0.4);
}

.btn-outline-cyan:hover {
    border-color: rgba(71, 234, 237, 1);
}

.btn-outline-orange {
    background: transparent;
    color: var(--orange-neon);
    border: 1px solid rgba(255, 183, 125, 0.4);
}

.btn-outline-orange:hover {
    border-color: rgba(255, 183, 125, 1);
}

.btn-large {
    padding: 16px 40px;
    font-size: 1.2rem;
}

.pulse-effect {
    position: relative;
}

.pulse-effect::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 0 var(--cyan-glow);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 var(--cyan-glow);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 15px rgba(0, 243, 255, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 243, 255, 0);
    }
}

/* -----------------------------
   HEADER
------------------------------*/
.header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
    padding: 20px 0;
    background: rgba(25, 27, 40, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-light);
    box-shadow: none;
    opacity: 1;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: clamp(1rem, 2.2vw, 1.5rem);
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 2px;
    white-space: nowrap;
    flex-shrink: 0;
}

.logo-icon {
    color: var(--cyan-neon);
    font-size: 1.2rem;
    text-shadow: 0 0 10px var(--cyan-neon);
}

.logo-text {
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.15;
}

.highlight {
    font-weight: 300;
    font-size: 0.58em;
    color: var(--text-secondary);
    letter-spacing: 3px;
}

.nav {
    display: flex;
    align-items: center;
    gap: clamp(12px, 2vw, 32px);
    flex-shrink: 0;
}

/* Wrapper for the dynamically rendered nav links — transparent to layout so the
   links remain direct flex children of .nav (same spacing as before). */
.nav-links { display: contents; }

.nav-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: clamp(0.75rem, 1.1vw, 0.95rem);
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: var(--transition-smooth);
    white-space: nowrap;
}

.nav-link:hover {
    color: var(--cyan-neon);
    text-shadow: 0 0 8px var(--cyan-glow);
}

/* -----------------------------
   HERO & AI AGENT
------------------------------*/
.hero-scroll-wrapper {
    height: auto;
    position: relative;
}

.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: safe center;
    align-items: stretch;
    overflow: hidden;
    padding-top: calc(var(--header-h, 80px) + 16px);
    padding-bottom: 24px;
}

/* Header height token — keeps hero padding in sync with real header height.
   Header is `padding: 20px 0` + logo content (~24px line-height) ≈ 64-120px
   depending on whether nav wraps. Reserve generous space so the title is
   never hidden behind the navbar when it fades in. */
:root {
    /* With white-space:nowrap on the logo the header stays single-line ~64px */
    --header-h: 80px;
}
@media (max-width: 768px) {
    :root { --header-h: 76px; }
}
@media (max-height: 600px) {
    :root { --header-h: 72px; }
}

/* Short viewports: when there isn't enough vertical space for the two-column
   hero, collapse to a single column and shrink the AI visual so nothing is
   clipped behind the sticky boundary. */
@media (max-height: 820px) and (min-width: 993px) {
    .hero-title {
        font-size: clamp(2.2rem, 4.5vw, 3.2rem);
    }
    .hero-subtitle {
        font-size: 1rem;
        margin-bottom: 24px;
    }
    .badge {
        margin-bottom: 16px;
    }
}

@media (max-height: 700px) {
    .hero-scroll-wrapper {
        /* Even tighter so users on laptops don't scroll forever */
        height: clamp(1100px, 220vh, 1700px);
    }
    .founder-presentation {
        max-width: 280px;
    }
    .hero-title {
        font-size: clamp(1.8rem, 4vw, 2.6rem);
        margin-bottom: 14px;
    }
    .hero-subtitle {
        font-size: 0.95rem;
        margin-bottom: 20px;
        max-width: 100%;
    }
    .ai-data-stream {
        display: none;
    }
}


@media (max-height: 600px) {
    .badge {
        font-size: 0.7rem;
        padding: 4px 12px;
        margin-bottom: 12px;
    }
    .hero-title {
        font-size: clamp(1.4rem, 3.2vw, 2rem);
        margin-bottom: 10px;
    }
    .hero-subtitle {
        margin-bottom: 14px;
    }
    .btn {
        padding: 8px 18px;
        font-size: 0.85rem;
    }
}

.hero-black-overlay {
    transition: opacity 0.1s linear;
}



.scrolling-glow {
    position: relative;
    z-index: 1;
}

.scrolling-glow.reveal-done {
    background: var(--surface-container-low) !important;
    box-shadow: 0 0 20px rgba(71, 234, 237, 0.25), inset 0 0 15px rgba(71, 234, 237, 0.05);
}

/* Glow Stroke on Real Text */
.hero-title.glow-stroke {
    color: transparent;
    -webkit-text-stroke: 1.2px var(--cyan-neon);
    background: linear-gradient(
        110deg,
        transparent 0%,
        transparent 40%,
        var(--cyan-neon) 45%,
        var(--orange-neon) 50%,
        var(--cyan-neon) 55%,
        transparent 60%,
        transparent 100%
    );
    background-size: 300% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 0 8px rgba(71, 234, 237, 0.5));
}

.hero-title.glow-stroke span {
    background: inherit;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* When revealed, restore normal look */
.hero-title.revealed {
    color: var(--text-primary) !important;
    -webkit-text-stroke: 0px transparent;
    background: none !important;
    filter: none;
    text-shadow: 0 5px 15px rgba(71, 234, 237, 0.1);
    transition: all 0.6s ease;
}

.hero-title.revealed span {
    background: linear-gradient(to right, var(--cyan-neon) 0%, var(--orange-neon) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-container {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.ai-hero-container {
    padding-top: 0;
}

.badge {
    display: inline-block;
    padding: 6px 16px;
    border: 1px solid var(--cyan-neon);
    box-shadow: inset 0 0 10px rgba(0, 243, 255, 0.2);
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 24px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.hero-title {
    font-size: clamp(1.8rem, 5.2vw, 4rem);
    margin-bottom: 24px;
    letter-spacing: -0.02em;
    text-shadow: 0 5px 15px rgba(71, 234, 237, 0.1);
    line-height: 1.15;
    /* Prevent gradient/stroke clipping when wrapped */
    padding: 0.08em 0;
    text-wrap: balance;
    overflow-wrap: break-word;
}

.hero-subtitle {
    font-size: clamp(0.95rem, 1.4vw, 1.2rem);
    color: var(--text-secondary);
    margin: 0 auto 40px;
    max-width: 90%;
}

.hero-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
}

/* FOUNDER & AI AGENT VISUAL */
.ai-hero-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    position: relative;
}

.founder-presentation {
    display: flex;
    flex-direction: column;
    border-radius: 0.375rem;
    overflow: hidden;
    width: 100%;
    max-width: 480px;
    /* No default shadow — the scrolling-glow effect builds the shadow
       progressively as the user scrolls. Static shadow caused a flash
       on initial load before the scroll sequence took over. */
    box-shadow: none;
    border: none;
    pointer-events: auto;
    background: var(--surface-container-low);
}

.scanner-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
    background: var(--bg-dark);
    overflow: hidden;
    cursor: ew-resize;
}

.scanner-bg,
.scanner-fg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: contrast(1.1);
}

.scanner-reveal {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
    border-right: 0px solid transparent;
    z-index: 2;
}

.scanner-fg {
    width: 480px;
    max-width: none;
}

/* Match container width */
.scanner-beam {
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    background: var(--cyan-neon);
    box-shadow: 0 0 15px var(--cyan-neon), 0 0 30px var(--cyan-neon);
    z-index: 3;
    pointer-events: none;
    transform: translateX(-50%);
}

.scanline-overlay {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 243, 255, 0.05) 3px, rgba(0, 243, 255, 0.05) 4px);
    pointer-events: none;
    z-index: 4;
}

.presentation-info {
    display: flex;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.8);
    border-top: 2px solid var(--cyan-neon);
    padding: 20px;
}

.clickable-label {
    cursor: pointer;
    transition: var(--transition-smooth);
    border-radius: 4px;
}

.clickable-label:hover {
    background: rgba(71, 234, 237, 0.1);
    box-shadow: 0 0 15px rgba(71, 234, 237, 0.1);
}

.p-person,
.p-ai {
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.border-right {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.inline {
    display: inline-block;
    margin-right: 8px;
}

.p-role {
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 4px;
}

.mt-20 {
    margin-top: 20px;
}

.pulse-dot {
    width: 10px;
    height: 10px;
    background: var(--orange-neon);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--orange-neon);
    animation: pulseDot 1s infinite alternate;
}

@keyframes pulseDot {
    to {
        opacity: 0.3;
    }
}

.ai-data-stream {
    font-family: monospace;
    font-size: 0.85rem;
    color: var(--cyan-neon);
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 243, 255, 0.2);
    padding: 15px;
    border-radius: 4px;
    width: 100%;
    max-width: 300px;
}

.ai-data-stream div {
    overflow: hidden;
    white-space: nowrap;
    animation: typing 2s steps(40, end) infinite;
    border-right: 2px solid var(--cyan-neon);
}

@keyframes typing {
    0% {
        width: 0;
    }

    50%,
    100% {
        width: 100%;
        border-color: transparent;
    }
}

/* -----------------------------
   VSL SECTION
------------------------------*/
.vsl-section {
    padding: 80px 0;
    position: relative;
    z-index: 2;
}

.section-header {
    margin-bottom: 50px;
}

.section-desc {
    font-size: 1.1rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 16px auto 0;
}

.vsl-wrapper {
    padding: 20px;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}

.vsl-video-placeholder {
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
    border: 1px solid rgba(255, 122, 0, 0.4);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.vsl-video-placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255, 122, 0, 0.05) 3px, rgba(255, 122, 0, 0.05) 4px);
    pointer-events: none;
}

.vsl-scanline {
    position: absolute;
    width: 100%;
    height: 5px;
    background: rgba(255, 122, 0, 0.3);
    opacity: 0.5;
    animation: scanline 6s linear infinite;
    pointer-events: none;
}

@keyframes scanline {
    0% {
        top: -10px;
    }

    100% {
        top: 100%;
    }
}

.play-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.play-btn {
    width: 80px;
    height: 80px;
    background: rgba(255, 122, 0, 0.2);
    border: 2px solid var(--orange-neon);
    border-radius: 50%;
    color: var(--orange-neon);
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 8px;
    cursor: pointer;
    z-index: 2;
    transition: var(--transition-smooth);
}

.vsl-video-placeholder:hover .play-btn {
    background: var(--orange-neon);
    color: #000;
    transform: scale(1.1);
    box-shadow: 0 0 30px var(--orange-glow);
}

.play-btn-pulse {
    position: absolute;
    width: 80px;
    height: 80px;
    background: var(--orange-neon);
    border-radius: 50%;
    opacity: 0.5;
    animation: playPulse 2s infinite ease-out;
    z-index: 1;
}

@keyframes playPulse {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }
}

.vsl-video-placeholder h3 {
    color: var(--orange-neon);
    letter-spacing: 3px;
    z-index: 2;
    text-shadow: 0 0 10px rgba(255, 183, 125, 0.4);
}

.vsl-video-placeholder p {
    color: #fff;
    z-index: 2;
}

/* -----------------------------
   CONVERSATION SECTION
------------------------------*/
.conversation-section {
    padding: 60px 0 100px;
    position: relative;
    z-index: 2;
}

.chat-container {
    max-width: 850px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.chat-row {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
}

.chat-row.user-row {
    justify-content: flex-start;
}

.chat-row.system-row {
    justify-content: flex-end;
}

.chat-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 3px solid var(--cyan-neon);
    box-shadow: 0 0 15px var(--cyan-glow);
    background: var(--bg-dark);
}

.chat-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-bubble {
    max-width: 65%;
    padding: 20px 24px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.5;
    position: relative;
    color: #000;
    box-shadow: 0 4px 15px rgba(71, 234, 237, 0.1);
}

/* User */
.user-bubble {
    background-color: #ffc77d;
    /* pale orange */
    border-top-left-radius: 4px;
}

.user-bubble::before {
    content: '';
    position: absolute;
    top: 18px;
    /* adjust to point to avatar center */
    left: -12px;
    border-width: 8px 12px 8px 0;
    border-style: solid;
    border-color: transparent #ffc77d transparent transparent;
}

/* System */
.system-bubble {
    background-color: var(--cyan-neon);
    border-top-right-radius: 4px;
}

.system-bubble::after {
    content: '';
    position: absolute;
    top: 18px;
    right: -12px;
    border-width: 8px 0 8px 12px;
    border-style: solid;
    border-color: transparent transparent transparent var(--cyan-neon);
}

@media (max-width: 768px) {
    .chat-bubble {
        max-width: 80%;
        font-size: 1rem;
        padding: 16px 20px;
    }

    .chat-avatar {
        width: 50px;
        height: 50px;
    }

    .user-bubble::before {
        top: 13px;
    }

    .system-bubble::after {
        top: 13px;
    }
}

/* Delay modifiers for stagger effect are already defined globally (.delay-1, .delay-2) 
   We will add a delay-3 just in case */
.delay-3 {
    transition-delay: 0.6s;
}

/* -----------------------------
   SYSTEMS SECTION
------------------------------*/
.systems-section {
    padding: 100px 0;
    position: relative;
    z-index: 2;
}

.systems-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    overflow: visible;
}

.system-card {
    padding: 40px 30px;
    position: relative;
    text-align: left;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.plan-card--featured {
    position: relative !important;
    overflow: visible !important;
    border: 1px solid rgba(71, 234, 237, 0.5) !important;
    box-shadow: 0 0 30px rgba(71, 234, 237, 0.1);
}

/* ASCEND no es el tercer escalon de la escalera: es produccion audiovisual que se contrata
   AL LADO de ORIGEN o IMPULSO. El acento naranja lo saca de la escalera cian sin apagarlo —
   sigue siendo gama alta, solo que de otra categoria. Apagarlo habria dicho "peor", y no lo es.
   El !important del borde replica el de .plan-card--featured y por el mismo motivo: sin el, el
   border-left de 2px que pone .glow-box-orange:hover ensancha la tarjeta al pasar el raton. */
.plan-card--complement {
    border: 1px solid rgba(255, 183, 125, 0.35) !important;
    box-shadow: 0 0 30px rgba(255, 183, 125, 0.07);
}

.plan-card--complement .details-title,
.plan-card--complement .details-highlight,
.plan-card--complement .price-label,
.plan-card--complement .system-list li::before {
    color: var(--orange-neon);
}

.card-icon {
    font-size: 2.5rem;
    font-family: var(--font-heading);
    font-weight: 900;
    margin-bottom: 20px;
    opacity: 0.8;
}

.card-title {
    font-size: 1.3rem;
    margin-bottom: 16px;
    letter-spacing: 2px;
}

.card-separator {
    width: 40px;
    height: 3px;
    background: var(--cyan-neon);
    margin: 0 auto 24px;
    box-shadow: 0 0 10px var(--cyan-glow);
}

.card-separator.orange {
    background: var(--orange-neon);
    box-shadow: 0 0 10px var(--orange-glow);
}

.card-text {
    color: var(--text-secondary);
    margin-bottom: 30px;
    font-size: 0.95rem;
}

.card-link {
    color: var(--cyan-neon);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.90rem;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.card-link.orange-link {
    color: var(--orange-neon);
}

.card-link:hover .arrow {
    transform: translateX(5px);
}

.card-subtitle {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 24px;
    min-height: 48px;
}

/* La aclaracion de que un plan no se contrata solo. Tiene que leerse como nota al margen del
   subtitulo, no como un bullet mas de la lista: de ahi el margen negativo, que la pega a el. */
.plan-note {
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--text-secondary);
    margin: -14px 0 24px;
    padding-left: 10px;
    border-left: 2px solid rgba(255, 183, 125, 0.45);
}

/* La lista arranca pegada al subtitulo; el hueco libre se lo queda .card-price, que sigue
   con su `margin-top: auto` y mantiene precio y boton clavados abajo en las tres tarjetas.
   Antes las DOS llevaban `margin-top: auto` y el flex repartia el hueco entre ambas: con las
   listas descompensadas (5 / 2 / 3 bullets) eso abria un agujero en mitad de IMPULSO, que es
   justo la tarjeta que tiene que ganar la parrilla. */
.card-details {
    text-align: left;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 20px;
}

.details-title {
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.details-highlight {
    font-weight: 700;
    color: var(--cyan-neon);
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.system-list {
    list-style: none;
    padding-left: 0;
    color: var(--text-secondary);
    margin-bottom: 0;
    font-size: 0.95rem;
}

.system-list li {
    margin-bottom: 8px;
    position: relative;
    padding-left: 16px;
    line-height: 1.4;
}

.system-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--cyan-neon);
    font-weight: bold;
}

/* La etiqueta de un bullet agrupado ("Produccion audiovisual: video y foto…"). Se queda en
   blanco tambien dentro de la tarjeta naranja: con la etiqueta coloreada el bloque entero
   perdia contraste y el detalle dejaba de leerse. */
.feature-label {
    font-weight: 700;
    color: var(--text-primary);
}

/* Badge "RECOMENDADO" — corta la esquina superior derecha */
.plan-badge {
    position: absolute !important;
    top: -28px;
    right: 15px;
    padding: 16px 42px;
    color: #ffffff;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 2px;
    z-index: 100 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    pointer-events: none;
    background: linear-gradient(180deg, #5cf0f2 0%, #00b8bb 100%);
    clip-path: polygon(12% 0%, 88% 0%, 100% 50%, 88% 100%, 12% 100%, 0% 50%);
    filter: drop-shadow(0 0 12px rgba(71, 234, 237, 0.8)) drop-shadow(0 0 3px rgba(255, 255, 255, 0.6));
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Consolidated styles above */

/* -----------------------------
   DEMOS SECTION (CAROUSEL)
------------------------------*/
.demos-section {
    padding: 80px 0;
    position: relative;
    z-index: 2;
}

.carousel-container {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    gap: 16px;
}

.carousel-track-wrapper {
    flex: 1;
    overflow: hidden;
    position: relative;
    padding: 4px 2px;
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    gap: 30px;
}

.demo-card {
    flex: 0 0 calc(33.333% - 20px);
    /* 3 cards on PC, accounting for gap */
    min-width: 0;
    /* Prevents overflow */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 24px;
}

.demo-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.demo-content .btn {
    margin-top: auto;
}

/* Push button to bottom if heights differ */
.video-container {
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1), margin-top 0.3s;
    border-radius: 4px;
}

.video-container.expanded {
    max-height: 400px;
    margin-top: 24px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.video-container iframe {
    width: 100%;
    height: 250px;
    border: none;
    display: block;
}

.carousel-btn {
    background: var(--surface-container-high);
    border: 1px solid var(--outline);
    color: var(--cyan-neon);
    font-size: 1.5rem;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-smooth);
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 5;
}

.carousel-btn:hover {
    background: var(--cyan-neon);
    color: #000;
    border-color: var(--cyan-neon);
    box-shadow: 0 0 15px var(--cyan-glow);
}

/* -----------------------------
   TESTIMONIALS SECTION
------------------------------*/
.testimonials-section {
    padding: 80px 0;
    position: relative;
    z-index: 2;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.test-card {
    padding: 30px;
    position: relative;
    text-align: left;
}

.test-card .stars {
    font-size: 1.2rem;
    margin-bottom: 16px;
    letter-spacing: 2px;
}

.t-text {
    font-style: italic;
    color: var(--text-primary);
    margin-bottom: 24px;
    font-size: 0.95rem;
    line-height: 1.8;
}

.t-author {
    display: flex;
    align-items: center;
    gap: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
}

.t-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    font-weight: 700;
    font-family: var(--font-heading);
    letter-spacing: 1px;
}

.border-cyan {
    border: 2px solid var(--cyan-neon);
    color: var(--cyan-neon);
    box-shadow: 0 0 10px inset var(--cyan-glow);
}

.border-orange {
    border: 2px solid var(--orange-neon);
    color: var(--orange-neon);
    box-shadow: 0 0 10px inset var(--orange-glow);
}

.t-info h4 {
    font-size: 1rem;
    margin-bottom: 4px;
    letter-spacing: 1px;
}

.t-info span {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* -----------------------------
   FOUNDER BIO SECTION
------------------------------*/
.founder-bio-section {
    padding: 40px 0 80px;
    position: relative;
    z-index: 2;
}

.founder-bio-container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 50px;
    padding: 40px;
    border-width: 2px;
}

.bio-content {
    flex: 1;
}

.bio-content .section-title {
    font-size: 1rem;
    letter-spacing: 3px;
    margin-bottom: 20px;
    font-family: monospace;
}

.bio-name {
    font-size: 3rem;
    margin-bottom: 24px;
    text-shadow: 0 0 10px rgba(71, 234, 237, 0.2);
}

.bio-text {
    color: var(--text-primary);
    margin-bottom: 20px;
    font-size: 1.1rem;
    line-height: 1.8;
    opacity: 0.9;
}

.bio-text strong {
    color: var(--cyan-neon);
    font-weight: 700;
    text-shadow: 0 0 5px var(--cyan-glow);
}

.bio-image-wrapper {
    width: 320px;
    aspect-ratio: 1/1.2;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid var(--cyan-neon);
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.2), inset 0 0 15px rgba(0, 243, 255, 0.2);
    position: relative;
}

.bio-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(20%);
    transition: var(--transition-smooth);
}

.founder-bio-container:hover .bio-image {
    filter: grayscale(0%);
    transform: scale(1.05);
}

@media (max-width: 992px) {
    .founder-bio-container {
        flex-direction: column;
        text-align: center;
    }

    .bio-image-wrapper {
        width: 100%;
        max-width: 350px;
    }
}

/* -----------------------------
   NEWSLETTER & FOOTER
------------------------------*/
.newsletter-section {
    padding: 80px 0 120px;
    position: relative;
    z-index: 2;
}

.newsletter-container {
    padding: 60px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-width: 2px;
}

.newsletter-title {
    font-size: 2.2rem;
    margin-bottom: 16px;
}

.newsletter-text {
    color: var(--text-secondary);
    margin-bottom: 32px;
    max-width: 500px;
}

.newsletter-form {
    display: flex;
    gap: 16px;
    width: 100%;
    max-width: 500px;
}

.cyber-input {
    flex: 1;
    padding: 16px 20px;
    background: var(--surface-container-highest);
    border: none;
    border-bottom: 2px solid var(--outline);
    border-radius: 0;
    color: var(--cyan-neon);
    font-family: var(--font-body);
    font-size: 1rem;
    transition: var(--transition-smooth);
}

.cyber-input::placeholder {
    color: rgba(71, 234, 237, 0.3);
}

.cyber-input:focus {
    outline: none;
    border-color: var(--cyan-neon);
    box-shadow: 0 2px 10px rgba(71, 234, 237, 0.3);
}

.footer {
    padding: 40px 0;
    border-top: 1px solid rgba(0, 243, 255, 0.2);
    background: rgba(0, 0, 0, 0.8);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-logo {
    font-family: var(--font-heading);
    font-weight: 900;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 2px;
}

.copyright {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-family: monospace;
}

/* -----------------------------
   RESPONSIVE DESIGN
------------------------------*/
@media (max-width: 992px) {
    .hero-title {
        font-size: 3rem;
    }

    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .demo-card {
        flex: 0 0 calc(50% - 15px);
    }
}

@media (max-width: 768px) {

    .systems-grid,
    .testimonials-grid {
        grid-template-columns: 1fr !important;
    }

    .demo-card {
        flex: 0 0 100%;
    }

    /* 1 card on mobile */
    .hidden-mobile {
        display: none;
    }

    .hero-title {
        font-size: 2.2rem;
    }

    .hero-actions {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .newsletter-form {
        flex-direction: column;
    }

    .footer-content {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .tron-grid {
        background-size: 40px 40px;
    }

    .ai-agent {
        width: 220px;
        height: 220px;
    }
}

/* -----------------------------
   ANIMATIONS
------------------------------*/
.reveal {
    opacity: 0;
    visibility: hidden;
}

.reveal.active {
    opacity: 1;
    visibility: visible;
}

.fade-up {
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-up.active {
    transform: translateY(0);
}

.fade-right {
    transform: translateX(-30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-right.active {
    transform: translateX(0);
}

.fade-left {
    transform: translateX(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-left.active {
    transform: translateX(0);
}

.delay-1 {
    transition-delay: 0.2s;
}

.delay-2 {
    transition-delay: 0.4s;
}

/* Interactive Pointer Glow for JS */
.pointer-effect {
    position: relative;
}

/* Removed overflow: hidden to allow badge visibility */
.pointer-glow {
    position: absolute;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(0, 243, 255, 0.15) 0%, transparent 60%);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s;
    opacity: 0;
    z-index: 0;
}

.pointer-effect:hover .pointer-glow {
    opacity: 1;
}

.pointer-effect>* {
    position: relative;
    z-index: 1;
}

.pointer-effect > .pointer-glow {
    position: absolute;
}

/* ─── HERO PAINS ─────────────────────────────────────────────────── */
.hero-pains {
    list-style: none;
    padding: 0;
    margin: 0 auto 32px;
    display: inline-flex;
    flex-direction: column;
    gap: 10px;
}

.hero-pains li {
    font-size: clamp(0.85rem, 1.2vw, 0.95rem);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.pain-x {
    color: #ff4d4d;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}

/* ─── SYSTEMS CARD PRICE & CTA ───────────────────────────────────── */
.card-price {
    margin-top: auto;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 20px;
}

.price-tag {
    font-size: 0.78rem;
    color: var(--cyan-neon);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.price-impl {
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--text-secondary);
    font-style: italic;
    opacity: 0.85;
}

.price-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

.price-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.price-label {
    font-size: 0.72rem;
    color: var(--cyan-neon);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.price-value {
    font-size: 1rem;
    color: var(--text-primary);
    font-weight: 700;
}

.card-cta {
    width: 100%;
    text-align: center;
    margin-top: 4px;
}

.system-card {
    display: flex;
    flex-direction: column;
}

/* ─── SECTION CTA (between sections) ────────────────────────────── */
.section-cta {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid rgba(0, 243, 255, 0.1);
}

.cta-lead {
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.cta-sub {
    margin-top: 14px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    opacity: 0.7;
}

/* ─── FOUNDER CTA ────────────────────────────────────────────────── */
.founder-cta {
    margin-top: 32px;
}

/* ─── PROGRAMA FUNDADORES ────────────────────────────────────────── */
.fundadores-section {
    padding: 80px 0;
}

.fundadores-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
}

.founder-benefit-card {
    padding: 36px 28px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.founder-num {
    font-size: 2.5rem;
    font-weight: 700;
    font-family: var(--font-heading);
    line-height: 1;
    opacity: 0.9;
}

@media (max-width: 992px) {
    .fundadores-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .fundadores-grid {
        grid-template-columns: 1fr;
    }

    .hero-pains {
        margin-bottom: 24px;
    }
}

/* ─── FOUNDER BIO VISUAL COLUMN ──────────────────────────────────── */
.bio-visual-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

.bio-visual-col .founder-presentation {
    max-width: 340px;
}

.bio-visual-col .founder-cta {
    width: 100%;
    margin-top: 0;
}

/* ─── BIO CREDENTIALS ────────────────────────────────────────────── */
.bio-credentials {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
}

.credential-tag {
    font-size: 0.75rem;
    padding: 4px 12px;
    border: 1px solid rgba(71, 234, 237, 0.4);
    border-radius: 100px;
    color: var(--cyan-neon);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ─── RESPONSIVE: TABLET (≤992px) ────────────────────────────────── */
@media (max-width: 992px) {
    .bio-visual-col {
        width: 100%;
        align-items: center;
    }
    .bio-credentials {
        justify-content: center;
    }
    .founder-presentation {
        max-width: min(300px, 55vw);
        margin: 0 auto;
    }
}

/* ─── RESPONSIVE: MOBILE (≤768px) ────────────────────────────────── */
@media (max-width: 768px) {
    .founder-presentation {
        max-width: min(300px, 85vw);
    }
}

/* ─── AUDIT PHILOSOPHY BLOCK ─────────────────────────────────────── */
.audit-philosophy {
    font-size: 1.25rem;
    font-style: italic;
    color: var(--text-primary);
    margin: 16px 0 10px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.section-subdesc {
    font-size: 0.95rem;
    color: var(--text-secondary);
    max-width: 640px;
    margin: 0 auto 32px;
    line-height: 1.6;
}

.audit-price-anchor {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin: 6px 0 12px;
    line-height: 1.5;
}

.audit-price-anchor strong {
    color: var(--text-primary);
    font-size: 0.95rem;
}

.price-usual {
    font-size: 0.78rem;
    color: rgba(186, 201, 201, 0.5);
    text-decoration: line-through;
    margin-left: 4px;
}

.cta-sub--secondary {
    font-size: 0.78rem;
    color: rgba(186, 201, 201, 0.45);
    margin-top: 4px;
    font-style: italic;
}

/* ─── DEMO VIDEO ACCORDION PANEL ─────────────────────────────────── */
.demo-video-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.45s ease, margin-top 0.45s ease;
    margin-top: 0;
}

.demo-video-panel.expanded {
    max-height: 800px;
    margin-top: 24px;
}

.demo-video-inner {
    border: 1px solid rgba(71, 234, 237, 0.3);
    border-radius: 12px;
    background: var(--surface-container-low);
    overflow: hidden;
}

.demo-video-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(71, 234, 237, 0.12);
}

.demo-video-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--cyan-neon);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.demo-video-close {
    background: none;
    border: 1px solid rgba(71, 234, 237, 0.3);
    color: var(--text-secondary);
    font-size: 0.72rem;
    padding: 4px 14px;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: color 0.2s, border-color 0.2s;
}

.demo-video-close:hover {
    color: var(--cyan-neon);
    border-color: var(--cyan-neon);
}

.demo-video-frame {
    display: flex;
    justify-content: center;
    padding: 16px;
}

.demo-video-frame video {
    max-width: 360px;
    max-height: 75vh;
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: none;
}

.free-badge {
    display: inline-block;
    background: var(--cyan-neon);
    color: var(--bg-dark);
    font-size: 0.6rem;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 700;
    letter-spacing: 0.08em;
    vertical-align: middle;
    margin-left: 8px;
    position: relative;
    top: -2px;
}

/* ─── CONTACT MODAL ───────────────────────────────────────────────── */
.contact-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    padding: 20px;
}

.contact-modal-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.contact-modal {
    background: var(--surface-container-low);
    border: 1px solid rgba(71, 234, 237, 0.3);
    border-radius: 16px;
    padding: 36px;
    max-width: 460px;
    width: 100%;
    position: relative;
    transform: translateY(24px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 0 60px rgba(71, 234, 237, 0.08), 0 24px 80px rgba(0, 0, 0, 0.6);
    max-height: 90vh;
    overflow-y: auto;
}

.contact-modal-overlay.active .contact-modal {
    transform: translateY(0);
}

.modal-close-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    background: none;
    border: 1px solid rgba(71, 234, 237, 0.25);
    color: var(--text-secondary);
    width: 30px;
    height: 30px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, border-color 0.2s;
    font-family: inherit;
}

.modal-close-btn:hover {
    color: var(--cyan-neon);
    border-color: var(--cyan-neon);
}

.modal-logo {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 14px;
    color: var(--cyan-neon);
}

.modal-title {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
    font-family: var(--font-heading);
}

.modal-subtitle {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 26px;
    line-height: 1.55;
}

.modal-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.form-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.modal-submit-btn {
    margin-top: 6px;
    width: 100%;
    justify-content: center;
}

.modal-error-msg {
    font-size: 0.78rem;
    color: #ff6b6b;
    text-align: center;
    min-height: 18px;
}

@media (max-width: 480px) {
    .contact-modal {
        padding: 28px 22px;
        border-radius: 12px;
    }
}

/* ─── QUIZ DE DIAGNÓSTICO (paso 1 del modal) ──────────────────────── */
.quiz-step {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quiz-progress {
    height: 4px;
    border-radius: 4px;
    background: rgba(71, 234, 237, 0.12);
    overflow: hidden;
    margin-bottom: 18px;
}

.quiz-progress-bar {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: 4px;
    background: linear-gradient(to right, var(--cyan-neon), var(--orange-neon));
    box-shadow: 0 0 8px var(--cyan-glow);
    transition: width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.quiz-progress-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--cyan-neon);
    margin: -10px 0 14px;
    text-transform: uppercase;
}

.quiz-questions {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 8px;
}

.quiz-comment {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 8px;
}

/* Navegación del wizard (Atrás / Continuar) */
.quiz-nav {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-top: 6px;
}

.quiz-nav .quiz-back-btn {
    flex: 0 0 auto;
    padding-left: 18px;
    padding-right: 18px;
}

.quiz-nav .modal-submit-btn {
    flex: 1;
    margin-top: 0;
}

.arrow-back {
    display: inline-block;
}

.quiz-skip-btn {
    align-self: center;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.82rem;
    text-decoration: underline;
    cursor: pointer;
    padding: 6px;
    margin-top: 2px;
    transition: color 0.2s;
}

.quiz-skip-btn:hover {
    color: var(--cyan-neon);
}

.quiz-question {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.quiz-q-text {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-primary);
    margin: 0;
}

.quiz-options {
    display: flex;
    gap: 10px;
}

.quiz-btn {
    flex: 1;
    padding: 10px 0;
    border-radius: 8px;
    border: 1px solid rgba(71, 234, 237, 0.25);
    background: rgba(71, 234, 237, 0.04);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.quiz-btn:hover {
    border-color: var(--cyan-neon);
    color: var(--cyan-neon);
}

.quiz-btn.selected {
    background: var(--cyan-neon);
    border-color: var(--cyan-neon);
    color: var(--surface);
    box-shadow: 0 0 12px var(--cyan-glow);
}

/* ─── RESULTADO DEL QUIZ (paso 3 del modal) ───────────────────────── */
.result-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
}

.result-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(71, 234, 237, 0.1);
    border: 2px solid var(--cyan-neon);
    color: var(--cyan-neon);
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 18px var(--cyan-glow);
    margin-bottom: 4px;
}

.result-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-primary);
    margin: 0;
}

.result-cta-text {
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--text-secondary);
    margin: 0;
}

.result-cta {
    width: 100%;
    justify-content: center;
    margin-top: 6px;
    text-decoration: none;
}

/* Botón secundario del resultado ("o cierra y te escribiremos…") */
.result-secondary-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.82rem;
    text-decoration: underline;
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s;
}

.result-secondary-btn:hover {
    color: var(--cyan-neon);
}

/* ─── COMPLETAR PERFIL (paso 2 de cualificación) ──────────────────── */
.perfil-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 20px 40px;
    position: relative;
    z-index: 2;
}

.perfil-card {
    position: static;
    transform: none;
}

.perfil-status {
    font-size: 0.88rem;
    color: var(--text-secondary);
    text-align: center;
    padding: 20px 0;
}

.perfil-error-box {
    text-align: center;
    padding: 12px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

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

.perfil-summary {
    background: rgba(71, 234, 237, 0.04);
    border: 1px solid rgba(71, 234, 237, 0.15);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 20px;
}

.perfil-summary-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.perfil-summary-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.perfil-summary-label {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.perfil-summary-value {
    font-size: 0.85rem;
    color: var(--text-primary);
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
}

.perfil-modificar-btn {
    margin-top: 10px;
    background: none;
    border: none;
    color: var(--cyan-neon);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
    text-decoration: underline;
}

.perfil-summary-edit {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(71, 234, 237, 0.15);
}

.perfil-steps {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 22px;
}

.perfil-step {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(71, 234, 237, 0.25);
    color: var(--text-secondary);
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.perfil-step.active {
    background: var(--cyan-neon);
    border-color: var(--cyan-neon);
    color: var(--surface);
    font-weight: 700;
}

.perfil-page {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.perfil-nav {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.perfil-nav .btn {
    flex: 1;
    justify-content: center;
}

.modal-skip-btn {
    display: block;
    margin: 14px auto 0;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.82rem;
    text-decoration: underline;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.modal-skip-btn:hover {
    opacity: 1;
    color: var(--cyan-neon);
}

/* ─── COOKIE BANNER ───────────────────────────────────────────────── */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 900;
    background: rgba(17, 18, 32, 0.97);
    border-top: 1px solid rgba(71, 234, 237, 0.2);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 14px 24px;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cookie-banner.visible {
    transform: translateY(0);
}

.cookie-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.cookie-text {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
    flex: 1;
    min-width: 200px;
}

.cookie-link {
    color: var(--cyan-neon);
    text-decoration: none;
    transition: opacity 0.2s;
}

.cookie-link:hover {
    opacity: 0.75;
    text-decoration: underline;
}

.cookie-btns {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
}

/* Aceptar y rechazar son el MISMO control con distinto texto.
   Antes no lo eran: aceptar era el botón sólido de marca y rechazar un texto con un borde al 30%
   de opacidad y el color secundario. Esa asimetría es un patrón oscuro — empuja al sí sin decirlo
   — y el consentimiento así obtenido es discutible, porque rechazar tiene que ser tan fácil como
   aceptar. Mismo tamaño, mismo peso de borde, mismo contraste de texto, mismo foco.
   Si algún día se rediseña el banner, la regla no es "que se parezcan": es que compartan clase. */
.cookie-btn {
    font-family: inherit;
    font-size: 0.8rem;
    line-height: 1.2;
    padding: 10px 20px;
    min-width: 160px;
    border: 1px solid var(--cyan-neon);
    border-radius: 6px;
    background: transparent;
    color: var(--text-primary);
    letter-spacing: 0.04em;
    white-space: nowrap;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.cookie-btn:hover {
    background: rgba(71, 234, 237, 0.12);
}

/* Foco visible de verdad, y en los dos por igual: el banner se recorre con teclado y sin esto
   no se ve dónde estás. `outline-offset` lo separa del borde para que se distinga del hover. */
.cookie-btn:focus-visible {
    outline: 2px solid var(--cyan-neon);
    outline-offset: 3px;
}

@media (max-width: 600px) {
    .cookie-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
    .cookie-btns { width: 100%; }
    .cookie-btn { flex: 1; min-width: 0; }
}

/* ─── FOOTER LEGAL LINKS ──────────────────────────────────────────── */
.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.footer-legal-links {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-legal-links a {
    font-size: 0.75rem;
    color: rgba(186, 201, 201, 0.4);
    text-decoration: none;
    letter-spacing: 0.04em;
    transition: color 0.2s;
}

.footer-legal-links a:hover {
    color: var(--cyan-neon);
}

/* ── Consent checkboxes ──────────────────────────────────────── */
.form-consent {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 4px 0 20px;
}

.consent-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    position: relative;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid rgba(71, 234, 237, 0.15);
    background: rgba(71, 234, 237, 0.03);
    transition: border-color 0.2s, background 0.2s;
}

.consent-item:hover {
    border-color: rgba(71, 234, 237, 0.35);
    background: rgba(71, 234, 237, 0.06);
}

.consent-item.consent-optional {
    border-color: rgba(255, 183, 125, 0.15);
    background: rgba(255, 183, 125, 0.03);
}

.consent-item.consent-optional:hover {
    border-color: rgba(255, 183, 125, 0.35);
    background: rgba(255, 183, 125, 0.06);
}

.consent-item.consent-error {
    border-color: rgba(255, 80, 80, 0.6) !important;
    background: rgba(255, 80, 80, 0.06) !important;
    animation: shake 0.35s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%       { transform: translateX(-5px); }
    60%       { transform: translateX(5px); }
    80%       { transform: translateX(-3px); }
}

/* Hide native checkbox */
.consent-checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Custom checkmark box */
.consent-checkmark {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 1.5px solid rgba(71, 234, 237, 0.5);
    border-radius: 4px;
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    background: transparent;
}

.consent-optional .consent-checkmark {
    border-color: rgba(255, 183, 125, 0.5);
}

.consent-checkbox:checked + .consent-checkmark {
    background: var(--cyan-neon);
    border-color: var(--cyan-neon);
    box-shadow: 0 0 8px rgba(71, 234, 237, 0.6);
}

.consent-checkbox:checked + .consent-checkmark::after {
    content: '';
    display: block;
    width: 5px;
    height: 9px;
    border: 2px solid #ffffff;
    border-top: none;
    border-left: none;
    transform: rotate(42deg) translateY(-1px);
}

.consent-optional .consent-checkbox:checked + .consent-checkmark {
    background: var(--orange-neon);
    border-color: var(--orange-neon);
    box-shadow: 0 0 8px rgba(255, 183, 125, 0.6);
}

/* Focus ring for keyboard nav */
.consent-checkbox:focus-visible + .consent-checkmark {
    outline: 2px solid var(--cyan-neon);
    outline-offset: 2px;
}

/* Whole-item glow when checked (sibling selector fallback + :has() for full support) */
.consent-checkbox:checked ~ .consent-text {
    color: var(--text-primary);
    text-shadow: 0 0 10px rgba(71, 234, 237, 0.35);
    transition: color 0.25s, text-shadow 0.25s;
}
.consent-optional .consent-checkbox:checked ~ .consent-text {
    text-shadow: 0 0 10px rgba(255, 183, 125, 0.35);
}
.consent-item:has(.consent-checkbox:checked) {
    border-color: rgba(71, 234, 237, 0.55);
    background: rgba(71, 234, 237, 0.08);
    box-shadow: 0 0 14px rgba(71, 234, 237, 0.12);
}
.consent-item.consent-optional:has(.consent-checkbox:checked) {
    border-color: rgba(255, 183, 125, 0.55);
    background: rgba(255, 183, 125, 0.08);
    box-shadow: 0 0 14px rgba(255, 183, 125, 0.12);
}

.consent-text {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.55;
    flex: 1;
    transition: color 0.25s, text-shadow 0.25s;
}

.consent-link {
    color: var(--cyan-neon);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: opacity 0.2s;
}

.consent-link:hover {
    opacity: 0.75;
}

.consent-required-badge,
.consent-optional-badge {
    display: inline-block;
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: 6px;
    vertical-align: middle;
    font-weight: 600;
}

.consent-required-badge {
    background: rgba(71, 234, 237, 0.12);
    color: var(--cyan-neon);
    border: 1px solid rgba(71, 234, 237, 0.3);
}

.consent-optional-badge {
    background: rgba(255, 183, 125, 0.12);
    color: var(--orange-neon);
    border: 1px solid rgba(255, 183, 125, 0.3);
}

/* ─── FORM FIELD HINTS ────────────────────────────────────────────── */
.field-hint {
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    margin-left: 5px;
    vertical-align: middle;
    font-weight: 500;
}

.field-hint--required {
    color: var(--cyan-neon);
    font-size: 0.75rem;
}

.field-hint--recommended {
    color: rgba(71, 234, 237, 0.55);
    font-style: italic;
    text-transform: none;
    letter-spacing: 0;
}

.field-hint--optional {
    color: rgba(186, 201, 201, 0.4);
    font-style: italic;
    text-transform: none;
    letter-spacing: 0;
}

.input-error {
    border-color: rgba(255, 80, 80, 0.7) !important;
    box-shadow: 0 2px 10px rgba(255, 80, 80, 0.15) !important;
}

/* ─── CAROUSEL DOTS ───────────────────────────────────────────────── */
.carousel-dots {
    display: none;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(71, 234, 237, 0.15);
    border: 1px solid rgba(71, 234, 237, 0.4);
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
    padding: 0;
}

.carousel-dot.active {
    background: var(--cyan-neon);
    box-shadow: 0 0 6px var(--cyan-neon);
    border-color: var(--cyan-neon);
}

/* ─── MODAL NEWSLETTER MODE ───────────────────────────────────────── */
.modal--newsletter .form-group-telefono,
.modal--newsletter .form-group-newsletter {
    display: none;
}

/* ─── CHAT SECTION HEADER ─────────────────────────────────────────── */
.conversation-section .section-header {
    margin-bottom: 48px;
}
/* ─── LANGUAGE SWITCH (ES | EN) ───────────────────────────────────── */
.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-heading);
    font-size: clamp(0.7rem, 1vw, 0.8rem);
    letter-spacing: 0.08em;
    flex-shrink: 0;
}

.lang-btn {
    background: none;
    border: none;
    padding: 2px 2px;
    cursor: pointer;
    color: var(--text-secondary);
    font: inherit;
    letter-spacing: inherit;
    opacity: 0.65;
    transition: color 0.2s, opacity 0.2s, text-shadow 0.2s;
}

.lang-btn:hover {
    color: var(--cyan-neon);
    opacity: 1;
}

.lang-btn.active {
    color: var(--cyan-neon);
    opacity: 1;
    text-shadow: 0 0 12px var(--cyan-glow);
    cursor: default;
}

.lang-sep {
    color: rgba(186, 201, 201, 0.35);
}

.footer-lang-link {
    cursor: pointer;
}