/* ========================================
   CUSTOM DAISY UI THEME — Light / Navy
======================================== */
[data-theme="dsp"] {
  color-scheme: light;

  /* Primary = Navy #1B3A7A */
  --p:  0.305 0.128 264;
  --pc: 0.978 0.008 240;   /* white text on navy */

  /* Secondary = Mid blue #2952A8 */
  --s:  0.430 0.155 264;
  --sc: 0.978 0.008 240;

  /* Accent = Royal blue #4A7DD6 */
  --a:  0.565 0.148 264;
  --ac: 0.978 0.008 240;

  /* Neutral = Dark navy */
  --n:  0.200 0.090 264;
  --nc: 0.95  0.01  240;

  /* Base — off-white with faint blue tint */
  --b1: 0.978 0.009 240;   /* #F7F9FD */
  --b2: 0.960 0.015 240;   /* #EFF3FB */
  --b3: 0.942 0.020 240;   /* #E6EDFA */
  --bc: 0.168 0.075 264;   /* dark navy text */

  /* Error */
  --er: 0.62  0.22  27;
  --erc: 0.98 0     0;

  --rounded-box:   0.75rem;
  --rounded-btn:   0.5rem;
  --rounded-badge: 100px;
  --animation-btn: 0.2s;
  --animation-input: 0.2s;
  --btn-focus-scale: 0.97;
  --border-btn: 1px;
}

/* ========================================
   BASE
======================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(27,58,122,0.25) transparent;
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(27,58,122,0.2); border-radius: 99px; }

body {
  background: oklch(0.978 0.009 240);
}

/* ========================================
   UTILITY CLASSES
======================================== */

/* Navy gradient text */
.gold-gradient-text {
  background: linear-gradient(135deg, #4A7DD6 0%, #1B3A7A 50%, #0D1B3E 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* White card with navy shadow */
.glass-card {
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(27,58,122,0.06), 0 8px 28px rgba(27,58,122,0.07);
}

/* ========================================
   SECTION LABELS & TITLES
======================================== */
.section-label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1B3A7A;
  background: rgba(27, 58, 122, 0.08);
  border: 1px solid rgba(27, 58, 122, 0.2);
  padding: 4px 14px;
  border-radius: 100px;
}

.section-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #0D1B3E;
}

/* ========================================
   BUTTONS
======================================== */
.btn-gold-lg {
  display: inline-flex;
  align-items: center;
  padding: 14px 28px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.9rem;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  background: linear-gradient(135deg, #2952A8, #1B3A7A 60%, #0D1B3E);
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 24px rgba(27,58,122,0.28), 0 0 0 1px rgba(27,58,122,0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
}

.btn-gold-lg:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 40px rgba(27,58,122,0.38), 0 0 0 1px rgba(27,58,122,0.25);
}

.btn-gold-lg:active { transform: translateY(0); }

.btn-gold-sm {
  display: inline-flex;
  align-items: center;
  padding: 9px 20px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.82rem;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  background: linear-gradient(135deg, #2952A8, #1B3A7A 60%, #0D1B3E);
  color: #ffffff;
  border: none;
  box-shadow: 0 2px 16px rgba(27,58,122,0.22);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
}

.btn-gold-sm:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 24px rgba(27,58,122,0.32);
}

.btn-ghost-lg {
  display: inline-flex;
  align-items: center;
  padding: 14px 28px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.9rem;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  background: transparent;
  color: #1B3A7A;
  border: 1.5px solid rgba(27, 58, 122, 0.3);
  transition: all 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
}

.btn-ghost-lg:hover {
  border-color: #1B3A7A;
  background: rgba(27,58,122,0.05);
  color: #0D1B3E;
}

/* ========================================
   NAVBAR
======================================== */
#navbar {
  border-bottom: 1px solid transparent;
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

#navbar.scrolled {
  background: rgba(247, 249, 253, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom-color: rgba(27, 58, 122, 0.08);
  box-shadow: 0 1px 20px rgba(27,58,122,0.07);
}

/* ========================================
   HERO
======================================== */
.hero-section {
  background:
    radial-gradient(ellipse at 72% 0%,   rgba(27,58,122,0.07) 0%, transparent 58%),
    radial-gradient(ellipse at 0%  100%, rgba(27,58,122,0.04) 0%, transparent 50%),
    #F7F9FD;
}

/* Fine dot grid overlay */
.hero-grid {
  background-image: radial-gradient(circle, rgba(27,58,122,0.10) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 100%);
}

/* Line-reveal animation wrappers */
.hero-line       { display: block; overflow: hidden; }
.hero-line-inner { display: block; transform: translateY(110%); }

/* Scroll cue */
.scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, rgba(27,58,122,0.45), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.4; transform: scaleY(1); }
  50%       { opacity: 1;   transform: scaleY(1.15); }
}

/* ========================================
   PARTICLES CANVAS
======================================== */
#particles {
  opacity: 0.6;
}

/* ========================================
   PROBLEM / SOLUTION
======================================== */
.ps-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ps-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 32px rgba(27,58,122,0.12);
}

/* ========================================
   FEATURED PILLAR
======================================== */
.featured-card {
  background: linear-gradient(160deg,
    rgba(27,58,122,0.06) 0%,
    rgba(27,58,122,0.02) 100%
  );
  box-shadow: 0 0 60px rgba(27,58,122,0.08), 0 2px 32px rgba(27,58,122,0.1);
}

.featured-card:hover {
  box-shadow: 0 0 80px rgba(27,58,122,0.14), 0 4px 48px rgba(27,58,122,0.14);
}

/* ========================================
   3D CARD TILT
======================================== */
.tilt-card {
  transform-style: preserve-3d;
  transition: box-shadow 0.3s ease;
}

/* ========================================
   TRUST MARQUEE
======================================== */
.marquee-track {
  animation: marquee 28s linear infinite;
  will-change: transform;
}

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ========================================
   FAQ (DaisyUI collapse overrides)
======================================== */
.faq-item .collapse-title {
  font-size: 0.9rem;
  padding: 18px 24px;
  min-height: unset;
  color: rgba(13, 27, 62, 0.8);
  background: rgba(27,58,122,0.02);
}

.faq-item:has(input:checked) .collapse-title {
  color: #1B3A7A;
  background: rgba(27,58,122,0.05);
}

.faq-item:has(input:checked) {
  border-color: rgba(27,58,122,0.22) !important;
}

.faq-item .collapse-content {
  padding-left: 24px;
  padding-right: 24px;
}

/* ========================================
   SIGNUP SECTION
======================================== */
.signup-bg {
  background:
    radial-gradient(ellipse at 80% 20%, rgba(27,58,122,0.07) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 80%, rgba(27,58,122,0.05) 0%, transparent 50%),
    #F0F4FC;
}

/* ========================================
   FORM ELEMENTS
======================================== */
.form-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(13, 27, 62, 0.45);
  margin-bottom: 6px;
}

.form-input {
  width: 100%;
  background: #ffffff;
  border: 1.5px solid rgba(27, 58, 122, 0.15);
  border-radius: 8px;
  padding: 11px 14px;
  color: #0D1B3E;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.form-input:focus {
  border-color: #1B3A7A;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(27,58,122,0.1);
}

.form-input.error {
  border-color: #e74c3c;
  box-shadow: 0 0 0 3px rgba(231,76,60,0.1);
}

.form-input::placeholder { color: rgba(13,27,62,0.25); }

.form-input option {
  background: #ffffff;
  color: #0D1B3E;
}

.form-checkbox {
  width: 16px;
  height: 16px;
  accent-color: #1B3A7A;
  cursor: pointer;
  flex-shrink: 0;
}

/* Consent highlight on missing */
.consent-error {
  outline: 2px solid #e74c3c;
  outline-offset: 2px;
  border-radius: 3px;
}

/* ========================================
   COUNTER ANIMATION
======================================== */
#counter {
  font-variant-numeric: tabular-nums;
  transition: color 0.3s;
}

/* ========================================
   INITIAL GSAP HIDDEN STATES
======================================== */
.reveal-hidden {
  opacity: 0;
  transform: translateY(32px);
}

/* ========================================
   RESPONSIVE
======================================== */
@media (max-width: 768px) {
  .hero-line-inner { font-size: clamp(2.2rem, 8vw, 4rem); }
  .marquee-track { animation-duration: 18s; }
}

@media (max-width: 480px) {
  .btn-gold-lg, .btn-ghost-lg { padding: 12px 20px; font-size: 0.85rem; }
}