/* PharmaLink MD marketing site */
:root {
  --clr-primary: #2563EB;
  --clr-accent: #4F46E5;
  --focus-ring: 0 0 0 3px rgba(79,70,229,.45);
}
*, *::before, *::after { box-sizing: border-box; }
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; color: #0F172A; }

/* ── Buttons ── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 24px; min-height: 44px;
  border-radius: 8px; font-weight: 600; font-size: 15px;
  color: #fff; background: linear-gradient(135deg,#4F46E5 0%,#7C3AED 100%);
  border: none; cursor: pointer; transition: opacity .2s;
  text-decoration: none;
}
.btn-primary:hover { opacity: .88; }
.btn-primary:focus-visible { outline: none; box-shadow: var(--focus-ring), 0 0 0 5px rgba(79,70,229,.2); }

.btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px; min-height: 44px;
  border-radius: 8px; font-weight: 600; font-size: 15px;
  color: #4F46E5; border: 2px solid #4F46E5;
  background: white; cursor: pointer; transition: all .2s;
  text-decoration: none;
}
.btn-outline:hover { background: #4F46E5; color: #fff; }
.btn-outline:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.btn-white {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px; min-height: 44px;
  border-radius: 8px; font-weight: 600; font-size: 15px;
  color: #4F46E5; background: white;
  border: 2px solid rgba(255,255,255,.35);
  cursor: pointer; transition: all .2s;
  text-decoration: none;
}
.btn-white:hover { background: rgba(255,255,255,.9); }
.btn-white:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255,255,255,.7); }

/* ── Nav ── */
.glass-nav {
  background: rgba(255,255,255,.95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* ── Skip link ── */
.skip-link {
  position: absolute; top: -100%; left: 8px;
  background: #4F46E5; color: #fff;
  padding: 10px 18px; border-radius: 0 0 8px 8px;
  font-weight: 600; font-size: 14px; z-index: 9999;
  text-decoration: none; transition: top .15s;
}
.skip-link:focus { top: 0; outline: none; box-shadow: var(--focus-ring); }

/* ── Cards ── */
.card {
  background: white; border-radius: 16px; padding: 28px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
}

/* ── Chips ── */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; }

/* ── Gradients ── */
.gradient-hero { background: linear-gradient(135deg,#1E3A5F 0%,#2563EB 40%,#4F46E5 70%,#7C3AED 100%); }
.gradient-cta   { background: linear-gradient(135deg,#4F46E5 0%,#7C3AED 100%); }
.gradient-dark  { background: linear-gradient(135deg,#1E1B4B 0%,#312E81 100%); }

/* ── Icons ── */
.icon-box { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ── Animations (respects reduced-motion) ── */
@media (prefers-reduced-motion: no-preference) {
  .fade-up { animation: fadeUp .6s ease both; }
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

/* ── Stat cards ── */
.stat-card { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); border-radius: 16px; padding: 24px; }

/* ── Typography ── */
.check { color: #10B981; }
.section-label { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

/* ── Links ── */
a { text-decoration: none; color: inherit; }
footer a:hover { color: #A5B4FC; text-decoration: underline; }
nav a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }

/* ── Focus defaults (fallback for browsers without :focus-visible) ── */
a:focus, button:focus, input:focus, select:focus, textarea:focus {
  outline: 2px solid #4F46E5;
  outline-offset: 2px;
}
a:focus:not(:focus-visible), button:focus:not(:focus-visible),
input:focus:not(:focus-visible), select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
  outline: none;
}
:focus-visible {
  outline: 2px solid #4F46E5;
  outline-offset: 2px;
}

/* ── FAQ accordion ── */
[data-faq-q] {
  width: 100%; text-align: left; cursor: pointer;
  background: none; border: none; padding: 20px 0;
  font-size: 16px; font-weight: 600; color: #0F172A;
  display: flex; justify-content: space-between; align-items: center;
  min-height: 44px;
}
[data-faq-q]:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
[data-faq-icon] { transition: transform .25s; flex-shrink: 0; }

/* ── Form elements ── */
input, select, textarea {
  font-family: inherit;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid #4F46E5;
  outline-offset: 0;
  border-color: #4F46E5 !important;
}
label { font-weight: 500; }
.field-required::after { content: " *"; color: #EF4444; }

/* ── Aria-live error region ── */
.form-errors[aria-live] { color: #DC2626; font-size: 14px; min-height: 0; }