:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f8f9fb;
  background: #02040a;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --navy: #07162c;
  --navy-soft: #0b2343;
  --white: #f8f9fb;
  --muted: #96a6bb;
  --gold-1: #fff0ae;
  --gold-2: #ddb050;
  --gold-3: #8b5514;
  --mx: 68%;
  --my: 34%;
}

* { box-sizing: border-box; }
html { background: #02040a; scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; overflow-x: hidden; }
button, a { font: inherit; }
button { color: inherit; }

.page-shell {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(17, 53, 96, .42), transparent 29%),
    radial-gradient(circle at 85% 7%, rgba(216, 174, 77, .095), transparent 24%),
    linear-gradient(116deg, #02040a 0%, #030916 47%, #07162d 100%);
}

.page-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: .16;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E");
}

.atmosphere { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.cursor-aura { position: fixed; z-index: 1; width: 440px; aspect-ratio: 1; left: 0; top: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(40, 102, 172, .13), rgba(14, 48, 92, .055) 36%, transparent 72%); filter: blur(5px); will-change: transform; }
.grid-glow { position: absolute; inset: 0; z-index: -3; opacity: .18; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 76px 76px; mask-image: linear-gradient(90deg, rgba(0,0,0,.85), transparent 74%); }
.ambient { position: absolute; z-index: -4; pointer-events: none; border-radius: 50%; filter: blur(100px); }
.ambient-a { width: 34rem; height: 34rem; left: -17rem; top: 18%; background: rgba(10, 48, 99, .4); }
.ambient-b { width: 29rem; height: 29rem; right: -13rem; bottom: -13rem; background: rgba(194, 139, 38, .14); }

.topbar {
  width: min(92vw, 1440px);
  height: 112px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 30;
}

.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(222,177,79,.5), rgba(255,255,255,.08) 24%, transparent 88%); }
.brand { display: inline-flex; align-items: center; color: inherit; text-decoration: none; perspective: 700px; }
.brand-mark { width: 98px; height: 68px; object-fit: contain; filter: drop-shadow(0 0 25px rgba(222,177,79,.16)); transition: transform .55s cubic-bezier(.2,.8,.2,1), filter .55s ease; }
.brand:hover .brand-mark { transform: rotateY(-12deg) rotateX(5deg) translateY(-2px) scale(1.04); filter: drop-shadow(0 0 34px rgba(222,177,79,.32)); }
.product-status { display: flex; align-items: center; gap: 11px; color: #77879e; font-size: 8px; font-weight: 760; letter-spacing: .19em; }
.product-status i { width: 1px; height: 12px; background: rgba(255,255,255,.14); }
.status-dot { width: 6px; aspect-ratio: 1; border-radius: 50%; background: var(--gold-2); box-shadow: 0 0 14px rgba(222,177,79,.75); animation: statusPulse 2.4s ease-in-out infinite; }

.hero {
  width: min(92vw, 1440px);
  min-height: calc(100svh - 142px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(430px, .94fr);
  align-items: center;
  gap: clamp(30px, 5vw, 88px);
  position: relative;
  z-index: 10;
  padding: 28px 0 64px;
}

.hero-copy { position: relative; z-index: 8; max-width: 770px; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; color: #afbac9; font-size: 9px; font-weight: 780; letter-spacing: .22em; }
.eyebrow span { width: 42px; height: 1px; background: linear-gradient(90deg, var(--gold-1), var(--gold-3)); box-shadow: 0 0 12px rgba(222,177,79,.25); }
h1 { margin: 0; max-width: 790px; font-size: clamp(3.4rem, 5.35vw, 6.35rem); line-height: .93; letter-spacing: -.062em; font-weight: 730; }
h1 em { display: block; font-family: Georgia, "Times New Roman", serif; font-weight: 500; font-style: italic; letter-spacing: -.055em; background: linear-gradient(100deg, var(--gold-1), var(--gold-2) 54%, var(--gold-3)); -webkit-background-clip: text; color: transparent; filter: drop-shadow(0 5px 22px rgba(222,177,79,.08)); }
.lead { max-width: 660px; margin: 23px 0 0; color: #a8b4c5; font-size: clamp(.98rem, 1.25vw, 1.13rem); line-height: 1.62; }

.method-console {
  --active-step: 0;
  position: relative;
  max-width: 720px;
  margin-top: 27px;
  padding: 8px 0 0;
  isolation: isolate;
  perspective: 1100px;
}
.method-console::before { content: ""; position: absolute; z-index: -2; inset: 0 -18px -10px; border: 1px solid rgba(255,255,255,.055); background: linear-gradient(110deg, rgba(255,255,255,.026), transparent 46%, rgba(13,38,72,.11)); clip-path: polygon(0 0, 96% 0, 100% 19%, 100% 100%, 4% 100%, 0 82%); opacity: .88; }
.method-canvas { position: absolute; z-index: 0; inset: 0; pointer-events: none; }
.method-beam { --beam-x: 14%; position: absolute; z-index: 1; top: 5px; left: var(--beam-x); width: 1px; height: 104px; pointer-events: none; background: linear-gradient(to bottom, transparent, rgba(255,237,176,.78) 38%, transparent); box-shadow: 0 0 18px rgba(222,177,79,.42); transition: left .7s cubic-bezier(.2,.8,.2,1); animation: beamBreath 2.6s ease-in-out infinite; }
.method-nodes { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.method-node {
  --rx: 0deg;
  --ry: 0deg;
  --px: 50%;
  --py: 50%;
  min-height: 88px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 20px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 14px 13px;
  border: 1px solid rgba(255,255,255,.085);
  background: radial-gradient(circle at var(--px) var(--py), rgba(25,69,120,.17), transparent 55%), rgba(4, 12, 25, .44);
  color: #67768b;
  cursor: pointer;
  text-align: left;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  backdrop-filter: blur(12px);
  transition: transform .18s ease, border-color .35s ease, color .35s ease, background .35s ease, box-shadow .35s ease;
}
.method-node::before { content: ""; position: absolute; inset: -1px; opacity: 0; background: linear-gradient(110deg, transparent 15%, rgba(255,238,180,.15), transparent 52%); transform: translateX(-65%); transition: opacity .3s ease, transform .7s ease; }
.method-node::after { content: ""; position: absolute; inset: auto 12px 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-2), transparent); transform: scaleX(0); transition: transform .55s cubic-bezier(.2,.8,.2,1); }
.method-node:hover { color: #dce4ef; border-color: rgba(103,145,194,.28); box-shadow: 0 14px 36px rgba(0,0,0,.22); }
.method-node:hover::before { opacity: 1; transform: translateX(65%); }
.method-node.is-active { color: var(--white); border-color: rgba(222,177,79,.3); background: radial-gradient(circle at var(--px) var(--py), rgba(222,177,79,.14), transparent 48%), linear-gradient(130deg, rgba(10,31,59,.84), rgba(3,10,21,.66)); box-shadow: 0 18px 48px rgba(0,0,0,.3), inset 0 0 30px rgba(222,177,79,.035); }
.method-node.is-active::after { transform: scaleX(1); }
.node-number { color: #3f4b5e; font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.method-node.is-active .node-number { color: var(--gold-2); }
.node-core { width: 16px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); }
.node-core i { width: 4px; aspect-ratio: 1; border-radius: 50%; background: #58667a; transition: .35s ease; }
.method-node.is-active .node-core { border-color: rgba(222,177,79,.48); box-shadow: 0 0 0 5px rgba(222,177,79,.035), 0 0 22px rgba(222,177,79,.16); }
.method-node.is-active .node-core i { background: var(--gold-1); box-shadow: 0 0 12px rgba(255,238,178,.8); animation: corePulse 1.9s ease-in-out infinite; }
.method-node strong { font-size: 9px; letter-spacing: .17em; }
.node-arrow { font-size: 12px; opacity: .25; transition: transform .4s ease, opacity .4s ease; }
.method-node:hover .node-arrow, .method-node.is-active .node-arrow { transform: translate(2px,-2px) rotate(8deg); opacity: .82; color: var(--gold-2); }
.interaction-ripple { position: absolute; z-index: 9; width: 12px; aspect-ratio: 1; border-radius: 50%; pointer-events: none; border: 1px solid rgba(255,241,185,.72); transform: translate(-50%,-50%); animation: ripple .7s ease-out forwards; }

.method-insight { position: relative; z-index: 3; min-height: 82px; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 9px; padding: 12px 16px 12px 12px; border-left: 1px solid rgba(222,177,79,.38); background: linear-gradient(90deg, rgba(11,31,58,.52), rgba(5,14,29,.14)); }
.insight-index { font-family: Georgia, serif; color: rgba(222,177,79,.72); font-size: 1.7rem; font-style: italic; text-align: center; }
.method-insight strong { display: block; font-size: 13px; letter-spacing: -.005em; }
.method-insight p { max-width: 580px; margin: 4px 0 0; color: #79889c; font-size: 11px; line-height: 1.5; }
.method-insight.is-changing > * { animation: insightIn .58s cubic-bezier(.2,.8,.2,1); }

.offer-row { display: flex; align-items: center; gap: 19px; margin-top: 23px; }
.cta {
  --magnetic-x: 0px;
  --magnetic-y: 0px;
  --cta-x: 50%;
  --cta-y: 50%;
  min-width: min(100%, 510px);
  min-height: 68px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto 42px;
  align-items: center;
  gap: 15px;
  padding: 10px 12px 10px 22px;
  border: 1px solid rgba(255,241,180,.55);
  border-radius: 4px;
  background: linear-gradient(100deg, #fff1b5 0%, #d7a944 52%, #885313 100%);
  color: #090805;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 18px 50px rgba(151, 96, 17, .19), inset 0 1px rgba(255,255,255,.62);
  transform: translate3d(var(--magnetic-x), var(--magnetic-y), 0);
  transition: transform .22s ease, box-shadow .3s ease, filter .3s ease;
}
.cta-bg { position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle 130px at var(--cta-x) var(--cta-y), rgba(255,255,255,.58), transparent 62%); opacity: .35; transition: opacity .3s ease; }
.cta::before { content: ""; position: absolute; z-index: 1; top: -65%; left: -30%; width: 19%; height: 230%; background: rgba(255,255,255,.55); filter: blur(11px); transform: rotate(19deg); animation: ctaSweep 4.2s ease-in-out infinite; }
.cta::after { content: ""; position: absolute; inset: 3px; border: 1px solid rgba(255,255,255,.27); pointer-events: none; }
.cta:hover { box-shadow: 0 27px 65px rgba(190, 130, 32, .31), 0 0 0 6px rgba(222,177,79,.045); filter: saturate(1.08) brightness(1.025); }
.cta:hover .cta-bg { opacity: .72; }
.cta-copy { display: grid; gap: 3px; }
.cta-copy small { font-size: 8px; letter-spacing: .21em; opacity: .65; }
.cta-copy strong { font-size: clamp(.91rem, 1.18vw, 1.03rem); letter-spacing: .052em; }
.cta-price { padding-left: 15px; border-left: 1px solid rgba(0,0,0,.23); font-size: .94rem; font-weight: 880; white-space: nowrap; }
.cta-arrow { width: 38px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid rgba(0,0,0,.25); border-radius: 50%; }
.cta-arrow i { font-style: normal; font-size: 18px; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.cta:hover .cta-arrow i { transform: rotate(45deg) scale(1.08); }
.trust-copy { display: grid; gap: 7px; min-width: 145px; color: #718097; font-size: 8px; letter-spacing: .06em; }
.trust-copy i { color: var(--gold-2); font-style: normal; margin-right: 6px; }

.hero-visual { position: relative; height: min(75vh, 735px); min-height: 575px; align-self: end; isolation: isolate; overflow: visible; }
.visual-halo { position: absolute; z-index: 0; right: 3%; top: 2%; width: 82%; aspect-ratio: .88; border-radius: 50%; background: radial-gradient(ellipse, rgba(29,78,130,.25), rgba(9,28,55,.09) 44%, transparent 72%); filter: blur(7px); will-change: transform; }
.visual-halo::before, .visual-halo::after { content: ""; position: absolute; inset: 7%; border-radius: 50%; border: 1px solid rgba(255,255,255,.06); animation: haloSpin 22s linear infinite; }
.visual-halo::after { inset: 21%; border-style: dashed; border-color: rgba(222,177,79,.14); animation-direction: reverse; animation-duration: 16s; }
.portrait-shell { position: absolute; z-index: 4; inset: -15% -13% -4% -10%; will-change: transform; transition: transform .1s linear; overflow: visible; }
.portrait-shell::after {
  content: "";
  position: absolute;
  z-index: 5;
  inset: -2%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 43% 58% at 62% 43%, transparent 35%, rgba(3, 10, 23, .08) 48%, rgba(3, 10, 23, .48) 68%, rgba(3, 10, 23, .94) 88%, #030916 100%),
    radial-gradient(ellipse 34% 20% at 61% 84%, rgba(11, 35, 67, .28), transparent 72%);
  filter: blur(4px);
}
.portrait { width: 100%; height: 100%; object-fit: contain; object-position: 65% 46%; transform: translateY(-2.5%) scale(1.045); transform-origin: 61% 44%; filter: contrast(1.08) saturate(.73) brightness(.89) drop-shadow(0 36px 60px rgba(0,0,0,.38)); -webkit-mask-image: radial-gradient(ellipse 43% 59% at 62% 43%, #000 34%, rgba(0,0,0,.98) 48%, rgba(0,0,0,.74) 61%, rgba(0,0,0,.28) 72%, transparent 84%); mask-image: radial-gradient(ellipse 43% 59% at 62% 43%, #000 34%, rgba(0,0,0,.98) 48%, rgba(0,0,0,.74) 61%, rgba(0,0,0,.28) 72%, transparent 84%); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.portrait-light { position: absolute; z-index: 6; right: -3%; top: 2%; width: 76%; height: 82%; pointer-events: none; background: radial-gradient(ellipse at 56% 29%, rgba(255,255,255,.095), transparent 31%), linear-gradient(100deg, rgba(3,9,20,.92) 0%, transparent 27%, transparent 82%, rgba(7,22,44,.82) 100%); mix-blend-mode: screen; opacity: .54; -webkit-mask-image: radial-gradient(ellipse, #000 32%, transparent 73%); mask-image: radial-gradient(ellipse, #000 32%, transparent 73%); }
.smoke { position: absolute; z-index: 6; pointer-events: none; filter: blur(36px); }
.smoke-one { width: 79%; height: 25%; right: -4%; bottom: 1%; opacity: .94; background: radial-gradient(ellipse, rgba(7,24,48,.99), rgba(5,16,33,.58) 49%, rgba(10,34,65,.22) 65%, transparent 80%); animation: smoke 8s ease-in-out infinite; }
.smoke-two { width: 42%; height: 20%; left: 5%; bottom: 18%; opacity: .62; background: radial-gradient(ellipse, rgba(193,207,220,.15), rgba(25,64,105,.08) 48%, transparent 74%); animation: smoke 11s ease-in-out infinite reverse; }
.smoke-three { width: 25%; height: 36%; right: -1%; top: 30%; opacity: .5; background: radial-gradient(ellipse, rgba(29,70,113,.27), transparent 68%); animation: smokeVertical 9s ease-in-out infinite; }
.floating-proof { position: absolute; z-index: 8; display: flex; align-items: center; gap: 8px; color: rgba(212,223,237,.47); font-size: 8px; letter-spacing: .16em; }
.floating-proof span { color: var(--gold-2); font-family: Georgia, serif; font-size: 1.05rem; font-style: italic; }
.proof-one { left: 5%; top: 25%; animation: floatProof 5.8s ease-in-out infinite; }
.proof-two { right: 0; top: 58%; animation: floatProof 7.2s ease-in-out infinite reverse; }
.signature-line { position: absolute; z-index: 7; left: 7%; right: 3%; bottom: 15%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent); }
.signature-line span { display: block; width: 30%; height: 100%; background: linear-gradient(90deg, transparent, var(--gold-2), transparent); animation: lineTravel 4.6s ease-in-out infinite; }

.footnote { position: absolute; z-index: 30; left: 4vw; right: 4vw; bottom: 14px; display: flex; justify-content: space-between; color: #3d4d63; font-size: 8px; letter-spacing: .055em; }
.toast { position: fixed; z-index: 100; left: 50%; bottom: 26px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: #f2e3ad; color: #0c0a05; padding: 12px 18px; border-radius: 4px; font-size: 12px; box-shadow: 0 18px 50px rgba(0,0,0,.45); transition: .25s ease; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@keyframes statusPulse { 0%,100% { opacity: .55; transform: scale(.82); } 50% { opacity: 1; transform: scale(1.18); } }
@keyframes corePulse { 0%,100% { transform: scale(.72); opacity: .68; } 50% { transform: scale(1.25); opacity: 1; } }
@keyframes beamBreath { 0%,100% { opacity: .4; } 50% { opacity: 1; } }
@keyframes ripple { from { width: 12px; opacity: .8; } to { width: 180px; opacity: 0; } }
@keyframes insightIn { from { opacity: 0; transform: translateY(9px); filter: blur(3px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes ctaSweep { 0%,58% { left: -32%; } 78%,100% { left: 125%; } }
@keyframes haloSpin { to { transform: rotate(360deg); } }
@keyframes smoke { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-18px,-8px,0) scale(1.08); } }
@keyframes smokeVertical { 0%,100% { transform: translateY(12px) scale(.95); } 50% { transform: translateY(-14px) scale(1.08); } }
@keyframes floatProof { 0%,100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(-9px); opacity: .86; } }
@keyframes lineTravel { 0%,100% { transform: translateX(-20%); opacity: .2; } 50% { transform: translateX(250%); opacity: .85; } }

@media (max-width: 1180px) {
  .hero { grid-template-columns: minmax(0, 1.12fr) minmax(350px, .88fr); gap: 20px; }
  .hero-visual { height: 620px; min-height: 520px; }
  .offer-row { align-items: flex-start; flex-direction: column; gap: 11px; }
  .trust-copy { display: flex; flex-wrap: wrap; }
  .portrait-shell { inset: -12% -24% -4% -8%; }
}

@media (max-width: 900px) {
  body { overflow: auto; }
  .page-shell { overflow: hidden; }
  .topbar { height: 94px; }
  .brand-mark { width: 84px; height: 58px; }
  .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 40px; }
  .hero-copy { max-width: 100%; }
  h1 { max-width: 800px; font-size: clamp(3.3rem, 11vw, 6rem); }
  .method-console { max-width: 100%; }
  .hero-visual { height: 650px; min-height: 0; margin-top: -42px; }
  .portrait-shell { inset: -12% -10% -3% -11%; }
  .portrait { object-position: 65% 44%; transform: translateY(-1%) scale(1.04); -webkit-mask-image: radial-gradient(ellipse 44% 59% at 62% 43%, #000 34%, rgba(0,0,0,.97) 49%, rgba(0,0,0,.7) 62%, rgba(0,0,0,.25) 73%, transparent 85%); mask-image: radial-gradient(ellipse 44% 59% at 62% 43%, #000 34%, rgba(0,0,0,.97) 49%, rgba(0,0,0,.7) 62%, rgba(0,0,0,.25) 73%, transparent 85%); }
  .footnote { position: relative; left: auto; right: auto; bottom: auto; width: 92vw; margin: -34px auto 18px; }
}

@media (max-width: 620px) {
  .topbar { width: 90vw; height: 82px; }
  .brand-mark { width: 72px; height: 49px; }
  .product-status { font-size: 6px; gap: 7px; letter-spacing: .12em; }
  .product-status i, .product-status span:nth-of-type(3) { display: none; }
  .hero { width: 90vw; padding: 31px 0 48px; }
  .eyebrow { font-size: 7px; letter-spacing: .15em; margin-bottom: 15px; }
  .eyebrow span { width: 27px; }
  h1 { font-size: clamp(3rem, 15vw, 4.9rem); line-height: .91; }
  .lead { margin-top: 19px; font-size: .94rem; }
  .method-console { margin-top: 22px; }
  .method-console::before { inset: 0 -7px -6px; }
  .method-nodes { gap: 5px; }
  .method-node { min-height: 78px; grid-template-columns: 1fr; justify-items: center; gap: 5px; padding: 9px 5px; text-align: center; }
  .node-number { display: none; }
  .node-core { width: 14px; }
  .method-node strong { font-size: 6px; letter-spacing: .1em; }
  .node-arrow { display: none; }
  .method-insight { min-height: 95px; grid-template-columns: 38px 1fr; gap: 10px; padding: 11px 9px; }
  .insight-index { font-size: 1.35rem; }
  .method-insight strong { font-size: 11px; }
  .method-insight p { font-size: 9px; }
  .offer-row { margin-top: 17px; }
  .cta { width: 100%; min-width: 0; min-height: 64px; grid-template-columns: 1fr auto 34px; gap: 8px; padding-left: 14px; }
  .cta-copy strong { font-size: .76rem; letter-spacing: .024em; }
  .cta-copy small { font-size: 6px; }
  .cta-price { font-size: .76rem; padding-left: 8px; }
  .cta-arrow { width: 31px; }
  .trust-copy { font-size: 7px; gap: 7px 11px; }
  .hero-visual { height: 500px; margin-top: -8px; }
  .portrait-shell { inset: -13% -39% -5% -29%; }
  .portrait { object-position: 66% 43%; transform: translateY(-1.5%) scale(1.045); -webkit-mask-image: radial-gradient(ellipse 45% 60% at 64% 42%, #000 33%, rgba(0,0,0,.97) 48%, rgba(0,0,0,.7) 61%, rgba(0,0,0,.24) 72%, transparent 84%); mask-image: radial-gradient(ellipse 45% 60% at 64% 42%, #000 33%, rgba(0,0,0,.97) 48%, rgba(0,0,0,.7) 61%, rgba(0,0,0,.24) 72%, transparent 84%); }
  .portrait-shell::after { background: radial-gradient(ellipse 45% 59% at 64% 42%, transparent 33%, rgba(3,10,23,.1) 48%, rgba(3,10,23,.53) 69%, rgba(3,10,23,.95) 89%, #030916 100%); }
  .visual-halo { width: 102%; right: -23%; top: -3%; }
  .proof-one { left: 0; top: 30%; }
  .proof-two { right: -2%; }
  .footnote { width: 90vw; display: grid; gap: 5px; margin-top: -18px; }
  .cursor-aura { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .atmosphere, .cursor-aura { display: none; }
}

/* =========================================================
   V7 — TELA ÚNICA: cabeçalho compacto + CTA sempre visível
   ========================================================= */
html,
body,
#app {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
}

body {
  min-height: 0;
  overscroll-behavior: none;
}

.page-shell {
  height: 100svh;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.topbar {
  width: min(93vw, 1680px);
  height: clamp(66px, 8.1vh, 82px);
  flex: 0 0 auto;
}

.brand-mark {
  width: clamp(76px, 5.2vw, 92px);
  height: clamp(50px, 5.6vh, 62px);
}

.hero {
  width: min(93vw, 1680px);
  height: 100%;
  min-height: 0;
  align-items: center;
  padding: clamp(10px, 1.5vh, 18px) 0 clamp(24px, 3.6vh, 38px);
  gap: clamp(24px, 4.4vw, 76px);
}

.hero-copy {
  align-self: center;
}

.eyebrow {
  margin-bottom: clamp(9px, 1.35vh, 14px);
}

h1 {
  font-size: clamp(3rem, min(5.05vw, 8.7vh), 5.85rem);
  line-height: .91;
}

.lead {
  margin-top: clamp(12px, 1.7vh, 18px);
  font-size: clamp(.91rem, 1.06vw, 1.08rem);
  line-height: 1.48;
}

.method-console {
  margin-top: clamp(14px, 1.9vh, 20px);
}

.method-node {
  min-height: clamp(68px, 8.3vh, 82px);
  padding-top: 10px;
  padding-bottom: 10px;
}

.method-insight {
  min-height: clamp(64px, 7.8vh, 76px);
  padding-top: 9px;
  padding-bottom: 9px;
}

.offer-row {
  margin-top: clamp(13px, 1.8vh, 19px);
}

.cta {
  min-height: clamp(60px, 7.1vh, 66px);
}

.hero-visual {
  height: 100%;
  min-height: 0;
  max-height: 100%;
  align-self: stretch;
}

.portrait-shell {
  inset: -10% -13% -7% -10%;
}

.footnote {
  bottom: 7px;
  opacity: .72;
}

/* Notebooks e telas com pouca altura: reduz somente os espaços,
   preservando todo o conteúdo e mantendo o CTA acima da dobra. */
@media (min-width: 901px) and (max-height: 850px) {
  .topbar { height: 64px; }
  .brand-mark { width: 76px; height: 50px; }
  .product-status { font-size: 7px; }
  .hero { padding: 8px 0 25px; gap: 24px; }
  .eyebrow { margin-bottom: 8px; font-size: 8px; }
  h1 { font-size: clamp(2.85rem, min(4.75vw, 8.2vh), 4.85rem); }
  .lead { margin-top: 10px; line-height: 1.4; }
  .method-console { margin-top: 11px; }
  .method-node { min-height: 66px; padding: 9px 11px; }
  .method-insight { min-height: 60px; margin-top: 7px; padding: 8px 12px; }
  .method-insight p { margin-top: 2px; line-height: 1.35; }
  .offer-row { margin-top: 11px; }
  .cta { min-height: 58px; }
  .hero-visual { height: 100%; }
  .portrait-shell { inset: -8% -15% -8% -10%; }
  .footnote { display: none; }
}

@media (min-width: 901px) and (max-height: 720px) {
  .topbar { height: 58px; }
  .brand-mark { width: 68px; height: 45px; }
  .hero { padding: 5px 0 16px; }
  .eyebrow { display: none; }
  h1 { font-size: clamp(2.55rem, min(4.2vw, 7.5vh), 4rem); }
  .lead { margin-top: 8px; font-size: .87rem; }
  .method-console { margin-top: 9px; }
  .method-node { min-height: 57px; }
  .method-insight { min-height: 54px; }
  .offer-row { margin-top: 9px; }
  .cta { min-height: 54px; }
  .trust-copy { gap: 4px; }
}

/* Tablet e celular continuam sendo uma única experiência sem rolagem.
   A foto vira atmosfera de fundo para preservar headline, método e CTA. */
@media (max-width: 900px) {
  html,
  body,
  #app { overflow: hidden; }

  body { overflow: hidden; }

  .page-shell {
    height: 100svh;
    min-height: 0;
  }

  .topbar {
    width: 92vw;
    height: clamp(58px, 8vh, 70px);
  }

  .brand-mark {
    width: 70px;
    height: 46px;
  }

  .hero {
    width: 92vw;
    height: 100%;
    min-height: 0;
    grid-template-columns: 1fr;
    padding: clamp(8px, 1.5vh, 14px) 0 clamp(12px, 2vh, 20px);
  }

  .hero-copy {
    align-self: center;
    max-width: 720px;
  }

  .hero-visual {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    pointer-events: none;
    opacity: .42;
  }

  .hero-copy {
    position: relative;
    z-index: 9;
  }

  .portrait-shell {
    inset: 22% -36% -18% 8%;
  }

  .portrait-light,
  .floating-proof,
  .signature-line {
    display: none;
  }

  .visual-halo {
    right: -24%;
    top: 18%;
    width: 92%;
  }

  .footnote {
    display: none;
  }
}

@media (max-width: 620px) {
  .topbar { width: 90vw; height: 58px; }
  .brand-mark { width: 62px; height: 42px; }
  .product-status { font-size: 5.5px; }
  .hero { width: 90vw; padding: 6px 0 10px; }
  .eyebrow { margin-bottom: 7px; font-size: 6.5px; }
  h1 { font-size: clamp(2.55rem, min(13vw, 7.8vh), 4rem); line-height: .9; }
  .lead { max-width: 94%; margin-top: 9px; font-size: .82rem; line-height: 1.38; }
  .method-console { margin-top: 11px; }
  .method-node { min-height: 55px; padding: 7px 4px; }
  .method-insight { min-height: 66px; margin-top: 6px; padding: 7px 8px; }
  .method-insight strong { font-size: 10px; }
  .method-insight p { margin-top: 2px; font-size: 8.5px; line-height: 1.35; }
  .offer-row { margin-top: 10px; gap: 6px; }
  .cta { min-height: 56px; }
  .trust-copy { display: none; }
  .hero-visual { opacity: .34; }
  .portrait-shell { inset: 28% -64% -21% -2%; }
}

@media (max-width: 620px) and (max-height: 720px) {
  .topbar { height: 52px; }
  .eyebrow { display: none; }
  h1 { font-size: clamp(2.25rem, 11.7vw, 3rem); }
  .lead { margin-top: 7px; font-size: .76rem; }
  .method-console { margin-top: 8px; }
  .method-node { min-height: 48px; }
  .method-insight { min-height: 58px; }
  .offer-row { margin-top: 7px; }
  .cta { min-height: 51px; }
}

/* Aproxima o conteúdo principal do cabeçalho no desktop. */
@media (min-width: 901px) {
  .hero { align-items: stretch; }
  .hero-copy {
    align-self: start;
    padding-top: clamp(28px, 4.2vh, 42px);
  }
}

@media (min-width: 901px) and (max-height: 850px) {
  .hero-copy { padding-top: 22px; }
}

@media (min-width: 901px) and (max-height: 720px) {
  .hero-copy { padding-top: 14px; }
}

@media (max-width: 900px) {
  .hero-copy { padding-top: 0; }
}


/* =========================================================
   V8 — mais respiro no conteúdo esquerdo + nova headline
   Mantém a experiência em tela única e o CTA sempre visível.
   ========================================================= */
h1 > span {
  display: block;
}

@media (min-width: 901px) {
  .hero-copy {
    padding-top: clamp(36px, 5.2vh, 52px);
  }

  .eyebrow {
    margin-bottom: clamp(15px, 2vh, 20px);
  }

  h1 {
    line-height: .94;
  }

  .lead {
    margin-top: clamp(18px, 2.45vh, 24px);
  }

  .method-console {
    margin-top: clamp(22px, 3vh, 30px);
  }

  .offer-row {
    margin-top: clamp(18px, 2.5vh, 25px);
  }
}

@media (min-width: 901px) and (max-height: 850px) {
  .hero-copy {
    padding-top: 30px;
  }

  .eyebrow {
    margin-bottom: 12px;
  }

  h1 {
    font-size: clamp(2.75rem, min(4.25vw, 7.7vh), 4.7rem);
    line-height: .94;
  }

  .lead {
    margin-top: 15px;
  }

  .method-console {
    margin-top: 18px;
  }

  .offer-row {
    margin-top: 16px;
  }
}

@media (min-width: 901px) and (max-height: 720px) {
  .hero-copy {
    padding-top: 16px;
  }

  .lead {
    margin-top: 9px;
  }

  .method-console {
    margin-top: 11px;
  }

  .offer-row {
    margin-top: 9px;
  }
}

/* =========================================================
   V9 — COMPOSIÇÃO MAIS RESPIRADA + MOBILE COM FOTO INTEIRA
   ========================================================= */

/* Desktop: os cinco blocos do conteúdo passam a ocupar a altura disponível
   com ritmo visual, sem empurrar o CTA para fora da tela. */
@media (min-width: 901px) {
  .topbar {
    height: clamp(64px, 7.5vh, 76px);
  }

  .hero {
    grid-template-columns: minmax(0, 1.08fr) minmax(410px, .92fr);
    align-items: stretch;
    padding: clamp(14px, 2vh, 22px) 0 clamp(22px, 3vh, 32px);
    gap: clamp(34px, 5vw, 84px);
  }

  .hero-copy {
    width: 100%;
    max-width: 800px;
    height: 100%;
    min-height: 0;
    align-self: stretch;
    display: grid;
    grid-template-rows: auto auto auto auto auto;
    align-content: center;
    row-gap: clamp(20px, 3vh, 32px);
    padding-top: 0;
  }

  .eyebrow,
  .lead,
  .method-console,
  .offer-row {
    margin-top: 0;
    margin-bottom: 0;
  }

  .eyebrow {
    margin: 0;
  }

  h1 {
    font-size: clamp(3rem, min(4.45vw, 7.4vh), 5.15rem);
    line-height: .96;
    max-width: 800px;
  }

  .lead {
    max-width: 690px;
    font-size: clamp(.96rem, 1.08vw, 1.1rem);
    line-height: 1.64;
  }

  .method-console {
    max-width: 750px;
  }

  .method-node {
    min-height: clamp(72px, 8.2vh, 84px);
  }

  .method-insight {
    min-height: clamp(68px, 7.7vh, 80px);
  }

  .offer-row {
    align-items: center;
  }

  .hero-visual {
    min-height: 0;
  }
}

/* Notebooks baixos: preserva o respiro usando proporções menores,
   em vez de comprimir todos os elementos uns contra os outros. */
@media (min-width: 901px) and (max-height: 800px) {
  .topbar { height: 62px; }

  .hero {
    padding: 10px 0 22px;
    gap: 30px;
  }

  .hero-copy {
    row-gap: clamp(15px, 2.25vh, 19px);
  }

  h1 {
    font-size: clamp(2.75rem, min(4.15vw, 6.9vh), 4.35rem);
  }

  .lead {
    font-size: .92rem;
    line-height: 1.52;
  }

  .method-node {
    min-height: 65px;
  }

  .method-insight {
    min-height: 60px;
  }

  .cta {
    min-height: 58px;
  }
}

@media (min-width: 901px) and (max-height: 680px) {
  .topbar { height: 54px; }
  .brand-mark { width: 66px; height: 43px; }
  .hero { padding: 7px 0 14px; }
  .hero-copy { row-gap: 10px; }
  .eyebrow { display: none; }
  h1 { font-size: clamp(2.35rem, min(3.9vw, 6.3vh), 3.65rem); }
  .lead { font-size: .82rem; line-height: 1.4; }
  .method-node { min-height: 54px; }
  .method-insight { min-height: 52px; }
  .cta { min-height: 51px; }
}

/* Tablet e mobile: conteúdo com ritmo próprio e retrato completo,
   dimensionado com object-fit: contain — sem cortar cabeça ou corpo. */
@media (max-width: 900px) {
  .topbar {
    width: 92vw;
    height: clamp(56px, 7.5vh, 66px);
  }

  .hero {
    width: 92vw;
    height: 100%;
    min-height: 0;
    padding: clamp(10px, 1.6vh, 16px) 0 clamp(14px, 2vh, 20px);
    display: block;
  }

  .hero-copy {
    width: 100%;
    max-width: 720px;
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto auto auto auto;
    align-content: start;
    row-gap: clamp(14px, 2.25vh, 21px);
    padding-top: 0;
  }

  .eyebrow,
  .lead,
  .method-console,
  .offer-row {
    margin: 0;
  }

  h1 {
    max-width: 690px;
    font-size: clamp(2.7rem, min(10.6vw, 7.2vh), 4.8rem);
    line-height: .94;
  }

  .lead {
    max-width: min(88%, 610px);
    font-size: clamp(.84rem, 2.35vw, 1rem);
    line-height: 1.52;
  }

  .method-console {
    max-width: 680px;
  }

  .method-node {
    min-height: clamp(58px, 7.6vh, 74px);
  }

  .method-insight {
    min-height: clamp(64px, 8.2vh, 78px);
  }

  .offer-row {
    max-width: 680px;
  }

  .hero-visual {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: .38;
    overflow: visible;
  }

  .portrait-shell {
    inset: auto 0 0 auto;
    width: min(72vw, 520px);
    height: min(50vh, 520px);
    transform: none !important;
    overflow: visible;
  }

  .portrait {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right bottom;
    transform: none !important;
    transform-origin: center bottom;
    filter: contrast(1.05) saturate(.68) brightness(.76) drop-shadow(0 28px 52px rgba(0,0,0,.42));
    -webkit-mask-image: radial-gradient(ellipse 74% 76% at 72% 57%, #000 45%, rgba(0,0,0,.95) 60%, rgba(0,0,0,.58) 77%, transparent 100%);
    mask-image: radial-gradient(ellipse 74% 76% at 72% 57%, #000 45%, rgba(0,0,0,.95) 60%, rgba(0,0,0,.58) 77%, transparent 100%);
  }

  .portrait-shell::after {
    inset: -4%;
    background: radial-gradient(ellipse 76% 78% at 72% 57%, transparent 45%, rgba(3,10,23,.14) 62%, rgba(3,10,23,.58) 82%, #030916 100%);
    filter: blur(5px);
  }

  .visual-halo {
    width: 70vw;
    height: 70vw;
    right: -18vw;
    top: auto;
    bottom: -12vw;
    opacity: .42;
  }

  .smoke-one {
    width: 80%;
    height: 22%;
    right: -5%;
    bottom: -1%;
  }
}

@media (max-width: 620px) {
  .topbar {
    width: 90vw;
    height: 56px;
  }

  .brand-mark {
    width: 62px;
    height: 41px;
  }

  .hero {
    width: 90vw;
    padding: 8px 0 12px;
  }

  .hero-copy {
    row-gap: clamp(12px, 1.9vh, 17px);
  }

  .eyebrow {
    font-size: 6.5px;
    letter-spacing: .14em;
  }

  h1 {
    font-size: clamp(2.35rem, min(10.7vw, 6.5vh), 3.45rem);
    line-height: .94;
  }

  .lead {
    max-width: 90%;
    font-size: .79rem;
    line-height: 1.43;
  }

  .method-node {
    min-height: 54px;
  }

  .method-insight {
    min-height: 62px;
  }

  .offer-row {
    gap: 8px;
  }

  .cta {
    min-height: 56px;
  }

  .hero-visual {
    opacity: .31;
  }

  .portrait-shell {
    right: -9vw;
    bottom: -1vh;
    width: 84vw;
    height: 43vh;
  }

  .portrait {
    object-position: right bottom;
  }
}

@media (max-width: 620px) and (max-height: 720px) {
  .topbar { height: 50px; }
  .hero { padding: 5px 0 8px; }
  .hero-copy { row-gap: 8px; }
  .eyebrow { display: none; }
  h1 { font-size: clamp(2.05rem, 9.8vw, 2.7rem); }
  .lead { font-size: .72rem; line-height: 1.34; }
  .method-node { min-height: 46px; }
  .method-insight { min-height: 54px; }
  .cta { min-height: 50px; }
  .portrait-shell {
    width: 74vw;
    height: 35vh;
    right: -7vw;
  }
}

/* Ajuste final V9.1 — retrato totalmente contido no viewport mobile. */
@media (max-width: 900px) {
  .portrait-shell {
    right: 0;
    bottom: 0;
    width: min(70vw, 500px);
    height: min(48vh, 500px);
  }
}

@media (max-width: 620px) {
  .hero-visual { opacity: .34; }
  .portrait-shell {
    right: 0;
    bottom: 0;
    width: 78vw;
    height: 42vh;
  }
}

@media (max-width: 620px) and (max-height: 720px) {
  .portrait-shell {
    right: 0;
    bottom: 0;
    width: 70vw;
    height: 34vh;
  }
}

@media (max-width: 380px) {
  .cta-copy strong {
    font-size: .67rem;
    white-space: nowrap;
  }
  .cta-price {
    font-size: .7rem;
    padding-left: 6px;
  }
  .cta {
    grid-template-columns: 1fr auto 31px;
    gap: 6px;
    padding-left: 12px;
  }
}

/* =========================================================
   V10 — MOBILE REESTRUTURADO
   O retrato deixa de ser um fundo solto no rodapé e passa a
   integrar a narrativa entre a promessa e o método.
   ========================================================= */
.mobile-authority {
  display: none;
}

@media (max-width: 900px) {
  .page-shell {
    height: 100svh;
    min-height: 100svh;
    grid-template-rows: 58px minmax(0, 1fr);
  }

  .topbar {
    width: 90vw;
    height: 58px;
  }

  .hero {
    width: 90vw;
    height: 100%;
    min-height: 0;
    padding: 7px 0 12px;
    display: block;
  }

  .hero-copy {
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto auto minmax(118px, 18vh) auto auto;
    align-content: center;
    row-gap: clamp(9px, 1.45vh, 14px);
  }

  .hero-visual {
    display: none;
  }

  .mobile-authority {
    position: relative;
    display: block;
    min-height: 0;
    height: 100%;
    isolation: isolate;
    overflow: visible;
    pointer-events: none;
  }

  .mobile-authority::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -5vw;
    right: -5vw;
    top: 7%;
    bottom: 3%;
    background:
      radial-gradient(ellipse 46% 88% at 78% 54%, rgba(29, 65, 108, .32), transparent 68%),
      linear-gradient(90deg, transparent 0 37%, rgba(10, 31, 57, .12) 62%, transparent 100%);
    opacity: .95;
  }

  .mobile-authority::after {
    content: "";
    position: absolute;
    z-index: 4;
    left: -2vw;
    right: -2vw;
    bottom: 4%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(222,177,79,.42) 28%, rgba(222,177,79,.12) 65%, transparent);
  }

  .mobile-authority img {
    position: absolute;
    z-index: 2;
    right: -1vw;
    bottom: -18%;
    width: auto;
    height: 145%;
    max-width: 62vw;
    object-fit: contain;
    object-position: center bottom;
    filter: contrast(1.04) saturate(.7) brightness(.84) drop-shadow(0 22px 34px rgba(0,0,0,.38));
    -webkit-mask-image: radial-gradient(ellipse 67% 74% at 54% 51%, #000 43%, rgba(0,0,0,.98) 57%, rgba(0,0,0,.68) 73%, rgba(0,0,0,.16) 88%, transparent 100%);
    mask-image: radial-gradient(ellipse 67% 74% at 54% 51%, #000 43%, rgba(0,0,0,.98) 57%, rgba(0,0,0,.68) 73%, rgba(0,0,0,.16) 88%, transparent 100%);
  }

  .mobile-authority-line {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 49%;
    width: 64%;
    height: 1px;
    background: linear-gradient(90deg, rgba(222,177,79,.6), rgba(82,123,169,.2), transparent);
    box-shadow: 0 0 16px rgba(222,177,79,.12);
  }

  .mobile-authority-line::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 6px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--gold-2);
    box-shadow: 0 0 17px rgba(222,177,79,.62);
    transform: translateY(-50%);
    animation: statusPulse 2.4s ease-in-out infinite;
  }

  .mobile-authority-orbit {
    position: absolute;
    z-index: 1;
    right: 4vw;
    top: 50%;
    border: 1px solid rgba(143, 175, 211, .11);
    border-radius: 50%;
    transform: translateY(-50%);
  }

  .orbit-one {
    width: 39vw;
    aspect-ratio: 1;
    animation: mobileOrbit 14s linear infinite;
  }

  .orbit-two {
    width: 29vw;
    aspect-ratio: 1;
    border-style: dashed;
    border-color: rgba(222,177,79,.13);
    animation: mobileOrbitReverse 17s linear infinite;
  }

  .eyebrow,
  .lead,
  .method-console,
  .offer-row {
    margin: 0;
  }

  h1 {
    max-width: 680px;
    font-size: clamp(2.65rem, min(10.7vw, 6.6vh), 4.6rem);
    line-height: .93;
  }

  .lead {
    max-width: 94%;
    font-size: clamp(.79rem, 2.25vw, .96rem);
    line-height: 1.46;
  }

  .method-console,
  .offer-row {
    max-width: 100%;
  }

  .method-node {
    min-height: clamp(50px, 6.6vh, 62px);
  }

  .method-insight {
    min-height: clamp(58px, 7.2vh, 68px);
  }

  .cta {
    min-height: clamp(54px, 6.8vh, 62px);
  }

  .footnote {
    display: none;
  }
}

@media (max-width: 620px) {
  .page-shell {
    grid-template-rows: 52px minmax(0, 1fr);
  }

  .topbar {
    width: 90vw;
    height: 52px;
  }

  .brand-mark {
    width: 58px;
    height: 39px;
  }

  .product-status {
    font-size: 5px;
    letter-spacing: .11em;
  }

  .hero {
    padding: 5px 0 9px;
  }

  .hero-copy {
    grid-template-rows: auto auto auto minmax(105px, 17.5vh) auto auto;
    row-gap: clamp(7px, 1.18vh, 10px);
  }

  .eyebrow {
    font-size: 6px;
    letter-spacing: .13em;
  }

  h1 {
    font-size: clamp(2.2rem, min(10.7vw, 6.1vh), 3.25rem);
    line-height: .92;
  }

  .lead {
    max-width: 100%;
    font-size: clamp(.73rem, 3vw, .82rem);
    line-height: 1.38;
  }

  .mobile-authority img {
    right: -3vw;
    bottom: -14%;
    height: 139%;
    max-width: 68vw;
  }

  .mobile-authority-line {
    width: 58%;
  }

  .orbit-one { width: 46vw; }
  .orbit-two { width: 34vw; }

  .method-console::before {
    inset: 0 -5px -5px;
  }

  .method-nodes {
    gap: 5px;
  }

  .method-node {
    min-height: 48px;
    padding: 6px 4px;
  }

  .method-insight {
    min-height: 56px;
    padding: 7px 8px;
  }

  .method-insight strong {
    font-size: 9.5px;
  }

  .method-insight p {
    font-size: 8px;
    line-height: 1.28;
  }

  .offer-row {
    gap: 0;
  }

  .cta {
    min-height: 54px;
  }
}

@media (max-width: 620px) and (max-height: 720px) {
  .page-shell {
    grid-template-rows: 47px minmax(0, 1fr);
  }

  .topbar { height: 47px; }
  .brand-mark { width: 52px; height: 35px; }
  .hero { padding: 3px 0 7px; }

  .hero-copy {
    grid-template-rows: auto auto auto minmax(78px, 14.5vh) auto auto;
    row-gap: 5px;
  }

  .eyebrow { display: none; }

  h1 {
    font-size: clamp(1.95rem, 9.8vw, 2.55rem);
    line-height: .91;
  }

  .lead {
    font-size: .68rem;
    line-height: 1.3;
  }

  .mobile-authority img {
    right: -1vw;
    bottom: -18%;
    height: 145%;
    max-width: 60vw;
  }

  .method-node {
    min-height: 42px;
  }

  .method-insight {
    min-height: 48px;
    grid-template-columns: 32px 1fr;
    gap: 7px;
    padding: 5px 7px;
  }

  .insight-index { font-size: 1.1rem; }
  .method-insight strong { font-size: 8.5px; }
  .method-insight p { font-size: 7px; }

  .cta {
    min-height: 48px;
  }

  .cta-copy strong { font-size: .68rem; }
  .cta-price { font-size: .7rem; }
}

@media (max-width: 350px) {
  .product-status span:last-child,
  .product-status i {
    display: none;
  }

  .hero-copy {
    grid-template-rows: auto auto auto minmax(72px, 13.5vh) auto auto;
  }

  h1 { font-size: clamp(1.82rem, 9.6vw, 2.25rem); }
  .lead { font-size: .65rem; }
  .mobile-authority img { max-width: 57vw; }
  .method-node strong { font-size: 5.5px; }
  .cta-copy strong { font-size: .61rem; }
}

@keyframes mobileOrbit {
  to { transform: translateY(-50%) rotate(360deg); }
}

@keyframes mobileOrbitReverse {
  to { transform: translateY(-50%) rotate(-360deg); }
}

/* V10.1 — correção da faixa de autoridade em celulares baixos. */
@media (max-width: 900px) {
  .mobile-authority {
    height: auto;
    min-height: 0;
    align-self: stretch;
  }

  .mobile-authority img {
    bottom: -20px;
    height: clamp(172px, 24vh, 220px);
    max-width: 66vw;
    -webkit-mask-image: radial-gradient(ellipse 51% 65% at 55% 52%, #000 22%, rgba(0,0,0,.98) 34%, rgba(0,0,0,.7) 47%, rgba(0,0,0,.28) 58%, transparent 72%);
    mask-image: radial-gradient(ellipse 51% 65% at 55% 52%, #000 22%, rgba(0,0,0,.98) 34%, rgba(0,0,0,.7) 47%, rgba(0,0,0,.28) 58%, transparent 72%);
  }
}

@media (max-width: 620px) {
  .mobile-authority img {
    right: -5vw;
    bottom: -18px;
    height: clamp(150px, 23vh, 205px);
    max-width: 72vw;
  }
}

@media (max-width: 620px) and (max-height: 720px) {
  .mobile-authority img {
    right: -3vw;
    bottom: -16px;
    height: clamp(118px, 22vh, 158px);
    max-width: 64vw;
  }
}

@media (max-width: 350px) {
  .mobile-authority img {
    height: clamp(108px, 20vh, 138px);
    max-width: 60vw;
  }
}

/* V10.2 — em telas baixas, o retrato fica contido na faixa e nunca invade o texto. */
@media (max-width: 620px) and (max-height: 720px) {
  .mobile-authority {
    overflow: clip;
  }

  .mobile-authority img {
    top: -4px;
    bottom: auto;
    height: 132%;
    max-height: 132%;
  }
}

@media (max-width: 620px) and (max-height: 720px) {
  .mobile-authority img {
    top: -3px;
    bottom: auto;
    height: clamp(102px, 19vh, 128px);
    max-height: none;
  }
}

@media (max-width: 620px) and (max-height: 720px) {
  /* A eyebrow é ocultada nesta faixa; por isso a grade passa a ter cinco linhas reais. */
  .hero-copy {
    grid-template-rows: auto auto minmax(78px, 14.5vh) auto auto;
  }
}

@media (max-width: 350px) and (max-height: 720px) {
  .hero-copy {
    grid-template-rows: auto auto minmax(70px, 13.5vh) auto auto;
  }
}


/* =========================================================
   V11 — MOBILE LATERAL DEFINITIVO
   Headline e retrato formam uma única composição equilibrada.
   O desktop permanece inalterado.
   ========================================================= */
.mobile-headline-stage { display: contents; }
.mobile-authority-glow { display: none; }

@media (max-width: 900px) {
  .page-shell { grid-template-rows: clamp(50px, 7vh, 58px) minmax(0, 1fr); }
  .topbar { height: 100%; }
  .hero { padding: clamp(7px, 1.2vh, 11px) 0 clamp(10px, 1.5vh, 14px); }
  .hero-copy {
    grid-template-rows: auto minmax(190px, 29vh) auto auto auto;
    align-content: center;
    row-gap: clamp(13px, 1.8vh, 18px);
  }
  .mobile-headline-stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(148px, .82fr);
    align-items: center;
    gap: clamp(8px, 2.2vw, 20px);
    min-height: 0;
    height: 100%;
    isolation: isolate;
  }
  .mobile-headline-stage::after {
    content: "";
    position: absolute;
    z-index: -2;
    right: -10vw;
    top: 4%;
    width: 62%;
    height: 94%;
    border-radius: 50%;
    background: radial-gradient(ellipse at 55% 46%, rgba(35,81,135,.32), rgba(8,26,51,.12) 46%, transparent 72%);
    filter: blur(10px);
    pointer-events: none;
  }
  .mobile-headline-stage h1 {
    position: relative;
    z-index: 5;
    align-self: center;
    max-width: none;
    font-size: clamp(2.55rem, min(10.4vw, 6.25vh), 4.5rem);
    line-height: .91;
    text-wrap: balance;
  }
  .mobile-authority {
    display: block;
    position: relative;
    z-index: 4;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: visible;
    isolation: isolate;
  }
  .mobile-authority::before,
  .mobile-authority::after,
  .mobile-authority-line { display: none; }
  .mobile-authority img {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 50%;
    right: auto;
    bottom: auto;
    width: 140%;
    height: 126%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: 50% 18%;
    transform: translate(-49%, -47%);
    filter: contrast(1.055) saturate(.76) brightness(.92) drop-shadow(0 24px 38px rgba(0,0,0,.5));
    -webkit-mask-image: radial-gradient(ellipse 61% 70% at 51% 43%, #000 34%, rgba(0,0,0,.98) 50%, rgba(0,0,0,.72) 66%, rgba(0,0,0,.22) 82%, transparent 100%);
    mask-image: radial-gradient(ellipse 61% 70% at 51% 43%, #000 34%, rgba(0,0,0,.98) 50%, rgba(0,0,0,.72) 66%, rgba(0,0,0,.22) 82%, transparent 100%);
  }
  .mobile-authority-glow {
    display: block;
    position: absolute;
    z-index: 1;
    inset: 12% -25% 4% -20%;
    border-radius: 50%;
    background: radial-gradient(circle at 48% 38%, rgba(237,197,104,.12), transparent 25%), radial-gradient(ellipse at 55% 56%, rgba(31,74,124,.35), transparent 67%);
    filter: blur(10px);
  }
  .mobile-authority-orbit {
    z-index: 2;
    right: 50%;
    top: 51%;
    transform: translate(50%, -50%);
    opacity: .7;
  }
  .orbit-one { width: min(34vw, 190px); }
  .orbit-two { width: min(25vw, 140px); }
  .lead { max-width: min(100%, 670px); font-size: clamp(.8rem, 2.2vw, .96rem); line-height: 1.5; }
  .method-console, .offer-row { width: 100%; }
}

@media (max-width: 620px) {
  .page-shell { grid-template-rows: 50px minmax(0, 1fr); }
  .hero { padding: 5px 0 9px; }
  .hero-copy {
    grid-template-rows: auto minmax(180px, 28vh) auto auto auto;
    row-gap: clamp(10px, 1.45vh, 13px);
  }
  .mobile-headline-stage {
    grid-template-columns: minmax(0, 1.14fr) minmax(126px, .86fr);
    gap: 4px;
  }
  .mobile-headline-stage h1 {
    font-size: clamp(2.18rem, min(10.6vw, 5.9vh), 3.3rem);
    line-height: .9;
    letter-spacing: -.058em;
  }
  .mobile-authority img {
    width: 151%;
    height: 131%;
    object-position: 50% 17%;
    transform: translate(-50%, -47%);
  }
  .mobile-authority-glow { inset: 10% -34% 2% -28%; }
  .orbit-one { width: 40vw; }
  .orbit-two { width: 29vw; }
  .lead { font-size: clamp(.72rem, 3vw, .82rem); line-height: 1.4; }
  .method-node { min-height: 48px; }
  .method-insight { min-height: 56px; }
  .cta { min-height: 55px; }
}

@media (max-width: 620px) and (max-height: 720px) {
  .page-shell { grid-template-rows: 45px minmax(0, 1fr); }
  .hero { padding: 3px 0 6px; }
  .hero-copy {
    grid-template-rows: minmax(142px, 26vh) auto auto auto;
    row-gap: 6px;
  }
  .eyebrow { display: none; }
  .mobile-headline-stage { grid-template-columns: minmax(0, 1.15fr) minmax(112px, .85fr); }
  .mobile-headline-stage h1 { font-size: clamp(1.92rem, 9.7vw, 2.55rem); line-height: .89; }
  .mobile-authority img { width: 146%; height: 132%; transform: translate(-50%, -46%); }
  .lead { font-size: .67rem; line-height: 1.3; }
  .method-node { min-height: 41px; }
  .method-insight { min-height: 47px; }
  .cta { min-height: 48px; }
}

@media (max-width: 350px) {
  .mobile-headline-stage { grid-template-columns: minmax(0, 1.18fr) minmax(100px, .82fr); }
  .mobile-headline-stage h1 { font-size: clamp(1.76rem, 9.4vw, 2.15rem); }
  .mobile-authority img { width: 150%; }
}

/* V11.1 — refinamento final da composição mobile lateral */
@media (max-width: 900px) {
  .hero-copy {
    align-content: start;
    grid-template-rows: auto clamp(250px, 33vh, 300px) auto auto auto;
    row-gap: clamp(12px, 1.7vh, 17px);
  }

  .mobile-headline-stage {
    align-items: center;
  }

  .mobile-headline-stage h1 {
    line-height: .88;
  }

  .mobile-headline-stage h1 em {
    font-size: .94em;
  }

  .mobile-authority img {
    width: 148%;
    height: 132%;
    object-position: 50% 16%;
    transform: translate(-50%, -46%);
    -webkit-mask-image: radial-gradient(ellipse 49% 64% at 51% 43%, #000 0 28%, rgba(0,0,0,.95) 40%, rgba(0,0,0,.62) 54%, rgba(0,0,0,.18) 68%, transparent 79%);
    mask-image: radial-gradient(ellipse 49% 64% at 51% 43%, #000 0 28%, rgba(0,0,0,.95) 40%, rgba(0,0,0,.62) 54%, rgba(0,0,0,.18) 68%, transparent 79%);
  }

  .mobile-authority::after {
    content: "";
    display: block;
    position: absolute;
    z-index: 4;
    inset: -14% -38% -18% -32%;
    pointer-events: none;
    background: radial-gradient(ellipse 44% 60% at 51% 43%, transparent 28%, rgba(4,13,28,.08) 42%, rgba(3,10,22,.38) 58%, rgba(3,9,20,.84) 76%, #030916 100%);
    filter: blur(4px);
  }

  .lead {
    position: relative;
    z-index: 8;
  }
}

@media (max-width: 620px) {
  .hero-copy {
    grid-template-rows: auto clamp(225px, 33vh, 278px) auto auto auto;
    row-gap: clamp(9px, 1.25vh, 12px);
  }

  .mobile-headline-stage {
    grid-template-columns: minmax(0, 1.2fr) minmax(122px, .8fr);
  }

  .mobile-headline-stage h1 {
    font-size: clamp(2.05rem, min(9.9vw, 5.55vh), 3.05rem);
    line-height: .86;
  }

  .mobile-headline-stage h1 em {
    font-size: .9em;
  }

  .mobile-authority img {
    width: 160%;
    height: 136%;
    object-position: 50% 15%;
    transform: translate(-50%, -45%);
  }

  .mobile-authority::after {
    inset: -16% -48% -20% -40%;
  }

  .lead {
    font-size: clamp(.72rem, 2.8vw, .8rem);
    line-height: 1.36;
  }
}

@media (max-width: 620px) and (max-height: 720px) {
  .hero-copy {
    grid-template-rows: clamp(188px, 32vh, 218px) auto auto auto;
    row-gap: 6px;
  }

  .mobile-headline-stage {
    grid-template-columns: minmax(0, 1.21fr) minmax(108px, .79fr);
  }

  .mobile-headline-stage h1 {
    font-size: clamp(1.78rem, 8.9vw, 2.2rem);
    line-height: .84;
  }

  .mobile-headline-stage h1 em {
    font-size: .88em;
  }

  .mobile-authority img {
    width: 158%;
    height: 137%;
    transform: translate(-50%, -44%);
  }

  .lead {
    font-size: .64rem;
    line-height: 1.24;
  }
}