:root {
  --bg: #060f24;
  --bg-elev: #0d1b3f;
  --bg-card: #122754;
  --text: #edf3ff;
  --muted: #b8c7e6;
  --line: rgba(166, 191, 245, 0.24);
  --primary: #36d7c0;
  --accent: #4e8fff;
  --danger: #ff6f7f;
  --warning: #f6b250;
  --ok: #68e48f;
  --radius: 18px;
  --shadow: 0 12px 36px rgba(4, 10, 24, 0.45);
  --max: 1160px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background:
    radial-gradient(circle at 8% -12%, rgba(78, 143, 255, 0.35) 0%, transparent 40%),
    radial-gradient(circle at 92% -10%, rgba(54, 215, 192, 0.2) 0%, transparent 45%),
    linear-gradient(180deg, #081434 0%, var(--bg) 42%, #050d22 100%);
  color: var(--text);
  font-family: "Sora", "IBM Plex Sans", "Segoe UI", sans-serif;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
}

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

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

.container {
  width: min(var(--max), calc(100% - 2rem));
  margin-inline: auto;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 80;
  backdrop-filter: blur(10px);
  background: rgba(7, 16, 37, 0.82);
  border-bottom: 1px solid var(--line);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  gap: 1rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.brand img {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

.brand-stack {
  display: grid;
  line-height: 1;
  gap: 0.2rem;
}

.wordmark {
  font-size: 1.36rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #e8efff;
}

.wordmark-guard {
  color: #4e8fff;
}

.tagline {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9fb5e3;
}

.links {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.95rem;
  color: var(--muted);
}

.links a {
  padding: 0.45rem 0.55rem;
  border-radius: 10px;
  transition: 180ms ease;
}

.links a:hover,
.links a:focus-visible {
  color: var(--text);
  background: rgba(122, 162, 255, 0.12);
}

.actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 12px;
  padding: 0.72rem 1rem;
  font-weight: 600;
  border: 1px solid transparent;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background: linear-gradient(135deg, #5b9bff, #35d8c1);
  color: #041022;
}

.btn-ghost {
  border-color: var(--line);
  color: var(--text);
  background: rgba(9, 27, 60, 0.38);
}

.menu-btn {
  display: none;
  border: 1px solid var(--line);
  background: rgba(9, 27, 60, 0.38);
  color: var(--text);
  border-radius: 10px;
  padding: 0.5rem;
}

.mobile-drawer {
  display: none;
  border-top: 1px solid var(--line);
  background: rgba(7, 18, 39, 0.96);
}

.mobile-drawer nav {
  display: grid;
  gap: 0.3rem;
  padding: 1rem;
}

.mobile-drawer a {
  padding: 0.72rem;
  color: var(--muted);
  border-radius: 10px;
}

.mobile-drawer a:hover {
  color: var(--text);
  background: rgba(122, 162, 255, 0.12);
}

.mobile-lang {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.3rem;
  margin: 0.25rem 0 0.45rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--line);
}

.hero {
  padding: 6.2rem 0 4.2rem;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.74rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--primary);
  border: 1px solid rgba(61, 215, 198, 0.3);
  border-radius: 999px;
  padding: 0.38rem 0.72rem;
  background: rgba(61, 215, 198, 0.1);
}

h1 {
  font-size: clamp(2rem, 5.5vw, 4rem);
  line-height: 1.08;
  margin: 1rem 0;
}

h2 {
  font-size: clamp(1.45rem, 3.4vw, 2.5rem);
  line-height: 1.15;
  margin: 0.7rem 0 1rem;
}

h3 {
  font-size: 1.15rem;
  margin: 0.2rem 0 0.7rem;
}

p {
  color: var(--muted);
  line-height: 1.68;
}

.kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
  margin-top: 1.3rem;
}

.kpi {
  background: rgba(10, 28, 60, 0.56);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.9rem;
}

.kpi strong {
  display: block;
  color: var(--text);
  font-size: 1.1rem;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 1rem;
  align-items: start;
}

.card {
  background: linear-gradient(160deg, rgba(15, 37, 78, 0.7), rgba(11, 24, 53, 0.68));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem;
}

.shot {
  min-height: 220px;
  border-radius: 14px;
  border: 1px solid rgba(122, 162, 255, 0.38);
  background:
    linear-gradient(180deg, rgba(78, 143, 255, 0.28), rgba(54, 215, 192, 0.08)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 22px),
    #0a1b3b;
  display: grid;
  place-items: center;
  text-align: center;
  color: #dce8ff;
  font-weight: 600;
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}

.pill {
  padding: 0.45rem 0.72rem;
  border-radius: 999px;
  font-size: 0.78rem;
  color: #cfe0ff;
  border: 1px solid rgba(130, 165, 240, 0.42);
  background: rgba(16, 41, 84, 0.58);
}

.visual-panel {
  padding: 1rem;
  border-radius: 18px;
  border: 1px solid rgba(122, 162, 255, 0.32);
  background: linear-gradient(170deg, rgba(12, 31, 68, 0.9), rgba(9, 21, 48, 0.9));
}

.mini-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  margin-bottom: 0.8rem;
}

.mini-metrics article {
  border: 1px solid rgba(122, 162, 255, 0.28);
  border-radius: 12px;
  padding: 0.55rem;
  background: rgba(15, 35, 76, 0.66);
}

.mini-metrics strong {
  display: block;
  font-size: 1.06rem;
}

.signal-chart {
  height: 180px;
  border: 1px solid rgba(122, 162, 255, 0.28);
  border-radius: 14px;
  padding: 0.8rem;
  background:
    linear-gradient(180deg, rgba(78, 143, 255, 0.14), rgba(53, 216, 193, 0.05)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 26px),
    #0a1b3b;
}

.signal-line {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background:
    radial-gradient(circle at 18% 65%, rgba(78, 143, 255, 0.95) 0 3px, transparent 4px),
    radial-gradient(circle at 33% 55%, rgba(78, 143, 255, 0.95) 0 3px, transparent 4px),
    radial-gradient(circle at 49% 44%, rgba(78, 143, 255, 0.95) 0 3px, transparent 4px),
    radial-gradient(circle at 65% 38%, rgba(54, 215, 192, 0.95) 0 3px, transparent 4px),
    radial-gradient(circle at 79% 26%, rgba(54, 215, 192, 0.95) 0 3px, transparent 4px),
    radial-gradient(circle at 92% 19%, rgba(54, 215, 192, 0.95) 0 3px, transparent 4px),
    linear-gradient(165deg, transparent 0 14%, rgba(78, 143, 255, 0.55) 15% 16%, transparent 17% 28%, rgba(78, 143, 255, 0.55) 29% 30%, transparent 31% 43%, rgba(78, 143, 255, 0.55) 44% 45%, transparent 46% 58%, rgba(54, 215, 192, 0.65) 59% 60%, transparent 61% 71%, rgba(54, 215, 192, 0.65) 72% 73%, transparent 74% 83%, rgba(54, 215, 192, 0.65) 84% 85%, transparent 86% 100%);
}

.section {
  padding: 3.4rem 0;
}

.section.alt {
  background: linear-gradient(180deg, rgba(11, 26, 57, 0.45), rgba(7, 18, 39, 0));
  border-block: 1px solid rgba(180, 200, 255, 0.14);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
}

.feature {
  background: rgba(10, 28, 60, 0.54);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1rem;
}

.feature small {
  color: var(--primary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.timeline {
  display: grid;
  gap: 0.8rem;
}

.timeline .step {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 0.9rem;
  align-items: start;
}

.badge-num {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(122, 162, 255, 0.4);
  background: rgba(122, 162, 255, 0.15);
  display: grid;
  place-items: center;
  color: #d5e1ff;
  font-weight: 700;
  font-size: 0.9rem;
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table th,
.table td {
  border-bottom: 1px solid var(--line);
  padding: 0.7rem;
  text-align: left;
  color: var(--muted);
  font-size: 0.92rem;
}

.table th {
  color: var(--text);
}

.hero-variant {
  background: linear-gradient(180deg, rgba(78, 143, 255, 0.12), transparent 55%);
  border-bottom: 1px solid var(--line);
}

.progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  z-index: 90;
  background: linear-gradient(90deg, var(--accent), var(--primary));
}

.page-fade {
  animation: fadePage 280ms ease;
}

@keyframes fadePage {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: 420ms ease;
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* === SECTION HEADER (centered titles) === */
.section-header { text-align: center; max-width: 640px; margin: 0 auto 2.8rem; }
.section-header h2 { margin-bottom: 0.5rem; }

/* === STATS ROW === */
.stats-row { display: grid; grid-template-columns: repeat(4,1fr); gap:1rem; margin-top:2rem; }
.stat { text-align:center; padding:1.2rem; }
.stat strong { display:block; font-size:2rem; font-weight:800; color:var(--text); }
.stat span { font-size:0.9rem; color:var(--muted); }

/* === STEPS (how it works) === */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.step-card { background:rgba(10,28,60,0.54); border:1px solid var(--line); border-radius:16px; padding:1.4rem; }
.step-num { font-size:2rem; font-weight:800; color:var(--primary); line-height:1; margin-bottom:0.6rem; }

/* === SPLIT SECTIONS (alternating content+visual) === */
.split { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; margin:3rem 0; }
.split.reverse { direction:rtl; }
.split.reverse > * { direction:ltr; }
.split-text h2 { margin-bottom:0.8rem; }
.split-visual { border-radius:16px; border:1px solid rgba(122,162,255,0.3); background:linear-gradient(170deg,rgba(12,31,68,0.9),rgba(9,21,48,0.9)); padding:1.5rem; min-height:260px; display:grid; place-items:center; }

/* === PRICING CARDS === */
.pricing-toggle { display:flex; align-items:center; justify-content:center; gap:1rem; margin-bottom:2.4rem; font-size:0.95rem; color:var(--muted); }
.toggle-switch { position:relative; width:48px; height:26px; cursor:pointer; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-track { position:absolute; inset:0; border-radius:999px; background:rgba(122,162,255,0.2); border:1px solid var(--line); transition:180ms; }
.toggle-switch input:checked + .toggle-track { background:var(--primary); }
.toggle-thumb { position:absolute; width:18px; height:18px; border-radius:50%; background:#fff; top:3px; left:3px; transition:180ms; }
.toggle-switch input:checked ~ .toggle-thumb { left:27px; }
.save-badge { background:rgba(54,215,192,0.18); color:var(--primary); border-radius:999px; padding:0.2rem 0.6rem; font-size:0.78rem; font-weight:600; }
.pricing-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.plan-card { background:rgba(10,28,60,0.54); border:1px solid var(--line); border-radius:18px; padding:1.4rem; display:flex; flex-direction:column; gap:0.6rem; }
.plan-card.featured { border-color:var(--primary); background:linear-gradient(160deg,rgba(15,50,85,0.85),rgba(10,30,65,0.8)); box-shadow:0 0 32px rgba(54,215,192,0.18); }
.plan-name { font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--primary); }
.plan-price { font-size:2.2rem; font-weight:800; color:var(--text); line-height:1; }
.plan-price span { font-size:1rem; font-weight:400; color:var(--muted); }
.plan-desc { font-size:0.88rem; color:var(--muted); }
.plan-features { list-style:none; padding:0; margin:0.4rem 0; display:grid; gap:0.4rem; }
.plan-features li { font-size:0.88rem; color:var(--muted); display:flex; align-items:start; gap:0.5rem; }
.plan-features li::before { content:"\2713"; color:var(--primary); font-weight:700; flex-shrink:0; margin-top:0.1rem; }
.plan-card .btn { margin-top:auto; width:100%; justify-content:center; }
.plan-enterprise { grid-column:1/-1; background:linear-gradient(135deg,rgba(61,215,198,0.12),rgba(122,162,255,0.1)); border:1px solid rgba(61,215,198,0.3); border-radius:18px; padding:1.4rem; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; }

/* === COMPARISON TABLE === */
.compare-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:16px; border:1px solid var(--line); }
.compare-table { width:100%; min-width:700px; border-collapse:collapse; }
.compare-table th { padding:0.9rem 1rem; background:rgba(10,28,60,0.7); font-size:0.88rem; color:var(--text); border-bottom:1px solid var(--line); text-align:center; }
.compare-table th:first-child { text-align:left; }
.compare-table td { padding:0.75rem 1rem; border-bottom:1px solid rgba(122,162,255,0.1); font-size:0.88rem; color:var(--muted); text-align:center; }
.compare-table td:first-child { text-align:left; color:var(--text); }
.compare-table tr:last-child td { border-bottom:none; }
.compare-table tr:nth-child(even) td { background:rgba(10,28,60,0.3); }
.check { color:var(--ok); font-weight:700; font-size:1rem; }
.cross { color:var(--danger); font-weight:700; }

/* === TESTIMONIALS === */
.testimonial-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.quote { background:rgba(10,28,60,0.54); border:1px solid var(--line); border-radius:14px; padding:1.2rem; display:flex; flex-direction:column; gap:0.6rem; }
.quote-text { color:#cbd9f5; line-height:1.65; margin:0; font-style:italic; }
.quote-author { display:flex; flex-direction:column; margin-top:auto; }
.quote-name { font-weight:700; font-size:0.9rem; color:var(--text); }
.quote-role { font-size:0.82rem; color:var(--muted); }
.stars { color:#f6b250; letter-spacing:0.1em; }

/* === BLOG CARDS === */
.post-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.post-card { background:rgba(10,28,60,0.54); border:1px solid var(--line); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; transition:border-color 200ms,transform 200ms; }
.post-card:hover { border-color:rgba(122,162,255,0.55); transform:translateY(-2px); }
.post-thumb { height:160px; background:linear-gradient(170deg,rgba(12,31,68,0.9),rgba(9,21,48,0.9)); display:grid; place-items:center; font-size:2.5rem; }
.post-body { padding:1rem; flex:1; display:flex; flex-direction:column; gap:0.4rem; }
.post-cat { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:var(--primary); }
.post-title { font-size:1rem; font-weight:700; color:var(--text); line-height:1.35; margin:0; }
.post-excerpt { font-size:0.86rem; color:var(--muted); margin:0; flex:1; }
.post-meta { font-size:0.8rem; color:var(--muted); margin-top:0.4rem; }

/* === DOCS CARDS === */
.doc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.doc-card { background:rgba(10,28,60,0.54); border:1px solid var(--line); border-radius:14px; padding:1.2rem; display:flex; flex-direction:column; gap:0.5rem; transition:border-color 200ms; }
.doc-card:hover { border-color:rgba(122,162,255,0.5); }
.doc-icon { font-size:1.6rem; }
.doc-card h3 { margin:0; font-size:1rem; }
.doc-card p { font-size:0.88rem; margin:0; }

/* === VALUES === */
.values-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.value-card { background:rgba(10,28,60,0.4); border:1px solid var(--line); border-radius:16px; padding:1.4rem; }
.value-icon { font-size:1.8rem; margin-bottom:0.6rem; }

/* === FAQ === */
.faq { display:grid; gap:0.6rem; }
details.faq-item { background:rgba(10,28,60,0.54); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
details.faq-item summary { cursor:pointer; padding:0.9rem 1rem; color:var(--text); font-weight:600; list-style:none; display:flex; justify-content:space-between; align-items:center; }
details.faq-item summary::after { content:"+"; color:var(--primary); font-size:1.1rem; flex-shrink:0; }
details.faq-item[open] summary::after { content:"-"; }
details.faq-item .faq-body { padding:0 1rem 1rem; }
details.faq-item .faq-body p { margin:0; }

/* === CTA BAND (redesigned) === */
.cta-band { margin-top:1.5rem; background:linear-gradient(135deg,rgba(61,215,198,0.14) 0%,rgba(122,162,255,0.1) 100%); border:1px solid rgba(61,215,198,0.32); border-radius:20px; padding:2.8rem 2rem; text-align:center; }
.cta-band h2 { margin-bottom:0.5rem; }
.cta-band p { margin-bottom:1.4rem; }
.cta-actions { display:flex; justify-content:center; gap:0.8rem; flex-wrap:wrap; }

/* === FOOTER (full) === */
footer.site-footer { margin-top:2.2rem; border-top:1px solid var(--line); padding:3rem 0 2rem; }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem; margin-bottom:2rem; }
.footer-brand p { font-size:0.88rem; color:var(--muted); margin-top:0.6rem; max-width:280px; }
.footer-col h4 { font-size:0.82rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--primary); margin:0 0 0.9rem; }
.footer-col a { display:block; color:var(--muted); font-size:0.9rem; margin:0.4rem 0; transition:color 150ms; }
.footer-col a:hover { color:var(--text); }
.footer-bottom { border-top:1px solid var(--line); padding-top:1.2rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:0.8rem; font-size:0.84rem; color:var(--muted); }
.footer-legal { display:flex; gap:1.2rem; }
.footer-legal a { color:var(--muted); font-size:0.84rem; }
.footer-legal a:hover { color:var(--text); }

/* === LANG SWITCHER IN NAV === */
.lang-switcher { position:relative; }
.lang-btn { padding:0.35rem 0.6rem; border-radius:8px; border:1px solid var(--line); background:rgba(9,27,60,0.38); color:var(--muted); font-size:0.82rem; cursor:pointer; display:flex; align-items:center; gap:0.3rem; }
.lang-dropdown { position:absolute; right:0; top:calc(100% + 6px); background:rgba(10,28,60,0.97); border:1px solid var(--line); border-radius:12px; padding:0.4rem; min-width:140px; display:none; z-index:200; }
.lang-dropdown a { display:block; padding:0.45rem 0.7rem; border-radius:8px; font-size:0.88rem; color:var(--muted); }
.lang-dropdown a:hover { color:var(--text); background:rgba(122,162,255,0.12); }
.lang-switcher:hover .lang-dropdown, .lang-switcher:focus-within .lang-dropdown { display:block; }

/* === NAV ACTIVE STATE === */
.links a.nav-active { color:var(--text); background:rgba(122,162,255,0.14); }

/* === BREADCRUMB === */
.breadcrumb { display:flex; gap:0.4rem; align-items:center; font-size:0.82rem; color:var(--muted); margin-bottom:1.2rem; flex-wrap:wrap; }
.breadcrumb a { color:var(--muted); }
.breadcrumb a:hover { color:var(--text); }
.breadcrumb-sep { color:rgba(122,162,255,0.4); }

/* === RESPONSIVE ADDITIONS === */
@media(max-width:1020px){
  .links { display:none; }
  .menu-btn { display:inline-flex; }
  .grid-2 { grid-template-columns:1fr; }
  .pricing-grid { grid-template-columns:repeat(2,1fr); }
  .stats-row { grid-template-columns:repeat(2,1fr); }
  .steps { grid-template-columns:1fr; }
  .split { grid-template-columns:1fr; }
  .split.reverse { direction:ltr; }
  .testimonial-grid,.post-grid,.doc-grid,.values-grid { grid-template-columns:1fr 1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .feature-grid { grid-template-columns:1fr 1fr; }
  .kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:680px){
  .actions .btn-ghost { display:none; }
  .hero { padding-top:5.2rem; }
  .kpis,.mini-metrics { grid-template-columns:1fr; }
  .wordmark { font-size:1.22rem; }
  .tagline { font-size:0.56rem; }
  .pricing-grid { grid-template-columns:1fr; }
  .testimonial-grid,.post-grid,.doc-grid,.values-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .cta-band { padding:1.8rem 1rem; }
  .plan-enterprise { flex-direction:column; }
  .footer-bottom { flex-direction:column; align-items:flex-start; }
  .feature-grid { grid-template-columns:1fr; }
}

/* =========================
   Premium Redesign Layer
   ========================= */
:root {
  --bg: #070f1d;
  --bg-elev: #0f1a2e;
  --bg-card: #14243d;
  --text: #f4f7ff;
  --muted: #a9b7d0;
  --line: rgba(137, 164, 207, 0.24);
  --primary: #24c3ad;
  --accent: #5b8dff;
  --radius: 14px;
  --shadow: 0 16px 40px rgba(2, 8, 24, 0.45);
  --max: 1200px;
}

html,
body {
  background:
    radial-gradient(circle at 5% -10%, rgba(91, 141, 255, 0.2), transparent 46%),
    radial-gradient(circle at 95% -20%, rgba(36, 195, 173, 0.12), transparent 52%),
    linear-gradient(180deg, #081224 0%, #070f1d 45%, #091425 100%);
}

body {
  letter-spacing: 0.005em;
}

h1,
h2,
h3 {
  letter-spacing: -0.02em;
}

p {
  max-width: 72ch;
}

.topbar {
  background: rgba(6, 12, 24, 0.8);
  border-bottom: 1px solid rgba(120, 142, 187, 0.22);
}

.links a {
  font-size: 0.92rem;
  color: #b5c1da;
}

.btn {
  border-radius: 11px;
  font-weight: 600;
}

.btn-primary {
  background: linear-gradient(135deg, #5b8dff, #24c3ad);
  color: #051223;
}

.btn-ghost {
  background: rgba(13, 24, 44, 0.75);
}

.hero {
  padding: 5.6rem 0 3.2rem;
}

.hero-premium {
  border-bottom: 1px solid rgba(127, 150, 196, 0.2);
}

.hero-grid {
  align-items: center;
  gap: 1.6rem;
}

.hero-copy h1 {
  font-size: clamp(2.1rem, 5vw, 3.8rem);
  margin-bottom: 0.9rem;
}

.hero-lead {
  font-size: 1.04rem;
  color: #c3cfe7;
}

.hero-cta {
  justify-content: flex-start;
  margin-top: 1.3rem;
}

.hero-trust-list {
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
  color: #c5d1ea;
  font-size: 0.92rem;
}

.hero-trust-list li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.hero-trust-list li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 0 0 5px rgba(45, 212, 191, 0.14);
}

.hero-command {
  border: 1px solid rgba(117, 150, 216, 0.3);
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(11, 20, 36, 0.98), rgba(10, 22, 44, 0.95));
  box-shadow: var(--shadow);
  padding: 1.05rem;
}

.command-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: #c3cfe8;
  margin-bottom: 0.85rem;
}

.command-top small {
  margin-left: auto;
  color: #8ea0c2;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #31d6bf;
}

.command-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  margin-bottom: 0.75rem;
}

.command-metrics article {
  border: 1px solid rgba(114, 143, 204, 0.28);
  border-radius: 10px;
  padding: 0.55rem;
  background: rgba(14, 28, 54, 0.72);
}

.command-metrics strong {
  display: block;
  font-size: 1.1rem;
  color: #f2f6ff;
}

.command-metrics span {
  color: #9eb1d2;
  font-size: 0.76rem;
}

.command-feed {
  display: grid;
  gap: 0.5rem;
}

.command-feed div {
  font-size: 0.84rem;
  color: #c4d0e7;
  padding: 0.6rem 0.65rem;
  border: 1px solid rgba(111, 137, 193, 0.26);
  border-radius: 10px;
  background: rgba(12, 22, 43, 0.72);
}

.section {
  padding: 4.3rem 0;
}

.section-header {
  max-width: 760px;
  margin-bottom: 2.3rem;
}

.section-header p {
  margin-inline: auto;
}

.problem-grid,
.solution-grid,
.capability-grid {
  display: grid;
  gap: 1rem;
}

.problem-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.problem-card {
  padding: 1.25rem;
  border: 1px solid rgba(126, 151, 200, 0.24);
  background: rgba(11, 20, 36, 0.7);
  border-radius: 14px;
}

.problem-card h3 {
  margin-bottom: 0.45rem;
}

.solution-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.solution-card {
  border: 1px solid rgba(109, 146, 214, 0.26);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(12, 24, 44, 0.92), rgba(11, 20, 36, 0.88));
  padding: 1.15rem;
}

.solution-card small {
  color: var(--primary);
  letter-spacing: 0.08em;
  font-weight: 700;
}

.capability-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.capability-card {
  border: 1px solid rgba(116, 145, 197, 0.23);
  border-radius: 14px;
  background: rgba(11, 21, 38, 0.76);
  padding: 1.2rem;
}

.capability-card h3 {
  font-size: 1.05rem;
}

.section-trust {
  border-top: 1px solid rgba(120, 146, 197, 0.16);
  border-bottom: 1px solid rgba(120, 146, 197, 0.16);
  background: linear-gradient(180deg, rgba(11, 18, 33, 0.7), rgba(8, 14, 26, 0.6));
}

.trust-band {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1.15rem;
}

.trust-band span {
  border: 1px solid rgba(122, 151, 206, 0.26);
  background: rgba(12, 23, 42, 0.82);
  border-radius: 999px;
  padding: 0.45rem 0.78rem;
  font-size: 0.8rem;
  color: #c5d3ea;
}

.quote-premium {
  max-width: 860px;
  margin-inline: auto;
  padding: 1.4rem;
  border-radius: 14px;
}

.quote-premium .quote-text {
  font-style: normal;
  color: #d3ddf0;
}

.section-metrics .stats-row {
  margin-top: 0;
}

.section-faq .faq {
  max-width: 900px;
  margin-inline: auto;
}

details.faq-item summary::after {
  content: "+";
}

details.faq-item[open] summary::after {
  content: "-";
}

.cta-final {
  border-color: rgba(79, 124, 255, 0.38);
  background: linear-gradient(135deg, rgba(79, 124, 255, 0.2), rgba(45, 212, 191, 0.14));
}

@media (max-width: 1020px) {
  .problem-grid,
  .solution-grid,
  .capability-grid {
    grid-template-columns: 1fr 1fr;
  }

  .hero-command {
    margin-top: 0.25rem;
  }
}

@media (max-width: 720px) {
  .hero-copy h1 {
    font-size: clamp(1.8rem, 8vw, 2.6rem);
  }

  .problem-grid,
  .solution-grid,
  .capability-grid,
  .command-metrics {
    grid-template-columns: 1fr;
  }

  .trust-band {
    justify-content: flex-start;
  }

  .hero {
    padding-top: 5rem;
  }
}

/* Subpage premium system */
.hero-subpage {
  padding: 4.5rem 0 2.6rem;
  border-bottom: 1px solid rgba(127, 150, 196, 0.18);
}

.sub-hero-grid {
  gap: 1.2rem;
  align-items: center;
}

.sub-hero-panel {
  padding: 1.15rem;
  border: 1px solid rgba(109, 146, 214, 0.3);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(10, 20, 36, 0.95), rgba(10, 23, 44, 0.9));
}

.sub-hero-panel h3 {
  margin-bottom: 0.45rem;
  font-size: 1.08rem;
}

.section-outcomes {
  padding: 1.7rem 0 2.1rem;
}

.outcome-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.outcome-strip span {
  padding: 0.46rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(122, 151, 206, 0.27);
  background: rgba(12, 23, 42, 0.78);
  color: #c5d3ea;
  font-size: 0.83rem;
}

.section-proof {
  padding-top: 2.2rem;
  padding-bottom: 1rem;
}

.section-alt-soft {
  background: linear-gradient(180deg, rgba(11, 20, 37, 0.62), rgba(8, 15, 28, 0));
  border-block: 1px solid rgba(122, 151, 206, 0.16);
}

@media (max-width: 860px) {
  .hero-subpage {
    padding-top: 3.8rem;
  }

  .outcome-strip {
    flex-direction: column;
  }
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 10px;
  z-index: 200;
  background: #0f1d35;
  color: #eef4ff;
  border: 1px solid rgba(130, 155, 210, 0.42);
  border-radius: 8px;
  padding: 0.45rem 0.65rem;
  font-size: 0.85rem;
}

.skip-link:focus {
  left: 12px;
}


.legal-content {
  max-width: 860px;
}

.legal-content p {
  margin: 0 0 1rem;
  color: var(--muted);
}

.legal-content a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}




/* =========================
   Quality Polish Layer (v3)
   ========================= */
:root {
  --space-1: 0.4rem;
  --space-2: 0.7rem;
  --space-3: 1rem;
  --space-4: 1.4rem;
  --space-5: 2rem;
  --space-6: 2.8rem;
}

*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.section {
  padding: 4.8rem 0;
}

.section-header {
  max-width: 760px;
  margin: 0 auto 2.6rem;
}

.section-header h2 {
  margin-bottom: 0.6rem;
}

.hero-copy h1 {
  max-width: 15ch;
}

.hero-lead {
  max-width: 60ch;
}

.section-proof-strip {
  padding-top: 1.6rem;
  padding-bottom: 2.2rem;
  border-top: 1px solid rgba(137, 164, 207, 0.15);
  border-bottom: 1px solid rgba(137, 164, 207, 0.15);
  background: linear-gradient(180deg, rgba(12, 22, 42, 0.72), rgba(8, 15, 29, 0.38));
}

.proof-label {
  text-align: center;
  font-size: 0.92rem;
  color: #b9c7df;
  margin-bottom: 1rem;
}

.logo-cloud {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.65rem;
}

.logo-cloud span {
  display: grid;
  place-items: center;
  border: 1px solid rgba(129, 153, 196, 0.25);
  border-radius: 10px;
  background: rgba(11, 21, 38, 0.74);
  color: #c8d5ec;
  min-height: 44px;
  font-size: 0.79rem;
  letter-spacing: 0.03em;
}

.workflow-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.workflow-card {
  border: 1px solid rgba(117, 143, 194, 0.24);
  border-radius: 14px;
  background: rgba(11, 21, 39, 0.84);
  padding: 1.15rem;
}

.workflow-card small {
  color: var(--primary);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.workflow-card h3 {
  margin-top: 0.45rem;
  margin-bottom: 0.45rem;
}

.section-usecases {
  background: linear-gradient(180deg, rgba(12, 23, 42, 0.52), rgba(8, 15, 29, 0.2));
  border-top: 1px solid rgba(122, 151, 206, 0.16);
  border-bottom: 1px solid rgba(122, 151, 206, 0.16);
}

.usecase-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.usecase-card {
  border: 1px solid rgba(120, 148, 197, 0.24);
  border-radius: 14px;
  background: rgba(11, 20, 36, 0.78);
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.usecase-card a {
  color: #bad2ff;
  font-weight: 600;
  font-size: 0.9rem;
  margin-top: auto;
}

.usecase-card a:hover {
  color: #d4e2ff;
}

.cta-band {
  box-shadow: 0 14px 34px rgba(4, 11, 24, 0.35);
}

.links a.nav-active {
  border: 1px solid rgba(116, 145, 197, 0.3);
}

@media (max-width: 1080px) {
  .logo-cloud {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .workflow-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .usecase-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  .section {
    padding: 4rem 0;
  }

  .logo-cloud,
  .workflow-grid,
  .usecase-grid {
    grid-template-columns: 1fr;
  }

  .hero-copy h1 {
    max-width: 19ch;
  }
}

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

/* =========================
   Light Premium Layer (v4)
   ========================= */
:root {
  --bg: #f5f8ff;
  --bg-elev: #ffffff;
  --bg-card: #ffffff;
  --text: #111b2f;
  --muted: #4d5b78;
  --line: rgba(41, 78, 145, 0.16);
  --primary: #0ea88d;
  --accent: #3c6df0;
  --shadow: 0 12px 30px rgba(20, 54, 110, 0.08);
}

html,
body {
  background:
    radial-gradient(circle at 8% -8%, rgba(96, 132, 238, 0.15), transparent 43%),
    radial-gradient(circle at 92% -10%, rgba(14, 168, 141, 0.12), transparent 42%),
    linear-gradient(180deg, #fbfdff 0%, #f5f8ff 50%, #f1f6ff 100%);
  color: var(--text);
}

.topbar {
  background: rgba(255, 255, 255, 0.84);
  border-bottom: 1px solid rgba(58, 95, 160, 0.18);
}

.wordmark,
h1,
h2,
h3 {
  color: #10213f;
}

.tagline {
  color: #5f759e;
}

.links {
  color: #4d5d7b;
}

.links a:hover,
.links a:focus-visible,
.links a.nav-active {
  color: #13264b;
  background: rgba(60, 109, 240, 0.09);
}

.btn-primary {
  background: linear-gradient(135deg, #3f73ff, #10a58d);
  color: #ffffff;
}

.btn-ghost {
  border-color: rgba(56, 90, 153, 0.2);
  color: #1c315d;
  background: rgba(255, 255, 255, 0.78);
}

.menu-btn,
.lang-btn {
  background: #ffffff;
  color: #28416f;
  border-color: rgba(56, 90, 153, 0.2);
}

.mobile-drawer {
  background: #fbfdff;
  border-top: 1px solid rgba(56, 90, 153, 0.18);
}

.mobile-drawer a {
  color: #4e607f;
}

.mobile-drawer a:hover {
  color: #1d325f;
  background: rgba(60, 109, 240, 0.08);
}

.hero-premium,
.hero-subpage {
  border-bottom: 1px solid rgba(58, 95, 160, 0.14);
}

.hero-lead,
p,
.proof-label,
.trust-band span,
.quote-text {
  color: #4f5f7d;
}

.hero-command,
.sub-hero-panel,
.problem-card,
.solution-card,
.capability-card,
.workflow-card,
.usecase-card,
.quote,
.plan-card,
.doc-card,
.post-card,
.value-card,
details.faq-item,
.compare-wrap {
  background: #ffffff;
  border-color: rgba(58, 95, 160, 0.16);
  box-shadow: var(--shadow);
}

.command-top small,
.command-metrics span,
.command-feed div,
.post-excerpt,
.doc-card p,
.value-card p,
.compare-table td,
.footer-col a,
.footer-bottom,
.breadcrumb {
  color: #5a6b89;
}

.command-metrics strong,
.post-title,
.compare-table td:first-child,
.compare-table th,
details.faq-item summary,
.stat strong {
  color: #112247;
}

.command-feed div,
.logo-cloud span,
.trust-band span,
.outcome-strip span {
  background: #f8fbff;
  border-color: rgba(64, 102, 170, 0.16);
}

.section-proof-strip,
.section-usecases,
.section-trust,
.section-alt-soft,
.section.alt {
  background: linear-gradient(180deg, rgba(235, 242, 255, 0.62), rgba(245, 248, 255, 0.2));
  border-color: rgba(58, 95, 160, 0.12);
}

.cta-band,
.cta-final {
  background: linear-gradient(135deg, rgba(63, 115, 255, 0.12), rgba(16, 165, 141, 0.1));
  border-color: rgba(63, 115, 255, 0.22);
}

.site-footer {
  border-top: 1px solid rgba(58, 95, 160, 0.18);
  background: rgba(255, 255, 255, 0.72);
}

.footer-col h4,
.eyebrow,
.workflow-card small,
.solution-card small,
.plan-name,
.post-cat {
  color: #1e9c8a;
}

.progress {
  background: linear-gradient(90deg, #3f73ff, #10a58d);
}

.skip-link {
  background: #ffffff;
  color: #173162;
  border-color: rgba(58, 95, 160, 0.26);
}

/* =========================
   Light Premium Variant B (v5)
   ========================= */
:root {
  --bg: #f3f7ff;
  --bg-elev: #ffffff;
  --bg-card: #ffffff;
  --text: #0f1f3a;
  --muted: #516384;
  --line: rgba(53, 94, 172, 0.16);
  --primary: #0fae98;
  --accent: #2f6cff;
  --shadow: 0 16px 40px rgba(37, 79, 150, 0.12);
}

html,
body {
  background:
    radial-gradient(circle at 7% -12%, rgba(47, 108, 255, 0.18), transparent 44%),
    radial-gradient(circle at 96% -18%, rgba(15, 174, 152, 0.14), transparent 42%),
    linear-gradient(180deg, #ffffff 0%, #f6f9ff 48%, #f2f7ff 100%);
}

.topbar {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(53, 94, 172, 0.14);
}

.btn {
  border-radius: 12px;
}

.btn-primary {
  background: linear-gradient(135deg, #2f6cff, #0fae98);
  box-shadow: 0 10px 22px rgba(47, 108, 255, 0.28);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(47, 108, 255, 0.32);
}

.hero-premium {
  background:
    radial-gradient(circle at 80% 8%, rgba(47, 108, 255, 0.1), transparent 35%),
    radial-gradient(circle at 12% 70%, rgba(15, 174, 152, 0.08), transparent 34%);
}

.hero-command {
  border: 1px solid rgba(61, 100, 179, 0.2);
  background: linear-gradient(165deg, #ffffff, #f5f9ff);
  box-shadow: var(--shadow);
}

.command-feed div {
  background: #f8fbff;
}

.section-proof-strip,
.section-usecases,
.section-trust,
.section-alt-soft,
.section.alt {
  background: linear-gradient(180deg, rgba(236, 244, 255, 0.85), rgba(244, 248, 255, 0.4));
}

.logo-cloud span,
.trust-band span,
.outcome-strip span,
.command-feed div {
  border-color: rgba(53, 94, 172, 0.18);
}

.problem-card,
.solution-card,
.capability-card,
.workflow-card,
.usecase-card,
.quote,
.plan-card,
.doc-card,
.post-card,
.value-card,
details.faq-item,
.compare-wrap {
  background: #ffffff;
  border: 1px solid rgba(53, 94, 172, 0.14);
  box-shadow: 0 10px 24px rgba(37, 79, 150, 0.08);
}

.problem-card:hover,
.solution-card:hover,
.capability-card:hover,
.workflow-card:hover,
.usecase-card:hover,
.post-card:hover,
.doc-card:hover,
.plan-card:hover,
.value-card:hover {
  border-color: rgba(47, 108, 255, 0.3);
  box-shadow: 0 16px 30px rgba(37, 79, 150, 0.14);
  transform: translateY(-2px);
}

.workflow-card small,
.solution-card small,
.footer-col h4,
.plan-name,
.post-cat {
  color: #109f90;
}

.cta-band,
.cta-final {
  background: linear-gradient(135deg, rgba(47, 108, 255, 0.14), rgba(15, 174, 152, 0.12));
  border: 1px solid rgba(47, 108, 255, 0.2);
  box-shadow: 0 12px 28px rgba(47, 108, 255, 0.12);
}

.footer-bottom,
.footer-col a,
.breadcrumb,
.compare-table td,
.doc-card p,
.post-excerpt,
.quote-text {
  color: #566a8b;
}

.progress {
  height: 4px;
  background: linear-gradient(90deg, #2f6cff, #0fae98);
}

/* =========================
   Interaction + Visual Refinement (v6)
   ========================= */
.lang-switcher {
  position: relative;
}

.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 40px;
  padding: 0.45rem 0.62rem;
  border-radius: 12px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
}

.lang-btn-icon {
  display: inline-flex;
  color: #3d65b3;
}

.lang-btn-label {
  max-width: 95px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lang-btn-code {
  padding: 0.14rem 0.38rem;
  border-radius: 999px;
  border: 1px solid rgba(53, 94, 172, 0.22);
  background: rgba(47, 108, 255, 0.1);
  color: #264b98;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.lang-chevron {
  color: #5a74aa;
  font-size: 0.76rem;
}

.lang-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 220px;
  padding: 0.45rem;
  border-radius: 14px;
  border: 1px solid rgba(53, 94, 172, 0.2);
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(33, 71, 138, 0.14);
  display: none;
  z-index: 200;
}

.lang-switcher[data-open="true"] .lang-dropdown {
  display: block;
}

.lang-title {
  margin: 0.35rem 0.45rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b80ab;
}

.lang-dropdown a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.55rem;
  padding: 0.46rem 0.5rem;
  border-radius: 10px;
  color: #2a436f;
  font-size: 0.85rem;
}

.lang-dropdown a:hover,
.lang-dropdown a:focus-visible {
  background: rgba(47, 108, 255, 0.08);
}

.lang-dropdown a[aria-current="page"] {
  background: rgba(47, 108, 255, 0.12);
  font-weight: 700;
}

.lang-dropdown .lang-code {
  min-width: 28px;
  text-align: center;
  padding: 0.12rem 0.3rem;
  border-radius: 999px;
  border: 1px solid rgba(53, 94, 172, 0.24);
  background: #f3f7ff;
  color: #2b4f9c;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
}

.lang-dropdown .lang-name {
  color: #25406f;
}

.lang-dropdown .lang-check {
  color: #0f9f8b;
  font-weight: 700;
}

.mobile-lang a[aria-current="page"] {
  border: 1px solid rgba(47, 108, 255, 0.24);
  background: rgba(47, 108, 255, 0.08);
  color: #1e3a71;
}

.hero-visual {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(53, 94, 172, 0.18);
  margin-bottom: 0.75rem;
  background: #ffffff;
}

.workflow-image-card {
  grid-column: 1 / -1;
  border-radius: 14px;
  border: 1px solid rgba(53, 94, 172, 0.16);
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(37, 79, 150, 0.09);
  overflow: hidden;
}

.workflow-image-card img {
  display: block;
  width: 100%;
  height: auto;
}

.trust-image-wrap {
  margin-bottom: 1.4rem;
}

.trust-image-wrap img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(53, 94, 172, 0.16);
  box-shadow: 0 10px 24px rgba(37, 79, 150, 0.08);
}

@media (max-width: 980px) {
  .lang-btn-label {
    display: none;
  }

  .actions {
    gap: 0.5rem;
  }
}

/* =========================
   Final Light Balance (v7)
   ========================= */
:root {
  --bg: #f7f9fe;
  --bg-elev: #ffffff;
  --bg-card: #ffffff;
  --text: #0c1f45;
  --muted: #3e557f;
  --line: rgba(50, 85, 151, 0.15);
  --primary: #0f9f8b;
  --accent: #2f67f2;
  --shadow: 0 12px 28px rgba(36, 73, 142, 0.1);
}

html,
body {
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fe 100%);
  color: var(--text);
}

.topbar {
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(50, 85, 151, 0.14);
}

.hero-premium {
  background: radial-gradient(circle at 78% 8%, rgba(47, 103, 242, 0.1), transparent 38%), radial-gradient(circle at 12% 86%, rgba(15, 159, 139, 0.08), transparent 34%);
}

h1,
h2,
h3,
.wordmark,
.plan-price,
.stat strong {
  color: #0b2149;
}

p,
.hero-lead,
.proof-label,
.post-excerpt,
.doc-card p,
.compare-table td,
.footer-col a,
.footer-bottom,
.quote-text,
.command-metrics span,
.command-feed div {
  color: #405881;
}

.hero-trust-list li {
  color: #36507d;
  font-weight: 600;
}

.btn-primary {
  background: linear-gradient(135deg, #2e66f2, #0fa28d);
  color: #ffffff;
}

.btn-ghost {
  border-color: rgba(50, 85, 151, 0.2);
  color: #1f3f79;
  background: #ffffff;
}

.problem-card,
.solution-card,
.capability-card,
.workflow-card,
.usecase-card,
.quote,
.plan-card,
.doc-card,
.post-card,
.value-card,
details.faq-item,
.compare-wrap,
.hero-command,
.sub-hero-panel {
  background: #ffffff;
  border-color: rgba(50, 85, 151, 0.15);
  box-shadow: var(--shadow);
}

.plan-card.featured {
  background: linear-gradient(180deg, #f4f8ff, #ecf4ff);
  border-color: rgba(47, 103, 242, 0.26);
  box-shadow: 0 16px 32px rgba(47, 103, 242, 0.14);
}

.compare-table th {
  background: #eef4ff;
  color: #153261;
}

.compare-table tr:nth-child(even) td {
  background: #f8fbff;
}

.check {
  color: #0f9f60;
}

.cross {
  color: #d54b63;
}

.section-proof-strip,
.section-usecases,
.section-trust,
.section.alt,
.section-alt-soft {
  background: linear-gradient(180deg, #f4f8ff, rgba(247, 250, 255, 0.45));
}

.logo-cloud span,
.outcome-strip span,
.trust-band span,
.command-feed div,
.command-metrics article {
  background: #f8fbff;
  border-color: rgba(50, 85, 151, 0.14);
}

.workflow-image-card,
.trust-image-wrap img,
.hero-visual {
  border-color: rgba(50, 85, 151, 0.14);
}

.lang-switcher:hover .lang-dropdown,
.lang-switcher:focus-within .lang-dropdown {
  display: none !important;
}

.lang-switcher[data-open="true"] .lang-dropdown {
  display: block !important;
}

.mockup-surface {
  border: 1px solid rgba(50, 85, 151, 0.16);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(36, 73, 142, 0.1);
  padding: 0.8rem;
}

.mockup-head {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 0.6rem;
}

.mockup-head span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c7d7f7;
}

.mockup-body {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 0.55rem;
}

.mockup-chart {
  min-height: 130px;
  border-radius: 10px;
  border: 1px solid rgba(50, 85, 151, 0.14);
  background: linear-gradient(160deg, rgba(47, 103, 242, 0.18), rgba(15, 159, 139, 0.12));
}

.mockup-lines {
  display: grid;
  gap: 0.44rem;
  align-content: start;
}

.mockup-lines span {
  height: 10px;
  border-radius: 6px;
  background: #e4ecfb;
}

.mockup-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
  margin-top: 0.6rem;
}

.mockup-metrics div {
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(50, 85, 151, 0.14);
  background: #f6f9ff;
}

.mockup-caption {
  margin-top: 0.55rem;
  font-size: 0.82rem;
  color: #5a7098;
  text-align: center;
}

@media (max-width: 780px) {
  .mockup-body {
    grid-template-columns: 1fr;
  }

  .mockup-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================
   Split Visual Fix (v8)
   ========================= */
.split-visual {
  background: #ffffff;
  border: 1px solid rgba(50, 85, 151, 0.14);
  box-shadow: 0 10px 24px rgba(36, 73, 142, 0.09);
}

.split-visual-media-wrap {
  display: grid;
  gap: 0.65rem;
  align-content: start;
}

.split-visual-media {
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid rgba(50, 85, 151, 0.12);
  background: #f8fbff;
}

.split-visual-caption {
  margin: 0;
  font-size: 0.82rem;
  color: #5a7098;
  text-align: center;
}

.mockup-surface,
.mockup-caption {
  display: none !important;
}

/* =========================
   Mobile Header Repair (v9)
   ========================= */
@media (max-width: 860px) {
  .nav {
    min-height: 66px;
    gap: 0.5rem;
  }

  .brand img {
    width: 30px;
    height: 30px;
    border-radius: 9px;
  }

  .wordmark {
    font-size: 1.02rem;
    letter-spacing: -0.01em;
  }

  .tagline {
    display: none;
  }

  .actions {
    margin-left: auto;
    gap: 0.45rem;
  }

  .actions .lang-switcher,
  .actions .btn {
    display: none;
  }

  .menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0.4rem 0.65rem;
    font-size: 0.86rem;
    border-radius: 10px;
    background: #ffffff;
    color: #1f3d77;
  }

  .mobile-drawer nav {
    gap: 0.4rem;
    padding: 0.9rem;
  }

  .mobile-drawer a {
    padding: 0.72rem 0.74rem;
    border-radius: 10px;
  }

  .mobile-lang {
    margin-top: 0.4rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(50, 85, 151, 0.16);
  }
}

@media (max-width: 520px) {
  .brand {
    gap: 0.45rem;
  }

  .wordmark {
    font-size: 0.96rem;
    max-width: 104px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hero {
    padding-top: 4.2rem;
  }
}

.mobile-drawer a.nav-active {
  border: 1px solid rgba(47, 103, 242, 0.24);
  background: rgba(47, 103, 242, 0.08);
  color: #173767;
  font-weight: 600;
}

@media (max-width: 520px) {
  .hero-copy h1 {
    font-size: clamp(1.92rem, 9.2vw, 2.62rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 0.72rem;
  }

  .hero-lead {
    font-size: 1.02rem;
    line-height: 1.52;
  }

  .hero-cta {
    margin-top: 1rem;
    gap: 0.55rem;
  }

  .hero-cta .btn {
    min-height: 44px;
    padding: 0.66rem 0.88rem;
    font-size: 0.98rem;
  }
}

/* =========================
   Visual System Refresh (v10)
   ========================= */
:root {
  --bg: #f3f6fc;
  --bg-elev: #ffffff;
  --bg-card: #ffffff;
  --text: #10264d;
  --muted: #4e658b;
  --line: rgba(35, 72, 141, 0.16);
  --primary: #1f6dff;
  --accent: #00a98f;
  --danger: #d64a63;
  --ok: #2fbe72;
  --shadow: 0 12px 28px rgba(16, 38, 77, 0.1);
}

html,
body {
  background:
    radial-gradient(circle at 12% -12%, rgba(31, 109, 255, 0.18) 0%, transparent 42%),
    radial-gradient(circle at 92% -18%, rgba(0, 169, 143, 0.14) 0%, transparent 44%),
    linear-gradient(180deg, #f8fbff 0%, #f1f5fc 100%);
  color: var(--text);
}

.topbar {
  background: rgba(248, 251, 255, 0.92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}

.wordmark,
.hero h1,
h1,
h2,
h3 {
  color: #0f2b57;
}

.tagline,
.section-header p,
.hero-lead,
.split-text p,
.plan-desc,
.post-excerpt,
.value-card p,
.doc-card p {
  color: var(--muted);
}

.section,
.hero,
.site-footer {
  background: transparent;
}

.section.alt,
.section-alt-soft,
.section-proof,
.section-usecases,
.section-trust {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(245, 249, 255, 0.72));
}

.sub-hero-panel,
.capability-card,
.problem-card,
.plan-card,
.post-card,
.doc-card,
.value-card,
.compare-wrap,
.cta-band,
.outcome-strip span,
.trust-band span,
.logo-cloud span {
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 10px 24px rgba(18, 48, 98, 0.08);
}

.btn-ghost {
  background: #ffffff;
  border-color: rgba(35, 72, 141, 0.24);
  color: #1b3d73;
}

.btn-primary {
  background: linear-gradient(120deg, #2f6cf6, #04a58f);
  box-shadow: 0 8px 22px rgba(35, 102, 224, 0.28);
}

.split-visual {
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 12px 30px rgba(18, 48, 98, 0.1);
  padding: 0.9rem;
}

.split-visual-media {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 12px;
  background: #f2f7ff;
}

.split-visual-caption {
  display: none;
}

.plan-card.featured {
  background: linear-gradient(180deg, #1f3e73 0%, #21345b 100%);
  border-color: rgba(66, 137, 255, 0.45);
}

.plan-card.featured .plan-name,
.plan-card.featured .plan-price,
.plan-card.featured .plan-desc,
.plan-card.featured .plan-features li {
  color: #eaf1ff;
}

.compare-table th {
  background: #44597c;
  color: #f7fbff;
}

.compare-table td {
  color: #243f67;
}

.compare-table tbody tr:nth-child(even) td {
  background: #eff5ff;
}

.lang-switcher {
  position: relative;
}

.lang-btn {
  min-height: 40px;
  padding: 0.42rem 0.7rem;
  border-radius: 12px;
  border: 1px solid rgba(38, 78, 149, 0.2);
  background: #ffffff;
  color: #204372;
  box-shadow: 0 8px 20px rgba(25, 58, 116, 0.08);
}

.lang-dropdown {
  min-width: 240px;
  border-radius: 14px;
  border: 1px solid rgba(38, 78, 149, 0.2);
  background: #ffffff;
  box-shadow: 0 18px 36px rgba(16, 38, 77, 0.16);
  padding: 0.55rem;
}

.lang-dropdown .lang-title {
  margin: 0.2rem 0.4rem 0.45rem;
  color: #3f5b87;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lang-dropdown a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.45rem;
  color: #2b4c7b;
  border-radius: 10px;
  padding: 0.54rem 0.58rem;
}

.lang-dropdown a:hover,
.lang-dropdown a:focus-visible {
  background: #edf4ff;
}

.lang-dropdown a[aria-current="page"] {
  background: #e6f0ff;
  border: 1px solid rgba(58, 110, 208, 0.28);
}

@media (max-width: 860px) {
  .actions .lang-switcher,
  .actions .btn-ghost {
    display: none;
  }

  .actions .btn-primary {
    display: inline-flex;
    min-height: 38px;
    padding: 0.45rem 0.75rem;
    font-size: 0.9rem;
    border-radius: 10px;
  }

  .menu-btn {
    min-height: 38px;
    border: 1px solid rgba(34, 72, 140, 0.2);
    color: #244675;
  }

  .mobile-drawer {
    background: #f8fbff;
    border-top: 1px solid rgba(35, 72, 141, 0.14);
  }

  .mobile-drawer nav {
    padding: 1rem;
    gap: 0.5rem;
  }

  .mobile-drawer a {
    background: #ffffff;
    border: 1px solid rgba(35, 72, 141, 0.15);
    border-radius: 12px;
    color: #224572;
  }

  .mobile-lang {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.48rem;
    margin-top: 0.36rem;
    padding-top: 0.6rem;
  }

  .mobile-lang a {
    font-size: 0.95rem;
    font-weight: 600;
    justify-content: center;
  }

  .mobile-lang a[aria-current="page"] {
    border-color: rgba(44, 104, 226, 0.42);
    background: #e7f0ff;
  }
}

@media (max-width: 520px) {
  .hero {
    padding-top: 4.8rem;
  }

  .hero-copy h1 {
    font-size: clamp(2rem, 9vw, 2.7rem);
    line-height: 1.04;
  }

  .hero-lead {
    font-size: 1.04rem;
    line-height: 1.55;
  }

  .hero-cta .btn {
    min-height: 45px;
  }
}

.header-search {
  position: relative;
  display: flex;
  align-items: center;
}

.search-open {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 40px;
  padding: 0 0.62rem;
  border-radius: 12px;
  border: 1px solid rgba(35, 72, 141, 0.24);
  background: #ffffff;
  color: #24497f;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.search-open:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(31, 78, 153, 0.14);
}

.search-inline {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(35, 72, 141, 0.18);
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(16, 38, 77, 0.14);
  transition: width 220ms ease, opacity 180ms ease, padding 180ms ease;
  z-index: 240;
}

.header-search[data-open="true"] .search-inline {
  width: min(460px, 74vw);
  opacity: 1;
  pointer-events: auto;
  padding: 0.45rem;
}

.search-inline input {
  flex: 1;
  min-width: 110px;
  border: 1px solid rgba(35, 72, 141, 0.18);
  border-radius: 9px;
  height: 36px;
  padding: 0 0.65rem;
  color: #173b70;
  font-size: 0.9rem;
  background: #f8fbff;
}

.search-inline button {
  border: 0;
  border-radius: 9px;
  height: 36px;
  padding: 0 0.78rem;
  background: linear-gradient(120deg, #2f6cf6, #04a58f);
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 1080px) {
  .header-search {
    display: none;
  }
}

@media (max-width: 1360px) {
  .links {
    gap: 0.45rem;
    font-size: 0.88rem;
  }

  .links a {
    padding: 0.38rem 0.4rem;
  }

  .actions {
    gap: 0.45rem;
  }

  .search-open span,
  .lang-btn-label {
    display: none;
  }

  .search-open {
    width: 40px;
    justify-content: center;
    padding: 0;
  }

  .actions .btn-primary {
    white-space: nowrap;
    padding: 0.58rem 0.74rem;
    font-size: 0.84rem;
  }
}

/* Header single-line stability for long localized labels (e.g. FR) */
.topbar .links a,
.topbar .search-open,
.topbar .lang-btn,
.topbar .actions .btn-primary {
  white-space: nowrap;
}

.topbar .links {
  flex-wrap: nowrap;
  min-width: 0;
}

@media (max-width: 1280px) {
  .topbar .links {
    gap: 0.34rem;
    font-size: 0.84rem;
  }

  .topbar .links a {
    padding: 0.34rem 0.34rem;
  }

  .topbar .actions {
    gap: 0.34rem;
  }

  .topbar .lang-btn {
    padding: 0.4rem 0.54rem;
  }

  .topbar .actions .btn-primary {
    padding: 0.56rem 0.68rem;
    font-size: 0.82rem;
  }
}

/* Blog Categories */
.blog-filter {
  display: grid;
  gap: 1rem;
}

.blog-filter-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.blog-filter-chip {
  border: 1px solid #bfd1ef;
  background: #f3f8ff;
  color: #153b73;
  border-radius: 999px;
  padding: 0.42rem 0.82rem;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.blog-filter-chip:hover {
  background: #e8f1ff;
}

.blog-filter-chip.is-active {
  background: #dceaff;
  border-color: #7ea6e3;
  color: #0f2e5c;
}

.blog-filter-grid {
  margin-top: 0.35rem;
}

.blog-filter-card .post-body {
  min-height: 190px;
}