@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  
  /* User's Exact 5-Color Reference Palette */
  --color-psym-darkest: #05164A;
  --color-psym-navy: #1F306B;
  --color-psym-periwinkle: #91A8DC;
  --color-psym-ice: #BED3FE;
  --color-psym-white: #FBFDFE;
}

body {
  font-family: var(--font-body);
  color: #1e293b;
  background-color: #f8fafc;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

/* Premium Hero Gradient using the User's Palette (#05164A to #1F306B) */
.hero-gradient-palette {
  background-color: #05164A;
  background-image: 
    radial-gradient(at 15% 20%, rgba(31, 48, 107, 0.7) 0px, transparent 60%),
    radial-gradient(at 85% 30%, rgba(145, 168, 220, 0.22) 0px, transparent 50%),
    radial-gradient(at 50% 90%, rgba(190, 211, 254, 0.12) 0px, transparent 60%),
    linear-gradient(140deg, #05164A 0%, #0d1e57 45%, #1F306B 100%);
}

.hero-glow-soft {
  position: absolute;
  top: 50%;
  right: 15%;
  transform: translate(0%, -50%);
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(145, 168, 220, 0.2) 0%, rgba(31, 48, 107, 0.1) 50%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
}

/* Info card hover transitions */
.info-card {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.info-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -8px rgba(5, 22, 74, 0.1), 0 4px 8px -4px rgba(5, 22, 74, 0.04);
}

/* Smooth Accordion/Dropdown Details Animation */
details summary::-webkit-details-marker {
  display: none;
}

details[open] summary ~ * {
  animation: detailsFadeIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes detailsFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}