/* =====================================================================
   HOPLY — Landing system v7
   Inspirado en crisp.chat — pulido profesional 2026
   ✦ Inter Display + Inter
   ✦ Blanco puro + #fcfcfd surface
   ✦ Coral solid + neutros navy
   ✦ Stacked soft shadows
   ✦ Glassy buttons con press feedback
   ✦ Focus ring coral con halo
   ===================================================================== */

/* ---------- 0. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}
body {
  font-family: var(--f-sans);
  font-size: var(--s-body);
  line-height: 1.55;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01';
  overflow-x: hidden;
}
img, svg, video, picture { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; border: 0; background: 0; cursor: pointer; color: inherit; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; }
::selection { background: var(--c-accent); color: #fff; }
:focus-visible { outline: 3px solid var(--c-accent-glow); outline-offset: 2px; border-radius: 6px; }

/* ---------- 1. Tokens ---------- */
:root {
  /* Surfaces — pure light */
  --c-bg:        #ffffff;
  --c-surface:   #fcfcfd;
  --c-surface-2: #f7f8fa;
  --c-surface-3: #f0f2f5;

  /* Dark surfaces (CTA, footer accent) */
  --c-dark:          #0c111c;
  --c-dark-2:        #161c2c;
  --c-dark-elev:     #232a3d;

  /* Text — navy-tinted near-black */
  --c-text:      #0c111c;
  --c-text-2:    #344055;
  --c-text-3:    #5d6b98;
  --c-text-mute: #7d89b0;
  --c-text-on-dark:    #ffffff;
  --c-text-on-dark-2:  rgba(255,255,255,0.72);
  --c-text-on-dark-3:  rgba(255,255,255,0.50);

  /* Borders */
  --c-border:        #eaecf5;
  --c-border-strong: #dcdfea;
  --c-border-on-dark: rgba(255,255,255,0.08);

  /* Accent — coral solid */
  --c-accent:          #FF6B4A;
  --c-accent-hover:    #E55838;
  --c-accent-pressed:  #C2410C;
  --c-accent-border:   #E04F2D;
  --c-accent-on:       #ffffff;
  --c-accent-tint:     rgba(255, 107, 74, 0.10);
  --c-accent-tint-2:   rgba(255, 107, 74, 0.16);
  --c-accent-glow:     rgba(255, 107, 74, 0.22);

  /* Semantic */
  --c-success:       #16a34a;
  --c-success-tint:  rgba(22, 163, 74, 0.10);
  --c-warn:          #ea580c;
  --c-error:         #dc2626;
  --c-error-tint:    rgba(220, 38, 38, 0.08);

  /* Radii */
  --r-xs:   6px;
  --r-sm:   8px;
  --r:     10px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  20px;
  --r-2xl: 24px;
  --r-pill: 999px;

  /* Shadows — stacked soft */
  --sh-xs:  0 1px 2px rgba(12,17,28,0.04);
  --sh-sm:  0 2px 4px rgba(12,17,28,0.05), 0 1px 2px rgba(12,17,28,0.04);
  --sh:     0 4px 8px rgba(12,17,28,0.06), 0 2px 4px rgba(12,17,28,0.04);
  --sh-md:  0 8px 16px rgba(12,17,28,0.07), 0 3px 6px rgba(12,17,28,0.05);
  --sh-lg:  0 16px 32px rgba(12,17,28,0.08), 0 4px 8px rgba(12,17,28,0.05);
  --sh-xl:  0 24px 56px rgba(12,17,28,0.10), 0 8px 16px rgba(12,17,28,0.06);
  --sh-hero: 0 6px 6px rgba(0,0,0,0.025), 0 12px 32px rgba(0,0,0,0.07), 0 32px 80px rgba(0,0,0,0.08);
  --sh-halo: 0 0 0 6px rgba(255,255,255,0.65), 0 6px 6px rgba(0,0,0,0.025), 0 16px 40px rgba(0,0,0,0.10);

  /* Focus */
  --ring-focus: 0 0 0 3px var(--c-accent-glow);

  /* Motion */
  --e:      cubic-bezier(0.22, 1, 0.36, 1);
  --e-snap: cubic-bezier(0.4, 0, 0.2, 1);
  --d-fast: 150ms;
  --d:      220ms;
  --d-slow: 320ms;

  /* Type */
  --f-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --f-display: 'Inter Display', 'Inter', -apple-system, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type sizes (Crisp-aligned, fluid) */
  --s-hero:    clamp(40px, 5.6vw, 60px);
  --s-h2:      clamp(28px, 3.8vw, 42px);
  --s-h3:      clamp(20px, 2.2vw, 26px);
  --s-h4:      18px;
  --s-body:    16px;
  --s-body-sm: 15px;
  --s-caption: 14px;
  --s-micro:   12.5px;

  /* Layout */
  --nav-h: 72px;
  --container-w: 1240px;
  --container-w-narrow: 920px;
  --container-w-text: 720px;
  --section-py: clamp(72px, 9vw, 120px);
  --section-py-sm: clamp(48px, 6vw, 80px);
}

/* ---------- 2. Typography ---------- */
h1, h2, h3, h4, h5 {
  font-family: var(--f-display);
  color: var(--c-text);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
}
h1, .h1 {
  font-size: var(--s-hero);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.02;
}
h2, .h2 {
  font-size: var(--s-h2);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
}
h3, .h3 {
  font-size: var(--s-h3);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
h4 { font-size: var(--s-h4); font-weight: 600; letter-spacing: -0.012em; line-height: 1.3; }
p { line-height: 1.6; }
.lead {
  font-size: 19px;
  line-height: 1.55;
  color: var(--c-text-2);
  max-width: 640px;
}
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
.font-mono { font-family: var(--f-mono); }
.text-accent { color: var(--c-accent); }
.text-mute { color: var(--c-text-mute); }
.text-2 { color: var(--c-text-2); }
.text-3 { color: var(--c-text-3); }

/* ---------- 3. Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 24px;
}
.container--narrow { max-width: var(--container-w-narrow); }
.container--text   { max-width: var(--container-w-text); }
.section { padding-block: var(--section-py); position: relative; }
.section--sm { padding-block: var(--section-py-sm); }
.section--dark {
  background: var(--c-dark);
  color: var(--c-text-on-dark);
}
.section--surface { background: var(--c-surface); }
.section--surface-2 { background: var(--c-surface-2); }

/* Section header */
.s-head {
  max-width: 760px;
  margin-bottom: 56px;
}
.s-head--center { margin-inline: auto; text-align: center; }
.s-head h2 { margin-bottom: 14px; }
.s-head p { color: var(--c-text-2); font-size: 17px; max-width: 640px; }
.s-head--center p { margin-inline: auto; }

/* Eyebrow chip */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--c-accent);
  padding: 6px 12px;
  background: var(--c-accent-tint);
  border-radius: var(--r-pill);
  margin-bottom: 16px;
}
.eyebrow .dot {
  width: 6px; height: 6px;
  background: var(--c-accent);
  border-radius: 50%;
  display: inline-block;
}

/* ---------- 4. Buttons — glassy + press feedback ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border-radius: var(--r-md);
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  transition: background-color .15s linear, border-color .15s linear, color .15s linear, transform 0.1s linear, box-shadow .15s linear;
  cursor: pointer;
  border: 1px solid transparent;
  user-select: none;
  position: relative;
}
.btn:active { transform: translateY(1px); }
.btn--block { width: 100%; }
.btn--lg { height: 50px; padding: 0 22px; font-size: 15.5px; border-radius: 14px; }
.btn--sm { height: 36px; padding: 0 14px; font-size: 13.5px; border-radius: 8px; }
.btn .ico { width: 16px; height: 16px; transition: transform .2s var(--e); }
.btn--lg .ico { width: 18px; height: 18px; }

/* Primary — coral glassy */
.btn--primary {
  background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0)), var(--c-accent);
  border-color: var(--c-accent-border);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 1px 2px rgba(0,0,0,0.06);
}
.btn--primary:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0)), var(--c-accent-hover);
  border-color: var(--c-accent-pressed);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22), 0 4px 12px rgba(255,107,74,0.32);
}
.btn--primary:focus-visible {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22), var(--ring-focus);
  outline: none;
}

/* Dark — near-black */
.btn--dark {
  background: var(--c-dark);
  border-color: var(--c-dark);
  color: #fff;
}
.btn--dark:hover { background: var(--c-dark-2); border-color: var(--c-dark-2); }

/* Ghost — minimal */
.btn--ghost {
  background: transparent;
  border-color: var(--c-border-strong);
  color: var(--c-text);
}
.btn--ghost:hover { background: var(--c-surface); border-color: var(--c-text-mute); }

/* Subtle — light fill */
.btn--subtle {
  background: var(--c-surface);
  border-color: var(--c-border);
  color: var(--c-text);
}
.btn--subtle:hover { background: var(--c-surface-2); border-color: var(--c-border-strong); }

/* Link button */
.btn--link {
  background: transparent;
  border: none;
  color: var(--c-text);
  padding: 0;
  height: auto;
  font-weight: 500;
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.btn--link:hover { color: var(--c-accent); }
.btn--link:hover .ico { transform: translateX(2px); }

/* Arrow that translates on hover */
.btn:hover .ico.arrow { transform: translateX(3px); }

/* ---------- 5. Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--e), background-color .2s var(--e);
}
.nav.is-scrolled {
  border-bottom-color: var(--c-border);
  background: rgba(255,255,255,0.92);
}
.nav__inner {
  height: var(--nav-h);
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--c-text);
}
.nav__mark {
  display: inline-grid;
  place-items: center;
  width: 32px; height: 32px;
  background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0)), var(--c-accent);
  color: #fff;
  border-radius: 8px;
  font-weight: 700;
  font-size: 15px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2), 0 2px 6px rgba(255,107,74,0.30);
}
.nav__menu {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav__menu a {
  display: inline-flex;
  padding: 8px 14px;
  font-size: 14.5px;
  color: var(--c-text-2);
  font-weight: 500;
  border-radius: 8px;
  transition: color .15s var(--e), background-color .15s var(--e);
}
.nav__menu a:hover { color: var(--c-text); background: var(--c-surface); }
.nav__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav__signin {
  font-size: 14.5px;
  color: var(--c-text-2);
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 8px;
  transition: color .15s var(--e);
}
.nav__signin:hover { color: var(--c-accent); }
.nav__toggle {
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border-radius: 8px;
}
.nav__toggle:hover { background: var(--c-surface); }
.nav__toggle svg { width: 22px; height: 22px; color: var(--c-text); }
.nav__mobile {
  display: none;
  flex-direction: column;
  padding: 16px 24px 24px;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-bg);
  position: sticky;
  top: var(--nav-h);
  z-index: 99;
}
.nav__mobile.is-open { display: flex; }
.nav__mobile a {
  display: block;
  padding: 12px 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--c-text);
  border-bottom: 1px solid var(--c-border);
}
.nav__mobile-cta { margin-top: 16px; display: grid; gap: 10px; }

@media (max-width: 880px) {
  .nav__menu { display: none; }
  .nav__signin { display: none; }
  .nav__toggle { display: inline-flex; }
}

/* ---------- 6. Hero ---------- */
.hero {
  position: relative;
  padding: 80px 0 100px;
  overflow: hidden;
}
.hero::before {
  /* Subtle dot pattern */
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--c-border) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: 0 0;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 75%);
  opacity: 0.5;
  pointer-events: none;
}
.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 45% 55%;
  align-items: center;
  gap: 48px;
}
.hero__text { max-width: 540px; }
.hero h1 { margin: 14px 0 20px; }
.hero h1 .accent { color: var(--c-accent); }
.hero__sub {
  font-size: 19px;
  line-height: 1.55;
  color: var(--c-text-2);
  margin-bottom: 28px;
  max-width: 520px;
}
.hero__cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.hero__meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  font-size: 13.5px;
  color: var(--c-text-3);
}
.hero__meta strong { color: var(--c-text-2); font-weight: 500; }
.hero__meta .sep { width: 3px; height: 3px; background: var(--c-text-mute); border-radius: 50%; opacity: 0.5; }

/* Hero visual — floating mockup with stacked shadows, no browser chrome */
.hero__visual {
  position: relative;
}

/* ---------- 7. Webmock — chat widget over fake site ---------- */
.webmock {
  position: relative;
  border-radius: 16px;
  background: var(--c-surface);
  overflow: hidden;
  box-shadow: var(--sh-hero);
  border: 1px solid var(--c-border);
  aspect-ratio: 4 / 3;
}
.webmock__body {
  position: relative;
  width: 100%;
  height: 100%;
}
.webmock__site {
  padding: 24px 28px;
  height: 100%;
  background:
    radial-gradient(circle at 20% 20%, var(--c-accent-tint), transparent 50%),
    var(--c-surface);
}
.webmock__site-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 13.5px;
  color: var(--c-text-3);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--c-border);
}
.webmock__site-nav b {
  color: var(--c-text);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-right: 12px;
}
.webmock__site-nav .spacer { flex: 1; }
.webmock__site-nav .pill {
  padding: 4px 10px;
  background: var(--c-surface-2);
  border-radius: var(--r-pill);
  font-size: 12px;
}
.webmock__site-h {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--c-text);
  margin: 28px 0 6px;
}
.webmock__site-p {
  font-size: 14px;
  color: var(--c-text-3);
  margin-bottom: 18px;
}
.webmock__site-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.webmock__site-card {
  height: 100px;
  background: var(--c-surface-2);
  border-radius: 12px;
  position: relative;
}
.webmock__site-card .price {
  position: absolute;
  bottom: 10px; left: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text);
}

/* Chat widget overlay */
.webmock__chat {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 56%;
  max-width: 320px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--c-border);
  box-shadow: 0 8px 32px rgba(12,17,28,0.18), 0 2px 4px rgba(12,17,28,0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.webmock__chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface);
}
.webmock__chat-head .av {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-accent), #ff8e74);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 600;
  font-size: 13px;
  flex-shrink: 0;
}
.webmock__chat-head .name {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--c-text);
}
.webmock__chat-head .status {
  font-size: 11.5px;
  color: var(--c-success);
  display: flex;
  align-items: center;
  gap: 5px;
}
.webmock__chat-head .status::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--c-success);
  border-radius: 50%;
  display: inline-block;
}
.webmock__chat-head .x {
  margin-left: auto;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 6px;
  color: var(--c-text-mute);
}
.webmock__chat-head .x svg { width: 14px; height: 14px; }
.webmock__chat-msgs {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 240px;
  overflow: hidden;
}
.webmock__chat-row { display: flex; }
.webmock__chat-row--user { justify-content: flex-end; }
.webmock__bubble {
  max-width: 80%;
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.4;
}
.webmock__bubble--bot {
  background: var(--c-surface-2);
  color: var(--c-text);
  border-bottom-left-radius: 4px;
}
.webmock__bubble--user {
  background: var(--c-accent);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.webmock__action {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 12px;
  font-size: 12px;
  width: 100%;
}
.webmock__action-h {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--c-text-3);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.webmock__action-h .ok {
  color: var(--c-success);
  font-weight: 600;
}
.webmock__action-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--c-text);
  margin-bottom: 8px;
}
.webmock__action-row b { font-weight: 600; }
.webmock__action-row .date { color: var(--c-text-3); font-size: 12px; }
.webmock__action-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--c-accent);
  border-top: 1px solid var(--c-border);
  padding-top: 8px;
  margin-top: 4px;
  width: 100%;
}
.webmock__action-cta svg { width: 12px; height: 12px; }
.webmock__chat-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--c-border);
  background: var(--c-surface);
}
.webmock__chat-input .field {
  flex: 1;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  padding: 7px 11px;
  font-size: 12.5px;
  color: var(--c-text-mute);
}
.webmock__chat-input .send {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--c-accent);
  color: #fff;
  display: grid; place-items: center;
}
.webmock__chat-input .send svg { width: 14px; height: 14px; }

/* ---------- 8. Social proof bar (under hero CTA) ---------- */
.proof {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.proof__stars {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--c-text-2);
  font-weight: 500;
}
.proof__stars .stars {
  color: #f59e0b;
  letter-spacing: -1px;
  font-size: 14px;
}
.proof__sep { width: 1px; height: 16px; background: var(--c-border-strong); }
.proof__txt { font-size: 13.5px; color: var(--c-text-3); }
.proof__txt strong { color: var(--c-text-2); font-weight: 600; }

/* ---------- 9. Logos bar ---------- */
.logos {
  padding: 56px 0;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface);
}
.logos__label {
  text-align: center;
  font-size: 13px;
  color: var(--c-text-mute);
  letter-spacing: 0.04em;
  margin-bottom: 28px;
  text-transform: uppercase;
}
.logos__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  align-items: center;
  opacity: 0.85;
}
.logos__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--c-text-mute);
  transition: color .2s var(--e), opacity .2s var(--e);
}
.logos__item svg {
  width: 22px; height: 22px;
  color: var(--c-text-mute);
}
.logos__item:hover { color: var(--c-text-2); opacity: 1; }

/* ---------- 10. Features grid 3x2 (Crisp-style) ---------- */
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.feature {
  position: relative;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-2xl);
  padding: 28px;
  transition: border-color .2s var(--e), background-color .2s var(--e), transform .2s var(--e);
}
.feature:hover {
  background: var(--c-surface);
  border-color: var(--c-border-strong);
  transform: translateY(-2px);
}
.feature__icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--c-accent);
  margin-bottom: 20px;
}
.feature__icon svg { width: 32px; height: 32px; stroke-width: 1.5; }
.feature h3 {
  font-size: 19px;
  margin-bottom: 8px;
  letter-spacing: -0.015em;
}
.feature p {
  font-size: 14.5px;
  color: var(--c-text-2);
  line-height: 1.55;
}
.feature__mini {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--c-border);
  font-size: 12.5px;
  color: var(--c-text-mute);
}

/* ---------- 11. Steps (3 col with mockups) ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.step {
  position: relative;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-2xl);
  padding: 28px;
}
.step__num {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 16px;
}
.step h3 { font-size: 19px; margin-bottom: 6px; letter-spacing: -0.015em; }
.step p { font-size: 14.5px; color: var(--c-text-2); margin-bottom: 20px; }
.step__visual {
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 16px;
  min-height: 160px;
}

/* Dropzone mockup */
.dropzone { text-align: center; padding: 8px; }
.dropzone__icon {
  width: 36px; height: 36px;
  display: inline-grid; place-items: center;
  background: var(--c-accent-tint);
  color: var(--c-accent);
  border-radius: 10px;
  margin-bottom: 10px;
}
.dropzone__icon svg { width: 20px; height: 20px; }
.dropzone__txt {
  font-size: 13px;
  color: var(--c-text-3);
  margin-bottom: 12px;
}
.dropzone__txt b { color: var(--c-text); font-weight: 500; }
.dropzone__files {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}
.dropzone__file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  font-size: 12px;
  color: var(--c-text-2);
  font-family: var(--f-mono);
}
.dropzone__file svg { width: 12px; height: 12px; color: var(--c-text-mute); }

/* Config mockup */
.cfg { display: flex; flex-direction: column; gap: 10px; padding: 4px; }
.cfg__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  font-size: 12.5px;
}
.cfg__label { color: var(--c-text-2); }
.cfg__pill {
  padding: 3px 9px;
  background: var(--c-accent-tint);
  color: var(--c-accent);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
}
.cfg__slider {
  width: 64px; height: 6px;
  background: var(--c-surface-2);
  border-radius: 999px;
  position: relative;
}
.cfg__slider::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 65%;
  background: var(--c-accent);
  border-radius: 999px;
}
.cfg__slider::after {
  content: '';
  position: absolute;
  left: calc(65% - 6px); top: -3px;
  width: 12px; height: 12px;
  background: #fff;
  border: 2px solid var(--c-accent);
  border-radius: 50%;
}
.cfg__toggle {
  width: 32px; height: 18px;
  background: var(--c-accent);
  border-radius: 999px;
  position: relative;
}
.cfg__toggle::after {
  content: '';
  position: absolute;
  right: 2px; top: 2px;
  width: 14px; height: 14px;
  background: #fff;
  border-radius: 50%;
}
.cfg__toggle--off { background: var(--c-surface-3); }
.cfg__toggle--off::after { right: auto; left: 2px; }

/* Snippet mockup */
.snippet {
  position: relative;
  background: var(--c-dark);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  font-family: var(--f-mono);
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.88);
  overflow: hidden;
}
.snippet pre {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
}
.snippet .c-com { color: rgba(255,255,255,0.40); }
.snippet .c-key { color: #ff9d7a; }
.snippet .c-str { color: #8be9fd; }
.snippet__copy {
  position: absolute;
  top: 12px; right: 12px;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
  color: rgba(255,255,255,0.6);
  transition: background .15s var(--e);
}
.snippet__copy:hover { background: rgba(255,255,255,0.12); color: #fff; }
.snippet__copy svg { width: 14px; height: 14px; }

/* ---------- 12. Stats section ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding: 56px 40px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-2xl);
}
.stat {
  text-align: center;
}
.stat__num {
  font-family: var(--f-display);
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--c-text);
  line-height: 1;
  margin-bottom: 8px;
}
.stat__num .pct, .stat__num .x { color: var(--c-accent); }
.stat__lbl {
  font-size: 13.5px;
  color: var(--c-text-3);
}

/* ---------- 13. Bento (5 cards mixed sizes) ---------- */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.bento__card {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-2xl);
  padding: 24px;
  transition: border-color .2s var(--e);
  display: flex;
  flex-direction: column;
  min-height: 280px;
}
.bento__card:hover { border-color: var(--c-border-strong); }
.bento__card h3 {
  font-size: 18px;
  margin-bottom: 6px;
  letter-spacing: -0.015em;
}
.bento__card .descr {
  font-size: 14px;
  color: var(--c-text-2);
  margin-bottom: 20px;
  flex-grow: 0;
}
.bento__card .visual { margin-top: auto; }
.bento--1 { grid-column: span 4; }
.bento--2 { grid-column: span 2; }
.bento--3 { grid-column: span 2; }
.bento--4 { grid-column: span 2; }
.bento--5 { grid-column: span 2; }

/* Barchart */
.barchart__legend {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--c-text-3);
  margin-bottom: 18px;
}
.barchart__legend .dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 5px;
}
.barchart__legend .dot--ho { background: var(--c-accent); }
.barchart__legend .dot--ot { background: var(--c-text-mute); opacity: 0.5; }
.barchart {
  display: flex;
  gap: 18px;
  align-items: flex-end;
  height: 180px;
}
.barchart__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.barchart__col .barchart__bar {
  width: 20px;
  background: var(--c-surface-3);
  border-radius: 4px 4px 0 0;
}
.barchart__col .barchart__bar--hoply {
  background: var(--c-accent);
}
.barchart__col {
  flex-direction: row;
  align-items: flex-end;
  gap: 4px;
}
.barchart__col .barchart__label {
  position: absolute;
}
.barchart__col {
  flex-direction: column;
  position: relative;
  flex: 1;
}
.barchart__col .barchart__label {
  position: static;
  font-size: 11px;
  color: var(--c-text-mute);
  margin-top: 6px;
}

/* Languages chips */
.langs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.langs__chip {
  font-size: 12px;
  font-weight: 500;
  padding: 5px 9px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  color: var(--c-text-2);
  font-family: var(--f-mono);
}
.langs__more {
  background: var(--c-accent-tint);
  color: var(--c-accent);
  border-color: transparent;
  font-family: var(--f-sans);
}

/* Handoff diagram */
.handoff {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 24px 0;
}
.handoff__node {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 600;
  font-size: 14px;
  position: relative;
  z-index: 2;
}
.handoff__node--bot {
  background: var(--c-accent-tint);
  color: var(--c-accent);
  border: 1px solid var(--c-accent);
}
.handoff__node--human {
  background: #fff;
  color: var(--c-text);
  border: 1px solid var(--c-text);
}
.handoff__line {
  width: 60px;
  height: 1px;
  border-top: 1.5px dashed var(--c-border-strong);
  margin: 0 -8px;
  position: relative;
  z-index: 1;
}
.handoff__label {
  position: absolute;
  top: calc(50% + 32px);
  font-size: 11.5px;
  color: var(--c-text-mute);
}
.handoff__label--bot { left: 18%; }
.handoff__label--human { right: 18%; }

/* Learner */
.learner { display: flex; flex-direction: column; gap: 8px; }
.learner__doc {
  display: grid;
  grid-template-columns: 1fr 60px 36px;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  background: var(--c-surface);
  border-radius: 8px;
  font-size: 12.5px;
}
.learner__doc .name { color: var(--c-text); font-family: var(--f-mono); font-size: 11.5px; }
.learner__doc .bar {
  height: 4px;
  background: var(--c-surface-3);
  border-radius: 999px;
  position: relative;
}
.learner__doc:nth-child(1) .bar::before { width: 100%; background: var(--c-success); }
.learner__doc:nth-child(2) .bar::before { width: 87%; background: var(--c-accent); }
.learner__doc:nth-child(3) .bar::before { width: 42%; background: var(--c-warn); }
.learner__doc .bar::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  border-radius: 999px;
}
.learner__doc .pct {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--c-text-mute);
  font-size: 11.5px;
}

/* Minidash */
.minidash {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.minidash__stat {
  padding: 12px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 12px;
}
.minidash__stat .l { font-size: 11.5px; color: var(--c-text-mute); text-transform: uppercase; letter-spacing: 0.04em; }
.minidash__stat .v {
  font-size: 26px;
  font-weight: 600;
  color: var(--c-text);
  letter-spacing: -0.02em;
  margin: 6px 0 4px;
  font-family: var(--f-display);
}
.minidash__stat .d { font-size: 12px; color: var(--c-success); font-weight: 500; }

/* ---------- 14. Compare table ---------- */
.compare {
  border: 1px solid var(--c-border);
  border-radius: var(--r-2xl);
  overflow: hidden;
  background: var(--c-bg);
}
.compare__row {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  border-bottom: 1px solid var(--c-border);
}
.compare__row:last-child { border-bottom: 0; }
.compare__row--head {
  background: var(--c-surface);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-text-mute);
  font-weight: 600;
}
.compare__row--head > div {
  padding: 14px 18px;
}
.compare__row--head .col-hoply {
  color: var(--c-accent);
  background: var(--c-accent-tint);
}
.compare__label {
  padding: 14px 18px;
  font-size: 14.5px;
  color: var(--c-text);
  font-weight: 500;
}
.compare__cell {
  padding: 14px 18px;
  font-size: 14px;
  color: var(--c-text-2);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-left: 1px solid var(--c-border);
}
.compare__cell--hoply {
  color: var(--c-accent);
  font-weight: 600;
  background: var(--c-accent-tint);
}
.compare__yes { width: 18px; height: 18px; color: var(--c-success); }
.compare__no { width: 16px; height: 16px; color: var(--c-text-mute); }

/* ---------- 15. Testimoniales grid ---------- */
.testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.testimonial-card {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: border-color .2s var(--e), transform .2s var(--e);
}
.testimonial-card:hover {
  border-color: var(--c-border-strong);
  transform: translateY(-2px);
}
.testimonial-card__quote {
  font-size: 16px;
  line-height: 1.55;
  color: var(--c-text);
  flex: 1;
}
.testimonial-card__quote strong { font-weight: 600; }
.testimonial-card__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--c-border);
}
.testimonial-card__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-accent), #ff9572);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 15px;
  flex-shrink: 0;
}
.testimonial-card__avatar--alt1 {
  background: linear-gradient(135deg, #5B6EF5, #8B5CF6);
}
.testimonial-card__avatar--alt2 {
  background: linear-gradient(135deg, #16a34a, #4ade80);
}
.testimonial-card__meta { flex: 1; min-width: 0; }
.testimonial-card__name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--c-text);
}
.testimonial-card__role {
  font-size: 12.5px;
  color: var(--c-text-3);
}
.testimonial-card__logo {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.01em;
  color: var(--c-text-mute);
  margin-left: auto;
}

/* Standalone hero testimonial */
.testimonial {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
  padding: 56px 40px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-2xl);
}
.testimonial__quote {
  font-family: var(--f-display);
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.4;
  color: var(--c-text);
  letter-spacing: -0.015em;
  margin-bottom: 32px;
}
.testimonial__quote strong { font-weight: 600; }
.testimonial__author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.testimonial__avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-accent), #ff9572);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 600;
  font-size: 16px;
}
.testimonial__meta { text-align: left; }
.testimonial__name { font-size: 15px; font-weight: 600; color: var(--c-text); }
.testimonial__role { font-size: 13px; color: var(--c-text-3); }

/* ---------- 16. Pricing ---------- */
.toggle-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}
.bill-toggle {
  display: inline-flex;
  padding: 4px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  position: relative;
}
.bill-toggle__opt {
  position: relative;
  z-index: 2;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-text-2);
  border-radius: var(--r-pill);
  transition: color .2s var(--e);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.bill-toggle__opt.is-active {
  background: #fff;
  color: var(--c-text);
  box-shadow: var(--sh-sm);
}
.bill-toggle__opt .save {
  background: var(--c-accent-tint);
  color: var(--c-accent);
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
}

.plans {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.plan {
  position: relative;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-2xl);
  padding: 28px;
  display: flex;
  flex-direction: column;
  transition: border-color .2s var(--e), transform .2s var(--e);
}
.plan:hover {
  border-color: var(--c-border-strong);
}
.plan--featured {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-tint), var(--sh-md);
}
.plan__badge {
  position: absolute;
  top: 0; right: 24px;
  transform: translateY(-50%);
  background: var(--c-accent);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-sm);
}
.plan__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 8px;
}
.plan__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 6px;
}
.plan__price .amt {
  font-family: var(--f-display);
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--c-text);
  line-height: 1;
}
.plan__price .per {
  font-size: 13.5px;
  color: var(--c-text-3);
}
.plan__tag {
  font-size: 13px;
  color: var(--c-text-3);
  margin-bottom: 24px;
}
.plan__cta { margin-bottom: 20px; }
.plan__features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--c-border);
}
.plan__features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--c-text-2);
}
.plan__features svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--c-accent);
  margin-top: 2px;
}

/* ---------- 17. CTA dark (pre-footer) ---------- */
.cta {
  background: var(--c-dark);
  color: var(--c-text-on-dark);
  border-radius: var(--r-2xl);
  padding: 80px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin: 0 24px;
}
.cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000, transparent);
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000, transparent);
  pointer-events: none;
}
.cta::after {
  content: '';
  position: absolute;
  bottom: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 300px;
  background: radial-gradient(ellipse at top, var(--c-accent) 0%, transparent 70%);
  opacity: 0.18;
  pointer-events: none;
}
.cta__inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.cta__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--c-accent);
  background: rgba(255,107,74,0.15);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  margin-bottom: 24px;
}
.cta h2 {
  color: #fff;
  font-size: clamp(32px, 4vw, 48px);
  margin-bottom: 16px;
}
.cta__sub {
  font-size: 18px;
  color: var(--c-text-on-dark-2);
  margin-bottom: 32px;
}
.cta__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.cta .btn--ghost {
  color: #fff;
  border-color: rgba(255,255,255,0.2);
}
.cta .btn--ghost:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.4);
}
.cta__fineprint {
  font-size: 13px;
  color: var(--c-text-on-dark-3);
}

/* ---------- 18. Footer ---------- */
.footer {
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  padding: 64px 0 32px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 48px;
  margin-bottom: 56px;
}
.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.footer__brand .nav__brand { font-size: 18px; }
.footer__tagline {
  font-size: 14px;
  color: var(--c-text-3);
  line-height: 1.5;
  max-width: 280px;
}
.footer__social {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.footer__social a {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  display: grid; place-items: center;
  color: var(--c-text-3);
  transition: color .15s var(--e), border-color .15s var(--e);
}
.footer__social a:hover { color: var(--c-accent); border-color: var(--c-accent); }
.footer__social svg { width: 16px; height: 16px; }
.footer__col h4 {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-text-mute);
  margin-bottom: 14px;
}
.footer__col ul { display: flex; flex-direction: column; gap: 10px; }
.footer__col a {
  font-size: 14px;
  color: var(--c-text-2);
  transition: color .15s var(--e);
}
.footer__col a:hover { color: var(--c-accent); }
.footer__bottom {
  border-top: 1px solid var(--c-border);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.footer__legal { font-size: 13px; color: var(--c-text-mute); }
.footer__legal a { color: inherit; }
.footer__legal a:hover { color: var(--c-text-2); }
.footer__country {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--c-text-3);
}
.footer__country .flag { font-size: 14px; }
.footer__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--c-text-3);
  padding: 4px 10px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
}
.footer__status::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--c-success);
  border-radius: 50%;
}

/* ---------- 19. FAQ accordion ---------- */
.faq { max-width: 760px; margin: 0 auto; }
.faq__item {
  border-bottom: 1px solid var(--c-border);
}
.faq__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 20px 0;
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  color: var(--c-text);
  cursor: pointer;
}
.faq__q::after {
  content: '+';
  font-size: 22px;
  font-weight: 400;
  color: var(--c-text-mute);
  transition: transform .25s var(--e);
}
.faq__item.is-open .faq__q::after { transform: rotate(45deg); }
.faq__a {
  max-height: 0;
  overflow: hidden;
  font-size: 15px;
  color: var(--c-text-2);
  line-height: 1.6;
  transition: max-height .3s var(--e), padding .3s var(--e);
}
.faq__item.is-open .faq__a {
  max-height: 400px;
  padding-bottom: 20px;
}

/* ---------- 20. Tabbed feature explorer ---------- */
.tabbed {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 48px;
  align-items: center;
}
.tabbed__nav { display: flex; flex-direction: column; gap: 8px; }
.tabbed__tab {
  padding: 18px 22px;
  border-radius: var(--r-lg);
  border: 1px solid transparent;
  cursor: pointer;
  text-align: left;
  transition: background-color .2s var(--e), border-color .2s var(--e);
}
.tabbed__tab:hover { background: var(--c-surface); }
.tabbed__tab.is-active {
  background: var(--c-surface);
  border-color: var(--c-border);
}
.tabbed__tab h3 { font-size: 17px; margin-bottom: 4px; }
.tabbed__tab p { font-size: 14px; color: var(--c-text-3); }
.tabbed__tab.is-active h3 { color: var(--c-accent); }
.tabbed__visual {
  position: relative;
  aspect-ratio: 4/3;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: var(--sh-md);
}

/* ---------- 21. Animations ---------- */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.scroll-reveal,
.scroll-reveal-stagger > * {
  opacity: 1;
  transform: none;
  transition: opacity .6s var(--e), transform .6s var(--e);
}
.scroll-reveal.is-visible,
.scroll-reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}
.scroll-reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.scroll-reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 60ms; }
.scroll-reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 120ms; }
.scroll-reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 180ms; }
.scroll-reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 240ms; }
.scroll-reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 300ms; }
@media (prefers-reduced-motion: reduce) {
  .scroll-reveal,
  .scroll-reveal-stagger > * { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- 22. Utilities ---------- */
.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }
.flex { display: flex; gap: 8px; align-items: center; }
.flex-col { display: flex; flex-direction: column; gap: 8px; }
.hidden { display: none !important; }

/* ---------- 23. Responsive ---------- */
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; gap: 32px; }
  .hero__text { max-width: 100%; }
  .features { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .testimonials { grid-template-columns: 1fr 1fr; }
  .plans { grid-template-columns: repeat(2, 1fr); }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento__card { grid-column: span 1; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .tabbed { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .features { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .testimonials { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; gap: 20px; padding: 32px 20px; }
  .compare__row { grid-template-columns: 1.4fr 1fr; }
  .compare__cell:nth-child(n+4) { display: none; }
  .compare__row--head > div:nth-child(n+4) { display: none; }
  .cta { padding: 56px 24px; margin: 0 16px; border-radius: var(--r-lg); }
  .footer__grid { grid-template-columns: 1fr; gap: 32px; margin-bottom: 32px; }
  .footer__brand { grid-row: 1; }
  .container { padding: 0 16px; }
  .webmock__chat { width: 70%; }
}