/* ════════════════════════════════════════════════════
   DocBot — Futuristic Design · dcpt.png Brand Spec
   Navy #0D1B2A · Teal #11998A · Inter font
   ════════════════════════════════════════════════════ */

:root {
  --navy:     #0D1B2A;
  --navy2:    #112236;
  --navy3:    #0A1828;
  --deep:     #060D16;
  --teal:     #11998A;
  --teal-l:   #1ABBA3;
  --teal-d:   #0A7A6E;
  --white:    #FFFFFF;
  --t100:     rgba(255,255,255,0.06);
  --t200:     rgba(255,255,255,0.10);
  --t300:     rgba(255,255,255,0.18);
  --teal-a10: rgba(17,153,138,0.10);
  --teal-a20: rgba(17,153,138,0.20);
  --teal-a40: rgba(17,153,138,0.40);
  --teal-glow:0 0 40px rgba(17,153,138,0.35), 0 0 80px rgba(17,153,138,0.15);
  --font:     'Inter', system-ui, sans-serif;
  --r:        14px;
  --ease:     0.3s cubic-bezier(0.4,0,0.2,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--navy);
  color: rgba(255,255,255,0.75);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── GLOBAL ───────────────────────────────────────── */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 28px; }

.grad-text {
  background: linear-gradient(90deg, var(--teal), var(--teal-l), var(--teal));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 4s linear infinite;
}
@keyframes shimmer { to { background-position: 200% center; } }

.teal-text { color: var(--teal); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  background: var(--teal-a10);
  border: 1px solid var(--teal-a20);
  padding: 5px 16px;
  border-radius: 100px;
  margin-bottom: 24px;
}
.eyebrow-teal { color: var(--teal-l); background: rgba(26,187,163,0.1); border-color: rgba(26,187,163,0.25); }

.sec-h {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 900;
  color: var(--white);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.sec-p {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.45);
  max-width: 600px;
  margin-bottom: 56px;
  line-height: 1.75;
}

.btn-glow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--teal);
  color: var(--white);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 14px 32px;
  border-radius: 10px;
  box-shadow: 0 4px 24px rgba(17,153,138,0.45);
  transition: background var(--ease), box-shadow var(--ease), transform var(--ease);
}
.btn-glow:hover {
  background: var(--teal-l);
  box-shadow: var(--teal-glow);
  transform: translateY(-3px);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 14px 32px;
  border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,0.14);
  transition: border-color var(--ease), color var(--ease), background var(--ease);
}
.btn-ghost:hover { border-color: var(--teal); color: var(--teal-l); background: var(--teal-a10); }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--deep); }
::-webkit-scrollbar-thumb { background: var(--teal); border-radius: 2px; }

/* ── REVEAL ───────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ══ NAV ══════════════════════════════════════════════ */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: rgba(13,27,42,0.65);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: background var(--ease), box-shadow var(--ease);
}
#nav.scrolled {
  background: rgba(6,13,22,0.92);
  box-shadow: 0 1px 0 rgba(17,153,138,0.2), 0 8px 32px rgba(0,0,0,0.4);
}
.nav-wrap {
  max-width: 1200px; margin: 0 auto; padding: 0 28px;
  height: 68px; display: flex; align-items: center; justify-content: space-between;
}
.nav-brand {
  display: flex; align-items: center; text-decoration: none;
  background: #ffffff;
  padding: 6px 14px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}
.nav-logo { height: 34px; width: auto; object-fit: contain; object-position: left; }
.nav-links { display: flex; align-items: center; gap: 28px; list-style: none; }
.nav-links a {
  text-decoration: none; font-size: 0.88rem; font-weight: 500;
  color: rgba(255,255,255,0.6); transition: color var(--ease);
}
.nav-links a:hover { color: var(--teal-l); }
.nav-btn {
  background: var(--teal) !important; color: var(--white) !important;
  padding: 8px 20px; border-radius: 8px; font-weight: 700 !important;
  box-shadow: 0 2px 12px rgba(17,153,138,0.4);
  transition: background var(--ease), box-shadow var(--ease) !important;
}
.nav-btn:hover { background: var(--teal-l) !important; box-shadow: 0 4px 20px rgba(17,153,138,0.6) !important; }

.burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.burger span { display: block; width: 22px; height: 2px; background: rgba(255,255,255,0.7); border-radius: 2px; transition: all var(--ease); }

.mob-nav {
  display: none; flex-direction: column;
  background: rgba(6,13,22,0.97);
  border-top: 1px solid rgba(17,153,138,0.15);
  padding: 12px 28px 24px; gap: 2px;
}
.mob-nav.open { display: flex; }
.mob-nav a {
  padding: 11px 14px; font-size: 0.95rem; font-weight: 500;
  color: rgba(255,255,255,0.65); text-decoration: none; border-radius: 8px;
  transition: background var(--ease), color var(--ease);
}
.mob-nav a:hover { background: var(--teal-a10); color: var(--teal-l); }
.mob-btn { margin-top: 8px; background: var(--teal) !important; color: var(--white) !important; text-align: center; font-weight: 700 !important; }

@media (max-width: 768px) { .nav-links { display: none; } .burger { display: flex; } }

/* ══ HERO ═════════════════════════════════════════════ */
#hero {
  position: relative; min-height: 100vh;
  background: var(--navy);
  display: flex; align-items: center;
  padding: 110px 0 80px; overflow: hidden;
}
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(17,153,138,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,153,138,0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}
.hero-glow {
  position: absolute; border-radius: 50%;
  pointer-events: none; filter: blur(80px);
}
.glow-1 { width: 600px; height: 600px; top: -100px; left: -100px; background: radial-gradient(circle, rgba(17,153,138,0.18) 0%, transparent 70%); }
.glow-2 { width: 400px; height: 400px; bottom: 0; right: 10%; background: radial-gradient(circle, rgba(17,153,138,0.12) 0%, transparent 70%); }
.glow-3 { width: 300px; height: 300px; top: 40%; left: 40%; background: radial-gradient(circle, rgba(26,187,163,0.08) 0%, transparent 70%); }

.hero-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: center; position: relative; z-index: 1;
}
.hero-tag {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--teal-l);
  background: var(--teal-a10); border: 1px solid var(--teal-a20);
  padding: 7px 18px; border-radius: 100px; margin-bottom: 28px;
}
.tag-dot {
  width: 7px; height: 7px; background: var(--teal); border-radius: 50%;
  box-shadow: 0 0 8px var(--teal);
  animation: blink 2s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1;box-shadow:0 0 8px var(--teal)} 50%{opacity:0.5;box-shadow:0 0 0 var(--teal)} }

.hero-h1 {
  font-size: clamp(2.8rem, 5.5vw, 5rem);
  font-weight: 900; color: var(--white);
  line-height: 1.05; letter-spacing: -0.03em;
  margin-bottom: 24px;
}
.hero-p {
  font-size: 1.1rem; color: rgba(255,255,255,0.5);
  max-width: 500px; margin-bottom: 36px; line-height: 1.75;
}
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 52px; }

.hero-stats { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.hstat { text-align: left; }
.hstat-n {
  font-size: 1.8rem; font-weight: 900; color: var(--white);
  display: inline; letter-spacing: -0.02em;
}
.hstat-s { font-size: 1rem; font-weight: 700; color: var(--teal); }
.hstat-l { font-size: 0.7rem; color: rgba(255,255,255,0.3); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 2px; }
.hstat-div { width: 1px; height: 40px; background: rgba(255,255,255,0.1); }

/* HERO VISUAL — Orb */
.hero-right { position: relative; display: flex; justify-content: center; align-items: center; height: 480px; }
.hero-orb { position: relative; width: 280px; height: 380px; }
.orb-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(17,153,138,0.25);
  animation: spin linear infinite;
}
.r1 { inset: -30px; animation-duration: 12s; }
.r2 { inset: -60px; animation-duration: 20s; animation-direction: reverse; border-color: rgba(17,153,138,0.12); }
.r3 { inset: -90px; animation-duration: 30s; border-color: rgba(17,153,138,0.07); }
@keyframes spin { to { transform: rotate(360deg); } }

.orb-core {
  width: 280px; height: 380px; border-radius: 32px;
  background: linear-gradient(135deg, var(--navy2), var(--navy3));
  border: 1px solid var(--teal-a20);
  box-shadow: 0 0 60px rgba(17,153,138,0.2), inset 0 0 40px rgba(17,153,138,0.05);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.orb-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

.float-card {
  position: absolute;
  background: rgba(17,27,42,0.8);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(17,153,138,0.2);
  border-radius: 14px; padding: 14px 20px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 20px rgba(17,153,138,0.1);
  animation: float 4s ease-in-out infinite;
}
.fc1 { top: 10px; left: -40px; animation-delay: 0s; }
.fc2 { bottom: 60px; right: -40px; animation-delay: 1.3s; }
.fc3 { top: 50%; left: -60px; animation-delay: 2.6s; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.fc-dot { width: 9px; height: 9px; background: var(--teal); border-radius: 50%; box-shadow: 0 0 10px var(--teal); flex-shrink: 0; }
.fc-label { font-size: 0.65rem; color: rgba(255,255,255,0.35); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 2px; }
.fc-val { font-size: 1.1rem; font-weight: 800; color: var(--white); }

.hero-scroll { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: 0.25; }
.scroll-bar { width: 1px; height: 40px; background: linear-gradient(to bottom, transparent, var(--teal)); animation: scrollAnim 2s ease-in-out infinite; }
@keyframes scrollAnim { 0%{height:0;opacity:0} 50%{height:40px;opacity:1} 100%{height:40px;opacity:0;transform:translateY(10px)} }

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-right { display: none; }
}

/* ══ TRUST ════════════════════════════════════════════ */
#trust {
  background: var(--navy2);
  border-top: 1px solid rgba(17,153,138,0.12);
  border-bottom: 1px solid rgba(17,153,138,0.12);
  padding: 52px 0;
}
.trust-eyebrow { text-align: center; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.25); margin-bottom: 22px; }
.trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 36px; }
.tbadge {
  font-size: 0.78rem; font-weight: 600;
  color: rgba(255,255,255,0.55);
  background: var(--t100); border: 1px solid rgba(255,255,255,0.08);
  padding: 7px 16px; border-radius: 100px;
  transition: border-color var(--ease), color var(--ease);
}
.tbadge:hover { border-color: var(--teal-a40); color: var(--teal-l); }
.grant-row { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; text-align: center; }
.grant-num { font-size: 2.8rem; font-weight: 900; line-height: 1; }
.grant-desc { font-size: 0.9rem; color: rgba(255,255,255,0.35); max-width: 360px; line-height: 1.6; }

/* ══ ABOUT ════════════════════════════════════════════ */
#about { padding: 112px 0; background: var(--navy); }
.about-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }

/* ══ GLASS CARD (reused across sections) ══════════════ */
.glass-card {
  background: var(--t100);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r);
  padding: 28px;
  position: relative;
  transition: background var(--ease), border-color var(--ease), box-shadow var(--ease), transform var(--ease);
  overflow: hidden;
}
.glass-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(17,153,138,0.4), transparent);
  opacity: 0; transition: opacity var(--ease);
}
.glass-card:hover {
  background: rgba(17,153,138,0.06);
  border-color: var(--teal-a40);
  box-shadow: 0 0 40px rgba(17,153,138,0.12), 0 8px 32px rgba(0,0,0,0.2);
  transform: translateY(-4px);
}
.glass-card:hover::before { opacity: 1; }
.gc-icon { font-size: 2rem; margin-bottom: 16px; }
.glass-card h3 { font-size: 1rem; font-weight: 700; color: var(--white); margin-bottom: 10px; }
.glass-card p { font-size: 0.87rem; color: rgba(255,255,255,0.45); line-height: 1.65; }
.gc-badge {
  position: absolute; top: 16px; right: 16px;
  background: var(--teal); color: var(--white);
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 3px 10px; border-radius: 100px;
  box-shadow: 0 0 12px rgba(17,153,138,0.5);
}

@media (max-width: 900px) { .about-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 540px) { .about-grid { grid-template-columns: 1fr; } }

/* ══ TESTS ════════════════════════════════════════════ */
#tests { padding: 112px 0; background: var(--navy2); }
.tests-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.test-card {
  background: var(--t100); border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--r); padding: 28px; position: relative;
  transition: background var(--ease), border-color var(--ease), transform var(--ease), box-shadow var(--ease);
  overflow: hidden;
}
.test-card::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--teal), transparent);
  transform: scaleX(0); transition: transform var(--ease);
}
.test-card:hover {
  background: rgba(17,153,138,0.05); border-color: var(--teal-a20);
  transform: translateY(-5px); box-shadow: 0 12px 40px rgba(0,0,0,0.25), 0 0 30px rgba(17,153,138,0.1);
}
.test-card:hover::after { transform: scaleX(1); }
.tc-num { font-size: 3rem; font-weight: 900; color: var(--teal); opacity: 0.15; line-height: 1; margin-bottom: 12px; }
.tc-icon { font-size: 1.8rem; margin-bottom: 14px; }
.test-card h3 { font-size: 1rem; font-weight: 700; color: var(--white); margin-bottom: 8px; }
.test-card p { font-size: 0.86rem; color: rgba(255,255,255,0.4); line-height: 1.65; }

@media (max-width: 900px) { .tests-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 540px) { .tests-grid { grid-template-columns: 1fr; } }

.tests-cat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 40px; }
.tcat-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; padding: 24px; transition: border-color 0.22s, background 0.22s; }
.tcat-card:hover { background: rgba(17,153,138,0.06); border-color: rgba(17,153,138,0.3); }
.tcat-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.tcat-icon { font-size: 1.6rem; }
.tcat-count { font-size: 0.72rem; font-weight: 700; color: #14B8A6; background: rgba(17,153,138,0.12); border: 1px solid rgba(17,153,138,0.2); border-radius: 100px; padding: 3px 10px; }
.tcat-title { font-size: 0.9rem; font-weight: 800; color: #FFFFFF; margin-bottom: 14px; }
.tcat-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tcat-chips span { font-size: 0.72rem; color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 100px; padding: 3px 10px; white-space: nowrap; }
.tcat-soon { font-size: 0.62rem; font-weight: 700; color: #A78BFA; background: rgba(139,92,246,0.12); border: 1px solid rgba(139,92,246,0.25); border-radius: 100px; padding: 1px 6px; margin-left: 2px; vertical-align: middle; }
.tests-cta-bar { margin-top: 36px; display: flex; align-items: center; justify-content: space-between; gap: 24px; background: linear-gradient(135deg, rgba(17,153,138,0.12) 0%, rgba(20,184,166,0.06) 100%); border: 1px solid rgba(17,153,138,0.25); border-radius: 20px; padding: 28px 36px; }
.tcta-title { font-size: 1.05rem; font-weight: 800; color: #FFFFFF; margin-bottom: 4px; }
.tcta-sub { font-size: 0.84rem; color: rgba(255,255,255,0.45); }
.tcta-btn { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 600px) { .tests-cta-bar { flex-direction: column; align-items: flex-start; padding: 24px; } }
@media (max-width: 900px) { .tests-cat-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 540px) { .tests-cat-grid { grid-template-columns: 1fr; } .tests-delivery { flex-direction: column; padding: 20px; } }

/* ══ HOW IT WORKS — ROADMAP ═══════════════════════════ */
#how { padding: 120px 0; background: #0A1628; position: relative; overflow: hidden; }
.how-bg-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(17,153,138,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(17,153,138,0.04) 1px,transparent 1px); background-size: 60px 60px; pointer-events: none; }
.how-glow { position: absolute; border-radius: 50%; filter: blur(120px); pointer-events: none; }
.how-glow-l { width: 700px; height: 700px; top: -100px; left: -250px; background: radial-gradient(circle,rgba(17,153,138,0.16) 0%,transparent 70%); }
.how-glow-r { width: 600px; height: 600px; bottom: -120px; right: -200px; background: radial-gradient(circle,rgba(99,102,241,0.12) 0%,transparent 70%); }
.how-wrap { position: relative; z-index: 1; }
.how-header { text-align: center; margin-bottom: 72px; }
.how-sub { max-width: 500px; margin: 0 auto; }

/* ── shared step row ── */
.rm-row { display: flex; align-items: stretch; gap: 0; }

/* ── step card ── */
.rm-card {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px; padding: 28px 22px;
  position: relative; overflow: hidden;
  transition: border-color 0.3s, background 0.3s, transform 0.3s, box-shadow 0.3s;
}
.rm-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(17,153,138,0.6), transparent);
  opacity: 0; transition: opacity 0.3s;
}
.rm-card:hover::before { opacity: 1; }
.rm-card:hover {
  border-color: rgba(17,153,138,0.35);
  background: rgba(17,153,138,0.05);
  transform: translateY(-5px);
  box-shadow: 0 20px 48px rgba(0,0,0,0.35), 0 0 0 1px rgba(17,153,138,0.1);
}
.rm-card-num {
  font-size: 0.6rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase;
  color: #14B8A6; background: rgba(17,153,138,0.12);
  border: 1px solid rgba(17,153,138,0.28); border-radius: 100px;
  padding: 3px 11px; display: inline-flex; align-self: flex-start;
  margin-bottom: 20px;
}
.rm-card-icon { font-size: 1.8rem; margin-bottom: 14px; line-height: 1; }
.rm-card-title { font-size: 1rem; font-weight: 800; color: #FFFFFF; margin-bottom: 10px; letter-spacing: -0.01em; }
.rm-card-desc { font-size: 0.79rem; color: rgba(255,255,255,0.42); line-height: 1.75; flex: 1; margin-bottom: 20px; }
.rm-card-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; }
.rm-card-tags span {
  font-size: 0.66rem; color: rgba(255,255,255,0.38); white-space: nowrap;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 100px; padding: 3px 10px;
}

/* ── arrow connector between cards ── */
.rm-arrow-conn {
  flex-shrink: 0; width: 44px; display: flex;
  align-items: center; justify-content: center; gap: 0;
}
.rm-ac-line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(17,153,138,0.3), rgba(17,153,138,0.15)); }
.rm-ac-head { font-size: 1.1rem; color: rgba(17,153,138,0.5); font-weight: 900; line-height: 1; flex-shrink: 0; }

/* ── fork ── */
.rm-fork { display: flex; flex-direction: column; align-items: center; margin: 40px 0 0; }
.rm-fork-stem {
  width: 2px; height: 36px;
  background: linear-gradient(to bottom, rgba(17,153,138,0.6), rgba(255,255,255,0.1));
}
.rm-fork-text {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.25); margin: 10px 0 0; padding: 6px 18px;
  border: 1px solid rgba(255,255,255,0.08); border-radius: 100px;
  background: rgba(255,255,255,0.03);
}
.rm-fork-arms { display: flex; width: 68%; margin-top: 0; }
.rm-fork-arm { flex: 1; display: flex; flex-direction: column; align-items: center; }
.rm-fork-arm-line { height: 24px; width: 2px; }
.rm-fork-arm--teal .rm-fork-arm-line { background: linear-gradient(to bottom, rgba(255,255,255,0.08), rgba(17,153,138,0.4)); }
.rm-fork-arm--indigo .rm-fork-arm-line { background: linear-gradient(to bottom, rgba(255,255,255,0.08), rgba(99,102,241,0.4)); }
.rm-fork-arm-drop {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.rm-fork-arm--teal .rm-fork-arm-drop { background: #14B8A6; box-shadow: 0 0 10px rgba(17,153,138,0.6); }
.rm-fork-arm--indigo .rm-fork-arm-drop { background: #818CF8; box-shadow: 0 0 10px rgba(99,102,241,0.6); }
.rm-fork-arm-label {
  font-size: 0.68rem; font-weight: 700; margin-top: 8px;
  padding: 4px 12px; border-radius: 100px;
}
.rm-fork-arm--teal .rm-fork-arm-label { color: #14B8A6; background: rgba(17,153,138,0.12); border: 1px solid rgba(17,153,138,0.25); }
.rm-fork-arm--indigo .rm-fork-arm-label { color: #818CF8; background: rgba(99,102,241,0.12); border: 1px solid rgba(99,102,241,0.25); }

/* ── two outcome tracks ── */
.rm-tracks { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 16px; }
.rm-track {
  border-radius: 24px; padding: 32px 28px;
  display: flex; flex-direction: column; gap: 28px;
  position: relative; overflow: hidden;
}
.rm-track--teal {
  background: linear-gradient(135deg, rgba(17,153,138,0.09) 0%, rgba(17,153,138,0.03) 100%);
  border: 1.5px solid rgba(17,153,138,0.28);
}
.rm-track--indigo {
  background: linear-gradient(135deg, rgba(99,102,241,0.09) 0%, rgba(99,102,241,0.03) 100%);
  border: 1.5px solid rgba(99,102,241,0.28);
}
.rm-track::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  border-radius: 24px 24px 0 0;
}
.rm-track--teal::after { background: linear-gradient(90deg, #14B8A6, rgba(17,153,138,0.3)); }
.rm-track--indigo::after { background: linear-gradient(90deg, #818CF8, rgba(99,102,241,0.3)); }

/* track header */
.rm-track-hd { display: flex; flex-direction: column; gap: 6px; }
.rm-track-pill {
  display: inline-flex; align-self: flex-start;
  font-size: 0.65rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 100px; padding: 4px 12px;
}
.rm-track-pill--teal { color: #14B8A6; background: rgba(17,153,138,0.15); border: 1px solid rgba(17,153,138,0.3); }
.rm-track-pill--indigo { color: #818CF8; background: rgba(99,102,241,0.15); border: 1px solid rgba(99,102,241,0.3); }
.rm-track-name { font-size: 1.05rem; font-weight: 900; color: #FFFFFF; letter-spacing: -0.01em; }
.rm-track-sub { font-size: 0.78rem; color: rgba(255,255,255,0.38); line-height: 1.55; }

/* timeline steps inside track */
.rm-track-flow { display: flex; flex-direction: column; gap: 0; }
.rm-ts { display: flex; align-items: flex-start; gap: 18px; position: relative; padding-bottom: 24px; }
.rm-ts:last-child { padding-bottom: 0; }
.rm-ts-dot {
  flex-shrink: 0; width: 44px; height: 44px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; position: relative; z-index: 1;
  transition: transform 0.25s;
}
.rm-ts:hover .rm-ts-dot { transform: scale(1.1); }
.rm-ts-dot--teal { background: rgba(17,153,138,0.15); border: 2px solid rgba(17,153,138,0.45); }
.rm-ts-dot--teal.rm-ts-dot--end { background: rgba(17,153,138,0.22); border-color: rgba(17,153,138,0.7); box-shadow: 0 0 16px rgba(17,153,138,0.3); }
.rm-ts-dot--indigo { background: rgba(99,102,241,0.15); border: 2px solid rgba(99,102,241,0.45); }
.rm-ts-dot--indigo.rm-ts-dot--end { background: rgba(99,102,241,0.22); border-color: rgba(99,102,241,0.7); box-shadow: 0 0 16px rgba(99,102,241,0.3); }
.rm-ts-line {
  position: absolute; left: 22px; top: 44px; bottom: 0;
  width: 2px; transform: translateX(-50%);
}
.rm-ts-line--teal { background: linear-gradient(to bottom, rgba(17,153,138,0.4), rgba(17,153,138,0.05)); }
.rm-ts-line--indigo { background: linear-gradient(to bottom, rgba(99,102,241,0.4), rgba(99,102,241,0.05)); }
.rm-ts-body { padding-top: 10px; flex: 1; min-width: 0; }
.rm-ts-title { font-size: 0.9rem; font-weight: 800; color: #FFFFFF; margin-bottom: 5px; }
.rm-ts-desc { font-size: 0.76rem; color: rgba(255,255,255,0.42); line-height: 1.65; }

/* ── converge lines ── */
.rm-converge { display: flex; flex-direction: column; align-items: center; margin-top: 4px; }
.rm-conv-arms { display: flex; width: 50%; align-items: flex-end; height: 36px; }
.rm-conv-arm { flex: 1; height: 100%; }
.rm-conv-arm--teal { border-bottom: 2px solid rgba(17,153,138,0.3); border-left: 2px solid rgba(17,153,138,0.3); border-radius: 0 0 0 12px; }
.rm-conv-arm--indigo { border-bottom: 2px solid rgba(99,102,241,0.3); border-right: 2px solid rgba(99,102,241,0.3); border-radius: 0 0 12px 0; }
.rm-conv-center { width: 2px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 0; }
.rm-conv-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.3); box-shadow: 0 0 12px rgba(255,255,255,0.15); flex-shrink: 0; }
.rm-conv-stem { width: 2px; height: 28px; background: linear-gradient(to bottom, rgba(255,255,255,0.2), rgba(17,153,138,0.4)); }

/* ── DocBot Cares finale card ── */
.rm-cares {
  background: linear-gradient(135deg, rgba(17,153,138,0.12) 0%, rgba(20,184,166,0.04) 60%, rgba(99,102,241,0.06) 100%);
  border: 1.5px solid rgba(17,153,138,0.3);
  border-radius: 28px; padding: 48px 48px 44px;
  position: relative; overflow: hidden;
}
.rm-cares::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #14B8A6, #818CF8, #14B8A6);
}
.rm-cares::after {
  content: ''; position: absolute; top: -80px; right: -80px;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(17,153,138,0.1) 0%, transparent 70%);
  pointer-events: none;
}
.rm-cares-inner { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; position: relative; z-index: 1; }
.rm-cares-eyebrow { font-size: 0.65rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #14B8A6; margin-bottom: 10px; }
.rm-cares-title { font-size: 1.6rem; font-weight: 900; color: #FFFFFF; letter-spacing: -0.02em; margin-bottom: 14px; line-height: 1.15; }
.rm-cares-desc { font-size: 0.82rem; color: rgba(255,255,255,0.5); line-height: 1.75; max-width: 400px; }
.rm-cares-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex-shrink: 0; }
.rm-cares-feat {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; padding: 12px 16px; white-space: nowrap;
  transition: background 0.2s, border-color 0.2s;
}
.rm-cares-feat:hover { background: rgba(17,153,138,0.08); border-color: rgba(17,153,138,0.2); }
.rm-cf-icon { font-size: 1.1rem; flex-shrink: 0; }
.rm-cf-label { font-size: 0.78rem; font-weight: 700; color: rgba(255,255,255,0.75); }

/* ── mobile ── */
@media (max-width: 900px) {
  .rm-row { flex-direction: column; }
  .rm-arrow-conn { width: auto; height: 28px; flex-direction: column; }
  .rm-ac-line { width: 1px; height: auto; flex: 1; }
  .rm-ac-head { transform: rotate(90deg); }
  .rm-tracks { grid-template-columns: 1fr; }
  .rm-fork-arms { width: 80%; }
  .rm-conv-arms { width: 70%; }
  .rm-cares { padding: 32px 24px; }
  .rm-cares-inner { grid-template-columns: 1fr; gap: 28px; }
  .rm-cares-grid { grid-template-columns: 1fr 1fr; }
  .rm-cares-desc { max-width: 100%; }
}
.step {
  display: grid; grid-template-columns: 80px 1fr;
  gap: 24px; align-items: flex-start; padding: 24px 0;
}
.step-n {
  font-size: 3rem; font-weight: 900;
  color: var(--teal); line-height: 1;
  text-shadow: 0 0 30px rgba(17,153,138,0.4);
}
.step-body h3 { font-size: 1.1rem; font-weight: 700; color: var(--white); margin-bottom: 6px; }
.step-body p { font-size: 0.88rem; color: rgba(255,255,255,0.4); line-height: 1.65; }
.step-line { height: 1px; background: linear-gradient(90deg, rgba(17,153,138,0.3), transparent); margin: 0 0 0 80px; }

/* ══ OEM ══════════════════════════════════════════════ */
#oem { padding: 112px 0; background: var(--navy2); }
.oem-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 72px; }
.oem-grid--4 { grid-template-columns: repeat(4,1fr); }
.glass-card--link { text-decoration: none; display: flex; flex-direction: column; cursor: pointer; }
.glass-card--link:hover { transform: translateY(-4px); border-color: rgba(20,184,166,0.5); }
.gc-arrow { margin-top: auto; padding-top: 18px; font-size: 1.1rem; font-weight: 900; color: #14B8A6; }
@media (max-width: 900px) { .oem-grid { grid-template-columns: repeat(2,1fr); } .oem-grid--4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 540px) { .oem-grid { grid-template-columns: 1fr; } .oem-grid--4 { grid-template-columns: 1fr; } }

/* ── compare section ── */
#compare { padding: 100px 0; background: #060E1A; position: relative; overflow: hidden; }
#compare::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(17,153,138,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(17,153,138,0.03) 1px,transparent 1px);
  background-size: 60px 60px; pointer-events: none;
}
#compare .sec-h, #compare .eyebrow, #compare .sec-p { color: inherit; }
#compare .sec-p { color: rgba(255,255,255,0.45); }
#compare > .wrap { position: relative; z-index: 1; text-align: center; }

.vs-wrap { max-width: 680px; margin: 48px auto 0; }
.vs-table { border-radius: 20px; overflow: hidden; border: 1px solid rgba(17,153,138,0.2); background: rgba(255,255,255,0.02); }
.vs-head, .vs-row { display: grid; grid-template-columns: 2fr 1.5fr 1.5fr; padding: 15px 28px; font-size: 0.88rem; }
.vs-head {
  background: rgba(17,153,138,0.12); font-weight: 800; color: rgba(255,255,255,0.85);
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em;
  border-bottom: 1px solid rgba(17,153,138,0.2);
}
.vs-row { color: rgba(255,255,255,0.5); border-bottom: 1px solid rgba(255,255,255,0.04); transition: background 0.2s; }
.vs-row:last-child { border-bottom: none; }
.vs-cat { padding: 7px 28px; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal); background: rgba(17,153,138,0.07); border-bottom: 1px solid rgba(17,153,138,0.1); }
.vs-row:hover { background: rgba(17,153,138,0.05); color: rgba(255,255,255,0.7); }

/* ══ AI ROADMAP ═══════════════════════════════════════ */
#ai {
  position: relative; padding: 112px 0;
  background: var(--deep); overflow: hidden;
}
.ai-glow {
  position: absolute; width: 600px; height: 600px;
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(17,153,138,0.12) 0%, transparent 65%);
  pointer-events: none;
}
.ai-inner { position: relative; z-index: 1; text-align: center; }
.ai-h, .ai-p { text-align: center; }
.ai-p { margin: 0 auto 52px; }
.ai-pills { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 52px; }
.ai-pill {
  padding: 10px 22px; border-radius: 100px;
  font-size: 0.88rem; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
  transition: all var(--ease);
}
.ai-pill.active {
  background: rgba(17,153,138,0.12); border: 1px solid rgba(17,153,138,0.3);
  color: var(--teal-l); box-shadow: 0 0 20px rgba(17,153,138,0.1);
}
.ai-pill.coming {
  background: var(--t100); border: 1px dashed rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.3);
}
.pill-dot { width: 7px; height: 7px; background: var(--teal); border-radius: 50%; box-shadow: 0 0 8px var(--teal); }
.ai-stat {
  font-size: 1.2rem; font-weight: 600; color: rgba(255,255,255,0.5);
  text-align: center;
}

/* ══ FOUNDER ══════════════════════════════════════════ */
#founder { padding: 112px 0; background: var(--navy); }
.founder-card {
  display: flex; gap: 40px; align-items: flex-start;
  background: var(--t100); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px; padding: 40px;
  box-shadow: 0 0 60px rgba(0,0,0,0.3);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.founder-card:hover {
  border-color: var(--teal-a20);
  box-shadow: 0 0 60px rgba(0,0,0,0.3), 0 0 40px rgba(17,153,138,0.08);
}
.founder-av {
  width: 88px; height: 88px; flex-shrink: 0; border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), var(--teal-d));
  color: var(--white); font-size: 1.8rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 30px rgba(17,153,138,0.4);
}
.founder-name { font-size: 1.5rem; font-weight: 800; color: var(--white); margin-bottom: 4px; }
.founder-role { font-size: 0.88rem; color: var(--teal); font-weight: 600; margin-bottom: 4px; }
.founder-loc { font-size: 0.8rem; color: rgba(255,255,255,0.3); margin-bottom: 20px; }
.founder-bio { font-size: 0.95rem; color: rgba(255,255,255,0.5); line-height: 1.75; margin-bottom: 20px; }
.founder-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.founder-tags span {
  font-size: 0.73rem; font-weight: 600; padding: 4px 12px; border-radius: 100px;
  background: var(--teal-a10); color: var(--teal-l); border: 1px solid var(--teal-a20);
}
/* Photo avatar override */
.founder-av--photo {
  object-fit: cover;
  object-position: center top;
  background: none;
  font-size: 0;
  color: transparent;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(17,153,138,0.35), 0 4px 24px rgba(0,0,0,0.18);
}
/* LinkedIn button */
.founder-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  font-size: 0.83rem;
  font-weight: 700;
  color: #0A66C2;
  text-decoration: none;
  background: rgba(10,102,194,0.08);
  border: 1px solid rgba(10,102,194,0.22);
  padding: 7px 16px;
  border-radius: 100px;
  transition: background 0.2s, border-color 0.2s;
}
.founder-linkedin:hover {
  background: rgba(10,102,194,0.14);
  border-color: rgba(10,102,194,0.4);
}
@media (max-width: 640px) { .founder-card { flex-direction: column; } }

/* ══ PRESS ════════════════════════════════════════════ */
#press { padding: 80px 0; background: var(--navy2); }
.press-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.press-card {
  background: var(--t100); border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--r); padding: 22px; font-size: 0.88rem;
  font-weight: 600; color: rgba(255,255,255,0.5); text-align: center;
  transition: background var(--ease), border-color var(--ease), color var(--ease), transform var(--ease);
}
.press-card:hover { background: var(--teal-a10); border-color: var(--teal-a20); color: var(--teal-l); transform: translateY(-3px); }
@media (max-width: 768px) { .press-grid { grid-template-columns: repeat(2,1fr); } }

/* ══ CONTACT ══════════════════════════════════════════ */
#contact {
  position: relative; padding: 112px 0 0;
  background: linear-gradient(180deg, var(--navy) 0%, var(--deep) 100%);
  overflow: hidden;
}
.contact-glow {
  position: absolute; width: 700px; height: 400px;
  top: 0; left: 50%; transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(17,153,138,0.15) 0%, transparent 65%);
  pointer-events: none;
}
.contact-inner { position: relative; z-index: 1; text-align: center; padding-bottom: 80px; }
.contact-h {
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 900; color: var(--white);
  line-height: 1.1; letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.contact-p { font-size: 1.05rem; color: rgba(255,255,255,0.4); max-width: 480px; margin: 0 auto 36px; line-height: 1.75; }
.contact-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ══ FOOTER ═══════════════════════════════════════════ */
footer {
  background: var(--deep);
  border-top: 1px solid rgba(17,153,138,0.12);
  padding: 64px 0 0;
  color: rgba(255,255,255,0.35);
  font-size: 0.85rem;
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 52px; }
.foot-logo {
  height: 34px; width: auto; object-fit: contain; object-position: left;
  margin-bottom: 16px; display: inline-block;
  background: #ffffff; padding: 6px 12px; border-radius: 6px;
}
.foot-brand p { line-height: 1.7; margin-bottom: 12px; }
.foot-cert { font-size: 0.72rem; color: rgba(255,255,255,0.2); }
.foot-col h4 { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: 18px; }
.foot-col a { display: block; text-decoration: none; color: rgba(255,255,255,0.3); margin-bottom: 10px; transition: color var(--ease); line-height: 1.5; }
.foot-col a:hover { color: var(--teal-l); }
.foot-col p { line-height: 1.65; margin-bottom: 10px; }
.foot-cin { font-size: 0.75rem; }
.foot-bottom {
  border-top: 1px solid rgba(255,255,255,0.05); padding: 20px 28px;
  display: flex; justify-content: center; text-align: center;
  font-size: 0.75rem; color: rgba(255,255,255,0.2);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }

/* ══ PARTNER LOGO STRIPS ══════════════════════════════════════════════ */
.trust-header { margin-bottom: 0; }

.ps-wrap { margin-top: 40px; }
.ps-wrap--last { margin-bottom: 0; }

.ps-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 16px;
  border-radius: 100px;
  margin-bottom: 16px;
}
.ps-label--gold {
  background: rgba(251,191,36,0.10);
  border: 1px solid rgba(251,191,36,0.28);
  color: rgba(251,191,36,0.90);
}
.ps-label--teal {
  background: var(--teal-a10);
  border: 1px solid var(--teal-a20);
  color: var(--teal-l);
}
.ps-label--slate {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.45);
}

.ps-track-outer {
  position: relative;
  overflow: hidden;
}
.ps-fade {
  position: absolute;
  top: 0; bottom: 0;
  width: 140px;
  z-index: 2;
  pointer-events: none;
}
.ps-fade--l { left: 0;  background: linear-gradient(to right, var(--navy2) 30%, transparent); }
.ps-fade--r { right: 0; background: linear-gradient(to left,  var(--navy2) 30%, transparent); }

.ps-track {
  display: flex;
  width: max-content;
  align-items: center;
  padding: 8px 0 16px;
  animation: ps-scroll 30s linear infinite;
}
.ps-track--rev  { animation-direction: reverse; animation-duration: 38s; }
.ps-track:hover { animation-play-state: paused; }

@keyframes ps-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.ps-logo {
  flex-shrink: 0;
  margin: 0 10px;
  background: rgba(255,255,255,0.93);
  border-radius: 12px;
  padding: 10px 20px;
  height: 80px;
  min-width: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 20px rgba(0,0,0,0.30), 0 1px 0 rgba(255,255,255,0.06) inset;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  cursor: default;
}
.ps-logo:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 32px rgba(0,0,0,0.40), 0 0 0 1px rgba(17,153,138,0.25);
}
.ps-logo--wide { min-width: 160px; padding: 10px 24px; }

.ps-logo img {
  height: 46px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  display: block;
}

@media (max-width: 768px) {
  .ps-logo       { height: 68px; padding: 8px 16px; }
  .ps-logo img   { height: 38px; max-width: 140px; }
  .ps-logo--wide { min-width: 130px; }
  .ps-fade       { width: 60px; }
}

/* ── TRUST SECTION — LIGHT / WHITE BG ──────────────────────────────── */
#trust {
  background: #F8FAFC;
  border-top: 1px solid #E2E8F0;
  border-bottom: 1px solid #E2E8F0;
  padding: 0 0 40px;
}
.trust-header {
  padding: 56px 0 24px;
  text-align: center;
}
.trust-header .eyebrow {
  color: #64748B;
}
.trust-h {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: #0D1B2A;
  margin: 12px 0 0;
  line-height: 1.25;
}
.trust-h-accent { color: #14B8A6; }
#trust .ps-fade--l { background: linear-gradient(to right, #F8FAFC 30%, transparent); }
#trust .ps-fade--r { background: linear-gradient(to left,  #F8FAFC 30%, transparent); }
#trust .ps-logo {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  box-shadow: 0 1px 8px rgba(0,0,0,0.06);
}
#trust .ps-logo:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.10), 0 0 0 1.5px rgba(20,184,166,0.35);
}
#trust .ps-label--gold {
  background: rgba(245,158,11,0.08);
  border-color: rgba(245,158,11,0.28);
  color: #92400E;
}
#trust .ps-label--teal {
  background: rgba(20,184,166,0.08);
  border-color: rgba(20,184,166,0.28);
  color: #0D9488;
}

/* ── CERTIFICATIONS SECTION (DARK STANDALONE) ────────────────────────── */
#certifications {
  position: relative;
  background: linear-gradient(135deg, #0B1826 0%, #112236 60%, #0D1B2A 100%);
  padding: 80px 0 72px;
  text-align: center;
  overflow: hidden;
}
.cert-bg-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.cert-bg-glow--1 {
  width: 500px; height: 500px;
  top: -120px; left: -100px;
  background: radial-gradient(circle, rgba(17,153,138,0.08) 0%, transparent 70%);
}
.cert-bg-glow--2 {
  width: 400px; height: 400px;
  bottom: -80px; right: -60px;
  background: radial-gradient(circle, rgba(17,153,138,0.06) 0%, transparent 70%);
}
.cert-sec-h { margin-bottom: 16px; }
.cert-sec-p {
  max-width: 600px;
  margin: 0 auto 40px;
  color: rgba(255,255,255,0.50);
}

/* ── CERTIFICATION ROW ──────────────────────────────────────────────── */
.cert-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
  padding: 12px 28px 8px;
  max-width: 900px;
  margin: 0 auto;
}
.cert-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  padding: 20px 24px;
  min-width: 140px;
  text-align: center;
  transition: border-color var(--ease), background var(--ease), transform var(--ease);
  cursor: default;
}
.cert-card:hover {
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.08);
  transform: translateY(-3px);
}
.cert-card--wide { min-width: 210px; }
.cert-card img {
  width: 76px;
  height: 76px;
  object-fit: contain;
  display: block;
}
.cert-card--wide img {
  width: 140px;
  height: 64px;
  border-radius: 8px;
}
.cert-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255,255,255,0.80);
  letter-spacing: 0.04em;
}
.cert-sub {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.35);
  line-height: 1.5;
}

@media (max-width: 540px) {
  .cert-row { gap: 12px; }
  .cert-card { min-width: 120px; padding: 16px 16px; }
  .cert-card img { width: 60px; height: 60px; }
  .cert-card--wide img { width: 110px; height: 50px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   LIGHT / WHITE THEME  —  DocBot Design System v1.3
   Background #FFFFFF · Text #0D1B2A · Accent #14B8A6 (decorative only)
   Dark exceptions: #hero, #ai, #certifications, footer (by design)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── GLOBAL BASE ─────────────────────────────────────────────────────── */
body {
  background: #FFFFFF;
  color: #1E293B;
}
::-webkit-scrollbar-track { background: #F1F5F9; }

/* Section headings & body copy on light bg */
.sec-h { color: #0D1B2A; }
.sec-p { color: #64748B; }

/* Eyebrow pills — teal fails WCAG on white; use accessible dark tokens */
.eyebrow {
  color: #0D1B2A;
  background: #F1F5F9;
  border-color: #CBD5E1;
}
.eyebrow-teal {
  color: #0D9488;
  background: rgba(20,184,166,0.08);
  border-color: rgba(20,184,166,0.28);
}

/* Ghost button on white bg */
.btn-ghost {
  color: #475569;
  border-color: #CBD5E1;
}
.btn-ghost:hover {
  border-color: #14B8A6;
  color: #0D9488;
  background: rgba(20,184,166,0.06);
}

/* ── NAV — white frosted glass ──────────────────────────────────────── */
#nav {
  background: rgba(255,255,255,0.90);
  border-bottom: 1px solid #E2E8F0;
}
#nav.scrolled {
  background: rgba(255,255,255,0.98);
  box-shadow: 0 1px 0 #E2E8F0, 0 4px 24px rgba(0,0,0,0.06);
}
/* Logo no longer needs a white pill — nav is already white */
.nav-brand { background: transparent; padding: 0; box-shadow: none; }
.nav-logo { height: 38px; }
.nav-links a { color: #334155; }
.nav-links a:hover { color: #0D1B2A; }
.burger span { background: #475569; }
.mob-nav { background: #FFFFFF; border-top: 1px solid #E2E8F0; }
.mob-nav a { color: #334155; }
.mob-nav a:hover { background: #F8FAFC; color: #0D1B2A; }

/* ── HERO — stays dark by design ───────────────────────────────────── */
#hero { background: var(--navy); }
/* Explicitly re-assert hero text colors so body override doesn't bleed */
.hero-h1  { color: #FFFFFF; }
.hero-p   { color: rgba(255,255,255,0.50); }
.hstat-n  { color: #FFFFFF; }
.hstat-l  { color: rgba(255,255,255,0.30); }
.hstat-div { background: rgba(255,255,255,0.10); }
.hero-tag { color: var(--teal-l); }

/* ── ABOUT — white ──────────────────────────────────────────────────── */
#about { background: #FFFFFF; }
.glass-card {
  background: #F8FAFC;
  border-color: #E2E8F0;
}
.glass-card::before { display: none; }
.glass-card:hover {
  background: rgba(20,184,166,0.04);
  border-color: rgba(20,184,166,0.30);
  box-shadow: 0 8px 32px rgba(0,0,0,0.07);
  transform: translateY(-4px);
}
.glass-card h3 { color: #0D1B2A; }
.glass-card p  { color: #64748B; }

/* ── TESTS — light gray ─────────────────────────────────────────────── */
#tests { background: #F8FAFC; }
.test-card {
  background: #FFFFFF;
  border-color: #E2E8F0;
}
.test-card:hover {
  background: rgba(20,184,166,0.03);
  border-color: rgba(20,184,166,0.25);
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}
.tc-num { color: #14B8A6; opacity: 0.25; }
.test-card h3 { color: #0D1B2A; }
.test-card p  { color: #64748B; }
.tcat-card { background: #FFFFFF; border-color: #E2E8F0; }
.tcat-card:hover { background: rgba(20,184,166,0.03); border-color: rgba(20,184,166,0.3); box-shadow: 0 6px 28px rgba(0,0,0,0.07); }
.tcat-title { color: #0D1B2A; }
.tcat-chips span { color: #475569; background: #F1F5F9; border-color: #E2E8F0; }
.tests-cta-bar { background: linear-gradient(135deg, rgba(20,184,166,0.07) 0%, rgba(20,184,166,0.03) 100%); border-color: rgba(20,184,166,0.2); }
.tcta-title { color: #0D1B2A; }
.tcta-sub { color: #64748B; }

/* ── HOW IT WORKS — always dark ────────────────────────────────────── */
#how { background: #0A1628; }


/* ── HOW IT WORKS — simplified steps ─────────────────────────────── */
.how-steps {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.how-step {
  flex: 1;
  min-width: 140px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  transition: background 0.2s, border-color 0.2s;
}
.how-step:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(17,153,138,0.3);
}
.how-step--teal { border-color: rgba(17,153,138,0.25); background: rgba(17,153,138,0.07); }
.how-step--teal:hover { background: rgba(17,153,138,0.12); }
.how-step-num {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #14B8A6;
  margin-bottom: 12px;
  opacity: 0.7;
}
.how-step-icon { font-size: 1.7rem; margin-bottom: 12px; line-height: 1; }
.how-step-title { font-size: 0.95rem; font-weight: 800; color: #fff; margin-bottom: 8px; letter-spacing: -0.01em; }
.how-step-desc { font-size: 0.75rem; color: rgba(255,255,255,0.40); line-height: 1.7; }
.how-step-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.15);
  font-size: 1.1rem;
  padding: 0 6px;
  flex-shrink: 0;
  align-self: center;
}
.how-outcomes {
  display: flex;
  align-items: center;
  gap: 20px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  padding: 24px 32px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.how-outcome {
  flex: 1;
  min-width: 220px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.how-outcome-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 2px; }
.how-outcome-name { font-size: 0.9rem; font-weight: 800; color: #fff; margin-bottom: 4px; }
.how-outcome--teal .how-outcome-name { color: #14B8A6; }
.how-outcome--indigo .how-outcome-name { color: #818CF8; }
.how-outcome-desc { font-size: 0.75rem; color: rgba(255,255,255,0.40); line-height: 1.6; }
.how-outcome-sep {
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(255,255,255,0.18);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  flex-shrink: 0;
  align-self: center;
}
.how-cares {
  background: linear-gradient(135deg, rgba(17,153,138,0.12), rgba(99,102,241,0.08));
  border: 1px solid rgba(17,153,138,0.2);
  border-radius: 20px;
  padding: 28px 32px;
}
.hc-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 10px; }
.hc-title { font-size: 0.95rem; font-weight: 700; color: rgba(255,255,255,0.88); }
.hc-langs { font-size: 11px; font-weight: 700; color: #14B8A6; letter-spacing: 0.06em; background: rgba(17,153,138,0.15); border: 1px solid rgba(17,153,138,0.25); padding: 4px 12px; border-radius: 99px; }
.hc-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.hc-pills span { font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 99px; padding: 6px 14px; }
.how-cares-inner { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.how-cares-title { font-size: 0.92rem; font-weight: 700; color: rgba(255,255,255,0.85); flex-shrink: 0; }
.how-cares-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.how-cares-tags span {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 99px;
  padding: 4px 12px;
}
@media (max-width: 700px) {
  .how-steps { gap: 8px; }
  .how-step-arrow { display: none; }
  .how-step { min-width: calc(50% - 8px); flex: none; width: calc(50% - 8px); }
  .how-outcomes { flex-direction: column; gap: 16px; }
  .how-outcome-sep { align-self: auto; }
}

/* ── OEM / BUSINESS — light gray ───────────────────────────────────── */
#oem { background: #F8FAFC; }
.teal-text { color: #0D9488; } /* darkened for WCAG AA on white */

/* ── COMPARE — always dark ─────────────────────────────────────────── */
#compare { background: #060E1A; }
#compare .vs-table { border-color: rgba(17,153,138,0.2); background: rgba(255,255,255,0.02); }
#compare .vs-head { background: rgba(17,153,138,0.12); color: rgba(255,255,255,0.85); border-bottom-color: rgba(17,153,138,0.2); }
#compare .vs-row { color: rgba(255,255,255,0.5); border-bottom-color: rgba(255,255,255,0.04); }
#compare .vs-row:hover { background: rgba(17,153,138,0.05); }
#compare .teal-text { color: #14B8A6; }
#compare .sec-h { color: #FFFFFF; }
#compare .eyebrow { color: #14B8A6; }

/* ── comparison table redesign ── */
.cmp-wrap { max-width: 900px; margin: 56px auto 0; }
.cmp-table { border-radius: 20px; overflow: hidden; border: 1px solid rgba(17,153,138,0.22); background: rgba(255,255,255,0.015); }

/* header row */
.cmp-head { display: grid; grid-template-columns: 2fr 1.6fr 1fr; border-bottom: 1px solid rgba(17,153,138,0.2); }
.cmp-h-feat { padding: 16px 28px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.02); }
.cmp-h-db { padding: 16px 24px; background: rgba(17,153,138,0.14); border-left: 1px solid rgba(17,153,138,0.25); border-right: 1px solid rgba(17,153,138,0.25); font-size: 13px; font-weight: 800; color: #14B8A6; display: flex; align-items: center; gap: 8px; letter-spacing: 0.01em; }
.cmp-h-ot { padding: 16px 24px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.02); }

/* category separator */
.cmp-cat { padding: 8px 28px; font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #14B8A6; background: rgba(17,153,138,0.08); border-top: 1px solid rgba(17,153,138,0.14); border-bottom: 1px solid rgba(17,153,138,0.1); }

/* data rows */
.cmp-row { display: grid; grid-template-columns: 2fr 1.6fr 1fr; border-bottom: 1px solid rgba(255,255,255,0.04); transition: background 0.15s; }
.cmp-row--last { border-bottom: none; }
.cmp-row:hover .cmp-feat { color: rgba(255,255,255,0.9); }
.cmp-row:hover { background: rgba(255,255,255,0.015); }

/* columns */
.cmp-feat { padding: 15px 28px; font-size: 0.86rem; font-weight: 500; color: rgba(255,255,255,0.6); display: flex; align-items: center; }
.cmp-db { padding: 15px 24px; background: rgba(17,153,138,0.07); border-left: 1px solid rgba(17,153,138,0.12); border-right: 1px solid rgba(17,153,138,0.12); font-size: 0.84rem; font-weight: 600; color: #14B8A6; display: flex; align-items: center; gap: 8px; }
.cmp-ot { padding: 15px 24px; font-size: 0.84rem; color: rgba(255,255,255,0.2); display: flex; align-items: center; }
.cmp-no { color: rgba(255,90,90,0.38) !important; font-size: 1rem; font-weight: 700; }

/* value + check badges */
.cmp-val { font-weight: 800; font-size: 0.92rem; color: #14B8A6; }
.cmp-tick { width: 17px; height: 17px; border-radius: 50%; background: rgba(17,153,138,0.22); border: 1px solid rgba(17,153,138,0.45); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cmp-tick::before { content: ''; display: block; width: 8px; height: 5px; border-left: 1.5px solid #14B8A6; border-bottom: 1.5px solid #14B8A6; transform: rotate(-45deg) translateY(-1px); }

@media (max-width: 640px) {
  .cmp-head, .cmp-row { grid-template-columns: 1.4fr 1.3fr 0.8fr; }
  .cmp-feat, .cmp-db, .cmp-ot, .cmp-h-feat, .cmp-h-db, .cmp-h-ot { padding: 12px 14px; font-size: 0.78rem; }
  .cmp-cat { padding: 7px 14px; }
}

/* ── AI ROADMAP — stays dark by design (vision statement) ───────────── */
#ai { background: var(--deep); }
#ai .sec-h  { color: #FFFFFF; }
#ai .sec-p  { color: rgba(255,255,255,0.45); }
#ai .eyebrow-teal {
  color: var(--teal-l);
  background: rgba(26,187,163,0.10);
  border-color: rgba(26,187,163,0.25);
}

/* ── FOUNDER — white ────────────────────────────────────────────────── */
#founder { background: #FFFFFF; }
.founder-card {
  background: #F8FAFC;
  border-color: #E2E8F0;
  box-shadow: 0 1px 16px rgba(0,0,0,0.05);
}
.founder-card:hover {
  border-color: rgba(20,184,166,0.30);
  box-shadow: 0 8px 40px rgba(0,0,0,0.09), 0 0 0 1px rgba(20,184,166,0.12);
}
.founder-name { color: #0D1B2A; }
.founder-role { color: #0D9488; }
.founder-loc  { color: #94A3B8; }
.founder-bio  { color: #64748B; }
.founder-tags span {
  background: rgba(20,184,166,0.08);
  color: #0D9488;
  border-color: rgba(20,184,166,0.25);
}

/* ── PRESS — light gray ─────────────────────────────────────────────── */
#press { background: #F8FAFC; }
.press-card {
  background: #FFFFFF;
  border-color: #E2E8F0;
  color: #64748B;
}
.press-card:hover {
  background: rgba(20,184,166,0.04);
  border-color: rgba(20,184,166,0.25);
  color: #0D9488;
  transform: translateY(-3px);
}

/* ── CONTACT — white ────────────────────────────────────────────────── */
#contact { background: #FFFFFF; }
.contact-glow { opacity: 0.18; }
.contact-h { color: #0D1B2A; }
.contact-p { color: #64748B; }

/* ── #certifications already dark — restore its text explicitly ──────── */
#certifications .sec-h  { color: #FFFFFF; }
#certifications .eyebrow-teal {
  color: var(--teal-l);
  background: rgba(26,187,163,0.10);
  border-color: rgba(26,187,163,0.25);
}

/* ── FOOTER stays dark — standard pattern ───────────────────────────── */
footer { background: var(--deep); color: rgba(255,255,255,0.35); }

/* ══ PRESS — full article cards ═══════════════════════════════════════ */
.press-intro-p { text-align: center; max-width: 600px; margin: 8px auto 28px; }

.press-awards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 36px;
}
.press-award {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 100px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #334155;
  white-space: nowrap;
}

.press-articles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 768px) { .press-articles { grid-template-columns: 1fr; } }

.press-article {
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-width: 1px;
  border-style: solid;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.press-article:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,0.08); }

.press-article--orange { background: #FFF7ED; border-color: #FED7AA; }
.press-article--blue   { background: #EFF6FF; border-color: #BFDBFE; }
.press-article--green  { background: #F0FDF4; border-color: #BBF7D0; }
.press-article--indigo { background: #EEF2FF; border-color: #C7D2FE; }

.pa-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pa-pub-row { display: flex; align-items: center; gap: 12px; }

.pa-badge {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex-shrink: 0;
}
.pa-badge--orange { background: #FFEDD5; }
.pa-badge--blue   { background: #DBEAFE; }
.pa-badge--green  { background: #DCFCE7; }
.pa-badge--indigo { background: #E0E7FF; }

.pa-pub-name {
  font-size: 0.68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.1em; margin: 0;
}
.pa-pub-name--orange { color: #C2410C; }
.pa-pub-name--blue   { color: #1D4ED8; }
.pa-pub-name--green  { color: #15803D; }
.pa-pub-name--indigo { color: #4338CA; }

.pa-date { font-size: 0.72rem; color: #94A3B8; margin: 3px 0 0; }
.pa-news-icon { color: #CBD5E1; font-size: 1.1rem; margin-top: 2px; flex-shrink: 0; }

.pa-headline { font-size: 1rem; font-weight: 700; color: #1A1A1A; line-height: 1.4; margin: 0; }
.pa-excerpt  { font-size: 0.875rem; color: #64748B; line-height: 1.65; flex: 1; margin: 0; }

.pa-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.82rem; font-weight: 700;
  text-decoration: none; cursor: pointer;
  background: none; border: none; padding: 0; font-family: inherit;
}
.pa-cta:hover { text-decoration: underline; }
.pa-cta--orange { color: #C2410C; }
.pa-cta--blue   { color: #1D4ED8; }
.pa-cta--green  { color: #15803D; }
.pa-cta--indigo { color: #4338CA; }

/* ══ DEPLOYMENT GALLERY — exact port of app 3 DeploymentGallery.tsx ══ */

/* w-full bg-white py-24 md:py-36 */
#gallery {
  background: #FFFFFF;
  padding: 96px 0;
}
@media (min-width: 768px) { #gallery { padding: 144px 0; } }

/* max-w-7xl mx-auto px-5 md:px-10 lg:px-16 */
#gallery .gal-inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 768px) { #gallery .gal-inner { padding: 0 40px; } }
@media (min-width: 1024px) { #gallery .gal-inner { padding: 0 64px; } }

/* flex flex-col md:flex-row md:items-end justify-between gap-6 mb-10 */
.gal-header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
}
@media (min-width: 768px) {
  .gal-header { flex-direction: row; align-items: flex-end; }
}

/* inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[11px] font-bold uppercase tracking-widest mb-4 border border-gray-200 text-gray-500 */
.gal-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
  border: 1px solid #E5E7EB;
  color: #6B7280;
  background: none;
}

/* text-4xl md:text-5xl font-black text-gray-950 tracking-tight leading-[1.05] */
.gal-h {
  font-size: 2.25rem;
  font-weight: 900;
  color: #030712;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0;
}
@media (min-width: 768px) { .gal-h { font-size: 3rem; } }

/* text-emerald-500 */
.gal-h-accent { color: #10B981; }

/* flex flex-wrap gap-2 */
.gal-tabs { display: flex; flex-wrap: wrap; gap: 8px; }

/* px-4 py-2 rounded-xl text-sm font-bold transition-all duration-200 */
.gal-tab {
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  font-family: inherit;
}
/* bg-gray-950 text-white */
.gal-tab--active { background: #030712; color: #FFFFFF; }
/* bg-gray-100 text-gray-500 hover:bg-gray-200 */
.gal-tab--idle   { background: #F3F4F6; color: #6B7280; }
.gal-tab--idle:hover { background: #E5E7EB; }

/* grid grid-cols-2 md:grid-cols-4 auto-rows-[200px] gap-3 */
.gal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 200px;
  gap: 12px;
}
@media (min-width: 768px) { .gal-grid { grid-template-columns: repeat(4, 1fr); } }

/* relative overflow-hidden rounded-2xl cursor-zoom-in group */
.gal-item {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  cursor: zoom-in;
}

/* w-full h-full object-cover transition-transform duration-500 group-hover:scale-105 */
.gal-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 500ms;
  display: block;
}
.gal-item:hover img { transform: scale(1.05); }

/* absolute inset-0 bg-gray-950/0 group-hover:bg-gray-950/30 transition-all duration-300 flex items-end p-3 */
.gal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(3,7,18,0);
  transition: background 300ms;
  display: flex;
  align-items: flex-end;
  padding: 12px;
}
.gal-item:hover .gal-overlay { background: rgba(3,7,18,0.30); }

/* text-white text-xs font-semibold opacity-0 group-hover:opacity-100 transition-opacity duration-300 drop-shadow */
.gal-label {
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 600;
  opacity: 0;
  transition: opacity 300ms;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
  margin: 0;
}
.gal-item:hover .gal-label { opacity: 1; }

/* col-span-2 / row-span-2 */
.gal-item--c2 { grid-column: span 2; }
.gal-item--r2 { grid-row: span 2; }
.gal-item[hidden] { display: none; }

/* mt-10 grid grid-cols-2 md:grid-cols-4 gap-4 */
.gal-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 40px;
}
@media (min-width: 768px) { .gal-stats { grid-template-columns: repeat(4, 1fr); } }

/* text-center p-5 rounded-2xl border border-gray-100 */
.gal-stat {
  text-align: center;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid #F3F4F6;
}

/* text-3xl font-black text-gray-950 leading-none mb-1 */
.gal-stat-n {
  font-size: 1.875rem;
  font-weight: 900;
  color: #030712;
  line-height: 1;
  margin-bottom: 4px;
}

/* text-xs text-gray-400 font-medium */
.gal-stat-l {
  font-size: 0.75rem;
  color: #9CA3AF;
  font-weight: 500;
}

/* ── Lightbox ─────────────────────────────────────────────────────── */
#gal-lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.92);
  align-items: center; justify-content: center;
  padding: 16px; cursor: zoom-out;
}

/* max-h-[90vh] max-w-full rounded-2xl object-contain shadow-2xl */
#gal-lightbox img {
  max-height: 90vh; max-width: 100%;
  border-radius: 16px; object-fit: contain;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
  cursor: default;
}

/* absolute top-5 right-5 w-10 h-10 rounded-full bg-white/10 hover:bg-white/20 text-white text-xl */
#gal-lb-close {
  position: absolute; top: 20px; right: 20px;
  width: 40px; height: 40px; border-radius: 9999px;
  background: rgba(255,255,255,0.10); border: none;
  color: #FFFFFF; font-size: 1.25rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s; line-height: 1;
}
#gal-lb-close:hover { background: rgba(255,255,255,0.20); }

/* ── DEMO REQUEST FORM ───────────────────────────────────────────────── */
.demo-form-wrap {
  max-width: 680px;
  margin: 0 auto 36px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 32px;
}
.demo-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.demo-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.demo-form-group label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #334155;
}
.demo-form-group input,
.demo-form-group select,
.demo-form-group textarea {
  font-family: var(--font);
  font-size: 0.9rem;
  color: #1E293B;
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 10px;
  padding: 10px 14px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  resize: vertical;
  width: 100%;
  box-sizing: border-box;
}
.demo-form-group input:focus,
.demo-form-group select:focus,
.demo-form-group textarea:focus {
  border-color: #14B8A6;
  box-shadow: 0 0 0 3px rgba(20,184,166,0.12);
}
.demo-form-group input::placeholder,
.demo-form-group textarea::placeholder {
  color: #94A3B8;
}
.demo-form-group select { cursor: pointer; }

/* ══ SOLUTIONS SEGMENT CARDS ══════════════════════════════════════════ */
#solutions { padding: 112px 0; background: #FFFFFF; }
#solutions .sec-h { color: #0D1B2A; }
#solutions .sec-p { color: #64748B; }

/* mode cards — light theme */
.mode-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; margin-top: 48px; }
.mode-card {
  display: flex; flex-direction: column; text-decoration: none;
  background: #FFFFFF; border: 1px solid #E2E8F0;
  border-radius: 20px; padding: 32px; position: relative; overflow: hidden;
  box-shadow: 0 2px 16px rgba(13,27,42,0.05);
  transition: border-color 0.22s, box-shadow 0.22s, transform 0.22s;
}
.mode-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg,#11998A,#14B8A6); }
.mode-card--amber::before { background: linear-gradient(90deg,#D97706,#FBBF24); }
.mode-card--indigo::before { background: linear-gradient(90deg,#4338CA,#6366F1); }
.mode-card--violet::before { background: linear-gradient(90deg,#7C3AED,#A78BFA); }
.mode-card:hover { border-color: #14B8A6; box-shadow: 0 8px 40px rgba(17,153,138,0.12); transform: translateY(-4px); }
.mode-card--amber:hover { border-color: #FBBF24; box-shadow: 0 8px 40px rgba(245,158,11,0.1); }
.mode-card--indigo:hover { border-color: #6366F1; box-shadow: 0 8px 40px rgba(99,102,241,0.1); }
.mode-card--violet:hover { border-color: #A78BFA; box-shadow: 0 8px 40px rgba(139,92,246,0.1); }

.mode-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.mode-icon { font-size: 2rem; }

.mode-badge { font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 13px; border-radius: 99px; background: rgba(17,153,138,0.08); color: #0D9488; border: 1px solid rgba(17,153,138,0.2); }
.mode-badge--amber { background: rgba(245,158,11,0.08); color: #B45309; border-color: rgba(245,158,11,0.25); }
.mode-badge--indigo { background: rgba(99,102,241,0.08); color: #4338CA; border-color: rgba(99,102,241,0.22); }
.mode-badge--violet { background: rgba(139,92,246,0.08); color: #7C3AED; border-color: rgba(139,92,246,0.22); }

.mode-head { font-size: 1.15rem; font-weight: 800; color: #0D1B2A; line-height: 1.35; margin-bottom: 20px; letter-spacing: -0.015em; }

.mode-pts { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.mode-pts li { font-size: 0.84rem; color: #475569; padding-left: 20px; position: relative; line-height: 1.6; }
.mode-pts li::before { content: ''; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: #14B8A6; }
.mode-card--amber .mode-pts li::before { background: #F59E0B; }
.mode-card--indigo .mode-pts li::before { background: #6366F1; }
.mode-card--violet .mode-pts li::before { background: #A78BFA; }

.mode-cta-bar { display: flex; align-items: center; justify-content: space-between; padding: 13px 18px; border-radius: 12px; background: rgba(17,153,138,0.07); border: 1px solid rgba(17,153,138,0.18); font-size: 0.84rem; font-weight: 700; color: #0D9488; margin-top: auto; transition: background 0.2s; }
.mode-cta-bar--amber { background: rgba(245,158,11,0.07); border-color: rgba(245,158,11,0.2); color: #B45309; }
.mode-cta-bar--indigo { background: rgba(99,102,241,0.07); border-color: rgba(99,102,241,0.2); color: #4338CA; }
.mode-cta-bar--violet { background: rgba(139,92,246,0.07); border-color: rgba(139,92,246,0.2); color: #7C3AED; }
.mode-arrow { transition: transform 0.2s; font-size: 1rem; }
.mode-card:hover .mode-arrow { transform: translateX(5px); }

@media (max-width: 768px) { .mode-grid { grid-template-columns: 1fr; gap: 16px; } }

/* ══ CUSTOM DEVELOPMENT ════════════════════════════════════════════════ */
#custom-dev {
  position: relative; padding: 112px 0;
  background: linear-gradient(135deg, #0B1826 0%, #0D1F36 55%, #0D1B2A 100%);
  overflow: hidden;
}
.cdev-glow-l {
  position: absolute; width: 560px; height: 560px;
  top: 50%; left: -120px; transform: translateY(-50%);
  background: radial-gradient(circle, rgba(17,153,138,0.14) 0%, transparent 65%);
  pointer-events: none;
}
.cdev-glow-r {
  position: absolute; width: 400px; height: 400px;
  bottom: -80px; right: -60px;
  background: radial-gradient(circle, rgba(17,153,138,0.08) 0%, transparent 65%);
  pointer-events: none;
}
.cdev-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.cdev-left .eyebrow-teal { color: var(--teal-l); background: rgba(26,187,163,0.1); border-color: rgba(26,187,163,0.25); }
.cdev-h { font-size: clamp(2rem,4vw,3rem); font-weight: 900; color: #FFFFFF; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 18px; }
.cdev-p { font-size: 1rem; color: rgba(255,255,255,0.5); line-height: 1.75; margin-bottom: 36px; }
.cdev-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cdev-chip { display: flex; align-items: flex-start; gap: 13px; padding: 16px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); transition: background 0.2s, border-color 0.2s; }
.cdev-chip:hover { background: rgba(17,153,138,0.07); border-color: rgba(17,153,138,0.2); }
.cdev-chip-icon { font-size: 1.25rem; flex-shrink: 0; margin-top: 1px; }
.cdev-chip-title { font-size: 0.84rem; font-weight: 700; color: #FFFFFF; margin-bottom: 3px; }
.cdev-chip-sub { font-size: 0.71rem; color: rgba(255,255,255,0.35); line-height: 1.5; }
@media (max-width: 900px) {
  #solutions { padding: 72px 0; }
  #custom-dev { padding: 72px 0; }
  .cdev-inner { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 600px) {
  .cdev-chips { grid-template-columns: 1fr; }
}

/* ══ SEGMENT PAGE STYLES ═══════════════════════════════════════════════ */
.seg-hero {
  min-height: 70vh; display: flex; align-items: center;
  padding: 110px 0 72px; position: relative; overflow: hidden;
}
.seg-hero--hospital { background: linear-gradient(135deg, #0D1B2A 0%, #0F2C1A 100%); }
.seg-hero--school   { background: linear-gradient(135deg, #0D1B2A 0%, #2D1000 100%); }
.seg-hero--camp     { background: linear-gradient(135deg, #0D1B2A 0%, #001529 100%); }
.seg-hero--corporate{ background: linear-gradient(135deg, #0D1B2A 0%, #1A0D2E 100%); }
.seg-hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 16px; border-radius: 100px; margin-bottom: 24px; }
.seg-hero-eyebrow--green  { color: #4ADE80; background: rgba(74,222,128,0.1); border: 1px solid rgba(74,222,128,0.25); }
.seg-hero-eyebrow--orange { color: #FB923C; background: rgba(251,146,60,0.1); border: 1px solid rgba(251,146,60,0.25); }
.seg-hero-eyebrow--blue   { color: #60A5FA; background: rgba(96,165,250,0.1); border: 1px solid rgba(96,165,250,0.25); }
.seg-hero-eyebrow--violet { color: #A78BFA; background: rgba(167,139,250,0.1); border: 1px solid rgba(167,139,250,0.25); }
.seg-hero-h { font-size: clamp(2.4rem,5.5vw,4.2rem); font-weight: 900; color: #FFFFFF; line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 20px; }
.seg-hero-p { font-size: 1.1rem; color: rgba(255,255,255,0.5); max-width: 600px; margin-bottom: 36px; line-height: 1.75; }
.seg-hero-stats { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.seg-stat-n { font-size: 2rem; font-weight: 900; color: #FFFFFF; display: block; letter-spacing: -0.02em; }
.seg-stat-l { font-size: 0.72rem; color: rgba(255,255,255,0.3); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 2px; }
.seg-stat-div { width: 1px; height: 40px; background: rgba(255,255,255,0.1); }
.seg-flow { padding: 80px 0; background: #F8FAFC; }
.seg-flow-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0; counter-reset: step; margin-top: 40px; }
.seg-flow-step { padding: 28px; border-right: 1px solid #E2E8F0; position: relative; }
.seg-flow-step:last-child { border-right: none; }
.seg-step-n { font-size: 0.68rem; font-weight: 800; color: #14B8A6; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 10px; }
.seg-step-title { font-size: 0.95rem; font-weight: 700; color: #0D1B2A; margin-bottom: 6px; }
.seg-step-desc { font-size: 0.82rem; color: #64748B; line-height: 1.6; }
.seg-tests { padding: 80px 0; background: #FFFFFF; }
.seg-test-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 40px; }
.seg-test-item { background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 12px; padding: 16px 18px; display: flex; align-items: flex-start; gap: 10px; }
.seg-test-dot { width: 8px; height: 8px; border-radius: 50%; background: #14B8A6; flex-shrink: 0; margin-top: 5px; }
.seg-test-name { font-size: 0.85rem; font-weight: 600; color: #1E293B; }
.seg-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.seg-feat { background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 16px; padding: 24px; }
.seg-feat-icon { font-size: 1.6rem; margin-bottom: 12px; }
.seg-feat-title { font-size: 0.95rem; font-weight: 700; color: #0D1B2A; margin-bottom: 6px; }
.seg-feat-desc { font-size: 0.83rem; color: #64748B; line-height: 1.6; }
.seg-cta { padding: 80px 0; background: var(--navy); text-align: center; }
.seg-cta-h { font-size: clamp(1.8rem,4vw,2.8rem); font-weight: 900; color: #FFFFFF; margin-bottom: 16px; }
.seg-cta-p { font-size: 1rem; color: rgba(255,255,255,0.45); margin-bottom: 36px; }
.seg-cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 768px) {
  .seg-hero { padding: 84px 0 56px; min-height: auto; }
  .seg-flow-steps { grid-template-columns: 1fr; }
  .seg-flow-step { border-right: none; border-bottom: 1px solid #E2E8F0; }
  .seg-flow-step:last-child { border-bottom: none; }
  .seg-test-grid { grid-template-columns: 1fr 1fr; }
  .seg-feat-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) { .seg-test-grid { grid-template-columns: 1fr; } }

/* ══ COMPREHENSIVE MOBILE RESPONSIVE ═════════════════════════════════ */

/* ── Tablet (≤900px) ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .wrap { padding: 0 20px; }

  /* Section padding */
  #about, #tests, #how, #oem, #ai, #founder, #contact { padding: 72px 0; }
  #press { padding: 56px 0; }
  #certifications { padding: 56px 0 48px; }

  /* Hero */
  #hero { padding: 90px 0 64px; min-height: auto; }
  .hero-inner { grid-template-columns: 1fr; gap: 0; }
  .hero-right { display: none; }
  .hero-h1 { font-size: clamp(2.4rem, 6vw, 3.6rem); }
  .hero-p { font-size: 1rem; }

  /* Tests grid — 2 col */
  .tests-grid { grid-template-columns: repeat(2,1fr); }

  /* About grid — 2 col */
  .about-grid { grid-template-columns: repeat(2,1fr); }

  /* OEM grid — 2 col */
  .oem-grid { grid-template-columns: repeat(2,1fr); }

  /* Footer grid — 2 col */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }

  /* Comparison table */
  .vs-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .vs-table { min-width: 480px; }
}

/* ── Mobile (≤768px) ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Global */
  .wrap { padding: 0 16px; }
  .sec-h { font-size: clamp(1.8rem, 6vw, 2.6rem); }
  .sec-p { font-size: 0.95rem; margin-bottom: 36px; }

  /* Nav */
  .nav-links { display: none; }
  .burger { display: flex; }

  /* Hero */
  #hero { padding: 84px 0 56px; }
  .hero-h1 { font-size: clamp(2rem, 8vw, 3rem); }
  .hero-tag { font-size: 0.68rem; }
  .hero-p { font-size: 0.95rem; margin-bottom: 28px; }
  .hero-btns { flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 36px; }
  .hero-btns .btn-glow,
  .hero-btns .btn-ghost { width: 100%; justify-content: center; text-align: center; }
  .hero-stats { gap: 14px; flex-wrap: wrap; }
  .hstat-div { display: none; }
  .hstat-n { font-size: 1.5rem; }
  .hstat-s { font-size: 0.85rem; }

  /* Trust */
  #trust { padding: 0 0 32px; }
  .trust-header { padding: 40px 0 16px; }
  .trust-h { font-size: clamp(1.4rem, 5vw, 2rem); }

  /* About */
  #about { padding: 60px 0; }
  .about-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .glass-card { padding: 20px; }

  /* Tests */
  #tests { padding: 60px 0; }
  .tests-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .test-card { padding: 20px; }
  .tc-num { font-size: 2.2rem; }

  /* How it works */
  #how { padding: 60px 0; }
  .step { grid-template-columns: 56px 1fr; gap: 16px; }
  .step-n { font-size: 2.2rem; }

  /* OEM */
  #oem { padding: 60px 0; }
  .oem-grid { grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 40px; }
  .vs-head, .vs-row { padding: 10px 14px; font-size: 0.82rem; }

  /* AI Roadmap */
  #ai { padding: 60px 0; }
  .ai-pills { gap: 8px; }
  .ai-pill { font-size: 0.82rem; padding: 8px 16px; }

  /* Gallery */
  #gallery { padding: 64px 0; }
  .gal-inner { padding: 0 16px; }
  .gal-h { font-size: 1.8rem; }
  .gal-grid { grid-template-columns: repeat(2,1fr); grid-auto-rows: 160px; gap: 8px; }
  .gal-tabs { gap: 6px; }
  .gal-tab { padding: 6px 12px; font-size: 0.8rem; }

  /* Founder */
  #founder { padding: 60px 0; }
  .founder-card { flex-direction: column; align-items: center; text-align: center; padding: 28px 20px; gap: 20px; }
  .founder-tags { justify-content: center; }
  .founder-linkedin { margin-top: 12px; }

  /* Certifications */
  #certifications { padding: 48px 0 40px; }
  .cert-row { gap: 10px; }
  .cert-card { min-width: 110px; padding: 14px 12px; }
  .cert-card img { width: 54px; height: 54px; }
  .cert-card--wide img { width: 100px; height: 46px; }

  /* Press */
  #press { padding: 48px 0; }
  .press-grid { grid-template-columns: repeat(2,1fr); }
  .press-articles { grid-template-columns: 1fr; gap: 16px; }
  .press-article { padding: 20px; }
  .press-awards { gap: 6px; }
  .press-award { font-size: 0.75rem; padding: 5px 10px; }

  /* Contact */
  #contact { padding: 60px 0 0; }
  .contact-h { font-size: clamp(1.9rem, 6vw, 2.8rem); }
  .contact-p { font-size: 0.95rem; }
  .contact-inner { padding-bottom: 56px; }
  .contact-btns { flex-direction: column; align-items: stretch; gap: 10px; }
  .contact-btns .btn-ghost { text-align: center; justify-content: center; }
  .demo-form-row { grid-template-columns: 1fr; }
  .demo-form-wrap { padding: 20px; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 36px; }
  footer { padding: 48px 0 0; }

  /* Partner strips */
  .ps-fade { width: 48px; }
  .ps-logo { height: 62px; padding: 7px 12px; }
  .ps-logo img { height: 34px; max-width: 120px; }
  .ps-logo--wide { min-width: 110px; }
}

/* ── Small phones (≤540px) ────────────────────────────────────────── */
@media (max-width: 540px) {
  /* Single-col grids everywhere */
  .about-grid { grid-template-columns: 1fr; }
  .tests-grid { grid-template-columns: 1fr; }
  .oem-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .press-grid { grid-template-columns: 1fr; }

  /* Hero */
  .hero-h1 { font-size: clamp(1.9rem, 9vw, 2.6rem); }

  /* Gallery stays 2-col but shorter rows */
  .gal-grid { grid-auto-rows: 140px; }

  /* Steps */
  .step { grid-template-columns: 48px 1fr; gap: 12px; padding: 16px 0; }
  .step-n { font-size: 1.8rem; }
}

/* ── Very small phones (≤390px) ───────────────────────────────────── */
@media (max-width: 390px) {
  .wrap { padding: 0 12px; }
  .hero-h1 { font-size: clamp(1.7rem, 9.5vw, 2.2rem); }
  .sec-h { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .btn-glow, .btn-ghost { padding: 12px 20px; font-size: 0.88rem; }
  .gal-grid { grid-auto-rows: 120px; }
  .glass-card, .test-card, .oem-grid .glass-card { padding: 16px; }
}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE UX REFINEMENTS — covers all new components
   ══════════════════════════════════════════════════════════════════════ */

/* ── Shared touch improvements ──────────────────────────────────────── */
@media (max-width: 768px) {
  * { -webkit-tap-highlight-color: transparent; }

  /* Prevent iOS zoom on inputs */
  input, select, textarea { font-size: 16px !important; }

  /* Buttons — full-width on small screens, min tap height */
  .btn-glow, .btn-ghost { min-height: 48px; display: flex; align-items: center; justify-content: center; }

  /* ── Nav ─────────────────────────────────────────────────────────── */
  .nav-wrap { padding: 0 16px; }
  .mob-nav { padding: 8px 12px 20px; }
  .mob-nav a { padding: 13px 16px; font-size: 1rem; border-radius: 12px; min-height: 48px; display: flex; align-items: center; }
  .mob-btn { margin: 8px 0 0; padding: 14px; text-align: center; min-height: 48px; justify-content: center; }

  /* ── How It Works ────────────────────────────────────────────────── */
  #how { padding: 64px 0; }
  .how-header { margin-bottom: 40px; }
  .how-header .sec-h { font-size: clamp(1.8rem, 7vw, 2.4rem); }
  .how-sub { font-size: 0.9rem; }

  /* Steps — 2 col grid, kill arrows */
  .how-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 24px; }
  .how-step-arrow { display: none !important; }
  .how-step { min-width: unset; padding: 20px 16px; border-radius: 14px; }
  .how-step-icon { font-size: 1.4rem; margin-bottom: 8px; }
  .how-step-title { font-size: 0.88rem; }
  .how-step-desc { font-size: 0.7rem; line-height: 1.6; }

  /* Outcomes — stack vertically */
  .how-outcomes { flex-direction: column; padding: 20px; gap: 0; margin-bottom: 16px; }
  .how-outcome { min-width: unset; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
  .how-outcome:last-child { border-bottom: none; padding-bottom: 0; }
  .how-outcome-sep { transform: rotate(90deg); padding: 4px 0; font-size: 0.75rem; }
  .how-outcome-name { font-size: 0.85rem; }
  .how-outcome-desc { font-size: 0.72rem; }

  /* Cares block */
  .how-cares { padding: 20px; }
  .hc-header { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 16px; }
  .hc-title { font-size: 0.88rem; }
  .hc-pills span { font-size: 0.74rem; padding: 5px 12px; }

  /* ── Business applications / mode cards ──────────────────────────── */
  #solutions { padding: 64px 0; }
  .mode-card { padding: 24px 20px; }
  .mode-head { font-size: 1.05rem; }
  .mode-pts li { font-size: 0.82rem; }
  .mode-cta-bar { padding: 12px 16px; font-size: 0.82rem; min-height: 48px; }

  /* ── Competitive edge — horizontal scroll ────────────────────────── */
  #compare { padding: 64px 0; }
  .cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 12px; margin-top: 36px; }
  .cmp-wrap::-webkit-scrollbar { height: 3px; }
  .cmp-wrap::-webkit-scrollbar-thumb { background: rgba(17,153,138,0.3); border-radius: 99px; }
  .cmp-table { min-width: 580px; }
  .cmp-feat, .cmp-db, .cmp-ot { padding: 13px 16px; font-size: 0.82rem; }
  .cmp-h-feat, .cmp-h-db, .cmp-h-ot { padding: 13px 16px; }
  .cmp-cat { padding: 7px 16px; }

  /* ── OEM / White-label ───────────────────────────────────────────── */
  #custom-dev { padding: 64px 0; }
  .cdev-inner { gap: 40px; }
  .cdev-h { font-size: clamp(2rem, 7vw, 2.8rem); }
  .cdev-chips { grid-template-columns: 1fr; gap: 8px; }
  .cdev-chip { padding: 14px 16px; }

  /* ── Founder ─────────────────────────────────────────────────────── */
  .founder-card { flex-direction: column; gap: 24px; padding: 28px 24px; }
  .founder-av { width: 72px; height: 72px; }
  .founder-name { font-size: 1.25rem; }
  .founder-bio { font-size: 0.88rem; line-height: 1.7; }

  /* ── Contact form ────────────────────────────────────────────────── */
  .cf-row { grid-template-columns: 1fr; }
}

/* ── Small phones ≤480px ────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* How steps — single column */
  .how-steps { grid-template-columns: 1fr; }
  .how-step { flex-direction: row; align-items: flex-start; gap: 14px; text-align: left; padding: 16px; }
  .how-step-icon { font-size: 1.3rem; margin-bottom: 0; flex-shrink: 0; margin-top: 2px; }
  .how-step-num { margin-bottom: 0; }

  /* Compare table tighter */
  .cmp-table { min-width: 500px; }
  .cmp-feat, .cmp-db, .cmp-ot { padding: 11px 12px; font-size: 0.78rem; }
  .cmp-h-feat, .cmp-h-db, .cmp-h-ot { padding: 11px 12px; font-size: 10px; }
  .cmp-cat { padding: 7px 12px; font-size: 9px; }

  /* Mode cards */
  .mode-grid { gap: 12px; }
  .mode-card { padding: 20px 16px; }
  .mode-head { font-size: 1rem; }
  .mode-pts { gap: 9px; }
  .mode-badge { font-size: 9px; }

  /* Sections padding */
  #solutions { padding: 52px 0; }
  #compare { padding: 52px 0; }
  #custom-dev { padding: 52px 0; }
  #founder { padding: 52px 0; }
  #how { padding: 52px 0; }
}