/* ==========================================
   1. RESET & DESIGN TOKENS
   ========================================== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg: #07090a;
    --bg-soft: #0c0f10;
    --text: #f4f6f5;
    --text-muted: #f4f6f5;
    --text-dim: #f4f6f5;
    --accent: #3fd6b8;
    --accent-dim: rgba(63, 214, 184, 0.14);
    --accent-line: rgba(63, 214, 184, 0.35);
    --glass-bg: rgba(255, 255, 255, 0.04);
    --glass-bg-strong: rgba(255, 255, 255, 0.07);
    --glass-border: rgba(255, 255, 255, 0.14);
    --glass-highlight: rgba(255, 255, 255, 0.3);
    --shadow-color: 178, 210, 202;
    --radius-xl: 32px;
    --radius-lg: 24px;
    --radius-md: 16px;
    --radius-sm: 10px;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* overflow-x: clip (não hidden) — clipa o excesso horizontal SEM criar um scroll
   container, senão o eixo Y vira "auto" e quebra os scroll-driven animations (view()). */
html { scroll-behavior: smooth; overflow-x: clip; }

body {
    background-color: var(--bg);
    color: var(--text);
    overflow-x: clip;
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    position: relative;
}

/* Fundo animado (wavy), fixo atrás de todo o conteúdo, visível abaixo do vídeo do hero */
#wavy-bg {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100lvh; /* iOS: cobre a área atrás da barra do Safari quando ela recolhe */
    z-index: 0;
    pointer-events: none;
    display: block;
    filter: blur(8px); /* blur do fundo via GPU (antes era ctx.filter por CPU, caro) */
}

/* Grain overlay para quebrar o flat digital */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.035;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, h4 {
    font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
    font-weight: 700;
    text-wrap: balance;
}

a { color: inherit; }

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

::selection { background: var(--accent); color: #06110d; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

.container { padding: 0 5%; }

/* ==========================================
   2. GLASSMORPHISM
   ========================================== */
.liquid-glass {
    position: relative;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(12px) saturate(180%) brightness(1.06);
    -webkit-backdrop-filter: blur(12px) saturate(180%) brightness(1.06);
    z-index: 1;
    overflow: hidden;
    /* Liquid Glass (iOS 26): especular no topo-esquerda + rim de "refração"
       embaixo, tudo inset shadow (barato) — sem filtro SVG, que é CPU no iOS */
    box-shadow:
        inset 1.5px 1.5px 1px -1px rgba(255, 255, 255, 0.4),
        inset -1.5px -1.5px 1px -1px rgba(255, 255, 255, 0.16),
        inset 0 0 18px 6px rgba(255, 255, 255, 0.03),
        0 20px 40px -20px rgba(var(--shadow-color), 0.25);
}

/* (removido) o ::before com filter:url(#glass-distortion) — o pseudo-elemento era
   transparente, então o deslocamento não produzia NADA visível, mas o iOS avaliava
   o filtro SVG (feTurbulence, por CPU) em cada um dos ~20 painéis. Custo real,
   efeito zero. Os <svg> de filtro nos HTML ficaram órfãos e são inertes. */

.liquid-glass-strong {
    background: var(--glass-bg-strong);
}

/* Painel de vidro pra blocos de texto "soltos" (títulos, parágrafos, headers de seção) */
.text-panel {
    padding: 42px 46px;
}

/* Animações de Scroll */
.fade-up {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

.stagger > * { transition-delay: calc(var(--i, 0) * 90ms); }

/* ==========================================
   3. TIPOGRAFIA UTILITÁRIA
   ========================================== */
.eyebrow {
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-size: 0.78rem;
    font-weight: 700;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.eyebrow::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 12px var(--accent);
}

.section-title {
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -1px;
    margin-bottom: 24px;
}

.section-lead { color: var(--text-muted); font-size: 1.1rem; line-height: 1.7; max-width: 60ch; }

/* ==========================================
   4. BOTÕES
   ========================================== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 17px 34px;
    border-radius: 100px;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.2px;
    text-decoration: none;
    transition: transform 0.35s var(--ease), background 0.3s, box-shadow 0.3s, border-color 0.3s;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
    background: var(--text);
    color: #06110d;
}
.btn-primary:hover {
    background: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px -10px rgba(var(--shadow-color), 0.55);
}

.btn-ghost {
    background: var(--glass-bg);
    color: var(--text);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(12px);
}
.btn-ghost:hover {
    border-color: var(--accent-line);
    background: var(--accent-dim);
    transform: translateY(-2px);
}

.btn-sm { padding: 12px 24px; font-size: 0.85rem; }

.btn-arrow { transition: transform 0.35s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(4px); }

/* ==========================================
   5. HEADER / NAVEGAÇÃO
   ========================================== */
header {
    position: fixed;
    top: 0; left: 0; width: 100%;
    padding: 22px 5%;
    z-index: 1000;
    transition: padding 0.4s var(--ease);
}
header.scrolled { padding: 12px 5%; }

nav {
    padding: 12px 14px 12px 26px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 100px;
    transition: background 0.4s, border-color 0.4s, box-shadow 0.4s;
}
header.scrolled nav {
    background: rgba(7, 9, 10, 0.55);
    box-shadow: 0 12px 40px -18px rgba(0,0,0,0.7);
}

.logo-group { display: flex; align-items: center; gap: 11px; text-decoration: none; cursor: pointer; }
.logo-mark {
    width: 34px; height: 34px;
    border-radius: 10px;
    background: linear-gradient(155deg, var(--accent), #1c8f79);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    color: #06110d;
    font-size: 1.05rem;
    flex-shrink: 0;
}
.logo-word { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 1.08rem; letter-spacing: -0.2px; }
.logo-word span { display: block; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.62rem; letter-spacing: 2.5px; text-transform: uppercase; color: var(--text-dim); margin-top: 1px; }
.brand-logo { height: 38px; width: auto; display: block; filter: brightness(1.45) saturate(1.1) drop-shadow(0 1px 4px rgba(0,0,0,0.5)); }
.footer-brand .brand-logo { height: 46px; }
@media (max-width: 620px) { .brand-logo { height: 32px; } }

.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.87rem;
    font-weight: 500;
    padding: 10px 18px;
    border-radius: 100px;
    transition: color 0.3s, background 0.3s;
    position: relative;
}
.nav-links a:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.nav-links a.active { color: var(--text); }
.nav-links a.active::after {
    content: "";
    position: absolute;
    left: 18px; right: 18px; bottom: 6px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
}

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

.nav-toggle {
    display: none;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
    content: "";
    display: block;
    width: 16px; height: 1.5px;
    background: var(--text);
    position: relative;
    transition: transform 0.35s var(--ease), opacity 0.25s;
}
.nav-toggle span::before { position: absolute; top: -5px; }
.nav-toggle span::after { position: absolute; top: 5px; }
.nav-toggle.open span { background: transparent; }
.nav-toggle.open span::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle.open span::after { transform: translateY(-5px) rotate(-45deg); }

.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(5, 6, 7, 0.85);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.mobile-menu.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.mobile-menu a {
    color: var(--text);
    text-decoration: none;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    padding: 14px 0;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.mobile-menu.open a { opacity: 1; transform: translateY(0); }
.mobile-menu.open a:nth-child(1) { transition-delay: 0.08s; }
.mobile-menu.open a:nth-child(2) { transition-delay: 0.14s; }
.mobile-menu.open a:nth-child(3) { transition-delay: 0.2s; }
.mobile-menu.open a:nth-child(4) { transition-delay: 0.26s; }
.mobile-menu .btn { opacity: 0; transform: translateY(16px); transition: opacity 0.5s var(--ease) 0.32s, transform 0.5s var(--ease) 0.32s; font-size: 1rem; }
.mobile-menu.open .btn { opacity: 1; transform: translateY(0); }
/* o `.mobile-menu a` (texto branco 2rem dos links) tinha especificidade maior que
   `.btn-primary` e deixava o botão com texto branco no fundo branco (invisível) */
.mobile-menu a.btn-primary { color: #06110d; }

/* ==========================================
   6. HERO (HOME, COM VÍDEO)
   ========================================== */
.hero {
    position: relative;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 140px 5% 0;
    background: var(--bg);
}
.video-bg {
    position: absolute;
    top: 50%; left: 50%;
    min-width: 100%; min-height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 0;
    /* opacity: 1 — vídeo com opacidade <1 sai do caminho de composição direta do
       iOS (caro). O escurecimento de 10% que a opacidade dava foi movido pro
       overlay (primeira camada flat abaixo), resultado visual idêntico. */
    opacity: 1;
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(3,4,4,0.1), rgba(3,4,4,0.1)),
        linear-gradient(100deg, rgba(3,4,4,0.82) 0%, rgba(3,4,4,0.5) 38%, rgba(3,4,4,0.25) 62%, rgba(3,4,4,0.45) 100%),
        linear-gradient(0deg, var(--bg) 0%, rgba(3,4,4,0.1) 22%, transparent 55%);
    z-index: 1;
}
.hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 90px;
    padding-bottom: 60px;
}
.hero-content {
    /* Largura fixa (calculada uma vez em JS pra caber a palavra mais larga da
       lista) em vez de `fit-content` recalculado a cada troca — animar `width`
       num painel com `backdrop-filter` é caro (recalcula o blur do fundo a cada
       frame) e travava o vídeo do hero. Com a caixa fixa, o texto sempre cabe
       certinho e não precisa mais redimensionar nada. */
    width: fit-content;
    max-width: min(960px, 100%);
    align-self: flex-start;
    /* Blur do painel do hero reduzido pela metade (18px → 9px) — deixa o vídeo do
       mar mais visível através do vidro. */
    backdrop-filter: blur(9px) saturate(180%);
    -webkit-backdrop-filter: blur(9px) saturate(180%);
}
.hero-content.wr-panel-pulse {
    animation: panel-squish .85s cubic-bezier(.22, 1.9, .36, 1);
}
@keyframes panel-squish {
    0% { transform: scaleY(1); }
    22% { transform: scaleY(.965); }
    45% { transform: scaleY(1.03); }
    68% { transform: scaleY(.99); }
    100% { transform: scaleY(1); }
}
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 20px 9px 14px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 28px;
    color: var(--text-muted);
}
.hero-badge .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--accent);
    position: relative;
    flex-shrink: 0;
}
/* anel que expande via transform/opacity (compositor) — animar box-shadow
   repintava o badge de vidro a cada frame */
.hero-badge .dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(63, 214, 184, 0.55);
    animation: pulse-ring 2.2s ease-out infinite;
}
@keyframes pulse-ring {
    0% { transform: scale(1); opacity: 0.9; }
    70%, 100% { transform: scale(3); opacity: 0; }
}
.hero h1 {
    font-size: clamp(2.8rem, 5.4vw, 4.8rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -2px;
    margin-bottom: 24px;
    perspective: 500px;
    white-space: nowrap;
}
.hero h1 em {
    font-style: normal;
    color: var(--accent);
}

/* ==========================================
   6c. PALAVRA ROTATIVA DO HERO
   ========================================== */
/* Mantém palavra + rolo "?" sempre juntos (nunca separa um do outro ao quebrar).
   No mobile vira `display:block` (media query) pra a palavra cair na própria
   última linha. */
.wr-word-line { white-space: nowrap; }
.word-rotate-mask {
    display: inline-block;
    vertical-align: top;
}
.word-rotate-mask.wr-masked { overflow: hidden; }
.word-rotate {
    display: inline-block;
    color: var(--accent);
    font-style: normal;
    transform-style: preserve-3d;
    white-space: nowrap;
}
.word-rotate .letter {
    display: inline-block;
}
.word-rotate.wr-typing::after {
    content: "";
    display: inline-block;
    width: .05em;
    margin-left: .06em;
    border-right: 3px solid var(--accent);
    animation: wr-blink .8s step-end infinite;
}

/* Rolo tipo caça-níquel: gira enquanto a palavra troca, para quando ela se forma */
.wr-slots {
    display: inline-flex;
    margin-left: 5px;
    vertical-align: baseline;
}
.slot-reel {
    display: inline-block;
    width: 0.62em;
    text-align: center;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 1em;
    font-weight: 800;
    color: #ff3b3b;
    text-shadow: 0 0 10px rgba(255, 59, 59, 0.55), 0 0 22px rgba(255, 59, 59, 0.25);
    filter: blur(0);
    transition: filter .1s ease-out;
}
.slot-reel.spinning { filter: blur(1.6px); }

@keyframes wr-blink { 50% { opacity: 0; } }

@keyframes wr-flip-out {
    to { transform: rotateX(80deg) translateY(-.15em); opacity: 0; }
}
@keyframes wr-flip-in {
    from { transform: rotateX(-80deg) translateY(.15em); opacity: 0; }
    to { transform: rotateX(0) translateY(0); opacity: 1; }
}
@keyframes wr-blur-out {
    to { filter: blur(10px); transform: scale(.82); opacity: 0; }
}
@keyframes wr-blur-in {
    from { filter: blur(10px); transform: scale(1.18); opacity: 0; }
    to { filter: blur(0); transform: scale(1); opacity: 1; }
}
@keyframes wr-drop-out {
    to { transform: translateY(.5em) rotate(6deg); opacity: 0; }
}
@keyframes wr-drop-in {
    from { transform: translateY(-.5em) rotate(-6deg); opacity: 0; }
    to { transform: translateY(0) rotate(0); opacity: 1; }
}
@keyframes wr-flap-in {
    from { transform: rotateX(-95deg); opacity: 0; }
    to { transform: rotateX(0); opacity: 1; }
}
/* Shutter: abre na vertical (scaleY), como uma persiana. */
@keyframes wr-shutter-out {
    to { transform: scaleY(0); opacity: 0; }
}
@keyframes wr-shutter-in {
    0% { transform: scaleY(0); opacity: 0; }
    62% { transform: scaleY(1.08); opacity: 1; }
    100% { transform: scaleY(1); }
}
/* Unroll: desenrola da esquerda pra direita (scaleX a partir da borda esquerda). */
@keyframes wr-unroll-out {
    to { transform: scaleX(0); opacity: 0; }
}
@keyframes wr-unroll-in {
    0% { transform: scaleX(0); opacity: 0; }
    100% { transform: scaleX(1); opacity: 1; }
}
@keyframes wr-glitch-out {
    0% { transform: translate(0); opacity: 1; }
    25% { transform: translate(-3px, 2px); }
    50% { transform: translate(3px, -2px); opacity: .7; }
    75% { transform: translate(-2px, 1px); opacity: .3; }
    100% { transform: translate(0); opacity: 0; }
}
@keyframes wr-glitch-in {
    0% { transform: translate(2px, -2px); opacity: 0; text-shadow: -2px 0 #ff6a5c, 2px 0 #3fd6b8; }
    35% { transform: translate(-3px, 2px); opacity: 1; text-shadow: 2px 0 #ff6a5c, -2px 0 #3fd6b8; }
    65% { transform: translate(2px, -1px); text-shadow: -1px 0 #ff6a5c, 1px 0 #3fd6b8; }
    100% { transform: translate(0); text-shadow: none; }
}
@keyframes wr-cube-out {
    to { transform: rotateY(-85deg) translateX(-.1em); opacity: 0; }
}
@keyframes wr-cube-in {
    from { transform: rotateY(85deg) translateX(.1em); opacity: 0; }
    to { transform: rotateY(0) translateX(0); opacity: 1; }
}
@keyframes wr-elastic-out {
    to { transform: scale(.4); opacity: 0; }
}
@keyframes wr-elastic-in {
    0% { transform: scale(.3); opacity: 0; }
    55% { transform: scale(1.16); opacity: 1; }
    75% { transform: scale(.93); }
    100% { transform: scale(1); }
}
@keyframes wr-neon-out {
    to { opacity: 0; text-shadow: none; }
}
@keyframes wr-neon-in {
    0% { opacity: 0; text-shadow: none; }
    12% { opacity: 1; text-shadow: 0 0 6px var(--accent), 0 0 18px var(--accent); }
    22% { opacity: .25; text-shadow: none; }
    32% { opacity: 1; text-shadow: 0 0 6px var(--accent), 0 0 18px var(--accent); }
    46% { opacity: .3; text-shadow: none; }
    62% { opacity: 1; text-shadow: 0 0 8px var(--accent), 0 0 22px var(--accent), 0 0 34px rgba(63,214,184,.5); }
    100% { opacity: 1; text-shadow: 0 0 8px var(--accent), 0 0 22px var(--accent), 0 0 34px rgba(63,214,184,.5); }
}
@keyframes wr-zoom-out {
    /* scale limitado a 1.6 (era 2.1): a 2.1 a palavra mais larga estourava a borda
       direita do painel em ~70px e era cortada pelo overflow:hidden. 1.6 mantém o
       zoom dramático com ~25px de folga. */
    to { transform: scale(1.6) rotate(10deg); opacity: 0; filter: blur(4px); }
}
@keyframes wr-zoom-in {
    from { transform: scale(.3) rotate(-10deg); opacity: 0; filter: blur(4px); }
    to { transform: scale(1) rotate(0); opacity: 1; filter: blur(0); }
}
@keyframes wr-wipe-out {
    to { clip-path: inset(0 0 0 100%); opacity: .4; }
}
@keyframes wr-wipe-in {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
}
.word-rotate.wr-out-flip { animation: wr-flip-out .32s var(--ease) forwards; }
.word-rotate.wr-in-flip { animation: wr-flip-in .38s var(--ease) forwards; }
.word-rotate.wr-out-blur { animation: wr-blur-out .3s var(--ease) forwards; }
.word-rotate.wr-in-blur { animation: wr-blur-in .42s var(--ease) forwards; }
.word-rotate.wr-out-drop { animation: wr-drop-out .3s var(--ease) forwards; }
.word-rotate.wr-in-drop { animation: wr-drop-in .4s var(--ease) forwards; }
.word-rotate.wr-out-glitch { animation: wr-glitch-out .28s ease-in-out forwards; }
.word-rotate.wr-in-glitch { animation: wr-glitch-in .38s ease-in-out forwards; }
.word-rotate.wr-out-cube { animation: wr-cube-out .32s var(--ease) forwards; }
.word-rotate.wr-in-cube { animation: wr-cube-in .38s var(--ease) forwards; }
.word-rotate.wr-out-elastic { animation: wr-elastic-out .22s ease-in forwards; }
.word-rotate.wr-in-elastic { animation: wr-elastic-in .55s cubic-bezier(.34,1.56,.64,1) forwards; }
.word-rotate.wr-out-neon { animation: wr-neon-out .2s ease forwards; }
.word-rotate.wr-in-neon { animation: wr-neon-in .9s ease forwards; }
.word-rotate.wr-out-zoom { animation: wr-zoom-out .3s var(--ease) forwards; }
.word-rotate.wr-in-zoom { animation: wr-zoom-in .42s var(--ease) forwards; }
.word-rotate.wr-out-wipe { animation: wr-wipe-out .26s ease-in forwards; }
.word-rotate.wr-in-wipe { animation: wr-wipe-in .4s var(--ease) forwards; }
.word-rotate.wr-out-shutter { animation: wr-shutter-out .3s var(--ease) forwards; }
.word-rotate.wr-in-shutter { animation: wr-shutter-in .46s var(--ease) forwards; }
.word-rotate.wr-out-unroll { animation: wr-unroll-out .3s var(--ease) forwards; transform-origin: left center; }
.word-rotate.wr-in-unroll { animation: wr-unroll-in .46s var(--ease) forwards; transform-origin: left center; }
.hero p {
    font-size: 1.15rem;
    color: var(--text-muted);
    max-width: 520px;
    margin-bottom: 40px;
    line-height: 1.65;
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

.hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    align-self: flex-start;
    padding: 6px 6px;
}
.hero-stats .stat { padding: 16px 34px; text-align: left; position: relative; }
.hero-stats .stat + .stat::before {
    content: "";
    position: absolute;
    left: 0; top: 14px; bottom: 14px;
    width: 1px;
    background: var(--glass-border);
}
.hero-stats .stat h3 {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 2px;
}
.hero-stats .stat p { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); margin-bottom: 0; }

.scroll-cue {
    position: absolute;
    right: 5%; bottom: 34px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--text-dim);
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    writing-mode: vertical-rl;
}
.scroll-cue .line { width: 1px; height: 46px; background: linear-gradient(var(--accent), transparent); animation: scroll-cue-move 2s infinite var(--ease); }
@keyframes scroll-cue-move { 0%,100% { transform: scaleY(1); transform-origin: top; } 50% { transform: scaleY(0.5); transform-origin: top; } }

/* ==========================================
   6b. PAGE HERO (páginas internas, sem vídeo)
   ========================================== */
.page-hero {
    position: relative;
    padding: 190px 5% 100px;
    overflow: hidden;
}
.page-hero::before {
    content: "";
    position: absolute;
    top: -20%; right: -10%;
    width: 60%; height: 140%;
    background: radial-gradient(circle, var(--accent-dim) 0%, transparent 70%);
    filter: blur(40px);
    z-index: 0;
    pointer-events: none;
}
.page-hero-inner { position: relative; z-index: 1; }
.breadcrumb {
    display: flex; align-items: center; gap: 8px;
    color: var(--text-dim); font-size: 0.85rem; margin-bottom: 28px;
}
.breadcrumb a { color: var(--text-dim); text-decoration: none; transition: color 0.3s; }
.breadcrumb a:hover { color: var(--accent); }

/* ==========================================
   7. MARQUEE
   ========================================== */
.marquee-wrapper {
    padding: 36px 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    overflow: hidden;
    display: flex;
    background: rgba(255, 255, 255, 0.025);
    backdrop-filter: blur(12px) saturate(180%) brightness(1.06);
    -webkit-backdrop-filter: blur(12px) saturate(180%) brightness(1.06);
}
.marquee { display: flex; white-space: nowrap; animation: scroll-left 28s linear infinite; }
.marquee span {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    padding: 0 36px;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255,255,255,0.35);
    display: flex;
    align-items: center;
    gap: 36px;
}
.marquee span::after { content: "✦"; -webkit-text-stroke: 0; color: var(--accent); font-size: 0.9rem; }
@keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ==========================================
   8. SEÇÕES GERAIS
   ========================================== */
.section { padding: 130px 5%; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 60px; flex-wrap: wrap; }

.about-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 70px; align-items: center; }
.about-text p { font-size: 1.1rem; color: var(--text-muted); line-height: 1.75; margin-bottom: 20px; max-width: 62ch; }

.pillars { display: grid; gap: 16px; }
.pillar-card {
    padding: 26px 28px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    transition: border-color 0.35s, transform 0.35s var(--ease);
}
.pillar-card:hover { transform: translateX(4px); border-color: var(--accent-line); }
.pillar-num {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent);
    border: 1px solid var(--accent-line);
    border-radius: 50%;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pillar-card h4 { font-size: 1.1rem; margin-bottom: 6px; }
.pillar-card p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.55; }

/* ==========================================
   9. SERVIÇOS
   ========================================== */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 22px;
    margin-top: 20px;
}
.service-card {
    padding: 42px 36px;
    transition: transform 0.4s var(--ease), border-color 0.4s;
    display: flex;
    flex-direction: column;
    min-height: 300px;
}
.service-card:hover { transform: translateY(-8px); border-color: var(--accent-line); }
.service-index { color: var(--text-dim); font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; margin-bottom: auto; padding-bottom: 40px; }
.service-card h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 12px; }
.service-card p { color: var(--text-muted); line-height: 1.6; font-size: 0.98rem; }

/* ==========================================
   10. NICHOS
   ========================================== */
.niches-wrapper { border-radius: var(--radius-xl); padding: 70px 56px; margin-top: 24px; }
.niche-item { border-bottom: 1px solid rgba(255,255,255,0.08); padding: 36px 0; display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.niche-item:last-child { border-bottom: none; padding-bottom: 0; }
.niche-item:first-child { padding-top: 0; }
.niche-item h3 { font-size: 1.9rem; font-weight: 700; width: 38%; }
.niche-item p { width: 58%; color: var(--text-muted); font-size: 1.05rem; line-height: 1.6; }

/* ==========================================
   11. CASES (preview + grid completo)
   ========================================== */
#cases-preview { position: relative; overflow: hidden; }
#cases-preview .section-head,
#cases-preview .case-grid { position: relative; z-index: 2; }

.boxes-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--bg); }
.boxes-mask {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, var(--bg) 0%, transparent 12%, transparent 88%, var(--bg) 100%);
    pointer-events: none;
}
.boxes-grid {
    position: absolute;
    left: 50%; top: 50%;
    display: flex;
    transform: translate(-50%, -50%) skewX(-14deg) skewY(5deg);
    z-index: 0;
}
.boxes-row { display: flex; flex-direction: column; }
.box-cell {
    width: 88px; height: 44px;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    position: relative;
    background-color: transparent;
    transition: background-color 1.6s ease;
}
.box-cell:hover, .box-cell.is-hit { transition-duration: 0s; }
.box-cell--plus::before {
    content: "";
    position: absolute;
    top: -7px; left: -10px;
    width: 20px; height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.22)' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M12 6v12m6-6H6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}
.box-cell:nth-child(9n+1):hover, .box-cell:nth-child(9n+1).is-hit { background-color: rgba(63, 214, 184, 0.55); }
.box-cell:nth-child(9n+2):hover, .box-cell:nth-child(9n+2).is-hit { background-color: rgba(47, 174, 150, 0.55); }
.box-cell:nth-child(9n+3):hover, .box-cell:nth-child(9n+3).is-hit { background-color: rgba(28, 143, 121, 0.55); }
.box-cell:nth-child(9n+4):hover, .box-cell:nth-child(9n+4).is-hit { background-color: rgba(18, 74, 63, 0.7); }
.box-cell:nth-child(9n+5):hover, .box-cell:nth-child(9n+5).is-hit { background-color: rgba(126, 232, 211, 0.5); }
.box-cell:nth-child(9n+6):hover, .box-cell:nth-child(9n+6).is-hit { background-color: rgba(11, 46, 40, 0.75); }
.box-cell:nth-child(9n+7):hover, .box-cell:nth-child(9n+7).is-hit { background-color: rgba(63, 214, 184, 0.3); }
.box-cell:nth-child(9n+8):hover, .box-cell:nth-child(9n+8).is-hit { background-color: rgba(47, 174, 150, 0.35); }
.box-cell:nth-child(9n+9):hover, .box-cell:nth-child(9n+9).is-hit { background-color: rgba(126, 232, 211, 0.3); }
.case-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 22px; margin-top: 20px; }
.case-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4/5;
    background-color: var(--hue-b, #0a1210);
    background-image:
        linear-gradient(to top, rgba(5,9,11,0.92) 2%, rgba(5,9,11,0.5) 38%, rgba(5,9,11,0.12) 72%),
        var(--cover-img, linear-gradient(155deg, transparent, transparent)),
        linear-gradient(155deg,
            color-mix(in srgb, var(--hue-a, #14312c) 74%, transparent),
            color-mix(in srgb, var(--hue-b, #0a1210) 88%, transparent));
    background-size: cover, cover, cover;
    background-position: center, center, center;
    background-repeat: no-repeat;
    /* sem backdrop-filter aqui: a capa (jpg opaco) cobre o card inteiro, então o
       blur do fundo era invisível — mas re-filtrava o card toda vez que o grid de
       caixas animava atrás dele */
    box-shadow:
        inset 0 1px 0 var(--glass-highlight),
        inset 0 0 0 1px rgba(0,0,0,0.15),
        0 20px 40px -20px rgba(var(--shadow-color), 0.25);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 30px;
    border: 1px solid var(--glass-border);
    transition: transform 0.5s var(--ease), border-color 0.4s;
    text-decoration: none;
    color: var(--text);
}
.case-card::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.12), transparent 55%);
    pointer-events: none;
}
.case-card:hover { transform: translateY(-6px); border-color: var(--accent-line); }
.case-tag {
    align-self: flex-start;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    color: var(--accent);
    background: rgba(0,0,0,0.35);
    padding: 6px 14px;
    border-radius: 50px;
    margin-bottom: auto;
    position: relative;
    z-index: 1;
}
.case-card h3 { position: relative; z-index: 1; font-size: 1.5rem; margin-bottom: 6px; }
.case-card p { position: relative; z-index: 1; color: var(--text-muted); font-size: 0.9rem; }
.case-arrow {
    position: absolute; top: 26px; right: 26px; z-index: 1;
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: 1px solid var(--glass-border);
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.4s var(--ease), background 0.4s;
}
.case-card:hover .case-arrow { background: var(--accent); transform: rotate(45deg); }
.case-card:hover .case-arrow svg { stroke: #06110d; }

.case-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 44px; }
.filter-btn {
    padding: 10px 20px;
    border-radius: 50px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}
.filter-btn:hover { color: var(--text); }
.filter-btn.active { background: var(--accent); color: #06110d; border-color: var(--accent); }

/* ==========================================
   12. DEPOIMENTOS
   ========================================== */
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; margin-top: 20px; }
.testimonial-card { padding: 38px; display: flex; flex-direction: column; gap: 24px; }
.testimonial-card .quote-mark { font-family: 'Bricolage Grotesque', sans-serif; font-size: 2.6rem; color: var(--accent); line-height: 1; }
.testimonial-card p.quote { color: var(--text); font-size: 1.05rem; line-height: 1.65; }
.testimonial-author { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.author-avatar {
    width: 42px; height: 42px; border-radius: 50%;
    background: linear-gradient(155deg, var(--accent), #1c8f79);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; color: #06110d;
    flex-shrink: 0;
}
.author-name { font-weight: 600; font-size: 0.95rem; }
.author-role { font-size: 0.82rem; color: var(--text-dim); }

/* ==========================================
   13. CTA / CONTATO
   ========================================== */
.cta-banner {
    padding: 80px 60px;
    border-radius: var(--radius-xl);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cta-banner::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 0%, var(--accent-dim), transparent 65%);
    pointer-events: none;
}
.cta-banner h2 { position: relative; }
.cta-banner p { position: relative; color: var(--text-muted); font-size: 1.1rem; max-width: 55ch; margin: 0 auto 36px; }
.cta-banner .hero-ctas { position: relative; justify-content: center; }

.contact-layout { display: grid; grid-template-columns: 1fr 1.15fr; gap: 60px; align-items: start; }
.contact-info-card { padding: 40px; }
.contact-info-card .eyebrow { margin-bottom: 20px; }
.contact-channel {
    display: flex; align-items: center; gap: 16px;
    padding: 18px 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    text-decoration: none; color: var(--text);
}
.contact-channel:first-of-type { border-top: none; }
.channel-icon {
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--accent-dim); border: 1px solid var(--accent-line);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.channel-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); margin-bottom: 3px; }
.channel-value { font-weight: 600; font-size: 0.98rem; transition: color 0.3s; overflow-wrap: anywhere; }
.contact-channel:hover .channel-value { color: var(--accent); }
.social-row { display: flex; gap: 10px; margin-top: 28px; }
.social-row a {
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid var(--glass-border); background: var(--glass-bg);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    display: flex; align-items: center; justify-content: center;
    text-decoration: none; transition: border-color 0.3s, transform 0.3s;
}
.social-row a:hover { border-color: var(--accent-line); transform: translateY(-3px); }

.contact-form { padding: 44px; display: grid; gap: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 0.8rem; color: var(--text-dim); font-weight: 600; }
.field .required { color: var(--accent); }
.contact-form input, .contact-form textarea, .contact-form select {
    width: 100%; padding: 16px 18px; background: rgba(0,0,0,0.45);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm); color: var(--text); font-size: 0.95rem;
    outline: none; transition: border-color 0.3s, background 0.3s;
    font-family: 'Inter', sans-serif;
}
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus {
    border-color: var(--accent-line); background: rgba(0,0,0,0.6);
}
.contact-form .error-msg { color: #ff8a7a; font-size: 0.8rem; min-height: 1em; display: block; }
.field.invalid input, .field.invalid textarea { border-color: #ff8a7a; }
.form-note { font-size: 0.8rem; color: var(--text-dim); text-align: center; }
.form-success {
    display: none;
    text-align: center;
    padding: 60px 20px;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.form-success.visible { display: flex; }
.form-success .check {
    width: 60px; height: 60px; border-radius: 50%;
    background: var(--accent-dim); border: 1px solid var(--accent-line);
    display: flex; align-items: center; justify-content: center;
}

/* ==========================================
   14. FOOTER
   ========================================== */
footer {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 60px 5% 30px;
    background: rgba(255, 255, 255, 0.025);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
}
.footer-grid {
    display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 50px;
    padding-bottom: 50px;
}
.footer-brand p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; margin-top: 16px; max-width: 32ch; }
.footer-col h4 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-dim); margin-bottom: 18px; }
.footer-col a { display: block; color: var(--text-muted); text-decoration: none; font-size: 0.95rem; padding: 7px 0; transition: color 0.3s; width: fit-content; }
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
    padding-top: 26px; border-top: 1px solid rgba(255,255,255,0.06);
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
    color: var(--text-dim); font-size: 0.85rem;
}
.footer-legal { display: flex; gap: 20px; }
.footer-legal a { color: var(--text-dim); text-decoration: none; }
.footer-legal a:hover { color: var(--text-muted); }

/* ==========================================
   15. RESPONSIVIDADE
   ========================================== */
@media (max-width: 900px) {
    .about-grid { grid-template-columns: 1fr; }
    .contact-layout { grid-template-columns: 1fr; }
    .niche-item { flex-direction: column; align-items: flex-start; text-align: left; }
    .niche-item h3 { width: 100%; margin-bottom: 12px; font-size: 1.6rem; }
    .niche-item p { width: 100%; }
    .nav-links { display: none; }
    .nav-toggle { display: flex; }
    /* CTA da barra some no mobile — é redundante (está no menu hamburger e nos
       CTAs da página) e apertava o hamburger contra a borda em telas pequenas. */
    .nav-right .btn { display: none; }
    .marquee span { font-size: 1.1rem; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .scroll-cue { display: none; }
    .cta-banner { padding: 56px 28px; }
}
@media (max-width: 620px) {
    .footer-grid { grid-template-columns: 1fr; gap: 34px; }
    /* Estatísticas: 3 colunas compactas numa linha só (antes empilhavam vertical
       numa caixa muito alta com espaços grandes). */
    .hero-stats { width: 100%; flex-wrap: nowrap; gap: 0; padding: 4px; }
    .hero-stats .stat { flex: 1 1 0; min-width: 0; padding: 14px 6px; text-align: center; }
    .hero-stats .stat h3 { font-size: 1.35rem; }
    .hero-stats .stat p { font-size: 0.58rem; letter-spacing: 0.4px; }
    .hero-stats .stat + .stat::before { top: 12px; bottom: 12px; }
    .section { padding: 90px 5%; }
    .niches-wrapper { padding: 44px 26px; }
    .btn { padding: 15px 26px; font-size: 0.88rem; }
    /* No mobile o título pode quebrar em mais linhas (só entre palavras, nunca no
       meio de uma) — sem isso, "Elevando o seu negócio" e "ao próximo {palavra}"
       estouravam a largura da tela por causa do `white-space:nowrap` do desktop.
       Fonte maior (tem espaço no mobile com o texto empilhado). */
    .hero h1 { font-size: clamp(2rem, 9.6vw, 3rem); letter-spacing: -1px; white-space: normal; }
    /* Largura fixa (travada em px pelo JS pra desktop) não vale no mobile: deixa o
       painel fluido pra o texto quebrar dentro dele. */
    .hero-content { width: auto !important; max-width: 100%; }
    /* Paddings dos painéis eram 40-46px (desenhados pra desktop) — no mobile comem
       largura demais. Reduz pra sobrar espaço pro conteúdo. */
    .text-panel { padding: 26px 22px; }
    .contact-info-card { padding: 26px 22px; }
    .contact-form { padding: 26px 20px; }
    .page-hero { padding: 130px 5% 56px; }
    .cta-banner { padding: 48px 24px; }
    /* Badge em UMA linha (nowrap) — fonte/padding menores pra caber até em 344px. */
    .hero-badge { font-size: 0.64rem; padding: 8px 14px; white-space: nowrap; }
    /* No mobile a palavra rotativa cai na PRÓPRIA linha (a última), em vez de
       quebrar de forma imprevisível junto com "ao próximo" conforme o tamanho
       de cada palavra. "Elevando o seu negócio" pode quebrar; a palavra fica isolada. */
    .wr-word-line { display: block; }

    /* ---- CENTRALIZAÇÃO GERAL NO MOBILE ---- */
    .hero-content, .about-text, .page-hero-inner, .service-card,
    .contact-info-card, .footer-brand, .footer-col, .testimonial-card,
    .niches-wrapper, .section-head, .footer-bottom { text-align: center; }
    .eyebrow { justify-content: center; }
    .hero p, .about-text p, .section-lead, .footer-brand p { margin-left: auto; margin-right: auto; }
    .hero-ctas, .section-head, .footer-bottom { justify-content: center; }
    .service-card { align-items: center; }
    .niche-item { align-items: center; text-align: center; }
    .pillar-card { flex-direction: column; align-items: center; text-align: center; }
    .testimonial-card { align-items: center; }
    .testimonial-author { justify-content: center; }
    .contact-channel, .social-row, .case-filters { justify-content: center; }
    .field label { text-align: center; }
    .breadcrumb { justify-content: center; }
    .footer-brand .logo-group { display: inline-flex; }
    .footer-col a { margin-left: auto; margin-right: auto; }
}

/* ============================================================
   PÁGINA DE DETALHE DO CASE
   ============================================================ */
.case-detail-hero { padding: 140px 0 30px; }
.case-detail-hero .page-hero-inner { max-width: 840px; margin-left: auto; margin-right: auto; }
.case-back { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 0.85rem; text-decoration: none; margin-bottom: 20px; transition: color 0.3s, gap 0.3s; }
.case-back:hover { color: var(--accent); gap: 12px; }
.case-meta { display: flex; flex-wrap: wrap; gap: 16px 44px; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--glass-border); }
.case-meta .meta-item { display: flex; flex-direction: column; gap: 5px; }
.case-meta .meta-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 1.6px; color: var(--text-muted); font-weight: 700; }
.case-meta .meta-value { font-size: 0.98rem; font-weight: 600; color: var(--text); }

.case-feature { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--glass-border); box-shadow: 0 34px 70px -34px rgba(var(--shadow-color), 0.55); }
.case-feature img { width: 100%; display: block; }

.case-gallery { columns: 2; column-gap: 22px; margin-top: 22px; }
.case-gallery img { width: 100%; display: block; margin-bottom: 22px; border-radius: var(--radius-lg); border: 1px solid var(--glass-border); break-inside: avoid; }

.case-quote { text-align: center; max-width: 780px; margin: 0 auto; padding: 48px; }
.case-quote .quote-mark { font-family: Georgia, serif; font-size: 4rem; line-height: 0; color: var(--accent); display: block; height: 1.6rem; }
.case-quote p { font-size: 1.28rem; font-weight: 500; line-height: 1.6; margin: 22px 0 24px; }
.case-quote .q-author { font-weight: 700; }
.case-quote .q-role { color: var(--text-muted); font-size: 0.9rem; margin-top: 2px; }

.case-pager { display: flex; justify-content: space-between; gap: 16px; }
.case-pager a { display: flex; flex-direction: column; gap: 6px; padding: 22px 26px; border-radius: var(--radius-lg); text-decoration: none; color: var(--text); flex: 1 1 0; min-width: 0; transition: border-color 0.3s, transform 0.4s; border: 1px solid var(--glass-border); }
.case-pager a:hover { border-color: var(--accent-line); transform: translateY(-3px); }
.case-pager a.next { text-align: right; align-items: flex-end; }
.case-pager .p-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 1.6px; color: var(--text-muted); font-weight: 700; }
.case-pager .p-name { font-size: 1.12rem; font-weight: 700; }

@media (max-width: 700px) {
    .case-gallery { columns: 1; }
    .case-detail-hero { padding: 120px 0 18px; }
    .case-quote { padding: 34px 8px; }
    .case-quote p { font-size: 1.12rem; }
    .case-pager { flex-direction: column; }
    .case-pager a.next { text-align: left; align-items: flex-start; }
}

/* ============================================================
   PERFORMANCE MOBILE (iPhone 12 etc.)
   O custo dominante no iOS é recompor blur/backdrop-filter sobre
   camadas que mudam a cada frame (canvas de ondas, vídeo). Aqui:
   menos camadas de vidro vivas, sem blend-mode em tela cheia,
   reveals só com opacidade e sem squish no painel do hero.
   ============================================================ */
@media (max-width: 820px) {
    /* grain com mix-blend-mode em tela cheia força a recomposição da página
       inteira a cada frame do canvas/vídeo — e a 3,5% de opacidade numa tela
       de 6" é imperceptível */
    body::before { display: none; }

    /* onda mais suave no celular (estava "muito nítida"); o buffer do canvas
       também é upscalado (ver wavy-background.js), o que soma suavidade */
    #wavy-bg { filter: blur(9px); }

    .liquid-glass {
        backdrop-filter: blur(9px) saturate(170%);
        -webkit-backdrop-filter: blur(9px) saturate(170%);
    }
    /* o painel do hero vive sobre o vídeo (muda a cada frame): blur menor.
       Precisa vir DEPOIS do .liquid-glass acima pra vencer no cascade. */
    .hero-content {
        backdrop-filter: blur(8px) saturate(170%);
        -webkit-backdrop-filter: blur(8px) saturate(170%);
    }
    /* o marquee anima sem parar; vidro vivo aqui custa caro — um fundo
       translúcido estático mantém a mesma leitura */
    .marquee-wrapper {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(12, 15, 16, 0.55);
    }
    .mobile-menu {
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }
    /* transform animado num painel com backdrop-filter re-amostra o fundo a
       cada frame no iOS — no celular o reveal vira só fade, e o hero não faz
       squish a cada troca de palavra */
    .fade-up { transform: none; transition: opacity 0.55s var(--ease); }
    .hero-content.wr-panel-pulse { animation: none; }
}

/* Botão flutuante de WhatsApp */
/* ponytail: sem transform/filter no hover — vidro + transform trava no iOS (baseline iPhone 12) */
.wa-float {
    position: fixed;
    right: 22px;
    bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    z-index: 998;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-bg-strong);
    border: 1px solid var(--accent-line);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.wa-float:hover,
.wa-float:focus-visible {
    border-color: var(--accent);
    background: var(--accent-dim);
    box-shadow: 0 8px 28px rgba(63, 214, 184, 0.28);
}
@media (max-width: 640px) {
    .wa-float {
        right: 16px;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        width: 52px;
        height: 52px;
    }
}

/* Teste fundo synapse: hero sem vídeo — fundo transparente deixa o canvas
   aparecer; overlay (feito pra escurecer o vídeo do mar) sai junto.
   Pra voltar ao vídeo, apague este bloco e descomente o <video> no index. */
.hero { background: transparent; }
.hero-overlay { display: none; }

/* Divisor de seção "linha de horizonte": fio que some nas pontas + núcleo
   brilhante e bloom teal no centro (referência: landing pages dark tech).
   Estático de propósito — nada animado, custo zero por frame.
   Centro do vão: seções têm 130px embaixo + 20px em cima (90+20 no mobile);
   a fronteira fica a 130px do conteúdo e o centro a 75px — daí o shift de
   -55px (desktop) / -35px (mobile). */
.section-divider {
    --gap-shift: 55px;
    position: relative;
    z-index: 1;
    width: min(720px, 78%);
    height: 1px;
    margin: calc(-1 * var(--gap-shift)) auto var(--gap-shift);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35) 28%, rgba(255, 255, 255, 0.35) 72%, transparent);
    pointer-events: none;
    /* Revelação ligada ao scroll: nasce em 0, cresce até cheio quando chega ao
       centro da tela e some ao passar — reversível ao subir. Nativo via
       animation-timeline: view(), sem JS. Ease plástico no crescer e no sumir. */
    transform-origin: center;
    will-change: transform, opacity;
}
@supports (animation-timeline: view()) {
    @keyframes divider-reveal {
        /* Assimétrico e equilibrado: segura em 0 até 16% (aparece um pouco mais
           cedo), cresce até cheio perto do centro, e some de forma mais suave
           (56%→84%) depois do meio. */
        0%   { opacity: 0; transform: scaleX(0); }
        16%  { opacity: 0; transform: scaleX(0); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
        48%  { opacity: 1; transform: scaleX(1); }
        56%  { opacity: 1; transform: scaleX(1); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
        84%  { opacity: 0; transform: scaleX(0); }
        100% { opacity: 0; transform: scaleX(0); }
    }
    .section-divider {
        animation: divider-reveal linear both;
        animation-timeline: view();
    }
}
/* Sem scroll-driven (ou movimento reduzido): mostra o divisor cheio e estático. */
@media (prefers-reduced-motion: reduce) {
    .section-divider { animation: none; opacity: 1; transform: none; }
}
.section-divider::before {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 62%; height: 58px;
    background: radial-gradient(ellipse at center, rgba(63, 214, 184, 0.2), transparent 70%);
}
.section-divider::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 24%; height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), transparent);
    box-shadow: 0 0 12px rgba(63, 214, 184, 0.8), 0 0 34px rgba(63, 214, 184, 0.45);
}
@media (max-width: 820px) {
    .section-divider { --gap-shift: 35px; }
}