:root {
  --black: #01001B;
  --deep: #050126;
  --surface: #0A0433;
  --surface2: #120A47;
  --border: rgba(255,255,255,0.08);
  --white: #FFFFFF;
  --dim: rgba(255,255,255,0.55);
  --dimmer: rgba(255,255,255,0.28);
  --focus: #FF8A00;
  --pizazz: #FF8A00;
  --violet: #7800FF;
  --persimmon: #FF5757;
  --dark-purple: #2f014b;
  --p-r: #ee8ba0;
  --p-o: #f0a877;
  --p-y: #f2d878;
  --p-g: #86dba8;
  --p-c: #7ecbe6;
  --p-b: #8ba3ee;
  --p-v: #bd8fe8;
  --spectrum: linear-gradient(90deg, var(--p-r), var(--p-o), var(--p-y), var(--p-g), var(--p-c), var(--p-b), var(--p-v));
  --prism: linear-gradient(135deg, var(--p-r), var(--p-o), var(--p-y), var(--p-g), var(--p-c), var(--p-b), var(--p-v));
  --prism-h: linear-gradient(90deg, var(--p-r), var(--p-o), var(--p-y), var(--p-g), var(--p-c), var(--p-b), var(--p-v));
  --prism-o: linear-gradient(90deg, var(--pizazz), var(--violet), var(--pizazz));
  --brand-gradient: linear-gradient(135deg, var(--pizazz) 0%, var(--persimmon) 50%, var(--violet) 100%);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Edge legado */
}
html::-webkit-scrollbar { display: none; } /* Chrome, Safari, Edge novo */

body {
  background: var(--black);
  color: var(--white);
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  overflow-x: hidden;
}

/* ── FOCUS STATES (keyboard navigation) ── */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── NOISE OVERLAY ── */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.025;
  pointer-events: none;
  z-index: 1;
}

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 24px 48px;
  display: flex; align-items: center; justify-content: space-between;
  backdrop-filter: blur(20px);
  background: linear-gradient(to bottom, rgba(1,0,27,0.9), transparent);
  border-bottom: 1px solid transparent;
  transition: border-color .4s, background .4s, padding .35s ease;
}
nav.scrolled {
  background: rgba(1,0,27,0.95);
  border-bottom-color: var(--border);
  /* Only the vertical padding shrinks — horizontal stays put so the icon's
     centering math (which assumes nav's side padding, see .nav-logo-icon)
     doesn't need to change between rest and scrolled states. */
  padding-top: 7px;
  padding-bottom: 7px;
}

.nav-logo {
  display: flex; align-items: center; gap: 14px;
  text-decoration: none;
  position: relative;
}
.nav-logo-img {
  height: 75px; width: auto; display: block;
  filter: drop-shadow(0 0 6px rgba(120,0,255,0.55)) drop-shadow(0 0 18px rgba(120,0,255,0.3));
  transition: filter .3s, opacity .4s ease, transform .5s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-logo:hover .nav-logo-img {
  filter: drop-shadow(0 0 8px rgba(120,0,255,0.75)) drop-shadow(0 0 24px rgba(255,138,0,0.4));
}
/* Logo shrink-to-icon: runs at every width, including mobile — the links/
   hamburger part of the header animation stays desktop-only further down
   (mobile already shows its hamburger permanently, nothing to crossfade). */
nav.scrolled .nav-logo-full { opacity: 0; transform: translateX(-8px); }

/* Collapsed icon-only mark: hidden off to the side at rest, slides in to sit
   at the horizontal center of the nav bar once scrolled. Positioned relative
   to .nav-logo (which starts right after nav's own left padding), so the
   "50vw minus that padding minus half the icon's own width" math lands its
   center exactly on the middle of the viewport. Each width tier below
   recomputes this because both nav's padding and the icon's own size change
   per breakpoint. */
.nav-logo-icon {
  position: absolute;
  top: 50%; left: 0;
  height: 52px; width: auto;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  transition: left .6s cubic-bezier(0.16, 1, 0.3, 1), opacity .4s ease, filter .3s;
  filter: drop-shadow(0 0 6px rgba(120,0,255,0.55)) drop-shadow(0 0 18px rgba(120,0,255,0.3));
}
nav.scrolled .nav-logo-icon {
  left: calc(50vw - 45px - 15px);
  opacity: 1;
  pointer-events: auto;
}
.nav-logo:hover .nav-logo-icon {
  filter: drop-shadow(0 0 8px rgba(120,0,255,0.75)) drop-shadow(0 0 24px rgba(255,138,0,0.4));
}
.footer-icon {
  height: 70px; width: auto; display: block; flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(120,0,255,0.55)) drop-shadow(0 0 18px rgba(120,0,255,0.3));
  transition: filter .3s;
}
.nav-logo:hover .footer-icon {
  filter: drop-shadow(0 0 8px rgba(120,0,255,0.75)) drop-shadow(0 0 24px rgba(255,138,0,0.4));
}
.footer-wordmark-wrap { display: flex; flex-direction: column; margin-left: 14px; }
.footer-wordmark {
  font-family: 'Unbounded', sans-serif;
  font-weight: 200; font-size: 22px;
  letter-spacing: 0.14em; line-height: 1;
  background: var(--brand-gradient);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.footer-tagline {
  font-size: 10px; letter-spacing: 0.22em;
  color: var(--dimmer); margin-top: 8px;
}

.nav-links {
  display: flex; gap: 40px; list-style: none;
}
.nav-links a {
  text-decoration: none; color: var(--dim);
  font-size: 13px; letter-spacing: 0.05em;
  transition: color .3s;
  position: relative;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: -4px; left: 0; right: 0;
  height: 1px; background: var(--prism-o); transform: scaleX(0);
  transition: transform .3s;
}
.nav-links a:hover { color: var(--white); }
.nav-links a:hover::after { transform: scaleX(1); }

/* "Falar com a gente" as a menu item: hidden by default (it lives as the
   standalone .nav-cta button instead), shown only once scrolled — the
   dropdown/hamburger context where the standalone button has stepped aside. */
.nav-links-cta-item { display: none; }
nav.scrolled .nav-links-cta-item { display: block; }
.nav-links a.nav-links-cta {
  color: var(--pizazz);
  font-weight: 700;
}
.nav-links a.nav-links-cta::after { display: none; }

/* Scrolled: collapse the inline links into the same dropdown-under-hamburger
   pattern already used on narrow screens, so the shrunken header stays
   uncluttered around the centered icon. Desktop only (≥901px) — below that
   the links are already a dropdown by default, so mobile stays untouched. */
@media (min-width: 901px) {
  nav.scrolled .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--black);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 12px 24px rgba(0,0,0,0.4);
    max-height: 0; overflow: hidden;
    opacity: 0;
    transition: max-height .35s ease, opacity .25s ease;
  }
  nav.scrolled .nav-links.open { max-height: 400px; opacity: 1; }
  nav.scrolled .nav-links li { width: 100%; }
  nav.scrolled .nav-links a {
    display: block; padding: 16px 24px;
    border-top: 1px solid var(--border);
    font-size: 14px;
  }
  nav.scrolled .nav-links a::after { display: none; }
}

.nav-cta {
  padding: 10px 24px; border-radius: 2px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--white); font-size: 13px;
  letter-spacing: 0.08em; text-decoration: none;
  font-family: 'Monteserrat', sans-serif; font-weight: 700;
  text-transform: uppercase;
  transition: border-color .3s, background .3s;
  position: relative; overflow: hidden;
}
/* Scrolled: the standalone button steps aside entirely (it would otherwise
   collide with the icon centered in the shrunken header) — "Falar com a
   gente" moves into the hamburger menu instead, see .nav-links-cta-item. */
nav.scrolled .nav-cta { display: none; }
.nav-cta::before {
  content: ''; position: absolute; inset: 0;
  background: var(--prism-o); opacity: 0;
  transition: opacity .3s;
}
.nav-cta:hover { border-color: transparent; }
.nav-cta:hover::before { opacity: 0.15; }
.nav-cta span { position: relative; }

/* ── NAV TOGGLE (hamburger, mobile only) ── */
.nav-toggle {
  display: none;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: transparent; border: 1px solid rgba(255,255,255,0.15);
  border-radius: 2px; cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block; width: 16px; height: 1px;
  background: var(--white);
  transition: transform .3s, opacity .3s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Desktop-only: taken out of the flex row (position:absolute) so it can fade
   and grow into place when scrolled, instead of just snapping in the way
   display:none/flex would force. Below 901px the mobile rule further down
   keeps it a normal, always-visible in-flow flex item — untouched by this. */
@media (min-width: 901px) {
  .nav-toggle {
    display: flex;
    position: absolute;
    top: 50%; right: 48px;
    transform: translateY(-50%) scale(0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease, transform .45s cubic-bezier(0.16, 1, 0.3, 1);
  }
  nav.scrolled .nav-toggle {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    pointer-events: auto;
  }
}

/* ── HERO ── */
#hero {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  padding: 120px 48px 80px;
}

.hero-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 60% 40%, rgba(120,0,255,0.10) 0%, transparent 70%),
              radial-gradient(ellipse 40% 40% at 80% 20%, rgba(255,138,0,0.05) 0%, transparent 60%),
              radial-gradient(ellipse 60% 80% at 10% 80%, rgba(255,87,87,0.05) 0%, transparent 60%);
}

/* Prism light beams */
.beam {
  position: absolute; pointer-events: none;
  height: 1px; transform-origin: left center;
  opacity: 0;
  animation: beam-appear 2s ease-out forwards;
}
@keyframes beam-appear {
  0% { opacity: 0; width: 0; }
  100% { opacity: 1; width: var(--w); }
}

.hero-inner {
  max-width: 1200px; width: 100%;
  display: grid; grid-template-columns: 1fr;
  position: relative; z-index: 2;
}

.hero-left { min-width: 0; max-width: 680px; }

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 32px;
  opacity: 0; animation: fade-up .8s .2s ease-out forwards;
}
.eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--prism); animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(120,0,255,0.4); }
  50% { box-shadow: 0 0 0 6px rgba(120,0,255,0); }
}
.eyebrow-text {
  font-size: 11px; letter-spacing: 0.2em;
  color: var(--dimmer); text-transform: uppercase;
}

.hero-h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 700; line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  opacity: 0; animation: fade-up .8s .35s ease-out forwards;
}
.hero-h1 .line1 { display: block; color: var(--white); }
.hero-h1 .spectrum {
  display: block;
  background: var(--prism);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  animation: spectrum-shift 4s linear infinite;
}
@keyframes spectrum-shift {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.hero-h1 .prism-o {
  display: block;
  background: var(--prism-o);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  animation: spectrum-shift 4s linear infinite;
}
@keyframes spectrum-shift {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.hero-sub {
  font-size: 16px; line-height: 1.7;
  color: var(--dim); max-width: 440px;
  margin-bottom: 48px;
  opacity: 0; animation: fade-up .8s .5s ease-out forwards;
}

.hero-actions {
  display: flex; gap: 16px; flex-wrap: wrap;
  opacity: 0; animation: fade-up .8s .65s ease-out forwards;
}

.btn-primary {
  padding: 14px 32px; text-decoration: none;
  font-family: 'Montserrat', sans-serif; font-size: 12px;
  font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  position: relative; overflow: hidden;
  border-radius: 2px;
}

.btn-plans {
  padding: 14px 32px; text-decoration: none;
  font-family: 'Montserrat', sans-serif; font-size: 12px;
  font-weight: 700; letter-spacing: 0.1em;
  color: var(--black);
  position: relative; overflow: hidden;
  border-radius: 2px;
}

.btn-plans::before {
  content: ''; position: absolute; inset: 0;
  background: var(--prism-o); background-size: 200% 100%;
  animation: btn-glow-shift 3s linear infinite;
}
@keyframes btn-glow-shift {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.btn-plans span { position: relative; }
.btn-plans:hover { transform: translateY(-1px); }

.btn-package {
  padding: 14px 32px; text-decoration: none;
  font-family: 'Bebas Neue', sans-serif; font-size: 12px;
  font-weight: 400; letter-spacing: 0.1em;
  color: var(--white);
  position: relative; overflow: hidden;
  border-radius: 2px;
}

.btn-primary::before {
  content: ''; position: absolute; inset: 0;
  background: var(--prism-o); background-size: 200% 100%;
  animation: btn-glow-shift 3s linear infinite;
}
@keyframes btn-glow-shift {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.btn-primary span { position: relative; }
.btn-primary:hover { transform: translateY(-1px); }

.btn-package::before {
  content: ''; position: absolute; inset: 0;
  background: var(--prism-h); background-size: 200% 100%;
  animation: spectrum-shift 3s linear infinite;
}
.btn-package span { position: relative; }
.btn-package:hover { transform: translateY(-1px); }

.btn-secondary {
  padding: 14px 32px; text-decoration: none;
  font-family: 'Montserrat', sans-serif; font-size: 12px;
  font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 2px;
  transition: border-color .3s, background .3s;
}
.btn-secondary:hover {
  border-color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.03);
}

@keyframes fade-in { to { opacity: 1; } }
@keyframes fade-up { to { opacity: 1; transform: translateY(0); } }

.hero-left > * { transform: translateY(20px); }

/* ── Indicador Scroll ── */
.scroll-hint {
  position: absolute; bottom: 40px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  opacity: 0; animation: fade-in 1s 1.5s ease-out forwards;
}
.scroll-hint span {
  font-size: 10px; letter-spacing: 0.2em;
  color: var(--dimmer); text-transform: uppercase;
}
.scroll-line {
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.3), transparent);
  animation: scroll-line 2s ease-in-out infinite;
}
@keyframes scroll-line {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ── STATS STRIP ── */
.stats-strip {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 32px 48px;
  display: flex; align-items: center; justify-content: center;
  gap: 0; overflow: hidden;
}
.stat-item {
  flex: 1; text-align: center; padding: 0 40px;
  position: relative;
}
.stat-item + .stat-item::before {
  content: ''; position: absolute; left: 0; top: 10%; bottom: 10%;
  width: 1px; background: var(--border);
}
.stat-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 36px; font-weight: 700;
  background: var(--brand-gradient);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  display: block; margin-bottom: 4px;
}
.stat-label {
  font-size: 11px; letter-spacing: 0.15em;
  color: var(--dimmer); text-transform: uppercase;
}

/* ── SECTION COMMON ── */
section { position: relative; }
.container {
  max-width: 1200px; margin: 0 auto;
  padding: 0 48px;
}
.section-pad { padding: 120px 48px; max-width: 1200px; margin: 0 auto; }

.label-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 100px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  font-size: 10px; letter-spacing: 0.2em;
  color: var(--dimmer); text-transform: uppercase;
  margin-bottom: 24px;
}
.label-tag-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--prism);
}

.section-h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 600; line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

.pkg-title {
  white-space: nowrap;
  background: linear-gradient(90deg, var(--violet), var(--persimmon), var(--pizazz));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
@media (max-width: 480px) {
  .pkg-title { white-space: normal; }
}
.section-sub {
  font-size: 16px; line-height: 1.7;
  color: var(--dim); max-width: 560px;
}

/* ── SERVICES ── */
#services { background: var(--deep); }

.services-header {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 60px; align-items: end;
  margin-bottom: 72px;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.service-card {
  background: var(--surface);
  padding: 40px 36px;
  position: relative; overflow: hidden;
  transition: background .3s;
  cursor: default;
}
.service-card::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: var(--prism-o);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s cubic-bezier(0.22,1,0.36,1);
}
.service-card:hover { background: var(--surface2); }
.service-card:hover::before { transform: scaleX(1); }

.service-icon {
  width: 48px; height: 48px; margin-bottom: 28px;
  position: relative;
}
.service-icon svg { width: 100%; height: 100%; }

.service-num {
  position: absolute; top: 36px; right: 36px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 11px; color: var(--dimmer);
  letter-spacing: 0.1em;
}

.service-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 25px; font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.service-desc {
  font-size: 13px; line-height: 1.7;
  color: var(--dim);
}

/* ── PROCESS ── */
#process { background: var(--black); }

.process-timeline {
  position: relative;
  display: flex; flex-direction: column; gap: 0;
  margin-top: 72px;
}
.process-timeline::before {
  content: ''; position: absolute;
  left: 24px; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(to bottom, transparent, var(--border) 10%, var(--border) 90%, transparent);
}

.process-step {
  display: grid; grid-template-columns: 48px 1fr;
  gap: 40px; padding: 48px 0;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.process-step:last-child { border-bottom: none; }

.step-node {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bebas Neue', sans-serif; font-size: 11px;
  color: var(--dim);
  position: relative; z-index: 1;
  transition: border-color .3s, background .3s;
  flex-shrink: 0;
}
.process-step:hover .step-node {
  border-color: rgba(255,255,255,0.3);
  background: var(--surface2);
}

.step-content { padding-top: 8px; min-width: 0; }
.step-label {
  font-size: 10px; letter-spacing: 0.2em;
  color: var(--dimmer); text-transform: uppercase;
  margin-bottom: 8px;
}
.step-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px; font-weight: 700;
  margin-bottom: 12px;
}
.step-desc {
  font-size: 14px; line-height: 1.8;
  color: var(--dim); max-width: 520px;
}

/* ── PACKAGES ── */
#packages { background: var(--deep); }

/* Cards sit in a fixed-height "row" and are individually absolute-positioned into
   3 equal columns (left/center/right, matching the old grid's math). This lets the
   active card grow sideways in place — the same box, not a new one — while its
   height never changes. On mobile they fall back to a normal stacked column. */
.packages-grid {
  position: relative;
  margin-top: 64px;
  height: 442px;
}

.pkg-card {
  position: absolute;
  top: 0;
  height: 100%;
  width: calc((100% - 48px) / 3);
  display: flex; flex-direction: column;
  border: 2px solid var(--border);
  border-radius: 32px;
  overflow: hidden;
  background: var(--surface);
  padding: 36px 32px 40px;
  text-align: center;
  cursor: pointer;
  z-index: 1;
}
/* Os cards também carregam .reveal (a entrada ao rolar a página). Como
   `.reveal` vem depois neste arquivo e tem a mesma especificidade de
   `.pkg-card`, a transição dele substituía a do card por completo — sobrava
   só `opacity, transform`, sem `left`/`width`. Resultado: abrir animava
   (`.pkg-card.expanded` tem especificidade maior e vencia), mas fechar
   voltava seco. Este seletor de duas classes vence o `.reveal` e declara as
   duas coisas juntas: o redimensionamento do card e a entrada do reveal. */
.pkg-card,
.pkg-card.reveal {
  transition: left .6s cubic-bezier(0.16, 1, 0.3, 1),
              width .6s cubic-bezier(0.16, 1, 0.3, 1),
              border-color .3s ease,
              opacity .7s ease-out,
              transform .7s ease-out,
              z-index 0s .6s;
}
/* Desktop-only 3-column positioning. On mobile .pkg-card becomes
   position:relative (see the ≤900px block below) and must NOT carry a `left`
   offset — these selectors have higher specificity than that plain
   `.pkg-card` override (attribute selector vs. class alone), so without this
   guard they kept shoving the Standard/Pro cards sideways off the mobile
   viewport even while stacked. */
@media (min-width: 901px) {
  .pkg-card[data-plan="basic"] { left: 0; }
  .pkg-card[data-plan="standard"] { left: calc((100% - 48px) / 3 + 24px); }
  .pkg-card[data-plan="pro"] { left: calc(((100% - 48px) / 3) * 2 + 48px); }
}

.pkg-card.pkg-persimmon { border-color: var(--persimmon); }
.pkg-card.pkg-violet { border-color: var(--violet); }

.pkg-card.expanded {
  left: 0;
  width: 100%;
  z-index: 20;
  transition: left .6s cubic-bezier(0.16, 1, 0.3, 1), width .6s cubic-bezier(0.16, 1, 0.3, 1),
              border-color .3s ease, opacity .3s ease, z-index 0s;
}
.pkg-card.dimmed { opacity: 0; pointer-events: none; }

/* ── TROCA DIRETA entre planos (o mouse sai de um card e entra no vizinho) ──
   Os dois cards terminam no mesmo lugar (largura total), então animar o
   encolhimento de um junto com a expansão do outro sempre gera disputa pela
   mesma área — foi o que causava o atropelo. A solução é a caixa NÃO se mexer:
   ela já está aberta na posição final, então o card que entra assume esse mesmo
   tamanho sem animar e o que sai recolhe instantaneamente, escondido atrás.
   Visualmente a caixa fica parada e só o conteúdo e a cor da borda trocam.
   Estas regras precisam vir depois de `.pkg-card.reveal` e `.pkg-card.expanded`:
   as três têm a mesma especificidade, então quem estiver por último vence. */
.pkg-card.switching {
  z-index: 2;  /* o que sai fica atrás do que entra (20) */
}
.pkg-card.snap {
  /* Só o tamanho é instantâneo (left/width ficam de fora da lista). A cor da
     borda e a opacidade continuam suaves, senão a troca de destaque entre os
     planos ficaria seca. */
  transition: border-color .25s ease, opacity .2s ease;
}

.pkg-card.expanded .pkg-ribbon { opacity: 0; transition: opacity .2s ease; }

.pkg-ribbon {
  /* Geometria da faixa de canto, sem números mágicos:
     - o card corta a faixa nas bordas do topo e da direita, então o trecho
       visível mede (distância_topo + distância_direita) × √2. Com 52px de
       cada borda dá ~147px de janela — folga confortável para o texto mais
       longo ("Ecossistema completo", ~102px);
     - translate(50%,-50%) é auto-referente (usa o tamanho da própria faixa),
       então o centro dela cai exatamente nesse ponto qualquer que seja o
       texto — não precisa recalcular largura por rótulo;
     - min-width garante que rótulos curtos ("Tração") também alcancem as
       duas bordas, ficando rentes ao card como o texto longo. */
  position: absolute; top: 52px; right: 52px;
  width: max-content;
  min-width: 180px;
  padding: 7px 26px;
  transform: translate(50%, -50%) rotate(45deg);
  transform-origin: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 12px; letter-spacing: 0.05em;
  color: var(--white); text-align: center;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  z-index: 1;
}
.pkg-persimmon .pkg-ribbon { background: var(--persimmon); }
.pkg-violet .pkg-ribbon { background: linear-gradient(90deg, var(--violet), #4466ff); }

.pkg-name-pill {
  display: inline-block; padding: 10px 30px;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--violet), var(--pizazz));
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px; letter-spacing: 0.05em;
  color: var(--dark-purple);
  margin-bottom: 28px;
  position: relative;
}

.pkg-divider {
  height: 2px; width: 70%; margin: 0 auto 28px;
  background: linear-gradient(90deg, transparent, var(--pizazz), transparent);
  position: relative;
}

/* .pkg-summary and .pkg-detail are both display:none while the card is actively
   resizing — swapping fluid, wrapping text into a box whose width is mid-animation
   makes it visibly rewrap/jitter every frame. Whichever one applies only turns on
   once the resize has settled (.settled-summary / .settled-detail), set by JS. */
.pkg-summary {
  display: none;
  list-style: none;
  flex-direction: column; gap: 18px;
  justify-content: center;
  flex: 1;
  opacity: 0;
  /* Sai rápido, entra suave: ao remover a classe o alvo é esta regra (.18s);
     ao adicioná-la o alvo é a regra abaixo (.3s). Sumir depressa mantém o
     texto fora da tela enquanto o card ainda está mudando de largura. */
  transition: opacity .18s ease;
}
.pkg-card.settled-summary .pkg-summary { display: flex; }
.pkg-card.summary-in .pkg-summary {
  opacity: 1;
  transition: opacity .3s ease;
}
.pkg-summary li {
  font-size: 14px; line-height: 1.5;
  color: var(--white);
}

.pkg-note {
  font-size: 11px; color: var(--dimmer);
  margin-top: 32px; line-height: 1.6;
}

/* ── DETAIL CONTENT: shown once the card has finished expanding sideways
   to the full 3-plan width. Laid out as a single wide row since height is fixed. ── */
.pkg-detail {
  display: none;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  gap: 20px;
  opacity: 0;
  /* Mesma ideia do resumo: saída curta (.18s) pra o texto largo não ficar
     visível requebrando linha enquanto o card encolhe; entrada suave (.3s). */
  transition: opacity .18s ease;
}
.pkg-card.settled-detail .pkg-detail { display: flex; }
.pkg-card.detail-in .pkg-detail {
  opacity: 1;
  transition: opacity .3s ease;
}

/* ┌──────────────────────────────────────────────────────────────────┐
   │  AJUSTES DO CONTEÚDO DENTRO DO PLANO ABERTO                      │
   │  É aqui que se mexe em fonte, tamanho e número de colunas.       │
   │  (fontes disponíveis hoje: 'Bebas Neue', 'Montserrat',           │
   │   'Unbounded' — pra usar outra, veja a observação abaixo)        │
   └──────────────────────────────────────────────────────────────────┘ */
.pkg-detail {
  --pkg-colunas: 3;                              /* quantas colunas lado a lado */
  --pkg-titulo-fonte: 'Montserrat', sans-serif;  /* fonte do título do item */
  --pkg-titulo-tamanho: 12px;
  --pkg-texto-fonte: 'Montserrat', sans-serif;   /* fonte da descrição */
  --pkg-texto-tamanho: 11px;
}

/* Os itens preenchem uma coluna de cima pra baixo e só então passam pra
   próxima — é o que faz caber mais coisa do que enfileirar tudo na horizontal. */
.pkg-detail-list {
  list-style: none;
  columns: var(--pkg-colunas);
  column-gap: 40px;
  width: 100%;
  text-align: left;
}
.pkg-detail-list li {
  padding-left: 18px;
  position: relative;
  margin-bottom: 16px;
  /* impede que um item seja partido no meio entre duas colunas */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}
.pkg-detail-list li:last-child { margin-bottom: 0; }
.pkg-detail-list li::before {
  content: ''; position: absolute; left: 0; top: 6px;
  width: 7px; height: 7px; border-radius: 50%;
  background: linear-gradient(90deg, var(--violet), var(--pizazz));
}
.pkg-detail-item-title {
  display: block;
  font-family: var(--pkg-titulo-fonte);
  font-size: var(--pkg-titulo-tamanho); letter-spacing: 0.02em;
  color: var(--white); margin-bottom: 4px;
}
.pkg-detail-list p {
  font-family: var(--pkg-texto-fonte);
  font-size: var(--pkg-texto-tamanho); line-height: 1.5;
  color: var(--dim);
}
.pkg-detail-cta { width: 100%; max-width: 300px; margin: 0 auto; display: block; text-align: center; }

/* ── TECH STACK ── */
#tech {
  background: var(--black);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  padding: 64px 0;
}
.ticker-wrap { overflow: hidden; }
.ticker {
  display: flex; gap: 64px;
  animation: ticker 25s linear infinite;
  width: max-content;
}
.ticker-item {
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; letter-spacing: 0.05em;
  color: var(--dimmer); white-space: nowrap;
  transition: color .3s;
}
.ticker-item:hover { color: var(--white); }
.ticker-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--border); }
@keyframes ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── WHY PRISMOTION ── */
#why { background: var(--deep); }

.why-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: center;
  margin-top: 72px;
}
.why-left { }
.why-right {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.why-point {
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  transition: border-color .3s, background .3s;
}
.why-point:hover {
  border-color: rgba(255,255,255,0.12);
  background: var(--surface2);
}
.why-point.tall { grid-row: span 2; display: flex; flex-direction: column; }
.why-icon { font-size: 28px; margin-bottom: 16px; }
.why-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px; font-weight: 700;
  margin-bottom: 8px; line-height: 1.3;
}
.why-desc { font-size: 12px; line-height: 1.7; color: var(--dim); }

/* ── FAQ ── */
#faq { background: var(--black); }

.faq-list {
  display: flex; flex-direction: column; gap: 12px;
  margin-top: 56px; max-width: 760px;
}

.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color .3s, background .3s;
}
.faq-item:hover { border-color: rgba(255,255,255,0.12); background: var(--surface2); }

.faq-q {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 22px 28px;
  cursor: pointer;
  list-style: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px; font-weight: 700;
  color: var(--white);
}
.faq-q::-webkit-details-marker { display: none; }

.faq-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--dimmer); transition: transform .3s, color .3s; }
.faq-item:hover .faq-icon { color: var(--focus); }
.faq-item[open] .faq-icon { transform: rotate(45deg); color: var(--focus); }

.faq-a {
  padding: 0 28px 22px;
  font-size: 13px; line-height: 1.7;
  color: var(--dim);
  max-width: 640px;
}

/* ── CTA ── */
#cta {
  background: var(--black);
  padding: 160px 48px;
  text-align: center;
  position: relative; overflow: hidden;
}
#cta::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 60% at 50% 50%,
    rgba(120,0,255,0.10) 0%, transparent 70%);
}
.cta-h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 700; line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 24px; position: relative;
}
.cta-sub {
  font-size: 16px; color: var(--dim);
  max-width: 480px; margin: 0 auto 48px;
  line-height: 1.7; position: relative;
}
.cta-actions {
  display: flex; gap: 16px;
  justify-content: center; position: relative;
}

/* ── FOOTER ── */
footer {
  background: var(--deep);
  border-top: 1px solid var(--border);
  padding: 64px 48px 40px;
}
.footer-top {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 60px; margin-bottom: 64px;
}
.footer-brand p {
  font-size: 13px; line-height: 1.7;
  color: var(--dim); margin-top: 16px; max-width: 280px;
}
.footer-col h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--dimmer); margin-bottom: 20px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer-col a {
  font-size: 13px; color: var(--dim);
  text-decoration: none; transition: color .2s;
}
.footer-col a:hover { color: var(--white); }

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 32px;
  display: flex; justify-content: space-between; align-items: center;
}
.footer-copy { font-size: 12px; color: var(--dimmer); }
.footer-prism {
  font-size: 11px; letter-spacing: 0.1em;
  background: var(--prism-h);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  font-family: 'Bebas Neue', sans-serif;
}

/* ── ANIMATIONS (scroll reveal) ── */
.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s ease-out, transform .7s ease-out;
}
.reveal.visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  nav { padding: 20px 24px; gap: 12px; }
  nav.scrolled { padding-top: 7px; padding-bottom: 7px; }
  nav.scrolled .nav-logo-icon { left: calc(50vw - 24px - 18px); }
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--black);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 12px 24px rgba(0,0,0,0.4);
    max-height: 0; overflow: hidden;
    transition: max-height .35s ease;
  }
  .nav-links.open { max-height: 400px; }
  .nav-links li { width: 100%; }
  .nav-links a {
    display: block; padding: 16px 24px;
    border-top: 1px solid var(--border);
    font-size: 14px;
  }
  .nav-links a::after { display: none; }
  .services-header { grid-template-columns: 1fr; gap: 24px; }
  .services-grid { grid-template-columns: 1fr; }
  /* Mobile: cards stack normally instead of expanding sideways (no room for that). */
  .packages-grid { height: auto; }
  .pkg-card {
    /* relative (not static) so .pkg-ribbon — position:absolute — still anchors
       to its own card instead of escaping to .packages-grid and drifting up
       to whichever card happens to be first in the stack. */
    position: relative;
    width: 100%;
    height: auto;
    min-height: 400px;
    margin-bottom: 24px;
  }
  .pkg-card:last-child { margin-bottom: 0; }
  .pkg-card.dimmed { opacity: 1; pointer-events: auto; }
  .pkg-detail { --pkg-colunas: 1; }  /* no celular não há largura pra colunas */
  .why-grid { grid-template-columns: 1fr; }
  .why-right { grid-template-columns: 1fr; }
  .why-point.tall { grid-row: auto; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
  .section-pad { padding: 80px 24px; }
  #hero { padding: 100px 24px 60px; }
  #cta { padding: 100px 24px; }
  .container { padding: 0 24px; }
  footer { padding: 56px 24px 32px; }
  .process-step { gap: 24px; }
  .stats-strip { flex-wrap: wrap; padding: 32px 24px; gap: 32px; }
  .stat-item { flex: none; width: 45%; }
  .stat-item::before { display: none; }
}

@media (max-width: 480px) {
  nav { padding: 16px; }
  nav.scrolled { padding-top: 6px; padding-bottom: 6px; }
  .nav-logo-img { height: 58px; }
  .nav-logo-icon { height: 42px; }
  nav.scrolled .nav-logo-icon { left: calc(50vw - 16px - 14px); }
  .nav-cta { padding: 8px 14px; font-size: 11px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions a { text-align: center; }
  .cta-actions { flex-direction: column; align-items: stretch; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .scroll-hint { display: none; }
}

/* Telas baixas (pouca altura): esconde a dica de "scroll" pra não
   sobrepor os botões do hero quando o texto quebra em várias linhas */
@media (max-height: 700px) {
  .scroll-hint { display: none; }
}

@media (max-width: 340px) {
  nav { gap: 8px; }
  .nav-logo-img { height: 30px; }
  .nav-logo-icon { height: 34px; }
  nav.scrolled .nav-logo-icon { left: calc(50vw - 16px - 11px); }
  .nav-cta { padding: 8px 10px; max-width: 108px; text-align: center; line-height: 1.3; }
  #cta { padding: 80px 16px; }
  .section-pad { padding: 64px 16px; }
  #hero { padding: 90px 16px 50px; }
  footer { padding: 48px 16px 24px; }
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}