/* ============================================================
   VOLKY TECNOLOGIA — VERTENTE & PRODUTOS (aprofundamento)
   Deriva de brand.css. Herda o material da vertente:
   LUZ & FLUXO CYAN — a matéria virando informação.
   Carregar DEPOIS de brand.css.

   Estrutura (diferente da Engenharia): camadas, não irmãos.
   motores (infra) → produtos → ONIIA (o case vivo, separável).
   Única vertente com MOVIMENTO — a energia da inteligência.
   ============================================================ */

:root {
  --accent: #4FC9C4;        /* cyan core */
  --accent-strong: #8FF2EC; /* luz */
  --accent-deep: #2C9A95;   /* cyan profundo */
  --accent-ink: #04201F;
  --accent-tint: color-mix(in oklab, #4FC9C4 14%, transparent);
  --accent-line: color-mix(in oklab, #4FC9C4 38%, transparent);
  --bg:        #08100F;
  --bg-1:      #0A1413;
  --surface:   #0E1A19;
  --surface-2: #12211F;
  --line:      #1C2C2A;
  --line-2:    #294240;
  --text:      #E6F0EF;
  --text-2:    #9CB2AF;
  --text-3:    #5F7572;
}

/* espinha branca no escuro; dark 90% no claro */
svg[viewBox="0 0 100 100"] { color: #FFFFFF; }
.canvas--light svg[viewBox="0 0 100 100"],
[data-mode="light"] svg[viewBox="0 0 100 100"] { color: #1A1A1A; }

/* ---------- MOVIMENTO — fluxo de dados cyan ---------- */
@keyframes flow-x { from { background-position: 0 0; } to { background-position: 200px 0; } }
@keyframes flow-up { from { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } to { transform: translateY(-120px); opacity: 0; } }
@keyframes pulse-cyan { 0%,100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes dash-flow { to { stroke-dashoffset: -40; } }
@keyframes sheen { from { background-position: -180% 0; } to { background-position: 280% 0; } }

.flowfield { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.flowfield::before {
  content: ""; position: absolute; inset: -20%;
  background-image: repeating-linear-gradient(26deg, transparent, transparent 26px, color-mix(in oklab,#4FC9C4 12%, transparent) 26px, color-mix(in oklab,#4FC9C4 12%, transparent) 27px);
}
@media (prefers-reduced-motion: no-preference) {
  .flowfield::before { animation: flow-x 6s linear infinite; }
}
.flowfield--soft::before { opacity: 0.5; }

/* ---------- HERO ---------- */
.thero { min-height: 100vh; display: grid; grid-template-columns: 1.12fr 0.88fr; border-bottom: 1px solid var(--line); }
.thero__txt { padding: var(--s9) var(--s8); display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 1; }
.thero__side { border-left: 1px solid var(--line); position: relative; overflow: hidden; background:
  radial-gradient(130% 90% at 68% 30%, color-mix(in oklab, #4FC9C4 22%, transparent), transparent 62%), #06100F; display: grid; place-items: center; }
.thero__kick { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--s5); }
.thero__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 5.4vw, 4.6rem); line-height: 0.98; letter-spacing: -0.02em; }
.thero__title .sub { display:block; font-weight: 400; font-size: 0.4em; letter-spacing: 0.32em; text-transform: uppercase; color: var(--text-2); margin-top: var(--s4); }
.thero__lead { max-width: 46ch; margin-top: var(--s6); font-size: var(--t-lg); line-height: 1.5; color: var(--text-2); font-weight: 300; }
.thero__stats { display: flex; gap: var(--s7); margin-top: var(--s8); flex-wrap: wrap; }
.thero__stats dt { font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; color: var(--text); line-height: 1; }
.thero__stats dd { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin-top: 6px; }
@media (max-width: 920px) { .thero { grid-template-columns: 1fr; } .thero__side { border-left: 0; border-top: 1px solid var(--line); min-height: 320px; } }

/* lockup */
.tlock { display: flex; align-items: center; gap: var(--s4); }
.tlock .vmark { width: 52px; height: 52px; flex: none; }
.tlock__txt { display: flex; flex-direction: column; gap: 4px; border-left: 1px solid var(--line-2); padding-left: var(--s4); }
.tlock__master { font-family: var(--font-body); font-weight: 700; letter-spacing: 0.2em; font-size: 1.15rem; line-height: 1; }
.tlock__div { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--accent); }

/* ---------- ARQUITETURA EM CAMADAS ---------- */
.layers { display: flex; flex-direction: column; gap: var(--s4); position: relative; }
.layer { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); padding: var(--s5) var(--s6); position: relative; overflow: hidden; }
.layer__tag { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); margin-bottom: var(--s3); }
.layer__row { display: flex; gap: var(--s4); flex-wrap: wrap; align-items: center; }
.layer__chip { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.04em; padding: var(--s2) var(--s4); border: 1px solid var(--line-2); border-radius: var(--r-sm); font-size: var(--t-md); }
.layer--infra { border-left: 3px solid var(--accent-deep); }
.layer--prod { border-left: 3px solid var(--accent); }
.layer--star { border-left: 3px solid var(--accent-strong); background:
  linear-gradient(180deg, color-mix(in oklab,#4FC9C4 8%, transparent), transparent); }
.layer__flow { position: absolute; right: var(--s5); top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: 0.6rem; color: var(--accent); letter-spacing: 0.12em; }
.layer__updots { display: inline-flex; flex-direction: column; gap: 3px; }

/* conector entre camadas */
.layer-link { display: flex; justify-content: center; padding: 2px 0; }
.layer-link svg { width: 22px; height: 22px; color: var(--accent); }

/* ---------- MOTORES ---------- */
.motor { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface); display: flex; flex-direction: column; }
.motor__head { padding: var(--s6); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; min-height: 150px; display: flex; flex-direction: column; justify-content: space-between; background: #06100F; }
.motor__badge { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); position: relative; }
.motor__name { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.02em; font-size: clamp(2rem,4vw,2.8rem); position: relative; line-height: 0.9; }
.motor__name .lt { color: var(--accent); }
.motor__body { padding: var(--s6); display: flex; flex-direction: column; gap: var(--s4); flex: 1; }
.motor__what { font-size: var(--t-sm); color: var(--text-2); line-height: 1.55; }
.motor__caps { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: auto; padding-top: var(--s4); border-top: 1px dashed var(--line-2); }
.motor__caps span { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.06em; border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 3px 9px; color: var(--text-2); }

/* ---------- ONIIA — o case vivo ---------- */
.oniia-hero { border: 1px solid var(--accent-line); border-radius: var(--r-md); overflow: hidden; position: relative; background:
  radial-gradient(120% 120% at 80% 10%, color-mix(in oklab,#4FC9C4 16%, transparent), transparent 55%), var(--surface); }
.oniia-hero__in { padding: var(--s8) var(--s7); position: relative; z-index: 1; }
.oniia-wm { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.04em; font-size: clamp(3rem,8vw,6rem); line-height: 0.9; }
.oniia-wm .oni { color: var(--accent); }
.oniia-tri { display: flex; gap: var(--s5); flex-wrap: wrap; margin-top: var(--s5); }
.oniia-tri div { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.oniia-tri b { color: var(--accent); display: block; font-size: 0.92rem; letter-spacing: 0.04em; margin-bottom: 2px; }

/* Triple Panel mock — Z1 / Z2 / Z3 */
.triple { display: grid; grid-template-columns: 0.9fr 1.2fr 0.9fr; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: #06100F; }
.zone { padding: var(--s5); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s3); min-height: 280px; position: relative; }
.zone:last-child { border-right: 0; }
.zone--z2 { background: linear-gradient(180deg, color-mix(in oklab,#4FC9C4 9%, transparent), transparent); }
.zone__id { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.zone__title { font-family: var(--font-display); font-weight: 600; font-size: var(--t-md); }
.zone__note { font-size: var(--t-xs); color: var(--text-3); line-height: 1.5; }
.zone__mini { margin-top: auto; display: flex; flex-direction: column; gap: var(--s2); }
.minirow { display: flex; align-items: center; gap: var(--s2); font-family: var(--font-mono); font-size: 0.6rem; color: var(--text-2); }
.minirow i { width: 8px; height: 8px; border-radius: 2px; background: var(--accent-deep); flex: none; }
.minirow i.on { background: var(--accent); }
.brain { width: 64px; height: 64px; border-radius: 50%; margin: var(--s3) auto; background:
  radial-gradient(circle at 50% 45%, var(--accent-strong), var(--accent) 45%, var(--accent-deep) 75%);
  display: grid; place-items: center; }
@media (prefers-reduced-motion: no-preference) { .brain { animation: pulse-cyan 3.2s ease-in-out infinite; } }
.brain span { font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.1em; color: var(--accent-ink); font-weight: 600; }
.pods { display: flex; flex-direction: column; gap: var(--s2); }
.pod { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border: 1px solid var(--line-2); border-radius: var(--r-sm); font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-2); background: var(--surface); }
.pod i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.actioncard { padding: var(--s2) var(--s3); border: 1px solid var(--accent-line); border-radius: var(--r-sm); font-family: var(--font-mono); font-size: 0.6rem; color: var(--accent); display: flex; align-items: center; gap: var(--s2); }
@media (max-width: 900px) { .triple { grid-template-columns: 1fr; } .zone { border-right: 0; border-bottom: 1px solid var(--line); } }

/* feature list ONIIA */
.feat { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s5); }
.feat__item { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s5); background: var(--surface); }
.feat__item h5 { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--s3); }
.feat__item p { font-size: var(--t-sm); color: var(--text-2); line-height: 1.55; }
@media (max-width: 900px) { .feat { grid-template-columns: 1fr; } }

/* roadmap */
.road { display: flex; gap: var(--s4); flex-wrap: wrap; }
.road__node { flex: 1; min-width: 180px; border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s5); background: var(--surface); position: relative; }
.road__node--future { border-style: dashed; border-color: var(--accent-line); }
.road__when { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--s2); }
.road__node h5 { font-family: var(--font-display); font-weight: 700; font-size: var(--t-md); margin-bottom: var(--s2); }
.road__node p { font-size: var(--t-xs); color: var(--text-3); line-height: 1.5; }

/* naming tree (reuso) */
.tree { position: relative; padding: var(--s6) 0; }
.tree__root { display: inline-flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s5); border: 1px solid var(--accent-line); border-radius: var(--r-md); background: var(--accent-tint); }
.tree__row { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s5); margin-top: var(--s6); }
.tree__node { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s5); background: var(--surface); }
.tree__node h5 { font-family: var(--font-display); font-weight: 700; font-size: var(--t-md); margin-bottom: var(--s2); }
.tree__node p { font-size: var(--t-xs); color: var(--text-3); font-family: var(--font-mono); letter-spacing: 0.04em; line-height: 1.5; }
.tree__lvl { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--s2); }
@media (max-width: 820px){ .tree__row { grid-template-columns: 1fr; } }

/* DNA herdado vs vida própria (reuso compacto) */
.dna { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.dna__col { padding: var(--s6); }
.dna__col:first-child { border-right: 1px solid var(--line); background: color-mix(in oklab, var(--accent) 5%, transparent); }
.dna__col h4 { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: var(--s4); font-weight: 500; }
.dna__col--in h4 { color: var(--accent); }
.dna__col--free h4 { color: var(--text-2); }
.dna__col ul { list-style: none; display: flex; flex-direction: column; gap: var(--s3); }
.dna__col li { font-size: var(--t-sm); display: flex; gap: var(--s3); align-items: baseline; color: var(--text-2); }
.dna__col--in li::before { content: "▰"; color: var(--accent); font-size: 0.7em; }
.dna__col--free li::before { content: "→"; color: var(--text-3); font-family: var(--font-mono); }
@media (max-width: 820px){ .dna { grid-template-columns: 1fr; } .dna__col:first-child { border-right: 0; border-bottom: 1px solid var(--line); } }

/* voz (reuso) */
.voice { display: grid; grid-template-columns: 160px 1fr; gap: var(--s5); padding: var(--s5) 0; border-top: 1px solid var(--line); }
.voice__who { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-3); line-height: 1.7; }
.voice__who b { color: var(--accent); display: block; font-weight: 500; }
.voice__say { display: flex; flex-direction: column; gap: var(--s3); }
.voice__line { font-family: var(--font-display); font-weight: 500; font-size: var(--t-lg); line-height: 1.25; color: var(--text); }
.voice__note { font-size: var(--t-sm); color: var(--text-2); }
@media (max-width: 720px){ .voice { grid-template-columns: 1fr; } }

/* endosso scale */
.endorse-scale { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s5); }
.escale { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s6); text-align: center; }
.escale__lockup { min-height: 56px; display: flex; align-items: center; justify-content: center; gap: var(--s3); margin-bottom: var(--s4); }
.escale__how { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
@media (max-width: 820px){ .endorse-scale { grid-template-columns: 1fr; } }

/* alimenta (motor → produto) */
.motor__feeds { font-family: var(--font-mono); font-size: 0.6rem; color: var(--text-3); letter-spacing: 0.04em; margin-top: var(--s3); }
.motor__feeds b { color: var(--accent); font-weight: 500; }

/* produtos */
.pgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s5); }
.pcard { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s5); background: var(--surface); display: flex; flex-direction: column; gap: var(--s2); }
.pcard__name { font-family: var(--font-display); font-weight: 700; font-size: var(--t-lg); line-height: 1; }
.pcard__name .ia { color: var(--accent); }
.pcard__motor { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.pcard__motor b { color: var(--accent); }
.pcard__what { font-size: var(--t-sm); color: var(--text-2); line-height: 1.5; margin-top: var(--s2); }
@media (max-width: 900px){ .pgrid { grid-template-columns: 1fr; } }