/* --- 1. BASE DESIGN SYSTEM (GLASSMORPHISM) --- */
        :root {
            /* ── Cores principais (direção MONOCROMÁTICO + POP ELÉTRICO) ── */
            --preto-fundo:       #0a0a0c;   /* preto neutro */
            --branco-texto:      #f5f5f5;   /* branco neutro (não puro) */

            /* ── Aliases semânticos usados no CSS (cor única de destaque: LARANJA ELÉTRICO) ── */
            --primary:           #00b1be;   /* acento elétrico (destaque único) */
            --secondary:         #00b1be;
            --primary-hover:     #22cddb;   /* mais claro (hover) */
            --primary-dark:      #007680;   /* mais escuro (degradê de botão) */
            --gray:              rgba(245,245,245,0.55);
            --white:             #f5f5f5;
            --dark:              #0a0a0c;
            --dark-light:        #18181b;
            --yellow:            #e8a530;   /* apoio (tag "roteirização") */
            --accent:            #00b1be;

            /* ── Surface (sem blur pesado, superfície sólida) ── */
            --glass-bg:          rgba(255, 255, 255, 0.045);
            --glass-border:      rgba(255, 255, 255, 0.12);

            /* ── Tipografia ── */
            --font-heading: 'Unbounded', 'Arial Black', sans-serif;   /* sans geométrica pesada */
            --font-body:    'DM Sans', sans-serif;
            --font-mono:    'JetBrains Mono', monospace;

            /* ── Escala tipográfica (DESIGN.md) ── */
            --fs-1: 0.75rem;   /* etiquetas / mono */
            --fs-2: 0.875rem;  /* legendas */
            --fs-3: 1rem;      /* corpo */
            --fs-4: 1.25rem;   /* subtítulo */
            --fs-5: 2rem;      /* título de categoria */
            --fs-6: 3.5rem;    /* título de seção */
            --fs-7: 4rem;      /* display / hero */

            /* ── Escala de espaçamento (DESIGN.md) ── */
            --space-1: 8px;
            --space-2: 16px;
            --space-3: 24px;
            --space-4: 40px;
            --space-5: 64px;
            --space-6: 96px;

            /* ── Sombras (escuras, difusas, tom quente) ── */
            --shadow-sm: 0 8px 18px -8px rgba(0,0,0,0.55);
            --shadow-md: 0 20px 40px -22px rgba(0,0,0,0.65);
            --shadow-lg: 0 34px 70px -28px rgba(0,0,0,0.85);

            /* ── Transição global ── */
            --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);

            /* ── Radii ── */
            --radius-sm:   8px;
            --radius-md:   16px;
            --radius-lg:   24px;
            --radius-pill: 100px;
        }


        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        html {
            scroll-behavior: smooth;
            scroll-padding-top: 100px;
            overflow-x: hidden;
            width: 100%;
            max-width: 100vw;
        }

        body {
            font-family: var(--font-body);
            font-weight: 400;
            background-color: var(--dark);
            background: radial-gradient(ellipse 800px 600px at 80% 20%, rgba(0,177,190,0.06) 0%, transparent 60%),
                        radial-gradient(ellipse 600px 500px at 10% 80%, rgba(0,177,190,0.05) 0%, transparent 60%),
                        var(--dark);
            color: var(--branco-texto);
            overflow-x: clip;
            width: 100%;
            max-width: 100vw;
            position: relative;
            -webkit-font-smoothing: antialiased;
        }

        /* --- FILM GRAIN OVERLAY (TEXTURA TÁTIL) --- */
        .film-grain {
            position: fixed;
            inset: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 9990;
            opacity: 0.035;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' 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");
        }

        /* --- BACKGROUND 2D GRID SYSTEM (ESTRUTURA EXATA VIDEOFOLIO / SEQUENCE) --- */
        .bg-grid-lines {
            position: fixed;
            inset: 0;
            width: 100%;
            max-width: 1600px;
            margin: 0 auto;
            padding: 0 50px;
            display: flex;
            justify-content: space-between;
            pointer-events: none;
            z-index: 0;
        }

        .bg-grid-lines .grid-line {
            width: 1px;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.08);
            flex-shrink: 0;
        }

        .bg-grid-lines .grid-line.outer {
            background-color: rgba(255, 255, 255, 0.15);
        }

        @media (max-width: 1199px) {
            .bg-grid-lines { max-width: 810px; }
            .bg-grid-lines .grid-line.col-2,
            .bg-grid-lines .grid-line.col-4 {
                display: none;
            }
        }
        @media (max-width: 809px) {
            .bg-grid-lines { max-width: 100%; padding: 0 20px; }
            .bg-grid-lines .grid-line.mid-col {
                display: none;
            }
        }

        /* --- FULL-WIDTH ASYMMETRICAL 2D GRID (5 verticais + 7 horizontais, rolam com a pagina) --- */
        .site-fullwidth-grid {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
            overflow: hidden;
        }

        .site-fullwidth-grid .v-line {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 1px;
            background-color: rgba(255, 255, 255, 0.08);
        }
        .site-fullwidth-grid .v-line.v-1 { left: 4vw; background-color: rgba(255, 255, 255, 0.16); }
        .site-fullwidth-grid .v-line.v-2 { left: 24vw; }
        .site-fullwidth-grid .v-line.v-3 { left: 48vw; }
        .site-fullwidth-grid .v-line.v-4 { left: 74vw; }
        .site-fullwidth-grid .v-line.v-5 { left: 96vw; background-color: rgba(255, 255, 255, 0.16); }

        .site-fullwidth-grid .h-line {
            position: absolute;
            left: 0;
            right: 0;
            height: 1px;
            background-color: rgba(255, 255, 255, 0.07);
        }
        .site-fullwidth-grid .h-line.h-1 { top: 90px; }
        .site-fullwidth-grid .h-line.h-2 { top: 780px; }
        .site-fullwidth-grid .h-line.h-3 { top: 1450px; }
        .site-fullwidth-grid .h-line.h-4 { top: 2200px; }
        .site-fullwidth-grid .h-line.h-5 { top: 3100px; }
        .site-fullwidth-grid .h-line.h-6 { top: 4050px; }
        .site-fullwidth-grid .h-line.h-7 { top: 5200px; }

        @media (max-width: 900px) {
            .site-fullwidth-grid .v-line.v-2,
            .site-fullwidth-grid .v-line.v-4 {
                display: none;
            }
            .site-fullwidth-grid .v-line.v-1 { left: 15px; }
            .site-fullwidth-grid .v-line.v-5 { left: auto; right: 15px; }
        }

        /* Protecao do conteudo: grid fica no fundo (z-index 0), conteudo acima (z-index 2) */
        body {
            position: relative;
            min-height: 100vh;
        }

        main {
            position: relative;
            z-index: 2;
            width: 100%;
            max-width: 100vw;
            overflow-x: hidden;
        }

        section, header, footer {
            position: relative;
            z-index: 2;
        }

        .swiper, .swiper-container {
            overflow: hidden !important;
            max-width: 100vw;
        }

        .swiper-wrapper {
            transform-style: flat !important;
        }

        .depoimentos-section {
            overflow: hidden;
            max-width: 100vw;
            clip-path: inset(0);
        }


        #mobile-keyframes-space {
            overflow: hidden !important;
        }

        /* TIPOGRAFIA GLOBAL */
        h1, h2, h3 {
            font-family: var(--font-heading);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: -0.01em;
            color: var(--branco-texto);
        }

        section { padding: 80px 5%; max-width: 1600px; margin: 0 auto; position: relative; }

        /* --- 2. NAVEGAÇÃO (pílula flutuante + mega-menu Watermelon style) --- */
        header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            width: 100%;
            z-index: 1000;
            padding: 18px 5% 0;
            pointer-events: none;
            display: flex;
            justify-content: center;
        }

        nav {
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1.5rem;
            width: 100%;
            max-width: 1180px;
            margin: 0 auto;
            padding: 7px 10px 7px 20px;
            border-radius: var(--radius-pill);
            background: rgba(16, 17, 20, 0.88);
            border: 1px solid rgba(255, 255, 255, 0.09);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            box-shadow: 0 20px 45px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
            pointer-events: auto;
        }

        .logo-container {
            display: flex;
            align-items: center;
            gap: 0.85rem;
            flex-shrink: 0;
        }

        .logo img {
            height: 36px;
            transition: all 0.3s ease;
        }

        .header-photo {
            height: 34px;
            width: 34px;
            border-radius: 50%;
            border: 1.5px solid rgba(255,255,255,0.15);
            object-fit: cover;
        }

        .nav-links {
            display: flex;
            gap: 0.35rem;
            list-style: none;
            align-items: center;
        }

        .nav-links a, .nav-links .mega-trigger {
            font-family: var(--font-body);
            color: rgba(255, 255, 255, 0.65);
            text-decoration: none;
            font-weight: 500;
            font-size: 13.5px;
            letter-spacing: 0.02em;
            transition: all 0.2s ease;
            white-space: nowrap;
            padding: 8px 15px;
            border-radius: var(--radius-pill);
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: transparent;
            border: none;
            cursor: pointer;
        }

        .nav-links a:hover, .nav-links .mega-trigger:hover {
            color: #ffffff;
            background: rgba(255, 255, 255, 0.07);
        }

        .nav-links .nav-badge {
            background: rgba(0, 177, 190, 0.15);
            color: #22cddb;
            border: 1px solid rgba(0, 177, 190, 0.4);
            border-radius: 100px;
            font-size: 10px;
            font-weight: 700;
            padding: 2px 7px;
            letter-spacing: 0.04em;
            line-height: 1;
            text-transform: uppercase;
        }

        .mega-trigger .chev {
            width: 12px;
            height: 12px;
            transition: transform 0.25s ease;
            opacity: 0.75;
        }

        .mega-trigger[aria-expanded="true"] {
            color: #ffffff;
            background: rgba(255, 255, 255, 0.12);
        }

        .mega-trigger[aria-expanded="true"] .chev {
            transform: rotate(180deg);
            opacity: 1;
        }

        .nav-item {
            position: static;
        }

        /* --- WATERMELON STYLE MEGA-MENU DROPDOWN --- */
        .mega-menu {
            position: absolute;
            top: calc(100% + 14px);
            left: 50%;
            transform: translateX(-50%) translateY(8px);
            width: 100%;
            max-width: 1080px;
            z-index: 100;
            background: #0f1013;
            border: 1px solid rgba(255, 255, 255, 0.09);
            border-radius: 24px;
            box-shadow: 0 30px 80px -10px rgba(0, 0, 0, 0.8), 0 0 1px 1px rgba(255, 255, 255, 0.05);
            padding: 34px 38px;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
        }

        .mega-menu.open {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateX(-50%) translateY(0);
        }

        .mega-grid {
            display: grid;
            grid-template-columns: 1.35fr 1fr 1fr 1.35fr;
            gap: 32px;
        }

        .mega-col:not(:first-child) {
            border-left: 1px solid rgba(255, 255, 255, 0.08);
            padding-left: 32px;
        }

        /* Coluna 1: Flagship Item + Chips */
        .mega-flagship-icon {
            width: 38px;
            height: 38px;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.09);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #d0d6e0;
            margin-bottom: 16px;
        }
        .mega-flagship-icon svg {
            width: 20px;
            height: 20px;
        }

        .mega-flagship-title {
            font-family: var(--font-body);
            font-size: 15px;
            font-weight: 600;
            color: #ffffff;
            margin-bottom: 6px;
            display: block;
            text-decoration: none;
            transition: color 0.2s ease;
        }
        .mega-flagship-title:hover {
            color: var(--primary-hover);
        }

        .mega-flagship-desc {
            font-family: var(--font-body);
            font-size: 12.5px;
            color: rgba(255, 255, 255, 0.52);
            line-height: 1.55;
            margin-bottom: 20px;
        }

        .mega-tags {
            display: flex;
            flex-direction: column;
            gap: 8px;
            align-items: flex-start;
        }

        .mega-pill-chip {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-family: var(--font-body);
            font-size: 12px;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.75);
            background: rgba(255, 255, 255, 0.035);
            border: 1px solid rgba(255, 255, 255, 0.09);
            border-radius: 100px;
            padding: 6px 14px;
            text-decoration: none;
            transition: all 0.2s ease;
        }
        .mega-pill-chip svg {
            width: 14px;
            height: 14px;
            opacity: 0.8;
            flex-shrink: 0;
            color: var(--primary-hover);
        }
        .mega-pill-chip:hover {
            background: rgba(0, 177, 190, 0.12);
            border-color: rgba(0, 177, 190, 0.4);
            color: #ffffff;
            transform: translateX(2px);
        }

        /* Colunas 2 e 3: Rótulos e Listas Tipográficas */
        .mega-col-label {
            font-family: var(--font-mono);
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: rgba(255, 255, 255, 0.38);
            margin-bottom: 16px;
            display: block;
        }

        .mega-link-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .mega-link-item {
            font-family: var(--font-body);
            font-size: 13px;
            font-weight: 450;
            color: rgba(255, 255, 255, 0.65);
            text-decoration: none;
            transition: color 0.18s ease, transform 0.18s ease;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            width: fit-content;
        }
        .mega-link-item .mega-num {
            font-family: var(--font-mono);
            font-size: 11px;
            font-weight: 600;
            color: var(--primary);
            opacity: 0.9;
            transition: color 0.18s ease;
        }
        .mega-link-item:hover {
            color: var(--primary-hover);
            transform: translateX(2px);
        }
        .mega-link-item:hover .mega-num {
            color: #ffffff;
            opacity: 1;
        }

        /* Coluna 4: Featured Card com Briefing Express */
        .mega-featured-col {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .mega-featured-badge {
            align-self: flex-start;
            font-family: var(--font-mono);
            font-size: 10.5px;
            font-weight: 600;
            letter-spacing: 0.04em;
            color: #22cddb;
            background: rgba(0, 177, 190, 0.1);
            border: 1px solid rgba(0, 177, 190, 0.4);
            border-radius: 100px;
            padding: 3px 12px;
            margin-bottom: 12px;
            display: inline-block;
        }

        .mega-featured-title {
            font-family: var(--font-body);
            font-size: 14px;
            font-weight: 600;
            color: #ffffff;
            line-height: 1.4;
            margin-bottom: 8px;
        }

        .mega-featured-desc {
            font-family: var(--font-body);
            font-size: 12px;
            color: rgba(255, 255, 255, 0.52);
            line-height: 1.5;
            margin-bottom: 16px;
        }

        .mega-briefing-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-family: var(--font-body);
            font-size: 13px;
            font-weight: 650;
            color: #ffffff;
            background: linear-gradient(135deg, var(--primary-hover), var(--primary-dark));
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: var(--radius-pill);
            padding: 10px 18px;
            cursor: pointer;
            box-shadow: 0 4px 18px rgba(0, 177, 190, 0.35);
            transition: all 0.25s ease;
            text-decoration: none;
            width: 100%;
        }
        .mega-briefing-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(0, 177, 190, 0.6);
            background: linear-gradient(135deg, #32e0ee, var(--primary));
            color: #ffffff;
        }

        @media (max-width: 1024px) {
            .mega-menu { display: none; }
        }

        .mobile-menu-button {
            display: none;
            font-family: var(--font-body);
            background: rgba(255, 255, 255, 0.05);
            color: var(--white);
            border: 1px solid rgba(255, 255, 255, 0.1);
            width: 42px;
            height: 42px;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.25s ease;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .mobile-menu-button:hover,
        .mobile-menu-button:active {
            background: rgba(0, 177, 190, 0.2);
            border-color: rgba(0, 177, 190, 0.5);
            color: var(--primary-hover);
        }
        .mobile-menu-button svg { width: 22px; height: 22px; }

        /* --- MOBILE & TABLET DRAWER MENU (ESTILOS COMPLETOS) --- */
        .mobile-menu-overlay {
            position: fixed;
            inset: 0;
            background: rgba(4, 5, 8, 0.82);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            z-index: 9998;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
        }
        .mobile-menu-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .mobile-menu {
            position: fixed;
            top: 0;
            right: 0;
            width: min(380px, 88vw);
            height: 100vh;
            height: 100dvh;
            background: #0d0f14;
            border-left: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: -20px 0 60px rgba(0, 0, 0, 0.95);
            z-index: 9999;
            padding: 24px 20px 32px;
            display: flex;
            flex-direction: column;
            transform: translateX(105%);
            visibility: hidden;
            pointer-events: none;
            transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
        .mobile-menu.active {
            transform: translateX(0);
            visibility: visible;
            pointer-events: auto;
        }

        .mobile-menu-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
            padding-bottom: 16px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            flex-shrink: 0;
        }
        .mobile-menu-brand {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .mobile-menu-brand img {
            height: 28px;
        }
        .mobile-menu-brand-text {
            font-family: var(--font-heading);
            font-size: 13px;
            font-weight: 700;
            color: #ffffff;
            letter-spacing: -0.01em;
        }
        .mobile-menu-close {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.12);
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .mobile-menu-close:hover,
        .mobile-menu-close:active {
            background: rgba(255, 255, 255, 0.15);
            color: var(--primary-hover);
        }
        .mobile-menu-close svg {
            width: 18px;
            height: 18px;
        }

        .mobile-menu-links {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin: 0;
            padding: 0;
            flex: 1;
        }
        .mobile-menu-links > li > a,
        .mobile-accordion-trigger {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 13px 16px;
            font-family: var(--font-body);
            font-size: 15px;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.85);
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 12px;
            text-decoration: none;
            cursor: pointer;
            transition: all 0.2s ease;
            text-align: left;
        }
        .mobile-menu-links > li > a:hover,
        .mobile-menu-links > li > a:active,
        .mobile-accordion-trigger:hover,
        .mobile-accordion-trigger[aria-expanded="true"] {
            background: rgba(0, 177, 190, 0.12);
            border-color: rgba(0, 177, 190, 0.35);
            color: #ffffff;
        }
        .mobile-accordion-trigger .chev {
            width: 16px;
            height: 16px;
            transition: transform 0.25s ease;
            color: var(--primary);
        }
        .mobile-accordion-trigger[aria-expanded="true"] .chev {
            transform: rotate(180deg);
        }

        .mobile-accordion-panel {
            display: none;
            padding: 8px 4px 8px 10px;
            margin-top: 4px;
        }
        .mobile-accordion-panel.open {
            display: block;
        }
        .mobile-accordion-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 6px;
            padding: 0;
            margin: 0;
            border-left: 2px solid rgba(0, 177, 190, 0.35);
            padding-left: 12px;
        }
        .mobile-accordion-list a {
            display: block;
            padding: 9px 10px;
            font-family: var(--font-body);
            font-size: 13px;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.65);
            text-decoration: none;
            border-radius: 8px;
            transition: all 0.2s ease;
        }
        .mobile-accordion-list a:hover,
        .mobile-accordion-list a:active {
            color: #ffffff;
            background: rgba(255, 255, 255, 0.07);
            padding-left: 14px;
        }

        .mobile-menu-cta {
            margin-top: 24px;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            display: flex;
            flex-direction: column;
            gap: 10px;
            flex-shrink: 0;
        }
        .mobile-menu-cta .header-cta-btn {
            display: block !important;
            text-align: center;
            padding: 14px 20px;
            font-size: 13px;
            font-weight: 700;
            border-radius: var(--radius-pill);
            background: linear-gradient(135deg, var(--primary-hover), var(--primary-dark));
            color: #ffffff;
            text-decoration: none;
            box-shadow: 0 4px 20px rgba(0, 177, 190, 0.4);
            white-space: normal;
            line-height: 1.4;
        }

        .nav-right {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
        }

        .nav-icon-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            color: rgba(255, 255, 255, 0.6);
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.08);
            text-decoration: none;
            font-size: 13px;
            transition: all 0.2s ease;
            cursor: pointer;
        }
        .nav-icon-btn:hover {
            color: #ffffff;
            background: rgba(255, 255, 255, 0.09);
            border-color: rgba(255, 255, 255, 0.18);
        }
        .nav-icon-btn svg {
            width: 15px;
            height: 15px;
        }

        .contact-warning {
            font-family: var(--font-body);
            font-size: 10px;
            color: var(--gray);
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.05);
            padding: 5px 12px;
            border-radius: 100px;
            white-space: nowrap;
        }

        @media (max-width: 1120px) {
            .contact-warning { display: none; }
            .nav-icon-btn { display: none; }
            header { padding: 14px 24px 0; }
        }

        /* Breakpoint de Tablet & Mobile (1024px) */
        @media (max-width: 1024px) {
            header { padding: 12px 18px 0; }
            nav { padding: 6px 10px 6px 16px; }
            .mobile-menu-button { display: flex; }
            .nav-links { display: none; }
            .nav-right .header-cta-btn { display: none; }
            .nav-icon-btn { display: none; }
            .contact-warning { display: none; }
        }

        /* Breakpoint de Mobile Estrito (600px) */
        @media (max-width: 600px) {
            header { padding: 10px 12px 0; }
            nav { padding: 5px 8px 5px 12px; gap: 0.5rem; }
            .logo img { height: 28px; }
            .header-photo { width: 30px; height: 30px; }
            .mobile-menu-button { width: 38px; height: 38px; }
        }

        /* --- 3. HERO SECTION (GLASSMORPHISM) --- */
        .ph-root {
            position: relative; width: 100%; min-height: 100vh;
            background: #0a0a0c; overflow: hidden; display: flex;
            flex-direction: column; justify-content: space-between;
            padding: 120px 0 0 0;
        }
        .ph-bg { position: absolute; inset: 0; background-size: cover; background-position: 65% center; background-repeat: no-repeat; filter: grayscale(0.68) contrast(1.18) brightness(0.9); }
        .ph-tint { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,177,190,0.16), rgba(10,10,12,0.22)); mix-blend-mode: overlay; pointer-events: none; }
        .ph-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(10,10,12,1) 0%, rgba(10,10,12,1) 28%, rgba(10,10,12,0.7) 48%, rgba(10,10,12,0.1) 68%, rgba(10,10,12,0.0) 100%); }
        .ph-overlay-bottom { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,12,1) 0%, transparent 30%); }

        .ph-glass {
            position: relative; z-index: 10; margin-left: 0; width: 460px; flex-shrink: 0;
            background: var(--glass-bg); border: 1px solid var(--glass-border);
            border-radius: var(--radius-lg); padding: 52px 44px 52px 50px;
            backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
            box-shadow: 0 40px 80px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.1);
            opacity: 0; transform: translateY(24px); transition: opacity 0.9s ease, transform 0.9s ease;
            overflow: visible !important;
        }
        .ph-glass.in { opacity: 1; transform: translateY(0); }

        .ph-accent {
            position: absolute; left: 0; top: 48px; bottom: 48px; width: 3px; border-radius: 0 3px 3px 0;
            background: linear-gradient(to bottom, transparent, var(--primary) 25%, var(--primary) 75%, transparent);
        }


        .ph-eyebrow {
            display: flex; align-items: center; gap: 12px;
            font-family: var(--font-body); font-size: 12px; font-weight: 500;
            letter-spacing: 0.22em; text-transform: uppercase; color: var(--primary-hover); margin-bottom: 24px;
        }
        .ph-eyebrow::before { content: ''; display: block; width: 22px; height: 1.5px; background: var(--primary-hover); }


        .ph-title { font-family: var(--font-heading); font-weight: 900; text-transform: uppercase; font-size: 64px; line-height: 0.98; letter-spacing: -0.01em; color: var(--white); margin-bottom: 22px; }
        .ph-title em { font-style: normal; color: var(--primary); }
        .ph-desc { font-family: var(--font-body); font-size: 14px; font-weight: 400; line-height: 1.8; color: var(--gray); margin-bottom: 32px; }

        @keyframes pulseGlowWhite {
            0%, 100% { text-shadow: 0 0 10px rgba(255,255,255,0.4), 0 0 20px rgba(255,255,255,0.2); }
            50% { text-shadow: 0 0 20px rgba(255,255,255,1), 0 0 40px rgba(255,255,255,0.8), 0 0 60px rgba(255,255,255,0.5); }
        }
        @keyframes pulseGlowPrimary {
            0%, 100% { text-shadow: 0 0 10px rgba(0,177,190,0.5), 0 0 20px rgba(0,177,190,0.3); }
            50% { text-shadow: 0 0 20px rgba(0,177,190,1), 0 0 40px rgba(0,177,190,0.8), 0 0 60px rgba(0,177,190,0.6); }
        }

        .ph-stats { display: flex; gap: 28px; margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,0.07); }
        .ph-stat { opacity: 0; transform: translateY(10px); transition: opacity 0.6s ease, transform 0.6s ease; }
        .ph-stat.in { opacity: 1; transform: translateY(0); }
        .ph-stat-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 30px; font-weight: 700; color: var(--white); line-height: 1; animation: pulseGlowWhite 3s ease-in-out infinite; }
        /* font-size mínimo: 12px (floor de acessibilidade) */
        .ph-stat-lbl { font-family: var(--font-body); font-size: 12px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.62); margin-top: 5px; }

        .ph-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
        .ph-tag {
            font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
            padding: 6px 14px; border-radius: var(--radius-pill); border: 1px solid rgba(255,255,255,0.1);
            color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.04);
        }

        .ph-cta { display: flex; align-items: center; gap: 18px; }
        .ph-btn {
            font-family: var(--font-body); font-size: 15px; font-weight: 500; letter-spacing: 0.04em; text-decoration: none; display: inline-block;
            padding: 16px 36px; border-radius: var(--radius-pill); border: none; background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary-dark) 100%);
            color: var(--white); cursor: pointer; box-shadow: 0 8px 32px rgba(0,177,190,0.3); transition: transform 0.2s, box-shadow 0.2s;
        }
        .ph-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 44px rgba(0,177,190,0.5); color: var(--white);}

        .ph-link { font-family: var(--font-body); font-size: 13px; font-weight: 400; text-decoration: none; display: inline-block; color: var(--gray); background: none; border: none; cursor: pointer; transition: color 0.2s; }
        .ph-link:hover { color: rgba(255,255,255,0.75); }



        /* --- 10. RESPONSIVENESS --- */
        @media (max-width: 1100px) {
            .ph-glass { margin-left: 5vw; width: 400px; padding: 40px; }
            .ph-title { font-size: 52px; }
        }
        @media (max-width: 900px) {
            .ph-root { flex-direction: column; justify-content: flex-start; padding: 120px 0 0 0; min-height: auto; }
            .ph-bg { position: relative; width: 100%; height: 380px; background-position: right center; opacity: 1; }
            .ph-overlay, .ph-overlay-bottom { display: none; }
            .ph-glass { 
                position: relative; margin-top: -60px; margin-left: 0; width: 100%; max-width: 100%; text-align: center; 
                border-radius: 40px 40px 0 0; border-bottom: none;
                padding: 50px 20px 80px 20px; background: rgba(10,10,12,0.95); z-index: 10;
            }
            .ph-eyebrow { justify-content: center; }
            .ph-stats { justify-content: center; }
            .ph-freelas { align-items: center; text-align: center; }
            .ph-freelas > div { justify-content: center; }
            .ph-tags { justify-content: center; }
            .ph-cta { justify-content: center; }
        }


        /* --- RESTANTE DO CSS --- */
        
        .scroll-progress {
            position: fixed;
            top: 0;
            left: 0;
            width: 0%;
            height: 4px;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            z-index: 10000;
            transition: width 0.1s ease;
        }
        

        
        /* [LEGACY MOBILE MENU BLOCK REMOVED — modern drawer lives at lines 601-796] */

        /* --- BLOCO DE CREDIBILIDADE (MOSAICO ASSIMÉTRICO — Fase 3) --- */
        .credibility-section {
            padding: var(--space-5) 5%;
            background: #0a0a0c;
            border-bottom: 1px solid rgba(255,255,255,0.05);
            position: relative;
            z-index: 100;
        }
        .credibility-bento {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            grid-template-rows: auto auto;
            gap: var(--space-3);
            max-width: 1400px;
            margin: 0 auto;
        }
        .bento-panel {
            background: rgba(255,255,255,0.025);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: var(--radius-md);
            padding: var(--space-3);
            box-shadow: var(--shadow-md);
            opacity: 1; transform: translateY(0);
            transition: opacity 0.35s ease-out, transform 0.45s cubic-bezier(0.16,1,0.3,1);
        }
        .bento-panel.in { opacity: 1; transform: translateY(0); }
        .bento-formacao { grid-column: 1 / 6; grid-row: 1 / 3; }
        .bento-marcas   { grid-column: 6 / 13; grid-row: 1; }
        .bento-ferramentas { grid-column: 6 / 13; grid-row: 2; }

        @media (max-width: 900px) {
            .credibility-bento { grid-template-columns: 1fr; grid-template-rows: auto; gap: var(--space-2); }
            .bento-formacao, .bento-marcas, .bento-ferramentas { grid-column: 1; grid-row: auto; }
        }

        .trust-subtitle {
            font-family: var(--font-body) !important;
            font-size: 0.75rem;
            color: rgba(255,255,255,0.5) !important;
            text-transform: uppercase;
            letter-spacing: 0.18em !important;
            font-weight: 600;
            margin-bottom: 24px;
            padding-bottom: 12px;
            border-bottom: 1px solid rgba(255,255,255,0.06);
        }

        /* 2 colunas: reduz altura pela metade, equilibra com logos */
        .education-list { 
            list-style: none; 
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }
        .education-list li {
            position: relative;
            padding: 14px 16px 14px 34px;
            background: rgba(255,255,255,0.03);
            border-radius: var(--radius-md);
            border: 1px solid rgba(255,255,255,0.05);
            transition: background 0.3s ease, transform 0.3s ease;
        }
        .education-list li::before {
            content: '';
            position: absolute;
            left: 14px; top: 50%;
            width: 8px; height: 8px;
            transform: translateY(-50%);
            border-radius: 50%;
            background: var(--primary);
            box-shadow: 0 0 0 3px rgba(0,177,190,0.18);
        }
        .education-list li:not(:last-child)::after {
            content: '';
            position: absolute;
            left: 17.5px; top: 100%;
            width: 1.5px; height: 12px;
            background: rgba(255,255,255,0.15);
        }
        .education-list li:hover { transform: translateX(4px); background: rgba(255,255,255,0.055); }
        .education-list li strong { display: block; color: var(--white); font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: 0.88rem; margin-bottom: 3px; line-height: 1.3; }
        .education-list li span { color: var(--gray); font-size: 0.75rem; font-family: 'DM Sans', sans-serif; line-height: 1.3; }

        /* Logos: grade densa e flexível (painel largo do bento) */
        .clients-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
            gap: 12px;
        }
        .client-logo {
            height: 90px; 
            background: rgba(255,255,255,0.025); 
            border-radius: var(--radius-md); 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            padding: 16px; 
            border: 1px solid rgba(255,255,255,0.06); 
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
        }
        .client-logo:hover { 
            background: rgba(0,177,190,0.08); 
            transform: translateY(-4px); 
            border-color: rgba(0,177,190,0.3);
            box-shadow: 0 8px 24px rgba(0,0,0,0.3);
        }
        .client-logo img { 
            max-width: 100%; 
            max-height: 100%; 
            object-fit: contain; 
            opacity: 1;
            filter: none;
            mix-blend-mode: normal;
            transition: all 0.4s ease; 
        }
        .client-logo:hover img { opacity: 1; filter: grayscale(0%); }

        @media (max-width: 900px) {
            .trust-subtitle { text-align: center; }
            .education-list { grid-template-columns: 1fr; }
            .clients-grid { grid-template-columns: repeat(3, 1fr); }
        }
        @media (max-width: 480px) {
            .clients-grid { grid-template-columns: repeat(2, 1fr); }
            .education-list li { padding: 12px 14px 12px 16px; }
        }
        
        /* --- 5. PROJETOS / PORTFOLIO --- */
        .portfolio { padding: 80px 5%; background: var(--dark); }
        .container { max-width: 1400px; margin: 0 auto; }
        
        .section-title { font-family: var(--font-heading); font-size: 3.5rem; text-align: center; margin-bottom: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; }
        .section-title.in { opacity: 1; transform: translateY(0); }
        .section-subtitle { font-family: var(--font-body); text-align: center; color: var(--gray); margin-bottom: 4rem; font-size: 1.1rem; }

        .category { margin-bottom: 6rem; }
        /* Ritmo: categorias pares ganham painel sutil pra quebrar a repetição de blocos idênticos */
        .category:nth-of-type(even) {
            background: rgba(255,255,255,0.018);
            border-radius: var(--radius-lg);
            padding: 2.5rem clamp(1rem, 3vw, 2.5rem) 1rem;
        }
        .category-title {
            font-family: var(--font-heading); font-size: 2rem; font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em;
            margin-bottom: 0.8rem; color: var(--white);
            display: flex; align-items: center; gap: 12px;
        }
        .category-description { font-family: var(--font-body); color: var(--gray); font-size: 1rem; margin-bottom: 3rem !important; }

        /* Masonry (CSS columns): cards com a altura natural do conteúdo, sem forçar altura igual */
        .projects-grid { columns: 3 340px; column-gap: 30px; }

        .project-card {
            background: var(--dark-light); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-sm);
            overflow: hidden; cursor: pointer; position: relative;
            break-inside: avoid; margin-bottom: 30px;
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
            opacity: 0; transform: translateY(30px);
        }
        .project-card.in { opacity: 1; transform: translateY(0); }
        .project-card:hover { transform: translateY(-6px); border-color: var(--primary); box-shadow: 0 20px 40px rgba(0,0,0,0.5); }
        
        .video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; background: #000; border-bottom: 1px solid rgba(255,255,255,0.05); }
        .video-thumbnail { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: opacity 0.3s ease; }
        .project-card:hover .video-thumbnail { transform: none; }
        
        .play-button {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.8);
            width: 60px; height: 60px; background: rgba(0,0,0,0.5); border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.5rem; color: white; transition: all 0.3s ease;
            backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border: 1px solid rgba(255,255,255,0.2); z-index: 2;
        }
        .play-button::after {
            content: ''; width: 0; height: 0; border-left: 15px solid white; border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 5px;
        }
        .project-card:hover .play-button { transform: translate(-50%, -50%) scale(1); background: var(--primary); }
        
        .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
        .video-container.loaded .video-thumbnail, .video-container.loaded .play-button { display: none; }

        .project-info { position: relative; padding: 25px; overflow: hidden; }
        
        .project-title { font-family: var(--font-body); font-size: 1.35rem; margin-bottom: 15px; color: #fff; letter-spacing: 0.02em; font-weight: 700; line-height: 1.3; }

        .project-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
        .tag-base { font-family: var(--font-body); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 10px; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.6); }

        .tag-roteirizacao { border-color: rgba(232, 165, 48, 0.35); color: var(--yellow); }
        .tag-motion { border-color: rgba(0, 177, 190, 0.4); color: var(--primary); }
        .tag-edicao { border-color: rgba(255, 255, 255, 0.25); color: rgba(255,255,255,0.85); }
        .tag-ia { border-color: rgba(79, 209, 197, 0.35); color: #4fd1c5; }

        .card-subtitle { font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; color: var(--gray); text-transform: uppercase; letter-spacing: 1px; margin-top: 1rem; margin-bottom: 0.5rem; }
        .project-keywords { font-family: var(--font-body); font-size: 0.85rem; line-height: 1.6; color: var(--gray); margin-top: 10px; font-style: italic; }

        .card-cta-briefing {
            display: block; width: 100%; margin-top: 16px; padding: 10px 14px;
            font-family: var(--font-body); font-size: 12.5px; font-weight: 600; color: #fff;
            background: rgba(255,255,255,0.05); border: 1px solid rgba(0,177,190,0.35); border-radius: var(--radius-sm);
            cursor: pointer; transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
        }
        .card-cta-briefing:hover { background: rgba(0,177,190,0.15); border-color: rgba(0,177,190,0.7); transform: translateY(-2px); }

        /* OVERLAY DE PROPOSTAS (99FREELAS) */
        .proposal-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(13, 13, 20, 0.96);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            padding: 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            border-top: 2px solid rgba(0, 177, 190, 0.5);
            opacity: 0;
            transform: translateY(100%);
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
            z-index: 5;
            box-sizing: border-box;
        }
        
        .project-card:hover .proposal-overlay,
        .project-card.card-touched .proposal-overlay {
            opacity: 1;
            transform: translateY(0);
        }
        
        .proposal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            padding-bottom: 8px;
        }
        
        .proposal-title {
            font-family: var(--font-body);
            font-size: 0.75rem;
            font-weight: 700;
            color: #fff;
            text-transform: uppercase;
            letter-spacing: 1.5px;
        }
        
        .proposal-priority {
            font-family: var(--font-mono);
            font-size: 0.7rem;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: var(--radius-sm);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .proposal-priority.p1 {
            background: rgba(255, 68, 101, 0.15);
            border: 1px solid rgba(255, 68, 101, 0.4);
            color: #ff8fa3;
        }
        
        .proposal-priority.p2 {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: rgba(255, 255, 255, 0.85);
        }
        
        .proposal-priority.p3 {
            background: rgba(255, 199, 0, 0.15);
            border: 1px solid rgba(255, 199, 0, 0.4);
            color: #ffe082;
        }
        
        .proposal-body {
            font-family: var(--font-body);
            font-size: 0.85rem;
            line-height: 1.5;
            color: rgba(255, 255, 255, 0.9);
        }
        
        .proposal-body strong {
            color: #fff;
            display: block;
            margin-bottom: 4px;
            font-size: 0.9rem;
        }

        /* BADGE RECÉM-FINALIZADO */
        .badge-recent {
            position: absolute; top: 12px; right: 12px; background: var(--accent); color: white;
            font-family: var(--font-body); font-weight: 700; font-size: 10px; text-transform: uppercase;
            padding: 5px 12px; border-radius: var(--radius-sm); z-index: 10; box-shadow: 0 4px 12px rgba(0,177,190,0.4);
            letter-spacing: 0.05em; pointer-events: none;
        }

        /* --- 6. FERRAMENTAS (agora painel do bento de credibilidade) --- */
        /* Cluster compacto de chips: ícone + nome lado a lado, quebra de linha livre */
        .ferramentas-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .ferramenta-card {
            display: inline-flex; align-items: center; gap: 8px;
            background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius-pill);
            padding: 6px 14px 6px 8px; transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
        }
        .ferramenta-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); }
        .ferramenta-logo { width: 18px; height: 18px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
        .ferramenta-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
        .ferramenta-name { font-family: var(--font-body); font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.6); text-transform: none; letter-spacing: 0.01em; white-space: nowrap; }

        .ferramentas-group-title {
            font-family: var(--font-body);
            font-size: 0.72rem;
            font-weight: 600;
            color: rgba(255,255,255,0.4);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin: 28px 0 14px;
        }
        .ferramentas-group-title:first-of-type { margin-top: 4px; }

        /* --- 7. FOOTER --- */
        footer { padding: 60px 5%; text-align: center; border-top: 1px solid rgba(255,255,255,0.05); background: var(--dark); }
        footer p { font-family: var(--font-body); color: var(--gray); font-size: 14px; }

        .bg-circle { position: fixed; border-radius: 50%; opacity: 0.03; pointer-events: none; filter: blur(80px); z-index: -1; contain: layout size style; }
        .bg-circle-1 { width: min(600px, 100vw); height: 600px; background: var(--primary); top: 10%; right: 0; }
        .bg-circle-2 { width: min(500px, 100vw); height: 500px; background: var(--secondary); bottom: 10%; left: 0; }
        @media (max-width: 1024px) {
            .bg-circle { display: none !important; width: 0 !important; height: 0 !important; }
        }

        /* POPUP 99FREELAS */
        .popup-99freelas {
            position: fixed; bottom: 20px; right: -100%; z-index: 10000; max-width: 350px;
            background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.1);
            border-radius: var(--radius-md); padding: 18px 24px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.07);
            /* Animação mais suave e sutil */
            transition: right 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease; opacity: 0;
            display: flex; align-items: center; gap: 16px;
        }
        .popup-99freelas.show { right: 20px; opacity: 1; }
        .popup-icon { font-size: 22px; color: var(--primary); flex-shrink: 0; }
        .popup-text { font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: var(--white); margin: 0; }

        @media (max-width: 768px) {
            .section-title { font-size: 2.5rem; }
            .ph-glass { width: 90vw; margin: 0 auto; padding: 40px 30px; }
            .ph-title { font-size: 48px; }
            .projects-grid { columns: 1; }
            .category:nth-of-type(even) { padding-left: 1rem; padding-right: 1rem; }
            
            /* Mobile Toast: slide-up suave (estilo nativo do iOS/Android) */
            .popup-99freelas { 
                left: 16px; right: 16px; max-width: none; 
                bottom: -100px; 
                transition: bottom 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
            }
            .popup-99freelas.show { bottom: 24px; opacity: 1; right: 16px; }
        }

        /* Acessibilidade: .sr-only para skip link */
        .sr-only {
            position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
            overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
        }
        /* Respeita prefers-reduced-motion */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.3s !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.12s !important;
                scroll-behavior: auto !important;
            }
        }

    
        .category { position: relative; }

        /* --- 10. KEYFRAMES FLOATERS --- */
        .floating-keyframe {
            position: absolute !important;
            left: 650px !important;
            top: 0 !important;
            z-index: 5;
            pointer-events: none !important;
            border: none;
            background: transparent;
            overflow: hidden;
            opacity: 0.85;
            width: 90px !important;
            height: 90px !important;
            will-change: transform;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }

        /* Desktop: 6 keyframes com movimento orgânico em curva */
        .kf-desk-1 { 
            animation: organicFloat1 14s ease-in-out infinite;
        }

        .kf-desk-2 { 
            animation: organicFloat2 16s ease-in-out infinite;
        }

        .kf-desk-3 { 
            animation: organicFloat3 13s ease-in-out infinite;
        }

        .kf-desk-4 { 
            animation: organicFloat4 15s ease-in-out infinite;
        }

        .kf-desk-5 { 
            animation: organicFloat5 17s ease-in-out infinite;
        }

        .kf-desk-6 { 
            animation: organicFloat6 14.5s ease-in-out infinite;
        }

        /* Animações orgânicas com movimento em curva usando transform (GPU-accelerated) */
        @keyframes organicFloat1 {
            0% { transform: translate(-110px, 10vh) translateZ(0); }
            15% { transform: translate(-50px, 28vh) translateZ(0); }
            30% { transform: translate(-160px, 52vh) translateZ(0); }
            45% { transform: translate(-20px, 71vh) translateZ(0); }
            60% { transform: translate(-140px, 85vh) translateZ(0); }
            75% { transform: translate(-30px, 62vh) translateZ(0); }
            90% { transform: translate(-150px, 35vh) translateZ(0); }
            100% { transform: translate(-110px, 10vh) translateZ(0); }
        }
        
        @keyframes organicFloat2 {
            0% { transform: translate(-100px, 25vh) translateZ(0); }
            18% { transform: translate(-170px, 48vh) translateZ(0); }
            35% { transform: translate(-15px, 75vh) translateZ(0); }
            50% { transform: translate(-130px, 88vh) translateZ(0); }
            65% { transform: translate(-40px, 65vh) translateZ(0); }
            80% { transform: translate(-155px, 42vh) translateZ(0); }
            95% { transform: translate(-25px, 15vh) translateZ(0); }
            100% { transform: translate(-100px, 25vh) translateZ(0); }
        }
        
        @keyframes organicFloat3 {
            0% { transform: translate(-115px, 40vh) translateZ(0); }
            20% { transform: translate(-35px, 18vh) translateZ(0); }
            38% { transform: translate(-165px, 35vh) translateZ(0); }
            55% { transform: translate(-10px, 60vh) translateZ(0); }
            70% { transform: translate(-145px, 82vh) translateZ(0); }
            85% { transform: translate(-45px, 70vh) translateZ(0); }
            100% { transform: translate(-115px, 40vh) translateZ(0); }
        }
        
        @keyframes organicFloat4 {
            0% { transform: translate(-105px, 55vh) translateZ(0); }
            17% { transform: translate(-55px, 78vh) translateZ(0); }
            33% { transform: translate(-160px, 90vh) translateZ(0); }
            50% { transform: translate(-20px, 68vh) translateZ(0); }
            67% { transform: translate(-150px, 42vh) translateZ(0); }
            83% { transform: translate(-30px, 22vh) translateZ(0); }
            100% { transform: translate(-105px, 55vh) translateZ(0); }
        }
        
        @keyframes organicFloat5 {
            0% { transform: translate(-120px, 70vh) translateZ(0); }
            16% { transform: translate(-25px, 50vh) translateZ(0); }
            32% { transform: translate(-170px, 28vh) translateZ(0); }
            48% { transform: translate(-15px, 12vh) translateZ(0); }
            64% { transform: translate(-135px, 38vh) translateZ(0); }
            80% { transform: translate(-40px, 62vh) translateZ(0); }
            96% { transform: translate(-155px, 85vh) translateZ(0); }
            100% { transform: translate(-120px, 70vh) translateZ(0); }
        }
        
        @keyframes organicFloat6 {
            0% { transform: translate(-110px, 82vh) translateZ(0); }
            19% { transform: translate(-45px, 58vh) translateZ(0); }
            37% { transform: translate(-165px, 32vh) translateZ(0); }
            54% { transform: translate(-10px, 15vh) translateZ(0); }
            71% { transform: translate(-145px, 45vh) translateZ(0); }
            88% { transform: translate(-35px, 72vh) translateZ(0); }
            100% { transform: translate(-110px, 82vh) translateZ(0); }
        }

        /* Esconder keyframes não utilizados */

        @media (max-width: 1024px) {
            /* Tablet e Mobile: ocultar iframes de keyframes flutuantes para prevenir 100% de overflow horizontal */
            .floating-keyframe,
            .kf-desk-1, .kf-desk-2, .kf-desk-3, 
            .kf-desk-4, .kf-desk-5, .kf-desk-6 {
                display: none !important;
            }
            #mobile-keyframes-space {
                display: none !important;
            }
        }

        /* ============================================
           STARFIELD BACKGROUND (Facilmente Reversível)
           ============================================ */
        .starfield-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        .starfield-background.starfield-active {
            opacity: 1;
        }

        /* --- HEADER CTA (SITE BLUE / CYAN ACCENT) --- */
        .header-cta-btn {
            font-family: var(--font-body);
            background: linear-gradient(135deg, var(--primary-hover), var(--primary-dark));
            color: #ffffff !important;
            text-decoration: none;
            padding: 8px 18px;
            border-radius: var(--radius-pill);
            font-size: 13.5px;
            font-weight: 700;
            letter-spacing: 0.01em;
            transition: all 0.25s ease;
            box-shadow: 0 4px 18px rgba(0, 177, 190, 0.35);
            white-space: nowrap;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(255, 255, 255, 0.15);
        }
        .header-cta-btn:hover {
            background: linear-gradient(135deg, #32e0ee, var(--primary));
            transform: translateY(-1px);
            box-shadow: 0 6px 24px rgba(0, 177, 190, 0.55);
            color: #ffffff !important;
        }

        /* --- EXIT POPUP --- */
        .exit-popup-overlay {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            z-index: 100000;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.4s ease, visibility 0.4s ease;
        }
        .exit-popup-overlay.active {
            opacity: 1;
            visibility: visible;
        }
        .exit-popup-content {
            background: #ffffff;
            border: 1px solid rgba(0, 0, 0, 0.08);
            border-radius: var(--radius-lg);
            padding: 40px;
            max-width: 450px;
            width: 90%;
            text-align: center;
            position: relative;
            transform: perspective(1000px) rotateX(-15deg) translateY(30px) scale(0.92);
            transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow: 0 30px 60px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.02);
            transform-style: preserve-3d;
        }
        .exit-popup-overlay.active .exit-popup-content {
            transform: perspective(1000px) rotateX(0deg) translateY(0) scale(1);
        }
        
        /* --- STAGGERED REVEAL (ELEMENTOS INTERNOS) --- */
        .exit-popup-content .exit-popup-close,
        .exit-popup-content .svg-qa,
        .exit-popup-content .exit-popup-title,
        .exit-popup-content .exit-popup-desc,
        .exit-popup-content .ph-btn {
            opacity: 0;
            transform: translateY(15px) translateZ(20px);
            transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s;
        }
        
        .exit-popup-overlay.active .exit-popup-content .exit-popup-close {
            opacity: 1;
            transform: translateY(0) translateZ(0);
            transition-delay: 0.1s;
        }
        .exit-popup-overlay.active .exit-popup-content .svg-qa {
            opacity: 1;
            transform: translateY(0) translateZ(20px);
            transition-delay: 0.18s;
        }
        .exit-popup-overlay.active .exit-popup-content .exit-popup-title {
            opacity: 1;
            transform: translateY(0) translateZ(20px);
            transition-delay: 0.26s;
        }
        .exit-popup-overlay.active .exit-popup-content .exit-popup-desc {
            opacity: 1;
            transform: translateY(0) translateZ(20px);
            transition-delay: 0.34s;
        }
        .exit-popup-overlay.active .exit-popup-content .ph-btn {
            opacity: 1;
            transform: translateY(0) translateZ(20px);
            transition-delay: 0.42s;
        }
        .exit-popup-close {
            position: absolute;
            top: 15px; right: 15px;
            background: none; border: none;
            color: #888899;
            font-size: 24px;
            cursor: pointer;
            transition: color 0.3s;
        }
        .exit-popup-close:hover {
            color: #0a0a0c;
        }
        .exit-popup-title {
            font-family: var(--font-heading);
            font-size: 28px;
            color: #0a0a0c;
            margin-bottom: 15px;
        }
        .exit-popup-desc {
            font-family: var(--font-body);
            font-size: 15px;
            color: #4b4b5c;
            margin-bottom: 25px;
            line-height: 1.6;
        }

        /* --- CARROSSEL 3D SWIPER --- */
        .swiper { width: 100%; padding-top: 50px; padding-bottom: 80px; }
        .swiper-slide { background-position: center; background-size: cover; width: 320px; height: auto; }
        .print-img { width: 100%; border-radius: 12px; border: 1px solid var(--glass-border); display: block; box-shadow: 0 10px 30px rgba(0,0,0,0.5); transition: transform 0.3s ease; }
        .print-img:hover { transform: translateY(-5px); border-color: rgba(0, 177, 190, 0.3); }
        /* Glow no slide destaque */
        .slide-destaque .print-img {
            border-color: rgba(0, 177, 190, 0.6);
            box-shadow:
                0 0 15px rgba(0, 177, 190, 0.5),
                0 0 40px rgba(0, 177, 190, 0.3),
                0 0 80px rgba(0, 177, 190, 0.2);
            animation: glowPulse 3s ease-in-out infinite;
        }
        @keyframes glowPulse {
            0%, 100% { box-shadow: 0 0 15px rgba(0,177,190,0.5), 0 0 40px rgba(0,177,190,0.3), 0 0 80px rgba(0,177,190,0.2); }
            50%       { box-shadow: 0 0 25px rgba(0,177,190,0.8), 0 0 60px rgba(0,177,190,0.5), 0 0 100px rgba(0,177,190,0.35); }
        }

        /* --- PAREDE DE DEPOIMENTOS (Fase 3) — desktop rico, mobile mantém o Swiper leve --- */
        .depoimentos-section { padding: var(--space-5) 5%; background: linear-gradient(to bottom, var(--dark), #0a0a0c); overflow: hidden; clip-path: inset(0); }
        .depoimentos-inner { max-width: 1600px; margin: 0 auto; }
        .tw-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary); margin: 0 0 12px; text-align: center; }
        .tw-title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(28px, 4vw, 42px); text-align: center; margin: 0 0 var(--space-4); letter-spacing: -0.01em; }
        .tw-title em { font-style: normal; color: var(--primary); }

        .tw-desktop { display: block; }
        .tw-mobile { display: none; }
        @media (max-width: 900px) {
            .tw-desktop { display: none; }
            .tw-mobile { display: block; overflow: hidden; max-width: 100vw; }
        }

        .tcard {
            background: rgba(255,255,255,0.035);
            border: 1px solid var(--glass-border);
            border-radius: 20px;
            padding: 6px;
            box-shadow: var(--shadow-lg);
            opacity: 0; transform: translateY(26px);
            transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16,1,0.3,1), border-color 0.5s ease;
        }
        .tcard.in { opacity: 1; transform: translateY(0); }
        .tcard:hover { border-color: rgba(0,177,190,0.45); }
        .tcard-core { position: relative; background: #151517; border-radius: 15px; padding: 20px 20px 18px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); overflow: hidden; }
        .tcard-head { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
        .tavatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(150deg, var(--primary), var(--primary-dark)); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 15px; font-weight: 700; flex-shrink: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,0.25); }
        .tname { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--white); line-height: 1.2; }
        .tsource { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; color: rgba(245,245,245,0.4); margin-top: 3px; }
        .tsource .wadot { width: 7px; height: 7px; border-radius: 50%; background: #25d366; flex-shrink: 0; box-shadow: 0 0 6px rgba(37,211,102,0.6); }
        .tsource .sep { opacity: 0.4; }
        .tverify { margin-left: auto; display: flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--primary); border: 1px solid rgba(0,177,190,0.35); border-radius: 100px; padding: 4px 9px; white-space: nowrap; }

        .tw-chat { display: flex; flex-direction: column; gap: 8px; }
        .tw-bubble { position: relative; max-width: 90%; padding: 9px 13px; border-radius: 14px; font-family: var(--font-body); line-height: 1.45; }
        .tw-bubble .tw-btime { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 9px; margin-left: 8px; opacity: 0.65; white-space: nowrap; }
        .tw-bubble .tw-checks { color: #4aa3ff; font-size: 10px; letter-spacing: -2px; }
        .tw-bubble.sent { align-self: flex-end; background: rgba(122,150,104,0.16); border: 1px solid rgba(122,150,104,0.22); color: rgba(245,245,245,0.7); font-size: 12px; border-bottom-right-radius: 5px; }
        .tw-bubble.recv { align-self: flex-start; background: #f3ede1; color: #221d17; font-size: 14.5px; font-weight: 500; border-bottom-left-radius: 5px; box-shadow: 0 8px 18px -8px rgba(0,0,0,0.5); }

        .tw-featured { margin: 0 0 -8px 8%; width: 92%; max-width: 620px; transform: rotate(-0.6deg); }
        .tcard.feat { width: 100%; }
        .tcard.feat .tcard-core { padding: 30px 32px 26px; }
        .tcard.feat .tavatar { width: 46px; height: 46px; font-size: 20px; }
        .tcard.feat .tname { font-size: 16px; }
        .tcard.feat .tw-bubble.recv { font-size: 19px; font-weight: 600; line-height: 1.4; }
        .tcard.feat .quote-glyph { position: absolute; top: -14px; right: 14px; font-family: var(--font-heading); font-size: 150px; line-height: 1; color: var(--primary); opacity: 0.12; pointer-events: none; user-select: none; }

        .tw-masonry { columns: 3 250px; column-gap: 18px; }
        .tw-masonry .tcard { break-inside: avoid; margin-bottom: 18px; }

        .print-chip { margin-top: 14px; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(245,245,245,0.6); background: rgba(255,255,255,0.04); border: 1px solid var(--glass-border); border-radius: 100px; padding: 7px 12px; cursor: pointer; transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease; }
        .print-chip:hover { border-color: var(--primary); color: var(--white); background: rgba(0,177,190,0.10); }
        .print-chip svg { width: 13px; height: 13px; }
        .tcard.feat .print-chip { margin-top: 18px; }

        @media (max-width: 760px) {
            .tw-masonry { columns: 2 200px; }
        }
        @media (max-width: 520px) {
            .tw-masonry { columns: 1; }
        }

        /* --- NOVO: duas colunas -- prints reais (esquerda) + esteira de depoimentos (direita) --- */
        .tw-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }

        .rp-cascade { position: relative; width: 100%; min-height: 460px; }
        .rp-card { position: absolute; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,0.10); box-shadow: 0 25px 60px -15px rgba(0,0,0,0.6), 0 10px 24px rgba(0,0,0,0.5); background: #111; }
        .rp-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
        .rp-1 { top: 5px; left: 2%; width: 34%; aspect-ratio: 1 / 0.86; z-index: 2; }
        .rp-2 { top: 0px; left: 34%; width: 34%; aspect-ratio: 1 / 0.86; z-index: 5; }
        .rp-3 { top: 14px; left: 64%; width: 33%; aspect-ratio: 1 / 0.86; z-index: 3; }
        .rp-4 { top: 90px; left: 13%; width: 35%; aspect-ratio: 1 / 0.86; z-index: 6; }
        .rp-5 { top: 80px; left: 45%; width: 33%; aspect-ratio: 1 / 0.86; z-index: 9; }
        .rp-7 { top: 172px; left: 0%; width: 34%; aspect-ratio: 1 / 0.86; z-index: 7; }
        .rp-8 { top: 162px; left: 33%; width: 35%; aspect-ratio: 1 / 0.86; z-index: 10; }
        .rp-9 { top: 185px; left: 64%; width: 33%; aspect-ratio: 1 / 0.86; z-index: 5; }
        .rp-10 { top: 250px; left: 13%; width: 34%; aspect-ratio: 1 / 0.86; z-index: 8; }
        .rp-11 { top: 245px; left: 45%; width: 33%; aspect-ratio: 1 / 0.86; z-index: 4; }
        .rp-12 { top: 258px; left: 66%; width: 33%; aspect-ratio: 1 / 0.86; z-index: 6; }
        /* Anderson em EVIDENCIA dentro do empilhamento: maior, na frente, destacado */
        .rp-6 { top: 58px; left: 30%; width: 42%; aspect-ratio: 380 / 458; z-index: 30; border: 2px solid rgba(0,177,190,0.8); box-shadow: 0 0 0 4px rgba(0,177,190,0.14), 0 30px 70px -18px rgba(0,0,0,0.85), 0 0 48px rgba(0,177,190,0.3); }
        .rp-cap { margin: 12px 0 0; display: flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; color: rgba(245,245,245,0.4); }
        .rp-cap .wadot { width: 7px; height: 7px; border-radius: 50%; background: #25d366; box-shadow: 0 0 6px rgba(37,211,102,0.6); flex-shrink: 0; }

        /* Entrada sequencial dos prints: cada card chega em zoom out (grande -> tamanho final).
           .js-seq so esconde os cards (sem transicao, evita flash no carregamento).
           .js-seq-run liga a transicao; so e adicionada quando a sequencia comeca de fato. */
        .rp-cascade.js-seq .rp-card {
            opacity: 0;
            transform: scale(1.12) translateY(12px);
            filter: blur(3px);
            will-change: transform, opacity;
        }
        .rp-cascade.js-seq-run .rp-card {
            transition: opacity 0.38s ease-out, transform 0.5s cubic-bezier(0.16,1,0.3,1), filter 0.38s ease-out;
        }
        .rp-cascade.js-seq .rp-card.rp-in { opacity: 1; transform: scale(1); filter: blur(0); }
        @media (prefers-reduced-motion: reduce) {
            .rp-cascade.js-seq .rp-card { opacity: 1; transform: none; filter: none; transition: none; }
        }

        .tw-marquee-col { position: relative; }
        .tw-pinned { margin-bottom: 18px; }
        .tw-marquee-mask { height: 460px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%); }
        .tw-marquee-track { display: flex; flex-direction: column; animation: twMarqueeUp 46s linear infinite; }
        .tw-marquee-track .tcard { margin-bottom: 16px; }
        .tw-marquee-col:hover .tw-marquee-track { animation-play-state: paused; }
        .tw-marquee-dup { display: contents; }
        @keyframes twMarqueeUp { from { transform: translateY(0); } to { transform: translateY(-50%); } }

        .tw-marquee-col .tcard.feat { width: 100%; border-color: rgba(0,177,190,0.55); box-shadow: 0 0 0 1px rgba(0,177,190,0.22), 0 26px 55px -22px rgba(0,177,190,0.4); }
        .tw-marquee-col .tcard.feat .tcard-core { padding: 26px 24px 22px; background: linear-gradient(180deg, rgba(0,177,190,0.07), #151517 42%); }
        .tw-marquee-col .tcard.feat .tavatar { width: 44px; height: 44px; font-size: 19px; }
        .tw-marquee-col .tcard.feat .tname { font-size: 15px; }
        .tw-marquee-col .tcard.feat .tw-bubble.recv { font-size: 17px; font-weight: 600; line-height: 1.42; }
        .tw-marquee-col .tcard.feat .quote-glyph { display: block; top: -16px; right: 16px; font-size: 120px; }

        /* ===== Simulacao de conversa: "digitando" + baloes (dispara quando o card esta no centro) ===== */
        .tw-marquee-track.js-chat .tw-bubble { opacity: 0; }
        .tw-chat { position: relative; }
        .tw-typing {
            position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 5px;
            padding: 11px 14px; border-radius: 14px; border-bottom-left-radius: 5px;
            background: #f3ede1; box-shadow: 0 8px 18px -8px rgba(0,0,0,0.5);
            opacity: 0; transition: opacity 0.2s ease;
        }
        .tw-typing.sent {
            background: rgba(122,150,104,0.16); border: 1px solid rgba(122,150,104,0.22);
            border-bottom-left-radius: 14px; border-bottom-right-radius: 5px;
        }
        .tw-typing span { width: 6px; height: 6px; border-radius: 50%; background: #9a8f7c; animation: twTypingDot 1.3s infinite ease-in-out; }
        .tw-typing.sent span { background: rgba(245,245,245,0.55); }
        .tw-typing span:nth-child(2) { animation-delay: 0.18s; }
        .tw-typing span:nth-child(3) { animation-delay: 0.36s; }
        @keyframes twTypingDot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-4px); opacity: 1; } }

        @media (max-width: 1100px) {
            .tw-2col { grid-template-columns: 1fr; }
            .rp-cascade { max-width: 480px; margin: 0 auto; }
            .tw-marquee-mask { height: 420px; }
        }

        /* --- LIGHTBOX (prova: print original) --- */
        .lightbox { position: fixed; inset: 0; z-index: 99500; background: rgba(8,6,4,0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: none; align-items: center; justify-content: center; padding: 36px 20px; opacity: 0; transition: opacity 0.3s ease; }
        .lightbox.open { display: flex; opacity: 1; }
        .lightbox figure { margin: 0; max-width: 440px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; }
        .lightbox img { max-width: 100%; max-height: 76vh; border-radius: 16px; border: 1px solid rgba(255,255,255,0.16); box-shadow: 0 40px 90px rgba(0,0,0,0.75); }
        .lb-cap { font-family: var(--font-mono); font-size: 11px; color: rgba(245,245,245,0.6); text-align: center; display: flex; align-items: center; gap: 8px; }
        .lb-cap .wadot { width: 7px; height: 7px; border-radius: 50%; background: #25d366; box-shadow: 0 0 6px rgba(37,211,102,0.6); }
        .lb-close { position: fixed; top: 20px; right: 24px; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,0.08); border: 1px solid var(--glass-border); color: var(--white); font-size: 24px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color 0.3s ease, transform 0.3s ease; }
        .lb-close:hover { border-color: var(--primary); transform: rotate(90deg); }

        @media (prefers-reduced-motion: reduce) {
            .bento-panel, .tcard { transition-duration: 0.01ms !important; }
            .tw-marquee-track { animation: none !important; }
        }

        /* --- DESKTOP: cards do mesmo tamanho que o site produtoras --- */
        @media (min-width: 1200px) {
            .portfolio { max-width: none; padding: 80px 40px; }
            .portfolio .container { max-width: none; }
            .projects-grid { columns: 3 380px; column-gap: 40px; }
        }

        /* --- FAIXA EDITORIAL ABAIXO DO HERO (metadados + timeline, estilo index4) --- */
        .hero-metabar {
            position: relative;
            z-index: 10;
            width: 100%;
        }

        .hero-action-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            border-top: 1px solid rgba(255, 255, 255, 0.15);
            border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        }
        .hero-action-cell-left {
            padding: 26px 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 6px;
        }
        .hero-rating-wrap {
            display: flex;
            align-items: center;
            gap: 12px;
            font-family: var(--font-body);
        }
        .rating-platform {
            font-family: var(--font-heading);
            font-size: 16px;
            font-weight: 800;
            letter-spacing: -0.01em;
            color: #ffffff;
        }
        .rating-stars {
            color: #ff3344;
            letter-spacing: 2px;
            font-size: 14px;
        }
        .rating-val {
            font-family: var(--font-mono);
            font-size: 13px;
            font-weight: 700;
            color: rgba(255, 255, 255, 0.85);
        }
        .rating-sub {
            font-family: var(--font-body);
            font-size: 12px;
            color: rgba(255, 255, 255, 0.5);
            margin: 0;
        }
        .rating-sub strong {
            color: var(--primary);
            font-weight: 600;
        }

        .hero-action-cell-right {
            padding: 26px 0;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 16px;
        }
        .hero-btn-primary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            font-family: var(--font-body);
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            text-decoration: none;
            color: #ffffff;
            background: #d4001a;
            border: 1px solid #ff2b44;
            border-radius: 4px;
            padding: 14px 28px;
            transition: all 0.2s ease;
            box-shadow: 0 4px 20px rgba(212, 0, 26, 0.4);
        }
        .hero-btn-primary:hover {
            background: #e6001f;
            transform: translateY(-2px);
            box-shadow: 0 6px 26px rgba(212, 0, 26, 0.6);
            color: #ffffff;
        }
        .hero-btn-primary .btn-play-icon {
            font-size: 11px;
        }
        .hero-btn-secondary {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-family: var(--font-body);
            font-size: 13px;
            font-weight: 600;
            text-decoration: none;
            color: rgba(255, 255, 255, 0.7);
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 4px;
            padding: 14px 22px;
            transition: all 0.2s ease;
        }
        .hero-btn-secondary:hover {
            background: rgba(255, 255, 255, 0.1);
            color: #ffffff;
            border-color: rgba(255, 255, 255, 0.25);
        }

        /* Linha 3: Barra de 4 Celulas de Metadados (25% cada com bordas verticais) */
        .hero-infobar-row {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            border-bottom: 1px solid rgba(255, 255, 255, 0.15);
            background: rgba(0, 0, 0, 0.35);
        }
        .infobar-cell {
            padding: 14px 16px;
            font-family: var(--font-mono);
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.75);
            display: flex;
            align-items: center;
            white-space: nowrap;
        }
        .infobar-cell:not(:last-child) {
            border-right: 1px solid rgba(255, 255, 255, 0.15);
        }
        .infobar-cell.clock-cell {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #ffffff;
        }
        .infobar-cell .live-pulse-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #d4001a;
            box-shadow: 0 0 8px #d4001a;
            animation: pulseGlowPrimary 2s infinite ease-in-out;
        }

        /* Linha 4: Barra de Timeline de Edicao (Estilo Software de Video) */
        .hero-timeline-row {
            display: grid;
            grid-template-columns: 260px 1fr 280px;
            align-items: center;
            background: rgba(255, 255, 255, 0.02);
            border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        }
        .timeline-tab {
            padding: 12px 18px;
            background: rgba(255, 255, 255, 0.08);
            border-right: 1px solid rgba(255, 255, 255, 0.15);
            display: flex;
            align-items: center;
            gap: 8px;
            font-family: var(--font-mono);
            font-size: 11.5px;
            font-weight: 700;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: #ffffff;
            position: relative;
        }
        .timeline-tab .playhead-pin {
            position: absolute;
            right: -6px;
            top: 50%;
            transform: translateY(-50%);
            width: 12px;
            height: 12px;
            background: #d4001a;
            clip-path: polygon(0 0, 100% 50%, 0 100%);
        }
        .timeline-track-center {
            padding: 0 20px;
            display: flex;
            align-items: center;
            position: relative;
            background: repeating-linear-gradient(90deg, rgba(255,255,255,0.15) 0px, rgba(255,255,255,0.15) 1px, transparent 1px, transparent 12px);
            opacity: 0.45;
            height: 44px;
            border-right: 1px solid rgba(255, 255, 255, 0.15);
        }
        .timeline-clips-right {
            padding: 0 18px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 16px;
            font-family: var(--font-mono);
            font-size: 11px;
            color: rgba(255, 255, 255, 0.45);
        }

        @media (max-width: 1199px) {
            .hero-infobar-row { grid-template-columns: 1fr 1fr; }
            .infobar-cell:nth-child(2) { border-right: none; }
            .infobar-cell:nth-child(1), .infobar-cell:nth-child(2) { border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
            .hero-timeline-row { grid-template-columns: 220px 1fr; }
            .timeline-clips-right { display: none; }
        }
        @media (max-width: 809px) {
            .hero-action-row { grid-template-columns: 1fr; gap: 20px; padding: 0 5%; }
            .hero-action-cell-right { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 10px; padding-top: 0; }
            .hero-btn-primary, .hero-btn-secondary { width: 100%; justify-content: center; }
            .hero-infobar-row { grid-template-columns: 1fr; }
            .infobar-cell:not(:last-child) { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
            .hero-timeline-row { display: none; }
        }


        .svg-qa {
            display: block;
            margin: 0 auto 20px;
            max-width: 100%;
            height: auto;
        }
        .svg-qa .bubble-1 { animation: slideUpFade 3s infinite; }
        .svg-qa .bubble-2 { animation: slideUpFade 3s infinite; animation-delay: 0.7s; }
        @keyframes slideUpFade {
            0% { opacity: 0; transform: translateY(20px); }
            15% { opacity: 1; transform: translateY(0); }
            80% { opacity: 1; transform: translateY(0); }
            100% { opacity: 0; transform: translateY(-10px); }
        }
        .exit-popup-title { font-family: var(--font-body) !important; }
        .highlight-popup { color: var(--primary); font-weight: 700; }

        #a7chat-fab{position:fixed;right:20px;bottom:20px;width:60px;height:60px;border-radius:50%;border:none;cursor:pointer;z-index:99000;
            background:linear-gradient(135deg,var(--primary,#00b1be),var(--secondary,#00b1be));
            box-shadow:0 8px 30px rgba(0,177,190,.45);display:flex;align-items:center;justify-content:center;
            transition:transform .2s cubic-bezier(.16,1,.3,1);}
        #a7chat-fab:hover{transform:scale(1.06);}
        #a7chat-fab svg{width:28px;height:28px;fill:#fff;}
        #a7chat-fab .a7c-dot{position:absolute;top:2px;right:2px;width:14px;height:14px;background:var(--accent,#ff4465);
            border-radius:50%;border:2px solid #0a0a0c;animation:a7c-pulse 2s infinite;}
        @keyframes a7c-pulse{0%{box-shadow:0 0 0 0 rgba(255,68,101,.6)}70%{box-shadow:0 0 0 10px rgba(255,68,101,0)}100%{box-shadow:0 0 0 0 rgba(255,68,101,0)}}
        #a7chat-tip{position:fixed;right:20px;bottom:92px;z-index:98999;max-width:220px;
            background:rgba(20,20,28,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
            border:1px solid var(--glass-border,rgba(255,255,255,.13));border-radius:14px;padding:10px 14px;
            font-family:var(--font-body,'DM Sans',sans-serif);font-size:13px;line-height:1.4;color:#fff;
            box-shadow:0 10px 30px rgba(0,0,0,.4);opacity:0;transform:translateY(8px);pointer-events:none;
            transition:opacity .3s ease,transform .3s cubic-bezier(.16,1,.3,1);}
        #a7chat-tip.show{opacity:1;transform:none;pointer-events:auto;cursor:pointer;}
        #a7chat-tip::after{content:'';position:absolute;bottom:-6px;right:24px;width:12px;height:12px;
            background:rgba(20,20,28,.95);border-right:1px solid var(--glass-border,rgba(255,255,255,.13));
            border-bottom:1px solid var(--glass-border,rgba(255,255,255,.13));transform:rotate(45deg);}
        #a7chat-tip .a7c-tip-close{position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;
            background:#1c1c26;border:1px solid var(--glass-border,rgba(255,255,255,.15));color:#aaa;font-size:13px;
            line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
        #a7chat-tip .a7c-tip-close:hover{color:#fff;}
        @media (max-width:768px){
            #a7chat-tip{right:16px;bottom:82px;}
        }
        #a7chat-badge{position:fixed;right:86px;bottom:38px;z-index:98998;
            background:var(--accent,#ff4465);color:#fff;
            font-family:var(--font-body,'DM Sans',sans-serif);font-size:11px;font-weight:700;
            text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;
            padding:6px 13px;border-radius:100px;box-shadow:0 6px 18px rgba(255,68,101,.4);
            opacity:0;transform:translateX(6px);pointer-events:none;
            transition:opacity .4s ease,transform .4s cubic-bezier(.16,1,.3,1);}
        #a7chat-badge.show{opacity:1;transform:none;}
        #a7chat-badge::after{content:'';position:absolute;top:50%;right:-5px;width:10px;height:10px;margin-top:-5px;
            background:var(--accent,#ff4465);transform:rotate(45deg);}
        @media (max-width:768px){
            #a7chat-badge{right:80px;bottom:34px;font-size:10px;padding:5px 11px;}
        }
        #a7chat-panel{position:fixed;right:20px;bottom:20px;width:380px;max-width:calc(100vw - 32px);height:560px;max-height:calc(100vh - 40px);z-index:99001;
            display:flex;flex-direction:column;overflow:hidden;border-radius:20px;
            background:rgba(12,12,18,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
            border:1px solid var(--glass-border,rgba(255,255,255,.13));box-shadow:0 20px 60px rgba(0,0,0,.55);
            font-family:var(--font-body,'DM Sans',sans-serif);
            opacity:0;transform:translateY(20px) scale(.98);pointer-events:none;transition:opacity .25s ease,transform .25s cubic-bezier(.16,1,.3,1);}
        #a7chat-panel.open{opacity:1;transform:none;pointer-events:auto;}
        .a7c-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--glass-border,rgba(255,255,255,.1));background:rgba(255,255,255,.03);}
        .a7c-head img{width:38px;height:38px;border-radius:50%;object-fit:cover;}
        .a7c-head .a7c-name{font-weight:600;color:#fff;font-size:14px;line-height:1.1;}
        .a7c-head .a7c-status{font-size:11px;color:#3ddc84;display:flex;align-items:center;gap:5px;margin-top:2px;}
        .a7c-head .a7c-status::before{content:'';width:7px;height:7px;border-radius:50%;background:#3ddc84;display:inline-block;}
        .a7c-head .a7c-close{margin-left:auto;background:none;border:none;color:#aaa;font-size:24px;cursor:pointer;line-height:1;padding:2px 6px;}
        .a7c-head .a7c-close:hover{color:#fff;}
        .a7c-notice{display:flex;align-items:flex-start;gap:7px;padding:9px 14px;font-size:11px;line-height:1.45;
            color:#c9c9d4;background:rgba(255,255,255,.04);border-bottom:1px solid var(--glass-border,rgba(255,255,255,.08));}
        .a7c-notice span.a7c-notice-icon{flex-shrink:0;font-size:13px;color:var(--secondary,#00b1be);}
        .a7c-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;}
        .a7c-msg{max-width:86%;padding:10px 13px;border-radius:14px;font-size:13.5px;line-height:1.5;color:#eee;word-wrap:break-word;white-space:normal;}
        .a7c-msg.bot{align-self:flex-start;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);border-bottom-left-radius:4px;}
        .a7c-msg.user{align-self:flex-end;background:linear-gradient(135deg,var(--primary,#00b1be),var(--secondary,#00b1be));color:#fff;border-bottom-right-radius:4px;white-space:pre-wrap;}
        .a7c-msg a.a7c-link{color:#a9c7ff;font-weight:600;text-decoration:underline;cursor:pointer;}
        .a7c-cta-wrap{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
        .a7c-cta{flex:1;min-width:120px;padding:10px 10px;border:none;border-radius:var(--radius-pill,100px);cursor:pointer;font-weight:600;font-size:12.5px;color:#fff;
            background:linear-gradient(135deg,var(--primary,#00b1be),var(--secondary,#00b1be));box-shadow:0 6px 18px rgba(0,177,190,.4);transition:filter .15s ease;}
        .a7c-cta:hover{filter:brightness(1.08);}
        .a7c-cta-secondary{background:rgba(255,255,255,.08);box-shadow:none;border:1px solid rgba(255,255,255,.18);}
        .a7c-typing{align-self:flex-start;display:flex;gap:4px;padding:12px 14px;background:rgba(255,255,255,.07);border-radius:14px;}
        .a7c-typing span{width:7px;height:7px;border-radius:50%;background:#bbb;animation:a7c-bounce 1.2s infinite;}
        .a7c-typing span:nth-child(2){animation-delay:.2s}
        .a7c-typing span:nth-child(3){animation-delay:.4s}
        @keyframes a7c-bounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}
        .a7c-form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--glass-border,rgba(255,255,255,.1));background:rgba(255,255,255,.03);}
        .a7c-form textarea{flex:1;resize:none;max-height:96px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.25);color:#fff;
            border-radius:14px;padding:10px 12px;font-family:inherit;font-size:13.5px;line-height:1.4;outline:none;}
        .a7c-form textarea::placeholder{color:#888;}
        .a7c-form textarea:focus{border-color:var(--primary,#00b1be);}
        .a7c-send{width:42px;height:42px;flex:none;border:none;border-radius:50%;cursor:pointer;align-self:flex-end;
            background:linear-gradient(135deg,var(--primary,#00b1be),var(--secondary,#00b1be));display:flex;align-items:center;justify-content:center;}
        .a7c-send:disabled{opacity:.5;cursor:default;}
        .a7c-send svg{width:18px;height:18px;fill:#fff;}
        @media (max-width:768px){
            #a7chat-panel{right:0;bottom:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;}
            #a7chat-fab{right:16px;bottom:16px;width:56px;height:56px;}
        }

        /* ==========================================================================
           BENTO GRID DO PORTFÓLIO (SISTEMA DE 12 COLUNAS)
           ========================================================================== */
        .bento-projects-grid {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: 24px;
            align-items: stretch;
        }

        .bento-projects-grid .project-card {
            margin-bottom: 0;
            display: flex;
            flex-direction: column;
            break-inside: auto;
        }

        .card-span-12 { grid-column: span 12; }
        .card-span-7  { grid-column: span 7; }
        .card-span-6  { grid-column: span 6; }
        .card-span-5  { grid-column: span 5; }
        .card-span-4  { grid-column: span 4; }
        .card-span-3  { grid-column: span 3; }

        .card-span-7 .project-title { font-size: 1.24rem; line-height: 1.35; margin-bottom: 10px; }
        .card-span-6 .project-title { font-size: 1.15rem; line-height: 1.35; margin-bottom: 10px; }
        .card-span-5 .project-title { font-size: 1.12rem; line-height: 1.35; margin-bottom: 10px; }
        .card-span-4 .project-title { font-size: 1rem; line-height: 1.35; margin-bottom: 10px; }
        .card-span-3 .project-title { font-size: 0.94rem; line-height: 1.35; margin-bottom: 8px; }

        .card-span-3 .project-info { padding: 18px 20px; }
        .card-span-3 .card-subtitle { margin-top: 0.75rem; margin-bottom: 0.35rem; font-size: 0.7rem; }
        .card-span-3 .project-keywords { font-size: 0.78rem; line-height: 1.5; margin-top: 6px; }

        /* ----------------------------------------------------------------
           PROPORÇÃO DECLARADA (data-ar) — fonte única da verdade do slot.
           O card declara o formato do arquivo; o CSS deriva a altura do slot.
           ---------------------------------------------------------------- */
        .project-card[data-ar="16:9"] .video-container { padding-bottom: 56.25%; }
        .project-card[data-ar="1:1"]  .video-container { padding-bottom: 100%; }
        .project-card[data-ar="9:16"] .video-container { padding-bottom: 177.78%; }

        /* Suporte a Vídeos Verticais 9:16 (177,78% = 16 ÷ 9, proporção exata) */
        .card-vertical .video-container {
            padding-bottom: 177.78%;
            background: #050508;
        }

        .card-vertical .video-thumbnail,
        .card-vertical .video-preview-element {
            object-fit: cover;
            object-position: center;
            width: 100%;
            height: 100%;
        }

        /* ----------------------------------------------------------------
           CARD VERTICAL EM FAIXA HORIZONTAL (.card-inline)
           Para o vídeo 9:16 órfão que precisa fechar uma linha de cards 16:9.
           Em vez de tarja preta, o próprio quadro é usado como fundo desfocado.
           O container precisa de --thumb: url(...) inline.
           ---------------------------------------------------------------- */
        .card-vertical.card-inline .video-container {
            padding-bottom: 56.25%;
            background: #050508;
        }

        .card-vertical.card-inline .video-container::before {
            content: '';
            position: absolute;
            inset: -8%;
            background-image: var(--thumb);
            background-size: cover;
            background-position: center;
            filter: blur(26px) saturate(1.35) brightness(0.5);
            z-index: 0;
        }

        .card-vertical.card-inline .video-thumbnail,
        .card-vertical.card-inline .video-preview-element {
            object-fit: contain;
        }

        .card-vertical.card-inline .video-thumbnail { z-index: 1; }

        /* Torre vertical: card 9:16 ocupando 2 linhas ao lado de 16:9 empilhados */
        .card-tall { grid-row: span 2; }
        .card-span-8 { grid-column: span 8; }

        /* Tags Modelo 14 (Raycast Keycap) específicas da Categoria 4 */
        .badge-keycap {
            position: absolute;
            top: 10px;
            left: 10px;
            background: #18181c;
            border: 1px solid #2e2e36;
            border-bottom: 2px solid #0f0f12;
            font-family: var(--font-mono);
            font-weight: 600;
            font-size: 8.5px;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            padding: 3px 8px;
            border-radius: 5px;
            z-index: 3;
            color: #e4e4e7;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
            line-height: 1.2;
        }

        @media (max-width: 1100px) {
            .card-span-7, .card-span-5, .card-span-6, .card-span-8 { grid-column: span 12; }
            .card-span-3 { grid-column: span 6; }
            /* .card-span-4 continua com span 4 (3 por linha) de propósito:
               as faixas de formato têm 3 cards; encolher para 2 por linha
               deixaria 1 card sobrando, que se juntaria à faixa seguinte
               e voltaria a misturar 16:9 com 9:16 na mesma linha. */
            .card-tall { grid-row: auto; }
        }

        @media (max-width: 680px) {
            .card-span-4, .card-span-3 { grid-column: span 12; }
        }

        /* Card único de feedback (Categoria 7) dimensionado harmoniosamente */
        #feedback-de-clientes .project-card {
            grid-column: span 4;
            max-width: 440px;
        }
        @media (max-width: 1024px) {
            #feedback-de-clientes .project-card {
                grid-column: span 12;
                max-width: 420px;
            }
        }
        @media (max-width: 680px) {
            #feedback-de-clientes .project-card {
                max-width: 100%;
            }
        }

        /* --- PREVIEWS ANIMADOS DINÂMICOS ON-HOVER --- */
        .video-container {
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }

        .video-preview-element {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0;
            transition: opacity 0.35s ease;
            z-index: 2;
            pointer-events: none;
        }

        .video-preview-element.active {
            opacity: 1;
        }

        .project-card.is-previewing .play-button {
            opacity: 0.25;
            transform: translate(-50%, -50%) scale(0.85);
        }


        /* ================================================================
           SEÇÃO #SOBRE MIM
        ================================================================ */
        #sobre {
            padding: 80px 5% 60px;
            max-width: 1200px;
            margin: 0 auto;
        }

        /* Topo: foto + texto lado a lado */
        .sobre-container {
            display: grid;
            grid-template-columns: 260px 1fr;
            gap: 48px;
            align-items: flex-start;
            margin-bottom: 56px;
        }

        .sobre-profile-pic {
            order: -1;
            flex-shrink: 0;
        }

        .sobre-profile-pic img {
            width: 100%;
            max-width: 260px;
            aspect-ratio: 1 / 1;
            object-fit: cover;
            border-radius: 20px;
            border: 2px solid rgba(0, 177, 190, 0.25);
            box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.04);
            display: block;
        }

        .sobre-intro-text .section-title {
            font-size: clamp(2rem, 4vw, 3rem);
            text-align: left;
            margin-bottom: 20px;
            opacity: 1 !important;
            transform: none !important;
        }

        .sobre-intro-text p {
            font-family: var(--font-body);
            color: rgba(255, 255, 255, 0.7);
            font-size: 1rem;
            line-height: 1.75;
            margin-bottom: 14px;
        }

        /* Linha de detalhes: stats + educação */
        .sobre-details {
            display: grid;
            grid-template-columns: 1fr;
            gap: 32px;
        }

        /* Coluna de stats */
        .stats-column {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 14px;
        }

        .stat-badge {
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.07);
            border-radius: 16px;
            padding: 20px 16px;
            text-align: center;
            transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
        }

        .stat-badge:hover {
            background: rgba(0, 177, 190, 0.07);
            border-color: rgba(0, 177, 190, 0.25);
            transform: translateY(-3px);
        }

        .stat-badge .icon {
            font-size: 1.3rem;
            color: var(--primary, #00b1be);
            margin-bottom: 10px;
            line-height: 1;
        }

        .stat-badge .number {
            font-family: var(--font-heading, 'Unbounded', sans-serif);
            font-size: 1.65rem;
            font-weight: 800;
            color: #fff;
            line-height: 1;
            margin-bottom: 6px;
        }

        .stat-badge .label {
            font-family: var(--font-body, 'DM Sans', sans-serif);
            font-size: 0.72rem;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.5);
            text-transform: uppercase;
            letter-spacing: 0.06em;
            line-height: 1.3;
        }

        /* Coluna de educação */
        /* Responsive */
        @media (max-width: 900px) {
            .sobre-container {
                grid-template-columns: 1fr;
                gap: 32px;
            }
            .sobre-profile-pic {
                order: 0;
                max-width: 180px;
                margin: 0 auto;
            }
            .sobre-profile-pic img {
                max-width: 180px;
            }
            .sobre-intro-text .section-title {
                text-align: center;
            }
            .sobre-intro-text p {
                text-align: center;
            }
            .sobre-details {
                grid-template-columns: 1fr;
            }
            .stats-column {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 480px) {
            #sobre {
                padding: 48px 5% 40px;
            }
            .stats-column {
                grid-template-columns: repeat(2, 1fr);
                gap: 10px;
            }
            .stat-badge .number {
                font-size: 1.35rem;
            }
        }

        /* ── Foco visível: quem navega por teclado precisa enxergar onde está ── */
        :focus-visible {
            outline: 2px solid var(--primary-hover, #22cddb);
            outline-offset: 3px;
            border-radius: 4px;
        }
        .project-card:focus-visible {
            outline-offset: 6px;
        }
        ::selection {
            background: var(--primary, #00b1be);
            color: #0a0a0c;
        }

        /* ── Fechamento: último passo antes do rodapé ── */
        .closing-cta {
            max-width: 780px;
            margin: 0 auto;
            padding: 140px 6% 120px;
            text-align: center;
        }
        .closing-cta-title {
            font-size: clamp(2rem, 5vw, 3.2rem);
            font-weight: 800;
            line-height: 1.05;
            margin: 0 0 20px;
            text-wrap: balance;
        }
        .closing-cta-desc {
            font-family: var(--font-body);
            font-size: 1.05rem;
            line-height: 1.7;
            color: var(--gray);
            max-width: 52ch;
            margin: 0 auto 40px;
            text-wrap: pretty;
        }
        .closing-cta-meta {
            font-family: var(--font-body);
            font-size: 0.8rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: rgba(255,255,255,0.55);
            margin: 28px 0 0;
        }
        @media (max-width: 768px) {
            .closing-cta { padding: 90px 6% 70px; }
            .closing-cta-btn { width: 100%; }
        }