/* =========================================================
   NITHOM EV — LP Carregadores para Condomínios
   Tokens Nithom (Figma): navy #031A3A + laranja #FF6700
   Termina (títulos) · Montserrat (texto) · JetBrains Mono (rótulos)
   Mesma linguagem visual da LP Eletroposto (botões, vidro, cards, ícones)
   ========================================================= */

:root {
  --navy-950: #02132f;
  --navy-900: #031a3a;
  --navy-850: #06183d;
  --navy-800: #071b38;
  --navy-700: #05264f;
  --navy-600: #123a62;

  --orange: #ff6700;
  --orange-hi: #ff8a2a;
  --orange-deep: #c15700;
  --orange-soft: #fff0e3;

  --green: #18d8b4;
  --cream: #f4f1e9;
  --steel: #e9edf2;
  --white: #ffffff;
  --text: #031a3a;
  --muted: #626b77;
  --muted-light: #a9b7cc;
  --line: rgba(3, 26, 58, .1);
  --line-light: rgba(255, 255, 255, .12);

  --f-display: 'termina', 'Unbounded', 'Montserrat', system-ui, sans-serif;
  --f-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --container: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 36px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --header-h: 76px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { font-family: var(--f-body); color: var(--text); background: var(--navy-900); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
ul, ol { list-style: none; }
em { font-style: normal; color: var(--orange); }
figure { margin: 0; }
::selection { background: var(--orange); color: #fff; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.mono { font-family: var(--f-mono); letter-spacing: .02em; }
.center { display: flex; justify-content: center; margin-top: clamp(40px, 6vw, 64px); }

/* ---------- Tipografia ---------- */
.h2 { font-family: var(--f-display); font-weight: 800; font-size: clamp(25px, 2.75vw, 40px); line-height: 1.1; letter-spacing: -.02em; text-transform: uppercase; color: var(--text); text-wrap: balance; }
.h2--light { color: #fff; }
.h2--xl { font-size: clamp(27px, 3.5vw, 52px); letter-spacing: -.025em; line-height: 1.05; }

.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); margin-bottom: 20px; }
.eyebrow svg { width: 15px; height: 15px; color: var(--orange); }
.eyebrow--mono { font-family: var(--f-mono); font-weight: 500; letter-spacing: .14em; color: var(--orange-deep); }

.sec-head { max-width: 860px; margin-bottom: clamp(36px, 4.5vw, 60px); }
.sec-head__lead { margin-top: 24px; font-size: clamp(15px, 1.2vw, 17px); color: var(--muted); max-width: 680px; }
.sec-head__lead p + p { margin-top: 12px; }
.sec-head__lead--light { color: var(--muted-light); }
.sec-head--center { text-align: center; margin-inline: auto; max-width: 1000px; }
.sec-head--center .sec-head__lead { margin-inline: auto; }
.sec-head--split { max-width: none; display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.sec-head--split .sec-head__lead { margin: 0; }

/* ---------- Seções ---------- */
.section { position: relative; padding-block: clamp(72px, 8.5vw, 124px); overflow: hidden; }
@supports (overflow: clip) { .section { overflow: clip; } }
.section--cream { background: var(--cream); }
.section--white { background: #fff; }
.section--navy { background: radial-gradient(120% 80% at 80% 0%, #0d3266 0%, var(--navy-900) 55%); color: #fff; }
.section--deep { background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-950) 100%); color: #fff; }

/* ---------- Botões ---------- */
.btn { --bg: var(--orange); --fg: #fff; --hover: var(--navy-900); position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 26px; border-radius: 999px; background: var(--bg); color: var(--fg); font-weight: 600; font-size: 15px; line-height: 1.2; white-space: nowrap; transition: transform .5s var(--ease), box-shadow .4s var(--ease), color .35s; will-change: transform; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hover); border-radius: inherit; transform: translateY(101%); transition: transform .55s var(--ease); }
.btn:hover::before { transform: none; }
.btn--primary { box-shadow: 0 10px 30px -8px rgba(255, 103, 0, .55); }
.btn--primary:hover { box-shadow: 0 16px 40px -10px rgba(255, 103, 0, .7); }
.btn--dark { --bg: var(--navy-900); --hover: var(--orange); }
.btn--navy { --bg: linear-gradient(180deg, #0a3170, #062254); --hover: #000; text-transform: uppercase; font-weight: 800; font-size: 14px; letter-spacing: .03em; box-shadow: 0 18px 34px -16px rgba(2, 19, 47, .7); }
.btn--ghost { --bg: rgba(255, 255, 255, .06); --hover: #fff; border: 1px solid rgba(255, 255, 255, .28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn--ghost:hover { color: var(--navy-900); }
.btn--ghost-dark { --bg: transparent; --hover: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); }
.btn--sm { padding: 11px 18px; font-size: 14px; }
.btn--lg { padding: 18px 30px; font-size: 16px; }
.btn--block { width: 100%; }
.btn__arrow, .btn__icon { width: 18px; height: 18px; flex: none; }
.btn__arrow { transition: transform .45s var(--ease); }
.btn:hover .btn__arrow { transform: translate(3px, -3px) rotate(45deg); }

.icon-btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .22); color: #fff; transition: background .3s, color .3s, transform .4s var(--ease); }
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn:hover { background: #fff; color: var(--navy-900); transform: rotate(-8deg) scale(1.05); }

.pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.pill--glass { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); color: #fff; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); flex: none; display: inline-block; animation: pulse 2s infinite; }
.pulse-dot--green { background: var(--green); animation-name: pulse-g; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 103, 0, .6); } 70%, 100% { box-shadow: 0 0 0 10px rgba(255, 103, 0, 0); } }
@keyframes pulse-g { 0% { box-shadow: 0 0 0 0 rgba(24, 216, 180, .6); } 70%, 100% { box-shadow: 0 0 0 10px rgba(24, 216, 180, 0); } }
@keyframes ring { from { transform: scale(.6); opacity: 1; } to { transform: scale(3); opacity: 0; } }

.ev-badge { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 103, 0, .14); border: 1px solid rgba(255, 103, 0, .3); color: var(--orange-hi); flex: none; }
.ev-badge svg { width: 20px; height: 20px; }
.ev-badge--sm { width: 34px; height: 34px; border-radius: 10px; }
.ev-badge--sm svg { width: 17px; height: 17px; }
.ev-badge--green { background: rgba(24, 216, 180, .15); border-color: rgba(24, 216, 180, .35); color: var(--green); }
.ev-badge--orange { background: var(--orange); border-color: var(--orange); color: #fff; }

.logo { position: relative; display: block; width: 150px; aspect-ratio: 982.7 / 326.7; flex: none; }
.logo img { width: 100%; height: 100%; }
.logo--lg { width: 200px; }
.logo--lg 
/* ---------- Cursor: seta padrão com traçado laranja Nithom ---------- */
html, body { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M4 3v19l5-4.5 3.6 7.9 3.4-1.5-3.5-7.7h6.8z' fill='%23031a3a' stroke='%23ff6700' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") 4 3, auto; }
a, button, label, [role="tab"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M4 3v19l5-4.5 3.6 7.9 3.4-1.5-3.5-7.7h6.8z' fill='%23ff6700' stroke='%23ffffff' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") 4 3, pointer; }
input[type="text"] { cursor: text; }
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 120; pointer-events: none; }
.progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--orange-deep), var(--orange)); transform-origin: left; transform: scaleX(0); }

/* ---------- Cabeçalho ---------- */
.header { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h); transition: transform .6s var(--ease), background .4s, border-color .4s, height .4s; border-bottom: 1px solid transparent; }
.header.is-scrolled { background: rgba(3, 26, 58, .72); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-color: rgba(255, 255, 255, .08); --header-h: 68px; }
.header.is-hidden { transform: translateY(-100%); }
.header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav { display: flex; gap: 4px; padding: 6px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.nav__link { position: relative; padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .82); transition: color .3s, background .3s; }
.nav__link:hover, .nav__link.is-active { color: #fff; background: rgba(255, 255, 255, .1); }
.nav__link.is-active::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--orange); }
.header__actions { display: flex; align-items: center; gap: 10px; }
.burger { display: none; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); position: relative; z-index: 2; }
.burger span { position: absolute; left: 14px; right: 14px; height: 2px; border-radius: 2px; background: #fff; transition: transform .5s var(--ease), top .5s var(--ease); }
.burger span:first-child { top: 18px; }
.burger span:last-child { top: 26px; }
.menu-open .burger span:first-child { top: 22px; transform: rotate(45deg); }
.menu-open .burger span:last-child { top: 22px; transform: rotate(-45deg); }

.menu { position: fixed; inset: 0; z-index: 90; background: var(--navy-950); padding: calc(var(--header-h) + 24px) var(--gutter) calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; justify-content: space-between; gap: 24px; overflow-y: auto; clip-path: circle(0% at calc(100% - 44px) 38px); transition: clip-path .8s var(--ease-io); visibility: hidden; }
.menu-open .menu { clip-path: circle(150% at calc(100% - 44px) 38px); visibility: visible; }
.menu__nav { display: flex; flex-direction: column; }
.menu__nav a { display: flex; align-items: baseline; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line-light); font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(20px, 6.4vw, 34px); color: #fff; opacity: 0; transform: translateY(30px); transition: opacity .5s, transform .7s var(--ease); }
.menu__nav a small { font-size: 11px; color: var(--orange); font-weight: 400; }
.menu-open .menu__nav a { opacity: 1; transform: none; }
.menu-open .menu__nav a:nth-child(2) { transition-delay: .04s; } .menu-open .menu__nav a:nth-child(3) { transition-delay: .08s; } .menu-open .menu__nav a:nth-child(4) { transition-delay: .12s; } .menu-open .menu__nav a:nth-child(5) { transition-delay: .16s; } .menu-open .menu__nav a:nth-child(6) { transition-delay: .2s; } .menu-open .menu__nav a:nth-child(7) { transition-delay: .24s; }
.menu__foot { display: grid; gap: 10px; }
.menu-open { overflow: hidden; }

/* ---------- Revelações ---------- */
.js .reveal { opacity: 0; transform: translateY(36px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.is-in { opacity: 1; transform: none; }
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .24em 0 .08em; margin: -.24em 0 -.08em; } /* folga em cima para os acentos das maiúsculas (Õ, Ê, É) não serem cortados */
.split .w > span { display: inline-block; }
.js .split .w > span { transform: translateY(110%) rotate(4deg); transform-origin: left bottom; transition: transform 1.1s var(--ease); transition-delay: calc(var(--i) * 45ms + var(--d, 0s)); }
.js .split.is-in .w > span { transform: none; }

/* luz que segue o ponteiro nos cards */
.spot::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 103, 0, .14), transparent 45%); opacity: 0; transition: opacity .4s; }
.spot:hover::after { opacity: 1; }
.spot--dark::after { background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 103, 0, .22), transparent 45%); }

/* =========================================================
   BLOCO 01 · HERO
   ========================================================= */
.hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; overflow: hidden; isolation: isolate; padding-top: calc(var(--header-h) + 64px); }
@supports (min-height: 100svh) { .hero { min-height: 100svh; } }
.hero__media { position: absolute; inset: 0; z-index: -3; will-change: transform; } /* sem sobra: o parallax desce a foto mais devagar que a página, então o topo nunca aparece vazio */
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 12% 50%; filter: brightness(1.12) saturate(1.2) contrast(1.05); animation: hero-in 2.4s var(--ease) .2s both; }
@keyframes hero-in { from { transform: scale(1.12); filter: brightness(.45) saturate(1); } }
.hero__shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(2, 19, 47, .8) 0%, rgba(2, 19, 47, .54) 34%, rgba(3, 26, 58, .14) 62%, rgba(3, 26, 58, 0) 100%), linear-gradient(0deg, rgba(2, 19, 47, .62) 0%, rgba(2, 19, 47, 0) 28%), linear-gradient(180deg, rgba(2, 19, 47, .5) 0%, rgba(2, 19, 47, 0) 16%); }
.hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: center; padding-bottom: 36px; }
.hero__content { max-width: 800px; }
.hero__title { font-family: var(--f-display); font-weight: 800; font-size: clamp(28px, 3.4vw, 52px); line-height: 1.05; letter-spacing: -.025em; text-transform: uppercase; margin: 24px 0 22px; max-width: 760px; color: #fff; text-wrap: balance; }
.hero__lead { max-width: 560px; font-size: clamp(16px, 1.35vw, 18.5px); color: rgba(255, 255, 255, .9); text-shadow: 0 2px 14px rgba(2, 19, 47, .6); line-height: 1.6; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* painel ao vivo */
.hud { position: relative; isolation: isolate; overflow: hidden; padding: 20px; border-radius: 24px; background: linear-gradient(165deg, rgba(14, 40, 80, .82), rgba(2, 19, 47, .88)); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .1); transform-style: preserve-3d; transition: transform .25s linear, box-shadow .5s var(--ease); }
.js .hud.reveal { transition: opacity 1s var(--ease), transform 1.1s var(--ease), box-shadow .5s var(--ease); }
.hud::before { content: ""; position: absolute; top: 0; left: 28px; right: 28px; height: 1px; background: linear-gradient(90deg, transparent, var(--orange), transparent); }
.hud__glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(320px circle at var(--mx, 70%) var(--my, 0%), rgba(255, 103, 0, .22), transparent 60%); pointer-events: none; }
.hud:hover { box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 103, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .1); }
.hud__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.hud__id { display: inline-flex; align-items: center; gap: 10px; }
.hud__id b { display: block; font-size: 14px; line-height: 1.2; }
.hud__id small { display: block; font-size: 10px; color: var(--muted-light); text-transform: uppercase; }
.hud__live { padding: 4px 9px; border-radius: 999px; background: rgba(24, 216, 180, .12); border: 1px solid rgba(24, 216, 180, .3); color: var(--green); text-transform: uppercase; font-size: 9.5px; letter-spacing: .06em; }
.hud__load { margin-top: 16px; padding: 12px; border-radius: 14px; background: rgba(2, 19, 47, .55); border: 1px solid rgba(255, 255, 255, .07); }
.hud__load-head { display: flex; justify-content: space-between; font-size: 10px; text-transform: uppercase; color: var(--muted-light); }
.hud__load-head b { color: #fff; font-size: 13px; font-variant-numeric: tabular-nums; }
.hud__bar { position: relative; display: flex; gap: 3px; height: 14px; margin: 10px 0 8px; padding: 2px; border-radius: 8px; background: rgba(255, 255, 255, .06); }
.hud__seg { height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--orange-hi), var(--orange)); box-shadow: 0 0 10px rgba(255, 103, 0, .5); transition: width .9s var(--ease); min-width: 0; }
.hud__seg:nth-child(odd) { background: linear-gradient(90deg, #ffb35c, var(--orange-hi)); }
.hud__limit { position: absolute; right: 2px; top: -5px; bottom: -5px; width: 2px; border-radius: 2px; background: rgba(255, 255, 255, .75); }
.hud__balance { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--green); transition: color .3s; }
.hud__balance span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud__balance.is-busy { color: var(--orange-hi); }
.hud__balance-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: .25; } }
.hud__spots { display: grid; gap: 6px; margin-top: 12px; }
.hud__spot { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .07); transition: background .4s, border-color .4s; }
.hud__spot.is-new { animation: spotIn .8s var(--ease); border-color: rgba(255, 103, 0, .5); background: rgba(255, 103, 0, .1); }
@keyframes spotIn { from { opacity: 0; transform: translateY(-8px) scale(.97); } }
.hud__spot-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(255, 255, 255, .06); color: var(--muted-light); }
.hud__spot-ico svg { width: 16px; height: 16px; }
.hud__spot[data-state="charging"] .hud__spot-ico { background: rgba(255, 103, 0, .16); color: var(--orange-hi); }
.hud__spot[data-state="done"] .hud__spot-ico { background: rgba(24, 216, 180, .14); color: var(--green); }
.hud__spot-name { font-size: 12.5px; font-weight: 700; line-height: 1.2; }
.hud__spot-sub { display: block; font-size: 10px; color: var(--muted-light); font-family: var(--f-mono); }
.hud__spot-kw { text-align: right; font-family: var(--f-mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.hud__spot-kw small { display: block; font-size: 9px; color: var(--muted-light); text-transform: uppercase; }
.hud__spot[data-state="charging"] .hud__spot-kw b { color: var(--orange-hi); }
.hud__spot[data-state="done"] .hud__spot-kw b { color: var(--green); }
.hud__foot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.hud__foot > div { padding: 9px 12px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .07); }
.hud__foot > div > span { display: block; font-size: 9.5px; text-transform: uppercase; color: var(--muted-light); }
.hud__foot b { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-variant-numeric: tabular-nums; }
.hud__foot b.ok { color: var(--green); }
.hud__foot b svg { width: 13px; height: 13px; }
.hud__cta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 103, 0, .12); border: 1px solid rgba(255, 103, 0, .3); color: #fff; font-size: 13px; font-weight: 600; transition: background .35s, border-color .35s; }
.hud__cta svg { width: 16px; height: 16px; color: var(--orange-hi); transition: transform .45s var(--ease); }
.hud__cta:hover { background: var(--orange); border-color: var(--orange); }
.hud__cta:hover svg { color: #fff; transform: rotate(45deg); }

.hero__foot { padding-bottom: calc(40px + clamp(120px, 12vw, 170px) / 2); }
.feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.feat { position: relative; display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 20px; background: linear-gradient(140deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .14); overflow: hidden; isolation: isolate; }
.js .feat.reveal { transition: opacity 1s var(--ease), transform 1.1s var(--ease), border-color .4s, box-shadow .5s var(--ease); }
.feat::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(200px circle at var(--mx, 20%) var(--my, 50%), rgba(255, 103, 0, .28), transparent 65%); opacity: 0; transition: opacity .4s; }
.feat:hover { border-color: rgba(255, 103, 0, .5); box-shadow: 0 26px 50px -24px rgba(255, 103, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .18); }
.js .feat.reveal.is-in:hover { transform: translateY(-4px); }
.feat:hover::before { opacity: 1; }
.feat__icon { width: 50px; height: 50px; flex: none; border-radius: 15px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, var(--orange-hi), var(--orange-deep)); box-shadow: 0 10px 22px -8px rgba(255, 103, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .35); transition: transform .6s var(--spring); }
.feat__icon svg { width: 24px; height: 24px; }
.feat:hover .feat__icon { transform: rotate(-10deg) scale(1.08); }
.feat b { display: block; font-size: 15px; font-weight: 700; color: #fff; line-height: 1.25; }
.feat span:not(.feat__icon) { display: block; font-size: 13px; color: rgba(255, 255, 255, .7); }

/* faixa */
.tape { --tape-h: clamp(120px, 12vw, 170px); position: relative; z-index: 2; height: var(--tape-h); margin-top: calc(var(--tape-h) / -2); margin-bottom: -1px; overflow: hidden; overflow: clip visible; background: linear-gradient(180deg, transparent 50%, var(--cream) 50%); pointer-events: none; } /* corta só nas laterais: a sombra da faixa azul não fica recortada embaixo */
.tape__band { pointer-events: auto; position: absolute; left: -5%; right: -5%; top: 50%; padding: clamp(12px, 1.3vw, 18px) 0; }
.tape__band--front { background: var(--orange); color: var(--navy-950); transform: translateY(-50%) rotate(-2.2deg); z-index: 2; }
.tape__band--back { background: linear-gradient(90deg, #0b3166, #134a96 50%, #0b3166); color: #fff; transform: translateY(-50%) rotate(2.2deg); border-block: 1px solid rgba(255, 255, 255, .08); z-index: 3; box-shadow: 0 0 34px -6px rgba(2, 19, 47, .55); } /* faixa azul por cima da laranja */
.tape__track { display: flex; width: max-content; will-change: transform; }
.tape__group { display: flex; align-items: center; flex: none; }
.tape__item { display: inline-flex; align-items: center; gap: clamp(18px, 2vw, 30px); padding-right: clamp(18px, 2vw, 30px); font-family: var(--f-display); font-weight: 800; font-size: clamp(16px, 2vw, 28px); letter-spacing: -.01em; text-transform: uppercase; white-space: nowrap; transition: color .35s, opacity .35s; }
.tape__bolt { display: grid; place-items: center; width: clamp(28px, 2.6vw, 38px); height: clamp(28px, 2.6vw, 38px); border-radius: 50%; flex: none; transition: transform .7s var(--spring), background .35s; }
.tape__bolt svg { width: 52%; height: 52%; }
.tape__band--front .tape__bolt { background: var(--navy-950); color: var(--orange); }
.tape__band--back .tape__bolt { background: var(--orange); color: #fff; }
.tape__band--back .tape__item { color: #fff; }
.tape__band:hover .tape__item { opacity: .45; }
.tape__band .tape__item:hover { opacity: 1; }
.tape__band--front .tape__item:hover { color: #fff; }
.tape__band--back .tape__item:hover { color: var(--orange-hi); }
.tape__item:hover .tape__bolt { transform: rotate(200deg) scale(1.15); }

/* =========================================================
   BLOCO 02 · BENTO
   ========================================================= */
.why { padding-top: clamp(56px, 6vw, 90px); }
.why__watermark { position: absolute; right: -6%; top: 4%; width: min(46vw, 620px); opacity: .55; pointer-events: none; }
.bento { position: relative; display: grid; grid-template-columns: 1.05fr 1fr 1fr; grid-template-rows: auto auto; gap: 18px; }
.bcard { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; padding: 14px 14px 28px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -45px rgba(3, 26, 58, .35); transition: transform .6s var(--ease), box-shadow .6s var(--ease), border-color .4s; }
.js .bcard.reveal { transition: opacity 1s var(--ease), transform 1.1s var(--ease), box-shadow .6s var(--ease), border-color .4s; }
.bcard:hover, .js .bcard.reveal.is-in:hover { transform: translateY(-6px); }
.bcard:hover { box-shadow: 0 40px 70px -40px rgba(3, 26, 58, .45); border-color: rgba(255, 103, 0, .4); }
.bcard > * { position: relative; z-index: 1; }
.bcard__stage { height: 200px; border-radius: 20px; display: grid; place-items: center; background: radial-gradient(70% 80% at 50% 40%, #fff6ee 0%, #ffe9d6 100%); overflow: hidden; position: relative; }
.bcard__stage::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 103, 0, .2) 1px, transparent 1.4px); background-size: 16px 16px; mask-image: radial-gradient(circle at 50% 50%, #000, transparent 75%); -webkit-mask-image: radial-gradient(circle at 50% 50%, #000, transparent 75%); }
.bcard__num { margin: 22px 16px 0; font-size: 12px; color: var(--orange-deep); }
.bcard h3 { margin: 8px 16px 10px; font-family: var(--f-display); font-weight: 700; font-size: clamp(18px, 1.45vw, 22px); line-height: 1.14; letter-spacing: -.02em; color: var(--text); text-wrap: balance; }
.bcard p { margin: 0 16px; color: var(--muted); font-size: 15px; }

/* 02 · Comodidade: cena animada da garagem do condomínio */
.bcard--home { background: var(--navy-900); border-color: transparent; }
.bcard--home h3 { color: #fff; font-size: clamp(19px, 1.65vw, 25px); }
.bcard--home p { color: var(--muted-light); }
.bcard--home .bcard__num { color: var(--orange-hi); }
.bcard__stage--home { flex: 1; height: auto; min-height: 340px; align-items: end; background: radial-gradient(80% 70% at 70% 20%, #154a8f 0%, #0a2d5e 45%, #06224b 100%); }
.bcard__stage--home::before { background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1.4px); }
.ill--home { width: 100%; max-width: 340px; height: auto; margin: 0 auto; }
.bcard--home:hover .ill--home { transform: scale(1.03); }
.home-chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease), transform .8s var(--spring); }
.home-chip--a { top: 16px; left: 16px; transition-delay: 2s; }
.home-chip--b { top: 54px; left: 16px; font-size: 10px; color: var(--muted-light); transition-delay: 2.3s; }
.is-in .home-chip { opacity: 1; transform: none; }
.hm-sky circle { fill: rgba(255, 255, 255, .55); animation: blink 3s ease-in-out infinite; }
.hm-sky circle:nth-child(2) { animation-delay: .8s; } .hm-sky circle:nth-child(3) { animation-delay: 1.6s; } .hm-sky circle:nth-child(4) { animation-delay: 2.2s; }
.hm-bld__body { fill: #0f3a73; stroke: rgba(255, 255, 255, .14); stroke-width: 1.2; }
.hm-wins rect { fill: rgba(255, 255, 255, .08); }
.is-in .hm-wins rect { animation: hmWin .6s var(--ease) forwards; animation-delay: calc(var(--w) * 110ms + .3s); }
@keyframes hmWin { to { fill: #ffb35c; } }
.hm-wins rect:nth-child(3n) { animation-name: none; }
.hm-roof { fill: #1b4c8c; }
.hm-pillar { fill: #123f7a; }
.hm-ground { stroke: rgba(255, 255, 255, .28); stroke-width: 1.5; stroke-dasharray: 3 5; }
.hm-lane { stroke: rgba(255, 179, 92, .5); stroke-width: 2; stroke-linecap: round; }
.hm-charger__body { fill: #f4f6fa; }
.hm-charger__screen { fill: var(--navy-900); }
.hm-charger__bolt { fill: var(--orange); }
.is-in .hm-charger__screen { animation: hmScreen 2.4s ease-in-out 2s infinite; }
@keyframes hmScreen { 50% { fill: #0b4f43; } }
.hm-cable { fill: none; stroke: #e9edf2; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 60; stroke-dashoffset: 60; }
.is-in .hm-cable { animation: hmDraw .7s var(--ease) 1.5s forwards; }
@keyframes hmDraw { to { stroke-dashoffset: 0; } }
.hm-flow { fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 8 60; stroke-dashoffset: 68; opacity: 0; filter: drop-shadow(0 0 4px rgba(255, 103, 0, .9)); }
.is-in .hm-flow { opacity: 1; animation: hmFlow 1.2s linear 2.2s infinite; }
.bcard--home:hover .hm-flow { animation-duration: .6s; }
@keyframes hmFlow { to { stroke-dashoffset: 0; } }
.hm-car { transform: translateX(-210px); }
.is-in .hm-car { animation: hmDrive 1.5s cubic-bezier(.2, .9, .3, 1) .3s forwards; }
@keyframes hmDrive { 0% { transform: translateX(-210px); } 85% { transform: translateX(3px); } 100% { transform: none; } }
.bcard--home:hover .hm-car { animation: hmBounce .6s var(--ease); transform: none; }
@keyframes hmBounce { 40% { transform: translateY(-3px); } }
.hm-car__body { fill: #eef2f8; }
.hm-car__glass { fill: #0d2f5c; }
.hm-car__light { fill: var(--orange-hi); filter: drop-shadow(0 0 4px rgba(255, 138, 42, .9)); }
.hm-car__wheel { fill: #05162f; stroke: #c9d2df; stroke-width: 2; }
.hm-car__hub { fill: #c9d2df; }
.hm-batt { opacity: 0; transform: translateY(10px); transform-box: fill-box; }
.is-in .hm-batt { animation: hmPop .7s var(--spring) 2s forwards; }
@keyframes hmPop { to { opacity: 1; transform: none; } }
.hm-batt__shell { fill: rgba(3, 26, 58, .7); stroke: rgba(255, 255, 255, .5); stroke-width: 1.5; }
.hm-batt__tip { fill: rgba(255, 255, 255, .5); }
.hm-batt__fill { fill: var(--green); transform-box: fill-box; transform-origin: left; transform: scaleX(.15); }
.is-in .hm-batt__fill { animation: hmFill 4s ease-in-out 2.3s infinite; }
@keyframes hmFill { 0% { transform: scaleX(.15); } 85%, 100% { transform: scaleX(1); } }
.hm-batt__bolt { fill: #fff; }
.bento { grid-template-columns: 1.05fr 1fr 1fr; grid-template-areas: "b a c" "b d d"; }
.bcard--value { grid-area: a; }
.bcard--home { grid-area: b; }
.bcard--wide { grid-area: d; }
.bcard--dark { grid-area: c; background: var(--navy-900); border-color: transparent; }
.bcard--dark .bcard__stage { background: radial-gradient(70% 80% at 50% 40%, #12407e 0%, #06224b 100%); }
.bcard--dark .bcard__stage::before { background-image: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1.4px); }
.bcard--dark h3 { color: #fff; }
.bcard--dark p { color: var(--muted-light); }
.bcard--dark .bcard__num { color: var(--orange-hi); }
.bcard--wide { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 10px; align-items: center; padding: 14px; }
.bcard__text { padding: 8px 0 14px; }
.bcard__stage--flow { height: 100%; min-height: 180px; }

/* ilustração: prédio que valoriza */
.ill { width: min(260px, 88%); height: auto; overflow: visible; transition: transform .7s var(--ease); }
.bcard:hover .ill { transform: scale(1.05); }
.ill__ground { fill: none; stroke: rgba(255, 103, 0, .35); stroke-width: 1.5; stroke-dasharray: 3 5; }
.bld__body { fill: #fff; stroke: var(--navy-900); stroke-width: 2; }
.bld__body--b { fill: #fff8f1; }
.bld__wins rect { fill: #e4e9f0; transition: fill .4s; }
.is-in .bld__wins rect { animation: winOn .5s var(--ease) forwards; animation-delay: calc(var(--w) * 90ms + .4s); }
@keyframes winOn { to { fill: #ffb35c; } }
.bcard:hover .bld__wins rect { animation: winFlick 1.2s var(--ease) both; animation-delay: calc(var(--w) * 50ms); }
@keyframes winFlick { 0% { fill: #e4e9f0; } 100% { fill: #ffb35c; } }
.bld__door { fill: var(--navy-900); }
.bld__charger rect { fill: var(--navy-900); }
.bld__bolt { fill: var(--orange); }
.is-in .bld__charger { animation: chg 2.2s ease-in-out 1.4s infinite; }
@keyframes chg { 50% { filter: drop-shadow(0 0 6px rgba(255, 103, 0, .9)); } }
.bld__tag rect { fill: var(--orange); }
.bld__tag text { font: 800 11px var(--f-body); fill: #fff; text-anchor: middle; letter-spacing: .01em; }
.bld__tag-ico { fill: rgba(255, 255, 255, .22); }
.bld__up { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bld__tag { transform-box: fill-box; transform-origin: center; animation: bob 3s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-5px) rotate(-3deg); } }

/* mini fatura por apartamento */
.mini-bill { position: relative; width: min(280px, 90%); display: grid; gap: 10px; padding: 16px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.mini-bill__row { display: grid; grid-template-columns: 64px 1fr 66px; gap: 10px; align-items: center; font-size: 10.5px; color: rgba(255, 255, 255, .8); }
.mini-bill__row i { height: 8px; border-radius: 6px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.mini-bill__row i b { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--orange-hi), var(--orange)); transition: width 1.2s var(--ease); transition-delay: calc(var(--i) * 120ms + .3s); }
.is-in .mini-bill__row i b { width: calc(var(--v) * 100%); }
.bcard:hover .mini-bill__row i b { filter: brightness(1.15); }
.mini-bill__row em { color: #fff; text-align: right; font-size: 10.5px; font-variant-numeric: tabular-nums; transition: color .4s; }
.mini-bill__row { transition: transform .5s var(--ease); }
.mini-bill__row.is-up em { color: var(--orange-hi); }
.mini-bill__row.is-up { transform: translateX(3px); }
.mini-bill__row i b { transition-property: width, filter; }
.mini-bill__total { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; padding-top: 10px; border-top: 1px dashed rgba(255, 255, 255, .14); font-size: 10.5px; color: var(--muted-light); }
.mini-bill__total span { display: inline-flex; align-items: center; gap: 8px; }
.mini-bill__total .pulse-dot { width: 6px; height: 6px; }
.mini-bill__total b { color: var(--green); font-size: 12px; font-variant-numeric: tabular-nums; }

/* fluxo de infraestrutura */
.ill--flow { width: 100%; max-width: 440px; }
.flow__node rect { fill: #fff; stroke: var(--navy-900); stroke-width: 1.6; }
.flow__node--hub rect { fill: var(--navy-900); }
.flow__node text, .flow__spot text { font: 700 11px var(--f-body); text-anchor: middle; fill: var(--navy-900); }
.flow__node--hub text { fill: #fff; }
.flow__spot rect { fill: #fff; stroke: rgba(255, 103, 0, .6); stroke-width: 1.4; }
.flow__spot--new rect { stroke-dasharray: 4 4; fill: #fff6ee; }
.flow__spot--new text { fill: var(--orange-deep); }
.flow__wire { fill: none; stroke: rgba(3, 26, 58, .18); stroke-width: 2.5; stroke-linecap: round; }
.flow__pulse { fill: none; stroke: var(--orange); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 14 200; stroke-dashoffset: 214; }
.is-in .flow__pulse { animation: flowRun 2.2s linear infinite; animation-delay: var(--fd, 0s); }
.bcard:hover .flow__pulse { animation-duration: 1.1s; }
@keyframes flowRun { to { stroke-dashoffset: 0; } }

/* =========================================================
   BLOCO 03 · SOLUÇÕES
   ========================================================= */
.sols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.sol { position: relative; display: flex; flex-direction: column; border-radius: var(--r-xl); background: #fff; overflow: hidden; border: 1px solid var(--line); transition: box-shadow .6s var(--ease), border-color .4s, transform .6s var(--ease); }
.js .sol.reveal { transition: opacity 1s var(--ease), transform 1.1s var(--ease), box-shadow .6s var(--ease), border-color .4s; }
.sol:hover { box-shadow: 0 50px 80px -50px rgba(3, 26, 58, .55); border-color: rgba(255, 103, 0, .35); }
.js .sol.reveal.is-in:hover { transform: translateY(-6px); }
.sol__media { position: relative; margin: 12px 12px 0; border-radius: 26px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--navy-900); }
.sol__media img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.4s var(--ease); }
.sol:hover .sol__media img { scale: 1.07; }
.sol__media::after { content: ""; position: absolute; inset: 0; background: var(--navy-900); transform-origin: right; transition: transform 1.3s var(--ease-io) .2s; }
.sol.is-in .sol__media::after { transform: scaleX(0); }
.sol__badge { position: absolute; left: 14px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-size: 11px; text-transform: uppercase; color: #fff; background: rgba(3, 26, 58, .55); border: 1px solid rgba(255, 255, 255, .2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.sol__badge svg { width: 14px; height: 14px; color: var(--orange-hi); }
.sol__body { padding: 26px clamp(20px, 2.4vw, 34px) 32px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.sol__num { font-size: 12px; color: var(--orange-deep); }
.sol h3 { font-family: var(--f-display); font-weight: 700; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.14; letter-spacing: -.02em; text-wrap: balance; }
.sol p { color: var(--muted); }
.sol__apps { margin-top: auto; padding-top: 12px; }
.sol__apps > span { display: block; font-size: 11px; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.sol__apps ul { display: flex; flex-wrap: wrap; gap: 8px; }
.sol__apps li { padding: 9px 14px; border-radius: 999px; background: var(--cream); border: 1px solid var(--line); font-size: 13px; font-weight: 600; transition: background .3s, color .3s, border-color .3s, transform .4s var(--ease); }
.sol__apps li:hover { background: var(--navy-900); color: #fff; border-color: var(--navy-900); transform: translateY(-2px); }

.grow { margin-top: auto; padding: 16px; border-radius: 20px; background: var(--cream); border: 1px solid var(--line); }
.grow__tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 12px; background: #fff; }
.grow__tabs button { padding: 8px; border-radius: 9px; font-size: 13px; font-weight: 700; color: var(--muted); transition: background .35s, color .35s, box-shadow .35s; }
.grow__tabs button:hover { color: var(--navy-900); }
.grow__tabs button[aria-selected="true"] { background: var(--orange); color: #fff; box-shadow: 0 6px 16px -6px rgba(255, 103, 0, .8); }
.grow__spots { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin: 14px 0 10px; }
.grow__spots i { aspect-ratio: 1 / 1.3; border-radius: 8px; border: 1.5px dashed rgba(3, 26, 58, .2); position: relative; transition: background .5s var(--ease), border-color .5s, transform .6s var(--spring); }
.grow__spots i::after { content: ""; position: absolute; inset: 30% 30%; background: currentColor; color: transparent; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7l1-8Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7l1-8Z'/%3E%3C/svg%3E") center / contain no-repeat; transition: color .4s; }
.grow__spots i.on { background: var(--navy-900); border: 1.5px solid var(--navy-900); transform: translateY(-3px); }
.grow__spots i.on::after { color: var(--orange); }
.grow__cap { font-size: 11.5px; color: var(--muted); }
.grow__cap b { color: var(--orange-deep); font-size: 14px; }

/* =========================================================
   BLOCO 04 · DESAFIO
   ========================================================= */
.challenge__glow { position: absolute; left: -10%; top: 20%; width: 700px; height: 700px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 103, 0, .18), transparent 60%); filter: blur(20px); pointer-events: none; }
.challenge__head { max-width: 1060px; }
.challenge__grid { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.challenge__media { position: sticky; top: 110px; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 5; background: var(--navy-850); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .8); border: 1px solid rgba(255, 255, 255, .1); }
.challenge__media img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; object-position: 68% 50%; }
.challenge__media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(2, 19, 47, 0) 45%, rgba(2, 19, 47, .85)); }
.challenge__meter { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; padding: 16px; border-radius: 18px; background: rgba(3, 26, 58, .55); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.challenge__meter > span { font-size: 10.5px; text-transform: uppercase; color: var(--muted-light); }
.meter { height: 10px; margin: 10px 0; border-radius: 6px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--green), #ffd166 55%, var(--orange) 80%, #ff3d3d); transition: width 2s var(--ease) .4s; }
.is-in .meter i { width: calc(var(--m) * 100%); }
.challenge__meter-row { display: flex; justify-content: space-between; font-size: 12px; color: rgba(255, 255, 255, .85); }
.challenge__meter-row b { color: #fff; font-size: 16px; }

.challenge__intro { font-size: clamp(16px, 1.3vw, 18px); color: var(--muted-light); }
.challenge__intro b { color: #fff; font-weight: 700; }
.challenge__intro p + p { margin-top: 10px; }
.qs { display: grid; gap: 12px; margin-top: 30px; counter-reset: q; }
.q { position: relative; display: flex; align-items: center; gap: 18px; padding: 20px 22px; border-radius: 22px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); transition: background .5s var(--ease), border-color .5s, transform .6s var(--ease), box-shadow .5s; }
.js .q.reveal { transition: opacity 1s var(--ease), transform 1.1s var(--ease), background .5s var(--ease), border-color .5s, box-shadow .5s; }
.q b { display: block; font-family: var(--f-display); font-weight: 700; font-size: clamp(16px, 1.35vw, 20px); line-height: 1.22; letter-spacing: -.015em; color: rgba(255, 255, 255, .78); transition: color .4s; }
.q small { display: block; margin-top: 6px; font-size: 11px; text-transform: uppercase; color: var(--green); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s var(--ease), opacity .4s; }
.q__icon { position: relative; width: 52px; height: 52px; flex: none; border-radius: 16px; display: grid; place-items: center; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); color: #fff; transition: background .5s, border-color .5s, transform .7s var(--spring); }
.q__icon svg { position: absolute; width: 24px; height: 24px; transition: transform .6s var(--spring), opacity .35s; }
.q__ok { opacity: 0; transform: scale(.3) rotate(-30deg); }
.q:hover, .q.is-active { background: rgba(255, 103, 0, .08); border-color: rgba(255, 103, 0, .45); box-shadow: 0 24px 44px -28px rgba(255, 103, 0, .6); }
.js .q.reveal.is-in:hover { transform: translateX(6px); }
.q:hover b, .q.is-active b { color: #fff; }
.q.is-active small, .q:hover small { max-height: 30px; opacity: 1; }
.q:hover .q__icon, .q.is-active .q__icon { background: var(--orange); border-color: var(--orange); transform: rotate(-8deg); }
.q.is-solved .q__ask { opacity: 0; transform: scale(.3) rotate(30deg); }
.q.is-solved .q__ok { opacity: 1; transform: none; }
.q.is-solved .q__icon { background: rgba(24, 216, 180, .16); border-color: rgba(24, 216, 180, .45); color: var(--green); }
.q.is-solved.is-active .q__icon { background: var(--orange); border-color: var(--orange); color: #fff; }

.answer { position: relative; overflow: hidden; isolation: isolate; margin-top: 22px; padding: clamp(24px, 3vw, 34px); border-radius: var(--r-lg); background: linear-gradient(135deg, var(--orange) 0%, #f45f00 100%); color: var(--navy-900); box-shadow: 0 40px 70px -36px rgba(255, 103, 0, .8); }
.answer p { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(18px, 1.8vw, 26px); line-height: 1.12; letter-spacing: -.02em; max-width: 520px; margin-bottom: 22px; }
.answer em { color: #fff; }
.answer .btn { --bg: var(--navy-900); --hover: #000; box-shadow: 0 18px 34px -16px rgba(2, 19, 47, .7); }
.answer__mark { position: absolute; right: -30px; top: -40px; width: 200px; z-index: -1; }
.answer__mark svg { width: 100%; fill: none; stroke: rgba(255, 255, 255, .35); stroke-width: 1.5; vector-effect: non-scaling-stroke; }

/* =========================================================
   BLOCO 05 · MORADOR × SÍNDICO
   ========================================================= */
.peace__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.peace__visual { position: relative; padding: 0 24px 24px 0; }
.peace__media { position: relative; border-radius: 22px 22px 22px 140px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--navy-900); box-shadow: 0 60px 100px -50px rgba(3, 26, 58, .6); }
.peace__media img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; object-position: 62% 50%; }
.peace__frame { position: absolute; inset: 24px 0 0 24px; z-index: -1; border-radius: 22px 22px 22px 140px; border: 1.5px solid rgba(255, 103, 0, .5); }
.toast { position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 18px; background: rgba(255, 255, 255, .9); border: 1px solid rgba(255, 255, 255, .6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 24px 40px -20px rgba(3, 26, 58, .45); }
.toast b { display: block; font-size: 13px; color: var(--navy-900); line-height: 1.2; }
.toast small { font-size: 12px; color: var(--muted); }
.toast--a { top: 10%; right: -4%; animation: floatY 5s ease-in-out infinite; }
.toast--b { bottom: 14%; left: -6%; animation: floatY 6s ease-in-out 1s infinite reverse; }
@keyframes floatY { 50% { translate: 0 -10px; } }

.peace__copy .h2 { font-size: clamp(24px, 2.6vw, 39px); }
.peace__lead { margin-top: 22px; color: var(--muted); font-size: clamp(15px, 1.2vw, 17px); max-width: 600px; }
.icards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 32px 0 34px; }
.icard { position: relative; isolation: isolate; overflow: hidden; padding: 20px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: 0 24px 44px -36px rgba(3, 26, 58, .4); transition: transform .6s var(--ease), box-shadow .6s var(--ease), border-color .4s; }
.js .icard.reveal { transition: opacity 1s var(--ease), transform 1.1s var(--ease), box-shadow .6s var(--ease), border-color .4s; }
.icard:hover, .js .icard.reveal.is-in:hover { transform: translateY(-6px); }
.icard:hover { border-color: rgba(255, 103, 0, .4); box-shadow: 0 34px 54px -34px rgba(3, 26, 58, .5); }
.icard > * { position: relative; z-index: 1; }
.icard h3 { font-family: var(--f-display); font-weight: 700; font-size: 16px; line-height: 1.2; letter-spacing: -.01em; margin: 16px 0 6px; }
.icard p { color: var(--muted); font-size: 14px; line-height: 1.5; }
.icard__icon { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: linear-gradient(145deg, #fff6ee, #ffe3c9); border: 1px solid rgba(255, 103, 0, .2); transition: background .5s, transform .7s var(--spring); }
.icard:hover .icard__icon { background: linear-gradient(145deg, var(--orange-hi), var(--orange-deep)); transform: rotate(-8deg) scale(1.06); }
.icard__icon svg { width: 44px; height: 44px; overflow: visible; }
.icard__icon .ic-paper { fill: #fff; stroke: var(--navy-900); stroke-width: 2; stroke-linejoin: round; transition: stroke .4s; }
.icard__icon .ic-line, .icard__icon .ic-arc { fill: none; stroke: var(--navy-900); stroke-width: 2.2; stroke-linecap: round; transition: stroke .4s; }
.icard:hover .ic-paper { stroke: var(--navy-900); }
/* cobrança: moeda gira e cai */
.ic-coin circle { fill: var(--orange); stroke: #fff; stroke-width: 1.6; }
.ic-coin path { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; }
.ic-coin { transform-box: fill-box; transform-origin: center; }
.icard:hover .ic-coin { animation: coin 1.1s var(--spring); }
@keyframes coin { 0% { transform: translateY(-14px) rotateY(0); opacity: 0; } 60% { opacity: 1; } 100% { transform: none rotateY(360deg); } }
/* controle: ponteiro oscila */
.ic-arc--fill { stroke: var(--orange) !important; stroke-dasharray: 51; stroke-dashoffset: 51; transition: stroke-dashoffset 1s var(--ease); }
.is-in .ic-arc--fill { stroke-dashoffset: 18; }
.icard:hover .ic-arc--fill { stroke-dashoffset: 8; stroke: #fff !important; }
.ic-needle path { stroke: var(--navy-900); stroke-width: 2.6; stroke-linecap: round; }
.ic-needle circle { fill: var(--navy-900); }
.ic-needle { transform-origin: 24px 32px; transform: rotate(-70deg); transition: transform 1.2s var(--spring); }
.is-in .ic-needle { transform: rotate(0); }
.icard:hover .ic-needle { animation: needle 1.4s var(--ease) infinite alternate; }
@keyframes needle { from { transform: rotate(-30deg); } to { transform: rotate(25deg); } }
/* gestão digital: tela acende */
.ic-screen { fill: #e8edf4; transition: fill .4s; }
.ic-bolt { fill: var(--orange); transform-box: fill-box; transform-origin: center; }
.icard:hover .ic-screen { fill: var(--navy-900); }
.icard:hover .ic-bolt { animation: zap .8s var(--spring); }
@keyframes zap { 0% { transform: scale(.3); } 100% { transform: none; } }
.ic-waves path { fill: none; stroke: var(--orange); stroke-width: 2; stroke-linecap: round; opacity: .2; }
.icard:hover .ic-waves path { animation: wave 1.2s ease-out infinite; }
.icard:hover .ic-waves path:nth-child(2) { animation-delay: .2s; }
@keyframes wave { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 0; } }
/* atendimento: digitando */
.ic-dots circle { fill: var(--orange); }
.icard:hover .ic-dots circle { animation: typing 1s ease-in-out infinite; }
.icard:hover .ic-dots circle:nth-child(2) { animation-delay: .15s; }
.icard:hover .ic-dots circle:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 50% { transform: translateY(-4px); } }
.icard:hover .icard__icon .ic-line, .icard:hover .icard__icon .ic-arc:not(.ic-arc--fill) { stroke: #fff; }
.icard:hover .icard__icon .ic-needle path { stroke: #fff; }
.icard:hover .icard__icon .ic-needle circle { fill: #fff; }
.icard:hover .ic-dots circle { fill: #fff; }
.icard:hover .ic-waves path { stroke: #fff; }

/* =========================================================
   BLOCO 06 · INVESTIMENTO
   ========================================================= */
.invest { padding-top: 0; }
.invest__card { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 4vw, 56px); padding: clamp(28px, 4vw, 56px); border-radius: clamp(28px, 3vw, 44px); background: radial-gradient(120% 90% at 0% 0%, #ff8a2a 0%, var(--orange) 45%, #e85700 100%); color: var(--navy-900); box-shadow: 0 60px 110px -50px rgba(255, 103, 0, .75); }
/* traço de luz que percorre a borda do card */
@property --beam { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.invest__card::before, .invest__card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; padding: 3px; background: conic-gradient(from var(--beam), transparent 0deg, transparent 230deg, rgba(255, 236, 214, .25) 290deg, rgba(255, 255, 255, .9) 335deg, #fff 348deg, transparent 352deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: beam 5s linear infinite; }
.invest__card::after { padding: 10px; filter: blur(10px); opacity: .9; }
.invest__card { outline: 1px solid rgba(255, 255, 255, .22); outline-offset: -1px; }
@keyframes beam { to { --beam: 360deg; } }
.invest__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.invest__orb { position: absolute; right: 20%; top: -30%; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .28), transparent 60%); }
.invest__dots { position: absolute; left: 0; bottom: 0; width: 280px; height: 220px; background-image: radial-gradient(rgba(255, 255, 255, .22) 1.4px, transparent 1.8px); background-size: 18px 18px; mask-image: radial-gradient(circle at 0 100%, #000 20%, transparent 70%); -webkit-mask-image: radial-gradient(circle at 0 100%, #000 20%, transparent 70%); }
.invest__mark { position: absolute; left: 30%; bottom: -30%; height: 90%; fill: none; stroke: rgba(255, 255, 255, .07); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.invest__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .12em; padding: 8px 14px; border-radius: 999px; background: rgba(3, 26, 58, .12); border: 1px solid rgba(3, 26, 58, .18); }
.invest__eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: var(--navy-900); }
.invest__title { margin: 22px 0 18px; font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(24px, 2.65vw, 39px); line-height: 1.06; letter-spacing: -.025em; text-wrap: balance; }
.invest__title em { color: #fff; }
.invest__text { font-weight: 500; font-size: clamp(15px, 1.2vw, 17px); max-width: 560px; }
.steps { display: grid; gap: 8px; margin: 26px 0 30px; }
.steps li { display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: 16px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .4s, transform .5s var(--ease); }
.steps li:hover { background: rgba(255, 255, 255, .3); transform: translateX(6px); }
.steps span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--navy-900); color: var(--orange-hi); font-size: 12px; flex: none; }
.steps b { font-size: 15px; font-weight: 700; line-height: 1.3; }
.invest__note { margin-top: 18px; font-size: 12px; font-weight: 500; opacity: .85; }
.invest__visual { position: relative; min-height: 420px; }
.invest__media { position: absolute; inset: 0; border-radius: 28px 28px 28px 120px; overflow: hidden; background: var(--navy-900); box-shadow: 0 40px 80px -40px rgba(2, 19, 47, .8); }
.invest__media { transition: transform .35s var(--ease), box-shadow .6s var(--ease); }
.invest__media img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; transition: scale 1.2s var(--ease), filter .6s; }
.invest__visual:hover .invest__media img { scale: 1.1; filter: brightness(1.12) saturate(1.15); }
.invest__visual:hover .invest__media { box-shadow: 0 50px 90px -40px rgba(2, 19, 47, .9), 0 0 0 2px rgba(255, 255, 255, .35); }
.invest__shine { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .3) 50%, transparent 65%); transform: translateX(-120%); }
.invest__visual:hover .invest__shine { animation: shine 1.2s var(--ease); }
.invest__stat { transition: transform .6s var(--ease), background .4s; }
.invest__visual:hover .invest__stat { transform: translateY(-8px); background: rgba(3, 26, 58, .78); }
.invest__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(3, 26, 58, 0) 40%, rgba(3, 26, 58, .65)); }
.invest__stat { position: absolute; right: 18px; bottom: 18px; z-index: 2; max-width: 250px; padding: 18px 20px; border-radius: 22px; color: #fff; background: rgba(3, 26, 58, .6); border: 1px solid rgba(255, 255, 255, .2); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.invest__stat b { display: block; font-family: var(--f-display); font-weight: 800; font-size: clamp(34px, 3.6vw, 50px); line-height: 1; letter-spacing: -.03em; color: var(--orange-hi); }
.invest__stat span { display: block; margin-top: 8px; font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, .85); }

/* =========================================================
   BLOCO 07 · EM AÇÃO (vídeo)
   ========================================================= */
.action { padding-top: clamp(60px, 8vw, 110px); }
.action::before { content: ""; position: absolute; top: 0; left: 50%; width: min(1100px, 120vw); height: 460px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(255, 103, 0, .22), rgba(255, 103, 0, .08) 55%, rgba(255, 103, 0, 0)); pointer-events: none; }
.action .sec-head--center { max-width: 860px; }
.video { position: relative; max-width: 1000px; margin: 0 auto; }
.video__back { position: absolute; inset: -14px -18px 14px 18px; border-radius: var(--r-xl); background: linear-gradient(135deg, var(--orange), var(--orange-deep)); transform: rotate(2.5deg); transition: transform .8s var(--ease); }
.video:hover .video__back { transform: rotate(4deg) translate(6px, -4px); }
.video__card { position: relative; display: block; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 16 / 9; background: var(--navy-850); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .8); }
.video__card img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; object-position: 50% 40%; opacity: .5; transition: scale 1.4s var(--ease), opacity .6s; }
.video__card::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(2, 19, 47, 0) 0%, rgba(2, 19, 47, .55) 75%); pointer-events: none; }
.video__card:hover img { scale: 1.04; opacity: .65; }
.video__play { position: absolute; left: 50%; top: 50%; z-index: 2; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; background: var(--orange); display: grid; place-items: center; animation: pulseBig 2.4s infinite; transition: transform .5s var(--ease); }
.video__play svg { width: 34px; height: 34px; fill: #fff; margin-left: 4px; }
.video__card:hover .video__play { transform: scale(1.1); }
@keyframes pulseBig { 0% { box-shadow: 0 0 0 0 rgba(255, 103, 0, .6); } 70%, 100% { box-shadow: 0 0 0 30px rgba(255, 103, 0, 0); } }
.video__meta { position: absolute; left: 22px; bottom: 20px; z-index: 2; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; background: rgba(2, 19, 47, .6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 11px; color: #fff; text-transform: uppercase; }
.modal { position: fixed; inset: 0; z-index: 250; display: grid; place-items: center; padding: 16px; background: rgba(2, 19, 47, .88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
.modal.is-open { opacity: 1; visibility: visible; }
.modal__box { position: relative; width: min(1100px, 100%); }
.modal__frame { aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; background: #000; }
.modal__frame iframe, .modal__frame video { width: 100%; height: 100%; border: 0; display: block; }
.modal__close { position: absolute; top: -52px; right: 0; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--navy-900); font-size: 26px; line-height: 1; }

/* =========================================================
   BLOCO 08 · TECNOLOGIA NITHOM
   ========================================================= */
.tech { position: relative; overflow: hidden; padding-block: clamp(84px, 10vw, 150px); background: radial-gradient(90% 80% at 15% 0%, #ff8a2a 0%, var(--orange) 45%, #f45f00 100%); color: var(--navy-900); isolation: isolate; }
.tech::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 60% at 80% 55%, rgba(255, 255, 255, .18), transparent 60%); pointer-events: none; }
.tech__bolt { position: absolute; left: -6%; bottom: -18%; height: 80%; z-index: -1; fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 2600; stroke-dashoffset: 2600; transition: stroke-dashoffset 3s var(--ease-io); }
.tech.is-in .tech__bolt { stroke-dashoffset: 0; }
.tech__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.tech__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: clamp(13px, 1.1vw, 16px); text-transform: uppercase; letter-spacing: .02em; color: var(--navy-900); }
.tech__eyebrow svg { width: 16px; height: 16px; color: var(--navy-900); }
.tech__title { font-family: var(--f-display); font-weight: 700; font-size: clamp(36px, 4.1vw, 60px); line-height: 1.01; letter-spacing: -.04em; margin: 12px 0 14px; color: var(--navy-900); }
.tech__white { color: #fff; }
.tech__sub { font-weight: 800; font-size: clamp(13px, 1.1vw, 16px); text-transform: uppercase; letter-spacing: .04em; }
.tech__text { margin-top: 26px; font-weight: 500; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.55; max-width: 520px; }
.tech__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 36px 0 40px; max-width: 620px; }
.tcard { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 22px 20px; border-radius: 22px; background: linear-gradient(155deg, rgba(14, 62, 130, .96) 0%, rgba(6, 36, 84, .97) 55%, rgba(3, 24, 60, .98) 100%); color: #fff; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 24px 44px -24px rgba(2, 19, 47, .85), inset 0 1px 0 rgba(255, 255, 255, .12); overflow: hidden; isolation: isolate; transition: transform .6s var(--ease), box-shadow .6s var(--ease), border-color .4s; }
.js .tcard.reveal { transition: opacity 1s var(--ease), transform 1.1s var(--ease), box-shadow .6s var(--ease), border-color .4s; }
.tcard::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(280px circle at var(--mx, 20%) var(--my, 0%), rgba(255, 138, 42, .35), transparent 60%); opacity: 0; transition: opacity .4s; }
.tcard::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 130px; height: 130px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 0 0 18px rgba(255, 255, 255, .025), 0 0 0 36px rgba(255, 255, 255, .02); z-index: -1; transition: transform .8s var(--ease); }
.tcard:hover, .js .tcard.reveal.is-in:hover { transform: translateY(-6px); }
.tcard:hover { border-color: rgba(255, 138, 42, .55); box-shadow: 0 34px 54px -24px rgba(2, 19, 47, .95), inset 0 1px 0 rgba(255, 255, 255, .16); }
.tcard:hover::before { opacity: 1; }
.tcard:hover::after { transform: scale(1.25); }
.tcard__num { position: absolute; top: 18px; right: 18px; padding: 4px 10px; border-radius: 999px; font-family: var(--f-display); font-weight: 700; font-size: 12px; color: var(--orange-hi); background: rgba(255, 103, 0, .14); border: 1px solid rgba(255, 138, 42, .35); }
.tcard__icon { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; flex: none; color: #fff; background: linear-gradient(145deg, var(--orange-hi), var(--orange-deep)); box-shadow: 0 12px 24px -10px rgba(255, 103, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .35); transition: transform .7s var(--spring); }
.tcard__icon svg { width: 24px; height: 24px; }
.tcard:hover .tcard__icon { transform: rotate(-10deg) scale(1.08); }
.tcard h3 { font-family: var(--f-display); font-weight: 700; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.15; margin: 0 0 8px; text-wrap: balance; }
.tcard > div { min-width: 0; }
.tcard p { font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .8); }
.tech__visual { position: relative; padding: 30px 0 0 30px; }
.tech__frame { position: absolute; inset: 0 30px 30px 0; border: 1.5px solid rgba(255, 255, 255, .6); border-radius: 140px 22px 22px 22px; pointer-events: none; transition: translate .4s var(--ease); }
.js .tech__frame { opacity: 0; transform: translate(16px, 16px); transition: opacity 1s var(--ease) .5s, transform 1.2s var(--ease) .5s, translate .4s var(--ease); }
.tech.is-in .tech__frame { opacity: 1; transform: none; }
.tech__dots { position: absolute; right: -18px; bottom: -22px; width: 180px; height: 180px; background-image: radial-gradient(rgba(255, 255, 255, .55) 1.6px, transparent 2px); background-size: 18px 18px; mask-image: radial-gradient(circle, #000 40%, transparent 72%); -webkit-mask-image: radial-gradient(circle, #000 40%, transparent 72%); animation: drift 9s ease-in-out infinite; pointer-events: none; }
@keyframes drift { 50% { translate: -12px -10px; } }
.tech__media { position: relative; border-radius: 140px 22px 22px 22px; overflow: hidden; aspect-ratio: 1 / 1.08; background: var(--navy-900); box-shadow: 0 60px 100px -40px rgba(2, 19, 47, .75); transition: transform .25s linear; }
.tech__media img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; object-position: 4% 50%; animation: kenburns 18s ease-in-out infinite alternate; transition: scale 1.4s var(--ease); }
@keyframes kenburns { from { transform: scale(1) translateX(0); } to { transform: scale(1.1) translateX(-3%); } }
.tech__media:hover img { scale: 1.04; }
.tech__shine { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%); transform: translateX(-120%); }
.tech__media:hover .tech__shine { animation: shine 1.2s var(--ease); }
.tech.is-in .tech__shine { animation: shine 1.4s var(--ease) 1.4s; }
@keyframes shine { to { transform: translateX(120%); } }
.tech__media::after { content: ""; position: absolute; inset: 0; z-index: 3; background: var(--navy-900); transform-origin: top; transition: transform 1.3s var(--ease-io) .15s; pointer-events: none; }
.tech.is-in .tech__media::after { transform: scaleY(0); }

/* =========================================================
   BLOCOS 09 + 10 · PLATAFORMA
   ========================================================= */
.platform { isolation: isolate; }
.platform__glow { position: absolute; z-index: -1; width: 640px; height: 640px; right: 4%; top: 18%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 103, 0, .16), transparent 60%); filter: blur(20px); pointer-events: none; }
/* fundo vivo: auroras azuis, faíscas subindo e luz que segue o ponteiro */
.platform__fx { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.aura { position: absolute; border-radius: 50%; filter: blur(70px); mix-blend-mode: screen; will-change: transform; }
.aura--1 { width: 680px; height: 680px; left: -12%; top: -24%; background: radial-gradient(circle, rgba(44, 125, 255, .75), transparent 66%); opacity: .55; animation: auraA 18s ease-in-out infinite alternate; }
.aura--2 { width: 560px; height: 560px; right: -10%; bottom: -30%; background: radial-gradient(circle, rgba(70, 180, 255, .7), transparent 66%); opacity: .45; animation: auraB 22s ease-in-out infinite alternate; }
.aura--3 { width: 460px; height: 460px; left: 38%; top: 26%; background: radial-gradient(circle, rgba(110, 150, 255, .6), transparent 66%); opacity: .3; animation: auraC 26s ease-in-out infinite alternate; }
@keyframes auraA { to { transform: translate(18%, 22%) scale(1.15); } }
@keyframes auraB { to { transform: translate(-22%, -18%) scale(1.2); } }
@keyframes auraC { 50% { transform: translate(-30%, -20%) scale(.85); } 100% { transform: translate(15%, 10%) scale(1.1); } }
.platform__spot { position: absolute; inset: 0; background: radial-gradient(520px circle at var(--px, 70%) var(--py, 45%), rgba(86, 165, 255, .2), transparent 60%); transition: background-position .2s; }
.spark { position: absolute; bottom: -12px; width: var(--s, 3px); height: var(--s, 3px); border-radius: 50%; background: #a9dcff; box-shadow: 0 0 10px 2px rgba(120, 190, 255, .75); opacity: 0; animation: rise var(--t, 12s) linear var(--dl, 0s) infinite; }
@keyframes rise { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: .9; } 80% { opacity: .6; } 100% { transform: translate(var(--dx, 20px), -900px); opacity: 0; } }
.platform__grid { position: relative; display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.platform .h2 { font-size: clamp(25px, 2.75vw, 40px); }
.platform__text { color: var(--muted-light); margin-top: 22px; max-width: 520px; font-size: clamp(15px, 1.2vw, 17px); }
.ptabs { display: grid; gap: 8px; margin-top: 32px; }
.ptabs button { position: relative; overflow: hidden; width: 100%; display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: 16px; text-align: left; font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, .72); border: 1px solid transparent; transition: background .4s, border-color .4s, color .3s; }
.ptabs button:hover { color: #fff; background: rgba(255, 255, 255, .04); }
.ptabs button[aria-selected="true"] { color: #fff; background: rgba(255, 255, 255, .07); border-color: rgba(255, 103, 0, .35); }
.ptabs button[aria-selected="true"] .ev-badge { background: var(--orange); border-color: var(--orange); color: #fff; }
.ptabs__bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--orange); transform: scaleX(0); transform-origin: left; }
.ptabs button[aria-selected="true"] .ptabs__bar { animation: tabbar var(--tab-dur, 4.5s) linear forwards; }
.ptabs.is-paused .ptabs__bar { animation-play-state: paused; }
@keyframes tabbar { to { transform: scaleX(1); } }

.devices { position: relative; min-height: 560px; display: grid; align-items: center; padding: 40px 0; }
/* MacBook com painel em HTML: tudo em em, a partir de 1cqw da tela, para escalar junto */
.mac { position: relative; z-index: 1; width: 85%; margin-right: auto; }
.js .mac.reveal { transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
.mac__lid { position: relative; padding: 1.7% 1.7% 2.4%; border-radius: 18px 18px 8px 8px; background: #0a0b0e; box-shadow: inset 0 0 0 1.5px #34373e, 0 0 0 1.5px #9aa1ab, 0 60px 110px -40px rgba(0, 0, 0, .95), 0 0 140px -40px rgba(255, 103, 0, .35); }
.mac__screen { position: relative; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; background: #f3f5f9; container-type: inline-size; }
.mac__notch { position: absolute; top: 0; left: 50%; z-index: 3; width: 11%; height: 3.4%; border-radius: 0 0 7px 7px; background: #0a0b0e; transform: translateX(-50%); }
.mac__base { position: relative; height: 16px; margin: 0 -6.5%; border-radius: 2px 2px 16px 16px / 2px 2px 12px 12px; background: linear-gradient(180deg, #eceef2 0%, #c3c8d0 40%, #8a909a 100%); box-shadow: 0 34px 44px -22px rgba(0, 0, 0, .85); }
.mac__base span { position: absolute; left: 50%; top: 0; width: 15%; height: 6px; margin-left: -7.5%; border-radius: 0 0 9px 9px; background: linear-gradient(180deg, #9ea4ad, #d4d8de); }

.dash { position: absolute; inset: 0; display: grid; grid-template-columns: 17% minmax(0, 1fr); font-size: 1.36cqw; line-height: 1.25; color: var(--navy-900); }
.dash__side { display: flex; flex-direction: column; gap: .3em; padding: 2.2em 1em 1.2em; background: var(--navy-900); color: #fff; }
.dash__logo { width: 7.6em; margin: 0 0 1.8em .5em; }
.dash__nav { display: grid; gap: .3em; }
.dash__nav span { display: flex; align-items: center; gap: .65em; padding: .65em .75em; border-radius: .7em; font-size: .86em; font-weight: 600; color: rgba(255, 255, 255, .62); }
.dash__nav svg { width: 1.25em; height: 1.25em; flex: none; }
.dash__nav .is-on { background: var(--orange); color: #fff; box-shadow: 0 .6em 1.2em -.5em rgba(255, 103, 0, .9); }
.dash__user { margin-top: auto; display: flex; align-items: center; gap: .6em; padding: .6em; border-radius: .8em; background: rgba(255, 255, 255, .06); font-size: .74em; color: var(--muted-light); }
.dash__user i { width: 2.4em; height: 2.4em; flex: none; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; color: #fff; background: linear-gradient(145deg, var(--orange-hi), var(--orange-deep)); }
.dash__user b { display: block; color: #fff; }
.dash__main { display: flex; flex-direction: column; gap: 1em; min-width: 0; padding: 2.1em 1.6em 1.5em; }
.dash__top { display: flex; align-items: center; justify-content: space-between; }
.dash__top b { display: block; font-family: var(--f-display); font-size: 1.45em; letter-spacing: -.02em; }
.dash__top span { font-size: .8em; color: var(--muted); }
.dash__live { display: inline-flex; align-items: center; gap: .5em; padding: .45em .9em; border-radius: 999px; font-family: var(--f-mono); font-size: .72em !important; text-transform: uppercase; color: #0a8f77 !important; background: rgba(24, 216, 180, .14); }
.dash__live i { width: .6em; height: .6em; border-radius: 50%; background: var(--green); animation: blink 1.4s infinite; }
.dash__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8em; }
.dkpi, .dcard { position: relative; border-radius: .9em; background: #fff; border: 1px solid rgba(3, 26, 58, .06); box-shadow: 0 .8em 1.6em -1.2em rgba(3, 26, 58, .35); transition: box-shadow .5s var(--ease), transform .5s var(--ease), opacity .5s; }
.dkpi { padding: .8em .9em; }
.dkpi > span { display: block; font-family: var(--f-mono); font-size: .66em; text-transform: uppercase; color: var(--muted); }
.dkpi b { display: block; margin: .25em 0 .15em; font-size: 1.5em; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dkpi em { font-size: .6em; font-weight: 600; color: var(--muted); }
.dkpi small { font-size: .66em; font-weight: 600; color: var(--orange-deep); }
.dkpi small.ok { color: #0a8f77; }
.dash__grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1.1fr) minmax(0, 1fr); gap: .8em; }
.dcard { display: flex; flex-direction: column; gap: .6em; min-height: 0; overflow: hidden; padding: .85em .95em; }
.dcard header { display: flex; justify-content: space-between; align-items: center; gap: .5em; font-size: .78em; }
.dcard header span { color: var(--muted); font-size: .9em; }
.dash [data-focus].is-focus { box-shadow: 0 0 0 .14em var(--orange), 0 1em 2em -1em rgba(255, 103, 0, .55); transform: translateY(-.15em); }
.dash.has-focus [data-focus]:not(.is-focus) { opacity: .72; }
.dlegend { display: inline-flex; align-items: center; gap: .4em; }
.dlegend i { width: .9em; height: .25em; border-radius: 2px; background: var(--orange); }
.dlegend .dlegend__lim { margin-left: .4em; background: none; border-top: .15em dashed #9aa3b1; height: 0; }
.dcard--chart svg { flex: 1; width: 100%; min-height: 0; overflow: visible; }
.dgrid { fill: none; stroke: rgba(3, 26, 58, .07); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dlimit { fill: none; stroke: #9aa3b1; stroke-width: 1.2; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.darea { fill: url(#dArea); transition: d .9s var(--ease); }
.dline { fill: none; stroke: var(--orange); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: d .9s var(--ease); }
.ddot { position: absolute; right: .95em; width: .7em; height: .7em; margin: -.35em -.35em 0 0; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 .3em rgba(255, 103, 0, .2); transition: top .9s var(--ease); animation: pulse 2s infinite; }
.dspots { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: .45em; min-height: 0; }
.dspot { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .2em; border-radius: .6em; border: 1px dashed rgba(3, 26, 58, .18); background: #f7f9fc; font-size: .66em; font-weight: 700; color: var(--muted); transition: background .5s var(--ease), color .5s, border-color .5s, transform .6s var(--spring); }
.dspot small { font-family: var(--f-mono); font-weight: 500; font-size: .85em; }
.dspot svg { width: 1.5em; height: 1.5em; }
.dspot[data-s="charging"] { background: var(--navy-900); border: 1px solid var(--navy-900); color: #fff; }
.dspot[data-s="charging"] svg { color: var(--orange-hi); animation: blink 1.2s infinite; }
.dspot[data-s="done"] { background: rgba(24, 216, 180, .14); border: 1px solid rgba(24, 216, 180, .4); color: #0a8f77; }
.dspot.is-changed { transform: scale(1.08); }
.dbars { flex: 1; display: grid; align-content: space-around; gap: .3em; }
.dbars li { display: grid; grid-template-columns: 5.2em 1fr 4.4em; gap: .6em; align-items: center; font-size: .66em; color: var(--muted); }
.dbars i { height: .7em; border-radius: .4em; background: #eef1f5; overflow: hidden; }
.dbars b { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--orange-hi), var(--orange)); transition: width 1.4s var(--ease); }
.is-in .dbars b { width: calc(var(--v) * 100%); }
.dbars li:nth-child(2) b { transition-delay: .1s; } .dbars li:nth-child(3) b { transition-delay: .2s; } .dbars li:nth-child(4) b { transition-delay: .3s; } .dbars li:nth-child(5) b { transition-delay: .4s; }
.dbars em { text-align: right; font-style: normal; font-weight: 700; color: var(--navy-900); font-variant-numeric: tabular-nums; }
.dlog { flex: 1; display: grid; align-content: start; gap: .35em; min-height: 0; overflow: hidden; }
.dlog li { display: flex; align-items: center; gap: .55em; padding: .45em .55em; border-radius: .55em; background: #f6f8fb; font-size: .64em; white-space: nowrap; animation: logIn .7s var(--ease); }
.dlog li i { width: 1.9em; height: 1.9em; flex: none; display: grid; place-items: center; border-radius: .5em; background: rgba(255, 103, 0, .14); color: var(--orange-deep); }
.dlog li i.g { background: rgba(24, 216, 180, .16); color: #0a8f77; }
.dlog li i.n { background: rgba(3, 26, 58, .08); color: var(--navy-900); }
.dlog li i svg { width: 1.1em; height: 1.1em; }
.dlog li span { overflow: hidden; text-overflow: ellipsis; }
.dlog li b { font-weight: 700; }
.dlog li small { margin-left: auto; font-family: var(--f-mono); color: var(--muted); }
@keyframes logIn { from { opacity: 0; transform: translateY(-.8em); } }

.phone { position: absolute; right: -4%; bottom: -5%; z-index: 3; width: clamp(198px, 14vw, 216px); transform-style: preserve-3d; transition: transform .2s linear; }
.js .phone.reveal { transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.phone__body { position: relative; border-radius: 44px; padding: 9px; background: linear-gradient(145deg, #5a606b 0%, #23262d 22%, #3a3e46 55%, #16181d 100%); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .18), inset 0 0 0 4px #0b0c0f, 0 60px 100px -40px rgba(0, 0, 0, .9), 0 0 120px -30px rgba(255, 103, 0, .45); }
.phone__screen { position: relative; border-radius: 36px; overflow: hidden; aspect-ratio: 9 / 19.5; background: linear-gradient(180deg, #0b1f3a, #061630); box-shadow: 0 0 0 2px #000; isolation: isolate; }
.phone__island { position: absolute; top: 9px; left: 50%; width: 76px; height: 22px; margin-left: -38px; border-radius: 16px; background: #000; z-index: 6; }
.phone__home { position: absolute; left: 50%; bottom: 8px; width: 90px; height: 4px; margin-left: -45px; border-radius: 4px; background: rgba(255, 255, 255, .6); z-index: 6; }
.app { position: absolute; inset: 0; padding: 42px 14px 22px; color: #fff; display: flex; flex-direction: column; }
.app__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.app__top img { width: 70px; }
.app__top span { font-size: 9px; padding: 4px 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); }
.scr { position: absolute; left: 14px; right: 14px; top: 76px; bottom: 26px; display: flex; flex-direction: column; gap: 12px; opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .5s var(--ease), transform .6s var(--ease); }
.scr.is-active { opacity: 1; transform: none; pointer-events: auto; }
.scr__label { display: inline-flex; align-items: center; gap: 7px; font-size: 9.5px; text-transform: uppercase; color: var(--muted-light); }
.ring { position: relative; width: 74%; margin: 4px auto 0; }
.ring svg { width: 100%; transform: rotate(-90deg); overflow: visible; }
.ring__track { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 9; }
.ring__fill { fill: none; stroke: url(#ringGrad); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 314.2; stroke-dashoffset: 113; transition: stroke-dashoffset .9s var(--ease); filter: drop-shadow(0 0 8px rgba(255, 103, 0, .6)); }
.ring__val { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1; }
.ring__val b { font-family: var(--f-display); font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ring__val small { font-size: 12px; font-weight: 600; }
.ring__val span { display: block; font-size: 8.5px; color: var(--muted-light); text-transform: uppercase; margin-top: 4px; }
.scr__kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.scr__kpis div { padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); }
.scr__kpis div > span { display: block; font-size: 8px; text-transform: uppercase; color: var(--muted-light); }
.scr__kpis b { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.scr__btn { margin-top: auto; padding: 11px; border-radius: 14px; text-align: center; font-size: 12px; font-weight: 700; background: var(--orange); box-shadow: 0 10px 20px -8px rgba(255, 103, 0, .9); }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 96px; padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, .05); }
.bars i { flex: 1; height: calc(var(--h) * 100%); border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, var(--orange-hi), rgba(255, 103, 0, .35)); transform-origin: bottom; }
.scr.is-active .bars i { animation: barUp .8s var(--ease) both; }
.scr.is-active .bars i:nth-child(2) { animation-delay: .05s; } .scr.is-active .bars i:nth-child(3) { animation-delay: .1s; } .scr.is-active .bars i:nth-child(4) { animation-delay: .15s; } .scr.is-active .bars i:nth-child(5) { animation-delay: .2s; } .scr.is-active .bars i:nth-child(6) { animation-delay: .25s; } .scr.is-active .bars i:nth-child(7) { animation-delay: .3s; }
@keyframes barUp { from { transform: scaleY(0); } }
.hist { display: grid; gap: 6px; }
.hist li { display: flex; justify-content: space-between; padding: 9px 10px; border-radius: 10px; background: rgba(255, 255, 255, .05); font-size: 11px; }
.hist span { color: var(--muted-light); }
.hist b.ok { color: var(--green); }
.bill { padding: 14px; border-radius: 16px; background: linear-gradient(135deg, var(--orange), var(--orange-deep)); box-shadow: 0 14px 26px -12px rgba(255, 103, 0, .8); }
.bill span { display: block; font-size: 8.5px; text-transform: uppercase; opacity: .85; }
.bill b { display: block; font-family: var(--f-display); font-size: 24px; margin: 6px 0 2px; }
.bill small { font-size: 10px; opacity: .9; }
.lb { display: grid; gap: 10px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .05); }
.lb__row { display: grid; grid-template-columns: 46px 1fr; gap: 8px; align-items: center; font-size: 10px; color: var(--muted-light); }
.lb__row i { height: 8px; border-radius: 6px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.lb__row b { display: block; height: 100%; width: calc(var(--w) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--green), #9af0dd); }
.scr.is-active .lb__row b { animation: lbPulse 2.4s ease-in-out infinite alternate; }
.scr.is-active .lb__row:nth-child(2) b { animation-delay: -.6s; } .scr.is-active .lb__row:nth-child(3) b { animation-delay: -1.2s; } .scr.is-active .lb__row:nth-child(4) b { animation-delay: -1.8s; }
@keyframes lbPulse { from { width: calc(var(--w) * 70%); } to { width: calc(var(--w) * 100%); } }
.lb__note { display: flex; align-items: center; gap: 6px; font-size: 9.5px; color: var(--green); }
.lb__note svg { width: 12px; height: 12px; }

.float-chip { position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 16px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .8); color: #fff; transition: transform .3s var(--ease); }
.float-chip b { display: block; font-size: 12.5px; line-height: 1.2; }
.float-chip small { font-size: 11px; color: var(--muted-light); }
.fc-1 { left: -3%; bottom: 6%; animation: floatY 5s ease-in-out infinite; }
.fc-2 { right: 10%; top: 2%; animation: floatY 6s ease-in-out 1s infinite reverse; }

/* =========================================================
   BLOCO 11 · OFERTAS
   ========================================================= */
.offers .sec-head--center { max-width: 900px; }
.offers__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
.offer { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; border-radius: var(--r-xl); background: #fff; border: 1px solid var(--line); box-shadow: 0 40px 70px -50px rgba(3, 26, 58, .45); transition: transform .6s var(--ease), box-shadow .6s var(--ease), border-color .4s; }
.js .offer.reveal { transition: opacity 1s var(--ease), transform 1.1s var(--ease), box-shadow .6s var(--ease), border-color .4s; }
.offer:hover, .js .offer.reveal.is-in:hover { transform: translateY(-8px); }
.offer:hover { border-color: rgba(255, 103, 0, .4); box-shadow: 0 60px 90px -50px rgba(3, 26, 58, .55); }
.offer > * { position: relative; z-index: 1; }
.offer__media { position: relative; margin: 12px 12px 0; border-radius: 26px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--navy-900); }
.offer__media img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; transition: scale 1.4s var(--ease); } /* sobra em cima e embaixo para o parallax não mostrar o fundo */
.offer:hover .offer__media img { scale: 1.06; }
.offer__tag { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--navy-900); background: rgba(255, 255, 255, .9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.offer__tag svg { width: 14px; height: 14px; }
.offer__tag--orange { background: var(--orange); color: #fff; }
.offer__body { display: flex; flex-direction: column; gap: 12px; padding: 26px clamp(20px, 2.6vw, 36px) 30px; flex: 1; }
.offer__num { font-size: 12px; color: var(--orange-deep); }
.offer h3 { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(21px, 2vw, 30px); line-height: 1.06; letter-spacing: -.02em; }
.offer__kicker { font-weight: 700; font-size: 17px; color: var(--orange-deep); }
.offer__body > p:not(.offer__kicker):not(.offer__note) { color: var(--muted); }
.offer__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; }
.offer__list li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px; background: var(--cream); font-size: 13px; font-weight: 600; }
.offer__list i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--orange); color: #fff; }
.offer__list svg { width: 12px; height: 12px; }
.offer .btn { margin-top: auto; }
.offer__note { font-size: 12px; color: var(--muted); line-height: 1.5; }
.offer--dark { background: radial-gradient(120% 70% at 100% 0%, #123f7c 0%, var(--navy-900) 60%); border-color: transparent; color: #fff; }
.offer--dark .offer__kicker { color: var(--orange-hi); }
.offer--dark .offer__body > p:not(.offer__kicker):not(.offer__note) { color: var(--muted-light); }
.offer--dark .offer__list li { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1); }
.offer--dark .offer__note { color: var(--muted-light); }
.offer--dark .offer__num { color: var(--orange-hi); }

/* =========================================================
   BLOCO 12 · FAQ
   ========================================================= */
.faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.faq .h2 { font-size: clamp(25px, 2.75vw, 40px); }
.faq__side { position: sticky; top: 120px; }
.help { margin-top: 40px; padding: 26px; border-radius: var(--r-lg); background: #fff; box-shadow: 0 24px 50px -36px rgba(3, 26, 58, .35); display: grid; gap: 8px; }
.help b { font-family: var(--f-display); text-transform: uppercase; font-size: 17px; }
.help p { color: var(--muted); font-size: 15px; margin-bottom: 10px; }
.acc { display: grid; gap: 14px; align-content: start; }
.acc__item { position: relative; border-radius: 22px; background: #fff; border: 1px solid rgba(3, 26, 58, .09); box-shadow: 0 22px 44px -36px rgba(3, 26, 58, .4); overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s; }
.js .acc__item.reveal { transition: opacity 1s var(--ease), transform 1.1s var(--ease), box-shadow .5s var(--ease), border-color .4s; }
.acc__item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--orange-hi), var(--orange-deep)); transform: scaleY(0); transform-origin: top; transition: transform .6s var(--ease); }
.acc__item:hover { border-color: rgba(255, 103, 0, .3); }
.acc__item.is-open { border-color: rgba(255, 103, 0, .35); box-shadow: 0 34px 60px -36px rgba(3, 26, 58, .5); }
.acc__item.is-open::before { transform: none; }
.acc__q { width: 100%; display: grid; grid-template-columns: 44px 1fr 44px; gap: 16px; align-items: center; padding: 18px 20px; text-align: left; font-weight: 700; font-size: clamp(15px, 1.3vw, 17.5px); line-height: 1.35; color: var(--navy-900); transition: color .3s; }
.acc__q .mono { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; font-size: 12px; font-weight: 500; color: var(--orange-deep); background: var(--orange-soft); transition: background .4s, color .4s, transform .6s var(--spring); }
.acc__item.is-open .acc__q .mono { background: var(--orange); color: #fff; transform: rotate(-8deg); }
.acc__q:hover { color: var(--orange-deep); }
.acc__q i { position: relative; width: 44px; height: 44px; border-radius: 50%; background: #f3f5f8; transition: background .4s, transform .6s var(--ease); }
.acc__q i::before, .acc__q i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; background: var(--navy-900); border-radius: 2px; transition: transform .5s var(--ease), background .3s; }
.acc__q i::after { transform: rotate(90deg); }
.acc__q:hover i { background: var(--orange-soft); }
.acc__q[aria-expanded="true"] i { background: var(--navy-900); transform: rotate(180deg); }
.acc__q[aria-expanded="true"] i::before, .acc__q[aria-expanded="true"] i::after { background: #fff; }
.acc__q[aria-expanded="true"] i::after { transform: rotate(0); }
.acc__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.acc__a > div { overflow: hidden; }
.acc__a p { margin: 0 20px 20px 80px; padding: 16px 18px; border-radius: 14px; background: #f7f8fa; color: var(--muted); font-size: 15.5px; line-height: 1.6; opacity: 0; transform: translateY(-6px); transition: opacity .4s, transform .5s var(--ease); }
.acc__item.is-open .acc__a { grid-template-rows: 1fr; }
.acc__item.is-open .acc__a p { opacity: 1; transform: none; transition-delay: .15s; }

/* =========================================================
   BLOCO 13 · CTA FINAL + FORMULÁRIO
   ========================================================= */
.final { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(80px, 10vw, 150px); color: #fff; }
.final__media { position: absolute; inset: 0; z-index: -2; }
.final__media img { position: absolute; inset: -10% 0; width: 100%; height: 120%; object-fit: cover; }
.final__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(2, 19, 47, .95) 0%, rgba(2, 19, 47, .8) 45%, rgba(2, 19, 47, .55) 100%), radial-gradient(60% 60% at 80% 40%, rgba(255, 103, 0, .22), transparent 70%); }
.final__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.final .h2--xl { font-size: clamp(25px, 2.9vw, 44px); }
.final__lead { margin-top: 24px; font-family: var(--f-display); font-weight: 700; font-size: clamp(17px, 1.6vw, 22px); letter-spacing: -.01em; color: var(--orange-hi); }

.form { position: relative; padding: clamp(22px, 3vw, 36px); border-radius: var(--r-xl); background: rgba(3, 26, 58, .78); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3); color: #fff; box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .8); display: grid; gap: 14px; overflow: hidden; isolation: isolate; }
.form::before { content: ""; position: absolute; top: -40%; right: -30%; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 103, 0, .3), transparent 60%); z-index: -1; }
.form__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.form__head h3 { font-family: var(--f-display); font-weight: 800; font-size: clamp(18px, 1.7vw, 24px); letter-spacing: -.02em; line-height: 1.1; text-transform: uppercase; order: -1; }
.form__steps { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.form__steps span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .2); color: var(--muted-light); transition: background .4s, color .4s, border-color .4s; }
.form__steps span.is-on { background: var(--orange); border-color: var(--orange); color: #fff; }
.form__steps i { width: 22px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .15); position: relative; overflow: hidden; }
.form__steps i::after { content: ""; position: absolute; inset: 0; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.form[data-step="2"] .form__steps i::after { transform: none; }
.form__step { display: grid; gap: 16px; animation: stepIn .6s var(--ease); }
@keyframes stepIn { from { opacity: 0; transform: translateX(20px); } }
.opts { border: 0; }
.opts legend { font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 10px; }
.opts__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.opts__grid--2 { grid-template-columns: 1fr 1fr; }
.opts label { position: relative; }
.opts input { position: absolute; opacity: 0; pointer-events: none; }
.opts span { display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; height: 100%; min-height: 48px; padding: 10px 8px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .03); font-size: 13.5px; font-weight: 600; line-height: 1.2; color: rgba(255, 255, 255, .82); transition: all .3s var(--ease); }
.opts label:hover span { border-color: rgba(255, 255, 255, .4); color: #fff; }
.opts input:checked + span { background: var(--orange); border-color: var(--orange); color: #fff; box-shadow: 0 10px 24px -10px rgba(255, 103, 0, .8); }
.opts input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
.field { position: relative; display: block; }
.field input { width: 100%; padding: 24px 18px 10px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); color: #fff; font-size: 16px; transition: border-color .3s, background .3s, box-shadow .3s; }
.field input:focus { outline: none; border-color: var(--orange); background: rgba(255, 255, 255, .09); box-shadow: 0 0 0 4px rgba(255, 103, 0, .18); }
.field span { position: absolute; left: 18px; top: 17px; font-size: 15px; color: var(--muted-light); pointer-events: none; transform-origin: left top; transition: transform .35s var(--ease), color .3s; }
.field input:focus + span, .field input:not(:placeholder-shown) + span { transform: translateY(-10px) scale(.75); color: var(--orange-hi); }
.field.is-error input { border-color: #ff5a5a; box-shadow: 0 0 0 4px rgba(255, 90, 90, .15); }
.form__actions { display: grid; grid-template-columns: auto 1fr; gap: 10px; }
.form__legal { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted-light); }
.form__legal svg { width: 14px; height: 14px; color: var(--green); flex: none; }
.form__msg { font-size: 14px; color: var(--green); }
.form__msg:empty { display: none; }
.form__msg.is-error { color: #ff8a8a; }

/* =========================================================
   RODAPÉ + WHATSAPP
   ========================================================= */
.footer { position: relative; background: radial-gradient(80% 60% at 85% 0%, rgba(255, 103, 0, .12), transparent 60%), var(--navy-950); color: rgba(255, 255, 255, .7); padding-top: clamp(56px, 7vw, 90px); overflow: hidden; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1.1fr 1.2fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid var(--line-light); }
.footer__brand p { margin-top: 20px; max-width: 340px; font-size: 15px; }
.footer__social { display: flex; gap: 10px; margin-top: 24px; }
.footer__social a { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); transition: background .35s, border-color .35s, transform .5s var(--ease); }
.footer__social a:hover { background: var(--orange); border-color: var(--orange); transform: translateY(-3px) rotate(-6deg); }
.footer__social svg { width: 19px; height: 19px; }
.footer__col { display: grid; align-content: start; gap: 12px; font-size: 15px; }
.footer__col b { color: #fff; font-weight: 700; margin-bottom: 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .12em; }
.footer__col a { width: fit-content; background: linear-gradient(var(--orange), var(--orange)) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease), color .3s, translate .4s var(--ease); }
.footer__col a:hover { color: #fff; background-size: 100% 1px; translate: 4px 0; }
.footer__contact { display: inline-flex; align-items: center; gap: 10px; }
.footer__contact svg { width: 17px; height: 17px; color: var(--orange-hi); flex: none; }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding-block: 24px; font-size: 13px; }
.to-top { display: inline-flex; align-items: center; gap: 12px; color: #fff; font-weight: 600; }
.to-top i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); transition: background .35s, transform .5s var(--ease); }
.to-top svg { width: 16px; height: 16px; transform: rotate(-45deg); }
.to-top:hover i { background: var(--orange); transform: translateY(-4px); }
.footer__wordmark { padding-top: clamp(16px, 3vw, 40px); margin-bottom: -2px; line-height: 0; }
.footer__wordmark svg { width: 100%; height: auto; display: block; overflow: visible; }
.js .footer__wordmark svg { opacity: 0; transform: translateY(40%); transition: opacity 1.2s var(--ease), transform 1.4s var(--ease); }
.js .footer__wordmark.is-in svg { opacity: 1; transform: none; }

.wa-float { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 95; width: 60px; height: 60px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: 0 14px 30px -8px rgba(37, 211, 102, .6); transition: transform .5s var(--ease), opacity .4s; }
.wa-float::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25d366; animation: ring 2.4s var(--ease) infinite; }
.wa-float svg { width: 30px; height: 30px; position: relative; }
.wa-float:hover { transform: scale(1.08) rotate(-6deg); }
.wa-float__tip { position: absolute; right: 72px; top: 50%; transform: translate(10px, -50%); padding: 9px 14px; border-radius: 10px; background: #fff; color: var(--navy-900); font-size: 13px; font-weight: 600; white-space: nowrap; box-shadow: 0 10px 30px rgba(0, 0, 0, .2); opacity: 0; pointer-events: none; transition: opacity .3s, transform .5s var(--ease); }
.wa-float:hover .wa-float__tip { opacity: 1; transform: translate(0, -50%); }
.js .wa-float { opacity: 0; transform: scale(.6); pointer-events: none; }
.js .wa-float.is-visible { opacity: 1; transform: none; pointer-events: auto; }

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width: 1180px) {
  .nav__link { padding: 8px 10px; font-size: 13px; }
  .hero__inner { grid-template-columns: minmax(0, 1fr) 350px; gap: 32px; }
  .phone { width: 198px; }
}

@media (max-width: 1060px) {
  .nav { display: none; }
  .burger { display: block; }
}

@media (max-width: 960px) {
  .hero { padding-top: calc(var(--header-h) + 40px); }
  .hero__inner { grid-template-columns: 1fr; gap: 36px; }
  /* texto ocupa a largura toda: o degradê passa a ser vertical */
  .hero__shade { background: linear-gradient(180deg, rgba(2, 19, 47, .5) 0%, rgba(2, 19, 47, .6) 30%, rgba(2, 19, 47, .68) 60%, rgba(2, 19, 47, .82) 100%); }
  .hud { max-width: 460px; }
  .feats { grid-template-columns: 1fr; gap: 10px; }
  .feat { padding: 14px 16px; }
  .sec-head--split { grid-template-columns: 1fr; gap: 18px; align-items: start; }

  .bento { grid-template-columns: 1fr 1fr; grid-template-areas: "b b" "a c" "d d"; }
  .bcard--wide { grid-template-columns: 1fr; }

  .sols, .offers__grid { grid-template-columns: 1fr; }
  .challenge__grid { grid-template-columns: 1fr; }
  .challenge__media { position: relative; top: 0; aspect-ratio: 1 / 1; }
  .peace__grid { grid-template-columns: 1fr; }
  .peace__visual { max-width: 560px; }
  .peace__media { aspect-ratio: 5 / 4; }
  .invest__card { grid-template-columns: 1fr; }
  .invest__visual { min-height: 340px; }
  .tech__grid { grid-template-columns: 1fr; }
  .tech__visual { max-width: 620px; }
  .platform__grid { grid-template-columns: 1fr; }
  .devices { min-height: 0; padding: 30px 0 60px; }
  .faq__grid { grid-template-columns: 1fr; gap: 32px; }
  .faq__side { position: relative; top: 0; }
  .final__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  /* tela estreita: separa as faixas para a laranja continuar aparecendo atrás da azul */
  .tape__band--front { transform: translateY(calc(-50% - 20px)) rotate(-4deg); }
  .tape__band--back { transform: translateY(calc(-50% + 19px)) rotate(3deg); }
  .header__cta { display: none; }
  .logo { width: 124px; }
    .hero__title { font-size: clamp(26px, 7.8vw, 36px); }
  /* no celular o hero é muito alto: a foto ocupa só o topo e some no azul, para não ficar ampliada demais */
  .hero { background: var(--navy-950); }
  .hero__media { bottom: auto; height: 600px; -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent); }
  .hero__media img { object-position: 84% 50%; }
  .hero__ctas .btn { width: 100%; white-space: normal; text-align: center; }
  .btn--lg { padding: 16px 22px; font-size: 15px; }
  .btn { white-space: normal; text-align: center; }

  .bento { grid-template-columns: 1fr; grid-template-areas: "b" "a" "c" "d"; }
  .bcard__stage--home { min-height: 300px; }
  .bcard__stage { height: 180px; }

  .grow__spots { gap: 4px; }
  .q { padding: 16px; gap: 14px; }
  .q__icon { width: 44px; height: 44px; border-radius: 14px; }
  .toast--a { right: 0; }
  .toast--b { left: 0; }
  .icards { grid-template-columns: 1fr; }
  .invest__stat { left: 14px; right: 14px; max-width: none; }

  .tech__cards { grid-template-columns: 1fr; }
  .video__back { inset: -8px -8px 8px 8px; }
  .video__play { width: 72px; height: 72px; margin: -36px 0 0 -36px; }

  .devices { padding: 20px 0 40px; }
  .mac { width: 100%; }
  .mac__lid { border-radius: 12px 12px 6px 6px; }
  .mac__base { height: 10px; }
  .phone { position: relative; left: auto; right: auto; bottom: auto; width: 200px; margin: -40px auto 0; } /* centralizado sob o notebook */
  .devices .fc-1 { left: 0; right: auto; bottom: 22%; }
  .fc-2 { right: auto; left: 0; }
  .fc-1 { right: 0; bottom: 30%; }
  .fc-2 { left: 0; top: 0; }

  .acc__q { grid-template-columns: 36px 1fr 36px; gap: 12px; padding: 16px; }
  .acc__q .mono, .acc__q i { width: 36px; height: 36px; }
  .acc__a p { margin: 0 16px 16px; }

  .opts__grid { grid-template-columns: 1fr 1fr; }
  .form__actions { grid-template-columns: 1fr; }
  .form__actions [data-back] { order: 2; }
  .form__head { flex-direction: column-reverse; align-items: flex-start; }
  .footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .wa-float { width: 54px; height: 54px; right: 14px; }
  .wa-float__tip { display: none; }
}

@media (max-width: 420px) {
  .hud { padding: 16px; }
  .sol__media { margin: 8px 8px 0; }
  .offer__media { margin: 8px 8px 0; }
  .float-chip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}