/* ============================================================
   BRANCT.Tech — Design System "Premium Light 2026"
   ------------------------------------------------------------
   Servido apenas pelas páginas já migradas para a nova
   linguagem visual. As páginas antigas continuam em main.css
   até migrarem (estratégia página-a-página, ver AUDIT.md).

   Camadas: reset → tokens → base → layout → components →
   sections → utilities. Motion sempre neutralizável por
   prefers-reduced-motion.
   ============================================================ */

@layer reset, tokens, base, layout, components, sections, utilities;

/* ===== FONTES SELF-HOSTED =====
   Variáveis, subset latin + latin-ext (PT/EN/IT + HR), woff2 locais.
   Substitui o CSS render-blocking do Google Fonts (~1s de LCP em 4G).
   Os woff2 críticos (latin) levam <link rel="preload"> nas páginas. */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('../fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('../fonts/bricolage-grotesque-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== RESET ===== */
@layer reset {
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
    img, svg, video { display: block; max-width: 100%; }
    input, button, textarea, select { font: inherit; color: inherit; }
    button { cursor: pointer; border: 0; background: none; }
    a { color: inherit; text-decoration: none; }
    ul[role="list"], ol[role="list"] { list-style: none; }
    @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
}

/* ===== TOKENS ===== */
@layer tokens {
    :root {
        /* Superfícies — base clara, cinzas quentes subtis */
        --bg:           #FAFAF9;   /* fundo do site */
        --surface:      #FFFFFF;   /* cards, painéis */
        --surface-2:    #F4F3F0;   /* secções alternadas, wells */
        --surface-ink:  #0D1B24;   /* painéis escuros (frames de produto) */
        --line:         #E8E6E1;   /* hairline padrão */
        --line-soft:    #F0EEE9;   /* hairline mais leve */

        /* Tinta */
        --ink:          #0D1B24;   /* texto principal — navy-petróleo da marca */
        --ink-2:        #3D4D59;   /* texto secundário */
        --muted:        #5C6B76;   /* texto de apoio (AA sobre --bg) */

        /* Acento — cyan da marca, escurecido para legibilidade em claro */
        --accent:        #0C7C8F;  /* interactivo: links, CTAs CRM, ícones */
        --accent-strong: #095E6E;  /* hover/active */
        --accent-tint:   #E3F4F6;  /* fundos de chip/realce */
        --accent-vivid:  #00F6EC;  /* SÓ decorativo: glows, marcas, detalhe sobre escuro */

        /* Secundária — roxo, disciplina máxima (produto/Beta) */
        --violet:        #8B5CF6;
        --violet-ink:    #6D28D9;  /* texto AA sobre claro */
        --violet-tint:   #F1EBFE;

        /* Semânticas */
        --success:       #15803D;
        --success-tint:  #E8F6EC;
        --error:         #B91C1C;
        --error-tint:    #FBEAEA;

        /* Tipografia */
        --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
        --font-body:    'Manrope', system-ui, sans-serif;
        /* Escala fluida (mobile-first) */
        --fs-display:   clamp(2.6rem, 1.7rem + 4.5vw, 5.2rem);   /* hero */
        --fs-h1:        clamp(2.2rem, 1.7rem + 2.5vw, 3.4rem);
        --fs-h2:        clamp(1.7rem, 1.4rem + 1.6vw, 2.5rem);
        --fs-h3:        clamp(1.15rem, 1.05rem + 0.4vw, 1.3rem);
        --fs-lead:      clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
        --fs-body:      1rem;
        --fs-small:     0.9rem;
        --fs-label:     0.75rem;

        /* Espaço — grelha 4px */
        --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
        --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
        --sp-12: 48px; --sp-16: 64px; --sp-24: 96px;
        --section-y: clamp(72px, 5vw + 40px, 136px);

        /* Raios */
        --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --r-full: 999px;

        /* Sombras — suaves, difusas (luz vinda de cima) */
        --sh-1: 0 1px 2px rgba(13,27,36,0.05);
        --sh-2: 0 1px 2px rgba(13,27,36,0.04), 0 8px 24px -8px rgba(13,27,36,0.10);
        --sh-3: 0 2px 4px rgba(13,27,36,0.04), 0 20px 48px -16px rgba(13,27,36,0.16);
        --sh-frame: 0 2px 6px rgba(13,27,36,0.06), 0 32px 80px -24px rgba(13,27,36,0.28);

        /* Motion */
        --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
        --dur-fast: 150ms; --dur: 250ms; --dur-slow: 450ms;

        /* Layout */
        --container: 1180px;
        --prose: 700px;

        color-scheme: light;
        accent-color: var(--accent);
    }
}

/* ===== BASE ===== */
@layer base {
    body {
        background: var(--bg);
        color: var(--ink);
        font-family: var(--font-body);
        font-size: var(--fs-body);
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        overflow-x: clip;
    }
    h1, h2, h3, h4 {
        font-family: var(--font-display);
        font-weight: 700;
        line-height: 1.06;
        letter-spacing: -0.025em;
        text-wrap: balance;
    }
    h1 { font-size: var(--fs-h1); }
    h2 { font-size: var(--fs-h2); }
    h3 { font-size: var(--fs-h3); line-height: 1.25; }
    p  { text-wrap: pretty; }
    strong { font-weight: 700; }
    ::selection { background: var(--accent-tint); color: var(--accent-strong); }

    a:focus-visible, button:focus-visible, input:focus-visible,
    select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
        border-radius: var(--r-sm);
    }

    .skip-link {
        position: absolute; left: var(--sp-4); top: -100px; z-index: 200;
        padding: var(--sp-3) var(--sp-5);
        background: var(--ink); color: #fff;
        border-radius: var(--r-md); font-weight: 600;
        transition: top var(--dur-fast) var(--ease);
    }
    .skip-link:focus { top: var(--sp-4); }
}

/* ===== LAYOUT ===== */
@layer layout {
    .container { width: min(92%, var(--container)); margin-inline: auto; }
    .section { padding-block: var(--section-y); position: relative; }
    .section--alt { background: var(--surface-2); }

    /* Aurora UI — gradiente vivo em deriva lenta (só em secções dark) */
    .aurora {
        position: absolute; inset: -25%; pointer-events: none; z-index: 0;
        background:
            radial-gradient(38% 34% at 28% 32%, rgba(0,246,236,0.13), transparent 60%),
            radial-gradient(34% 40% at 72% 64%, rgba(139,92,246,0.16), transparent 65%),
            radial-gradient(28% 30% at 55% 20%, rgba(79,168,232,0.10), transparent 60%);
        filter: blur(46px);
        animation: aurora-drift 24s ease-in-out infinite;
    }
    @keyframes aurora-drift {
        0%, 100% { transform: translate(-5%, -4%) rotate(0deg) scale(1); }
        50% { transform: translate(5%, 4%) rotate(6deg) scale(1.08); }
    }
    @media (prefers-reduced-motion: reduce) { .aurora { animation: none; } }
    .section--ink { position: relative; overflow: hidden; }
    .section--ink > .container { position: relative; z-index: 1; }

    /* Secção dark de impacto (estilo Apple: faixa preta entre secções claras) */
    .section--ink {
        background:
            radial-gradient(60% 50% at 80% 0%, rgba(0,246,236,0.10) 0%, transparent 60%),
            radial-gradient(50% 60% at 10% 100%, rgba(139,92,246,0.14) 0%, transparent 65%),
            var(--surface-ink);
        color: #F4F7F9;
    }
    .section--ink .section-head__sub, .section--ink p { color: #9FB1BC; }
    .section--ink .eyebrow { color: var(--accent-vivid); }
    .section--ink .eyebrow::before { background: var(--accent-vivid); box-shadow: 0 0 10px rgba(0,246,236,0.8); }
    .section--ink h2, .section--ink h3, .section--ink strong { color: #FFFFFF; }
    .section--ink .frame { box-shadow: 0 2px 6px rgba(0,0,0,0.4), 0 40px 100px -24px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.08); }

    /* Texto em gradiente (momentos-chave, estilo Apple Intelligence) */
    .text-gradient {
        background: linear-gradient(100deg, #00D8CE 0%, #4FA8E8 45%, #8B5CF6 100%);
        -webkit-background-clip: text; background-clip: text;
        -webkit-text-fill-color: transparent; color: transparent;
    }

    .section-head { max-width: 640px; margin-bottom: var(--sp-12); }
    .section-head--center { margin-inline: auto; text-align: center; }
    .section-head__sub { color: var(--muted); margin-top: var(--sp-4); font-size: var(--fs-lead); }

    /* Bento grid — 12 colunas, cartões com span variável */
    .bento {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: var(--sp-4);
    }
    .bento > * { grid-column: span 12; }
    @media (min-width: 720px) {
        .bento--2 > * { grid-column: span 6; }
        .bento .span-4 { grid-column: span 4; }
        .bento .span-5 { grid-column: span 5; }
        .bento .span-6 { grid-column: span 6; }
        .bento .span-7 { grid-column: span 7; }
        .bento .span-8 { grid-column: span 8; }
        .bento .span-12 { grid-column: span 12; }
    }

    /* Split hero (texto + visual de produto) */
    .split {
        display: grid;
        gap: var(--sp-12);
        align-items: center;
    }
    @media (min-width: 940px) {
        .split { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: var(--sp-16); }
    }
}

/* ===== COMPONENTS ===== */
@layer components {

    /* --- Eyebrow / kicker --- */
    .eyebrow {
        display: inline-flex; align-items: center; gap: var(--sp-2);
        font-size: var(--fs-label); font-weight: 700;
        letter-spacing: 0.12em; text-transform: uppercase;
        color: var(--accent-strong);
    }
    .eyebrow::before {
        content: ''; width: 6px; height: 6px; border-radius: 50%;
        background: var(--accent);
    }
    .eyebrow--violet { color: var(--violet-ink); }
    .eyebrow--violet::before { background: var(--violet); }

    /* --- Badges / chips --- */
    .chip {
        display: inline-flex; align-items: center; gap: var(--sp-2);
        padding: 5px 12px; border-radius: var(--r-full);
        font-size: var(--fs-small); font-weight: 600;
        background: var(--surface); border: 1px solid var(--line);
        color: var(--ink-2);
    }
    .chip svg { width: 14px; height: 14px; color: var(--success); flex-shrink: 0; }
    .chip--accent { background: var(--accent-tint); border-color: transparent; color: var(--accent-strong); }
    .badge-beta {
        display: inline-flex; align-items: center;
        padding: 3px 10px; border-radius: var(--r-full);
        font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
        background: var(--violet-tint); color: var(--violet-ink);
    }

    /* --- Botões 3D ---
       Disciplina de cor com significado de funil:
       .btn--primary (ink)  → CTAs da agência (proposta, contacto)
       .btn--accent  (teal) → CTAs do CRM (trial) — exclusivo do produto
       .btn--ghost          → ações secundárias
       Sólidos têm corpo 3D: aresta inferior (--btn-edge), afundam no
       press e um brilho varre a superfície no hover.                  */
    .btn {
        position: relative; overflow: hidden;
        display: inline-flex; align-items: center; justify-content: center; gap: 10px;
        padding: 14px 26px; border-radius: var(--r-full);
        font-weight: 700; font-size: 1rem; line-height: 1.2;
        white-space: nowrap;
        transition: transform var(--dur-fast) var(--ease),
                    box-shadow var(--dur-fast) var(--ease),
                    background var(--dur-fast) var(--ease),
                    border-color var(--dur-fast) var(--ease),
                    color var(--dur-fast) var(--ease);
    }
    .btn svg { width: 18px; height: 18px; transition: transform var(--dur-fast) var(--ease); }
    .btn:hover svg { transform: translateX(3px); }

    .btn--primary, .btn--accent {
        transform: translateY(calc(var(--btn-press, 0) * 1px));
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.16),
            0 calc(4px - var(--btn-press, 0) * 1px) 0 var(--btn-edge),
            0 calc(14px - var(--btn-press, 0) * 2px) 28px -10px var(--btn-glow, rgba(13,27,36,0.35));
    }
    .btn--primary:active, .btn--accent:active { --btn-press: 4; }

    .btn--primary { background: var(--ink); color: #fff; --btn-edge: #02080D; }
    .btn--primary:hover { background: #162833; }

    .btn--accent { background: var(--accent); color: #fff; --btn-edge: #064450; --btn-glow: rgba(12,124,143,0.5); }
    .btn--accent:hover { background: var(--accent-strong); }

    /* Brilho que varre a superfície dos botões sólidos */
    .btn--primary::after, .btn--accent::after {
        content: ''; position: absolute; inset: 0; pointer-events: none;
        background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.22) 48%, rgba(0,246,236,0.10) 52%, transparent 70%);
        transform: translateX(-120%) skewX(-12deg);
    }
    .btn--primary:hover::after, .btn--accent:hover::after {
        transform: translateX(120%) skewX(-12deg);
        transition: transform 0.55s var(--ease);
    }

    .btn--ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); }
    .btn--ghost:hover { border-color: var(--ink); transform: translateY(-1px); }
    .btn--ghost:active { transform: translateY(0); }

    .btn--lg { padding: 18px 34px; font-size: 1.06rem; }
    .btn--sm { padding: 10px 18px; font-size: var(--fs-small); }

    @media (prefers-reduced-motion: reduce) {
        .btn--primary::after, .btn--accent::after { display: none; }
    }

    /* --- Tilt 3D (cards que seguem o cursor) ---
       JS (branct.js) escreve --rx/--ry/--mx/--my; aqui só se desenha.
       .tilt__pop dentro do card flutua em translateZ.
       Desativado em ecrã táctil e reduced-motion (fica card normal). */
    .tilt { position: relative; transform-style: preserve-3d; will-change: transform; }
    .tilt > * { transform-style: preserve-3d; }
    .tilt__pop { transform: translateZ(34px); }
    .tilt__pop--far { transform: translateZ(54px); }
    @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
        .tilt {
            transform: perspective(900px)
                       rotateX(calc(var(--rx, 0) * 1deg))
                       rotateY(calc(var(--ry, 0) * 1deg));
            transition: transform 0.25s var(--ease);
        }
        .tilt.is-tilting { transition: transform 0.08s linear; }
        /* Glare — reflexo que segue o cursor */
        .tilt::before {
            content: ''; position: absolute; inset: 0; z-index: 1;
            border-radius: inherit; pointer-events: none;
            background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%),
                        rgba(255,255,255,0.55), rgba(255,255,255,0.0) 45%);
            opacity: 0; transition: opacity var(--dur) var(--ease);
            mix-blend-mode: soft-light;
        }
        /* Aro de luz cyan na borda, acende perto do cursor */
        .tilt::after {
            content: ''; position: absolute; inset: -1px; z-index: 0;
            border-radius: inherit; pointer-events: none; padding: 1px;
            background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
                        rgba(12,124,143,0.55), rgba(0,246,236,0.18) 40%, transparent 65%);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor; mask-composite: exclude;
            opacity: 0; transition: opacity var(--dur) var(--ease);
        }
        .tilt.is-tilting::before, .tilt.is-tilting::after { opacity: 1; }
    }

    /* --- Frame com perspetiva 3D (endireita no hover) --- */
    @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
        .frame--persp {
            transform: perspective(1400px) rotateX(8deg) rotateY(-9deg) rotateZ(1deg);
            transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
        }
        .frame--persp:hover { transform: perspective(1400px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
    }

    /* --- Card base / bento card --- */
    .card {
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--r-lg);
        padding: var(--sp-8);
        box-shadow: var(--sh-1);
        transition: border-color var(--dur) var(--ease),
                    box-shadow var(--dur) var(--ease),
                    transform var(--dur) var(--ease);
    }
    .card--hover:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: #D8D5CE; }

    /* Tiles coloridos no bento (estilo grid da Apple: cada tile com fundo próprio) */
    .card--tint-cyan {
        background: linear-gradient(165deg, #EAF7F8 0%, #DFF2F4 100%);
        border-color: rgba(12,124,143,0.16);
    }
    .card--tint-violet {
        background: linear-gradient(165deg, #F3EEFC 0%, #ECE4FA 100%);
        border-color: rgba(139,92,246,0.20);
    }
    .card--tint-violet .card__icon { background: rgba(139,92,246,0.14); color: var(--violet-ink); }
    .card--ink {
        background:
            radial-gradient(70% 60% at 85% 10%, rgba(0,246,236,0.16) 0%, transparent 60%),
            radial-gradient(60% 50% at 10% 100%, rgba(139,92,246,0.18) 0%, transparent 65%),
            var(--surface-ink);
        border-color: rgba(255,255,255,0.10);
        color: #F4F7F9;
        position: relative; overflow: hidden;
    }
    .card--ink > :not(.aurora) { position: relative; z-index: 1; }
    .card--ink h3 { color: #FFFFFF; }
    .card--ink p { color: #A9BAC4; }
    .card--ink .card__icon { background: rgba(0,246,236,0.12); color: var(--accent-vivid); }
    .card--ink.card--hover:hover { border-color: rgba(0,246,236,0.35); box-shadow: 0 2px 6px rgba(13,27,36,0.2), 0 24px 60px -16px rgba(13,27,36,0.45); }
    .card--ink .eyebrow { color: var(--accent-vivid); }
    .card--ink .eyebrow::before { background: var(--accent-vivid); }
    .card--ink .btn--ghost { border-color: rgba(255,255,255,0.35); color: #fff; }
    .card--ink .btn--ghost:hover { border-color: #fff; }
    .card__icon {
        width: 44px; height: 44px; border-radius: var(--r-md);
        display: flex; align-items: center; justify-content: center;
        background: var(--accent-tint); color: var(--accent-strong);
        margin-bottom: var(--sp-5);
    }
    .card__icon svg { width: 22px; height: 22px; }
    .card h3 { margin-bottom: var(--sp-2); }
    .card p { color: var(--muted); font-size: 0.95rem; }

    /* --- Frame de produto (screenshot dark sobre site claro) --- */
    .frame {
        background: var(--surface-ink);
        border-radius: var(--r-xl);
        padding: 10px;
        box-shadow: var(--sh-frame);
        position: relative;
    }
    .frame__bar { display: flex; gap: 6px; padding: 4px 6px 10px; }
    .frame__bar span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.16); }
    .frame img, .frame video { border-radius: calc(var(--r-xl) - 10px); width: 100%; height: auto; background: #0a141d; }
    .frame--glow::after {
        content: ''; position: absolute; inset: -1px; z-index: -1;
        border-radius: inherit; pointer-events: none;
        background: radial-gradient(60% 50% at 50% 0%, rgba(0,246,236,0.18), transparent 70%);
        filter: blur(24px);
    }

    /* --- Header --- */
    .header {
        position: sticky; top: 0; z-index: 100;
        background: color-mix(in srgb, var(--bg) 85%, transparent);
        backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid transparent;
        transition: border-color var(--dur) var(--ease);
    }
    .header.is-scrolled { border-bottom-color: var(--line); }
    .header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); padding-block: 14px; }
    .logo { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; letter-spacing: -0.03em; }
    .logo span { color: var(--accent); font-weight: 600; }

    .nav-desktop { display: none; }
    @media (min-width: 940px) {
        .nav-desktop { display: block; }
        .nav-list { display: flex; align-items: center; gap: var(--sp-6); list-style: none; }
        .nav-list a, .nav-list .nav-link {
            font-size: 0.95rem; font-weight: 600; color: var(--ink-2);
            transition: color var(--dur-fast) var(--ease);
        }
        .nav-list a:hover, .nav-list .nav-link:hover { color: var(--ink); }
    }
    .header__actions { display: flex; align-items: center; gap: var(--sp-3); }

    /* Dropdown serviços */
    .nav-item--dropdown { position: relative; }
    .services-submenu {
        position: absolute; top: calc(100% + 10px); left: 50%; translate: -50% 0;
        min-width: 230px; padding: var(--sp-2);
        background: var(--surface); border: 1px solid var(--line);
        border-radius: var(--r-md); box-shadow: var(--sh-3);
        list-style: none;
        opacity: 0; visibility: hidden; transform: translateY(-6px);
        transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast);
    }
    .nav-item--dropdown:hover .services-submenu,
    .nav-item--dropdown:focus-within .services-submenu {
        opacity: 1; visibility: visible; transform: translateY(0);
    }
    .services-submenu a {
        display: block; padding: 10px 14px; border-radius: var(--r-sm);
        font-size: 0.92rem; font-weight: 600; color: var(--ink-2);
    }
    .services-submenu a:hover { background: var(--surface-2); color: var(--ink); }

    /* Lang selector */
    .lang-selector { position: relative; }
    .lang-btn {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 8px 12px; border-radius: var(--r-full);
        border: 1px solid var(--line); font-size: 0.85rem; font-weight: 700;
    }
    .lang-dropdown {
        position: absolute; top: calc(100% + 8px); right: 0;
        min-width: 80px; padding: var(--sp-1);
        background: var(--surface); border: 1px solid var(--line);
        border-radius: var(--r-md); box-shadow: var(--sh-3);
        list-style: none; display: none;
    }
    .lang-selector.is-open .lang-dropdown { display: block; }
    .lang-dropdown li {
        padding: 8px 14px; border-radius: var(--r-sm);
        font-size: 0.85rem; font-weight: 600; cursor: pointer;
    }
    .lang-dropdown li:hover { background: var(--surface-2); }

    /* Mobile toggle + drawer */
    .mobile-toggle { display: flex; flex-direction: column; gap: 5px; padding: var(--sp-2); }
    .mobile-toggle span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform var(--dur) var(--ease), opacity var(--dur); }
    .mobile-toggle.is-active span:first-child { transform: translateY(7px) rotate(45deg); }
    .mobile-toggle.is-active span:last-child { transform: translateY(-7px) rotate(-45deg); }
    @media (min-width: 940px) { .mobile-toggle { display: none; } }

    .mobile-drawer {
        position: fixed; inset: 0 0 0 auto; width: min(86vw, 380px); z-index: 150;
        background: var(--surface);
        border-left: 1px solid var(--line);
        padding: 88px var(--sp-6) var(--sp-8);
        transform: translateX(100%);
        transition: transform var(--dur-slow) var(--ease);
        overflow-y: auto;
        display: flex; flex-direction: column;
    }
    .mobile-drawer.is-open { transform: translateX(0); box-shadow: var(--sh-3); }
    .mobile-nav-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-1); }
    .mobile-nav-list a, .mobile-nav-list .nav-link {
        display: block; width: 100%; text-align: left;
        padding: 12px 10px; border-radius: var(--r-sm);
        font-size: 1.05rem; font-weight: 700;
    }
    .mobile-nav-list a:hover { background: var(--surface-2); }
    .mobile-submenu { list-style: none; padding-left: var(--sp-4); }
    .mobile-submenu a { font-size: 0.95rem; font-weight: 600; color: var(--ink-2); }
    .mobile-drawer-cta { margin-top: auto; }
    .drawer-overlay {
        position: fixed; inset: 0; z-index: 140;
        background: rgba(13,27,36,0.35);
        opacity: 0; visibility: hidden;
        transition: opacity var(--dur) var(--ease), visibility var(--dur);
    }
    .drawer-overlay.is-visible { opacity: 1; visibility: visible; }

    /* --- Formulários --- */
    .field { display: flex; flex-direction: column; gap: 6px; text-align: left; }
    .field label { font-size: var(--fs-small); font-weight: 700; color: var(--ink-2); }
    .input {
        width: 100%; padding: 13px 16px;
        background: var(--surface); border: 1px solid var(--line);
        border-radius: var(--r-md); font-size: 1rem;
        transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
    }
    .input::placeholder { color: #98A4AD; }
    .input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); }
    .field--error .input { border-color: var(--error); }
    .form-msg { font-size: var(--fs-small); border-radius: var(--r-md); padding: 10px 14px; }
    .form-msg:empty { display: none; }
    .form-msg.success { background: var(--success-tint); color: var(--success); }
    .form-msg.error { background: var(--error-tint); color: var(--error); }

    /* --- FAQ (details/summary nativo) --- */
    .faq { max-width: var(--prose); margin-inline: auto; display: flex; flex-direction: column; gap: var(--sp-3); }
    .faq details {
        background: var(--surface); border: 1px solid var(--line);
        border-radius: var(--r-md); padding: var(--sp-5) var(--sp-6);
    }
    .faq summary {
        font-weight: 700; cursor: pointer; list-style: none;
        display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4);
    }
    .faq summary::-webkit-details-marker { display: none; }
    .faq summary::after {
        content: '+'; font-family: var(--font-display); font-size: 1.3rem; line-height: 1;
        color: var(--accent-strong); transition: rotate var(--dur-fast) var(--ease);
    }
    .faq details[open] summary::after { rotate: 45deg; }
    .faq details p { color: var(--muted); padding-top: var(--sp-3); font-size: 0.95rem; }

    /* --- Métricas / números de prova --- */
    .stat { display: flex; flex-direction: column; gap: 2px; }
    .stat__value {
        font-family: var(--font-display); font-weight: 800;
        font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem); letter-spacing: -0.03em;
    }
    .stat__label { color: var(--muted); font-size: var(--fs-small); }

    /* --- Footer --- */
    .footer { border-top: 1px solid var(--line); padding-block: var(--sp-12) var(--sp-8); font-size: var(--fs-small); color: var(--muted); }
    .footer a:hover { color: var(--ink); }
    .footer__grid { display: grid; gap: var(--sp-8); }
    @media (min-width: 720px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
    .footer__col h4, .footer__col .footer__ttl { font-size: var(--fs-small); font-weight: 700; color: var(--ink); margin-bottom: var(--sp-3); }
    .footer__col ul { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); }
    .footer__meta { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between; margin-top: var(--sp-10); padding-top: var(--sp-6); border-top: 1px solid var(--line-soft); }

    /* --- Consent banner (mesma lógica, pele light) --- */
    .consent {
        position: fixed; left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4); z-index: 180;
        max-width: 680px; margin-inline: auto;
        background: var(--surface); border: 1px solid var(--line);
        border-radius: var(--r-lg); box-shadow: var(--sh-3);
        padding: var(--sp-5) var(--sp-6);
        transform: translateY(120%); opacity: 0;
        transition: transform var(--dur-slow) var(--ease), opacity var(--dur) ease;
    }
    .consent.is-visible { transform: translateY(0); opacity: 1; }
    .consent[hidden] { display: none !important; }
    .consent__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-5); }
    .consent__text { flex: 1 1 300px; font-size: var(--fs-small); }
    .consent__text strong { display: block; font-family: var(--font-display); margin-bottom: 2px; }
    .consent__text p { color: var(--muted); font-size: 0.85rem; }
    .consent__text a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }
    .consent__actions { display: flex; gap: var(--sp-2); }
    .consent__actions .btn { padding: 10px 20px; font-size: var(--fs-small); }
}

/* ===== SECTIONS (padrões partilhados de página) ===== */
@layer sections {

    /* Hero split */
    .hero { padding-block: clamp(56px, 8vw, 110px) var(--section-y); position: relative; }
    .hero::before {
        /* atmosfera: mesh de cor (cyan + roxo) sobre a base clara */
        content: ''; position: absolute; inset: 0 0 15% 0; z-index: -1; pointer-events: none;
        background:
            radial-gradient(45% 55% at 78% 8%, rgba(0,216,206,0.16), transparent 65%),
            radial-gradient(38% 48% at 12% 30%, rgba(139,92,246,0.12), transparent 70%),
            radial-gradient(60% 40% at 50% 0%, rgba(12,124,143,0.08), transparent 75%);
    }
    .hero h1 { font-size: var(--fs-display); }
    .hero__sub { color: var(--muted); font-size: var(--fs-lead); max-width: 560px; margin-block: var(--sp-6) var(--sp-8); }
    .hero__cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
    .trust-row { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); color: var(--muted); font-size: var(--fs-small); margin-top: var(--sp-5); }
    .trust-row span { display: inline-flex; align-items: center; gap: 6px; }
    .trust-row svg { width: 14px; height: 14px; color: var(--success); flex-shrink: 0; }

    /* Processo — timeline editorial com entregável por etapa */
    .process-flow { position: relative; max-width: 880px; }
    .process-flow::before {
        content: ''; position: absolute; left: 27px; top: 36px; bottom: 56px; width: 3px;
        background: linear-gradient(180deg, var(--accent) 0%, #4FA8E8 55%, var(--violet) 100%);
        border-radius: 3px; opacity: 0.55;
    }
    .process-step {
        position: relative;
        display: grid; grid-template-columns: 56px 1fr; gap: var(--sp-6);
        padding-block: var(--sp-8);
    }
    .process-step + .process-step { border-top: 1px solid var(--line-soft); }
    .process-step__num {
        width: 56px; height: 56px; border-radius: 50%;
        background: var(--surface); border: 1px solid var(--line);
        box-shadow: var(--sh-1);
        display: flex; align-items: center; justify-content: center;
        font-family: var(--font-display); font-weight: 800; font-size: 1.15rem;
        color: var(--accent-strong);
        position: relative; z-index: 1;
    }
    .process-step:nth-child(3) .process-step__num { color: #3D7CC9; }
    .process-step:nth-child(4) .process-step__num { color: var(--violet-ink); }
    .process-step h3 { font-size: clamp(1.3rem, 1.15rem + 0.7vw, 1.65rem); }
    .process-step h3 em { font-style: normal; color: var(--accent-strong); }
    .process-step p { color: var(--muted); margin-top: var(--sp-2); max-width: 640px; }
    .process-step__get {
        display: inline-flex; align-items: center; gap: 8px;
        margin-top: var(--sp-4);
        padding: 7px 14px; border-radius: var(--r-full);
        font-size: var(--fs-small); font-weight: 700;
        background: var(--accent-tint); color: var(--accent-strong);
    }
    .process-step:nth-child(4) .process-step__get { background: var(--violet-tint); color: var(--violet-ink); }
    .process-step__get svg { width: 15px; height: 15px; flex-shrink: 0; }

    /* Logo wall (prova social) */
    .logo-wall { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6) var(--sp-10); opacity: 0.75; }
    .logo-wall img { height: 26px; width: auto; filter: grayscale(1); }

    /* CTA final */
    .cta-final { text-align: center; }
    .cta-final .card { padding: clamp(40px, 6vw, 80px); }
    .cta-final .card--ink p { color: #A9BAC4; }
    .cta-final h2 { max-width: 640px; margin-inline: auto; }
    .cta-final p { color: var(--muted); max-width: 520px; margin: var(--sp-4) auto var(--sp-8); font-size: var(--fs-lead); }
}

/* ===== SCROLL FX (scroll-driven animations, CSS puro) =====
   Animações "agarradas" à posição do scroll via animation-timeline.
   Progressive enhancement: browsers sem suporte ignoram tudo isto e
   ficam com os reveals IO normais. Animamos translate/scale/opacity
   (propriedades individuais) para nunca tocar no transform do tilt. */
@layer sections {
    /* Barra de progresso de leitura no topo */
    .scroll-progress {
        position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 300;
        background: linear-gradient(90deg, var(--accent), var(--accent-vivid));
        transform-origin: 0 50%;
        transform: scaleX(0);
        pointer-events: none;
    }

    @media (prefers-reduced-motion: no-preference) {
        @supports (animation-timeline: scroll()) {
            .scroll-progress {
                animation: fx-progress linear both;
                animation-timeline: scroll(root);
            }

            /* Sobe + revela enquanto entra no viewport (scrubbed) */
            .fx-rise {
                animation: fx-rise linear both;
                animation-timeline: view();
                animation-range: entry 0% entry 85%;
            }
            /* Cresce de 0.92 enquanto entra — para frames de produto */
            .fx-zoom {
                animation: fx-zoom linear both;
                animation-timeline: view();
                animation-range: entry 0% entry 95%;
            }
            /* Flutua a velocidade diferente do scroll (parallax suave) */
            .fx-parallax {
                animation: fx-parallax linear both;
                animation-timeline: view();
                animation-range: cover 0% cover 100%;
            }
        }
    }
    @keyframes fx-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    @keyframes fx-rise { from { opacity: 0; translate: 0 44px; } to { opacity: 1; translate: 0 0; } }
    @keyframes fx-zoom { from { scale: 0.92; opacity: 0.35; } to { scale: 1; opacity: 1; } }
    @keyframes fx-parallax { from { translate: 0 34px; } to { translate: 0 -34px; } }

    /* Preview dos trabalhos — telinha com a capa do site segue o cursor */
    .case-preview {
        position: fixed; left: 0; top: 0; z-index: 90;
        width: min(320px, 30vw); aspect-ratio: 16 / 10;
        border-radius: var(--r-md); overflow: hidden;
        border: 1px solid var(--line);
        box-shadow: var(--sh-frame);
        background: var(--surface-ink);
        pointer-events: none;
        opacity: 0; scale: 0.82; rotate: -3deg;
        transition: opacity 0.22s var(--ease), scale 0.22s var(--ease), rotate 0.22s var(--ease);
        will-change: transform;
    }
    .case-preview.is-visible { opacity: 1; scale: 1; rotate: 0deg; }
    .case-preview img {
        width: 100%; height: 100%; object-fit: cover; object-position: top;
    }
}

/* ===== UTILITIES ===== */
@layer utilities {
    .sr-only {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    .text-muted { color: var(--muted); }
    .text-accent { color: var(--accent-strong); }

    /* Reveal on scroll — JS adiciona .is-visible via IntersectionObserver.
       Usa a propriedade `translate` (não `transform`) para compor com o
       tilt 3D, que ocupa o transform dos cards. */
    .reveal { opacity: 0; translate: 0 16px; transition: opacity var(--dur-slow) var(--ease), translate var(--dur-slow) var(--ease); }
    .reveal.is-visible { opacity: 1; translate: 0 0; }
    .reveal-stagger > * { opacity: 0; translate: 0 14px; transition: opacity var(--dur-slow) var(--ease), translate var(--dur-slow) var(--ease); }
    .reveal-stagger.is-visible > * { opacity: 1; translate: 0 0; }
    .reveal-stagger.is-visible > :nth-child(2) { transition-delay: 70ms; }
    .reveal-stagger.is-visible > :nth-child(3) { transition-delay: 140ms; }
    .reveal-stagger.is-visible > :nth-child(4) { transition-delay: 210ms; }
    .reveal-stagger.is-visible > :nth-child(5) { transition-delay: 280ms; }
    .reveal-stagger.is-visible > :nth-child(6) { transition-delay: 350ms; }

    @media (prefers-reduced-motion: reduce) {
        .reveal, .reveal-stagger > * { opacity: 1 !important; translate: none !important; }
    }
}