:root {
  --bg: #F8FAFC;
  --bg-soft: #EEF6FF;
  --card: #FFFFFF;
  --card-soft: #F9FBFF;
  --primary: #2563EB;
  --primary-soft: #EFF6FF;
  --secondary: #22D3EE;
  --secondary-soft: #E0F7FF;
  --success: #10B981;
  --success-soft: #D1FAE5;
  --warning: #F59E0B;
  --warning-soft: #FEF3C7;
  --danger: #EF4444;
  --danger-soft: #FEE2E2;
  --text: #08111F;
  --text-muted: #64748B;
  --border: #E2E8F0;
  --gradient-ai: linear-gradient(135deg, #EFF6FF 0%, #E0F7FF 45%, #D1FAE5 100%);
  --gradient-primary: linear-gradient(135deg, #2563EB 0%, #22D3EE 100%);
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow-soft: 0 10px 24px rgba(15, 23, 42, 0.06);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Manrope', sans-serif;
  color: var(--text);
  background: radial-gradient(circle at 12% 6%, #f2f8ff 0%, transparent 34%), var(--bg);
}

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

.container {
  width: min(1200px, 92%);
  margin: 0 auto;
}

.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 72px;
  background: #fff;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding: 30px 0;
  flex-wrap: wrap;
}

.footer-brand {
  display: grid;
  gap: 10px;
  align-content: start;
}

.footer-logo { height: 40px; width: auto; }
.footer-copy { margin: 0; color: var(--text-muted); font-size: .9rem; max-width: 460px; }

.footer-col {
  display: grid;
  gap: 8px;
  align-content: start;
}

.footer-col h4 {
  margin: 0 0 4px;
  font-size: .94rem;
}

.footer-col a {
  color: var(--text-muted);
  font-size: .9rem;
}

.footer-col a:hover {
  color: #1e40af;
}

.footer-compact {
  margin-top: 28px;
  background: #ffffff;
}

.footer-compact-inner {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 0;
}

.footer-compact-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-compact-brand .footer-logo {
  height: 28px;
}

.footer-compact-brand .footer-copy {
  margin: 0;
  font-size: .82rem;
}

.footer-compact-links {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.footer-compact-links a {
  color: var(--text-muted);
  font-size: .84rem;
}

.footer-compact-links a:hover {
  color: #1e40af;
}

.public-navbar-wrap {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.public-navbar {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.brand-link { display: inline-flex; align-items: center; gap: 10px; }
.brand-logo { width: 34px; height: 34px; }
.brand-logo-wide { height: 34px; width: auto; }

.public-nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.public-nav-links > a:not(.btn) {
  color: var(--text-muted);
  font-weight: 600;
  font-size: .93rem;
  padding: 8px 10px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.public-nav-links > a:not(.btn):hover,
.public-nav-links > a:not(.btn).is-active {
  color: var(--text);
  background: var(--primary-soft);
}

.public-nav-links .btn-primary { color: #fff; }
.public-nav-links .btn-outline { color: var(--text); }

.public-nav-more {
  position: relative;
}

.public-nav-more summary {
  list-style: none;
  color: var(--text-muted);
  font-weight: 600;
  font-size: .93rem;
  padding: 8px 10px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.public-nav-more summary::-webkit-details-marker {
  display: none;
}

.public-nav-more[open] summary,
.public-nav-more.is-active summary,
.public-nav-more summary:hover {
  color: var(--text);
  background: var(--primary-soft);
}

.public-nav-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow-soft);
  padding: 8px;
  display: grid;
  gap: 2px;
}

.public-nav-dropdown a {
  color: var(--text-muted);
  border-radius: 9px;
  padding: 8px 10px;
  font-size: .9rem;
  font-weight: 600;
}

.public-nav-dropdown a:hover,
.public-nav-dropdown a.is-active {
  color: var(--text);
  background: var(--primary-soft);
}

.btn {
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 10px 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 650;
  transition: .2s ease;
}

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

.btn-primary {
  color: #fff;
  background: var(--gradient-primary);
  box-shadow: 0 10px 24px rgba(59,130,246,.22);
}

.btn-outline {
  color: var(--text);
  border-color: var(--border);
  background: #fff;
}

.btn-soft {
  color: #1d4ed8;
  border-color: #bfdbfe;
  background: #eff6ff;
}

.btn-sm { padding: 7px 11px; font-size: .84rem; }

.hero {
  position: relative;
  overflow: hidden;
  background: var(--gradient-ai);
  padding: 68px 0 48px;
}

.hero-network-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: .72;
}

.hero-content-layer { position: relative; z-index: 2; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  gap: 28px;
  align-items: center;
}

.hero-eyebrow {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  border-radius: 999px;
  padding: 6px 12px;
  color: #1e40af;
  font-size: .84rem;
  font-weight: 700;
}

.hero h1 {
  margin: 12px 0;
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  color: #0f172a;
}

.hero p { color: #1f2937; max-width: 710px; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.hero-trust { margin-top: 12px; color: #334155; font-size: .92rem; }

.saas-demo {
  background: #fff;
  border: 1px solid #EFF6FF;
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow-soft);
}

.demo-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.demo-title { color: #1e3a8a; font-weight: 600; }

.demo-score { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.demo-score-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-soft);
  padding: 10px;
}
.demo-score-value { margin: 0; font-size: 1.32rem; font-weight: 800; }

.demo-bars { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.demo-bars small { color: var(--text-muted); }
.demo-bar { height: 8px; border-radius: 999px; background: #e5edff; overflow: hidden; }
.demo-bar span { height: 100%; display: block; background: var(--gradient-primary); }

.section { padding: 40px 0; }
.public-page-hero { padding: 52px 0 18px; background: linear-gradient(180deg, #f8fbff, transparent); }
.why-hero { background: linear-gradient(180deg, #eff6ff 0%, transparent 100%); }
.feature-hero { background: linear-gradient(180deg, #f0fdf4 0%, transparent 100%); }
.process-hero { background: linear-gradient(180deg, #f8faff 0%, transparent 100%); }
.section-title { margin: 0 0 12px; font-size: clamp(1.45rem, 2.3vw, 2.2rem); color: #0f172a; }
.section-subtitle { margin: 0 0 20px; color: var(--text-muted); }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-soft);
}

.card h3, .card h4 { margin-top: 0; }
.card p { color: #334155; }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.card-soft {
  background: var(--card-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
}

.kpi { margin: 6px 0; font-size: 2rem; font-weight: 800; color: #0f172a; }
.kpi-sub { margin: 0; color: var(--text-muted); font-size: .9rem; }

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 6px 11px;
  font-size: .8rem;
  font-weight: 650;
}

.status-success { color: #065f46; border-color: #86efac; background: var(--success-soft); }
.status-info { color: #1d4ed8; border-color: #bfdbfe; background: var(--primary-soft); }
.status-warning { color: #92400e; border-color: #fcd34d; background: var(--warning-soft); }
.status-missing { color: #92400e; border-color: #fcd34d; background: var(--warning-soft); }
.status-error { color: #991b1b; border-color: #fecaca; background: #fef2f2; }
.status-neutral { color: #475569; border-color: #cbd5e1; background: #f1f5f9; }

.demo-pill {
  display: inline-flex;
  font-size: .78rem;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  padding: 4px 10px;
  color: #475569;
  background: #f8fafc;
}

.auth-wrap {
  min-height: calc(100vh - 76px);
  display: grid;
  place-items: center;
  padding: 28px 0;
}

.auth-card {
  width: min(620px, 94%);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-soft);
}

.form-grid { display: grid; gap: 12px; }
.form-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

label {
  display: grid;
  gap: 8px;
  color: #1f2937;
  font-size: .92rem;
}

input, select, textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: var(--text);
  border-radius: 10px;
  padding: 10px 11px;
  font: inherit;
}
textarea { min-height: 100px; resize: vertical; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; vertical-align: top; border-bottom: 1px solid #e2e8f0; padding: 11px 9px; }
th { color: #334155; font-weight: 700; }

.progress { width: 100%; height: 10px; border-radius: 999px; background: #e5edff; overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: 999px; background: var(--gradient-primary); }

.notice {
  border-radius: 12px;
  border: 1px solid #fcd34d;
  background: #fffbeb;
  color: #92400e;
  padding: 13px;
}

.mobile-nav-toggle {
  display: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  color: #1f2937;
}

.legal-page { padding: 44px 0 28px; }
.legal-container { max-width: 860px; }
.legal-warning { font-size: .85rem; color: #92400e; }
.legal-section {
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  background: #fff;
}

.ai-sim { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sim-question,
.sim-answer {
  border-radius: 14px;
  border: 1px solid #EFF6FF;
  padding: 16px;
}
.sim-question { background: #ffffff; }
.sim-answer { background: #f8fafc; }

.ai-chat-sim {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.ai-sim-platforms {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.ai-platform-btn,
.ai-mode-btn {
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-muted);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: .82rem;
  font-weight: 650;
  cursor: pointer;
}

.ai-platform-btn.active,
.ai-mode-btn.active {
  color: #1e40af;
  background: var(--primary-soft);
  border-color: #bfdbfe;
}

.ai-chat-shell {
  display: grid;
  gap: 12px;
}

.ai-chat-bubble {
  border: 1px solid #EFF6FF;
  border-radius: 14px;
  padding: 14px;
  background: #fff;
}

.ai-chat-bubble.user {
  background: #eff6ff;
}

.ai-chat-bubble.assistant {
  background: #ffffff;
}

.ai-chat-role {
  margin: 0 0 8px;
  color: #334155;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.ai-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.ai-chat-mode {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.ai-typing {
  margin: 8px 0;
  color: #64748b;
  font-size: .88rem;
}

.ai-answer {
  margin: 6px 0 10px;
  color: #1f2937;
}

.ai-answer strong {
  color: #1d4ed8;
}

.ai-chat-meta {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.ai-source-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.plan-toggle {
  display: inline-flex;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
  background: #fff;
  margin-bottom: 18px;
}

.plan-toggle button {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  padding: 8px 13px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
}

.plan-toggle button.active { color: #1e40af; background: var(--primary-soft); }

.plan-card.popular {
  border-color: #bfdbfe;
  box-shadow: 0 14px 30px rgba(59,130,246,.12);
  position: relative;
}

.plan-badge {
  display: inline-flex;
  margin-bottom: 10px;
  border-radius: 999px;
  padding: 6px 11px;
  font-size: .76rem;
  font-weight: 700;
  background: var(--secondary-soft);
  border: 1px solid #99F6E4;
  color: #0E7490;
}

.pricing-hero-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pricing-hero-strip span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #EFF6FF;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: .82rem;
  color: #1e3a8a;
  background: #eff6ff;
}

.pricing-meta {
  margin-top: 10px;
  display: grid;
  gap: 6px;
}

.pricing-meta-item {
  font-size: .86rem;
  color: #334155;
  border-radius: 10px;
  padding: 8px 10px;
  background: #f8fbff;
  border: 1px solid #EFF6FF;
}

.pricing-secure-note {
  margin-top: 12px;
}

.pricing-bottom-note {
  margin-top: 14px;
}

.auth-split {
  width: min(980px, 96%);
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 16px;
}

.login-side {
  display: grid;
  gap: 10px;
  align-content: start;
}

.login-benefits {
  border: 1px solid #EFF6FF;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
  border-radius: var(--radius-md);
  padding: 16px;
  display: grid;
  gap: 12px;
  align-content: start;
}

.login-benefits h3 {
  margin: 0;
}

.login-mini-card {
  border: 1px solid #BAEFFF;
  background: #faf9ff;
  border-radius: 12px;
  padding: 10px;
}

.login-demo-note {
  margin-bottom: 2px;
}

.login-submit-btn {
  color: #fff;
}

.package-cards { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.package-option {
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: 14px;
  background: #fff;
  cursor: pointer;
}
.package-option input { display: none; }
.package-option.active { border-color: #93c5fd; background: #eff6ff; }
.package-option-title { display: block; font-size: .98rem; font-weight: 700; margin-bottom: 3px; }
.package-option-note { color: var(--text-muted); font-size: .87rem; }

.result-panel { border: 1px solid #bfdbfe; background: #f8fbff; }
.result-list { margin: 0; padding-left: 18px; color: #334155; }
.result-list li { margin-bottom: 6px; }
.result-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ai-test-side {
  background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
}

.ai-test-result .card-soft {
  background: #fff;
}

.ai-test-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.ai-test-steps .step-item {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  cursor: pointer;
  min-height: 54px;
}

.ai-test-pane {
  display: grid;
  gap: 12px;
}

.ai-test-pane h3 {
  margin: 4px 0;
}

.share-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.eyebrow-soft {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #EFF6FF;
  border-radius: 999px;
  background: #eff6ff;
  color: #1e3a8a;
  font-size: .85rem;
  padding: 6px 11px;
}

.icon-card { display: grid; gap: 10px; }
.icon-badge {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-size: 1.05rem;
  border: 1px solid #EFF6FF;
  background: #eff6ff;
  color: #1d4ed8;
}
.icon-logo {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.icon-logo-png {
  width: 26px;
  height: 26px;
}

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

.logo-card {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 14px;
  padding: 14px;
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
}

.logo-card img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.logo-card h3 {
  margin: 0;
  font-size: .9rem;
}

.logo-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.logo-chip {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 12px;
  background: #fff;
  display: inline-flex;
  align-items: center;
}

.logo-chip img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.platform-showcase {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.platform-tile {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  display: grid;
  gap: 8px;
}

.platform-tile img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.platform-tile h3 {
  margin: 0;
  font-size: .96rem;
}

.platform-tile p {
  margin: 0;
}

.plan-modern-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.plan-modern-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  padding: 16px;
  box-shadow: var(--shadow-soft);
}

.plan-modern-card.featured {
  border-color: #bfdbfe;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.process-flow {
  display: grid;
  gap: 12px;
}
.process-journey {
  position: relative;
}

.process-journey::before {
  content: '';
  position: absolute;
  left: 39px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: linear-gradient(180deg, #dbeafe 0%, #bfdbfe 100%);
  z-index: 0;
}

.process-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.process-index {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
  display: grid;
  place-items: center;
  font-weight: 800;
}

.process-card h3 {
  margin: 0 0 6px;
}

.process-card p {
  margin: 0;
}

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

.journey-phase {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  padding: 14px;
}

.journey-phase h3 {
  margin: 10px 0 8px;
  font-size: 1rem;
}

.journey-phase p {
  margin: 0;
}

.feature-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #334155;
}
.feature-list i { margin-top: 2px; color: #2563eb; }

.badge-image-lg { width: 110px; height: 110px; object-fit: contain; }
.badge-image-xl { width: 180px; height: 180px; object-fit: contain; }

.info-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.info-strip .strip-item {
  border: 1px solid #EFF6FF;
  border-radius: 12px;
  background: #fff;
  padding: 12px;
}

.cta-band { text-align: center; padding: 26px; }
.ai-test-layout { align-items: start; }
.ai-test-wizard-shell {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px;
  background: #fbfdff;
}
.ai-step-counter {
  margin: 4px 0 0;
  font-size: .86rem;
  color: #475569;
  font-weight: 700;
}

.ai-test-side {
  position: sticky;
  top: 90px;
}

.consent-wrap {
  display: grid;
  gap: 10px;
}

.consent-wrap h3 {
  margin: 0;
}

.consent-item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: #fff;
}

.consent-item.required {
  background: #f8fbff;
  border-color: #bfdbfe;
}

.consent-item.optional {
  background: #faf9ff;
  border-color: #BAEFFF;
}

.consent-item input[type="checkbox"] {
  margin-top: 3px;
  width: 16px;
  height: 16px;
}

.consent-item span {
  display: grid;
  gap: 4px;
}

.consent-item small {
  color: var(--text-muted);
  font-size: .82rem;
}

.consent-item a {
  color: #2563eb;
  text-decoration: underline;
}

.demo-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  max-width: 360px;
  z-index: 80;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1e3a8a;
  font-size: .9rem;
  box-shadow: var(--shadow-soft);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: .2s ease;
}

.demo-toast.show {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1080px) {
  .hero-grid,
  .grid-4,
  .grid-3,
  .grid-5,
  .package-cards,
  .logo-grid,
  .plan-modern-grid,
  .platform-showcase,
  .journey-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auth-split { grid-template-columns: 1fr; }
  .info-strip { grid-template-columns: 1fr; }
  .ai-test-side { position: static; }
}

@media (max-width: 768px) {
  .mobile-nav-toggle { display: inline-grid; }

  .public-nav-links {
    position: fixed;
    inset: 74px 12px auto;
    z-index: 42;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px;
    background: #fff;
    display: none;
    flex-direction: column;
    align-items: stretch;
    box-shadow: var(--shadow-soft);
  }

  .public-nav-links.open { display: flex; }

  .public-nav-more {
    width: 100%;
  }

  .public-nav-more summary {
    width: 100%;
    justify-content: flex-start;
  }

  .public-nav-dropdown {
    position: static;
    box-shadow: none;
    border: 1px solid var(--border);
    margin-top: 6px;
  }

  .hero,
  .section,
  .auth-wrap { padding-top: 24px; }

  .hero-grid,
  .grid-2,
  .grid-3,
  .grid-4,
  .grid-5,
  .form-grid.cols-2,
  .footer-inner,
  .ai-sim,
  .package-cards,
  .logo-grid,
  .plan-modern-grid,
  .platform-showcase,
  .journey-grid {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

  .process-journey::before {
    display: none;
  }

  .badge-image-lg { width: 106px; height: 106px; }
  .badge-image-xl { width: 140px; height: 140px; }
  .ai-test-steps { grid-template-columns: 1fr; }
}

.onboarding-start {
  background: #f7f9fc;
  min-height: calc(100vh - 76px);
  padding: 44px 16px;
}

.onboarding-shell {
  width: min(1060px, 100%);
  margin: 0 auto;
  display: grid;
  place-items: start center;
}

.onboarding-panel {
  width: min(720px, 100%);
  background: #fff;
  border: 1px solid #dbe4ee;
  border-radius: 8px;
  padding: clamp(24px, 4vw, 44px);
  box-shadow: 0 20px 60px rgba(15, 23, 42, .08);
}

.onboarding-panel-wide {
  width: min(980px, 100%);
}

.onboarding-panel h1,
.onboarding-result-hero h1 {
  margin: 12px 0 10px;
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: 0;
}

.onboarding-panel p,
.onboarding-result-hero p {
  color: #475569;
  font-size: 1.02rem;
}

.onboarding-progress-dots {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}

.onboarding-progress-dots span {
  width: 34px;
  height: 4px;
  border-radius: 999px;
  background: #dbe4ee;
}

.onboarding-progress-dots span.active {
  background: #0f172a;
}

.onboarding-form {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

.onboarding-form label {
  display: grid;
  gap: 7px;
  font-weight: 750;
  color: #0f172a;
}

.onboarding-form label small {
  color: #64748b;
  font-weight: 600;
}

.onboarding-form input,
.onboarding-form select,
.onboarding-form textarea {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  min-height: 46px;
  padding: 11px 12px;
  color: #0f172a;
}

.onboarding-form textarea {
  min-height: 94px;
  resize: vertical;
}

.onboarding-auth-row {
  display: grid;
  gap: 10px;
  justify-items: stretch;
  text-align: center;
  color: #64748b;
}

.google-auth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.google-auth-btn img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.onboarding-email-box,
.onboarding-add-box {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fbfdff;
}

.onboarding-email-box h3,
.onboarding-add-box h3 {
  margin: 0;
  font-size: 1rem;
}

.onboarding-check {
  grid-template-columns: auto 1fr;
  align-items: start;
  font-weight: 600;
  color: #475569;
}

.onboarding-check input {
  min-height: auto;
  margin-top: 4px;
}

.onboarding-primary {
  width: 100%;
  justify-content: center;
}

.onboarding-note {
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1e3a8a !important;
  border-radius: 8px;
  padding: 12px;
  margin: 0;
}

.onboarding-actions.split {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.onboarding-list {
  display: grid;
  gap: 10px;
}

.onboarding-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(170px, .55fr) auto;
  gap: 10px;
  align-items: end;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.onboarding-list-row.competitor-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(160px, .7fr) auto;
}

.onboarding-row-icons {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #64748b;
  font-size: 1.08rem;
}

.onboarding-loader {
  display: grid;
  gap: 18px;
  margin-top: 24px;
}

.onboarding-loader-bar {
  height: 8px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

.onboarding-loader-bar span {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: #0f172a;
  transform-origin: left center;
  animation: onboardingLoad 2.4s ease forwards;
}

@keyframes onboardingLoad {
  from { transform: scaleX(.08); }
  to { transform: scaleX(1); }
}

.onboarding-result {
  background: #f7f9fc;
}

.onboarding-result-hero {
  padding: 64px 0 24px;
}

.onboarding-result-hero .container {
  max-width: 900px;
}

.onboarding-result-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 16px;
}

.onboarding-score-card .kpi {
  font-size: clamp(3rem, 7vw, 5.4rem);
  line-height: 1;
  margin: 18px 0 6px;
}

.onboarding-score-card h2 {
  margin: 0 0 10px;
}

.platform-tile.is-locked,
.locked-list-item.is-locked {
  position: relative;
  opacity: .72;
}

.platform-tile.is-locked::after,
.locked-list-item.is-locked::after {
  content: "Growth / Pro ile açılır";
  display: inline-block;
  margin-top: 8px;
  color: #1d4ed8;
  font-size: .8rem;
  font-weight: 800;
}

.onboarding-insight-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.locked-list {
  display: grid;
  gap: 10px;
}

.locked-list-item {
  display: grid;
  gap: 4px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.locked-list-item span,
.locked-list-item em {
  color: #64748b;
  font-style: normal;
  font-size: .86rem;
}

.admin-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.hero-product-preview {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.hero-product-copy {
  max-width: 620px;
}

.hero-product-copy h2 {
  margin: 0 0 8px;
  color: #0f172a;
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  letter-spacing: 0;
}

.hero-product-copy p {
  margin: 0;
  color: #475569;
  font-size: .98rem;
}

.product-browser-mockup {
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .45);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(15, 23, 42, .18);
  min-width: 0;
}

.browser-topbar {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 8px 12px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}

.browser-topbar span {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #cbd5e1;
}

.browser-topbar span:first-child { background: #f87171; }
.browser-topbar span:nth-child(2) { background: #fbbf24; }
.browser-topbar span:nth-child(3) { background: #34d399; }

.browser-topbar em {
  min-width: 0;
  margin-left: 8px;
  color: #64748b;
  font-size: .78rem;
  font-style: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-screenshot {
  display: block;
  width: 100%;
  height: auto;
}

.mockup-screen {
  display: grid;
  gap: 12px;
  padding: clamp(14px, 2.3vw, 22px);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.mockup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mockup-header strong {
  min-width: 0;
  color: #0f172a;
  font-size: .98rem;
}

.mockup-score-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.mockup-score-row article,
.mockup-platform-grid article,
.mockup-profile,
.mockup-ticket,
.mockup-work,
.mockup-request-form span,
.mockup-list span {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
}

.mockup-score-row article {
  padding: 10px;
}

.mockup-score-row small,
.mockup-platform-grid small,
.mockup-profile small,
.mockup-ticket small {
  display: block;
  color: #64748b;
  font-size: .74rem;
}

.mockup-score-row strong {
  display: block;
  margin-top: 4px;
  color: #0f172a;
  font-size: 1.05rem;
}

.mockup-work {
  display: grid;
  gap: 7px;
  padding: 12px;
}

.mockup-work h4 {
  margin: 0 0 3px;
  font-size: .9rem;
}

.mockup-work span,
.mockup-bottom-row span,
.mockup-list span,
.mockup-request-form span {
  color: #334155;
  font-size: .82rem;
}

.mockup-platform-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.mockup-platform-grid article {
  display: grid;
  gap: 5px;
  place-items: center;
  min-height: 74px;
  padding: 10px;
  text-align: center;
}

.mockup-platform-grid i {
  color: #2563eb;
}

.mockup-platform-grid strong {
  color: #0f172a;
}

.mockup-bottom-row,
.mockup-tabs,
.mockup-request-form,
.mockup-list {
  display: grid;
  gap: 8px;
}

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

.mockup-bottom-row span,
.mockup-tabs span {
  border-radius: 8px;
  padding: 10px;
  background: #eff6ff;
  color: #1e3a8a;
  font-weight: 800;
  text-align: center;
  font-size: .8rem;
}

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

.mockup-tabs span {
  background: #f1f5f9;
  color: #475569;
}

.mockup-tabs span.active {
  background: #0f172a;
  color: #fff;
}

.mockup-chart {
  display: flex;
  align-items: end;
  gap: 8px;
  height: 120px;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
}

.mockup-chart span {
  flex: 1;
  min-width: 0;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, #2563eb, #93c5fd);
}

.mockup-request-form span,
.mockup-list span {
  padding: 10px;
}

.mockup-ticket,
.mockup-profile {
  display: grid;
  gap: 4px;
  padding: 12px;
}

.product-screens-section,
.visual-process-section {
  background: #f8fafc;
}

.product-screen-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}

.product-screen-card,
.visual-process-card {
  min-width: 0;
  border: 1px solid #dbe4ee;
  border-radius: 8px;
  background: #fff;
  padding: 14px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .07);
}

.product-screen-card h3,
.visual-process-card h3 {
  margin: 14px 0 6px;
  color: #0f172a;
}

.product-screen-card p,
.visual-process-card p {
  margin: 0;
  color: #475569;
}

.product-screen-card .product-browser-mockup,
.visual-process-card .product-browser-mockup {
  box-shadow: 0 14px 34px rgba(15, 23, 42, .1);
}

.product-screen-actions {
  justify-content: center;
  margin-top: 22px;
}

.visual-process-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}

.visual-process-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
}

.visual-process-card .product-browser-mockup {
  grid-column: 1 / -1;
}

.visual-process-card.is-featured {
  border-color: #bfdbfe;
  background: #fbfdff;
}

@media (max-width: 900px) {
  .onboarding-list-row,
  .onboarding-list-row.competitor-row,
  .onboarding-result-grid,
  .onboarding-insight-grid,
  .admin-detail-grid,
  .product-screen-grid,
  .visual-process-grid {
    grid-template-columns: 1fr;
  }

  .onboarding-actions.split {
    flex-direction: column;
  }

  .onboarding-actions.split .btn {
    width: 100%;
    justify-content: center;
  }

}

@media (max-width: 430px) {
  .onboarding-start {
    padding: 24px 10px;
  }

  .onboarding-panel {
    padding: 20px 14px;
  }

  .onboarding-progress-dots span {
    width: 24px;
  }

  .mockup-score-row,
  .mockup-platform-grid,
  .mockup-bottom-row,
  .mockup-tabs {
    grid-template-columns: 1fr;
  }

  .mockup-header {
    align-items: flex-start;
    flex-direction: column;
  }
}

.check-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  font-weight: 700;
}

.check-row input {
  margin-top: 4px;
}

.integration-hero,
.integration-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.integration-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.integration-card {
  display: grid;
  gap: 12px;
}

.integration-card code,
.env-preview {
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 8px;
  padding: 3px 7px;
}

.env-preview {
  display: block;
  overflow-x: auto;
  padding: 14px;
  white-space: pre;
}

.integration-demo-form {
  display: grid;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.integration-demo-form label {
  display: grid;
  gap: 6px;
  font-weight: 700;
}

.integration-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(15, 23, 42, .45);
}

.integration-modal[aria-hidden="false"] {
  display: flex;
}

.integration-modal-box {
  width: min(520px, 100%);
  position: relative;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  padding: 22px;
}

.integration-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .public-nav-links {
    max-height: calc(100vh - 96px);
    overflow-y: auto;
  }

  .hero-actions,
  .topbar-actions {
    width: 100%;
  }

  .hero-actions .btn,
  .topbar-actions .btn,
  .plan-modern-card .btn,
  .form-grid .btn {
    width: 100%;
    justify-content: center;
  }

  .section-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .section-tab {
    white-space: nowrap;
    flex: 0 0 auto;
  }

  .table-wrap table {
    min-width: 760px;
  }

  .locked-list-item,
  .onboarding-list-row,
  .onboarding-list-row.competitor-row {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px;
    background: #fff;
  }

  .product-browser-mockup {
    max-width: 100%;
  }

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

  .integration-hero,
  .integration-card-head {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 430px) {
  .form-grid.cols-2,
  .grid.grid-2,
  .grid.grid-3,
  .grid.grid-4 {
    grid-template-columns: 1fr;
  }

  .onboarding-result-hero {
    padding-top: 36px;
  }

  .platform-tile,
  .plan-modern-card,
  .product-screen-card {
    min-width: 0;
  }
}