:root{
  --bg-black:#070912; --bg-navy-900:#0A0E2A; --bg-navy-800:#101840;
  --brand-cobalt:#2438E0; --brand-cobalt-deep:#1E33D8;
  --accent-light:#4D8CFF; --accent-violet:#6B4DE6;
  --text-primary:#FFFFFF; --text-offwhite:#EDEFF7; --text-secondary:#C4CAD9; --text-muted:#8A92B2;
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-6:24px;--sp-8:32px;--sp-12:48px;--sp-16:64px;--sp-24:96px;--sp-30:120px;--sp-40:160px;
  --radius-card:20px; --radius-inner:12px; --radius-pill:999px;
  --ease-out:cubic-bezier(0.16,1,0.3,1); --dur-reveal:500ms; --dur-hover:180ms;
  --container:1200px; --gutter:24px;
}

/* 3.1 escala tipográfica nomeada */
.type-display{font-family:var(--font-display);font-weight:500;font-size:clamp(2.5rem,5vw,4.5rem);line-height:1.1;letter-spacing:-0.01em;color:var(--text-primary)}
.type-h2{font-family:var(--font-display);font-weight:500;font-size:clamp(2rem,3.6vw,3rem);line-height:1.15;letter-spacing:-0.01em;color:var(--text-primary)}
.type-h3{font-family:var(--font-display);font-weight:500;font-size:clamp(1.5rem,2.2vw,1.75rem);line-height:1.2;letter-spacing:-0.01em;color:var(--text-primary)}
.type-lead{font-weight:400;font-size:clamp(1.25rem,1.8vw,1.375rem);line-height:1.4;color:var(--text-secondary)}
.type-body-lg{font-weight:400;font-size:1.125rem;line-height:1.5;color:var(--text-offwhite)}
.type-body{font-weight:400;font-size:1rem;line-height:1.5;color:var(--text-secondary)}
.type-card-title{font-family:var(--font-display);font-weight:500;font-size:clamp(1.125rem,1.5vw,1.25rem);line-height:1.25;color:var(--text-primary)}
.type-card-body{font-weight:400;font-size:0.9375rem;line-height:1.5;color:var(--text-secondary)}
.type-stat{font-family:var(--font-display);font-weight:500;font-size:clamp(3rem,4.5vw,4rem);line-height:1;color:var(--text-primary)}
.type-stat--accent{color:var(--accent-light)}
.type-stat-label{font-weight:400;font-size:0.8125rem;line-height:1.3;color:var(--text-muted)}
.type-caption{font-weight:400;font-size:0.8125rem;line-height:1.4;color:var(--text-muted)}

/* 3.2 OVERLINE: componente único e travado */
.overline{display:inline-flex;align-items:center;gap:var(--sp-2);font-family:var(--font-display);font-weight:500;font-size:13px;line-height:1;text-transform:uppercase;letter-spacing:0.03em;color:var(--accent-light);margin-bottom:var(--sp-4)}
.overline::before{content:"";width:24px;height:1px;background:var(--accent-light);opacity:.7;flex:0 0 24px}
@media(max-width:768px){.overline{font-size:12px}}

/* 4.1 divisores de fundo entre seções */
.divider-black-to-navy900{background:linear-gradient(180deg,#070912,#0A0E2A);height:200px}
.divider-navy900-to-navy800{background:linear-gradient(180deg,#0A0E2A,#101840);height:200px}
.divider-navy800-to-navy900{background:linear-gradient(180deg,#101840,#0A0E2A);height:200px}
.divider-navy900-to-black{background:linear-gradient(180deg,#0A0E2A,#070912);height:200px}
.divider-sm{height:160px}.divider-lg{height:240px}
@media(max-width:768px){[class*="divider-"]{height:120px}}
.bg-black{background:var(--bg-black)}.bg-navy-900{background:var(--bg-navy-900)}.bg-navy-800{background:var(--bg-navy-800)}

/* 5.1 superfícies em dois níveis: sólida é o default, vidro é pontual */
.surface{background:var(--bg-navy-800);border:1px solid rgba(255,255,255,0.08);border-radius:var(--radius-card);box-shadow:0 24px 64px rgba(7,9,18,0.45)}
.surface-glass{background:rgba(237,239,247,0.05);border:1px solid rgba(255,255,255,0.10);border-radius:var(--radius-card);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 24px 64px rgba(7,9,18,0.45)}
.surface:hover,.surface-glass:hover{border-color:rgba(77,140,255,0.35)}

/* 6.2 overlay de foto por tipo de cena */
.photo-hot{position:relative}
.photo-hot>img{filter:saturate(0.85) hue-rotate(-6deg)}
.photo-hot::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,14,42,0.35),rgba(7,9,18,0.55))}

/* 7.4 alturas por linha, não por texto */
.row-equal{display:grid;gap:var(--gutter);align-items:stretch}
.row-equal>*{height:100%}

/* 7.2 motion */
.hover-lift{transition:transform var(--dur-hover) var(--ease-out)}
.hover-lift:hover{transform:translateY(-4px)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.divider-navy800-to-light{background:linear-gradient(180deg,#101840,#FFFFFF);height:200px}
.divider-light-to-black{background:linear-gradient(180deg,#FFFFFF,#070912);height:200px}