@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');

:root {
  --page-bg:    #F0F4FA;
  --page-bg2:   #EBF0F8;
  --surface-0:  #FFFFFF;
  --surface-1:  #F7F9FC;
  --surface-2:  #EEF2F8;
  --border-0:   rgba(30,60,120,0.08);
  --border-1:   rgba(30,60,120,0.14);
  --border-accent: rgba(59,130,246,0.3);
  --text-0:     #0F172A;
  --text-1:     #334155;
  --text-2:     #64748B;
  --text-3:     #94A3B8;
  --accent:     #2563EB;
  --accent-lt:  #EFF6FF;
  --accent-dk:  #1D4ED8;
  --cyan:       #0891B2;
  --cyan-lt:    #ECFEFF;
  --violet:     #7C3AED;
  --violet-lt:  #F5F3FF;
  --green:      #059669;
  --green-lt:   #ECFDF5;
  --amber:      #D97706;
  --amber-lt:   #FFFBEB;
  --red:        #DC2626;
  --red-lt:     #FEF2F2;
  --shadow-sm:  0 1px 4px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --shadow-md:  0 4px 16px rgba(15,23,42,0.08), 0 1px 4px rgba(15,23,42,0.04);
  --shadow-lg:  0 12px 40px rgba(15,23,42,0.10), 0 2px 8px rgba(15,23,42,0.06);
  --shadow-xl:  0 20px 60px rgba(15,23,42,0.14), 0 4px 16px rgba(15,23,42,0.08);
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  22px;
  --r-2xl: 28px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--page-bg);
  color: var(--text-0);
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ─── TYPOGRAPHY ─── */
h1, h2, h3, h4, h5 { font-family: 'Syne', sans-serif; }
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
button { cursor: pointer; font-family: inherit; border: none; }
input, textarea, select { font-family: inherit; outline: none; }

/* ─── BUTTONS ─── */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 26px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--violet) 100%);
  color: #fff; font-family: 'Syne', sans-serif; font-weight: 600; font-size: 14px;
  border-radius: var(--r-md); border: none;
  box-shadow: 0 4px 16px rgba(37,99,235,0.35);
  transition: all 200ms ease;
  white-space: nowrap;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(37,99,235,0.45);
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 24px;
  background: transparent; color: var(--accent);
  border: 1.5px solid var(--accent); border-radius: var(--r-md);
  font-size: 14px; font-weight: 500;
  transition: all 200ms ease;
  white-space: nowrap;
}
.btn-secondary:hover {
  background: var(--accent-lt);
  transform: translateY(-1px);
}

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 22px;
  background: transparent; color: var(--text-1);
  border: 1px solid var(--border-1); border-radius: var(--r-md);
  font-size: 14px; font-weight: 400;
  transition: all 200ms ease;
}
.btn-ghost:hover { background: var(--surface-1); border-color: var(--border-1); }

/* ─── BADGE / PILL ─── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.08em;
  padding: 4px 12px; border-radius: 999px;
}
.badge-blue  { background: var(--accent-lt); color: var(--accent); border: 1px solid rgba(37,99,235,0.22); }
.badge-violet{ background: var(--violet-lt); color: var(--violet); border: 1px solid rgba(124,58,237,0.22); }
.badge-green { background: var(--green-lt);  color: var(--green);  border: 1px solid rgba(5,150,105,0.22); }
.badge-amber { background: var(--amber-lt);  color: var(--amber);  border: 1px solid rgba(217,119,6,0.22); }
.badge-cyan  { background: var(--cyan-lt);   color: var(--cyan);   border: 1px solid rgba(8,145,178,0.22); }

/* ─── CARDS ─── */
.card {
  background: var(--surface-0);
  border: 1px solid var(--border-0);
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  transition: all 220ms ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(37,99,235,0.12);
  border-color: var(--border-accent);
}

/* ─── FORM ELEMENTS ─── */
.form-group { margin-bottom: 16px; }
.form-label {
  display: block; font-size: 13px; font-weight: 500;
  color: var(--text-1); margin-bottom: 6px;
}
.form-input {
  width: 100%; padding: 10px 14px;
  background: var(--surface-0); color: var(--text-0);
  border: 1.5px solid var(--border-1); border-radius: var(--r-md);
  font-size: 14px; transition: border-color 200ms ease, box-shadow 200ms ease;
}
.form-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
.form-input::placeholder { color: var(--text-3); }

/* ─── SECTION TITLE ─── */
.section-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-lt);
  border: 1px solid rgba(37,99,235,0.18);
  padding: 5px 14px; border-radius: 999px;
  margin-bottom: 16px;
}
.section-eyebrow .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.section-title {
  font-family: 'Syne', sans-serif; font-weight: 800;
  color: var(--text-0); line-height: 1.15;
}
.section-title .gradient-text {
  background: linear-gradient(120deg, var(--accent) 0%, var(--violet) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.section-desc { color: var(--text-2); line-height: 1.75; }

/* ─── ANIMATIONS ─── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes pulse-ring {
  0%   { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(37,99,235,0.4); }
  70%  { transform: scale(1);    box-shadow: 0 0 0 10px rgba(37,99,235,0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(37,99,235,0); }
}
@keyframes marquee {
  from { transform: translateX(0); } to { transform: translateX(-50%); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); }
}
@keyframes spin {
  from { transform: rotate(0deg); } to { transform: rotate(360deg); }
}

.anim-fadeInUp { animation: fadeInUp 600ms cubic-bezier(0.16,1,0.3,1) both; }

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-1); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

/* ─── UTILITIES ─── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.text-center { text-align: center; }
.gradient-bg { background: linear-gradient(135deg, #EFF6FF 0%, #F5F3FF 100%); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ─── TOAST ─── */
#toast-container { position: fixed; top: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; }
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  background: var(--surface-0); border: 1px solid var(--border-0);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  font-size: 14px; color: var(--text-1);
  animation: fadeInUp 300ms ease both;
  min-width: 240px; max-width: 340px;
}
.toast.success { border-left: 3px solid var(--green); }
.toast.error   { border-left: 3px solid var(--red); }
.toast.info    { border-left: 3px solid var(--accent); }
.toast-icon { font-size: 16px; }