/* ===== TOKENS ===== */
        :root {
            --color-bg: #0D0D0D;
            --color-bg-alt: #1D1D1B;
            --color-bg-card: #111111;
            --color-surface: rgba(255, 255, 255, 0.05);
            --color-border: rgba(255, 255, 255, 0.07);
            --color-red: #C1121F;
            --color-red-dark: #A4161A;
            --color-red-glow: rgba(193, 18, 31, 0.35);
            --color-white: #FFFFFF;
            --color-muted: #6B7280;
            --color-subtle: rgba(255, 255, 255, 0.06);
            --font-display: 'Anton', sans-serif;
            --font-body: 'Inter', sans-serif;
        }

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

        .font-display {
            text-transform: uppercase !important;
            letter-spacing: 0 !important;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            background-color: var(--color-bg);
            color: #E5E7EB;
            font-family: var(--font-body);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        ::selection {
            background: var(--color-red);
            color: #fff;
        }

        /* ===== BACKGROUND FX ===== */
        body::before {
            content: '';
            position: fixed;
            inset: 0;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
            opacity: 0.8;
            pointer-events: none;
            z-index: 0;
        }

        .bg-grid-pattern {
            background-image:
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
        }

        .orb {
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
            filter: blur(100px);
            opacity: 0;
            animation: orbFloat 8s ease-in-out infinite;
        }

        .orb-red {
            background: radial-gradient(circle, rgba(193, 18, 31, 0.4), transparent 70%);
        }

        .orb-dark {
            background: radial-gradient(circle, rgba(80, 10, 10, 0.3), transparent 70%);
        }

        @keyframes orbFloat {
            0% {
                opacity: 0.15;
                transform: translateY(0px) scale(1);
            }

            50% {
                opacity: 0.35;
                transform: translateY(-30px) scale(1.05);
            }

            100% {
                opacity: 0.15;
                transform: translateY(0px) scale(1);
            }
        }

        .scanline-anim {
            position: absolute;
            inset: 0;
            background: repeating-linear-gradient(0deg,
                    transparent,
                    transparent 2px,
                    rgba(193, 18, 31, 0.02) 2px,
                    rgba(193, 18, 31, 0.02) 4px);
            pointer-events: none;
            animation: scanlineMove 6s linear infinite;
        }

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

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

        /* ===== TEXT EFFECTS ===== */
        .text-glow {
            text-shadow: 0 0 30px rgba(255, 255, 255, 0.1), 0 0 60px rgba(193, 18, 31, 0.1);
        }

        .text-red-glow {
            text-shadow: 0 0 20px rgba(193, 18, 31, 0.5);
        }

        /* ===== BUTTONS ===== */
        .btn-primary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: var(--color-red);
            color: #fff;
            font-family: var(--font-display);
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            padding: 1rem 2rem;
            border: none;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
        }

        .btn-primary::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s ease;
        }

        .btn-primary:hover::before {
            left: 100%;
        }

        .btn-primary:hover {
            background: var(--color-red-dark);
            box-shadow: 0 0 25px var(--color-red-glow);
            transform: translateY(-2px);
        }

        .btn-primary:active {
            transform: translateY(0) scale(0.97);
        }

        .btn-outline {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            color: #fff;
            font-family: var(--font-display);
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            padding: 1rem 2rem;
            border: 1px solid rgba(255, 255, 255, 0.15);
            cursor: pointer;
            transition: background 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
        }

        .btn-outline:hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(255, 255, 255, 0.4);
            transform: translateY(-2px);
        }

        .btn-ghost {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: transparent;
            color: #9CA3AF;
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            padding: 0;
            border: none;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            padding-bottom: 2px;
            cursor: pointer;
            transition: color 0.25s, border-color 0.25s;
        }

        .btn-ghost:hover {
            color: #fff;
            border-bottom-color: #fff;
        }

        .btn-skewed {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: var(--color-red);
            color: #fff;
            font-family: var(--font-display);
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            padding: 1rem 2.5rem;
            transform: skewX(-12deg);
            border: none;
            cursor: pointer;
            transition: background 0.3s, box-shadow 0.3s, transform 0.2s;
        }

        .btn-skewed span {
            display: block;
            transform: skewX(12deg);
        }

        .btn-skewed:hover {
            background: var(--color-red-dark);
            box-shadow: 0 8px 30px var(--color-red-glow);
        }

        .btn-skewed:active {
            transform: skewX(-12deg) scale(0.97);
        }

        .btn-disabled {
            background: rgba(255, 255, 255, 0.04) !important;
            color: rgba(255, 255, 255, 0.2) !important;
            border-color: rgba(255, 255, 255, 0.06) !important;
            pointer-events: none;
        }

        /* THE SUPER BUTTON (FORA DA CURVA) */
        @keyframes continuousPulse {
            0% {
                box-shadow: 0 0 0 0 rgba(193, 18, 31, 0.6);
            }

            70% {
                box-shadow: 0 0 0 10px rgba(193, 18, 31, 0);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(193, 18, 31, 0);
            }
        }

        .btn-super {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            color: #fff;
            font-family: var(--font-display);
            font-size: 1.25rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            padding: 1.25rem 3.5rem;
            cursor: pointer;
            overflow: hidden;
            border: 2px solid var(--color-red);
            border-radius: 4px;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            animation: continuousPulse 2s infinite;
        }

        .btn-super .fill {
            position: absolute;
            inset: 0;
            background: var(--color-red);
            transform: scaleY(0);
            transform-origin: bottom;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            z-index: 1;
        }

        .btn-super .text {
            position: relative;
            z-index: 2;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), text-shadow 0.4s;
        }

        .btn-super::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 50%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
            transform: skewX(-20deg);
            z-index: 3;
            transition: none;
        }

        .btn-super:hover {
            animation: none;
            box-shadow: 0 15px 30px rgba(193, 18, 31, 0.4), 0 0 60px rgba(193, 18, 31, 0.2);
            transform: translateY(-8px) scale(1.04);
            border-color: var(--color-red-dark);
        }

        .btn-super:hover .fill {
            transform: scaleY(1);
        }

        .btn-super:hover .text {
            text-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
        }

        .btn-super:hover::after {
            animation: shineSweep 0.8s ease-out forwards;
        }

        @keyframes shineSweep {
            0% {
                left: -100%;
            }

            100% {
                left: 200%;
            }
        }

        /* ===== INPUTS ===== */
        .input-field {
            width: 100%;
            background: var(--color-surface);
            border: 1px solid var(--color-border);
            padding: 0.75rem 1rem;
            font-size: 0.875rem;
            color: #fff;
            font-family: var(--font-body);
            transition: border-color 0.25s, box-shadow 0.25s;
            outline: none;
        }

        .input-field:focus {
            border-color: var(--color-red);
            box-shadow: 0 0 0 3px var(--color-red-glow);
        }

        .input-error {
            border-color: #F87171 !important;
            box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.2) !important;
        }

        /* ===== BORDERS & CARDS ===== */
        .card-surface {
            background: var(--color-surface);
            border: 1px solid var(--color-border);
        }

        .card-gradient-border {
            position: relative;
        }

        .card-gradient-border::before {
            content: '';
            position: absolute;
            inset: 0;
            padding: 1px;
            border-radius: inherit;
            background: linear-gradient(135deg, rgba(193, 18, 31, 0.5) 0%, transparent 50%, rgba(255, 255, 255, 0.1) 100%);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
        }

        .card-left-border {
            border-left: 3px solid transparent;
            transition: border-color 0.3s ease, background 0.3s ease;
        }

        .card-left-border:hover {
            border-left-color: var(--color-red);
            background: rgba(255, 255, 255, 0.02);
        }

        .card-hover {
            transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
        }

        .card-hover:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(193, 18, 31, 0.1);
        }

        .img-hover-fx {
            filter: grayscale(100%);
            opacity: 0.7;
            transition: filter 0.7s ease, opacity 0.7s ease, transform 0.7s ease;
        }

        .img-hover-fx:hover,
        .group:hover .img-hover-fx {
            filter: grayscale(0%);
            opacity: 1;
            transform: scale(1.05);
        }

        /* ===== ANIMATIONS ===== */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
        }

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

        .reveal-delay-1 {
            transition-delay: 0.1s;
        }

        .reveal-delay-2 {
            transition-delay: 0.2s;
        }

        .reveal-delay-3 {
            transition-delay: 0.3s;
        }

        @keyframes letterFloat {
            0% {
                transform: translateY(0) rotate(0deg);
                opacity: 0.04;
            }

            50% {
                transform: translateY(-20px) rotate(2deg);
                opacity: 0.08;
            }

            100% {
                transform: translateY(0) rotate(0deg);
                opacity: 0.04;
            }
        }

        @keyframes floatLogo {
            0% {
                transform: translateY(0) scale(1);
                filter: drop-shadow(0 0 30px rgba(193, 18, 31, 0.1));
            }

            50% {
                transform: translateY(-20px) scale(1.02);
                filter: drop-shadow(0 0 60px rgba(193, 18, 31, 0.25));
            }

            100% {
                transform: translateY(0) scale(1);
                filter: drop-shadow(0 0 30px rgba(193, 18, 31, 0.1));
            }
        }

        .anim-logo-float {
            animation: floatLogo 8s ease-in-out infinite;
        }

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

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

        .ticker-track {
            animation: ticker 25s linear infinite;
        }

        @keyframes pulseDot {

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

            50% {
                opacity: 0.5;
                transform: scale(1.4)
            }
        }

        .animate-pulse-dot {
            animation: pulseDot 2s ease-in-out infinite;
        }

        @keyframes spinSlow {
            from {
                transform: rotate(0deg)
            }

            to {
                transform: rotate(360deg)
            }
        }

        /* ===== LAYOUT ===== */
        .container-ds {
            max-width: 80rem;
            margin: 0 auto;
            padding: 0 1.5rem;
        }

        .section-ds {
            padding: 6rem 0;
            border-bottom: 1px solid var(--color-border);
            position: relative;
            z-index: 10;
        }

        .section-label {
            display: flex;
            align-items: center;
            gap: 1rem;
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--color-red);
            margin-bottom: 4rem;
        }

        .section-label-line {
            width: 3rem;
            height: 1px;
            background: linear-gradient(90deg, var(--color-red), transparent);
        }