/* ════════════════════════════════════════════
   home-theme.css — Dark theme for all homepage versions
   Linked in: index.html, en/, es/, pt/, hi/
   ════════════════════════════════════════════ */

/* Variables */
:root {
  --paper: #0a0a0a;
  --paper2: #111111;
  --paper3: #1a1a1a;
  --green: #22c55e;
  --border: rgba(255,255,255,.09);
}

body { color: #e8e3dc; }

/* ── NAV ── */
nav {
  background: rgba(14,14,14,.94);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 8px 22px rgba(0,0,0,.4);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.nlogo { color: #fff; }
.nlinks a { color: rgba(255,255,255,.5); }
.nlinks a:hover { color: #fff; }

/* Lang picker in nav */
.nav-right { display: flex; align-items: center; gap: 10px; }
.lang-trigger {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: auto;
  justify-content: space-between;
  padding: 9px 14px 9px 11px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg,rgba(34,34,34,.96) 0%,rgba(21,21,21,.96) 100%);
  color: #f3eee6;
  cursor: pointer;
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: .84rem;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(0,0,0,.24),0 0 0 1px rgba(255,255,255,.03) inset;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.lang-trigger:hover {
  background: linear-gradient(180deg,rgba(42,42,42,.98) 0%,rgba(26,26,26,.98) 100%);
  border-color: rgba(201,168,76,.3);
  color: #fff7e8;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0,0,0,.28),0 0 0 1px rgba(201,168,76,.08) inset;
}

/* ── HERO ── */
.hero::before { display: none; }
h2 { color: #fff; }


/* ── HERO STATS ── */
.hero-stats-human { color: rgba(201,168,76,.65); }
.hero-stat span { color: rgba(255,255,255,.52); }
.hero-stat + .hero-stat { border-color: rgba(255,255,255,.07); }


/* ── PRICING ── */
.plan-card { background: #1a1a1a; color: #e8e3dc; }
.plan-price-note { color: rgba(255,255,255,.52); }
.plan-desc { color: rgba(255,255,255,.72); }
.plan-after { color: rgba(255,255,255,.48); }
.plan-list li { color: rgba(255,255,255,.78); }
.plan-foot { color: rgba(255,255,255,.42); }
.plan-btn.alt { background: rgba(255,255,255,.06); color: rgba(255,255,255,.88); border-color: rgba(255,255,255,.14); }

/* ── FAQ ── */
.faq { border-color: rgba(255,255,255,.07); }
.faq-item { background: #1a1a1a; border-color: rgba(255,255,255,.08); box-shadow: none; }
.faq-item summary { color: #fff; }
.faq-item p { color: rgba(255,255,255,.52); }


/* ── FOOTER ── */
footer { border-color: rgba(255,255,255,.07); }
.flogo { color: #fff; }
.footer-brand p { color: rgba(255,255,255,.42); }
.footer-meta a, .footer-meta span { color: rgba(255,255,255,.38); }
.footer-meta a:hover { color: rgba(255,255,255,.75); }
.fcol-title { color: rgba(255,255,255,.82); }
.flinks a { color: rgba(255,255,255,.42); }
.flinks a:hover { color: #fff; }
.footer-bottom { border-color: rgba(255,255,255,.07); }
.fcopy { color: rgba(255,255,255,.32); }

/* ── SECTION BACKGROUNDS — alternate between #0a0a0a and #111 for visual rhythm ── */
body,
.lang-bar,
.hero-stats-wrap,
.demo-video-wrap,
.workflow-demo,
.pricing,
.faq,
footer { background: #0a0a0a; }

.hero { background: #0a0a0a; }

.works,
.input-layer,
.pricing-main { background: #111; }

.input-layer { display: none !important; }

.guarantee-strip { background: #0f0f0f; }

.cta .btn-primary { background: #0a0a0a; }


/* ── INPUT LAYER — text (--ink2 = #3a3a3a) on dark bg → fix colors ── */
.input-layer-text p { color: rgba(255,255,255,.65); }
.input-layer-list li { color: rgba(255,255,255,.65); }

/* ── FEAT GRID — paragraph (--ink3 = #8a8a8a) on near-black → raise contrast ── */
.feat-card p { color: rgba(255,255,255,.6); }

/* ── DEMO SECTION — subtitle uses var(--ink3) via inline style ── */
.demo-video-wrap { --ink3: rgba(255,255,255,.52); }

/* ── SECONDARY HERO BUTTON — raised opacity for readability ── */
.btn-sec { color: rgba(255,255,255,.72); }

.hero-stats-wrap {
  padding: 0 40px 56px;
}

.hero-stats {
  max-width: 860px;
  gap: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}

.hero-stat {
  position: relative;
  min-height: 0;
  padding: 36px 32px;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: center;
  box-shadow: none;
}

.hero-stat::before { display: none; }

.hero-stat + .hero-stat {
  border-left: 1px solid rgba(255,255,255,.07);
}

.hero-stat strong {
  display: block;
  max-width: none;
  margin-bottom: 4px;
  color: #fff;
  font-size: clamp(2.4rem,3.8vw,3.4rem);
  letter-spacing: -.04em;
  line-height: 1;
}

.hero-stat-title {
  max-width: none;
  margin-bottom: 8px;
  color: rgba(201,168,76,.85);
  font-size: clamp(.88rem,1.1vw,.98rem);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.2;
}

.hero-stat span {
  color: rgba(232,227,220,.4);
  font-size: .82rem;
  line-height: 1.5;
}

.hero-stats-human {
  margin-top: 16px;
  color: rgba(201,168,76,.55);
  font-size: .82rem;
  letter-spacing: .02em;
}


/* Section dividers — gold shimmer lines between alternating sections */
.demo-video-wrap,
.works,
.workflow-demo,
.input-layer,
.pricing,
.faq {
  border-top: 1px solid rgba(201,168,76,.1);
  border-bottom: 0;
}
.guarantee-strip,
footer { border-bottom: 0; }


/* ── HERO CTA — gold primary button ── */
.hero .btn-primary {
  background: linear-gradient(180deg,#c9a84c 0%,#a8820a 100%);
  color: #0a0a0a;
  border-color: rgba(201,168,76,.45);
  box-shadow: 0 22px 44px rgba(201,168,76,.28);
}
.hero .btn-primary:hover {
  background: linear-gradient(180deg,#ddb847 0%,#b89010 100%);
  color: #0a0a0a;
}

/* ── HERO MOCKUP — gold glow to lift it off the dark bg ── */
.hm-win {
  box-shadow: 0 40px 90px rgba(0,0,0,.7),
              0 0 0 1px rgba(201,168,76,.14),
              0 0 60px rgba(201,168,76,.07);
}

/* ── CTA — dark amber tint instead of full gold bg ── */
.cta {
  background: linear-gradient(180deg,#120f04 0%,#0a0808 100%);
  border-top: 1px solid rgba(201,168,76,.22);
}
.cta h2 { color: #fff; }
.cta p { color: rgba(255,255,255,.58); }
.cta-note { color: rgba(255,255,255,.38); }
.cta .btn-primary {
  background: linear-gradient(180deg,#c9a84c 0%,#a8820a 100%);
  color: #0a0a0a;
  border-color: rgba(201,168,76,.45);
  box-shadow: 0 22px 44px rgba(201,168,76,.28);
}
.cta .btn-primary:hover {
  background: linear-gradient(180deg,#ddb847 0%,#b89010 100%);
  color: #0a0a0a;
}