/* ══════════════════════════════════════════════════════════════
   VARIABLES Y RESET
══════════════════════════════════════════════════════════════ */
:root {
  --bg:         #060A08;
  --bg2:        #0B100D;
  --bg3:        #101510;
  --bg4:        #141A13;
  --green:      #00E5B5;
  --green2:     #00C99E;
  --green3:     #00A882;
  --glow:       rgba(0,229,181,.18);
  --glow2:      rgba(0,229,181,.07);
  --white:      #EDF5F1;
  --white2:      #D4E5DE;
  --white3:      #8BADA0;
  --white4:      #4A6058;
  --border:     rgba(0,229,181,.13);
  --border2:    rgba(237,245,241,.07);
  --r:          12px;
  --rs:         8px;
  --rl:         18px;
  --t:          .2s cubic-bezier(.4,0,.2,1);
  --font-display: 'Clash Display', 'Plus Jakarta Sans', sans-serif;
  --font-body:    'Plus Jakarta Sans', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.7;
  background: var(--bg);
  color: var(--white);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--white4); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,229,181,.45); }
/* Firefox scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--white4) transparent; }

/* ── Keyboard focus styles — WCAG 2.1 AA ── */
:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
:focus:not(:focus-visible) {
  outline: none;
}
.chip-btn:focus-visible,.day-btn:focus-visible,.nav-pill:focus-visible,
.act-btn:focus-visible,.btn:focus-visible,.cta-btn:focus-visible,
.cta-bottom-btn:focus-visible,.lang-btn:focus-visible,
.btn-nxt:focus-visible,.btn-prev:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(0,229,181,.18);
}

/* Textura fondo */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(0,229,181,.11) 0%, transparent 60%),
    radial-gradient(ellipse 45% 35% at 85% 85%, rgba(0,229,181,.05) 0%, transparent 60%),
    radial-gradient(ellipse 30% 25% at 15% 70%, rgba(0,229,181,.04) 0%, transparent 50%);
  pointer-events: none;
}
/* Grid texture overlay */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(0,229,181,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,181,.025) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 100%);
}

/* ══════════════════════════════════════════════════════════════
   LAYOUT
══════════════════════════════════════════════════════════════ */
.wrap { max-width: 960px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }

/* ══════════════════════════════════════════════════════════════
   NAVEGACIÓN
══════════════════════════════════════════════════════════════ */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: 60px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px;
  background: rgba(6,10,8,.7);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border2);
  transition: background .3s ease, box-shadow .3s ease;
}
.nav-brand { display: flex; align-items: center; gap: 10px; cursor: pointer; text-decoration: none; }
/* picture element must be display:contents so img acts as direct flex child of .nav-brand */
.nav-brand picture { display: contents; }
.nav-logo-img { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; object-fit: cover; transition: box-shadow .3s; }
.nav-logo-svg { width: 42px; height: 42px; flex-shrink: 0; box-shadow: 0 0 0 1.5px rgba(0,229,181,.18), 0 4px 14px rgba(0,229,181,.12); border-radius: 50%; transition: box-shadow .3s; }
.nav-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -.015em;
  color: var(--white);
}
.nav-wordmark em { font-style: normal; color: var(--green); }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.nav-pill {
  font-family: var(--font-body);
  font-size: .82rem; font-weight: 600;
  padding: 7px 16px; border-radius: 100px; cursor: pointer;
  transition: var(--t); border: 1px solid transparent;
  -webkit-appearance: none; appearance: none;
}
.nav-pill.ghost { background: transparent; border-color: var(--border2); color: var(--white3); }
.nav-pill.ghost:hover { border-color: rgba(0,229,181,.35); color: var(--white2); }
.nav-pill.solid { background: linear-gradient(135deg,#00E5B5,#00C49A); color: var(--bg); border-color: var(--green); box-shadow: 0 3px 14px rgba(0,229,181,.22); }
.nav-pill.solid:hover { background: linear-gradient(135deg,#05f0c0,#00D4A8); box-shadow: 0 4px 18px rgba(0,229,181,.34); }
.nav-user-info { display: flex; align-items: center; gap: 7px; font-size: .82rem; color: var(--white3); }
.pulse-dot { width: 6px; height: 6px; background: var(--green); border-radius: 50%; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.65)} }

/* ══════════════════════════════════════════════════════════════
   PÁGINAS
══════════════════════════════════════════════════════════════ */
.page { display: none; padding-top: 72px; min-height: 100vh; }
.page.active { display: block; }
#page-landing { padding-top: 0; }

/* ── content-visibility: auto on below-fold landing sections ─────────────────
   Skips layout+paint of off-screen content, significant LCP/FID improvement.
   contain-intrinsic-size reserves approximate height while content is skipped. */
#landing-how,
#landing-overload,
#landing-features,
#landing-vs,
#landing-science,
#landing-equipment,
#landing-testimonials,
#landing-faq,
#landing-cta {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

/* ══════════════════════════════════════════════════════════════
   LANDING — HERO
══════════════════════════════════════════════════════════════ */
.hero {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 88px 24px 64px;
  position: relative;
  overflow: hidden;
}
/* 2-column hero on desktop: copy left + demo right */
.hero-inner {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  /* minmax(0, 1fr) prevents column blowout from wide child content */
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: 48px;
  overflow: hidden; /* hard clip — prevents any child from pushing layout beyond container */
}
.hero-copy {
  text-align: left;
  min-width: 0;  /* prevents grid overflow */
  overflow: hidden;
}
/* Left-align hero copy elements on desktop */
.hero-h1-left { text-align: left !important; }
.hero-copy .hero-tagline-row { justify-content: flex-start !important; }
.hero-copy .hero-p { text-align: left !important; padding: 0 !important; }
.hero-copy .hero-cta { align-items: flex-start !important; }
.hero-copy .hero-sp-row { display: inline-flex !important; margin: 20px 0 0 !important; }
.hero-copy .hero-trust-badges { justify-content: flex-start !important; }
.hero-copy .stats { justify-content: flex-start !important; }
.hero-copy .ai-engine-status { justify-content: flex-start !important; }
.hero-copy .marquee-strip { margin: 16px 0 0 !important; }
.hero-copy .badge.hero-badge { text-align: left !important; }
.hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-visual .hero-demo-preview {
  display: block !important; /* override mobile-hide */
  width: 100%;
  max-width: 440px;
  margin: 0 !important;
}
/* Mobile: single column, demo hidden */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: 0; max-width: 600px; overflow: visible; }
  .hero-copy { text-align: center; }
  .hero-h1-left { text-align: center !important; }
  .hero-copy .hero-tagline-row { justify-content: center !important; }
  .hero-copy .hero-p { text-align: center !important; }
  .hero-copy .hero-cta { align-items: center !important; }
  .hero-copy .hero-sp-row { margin: 20px auto 0 !important; }
  .hero-copy .hero-trust-badges { justify-content: center !important; flex-wrap: wrap !important; gap: 6px !important; }
  .hero-copy .stats { justify-content: center !important; }
  .hero-visual { display: none !important; }
}
/* ── Mobile trust badges: compact font for better fit ────────────────────── */
@media (max-width: 640px) {
  .trust-badge {
    font-size: .67rem !important;
    padding: 0 8px !important;
    height: 26px !important;
    letter-spacing: .05em !important;
  }
}

/* ── Stats labels: keep readable on all mobiles ─────────────────────────── */
@media (max-width: 640px) {
  .stat-l {
    font-size: max(9px, .6rem) !important;
    min-font-size: 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 84px;
  }
  .stat-n { font-size: clamp(1.4rem, 5.5vw, 1.8rem) !important; }
  .stat { min-width: 0; }
}

/* Extra tight for very small screens */
@media (max-width: 400px) {
  .hero-inner { max-width: 100% !important; padding: 0 14px !important; }
  .hero-h1 { font-size: clamp(1.8rem, 8.5vw, 2.2rem) !important; }
  .hero-p { font-size: .87rem !important; }
  .stats { gap: 0 !important; }
}

.badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--green); background: var(--glow2); border: 1px solid var(--border);
  padding: 6px 14px; border-radius: 100px;
  margin-bottom: 32px;
  animation: up .55s ease both;
}
.badge-dot { width: 5px; height: 5px; background: var(--green); border-radius: 50%; animation: pulse 2s infinite; }

/* HERO TITLE — centrado y sin distorsión */
.hero-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 6.5vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--white);
  margin-bottom: 22px;
  animation: up .55s .08s ease both;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: normal;
}
.hero-h1 .accent { color: var(--green); display: inline; }
.hero-h1 .line { display: block; white-space: nowrap; }

/* Línea decorativa bajo el accent */
.hero-h1 .accent-wrap {
  position: relative;
  display: inline-block;
}
.hero-h1 .accent-wrap::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--green) 0%, transparent 100%);
  border-radius: 1px;
}

.hero-p {
  font-size: 1.05rem; font-weight: 400; color: var(--white2);
  line-height: 1.72; max-width: 520px; margin: 0 auto 14px;
  animation: up .55s .16s ease both;
}
.hero-sci {
  font-size: .78rem; font-weight: 500; color: var(--white4);
  letter-spacing: .06em; margin-bottom: 40px;
  animation: up .55s .22s ease both;
}
.hero-sci strong { color: var(--white3); font-weight: 600; }

.hero-cta { animation: up .55s .3s ease both; }
.cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: .95rem; font-weight: 700;
  color: var(--bg); border: none;
  padding: 14px 30px; border-radius: var(--r); cursor: pointer;
  transition: var(--t); letter-spacing: -.01em;
  background: linear-gradient(135deg, #00E5B5 0%, #00C49A 100%);
  box-shadow: 0 4px 20px rgba(0,229,181,.3), 0 0 0 0 rgba(0,229,181,.4);
}
.cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,229,181,.45), 0 0 0 0 rgba(0,229,181,.2);
  background: linear-gradient(135deg, #05f0c0 0%, #00D4A8 100%);
}
.cta-btn:active { transform: translateY(0) scale(.98); }

/* Ghost secondary CTA */
.cta-ghost-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-body); font-size: .92rem; font-weight: 600;
  color: var(--white3); background: transparent;
  border: 1.5px solid var(--border); border-radius: var(--r);
  padding: 13px 22px; cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
  letter-spacing: -.01em; white-space: nowrap;
}
.cta-ghost-btn:hover {
  color: var(--white); border-color: rgba(0,229,181,.3);
  background: rgba(0,229,181,.05); transform: translateY(-2px);
}
.cta-ghost-btn:active { transform: translateY(0) scale(.98); }

/* Stats */
.stats {
  display: flex; justify-content: center; align-items: center; gap: 0;
  margin-top: 60px;
  background: rgba(11,16,13,.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0,229,181,.1);
  border-radius: var(--rl);
  overflow: hidden; animation: up .55s .38s ease both;
  box-shadow: 0 8px 32px rgba(0,0,0,.3), inset 0 1px 0 rgba(0,229,181,.08);
}
.stat { flex: 1; text-align: center; padding: 22px 16px; border-right: 1px solid var(--border2); }
.stat:last-child { border-right: none; }
.stat-n {
  font-family: var(--font-display); font-weight: 700; font-size: 1.8rem;
  color: var(--white); letter-spacing: -.02em; line-height: 1;
}
.stat-n span { color: var(--green); }
.stat-l { font-size: .68rem; font-weight: 500; color: var(--white3); letter-spacing: .08em; text-transform: uppercase; margin-top: 5px; }

@keyframes up { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
.fade { animation: up .4s ease both; }

/* ══════════════════════════════════════════════════════════════
   AUTH — LOGIN / REGISTER / VERIFY / RESET
══════════════════════════════════════════════════════════════ */
.auth-outer { max-width: 420px; margin: 0 auto; padding: 32px 24px 80px; }
.auth-card {
  background: rgba(11,16,13,.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0,229,181,.1);
  box-shadow: 0 24px 64px rgba(0,0,0,.4), inset 0 1px 0 rgba(0,229,181,.06);
  border-radius: var(--rl); padding: 34px 32px;
}
.auth-title {
  font-family: var(--font-display); font-weight: 700; font-size: 1.75rem;
  letter-spacing: -.025em; text-align: center; margin-bottom: 6px; color: var(--white);
}
.auth-sub {
  font-size: .88rem; color: var(--white3); text-align: center; margin-bottom: 26px; line-height: 1.7;
}
.auth-sub a { color: var(--green); text-decoration: none; cursor: pointer; font-weight: 600; }
.auth-sub a:hover { text-decoration: underline; }
/* Contextual hint when user came from CTA flow */
.auth-intent-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(57,255,140,.08);
  border: 1px solid rgba(57,255,140,.25);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 20px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--green);
  text-align: left;
  animation: up .3s ease both;
}
.auth-intent-hint svg { flex-shrink: 0; opacity: .8; }

/* Fields */
.field { margin-bottom: 16px; }
.field label {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--white3); margin-bottom: 7px;
}
.field input, .field select, .field textarea {
  width: 100%; background: var(--bg3); border: 1.5px solid var(--border2);
  border-radius: var(--rs); color: var(--white); font-family: var(--font-body);
  font-size: .95rem; font-weight: 400; padding: 12px 14px;
  transition: var(--t); outline: none;
  -webkit-appearance: none;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--green); background: var(--bg4);
  box-shadow: 0 0 0 3px var(--glow2);
}
.field input::placeholder, .field textarea::placeholder { color: var(--white4); }
.field input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* Captcha */
.captcha {
  background: var(--bg3); border: 1px solid var(--border2);
  border-radius: var(--rs); padding: 14px 16px; margin-bottom: 16px;
}
.captcha-label { font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--white4); margin-bottom: 6px; }
.captcha-q {
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 700;
  color: var(--green); letter-spacing: .04em; margin-bottom: 10px;
}
.captcha input {
  width: 100%; background: var(--bg4); border: 1.5px solid var(--border2);
  border-radius: var(--rs); color: var(--white); font-family: var(--font-body);
  font-size: .95rem; padding: 10px 13px; transition: var(--t); outline: none;
  -webkit-appearance: none;
}
.captcha input:focus { border-color: var(--green); }
.captcha input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: var(--font-body); font-weight: 700; cursor: pointer;
  transition: var(--t); border-radius: var(--rs); border: none;
  letter-spacing: -.01em;
}
.btn.full { width: 100%; }
.btn.green { background: linear-gradient(135deg,#00E5B5 0%,#00C49A 100%); color: var(--bg); font-size: .95rem; padding: 13px 20px; box-shadow: 0 4px 18px rgba(0,229,181,.26); }
.btn.green:hover { background: linear-gradient(135deg,#05f0c0 0%,#00D4A8 100%); transform: translateY(-1px); box-shadow: 0 6px 24px rgba(0,229,181,.36); }
.btn.green:active { transform: translateY(0); box-shadow: 0 2px 10px rgba(0,229,181,.2); }
.btn.outline { background: transparent; border: 1px solid var(--border2); color: var(--white3); font-size: .88rem; padding: 11px 20px; }
.btn.outline:hover { border-color: var(--white4); color: var(--white2); }
.btn.danger { background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.2); color: #f87171; font-size: .85rem; padding: 10px 18px; }
.btn.danger:hover { background: rgba(239,68,68,.18); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }

.divider { display: flex; align-items: center; gap: 12px; margin: 14px 0; color: var(--white4); font-size: .75rem; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border2); }

/* Password strength */
.pwd-hint { font-size: .75rem; margin-top: 5px; min-height: 18px; transition: var(--t); }

/* Forgot link */
.link-small { text-align: right; margin-bottom: 14px; margin-top: -8px; }
.link-small a { font-size: .78rem; color: var(--white3); text-decoration: none; cursor: pointer; }
.link-small a:hover { color: var(--green); }

/* Verify */
.verify-icon { font-size: 3.5rem; text-align: center; margin-bottom: 14px; }
.code-field {
  width: 100%; background: var(--bg3); border: 2px solid var(--border);
  border-radius: var(--rs); color: var(--green);
  font-family: var(--font-display); font-size: 2rem; font-weight: 700;
  letter-spacing: .35em; text-align: center; padding: 16px;
  outline: none; transition: var(--t); -webkit-appearance: none;
}
.code-field:focus { border-color: var(--green); background: var(--bg4); }
.resend-row { text-align: center; margin-top: 12px; }
.resend-row a { font-size: .8rem; color: var(--white3); cursor: pointer; }
.resend-row a:hover { color: var(--green); }

/* Alerts — with left accent border for hierarchy */
.alert {
  padding: 11px 14px 11px 16px;
  border-radius: var(--rs);
  font-size: .84rem; margin-bottom: 14px;
  display: none; font-weight: 500; line-height: 1.65;
  border-left: 3px solid currentColor;
  animation: alertIn .22s ease both;
}
@keyframes alertIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.alert.show { display: block; }
.alert.err  { background: rgba(239,68,68,.07); border: 1px solid rgba(239,68,68,.18); border-left: 3px solid #f87171; color: #fca5a5; }
.alert.ok   { background: rgba(0,229,181,.07); border: 1px solid rgba(0,229,181,.18); border-left: 3px solid var(--green); color: var(--green); }
.alert.info { background: rgba(107,138,126,.07); border: 1px solid var(--border2); border-left: 3px solid var(--white4); color: var(--white2); }

/* ══════════════════════════════════════════════════════════════
   GENERADOR
══════════════════════════════════════════════════════════════ */
.page-header { padding: 36px 0 28px; text-align: center; }
.page-title {
  font-family: var(--font-display); font-weight: 700; font-size: 2rem;
  letter-spacing: -.025em; margin-bottom: 7px; color: var(--white);
}
.page-sub { font-size: .9rem; color: var(--white3); line-height: 1.7; }

.form-shell { background: var(--bg2); border: 1px solid var(--border2); border-radius: var(--rl); overflow: hidden; margin-bottom: 28px; }

/* Progress bar */
.progress-bar {
  display: flex; border-bottom: 1px solid var(--border2);
  overflow-x: auto; scrollbar-width: none;
}
.progress-bar::-webkit-scrollbar { display: none; }
.pb-step {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 16px 10px; font-size: .72rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--white4); cursor: pointer; transition: var(--t);
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.pb-step.active { color: var(--white); border-bottom-color: var(--green); }
.pb-step.done { color: var(--green); }
.pb-num {
  width: 21px; height: 21px; border-radius: 50%; border: 1.5px solid currentColor;
  background: var(--bg3); display: flex; align-items: center; justify-content: center;
  font-size: .6rem; font-weight: 700; flex-shrink: 0;
}
.pb-step.done .pb-num { background: var(--green); border-color: var(--green); color: var(--bg); }

/* Panels */
.panel { display: none; padding: 32px; }
.panel.active { display: block; }
.panel-title { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; letter-spacing: -.02em; margin-bottom: 5px; color: var(--white); }
.panel-desc { font-size: .86rem; color: var(--white3); margin-bottom: 26px; line-height: 1.7; }

/* Form inputs */
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.frow3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.flabel { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--white3); margin-bottom: 7px; }
.finput {
  width: 100%; background: var(--bg3); border: 1.5px solid var(--border2);
  border-radius: var(--rs); color: var(--white); font-family: var(--font-body);
  font-size: .95rem; padding: 12px 13px; transition: var(--t); outline: none; -webkit-appearance: none;
}
.finput:focus { border-color: var(--green); background: var(--bg4); box-shadow: 0 0 0 3px var(--glow2); }
.finput::-webkit-inner-spin-button { -webkit-appearance: none; }
/* Override browser autofill white flash */
.finput:-webkit-autofill,
.finput:-webkit-autofill:hover,
.finput:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--bg3) inset;
  -webkit-text-fill-color: var(--white);
  caret-color: var(--white);
  transition: background-color 5000s ease-in-out 0s;
}

/* ── Preference sections (Panel 4) — Task 3: color-coded with explanations ── */
.pref-section {
  border-radius: var(--rm, 10px);
  padding: 18px 16px 16px;
  margin-bottom: 18px;
  border-left: 4px solid transparent;
  background: var(--bg3);
  transition: box-shadow .2s;
}
.pref-section:hover { box-shadow: 0 2px 16px rgba(0,0,0,.18); }
.pref-section-header {
  display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px;
}
.pref-section-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.pref-section-title {
  display: block;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  margin-bottom: 4px;
}
.pref-section-desc {
  font-size: .8rem; color: var(--white3); line-height: 1.7; margin: 0;
}
.pref-hint { font-size: .72rem; color: var(--white4); margin-top: 5px; }

/* Green — Favorites */
.pref-section--green  { border-left-color: #22c55e; }
.pref-icon--green     { background: rgba(34,197,94,.12); color: #22c55e; }
.pref-title--green    { color: #22c55e; }

/* Orange — Exclusions */
.pref-section--orange { border-left-color: #f97316; }
.pref-icon--orange    { background: rgba(249,115,22,.12); color: #f97316; }
.pref-title--orange   { color: #f97316; }

/* Red — Injuries */
.pref-section--red    { border-left-color: #ef4444; }
.pref-icon--red       { background: rgba(239,68,68,.12); color: #ef4444; }
.pref-title--red      { color: #ef4444; }

/* Purple — Emphasis */
.pref-section--purple { border-left-color: #a855f7; }
.pref-icon--purple    { background: rgba(168,85,247,.12); color: #a855f7; }
.pref-title--purple   { color: #a855f7; }

/* Preference section impact badge */
.pref-impact-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  padding: 3px 9px; border-radius: 20px; margin-top: 7px;
  line-height: 1.4; white-space: nowrap;
}
.pref-impact-badge--green  { background: rgba(34,197,94,.1);  color: #22c55e; border: 1px solid rgba(34,197,94,.2); }
.pref-impact-badge--orange { background: rgba(249,115,22,.1); color: #f97316; border: 1px solid rgba(249,115,22,.2); }
.pref-impact-badge--red    { background: rgba(239,68,68,.1);  color: #f87171; border: 1px solid rgba(239,68,68,.2); }
.pref-impact-badge--purple { background: rgba(168,85,247,.1); color: #c084fc; border: 1px solid rgba(168,85,247,.2); }
/* Section hover: enhanced glow per color */
.pref-section--green:hover  { box-shadow: 0 2px 20px rgba(0,0,0,.2), 0 0 0 1px rgba(34,197,94,.12); }
.pref-section--orange:hover { box-shadow: 0 2px 20px rgba(0,0,0,.2), 0 0 0 1px rgba(249,115,22,.12); }
.pref-section--red:hover    { box-shadow: 0 2px 20px rgba(0,0,0,.2), 0 0 0 1px rgba(239,68,68,.12); }
.pref-section--purple:hover { box-shadow: 0 2px 20px rgba(0,0,0,.2), 0 0 0 1px rgba(168,85,247,.12); }

/* Slider */
.slider-val {
  font-family: var(--font-display); font-weight: 700; font-size: 1.25rem;
  color: var(--green); letter-spacing: -.01em; margin-bottom: 9px;
}
.slider-val span { font-family: var(--font-body); font-weight: 400; font-size: .82rem; color: var(--white3); }
input[type=range] {
  width: 100%; height: 4px; background: var(--bg4); border-radius: 2px;
  outline: none; cursor: pointer; -webkit-appearance: none; appearance: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; background: var(--green);
  border-radius: 50%; cursor: pointer; box-shadow: 0 0 0 4px var(--glow); transition: var(--t);
}
input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.18); }

/* Toggle chips */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-btn {
  flex: 1; min-width: 88px; padding: 11px 12px;
  background: var(--bg3); border: 1.5px solid var(--border2); border-radius: var(--rs);
  color: var(--white3); font-family: var(--font-body); font-size: .84rem; font-weight: 500;
  cursor: pointer; transition: var(--t); text-align: center;
}
.chip-btn:hover { border-color: rgba(0,229,181,.28); color: var(--white2); }
.chip-btn.on { background: var(--glow); border-color: var(--green); color: var(--green); }
.chip-btn .ci { font-size: 1.1rem; display: block; margin-bottom: 3px; }
.chip-btn .cn { font-size: .8rem; font-weight: 600; }
.chip-btn .cs { font-size: .65rem; color: var(--white4); margin-top: 2px; }
.chip-btn.on .cs { color: rgba(0,229,181,.55); }

/* Day grid */
.day-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 7px; }
.day-btn {
  padding: 11px 4px; background: var(--bg3); border: 1.5px solid var(--border2);
  border-radius: var(--rs); color: var(--white4); font-family: var(--font-display);
  font-size: .85rem; font-weight: 600; cursor: pointer; transition: var(--t); text-align: center;
}
.day-btn:hover { border-color: rgba(0,229,181,.28); color: var(--white2); }
.day-btn.on { background: var(--glow); border-color: var(--green); color: var(--green); }

/* Panel nav */
.panel-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border2); }
.btn-prev { display: flex; align-items: center; gap: 5px; font-family: var(--font-body); font-size: .85rem; font-weight: 600; color: var(--white3); background: transparent; border: 1px solid var(--border2); padding: 10px 18px; border-radius: var(--rs); cursor: pointer; transition: var(--t); }
.btn-prev:hover { color: var(--green); border-color: var(--green); background: rgba(0,229,181,.06); }
.btn-nxt { display: flex; align-items: center; gap: 7px; font-family: var(--font-body); font-size: .9rem; font-weight: 700; color: var(--bg); background: var(--green); border: none; padding: 12px 24px; border-radius: var(--rs); cursor: pointer; transition: var(--t); letter-spacing: -.01em; }
.btn-nxt:hover { background: var(--green2); transform: translateX(2px); }

/* Summary */
.summary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; background: var(--bg3); border-radius: var(--r); padding: 20px; margin-bottom: 18px; }
.sum-k { font-size: .65rem; font-weight: 700; color: var(--white4); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 3px; }
.sum-v { font-size: .9rem; font-weight: 600; color: var(--white); }

/* ══════════════════════════════════════════════════════════════
   LOADING
══════════════════════════════════════════════════════════════ */
.loader { display: none; padding: 72px 0; text-align: center; }
.spinner { width: 52px; height: 52px; border: 2.5px solid var(--border2); border-top-color: var(--green); border-right-color: rgba(0,229,181,.3); border-radius: 50%; animation: spin .85s linear infinite; margin: 0 auto 20px; box-shadow: 0 0 20px rgba(0,229,181,.1); }
@keyframes spin { to { transform: rotate(360deg); } }
.loader-title { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; letter-spacing: -.02em; margin-bottom: 6px; color: var(--white); }
.loader-sub { font-size: .86rem; color: var(--white3); }

/* ══════════════════════════════════════════════════════════════
   RESULTADO
══════════════════════════════════════════════════════════════ */
.result { display: none; background: var(--bg2); border: 1px solid var(--border2); border-radius: var(--rl); overflow: hidden; margin-bottom: 36px; }
.result-head { padding: 28px 28px 20px; border-bottom: 1px solid var(--border2); }
.result-tags { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: .67rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--green); background: var(--glow2); border: 1px solid var(--border); padding: 4px 10px; border-radius: 100px; }
.result-title { font-family: var(--font-display); font-weight: 700; font-size: 1.55rem; letter-spacing: -.02em; margin-bottom: 4px; color: var(--white); }
.result-struct { font-size: .8rem; color: var(--white3); }
.result-acts { display: flex; gap: 8px; flex-wrap: wrap; padding: 14px 28px; border-bottom: 1px solid var(--border2); }
.act-btn { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-body); font-size: .8rem; font-weight: 600; padding: 8px 15px; border-radius: var(--rs); cursor: pointer; transition: var(--t); border: 1px solid var(--border2); background: var(--bg3); color: var(--white3); }
.act-btn:hover { border-color: var(--green); color: var(--green); }
.act-btn.prim { background: var(--green); color: var(--bg); border-color: var(--green); }
.act-btn.prim:hover { background: var(--green2); }
.sessions { padding: 18px 28px 28px; }
.ses-card { border: 1px solid var(--border2); border-radius: var(--r); overflow: hidden; margin-bottom: 9px; transition: var(--t),box-shadow .25s; box-shadow:0 2px 12px rgba(0,0,0,.18); }
.ses-card:hover { border-color: rgba(0,229,181,.22); box-shadow:0 6px 28px rgba(0,229,181,.07); }
.ses-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; cursor: pointer; background: var(--bg3); transition: var(--t); user-select: none; }
.ses-head:hover { background: var(--bg4); }
.ses-left { display: flex; align-items: center; gap: 12px; }
.ses-n { width: 30px; height: 30px; background: var(--glow); border: 1.5px solid var(--green); border-radius: 7px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: .8rem; color: var(--green); flex-shrink: 0; }
.ses-name { font-family: var(--font-display); font-weight: 600; font-size: .88rem; letter-spacing: -.01em; color: var(--white); }
.ses-day { font-size: .7rem; color: var(--white3); margin-top: 2px; }
.ses-right { display: flex; align-items: center; gap: 8px; }
.ses-badge { font-size: .65rem; font-weight: 600; color: var(--white4); background: var(--bg4); padding: 3px 8px; border-radius: 100px; }
.ses-arrow { color: var(--white4); transition: var(--t); }
.ses-card.open .ses-arrow { transform: rotate(180deg); }
.ses-body { display: none; padding: 0 18px 14px; }
.ses-card.open .ses-body { display: block; }
.warmup { background: rgba(0,229,181,.04); border: 1px solid rgba(0,229,181,.1); border-radius: var(--rs); padding: 12px 14px; margin: 12px 0 10px; }
.wu-t { font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green); margin-bottom: 8px; }
.wu-item { display: flex; justify-content: space-between; font-size: .82rem; color: var(--white3); padding: 3px 0; }
.wu-dur { font-size: .72rem; color: var(--green); font-weight: 600; }
.exs-label { font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--white4); margin-bottom: 7px; }
.ex-note { font-size: .72rem; color: #38bdf8; margin: -4px 0 6px 72px; line-height: 1.6; }
.ex { display: grid; grid-template-columns: 22px 1fr auto auto auto auto auto; gap: 9px; align-items: center; padding: 12px 0; border-top: 1px solid var(--border2); }
.ex:hover .ex-n-text { color: var(--green); }
.ex-name-wrap { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ex-idx { font-family: var(--font-display); font-size: .7rem; font-weight: 700; color: var(--white4); }
.ex-n-text { font-size: .9rem; font-weight: 500; color: var(--white2); transition: var(--t); text-decoration: none; display: block; min-width: 0; }
.ex-n-text:hover { color: var(--green); text-decoration: underline; }
.ex-n-text[href="#"] { color: var(--white3); pointer-events: none; cursor: default; }
.ex-n-text[href="#"]::after { content: ''; }
.ex-n-text:not([href="#"])::after { content: ' ↗'; font-size: .7rem; color: var(--green); opacity: .6; }
/* Help button */
.ex-help-btn { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; min-width: 18px; border-radius: 50%; background: rgba(0,229,181,.12); border: 1px solid rgba(0,229,181,.3); color: var(--green); font-size: .68rem; font-weight: 700; cursor: pointer; transition: background .15s, border-color .15s, transform .15s; flex-shrink: 0; line-height: 1; }
.ex-help-btn:hover { background: rgba(0,229,181,.22); border-color: rgba(0,229,181,.6); transform: scale(1.1); }
.ex-help-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
/* Help popover */
#ex-help-pop { position: fixed; z-index: 9999; max-width: 280px; background: var(--card,#121c30); border: 1px solid rgba(0,229,181,.25); border-radius: 10px; padding: 12px 14px; box-shadow: 0 8px 32px rgba(0,0,0,.45); pointer-events: auto; }
.ex-help-pop-title { font-size: .75rem; font-weight: 700; color: var(--green); margin-bottom: 6px; }
.ex-help-pop-desc { font-size: .78rem; color: var(--white2,#e2e8f0); line-height: 1.65; }
.ex-type { font-size: .62rem; font-weight: 700; letter-spacing: .04em; padding: 2px 7px; border-radius: 4px; }
.comp { background: rgba(0,229,181,.1); color: var(--green); }
.aist { background: rgba(107,138,126,.1); color: var(--white3); }
.ex-stat { text-align: center; }
.ex-sv { font-family: var(--font-display); font-weight: 700; font-size: .82rem; color: var(--white); line-height: 1; }
.ex-sl { font-size: .58rem; color: var(--white4); margin-top: 2px; }

/* ══════════════════════════════════════════════════════════════
   HISTORIAL
══════════════════════════════════════════════════════════════ */
.rut-row { background: var(--bg2); border: 1px solid var(--border2); border-radius: var(--r); padding: 18px 20px; margin-bottom: 8px; cursor: pointer; transition: var(--t); display: flex; align-items: center; justify-content: space-between; }
.rut-row:hover { border-color: rgba(0,229,181,.2); transform: translateX(3px); }
.rut-left { display: flex; align-items: center; gap: 13px; }
.rut-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.rut-obj { font-family: var(--font-display); font-weight: 600; font-size: .9rem; color: var(--white); text-transform: capitalize; letter-spacing: -.01em; }
.rut-meta { font-size: .73rem; color: var(--white3); margin-top: 3px; }
.empty { text-align: center; padding: 56px 20px; color: var(--white4); }
.empty-i { font-size: 3rem; margin-bottom: 14px; opacity: .35; }
.empty-t { font-size: .9rem; margin-bottom: 18px; color: var(--white3); }
.hist-top { display: flex; gap: 9px; margin-bottom: 12px; flex-wrap: wrap; }
.hist-search-wrap {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 18px; flex-wrap: wrap;
}
.hist-search-wrap .finput { height: 40px; }
@media (max-width: 480px) {
  .hist-search-wrap { flex-direction: column; }
  .hist-search-wrap select { width: 100% !important; }
}

/* ══════════════════════════════════════════════════════════════
   CUENTA
══════════════════════════════════════════════════════════════ */
.cc-box { background: var(--bg2); border: 1px solid var(--border2); border-radius: var(--rl); padding: 26px; margin-bottom: 14px; }
.cc-head { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--white4); margin-bottom: 16px; }
.cc-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border2); }
.cc-row:last-child { border-bottom: none; }
.cc-k { font-size: .82rem; color: var(--white3); font-weight: 400; }
.cc-v { font-size: .88rem; font-weight: 600; color: var(--white2); }
.danger { background: rgba(239,68,68,.05); border: 1px solid rgba(239,68,68,.14); border-radius: var(--r); padding: 18px 20px; }
.danger-title { font-size: .75rem; font-weight: 700; color: #f87171; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 7px; }
.danger-desc { font-size: .83rem; color: var(--white3); margin-bottom: 14px; line-height: 1.6; }

/* ══════════════════════════════════════════════════════════════
   LEGAL
══════════════════════════════════════════════════════════════ */
.legal-shell { max-width: 700px; margin: 0 auto; padding: 36px 24px 80px; }
.legal-tabs { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 28px; }
.legal-tab { font-family: var(--font-body); font-size: .78rem; font-weight: 600; padding: 7px 16px; border-radius: 100px; cursor: pointer; transition: var(--t); border: 1px solid var(--border2); background: transparent; color: var(--white3); }
.legal-tab:hover { color: var(--white2); border-color: var(--white4); }
.legal-tab.on { background: var(--glow); border-color: var(--green); color: var(--green); }
.legal-body { font-size: .9rem; line-height: 1.78; color: var(--white2); }
.legal-body h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; color: var(--white); margin: 28px 0 11px; }
.legal-body h3 { font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: var(--white2); margin: 20px 0 9px; }
.legal-body p { margin-bottom: 12px; }
.legal-body ul { padding-left: 18px; margin-bottom: 12px; }
.legal-body li { margin-bottom: 5px; }
.legal-body strong { color: var(--white); font-weight: 600; }
.legal-body table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: .82rem; }
.legal-body th { text-align: left; padding: 8px 11px; background: var(--bg3); color: var(--white3); font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.legal-body td { padding: 8px 11px; border-top: 1px solid var(--border2); color: var(--white3); }

/* ══════════════════════════════════════════════════════════════
   CONTACTO
══════════════════════════════════════════════════════════════ */
.contact-shell { max-width: 540px; margin: 0 auto; padding: 32px 24px 80px; }

/* ══════════════════════════════════════════════════════════════
   TESTIMONIALS (LANDING)
══════════════════════════════════════════════════════════════ */
.testimonials-section {
  padding: 80px 24px 64px;
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.testi-header { text-align: center; margin-bottom: 48px; }
.testi-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(0,229,181,.07); border: 1px solid rgba(0,229,181,.18);
  border-radius: 20px; padding: 5px 14px;
  font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--green); margin-bottom: 18px;
}
.testi-title {
  font-family: var(--font-display); font-size: clamp(1.6rem,3.5vw,2.2rem);
  font-weight: 700; color: var(--white); margin: 0 0 12px; letter-spacing: -.02em;
}
.testi-sub { font-size: .9rem; color: var(--white3); line-height: 1.6; margin: 0; }
/* Bento grid — 2 cols desktop, 1 col mobile */
.testi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  align-items: start;
}
.testi-card {
  background: linear-gradient(145deg, var(--bg2) 0%, rgba(8,18,12,.95) 100%);
  border: 1px solid var(--border2);
  border-radius: var(--rl);
  padding: 22px 22px 20px;
  position: relative;
  overflow: hidden;
  cursor: default;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.testi-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0,229,181,.6), transparent);
  opacity: 0; transition: opacity .3s ease;
}
.testi-card:hover { border-color: rgba(0,229,181,.2); box-shadow: 0 12px 40px rgba(0,0,0,.3); }
.testi-card:hover::before { opacity: 1; }
/* Slight tilt for organic feel */
.testi-card:nth-child(1) { transform: rotate(-0.4deg); }
.testi-card:nth-child(2) { transform: rotate(0.3deg); margin-top: 24px; }
.testi-card:nth-child(3) { transform: rotate(0.4deg); }
.testi-card:nth-child(4) { transform: rotate(-0.3deg); margin-top: -16px; }
.testi-card:hover { transform: rotate(0) !important; }
.testi-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; gap: 10px;
}
.testi-user { display: flex; align-items: center; gap: 10px; }
.testi-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--green), #00C49A);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--bg); font-size: .92rem;
}
.testi-name { font-weight: 600; color: var(--white); font-size: .9rem; }
.testi-date { font-size: .7rem; color: var(--white4); margin-top: 1px; }
.testi-stars { display: flex; gap: 2px; }
.testi-star { font-size: 1rem; line-height: 1; }
.testi-quote {
  font-size: .88rem; color: var(--white3); line-height: 1.7;
  margin: 0; position: relative; padding-left: 14px;
}
.testi-quote::before {
  content: '"';
  position: absolute; left: 0; top: -2px;
  font-size: 1.4rem; color: var(--green); opacity: .5; line-height: 1;
  font-family: Georgia, serif;
}
/* Skeleton cards */
.testi-skeleton {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--rl);
  padding: 22px;
  overflow: hidden;
  position: relative;
}
.testi-skeleton::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    transparent 30%,
    rgba(0,229,181,.04) 48%,
    rgba(255,255,255,.04) 50%,
    rgba(0,229,181,.04) 52%,
    transparent 70%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 2s ease-in-out infinite;
}
@keyframes skeletonShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skel-line {
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.09), rgba(255,255,255,.06));
  background-size: 200% 100%;
  animation: skeletonShimmer 2s ease-in-out infinite;
  border-radius: 4px; height: 10px; margin-bottom: 10px;
}
/* Footer link */
.testi-footer-link {
  text-align: center; margin-top: 40px;
}
.testi-footer-link button {
  background: none; border: 1px solid rgba(0,229,181,.2); border-radius: 8px;
  color: var(--green); font-family: var(--font-body); font-size: .85rem;
  font-weight: 600; padding: 10px 24px; cursor: pointer;
  transition: border-color .2s, background .2s;
}
.testi-footer-link button:hover {
  border-color: rgba(0,229,181,.45); background: rgba(0,229,181,.05);
}
/* Empty state */
.testi-empty {
  grid-column: 1 / -1; text-align: center; padding: 48px 24px;
  color: var(--white4); font-size: .9rem; line-height: 1.7;
}
.testi-empty-cta {
  display: inline-block; margin-top: 16px;
  background: none; border: 1px solid rgba(0,229,181,.25);
  color: var(--green); border-radius: 8px;
  font-family: var(--font-body); font-size: .82rem; font-weight: 600;
  padding: 9px 20px; cursor: pointer; transition: border-color .2s, background .2s;
}
.testi-empty-cta:hover { border-color: rgba(0,229,181,.5); background: rgba(0,229,181,.05); }
@media (max-width: 640px) {
  .testi-grid { grid-template-columns: 1fr; }
  .testi-card:nth-child(n) { transform: none !important; margin-top: 0 !important; }
  .testimonials-section { padding: 52px 16px 40px; }
}

/* ══════════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════════ */
footer { border-top: 1px solid var(--border2); padding: 32px 24px; text-align: center; margin-top: 20px; }
.f-brand { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--white2); margin-bottom: 9px; }
.f-brand em { font-style: normal; color: var(--green); }
.f-copy { font-size: .74rem; color: var(--white4); line-height: 1.65; margin-bottom: 16px; max-width: 480px; margin-left: auto; margin-right: auto; }
.f-nav { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; }
.f-nav a { font-size: .73rem; color: var(--white4); text-decoration: none; cursor: pointer; transition: var(--t); }
.f-nav a:hover { color: var(--green); }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════ */
/* Onboarding overlay */
.onb-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(6,10,8,.92); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.onb-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--rl); padding: 36px 32px; max-width: 420px; width: 100%;
  text-align: center;
}
.onb-icon { font-size: 3rem; margin-bottom: 14px; }
.onb-title {
  font-family: var(--font-display); font-weight: 700; font-size: 1.4rem;
  letter-spacing: -.02em; color: var(--white); margin-bottom: 8px;
}
.onb-text { font-size: .9rem; color: var(--white2); line-height: 1.65; margin-bottom: 24px; }
.onb-dots { display: flex; justify-content: center; gap: 6px; margin-bottom: 24px; }
.onb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--white4); transition: var(--t); }
.onb-dot.active { background: var(--green); width: 20px; border-radius: 4px; }
.onb-skip { font-size: .78rem; color: var(--white4); background: none; border: none; cursor: pointer; margin-top: 10px; }

@media (max-width: 640px) {
  .frow, .frow3, .summary { grid-template-columns: 1fr; }
  .day-grid { grid-template-columns: repeat(3,1fr); }
  .panel { padding: 22px 18px; }
  .result-head, .result-acts, .sessions { padding-left: 16px; padding-right: 16px; }
  /* Larger tap targets on result action buttons for mobile */
  .act-btn { padding: 11px 14px; font-size: .82rem; min-height: 44px; }
  .result-acts { flex-direction: column; gap: 8px; }
  .act-btn.prim { width: 100%; justify-content: center; font-size: .9rem; padding: 14px 20px; }
  .ex { grid-template-columns: 22px 1fr auto auto; }
  /* Child order: 1=idx 2=name-wrap 3=type 4=series 5=reps 6=rir? 7=descanso
     Mobile: show only idx/name/series/reps — hide type and everything from child 6 */
  .ex-type { display: none; }
  .ex > *:nth-child(n+6) { display: none; }
  .progress-bar .pb-step { min-width: 0; flex: 0 0 auto; padding: 12px 8px; font-size: 0; }
  .pb-step .pb-num { margin: 0; }
  .auth-card { padding: 24px 18px; }
  .hero-h1 { font-size: clamp(2rem, 8vw, 3rem); }
  .hero-h1 .line { white-space: normal; }
  .stats { border-radius: var(--r); }
  .stat { padding: 16px 10px; }
  .stat-n { font-size: 1.4rem; }
  nav { padding: 0 16px; }
  .nav-pill.ghost { display: none; }
}

/* ── Botón idiomas ─────────────────────────────────────── */
.lang-btn{display:inline-flex;align-items:center;gap:5px;background:none;
  border:1.5px solid var(--border2);border-radius:var(--rs);padding:6px 11px;
  font-family:var(--font-body);font-size:.8rem;font-weight:600;
  color:var(--white3);cursor:pointer;transition:var(--t);
  position:relative;user-select:none}
.lang-btn:hover{border-color:var(--green);color:var(--green)}
.lang-dropdown{display:none;position:absolute;top:calc(100% + 8px);left:0;
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);
  overflow:hidden;z-index:500;min-width:130px;
  box-shadow:0 8px 24px rgba(0,0,0,.4)}
.lang-dropdown.open{display:block;animation:up .2s ease both}
.lang-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.lang-btn svg{transition:transform .2s ease}
.lang-option{display:flex;align-items:center;gap:10px;padding:11px 15px;
  cursor:pointer;font-size:.85rem;color:var(--white3);
  font-family:var(--font-body);font-weight:500;transition:var(--t);white-space:nowrap}
.lang-option:hover{background:var(--bg3);color:var(--white)}
.lang-option.active{color:var(--green)}
.nav-left{display:flex;align-items:center;gap:12px}


.lang-btn{z-index:201;position:relative}
.lang-dropdown{z-index:501}

.ob-lang-opt:hover{border-color:var(--green)!important;color:var(--green)!important}
.ob-lang-opt[data-oblang]{transition:all .2s}
/* ── User dropdown menu ───────────────────────────────── */
.user-menu-wrap{position:relative;display:inline-block}
.user-menu-btn{display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.user-dropdown{
  position:absolute;top:calc(100% + 10px);right:0;
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--r);min-width:200px;z-index:600;
  box-shadow:0 8px 32px rgba(0,0,0,.45);animation:up .2s ease both;
  overflow:hidden;
}
.user-dropdown-item{
  display:flex;align-items:center;gap:10px;padding:12px 16px;
  font-size:.85rem;color:var(--white3);cursor:pointer;
  font-family:var(--font-body);font-weight:500;transition:var(--t);
  border:none;background:none;width:100%;text-align:left;
}
.user-dropdown-item:hover{background:var(--bg3);color:var(--white)}
.user-dropdown-item.danger:hover{color:#f87171;background:rgba(239,68,68,.07)}
.user-dropdown-sep{height:1px;background:var(--border2);margin:4px 0}
.user-dropdown-header{
  padding:12px 16px 10px;
  font-size:.72rem;color:var(--white4);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}

/* ── Animations ──────────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes lineGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes countUp{from{opacity:0;transform:translateY(12px) scale(.8)}to{opacity:1;transform:translateY(0) scale(1)}}

.animate-up{animation:fadeUp .6s ease both}
.animate-in{animation:fadeIn .5s ease both}
.animate-scale{animation:scaleIn .4s ease both}
.delay-1{animation-delay:.1s}
.delay-2{animation-delay:.2s}
.delay-3{animation-delay:.3s}
.delay-4{animation-delay:.4s}
.delay-5{animation-delay:.5s}
.delay-6{animation-delay:.6s}

/* Hero animations */
.hero-badge{animation:fadeUp .6s ease both;animation-delay:.1s}
.hero-h1{animation:fadeUp .7s ease both;animation-delay:.2s}
.hero-p{animation:fadeUp .6s ease both;animation-delay:.4s}
.hero-sub{animation:fadeIn .6s ease both;animation-delay:.5s}
.hero-btn{animation:scaleIn .5s ease both;animation-delay:.6s}

/* Stats counter animation */
.stat-n{animation:scaleIn .5s ease both}
.stats-row .stat:nth-child(1) .stat-n{animation-delay:.3s}
.stats-row .stat:nth-child(2) .stat-n{animation-delay:.4s}
.stats-row .stat:nth-child(3) .stat-n{animation-delay:.5s}
.stats-row .stat:nth-child(4) .stat-n{animation-delay:.6s}

/* Feature cards hover — 3D tilt via JS; CSS provides base transition & shadow only */
.feat-card{transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .3s ease,border-color .3s ease;will-change:transform;}
.feat-card:hover{box-shadow:0 16px 48px rgba(0,196,154,.16);border-color:rgba(0,196,154,.32);}

/* Nav logo float */
.nav-logo-svg{animation:float 3s ease-in-out infinite}

/* Page entry animation — CSS animation (not transition) works with display:none→block */
.page { opacity: 0; }
.page.active {
  opacity: 1;
  animation: pageIn .32s cubic-bezier(.16,1,.3,1) both;
}
@keyframes pageIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Panel slide */
.panel{opacity:0;transform:translateX(20px);transition:opacity .3s ease,transform .3s ease}
.panel.active{opacity:1;transform:translateX(0)}

/* Onboarding */
.ob-lang-opt{transition:all .2s ease!important}
.ob-lang-opt:hover{transform:scale(1.05)}

/* ── Scroll Reveal ──────────────────────────────────── */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);will-change:transform,opacity}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-scale{opacity:0;transform:scale(.92);transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.reveal-scale.visible{opacity:1;transform:scale(1)}
.reveal-left{opacity:0;transform:translateX(-30px);transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.reveal-left.visible{opacity:1;transform:translateX(0)}

/* ── How It Works Section ───────────────────────────── */
.how-section{
  padding: 100px 24px;
  position: relative;
  overflow: hidden;
}
.how-section::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:1px;height:100%;background:linear-gradient(to bottom,transparent,var(--border),transparent);
}
.section-label{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--green);margin-bottom:16px;
}
.section-label::before{content:'';width:20px;height:1px;background:var(--green);border-radius:1px}
.section-title{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.8rem,4vw,2.8rem);letter-spacing:-.03em;
  color:var(--white);line-height:1.1;margin-bottom:14px;
}
.section-sub{font-size:.98rem;color:var(--white3);line-height:1.7;max-width:500px;}
.section-head{text-align:center;max-width:560px;margin:0 auto 64px}
.section-head .section-label{justify-content:center}
.section-head .section-label::before{display:none}

.steps-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  max-width:900px;margin:0 auto;
  background:var(--border2);border-radius:var(--rl);overflow:hidden;
}
.step-card{
  background:var(--bg2);padding:40px 32px;position:relative;
  cursor:default;transition:background .3s ease,box-shadow .3s;user-select:none;
  overflow:hidden;
}
.step-card::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,transparent,var(--green),transparent);
  opacity:0;transition:opacity .35s;
}
.step-card:hover{background:var(--bg3);box-shadow:inset 0 0 40px rgba(0,229,181,.03)}
.step-card:hover::before{opacity:1}
.step-num{
  font-family:var(--font-display);font-weight:700;font-size:3.5rem;
  color:var(--green);opacity:.18;line-height:1;margin-bottom:16px;
  letter-spacing:-.04em;
}
.step-icon-wrap{
  width:48px;height:48px;border-radius:12px;
  background:var(--glow);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;
}
.step-title{
  font-family:var(--font-display);font-weight:700;font-size:1.1rem;
  letter-spacing:-.02em;color:var(--white);margin-bottom:9px;
}
.step-desc{font-size:.85rem;color:var(--white3);line-height:1.65}
.step-connector{
  position:absolute;top:50%;right:-12px;transform:translateY(-50%);
  width:22px;height:22px;background:var(--bg3);border:1.5px solid var(--border);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  z-index:2;
}
.step-connector svg{width:10px;height:10px;color:var(--green)}

/* ── Features / Benefits Grid ───────────────────────── */
.features-section{
  padding:80px 24px 100px;
  position:relative;
}
.features-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px;
  max-width:860px;margin:0 auto;
}
.feature-card{
  background:linear-gradient(145deg,var(--bg2) 0%,rgba(11,21,16,.95) 100%);
  border:1px solid var(--border2);border-radius:var(--rl);
  padding:28px 26px;cursor:default;
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
  position:relative;overflow:hidden;
  box-shadow:0 4px 20px rgba(0,0,0,.25);
}
.feature-card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% -20%,rgba(0,229,181,.07),transparent);
  opacity:0;transition:opacity .4s ease;pointer-events:none;
}
.feature-card::after{
  content:'';position:absolute;top:0;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,229,181,.18),transparent);
  opacity:0;transition:opacity .4s ease;pointer-events:none;
}
.feature-card:hover{transform:translateY(-6px);border-color:rgba(0,229,181,.22);box-shadow:0 20px 56px rgba(0,229,181,.08)}
.feature-card:hover::before,.feature-card:hover::after{opacity:1}
.feature-icon{
  width:44px;height:44px;border-radius:10px;
  background:var(--glow);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;flex-shrink:0;
}
.feature-title{
  font-family:var(--font-display);font-weight:700;font-size:1rem;
  letter-spacing:-.015em;color:var(--white);margin-bottom:7px;
}
.feature-desc{font-size:.84rem;color:var(--white3);line-height:1.65}
.feature-card.wide{grid-column:span 2}
.feature-card.accent-border{border-color:var(--border)}

/* ── Social Proof Strip ──────────────────────────────── */
.proof-strip{
  margin:0 24px;padding:32px 40px;
  background:linear-gradient(135deg,rgba(12,22,16,.98),rgba(8,16,11,.95));
  border:1px solid rgba(0,229,181,.14);border-radius:var(--rl);
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  box-shadow:0 4px 24px rgba(0,0,0,.28);position:relative;overflow:hidden;
}
.proof-strip::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,229,181,.25),transparent);
}
.proof-item{text-align:center;flex:1;min-width:100px}
.proof-n{
  font-family:var(--font-display);font-weight:700;font-size:2rem;
  color:var(--white);letter-spacing:-.03em;line-height:1;
}
.proof-n em{color:var(--green);font-style:normal}
.proof-l{font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--white4);margin-top:5px}
.proof-div{width:1px;height:40px;background:var(--border2);flex-shrink:0}

/* ── CTA Bottom ──────────────────────────────────────── */
.cta-section{
  padding:100px 24px 80px;
  text-align:center;
  position: relative;
  overflow: hidden;
}
.cta-box{
  max-width:640px;margin:0 auto;
  background:linear-gradient(135deg,rgba(12,22,16,.98) 0%,rgba(8,16,11,.95) 100%);
  border:1px solid rgba(0,229,181,.18);border-radius:24px;
  padding:64px 48px;position:relative;overflow:hidden;
  box-shadow:0 8px 40px rgba(0,229,181,.07),0 0 0 0 rgba(0,229,181,.06);
}
.cta-box::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 50% at 50% -10%,rgba(0,229,181,.12),transparent);
  pointer-events:none;
}
.cta-box::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,229,181,.6),transparent);
}
.cta-tag{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green);background:var(--glow2);border:1px solid var(--border);
  padding:5px 13px;border-radius:100px;margin-bottom:24px;
}
.cta-h2{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.8rem,4vw,2.6rem);letter-spacing:-.03em;
  color:var(--white);line-height:1.1;margin-bottom:14px;
}
.cta-h2 .g{color:var(--green)}
.cta-p{font-size:.95rem;color:var(--white3);line-height:1.7;margin-bottom:36px;max-width:420px;margin-left:auto;margin-right:auto}
.cta-bottom-btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-body);font-size:1rem;font-weight:700;
  color:var(--bg);background:var(--green);border:none;
  padding:16px 36px;border-radius:var(--r);cursor:pointer;
  transition:background .25s ease,transform .25s ease,box-shadow .25s ease;
  letter-spacing:-.01em;position:relative;overflow:hidden;
}
.cta-bottom-btn::before{
  content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
  transition:left .5s ease;
}
.cta-bottom-btn:hover{background:var(--green2);transform:translateY(-3px);box-shadow:0 12px 40px var(--glow)}
.cta-bottom-btn:hover::before{left:150%}
.cta-bottom-btn:active{transform:translateY(-1px)}
.cta-note{font-size:.76rem;color:var(--white4);margin-top:14px;letter-spacing:.04em}

/* ── Button shimmer microinteraction ────────────────── */
.btn.green,.cta-btn,.cta-bottom-btn,.nav-pill.solid{
  position:relative;overflow:hidden;
}
.btn.green::after,.cta-btn::after,.nav-pill.solid::after{
  content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  transition:left .4s ease;
}
.btn.green:hover::after,.cta-btn:hover::after,.nav-pill.solid:hover::after{left:150%}

/* ── Landing decorative grid lines ──────────────────── */
.landing-grid-bg{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;
  background-image:
    linear-gradient(var(--border2) 1px,transparent 1px),
    linear-gradient(90deg,var(--border2) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 60% 50% at 50% 50%,black 30%,transparent 80%);
  opacity:.4;
}

@media(max-width:768px){
  .steps-grid{grid-template-columns:1fr}
  .step-connector{display:none}
  .features-grid{grid-template-columns:1fr}
  .feature-card.wide{grid-column:span 1}
  .proof-strip{flex-direction:column;gap:16px;text-align:center;padding:24px}
  .proof-div{width:40px;height:1px}
  .cta-box{padding:40px 24px}
  .how-section,.features-section,.cta-section{padding-left:16px;padding-right:16px}
}
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal-scale,.reveal-left{opacity:1;transform:none;transition:none}
  .cta-bottom-btn::before,.btn.green::after,.cta-btn::after,.nav-pill.solid::after{display:none}
  .nav-logo-svg{animation:none}
  .feature-card:hover{transform:none}
  .cta-bottom-btn:hover{transform:none}
}

/* ── Dynamic Hero Text ───────────────────────────────── */
#hero-dynamic-wrap{
  display:inline-flex;align-items:center;justify-content:flex-start;
  min-height:1.2em;overflow:hidden;
}
/* When inside tagline row, the dynamic wrap is inline */
.hero-tagline-row #hero-dynamic-wrap { min-height:auto; }
.hero-tagline-row .hero-dynamic-word {
  font-size: inherit !important;
  letter-spacing: .02em !important;
  line-height: inherit !important;
}
.hero-dynamic-word{
  display:inline-block;
  animation:wordSlideIn .55s cubic-bezier(.16,1,.3,1) forwards;
  color:var(--green);
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.6rem,6vw,4.4rem);letter-spacing:-.04em;
  line-height:1.05;
}
.hero-dynamic-word.out{
  animation:wordSlideOut .4s cubic-bezier(.4,0,1,1) forwards;
}
@keyframes wordSlideIn{
  from{opacity:0;transform:translateY(60%) scale(.94)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes wordSlideOut{
  from{opacity:1;transform:translateY(0) scale(1)}
  to{opacity:0;transform:translateY(-50%) scale(.94)}
}
@media(prefers-reduced-motion:reduce){
  .hero-dynamic-word,.hero-dynamic-word.out{animation:none;opacity:1;transform:none}
}

/* ── Como Funciona Page ──────────────────────────────── */
#page-como-funciona{padding-top:0}
.cf-hero{
  padding:90px 24px 70px;text-align:center;
  background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(0,229,181,.07),transparent 70%);
  border-bottom:1px solid var(--border2);
}
.cf-hero-label{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--green);background:var(--glow2);border:1px solid var(--border);
  padding:5px 14px;border-radius:100px;margin-bottom:24px;
}
.cf-hero-h1{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2rem,5vw,3.4rem);letter-spacing:-.04em;
  color:var(--white);line-height:1.1;margin-bottom:16px;
}
.cf-hero-h1 .g{color:var(--green)}
.cf-hero-p{
  font-size:1rem;color:var(--white3);line-height:1.75;
  max-width:520px;margin:0 auto 36px;
}
.cf-cta-row{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.cf-cta-row .cta-btn{font-size:.95rem;padding:13px 28px}
.cf-page-body{max-width:900px;margin:0 auto;padding:80px 24px 100px}
.cf-section{margin-bottom:90px}
.cf-section-label{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--green);margin-bottom:14px;
}
.cf-section-label::before{content:'';width:20px;height:1px;background:var(--green);border-radius:1px}
.cf-section-title{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.6rem,3.5vw,2.4rem);letter-spacing:-.035em;
  color:var(--white);line-height:1.15;margin-bottom:12px;
}
.cf-section-sub{font-size:.95rem;color:var(--white3);line-height:1.7;max-width:500px;margin-bottom:48px}
.cf-steps-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  background:var(--border2);border-radius:var(--rl);overflow:hidden;margin-bottom:80px;
}
.cf-step{
  background:var(--bg2);padding:40px 28px;position:relative;
  transition:background .3s ease;
}
.cf-step:hover{background:var(--bg3)}
.cf-step-num{
  font-family:var(--font-display);font-weight:700;font-size:3rem;
  color:var(--green);opacity:.16;line-height:1;margin-bottom:14px;letter-spacing:-.04em;
}
.cf-step-icon{
  width:44px;height:44px;border-radius:11px;
  background:var(--glow);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.cf-step-title{
  font-family:var(--font-display);font-weight:700;font-size:1rem;
  letter-spacing:-.02em;color:var(--white);margin-bottom:8px;
}
.cf-step-desc{font-size:.84rem;color:var(--white3);line-height:1.65}
.cf-benefits-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px;
}
.cf-benefit{
  background:var(--bg2);border:1px solid var(--border2);border-radius:var(--rl);
  padding:28px 24px;
  transition:border-color .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,.2,1);
  position:relative;overflow:hidden;
}
.cf-benefit::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% -20%,var(--glow2),transparent);
  opacity:0;transition:opacity .4s;pointer-events:none;
}
.cf-benefit:hover{border-color:rgba(0,229,181,.2);transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,0,0,.3),0 0 0 1px rgba(0,229,181,.08)}
.cf-benefit:hover::before{opacity:1}
.cf-benefit.wide{grid-column:span 2}
.cf-benefit-icon{
  width:44px;height:44px;border-radius:10px;
  background:var(--glow);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;
}
.cf-benefit-title{
  font-family:var(--font-display);font-weight:700;font-size:.98rem;
  color:var(--white);letter-spacing:-.015em;margin-bottom:6px;
}
.cf-benefit-desc{font-size:.83rem;color:var(--white3);line-height:1.65}
.cf-proof{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  background:var(--bg2);border:1px solid var(--border2);border-radius:var(--rl);
  padding:32px 40px;margin-bottom:80px;
}
.cf-proof-item{text-align:center;flex:1;min-width:90px}
.cf-proof-n{
  font-family:var(--font-display);font-weight:700;font-size:2rem;
  color:var(--white);letter-spacing:-.03em;line-height:1;
}
.cf-proof-n em{color:var(--green);font-style:normal}
.cf-proof-l{font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--white4);margin-top:5px}
.cf-proof-div{width:1px;height:40px;background:var(--border2);flex-shrink:0}
.cf-cta-box{
  background:linear-gradient(135deg,var(--bg2),var(--bg3));
  border:1px solid var(--border);border-radius:24px;
  padding:56px 48px;text-align:center;position:relative;overflow:hidden;
}
.cf-cta-box::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 50% at 50% -10%,rgba(0,229,181,.1),transparent);
  pointer-events:none;
}
.cf-cta-box::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--green),transparent);
}
.cf-cta-box .cta-tag{display:inline-flex;align-items:center;gap:7px;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green);background:var(--glow2);border:1px solid var(--border);padding:5px 13px;border-radius:100px;margin-bottom:20px}
.cf-cta-box .cta-h2{font-family:var(--font-display);font-weight:700;font-size:clamp(1.6rem,3.5vw,2.4rem);letter-spacing:-.03em;color:var(--white);line-height:1.1;margin-bottom:12px}
.cf-cta-box .cta-h2 .g{color:var(--green)}
.cf-cta-box .cta-p{font-size:.92rem;color:var(--white3);line-height:1.7;margin-bottom:28px;max-width:400px;margin-left:auto;margin-right:auto}

/* ── Blog Page ───────────────────────────────────────── */
#page-blog{padding-top:0}
.blog-hero{
  padding:80px 24px 60px;text-align:center;
  background:radial-gradient(ellipse 60% 40% at 50% 0%,rgba(0,229,181,.06),transparent 70%);
  border-bottom:1px solid var(--border2);
}
.blog-hero-label{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--green);background:var(--glow2);border:1px solid var(--border);
  padding:5px 14px;border-radius:100px;margin-bottom:20px;
}
.blog-hero-h1{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.8rem,4.5vw,3rem);letter-spacing:-.04em;
  color:var(--white);line-height:1.1;margin-bottom:14px;
}
.blog-hero-h1 .g{color:var(--green)}
.blog-hero-p{font-size:.95rem;color:var(--white3);line-height:1.75;max-width:480px;margin:0 auto}
.blog-body{max-width:900px;margin:0 auto;padding:60px 24px 100px}
/* Blog search bar */
.blog-search-wrap{position:relative;margin-bottom:24px}
.blog-search-input{
  width:100%;box-sizing:border-box;
  background:var(--bg2);border:1.5px solid var(--border2);
  border-radius:var(--r);color:var(--white);
  font-family:var(--font-body);font-size:.88rem;
  padding:12px 44px 12px 42px;outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.blog-search-input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(0,229,181,.08)}
.blog-search-input::placeholder{color:var(--white4)}
.blog-search-ico{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  color:var(--white4);pointer-events:none;display:flex;
}
.blog-search-clear{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:var(--white4);cursor:pointer;
  font-size:1rem;line-height:1;padding:2px;display:none;
  transition:color .15s;
}
.blog-search-clear:hover{color:var(--white2)}
.blog-search-count{font-size:.72rem;color:var(--white4);margin-bottom:16px;min-height:16px}
.blog-categories{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.blog-cat{
  font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--white4);background:var(--bg2);border:1px solid var(--border2);
  padding:6px 14px;border-radius:100px;cursor:pointer;
  transition:color .2s,border-color .2s,background .2s;
}
.blog-cat:hover,.blog-cat.active{color:var(--green);border-color:var(--border);background:var(--glow2)}
.blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:60px}
.blog-card{
  background:var(--bg2);border:1px solid var(--border2);border-radius:var(--rl);
  overflow:hidden;cursor:pointer;
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
  display:flex;flex-direction:column;
}
.blog-card:hover{transform:translateY(-6px);border-color:var(--border);box-shadow:0 20px 50px rgba(0,229,181,.06)}
.blog-card.featured{grid-column:span 2;flex-direction:row}
.blog-card-img{
  background:linear-gradient(135deg,var(--bg3),var(--bg4));
  position:relative;overflow:hidden;flex-shrink:0;
}
.blog-card.featured .blog-card-img{width:40%;min-height:220px}
.blog-card:not(.featured) .blog-card-img{height:160px}
.blog-card-img-inner{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
}
.blog-card-content{padding:24px 22px;flex:1;display:flex;flex-direction:column}
.blog-card-tag{
  font-size:.65rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green);margin-bottom:10px;
}
.blog-card-title{
  font-family:var(--font-display);font-weight:700;
  font-size:1rem;letter-spacing:-.02em;color:var(--white);
  line-height:1.35;margin-bottom:8px;
}
.blog-card.featured .blog-card-title{font-size:1.25rem}
.blog-card-excerpt{font-size:.82rem;color:var(--white3);line-height:1.65;flex:1;margin-bottom:16px}
.blog-card-meta{display:flex;align-items:center;gap:10px;font-size:.72rem;color:var(--white4)}
.blog-card-meta-dot{width:3px;height:3px;background:var(--white4);border-radius:50%}
.blog-cta-box{
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);
  padding:40px;text-align:center;
  background:linear-gradient(135deg,var(--bg2),var(--bg3));
  position:relative;overflow:hidden;
}
.blog-cta-box::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--green),transparent)}
.blog-cta-title{font-family:var(--font-display);font-weight:700;font-size:1.5rem;letter-spacing:-.03em;color:var(--white);margin-bottom:10px}
.blog-cta-p{font-size:.88rem;color:var(--white3);line-height:1.7;margin-bottom:22px;max-width:380px;margin-left:auto;margin-right:auto}

/* Article reading progress bar */
#art-progress-bar{
  position:fixed;top:0;left:0;height:3px;width:0%;
  background:linear-gradient(90deg,var(--green),rgba(0,229,181,.55));
  border-radius:0 2px 2px 0;z-index:9999;
  transition:width .08s linear;pointer-events:none;display:none;
}
/* Related articles section */
.related-section{margin-top:52px;padding-top:40px;border-top:1px solid var(--border2)}
.related-title{font-family:var(--font-display);font-size:1rem;font-weight:700;letter-spacing:-.02em;color:var(--white2);margin-bottom:20px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.related-card{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r);padding:18px 16px;cursor:pointer;transition:border-color .2s,transform .25s,box-shadow .25s}
.related-card:hover{border-color:var(--border);transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,229,181,.06)}
.related-card-cat{font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:6px}
.related-card-title{font-size:.85rem;font-weight:700;color:var(--white);line-height:1.35;margin-bottom:6px}
.related-card-hook{font-size:.76rem;color:var(--white4);line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

@media(max-width:768px){
  .cf-steps-grid{grid-template-columns:1fr}
  .cf-benefits-grid{grid-template-columns:1fr}
  .cf-benefit.wide{grid-column:span 1}
  .cf-proof{flex-direction:column;gap:16px;text-align:center;padding:24px}
  .cf-proof-div{width:40px;height:1px}
  .cf-cta-box{padding:36px 20px}
  .blog-grid{grid-template-columns:1fr}
  .blog-card.featured{flex-direction:column}
  .blog-card.featured .blog-card-img{width:100%;min-height:140px}
  .cf-page-body,.blog-body{padding:48px 16px 80px}
  .article-shell{padding:40px 16px 80px}
  .related-grid{grid-template-columns:1fr}
  .article-share-buttons{flex-direction:column;align-items:flex-start}
}

/* Back button */
.blog-back-btn{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.78rem;font-weight:600;color:var(--white3);
  background:none;border:none;cursor:pointer;padding:0;
  margin-bottom:28px;transition:color .2s;letter-spacing:.01em;
}
.blog-back-btn:hover{color:var(--green)}
/* Share section */
.article-share{margin-top:36px;padding-top:30px;border-top:1px solid var(--border2)}
.article-share-label{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--white4);display:block;margin-bottom:12px}
.article-share-buttons{display:flex;gap:10px;flex-wrap:wrap}
.article-share-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 18px;border-radius:50px;font-size:.78rem;font-weight:700;
  text-decoration:none;transition:opacity .2s,transform .2s;
  cursor:pointer;
}
.article-share-btn:hover{opacity:.85;transform:translateY(-1px)}
.article-share-btn.tw{background:#000;color:#fff}
.article-share-btn.wa{background:#25D366;color:#fff}

/* ── Article Page ─────────────────────────────────────── */
#page-article{padding-top:0}
.article-shell{max-width:720px;margin:0 auto;padding:56px 24px 100px}
.article-back{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:none;color:var(--white4);cursor:pointer;
  font-size:.82rem;font-family:var(--font-body);font-weight:500;
  padding:0 0 32px;transition:color .2s;
}
.article-back:hover{color:var(--white2)}
.article-meta-tag{
  font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--green);margin-bottom:14px;
}
.article-h1{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.6rem,4vw,2.4rem);letter-spacing:-.035em;
  color:var(--white);line-height:1.2;margin-bottom:18px;
}
.article-meta-bar{
  display:flex;align-items:center;gap:10px;
  font-size:.78rem;color:var(--white4);
  margin-bottom:44px;padding-bottom:32px;
  border-bottom:1px solid var(--border2);
}
.article-body{line-height:1.85}
.article-body h2{
  font-family:var(--font-display);font-weight:700;
  font-size:1.3rem;letter-spacing:-.025em;color:var(--white);
  margin:44px 0 14px;line-height:1.25;
}
.article-body h3{
  font-family:var(--font-display);font-weight:600;
  font-size:1.05rem;letter-spacing:-.015em;color:var(--white2);
  margin:28px 0 10px;
}
.article-body p{
  font-size:.95rem;color:var(--white3);line-height:1.85;
  margin-bottom:1.25em;
}
.article-body ul,.article-body ol{
  margin:0 0 1.4em 1.2em;
}
.article-body li{
  font-size:.93rem;color:var(--white3);line-height:1.75;
  margin-bottom:.5em;
}
.article-body strong{color:var(--white);font-weight:600}
.article-body em{color:var(--green);font-style:normal;font-weight:500}
.article-highlight{
  background:var(--bg2);border:1px solid var(--border);
  border-left:3px solid var(--green);border-radius:0 var(--r) var(--r) 0;
  padding:20px 22px;margin:28px 0;
}
.article-highlight p{margin:0;font-size:.9rem;color:var(--white3)}
.article-highlight strong{color:var(--green)}
.article-tier{
  background:var(--bg2);border:1px solid var(--border2);
  border-radius:var(--r);padding:16px 20px;margin-bottom:10px;
  display:flex;gap:14px;align-items:flex-start;
}
.article-tier-badge{
  font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--bg);background:var(--green);
  padding:3px 8px;border-radius:4px;white-space:nowrap;flex-shrink:0;margin-top:2px;
}
.article-tier-badge.t2{background:var(--white3);color:var(--bg)}
.article-tier-badge.t3{background:var(--white4);color:var(--bg)}
.article-tier-content{}
.article-tier-title{font-family:var(--font-display);font-weight:700;font-size:.95rem;color:var(--white);margin-bottom:4px}
.article-tier-desc{font-size:.82rem;color:var(--white3);line-height:1.6}
.article-cta-box{
  margin-top:60px;
  background:linear-gradient(135deg,var(--bg2),var(--bg3));
  border:1px solid var(--border);border-radius:20px;
  padding:40px 36px;text-align:center;position:relative;overflow:hidden;
}
.article-cta-box::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--green),transparent);
}
.article-cta-title{
  font-family:var(--font-display);font-weight:700;font-size:1.3rem;
  letter-spacing:-.025em;color:var(--white);margin-bottom:10px;
}
.article-cta-p{font-size:.88rem;color:var(--white3);line-height:1.7;margin-bottom:22px}
@media(max-width:768px){
  .article-body h2{font-size:1.15rem;margin:32px 0 12px}
  .article-cta-box{padding:28px 20px}
}
/* ── FAQ section ──────────────────────────────────────────── */
.article-faq{margin:52px 0 0}
.article-faq-title{
  font-family:var(--font-display);font-weight:700;font-size:1.1rem;
  letter-spacing:-.02em;color:var(--white);margin-bottom:20px;
  display:flex;align-items:center;gap:10px;
}
.article-faq-title::before{
  content:'';display:inline-block;width:3px;height:20px;
  background:var(--green);border-radius:2px;flex-shrink:0;
}
.faq-item{
  border:1px solid var(--border);border-radius:var(--r);
  margin-bottom:10px;overflow:hidden;
}
.faq-q{
  width:100%;background:var(--bg2);border:none;cursor:pointer;
  padding:16px 20px;text-align:left;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-family:var(--font-body);font-size:.9rem;font-weight:600;color:var(--white);
  transition:background .2s;
}
.faq-q:hover{background:var(--bg3)}
.faq-q svg{flex-shrink:0;transition:transform .25s;color:var(--green)}
.faq-q.open svg{transform:rotate(180deg)}
.faq-a{
  max-height:0;overflow:hidden;
  transition:max-height .3s ease,padding .3s ease;
  background:var(--bg);
}
.faq-a.open{max-height:600px;padding:16px 20px}
.faq-a p{margin:0;font-size:.87rem;color:var(--white3);line-height:1.75}
/* ── Share button additions ───────────────────────────────── */
.article-share-btn.li{background:#0A66C2;color:#fff}
.article-share-btn.li:hover{background:#004182}
.article-share-btn.cp{background:var(--bg2);border:1px solid var(--border);color:var(--white3)}
.article-share-btn.cp:hover{background:var(--bg3);color:var(--white)}
@media(max-width:768px){
  .article-faq-title{font-size:1rem}
  .faq-q{font-size:.85rem;padding:14px 16px}
  .faq-a.open{padding:12px 16px}
}

/* ═══════════════════════════════════════════════════════════════
   FITNESSAI 2026 — VISUAL ENHANCEMENT LAYER
   Solo cambios visuales. Sin modificar lógica ni funcionalidad.
═══════════════════════════════════════════════════════════════ */

/* ── 1. Ambient background más rico ───────────────────────── */
body::before {
  background:
    radial-gradient(ellipse 90% 55% at 50% -8%,  rgba(0,229,181,.10) 0%, transparent 62%),
    radial-gradient(ellipse 50% 40% at 90% 90%,  rgba(0,200,155,.05) 0%, transparent 60%),
    radial-gradient(ellipse 38% 30% at 6%  65%,  rgba(0,150,115,.04) 0%, transparent 60%);
}

/* ── 2. Nav flotante con glass effect ──────────────────────── */
nav {
  top: 10px !important;
  left: 12px !important;
  right: 12px !important;
  border-radius: 16px;
  border: 1px solid rgba(0,229,181,.12) !important;
  background: rgba(6,10,8,.82) !important;
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  box-shadow:
    0 8px 32px rgba(0,0,0,.38),
    0 1px 0 rgba(0,229,181,.07) inset;
}

/* Ajuste de padding-top en páginas por nav flotante */
.page { padding-top: 80px !important; }
#page-landing,
#page-como-funciona,
#page-blog,
#page-article { padding-top: 0 !important; }
.hero { padding-top: 100px !important; }
.cf-hero,
.blog-hero { padding-top: 100px !important; }
.article-shell { padding-top: 76px !important; }

/* ── 3. Auth cards glass ───────────────────────────────────── */
.auth-card {
  background: rgba(11,16,13,.86) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow:
    0 32px 80px rgba(0,0,0,.45),
    0 1px 0 rgba(0,229,181,.09) inset,
    0 0 0 1px rgba(0,229,181,.05);
}

/* ── 4. Form shell glass ────────────────────────────────────── */
.form-shell {
  background: rgba(11,16,13,.88) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 20px 60px rgba(0,0,0,.32),
    0 1px 0 rgba(0,229,181,.06) inset;
}

/* ── 5. Botones primarios con depth ────────────────────────── */
.btn.green,
.cta-btn,
.nav-pill.solid,
.cta-bottom-btn,
.btn-nxt {
  box-shadow:
    0 4px 20px rgba(0,229,181,.22),
    0 1px 0 rgba(255,255,255,.14) inset;
}
.btn.green:hover,
.cta-btn:hover,
.cta-bottom-btn:hover,
.nav-pill.solid:hover,
.btn-nxt:hover {
  box-shadow:
    0 10px 36px rgba(0,229,181,.35),
    0 1px 0 rgba(255,255,255,.18) inset;
}
.btn.green:active,
.cta-btn:active,
.cta-bottom-btn:active,
.btn-nxt:active {
  transform: translateY(1px) !important;
  box-shadow: 0 2px 10px rgba(0,229,181,.2);
}
.cta-bottom-btn {
  background: linear-gradient(135deg, var(--green) 0%, #00C99E 100%) !important;
}

/* ── 6. Chip & day buttons micro-interacciones ─────────────── */
.chip-btn { transition: all .18s cubic-bezier(.4,0,.2,1) !important; }
.chip-btn:active,
.day-btn:active { transform: scale(0.95) !important; }
.chip-btn.on {
  box-shadow: 0 0 0 1px rgba(0,229,181,.55), 0 4px 16px rgba(0,229,181,.13);
}
@keyframes chipSpring {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.11); }
  65%  { transform: scale(0.96); }
  85%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}
.chip-spring { animation: chipSpring .4s cubic-bezier(.16,1,.3,1) both !important; }
.day-btn {
  transition: all .18s cubic-bezier(.4,0,.2,1) !important;
}
.day-btn.on {
  box-shadow: 0 0 0 1px rgba(0,229,181,.55), 0 4px 12px rgba(0,229,181,.12);
}

/* ── 7. Stats row profundidad ──────────────────────────────── */
.stats {
  border-color: rgba(0,229,181,.16) !important;
  box-shadow:
    0 0 0 1px rgba(0,229,181,.04),
    0 20px 60px rgba(0,0,0,.28);
}
.stat {
  transition: background .2s ease;
  cursor: default;
}
.stat:hover { background: rgba(0,229,181,.03); }

/* ── 8. Inputs: mejor focus glow ───────────────────────────── */
.field input:focus,
.field select:focus,
.field textarea:focus,
.finput:focus,
.code-field:focus,
.captcha input:focus {
  box-shadow:
    0 0 0 3px rgba(0,229,181,.13),
    0 0 24px rgba(0,229,181,.07) !important;
}

/* ── 9. Result card profundidad ────────────────────────────── */
.result {
  box-shadow: 0 24px 80px rgba(0,0,0,.32);
}

/* ── 10. Historial rows hover mejorado ─────────────────────── */
.rut-row {
  transition: transform .2s ease, border-color .22s ease, box-shadow .22s ease !important;
}
.rut-row:hover {
  border-color: rgba(0,229,181,.24) !important;
  transform: translateX(5px) !important;
  box-shadow: -4px 0 24px rgba(0,229,181,.07);
}

/* ── 11. Feature & benefit cards ───────────────────────────── */
.feature-card:hover,
.cf-benefit:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,.3), 0 0 0 1px rgba(0,229,181,.08) !important;
}

/* ── 12. Blog cards ─────────────────────────────────────────── */
.blog-card:hover {
  box-shadow: 0 24px 60px rgba(0,229,181,.09) !important;
}

/* ── 13. Nav pill solid ─────────────────────────────────────── */
.nav-pill.solid {
  box-shadow: 0 4px 16px rgba(0,229,181,.22);
}

/* ── 14. Progress bar steps polished ───────────────────────── */
.pb-step.done .pb-num {
  box-shadow: 0 0 0 3px rgba(0,229,181,.22);
}
.pb-step.active .pb-num {
  border-color: var(--green) !important;
  color: var(--green) !important;
  box-shadow: 0 0 0 3px rgba(0,229,181,.14);
}

/* ── 15. Spinner glow ───────────────────────────────────────── */
.spinner {
  filter: drop-shadow(0 0 8px rgba(0,229,181,.25));
}

/* ── 16. Onboarding card glass ──────────────────────────────── */
.onb-card {
  background: rgba(11,16,13,.92) !important;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  box-shadow:
    0 32px 80px rgba(0,0,0,.55),
    0 1px 0 rgba(0,229,181,.1) inset;
}

/* ── 17. Dropdown glass ─────────────────────────────────────── */
.user-dropdown,
.lang-dropdown {
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  background: rgba(10,15,12,.94) !important;
  box-shadow:
    0 16px 48px rgba(0,0,0,.55),
    0 1px 0 rgba(0,229,181,.09) inset !important;
}

/* ── 18. Scrollbar refinada ─────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(0,229,181,.22);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0,229,181,.38);
}

/* ── 19. Badge glow sutil ───────────────────────────────────── */
.badge {
  box-shadow: 0 0 18px rgba(0,229,181,.1);
}

/* ── 20. Ses cards ──────────────────────────────────────────── */
.ses-card:hover {
  box-shadow: 0 8px 28px rgba(0,229,181,.07) !important;
}

/* ── 21. Account boxes depth ────────────────────────────────── */
.cc-box {
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0,0,0,.22);
}

/* ── 22. Proof / stats strips ───────────────────────────────── */
.proof-strip,
.cf-proof {
  box-shadow: 0 12px 40px rgba(0,0,0,.22);
}

/* ── 23. CTA boxes enhanced bottom line ─────────────────────── */
.cta-box,
.cf-cta-box,
.blog-cta-box,
.article-cta-box {
  box-shadow: 0 24px 72px rgba(0,0,0,.32);
}

/* ── 24. Alert mejoras ──────────────────────────────────────── */
.alert.err { box-shadow: 0 4px 18px rgba(239,68,68,.09); }
.alert.ok  { box-shadow: 0 4px 18px rgba(0,229,181,.09); }

/* ── 25. Tag hover ──────────────────────────────────────────── */
.tag { transition: box-shadow .2s ease; }

/* ── 26. Transición de página mejorada ──────────────────────── */
.page.active {
  animation: pageReveal .3s cubic-bezier(.16,1,.3,1) both !important;
}
@keyframes pageReveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 27. Legal y contact shells ─────────────────────────────── */
.legal-shell,
.contact-shell { position: relative; z-index: 1; }

/* ── 28. Section divider lines ──────────────────────────────── */
.how-section {
  border-top: 1px solid rgba(0,229,181,.07);
}
.features-section {
  border-top: 1px solid rgba(0,229,181,.06);
}

/* ── 29. Steps grid card border glow on hover ───────────────── */
.step-card,
.cf-step {
  transition: background .25s ease, box-shadow .25s ease !important;
}
.step-card:hover,
.cf-step:hover {
  box-shadow: inset 0 0 0 1px rgba(0,229,181,.1);
}

/* ── 30. Nav logo glow ──────────────────────────────────────── */
.nav-logo-svg {
  filter: drop-shadow(0 0 8px rgba(0,229,181,.3));
}

/* ── 31. Btn-prev hover ─────────────────────────────────────── */
.btn-prev {
  transition: all .18s ease !important;
}
.btn-prev:hover {
  box-shadow: 0 4px 16px rgba(0,229,181,.15);
}

/* ── 32. Act buttons result ─────────────────────────────────── */
.act-btn {
  transition: all .18s ease !important;
}
.act-btn:hover {
  box-shadow: 0 4px 14px rgba(0,229,181,.1);
}
.act-btn.prim {
  box-shadow: 0 4px 16px rgba(0,229,181,.2);
}

/* ── 33. Hero grid bg más sutil ─────────────────────────────── */
.landing-grid-bg { opacity: .25 !important; }

/* ── 34. Slider track mejorado ──────────────────────────────── */
input[type=range] {
  background: linear-gradient(to right, rgba(0,229,181,.3), rgba(0,229,181,.08)) !important;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(0,229,181,.18), 0 2px 8px rgba(0,0,0,.3) !important;
}

/* ── 35. Summary grid light ─────────────────────────────────── */
.summary {
  border: 1px solid rgba(0,229,181,.08);
}

/* ── 36. prefers-reduced-motion override ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  .page.active { animation: none !important; }
  .btn.green:active,
  .cta-btn:active,
  .chip-btn:active,
  .day-btn:active { transform: none !important; }
  .reveal { transition: none !important; opacity: 1 !important; transform: none !important; }
  .cf-benefit { transition: none !important; }
  .cf-benefit:hover { transform: none !important; }
  .cta-btn, .cta-btn:hover { transform: none !important; }
}

/* ── 37. Mobile nav ajuste ──────────────────────────────────── */
@media (max-width: 640px) {
  nav {
    top: 8px !important;
    left: 8px !important;
    right: 8px !important;
    border-radius: 14px !important;
    gap: 12px;
  }
  /* Announce bar: push below floating nav + breathing room */
  #announce-bar { margin-top: 80px; }
  .hero { padding-top: 96px !important; }
}

/* ══════════════════════════════════════════════════════════════
   FITNESSAI 2026 — VISUAL ENHANCEMENT LAYER v2
   Logo · Gradient text · Orbs · Stagger · CTA glow
══════════════════════════════════════════════════════════════ */

/* ── 38. Nav wordmark gradient em ───────────────────────────── */
.nav-wordmark em {
  font-style: normal;
  background: linear-gradient(90deg, #00E5B5 0%, #5FFFD8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── 39. Hero dynamic word — gradient text ──────────────────── */
#hero-dynamic-text {
  background: linear-gradient(135deg, #00E5B5 0%, #5FFFD8 45%, #00C49A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 28px rgba(0,229,181,.35));
}

/* ── 40. Ambient hero orbs ──────────────────────────────────── */
.hero-orbs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0;
  animation: orbFloat 12s ease-in-out infinite;
  will-change: transform, opacity;
}
.hero-orb:nth-child(1) {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(0,229,181,.13) 0%, transparent 70%);
  top: -100px; left: -80px;
  animation-delay: 0s; animation-duration: 14s;
}
.hero-orb:nth-child(2) {
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(0,196,154,.09) 0%, transparent 70%);
  top: 40%; right: -60px;
  animation-delay: -4s; animation-duration: 18s;
}
.hero-orb:nth-child(3) {
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(95,255,216,.07) 0%, transparent 70%);
  bottom: 0; left: 30%;
  animation-delay: -8s; animation-duration: 22s;
}
@keyframes orbFloat {
  0%   { opacity: 0;    transform: translate(0, 0)   scale(1);    }
  15%  { opacity: 1; }
  50%  { opacity: .8;   transform: translate(20px,-30px) scale(1.08); }
  85%  { opacity: 1; }
  100% { opacity: 0;    transform: translate(0, 0)   scale(1);    }
}

/* ── 41. Hero inner above orbs ──────────────────────────────── */
.hero-inner { position: relative; z-index: 1; }

/* ── 42. CTA button animated border glow ───────────────────── */
@keyframes ctaGlow {
  0%, 100% { box-shadow: 0 4px 20px rgba(0,229,181,.22), 0 1px 0 rgba(255,255,255,.14) inset, 0 0 0 0   rgba(0,229,181,.0); }
  50%       { box-shadow: 0 4px 28px rgba(0,229,181,.40), 0 1px 0 rgba(255,255,255,.18) inset, 0 0 0 3px rgba(0,229,181,.15); }
}
.cta-btn {
  animation: ctaGlow 3.5s ease-in-out infinite;
}
.cta-btn:hover, .cta-btn:focus {
  animation: none;
  box-shadow: 0 6px 32px rgba(0,229,181,.55), 0 1px 0 rgba(255,255,255,.22) inset, 0 0 0 2px rgba(0,229,181,.35) !important;
}

/* ── 43. Staggered card / step entrance ─────────────────────── */
.step-card, .feature-card, .stat {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
}
.step-card.visible, .feature-card.visible, .stat.visible {
  opacity: 1;
  transform: translateY(0);
}
.step-card:nth-child(1), .feature-card:nth-child(1), .stat:nth-child(1) { transition-delay: .05s; }
.step-card:nth-child(2), .feature-card:nth-child(2), .stat:nth-child(2) { transition-delay: .14s; }
.step-card:nth-child(3), .feature-card:nth-child(3), .stat:nth-child(3) { transition-delay: .23s; }
.step-card:nth-child(4), .feature-card:nth-child(4), .stat:nth-child(4) { transition-delay: .32s; }

/* ── 44. Hero stats — stagger reveal ───────────────────────── */
.stats { overflow: visible; }

/* ── 45. Logo mark pulse on hover ───────────────────────────── */
@keyframes logoPulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(0,229,181,0)); }
  50%       { filter: drop-shadow(0 0 8px rgba(0,229,181,.5)); }
}
.nav-brand:hover .nav-logo-svg {
  animation: logoPulse 1.6s ease-in-out infinite;
}
.nav-brand { cursor: pointer; }

/* ── 46. Typing cursor on hero dynamic word ─────────────────── */
/* cursor eliminado — solo texto rotante sin parpadeo */

/* ── 47. Input focus glow ───────────────────────────────────── */
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 2px rgba(0,229,181,.22), 0 2px 12px rgba(0,0,0,.25) !important;
  border-color: rgba(0,229,181,.45) !important;
  transition: box-shadow .2s, border-color .2s;
}

/* ── 48. Reduced motion — v2 overrides ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-orb          { animation: none !important; opacity: .4 !important; }
  .cta-btn           { animation: none !important; }

  .step-card, .feature-card, .stat {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .nav-brand:hover .nav-logo-svg { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   FITNESSAI 2026 — VISUAL ENHANCEMENT LAYER v3
   Nav active · Inicio btn · Circular logo · Micro-polish
══════════════════════════════════════════════════════════════ */

/* ── 49. Nav pill ACTIVE state (current page indicator) ─────── */
.nav-pill.active {
  background: rgba(0,229,181,.10) !important;
  border-color: rgba(0,229,181,.38) !important;
  color: var(--green) !important;
  text-shadow: 0 0 12px rgba(0,229,181,.3);
}
.nav-pill.active:hover {
  background: rgba(0,229,181,.16) !important;
  border-color: rgba(0,229,181,.55) !important;
}

/* ── 50. ← Inicio / back buttons — consistent style ─────────── */
/* Targets inline-styled [data-t="btn_inicio"] buttons */
[data-t="btn_inicio"] {
  color: var(--white3) !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  transition: color .22s, gap .22s !important;
  text-decoration: none;
}
[data-t="btn_inicio"]:hover {
  color: var(--green) !important;
  gap: 8px !important;
}
[data-t="btn_inicio"]:active {
  color: var(--green2) !important;
  transform: none;
}
/* Subtle left-slide on hover via translateX */
[data-t="btn_inicio"] {
  transition: color .22s, transform .22s cubic-bezier(.16,1,.3,1) !important;
}
[data-t="btn_inicio"]:hover {
  transform: translateX(-3px) !important;
}

/* ── 51. Back btn (JS-generated) refinement ─────────────────── */
.back-btn {
  transition: color .22s, gap .22s !important;
  color: var(--white3) !important;
}
.back-btn:hover {
  color: var(--green) !important;
  gap: 9px !important;
}

/* ── 52. Logo mark — circle clip & size ─────────────────────── */
.nav-logo-svg {
  border-radius: 50% !important;
  overflow: hidden;
  width: 44px !important;
  height: 44px !important;
  box-shadow: 0 0 0 1.5px rgba(0,229,181,.2), 0 4px 14px rgba(0,229,181,.12) !important;
}
/* Slightly larger at wider viewports for better visibility */
@media (min-width: 768px) {
  .nav-logo-svg { width: 46px !important; height: 46px !important; }
}

/* ── 53. Nav pill transitions polish ─────────────────────────── */
.nav-pill {
  transition: background .2s, border-color .2s, color .2s, box-shadow .2s !important;
}
.nav-pill.ghost:hover {
  box-shadow: 0 0 0 1px rgba(0,229,181,.12);
}

/* ── 54. Auth card entrance animation ───────────────────────── */
.auth-card {
  animation: authCardIn .38s cubic-bezier(.16,1,.3,1) both;
}
@keyframes authCardIn {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

/* ── 55. Form button press micro-interaction ─────────────────── */
.btn.green:active,
.btn.outline:active,
.act-btn:active,
.nav-pill.solid:active {
  transform: scale(0.97) !important;
  transition: transform .1s !important;
}

/* ── 56. Historial row entrance stagger ─────────────────────── */
.ses-card {
  animation: sesIn .3s cubic-bezier(.16,1,.3,1) both;
}
.ses-card:nth-child(1) { animation-delay: .04s; }
.ses-card:nth-child(2) { animation-delay: .10s; }
.ses-card:nth-child(3) { animation-delay: .16s; }
.ses-card:nth-child(4) { animation-delay: .22s; }
.ses-card:nth-child(5) { animation-delay: .28s; }
@keyframes sesIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── 57. Act buttons refined depth ──────────────────────────── */
.act-btn {
  transition: background .18s, border-color .18s, box-shadow .18s, transform .12s !important;
}
.act-btn:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,.22), 0 1px 0 rgba(255,255,255,.04) inset !important;
  transform: translateY(-1px) !important;
}
.act-btn.prim {
  box-shadow: 0 4px 18px rgba(0,229,181,.22), 0 1px 0 rgba(255,255,255,.12) inset !important;
}
.act-btn.prim:hover {
  box-shadow: 0 6px 24px rgba(0,229,181,.35), 0 1px 0 rgba(255,255,255,.16) inset !important;
}

/* ── 58. Page wrap entrance ──────────────────────────────────── */
.page.active .wrap,
.page.active .auth-outer {
  animation: wrapIn .32s cubic-bezier(.16,1,.3,1) both;
}
@keyframes wrapIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 59. Nav logo emblem glow on hover ───────────────────────── */
.nav-brand:hover .nav-logo-svg {
  box-shadow: 0 0 0 2px rgba(0,229,181,.35), 0 6px 22px rgba(0,229,181,.28) !important;
  transition: box-shadow .3s !important;
}

/* ── 60. Reduced motion v3 overrides ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .auth-card                { animation: none !important; }
  .ses-card                 { animation: none !important; }
  .page.active .wrap,
  .page.active .auth-outer  { animation: none !important; }
  .act-btn:hover            { transform: none !important; }
  .btn.green:active,
  .btn.outline:active,
  .act-btn:active,
  .nav-pill.solid:active    { transform: none !important; }
}

/* ── 61. Premium polish v2 — depth, microinteractions, hierachy ─ */

/* Result head: subtle top glow */
.result{
  box-shadow: 0 4px 32px rgba(0,0,0,.32), 0 0 0 0 rgba(0,229,181,.04);
}
.result-head{
  background: linear-gradient(180deg, rgba(0,229,181,.03) 0%, transparent 100%);
}

/* ── AI Insights panel ── */
#res-ai-insights {
  display: none;
  padding: 16px 28px;
  border-bottom: 1px solid var(--border2);
  background: rgba(0,229,181,.03);
}
.ai-insights-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
}
.ai-insights-icon {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--glow2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ai-insights-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--green);
}
.ai-confidence-badge {
  margin-left: auto;
  font-size: .65rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; padding: 3px 9px;
  border-radius: 100px; border: 1px solid var(--border);
  color: var(--white3); background: var(--bg3);
}
.ai-confidence-badge.alto { color: var(--green); border-color: var(--green); background: var(--glow2); }
.ai-confidence-badge.medio { color: #f0b400; border-color: rgba(240,180,0,.4); background: rgba(240,180,0,.08); }
.ai-confidence-badge.bajo  { color: #ff6b6b; border-color: rgba(255,107,107,.4); background: rgba(255,107,107,.08); }
.ai-alert-list {
  display: flex; flex-direction: column; gap: 6px;
}
.ai-alert-item {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: .8rem; line-height: 1.65; color: var(--white3);
  background: var(--bg3); border: 1px solid var(--border2);
  border-radius: var(--rs); padding: 9px 12px;
}
.ai-alert-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); margin-top: 6px; flex-shrink: 0;
}
/* AI Ajustes — collapsible reasoning panel */
.ai-ajustes-wrap { margin-top: 8px; }
.ai-ajustes-toggle {
  display: flex; align-items: center; gap: 6px;
  background: none; border: 1px dashed var(--border2); border-radius: var(--rs);
  color: var(--white3); font-size: .73rem; padding: 6px 12px;
  cursor: pointer; transition: color .2s, border-color .2s; width: 100%;
}
.ai-ajustes-toggle svg { transition: transform .2s; flex-shrink: 0; }
.ai-ajustes-toggle:hover { color: var(--green); border-color: var(--green); }
.ai-ajustes-wrap.open .ai-ajustes-toggle svg { transform: rotate(180deg); }
.ai-ajustes-body {
  display: none; flex-direction: column; gap: 4px; margin-top: 6px;
}
.ai-ajustes-wrap.open .ai-ajustes-body { display: flex; }
.ai-ajuste-item {
  font-size: .76rem; line-height: 1.65; color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.025); border: 1px solid var(--border2);
  border-radius: var(--rs); padding: 7px 11px;
}
.ai-ajuste-adaptivo {
  color: var(--green) !important;
  background: rgba(0,229,181,.06) !important;
  border-color: rgba(0,229,181,.25) !important;
}
@media(max-width:768px){
  #res-ai-insights { padding-left: 16px; padding-right: 16px; }
  .ai-ajustes-toggle { font-size: .7rem; }
}

/* Session number badge — brighter */
.ses-n{
  background: rgba(0,229,181,.12) !important;
  border-color: rgba(0,229,181,.35) !important;
  box-shadow: 0 0 8px rgba(0,229,181,.12);
}

/* Exercise type badge — more visible */
.comp{ background: rgba(0,229,181,.12); color: #00D4A8; }
.aist{ background: rgba(107,138,126,.14); color: var(--white3); }

/* Exercise stat values — pop more */
.ex-sv{ color: var(--white); letter-spacing: -.01em; }
.ex-sv { font-size: .88rem !important; font-weight: 700; }
.ex-sl { font-size: .7rem !important; }

/* Feature icon — subtle inner glow */
.feature-icon{
  background: linear-gradient(135deg, rgba(0,229,181,.14), rgba(0,165,130,.06)) !important;
  border-color: rgba(0,229,181,.22) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.2), 0 0 12px rgba(0,229,181,.05) inset;
}

/* Step icon wrap — same treatment */
.step-icon-wrap{
  background: linear-gradient(135deg, rgba(0,229,181,.12), rgba(0,165,130,.05)) !important;
  border-color: rgba(0,229,181,.2) !important;
}

/* Chip btn active state — more punchy */
.chip-btn.on{
  background: rgba(0,229,181,.1) !important;
  border-color: rgba(0,229,181,.5) !important;
  box-shadow: 0 0 0 3px rgba(0,229,181,.07), 0 2px 8px rgba(0,229,181,.12);
}

/* Day button active */
.day-btn.on{
  background: rgba(0,229,181,.1) !important;
  border-color: rgba(0,229,181,.5) !important;
  box-shadow: 0 0 0 2px rgba(0,229,181,.06);
}

/* Form input subtle refinement */
.finput{
  transition: border-color .2s, background .2s, box-shadow .2s !important;
}
.finput:focus{
  border-color: rgba(0,229,181,.6) !important;
  box-shadow: 0 0 0 3px rgba(0,229,181,.09), 0 0 16px rgba(0,229,181,.05) !important;
}

/* Auth card subtle border top highlight */
.auth-card{
  position: relative;
}
.auth-card::before{
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,229,181,.2), transparent);
  border-radius: 1px;
}

/* Warmup section cleaner border */
.warmup{
  background: linear-gradient(135deg, rgba(0,229,181,.04), rgba(0,165,130,.02)) !important;
  border-color: rgba(0,229,181,.14) !important;
}

/* History rows elevated shadow */
.rut-row{
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
  transition: border-color .2s, transform .2s, box-shadow .2s !important;
}
.rut-row:hover{
  box-shadow: 0 4px 20px rgba(0,229,181,.08) !important;
}

/* Nav height slightly increased for logo */
nav{ height: 64px !important; }

/* Ensure .btn-nxt has matching gradient */
.btn-nxt{
  background: linear-gradient(135deg, #00E5B5, #00C49A) !important;
  box-shadow: 0 4px 16px rgba(0,229,181,.24);
}
.btn-nxt:hover{
  background: linear-gradient(135deg, #05f0c0, #00D4A8) !important;
  box-shadow: 0 6px 22px rgba(0,229,181,.34) !important;
  transform: translateX(3px) !important;
}

@media (prefers-reduced-motion: reduce) {
  .feature-card:hover,
  .step-card:hover,
  .rut-row:hover { transform: none !important; }
}

/* ── 62. SaaS 2026 — Exercise visual polish ──────────────────── */
/* (exercise icon system removed — replaced by help button) */

/* ── 63. Exercise help button animations ────────────────────── */


/* Logo mark: continuous soft glow pulse (replaces float) */
@keyframes logoPulse2 {
  0%, 100% { box-shadow: 0 0 0 1.8px rgba(0,229,181,.22), 0 4px 16px rgba(0,229,181,.16); }
  50%       { box-shadow: 0 0 0 2.5px rgba(0,229,181,.40), 0 4px 24px rgba(0,229,181,.30); }
}
.nav-logo-svg {
  animation: logoPulse2 3s ease-in-out infinite !important;
}

/* Logo: slightly larger on desktop for prominence */
@media (min-width: 768px) {
  .nav-logo-svg { width: 48px !important; height: 48px !important; }
}

/* Nav wordmark: tighter tracking, bolder AI */
.nav-wordmark {
  letter-spacing: -.02em;
}
.nav-wordmark em {
  font-weight: 800;
  letter-spacing: -.01em;
}

/* Chip & day buttons: punchy press feedback */
.chip-btn:active, .day-btn:active {
  transform: scale(0.93) !important;
  transition: transform .08s !important;
}

/* Exercise type badge: crisper */
.ex-type-badge {
  letter-spacing: .02em;
  font-weight: 700;
}

/* Session header: left-border accent for visual anchor */
.ses-head {
  border-left: 3px solid rgba(0,229,181,.5) !important;
  padding-left: 10px !important;
}

/* Reduced-motion overrides */
@media (prefers-reduced-motion: reduce) {
  .nav-logo-svg                  { animation: none !important; }
  .chip-btn:active,
  .day-btn:active                { transform: none !important; }
}

/* ── 63. Help Modal — Routine Explanation ────────────────────── */
.help-btn {
  background: rgba(0,229,181,.08) !important;
  border-color: rgba(0,229,181,.25) !important;
  color: var(--green) !important;
}
.help-btn:hover {
  background: rgba(0,229,181,.16) !important;
  border-color: rgba(0,229,181,.45) !important;
}

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(4px);
  z-index: 9900;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal-overlay.open { display: flex; }

.help-modal {
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 16px;
  width: 100%;
  max-width: 620px;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0,0,0,.6), 0 0 0 1px rgba(0,229,181,.08);
  animation: modalIn .22s ease-out;
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .help-modal { animation: none; }
}

.help-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border2);
}
.help-modal-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
}
.help-modal-icon {
  width: 32px; height: 32px;
  background: rgba(0,229,181,.12);
  border: 1px solid rgba(0,229,181,.3);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--green);
  flex-shrink: 0;
}
.help-modal-close {
  background: none; border: none;
  color: var(--white4); cursor: pointer;
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.help-modal-close:hover { background: var(--border2); color: var(--white); }

.help-modal-body { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 16px; }

.help-routine-summary {
  background: rgba(0,229,181,.06);
  border: 1px solid rgba(0,229,181,.15);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: .85rem;
  color: var(--white3);
  line-height: 1.68;
}
.help-routine-summary strong { color: var(--green); }

.help-concept {
  background: var(--bg2, rgba(255,255,255,.03));
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.help-concept:hover { border-color: rgba(0,229,181,.3); background: rgba(0,229,181,.04); }
.help-concept-head {
  display: flex; align-items: center; gap: 10px;
}
.help-concept-badge {
  background: rgba(0,229,181,.12);
  color: var(--green);
  font-size: .7rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 20px;
  flex-shrink: 0;
}
.help-concept-title {
  font-size: .9rem; font-weight: 600;
  color: var(--white); flex: 1;
}
.help-concept-arrow {
  color: var(--white4);
  transition: transform .2s;
  flex-shrink: 0;
}
.help-concept.open .help-concept-arrow { transform: rotate(180deg); }
.help-concept-body {
  display: none;
  padding-top: 10px;
  font-size: .83rem;
  color: var(--white3);
  line-height: 1.65;
}
.help-concept.open .help-concept-body { display: block; }
.help-concept-example {
  margin-top: 8px;
  background: rgba(0,229,181,.06);
  border-left: 3px solid rgba(0,229,181,.4);
  padding: 8px 12px;
  border-radius: 0 6px 6px 0;
  font-size: .81rem;
  color: var(--white3);
}
.help-concept-example strong { color: var(--green); }

/* ══════════════════════════════════════════════════════════════
   FITNESSAI 2026 — FINAL UI PASS
   Landing sections · Range fill · Mobile 480px · Consistency
══════════════════════════════════════════════════════════════ */

/* ── 64. Landing page section labels ──────────────────────────── */
.section-label {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--green);
}

/* ── 65. Landing sections: coordinated spacing ─────────────────── */
#landing-how   { padding-bottom: 0; }
#landing-features { padding-top: 72px; }
#landing-cta   { padding-top: 80px; padding-bottom: 80px; }

/* ── 66. Dynamic range input fill via CSS custom property ──────── */
input[type=range] {
  --track-fill: 50%;
  background: linear-gradient(
    to right,
    rgba(0,229,181,.55) 0%,
    rgba(0,229,181,.55) var(--track-fill),
    rgba(255,255,255,.06) var(--track-fill),
    rgba(255,255,255,.06) 100%
  ) !important;
}
input[type=range]::-moz-range-progress {
  background: rgba(0,229,181,.55);
  height: 4px;
  border-radius: 2px;
}

/* ── 67. Ghost CTA button focus-visible ring ───────────────────── */
.cta-ghost-btn:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(0,229,181,.18);
}

/* ── 68. Proof strip within landing: max-width container ──────── */
#page-landing .proof-strip {
  max-width: 860px;
  margin: 0 auto;
}

/* ── 69. CTA bottom-btn: consistent scale active ──────────────── */
.cta-bottom-btn:active {
  transform: translateY(0) scale(.97) !important;
}

/* ── 70. Feature/step cards: consistent cursor and ring ───────── */
.step-card, .feature-card {
  cursor: default;
}
.feature-card:focus-visible, .step-card:focus-visible {
  outline: 2px solid rgba(0,229,181,.4);
  outline-offset: 2px;
}

/* ── 71. Landing rut-row hover: green left border accent ─────── */
.rut-row:hover {
  border-left-color: rgba(0,229,181,.35) !important;
  padding-left: 14px !important;
  transition: border-left-color .2s, padding-left .2s, box-shadow .2s !important;
}

/* ── 72. Hero stats bar: reveal animation ──────────────────────── */
.stats.visible { animation: up .5s .38s ease both; }

/* ── 73. Proof strip: reveal entrance ─────────────────────────── */
.proof-strip.reveal { opacity: 0; transform: translateY(18px); }
.proof-strip.reveal.visible { opacity: 1; transform: translateY(0); transition: opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1); }

/* ── 74. Landing cta-box: hover glow ──────────────────────────── */
.cta-box {
  transition: box-shadow .35s ease;
}
.cta-box:hover {
  box-shadow: 0 12px 60px rgba(0,229,181,.11), 0 0 0 1px rgba(0,229,181,.15) !important;
}

/* ── 75. 480px mobile breakpoint ─────────────────────────────── */
@media (max-width: 480px) {
  .hero-h1  { font-size: clamp(1.9rem, 7.5vw, 2.6rem) !important; }
  .hero-p   { font-size: .93rem; }
  .hero-cta > div { flex-direction: column; width: 100%; }
  .cta-btn, .cta-ghost-btn { width: 100%; justify-content: center; }
  .stats    { gap: 0; }
  .stat     { padding: 16px 8px; }
  .stat-n   { font-size: 1.4rem; }
  .steps-grid { gap: 1px; }
  .step-card  { padding: 28px 20px; }
  .step-num   { font-size: 2.8rem; }
  .features-grid { gap: 10px; }
  .feature-card  { padding: 22px 18px; }
  .proof-strip   { padding: 20px 16px; flex-direction: column; gap: 12px; text-align: center; }
  .proof-div     { width: 36px; height: 1px; }
  .proof-n       { font-size: 1.6rem; }
  .cta-box       { padding: 32px 20px !important; }
  .cta-h2        { font-size: 1.7rem; }
  .cta-bottom-btn { padding: 14px 24px; font-size: .94rem; }
  .how-section, .features-section, .cta-section { padding-left: 12px !important; padding-right: 12px !important; }
  .auth-outer    { padding: 24px 16px 60px; }
  .auth-card     { padding: 26px 20px; }
  .testi-grid    { grid-template-columns: 1fr !important; }
}

/* ── 76. Reduced motion: final pass overrides ──────────────────── */
@media (prefers-reduced-motion: reduce) {
  .proof-strip.reveal { opacity: 1; transform: none; transition: none; }
  .cta-box:hover      { box-shadow: none !important; }
  .rut-row:hover      { padding-left: inherit !important; }
  .cta-ghost-btn:hover, .cta-ghost-btn:active { transform: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   LANDING REDESIGN — New sections & hero impact
   ══════════════════════════════════════════════════════════════════ */

/* ── Shared section typography ── */
.section-h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.6rem,3.5vw,2.5rem); letter-spacing: -.03em;
  color: var(--white); line-height: 1.1; margin-bottom: 14px;
}
.section-sub {
  font-size: .95rem; color: var(--white3); line-height: 1.72;
  max-width: 520px; margin: 0 auto;
}

/* ── Hero impact redesign ── */
.hero-impact { margin-bottom: 8px !important; }
.hero-impact-line {
  display: block; font-size: clamp(1.7rem, 4.2vw, 2.8rem);
  font-weight: 800; letter-spacing: -.04em; line-height: 1.08;
  text-transform: uppercase; color: var(--white);
}
.hero-impact-green { color: var(--green); }
.hero-tagline-row {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  flex-wrap: nowrap; margin: 16px 0 4px;
  font-size: .85rem; font-weight: 500; color: var(--white3); letter-spacing: .02em;
  overflow: hidden;
}
#hero-line-1 { white-space: nowrap; flex-shrink: 0; }
.hero-tagline-sep { color: var(--border); flex-shrink: 0; }
/* Fixed-width container for the rotating word so static text never shifts */
#hero-dynamic-wrap {
  min-width: 160px;
  flex-shrink: 0;
  overflow: hidden;
}
@media(max-width:580px){
  .hero-tagline-row { flex-wrap: wrap; gap: 4px; }
  #hero-line-1 { white-space: normal; flex-shrink: 1; }
  #hero-dynamic-wrap { min-width: 0; }
}

/* ── Feature marquee ticker ── */
.marquee-strip {
  width: 100%; overflow: hidden;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: rgba(0,229,181,.03);
  padding: 10px 0; margin: 56px 0 0;
  mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}
.marquee-track {
  display: flex; gap: 0; white-space: nowrap;
  animation: marquee-scroll 28s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
.marquee-item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 28px; font-size: .75rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--white4);
  flex-shrink: 0;
}
.marquee-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--green); opacity: .6; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Hero animated glow orb ── */
.hero-glow-orb {
  position: absolute; width: 600px; height: 400px;
  top: -80px; left: 50%; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0,229,181,.08) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
  animation: glow-pulse 6s ease-in-out infinite;
}
@keyframes glow-pulse {
  0%, 100% { opacity: .6; transform: translateX(-50%) scale(1); }
  50%       { opacity: 1; transform: translateX(-50%) scale(1.12); }
}

/* ── Animated underline on stats ── */
.stat-n { position: relative; }
.stat { cursor: default; transition: transform .2s ease; }
.stat:hover { transform: translateY(-3px); }

/* ── Subtle card pulse border on how-cards ── */
.how-card {
  position: relative; overflow: hidden;
}
.how-card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(0,229,181,.06) 0%, transparent 60%);
  opacity: 0; transition: opacity .3s ease;
  pointer-events: none;
}
.how-card:hover::before { opacity: 1; }

/* ── Section reveal animation ── */
.reveal-stagger > * {
  opacity: 0; transform: translateY(20px);
  transition: opacity .5s ease, transform .5s ease;
}
.reveal-stagger > *.visible {
  opacity: 1; transform: translateY(0);
}

/* ── Progressive Overload section ── */
.overload-section { padding: 80px 24px; max-width: 1100px; margin: 0 auto; }
.overload-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start;
}
.overload-chart {
  background: rgba(11,16,13,.65); border: 1px solid var(--border);
  border-radius: var(--rl); padding: 30px;
}
.overload-chart-label {
  font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--white4); margin-bottom: 24px;
}
.overload-bars {
  display: flex; align-items: flex-end; gap: 10px; height: 130px; margin-bottom: 14px;
}
.overload-bar-wrap {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%;
  justify-content: flex-end;
}
.overload-bar {
  width: 100%; border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, var(--green) 0%, rgba(0,229,181,.25) 100%);
  min-height: 4px;
}
.overload-bar-label {
  font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--white3);
}
.overload-bar-val {
  font-size: .68rem; font-weight: 700; color: var(--green);
  order: -1; /* show above bar */
}
.overload-chart-note {
  font-size: .68rem; color: var(--white4); text-align: center; margin-top: 8px;
  letter-spacing: .03em;
}
.overload-info-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 22px; }
.overload-info-item { display: flex; align-items: flex-start; gap: 14px; }
.overload-info-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  background: var(--glow2); border: 1px solid var(--border);
  border-radius: 10px; display: flex; align-items: center; justify-content: center;
}
.overload-info-title { font-weight: 700; font-size: .9rem; color: var(--white); margin-bottom: 4px; }
.overload-info-desc { font-size: .81rem; color: var(--white3); line-height: 1.65; }
@media (max-width: 768px) {
  .overload-grid { grid-template-columns: 1fr; gap: 32px; }
  .overload-section { padding: 60px 16px; }
}

/* ── Science Methodology section ── */
.science-section {
  padding: 80px 24px;
  background: linear-gradient(180deg, transparent 0%, rgba(0,229,181,.025) 50%, transparent 100%);
}
.science-inner { max-width: 1100px; margin: 0 auto; }
.science-refs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px; margin-top: 48px;
}
.science-ref-card {
  background: rgba(11,16,13,.7); border: 1px solid var(--border);
  border-radius: var(--r); padding: 20px 22px; position: relative; overflow: hidden;
  transition: border-color .2s, transform .2s;
}
.science-ref-card:hover { border-color: rgba(0,229,181,.25); transform: translateY(-3px); }
.science-ref-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--green), transparent);
}
.science-ref-year {
  font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--green); margin-bottom: 6px;
}
.science-ref-title { font-size: .88rem; font-weight: 700; color: var(--white); margin-bottom: 7px; }
.science-ref-desc { font-size: .78rem; color: var(--white3); line-height: 1.62; }
.science-algo-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 10px; margin-top: 28px;
}
.science-algo-chip {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 16px; text-align: center;
  transition: border-color .2s;
}
.science-algo-chip:hover { border-color: rgba(0,229,181,.2); }
.science-algo-chip-label {
  font-size: .63rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--white4); margin-bottom: 5px;
}
.science-algo-chip-val { font-size: .84rem; font-weight: 700; color: var(--white); }
@media (max-width: 768px) {
  .science-section { padding: 60px 16px; }
  .science-refs { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .science-refs { grid-template-columns: 1fr; }
  .science-algo-row { grid-template-columns: repeat(2, 1fr); }
}

/* ── Equipment Adaptability section ── */
.equipment-section { padding: 80px 24px; max-width: 1100px; margin: 0 auto; }
.equipment-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 48px;
}
.equipment-card {
  background: rgba(11,16,13,.65); border: 1px solid var(--border);
  border-radius: var(--r); padding: 28px 20px; text-align: center;
  cursor: default; transition: border-color .2s, transform .25s;
}
.equipment-card:hover { border-color: rgba(0,229,181,.28); transform: translateY(-4px); }
.equipment-icon {
  width: 48px; height: 48px; background: var(--glow2); border: 1px solid var(--border);
  border-radius: 12px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
}
.equipment-name { font-size: .9rem; font-weight: 700; color: var(--white); margin-bottom: 7px; }
.equipment-desc { font-size: .76rem; color: var(--white3); line-height: 1.68; }
@media (max-width: 768px) {
  .equipment-grid { grid-template-columns: repeat(2, 1fr); }
  .equipment-section { padding: 60px 16px; }
}

/* ══════════════════════════════════════════════════════════════════════
   TASK 2 — ATHLETIC / BOLD UI UPGRADE
   Design system: Vibrant + Block-based, Barlow Condensed spirit
   Reference: fitnessai.com — bold typography, strong grid lines, impact
   ══════════════════════════════════════════════════════════════════════ */

/* ── Hero: bigger, bolder, more athletic ── */
.hero-h1 {
  font-size: clamp(2rem, 4.8vw, 3.6rem) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: .04em !important;
}
.hero-h1 .accent {
  /* Vibrant gradient text accent */
  background: linear-gradient(120deg, #00E5B5 0%, #00ff88 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Impact lines: refined, airy ── */
.hero-impact-line {
  font-size: clamp(1.8rem, 4.2vw, 3.2rem) !important;
  font-weight: 800 !important;
  letter-spacing: .05em !important;
  line-height: 1.12 !important;
}

/* ── Green impact line: gradient text for more visual impact ── */
.hero-impact-green {
  background: linear-gradient(120deg, #00ff99 0%, #00E5B5 55%, #00c9a0 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
}

/* Badge: bolder, more uppercase impact */
.badge {
  font-size: .68rem !important;
  font-weight: 800 !important;
  letter-spacing: .18em !important;
  padding: 7px 18px !important;
  border-radius: 4px !important; /* block-based, not pill */
}

/* CTA: bigger, uppercase, more presence */
.cta-btn {
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  padding: 16px 36px !important;
  border-radius: 6px !important;
  box-shadow: 0 6px 28px rgba(0,229,181,.4), inset 0 1px 0 rgba(255,255,255,.15) !important;
}
.cta-btn:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 40px rgba(0,229,181,.55) !important;
  letter-spacing: .06em !important;
}

/* Section labels: more impactful */
.section-label {
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  font-size: .7rem !important;
}
.section-label::before {
  width: 28px !important;
  height: 2px !important;
}

/* Section headings: bigger and bolder */
.section-h2, h2.section-h2 {
  font-size: clamp(1.8rem, 4vw, 3rem) !important;
  font-weight: 900 !important;
  letter-spacing: -.03em !important;
  line-height: 1.08 !important;
}

/* Feature cards: block-based with vivid left border */
.feature-card {
  border-left: 3px solid rgba(0,229,181,.4) !important;
  border-radius: 8px !important;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease !important;
}
.feature-card:hover {
  border-left-color: var(--green) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 48px rgba(0,229,181,.12), -4px 0 0 var(--green) !important;
}
.feature-title {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
}

/* Stats: larger numbers, more athletic */
.stat-n, .proof-n {
  font-size: 2.6rem !important;
  font-weight: 900 !important;
  letter-spacing: -.04em !important;
}

/* Nav pills: crisper — keep pill shape (100px), no uppercase */
.nav-pill.solid {
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  border-radius: 100px !important;
  font-size: .82rem !important;
}

/* Generator CTA button: bold green */
.btn.green {
  font-weight: 800 !important;
  letter-spacing: .01em !important;
}

/* Step numbers: bold athletic */
.step-num, .how-step-num {
  font-weight: 900 !important;
  font-size: 2.8rem !important;
  letter-spacing: -.05em !important;
  -webkit-text-stroke: 1px rgba(0,229,181,.3);
}

/* Progress bar steps: bolder label */
.pb-num {
  font-weight: 900 !important;
}

/* Proof strip: bigger impact numbers */
.proof-strip {
  border: 2px solid rgba(0,229,181,.16) !important;
  border-top: 3px solid rgba(0,229,181,.35) !important;
}

/* Page title in generator: bigger */
.page-title {
  font-size: 2.4rem !important;
  font-weight: 900 !important;
  letter-spacing: -.03em !important;
}

/* Form panels: more presence */
.panel-title {
  font-weight: 900 !important;
  letter-spacing: -.02em !important;
}

/* Bottom CTA btn */
.cta-bottom-btn {
  font-weight: 800 !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;
  font-size: .92rem !important;
  border-radius: 6px !important;
}

@media (max-width: 768px) {
  .cta-btn { padding: 14px 26px !important; font-size: .92rem !important; }
  .hero-h1 { font-size: clamp(1.9rem, 8vw, 2.8rem) !important; }
  .hero-impact-line { font-size: clamp(1.7rem, 7.5vw, 2.5rem) !important; letter-spacing: .04em !important; }
}

/* ── ANNOUNCEMENT BAR ────────────────────────────────────── */
#announce-bar {
  background: linear-gradient(90deg, rgba(0,229,181,.10) 0%, rgba(0,229,181,.04) 50%, rgba(0,229,181,.10) 100%);
  background-size: 200% 100%;
  animation: annBarShimmer 6s ease-in-out infinite;
  border-bottom: 1px solid rgba(0,229,181,.18);
  padding: 8px 40px 8px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: .8rem;
  font-weight: 500;
  color: var(--white2);
  position: relative;
  z-index: 10;
  transition: opacity .3s ease, max-height .3s ease;
  margin-top: 72px; /* push below fixed nav (60px) + 12px breathing room */
}
@keyframes annBarShimmer {
  0%,100% { background-position: 0% 0; }
  50%      { background-position: 100% 0; }
}
#announce-bar .ann-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  animation: ann-pulse 2s ease-in-out infinite;
}
@keyframes ann-pulse {
  0%,100%{opacity:1;transform:scale(1);}
  50%{opacity:.5;transform:scale(.8);}
}
#announce-bar .ann-text { color: var(--white2); }
#announce-bar .ann-text strong { color: var(--green); }
#announce-bar .ann-close {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--white4);
  cursor: pointer; font-size: 1rem; line-height: 1; padding: 4px;
  transition: color .2s;
}
#announce-bar .ann-close:hover { color: var(--white); }
#announce-bar.hidden { display: none; }

/* ── CTA BUTTON PULSE GLOW ───────────────────────────────── */
@keyframes cta-glow-pulse {
  0%,100%{ box-shadow: 0 0 20px rgba(0,229,181,.35), 0 4px 24px rgba(0,0,0,.4); }
  50%{ box-shadow: 0 0 36px rgba(0,229,181,.6), 0 6px 32px rgba(0,0,0,.5); }
}
.cta-btn {
  animation: cta-glow-pulse 3s ease-in-out infinite !important;
}
.cta-btn:hover, .cta-btn:focus {
  animation: none !important;
  box-shadow: 0 0 48px rgba(0,229,181,.75), 0 8px 36px rgba(0,0,0,.5) !important;
}

/* ── SCROLL TO TOP BUTTON ────────────────────────────────── */
#scroll-top-btn {
  position: fixed; bottom: 24px; right: 22px; z-index: 900;
  width: 42px; height: 42px;
  background: rgba(0,229,181,.12);
  border: 1px solid rgba(0,229,181,.3);
  border-radius: 50%;
  color: var(--green);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease, background .2s, box-shadow .2s;
  backdrop-filter: blur(8px);
}
#scroll-top-btn.visible {
  opacity: 1; pointer-events: auto; transform: translateY(0);
}
#scroll-top-btn:hover {
  background: rgba(0,229,181,.22);
  box-shadow: 0 0 18px rgba(0,229,181,.4);
}

/* ── LOADER STAGES ───────────────────────────────────────── */
#ldr-stages {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: 22px;
  position: relative;
}
.ldr-stage {
  display: flex; flex-direction: column; align-items: center;
  position: relative; z-index: 1; flex: 1; max-width: 80px;
}
.ldr-stage-dot {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,.05);
  border: 2px solid rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem; font-weight: 700; color: var(--white4);
  transition: all .5s ease;
  position: relative;
}
.ldr-stage.active .ldr-stage-dot {
  background: rgba(0,229,181,.18);
  border-color: var(--green);
  color: var(--green);
  box-shadow: 0 0 14px rgba(0,229,181,.4);
}
.ldr-stage.done .ldr-stage-dot {
  background: rgba(0,229,181,.2);
  border-color: var(--green);
  color: var(--green);
}
.ldr-stage-label {
  font-size: .65rem; color: var(--white4); margin-top: 5px;
  text-align: center; transition: color .5s ease;
  white-space: nowrap;
}
.ldr-stage.active .ldr-stage-label,
.ldr-stage.done .ldr-stage-label { color: var(--green); }
.ldr-stage-line {
  position: absolute; top: 14px; left: 50%; right: -50%;
  height: 2px;
  background: rgba(255,255,255,.08);
  z-index: 0;
}
.ldr-stage.done .ldr-stage-line { background: rgba(0,229,181,.3); }
.ldr-stage:last-child .ldr-stage-line { display: none; }

/* ── VS COMPARISON SECTION ───────────────────────────────── */
.vs-section {
  padding: clamp(60px, 8vw, 100px) clamp(16px, 5vw, 64px);
  max-width: 960px;
  margin: 0 auto;
}
.vs-table-wrap {
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(0,229,181,.18);
  margin-top: 40px;
}
.vs-table {
  width: 100%;
  border-collapse: collapse;
}
.vs-table thead th {
  padding: 18px 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.vs-table thead th:first-child {
  background: rgba(255,255,255,.02);
  color: var(--white3);
  width: 40%;
}
.vs-table thead .vs-th-ours {
  background: rgba(0,229,181,.1);
  color: var(--green);
  border-left: 1px solid rgba(0,229,181,.2);
  border-right: 1px solid rgba(0,229,181,.2);
}
.vs-table thead .vs-th-theirs {
  background: rgba(255,255,255,.03);
  color: var(--white3);
  border-left: 1px solid rgba(255,255,255,.06);
}
.vs-table tbody tr {
  border-top: 1px solid rgba(255,255,255,.05);
  transition: background .2s;
}
.vs-table tbody tr:hover {
  background: rgba(255,255,255,.02);
}
.vs-table tbody td {
  padding: 14px 20px;
  vertical-align: middle;
  font-size: .88rem;
}
.vs-table tbody td:first-child { color: var(--white3); }
.vs-table tbody .vs-td-ours {
  background: rgba(0,229,181,.04);
  border-left: 1px solid rgba(0,229,181,.12);
  border-right: 1px solid rgba(0,229,181,.12);
  color: var(--white2);
  font-weight: 600;
}
.vs-td-check { color: var(--green); font-size: 1.1rem; }
.vs-td-cross { color: rgba(255,100,100,.7); font-size: 1rem; }
.vs-td-theirs { color: var(--white4); }
/* VS table mobile: horizontal scroll so "otros entrenadores" column stays visible */
@media (max-width: 640px) {
  .vs-table-wrap {
    /* Override overflow:hidden to allow horizontal scroll */
    overflow: hidden;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    position: relative;
  }
  .vs-table {
    min-width: 460px; /* ensures all 3 columns fit before scroll triggers */
  }
  .vs-table tbody td, .vs-table thead th {
    padding: 12px 10px;
    font-size: .79rem;
  }
  .vs-table thead th:first-child { width: 34%; min-width: 110px; }
  .vs-table thead .vs-th-ours,
  .vs-table thead .vs-th-theirs { min-width: 120px; }
  /* Right-edge fade as scroll hint — clip via border-radius of wrapper */
  .vs-table-wrap::after {
    content: '';
    position: absolute; top: 0; right: 0;
    width: 28px; height: 100%;
    background: linear-gradient(to left, rgba(6,10,8,.75), transparent);
    pointer-events: none;
    border-radius: 0 18px 18px 0;
  }
}

/* ── FORM STEP PROGRESS % ────────────────────────────────── */
#form-step-pct {
  font-size: .75rem;
  font-weight: 700;
  color: var(--green);
  letter-spacing: .04em;
  min-width: 36px;
  text-align: right;
}

/* ── STAT COUNTER ANIMATION ──────────────────────────────── */
.stat-n, .proof-n {
  transition: none;
}
.counting {
  animation: countPop .2s ease-out;
}
@keyframes countPop {
  0%{transform:scale(.95);}
  60%{transform:scale(1.06);}
  100%{transform:scale(1);}
}

/* ── FAQ ACCORDION SECTION ───────────────────────────────── */
.faq-section {
  padding: clamp(60px,8vw,100px) clamp(16px,5vw,48px);
  max-width: 780px;
  margin: 0 auto;
}
.faq-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 40px;
}
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color var(--t), box-shadow var(--t);
}
.faq-item.open {
  border-color: rgba(0,229,181,.35);
  box-shadow: 0 0 20px rgba(0,229,181,.06);
}
.faq-summary {
  cursor: pointer;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 600;
  font-size: .95rem;
  color: var(--white);
  user-select: none;
  background: rgba(255,255,255,.02);
  transition: background var(--t);
}
.faq-summary:hover { background: rgba(255,255,255,.04); }
.faq-q-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--t);
  color: var(--white3);
}
.faq-item.open .faq-q-icon {
  background: var(--green);
  border-color: var(--green);
  color: #060A08;
  transform: rotate(45deg);
}
.faq-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s cubic-bezier(.4,0,.2,1), padding .35s;
  padding: 0 20px;
}
.faq-item.open .faq-body {
  max-height: 400px;
  padding: 0 20px 18px;
}
.faq-answer-text {
  font-size: .9rem;
  color: var(--white3);
  line-height: 1.75;
}

/* ── STICKY MOBILE CTA BAR ───────────────────────────────── */
#sticky-cta-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 800;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(6,10,8,.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(0,229,181,.18);
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
#sticky-cta-bar.visible { transform: translateY(0); }
.scb-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 480px;
  margin: 0 auto;
}
.scb-text {
  flex: 1;
  min-width: 0;
}
.scb-text strong {
  display: block;
  font-size: .88rem;
  font-weight: 700;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scb-text small {
  font-size: .73rem;
  color: var(--white3);
}
.scb-btn {
  flex-shrink: 0;
  background: var(--green);
  color: #060A08;
  border: none;
  border-radius: var(--r);
  padding: 11px 18px;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--t);
  white-space: nowrap;
}
.scb-btn:hover { background: var(--green2); transform: scale(1.02); }
.scb-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--white3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 1;
  flex-shrink: 0;
  transition: var(--t);
}
.scb-close:hover { color: var(--white); border-color: var(--border); }
@media (max-width: 768px) {
  #sticky-cta-bar { display: block; }
}

/* ── TRUST BADGES ────────────────────────────────────────── */
.hero-trust-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.05);
}
.trust-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .75rem;
  color: var(--white3);
  white-space: nowrap;
}
.trust-badge svg { color: var(--green); flex-shrink: 0; }
@media (max-width: 480px) {
  .hero-trust-badges { gap: 12px; }
  .trust-badge { font-size: .7rem; }
}

/* ── BREADCRUMB VISUAL (semantic + SEO) ──────────────────── */
.breadcrumb-nav {
  display: none;
}

/* ══════════════════════════════════════════════════════════════
   UI/UX PRO — May 2026 · Visual Enhancement Layer
══════════════════════════════════════════════════════════════ */

/* ── Hero title: refined editorial ── */
.hero-impact-line {
  font-size: clamp(1.8rem, 4.2vw, 3.2rem) !important;
  letter-spacing: .05em !important;
  line-height: 1.12 !important;
}
.hero-impact-green {
  background: linear-gradient(135deg, #00E5B5 0%, #00FFD0 60%, #00C49A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Hero glow más atmosférico ── */
.hero-glow-orb {
  width: 900px !important;
  height: 600px !important;
  background: radial-gradient(ellipse at center, rgba(0,229,181,.12) 0%, rgba(0,229,181,.04) 40%, transparent 70%) !important;
}

/* ── App Demo Preview Card (hero section) ── */
.hero-demo-preview {
  max-width: 440px;
  margin: 36px auto 0;
  background: linear-gradient(145deg, rgba(11,22,16,.97) 0%, rgba(8,16,11,.99) 100%);
  border: 1px solid rgba(0,229,181,.22);
  border-radius: 20px;
  padding: 20px 22px 18px;
  box-shadow:
    0 32px 80px rgba(0,0,0,.55),
    0 0 0 1px rgba(0,229,181,.06) inset,
    0 -1px 0 rgba(0,229,181,.15) inset;
  position: relative;
  overflow: hidden;
  animation: up .55s .45s ease both;
  text-align: left;
}
.hero-demo-preview::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,229,181,.55), transparent);
}
.hero-demo-preview::after {
  content: '';
  position: absolute; top: -80px; right: -60px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(0,229,181,.07) 0%, transparent 70%);
  pointer-events: none;
}
.hdp-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.hdp-day {
  font-family: var(--font-display); font-size: .78rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--green); background: rgba(0,229,181,.1);
  border: 1px solid rgba(0,229,181,.2); border-radius: 20px;
  padding: 4px 12px; display: inline-block; margin-bottom: 3px;
}
.hdp-day-sub {
  display: block; font-size: .68rem; color: var(--white4);
  font-weight: 500; letter-spacing: .04em; padding-left: 2px;
}
.hdp-time {
  font-size: .75rem; color: var(--white4); font-weight: 500;
  display: flex; align-items: center; gap: 5px;
}
.hdp-time svg { color: var(--white4); }
.hdp-section-label {
  font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--white4); margin-bottom: 8px; margin-top: 12px;
}
.hdp-section-label:first-of-type { margin-top: 0; }
.hdp-ex {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 10px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.05);
  margin-bottom: 6px; transition: background .2s;
}
.hdp-ex:last-child { margin-bottom: 0; }
.hdp-num {
  font-family: var(--font-display); font-size: .7rem; font-weight: 700;
  color: var(--green); background: rgba(0,229,181,.12);
  border-radius: 6px; padding: 2px 7px; flex-shrink: 0; min-width: 28px;
  text-align: center;
}
.hdp-ex-body { flex: 1; min-width: 0; }
.hdp-ex-name {
  font-size: .82rem; font-weight: 600; color: var(--white2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hdp-ex-detail {
  font-size: .7rem; color: var(--white4); margin-top: 1px;
}
.hdp-warmup-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); opacity: .6; flex-shrink: 0;
}
.hdp-warmup-name {
  font-size: .78rem; color: var(--white3);
}
.hdp-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.hdp-ai-tag {
  display: flex; align-items: center; gap: 5px;
  font-size: .67rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--green); opacity: .8;
}
.hdp-progress {
  font-size: .68rem; color: var(--white4);
  display: flex; align-items: center; gap: 6px;
}
.hdp-prog-bar {
  width: 60px; height: 3px; background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden;
}
.hdp-prog-fill {
  height: 100%; width: 40%;
  background: linear-gradient(90deg, var(--green), #00C49A); border-radius: 2px;
}
@media (max-width: 640px) {
  .hero-demo-preview { margin: 24px auto 0; }
}

/* ── Feature cards: fondo numerado + mejor gradiente ── */
.features-grid .feature-card { position: relative; }
.features-grid .feature-card:nth-child(1) .feature-icon { background: rgba(0,229,181,.14); border-color: rgba(0,229,181,.2); }
.features-grid .feature-card:nth-child(2) .feature-icon { background: rgba(88,200,250,.12); border-color: rgba(88,200,250,.18); }
.features-grid .feature-card:nth-child(2) .feature-icon svg { stroke: #58C8FA; }
.features-grid .feature-card:nth-child(3) .feature-icon { background: rgba(167,139,250,.12); border-color: rgba(167,139,250,.18); }
.features-grid .feature-card:nth-child(3) .feature-icon svg { stroke: #a78bfa; }
.features-grid .feature-card:nth-child(4) .feature-icon { background: rgba(251,191,36,.1); border-color: rgba(251,191,36,.16); }
.features-grid .feature-card:nth-child(4) .feature-icon svg { stroke: #fbbf24; }
.features-grid .feature-card:nth-child(5) .feature-icon { background: rgba(0,229,181,.14); border-color: rgba(0,229,181,.2); }
.feature-card-num {
  position: absolute; top: 16px; right: 18px;
  font-family: var(--font-display); font-size: 2.8rem; font-weight: 800;
  color: rgba(255,255,255,.04); letter-spacing: -.05em; pointer-events: none;
  line-height: 1; user-select: none;
}

/* ── Feature cards: mejor hover ── */
.feature-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 24px 64px rgba(0,229,181,.1) !important;
}

/* ── Stats bar upgrade ── */
.stat-n {
  font-family: var(--font-display) !important;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem) !important;
  font-weight: 800 !important; letter-spacing: -.03em !important;
  color: var(--white) !important;
  background: linear-gradient(135deg, #ffffff 0%, #d4e5de 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.stat-n span { -webkit-text-fill-color: var(--green); color: var(--green); }
.stat-l {
  font-size: .72rem !important; font-weight: 600 !important;
  letter-spacing: .08em !important; text-transform: uppercase !important;
  color: var(--white4) !important;
}

/* ── Proof strip upgrade ── */
.proof-n {
  font-size: 2.4rem !important;
  background: linear-gradient(135deg, #ffffff 0%, #d4e5de 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.proof-n em { -webkit-text-fill-color: var(--green) !important; }

/* ── VS table: FitnessAI column highlight ── */
.vs-td-ours {
  background: rgba(0,229,181,.06) !important;
  position: relative;
}
.vs-td-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(0,229,181,.2); color: var(--green);
  font-size: .7rem; font-weight: 800; flex-shrink: 0;
  margin-right: 4px;
}
.vs-td-cross {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(239,68,68,.12); color: #f87171;
  font-size: .7rem; font-weight: 800; flex-shrink: 0;
  margin-right: 4px;
}

/* ── Science ref cards: gradient border ── */
.science-ref-card {
  position: relative;
  transition: transform .3s ease, box-shadow .3s ease !important;
}
.science-ref-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(0,0,0,.35) !important;
}
.science-ref-year {
  font-family: var(--font-display) !important;
  background: linear-gradient(135deg, var(--green) 0%, #00C49A 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ── Better step cards ── */
.step-card {
  position: relative; overflow: hidden;
}
.step-card::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 120%, rgba(0,229,181,.08) 0%, transparent 70%);
  opacity: 0; transition: opacity .4s ease; pointer-events: none;
}
.step-card:hover::after { opacity: 1; }
.step-num {
  background: linear-gradient(135deg, rgba(0,229,181,.2) 0%, rgba(0,229,181,.06) 100%) !important;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  font-size: 3rem !important; font-weight: 900 !important;
  letter-spacing: -.05em !important;
}

/* ── CTA box: stronger glow on hover ── */
.cta-box:hover {
  box-shadow: 0 12px 60px rgba(0,229,181,.14), 0 0 0 0 rgba(0,229,181,.06) !important;
  border-color: rgba(0,229,181,.28) !important;
  transition: box-shadow .35s ease, border-color .35s ease;
}

/* ── Marquee upgraded ── */
.marquee-item {
  color: var(--white3) !important;
  font-size: .72rem !important;
}
.marquee-item:hover { color: var(--green) !important; }
.marquee-strip {
  background: linear-gradient(90deg, transparent, rgba(0,229,181,.04), transparent) !important;
}

/* ── Badge hover polish ── */
.badge, .testi-badge, .cta-tag {
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.badge:hover, .section-label:hover {
  background: rgba(0,229,181,.12) !important;
  box-shadow: 0 0 16px rgba(0,229,181,.12);
}

/* ── Testimonial card upgrade ── */
.testi-card {
  background: linear-gradient(145deg, rgba(13,22,17,.98) 0%, rgba(8,16,11,.99) 100%) !important;
}
.testi-card:hover {
  border-color: rgba(0,229,181,.25) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.4) !important;
}
.testi-quote::before {
  font-size: 2rem !important; opacity: .4 !important;
  line-height: .8 !important;
}

/* ── Form shell: better border ── */
.form-shell {
  border: 1px solid rgba(0,229,181,.1) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.3) !important;
}
.pb-step.active {
  color: var(--white) !important;
  border-bottom-color: var(--green) !important;
}
.pb-step.done {
  color: var(--green) !important;
}
.pb-step.done .pb-num {
  background: linear-gradient(135deg, var(--green), #00C49A) !important;
  box-shadow: 0 0 12px rgba(0,229,181,.3) !important;
}

/* ── finput: better focus glow ── */
.finput:focus {
  box-shadow: 0 0 0 3px rgba(0,229,181,.15), 0 2px 8px rgba(0,0,0,.3) !important;
}

/* ── Chip button: better active state ── */
.chip-btn.on {
  background: rgba(0,229,181,.14) !important;
  border-color: var(--green) !important;
  color: var(--green) !important;
  box-shadow: 0 0 0 1px rgba(0,229,181,.2) !important;
}
.day-btn.on {
  background: rgba(0,229,181,.14) !important;
  border-color: var(--green) !important;
  color: var(--green) !important;
  box-shadow: 0 0 0 1px rgba(0,229,181,.2) !important;
}

/* ── Nav upgrade ── */
nav {
  background: rgba(6,10,8,.82) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  border-bottom: 1px solid rgba(0,229,181,.08) !important;
}
.nav-wordmark { letter-spacing: -.02em !important; }

/* ── Section label with gradient line ── */
.section-label {
  font-weight: 700 !important;
  color: var(--green) !important;
}

/* ── Responsive: hero preview card ── */
@media (max-width: 480px) {
  .hero-impact-line { font-size: clamp(1.5rem, 7vw, 2.2rem) !important; letter-spacing: .04em !important; }
  .hdp-ex-name { font-size: .76rem; }
}

/* ── History cards: mejoradas ── */
.rut-row {
  background: linear-gradient(145deg, rgba(11,22,16,.95) 0%, rgba(8,16,11,.98) 100%) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 14px !important;
  padding: 18px 20px !important;
  margin-bottom: 10px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.25) !important;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease !important;
}
.rut-row:hover {
  border-color: rgba(0,229,181,.22) !important;
  transform: translateX(5px) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.35) !important;
}
.rut-obj {
  font-size: .92rem !important;
}
.rut-dot {
  width: 10px !important; height: 10px !important;
  box-shadow: 0 0 8px currentColor;
}

/* ── Act buttons: más premium ── */
.act-btn.prim {
  background: linear-gradient(135deg, var(--green), #00C49A) !important;
  box-shadow: 0 3px 14px rgba(0,229,181,.25) !important;
}
.act-btn.prim:hover {
  box-shadow: 0 5px 20px rgba(0,229,181,.35) !important;
  transform: translateY(-1px);
}

/* ── Page header: mejor estilo ── */
.page-title {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  letter-spacing: -.04em !important;
}
.page-sub {
  color: var(--white4) !important;
  font-size: .88rem !important;
}

/* ── Autocomplete dropdown: fixed position, bypasses overflow:hidden ── */
#pref-dd {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,229,181,.25) transparent;
}
#pref-dd::-webkit-scrollbar { width: 4px; }
#pref-dd::-webkit-scrollbar-thumb { background: rgba(0,229,181,.25); border-radius: 4px; }

/* ── Pref chips: más atractivos ── */
#pref-chips span {
  font-family: var(--font-body) !important;
  letter-spacing: -.01em !important;
}

/* ── Routine result: calentamiento section ── */
.warmup-section {
  background: linear-gradient(135deg, rgba(0,229,181,.05) 0%, rgba(0,229,181,.02) 100%) !important;
  border-left: 3px solid rgba(0,229,181,.4) !important;
}

/* ── Footer upgrade ── */
footer {
  background: linear-gradient(0deg, rgba(6,10,8,1) 0%, transparent 100%);
  border-top: 1px solid rgba(0,229,181,.08) !important;
}
.f-brand {
  font-size: 1.1rem !important;
  letter-spacing: -.02em !important;
}

/* ── Global scroll reveal: más suave ── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── Page transition ── */
.page.active { animation: pageIn .35s ease both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ══════════════════════════════════════════════════════════════
   UI/UX PRO MAX — SESIÓN 5
   Generate glow · Mobile premium · Touch targets · Microinteractions
══════════════════════════════════════════════════════════════ */

/* ── 1. Botón Generar: glow pulse que invita al click ── */
@keyframes genGlowPulse {
  0%,100% { box-shadow: 0 4px 20px rgba(0,229,181,.28), 0 1px 0 rgba(255,255,255,.15) inset; }
  50%      { box-shadow: 0 4px 30px rgba(0,229,181,.52), 0 1px 0 rgba(255,255,255,.2) inset, 0 0 0 3px rgba(0,229,181,.13); }
}
#pnl5 .btn.green {
  animation: genGlowPulse 2.6s ease-in-out infinite !important;
}
#pnl5 .btn.green:hover, #pnl5 .btn.green:focus {
  animation: none !important;
  transform: translateY(-2px) scale(1.01) !important;
  box-shadow: 0 8px 36px rgba(0,229,181,.60), 0 1px 0 rgba(255,255,255,.22) inset !important;
}
#pnl5 .btn.green:active {
  animation: none !important;
  transform: scale(0.97) translateY(0) !important;
  transition: transform .08s !important;
}
#pnl5 .btn.green:disabled { animation: none !important; }

/* ── 2. Loader progress bar: gradiente animado ── */
#ldr-progress {
  background: linear-gradient(90deg, var(--green), #00FFD0, var(--green)) !important;
  background-size: 200% 100% !important;
  border-radius: 3px !important;
}
@keyframes ldrProgressShift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
#ldr-progress[style*="width"] {
  animation: ldrProgressShift 2s linear infinite !important;
}

/* ── 3. Loader stage activo: pulso ── */
@keyframes stageDotPulse {
  0%,100% { box-shadow: 0 0 10px rgba(0,229,181,.35), 0 0 0 0 rgba(0,229,181,.0); }
  50%      { box-shadow: 0 0 18px rgba(0,229,181,.60), 0 0 0 4px rgba(0,229,181,.12); }
}
.ldr-stage.active .ldr-stage-dot {
  animation: stageDotPulse 1.6s ease-in-out infinite !important;
}

/* ── 4. Slider: thumb más grande al arrastrar ── */
input[type=range]:active::-webkit-slider-thumb {
  transform: scale(1.3) !important;
  box-shadow: 0 0 0 6px rgba(0,229,181,.22), 0 2px 8px rgba(0,0,0,.3) !important;
  transition: transform .12s ease, box-shadow .12s ease !important;
}
input[type=range]::-webkit-slider-thumb {
  transition: transform .12s ease, box-shadow .12s ease !important;
}

/* ── 5. Chip button hover sin .on ── */
.chip-btn:not(.on):hover {
  background: rgba(0,229,181,.06) !important;
  border-color: rgba(0,229,181,.32) !important;
  color: var(--white) !important;
  transform: translateY(-1px) !important;
}
.chip-btn { transition: background .15s, border-color .15s, color .15s, transform .1s, box-shadow .15s !important; }

/* ── 6. Day button hover sin .on ── */
.day-btn { transition: background .15s, border-color .15s, color .15s, transform .1s, box-shadow .15s !important; }
.day-btn:not(.on):hover {
  background: rgba(0,229,181,.06) !important;
  border-color: rgba(0,229,181,.32) !important;
  color: var(--white) !important;
  transform: scale(1.05) !important;
}

/* ── 7. Act buttons: tap feedback ── */
.act-btn:active { transform: scale(0.96) !important; transition: transform .08s !important; }
.act-btn.prim:active { transform: scale(0.97) !important; }

/* ── 8. Ses head: press feedback táctil ── */
.ses-head:active { background: rgba(0,229,181,.05) !important; }

/* ── 9. Routine name required: aspecto premium ── */
#routine-name-required {
  min-height: 48px !important;
  font-size: .97rem !important;
  transition: border-color .18s, box-shadow .18s, background .18s !important;
}
#routine-name-required:focus {
  border-color: rgba(0,229,181,.6) !important;
  box-shadow: 0 0 0 3px rgba(0,229,181,.12), 0 2px 14px rgba(0,0,0,.28) !important;
}

/* ── 10. Summary section: mejor visual ── */
.sum-k { color: var(--white4) !important; letter-spacing: .08em !important; font-size: .64rem !important; }
.sum-v { font-weight: 700 !important; color: var(--white) !important; }

/* ══════════════════════════════════════════════════════════════
   MOBILE PREMIUM — touch targets, spacing, legibility
══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* Panels: más aire */
  .panel { padding: 22px 18px 28px !important; }
  .panel-title { font-size: 1.22rem !important; }
  .panel-desc { font-size: .84rem !important; margin-bottom: 20px !important; }
  .panel-nav { margin-top: 22px !important; padding-top: 18px !important; }

  /* Touch targets: mínimo 44px × 44px (WCAG) */
  .chip-btn { min-height: 50px !important; padding: 12px 10px !important; }
  .day-btn  { min-height: 52px !important; padding: 14px 6px !important; font-size: .86rem !important; }
  .btn-nxt  { min-height: 48px !important; padding: 12px 20px !important; font-size: .9rem !important; }
  .btn-prev { min-height: 44px !important; }
  .finput   { min-height: 48px !important; padding: 13px 13px !important; font-size: .95rem !important; }

  /* Summary grid */
  .summary { padding: 16px 14px !important; gap: 10px; }

  /* Session cards */
  .ses-head { padding: 14px 14px !important; }
  .ses-body { padding: 0 14px 16px !important; }
  .ses-n    { width: 28px !important; height: 28px !important; font-size: .75rem !important; }

  /* Page header */
  .page-header { padding: 26px 0 20px !important; }
  .page-title  { font-size: 1.75rem !important; }

  /* Result sections */
  .result-head  { padding: 20px 16px 16px !important; }
  .result-title { font-size: 1.28rem !important; }

  /* Historial */
  .hist-top { gap: 8px !important; margin-bottom: 16px !important; }

  /* Auth */
  .auth-outer { padding: 22px 16px 56px !important; }
}

/* ── Very small phones (< 400px) ── */
@media (max-width: 400px) {
  .panel        { padding: 18px 14px 24px !important; }
  .chip-btn     { font-size: .78rem !important; min-height: 48px !important; }
  .day-btn      { font-size: .8rem  !important; }
  .frow3        { grid-template-columns: 1fr !important; }
  .page-title   { font-size: 1.6rem !important; }
  .btn-nxt      { font-size: .86rem !important; padding: 11px 16px !important; }
  .auth-card    { padding: 22px 16px !important; }
}

/* ── Exercise grid: más legible en mobile pequeño ── */
@media (max-width: 480px) {
  .ex    { gap: 6px !important; padding: 11px 0 !important; }
  .ex-sv { font-size: .84rem !important; }
  .ex-sl { font-size: .62rem !important; }
  .wu-item { font-size: .79rem !important; }
}

/* ── Autocomplete dropdown: browse groups ── */
.pref-browse-group { border-bottom: 1px solid rgba(255,255,255,.04); }
.pref-browse-group:last-child { border-bottom: none; }
.pref-browse-group-hd:hover { background: rgba(255,255,255,.04) !important; }

/* ── Autocomplete mobile: items ── */
@media (max-width: 640px) {
  #pref-dd [data-dd-item] { min-height: 44px !important; padding: 10px 14px !important; }
}

/* ── Reduced motion: Session 5 overrides ── */
@media (prefers-reduced-motion: reduce) {
  #pnl5 .btn.green               { animation: none !important; }
  .ldr-stage.active .ldr-stage-dot { animation: none !important; }
  #ldr-progress                  { animation: none !important; }
  .chip-btn:not(.on):hover,
  .day-btn:not(.on):hover        { transform: none !important; }
  input[type=range]:active::-webkit-slider-thumb { transform: scale(1.1) !important; }
  .act-btn:active                { transform: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   TYPOGRAPHY & VISUAL FINAL PASS — May 2026
   Premium spacing · Breathing room · Letter-spacing · Hierarchy
══════════════════════════════════════════════════════════════ */

/* ── Global letter-spacing refinement for body text ── */
p, li, span:not(.badge-dot):not(.marquee-dot):not(.ann-dot),
.step-desc, .feature-desc, .section-sub, .cf-section-sub,
.blog-hero-p, .panel-desc, .page-sub, .auth-sub,
.pref-section-desc, .hero-p, .cf-hero-p, .cta-p,
.overload-info-title, .testi-quote, .blog-card-excerpt,
.article-body p {
  letter-spacing: .005em;
}

/* ── Heading letter-spacing polish ── */
.hero-impact-line, .section-title, .cf-section-title,
.cta-h2, .blog-hero-h1, .article-h1,
.panel-title, .page-title, .result-title,
.step-title, .feature-title, .cf-benefit-title {
  letter-spacing: -.035em !important;
}

/* ── Hero paragraph: more air ── */
.hero-p {
  max-width: 520px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 0 !important;
  font-size: 1.02rem !important;
  line-height: 1.75 !important;
}

/* ── Hero tagline row: breathing room ── */
.hero-tagline-row {
  margin-bottom: 20px !important;
  letter-spacing: .01em;
}

/* ── Stat block: more vertical space ── */
.stats {
  margin-top: 28px !important;
}

/* ── Section head: more bottom margin ── */
.section-head {
  margin-bottom: 64px !important;
}

/* ── How section sub: wider and more readable ── */
.section-sub {
  max-width: 540px !important;
  font-size: 1rem !important;
  line-height: 1.75 !important;
}

/* ── Step card: more padding top to balance step number ── */
.step-card {
  padding: 44px 34px !important;
}

/* ── Step description: more readable ── */
.step-desc {
  font-size: .87rem !important;
  line-height: 1.72 !important;
  color: rgba(255,255,255,.62) !important;
}

/* ── Feature card: more padding ── */
.feature-card {
  padding: 32px 28px !important;
}

/* ── Feature description: more air ── */
.feature-desc {
  font-size: .85rem !important;
  line-height: 1.72 !important;
  color: rgba(255,255,255,.62) !important;
}

/* ── CTA paragraph: max-width and breathing ── */
.cta-p {
  font-size: .97rem !important;
  line-height: 1.78 !important;
  max-width: 440px !important;
}

/* ── Blog card excerpt: more line-height ── */
.blog-card-excerpt {
  line-height: 1.72 !important;
  font-size: .83rem !important;
}

/* ── Blog CTA paragraph ── */
.blog-cta-p, .article-cta-p, .cf-cta-box .cta-p {
  line-height: 1.75 !important;
}

/* ── Auth subtitle: more comfortable reading ── */
.auth-sub {
  max-width: 320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ── Panel description: balanced ── */
.panel-desc {
  letter-spacing: .01em;
  margin-bottom: 30px !important;
}

/* ── Pref section description: air ── */
.pref-section-desc {
  letter-spacing: .01em;
  margin-bottom: 8px !important;
}

/* ── FAQ section readability ── */
.faq-a {
  line-height: 1.75 !important;
  font-size: .88rem !important;
  color: rgba(255,255,255,.65) !important;
}

/* ── Section label: slightly more breathing ── */
.section-label {
  margin-bottom: 20px !important;
  letter-spacing: .16em !important;
}

/* ── Overload info list ── */
.overload-info-item {
  padding: 18px 20px !important;
}
.overload-info-desc {
  line-height: 1.7 !important;
}

/* ── Social proof strip: labels ── */
.proof-l {
  letter-spacing: .1em !important;
  margin-top: 7px !important;
}

/* ── Testimonials: more quote air ── */
.testi-quote {
  line-height: 1.78 !important;
  font-size: .96rem !important;
}

/* ── Science ref card ── */
.science-ref-body {
  line-height: 1.7 !important;
}
.science-ref-cite {
  line-height: 1.65 !important;
}

/* ── How section padding: more spacious ── */
.how-section {
  padding: 112px 24px !important;
}

/* ── Features section: more spacious ── */
.features-section {
  padding: 88px 24px 112px !important;
}

/* ── CTA section: more spacious ── */
.cta-section {
  padding: 112px 24px 96px !important;
}

/* ── CTA box inner: more breathing ── */
.cta-box {
  padding: 72px 56px !important;
}

/* ── Mobile: keep sections comfortable ── */
@media (max-width: 768px) {
  .how-section        { padding: 80px 18px !important; }
  .features-section   { padding: 64px 18px 80px !important; }
  .cta-section        { padding: 80px 18px 72px !important; }
  .cta-box            { padding: 44px 26px !important; }
  .step-card          { padding: 32px 24px !important; }
  .feature-card       { padding: 26px 22px !important; }
  .hero-p             { font-size: .97rem !important; }
  .section-sub        { font-size: .93rem !important; }
}

/* ── Very small phones ── */
@media (max-width: 480px) {
  .hero-p             { font-size: .92rem !important; }
  .section-sub        { font-size: .9rem !important; }
  .cta-p              { font-size: .9rem !important; }
}

/* ── Reduced motion final pass ── */
@media (prefers-reduced-motion: reduce) {
  .cta-btn            { animation: none !important; }
  #pnl5 .btn.green    { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   PREMIUM UI UPGRADE — June 2026
   Visual polish inspired by top fitness SaaS design systems.
   Glassmorphism · Gradient borders · Glow effects · Hierarchy
══════════════════════════════════════════════════════════════ */

/* ── Hero: dramatic radial gradient backdrop ── */
.hero {
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(0,229,181,.12) 0%, transparent 65%),
    radial-gradient(ellipse 40% 30% at 80% 80%, rgba(0,229,181,.05) 0%, transparent 60%),
    var(--bg) !important;
}

/* ── Hero h1: stronger gradient text effect ── */
.hero-impact-green {
  background: linear-gradient(135deg, #00E5B5 0%, #00FFD1 40%, #00C49A 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  filter: drop-shadow(0 0 20px rgba(0,229,181,.35)) !important;
}

/* ── Hero badge: premium pill with glow border ── */
.badge.hero-badge {
  background: rgba(0,229,181,.08) !important;
  border: 1px solid rgba(0,229,181,.3) !important;
  box-shadow: 0 0 20px rgba(0,229,181,.12), inset 0 1px 0 rgba(255,255,255,.06) !important;
  padding: 6px 16px !important;
  font-size: .78rem !important;
  letter-spacing: .12em !important;
}

/* ── CTA primary button: glow + gradient ── */
.cta-btn {
  background: linear-gradient(135deg, #00E5B5 0%, #00FFD1 50%, #00C49A 100%) !important;
  box-shadow:
    0 0 0 1px rgba(0,229,181,.4),
    0 4px 20px rgba(0,229,181,.35),
    0 8px 40px rgba(0,229,181,.2),
    inset 0 1px 0 rgba(255,255,255,.25) !important;
  color: #060A08 !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}
.cta-btn:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow:
    0 0 0 1px rgba(0,229,181,.6),
    0 6px 28px rgba(0,229,181,.45),
    0 12px 48px rgba(0,229,181,.28),
    inset 0 1px 0 rgba(255,255,255,.3) !important;
}

/* ── Ghost CTA button ── */
.cta-ghost-btn {
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.04) !important;
  transition: border-color .2s ease, background .2s ease, transform .2s ease !important;
}
.cta-ghost-btn:hover {
  border-color: rgba(0,229,181,.4) !important;
  background: rgba(0,229,181,.06) !important;
  transform: translateY(-1px) !important;
}

/* ── Trust badges: refined ── */
.hero-trust-badges {
  gap: 8px !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}
.trust-badge {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 20px !important;
  padding: 5px 12px !important;
  font-size: .74rem !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  color: rgba(255,255,255,.75) !important;
  transition: border-color .2s ease, background .2s ease !important;
}
.trust-badge:hover {
  border-color: rgba(0,229,181,.3) !important;
  background: rgba(0,229,181,.05) !important;
}
.trust-badge svg { color: #00E5B5 !important; }

/* ── Social proof strip: bolder numbers ── */
.proof-n {
  font-size: clamp(2.2rem, 5vw, 3.2rem) !important;
  font-weight: 900 !important;
  letter-spacing: -.03em !important;
}
.proof-l {
  font-size: .72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .14em !important;
  color: rgba(255,255,255,.5) !important;
}

/* ── Feature cards: glass upgrade with gradient borders ── */
.feature-card {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 20px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
  cursor: default !important;
}
.feature-card::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, rgba(0,229,181,.06) 0%, transparent 50%) !important;
  opacity: 0 !important;
  transition: opacity .25s ease !important;
  pointer-events: none !important;
}
.feature-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(0,229,181,.25) !important;
  box-shadow:
    0 4px 24px rgba(0,0,0,.3),
    0 0 40px rgba(0,229,181,.08) !important;
}
.feature-card:hover::before {
  opacity: 1 !important;
}

/* ── Feature icon: glowing background ── */
.feature-icon {
  background: rgba(0,229,181,.1) !important;
  border: 1px solid rgba(0,229,181,.2) !important;
  border-radius: 14px !important;
  box-shadow: 0 0 16px rgba(0,229,181,.15) !important;
  transition: box-shadow .25s ease !important;
}
.feature-card:hover .feature-icon {
  box-shadow: 0 0 24px rgba(0,229,181,.3) !important;
}

/* ── Feature title: stronger weight ── */
.feature-title {
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  letter-spacing: -.02em !important;
}

/* ── Step cards (How it works): cleaner glass ── */
.step-card {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 20px !important;
  transition: border-color .25s ease, box-shadow .25s ease !important;
}
.step-card:hover {
  border-color: rgba(0,229,181,.2) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.25) !important;
}

/* ── Step number: green gradient ── */
.step-num {
  background: linear-gradient(135deg, rgba(0,229,181,.15) 0%, rgba(0,229,181,.05) 100%) !important;
  border: 1px solid rgba(0,229,181,.25) !important;
  color: #00E5B5 !important;
  font-weight: 800 !important;
  box-shadow: 0 0 16px rgba(0,229,181,.12) !important;
}

/* ── FAQ items: cleaner hover ── */
.faq-item {
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.02) !important;
  transition: border-color .2s ease, background .2s ease !important;
}
.faq-summary {
  border-radius: 14px !important;
  padding: 18px 22px !important;
  cursor: pointer !important;
  transition: background .2s ease !important;
}
.faq-summary:hover {
  background: rgba(0,229,181,.04) !important;
}
.faq-item[open],
.faq-item.open {
  border-color: rgba(0,229,181,.2) !important;
  background: rgba(0,229,181,.03) !important;
}
.faq-answer-text {
  line-height: 1.75 !important;
  color: rgba(255,255,255,.65) !important;
  font-size: .88rem !important;
}

/* ── CTA box: dramatic gradient backdrop ── */
.cta-box {
  background:
    radial-gradient(ellipse 80% 80% at 50% 0%, rgba(0,229,181,.1) 0%, transparent 70%),
    rgba(255,255,255,.03) !important;
  border: 1px solid rgba(0,229,181,.15) !important;
  border-radius: 28px !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04),
    0 24px 80px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
  position: relative !important;
  overflow: hidden !important;
}
.cta-box::before {
  content: '' !important;
  position: absolute !important;
  top: -60px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 400px !important;
  height: 300px !important;
  background: radial-gradient(ellipse, rgba(0,229,181,.12) 0%, transparent 70%) !important;
  pointer-events: none !important;
}

/* ── Testimonial cards: add lift on hover ── */
.testi-card {
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease !important;
}
.testi-card:hover {
  transform: translateY(-3px) rotate(0deg) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.35), 0 0 30px rgba(0,229,181,.07) !important;
}

/* ── Comparison table: premium styling ── */
.vs-table-wrap {
  box-shadow: 0 8px 40px rgba(0,0,0,.3) !important;
  border-color: rgba(0,229,181,.22) !important;
}
.vs-td-check {
  filter: drop-shadow(0 0 4px rgba(0,229,181,.4)) !important;
}

/* ── Top nav: refined backdrop + scroll states ── */
nav:not(#mobile-bottom-nav) {
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  background: rgba(6,10,8,.72);
  border-bottom: 1px solid rgba(255,255,255,.05);
  transition: background .25s ease, box-shadow .25s ease;
}
nav:not(#mobile-bottom-nav).nav-scrolled {
  background: rgba(5,5,15,.96);
  box-shadow: 0 1px 0 rgba(0,229,181,.08), 0 4px 20px rgba(0,0,0,.3);
}

/* ── Nav buttons: refined ── */
.nav-pill.solid {
  background: linear-gradient(135deg, #00E5B5 0%, #00C49A 100%) !important;
  color: #060A08 !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 12px rgba(0,229,181,.25) !important;
  transition: box-shadow .2s ease, transform .2s ease !important;
}
.nav-pill.solid:hover {
  box-shadow: 0 4px 20px rgba(0,229,181,.4) !important;
  transform: translateY(-1px) !important;
}
/* ghost pills: restored to original — var(--border2) border, white3 text */

/* ── Section labels: more punch ── */
.section-label {
  border: 1px solid rgba(0,229,181,.2) !important;
  background: rgba(0,229,181,.06) !important;
  border-radius: 20px !important;
  padding: 5px 14px !important;
  font-size: .72rem !important;
  letter-spacing: .15em !important;
  color: #00E5B5 !important;
  font-weight: 700 !important;
}
.badge-dot {
  background: #00E5B5 !important;
  box-shadow: 0 0 6px rgba(0,229,181,.6) !important;
}

/* ── Equipment cards: glass tiles ── */
.equipment-card {
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.03) !important;
  transition: border-color .2s ease, transform .2s ease !important;
}
.equipment-card:hover {
  border-color: rgba(0,229,181,.2) !important;
  transform: translateY(-3px) !important;
}

/* ── Science ref cards: premium ── */
.science-ref-card {
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.03) !important;
  transition: border-color .2s ease !important;
}
.science-ref-card:hover {
  border-color: rgba(0,229,181,.18) !important;
}

/* ── Overload chart: enhanced visual ── */
.overload-chart {
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.03) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,.2) !important;
}

/* ── Announcement bar: more polished ── */
#announce-bar {
  background: linear-gradient(90deg, rgba(0,229,181,.12) 0%, rgba(0,229,181,.06) 50%, rgba(0,229,181,.12) 100%) !important;
  border-bottom: 1px solid rgba(0,229,181,.15) !important;
}

/* ── Scrollbar: styled ── */
::-webkit-scrollbar { width: 6px !important; }
::-webkit-scrollbar-track { background: rgba(255,255,255,.03) !important; }
::-webkit-scrollbar-thumb {
  background: rgba(0,229,181,.25) !important;
  border-radius: 3px !important;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0,229,181,.45) !important;
}

/* ── Form panels: cleaner glass ── */
.panel-card {
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.03) !important;
}
.panel-card:hover {
  border-color: rgba(0,229,181,.15) !important;
}

/* ── Form chips: refined ── */
.chip-btn.on {
  box-shadow:
    0 0 0 2px #00E5B5,
    0 0 16px rgba(0,229,181,.25) !important;
}

/* ── Mobile adjustments for premium upgrades ── */
@media (max-width: 768px) {
  .cta-box::before { display: none !important; }
  .feature-card:hover { transform: none !important; }
  .step-card:hover { transform: none !important; }
  .testi-card:hover { transform: none !important; }
}

/* ── Reduced motion: override new effects ── */
@media (prefers-reduced-motion: reduce) {
  .feature-card,
  .step-card,
  .testi-card,
  .equipment-card,
  .trust-badge,
  .cta-btn,
  .cta-ghost-btn,
  .nav-pill { transition: none !important; }
  .cta-btn:hover,
  .cta-ghost-btn:hover,
  .feature-card:hover,
  .testi-card:hover { transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   CINEMATIC REFERENCE UPGRADE — Inspired by fitnessai.com visual DNA
   · Ultra-large hero typography (fill the frame)
   · Dark atmospheric depth with edge vignette
   · Section rhythm separators
   · Uppercase green accent for maximum punch
   ═══════════════════════════════════════════════════════════════════ */

/* ── Hero: cinematic atmospheric depth ── */
.hero {
  background:
    /* Edge vignette — creates depth like a real photo */
    radial-gradient(ellipse 160% 100% at 50% 60%, transparent 28%, rgba(0,0,0,.72) 100%),
    /* Simulated overhead studio lighting */
    radial-gradient(ellipse 55% 38% at 50% -2%, rgba(20,160,255,.05) 0%, transparent 65%),
    /* Left darkness shadow */
    radial-gradient(ellipse 28% 70% at 0% 50%, rgba(0,0,0,.45) 0%, transparent 65%),
    /* Right darkness shadow */
    radial-gradient(ellipse 28% 70% at 100% 50%, rgba(0,0,0,.45) 0%, transparent 65%),
    /* Green teal glow behind headline */
    radial-gradient(ellipse 70% 55% at 50% -8%, rgba(0,229,181,.11) 0%, transparent 62%),
    /* Secondary bottom-center warmth */
    radial-gradient(ellipse 40% 30% at 50% 110%, rgba(0,229,181,.04) 0%, transparent 60%),
    /* Base: near-black slightly green-tinted */
    linear-gradient(180deg, #030710 0%, #04060d 40%, #050a0c 100%) !important;
}

/* Grain texture overlay — adds tactile depth like real photo */
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23grain)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: .018;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* ── Hero headline: refined editorial size ── */
.hero-h1 {
  font-size: clamp(2rem, 4.8vw, 3.6rem) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: .04em !important;
  margin-bottom: 28px !important;
}

/* Impact lines: proportional, airy */
.hero-impact-line {
  font-size: clamp(1.8rem, 4.2vw, 3.2rem) !important;
  font-weight: 800 !important;
  letter-spacing: .05em !important;
  line-height: 1.12 !important;
  display: block !important;
}

/* ── Green line: refined glow, properly spaced ── */
.hero-impact-green {
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  font-size: clamp(1.9rem, 4.5vw, 3.4rem) !important;
  filter: drop-shadow(0 0 18px rgba(0,229,181,.45)) drop-shadow(0 0 40px rgba(0,229,181,.18)) !important;
  -webkit-text-fill-color: transparent !important;
  background: linear-gradient(135deg, #00ffcc 0%, #00E5B5 45%, #00c9a0 80%, #00ffaa 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

/* ── CTA ghost: pill shape like reference site ── */
.cta-ghost-btn {
  border-radius: 50px !important;
  border: 1.5px solid rgba(255,255,255,.18) !important;
  padding: 13px 28px !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: border-color .2s ease, background .2s ease !important;
}
.cta-ghost-btn:hover {
  border-color: rgba(0,229,181,.45) !important;
  background: rgba(0,229,181,.07) !important;
}

/* ── CTA primary: pill shape for consistency with reference ── */
.cta-btn {
  border-radius: 50px !important;
  padding: 16px 38px !important;
}

/* ── Section rhythm separators ── */
.features-wrap::before,
.how-section::before,
.cta-section::before {
  content: '';
  display: block;
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.06) 30%, rgba(0,229,181,.12) 50%, rgba(255,255,255,.06) 70%, transparent 100%);
  margin-bottom: 0;
}

/* ── Hero badge: UPPERCASE pill ── */
.badge {
  text-transform: uppercase !important;
  font-size: .64rem !important;
  letter-spacing: .2em !important;
  font-weight: 800 !important;
  border-radius: 4px !important;
  padding: 6px 16px !important;
  border: 1px solid rgba(0,229,181,.3) !important;
  background: rgba(0,229,181,.07) !important;
  color: var(--green) !important;
}

/* ── Section h2: sharper, tighter ── */
.section-h2 {
  font-size: clamp(2rem, 4.5vw, 3.4rem) !important;
  font-weight: 900 !important;
  letter-spacing: -.04em !important;
  line-height: 1.04 !important;
}

/* ── VS table: crisper header ── */
.vs-th-fit {
  font-weight: 900 !important;
  letter-spacing: .06em !important;
}

/* ── Trust badges: minimal + uppercase ── */
.trust-badge {
  text-transform: uppercase !important;
  font-size: .6rem !important;
  letter-spacing: .1em !important;
  font-weight: 700 !important;
}

/* ── Demo preview card: more premium depth ── */
.hero-demo-preview, .hero-demo-card {
  box-shadow: 0 32px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(0,229,181,.12), 0 0 60px rgba(0,229,181,.06) !important;
  border-radius: 20px !important;
}

/* ── Proof strip: more dramatic ── */
.proof-strip {
  background: linear-gradient(180deg, rgba(0,229,181,.04) 0%, rgba(0,229,181,.01) 100%) !important;
}
.cf-proof-n {
  font-size: 2.8rem !important;
  font-weight: 900 !important;
  letter-spacing: -.04em !important;
}

/* ── Announcement bar: sleeker ── */
#announce-bar {
  font-size: .74rem !important;
  letter-spacing: .03em !important;
}

/* ── Marquee speed: slightly faster ── */
.marquee-inner { animation-duration: 24s !important; }
.marquee-inner-r { animation-duration: 28s !important; }

/* ── Science refs: premium glass ── */
.science-ref-card {
  background: rgba(255,255,255,.025) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
.science-ref-card:hover {
  border-color: rgba(0,229,181,.2) !important;
  background: rgba(0,229,181,.03) !important;
}

/* ── Testimonial section: atmospheric ── */
.testi-section {
  position: relative;
}
.testi-section::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.05) 30%, rgba(0,229,181,.1) 50%, rgba(255,255,255,.05) 70%, transparent 100%);
}

/* ── Form input: slightly more depth ── */
.finput, .fsel {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.1) !important;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease !important;
}
.finput:focus, .fsel:focus {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(0,229,181,.45) !important;
  box-shadow: 0 0 0 3px rgba(0,229,181,.1) !important;
}

/* ── Mobile adjustments ── */
@media (max-width: 768px) {
  .hero-h1 { font-size: clamp(1.9rem, 8vw, 2.8rem) !important; letter-spacing: .03em !important; }
  .hero-impact-line { font-size: clamp(1.7rem, 7.5vw, 2.5rem) !important; letter-spacing: .04em !important; }
  .hero-impact-green { font-size: clamp(1.8rem, 8vw, 2.7rem) !important; letter-spacing: .04em !important; }
}

/* ── Reduced motion: cinematic upgrade overrides ── */
@media (prefers-reduced-motion: reduce) {
  .hero::after { display: none; }
  .cta-ghost-btn, .cta-btn { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   VISUAL POLISH v2 — Tighter flow + premium card depth
   ═══════════════════════════════════════════════════════════ */

/* ── Section spacing: tighter, more energetic ── */
.how-section       { padding: 80px 24px !important; }
.features-section  { padding: 72px 24px 88px !important; }
.cta-section       { padding: 88px 24px 80px !important; }
.cta-box           { padding: 60px 48px !important; }
.overload-section  { padding: 64px 24px !important; }
.equipment-section { padding: 64px 24px !important; }

/* ── Step cards: neon border glow on hover ── */
.step-card {
  border: 1px solid rgba(255,255,255,.07) !important;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease !important;
}
.step-card:hover {
  border-color: rgba(0,229,181,.25) !important;
  box-shadow: 0 0 0 1px rgba(0,229,181,.1), 0 20px 60px rgba(0,0,0,.35), 0 0 40px rgba(0,229,181,.06) !important;
  transform: translateY(-5px) !important;
}

/* ── Feature cards: stronger number labels ── */
.feature-card-n {
  font-size: 4.5rem !important;
  font-weight: 900 !important;
  opacity: .07 !important;
  color: var(--green) !important;
  letter-spacing: -.05em !important;
}

/* ── Feature cards: hover neon ── */
.feature-card {
  border: 1px solid rgba(255,255,255,.06) !important;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease !important;
}
.feature-card:hover {
  border-color: rgba(0,229,181,.22) !important;
  box-shadow: 0 0 0 1px rgba(0,229,181,.08), 0 16px 48px rgba(0,0,0,.3), 0 0 30px rgba(0,229,181,.05) !important;
  transform: translateY(-4px) !important;
}

/* ── Stats: first stat highlight (150+) ── */
.stats-row .stat:first-child .stat-n {
  background: linear-gradient(135deg, #00ffcc 0%, #00E5B5 60%, #00c9a0 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  filter: drop-shadow(0 0 16px rgba(0,229,181,.35)) !important;
}

/* ── CTA box: gradient border glow ── */
.cta-box {
  border: 1px solid rgba(0,229,181,.18) !important;
  box-shadow: 0 0 80px rgba(0,229,181,.06), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* ── How section headline: display font, tight ── */
.how-title, .how-section .section-h2 {
  font-weight: 900 !important;
  letter-spacing: -.04em !important;
}

/* ── Overload chart bars: brighter ── */
.overload-bar-fill {
  background: linear-gradient(180deg, #00ffcc 0%, #00E5B5 60%, #00a888 100%) !important;
  box-shadow: 0 0 12px rgba(0,229,181,.4) !important;
}

/* ── Equipment cards: consistent depth ── */
.equipment-card {
  border: 1px solid rgba(255,255,255,.07) !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}
.equipment-card:hover {
  border-color: rgba(0,229,181,.25) !important;
  box-shadow: 0 0 0 1px rgba(0,229,181,.1), 0 16px 40px rgba(0,0,0,.3) !important;
}

/* ── Testimonial cards: cleaner separation ── */
.testi-card {
  border: 1px solid rgba(255,255,255,.06) !important;
  transition: border-color .2s ease !important;
}
.testi-card:hover {
  border-color: rgba(0,229,181,.18) !important;
}

/* ── Hero subtitle area: tighter ── */
.hero-sub-row { margin-bottom: 12px !important; }

/* ── Section badge/tag: subtle shimmer ── */
.section-tag, .how-tag, .features-tag, .cta-tag {
  border: 1px solid rgba(0,229,181,.28) !important;
  background: rgba(0,229,181,.05) !important;
}

/* ── FAQ items: cleaner hover ── */
.faq-item {
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  transition: background .2s ease !important;
}
.faq-item:hover { background: rgba(0,229,181,.02) !important; }

/* ── Science pill tags: more visible ── */
.science-pill {
  background: rgba(0,229,181,.06) !important;
  border: 1px solid rgba(0,229,181,.15) !important;
  color: rgba(255,255,255,.85) !important;
}

/* ── Mobile: keep sections comfortable ── */
@media (max-width: 768px) {
  .how-section       { padding: 64px 16px !important; }
  .features-section  { padding: 56px 16px 72px !important; }
  .cta-section       { padding: 64px 16px 60px !important; }
  .cta-box           { padding: 40px 22px !important; }
  .overload-section  { padding: 48px 16px !important; }
  .equipment-section { padding: 48px 16px !important; }
}

/* ═══════════════════════════════════════════════════════════
   TYPOGRAPHY SPACING — Alignment & breathing room
   Ensures all text elements have clear visual separation
   ═══════════════════════════════════════════════════════════ */

/* ── Section badge → heading gap ── */
.section-label          { margin-bottom: 22px !important; }
.section-tag,
.how-tag,
.features-tag           { margin-bottom: 22px !important; }
.cta-tag                { margin-bottom: 26px !important; }

/* ── Hero badge → h1 gap ── */
.badge.hero-badge       { margin-bottom: 30px !important; }

/* ── Section heading → body copy gap ── */
.section-title          { margin-bottom: 22px !important; }
.section-h2,
h2.section-h2           { margin-bottom: 22px !important; }
.cta-h2                 { margin-bottom: 22px !important; }

/* ── Body copy under heading: slight top nudge for breathing ── */
.section-sub            { margin-top: 6px !important; }

/* ── Step cards: title → description gap ── */
.step-title             { margin-bottom: 14px !important; }

/* ── Feature cards: title → description gap ── */
.feature-title          { margin-bottom: 13px !important; }

/* ── Feature icon → title gap (already 16px, give a touch more) ── */
.feature-icon           { margin-bottom: 20px !important; }

/* ── Step icon → title gap ── */
.step-icon-wrap         { margin-bottom: 20px !important; }

/* ── Hero paragraph → CTA gap: clear air after subtitle ── */
.hero-p                 { margin-bottom: 8px !important; }

/* ── CTA paragraph → button gap ── */
.cta-p                  { margin-bottom: 40px !important; }

/* ── Hero tagline row: a bit more clearance above ── */
.hero-tagline-row       { margin-top: 22px !important; margin-bottom: 8px !important; }

/* ── Section head bottom margin: keep content well separated ── */
.section-head           { margin-bottom: 72px !important; }

/* ── Mobile: reduce gaps proportionally ── */
@media (max-width: 768px) {
  .section-label        { margin-bottom: 18px !important; }
  .section-tag,
  .how-tag,
  .features-tag         { margin-bottom: 18px !important; }
  .badge.hero-badge     { margin-bottom: 24px !important; }
  .section-title,
  .section-h2,
  h2.section-h2,
  .cta-h2               { margin-bottom: 18px !important; }
  .section-head         { margin-bottom: 52px !important; }
  .step-title           { margin-bottom: 12px !important; }
  .feature-title        { margin-bottom: 11px !important; }
  .hero-tagline-row     { margin-top: 18px !important; }
  .cta-p                { margin-bottom: 32px !important; }
}

/* ══════════════════════════════════════════════════════════════
   BLOG & ARTICLE — MOBILE RESPONSIVE FIXES
   Fixes: nav overlap, title overflow, touch targets, spacing
══════════════════════════════════════════════════════════════ */

/* ── Base mobile (≤768px) ─────────────────────────────────── */
@media (max-width: 768px) {
  /* Blog hero: tighter side padding, reasonable vertical spacing */
  .blog-hero {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: 48px !important;
  }
  /* Blog hero h1: ensure readable size at all widths */
  .blog-hero-h1 {
    font-size: clamp(1.7rem, 7vw, 2.4rem) !important;
    letter-spacing: -.03em !important;
    line-height: 1.15 !important;
    margin-bottom: 12px !important;
  }
  /* Blog hero paragraph: remove max-width constraint so text doesn't look odd */
  .blog-hero-p {
    font-size: .9rem;
    max-width: 100%;
  }
  /* Blog category buttons: meet 44px touch target height */
  .blog-cat {
    padding: 10px 14px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* Blog categories row: better gap on mobile */
  .blog-categories {
    gap: 8px;
    margin-bottom: 20px;
  }
  /* Blog CTA box: reduce large padding */
  .blog-cta-box {
    padding: 28px 20px !important;
  }
  .blog-cta-title {
    font-size: 1.2rem;
  }
  .blog-cta-p {
    font-size: .85rem;
    max-width: 100%;
  }
  /* Article h1: tighten for narrow viewports */
  .article-h1 {
    font-size: clamp(1.45rem, 6.5vw, 2.2rem) !important;
    letter-spacing: -.025em !important;
    line-height: 1.2 !important;
    margin-bottom: 14px !important;
  }
  /* Article back button: reduce large bottom padding */
  .article-back {
    padding-bottom: 20px;
  }
  /* Article meta bar: allow wrapping on narrow screens */
  .article-meta-bar {
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 28px;
    padding-bottom: 20px;
  }
  /* Article body paragraphs: comfortable reading on small screens */
  .article-body {
    font-size: .93rem;
    line-height: 1.8;
  }
  /* Article highlight boxes: reduce padding */
  .article-highlight {
    padding: 16px 14px;
  }
}

/* ── Small mobile (≤640px) ────────────────────────────────── */
@media (max-width: 640px) {
  /* Article shell: increase top padding to prevent nav overlap.
     Nav bottom = top(8px) + height(60px) = 68px.
     Current 76px !important leaves only 8px gap — too tight. */
  .article-shell {
    padding-top: 92px !important;
  }
  /* Blog hero: align top padding with nav clearance */
  .blog-hero {
    padding-top: 92px !important;
  }
  /* Blog hero h1: prevent clipping on very small screens */
  .blog-hero-h1 {
    font-size: clamp(1.55rem, 8vw, 2rem) !important;
    word-break: break-word;
    hyphens: auto;
  }
  /* Blog body: tighter padding */
  .blog-body {
    padding: 36px 14px 72px !important;
  }
  /* Blog search input: comfortable tap target */
  .blog-search-input {
    padding-top: 13px;
    padding-bottom: 13px;
    font-size: .9rem;
  }
  /* Blog card content: less padding */
  .blog-card-content {
    padding: 18px 16px;
  }
  .blog-card-title {
    font-size: .92rem;
    line-height: 1.3;
  }
  .blog-card.featured .blog-card-title {
    font-size: 1.1rem;
  }
  /* Article h1: slightly smaller floor */
  .article-h1 {
    font-size: clamp(1.35rem, 7.5vw, 1.9rem) !important;
  }
  /* Article meta tag: smaller spacing */
  .article-meta-tag {
    margin-bottom: 10px;
  }
  /* FAQ: comfortable touch target on questions */
  .faq-q {
    min-height: 44px;
  }
}

/* ── Extra small (≤480px) ─────────────────────────────────── */
@media (max-width: 480px) {
  /* Blog hero: no excess top space */
  .blog-hero {
    padding-top: 88px !important;
    padding-bottom: 40px !important;
  }
  /* Smallest h1 floor */
  .blog-hero-h1 {
    font-size: 1.55rem !important;
  }
  /* Blog hero label: tighter */
  .blog-hero-label {
    font-size: .62rem;
    padding: 5px 10px;
    margin-bottom: 14px;
  }
  /* Blog CTA: minimal padding */
  .blog-cta-box {
    padding: 22px 16px !important;
  }
  .blog-cta-title {
    font-size: 1.1rem;
  }
  /* Article shell: maintain clearance on smallest phones */
  .article-shell {
    padding-top: 88px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .article-h1 {
    font-size: clamp(1.3rem, 8vw, 1.75rem) !important;
  }
  /* Related cards: full width already handled; reduce content padding */
  .related-card {
    padding: 14px 12px;
  }
  /* Share buttons: full width on tiny screens */
  .article-share-buttons {
    gap: 8px;
  }
  .article-share-btn {
    font-size: .75rem;
    padding: 8px 14px;
  }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE VISUAL POLISH — v3  (2026-05)
   Root cause: stats overflow-visible bleed, hero cramped on 375px
   Applies globally to ≤ 640px and ≤ 480px breakpoints
══════════════════════════════════════════════════════════════ */

/* ── Stats bar: clip the 4px bleed caused by overflow:visible ─ */
@media (max-width: 640px) {
  /* Stats container: clip stagger-animation overflow */
  .stats { overflow: hidden !important; }
  /* Stat cells: shrink padding so 4 cells fit in 375px */
  .stat  { padding: 16px 6px !important; }
  .stat-n { font-size: 1.35rem !important; }
  .stat-l { font-size: .58rem !important; letter-spacing: .04em !important; }
}

/* ── Hero: full-width CTAs on small phones ─────────────────── */
@media (max-width: 480px) {
  /* Both hero buttons take full width for easy tapping */
  .hero-cta .cta-btn,
  .hero-cta .cta-ghost-btn { width: 100% !important; justify-content: center !important; }

  /* Trust badges: 2-column grid, fill each cell */
  .hero-trust-badges {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px 10px !important;
  }
  .trust-badge {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }
  .trust-badge svg { flex-shrink: 0 !important; }
  .trust-badge span { overflow: hidden; text-overflow: ellipsis; }

  /* Hero demo preview: clip any horizontal overflow */
  .hero-demo-preview { overflow: hidden !important; }

  /* Step cards: slightly more compact on very small screens */
  .step-card { padding: 26px 18px !important; }
}

/* ── Prevent any section-level horizontal scroll ───────────── */
@media (max-width: 768px) {
  .how-section,
  .features-section,
  .overload-section,
  .equipment-section,
  .cta-section { overflow-x: hidden !important; }

  /* Testimonial grid: single column on mobile */
  .testi-grid { grid-template-columns: 1fr !important; }

  /* Section subheading: full width on mobile for readability */
  .section-sub { max-width: 100% !important; }
}

/* ── AI Engine status widget (replaces live counter) ────────── */
.ai-engine-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,229,181,.06);
  border: 1px solid rgba(0,229,181,.18);
  border-radius: 12px;
  padding: 10px 18px;
  margin-top: 12px;
  font-size: .82rem;
  color: rgba(255,255,255,.7);
  letter-spacing: .02em;
  flex-wrap: wrap;
}
.ai-engine-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #00E5B5;
  box-shadow: 0 0 6px rgba(0,229,181,.7);
  animation: aeDotPulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes aeDotPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .55; transform: scale(.75); }
}
.ai-engine-label {
  font-weight: 600;
  color: rgba(0,229,181,.9);
}
.ai-engine-divider {
  color: rgba(255,255,255,.2);
  font-size: .7rem;
}
.ai-engine-chip {
  color: rgba(255,255,255,.65);
}
@media (max-width: 480px) {
  .ai-engine-status { font-size: .76rem; padding: 8px 13px; gap: 6px; }
}

#cm-ana-toggle:checked + #cm-ana-slider,
#cm-mkt-toggle:checked + #cm-mkt-slider { background:#00E5B5; }
#cm-ana-slider::before, #cm-mkt-slider::before {
  content:''; position:absolute; height:18px; width:18px;
  left:3px; bottom:3px; background:#fff; border-radius:50%; transition:.2s;
}
#cm-ana-toggle:checked + #cm-ana-slider::before,
#cm-mkt-toggle:checked + #cm-mkt-slider::before { transform:translateX(20px); }

/* ══════════════════════════════════════════════════════════════
   PROFESSIONAL POLISH v4 — (Tasks 12 & 13 + pro improvements)
   - Scroll progress bar
   - Stat fill-bars with animation
   - AI Engine status widget (real capability claims)
   - Nav social proof pill
   - Stronger CTA section
   - Section gradient dividers
══════════════════════════════════════════════════════════════ */

/* ── Scroll progress bar ──────────────────────────────────── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, #00E5B5 0%, #5FFFD8 60%, #00C49A 100%);
  box-shadow: 0 0 8px rgba(0,229,181,.5);
  z-index: 9999;
  transition: width .1s linear;
  pointer-events: none;
  border-radius: 0 2px 2px 0;
}

/* ── Stat fill-bar (visual context under each number) ─────── */
.stat-bar-wrap {
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,.06);
  border-radius: 2px;
  margin-top: 10px;
  overflow: hidden;
}
.stat-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 2px;
  background: linear-gradient(90deg, #00E5B5, #5FFFD8);
  transition: width 1s cubic-bezier(.16,1,.3,1);
  box-shadow: 0 0 6px rgba(0,229,181,.4);
}
.stat-bar-fill.filled { width: var(--fill, 100%); }

/* ── Live counter activos ahora — removed (fabricated data) ── */

/* ── Nav social proof pill ────────────────────────────────── */
.nav-proof-pill {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: rgba(0,229,181,.9);
  background: rgba(0,229,181,.08);
  border: 1px solid rgba(0,229,181,.2);
  border-radius: 20px;
  padding: 4px 10px;
  white-space: nowrap;
  display: none !important; /* hidden on mobile — no room in nav */
}
@media (min-width: 768px) { .nav-proof-pill { display: inline-block !important; } }

/* ── Bottom CTA: upgraded button style ───────────────────── */
.cta-bottom-btn {
  position: relative;
  overflow: hidden;
}
.cta-bottom-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.12) 0%, transparent 60%);
  pointer-events: none;
}
/* Urgency badge on CTA section */
.cta-urgency-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(0,229,181,.9);
  background: rgba(0,229,181,.08);
  border: 1px solid rgba(0,229,181,.2);
  border-radius: 20px;
  padding: 5px 12px;
  margin-bottom: 20px;
}
.cta-urgency-dot {
  width: 6px; height: 6px;
  background: #00E5B5;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(0,229,181,.8);
  animation: livePulse 1.8s ease-in-out infinite;
}

/* ── Section gradient dividers ───────────────────────────── */
.section-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,229,181,.15) 20%,
    rgba(0,229,181,.25) 50%,
    rgba(0,229,181,.15) 80%,
    transparent 100%);
  margin: 0;
  pointer-events: none;
}

/* ── "Stat counted" glow burst ───────────────────────────── */
@keyframes statGlow {
  0%   { text-shadow: 0 0 0 rgba(0,229,181,0); }
  50%  { text-shadow: 0 0 18px rgba(0,229,181,.6); }
  100% { text-shadow: 0 0 0 rgba(0,229,181,0); }
}
.stat-n.counted {
  animation: statGlow .8s ease forwards;
}
@media (prefers-reduced-motion: reduce) {
  #scroll-progress { transition: none; }
  .stat-bar-fill { transition: none; }
  .stat-n.counted { animation: none; }
  .cta-urgency-dot { animation: none; }
}

/* ══════════════════════════════════════════════════════════════
   PREMIUM v5 — Visual Excellence 2026
   Navbar scroll · Aurora hero · Particles · Step timeline ·
   Overload bars · CTA pulse · Ripple · Spotlight · Micro-FX
══════════════════════════════════════════════════════════════ */

/* ── 1. Nav scroll class — removed in Premium v7 (static nav per design spec) */

/* ── 2. Hero: dynamic aurora mesh (::before unused slot) ─── */
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 65% 50% at 15% 50%, rgba(0,229,181,.055) 0%, transparent 55%),
    radial-gradient(ellipse 50% 35% at 85% 25%, rgba(0,196,154,.04)  0%, transparent 55%),
    radial-gradient(ellipse 35% 30% at 55% 85%, rgba(95,255,216,.03)  0%, transparent 50%);
  animation: auroraShift 20s ease-in-out infinite alternate;
}
@keyframes auroraShift {
  0%   { opacity: .7; transform: scale(1)    rotate(0deg);   }
  40%  { opacity: 1;  transform: scale(1.04) rotate(.4deg);  }
  70%  { opacity: .8; transform: scale(.97)  rotate(-.3deg); }
  100% { opacity: 1;  transform: scale(1.02) rotate(.2deg);  }
}

/* ── 3. Hero CSS particles ────────────────────────────────── */
.hero-particles {
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none; z-index: 0;
}
.hp {
  position: absolute; border-radius: 50%;
  background: var(--green); opacity: 0;
  animation: hpFloat var(--d,9s) ease-in-out infinite var(--dl,0s);
}
@keyframes hpFloat {
  0%,100% { opacity:0;    transform: translateY(0)     translateX(0)    scale(1);   }
  15%      { opacity:.55; }
  50%      { opacity:.35; transform: translateY(-40px) translateX(12px) scale(1.6); }
  85%      { opacity:.5;  }
}

/* ── 4. Badge: shimmer sweep ─────────────────────────────── */
.badge {
  background: linear-gradient(
    90deg,
    rgba(0,229,181,.06) 0%,
    rgba(0,229,181,.16) 40%,
    rgba(0,229,181,.06) 100%
  );
  background-size: 200% auto;
  animation: badgeShimmer 5s linear infinite;
}
@keyframes badgeShimmer {
  from { background-position: -200% center; }
  to   { background-position:  200% center; }
}

/* ── 5. Step cards: horizontal connector line (desktop) ─── */
@media (min-width: 768px) {
  .steps-grid { position: relative; }
  .steps-grid::before {
    content: '';
    position: absolute;
    top: 64px;
    left: calc(16.67% + 12px);
    right: calc(16.67% + 12px);
    height: 1px;
    background: linear-gradient(90deg,
      rgba(0,229,181,.5) 0%,
      rgba(0,229,181,.15) 50%,
      rgba(0,229,181,.5) 100%);
    pointer-events: none;
    z-index: 0;
  }
}

/* ── 6. Step number: glowing circle ──────────────────────── */
.step-num {
  position: relative;
  z-index: 1;
}
.step-card:hover .step-num {
  color: var(--green) !important;
  text-shadow: 0 0 16px rgba(0,229,181,.6);
}

/* ── 7. Overload bars: scroll-triggered fill ─────────────── */
.overload-bar {
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform .85s cubic-bezier(.16,1,.3,1);
}
.overload-bars.in-view .overload-bar {
  transform: scaleY(1);
}
.overload-bars.in-view .overload-bar-wrap:nth-child(2) .overload-bar { transition-delay: .12s; }
.overload-bars.in-view .overload-bar-wrap:nth-child(3) .overload-bar { transition-delay: .24s; }
.overload-bars.in-view .overload-bar-wrap:nth-child(4) .overload-bar { transition-delay: .36s; }

/* ── 8. CTA section: pulsing radial glow ─────────────────── */
@keyframes ctaRadialPulse {
  0%,100% { opacity: .7; transform: scale(1);    }
  50%      { opacity: 1;  transform: scale(1.06); }
}
.cta-section {
  position: relative;
}
.cta-section::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 60% at 50% 100%,
    rgba(0,229,181,.09) 0%, transparent 65%);
  animation: ctaRadialPulse 7s ease-in-out infinite;
}
.cta-box { position: relative; z-index: 1; }

/* ── 9. Button ripple: CSS wave ──────────────────────────── */
.ripple-host { position: relative; overflow: hidden; }
.ripple-wave {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  transform: scale(0);
  animation: rippleExpand .55s linear forwards;
  pointer-events: none;
}
@keyframes rippleExpand {
  to { transform: scale(4); opacity: 0; }
}

/* ── 10. Feature icon: spin on hover ─────────────────────── */
.feature-card:hover .feature-icon svg {
  animation: iconSpin .5s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes iconSpin {
  0%   { transform: rotate(0)    scale(1);    }
  40%  { transform: rotate(-12deg) scale(1.15); }
  100% { transform: rotate(0)    scale(1.05); }
}

/* ── 11. Equipment icon bounce ───────────────────────────── */
.equipment-card:hover .equipment-icon svg {
  animation: iconBounce .4s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes iconBounce {
  0%  { transform: scale(1); }
  50% { transform: scale(1.22); }
  100%{ transform: scale(1.08); }
}

/* ── 12. Science ref year: glow on hover ─────────────────── */
.science-ref-card:hover .science-ref-year {
  color: var(--green);
  text-shadow: 0 0 12px rgba(0,229,181,.5);
  transition: color .2s ease, text-shadow .2s ease;
}

/* ── 13. AI Engine status: border breathing ──────────────── */
@keyframes aeStatusBreath {
  0%,100% { border-color: rgba(0,229,181,.18); }
  50%      { border-color: rgba(0,229,181,.38); }
}
.ai-engine-status {
  animation: aeStatusBreath 3.5s ease-in-out infinite;
}

/* ── 14. CTA bottom button: shimmer pass ─────────────────── */
.cta-bottom-btn {
  position: relative; overflow: hidden;
}
.cta-bottom-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -110%;
  width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform: skewX(-18deg);
  animation: ctaBtnSweep 4s ease-in-out infinite 1.2s;
  pointer-events: none;
}
@keyframes ctaBtnSweep {
  0%      { left: -110%; }
  55%,100%{ left:  160%; }
}

/* ── 15. Scroll-to-top button: premium hover ──────────────── */
#scroll-top-btn:hover {
  box-shadow: 0 6px 24px rgba(0,229,181,.4) !important;
  transform: translateY(-3px) !important;
}

/* ── 16. Marquee items: hover highlight ─────────────────── */
.marquee-item:hover {
  color: var(--white) !important;
  background: rgba(0,229,181,.12);
  border-radius: 6px;
}

/* ── 17. Proof strip numbers: entrance glow ─────────────── */
/* Structure: item div item div item div item div item
   (uses :nth-of-type to target only .proof-item elements)  */
.proof-strip.visible .proof-n {
  animation: proofGlow .7s ease both;
}
.proof-strip.visible .proof-item:nth-child(1)  .proof-n { animation-delay: .05s; }
.proof-strip.visible .proof-item:nth-child(3)  .proof-n { animation-delay: .15s; }
.proof-strip.visible .proof-item:nth-child(5)  .proof-n { animation-delay: .25s; }
.proof-strip.visible .proof-item:nth-child(7)  .proof-n { animation-delay: .35s; }
.proof-strip.visible .proof-item:nth-child(9)  .proof-n { animation-delay: .45s; }
@keyframes proofGlow {
  from { opacity: .3; transform: scale(.88) translateY(10px); }
  to   { opacity: 1;  transform: scale(1)   translateY(0); }
}

/* ── 18. Testimonial avatar: gradient ring ──────────────── */
.testi-avatar {
  box-shadow: 0 0 0 2px rgba(0,229,181,.25);
  transition: box-shadow .2s ease;
}
.testi-card:hover .testi-avatar {
  box-shadow: 0 0 0 2px rgba(0,229,181,.6), 0 0 12px rgba(0,229,181,.2);
}

/* ── 19. Nav actions: micro-gap on hover ─────────────────── */
.nav-actions { gap: 8px; transition: gap .2s ease; }

/* ── 20. Section labels: left border accent ─────────────── */
.section-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--green);
}

/* ── Reduced motion overrides ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero::before            { animation: none !important; }
  .hp                      { animation: none !important; display: none; }
  .badge                   { animation: none !important; }
  .overload-bar            { transform: scaleY(1) !important; transition: none !important; }
  .cta-section::before     { animation: none !important; }
  .ai-engine-status        { animation: none !important; }
  .ai-engine-dot           { animation: none !important; }
  .cta-bottom-btn::before  { animation: none !important; }
  .sec-orb-d, .sec-orb-e, .sec-orb-f { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   TYPOGRAPHY & NAV POLISH — letter-spacing & proof-pill fix
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Loosen display title letter-spacing ────────────────────
   Previous v4 block set -.04em (too tight on heavy weights).
   Comfortable display spacing: -.015em keeps premium feel
   without letters colliding at clamp(2rem→3.4rem) sizes.     */
.section-h2 {
  letter-spacing: -.015em !important;
  line-height: 1.13 !important;
}

/* Hero display lines */
.hero-h1 {
  letter-spacing: -.02em !important;
}
.hero-impact-line {
  letter-spacing: -.025em !important;
}

/* Batch heading rule — was -.035em, now -.02em */
.hero-impact-line, .section-title, .cf-section-title,
.cta-h2, .blog-hero-h1, .article-h1,
.panel-title, .page-title, .result-title,
.step-title, .feature-title, .cf-benefit-title {
  letter-spacing: -.02em !important;
}

/* Comparison page and other section h2 variants */
.cf-hero-h1    { letter-spacing: -.02em !important; }
.blog-hero-h1  { letter-spacing: -.02em !important; }

/* ── 2. Nav proof pill: now inside nav-actions ─────────────────
   Pill moved into the right-side button group so it sits neatly
   before the login/register buttons. Add a subtle separator.  */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-proof-pill {
  margin-right: 4px; /* nudge extra gap before the action buttons */
}

/* ══════════════════════════════════════════════════════════════
   PREMIUM v6 — VISUAL EXCELLENCE APEX 2026
   Apple / Linear / Vercel level motion + polish
   ══════════════════════════════════════════════════════════════ */

/* ── 0. Cursor ambient glow (JS-positioned) ────────────────── */
#cursor-glow {
  position: fixed;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,229,181,.055) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
  transform: translate(-260px,-260px);
  transition: transform .12s linear;
  will-change: transform;
}

/* ── 1. Step demo — shared base ────────────────────────────── */
.step-demo {
  margin-top: 20px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(0,229,181,.1);
  border-radius: 10px;
  padding: 14px 14px 12px;
  position: relative;
  overflow: hidden;
}
.step-demo::before {
  content: '';
  position: absolute;
  top: 0; left: 20%; right: 20%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,229,181,.3), transparent);
}

/* ── 1a. Form demo (Step 01) ──────────────────── */
.sd-form .sd-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.sd-form .sd-row:last-of-type { margin-bottom: 0; }
.sd-lbl {
  flex-shrink: 0;
  width: var(--lw, 35%);
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,.1);
}
.sd-inp {
  flex: 1;
  height: 20px;
  border-radius: 5px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
  position: relative;
}
.sd-inp-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--w, 70%);
  background: linear-gradient(90deg, rgba(0,229,181,.25), rgba(0,229,181,.12));
  border-radius: 4px;
  transform: scaleX(0);
  transform-origin: left;
  animation: sdFillIn 1s cubic-bezier(.16,1,.3,1) var(--dl, 0s) both;
}
@keyframes sdFillIn {
  0%   { transform: scaleX(0); opacity: 0; }
  100% { transform: scaleX(1); opacity: 1; }
}
.sd-chips-row {
  display: flex; gap: 6px; margin-top: 10px;
}
.sd-chip-mini {
  height: 18px; border-radius: 9px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  flex: 1;
}
.sd-cm-1 { animation: sdFadeIn .4s .5s both; }
.sd-cm-2 { animation: sdFadeIn .4s .7s both; }
.sd-cm-3 { animation: sdFadeIn .4s .9s both; }
.sd-cm-active {
  background: rgba(0,229,181,.18) !important;
  border-color: rgba(0,229,181,.35) !important;
}
@keyframes sdFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 1b. AI processing demo (Step 02) ─────────── */
.sd-ai {
  display: flex; align-items: center; gap: 14px;
}
.sd-ai-ring {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid rgba(0,229,181,.15);
  border-top-color: rgba(0,229,181,.8);
  animation: sdSpin 1.2s linear infinite;
  position: relative;
}
.sd-ai-ring-inner {
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,229,181,.08);
  border-top-color: rgba(0,229,181,.4);
  animation: sdSpin .9s linear infinite reverse;
}
@keyframes sdSpin {
  to { transform: rotate(360deg); }
}
.sd-ai-lines {
  flex: 1; display: flex; flex-direction: column; gap: 7px;
}
.sd-ai-line {
  height: 7px; border-radius: 4px;
  width: var(--lw, 60%);
  background: linear-gradient(90deg,
    rgba(0,229,181,.25) 0%,
    rgba(0,229,181,.1) 40%,
    rgba(255,255,255,.06) 100%);
  animation: sdPulse 2s ease-in-out var(--dl, 0s) infinite alternate;
}
@keyframes sdPulse {
  0%   { opacity: .4; }
  100% { opacity: 1; }
}

/* ── 1c. Result demo (Step 03) ────────────────── */
.sd-result {
  display: flex; flex-direction: column; gap: 6px;
}
.sd-ex-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 7px;
  animation: sdSlideIn .45s cubic-bezier(.16,1,.3,1) var(--dl, 0s) both;
}
@keyframes sdSlideIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}
.sd-ex-badge {
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: 5px;
  background: rgba(0,229,181,.18);
  border: 1px solid rgba(0,229,181,.25);
}
.sd-ex-lines { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.sd-ex-n {
  height: 7px; width: 75%; border-radius: 3px;
  background: rgba(255,255,255,.2);
}
.sd-ex-d {
  height: 5px; width: 50%; border-radius: 3px;
  background: rgba(255,255,255,.08);
}

/* ── 2. Feature card: 3D perspective tilt ──────── */
.feature-card {
  transform-style: preserve-3d;
  transform: perspective(1200px) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg)) translateZ(0);
  will-change: transform;
  transition: transform .25s ease, border-color .25s ease,
              box-shadow .25s ease !important;
}
.feature-card:hover {
  transform: perspective(1200px) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg)) translateZ(10px) !important;
  border-color: rgba(0,229,181,.28) !important;
  box-shadow: 0 24px 64px rgba(0,229,181,.1), 0 8px 20px rgba(0,0,0,.4) !important;
}

/* ── 3. Step card: elevated glass look ─────────── */
.step-card {
  border-top: 1px solid rgba(0,229,181,.08) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.2);
  transition: background .3s, box-shadow .3s, border-color .3s !important;
}
.step-card:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,.3), inset 0 0 40px rgba(0,229,181,.025) !important;
  border-top-color: rgba(0,229,181,.18) !important;
}

/* ── 4. Hero demo preview: entrance shimmer ──────
   The card pulses a green-tint shimmer on its border
   once, 1.5s after load, to draw the eye.           */
@keyframes hdpEntranceGlow {
  0%,100% { box-shadow: 0 32px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(0,229,181,.06) inset; }
  50%      { box-shadow: 0 32px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(0,229,181,.06) inset,
                         0 0 40px rgba(0,229,181,.18), 0 0 0 1.5px rgba(0,229,181,.4) inset; }
}
.hero-demo-preview {
  animation: up .55s .45s ease both, hdpEntranceGlow 2s 2s ease-in-out 3 !important;
}

/* ── 5. Ambient section glow orbs ──────────────── */
.overload-section,
.features-section,
.science-section,
.cta-section {
  position: relative;
  overflow: hidden;
}
.overload-section::after,
.features-section::after,
.science-section::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.overload-section::after {
  width: 500px; height: 500px;
  top: -100px; right: -150px;
  background: radial-gradient(circle, rgba(0,229,181,.04) 0%, transparent 65%);
}
.features-section::after {
  width: 600px; height: 600px;
  bottom: -120px; left: -180px;
  background: radial-gradient(circle, rgba(0,229,181,.035) 0%, transparent 65%);
}
.science-section::after {
  width: 450px; height: 450px;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(0,229,181,.03) 0%, transparent 65%);
}
/* Ensure children are above ambient orb */
.overload-section > *,
.features-section > *,
.science-section > * {
  position: relative;
  z-index: 1;
}

/* ── 6. Section label shimmer ──────────────────── */
@keyframes labelShimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.section-label {
  background: linear-gradient(
    90deg,
    var(--green) 0%,
    rgba(0,229,181,.5) 40%,
    var(--green) 60%,
    rgba(0,229,181,.5) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: labelShimmer 4s linear infinite;
}
/* Keep badge-dot and span color intact */
.section-label .badge-dot {
  background: var(--green) !important;
  -webkit-text-fill-color: unset;
  flex-shrink: 0;
}

/* ── 7. CTA primary button: gradient border glow ─ */
@keyframes ctaBtnBorderPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(0,229,181,0), 0 8px 28px rgba(0,229,181,.22); }
  50%      { box-shadow: 0 0 0 4px rgba(0,229,181,.12), 0 8px 28px rgba(0,229,181,.35); }
}
.cta-btn {
  animation: ctaBtnBorderPulse 3.5s ease-in-out infinite 2s !important;
}

/* ── 8. Hero-demo-preview: inner scan line ──────── */
@keyframes hdpScanLine {
  0%   { top: 0; opacity: .4; }
  90%  { top: 100%; opacity: .4; }
  100% { top: 100%; opacity: 0; }
}
.hero-demo-preview::after {
  content: '' !important;
  position: absolute !important;
  left: 5%; right: 5% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(0,229,181,.5), transparent) !important;
  animation: hdpScanLine 4s linear 1.5s infinite !important;
  pointer-events: none !important;
  z-index: 5 !important;
  top: 0 !important;
  width: 90% !important;
}

/* ── 9. Global spacing rhythm improvement ──────── */
.how-section    { padding: 96px 24px 80px; }
.overload-section { padding: 96px 24px 80px; }
.features-section { padding: 96px 24px 100px; }
.vs-section     { padding: 80px 24px; }
.science-section { padding: 80px 24px 100px; }
.equipment-section { padding: 80px 24px; }
.cta-section    { padding: 100px 24px 80px; }

/* ── 10. Testimonial card: glass upgrade ─────────── */
.testi-card {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease !important;
}
.testi-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.3), 0 0 0 1px rgba(0,229,181,.12) !important;
  border-color: rgba(0,229,181,.18) !important;
}

/* ── 11. Science ref cards: depth upgrade ──────── */
.science-ref-card {
  backdrop-filter: blur(6px);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease !important;
}
.science-ref-card:hover {
  transform: translateY(-5px) scale(1.01) !important;
  box-shadow: 0 20px 48px rgba(0,0,0,.35), 0 0 0 1px rgba(0,229,181,.18) !important;
}

/* ── 12. Equipment card: glow hover ─────────────── */
.equipment-card {
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease !important;
}
.equipment-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(0,229,181,.3) !important;
  box-shadow: 0 16px 40px rgba(0,229,181,.07) !important;
}

/* ── 13. Nav: premium separator shadow ─────────── */
nav {
  box-shadow: 0 1px 0 rgba(0,229,181,.06), 0 4px 24px rgba(0,0,0,.28) !important;
}

/* ── 14. Form inputs: premium focus glow ─────────── */
.finput:focus {
  box-shadow: 0 0 0 3px rgba(0,229,181,.12), 0 0 16px rgba(0,229,181,.06) !important;
}

/* ── 15. Proof strip: top glow accent ────────────── */
.proof-strip {
  box-shadow:
    0 4px 24px rgba(0,0,0,.28),
    0 0 60px rgba(0,229,181,.03) !important;
}

/* ── 16. Mobile step demo: hide on very small screens */
@media (max-width: 400px) {
  .step-demo { display: none; }
}

/* ── 17. Reduced motion: disable all demo animations */
@media (prefers-reduced-motion: reduce) {
  #cursor-glow              { display: none !important; }
  .sd-inp-fill              { animation: none !important; transform: scaleX(1) !important; }
  .sd-cm-1,.sd-cm-2,.sd-cm-3 { animation: none !important; opacity: 1 !important; }
  .sd-ai-ring               { animation: none !important; }
  .sd-ai-ring-inner         { animation: none !important; }
  .sd-ai-line               { animation: none !important; opacity: 1 !important; }
  .sd-ex-row                { animation: none !important; opacity: 1 !important; }
  .section-label            { animation: none !important; -webkit-text-fill-color: var(--green) !important; background: none !important; }
  .cta-btn                  { animation: none !important; }
  .hero-demo-preview        { animation: up .55s .45s ease both !important; }
  .hero-demo-preview::after { animation: none !important; }
  .feature-card             { transition: border-color .2s, box-shadow .2s !important; }
  .hp, .sp                  { animation: none !important; opacity: .18 !important; }
  .sec-orb                  { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   PREMIUM v7 — Visual Excellence APEX
   FAQs · Total Users · Multi-section Particles · Glow Orbs · Polish
══════════════════════════════════════════════════════════════════════════════ */

/* ── Proof strip animation delays now handled in rule 17 above ── */

/* ── FAQ: hide extra items by default ── */
.faq-extra {
  display: none;
}

/* ── FAQ: show-more button ── */
.faq-more-wrap {
  text-align: center;
  margin-top: 28px;
}
.faq-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid rgba(0,229,181,.22);
  color: var(--green);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 10px 22px;
  border-radius: 100px;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s, transform .15s;
}
.faq-more-btn:hover {
  background: rgba(0,229,181,.08);
  border-color: rgba(0,229,181,.45);
  transform: translateY(-1px);
}
.faq-more-btn:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}
.faq-more-chevron {
  transition: transform .3s cubic-bezier(.16,1,.3,1);
  flex-shrink: 0;
}
.faq-more-btn.faq-more-open .faq-more-chevron {
  transform: rotate(180deg);
}

/* ── Multi-section ambient particles ── */
.overload-section,
.features-section,
.how-section {
  position: relative;
}
.sec-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.sp {
  position: absolute;
  border-radius: 50%;
  background: var(--green);
  opacity: 0;
  animation: hpFloat var(--d, 9s) ease-in-out infinite var(--dl, 0s);
}

/* ── Ambient glow orbs in sections ── */
.sec-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: secOrbPulse 14s ease-in-out infinite alternate;
}
.sec-orb-a {
  width: 480px; height: 480px;
  top: -120px; right: -80px;
  background: radial-gradient(circle, rgba(0,229,181,.055) 0%, transparent 65%);
}
.sec-orb-b {
  width: 420px; height: 420px;
  bottom: -100px; left: -60px;
  background: radial-gradient(circle, rgba(0,196,154,.05) 0%, transparent 65%);
  animation-delay: -4s;
}
.sec-orb-c {
  width: 360px; height: 360px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(0,229,181,.04) 0%, transparent 60%);
  animation-delay: -8s;
}
@keyframes secOrbPulse {
  0%   { opacity: .6; transform: scale(1) var(--orb-translate, translateZ(0)); }
  50%  { opacity: 1;  transform: scale(1.08) var(--orb-translate, translateZ(0)); }
  100% { opacity: .7; transform: scale(.96) var(--orb-translate, translateZ(0)); }
}
/* orb-c needs its own translate preserved */
.sec-orb-c {
  animation-name: secOrbPulseCenter;
}
@keyframes secOrbPulseCenter {
  0%   { opacity: .6; transform: translate(-50%,-50%) scale(1); }
  50%  { opacity: 1;  transform: translate(-50%,-50%) scale(1.08); }
  100% { opacity: .7; transform: translate(-50%,-50%) scale(.96); }
}

/* ── Enhanced step demos — bigger & more prominent ── */
.step-demo {
  min-height: 120px !important;
  margin-top: 16px !important;
  border-color: rgba(0,229,181,.18) !important;
  background: rgba(4,12,8,.6) !important;
  transition: border-color .25s, box-shadow .25s;
}
.step-card {
  position: relative;
  overflow: hidden;
}
/* Glow pulse behind step demo on hover */
.step-card:hover .step-demo {
  border-color: rgba(0,229,181,.35) !important;
  box-shadow: 0 0 32px rgba(0,229,181,.1), 0 2px 12px rgba(0,0,0,.3) !important;
}

/* ── Step demo app-chrome bar ── */
.sd-chrome-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.sd-chrome-dots {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.sd-chrome-dots span {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: .8;
}
.sd-chrome-label {
  flex: 1;
  font-size: .65rem;
  font-weight: 600;
  color: rgba(255,255,255,.4);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.sd-chrome-badge {
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  animation: sdChromeBadgePulse 2s ease-in-out infinite;
}
@keyframes sdChromeBadgePulse {
  0%,100% { opacity: .7; }
  50%      { opacity: 1; }
}

/* ── FAQ section: ensure position:relative for orb ── */
.faq-section {
  position: relative;
  overflow: hidden;
}

/* ── Mobile: hide glow orbs on small screens to save paint ── */
@media (max-width: 600px) {
  .sec-orb { display: none; }
  .sec-orb-c { display: none; }
}

/* ── Mobile: proof strip with 5 items stacks cleanly ── */
@media (max-width: 640px) {
  .proof-strip {
    gap: 14px;
  }
}

/* ── Mobile: FAQ show-more button ── */
@media (max-width: 480px) {
  .faq-more-btn {
    font-size: .8rem;
    padding: 9px 18px;
  }
}

/* ══════════════════════════════════════════════════════════════
   PREMIUM v8 — Share buttons, health disclaimer, extra orbs,
   Telegram/Email blog share, production micro-interactions
══════════════════════════════════════════════════════════════ */

/* ── Routine share row ─────────────────────────────────────── */
.rut-share-wrap {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.rut-share-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  flex-shrink: 0;
  margin-right: 2px;
}
.rut-share-btns {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  align-items: center;
}
.rut-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 8px;
  font-size: .74rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background .15s, border-color .15s, transform .1s;
  white-space: nowrap;
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.1);
  color: rgba(255,255,255,.75);
  font-family: var(--font-body);
}
.rut-share-btn:hover {
  transform: translateY(-1px);
}
.rut-share-wa { background: rgba(37,211,102,.1); border-color: rgba(37,211,102,.25); color: #25d366; }
.rut-share-wa:hover { background: rgba(37,211,102,.18); }
.rut-share-tg { background: rgba(0,136,204,.1); border-color: rgba(0,136,204,.25); color: #0088cc; }
.rut-share-tg:hover { background: rgba(0,136,204,.18); }
.rut-share-tw { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.8); }
.rut-share-tw:hover { background: rgba(255,255,255,.1); }
.rut-share-em { background: rgba(0,229,181,.08); border-color: rgba(0,229,181,.2); color: rgba(0,229,181,.85); }
.rut-share-em:hover { background: rgba(0,229,181,.14); }
.rut-share-cp { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); color: rgba(255,255,255,.6); }
.rut-share-cp:hover { background: rgba(255,255,255,.1); color: rgba(255,255,255,.85); }
@media (max-width: 480px) {
  .rut-share-wrap { gap: 8px; }
  .rut-share-btn { font-size: .7rem; padding: 6px 11px; }
}

/* ── Health disclaimer (below routine result) ──────────────── */
.health-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 20px;
  padding: 10px 14px;
  background: rgba(255,229,0,.03);
  border: 1px solid rgba(255,229,0,.1);
  border-radius: 8px;
  font-size: .72rem;
  color: rgba(255,255,255,.38);
  line-height: 1.55;
}
.health-disclaimer svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: rgba(255,229,0,.45);
}

/* ── Blog article share: Telegram + Email buttons ───────────── */
.article-share-btn.tg {
  background: rgba(0,136,204,.08);
  border-color: rgba(0,136,204,.2);
  color: #0088cc;
}
.article-share-btn.tg:hover { background: rgba(0,136,204,.15); }
.article-share-btn.em {
  background: rgba(0,229,181,.06);
  border-color: rgba(0,229,181,.2);
  color: rgba(0,229,181,.85);
}
.article-share-btn.em:hover { background: rgba(0,229,181,.12); }

/* ── New orb variants (science, equipment, vs) ─────────────── */
.vs-section,
.science-section,
.equipment-section {
  position: relative;
  overflow: hidden;
}
.sec-orb-d {
  width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(96,165,250,.09) 0%, transparent 70%);
  top: 10%; right: -80px;
  animation: secOrbPulse 11s ease-in-out infinite 2.5s;
}
.sec-orb-e {
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(167,139,250,.08) 0%, transparent 70%);
  bottom: 5%; left: -60px;
  animation: secOrbPulseCenter 9.5s ease-in-out infinite 1.8s;
}
.sec-orb-f {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(0,229,181,.07) 0%, transparent 70%);
  top: 30%; right: 10%;
  animation: secOrbPulse 13s ease-in-out infinite 0.8s;
}

/* ── Production micro-interactions ─────────────────────────── */

/* Focus rings — keyboard navigation visibility */
.btn-nxt:focus-visible,
.btn-prev:focus-visible,
.act-btn:focus-visible,
.chip-btn:focus-visible,
.btn:focus-visible {
  outline: 2px solid rgba(0,229,181,.7);
  outline-offset: 3px;
}
.faq-q:focus-visible {
  outline: 2px solid rgba(0,229,181,.5);
  outline-offset: 2px;
}

/* Active tap feedback on mobile */
.act-btn:active { transform: scale(.97); }
.btn-nxt:active { transform: scale(.97); }
.chip-btn:active { transform: scale(.97); }
.rut-share-btn:active { transform: scale(.97); }

/* Smooth section transitions with position:relative guard */
.science-section .sec-particles,
.equipment-section .sec-particles,
.vs-section .sec-particles {
  z-index: 0;
}

/* ── Production: CSP-friendly loading state for images ─────── */
img { color: transparent; }

/* ── Legal page: table responsive ──────────────────────────── */
.legal-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
  margin: 14px 0;
  overflow-x: auto;
  display: block;
}
.legal-body table th,
.legal-body table td {
  text-align: left;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.08);
  vertical-align: top;
}
.legal-body table th {
  background: rgba(0,229,181,.05);
  color: var(--green);
  font-weight: 700;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
}
.legal-body table tr:nth-child(even) td {
  background: rgba(255,255,255,.02);
}
@media (max-width: 480px) {
  .health-disclaimer { font-size: .68rem; padding: 8px 11px; }
  .sec-orb-d, .sec-orb-e, .sec-orb-f { display: none; }
}

/* ── EXIT INTENT POPUP ─────────────────────────────────────────────────────── */
#exit-intent-modal {
  transition: opacity .3s ease;
  opacity: 0;
}
#exit-intent-modal.visible {
  opacity: 1;
}
.exit-intent-overlay {
  position: absolute;
  inset: 0;
  background: rgba(6,10,8,.85);
  backdrop-filter: blur(6px);
}
.exit-intent-card {
  position: relative;
  z-index: 1;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 24px;
  padding: 44px 40px 36px;
  max-width: 420px;
  width: 90%;
  text-align: center;
  box-shadow: 0 32px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(57,255,140,.07);
  animation: exitCardIn .35s cubic-bezier(.16,1,.3,1) both;
}
@keyframes exitCardIn {
  from { transform: translateY(28px) scale(.96); opacity: 0; }
  to   { transform: translateY(0)    scale(1);   opacity: 1; }
}
.exit-intent-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  color: var(--white3);
  transition: var(--t);
}
.exit-intent-close:hover {
  color: var(--white);
  border-color: var(--border2);
}
.exit-intent-emoji {
  font-size: 3rem;
  margin-bottom: 16px;
  line-height: 1;
}
.exit-intent-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--white);
  margin-bottom: 12px;
  line-height: 1.15;
}
.exit-intent-body {
  font-size: .94rem;
  color: var(--white2);
  line-height: 1.65;
  margin-bottom: 26px;
}
.exit-intent-body strong {
  color: var(--green);
  font-weight: 700;
}
.exit-intent-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--green);
  color: var(--bg);
  border: none;
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 700;
  padding: 14px 32px;
  border-radius: var(--rs);
  cursor: pointer;
  transition: var(--t);
  margin-bottom: 14px;
  letter-spacing: .01em;
}
.exit-intent-btn:hover {
  background: var(--green2, #56ffac);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(57,255,140,.25);
}
.exit-intent-btn:active {
  transform: scale(.98);
}
.exit-intent-foot {
  font-size: .78rem;
  color: var(--white4);
  margin: 0;
}

/* ── STICKY CTA BAR — subtle pill, always visible on landing ──────────────── */
#sticky-cta-bar {
  display: block !important;
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;  /* corner position — less intrusive than center */
  left: auto !important;
  transform: translateY(calc(100% + 30px)) !important;  /* hidden off-screen */
  z-index: 500 !important;
  transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .35s ease !important;
  pointer-events: none;
  will-change: transform;
  opacity: 0;
}
#sticky-cta-bar.visible {
  transform: translateY(0) !important;
  pointer-events: auto;
  opacity: 1 !important;
}
.sticky-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Very subtle: dark glass with thin green border — almost ambient */
  background: rgba(6,10,8,.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(0,229,181,.22);
  color: rgba(237,245,241,.85);
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 50px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .22s ease, border-color .22s ease, transform .15s ease, color .22s ease;
  box-shadow: 0 2px 16px rgba(0,0,0,.35);
  letter-spacing: .01em;
}
.sticky-cta-btn svg { color: var(--green); opacity: .8; flex-shrink: 0; }
.sticky-cta-btn:hover {
  background: rgba(0,229,181,.12);
  border-color: rgba(0,229,181,.45);
  color: var(--white);
  transform: translateY(-1px);
}
.sticky-cta-btn:hover svg { opacity: 1; }
.sticky-cta-btn:active { transform: scale(.96); }

@media (max-width: 767px) {
  .exit-intent-card { padding: 36px 24px 28px; }
  /* On mobile: keep bottom-right position but above the bottom nav */
  #sticky-cta-bar {
    bottom: 76px !important;  /* above mobile nav */
    right: 14px !important;
  }
  .sticky-cta-btn {
    font-size: .78rem !important;
    padding: 9px 16px !important;
    gap: 6px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  #exit-intent-modal, .exit-intent-card { animation: none !important; transition: none !important; }
  #sticky-cta-bar { transition: none !important; }
}

/* ── PWA INSTALL BANNER ───────────────────────────────────────────────────── */
/* PWA install modal — slides up from bottom */
#pwa-install-banner {
  transform: translateY(100%);
  transition: transform .4s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
#pwa-install-banner.visible {
  transform: translateY(0);
  pointer-events: auto;
}
.pwa-modal-card {
  background: var(--bg2);
  border-top: 1px solid rgba(0,229,181,.15);
  border-radius: 20px 20px 0 0;
  padding: 20px 20px max(env(safe-area-inset-bottom, 0px), 16px);
  box-shadow: 0 -8px 40px rgba(0,0,0,.45);
  max-width: 520px;
  margin: 0 auto;
}
.pwa-modal-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.pwa-modal-icon {
  width: 48px; height: 48px;
  background: var(--green);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--bg);
}
.pwa-modal-features {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.pwa-feat {
  background: rgba(0,229,181,.08);
  border: 1px solid rgba(0,229,181,.15);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: .75rem;
  font-weight: 600;
  color: var(--green);
}
.pwa-banner-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 16px;
  padding: 12px 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.45), 0 0 0 1px rgba(57,255,140,.07);
  white-space: nowrap;
  max-width: min(96vw, 480px);
}
.pwa-banner-icon {
  width: 38px;
  height: 38px;
  background: var(--green);
  color: var(--bg);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pwa-banner-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.pwa-banner-text strong {
  font-size: .88rem;
  font-weight: 700;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pwa-banner-text span {
  font-size: .78rem;
  color: var(--white3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pwa-banner-btn {
  background: var(--green);
  color: var(--bg);
  border: none;
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  transition: var(--t);
}
.pwa-banner-btn:hover {
  background: var(--green2, #56ffac);
}
.pwa-banner-dismiss {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  color: var(--white4);
  flex-shrink: 0;
  transition: var(--t);
}
.pwa-banner-dismiss:hover { color: var(--white); border-color: var(--border2); }

/* ── MOBILE BOTTOM NAVIGATION ─────────────────────────────────────────────── */
#mobile-bottom-nav {
  display: none; /* hidden on desktop */
  top: auto !important;   /* CRITICAL: prevent inheriting top:0 from global nav{} selector */
  height: auto !important; /* prevent inheriting height:60px from global nav{} */
}
@media (max-width: 767px) {
  #mobile-bottom-nav {
    display: flex;
    position: fixed;
    /* Override top:0 and height:60px inherited from the global nav{} rule */
    top: auto !important;
    height: auto !important;
    bottom: 0 !important;
    left: 0;
    right: 0;
    z-index: 400;
    background: #0a0f0c;
    border-top: 1px solid rgba(0,229,181,.1);
    padding: 8px 4px max(env(safe-area-inset-bottom, 0px), 8px);
    justify-content: space-around;
    align-items: stretch;
    box-shadow: 0 -2px 16px rgba(0,0,0,.5);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  /* Add bottom padding to body to avoid content going under the nav */
  body { padding-bottom: 72px; }
}
.mob-nav-btn {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
  padding: 6px 4px;
  /* explicit dark background — never inherit or show white from blur stacking context */
  background: #0a0f0c;
  border: none;
  cursor: pointer;
  color: var(--white4);
  font-family: var(--font-body);
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  transition: color .2s ease, background .2s ease;
  border-radius: 10px;
  position: relative;
}
.mob-nav-btn:hover { color: var(--white2); }
.mob-nav-btn.active { color: var(--green); }
.mob-nav-btn.active svg { stroke: var(--green); }
/* Generate button gets special treatment */
.mob-nav-btn.mob-nav-gen {
  color: var(--bg);
  background: var(--green);
  border-radius: 14px;
  padding: 6px 12px;
  margin: -4px 4px;
  flex: 1.3;
}
.mob-nav-btn.mob-nav-gen svg { fill: var(--bg); }
.mob-nav-btn.mob-nav-gen span { color: var(--bg); }
.mob-nav-btn.mob-nav-gen:hover { background: var(--green2, #56ffac); }
/* Ensure sticky CTA bar doesn't overlap mobile nav */
@media (max-width: 767px) {
  /* Keep bottom above mobile nav; animation still uses transform translateY */
  #sticky-cta-bar { bottom: 76px !important; }
  #pwa-install-banner { bottom: 88px; }
}

/* ── SCIENTIFIC INSIGHT CARDS ────────────────────────────────────────────── */
.sci-insight-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(0, 229, 181, .06);
  border: 1px solid rgba(0, 229, 181, .18);
  border-radius: 12px;
  padding: 11px 14px;
  margin-bottom: 16px;
  animation: up .25s ease both;
  transition: border-color .2s ease;
}
.sci-insight-card:hover { border-color: rgba(0, 229, 181, .32); }
.sci-insight-card--sm { padding: 8px 12px; }
.sci-insight-icon {
  flex-shrink: 0;
  color: var(--green);
  opacity: .75;
  margin-top: 1px;
}
.sci-insight-body { flex: 1; min-width: 0; }
.sci-insight-label {
  font-size: .68rem;
  font-weight: 700;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 4px;
  opacity: .85;
}
.sci-insight-text {
  font-size: .8rem;
  color: var(--white3);
  line-height: 1.5;
  font-weight: 500;
}

/* ── FIELD HINT TEXT (below form fields) ─────────────────────────────────── */
.field-hint-text {
  font-size: .75rem;
  color: var(--white4);
  line-height: 1.5;
  margin: -6px 0 10px;
  font-style: italic;
}

/* ── FIELD SCIENCE BADGE ─────────────────────────────────────────────────── */
.field-sci-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(0, 229, 181, .1);
  border: 1px solid rgba(0, 229, 181, .2);
  color: var(--green);
  font-size: .65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: .04em;
  opacity: .85;
  flex-shrink: 0;
}

/* ── EQUIPMENT CHIPS LAYOUT ──────────────────────────────────────────────── */
.equip-chips { flex-wrap: wrap; gap: 6px; }
.equip-chips .chip-btn { flex: 1 1 calc(50% - 6px); min-width: 130px; }

/* ── FORM FIELD COMPLETION CHECKMARKS ────────────────────────────────────── */
.field-check {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%) scale(.7);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: rgba(57,255,140,.12);
  border: 1px solid rgba(57,255,140,.3);
  border-radius: 50%;
  color: var(--green);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.field-check.visible {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}
/* Position input padding to make room for checkmark */
.field input:not([type="range"]):not([type="hidden"]):not([type="checkbox"]) {
  padding-right: 36px;
}

/* ── PREFERS-REDUCED-MOTION UPDATES ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #pwa-install-banner { transition: none !important; }
  #mobile-bottom-nav .mob-nav-btn { transition: none !important; }
  .field-check { transition: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   UI VISUAL OVERHAUL — VS TABLE · CTA · FOOTER
══════════════════════════════════════════════════════════════ */

/* ── VS Table: Winner column header ──────────────────────────── */
.vs-winner-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.vs-winner-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, rgba(0,229,181,.25) 0%, rgba(0,229,181,.1) 100%);
  border: 1px solid rgba(0,229,181,.4);
  color: var(--green);
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 20px;
}
.vs-th-ours {
  position: relative;
}
.vs-th-ours::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
  border-radius: 3px 3px 0 0;
}

/* ── VS Table: SVG icon sizing ───────────────────────────────── */
.vs-td-check svg { display: block; }
.vs-td-cross svg { display: block; }

/* ── VS Table: ours column stronger glow on hover row ─────────── */
.vs-table tbody tr:hover .vs-td-ours {
  background: rgba(0,229,181,.1) !important;
}

/* ── CTA Social proof strip ──────────────────────────────────── */
.cta-social-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: 28px;
  padding: 16px 24px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
}
.cta-social-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 1;
}
.cta-social-num {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--green);
  letter-spacing: -.03em;
  line-height: 1;
}
.cta-social-label {
  font-size: .7rem;
  color: var(--white4);
  text-align: center;
  line-height: 1.3;
}
.cta-social-div {
  width: 1px;
  height: 32px;
  background: rgba(255,255,255,.1);
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .cta-social-strip { gap: 0; padding: 14px 16px; }
  .cta-social-num { font-size: 1.05rem; }
  .cta-social-label { font-size: .65rem; }
}

/* ── Footer: multi-column grid ───────────────────────────────── */
footer {
  padding: 56px 24px 32px !important;
  border-top: 1px solid rgba(0,229,181,.08) !important;
  background: linear-gradient(180deg, rgba(6,10,8,.0) 0%, rgba(6,10,8,1) 100%) !important;
}
footer.has-grid { text-align: left !important; }
.f-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 40px 32px;
  max-width: 900px;
  margin: 0 auto 40px;
  text-align: left;
}
.f-col-brand .f-brand {
  font-size: 1.2rem !important;
  margin-bottom: 10px !important;
}
.f-tagline {
  font-size: .8rem;
  color: var(--green);
  font-weight: 600;
  margin-bottom: 8px;
  opacity: .8;
}
.f-desc {
  font-size: .78rem;
  color: var(--white4);
  line-height: 1.6;
  margin-bottom: 16px;
  max-width: 240px;
}
.f-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.f-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(0,229,181,.06);
  border: 1px solid rgba(0,229,181,.14);
  color: var(--white3);
  font-size: .68rem;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 20px;
}
.f-trust-badge svg { color: var(--green); flex-shrink: 0; }
.f-col-title {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--white3);
  margin-bottom: 14px;
  opacity: .6;
}
.f-nav-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.f-nav-list a {
  font-size: .82rem;
  color: var(--white4);
  cursor: pointer;
  transition: color .2s ease;
  text-decoration: none;
  line-height: 1.4;
}
.f-nav-list a:hover { color: var(--green); }
/* Bottom bar */
.f-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.05);
  flex-wrap: wrap;
}
.f-bottom .f-copy { margin: 0 !important; font-size: .72rem !important; }
.f-bottom-langs {
  display: flex;
  gap: 4px;
}
.f-lang-btn {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--white4);
  font-size: .7rem;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 6px;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
  letter-spacing: .05em;
  font-family: var(--font-body);
}
.f-lang-btn:hover {
  color: var(--green);
  border-color: rgba(0,229,181,.3);
  background: rgba(0,229,181,.06);
}
@media (max-width: 680px) {
  .f-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px 20px;
  }
  .f-col-brand { grid-column: span 2; }
  .f-desc { max-width: 100%; }
}
@media (max-width: 420px) {
  .f-grid { grid-template-columns: 1fr; }
  .f-col-brand { grid-column: span 1; }
  .f-bottom { flex-direction: column; text-align: center; }
}

/* ── Hero: qualitative social proof row (above the fold) ─────────── */
.hero-sp-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 20px auto 0;
  padding: 7px 14px 7px 10px;
  background: rgba(0,229,181,.05);
  border: 1px solid rgba(0,229,181,.15);
  border-radius: 100px;
  cursor: default;
  animation: up .4s .3s ease both;
}
.hero-sp-avatars {
  display: flex;
  align-items: center;
}
.hero-sp-av {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  margin-left: -7px;
  flex-shrink: 0;
}
.hero-sp-avatars .hero-sp-av:first-child { margin-left: 0; }
.hero-sp-sep {
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,.12);
  flex-shrink: 0;
}
.hero-sp-text {
  font-size: .75rem;
  color: var(--white3);
  font-weight: 500;
  white-space: nowrap;
}
/* Pulsing green live dot */
.hero-sp-live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  animation: livePulse 2s ease-in-out infinite;
}
@keyframes livePulse {
  0%,100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(0,229,181,.5); }
  50%      { opacity: .85; transform: scale(1.15); box-shadow: 0 0 0 5px rgba(0,229,181,0); }
}
@media (max-width: 480px) {
  .hero-sp-text { font-size: .7rem; white-space: normal; text-align: center; }
  .hero-sp-row  { gap: 8px; padding: 6px 12px 6px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-sp-live { animation: none; }
  .hero-sp-row  { animation: none; }
}

/* ── Mobile nav: force-clean overrides (iOS Safari / WebKit reset) ── */
#mobile-bottom-nav .mob-nav-btn {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: #0a0f0c !important;   /* explicit dark — no white bleed-through */
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--white4) !important;
}
#mobile-bottom-nav .mob-nav-btn.mob-nav-gen {
  background: var(--green) !important;
  color: var(--bg) !important;
}
/* CTA social strip: icon-only version (no fake numbers) */
.cta-social-item svg { flex-shrink: 0; }

/* ── Cuenta / Settings page enhancements ─────────────────────────── */
.cc-lang-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 0 4px;
}
.cc-lang-btn {
  flex: 1;
  min-width: 90px;
  padding: 9px 12px;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 10px;
  color: var(--white3);
  font-size: .82rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
  text-align: center;
}
.cc-lang-btn:not(:disabled):hover {
  border-color: rgba(0,229,181,.3);
  color: var(--green);
  background: rgba(0,229,181,.06);
}
.cc-lang-btn.cc-lang-active {
  border-color: var(--green);
  color: var(--green);
  background: rgba(0,229,181,.08);
}
.cc-lang-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.cc-lang-cd {
  font-size: .75rem;
  color: var(--white4);
  margin: 8px 0 0;
  padding: 0;
}
.cc-action-btn {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border2);
  border-radius: 8px;
  color: var(--white3);
  font-size: .82rem;
  font-weight: 600;
  font-family: var(--font-body);
  padding: 6px 14px;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.cc-action-btn:hover {
  border-color: rgba(0,229,181,.3);
  color: var(--green);
  background: rgba(0,229,181,.06);
}
.cc-action-btn.danger:hover {
  border-color: rgba(248,113,113,.4);
  color: #f87171;
  background: rgba(239,68,68,.07);
}

/* ── Mobile user account bottom sheet ────────────────────────────── */
#mob-user-sheet {
  animation: sheetUp .28s cubic-bezier(.16,1,.3,1) both;
}
@keyframes sheetUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.mob-sheet-item {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 13px 20px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--white2);
  font-size: .9rem;
  font-weight: 500;
  font-family: var(--font-body);
  text-align: left;
  transition: background .15s ease, color .15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.mob-sheet-item svg {
  flex-shrink: 0;
  opacity: .65;
}
.mob-sheet-item:hover,
.mob-sheet-item:active {
  background: rgba(0,229,181,.06);
  color: var(--green);
}
.mob-sheet-item:hover svg,
.mob-sheet-item:active svg {
  opacity: 1;
  stroke: var(--green);
}

/* ══════════════════════════════════════════════════════════════
   VISUAL POLISH — PRODUCTION FINAL
══════════════════════════════════════════════════════════════ */

/* ── Announcement bar: single-line on mobile, elegant truncation ─ */
@media (max-width: 640px) {
  #announce-bar {
    padding: 8px 36px 8px 14px;
    font-size: .76rem;
  }
  #announce-bar .ann-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100vw - 80px);
  }
}

/* ── Feature cards: richer hover glow ────────────────────────── */
.feature-card {
  transition: transform .3s cubic-bezier(.16,1,.3,1),
              border-color .3s ease,
              box-shadow .3s ease !important;
}
.feature-card:hover {
  transform: translateY(-8px) scale(1.01) !important;
  border-color: rgba(0,229,181,.28) !important;
  box-shadow:
    0 24px 60px rgba(0,229,181,.09),
    0 8px 24px rgba(0,0,0,.3) !important;
}
@media (max-width: 640px) {
  .feature-card:hover { transform: none !important; }
}

/* ── FAQ accordion: smoother reveal ──────────────────────────── */
.faq-body {
  transition: max-height .4s cubic-bezier(.16,1,.3,1), padding .32s ease !important;
}
.faq-summary {
  padding: 16px 20px !important;
}
.faq-item { margin-bottom: 10px; }
.faq-item:last-child { margin-bottom: 0; }

/* ── VS winner chip: more premium ────────────────────────────── */
.vs-winner-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: rgba(0,229,181,.15) !important;
  color: var(--green) !important;
  font-size: .65rem !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  padding: 3px 8px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(0,229,181,.3) !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
}

/* ── Stats section: accent gradient on numbers ───────────────── */
.stat-n {
  background: linear-gradient(135deg, var(--white), var(--white2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Auth card entrance: consistently smooth on all pages ─────── */
.auth-card { box-shadow: 0 24px 64px rgba(0,0,0,.35); }

/* ── Btn loading state: spinner indicator ────────────────────── */
.btn.loading, .btn-nxt.loading {
  position: relative;
  pointer-events: none;
  opacity: .75;
}
.btn.loading::after, .btn-nxt.loading::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: translateY(-50%) rotate(360deg); } }

/* ── Hover cursor pointer on all interactive cards ───────────── */
.testi-card, .feature-card, .rut-row, .blog-card,
.equipment-card, .sci-insight-card { cursor: pointer; }

/* ── Nav active pill: clear indicator on current page ─────────── */
.nav-pill.active {
  background: rgba(0,229,181,.1) !important;
  border-color: rgba(0,229,181,.4) !important;
  color: var(--green) !important;
}

/* ── Form input labels: subtle weight ───────────────────────── */
.field label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  color: var(--white3);
  margin-bottom: 7px;
  letter-spacing: .02em;
}

/* ── Mobile: better tap target on list rows ─────────────────── */
@media (max-width: 640px) {
  .rut-row { padding: 14px 16px; min-height: 60px; }
  .act-btn  { min-height: 40px; padding: 9px 14px; }
}

/* ── Smooth divider between landing sections ────────────────── */
#landing-how, #landing-features, #landing-vs,
#landing-science, #landing-equipment,
#landing-testimonials, #landing-faq, #landing-cta {
  scroll-margin-top: 80px; /* anchor scroll offset for fixed nav */
}

/* ── Notification day selector ───────────────────────────── */
.notif-days-row {
  display: flex; gap: 6px; padding: 10px 0 4px; flex-wrap: wrap;
}
.notif-day-btn {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border2);
  background: var(--bg3); color: var(--white3);
  font-size: .75rem; font-weight: 700; cursor: pointer;
  font-family: var(--font-body); transition: all .2s ease;
  -webkit-appearance: none; appearance: none;
}
.notif-day-btn:hover { border-color: rgba(0,229,181,.3); color: var(--green); }
.notif-day-btn.active {
  background: var(--green); border-color: var(--green);
  color: var(--bg); box-shadow: 0 2px 8px rgba(0,229,181,.3);
}

/* ══════════════════════════════════════════════════════════════
   PREMIUM POLISH — PRODUCTION FINAL v2
   Comprehensive visual upgrades, fluidity & reliability fixes
══════════════════════════════════════════════════════════════ */

/* ── 0. Hero demo preview: PREMIUM wow factor upgrade ────────────────
   The demo card is the #1 conversion asset — make it stunning       */
.hero-demo-preview {
  background: linear-gradient(145deg,rgba(10,20,14,.98) 0%,rgba(7,14,10,1) 100%) !important;
  border: 1px solid rgba(0,229,181,.28) !important;
  box-shadow:
    0 40px 100px rgba(0,0,0,.65),
    0 0 0 1px rgba(0,229,181,.08) inset,
    0 -1px 0 rgba(0,229,181,.2) inset,
    0 40px 60px rgba(0,229,181,.04) !important;
}
.hero-demo-preview::before {
  background: linear-gradient(90deg,transparent,rgba(0,229,181,.6),transparent) !important;
  animation: hdpShimmer 3s ease-in-out infinite !important;
}
@keyframes hdpShimmer { 0%,100%{opacity:.4}50%{opacity:1} }
.hdp-ex {
  background: rgba(255,255,255,.025) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  transition: background .2s ease,border-color .2s ease,transform .2s ease !important;
}
.hdp-ex:hover {
  background: rgba(0,229,181,.05) !important;
  border-color: rgba(0,229,181,.15) !important;
  transform: translateX(3px) !important;
}
.hdp-num { background: rgba(0,229,181,.14) !important; border: 1px solid rgba(0,229,181,.2) !important; }
.hdp-ai-tag {
  background: rgba(0,229,181,.08) !important;
  border: 1px solid rgba(0,229,181,.2) !important;
  border-radius: 20px !important; padding: 4px 10px !important; opacity: 1 !important;
  animation: hdpAiPulse 2s ease-in-out infinite !important;
}
@keyframes hdpAiPulse { 0%,100%{box-shadow:0 0 0 0 rgba(0,229,181,.0)}50%{box-shadow:0 0 0 4px rgba(0,229,181,.12)} }
.hdp-prog-fill { animation: hdpProgFill 2s ease-out .5s both !important; }
@keyframes hdpProgFill { from{width:0} to{width:40%} }
.hdp-ex-name { color: var(--white) !important; font-size: .84rem !important; }
.hdp-ex-detail { color: var(--white3) !important; font-size: .71rem !important; }
.hdp-day { font-size: .8rem !important; padding: 5px 14px !important; }
.hdp-warmup-name { color: var(--white2) !important; }

/* ── 1. Global polish: smoother body scroll, better text rendering ─ */
html { scroll-behavior: smooth; }
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }

/* ── 2. Auth card: elevated glass effect + better hierarchy ──────── */
.auth-card {
  background: linear-gradient(160deg, rgba(13,22,16,.92) 0%, rgba(9,15,11,.96) 100%) !important;
  border: 1px solid rgba(0,229,181,.12) !important;
  box-shadow: 0 32px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.03), inset 0 1px 0 rgba(0,229,181,.07) !important;
}
.auth-title { font-size: 1.85rem !important; }

/* ── 3. Form field improvements: clearer borders & hover states ──── */
.field input, .field select, .field textarea {
  border-color: rgba(237,245,241,.1) !important;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease !important;
}
.field input:hover, .field select:hover, .field textarea:hover {
  border-color: rgba(237,245,241,.18) !important;
}

/* ── 4. Feature cards: richer depth + consistent icon sizing ─────── */
.feature-card {
  background: linear-gradient(150deg, rgba(11,18,13,.96) 0%, rgba(8,14,10,.98) 100%) !important;
  border-color: rgba(237,245,241,.06) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.02) !important;
}
.feature-icon {
  width: 46px !important; height: 46px !important;
  background: rgba(0,229,181,.08) !important;
  border: 1px solid rgba(0,229,181,.15) !important;
  border-radius: 12px !important;
}
.feature-title { font-size: 1.05rem !important; letter-spacing: -.02em !important; }

/* ── 5. Stat numbers: more premium gradient text ─────────────────── */
.stat-n {
  background: linear-gradient(135deg, #EDF5F1 0%, #00E5B5 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  letter-spacing: -.04em !important;
  filter: none !important;
}

/* ── 6. Progress bar in generator: more refined ──────────────────── */
.pb-step { font-size: .68rem !important; letter-spacing: .07em !important; }
.pb-step.active { color: var(--white) !important; }
.pb-num { font-size: .62rem !important; }

/* ── 7. Result action buttons: cleaner layout ───────────────────── */
.result-acts {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 28px !important;
}
.act-btn {
  border-radius: 10px !important;
  transition: background .2s ease, border-color .2s ease, transform .15s ease, box-shadow .2s ease !important;
}
.act-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.25) !important;
}
.act-btn.prim {
  box-shadow: 0 4px 16px rgba(0,229,181,.2) !important;
}
.act-btn.prim:hover {
  box-shadow: 0 6px 20px rgba(0,229,181,.3) !important;
}

/* ── 8. History rows: better visual feedback ─────────────────────── */
.rut-row {
  background: rgba(11,16,13,.6) !important;
  border: 1px solid rgba(237,245,241,.06) !important;
  border-radius: 12px !important;
  margin-bottom: 8px !important;
  transition: background .2s ease, border-color .2s ease, transform .2s ease !important;
}
.rut-row:hover {
  background: rgba(11,16,13,.9) !important;
  border-color: rgba(0,229,181,.15) !important;
  transform: translateX(3px) !important;
}

/* ── 9. Account/settings page boxes: consistent depth ───────────── */
.cc-box {
  background: linear-gradient(150deg, rgba(11,18,13,.9), rgba(9,14,11,.95)) !important;
  border-color: rgba(237,245,241,.07) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.2) !important;
  transition: border-color .2s ease !important;
}
.cc-box:hover { border-color: rgba(0,229,181,.1) !important; }
.cc-row {
  transition: background .15s ease !important;
  border-radius: 6px !important;
  padding: 11px 4px !important;
}
.cc-row:hover { background: rgba(255,255,255,.025) !important; }

/* ── 10. Modal overlays: smoother blur & entrance ───────────────── */
.modal-overlay {
  backdrop-filter: blur(12px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(150%) !important;
}

/* ── 11. Footer: cleaner divider + better spacing ───────────────── */
footer {
  border-top: 1px solid rgba(0,229,181,.08) !important;
  padding: 52px 24px 40px !important;
}
.f-brand { font-size: 1.1rem !important; }
.f-copy { letter-spacing: .01em !important; }

/* ── 12. Review/testimonial cards ───────────────────────────────── */
.testi-card {
  background: linear-gradient(150deg, rgba(11,18,13,.95), rgba(8,14,10,.98)) !important;
  border-color: rgba(237,245,241,.06) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.25) !important;
}
.testi-card:hover {
  border-color: rgba(0,229,181,.18) !important;
  box-shadow: 0 16px 48px rgba(0,229,181,.06), 0 4px 16px rgba(0,0,0,.35) !important;
}

/* ── 13. Blog article cards: richer presentation ────────────────── */
.blog-card {
  background: linear-gradient(150deg, rgba(11,18,13,.92), rgba(8,14,10,.96)) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.2) !important;
  transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .3s ease, box-shadow .3s ease !important;
}

/* ── 14. Page transition: smoother entry ────────────────────────── */
.page.active {
  animation: pageIn .28s cubic-bezier(.16,1,.3,1) both !important;
}
@keyframes pageIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .page.active { animation: none !important; }
}

/* ── 15. Loading spinner: glow effect ───────────────────────────── */
.spinner {
  border: 2px solid rgba(0,229,181,.15) !important;
  border-top-color: var(--green) !important;
  box-shadow: 0 0 12px rgba(0,229,181,.2) !important;
}

/* ── 16. VS comparison table: tighter mobile ────────────────────── */
@media (max-width: 480px) {
  .vs-table-wrap { margin: 20px -4px 0 !important; border-radius: 12px !important; }
}

/* ── 17. Generator form shell: elevated glass ───────────────────── */
.form-shell {
  background: linear-gradient(160deg, rgba(11,18,13,.92), rgba(8,14,10,.96)) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.02) !important;
}

/* ── 18. Mobile nav improvements: active indicator ──────────────── */
.mob-nav-btn.active span {
  color: var(--green) !important;
}
.mob-nav-btn { border-radius: 12px !important; transition: background .2s ease, color .2s ease !important; }
.mob-nav-btn:active { background: rgba(0,229,181,.08) !important; }

/* ── 19. Section headings: consistent spacing ───────────────────── */
.section-head { margin-bottom: 40px !important; }
.section-label { margin-bottom: 14px !important; }

/* ── 20. Input focus rings: more visible ────────────────────────── */
.finput:focus {
  border-color: var(--green) !important;
  box-shadow: 0 0 0 3px rgba(0,229,181,.12), 0 0 0 1px var(--green) !important;
}

/* ── 21. Button disabled states: clear feedback ─────────────────── */
.btn:disabled, .act-btn:disabled, .btn-nxt:disabled {
  opacity: .4 !important;
  cursor: not-allowed !important;
  filter: grayscale(.3) !important;
}

/* ── 22. Toast improvements: more readable ──────────────────────── */
#toast-stack {
  max-width: min(92vw, 380px) !important;
  gap: 10px !important;
}

/* ── 23. Mobile: hero section — hide demo preview to fix 1863px height ── */
@media (max-width: 640px) {
  /* The hero-demo-preview (747px on mobile) is the main cause of excessive height.
     Hide it on small screens — the content above is sufficient for conversion. */
  .hero-demo-preview { display: none !important; }
  .marquee-strip { margin-top: 8px !important; }
  .ai-engine-status { margin-top: 8px !important; }
  .hero { padding-top: 100px !important; padding-bottom: 48px !important; }
  .hero-h1 { font-size: clamp(2rem, 8vw, 2.8rem) !important; }
  .hero-p { font-size: .9rem !important; padding: 0 4px !important; }
}
@media (min-width: 641px) and (max-width: 900px) {
  /* Tablet: limit demo preview size */
  .hero-demo-preview { max-width: 380px !important; padding: 16px 18px 14px !important; }
}

/* ── 24. Tablet breakpoint refinements ──────────────────────────── */
@media (min-width: 641px) and (max-width: 1024px) {
  .auth-card { padding: 36px 36px !important; }
  .feature-card { padding: 26px 22px !important; }
}

/* ── 25. Captcha section: cleaner appearance ────────────────────── */
.captcha {
  border-radius: 12px !important;
  background: rgba(11,16,13,.7) !important;
}
.captcha-q {
  font-family: var(--font-display) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--green) !important;
  letter-spacing: -.01em !important;
}

/* ── 26. FAQ section: better open/close feedback ────────────────── */
.faq-item {
  transition: border-color .25s ease, box-shadow .25s ease, transform .2s ease !important;
}
.faq-item:hover { transform: translateX(2px) !important; }
.faq-item.open {
  border-color: rgba(0,229,181,.3) !important;
  box-shadow: 0 0 0 1px rgba(0,229,181,.08) inset !important;
}

/* ── 27. Hero trust badges: consistent size ─────────────────────── */
.trust-badge {
  height: 28px !important;
  border-radius: 20px !important;
  padding: 0 12px !important;
  font-size: .73rem !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

/* ── 28. Legal page: better typography ──────────────────────────── */
.legal-body h2 {
  margin-top: 2rem !important;
  margin-bottom: .75rem !important;
}
.legal-body p {
  line-height: 1.8 !important;
  margin-bottom: 1rem !important;
}

/* ── 29. Cookie banner: premium design ──────────────────────────── */
#cookie-banner {
  background: linear-gradient(160deg, rgba(9,15,11,.98), rgba(7,12,9,.99)) !important;
  border-top: 1px solid rgba(0,229,181,.1) !important;
  box-shadow: 0 -8px 40px rgba(0,0,0,.4) !important;
}

/* ── 30. Scroll position maintenance on page changes ────────────── */
.page { scroll-behavior: smooth; }

/* ── Accessibility: skip link, ARIA, color contrast ─────────── */

/* Skip to content — keyboard navigation */
.skip-to-content {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 9999;
  background: var(--green);
  color: var(--bg);
  font-weight: 700;
  font-size: .9rem;
  padding: 10px 18px;
  border-radius: 8px;
  text-decoration: none;
  transition: top .2s ease;
  font-family: var(--font-body);
}
.skip-to-content:focus {
  top: 16px;
}

/* Screen reader only — visually hidden but accessible */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Color contrast improvements — --white4 (#4A6058) is only ~3.1:1 on dark bg.
   Upgrade key text elements to --white3 (#8BADA0) minimum for WCAG AA */
.field label { color: var(--white2) !important; }
.flabel { color: var(--white2) !important; }
.captcha-label { color: var(--white2) !important; }
.hist-top .act-btn { color: var(--white2) !important; }
.cc-k { color: var(--white2) !important; }
.panel-desc { color: var(--white2) !important; }
.page-sub { color: var(--white2) !important; }
.auth-sub { color: var(--white2) !important; }

/* ══════════════════════════════════════════════════════════════
   WOW EFFECTS — amplified glow, cursor trail, sparkles, shimmer
══════════════════════════════════════════════════════════════ */

/* ── Hero glow orb: MUCH brighter ────────────────────────────── */
.hero-glow-orb {
  width: 900px !important;
  height: 600px !important;
  background: radial-gradient(ellipse at center,
    rgba(0,229,181,.18) 0%,
    rgba(0,229,181,.08) 35%,
    transparent 70%) !important;
  animation: glow-pulse 5s ease-in-out infinite !important;
}

/* ── Hero orbs: more visible, bigger, more saturated ─────────── */
.hero-orb:nth-child(1) {
  background: radial-gradient(circle, rgba(0,229,181,.22) 0%, transparent 70%) !important;
  filter: blur(50px) !important;
}
.hero-orb:nth-child(2) {
  background: radial-gradient(circle, rgba(0,196,154,.18) 0%, transparent 70%) !important;
  filter: blur(60px) !important;
}
.hero-orb:nth-child(3) {
  background: radial-gradient(circle, rgba(95,255,216,.15) 0%, transparent 70%) !important;
  filter: blur(45px) !important;
}

/* ── Cursor glow: more dramatic green orb ───────────────────── */
#cursor-glow {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 520px !important;
  height: 520px !important;
  background: radial-gradient(circle,
    rgba(0,229,181,.10) 0%,
    rgba(0,229,181,.05) 30%,
    transparent 65%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  mix-blend-mode: screen !important;
  will-change: transform !important;
  border-radius: 50% !important;
  margin-left: -260px !important;
  margin-top: -260px !important;
  transition: none !important;
}

/* ── CTA button: sparkle animation on hover ─────────────────── */
.cta-btn::before {
  content: '' !important;
  position: absolute !important;
  inset: -2px !important;
  border-radius: inherit !important;
  background: linear-gradient(135deg, transparent 40%, rgba(0,229,181,.4) 50%, transparent 60%) !important;
  background-size: 200% 200% !important;
  opacity: 0 !important;
  transition: opacity .3s ease !important;
}
.cta-btn:hover::before {
  opacity: 1 !important;
  animation: shine-sweep 1.2s ease infinite !important;
}
@keyframes shine-sweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Nav: subtle green glow on Empezar gratis hover ─────────── */
.nav-pill.solid {
  box-shadow: 0 2px 12px rgba(0,229,181,.25), 0 0 0 0 rgba(0,229,181,0) !important;
  transition: box-shadow .3s ease, transform .2s ease !important;
}
.nav-pill.solid:hover {
  box-shadow: 0 4px 20px rgba(0,229,181,.45), 0 0 40px rgba(0,229,181,.15) !important;
  transform: translateY(-1px) !important;
}

/* ── Section background: animated gradient shimmer zones ─────── */
#landing-vs::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: -50% !important;
  width: 200% !important; height: 100% !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,229,181,.03) 30%,
    rgba(0,229,181,.06) 50%,
    rgba(0,229,181,.03) 70%,
    transparent 100%) !important;
  background-size: 200% 100% !important;
  animation: section-shimmer 8s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
#landing-vs { position: relative !important; overflow: hidden !important; }
@keyframes section-shimmer {
  0%, 100% { background-position: 200% 0; opacity: .5; }
  50%       { background-position: -200% 0; opacity: 1; }
}

/* ── Feature cards: interactive glow zone on hover ──────────── */
.feature-card::after {
  content: '' !important;
  position: absolute !important;
  top: -100% !important; left: -100% !important;
  width: 300% !important; height: 300% !important;
  background: radial-gradient(circle at center,
    rgba(0,229,181,.12) 0%,
    transparent 60%) !important;
  opacity: 0 !important;
  transition: opacity .4s ease !important;
  pointer-events: none !important;
}
.feature-card:hover::after { opacity: 1 !important; }

/* ── Hero particles: brighter ────────────────────────────────── */
.hero-particles > * {
  opacity: 0.7 !important;
  filter: brightness(1.4) !important;
}

/* ── Stats: number glow on hover ─────────────────────────────── */
.stat:hover .stat-n {
  text-shadow: 0 0 20px rgba(0,229,181,.5), 0 0 40px rgba(0,229,181,.25) !important;
}

/* ── Badge: continuous sparkle pulse ────────────────────────── */
.badge {
  animation: badge-glow 3s ease-in-out infinite !important;
}
@keyframes badge-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,229,181,0); border-color: rgba(0,229,181,.2); }
  50%       { box-shadow: 0 0 12px rgba(0,229,181,.3), 0 0 24px rgba(0,229,181,.1); border-color: rgba(0,229,181,.5); }
}

/* ══════════════════════════════════════════════════════════════
   PRODUCTION AUDIT FIXES — bugs & UX improvements
══════════════════════════════════════════════════════════════ */

/* ── 1. Auth form: loading state clarity ────────────────────── */
.auth-card .btn.green:disabled {
  opacity: .55 !important;
  cursor: not-allowed !important;
  position: relative !important;
}
.auth-card .btn.green.loading::after {
  content: '' !important;
  position: absolute !important;
  right: 14px !important; top: 50% !important;
  width: 14px !important; height: 14px !important;
  border: 2px solid rgba(6,10,8,.3) !important;
  border-top-color: rgba(6,10,8,.9) !important;
  border-radius: 50% !important;
  animation: spin .7s linear infinite !important;
  transform: translateY(-50%) !important;
}

/* ── 2. Empty states: more elegant ──────────────────────────── */
.empty { text-align: center; padding: 48px 24px; }
.empty-i { display: flex; justify-content: center; margin-bottom: 16px; }
.empty-t {
  font-size: .95rem; color: var(--white3);
  line-height: 1.65; margin-bottom: 20px;
  max-width: 320px; margin-left: auto; margin-right: auto;
}

/* ── 3. Routine card share button: clear icon ────────────────── */
#btn-share-routine {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  transition: color .2s ease, border-color .2s ease, transform .2s ease !important;
}
#btn-share-routine:hover {
  color: var(--green) !important;
  border-color: rgba(0,229,181,.3) !important;
  transform: scale(1.04) !important;
}

/* ── 4. Blog article breadcrumb/back button ──────────────────── */
.blog-back-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 24px !important;
  color: var(--white3) !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  background: none !important;
  border: 1px solid rgba(237,245,241,.08) !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  cursor: pointer !important;
  transition: color .2s ease, border-color .2s ease, background .2s ease !important;
  font-family: var(--font-body) !important;
}
.blog-back-btn:hover {
  color: var(--white) !important;
  border-color: rgba(0,229,181,.25) !important;
  background: rgba(0,229,181,.05) !important;
}

/* ── 5. History search UI: consistent height ─────────────────── */
.hist-search-wrap input,
.hist-search-wrap select {
  height: 42px !important;
}

/* ── 6. Mobile tab bar active indicator: underline dot ──────── */
.mob-nav-btn.active::after {
  content: '' !important;
  position: absolute !important;
  bottom: -4px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 4px !important; height: 4px !important;
  border-radius: 50% !important;
  background: var(--green) !important;
}
.mob-nav-btn { position: relative !important; }

/* ── 7. Generator progress bar: step numbers cleaner ────────── */
.pb-step.done .pb-num {
  font-size: .55rem !important;
}
.pb-step.active .pb-num {
  box-shadow: 0 0 0 3px rgba(0,229,181,.2) !important;
}

/* ── 8. Announcement bar: dismiss button more accessible ─────── */
#announce-bar .ann-close {
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  transition: background .2s ease !important;
}
#announce-bar .ann-close:hover {
  background: rgba(255,255,255,.1) !important;
}

/* ── 9. Trust badges: consistent height & accessible focus ───── */
.trust-badge:focus-visible {
  outline: 2px solid var(--green) !important;
  outline-offset: 2px !important;
}

/* ── 10. Result actions: wrap gracefully on narrow screens ───── */
@media (max-width: 480px) {
  .result-acts { gap: 6px !important; }
  .act-btn { font-size: .78rem !important; padding: 7px 11px !important; }
  .act-btn.prim { min-width: 120px !important; }
}

/* ── 11. Review stars: larger tap target on mobile ──────────── */
@media (max-width: 640px) {
  #review-stars .rev-star { font-size: 2.2rem !important; padding: 4px !important; }
}

/* ── 12. Scroll progress bar in articles: premium look ──────── */
#art-progress-bar {
  height: 3px !important;
  background: linear-gradient(90deg, var(--green), rgba(0,229,181,.5)) !important;
  box-shadow: 0 0 8px rgba(0,229,181,.4) !important;
  transition: width .1s linear !important;
}

/* ── 13. Session timeout warning toast: more prominent ──────── */
/* Already handled by toast with border-left */

/* ── 14. PWA install features pills: better colors ──────────── */
.pwa-feat {
  font-size: .74rem !important;
}

/* ── 15. Skeleton shimmer: green-tinted for brand coherence ──── */
.skel-line {
  background: linear-gradient(90deg,
    rgba(0,229,181,.04) 0%,
    rgba(0,229,181,.10) 48%,
    rgba(0,229,181,.04) 100%) !important;
  background-size: 200% 100% !important;
  animation: skeletonShimmer 2s ease-in-out infinite !important;
}

/* ══════════════════════════════════════════════════════════════
   FLUIDITY & VISUAL POLISH v2 — production final
══════════════════════════════════════════════════════════════ */

/* ── Nav mobile: reduce padding + compact solid button ───────── */
@media (max-width: 480px) {
  nav:not(#mobile-bottom-nav) {
    padding: 0 14px !important;  /* was 28px — saves 28px */
  }
  /* Compact "Empezar gratis" / "Start free" / "Commencer" button */
  .nav-pill.solid {
    font-size: .75rem !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
  }
  /* Tighten lang-btn */
  .lang-btn {
    padding: 5px 8px !important;
    font-size: .75rem !important;
  }
  /* Reduce wordmark font on very small screens */
  .nav-wordmark { font-size: 1.05rem !important; }
}
@media (max-width: 380px) {
  /* Extreme small: hide wordmark text, keep logo only */
  .nav-wordmark { display: none !important; }
  nav:not(#mobile-bottom-nav) { padding: 0 12px !important; }
}

/* ══════════════════════════════════════════════════════════════
   TYPOGRAPHY SYSTEM REFINEMENT — multi-language safe
   Line-height, letter-spacing, hierarchy audit 2025-2026
══════════════════════════════════════════════════════════════ */

/* ── Body copy: optimal reading rhythm ──────────────────────── */
body { line-height: 1.7; -webkit-font-smoothing: antialiased; }
p { orphans: 2; widows: 2; }

/* ── Headings: tighter letter-spacing improves display weight ── */
h1, h2, h3, .hero-h1, .page-title, .panel-title, .section-h2,
.auth-title, .blog-hero-h1, .article-h1, .result-title {
  line-height: 1.08 !important;
  letter-spacing: -.025em !important;
}

/* ── Subheadings & descriptions: comfortable breathing room ─── */
.auth-sub, .page-sub, .panel-desc, .hero-p, .section-sub,
.blog-hero-p, .feature-desc, .faq-answer-text {
  line-height: 1.72 !important;
  word-spacing: .01em;
}

/* ── Small uppercase labels: more readable tracking ─────────── */
.flabel, .field label, .pb-step, .cc-head, .section-label,
.trust-badge, .stat-l, .ai-engine-chip {
  letter-spacing: .08em !important;
}

/* ── Blog article: premium reading typography ────────────────── */
.legal-body, .article-highlight {
  line-height: 1.82 !important;
  font-size: .94rem !important;
}
.article-highlight { font-size: .93rem !important; }

/* ── FR language: slightly reduced font-size to prevent overflow ─
   French words average 15-20% longer than Spanish               */
:lang(fr) .nav-pill.solid { font-size: .75rem !important; }
:lang(fr) .trust-badge { font-size: .63rem !important; }
:lang(fr) .act-btn { font-size: .76rem !important; }
:lang(fr) .btn.green { font-size: .9rem !important; }

/* ── EN: slightly tighter paragraphs (shorter avg word length) ─ */
:lang(en) .hero-p, :lang(en) .section-sub {
  max-width: 95% !important;
}

/* ── Prevent text orphans on mobile ─────────────────────────── */
@media (max-width: 640px) {
  .hero-p, .auth-sub, .panel-desc { text-wrap: balance; }
}

/* ══════════════════════════════════════════════════════════════
   2025-2026 VISUAL TRENDS — applied selectively
   Sources: Linear, Vercel, Framer, Raycast, Loom, Notion
══════════════════════════════════════════════════════════════ */

/* ── TREND 1: Bento grid feel on feature cards ───────────────
   Modern SaaS layouts use bento grids with variable card sizes
   and rich inner content. Depth via inner glow + content layers. */
.feature-card {
  background: linear-gradient(160deg,
    rgba(11,20,14,.97) 0%,
    rgba(8,14,10,.99) 100%) !important;
  /* Micro-border-highlight at top (common in 2025 SaaS) */
  border-top: 1px solid rgba(0,229,181,.12) !important;
  border-bottom: 1px solid rgba(255,255,255,.02) !important;
}

/* ── TREND 2: Glassmorphism 2.0 — frosted micro-surfaces ────── */
.auth-card, .pwa-modal-card {
  background: linear-gradient(160deg,
    rgba(10,18,12,.9) 0%,
    rgba(7,13,9,.95) 100%) !important;
}

/* ── TREND 3: Gradient text for key metrics (Linear-style) ─────
   Numbers and key stats with gradient text feel premium and modern */
.proof-n {
  background: linear-gradient(135deg, #EDF5F1 30%, #00E5B5 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── TREND 4: Refined section separators (Notion-style) ─────── */
#landing-how, #landing-overload, #landing-features,
#landing-vs, #landing-science, #landing-equipment,
#landing-testimonials, #landing-faq {
  border-top: 1px solid rgba(255,255,255,.04);
}

/* ── TREND 5: Interactive state persistence — active page pill ─ */
.nav-pill.active {
  background: rgba(0,229,181,.08) !important;
  border-color: rgba(0,229,181,.3) !important;
  color: var(--green) !important;
  box-shadow: 0 0 16px rgba(0,229,181,.08) !important;
}

/* ── TREND 6: Softer scroll-reveal (no jarring bounce) ─────────
   2025 motion design: subtle, 200-400ms, ease-out, not bounce */
.reveal {
  transition: opacity .45s ease, transform .45s ease !important;
  will-change: transform, opacity !important;
}
.reveal.visible { transition-timing-function: cubic-bezier(.16,1,.3,1) !important; }

/* ── TREND 7: Better empty states (Framer-inspired) ─────────── */
.empty {
  padding: 56px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
}
.empty-i {
  background: rgba(0,229,181,.06);
  border-radius: 16px;
  padding: 18px;
  border: 1px solid rgba(0,229,181,.1);
}
.empty-t {
  font-size: .9rem !important;
  color: var(--white3) !important;
  text-align: center !important;
  max-width: 280px !important;
  line-height: 1.65 !important;
}

/* ── TREND 8: Table/list hover interactions (linear.app feel) ── */
.rut-row {
  border-left: 3px solid transparent !important;
  transition: background .18s ease, border-left-color .18s ease, transform .18s ease !important;
}
.rut-row:hover {
  border-left-color: rgba(0,229,181,.35) !important;
  transform: translateX(4px) !important;
}

/* ── TREND 9: Refined CTA hierarchy ─────────────────────────── */
.cta-btn {
  /* Remove old glow animation — more refined without it */
  animation: none !important;
}
.cta-btn:hover { animation: none !important; }

/* ── TREND 10: Floating labels feel in forms ─────────────────── */
.field label {
  letter-spacing: .06em !important;
  font-size: .69rem !important;
  font-weight: 700 !important;
  color: var(--white3) !important;
  text-transform: uppercase !important;
}

/* ── Language confirm modal animation ──────────────────────── */
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

/* ── Smoother button press feedback ────────────────────────── */
.btn.green:active, .cta-btn:active, .act-btn.prim:active {
  transform: scale(.97) translateY(1px) !important;
  transition: transform .1s ease !important;
}
.nav-pill.solid:active { transform: scale(.96) !important; }

/* ── Input focus: instant visual response ───────────────────── */
.finput, .field input, .field select, .field textarea {
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}

/* ── Tooltip-like hover on trust badges ────────────────────── */
.trust-badge {
  transition: background .2s ease, border-color .2s ease, transform .15s ease !important;
}
.trust-badge:hover {
  background: rgba(0,229,181,.12) !important;
  border-color: rgba(0,229,181,.3) !important;
  transform: translateY(-1px) !important;
}

/* ── Announcement bar: single line on all mobile sizes ─────── */
@media (max-width: 767px) {
  #announce-bar {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-wrap: nowrap !important;
    padding-right: 40px !important;
  }
  #announce-bar .ann-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: calc(100vw - 80px);
  }
}

/* ── Mobile nav: active button brighter ────────────────────── */
.mob-nav-btn.active {
  background: rgba(0,229,181,.06) !important;
  border-radius: 12px !important;
}
.mob-nav-btn.active svg { stroke: var(--green) !important; }

/* ── Result actions: wrap nicely on small screens ──────────── */
@media (max-width: 480px) {
  .result-acts {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .act-btn.prim { grid-column: span 2 !important; }
}

/* ── Generator form: better step label ─────────────────────── */
.pb-step.active .pb-label {
  font-weight: 700 !important;
  color: var(--white) !important;
}

/* ── Error alerts: subtle entrance ─────────────────────────── */
.alert.err.show, .alert.ok.show {
  animation: alertIn .22s cubic-bezier(.16,1,.3,1) both !important;
}

/* ── Modal card: glass depth ────────────────────────────────── */
.auth-card, .cc-box, .form-shell {
  transition: box-shadow .3s ease !important;
}

/* ── Better separator lines ─────────────────────────────────── */
.user-dropdown-sep { opacity: .6 !important; }

/* ── Scroll-bar thin + green on hover ───────────────────────── */
::-webkit-scrollbar-thumb:hover { background: rgba(0,229,181,.55) !important; }

/* ── Mobile: tighter hero padding top ───────────────────────── */
@media (max-width: 640px) {
  .hero { padding-top: 80px !important; }
  .hero-inner { padding: 0 16px !important; }
  .hero-badge { margin-bottom: 20px !important; }
  .hero-copy .hero-sp-row { flex-wrap: wrap; gap: 6px; }
}

/* ── ──────────────────────────────────────────────────────────
   Print media: clean routine output for users who print ──────── */
@media print {
  body { background: #fff !important; color: #111 !important; }
  nav, #mobile-bottom-nav, #announce-bar, #sticky-cta-bar,
  #cookie-banner, #pwa-install-banner, .result-acts,
  footer, .nav-pill, .lang-btn { display: none !important; }
  #page-gen .result-section { display: block !important; }
  .result-section { page-break-inside: avoid; }
  .ses-card { border: 1px solid #ccc; margin-bottom: 16px; page-break-inside: avoid; }
  * { box-shadow: none !important; animation: none !important; transition: none !important; }
  a[href]::after { content: none; }
}