/* ==========================================================================
           1. VARIABLES (SISTEMA DE DISEÑO BASADO EN 8PX)
           ========================================================================== */
        :root {
            /* Colores */
            --color-bg: #030414; /* Fondo principal oscuro */
            --color-surface: #11111A; /* Fondo de tarjetas */
            --color-surface-hover: #1A1A26;
            --color-border: rgba(255, 255, 255, 0.08);
            --color-border-glow: rgba(93, 95, 239, 0.3);
            
            --color-text-primary: #FFFFFF;
            --color-text-secondary: #B8B8B8;
            
            --color-primary: #411CFF; /* /Azul principal */
            --color-primary-dark: 12, 42, 131,; /* /Azul interfaces - border-dark*/
            --color-primary-purple: rgb(155, 58, 220); /* Púrpura/ principal */
            --color-primary-teal: #14F1A3;
            --color-accent: #00F0FF; /* Cyan para detalles técnicos */
            --color-success: #10B981; /* Verde para checks */

            --color-border-dark: rgb(12, 42, 131);
            --color-border-dark-opacity-50: rgba(12, 42, 131, var(--opacity-5));
            
            /* Tipografía */
            --font-heading: 'Manrope', sans-serif;
            --font-body: 'Inter', sans-serif;
            
            /* Espaciado (Múltiplos de 8px) */
            --space-1: 8px;
            --space-1-5: 12px;
            --space-2: 16px;
            --space-3: 24px;
            --space-4: 32px;
            --space-5: 40px;
            --space-6: 48px;
            --space-8: 64px;
            --space-10: 80px;
            --space-12: 96px;
            --space-16: 128px;

            --gap-1: 8px;
            --gap-2: 16px;
            --gap-3: 24px;
            --gap-4: 32px;
            --gap-5: 40px;
            --gap-6: 48px;
            --gap-8: 64px;
            --gap-10: 80px;
            --gap-12: 96px;
            --gap-16: 128px;
            
            /* Bordes y Transiciones */
            --radius-sm: 8px;
            --radius-md: 16px;
            --radius-lg: 24px;
            --transition-fast: 0.2s ease;
            --transition-normal: 0.3s ease;

            --opacity-1: 0.1;
            --opacity-2: 0.2;
            --opacity-3: 0.3;
            --opacity-4: 0.4;
            --opacity-5: 0.5;
            --opacity-6: 0.6;
            --opacity-7: 0.7;
            --opacity-8: 0.8;
            --opacity-9: 0.9;
            --opacity-10: 1;
        }

        /* ==========================================================================
           2. RESET Y BASE
           ========================================================================== */
        *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: var(--font-body);
            font-weight: 300;
            background-color: var(--color-bg);
            color: var(--color-text-primary);
            line-height: 1.6;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
        }
        section{overflow-x: hidden;}
        h1, h2, h3, h4 {
            font-family: var(--font-heading);
            font-weight: 300;
            line-height: 1.2;
            letter-spacing: -0.02em;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        ul {
            list-style: none;
        }

        img, svg {
            max-width: 100%;
            display: block;
        }

        .container {
            width: 100%;
            max-width: 1600px;
            margin: 0 auto;
            padding: 0 clamp(1rem, 0.8239rem + 0.5634vw, 1.5rem);
        }

        /* Utilidad de Animación al Scroll */
        .reveal {
            opacity: 0;
            transform: translateY(24px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }
        .reveal.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Efecto Glow de fondo general */
        .bg-glow {
            position: absolute;
            width: 1200px;
            height: 800px;
            background: radial-gradient(circle, rgb(155 58 220 / 55%) 0%, rgb(3 4 20 / 52%) 50%);
            border-radius: 50%;
            z-index: -1;
            pointer-events: none;
            filter: blur(64px);
        }

        /* ==========================================================================
           3. COMPONENTES (BEM)
           ========================================================================== */
        
        /* --- Botones --- */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: var(--space-2) var(--space-3);
            font-size: .875rem;
            font-family: var(--font-body);
            font-weight: 500;
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: var(--transition-fast);
            border: none;
            text-align: center;
        }

        .btn--primary {
            background-color: var(--color-primary);
            color: #FFF;
            box-shadow: 0 4px 24px #000000;
        }
        .btn--primary-cta {
            background: linear-gradient(to right, var(--color-primary), var(--color-primary-purple));
            color: #FFF;
            box-shadow: 0 8px 32px rgba(155, 6, 255, 0.4);
        }

        .btn--primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 32px rgb(1 4 233 / 60%);
        }

        .btn--secondary {
            background-color: transparent;
            color: var(--color-text-primary);
            border-color: var(--color-border);
        }

        .btn--secondary:hover {
            background-color: var(--color-surface);
            border-color: var(--color-primary);
        }

        .btn--glow {
            border: 1px solid rgba(0, 240, 255, 0.3);
            color: var(--color-accent);
        }
        .btn--glow:hover {
            background-color: rgba(0, 240, 255, 0.1);
        }

        /* --- Etiquetas / Tags --- */
        .brand{
            color: var(--color-primary-teal);
            font-weight: 600;
        }
        .border-l{border-left: 1px solid var(--color-border-dark);}
        .border-r{border-right: 1px solid var(--color-border-dark);}
        .border-t{border-top: 1px solid var(--color-border-dark);}
        .border-b{border-bottom: 1px solid var(--color-border-dark);}

        .p-1{padding: var(--space-1);}
        .p-2{padding: var(--space-2);}
        .p-3{padding: var(--space-3);}
        .p-4{padding: var(--space-4);}
        .p-5{padding: var(--space-5);}
        .p-6{padding: var(--space-6);}
        .p-7{padding: var(--space-7);}
        .p-8{padding: var(--space-8);}
        .p-9{padding: var(--space-9);}
        .p-10{padding: var(--space-10);}
        .p-11{padding: var(--space-11);}
        .p-12{padding: var(--space-12);}

        .p-l{padding-left: var(--space-3);}
        .p-r{padding-right: var(--space-3);}
        .p-t{padding-top: var(--space-3);}
        .pt-1{padding-top: var(--space-1);}
        .pt-2{padding-top: var(--space-2);}
        .pt-3{padding-top: var(--space-3);}
        .pt-4{padding-top: var(--space-4);}
        .pt-5{padding-top: var(--space-5);}
        .pt-6{padding-top: var(--space-6);}
        .pt-7{padding-top: var(--space-7);}
        .pt-8{padding-top: var(--space-8);}
        .pt-9{padding-top: var(--space-9);}
        .pt-10{padding-top: var(--space-10);}
        .pt-11{padding-top: var(--space-11);}
        .pt-12{padding-top: var(--space-12);}
        
        .p-b{padding-bottom: var(--space-3);}
        .pb-1{padding-bottom: var(--space-1);}
        .pb-2{padding-bottom: var(--space-2);}
        .pb-3{padding-bottom: var(--space-3);}
        .pb-4{padding-bottom: var(--space-4);}
        .pb-5{padding-bottom: var(--space-5);}
        .pb-6{padding-bottom: var(--space-6);}
        .pb-7{padding-bottom: var(--space-7);}
        .pb-8{padding-bottom: var(--space-8);}
        .pb-9{padding-bottom: var(--space-9);}
        .pb-10{padding-bottom: var(--space-10);}
        .pb-11{padding-bottom: var(--space-11);}
        .pb-12{padding-bottom: var(--space-12);}

        .gap-1{gap: var(--gap-1);}
        .gap-2{gap: var(--gap-2);}
        .gap-3{gap: var(--gap-3);}
        .gap-4{gap: var(--gap-4);}
        .gap-5{gap: var(--gap-5);}
        .gap-6{gap: var(--gap-6);}
        .gap-8{gap: var(--gap-8);}
        .gap-10{gap: var(--gap-10);}
        .gap-12{gap: var(--gap-12);}
        .gap-16{gap: var(--gap-16);}


        .tag {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: var(--space-1) var(--space-1-5);
            background: rgba(155, 58, 220, var(--opacity-3));
            color: var(--color-text-primary);
            border-radius: 20px;
            font-size: 0.55rem;
            line-height: 1.5;
            font-weight: 400;
            text-transform: uppercase;
            margin-bottom: var(--space-2);
            border: 1px solid var(--color-primary-purple);
        }
        .growth-card__pulse{
            position: relative;
            display: flex;
            height: 8px;
            width: 8px;
        }
        .growth-card__pulse-ring{
            position: absolute;
            display: inline-flex;
            height: 100%;
            width: 100%;
            border-radius: 50%;
            background-color: var(--color-primary-teal);
            opacity: 0.75;
            animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
        }
        .growth-card__pulse-dot{
            position: relative;
            display: inline-flex;
            border-radius: 50%;
            height: 8px;
            width: 8px;
            background-color: var(--color-primary-teal);
            /* animation: pulse-dot 2s ease-out infinite; */
        }
        @keyframes ping {
            75%, 100% {
                transform: scale(2);
                opacity: 0;
            }
        }
        /* ==========================================================================
           4. SECCIONES BEM
           ========================================================================== */

        /* --- Header --- */
        .header {
            position: fixed;
            top: 0;
            width: 100%;
            background: linear-gradient(135deg, #020718 0%, rgba(93, 95, 239, 0.05) 100%);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--color-border-dark-opacity-50);
            z-index: 100;
            box-shadow: 0 4px 52px -8px rgba(155, 6, 255, 0.1);
        }

        .header__nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 80px;
        }

        .header__logo {
            font-family: var(--font-heading);
            font-size: 1.5rem;
            font-weight: 800;
            display: flex;
            align-items: center;
            gap: var(--space-1);
        }
        
        .header__logo-icon {
            color: var(--color-primary);
            font-size: 1.8rem;
        }

        .header__menu {
            display: flex;
            gap: var(--space-4);
        }

        .header__link {
            font-size: 0.9rem;
            color: var(--color-text-secondary);
            transition: var(--transition-fast);
        }

        .header__link:hover {
            color: var(--color-text-primary);
        }

        .header__actions {
            display: flex;
            gap: var(--space-2);
        }

        .header__mobile-toggle {
            display: none;
            background: none;
            border: none;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
        }

        /* --- Hero --- */
        .hero {
            padding-top: calc(80px + var(--space-12));
            padding-bottom: var(--space-12);
            text-align: center;
            position: relative;
            overflow: hidden;
            height: 100vh;
            display: flex;
            align-items: center;
        }

        .hero__title {
font-size: clamp(2.5rem, 6vw, 6.5rem);
    font-weight: 400;
    margin-bottom: var(--space-3);
        }
        
        .hero__title span {
            color: var(--color-primary);
            -webkit-text-fill-color: var(--color-primary);
            background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-purple) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .hero__subtitle {
            font-size: 1.125rem;
            font-weight: 300;
            color: var(--color-text-secondary);
            max-width: 800px;
            margin: 0 auto var(--space-6);
        }

        .hero__actions {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--space-2);
        }

        .hero__note {
            font-size: 0.875rem;
            color: var(--color-text-secondary);
        }

        /* Animación SVG Hero */
        .hero__graphic {
            margin-top: var(--space-10);
            position: relative;
            height: 300px;
            display: flex;
            justify-content: center;
        }

        .svg-node { animation: pulse 3s infinite alternate ease-in-out; }
        .svg-path {
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
            animation: drawPath 4s forwards ease-in-out infinite alternate;
        }
        .svg-float { animation: float 6s infinite ease-in-out; }

        @keyframes pulse {
            0% { filter: drop-shadow(0 0 5px var(--color-primary)); }
            100% { filter: drop-shadow(0 0 20px var(--color-accent)); }
        }
        @keyframes drawPath {
            to { stroke-dashoffset: 0; }
        }
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-15px); }
        }

        /* --- Section Defaults --- */
        .section {
            padding: var(--space-12) 0;
            position: relative;
        }

        .section__title {
            font-size: clamp(2rem, 3vw, 3rem);
            margin-bottom: var(--space-3);
        }
        .section__title span {
            color: var(--color-primary);
        }

        .section__desc {
            font-size: 1rem;
            color: var(--color-text-secondary);
            /* max-width: 700px; */
            margin: 0 auto;
        }

        /* --- Value Proposition --- */

        .value-card {
            border-bottom: 1px solid var(--color-border-glow);
            padding: var(--space-3) var(--space-1);
            transition: var(--transition-normal);
        }

        .value-card:hover {
            border-color: var(--color-border-dark);
            transform: translateY(-4px);
        }

        .value-card__icon {
            width: 48px;
            height: 48px;
            background: rgba(93, 95, 239, 0.1);
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: var(--space-3);
            color: var(--color-primary);
        }

        .value-card__title {
            font-size: 1.25rem;
            margin-bottom: var(--space-2);
        }

        .value-card__text {
            color: var(--color-text-secondary);
            font-size: 0.95rem;
        }

        /* --- Features --- */
        .features__grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: var(--space-4);
        }

        .feature-col {
            /* background: linear-gradient(180deg, var(--color-surface) 0%, rgba(17, 17, 26, 0.4) 100%);
            border: 1px solid var(--color-border); */
            background: linear-gradient(45deg, #030414 0%, #020714 50%, #050b1e 100%);
            border: 1px solid #0c2a835e;
            border-radius: var(--radius-lg);
            padding: var(--space-5);
            position: relative;
            overflow: hidden;
        }

        .feature-col::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; height: 2px;
            background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
            opacity: 0;
            transition: opacity var(--transition-normal);
        }
        .feature-col:hover::before { opacity: 1; }

        .feature-col__subtitle {
            color: var(--color-primary);
            font-size: 0.875rem;
            font-weight: 600;
            margin-bottom: var(--space-1);
            font-family: var(--font-body);
        }

        .feature-col__title {
            font-size: 1.5rem;
            margin-bottom: var(--space-4);
        }

        .feature-list {
            display: flex;
            flex-direction: column;
            gap: var(--space-2);
        }

        .feature-list__item {
            display: flex;
            align-items: center;
            gap: var(--space-1);
            color: var(--color-text-secondary);
            font-size: 0.95rem;
        }

        .feature-list__icon {
            position: relative;
            width: 8px;
            height: 8px;
            flex-shrink: 0;
            background-color: var(--color-primary-teal);
            border-radius: 50%;
            margin-right: .45rem;
        }
        .feature-list__icon::after {
    content: '';
            position: absolute;
            inset: 0;
            background-color: var(--color-primary-teal);
            border-radius: 50%;
            animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
        }

        /* --- Blueprints (Use Cases) --- */
        .blueprints__list {
            display: flex;
            flex-direction: column;
            gap: var(--space-6);
        }

        .blueprint-card {
            display: flex;
            background: var(--color-surface);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            overflow: hidden;
            align-items: center;
        }

        .blueprint-card:nth-child(even) {
            flex-direction: row-reverse;
        }

        .blueprint-card__visual {
            flex: 1;
            padding: var(--space-6);
            background: rgba(6, 6, 10, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            border-right: 1px solid var(--color-border);
            min-height: 300px;
            position: relative;
        }

        .blueprint-card:nth-child(even) .blueprint-card__visual {
            border-right: none;
            border-left: 1px solid var(--color-border);
        }

        .blueprint-card__content {
            flex: 1;
            padding: var(--space-6);
        }

        .blueprint-card__tag {
            font-family: var(--font-heading);
            font-size: 3rem;
            color: rgba(255,255,255,0.05);
            position: absolute;
            top: var(--space-2);
            left: var(--space-3);
            font-weight: 800;
        }

        .blueprint-card__title {
            font-size: 1.75rem;
            margin-bottom: var(--space-2);
        }

        .blueprint-card__flow {
            color: var(--color-text-secondary);
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: var(--space-1);
            font-size: 0.95rem;
        }

        .blueprint-card__arrow {
            color: var(--color-primary);
        }

        /* --- Security --- */
        .security-box {
            padding: clamp(2rem, -0.7606rem + 5.6338vw, 6rem);
            margin: 0 auto;
            background: linear-gradient(135deg, #020718 0%, rgba(93, 95, 239, 0.05) 100%);
            border: 1px solid var(--color-border-dark);
            border-radius: var(--radius-lg);
        }
         .security-box > .container{padding: 0;}

        .security-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: var(--space-3);
            margin: var(--space-6) 0;
            text-align: left;
        }

        .security-list__item {
            background: rgba(0,0,0,0.2);
            padding: var(--space-2) var(--space-3);
            border-radius: var(--radius-sm);
            border: 1px solid var(--color-border);
            display: flex;
            align-items: center;
            gap: var(--space-2);
        }
        
        .security-list__icon {
            color: var(--color-success);
        }

        /* --- Comparison Table --- */
        .comparison__wrapper {
            overflow-x: auto;
            background: #020718;
            border: 1px solid var(--color-border-dark);
            border-radius: var(--radius-lg);
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
        }
        .comparison__wrapper__icon {
                width: 40px;
                height: 40px;
                background: rgba(93, 95, 239, 0.1);
                border-radius: var(--radius-sm);
                display: flex;
                align-items: center;
                justify-content: center;
                }
        .comparison__wrapper__icon svg {
            width: 16px;
            height: 16px;
            color: #EF4444;
        }
        .comparison__wrapper__icon .icon-warning {
            width: 16px;
            height: 16px;
            color: #F59E0B;
        }
        .comparison__wrapper__icon .icon-check {
            width: 16px;
            height: 16px;
            color: var(--color-primary-teal);
        }

        .table {
            width: 100%;
            border-collapse: collapse;
            text-align: left;
            min-width: 800px;
        }

        .table th, .table td {
            padding: var(--space-3) var(--space-4);
            border-bottom: 1px solid var(--color-border-dark-opacity-50);
            font-size: .85rem;
            height: 98px;
        }

        .table th {
            font-family: var(--font-heading);
            font-weight: 700;
            color: var(--color-text-secondary);
            background: rgba(0,0,0,0.2);            
            vertical-align: middle;
        }
        .table th:not(:nth-last-child(1)) {
            border-left: 1px solid var(--color-border-dark-opacity-50);
        }

        .table th.highlight {
            color: var(--color-primary);
            background: rgba(93, 95, 239, 0.1);
        }

        .table td.highlight {
            background: rgba(93, 95, 239, 0.05);
            font-weight: 300;
            display: flex;
            align-items: center;
            gap: var(--gap-1);
        }

        .icon-check { color: var(--color-success); font-weight: bold; }
        .icon-cross { color: #EF4444; font-weight: bold; }
        .icon-warn { color: #F59E0B; font-weight: bold; }

        /* --- Pricing --- */
        .pricing__grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: var(--space-4);
        }

        .pricing-card {
            background: #020718;
            border: 1px solid var(--color-border-dark);
            border-radius: var(--radius-lg);
            padding: var(--space-5);
            display: flex;
            flex-direction: column;
            transition: var(--transition-normal);
        }

        .pricing-card--popular {
            border-color: var(--color-primary);
            transform: scale(1.05);
            box-shadow: 0 0 30px rgba(93, 95, 239, 0.15);
        }

        .pricing-card__name {
            font-size: 1rem;
            /* margin-bottom: var(--space-1); */
        }

        .pricing-card__price {
            font-family: var(--font-heading);
            font-size: 3rem;
            font-weight: 300;
            margin-bottom: var(--space-4);
            color: var(--color-primary);
        }

        .pricing-card__price span {
            font-size: 1rem;
        }

        .pricing-card__features {
            margin-bottom: var(--space-5);
            flex-grow: 1;
        }

        .pricing-card__btn {
            width: 100%;
        }

        /* --- CTA Final --- */
        .cta-final {
            text-align: center;
            background: radial-gradient(ellipse at center, rgba(93,95,239,0.2) 0%, rgba(6,6,10,1) 70%);
            padding: var(--space-16) 0;
            border-top: 1px solid var(--color-border);
        }

        /* --- Footer --- */
        .footer {
            border-top: 1px solid var(--color-border);
            padding: var(--space-8) 0 var(--space-4);
            background: var(--color-bg);
        }

        .footer__top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--space-6);
            flex-wrap: wrap;
            gap: var(--space-4);
        }

        .footer__links {
            display: flex;
            gap: var(--space-4);
        }

        .footer__link {
            color: var(--color-text-secondary);
            font-size: 0.9rem;
        }
        .footer__link:hover {
            color: var(--color-primary);
        }

        .footer__bottom {
            text-align: center;
            color: var(--color-text-secondary);
            font-size: 0.8rem;
            border-top: 1px solid var(--color-border);
            padding-top: var(--space-4);
        }
        /* ==========================================================================
           5. GRID
           ========================================================================== */
        .grid__container{display: grid; grid-template-columns: 1fr ;gap: 1.5rem;}
            .col-span-1{grid-column: span 6/ span 6} 
            .col-span-2{grid-column: span 6/ span 6} 
            .col-span-3{grid-column: span 6/ span 6}  
            .col-span-4{grid-column: span 6/ span 6}
            .col-span-5{grid-column: span 6/ span 6}
            .col-span-6{grid-column: span 6/ span 6}

        @media (min-width: 768px){
            .grid__container {grid-template-columns: repeat(6, minmax(0, 1fr));}
            .col-span-1{grid-column: span 1 / span 1;} 
            .col-span-2{grid-column: span 2 / span 2;} 
            .col-span-3{grid-column: span 3 / span 3;}  
            .col-span-4{grid-column: span 4 / span 4;}
            .col-span-5{grid-column: span 5 / span 5;}
            .col-span-6{grid-column: span 6 / span 6;}
        }
        .d-flex{display: flex;}
        .flex-col{flex-direction: column;}
        .justify-center{justify-content: center;}
        .justify-between{justify-content: space-between;}
        .justify-start{justify-content: start;}
        .justify-end{justify-content: end;}
        .justify-around{justify-content:space-around;}
        .justify-evenly{justify-content:space-evenly;}
        .items-center{align-items: center;}
        .items-start{align-items: start;}
        .items-end{align-items: end;}

        .row-gap{row-gap: 2.5rem;}

        .text-center{text-align: center;}
        /* ==========================================================================
           6. COLORS
           ========================================================================== */
            .color-teal{
                color: var(--color-primary-teal);
            }
        /* ==========================================================================
           7. MEDIA QUERIES (Responsive)
           ========================================================================== */
        @media (max-width: 992px) {
            .features__grid { grid-template-columns: 1fr; }
            .blueprint-card, .blueprint-card:nth-child(even) { flex-direction: column; }
            .blueprint-card__visual { border-right: none; border-bottom: 1px solid var(--color-border); min-height: 200px; }
            .pricing-card--popular { transform: scale(1); }
        }

        @media (max-width: 1024px) {
            .header__menu, .header__actions .btn:not(.header__mobile-toggle) { display: none; }
            .header__mobile-toggle { display: block; }
            .header__menu.is-active {
                display: flex;
                flex-direction: column;
                position: absolute;
                top: 80px;
                left: 0;
                width: 100%;
                background: var(--color-surface);
                padding: var(--space-4);
                border-bottom: 1px solid var(--color-border);
            }
            .hero__title { font-size: 2.2rem; }
            .hero__actions { flex-direction: column; width: 100%; }
            .hero__actions .btn { width: 100%; }
            .justify-center-sm{justify-content: center;}
        }