/* TRIPI/MEDIA — Design System. Fonte única: design_system_tripi.html (<style>). Não editar aqui; regenerar a partir do HTML. */
@import url("https://use.typekit.net/woo5xvc.css");

/* ============================================================
   TRIPI/MEDIA DESIGN SYSTEM — CAMADA DE COR (fonte única de verdade)
   Neutros frios (matiz 270) + rampa bordô (matiz OKLCH 16)
   ============================================================ */
:root{
  /* Neutros — quase-pretos frios */
  --bg-void:        #06070A;
  --bg-base:        #0E0F13;
  --bg-surface:     #191B20;
  --bg-elevated:    #25272D;
  --line:           #30333A;
  --line-strong:    #43464F;
  --text-muted:     #82848C;
  --text-soft:      #B4B6BB;
  --text:           #F2F3F6;
  /* Bordô — rampa de acento */
  --bordo-950: #1F060A;
  --bordo-900: #3A0A14;
  --bordo-850: #54111E;
  --bordo-800: #701929;
  --bordo-700: #8E1F33;
  --bordo-600: #AD2B40;
  --bordo-500: #CA394C;
  --bordo-400: #E34D5B;
  --bordo-300: #F66B71;
  /* Foco */
  --focus-ring: #A7E0FF;
  /* Semânticas — erro é âmbar-laranja, nunca vermelho */
  --info:    #22B5E1;
  --success: #4EC983;
  --warning: #F0B135;
  --danger:  #F3813F;
  --info-surface:    #00344A;  --info-border:    #005D7E;
  --success-surface: #00381C;  --success-border: #006436;
  --warning-surface: #412800;  --warning-border: #724900;
  --danger-surface:  #4C1E0D;  --danger-border:  #83391E;
  /* Layout / tipografia / movimento */
  --pad: clamp(20px, 2.25vw, 38px);
  --max: 1720px;
  --font-body: "degular-text", "Degular Text", Arial, sans-serif;
  --font-display: "degular-display", "Degular Display", sans-serif;
  --font-mid: "degular", "Degular", sans-serif;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.2,.8,.2,1);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:auto; }
body{
  margin:0;
  background:var(--bg-void);
  color:var(--text);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.is-loading{ overflow:hidden; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input,textarea,select{ font:inherit; }
button{ cursor:pointer; }
::selection{ background:rgba(202,57,76,.35); color:#F2F3F6; }
:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; border-radius:2px; }

/* grão de filme (north-form .noise, sem blend multiply para não afundar o dark) */
.noise{
  position:fixed; inset:0; z-index:999; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* barra de progresso de scroll (north-form) — barra de acento = bordô-500 */
.scroll-progress{
  position:fixed; left:0; top:0; width:100%; height:3px; z-index:1001;
  transform-origin:left; transform:scaleX(0);
  background:linear-gradient(90deg in oklch, #CA394C, #E34D5B);
  box-shadow:0 0 12px rgba(202,57,76,.5);
}

/* ============================================================
   PRELOADER — logo de abertura (north-form, idêntico em comportamento)
   ============================================================ */
.preloader{
  display:none; position:fixed; inset:0; z-index:1000;
  background:var(--bg-void); color:var(--text);
  align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700;
  letter-spacing:-.01em; font-size:clamp(38px,7vw,110px);
}
.preloader .slash{ color:var(--bordo-500); }
.preloader img{ width:clamp(180px,26vw,400px); height:auto; display:block; }
.no-js .preloader{ display:none; }

/* ============================================================
   TIPOGRAFIA — papéis (base north-form)
   ============================================================ */
.display{ font-family:var(--font-display); font-weight:700; letter-spacing:-.01em; line-height:.92; color:var(--text); }
.line-mask{ overflow:hidden; }
.line-mask > span{ display:block; }
.eyebrow{ font-size:11px; text-transform:uppercase; letter-spacing:.16em; font-weight:600; color:var(--text-muted); }
.cross{ width:14px; height:14px; position:relative; display:inline-block; }
.cross:before,.cross:after{ content:""; position:absolute; background:currentColor; left:50%; top:50%; transform:translate(-50%,-50%); }
.cross:before{ width:14px; height:1px; }
.cross:after{ width:1px; height:14px; }
.section-label{
  display:inline-block; font-size:.68rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--bordo-400); margin-bottom:12px;
}
.text-gradient{
  background:linear-gradient(135deg in oklch, #F2F3F6 0%, #E34D5B 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
h1,h2,h3,h4,h5,h6{ margin:0; }
p{ margin:0; color:var(--text-soft); }

.container{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--pad); }
.grid12{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(12px,1.5vw,24px); }

/* ============================================================
   HEADER — idêntico ao north-form (pill flutuante, glass ao rolar)
   ============================================================ */
.site-header{
  position:fixed; z-index:90; top:14px; left:var(--pad); right:var(--pad);
  height:58px; padding:0 18px;
  max-width:calc(var(--max) - var(--pad)*2); margin:auto;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  color:var(--text); font-size:14px; text-transform:uppercase; letter-spacing:.1em;
  border:1px solid rgba(255,255,255,0); border-radius:999px;
  transition:.45s var(--ease-soft);
}
.site-header.is-scrolled{
  background:rgba(14,15,19,.72);
  backdrop-filter:blur(18px) saturate(1.25);
  -webkit-backdrop-filter:blur(18px) saturate(1.25);
  border-color:rgba(255,255,255,.13);
  box-shadow:0 20px 60px rgba(0,0,0,.22);
}
/* logotipo oficial (raw_files/Logos/TRIPI_MEDIA_LOGO_FULL.png) — sempre a versão branca no header */
.logo{ display:inline-flex; align-items:center; justify-self:start; }
.logo img{ height:26px; width:auto; display:block; }
.nav{ display:flex; gap:8px; padding:4px; border:1px solid rgba(255,255,255,.14); border-radius:999px; }
.nav a{ padding:8px 13px; border-radius:999px; transition:.25s; color:var(--text-soft); font-weight:500; }
.nav a:hover{ background:var(--text); color:var(--bg-void); }
.header-cta{
  justify-self:end; border-radius:999px; border:0;
  background:var(--text); color:var(--bg-void);
  padding:11px 15px; font-size:13px; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
  transition:.25s;
}
.header-cta:hover{
  transform:translateY(-2px);
  background:linear-gradient(175deg, #CA394C, #8E1F33);
  background:linear-gradient(175deg in oklch, #CA394C, #8E1F33);
  color:#FFFFFF;
  box-shadow:0 6px 24px -6px rgba(173,43,64,.75);
}

/* ============================================================
   HERO — palco de demonstração
   Atmosfera bordô (Classe A) + orbes/estrelas/órbitas (cadence)
   + conteúdo central (finex) + palavra gigante (north-form)
   ============================================================ */
.hero{
  position:relative; min-height:110svh; overflow:hidden;
  background:var(--bg-void);
  display:flex; flex-direction:column; align-items:center;
}
/* ambiente de fundo / parallax — receita oficial (Classe A) */
.hero-atmo{
  position:absolute; inset:-12% 0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 55% at 18% 108%, rgba(142,31,51,.55) 0%, rgba(58,10,20,.30) 34%, rgba(14,15,19,0) 68%),
    radial-gradient(ellipse 55% 45% at 92% -8%, rgba(58,10,20,.55) 0%, rgba(14,15,19,0) 62%);
  will-change:transform;
}
/* grid de linhas em acento (alpha ≤ .08) com máscara radial */
.hero-gridlines{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(173,43,64,.055) 1px, rgba(0,0,0,0) 1px),
    linear-gradient(90deg, rgba(173,43,64,.055) 1px, rgba(0,0,0,0) 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 45%, #000 30%, rgba(0,0,0,0) 78%);
  mask-image:radial-gradient(ellipse 75% 65% at 50% 45%, #000 30%, rgba(0,0,0,0) 78%);
}
/* orbes ambientes que reagem ao mouse (cadence .hero-orb) */
.hero-orb{
  position:absolute; border-radius:50%; filter:blur(100px);
  pointer-events:none; z-index:1;
  animation:hero-orb-drift 14s ease-in-out infinite alternate;
  will-change:transform;
}
.hero-orb-1{ width:600px; height:600px; top:12%; left:16%;
  background:radial-gradient(circle, rgba(142,31,51,.34), rgba(142,31,51,0) 70%); }
.hero-orb-2{ width:500px; height:500px; bottom:8%; right:12%; animation-delay:-4s; animation-duration:17s;
  background:radial-gradient(circle, rgba(58,10,20,.5), rgba(58,10,20,0) 70%); }
.hero-orb-3{ width:340px; height:340px; top:48%; left:56%; animation-delay:-8s; animation-duration:20s;
  background:radial-gradient(circle, rgba(202,57,76,.14), rgba(202,57,76,0) 70%); }
@keyframes hero-orb-drift{
  0%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(30px,-20px) scale(1.05); }
  66%{ transform:translate(-20px,15px) scale(.97); }
  100%{ transform:translate(15px,-10px) scale(1.02); }
}
/* estrelas cadentes ambientes (cadence .hero-star) */
.hero-stars{ position:absolute; inset:0; pointer-events:none; z-index:1; overflow:hidden; }
.hero-star{
  position:absolute; width:80px; height:1px; opacity:0; transform:rotate(45deg);
  background:linear-gradient(90deg, rgba(202,57,76,0), rgba(202,57,76,.6));
  border-radius:1px; animation:hero-star-shoot linear infinite;
}
@keyframes hero-star-shoot{
  0%{ translate:0 0; opacity:0; } 5%{ opacity:1; } 60%{ opacity:.6; }
  100%{ translate:420px 420px; opacity:0; }
}
.hero-star-1{ top:8%; left:5%; animation-duration:3.5s; width:90px; }
.hero-star-2{ top:20%; right:25%; animation-duration:4.2s; animation-delay:1.2s; width:60px; }
.hero-star-3{ top:45%; left:10%; animation-duration:3.8s; animation-delay:2.8s; width:70px; }
.hero-star-4{ top:5%; left:40%; animation-duration:4.5s; animation-delay:.7s; width:50px; }
.hero-star-5{ top:30%; right:15%; animation-duration:3.2s; animation-delay:2s; width:85px; }
.hero-star-6{ top:60%; left:25%; animation-duration:5s; animation-delay:3.5s; width:55px; }
/* anéis orbitais + pontos (cadence .hero-orbit) */
.hero-orbits{ position:absolute; top:44%; left:50%; transform:translate(-50%,-50%); pointer-events:none; z-index:1; }
.hero-orbit{ position:absolute; border-radius:50%; border:1px solid rgba(202,57,76,.08); top:50%; left:50%; transform:translate(-50%,-50%); }
.hero-orbit-1{ width:420px; height:420px; }
.hero-orbit-2{ width:680px; height:680px; border-style:dashed; border-color:rgba(202,57,76,.05); }
.hero-orbit-3{ width:940px; height:940px; border-color:rgba(202,57,76,.04); }
.hero-orbit-dot{
  position:absolute; width:6px; height:6px; border-radius:50%;
  background:var(--bordo-500); box-shadow:0 0 10px rgba(202,57,76,.6);
  top:-3px; left:50%; transform:translateX(-50%);
}
.hero-orbit-1 .hero-orbit-dot{ animation:orbit-spin-1 12s linear infinite; transform-origin:50% calc(210px + 3px); }
.hero-orbit-2 .hero-orbit-dot{ animation:orbit-spin-2 20s linear infinite; transform-origin:50% calc(340px + 3px); width:4px; height:4px; opacity:.6; }
.hero-orbit-3 .hero-orbit-dot{ animation:orbit-spin-3 30s linear infinite; transform-origin:50% calc(470px + 3px); width:3px; height:3px; opacity:.4; }
@keyframes orbit-spin-1{ to{ transform:translateX(-50%) rotate(360deg); } }
@keyframes orbit-spin-2{ to{ transform:translateX(-50%) rotate(-360deg); } }
@keyframes orbit-spin-3{ to{ transform:translateX(-50%) rotate(360deg); } }
/* iluminação por cursor (spotlight) — receita oficial */
.cursor-spotlight{
  position:fixed; z-index:1; width:640px; height:640px; border-radius:50%;
  pointer-events:none; opacity:0; transition:opacity .5s;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,
    rgba(227,77,91,.16) 0%,
    rgba(173,43,64,.07) 32%,
    rgba(58,10,20,.02) 58%,
    rgba(58,10,20,0) 72%);
  filter:blur(6px);
  will-change:left,top;
}
.hero:hover ~ .cursor-spotlight, .cursor-spotlight.is-on{ opacity:1; }

/* conteúdo central da hero (finex: título, subtítulo, botões) */
.hero-content{
  position:relative; z-index:4; text-align:center;
  padding:calc(20vh) var(--pad) 0; max-width:1080px;
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(202,57,76,.08); border:1px solid rgba(202,57,76,.28);
  border-radius:999px; padding:6px 14px;
  font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--bordo-400); margin-bottom:28px;
  backdrop-filter:blur(10px) saturate(1.25);
}
.hero-eyebrow .tag{
  background:rgba(202,57,76,.16); border-radius:4px; padding:1px 7px;
  font-size:11px; color:var(--bordo-300);
}
.hero-title{
  font-size:clamp(52px,7.4vw,128px);
}
.hero-subtitle{
  font-size:19px; font-weight:400; color:var(--text-soft);
  max-width:600px; margin:28px auto 40px; line-height:1.65;
}
.hero-ctas{ display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; }
/* métricas inline (cadence .hero-metrics) */
.hero-metrics{ display:flex; align-items:center; justify-content:center; gap:32px; margin-top:52px; flex-wrap:wrap; }
.hero-metric{ display:flex; align-items:baseline; gap:8px; }
.hero-metric-val{ font-family:var(--font-mid); font-size:1.35rem; font-weight:600; letter-spacing:-.01em; color:var(--bordo-400); }
.hero-metric-label{ font-size:.78rem; color:var(--text-muted); letter-spacing:.06em; text-transform:uppercase; }
.hero-metric-sep{ width:1px; height:24px; background:linear-gradient(rgba(202,57,76,0), rgba(202,57,76,.3), rgba(202,57,76,0)); }

/* marcadores laterais (north-form .hero-markers) */
.hero-markers{
  position:absolute; bottom:30vh; right:var(--pad); z-index:4;
  display:flex; flex-direction:column; align-items:flex-end; gap:9px;
  font-size:10px; text-transform:uppercase; letter-spacing:.16em; color:var(--text-muted);
}
.hero-markers .cross{ color:var(--bordo-500); }
.hero-topcopy{
  position:absolute; top:19vh; left:var(--pad); max-width:430px; z-index:4;
  padding:18px; border-left:1px solid rgba(202,57,76,.5);
  font-size:15px; line-height:1.5; color:var(--text-soft); text-align:left;
}
.hero-link{
  display:inline-flex; margin-top:18px; padding-bottom:6px;
  border-bottom:1px solid var(--bordo-500); color:var(--bordo-400);
  font-size:13px; text-transform:uppercase; letter-spacing:.12em; transition:.25s;
}
.hero-link:hover{ color:var(--bordo-300); }

/* palavra gigante no rodapé da hero (north-form .hero-word, idêntica) */
.hero-word{
  position:absolute; z-index:3; left:var(--pad); right:var(--pad); bottom:.02em;
  font-size:clamp(76px,15.5vw,290px); letter-spacing:-.02em; white-space:nowrap;
  pointer-events:none;
}
.hero-word:before{
  content:"Design System / 2026"; display:block;
  font:500 10px var(--font-body); letter-spacing:.18em; text-transform:uppercase;
  margin:0 0 18px .7vw; color:var(--text-muted);
}
.hero-word .slash{ color:var(--bordo-500); }

/* dashboard de amostra na hero (finex hero-dashboard-mockup) */
.hero-dash-wrap{
  position:relative; z-index:4; width:100%; max-width:1180px;
  margin:72px auto 0; padding:0 var(--pad) 34vh;
}
.hero-dash{
  display:flex; overflow:hidden; position:relative;
  background:var(--bg-base);
  border:1px solid rgba(255,255,255,.08); border-top-color:rgba(255,255,255,.14);
  border-radius:18px;
  box-shadow:0 40px 120px -30px rgba(31,6,10,.9), 0 0 0 1px rgba(202,57,76,.06);
  color:var(--text-muted); font-size:14px; text-align:left; user-select:none;
  height:520px;
}
.hero-dash aside{
  width:216px; flex-shrink:0; border-right:1px solid var(--line);
  background:var(--bg-base); padding:18px 12px; display:flex; flex-direction:column; gap:2px;
}
.hd-brand{ display:flex; align-items:center; gap:8px; padding:6px 10px 16px; color:var(--text); font-family:var(--font-mid); font-weight:600; letter-spacing:-.01em; }
.hd-brand .mark{
  width:26px; height:26px; border-radius:7px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg, #CA394C, #8E1F33);
  background:linear-gradient(135deg in oklch, #CA394C, #8E1F33);
  box-shadow:0 0 16px rgba(202,57,76,.35);
}
.hd-label{ padding:10px 10px 6px; font-size:10px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); }
.hd-item{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px;
  color:var(--text-muted); transition:.2s; cursor:pointer; border:1px solid rgba(255,255,255,0); font-weight:500;
}
.hd-item svg{ width:15px; height:15px; }
.hd-item:hover{ color:var(--text); background:rgba(255,255,255,.04); }
.hd-item.active{ color:var(--text); background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.07); }
.hd-item.active svg{ color:var(--bordo-400); }
.hero-dash main{ flex:1; display:flex; flex-direction:column; background:var(--bg-void); position:relative; overflow:hidden; }
.hero-dash main:before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 90% 60% at 70% -10%, rgba(58,10,20,.45), rgba(14,15,19,0) 65%);
}
.hd-topbar{
  height:54px; flex-shrink:0; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; padding:0 22px;
  background:rgba(14,15,19,.8); backdrop-filter:blur(12px) saturate(1.25); position:relative; z-index:2;
}
.hd-live{
  display:inline-flex; align-items:center; gap:7px; padding:5px 11px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); border-radius:999px;
  font-size:12px; color:var(--text-soft);
}
.hd-live .dot{ width:7px; height:7px; border-radius:50%; background:var(--success); box-shadow:0 0 8px rgba(78,201,131,.5); animation:pulse-dot 2s ease-in-out infinite; }
.hd-body{ flex:1; padding:20px 22px; display:flex; flex-direction:column; gap:14px; position:relative; z-index:1; overflow:hidden; }
.hd-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.hd-card{
  padding:14px 16px; border-radius:12px; background:var(--bg-surface);
  border:1px solid var(--line); position:relative; overflow:hidden; transition:.3s;
}
.hd-card:hover{ border-color:var(--line-strong); }
.hd-card .k{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); margin-bottom:4px; }
.hd-card .v{ font-family:var(--font-mid); font-weight:600; letter-spacing:-.02em; font-size:24px; color:var(--text); }
.hd-card .d{ display:inline-flex; align-items:center; gap:4px; margin-top:6px; padding:2px 7px; border-radius:5px; font-size:11px; font-weight:600; }
.hd-card .d.up{ background:rgba(78,201,131,.1); color:var(--success); border:1px solid rgba(78,201,131,.25); }
.hd-card .d.flat{ background:rgba(255,255,255,.05); color:var(--text-soft); border:1px solid rgba(255,255,255,.1); }
.hd-chart{
  flex:1; min-height:0; border-radius:14px; background:var(--bg-surface);
  border:1px solid var(--line); padding:16px 20px 12px;
  display:flex; flex-direction:column; position:relative; overflow:hidden;
}
.hd-chart:before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 80% 90% at 50% -20%, rgba(84,17,30,.35), rgba(84,17,30,0) 60%);
}
.hd-chart-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; position:relative; }
.hd-chart-head strong{ color:var(--text); font-weight:600; font-size:15px; }
.hd-bars{ flex:1; display:flex; align-items:flex-end; gap:10px; position:relative; }
.hd-bar{
  flex:1; border-radius:6px 6px 0 0; background:rgba(255,255,255,.06);
  position:relative; transition:.3s; cursor:pointer; min-height:8px;
}
.hd-bar:hover{ background:rgba(255,255,255,.12); }
.hd-bar.hot{
  background:linear-gradient(180deg, #CA394C, #8E1F33);
  background:linear-gradient(180deg in oklch, #CA394C, #8E1F33);
  box-shadow:0 0 24px -6px rgba(173,43,64,.6);
}
.hd-bar .tip{
  position:absolute; top:-30px; left:50%; transform:translateX(-50%);
  background:var(--bg-elevated); border:1px solid var(--line); border-top-color:rgba(255,255,255,.1);
  border-radius:6px; padding:2px 8px; font-size:11px; color:var(--text);
  opacity:0; transition:.2s; pointer-events:none; white-space:nowrap;
}
.hd-bar:hover .tip, .hd-bar.hot .tip{ opacity:1; }
.hd-x{ display:flex; justify-content:space-between; font-size:11px; color:var(--text-muted); padding-top:10px; }

/* ============================================================
   BOTÕES — matriz completa
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:999px; border:0; padding:14px 28px;
  font-size:15px; font-weight:600; letter-spacing:.04em;
  transition:transform .25s var(--ease-soft), filter .25s, box-shadow .25s, background .25s, color .25s, border-color .25s;
  position:relative;
}
.btn svg{ width:15px; height:15px; }
/* Primário — gradiente 500→700, texto branco puro */
.btn-primary{
  color:#FFFFFF;
  background:linear-gradient(175deg, #CA394C, #8E1F33);
  background:linear-gradient(175deg in oklch, #CA394C, #8E1F33);
  box-shadow:
    0 0 0 1px rgba(202,57,76,.55) inset,
    0 1px 0 rgba(255,255,255,.20) inset,
    0 6px 24px -6px rgba(173,43,64,.75);
}
.btn-primary:hover{ filter:brightness(1.10); transform:translateY(-1px);
  box-shadow:0 0 0 1px rgba(202,57,76,.55) inset, 0 1px 0 rgba(255,255,255,.20) inset, 0 10px 30px -6px rgba(173,43,64,.9); }
.btn-primary:active{ filter:brightness(.94); transform:translateY(0);
  box-shadow:0 0 0 1px rgba(202,57,76,.55) inset, 0 1px 0 rgba(255,255,255,.20) inset, 0 4px 14px -6px rgba(173,43,64,.35); }
/* Secundário — neutro com borda bordô em alpha */
.btn-secondary{
  color:var(--bordo-400); background:rgba(255,255,255,.03);
  box-shadow:0 0 0 1px rgba(173,43,64,.35) inset;
}
.btn-secondary:hover{ background:rgba(255,255,255,.07); box-shadow:0 0 0 1px rgba(202,57,76,.55) inset; }
.btn-secondary:active{ background:rgba(202,57,76,.12); }
/* Ghost neutro (cadence .btn-hero-ghost) */
.btn-ghost{
  color:var(--text-soft); background:rgba(255,255,255,0);
  box-shadow:0 0 0 1px rgba(255,255,255,.1) inset; border-radius:12px;
}
.btn-ghost:hover{ color:var(--text); background:rgba(255,255,255,.03); box-shadow:0 0 0 1px var(--line-strong) inset; }
/* Neon outline (finex "Assistir Demo") — vidro + glow bordô */
.btn-neon{
  color:var(--text); background:rgba(6,7,10,.6);
  box-shadow:0 0 0 1px var(--bordo-500) inset, 0 0 20px rgba(202,57,76,.35), inset 0 0 10px rgba(202,57,76,.12);
}
.btn-neon:hover{
  background:rgba(202,57,76,.10); transform:scale(1.02);
  box-shadow:0 0 0 1px var(--bordo-400) inset, 0 0 35px rgba(202,57,76,.5), inset 0 0 20px rgba(202,57,76,.25);
}
.btn-neon svg{ color:var(--bordo-400); }
/* Beam — borda cônica giratória (finex "COMECE GRATIS") */
.btn-beam{ overflow:hidden; color:#FFFFFF; height:54px; padding:0 32px; background:none; }
.btn-beam .beam-ring{ position:absolute; inset:0; z-index:-2; border-radius:999px; overflow:hidden; }
.btn-beam .beam-ring i{
  position:absolute; inset:-100%; display:block;
  background:conic-gradient(from 0deg, rgba(202,57,76,0) 0 300deg, #CA394C 360deg);
  background:conic-gradient(from 0deg in oklch, rgba(202,57,76,0) 0 300deg, #CA394C 360deg);
  animation:beam-spin 3s linear infinite;
}
.btn-beam .beam-ring:after{ content:""; position:absolute; inset:1px; border-radius:999px; background:var(--bg-void); }
.btn-beam .beam-body{
  position:absolute; inset:2px; z-index:-1; overflow:hidden; border-radius:999px; background:var(--bg-base);
}
.btn-beam .beam-body .wash{ position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(58,10,20,.5), rgba(58,10,20,0));
  background:linear-gradient(180deg in oklch, rgba(58,10,20,.5), rgba(58,10,20,0)); }
.btn-beam .beam-body .lines{
  position:absolute; inset:0; opacity:.07; mix-blend-mode:plus-lighter;
  background-image:repeating-linear-gradient(90deg, #fff, #fff 1px, rgba(255,255,255,0) 1px, rgba(255,255,255,0) 8px);
  background-size:24px 100%; animation:lines-slide 1.5s linear infinite;
}
.btn-beam .beam-body .glowspot{
  position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:66%; height:50%; border-radius:50%; filter:blur(18px); pointer-events:none;
  background:rgba(202,57,76,.25); transition:background .5s;
}
.btn-beam:hover{ transform:scale(1.02); box-shadow:0 0 40px -10px rgba(202,57,76,.5); }
.btn-beam:hover .beam-body .glowspot{ background:rgba(202,57,76,.45); }
.btn-beam .arrow{ transition:transform .3s; }
.btn-beam:hover .arrow{ transform:translateX(4px); }
@keyframes beam-spin{ to{ transform:rotate(360deg); } }
@keyframes lines-slide{ 0%{ background-position:0 0; } 100%{ background-position:24px 0; } }
/* Conic spinning border (cadence .btn-hero-primary) */
@property --angle{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
.btn-conic{
  color:var(--text); background:rgba(202,57,76,.10);
  backdrop-filter:blur(10px) saturate(1.25); border-radius:12px; overflow:hidden; z-index:0;
}
.btn-conic::before{
  content:""; position:absolute; inset:-2px; border-radius:14px; z-index:-2;
  background:conic-gradient(from var(--angle,0deg), #F66B71, #CA394C, #701929, rgba(112,25,41,0), #701929, #CA394C, #F66B71);
  background:conic-gradient(from var(--angle,0deg) in oklch, #F66B71, #CA394C, #701929, rgba(112,25,41,0), #701929, #CA394C, #F66B71);
  animation:spin-border 3s linear infinite;
}
.btn-conic::after{ content:""; position:absolute; inset:1px; border-radius:11px; background:rgba(6,7,10,.92); z-index:-1; }
.btn-conic:hover{ transform:translateY(-2px); background:rgba(202,57,76,.15); box-shadow:0 12px 36px rgba(173,43,64,.35); }
@keyframes spin-border{ to{ --angle:360deg; } }
/* Nav pills (cadence .btn-nav) */
.btn-nav{ padding:7px 18px; border-radius:999px; font-size:12px; font-weight:500; transition:all .25s; border:0; }
.btn-nav-ghost{ background:rgba(255,255,255,0); box-shadow:0 0 0 1px rgba(173,43,64,.35) inset; color:var(--text-soft); }
.btn-nav-ghost:hover{ color:var(--bordo-400); box-shadow:0 0 0 1px var(--bordo-500) inset, 0 0 12px rgba(202,57,76,.2); }
.btn-nav-solid{
  color:#FFFFFF;
  background:linear-gradient(135deg, #CA394C, #8E1F33);
  background:linear-gradient(135deg in oklch, #CA394C, #8E1F33);
  box-shadow:0 0 16px rgba(202,57,76,.25);
}
.btn-nav-solid:hover{ box-shadow:0 0 28px rgba(202,57,76,.4); transform:translateY(-1px); }
/* Estados */
.btn[disabled], .btn.is-disabled{
  background:var(--bg-elevated); color:var(--text-muted);
  box-shadow:none; filter:none; transform:none; cursor:not-allowed;
}
.btn.is-loading{ opacity:.7; pointer-events:none; }
.btn.is-loading .spinner{
  width:14px; height:14px; border-radius:50%;
  border:2px solid rgba(255,255,255,.3); border-top-color:#FFFFFF;
  animation:spin-slow 0.8s linear infinite;
}
.btn.is-active{ filter:brightness(.94); }
@keyframes spin-slow{ to{ transform:rotate(360deg); } }
/* Link */
.link{ color:var(--bordo-400); border-bottom:1px solid rgba(202,57,76,0); transition:.2s; }
.link:hover{ color:var(--bordo-300); border-bottom-color:var(--bordo-500); }
.link:active{ color:var(--bordo-500); }

/* ============================================================
   TICKER (north-form) — faixa neutra, acento só nos separadores
   ============================================================ */
.ticker{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow:hidden; white-space:nowrap; background:var(--bg-base);
  transform:rotate(-1.2deg); width:104%; margin-left:-2%; position:relative; z-index:5;
}
.ticker-track{ display:inline-flex; gap:54px; padding:16px 0; will-change:transform; }
.ticker span{ font-family:var(--font-mid); font-weight:600; font-size:clamp(18px,1.8vw,30px); letter-spacing:-.02em; text-transform:uppercase; color:var(--text-soft); }
.ticker .slash{ color:var(--bordo-500); }

/* ============================================================
   LOGO MARQUEE (cadence .logo-track)
   ============================================================ */
.trust{ position:relative; padding:56px 0; background:var(--bg-base); border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; }
.trust:before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 100% at 50% 50%, rgba(142,31,51,.05), rgba(142,31,51,0)); }
.trust-label{ text-align:center; font-size:11px; color:var(--text-muted); letter-spacing:.14em; text-transform:uppercase; margin:0 0 30px; }
.logo-bar-wrap{ position:relative; overflow:hidden; }
.logo-bar-wrap::before,.logo-bar-wrap::after{
  content:""; position:absolute; top:0; bottom:0; width:120px; z-index:2; pointer-events:none;
}
.logo-bar-wrap::before{ left:0; background:linear-gradient(to right, var(--bg-base), rgba(14,15,19,0)); }
.logo-bar-wrap::after{ right:0; background:linear-gradient(to left, var(--bg-base), rgba(14,15,19,0)); }
.logo-track{ display:flex; align-items:center; width:max-content; animation:logo-scroll 28s linear infinite; }
.logo-track:hover{ animation-play-state:paused; }
.logo-item{
  display:flex; align-items:center; padding:0 40px; white-space:nowrap;
  font-family:var(--font-mid); font-size:1.05rem; font-weight:500; letter-spacing:-.01em;
  color:rgba(255,255,255,.25); transition:color .3s; border-right:1px solid rgba(255,255,255,.06);
}
.logo-item:hover{ color:rgba(255,255,255,.6); }
.logo-item.serif{ font-family:Georgia, serif; font-style:italic; }
.logo-item.wide{ letter-spacing:.3em; font-weight:600; }
.logo-item.skew{ transform:skewX(-10deg); font-weight:700; }
@keyframes logo-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ============================================================
   SEÇÕES — composição north-form
   ============================================================ */
.sec{ position:relative; padding:150px 0; background:var(--bg-base); overflow:hidden; }
.sec.void{ background:var(--bg-void); }
.sec-sep{ position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, rgba(202,57,76,0), rgba(202,57,76,.3), rgba(202,57,76,0)); }
.sec-meta{
  display:flex; justify-content:space-between; margin-bottom:9vh;
  border-bottom:1px solid var(--line); padding-bottom:16px;
}
.sec-title{ font-size:clamp(48px,7.4vw,130px); max-width:1400px; }
.sec-title .line-mask:nth-child(2){ padding-left:8vw; }
.sec-title .line-mask:nth-child(3){ padding-left:16vw; }
.sec-intro{ max-width:620px; margin-top:40px; font-size:17px; font-weight:400; line-height:1.65; color:var(--text-soft); }
/* atmosfera de seção (Classe A, até 40% em conteúdo) */
.sec-atmo{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse 55% 40% at 85% 0%, rgba(58,10,20,.38), rgba(14,15,19,0) 62%);
}
.sec > .container{ position:relative; z-index:1; }

/* ============================================================
   MARCA — logotipo oficial (raw_files/Logos). Branco é a regra.
   ============================================================ */
.brand-row-label{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:11px; text-transform:uppercase; letter-spacing:.14em; font-weight:600; color:var(--text-muted);
  margin:64px 0 14px; padding-bottom:10px; border-bottom:1px solid var(--line);
}
.brand-row-label:first-of-type{ margin-top:80px; }
.brand-row-label em{ font-style:normal; color:var(--bordo-400); }
.brand-grid{ display:grid; grid-template-columns:2fr 1.15fr 1fr; gap:14px; }
.brand-tile{
  position:relative; border-radius:14px; border:1px solid var(--line); overflow:hidden;
  min-height:250px; display:flex; align-items:center; justify-content:center; padding:44px 40px 52px;
  transition:.3s;
}
.brand-tile:hover{ transform:translateY(-3px); border-color:var(--line-strong); box-shadow:0 0 32px -12px rgba(173,43,64,.45); }
.brand-tile.on-void{ background:var(--bg-void); }
.brand-tile.on-light{ background:#F2F3F6; border-color:rgba(6,7,10,.1); }
.brand-tile img{ max-width:100%; max-height:110px; width:auto; height:auto; display:block; }
.brand-tile .pin{
  position:absolute; left:14px; bottom:12px; right:14px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.04em; color:var(--text-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.brand-tile .pin b{ font-weight:600; color:var(--text-soft); }
.brand-tile.on-light .pin{ color:#6B6D74; }
.brand-tile.on-light .pin b{ color:#191B20; }
/* aplicações ao vivo */
.brand-apps{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.brand-app{ border-radius:14px; border:1px solid var(--line); background:var(--bg-surface); overflow:hidden; transition:.3s; }
.brand-app:hover{ transform:translateY(-3px); border-color:var(--line-strong); }
.brand-app .stage{
  height:150px; display:flex; align-items:center; justify-content:center; padding:0 22px;
  background:var(--bg-void); position:relative; border-bottom:1px solid var(--line);
}
.brand-app .info{ padding:14px 16px; }
.brand-app .nm{ font-weight:600; color:var(--text); font-size:13px; display:flex; justify-content:space-between; align-items:center; }
.brand-app .nm em{ font-style:normal; font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); }
.brand-app .use{ font-size:11px; line-height:1.55; color:var(--text-soft); margin-top:8px; border-top:1px dashed var(--line); padding-top:8px; }
.brand-demo-header{
  width:100%; display:flex; align-items:center; gap:14px; padding:0 14px; height:42px; border-radius:999px;
  border:1px solid rgba(255,255,255,.13); background:rgba(14,15,19,.72);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
}
.brand-demo-header img{ height:18px; width:auto; }
.brand-demo-header i{ flex:1; height:5px; border-radius:99px; background:var(--line); }
.brand-demo-header i:last-child{ flex:0 0 46px; background:var(--text); }
.brand-demo-tab{
  display:flex; align-items:center; gap:9px; padding:9px 16px; border-radius:9px 9px 0 0;
  background:var(--bg-surface); border:1px solid var(--line); border-bottom:0;
  font-size:11px; color:var(--text-soft); align-self:flex-end;
}
.brand-demo-tab img{ height:14px; width:auto; }
.brand-demo-tab .x{ color:var(--text-muted); margin-left:6px; }
.brand-demo-avatar{
  width:72px; height:72px; border-radius:20px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(175deg, #CA394C, #8E1F33);
  background:linear-gradient(175deg in oklch, #CA394C, #8E1F33);
  box-shadow:0 14px 34px -12px rgba(173,43,64,.8);
}
.brand-demo-avatar img{ width:38px; height:auto; }
.brand-demo-wm{
  position:absolute; inset:0; padding:14px;
  background:radial-gradient(ellipse 80% 70% at 30% 20%, rgba(142,31,51,.55), rgba(6,7,10,0) 70%), linear-gradient(135deg, var(--bg-elevated), var(--bg-void));
  display:flex; align-items:flex-end; justify-content:flex-end;
}
.brand-demo-wm img{ height:16px; width:auto; opacity:.5; }
/* regras */
.brand-rules{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.brand-rule{ border-radius:14px; border:1px solid var(--line); background:var(--bg-surface); padding:22px 24px 24px; }
.brand-rule h4{ font-family:var(--font-mid); font-weight:600; font-size:16px; letter-spacing:-.01em; color:var(--text); display:flex; align-items:center; gap:10px; }
.brand-rule h4 .b-dot{ width:8px; height:8px; border-radius:50%; }
.brand-rule.ok h4 .b-dot{ background:var(--success); box-shadow:0 0 12px var(--success); }
.brand-rule.no h4 .b-dot{ background:var(--danger); box-shadow:0 0 12px var(--danger); }
.brand-rule ul{ margin:14px 0 0; padding:0; list-style:none; display:grid; gap:9px; }
.brand-rule li{ font-size:13px; line-height:1.55; color:var(--text-soft); padding-left:16px; position:relative; }
.brand-rule li:before{ content:""; position:absolute; left:0; top:.66em; width:7px; height:1px; background:var(--line-strong); }
.brand-rule li b{ font-weight:600; color:var(--text); }
/* inventário de arquivos */
.brand-files .type-sample img{ height:34px; width:auto; display:block; }
.brand-files .type-sample.on-light{ display:inline-block; background:#F2F3F6; padding:12px 16px; border-radius:8px; }
@media (max-width:1100px){
  .brand-grid{ grid-template-columns:1fr 1fr; }
  .brand-grid .brand-tile:first-child{ grid-column:1 / -1; }
  .brand-apps{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .brand-grid,.brand-apps,.brand-rules{ grid-template-columns:1fr; }
  .brand-tile{ min-height:190px; padding:34px 26px 44px; }
}

/* ============================================================
   TIPOGRAFIA — espécimes
   ============================================================ */
.type-row{
  display:grid; grid-template-columns:200px 1fr 300px; gap:28px; align-items:center;
  border-top:1px solid var(--line); padding:34px 0; transition:.3s;
}
.type-row:last-child{ border-bottom:1px solid var(--line); }
.type-row:hover{ padding-left:18px; }
.type-row:hover .type-name{ color:var(--bordo-400); }
.type-name{ font-size:11px; text-transform:uppercase; letter-spacing:.14em; font-weight:600; color:var(--text-muted); transition:.3s; }
.type-sample{ overflow:hidden; }
.type-spec{ font-family:var(--font-mono); font-size:11px; line-height:1.9; color:var(--text-muted); }
.type-spec b{ color:var(--text-soft); font-weight:500; }
/* papéis de texto */
.t-h1{ font-family:var(--font-display); font-weight:700; font-size:clamp(46px,5.4vw,96px); line-height:.92; letter-spacing:-.01em; color:var(--text); }
.t-h2{ font-family:var(--font-display); font-weight:700; font-size:clamp(34px,4vw,64px); line-height:.94; letter-spacing:-.01em; color:var(--text); }
.t-h3{ font-family:var(--font-display); font-weight:700; font-size:clamp(26px,2.6vw,40px); line-height:1; letter-spacing:-.01em; color:var(--text); }
.t-h4{ font-family:var(--font-mid); font-weight:600; font-size:24px; line-height:1.15; letter-spacing:-.02em; color:var(--text); }
.t-h5{ font-family:var(--font-body); font-weight:600; font-size:18px; line-height:1.3; letter-spacing:-.01em; color:var(--text); }
.t-h6{ font-family:var(--font-body); font-weight:600; font-size:12px; line-height:1.4; letter-spacing:.16em; text-transform:uppercase; color:var(--text-muted); }
.t-body-lg{ font-weight:400; font-size:17px; line-height:1.65; color:var(--text-soft); }
.t-body{ font-weight:400; font-size:15px; line-height:1.6; color:var(--text-soft); }
.t-body-sm{ font-weight:400; font-size:13px; line-height:1.55; color:var(--text-soft); }
.t-caption{ font-weight:500; font-size:11px; line-height:1.5; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); }
.t-label{ font-weight:500; font-size:10px; line-height:1.4; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); }
.t-helper{ font-weight:400; font-size:12px; line-height:1.5; color:var(--text-muted); }
.t-mono{ font-family:var(--font-mono); font-size:12px; line-height:1.7; color:var(--text-soft); }
.type-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:70px; }

/* ============================================================
   SISTEMA DE CORES — amostras
   ============================================================ */
.swatch-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.swatch{
  border-radius:14px; border:1px solid var(--line); background:var(--bg-surface);
  overflow:hidden; transition:.3s; position:relative;
}
.swatch:hover{ transform:translateY(-3px); border-color:var(--line-strong); box-shadow:0 0 32px -12px rgba(173,43,64,.45); }
.swatch .chip{ height:86px; position:relative; }
.swatch .chip .pin{
  position:absolute; right:10px; bottom:10px; font-family:var(--font-mono);
  font-size:10px; padding:3px 8px; border-radius:5px;
  background:rgba(6,7,10,.55); color:var(--text); backdrop-filter:blur(6px);
}
.swatch .info{ padding:14px 16px; }
.swatch .info .nm{ font-weight:600; color:var(--text); font-size:13px; display:flex; align-items:center; justify-content:space-between; }
.swatch .info .nm em{ font-style:normal; font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); }
.swatch .info .vals{ font-family:var(--font-mono); font-size:10px; line-height:1.8; color:var(--text-muted); margin-top:6px; }
.swatch .info .use{ font-size:11px; line-height:1.55; color:var(--text-soft); margin-top:8px; border-top:1px dashed var(--line); padding-top:8px; }
.ramp{ display:grid; grid-template-columns:repeat(9,1fr); border-radius:14px; overflow:hidden; border:1px solid var(--line); margin:26px 0 40px; }
.ramp div{ height:112px; position:relative; }
.ramp div span{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:9px; color:#FFFFFF; opacity:.85; letter-spacing:.05em;
}
.ramp div:nth-child(-n+3) span{ opacity:.6; }
.contrast-table{ width:100%; border-collapse:collapse; font-size:13px; }
.contrast-table th{
  text-align:left; font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-muted); font-weight:600; padding:12px 14px; border-bottom:1px solid var(--line-strong);
}
.contrast-table td{ padding:12px 14px; border-bottom:1px solid var(--line); color:var(--text-soft); }
.contrast-table td.mono{ font-family:var(--font-mono); font-size:11px; }
.contrast-table .pill-demo{ display:inline-flex; align-items:center; gap:8px; padding:4px 12px; border-radius:7px; font-weight:500; }
.rule-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:40px; }

/* ============================================================
   CAP-STATEMENT — pin + scrub (north-form .cap-statement, idêntico)
   ============================================================ */
.cap-wrap{ background:var(--bg-void); position:relative; overflow:hidden; }
.cap-wrap .sec-atmo{ background:radial-gradient(ellipse 70% 55% at 18% 108%, rgba(142,31,51,.4) 0%, rgba(58,10,20,.22) 34%, rgba(14,15,19,0) 68%); }
.cap-intro{ min-height:115vh; display:flex; align-items:center; position:relative; z-index:1; }
.cap-statement{ font-size:clamp(50px,7.8vw,140px); max-width:1400px; }
.cap-statement span{ display:block; color:var(--line-strong); transition:color .25s linear; }
.cap-statement span:nth-child(2){ padding-left:8vw; }
.cap-statement span:nth-child(3){ padding-left:16vw; }
.cap-statement span.active{ color:var(--text); }
.cap-statement span em{ font-style:normal; color:inherit; }
.cap-statement span.active em{ color:var(--bordo-400); }

/* ============================================================
   COMPONENTES — vitrines
   ============================================================ */
.comp-block{ margin-top:90px; }
.comp-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  border-bottom:1px solid var(--line); padding-bottom:14px; margin-bottom:34px;
}
.comp-head h3{ font-family:var(--font-display); font-weight:700; letter-spacing:-.01em; font-size:clamp(26px,2.8vw,44px); color:var(--text); }
.comp-head .idx{ font-family:var(--font-mono); font-size:11px; color:var(--bordo-400); }
.comp-grid{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
.comp-note{ font-size:12px; color:var(--text-muted); margin-top:16px; max-width:640px; line-height:1.6; }
.comp-note b{ color:var(--text-soft); font-weight:500; }
.state-table{ display:grid; grid-template-columns:110px repeat(3,1fr); gap:12px 18px; align-items:center; margin-top:30px; }
.state-table .st-label{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); font-weight:600; }

/* Inputs (north-form .field, convertido para dark) */
.field{ margin-bottom:26px; text-align:left; }
.field label{ display:block; font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:var(--text-muted); margin-bottom:8px; font-weight:500; }
.field input,.field textarea,.field select{
  width:100%; border:0; border-bottom:1px solid var(--line-strong);
  background:rgba(255,255,255,0); color:var(--text); padding:10px 0; outline:none;
  transition:border-color .3s;
}
.field input::placeholder,.field textarea::placeholder{ color:var(--text-muted); }
.field input:hover,.field textarea:hover{ border-bottom-color:var(--text-muted); }
.field input:focus,.field textarea:focus,.field select:focus{ border-bottom-color:var(--bordo-500); }
.field textarea{ resize:vertical; min-height:80px; }
.field select{ appearance:none; }
.field.filled input,.field.filled select{
  background:var(--bg-surface); border:1px solid var(--line); border-radius:10px; padding:11px 14px;
}
.field.filled input:focus{ border-color:var(--bordo-500); box-shadow:0 0 0 3px rgba(202,57,76,.15); }
/* erro: âmbar-laranja + sinal não-cromático (ícone e texto) */
.field.error input{ border-color:var(--danger-border); border-style:dashed; background:rgba(76,30,13,.25); }
.field.error .msg{
  display:flex; align-items:center; gap:6px; margin-top:8px;
  font-size:12px; color:var(--danger);
}
.field.error .msg svg{ width:13px; height:13px; flex-shrink:0; }
.field .ok-msg{ display:flex; align-items:center; gap:6px; margin-top:8px; font-size:12px; color:var(--success); }
.field .ok-msg svg{ width:13px; height:13px; }

/* Card estilo finex (dot-grid + wash radial + SVG animado) */
.card-finex{
  position:relative; border-radius:2rem; background:var(--bg-surface);
  border:1px solid rgba(255,255,255,.08); border-top-color:rgba(255,255,255,.12);
  padding:32px; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between;
  min-height:360px; transition:border-color .3s, transform .3s;
}
.card-finex:hover{ border-color:rgba(255,255,255,.16); }
.card-finex .wash{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at top, rgba(84,17,30,.5), rgba(25,27,32,0) 62%);
}
.card-finex .dots{
  position:absolute; inset:0; pointer-events:none; opacity:.16;
  background-image:radial-gradient(rgba(255,255,255,.9) 1px, rgba(255,255,255,0) 1px);
  background-size:40px 40px;
  -webkit-mask-image:radial-gradient(circle, #000 40%, rgba(0,0,0,0) 100%);
  mask-image:radial-gradient(circle, #000 40%, rgba(0,0,0,0) 100%);
}
.card-finex h4{ font-family:var(--font-display); font-weight:700; letter-spacing:-.01em; font-size:clamp(24px,2.2vw,34px); color:var(--text); position:relative; z-index:1; }
.card-finex p{ position:relative; z-index:1; margin-top:8px; font-size:15px; font-weight:400; line-height:1.6; color:var(--text-soft); }
.card-finex .viz{ position:relative; z-index:1; margin-top:auto; }

/* Bento card (cadence, família bc-*) */
.bento-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.bento-card{
  position:relative; background:rgba(14,15,19,.85); border-radius:16px; overflow:hidden; z-index:1;
  backdrop-filter:blur(16px) saturate(1.25);
  box-shadow:0 8px 40px rgba(0,0,0,.3), 0 0 0 1px rgba(202,57,76,.05);
  transition:transform .35s var(--ease-out), box-shadow .35s;
}
.bento-card::before{
  content:""; position:absolute; inset:0; border-radius:16px; padding:1px;
  background:linear-gradient(160deg, rgba(202,57,76,.45), rgba(202,57,76,.06) 40%, rgba(202,57,76,0) 60%, rgba(227,77,91,.25));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none; z-index:3;
}
.bento-card::after{
  content:""; position:absolute; top:-1px; left:15%; right:15%; height:60px;
  background:radial-gradient(ellipse 100% 100% at 50% 0%, rgba(202,57,76,.1), rgba(202,57,76,0));
  pointer-events:none; z-index:1;
}
.bento-card:hover{ transform:translateY(-3px); box-shadow:0 20px 60px rgba(142,31,51,.12), 0 0 0 1px rgba(202,57,76,.14); }
.bc-grid{
  position:absolute; inset:0; pointer-events:none; z-index:0; border-radius:16px;
  background-image:
    linear-gradient(rgba(173,43,64,.055) 1px, rgba(0,0,0,0) 1px),
    linear-gradient(90deg, rgba(173,43,64,.055) 1px, rgba(0,0,0,0) 1px);
  background-size:20px 20px;
  -webkit-mask-image:linear-gradient(#000 0%, rgba(0,0,0,0) 50%);
  mask-image:linear-gradient(#000 0%, rgba(0,0,0,0) 50%);
}
.bc-shimmer{
  position:absolute; top:0; left:0; width:40%; height:100%; pointer-events:none; z-index:2;
  background:linear-gradient(90deg, rgba(202,57,76,0), rgba(202,57,76,.05), rgba(255,255,255,.02), rgba(202,57,76,0));
  transform:translateX(-100%) skewX(-15deg);
}
.bento-card:hover .bc-shimmer{ animation:bc-shimmer-sweep .8s var(--ease-out) forwards; }
@keyframes bc-shimmer-sweep{ to{ transform:translateX(350%) skewX(-15deg); } }
.bc-corner{ position:absolute; width:12px; height:12px; z-index:4; pointer-events:none; }
.bc-corner::before,.bc-corner::after{ content:""; position:absolute; background:rgba(202,57,76,.3); }
.bc-corner::before{ width:12px; height:1px; }
.bc-corner::after{ width:1px; height:12px; }
.bc-corner-tl{ top:8px; left:8px; }
.bc-corner-br{ bottom:8px; right:8px; }
.bc-corner-br::before{ bottom:0; right:0; }
.bc-corner-br::after{ bottom:0; right:0; }
.bc-header{
  display:flex; align-items:center; gap:8px; padding:14px 20px 12px;
  border-bottom:1px solid rgba(202,57,76,.08); position:relative; z-index:2;
}
.bc-live-dot{
  width:5px; height:5px; border-radius:50%; background:var(--success);
  box-shadow:0 0 6px rgba(78,201,131,.6); animation:pulse-dot 2s ease-in-out infinite;
}
.bc-header-title{ font-family:var(--font-mid); font-size:.92rem; font-weight:600; color:var(--text); letter-spacing:-.01em; }
.bc-header-tag{
  margin-left:auto; font-size:.55rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--bordo-400); background:rgba(202,57,76,.08); border:1px solid rgba(202,57,76,.2);
  border-radius:999px; padding:2px 8px;
}
.bc-body{ padding:14px 20px 18px; position:relative; z-index:2; }
.bc-body > p{ font-size:.8rem; color:var(--text-muted); line-height:1.65; margin-bottom:14px; }
.bento-widget{
  border-radius:8px; background:rgba(6,7,10,.35); border:1px solid rgba(202,57,76,.1);
  overflow:hidden; height:110px; position:relative;
}
.bw-status{
  display:flex; align-items:center; justify-content:space-between; padding:7px 10px;
  border-bottom:1px solid rgba(202,57,76,.07);
  font-size:.56rem; letter-spacing:.06em; text-transform:uppercase;
}
.bw-status-label{ color:var(--text-muted); }
.bw-status-val{ color:var(--bordo-400); font-weight:600; }
.widget-bars{ display:flex; align-items:flex-end; gap:5px; padding:8px 10px 0; height:calc(100% - 27px); }
.widget-bar{
  flex:1; border-radius:3px 3px 0 0; min-height:8px; opacity:.9;
  background:linear-gradient(0deg, #701929, #CA394C);
  background:linear-gradient(0deg in oklch, #701929, #CA394C);
  transition:height 1.2s var(--ease-out);
}
.widget-signals{ display:flex; flex-direction:column; gap:5px; padding:8px 10px; overflow:hidden; }
.signal-row{ display:flex; align-items:center; gap:7px; font-size:.66rem; color:var(--text-muted); }
.signal-dot{ width:5px; height:5px; border-radius:50%; background:var(--success); flex-shrink:0; animation:pulse-dot 2s ease-in-out infinite; }
.signal-dot.warn{ background:var(--warning); }
.signal-dot.hot{ background:var(--danger); }
@keyframes pulse-dot{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.5; transform:scale(.7); } }
.widget-team{ display:flex; flex-direction:column; gap:8px; padding:10px; }
.team-row{ display:flex; align-items:center; gap:8px; }
.team-avatar{
  width:18px; height:18px; border-radius:50%; font-size:.5rem; font-weight:600; color:#FFFFFF;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  background:linear-gradient(135deg, #CA394C, #701929);
  background:linear-gradient(135deg in oklch, #CA394C, #701929);
}
.team-name{ font-size:.62rem; color:var(--text-muted); width:52px; }
.team-score{ font-size:.64rem; color:var(--bordo-400); font-weight:600; }
.team-progress{ height:3px; border-radius:2px; background:rgba(202,57,76,.15); flex:1; overflow:hidden; }
.team-progress-fill{ height:100%; border-radius:2px;
  background:linear-gradient(90deg, #AD2B40, #E34D5B);
  background:linear-gradient(90deg in oklch, #AD2B40, #E34D5B);
  transition:width 1.5s var(--ease-out); }

/* Spotlight cards (cogni — Retenção / Velocidade / Foco) */
.spot-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.spot-card{
  position:relative; border-radius:24px; padding:1px; overflow:hidden;
  background:linear-gradient(180deg, rgba(202,57,76,.3), rgba(255,255,255,.05));
  transition:transform .3s var(--ease-out);
}
.spot-card:hover{ transform:translateY(-4px); }
.spot-card:hover{ background:linear-gradient(180deg, rgba(202,57,76,.42), rgba(255,255,255,.06)); }
.spot-sheen{ pointer-events:none; position:absolute; inset:-1px; z-index:20; transition:opacity .3s; mix-blend-mode:overlay; opacity:0; }
.spot-glow{
  pointer-events:none; position:absolute; z-index:0; opacity:0; transition:opacity .5s;
  width:256px; height:256px; border-radius:50%; transform:translate(-50%,-50%);
  background:var(--bordo-500); filter:blur(80px);
}
.spot-inner{
  height:100%; position:relative; z-index:10; border-radius:23px;
  background:rgba(14,15,19,.9); backdrop-filter:blur(24px) saturate(1.25);
  padding:32px; display:flex; flex-direction:column; align-items:flex-start;
}
.spot-icon{
  width:48px; height:48px; border-radius:16px; display:grid; place-items:center;
  background:rgba(202,57,76,.1); border:1px solid rgba(202,57,76,.22); color:var(--bordo-400);
  margin-bottom:30px; transition:transform .3s var(--ease-out);
}
.spot-icon svg{ width:22px; height:22px; }
.spot-card:hover .spot-icon{ transform:scale(1.1); }
.spot-num{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.01em; font-size:40px;
  background:linear-gradient(90deg in oklch, #F2F3F6, #E34D5B);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  margin-bottom:12px; transition:transform .3s var(--ease-out);
}
.spot-card:hover .spot-num{ transform:translateX(4px); }
.spot-inner h4{ font-size:18px; font-weight:600; letter-spacing:-.01em; color:var(--text); margin-bottom:10px; }
.spot-inner p{ font-size:13px; line-height:1.65; color:var(--text-soft); }

/* Badges */
.badge{
  display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px;
  font-size:11px; font-weight:600; letter-spacing:.05em;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); color:var(--text-soft);
}
.badge svg{ width:12px; height:12px; }
.badge .b-dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge-brand{ background:rgba(202,57,76,.12); border-color:rgba(202,57,76,.35); color:var(--bordo-400); }
.badge-info{ background:var(--info-surface); border-color:var(--info-border); color:var(--info); }
.badge-success{ background:var(--success-surface); border-color:var(--success-border); color:var(--success); }
.badge-warning{ background:var(--warning-surface); border-color:var(--warning-border); color:var(--warning); }
.badge-danger{ background:var(--danger-surface); border-color:var(--danger-border); color:var(--danger); border-style:dashed; }

/* Tooltips */
[data-tip]{ position:relative; }
[data-tip]:hover::after,[data-tip]:focus-visible::after{
  content:attr(data-tip); position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%);
  background:var(--bg-elevated); color:var(--text); font-size:11px; font-weight:500; letter-spacing:.02em;
  padding:6px 11px; border-radius:8px; white-space:nowrap; z-index:60; pointer-events:none;
  border:1px solid var(--line); border-top-color:rgba(255,255,255,.1);
  box-shadow:0 0 24px -8px rgba(173,43,64,.4);
  animation:tip-in .25s var(--ease-out);
}
[data-tip]:hover::before,[data-tip]:focus-visible::before{
  content:""; position:absolute; bottom:calc(100% + 5px); left:50%; transform:translateX(-50%) rotate(45deg);
  width:9px; height:9px; background:var(--bg-elevated); border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  z-index:61; pointer-events:none;
}
@keyframes tip-in{ from{ opacity:0; translate:0 4px; } to{ opacity:1; translate:0 0; } }

/* Modal */
.modal{
  position:fixed; inset:0; z-index:1200; display:none; align-items:center; justify-content:center; padding:24px;
}
.modal.open{ display:flex; }
.modal-backdrop{
  position:absolute; inset:0; background:rgba(6,7,10,.72); backdrop-filter:blur(8px);
}
.modal-backdrop::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 50% 100%, rgba(142,31,51,.35), rgba(58,10,20,0) 65%);
}
.modal-panel{
  position:relative; z-index:1; width:min(520px,100%);
  background:var(--bg-elevated); border-radius:20px;
  border:1px solid rgba(255,255,255,.08); border-top-color:rgba(255,255,255,.14);
  box-shadow:0 8px 60px -16px rgba(31,6,10,.9);
  padding:30px; animation:modal-in .45s var(--ease-out);
}
@keyframes modal-in{ from{ opacity:0; transform:translateY(26px) scale(.97); } to{ opacity:1; transform:none; } }
.modal-panel h4{ font-family:var(--font-mid); font-weight:600; letter-spacing:-.02em; font-size:26px; color:var(--text); margin-bottom:8px; }
.modal-panel p{ font-size:14px; color:var(--text-soft); line-height:1.6; }
.modal-close{
  position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); color:var(--text-soft);
  display:grid; place-items:center; transition:.25s;
}
.modal-close:hover{ color:var(--text); background:rgba(255,255,255,.1); transform:rotate(90deg); }
.modal-actions{ display:flex; justify-content:flex-end; gap:12px; margin-top:26px; }
/* ============================================================
   COMO FUNCIONA — scroll-pinned stacking cards (cadence #how)
   ============================================================ */
#how{ position:relative; height:420vh; padding:0; overflow:visible; background:var(--bg-void); }
.how-sticky{
  position:sticky; top:0; height:100vh; display:flex; align-items:center; justify-content:center;
  overflow:hidden; perspective:1200px;
}
.how-bg-orb{
  position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none;
  transition:transform 1.4s var(--ease-out), opacity 1.4s; will-change:transform,opacity;
}
.how-bg-orb-1{ width:500px; height:500px; top:10%; left:-5%;
  background:radial-gradient(circle, rgba(142,31,51,.22), rgba(142,31,51,0) 70%); }
.how-bg-orb-2{ width:400px; height:400px; bottom:5%; right:-5%;
  background:radial-gradient(circle, rgba(58,10,20,.4), rgba(58,10,20,0) 70%); }
.how-bg-dots{
  position:absolute; inset:0; pointer-events:none; opacity:.6;
  background-image:radial-gradient(circle, rgba(202,57,76,.05) 1px, rgba(202,57,76,0) 1px);
  background-size:32px 32px;
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000 20%, rgba(0,0,0,0) 80%);
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000 20%, rgba(0,0,0,0) 80%);
}
.how-inner{
  position:relative; z-index:2; width:100%; max-width:1140px; padding:0 40px;
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
}
.how-left{ display:flex; flex-direction:column; align-items:flex-start; gap:22px; }
.how-step-counter{ position:relative; width:100%; }
.how-big-num{
  font-family:var(--font-display); font-size:clamp(8rem,17vw,13rem); font-weight:700;
  line-height:.85; letter-spacing:-.015em; color:rgba(0,0,0,0);
  -webkit-text-stroke:1px rgba(202,57,76,.18);
  transition:all .8s var(--ease-out); user-select:none;
}
.how-big-num-fill{
  position:absolute; inset:0; font-family:var(--font-display);
  font-size:clamp(8rem,17vw,13rem); font-weight:700; line-height:.85; letter-spacing:-.015em;
  background:linear-gradient(135deg, #F66B71 0%, #CA394C 45%, #8E1F33 100%);
  background:linear-gradient(135deg in oklch, #F66B71 0%, #CA394C 45%, #8E1F33 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  opacity:0; transform:scaleX(0); transform-origin:left center;
  transition:opacity .6s var(--ease-out), transform 1s var(--ease-out);
}
.how-big-num-fill.visible{ opacity:1; transform:scaleX(1); }
.how-left-label{
  font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--bordo-400);
  opacity:0; transform:translateY(8px); transition:all .6s var(--ease-out);
}
.how-left-label.visible{ opacity:1; transform:translateY(0); }
.how-left-title{
  font-family:var(--font-display); font-size:clamp(1.8rem,3vw,2.5rem); font-weight:700;
  color:var(--text); letter-spacing:-.01em; line-height:1.1;
  opacity:0; transform:translateY(16px); transition:all .7s var(--ease-out) .08s;
}
.how-left-title.visible{ opacity:1; transform:translateY(0); }
.how-progress{ width:100%; height:2px; background:rgba(202,57,76,.12); border-radius:2px; overflow:hidden; margin-top:8px; }
.how-progress-fill{
  height:100%; width:0%; border-radius:2px; transition:width .15s linear;
  background:linear-gradient(90deg, #E34D5B, #CA394C);
  background:linear-gradient(90deg in oklch, #E34D5B, #CA394C);
  box-shadow:0 0 8px rgba(202,57,76,.4);
}
.how-dots{ display:flex; gap:10px; margin-top:4px; }
.how-dot{
  width:8px; height:8px; border-radius:50%;
  background:rgba(202,57,76,.12); border:1px solid rgba(202,57,76,.2);
  transition:all .5s var(--ease-out);
}
.how-dot.active{ background:var(--bordo-500); border-color:var(--bordo-400); box-shadow:0 0 12px rgba(202,57,76,.5); transform:scale(1.3); }
.how-right{ position:relative; height:420px; perspective:900px; }
.how-panel{
  position:absolute; inset:0; border-radius:20px; overflow:hidden;
  background:rgba(14,15,19,.85); backdrop-filter:blur(20px) saturate(1.25);
  box-shadow:0 20px 80px rgba(0,0,0,.4), 0 0 0 1px rgba(202,57,76,.06);
  display:flex; flex-direction:column; opacity:0; pointer-events:none;
  transform:translateZ(-120px) rotateY(8deg) scale(.92);
  transition:all .8s var(--ease-out); will-change:transform,opacity;
}
.how-panel::before{
  content:""; position:absolute; inset:0; border-radius:20px; padding:1px;
  background:linear-gradient(160deg, rgba(202,57,76,.5), rgba(202,57,76,.08) 40%, rgba(202,57,76,0) 60%, rgba(227,77,91,.3));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none; z-index:3;
}
.how-panel::after{
  content:""; position:absolute; top:-1px; left:10%; right:10%; height:80px;
  background:radial-gradient(ellipse 100% 100% at 50% 0%, rgba(202,57,76,.12), rgba(202,57,76,0));
  pointer-events:none; z-index:1;
}
.how-panel.active{ opacity:1; transform:none; pointer-events:auto; }
.how-panel.behind{ opacity:0; transform:translateZ(-60px) translateY(-30px) scale(.96); }
.hp-grid{
  position:absolute; inset:0; pointer-events:none; z-index:0; border-radius:20px;
  background-image:
    linear-gradient(rgba(173,43,64,.05) 1px, rgba(0,0,0,0) 1px),
    linear-gradient(90deg, rgba(173,43,64,.05) 1px, rgba(0,0,0,0) 1px);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(#000 0%, rgba(0,0,0,0) 60%);
  mask-image:linear-gradient(#000 0%, rgba(0,0,0,0) 60%);
}
.hp-shimmer{
  position:absolute; top:0; left:0; width:40%; height:100%; pointer-events:none; z-index:2;
  background:linear-gradient(90deg, rgba(202,57,76,0), rgba(202,57,76,.06), rgba(255,255,255,.03), rgba(202,57,76,0));
  transform:translateX(-100%) skewX(-15deg);
}
.how-panel.active .hp-shimmer{ animation:panel-shimmer 2.5s var(--ease-out) .3s 1; }
@keyframes panel-shimmer{ 0%{ transform:translateX(-100%) skewX(-15deg); } 100%{ transform:translateX(300%) skewX(-15deg); } }
.hp-corner{ position:absolute; width:16px; height:16px; z-index:4; pointer-events:none; }
.hp-corner::before,.hp-corner::after{ content:""; position:absolute; background:rgba(202,57,76,.3); }
.hp-corner::before{ width:16px; height:1px; }
.hp-corner::after{ width:1px; height:16px; }
.hp-corner-tl{ top:10px; left:10px; }
.hp-corner-tr{ top:10px; right:10px; }
.hp-corner-tr::before{ right:0; }
.hp-corner-tr::after{ right:0; }
.hp-corner-br{ bottom:10px; right:10px; }
.hp-corner-br::before{ bottom:0; right:0; }
.hp-corner-br::after{ bottom:0; right:0; }
.hp-header{
  display:flex; align-items:center; gap:8px; padding:16px 22px 14px;
  border-bottom:1px solid rgba(202,57,76,.08); position:relative; z-index:2;
}
.hp-live-dot{ width:6px; height:6px; border-radius:50%; background:var(--success); box-shadow:0 0 6px rgba(78,201,131,.6); animation:pulse-dot 2s ease-in-out infinite; }
.hp-header-title{ font-family:var(--font-mid); font-size:1rem; font-weight:600; color:var(--text); letter-spacing:-.01em; }
.hp-header-badge{
  margin-left:auto; font-size:.55rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--bordo-400); background:rgba(202,57,76,.08); border:1px solid rgba(202,57,76,.2);
  border-radius:999px; padding:2px 9px;
}
.hp-body{ padding:16px 22px; position:relative; z-index:2; display:flex; flex-direction:column; gap:12px; flex:1; }
.hp-body > p{ font-size:.82rem; color:var(--text-muted); line-height:1.6; }
.how-panel-widget{
  border-radius:10px; background:rgba(6,7,10,.35); border:1px solid rgba(202,57,76,.1);
  padding:10px 12px; flex:1; display:flex; flex-direction:column; gap:8px; overflow:hidden;
}
.hw-status-row{ display:flex; align-items:center; justify-content:space-between; font-size:.58rem; letter-spacing:.06em; text-transform:uppercase; }
.hw-status-row .hw-status-label{ color:var(--text-muted); }
.hw-status-row .hw-status-val{ color:var(--bordo-400); font-weight:600; }
.hw-integrations{ display:flex; flex-wrap:wrap; gap:6px; }
.hw-int-pill{
  display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  font-size:.62rem; color:var(--text-soft);
}
.hw-int-pill.glow{ border-color:rgba(202,57,76,.3); box-shadow:0 0 10px -3px rgba(202,57,76,.4); }
.hw-status-dot{ width:5px; height:5px; border-radius:50%; }
.hw-status-dot.on{ background:var(--success); box-shadow:0 0 5px rgba(78,201,131,.6); }
.hw-status-dot.off{ background:var(--text-muted); opacity:.5; }
.hw-funnel{ display:flex; flex-direction:column; gap:7px; }
.hw-funnel-row{ display:flex; align-items:center; gap:8px; font-size:.62rem; color:var(--text-muted); }
.hw-funnel-label{ width:56px; flex-shrink:0; }
.hw-funnel-bar-wrap{ flex:1; height:6px; border-radius:3px; background:rgba(202,57,76,.1); overflow:hidden; }
.hw-funnel-bar{ height:100%; border-radius:3px;
  background:linear-gradient(90deg, #AD2B40, #E34D5B);
  background:linear-gradient(90deg in oklch, #AD2B40, #E34D5B);
  transition:width 1.2s var(--ease-out); }
.hw-funnel-val{ width:44px; text-align:right; color:var(--bordo-400); }
.hw-gauge{ display:flex; align-items:center; gap:16px; flex:1; }
.hw-gauge-ring{ position:relative; width:82px; height:82px; flex-shrink:0; }
.hw-gauge-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.hw-gauge-ring .ring-bg{ fill:none; stroke:rgba(202,57,76,.12); stroke-width:6; }
.hw-gauge-ring .ring-fill{
  fill:none; stroke:var(--bordo-500); stroke-width:6; stroke-linecap:round;
  stroke-dasharray:188.5; stroke-dashoffset:188.5; transition:stroke-dashoffset 1.6s var(--ease-out);
  filter:drop-shadow(0 0 6px rgba(202,57,76,.5));
}
.hw-gauge-ring .ring-fill.drawn{ stroke-dashoffset:24.5; }
.hw-gauge-val{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--font-mid); font-weight:600; font-size:1.05rem; color:var(--text); letter-spacing:-.01em;
}
.hw-gauge-meta{ display:flex; flex-direction:column; gap:6px; font-size:.66rem; color:var(--text-muted); }
.hw-gauge-row{ display:flex; align-items:center; gap:7px; }
.hw-gauge-dot{ width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.hw-actions{ display:flex; flex-direction:column; gap:7px; }
.hw-action-row{ display:flex; align-items:center; gap:8px; font-size:.64rem; color:var(--text-muted); }
.hw-action-dot{ width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.hw-action-dot.live{ background:var(--bordo-400); box-shadow:0 0 6px rgba(227,77,91,.6); animation:pulse-dot 1.6s ease-in-out infinite; }
.hw-action-dot.done{ background:var(--success); }
.hw-action-time{ margin-left:auto; opacity:.6; }
.how-mobile-header{ display:none; }

/* ============================================================
   PARALLAX MENTAL (cogni 3ª dobra) — tiles flutuantes com mouse
   ============================================================ */
.mindfield{
  position:relative; min-height:110vh; display:flex; align-items:center; justify-content:center;
  background:var(--bg-void); overflow:hidden;
}
.mindfield .sec-atmo{
  background:
    radial-gradient(ellipse 45% 40% at 25% 70%, rgba(84,17,30,.4), rgba(84,17,30,0) 65%),
    radial-gradient(ellipse 40% 35% at 78% 25%, rgba(58,10,20,.45), rgba(58,10,20,0) 62%);
}
.mind-center{ position:relative; z-index:2; text-align:center; max-width:760px; padding:0 var(--pad); }
.mind-center .display{ font-size:clamp(44px,6vw,104px); }
.mind-tile{
  position:absolute; z-index:3; border-radius:24px; padding:1px; cursor:pointer;
  background:linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.05));
  box-shadow:0 20px 40px rgba(0,0,0,.5);
  transition:transform .7s var(--ease-out); will-change:transform;
}
.mind-tile:hover{ scale:1.05; }
.mind-tile-inner{
  border-radius:23px; overflow:hidden; position:relative;
  background:rgba(14,15,19,.82); backdrop-filter:blur(20px) saturate(1.25);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  width:100%; height:100%; padding:18px;
}
.mind-tile-inner:before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.7;
  background:radial-gradient(ellipse 90% 70% at 50% 110%, rgba(112,25,41,.55), rgba(112,25,41,0) 70%);
}
.mind-tile-inner svg{ width:26px; height:26px; color:var(--bordo-400); position:relative; z-index:1; }
.mind-tile-inner span{
  position:relative; z-index:1; font-size:11px; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--text);
}
.mind-tile-1{ left:8%; top:18%; width:150px; height:150px; }
.mind-tile-2{ left:16%; bottom:16%; width:120px; height:120px; }
.mind-tile-3{ right:9%; top:24%; width:168px; height:168px; }
.mind-tile-4{ right:18%; bottom:20%; width:110px; height:110px; }
.animate-float-anim{ animation:float-anim 3.4s ease-in-out infinite; }
.animate-float-anim-delayed{ animation:float-anim 3.8s ease-in-out infinite 1.4s; }
.animate-float-tilt{ animation:float-tilt 5s ease-in-out infinite; }
@keyframes float-anim{ 0%,100%{ transform:translateY(-14px); } 50%{ transform:translateY(0); } }
@keyframes float-tilt{ 0%,100%{ transform:translateY(-10px) rotate(-2deg); } 50%{ transform:translateY(10px) rotate(2deg); } }

/* ============================================================
   NÚCLEO RADIAL (cyber-noir) — pontos, linhas e cards conectados
   ============================================================ */
.nucleo-stage{ position:relative; width:min(960px,100%); height:640px; margin:0 auto; }
.nucleo-rings i{
  position:absolute; inset:0; border:1px solid rgba(202,57,76,.1); border-radius:50%;
  display:block;
}
.nucleo-rings i:nth-child(1){ scale:.8; animation:ring-pulse 4s ease-in-out infinite; }
.nucleo-rings i:nth-child(2){ scale:1.08; border-color:rgba(255,255,255,.05); }
@keyframes ring-pulse{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
.nucleo-core{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:256px; height:256px; border-radius:50%;
  border:1px solid rgba(202,57,76,.4); background:rgba(6,7,10,.8);
  backdrop-filter:blur(24px) saturate(1.25);
  display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:20;
  box-shadow:0 0 60px -18px rgba(173,43,64,.6);
}
.nucleo-core .spin-ring{
  position:absolute; inset:8px; border-radius:50%;
  border:1px solid rgba(202,57,76,.2); border-top-color:rgba(202,57,76,.6);
  animation:spin-slow 8s linear infinite;
}
.nucleo-core h3{
  font-family:var(--font-mid); font-weight:600; font-size:19px; letter-spacing:-.01em;
  color:var(--text); text-align:center; line-height:1.15; text-transform:uppercase;
}
.nucleo-core .big{
  font-family:var(--font-display); font-weight:700; font-size:52px; letter-spacing:-.015em; margin:6px 0 2px;
  background:linear-gradient(180deg in oklch, #F2F3F6, #E34D5B);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.nucleo-core small{ font-size:10px; text-transform:uppercase; letter-spacing:.22em; color:var(--bordo-400); font-weight:600; }
.nucleo-card{
  position:absolute; width:240px; border-radius:16px; padding:18px 20px; z-index:10;
  background:rgba(255,255,255,.04); backdrop-filter:blur(24px) saturate(1.25);
  border:1px solid rgba(255,255,255,.08); border-top-color:rgba(255,255,255,.14);
  box-shadow:0 8px 40px -16px rgba(31,6,10,.9);
  transition:transform .3s var(--ease-out), box-shadow .3s;
  display:flex; align-items:flex-start; gap:14px;
}
.nucleo-card:hover{ transform:scale(1.05); box-shadow:0 8px 40px -12px rgba(31,6,10,1), 0 0 32px -12px rgba(173,43,64,.45); }
.nucleo-card svg{ width:26px; height:26px; color:var(--bordo-500); flex-shrink:0; margin-top:2px; }
.nucleo-card h4{ font-size:14px; font-weight:600; letter-spacing:.02em; color:var(--text); line-height:1.25; text-transform:uppercase; }
.nucleo-card p{ font-size:10px; color:var(--text-muted); margin-top:4px; text-transform:uppercase; letter-spacing:.08em; }
.nucleo-card.edge-l{ border-left:4px solid var(--bordo-500); }
.nucleo-card.edge-r{ border-right:4px solid var(--bordo-500); text-align:right; flex-direction:row-reverse; }
.nucleo-card.edge-b{ border-bottom:4px solid var(--bordo-500); text-align:center; flex-direction:column; align-items:center; }
.nucleo-card.c1{ top:6%; left:6%; }
.nucleo-card.c2{ top:6%; right:6%; }
.nucleo-card.c3{ top:50%; left:-2%; transform:translateY(-50%); }
.nucleo-card.c3:hover{ transform:translateY(-50%) scale(1.05); }
.nucleo-card.c4{ top:50%; right:-2%; transform:translateY(-50%); }
.nucleo-card.c4:hover{ transform:translateY(-50%) scale(1.05); }
.nucleo-card.c5{ bottom:0; left:50%; transform:translateX(-50%); width:260px; }
.nucleo-card.c5:hover{ transform:translateX(-50%) scale(1.05); }
.nucleo-lines{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.nucleo-lines line{
  stroke:rgba(202,57,76,.25); stroke-width:1; stroke-dasharray:6 8;
  animation:dash-flow 2.6s linear infinite;
}
.nucleo-lines circle{ fill:var(--bordo-500); }
.nucleo-lines .np{ animation:pulse-dot 2.4s ease-in-out infinite; }
@keyframes dash-flow{ to{ stroke-dashoffset:-28; } }

/* ============================================================
   DASHBOARDS (finex intelligence grid) — SVGs com loop animado
   ============================================================ */
.dash-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.dash-grid .card-finex.tall{ grid-row:span 2; min-height:0; }
.chart-area-grad stop:first-child{ stop-color:#CA394C; stop-opacity:.22; }
.chart-area-grad stop:last-child{ stop-color:#CA394C; stop-opacity:0; }
.animate-draw{ stroke-dasharray:1000; stroke-dashoffset:1000; animation:draw-path-loop 6s cubic-bezier(.4,0,.2,1) infinite; animation-play-state:paused; }
.animate-width{ width:0; animation:width-grow-loop 6s cubic-bezier(.4,0,.2,1) infinite; animation-play-state:paused; }
.animate-fade-up{ opacity:0; animation:fade-in-up-loop 6s ease-out infinite; animation-play-state:paused; }
.animate-scale{ opacity:0; animation:scale-in-loop 6s cubic-bezier(.175,.885,.32,1.275) infinite; animation-play-state:paused; }
.in-view .animate-draw,.in-view .animate-width,.in-view .animate-fade-up,.in-view .animate-scale{ animation-play-state:running; }
@keyframes draw-path-loop{
  0%{ stroke-dashoffset:1000; opacity:0; } 5%{ opacity:1; }
  40%{ stroke-dashoffset:0; } 90%{ stroke-dashoffset:0; opacity:1; } 100%{ stroke-dashoffset:0; opacity:0; }
}
@keyframes width-grow-loop{
  0%{ width:0; opacity:1; } 40%{ width:var(--target-width); }
  90%{ width:var(--target-width); opacity:1; } 100%{ width:var(--target-width); opacity:0; }
}
@keyframes fade-in-up-loop{
  0%{ opacity:0; transform:translateY(10px); } 20%{ opacity:1; transform:translateY(0); }
  90%{ opacity:1; transform:translateY(0); } 100%{ opacity:0; }
}
@keyframes scale-in-loop{
  0%{ transform:scale(.8); opacity:0; } 20%{ transform:scale(1); opacity:1; }
  90%{ transform:scale(1); opacity:1; } 100%{ transform:scale(1); opacity:0; }
}
@keyframes spin-slow-reverse{ from{ transform:rotate(0deg); } to{ transform:rotate(-360deg); } }
.roi-chip{
  display:inline-block; padding:3px 9px; border-radius:6px; font-size:10px; font-weight:600;
  color:#FFFFFF;
  background:linear-gradient(180deg, #CA394C, #AD2B40);
  background:linear-gradient(180deg in oklch, #CA394C, #AD2B40);
  box-shadow:0 0 10px rgba(202,57,76,.5);
}
.asset-row{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.asset-row .nm{ width:110px; flex-shrink:0; font-size:13px; color:var(--text-soft); font-weight:500; }
.asset-row .bar-wrap{ height:10px; flex:1; border-radius:999px; background:rgba(255,255,255,.05); overflow:hidden; }
.asset-row .bar{ height:100%; border-radius:999px;
  background:linear-gradient(90deg, #701929, #CA394C);
  background:linear-gradient(90deg in oklch, #701929, #CA394C); }
.asset-row .val{ width:56px; flex-shrink:0; text-align:right; font-size:13px; color:var(--text); font-weight:500; }
.orbit-stat{ position:relative; display:grid; place-items:center; min-height:200px; }
.orbit-stat .sq1{
  position:absolute; width:128px; height:128px; border-radius:24px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.05);
  animation:spin-slow 25s linear infinite;
}
.orbit-stat .sq2{
  position:absolute; width:96px; height:96px; border-radius:16px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.05);
  animation:spin-slow-reverse 15s linear infinite;
}
.orbit-stat .core{
  position:relative; z-index:1; width:128px; height:128px; border-radius:16px;
  display:grid; place-items:center;
  background:linear-gradient(135deg, #CA394C, #701929);
  background:linear-gradient(135deg in oklch, #CA394C, #701929);
  box-shadow:0 12px 30px -10px rgba(173,43,64,.6);
}
.orbit-stat .core span{ font-family:var(--font-display); font-weight:700; font-size:34px; letter-spacing:-.01em; color:#FFFFFF; }

/* ============================================================
   ÍCONES — sprite grid (animations-gemini2)
   ============================================================ */
.icon-grid{ display:grid; grid-template-columns:repeat(8,1fr); gap:12px; }
.icon-card{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  padding:22px 8px; border-radius:12px; cursor:pointer;
  background:var(--bg-surface); border:1px solid var(--line);
  transition:.25s var(--ease-out);
}
.icon-card svg{
  width:24px; height:24px; color:var(--text); fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  transition:.25s var(--ease-out);
}
.icon-card span{ font-family:var(--font-mono); font-size:10px; color:var(--text-muted); transition:.25s; }
.icon-card:hover{ border-color:rgba(202,57,76,.35); transform:translateY(-3px); box-shadow:0 0 24px -10px rgba(173,43,64,.5); }
.icon-card:hover svg{ color:var(--bordo-400); transform:scale(1.12); }
.icon-card:hover span{ color:var(--text-soft); }
.icon-spec{ display:flex; gap:24px; flex-wrap:wrap; margin-top:34px; }
.ico{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
/* ícones do sprite fora de .ico/.icon-card também são traço, nunca preenchimento */
.spot-icon svg, .mind-tile-inner svg, .nucleo-card svg, .nucleo-core svg, .hd-item svg, .hd-brand svg{
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}

/* ============================================================
   ANIMAÇÕES — catálogo vivo
   ============================================================ */
.anim-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.anim-card{
  border-radius:14px; background:var(--bg-surface); border:1px solid var(--line);
  padding:26px 16px 18px; display:flex; flex-direction:column; align-items:center; gap:18px;
  min-height:170px; justify-content:space-between; transition:.3s;
  position:relative; overflow:hidden;
}
.anim-card:hover{ border-color:var(--line-strong); box-shadow:0 0 32px -14px rgba(173,43,64,.45); }
.anim-card .nm{ font-family:var(--font-mono); font-size:10px; color:var(--text-muted); letter-spacing:.06em; text-transform:uppercase; }
.anim-stage{ flex:1; display:grid; place-items:center; min-height:64px; }
/* spinner */
.a-spinner{ width:34px; height:34px; border-radius:50%; border:2px solid rgba(202,57,76,.2); border-top-color:var(--bordo-500); animation:spin-slow .9s linear infinite; }
/* dots */
.a-dots{ display:flex; gap:7px; }
.a-dots i{ width:9px; height:9px; border-radius:50%; background:var(--bordo-500); animation:dots-bounce 1.2s ease-in-out infinite; }
.a-dots i:nth-child(2){ animation-delay:.15s; }
.a-dots i:nth-child(3){ animation-delay:.3s; }
@keyframes dots-bounce{ 0%,100%{ transform:translateY(0); opacity:.4; } 50%{ transform:translateY(-9px); opacity:1; } }
/* radar */
.a-radar{ position:relative; width:40px; height:40px; }
.a-radar i{ position:absolute; inset:0; border-radius:50%; border:1px solid var(--bordo-500); animation:radar-pulse 2s var(--ease-out) infinite; }
.a-radar i:nth-child(2){ animation-delay:.6s; }
.a-radar:after{ content:""; position:absolute; inset:14px; border-radius:50%; background:var(--bordo-500); box-shadow:0 0 12px rgba(202,57,76,.7); }
@keyframes radar-pulse{ 0%{ transform:scale(.4); opacity:1; } 100%{ transform:scale(1.6); opacity:0; } }
/* barras */
.a-bars{ display:flex; gap:5px; align-items:flex-end; height:34px; }
.a-bars i{ width:6px; border-radius:3px; background:var(--bordo-500); animation:bars-eq 1s ease-in-out infinite; }
.a-bars i:nth-child(1){ height:40%; } .a-bars i:nth-child(2){ height:90%; animation-delay:.15s; }
.a-bars i:nth-child(3){ height:60%; animation-delay:.3s; } .a-bars i:nth-child(4){ height:80%; animation-delay:.45s; }
@keyframes bars-eq{ 0%,100%{ transform:scaleY(.5); } 50%{ transform:scaleY(1); } }
/* check draw */
.a-check svg{ width:40px; height:40px; }
.a-check .ring{ fill:none; stroke:rgba(78,201,131,.25); stroke-width:2; }
.a-check .mark{
  fill:none; stroke:var(--success); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:30; stroke-dashoffset:30; animation:check-draw 2.4s var(--ease-out) infinite;
}
@keyframes check-draw{ 0%{ stroke-dashoffset:30; } 35%,80%{ stroke-dashoffset:0; } 100%{ stroke-dashoffset:-30; } }
/* glow pulse */
.a-glow{ width:34px; height:34px; border-radius:10px;
  background:linear-gradient(135deg, #CA394C, #8E1F33);
  background:linear-gradient(135deg in oklch, #CA394C, #8E1F33);
  animation:pulse-glow 3s infinite; }
@keyframes pulse-glow{
  0%,100%{ box-shadow:0 0 15px rgba(202,57,76,.5); }
  50%{ box-shadow:0 0 30px rgba(202,57,76,.8), 0 0 50px rgba(227,77,91,.3); }
}
/* shimmer skeleton */
.a-skeleton{ width:100%; display:flex; flex-direction:column; gap:8px; }
.a-skeleton i{
  display:block; height:10px; border-radius:5px; background:var(--bg-elevated);
  position:relative; overflow:hidden;
}
.a-skeleton i:after{
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.07), rgba(255,255,255,0));
  animation:skeleton-sweep 1.6s linear infinite;
}
.a-skeleton i:nth-child(2){ width:70%; } .a-skeleton i:nth-child(3){ width:45%; }
@keyframes skeleton-sweep{ to{ transform:translateX(100%); } }
/* typing */
.a-typing{ font-family:var(--font-mono); font-size:12px; color:var(--text-soft); }
.a-typing:after{ content:"▌"; color:var(--bordo-400); animation:caret-blink 1s steps(1) infinite; }
@keyframes caret-blink{ 50%{ opacity:0; } }
/* orbita */
.a-orbit{ position:relative; width:44px; height:44px; }
.a-orbit:before{ content:""; position:absolute; inset:0; border-radius:50%; border:1px dashed rgba(202,57,76,.3); }
.a-orbit i{ position:absolute; top:-3px; left:50%; width:7px; height:7px; margin-left:-3.5px; border-radius:50%; background:var(--bordo-400); box-shadow:0 0 8px rgba(227,77,91,.7); transform-origin:50% 25px; animation:spin-slow 2.4s linear infinite; }
.easing-table{ margin-top:56px; }

/* ============================================================
   BIG STATS (north-form) — contadores gigantes
   ============================================================ */
.big-stats{ padding:150px 0; background:var(--bg-base); }
.stats-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.stat{ min-height:340px; padding:42px; background:var(--bg-base); transition:.4s; position:relative; overflow:hidden; }
.stat:hover{ background:var(--bg-surface); }
.stat:hover:before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 80% 60% at 50% 110%, rgba(112,25,41,.4), rgba(112,25,41,0) 70%); }
.stat:hover strong{ color:var(--bordo-400); }
.stat strong{
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:clamp(72px,10vw,170px); letter-spacing:-.015em; line-height:.8;
  color:var(--text); transition:.4s; position:relative;
}
.stat p{
  margin-top:44px; max-width:260px; font-size:12px; text-transform:uppercase;
  letter-spacing:.12em; line-height:1.6; color:var(--text-muted); position:relative;
}

/* ============================================================
   FOOTER (north-form) — palavra gigante no rodapé
   ============================================================ */
.footer{ padding:150px 0 0; overflow:hidden; background:var(--bg-void); position:relative; }
.footer .sec-atmo{
  background:radial-gradient(ellipse 70% 55% at 50% 115%, rgba(142,31,51,.5) 0%, rgba(58,10,20,.28) 40%, rgba(14,15,19,0) 72%);
}
.footer-main{ display:grid; grid-template-columns:1fr 1fr; gap:12vw; position:relative; z-index:1; }
.footer h2{ font-size:clamp(48px,7vw,115px); margin:18px 0 40px; }
.footer-email{
  font-size:clamp(20px,3vw,42px); border-bottom:1px solid var(--bordo-500);
  padding-bottom:10px; color:var(--text); transition:.25s;
  font-family:var(--font-display); letter-spacing:-.03em;
}
.footer-email:hover{ color:var(--bordo-300); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.form-submit{
  border:0; padding:14px 18px; border-radius:999px;
  color:#FFFFFF; text-transform:uppercase; font-size:11px; letter-spacing:.12em; font-weight:600;
  background:linear-gradient(175deg, #CA394C, #8E1F33);
  background:linear-gradient(175deg in oklch, #CA394C, #8E1F33);
  box-shadow:0 0 0 1px rgba(202,57,76,.55) inset, 0 1px 0 rgba(255,255,255,.2) inset, 0 6px 24px -6px rgba(173,43,64,.75);
  transition:.25s;
}
.form-submit:hover{ filter:brightness(1.1); transform:translateY(-1px); }
.footer-meta{
  margin-top:110px; display:flex; justify-content:space-between; align-items:end;
  padding-bottom:30px; font-size:11px; text-transform:uppercase; letter-spacing:.12em;
  color:var(--text-muted); position:relative; z-index:1;
}
.socials{ display:flex; gap:18px; }
.socials a{ transition:.2s; }
.socials a:hover{ color:var(--bordo-400); }
.footer-word{
  position:relative; z-index:1;
  font-size:clamp(84px,17vw,330px); white-space:nowrap;
  margin-left:0; margin-bottom:0; padding-bottom:40px; letter-spacing:-.02em;
}
.footer-word .slash{ color:var(--bordo-500); }
.footer-word img{ height:clamp(80px,16vw,300px); width:auto; display:block; }

/* ============================================================
   REVELAÇÕES DE SCROLL (finex .scroll-item / cogni .reveal)
   ============================================================ */
@keyframes fadeInUp{ 0%{ opacity:0; transform:translateY(30px); } 100%{ opacity:1; transform:translateY(0); } }
@keyframes blurIn{ 0%{ opacity:0; filter:blur(15px); transform:scale(.95); } 100%{ opacity:1; filter:blur(0); transform:scale(1); } }
.scroll-item{ animation-duration:.8s; animation-fill-mode:both; animation-play-state:paused; animation-timing-function:cubic-bezier(.25,.46,.45,.94); }
.scroll-item.in-view{ animation-play-state:running; }
.scroll-fade-up{ animation-name:fadeInUp; }
.scroll-blur-in{ animation-name:blurIn; }
.delay-100{ animation-delay:100ms; } .delay-200{ animation-delay:200ms; }
.delay-300{ animation-delay:300ms; } .delay-500{ animation-delay:500ms; }
.reveal{ opacity:0; transition:opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.reveal-up{ transform:translateY(2.5rem); }
.reveal-left{ transform:translateX(2.5rem); }
.reveal-right{ transform:translateX(-2.5rem); }
.reveal.is-visible{ opacity:1; transform:translate(0,0); }
.animate-marquee{ animation:marquee 25s linear infinite; }
@keyframes marquee{ 0%{ transform:translateX(0); } 100%{ transform:translateX(-50%); } }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:1100px){
  .icon-grid{ grid-template-columns:repeat(6,1fr); }
  .anim-grid{ grid-template-columns:repeat(3,1fr); }
  .dash-grid,.spot-grid,.bento-grid{ grid-template-columns:repeat(2,1fr); }
  .dash-grid .card-finex.tall{ grid-row:auto; }
}
@media (max-width:900px){
  .site-header{ left:12px; right:12px; grid-template-columns:1fr 1fr; }
  .nav{ display:none; }
  .header-cta{ grid-column:2; }
  .hero-topcopy{ display:none; }
  .hero-dash aside{ display:none; }
  .type-row{ grid-template-columns:1fr; gap:14px; }
  .swatch-grid,.rule-cards,.type-cards{ grid-template-columns:repeat(2,1fr); }
  .how-inner{ grid-template-columns:1fr; gap:36px; padding-top:80px; }
  .how-left{ display:none; }
  .how-mobile-header{ display:block; text-align:center; position:relative; z-index:2; padding:0 24px; }
  .how-right{ height:440px; max-width:520px; margin:0 auto; width:100%; }
  .footer-main{ grid-template-columns:1fr; gap:60px; }
  .nucleo-stage{ height:auto; display:flex; flex-direction:column; gap:14px; padding:0 4px; }
  .nucleo-core{ position:relative; top:auto; left:auto; transform:none; margin:0 auto 10px; }
  .nucleo-card{ position:static; width:100%; transform:none !important; }
  .nucleo-lines,.nucleo-rings{ display:none; }
  .mind-tile{ display:none; }
  .hero-orbits{ display:none; }
}
@media (max-width:640px){
  :root{ --pad:16px; }
  .site-header{ top:9px; height:54px; }
  .logo img{ height:22px; }
  .header-cta{ font-size:8px; }
  .hero-word{ font-size:21vw; }
  .hero-markers{ display:none; }
  .hero-metrics{ gap:18px; }
  .hero-metric-sep{ display:none; }
  .hd-cards{ grid-template-columns:1fr; }
  .hero-dash{ height:auto; }
  .swatch-grid,.rule-cards,.type-cards,.dash-grid,.spot-grid,.bento-grid{ grid-template-columns:1fr; }
  .ramp{ grid-template-columns:repeat(3,1fr); }
  .icon-grid{ grid-template-columns:repeat(3,1fr); }
  .anim-grid{ grid-template-columns:repeat(2,1fr); }
  .stats-grid{ grid-template-columns:1fr; }
  .stat{ min-height:240px; }
  .state-table{ grid-template-columns:90px 1fr; }
  .sec{ padding:100px 0; }
  .sec-title .line-mask:nth-child(n){ padding-left:0; }
  .cap-statement span:nth-child(n){ padding-left:0; }
  .form-row{ grid-template-columns:1fr; }
  .footer-meta{ flex-direction:column; align-items:flex-start; gap:24px; }
}
@media (prefers-reduced-motion: reduce){
  *,*:before,*:after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}


/* ============================================================
   SUPORTE DOS WRAPPERS REACT (tripi-ds) — aditivo, não altera o DS.
   Estado aberto forçado do tooltip: mesmo visual do :hover em [data-tip],
   usado por <Tooltip open> em documentação/previews.
   ============================================================ */
[data-tip].is-tip-open::after{
  content:attr(data-tip); position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%);
  background:var(--bg-elevated); color:var(--text); font-size:11px; font-weight:500; letter-spacing:.02em;
  padding:6px 11px; border-radius:8px; white-space:nowrap; z-index:60; pointer-events:none;
  border:1px solid var(--line); border-top-color:rgba(255,255,255,.1);
  box-shadow:0 0 24px -8px rgba(173,43,64,.4);
}
[data-tip].is-tip-open::before{
  content:""; position:absolute; bottom:calc(100% + 5px); left:50%; transform:translateX(-50%) rotate(45deg);
  width:9px; height:9px; background:var(--bg-elevated); border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  z-index:61; pointer-events:none;
}