/* ==========================================================================
   Recepta landing: self-contained styles, no external fonts/CDNs
   Design system: matches the Recepta dashboard (see DESIGN-NOTES.md)
   ========================================================================== */

:root {
  /* Brand */
  --brand-50:  #eef8f2;
  --brand-100: #d7efe0;
  --brand-500: #12995F;
  --brand-600: #0B7A4B;
  --brand-700: #085F3B;

  /* Ink / neutrals (warm, not blue-grey) */
  --ink-900: #10160F;
  --ink-700: #38423A;
  --ink-500: #6B7568;
  --ink-300: #A9B1A4;
  --ink-100: #E4E8E1;
  --ink-50:  #F7F8F7;
  --surface: #FFFFFF;

  /* Semantic */
  --success:    #0B7A4B;
  --success-bg: #E4F5EC;
  --warning:    #9A6B0A;
  --warning-bg: #FBF1DC;
  --danger:     #B23A34;
  --danger-bg:  #FBEAE9;
  --info:       #2D5FB2;
  --info-bg:    #E9F0FC;

  --accent-violet:    #6D5BD0;
  --accent-violet-bg: #EFECFB;

  /* WhatsApp bubble colors (authentic) */
  --wa-bg: #E5DDD5;
  --wa-in: #FFFFFF;
  --wa-out: #D9FDD3;

  /* Type */
  --text-xs: 12px;   --text-sm: 13px;   --text-base: 14.5px;
  --text-md: 16px;   --text-lg: 20px;   --text-xl: 24px;

  /* Warm paper (editorial upgrade: was flat --ink-50 gray, now a warmer bone-paper tone) */
  --paper: #F8F7F2;

  /* Radius / elevation */
  --radius-sm: 8px;  --radius-md: 12px;  --radius-lg: 16px;  --radius-full: 999px;
  --shadow-xs: 0 1px 2px rgba(16,22,15,0.04);
  --shadow-sm: 0 1px 2px rgba(16,22,15,0.04), 0 4px 12px rgba(16,22,15,0.05);
  --shadow-md: 0 2px 4px rgba(16,22,15,0.05), 0 12px 24px rgba(16,22,15,0.08);
  --shadow-lg: 0 8px 16px rgba(16,22,15,0.07), 0 24px 48px rgba(16,22,15,0.12);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Devanagari", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink-900);
  background: var(--paper);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; display: block; }

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3 { line-height: 1.15; margin: 0; letter-spacing: -0.02em; font-weight: 700; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--brand-700);
  background: var(--brand-50);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  margin-bottom: 18px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  border-radius: var(--radius-full);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition-property: scale, transform, box-shadow, background, color, border-color;
  transition-duration: 0.15s;
  transition-timing-function: ease-out;
  white-space: nowrap;
  font-family: var(--font);
}
.btn:active { scale: 0.96; }
.btn-primary {
  background: var(--brand-600);
  color: #fff;
  box-shadow: 0 6px 16px rgba(11, 122, 75, 0.28);
}
.btn-primary:hover { background: var(--brand-700); transform: translateY(-1px); }
.btn-ghost {
  background: transparent;
  color: var(--ink-900);
  border-color: var(--ink-100);
}
.btn-ghost:hover { background: var(--surface); border-color: var(--ink-300); }
.btn-outline {
  background: #fff;
  color: var(--brand-700);
  border-color: var(--brand-600);
}
.btn-outline:hover { background: var(--brand-50); }
.btn-sm { padding: 9px 18px; font-size: var(--text-sm); }
.btn-lg { padding: 15px 28px; font-size: var(--text-md); }
.btn-block { width: 100%; padding: 13px 20px; font-size: 15px; }

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 248, 247, 0.9);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.nav.is-scrolled {
  border-bottom-color: var(--ink-100);
  box-shadow: var(--shadow-xs);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
  gap: 20px;
}
.brand, .footer-brand {
  display: flex;
  align-items: center;
  font-weight: 800;
}
.brand img, .footer-brand img { height: 24px; width: auto; }

/* --- Wordmark (Task 3): a confident Fraunces serif wordmark, rendered as
   real HTML text so the brand webfont always applies (an SVG <img> never
   loads external fonts, which is why the old wordmark looked plain). The
   lotus mark is inline SVG so it aligns optically to the text baseline. Used
   identically on landing header/footer and the dashboard sidebar/topbar. --- */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
  text-decoration: none;
}
.wordmark-mark { display: block; flex: none; }
.wordmark-mark svg { display: block; }
.wordmark-text {
  font-family: var(--display, 'Fraunces', Georgia, serif);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.018em;
  color: var(--ink-900);
  /* optical baseline nudge so the serif sits centred against the 26px mark */
  transform: translateY(0.5px);
}
/* The site header sits on the dark green bar (and over the dark hero), so its
   wordmark must be light. The footer + waitlist modal keep the dark default
   (they sit on light/their own contexts). */
.brand .wordmark-text { color: #fff; }
.footer-brand .wordmark-text { color: #F4FBEF; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--ink-700);
}
.nav-links a:hover { color: var(--brand-700); }
.nav-actions { display: flex; align-items: center; gap: 14px; }
.lang-toggle {
  background: var(--surface);
  border: 1px solid var(--ink-100);
  color: var(--ink-700);
  font-weight: 700;
  font-size: var(--text-sm);
  padding: 8px 14px;
  min-height: 40px;
  border-radius: var(--radius-full);
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font);
  transition-property: background, color;
  transition-duration: 0.15s;
  transition-timing-function: ease-out;
}
.lang-toggle:hover { background: var(--brand-50); color: var(--brand-700); }
.lang-toggle:active { scale: 0.96; }
.nav-burger {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.nav-burger span {
  width: 22px;
  height: 2px;
  background: var(--ink-900);
  border-radius: 2px;
}

/* ---------- Social proof strip ---------- */
.proof {
  padding: 22px 0;
  border-bottom: 1px solid var(--ink-100);
}
.proof-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  flex-wrap: wrap;
}
.proof-label {
  font-size: var(--text-sm);
  color: var(--ink-500);
  font-weight: 600;
}
.proof-verticals {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}
.proof-vertical {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-700);
}
.proof-vertical svg { width: 18px; height: 18px; color: var(--brand-600); flex-shrink: 0; }

/* ---------- Hero ---------- */
.hero { padding: 72px 0 60px; overflow: hidden; }
.hero-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.hero-copy h1 {
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 800;
  margin-bottom: 22px;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.hero-title-soft { color: var(--ink-500); font-weight: 700; }
.hero-sub {
  font-size: var(--text-md);
  font-size: 17.5px;
  color: var(--ink-700);
  max-width: 52ch;
  margin-bottom: 32px;
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 44px; }
.hero-trust { display: flex; gap: 36px; flex-wrap: wrap; }
.hero-trust-item { display: flex; flex-direction: column; }
.hero-trust-item strong { font-size: var(--text-xl); font-weight: 800; color: var(--brand-700); font-variant-numeric: tabular-nums; }
.hero-trust-item span { font-size: var(--text-sm); color: var(--ink-500); }

.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  animation: hero-float-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.1s;
}
@keyframes hero-float-in {
  from { opacity: 0; transform: translateY(28px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual { animation: none; }
}
.hero-glow {
  position: absolute;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(11,122,75,0.22), transparent 70%);
  filter: blur(10px);
  top: -40px;
  z-index: 0;
}
.phone-mock {
  position: relative;
  z-index: 1;
  width: 300px;
  background: var(--ink-900);
  border-radius: 40px;
  padding: 14px;
  box-shadow: var(--shadow-lg);
  outline: 1px solid rgba(255, 255, 255, 0.1);
  outline-offset: -1px;
}
.phone-notch {
  width: 90px;
  height: 18px;
  background: var(--ink-900);
  border-radius: 0 0 14px 14px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.phone-screen {
  background: var(--wa-bg);
  border-radius: 26px;
  padding: 22px 12px;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: -18px;
  overflow: hidden;
}
.phone-bubble {
  max-width: 82%;
  padding: 8px 11px 16px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 1px 1px rgba(0,0,0,0.08);
  position: relative;
  opacity: 0;
  animation: bubble-in 0.5s ease forwards;
}
.phone-bubble:nth-child(1) { animation-delay: 0.5s; }
.phone-bubble:nth-child(2) { animation-delay: 1.1s; }
.phone-bubble:nth-child(3) { animation-delay: 1.7s; }
.phone-bubble:nth-child(4) { animation-delay: 2.3s; }
@keyframes bubble-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .phone-bubble { opacity: 1; animation: none; }
}
.phone-bubble.in { background: var(--wa-in); align-self: flex-start; border-radius: 10px 10px 10px 2px; }
.phone-bubble.out { background: var(--wa-out); align-self: flex-end; border-radius: 10px 10px 2px 10px; }
.phone-bubble time {
  position: absolute;
  bottom: 3px;
  right: 9px;
  font-size: 9.5px;
  color: var(--ink-500);
}

/* ---------- Demo widget ---------- */
.demo { padding: 70px 0; background: var(--surface); border-top: 1px solid var(--ink-100); border-bottom: 1px solid var(--ink-100); }
.demo-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.demo-copy h2 { font-size: clamp(28px, 3.4vw, 38px); font-weight: 800; margin-bottom: 16px; }
.demo-copy p { color: var(--ink-700); font-size: var(--text-md); margin-bottom: 22px; max-width: 48ch; }
.demo-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.chip {
  background: var(--ink-50);
  border: 1.5px solid var(--ink-100);
  color: var(--ink-900);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 9px 16px;
  border-radius: var(--radius-full);
  cursor: pointer;
  min-height: 40px;
  transition-property: border-color, color, background, scale;
  transition-duration: 0.15s;
  transition-timing-function: ease-out;
  font-family: var(--font);
}
.chip:hover { border-color: var(--brand-600); color: var(--brand-700); background: var(--brand-50); }
.chip:active { scale: 0.96; }
.chip:disabled { opacity: 0.5; cursor: not-allowed; }
.demo-note {
  font-size: var(--text-sm);
  color: var(--ink-500);
  display: flex;
  align-items: center;
  gap: 6px;
}

.whatsapp-window {
  background: var(--wa-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(16,22,15,0.08);
  display: flex;
  flex-direction: column;
  height: 560px;
}
.wa-header {
  background: var(--brand-600);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}
.wa-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.wa-avatar-sm { width: 28px; height: 28px; font-size: 13px; background: var(--brand-600); color: #fff; }
.wa-header-text { display: flex; flex-direction: column; flex: 1; }
.wa-header-text strong { font-size: var(--text-md); }
.wa-header-text span { font-size: var(--text-xs); opacity: 0.9; }
.wa-header-icons { font-size: 18px; opacity: 0.9; }

.wa-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background-image: linear-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0.35));
}
.wa-day-sep {
  align-self: center;
  background: rgba(255,255,255,0.75);
  color: var(--ink-500);
  font-size: var(--text-xs);
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
}
.wa-msg {
  max-width: 78%;
  padding: 9px 12px 18px;
  border-radius: 10px;
  font-size: var(--text-base);
  line-height: 1.4;
  position: relative;
  box-shadow: 0 1px 1px rgba(0,0,0,0.08);
  word-wrap: break-word;
}
.wa-msg.in { background: var(--wa-in); align-self: flex-start; border-radius: 10px 10px 10px 2px; }
.wa-msg.out { background: var(--wa-out); align-self: flex-end; border-radius: 10px 10px 2px 10px; }
.wa-msg time {
  position: absolute;
  bottom: 5px;
  right: 10px;
  font-size: 10.5px;
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}
.wa-msg.out time { display: inline-flex; align-items: center; gap: 3px; }
/* Read-ticks come from a single .wa-ticks span (static HTML + appendBubble).
   The old ::after that also injected the ticks was removed to prevent the
   double-✓✓ regression. */
.wa-msg.pending { opacity: 0.6; }

.wa-typing {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px 10px;
}
.typing-dots {
  background: var(--wa-in);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  gap: 4px;
  box-shadow: 0 1px 1px rgba(0,0,0,0.08);
}
.typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-500);
  display: inline-block;
  animation: blink 1.2s infinite ease-in-out;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-2px); }
}

.wa-offline-banner {
  background: var(--warning-bg);
  color: var(--warning);
  font-size: var(--text-sm);
  padding: 10px 14px;
  text-align: center;
  border-top: 1px solid rgba(0,0,0,0.05);
}

.wa-input-row {
  display: flex;
  gap: 10px;
  padding: 12px;
  background: var(--ink-50);
  border-top: 1px solid rgba(0,0,0,0.05);
}
.wa-input {
  flex: 1;
  border: none;
  border-radius: var(--radius-full);
  padding: 11px 16px;
  font-size: var(--text-base);
  font-family: var(--font);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--ink-100);
}
.wa-input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--brand-600); }
.wa-send {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--brand-600);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  transition-property: background, scale;
  transition-duration: 0.15s;
  transition-timing-function: ease-out;
}
.wa-send:hover { background: var(--brand-700); scale: 1.04; }
.wa-send:active { scale: 0.96; }
.wa-send:disabled { opacity: 0.5; cursor: not-allowed; scale: 1; }

/* ---------- Features ---------- */
.features { padding: 90px 0; }
.section-head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 52px;
}
.section-head h2 {
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 800;
  margin-bottom: 14px;
  letter-spacing: -0.025em;
}
.section-head p { color: var(--ink-700); font-size: var(--text-md); font-size: 16.5px; }

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.feature-card {
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-md);
  padding: 30px 26px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: var(--ink-300); }
.feature-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-50);
  border-radius: var(--radius-md);
  margin-bottom: 18px;
  color: var(--brand-600);
}
.feature-icon svg { width: 22px; height: 22px; }
.feature-card h3 { font-size: var(--text-lg); font-weight: 700; margin-bottom: 10px; }
.feature-card p { color: var(--ink-700); font-size: var(--text-base); line-height: 1.55; }

/* ---------- Real-business video showcase ---------- */
.showcase { padding: 90px 0; background: var(--space-800); border-top: 1px solid rgba(201,245,169,0.08); border-bottom: 1px solid rgba(201,245,169,0.08); }
.showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.showcase-card {
  position: relative;
  border-radius: 24px;
  padding: 10px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--space-panel);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 1px rgba(201,245,169,0.1), 0 0 0 1px var(--glass-line);
}
.showcase-video {
  width: 100%;
  height: 100%;
  border-radius: 14px; /* 24 - 10 padding, concentric */
  object-fit: cover;
  outline: 1px solid rgba(255, 255, 255, 0.1);
  outline-offset: -1px;
  background: var(--ink-900);
}
.showcase-overlay {
  position: absolute;
  inset: 10px;
  border-radius: 14px; /* matches showcase-video */
  background: linear-gradient(180deg, rgba(3,11,7,0) 45%, rgba(3,11,7,0.86) 100%);
  pointer-events: none;
}
.showcase-caption {
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 22px;
  z-index: 2;
}
.showcase-tag {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 8px;
}
.showcase-caption p {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  max-width: 34ch;
  text-wrap: pretty;
}
@media (max-width: 720px) {
  .showcase-grid { grid-template-columns: 1fr; }
  .showcase { padding: 60px 0; }
}

/* ---------- AI Employee ---------- */
.employee { padding: 90px 0; background: var(--surface); border-top: 1px solid var(--ink-100); border-bottom: 1px solid var(--ink-100); }
.employee-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.employee-card { background: var(--ink-50); }

/* ---------- How it works ---------- */
.how { padding: 90px 0; }
.how-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
}
.how-steps::before {
  content: "";
  position: absolute;
  top: 18px;
  left: calc(12.5% + 18px);
  right: calc(12.5% + 18px);
  height: 1px;
  background: repeating-linear-gradient(to right, var(--ink-100) 0 8px, transparent 8px 14px);
  z-index: 0;
}
.how-step {
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-md);
  padding: 28px 22px;
  position: relative;
  z-index: 1;
}
.how-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand-600);
  color: #fff;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  font-size: var(--text-md);
  box-shadow: 0 0 0 6px var(--paper);
}
.how-step h3 { font-size: var(--text-lg); font-size: 16.5px; font-weight: 700; margin-bottom: 8px; }
.how-step p { color: var(--ink-700); font-size: var(--text-base); line-height: 1.5; }

/* ---------- Pricing ---------- */
.pricing { padding: 90px 0; background: var(--surface); border-top: 1px solid var(--ink-100); border-bottom: 1px solid var(--ink-100); }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
.price-card {
  background: var(--ink-50);
  border: 1.5px solid var(--ink-100);
  border-radius: var(--radius-md);
  padding: 34px 28px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.price-card-featured {
  background: var(--surface);
  border-color: var(--brand-600);
  box-shadow: var(--shadow-lg);
  transform: scale(1.03);
}
.price-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand-600);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 5px 14px;
  border-radius: var(--radius-full);
}
.price-card h3 { font-size: var(--text-lg); font-weight: 700; margin-bottom: 12px; }
.price-amount {
  font-size: 40px;
  font-weight: 800;
  margin-bottom: 10px;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.price-currency { font-size: 22px; vertical-align: top; margin-right: 2px; }
.price-period { font-size: var(--text-md); font-weight: 500; color: var(--ink-500); }
.price-desc { color: var(--ink-700); font-size: var(--text-base); margin-bottom: 22px; min-height: 40px; }
.price-features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.price-features li {
  font-size: var(--text-base);
  color: var(--ink-700);
  padding-left: 26px;
  position: relative;
}
.price-features li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--brand-600);
  font-weight: 800;
}

/* ---------- FAQ ---------- */
.faq { padding: 90px 0; }
.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-sm);
  padding: 18px 22px;
  transition: border-color 0.15s ease;
}
.faq-item[open] { border-color: var(--ink-300); }
.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  font-size: var(--text-md);
  font-size: 15.5px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 40px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 20px;
  color: var(--brand-600);
  font-weight: 400;
  margin-left: 12px;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { margin-top: 12px; color: var(--ink-700); font-size: var(--text-base); line-height: 1.6; }

/* ---------- Final CTA ---------- */
.final-cta {
  padding: 84px 0;
  background: linear-gradient(135deg, var(--brand-600), var(--brand-700));
  color: #fff;
}
.final-cta-inner { text-align: center; max-width: 620px; margin: 0 auto; }
.final-cta h2 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; margin-bottom: 14px; }
.final-cta p { font-size: var(--text-md); font-size: 16.5px; opacity: 0.92; margin-bottom: 28px; }
.final-cta .btn-primary { background: #fff; color: var(--brand-700); box-shadow: 0 6px 20px rgba(0,0,0,0.15); }
.final-cta .btn-primary:hover { background: var(--ink-50); }

/* ---------- Footer ---------- */
.footer { padding: 50px 0 34px; background: var(--ink-50); }
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}
.footer-tag { color: var(--ink-500); font-size: var(--text-base); }
.footer-links { display: flex; gap: 24px; font-size: var(--text-base); font-weight: 600; color: var(--ink-700); }
.footer-links a:hover { color: var(--brand-700); }
.footer-copy { color: var(--ink-500); font-size: var(--text-xs); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .how-steps::before { display: none; }
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual { order: -1; }
  .demo-inner { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .employee-grid { grid-template-columns: repeat(2, 1fr); }
  .how-steps { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .price-card-featured { transform: none; }
  .proof-inner { flex-direction: column; gap: 16px; }
}

@media (max-width: 680px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  .nav.nav-open .nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 16px 22px 20px;
    gap: 18px;
    z-index: 60;
    border-radius: 0 0 18px 18px;
    box-shadow: 0 24px 44px rgba(0, 0, 0, 0.5);
  }
  /* language toggle drops to the bottom of the menu as a full-width control,
     instead of crowding the header row next to the CTA. */
  .nav.nav-open .nav-links .lang-toggle {
    width: 100%;
    text-align: center;
    white-space: nowrap;
    margin-top: 2px;
  }
  .hero { padding: 48px 0 44px; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-trust { gap: 22px; }
  .features-grid { grid-template-columns: 1fr; }
  .employee-grid { grid-template-columns: 1fr; }
  .how-steps { grid-template-columns: 1fr; }
  .phone-mock { width: 240px; }
  .phone-screen { min-height: 340px; }
  .whatsapp-window { height: 500px; }
  .section-head { margin-bottom: 36px; }
  .features, .employee, .how, .pricing, .faq, .final-cta { padding: 60px 0; }
  .proof-verticals { justify-content: center; gap: 18px 22px; }
}

@media (max-width: 420px) {
  .container { padding: 0 16px; }
}

/* ==========================================================================
   CINEMATIC MOTION LAYER (motion.js)
   Hero = Kinetic Editorial · Story = Station Scroll Film · Visibility = Hologram Scan
   Loud accent: citron/lime in the green family.
   ========================================================================== */
:root {
  --ink-black: #0A0F0B;          /* near-black for kinetic hero */
  --loud: #C9F53B;               /* the one loud accent (citron/lime) */
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
}

.display {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 0.9;
}

/* ==========================================================================
   LIQUID GLASS (ported from bloom-liquid-glass-hero)
   Tinted to Recepta green instead of grayscale.
   Two tiers: light (chips/cards) + strong (primary panel).
   Borders drawn by masked ::before gradient  -  no border classes.
   ========================================================================== */
.liquid-glass {
  background: rgba(201, 245, 169, 0.015);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 1px rgba(201, 245, 169, 0.14);
  position: relative;
  overflow: hidden;
}
.liquid-glass::before {
  content: "";
  position: absolute; inset: 0; border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(201, 245, 169, 0.55) 0%,
    rgba(201, 245, 169, 0.18) 20%,
    transparent 42%, transparent 58%,
    rgba(120, 220, 160, 0.18) 80%,
    rgba(120, 220, 160, 0.5) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.liquid-glass-strong {
  background: rgba(10, 30, 20, 0.28);
  -webkit-backdrop-filter: blur(34px) saturate(120%);
  backdrop-filter: blur(34px) saturate(120%);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.45),
    0 0 60px rgba(11, 122, 75, 0.18),
    inset 0 1px 1px rgba(201, 245, 169, 0.18);
  position: relative;
  overflow: hidden;
}
.liquid-glass-strong::before {
  content: "";
  position: absolute; inset: 0; border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(150deg,
    rgba(201, 245, 169, 0.62) 0%,
    rgba(201, 245, 169, 0.22) 22%,
    transparent 46%, transparent 58%,
    rgba(120, 220, 160, 0.22) 80%,
    rgba(120, 220, 160, 0.58) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------- HERO: Bloom Liquid Glass ---------- */
.scene1 {
  position: relative;
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  overflow: hidden;
  background: #04100A;
  color: var(--paper);
  padding: 120px 0 0;
}

/* Deep-space backdrop */
.space-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.space-gradient {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 78% 118%, rgba(18, 153, 95, 0.42) 0%, rgba(11, 122, 75, 0.18) 30%, transparent 58%),
    radial-gradient(90% 70% at 15% -10%, rgba(21, 74, 50, 0.5) 0%, transparent 55%),
    linear-gradient(180deg, #05130D 0%, #04100A 55%, #030B07 100%);
}
.space-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* CSS planet fallback (shown when WebGL unavailable / reduced motion) */
.planet-fallback { position: absolute; right: -8%; bottom: -42%; width: 60vw; height: 60vw; max-width: 820px; max-height: 820px; display: none; }
.no-webgl .planet-fallback { display: block; }
.planet-glow {
  position: absolute; inset: -18%; border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, rgba(150, 240, 180, 0.55), rgba(18, 153, 95, 0.25) 40%, transparent 68%);
  filter: blur(20px);
}
.planet-body {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 36% 32%, #8DF0B8 0%, #29B472 26%, #0B7A4B 55%, #063a24 82%, #04140d 100%);
  box-shadow: inset -30px -30px 90px rgba(0,0,0,0.6), 0 0 120px rgba(41, 180, 114, 0.4);
}
.planet-terminator {
  position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(115deg, transparent 42%, rgba(3, 12, 7, 0.72) 70%);
}

.swash { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; z-index: 1; mix-blend-mode: screen; }
.swash path { fill: rgba(120, 230, 165, 0.5); }

.field { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.chatcard {
  position: absolute; top: 0; left: 0;
  max-width: 210px;
  padding: 11px 15px;
  border-radius: 16px;
  font-size: 14px; font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  will-change: transform;
  color: var(--paper);
  background: rgba(201, 245, 169, 0.02);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.45), inset 0 1px 1px rgba(201,245,169,0.14);
}
.chatcard::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.3px;
  background: linear-gradient(180deg, rgba(201,245,169,0.5), transparent 55%, rgba(120,220,160,0.4));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.chatcard.in  { border-bottom-left-radius: 4px; }
.chatcard.out { color: #04140d; background: rgba(201,245,169,0.85); border-bottom-right-radius: 4px; -webkit-backdrop-filter: none; backdrop-filter: none; }
.chatcard.out::before { display: none; }

/* Hero stage: glass panel + satellites */
.hero-stage {
  position: relative; z-index: 3;
  width: 100%; max-width: 1200px;
  margin: 0 auto; padding: 0 40px;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 40px; align-items: center;
}
.hero-panel {
  border-radius: 30px;
  padding: 40px 44px 38px;
  text-align: left;
}
.hero-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.hero-logo { height: 28px; width: auto; }
.scene1 .kicker {
  font-size: 11.5px; letter-spacing: 0.24em; text-transform: uppercase;
  color: #C9F5A9; margin: 0 0 14px; opacity: 0;
}
.scene1 .headline {
  font-size: clamp(42px, 5.6vw, 82px);
  color: var(--paper); margin: 0; text-transform: none; line-height: 0.98;
}
.scene1 .headline .word { display: inline-block; overflow: hidden; vertical-align: top; }
.scene1 .headline .ch { display: inline-block; transform: translateY(115%); }
.scene1 .headline .loud-word .ch { color: #C9F5A9; font-family: var(--display); font-style: italic; }
.scene1 .sub {
  margin: 22px 0 0; max-width: 46ch;
  font-size: 16px; line-height: 1.6; color: rgba(240,250,238,0.72);
  opacity: 0; transform: translateY(14px);
}
.scene1 .hero-ctas { justify-content: flex-start; margin: 30px 0 26px; opacity: 0; transform: translateY(12px); flex-wrap: wrap; }
.hero-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-chip-tag {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 600; letter-spacing: 0.01em;
  color: rgba(240,250,238,0.86);
  padding: 7px 15px; border-radius: 999px;
}
.hero-panel-head .hero-chip-tag { color: #C9F5A9; }

/* Satellite glass cards */
.hero-satellites { display: flex; flex-direction: column; gap: 18px; }
.sat-card {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 22px; border-radius: 22px;
}
.sat-card-wide { padding: 22px; }
.sat-icon {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(201,245,169,0.1); color: #C9F5A9;
}
.sat-icon svg { width: 22px; height: 22px; }
.sat-body { display: flex; flex-direction: column; }
.sat-num { font-family: var(--display); font-weight: 600; font-size: 30px; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; }
.sat-label { font-size: 13px; color: rgba(240,250,238,0.62); margin-top: 4px; }

.btn-ghost-loud {
  background: rgba(201,245,169,0.06); color: var(--paper);
  border: 1.5px solid rgba(201,245,169,0.55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.btn-ghost-loud:hover { background: #C9F5A9; color: var(--ink-black); border-color: #C9F5A9; }
.scene1 .btn-primary { box-shadow: 0 8px 28px rgba(11,122,75,0.5), 0 0 0 1px rgba(201,245,169,0.2) inset; }

/* marquee strip */
.scene1 .marquee {
  position: relative; z-index: 3; overflow: hidden; width: 100%;
  border-top: 1px solid rgba(201,245,169,0.35); border-bottom: 1px solid rgba(201,245,169,0.35);
  background: rgba(4,16,10,0.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  padding: 14px 0; margin-top: 60px;
}
.marquee-track { display: flex; width: max-content; animation: rc-marquee 18s linear infinite; }
.marquee-track span {
  display: inline-block; padding: 0 26px;
  font-family: var(--display); font-weight: 600; font-size: 20px;
  text-transform: uppercase; letter-spacing: 0.02em; color: #C9F5A9; white-space: nowrap;
}
.marquee-track span:nth-child(even) { color: var(--paper); }
@keyframes rc-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- STORY: Station Scroll Film ---------- */
.story { position: relative; background: #050B08; }
.stage-wrap { position: relative; height: 320vh; }
.stage { position: relative; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden; background: #050B08; }
.story .scene { position: absolute; inset: 0; opacity: 0; will-change: opacity, transform; transform: scale(1.05); }
.story .scene svg { width: 100%; height: 100%; display: block; }
.scene-vignette {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 42%, rgba(0,0,0,0.5) 100%);
}
.story .station-copy { position: absolute; left: 7%; bottom: 13%; z-index: 5; max-width: 620px; }
.story .station-index { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--loud); margin: 0 0 14px; }
.story .station-headline { font-size: clamp(34px, 6vw, 82px); color: #fff; margin: 0 0 14px; max-width: 11ch; }
.story .station-sub { font-size: 16px; color: rgba(255,255,255,0.68); margin: 0; max-width: 40ch; line-height: 1.5; }
.chapter-dots {
  position: absolute; right: 34px; top: 50%; transform: translateY(-50%); z-index: 6;
  display: flex; flex-direction: column; gap: 14px; align-items: flex-end;
}
.chapter-dots .dot-row { display: flex; align-items: center; gap: 10px; opacity: 0.4; transition: opacity 0.3s; }
.chapter-dots .dot-row.active { opacity: 1; }
.chapter-dots .dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.chapter-dots .dot-row.active .dot { background: var(--loud); box-shadow: 0 0 10px var(--loud); }
.chapter-dots .dot-label { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; }
.story .scroll-cue {
  position: absolute; left: 34px; bottom: 34px; z-index: 6;
  color: rgba(255,255,255,0.55); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
}

/* static / mobile fallback: scenes stack as a narrated strip */
.story-static { height: auto; }
.story-static .stage { position: relative; height: auto; }
.story-static .scene { position: relative; opacity: 1 !important; transform: none !important; height: 62vh; }
.story-static .station-copy { position: relative; left: auto; bottom: auto; margin: -18vh 7% 8vh; }
.story-static .chapter-dots { display: none; }
.story-static .scene-vignette { display: none; }

/* ---------- VISIBILITY: Hologram Scan ---------- */
.scan-section { background: #050B08; }
#scan { position: relative; height: 220vh; background: #050B08; }
.stage-scan {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.stage-scan .stage-top {
  position: absolute; top: 0; left: 0; right: 0; padding: 22px 32px;
  display: flex; justify-content: space-between; z-index: 6;
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(248,247,242,0.5);
}
.scan-headline { position: absolute; top: 12vh; left: 0; right: 0; text-align: center; z-index: 6; pointer-events: none; }
.scan-headline h2 { font-family: var(--display); font-weight: 500; font-size: clamp(26px, 4.5vw, 46px); margin: 0; color: var(--paper); }
.scene-wrap { position: relative; width: min(74vw, 640px); height: min(54vw, 460px); }
.scene-wrap svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#scene-real { clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%); }
.scanline {
  position: absolute; top: 0; bottom: 0; width: 3px; left: 0%; z-index: 4; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent, var(--loud), transparent);
  box-shadow: 0 0 24px 4px var(--loud);
}
.dashed { stroke-dasharray: 6 5; animation: rc-dashmove 1.4s linear infinite; }
@keyframes rc-dashmove { to { stroke-dashoffset: -22; } }
.scan-status {
  position: absolute; bottom: 9vh; left: 0; right: 0; text-align: center; z-index: 6;
  letter-spacing: 0.24em; text-transform: uppercase; font-size: 13px; font-weight: 700;
}
.scan-status .a { color: var(--loud); }
.scan-status .b { color: #EAFBC0; opacity: 0; position: relative; }
.scan-cue {
  position: absolute; right: 32px; bottom: 28px; z-index: 7;
  color: rgba(248,247,242,0.5); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  writing-mode: vertical-rl;
}
/* static / mobile fallback */
.scan-static #scan { height: auto; }
.scan-static .stage-scan { position: relative; height: 78vh; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .chatcard { animation: none !important; }
  .marquee-track { animation: none; }
  .dashed { animation: none; }
}

/* ---------- mobile simplifications ---------- */
/* Hero responsive: satellites drop below panel on tablet, hide on small mobile */
@media (max-width: 940px) {
  .hero-stage { grid-template-columns: 1fr; gap: 26px; padding: 0 24px; }
  .hero-satellites { flex-direction: row; flex-wrap: wrap; }
  .sat-card { flex: 1 1 200px; }
}
@media (max-width: 720px) {
  .scene1 { min-height: 100vh; padding: 104px 0 0; }
  .hero-stage { padding: 0 16px; }
  .hero-panel { padding: 28px 22px 26px; border-radius: 24px; }
  .hero-panel-head { margin-bottom: 20px; }
  .scene1 .headline { font-size: clamp(36px, 11vw, 62px); }
  .scene1 .sub { font-size: 15px; }
  .scene1 .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-satellites { display: none; }
  .chatcard { font-size: 12px; max-width: 150px; padding: 8px 12px; }
  .scene1 .marquee { margin-top: 40px; }
  .story .station-headline { font-size: clamp(28px, 8vw, 48px); }
  .scan-headline h2 { font-size: clamp(22px, 6vw, 34px); }
  .chapter-dots { right: 16px; }
  .planet-fallback { right: -30%; bottom: -30%; width: 90vw; height: 90vw; }
}

/* ==========================================================================
   ART DIRECTION PASS  -  cohere the whole page into the bloom glass-and-space
   language. Deep space-green backgrounds, luminous glass cards, lime accents.
   Overrides the original light/paper theme below the hero.
   ========================================================================== */
:root {
  --space-900: #030B07;
  --hero-night: #052015;         /* Recepta-green darkened to night for the WebGL hero environment */
  --space-800: #05130D;
  --space-700: #081D14;
  --space-panel: rgba(10, 30, 20, 0.34);
  --lime: #C9F5A9;
  --glass-line: rgba(201, 245, 169, 0.16);
  --glass-line-strong: rgba(201, 245, 169, 0.3);
  --ad-text: #EAF3E8;
  --ad-muted: rgba(234, 243, 232, 0.66);
  --ad-faint: rgba(234, 243, 232, 0.45);
}

body { background: var(--space-900); color: var(--ad-text); }

/* Nav → glass over dark */
.nav { background: rgba(4, 16, 10, 0.55); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); }
.nav.is-scrolled { border-bottom-color: var(--glass-line); box-shadow: 0 8px 30px rgba(0,0,0,0.4); }
.nav-links { color: var(--ad-muted); }
.nav-links a:hover { color: var(--lime); }
.lang-toggle { background: rgba(201,245,169,0.06); border-color: var(--glass-line); color: var(--ad-text); }
.lang-toggle:hover { background: rgba(201,245,169,0.14); color: var(--lime); }
.nav-burger span { background: var(--ad-text); }
.nav.nav-open .nav-links { background: var(--space-800); border-bottom-color: var(--glass-line); }

/* Shared: give every section a deep space wash. Alternating tone for rhythm. */
.proof, .demo, .features, .employee, .how, .pricing, .faq {
  background: var(--space-900);
  border-top: 1px solid rgba(201,245,169,0.08);
  border-bottom: 1px solid rgba(201,245,169,0.08);
}
.demo, .employee, .pricing { background: var(--space-800); }

/* Eyebrows glow */
.eyebrow { color: var(--lime); background: rgba(201,245,169,0.08); }

/* Section heads */
.section-head h2, .demo-copy h2 { color: #fff; }
.section-head p, .demo-copy p { color: var(--ad-muted); }

/* Proof strip */
.proof-label { color: var(--ad-faint); }
.proof-vertical { color: var(--ad-muted); }
.proof-vertical svg { color: var(--lime); }

/* Reusable glass card treatment */
.feature-card, .price-card, .faq-item, .how-step {
  background: var(--space-panel);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 1px rgba(201,245,169,0.1);
  color: var(--ad-text);
}
.feature-card:hover, .how-step:hover {
  transform: translateY(-3px);
  border-color: var(--glass-line-strong);
  box-shadow: 0 20px 50px rgba(0,0,0,0.4), inset 0 1px 1px rgba(201,245,169,0.16);
}
.employee-card { background: rgba(201,245,169,0.03); }
.feature-icon { background: rgba(201,245,169,0.1); color: var(--lime); }
.feature-card h3 { color: #fff; }
.feature-card p, .how-step p { color: var(--ad-muted); }
.how-step h3 { color: #fff; }
.how-num { box-shadow: 0 0 0 6px var(--space-900), 0 0 20px rgba(11,122,75,0.6); }
.how-steps::before { background: repeating-linear-gradient(to right, var(--glass-line) 0 8px, transparent 8px 14px); }

/* Buttons on dark */
.btn-outline { background: rgba(201,245,169,0.05); color: var(--lime); border-color: var(--glass-line-strong); }
.btn-outline:hover { background: rgba(201,245,169,0.14); border-color: var(--lime); }

/* Demo widget framed as a glass device  -  keep the WhatsApp window intact inside a glass shell */
.whatsapp-window {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.1), 0 30px 80px rgba(0,0,0,0.5), 0 0 60px rgba(11,122,75,0.2), inset 0 1px 1px rgba(201,245,169,0.14);
  padding: 10px; background: var(--space-panel); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-radius: 26px;
}
.whatsapp-window > * { border-radius: 0; }
.whatsapp-window .wa-header { border-radius: 16px 16px 0 0; }
.whatsapp-window .wa-input-row { border-radius: 0 0 16px 16px; }
.demo-engine-caption { color: var(--lime) !important; font-weight: 700; letter-spacing: 0.02em; }
.chip { background: rgba(201,245,169,0.06); border-color: var(--glass-line); color: var(--ad-text); }
.chip:hover { border-color: var(--lime); color: var(--lime); background: rgba(201,245,169,0.14); }
.demo-note { color: var(--ad-faint); }

/* Pricing */
.price-card h3 { color: #fff; }
.price-amount { color: #fff; }
.price-period { color: var(--ad-faint); }
.price-desc { color: var(--ad-muted); }
.price-features li { color: var(--ad-muted); }
.price-features li::before { color: var(--lime); }
.price-card-featured {
  background: rgba(11, 122, 75, 0.16);
  border-color: var(--lime);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 50px rgba(201,245,169,0.22);
}
.price-badge { background: var(--lime); color: var(--space-900); }

/* FAQ */
.faq-item summary { color: #fff; }
.faq-item[open] { border-color: var(--glass-line-strong); }
.faq-item summary::after { color: var(--lime); }
.faq-item p { color: var(--ad-muted); }

/* Final CTA  -  luminous green slab */
.final-cta {
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(41,180,114,0.4), transparent 60%),
    linear-gradient(135deg, #0B7A4B, #063a24);
  border-top: 1px solid var(--glass-line-strong);
}
.final-cta h2 { color: #fff; }
.final-cta p { color: rgba(255,255,255,0.85); }
.final-cta .btn-primary { background: var(--lime); color: var(--space-900); }
.final-cta .btn-primary:hover { background: #ddffbf; }

/* Footer */
.footer { background: var(--space-900); border-top: 1px solid var(--glass-line); }
.footer-tag { color: var(--ad-muted); }
.footer-links { color: var(--ad-muted); }
.footer-links a:hover { color: var(--lime); }
.footer-copy { color: var(--ad-faint); }

/* Section head icons already inherit; ensure focus ring uses lime on dark */
:focus-visible { outline-color: var(--lime); }

/* ==========================================================================
   UPGRADE PASS (rebuild): realistic iPhone frame for the live demo, 3D tilt on
   feature cards, richer scroll reveals, flow-diagram bento. All motion is
   gated behind prefers-reduced-motion. Kept at the end so it wins the cascade.
   ========================================================================== */

/* ---------- Realistic iPhone frame housing the live demo ---------- */
.iphone {
  position: relative;
  width: 340px;
  max-width: 100%;
  margin: 0 auto;
  aspect-ratio: 340 / 700;
  border-radius: 58px;
  padding: 13px;
  background: linear-gradient(150deg, #2b2f33 0%, #0d0f11 42%, #1c2023 100%);
  box-shadow:
    0 2px 0 1px rgba(255,255,255,0.10) inset,
    0 0 0 2px #05070a,
    0 40px 90px rgba(0,0,0,0.6),
    0 0 70px rgba(11,122,75,0.22);
}
/* the titanium rail highlight */
.iphone::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 55px;
  background: linear-gradient(150deg, rgba(255,255,255,0.16), rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(255,255,255,0.10));
  pointer-events: none;
  z-index: 3;
}
.iphone-screen {
  position: relative;
  height: 100%;
  border-radius: 46px;
  overflow: hidden;
  background: var(--wa-bg, #e6e0d8);
  box-shadow: 0 0 0 2px #05070a inset;
  display: flex;
  flex-direction: column;
}
/* Dynamic Island */
.iphone-island {
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  width: 108px;
  height: 30px;
  background: #05070a;
  border-radius: 16px;
  z-index: 6;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset;
}
.iphone-island::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #24404f, #0a1116 70%);
}
/* Side buttons */
.iphone-btn { position: absolute; background: linear-gradient(180deg,#1a1d20,#303539); z-index: 1; box-shadow: -1px 0 1px rgba(0,0,0,0.5); }
.iphone-btn-mute { left: -2px; top: 118px; width: 3px; height: 26px; border-radius: 3px 0 0 3px; }
.iphone-btn-vol-up { left: -2px; top: 158px; width: 3px; height: 48px; border-radius: 3px 0 0 3px; }
.iphone-btn-vol-down { left: -2px; top: 216px; width: 3px; height: 48px; border-radius: 3px 0 0 3px; }
.iphone-btn-power { right: -2px; top: 172px; width: 3px; height: 70px; border-radius: 0 3px 3px 0; }

/* The WhatsApp window inside the iPhone: strip the glass shell, fill the screen,
   let the body scroll internally. Overrides the earlier glass-device treatment. */
.iphone .whatsapp-window {
  height: 100%;
  width: 100%;
  padding: 0;
  border-radius: 0;
  background: var(--wa-bg);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  overflow: hidden;
}
.iphone .whatsapp-window > * { border-radius: 0; }
.iphone .wa-header { border-radius: 0; padding-top: 46px; }   /* clear the island */
.iphone .wa-input-row { border-radius: 0; padding-bottom: 20px; }  /* home-bar safe area */
.iphone .wa-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* Chat bubbles are light (WhatsApp), so force dark ink text regardless of the
   dark-theme body color that the art-direction pass set globally. */
.whatsapp-window .wa-msg,
.whatsapp-window .wa-msg span { color: var(--ink-900); }
.whatsapp-window .wa-msg time { color: var(--ink-500); }
.whatsapp-window .wa-day-sep { color: var(--ink-700); }
.whatsapp-window .wa-input { color: var(--ink-900); }
/* subtle home indicator */
.iphone-screen::after {
  content: "";
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 118px;
  height: 4px;
  border-radius: 4px;
  background: rgba(0,0,0,0.28);
  z-index: 6;
  pointer-events: none;
}
@media (max-width: 420px) {
  .iphone { width: 300px; border-radius: 50px; padding: 11px; }
  .iphone-screen { border-radius: 40px; }
}

/* ---------- Feature-card 3D tilt (pointer only; JS sets --rx/--ry) ---------- */
@media (hover: hover) and (pointer: fine) {
  .features-grid { perspective: 1200px; }
  .feature-card[data-tilt] {
    transform: perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
    transform-style: preserve-3d;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    will-change: transform;
  }
  .feature-card[data-tilt].is-tilting {
    box-shadow: 0 30px 60px rgba(0,0,0,0.45), inset 0 1px 1px rgba(201,245,169,0.2);
    border-color: var(--glass-line-strong);
  }
  .feature-card[data-tilt] .feature-icon,
  .feature-card[data-tilt] h3 { transform: translateZ(28px); }
  .feature-card[data-tilt] p { transform: translateZ(16px); }
  /* lime glare that follows the cursor */
  .feature-card[data-tilt]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(240px circle at var(--mx,50%) var(--my,0%), rgba(201,245,169,0.16), transparent 60%);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
  }
  .feature-card[data-tilt].is-tilting::after { opacity: 1; }
}
.feature-card { position: relative; }

/* ---------- Richer reveal: stagger children when a grid comes into view ---------- */
.reveal { transition: opacity 0.6s cubic-bezier(.2,0,0,1), transform 0.6s cubic-bezier(.2,0,0,1); }
.reveal-up { opacity: 0; transform: translateY(26px); }
.reveal-up.is-visible { opacity: 1; transform: none; }

/* ---------- Flow diagram bento (how Recepta thinks) ---------- */
.flow { padding: 90px 0; background: var(--space-900); border-top: 1px solid rgba(201,245,169,0.08); border-bottom: 1px solid rgba(201,245,169,0.08); }
.flow-diagram {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  align-items: stretch;
  max-width: 1000px;
  margin: 0 auto;
}
.flow-node {
  position: relative;
  background: var(--space-panel);
  border: 1px solid var(--glass-line);
  border-radius: 18px;
  padding: 22px 18px;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 1px rgba(201,245,169,0.1);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 148px;
}
.flow-node .flow-ico { width: 34px; height: 34px; border-radius: 10px; background: rgba(201,245,169,0.1); color: var(--lime); display: flex; align-items: center; justify-content: center; }
.flow-node .flow-ico svg { width: 18px; height: 18px; }
.flow-node h4 { color: #fff; font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; }
.flow-node p { color: var(--ad-muted); font-size: 12.5px; line-height: 1.45; }
.flow-node .flow-step { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lime); font-weight: 700; }
/* animated connector line */
.flow-node:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -14px;
  top: 50%;
  width: 14px;
  height: 2px;
  background: linear-gradient(90deg, var(--lime), transparent);
  z-index: 2;
}
.flow-diagram.is-visible .flow-node {
  animation: flowIn 0.5s cubic-bezier(.2,0,0,1) both;
}
.flow-diagram.is-visible .flow-node:nth-child(1){animation-delay:.05s}
.flow-diagram.is-visible .flow-node:nth-child(2){animation-delay:.15s}
.flow-diagram.is-visible .flow-node:nth-child(3){animation-delay:.25s}
.flow-diagram.is-visible .flow-node:nth-child(4){animation-delay:.35s}
.flow-diagram.is-visible .flow-node:nth-child(5){animation-delay:.45s}
@keyframes flowIn { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) {
  .flow-diagram { grid-template-columns: repeat(2, 1fr); }
  .flow-node:not(:last-child)::after { display: none; }
}
@media (max-width: 480px) {
  .flow-diagram { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .feature-card[data-tilt] { transform: none !important; }
  .flow-diagram.is-visible .flow-node { animation: none; }
  .reveal-up { opacity: 1; transform: none; }
}

/* ==========================================================================
   HERS-LEVEL VISUAL PASS: bento entry-grid in the hero, lime accent pills,
   footnoted pricing. Visual-first, confident, brand-accurate.
   ========================================================================== */

/* ---- Lime accent pill (loud tag / "New"-style chip) ---- */
.pill-lime {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #06170F;
  background: var(--lime);
  padding: 5px 11px;
  border-radius: 999px;
  line-height: 1;
}
/* loud single word inside a headline */
.loud-word { color: var(--lime); font-style: italic; }

/* ---- Bento entry-grid: tappable ways into the product, in the hero ---- */
.hero-bento {
  position: relative;
  z-index: 2;
  margin: 30px auto 0;
  max-width: 1200px;
  padding: 0 40px 70px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 14px;
}
.bento-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  min-height: 150px;
  padding: 20px;
  border-radius: 20px;
  background: rgba(8, 24, 16, 0.55);
  border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: inset 0 1px 1px rgba(201,245,169,0.12);
  color: var(--ad-text);
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.22s cubic-bezier(.2,0,0,1), border-color 0.22s ease, box-shadow 0.22s ease;
}
.bento-card:hover {
  transform: translateY(-4px);
  border-color: var(--glass-line-strong);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5), inset 0 1px 1px rgba(201,245,169,0.2);
}
.bento-card .bento-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lime); }
.bento-card h3 { font-size: 18px; font-weight: 700; color: #fff; letter-spacing: -0.02em; line-height: 1.15; }
.bento-card p { font-size: 13px; color: var(--ad-muted); line-height: 1.4; }
.bento-card .bento-arrow {
  position: absolute;
  top: 18px; right: 18px;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--glass-line-strong);
  display: flex; align-items: center; justify-content: center;
  color: var(--lime);
  transition: background 0.2s ease, transform 0.2s ease;
}
.bento-card:hover .bento-arrow { background: rgba(201,245,169,0.14); transform: translate(2px,-2px); }
.bento-card .bento-stat { font-family: var(--display); font-size: 30px; font-weight: 500; color: var(--lime); line-height: 1; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; }

/* the dominant card: taller feel, spans both rows, with a live glow */
.bento-card.bento-primary {
  grid-row: span 2;
  background:
    radial-gradient(120% 90% at 80% 10%, rgba(11,122,75,0.5), transparent 60%),
    rgba(6, 20, 13, 0.62);
  border-color: var(--glass-line-strong);
}
.bento-card.bento-primary h3 { font-size: 24px; }
.bento-card.bento-primary::after {
  content: "";
  position: absolute;
  top: 20px; left: 20px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 0 rgba(201,245,169,0.6);
  animation: bentoPulse 2s infinite;
}
@keyframes bentoPulse {
  0% { box-shadow: 0 0 0 0 rgba(201,245,169,0.55); }
  70% { box-shadow: 0 0 0 12px rgba(201,245,169,0); }
  100% { box-shadow: 0 0 0 0 rgba(201,245,169,0); }
}
@media (prefers-reduced-motion: reduce) {
  .bento-card.bento-primary::after { animation: none; }
  .bento-card:hover { transform: none; }
}
@media (max-width: 860px) {
  .hero-bento { grid-template-columns: 1fr 1fr; padding: 0 22px 54px; }
  .bento-card.bento-primary { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 520px) {
  .hero-bento { grid-template-columns: 1fr; }
  .bento-card.bento-primary { grid-column: span 1; }
}

/* ---- Footnoted pricing ---- */
.pricing-footnotes {
  max-width: 900px;
  margin: 34px auto 0;
  padding: 0 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pricing-footnotes p {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ad-faint);
  display: flex;
  gap: 8px;
}
.pricing-footnotes sup { color: var(--lime); font-weight: 700; }
.price-features li sup { color: var(--lime); font-size: 10px; margin-left: 1px; }

/* ================= WAITLIST MODAL (Task 1) ================= */
.wl-overlay{
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(6,23,15,.62);backdrop-filter:blur(4px);
  animation:wlFade .18s ease-out;
}
.wl-overlay[hidden]{display:none}
@keyframes wlFade{from{opacity:0}to{opacity:1}}
.wl-modal{
  position:relative;width:100%;max-width:440px;
  background:var(--surface,#fff);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);padding:32px 30px 30px;
  max-height:calc(100vh - 40px);overflow-y:auto;
  animation:wlPop .22s cubic-bezier(.2,0,0,1);
}
@keyframes wlPop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.wl-close{
  position:absolute;top:14px;right:16px;border:0;background:none;
  font-size:26px;line-height:1;color:var(--ink-500);cursor:pointer;
  width:32px;height:32px;border-radius:var(--radius-full);
}
.wl-close:hover{background:var(--ink-50);color:var(--ink-900)}
.wl-brand{margin-bottom:16px}
.wl-title{font-family:var(--display);font-weight:600;font-size:24px;letter-spacing:-.02em;color:var(--ink-900);margin:0 0 8px}
.wl-sub{color:var(--ink-500);font-size:14.5px;line-height:1.55;margin:0 0 22px}
.wl-form{display:flex;flex-direction:column;gap:14px}
.wl-field{display:flex;flex-direction:column;gap:6px}
.wl-field>span{font-size:13px;font-weight:600;color:var(--ink-700)}
.wl-field input,.wl-field select{
  width:100%;padding:11px 13px;font-size:15px;font-family:inherit;
  color:var(--ink-900);background:var(--ink-50);
  border:1px solid var(--ink-100);border-radius:var(--radius-md);
  transition:border-color .15s,box-shadow .15s;
}
.wl-field input:focus,.wl-field select:focus{
  outline:none;border-color:var(--brand-500);
  box-shadow:0 0 0 3px rgba(18,153,95,.15);background:#fff;
}
.wl-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wl-error{color:#B4231F;font-size:13.5px;margin:0;line-height:1.4}
.wl-form .btn{margin-top:4px}
.wl-success{text-align:center;padding:8px 0}
.wl-success-mark{
  width:56px;height:56px;margin:0 auto 16px;border-radius:var(--radius-full);
  background:var(--brand-600);color:#fff;font-size:28px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.wl-success h3{font-family:var(--display);font-weight:600;font-size:22px;color:var(--ink-900);margin:0 0 8px}
.wl-success p{color:var(--ink-500);font-size:15px;line-height:1.55;margin:0 0 22px}
/* [hidden] must win over the flex/display rules on modal panels. */
.wl-form[hidden],.wl-success[hidden],.wl-error[hidden]{display:none !important}