:root {
  --bg: #07060d;
  --surface: #100e1a;
  --surface-2: #171321;
  --text: #f7f5fb;
  --muted: #b7b2bf;
  --purple: #7c35ff;
  --purple-2: #b36aff;
  --red: #f22d45;
  --blue: #199dff;
  --lime: #82f55b;
  --border: rgba(255,255,255,.09);
  --open: 0;
  --mx: 0;
  --my: 0;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--bg); color: var(--text); font-family: Inter, system-ui, sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:-2; background: radial-gradient(circle at 12% 8%, rgba(25,157,255,.1), transparent 27%), radial-gradient(circle at 88% 9%, rgba(242,45,69,.11), transparent 27%), radial-gradient(circle at 50% 45%, rgba(124,53,255,.06), transparent 35%); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.noise { position: fixed; inset: 0; opacity: .035; pointer-events: none; z-index: 100; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.cursor-glow { position: fixed; width: 420px; height: 420px; border-radius: 50%; pointer-events:none; z-index:-1; background:rgba(124,53,255,.07); filter:blur(80px); transform:translate(calc(var(--cursor-x,50vw) - 50%),calc(var(--cursor-y,50vh) - 50%)); }
.topbar { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 50; width: min(1180px, calc(100% - 32px)); min-height: 64px; padding: 8px 10px 8px 15px; display:flex; align-items:center; justify-content:space-between; border:1px solid rgba(255,255,255,.11); border-radius:18px; background:rgba(9,8,16,.72); backdrop-filter:blur(22px); box-shadow:0 20px 60px rgba(0,0,0,.25); }
.brand { display:flex; align-items:center; gap:10px; font-size:13px; font-weight:800; letter-spacing:.04em; }
.brand img { width:43px; height:43px; object-fit:contain; }
.brand b { color:var(--red); }
.topbar nav { display:flex; gap:28px; color:#c4bfca; font-size:13px; font-weight:600; }
.topbar nav a { transition:.25s; }
.topbar nav a:hover { color:#fff; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:16px; min-height:56px; padding:0 25px; color:white; font-weight:800; font-size:14px; border:0; border-radius:13px; cursor:pointer; background:linear-gradient(115deg, #7030ff, #9a39f0 52%, #ef2d48); box-shadow:0 14px 36px rgba(124,53,255,.28), inset 0 1px rgba(255,255,255,.28); transition:transform .25s, box-shadow .25s; }
.button:hover { transform:translateY(-3px); box-shadow:0 20px 44px rgba(124,53,255,.38), inset 0 1px rgba(255,255,255,.28); }
.button-small { min-height:44px; padding:0 18px; font-size:12px; }
.section { width:min(1180px, calc(100% - 40px)); margin:0 auto; padding:130px 0; }
.hero { min-height:100vh; padding:140px max(5vw, 24px) 50px; display:grid; grid-template-columns:minmax(380px,.9fr) minmax(460px,1.1fr); align-items:center; gap:20px; position:relative; }
.hero-copy { z-index:3; max-width:680px; }
.eyebrow { display:flex; align-items:center; gap:10px; color:#bab4c3; text-transform:uppercase; letter-spacing:.14em; font-size:11px; font-weight:800; }
.eyebrow span { width:26px; height:2px; background:linear-gradient(90deg,var(--blue),var(--red)); box-shadow:0 0 12px var(--purple); }
h1,h2,h3,p { margin-top:0; }
h1 { margin:25px 0 25px; font-size:clamp(48px,5.2vw,82px); letter-spacing:-.065em; line-height:.94; font-weight:900; }
h1 em, h2 em { font-style:normal; color:transparent; background:linear-gradient(90deg,#5dbdff 0%,#9b56ff 48%,#ff3e54 100%); background-clip:text; -webkit-background-clip:text; }
.hero-copy>p { max-width:600px; color:var(--muted); line-height:1.7; font-size:17px; }
.hero-actions { display:flex; align-items:center; gap:24px; margin:34px 0; }
.text-link { font-size:13px; font-weight:700; color:#c4bfca; }
.text-link span { margin-left:8px; color:var(--lime); }
.micro-proof { display:flex; flex-wrap:wrap; gap:16px; color:#aaa5b0; font-size:11px; font-weight:600; }
.micro-proof i { color:var(--lime); font-style:normal; }
.hero-visual { height:700px; position:relative; perspective:1200px; transform-style:preserve-3d; }
.brand-flame { position:absolute; width:58%; height:58%; top:12%; filter:blur(20px); opacity:.58; border-radius:46% 54% 52% 48%; animation:flame 5s ease-in-out infinite; }
.flame-blue { left:2%; background:radial-gradient(ellipse at 60% 80%,#117de8,transparent 58%), conic-gradient(from 30deg,transparent,#0ca9ff,transparent,#5b35ff,transparent); clip-path:polygon(50% 0,62% 27%,79% 10%,75% 42%,100% 32%,78% 69%,89% 100%,51% 78%,16% 100%,28% 66%,0 43%,31% 42%); }
.flame-red { right:0; animation-delay:-2.3s; background:radial-gradient(ellipse at 40% 80%,#f02f38,transparent 58%), conic-gradient(from 220deg,transparent,#ff3b1f,transparent,#b90b50,transparent); clip-path:polygon(50% 0,62% 27%,79% 10%,75% 42%,100% 32%,78% 69%,89% 100%,51% 78%,16% 100%,28% 66%,0 43%,31% 42%); }
@keyframes flame { 0%,100%{transform:translateY(5px) scale(1) rotate(-2deg)}50%{transform:translateY(-15px) scale(1.05) rotate(2deg)} }
.chest-scene { position:absolute; left:50%; top:52%; width:520px; height:360px; transform:translate(-50%,-50%) rotateX(calc(var(--my) * -3deg)) rotateY(calc(var(--mx) * 5deg)); transform-style:preserve-3d; transition:transform .15s linear; }
.chest { position:absolute; left:50%; bottom:48px; width:390px; height:240px; transform:translateX(-50%) rotateX(-4deg); transform-style:preserve-3d; }
.chest-body { position:absolute; left:25px; right:25px; bottom:0; height:155px; transform-style:preserve-3d; }
.body-front { height:100%; position:relative; overflow:hidden; border:3px solid #702cbd; border-top-color:#d82f58; border-radius:12px 12px 20px 20px; background:linear-gradient(145deg,#1a2033,#0a0e18 55%,#150912); box-shadow:inset 0 0 34px #153970, 0 30px 80px #000; }
.body-front::before,.body-front::after { content:""; position:absolute; top:0; bottom:0; width:13px; background:linear-gradient(#2e9aff,#9543ff 48%,#fb3143); box-shadow:0 0 14px currentColor; }
.body-front::before{left:20px}.body-front::after{right:20px}
.body-front strong { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); white-space:nowrap; font-size:21px; letter-spacing:.08em; text-shadow:0 0 14px #5eaaff; }
.body-side { position:absolute; top:8px; right:-25px; width:28px; height:135px; transform:rotateY(52deg); transform-origin:left; background:linear-gradient(90deg,#191426,#08060d); border:2px solid #7a2f9b; }
.lock { position:absolute; z-index:3; top:22px; left:50%; transform:translateX(-50%); width:54px; height:61px; display:grid; place-items:center; border-radius:7px 7px 14px 14px; background:linear-gradient(145deg,#ff4560,#75102d); border:3px solid #ff6a58; font-size:13px; font-weight:900; box-shadow:0 0 28px rgba(255,47,68,.5); }
.chest-lid { position:absolute; z-index:4; left:18px; right:18px; bottom:150px; height:110px; transform-origin:50% 100%; transform:rotateX(calc(-62deg * var(--open))); transform-style:preserve-3d; }
.lid-front { position:absolute; inset:28px 0 0; border:3px solid #8d38e1; border-top-color:#35a9ff; border-radius:50% 50% 9px 9px/65% 65% 9px 9px; background:linear-gradient(180deg,#152f5a,#0a0d18 60%,#190a13); box-shadow:inset 0 0 30px #153f79,0 -12px 35px rgba(25,157,255,.18); }
.lid-top { position:absolute; left:32px; right:32px; height:58px; top:1px; border-radius:50% 50% 10px 10px; transform:rotateX(65deg); background:linear-gradient(90deg,#1267bd,#32136e 48%,#bb193e); border:3px solid #6964e7; }
.lid-line { position:absolute; left:15%; right:15%; bottom:15px; height:5px; border-radius:10px; background:linear-gradient(90deg,#23afff,#b331ff,#ff314c); box-shadow:0 0 16px #7a4fff; }
.chest-glow { position:absolute; z-index:2; left:18%; right:18%; bottom:140px; height:85px; opacity:calc(.1 + var(--open)); background:radial-gradient(ellipse at bottom,rgba(255,255,255,.95),rgba(115,44,255,.65) 25%,rgba(29,154,255,.25) 55%,transparent 72%); filter:blur(8px); transform:translateY(calc(-25px * var(--open))) scaleY(calc(.25 + var(--open))); }
.light-beam { position:absolute; z-index:-1; left:50%; bottom:190px; width:340px; height:420px; opacity:calc(var(--open) * .7); transform:translateX(-50%) perspective(400px) rotateX(20deg); transform-origin:bottom; clip-path:polygon(42% 100%,58% 100%,100% 0,0 0); background:linear-gradient(90deg,transparent,rgba(100,69,255,.18),rgba(255,255,255,.35),rgba(255,61,75,.15),transparent); filter:blur(18px); }
.chest-shadow { position:absolute; left:50%; bottom:25px; width:400px; height:70px; transform:translateX(-50%); background:#000; filter:blur(25px); border-radius:50%; }
.orb { position:absolute; z-index:6; width:78px; height:78px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.18); border-radius:24px; background:linear-gradient(145deg,rgba(34,28,50,.93),rgba(10,9,16,.86)); backdrop-filter:blur(12px); box-shadow:0 18px 50px #000, inset 0 1px rgba(255,255,255,.15); opacity:calc(.18 + var(--open)); transform:translateY(calc((1 - var(--open)) * 180px)) scale(calc(.5 + var(--open) * .5)); transition:opacity .1s; }
.orb b { display:grid; place-items:center; width:39px; height:39px; border-radius:12px; color:white; background:linear-gradient(135deg,var(--blue),var(--purple),var(--red)); font-size:15px; }
.orb span { position:absolute; top:86px; white-space:nowrap; font-size:9px; color:#c9c3d0; text-transform:uppercase; letter-spacing:.12em; font-weight:800; }
.orb-1{left:5%;top:23%}.orb-2{right:10%;top:18%}.orb-3{left:14%;bottom:20%}.orb-4{right:2%;bottom:26%}.orb-5{left:47%;top:6%}
.scroll-hint { position:absolute; left:50%; bottom:7%; transform:translateX(-50%); display:flex; align-items:center; gap:8px; color:#817b89; text-transform:uppercase; letter-spacing:.15em; font-size:9px; font-weight:700; }
.scroll-hint span { width:18px; height:28px; border:1px solid #716b79; border-radius:20px; position:relative; }
.scroll-hint span::after { content:""; position:absolute; left:50%; top:5px; width:2px; height:6px; background:var(--lime); transform:translateX(-50%); animation:scroll 1.8s infinite; }
@keyframes scroll { to{transform:translate(-50%,10px);opacity:0} }
.hero-video-scroll { min-height:175vh; align-items:start; }
.hero-video-scroll .hero-copy { position:sticky; top:150px; }
.hero-video-scroll .hero-video-visual { position:sticky; top:88px; height:calc(100vh - 105px); min-height:640px; display:grid; place-items:center; }
.hero-video-visual { isolation:isolate; }
.hero-video-aura { position:absolute; z-index:-2; left:50%; top:48%; width:92%; aspect-ratio:1.4; transform:translate(-50%,-50%); border-radius:50%; background:conic-gradient(from 180deg,rgba(25,157,255,.2),rgba(111,41,255,.26),rgba(242,45,69,.18),rgba(25,157,255,.2)); filter:blur(70px); opacity:calc(.46 + var(--hero-progress,0) * .3); }
.hero-video-frame { position:relative; width:min(780px,100%); aspect-ratio:16/9; overflow:hidden; border:1px solid rgba(255,255,255,.16); border-radius:27px; background:#05040a; box-shadow:0 40px 100px rgba(0,0,0,.65),0 0 80px rgba(93,42,255,.15),inset 0 1px rgba(255,255,255,.12); transform:perspective(1200px) rotateY(calc((1 - var(--hero-progress,0)) * -4deg)) scale(calc(.94 + var(--hero-progress,0) * .06)); transition:box-shadow .2s; }
.hero-video-frame::before { content:""; position:absolute; z-index:3; inset:0; padding:1px; border-radius:inherit; background:linear-gradient(130deg,rgba(58,174,255,.8),transparent 30%,transparent 68%,rgba(255,48,71,.75)); mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0); pointer-events:none; }
.hero-video-frame video { width:100%; height:100%; display:block; object-fit:cover; background:#05040a; }
.hero-video-shine { position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg,rgba(255,255,255,.12),transparent 22%,transparent 70%,rgba(132,65,255,.06)); opacity:calc(.65 - var(--hero-progress,0) * .45); }
.hero-video-status { position:absolute; z-index:4; left:18px; top:17px; padding:8px 11px; display:flex; align-items:center; gap:8px; border:1px solid rgba(255,255,255,.13); border-radius:999px; color:#b9b3c0; background:rgba(7,6,12,.68); backdrop-filter:blur(12px); font-size:8px; font-weight:800; letter-spacing:.11em; }
.hero-video-status i { width:6px; height:6px; border-radius:50%; background:var(--lime); box-shadow:0 0 10px var(--lime); animation:status-pulse 1.5s ease-in-out infinite; }
.hero-scroll-progress { position:absolute; left:10%; right:10%; bottom:12%; height:3px; overflow:hidden; border-radius:5px; background:rgba(255,255,255,.08); }
.hero-scroll-progress i { display:block; width:calc(var(--hero-progress,0) * 100%); height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--blue),var(--purple),var(--red)); box-shadow:0 0 15px var(--purple); }
@keyframes status-pulse { 50%{opacity:.35;transform:scale(.75)} }
@media(max-width:950px){
  .hero-video-scroll{min-height:auto;align-items:center}
  .hero-video-scroll .hero-copy,.hero-video-scroll .hero-video-visual{position:relative;top:auto}
  .hero-video-scroll .hero-video-visual{height:580px;min-height:0;width:100%}
  .hero-video-frame{width:min(760px,96vw)}
  .hero-scroll-progress{bottom:6%}
}
@media(max-width:600px){
  .hero-video-scroll .hero-video-visual{height:410px;margin-top:10px}
  .hero-video-frame{width:100%;border-radius:19px}
  .hero-video-status{left:10px;top:10px;font-size:6px}
  .hero-video-aura{width:120%}
}
/* Hero full-bleed: o vídeo é o próprio topo do site */
.hero-video-scroll {
  display: block;
  width: 100%;
  min-height: 190vh;
  padding: 0;
}
.hero-sticky-layer {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  min-height: 680px;
  overflow: hidden;
  isolation: isolate;
  background: #05040a;
}
.hero-video-scroll .hero-video-visual {
  position: absolute;
  z-index: 1;
  inset: 0;
  top: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
}
.hero-video-scroll .hero-video-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #05040a;
  box-shadow: none;
  transform: none;
}
.hero-video-scroll .hero-video-frame::before { display: none; }
.hero-video-scroll .hero-video-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-video-scroll .hero-video-aura { display: none; }
.hero-video-scroll .hero-video-shine {
  display: none;
}
.hero-video-scroll .hero-video-status { display: none; }
.hero-video-scroll .hero-copy {
  position: relative;
  z-index: 5;
  top: auto;
  width: min(1180px, calc(100% - 56px));
  height: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 120px 0 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  opacity: calc(1 - var(--hero-progress,0) * 2.15);
  transform: translateY(calc(var(--hero-progress,0) * -55px));
  transition: opacity .06s linear,transform .06s linear;
  pointer-events: none;
}
.hero-video-scroll .hero-copy>* { max-width: 650px; pointer-events: auto; }
.hero-video-scroll .hero-copy .hero-actions,
.hero-video-scroll .hero-copy .micro-proof { max-width: none; }
.hero-video-scroll .hero-scroll-progress {
  z-index: 8;
  left: 5vw;
  right: 5vw;
  bottom: 26px;
}
.hero-video-scroll .scroll-hint {
  z-index: 8;
  bottom: 44px;
}
.hero-video-scroll .clean-scroll-hint { opacity:.62; }
@media(max-width:950px) {
  .hero-video-scroll { min-height: 175vh; padding: 0; text-align: left; }
  .hero-sticky-layer { height: 100svh; min-height: 620px; }
  .hero-video-scroll .hero-video-visual { position: absolute; top: 0; height: 100%; width: 100%; }
  .hero-video-scroll .hero-copy { position: relative; top: auto; width: calc(100% - 36px); height: 100%; margin: 0 auto; padding: 110px 0 70px; align-items: flex-start; justify-content: center; }
  .hero-video-scroll .hero-copy .eyebrow,
  .hero-video-scroll .hero-copy .hero-actions,
  .hero-video-scroll .hero-copy .micro-proof { justify-content: flex-start; }
  .hero-video-scroll .hero-video-frame { width: 100%; height: 100%; border-radius: 0; }
  .hero-video-scroll .hero-scroll-progress { bottom: 22px; }
}
@media(max-width:600px) {
  .hero-video-scroll { min-height: 160vh; }
  .hero-sticky-layer { min-height: 560px; }
  .hero-video-scroll .hero-video-frame video { object-position: 58% center; }
  .hero-video-scroll .hero-video-shine { background: linear-gradient(180deg,rgba(5,4,10,.42),rgba(5,4,10,.2) 38%,rgba(5,4,10,.9)); }
  .hero-video-scroll .hero-copy { justify-content: flex-end; padding-bottom: 100px; }
  .hero-video-scroll .hero-copy h1 { font-size: 43px; }
  .hero-video-scroll .hero-copy>p { max-width: 92%; }
  .hero-video-scroll .scroll-hint { bottom: 38px; }
}
.ticker { overflow:hidden; border-block:1px solid var(--border); background:#0d0b14; transform:rotate(-1.1deg) scale(1.02); }
.ticker-track { width:max-content; display:flex; align-items:center; gap:28px; padding:16px 0; animation:ticker 30s linear infinite; color:#77717f; font-size:12px; font-weight:800; letter-spacing:.13em; }
.ticker-track i { color:var(--red); font-style:normal; }
@keyframes ticker { to{transform:translateX(-50%)} }
.section-heading { max-width:720px; margin-bottom:55px; }
.section-heading.centered { text-align:center; margin-inline:auto; }
.section-heading.centered .eyebrow { justify-content:center; }
h2 { margin:20px 0; font-size:clamp(42px,5vw,68px); line-height:.98; letter-spacing:-.055em; font-weight:900; }
.section-heading>p { max-width:630px; color:var(--muted); line-height:1.75; }
.tool-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.tool-card { min-height:255px; padding:25px; position:relative; overflow:hidden; border:1px solid var(--border); border-radius:20px; background:linear-gradient(150deg,rgba(25,21,37,.9),rgba(10,9,16,.92)); transition:.35s; }
.tool-card:hover { transform:translateY(-7px); border-color:rgba(154,82,255,.45); box-shadow:0 24px 60px rgba(0,0,0,.35); }
.tool-card::after { content:""; position:absolute; width:160px; height:160px; right:-80px; bottom:-100px; background:var(--accent,var(--purple)); filter:blur(70px); opacity:.14; }
.tool-card.featured { grid-column:span 2; background:radial-gradient(circle at 90% 80%,rgba(130,245,91,.14),transparent 40%),linear-gradient(150deg,#171522,#0b0a12); }
.tool-card small { color:#77717f; letter-spacing:.13em; font-size:9px; font-weight:800; }
.tool-card h3 { margin:7px 0 12px; font-size:19px; }
.tool-card p { max-width:330px; color:#918b99; line-height:1.6; font-size:13px; }
.tool-icon { width:50px; height:50px; margin-bottom:25px; display:grid; place-items:center; border-radius:14px; color:#fff; font-weight:900; box-shadow:inset 0 1px rgba(255,255,255,.28),0 10px 30px rgba(0,0,0,.25); }
.tool-card.featured .tool-icon { float:left; margin:0 17px 20px 0; }
.lime{background:linear-gradient(135deg,#96ff6c,#327e22)}.violet{background:linear-gradient(135deg,#b267ff,#5e1cd8)}.blue{background:linear-gradient(135deg,#55c8ff,#164ed1)}.red{background:linear-gradient(135deg,#ff5d6c,#b20c32)}.cyan{background:linear-gradient(135deg,#4ce6dd,#156db3)}.orange{background:linear-gradient(135deg,#ffad4d,#d54417)}.pink{background:linear-gradient(135deg,#ff6fc8,#8521c8)}.white{background:linear-gradient(135deg,#fff,#777);color:#111}.green{background:linear-gradient(135deg,#3be797,#11785a)}
.mini-chart { position:absolute; right:28px; bottom:28px; width:180px; height:80px; display:flex; align-items:end; gap:8px; }
.mini-chart i { flex:1; height:var(--h); border-radius:4px 4px 0 0; background:linear-gradient(#a4ff77,#2f7d3b); opacity:.75; }
.mini-chart i:nth-child(1){--h:24%}.mini-chart i:nth-child(2){--h:42%}.mini-chart i:nth-child(3){--h:34%}.mini-chart i:nth-child(4){--h:67%}.mini-chart i:nth-child(5){--h:58%}.mini-chart i:nth-child(6){--h:90%}
.more-card { display:flex; flex-direction:column; justify-content:space-between; background:linear-gradient(145deg,#5d20d4,#be204d); }
.more-card strong { font-size:31px; line-height:.95; letter-spacing:-.04em; }
.more-card span { font-size:10px; line-height:1.5; color:rgba(255,255,255,.65); }
.tool-grid-real { align-items: stretch; }
.tool-grid-real .tool-card { min-height: 305px; }
.tool-card-image { padding: 0; display: flex; flex-direction: column; }
.tool-card-image .tool-poster {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 145px;
  object-fit: cover;
  object-position: center 32%;
  border-bottom: 1px solid var(--border);
  filter: saturate(.94) contrast(1.05);
  transition: transform .45s ease, filter .45s ease;
}
.tool-card-image::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 80px 0 auto;
  height: 80px;
  pointer-events: none;
  background: linear-gradient(transparent, #12101b 82%);
}
.tool-card-image:hover .tool-poster { transform: scale(1.035); filter: saturate(1.12) contrast(1.06); }
.tool-card-image .tool-copy { position: relative; z-index: 3; padding: 20px 22px 22px; margin-top: -5px; }
.tool-card-image .tool-copy h3 { margin-bottom: 8px; }
.tool-card-image .tool-copy p { margin-bottom: 0; }
.tool-grid-real .tool-card-image.featured {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  min-height: 305px;
}
.tool-grid-real .tool-card-image.featured .tool-poster {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: 100%;
  border: 0;
  object-position: center;
}
.tool-grid-real .tool-card-image.featured::before {
  inset: 0 34% 0 36%;
  width: 30%;
  height: auto;
  background: linear-gradient(90deg, #12101b, transparent);
}
.tool-grid-real .tool-card-image.featured .tool-copy {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  padding: 30px;
  margin: 0;
}
.integration-hero {
  position: relative;
  width: 100%;
  padding: 145px 0 130px;
  overflow: hidden;
  text-align: center;
  border-block: 1px solid var(--border);
  background:
    radial-gradient(circle at 50% 35%, rgba(124,53,255,.15), transparent 31%),
    radial-gradient(circle at 8% 55%, rgba(25,157,255,.08), transparent 22%),
    radial-gradient(circle at 92% 55%, rgba(242,45,69,.08), transparent 22%),
    #08070d;
}
.integration-grid {
  position: absolute;
  inset: 0;
  opacity: .12;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,.35) 1px, transparent 1px);
  background-size: 25px 25px;
  mask-image: radial-gradient(ellipse at center, #000 0 35%, transparent 78%);
}
.integration-content { position: relative; z-index: 3; width: min(760px, calc(100% - 34px)); margin: 0 auto; }
.integration-content .eyebrow { justify-content: center; }
.integration-content h2 { margin: 19px 0 18px; }
.integration-content>p { max-width: 650px; margin: 0 auto 30px; color: var(--muted); line-height: 1.75; }
.integration-marquee {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: 64px;
  padding: 8px 0;
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.integration-row {
  display: flex;
  width: max-content;
  will-change: transform;
}
.integration-row+.integration-row { margin-top: 22px; }
.integration-set { display: flex; gap: 22px; padding-right: 22px; flex-shrink: 0; }
.integration-chip {
  width: 190px;
  height: 76px;
  padding: 8px 18px 8px 9px;
  display: flex;
  align-items: center;
  gap: 13px;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(31,26,43,.94), rgba(10,9,15,.96));
  box-shadow: 0 14px 38px rgba(0,0,0,.4), inset 0 1px rgba(255,255,255,.08);
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.integration-chip:hover { transform: translateY(-4px); border-color: rgba(159,82,255,.55); box-shadow: 0 20px 45px rgba(0,0,0,.55), 0 0 28px rgba(124,53,255,.12); }
.integration-chip img { width: 58px; height: 58px; flex-shrink: 0; object-fit: cover; object-position: center 32%; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; box-shadow: 0 8px 20px #000; }
.integration-chip span { color: #e8e4eb; font-size: 12px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.scroll-left { animation: integrations-left 38s linear infinite; }
.scroll-right { animation: integrations-right 42s linear infinite; }
.integration-marquee:hover .integration-row { animation-play-state: paused; }
@keyframes integrations-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes integrations-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media(max-width:600px) {
  .integration-hero { padding: 100px 0 90px; }
  .integration-content h2 { font-size: 39px; }
  .integration-content>p { font-size: 13px; }
  .integration-marquee { margin-top: 45px; mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
  .integration-set { gap: 13px; padding-right: 13px; }
  .integration-chip { width: 158px; height: 66px; padding-right: 12px; gap: 10px; }
  .integration-chip img { width: 50px; height: 50px; }
  .integration-chip span { font-size: 10px; }
}
.scroll-story {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 130px 0 30vh;
  position: relative;
}
.scroll-story::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 15%;
  left: 50%;
  width: 90vw;
  height: 75%;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 25%, rgba(124,53,255,.1), transparent 35%);
  pointer-events: none;
}
.scroll-story-heading { margin-bottom: 95px; }
.scroll-story-heading p { margin-inline: auto; }
.scroll-stack { position: relative; padding-bottom: 48vh; }
.scroll-stack-card {
  --stack-accent: #8b55ff;
  position: sticky;
  top: 108px;
  z-index: 1;
  width: 100%;
  min-height: 470px;
  margin: 0 0 95px;
  padding: 48px;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  align-items: center;
  gap: 42px;
  overflow: hidden;
  transform-origin: top center;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 38px;
  background:
    radial-gradient(circle at 88% 25%, color-mix(in srgb, var(--stack-accent) 24%, transparent), transparent 35%),
    linear-gradient(145deg, rgba(30,27,42,.98), rgba(9,8,15,.99));
  box-shadow: 0 35px 90px rgba(0,0,0,.62), inset 0 1px rgba(255,255,255,.09);
  backface-visibility: hidden;
  will-change: transform, filter;
  transition: box-shadow .25s ease;
}
.scroll-stack-card:nth-child(1) { top: 108px; z-index: 1; }
.scroll-stack-card:nth-child(2) { top: 132px; z-index: 2; }
.scroll-stack-card:nth-child(3) { top: 156px; z-index: 3; }
.scroll-stack-card:nth-child(4) { top: 180px; z-index: 4; }
.scroll-stack-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(255,255,255,.08), transparent 23%, transparent 78%, color-mix(in srgb, var(--stack-accent) 14%, transparent));
}
.scroll-stack-card::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 100%;
  background: var(--stack-accent);
  box-shadow: 0 0 35px var(--stack-accent);
}
.stack-green { --stack-accent: #83f45c; }
.stack-purple { --stack-accent: #9b56ff; }
.stack-blue { --stack-accent: #39aaff; }
.stack-red { --stack-accent: #ff4057; }
.stack-copy { position: relative; z-index: 3; }
.stack-number {
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 35px;
  border: 1px solid color-mix(in srgb, var(--stack-accent) 50%, transparent);
  border-radius: 17px;
  color: var(--stack-accent);
  background: color-mix(in srgb, var(--stack-accent) 8%, #0b0a11);
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 0 30px color-mix(in srgb, var(--stack-accent) 13%, transparent);
}
.stack-copy small { display: block; margin-bottom: 12px; color: var(--stack-accent); letter-spacing: .16em; font-size: 9px; font-weight: 900; }
.stack-copy h3 { max-width: 650px; margin-bottom: 16px; font-size: clamp(32px, 4vw, 52px); line-height: .98; letter-spacing: -.055em; }
.stack-copy > p { max-width: 610px; color: #aaa4b2; line-height: 1.65; font-size: 14px; }
.stack-copy ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.stack-copy li { padding: 10px 13px; border: 1px solid var(--border); border-radius: 999px; color: #c8c2ce; background: rgba(255,255,255,.035); font-size: 10px; font-weight: 700; }
.stack-media { position: relative; z-index: 2; height: 355px; perspective: 1000px; }
.stack-media img {
  position: absolute;
  width: 58%;
  height: 92%;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 24px;
  box-shadow: 0 28px 70px #000;
}
.stack-media img:first-child { left: 2%; top: 5%; transform: rotate(-8deg) translateZ(15px); }
.stack-media img:nth-child(2) { right: 0; top: 0; transform: rotate(8deg) translateZ(40px); }
.stack-media.triple img { width: 47%; height: 80%; }
.stack-media.triple img:first-child { left: 0; top: 10%; }
.stack-media.triple img:nth-child(2) { left: 27%; top: 0; transform: rotate(0) translateZ(35px); z-index: 2; }
.stack-media.triple img:nth-child(3) { right: 0; top: 10%; transform: rotate(8deg) translateZ(15px); }
.stack-red .stack-media img:nth-child(2) { object-fit: contain; padding: 20px; background: radial-gradient(circle, rgba(124,53,255,.25), #08070d 70%); }
.scroll-stack-end { height: 1px; width: 100%; }
@media(max-width: 820px) {
  .scroll-stack-card { min-height: 590px; padding: 34px; grid-template-columns: 1fr; gap: 20px; }
  .stack-number { margin-bottom: 20px; }
  .stack-media { height: 230px; }
  .stack-media img { width: 46%; height: 100%; }
  .stack-media img:first-child { left: 16%; }
  .stack-media img:nth-child(2) { right: 13%; }
  .stack-media.triple img { width: 39%; height: 95%; }
  .scroll-stack-card:nth-child(1) { top: 90px; }
  .scroll-stack-card:nth-child(2) { top: 105px; }
  .scroll-stack-card:nth-child(3) { top: 120px; }
  .scroll-stack-card:nth-child(4) { top: 135px; }
}
@media(max-width: 600px) {
  .tool-grid-real .tool-card-image.featured { display: flex; }
  .tool-grid-real .tool-card-image.featured .tool-poster { width: 100%; height: 155px; }
  .tool-grid-real .tool-card-image.featured::before { inset: 85px 0 auto; width: auto; height: 85px; background: linear-gradient(transparent, #12101b 82%); }
  .scroll-story { width: calc(100% - 20px); padding-top: 90px; }
  .scroll-story-heading { margin-bottom: 65px; padding-inline: 6px; }
  .scroll-stack-card { min-height: 620px; padding: 28px 22px; border-radius: 27px; }
  .stack-copy h3 { font-size: 35px; }
  .stack-copy > p { font-size: 12px; }
  .stack-media { height: 215px; }
}
.workflow { position:relative; }
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; position:relative; }
.workflow-line { position:absolute; top:53%; left:8%; right:8%; height:1px; background:linear-gradient(90deg,transparent,var(--blue),var(--purple),var(--red),transparent); opacity:.3; }
.step { min-height:330px; padding:28px; position:relative; border:1px solid var(--border); border-radius:20px; background:rgba(13,11,20,.78); backdrop-filter:blur(12px); }
.step>b { color:#4d4854; font-size:11px; }
.step-icon { margin:54px 0 32px; width:58px; height:58px; display:grid; place-items:center; border:1px solid #6d3dc4; border-radius:18px; background:#151020; color:#b58aff; font-size:24px; box-shadow:0 0 35px rgba(124,53,255,.17); }
.step h3 { font-size:24px; margin-bottom:12px; }
.step p { color:var(--muted); line-height:1.65; font-size:13px; }
.compatibility { height:190vh; position:relative; border-block:1px solid var(--border); background:radial-gradient(circle at 70% 50%,rgba(40,71,181,.16),transparent 35%),#090811; }
.compat-sticky { position:sticky; top:0; min-height:100vh; padding:110px max(7vw,30px); display:grid; grid-template-columns:.8fr 1.2fr; align-items:center; gap:50px; overflow:hidden; }
.compat-copy { max-width:520px; }
.compat-copy>p { color:var(--muted); line-height:1.7; }
.compat-list { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:28px; }
.compat-list span { padding:14px; border-radius:11px; font-size:11px; font-weight:700; border:1px solid var(--border); }
.compat-list .yes { color:#bcffa2; background:rgba(86,203,61,.07); }
.compat-list .no { color:#b2abb8; background:rgba(255,255,255,.025); }
.laptop-wrap { perspective:1500px; transform-style:preserve-3d; }
.laptop { width:min(700px,60vw); margin:auto; transform:rotateX(calc(66deg * (1 - var(--laptop-open,0)))) rotateZ(calc(-4deg * (1 - var(--laptop-open,0)))) scale(calc(.78 + var(--laptop-open,0) * .22)); transform-origin:center bottom; transform-style:preserve-3d; transition:transform .08s linear; }
.laptop-screen { aspect-ratio:16/10; padding:12px; border:4px solid #272631; border-radius:20px 20px 8px 8px; background:#030307; box-shadow:0 0 0 1px #64616e,0 20px 80px #000,0 0 80px rgba(70,45,255,.13); }
.screen-ui { height:100%; display:grid; grid-template-columns:20% 1fr; overflow:hidden; border-radius:8px; background:linear-gradient(145deg,#13111c,#090811); }
.screen-ui aside { padding:18px 12px; border-right:1px solid var(--border); }
.screen-ui aside img { width:46px; display:block; margin:0 auto 35px; }
.screen-ui aside i { display:block; height:8px; margin:15px 3px; border-radius:8px; background:#2c2835; }
.screen-ui aside i:nth-child(2) { background:linear-gradient(90deg,var(--purple),var(--red)); }
.screen-content { padding:23px; }
.screen-top { height:19px; width:48%; margin-bottom:28px; border-radius:20px; background:#24212c; }
.screen-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; }
.screen-cards i { aspect-ratio:.85; border:1px solid var(--border); border-radius:12px; background:linear-gradient(145deg,#282135,#101019); box-shadow:inset 0 -28px 40px rgba(124,53,255,.14); }
.screen-cards i:nth-child(2n){box-shadow:inset 0 -28px 40px rgba(242,45,69,.13)}
.windows-badge { position:absolute; left:50%; top:50%; display:flex; align-items:center; gap:15px; transform:translate(-50%,-50%) scale(var(--laptop-open,0)); padding:18px 25px; border:1px solid rgba(255,255,255,.18); border-radius:18px; background:rgba(6,7,12,.75); backdrop-filter:blur(16px); box-shadow:0 20px 60px #000; }
.windows-badge b { font-size:38px; color:#60b6ff; }
.windows-badge span { font-size:12px; color:#9a95a1; }
.windows-badge strong { color:white; font-size:17px; }
.laptop-base { width:110%; height:18px; margin-left:-5%; border-radius:3px 3px 18px 18px; background:linear-gradient(#777784,#262632 40%,#0b0b0f); box-shadow:0 26px 30px #000; }
.laptop-base span { display:block; margin:auto; width:16%; height:6px; border-radius:0 0 8px 8px; background:#111117; }
/* Macbook Scroll — comportamento equivalente ao componente React enviado */
.orbital-benefits { padding-top:150px; padding-bottom:150px; }
.orbital-benefits>.section-heading p { margin-inline:auto; }
.orbital-layout { min-height:720px; display:grid; grid-template-columns:minmax(540px,1.15fr) minmax(350px,.85fr); align-items:center; gap:34px; position:relative; overflow:hidden; border:1px solid var(--border); border-radius:38px; background:radial-gradient(circle at 28% 48%,rgba(105,47,255,.14),transparent 32%),radial-gradient(circle at 80% 35%,rgba(242,45,69,.08),transparent 28%),linear-gradient(145deg,rgba(17,14,27,.96),rgba(7,6,12,.98)); box-shadow:0 45px 110px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.06); }
.orbital-canvas { --orbit-radius:225px; position:relative; width:min(680px,55vw); aspect-ratio:1; place-self:center; perspective:1200px; isolation:isolate; }
.orbit-grid { position:absolute; inset:3%; opacity:.12; border-radius:50%; background-image:linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px); background-size:34px 34px; mask-image:radial-gradient(circle,#000 0 49%,transparent 72%); }
.orbit-ring { position:absolute; left:50%; top:50%; border:1px solid rgba(255,255,255,.12); border-radius:50%; transform:translate(-50%,-50%); box-shadow:inset 0 0 55px rgba(124,53,255,.04),0 0 35px rgba(124,53,255,.04); }
.orbit-ring-one { width:calc(var(--orbit-radius)*2); height:calc(var(--orbit-radius)*2); }
.orbit-ring-two { width:calc(var(--orbit-radius)*1.35); height:calc(var(--orbit-radius)*1.35); border-style:dashed; opacity:.7; animation:orbit-spin 28s linear infinite reverse; }
.orbit-beam { position:absolute; left:50%; top:50%; width:calc(var(--orbit-radius)*2); height:calc(var(--orbit-radius)*2); transform:translate(-50%,-50%); border-radius:50%; background:conic-gradient(from var(--orbit-angle,0deg),transparent 0 76%,rgba(91,181,255,.16) 84%,rgba(153,70,255,.25) 90%,rgba(255,56,78,.17) 96%,transparent); filter:blur(2px); opacity:.8; }
.orbit-core { position:absolute; z-index:10; left:50%; top:50%; width:112px; height:112px; padding:8px; display:grid; place-items:center; transform:translate(-50%,-50%); border:1px solid rgba(255,255,255,.23); border-radius:32px; background:radial-gradient(circle,rgba(124,53,255,.26),rgba(8,7,13,.94) 66%); box-shadow:0 0 75px rgba(124,53,255,.34),inset 0 1px rgba(255,255,255,.14); }
.orbit-core::before,.orbit-core::after { content:""; position:absolute; border:1px solid rgba(152,87,255,.27); border-radius:38px; animation:core-ping 2.7s ease-out infinite; }
.orbit-core::before{inset:-15px}.orbit-core::after{inset:-31px;animation-delay:.8s}
.orbit-core img { position:relative; z-index:2; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 12px 25px #000); }
.core-pulse { position:absolute; inset:20%; border-radius:50%; background:linear-gradient(135deg,var(--blue),var(--purple),var(--red)); filter:blur(24px); opacity:.32; }
.orbit-node { --node-scale:1; position:absolute; z-index:20; left:50%; top:50%; width:62px; height:62px; padding:0; display:grid; place-items:center; transform:translate(calc(-50% + var(--node-x,0px)),calc(-50% + var(--node-y,0px))) scale(var(--node-scale)); border:1px solid rgba(255,255,255,.28); border-radius:20px; color:white; background:rgba(10,8,16,.9); backdrop-filter:blur(16px); box-shadow:0 18px 45px #000,inset 0 1px rgba(255,255,255,.12); cursor:pointer; transition:border-color .3s,background .3s,box-shadow .3s,opacity .3s; will-change:transform; }
.orbit-node b { position:relative; z-index:2; display:grid; place-items:center; width:36px; height:36px; border-radius:12px; background:linear-gradient(135deg,var(--blue),var(--purple),var(--red)); font-size:19px; }
.orbit-node small { position:absolute; top:72px; left:50%; transform:translateX(-50%); width:max-content; color:#a9a3b1; font-size:10px; font-weight:800; letter-spacing:.04em; text-shadow:0 2px 10px #000; }
.node-energy { position:absolute; inset:-9px; border:1px solid transparent; border-radius:27px; transition:.3s; }
.orbit-node:hover,.orbit-node.is-active { --node-scale:1.18; border-color:var(--lime); background:rgba(22,15,34,.96); box-shadow:0 20px 55px #000,0 0 35px rgba(130,245,91,.18); }
.orbit-node.is-active .node-energy { border-color:rgba(130,245,91,.5); box-shadow:0 0 24px rgba(130,245,91,.22); animation:node-pulse 1.4s ease-in-out infinite; }
.orbit-node.is-active small { color:white; }
.orbit-toggle { position:absolute; z-index:25; left:50%; bottom:26px; transform:translateX(-50%); padding:10px 14px; display:flex; align-items:center; gap:8px; border:1px solid var(--border); border-radius:999px; color:#938d9b; background:rgba(8,7,13,.7); cursor:pointer; font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.orbit-toggle:hover { color:#fff; border-color:rgba(255,255,255,.22); }
.orbital-details { position:relative; min-height:620px; margin-right:30px; }
.orbital-detail { position:absolute; inset:0; display:flex; flex-direction:column; overflow:hidden; opacity:0; transform:translateX(25px) scale(.98); pointer-events:none; border:1px solid rgba(255,255,255,.13); border-radius:28px; background:linear-gradient(160deg,rgba(28,23,41,.96),rgba(9,8,14,.98)); box-shadow:0 28px 75px #000; transition:opacity .45s ease,transform .45s ease; }
.orbital-detail.is-active { opacity:1; transform:none; pointer-events:auto; }
.detail-image { position:relative; height:300px; overflow:hidden; }
.detail-image::after { content:""; position:absolute; inset:40% 0 0; background:linear-gradient(transparent,#100d18); }
.detail-image img { width:100%; height:100%; object-fit:cover; transition:transform .8s ease; }
.orbital-detail.is-active .detail-image img { transform:scale(1.04); }
.detail-copy { padding:28px 30px 30px; }
.detail-copy>span { color:var(--lime); font-size:9px; letter-spacing:.16em; font-weight:900; }
.detail-copy h3 { margin:10px 0 13px; font-size:27px; line-height:1.04; letter-spacing:-.04em; }
.detail-copy>p { color:var(--muted); font-size:12px; line-height:1.65; }
.energy { display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px; margin-top:20px; padding-top:17px; border-top:1px solid var(--border); }
.energy small { color:#7c7683; font-size:8px; letter-spacing:.12em; font-weight:800; }
.energy b { color:#d9d4df; font-size:10px; }
.energy i { grid-column:1/-1; height:4px; overflow:hidden; border-radius:5px; background:rgba(255,255,255,.07); }
.energy em { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--blue),var(--purple),var(--red)); box-shadow:0 0 12px var(--purple); }
@keyframes core-ping { 0%{transform:scale(.75);opacity:.8}100%{transform:scale(1.35);opacity:0} }
@keyframes node-pulse { 50%{transform:scale(1.12);opacity:.55} }
@keyframes orbit-spin { to{transform:translate(-50%,-50%) rotate(360deg)} }
@media(max-width:980px){.orbital-layout{grid-template-columns:1fr;padding:20px 0 30px}.orbital-canvas{width:min(650px,92vw)}.orbital-details{width:calc(100% - 40px);min-height:590px;margin:0 auto}}
@media(max-width:600px){.orbital-benefits{width:100%;padding-inline:10px}.orbital-layout{border-radius:28px}.orbital-canvas{--orbit-radius:145px;width:390px;max-width:110vw;margin-left:-5vw}.orbit-core{width:84px;height:84px;border-radius:24px}.orbit-node{width:52px;height:52px;border-radius:17px}.orbit-node b{width:32px;height:32px}.orbit-node small{top:61px;font-size:8px}.orbit-toggle{bottom:4px}.orbital-details{width:calc(100% - 20px);min-height:560px}.detail-image{height:260px}.detail-copy{padding:24px 22px}}
.macbook-scroll {
  --mac-progress: 0;
  height: 250vh;
  position: relative;
  overflow: visible;
  border-block: 1px solid var(--border);
  background: radial-gradient(circle at 50% 62%, rgba(92,49,255,.16), transparent 34%), radial-gradient(circle at 75% 55%, rgba(242,45,69,.08), transparent 28%), #090811;
}
.macbook-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 72px;
  perspective: 1800px;
}
.macbook-title {
  position: relative;
  z-index: 5;
  width: min(840px, calc(100% - 40px));
  text-align: center;
  opacity: calc(1 - var(--mac-progress) * 1.45);
  transform: translateY(calc(var(--mac-progress) * -95px)) scale(calc(1 - var(--mac-progress) * .08));
  transition: opacity .08s linear, transform .08s linear;
}
.macbook-title .eyebrow { justify-content: center; }
.macbook-title h2 { margin: 16px 0 12px; font-size: clamp(38px, 4.4vw, 64px); }
.macbook-title > p { max-width: 650px; margin: 0 auto; color: var(--muted); line-height: 1.65; }
.macbook-title .compat-list { max-width: 630px; margin: 22px auto 0; grid-template-columns: repeat(4, 1fr); }
.macbook-stage {
  position: absolute;
  left: 50%;
  top: 56%;
  width: min(1120px, 90vw);
  height: 700px;
  transform: translate(-50%, calc(-42% - var(--mac-progress) * 75px));
  transform-style: preserve-3d;
}
.macbook-device {
  position: absolute;
  left: 50%;
  top: 49%;
  width: min(940px, 82vw);
  aspect-ratio: 1.72;
  transform: translate(-50%, -50%) rotateX(calc(69deg - var(--mac-progress) * 69deg)) scale(calc(.54 + var(--mac-progress) * .46));
  transform-origin: 50% 92%;
  transform-style: preserve-3d;
  transition: transform .06s linear;
}
.macbook-lid {
  position: absolute;
  z-index: 3;
  left: 8%;
  top: 0;
  width: 84%;
  aspect-ratio: 16 / 10.25;
  padding: 11px 11px 0;
  overflow: hidden;
  border: 1px solid #767680;
  border-radius: 24px 24px 7px 7px;
  background: linear-gradient(135deg, #5d5e67, #1d1d23 5%, #08080b 92%, #484852);
  box-shadow: 0 0 0 1px #111, 0 40px 90px rgba(0,0,0,.72), 0 0 calc(90px * var(--mac-progress)) rgba(105,52,255,.23);
  backface-visibility: hidden;
}
.macbook-display {
  position: relative;
  width: 100%;
  height: calc(100% - 28px);
  overflow: hidden;
  border-radius: 15px 15px 3px 3px;
  background: #030308;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.macbook-display img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: top left;
  filter: saturate(1.07) contrast(1.04) brightness(calc(.62 + var(--mac-progress) * .38));
  transform: scale(calc(1.06 - var(--mac-progress) * .06));
  transition: filter .08s linear, transform .08s linear;
}
.mac-camera { position: absolute; z-index: 3; top: 5px; left: 50%; width: 7px; height: 7px; transform: translateX(-50%); border-radius: 50%; background: #090911; box-shadow: inset 0 0 2px #31517c; }
.screen-shine { position: absolute; inset: 0; pointer-events: none; opacity: calc(.68 - var(--mac-progress) * .55); background: linear-gradient(115deg, rgba(255,255,255,.22), transparent 28%, transparent 70%, rgba(100,60,255,.09)); }
.macbook-chin { height: 28px; display: grid; place-items: center; color: #8b8992; font-size: 7px; font-weight: 800; letter-spacing: .22em; }
.macbook-deck {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 87%;
  height: 49%;
  padding: 4.7% 11% 3%;
  border: 1px solid #85858d;
  border-radius: 13px 13px 40px 40px;
  background: linear-gradient(145deg, #808087, #424249 42%, #26262c 72%, #6f6f76);
  transform: rotateX(78deg) translateZ(-8px);
  transform-origin: 50% 0;
  box-shadow: 0 45px 80px #000;
}
.keyboard { display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px; width: 100%; height: 52%; }
.keyboard-key { min-width: 0; border-radius: 3px; border: 1px solid #1e1e23; background: linear-gradient(#202026, #0b0b0e); box-shadow: inset 0 1px rgba(255,255,255,.08), 0 1px 1px rgba(255,255,255,.09); }
.trackpad { width: 37%; height: 36%; margin: 3.2% auto 0; border: 1px solid rgba(25,25,28,.52); border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.macbook-edge { position: absolute; z-index: 4; left: -2%; right: -2%; top: 99%; height: 18px; border-radius: 4px 4px 22px 22px; background: linear-gradient(#85858c, #2b2b31 38%, #111116); box-shadow: 0 15px 40px #000; }
.macbook-edge span { display: block; width: 14%; height: 6px; margin: 0 auto; border-radius: 0 0 9px 9px; background: #1a1a20; }
.macbook-shadow { position: absolute; z-index: -1; left: 50%; top: 77%; width: min(980px, 80vw); height: 90px; opacity: calc(.3 + var(--mac-progress) * .7); transform: translateX(-50%) scale(calc(.65 + var(--mac-progress) * .35)); border-radius: 50%; background: #000; filter: blur(35px); }
.macbook-badge {
  position: absolute;
  z-index: 8;
  left: calc(50% + min(420px, 35vw));
  top: 28%;
  width: 82px;
  height: 82px;
  padding: 7px;
  opacity: var(--mac-progress);
  transform: translateY(calc((1 - var(--mac-progress)) * 80px)) rotate(calc(-18deg + var(--mac-progress) * 8deg)) scale(calc(.5 + var(--mac-progress) * .5));
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 24px;
  background: rgba(15,12,22,.82);
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 55px #000, 0 0 40px rgba(124,53,255,.22);
}
.macbook-badge img { width: 100%; height: 100%; object-fit: contain; }
@media(max-width: 950px) {
  .macbook-scroll { height: 220vh; }
  .macbook-sticky { padding-top: 85px; }
  .macbook-title .compat-list { grid-template-columns: repeat(2, 1fr); }
  .macbook-stage { top: 62%; width: 110vw; }
  .macbook-device { width: 98vw; }
  .macbook-badge { left: auto; right: 5vw; top: 38%; width: 62px; height: 62px; }
}
@media(max-width: 600px) {
  .macbook-scroll { height: 190vh; }
  .macbook-sticky { padding-top: 82px; }
  .macbook-title { width: calc(100% - 26px); }
  .macbook-title h2 { font-size: 35px; }
  .macbook-title > p { font-size: 13px; }
  .macbook-title .compat-list { gap: 6px; margin-top: 14px; }
  .macbook-title .compat-list span { padding: 9px 6px; font-size: 9px; }
  .macbook-stage { top: 67%; width: 138vw; }
  .macbook-device { width: 125vw; }
  .macbook-badge { display: none; }
  .keyboard { gap: 2px; }
}
.glassy-pricing {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding: 135px 20px;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: #07060c;
}
.pricing-shader {
  position: absolute;
  z-index: -3;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.pricing-noise {
  position: absolute;
  z-index: -2;
  inset: 0;
  opacity: .11;
  pointer-events: none;
  background-image: radial-gradient(circle at 50% 50%, transparent 0 30%, rgba(0,0,0,.62) 74%), url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}
.pricing-shell {
  width: min(1120px, 100%);
  display: grid;
  grid-template-columns: 1fr minmax(400px, 480px);
  align-items: center;
  gap: 85px;
}
.pricing-heading { text-align: left; }
.pricing-heading h2 { font-size: clamp(48px, 5.6vw, 78px); }
.pricing-heading>p { max-width: 590px; color: #aaa4b1; font-size: 16px; line-height: 1.75; }
.glassy-price-card {
  position: relative;
  padding: 39px;
  overflow: visible;
  text-align: left;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 30px;
  background: linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.045));
  box-shadow: 0 45px 110px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.18), 0 0 80px rgba(93,44,255,.12);
  backdrop-filter: blur(24px) brightness(.88);
}
.glassy-price-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg,rgba(91,188,255,.8),rgba(255,255,255,.08) 28%,rgba(255,255,255,.04) 66%,rgba(255,54,78,.72));
  mask: linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}
.glassy-price-card::after {
  content: "";
  position: absolute;
  z-index: -2;
  left: 15%;
  right: 15%;
  bottom: -35px;
  height: 65px;
  border-radius: 50%;
  background: linear-gradient(90deg,var(--blue),var(--purple),var(--red));
  filter: blur(38px);
  opacity: .28;
}
.popular-badge {
  position: absolute;
  right: 25px;
  top: -16px;
  padding: 9px 14px;
  border: 1px solid rgba(186,255,158,.5);
  border-radius: 999px;
  color: #12200c;
  background: linear-gradient(135deg,#baff9c,#72e854);
  box-shadow: 0 10px 30px rgba(116,239,79,.2);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
}
.price-card-top { display: flex; align-items: center; gap: 15px; }
.price-card-top img { width: 70px; height: 70px; object-fit: contain; filter: drop-shadow(0 15px 22px #000); }
.price-card-top small { color: #8c8692; font-size: 8px; letter-spacing: .15em; font-weight: 900; }
.price-card-top h3 { margin: 5px 0 0; font-size: 24px; letter-spacing: -.04em; }
.plan-description { margin: 24px 0 0; color: #aaa4b0; font-size: 13px; line-height: 1.65; }
.glass-price { display: flex; align-items: flex-end; margin: 28px 0; line-height: .83; }
.glass-price>span { margin: 0 7px 10px 0; font-size: 22px; font-weight: 800; }
.glass-price strong { color: transparent; background: linear-gradient(135deg,#fff 10%,#71c7ff 42%,#a770ff 67%,#ff5770); background-clip: text; -webkit-background-clip: text; font-size: 86px; font-weight: 300; letter-spacing: -.08em; text-shadow: 0 0 45px rgba(120,71,255,.18); }
.glass-price small { margin: 0 0 8px 10px; color: #9b95a1; font-size: 14px; }
.glass-divider { width: 100%; height: 1px; margin-bottom: 25px; background: linear-gradient(90deg,transparent,rgba(255,255,255,.1) 18%,rgba(255,255,255,.28) 50%,rgba(255,255,255,.1) 82%,transparent); }
.pricing-features { display: grid; gap: 13px; margin: 0 0 29px; padding: 0; list-style: none; }
.pricing-features li { display: flex; align-items: center; gap: 11px; color: #d4ced8; font-size: 12px; }
.pricing-features i { width: 20px; height: 20px; display: grid; place-items: center; flex-shrink: 0; border: 1px solid rgba(120,230,255,.35); border-radius: 7px; color: #8eefff; background: rgba(78,193,255,.08); font-size: 10px; font-style: normal; }
.glass-price-button {
  position: relative;
  width: 100%;
  min-height: 59px;
  padding: 0 21px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.23);
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(110deg,#178fdd,#7839ef 50%,#e82f50);
  box-shadow: 0 18px 45px rgba(105,46,230,.3),inset 0 1px rgba(255,255,255,.28);
  font-size: 13px;
  font-weight: 900;
  transition: transform .25s,box-shadow .25s;
}
.glass-price-button:hover { transform: translateY(-3px); box-shadow: 0 24px 52px rgba(105,46,230,.42),inset 0 1px rgba(255,255,255,.28); }
.glass-price-button>span,.glass-price-button>b { position: relative; z-index: 2; }
.glass-price-button>b { font-size: 20px; }
.pricing-ripple { position: absolute; z-index: 1; border-radius: 50%; pointer-events: none; background: rgba(255,255,255,.42); transform: scale(0); animation: pricing-ripple .65s ease-out forwards; }
.pricing-disclaimer { margin: 16px 0 0; color: #77717d; text-align: center; font-size: 9px; line-height: 1.55; }
@keyframes pricing-ripple { to { transform: scale(1); opacity: 0; } }
@media(max-width:900px) {
  .pricing-shell { grid-template-columns: 1fr; gap: 45px; }
  .pricing-heading { text-align: center; }
  .pricing-heading .eyebrow { justify-content: center; }
  .pricing-heading>p { margin-inline: auto; }
  .glassy-price-card { width: min(480px,100%); margin: auto; }
}
@media(max-width:600px) {
  .glassy-pricing { padding: 100px 14px; }
  .pricing-heading h2 { font-size: 43px; }
  .pricing-heading>p { font-size: 13px; }
  .glassy-price-card { padding: 32px 23px; border-radius: 24px; }
  .glass-price strong { font-size: 74px; }
  .popular-badge { right: 16px; }
}
.offer { position:relative; text-align:center; }
.offer-glow { position:absolute; left:50%; top:50%; width:800px; height:550px; transform:translate(-50%,-50%); background:conic-gradient(from 90deg,rgba(25,157,255,.15),rgba(124,53,255,.22),rgba(242,45,69,.18),rgba(25,157,255,.15)); filter:blur(100px); border-radius:50%; }
.offer-card { max-width:750px; margin:auto; padding:60px; position:relative; border:1px solid rgba(255,255,255,.14); border-radius:32px; background:linear-gradient(145deg,rgba(25,21,36,.97),rgba(8,7,13,.97)); box-shadow:0 50px 120px #000; }
.offer-card::before { content:""; position:absolute; inset:-1px; padding:1px; border-radius:32px; background:linear-gradient(130deg,var(--blue),transparent 25%,transparent 70%,var(--red)); mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0); pointer-events:none; }
.offer-card>img { width:110px; filter:drop-shadow(0 20px 30px #000); }
.offer-card .eyebrow { justify-content:center; margin-top:25px; }
.offer-intro { max-width:550px; margin:0 auto; color:var(--muted); line-height:1.7; }
.price { display:flex; align-items:flex-end; justify-content:center; margin:36px 0 28px; line-height:.8; }
.price small { font-size:23px; font-weight:800; margin:0 4px 10px 0; }
.price strong { font-size:94px; letter-spacing:-.08em; color:var(--lime); }
.price span { margin:0 0 8px 8px; color:#9f99a7; font-size:17px; }
.button-wide { width:100%; min-height:64px; font-size:15px; }
.offer-note { margin:18px auto 0; max-width:550px; color:#77717e; font-size:10px; line-height:1.5; }
.faq { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; align-items:start; }
.faq-list { border-top:1px solid var(--border); }
details { border-bottom:1px solid var(--border); }
summary { padding:24px 5px; list-style:none; cursor:pointer; font-weight:700; font-size:14px; display:flex; justify-content:space-between; }
summary::after { content:"+"; color:var(--purple-2); font-size:20px; }
details[open] summary::after { content:"−"; }
details p { margin:-5px 0 24px; max-width:600px; color:var(--muted); font-size:13px; line-height:1.7; }
footer { min-height:130px; width:min(1180px,calc(100% - 40px)); margin:auto; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--border); color:#716b78; font-size:11px; }
footer p { margin:0; }
.reveal { opacity:0; transform:translateY(35px); transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.visible { opacity:1; transform:none; }
.checkout-modal { position:fixed; z-index:101; left:50%; top:50%; width:min(460px,calc(100% - 32px)); padding:38px; transform:translate(-50%,-50%); text-align:center; border:1px solid var(--border); border-radius:25px; background:#15111f; box-shadow:0 40px 100px #000; }
.checkout-modal img { width:90px; }
.checkout-modal h2 { font-size:36px; }
.checkout-modal p { color:var(--muted); line-height:1.6; font-size:13px; }
.modal-close { position:absolute; right:15px; top:10px; border:0; background:none; color:#aaa; cursor:pointer; font-size:30px; }
.modal-backdrop { position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.75); backdrop-filter:blur(7px); }
[hidden] { display:none!important; }
@media(max-width:950px){
  .topbar nav{display:none}.hero{grid-template-columns:1fr;padding-top:130px;text-align:center}.hero-copy{margin:auto}.hero-copy .eyebrow,.hero-actions,.micro-proof{justify-content:center}.hero-visual{height:580px}.tool-grid{grid-template-columns:repeat(2,1fr)}.steps{grid-template-columns:repeat(2,1fr)}.compat-sticky{grid-template-columns:1fr;text-align:center;padding-top:80px}.compat-copy{margin:auto}.laptop{width:min(680px,90vw)}.faq{grid-template-columns:1fr;gap:20px}
}
@media(max-width:600px){
  .topbar{top:10px}.brand span{display:none}.hero{padding-inline:18px}.hero h1{font-size:45px}.hero-copy>p{font-size:14px}.hero-actions{flex-direction:column}.micro-proof{gap:9px}.hero-visual{height:470px;margin-inline:-18px}.chest-scene{width:400px;transform:translate(-50%,-50%) scale(.76)}.orb{width:64px;height:64px}.orb span{top:70px}.section{width:min(100% - 28px,1180px);padding:90px 0}.tool-grid{grid-template-columns:1fr}.tool-card.featured{grid-column:auto}.mini-chart{opacity:.35}.steps{grid-template-columns:1fr}.workflow-line{display:none}.compatibility{height:170vh}.compat-sticky{padding-inline:15px}.compat-list{grid-template-columns:1fr 1fr}.offer-card{padding:38px 22px}.offer-card h2{font-size:39px}.price strong{font-size:78px}footer{flex-direction:column;justify-content:center;gap:12px;text-align:center}footer .brand span{display:inline}.cursor-glow{display:none}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* Hero inspirado no portfólio 3D: tipografia monumental e marca como objeto central. */
.creator-hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  padding: 25px clamp(22px, 4vw, 62px) 34px;
  background:
    radial-gradient(circle at 16% 25%, rgba(25,157,255,.14), transparent 26%),
    radial-gradient(circle at 84% 30%, rgba(242,45,69,.15), transparent 28%),
    linear-gradient(180deg, #08070d, #050409 75%, #08070d);
}
.creator-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .13;
  background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(circle at center, #000, transparent 72%);
}
.creator-aurora {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 54%;
  width: min(950px, 85vw);
  height: min(650px, 68vw);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: conic-gradient(from 215deg, rgba(27,155,255,.3), rgba(115,35,255,.12), rgba(242,45,69,.3), rgba(27,155,255,.3));
  filter: blur(100px);
  opacity: .55;
  animation: creator-breathe 7s ease-in-out infinite;
}
.creator-nav { position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; }
.creator-hero .reveal { opacity: 1; transform: none; animation: creator-enter .8s cubic-bezier(.2,.8,.2,1) both; }
.creator-hero .creator-title-wrap { animation-delay: .12s; }
.creator-hero .creator-bottom .reveal { animation-delay: .32s; }
.creator-brand { display: flex; align-items: center; gap: 11px; font-size: 13px; font-weight: 900; letter-spacing: .035em; }
.creator-brand img { width: 48px; height: 48px; object-fit: contain; }
.creator-brand b { color: var(--red); }
.creator-nav-links { display: flex; gap: clamp(20px, 4vw, 60px); color: #c4bfca; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.creator-nav-links a { transition: color .25s, opacity .25s; }
.creator-nav-links a:hover { color: white; }
.creator-title-wrap { position: relative; z-index: 1; margin-top: clamp(42px, 6vh, 78px); overflow: hidden; text-align: center; }
.creator-hero h1 {
  margin: 0;
  white-space: nowrap;
  font-size: clamp(58px, 13.2vw, 215px);
  line-height: .77;
  letter-spacing: -.075em;
  font-weight: 900;
  color: transparent;
  background: linear-gradient(180deg, #f4f5fa 0%, #a7afc0 55%, #3d4250 100%);
  background-clip: text;
  -webkit-background-clip: text;
  text-shadow: 0 30px 80px rgba(0,0,0,.25);
}
.hero-emblem {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 54%;
  width: clamp(290px, 38vw, 570px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) translate3d(var(--emblem-x, 0px), var(--emblem-y, 0px), 0) rotateX(var(--emblem-rx, 0deg)) rotateY(var(--emblem-ry, 0deg));
  transform-style: preserve-3d;
  transition: transform .16s ease-out;
}
.hero-emblem img { position: absolute; z-index: 3; inset: 7%; width: 86%; height: 86%; object-fit: contain; filter: drop-shadow(0 35px 38px rgba(0,0,0,.72)) drop-shadow(-18px 0 35px rgba(25,157,255,.16)) drop-shadow(18px 0 35px rgba(242,45,69,.18)); animation: emblem-float 5s ease-in-out infinite; }
.emblem-glow { position: absolute; inset: 18%; border-radius: 50%; background: linear-gradient(110deg, rgba(25,157,255,.8), rgba(124,53,255,.5), rgba(242,45,69,.8)); filter: blur(55px); opacity: .45; }
.emblem-orbit { position: absolute; inset: 1%; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; transform: rotateX(72deg) rotateZ(15deg); }
.emblem-orbit::after { content: ""; position: absolute; left: 9%; top: 20%; width: 8px; height: 8px; border-radius: 50%; background: #73c7ff; box-shadow: 0 0 22px #199dff; }
.orbit-b { inset: 12%; transform: rotateY(70deg) rotateZ(-20deg); border-color: rgba(255,65,90,.17); }
.orbit-b::after { left: auto; right: 4%; top: 48%; background: #ff4058; box-shadow: 0 0 22px #f22d45; }
.creator-bottom { position: relative; z-index: 8; display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; margin-top: auto; }
.creator-bottom p { width: min(330px, 42vw); margin: 0; color: #aaa6b1; font-size: clamp(11px, 1.1vw, 15px); line-height: 1.55; text-transform: uppercase; letter-spacing: .065em; }
.creator-cta { --magnetic-x: 0px; --magnetic-y: 0px; min-width: 220px; height: 64px; padding: 0 9px 0 25px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid rgba(255,255,255,.23); border-radius: 999px; background: linear-gradient(115deg, rgba(33,25,48,.9), rgba(15,12,22,.9)); box-shadow: 0 20px 55px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.1); font-size: 10px; font-weight: 800; letter-spacing: .12em; transform: translate(var(--magnetic-x), var(--magnetic-y)); transition: transform .2s ease-out, border-color .3s; }
.creator-cta:hover { border-color: rgba(167,95,255,.75); }
.creator-cta b { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, var(--purple), var(--red)); font-size: 17px; }
.creator-scroll { position: absolute; z-index: 7; left: 50%; bottom: 30px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; color: #75717d; font-size: 7px; font-weight: 800; letter-spacing: .18em; }
.creator-scroll i { width: 1px; height: 35px; overflow: hidden; background: rgba(255,255,255,.14); }
.creator-scroll i::after { content: ""; display: block; width: 100%; height: 45%; background: linear-gradient(var(--blue), var(--red)); animation: creator-scroll-line 1.8s ease-in-out infinite; }
@keyframes creator-breathe { 50% { opacity: .78; transform: translate(-50%, -50%) scale(1.08) rotate(7deg); } }
@keyframes creator-enter { from { opacity: 0; transform: translateY(25px); } to { opacity: 1; transform: none; } }
@keyframes emblem-float { 50% { transform: translateY(-13px) rotate(1deg); } }
@keyframes creator-scroll-line { from { transform: translateY(-130%); } to { transform: translateY(240%); } }

/* Copy revelada caractere por caractere durante a rolagem. */
.animated-manifesto { width: min(1000px, calc(100% - 40px)); min-height: 100svh; margin: 0 auto; padding: 16vh 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.manifesto-kicker { margin-bottom: 42px; color: var(--lime); font-size: 10px; font-weight: 900; letter-spacing: .2em; }
.animated-manifesto>p { margin: 0; font-size: clamp(34px, 5vw, 71px); line-height: 1.08; letter-spacing: -.05em; font-weight: 800; }
.animated-manifesto .animated-char { color: #f7f5fb; opacity: var(--char-opacity, .14); transition: opacity .09s linear; }
.manifesto-link { --magnetic-x: 0px; --magnetic-y: 0px; margin-top: 55px; padding-bottom: 8px; display: inline-flex; gap: 14px; border-bottom: 1px solid rgba(255,255,255,.25); color: #b8b2c0; font-size: 10px; font-weight: 900; letter-spacing: .15em; transform: translate(var(--magnetic-x), var(--magnetic-y)); transition: transform .2s ease-out, color .25s; }
.manifesto-link:hover { color: white; }
.manifesto-link span { color: var(--lime); }

/* Galeria em duas direções usando as artes reais das ferramentas. */
.visual-showcase { padding-top: 125px; padding-bottom: 115px; }
.visual-showcase .integration-content { width: min(850px, calc(100% - 34px)); }
.visual-showcase .integration-marquee { margin-top: 75px; padding: 0; mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.visual-showcase .integration-row + .integration-row { margin-top: 15px; }
.visual-showcase .integration-set { gap: 15px; padding-right: 15px; }
.showcase-card { position: relative; width: clamp(230px, 22vw, 330px); height: clamp(300px, 29vw, 430px); flex-shrink: 0; margin: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 25px; background: #0a0910; box-shadow: 0 25px 60px rgba(0,0,0,.42); }
.showcase-card::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(5,4,9,.94)); pointer-events: none; }
.showcase-card img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; filter: saturate(.88) contrast(1.03); transition: transform .6s ease, filter .6s ease; }
.showcase-card figcaption { position: absolute; z-index: 2; left: 21px; right: 21px; bottom: 19px; display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.showcase-card small { color: #918b99; font-size: 7px; font-weight: 900; letter-spacing: .17em; }
.showcase-card b { font-size: 15px; }
.showcase-card:hover img { transform: scale(1.045); filter: saturate(1.12) contrast(1.05); }
.visual-showcase .scroll-left { animation-duration: 48s; }
.visual-showcase .scroll-right { animation-duration: 52s; }

@media(max-width: 720px) {
  .creator-hero { min-height: 100svh; padding: 18px 18px 25px; }
  .creator-nav-links { display: none; }
  .creator-title-wrap { position: absolute; z-index: 2; top: 102px; left: 10px; right: 10px; margin: 0; opacity: 1 !important; transform: none !important; animation: none !important; }
  .creator-hero h1 { color: #d9dee8; background: none; -webkit-text-fill-color: initial; font-size: 10.8vw; line-height: .86; letter-spacing: -.06em; }
  .hero-emblem { top: 49%; width: min(84vw, 390px); }
  .creator-bottom { position: absolute; left: 18px; right: 18px; bottom: 24px; align-items: flex-start; flex-direction: column; margin: 0; }
  .creator-bottom .reveal { opacity: 1 !important; transform: none !important; animation: none !important; }
  .creator-bottom p { width: min(330px, 82vw); }
  .creator-cta { min-width: 205px; height: 58px; }
  .creator-cta b { width: 42px; height: 42px; }
  .creator-scroll { left: auto; right: 5px; transform: none; }
  .animated-manifesto { min-height: 82svh; padding-block: 110px; }
  .animated-manifesto>p { font-size: clamp(31px, 9vw, 48px); }
  .visual-showcase { padding-top: 95px; padding-bottom: 90px; }
  .visual-showcase .integration-marquee { margin-top: 50px; }
  .showcase-card { width: 205px; height: 300px; border-radius: 19px; }
  .showcase-card figcaption { left: 15px; right: 15px; bottom: 14px; }
}

@media(prefers-reduced-motion: reduce) {
  .creator-aurora, .hero-emblem img, .creator-scroll i::after,
  .visual-showcase .integration-row { animation: none !important; }
  .animated-manifesto .animated-char { opacity: 1 !important; }
  .hero-emblem { transition: none; }
}

/* Pôsteres completos: preserva a arte original sem cortar nomes ou elementos. */
.tool-grid-real .tool-card-image:not(.featured) {
  min-height: 455px;
}
.tool-card-image .tool-poster {
  height: 300px;
  padding: 0;
  object-fit: contain;
  object-position: center;
  background: transparent;
  filter: saturate(1.02) contrast(1.03);
}
.tool-card-image:not(.featured)::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 0 auto;
  width: auto;
  height: 305px;
  background-image: var(--poster);
  background-position: center;
  background-size: cover;
  filter: blur(9px) saturate(1.16) brightness(.68);
  opacity: .76;
  transform: scale(1.06);
  pointer-events: none;
}
.tool-card-image::before {
  inset: 178px 0 auto;
  height: 132px;
  background: linear-gradient(180deg, transparent 0%, rgba(18,16,27,.38) 35%, #12101b 92%);
}
.tool-card-image:hover .tool-poster {
  transform: scale(1.025);
  filter: saturate(1.12) contrast(1.04);
}
.tool-card-image .tool-copy {
  padding: 21px 22px 25px;
  margin-top: -7px;
}
.tool-grid-real .tool-card-image.featured {
  min-height: 390px;
  grid-template-columns: 1fr 1fr;
}
.tool-grid-real .tool-card-image.featured .tool-poster {
  height: 100%;
  min-height: 390px;
  padding: 24px;
  object-fit: contain;
  object-position: center;
  border-left: 1px solid var(--border);
  background:
    radial-gradient(circle at 20% 28%, rgba(25,157,255,.18), transparent 34%),
    radial-gradient(circle at 82% 30%, rgba(242,45,69,.16), transparent 34%),
    linear-gradient(145deg, #11101b, #08070d);
}
.tool-grid-real .tool-card-image.featured::before {
  inset: 0 40% 0 38%;
  width: 22%;
  height: auto;
  background: linear-gradient(90deg, #12101b, transparent);
}

/* Evita a soma de quase uma tela vazia entre o Scroll Stack e o próximo bloco. */
.scroll-story { padding-bottom: 75px; }
.scroll-stack { padding-bottom: 14vh; }

@media(max-width: 950px) {
  .tool-grid-real .tool-card-image:not(.featured) { min-height: 470px; }
  .tool-card-image .tool-poster { height: 315px; }
  .tool-card-image:not(.featured)::after { height: 320px; }
  .tool-card-image::before { inset: 195px 0 auto; height: 130px; }
}

@media(max-width: 600px) {
  .tool-grid-real .tool-card-image:not(.featured),
  .tool-grid-real .tool-card-image.featured { min-height: 510px; }
  .tool-grid-real .tool-card-image.featured { display: flex; }
  .tool-grid-real .tool-card-image.featured .tool-poster,
  .tool-card-image .tool-poster {
    width: 100%;
    height: 350px;
    min-height: 350px;
    padding: 0;
    border-left: 0;
    border-bottom: 1px solid var(--border);
  }
  .tool-grid-real .tool-card-image.featured::before,
  .tool-card-image::before {
    inset: 225px 0 auto;
    width: auto;
    height: 135px;
    background: linear-gradient(180deg, transparent 0%, rgba(18,16,27,.4) 38%, #12101b 92%);
  }
  .tool-card-image:not(.featured)::after { height: 355px; }
  .scroll-story { padding-bottom: 45px; }
  .scroll-stack { padding-bottom: 8vh; }
}

/* Revisão de legibilidade: corpo maior e títulos menos pesados. */
body { font-size: 16px; }
.eyebrow { font-size: 12px; font-weight: 750; letter-spacing: .12em; }
h2 {
  font-size: clamp(36px, 3.9vw, 54px);
  line-height: 1.08;
  letter-spacing: -.035em;
  font-weight: 750;
}
.section-heading { max-width: 790px; }
.section-heading > p,
.integration-content > p,
.macbook-title > p,
.pricing-heading > p {
  color: #bbb6c2;
  font-size: clamp(17px, 1.22vw, 19px);
  line-height: 1.75;
}
.tool-card small { font-size: 11px; line-height: 1.45; }
.tool-card h3 { font-size: 22px; line-height: 1.15; font-weight: 800; }
.tool-card p { max-width: 360px; color: #b7b1bd; font-size: 15.5px; line-height: 1.72; }
.more-card strong { font-size: 29px; font-weight: 800; line-height: 1.02; }
.more-card span { font-size: 13px; line-height: 1.65; }

.stack-copy small { font-size: 11px; line-height: 1.45; }
.stack-copy h3 {
  font-size: clamp(30px, 3.35vw, 46px);
  line-height: 1.07;
  letter-spacing: -.043em;
  font-weight: 800;
}
.stack-copy > p { font-size: 16px; line-height: 1.72; }
.stack-copy li { font-size: 12px; line-height: 1.35; }

.step > b { font-size: 12px; }
.step h3 { font-size: 23px; line-height: 1.15; font-weight: 800; }
.step p { font-size: 15px; line-height: 1.72; }
.compat-list span { font-size: 13px; line-height: 1.4; }

.orbit-node small { font-size: 11px; }
.orbit-toggle { font-size: 10.5px; }
.detail-copy > span { font-size: 10.5px; }
.detail-copy h3 { font-size: 25px; line-height: 1.1; font-weight: 800; }
.detail-copy > p { font-size: 15px; line-height: 1.7; }
.energy small { font-size: 10px; }
.energy b { font-size: 12px; }

.macbook-title h2 {
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.06;
  font-weight: 750;
}
.pricing-heading h2 {
  font-size: clamp(39px, 4.6vw, 62px);
  line-height: 1.06;
  font-weight: 750;
}
.plan-description { font-size: 15.5px; line-height: 1.72; }
.pricing-features li { font-size: 14px; line-height: 1.45; }
.pricing-disclaimer { font-size: 11.5px; line-height: 1.65; }
.price-card-top small { font-size: 10px; }
.popular-badge { font-size: 10.5px; }

summary { font-size: 16.5px; line-height: 1.45; }
details p { font-size: 15.5px; line-height: 1.75; }
footer { font-size: 13px; }
.checkout-modal p { font-size: 15px; line-height: 1.7; }

.creator-bottom p {
  width: min(380px, 46vw);
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.65;
  text-transform: none;
  letter-spacing: .01em;
}
.creator-cta { font-size: 11.5px; }
.manifesto-kicker, .manifesto-link { font-size: 11.5px; }
.animated-manifesto > p {
  font-size: clamp(33px, 4.45vw, 62px);
  line-height: 1.12;
  letter-spacing: -.042em;
  font-weight: 750;
}
.showcase-card small { font-size: 9.5px; }
.showcase-card b { font-size: 16px; }
.ticker-track { font-size: 13px; }

@media(max-width: 600px) {
  h2 { font-size: 36px; line-height: 1.08; }
  .section-heading > p,
  .integration-content > p,
  .macbook-title > p,
  .pricing-heading > p { font-size: 16.5px; }
  .tool-card p { font-size: 15.5px; }
  .stack-copy h3 { font-size: 31px; }
  .stack-copy > p { font-size: 15px; }
  .step p { font-size: 15px; }
  .orbit-node small { font-size: 9.5px; }
  .detail-copy h3 { font-size: 24px; }
  .detail-copy > p { font-size: 14.5px; }
  .compat-list span { font-size: 11.5px; }
  .pricing-heading h2, .macbook-title h2 { font-size: 36px; }
  .pricing-features li { font-size: 13.5px; }
  summary { font-size: 16px; }
  details p { font-size: 15px; }
  .animated-manifesto > p { font-size: clamp(30px, 8vw, 41px); }
  .creator-bottom p { width: min(340px, 82vw); font-size: 14px; }
}