/* === tokens.css === */
/* ═══════════════════════════════════════════════════════
ANOVA DESIGN SYSTEM — tokens.css v2.0
Monocromático · Flat · Line-art · Blueprint
"Confiança que vira execução."
USO: @import 'design-system/tokens.css';
═══════════════════════════════════════════════════════ */
/* ─── FONTS — carregadas via no HTML ───────────── */
/* ─── PALETTE — 8 tons ────────────────────────────────── */
:root {
--onyx: #0A0A0A; /* headings, body, copy */
--surface-dark: #3A3A3A; /* fundos dark — cards, CTAs, botões primários */
--charcoal: #4A4A4A; /* texto secundário */
--stone: #767676; /* texto terciário, labels, meta */
--dust: #BABABA; /* hairlines, placeholders, low-emphasis */
--gray-hover: #EBEBEB; /* hover de cards, seções alternadas */
--gray-light: #F4F4F4; /* fundo de cards, inputs, surfaces */
--white: #FFFFFF; /* fundo de página, tabelas, modais */
/* Hairlines — 4 níveis */
--h0: rgba(0,0,0,.05); /* separadores entre rows de tabela */
--h1: rgba(0,0,0,.08); /* border padrão de cards e inputs */
--h2: rgba(0,0,0,.14); /* border em hover */
--h3: rgba(0,0,0,.22); /* border em focus / selecionado */
/* Aliases retroativos — backward compat com v1 */
--grey: var(--stone);
--silver: var(--dust);
--snow: var(--gray-light);
--fog: var(--gray-hover);
--cream: var(--gray-light);
--channel: var(--dust);
--n1: var(--h0);
--n2: var(--h1);
--n3: var(--h2);
--n4: var(--h3);
/* Semânticos */
--bg: var(--white);
--bg-alt: var(--gray-light);
--bg-dark: var(--surface-dark);
--surface: var(--white);
--border: var(--h1);
--border-hi: var(--h2);
--text-1: var(--onyx);
--text-2: var(--charcoal);
--text-3: var(--stone);
--accent: var(--onyx);
--accent-inv: var(--white);
--sand: var(--gray-light);
--hover: var(--gray-hover);
/* ─── TYPOGRAPHY — DM Sans + JetBrains Mono ─────────── */
--font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
--mono: 'JetBrains Mono', monospace;
--text-hero: clamp(40.5px, 5vw, 72px); /* wght 700 lh 1.0 */
--text-3xl: clamp(27.5px, 3.5vw, 52px); /* wght 600 lh 1.05 */
--text-2xl: 36px; /* wght 600 lh 1.1 */
--text-xl: 26px; /* wght 600 lh 1.2 */
--text-lg: 20px; /* wght 400 lh 1.35 */
--text-md: 17px; /* wght 400 lh 1.5 */
--text-base: 15px; /* wght 400 — body default */
--text-sm: 14px; /* wght 400 — descrições secundárias */
--text-xs: 12px; /* wght 500 */
--text-micro: 11px; /* wght 500 — labels, menor permitido */
/* ─── SPACING — 8pt grid ────────────────────────────── */
--s1: 4px;
--s2: 8px;
--s3: 12px;
--s4: 16px;
--s5: 24px;
--s6: 32px;
--s7: 48px;
--s8: 64px;
--s9: 96px;
--s10: 128px;
/* ─── RADIUS ────────────────────────────────────────── */
/* Legacy --r-* mantido para compat com v1 */
--r-sm: 6px;
--r-md: 10px; /* buttons, inputs */
--r-lg: 16px;
--r-xl: 24px; /* cards, panels */
--r-2xl: 32px; /* large containers */
--r-squircle: 22%; /* logo Anova only */
--r-pill: 99px; /* badges, tags */
/* Nova convenção --rx-* */
--rx-xs: 11px;
--rx-sm: 16px;
--rx-md: 24px;
--rx-lg: 36px;
--rx-xl: 48px;
--rx-pill: 999px;
/* ─── MOTION ────────────────────────────────────────── */
--ease: cubic-bezier(.25, .1, .25, 1);
--ease-out: cubic-bezier(.16, 1, .3, 1);
--ease-spring: cubic-bezier(.34, 1.56, .64, 1);
--dur: 300ms;
}
/* ─── RESET ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
background: var(--bg);
color: var(--text-1);
font-family: var(--font);
font-size: var(--text-base);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
font-feature-settings: 'tnum' 1, 'ss01' 1;
}
::selection { background: var(--text-1); color: var(--bg); }
/* ─── METRIC DELTAS — neutros, tipográficos ─────────── */
.metric-up,
.metric-down {
font-family: var(--mono); font-weight: 600; font-size: 12px;
color: var(--text-1); letter-spacing: 0;
font-feature-settings: 'tnum' 1;
}
.metric-up::before { content: '↑\00a0'; }
.metric-down::before{ content: '↓\00a0'; }
/* === components.css === */
/* ═══════════════════════════════════════════════════════
ANOVA DESIGN SYSTEM — components.css v1.0.1
USO: @import 'design-system/tokens.css';
@import 'design-system/components.css';
═══════════════════════════════════════════════════════ */
/* ═══ BUTTONS ═══════════════════════════════════════════ */
.btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 24px; border-radius: var(--r-md);
font-family: var(--font); font-size: 13px; font-weight: 700;
letter-spacing: .04em; text-transform: uppercase;
cursor: pointer; border: 2px solid transparent;
transition: all .2s var(--ease); line-height: 1; text-decoration: none;
}
.btn-primary { background: var(--accent); color: var(--accent-inv); border-color: var(--accent); }
.btn-primary:hover { opacity: .85; }
.btn-outline { background: transparent; color: var(--text-1); border-color: var(--text-1); }
.btn-outline:hover { background: var(--text-1); color: var(--bg); }
.btn-ghost { background: none; color: var(--text-2); border: none; padding: 8px 16px; }
.btn-ghost:hover { color: var(--text-1); }
.btn-sm { padding: 7px 14px; font-size: 11px; }
.btn-lg { padding: 14px 32px; font-size: 14px; }
/* ═══ CARDS ═════════════════════════════════════════════ */
.card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-xl); padding: var(--s5);
transition: border-color .2s var(--ease);
}
.card:hover { border-color: var(--text-1); }
.card-title { font-weight: 700; font-size: 15px; margin-bottom: var(--s1); }
.card-desc { font-size: 14px; color: var(--text-2); line-height: 1.5; }
/* ═══ METRIC CARDS ══════════════════════════════════════ */
.metric-card {
border: 1px solid var(--border); border-radius: var(--r-xl);
padding: var(--s5); transition: border-color .2s;
}
.metric-card:hover { border-color: var(--text-1); }
.metric-label {
font-family: var(--font); font-size: 12px;
letter-spacing: 0; font-weight: 500;
color: var(--text-3); margin-bottom: var(--s2);
}
.metric-value {
font-size: var(--text-xl); font-weight: 700;
line-height: 1; letter-spacing: -.02em;
}
.metric-value sub {
font-size: 14px; font-weight: 500;
color: var(--text-2); vertical-align: baseline;
}
/* ═══ INPUTS ════════════════════════════════════════════ */
.input {
width: 100%; padding: 10px var(--s4);
background: var(--bg); border: 1px solid var(--border);
border-radius: var(--r-md); font-size: 14px;
color: var(--text-1); font-family: var(--font);
outline: none; transition: border-color .2s;
}
.input:focus { border-color: var(--text-1); }
.input::placeholder { color: var(--text-3); }
.input:disabled { opacity: .5; cursor: not-allowed; }
.select {
width: 100%; padding: 10px var(--s4); padding-right: 36px;
background: var(--bg); border: 1px solid var(--border);
border-radius: var(--r-md); font-size: 14px;
color: var(--text-1); font-family: var(--font);
appearance: none; -webkit-appearance: none; outline: none;
cursor: pointer; transition: border-color .2s;
}
.select:focus { border-color: var(--text-1); }
.textarea {
width: 100%; padding: 12px var(--s4);
background: var(--bg); border: 1px solid var(--border);
border-radius: var(--r-md); font-size: 14px;
color: var(--text-1); font-family: var(--font);
outline: none; resize: vertical; min-height: 100px;
transition: border-color .2s; line-height: 1.6;
}
.textarea:focus { border-color: var(--text-1); }
.field { display: flex; flex-direction: column; gap: 4px; }
.field-label {
font-size: 13px; font-weight: 600;
color: var(--text-2); letter-spacing: 0;
font-family: var(--font);
}
.field-hint { font-size: var(--text-micro); color: var(--text-3); font-family: var(--mono); }
.field-error { font-size: var(--text-micro); color: var(--charcoal); font-weight: 600; font-family: var(--mono); }
.field-error::before { content: '⚠ '; }
/* ═══ CHECKBOX / RADIO / TOGGLE ═════════════════════════ */
.check-box, .radio-box {
width: 18px; height: 18px; border: 1.5px solid var(--border);
display: flex; align-items: center; justify-content: center;
transition: all .15s; cursor: pointer; background: var(--bg); flex-shrink: 0;
}
.check-box { border-radius: var(--r-sm); }
.radio-box { border-radius: 50%; }
.check-box.checked { background: var(--onyx); border-color: var(--onyx); }
.check-box.checked::after { content: '✓'; color: var(--white); font-size: 11px; font-weight: 700; }
.radio-box.checked { border-color: var(--onyx); }
.radio-box.checked::after { content: ''; width: 8px; height: 8px; background: var(--onyx); border-radius: 50%; }
.toggle {
width: 40px; height: 22px; border-radius: 11px;
background: var(--border); position: relative;
cursor: pointer; transition: background .2s; flex-shrink: 0;
}
.toggle.on { background: var(--onyx); }
.toggle-knob {
position: absolute; top: 2px; left: 2px;
width: 18px; height: 18px; border-radius: 50%;
background: var(--white); transition: transform .2s var(--ease-spring);
}
.toggle.on .toggle-knob { transform: translateX(18px); }
/* ═══ UPLOAD ════════════════════════════════════════════ */
.upload-zone {
border: 1.5px dashed var(--border); border-radius: var(--r-xl);
padding: var(--s7) var(--s5); display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: var(--s3);
cursor: pointer; transition: border-color .2s, background .2s; text-align: center;
}
.upload-zone:hover { border-color: var(--text-1); background: var(--bg-alt); }
/* ═══ TABLES ════════════════════════════════════════════ */
.tbl-wrap {
border: 1px solid var(--border); border-radius: var(--r-xl);
overflow: hidden;
}
.tbl-header {
display: flex; align-items: center; justify-content: space-between;
padding: var(--s4) var(--s5); border-bottom: 1px solid var(--border);
}
.tbl-title { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: var(--s2); }
.tbl-count {
font-family: var(--mono); font-size: var(--text-micro);
background: var(--bg-alt); border: 1px solid var(--border);
border-radius: 99px; padding: 2px 8px; color: var(--text-3);
}
.tbl-search {
padding: 7px 12px; border: 1px solid var(--border); border-radius: var(--r-md);
font-size: 13px; width: 200px; outline: none; transition: border-color .15s;
background: var(--bg-alt); color: var(--text-1); font-family: var(--font);
}
.tbl-search:focus { border-color: var(--text-1); background: var(--bg); }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
font-family: var(--mono); font-size: var(--text-micro); font-weight: 600;
letter-spacing: .08em; text-transform: uppercase; color: var(--text-3);
text-align: left; padding: 10px var(--s5); background: var(--bg-alt);
border-bottom: 1px solid var(--border); cursor: pointer; user-select: none;
transition: color .15s; white-space: nowrap;
}
.tbl th:hover { color: var(--text-1); }
.tbl th.align-r { text-align: right; }
.tbl td { padding: 14px var(--s5); border-bottom: 1px solid var(--border); font-size: 14px; vertical-align: middle; }
.tbl tbody tr { transition: background .12s var(--ease); }
.tbl tbody tr:hover { background: var(--bg-alt); }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr.selected { background: var(--bg-alt); }
.tbl tbody tr.selected td:first-child { box-shadow: inset 3px 0 0 var(--onyx); }
/* Table cell types */
.cell-id { font-family: var(--mono); font-size: 12px; color: var(--text-3); }
.cell-client { display: flex; align-items: center; gap: var(--s3); }
.cell-client-name { font-weight: 600; font-size: 14px; }
.cell-client-sub { font-size: 12px; color: var(--text-3); margin-top: 1px; }
.cell-avatar {
width: 32px; height: 32px; border-radius: 50%;
background: var(--onyx); color: var(--white);
display: flex; align-items: center; justify-content: center;
font-family: var(--mono); font-size: 10px; font-weight: 700; flex-shrink: 0;
}
.cell-avatar-light { background: var(--bg-alt); color: var(--text-2); border: 1px solid var(--border); }
.cell-meta { font-size: 13px; color: var(--text-2); }
.cell-value { font-family: var(--mono); font-size: 14px; font-weight: 600; text-align: right; }
.cell-date { font-family: var(--mono); font-size: 12px; color: var(--text-3); white-space: nowrap; }
.cell-actions { display: flex; gap: 6px; justify-content: flex-end; }
.cell-action {
width: 28px; height: 28px; border-radius: var(--r-sm);
border: 1px solid transparent; display: flex; align-items: center;
justify-content: center; cursor: pointer; transition: all .12s; background: none;
}
.cell-action:hover { border-color: var(--border); background: var(--bg-alt); }
.cell-action svg { width: 15px; height: 15px; stroke: var(--text-3); fill: none; stroke-width: 1.5; }
.cell-action:hover svg { stroke: var(--text-1); }
/* ═══ STATUS BADGES ═════════════════════════════════════ */
.status {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 12px; border-radius: 99px;
font-size: var(--text-xs); font-weight: 600;
font-family: var(--mono); letter-spacing: .02em;
}
.status-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.status-active { background: var(--onyx); color: var(--white); }
.status-active .status-dot { background: var(--white); }
.status-pending { background: var(--bg-alt); border: 1px solid var(--border); color: var(--text-2); }
.status-pending .status-dot { background: var(--text-3); }
.status-progress { background: var(--bg); border: 1px solid var(--charcoal); color: var(--charcoal); }
.status-progress .status-dot { background: var(--charcoal); }
.status-error { background: var(--bg); border: 1px solid var(--grey); color: var(--grey); }
.status-error .status-dot { background: var(--grey); }
.status-none { background: var(--bg); border: 1px solid var(--silver); color: var(--silver); }
.status-none .status-dot { border: 1.5px solid var(--silver); background: transparent; }
/* ═══ PAGINATION ════════════════════════════════════════ */
.pagination { display: flex; align-items: center; gap: 4px; justify-content: center; padding: var(--s4) 0; }
.page-btn {
width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
border: 1px solid var(--border); border-radius: var(--r-md);
font-size: 12px; font-family: var(--mono); cursor: pointer;
background: var(--bg); color: var(--text-2); transition: all .15s;
}
.page-btn:hover { border-color: var(--text-1); color: var(--text-1); }
.page-btn.active { background: var(--onyx); color: var(--white); border-color: var(--onyx); }
.page-nav { padding: 6px 14px; width: auto; font-weight: 600; }
/* ═══ ALERTS ════════════════════════════════════════════ */
.alert {
display: flex; align-items: flex-start; gap: var(--s3);
padding: var(--s4) var(--s5); border: 1px solid var(--border);
border-radius: var(--r-xl);
}
.alert svg { width: 18px; height: 18px; stroke: var(--text-2); fill: none; stroke-width: 1.5; flex-shrink: 0; }
.alert-title { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.alert-desc { font-size: 13px; color: var(--text-2); }
.alert-action {
font-size: 12px; font-weight: 700; text-transform: uppercase;
letter-spacing: .04em; color: var(--text-1); cursor: pointer;
margin-top: var(--s2); font-family: var(--mono);
}
.alert-info { background: var(--bg-alt); }
.alert-warn { border-color: var(--grey); }
.alert-critical { border-color: var(--onyx); border-width: 2px; }
/* ═══ PROGRESS / STEPS ══════════════════════════════════ */
.progress-bar { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--onyx); border-radius: 2px; transition: width .6s var(--ease-out); }
.step-num {
width: 32px; height: 32px; border-radius: 50%;
border: 2px solid var(--border); display: flex; align-items: center;
justify-content: center; font-family: var(--mono); font-size: 12px;
font-weight: 700; color: var(--text-3); flex-shrink: 0; transition: all .2s;
}
.step.done .step-num { background: var(--onyx); color: var(--white); border-color: var(--onyx); }
.step.current .step-num { border-color: var(--onyx); color: var(--onyx); }
.step-line { flex: 1; height: 1px; background: var(--border); margin: 0 var(--s2); }
.step.done .step-line { background: var(--onyx); }
/* ═══ AVATARS ═══════════════════════════════════════════ */
.avatar {
border-radius: 50%; display: flex; align-items: center;
justify-content: center; font-family: var(--mono); font-weight: 700; flex-shrink: 0;
}
.avatar-sm { width: 28px; height: 28px; font-size: 10px; }
.avatar-md { width: 36px; height: 36px; font-size: 12px; }
.avatar-lg { width: 48px; height: 48px; font-size: 14px; }
.avatar-dark { background: var(--onyx); color: var(--white); }
.avatar-light { background: var(--bg-alt); color: var(--text-2); border: 1px solid var(--border); }
.avatar-group { display: flex; }
.avatar-group .avatar { margin-left: -8px; border: 2px solid var(--white); }
.avatar-group .avatar:first-child { margin-left: 0; }
/* ═══ PRODUCT CARD ══════════════════════════════════════ */
.product-card {
border: 1px solid var(--border); border-radius: var(--r-xl);
overflow: hidden; transition: border-color .2s;
}
.product-card:hover { border-color: var(--text-1); }
.product-img {
height: 180px; background: var(--bg-alt);
display: flex; align-items: center; justify-content: center;
border-bottom: 1px solid var(--border);
}
.product-body { padding: var(--s5); }
.product-tag {
font-family: var(--mono); font-size: var(--text-micro);
color: var(--text-3); letter-spacing: .1em;
text-transform: uppercase; margin-bottom: var(--s2);
}
.product-name { font-size: 17px; font-weight: 700; margin-bottom: var(--s1); }
.product-desc { font-size: 13px; color: var(--text-2); line-height: 1.5; margin-bottom: var(--s4); }
.product-footer {
display: flex; align-items: center; justify-content: space-between;
padding-top: var(--s3); border-top: 1px solid var(--border);
}
.product-price { font-size: 20px; font-weight: 700; }
.product-price sub { font-size: 12px; color: var(--text-3); font-weight: 400; }
/* ═══ MODAL ═════════════════════════════════════════════ */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.04); z-index: 100; display: flex; align-items: center; justify-content: center; }
.modal-box {
background: var(--white); border: 1px solid var(--border);
border-radius: var(--r-xl); padding: var(--s6); max-width: 420px; width: 100%;
}
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s4); }
.modal-title { font-size: 18px; font-weight: 700; }
.modal-close {
width: 28px; height: 28px; border: 1px solid var(--border);
border-radius: var(--r-sm); display: flex; align-items: center;
justify-content: center; cursor: pointer; transition: border-color .15s; background: none;
}
.modal-close:hover { border-color: var(--text-1); }
.modal-body { font-size: 14px; color: var(--text-2); line-height: 1.6; margin-bottom: var(--s5); }
.modal-actions { display: flex; gap: var(--s3); justify-content: flex-end; }
/* ═══ TABS ══════════════════════════════════════════════ */
.tab-bar { display: flex; gap: 0; border-bottom: 1px solid var(--border); }
.tab-item {
padding: 10px 20px; font-size: 13px; font-weight: 500; cursor: pointer;
color: var(--text-3); border-bottom: 2px solid transparent; transition: all .15s;
background: none; border-top: none; border-left: none; border-right: none; font-family: var(--font);
}
.tab-item:hover { color: var(--text-1); }
.tab-item.active { color: var(--text-1); border-bottom-color: var(--onyx); font-weight: 600; }
.tab-count {
font-family: var(--mono); font-size: 10px;
background: var(--onyx); color: var(--white);
border-radius: 99px; padding: 1px 6px; margin-left: 6px;
}
/* ═══ BREADCRUMBS ═══════════════════════════════════════ */
.breadcrumb { display: flex; align-items: center; gap: var(--s2); }
.breadcrumb-item {
font-family: var(--mono); font-size: var(--text-micro);
color: var(--text-3); text-decoration: none; transition: color .15s;
}
.breadcrumb-item:hover { color: var(--text-1); }
.breadcrumb-current { color: var(--text-1); font-weight: 600; }
.breadcrumb-sep { color: var(--border); font-size: 10px; }
/* ═══ TOOLTIP ═══════════════════════════════════════════ */
.tooltip {
position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
background: var(--onyx); color: var(--white); font-family: var(--mono);
font-size: var(--text-xs); padding: 6px 12px; border-radius: var(--r-md);
white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s;
}
.tooltip::after {
content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
border: 4px solid transparent; border-top-color: var(--onyx);
}
.tooltip-trigger:hover .tooltip { opacity: 1; }
/* ═══ EMPTY STATE ═══════════════════════════════════════ */
.empty {
display: flex; flex-direction: column; align-items: center;
justify-content: center; padding: var(--s9) var(--s5); text-align: center;
}
.empty-title { font-size: 17px; font-weight: 700; margin-bottom: var(--s2); }
.empty-desc { font-size: 14px; color: var(--text-3); max-width: 360px; margin-bottom: var(--s5); }
/* ═══ LOGO SQUIRCLE ═════════════════════════════════════ */
.logo-squircle {
background: var(--onyx); border-radius: var(--r-squircle);
display: flex; align-items: center; justify-content: center;
}
.logo-squircle span {
font-family: var(--font); font-weight: 700; color: var(--white);
text-align: center;
}
/* Scale: 24px→p1px, 28px→p2px/5px, 32px→p3px/6px, 36px→p4px/8px, 64px→p8px/10px, 80px→p10px/12px */
/* Always: margin-right: -(letter-spacing) to center text */
/* === sections.css === */
/* ─────────────────────────────────────────────────────────
ANOVA — SECTIONS
Estilos de página extraídos do index.html.
Usado por: index.html + 6 páginas de produto.
Depende de: tokens.css, components.css
───────────────────────────────────────────────────────── */
/* ─── PAGE-SPECIFIC ─────────────────────────────────────── */
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--text-1);}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}
.container{max-width:1180px;margin:0 auto;padding:0 var(--s5);}
.eyebrow{font-family:var(--font);font-size:12px;font-weight:500;letter-spacing:0;color:var(--text-3);display:inline-flex;align-items:center;gap:var(--s3);}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--text-3);}
.section-dark .eyebrow{color:var(--silver);}
.section-dark .eyebrow::before{background:var(--silver);}
.section{padding:var(--s10) 0;border-top:1px solid var(--border);}
.section-dark{background:var(--onyx);color:var(--white);border-top-color:var(--charcoal);}
.section-alt{background:var(--bg-alt);}
h1,h2,h3,h4{font-family:var(--font);font-weight:700;letter-spacing:-.025em;line-height:1.05;}
h1{font-size:clamp(40px,6.4vw,72px);letter-spacing:-.035em;line-height:1.02;}
h2{font-size:clamp(32px,4.6vw,52px);letter-spacing:-.025em;line-height:1.08;}
h3{font-size:22px;letter-spacing:-.015em;line-height:1.2;}
.lead{font-size:clamp(16px,1.4vw,19px);color:var(--text-2);line-height:1.55;max-width:60ch;}
.section-dark .lead{color:var(--silver);}
/* ─── NAV ───────────────────────────────────────────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px;}
.nav-brand{display:flex;align-items:center;gap:var(--s3);}
.nav-logo{width:32px;height:32px;background:var(--onyx);border-radius:22%;display:flex;align-items:center;justify-content:center;color:var(--white);font-weight:700;font-size:13px;letter-spacing:-.04em;}
.nav-name{font-weight:700;font-size:15px;letter-spacing:-.01em;}
.nav-links{display:flex;gap:var(--s6);}
.nav-links a{font-size:13px;color:var(--text-2);transition:color .15s;}
.nav-links a:hover{color:var(--text-1);}
@media(max-width:880px){.nav-links{display:none;}}
/* ─── HERO ──────────────────────────────────────────────── */
.hero{padding:calc(var(--s7) + 64px) 0 var(--s7);position:relative;overflow:hidden;}
@media(max-width:768px){.hero{padding:calc(var(--s5) + 64px) 0 var(--s6);}}
.hero-bp{display:none;}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s8);align-items:center;position:relative;}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr;gap:var(--s7);}}
.hero h1{margin:var(--s5) 0;}
.hero h1 strong{font-weight:800;}
.hero-sub{font-size:18px;color:var(--text-2);max-width:54ch;line-height:1.55;margin-bottom:var(--s6);}
.hero-cta{display:flex;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s7);}
.hero-meta{display:flex;gap:var(--s5);align-items:center;flex-wrap:wrap;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-3);}
.hero-meta span{display:inline-flex;align-items:center;gap:var(--s2);}
.hero-meta span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--onyx);}
.hero-visual{position:relative;border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;background:var(--bg-alt);aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;padding:var(--s5);}
.hero-visual img{max-width:78%;max-height:100%;width:auto;height:auto;object-fit:contain;}
.hero-tag{position:absolute;left:var(--s4);bottom:var(--s4);background:var(--white);border:1px solid var(--border);border-radius:99px;padding:6px 14px;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-2);}
/* ─── PROOF ─────────────────────────────────────────────── */
.proof{padding:var(--s8) 0;background:var(--onyx);color:var(--white);}
.proof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5);}
@media(max-width:880px){.proof-grid{grid-template-columns:repeat(2,1fr);gap:var(--s6);}}
.proof-num{font-size:44px;font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--white);}
.proof-num sub{font-size:18px;font-weight:500;color:var(--silver);vertical-align:baseline;margin-left:2px;}
.proof-label{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--silver);margin-top:var(--s3);}
/* ─── PROBLEM ───────────────────────────────────────────── */
.problem-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-top:var(--s7);}
@media(max-width:880px){.problem-cards{grid-template-columns:1fr;}}
.problem-card{border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--s6);background:var(--white);transition:border-color .2s;}
.problem-card:hover{border-color:var(--text-1);}
.problem-num{font-family:var(--mono);font-size:11px;color:var(--text-3);letter-spacing:.1em;display:flex;align-items:center;gap:var(--s2);}
.problem-num::before{content:"";width:20px;height:1px;background:var(--text-3);}
.problem-card h3{margin:var(--s4) 0 var(--s3);}
.problem-card p{font-size:14px;color:var(--text-2);line-height:1.6;}
.problem-quote{margin-top:var(--s8);padding-top:var(--s7);border-top:1px solid var(--border);font-size:clamp(22px,2.6vw,30px);font-weight:600;letter-spacing:-.02em;line-height:1.3;max-width:42ch;}
.problem-quote strong{font-weight:800;}
/* ─── PIVOT ─────────────────────────────────────────────── */
.pivot-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);align-items:start;margin-top:var(--s7);}
@media(max-width:880px){.pivot-grid{grid-template-columns:1fr;}}
.pivot-list{list-style:none;display:flex;flex-direction:column;gap:0;margin-top:var(--s5);}
.pivot-list li{display:flex;gap:var(--s5);padding:var(--s4) 0;border-bottom:1px solid var(--charcoal);}
.pivot-list li:last-child{border-bottom:none;}
.pivot-list b{font-family:var(--mono);font-size:10px;color:var(--silver);text-transform:uppercase;letter-spacing:.1em;min-width:120px;flex-shrink:0;padding-top:3px;}
.pivot-list span{color:var(--white);font-size:15px;line-height:1.55;}
.pivot-diagram{border:1px solid var(--charcoal);border-radius:var(--r-xl);padding:var(--s7);background:var(--onyx);}
.pivot-diagram svg{width:100%;height:auto;}
/* ─── GALLERY ───────────────────────────────────────────── */
.gallery{margin-top:var(--s7);}
.gallery-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:var(--s7);overflow-x:auto;}
.gallery-tab{padding:var(--s4) var(--s5);font-size:13px;font-weight:600;cursor:pointer;color:var(--text-3);background:none;border:none;border-bottom:2px solid transparent;transition:all .15s;white-space:nowrap;display:flex;align-items:center;gap:var(--s2);}
.gallery-tab .idx{font-family:var(--mono);font-size:10px;color:var(--text-3);}
.gallery-tab:hover{color:var(--text-1);}
.gallery-tab.active{color:var(--text-1);border-bottom-color:var(--onyx);}
.gallery-tab.active .idx{color:var(--text-1);}
.gallery-panel{display:none;grid-template-columns:.85fr 1.15fr;gap:var(--s8);align-items:center;}
.gallery-panel.active{display:grid;}
@media(max-width:980px){.gallery-panel.active{grid-template-columns:1fr;gap:var(--s5);}}
.gallery-info h3{font-size:28px;margin-bottom:var(--s4);}
.gallery-info p{color:var(--text-2);line-height:1.6;font-size:15px;margin-bottom:var(--s5);}
.gallery-feats{list-style:none;display:flex;flex-direction:column;gap:var(--s2);}
.gallery-feats li{font-size:13px;color:var(--text-2);padding-left:var(--s5);position:relative;}
.gallery-feats li::before{content:"";position:absolute;left:0;top:9px;width:12px;height:1px;background:var(--text-1);}
.gallery-img{border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;background:var(--bg-alt);aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;padding:var(--s5);}
.gallery-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;box-shadow:none;}
.gallery-panel.active{align-items:start;}
/* ─── HOW ───────────────────────────────────────────────── */
.how-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);margin-top:var(--s7);}
@media(max-width:980px){.how-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.how-grid{grid-template-columns:1fr;}}
.how-step{border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--s6);background:var(--white);}
.how-num{font-family:var(--mono);font-size:10px;color:var(--text-3);letter-spacing:.1em;margin-bottom:var(--s5);display:flex;align-items:center;gap:var(--s2);}
.how-num::before{content:"";width:20px;height:1px;background:var(--text-1);}
.how-step h3{font-size:18px;margin-bottom:var(--s3);line-height:1.2;}
.how-step p{font-size:13px;color:var(--text-2);line-height:1.6;}
/* ─── BOARD ─────────────────────────────────────────────── */
.board-grid{display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s7);}
.board-card{display:flex;flex-direction:row;align-items:stretch;border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;background:var(--white);transition:border-color .35s;}
.board-card.is-open{border-color:var(--text-1);}
.board-photo{width:140px;flex-shrink:0;background:var(--bg-alt);border-right:1px solid var(--border);filter:grayscale(1);}
.board-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.board-meta{padding:var(--s4) var(--s5);min-width:200px;flex-shrink:0;display:flex;flex-direction:column;justify-content:center;}
.board-name{font-size:14px;font-weight:700;letter-spacing:-.01em;}
.board-role{font-family:var(--mono);font-size:10px;color:var(--text-3);text-transform:uppercase;letter-spacing:.08em;margin-top:4px;}
.board-expand{overflow:hidden;max-width:0;opacity:0;transition:max-width .45s var(--ease-out),opacity .3s ease .08s;padding:0;border-left:1px solid transparent;display:flex;flex-direction:column;justify-content:center;}
.board-card.is-open .board-expand{max-width:560px;opacity:1;border-left-color:var(--border);}
.board-expand-inner{min-width:400px;padding:var(--s4) var(--s5);}
.board-expand-role{font-size:11px;font-weight:700;color:var(--text-1);margin-bottom:var(--s3);}
.board-expand-bio{font-size:12px;color:var(--text-2);line-height:1.55;}
@media(max-width:680px){
.board-card{flex-direction:column;}
.board-photo{width:100%;height:180px;border-right:none;border-bottom:1px solid var(--border);}
.board-expand{border-left:none;border-top:1px solid transparent;max-height:0;max-width:none;transition:max-height .45s var(--ease-out),opacity .3s ease .08s;}
.board-card.is-open .board-expand{max-height:400px;opacity:1;border-top-color:var(--border);}
}
/* ─── FOUNDER ───────────────────────────────────────────── */
.founder-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--s8);align-items:start;margin-top:var(--s6);}
@media(max-width:880px){.founder-grid{grid-template-columns:1fr;}}
.founder-photo{border:1px solid var(--charcoal);border-radius:var(--r-xl);overflow:hidden;background:var(--onyx);aspect-ratio:1/1;}
.founder-photo img{width:100%;height:100%;object-fit:cover;object-position:center 25%;}
.founder-quote{font-size:clamp(20px,2vw,26px);font-weight:500;letter-spacing:-.015em;line-height:1.4;color:var(--white);}
.founder-quote::before{content:"";display:block;width:48px;height:1px;background:var(--silver);margin-bottom:var(--s5);}
.founder-sig{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--charcoal);}
.founder-name{font-size:14px;font-weight:700;color:var(--white);}
.founder-role{font-family:var(--mono);font-size:11px;color:var(--silver);text-transform:uppercase;letter-spacing:.08em;margin-top:4px;}
/* ─── VIDEOS ────────────────────────────────────────────── */
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-top:var(--s7);}
@media(max-width:880px){.video-grid{grid-template-columns:1fr;}}
.video-card{border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;background:var(--onyx);transition:border-color .2s;}
.video-card:hover{border-color:var(--text-1);}
.video-frame{aspect-ratio:16/9;background:var(--onyx);position:relative;cursor:pointer;}
.video-frame iframe{width:100%;height:100%;border:none;display:block;}
.video-frame .vthumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);}
.video-frame .vplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);transition:background .2s;}
.video-frame:hover .vplay{background:rgba(0,0,0,.65);}
.video-frame .vplay::before{content:"";width:64px;height:64px;border-radius:50%;background:var(--white);display:block;}
.video-frame .vplay::after{content:"";position:absolute;width:0;height:0;border-left:18px solid var(--onyx);border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:6px;}
.video-meta{padding:var(--s4) var(--s5);font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--silver);background:var(--onyx);}
/* ─── AUDIENCE ──────────────────────────────────────────── */
.aud-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);margin-top:var(--s7);}
@media(max-width:880px){.aud-grid{grid-template-columns:1fr;}}
.aud-card{border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--s7) var(--s5);display:flex;flex-direction:column;background:var(--white);transition:border-color .2s;}
.aud-card:hover{border-color:var(--text-1);}
.aud-tag{font-family:var(--mono);font-size:10px;color:var(--text-3);text-transform:uppercase;letter-spacing:.1em;margin-bottom:var(--s4);}
.aud-card h3{font-size:22px;margin-bottom:var(--s3);}
.aud-card p{font-size:14px;color:var(--text-2);line-height:1.6;flex:1;margin-bottom:var(--s5);}
.aud-cta{font-family:var(--mono);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-1);display:inline-flex;align-items:center;gap:var(--s2);border-top:1px solid var(--border);padding-top:var(--s4);}
.aud-cta::after{content:"→";transition:transform .2s;}
.aud-card:hover .aud-cta::after{transform:translateX(4px);}
/* ─── DIFFERENTIATORS ───────────────────────────────────── */
.diff-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin-top:var(--s7);border:1px solid var(--charcoal);border-radius:var(--r-xl);overflow:hidden;}
@media(max-width:880px){.diff-grid{grid-template-columns:1fr;}}
.diff-cell{padding:var(--s7) var(--s6);border-right:1px solid var(--charcoal);border-bottom:1px solid var(--charcoal);}
.diff-cell:nth-child(2n){border-right:none;}
.diff-cell:nth-last-child(-n+2){border-bottom:none;}
@media(max-width:880px){.diff-cell{border-right:none;}.diff-cell:not(:last-child){border-bottom:1px solid var(--charcoal);}}
.diff-num{font-family:var(--mono);font-size:10px;color:var(--silver);letter-spacing:.1em;margin-bottom:var(--s4);}
.diff-cell h3{margin-bottom:var(--s3);color:var(--white);}
.diff-cell p{font-size:14px;color:var(--silver);line-height:1.65;}
.compare{margin-top:var(--s8);border:1px solid var(--charcoal);border-radius:var(--r-xl);overflow-x:auto;-webkit-overflow-scrolling:touch;}
.compare table{width:100%;min-width:680px;border-collapse:collapse;}
.compare th,.compare td{padding:var(--s4) var(--s5);text-align:left;font-size:13px;border-bottom:1px solid var(--charcoal);}
.compare th{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--silver);font-weight:600;background:var(--onyx);}
.compare td{color:var(--silver);}
.compare td:first-child{color:var(--white);font-weight:600;font-size:13px;}
.compare th.anova,.compare td.anova{background:var(--white);color:var(--onyx);}
.compare th.anova{font-weight:800;}
.compare td.anova{font-weight:600;}
.compare tr:last-child td{border-bottom:none;}
/* ─── PRESENCE / MEDIA ──────────────────────────────────── */
.presence-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);margin-top:var(--s7);align-items:start;}
@media(max-width:880px){.presence-grid{grid-template-columns:1fr;}}
.presence-map{border:1px solid var(--border);border-radius:var(--r-xl);background:var(--white);padding:var(--s6);display:flex;align-items:center;justify-content:center;aspect-ratio:5/4;}
.presence-map img{max-width:100%;max-height:100%;object-fit:contain;filter:grayscale(1) contrast(1.05);}
.media-strip{margin-top:var(--s8);padding-top:var(--s7);border-top:1px solid var(--border);}
.media-label{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);text-align:center;margin-bottom:var(--s5);}
.media-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5);align-items:center;}
@media(max-width:680px){.media-grid{grid-template-columns:repeat(2,1fr);}}
.media-grid img{width:100%;height:60px;object-fit:contain;filter:grayscale(1) brightness(.4);opacity:.7;transition:opacity .2s,filter .2s;}
.media-grid img:hover{opacity:1;filter:grayscale(1) brightness(.2);}
/* ─── PARTNERS ──────────────────────────────────────────── */
.partners-block{margin-top:var(--s7);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--s6);background:var(--white);}
.partners-list{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s3);}
@media(max-width:880px){.partners-list{grid-template-columns:repeat(3,1fr);}}
.partner{border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s5) var(--s3);text-align:center;font-weight:700;font-size:13px;color:var(--text-2);transition:all .2s;}
.partner:hover{border-color:var(--text-1);color:var(--text-1);}
.verticals{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--border);justify-content:center;}
.vertical{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;border:1px solid var(--border);border-radius:99px;padding:6px 14px;color:var(--text-2);}
/* ─── VISION ────────────────────────────────────────────── */
.vision h2{font-size:clamp(36px,5vw,64px);max-width:18ch;}
.vision .lead{margin-top:var(--s6);}
.vision-foot{margin-top:var(--s8);padding-top:var(--s6);border-top:1px solid var(--charcoal);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--silver);display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s4);}
/* ─── CTA ───────────────────────────────────────────────── */
.cta-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s8);align-items:start;margin-top:var(--s5);}
@media(max-width:880px){.cta-grid{grid-template-columns:1fr;}}
.cta-segments{display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s6);}
.cta-segment{border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s4) var(--s5);display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:all .2s;background:var(--white);}
.cta-segment:hover{border-color:var(--text-1);}
.cta-segment b{font-size:14px;font-weight:700;display:block;}
.cta-segment small{font-size:11px;color:var(--text-3);font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;margin-top:3px;display:block;}
.cta-segment::after{content:"→";font-size:18px;color:var(--text-3);transition:all .2s;}
.cta-segment:hover::after{color:var(--text-1);transform:translateX(4px);}
.form-card{border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--s6);background:var(--white);}
.form-card .field{margin-bottom:var(--s4);}
/* ─── FOOTER ────────────────────────────────────────────── */
.footer{background:var(--onyx);color:var(--silver);padding:var(--s8) 0 var(--s6);font-size:13px;}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s6);flex-wrap:wrap;padding-bottom:var(--s6);border-bottom:1px solid var(--charcoal);}
.footer-brand{display:flex;align-items:center;gap:var(--s3);}
.footer-brand .nav-logo{width:36px;height:36px;background:var(--white);color:var(--onyx);}
.footer-brand .nav-name{color:var(--white);font-size:16px;}
.footer-cols{display:flex;gap:var(--s8);flex-wrap:wrap;}
.footer-col h4{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--silver);margin-bottom:var(--s3);font-weight:600;}
.footer-col a{display:block;color:var(--silver);font-size:13px;margin-bottom:var(--s2);transition:color .15s;}
.footer-col a:hover{color:var(--white);}
.footer-bot{padding-top:var(--s5);display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s4);font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--grey);}
.footer-disclaimer{max-width:60ch;line-height:1.6;color:var(--grey);margin-top:var(--s5);font-size:11px;}
/* ─── Footer Meta Tech Provider badge ───────────────────── */
.footer-meta-badge{display:inline-flex;align-items:center;margin-top:var(--s4);padding:10px 14px;background:var(--white);border-radius:var(--r-md);max-width:fit-content;}
.footer-meta-badge img{height:30px;width:auto;display:block;}
/* ─── TRUST BAR ─────────────────────────────────────────── */
.trust-bar{border-top:1px solid var(--border);padding:var(--s5) 0;}
.trust-bar-inner{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap;font-family:var(--mono);font-size:11px;color:var(--text-3);}
.trust-item{white-space:nowrap;}
.trust-dot{color:var(--dust);margin:0 var(--s2);}
/* ─── SOLUTION FLOW ─────────────────────────────────────── */
.solution-flow{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin:var(--s7) 0;}
.flow-node{border:1px solid var(--onyx);border-radius:99px;padding:6px 16px;font-size:13px;font-weight:600;color:var(--onyx);white-space:nowrap;}
.flow-arrow{color:var(--dust);font-size:18px;line-height:1;}
.solution-sub{font-size:15px;color:var(--text-2);margin-top:var(--s5);}
/* ─── PROBLEM NEW LAYOUT ─────────────────────────────────── */
.problem-2col{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);align-items:start;margin-top:var(--s7);}
@media(max-width:880px){.problem-2col{grid-template-columns:1fr;}}
.dor-list{display:flex;flex-direction:column;gap:var(--s3);}
.dor-chip{padding:var(--s3) var(--s4);border-left:2px solid var(--onyx);background:var(--white);font-size:14px;color:var(--text-2);}
.problem-frag{display:flex;align-items:center;justify-content:center;}
.problem-close{margin-top:var(--s8);padding-top:var(--s7);border-top:1px solid var(--border);font-size:clamp(20px,2.4vw,26px);font-weight:700;letter-spacing:-.02em;line-height:1.3;}
/* ─── BENEFITS ───────────────────────────────────────────── */
.benefits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-top:var(--s7);}
@media(max-width:880px){.benefits-grid{grid-template-columns:1fr;}}
.benefit-card{border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--s6);background:var(--white);transition:border-color .2s;}
.benefit-card:hover{border-color:var(--border-hi);}
.benefit-num{font-family:var(--mono);font-size:11px;color:var(--text-3);letter-spacing:.1em;margin-bottom:var(--s4);}
.benefit-card h3{font-size:16px;margin-bottom:var(--s3);letter-spacing:-.01em;}
.benefit-card p{font-size:14px;color:var(--text-2);line-height:1.6;}
.benefit-card--featured{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:var(--s7);align-items:center;background:var(--onyx);border-color:var(--onyx);}
.benefit-card--featured .benefit-num{color:var(--stone);}
.benefit-card--featured h3{color:var(--white);}
.benefit-card--featured p{color:var(--dust);}
@media(max-width:880px){.benefit-card--featured{grid-template-columns:1fr;}}
/* ─── AGENTS ─────────────────────────────────────────────── */
.agents-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s4);margin-top:var(--s7);}
@media(max-width:1080px){.agents-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.agents-grid{grid-template-columns:1fr;}}
.agent-card{border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--s5);background:var(--white);transition:border-color .2s;}
.agent-card:hover{border-color:var(--border-hi);}
.agent-num{font-family:var(--mono);font-size:10px;color:var(--text-3);letter-spacing:.1em;margin-bottom:var(--s4);}
.agent-card h3{font-size:15px;margin-bottom:var(--s3);letter-spacing:-.01em;}
.agent-card p{font-size:13px;color:var(--text-2);line-height:1.55;}
/* ─── DIFFERENTIAL BULLETS ───────────────────────────────── */
.differentials-list{display:flex;flex-direction:column;margin-top:var(--s7);}
.differentials-item{padding:var(--s5) 0;border-bottom:1px solid var(--charcoal);font-size:clamp(18px,2vw,24px);font-weight:600;color:var(--white);letter-spacing:-.015em;}
.differentials-item:first-child{border-top:1px solid var(--charcoal);}
/* ─── GOVERNANCE GRID ────────────────────────────────────── */
.gov-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);margin-top:var(--s7);}
@media(max-width:880px){.gov-grid{grid-template-columns:repeat(2,1fr);}}
.gov-item{border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--s5);font-size:14px;color:var(--text-2);font-weight:500;line-height:1.4;}
.gov-close{margin-top:var(--s8);font-size:clamp(20px,2.4vw,28px);font-weight:700;letter-spacing:-.02em;text-align:center;}
/* ─── FOR WHOM ───────────────────────────────────────────── */
.forwhom-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s4);margin-top:var(--s7);}
@media(max-width:1080px){.forwhom-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.forwhom-grid{grid-template-columns:1fr;}}
.forwhom-card{border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--s5);background:var(--white);transition:border-color .2s;}
.forwhom-card:hover{border-color:var(--border-hi);}
.forwhom-num{font-family:var(--mono);font-size:10px;color:var(--text-3);letter-spacing:.1em;margin-bottom:var(--s4);}
.forwhom-card h3{font-size:15px;margin-bottom:var(--s3);letter-spacing:-.01em;}
.forwhom-card p{font-size:13px;color:var(--text-2);line-height:1.55;}
/* ─── BEFORE / AFTER ─────────────────────────────────────── */
.ba-grid{display:grid;grid-template-columns:1fr 1fr;margin-top:var(--s7);border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--border);}
@media(max-width:680px){.ba-grid{grid-template-columns:1fr;}}
.ba-col{padding:var(--s6);}
.ba-col--before{background:var(--bg-alt);}
.ba-col--after{background:var(--onyx);}
.ba-col-label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--text-3);margin-bottom:var(--s5);display:block;}
.ba-col--after .ba-col-label{color:var(--stone);}
.ba-row{padding:var(--s3) 0;border-bottom:1px solid var(--border);font-size:15px;color:var(--stone);}
.ba-col--after .ba-row{border-bottom-color:var(--charcoal);font-size:15px;color:var(--dust);}
.ba-row:last-child{border-bottom:none;}
.ba-close{margin-top:var(--s8);font-size:clamp(15px,1.6vw,18px);color:var(--text-2);text-align:center;}
/* ─── FAQ ────────────────────────────────────────────────── */
.faq{margin-top:var(--s7);}
.faq-item{border-bottom:1px solid var(--border);}
.faq-item:first-child{border-top:1px solid var(--border);}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--s5) 0;cursor:pointer;font-size:18px;font-weight:600;color:var(--text-1);letter-spacing:-.01em;background:none;border:none;text-align:left;font-family:var(--font);}
.faq-q::after{content:"+";font-size:22px;font-weight:300;color:var(--text-3);transition:transform .25s;flex-shrink:0;margin-left:var(--s4);}
.faq-item.is-open .faq-q::after{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;}
.faq-item.is-open .faq-a{max-height:500px;}
.faq-a p{padding-bottom:var(--s5);font-size:15px;color:var(--text-2);line-height:1.65;max-width:68ch;}
/* ─── META BADGE (inline hero) ───────────────────────────── */
.meta-badge{display:inline-flex;align-items:center;gap:10px;background:var(--onyx);border-radius:var(--r-md);padding:8px 14px;opacity:.92;transition:opacity .2s;}
.meta-badge:hover{opacity:1;}
.meta-badge img{height:18px;width:auto;display:block;}
.meta-badge-label{font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:var(--stone);text-transform:uppercase;white-space:nowrap;line-height:1.2;}
/* ─── PARTNERS SECTION ───────────────────────────────────── */
.partners-section{padding:var(--s6) 0;border-top:1px solid var(--border);background:var(--bg-alt);}
.partners-section-label{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--text-3);text-align:center;margin-bottom:var(--s5);}
/* === nav.css === */
/* ─────────────────────────────────────────────────────────
ANOVA — NAV (estrutura referência §11)
Logo squircle apenas (sem label "Anova") + links diretos.
Usado por: partials/nav.html
Depende de: tokens.css
───────────────────────────────────────────────────────── */
/* ─── NAV container ─────────────────────────────────────── */
.anova-nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border);}
.anova-nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px;max-width:1180px;margin:0 auto;padding:0 var(--s5);gap:var(--s6);}
/* ─── Brand: squircle 28px imagem ───────────────────────── */
.anova-nav-brand{display:flex;align-items:center;flex-shrink:0;color:var(--text-1);text-decoration:none;}
.anova-nav-logo{width:40px;height:40px;display:block;transition:transform .3s var(--ease-spring);}
.anova-nav-brand:hover .anova-nav-logo{transform:scale(.94);}
/* Footer variant: inverted — logo branca no fundo escuro */
.anova-nav-logo--inv{filter:invert(1);}
/* ─── Links ─────────────────────────────────────────────── */
.anova-nav-links{display:flex;gap:var(--s5);align-items:center;flex:1;justify-content:center;}
.anova-nav-link{font-size:13px;color:var(--text-3);transition:color .15s;padding:4px 0;border-bottom:2px solid transparent;background:none;border-left:none;border-right:none;border-top:none;cursor:pointer;font-family:inherit;text-decoration:none;font-weight:500;white-space:nowrap;}
.anova-nav-link:hover{color:var(--text-1);}
.anova-nav-link[aria-current="page"]{color:var(--text-1);border-bottom-color:var(--onyx);}
/* ─── CTA ───────────────────────────────────────────────── */
.anova-nav-cta{display:inline-flex;align-items:center;padding:8px 16px;background:var(--onyx);color:var(--white);border-radius:var(--r-md);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;transition:opacity .2s;flex-shrink:0;margin-left:auto;}
.anova-nav-cta:hover{opacity:.85;}
/* ─── Mobile ────────────────────────────────────────────── */
.anova-nav-toggle{display:none;background:none;border:none;font-size:20px;color:var(--text-1);cursor:pointer;padding:8px;}
@media(max-width:980px){
/* Remove backdrop-filter: criava stacking context que prendia position:fixed nos filhos */
.anova-nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:#ffffff;z-index:1000;}
.anova-nav-links{display:none;position:fixed;top:64px;left:0;right:0;bottom:0;z-index:999;background:#ffffff;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:var(--s6) var(--s5);gap:var(--s2);overflow-y:auto;}
.anova-nav.mobile-open .anova-nav-links{display:flex;}
.anova-nav-toggle{display:block;}
.anova-nav-link{font-size:18px;font-weight:600;color:#0A0A0A;padding:var(--s4) 0;border-bottom:1px solid #e5e5e5;}
.anova-nav-link:hover{color:#0A0A0A;opacity:.6;}
.anova-nav-link[aria-current="page"]{color:#0A0A0A;border-bottom-color:#0A0A0A;}
.anova-nav-cta{margin-top:var(--s4);justify-content:center;font-size:12px;padding:var(--s4);}
}
/* ─── Active page body offset (nav is fixed) ────────────── */
body{padding-top:64px;}
/* === editorial.css === */
/* ═══════════════════════════════════════════════════════
ANOVA DESIGN SYSTEM — editorial.css
Camada editorial: crosshairs, reveals, ticker, markers.
Adere as 10 Regras de Ouro (flat, mono, line-art).
USO: @import 'design-system/editorial.css';
Depende de: tokens.css, sections.css
═══════════════════════════════════════════════════════ */
/* ─── TABULAR NUMERICS & SMOOTHING ─────────────────────── */
body{
font-feature-settings:'tnum' 1,'ss01' 1,'cv11' 1;
text-rendering:optimizeLegibility;
-moz-osx-font-smoothing:grayscale;
}
/* ─── CUSTOM SELECTION ─────────────────────────────────── */
::selection{background:var(--onyx);color:var(--white);}
.section-dark ::selection{background:var(--white);color:var(--onyx);}
/* ─── SCROLLBAR (chromium) ─────────────────────────────── */
*::-webkit-scrollbar{width:10px;height:10px;}
*::-webkit-scrollbar-track{background:var(--bg);}
*::-webkit-scrollbar-thumb{background:var(--silver);border:2px solid var(--bg);border-radius:99px;}
*::-webkit-scrollbar-thumb:hover{background:var(--charcoal);}
/* ─── SCROLL PROGRESS — linha de topo ──────────────────── */
.scroll-progress{
position:fixed;top:0;left:0;height:2px;width:0;
background:var(--onyx);z-index:200;
transition:width .08s linear;pointer-events:none;
}
.section-dark + .scroll-progress,
body[data-theme="dark"] .scroll-progress{background:var(--white);}
/* ─── HERO — BLUEPRINT AMPLIFICADO ─────────────────────── */
.hero{padding-top:calc(64px + var(--s7));}
.hero-bp{display:none;}
@keyframes bpDrift{
from{background-position:0 0,0 0;}
to{background-position:480px 0,0 480px;}
}
/* Crosshair corners - signature blueprint marks */
.hero::before,
.hero::after{
content:"";position:absolute;width:18px;height:18px;
border-top:1px solid var(--text-3);border-left:1px solid var(--text-3);
pointer-events:none;z-index:1;
}
.hero::before{top:64px;left:var(--s5);}
.hero::after{
top:64px;right:var(--s5);
border-top:1px solid var(--text-3);border-left:none;border-right:1px solid var(--text-3);
transform:scaleX(-1);
}
.hero .container{position:relative;}
.hero .container::before,
.hero .container::after{
content:"";position:absolute;bottom:-16px;width:18px;height:18px;
border-bottom:1px solid var(--text-3);pointer-events:none;
}
.hero .container::before{left:0;border-left:1px solid var(--text-3);}
.hero .container::after{right:0;border-right:1px solid var(--text-3);}
/* ─── EYEBROW — upgrade para indice editorial ──────────── */
.eyebrow{
font-size:11px;font-weight:600;letter-spacing:.16em;
text-transform:uppercase;color:var(--text-3);
}
.eyebrow::before{width:32px;}
/* ─── HERO H1 — equalibrio editorial ───────────────────── */
.hero h1{margin:var(--s6) 0 var(--s5);}
.hero h1 strong{font-weight:800;position:relative;}
.hero h1 strong::after{
content:"";position:absolute;left:0;right:-.1em;bottom:-.04em;
height:4px;background:var(--onyx);
transform:scaleX(0);transform-origin:left;
transition:transform .9s var(--ease-out) .3s;
}
.hero[data-ready="true"] h1 strong::after{transform:scaleX(1);}
.section-dark .hero h1 strong::after{background:var(--white);}
/* ─── HERO META — dots animados ────────────────────────── */
.hero-meta span{position:relative;}
.hero-meta span::before{
animation:dotPulse 2.4s ease-in-out infinite;
animation-delay:calc(var(--i,0) * .4s);
}
@keyframes dotPulse{
0%,100%{transform:scale(1);opacity:1;}
50%{transform:scale(1.6);opacity:.55;}
}
/* ─── HERO VISUAL — frame com marcador técnico ─────────── */
.hero-visual{position:relative;}
.hero-visual::before{
content:attr(data-frame-code,"SURF·01");
position:absolute;top:var(--s3);right:var(--s4);
font-family:var(--mono);font-size:10px;letter-spacing:.14em;
color:var(--text-3);z-index:2;
}
.hero-visual .hero-tag{
font-weight:600;letter-spacing:.14em;
}
/* ─── SCROLL REVEAL — base ─────────────────────────────── */
[data-reveal]{
opacity:0;transform:translateY(14px);
transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);
will-change:opacity,transform;
}
[data-reveal].is-visible{opacity:1;transform:none;}
[data-reveal="up"]{transform:translateY(24px);}
[data-reveal="right"]{transform:translateX(-24px);}
[data-reveal="left"]{transform:translateX(24px);}
[data-reveal="scale"]{transform:scale(.96);}
[data-reveal].is-visible{transform:none;}
/* stagger delays */
[data-reveal][data-delay="1"]{transition-delay:.08s;}
[data-reveal][data-delay="2"]{transition-delay:.16s;}
[data-reveal][data-delay="3"]{transition-delay:.24s;}
[data-reveal][data-delay="4"]{transition-delay:.32s;}
[data-reveal][data-delay="5"]{transition-delay:.4s;}
[data-reveal][data-delay="6"]{transition-delay:.48s;}
@media (prefers-reduced-motion:reduce){
[data-reveal]{opacity:1;transform:none;transition:none;}
}
/* ─── PROOF — numerais contadores, linha guia ──────────── */
.proof{position:relative;overflow:hidden;}
.proof-grid > div:not(:last-child){border-right:1px solid rgba(255,255,255,.12);}
@media(max-width:880px){.proof-grid > div:not(:last-child){border-right:none;}}
.proof-grid{position:relative;}
.proof-grid > div{padding:0 var(--s5);position:relative;}
.proof-grid > div::before{
content:counter(proof-index,decimal-leading-zero);
counter-increment:proof-index;
position:absolute;top:-4px;right:var(--s4);
font-family:var(--mono);font-size:10px;color:var(--grey);
letter-spacing:.14em;
}
.proof-grid{counter-reset:proof-index;}
.proof-num{
font-variant-numeric:tabular-nums;
transform-origin:left bottom;
}
.proof-num.counting{animation:numFade .6s var(--ease-out);}
@keyframes numFade{
from{opacity:.4;transform:translateY(6px);}
to{opacity:1;transform:none;}
}
/* ─── SECTION — numero big ancorado ────────────────────── */
.section{position:relative;}
.section[data-chapter]::before{
content:attr(data-chapter);
position:absolute;top:var(--s6);right:var(--s5);
font-family:var(--mono);font-size:10px;letter-spacing:.18em;
color:var(--text-3);text-transform:uppercase;
display:flex;align-items:center;gap:var(--s2);
}
.section[data-chapter]::before{
--line:"";
}
.section-dark[data-chapter]::before{color:var(--silver);}
/* ─── PROBLEM CARDS — hover amplifica border-left ──────── */
.problem-card{position:relative;overflow:hidden;}
.problem-card::after{
content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
background:var(--onyx);transform:scaleY(0);transform-origin:top;
transition:transform .5s var(--ease-out);
}
.problem-card:hover::after{transform:scaleY(1);}
.problem-card h3{transition:letter-spacing .3s var(--ease);}
.problem-card:hover h3{letter-spacing:-.028em;}
/* ─── PIVOT DIAGRAM — pulse nos hubs ───────────────────── */
.pivot-diagram svg circle[r="22"]{
transform-origin:center;transform-box:fill-box;
animation:hubPulse 3s ease-in-out infinite;
}
.pivot-diagram svg circle[r="22"]:nth-child(2){animation-delay:.4s;}
.pivot-diagram svg circle[r="22"]:nth-child(3){animation-delay:.8s;}
.pivot-diagram svg circle[r="22"]:nth-child(4){animation-delay:1.2s;}
@keyframes hubPulse{
0%,100%{opacity:1;}
50%{opacity:.55;}
}
/* ─── GALLERY — tab com barra de progresso ─────────────── */
.gallery-tabs{gap:0;position:relative;}
.gallery-tab{position:relative;padding:var(--s4) var(--s5);}
.gallery-tab .idx{
font-family:var(--mono);font-weight:700;font-size:10px;
padding:2px 6px;border:1px solid var(--border);border-radius:var(--r-sm);
transition:all .18s var(--ease);
}
.gallery-tab.active .idx{background:var(--onyx);color:var(--white);border-color:var(--onyx);}
.gallery-tab:hover .idx{border-color:var(--text-1);}
.gallery-panel.active{animation:galleryFade .5s var(--ease-out);}
@keyframes galleryFade{
from{opacity:0;transform:translateY(10px);}
to{opacity:1;transform:none;}
}
.gallery-img{position:relative;}
.gallery-img::before,
.gallery-img::after{
content:"";position:absolute;width:10px;height:10px;border:1px solid var(--text-3);
pointer-events:none;
}
.gallery-img::before{top:8px;left:8px;border-right:none;border-bottom:none;}
.gallery-img::after{bottom:8px;right:8px;border-left:none;border-top:none;}
/* ─── HOW STEPS — marcador progressivo ─────────────────── */
.how-step{position:relative;transition:transform .3s var(--ease-out),border-color .2s;}
.how-step:hover{transform:translateY(-2px);}
.how-step::before{
content:"";position:absolute;top:-1px;left:-1px;width:32px;height:2px;
background:var(--text-1);
transform:scaleX(0);transform-origin:left;
transition:transform .5s var(--ease-out);
}
.how-step:hover::before{transform:scaleX(1);}
.how-num{font-weight:700;}
/* ─── BOARD — overlay hover com nome ───────────────────── */
.board-card{position:relative;}
.board-photo{transition:filter .5s var(--ease);}
.board-card:hover .board-photo{filter:grayscale(1) contrast(1.1) brightness(.82);}
.board-card .board-meta{transition:transform .3s var(--ease-out);}
.board-card:hover .board-meta{transform:translateY(-2px);}
/* ─── DIFF CELL — numeracao grande fantasma ────────────── */
.diff-cell{position:relative;overflow:hidden;}
.diff-cell::before{
content:attr(data-ghost);
position:absolute;top:-20px;right:-10px;
font-family:var(--font);font-weight:800;font-size:180px;
color:var(--charcoal);opacity:.25;line-height:.8;
pointer-events:none;letter-spacing:-.08em;
}
/* ─── PARTNERS TICKER ──────────────────────────────────── */
.partners-ticker{
margin-top:var(--s6);padding:var(--s4) 0;
border-top:1px solid var(--border);border-bottom:1px solid var(--border);
overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.partners-track{
display:flex;gap:var(--s8);width:max-content;
animation:tickerRun 36s linear infinite;
}
.partners-track:hover{animation-play-state:paused;}
.partners-track .tick{
font-family:var(--font);font-weight:700;font-size:20px;
letter-spacing:-.015em;color:var(--text-2);white-space:nowrap;
display:inline-flex;align-items:center;gap:var(--s3);
}
.partners-track .tick::after{
content:"";width:6px;height:6px;border-radius:50%;background:var(--text-3);
}
@keyframes tickerRun{
from{transform:translateX(0);}
to{transform:translateX(-50%);}
}
/* ─── AUD CTA — arrow slide ────────────────────────────── */
.aud-card{transition:transform .3s var(--ease-out),border-color .2s;}
.aud-card:hover{transform:translateY(-3px);}
/* ─── COMPARE TABLE — row stripe on hover ──────────────── */
.compare tbody tr{transition:background .2s;}
.compare tbody tr:hover td{background:rgba(255,255,255,.02);}
.compare td.anova{position:relative;}
.compare tr:first-child td.anova::before{
content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--white);
}
/* ─── VERTICALS — hover expand ─────────────────────────── */
.vertical{transition:all .2s var(--ease);cursor:default;}
.vertical:hover{border-color:var(--text-1);color:var(--text-1);transform:translateY(-1px);}
/* ─── VISION — linha central grande ────────────────────── */
.vision{position:relative;}
.vision::before{
content:"▼";position:absolute;left:50%;top:-20px;transform:translateX(-50%);
font-size:10px;color:var(--silver);letter-spacing:0;
}
/* ─── CTA SEGMENTS — hover slide full ──────────────────── */
.cta-segment{position:relative;overflow:hidden;z-index:1;}
.cta-segment::before{
content:"";position:absolute;inset:0;background:var(--onyx);
transform:translateX(-101%);transition:transform .4s var(--ease-out);z-index:-1;
}
.cta-segment:hover::before{transform:translateX(0);}
.cta-segment:hover,.cta-segment:hover b,.cta-segment:hover small{color:var(--white);}
.cta-segment:hover::after{color:var(--white);}
/* ─── FORM — inputs com caret onyx ─────────────────────── */
.input,.select,.textarea{caret-color:var(--onyx);transition:border-color .2s,background .2s;}
.input:hover,.select:hover,.textarea:hover{border-color:var(--grey);}
.field-label{font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);}
/* ─── BTN — microinteraction ───────────────────────────── */
.btn{position:relative;overflow:hidden;}
.btn-primary::after{
content:"";position:absolute;inset:0;background:var(--white);
transform:translateX(-101%) skewX(-12deg);transition:transform .5s var(--ease-out);
mix-blend-mode:difference;
}
.btn-primary:hover::after{transform:translateX(101%) skewX(-12deg);}
.btn-outline{transition:all .25s var(--ease-out);}
.btn-outline:hover{transform:translateY(-1px);}
/* ─── LINK TREATMENT — editorial ───────────────────────── */
a:where(.prose a,.founder-quote a){
position:relative;border-bottom:1px solid currentColor;
transition:color .2s;padding-bottom:1px;
}
a:where(.prose a):hover{color:var(--text-1);}
/* ─── FOOTER — refinar ─────────────────────────────────── */
.footer-bot span:last-child{letter-spacing:.14em;font-weight:600;color:var(--silver);}
.footer-col a{transition:color .15s,padding-left .15s;}
.footer-col a:hover{color:var(--white);padding-left:4px;}
/* ─── COUNTER / TICKER TAGS ────────────────────────────── */
.chip{
display:inline-flex;align-items:center;gap:6px;
padding:5px 12px;border:1px solid var(--border);border-radius:99px;
font-family:var(--mono);font-size:10px;letter-spacing:.12em;
text-transform:uppercase;color:var(--text-2);
}
.chip-dot{width:6px;height:6px;border-radius:50%;background:var(--onyx);}
.section-dark .chip{border-color:var(--charcoal);color:var(--silver);}
.section-dark .chip-dot{background:var(--silver);}
/* ─── GRAIN — subtil em heros escuros ──────────────────── */
.section-dark{position:relative;}
.section-dark::before{
content:"";position:absolute;inset:0;pointer-events:none;opacity:.04;
background-image:url("data:image/svg+xml;utf8,");
background-size:160px 160px;mix-blend-mode:overlay;z-index:0;
}
.section-dark > *{position:relative;z-index:1;}
/* ─── DROPCAP — prose opener ───────────────────────────── */
.prose p:first-of-type::first-letter{
font-weight:800;letter-spacing:-.04em;
}
/* ─── PILLAR HOVER ─────────────────────────────────────── */
.pillar{transition:border-color .25s,padding-left .25s var(--ease);}
.pillar:hover{border-left-width:3px;padding-left:calc(var(--s5) - 1px);}
/* ─── MEDIA HOVER ──────────────────────────────────────── */
.media-grid img{transition:opacity .3s,filter .3s,transform .3s var(--ease-out);}
.media-grid img:hover{transform:translateY(-2px);}
/* ─── KEYPOINT / CALLOUT ───────────────────────────────── */
.keypoint{
display:grid;grid-template-columns:auto 1fr;gap:var(--s5);align-items:start;
padding:var(--s5) 0;border-top:1px solid var(--border);
}
.keypoint:last-child{border-bottom:1px solid var(--border);}
.keypoint-index{
font-family:var(--mono);font-size:10px;letter-spacing:.14em;
color:var(--text-3);padding-top:6px;min-width:40px;
}
.keypoint-body h4{font-size:17px;font-weight:700;letter-spacing:-.01em;margin-bottom:4px;}
.keypoint-body p{font-size:14px;color:var(--text-2);line-height:1.6;}
.section-dark .keypoint{border-color:var(--charcoal);}
.section-dark .keypoint-index{color:var(--silver);}
.section-dark .keypoint-body h4{color:var(--white);}
.section-dark .keypoint-body p{color:var(--silver);}
/* ─── BIG NUMBER DISPLAY — editorial ───────────────────── */
.big-number{
font-family:var(--font);font-weight:800;
font-size:clamp(64px,12vw,180px);line-height:.88;
letter-spacing:-.055em;color:var(--text-1);
font-variant-numeric:tabular-nums;
}
.big-number sub{
font-size:.22em;font-weight:500;letter-spacing:0;
color:var(--text-3);vertical-align:baseline;margin-left:.08em;
}
.section-dark .big-number{color:var(--white);}
.section-dark .big-number sub{color:var(--silver);}
/* ─── RULE/DIVIDER — tick marks ────────────────────────── */
.rule-ticks{
display:flex;gap:0;height:14px;margin:var(--s4) 0;
border-top:1px solid var(--border);position:relative;
}
.rule-ticks::before,
.rule-ticks::after{
content:"";position:absolute;top:0;width:1px;height:8px;background:var(--text-3);
}
.rule-ticks::before{left:0;}
.rule-ticks::after{right:0;}
.rule-ticks span{
flex:1;border-right:1px solid var(--border);height:4px;
}
.rule-ticks span:last-child{border-right:none;}
/* ─── FLEX CALLBACK — in-line eyebrow for product pages ── */
.meta-line{
display:flex;gap:var(--s5);align-items:center;flex-wrap:wrap;
font-family:var(--mono);font-size:11px;letter-spacing:.14em;
text-transform:uppercase;color:var(--text-3);
padding:var(--s4) 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);
margin-top:var(--s6);
}
.meta-line span{display:inline-flex;align-items:center;gap:var(--s2);}
.meta-line span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--text-1);}
.section-dark .meta-line{border-color:var(--charcoal);color:var(--silver);}
.section-dark .meta-line span::before{background:var(--silver);}
/* ─── BACK-TO-TOP ──────────────────────────────────────── */
.back-top{
position:fixed;right:var(--s5);bottom:var(--s5);
width:44px;height:44px;border-radius:50%;
background:var(--white);border:1px solid var(--border);
display:flex;align-items:center;justify-content:center;
opacity:0;transform:translateY(10px);pointer-events:none;
transition:opacity .25s,transform .25s,border-color .2s;
z-index:40;cursor:pointer;
}
.back-top.visible{opacity:1;transform:none;pointer-events:auto;}
.back-top:hover{border-color:var(--text-1);}
.back-top::before{
content:"";width:10px;height:10px;border-top:1.5px solid var(--text-1);
border-left:1.5px solid var(--text-1);transform:rotate(45deg) translate(1px,1px);
}
/* ─── VIDEO CARD — play smoother ───────────────────────── */
.video-frame .vplay::before{transition:transform .3s var(--ease-spring);}
.video-frame:hover .vplay::before{transform:scale(1.08);}
/* ─── IMPROVE PROBLEM CARD NUM ─────────────────────────── */
.problem-num{font-weight:700;letter-spacing:.14em;}
.how-num,.diff-num,.aud-tag,.board-role,.hero-tag{font-weight:600;letter-spacing:.14em;}
/* ─── KBD-LIKE NUM ─────────────────────────────────────── */
.problem-num::after{
content:"";flex:1;height:1px;background:var(--border);opacity:.5;
margin-left:var(--s3);max-width:40px;
}
/* ─── BUTTONS — tighter sizing, arrow animation ────────── */
.btn span.arr,
.btn::after[data-btn-arrow]{display:inline-block;transition:transform .25s var(--ease-out);}
.btn:hover span.arr{transform:translateX(3px);}
/* ═══════════════════════════════════════════════════════════
REFATOR — Amplificação editorial (v2)
Chapter rail · Flywheel · Ghost numerals · Pull-quote
═══════════════════════════════════════════════════════════ */
/* ─── CHAPTER RAIL — TOC editorial fixa (left) ─────────── */
.chapter-rail{
position:fixed;left:var(--s4);top:50%;transform:translateY(-50%);
z-index:30;display:flex;flex-direction:column;gap:var(--s3);
pointer-events:none;
}
.chapter-rail-item{
display:flex;align-items:center;gap:var(--s3);
font-family:var(--font);font-size:9px;font-weight:600;
letter-spacing:.18em;text-transform:uppercase;
color:var(--text-3);pointer-events:auto;
transition:color .25s var(--ease),transform .25s;
text-decoration:none;
}
.chapter-rail-item::before{
content:"";display:block;width:16px;height:1px;
background:currentColor;transition:width .3s var(--ease-out);
}
.chapter-rail-item:hover{color:var(--text-1);}
.chapter-rail-item:hover::before{width:32px;}
.chapter-rail-item.active{color:var(--text-1);}
.chapter-rail-item.active::before{width:40px;background:var(--onyx);}
.chapter-rail-label{opacity:0;transform:translateX(-4px);
transition:opacity .25s,transform .25s;white-space:nowrap;}
.chapter-rail-item:hover .chapter-rail-label,
.chapter-rail-item.active .chapter-rail-label{opacity:1;transform:none;}
@media(max-width:1240px){.chapter-rail{display:none;}}
/* ─── GHOST NUMERAL — mega chapter behind H2 ───────────── */
.section[data-chapter-num]{position:relative;}
.section[data-chapter-num]::after{
content:attr(data-chapter-num);
position:absolute;right:var(--s5);top:var(--s9);
font-family:var(--font);font-weight:800;
font-size:clamp(180px,24vw,340px);line-height:.82;
letter-spacing:-.075em;color:var(--onyx);opacity:.035;
pointer-events:none;z-index:0;user-select:none;
}
.section-dark[data-chapter-num]::after{color:var(--white);opacity:.055;}
.section[data-chapter-num] > .container{position:relative;z-index:1;}
@media(max-width:880px){.section[data-chapter-num]::after{display:none;}}
/* ─── FLYWHEEL — arco de 7 capítulos ───────────────────── */
.flywheel-section{
background:var(--onyx);color:var(--white);padding:var(--s10) 0;
border-top:1px solid var(--charcoal);position:relative;overflow:hidden;
}
.flywheel-section::before{
content:"";position:absolute;inset:0;pointer-events:none;opacity:.06;
background-image:
linear-gradient(var(--charcoal) 1px,transparent 1px),
linear-gradient(90deg,var(--charcoal) 1px,transparent 1px);
background-size:64px 64px;
mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,#000 0%,transparent 80%);
-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,#000 0%,transparent 80%);
}
.flywheel-header{
display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);
align-items:center;margin-bottom:var(--s7);
}
@media(max-width:880px){.flywheel-header{grid-template-columns:1fr;gap:var(--s5);}}
.flywheel-header h2{color:var(--white);max-width:18ch;}
.flywheel-header h2 strong{font-weight:800;}
.flywheel-header .lead{color:var(--silver);max-width:48ch;}
.flywheel{
display:grid;grid-template-columns:repeat(7,1fr);gap:0;
border-top:1px solid var(--charcoal);
border-bottom:1px solid var(--charcoal);
position:relative;
align-items:stretch;
}
.fly-node{
padding:var(--s6) var(--s4) var(--s5);
border-right:1px solid var(--charcoal);
position:relative;transition:background .35s var(--ease);
display:flex;flex-direction:column;
min-height:280px;
}
.fly-node .fly-marker{min-height:20px;}
.fly-node .fly-index{min-height:64px;display:flex;align-items:flex-end;}
.fly-node .fly-title{min-height:48px;display:flex;align-items:flex-start;}
.fly-node:last-child{border-right:none;}
.fly-node:hover{background:rgba(255,255,255,.028);}
.fly-node:hover .fly-index{color:var(--silver);}
.fly-node:hover .fly-arrow{background:var(--white);color:var(--onyx);}
.fly-node--os{background:rgba(255,255,255,.04);border-left:2px solid var(--white);}
.fly-node--os .fly-index{color:var(--white);}
.fly-node--os .fly-title{color:var(--white);font-size:18px;}
.fly-node--os .fly-pain span{color:var(--white);}
.fly-marker{
font-family:var(--font);font-size:9px;font-weight:600;
letter-spacing:.18em;text-transform:uppercase;
color:var(--grey);margin-bottom:var(--s3);
}
.fly-index{
font-family:var(--font);font-weight:800;
font-size:72px;line-height:.88;letter-spacing:-.05em;
color:var(--charcoal);margin-bottom:var(--s4);
transition:color .35s var(--ease);
font-variant-numeric:tabular-nums;
min-height:64px;display:flex;align-items:flex-end;
}
.fly-title{
font-size:15px;font-weight:700;letter-spacing:-.01em;
color:var(--white);margin-bottom:var(--s3);line-height:1.22;
min-height:40px;display:flex;align-items:flex-start;
}
.fly-pain{
font-size:12px;color:var(--silver);line-height:1.55;
margin-top:auto;padding-top:var(--s3);
border-top:1px dashed var(--charcoal);
min-height:70px;
}
.fly-pain span{color:var(--grey);display:block;margin-bottom:3px;
font-size:9px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;}
.fly-solution{
font-size:12px;color:var(--white);line-height:1.55;
padding-top:var(--s3);
border-top:1px solid rgba(255,255,255,.12);
min-height:70px;
}
.fly-solution span{color:var(--silver);display:block;margin-bottom:3px;
font-size:9px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;}
.fly-arrow{
position:absolute;right:-11px;top:var(--s6);
width:22px;height:22px;border-radius:50%;
background:var(--onyx);border:1px solid var(--charcoal);
display:flex;align-items:center;justify-content:center;
font-size:11px;color:var(--silver);z-index:2;
transition:background .3s,color .3s;
}
.fly-node:last-child .fly-arrow{display:none;}
.flywheel-footer{
margin-top:var(--s7);padding-top:var(--s5);
border-top:1px solid var(--charcoal);
display:flex;justify-content:space-between;align-items:center;
flex-wrap:wrap;gap:var(--s4);
}
.flywheel-footer .law{
font-size:14px;color:var(--white);font-style:italic;
letter-spacing:-.005em;max-width:48ch;
}
.flywheel-footer .law strong{font-weight:700;font-style:normal;}
@media(max-width:1100px){
.flywheel{grid-template-columns:repeat(4,1fr);}
.fly-node:nth-child(4n){border-right:none;}
.fly-node{min-height:240px;border-bottom:1px solid var(--charcoal);}
.fly-node:nth-last-child(-n+3){border-bottom:none;}
.fly-arrow{display:none;}
}
@media(max-width:680px){
.flywheel{grid-template-columns:1fr;}
.fly-node{border-right:none;border-bottom:1px solid var(--charcoal);min-height:auto;}
.fly-node:last-child{border-bottom:none;}
}
/* ─── PROOF — elevado a editorial heroico ──────────────── */
.proof{padding:var(--s9) 0;}
.proof-grid > div{padding:0 var(--s5);position:relative;}
.proof-grid .proof-num{
font-family:var(--font);font-weight:800;
font-size:clamp(56px,8vw,96px);line-height:.9;
letter-spacing:-.05em;color:var(--white);
font-variant-numeric:tabular-nums;
}
.proof-grid .proof-num sub{
font-size:.28em;font-weight:500;letter-spacing:0;
color:var(--silver);margin-left:.12em;vertical-align:baseline;
}
.proof-grid .proof-label{
margin-top:var(--s4);font-size:11px;font-weight:500;
letter-spacing:.12em;text-transform:uppercase;color:var(--silver);
max-width:28ch;line-height:1.5;
}
.proof-grid > div::before{
content:counter(proof-index,decimal-leading-zero);
counter-increment:proof-index;
position:absolute;top:0;right:var(--s4);
font-family:var(--font);font-size:10px;font-weight:600;
color:var(--grey);letter-spacing:.16em;
}
/* ─── HERO — reforço editorial ─────────────────────────── */
.hero{padding:calc(64px + var(--s7)) 0 var(--s9);}
.hero h1{font-size:clamp(44px,7vw,84px);line-height:1;letter-spacing:-.04em;max-width:18ch;}
.hero-sub{font-size:clamp(17px,1.5vw,20px);line-height:1.55;max-width:58ch;}
.hero-sub a{color:var(--text-1);border-bottom:1px solid var(--text-3);
transition:border-color .2s;}
.hero-sub a:hover{border-bottom-color:var(--text-1);}
.hero-visual{border-radius:var(--r-xl);position:relative;}
.hero-visual::after{
content:attr(data-era);position:absolute;left:var(--s4);top:var(--s4);
font-family:var(--font);font-size:10px;font-weight:600;
letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);z-index:2;
}
/* ─── FOUNDER — pull-quote editorial ───────────────────── */
.founder-quote{position:relative;padding-top:var(--s5);}
.founder-quote::before{content:none;}
.founder-quote-mark{
position:absolute;left:-4px;top:-28px;
font-family:var(--font);font-weight:800;font-size:72px;
line-height:.5;color:var(--silver);pointer-events:none;
letter-spacing:-.05em;
}
.founder-quote a{color:var(--white);border-bottom:1px solid var(--silver);
transition:border-color .2s;}
.founder-quote a:hover{border-bottom-color:var(--white);}
/* ─── SECTION ADORNMENT — crosshair nos cantos ─────────── */
.section[data-adorn]{position:relative;}
.section[data-adorn]::before{
content:"+";position:absolute;top:var(--s6);left:var(--s5);
font-family:var(--font);font-size:14px;font-weight:300;
color:var(--text-3);line-height:1;z-index:1;
}
/* ─── VISION — arrow seta animada ──────────────────────── */
.vision::before{
animation:visionDrop 3s ease-in-out infinite;
}
@keyframes visionDrop{
0%,100%{transform:translateX(-50%) translateY(0);opacity:1;}
50%{transform:translateX(-50%) translateY(4px);opacity:.5;}
}
/* ─── GALLERY — enhanced active state ──────────────────── */
.gallery-tab.active{color:var(--text-1);border-bottom-color:var(--onyx);border-bottom-width:2px;}
.gallery-tab{font-size:12px;}
.gallery-info h3 strong{font-weight:800;}
/* ─── RESPONSIVE POLISH ────────────────────────────────── */
@media(max-width:680px){
.hero{padding-top:calc(64px + var(--s6));}
.hero::before,.hero::after{display:none;}
.section[data-chapter]::before{display:none;}
.partners-track{gap:var(--s6);}
}
/* ─── IMAGE SLOT PLACEHOLDER ───────────────────────────── */
.img-slot{
width:100%;height:100%;min-height:200px;
background:var(--snow);
border-radius:var(--r-lg);
display:flex;align-items:center;justify-content:center;
}
.img-slot::after{
content:'↑ imagem';
font-family:var(--mono);font-size:11px;
letter-spacing:.12em;text-transform:uppercase;
color:var(--text-3);
}
/* === cta-form.css === */
/* ═══════════════════════════════════════════════════════
ANOVA · CTA FORM (partial compartilhado)
Usado em todas as páginas de produto. Estilo dark-first
porque todos os CTAs ficam em section-dark / bg preto.
═══════════════════════════════════════════════════════ */
.anova-cta-form{
display:flex;flex-direction:column;gap:var(--s4,16px);
padding:var(--s6,32px);
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.14);
border-radius:var(--r-xl,20px);
max-width:640px;
width:100%;
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
}
/* light surface (se for usada em bg claro, ex: Landing) */
.anova-cta-form.is-light{
background:#FFFFFF;
border-color:rgba(10,10,10,.08);
box-shadow:0 1px 2px rgba(10,10,10,.04), 0 8px 32px rgba(10,10,10,.06);
}
.acf-row{
display:grid;grid-template-columns:1fr 1fr;gap:var(--s4,16px);
}
@media(max-width:560px){.acf-row{grid-template-columns:1fr;}}
.acf-field{display:flex;flex-direction:column;gap:6px;}
.acf-label{
font-family:var(--mono, ui-monospace, monospace);
font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
color:rgba(255,255,255,.6);
display:flex;align-items:center;gap:6px;
}
.anova-cta-form.is-light .acf-label{color:var(--text-3,#767676);}
.acf-opt{
font-size:9.5px;letter-spacing:.08em;text-transform:none;
color:rgba(255,255,255,.4);font-weight:400;
}
.anova-cta-form.is-light .acf-opt{color:rgba(10,10,10,.4);}
.acf-input{
width:100%;
font-family:var(--font, system-ui, sans-serif);
font-size:15px;line-height:1.4;letter-spacing:-.005em;
color:#FFFFFF;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.16);
border-radius:10px;
padding:12px 14px;
transition:border-color .2s, background .2s, box-shadow .2s;
outline:none;
appearance:none;
-webkit-appearance:none;
}
.anova-cta-form.is-light .acf-input{
color:var(--text-1,#0A0A0A);
background:#FFFFFF;
border-color:rgba(10,10,10,.12);
}
.acf-input::placeholder{color:rgba(255,255,255,.35);}
.anova-cta-form.is-light .acf-input::placeholder{color:rgba(10,10,10,.3);}
.acf-input:hover{border-color:rgba(255,255,255,.28);}
.anova-cta-form.is-light .acf-input:hover{border-color:rgba(10,10,10,.22);}
.acf-input:focus{
border-color:rgba(255,255,255,.6);
background:rgba(255,255,255,.09);
box-shadow:0 0 0 3px rgba(255,255,255,.08);
}
.anova-cta-form.is-light .acf-input:focus{
border-color:var(--text-1,#0A0A0A);
box-shadow:0 0 0 3px rgba(10,10,10,.06);
}
.acf-textarea{resize:vertical;min-height:86px;font-family:var(--font, system-ui, sans-serif);}
/* select custom caret */
.acf-select{
background-image:linear-gradient(45deg, transparent 50%, rgba(255,255,255,.45) 50%),
linear-gradient(135deg, rgba(255,255,255,.45) 50%, transparent 50%);
background-position:calc(100% - 18px) 19px, calc(100% - 13px) 19px;
background-size:5px 5px;
background-repeat:no-repeat;
padding-right:36px;
}
.anova-cta-form.is-light .acf-select{
background-image:linear-gradient(45deg, transparent 50%, rgba(10,10,10,.5) 50%),
linear-gradient(135deg, rgba(10,10,10,.5) 50%, transparent 50%);
}
.acf-select option{background:#0A0A0A;color:#FFFFFF;}
.anova-cta-form.is-light .acf-select option{background:#FFFFFF;color:#0A0A0A;}
/* submit */
.acf-submit{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
width:100%;
padding:15px 22px;
border:none;cursor:pointer;
background:#FFFFFF;color:#0A0A0A;
border-radius:10px;
font-family:var(--font, system-ui, sans-serif);
font-size:15px;font-weight:600;letter-spacing:-.01em;
margin-top:var(--s2,8px);
transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
box-shadow:0 2px 4px rgba(0,0,0,.2);
}
.anova-cta-form.is-light .acf-submit{
background:#0A0A0A;color:#FFFFFF;
box-shadow:0 1px 2px rgba(10,10,10,.12), 0 6px 20px rgba(10,10,10,.12);
}
.acf-submit:hover{transform:translateY(-1px);background:#F4F4F4;}
.anova-cta-form.is-light .acf-submit:hover{background:#1A1A1A;}
.acf-submit:active{transform:translateY(0);}
.acf-submit-arr{transition:transform .2s;}
.acf-submit:hover .acf-submit-arr{transform:translateX(3px);}
.acf-submit[disabled],
.acf-submit.is-sending{opacity:.7;cursor:progress;}
.acf-submit.is-sent{background:#E8F5EE;color:#166534;}
.acf-disclaimer{
font-family:var(--mono, ui-monospace, monospace);
font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
color:rgba(255,255,255,.45);
text-align:center;margin-top:6px;
line-height:1.5;
}
.anova-cta-form.is-light .acf-disclaimer{color:rgba(10,10,10,.4);}
/* inválido só depois de tentar enviar */
.anova-cta-form.was-validated .acf-input:invalid{
border-color:#FF6B6B;
box-shadow:0 0 0 3px rgba(255,107,107,.12);
}
/* grid de 2 colunas da seção que contém o form */
.acf-section-grid{
display:grid;grid-template-columns:1fr 1fr;gap:var(--s8,64px);
align-items:start;
}
@media(max-width:900px){.acf-section-grid{grid-template-columns:1fr;gap:var(--s6,32px);}}