/* ═══════════════════════════════════════════════════════════════════════
   ZapResume AI — Wayflyer-Inspired Monochromatic Design System v6
   Near-black typography · White/off-white bg · Minimal accents
   ═══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300..900;1,14..32,300..900&display=swap');

/* ── Design Tokens ────────────────────────────────────────────────────── */
:root {
  --black:   #0D0D0D;
  --ink:     #111111;
  --text:    #111111;
  --text-2:  #444444;
  --text-3:  #777777;
  --text-4:  #AAAAAA;
  --white:   #FFFFFF;
  --off:     #F5F5F7;
  --off-2:   #EEEEEE;
  --border:  #E2E2E2;
  --border-2:#F0F0F0;

  /* Brand accents — used sparingly */
  --primary:    #4F46E5;
  --primary-d:  #4338CA;
  --primary-l:  #818CF8;
  --green:      #22C55E;
  --green-d:    #16A34A;
  --amber:      #F59E0B;
  --rose:       #F43F5E;
  --sky:        #0EA5E9;
  --teal:       #14B8A6;
  --violet:     #7C3AED;
  --wa-green:   #22C55E;
  --indigo:     #6366F1;

  /* Legacy compat */
  --dark:      #0D0D0D;
  --dark-2:    #222222;
  --dtext:     #F5F5F7;
  --dtext-2:   #CCCCCC;
  --dtext-3:   #888888;
  --dborder:   rgba(255,255,255,0.10);
  --bg:        #FFFFFF;
  --bg-subtle: #F5F5F7;
  --bg-2:      #EEEEEE;
  --bg-3:      #E5E5E5;
  --bg-card:   #FFFFFF;
  --bg-violet: #F5F5F7;

  --card-bg:     #FFFFFF;
  --card-border: #E2E2E2;
  --card-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04);
  --card-hover:  0 6px 24px rgba(0,0,0,0.09), 0 2px 6px rgba(0,0,0,0.05);

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow:    0 4px 16px rgba(0,0,0,0.07);
  --shadow-lg: 0 20px 48px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.05);
  --glow-v:    0 4px 16px rgba(79,70,229,0.20);
  --glow-green:0 4px 16px rgba(34,197,94,0.22);

  --r-xs:  4px;
  --r-sm:  6px;
  --r:     10px;
  --r-lg:  14px;
  --r-xl:  20px;
  --r-pill:100px;

  --ease:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur:      240ms;
  --dur-slow: 380ms;
}

/* ── Keyframes ────────────────────────────────────────────────────────── */
@keyframes fade-up {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes scale-in {
  from { opacity:0; transform:scale(0.97); }
  to   { opacity:1; transform:scale(1); }
}
@keyframes pulse-dot {
  0%,100% { opacity:1; transform:scale(1); }
  50%     { opacity:0.4; transform:scale(0.7); }
}
@keyframes float-gentle {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-8px); }
}

/* ── Scroll reveal ────────────────────────────────────────────────────── */
.anim {
  opacity:0;
  transform:translateY(18px);
  transition:opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.anim.in-view { opacity:1; transform:translateY(0); }
.anim-delay-1 { transition-delay:80ms; }
.anim-delay-2 { transition-delay:160ms; }
.anim-delay-3 { transition-delay:240ms; }
.anim-delay-4 { transition-delay:320ms; }
.anim-delay-5 { transition-delay:400ms; }
.anim-delay-6 { transition-delay:480ms; }

/* ── Base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; }

body.landing {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:#fff;
  color:var(--text-2);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  font-size:16px;
  line-height:1.65;
}
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:#f5f5f5; }
::-webkit-scrollbar-thumb { background:#ccc; border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:#aaa; }
::selection { background:rgba(79,70,229,0.12); color:var(--primary-d); }

.landing h1,.landing h2,.landing h3,.landing h4,.landing h5,.landing h6 {
  font-weight:800;
  line-height:1.08;
  letter-spacing:-0.04em;
  color:var(--ink);
}
.landing p { color:var(--text-2); }

/* ── Utilities ────────────────────────────────────────────────────────── */
.grad-text {
  background:linear-gradient(135deg,var(--primary),var(--primary-l));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.text-dtext   { color:#F5F5F7 !important; }
.text-dtext-2 { color:#CCCCCC !important; }
.text-dtext-3 { color:#888888 !important; }

/* ── Section helpers ──────────────────────────────────────────────────── */
.section-title {
  font-size:clamp(1.9rem,4.5vw,3rem);
  font-weight:900;
  letter-spacing:-0.04em;
  line-height:1.06;
  color:var(--ink);
  margin-bottom:0;
}
.section-title.text-white { color:#fff !important; }
.section-sub {
  font-size:1.05rem; line-height:1.78;
  color:var(--text-3); max-width:580px;
  margin-top:16px; margin-bottom:0;
}
.section-light  { background:#fff; padding:88px 0; }
.section-subtle { background:var(--off); padding:88px 0; }
.section-dark   { background:var(--black); padding:88px 0; }

/* Step badge — Wayflyer style */
.step-badge {
  display:inline-block;
  border:1px solid var(--border);
  border-radius:var(--r-xs);
  padding:4px 10px;
  font-size:0.73rem;
  font-weight:600;
  color:var(--text-3);
  letter-spacing:0.04em;
  margin-bottom:20px;
}

/* Section label — light label pill */
.section-label {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:0.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.10em;
  padding:5px 14px;
  border-radius:var(--r-pill);
  margin-bottom:16px;
}
.section-label.light {
  background:var(--off);
  color:var(--text-3);
  border:1px solid var(--border);
}
.section-label.dark {
  background:rgba(255,255,255,0.08);
  color:var(--dtext-2);
  border:1px solid rgba(255,255,255,0.14);
}
.section-label.green {
  background:rgba(34,197,94,0.08);
  color:var(--green-d);
  border:1px solid rgba(34,197,94,0.20);
}

/* ── NAVBAR — Wayflyer minimal ────────────────────────────────────────── */
.landing-nav {
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(12px) saturate(180%);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
  border-bottom:1px solid var(--border);
  padding:0;
  transition:box-shadow var(--dur);
}
.landing-nav.on-light {
  box-shadow:0 2px 20px rgba(0,0,0,0.06);
}
.landing-nav>.container { padding:0 24px; }

.landing-nav .navbar-brand {
  display:flex; align-items:center; gap:10px;
  text-decoration:none; padding:16px 0;
}
.n-logo-img {
  width:32px; height:32px;
  object-fit:contain; border-radius:8px; flex-shrink:0;
}
.n-name {
  font-size:1.05rem; font-weight:900;
  letter-spacing:-0.035em; color:var(--ink);
}
.n-ai { color:var(--ink); }

/* Nav links — clean, no icons by default */
.landing-nav .nav-link {
  font-size:0.875rem; font-weight:500;
  color:var(--text-3) !important;
  padding:7px 14px !important;
  border-radius:var(--r-sm);
  transition:color var(--dur-fast), background var(--dur-fast);
  display:flex; align-items:center; gap:5px;
  letter-spacing:-0.005em;
}
.nav-icon { display:none; }
.landing-nav .nav-link:hover { color:var(--ink) !important; background:var(--off); }
.landing-nav .nav-link.active { color:var(--ink) !important; font-weight:600; }

/* CTA buttons in nav */
.n-btn-app {
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 18px;
  background:var(--off);
  color:var(--text-2);
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  font-size:0.84rem; font-weight:600;
  text-decoration:none;
  transition:all var(--dur-fast);
  white-space:nowrap;
}
.n-btn-app:hover { background:var(--off-2); color:var(--ink); }

.n-btn-wa {
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 18px;
  background:var(--black);
  color:#fff; border:none;
  border-radius:var(--r-pill);
  font-size:0.84rem; font-weight:600;
  text-decoration:none;
  transition:all var(--dur-fast);
  white-space:nowrap;
}
.n-btn-wa:hover { background:#333; color:#fff; transform:translateY(-1px); }

.navbar-toggler { border:1px solid var(--border); padding:8px 11px; border-radius:var(--r-sm); }
.navbar-toggler:focus { box-shadow:none; }
.navbar-toggler-icon {
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23111111' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ── HERO — full white, Wayflyer-inspired ─────────────────────────────── */
.hero-white {
  background:#fff;
  padding:80px 0 72px;
}
.hero-overline {
  font-size:0.78rem; font-weight:600;
  color:var(--text-3); letter-spacing:0.08em;
  text-transform:uppercase; margin-bottom:24px;
  display:flex; align-items:center; gap:8px;
}
.hero-overline-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--green); flex-shrink:0;
  animation:pulse-dot 2s ease infinite;
}
.hero-headline {
  font-size:clamp(2.8rem, 7vw, 5rem);
  font-weight:900;
  letter-spacing:-0.04em;
  line-height:1.02;
  color:var(--ink);
  margin-bottom:32px;
}
.hero-body {
  font-size:1.1rem; color:var(--text-2);
  line-height:1.75; max-width:580px;
  margin-bottom:32px;
}
.hero-checklist { margin-bottom:36px; }
.check-item {
  display:flex; align-items:flex-start; gap:14px;
  margin-bottom:14px;
}
.check-icon {
  width:28px; height:28px;
  border-radius:50%;
  background:var(--off);
  border:1px solid var(--border);
  display:grid; place-items:center;
  font-size:0.72rem;
  color:var(--ink);
  flex-shrink:0;
  margin-top:2px;
}
.check-text {
  font-size:0.95rem; color:var(--text-2); line-height:1.55;
}
.check-text strong { color:var(--ink); }

.hero-ctas {
  display:flex; flex-wrap:wrap; gap:12px;
  align-items:center;
}
/* Old hero-dark compat shim */
.hero-dark { display:none; }
.hero-badge,.hero-orb,.hero-glow,.hero-glow-1,.hero-glow-2 { display:none; }
.hero-stat { display:none; }
.hero-stats { display:none; }

/* ── TRUST BAR ────────────────────────────────────────────────────────── */
.trust-bar {
  background:var(--off);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:18px 0;
}
.trust-item {
  display:flex; align-items:center; gap:8px;
  font-size:0.81rem; font-weight:500; color:var(--text-3);
  white-space:nowrap;
}
.t-icon {
  width:26px; height:26px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:6px;
  display:grid; place-items:center;
  font-size:0.72rem; color:var(--text-2);
  flex-shrink:0;
}
.t-sep { width:1px; height:18px; background:var(--border); }

/* ── STEP SECTIONS ────────────────────────────────────────────────────── */
.steps-header {
  padding:72px 0 0;
  border-top:1px solid var(--border);
}
.steps-header-title {
  font-size:clamp(2rem, 5vw, 3.5rem);
  font-weight:900; letter-spacing:-0.04em;
  line-height:1.06; color:var(--ink);
  max-width:620px;
}

.step-section {
  padding:64px 0;
  border-top:1px solid var(--border);
}
.step-section-title {
  font-size:clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight:900; letter-spacing:-0.04em;
  line-height:1.08; color:var(--ink);
  margin-bottom:16px;
}
.step-section-body {
  font-size:1rem; color:var(--text-2);
  line-height:1.78; max-width:520px;
}
.step-visual {
  background:var(--off);
  border-radius:var(--r-xl);
  overflow:hidden;
  margin-top:32px;
  padding:32px;
  border:1px solid var(--border);
}

/* ── CARDS ────────────────────────────────────────────────────────────── */
.zap-card {
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:28px;
  box-shadow:var(--card-shadow);
  transition:transform var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease),
             border-color var(--dur);
}
.zap-card:hover {
  transform:translateY(-2px);
  box-shadow:var(--card-hover);
  border-color:#ccc;
}
.zap-card.dark {
  background:#fff;
  border-color:var(--border);
}
.zap-card h5 {
  font-size:1rem; font-weight:700;
  letter-spacing:-0.025em; color:var(--ink);
  margin:12px 0 8px;
}
.zap-card p { font-size:0.875rem; color:var(--text-3); line-height:1.7; margin:0; }

.zap-icon {
  width:44px; height:44px; border-radius:9px;
  display:grid; place-items:center;
  font-size:1rem; flex-shrink:0;
  transition:transform var(--dur-fast) var(--ease);
}
.zap-card:hover .zap-icon { transform:scale(1.06); }
.i-violet { background:rgba(79,70,229,0.07);  color:var(--primary);  border:1px solid rgba(79,70,229,0.14); }
.i-green  { background:rgba(34,197,94,0.07);  color:var(--green-d);  border:1px solid rgba(34,197,94,0.14); }
.i-sky    { background:rgba(14,165,233,0.07); color:#0284C7;         border:1px solid rgba(14,165,233,0.14); }
.i-amber  { background:rgba(245,158,11,0.07); color:#B45309;         border:1px solid rgba(245,158,11,0.14); }
.i-rose   { background:rgba(244,63,94,0.07);  color:#BE123C;         border:1px solid rgba(244,63,94,0.14); }
.i-teal   { background:rgba(20,184,166,0.07); color:#0F766E;         border:1px solid rgba(20,184,166,0.14); }
.i-indigo { background:rgba(99,102,241,0.07); color:#4338CA;         border:1px solid rgba(99,102,241,0.14); }

/* ── BUTTONS ──────────────────────────────────────────────────────────── */
/* Primary = black (Wayflyer-style) */
.btn-primary-zap {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--black); color:#fff;
  font-size:0.9rem; font-weight:600; letter-spacing:-0.01em;
  padding:12px 24px; border-radius:var(--r-pill);
  border:none; cursor:pointer; text-decoration:none;
  transition:background var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
  white-space:nowrap;
}
.btn-primary-zap:hover {
  background:#333; color:#fff;
  transform:translateY(-1px); box-shadow:0 6px 20px rgba(0,0,0,0.18);
}
/* Black CTA (same style) */
.btn-black {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--black); color:#fff;
  font-size:0.9rem; font-weight:600; letter-spacing:-0.01em;
  padding:12px 24px; border-radius:var(--r-pill);
  border:none; cursor:pointer; text-decoration:none;
  transition:background var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
  white-space:nowrap;
}
.btn-black:hover {
  background:#333; color:#fff;
  transform:translateY(-1px); box-shadow:0 6px 20px rgba(0,0,0,0.18);
}
/* WhatsApp — keep green */
.btn-wa-hero {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--green); color:#fff;
  font-size:0.9rem; font-weight:600; letter-spacing:-0.01em;
  padding:12px 24px; border-radius:var(--r-pill);
  border:none; cursor:pointer; text-decoration:none;
  transition:background var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
  white-space:nowrap;
}
.btn-wa-hero:hover {
  background:var(--green-d); color:#fff;
  transform:translateY(-1px); box-shadow:var(--glow-green);
}
/* Ghost / outline */
.btn-ghost {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:transparent; color:var(--text-2);
  font-size:0.9rem; font-weight:500;
  padding:12px 22px; border-radius:var(--r-pill);
  border:1px solid var(--border);
  text-decoration:none; cursor:pointer;
  transition:all var(--dur-fast);
  white-space:nowrap;
}
.btn-ghost:hover {
  background:var(--off); color:var(--ink); border-color:#bbb;
}
.btn-violet {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--black); color:#fff;
  font-size:0.9rem; font-weight:600;
  padding:12px 24px; border-radius:var(--r-pill);
  border:none; cursor:pointer; text-decoration:none;
  transition:background var(--dur-fast), transform var(--dur-fast);
  white-space:nowrap;
}
.btn-violet:hover { background:#333; color:#fff; transform:translateY(-1px); }
.btn-outline-zap {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:transparent; color:var(--text-2);
  font-size:0.875rem; font-weight:600;
  padding:10px 22px; border-radius:var(--r-pill);
  border:1px solid var(--border);
  text-decoration:none; cursor:pointer;
  transition:all var(--dur-fast);
  white-space:nowrap;
}
.btn-outline-zap:hover {
  background:var(--off); color:var(--ink); border-color:#bbb;
}

/* ── BENTO GRID ───────────────────────────────────────────────────────── */
.bento-grid {
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:12px;
}
.bento-card {
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:28px;
  box-shadow:var(--card-shadow);
  grid-column:span 4;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur), border-color var(--dur);
}
.bento-card:hover { transform:translateY(-2px); box-shadow:var(--card-hover); border-color:#ccc; }
.bento-lg { grid-column:span 8; }

/* ATS Ring widget */
.ats-ring {
  width:110px; height:110px;
  background:conic-gradient(var(--ink) 0% 74%, var(--off-2) 74% 100%);
  border-radius:50%; display:grid; place-items:center;
}
.ats-ring-inner {
  width:86px; height:86px;
  background:#fff; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.ats-ring-num { font-size:1.8rem; font-weight:900; letter-spacing:-0.05em; color:var(--ink); line-height:1; }
.ats-ring-label { font-size:0.63rem; color:var(--text-4); font-weight:600; }

/* ── STEP LINE (legacy — used in how-it-works page) ─────────────────── */
.step-line { position:relative; }
.step-line::before {
  content:''; position:absolute;
  left:20px; top:0; bottom:0;
  width:1px; background:var(--border);
}
.step-item { display:flex; gap:20px; margin-bottom:32px; position:relative; }
.step-num {
  width:40px; height:40px;
  background:var(--off); border:1px solid var(--border);
  color:var(--ink); border-radius:50%;
  display:grid; place-items:center;
  font-size:0.82rem; font-weight:800;
  flex-shrink:0; z-index:1;
}
.step-content h5 { font-size:0.95rem; font-weight:700; color:var(--ink); margin-bottom:6px; letter-spacing:-0.02em; }
.step-content p  { font-size:0.84rem; color:var(--text-3); line-height:1.65; margin:0; }

/* ── COMPARISON TABLE ─────────────────────────────────────────────────── */
.comparison-table {
  border-collapse:separate; border-spacing:0;
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow); width:100%;
}
.comparison-table thead th {
  background:var(--off); padding:14px 20px;
  font-weight:700; font-size:0.84rem; color:var(--text-2);
  border-bottom:2px solid var(--border);
}
.comparison-table thead th.us-col { background:var(--ink); color:#fff; }
.comparison-table tbody td {
  padding:13px 20px; font-size:0.88rem;
  background:#fff; border-bottom:1px solid var(--border-2);
}
.comparison-table tbody tr:last-child td { border-bottom:none; }
.comparison-table td.us-col { background:rgba(0,0,0,0.02); }
.check { color:var(--ink); }
.cross { color:var(--text-4); opacity:0.40; }

/* ── PRICING CARDS ────────────────────────────────────────────────────── */
.pricing-card {
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  padding:32px;
  box-shadow:var(--card-shadow);
  position:relative;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur), border-color var(--dur);
}
.pricing-card:hover { transform:translateY(-3px); box-shadow:0 12px 40px rgba(0,0,0,0.09); }
.pricing-card.featured {
  border-color:var(--ink);
  box-shadow:0 0 0 1px var(--ink), 0 8px 32px rgba(0,0,0,0.14);
}
.pricing-card.featured:hover {
  box-shadow:0 0 0 1px var(--ink), 0 16px 48px rgba(0,0,0,0.18);
}
.pricing-badge {
  position:absolute; top:-14px; left:50%;
  transform:translateX(-50%);
  background:var(--ink); color:#fff;
  font-size:0.68rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.08em;
  padding:4px 14px; border-radius:var(--r-pill);
  white-space:nowrap;
}
.price-amount {
  font-size:3rem; font-weight:900;
  letter-spacing:-0.05em; color:var(--ink); line-height:1;
  margin:16px 0 4px;
}
.price-amount sup { font-size:1.2rem; vertical-align:0.8rem; font-weight:700; }
.price-period { font-size:0.82rem; color:var(--text-4); }
.pricing-feature {
  display:flex; align-items:flex-start; gap:10px;
  font-size:0.87rem; color:var(--text-2);
  margin-bottom:10px; line-height:1.55;
}
.pf-icon { flex-shrink:0; margin-top:2px; }
.pricing-feature .check { color:var(--ink); }
.pricing-feature .cross { color:var(--text-4); opacity:0.45; }

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq-item { border-bottom:1px solid var(--border) !important; border-radius:0 !important; }
.faq-item .accordion-button {
  font-size:0.95rem; font-weight:600;
  color:var(--ink); background:transparent;
  padding:20px 0; box-shadow:none; letter-spacing:-0.015em;
}
.faq-item .accordion-button:not(.collapsed) { color:var(--ink); background:transparent; box-shadow:none; }
.faq-item .accordion-button::after { width:16px; height:16px; background-size:16px; opacity:0.4; }
.faq-item .accordion-body {
  font-size:0.9rem; color:var(--text-3);
  line-height:1.78; padding:0 0 20px;
}

/* ── PAGE HERO (inner pages) ──────────────────────────────────────────── */
.page-hero {
  background:#fff;
  border-bottom:1px solid var(--border);
  padding:72px 0 64px;
}

/* ── CTA BANNER ───────────────────────────────────────────────────────── */
.cta-banner {
  background:var(--black);
  padding:96px 0;
  position:relative; overflow:hidden;
}
.cta-banner::before {
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size:24px 24px; pointer-events:none;
}

/* ── FOOTER ───────────────────────────────────────────────────────────── */
.landing-footer {
  background:var(--off);
  border-top:1px solid var(--border);
  padding:64px 0 40px;
  color:var(--text-2);
}
.f-brand { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.f-bolt {
  width:32px; height:32px;
  background:var(--off-2); border:1px solid var(--border);
  border-radius:8px; display:grid; place-items:center;
  color:var(--text-2); font-size:0.85rem;
}
.f-name { font-size:1rem; font-weight:900; color:var(--ink); letter-spacing:-0.035em; }
.f-desc { font-size:0.84rem; color:var(--text-3); line-height:1.7; max-width:280px; }
.landing-footer h6 {
  font-size:0.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.10em;
  color:var(--text-3); margin-bottom:16px;
}
.landing-footer a {
  display:block; font-size:0.875rem;
  color:var(--text-3); text-decoration:none; margin-bottom:10px;
  transition:color var(--dur-fast);
}
.landing-footer a:hover { color:var(--ink); }
.f-divider { border-color:var(--border); margin:40px 0 24px; }
.f-bottom { font-size:0.78rem; color:var(--text-3); }
.f-bottom a { display:inline; margin:0; font-size:0.78rem; }

/* ── Legacy compat shims ──────────────────────────────────────────────── */
.dot-grid-dark { display:none; }
.hero-orb { display:none; }

/* ── RESPONSIVE ───────────────────────────────────────────────────────── */
@media (max-width:991px) {
  .section-light,.section-subtle,.section-dark { padding:64px 0; }
  .cta-banner { padding:72px 0; }
  .bento-lg   { grid-column:span 12; }
  .bento-card { grid-column:span 6; }
  .landing-nav .collapse.navbar-collapse {
    background:#fff; border-top:1px solid var(--border);
    padding:16px; margin:0 -24px;
  }
  .n-btn-app,.n-btn-wa { width:100%; justify-content:center; margin-top:4px; }
  .steps-header { padding:56px 0 0; }
}
@media (max-width:767px) {
  .bento-card { grid-column:span 12; }
  .bento-grid { grid-template-columns:1fr; }
  .hero-headline { font-size:2.5rem; }
  .section-title { font-size:2rem; }
  .step-section { padding:48px 0; }
}
@media (max-width:575px) {
  .hero-headline { font-size:2.2rem; }
  .hero-ctas { flex-direction:column; align-items:flex-start; }
  .hero-ctas > * { width:100%; text-align:center; justify-content:center; }
}