/* =========================================================
   CENIX CORE — Design System (briefing §4) + layout do site
   Dark-first · Laranja #FF5326 · Space Grotesk / Inter / JetBrains Mono
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  --brand-50:#FFF1EC; --brand-100:#FFD9CC; --brand-200:#FFB399; --brand-300:#FF8C66;
  --brand-400:#FF6F42; --brand-500:#FF5326; --brand-600:#E6431B; --brand-700:#BF3512;
  --brand-800:#8C260C; --brand-900:#5C1807;

  --carbon-950:#050506; --carbon-900:#0A0A0B; --carbon-800:#121214; --carbon-700:#1A1A1E;
  --carbon-600:#26262C; --carbon-500:#3A3A42; --carbon-400:#6B6B76; --carbon-300:#9A9AA6;
  --carbon-200:#C9C9D1; --carbon-100:#EDEDF0; --carbon-50:#F7F7F8; --white:#FFFFFF;

  --amber:#FF8A3D; --signal-green:#22C55E; --signal-blue:#3B82F6; --signal-red:#EF4444; --signal-yellow:#EAB308;

  --border-subtle:rgba(255,255,255,.06);
  --border-default:rgba(255,255,255,.10);
  --border-strong:rgba(255,255,255,.18);
  --brand-glow:0 0 0 1px rgba(255,83,38,.35), 0 0 40px rgba(255,83,38,.25);
  --brand-glow-lg:0 0 80px rgba(255,83,38,.35), 0 0 160px rgba(255,83,38,.15);
  --glass:rgba(18,18,20,.72);
  --grid-line:rgba(255,255,255,.04);
  --gradient-brand:linear-gradient(135deg,#FF5326 0%,#FF8A3D 100%);
  --gradient-hero:radial-gradient(ellipse 60% 50% at 70% 20%, rgba(255,83,38,.22), transparent 60%);

  --font-display:"Space Grotesk",system-ui,sans-serif;
  --font-sans:"Inter",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;

  --radius-sm:6px; --radius-md:12px; --radius-lg:20px; --radius-full:999px;

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-fast:150ms; --dur-base:250ms; --dur-slow:600ms;

  --container:1280px;
  --gutter:24px;
  --nav-h:72px;

  /* semantic */
  --bg:var(--carbon-900);
  --bg-alt:var(--carbon-800);
  --surface:var(--carbon-700);
  --surface-2:var(--carbon-600);
  --text:var(--carbon-200);
  --text-strong:var(--white);
  --text-muted:var(--carbon-300);
  --text-faint:var(--carbon-400);
  --brand-text:var(--brand-300);
}
@media (min-width:768px){ :root{ --gutter:40px; } }
@media (min-width:1200px){ :root{ --gutter:64px; } }

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--nav-h) + 16px); }
body{
  margin:0; background:var(--bg); color:var(--text);
  font:400 16px/26px var(--font-sans);
  font-feature-settings:"ss01","cv11";
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
:focus-visible{ outline:2px solid var(--brand-500); outline-offset:3px; border-radius:var(--radius-sm); }
::selection{ background:rgba(255,83,38,.35); color:var(--white); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---------- Tipografia ---------- */
.display-xl,.display-lg,.display-md,.display-sm,.heading{ font-family:var(--font-display); color:var(--text-strong); }
.display-xl{ font-size:clamp(40px,7vw,72px); line-height:1.04; letter-spacing:-.03em; font-weight:700; }
.display-lg{ font-size:clamp(36px,5vw,56px); line-height:1.06; letter-spacing:-.025em; font-weight:700; }
.display-md{ font-size:clamp(30px,3.6vw,40px); line-height:1.15; letter-spacing:-.02em; font-weight:600; }
.display-sm{ font-size:28px; line-height:34px; letter-spacing:-.01em; font-weight:600; }
.heading{ font-size:20px; line-height:28px; font-weight:600; }
.body-lg{ font-size:18px; line-height:30px; }
.body-sm{ font-size:14px; line-height:22px; }
.mono{ font-family:var(--font-mono); }
.text-gradient{ background:var(--gradient-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
.measure{ max-width:60ch; }

/* Eyebrow: // 01 — SEÇÃO */
.eyebrow{
  display:inline-flex; align-items:flex-start; gap:12px; max-width:100%;
  font:500 12px/16px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--brand-text);
}
.eyebrow::before{ content:""; width:24px; height:1px; margin-top:8px; background:var(--brand-500); flex:none; }
.eyebrow .cursor{ display:inline-block; width:7px; height:13px; margin-top:1px; background:var(--brand-500); flex:none; animation:blink 1.1s steps(1) infinite; }
@media (max-width:639px){ .eyebrow .cursor{ display:none; } }
@keyframes blink{ 50%{ opacity:0; } }

/* ---------- Layout ---------- */
.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }
.section{ position:relative; padding:64px 0; }
.section--alt{ background:var(--bg-alt); }
.section--deep{ background:var(--carbon-950); }
@media (min-width:1024px){ .section{ padding:96px 0; } }
.section-head{ display:flex; flex-direction:column; gap:16px; margin-bottom:48px; }
.section-head .display-md{ max-width:20ch; }
.section-head p{ color:var(--text-muted); max-width:60ch; }
.section-head--center{ align-items:center; text-align:center; }
.section-head--center .display-md{ max-width:24ch; }
.grid{ display:grid; gap:24px; }
@media (min-width:768px){ .grid-2{ grid-template-columns:repeat(2,1fr); } .grid-4{ grid-template-columns:repeat(2,1fr); } .grid-3{ grid-template-columns:repeat(3,1fr);} }
@media (min-width:1024px){ .grid-4{ grid-template-columns:repeat(4,1fr); } }

/* Malha de fundo 48px */
.grid-bg{ position:relative; isolation:isolate; }
.grid-bg::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 100%);
}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:48px; padding:0 24px; border-radius:var(--radius-md);
  font:600 15px/1 var(--font-sans); white-space:nowrap;
  transition:transform var(--dur-fast) var(--ease-in-out), box-shadow var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}
.btn .ico{ width:18px; height:18px; transition:transform var(--dur-fast) var(--ease-in-out); }
.btn:hover .ico{ transform:translateX(3px); }
.btn-primary{ background:var(--gradient-brand); color:var(--white); box-shadow:0 0 0 1px rgba(255,83,38,.2); }
.btn-primary:hover{ box-shadow:var(--brand-glow); transform:translateY(-1px); }
.btn-primary:active{ transform:translateY(0); filter:brightness(.92); }
.btn-secondary{ background:transparent; color:var(--white); border:1px solid var(--border-strong); }
.btn-secondary:hover{ border-color:var(--brand-500); color:var(--brand-300); }
.btn-ghost{ height:auto; padding:0; border-radius:0; color:var(--brand-text); gap:8px; }
.btn-ghost:hover{ color:var(--brand-200); }
.btn-sm{ height:40px; padding:0 18px; font-size:14px; }
.btn-block{ width:100%; }

/* ---------- Tags / chips ---------- */
.tag{
  display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; border-radius:var(--radius-full);
  font:500 11px/1 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
  border:1px solid rgba(59,130,246,.4); color:var(--signal-blue); background:rgba(59,130,246,.06);
}
.tag--brand{ border-color:rgba(255,83,38,.4); color:var(--brand-300); background:rgba(255,83,38,.08); }
.tag--neutral{ border-color:var(--border-default); color:var(--text-muted); background:transparent; }
.tag--green{ border-color:rgba(34,197,94,.4); color:var(--signal-green); background:rgba(34,197,94,.06); }
.chip{
  display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 14px; border-radius:var(--radius-full);
  font:500 12px/1 var(--font-mono); letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-muted); border:1px solid var(--border-default); background:transparent; white-space:nowrap;
  transition:all var(--dur-fast) var(--ease-in-out);
}
.chip:hover{ border-color:var(--border-strong); color:var(--white); }
.chip[aria-pressed="true"]{ background:rgba(255,83,38,.12); border-color:var(--brand-500); color:var(--brand-300); }
.chip .count{ color:var(--text-faint); }
.chip[aria-pressed="true"] .count{ color:var(--brand-400); }

/* ---------- Cards ---------- */
.card{
  position:relative; background:var(--surface); border:1px solid var(--border-default); border-radius:var(--radius-md);
  padding:24px; transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base), border-color var(--dur-base);
}
.card:hover{ transform:translateY(-4px); border-color:var(--border-strong); box-shadow:var(--brand-glow); }
.icon-box{
  width:56px; height:56px; border-radius:var(--radius-md); display:grid; place-items:center; flex:none;
  background:var(--carbon-800); border:1px solid var(--border-default); color:var(--brand-400);
}
.icon-box .ico{ width:28px; height:28px; }
.icon-box--sm{ width:44px; height:44px; } .icon-box--sm .ico{ width:22px; height:22px; }

/* Card de sistema */
.sys-card{ display:flex; flex-direction:column; gap:16px; text-align:left; width:100%; min-height:100%; cursor:pointer; }
.sys-card__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.sys-card__tags{ display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
.sys-card h3{ margin-top:4px; }
.sys-card p{ color:var(--text-muted); font-size:14px; line-height:22px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.sys-card__foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:8px; }
.sys-card__cat{ flex:1; min-width:0; font:500 10px/14px var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); }
.sys-card__more{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; flex:none; color:var(--brand-text); font-size:14px; font-weight:500; }
.sys-card__more .ico{ width:16px; height:16px; transition:transform var(--dur-fast); }
.sys-card:hover .sys-card__more .ico{ transform:translateX(3px); }

/* Card de métrica */
.metric{ display:flex; flex-direction:column; gap:6px; }
.metric__num{ font:700 clamp(40px,4.5vw,60px)/1 var(--font-display); letter-spacing:-.02em; font-variant-numeric:tabular-nums; background:var(--gradient-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
.metric__num sup{ font-size:.5em; vertical-align:top; top:.1em; position:relative; }
.metric__label{ font:500 12px/16px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); }

/* ---------- Navbar ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50; height:var(--nav-h);
  background:var(--glass); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border-subtle);
  transition:height var(--dur-base) var(--ease-in-out), background var(--dur-base);
}
.nav.is-scrolled{ height:64px; background:rgba(10,10,11,.85); }
.nav .container{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.nav__logo{ display:flex; align-items:center; height:100%; }
.nav__logo img{ height:32px; width:auto; }
.nav__links{ display:none; gap:32px; }
.nav__links a{ font:500 14px/1 var(--font-sans); color:var(--text-muted); position:relative; padding:8px 0; transition:color var(--dur-fast); }
.nav__links a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--brand-500); transition:right var(--dur-base) var(--ease-out); }
.nav__links a:hover,.nav__links a.is-active{ color:var(--white); }
.nav__links a:hover::after,.nav__links a.is-active::after{ right:0; }
.nav__actions{ display:flex; align-items:center; gap:12px; }
.lang{ display:none; align-items:center; padding:3px; gap:2px; border:1px solid var(--border-default); border-radius:var(--radius-sm); background:var(--carbon-800); }
.lang button{ font:500 11px/1 var(--font-mono); letter-spacing:.06em; padding:7px 9px; border-radius:4px; color:var(--text-faint); transition:all var(--dur-fast); }
.lang button:hover{ color:var(--white); }
.lang button[aria-pressed="true"]{ background:var(--carbon-600); color:var(--white); }
.nav__cta{ display:inline-flex; height:36px; padding:0 14px; font-size:13px; }
@media (min-width:1024px){ .nav__cta{ height:40px; padding:0 18px; font-size:14px; } }
.nav__burger{ width:44px; height:44px; display:grid; place-items:center; border-radius:var(--radius-sm); border:1px solid var(--border-default); color:var(--white); }
.nav__burger .ico{ width:22px; height:22px; }
@media (min-width:1024px){
  .nav__links{ display:flex; }
  .lang{ display:inline-flex; }
  .nav__burger{ display:none; }
}

/* Menu mobile */
.mobile-menu{
  position:fixed; inset:0; z-index:60; background:var(--carbon-950); padding:calc(var(--nav-h) + 24px) var(--gutter) 40px;
  display:flex; flex-direction:column; gap:8px; transform:translateY(-8px); opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
.mobile-menu.is-open{ opacity:1; visibility:visible; transform:none; pointer-events:auto; transition-delay:0s; }
.mobile-menu__close{ position:absolute; top:14px; right:var(--gutter); width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--border-default); border-radius:var(--radius-sm); color:var(--white); }
.mobile-menu a.link{ font:600 28px/1.2 var(--font-display); color:var(--white); padding:14px 0; border-bottom:1px solid var(--border-subtle); display:flex; justify-content:space-between; align-items:center; }
.mobile-menu a.link .idx{ font:500 12px/1 var(--font-mono); color:var(--brand-text); letter-spacing:.08em; }
.mobile-menu .lang{ display:inline-flex; align-self:flex-start; margin-top:24px; }
.mobile-menu .btn{ margin-top:24px; }
.mobile-menu__foot{ margin-top:auto; font:400 12px/18px var(--font-mono); color:var(--text-faint); }

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center; padding:calc(var(--nav-h) + 56px) 0 64px; overflow:hidden;
  background:var(--carbon-900);
}
.hero::before{ content:""; position:absolute; inset:0; background:var(--gradient-hero); pointer-events:none; }
.hero__arcs{
  position:absolute; right:-18vw; top:50%; width:min(70vw,900px); transform:translateY(-50%); opacity:.06; pointer-events:none; color:var(--brand-500);
}
.hero__arcs path{ fill:none; stroke:currentColor; stroke-width:.8; stroke-dasharray:1400; stroke-dashoffset:0; animation:arcPulse 6s var(--ease-in-out) infinite; }
.hero__arcs path:nth-child(2){ animation-delay:.6s; } .hero__arcs path:nth-child(3){ animation-delay:1.2s; }
.hero__arcs path:nth-child(4){ animation-delay:1.8s; } .hero__arcs path:nth-child(5){ animation-delay:2.4s; }
@keyframes arcPulse{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
.hero .container{ position:relative; display:grid; grid-template-columns:minmax(0,1fr); gap:56px; align-items:center; }
.hero .container > *{ min-width:0; }
@media (min-width:1024px){ .hero .container{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:48px; } }
.hero__copy{ display:flex; flex-direction:column; gap:28px; }
.hero__copy .display-xl{ max-width:14ch; }
.hero__copy .body-lg{ color:var(--text-muted); max-width:56ch; }
.hero__ctas{ display:flex; flex-wrap:wrap; gap:12px; }
.hero__metrics{
  display:grid; grid-template-columns:repeat(2,1fr); gap:20px 24px; padding-top:28px; margin-top:8px; border-top:1px solid var(--border-subtle);
}
@media (min-width:640px){ .hero__metrics{ grid-template-columns:repeat(4,auto); justify-content:start; gap:24px 40px; } }
.hero__metrics .m{ display:flex; flex-direction:column; gap:4px; }
.hero__metrics .m b{ font:700 22px/1 var(--font-display); color:var(--white); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.hero__metrics .m span{ font:400 11px/16px var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); }

/* Mockup (fake UI de sistema, em perspectiva 3D + tilt com o mouse) */
.hero__visual{
  position:relative; perspective:1200px; --rx:6deg; --ry:-16deg; --mx:50%; --my:50%;
}
.hero__visual::before{ content:""; position:absolute; inset:12% 8%; background:radial-gradient(closest-side, rgba(255,83,38,.32), transparent); filter:blur(36px); z-index:0; }
.mock-stage{
  position:relative; z-index:1; transform-style:preserve-3d;
  transform:rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .6s var(--ease-out);
  will-change:transform;
}
.hero__visual.is-tilting .mock-stage{ transition:transform .12s linear; }
.hero__visual.is-intro .mock-stage{ animation:mockIntro 1.4s var(--ease-out) both; }
@keyframes mockIntro{ from{ transform:rotateX(18deg) rotateY(-28deg) translateZ(-120px); opacity:0; } to{ transform:rotateX(var(--rx)) rotateY(var(--ry)); opacity:1; } }
.mock{
  position:relative; background:var(--carbon-800); border:1px solid var(--border-default); border-radius:var(--radius-lg);
  box-shadow:0 60px 120px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.03) inset, 0 1px 0 rgba(255,255,255,.08) inset;
  overflow:hidden; font-family:var(--font-sans); transform-style:preserve-3d;
}
/* brilho que acompanha o mouse */
.mock::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:5;
  background:radial-gradient(circle 260px at var(--mx) var(--my), rgba(255,255,255,.07), transparent 70%);
  opacity:0; transition:opacity .4s;
}
.hero__visual.is-tilting .mock::after{ opacity:1; }
/* "espessura" da placa */
.mock-stage::before{
  content:""; position:absolute; inset:0; border-radius:var(--radius-lg); background:var(--carbon-950);
  transform:translateZ(-18px); box-shadow:0 0 0 1px rgba(255,255,255,.04);
}
/* camadas em profundidade */
.mock__kpis,.mock__chart,.mock__rows,.mock__title{ transform-style:preserve-3d; }
.mock__kpi{ transform:translateZ(14px); }
.mock__chart{ transform:translateZ(8px); }
.mock__float{ transform:translateZ(60px); }
@media (max-width:1023px){
  .hero__visual{ --rx:0deg; --ry:0deg; }
  .mock-stage::before{ display:none; }
}
.mock__bar{ height:38px; display:flex; align-items:center; gap:8px; padding:0 14px; border-bottom:1px solid var(--border-subtle); background:var(--carbon-700); }
.mock__bar i{ width:9px; height:9px; border-radius:50%; background:var(--carbon-500); }
.mock__bar i:first-child{ background:var(--brand-500); }
.mock__url{ margin-left:10px; flex:1; height:22px; border-radius:5px; background:var(--carbon-800); border:1px solid var(--border-subtle); display:flex; align-items:center; padding:0 10px; font:400 10px/1 var(--font-mono); color:var(--text-faint); }
.mock__body{ display:grid; grid-template-columns:52px minmax(0,1fr); min-height:340px; }
.mock__side{ border-right:1px solid var(--border-subtle); padding:14px 0; display:flex; flex-direction:column; align-items:center; gap:14px; }
.mock__side i{ width:22px; height:22px; border-radius:6px; background:var(--carbon-600); }
.mock__side i:first-child{ background:var(--brand-500); box-shadow:0 0 14px rgba(255,83,38,.6); }
.mock__main{ padding:16px; display:flex; flex-direction:column; gap:14px; }
.mock__title{ display:flex; justify-content:space-between; align-items:center; }
.mock__title b{ font:600 13px/1 var(--font-display); color:var(--white); }
.mock__title .tag{ height:20px; padding:0 8px; font-size:9px; }
.mock__kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.mock__kpi{ background:var(--carbon-700); border:1px solid var(--border-subtle); border-radius:8px; padding:10px 12px; }
.mock__kpi span{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font:500 8px/1 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); margin-bottom:6px; }
.mock__kpi b{ font:700 18px/1 var(--font-display); color:var(--white); font-variant-numeric:tabular-nums; }
.mock__kpi em{ font:500 9px/1 var(--font-mono); color:var(--signal-green); margin-left:6px; font-style:normal; }
.mock__chart{ display:flex; align-items:flex-end; gap:6px; height:84px; padding:10px 12px; background:var(--carbon-700); border:1px solid var(--border-subtle); border-radius:8px; }
.mock__chart i{ flex:1; border-radius:3px 3px 0 0; background:var(--carbon-500); height:var(--h); transform-origin:bottom; transform:scaleY(0); }
.hero__visual.is-intro .mock__chart i,.hero__visual.is-ready .mock__chart i{ animation:barIn 1.1s var(--ease-out) both; }
.mock__chart i:nth-child(odd){ background:var(--carbon-500); }
.mock__chart i.hot{ background:var(--gradient-brand); box-shadow:0 0 12px rgba(255,83,38,.4); }
.mock__chart i:nth-child(n){ animation-delay:calc(var(--i,0) * 70ms + 500ms); }
@keyframes barIn{ from{ transform:scaleY(0); } 60%{ transform:scaleY(1.08); } to{ transform:scaleY(1); } }
.mock__rows{ display:flex; flex-direction:column; gap:6px; }
.mock__row{ display:grid; grid-template-columns:14px minmax(0,1fr) 60px 56px; overflow:hidden; white-space:nowrap; align-items:center; gap:10px; height:26px; padding:0 10px; border-radius:6px; background:var(--carbon-700); border:1px solid var(--border-subtle); font:400 9px/1 var(--font-mono); color:var(--text-muted); }
.mock__row i{ width:6px; height:6px; border-radius:50%; background:var(--signal-green); }
.mock__row i.warn{ background:var(--signal-yellow); } .mock__row i.brand{ background:var(--brand-500); }
.mock__row > span{ overflow:hidden; text-overflow:ellipsis; }
.mock__row .st{ text-align:right; color:var(--text-faint); }
.mock__float{
  position:absolute; z-index:6; right:-10px; bottom:34px; background:var(--carbon-700); border:1px solid rgba(255,83,38,.4);
  border-radius:10px; padding:10px 14px; display:flex; align-items:center; gap:10px; box-shadow:var(--brand-glow);
  font:500 11px/1 var(--font-mono); color:var(--white); letter-spacing:.04em;
  animation:floatY 5s var(--ease-in-out) infinite;
}
.mock__float i{ width:8px; height:8px; border-radius:50%; background:var(--signal-green); box-shadow:0 0 10px var(--signal-green); }
@keyframes floatY{ 0%,100%{ transform:translateZ(60px) translateY(0); } 50%{ transform:translateZ(60px) translateY(-8px); } }
@media (max-width:1023px){ .mock__float{ right:8px; } }

/* ---------- Barra de integrações (marquee) ---------- */
.ticker{ border-block:1px solid var(--border-subtle); background:var(--carbon-950); padding:20px 0; overflow:hidden; }
.ticker__track{ display:flex; gap:56px; width:max-content; animation:ticker 40s linear infinite; }
.ticker:hover .ticker__track{ animation-play-state:paused; }
.ticker__item{ display:inline-flex; align-items:center; gap:14px; font:500 12px/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); white-space:nowrap; }
.ticker__item::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--brand-500); opacity:.7; }
@keyframes ticker{ to{ transform:translateX(-50%); } }

/* ---------- Quem somos ---------- */
.about{ display:grid; gap:40px; }
@media (min-width:1024px){ .about{ grid-template-columns:1fr 1fr; gap:64px; align-items:start; } }
.about__text{ display:flex; flex-direction:column; gap:20px; }
.about__text p{ color:var(--text-muted); }
.about__text .display-md{ max-width:16ch; }
.dna{ background:var(--surface); border:1px solid var(--border-default); border-radius:var(--radius-lg); padding:28px; position:relative; overflow:hidden; }
.dna::after{ content:""; position:absolute; right:-40px; top:-40px; width:200px; height:200px; background:url("../brand/symbol.svg") no-repeat center/contain; opacity:.05; }
.dna .eyebrow{ margin-bottom:14px; }
.dna h3{ font-size:22px; line-height:30px; margin-bottom:12px; }
.dna p{ color:var(--text-muted); font-size:15px; line-height:25px; }
.group{ margin-top:24px; display:flex; flex-direction:column; gap:12px; }
.group__label{ font:500 12px/16px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); }
.company{ display:flex; gap:14px; align-items:flex-start; padding:14px; border-radius:var(--radius-md); background:var(--carbon-800); border:1px solid var(--border-subtle); transition:border-color var(--dur-fast); }
.company:hover{ border-color:var(--border-strong); }
.company .icon-box{ width:40px; height:40px; background:var(--carbon-700); } .company .icon-box .ico{ width:20px; height:20px; }
.company b{ display:block; font:600 15px/22px var(--font-display); color:var(--white); }
.company span{ font-size:13px; line-height:20px; color:var(--text-muted); }
.metrics-bar{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:56px; padding-top:40px; border-top:1px solid var(--border-subtle); }
@media (max-width:640px){ .metrics-bar{ grid-template-columns:1fr; } }

/* ---------- Como entregamos (steps) ---------- */
.steps{ display:grid; gap:24px; position:relative; counter-reset:step; }
@media (min-width:768px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .steps{ grid-template-columns:repeat(4,1fr); } }
.step{ position:relative; padding:28px 24px; background:var(--surface); border:1px solid var(--border-default); border-radius:var(--radius-md); display:flex; flex-direction:column; gap:14px; }
.step__idx{ font:500 12px/1 var(--font-mono); letter-spacing:.08em; color:var(--brand-text); }
.step__idx::before{ content:"// "; color:var(--text-faint); }
.step h3{ font-size:20px; line-height:28px; }
.step p{ color:var(--text-muted); font-size:14px; line-height:22px; }
.step .icon-box{ color:var(--brand-400); }
@media (min-width:1024px){
  .step:not(:last-child)::after{
    content:""; position:absolute; top:52px; right:-24px; width:24px; height:1px;
    background-image:linear-gradient(90deg,var(--brand-500) 50%,transparent 50%); background-size:8px 1px; background-repeat:repeat-x;
    animation:dash 1.2s linear infinite;
  }
}
@keyframes dash{ to{ background-position:8px 0; } }

/* ---------- Sistemas (home) ---------- */
.filters{ display:flex; gap:8px; overflow-x:auto; padding-bottom:8px; margin-bottom:32px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.filters::-webkit-scrollbar{ display:none; }
.sys-grid{ display:grid; gap:20px; grid-template-columns:1fr; }
@media (min-width:640px){ .sys-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .sys-grid{ grid-template-columns:repeat(4,1fr); } }
.sys-more{ display:flex; justify-content:center; margin-top:40px; }
.sys-empty{ grid-column:1/-1; text-align:center; padding:48px 24px; color:var(--text-muted); border:1px dashed var(--border-default); border-radius:var(--radius-md); }

/* ---------- Integrações (diagrama) ---------- */
.integr{ display:grid; gap:40px; align-items:center; }
@media (min-width:1024px){ .integr{ grid-template-columns:.9fr 1.1fr; gap:64px; } }
.integr__text{ display:flex; flex-direction:column; gap:20px; }
.integr__text p{ color:var(--text-muted); }
.integr__list{ display:flex; flex-direction:column; gap:10px; margin-top:8px; }
.integr__list li{ display:flex; align-items:flex-start; gap:12px; padding:12px 14px; border-radius:var(--radius-md); background:var(--surface); border:1px solid var(--border-subtle); font-size:14px; line-height:22px; }
.integr__list li b{ color:var(--white); font-weight:600; display:block; font-family:var(--font-display); }
.integr__list li span{ color:var(--text-muted); }
.integr__list .dot{ width:8px; height:8px; border-radius:50%; background:var(--signal-blue); margin-top:8px; flex:none; box-shadow:0 0 10px rgba(59,130,246,.6); }
.diagram{ position:relative; width:100%; max-width:640px; margin:0 auto; }
.diagram svg{ width:100%; height:auto; overflow:visible; }
.diagram .link{ fill:none; stroke:var(--carbon-500); stroke-width:1.2; }
.diagram .flow{ fill:none; stroke:var(--brand-500); stroke-width:1.6; stroke-dasharray:6 26; stroke-linecap:round; animation:flow 2.4s linear infinite; opacity:.9; }
.diagram .flow:nth-of-type(2){ animation-delay:-.5s; } .diagram .flow:nth-of-type(3){ animation-delay:-1s; }
.diagram .flow:nth-of-type(4){ animation-delay:-1.5s; } .diagram .flow:nth-of-type(5){ animation-delay:-2s; }
@keyframes flow{ to{ stroke-dashoffset:-320; } }
.diagram .node{ fill:var(--carbon-700); stroke:var(--border-strong); stroke-width:1; }
.diagram .node-label{ font:600 12px var(--font-display); fill:var(--white); text-anchor:middle; }
.diagram .node-sub{ font:400 9px var(--font-mono); fill:var(--carbon-300); text-anchor:middle; letter-spacing:.06em; text-transform:uppercase; }
.diagram .core{ fill:var(--carbon-800); stroke:var(--brand-500); stroke-width:1.2; filter:drop-shadow(0 0 24px rgba(255,83,38,.45)); }
.diagram .ring{ fill:none; stroke:var(--brand-500); stroke-opacity:.25; stroke-width:1; animation:ring 3s var(--ease-out) infinite; transform-origin:center; transform-box:fill-box; }
.diagram .ring:nth-of-type(2){ animation-delay:1.5s; }
@keyframes ring{ from{ transform:scale(.7); opacity:.8; } to{ transform:scale(1.5); opacity:0; } }
.diagram .node-icon{ color:var(--brand-400); }

/* ---------- Por que a Cenix ---------- */
.why .card{ display:flex; flex-direction:column; gap:16px; }
.why .card h3{ font-size:20px; line-height:28px; }
.why .card p{ color:var(--text-muted); font-size:14px; line-height:22px; }
.why .card .idx{ position:absolute; top:22px; right:22px; font:500 12px/1 var(--font-mono); color:var(--text-faint); letter-spacing:.06em; }

/* ---------- Contato ---------- */
.contact{ display:grid; gap:40px; }
@media (min-width:1024px){ .contact{ grid-template-columns:.9fr 1.1fr; gap:64px; align-items:start; } }
.contact__info{ display:flex; flex-direction:column; gap:24px; }
.contact__info p{ color:var(--text-muted); }
.contact__list{ display:flex; flex-direction:column; gap:12px; }
.contact__list > a,.contact__list > div{ display:flex; gap:14px; align-items:center; padding:14px 16px; border-radius:var(--radius-md); background:var(--surface); border:1px solid var(--border-subtle); transition:border-color var(--dur-fast); }
.contact__list > a:hover{ border-color:var(--brand-500); }
.contact__list .icon-box{ width:40px; height:40px; } .contact__list .icon-box .ico{ width:20px; height:20px; }
.contact__list small{ display:block; font:500 10px/14px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); }
.contact__list b{ font-weight:500; color:var(--white); font-size:15px; }
.btn-wa{ background:#25D366; color:#062B14; }
.btn-wa:hover{ box-shadow:0 0 0 1px rgba(37,211,102,.4), 0 0 40px rgba(37,211,102,.3); transform:translateY(-1px); }
.map{ height:260px; border-radius:var(--radius-md); border:1px solid var(--border-default); background:
  radial-gradient(circle at 62% 48%, rgba(255,83,38,.5), transparent 18%),
  linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px), var(--carbon-800);
  background-size:auto,24px 24px,24px 24px,auto; position:relative; overflow:hidden; }
/* Google Maps incorporado — o fundo acima aparece enquanto carrega.
   Filtro "modo escuro": inverte as cores e gira o matiz de volta (água azul, verde da vegetação). */
.map__frame{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
  filter:invert(.92) hue-rotate(180deg) saturate(.75) brightness(.95) contrast(.95); }
/* selo no canto superior direito: não cobre o cartão do Google (sup. esq.) nem logo/termos (inferior) */
.map__label{ position:absolute; right:12px; top:12px; padding:6px 10px; border-radius:6px; pointer-events:none;
  background:rgba(10,10,11,.82); border:1px solid var(--border-subtle); backdrop-filter:blur(4px);
  font:500 10px/1 var(--font-mono); letter-spacing:.1em; color:var(--text-muted); }

.form{ background:var(--surface); border:1px solid var(--border-default); border-radius:var(--radius-lg); padding:28px; display:flex; flex-direction:column; gap:18px; }
@media (min-width:640px){ .form{ padding:36px; } }
.form__row{ display:grid; gap:18px; }
@media (min-width:640px){ .form__row{ grid-template-columns:1fr 1fr; } }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font:500 12px/16px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); }
.field label i{ color:var(--brand-400); font-style:normal; }
.field input,.field textarea{
  width:100%; height:48px; padding:0 14px; border-radius:var(--radius-sm); background:var(--carbon-600); border:1px solid var(--border-default);
  color:var(--white); font:400 15px/1.4 var(--font-sans); transition:border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.field textarea{ height:auto; min-height:128px; padding:12px 14px; resize:vertical; }
.field input::placeholder,.field textarea::placeholder{ color:var(--text-faint); }
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--brand-500); box-shadow:0 0 0 3px rgba(255,83,38,.18); }
.field.has-error input,.field.has-error textarea{ border-color:var(--signal-red); }
.field__err{ display:none; font-size:12px; color:var(--signal-red); }
.field.has-error .field__err{ display:block; }
.field .check{ display:flex; gap:12px; align-items:flex-start; font:400 13px/20px var(--font-sans); letter-spacing:0; text-transform:none; color:var(--text-muted); }
.check input{ width:18px; height:18px; margin-top:1px; accent-color:var(--brand-500); flex:none; }
.check a{ color:var(--brand-text); text-decoration:underline; text-underline-offset:3px; }
.form__foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }
.form__hint{ font:400 11px/16px var(--font-mono); color:var(--text-faint); letter-spacing:.04em; }
.form__success{ display:none; align-items:center; gap:14px; padding:16px; border-radius:var(--radius-md); background:rgba(34,197,94,.08); border:1px solid rgba(34,197,94,.35); color:var(--carbon-100); font-size:14px; }
.form__success .ico{ color:var(--signal-green); flex:none; }
.form.is-sent .form__success{ display:flex; }
.form.is-sent .form__fields{ display:none; }
/* erro de envio (servidor, rede, limite de envios) — preenchido pelo main.js */
.form__error{ display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border-radius:var(--radius-md); background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.4); color:var(--carbon-100); font-size:14px; line-height:1.5; }
.form__error[hidden]{ display:none; }
.form__error .ico{ color:var(--signal-red); flex:none; margin-top:1px; }
.form__error a{ color:var(--brand-text); text-decoration:underline; text-underline-offset:3px; }
.btn[disabled]{ opacity:.7; cursor:progress; }
.hp{ position:absolute; left:-9999px; opacity:0; height:0; width:0; }

/* ---------- Footer ---------- */
.footer{ background:var(--carbon-950); border-top:1px solid var(--border-subtle); padding:64px 0 28px; }
.footer__grid{ display:grid; gap:40px; }
@media (min-width:768px){ .footer__grid{ grid-template-columns:1.4fr 1fr 1fr 1fr; } }
.footer__brand img{ height:34px; width:auto; margin-bottom:18px; }
.footer__brand p{ color:var(--text-muted); font-size:14px; line-height:22px; max-width:34ch; }
.social{ display:flex; gap:10px; margin-top:20px; }
.social a{ width:40px; height:40px; display:grid; place-items:center; border-radius:var(--radius-sm); border:1px solid var(--border-default); color:var(--text-muted); transition:all var(--dur-fast); }
.social a:hover{ color:var(--white); border-color:var(--brand-500); box-shadow:var(--brand-glow); }
.social .ico{ width:18px; height:18px; }
.footer h4{ font:500 12px/16px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); margin-bottom:18px; }
.footer li{ margin-bottom:10px; }
.footer li a{ color:var(--text-muted); font-size:14px; transition:color var(--dur-fast); }
.footer li a:hover{ color:var(--brand-300); }
.footer__status{ margin-top:56px; padding-top:22px; border-top:1px solid var(--border-subtle); display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; font:400 11px/18px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); }
.footer__status .ok{ display:inline-flex; align-items:center; gap:8px; }
.footer__status .ok::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--signal-green); box-shadow:0 0 8px var(--signal-green); }

/* ---------- WhatsApp flutuante ---------- */
.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:40; width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff;
  display:grid; place-items:center; box-shadow:0 8px 30px rgba(37,211,102,.35); transition:transform var(--dur-fast) var(--ease-in-out), box-shadow var(--dur-fast);
}
.wa-float:hover{ transform:translateY(-3px) scale(1.04); box-shadow:0 12px 40px rgba(37,211,102,.5); }
.wa-float .ico{ width:28px; height:28px; }
.wa-float::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid rgba(37,211,102,.5); animation:ring 2.2s var(--ease-out) infinite; }

/* ---------- Drawer de sistema ---------- */
.drawer-backdrop{ position:fixed; inset:0; z-index:70; background:rgba(5,5,6,.7); backdrop-filter:blur(4px); opacity:0; visibility:hidden; transition:opacity var(--dur-base), visibility 0s linear var(--dur-base); }
.drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:80; width:min(480px,100%); background:var(--carbon-800); border-left:1px solid var(--border-default);
  transform:translateX(100%); transition:transform var(--dur-slow) var(--ease-out); display:flex; flex-direction:column; overflow:hidden;
}
body.drawer-open{ overflow:hidden; }
body.drawer-open .drawer-backdrop{ opacity:1; visibility:visible; transition-delay:0s; }
body.drawer-open .drawer{ transform:none; }
.drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border-subtle); }
.drawer__head .eyebrow{ font-size:11px; }
.drawer__close{ width:40px; height:40px; display:grid; place-items:center; border-radius:var(--radius-sm); border:1px solid var(--border-default); color:var(--white); }
.drawer__close:hover{ border-color:var(--brand-500); }
.drawer__body{ overflow-y:auto; padding:24px 20px 32px; display:flex; flex-direction:column; gap:22px; flex:1; }
@media (min-width:640px){ .drawer__body{ padding:28px 28px 40px; } }
.drawer__img{ position:relative; aspect-ratio:16/10; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--border-default); background:var(--carbon-700); }
.drawer__img img{ width:100%; height:100%; object-fit:cover; opacity:.9; filter:saturate(.85); }
.drawer__img::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 50%,rgba(18,18,20,.8)); }
.drawer__img .icon-box{ position:absolute; left:16px; bottom:16px; background:var(--carbon-800); }
.drawer__title{ display:flex; flex-direction:column; gap:10px; }
.drawer__title .display-sm{ font-size:26px; line-height:32px; }
.drawer__tags{ display:flex; flex-wrap:wrap; gap:6px; }
.drawer p{ color:var(--text-muted); font-size:15px; line-height:25px; }
.drawer h4{ font:500 12px/16px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); margin-bottom:12px; }
.drawer .bullets li{ display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--border-subtle); font-size:14px; line-height:22px; color:var(--text); }
.drawer .bullets .ico{ color:var(--brand-400); flex:none; margin-top:3px; width:16px; height:16px; }
.drawer__foot{ margin-top:auto; padding-top:8px; display:flex; flex-direction:column; gap:10px; }
.drawer__note{ font:400 11px/16px var(--font-mono); color:var(--text-faint); }

/* ---------- Página Sistemas ---------- */
.page-head{ padding:calc(var(--nav-h) + 64px) 0 40px; position:relative; overflow:hidden; }
.page-head::before{ content:""; position:absolute; inset:0; background:radial-gradient(ellipse 50% 60% at 80% 0%, rgba(255,83,38,.16), transparent 60%); pointer-events:none; }
.page-head .container{ position:relative; display:flex; flex-direction:column; gap:20px; }
.page-head .display-lg{ max-width:16ch; }
.page-head p{ color:var(--text-muted); max-width:60ch; }
.toolbar{ display:flex; flex-direction:column; gap:16px; margin:8px 0 32px; }
.search{ position:relative; max-width:520px; }
.search input{ width:100%; height:48px; padding:0 14px 0 44px; border-radius:var(--radius-sm); background:var(--carbon-600); border:1px solid var(--border-default); color:var(--white); font:400 15px/1 var(--font-sans); }
.search input:focus{ outline:none; border-color:var(--brand-500); box-shadow:0 0 0 3px rgba(255,83,38,.18); }
.search .ico{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--text-faint); pointer-events:none; }
.toolbar__row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.toolbar__label{ font:500 11px/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); margin-right:6px; }
.result-count{ font:400 12px/1 var(--font-mono); color:var(--text-faint); letter-spacing:.04em; margin-bottom:16px; }
.cta-band{ margin-top:64px; padding:40px; border-radius:var(--radius-lg); background:var(--surface); border:1px solid var(--border-default); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; position:relative; overflow:hidden; }
.cta-band::after{ content:""; position:absolute; right:-60px; top:50%; transform:translateY(-50%); width:260px; height:260px; background:url("../brand/symbol.svg") no-repeat center/contain; opacity:.05; }
.cta-band h3{ font-size:26px; line-height:32px; max-width:22ch; }
.cta-band p{ color:var(--text-muted); margin-top:8px; }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.08s; } .reveal[data-delay="2"]{ transition-delay:.16s; }
.reveal[data-delay="3"]{ transition-delay:.24s; } .reveal[data-delay="4"]{ transition-delay:.32s; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
  .mock-stage{ transform:none !important; animation:none !important; }
  .mock__chart i{ transform:none; }
}