@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500;600;700;800&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

    :root {
        --primary: #0b167a;
        --primary-light: #01B4FF;
        --primary-light-strong: #0077b3; /* variante mais escura/saturada, para contraste de texto branco no .btn-solid */
        --bg-dark: #010205;
    }

    body {
        font-family: 'Outfit', sans-serif;
        background-color: var(--bg-dark);
        color: #ffffff;
        overflow-x: hidden;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .font-display { font-family: 'Switzer', sans-serif; }

    ::-webkit-scrollbar { width: 3px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--primary-light); }

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

    .ambient-light {
        position: fixed;
        border-radius: 50%;
        filter: blur(140px);
        z-index: -5;
        animation: morph 20s ease-in-out infinite alternate;
        pointer-events: none;
    }
    .light-1 {
        width: 70vw; height: 70vw;
        background: radial-gradient(circle, rgba(11,22,122,0.25) 0%, transparent 60%);
        top: -20vh; left: -20vw;
    }
    .light-2 {
        width: 60vw; height: 60vw;
        background: radial-gradient(circle, rgba(1,180,255,0.18) 0%, transparent 60%);
        bottom: -10vh; right: -20vw;
        animation-delay: -7s;
    }

    @keyframes morph {
        0% { transform: scale(1) translate(0, 0); }
        33% { transform: scale(1.1) translate(5%, 10%); }
        66% { transform: scale(0.9) translate(-5%, 15%); }
        100% { transform: scale(1.2) translate(-10%, -5%); }
    }

    .glass-card {
        background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.005) 100%);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        border: 1px solid rgba(255,255,255,0.05);
        border-top: 1px solid rgba(255,255,255,0.15);
        border-left: 1px solid rgba(255,255,255,0.15);
        box-shadow: 0 30px 40px -10px rgba(0,0,0,0.5);
        transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        position: relative;
        overflow: hidden;
    }
    .glass-card:hover {
        transform: translateY(-6px);
        border-color: rgba(255,255,255,0.2);
        box-shadow: 0 40px 60px -15px rgba(11,22,122,0.4);
    }
    /* Blur mais leve em telas pequenas: menos custo de composição em aparelhos fracos */
    @media (max-width: 767px) {
        .glass-card {
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
    }

    .text-reveal-container { overflow: hidden; display: inline-block; vertical-align: bottom; }
    /* O h1 usa leading-[0.95]: line-box mais apertado que o normal da fonte,
       o que corta descendentes (ç, g, j, p, q, y) contra o overflow:hidden
       do container de reveal. Folga extra só na caixa de clipe, sem tocar
       no line-height do h1 nem no espaçamento visual entre linhas. */
    h1 .text-reveal-container { padding-bottom: 0.16em; }
    .text-reveal {
        display: inline-block;
        transform: translateY(105%);
        transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
        transform-origin: bottom;
    }
    .is-visible .text-reveal { transform: translateY(0); }

    .text-glow { text-shadow: 0 0 12px rgba(255,255,255,0.35); }

    .stagger-parent .stagger-child {
        opacity: 0;
        transform: translateY(40px) scale(0.98);
        filter: blur(10px);
        transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .stagger-parent.is-visible .stagger-child {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }

    .animated-line {
        height: 1px; width: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
        background-size: 200% 100%;
        animation: scanline 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }
    @keyframes scanline {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }

    .mask-reveal { clip-path: inset(100% 0 0 0); transition: clip-path 1.5s cubic-bezier(0.77, 0, 0.175, 1); }
    .is-visible.mask-reveal { clip-path: inset(0 0 0 0); }

    .btn-fluid, .btn-solid {
        position: relative; overflow: hidden; 
        background: linear-gradient(135deg, #0038ff 0%, #009dff 100%);
        border: none; color: white;
        padding: 1.1rem 2.5rem; border-radius: 100px;
        font-family: 'Space Grotesk', sans-serif; font-weight: 600;
        text-transform: uppercase; letter-spacing: 1.5px; font-size: 0.8rem;
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); z-index: 1;
        display: inline-flex; align-items: center; justify-content: center; gap: 12px;
        cursor: pointer; box-shadow: 0 4px 15px rgba(0, 85, 255, 0.3);
    }
    .btn-fluid:hover, .btn-solid:hover { 
        color: #ffffff; transform: translateY(-3px); 
        box-shadow: 0 12px 35px rgba(0, 157, 255, 0.6); 
    }

    .faq-item[open] summary .faq-icon { transform: rotate(45deg); }
    .faq-item summary { list-style: none; cursor: pointer; }
    .faq-item summary::-webkit-details-marker { display: none; }

    #lead-modal { transition: opacity 0.4s ease; }
    #lead-modal.hidden-modal { opacity: 0; pointer-events: none; }
    #lead-modal:not(.hidden-modal) { opacity: 1; pointer-events: auto; }

    .form-input {
        width: 100%; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.15);
        border-radius: 12px; padding: 0.9rem 1.1rem; color: white; font-family: 'Outfit', sans-serif;
        transition: border-color 0.3s ease;
    }
    .form-input:focus { outline: none; border-color: var(--primary-light); }
    .form-input option { background: #010205; color: white; }

    /* ============ Hero: mapa do Brasil (wireframe/glow) ============ */
    .hero-map {
        position: absolute;
        inset: 0;
        z-index: 1;
        opacity: 0.85;
        pointer-events: none;
        mask-image: radial-gradient(ellipse 80% 75% at 62% 45%, #000 55%, transparent 92%);
        -webkit-mask-image: radial-gradient(ellipse 80% 75% at 62% 45%, #000 55%, transparent 92%);
    }
    .hero-map svg { width: 100%; height: 100%; }

    .map-outline {
        fill: url(#mapFill);
        stroke: rgba(143,177,255,0.4);
        stroke-width: 2.4;
        stroke-linejoin: round;
    }
    .map-outline-glow {
        fill: none;
        stroke: rgba(1,180,255,0.5);
        stroke-width: 4;
        opacity: 0.6;
    }
    .map-lines line {
        stroke: rgba(200,215,255,0.16);
        stroke-width: 2;
    }
    .map-dot { fill: #d7e2ff; }
    .map-dot-capital { fill: #ffffff; }
    .map-dot-glow {
        transform-box: fill-box;
        transform-origin: center;
        animation: dotGlowPulse 3.4s ease-in-out infinite;
    }
    @keyframes dotGlowPulse {
        0%, 100% { transform: scale(0.8); opacity: 0.45; }
        50% { transform: scale(1.2); opacity: 1; }
    }

    @media (max-width: 767px) {
        .hero-map { opacity: 0.5; }
    }
    @media (prefers-reduced-motion: reduce) {
        .map-dot-glow { animation: none; }
    }

    /* ============ Hero: cards flutuantes ============ */
    .hero-float-cards {
        position: relative;
        z-index: 5;
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        max-width: 26rem;
        margin: 2.5rem 0 0;
    }
    .hero-float-card {
        flex: 1 1 8.5rem;
        min-width: 8.5rem;
        animation: heroCardFloat 7s ease-in-out infinite;
        will-change: transform, translate;
    }
    .hero-float-card-1 { animation-delay: 0s; }
    .hero-float-card-2 { animation-delay: -3.5s; }
    .hero-float-card-3 { animation-delay: -1.8s; }
    @keyframes heroCardFloat {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-12px); }
    }

    /* 768–1279px: o título em text-8xl ocupa quase toda a largura do container,
       então os cards ficam em fileira abaixo do texto (sem sobrepor o headline). */
    @media (min-width: 768px) {
        .hero-float-cards { max-width: 36rem; flex-wrap: nowrap; }
    }

    /* A partir de 1440px há folga suficiente ao lado do headline
       para os cards flutuarem soltos, assimétricos, sobre o mapa. */
    @media (min-width: 1440px) {
        .hero-float-cards {
            position: absolute;
            inset: 0;
            display: block;
            max-width: none;
            margin: 0;
            pointer-events: none;
        }
        .hero-float-card {
            position: absolute;
            width: 11.5rem;
            min-width: 0;
            pointer-events: auto;
        }
        .hero-float-card-1 { top: 15%; right: max(4%, calc(50% - 620px)); }
        .hero-float-card-2 { top: 35%; right: max(7%, calc(50% - 560px)); }
        .hero-float-card-3 { top: 55%; right: max(4%, calc(50% - 620px)); }
    }

    @media (max-width: 767px) {
        .hero-float-card { animation: none; }
    }
    @media (prefers-reduced-motion: reduce) {
        .hero-float-card { animation: none; }
    }

    /* ============ Suporte da rede: carrossel mobile ============ */
    @media (max-width: 767px) {
        .suporte-carousel {
            display: flex !important;
            grid-template-columns: none !important;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
            gap: 1rem !important;
            scrollbar-width: none;
            padding-bottom: 0.25rem;
            margin: 0 -1.5rem;
            padding-left: 1.5rem;
            padding-right: 1.5rem;
        }
        .suporte-carousel::-webkit-scrollbar { display: none; }
        .suporte-carousel > .suporte-card {
            flex: 0 0 80%;
            scroll-snap-align: center;
        }
    }

    /* ============ Depoimentos: thumbnail + play ============ */
    .video-embed { position: relative; }
    .video-thumb {
        position: relative; display: block; width: 100%; height: 100%;
        cursor: pointer; border: none; padding: 0; background: #000;
    }
    .video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .video-thumb::after {
        content: ""; position: absolute; inset: 0;
        background: linear-gradient(180deg, rgba(1,2,5,0.1), rgba(1,2,5,0.6));
    }
    .video-play-btn {
        position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
        width: 60px; height: 60px; border-radius: 50%;
        background: rgba(255,255,255,0.12);
        backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255,255,255,0.3);
        display: flex; align-items: center; justify-content: center;
        color: #fff; z-index: 2;
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .video-play-btn i { margin-left: 3px; }
    .video-thumb:hover .video-play-btn {
        background: var(--primary-light);
        transform: translate(-50%, -50%) scale(1.1);
        box-shadow: 0 0 30px rgba(1,180,255,0.6);
    }

    /* ============ Depoimentos: carrossel (todos os cards em 9:16) ============ */
    .depoimentos-carousel { position: relative; }

    .depoimentos-track {
        display: flex;
        align-items: stretch;
        gap: 1rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin: 0 -1.5rem;
        padding: 0 1.5rem;
    }
    .depoimentos-track::-webkit-scrollbar { display: none; }

    /* Todos os 4 cards com o mesmo tamanho: largura fixa e aspect-ratio 9:16
       determina a altura, garantindo dimensões idênticas entre eles. */
    .depoimentos-track .video-embed {
        flex: 0 0 62%;
        max-width: 240px;
        aspect-ratio: 9 / 16;
        scroll-snap-align: center;
    }

    @media (min-width: 768px) {
        .depoimentos-track {
            gap: 1.5rem;
            margin: 0;
            padding: 0;
        }
        .depoimentos-track .video-embed {
            flex: 0 0 320px;
            max-width: none;
            scroll-snap-align: start;
        }
    }

    .depoimentos-nav {
        display: none;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 44px; height: 44px;
        border-radius: 50%;
        background: rgba(255,255,255,0.06);
        border: 1px solid rgba(255,255,255,0.15);
        align-items: center; justify-content: center;
        color: #fff;
        cursor: pointer;
        z-index: 5;
        backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
        transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
    }
    .depoimentos-nav:hover {
        background: var(--primary-light-strong);
        border-color: transparent;
        transform: translateY(-50%) scale(1.08);
    }
    .depoimentos-prev { left: -22px; }
    .depoimentos-next { right: -22px; }
    @media (min-width: 768px) {
        .depoimentos-nav { display: flex; }
    }

    .depoimentos-dots {
        display: flex;
        justify-content: center;
        gap: 0.5rem;
        margin-top: 1.5rem;
    }
    .depoimentos-dot {
        width: 8px; height: 8px; border-radius: 50%;
        background: rgba(255,255,255,0.25);
        border: none; padding: 0; cursor: pointer;
        transition: background 0.3s ease, transform 0.3s ease;
    }
    .depoimentos-dot.is-active {
        background: var(--primary-light);
        transform: scale(1.3);
    }

    /* ============ CTA sticky mobile ============ */
    .mobile-sticky-cta {
        background: rgba(1,2,5,0.9);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        padding: 0.75rem 1.25rem calc(0.75rem + env(safe-area-inset-bottom));
    }
    @media (max-width: 767px) {
        /* Espaçamento mais compacto antes dos cards, para não ficarem atrás da barra sticky */
        .hero-float-cards { margin-top: 1rem; }
    }
    @media (max-width: 767px) {
        body { padding-bottom: 82px; }
    }

    /* ============ Modal fullscreen mobile ============ */
    @media (max-width: 767px) {
        #lead-modal .form-input {
            padding: 1.1rem 1.2rem;
            font-size: 1rem;
        }
        #lead-modal .btn-solid {
            padding: 1.2rem 2rem;
            font-size: 0.85rem;
        }
        #lead-modal h3 { font-size: 1.75rem; }
    }

    /* ============ Ecossistema: bento grid + carrossel horizontal ============ */
    .ecossistema-carousel { position: relative; }

    .ecossistema-track {
        display: grid;
        grid-auto-flow: column dense;
        grid-template-rows: repeat(2, 140px);
        grid-auto-columns: 140px;
        gap: 1rem;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin: 0 -1.5rem;
        padding: 0 1.5rem 0.5rem;
        cursor: grab;
        -webkit-user-select: none;
        user-select: none;
    }
    .ecossistema-track::-webkit-scrollbar { display: none; }
    .ecossistema-track.is-dragging { cursor: grabbing; scroll-snap-type: none; }

    @media (min-width: 768px) {
        .ecossistema-track {
            grid-template-rows: repeat(2, 220px);
            grid-auto-columns: 220px;
            gap: 1.25rem;
            margin: 0;
            padding: 0 0 0.5rem;
        }
    }

    .eco-shape-small { grid-column: span 1; grid-row: span 1; }
    .eco-shape-wide  { grid-column: span 2; grid-row: span 1; }
    .eco-shape-tall  { grid-column: span 1; grid-row: span 2; }
    .eco-shape-big   { grid-column: span 2; grid-row: span 2; }

    .eco-block {
        position: relative;
        border-radius: 1.25rem;
        overflow: hidden;
        background: #050810;
        border: 1px solid rgba(255,255,255,0.08);
        cursor: pointer;
        scroll-snap-align: start;
        transition: border-color 0.4s ease;
    }
    .eco-block:hover { border-color: rgba(255,255,255,0.18); }
    .eco-block:focus-visible {
        outline: 2px solid var(--primary-light);
        outline-offset: 2px;
    }
    .eco-block::after {
        content: "";
        position: absolute; inset: 0; z-index: 2;
        background: linear-gradient(180deg, rgba(1,2,5,0) 55%, rgba(1,2,5,0.55) 100%);
        pointer-events: none;
    }
    .eco-media {
        object-fit: cover;
        object-position: center;
        transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .eco-block:hover .eco-media { transform: scale(1.06); }
    .eco-video {
        object-fit: cover;
        object-position: center;
    }

    .eco-badge {
        position: absolute; top: 0.6rem; right: 0.6rem; z-index: 3;
        width: 26px; height: 26px; border-radius: 50%;
        background: rgba(1,2,5,0.55);
        backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
        display: flex; align-items: center; justify-content: center;
        color: #fff;
    }

    /* Mini-carrossel interno dos posts com múltiplas imagens */
    .eco-mini-track { position: relative; width: 100%; height: 100%; }
    .eco-mini-slide {
        position: absolute; inset: 0;
        width: 100%; height: 100%;
        opacity: 0;
        transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .eco-mini-slide.is-active { opacity: 1; z-index: 1; }

    /* Post-3 (bloco largo) usa artes verticais com a headline sempre no topo;
       o crop central corta esse texto, então priorizamos o topo da imagem. */
    .eco-block[data-href*="DZm4fDokdBl"] .eco-mini-slide {
        object-position: center top;
    }

    .eco-mini-nav {
        position: absolute; top: 50%; transform: translateY(-50%);
        width: 26px; height: 26px; border-radius: 50%;
        background: rgba(1,2,5,0.55);
        border: 1px solid rgba(255,255,255,0.2);
        backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
        display: flex; align-items: center; justify-content: center;
        color: #fff; z-index: 4;
        opacity: 0;
        transition: opacity 0.3s ease, background 0.3s ease;
        cursor: pointer;
    }
    .eco-mini-carousel:hover .eco-mini-nav,
    .eco-mini-nav:focus-visible {
        opacity: 1;
    }
    .eco-mini-nav:hover { background: var(--primary-light-strong); }
    .eco-mini-prev { left: 0.5rem; }
    .eco-mini-next { right: 0.5rem; }
    @media (hover: none) {
        .eco-mini-nav { opacity: 0.65; }
    }

    .eco-mini-dots {
        position: absolute; bottom: 0.6rem; left: 0; right: 0;
        display: flex; justify-content: center; gap: 0.3rem;
        z-index: 4;
    }
    .eco-mini-dot {
        width: 5px; height: 5px; border-radius: 50%;
        background: rgba(255,255,255,0.4);
        border: none; padding: 0; cursor: pointer;
        transition: background 0.3s ease, transform 0.3s ease;
    }
    .eco-mini-dot.is-active { background: #fff; transform: scale(1.3); }