/* NOC Solut. Prefixo noc-. Depende dos tokens de site.css. */

.noc-hero { min-height: calc(100dvh - var(--nav-h)); display: flex; align-items: center; padding-block: var(--space-7); background: var(--paper); overflow-x: clip; }
.noc-hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-7) var(--space-8); align-items: center; width: 100%; }
.noc-hero__eyebrow { margin-bottom: var(--space-4); }
.noc-hero__title { font-size: clamp(2rem, 3.8vw, 3.25rem); max-width: 20ch; }
.noc-hero__lead { margin-top: var(--space-5); font-size: 1.1875rem; line-height: 1.55; max-width: 44ch; }
.noc-hero__visual { min-width: 0; }

.noc-frame { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); box-shadow: 0 24px 48px -24px rgb(11 27 63 / 0.28); }
.noc-frame img { width: 100%; height: auto; display: block; }
.noc-hero .noc-frame img { aspect-ratio: 16 / 11; object-fit: cover; object-position: top left; }
.noc-figure { min-width: 0; }
.noc-figure figcaption { margin-top: var(--space-3); font-size: var(--text-small); color: var(--ink-500); max-width: 52ch; }
.noc-figure figcaption strong { display: block; color: var(--navy-900); font-size: 1.0625rem; margin-bottom: 2px; }

/* Vantagens: cabecalho a esquerda, lista de linhas a direita */
.noc-why { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-7) var(--space-8); align-items: start; }
.noc-why__head { position: sticky; top: calc(var(--nav-h) + var(--space-6)); }
.noc-ledger__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-2) var(--space-6); padding-block: var(--space-5); border-top: 1px solid var(--line); }
.noc-ledger__row:last-child { border-bottom: 1px solid var(--line); }
.noc-ledger dt { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; color: var(--navy-900); line-height: 1.3; }
.noc-ledger dd { font-size: var(--text-small); color: var(--ink-700); }

/* Como funciona (fundo navy) */
.noc-flow { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-7) var(--space-8); align-items: start; }
.noc-flow__facts { display: grid; gap: var(--space-6); }
.noc-flow__value { display: block; font-size: clamp(3rem, 6vw, 5rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: #fff; }
.noc-flow__label { display: block; margin-top: var(--space-2); color: #C9D3E6; max-width: 26ch; }
.noc-steps { counter-reset: noc-step; }
.noc-steps > li { counter-increment: noc-step; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: var(--space-4); padding-block: var(--space-5); border-top: 1px solid rgb(255 255 255 / 0.16); }
.noc-steps > li:last-child { border-bottom: 1px solid rgb(255 255 255 / 0.16); }
.noc-steps > li::before { content: counter(noc-step); grid-row: span 2; font-family: var(--font-mono); font-size: 1.125rem; color: #C9D3E6; padding-top: 2px; }
.noc-steps h3 { color: #fff; font-size: 1.25rem; }
.noc-steps p { margin-top: var(--space-2); color: #C9D3E6; font-size: var(--text-small); max-width: 52ch; }

/* Funcionalidades */
.noc-pair { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6); align-items: start; }
.noc-split { align-items: center; }
.noc-admin { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-6); align-items: end; }

/* Seguranca */
.noc-secure { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-8); }
.noc-secure__item { padding-left: var(--space-5); border-left: 2px solid var(--line); }
.noc-secure__item i { font-size: 1.75rem; color: var(--navy-700); }
.noc-secure__item h3 { margin-top: var(--space-3); font-size: 1.1875rem; }
.noc-secure__item p { margin-top: var(--space-2); font-size: var(--text-small); max-width: 42ch; }

.noc-faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-7) var(--space-8); align-items: start; }

@media (max-width: 860px) {
  .noc-hero { min-height: 0; }
  .noc-hero__grid, .noc-why, .noc-flow, .noc-pair, .noc-admin, .noc-secure, .noc-faq, .noc-ledger__row { grid-template-columns: minmax(0, 1fr); }
  .noc-why__head { position: static; }
  .noc-flow__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}