/* Páginas de marketing (marca-mãe e produtos). */
.home-hero { min-height: 100svh; display: grid; align-items: center; position: relative; overflow: hidden; padding-block: var(--s-16) var(--s-10); }
.home-hero::before { content: ''; position: absolute; inset: -20% -10% auto auto; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px; background: radial-gradient(closest-side, rgba(109, 40, 217, 0.21), rgba(139, 92, 246, 0.064) 50%, transparent 72%); filter: blur(10px); pointer-events: none; }
.home-hero::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, transparent 60%); mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, transparent 60%); opacity: .5; pointer-events: none; }
.home-hero-in { position: relative; z-index: 2; display: grid; gap: var(--s-3); }
.home-title { font-size: var(--t-hero); font-weight: 600; letter-spacing: -.045em; line-height: .98; }
.home-title .serif-i { font-size: 1.12em; letter-spacing: -.02em; padding-right: .06em; }
.hero-ctas { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-1); }
.home-orbit { position: absolute; right: max(-160px, calc((100vw - var(--wrap)) / 2 - 220px)); top: 50%; width: min(720px, 80vw); transform: translateY(-50%); z-index: 1; opacity: .9; }
.orbit-svg circle { fill: none; stroke: url(#og1); stroke-width: 1; }
.orbit-svg .o1 { opacity: .25; stroke-dasharray: 2 10; } .orbit-svg .o2 { opacity: .35; } .orbit-svg .o3 { opacity: .18; stroke-dasharray: 1 6; }
.o-dot, .o-dot2 { transform-origin: 300px 300px; animation: spin 24s linear infinite; } .o-dot2 { animation-duration: 38s; animation-direction: reverse; }
.o-dot circle { fill: var(--magenta-soft); stroke: none; filter: drop-shadow(0 0 6px var(--magenta)); } .o-dot2 circle { fill: var(--cyan); stroke: none; }
.mark-anim { position: absolute; inset: 24%; width: 52%; height: 52%; filter: drop-shadow(0 0 18px rgba(168, 85, 247, .45)); }
.mark-anim path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.8s var(--ease-out) forwards; }
.mark-anim path:nth-child(2) { animation-delay: .25s; } .mark-anim path:nth-child(3) { animation-delay: .6s; } .mark-anim path:nth-child(4) { animation-delay: .9s; }
.home-orbit { aspect-ratio: 1; }
.o-seal { fill: rgba(109, 40, 217, 0.06); stroke: url(#og1); stroke-width: 1.5; stroke-dasharray: 900; stroke-dashoffset: 900; animation: draw 2.4s var(--ease-out) .3s forwards; transform-origin: 300px 300px; }
.o-check { fill: none; stroke: var(--ok); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 120; stroke-dashoffset: 120; animation: draw 1s var(--ease-out) 1.6s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 760px) { .home-orbit { opacity: .35; right: -40vw; width: 110vw; } }

.prod-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--s-3); align-items: stretch; }
.prod-card { display: grid; gap: var(--s-3); padding: var(--s-5); overflow: hidden; min-height: 360px; align-content: start; }
.prod-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, rgba(196, 181, 253, 0.44), transparent 40%, transparent 60%, rgba(0, 165, 239, .45)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.prod-card:hover { transform: translateY(-2px); }
.prod-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-2); }
.prod-top .wm { flex: 0 0 auto; }
.prod-top .badge { flex: 0 0 auto; }
@media (max-width: 520px) { .prod-art { opacity: .35; } .prod-top { flex-direction: column; align-items: flex-start; gap: var(--s-2); } .wm-card .wm-logo { height: 38px; } }
.wm-card .wm-logo { height: 44px; }
.prod-desc { color: var(--text-dim); font-size: var(--t-lg); max-width: 46ch; position: relative; z-index: 1; }
.prod-points { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-1); font-size: var(--t-xs); color: var(--text-dim); position: relative; z-index: 1; }
.prod-points li { padding: 6px 12px; border-radius: var(--r-pill); box-shadow: 0 0 0 1px var(--line) inset; }
.prod-cta { color: #fff; font-weight: 600; display: inline-flex; gap: 8px; align-items: center; position: relative; z-index: 1; }
.prod-card:hover .arr { transform: translateX(4px); } .prod-cta .arr { transition: transform var(--d-med) var(--ease-out); }
.prod-art { position: absolute; right: -24px; bottom: -24px; opacity: .9; }
.prod-art .ico { width: 200px; height: 200px; color: rgba(196, 181, 253, 0.44); }
.prod-art .ico * { stroke-width: 1; }
.soon { padding: var(--s-4); border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--line) inset; background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .012) 0 2px, transparent 2px 10px); }
.soon-h { font: 500 var(--t-xs)/1 var(--f-mono); text-transform: uppercase; letter-spacing: .16em; color: var(--text-faint); margin-bottom: var(--s-2); }
.soon-list { list-style: none; padding: 0; margin: var(--s-3) 0 0; display: grid; }
.soon-list li { display: grid; grid-template-columns: 88px 1fr; gap: var(--s-2); padding: var(--s-2) 0; border-top: 1px solid var(--line); font-size: var(--t-sm); align-items: baseline; }
.soon-n { font-family: var(--f-serif); font-size: 1.35rem; color: var(--text-dim); }
.soon-n::before { content: 'Vérité '; font-size: .75em; color: var(--text-faint); }
@media (max-width: 860px) { .prod-grid { grid-template-columns: 1fr; } .soon-list li { grid-template-columns: 1fr; gap: 2px; } }

.cream-band { background: var(--cream); color: var(--ink); border-radius: 32px; margin-inline: var(--s-2); }
.cream-band h2, .cream-band h3 { color: var(--ink); }
.cream-band .eyebrow { color: rgba(20, 16, 42, .6); }
.cream-band .lede, .cream-band p { color: rgba(20, 16, 42, .72); }
.cream-band .ico { color: var(--purple); } .cream-band .ico .accent { stroke: #0077b6; } .cream-band .ico .ok { stroke: #2563eb; }
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.principle { display: grid; gap: var(--s-2); align-content: start; padding-top: var(--s-3); border-top: 1px solid rgba(20, 16, 42, .16); }
.principle h3 { font-size: var(--t-xl); }
@media (max-width: 860px) { .principles { grid-template-columns: 1fr; gap: var(--s-4); } .cream-band { margin-inline: var(--s-1); border-radius: 24px; } }

.end-cta { text-align: center; display: grid; gap: var(--s-3); justify-items: center; padding-block: var(--s-8); }
.end-cta h2 { font-size: var(--t-3xl); }
.section-head.center { margin-inline: auto; text-align: center; justify-items: center; }
.section-head.center .eyebrow::before { display: none; }

/* split / comparação */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-10); align-items: center; }
.split-copy { display: grid; gap: var(--s-3); } .split-copy h2 { font-size: var(--t-3xl); }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.ticks li { padding-left: 32px; position: relative; color: var(--text-dim); }
.ticks li::before { content: ''; position: absolute; left: 0; top: .35em; width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(59, 155, 255, .5) inset; background: radial-gradient(circle, var(--ok) 0 3px, transparent 4px); }
.compare { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); position: relative; }
.cmp-card { border-radius: var(--r-md); overflow: hidden; box-shadow: 0 0 0 1px var(--line-strong), 0 30px 60px -30px rgba(0, 0, 0, .8); background: #fff; position: relative; }
.cmp-card img { width: 100%; height: auto; }
.cmp-bad { transform: translateY(var(--s-5)); }
.cmp-card figcaption { position: absolute; left: 12px; bottom: 12px; display: inline-flex; gap: 8px; align-items: center; padding: 6px 12px; border-radius: var(--r-pill); background: rgba(2, 6, 23, .82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 500 var(--t-xs)/1 var(--f-mono); color: #fff; }
.dot { width: 8px; height: 8px; border-radius: 50%; } .dot.ok { background: var(--ok); } .dot.bad { background: var(--red); }
.cmp-note { position: absolute; top: -28px; right: 0; font-size: var(--t-xs); color: var(--text-faint); }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: var(--s-6); } }

.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.step { display: grid; gap: var(--s-2); align-content: start; }
.step-n { position: absolute; top: var(--s-4); right: var(--s-4); font-size: var(--t-xs); color: var(--text-faint); }
.step h3 { font-size: var(--t-xl); }
.v-ok { color: var(--ok); font-weight: 600; } .v-warn { color: var(--amber); font-weight: 600; } .v-bad { color: var(--red); font-weight: 600; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

.checks-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.chk { padding: var(--s-4) var(--s-3); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; gap: var(--s-2); align-content: start; position: relative; transition: background var(--d-med); }
.chk:hover { background: radial-gradient(circle at 30% 0%, rgba(139, 92, 246, 0.064), transparent 70%); }
.chk h3 { font-size: var(--t-lg); line-height: 1.25; }
.chk p { color: var(--text-dim); font-size: var(--t-sm); }
.chk .badge { justify-self: start; }
.ico-scan .row:nth-of-type(2) { --k: 1; } .ico-scan .row:nth-of-type(3) { --k: 2; } .ico-scan .row:nth-of-type(4) { --k: 3; } .ico-scan .row:nth-of-type(5) { --k: 4; }
@media (max-width: 1000px) { .checks-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .checks-grid { grid-template-columns: 1fr; } }

/* preços */
.pricing { display: grid; grid-template-columns: 1fr 1fr 1.12fr; gap: var(--s-3); align-items: stretch; }
.plan { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-5) var(--s-4); }
.plan .btn { margin-top: auto; }
.plan-name { font: 500 var(--t-sm)/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); }
.plan-price { display: flex; align-items: baseline; gap: 6px; margin-top: var(--s-1); }
.plan-price .num { font: 600 2.75rem/1 var(--f-display); letter-spacing: -.04em; color: #fff; }
.plan-price .per { color: var(--text-dim); }
.plan-list { list-style: none; padding: var(--s-2) 0 var(--s-3); margin: 0; display: grid; gap: 12px; border-top: 1px solid var(--line); font-size: var(--t-sm); color: var(--text-dim); }
.plan-list li { padding-left: 24px; position: relative; }
.plan-list li::before { content: ''; position: absolute; left: 2px; top: .45em; width: 10px; height: 6px; border-left: 1.5px solid var(--ok); border-bottom: 1.5px solid var(--ok); transform: rotate(-45deg); }
.plan-hi { display: flex; position: relative; border-radius: var(--r-lg); padding: 1px; background: linear-gradient(150deg, var(--magenta-soft), var(--purple) 45%, var(--cyan)); box-shadow: 0 30px 80px -30px rgba(139, 92, 246, 0.44); transform: translateY(-8px); }
.plan-hi::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; background: inherit; filter: blur(24px); opacity: .25; z-index: -1; }
.plan-hi-in { flex: 1; border-radius: calc(var(--r-lg) - 1px); background: radial-gradient(120% 80% at 100% 0%, rgba(109, 40, 217, 0.21), transparent 60%), linear-gradient(180deg, #0d0b2b, #070a22); padding: var(--s-5) var(--s-4); display: grid; gap: var(--s-2); align-content: start; }
.plan-hi-in .btn { margin-top: auto; }
.plan-top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-1); }
.plan-badge { color: #fff; background: rgba(139, 92, 246, 0.112); box-shadow: 0 0 0 1px rgba(196, 181, 253, 0.32) inset; }
.plan-eq { color: var(--text-dim); } .plan-eq strong { color: var(--ok); font-weight: 600; }
.price-disc { margin-top: var(--s-6); }
@media (max-width: 960px) { .pricing { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } .plan-hi { transform: none; order: -1; } }

.faq { display: grid; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: var(--s-3) var(--s-5) var(--s-3) 0; font: 500 var(--t-lg)/1.4 var(--f-display); color: #fff; position: relative; letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; position: absolute; right: 4px; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat; transition: transform var(--d-med) var(--ease-out); color: var(--magenta-soft); }
.faq details[open] summary::after { transform: rotate(135deg); }
.faq details p { padding: 0 0 var(--s-3); color: var(--text-dim); max-width: 62ch; }
.cream-band .section-head h2 .serif-i, .cream-band h2 .serif-i { color: var(--purple); }

/* ===================== Design pass (2026-10): editorial + 3D ===================== */
/* home: emblema em camadas 3D que segue o dedo/mouse/giroscópio */
.home-orbit { perspective: 1600px; perspective-origin: 50% 50%; }
.orbit-3d { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 900ms var(--ease-out); }
.orbit-3d .orbit-svg { transform: translateZ(-10px); }
.orbit-3d .mark-anim { transform: translateZ(18px); }
@media (max-width: 760px) {
  .home-hero { align-items: start; padding-top: calc(72px + var(--s-2)); }
  .home-orbit { position: relative; right: auto; top: auto; transform: none; width: min(64vw, 280px); margin: 0 auto calc(-1 * var(--s-2)); opacity: 1; }
  .home-hero { display: flex; flex-direction: column; }
  .home-hero::before { inset: -10% -30% auto auto; width: 120vw; height: 120vw; }
}
/* princípios numerados, em serif itálico */
.principles-num { counter-reset: pr; }
.principles-num .principle { counter-increment: pr; position: relative; }
.principles-num .principle::before { content: counter(pr, decimal-leading-zero); font: italic 400 2.6rem/1 var(--f-serif); color: var(--purple); opacity: .55; margin-bottom: var(--s-1); }

/* /pix/: comprovantes em 3D, o editado sendo "varrido" por um feixe de luz */
.compare { perspective: 1400px; transform-style: preserve-3d; }
.compare .cmp-card { transform: rotateY(calc(var(--ry) * 1 + 8deg)) rotateX(calc(var(--rx) * 1 + 4deg)) translateZ(0); transition: transform 900ms var(--ease-out); }
.compare .cmp-bad { transform: translateY(var(--s-5)) rotateY(calc(var(--ry) - 8deg)) rotateX(calc(var(--rx) + 4deg)) translateZ(30px); }
.scan-beam { position: absolute; left: -4%; right: -4%; height: 2px; top: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(196, 181, 253, .95) 20%, #fff 50%, rgba(143, 180, 246, .95) 80%, transparent);
  box-shadow: 0 0 18px 4px rgba(168, 85, 247, .45), 0 0 60px 10px rgba(99, 102, 241, .18); animation: scan 3.6s var(--ease-in-out) infinite; }
.scan-beam::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 70px; background: linear-gradient(transparent, rgba(168, 85, 247, .12)); }
@keyframes scan { 0% { top: 0; opacity: 0; } 8% { opacity: 1; } 70% { top: 100%; opacity: 1; } 78%, 100% { top: 100%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .scan-beam { display: none; } }

/* /pix/: três passos como linha do tempo editorial (desenhos de traço, numeral serif) */
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); position: relative; counter-reset: none; }
.flow::before { content: ''; position: absolute; left: 0; right: 0; top: 60px; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong) 12%, var(--line-strong) 88%, transparent); }
.flow-step { position: relative; display: grid; gap: var(--s-1); align-content: start; }
.flow-art { width: 160px; height: 120px; fill: none; stroke: rgba(233, 230, 242, .55); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; background: var(--navy-950); padding-right: var(--s-2); position: relative; }
.flow-art .soft { fill: rgba(168, 85, 247, .08); stroke: rgba(196, 181, 253, .5); }
.flow-art .accent { stroke: #a5b4fc; stroke-width: 2; }
.flow-art .beam { stroke: #c4b5fd; stroke-width: 1.5; stroke-dasharray: 3 4; animation: beamy 3s var(--ease-in-out) infinite alternate; }
@keyframes beamy { from { transform: translateY(-14px); } to { transform: translateY(26px); } }
@media (prefers-reduced-motion: reduce) { .flow-art .beam { animation: none; } }
.flow-n { font: italic 400 3.4rem/1 var(--f-serif); color: var(--magenta-soft); margin-top: var(--s-2); }
.flow-step h3 { font-size: var(--t-xl); }
.flow-step p { color: var(--text-dim); max-width: 34ch; }
@media (max-width: 860px) {
  .flow { grid-template-columns: 1fr; gap: var(--s-6); padding-left: var(--s-4); }
  .flow::before { left: 7px; right: auto; top: 8px; bottom: 8px; width: 1px; height: auto; background: linear-gradient(transparent, var(--line-strong) 8%, var(--line-strong) 92%, transparent); }
  .flow-step::before { content: ''; position: absolute; left: calc(-1 * var(--s-4) + 3px); top: 54px; width: 9px; height: 9px; border-radius: 50%; background: var(--navy-950); box-shadow: 0 0 0 1.5px #c4b5fd; }
  .flow-n { margin-top: 0; font-size: 2.8rem; }
}

/* /pix/: checagens como índice numerado em duas colunas (sem grade de cards) */
.checks-list { counter-reset: ck; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s-8); }
.checks-list .chk { counter-increment: ck; display: grid; grid-template-columns: 56px 1fr; grid-template-areas: 'n t' 'n p' 'n b'; column-gap: var(--s-2); row-gap: 6px; padding: var(--s-3) 0; border-top: 1px solid var(--line); border-right: 0; background: none; box-shadow: none; border-radius: 0; }
.checks-list .chk::before { content: counter(ck, decimal-leading-zero); grid-area: n; font: italic 400 2rem/1 var(--f-serif); color: var(--text-faint); transition: color var(--d-med); }
.checks-list .chk:hover::before { color: var(--magenta-soft); }
.checks-list .chk .ico { display: none; }
.checks-list .chk h3 { grid-area: t; font-size: var(--t-lg); }
.checks-list .chk p { grid-area: p; color: var(--text-dim); font-size: var(--t-sm); max-width: 48ch; }
.checks-list .chk .badge { grid-area: b; justify-self: start; }
.checks-list .chk:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
@media (max-width: 760px) { .checks-list { grid-template-columns: 1fr; } .checks-list .chk { grid-template-columns: 44px 1fr; } .checks-list .chk:nth-last-child(2) { border-bottom: 0; } }

/* /pix/: faixa creme com escudo em camadas 3D */
.band-head { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--s-5); align-items: center; margin-bottom: var(--s-6); }
.band-head .section-head { margin-bottom: 0; }
.shield3d { justify-self: center; width: min(240px, 52vw); aspect-ratio: 120 / 140; perspective: 900px; }
.shield3d-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(calc(var(--rx) + 8deg)) rotateY(calc(var(--ry) - 18deg)); transition: transform 900ms var(--ease-out); animation: shieldFloat 7s var(--ease-in-out) infinite; }
@keyframes shieldFloat { 50% { translate: 0 -8px; } }
.sl { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sl path { fill: none; stroke-linejoin: round; }
.sl1 { transform: translateZ(-36px); } .sl1 path { fill: rgba(20, 16, 42, .06); stroke: rgba(20, 16, 42, .14); stroke-width: 1; }
.sl2 { transform: translateZ(-12px); } .sl2 path { fill: rgba(152, 16, 250, .06); stroke: rgba(152, 16, 250, .3); stroke-width: 1.2; }
.sl3 { transform: translateZ(12px); } .sl3 path { fill: rgba(255, 255, 255, .55); stroke: url(#none); stroke: rgba(91, 33, 182, .65); stroke-width: 1.6; }
.sl4 { transform: translateZ(40px); } .sl4 path { stroke: #4c1d95; stroke-width: 1.4; fill: rgba(237, 233, 254, .5); } .sl4 .ck { stroke: #2563eb; stroke-width: 4; stroke-linecap: round; fill: none; }
@media (prefers-reduced-motion: reduce) { .shield3d-in { animation: none; } }
@media (max-width: 860px) { .band-head { grid-template-columns: 1fr; } .shield3d { order: -1; justify-self: start; width: 120px; } }

/* ===================== Família Vérité (2026-10): Link · Perfil · Boleto · Mensagem ===================== */
/* herói das ferramentas: texto + objeto de vidro em camadas 3D (segue ponteiro/giroscópio e volta ao centro) */
.tool-hero { position: relative; overflow: hidden; padding-block: calc(72px + var(--s-12)) var(--s-12); }
.tool-hero::before { content: ''; position: absolute; inset: -30% -20% auto auto; width: 80vw; height: 80vw; max-width: 1000px; max-height: 1000px; background: radial-gradient(closest-side, rgba(109, 40, 217, .2), rgba(59, 130, 246, .06) 55%, transparent 72%); pointer-events: none; }
.tool-hero::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 60% 60% at 70% 40%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse 60% 60% at 70% 40%, #000 10%, transparent 70%); opacity: .5; pointer-events: none; }
.tool-hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--s-8); align-items: center; }
.tool-copy { display: grid; gap: var(--s-3); }
.tool-copy h1 { font-size: clamp(2.4rem, 1.3rem + 4vw, 4.6rem); font-weight: 600; letter-spacing: -.045em; line-height: 1; }
.tool-copy h1 .serif-i { font-size: 1.1em; letter-spacing: -.02em; }
.tool-note { font-size: var(--t-xs); color: var(--text-faint); letter-spacing: .04em; }
.glass3d { position: relative; perspective: 1400px; aspect-ratio: 1 / .9; width: min(100%, 520px); justify-self: center; }
.glass3d-in { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(calc(var(--rx, 0deg) + 6deg)) rotateY(calc(var(--ry, 0deg) - 14deg)); transition: transform 900ms var(--ease-out); animation: gFloat 8s var(--ease-in-out) infinite; }
@keyframes gFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.g-layer { position: absolute; border-radius: 28px; }
.g-back { inset: 10% 4% 6% 14%; transform: translateZ(-60px); background: radial-gradient(80% 80% at 30% 20%, rgba(168, 85, 247, .35), transparent 70%), radial-gradient(60% 60% at 90% 90%, rgba(0, 165, 239, .25), transparent 70%); filter: blur(2px); box-shadow: 0 0 0 1px rgba(196, 181, 253, .14) inset; }
.g-mid { inset: 6% 10% 12% 6%; transform: translateZ(-20px); background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .01)); box-shadow: 0 0 0 1px rgba(244, 239, 227, .1) inset; }
.g-front { inset: 14% 8% 14% 10%; transform: translateZ(40px); padding: var(--s-3); display: grid; gap: 14px; align-content: start;
  background: linear-gradient(170deg, rgba(23, 20, 58, .86), rgba(8, 10, 34, .9)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 0 0 1px rgba(214, 168, 246, .28) inset, 0 1px 0 0 rgba(255, 255, 255, .12) inset, 0 50px 90px -40px rgba(0, 0, 0, .9), 0 30px 80px -40px rgba(139, 92, 246, .55); overflow: hidden; }
.g-front::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .07) 45%, transparent 60%); background-size: 250% 100%; animation: sheen 7s var(--ease-in-out) infinite; pointer-events: none; }
@keyframes sheen { 0%, 60% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
.g-chip { position: absolute; transform: translateZ(90px); padding: 10px 14px; border-radius: 14px; font: 600 var(--t-xs)/1.2 var(--f-text); display: inline-flex; align-items: center; gap: 8px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .8); white-space: nowrap; }
.g-chip::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(255, 255, 255, .06); }
.g-chip.bad { color: #ffb3c1; background: rgba(60, 12, 30, .85); box-shadow: 0 0 0 1px rgba(255, 77, 109, .45) inset, 0 20px 40px -20px rgba(0, 0, 0, .8); }
.g-chip.warn { color: #ffe3ad; background: rgba(50, 34, 8, .85); box-shadow: 0 0 0 1px rgba(245, 181, 68, .4) inset, 0 20px 40px -20px rgba(0, 0, 0, .8); }
.g-chip.ok { color: #d3e7ff; background: rgba(10, 26, 56, .85); box-shadow: 0 0 0 1px rgba(59, 155, 255, .45) inset, 0 20px 40px -20px rgba(0, 0, 0, .8); }
.g-chip.c1 { right: 0; top: 6%; } .g-chip.c2 { left: 0; bottom: 6%; transform: translateZ(70px); }
.g-beam { position: absolute; left: -2%; right: -2%; height: 2px; top: 0; z-index: 2; background: linear-gradient(90deg, transparent, rgba(196, 181, 253, .9) 20%, #fff 50%, rgba(143, 180, 246, .9) 80%, transparent); box-shadow: 0 0 16px 3px rgba(168, 85, 247, .45); animation: scan 4.2s var(--ease-in-out) infinite; pointer-events: none; }
.g-label { font: 500 10px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); }
.g-ex { position: absolute; right: 12%; bottom: 2%; font: 500 10px/1 var(--f-mono); letter-spacing: .12em; color: var(--text-faint); transform: translateZ(10px); }
/* miniaturas de interface dentro do vidro (dados fictícios) */
.m-url { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border-radius: 12px; background: rgba(255, 255, 255, .05); box-shadow: 0 0 0 1px var(--line-strong) inset; font: 500 var(--t-sm)/1 var(--f-mono); color: #fff; overflow: hidden; white-space: nowrap; }
.m-url i { width: 10px; height: 12px; border: 1.5px solid var(--text-faint); border-radius: 3px; flex: none; }
.m-url .hl { color: #ff8fa6; text-decoration: underline wavy rgba(255, 77, 109, .7) 1px; text-underline-offset: 4px; }
.m-rows { display: grid; gap: 10px; }
.m-row { display: grid; grid-template-columns: 10px 1fr; gap: 10px; align-items: baseline; font-size: var(--t-sm); color: var(--text-dim); }
.m-row::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--d, var(--text-faint)); transform: translateY(-1px); }
.m-row.bad { --d: var(--red); } .m-row.warn { --d: var(--amber); } .m-row.ok { --d: var(--ok); }
.m-row b { color: #fff; font-weight: 600; }
.m-hops { display: flex; align-items: center; gap: 8px; font: 500 11px/1 var(--f-mono); color: var(--text-faint); flex-wrap: wrap; }
.m-hops span { padding: 6px 8px; border-radius: 8px; box-shadow: 0 0 0 1px var(--line) inset; }
.m-hops em { font-style: normal; color: var(--magenta-soft); }
.m-bars { height: 64px; border-radius: 10px; background: #fff repeating-linear-gradient(90deg, #0a0a0a 0 2px, transparent 2px 4px, #0a0a0a 4px 5px, transparent 5px 8px, #0a0a0a 8px 11px, transparent 11px 13px, #0a0a0a 13px 14px, transparent 14px 17px); box-shadow: 0 0 0 6px #fff; margin: 6px 6px 10px; }
.m-line { font: 500 12px/1.5 var(--f-mono); color: #fff; letter-spacing: .02em; word-break: break-all; }
.m-line .hl { color: #ff8fa6; background: rgba(255, 77, 109, .14); border-radius: 4px; padding: 0 2px; }
.m-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: var(--t-sm); } .m-kv dt { color: var(--text-faint); } .m-kv dd { margin: 0; color: #fff; text-align: right; }
.m-bubble { padding: 14px 16px; border-radius: 18px 18px 18px 6px; background: rgba(255, 255, 255, .06); box-shadow: 0 0 0 1px var(--line) inset; font-size: var(--t-sm); color: var(--text); line-height: 1.5; }
.m-bubble mark { background: rgba(245, 181, 68, .18); color: #ffe3ad; border-radius: 4px; padding: 0 3px; } .m-bubble mark.b { background: rgba(255, 77, 109, .18); color: #ffd0da; }
.m-meta { font: 500 11px/1 var(--f-mono); color: var(--text-faint); }
.m-profile { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: center; }
.m-avatar { width: 52px; height: 52px; border-radius: 50%; background: conic-gradient(from 200deg, #f472b6, #a855f7, #3b82f6, #f472b6); padding: 2px; } .m-avatar span { display: block; width: 100%; height: 100%; border-radius: 50%; background: #1a1640; }
.m-handle { font: 600 var(--t-md)/1.2 var(--f-display); color: #fff; } .m-handle small { display: block; font: 500 var(--t-xs)/1.4 var(--f-text); color: var(--text-faint); }
@media (max-width: 960px) { .tool-hero-in { grid-template-columns: 1fr; gap: var(--s-6); } .glass3d { width: min(100%, 440px); } }
@media (max-width: 520px) { .tool-hero { padding-top: calc(72px + var(--s-4)); } .g-front { inset: 12% 4% 12% 6%; padding: var(--s-2); gap: 10px; } .g-chip { font-size: 11px; padding: 8px 10px; } .m-url { font-size: 12px; height: 40px; } .m-row { font-size: 12.5px; } }
@media (prefers-reduced-motion: reduce) { .glass3d-in, .g-front::after, .g-beam { animation: none; } }

/* preços das ferramentas: grátis + Completo (em breve) */
.pricing-2 { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--s-3); max-width: 900px; margin-inline: auto; align-items: stretch; }
.plan-soon .plan-price .num { font-size: 2rem; }
@media (max-width: 860px) { .pricing-2 { grid-template-columns: 1fr; max-width: 480px; } }
/* faixa "da mesma família" */
.fam-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); }
.fam-chip { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; padding: var(--s-2); border-radius: var(--r-md); box-shadow: 0 0 0 1px var(--line) inset; background: rgba(255, 255, 255, .015); height: 100%; transition: box-shadow var(--d-fast), transform var(--d-med) var(--ease-out); }
.fam-chip:hover { box-shadow: 0 0 0 1px rgba(196, 181, 253, .35) inset; transform: translateY(-2px); }
.fam-chip .ico { width: 40px; height: 40px; } .fam-chip strong { display: block; color: #fff; font: 600 var(--t-sm)/1.3 var(--f-display); margin-bottom: 4px; }
@media (max-width: 960px) { .fam-strip { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .fam-strip { grid-template-columns: 1fr; } }

/* home: família de 5 */
.family { display: grid; grid-template-columns: 1.25fr 1fr 1fr; grid-auto-rows: minmax(220px, auto); gap: var(--s-3); }
.family .prod-card { grid-row: span 2; }
.fam-card { position: relative; display: grid; gap: var(--s-2); align-content: start; padding: var(--s-4); overflow: hidden; border-radius: var(--r-lg); }
.fam-card .ico { width: 44px; height: 44px; }
.fam-card h3 { font: 600 var(--t-xl)/1.15 var(--f-display); color: #fff; letter-spacing: -.02em; } .fam-card h3 span { font-family: var(--f-serif); font-style: italic; font-weight: 400; color: var(--magenta-soft); }
.fam-card p { color: var(--text-dim); font-size: var(--t-sm); max-width: 38ch; }
.fam-card .prod-cta { margin-top: auto; font-size: var(--t-sm); }
.fam-card .badge { position: absolute; top: var(--s-3); right: var(--s-3); }
.fam-card::after { content: ''; position: absolute; inset: auto -30% -60% auto; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(139, 92, 246, .16), transparent); pointer-events: none; transition: transform var(--d-slow) var(--ease-out); }
.fam-card:hover::after { transform: translate(-10%, -10%) scale(1.15); }
@media (max-width: 1000px) { .family { grid-template-columns: 1fr 1fr; } .family .prod-card { grid-column: 1 / -1; grid-row: auto; } }
@media (max-width: 600px) { .family { grid-template-columns: 1fr; } }
/* home: plano Completo */
.completo { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s-6); align-items: center; padding: var(--s-6); border-radius: 32px; overflow: hidden;
  background: radial-gradient(90% 120% at 100% 0%, rgba(109, 40, 217, .26), transparent 60%), radial-gradient(70% 90% at 0% 100%, rgba(0, 165, 239, .12), transparent 60%), linear-gradient(180deg, #0d0b2b, #070a22);
  box-shadow: 0 0 0 1px rgba(214, 168, 246, .25) inset, 0 40px 100px -50px rgba(139, 92, 246, .6); }
.completo h2 { font-size: var(--t-3xl); } .completo .lede { max-width: 46ch; }
.completo-copy { display: grid; gap: var(--s-3); justify-items: start; }
.completo-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .completo-price .num { font: 600 2rem/1 var(--f-display); color: #fff; letter-spacing: -.03em; }
.stack3d { position: relative; perspective: 1200px; aspect-ratio: 1; width: min(100%, 380px); justify-self: center; }
.stack3d-in { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(calc(var(--rx, 0deg) + 52deg)) rotateZ(-32deg) rotateY(var(--ry, 0deg)); transition: transform 900ms var(--ease-out); }
.stk { position: absolute; inset: 18%; border-radius: 26px; display: grid; place-items: center; background: linear-gradient(160deg, rgba(40, 30, 90, .9), rgba(12, 12, 40, .92)); box-shadow: 0 0 0 1px rgba(214, 168, 246, .3) inset, 0 30px 60px -30px rgba(0, 0, 0, .9); transform: translateZ(calc(var(--i) * 26px)); }
.stk .ico { width: 56px; height: 56px; transform: rotateZ(32deg) rotateX(-52deg); opacity: .5; } .stk:last-child .ico { opacity: 1; }
.stk span { position: absolute; left: 16px; bottom: 12px; font: 500 10px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); }
.stack3d-in { animation: stkFloat 9s var(--ease-in-out) infinite; } @keyframes stkFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@media (max-width: 860px) { .completo { grid-template-columns: 1fr; padding: var(--s-4) var(--s-3); gap: var(--s-4); } .stack3d { width: min(70vw, 280px); order: -1; } }
@media (prefers-reduced-motion: reduce) { .stack3d-in { animation: none; } }
.stk:nth-child(1) { --i: 0; } .stk:nth-child(2) { --i: 1; } .stk:nth-child(3) { --i: 2; } .stk:nth-child(4) { --i: 3; } .stk:nth-child(5) { --i: 4; }
.flow-plain .flow-n { margin-top: 0; }
.flow-plain::before { top: 28px; }
@media (max-width: 860px) { .flow-plain .flow-step::before { top: 22px; } }
.tool-page .split .ticks { align-self: center; }

/* home hero (versão do preview 61781f29): sem grade; aurora, emblema luminoso, anéis inclinados girando, brilho no título */
.home-hero::after { background-image: none; -webkit-mask-image: none; mask-image: none; opacity: 1; inset: -10%;
  background: radial-gradient(40% 35% at 72% 38%, rgba(168, 85, 247, .26), transparent 70%), radial-gradient(35% 30% at 20% 75%, rgba(59, 130, 246, .12), transparent 70%), radial-gradient(30% 25% at 85% 80%, rgba(244, 114, 182, .10), transparent 70%); filter: blur(20px); }
.orbit-svg .o-halo { fill: url(#ogHalo); stroke: none; }
.orbit-svg .o1 { opacity: .5; } .orbit-svg .o2 { opacity: .55; stroke-width: 1.2; } .orbit-svg .o3 { opacity: .3; }
.orbit-svg ellipse, .orbit-svg .o-tilt { fill: none !important; stroke: url(#og1); stroke-width: 1.2; opacity: .45; transform-box: view-box; transform-origin: 50% 50%; transform: rotate(-24deg); }
.orbit-svg .o-tilt2 { transform: rotate(32deg); opacity: .3; stroke-dasharray: 3 9; }
.orbit-svg .o-dot circle, .orbit-svg .o-dot2 circle { fill: #f5e9ff; stroke: none; }
.home-title .grad { background: linear-gradient(100deg, #f0abfc 0%, #c084fc 30%, #fff 45%, #a78bfa 60%, #60a5fa 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (prefers-reduced-motion: no-preference) {
  .home-title .grad { animation: hShimmer 7s ease-in-out infinite; }
  .orbit-svg .o-halo { animation: hPulse 6s ease-in-out infinite; }
  .orbit-svg .o-tilt { animation: hSpin 40s linear infinite; } .orbit-svg .o-tilt2 { animation: hSpin2 60s linear infinite reverse; }
  .home-hero::after { animation: hAurora 18s ease-in-out infinite alternate; }
  .home-orbit { animation: hIn 1s cubic-bezier(.2, .8, .2, 1) both; }
}
@keyframes hShimmer { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
@keyframes hPulse { 50% { opacity: .65; } }
@keyframes hSpin { from { transform: rotate(-24deg); } to { transform: rotate(336deg); } }
@keyframes hSpin2 { from { transform: rotate(32deg); } to { transform: rotate(392deg); } }
@keyframes hAurora { to { transform: translate3d(-4%, 3%, 0) scale(1.08); } }
@keyframes hIn { from { opacity: 0; } }