/* Direction 4 — Product palette
   Matches the signed-in DeptDrive app: #2563eb primary, #f6f8fb canvas,
   white cards, #e2e8f0 borders and the dark blue auth panel. */
:root {
  --ink: #0f172a;
  --ink-soft: #334155;
  --muted: #5b6776;
  --paper: #f6f8fb;
  --paper-deep: #eef2f7;
  --white: #ffffff;
  --line: #e2e8f0;
  --line-dark: #1e293b;
  --accent: #2563eb;
  --teal: #10b981;
  --teal-soft: #eff6ff;
  --orange: #f59e0b;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.12);
  --radius: 12px;
  --display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body { background: var(--paper); }
.site-header { background: rgba(255, 255, 255, 0.92); }
.site-header.scrolled { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.12); }
.eyebrow { color: #2563eb; }
.eyebrow-dot { background: #10b981; }
h1, h2 { font-weight: 750; letter-spacing: -0.055em; }
h1 { font-size: clamp(42px, 5.3vw, 68px); }

.hero::before {
  background:
    radial-gradient(circle at 78% 22%, rgba(37, 99, 235, 0.12), transparent 28%),
    radial-gradient(circle at 14% 78%, rgba(16, 185, 129, 0.08), transparent 25%),
    linear-gradient(rgba(15, 23, 42, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.035) 1px, transparent 1px);
  background-size: auto, auto, 56px 56px, 56px 56px;
}
.hero-visual {
  transform: none;
  border-color: #1e293b;
  border-radius: 16px;
  background:
    radial-gradient(900px 480px at 10% 0%, rgba(59, 130, 246, 0.22), transparent 60%),
    radial-gradient(700px 420px at 90% 100%, rgba(16, 185, 129, 0.14), transparent 60%),
    #0b1220;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 18px 42px -18px rgba(15, 23, 42, 0.32);
}
.hero-visual::after { display: none; }
.visual-dots i { background: #475569; }
.visual-pill { color: #bfdbfe; background: rgba(37, 99, 235, 0.22); }
.tree-root { background: rgba(37, 99, 235, 0.12); }
.tree-icon.folder { color: #60a5fa; }
.tree-chip { color: #bfdbfe; background: rgba(37, 99, 235, 0.2); }
.tree-chip.neutral { color: #cbd5e1; background: rgba(255, 255, 255, 0.08); }
.tree-branch .tree-row:nth-child(1) .tree-chip { color: #bfdbfe; background: rgba(37, 99, 235, 0.2); }
.tree-branch .tree-row:nth-child(2) .tree-chip { color: #c4b5fd; background: rgba(139, 92, 246, 0.18); }
.tree-branch .tree-row:nth-child(3) .tree-chip { color: #a7f3d0; background: rgba(16, 185, 129, 0.16); }
.admin-note { border-color: #334155; background: rgba(16, 185, 129, 0.07); }
.admin-note-icon { color: #34d399; }

.button {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 20px -10px rgba(37, 99, 235, 0.5);
}
.button:hover { background: #1d4ed8; }
.button-ghost { background: #fff; border-color: #cbd5e1; color: #0f172a; box-shadow: none; }
.button-ghost:hover { background: #f8fafc; }
.button-light { background: #fff; border-color: #fff; color: #1d4ed8; }
.button-light:hover { background: #eff6ff; }
.button-outline { background: #fff; border-color: #cbd5e1; color: #1d4ed8; }
.button-outline:hover { background: #eff6ff; border-color: #93c5fd; }

.problem-icon { background: #eff6ff; color: #2563eb; }
.card-number { color: #64748b; }
.section-problem { background: #fff; }
.problem-card { background: #fff; border-color: #e2e8f0; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03); }
.comparison-table caption { color: #2563eb; }
.comparison-table td:nth-child(2) {
  position: relative;
  padding-left: 38px;
  background: #f8fafc;
  color: #64748b;
}
.comparison-table td:nth-child(2)::before {
  content: "×";
  position: absolute;
  left: 16px;
  top: 15px;
  color: #ef4444;
  font-weight: 800;
}
.comparison-table td:nth-child(3) {
  position: relative;
  padding-left: 38px;
  background: #f0fdf4;
  color: #065f46;
}
.comparison-table td:nth-child(3)::before {
  content: "✓";
  position: absolute;
  left: 16px;
  top: 15px;
  color: #10b981;
  font-weight: 800;
}
.comparison-table td:nth-child(3) strong { color: #065f46; }

.feature-visual { background: #fff; border-color: #e2e8f0; border-radius: 12px; box-shadow: var(--shadow); }
.feature-kicker { color: #2563eb; }
.price-bar-label span:last-child { color: #92400e; }
.bar { background: #bfdbfe; }
.bar-b { background: #93c5fd; }
.bar-c { background: #60a5fa; }
.flat-track { background: #2563eb; border-color: #2563eb; }
.tiny-pill { background: #eff6ff; color: #1d4ed8; }
.access-private { background: #f1f5f9; color: #475569; }
.access-client { background: #eff6ff; color: #1d4ed8; }
.access-team { background: #ecfdf5; color: #047857; }
.blocked-col { background: #fef2f2; }
.blocked-col .visual-label { color: #b91c1c; }
.blocked-row::before { color: #ef4444; }

.section-security { background: #0b1220; }
.eyebrow-light { color: #60a5fa; }
.security-fact { border-color: #334155; background: rgba(255, 255, 255, 0.04); }
.fact-mark { color: #93c5fd; background: rgba(37, 99, 235, 0.18); }
.security-copy p { color: #cbd5e1; }
.security-fact span:last-child { color: #94a3b8; }

.section-cases { background: #fff; }
.case-card { background: #f8fafc; border-color: #e2e8f0; }
.case-card:nth-child(2) { background: #eff6ff; }
.case-tag { color: #2563eb; }

.pricing-card { background: #fff; border-color: #e2e8f0; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03); }
.pricing-card.featured {
  background: #eff6ff;
  border-color: #2563eb;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 18px 42px -18px rgba(37, 99, 235, 0.35);
}
.popular-badge { background: #2563eb; color: #fff; }
.pricing-card.featured .pricing-top p { color: var(--muted); }
.pricing-card.featured .price small { color: var(--muted); }
.pricing-card.featured .plan-specs { border-color: #bfdbfe; }
.pricing-card.featured .plan-specs span { color: var(--muted); }
.pricing-card.featured .plan-list li { color: var(--ink-soft); }
.pricing-card.featured .plan-list li::before { color: #2563eb; }
.pricing-card.featured .button { background: #2563eb; border-color: #2563eb; color: #fff; }
.pricing-card.featured .button:hover { background: #1d4ed8; }
.plan-list li::before { color: #10b981; }
.pricing-note a { color: #1d4ed8; }

.section-faq { background: #fff; }
.faq-list summary::after { color: #2563eb; }

.final-cta { background: linear-gradient(120deg, #1d4ed8, #2563eb); }
.final-cta .eyebrow-light { color: #bfdbfe; }
.final-cta .button-light { background: #fff; border-color: #fff; color: #1d4ed8; }
.final-cta .button-light:hover { background: #eff6ff; }
.site-footer { background: #0b1220; }

@media (max-width: 820px) {
  .primary-nav { background: #fff; }
}