/* ─── RESET ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html   { scroll-behavior: smooth; }
img    { display: block; max-width: 100%; }
a      { text-decoration: none; color: inherit; }
ul     { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
[hidden] { display: none !important; }

/* ─── FOCUS VISIBLE (WCAG 2.4.7) ─────────────────────── */
/* --accent vs --bg: 4.9:1 (light) · 7.3:1 (dark) — both ≥ 3:1 */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ─── VARIABLES — LIGHT MODE ─────────────────────────── */
:root {
  --bg:           #efedf5;
  --bg-alt:       #e6e3ee;
  --surface:      #ffffff;
  --border:       #ddd8eb;
  --text:         #0f0e17;
  --text-muted:   #5f5b73;  /* WCAG AA: 6.5:1 vs --surface · 5.6:1 vs --bg (was #6b6780 → 4.7:1 vs --bg) */

  --accent:       #7c3aed;  /* WCAG AA: 5.7:1 vs --surface (text / icons / links) */
  --accent-from:  #7c3aed;
  --accent-to:    #2563eb;  /* WCAG AA: 5.2:1 vs --surface (…__all:hover, gradient end) — was #3b82f6 → 3.7:1 */
  --on-accent:    #ffffff;  /* text on accent-coloured surfaces — WCAG AA: 5.7:1 vs --accent */
  --danger:       #c81e1e;  /* WCAG AA: 5.7:1 vs --surface · 5.0:1 vs --bg (form errors, compare "bad") */
  --success:      #15803d;  /* WCAG AA: 5.0:1 vs --surface (form / contact success) */
  --accent-gradient: linear-gradient(135deg, var(--accent-from) 0%, var(--accent-to) 100%);
  --accent-gradient-text: linear-gradient(135deg, #4c1d95 0%, #7c3aed 100%);

  --hero-glow: radial-gradient(ellipse at 65% 40%, rgba(124,58,237,0.18) 0%, transparent 60%);
  --navbar-bg: rgba(239,237,245,0.92);

  --shadow-card:       0 2px 16px rgba(15,14,23,0.07);
  --shadow-card-hover: 0 8px 40px rgba(15,14,23,0.12);

  --font-title: 'Darker Grotesque', sans-serif;
  --font-body:  'Outfit', sans-serif;

  --section-padding: 96px 40px;
  --max-width: 1100px;

  --ease-out:        cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:     cubic-bezier(0.77, 0, 0.175, 1);

  --transition:      0.18s cubic-bezier(0.23, 1, 0.32, 1);
  --transition-slow: 0.28s cubic-bezier(0.23, 1, 0.32, 1);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
}

/* ─── VARIABLES — DARK MODE ──────────────────────────── */
[data-theme="dark"] {
  --bg:           #09080f;
  --bg-alt:       #110f1a;
  --surface:      #110f1a;
  --border:       #1f1b2e;
  --text:         #ede9fe;
  --text-muted:   #938aa8;  /* WCAG AA: 5.8:1 vs --surface · 6.1:1 vs --bg (was #7c7391 → 4.3:1 vs --surface) */

  --accent:       #a78bfa;  /* WCAG AA: 7.0:1 vs --surface (text / icons / links) */
  --accent-from:  #a78bfa;
  --accent-to:    #60a5fa;  /* WCAG AA: 7.8:1 vs --bg (…__all:hover) — only used as text on dark bg here */
  --on-accent:    #0f0e17;  /* dark text on light-lavender accent — WCAG AA: 7.0:1 vs --accent */
  --danger:       #f87171;  /* WCAG AA: 7.2:1 vs --bg · 6.9:1 vs --surface */
  --success:      #4ade80;  /* WCAG AA: 10.9:1 vs --surface */
  --accent-gradient-text: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);

  --hero-glow: radial-gradient(ellipse at 65% 40%, rgba(139,92,246,0.20) 0%, transparent 60%);
  --navbar-bg: rgba(9,8,15,0.90);

  --shadow-card:       0 4px 24px rgba(0,0,0,0.40);
  --shadow-card-hover: 0 8px 48px rgba(0,0,0,0.60);
}

/* ─── BASE ───────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.6;
  transition: background-color var(--transition-slow), color var(--transition-slow);
}

h1, h2, h3 {
  font-family: var(--font-title);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

/* ─── UTILITIES ──────────────────────────────────────── */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px;
}

.section-title {
  font-family: var(--font-title);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
  color: var(--text);
  margin-bottom: 48px;
}

.section-label {
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent);
}

.gradient-text {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Purple-only text gradient (dark violet → current accent) */
.section-label,
.project-card__tag,
.service-card__num,
.service-item__num,
.hero__accent,
.about__title em,
.how__subtitle em,
.packages__title em,
.compare__title em,
.ops__title em,
.faq__title em,
.testimonials__title em,
.services-hero__title em {
  background: var(--accent-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ─── REDUCED MOTION ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}