/* NEXO STUDIO — preto profundo, azul elétrico, prata e movimento. */
/* As mesmas fontes, servidas junto ao site; licenças em assets/fonts. */
@font-face {
  font-family:'DM Sans'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(assets/fonts/dm-sans-v17-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family:'DM Sans'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(assets/fonts/dm-sans-v17-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family:Manrope; font-style:normal; font-weight:400 800; font-display:swap;
  src:url(assets/fonts/manrope-v20-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family:Manrope; font-style:normal; font-weight:400 800; font-display:swap;
  src:url(assets/fonts/manrope-v20-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root {
  --bg:#02040a; --surface:#071120; --text:#eef5ff; --muted:#a7b7cf;
  --blue:#1495ff; --ice:#74d8ff; --accent:#0867ff;
  --line:rgba(119,165,230,.2); --max:1240px;
  --ease:cubic-bezier(.22,1,.36,1);
}
* { box-sizing:border-box }
[hidden] { display:none!important }
html { scroll-behavior:smooth; scroll-padding-top:102px; scrollbar-gutter:stable }
html.is-loading { overflow:hidden }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.75 'DM Sans',Arial,sans-serif; -webkit-font-smoothing:antialiased }
a { color:inherit; text-decoration:none }
h1,h2,h3,p { margin:0 }
h1,h2,h3 { font-family:Manrope,Arial,sans-serif; font-weight:600; line-height:1.16; letter-spacing:-.045em }
button,input,textarea,select { font:inherit }
button { cursor:pointer }
a,button,summary { touch-action:manipulation; -webkit-tap-highlight-color:transparent }
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:2px solid var(--ice); outline-offset:5px }
::selection { background:#176efd; color:white }
.wrap { width:min(var(--max),88%); margin-inline:auto }
main,.footer { position:relative; z-index:2 }
.section { position:relative; padding-block:110px }
.skip { position:fixed; top:-100px; left:18px; z-index:100; background:white; color:#02040a; padding:12px 18px }
.skip:focus { top:14px }
.anchor-alias { position:absolute; top:0 }

/* Atmosfera luminosa em toda a página. */
.ambient { position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:0 }
.ambient-grid { position:absolute; inset:0; background-image:linear-gradient(#5fa8ff09 1px,transparent 1px),linear-gradient(90deg,#5fa8ff09 1px,transparent 1px); background-size:72px 72px; mask-image:linear-gradient(#0009,transparent 85%) }
.ambient-glow { position:absolute; width:85vw; height:85vh; border-radius:50%; filter:blur(28px); animation:aurora 22s ease-in-out infinite alternate }
.glow-one { top:-24%; right:-30%; background:radial-gradient(ellipse,#0867ff33,transparent 66%) }
.glow-two { bottom:-35%; left:-35%; background:radial-gradient(ellipse,#006bff28,transparent 68%); animation-delay:-12s }
.ambient-beam { position:absolute; width:65vw; height:70vh; top:-30%; right:-10%; background:linear-gradient(120deg,transparent 37%,#197bff08 43%,#a1d7ff12 48%,transparent 53%); transform:rotate(-18deg); animation:beam-drift 20s ease-in-out infinite alternate }
#particles { position:absolute; inset:0; width:100%; height:100%; opacity:.75 }
.scroll-progress { position:fixed; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,#1678ff,#94e8ff,#e9f6ff); transform:scaleX(var(--scroll,0)); transform-origin:left; z-index:50; box-shadow:0 0 13px #148aff }

/* Navegação com vidro e logo original. */
.header { position:fixed; inset:0 0 auto; height:86px; padding-inline:6%; display:flex; align-items:center; gap:30px; z-index:40; border-bottom:1px solid #78a6e411; transition:background .4s,border-color .4s,box-shadow .4s }
.header.scrolled { background:#020711d9; backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); border-color:#639ff32b; box-shadow:0 5px 24px #0003 }
.brand { display:flex; align-items:center; gap:10px; flex-shrink:0 }
.brand-symbol { width:38px; height:38px; filter:drop-shadow(0 0 9px #1488ff55); transition:filter .4s }
.brand-type { width:117px; height:38px }
.brand:hover .brand-symbol { filter:drop-shadow(0 0 15px #3aa9ffb0) }
.header nav { display:flex; gap:12px; margin-inline:auto; color:#b1c1db; font-size:14px }
.header nav a { padding:8px 12px; border-radius:24px; transition:color .25s,background .25s }
.header nav a:hover,.header nav a.active { color:#9cddff; background:#137fff15 }
.button { position:relative; display:inline-flex; align-items:center; justify-content:center; min-height:50px; border:1px solid #6b9fe34a; padding:13px 26px; border-radius:99px; background:#1167dc08; color:#eaf4ff; font-size:14px; font-weight:600; line-height:1.5; overflow:hidden; isolation:isolate; transition:box-shadow .3s,border-color .3s,background .3s,transform .35s var(--ease); transform:translate(var(--button-x,0),var(--button-y,0)) }
.button:hover { border-color:#89ceff; box-shadow:0 9px 35px #0771ff28 }
.button.primary { border-color:#7bcfff70; color:#020c20; background:linear-gradient(115deg,#eef7ff -10%,#7accff 28%,#389dff 70%,#2b6ee9); box-shadow:inset 0 1px 0 #fff8,0 8px 32px #087fff45; font-weight:700 }
.button.primary::after { content:''; position:absolute; z-index:-1; inset:-50% -90%; background:linear-gradient(110deg,transparent 35%,#fff9 47%,transparent 57%); transform:translateX(-50%); animation:button-shine 7s ease-in-out infinite }
.button.primary:hover { box-shadow:inset 0 1px 0 #fff9,0 10px 45px #147fff70 }
.header-contact { font-size:13px; min-height:44px; padding:11px 22px }
.menu { display:none }

/* Abertura com símbolo flutuante e órbitas. */
.hero { position:relative; display:grid; grid-template-columns:1.16fr 1fr; gap:48px; align-items:center; min-height:100svh; padding-top:150px; padding-bottom:125px }
.eyebrow { display:inline-flex; align-items:center; gap:12px; font-size:12px; font-weight:500; color:#79caff; line-height:1.7; letter-spacing:.14em }
.eyebrow i { width:27px; height:1px; background:linear-gradient(90deg,#e3f1ff,#008fff); box-shadow:0 0 8px #2399ff }
h1 { font-size:clamp(48px,5.2vw,76px); font-weight:600; letter-spacing:-.055em; line-height:1.1; margin:25px 0 }
.metal { background:linear-gradient(110deg,#fff 5%,#d9e4f7 22%,#93caff 37%,#edf8ff 49%,#43a5ff 60%,#c0dbff 75%,#fff 90%); background-size:240% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:metal-shine 10s ease-in-out infinite }
.hero h1 .metal { white-space:nowrap; text-shadow:0 0 38px #0086ff26 }
.muted { color:#9aabc4 }
.hero-copy>p { max-width:485px; font-size:17px; color:#afbed6; line-height:1.85 }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:23px; margin-top:33px }
.text-link { font-size:14px; display:inline-block; padding-bottom:5px; border-bottom:1px solid #72a8e349; transition:color .25s,border-color .25s,text-shadow .25s }
.text-link:hover { color:#84d2ff; border-color:#3aafff; text-shadow:0 0 15px #138fff60 }
.hero-fronts { margin-top:35px; padding-top:20px; border-top:1px solid #82b9fd20; max-width:480px }
.hero-fronts>span { font-size:10px; letter-spacing:.14em; color:#7d9abc }
.hero-fronts ul { display:flex; flex-wrap:wrap; gap:10px 18px; list-style:none; padding:0; margin:12px 0 0; font-size:12px; color:#bed5ef }
.hero-fronts li { display:flex; align-items:center; gap:7px }
.hero-fronts b { font-size:16px; font-weight:400; color:#60c7ff; text-shadow:0 0 13px #1c92ff77 }
.hero-art { position:relative; min-width:0; width:100%; max-width:485px; justify-self:center; transform:translateY(var(--hero-parallax,0)); will-change:transform }
.orbit-scene { width:100%; aspect-ratio:1; position:relative; perspective:900px }
.orbit-halo { position:absolute; inset:5%; border-radius:50%; background:radial-gradient(circle,#159cff40 5%,#085fff22 35%,#077bff0b 55%,transparent 72%); filter:blur(12px); animation:halo-breathe 5s ease-in-out infinite }
.orbit-track { position:absolute; inset:3%; border:1px solid #3fa5ff56; border-radius:50%; animation:orbit-spin 17s linear infinite; box-shadow:inset 0 0 24px #138cff06,0 0 20px #117aff09 }
.orbit-track::after { content:''; position:absolute; inset:-1px; border-radius:50%; background:conic-gradient(from 0deg,transparent 58%,#1687ff25 83%,#49baffb3 99%,transparent); mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px)); -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px)) }
.orbit-track i { position:absolute; left:50%; top:-5px; width:9px; height:9px; border-radius:50%; background:#75d7ff; box-shadow:0 0 12px #55c4ff,0 0 26px 5px #0d80ffbb }
.orbit-two { inset:15%; border-style:dashed; border-color:#a9c6f34a; animation-duration:25s; animation-direction:reverse }
.orbit-two i { width:6px; height:6px; top:-3px; background:#f0f7ff; box-shadow:0 0 14px 3px #bad8ff9e }
.orbit-two::after { opacity:.25 }
.orbit-three { inset:27%; border-color:#348aff6e; animation-duration:11s }
.orbit-three i { width:7px; height:7px; top:-4px; background:#329fff; box-shadow:0 0 22px 4px #138eff }
.logo-parallax { position:absolute; inset:25%; transform:rotateX(var(--logo-rx,0deg)) rotateY(var(--logo-ry,0deg)); transition:transform .5s var(--ease); transform-style:preserve-3d }
.logo-float { height:100%; display:grid; place-items:center; animation:logo-float 6s ease-in-out infinite }
.core-logo { display:block; width:100%; height:auto; overflow:hidden; filter:drop-shadow(0 0 26px #1488ff6e) drop-shadow(0 0 4px #7fd0ff40) }
.orbit-tag { position:absolute; z-index:3; border:1px solid #85b6ff3b; border-radius:99px; padding:8px 14px; background:#071326d9; color:#bfdbfa; backdrop-filter:blur(10px); font-size:10px; letter-spacing:.09em; line-height:1.5; box-shadow:0 5px 25px #0005; white-space:nowrap; animation:tag-float 7s ease-in-out infinite }
.tag-one { top:9%; right:-3% }
.tag-two { bottom:12%; left:-3%; color:#8ee2ff; border-color:#198cff70; animation-duration:8s; animation-delay:-3s }
.orbit-cross { position:absolute; width:14px; height:14px; opacity:.55 }
.orbit-cross::before,.orbit-cross::after { content:''; position:absolute; background:#90cfff }
.orbit-cross::before { width:14px; height:1px; top:6px }
.orbit-cross::after { width:1px; height:14px; left:6px }
.cross-one { top:26%; left:4%; animation:cross-turn 16s linear infinite }
.cross-two { right:12%; bottom:10%; animation:cross-turn 22s linear infinite reverse }
.art-signature { display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:13px }
.art-signature svg { width:175px; height:auto }
.art-signature>span { font-size:9px; letter-spacing:.13em; color:#87a8cd }
.hero-bottom { position:absolute; inset:auto 0 22px; display:flex; justify-content:space-between; align-items:center; gap:20px; font-size:10px; letter-spacing:.12em; color:#8ea8ca }
.hero-bottom>a { display:flex; align-items:center; gap:11px; font-size:10px; color:#c1d6ee }
.scroll-cue { width:1px; height:31px; background:#386493; position:relative; overflow:hidden }
.scroll-cue::after { content:''; position:absolute; inset:0; background:#8bd6ff; box-shadow:0 0 8px #1184ff; animation:scroll-cue 2.2s var(--ease) infinite }
.effects-toggle { padding:12px 0 12px 12px; border:0; background:none; color:#abc3df; display:inline-flex; gap:12px; align-items:center; font-size:12px; line-height:1.4 }
.effects-toggle span { color:#5fc3ff; font-size:16px }

/* Entradas na rolagem e faixa contínua. */
.ticker { position:relative; z-index:3; overflow:hidden; border-block:1px solid #258fff35; padding-block:23px; background:linear-gradient(100deg,#06225099,#071127bb,#05275299); box-shadow:0 0 30px #0877ff09 }
.ticker-track { display:flex; width:max-content; animation:ticker-run 30s linear infinite }
.ticker-group { display:flex; align-items:center; gap:44px; padding-right:44px; flex-shrink:0 }
.ticker span { font-family:Manrope,Arial,sans-serif; font-size:19px; font-weight:700; letter-spacing:.13em; white-space:nowrap }
.ticker .outline { color:transparent; -webkit-text-stroke:1px #b8d4f88c }
.ticker b { color:#32aeff; text-shadow:0 0 16px #1688ff; font-weight:400 }
.has-motion .reveal { opacity:0; transform:translateY(30px); transition:opacity .85s var(--ease),transform .85s var(--ease),border-color .35s,box-shadow .35s,background .35s; transition-delay:var(--reveal-delay,0ms),var(--reveal-delay,0ms),0ms,0ms,0ms }
.has-motion .reveal.is-visible { opacity:1; transform:translateY(0) }
.has-motion .hero-copy>.eyebrow,.has-motion .hero-copy h1,.has-motion .hero-copy>p,.has-motion .hero-copy .actions,.has-motion .hero-fronts { animation:hero-enter 1s var(--ease) both }
.has-motion .hero-copy h1 { animation-delay:.12s }
.has-motion .hero-copy>p { animation-delay:.23s }
.has-motion .hero-copy .actions { animation-delay:.34s }
.has-motion .hero-fronts { animation-delay:.45s }
.has-motion .orbit-scene { animation:scene-enter 1.5s var(--ease) .2s both }
.is-loading.has-motion .hero-copy>.eyebrow,.is-loading.has-motion .hero-copy h1,.is-loading.has-motion .hero-copy>p,.is-loading.has-motion .hero-copy .actions,.is-loading.has-motion .hero-fronts,.is-loading.has-motion .orbit-scene { animation:none; opacity:0 }
.section-label { display:flex; justify-content:space-between; gap:24px; font-size:11px; letter-spacing:.12em; color:#8fa9c9; padding-bottom:20px; border-bottom:1px solid var(--line); margin-bottom:42px; position:relative }
.section-label::after { content:''; position:absolute; left:0; bottom:-1px; width:82px; height:1px; background:linear-gradient(90deg,#90d7ff,#1886ff,transparent); box-shadow:0 0 13px #087cff }
.section-label>span:first-child { color:#76c8ff }
.section-heading { display:grid; grid-template-columns:1.35fr 1fr; align-items:end; gap:75px; margin-bottom:49px }
h2 { font-size:clamp(33px,3.65vw,52px) }
.section-heading>p { max-width:420px; color:#aebdd5; font-size:16px; line-height:1.85 }
.problem-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; perspective:1200px }
.problem-tag { display:block; color:#69c6ff; font-size:12px; letter-spacing:.06em; margin-bottom:15px }
.problem-grid article { border:1px solid #579be42b; border-radius:16px; background:linear-gradient(145deg,#0b1c3494,#040913cf); padding:30px; position:relative; overflow:hidden }
.number { display:block; font-family:Manrope,Arial,sans-serif; font-size:53px; line-height:1; letter-spacing:-.05em; font-weight:600; color:transparent; background:linear-gradient(180deg,#83caffba,#1a7cff20); background-clip:text; -webkit-background-clip:text; margin-bottom:23px }
.problem-grid h3 { font-size:20px; font-weight:600; margin-bottom:13px; letter-spacing:-.02em }
.problem-grid p { color:var(--muted); font-size:15px }

/* O manifesto acompanha a progressão da leitura. */
.manifesto { position:relative; height:215svh; margin-block:0; z-index:2 }
.manifesto-stage { position:sticky; top:0; min-height:100svh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; overflow:hidden; padding:105px 6% 75px }
.manifesto-glow { position:absolute; inset:0; background:radial-gradient(ellipse 40% 43% at 50% 45%,#005dff45,transparent 75%); opacity:var(--manifesto-glow,1); pointer-events:none }
/* Logo sem fundo. O brilho azul atrás dela (--emblem-glow, de 0 a 1) cresce conforme a pessoa rola. */
.manifesto-logo { position:relative; display:grid; place-items:center; width:clamp(96px,10.5vw,152px); margin-bottom:30px; transform:scale(var(--emblem-scale,1)); opacity:var(--emblem-opacity,1) }
.mf-aura,.mf-core { position:absolute; left:50%; top:50%; translate:-50% -50%; border-radius:50%; pointer-events:none }
.mf-aura { width:430%; aspect-ratio:1; background:radial-gradient(circle,#146eff9e 0,#0a5aff42 22%,#063cc81a 42%,transparent 64%); opacity:calc(.05 + var(--emblem-glow,1) * .95); scale:calc(.45 + var(--emblem-glow,1) * .8) }
.mf-core { width:175%; aspect-ratio:1; background:radial-gradient(circle,#8fd8ffb0 0,#2c8cff5c 34%,transparent 66%); mix-blend-mode:screen; opacity:calc(var(--emblem-glow,1) * var(--emblem-glow,1) * .9); scale:calc(.5 + var(--emblem-glow,1) * .65) }
.manifesto-emblem { position:relative; z-index:1; display:block; width:100%; height:auto; filter:brightness(calc(.62 + var(--emblem-glow,1) * .42)) drop-shadow(0 0 calc(4px + var(--emblem-glow,1) * 26px) rgba(30,140,255,calc(.15 + var(--emblem-glow,1) * .75))) }
.manifesto-stage>.eyebrow { font-size:10px; margin-bottom:24px }
.manifesto h2 { position:relative; max-width:850px; font-size:clamp(35px,4.75vw,63px); font-weight:600; line-height:1.23; letter-spacing:-.05em }
.manifesto-word { display:inline-block; opacity:var(--word-opacity,1); transform:translateY(var(--word-y,0)); will-change:opacity,transform }
.manifesto-sub { position:relative; font-size:11px; letter-spacing:.16em; color:#85c5ff; margin-top:28px; opacity:var(--sub-opacity,1) }

/* Evita somar a animação nativa ao deslocamento suave da roda do mouse. */
html.is-smooth-scrolling { scroll-behavior:auto }

/* Ecossistema, linha luminosa e cartões com vidro. */
.ecosystem { background:radial-gradient(ellipse 65% 80% at 15% 50%,#033e971e,transparent 75%),#030810a8; border-block:1px solid #268fff24 }
.connection { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; position:relative; perspective:1000px }
.connection-energy { position:absolute; left:3%; right:3%; top:47%; height:1px; background:#0f71f457; box-shadow:0 0 13px #008bff4a; overflow:hidden }
.connection-energy::after { content:''; position:absolute; top:0; left:-30%; width:30%; height:1px; background:linear-gradient(90deg,transparent,#90ddff,transparent); box-shadow:0 0 12px #199bff; animation:flow-run 4s linear infinite }
.node { position:relative; z-index:1; text-align:left; border:1px solid #67a2ec3b; border-radius:13px; background:linear-gradient(150deg,#0d2038e8,#04101cef); color:var(--text); padding:27px 24px; transition:border-color .35s,box-shadow .35s,background .35s; overflow:hidden }
.node.active { border-color:#45b3ff9c; background:linear-gradient(150deg,#093d7ccc,#041b3ce8); box-shadow:inset 0 0 35px #0b8dff15,0 8px 40px #046dff18 }
.node.active::after { content:''; position:absolute; bottom:0; left:0; width:100%; height:2px; background:linear-gradient(90deg,#096cff,#91e2ff); box-shadow:0 0 15px #0084ff; animation:active-breathe 4s ease-in-out infinite }
.node-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:32px; font-size:12px; color:#8fbbf0 }
.node-top>span:last-child { font-size:27px; color:#77c8ff; text-shadow:0 0 20px #178bff77 }
.node strong { display:block; font-size:26px; font-family:Manrope,Arial,sans-serif; font-weight:500; letter-spacing:-.025em; line-height:1.3 }
.node small { display:block; margin-top:6px; color:#a2bedf; font-size:13px }
.connection-detail { display:grid; grid-template-columns:.6fr 2fr auto; align-items:start; gap:33px; padding:31px 0 36px; min-height:165px }
.connection-detail h3 { font-size:21px; margin-bottom:10px; letter-spacing:-.025em }
.connection-detail p { color:#afc0d9; font-size:15px; max-width:690px }
.connection-detail .text-link { white-space:nowrap }
.connection-detail.switching { animation:detail-enter .45s var(--ease) }
.data-loop { display:flex; align-items:center; gap:23px; border-top:1px solid var(--line); padding-top:28px }
.data-loop>span:first-child { color:#55beff; font-size:42px; line-height:1; text-shadow:0 0 22px #1492ff6b; animation:orbit-spin 20s linear infinite }
.data-loop h3 { font-size:19px; letter-spacing:-.01em; margin-bottom:8px }
.data-loop p { color:var(--muted); font-size:14px; max-width:740px }
.loop-caption { margin-left:auto; white-space:nowrap; color:#78bff4; font-size:10px; letter-spacing:.1em }

/* Cada frente tem sua própria animação. */
.service-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; perspective:1500px }
.service-card { position:relative; padding:31px; border:1px solid #609ee43b; border-radius:18px; background:linear-gradient(150deg,#0e254493,#030910e8); overflow:hidden; transform-style:preserve-3d; transition:border-color .35s,box-shadow .35s; min-height:420px }
.card-top { display:flex; align-items:center; justify-content:space-between; color:#8dc9ff; font-size:11px; letter-spacing:.09em; margin-bottom:34px }
.card-top>span:last-child { font-size:26px; text-shadow:0 0 17px #128fff88 }
.service-card h3 { font-size:29px; max-width:53%; margin-bottom:19px; letter-spacing:-.035em; line-height:1.22 }
.service-card>p { max-width:53%; color:var(--muted); font-size:14px; line-height:1.8 }
.service-card ul { list-style:none; padding:0; margin:24px 0; max-width:55%; color:#c3d8f3; font-size:13px }
.service-card li { padding-block:8px; border-bottom:1px solid #76baff15; line-height:1.6 }
.service-card .text-link { font-size:13px }
.service-preview { position:absolute; top:86px; right:24px; width:40%; height:210px; border-radius:13px; background:radial-gradient(ellipse at 50% 60%,#167aff29,transparent 75%); pointer-events:none }
.preview-video { border:1px solid #168aff1c; display:grid; place-items:center; overflow:hidden }
.preview-corner { position:absolute; width:18px; height:18px; border-color:#a0d4ff; border-style:solid; filter:drop-shadow(0 0 5px #138eff) }
.preview-corner.tl { top:15px; left:15px; border-width:1px 0 0 1px }
.preview-corner.br { bottom:15px; right:15px; border-width:0 1px 1px 0 }
.preview-play { font-size:59px; line-height:1; color:#dbf3ff; text-shadow:0 0 18px #389cff8c; transform:translateY(-17px); animation:play-breathe 4s ease-in-out infinite }
.waveform { position:absolute; left:13%; right:13%; bottom:42px; height:33px; display:flex; align-items:center; justify-content:center; gap:5px }
.waveform i { width:4px; height:100%; border-radius:2px; background:linear-gradient(#a2e6ff,#0569ff); transform:scaleY(.25); animation:wave 2.2s ease-in-out infinite alternate; box-shadow:0 0 6px #0984ff55 }
.waveform i:nth-child(3n) { animation-delay:-.9s }
.waveform i:nth-child(2n) { animation-delay:-1.5s }
.waveform i:nth-child(5n) { animation-duration:1.4s }
.video-progress { position:absolute; bottom:22px; left:13%; right:13%; height:2px; background:#147fff24; overflow:hidden }
.video-progress::after { content:''; position:absolute; inset:0; background:#80cfff; transform-origin:left; animation:video-play 5s linear infinite; box-shadow:0 0 9px #0889ff }
.preview-social { perspective:900px }
.social-mini { position:absolute; width:73%; height:72%; border:1px solid #81bdff65; background:linear-gradient(155deg,#174a85,#071326); padding:18px 14px; border-radius:9px; box-shadow:0 15px 30px #0006; overflow:hidden }
.social-mini>span { font-size:7px; letter-spacing:.1em; color:#adceef; display:block }
.social-mini strong { display:block; font-family:Manrope,Arial,sans-serif; font-size:23px; line-height:1.2; margin-top:15px; color:#e0f2ff; font-weight:600 }
.social-mini.back { left:0; top:10%; transform:rotate(-12deg); animation:social-back 8s ease-in-out infinite }
.social-mini.front { right:0; bottom:3%; transform:rotate(8deg); background:linear-gradient(150deg,#0b67c9,#073672 53%,#050e1d); animation:social-front 7s ease-in-out infinite }
.social-mini.front strong { font-size:17px }
.social-mini strong span { display:block; font-size:55px; color:#8bdaff; text-shadow:0 0 20px #0b82ff; margin-top:8px; animation:orbit-spin 28s linear infinite; width:55px }
.preview-web { display:grid; place-items:center; perspective:700px }
.mini-browser { width:100%; height:85%; border:1px solid #6398d67a; border-radius:9px; background:#041324; box-shadow:0 12px 40px #0077ff1c; transform:rotateY(-9deg) rotateX(4deg); animation:web-float 8s ease-in-out infinite; overflow:hidden }
.browser-dots { display:block; padding:6px 11px; border-bottom:1px solid #85bfff26; color:#609aca; font-size:7px; letter-spacing:2px }
.mini-browser>div { padding:17px 16px; background:radial-gradient(ellipse at 100% 60%,#137aff3d,transparent 75%) }
.mini-browser>div>span { font-size:7px; letter-spacing:.13em; color:#9ecaff }
.mini-browser strong { display:block; font-family:Manrope,Arial,sans-serif; font-size:26px; line-height:1.2; font-weight:500; margin:8px 0 13px; color:#e5f4ff }
.mini-browser i { display:block; width:63px; height:15px; border-radius:99px; background:linear-gradient(110deg,#a9dfff,#086eff); box-shadow:0 0 18px #0b8bff7a; animation:active-breathe 4s ease-in-out infinite }
.web-cursor { position:absolute; right:20%; bottom:20%; width:8px; height:14px; background:#edf6ff; clip-path:polygon(0 0,100% 72%,50% 75%,20% 100%); filter:drop-shadow(0 2px 4px #000); animation:cursor-travel 7s ease-in-out infinite }
.preview-chat { display:flex; flex-direction:column; justify-content:center; gap:16px; padding:10px 0 }
.chat-mini { border:1px solid #76b5ff40; border-radius:13px 13px 13px 3px; padding:13px 11px; font-size:11px; color:#d1e4ff; background:#0c2039; width:88%; animation:chat-float 6s ease-in-out infinite }
.chat-mini.response { margin-left:auto; border-radius:13px 13px 3px 13px; background:linear-gradient(120deg,#095fc1,#124185); border-color:#50a8ff69; animation-delay:-3s; box-shadow:0 6px 23px #005fff20 }
.typing { display:flex; align-items:center; gap:4px; padding:10px; border:1px solid #8abbff30; border-radius:12px; background:#0b192b; width:43px }
.typing i { width:4px; height:4px; border-radius:50%; background:#7fcaff; animation:typing-bounce 1.6s ease-in-out infinite }
.typing i:nth-child(2) { animation-delay:.2s }
.typing i:nth-child(3) { animation-delay:.4s }

/* Luz que acompanha o cursor, contorno brilhante e inclinação leve (o JavaScript escreve --mx, --my, --tilt-x e --tilt-y).
   Inclinação usa `transform`; o pulinho usa `translate` e `scale`, para cada um ter o seu tempo. */
.tilt-card { --tilt-x:0deg; --tilt-y:0deg; transform:perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); transition:transform .7s var(--ease),translate .5s var(--ease),scale .5s var(--ease),border-color .35s,box-shadow .35s }
.tilt-card::before,.tilt-card::after,.node::before { content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit; opacity:0; transition:opacity .35s }
.tilt-card::before,.node::before { background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),#3aa9ff30,#1488ff12 42%,transparent 68%) }
.tilt-card::after { padding:1px; background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),#8fdcff,#2f9bff99 38%,transparent 70%); -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,linear-gradient(#000 0 0); mask-composite:exclude }
.tilt-card.tilt-live { translate:0 -7px; scale:1.012; will-change:transform; border-color:#54adff84; box-shadow:0 24px 60px #000a,0 0 38px #087cff26 }
.tilt-card.tilt-live::before,.tilt-card.tilt-live::after,.node.node-live::before,.node:focus-visible::before { opacity:1 }
.has-motion .tilt-card.reveal { transform:perspective(1100px) translateY(30px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); transition:opacity .85s var(--ease),transform .7s var(--ease),translate .5s var(--ease),scale .5s var(--ease),border-color .35s,box-shadow .35s; transition-delay:var(--reveal-delay,0ms),var(--reveal-delay,0ms),0ms,0ms,0ms,0ms }
.has-motion .tilt-card.reveal.is-visible { transform:perspective(1100px) translateY(0) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) }
.has-motion .tilt-card.reveal.tilt-live { transition:opacity .85s var(--ease),transform .16s ease-out,translate .5s var(--ease),scale .5s var(--ease),border-color .35s,box-shadow .35s; transition-delay:0ms }
/* Etapas do ecossistema: a caixa dá uma leve saltada quando o cursor passa (ou quando recebe o foco do teclado). */
.has-motion .node.reveal.is-visible.node-live,.has-motion .node.reveal.is-visible:focus-visible { transform:translateY(-10px); transition:opacity .85s var(--ease),transform .5s cubic-bezier(.34,1.56,.64,1),border-color .35s,box-shadow .35s,background .35s; transition-delay:0ms }
.node.node-live,.node:focus-visible { border-color:#74cfff; box-shadow:0 20px 44px #002467a0,0 0 32px #1488ff33 }

/* A linha do processo se preenche com a rolagem. */
.process-grid { margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:34px; position:relative }
.process-grid::before,.process-grid::after { content:''; position:absolute; left:20px; right:20px; top:20px; height:1px; background:#3b86dd3b; z-index:0 }
.process-grid::after { background:linear-gradient(90deg,#0879ff,#77dbff); box-shadow:0 0 13px #117aff; transform:scaleX(var(--rail-progress,0)); transform-origin:left }
.process-grid li { position:relative; padding-top:0 }
.process-grid li>span { width:40px; height:40px; display:grid; place-items:center; position:relative; z-index:1; border:1px solid #77beff63; border-radius:50%; background:#051326; color:#98d7ff; font-size:12px; box-shadow:0 0 17px #197aff17 }
.process-grid h3 { font-size:23px; margin:25px 0 13px; letter-spacing:-.03em }
.process-grid p { color:var(--muted); font-size:15px }
.partnerships { background:radial-gradient(ellipse at 80% 0%,#0055f52e,transparent 60%),#040a15b5; border-block:1px solid #208fff28 }
.package-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:19px; perspective:1200px }
.package-grid article { position:relative; padding:34px 29px; border:1px solid #609cec42; border-radius:17px; background:linear-gradient(145deg,#0a1b2dba,#040911d6); display:flex; flex-direction:column; overflow:hidden }
.package-grid h3 { font-size:29px; margin:20px 0; letter-spacing:-.035em }
.package-grid p { color:#acbfd9; font-size:15px }
.package-no { color:#5bb5ff; font-size:12px; letter-spacing:.1em }
.package-badge { align-self:start; color:#bcE8ff; font-size:9px; letter-spacing:.11em; padding:4px 9px; border:1px solid #53b8ff5c; border-radius:99px; margin-bottom:14px }
.package-grid .package-fronts { font-size:12px; color:#82caff; margin-bottom:17px }
.package-grid .package-for { font-size:16px; color:#d0def0 }
.package-plus { padding-inline:4px }
.package-grid ul { list-style:none; padding:0; margin:26px 0 30px; color:#c6dcf5; font-size:14px }
.package-grid li { padding-block:9px; border-bottom:1px solid #80b4f714 }
.package-grid .button { margin-top:auto; align-self:start; font-size:13px }
.package-grid .package-featured { border-color:#3db2ff9e; background:linear-gradient(145deg,#123f7ba8,#072244b8 54%,#050e20); box-shadow:0 0 50px #005bff22,inset 0 1px 0 #91d1ff33 }
.featured-line { position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,#6ed5ff,#dfedff,transparent); box-shadow:0 0 25px #2199ff; animation:active-breathe 5s ease-in-out infinite; pointer-events:none }
.scope-note { color:#829bbe; font-size:13px; margin-top:24px }
.faq-head { margin-bottom:46px }
.faq h2 { margin-top:21px }
.faq-list { counter-reset:faq }
.faq-list details { counter-increment:faq; position:relative; border-bottom:1px solid var(--line); transition:background .35s,border-color .35s }
.faq-list details:first-child { border-top:1px solid var(--line) }
.faq-list details::before { content:''; position:absolute; left:0; top:-1px; bottom:-1px; width:2px; background:linear-gradient(#9ddcff,#1886ff); box-shadow:0 0 14px #087cff; transform:scaleY(0); transition:transform .4s var(--ease) }
.faq-list details:hover,.faq-list details[open] { background:linear-gradient(90deg,#1478ff1c,#1478ff09 55%,transparent) }
.faq-list details:hover,.faq-list details[open] { border-bottom-color:#3aa5ff55 }
.faq-list details:hover::before,.faq-list details[open]::before { transform:scaleY(1) }
summary { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:24px; cursor:pointer; list-style:none; font-size:16px; transition:color .3s }
summary::-webkit-details-marker { display:none }
summary::after { content:'+'; color:#5bc6ff; font-size:24px; font-weight:400; transition:transform .3s }
details[open] summary::after { transform:rotate(45deg) }
details p { color:#a8bdd9; font-size:15px; padding:0 28px 24px 0; animation:detail-enter .35s var(--ease) }
.faq-list summary { justify-content:flex-start; gap:22px; padding:26px 24px }
.faq-list summary::before { content:counter(faq,decimal-leading-zero); min-width:26px; color:#5bb5ff; font-size:12px; letter-spacing:.1em }
.faq-list summary::after { margin-left:auto }
.faq-list details:hover summary,.faq-list details[open] summary { color:#cdeeff }
.faq-list details p { max-width:880px; padding:0 72px 28px 72px }
.contact { position:relative; background:radial-gradient(ellipse 65% 85% at 10% 50%,#085add3d,transparent 76%),#03081299; border-top:1px solid #209aff26 }
.contact::before { content:''; position:absolute; top:0; height:1px; left:15%; right:15%; background:linear-gradient(90deg,transparent,#218fff,#9ad5ff,#218fff,transparent); box-shadow:0 0 18px #218aff }
.contact-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:88px; align-items:center }
.contact h2 { font-size:clamp(35px,4.2vw,59px); margin:25px 0 }
.contact p { max-width:420px; color:#acbdd7 }
.phone { display:block; font-size:22px; color:#cfeaff; margin-top:32px; letter-spacing:-.02em; text-shadow:0 0 19px #148dff3d }
.contact-note { display:block; font-size:10px; letter-spacing:.1em; color:#77b4e3; margin-top:13px }
.brief { border:1px solid #549feb5e; background:linear-gradient(145deg,#10366a57,#04101edb 57%); border-radius:18px; padding:33px; box-shadow:inset 0 1px 0 #acd9ff20,0 20px 70px #0006; backdrop-filter:blur(12px) }
.brief h3 { font-size:24px; margin-bottom:25px }
.brief label { display:block; color:#c8def9; font-size:14px; margin:17px 0 8px }
.brief label span { font-size:12px; color:#93aac8 }
input,select,textarea { display:block; width:100%; padding:12px 14px; min-height:48px; border:1px solid #8dbdff36; border-radius:8px; color:#eef7ff; background:#020914ae; font-size:14px; transition:border-color .25s,box-shadow .25s }
input::placeholder,textarea::placeholder { color:#829bbd }
input:focus,select:focus,textarea:focus { border-color:#38a2ff; box-shadow:0 0 17px #0a7fff17 }
select { color-scheme:dark }
textarea { resize:vertical }
.brief .button { width:100%; margin-top:24px }
.brief .form-note { color:#8fabcf; font-size:12px; line-height:1.6; margin-top:15px }
.brief fieldset { padding:0; border:0; margin:0 0 22px; min-width:0 }
.brief legend { font-family:Manrope,Arial,sans-serif; font-size:23px; line-height:1.35; letter-spacing:-.035em; color:#edf6ff; margin-bottom:10px }
.brief .form-hint,.brief .form-subhint { font-size:12px; color:#a4bddc; line-height:1.7; margin-bottom:12px }
.brief .form-subhint { margin-top:18px }
.service-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px }
.brief .service-choices label { position:relative; margin:0; cursor:pointer }
.service-choices input { position:absolute; opacity:0; inset:0; width:100%; height:100%; padding:0; margin:0; min-height:0; cursor:pointer }
.brief .service-choices label>span { display:flex; align-items:center; gap:7px; padding:12px 10px; min-height:49px; height:100%; border:1px solid #79acF53b; border-radius:9px; color:#c8def9; font-size:11px; line-height:1.55; transition:background .3s,border-color .3s,box-shadow .3s }
.service-choices em { font-style:normal; color:#60c7ff; font-size:17px }
.service-choices b { margin-left:auto; font-weight:400; color:#7ab4ee; font-size:15px }
.service-choices input:checked+span { background:#096de938; border-color:#50b9ffb0; box-shadow:inset 0 0 20px #0c89ff15,0 0 15px #0b83ff15; color:#f1f8ff }
.service-choices input:focus-visible+span { outline:2px solid #7ad9ff; outline-offset:3px }
.service-choices input:checked+span b { color:#99e6ff }
.choice-full { grid-column:1/-1 }
.brief .note-label { font-size:13px }
.brief-fields { display:grid; grid-template-columns:1fr; gap:0 }
.process-contact { color:#96badd; font-size:13px; margin-top:32px }
/* Último convite, com os mesmos efeitos dos botões do restante do site. */
.final-cta { padding-block:92px; text-align:center; border-block:1px solid #5d9cd91c; background:radial-gradient(ellipse 55% 72% at 50% 55%,#075ab71a,transparent 75%) }
.final-cta-content { max-width:1000px }
.final-cta h2 { max-width:880px; margin:22px auto 24px; font-size:clamp(34px,3.8vw,52px); font-weight:500; line-height:1.16 }
.final-cta p { max-width:600px; margin-inline:auto; font-size:16px; line-height:1.8; color:#afbed6 }
.final-cta-button { gap:12px; margin-top:36px; min-height:60px; min-width:256px; max-width:100%; padding:18px 32px; font-size:16px }
.footer { padding-top:76px; padding-bottom:35px }
.footer-top { display:grid; grid-template-columns:minmax(0,1.35fr) repeat(2,minmax(0,1fr)); align-items:start; gap:clamp(24px,5vw,72px) }
.footer-about { max-width:380px }
.footer-about .brand { margin-bottom:18px }
.footer-about p { font-size:14px; line-height:1.85; color:#9fb4d2 }
.footer-col h3 { margin:0 0 22px; font-family:'DM Sans',Arial,sans-serif; font-size:11px; font-weight:500; letter-spacing:.16em; line-height:1.5; color:#76c8ff }
.footer-col ul { list-style:none; margin:0; padding:0; display:grid; gap:13px }
.footer-col a { display:inline-block; font-size:14px; line-height:1.5; color:#b9cae3; transition:color .25s,transform .3s var(--ease),text-shadow .25s }
.footer-col a:hover { color:#9cddff; transform:translateX(4px); text-shadow:0 0 16px #138fff55 }
.footer-contact a { white-space:nowrap }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-top:48px; border-top:1px solid var(--line); padding-top:24px; font-size:11px; color:#8fa8c9 }
.footer-bottom>span:nth-child(2) { font-size:10px; letter-spacing:.1em }
.to-top { display:inline-flex; align-items:center; gap:8px; color:#a9c9ec; transition:color .25s }
.to-top:hover { color:#9cddff }
.floating { position:fixed; bottom:max(23px,env(safe-area-inset-bottom)); right:max(23px,env(safe-area-inset-right)); width:54px; height:54px; display:grid; place-items:center; color:#d3edff; border:1px solid #75c5ff88; border-radius:50%; background:linear-gradient(145deg,#1478d5,#06408b); z-index:45; transition:transform .3s,opacity .3s; isolation:isolate }
.floating::before,.floating::after { content:''; position:absolute; inset:0; border-radius:inherit; z-index:-1; pointer-events:none }
.floating::before { box-shadow:0 7px 25px #006cff55,inset 0 1px 0 #b0dcff38; animation:fab-breathe-low 4s ease-in-out infinite }
.floating::after { box-shadow:0 7px 40px #147bff85,inset 0 1px 0 #d6f1ff55; animation:fab-breathe 4s ease-in-out infinite }
.floating svg { width:26px; height:26px }
.floating:hover { transform:translateY(-3px) }
.floating.is-hidden { opacity:0; pointer-events:none; transform:translateY(20px) }

/* Tela de abertura: só a logo sem fundo. O brilho azul atrás dela cresce com o carregamento (--pl, de 0 a 1);
   quando chega ao fim (.is-sparking) há uma faísca azul e em seguida a tela some (.is-entered). */
.preloader { --pl:0; display:none; position:fixed; inset:0; z-index:300; place-items:center; overflow:hidden; background:radial-gradient(ellipse at 50% 46%,#041022 0,#02040a 64%); transition:opacity .95s ease,visibility 0s linear .95s }
.js .preloader { display:grid }
.js.is-entered .preloader { opacity:0; visibility:hidden; pointer-events:none }
.pre-stage { position:relative; display:grid; place-items:center; transition:transform 1.1s var(--ease) }
.js.is-entered .pre-stage { transform:scale(1.07) }
.pre-logo { position:relative; width:clamp(230px,30vw,400px); aspect-ratio:805/755; opacity:0; animation:pre-in .9s ease-out .1s forwards }
.pre-mark { position:relative; z-index:2; display:block; width:100%; height:100%; filter:brightness(calc(.55 + var(--pl) * .5)) drop-shadow(0 0 calc(3px + var(--pl) * 26px) rgba(30,140,255,calc(.12 + var(--pl) * .8))) }
.pre-aura,.pre-core { position:absolute; left:50%; top:40%; translate:-50% -50%; border-radius:50%; pointer-events:none; z-index:1 }
.pre-aura { width:280%; aspect-ratio:1; background:radial-gradient(circle,#146eff9e 0,#0a5aff42 22%,#063cc81a 42%,transparent 64%); opacity:calc(.04 + var(--pl) * .96); scale:calc(.4 + var(--pl) * .85) }
.pre-core { width:125%; aspect-ratio:1; background:radial-gradient(circle,#8fd8ffc0 0,#2c8cff66 34%,transparent 66%); mix-blend-mode:screen; opacity:calc(var(--pl) * var(--pl) * .85); scale:calc(.5 + var(--pl) * .6) }
.pre-spark { position:absolute; left:50%; top:40%; width:0; height:0; z-index:3; pointer-events:none }
.sp-flash { position:absolute; left:0; top:0; width:min(120vw,760px); aspect-ratio:1; translate:-50% -50%; border-radius:50%; background:radial-gradient(circle,#fff 0,#bfeaff 8%,#3aa2ff80 24%,#0a63ff22 46%,transparent 66%); opacity:0; scale:.1 }
.sp-streak { position:absolute; left:0; top:0; width:min(150vw,980px); height:2px; translate:-50% -50%; background:linear-gradient(90deg,transparent,#8fd8ff 22%,#fff 50%,#8fd8ff 78%,transparent); box-shadow:0 0 18px 3px #2fa8ff99; opacity:0; scale:0 1 }
.sp-ray,.sp-dot { position:absolute; left:0; top:0; opacity:0; rotate:var(--a); transform-origin:50% 0 }
.sp-ray { width:2px; height:var(--len); margin-left:-1px; border-radius:2px; background:linear-gradient(#fff,#79d3ff 45%,transparent); box-shadow:0 0 8px #3aa8ff }
.sp-dot { width:4px; height:4px; margin-left:-2px; border-radius:50%; background:#fff; box-shadow:0 0 10px 2px #49b4ff }
.is-sparking .sp-flash { animation:sp-flash 1.05s cubic-bezier(.2,.7,.2,1) forwards }
.is-sparking .sp-streak { animation:sp-streak .95s cubic-bezier(.2,.7,.2,1) forwards }
.is-sparking .sp-ray { animation:sp-ray .95s cubic-bezier(.1,.75,.2,1) var(--dl,0s) forwards }
.is-sparking .sp-dot { animation:sp-dot 1.05s cubic-bezier(.1,.75,.2,1) var(--dl,0s) forwards }
.is-sparking .pre-mark { animation:pre-flare .9s ease-out forwards }
@keyframes pre-in { from{opacity:0;scale:.95} to{opacity:1;scale:1} }
@keyframes pre-flare { 0%{filter:brightness(1) drop-shadow(0 0 24px rgba(30,140,255,.9))} 22%{filter:brightness(2.1) drop-shadow(0 0 48px rgba(130,210,255,1))} 100%{filter:brightness(1.12) drop-shadow(0 0 30px rgba(30,140,255,.8))} }
@keyframes sp-flash { 0%{opacity:0;scale:.1} 18%{opacity:1} 100%{opacity:0;scale:1.35} }
@keyframes sp-streak { 0%{opacity:0;scale:0 1} 20%{opacity:1;scale:.8 1} 100%{opacity:0;scale:1.15 .4} }
@keyframes sp-ray { 0%{opacity:0;transform:translateY(36px) scaleY(.2)} 14%{opacity:1} 100%{opacity:0;transform:translateY(var(--r1)) scaleY(1.5)} }
@keyframes sp-dot { 0%{opacity:0;transform:translateY(30px) scale(.4)} 14%{opacity:1} 100%{opacity:0;transform:translateY(var(--r1)) scale(.2)} }

/* Animações com luz azul e cores da identidade. */
@keyframes orbit-spin { to { transform:rotate(360deg) } }
@keyframes halo-breathe { 0%,100%{opacity:.65;transform:scale(.94)} 50%{opacity:1;transform:scale(1.06)} }
@keyframes logo-float { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-15px) rotate(2deg)} }
@keyframes tag-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes cross-turn { to { transform:rotate(180deg) } }
@keyframes aurora { 0%{transform:translate3d(-3%,-2%,0) scale(1)} 100%{transform:translate3d(8%,6%,0) scale(1.12)} }
@keyframes beam-drift { 0%{transform:rotate(-18deg) translateX(-8%);opacity:.5} 100%{transform:rotate(-12deg) translateX(12%);opacity:1} }
@keyframes metal-shine { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes button-shine { 0%,45%{transform:translateX(-60%)} 70%,100%{transform:translateX(60%)} }
@keyframes scroll-cue { 0%{transform:translateY(-100%)} 70%,100%{transform:translateY(100%)} }
@keyframes ticker-run { to{transform:translateX(-50%)} }
@keyframes hero-enter { from{opacity:0;transform:translateY(25px);filter:blur(3px)} to{opacity:1;transform:translateY(0);filter:blur(0)} }
@keyframes scene-enter { from{opacity:0;transform:scale(.9)} to{opacity:1;transform:scale(1)} }
@keyframes detail-enter { from{opacity:.35;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes flow-run { to{left:110%} }
@keyframes active-breathe { 0%,100%{opacity:.6} 50%{opacity:1} }
@keyframes play-breathe { 0%,100%{text-shadow:0 0 15px #0e8eff55} 50%{text-shadow:0 0 30px #42b5ffad} }
@keyframes wave { from{transform:scaleY(.2)} to{transform:scaleY(.9)} }
@keyframes video-play { 0%{transform:scaleX(0)} 95%,100%{transform:scaleX(1)} }
@keyframes social-back { 0%,100%{transform:translateY(0) rotate(-12deg)} 50%{transform:translateY(-9px) rotate(-7deg)} }
@keyframes social-front { 0%,100%{transform:translateY(0) rotate(8deg)} 50%{transform:translateY(-13px) rotate(3deg)} }
@keyframes web-float { 0%,100%{transform:rotateY(-9deg) rotateX(4deg) translateY(0)} 50%{transform:rotateY(2deg) rotateX(-2deg) translateY(-8px)} }
@keyframes cursor-travel { 0%,100%{transform:translate(5px,0)} 50%{transform:translate(-40px,-30px)} }
@keyframes chat-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes typing-bounce { 0%,70%,100%{transform:translateY(0);opacity:.5} 35%{transform:translateY(-3px);opacity:1} }
@keyframes footer-breathe { 0%,100%{opacity:.65} 50%{opacity:.9} }
@keyframes fab-breathe { 0%,100%{opacity:0} 50%{opacity:1} }
@keyframes fab-breathe-low { 0%,100%{opacity:1} 50%{opacity:0} }
.motion-paused *, .motion-paused *::before, .motion-paused *::after,.tab-hidden *, .tab-hidden *::before, .tab-hidden *::after { animation-play-state:paused!important }
.motion-paused .tilt-card,.motion-paused .logo-parallax { --tilt-x:0deg!important; --tilt-y:0deg!important; --logo-rx:0deg!important; --logo-ry:0deg!important }
.motion-paused .tilt-card { translate:none!important; scale:none!important }
.motion-paused .reveal { opacity:1!important; transform:none!important; transition:none!important }
.motion-paused details p,.motion-paused .connection-detail.switching { animation:none!important; opacity:1!important; transform:none!important }
.motion-zone:not(.in-view) { animation-play-state:paused }
.motion-zone:not(.in-view) *, .motion-zone:not(.in-view) *::before, .motion-zone:not(.in-view) *::after { animation-play-state:paused }

/* Desktop intermediário e tablet. */
@media(max-width:1100px) {
  .hero { gap:28px; grid-template-columns:1.2fr 1fr }
  h1 { font-size:clamp(42px,5.3vw,62px) }
  .header nav { gap:2px }
  .header nav a { padding-inline:9px; font-size:13px }
  .brand-type { width:102px }
  .hero-copy>p { font-size:16px }
  .hero h1 .metal { white-space:normal }
  .orbit-tag { font-size:8px; padding:7px 11px }
  .section-heading { gap:45px }
  .node { padding:25px 19px }
  .node strong { font-size:23px }
  .node small { font-size:12px }
  .service-card { padding:27px }
  .service-card h3 { font-size:26px }
  .service-preview { top:88px; right:19px; height:180px; width:38% }
  .social-mini { padding:14px 10px }
  .social-mini strong { font-size:19px }
  .social-mini.front strong { font-size:13px }
  .social-mini strong span { font-size:43px }
  .mini-browser strong { font-size:23px }
  .chat-mini { font-size:9px; padding:11px 8px }
  .loop-caption { display:none }
  .package-grid article { padding:28px 24px }
  .package-grid h3 { font-size:25px }
  .contact-grid { gap:48px }
  .actions { gap:18px }
}
@media(max-width:900px) {
  .header nav { display:none; position:absolute; top:78px; left:0; right:0; flex-direction:column; padding:24px 6%; gap:14px; background:#020a17f5; border-bottom:1px solid #449be457; backdrop-filter:blur(20px); margin:0 }
  .header nav.open { display:flex }
  .header nav a { font-size:16px }
  .header { height:78px; gap:18px }
  .header-contact { margin-left:auto }
  .menu { width:34px; height:44px; border:0; background:none; padding:6px; display:flex; flex-direction:column; justify-content:center; gap:6px }
  .menu span { width:22px; height:1px; background:#a0d8ff; transition:transform .3s }
  .menu[aria-expanded=true] span:first-child { transform:translateY(3.5px) rotate(45deg) }
  .menu[aria-expanded=true] span:last-child { transform:translateY(-3.5px) rotate(-45deg) }
}
@media(max-width:760px) {
  html { scroll-padding-top:95px }
  .wrap { width:88% }
  .header { padding-inline:6%; gap:13px }
  .brand-symbol { width:30px; height:30px }
  .brand-type { width:95px; height:30px }
  .brand { gap:7px }
  .header-contact { font-size:11px; padding:10px 15px; min-height:40px }
  .hero { display:flex; flex-direction:column; align-items:stretch; gap:0; min-height:100svh; padding-top:140px; padding-bottom:105px }
  .hero h1 { font-size:clamp(34px,8.7vw,58px); line-height:1.12; margin-block:24px }
  .hero h1 .metal { white-space:normal }
  .hero-copy>p { font-size:16px; line-height:1.85; max-width:500px }
  .eyebrow { font-size:10px; letter-spacing:.1em }
  .actions { gap:21px; margin-top:29px }
  .actions .button { min-height:48px; padding:13px 22px; font-size:13px }
  .actions .text-link { font-size:13px }
  .hero-fronts { margin-top:28px; padding-top:17px }
  .hero-fronts ul { gap:9px 17px; font-size:11px }
  .hero-art { width:min(380px,94%); align-self:center; margin-top:47px; transform:none }
  .orbit-track { inset:4% }
  .orbit-two { inset:16% }
  .orbit-three { inset:28% }
  .logo-parallax { inset:26% }
  .orbit-tag { font-size:8px }
  .tag-one { right:0; top:9% }
  .tag-two { left:0; bottom:10% }
  .art-signature svg { width:135px }
  .art-signature>span { font-size:8px }
  .hero-bottom { bottom:18px; font-size:8px; gap:12px; flex-wrap:wrap }
  .hero-bottom>span { display:none }
  .hero-bottom>a { font-size:9px }
  .effects-toggle { font-size:11px }
  .ambient-glow { filter:blur(15px); width:105vw }
  .ambient-grid { background-size:50px 50px }
  .ticker { padding-block:20px }
  .ticker span { font-size:14px }
  .ticker-group { gap:30px; padding-right:30px }
  .section { padding-block:72px }
  .section-label { font-size:10px; margin-bottom:33px; padding-bottom:17px }
  .section-label>span:last-child { display:none }
  .section-heading { grid-template-columns:1fr; gap:22px; margin-bottom:35px }
  h2 { font-size:clamp(32px,7.5vw,44px) }
  .section-heading>p { font-size:16px; max-width:none }
  .problem-grid { grid-template-columns:1fr; gap:18px }
  .problem-grid article { padding:29px }
  .problem-grid h3 { font-size:20px }
  .problem-grid p { font-size:15px }
  .number { font-size:51px; margin-bottom:20px }
  .manifesto { height:195svh }
  .manifesto-stage { padding-block:95px 65px }
  .manifesto h2 { max-width:100%; font-size:clamp(27px,7.4vw,45px); line-height:1.25 }
  .manifesto-stage>.eyebrow { font-size:9px; margin-bottom:24px }
  .manifesto-logo { width:96px; margin-bottom:28px }
  .manifesto-sub { font-size:9px; letter-spacing:.12em; max-width:270px; margin-top:27px; line-height:1.9 }
  .manifesto-glow { background:radial-gradient(ellipse 70% 45% at 50% 42%,#055fff47,transparent 77%) }
  .connection { grid-template-columns:repeat(2,1fr); gap:13px }
  .connection-energy { display:none }
  .node { padding:23px 18px }
  .node-top { margin-bottom:20px }
  .node strong { font-size:24px }
  .node small { font-size:12px; line-height:1.6 }
  .connection-detail { grid-template-columns:1fr; gap:14px; min-height:265px; padding:27px 0 }
  .connection-detail h3 { font-size:21px; line-height:1.45 }
  .connection-detail p { font-size:15px }
  .connection-detail .text-link { justify-self:start }
  .data-loop { align-items:flex-start; gap:18px; padding-top:25px }
  .data-loop>span:first-child { font-size:32px }
  .data-loop h3 { font-size:19px }
  .data-loop p { font-size:14px }
  .service-grid { grid-template-columns:1fr; gap:22px }
  .service-card { padding:27px; min-height:0 }
  .card-top { margin-bottom:24px }
  .service-preview { position:relative; top:auto; right:auto; width:100%; height:185px; margin-bottom:25px }
  .service-card h3 { max-width:none; font-size:29px; margin-bottom:17px }
  .service-card h3 br { display:none }
  .service-card>p { max-width:none; font-size:15px }
  .service-card ul { max-width:none; font-size:14px; margin-block:23px }
  .service-card .text-link { font-size:14px }
  .waveform { width:58%; left:21%; right:auto }
  .preview-video .preview-play { font-size:64px }
  .social-mini { width:53%; height:86%; padding:20px }
  .social-mini.back { left:13%; top:0 }
  .social-mini.front { right:8%; bottom:0 }
  .social-mini strong { font-size:23px; margin-top:14px }
  .social-mini.front strong { font-size:16px }
  .social-mini strong span { font-size:47px }
  .preview-web .mini-browser { width:78%; max-width:245px; height:96% }
  .mini-browser>div { padding:15px 19px }
  .mini-browser strong { font-size:25px }
  .web-cursor { right:32%; bottom:22% }
  .preview-chat { padding-inline:15%; gap:13px }
  .chat-mini { font-size:13px; padding:14px 13px }
  .process-grid { grid-template-columns:1fr; gap:30px }
  .process-grid::before,.process-grid::after { top:20px; bottom:35px; left:19px; right:auto; width:1px; height:auto }
  .process-grid::after { transform:scaleY(var(--rail-progress,0)); transform-origin:top; background:linear-gradient(#167aff,#8ddcff) }
  .process-grid li { padding-left:68px }
  .process-grid li>span { position:absolute; left:0; top:0 }
  .process-grid h3 { font-size:24px; margin:6px 0 12px }
  .process-grid p { font-size:15px }
  .package-grid { grid-template-columns:1fr; gap:22px }
  .package-grid article { padding:30px }
  .package-grid h3 { font-size:29px }
  .package-grid .eyebrow { font-size:11px }
  .package-grid .button { font-size:14px }
  .scope-note { font-size:12px }
  .faq-head { margin-bottom:34px }
  .faq h2 { margin-top:18px }
  summary { font-size:15px; line-height:1.6 }
  .faq-list summary { gap:14px; padding:22px 12px }
  .faq-list summary::before { min-width:22px }
  details p { font-size:14px }
  .faq-list details p { padding:0 14px 24px 48px }
  .contact-grid { grid-template-columns:1fr; gap:41px }
  .contact h2 { font-size:clamp(35px,8vw,51px) }
  .contact p { font-size:16px }
  .phone { font-size:22px }
  .brief { padding:27px }
  .brief h3 { font-size:23px }
  input,textarea,select { font-size:16px }
  .brief .form-note { font-size:12px }
  .brief legend { font-size:22px }
  .brief .service-choices label>span { font-size:12px; padding:12px 10px }
  .final-cta { padding-block:72px }
  .final-cta h2 { margin-block:20px 22px; font-size:clamp(30px,7.8vw,42px); line-height:1.2; text-wrap:balance }
  .final-cta h2 br { display:none }
  .final-cta p { font-size:15px }
  .final-cta-button { width:min(100%,300px); min-width:0; min-height:58px; margin-top:32px; padding-inline:24px; font-size:15px }
  .footer { padding-top:52px; padding-bottom:85px }
  .footer-top { grid-template-columns:repeat(2,minmax(0,1fr)); gap:38px 22px }
  .footer-about { max-width:none; grid-column:1/-1 }
  .footer-col h3 { margin-bottom:18px }
  .footer-col a { padding-block:3px }
  .footer-bottom { font-size:11px; flex-wrap:wrap; gap:12px 20px; margin-top:36px; padding-top:20px }
  .footer-bottom>span:nth-child(2) { display:none }
  .floating { width:49px; height:49px; bottom:max(18px,env(safe-area-inset-bottom)); right:max(18px,env(safe-area-inset-right)) }
}
@media(max-width:360px) {
  .brand-type { width:83px }
  .brand-symbol { width:27px }
  .header { gap:10px }
  .header-contact { padding-inline:12px; font-size:10px }
  .hero h1 { font-size:33px }
  .hero .eyebrow { font-size:9px }
  .node { padding:21px 15px }
  .node strong { font-size:21px }
  .service-card { padding:24px }
  .brief { padding:23px }
  .final-cta { padding-block:64px }
  .footer-top { column-gap:16px }
}
/* O manifesto cabe também em celulares menores e telas na horizontal. */
@media(max-height:650px) {
  .manifesto-stage { padding-top:100px; padding-bottom:30px }
  .manifesto-logo { width:64px; margin-bottom:14px }
  .manifesto-stage>.eyebrow { margin-bottom:12px; font-size:9px }
  .manifesto h2 { font-size:clamp(28px,4vw,45px); line-height:1.16 }
  .manifesto-sub { margin-top:16px; font-size:9px; line-height:1.7 }
}
/* Mantém inicial, frase e brilho visíveis também com o celular na horizontal. */
@media(hover:none) and (pointer:coarse) and (orientation:landscape) and (max-height:500px) {
  .manifesto-stage { padding-block:86px 18px }
  .manifesto-logo { width:40px; margin-bottom:8px }
  .manifesto-stage>.eyebrow { font-size:8px; margin-bottom:8px }
  .manifesto h2 { font-size:clamp(20px,6svh,28px); line-height:1.16 }
  .manifesto-sub { max-width:90%; font-size:8px; line-height:1.5; margin-top:10px }
  .final-cta { padding-block:46px }
  .final-cta h2 { font-size:clamp(28px,4vw,38px); margin-block:18px 20px }
  .final-cta-button { margin-top:24px }
}
/* Áreas de toque confortáveis, com rolagem interna para menus em telas baixas. */
@media(hover:none) and (pointer:coarse) {
  .menu { width:44px; flex-shrink:0; align-items:center }
  .header-contact { min-height:44px }
  .header nav.open { max-height:calc(100svh - 78px); overflow-y:auto; overscroll-behavior:contain }
  .text-link,.effects-toggle,.hero-bottom>a,.footer-col a,.to-top { display:inline-flex; align-items:center; min-height:44px }
  .footer-col ul { gap:6px }
  .final-cta-button { transition-duration:.18s }
  .final-cta-button:active { transform:scale(.98); box-shadow:inset 0 1px 0 #fff9,0 6px 28px #147fff70 }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*::before,*::after { animation:none!important; transition:none!important }
  .has-motion .reveal,.has-motion .reveal.is-visible { opacity:1!important; transform:none!important }
  .final-cta-button:active { transform:none }
  .manifesto { height:auto }
  .manifesto-stage { position:relative; min-height:85svh }
  .manifesto-word,.manifesto-logo,.manifesto-sub,.manifesto-glow { opacity:1!important; transform:none!important }
  .hero-art,.logo-parallax,.tilt-card { transform:none!important; translate:none!important; scale:none!important }
  .node.node-live,.node:focus-visible { transform:none!important }
  .preloader { display:none!important }
  html.is-loading { overflow:auto }
  #particles { display:none }
}