/* YouWebMail — Design system v3.0
   Level: Linear / Vercel / Stripe
   ================================ */

/* ─── RESET ─────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
img, video, svg { display: block; max-width: 100% }
button { cursor: pointer; border: none; background: none; font: inherit }
a { text-decoration: none; color: inherit }
ul, ol { list-style: none }
input, textarea, select { font: inherit }
html { scroll-behavior: smooth }

/* ─── TOKENS ─────────────────── */
:root {
  /* Backgrounds — deep navy, very little chroma */
  --c-bg:        #06101e;
  --c-bg-1:      #091525;
  --c-surface:   #0c1c30;
  --c-surface-1: #102240;
  --c-surface-2: #152d52;

  /* Brand blue — single primary role */
  --c-blue:      #3b82f6;
  --c-blue-lt:   #60a5fa;
  --c-blue-dim:  rgba(59,130,246,.12);
  --c-blue-rim:  rgba(59,130,246,.22);

  /* Violet — software accent, used sparingly */
  --c-violet:    #7c3aed;
  --c-violet-lt: #a78bfa;

  /* Text — solid, no gradients */
  --c-text:      #e2eeff;
  --c-muted:     #6b89aa;
  --c-dim:       #2e4a68;

  /* Borders — single, thin */
  --c-border:    #162540;
  --c-border-lt: #1d3358;

  /* Status */
  --c-green:     #22c55e;
  --c-amber:     #f59e0b;
  --c-red:       #ef4444;

  /* Shadows — clean, not glow-heavy */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
  --shadow:    0 4px 16px rgba(0,0,0,.5);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.55);

  /* Radii — restrained */
  --r-xs: 4px;
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-pill: 9999px;

  /* Spacing scale */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;

  /* Legacy aliases (HTML uses these) */
  --sp-1: var(--s-2);
  --sp-2: var(--s-4);
  --sp-3: var(--s-6);
  --sp-4: var(--s-8);
  --sp-6: var(--s-12);
  --sp-8: var(--s-16);
  --sp-12: var(--s-24);
  --sp-16: 8rem;
  --c-text-muted: var(--c-muted);
  --c-text-dim: var(--c-dim);
  --c-primary: var(--c-blue);
  --c-primary-lt: var(--c-blue-lt);
  --c-primary-bg: var(--c-blue-dim);
  --c-primary-rim: var(--c-blue-rim);
  --c-primary-dk: #2563eb;
  --c-accent: #0ea5e9;
  --c-violet-bg: rgba(124,58,237,.08);
  --c-violet-lt: var(--c-violet-lt);
  --c-border-lt: var(--c-border-lt);
  --c-border-glow: rgba(59,130,246,.3);
  --c-glass: rgba(12,28,48,.7);
  --c-glass-lt: rgba(16,34,64,.6);
  --c-success: var(--c-green);
  --c-warning: var(--c-amber);
  --c-error: var(--c-red);
  --grad-primary: linear-gradient(135deg, #3b82f6, #0ea5e9);
  --grad-primary2: linear-gradient(135deg, #3b82f6, #7c3aed);
  --grad-hero: linear-gradient(160deg, rgba(6,16,30,.96) 0%, rgba(9,21,37,.88) 50%, rgba(6,16,30,.82) 100%);
  --grad-section: none;
  --grad-card: none;
  --shadow-glow: 0 0 0 1px var(--c-blue-rim), 0 8px 24px rgba(59,130,246,.15);
  --shadow-glow-v: 0 0 0 1px rgba(124,58,237,.2), 0 8px 24px rgba(124,58,237,.15);
  --shadow-card: var(--shadow);
  --shadow-sm: var(--shadow-sm);
  --shadow-xl: 0 16px 48px rgba(0,0,0,.65);
  --shadow-lg: var(--shadow-lg);
  --r-full: var(--r-pill);

  /* Timing */
  --t-fast: 80ms ease-out;
  --t:      160ms ease-out;
  --t-slow: 320ms cubic-bezier(.4,0,.2,1);

  /* Layout */
  --font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --max-w: 1200px;
  --nav-h: 64px;
  --section-py: clamp(5rem, 10vw, 9rem);
}

/* ─── BASE ───────────────────── */
body {
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Subtle grid — barely visible, purposeful not decorative */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(59,130,246,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,.025) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
  z-index: 0;
}

.container {
  position: relative;
  z-index: 1;
  width: min(var(--max-w), calc(100% - 2.5rem));
  margin-inline: auto;
}

section {
  padding-block: var(--section-py);
  position: relative;
}

/* ─── TYPOGRAPHY ─────────────── */
h1, h2, h3, h4, h5 {
  line-height: 1.15;
  font-weight: 700;
  color: var(--c-text);
  text-wrap: balance;
  letter-spacing: -0.02em;
}

h1 {
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

h2 { font-size: clamp(1.6rem, 3.2vw, 2.6rem) }
h3 { font-size: clamp(1.05rem, 1.8vw, 1.35rem); font-weight: 600 }
h4 { font-size: 1rem; font-weight: 600 }

p {
  color: var(--c-muted);
  max-width: 62ch;
  line-height: 1.75;
  text-wrap: pretty;
}

/* No gradient text — solid, meaningful color only */
.gradient-text   { color: var(--c-blue-lt) }
.gradient-text-vp { color: var(--c-violet-lt) }

.section-label {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-blue);
  margin-bottom: var(--s-4);
}

.section-header { margin-bottom: var(--s-16) }
.section-header p { font-size: 1.05rem; margin-top: var(--s-4) }

/* Suppress sec-num: these are decorative scaffolding */
.sec-num { display: none }

/* Suppress grad-underline: use clean typography instead */
.grad-underline { position: static }
.grad-underline::after { display: none }

/* ─── NAV ────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background var(--t-slow), border-color var(--t-slow);
  border-bottom: 1px solid transparent;
}

.nav.scrolled {
  background: rgba(6,16,30,.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--c-border-lt);
  box-shadow: 0 1px 0 var(--c-border);
}

.nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  transition: opacity var(--t);
}
.nav-logo:hover { opacity: .75 }
.nav-logo img { height: 28px; width: auto }
.nav-logo-text { color: var(--c-text) }
.nav-logo-text span { color: var(--c-blue-lt) }

.nav-menu {
  display: flex;
  align-items: center;
}

.nav-item { position: relative }

.nav-link {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: .4rem .7rem;
  font-size: .82rem;
  font-weight: 500;
  color: var(--c-muted);
  border-radius: var(--r-sm);
  transition: color var(--t), background var(--t);
  white-space: nowrap;
}
.nav-link:hover, .nav-link.active {
  color: var(--c-text);
  background: rgba(255,255,255,.04);
}
.nav-link.active { color: var(--c-blue-lt) }
.nav-link svg { width: 11px; height: 11px; transition: transform var(--t); flex-shrink: 0; opacity: .5 }
.nav-item:hover > .nav-link svg { transform: rotate(180deg); opacity: .8 }

.nav-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 210px;
  background: var(--c-surface-1);
  border: 1px solid var(--c-border-lt);
  border-radius: var(--r-lg);
  padding: 5px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t), visibility var(--t), transform var(--t);
  z-index: 100;
}
.nav-item:hover .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown a {
  display: block;
  padding: .48rem .75rem;
  font-size: .82rem;
  color: var(--c-muted);
  border-radius: var(--r-sm);
  transition: color var(--t), background var(--t);
}
.nav-dropdown a:hover {
  color: var(--c-text);
  background: rgba(255,255,255,.05);
}

.nav-cta-btn {
  background: var(--c-blue) !important;
  color: #fff !important;
  padding: .46rem 1rem !important;
  border-radius: var(--r) !important;
  font-weight: 600 !important;
  font-size: .82rem !important;
  transition: background var(--t), transform var(--t) !important;
  letter-spacing: .01em;
  box-shadow: none !important;
}
.nav-cta-btn:hover {
  background: var(--c-blue-lt) !important;
  transform: translateY(-1px) !important;
  box-shadow: none !important;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--s-2);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 20px; height: 1.5px;
  background: var(--c-muted);
  border-radius: 2px;
  transition: var(--t-slow);
}
.nav-toggle.open span { background: var(--c-text) }
.nav-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg) }
.nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0) }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg) }

.nav-mobile {
  display: none;
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0;
  background: rgba(6,16,30,.98);
  border-bottom: 1px solid var(--c-border-lt);
  padding: var(--s-6) var(--s-8) var(--s-8);
  max-height: calc(100vh - var(--nav-h));
  overflow-y: auto;
  z-index: 999;
}
.nav-mobile.open { display: block }
.nav-mobile-item { border-bottom: 1px solid var(--c-border) }
.nav-mobile-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-4) 0;
  font-weight: 500;
  font-size: .88rem;
  color: var(--c-text);
  width: 100%;
  text-align: left;
}
.nav-mobile-sub { padding: 0 0 var(--s-4) var(--s-6) }
.nav-mobile-sub a {
  display: block;
  padding: .4rem 0;
  font-size: .83rem;
  color: var(--c-muted);
  transition: color var(--t);
}
.nav-mobile-sub a:hover { color: var(--c-blue-lt) }

/* ─── BUTTONS ────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  padding: .7em 1.6em;
  font-size: .875rem;
  font-weight: 600;
  border-radius: var(--r);
  transition: background var(--t), border-color var(--t), transform var(--t), color var(--t);
  white-space: nowrap;
  letter-spacing: .005em;
  cursor: pointer;
}

/* Primary: solid fill — no shadow ring */
.btn-primary {
  background: var(--c-blue);
  color: #fff;
  border: 1px solid transparent;
}
.btn-primary:hover { background: #2563eb; transform: translateY(-1px) }
.btn-primary:active { transform: translateY(0); background: #1d4ed8 }

/* Outline: single clean border */
.btn-outline {
  border: 1px solid var(--c-border-lt);
  color: var(--c-muted);
  background: transparent;
}
.btn-outline:hover {
  border-color: var(--c-blue);
  color: var(--c-blue-lt);
  background: var(--c-blue-dim);
}

.btn-ghost { color: var(--c-blue-lt); font-size: .875rem; padding: .5em 0 }
.btn-ghost:hover { color: var(--c-text) }

.btn-lg { padding: .82em 1.9em; font-size: .93rem; border-radius: var(--r-lg) }
.btn-sm { padding: .42em 1em; font-size: .78rem; border-radius: var(--r-sm) }

.btn-green {
  background: #16a34a;
  color: #fff;
  border: 1px solid transparent;
}
.btn-green:hover { background: #15803d; transform: translateY(-1px) }

/* ─── HERO ───────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-slider {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero-slide.active { opacity: 1 }
.hero-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-hero);
}

/* Bottom fade — subtle, not harsh */
.hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 160px;
  background: linear-gradient(0deg, var(--c-bg) 0%, transparent 100%);
  z-index: 2;
  pointer-events: none;
}

.hero .container { z-index: 3 }

.hero-content {
  position: relative;
  z-index: 3;
  padding-top: var(--nav-h);
  max-width: 680px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  background: rgba(59,130,246,.08);
  border: 1px solid rgba(59,130,246,.18);
  border-radius: var(--r-pill);
  padding: .32em .9em;
  font-size: .72rem;
  font-weight: 600;
  color: var(--c-blue-lt);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: var(--s-5);
}

.hero-badge::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c-blue);
  box-shadow: 0 0 8px var(--c-blue);
  animation: blink 2s ease-in-out infinite;
}

.hero h1 {
  color: #fff;
  margin-bottom: var(--s-5);
}

/* Clean span — no gradient on headlines */
.hero h1 .hi { color: var(--c-blue-lt) }

.hero-sub {
  font-size: clamp(.95rem, 1.8vw, 1.1rem);
  color: rgba(226,238,255,.62);
  max-width: 52ch;
  margin-bottom: var(--s-10);
  line-height: 1.75;
}

.hero-actions { display: flex; gap: var(--s-4); flex-wrap: wrap }
.hero-text { animation: heroFadeUp .55s ease both }

/* Progress bars for slides */
.hero-progress-bars {
  position: absolute;
  bottom: var(--s-8);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: .5rem;
  z-index: 4;
}
.hero-pbar {
  height: 2px;
  width: 40px;
  border-radius: 2px;
  background: rgba(255,255,255,.15);
  overflow: hidden;
  cursor: pointer;
  border: none;
  padding: 0;
}
.hero-pbar-fill { height: 100%; width: 0; background: var(--c-blue); border-radius: 2px; transition: width 6s linear }
.hero-pbar.active .hero-pbar-fill { width: 100% }

/* Ambient orbs — very subtle, purposeful */
.hero-orb {
  position: absolute; border-radius: 50%; pointer-events: none;
  filter: blur(100px); opacity: .35;
}
.hero-orb-1 { width: 480px; height: 480px; background: rgba(59,130,246,.18); top: -120px; left: -120px }
.hero-orb-2 { width: 360px; height: 360px; background: rgba(124,58,237,.12); top: 80px; right: -80px }
.hero-orb-3 { display: none }

/* Status chip */
.hero-status {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-size: .72rem;
  color: rgba(34,197,94,.8);
  margin-bottom: var(--s-4);
  letter-spacing: .02em;
}
.hero-status .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34,197,94,.6);
  animation: blink 2s infinite;
}

/* Experience badge */
.experience-badge {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-size: .74rem;
  font-weight: 600;
  color: var(--c-muted);
  margin-bottom: var(--s-5);
  letter-spacing: .01em;
}
.experience-badge svg { color: var(--c-blue); flex-shrink: 0 }

/* ─── TRUST BAR ──────────────── */
.trust-bar {
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  padding-block: var(--s-5);
}
.trust-bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  flex-wrap: wrap;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .76rem;
  font-weight: 500;
  color: var(--c-muted);
}
.trust-item svg { color: var(--c-blue); flex-shrink: 0 }
.trust-item span { color: var(--c-text) }

/* ─── STATS ──────────────────── */
.stats {
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  padding-block: var(--s-16);
}

/* Stats grid — clean numerals, no rings, no gradient text */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--s-12);
  text-align: center;
}

.stat-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
}

/* Hide SVG rings — hero-metric template ban */
.stat-ring-svg { display: none }

.stat-number {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--c-text);
  line-height: 1;
  letter-spacing: -0.03em;
  display: block;
  /* No gradient */
}

.stat-label {
  font-size: .72rem;
  color: var(--c-muted);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-top: 0;
  display: block;
}

/* Metric bars */
.metric-bar { }
.metric-label {
  display: flex;
  justify-content: space-between;
  font-size: .72rem;
  color: var(--c-muted);
  margin-bottom: var(--s-2);
  font-weight: 500;
}
.metric-track {
  height: 3px;
  background: var(--c-border-lt);
  border-radius: 3px;
  overflow: hidden;
}
.metric-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--c-blue);
  width: 0;
  transition: width 1.4s cubic-bezier(.4,0,.2,1);
}

/* ─── CARDS ──────────────────── */
/* Clean dark surface — no glassmorphism as default */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--s-8);
  transition: border-color var(--t-slow), transform var(--t-slow);
  display: flex;
  flex-direction: column;
}
.card:hover {
  border-color: var(--c-border-lt);
  transform: translateY(-3px);
}

.card-icon {
  width: 42px; height: 42px;
  border-radius: var(--r);
  display: grid;
  place-items: center;
  background: var(--c-blue-dim);
  border: 1px solid var(--c-blue-rim);
  margin-bottom: var(--s-5);
  flex-shrink: 0;
}
.card-icon svg { width: 20px; height: 20px; color: var(--c-blue-lt) }

.card h3 { margin-bottom: var(--s-3); font-size: 1rem }
.card p { font-size: .86rem; margin: 0; line-height: 1.65 }

.card-link {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  margin-top: auto;
  padding-top: var(--s-6);
  font-size: .83rem;
  font-weight: 600;
  color: var(--c-blue-lt);
  transition: gap var(--t);
}
.card-link:hover { gap: .55em }
.card-link svg { width: 13px; height: 13px }

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-6);
}

/* ─── PRICING ────────────────── */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--s-6);
  align-items: start;
}

.pricing-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--s-10) var(--s-8);
  transition: border-color var(--t-slow);
  position: relative;
  display: flex;
  flex-direction: column;
  /* No shadow here — border is enough */
}
.pricing-card.featured {
  border-color: var(--c-blue);
  background: var(--c-surface-1);
}

.pricing-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-blue);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  padding: .25em 1em;
  border-radius: var(--r-pill);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pricing-name { font-size: 1rem; font-weight: 700; margin-bottom: var(--s-2); color: var(--c-text) }

/* Price: solid color, not gradient */
.pricing-price {
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--c-text);
  line-height: 1;
  margin-block: var(--s-6);
  letter-spacing: -0.03em;
}
.pricing-price span { font-size: .9rem; color: var(--c-muted); font-weight: 400 }

.pricing-features {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-block: var(--s-8);
  flex: 1;
}
.pricing-features li {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  font-size: .84rem;
  color: var(--c-muted);
}
.pricing-features li::before {
  content: '';
  width: 14px; height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(34,197,94,.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%2322c55e' d='M4.9 8.5L2.2 5.8 1 7 4.9 10.9 11 4.8 9.8 3.6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 9px;
  border: 1px solid rgba(34,197,94,.2);
}

/* ─── SECTION BACKGROUNDS ────── */
.section-alt { background: var(--c-surface) }

/* Clean single-pixel separators */
section.section-alt::before {
  content: '';
  position: absolute;
  top: 0; left: var(--s-8); right: var(--s-8);
  height: 1px;
  background: var(--c-border);
}

/* Suppress extra bottom border on alt sections */
section.section-alt::after { display: none }

/* ─── FEATURE SPLIT ──────────── */
.feature-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
}
.feature-split.reverse { direction: rtl }
.feature-split.reverse > * { direction: ltr }

.feature-split-img {
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  border: 1px solid var(--c-border);
}
.feature-split-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.4,0,.2,1);
}
.feature-split-img:hover img { transform: scale(1.03) }

.feature-list { display: flex; flex-direction: column; gap: var(--s-6); margin-top: var(--s-8) }
.feature-item { display: flex; gap: var(--s-5); align-items: flex-start }
.feature-item-icon {
  width: 34px; height: 34px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  background: var(--c-blue-dim);
  border: 1px solid var(--c-blue-rim);
}
.feature-item-icon svg { width: 15px; height: 15px; color: var(--c-blue-lt) }
.feature-item h4 { margin-bottom: .2em; font-size: .9rem }
.feature-item p { font-size: .83rem; margin: 0 }

/* ─── PARTNERS ───────────────── */
.partners { background: var(--c-surface); overflow: hidden }

.partners-label {
  text-align: center;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-dim);
  margin-bottom: var(--s-8);
}

.partners-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--s-12);
}

.partner-logo {
  filter: grayscale(1) brightness(.45);
  opacity: .5;
  transition: filter var(--t-slow), opacity var(--t-slow);
  max-height: 28px;
  width: auto;
}
.partner-logo:hover { filter: grayscale(0) brightness(1); opacity: 1 }

/* Marquee override */
.marquee-wrap { overflow: hidden; position: relative }
.marquee-wrap::before, .marquee-wrap::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 2; pointer-events: none;
}
.marquee-wrap::before { left: 0; background: linear-gradient(90deg, var(--c-surface), transparent) }
.marquee-wrap::after  { right: 0; background: linear-gradient(-90deg, var(--c-surface), transparent) }

.marquee-track {
  display: flex; gap: 4rem; align-items: center;
  animation: marquee 280s linear infinite;
  width: max-content;
}
.marquee-track:hover { animation-play-state: paused }

@keyframes marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }

/* ─── KIT DIGITAL ────────────── */
.kit-digital {
  background: var(--c-surface-1);
  border: 1px solid #1a3d2a;
  border-radius: var(--r-lg);
  padding: var(--s-12) var(--s-10);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--s-10);
}

.kit-badge {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  background: rgba(22,163,74,.1);
  border: 1px solid rgba(22,163,74,.2);
  border-radius: var(--r-pill);
  padding: .25em .8em;
  font-size: .68rem;
  font-weight: 700;
  color: #4ade80;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: var(--s-4);
}

.kit-digital h3 { color: var(--c-text); font-size: 1.4rem }
.kit-digital p { color: var(--c-muted); max-width: 50ch }
.kit-amount { text-align: center; flex-shrink: 0 }
.kit-amount-num { font-size: clamp(2rem, 5vw, 3.5rem); color: #4ade80; font-weight: 800; line-height: 1 }
.kit-amount-label { color: rgba(74,222,128,.5); font-size: .78rem; margin-top: var(--s-2) }

/* ─── TAGS ───────────────────── */
.tag {
  display: inline-block;
  padding: .2em .65em;
  background: var(--c-blue-dim);
  border: 1px solid var(--c-blue-rim);
  border-radius: var(--r-pill);
  font-size: .68rem;
  font-weight: 600;
  color: var(--c-blue-lt);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.tag-blue   { background: rgba(59,130,246,.1); border-color: rgba(59,130,246,.2); color: var(--c-blue-lt) }
.tag-cyan   { background: rgba(6,182,212,.1);  border-color: rgba(6,182,212,.2);  color: #67e8f9 }
.tag-violet { background: rgba(124,58,237,.1); border-color: rgba(124,58,237,.2); color: var(--c-violet-lt) }
.tag-green  { background: rgba(34,197,94,.1);  border-color: rgba(34,197,94,.2);  color: #4ade80 }

/* ─── SOFTWARE CARDS ─────────── */
.software-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-6);
}

.software-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t-slow), transform var(--t-slow);
}
.software-card:hover {
  border-color: var(--c-border-lt);
  transform: translateY(-3px);
}

.software-card-img {
  width: 100%; height: 152px;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.4,0,.2,1);
}
/* Subtle desaturation reset on hover */
.sw-card-img { filter: saturate(.6); transition: filter .4s ease }
.software-card:hover .sw-card-img { filter: saturate(1) }

.software-card-body { padding: var(--s-6) }
.software-card-body h3 { margin: var(--s-3) 0 var(--s-2); font-size: .95rem }
.software-card-body p { font-size: .84rem; margin: 0; line-height: 1.6 }

.software-card-link {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  margin-top: var(--s-5);
  font-size: .82rem;
  font-weight: 600;
  color: var(--c-blue-lt);
  transition: gap var(--t);
}
.software-card-link:hover { gap: .55em }

/* ─── SECTION DIVIDER ────────── */
.section-divider {
  height: 1px;
  background: var(--c-border);
  margin: 0;
}

/* ─── HOSTING PLAN ROWS ──────── */
.hosting-row { display: flex; flex-direction: column; gap: var(--s-4) }

.hosting-plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-8);
  gap: var(--s-6);
  flex-wrap: wrap;
  transition: border-color var(--t), transform var(--t);
}
.hosting-plan:hover { border-color: var(--c-border-lt); transform: translateX(3px) }
.hosting-plan.featured { border-color: var(--c-blue) }
.hosting-plan .plan-name { font-weight: 700; font-size: .9rem; min-width: 80px }
.hosting-plan .plan-desc { color: var(--c-muted); font-size: .82rem; flex: 1 }
.hosting-plan .plan-price { font-size: 1.25rem; font-weight: 800; color: var(--c-text); white-space: nowrap }
.plan-badge {
  background: var(--c-blue); color: #fff;
  font-size: .62rem; font-weight: 700; padding: .15em .6em;
  border-radius: var(--r-pill); letter-spacing: .05em; text-transform: uppercase;
}

/* Price display — no gradient text */
.price-original { font-size: .75rem; color: var(--c-dim); text-decoration: line-through; display: none }
.price-original.show { display: block }
.annual-save {
  background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.2);
  color: #4ade80; font-size: .68rem; font-weight: 700; padding: .18em .6em;
  border-radius: var(--r-pill); display: none;
}
.annual-save.show { display: inline-block }

/* ─── PRICING TOGGLE ─────────── */
.pricing-toggle {
  display: flex; align-items: center; gap: var(--s-5);
  justify-content: center; margin-bottom: var(--s-8);
}
.toggle-label { font-size: .83rem; color: var(--c-muted); font-weight: 500 }
.toggle-label.active-label { color: var(--c-text) }
.toggle-switch {
  position: relative; width: 40px; height: 22px; cursor: pointer;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute }
.toggle-track {
  position: absolute; inset: 0; border-radius: 11px;
  background: var(--c-border-lt); transition: background .2s;
}
.toggle-switch input:checked + .toggle-track { background: var(--c-blue) }
.toggle-knob {
  position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: transform .2s; pointer-events: none;
}
.toggle-switch input:checked ~ .toggle-knob { transform: translateX(18px) }

/* ─── FAQ ACCORDION ──────────── */
.faq-list { display: flex; flex-direction: column; gap: var(--s-3); max-width: 720px; margin: 0 auto }
.faq-item {
  background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden;
}
.faq-q {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-5) var(--s-6); cursor: pointer; font-weight: 600; font-size: .88rem;
  color: var(--c-text); gap: var(--s-6); width: 100%; text-align: left; background: none;
}
.faq-q:hover { color: var(--c-blue-lt) }
.faq-icon {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--c-border-lt);
  display: grid; place-items: center; flex-shrink: 0; transition: all .2s;
}
.faq-item.open .faq-icon { background: var(--c-blue); border-color: var(--c-blue); transform: rotate(45deg) }
.faq-icon svg { width: 9px; height: 9px; color: var(--c-muted) }
.faq-item.open .faq-icon svg { color: #fff }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease, padding .3s ease }
.faq-item.open .faq-a { max-height: 300px }
.faq-a-inner { padding: 0 var(--s-6) var(--s-5); color: var(--c-muted); font-size: .86rem; line-height: 1.75 }

/* ─── NEWSLETTER ─────────────── */
.newsletter-form { display: flex; gap: var(--s-3); margin-top: var(--s-4); max-width: 320px }
.newsletter-input {
  flex: 1;
  background: var(--c-surface-1);
  border: 1px solid var(--c-border-lt);
  border-radius: var(--r);
  padding: .55em .85em; color: var(--c-text); font-size: .82rem;
  outline: none; transition: border-color .2s;
}
.newsletter-input::placeholder { color: var(--c-dim) }
.newsletter-input:focus { border-color: var(--c-blue) }
.newsletter-btn {
  background: var(--c-blue); color: #fff; border-radius: var(--r);
  padding: .55em .85em; font-size: .8rem; font-weight: 600; white-space: nowrap;
  transition: background .2s;
}
.newsletter-btn:hover { background: #2563eb }

/* ─── COPY PHONE ─────────────── */
.copy-phone { cursor: pointer; display: inline-flex; align-items: center; gap: .4em }

/* ─── TOAST ──────────────────── */
#toast-container {
  position: fixed; bottom: 5.5rem; left: 50%; transform: translateX(-50%);
  z-index: 9000; display: flex; flex-direction: column; gap: .5rem; pointer-events: none;
}
.toast {
  background: var(--c-surface-2); border: 1px solid var(--c-border-lt);
  border-radius: var(--r-lg); padding: .7rem 1.1rem;
  font-size: .83rem; color: var(--c-text);
  display: flex; align-items: center; gap: .6rem;
  box-shadow: var(--shadow-lg); pointer-events: auto;
  animation: toastIn .3s cubic-bezier(.34,1.56,.64,1) both;
  min-width: 220px; max-width: 340px;
}
.toast.out { animation: toastOut .22s ease forwards }
.toast .toast-icon { flex-shrink: 0 }

@keyframes toastIn { from { opacity: 0; transform: translateY(12px) scale(.94) } to { opacity: 1; transform: translateY(0) scale(1) } }
@keyframes toastOut { to { opacity: 0; transform: translateY(6px) } }

/* ─── BACK TO TOP ────────────── */
#back-top {
  position: fixed; bottom: 5.5rem; right: 1.25rem;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--c-surface-1); border: 1px solid var(--c-border-lt);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 600; opacity: 0; transform: translateY(8px);
  transition: all .25s ease; color: var(--c-blue-lt);
}
#back-top.show { opacity: 1; transform: translateY(0) }
#back-top:hover { border-color: var(--c-blue); background: var(--c-blue-dim) }
#back-top svg.arrow { width: 16px; height: 16px }
#back-top svg.ring { position: absolute; top: -3px; left: -3px; width: 46px; height: 46px; transform: rotate(-90deg) }
#back-top circle.track { fill: none; stroke: var(--c-border); stroke-width: 2 }
#back-top circle.fill  { fill: none; stroke: var(--c-blue); stroke-width: 2;
  stroke-dasharray: 138; stroke-dashoffset: 138; transition: stroke-dashoffset .1s linear }

/* ─── STICKY CTA ─────────────── */
#sticky-cta {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 800;
  background: rgba(6,16,30,.96); border-top: 1px solid var(--c-border-lt);
  padding: var(--s-4) var(--s-8);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-6);
  transform: translateY(100%); transition: transform .35s cubic-bezier(.4,0,.2,1);
}
#sticky-cta.show { transform: translateY(0) }
#sticky-cta .cta-text { font-size: .85rem; color: var(--c-muted) }
#sticky-cta .cta-text strong { color: var(--c-text); display: block; font-size: .9rem }
#sticky-cta .cta-actions { display: flex; gap: var(--s-4); flex-shrink: 0 }

/* ─── READING PROGRESS ───────── */
#progress-bar {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: var(--c-blue);
  z-index: 10000; transition: width .1s linear;
}

/* ─── SKIP LINK ──────────────── */
.skip-link {
  position: absolute; top: -100px; left: 1rem;
  background: var(--c-blue); color: #fff; padding: .5rem 1rem;
  border-radius: var(--r); font-weight: 600; z-index: 20000; transition: top .2s;
}
.skip-link:focus { top: 1rem }

/* ─── PROMO BANNER ───────────── */
.promo-banner {
  background: var(--c-surface-1); border-bottom: 1px solid var(--c-border);
  text-align: center; padding: .5rem 1rem;
  font-size: .76rem; color: var(--c-muted); font-weight: 500;
  position: relative; z-index: 999;
}
.promo-banner strong { color: var(--c-blue-lt) }
.promo-banner a { color: var(--c-blue-lt) }

/* ─── SERVICE TYPE BORDERS ────── */
.svc-blue   { border-top: 2px solid var(--c-blue) !important }
.svc-cyan   { border-top: 2px solid #0ea5e9 !important }
.svc-violet { border-top: 2px solid var(--c-violet) !important }

/* ─── ONLINE INDICATOR ────────── */
.online-indicator {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,.5);
  animation: blink 2s infinite; display: inline-block;
}

/* ─── SCROLL DOTS ────────────── */
#scroll-dots {
  position: fixed; right: 1rem; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: .45rem; z-index: 500;
}
.scroll-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-dim); border: none; cursor: pointer;
  transition: background .2s, transform .2s; display: block;
}
.scroll-dot.active { background: var(--c-blue); transform: scale(1.4) }
@media(max-width:768px){#scroll-dots{display:none}}

/* ─── FLOAT CONTACT ──────────── */
#float-contact {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%);
  z-index: 700; display: flex; flex-direction: column;
}
.float-btn {
  width: 40px; padding: .6rem 0;
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  background: var(--c-surface-1); border: 1px solid var(--c-border);
  border-right: none; font-size: .52rem; font-weight: 700; color: var(--c-muted);
  text-transform: uppercase; letter-spacing: .04em; cursor: pointer;
  transition: background .2s, color .2s;
}
.float-btn:first-child { border-radius: var(--r) 0 0 0 }
.float-btn:last-child  { border-radius: 0 0 0 var(--r) }
.float-btn:hover { background: var(--c-surface-2) }
.float-btn svg { width: 16px; height: 16px; flex-shrink: 0 }
.float-btn.wa  { color: #4ade80 }
.float-btn.tel { color: var(--c-blue-lt) }
.float-btn.mail{ color: var(--c-violet-lt) }
@media(max-width:768px){#float-contact{display:none}}

/* ─── WHATSAPP BUTTON ────────── */
.whatsapp-btn {
  position: fixed; bottom: var(--s-10); right: 1.25rem;
  width: 48px; height: 48px; border-radius: 50%;
  background: #25d366; display: grid; place-items: center;
  box-shadow: var(--shadow); transition: transform var(--t); z-index: 1000;
}
.whatsapp-btn:hover { transform: scale(1.08) }
.whatsapp-btn svg { fill: #fff }

/* ─── COOKIE NOTICE ──────────── */
.cookie-notice {
  position: fixed; bottom: var(--s-6); left: 50%;
  transform: translateX(-50%) translateY(200%);
  width: min(560px, calc(100% - 2rem));
  background: var(--c-surface-1); border: 1px solid var(--c-border-lt);
  border-radius: var(--r-lg); padding: var(--s-5) var(--s-8);
  display: flex; align-items: center; gap: var(--s-8);
  box-shadow: var(--shadow-lg); z-index: 9999;
  transition: transform .5s cubic-bezier(.34,1.56,.64,1);
}
.cookie-notice.show { transform: translateX(-50%) translateY(0) }
.cookie-notice p { font-size: .8rem; margin: 0; flex: 1; color: var(--c-muted) }
.cookie-notice a { color: var(--c-blue-lt) }

/* ─── FOOTER ─────────────────── */
.footer {
  background: var(--c-bg-1);
  border-top: 1px solid var(--c-border);
  padding-top: var(--s-20);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: var(--s-12);
  padding-bottom: var(--s-12);
  border-bottom: 1px solid var(--c-border);
}

.footer-brand p { font-size: .84rem; margin-top: var(--s-4); max-width: 26ch; line-height: 1.7 }
.footer-contact { display: flex; flex-direction: column; gap: .5rem; margin-top: var(--s-5) }
.footer-contact a { font-size: .82rem; color: var(--c-dim); transition: color var(--t) }
.footer-contact a:hover { color: var(--c-blue-lt) }

.footer-heading {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--c-muted); margin-bottom: var(--s-5);
}

/* Generic footer nav links */
.footer-grid > div ul { display: flex; flex-direction: column; gap: .55rem }
.footer-grid > div a { font-size: .82rem; color: var(--c-dim); transition: color var(--t) }
.footer-grid > div a:hover { color: var(--c-text) }

.footer-links { display: flex; gap: var(--s-6) }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: var(--s-5); font-size: .74rem; color: var(--c-dim);
  flex-wrap: wrap; gap: var(--s-4);
}
.footer-bottom a { color: var(--c-dim); transition: color var(--t) }
.footer-bottom a:hover { color: var(--c-blue-lt) }

/* ─── PAGE HERO (inner pages) ── */
.page-hero {
  padding-top: calc(var(--nav-h) + var(--s-20));
  padding-bottom: var(--s-16);
  background: linear-gradient(180deg, var(--c-surface) 0%, var(--c-bg) 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero h1 { margin-bottom: var(--s-4) }
.page-hero p { font-size: 1.05rem; margin-inline: auto }

.breadcrumb {
  display: flex; align-items: center; justify-content: center;
  gap: .4em; font-size: .76rem; color: var(--c-dim); margin-bottom: var(--s-5);
}
.breadcrumb a { color: var(--c-dim); transition: color var(--t) }
.breadcrumb a:hover { color: var(--c-blue-lt) }

/* ─── METRIC BARS ────────────── */
/* Suppressed: hero-metric template */
.stat-ring-svg { display: none !important }

/* ─── HAS GLOW ───────────────── */
.has-glow { position: relative }

/* ─── ANIMATIONS ─────────────── */
@keyframes blink {
  0%, 100% { opacity: 1 }
  50%       { opacity: .4 }
}

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(20px) }
  to   { opacity: 1; transform: translateY(0) }
}

@keyframes waPulse {
  0%, 100% { box-shadow: var(--shadow) }
  50%       { box-shadow: var(--shadow), 0 0 0 8px rgba(37,211,102,0) }
}

/* Reveal — content visible by default, transitions in on scroll */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s cubic-bezier(.4,0,.2,1), transform .5s cubic-bezier(.4,0,.2,1);
}
.reveal.visible { opacity: 1; transform: translateY(0) }
.reveal-delay-1 { transition-delay: .07s }
.reveal-delay-2 { transition-delay: .14s }
.reveal-delay-3 { transition-delay: .21s }
.reveal-delay-4 { transition-delay: .28s }
.reveal-delay-5 { transition-delay: .35s }

.reveal-left  { transform: translateX(-18px) }
.reveal-right { transform: translateX(18px) }
.reveal-left.visible, .reveal-right.visible { transform: translateX(0) }

/* ─── UTILITIES ──────────────── */
.text-center { text-align: center }
.text-muted { color: var(--c-muted) }
.text-primary { color: var(--c-blue-lt) }
.text-dim { color: var(--c-dim) }
.mt-2 { margin-top: var(--s-4) }
.mt-4 { margin-top: var(--s-8) }

/* ─── RESPONSIVE ─────────────── */
@media (max-width: 1024px) {
  .nav-menu { display: none }
  .nav-toggle { display: flex }
  .feature-split { grid-template-columns: 1fr; gap: var(--s-10) }
  .feature-split.reverse { direction: ltr }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-10) }
  .kit-digital { grid-template-columns: 1fr }
}

@media (max-width: 768px) {
  :root { --section-py: clamp(3.5rem, 8vw, 6rem) }
  body::before { display: none }
  .footer-grid { grid-template-columns: 1fr }
  .pricing-card.featured { transform: none }
  .hero-actions { flex-direction: column }
  .hero-actions .btn { width: 100% }
  .stats-grid { grid-template-columns: repeat(3, 1fr) }
  .kit-digital { padding: var(--s-8) var(--s-6) }
  #sticky-cta { flex-direction: column; text-align: center }
  #sticky-cta .cta-actions { width: 100%; justify-content: center }
  .cookie-notice { flex-direction: column; padding: var(--s-5) }
  .hosting-plan { gap: var(--s-4) }
}

@media (max-width: 480px) {
  .btn-lg { padding: .8em 1.5em }
  .pricing-price { font-size: 2.4rem }
}

/* ─── FOCUS STATES ───────────── */
:focus-visible {
  outline: 2px solid var(--c-blue);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* ─── REDUCED MOTION ─────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none }
}

/* ─── PRINT ──────────────────── */
@media print {
  .nav, .nav-mobile, #sticky-cta, #back-top, #scroll-dots,
  #float-contact, .whatsapp-btn, .cookie-notice, .promo-banner,
  #progress-bar, .hero-orb, body::before { display: none !important }
  body { background: #fff; color: #000 }
  a[href]::after { content: " (" attr(href) ")" }
}

/* ════════════════════════════════════════════════════
   MEJORAS VISUALES v4.0 — 12 efectos premium
   ════════════════════════════════════════════════════ */

/* ── C1: HERO CON VÍDEO ───────────────────────────── */
.hero-video {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
}
.hero-video video {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .45;
}
/* Animated gradient fallback when no video */
.hero-gradient-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 40%, rgba(59,130,246,.2) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 60%, rgba(124,58,237,.15) 0%, transparent 60%),
    radial-gradient(ellipse 100% 100% at 50% 50%, rgba(6,182,212,.08) 0%, transparent 70%);
  animation: gradientShift 12s ease-in-out infinite alternate;
}
@keyframes gradientShift {
  0%   { filter: hue-rotate(0deg) brightness(1) }
  50%  { filter: hue-rotate(15deg) brightness(1.1) }
  100% { filter: hue-rotate(-10deg) brightness(.95) }
}

/* Floating particles in hero */
.hero-particles { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none }
.particle {
  position: absolute;
  border-radius: 50%;
  background: var(--c-blue);
  opacity: 0;
  animation: particleFloat linear infinite;
}
@keyframes particleFloat {
  0%   { opacity: 0; transform: translateY(0) scale(0) }
  10%  { opacity: .6 }
  90%  { opacity: .2 }
  100% { opacity: 0; transform: translateY(-100vh) scale(.5) }
}

/* ── C2: SCROLL REVEALS CINEMATOGRÁFICOS ──────────── */
.reveal-zoom { opacity: 0; transform: scale(.94); transition: opacity .55s ease, transform .55s ease }
.reveal-zoom.visible { opacity: 1; transform: scale(1) }
.reveal-blur { opacity: 0; filter: blur(8px); transition: opacity .6s ease, filter .6s ease }
.reveal-blur.visible { opacity: 1; filter: blur(0) }
.reveal-clip {
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transition: opacity .5s ease, clip-path .6s cubic-bezier(.4,0,.2,1);
}
.reveal-clip.visible { opacity: 1; clip-path: inset(0 0 0% 0) }

/* ── C3: SOFTWARE TABS INTERACTIVOS ───────────────── */
.sw-tabs {
  background: var(--c-surface);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--c-border);
}
.sw-tab-nav {
  display: flex;
  overflow-x: auto;
  border-bottom: 1px solid var(--c-border);
  scrollbar-width: none;
  background: var(--c-bg-1);
}
.sw-tab-nav::-webkit-scrollbar { display: none }
.sw-tab-btn {
  display: flex; align-items: center; gap: .6em;
  padding: .9rem 1.3rem;
  font-size: .82rem; font-weight: 600;
  color: var(--c-muted); white-space: nowrap;
  border: none; background: none; cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s, background .2s;
  flex-shrink: 0;
}
.sw-tab-btn:hover { color: var(--c-text); background: rgba(255,255,255,.03) }
.sw-tab-btn.active { color: var(--c-blue-lt); border-bottom-color: var(--c-blue) }
.sw-tab-btn svg { width: 16px; height: 16px; flex-shrink: 0 }

.sw-tab-content { display: none }
.sw-tab-content.active {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  animation: tabFadeIn .35s ease both;
}
@keyframes tabFadeIn { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: translateY(0) } }

.sw-tab-img {
  position: relative; overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--c-bg);
}
.sw-tab-img img { width: 100%; height: 100%; object-fit: cover; display: block }
/* 3D CSS mockup overlay */
.sw-tab-img::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(59,130,246,.08) 0%, transparent 60%);
  pointer-events: none;
}
.sw-tab-info { padding: 2.5rem; display: flex; flex-direction: column; justify-content: center }
.sw-tab-tag { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--c-blue); margin-bottom: .75rem }
.sw-tab-info h3 { font-size: 1.4rem; font-weight: 800; margin-bottom: .85rem; letter-spacing: -.02em }
.sw-tab-info p { font-size: .9rem; color: var(--c-muted); line-height: 1.75; margin-bottom: 1.25rem }
.sw-modules {
  display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.5rem;
}
.sw-module-chip {
  font-size: .7rem; font-weight: 600; padding: .22em .7em;
  background: var(--c-blue-dim); border: 1px solid var(--c-blue-rim);
  border-radius: var(--r-pill); color: var(--c-blue-lt);
}
@media(max-width:768px) {
  .sw-tab-content.active { grid-template-columns: 1fr }
  .sw-tab-img { aspect-ratio: 16/9 }
}

/* ── C4: TERMINAL / CÓDIGO ────────────────────────── */
.code-terminal {
  background: #0a0f1a;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;
}
.terminal-bar {
  display: flex; align-items: center; gap: .5rem;
  padding: .7rem 1rem;
  background: #0d1524; border-bottom: 1px solid var(--c-border);
}
.terminal-dot {
  width: 11px; height: 11px; border-radius: 50%;
}
.terminal-dot-r { background: #ff5f57 }
.terminal-dot-y { background: #ffbd2e }
.terminal-dot-g { background: #28c840 }
.terminal-title { font-size: .72rem; color: var(--c-dim); margin-left: auto; letter-spacing: .04em }
.terminal-body {
  padding: 1.25rem 1.5rem;
  font-size: .82rem;
  line-height: 1.9;
  color: #a8c8f0;
  min-height: 200px;
}
.t-comment { color: #4a6880 }
.t-key { color: #7dd3fc }
.t-str { color: #86efac }
.t-num { color: #fda4af }
.t-fn  { color: #c4b5fd }
.t-op  { color: #94a3b8 }
.t-cursor {
  display: inline-block; width: 9px; height: 1.1em;
  background: var(--c-blue); vertical-align: text-bottom;
  animation: cursorBlink .85s step-end infinite;
  margin-left: 1px;
}
@keyframes cursorBlink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ── C5: PARALLAX INTERIOR ────────────────────────── */
.parallax-bg {
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}
@media(max-width:768px) { .parallax-bg { background-attachment: scroll } }

/* ── C6: MOCKUP 3D ────────────────────────────────── */
.mockup-3d {
  perspective: 1200px;
  perspective-origin: 60% 40%;
}
.mockup-3d-inner {
  transform: rotateY(-12deg) rotateX(4deg);
  transition: transform .5s cubic-bezier(.4,0,.2,1);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 28px 28px 60px rgba(0,0,0,.55), -4px -4px 20px rgba(59,130,246,.08);
  border: 1px solid var(--c-border-lt);
}
.mockup-3d:hover .mockup-3d-inner {
  transform: rotateY(-4deg) rotateX(2deg);
}
/* Screen glare effect */
.mockup-3d-inner::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, transparent 100%);
  pointer-events: none; z-index: 2;
  border-radius: inherit;
}

/* ── C7: PRICING HOVER ────────────────────────────── */
.pricing-row-group:has(.hosting-plan:hover) .hosting-plan:not(:hover) {
  opacity: .55;
}
.hosting-plan {
  transition: border-color .2s, transform .2s, opacity .2s, box-shadow .2s;
}
.hosting-plan:hover {
  transform: translateX(6px) scale(1.01);
  box-shadow: var(--shadow-glow);
  opacity: 1 !important;
}

/* Animated check in pricing features */
@keyframes checkDraw {
  from { stroke-dashoffset: 30 }
  to   { stroke-dashoffset: 0 }
}
.animated-check { stroke-dasharray: 30; stroke-dashoffset: 30 }
.pricing-feature-item.visible .animated-check {
  animation: checkDraw .4s ease forwards;
}

/* ── C8: TIMELINE HORIZONTAL ──────────────────────── */
.process-timeline {
  position: relative;
  display: flex;
  gap: 0;
  counter-reset: step;
}
.process-timeline::before {
  content: '';
  position: absolute;
  top: 28px; left: 28px; right: 28px;
  height: 2px;
  background: var(--c-border);
  z-index: 0;
}
.timeline-line-fill {
  position: absolute;
  top: 28px; left: 28px;
  height: 2px;
  background: var(--c-blue);
  z-index: 1;
  width: 0;
  transition: width 1.2s cubic-bezier(.4,0,.2,1);
}
.timeline-line-fill.animate { width: calc(100% - 56px) }

.process-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 .75rem;
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.process-step.visible { opacity: 1; transform: translateY(0) }
.process-step:nth-child(2) { transition-delay: .15s }
.process-step:nth-child(3) { transition-delay: .3s }
.process-step:nth-child(4) { transition-delay: .45s }
.process-step:nth-child(5) { transition-delay: .6s }

.step-circle {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 2px solid var(--c-border);
  background: var(--c-bg);
  display: grid; place-items: center;
  margin-bottom: 1rem;
  transition: border-color .3s, background .3s, box-shadow .3s;
  font-size: .78rem; font-weight: 800; color: var(--c-muted);
}
.process-step.visible .step-circle {
  border-color: var(--c-blue);
  background: var(--c-blue-dim);
  color: var(--c-blue-lt);
  box-shadow: 0 0 18px rgba(59,130,246,.25);
}
.step-circle svg { width: 22px; height: 22px }
.step-label { font-size: .78rem; font-weight: 700; color: var(--c-text); margin-bottom: .3rem }
.step-desc { font-size: .72rem; color: var(--c-muted); line-height: 1.55; max-width: 120px; margin: 0 auto }

@media(max-width:768px) {
  .process-timeline { flex-direction: column; gap: 1.5rem }
  .process-timeline::before, .timeline-line-fill { display: none }
  .process-step { flex-direction: row; align-items: flex-start; text-align: left; gap: 1rem }
  .step-circle { flex-shrink: 0; margin-bottom: 0 }
  .step-desc { max-width: none }
}

/* ── C9: PARTNERS PREMIUM ─────────────────────────── */
.partners-premium {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1.25rem;
}
.partner-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  cursor: default;
  transition: border-color .25s, transform .25s, box-shadow .25s;
  position: relative;
  overflow: hidden;
}
.partner-card:hover {
  border-color: var(--c-blue-rim);
  transform: translateY(-3px);
  box-shadow: var(--shadow-glow);
}
.partner-card img {
  height: 36px; width: auto;
  filter: grayscale(1) brightness(.55);
  transition: filter .3s;
  object-fit: contain;
}
.partner-card:hover img { filter: grayscale(0) brightness(1) }
.partner-card-name { font-size: .72rem; font-weight: 600; color: var(--c-dim); letter-spacing: .04em; text-align: center }
.partner-card-type { font-size: .65rem; color: var(--c-blue); font-weight: 700; text-transform: uppercase; letter-spacing: .06em }

/* ── C10: TESTIMONIOS ─────────────────────────────── */
.testi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}
.testi-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 1.75rem;
  position: relative;
  transition: border-color .25s, transform .25s;
}
.testi-card:hover { border-color: var(--c-border-lt); transform: translateY(-3px) }
.testi-quote-icon {
  position: absolute; top: 1.25rem; right: 1.25rem;
  font-size: 3.5rem; line-height: 1; color: var(--c-blue);
  opacity: .12; font-family: Georgia, serif; pointer-events: none;
}
.testi-metric {
  display: flex; align-items: baseline; gap: .35rem;
  margin-bottom: 1rem;
}
.testi-metric-num {
  font-size: 2.4rem; font-weight: 900; color: var(--c-text); line-height: 1;
  letter-spacing: -.03em;
}
.testi-metric-label { font-size: .78rem; color: var(--c-blue-lt); font-weight: 600 }
.testi-quote {
  font-size: .9rem; color: var(--c-muted); line-height: 1.75;
  margin-bottom: 1.25rem; font-style: italic;
}
.testi-author { display: flex; align-items: center; gap: .75rem }
.testi-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--c-surface-2);
  border: 2px solid var(--c-blue-rim);
  display: grid; place-items: center;
  font-size: 1.1rem; flex-shrink: 0;
  overflow: hidden;
}
.testi-avatar img { width: 100%; height: 100%; object-fit: cover }
.testi-name { font-size: .85rem; font-weight: 700; color: var(--c-text) }
.testi-role { font-size: .75rem; color: var(--c-muted) }
.testi-stars { display: flex; gap: 2px; margin-top: .2rem }
.testi-star { color: #fbbf24; font-size: .75rem }

/* ── C11: MAPA DE ESPAÑA ──────────────────────────── */
.spain-map-wrap {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
}
.spain-map-wrap svg { width: 100%; height: auto }
.map-region { fill: var(--c-surface-1); stroke: var(--c-border); stroke-width: 1; transition: fill .3s }
.map-region:hover { fill: var(--c-blue-dim) }
.map-dot {
  fill: var(--c-blue);
  r: 5;
  opacity: 0;
  animation: dotAppear .4s ease forwards;
}
.map-pulse {
  fill: none;
  stroke: var(--c-blue);
  stroke-width: 2;
  opacity: 0;
  r: 5;
  animation: dotPulse 2.5s ease-out infinite;
}
@keyframes dotAppear { to { opacity: 1 } }
@keyframes dotPulse {
  0%   { r: 5; opacity: .7 }
  100% { r: 22; opacity: 0 }
}
.map-client-label {
  font-size: 8px; fill: var(--c-text); font-family: var(--font);
  font-weight: 600; opacity: 0; transition: opacity .3s;
}
.map-dot-group:hover .map-client-label { opacity: 1 }
.map-stats-row {
  display: flex; gap: 1.5rem; justify-content: center;
  margin-top: 1.5rem; flex-wrap: wrap;
}
.map-stat {
  text-align: center;
}
.map-stat-n { font-size: 1.6rem; font-weight: 800; color: var(--c-blue-lt); display: block; letter-spacing: -.02em }
.map-stat-l { font-size: .72rem; color: var(--c-muted); font-weight: 500; text-transform: uppercase; letter-spacing: .06em }

/* ── C12: BEFORE / AFTER SLIDER ───────────────────── */
.ba-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--c-border);
  cursor: col-resize;
  user-select: none;
  touch-action: pan-y;
}
.ba-after { display: block; width: 100%; height: auto }
.ba-before {
  position: absolute; inset: 0;
  overflow: hidden;
  width: 50%;
}
.ba-before img { display: block; height: 100%; width: auto; max-width: none; object-fit: cover }
.ba-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 3px;
  background: #fff;
  box-shadow: 0 0 12px rgba(0,0,0,.4);
  cursor: col-resize;
  z-index: 3;
  transform: translateX(-50%);
}
.ba-handle-knob {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 42px; height: 42px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center;
  color: #1e293b;
}
.ba-handle-knob svg { width: 20px; height: 20px }
.ba-label {
  position: absolute; top: 1rem;
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; padding: .25em .7em;
  border-radius: var(--r-pill); backdrop-filter: blur(8px);
}
.ba-label-before { left: 1rem; background: rgba(239,68,68,.85); color: #fff }
.ba-label-after  { right: 1rem; background: rgba(34,197,94,.85); color: #fff }

/* ── SECCIÓN COPY COMERCIAL ───────────────────────── */
.hero-guarantee {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.2);
  border-radius: var(--r-pill); padding: .3em .85em;
  font-size: .72rem; font-weight: 700; color: #4ade80;
  letter-spacing: .04em; margin-top: .75rem;
}
.hero-guarantee svg { width: 13px; height: 13px; flex-shrink: 0 }

.social-proof-bar {
  display: flex; align-items: center; gap: 1.25rem;
  flex-wrap: wrap; margin-top: 1rem;
}
.sp-item { display: flex; align-items: center; gap: .4rem; font-size: .76rem; color: var(--c-muted) }
.sp-num { font-weight: 800; color: var(--c-text); font-size: .85rem }

/* ── SECCIÓN "POR QUÉ NOSOTROS" ──────────────────── */
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}
.why-card {
  padding: 1.5rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  transition: border-color .25s, transform .25s;
}
.why-card:hover { border-color: var(--c-border-lt); transform: translateY(-3px) }
.why-num {
  font-size: 2rem; font-weight: 900; color: var(--c-blue);
  opacity: .25; line-height: 1; margin-bottom: .5rem;
  font-variant-numeric: tabular-nums;
}
.why-title { font-size: .92rem; font-weight: 700; margin-bottom: .4rem }
.why-desc { font-size: .83rem; color: var(--c-muted); line-height: 1.65; margin: 0 }