/* ============================================================================
   STRATEX · SISTEMA VISUAL v2
   Referencia: vercel.com -- preto quase puro, contraste alto, bordas de 1px,
   densidade baixa. A cor da marca entra dessaturada e so em detalhe: nunca
   em fundo de card, nunca em glow. Sem Tailwind de proposito: nesse estilo
   o CSS proprio fica menor e mais legivel que a soma de utilitarios.
   ========================================================================== */

:root {
    /* preto puxado para o roxo da marca: e escuro o bastante para o texto
       branco manter contraste, mas o fundo deixa de ser cinza neutro */
    --bg: #0a0711;
    --bg-elev: #110c1b;
    --bg-soft: #171021;
    --line: rgba(255, 255, 255, .09);
    --line-strong: rgba(255, 255, 255, .16);

    --tx: #ededef;
    --tx-2: #a1a1aa;
    --tx-3: #8a8a94;

    /* roxo da marca (#a855f7) dessaturado: mesma familia, sem o neon */
    --ac: #9b87c4;
    --ac-soft: rgba(155, 135, 196, .14);

    --font: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace;

    --r: 8px;
    --r-lg: 14px;
    --maxw: 1180px;
    --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--tx);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

::selection { background: rgba(155, 135, 196, .28); color: #fff; }

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

/* ------------------------------------------------------------- estrutura -- */

.wrap {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: 24px;
}

section { padding-block: clamp(80px, 11vw, 148px); }

/* linha divisoria fina no topo da secao, no lugar de mudar o fundo */
.rule { border-top: 1px solid var(--line); }

/* ---------------------------------------------------------- tipografia --- */

h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -.028em; line-height: 1.08; }

h1 { font-size: clamp(2.5rem, 5.4vw, 4rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.75rem); }
h3 { font-size: 1.0625rem; font-weight: 500; letter-spacing: -.01em; line-height: 1.35; }

p { margin: 0; }

.lead {
    color: var(--tx-2);
    font-size: 1.0625rem;
    font-weight: 300;
    line-height: 1.65;
    max-width: 58ch;
}

.small { font-size: .875rem; color: var(--tx-2); line-height: 1.6; }
.mono {
    font-family: var(--mono);
    font-size: .6875rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tx-3);
}

.ac { color: var(--ac); }

/* -------------------------------------------------------------- botoes --- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding-inline: 16px;
    border-radius: var(--r);
    border: 1px solid transparent;
    font-size: .875rem;
    font-weight: 500;
    font-family: inherit;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease,
                color .18s ease, transform .18s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: #fafafa; color: #09090b; }
.btn--primary:hover { background: #fff; }

.btn--ghost {
    background: transparent;
    border-color: var(--line-strong);
    color: var(--tx);
}
.btn--ghost:hover { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .28); }

.btn--lg { height: 46px; padding-inline: 22px; font-size: .9375rem; }

/* link com seta, o padrao de lista de features da referencia */
.link-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-block: 11px;
    border-bottom: 1px solid var(--line);
    color: var(--tx-2);
    font-size: .875rem;
    transition: color .18s ease;
}
.link-row:hover { color: var(--tx); }
.link-row svg { flex: none; opacity: .5; transition: transform .18s var(--ease), opacity .18s ease; }
.link-row:hover svg { transform: translateX(3px); opacity: 1; }

/* ----------------------------------------------------------------- nav --- */

.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    height: 64px;
    border-bottom: 1px solid transparent;
    background: rgba(10, 7, 17, .93);
    backdrop-filter: blur(12px);
    transition: border-color .25s ease, background-color .25s ease;
}
.nav.is-stuck { border-bottom-color: var(--line); }
.nav-in {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 28px;
}
.nav-brand { display: flex; align-items: center; gap: 9px; font-weight: 500; letter-spacing: -.02em; }
.nav-brand img { width: 22px; height: 22px; }
.nav-links { display: flex; align-items: center; gap: 24px; margin-left: 8px; }
.nav-links a { font-size: .875rem; color: var(--tx-2); transition: color .16s ease; }
.nav-links a:hover { color: var(--tx); }
.nav-act { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.nav-burger {
    display: none;
    width: 40px; height: 40px;
    align-items: center; justify-content: center;
    background: none; border: 1px solid var(--line); border-radius: var(--r);
    color: var(--tx); cursor: pointer;
}

.menu {
    display: none;
    border-bottom: 1px solid var(--line);
    background: var(--bg);
}
.menu.is-open { display: block; }
.menu a {
    display: block;
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
    color: var(--tx-2);
    font-size: .9375rem;
}
.menu a:last-of-type { border-bottom: 0; }

@media (max-width: 860px) {
    .nav-links { display: none; }
    .nav-act .btn--ghost { display: none; }
    .nav-burger { display: inline-flex; }
}

/* ---------------------------------------------------------------- hero --- */

.hero { padding-block: clamp(72px, 12vh, 132px) clamp(64px, 9vw, 104px); }

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 260px);
    align-items: center;
    gap: clamp(32px, 6vw, 72px);
}

.hero h1 { max-width: 13ch; }
.hero .lead { margin-top: 22px; max-width: 42ch; }
.hero-cta { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 10px; }

/* marca da casa no lugar do triangulo da referencia: mesmo papel, halo cinza */
.hero-mark { position: relative; display: grid; place-items: center; width: clamp(150px, 20vw, 240px); }
.hero-mark::before {
    content: "";
    position: absolute;
    inset: -40%;
    background: radial-gradient(circle, rgba(255, 255, 255, .11), transparent 62%);
    pointer-events: none;
}
.hero-mark img { position: relative; width: 100%; height: auto; opacity: .92; }

.hero-notes { display: grid; gap: 9px; }
.hero-notes span { font-size: .8125rem; color: var(--tx-3); }

@media (max-width: 1000px) {
    .hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .hero-mark { width: 150px; }
    .hero-notes { display: flex; flex-wrap: wrap; gap: 8px 22px; }
}

/* ----------------------------------------------------------- vitrine ----- */

.marcas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: clamp(26px, 5vw, 58px);
}
/* marca quase quadrada precisa de mais altura para ter o mesmo peso optico
   que um logotipo horizontal ao lado */
.marcas img[data-quadrada] { height: 40px; }
.marcas img {
    height: 26px;
    width: auto;
    opacity: .5;
    filter: grayscale(1);
    transition: opacity .22s ease, filter .22s ease;
}
.marcas a:hover img, .marcas img:hover { opacity: .95; filter: grayscale(0); }
@media (max-width: 720px) {
    .marcas { justify-content: center; gap: 28px 34px; }
    .marcas img { height: 21px; }
}

/* ----------------------------------------------------------------- case -- */

.case { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; }
.case--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); }
.case--tall { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
.case--flip { direction: rtl; }
.case--flip > * { direction: ltr; }

.case-title { max-width: 18ch; }
.case-claim { margin-top: 20px; color: var(--tx-2); font-size: 1rem; font-weight: 300; max-width: 46ch; }
.case-claim b { color: var(--tx); font-weight: 500; }
.case-list { margin-top: 26px; }

@media (max-width: 900px) {
    .case--wide, .case--tall { grid-template-columns: 1fr; }
    .case--flip { direction: ltr; }
}

/* molduras: navegador para web, celular para app -- cada projeto no aparelho
   em que ele realmente vive */

.frame {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--bg-elev);
    overflow: hidden;
}
.frame-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding-inline: 13px;
    border-bottom: 1px solid var(--line);
    background: var(--bg-soft);
}
.frame-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.frame-bar span {
    margin-left: 10px;
    font-family: var(--mono);
    font-size: .6875rem;
    color: var(--tx-3);
}
.frame video, .frame img { width: 100%; height: auto; }

.phone {
    width: min(320px, 100%);
    margin-inline: auto;
    border: 1px solid var(--line-strong);
    border-radius: 26px;
    padding: 8px;
    background: var(--bg-elev);
}
.phone video, .phone img { width: 100%; border-radius: 19px; }


/* ---------------------------------------------------------- player ------ */

/* O video so baixa quando a pessoa clica: ate la o que existe na pagina e o
   poster, de 9 a 26 KB. Cinco videos carregando sozinhos custariam ~2,5 MB
   de quem talvez nem role ate eles. */
.player { position: relative; }
.player video { display: block; width: 100%; height: auto; }

/* Quando o poster e o video tem proporcoes diferentes, a moldura pularia de
   tamanho no clique. Travando a proporcao no poster e deixando o video em
   "contain", o quadro nao mexe: o video encaixa dentro dele. */
.player[data-proporcao] { aspect-ratio: var(--prop); }
.player[data-proporcao] video { height: 100%; object-fit: contain; background: #000; }

.player-btn {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    width: 100%;
    background: none;
    border: 0;
    padding: 0;
    color: var(--tx);
    cursor: pointer;
    transition: background-color .2s ease;
}
.player-btn:hover { background: rgba(10, 7, 17, .28); }
.player-btn i {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(10, 7, 17, .62);
    border: 1px solid rgba(255, 255, 255, .34);
    backdrop-filter: blur(6px);
    transition: transform .2s var(--ease), background-color .2s ease;
}
.player-btn:hover i { transform: scale(1.06); background: rgba(10, 7, 17, .8); }
.player.is-playing .player-btn { display: none; }

@media (prefers-reduced-motion: reduce) {
    .player-btn, .player-btn i { transition: none; }
}

/* --------------------------------------------------------------- grades -- */

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.cell { background: var(--bg); padding: clamp(22px, 3vw, 34px); }
.cell-ico { color: var(--ac); margin-bottom: 16px; }
.cell p { margin-top: 9px; color: var(--tx-2); font-size: .9375rem; font-weight: 300; }

@media (max-width: 880px) { .grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .grid-2 { grid-template-columns: 1fr; } }


/* --------------------------------------------------------- galeria ------ */

.obras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(22px, 2.2vw, 30px) clamp(26px, 3vw, 40px);
}
.obra h3 { margin-top: 13px; }
.obra p { margin-top: 6px; color: var(--tx-2); font-size: .9375rem; font-weight: 300; }
.obra .link-row { margin-top: 14px; border-bottom: 0; padding-block: 0; color: var(--ac); }

/* a arte fica numa moldura de proporcao fixa: como as capturas vem em
   formatos diferentes (site 16:10, reel 9:16), sem isso a grade desalinha */
.obra-arte {
    display: block;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--bg-elev);
    overflow: hidden;
}
.obra-arte img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform .5s var(--ease), opacity .3s ease;
}
a.obra-arte:hover img { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
    .obra-arte img { transition: none; }
    a.obra-arte:hover img { transform: none; }
}



/* ------------------------------------------------------------- lupa ----- */

/* A captura cabe no card, mas em ~370px o texto do site fica pequeno demais
   para ler. O clique abre a imagem em tamanho cheio, que resolve sem inchar
   a grade. */
button.obra-arte {
    width: 100%;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: zoom-in;
}

.lupa {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    padding: clamp(16px, 4vw, 48px);
    background: rgba(6, 4, 11, .88);
    backdrop-filter: blur(6px);
    animation: lupaEntra .18s ease-out;
}
.lupa[hidden] { display: none; }
@keyframes lupaEntra { from { opacity: 0 } to { opacity: 1 } }

.lupa-quadro {
    margin: 0;
    max-width: min(1500px, 100%);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.lupa-quadro img {
    max-width: 100%;
    max-height: calc(100vh - 150px);
    width: auto;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-lg);
    object-fit: contain;
}
.lupa-pe {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    align-items: baseline;
    font-size: .875rem;
    color: var(--tx-2);
}
.lupa-pe a { color: var(--ac); }
.lupa-pe a:hover { text-decoration: underline; }

.lupa-fechar {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .07);
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    color: var(--tx);
    cursor: pointer;
    transition: background-color .18s ease;
}
.lupa-fechar:hover { background: rgba(255, 255, 255, .16); }

@media (prefers-reduced-motion: reduce) {
    .lupa { animation: none; }
    .lupa-fechar { transition: none; }
}

/* ----------------------------------------------------------------- ceos -- */

/* retrato 4:5 fica alto demais numa coluna larga: limita a grade para o
   card ficar do tamanho de uma foto de equipe, nao de um banner */
.ceos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 30px; max-width: 880px; }
.ceo-foto {
    aspect-ratio: 4 / 5;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--bg-elev) center / cover no-repeat;
    display: grid;
    place-items: center;
    color: var(--tx-3);
    overflow: hidden;
}
.ceo-foto img { width: 100%; height: 100%; object-fit: cover; }
.ceo h3 { margin-top: 18px; }
.ceo-cargo { margin-top: 4px; font-size: .875rem; color: var(--tx-3); }

/* --------------------------------------------------------------- planos -- */

.planos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.plano {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 30px 26px;
    display: flex;
    flex-direction: column;
}
.plano--destaque { border-color: var(--line-strong); background: var(--bg-elev); }
.plano-antes { margin-top: 18px; font-size: .8125rem; color: var(--tx-3); }
.plano-antes + .plano-preco { margin-top: 2px; }
.plano-preco { margin-top: 18px; font-size: 2.1rem; font-weight: 500; letter-spacing: -.03em; }
.plano-preco small { font-size: .875rem; font-weight: 400; color: var(--tx-3); letter-spacing: 0; }
.plano ul { list-style: none; margin: 22px 0 28px; padding: 0; display: grid; gap: 11px; }
.plano li { display: flex; gap: 10px; font-size: .9375rem; color: var(--tx-2); font-weight: 300; }
.plano li svg { flex: none; margin-top: 4px; color: var(--ac); }
.plano .btn { margin-top: auto; }
@media (max-width: 900px) { .planos { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ faq -- */

.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 0;
    background: none;
    border: 0;
    color: var(--tx);
    font: inherit;
    font-size: 1rem;
    text-align: left;
    cursor: pointer;
}
.faq-q svg { flex: none; color: var(--tx-3); transition: transform .24s var(--ease); }
.faq-item.is-open .faq-q svg { transform: rotate(45deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { padding-bottom: 24px; color: var(--tx-2); font-weight: 300; max-width: 68ch; }

/* --------------------------------------------------------------- forms --- */

.form { display: grid; gap: 16px; }
.campo { display: grid; gap: 7px; }
.campo label { font-size: .8125rem; color: var(--tx-2); }
.campo input, .campo select, .campo textarea {
    width: 100%;
    padding: 11px 13px;
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--r);
    color: var(--tx);
    font: inherit;
    font-size: .9375rem;
    transition: border-color .16s ease;
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--tx-3); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
    outline: none;
    border-color: var(--ac);
}
.campo textarea { resize: vertical; min-height: 116px; }
.campo select option { background: var(--bg-elev); color: var(--tx); }

/* -------------------------------------------------------------- rodape --- */

.rodape { border-top: 1px solid var(--line); padding-block: 56px 40px; }
.rodape-grid { display: grid; grid-template-columns: 1.4fr repeat(2, 1fr); gap: 40px; }
.rodape-grid--4 { grid-template-columns: 1.4fr repeat(3, 1fr); }
.rodape h3 { margin: 0 0 14px; font-size: .8125rem; font-weight: 500; color: var(--tx); letter-spacing: 0; }
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.rodape a { font-size: .875rem; color: var(--tx-3); transition: color .16s ease; }
.rodape a:hover { color: var(--tx); }
.rodape-fim {
    margin-top: 44px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: space-between;
    font-size: .8125rem;
    color: var(--tx-3);
}
@media (max-width: 760px) { .rodape-grid { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------------------ revelacao -- */

[data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
    .btn, .link-row, .link-row svg, .marcas img { transition: none; }
}

/* sem JS o conteudo aparece igual */
html.no-js [data-reveal] { opacity: 1; transform: none; }