/* ==========================================================================
   KORI · VISUAL IRIS (out/2026)
   Camada por cima do styles.css. Referência pedida pelo John: o template
   "Iris" (olho que encara o visitante, letra de terminal, moldura de
   painel), refeito do zero no azul da Kori.
   Azul da marca: #2563EB · #1E40AF · #60A5FA | Poppins + Inter
   07/10/2026: a letra de terminal (Martian Mono) e a Supreme saíram a
   pedido do John ("ficou quadrada, a de antes era melhor"). Voltou a
   fonte da marca em tudo.
   ========================================================================== */

:root {
  --bg:      #040507;                       /* quase preto, puxado pro azul */
  --bg-2:    #0A0D14;
  --line:    rgba(148, 163, 184, .14);
  --line-2:  rgba(148, 163, 184, .26);
  --label:   #8391A7;                       /* rótulos: 5.9:1 no fundo */
  --f-mono:  'Poppins', system-ui, sans-serif;   /* rótulos e botões (nome antigo mantido) */
  --tick:    rgba(203, 213, 225, .5);
  --r: 4px;
  --blue-text: #3B82F6;                     /* azul da marca, um tom acima: 5.5:1 para texto */
  --f-body:  'Inter', system-ui, sans-serif;
}

html { scrollbar-color: var(--blue-deep) var(--bg); scrollbar-width: thin; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #16264f; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--blue-deep); }
body { background: var(--bg); caret-color: var(--blue-soft); }
::selection { background: var(--blue); color: #fff; }

/* grão de filme fixo: tira a cara de tela lisa */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 98; pointer-events: none; opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   TIPOGRAFIA · títulos como sempre foram (Poppins forte), texto em Inter
   ========================================================================== */
h2 { text-wrap: balance; }
h2 em { color: var(--blue-text); }
p { text-wrap: pretty; }

/* ---------- botões: retos, de painel ---------- */
.btn {
  font-family: var(--f-mono); font-weight: 500; font-size: .7rem;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 16px 24px; border-radius: 2px; border-width: 1px;
  transition: background .25s, color .25s, border-color .25s, box-shadow .3s, transform .2s;
}
.btn:active { transform: translateY(1px) !important; }
.btn-solid { background: var(--blue); box-shadow: 0 14px 30px -16px rgba(37, 99, 235, .9); }
.btn-solid:hover { background: #F8FAFC; color: #05070D; transform: none; box-shadow: 0 18px 40px -18px rgba(96, 165, 250, .9); }
.btn-line { border-color: var(--line-2); color: #E2E8F0; }
.btn-line:hover { border-color: var(--blue-soft); color: var(--blue-soft); background: rgba(37, 99, 235, .08); transform: none; }

/* ==========================================================================
   MOLDURA DE PAINEL (HUD) · fixa na tela durante toda a visita
   ========================================================================== */
.hud {
  position: fixed; inset: 14px; z-index: 61; pointer-events: none;
  border: 1px solid rgba(148, 163, 184, .07);
}
.hud-c { position: absolute; width: 26px; height: 26px; border: 0 solid rgba(203, 213, 225, .55); }
.hud-tl { top: -6px;    left: -6px;  border-top-width: 1px;    border-left-width: 1px;  border-top-left-radius: 8px; }
.hud-tr { top: -6px;    right: -6px; border-top-width: 1px;    border-right-width: 1px; border-top-right-radius: 8px; }
.hud-bl { bottom: -6px; left: -6px;  border-bottom-width: 1px; border-left-width: 1px;  border-bottom-left-radius: 8px; }
.hud-br { bottom: -6px; right: -6px; border-bottom-width: 1px; border-right-width: 1px; border-bottom-right-radius: 8px; }
.hud-sec, .hud-clock {
  position: absolute; bottom: -.62em;
  font: 400 .64rem/1.2 var(--f-mono); letter-spacing: .26em; text-transform: uppercase;
  color: var(--label); background: var(--bg); padding: 0 10px;
}
.hud-sec { left: 34px; }
.hud-clock { right: 34px; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   CABEÇALHO e navegação lateral
   ========================================================================== */
.topbar.on { background: rgba(4, 5, 7, .84); box-shadow: 0 1px 0 var(--line); }
.menu { gap: 28px; }
.menu a {
  font-family: var(--f-mono); font-size: .66rem; font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase; color: #CBD5E1; opacity: 1;
}
.menu a:hover { color: var(--blue-soft); }
.menu-cta {
  border-radius: 2px; border: 1px solid rgba(96, 165, 250, .55);
  padding: 11px 18px; color: #F8FAFC !important; font-weight: 500;
}
.menu-cta:hover { background: var(--blue); border-color: var(--blue); }

/* os pontos viram traços de régua */
.dotnav { right: 30px; gap: 10px; }
.dotnav a { width: 30px; height: 14px; justify-items: end; }
.dotnav i { width: 26px; height: 1px; border-radius: 0; background: rgba(148, 163, 184, .5); transform: scaleX(.38); transform-origin: right; transition: transform .35s var(--ease), background .35s; }
.dotnav a:hover i { transform: scaleX(.62); background: var(--blue-soft); }
.dotnav a.on i { transform: none; background: var(--blue-soft); box-shadow: none; }

/* ==========================================================================
   HERO · o olho da Kori IA
   ========================================================================== */
.hero { display: block; height: 100vh; height: 100svh; min-height: 660px; background: var(--bg); }
#bgDots { opacity: .35; }
#irisEye { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .7s var(--ease); }
.eye-on #irisEye { opacity: 1; }
.hero::before {
  z-index: 2;
  background:
    radial-gradient(ellipse 85% 75% at 50% 38%, transparent 50%, rgba(4, 5, 7, .9) 100%),
    linear-gradient(180deg, transparent 50%, rgba(4, 5, 7, .55) 66%, rgba(4, 5, 7, .92) 100%);
}

.hero-ai { position: absolute; left: 50%; top: 35%; transform: translate(-50%, -50%); z-index: 3; }
.ai-orb {
  width: min(46vh, 42vw, 440px); height: min(46vh, 42vw, 440px);
  width: min(46svh, 42vw, 440px); height: min(46svh, 42vw, 440px);
}
/* só o olho é clicável: as ondas que saem dele não abrem a conversa sem querer */
.ai-wave, .ai-orbita { pointer-events: none; }
.ai-orb:focus-visible { outline: none; }
.ai-orb:focus-visible .ai-orbita { border-color: rgba(96, 165, 250, .9); }

/* a foto do olho aparece na hora; quando o olho 3D fica pronto, ela some
   por baixo dele (e fica no lugar se o aparelho não tiver 3D) */
.hero .ai-core {
  inset: 7%;
  background: url(../img/olho-kori.webp) center / 100% 100% no-repeat;
  box-shadow: 0 0 46px 6px rgba(37, 99, 235, .42), 0 0 140px 30px rgba(30, 64, 175, .28);
  transition: opacity .7s var(--ease), transform .4s var(--ease);
}
.eye-on .ai-core { opacity: 0; }
/* o anel vira mira de painel; as ondas só aparecem enquanto ela fala */
.hero .ai-orbita { inset: 1%; border-color: rgba(96, 165, 250, .12); border-top-color: rgba(96, 165, 250, .55); animation-duration: 14s; }
.hero-ai .ai-wave { border-width: 1px; }
.hero-ai:not(.speaking) .ai-wave { animation: none; opacity: 0; }

/* etiqueta presa ao olho, com fio de painel */
.eye-tag {
  position: absolute; left: 95%; top: 24%;
  padding-left: 78px; white-space: nowrap; pointer-events: none;
  font: 400 .66rem/1.7 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--label);
  animation: irisIn .8s var(--ease) both .6s;
}
.eye-tag::before {
  content: ""; position: absolute; left: 0; top: .85em; width: 66px; height: 1px;
  background: linear-gradient(90deg, rgba(96, 165, 250, 0), rgba(96, 165, 250, .7));
}
.eye-tag::after {
  content: ""; position: absolute; left: 66px; top: calc(.85em - 2px); width: 5px; height: 5px;
  background: var(--blue-soft);
}
.eye-tag b { display: flex; align-items: center; gap: 9px; font-weight: 500; color: #E2E8F0; }
.eye-tag b i { width: 6px; height: 6px; border-radius: 50%; background: #34D399; }
.eye-tag > span { display: block; }
/* enquanto ela fala, a etiqueta vira legenda (uma frase por vez) */
.eye-tag.pronto { animation: none; }
.eye-tag.falando { white-space: normal; }
.eye-tag.falando b { white-space: nowrap; }
.eye-tag.falando b i { background: var(--blue-soft); }
.eye-tag.falando b em { font-style: normal; font-weight: 400; color: var(--label); }
.eye-tag .legenda {
  display: block; margin-top: 8px; max-width: 30ch;
  font: 400 1.05rem/1.45 var(--f-body); letter-spacing: 0; text-transform: none; color: #F1F5F9;
}
.legenda.troca { animation: legIn .5s var(--ease) both; }
@keyframes legIn { from { opacity: 0; filter: blur(6px); transform: translateY(5px); } to { opacity: 1; filter: none; transform: none; } }
.so-toque { display: none; }
@media (pointer: coarse) { .so-mouse { display: none; } .so-toque { display: inline; } }

.hero-copy {
  position: absolute; left: 50%; transform: translateX(-50%); z-index: 4;
  bottom: clamp(126px, 17svh, 168px); width: min(780px, calc(100% - 48px));
  text-align: center;
}
.hero-h1 {
  font-size: clamp(1.75rem, 3.3vw, 3rem); font-weight: 700; line-height: 1.1;
  letter-spacing: -.025em; color: #F1F5F9;
}
.hero-h1 span { display: block; animation: irisIn .8s var(--ease) both .1s; }
.hero-h1 .hero-h1-azul { color: var(--blue-text); animation-delay: .18s; }
.hero-lead {
  margin: 20px auto 0; max-width: 56ch;
  font-size: .98rem; line-height: 1.65; color: #94A3B8;
  animation: irisIn .8s var(--ease) both .28s;
}

/* a "linha de comando" que leva ao diagnóstico */
.hero-term {
  display: flex; align-items: center; gap: 12px;
  width: min(500px, 100%); margin: 30px auto 0; padding: 7px 7px 7px 18px;
  border: 1px solid var(--line-2); background: rgba(8, 10, 16, .78);
  font: 400 .76rem/1 var(--f-mono); color: #CBD5E1; text-align: left;
  transition: border-color .3s, box-shadow .3s;
  animation: irisIn .8s var(--ease) both .36s;
}
.hero-term:hover { border-color: rgba(96, 165, 250, .65); box-shadow: 0 22px 50px -26px rgba(37, 99, 235, .95); }
.term-prompt { color: var(--blue-soft); }
.term-txt { flex: 1; min-width: 0; display: flex; align-items: center; overflow: hidden; white-space: nowrap; }
.term-cursor { flex-shrink: 0; width: 7px; height: 1.15em; margin-left: 2px; background: var(--blue-soft); animation: termBlink 1.05s steps(1) infinite; }
@keyframes termBlink { 50% { opacity: 0; } }
.term-btn {
  flex-shrink: 0; padding: 12px 16px; background: #F8FAFC; color: #05070D;
  font-size: .66rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase;
  transition: background .25s, color .25s;
}
.hero-term:hover .term-btn { background: var(--blue); color: #fff; }
.hero-term:active .term-btn { transform: translateY(1px); }

/* leitura de painel no pé do hero */
.hero-stats {
  position: absolute; left: 50px; right: 50px; bottom: 50px; z-index: 4; margin: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); align-items: end;
  animation: irisIn .8s var(--ease) both .44s;
}
.hero-stats div:nth-child(2) { text-align: right; }
.hero-stats dt { font: 400 .64rem/1.3 var(--f-mono); letter-spacing: .26em; text-transform: uppercase; color: var(--label); margin-bottom: 9px; }
.hero-stats dd { margin: 0; font: 600 clamp(1.15rem, 1.9vw, 1.6rem)/1 var(--f-mono); color: #F1F5F9; letter-spacing: -.01em; font-variant-numeric: tabular-nums; text-transform: uppercase; }

@keyframes irisIn {
  from { opacity: 0; transform: translateY(14px); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: none; }
}
.hero-copy .hero-h1 span, .hero-lead, .hero-term { will-change: auto; }

/* notebook baixo (768px de altura) */
@media (max-height: 820px) and (min-width: 701px) {
  .hero-ai { top: 33%; }
  .ai-orb { width: min(42svh, 40vw, 400px); height: min(42svh, 40vw, 400px); }
  .hero-copy { bottom: 112px; }
  .hero-h1 { font-size: clamp(1.5rem, 2.9vw, 2.5rem); }
  .hero-lead { margin-top: 14px; font-size: .9rem; }
  .hero-term { margin-top: 22px; }
  .hero-stats { bottom: 40px; }
}
@media (max-height: 700px) and (min-width: 701px) {
  .hero-lead { display: none; }
}
/* tela estreita: a etiqueta desce para baixo do olho */
@media (max-width: 1100px) {
  .eye-tag {
    left: 50%; top: calc(100% + 6px); transform: translateX(-50%);
    padding-left: 0; text-align: center; animation-name: irisInX;
    display: flex; gap: 12px; align-items: center; font-size: .6rem; letter-spacing: .16em;
  }
  .eye-tag::before, .eye-tag::after { content: none; }
  .eye-tag > span::before { content: "· "; }
  .eye-tag.falando { flex-direction: column; gap: 2px; width: min(88vw, 460px); }
  .eye-tag.falando .legenda { max-width: none; margin-top: 4px; font-size: .95rem; text-align: center; }
  .eye-tag.falando .legenda::before { content: none; }
}
@keyframes irisInX {
  from { opacity: 0; filter: blur(8px); }
  to   { opacity: 1; filter: none; }
}

/* ==========================================================================
   MÉTODO K·O·R·I · letras gigantes de painel
   ========================================================================== */
.metodo-pin { background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(30, 64, 175, .1), transparent 70%); }
/* a fita do filme encurtou: o K já chega aceso e o I sai junto com a dobra */
.metodo { height: 420vh; height: 420svh; }
@media (max-width: 960px) { .metodo { height: 270svh; } }
@media (max-width: 620px) { .metodo { height: 245svh; } }


/* ==========================================================================
   DOBRAS · cabeçalho alinhado à esquerda sobre uma régua de painel
   ========================================================================== */
.sec { padding: 112px 0; }
.sec-head {
  text-align: left; max-width: none; margin: 0 0 56px;
  position: relative; padding-top: 30px; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px 48px; align-items: end;
}
.sec-head::before, .sec-head::after {
  content: ""; position: absolute; top: -1px; width: 1px; height: 11px; background: var(--tick);
}
.sec-head::before { left: 0; }
.sec-head::after { right: 0; }
.sec-head h2 { margin: 0; }
.sec-sub { margin: 0; max-width: 46ch; font-size: 1rem; }

/* A MARCA */
.marca-frase { max-width: 34ch; margin-inline: auto; }

/* FAIXA · o que a gente resolve */
.clientes { background: transparent; border-block-color: var(--line); }
.clientes-title { font-family: var(--f-mono); font-weight: 400; font-size: .66rem; letter-spacing: .3em; color: var(--label); }
.mq-track { gap: 56px; }
.cl, .cl-1, .cl-2, .cl-3, .cl-4, .cl-5, .cl-6, .cl-7, .cl-8 {
  font-family: var(--f-mono); font-size: 1rem; font-weight: 400; font-style: normal;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(226, 232, 240, .6);
  display: inline-flex; align-items: center; gap: 0;
}
.cl i, .cl b { font-style: normal; font-weight: inherit; color: inherit; margin-left: .6em; }
.cl::before { content: ""; width: 7px; height: 7px; margin-right: 22px; background: var(--blue); }
.clientes-cta { font-size: 1rem; }

/* ---------- cantoneiras de painel nos blocos ---------- */
.dor, .cform {
  --tk: var(--tick); --tl: 12px;
  border-radius: 0; border: 1px solid rgba(148, 163, 184, .09);
  background:
    linear-gradient(var(--tk), var(--tk)) left top / var(--tl) 1px no-repeat,
    linear-gradient(var(--tk), var(--tk)) left top / 1px var(--tl) no-repeat,
    linear-gradient(var(--tk), var(--tk)) right top / var(--tl) 1px no-repeat,
    linear-gradient(var(--tk), var(--tk)) right top / 1px var(--tl) no-repeat,
    linear-gradient(var(--tk), var(--tk)) left bottom / var(--tl) 1px no-repeat,
    linear-gradient(var(--tk), var(--tk)) left bottom / 1px var(--tl) no-repeat,
    linear-gradient(var(--tk), var(--tk)) right bottom / var(--tl) 1px no-repeat,
    linear-gradient(var(--tk), var(--tk)) right bottom / 1px var(--tl) no-repeat,
    rgba(10, 13, 20, .7);
  background-origin: border-box;
  transition: border-color .3s, transform .4s var(--ease);
}
.dor:hover { --tk: var(--blue-soft); border-color: rgba(96, 165, 250, .22); transform: translateY(-4px); }

/* SERVIÇOS · de 5 cartões iguais para uma ficha técnica em linhas */
.serv-grid { grid-template-columns: 1fr; gap: 0; border-bottom: 1px solid var(--line); }
.serv {
  display: grid; grid-template-columns: 44px minmax(200px, 1fr) minmax(0, 1.5fr); gap: 0 28px; align-items: center;
  padding: 26px 8px; text-align: left; border: 0; border-top: 1px solid var(--line);
  border-radius: 0; background: transparent; position: relative; overflow: hidden;
  transition: background .35s var(--ease);
}
.serv::after {
  content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%;
  background: var(--blue-soft); transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--ease);
}
.serv:hover { transform: none; background: linear-gradient(90deg, rgba(37, 99, 235, .1), transparent 70%); }
.serv:hover::after { transform: scaleX(1); }
.serv svg { width: 30px; height: 30px; margin: 0; }
.serv h3 { font-size: 1.02rem; margin: 0; color: #F1F5F9; }
.serv p { font-size: .95rem; margin: 0; max-width: 52ch; }

/* PROCESSO · 4 etapas viram uma linha do tempo */
.stats-grid.etapas { gap: 0 28px; position: relative; }
.stats-grid.etapas .stat {
  background: transparent; border: 0; border-top: 1px solid var(--line-2); border-radius: 0;
  padding: 28px 4px 0; position: relative;
}
.stats-grid.etapas .stat::before {
  content: ""; position: absolute; left: 0; top: -4px; width: 7px; height: 7px; background: var(--blue);
  box-shadow: 0 0 0 4px var(--bg);
}
.stats-grid.etapas .stat:hover { transform: none; }
.stats-grid.etapas .stat:hover::before { background: var(--blue-soft); }
.stats-grid.etapas .stat strong { font-family: var(--f-mono); font-weight: 500; font-size: .74rem; letter-spacing: .24em; margin: 0 0 14px; }
.stats-grid.etapas .stat svg { width: 28px; height: 28px; margin-bottom: 18px; }


/* POR QUÊ */
.porque { background: linear-gradient(180deg, transparent, rgba(30, 64, 175, .08) 50%, transparent); }
.dor { padding: 32px 28px; }
.dor-p { font-family: var(--f-body); font-size: 1.08rem; line-height: 1.5; }
.dor-p::before { content: none; }


/* lista de conferência: marcador desenhado, não caractere */
.check-list li::before {
  content: ""; width: 18px; height: 18px; top: 3px; border-radius: 2px;
  border: 1px solid rgba(96, 165, 250, .55);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.4l2.7 2.7 6-6.3' fill='none' stroke='%2360A5FA' stroke-width='1.7' stroke-linecap='square'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* CARROSSEL · painel escuro com cantoneiras, sem vidro */
.car3d-card {
  --tk: rgba(147, 197, 253, .75); --tl: 14px;
  border-radius: 2px; border: 1px solid rgba(96, 165, 250, .2);
  background:
    linear-gradient(var(--tk), var(--tk)) left top / var(--tl) 1px no-repeat,
    linear-gradient(var(--tk), var(--tk)) left top / 1px var(--tl) no-repeat,
    linear-gradient(var(--tk), var(--tk)) right top / var(--tl) 1px no-repeat,
    linear-gradient(var(--tk), var(--tk)) right top / 1px var(--tl) no-repeat,
    linear-gradient(var(--tk), var(--tk)) left bottom / var(--tl) 1px no-repeat,
    linear-gradient(var(--tk), var(--tk)) left bottom / 1px var(--tl) no-repeat,
    linear-gradient(var(--tk), var(--tk)) right bottom / var(--tl) 1px no-repeat,
    linear-gradient(var(--tk), var(--tk)) right bottom / 1px var(--tl) no-repeat,
    radial-gradient(110% 80% at 50% 0%, rgba(37, 99, 235, .2), transparent 60%),
    #070A11;
  background-origin: border-box;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 34px 70px -34px rgba(37, 99, 235, .55);
}
.car3d-card::after { opacity: .25; }
.car3d-card.atual::after { opacity: .6; }
.car3d-num { font-family: var(--f-mono); font-weight: 500; font-size: .74rem; letter-spacing: .26em; }
.car3d-seta { border-radius: 2px; background: rgba(8, 10, 16, .9); }
.car3d-dots { gap: 4px; }
.car3d-dots button { position: relative; width: 30px; height: 18px; border-radius: 0; background: none; }
.car3d-dots button::before {
  content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px;
  background: rgba(148, 163, 184, .4); transform: scaleX(.45); transform-origin: left;
  transition: transform .35s var(--ease), background .35s;
}
.car3d-dots button:hover::before { background: var(--blue-soft); }
.car3d-dots button.on { transform: none; box-shadow: none; background: none; }
.car3d-dots button.on::before { transform: none; background: var(--blue); }
.car3d-progress { font-family: var(--f-mono); font-size: .7rem; }

/* FAIXA CTA */
.ctaband { border-block: 1px solid var(--line); background: linear-gradient(180deg, transparent, rgba(30, 64, 175, .1) 50%, transparent); }
.ctaband-btns .btn { padding-block: 18px; }

/* CONTATO */
.contato-links .btn-line { text-transform: none; letter-spacing: .03em; font-size: .78rem; }
.contato h2 { margin-bottom: 20px; }
.cform { padding: 34px; }
.cform label { font-family: var(--f-mono); font-size: .7rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--label); }
.cform input, .cform textarea {
  font-family: var(--f-body); font-size: .98rem; letter-spacing: 0; text-transform: none;
  border-radius: 2px; border-width: 1px; background: rgba(4, 5, 7, .8);
}
.cform ::placeholder { color: #717D90; }
.cform input:focus, .cform textarea:focus { border-color: var(--blue-soft); box-shadow: 0 0 0 3px rgba(37, 99, 235, .18); }

/* RODAPÉ */
.foot { padding-bottom: 46px; }
.foot-kori-titulo, .foot-kori-lista span { font-family: var(--f-mono); font-weight: 400; color: var(--label); }
.foot-copy { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .12em; color: var(--label); }
.socials a { border-radius: 2px; }

/* ==========================================================================
   KORI IA · o olho se repete: bolinha flutuante, chat e pop-up
   ========================================================================== */
.dock, .kia-head-orb, .leadpop-orb {
  --px: 0; --py: 0;
  background:
    radial-gradient(circle at calc(41% + var(--px) * 100%) calc(37% + var(--py) * 100%), rgba(255, 255, 255, .9) 0 4%, transparent 7%),
    radial-gradient(circle at calc(50% + var(--px) * 100%) calc(50% + var(--py) * 100%),
      #02040a 0 15%, #1d4ed8 17%, #3b82f6 27%, #2563EB 36%, #0b1a45 44%, transparent 46%),
    radial-gradient(circle at 40% 34%, #39404d, #161a22 62%, #090b10 100%);
}
.dock { width: 44px; height: 44px; right: 30px; bottom: 34px; border: 1px solid rgba(96, 165, 250, .45); animation: none; box-shadow: 0 12px 26px -10px rgba(37, 99, 235, .85); }
.kia-head-orb { box-shadow: 0 4px 10px -3px rgba(37, 99, 235, .7); }
.leadpop-orb { width: 72px; height: 72px; }

.kia-panel { border-radius: 6px; border-color: var(--line-2); }
.kia-head strong { font-family: var(--f-mono); font-weight: 500; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; }
.kia-head small { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .12em; }
.msg { border-radius: 4px; }
.msg-bot { border-bottom-left-radius: 1px; }
.msg-user { background: var(--blue); border-bottom-right-radius: 1px; }
.kia-chips button {
  border-radius: 2px; font: 400 .7rem/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase;
  padding: 8px 11px;
}
.kia-form input { border-radius: 2px; border-width: 1px; }
.kia-form button { border-radius: 2px; background: var(--blue); }
#kiaMic.listening { background: var(--blue); }
.leadpop-card { border-radius: 6px; }
.leadpop-card h3 em { color: var(--blue-soft); }

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width: 960px) {
  .sec-head { grid-template-columns: 1fr; }
  .menu { gap: 20px; }
  .menu a { letter-spacing: .14em; }
  .serv { grid-template-columns: 34px 1fr; gap: 8px 18px; }
  .serv p { grid-column: 2; }
  .stats-grid.etapas { gap: 34px 28px; }
}
@media (max-width: 700px) {
  .hud { inset: 8px; border-color: transparent; }
  .hud-c { width: 18px; height: 18px; }
  .hud-sec, .hud-clock { display: none; }

  .hero { min-height: 600px; }
  .hero-ai { top: 31%; }
  .ai-orb { width: min(80vw, 40vh, 330px); height: min(80vw, 40vh, 330px); width: min(80vw, 40svh, 330px); height: min(80vw, 40svh, 330px); }
  .hero-ai { top: 33%; }
  .eye-tag { font-size: .66rem; letter-spacing: .12em; gap: 8px; top: calc(100% + 2px); }
  .tag-fim { display: none; }
  .hero-copy { bottom: 40px; width: calc(100% - 36px); }
  .hero-h1 { font-size: clamp(1.5rem, 7vw, 1.85rem); }
  .hero-lead { font-size: .86rem; line-height: 1.55; margin-top: 12px; }
  .hero-term { margin-top: 18px; padding-left: 12px; gap: 8px; font-size: .7rem; }
  .term-btn { padding: 11px 10px; font-size: .69rem; letter-spacing: .06em; }
  .hero-stats { display: none; }

  .sec-head { margin-bottom: 36px; padding-top: 22px; }
  .serv { padding: 20px 2px; }
  .serv h3 { font-size: .95rem; }
  .serv p { font-size: .9rem; }
  .cl, .cl-1, .cl-2, .cl-3, .cl-4, .cl-5, .cl-6, .cl-7, .cl-8 { font-size: .78rem; }
  .cl::before { margin-right: 14px; width: 5px; height: 5px; }
  .mq-track { gap: 30px; }
  /* no celular os cards ficam empilhados: o brilho e o halo precisam
     ficar presos a cada card, senão cobrem a lista inteira */
  .car3d-card { border-radius: 2px; position: relative; }
  .car3d-card::before { content: none; }
  .dock { right: 20px; bottom: 22px; }
}
/* CELULAR · "Tudo o que a Kori faz": cards de arrastar para o lado
   (rolagem nativa com encaixe), conteúdo inteiro, vizinho aparecendo na beirada */
@media (max-width: 620px) {
  .car3d.car-swipe .car3d-palco {
    display: flex; gap: 12px; height: auto; margin-inline: -28px; padding: 6px 10vw 10px;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: 10vw;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .car3d.car-swipe .car3d-palco::-webkit-scrollbar { display: none; }
  .car3d.car-swipe .car3d-card {
    flex: 0 0 80vw; max-width: 380px; margin: 0; height: auto;
    scroll-snap-align: center; scroll-snap-stop: always;
    box-shadow: 0 24px 40px -30px rgba(37, 99, 235, .6);
  }
  .car3d.car-swipe .car3d-card::after { content: none; }
  .car3d.car-swipe .car3d-dots { display: flex; margin-top: 18px; }
  .car3d.car-swipe .car3d-progress { display: block; margin-top: 8px; }
}
@media (max-width: 700px) and (max-height: 700px) {
  .hero-lead { display: none; }
}
@media (max-width: 620px) {
  .foot-kori-lista span { font-size: .62rem; letter-spacing: .04em; }
}
@media (max-width: 640px) {
  .sec { padding: 62px 0; }                 /* mantém o respiro curto do celular */
  .menu { background: rgba(4, 5, 7, .97); gap: 0; }
  .menu a { padding: 16px 28px; font-size: .72rem; }
  .menu-cta { margin: 12px 28px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-h1 span, .hero-lead, .hero-term, .hero-stats, .eye-tag { animation: none; }
  /* 07/10/2026 (pedido do John): com "remover animações" ligado, as entradas
     continuam desligadas, mas o que é "vida" do site continua andando:
     a faixa do que a gente resolve, o anel do olho, as ondas da fala,
     os pontinhos do logo e o cursor da barra de diagnóstico. */
  .mq-track { animation-name: mq !important; animation-duration: 30s !important; animation-iteration-count: infinite !important; }
  .hero .ai-orbita { animation-duration: 14s !important; animation-iteration-count: infinite !important; }
  .hero-ai.speaking .ai-wave { animation-duration: 1.6s !important; animation-iteration-count: infinite !important; }
  #heroArc circle { animation-duration: 2.8s !important; animation-iteration-count: infinite !important; }
  .term-cursor { animation-duration: 1.05s !important; animation-iteration-count: infinite !important; }
}