/* ═══════════════════════════════════════════════════════════════
   KINERO — landing institucional · direção "Aurora clara" (v2)
   Theme-aware como o login. Cabeçalho = assinatura A horizontal com
   descritor (como o manual). Paleta quente magenta/rosa — sem violeta.
   Movimento com disciplina: aurora + ticker da voz do produto + revelação.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bg:        #F3F1F7;
  --bg-grad:   linear-gradient(168deg,#FBFAFD 0%,#F3F1F7 52%,#F1EAF0 100%);
  --ink:       #1A1622;
  --ink-2:     #4A4556;
  --muted:     #6E6979;
  --surface:   rgba(255,255,255,0.68);
  --surface-2: rgba(255,255,255,0.9);
  --hairline:  rgba(26,22,34,0.10);
  --shadow:    0 18px 50px -24px rgba(120,20,70,0.28);
  --magenta:   #D9146E;
  --magenta-2: #FF3D9A;
  --rose:      #FF7AA8;
  --blob-blend:  multiply;
  --blob-opacity: 0.15;
  --radius:    16px;
  --radius-lg: 24px;
  --maxw:      1080px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#08070D; --bg-grad:linear-gradient(168deg,#0B0912 0%,#08070D 46%,#0C0710 100%);
    --ink:#F4F1FB; --ink-2:rgba(244,241,251,0.74); --muted:rgba(244,241,251,0.52);
    --surface:rgba(255,255,255,0.05); --surface-2:rgba(255,255,255,0.08);
    --hairline:rgba(255,255,255,0.10); --shadow:0 22px 60px -28px rgba(0,0,0,0.65);
    --blob-blend:screen; --blob-opacity:0.24;
  }
}
:root[data-theme="dark"] {
  --bg:#08070D; --bg-grad:linear-gradient(168deg,#0B0912 0%,#08070D 46%,#0C0710 100%);
  --ink:#F4F1FB; --ink-2:rgba(244,241,251,0.74); --muted:rgba(244,241,251,0.52);
  --surface:rgba(255,255,255,0.05); --surface-2:rgba(255,255,255,0.08);
  --hairline:rgba(255,255,255,0.10); --shadow:0 22px 60px -28px rgba(0,0,0,0.65);
  --blob-blend:screen; --blob-opacity:0.24;
}

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg); background-image:var(--bg-grad); background-attachment:fixed;
  color:var(--ink);
  font-family:"DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img, svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
.container { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px; }
.container--narrow { max-width:680px; }
.center { text-align:center; }

/* Troca de logo por tema */
.on-dark { display:none; } .on-light { display:block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .on-dark { display:block; }
  :root:not([data-theme="light"]) .on-light { display:none; }
}
:root[data-theme="dark"]  .on-dark { display:block; } :root[data-theme="dark"]  .on-light { display:none; }
:root[data-theme="light"] .on-dark { display:none; }  :root[data-theme="light"] .on-light { display:block; }

/* ── Botões ── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size:15px; font-weight:500; padding:11px 20px; border-radius:11px;
  border:1px solid transparent; cursor:pointer;
  transition:transform .14s ease, box-shadow .2s ease, border-color .2s ease; white-space:nowrap; }
.btn:hover { transform:translateY(-1px); }
.btn--solid { color:#fff; background:linear-gradient(100deg, var(--magenta), var(--magenta-2));
  box-shadow:0 10px 26px -12px color-mix(in srgb, var(--magenta) 70%, transparent); }
.btn--solid:hover { box-shadow:0 14px 32px -12px color-mix(in srgb, var(--magenta) 80%, transparent); }
.btn--ghost { background:var(--surface); color:var(--ink); border-color:var(--hairline); backdrop-filter:blur(8px); }
.btn--ghost:hover { border-color:color-mix(in srgb, var(--ink) 22%, transparent); }
.btn--lg { font-size:16px; padding:15px 28px; border-radius:13px; }

/* ── Nav com assinatura A horizontal + descritor (como o manual) ── */
.nav { position:sticky; top:0; z-index:50; backdrop-filter:blur(18px) saturate(140%);
  background:color-mix(in srgb, var(--bg) 74%, transparent); border-bottom:1px solid var(--hairline); }
.nav__inner { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:68px; }
/* Proporções EXATAS da assinatura A do manual (06-manual, símbolo 72px:
   gap 18, nome 208,5×37,3, dgap 8, descritor 7,5px, tracking 0,22em). Ou seja,
   por lado do símbolo S: gap 0,25·S · nome 0,518·S · dgap 0,111·S · descritor
   0,104·S. Aqui S=40 → nome 21px e descritor ~4,2px (bem menor que o nome). */
.brandlock { display:inline-flex; align-items:center; gap:10px; }
.brandlock__sym { width:40px; height:40px; }
.brandlock__text { display:flex; flex-direction:column; align-items:flex-start; gap:4px; line-height:1; }
.brandlock__name { height:21px; width:auto; }
.brandlock__desc { font-size:4.2px; letter-spacing:0.22em; text-transform:uppercase; color:var(--muted); font-weight:500; }
.nav__actions { display:flex; align-items:center; gap:8px; }
.nav__link { display:none; color:var(--ink-2); font-size:14.5px; font-weight:500; padding:8px 12px; border-radius:9px; }
.nav__link:hover { color:var(--ink); background:var(--surface); }

/* ── Aurora (quente: magenta / rosa / coral — sem violeta) ── */
.aurora { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.blob { position:absolute; border-radius:50%; filter:blur(120px); mix-blend-mode:var(--blob-blend); opacity:var(--blob-opacity); }
.blob-1 { width:480px; height:480px; top:-16%; left:-10%; animation:blob1 24s ease-in-out infinite; }
.blob-2 { width:420px; height:420px; top:-8%; right:-8%; animation:blob2 29s ease-in-out infinite -8s; }
.blob-3 { width:360px; height:360px; bottom:-22%; left:32%; animation:blob3 33s ease-in-out infinite -16s; }
@keyframes blob1 {
  0%{background:#D9146E;transform:translate(-8%,-8%) scale(1)}
  33%{background:#FF7AA8;transform:translate(12%,6%) scale(1.16)}
  66%{background:#FFB08A;transform:translate(-6%,10%) scale(.92)}
  100%{background:#D9146E;transform:translate(-8%,-8%) scale(1)}
}
@keyframes blob2 {
  0%{background:#FF3D9A;transform:translate(10%,8%) scale(1)}
  33%{background:#FF9EC4;transform:translate(-12%,-6%) scale(1.12)}
  66%{background:#F5A97B;transform:translate(6%,-12%) scale(.9)}
  100%{background:#FF3D9A;transform:translate(10%,8%) scale(1)}
}
@keyframes blob3 {
  0%{background:#E85A95;transform:translate(-10%,10%) scale(1)}
  33%{background:#FFC2D6;transform:translate(10%,-8%) scale(1.1)}
  66%{background:#FF8FA3;transform:translate(-4%,-6%) scale(1.2)}
  100%{background:#E85A95;transform:translate(-10%,10%) scale(1)}
}

/* ── Hero (limpo, só a manchete — como o manual) ── */
.hero { position:relative; overflow:hidden; padding:112px 0 84px; }
.hero__inner { position:relative; z-index:2; max-width:760px; margin-inline:auto; text-align:center; }
.hero__title { font-size:clamp(38px,6.4vw,64px); line-height:1.05; font-weight:600; letter-spacing:-0.025em; text-wrap:balance; }
.hero__title .accent { background:linear-gradient(100deg, var(--magenta), var(--magenta-2));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero__sub { margin:24px auto 0; max-width:560px; font-size:clamp(17px,2.3vw,20px); color:var(--ink-2); }
.hero__cta { margin-top:36px; display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

/* ── Ticker: a voz do produto passando ── */
.ticker { position:relative; z-index:2; overflow:hidden; border-block:1px solid var(--hairline);
  background:var(--surface); backdrop-filter:blur(8px); padding:13px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.ticker__track { display:inline-flex; gap:30px; white-space:nowrap; width:max-content; animation:tickerScroll 34s linear infinite; }
.ticker__item { display:inline-flex; align-items:center; gap:30px; color:var(--ink-2); font-size:14.5px; font-weight:500; font-variant-numeric:tabular-nums; }
.ticker__item::after { content:"·"; color:var(--magenta); }
@keyframes tickerScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.ticker:hover .ticker__track { animation-play-state:paused; }

/* ── Seções ── */
.section { position:relative; z-index:1; padding:92px 0; }
.section__head { max-width:620px; margin:0 auto 44px; text-align:center; }
.section__title { font-size:clamp(26px,3.6vw,36px); font-weight:600; letter-spacing:-0.02em; text-wrap:balance; }
.section__lead { margin-top:14px; color:var(--ink-2); font-size:18px; }

/* ── Cards ── */
.grid { display:grid; gap:18px; }
.grid--4, .grid--3 { grid-template-columns:1fr; }
.card { background:var(--surface); border:1px solid var(--hairline); border-radius:var(--radius);
  padding:26px; backdrop-filter:blur(10px); transition:transform .18s ease, box-shadow .2s ease, border-color .2s ease; }
.card:hover { transform:translateY(-3px); box-shadow:var(--shadow); border-color:color-mix(in srgb, var(--magenta) 30%, var(--hairline)); }
.card__title { font-size:18px; font-weight:600; margin-bottom:8px; }
.card__text { color:var(--muted); font-size:15.5px; }

/* ── Demonstração ── */
.demo { display:grid; gap:30px; align-items:center; text-align:center; }
.demo__shot { border:1px solid var(--hairline); border-radius:var(--radius-lg); background:var(--surface-2);
  aspect-ratio:16/10; display:grid; place-items:center; box-shadow:var(--shadow); }
.demo__shot-inner { color:var(--muted); font-size:15px; }
.demo__shot-inner small { opacity:.6; }

/* ── Faixa CTA ── */
.cta { position:relative; overflow:hidden; padding:104px 0; text-align:center; }
.cta__title { font-size:clamp(28px,4.4vw,42px); font-weight:600; letter-spacing:-0.02em; text-wrap:balance; }

/* ── Rodapé ── */
.footer { border-top:1px solid var(--hairline); padding:32px 0; }
.footer__inner { display:flex; flex-direction:column; gap:14px; align-items:center; text-align:center; }
.footer__copy { color:var(--muted); font-size:14px; }
.footer__links a { color:var(--ink-2); font-size:14px; }
.footer__links a:hover { color:var(--ink); }

/* ── Revelação ao rolar (só quando o JS liga; sem JS, tudo visível) ── */
.reveal-on .reveal { opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.reveal-on .reveal.is-visible { opacity:1; transform:none; }

/* ═══════════ Responsivo ═══════════ */
@media (min-width:700px) {
  .nav__link { display:inline-flex; }
  .grid--3 { grid-template-columns:repeat(3,1fr); }
  .grid--4 { grid-template-columns:repeat(2,1fr); }
  .demo { grid-template-columns:1.05fr 1fr; text-align:left; }
  .footer__inner { flex-direction:row; justify-content:space-between; text-align:left; }
}
@media (min-width:1000px) { .grid--4 { grid-template-columns:repeat(4,1fr); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .btn:hover, .card:hover { transform:none; }
  .blob { animation:none !important; }
  .ticker__track { animation:none !important; }
  .reveal-on .reveal { opacity:1 !important; transform:none !important; transition:none; }
}