/* ============================================================
   ABARCA IA — inicio_home.css
   Refined Neutral + Spectral Accent Design System
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

/* --- VARIABLES --- */
:root {
  --color-dark:        #3D3D3B;
  --color-dark-deep:   #2C2C2A;
  --color-surface:     #FFFFFF;
  --color-muted:       #888780;
  --color-muted-light: #B4B2A9;
  --color-border:      #E5E5E2;
  --color-border-tertiary: #E5E5E2;
  --color-background-secondary: #F5F5F3;

  --color-sky:     #4FC3F7;
  --color-lav:     #B39DDB;
  --color-pink:    #F48FB1;
  --color-amber:   #FFB74D;
  --color-yellow:  #FFF176;

  --grad-spectrum: linear-gradient(90deg, #4FC3F7, #B39DDB, #F48FB1, #FFB74D, #FFF176);
  --grad-hero-bg:  linear-gradient(135deg, #B3E5FC 0%, #CE93D8 35%, #F8BBD0 65%, #FFF59D 100%);
  --grad-conic:    conic-gradient(from 180deg, #4FC3F7, #B39DDB, #F48FB1, #FFB74D, #FFF176, #4FC3F7);

  --border-radius-lg: 12px;
  --border-radius-md: 8px;
  --border-radius-sm: 4px;

  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --shadow-sm: 0 1px 3px rgba(61,61,59,.06), 0 1px 2px rgba(61,61,59,.04);
  --shadow-md: 0 4px 16px rgba(61,61,59,.10), 0 2px 4px rgba(61,61,59,.05);
  --shadow-lg: 0 8px 32px rgba(61,61,59,.13), 0 4px 8px rgba(61,61,59,.06);
  --shadow-xl: 0 16px 48px rgba(61,61,59,.18), 0 8px 16px rgba(61,61,59,.08);
  --shadow-color: 0 4px 20px rgba(79,195,247,.18), 0 2px 12px rgba(179,157,219,.14);
  --shadow-color-lg: 0 8px 32px rgba(79,195,247,.22), 0 4px 16px rgba(179,157,219,.16);

  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --header-h: 80px;
}

/* --- RESET --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
a { text-decoration: none; color: inherit; }

/* --- BASE --- */
body {
  font-family: var(--font);
  background: var(--color-background-secondary);
  color: var(--color-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   PAGE WRAPPER & BROWSER FRAME
   ============================================================ */

.page-wrapper {
  background: var(--color-background-secondary);
  padding: 0 1rem 1rem;
}

.browser-frame {
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}


/* ============================================================
   HEADER
   ============================================================ */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  margin: 14px 140px 0;
  position: sticky;
  top: 14px;
  z-index: 100;
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 0.5px solid rgba(255, 255, 255, 0.88);
  border-radius: 9999px;
  box-shadow:
    0 4px 24px rgba(61, 61, 59, 0.07),
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 -1px 0 rgba(61, 61, 59, 0.04) inset;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.logo-img {
  height: 32px;
  width: auto;
  display: block;
}

.logo-icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--grad-conic);
  padding: 3px;
  flex-shrink: 0;
}

.logo-favicon {
  height: 40px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.logo-inner {
  width: 100%; height: 100%;
  border-radius: 50%;
  background: var(--color-surface);
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.logo-name {
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--color-dark);
}

.logo-tagline {
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--color-muted);
  margin-top: 2px;
}

.main-nav {
  display: flex;
  gap: 22px;
  font-size: 15px;
  align-items: center;
}

.nav-link {
  position: relative;
  color: #5F5E5A;
  transition: color .2s ease;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1px;
  background: var(--color-dark);
  transition: width .3s var(--ease-out);
}

.nav-link:hover { color: var(--color-dark); }
.nav-link:hover::after { width: 100%; }

.nav-link--active { color: var(--color-dark); font-weight: 500; }
.nav-link--muted  { color: var(--color-muted); }

.btn-demo {
  position: relative;
  isolation: isolate;
  background: var(--color-dark);
  color: var(--color-surface);
  padding: 7px 16px;
  border-radius: var(--border-radius-md);
  font-weight: 500;
  font-size: 13px;
  overflow: hidden;
  transition: transform .2s var(--ease-spring), box-shadow .2s ease;
}

.btn-demo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, #4FC3F7, #B39DDB, #F48FB1, #FFB74D);
  opacity: 0;
  transition: opacity .35s ease;
}

.btn-demo:hover::before { opacity: 1; }

.btn-demo:hover {
  transform: scale(1.03);
  box-shadow: var(--shadow-color-lg);
}

/* ============================================================
   HERO
   ============================================================ */

/* Extiende heros detrás del nav flotante (top-of-page banners).
   !important necesario porque algunos CSS por-página se cargan después y redefinen `padding`. */
.hero,
.hero-sobre,
.hero-contacto,
.hero-demo,
.hero-planes,
.hero-producto,
.thanks-hero,
.ids-hero,
.policy-hero,
.services-hero,
.pricing-hero,
.login-section,
.analizador-main {
  margin-top: calc(var(--header-h) * -1) !important;
  padding-top: calc(var(--header-h) + 24px) !important;
}

.hero {
  position: relative;
  background: var(--grad-hero-bg);
  overflow: hidden;
}

.hero-glow {
  position: absolute;
  top: -100px; right: -80px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: conic-gradient(from 180deg,
    rgba(79,195,247,.4), rgba(179,157,219,.4),
    rgba(244,143,177,.4), rgba(255,183,77,.4),
    rgba(255,241,118,.4), rgba(79,195,247,.4));
  filter: blur(40px);
  animation: orb-spin 20s linear infinite;
  pointer-events: none;
}

.hero-content {
  position: relative;
  padding: 56px 24px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

/* --- Hero text stagger --- */
.hero-badge {
  display: inline-block;
  background: rgba(255,255,255,.7);
  color: var(--color-dark);
  padding: 5px 14px;
  border-radius: var(--border-radius-md);
  font-size: 12px; font-weight: 500;
  margin-bottom: 18px;
  backdrop-filter: blur(4px);
  opacity: 0;
  transform: translateY(16px);
  animation: fade-up .5s var(--ease-out) .05s forwards;
}

.hero-headline {
  font-size: 34px; font-weight: 400;
  line-height: 1.2; letter-spacing: -.3px;
  color: var(--color-dark);
  margin-bottom: 16px;
  opacity: 0;
  transform: translateY(16px);
  animation: fade-up .5s var(--ease-out) .15s forwards;
}

.hero-body {
  font-size: 15px;
  color: #444441;
  line-height: 1.6;
  margin-bottom: 24px;
  max-width: 460px;
  opacity: 0;
  transform: translateY(16px);
  animation: fade-up .5s var(--ease-out) .25s forwards;
}

.hero-ctas {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(16px);
  animation: fade-up .5s var(--ease-out) .35s forwards;
}

.hero-footnote {
  font-size: 12px;
  color: #5F5E5A;
  opacity: 0;
  transform: translateY(16px);
  animation: fade-up .5s var(--ease-out) .45s forwards;
}

/* Buttons */
.btn-primary {
  display: inline-block;
  background: var(--color-dark);
  color: var(--color-surface);
  padding: 13px 24px;
  border-radius: var(--border-radius-md);
  font-weight: 500; font-size: 14px;
  transition: transform .2s var(--ease-spring), box-shadow .2s ease, background .2s ease;
}

.btn-primary:hover {
  transform: scale(1.03);
  box-shadow: var(--shadow-color-lg);
  background: var(--color-dark-deep);
}

.btn-secondary {
  display: inline-block;
  background: rgba(255,255,255,.85);
  color: var(--color-dark);
  padding: 13px 24px;
  border-radius: var(--border-radius-md);
  font-weight: 500; font-size: 14px;
  border: 0.5px solid rgba(61,61,59,.2);
  backdrop-filter: blur(4px);
  transition: transform .2s var(--ease-spring), box-shadow .2s ease, background .2s ease;
}

.btn-secondary:hover {
  transform: scale(1.03);
  box-shadow: var(--shadow-color);
  background: rgba(255,255,255,.97);
}

/* --- Hero card --- */
.hero-card {
  opacity: 0;
  transform: translateY(20px);
  animation: fade-up .6s var(--ease-out) .2s forwards;
}

.hero-card.is-floating {
  animation: fade-up .6s var(--ease-out) .2s forwards,
             float 3s ease-in-out 1s infinite;
}

.comparator-card {
  background: var(--color-dark);
  border-radius: var(--border-radius-lg);
  padding: 16px;
}

.comparator-inner {
  background: var(--color-surface);
  border-radius: var(--border-radius-md);
  padding: 12px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 0.5px solid var(--color-border);
}

.card-title  { font-size: 11px; font-weight: 500; color: var(--color-dark); }
.card-fname  { font-size: 10px; color: var(--color-muted); }

.card-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}

.stat-cell          { background: var(--color-background-secondary); padding: 6px; border-radius: var(--border-radius-sm); }
.stat-cell--hi      { background: #FFF8E1; }
.stat-cell-label    { font-size: 9px; color: var(--color-muted); }
.stat-cell-label--hi{ color: #885A00; }
.stat-cell-val      { font-size: 13px; font-weight: 500; color: var(--color-dark); }
.stat-cell-val--hi  { color: #885A00; }

.card-results { display: flex; flex-direction: column; gap: 4px; }

.result-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 8px;
  border-radius: var(--border-radius-sm);
  font-size: 10px;
  background: var(--color-background-secondary);
}

.result-row--best {
  background: linear-gradient(90deg, rgba(179,229,252,.5), rgba(255,245,157,.5));
  font-weight: 500;
  color: var(--color-dark);
}

.result-pct { color: var(--color-muted); }

/* ============================================================
   STATS STRIP
   ============================================================ */

.stats-strip {
  background: var(--color-dark);
  padding: 26px 24px;
}

.stats-grid {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 16px;
}

.stat-block { text-align: center; }

.stat-number {
  font-size: 24px; font-weight: 500;
  background: var(--grad-spectrum);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s linear infinite;
}

.stat-desc {
  font-size: 11px;
  color: var(--color-muted-light);
  margin-top: 2px;
}

/* ============================================================
   DIFERENCIALES
   ============================================================ */

.diferentials {
  padding: 48px 24px;
  background: var(--color-surface);
}

.section-header {
  text-align: center;
  margin-bottom: 32px;
}

.section-header h2 {
  font-size: 24px; font-weight: 400;
  color: var(--color-dark);
  margin-bottom: 8px;
  letter-spacing: -.2px;
}

.section-header p {
  font-size: 13px;
  color: #5F5E5A;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.feature-card {
  background: var(--color-surface);
  border: 0.5px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  padding: 18px;
  position: relative;
  transition: transform .2s var(--ease-spring), box-shadow .2s ease;
}

.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-color);
}

.feature-card--featured {
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF8E1 100%);
  border-color: #FFE082;
}

.feature-badge {
  position: absolute;
  top: -10px; left: 18px;
  background: linear-gradient(90deg, #FFB74D, #FFF176);
  color: var(--color-dark);
  font-size: 10px;
  padding: 4px 12px;
  border-radius: var(--border-radius-md);
  font-weight: 500;
  white-space: nowrap;
}

.feature-tag {
  font-size: 10px; font-weight: 500;
  letter-spacing: 1px;
  margin-bottom: 8px;
  margin-top: 10px;
}

.feature-tag--first { margin-top: 0; }
.feature-tag--sky   { color: var(--color-sky); }
.feature-tag--lav   { color: var(--color-lav); }
.feature-tag--pink  { color: var(--color-pink); }
.feature-tag--amber { color: var(--color-amber); }

.feature-title {
  font-weight: 500; font-size: 14px;
  margin-bottom: 6px;
  color: var(--color-dark);
}

.feature-body {
  font-size: 12px;
  color: #5F5E5A;
  line-height: 1.5;
}

/* ============================================================
   CÓMO FUNCIONA
   ============================================================ */

.how-it-works {
  padding: 48px 24px;
  background: var(--color-background-secondary);
}

.how-it-works .section-header h2 { font-size: 22px; }

.steps-wrapper {
  position: relative;
}

.steps-track {
  position: absolute;
  top: 21px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: var(--color-border);
  border-radius: 99px;
  z-index: 0;
  overflow: hidden;
}

.steps-track-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #4FC3F7, #B39DDB, #F48FB1, #FFB74D, #FFF176);
  border-radius: 99px;
  transition: width 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.steps-track-fill.animate {
  width: 100%;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.step { text-align: center; }

.step-number {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 500; font-size: 16px;
  margin: 0 auto 12px;
  position: relative;
  z-index: 1;
  transition: transform .2s var(--ease-spring), box-shadow .2s ease;
}

.step:hover .step-number {
  transform: scale(1.12);
  box-shadow: var(--shadow-color);
}

.step-number--1 { background: linear-gradient(135deg, #4FC3F7, #B39DDB); color: var(--color-surface); }
.step-number--2 { background: linear-gradient(135deg, #B39DDB, #F48FB1); color: var(--color-surface); }
.step-number--3 { background: linear-gradient(135deg, #F48FB1, #FFB74D); color: var(--color-surface); }
.step-number--4 { background: linear-gradient(135deg, #FFB74D, #FFF176); color: var(--color-dark); }

.step-title { font-size: 13px; font-weight: 500; margin-bottom: 4px; color: var(--color-dark); }
.step-desc  { font-size: 11px; color: #5F5E5A; line-height: 1.4; }

/* ============================================================
   PRICING
   ============================================================ */

.pricing {
  padding: 48px 24px;
  background: var(--color-surface);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.pricing-card {
  background: var(--color-surface);
  border: 0.5px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  padding: 24px;
  transition: transform .2s var(--ease-spring), box-shadow .25s ease;
}

.pricing-card:hover {
  transform: scale(1.015);
  box-shadow: var(--shadow-color-lg);
}

.pricing-card--featured {
  position: relative;
  border: 2px solid transparent;
  background-image:
    linear-gradient(var(--color-surface), var(--color-surface)),
    linear-gradient(135deg, #4FC3F7, #B39DDB, #F48FB1, #FFB74D, #FFF176);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.plan-badge {
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #4FC3F7, #B39DDB, #F48FB1, #FFB74D);
  color: var(--color-surface);
  font-size: 11px;
  padding: 4px 12px;
  border-radius: var(--border-radius-md);
  font-weight: 500;
  white-space: nowrap;
}

.plan-name {
  font-size: 13px;
  color: var(--color-muted);
  margin-bottom: 6px;
}

.plan-name--gradient {
  font-weight: 500;
  background: linear-gradient(90deg, #4FC3F7, #F48FB1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.plan-price {
  font-size: 30px; font-weight: 500;
  margin-bottom: 4px;
  color: var(--color-dark);
}

.plan-price span {
  font-size: 13px;
  color: var(--color-muted);
  font-weight: 400;
}

.plan-price--text { font-size: 24px; }

.plan-subtitle {
  font-size: 12px;
  color: var(--color-muted);
  margin-bottom: 14px;
}

.plan-features {
  border-top: 0.5px solid var(--color-border);
  padding-top: 12px;
  font-size: 12px;
  line-height: 1.7;
  color: #5F5E5A;
  margin-bottom: 18px;
}

.btn-plan {
  display: block;
  text-align: center;
  padding: 10px;
  border: 0.5px solid var(--color-muted-light);
  border-radius: var(--border-radius-md);
  font-size: 13px; font-weight: 500;
  color: var(--color-dark);
  transition: transform .2s var(--ease-spring), box-shadow .2s ease, background .2s ease;
}

.btn-plan:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-color);
  background: var(--color-background-secondary);
}

.btn-plan--primary {
  background: var(--color-dark);
  color: var(--color-surface);
  border-color: var(--color-dark);
}

.btn-plan--primary:hover {
  background: var(--color-dark-deep);
  box-shadow: var(--shadow-color);
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */

.testimonials {
  padding: 48px 0;
  background: var(--color-background-secondary);
  overflow: hidden;
}

.testimonials .section-header {
  padding: 0 24px;
  margin-bottom: 28px;
}

.testimonials .section-header h2 { font-size: 22px; }

/* ── Carousel ── */
.testimonials-carousel {
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.testimonials-track {
  display: flex;
  gap: 14px;
  width: max-content;
  align-items: flex-start;
  animation: carousel-scroll 40s linear infinite;
}

.testimonials-track:hover {
  animation-play-state: paused;
}

@keyframes carousel-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.testimonial-card {
  background: var(--color-surface);
  border: 0.5px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  padding: 22px;
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  transition: transform .2s var(--ease-spring), box-shadow .2s ease;
}

.testimonial-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-color);
}

.testimonial-card p {
  font-size: 13px; line-height: 1.6;
  margin-bottom: 16px;
  color: var(--color-dark);
  display: -webkit-box;
  -webkit-line-clamp: 10;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 210px;
  transition: max-height .35s ease;
}

.testimonial-card:hover p {
  -webkit-line-clamp: unset;
  max-height: 1500px;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}

.author-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #B3E5FC, #CE93D8);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 500;
  color: var(--color-dark);
  flex-shrink: 0;
}

.author-avatar--warm { background: linear-gradient(135deg, #F8BBD0, #FFCC80); }
.author-avatar--sky  { background: linear-gradient(135deg, #B3E5FC, #81D4FA); }
.author-avatar--lav  { background: linear-gradient(135deg, #E1BEE7, #B39DDB); }

.author-avatar--logo {
  background: #fff;
  border: 0.5px solid var(--color-border);
  padding: 4px;
  overflow: hidden;
}
.author-avatar--logo img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}

.author-name { font-size: 13px; font-weight: 500; color: var(--color-dark); }
.author-role { font-size: 11px; color: var(--color-muted); }

.author-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--color-muted);
  transition: color .15s ease, border-color .15s ease;
}
.author-link:hover {
  color: var(--color-dark);
  border-bottom-color: var(--color-dark);
}

/* ============================================================
   CTA FINAL
   ============================================================ */

.cta-final {
  position: relative;
  padding: 56px 24px;
  background: var(--color-dark);
  text-align: center;
  overflow: hidden;
}

.cta-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  pointer-events: none;
}

.cta-orb--left {
  bottom: -100px; left: -80px;
  width: 280px; height: 280px;
  background: conic-gradient(from 180deg,
    rgba(79,195,247,.3), rgba(179,157,219,.3),
    rgba(244,143,177,.3), rgba(255,183,77,.3),
    rgba(255,241,118,.3), rgba(79,195,247,.3));
  animation: orb-pulse 20s ease-in-out infinite;
}

.cta-orb--right {
  top: -100px; right: -80px;
  width: 240px; height: 240px;
  background: conic-gradient(from 0deg,
    rgba(255,241,118,.25), rgba(255,183,77,.25),
    rgba(244,143,177,.25), rgba(179,157,219,.25),
    rgba(79,195,247,.25), rgba(255,241,118,.25));
  animation: orb-pulse 20s ease-in-out infinite;
  animation-delay: -10s;
}

.cta-content { position: relative; }

.cta-final h2 {
  font-size: 28px; font-weight: 400;
  color: var(--color-surface);
  margin-bottom: 12px;
  letter-spacing: -.2px;
}

.cta-final > .cta-content > p {
  font-size: 14px;
  color: var(--color-muted-light);
  margin-bottom: 24px;
}

.btn-cta {
  display: inline-block;
  background: linear-gradient(135deg, #4FC3F7, #B39DDB, #F48FB1, #FFB74D);
  background-size: 200% auto;
  color: var(--color-surface);
  padding: 15px 36px;
  border-radius: var(--border-radius-md);
  font-weight: 500; font-size: 14px;
  margin-bottom: 22px;
  transition: transform .2s var(--ease-spring), box-shadow .2s ease, filter .2s ease, background-position .4s ease;
}

.btn-cta:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 32px rgba(79,195,247,.35);
  background-position: right center;
  filter: brightness(1.06);
}

.cta-contact {
  border-top: 0.5px solid #5F5E5A;
  padding-top: 20px;
  max-width: 320px;
  margin: 0 auto;
}

.cta-phone {
  font-size: 20px; font-weight: 500;
  color: var(--color-surface);
  margin-bottom: 4px;
}

.cta-email {
  font-size: 13px;
  color: var(--color-muted-light);
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
  background: var(--color-dark-deep);
  padding: 18px 24px;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--color-muted);
}
.site-footer a {
  color: var(--color-muted);
  text-decoration: none;
  transition: color .15s;
}
.site-footer a:hover { color: #FFFFFF; }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children inside .stagger-parent */
.stagger-parent .reveal:nth-child(1) { transition-delay: .0s; }
.stagger-parent .reveal:nth-child(2) { transition-delay: .08s; }
.stagger-parent .reveal:nth-child(3) { transition-delay: .16s; }
.stagger-parent .reveal:nth-child(4) { transition-delay: .24s; }
.stagger-parent .reveal:nth-child(5) { transition-delay: .32s; }
.stagger-parent .reveal:nth-child(6) { transition-delay: .40s; }

/* ============================================================
   KEYFRAMES
   ============================================================ */

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

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}

@keyframes orb-spin {
  to { transform: rotate(360deg); }
}

@keyframes orb-pulse {
  0%, 100% { transform: scale(1) rotate(0deg);   opacity: .8; }
  33%       { transform: scale(1.12) rotate(120deg); opacity: 1; }
  66%       { transform: scale(.92) rotate(240deg);  opacity: .65; }
}

@keyframes shimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes counter-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ── Tablet landscape (≤ 1024px) ── */
@media (max-width: 1024px) {
  .hero-content {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 40px 20px;
  }

  .hero-headline { font-size: 28px; }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .steps-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
}

/* ── Hamburger & mobile menu (always defined, shown via media query) ── */

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px; height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
}

.nav-toggle span {
  display: block;
  width: 18px; height: 1.5px;
  background: var(--color-dark);
  border-radius: 99px;
  transition: transform .25s var(--ease-out), opacity .2s ease;
  transform-origin: center;
}

/* Open state */
.nav-toggle.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-menu {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 0 20px;
  max-height: 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-radius: var(--border-radius-md);
  transition: max-height .3s var(--ease-out), padding .3s var(--ease-out), background-color .2s ease, box-shadow .2s ease;
}

.mobile-menu.is-open {
  max-height: calc(100vh - 96px);
  padding: 10px 20px 16px;
  overflow-y: auto;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 0.5px solid var(--color-border);
  box-shadow: var(--shadow-lg);
}

.mobile-link {
  font-size: 14px;
  color: #5F5E5A;
  padding: 10px 12px;
  border-radius: var(--border-radius-md);
  transition: background .15s ease, color .15s ease;
}

.mobile-link:hover         { background: var(--color-background-secondary); color: var(--color-dark); }
.mobile-link--active       { color: var(--color-dark); font-weight: 500; }
.mobile-link--muted        { color: var(--color-muted); }
.mobile-link--disabled     { color: var(--color-muted-light); cursor: not-allowed; pointer-events: none; }
.mobile-link--sub          { padding-left: 22px; font-size: 13px; }

.mobile-link--back {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: var(--color-dark);
  background: var(--color-background-secondary);
  border: 0.5px solid var(--color-border);
  margin-bottom: 6px;
}

.mobile-link--back:hover {
  background: var(--color-surface);
  border-color: var(--color-sky);
  color: var(--color-sky);
}

.mobile-link--back svg {
  flex-shrink: 0;
  transition: transform .2s var(--ease-spring);
}

.mobile-link--back:hover svg { transform: translateX(-2px); }

.mobile-section-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-muted);
  padding: 14px 12px 6px;
  border-top: 0.5px solid var(--color-border);
  margin-top: 6px;
}

.mobile-demo {
  display: block;
  text-align: center;
  margin-top: 8px;
  padding: 12px;
  border-radius: var(--border-radius-md);
}

/* ── Tablet portrait (≤ 768px) ── */
@media (max-width: 768px) {
  .page-wrapper { padding: 0 .5rem .5rem; }

  /* Header: hide desktop nav links, show hamburger */
  .site-header {
    margin: 10px 16px 0;
    padding: 12px 20px;
  }

  .nav-link,
  .btn-demo { display: none; }

  .nav-toggle { display: flex; }

  .mobile-menu {
    display: flex;
    position: fixed;
    top: 72px;
    left: 16px;
    right: 16px;
    z-index: 99;
  }

  /* Hero — stack vertically */
  .hero-content {
    grid-template-columns: 1fr;
    padding: 36px 20px;
    gap: 28px;
  }

  .hero-headline { font-size: 26px; }
  .hero-body     { font-size: 14px; max-width: 100%; }

  .hero-card { order: -1; }

  /* Stats */
  .stats-grid { gap: 24px 16px; }

  /* Features */
  .features-grid { grid-template-columns: repeat(2, 1fr); }

  /* Steps */
  .steps-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 12px;
  }

  .steps-track { display: none; }

  /* Pricing */
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 360px;
    margin: 0 auto;
  }

  /* Testimonials */
  .testimonial-card { width: 260px; }

  /* Footer */
  .site-footer {
    flex-direction: column;
    gap: 6px;
    text-align: center;
  }
}

/* ── Mobile (≤ 480px) ── */
@media (max-width: 480px) {
  .site-header {
    margin: 8px 10px 0;
    padding: 8px 14px;
  }

  .logo-tagline { display: none; }

  /* Hero */
  .hero-content { padding: 28px 16px; gap: 20px; }
  .hero-headline { font-size: 22px; }
  .hero-badge { font-size: 11px; }

  .hero-ctas { flex-direction: column; }

  .btn-primary,
  .btn-secondary { text-align: center; }

  /* Features */
  .features-grid { grid-template-columns: 1fr; }

  /* Section headers */
  .section-header h2 { font-size: 20px; }

  /* Padding sections */
  .diferentials,
  .how-it-works,
  .pricing { padding-left: 16px; padding-right: 16px; }

  .diferentials,
  .how-it-works,
  .pricing,
  .testimonials { padding-top: 36px; padding-bottom: 36px; }

  /* Stats */
  .stat-number { font-size: 20px; }

  /* CTA */
  .cta-final { padding: 40px 16px; }
  .cta-final h2 { font-size: 22px; }

  /* Testimonial card */
  .testimonial-card { width: 240px; }
}