* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--rb-bg);
  color: var(--rb-ink);
  font-family: "Rethink Sans", sans-serif;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  transition: background-color 240ms ease, color 240ms ease;
}
::selection { background: var(--rb-blue); color: #fff; }
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--rb-bg); }
::-webkit-scrollbar-thumb { border: 3px solid var(--rb-bg); border-radius: 10px; background: var(--rb-scroll-thumb); }
:focus-visible { outline: 3px solid rgba(39, 93, 231, 0.45); outline-offset: 4px; }
a { color: inherit; }
button { font: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: var(--rb-deep);
  color: var(--rb-on-deep);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.button {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.25rem;
  border: 1px solid transparent;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--rb-blue); color: #fff; }
.button-primary:hover { background: var(--rb-blue-hover); }
.button-quiet { border-color: var(--rb-line); background: var(--rb-surface); color: var(--rb-ink); }
.button-quiet:hover { border-color: var(--rb-blue-dark); background: var(--rb-hover); }
.button-light { background: #fff; color: #111c35; }
.button-light:hover { background: #e8efff; color: #1947bd; }

.hero {
  position: relative;
  display: grid;
  width: var(--rb-page);
  min-height: min(820px, 100svh);
  grid-template-columns: minmax(0, 0.9fr) minmax(480px, 1.1fr);
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
  margin: 0 auto;
  padding: calc(76px + clamp(3rem, 5vw, 4.5rem)) 0 clamp(4.5rem, 7vw, 6.5rem);
  background: var(--rb-hero-bg);
  box-shadow: 50vw 0 0 var(--rb-hero-bg), -50vw 0 0 var(--rb-hero-bg);
}
.hero h1 {
  max-width: 10ch;
  margin-bottom: 1.7rem;
  font-size: clamp(3.5rem, 6.5vw, 5.9rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.96;
}
.hero-copy > p { max-width: 55ch; margin-bottom: 2rem; color: var(--rb-muted); font-size: 1.12rem; }
.hero-actions { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.hero-assurances { display: flex; gap: 1rem 1.8rem; margin: 2rem 0 0; padding: 0; color: var(--rb-muted); font-size: 0.84rem; list-style: none; }
.hero-assurances li { position: relative; padding-left: 0.9rem; }
.hero-assurances li::before { position: absolute; top: 0.62em; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--rb-blue); content: ""; }

.hero-presentation { display: grid; justify-items: center; min-width: 0; }
.website-scene {
  --scene-front-y: -50%;
  --scene-front-z: 76px;
  --scene-back-y: -50%;
  --scene-back-z: 0px;
  position: relative;
  width: 100%;
  height: 500px;
  perspective: 1200px;
  transform-style: preserve-3d;
}
.site-layer {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 82%;
  height: 330px;
  overflow: hidden;
  border-radius: var(--rb-radius);
  transform-style: preserve-3d;
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1), opacity 500ms ease;
  will-change: transform;
}
.website-scene.is-scroll-driven .site-layer { transition-duration: 220ms, 220ms; }
.site-layer-front {
  z-index: 3;
  background: #fff;
  color: #111c35;
  box-shadow: 0 24px 55px rgba(0, 0, 0, 0.16);
  transform: translate(-50%, var(--scene-front-y)) rotateX(55deg) rotateZ(-24deg) translate3d(0, 0, var(--scene-front-z));
}
.site-layer-middle {
  z-index: 2;
  padding: 2rem;
  background: #dfe8ff;
  color: var(--rb-blue-dark);
  opacity: 0.88;
  transform: translate(-50%, -50%) rotateX(55deg) rotateZ(-24deg) translate3d(0, 0, 38px);
}
.site-layer-back {
  z-index: 1;
  padding: 2rem;
  background: #18243d;
  color: #fff;
  opacity: 0.84;
  transform: translate(-50%, var(--scene-back-y)) rotateX(55deg) rotateZ(-24deg) translate3d(0, 0, var(--scene-back-z));
}
.website-scene.is-exploded { --scene-front-y: -66%; --scene-front-z: 105px; --scene-back-y: -32%; --scene-back-z: -28px; }
.layer-label { display: block; margin-bottom: 1.25rem; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.03em; }
.strategy-lines, .type-lines { display: grid; gap: 12px; }
.strategy-lines i, .type-lines i { display: block; height: 8px; border-radius: 3px; background: rgba(255, 255, 255, 0.34); }
.strategy-lines i:nth-child(2), .type-lines i:nth-child(2) { width: 72%; }
.strategy-lines i:nth-child(3), .type-lines i:nth-child(3) { width: 45%; }
.strategy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 32px; }
.strategy-grid i { height: 90px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 8px; }
.palette { display: flex; gap: 10px; margin-bottom: 28px; }
.palette i { display: block; width: 34px; height: 34px; border-radius: 50%; background: #275de7; }
.palette i:nth-child(2) { background: #111c35; }
.palette i:nth-child(3) { background: #fff; }
.type-lines i { background: rgba(25, 71, 189, 0.24); }
.type-lines i:first-child { height: 16px; }
.browser-bar { display: flex; height: 28px; gap: 5px; align-items: center; padding: 0 11px; border-bottom: 1px solid #e4e8ef; background: #f4f6f9; }
.browser-bar span { width: 5px; height: 5px; border-radius: 50%; background: #b9c2d0; }
.browser-bar i { width: 48%; height: 5px; margin-left: auto; border-radius: 3px; background: #dfe4eb; }
.mock-nav { display: flex; height: 46px; gap: 14px; align-items: center; padding: 0 22px; border-bottom: 1px solid #edf0f4; }
.mock-nav strong { margin-right: auto; font-size: 0.74rem; }
.mock-nav span { width: 24px; height: 4px; border-radius: 2px; background: #dfe4eb; }
.mock-nav b { padding: 4px 7px; border-radius: 4px; background: #111c35; color: #fff; font-size: 0.48rem; }
.mock-hero { display: grid; grid-template-columns: 1fr 0.9fr; gap: 18px; padding: 22px; }
.mock-title { display: block; margin-bottom: 11px; font-size: 1.45rem; letter-spacing: -0.04em; line-height: 1; }
.mock-hero p { width: 82%; height: 5px; margin-bottom: 6px; border-radius: 2px; background: #dde2ea; }
.mock-hero p.short { width: 60%; }
.mock-hero button { margin-top: 12px; padding: 6px 11px; border: 0; border-radius: 5px; background: var(--rb-blue); color: #fff; font-size: 0.5rem; }
.mock-image { min-height: 118px; border-radius: 8px; background: #a9c1ff; }
.mock-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 22px; }
.mock-columns i { height: 36px; border-radius: 6px; background: #edf0f4; }
.scene-control { display: inline-flex; min-height: 44px; gap: 0.6rem; align-items: center; margin-top: -1rem; padding: 0.65rem 0.9rem; border: 1px solid var(--rb-line); border-radius: 10px; background: var(--rb-surface); color: var(--rb-muted); cursor: pointer; }
.scene-control:hover { border-color: var(--rb-blue); color: var(--rb-blue-dark); }
.scene-control svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.section { width: var(--rb-page); margin: 0 auto; padding: clamp(3.25rem, 5vw, 5rem) 0; }
.section-heading { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 6vw, 6rem); align-items: end; margin-bottom: clamp(2.25rem, 4vw, 3rem); }
.section-heading h2, .compact-heading h2, .deliverable h2, .contact h2 {
  margin-bottom: 0;
  font-size: clamp(2.6rem, 5vw, 4.6rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}
.section-heading p, .compact-heading p, .deliverable-copy p { max-width: 58ch; margin-bottom: 0; color: var(--rb-muted); }
.solution-list { border-top: 1px solid var(--rb-line); }
.solution-list article {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2rem, 6vw, 6rem);
  padding: 2rem 0;
  border-bottom: 1px solid var(--rb-line);
  transition: color 220ms ease, transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.solution-list h3 { margin-bottom: 0.35rem; font-size: 1.45rem; }
.solution-list div span { color: var(--rb-blue-dark); font-size: 0.78rem; font-weight: 600; }
.solution-list p { max-width: 58ch; margin: 0; color: var(--rb-muted); }

.deliverable {
  display: grid;
  width: var(--rb-page);
  min-height: 0;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(3rem, 9vw, 9rem);
  align-items: center;
  margin: 0 auto clamp(3rem, 6vw, 5rem);
  padding: clamp(3rem, 6vw, 5.5rem);
  border-radius: var(--rb-radius);
  background: var(--rb-deep);
  color: var(--rb-on-deep);
}
.deliverable h2 { margin-bottom: 1.5rem; }
.deliverable-copy p { color: var(--rb-deep-muted); }
.deliverable-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid #34415a; }
.deliverable-list li { display: grid; grid-template-columns: 0.55fr 1fr; gap: 1.5rem; padding: 1.3rem 0; border-bottom: 1px solid #34415a; }
.deliverable-list strong { color: var(--rb-on-deep); }
.deliverable-list span { color: var(--rb-deep-muted); font-size: 0.9rem; }

.compact-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: end; margin-bottom: 2.25rem; }
.process { background: var(--rb-section-tint); box-shadow: 50vw 0 0 var(--rb-section-tint), -50vw 0 0 var(--rb-section-tint); }
.process-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rb-line); }
.process-list li { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: baseline; padding: 1.35rem 0; border-bottom: 1px solid var(--rb-line); transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1); }
.process-list > li > span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: var(--rb-blue-soft); color: var(--rb-blue-dark); font-size: 0.78rem; font-weight: 700; }
.process-list li > div { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: 1.5rem; align-items: baseline; }
.process-list h3 { margin: 0; font-size: 1.15rem; }
.process-list p { margin: 0; color: var(--rb-muted); }

.pricing { padding-top: 3.5rem; padding-bottom: 2.5rem; }
.plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.plan { display: flex; min-width: 0; flex-direction: column; padding: 2rem; border: 1px solid var(--rb-line); border-radius: var(--rb-radius); background: var(--rb-surface); transition: border-color 220ms ease, transform 320ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 320ms ease; }
.plan-featured { border: 2px solid var(--rb-blue); padding: calc(2rem - 1px); }
.plan-intro h3 { margin-bottom: 0.6rem; font-size: 1.35rem; }
.plan-intro p { min-height: 3.1em; color: var(--rb-muted); }
.reference-label { margin-top: 1.2rem; color: var(--rb-muted); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.price { display: flex; align-items: baseline; margin: 0.2rem 0 0; }
.price small { margin-right: 0.3rem; font-weight: 700; }
.price strong { font-size: clamp(2.8rem, 4vw, 4rem); letter-spacing: -0.04em; line-height: 1; }
.price span { margin-left: 0.45rem; color: var(--rb-muted); font-size: 0.72rem; }
.monthly { color: var(--rb-blue-dark); font-size: 0.9rem; font-weight: 700; }
.info-button { display: inline-grid; width: 1.35rem; height: 1.35rem; margin-left: 0.35rem; place-items: center; border: 1.5px solid var(--rb-blue); border-radius: 50%; background: transparent; color: var(--rb-blue-dark); font-size: 0.78rem; font-weight: 800; line-height: 1; vertical-align: middle; cursor: pointer; transition: background-color 180ms ease, color 180ms ease; }
.info-button:hover { background: var(--rb-blue); color: #fff; }
.monthly-dialog { width: min(32rem, calc(100vw - 2rem)); padding: 2rem; border: 1px solid var(--rb-line); border-radius: var(--rb-radius); background: var(--rb-surface); color: var(--rb-ink); }
.monthly-dialog::backdrop { background: rgba(9, 13, 22, 0.6); }
.monthly-dialog h2 { margin-bottom: 0.8rem; font-size: 1.4rem; }
.monthly-dialog ul { margin: 1rem 0; padding-left: 1.1rem; color: var(--rb-muted); }
.monthly-dialog li { margin-bottom: 0.5rem; }
.monthly-dialog form { position: absolute; top: 0.75rem; right: 0.75rem; margin: 0; }
.monthly-close { width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: transparent; color: var(--rb-muted); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.monthly-fine { margin: 0; color: var(--rb-muted); font-size: 0.8rem; }
.pricing-warning { margin-top: 0.75rem; }
.plan ul { flex: 1; margin: 1rem 0 2rem; padding: 0; color: var(--rb-muted); list-style: none; }
.plan li { position: relative; padding: 0.65rem 0 0.65rem 1rem; border-bottom: 1px solid var(--rb-line); font-size: 0.88rem; }
.plan li::before { position: absolute; top: 1.05rem; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--rb-blue); content: ""; }
.plan .button { width: 100%; text-align: center; }
.pricing-note { max-width: 65ch; margin: 1.5rem auto 0; color: var(--rb-muted); font-size: 0.78rem; text-align: center; }
/* Licença mensal é a oferta principal; o pagamento único fica visível, mas secundário. */
.price span { font-size: 1rem; font-weight: 700; }
.plan ul + .plan-once { margin-top: -1rem; }
.plan-once { margin: 0 0 1.25rem; padding: 0.75rem 0.9rem; border: 1px dashed var(--rb-line); border-radius: calc(var(--rb-radius) / 2); color: var(--rb-muted); font-size: 0.8rem; }
.plan-once strong { color: var(--rb-ink); }
.monthly em { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--rb-blue-soft); font-style: normal; font-weight: 800; }
.modality-compare { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1rem; margin-top: 1.5rem; }
.modality { position: relative; padding: 1.5rem; border: 1px solid var(--rb-line); border-radius: var(--rb-radius); background: var(--rb-surface); }
.modality h3 { margin-bottom: 0.6rem; font-size: 1.1rem; }
.modality ul { margin: 0; padding-left: 1.1rem; color: var(--rb-muted); font-size: 0.86rem; }
.modality li { margin-bottom: 0.4rem; }
.modality-recommended { border: 2px solid var(--rb-blue); padding: calc(1.5rem - 1px); }
.modality-tag { display: inline-block; margin-bottom: 0.6rem; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--rb-blue); color: #fff; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }

.faq { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: clamp(2.5rem, 6vw, 6rem); padding-top: 2.5rem; }
.faq .compact-heading { display: block; margin: 0; }
.faq .compact-heading h2 { margin-bottom: 1rem; }
.faq-list { padding-top: 0.5rem; border-top: 1px solid var(--rb-line); }
.faq-list details { border-bottom: 1px solid var(--rb-line); transition: background-color 220ms ease; }
.faq-list details[open] { background: var(--rb-surface-soft); }
.faq-list summary { position: relative; padding: 1.2rem 3rem 1.2rem 1rem; font-weight: 600; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span::before, .faq-list summary span::after { position: absolute; top: 50%; right: 1rem; width: 14px; height: 1px; background: var(--rb-ink); content: ""; transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1); }
.faq-list summary span::after { transform: rotate(90deg); }
.faq-list details:not(.is-enhanced)[open] summary span::after,
.faq-list details.is-expanded summary span::after { transform: rotate(0); }
.faq-answer { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 300ms cubic-bezier(0.16, 1, 0.3, 1), opacity 220ms ease; }
.faq-answer > div { overflow: hidden; }
.faq-list details:not(.is-enhanced)[open] .faq-answer,
.faq-list details.is-expanded .faq-answer { grid-template-rows: 1fr; opacity: 1; }
.faq-list details p { max-width: 64ch; margin: 0; padding: 0 3rem 1.35rem 1rem; color: var(--rb-muted); }

.contact {
  display: flex;
  width: var(--rb-page);
  min-height: 360px;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4rem;
  margin: 0 auto clamp(2rem, 5vw, 4rem);
  padding: clamp(3rem, 6vw, 5rem);
  border-radius: var(--rb-radius);
  background: var(--rb-blue);
  color: #fff;
}
.contact > div:first-child { max-width: 740px; }
.contact h2 { margin-bottom: 1.25rem; }
.contact p { max-width: 60ch; margin: 0; color: #e6ecff; }
.contact-actions { display: grid; min-width: 250px; gap: 1rem; }
.contact-email { color: #fff; font-size: 0.88rem; font-weight: 600; text-align: center; text-decoration: underline; text-underline-offset: 0.3rem; }

@media (max-width: 1000px) {
  .hero { min-height: 0; grid-template-columns: 1fr; gap: 2rem; padding-bottom: 4rem; }
  .hero h1 { max-width: 12ch; }
  .hero-presentation { width: min(100%, 680px); margin: 0 auto; }
  .plans-grid { grid-template-columns: 1fr; }
  .modality-compare { grid-template-columns: 1fr; }
  .plan-intro p { min-height: 0; }
  .deliverable { grid-template-columns: 1fr; }
  .contact { align-items: flex-start; flex-direction: column; }
  .contact-actions { width: min(100%, 360px); }
}

@media (max-width: 720px) {
  .hero { padding: calc(76px + 2.75rem) 0 3rem; }
  .hero h1 { max-width: none; font-size: clamp(3rem, 12.5vw, 4.2rem); }
  .hero-assurances { flex-wrap: wrap; gap: 0.55rem 1.3rem; }
  .website-scene { height: 390px; margin-inline: -0.5rem; }
  .site-layer { width: 86%; height: 270px; }
  .site-layer-middle, .site-layer-back { padding: 1.35rem; }
  .mock-nav, .mock-hero, .mock-columns { padding-inline: 15px; }
  .mock-nav span { display: none; }
  .mock-title { font-size: 1.1rem; }
  .mock-image { min-height: 105px; }
  .section-heading, .compact-heading, .faq { grid-template-columns: 1fr; gap: 1.3rem; }
  .solution-list article { grid-template-columns: 1fr; gap: 1rem; }
  .section { padding: 3.5rem 0; }
  .deliverable { min-height: 0; padding: 2rem; }
  .deliverable-list li { grid-template-columns: 1fr; gap: 0.35rem; }
  .process-list li { grid-template-columns: auto 1fr; }
  .process-list li > div { grid-template-columns: 1fr; gap: 0.35rem; }
  .contact { min-height: 0; justify-content: flex-end; padding: 2rem; }
}

@media (max-width: 480px) {
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .website-scene { height: 325px; }
  .site-layer { width: 88%; height: 225px; }
  .mock-hero { padding-top: 8px; }
  .mock-title { font-size: 0.9rem; }
  .mock-image { min-height: 84px; }
  .mock-columns { display: none; }
  .scene-control { margin-top: 0; }
  .plan { padding: 1.5rem; }
  .hero-assurances { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .price { flex-wrap: wrap; }
}

@media (max-width: 360px) {
  .website-scene { overflow: hidden; }
}

@media (hover: hover) and (pointer: fine) {
  .solution-list article:hover { transform: translateX(8px); }
  .process-list li:hover { transform: translateX(8px); }
  .plan:hover { border-color: var(--rb-blue); box-shadow: 0 18px 42px rgba(0, 0, 0, 0.16); transform: translateY(-6px); }
  .faq-list details:not([open]):hover { background: var(--rb-hover); }
}

@supports (animation-timeline: view()) {
  .process-list li { animation: process-arrive 1ms both; animation-timeline: view(); animation-range: entry 5% cover 28%; }
  @keyframes process-arrive { from { opacity: 0.35; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0); } }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
  .process-list li { animation: none !important; clip-path: none !important; opacity: 1 !important; }
}