/* ==========================================================================
   FLOWSA — shared stylesheet
   Flat, square, high-contrast. No blobs, no glass, no gradients, no glow.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 66px; }

:root {
  /* Backgrounds — two clearly distinct tones so sections read apart */
  --bg:        #FFFFFF;
  --bg-alt:    #E4E7EC;
  --surface:   #FFFFFF;

  /* Text */
  --ink:       #14161C;
  --muted:     #53585F;
  --muted2:    #767B84;

  /* Borders */
  --border:    #D3D7DE;
  --border2:   #B9BFC9;

  /* Single flat accent (brand blue) — lighter tone, matches the logo */
  --accent:        #4C7EF3;
  --accent-dark:   #2554EB;
  --accent-darker: #1B3FBE;
  --accent-tint:   #EAF0FE;

  /* Secondary flat tone — a real second color, not a gradient partner for --accent */
  --slate:      #7C3AED;
  --slate-tint: #EDE4FC;

  /* Status flats — kept dark enough to stay readable as text, bolder as fills */
  --success:      #128A44;
  --success-tint: #D3F5DE;
  --amber:        #C2650A;
  --amber-tint:   #FCE7C3;
  --whatsapp:     #1F9E52;

  /* Corner radii — rounded where it reads soft/premium, square where it reads structural */
  --r-pill:  9999px;
  --r-btn:   12px;
  --r-input: 10px;
  --r-card:  18px;
  --r-lg:    24px;

  --ease: cubic-bezier(.22,1,.36,1);
}

body {
  background-color: var(--bg);
  /* Graph-paper / drafting-grid backdrop — fine squares with a bolder
     line every 5th, like an architect's grid pad or a math notebook.
     Tinted with the accent hue instead of flat gray so it reads as a
     deliberate pattern, not a rendering artifact. Scrolls with the
     page (real paper doesn't stay fixed while you scroll past it). */
  background-image:
    linear-gradient(rgba(76,126,243,.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76,126,243,.11) 1px, transparent 1px),
    linear-gradient(rgba(76,126,243,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76,126,243,.05) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  color: var(--ink);
  font-family: 'Poppins', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}
/* Fine paper-grain texture — tactile, not glossy. Fixed so it never scrolls or tiles visibly.
   No mix-blend-mode: a fixed element blending against the scrolling grid behind it forces the
   browser to recomposite every scroll frame, which is what was making the page feel janky. Plain
   alpha overlay at this low opacity reads the same but is compositor-only (no per-frame repaint). */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  opacity: .05;
  /* filter region pinned to x/y/width/height="0%/0%/100%/100%" so it matches the tile's own
     bounds exactly — without this, stitchTiles stitches against the filter's default (padded)
     region instead of the actual 180x180 tile, leaving a visible seam/streak at each tile edge. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0%25' y='0%25' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Vignette — fades the grid pattern to the plain background color on
   every side of the viewport, so the pattern reads as a soft center
   feature rather than edge-to-edge texture. Fixed so it stays put
   while the grid underneath scrolls past it.
   The radial alone under-fades the left/right edges on wide screens
   (an ellipse sized to reach the corners stays lighter along the
   flat sides), so straight left/right/top/bottom fades are layered
   on top of it to guarantee every edge — sides included — reaches 0
   opacity, not just the corners. */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse at center, transparent 40%, var(--bg) 92%),
    linear-gradient(to right, var(--bg) 0%, var(--bg) 8%, transparent 40%, transparent 60%, var(--bg) 92%, var(--bg) 100%),
    linear-gradient(to bottom, var(--bg), transparent 18%, transparent 82%, var(--bg));
}
body > * { position: relative; z-index: 1; }
::selection { background: var(--accent); color: #FFFFFF; }
a { text-decoration: none; color: inherit; }
/* Buttons/links shouldn't trigger the mobile double-tap-to-zoom gesture. */
a, button { touch-action: manipulation; }

/* ─── FADE IN ────────────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(6px);
  transition: opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease);
}
.fade-up.visible { opacity: 1; transform: none; filter: blur(0); }
@media (max-width: 640px) {
  /* Blur-filter animation is expensive on mobile GPUs and reads as
     stutter/bounce — drop it there, keep a quicker, cheaper fade. */
  .fade-up { filter: none; transform: translateY(10px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
  .fade-up.visible { filter: none; }
}

/* ─── SCROLL PROGRESS BAR ────────────────────────── */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  background: var(--accent); z-index: 300;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: 0 0;
  will-change: transform;
}

/* ─── LAYOUT ─────────────────────────────────────── */
.wrap { max-width: 74rem; margin: 0 auto; padding: 0 2rem; }
/* Both transparent — sections used to alternate solid white/gray
   fills here, which chopped the page into flat blocks with a hard
   seam between them. Letting the body's grid pattern show through
   everywhere instead keeps the background consistent top to bottom. */
.band, .band-alt { background: transparent; }

/* ─── NAV ────────────────────────────────────────── */
nav {
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
@media (max-width: 900px) { nav { display: none; } }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-link {
  padding: 9px 16px;
  font-size: 13.5px; font-weight: 500; color: var(--muted);
  border-bottom: 2px solid transparent;
  transition: color .09s, border-color .09s;
}
.nav-link:hover { color: var(--ink); }
.nav-link.active { color: var(--accent); border-color: var(--accent); font-weight: 700; }
@media (max-width: 900px) { .nav-links { display: none; } }
.nav-inner {
  max-width: 74rem; margin: 0 auto; padding: 0 2rem;
  height: 62px; display: flex; align-items: center; justify-content: space-between;
}
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif; font-weight: 900; font-size: 17px;
  color: var(--ink); letter-spacing: -.02em;
}
.nav-logo-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

.login-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--r-btn);
  border: 1px solid var(--ink);
  padding: 8px 20px;
  background: var(--ink); color: #FFFFFF;
  font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600;
  cursor: pointer; outline: none;
  transition: background .09s, border-color .09s;
}
.login-btn:hover { background: var(--accent); border-color: var(--accent); }

/* ─── DECORATIVE SHAPES ───────────────────────────
   Crisp, unfilled, no blur — geometric depth without sliding back
   into the soft blob/gradient-glow look. Used sparingly, one ring +
   one dot-grid patch per hero-like section. */

/* ─── PAGE HEADER (subpages) ─────────────────────── */
.page-header {
  padding: 3.25rem 2rem 2.5rem;
  max-width: 74rem; margin: 0 auto;
  border-bottom: 1px solid var(--border);
  position: relative; overflow: hidden;
}
.page-header .section-h2 { margin-bottom: .6rem; }
.page-header .section-sub { max-width: 560px; }
.page-header::before {
  content: ''; position: absolute; top: -60px; right: -60px;
  width: 220px; height: 220px; border-radius: 50%;
  border: 1.5px solid var(--accent); opacity: .1; pointer-events: none;
}
/* Pull the first section right under a page title closer — the header's own
   bottom padding + border already separates it, so the section doesn't need
   its full inter-section top padding on top of that. */
.page-header + section { padding-top: 2.5rem; }

/* ─── HERO ───────────────────────────────────────── */
.hero { padding: 3.5rem 2rem 2.5rem; max-width: 74rem; margin: 0 auto; text-align: left; position: relative; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; top: -110px; right: -90px;
  width: 420px; height: 420px; border-radius: 50%;
  border: 1.5px solid var(--accent); opacity: .12; pointer-events: none;
}
.hero::after {
  content: ''; position: absolute; top: 60px; right: 40px;
  width: 140px; height: 140px;
  background-image: radial-gradient(var(--accent) 1.2px, transparent 1.2px);
  background-size: 20px 20px;
  opacity: .16; pointer-events: none;
}
@media (max-width: 900px) { .hero::before, .hero::after, .page-header::before { display: none; } }

.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--accent);
  background: var(--accent-tint);
  font-size: 12px; font-weight: 600; color: var(--accent-dark);
  margin-bottom: 2rem; letter-spacing: .02em;
}
.hero-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.hero h1 {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif; font-weight: 900;
  font-size: clamp(2.6rem, 6.5vw, 4.3rem);
  line-height: 1.05; letter-spacing: -.035em;
  margin-bottom: 1rem;
}
.hero h1 .accent-green { color: var(--accent); }

.hero-sub {
  font-size: clamp(16px, 2.2vw, 18px);
  color: var(--muted); line-height: 1.65;
  max-width: none; margin-bottom: 1.75rem;
}

.hero-social-proof {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--r-pill); padding: 8px 18px 8px 15px;
  margin-bottom: 1.25rem;
  cursor: default;
}
.hero-stars { color: var(--amber); font-size: 15px; letter-spacing: 2px; }
@media (max-width: 640px) {
  .hero-stars { font-size: 0; }
  .hero-stars::before { content: '★'; font-size: 14px; color: var(--amber); letter-spacing: 0; }
  .hero-social-proof { padding: 9px 16px; border-radius: var(--r-pill); gap: 8px; }
  .hero-social-text { font-size: 12px; }
}
.hero-social-text { font-size: 13px; color: var(--muted); }
.hero-social-text strong { color: var(--ink); }

.hero-ctas { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; justify-content: flex-start; }

.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px; border-radius: var(--r-btn);
  background: var(--accent);
  color: #FFFFFF;
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 14px;
  border: 1px solid var(--accent);
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
  transition: background .09s, border-color .09s, transform .09s var(--ease), box-shadow .09s var(--ease);
}
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--ink); }
.btn-primary:active { background: var(--accent-dark); transform: translate(0,0); box-shadow: 1px 1px 0 var(--ink); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 24px; border-radius: var(--r-btn);
  border: 1px solid var(--ink);
  background: var(--surface); color: var(--ink);
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14px;
  cursor: pointer;
  transition: border-color .09s, background .09s, color .09s, transform .09s var(--ease), box-shadow .09s var(--ease);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--border2); }

.btn-whatsapp {
  border-color: var(--whatsapp);
  background: var(--surface);
  color: var(--ink);
}
.btn-whatsapp:hover { background: var(--whatsapp); border-color: var(--whatsapp); color: #FFFFFF; }

/* ─── VSL LABEL ─────────────────────────────────── */
.vsl-label-wrap {
  display: inline-flex; align-items: center; gap: 9px;
  margin-bottom: .5rem;
  font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.vsl-label-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--accent); }
.vsl-label-text { line-height: 1.45; }

/* ─── VSL / VIDEO BLOCK ──────────────────────────── */
.vsl-block { max-width: 900px; margin: 0 auto; }
.vsl-wrap {
  width: 100%;
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--ink);
  background: var(--ink);
  position: relative;
  aspect-ratio: 16 / 9;
}
.vsl-overlay {
  position: absolute; inset: 0; border-radius: inherit;
  cursor: pointer; overflow: hidden;
  transition: opacity .35s ease;
}
.vsl-overlay.hidden { opacity: 0; pointer-events: none; }
.vsl-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }
.vsl-blur {
  position: absolute; inset: 0;
  backdrop-filter: blur(9px) brightness(.68); -webkit-backdrop-filter: blur(9px) brightness(.68);
  background: rgba(6,8,14,.28);
}
.vsl-play-btn { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.vsl-play {
  position: relative;
  width: 76px; height: 76px; border-radius: 50%;
  background: var(--accent);
  border: 2px solid rgba(255,255,255,.9);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform .25s var(--ease), background .15s, box-shadow .25s var(--ease);
  flex-shrink: 0;
  box-shadow: 0 10px 30px rgba(27,63,190,.5);
}
.vsl-play::before {
  content: '';
  position: absolute; inset: -16px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.55);
  animation: vslPulse 2.6s ease-out infinite;
  pointer-events: none;
}
.vsl-overlay:hover .vsl-play {
  background: var(--accent-dark);
  transform: scale(1.08);
  box-shadow: 0 12px 36px rgba(27,63,190,.6);
}
.vsl-play svg { position: relative; z-index: 1; margin-left: 5px; }
@keyframes vslPulse {
  0%   { transform: scale(.85); opacity: .6; }
  70%  { transform: scale(1.4); opacity: 0; }
  100% { opacity: 0; }
}
@media (max-width: 600px) {
  .vsl-play { width: 56px; height: 56px; }
  .vsl-play::before { inset: -12px; }
  .vsl-play svg { width: 20px; height: 20px; margin-left: 3px; }
}

/* ─── SECTION HEADINGS ───────────────────────────── */
.section-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent-dark);
  margin-bottom: 1.1rem;
}
.section-tag::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.section-h2 {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif; font-weight: 900;
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  letter-spacing: -.03em; line-height: 1.12;
  margin-bottom: .9rem;
  color: var(--ink);
}
.section-sub { font-size: 15.5px; color: var(--muted); line-height: 1.7; max-width: 460px; }

/* ─── FEATURES ───────────────────────────────────── */
.features-section { padding: 5.5rem 0; }
.features-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem;
  margin-top: 3rem;
}
@media (max-width: 640px) {
  .features-grid {
    display: flex; grid-template-columns: unset;
    gap: .9rem;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: -1.5rem; margin-right: -1.5rem;
    padding: 0;
  }
  .features-grid::before, .features-grid::after { content: ''; flex: 0 0 10%; }
  .features-grid::-webkit-scrollbar { display: none; }
  .features-grid .feat-card { flex: 0 0 80%; scroll-snap-align: center; }
}

.feat-card {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--r-card); padding: 2.25rem;
  transition: border-color .12s, transform .12s var(--ease), box-shadow .12s var(--ease);
  display: flex; flex-direction: column;
  position: relative;
}
.feat-card:hover { border-color: var(--accent); transform: translate(-3px,-3px); box-shadow: 5px 5px 0 var(--accent-tint); }
.feat-card.purple:hover { border-color: var(--slate); box-shadow: 5px 5px 0 var(--slate-tint); }
.feat-card.amber:hover { border-color: var(--amber); box-shadow: 5px 5px 0 var(--amber-tint); }

.feat-icon {
  width: 48px; height: 48px; border-radius: var(--r-input);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.4rem; flex-shrink: 0;
}
.feat-icon.green  { background: var(--accent); border: 1px solid var(--accent); }
.feat-icon.purple { background: var(--slate);  border: 1px solid var(--slate); }
.feat-icon.amber  { background: var(--surface); border: 1px solid var(--amber); }

.feat-title {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif; font-weight: 900;
  font-size: 1.13rem; line-height: 1.3; margin-bottom: .7rem;
  letter-spacing: -.018em;
  color: var(--ink);
}
.feat-text { font-size: 14.5px; color: var(--muted); line-height: 1.7; flex: 1; margin-bottom: 1.5rem; }
.feat-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.feat-tag { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill); }
.feat-tag.green  { background: var(--accent-tint); color: var(--accent-dark); border: 1px solid var(--accent); }
.feat-tag.purple { background: var(--slate-tint);  color: var(--slate);       border: 1px solid var(--slate); }
.feat-tag.amber  { background: var(--amber-tint);  color: var(--amber);       border: 1px solid var(--amber); }

.feat-card.wide { grid-column: 1 / -1; flex-direction: row; align-items: flex-start; gap: 2rem; }
@media (max-width: 640px) { .feat-card.wide { flex-direction: column; } }

/* ─── HOW IT WORKS ───────────────────────────────── */
.hiw-section { padding: 5.5rem 0; }
.steps { display: flex; flex-direction: column; gap: 0; margin-top: 3rem; }
.step {
  display: grid; grid-template-columns: 48px 1fr; gap: 1.25rem;
  padding-bottom: 2.5rem; position: relative;
}
.step:not(:last-child)::after {
  content: ''; position: absolute;
  left: 23px; top: 52px; bottom: 4px;
  width: 2px; border-radius: 0;
  background: var(--border2);
}
.step-num {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif; font-weight: 900; font-size: 16px;
  border: 1px solid var(--ink);
  background: var(--surface);
  color: var(--ink); z-index: 1;
}
.step-body { padding-top: 10px; }
.step-title {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif; font-weight: 900;
  font-size: 1.05rem; margin-bottom: .5rem; letter-spacing: -.015em;
  color: var(--ink);
}
.step-text { font-size: 14px; color: var(--muted); line-height: 1.75; }

/* ─── SOCIAL PROOF ───────────────────────────────── */
.proof-section { padding: 5.5rem 0; }

/* ─── PRICING ─────────────────────────────────────── */
.pricing-section { padding: 5.5rem 0; }
.pricing-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.5rem;
  margin-top: 2.5rem; align-items: stretch;
}
.price-card-wrap { height: 100%; position: relative; }
.price-card-wrap .price-card { height: 100%; }
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .pricing-grid { grid-template-columns: 1fr; } }

.plan-switcher { display: none; }
@media (max-width: 620px) {
  .plan-switcher { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 1.25rem; margin-bottom: .25rem; }
  .plan-switch-btn {
    flex: 1; padding: 9px 8px; border-radius: var(--r-btn);
    border: 1px solid var(--border2);
    background: var(--surface);
    font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600;
    color: var(--muted); cursor: pointer;
    transition: background .09s, color .09s, border-color .09s;
  }
  .plan-switch-btn.active { background: var(--ink); color: #fff; border-color: var(--ink); }
  .pricing-grid .price-card-wrap[data-plan] { display: none; }
  .pricing-grid .price-card-wrap[data-plan].plan-active { display: block; }
}

.billing-tabs-wrap { display: flex; justify-content: center; margin-top: 2rem; }
.billing-tabs {
  display: inline-flex; align-items: center;
  background: var(--bg-alt); border: 1px solid var(--border2);
  border-radius: var(--r-pill); padding: 3px;
}
.billing-tab {
  padding: 8px 20px; border-radius: var(--r-pill); border: none;
  font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background .1s, color .1s, opacity .1s;
  background: transparent; color: var(--muted);
  white-space: nowrap;
}
.billing-tab .tab-save { font-size: 11px; font-weight: 700; color: var(--accent); margin-left: 5px; }
.billing-tab.active { background: var(--surface); color: var(--ink); border: 1px solid var(--border2); }
.billing-tab:not(.active) { opacity: .6; }

.most-value-tag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  padding: 4px 14px; border-radius: var(--r-pill);
  background: var(--accent);
  color: #FFFFFF;
  white-space: nowrap; z-index: 2;
}

.price-card {
  background: var(--surface); border: 1px solid var(--border2);
  border-radius: var(--r-card); padding: 2.25rem 2rem;
  display: flex; flex-direction: column;
  transition: border-color .12s, transform .12s var(--ease), box-shadow .12s var(--ease);
}
.price-card.featured { border: 2px solid var(--accent); box-shadow: 6px 6px 0 var(--accent-tint); }
.price-card:hover { border-color: var(--accent); transform: translate(-3px,-3px); box-shadow: 5px 5px 0 var(--accent-tint); }
.price-card.featured:hover { border-color: var(--accent-dark); transform: translate(-3px,-3px); box-shadow: 9px 9px 0 var(--accent-tint); }

.price-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.price-billing-label { font-size: 12px; font-weight: 500; color: var(--muted); transition: opacity .3s ease; letter-spacing: .01em; }
.price-billing-label.faded { opacity: 0; }

.price-plan-badge {
  font-family: 'Poppins', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 12px; border-radius: var(--r-pill);
}
.price-plan-badge.starter { background: var(--bg-alt); color: var(--muted); border: 1px solid var(--border2); }
.price-plan-badge.pro { background: var(--accent-tint); color: var(--accent-dark); border: 1px solid var(--accent); }

.price-amount { display: flex; align-items: baseline; gap: 4px; margin-bottom: .25rem; }
.price-currency { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif; font-weight: 900; font-size: 1.5rem; color: var(--ink); line-height: 1; padding-bottom: 2px; }
.price-num { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif; font-weight: 900; font-size: 3rem; letter-spacing: -.02em; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.price-period { font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 500; color: var(--muted); padding-bottom: 2px; }
.price-yearly-note {
  font-size: 12px; color: var(--accent-dark); font-weight: 600;
  margin-bottom: 1.5rem; overflow: hidden; max-height: 2em;
  transition: opacity .3s, max-height .3s, margin-bottom .3s;
}
.price-yearly-note.hidden { opacity: 0; pointer-events: none; max-height: 0; margin-bottom: 0; }
.price-sub { font-size: 13px; color: var(--muted); margin-bottom: 1.5rem; }
.price-divider { height: 1px; background: var(--border); margin-bottom: 1.4rem; }
.price-features { list-style: none; display: flex; flex-direction: column; gap: 10px; flex: 1; margin-bottom: 1.75rem; }
.price-feature { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--ink); }
.price-check { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.price-cta {
  display: block; width: 100%; padding: 13px 20px; border-radius: var(--r-btn);
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 14px;
  text-align: center; cursor: pointer; transition: background .09s, color .09s, border-color .09s;
  border: 1px solid var(--ink); text-decoration: none;
}
.price-cta.primary { background: var(--accent); color: #FFFFFF; border-color: var(--accent); }
.price-cta.primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.price-cta.ghost { background: var(--surface); color: var(--ink); }
.price-cta.ghost:hover { border-color: var(--accent); color: var(--accent); }
.price-cta { transition: background .09s, color .09s, border-color .09s, transform .09s var(--ease); }
.price-cta:hover { transform: translate(-1px,-1px); }

/* ─── VSL LEAD MODAL ────────────────────────────── */
.vsl-modal-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(12,14,20,.65);
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.vsl-modal-overlay.open { opacity: 1; pointer-events: auto; }
.vsl-modal {
  width: 100%; max-width: 520px;
  background: var(--surface);
  border: 1px solid var(--ink);
  border-radius: var(--r-lg);
  padding: 2.25rem 2rem 2rem;
  box-shadow: 8px 8px 0 rgba(255,255,255,.18);
  transform: translateY(16px);
  transition: transform .3s var(--ease);
}
.vsl-modal-overlay.open .vsl-modal { transform: translateY(0); }
.vsl-modal-header { margin-bottom: 1.5rem; }
.vsl-modal-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-dark); margin-bottom: .85rem; }
.vsl-modal-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.vsl-modal-title { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif; font-weight: 900; font-size: 1.35rem; letter-spacing: -.02em; line-height: 1.25; color: var(--ink); margin-bottom: .45rem; }
.vsl-modal-sub { font-size: 13.5px; color: var(--muted); line-height: 1.6; }
.vsl-form { display: flex; flex-direction: column; gap: .85rem; }
.vsl-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 480px) { .vsl-form-row { grid-template-columns: 1fr; } }
.vsl-field { display: flex; flex-direction: column; gap: 5px; }
.vsl-label { font-size: 12px; font-weight: 600; color: var(--ink); letter-spacing: .01em; }
.vsl-input, .vsl-select {
  width: 100%; padding: 11px 14px; border-radius: var(--r-input);
  border: 1px solid var(--border2);
  background: var(--surface);
  font-family: 'Poppins', sans-serif; font-size: 14px; color: var(--ink);
  outline: none;
  transition: border-color .09s;
  -webkit-appearance: none; appearance: none;
}
.vsl-input::placeholder { color: var(--muted2); }
.vsl-input:focus, .vsl-select:focus { border-color: var(--accent); }
.vsl-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23767b84' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
  cursor: pointer;
}
.vsl-submit {
  margin-top: .5rem;
  width: 100%; padding: 14px 20px; border-radius: var(--r-btn);
  background: var(--accent);
  color: #FFFFFF;
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 15px;
  border: 1px solid var(--accent); cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
  transition: background .09s, transform .09s var(--ease), box-shadow .09s var(--ease);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.vsl-submit:hover { background: var(--accent-dark); border-color: var(--accent-dark); transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--ink); }
.vsl-privacy { text-align: center; font-size: 11.5px; color: var(--muted2); margin-top: .6rem; line-height: 1.5; }
@media (max-width: 640px) {
  .vsl-modal-overlay { padding: 1.25rem; align-items: center; }
  .vsl-modal { padding: 1.75rem 1.5rem 1.5rem; max-height: 92vh; overflow-y: auto; }
  .vsl-modal-header { margin-bottom: 1.1rem; }
  .vsl-modal-title { font-size: 1.15rem; }
  .vsl-modal-sub { display: none; }
  .vsl-form { gap: .7rem; }
  .vsl-input, .vsl-select { padding: 10px 13px; font-size: 13.5px; }
  .vsl-label { font-size: 11.5px; }
  .vsl-submit { padding: 13px 16px; font-size: 14px; margin-top: .25rem; }
  .vsl-form-row { gap: .65rem; }
  .vsl-desktop-only { display: none; }
  .vsl-privacy { font-size: 11px; margin-top: .4rem; }
}

/* ─── COMPARE TABLE ─────────────────────────────── */
.compare-wrap { margin-top: 2.5rem; }
.compare-toggle-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 13px 20px; border-radius: var(--r-btn);
  border: 1px solid var(--border2);
  background: var(--surface); color: var(--muted);
  font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: border-color .09s, color .09s;
}
.compare-toggle-btn:hover { border-color: var(--accent); color: var(--accent); }
.compare-toggle-btn .cmp-chevron { transition: transform .3s ease; }
.compare-toggle-btn.open .cmp-chevron { transform: rotate(180deg); }

.compare-table-wrap { overflow: hidden; max-height: 0; transition: max-height .4s cubic-bezier(.4,0,.2,1), opacity .3s ease; opacity: 0; }
.compare-table-wrap.open { max-height: 2000px; opacity: 1; }
.compare-table {
  margin-top: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--r-card); overflow: hidden;
}
.compare-table table { width: 100%; border-collapse: collapse; }
.compare-table thead tr { border-bottom: 1px solid var(--border2); background: var(--bg-alt); }
.compare-table th { padding: 14px 16px; text-align: center; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.compare-table th:first-child { text-align: left; }
.compare-table th.th-highlight { color: var(--accent-dark); }
.compare-table tbody tr { border-bottom: 1px solid var(--border); transition: background .09s; }
.compare-table tbody tr:last-child { border-bottom: none; }
.compare-table tbody tr:hover { background: var(--bg); }
.compare-table td { padding: 11px 16px; text-align: center; font-size: 13.5px; color: var(--muted); }
.compare-table td:first-child { text-align: left; font-weight: 500; color: var(--ink); }
.cmp-check { color: var(--success); font-size: 15px; }
.cmp-cross { color: var(--muted2); font-size: 17px; line-height: 1; }
.cmp-note { font-size: 12px; color: var(--muted); }
@media (max-width: 640px) {
  .compare-table th, .compare-table td { padding: 10px 10px; font-size: 12.5px; }
  .compare-table td:first-child { font-size: 12px; }
}

/* ─── CONTACT FORM SECTION ──────────────────────── */
.contact-section { padding: 2.5rem 0 5.5rem; text-align: center; }
.contact-section .section-sub { margin-left: auto; margin-right: auto; text-align: center; }
.contact-form-card {
  max-width: 680px; margin-left: auto; margin-right: auto; text-align: left;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--r-card); padding: 3.25rem 3rem;
  margin-top: 2.5rem;
  box-shadow: 6px 6px 0 var(--accent-tint);
}
.contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.1rem; }
@media (max-width: 640px) { .contact-row { grid-template-columns: 1fr; gap: 1rem; } .contact-section { padding: 0 0 3rem; } }
.contact-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 1.1rem; }
.contact-label { font-size: 12px; font-weight: 600; color: var(--ink); }
.contact-input, .contact-textarea {
  width: 100%; padding: 13px 16px; border-radius: var(--r-input);
  border: 1px solid var(--border2);
  background: var(--surface);
  font-family: 'Poppins', sans-serif; font-size: 14px; color: var(--ink);
  outline: none;
  transition: border-color .09s;
}
.contact-input::placeholder, .contact-textarea::placeholder { color: var(--muted2); }
.contact-input:focus, .contact-textarea:focus { border-color: var(--accent); }
.contact-textarea { resize: vertical; min-height: 130px; }
.contact-success {
  display: none; margin-top: 1rem;
  padding: 12px 16px; border-radius: var(--r-input);
  background: var(--success-tint); border: 1px solid var(--success);
  color: var(--success); font-size: 14px; font-weight: 600; text-align: center;
}

/* ─── GUARANTEE BADGE ────────────────────────────── */
.guarantee-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 22px; border-radius: var(--r-pill);
  background: var(--success-tint);
  border: 1px solid var(--success);
  font-size: 13px; font-weight: 600; color: var(--success);
  letter-spacing: .01em;
}
.guarantee-badge svg { flex-shrink: 0; color: var(--success); }
.guarantee-badge strong { font-weight: 700; }

/* ─── CTA SECTION ────────────────────────────────── */
.cta-section { padding: 5.5rem 2rem 6rem; text-align: center; }
.cta-card {
  max-width: 700px; margin: 0 auto;
  position: relative; overflow: hidden;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--r-lg); padding: 3.75rem 2.5rem;
  box-shadow: 8px 8px 0 var(--accent-tint);
}
.cta-card::before {
  content: ''; position: absolute; bottom: -70px; left: -70px;
  width: 260px; height: 260px; border-radius: 50%;
  border: 1.5px solid #FFFFFF; opacity: .1; pointer-events: none;
}
.cta-card::after {
  content: ''; position: absolute; top: -20px; right: 30px;
  width: 130px; height: 130px;
  background-image: radial-gradient(#FFFFFF 1.2px, transparent 1.2px);
  background-size: 18px 18px;
  opacity: .14; pointer-events: none;
}
.cta-card > * { position: relative; z-index: 1; }
.cta-card h2 {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif; font-weight: 900;
  font-size: clamp(1.6rem, 4vw, 2.4rem); letter-spacing: -.03em;
  line-height: 1.15; margin-bottom: 1rem;
  color: #FFFFFF;
}
.cta-card p { font-size: 15px; color: rgba(255,255,255,.92); line-height: 1.7; margin-bottom: 2rem; }
.cta-actions { display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.cta-card .btn-primary { background: #FFFFFF; color: var(--ink); border-color: #FFFFFF; }
.cta-card .btn-primary:hover { background: var(--accent-tint); }
.cta-card .btn-whatsapp { border-color: rgba(255,255,255,.4); background: transparent; color: #FFFFFF; }
.cta-card .btn-whatsapp:hover { border-color: var(--whatsapp); background: var(--whatsapp); color: #FFFFFF; }

/* ─── FOOTER ─────────────────────────────────────── */
footer {
  border-top: 1px solid var(--border);
  padding: 3rem 2rem;
  max-width: 74rem; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
}
.footer-logo { display: flex; align-items: center; gap: 8px; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif; font-weight: 900; font-size: 14px; color: var(--ink); }
.footer-copy { font-size: 12px; color: var(--muted2); }
.footer-links { display: flex; align-items: center; gap: 1.5rem; }
.footer-link { font-size: 12px; color: var(--muted2); transition: color .09s; }
.footer-link:hover { color: var(--accent); }

/* ─── HERO CTAS BELOW VSL ────────────────────────── */
.hero-badge-desktop { display: inline-flex; margin-bottom: 1.25rem; }
.hero-badge-mobile  { display: none; }
@media (max-width: 640px) {
  .hero-badge-desktop { display: none; }
  .hero-badge-mobile  { display: inline-flex; margin-bottom: 1.25rem; margin-top: 0; }
  .hero-badge-mobile .hero-social-text strong { color: var(--accent); }
}
.vsl-badge-wrap { display: flex; justify-content: center; padding: .75rem 2rem 0; }
.hero-ctas-below { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; padding: 1.5rem 2rem 5rem; }

/* ─── PROOF CTA ROW ──────────────────────────────── */
.proof-ctas { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.5rem; justify-content: flex-start; }

/* ─── FAQ ───────────────────────────────────────── */
.faq-section { padding: 5.5rem 0; }
.faq-section .fade-up:first-child { text-align: center; }
.faq-list { margin-top: 2.5rem; display: flex; flex-direction: column; gap: .75rem; max-width: 720px; margin-left: auto; margin-right: auto; }
.faq-item {
  background: var(--surface); border: 1px solid var(--border2);
  border-radius: var(--r-card); overflow: hidden;
  transition: border-color .12s, transform .12s var(--ease), box-shadow .12s var(--ease);
}
.faq-item:hover { border-color: var(--accent); transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--accent-tint); }
.faq-item.open { border-color: var(--accent); transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--accent-tint); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.4rem; background: none; border: none; cursor: pointer;
  font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 600;
  color: var(--ink); text-align: left; gap: 1rem;
}
.faq-icon { flex-shrink: 0; transition: transform .3s; color: var(--accent); }
.faq-item.open .faq-icon { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; font-size: 14px; color: var(--muted); line-height: 1.65; transition: max-height .35s ease, padding .3s ease; padding: 0 1.4rem; }
.faq-item.open .faq-a { max-height: 200px; padding: 0 1.4rem 1.2rem; }

/* ─── CASES ──────────────────────────────────────── */
.cases-section { padding: 5.5rem 0; }
.cases-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 3rem; }
@media (max-width: 720px) { .cases-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .cases-grid {
    display: flex; grid-template-columns: unset;
    gap: .9rem;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: -1.5rem; margin-right: -1.5rem;
    padding: 0;
  }
  .cases-grid::before, .cases-grid::after { content: ''; flex: 0 0 10%; }
  .cases-grid::-webkit-scrollbar { display: none; }
  .cases-grid .case-card { flex: 0 0 80%; scroll-snap-align: center; }
}

.case-card {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--r-card); padding: 2rem;
  display: flex; flex-direction: column;
  transition: border-color .12s, transform .12s var(--ease), box-shadow .12s var(--ease);
}
.case-card:hover { border-color: var(--accent); transform: translate(-3px,-3px); box-shadow: 5px 5px 0 var(--accent-tint); }

.case-head { display: flex; align-items: center; gap: 12px; margin-bottom: 1.5rem; }
.case-avatar {
  width: 44px; height: 44px; border-radius: var(--r-input); flex-shrink: 0;
  background: var(--accent); color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 900; font-size: 15px; letter-spacing: -.02em;
}
.case-card.purple .case-avatar { background: var(--slate); }
.case-card.amber  .case-avatar { background: var(--amber); }
.case-company  { font-weight: 700; color: var(--ink); font-size: .95rem; }
.case-industry { font-size: 12.5px; color: var(--muted); margin-top: 1px; }

.case-stat { display: flex; align-items: baseline; gap: 9px; margin-bottom: 1rem; }
.case-stat-num {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 900; font-size: 2.1rem; letter-spacing: -.02em; color: var(--accent); line-height: 1;
}
.case-card.purple .case-stat-num { color: var(--slate); }
.case-card.amber  .case-stat-num { color: var(--amber); }
.case-stat-label { font-size: 13px; color: var(--muted); line-height: 1.4; max-width: 15rem; }

.case-quote { font-size: 14.5px; color: var(--ink); line-height: 1.7; flex: 1; margin-bottom: 1.25rem; }
.case-author { font-size: 12.5px; color: var(--muted); font-weight: 600; }

.cases-note {
  margin-top: 2rem; text-align: center; font-size: 12.5px; color: var(--muted2);
}

.case-card { cursor: pointer; }
.case-cta {
  margin-top: auto; padding-top: .5rem;
  font-size: 13px; font-weight: 700; color: var(--accent);
  display: flex; align-items: center; gap: 6px;
  transition: gap .12s var(--ease);
}
.case-card:hover .case-cta { gap: 10px; }
.case-card.purple .case-cta { color: var(--slate); }
.case-card.amber  .case-cta { color: var(--amber); }

/* ─── CASE DETAIL PAGE ───────────────────────────── */
.case-mini-stats { display: flex; gap: 2.5rem; flex-wrap: wrap; margin-top: 1.75rem; }
.case-mini-stat-num {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 900; font-size: 2rem; letter-spacing: -.02em; color: var(--accent); line-height: 1;
}
.case-mini-stat-label { font-size: 12.5px; color: var(--muted); margin-top: 5px; max-width: 11rem; }

.case-body { max-width: 700px; margin: 0 auto; }
.case-body h2 {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 900; font-size: 1.4rem; letter-spacing: -.02em;
  color: var(--ink); margin: 2.5rem 0 .9rem;
}
.case-body h2:first-child { margin-top: 0; }
.case-body p { font-size: 15.5px; color: var(--muted); line-height: 1.8; margin-bottom: 1.1rem; }

.case-blockquote {
  border-left: 4px solid var(--accent);
  padding: 1.4rem 1.6rem;
  background: var(--accent-tint);
  border-radius: 0 var(--r-card) var(--r-card) 0;
  font-size: 16.5px; color: var(--ink); line-height: 1.75;
  margin: 2.25rem 0;
}
.case-blockquote footer { margin-top: .9rem; font-size: 13px; color: var(--muted); font-weight: 700; }

.case-back {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--muted);
  margin-bottom: 1.5rem; transition: color .09s;
}
.case-back:hover { color: var(--accent); }

/* ─── MOBILE STICKY NAV ─────────────────────────── */
.mobile-nav {
  display: none;
  position: sticky; top: 0; left: 0; right: 0; z-index: 200;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  padding: 0 1.5rem;
  height: 62px;
  align-items: center; justify-content: space-between;
}
@media (max-width: 900px) { .mobile-nav { display: flex; } }

/* Hamburger button — shown inside the mobile sticky nav */
.hamburger-btn {
  display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: 34px; height: 34px; flex-shrink: 0;
  background: none; border: none; cursor: pointer; padding: 0;
}
@media (max-width: 900px) { .hamburger-btn { display: flex; } }
.hamburger-btn span {
  display: block; width: 20px; height: 2px; background: var(--ink);
  transition: transform .25s var(--ease), opacity .15s var(--ease);
}
.hamburger-btn.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger-btn.is-open span:nth-child(2) { opacity: 0; }
.hamburger-btn.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu — full-width dropdown under the sticky bar */
.mobile-menu {
  display: none;
  position: fixed; top: 62px; left: 0; right: 0; bottom: 0; z-index: 190;
  flex-direction: column;
  background: var(--surface);
  padding: .5rem 1.5rem 2rem;
  overflow-y: auto;
  opacity: 0; transform: translateY(-10px); visibility: hidden;
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s;
}
@media (max-width: 900px) { .mobile-menu { display: flex; } }
.mobile-menu.is-open {
  opacity: 1; transform: translateY(0); visibility: visible;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.mobile-menu-link {
  padding: 15px 2px;
  font-size: 16px; font-weight: 600; color: var(--ink);
  border-bottom: 1px solid var(--border);
}
.mobile-menu-link.active { color: var(--accent); }
body.menu-open { overflow: hidden; }

/* ─── RESPONSIVE ─────────────────────────────────── */
@media (max-width: 640px) {
  .hero { padding: 1.25rem 1.5rem 2.5rem; }
  .hero-ctas { margin-bottom: 1rem; }
  .page-header { padding: 1.75rem 1.5rem 1.5rem; }
  .wrap { padding: 0 1.5rem; }
  .features-section, .hiw-section, .proof-section, .pricing-section, .cases-section { padding: 2.5rem 0; }
  .cta-section { padding: 2.5rem 1.5rem 3.5rem; }
  .cta-card { padding: 2.75rem 1.75rem; }
  .hero-ctas-below { padding: 0.75rem 1.5rem 4rem; }
  .proof-ctas { margin-bottom: 1.75rem; display: none; }
  .feat-card { padding: 1.75rem; }
  .contact-form-card { padding: 2.25rem 1.5rem; }
  .pricing-grid { margin-top: 1.75rem; gap: 1rem; }
  .price-card { padding: 1.5rem 1.25rem; border-radius: var(--r-btn); }
  .price-card-header { margin-bottom: .75rem; }
  .price-plan-badge { font-size: 10px; padding: 3px 10px; }
  .price-num { font-size: 2.25rem; }
  .price-currency { font-size: 1.125rem; }
  .price-period { font-size: 12.5px; }
  .price-yearly-note { margin-bottom: 1rem; }
  .price-sub { font-size: 12.5px; margin-bottom: 1.1rem; }
  .price-divider { margin-bottom: 1.1rem; }
  .price-features { gap: 8px; margin-bottom: 1.25rem; }
  .price-feature { font-size: 13px; }
  .price-cta { padding: 11px 18px; font-size: 13.5px; }
  .most-value-tag { font-size: 9px; padding: 3px 11px; top: -11px; }
  .case-card { padding: 1.5rem; }
  .case-stat { flex-direction: column; align-items: flex-start; gap: 3px; margin-bottom: .9rem; }
  .case-stat-num { font-size: 1.75rem; }
  .case-stat-label { max-width: 100%; }
}

/* ─── A11Y & MOTION ──────────────────────────────── */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .fade-up { opacity: 1; transform: none; filter: blur(0); }
  .scroll-progress { display: none; }
}