/* ============================================================
   ITCert Services - Design System v2.0
   ============================================================ */

:root {
  --clr-accent:        #4f46e5;
  --clr-accent-hover:  #4338ca;
  --clr-accent-muted:  rgba(79,70,229,.08);
  --clr-accent-ring:   rgba(79,70,229,.15);
  --clr-bg:            #ffffff;
  --clr-surface:       #fafafa;
  --clr-surface-2:     #f4f4f5;
  --clr-border:        #e4e4e7;
  --clr-border-2:      #d4d4d8;
  --clr-text-primary:  #09090b;
  --clr-text-secondary:#52525b;
  --clr-text-muted:    #a1a1aa;
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-2xl: 24px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.06);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.08);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: 150ms; --dur-base: 200ms; --dur-slow: 350ms;
}

.dark {
  --clr-bg:            #000000;
  --clr-surface:       #0a0a0a;
  --clr-surface-2:     #111113;
  --clr-border:        #27272a;
  --clr-border-2:      #3f3f46;
  --clr-text-primary:  #fafafa;
  --clr-text-secondary:#a1a1aa;
  --clr-text-muted:    #52525b;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--clr-text-primary);
  background-color: var(--clr-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1,h2,h3,h4,h5,h6 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--clr-text-primary);
}

p { color: var(--clr-text-secondary); }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
input, textarea, select, button { font-family: inherit; font-size: inherit; }
[x-cloak] { display: none !important; }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--clr-border); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--clr-border-2); }

/* Container */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 640px) { .container { padding: 0 32px; } }
@media (min-width: 1280px) { .container { padding: 0 48px; } }

/* Navbar */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--clr-border);
  transition: background var(--dur-base) var(--ease-out);
}
.dark .nav { background: rgba(0,0,0,.85); }

/* Sections */
.section { padding: 128px 0; }
.section--sm { padding: 80px 0; }
.section--alt { background: var(--clr-surface); }

/* Typography */
.heading-xl  { font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 800; letter-spacing: -0.035em; }
.heading-lg  { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 700; }
.heading-md  { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; }
.heading-sm  { font-size: 1.25rem; font-weight: 600; }
.body-lg     { font-size: 1.0625rem; line-height: 1.7; color: var(--clr-text-secondary); }
.body        { font-size: .9375rem; line-height: 1.65; color: var(--clr-text-secondary); }
.caption     { font-size: .75rem; color: var(--clr-text-muted); }

/* Eyebrow */
.eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--clr-text-muted);
  padding: 5px 12px;
  border: 1px solid var(--clr-border);
  border-radius: 99px;
  margin-bottom: 24px;
}
.eyebrow-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--clr-accent); }

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, #4f46e5 0%, #818cf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 20px; font-size: 14px; font-weight: 600;
  border-radius: var(--r-lg); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; outline: none; user-select: none;
  transition: all var(--dur-fast) var(--ease-out);
}
.btn:focus-visible { box-shadow: 0 0 0 3px var(--clr-accent-ring); }
.btn:active { transform: scale(.98) translateY(.5px); }

.btn--primary {
  background: var(--clr-accent); color: #fff; border-color: var(--clr-accent);
  box-shadow: 0 1px 3px rgba(79,70,229,.3);
}
.btn--primary:hover {
  background: var(--clr-accent-hover); border-color: var(--clr-accent-hover);
  box-shadow: 0 4px 16px rgba(79,70,229,.25);
}
.btn--secondary {
  background: var(--clr-surface); color: var(--clr-text-primary); border-color: var(--clr-border);
}
.btn--secondary:hover { background: var(--clr-surface-2); border-color: var(--clr-border-2); }
.btn--ghost { background: transparent; color: var(--clr-text-secondary); border-color: transparent; }
.btn--ghost:hover { background: var(--clr-surface-2); color: var(--clr-text-primary); }
.btn--sm  { padding: 7px 14px; font-size: 13px; border-radius: var(--r-md); }
.btn--lg  { padding: 13px 28px; font-size: 15px; border-radius: var(--r-xl); }

/* Cards */
.card {
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-2xl);
  transition: border-color var(--dur-base), box-shadow var(--dur-base), transform var(--dur-base);
}
.card:hover { border-color: var(--clr-border-2); box-shadow: var(--shadow-md); }
.card--surface { background: var(--clr-surface); }

/* Inputs */
.input {
  width: 100%; padding: 10px 14px; font-size: 14px;
  background: var(--clr-bg); color: var(--clr-text-primary);
  border: 1px solid var(--clr-border); border-radius: var(--r-lg);
  outline: none; transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.input::placeholder { color: var(--clr-text-muted); }
.input:focus { border-color: var(--clr-accent); box-shadow: 0 0 0 3px var(--clr-accent-ring); }

/* Badge */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; font-size: 11px; font-weight: 600;
  border-radius: var(--r-sm); border: 1px solid var(--clr-border);
  color: var(--clr-text-secondary); background: var(--clr-surface);
}
.badge--accent {
  background: var(--clr-accent-muted); border-color: rgba(79,70,229,.2); color: var(--clr-accent);
}
.badge--success {
  background: rgba(16,185,129,.08); border-color: rgba(16,185,129,.2); color: #059669;
}

/* Divider */
.divider { width: 100%; height: 1px; background: var(--clr-border); }

/* Tailwind compatibility shims */
.text-primary { color: var(--clr-accent) !important; }
.bg-primary   { background-color: var(--clr-accent) !important; }
.border-primary { border-color: var(--clr-accent) !important; }
.hover\:bg-primary:hover { background-color: var(--clr-accent) !important; }
.hover\:text-primary:hover { color: var(--clr-accent) !important; }