/* Nexo / 2026 — linguagem editorial para o site, sem alterar os fluxos. */
:root {
  --bg: #12172d;
  --bg-2: #1b2440;
  --panel: #273453;
  --panel-2: #303e62;
  --line: rgba(94, 231, 232, .22);
  --line-soft: rgba(230, 244, 255, .1);
  --text: #f5f7fc;
  --muted: #c8d1e6;
  --accent: #80f3ed;
  --accent-2: #32bbd0;
  --accent-ink: #07242e;
}
body { background: #12172d; overflow-x: clip; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(70vw 55vw at 85% -10%, rgba(39, 120, 181, .14), transparent 70%), radial-gradient(48vw 38vw at -15% 55%, rgba(86, 76, 171, .09), transparent 80%); }
.container { width: min(1300px, calc(100% - 80px)); }
.topbar { background: rgba(18, 23, 45, .88); border-bottom-color: rgba(255,255,255,.15); backdrop-filter: blur(24px); }
.topbar .container { height: 72px; }
.brand { font-family: var(--font-body); font-size: 17px; font-weight: 800; letter-spacing: -.035em; }
.brand .brand-icon { width: 43px; height: 43px; object-fit: contain; flex: none; }
.brand .brand-wordmark { width: 118px; height: 28px; object-fit: contain; object-position: left center; flex: none; }
.nav { font-family: var(--font-body); font-size: 12px; letter-spacing: .025em; font-weight: 700; text-transform: none; }
.nav a, .nav button { transition: color .2s ease; }
.nav a.active { border-bottom-color: transparent; }
.btn { min-height: 46px; padding: 11px 21px; border-radius: 999px; font: 700 13px var(--font-body); letter-spacing: -.015em; text-transform: none; }
.btn-primary { background: #69edf0; box-shadow: 0 10px 32px rgba(70,215,225,.16); }
.btn-primary:hover { background: #9af7f6; box-shadow: 0 14px 36px rgba(70,215,225,.25); }
.btn-ghost { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
.btn-sm { min-height: 39px; padding: 8px 17px; }
h1, h2, h3, h4 { font-family: var(--font-body); letter-spacing: -.055em; text-transform: uppercase; }
.eyebrow { font-family: var(--font-body); font-weight: 800; letter-spacing: .16em; }
.tag { border-radius: 999px; padding: 7px 13px; font-family: var(--font-body); font-weight: 700; letter-spacing: .04em; text-transform: none; }
.page-hero, .hero:not(.nexo-hero) { background: radial-gradient(50vw 34vw at 50% -20%, rgba(42, 146, 170, .15), transparent 75%); }
.section { border-top-color: rgba(255,255,255,.055); }
.section.alt { background: linear-gradient(135deg, #253467 0%, #382d72 48%, #1b4165 100%); }
.card, .plan, .faq details, .auth-box, .choice a { background: linear-gradient(145deg, rgba(107,120,232,.2), rgba(45,185,204,.09)); border-color: rgba(255,255,255,.19); border-radius: 20px; }
.card:hover, .choice a:hover { background: rgba(255,255,255,.055); border-color: rgba(101,233,239,.28); }
.card h3, .plan h3 { font-family: var(--font-body); letter-spacing: -.015em; text-transform: uppercase; font-size: 16px; }
.card p, .plan ul { line-height: 1.65; }
.mini span { background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.07); }
.marquee { background: #101622; border-color: rgba(255,255,255,.045); }
.marquee-track { font-family: var(--font-body); font-weight: 800; letter-spacing: .08em; }
footer { background: linear-gradient(130deg, #1c2550, #172b4a); border-top-color: rgba(255,255,255,.15); }

/* A capa usa profundidade e respiro, não uma caixa em volta do mascote. */
body[data-page="home"] .nexo-hero { overflow: hidden; padding: 94px 0 55px; text-align: left; background: radial-gradient(52vw 42vw at 78% 20%, rgba(54,223,231,.49), transparent 75%), radial-gradient(54vw 48vw at 96% 55%, rgba(182,88,238,.34), transparent 75%), radial-gradient(44vw 38vw at 0% 85%, rgba(75,96,240,.4), transparent 75%), #212a59; }
body[data-page="home"] .nexo-hero::before { inset: 0; background: radial-gradient(60vw 40vw at 70% 35%, rgba(94, 231, 232, .09), transparent 70%); }
body[data-page="home"] .nexo-hero > .container:first-child { max-width: 1300px; min-height: 525px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 2%; }
.nexo-hero-copy { position: relative; z-index: 2; padding-bottom: 42px; }
body[data-page="home"] .nexo-hero h1 { font-size: clamp(58px, 6.4vw, 106px); line-height: .97; margin: 22px 0 26px; text-transform: uppercase; letter-spacing: -.075em; }
body[data-page="home"] .nexo-hero h1 span { display: inline; }
body[data-page="home"] .nexo-hero p { margin: 0; max-width: 540px; font-size: clamp(16px, 1.5vw, 21px); line-height: 1.58; color: #c2cada; }
body[data-page="home"] .nexo-hero .hero-actions { justify-content: flex-start; margin-top: 34px; }
.nexo-hero-note { display: block; margin-top: 28px; color: #8691a9; font-size: 12px; letter-spacing: .03em; }
.nexo-hero-art { position: relative; z-index: 1; min-height: 510px; display: grid; place-items: center; }
.nexo-hero-orbit { position: absolute; width: min(52vw, 610px); aspect-ratio: 1; border: 1px solid rgba(142,233,245,.11); border-radius: 50%; box-shadow: 0 0 0 70px rgba(120,188,241,.025), 0 0 0 150px rgba(120,188,241,.015); }
.nexo-hero-art img { position: relative; width: min(100%, 565px); max-height: 590px; object-fit: contain; filter: drop-shadow(0 35px 90px rgba(44,197,236,.23)); animation: nexo-hover 7s ease-in-out infinite; }
@keyframes nexo-hover { 50% { transform: translateY(-13px) rotate(2deg); } }
body[data-page="home"] .nexo-product { max-width: 1300px; position: relative; margin-top: 18px; padding: 0 0 30px; }
.nexo-product-caption { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin: 0 0 22px; }
.nexo-product-caption span { color: var(--accent); font-size: 11px; letter-spacing: .17em; font-weight: 800; }
.nexo-product-caption strong { font-size: 16px; letter-spacing: -.02em; }
.nexo-product > img { width: 100%; max-height: 660px; object-fit: cover; object-position: top; border-radius: 24px; box-shadow: 0 30px 100px rgba(0,0,0,.37); }

body[data-page="home"] .feature { padding: clamp(75px, 9vw, 140px) 0; border-top: 0; }
body[data-page="home"] .feature:nth-of-type(even) { background: linear-gradient(115deg, #1e3464, #333067 62%, #4b2b71); }
body[data-page="home"] .feature:nth-of-type(odd) { background: linear-gradient(115deg, #263c66, #20495d 62%, #2f3d78); }
body[data-page="home"] .feature .container, body[data-page="home"] .feature.flip .container { gap: clamp(50px, 7vw, 125px); }
body[data-page="home"] .feature h2 { font-size: clamp(38px, 4.1vw, 64px); line-height: 1.03; text-transform: uppercase; max-width: 600px; }
body[data-page="home"] .feature-text { padding: clamp(24px, 3vw, 45px); border: 1px solid rgba(255,255,255,.18); border-radius: 28px; background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.035)); box-shadow: 0 24px 65px rgba(11,17,41,.12); }
body[data-page="home"] .feature p { font-size: clamp(15px, 1.3vw, 18px); line-height: 1.72; }
body[data-page="home"] .feature-art.motion-scene > img:first-child { width: 100%; border: 0; border-radius: 22px; box-shadow: 0 38px 90px rgba(0,0,0,.33); }
body[data-page="home"] .feature-art.motion-scene[data-motion-side="right"] > img:first-child { margin-left: 0; }
body[data-page="home"] .feature-art.motion-scene .motion-accent-frame { border-color: rgba(255,255,255,.13); border-radius: 16px; }
body[data-page="home"] .section.alt { padding: 105px 0; }
body[data-page="home"] .section.alt h2, body[data-page="home"] .cta h2 { text-transform: uppercase; font-size: clamp(42px, 5vw, 70px); }
body[data-page="home"] .grid.c4 { gap: 16px; }
body[data-page="home"] .grid.c4 .card { border-radius: 22px; border: 1px solid rgba(255,255,255,.18); background: linear-gradient(150deg, rgba(255,255,255,.16), rgba(255,255,255,.045)); padding: 27px 22px; transform: none; }
body[data-page="home"] .grid.c4 .card:hover { background: linear-gradient(145deg, rgba(101,233,239,.25), rgba(161,102,242,.22)); border-color: var(--accent); }
body[data-page="home"] .grid.c4 .card .ico { font-size: 25px; }
body[data-page="home"] .cta { border-top: 0; background: radial-gradient(50vw 38vw at 75% 20%, rgba(249,126,189,.28), transparent 80%), linear-gradient(115deg, #3844a0, #34569b 55%, #4a3087); }

.nexo-interlude { position: relative; overflow: hidden; background: radial-gradient(43vw 30vw at 22% 45%, rgba(94,226,240,.4), transparent 75%), linear-gradient(110deg, #244765, #413478); padding: 40px 0; }
.nexo-interlude .container { display: grid; grid-template-columns: minmax(200px, .75fr) minmax(0, 1fr); align-items: center; gap: 9%; }
.nexo-interlude img { width: min(100%, 350px); justify-self: center; filter: drop-shadow(0 16px 40px rgba(35,218,231,.16)); }
.nexo-interlude h2 { font-size: clamp(38px, 5vw, 72px); margin-bottom: 18px; }
.nexo-interlude p { color: var(--muted); font-size: 18px; line-height: 1.65; max-width: 540px; }

/* Cor presente em todas as páginas; só a tinta muda, sem animações pesadas. */
.accent { color: #8bf6ed; }
.hero .accent, .cta .accent { background: linear-gradient(100deg, #8af9ed, #c7a0ff, #ffadca, #8af9ed); background-size: 240% 100%; color: transparent; background-clip: text; -webkit-background-clip: text; animation: accent-shift 10s ease-in-out infinite alternate; }
.page-hero, .hero:not(.nexo-hero) { background: radial-gradient(60vw 50vw at 82% 14%, rgba(167,99,239,.48), transparent 72%), radial-gradient(50vw 35vw at 8% 72%, rgba(65,214,224,.32), transparent 72%), linear-gradient(130deg, #243e72, #39316f); }
.tag { background: rgba(111,236,240,.18); border-color: rgba(132,244,240,.45); color: #b4fff8; }
.marquee { background: linear-gradient(90deg, #23557d, #54429a, #385a9b); }
.marquee-track { color: #e2fffc; }
.card:nth-child(4n + 2), .plan:nth-child(4n + 2) { background: linear-gradient(145deg, rgba(149,95,227,.3), rgba(244,121,182,.1)); }
.card:nth-child(4n + 3), .plan:nth-child(4n + 3) { background: linear-gradient(145deg, rgba(57,189,219,.27), rgba(103,115,234,.11)); }
.card:nth-child(4n + 4) { background: linear-gradient(145deg, rgba(245,127,166,.2), rgba(121,105,233,.13)); }
body[data-page="home"] .grid.c4 .card:nth-child(4n + 2) { background: linear-gradient(145deg, rgba(149,95,227,.29), rgba(244,121,182,.14)); }
body[data-page="home"] .grid.c4 .card:nth-child(4n + 3) { background: linear-gradient(145deg, rgba(57,189,219,.29), rgba(103,115,234,.13)); }
body[data-page="home"] .grid.c4 .card:nth-child(4n + 4) { background: linear-gradient(145deg, rgba(245,127,166,.22), rgba(121,105,233,.14)); }
body[data-page="home"] .feature:nth-of-type(even) .feature-text { background: linear-gradient(145deg, rgba(170,119,247,.2), rgba(255,255,255,.045)); }
body[data-page="home"] .feature:nth-of-type(odd) .feature-text { background: linear-gradient(145deg, rgba(71,218,225,.19), rgba(255,255,255,.045)); }
@keyframes accent-shift { to { background-position: 100% 0; } }

@media (max-width: 960px) {
  .container { width: min(100% - 44px, 1300px); }
  body[data-page="home"] .nexo-hero > .container:first-child { min-height: 0; gap: 0; }
  .nexo-hero-art { min-height: 350px; }
  body[data-page="home"] .feature .container, body[data-page="home"] .feature.flip .container { gap: 36px; }
}
@media (max-width: 680px) {
  .container { width: calc(100% - 36px); }
  .topbar .container { height: 62px; }
  body[data-page="home"] .nexo-hero { padding: 68px 0 40px; }
  body[data-page="home"] .nexo-hero > .container:first-child { grid-template-columns: 1fr; }
  .nexo-hero-copy { padding-bottom: 0; }
  body[data-page="home"] .nexo-hero h1 { font-size: clamp(53px, 13vw, 75px); margin-top: 18px; }
  .nexo-hero-art { min-height: 280px; margin: 5px auto 20px; width: min(100%, 420px); }
  .nexo-hero-orbit { width: 290px; }
  .nexo-hero-art img { width: min(78%, 340px); }
  .nexo-product-caption { display: grid; gap: 4px; }
  .nexo-product > img { border-radius: 14px; min-height: 210px; }
  body[data-page="home"] .feature { padding: 75px 0; }
  body[data-page="home"] .feature h2 { font-size: clamp(35px, 9vw, 50px); }
  body[data-page="home"] .feature-art.motion-scene .motion-accent-frame { display: none; }
  .nexo-interlude { padding: 55px 0; }
  .nexo-interlude .container { grid-template-columns: 1fr; text-align: center; gap: 0; }
  .nexo-interlude img { width: min(60%, 220px); }
  .nexo-interlude p { margin-inline: auto; }
  body[data-page="home"] .grid.c4 { grid-template-columns: 1fr 1fr; gap: 0 18px; }
}
@media (max-width: 440px) { body[data-page="home"] .grid.c4 { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .nexo-hero-art img, .hero .accent, .cta .accent { animation: none; } }