:root {
  /* Base */
  --color-bg: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-surface-light: #F3F6FC;

  /* Brand blues (from your mockup) */
  --color-primary: #6B8DFF;       /* vibrant blue */
  --color-primary-dark: #0A3B7A;  /* deep royal */
  --color-primary-bg: #0F1A33;    /* hero base */

  /* Accent */
  --color-accent: #00C7B7;        /* cyan */
  --color-accent-soft: rgba(0, 199, 183, 0.15);

  /* Text */
  --color-text: #1E293B;
  --color-text-light: #64748B;

  /* Borders */
  --color-border: #E2E8F0;
  --color-border-light: rgba(0,0,0,0.08);
  --color-border-dark: rgba(255,255,255,0.08);

  /* Soft hue backgrounds (pillar headers) */
  --hue-soft-blue: rgba(26, 74, 255, 0.12);
  --hue-soft-cyan: rgba(0, 199, 183, 0.15);
  --hue-soft-gold: rgba(255,171,28,0.15);

  /* Gradients */
  --color-gradient: linear-gradient(135deg, #1A4AFF 0%, #00C7B7 100%);
}


.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


img {
  display: block;
  max-width: 100%;
  height: auto;
}


:focus {
  outline: 3px solid rgba(26, 74, 255, 0.12);
  outline-offset: 3px;
}

.bg-gradient-primary {
  background: var(--color-gradient);
}


.shadow-soft {
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.06);
}

@media (min-width: 768px) {
  h1 {
    font-size: clamp(2rem, 3.5vw, 3rem);
  }
}

:root {
  --shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.12);
}

.glass-panel {
  background: radial-gradient(to bottom,
      rgba(255, 255, 255, 0.18),
      rgba(255, 255, 255, 0.06));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.btn-gradient {
  background-image: var(--color-gradient);
}

.btn-gradient:hover {
  transform: translateY(-1px) scale(1.01);
}

.btn-outline-soft {
  border: 1px solid var(--color-border);
  background: radial-gradient(circle at top left,
      rgba(148, 163, 184, 0.08),
      rgba(15, 23, 42, 0.0));
}

.badge-soft {
  background: radial-gradient(circle at top left,
      rgba(56, 189, 248, 0.18),
      rgba(59, 130, 246, 0.15));
  border-radius: 999px;
}

.section-label {
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.75rem;
}

.fade-border {
  border-image: linear-gradient(to right, rgba(148, 163, 184, 0), rgba(148, 163, 184, .7), rgba(148, 163, 184, 0)) 1;
}

[data-aos] {
  opacity: 1 !important;
  transform: none !important
}

.input {
  @apply border border-[var(--color-border)] rounded-lg p-3 w-full focus:ring-2 focus:ring-[var(--color-primary)] focus:border-[var(--color-primary)] bg-white;
}

#mobile-cta.show {
  transform: translateY(0);
}

header {
    transition: background 1s ease, backdrop-filter 1s ease;
}

header.scrolled {
    background: rgba(15, 26, 51, 0.85);
    backdrop-filter: blur(12px);
}