/* ==========================================================
   Theme: Indigo → Violet, Montserrat body + Open Sans headings, smooth motion
   Works on top of Bootstrap 5.3 (light + dark mode)
   ========================================================== */

:root {
  --brand-1: #6366f1;           /* indigo  */
  --brand-2: #8b5cf6;           /* violet  */
  --brand-3: #ec4899;           /* pink accent */
  --brand-grad: linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 55%, var(--brand-3) 130%);

  --font-heading: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bs-font-sans-serif: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: .96rem;
  --bs-body-line-height: 1.7;

  --bs-primary: #6366f1;
  --bs-primary-rgb: 99, 102, 241;
  --bs-link-color: #5457e6;
  --bs-link-color-rgb: 84, 87, 230;
  --bs-link-hover-color: #7c3aed;
  --bs-link-hover-color-rgb: 124, 58, 237;
  --bs-border-radius: .75rem;
  --bs-border-radius-lg: 1rem;
  --bs-border-radius-xl: 1.25rem;

  --surface: #ffffff;
  --surface-soft: #f5f6ff;
  --line: rgba(99, 102, 241, .14);
  --shadow-sm: 0 2px 10px rgba(79, 70, 229, .07);
  --shadow-md: 0 14px 34px rgba(79, 70, 229, .16);
  --ease: cubic-bezier(.22, .8, .3, 1);
}

[data-bs-theme="dark"] {
  --bs-body-bg: #0f1020;
  --bs-body-bg-rgb: 15, 16, 32;
  --bs-body-color: #d9dbf0;
  --bs-secondary-bg: #171833;
  --bs-tertiary-bg: #151630;
  --bs-border-color: rgba(139, 140, 255, .16);
  --bs-link-color: #a5a8ff;
  --bs-link-color-rgb: 165, 168, 255;
  --bs-link-hover-color: #c4b5fd;
  --bs-link-hover-color-rgb: 196, 181, 253;
  --surface: #171833;
  --surface-soft: #1b1c3b;
  --line: rgba(139, 140, 255, .18);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, .3);
  --shadow-md: 0 14px 34px rgba(0, 0, 0, .45);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  font-family: var(--bs-body-font-family);
  background:
    radial-gradient(900px 420px at 100% -10%, rgba(139, 92, 246, .09), transparent 60%),
    radial-gradient(700px 380px at -10% 0%, rgba(99, 102, 241, .08), transparent 60%),
    var(--bs-body-bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, .display-5, .display-6, .navbar-brand, .card-title { font-family: var(--font-heading); letter-spacing: -.015em; }
h1, .display-5, .display-6 { font-weight: 700; }
h2, h3, h4, h5 { font-weight: 600; }
a { text-decoration-color: rgba(99, 102, 241, .35); transition: color .2s var(--ease); }
::selection { background: rgba(139, 92, 246, .28); }
:focus-visible { outline: 3px solid rgba(99, 102, 241, .45); outline-offset: 2px; border-radius: 6px; }

/* ---------- Navbar ---------- */
.navbar {
  background: rgba(17, 18, 45, .86) !important;
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  padding-block: .7rem;
  transition: box-shadow .3s var(--ease), padding .3s var(--ease);
  z-index: 1030;
}
.navbar.is-scrolled { box-shadow: 0 10px 30px rgba(10, 10, 40, .35); padding-block: .45rem; }
.navbar-brand { font-weight: 700; font-size: 1.25rem; display: inline-flex; align-items: center; gap: .55rem; }
.navbar-brand::before {
  content: ''; width: 1.9rem; height: 1.9rem; border-radius: .6rem; background: var(--brand-grad);
  box-shadow: 0 4px 14px rgba(139, 92, 246, .55);
  transition: transform .4s var(--ease);
}
.navbar-brand:hover::before { transform: rotate(12deg) scale(1.08); }
.navbar .nav-link {
  position: relative; font-weight: 500; font-size: .92rem; padding: .5rem .9rem !important;
  color: rgba(255, 255, 255, .72); transition: color .2s var(--ease);
}
.navbar .nav-link::after {
  content: ''; position: absolute; left: .9rem; right: .9rem; bottom: .2rem; height: 2px; border-radius: 2px;
  background: var(--brand-grad); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.navbar .nav-link:hover, .navbar .nav-link.active { color: #fff; }
.navbar .nav-link:hover::after, .navbar .nav-link.active::after { transform: scaleX(1); }
.navbar .form-control {
  background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .12); color: #fff; border-radius: 999px; padding-inline: 1.1rem;
}
.navbar .form-control::placeholder { color: rgba(255, 255, 255, .5); }
.navbar .form-control:focus { background: rgba(255, 255, 255, .14); border-color: rgba(165, 168, 255, .7); box-shadow: 0 0 0 .22rem rgba(99, 102, 241, .3); }
.navbar .btn-outline-light { border-radius: 999px; border-color: rgba(255, 255, 255, .25); }
.theme-toggle {
  width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .06); color: #fff; display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s, transform .3s var(--ease); cursor: pointer; margin-right: .6rem;
}
.theme-toggle:hover { background: rgba(255, 255, 255, .16); transform: rotate(20deg); }

/* ---------- Buttons ---------- */
.btn { font-weight: 500; border-radius: 999px; padding: .55rem 1.35rem; transition: transform .2s var(--ease), box-shadow .25s var(--ease), background-color .2s, color .2s, border-color .2s; }
.btn-lg { padding: .75rem 1.9rem; font-size: 1rem; }
.btn-sm { padding: .35rem .95rem; }
.btn:active { transform: translateY(1px) scale(.98); }
.btn-primary {
  --bs-btn-border-color: transparent; --bs-btn-hover-border-color: transparent; --bs-btn-active-border-color: transparent;
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
  background: var(--brand-grad); background-size: 140% 100%; background-position: 0 0; border: 0; color: #fff;
  box-shadow: 0 6px 18px rgba(99, 102, 241, .38);
}
.btn-primary:hover, .btn-primary:focus { background: var(--brand-grad); background-size: 140% 100%; background-position: 100% 0; color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(139, 92, 246, .5); }
.btn-outline-primary, .btn-outline-secondary { --bs-btn-color: var(--brand-1); --bs-btn-border-color: rgba(99, 102, 241, .5); --bs-btn-hover-bg: var(--brand-1); --bs-btn-hover-border-color: var(--brand-1); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--brand-2); --bs-btn-active-border-color: var(--brand-2); --bs-btn-active-color: #fff; }
.btn-outline-secondary:hover { transform: translateY(-2px); }
.btn-outline-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-link { text-decoration: none; }
.btn.is-loading { pointer-events: none; opacity: .85; }
.btn.is-loading::after { content: ''; display: inline-block; width: .9em; height: .9em; margin-left: .6rem; vertical-align: -.1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Hero ---------- */
.hero, .p-5.bg-body-tertiary.rounded-3 {
  position: relative; overflow: hidden; border: 0; border-radius: 1.75rem !important;
  padding: clamp(2rem, 6vw, 4.5rem) !important;
  background: var(--brand-grad) !important; color: #fff;
  box-shadow: 0 24px 60px rgba(99, 102, 241, .35);
}
.hero::before, .p-5.bg-body-tertiary.rounded-3::before {
  content: ''; position: absolute; width: 420px; height: 420px; right: -120px; top: -160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .28), transparent 65%); animation: float 9s ease-in-out infinite;
}
.hero::after, .p-5.bg-body-tertiary.rounded-3::after {
  content: ''; position: absolute; width: 300px; height: 300px; left: -90px; bottom: -150px; border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 72, 153, .45), transparent 65%); animation: float 11s ease-in-out infinite reverse;
}
.hero > *, .p-5.bg-body-tertiary.rounded-3 > * { position: relative; z-index: 1; }
.hero h1 { color: #fff; }
.hero p { color: rgba(255, 255, 255, .88); font-weight: 300; }
.hero .btn-primary { background: #fff; color: var(--brand-1); box-shadow: 0 8px 22px rgba(0, 0, 0, .18); }
.hero .btn-primary:hover { background: #fff; color: var(--brand-2); }
.hero .btn-outline-secondary { --bs-btn-color: #fff; --bs-btn-border-color: rgba(255, 255, 255, .6); --bs-btn-hover-bg: rgba(255, 255, 255, .18); --bs-btn-hover-border-color: #fff; --bs-btn-hover-color: #fff; }
@keyframes float { 50% { transform: translate(-24px, 22px) scale(1.06); } }

/* ---------- Section headings ---------- */
main h2.h4 { position: relative; padding-left: .9rem; }
main h2.h4::before { content: ''; position: absolute; left: 0; top: .2em; bottom: .2em; width: 4px; border-radius: 4px; background: var(--brand-grad); }

/* ---------- Cards ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 1.1rem; overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s; }
.card.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md) !important; border-color: rgba(139, 92, 246, .4); }
.card-header { background: var(--surface-soft); border-bottom: 1px solid var(--line); font-weight: 600; }
.card .ratio { overflow: hidden; }
.card .ratio img { transition: transform .6s var(--ease); }
.card:hover .ratio img { transform: scale(1.07); }
.card-title a { color: var(--bs-body-color); transition: color .2s; }
.card:hover .card-title a { color: var(--brand-2); }
/* static cards (answers, forms, sidebar) shouldn't jump */
.card.mb-3, .card.mt-4, aside .card { transition: box-shadow .3s var(--ease), border-color .3s; }
.card.mb-3:hover, .card.mt-4:hover, aside .card:hover { transform: none; }

/* ---------- Lists ---------- */
.list-group { --bs-list-group-border-color: var(--line); --bs-list-group-bg: var(--surface); border-radius: 1.1rem; }
.list-group:not(.list-group-flush) { box-shadow: var(--shadow-sm); }
.list-group-item { padding: 1rem 1.25rem; transition: background-color .2s, padding-left .25s var(--ease), color .2s; }
.list-group-item-action:hover, .list-group-item-action:focus { background: var(--surface-soft); color: var(--brand-2); padding-left: 1.6rem; }
.list-group-item.active { background: var(--brand-grad); border-color: transparent; color: #fff; }
.list-group-item.active .badge { background: rgba(255, 255, 255, .25) !important; }

/* ---------- Badges & pills ---------- */
.badge { font-weight: 500; padding: .5em .9em; border-radius: 999px; transition: transform .2s var(--ease), background-color .2s, box-shadow .2s; }
.badge.text-bg-primary { background: var(--brand-grad) !important; color: #fff !important; }
a.badge:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(99, 102, 241, .25); }
.badge.text-bg-light { background: var(--surface-soft) !important; color: var(--bs-body-color) !important; border-color: var(--line) !important; }
a.badge.text-bg-light:hover { background: rgba(99, 102, 241, .14) !important; color: var(--brand-2) !important; }
.nav-pills { gap: .35rem; }
.nav-pills .nav-link { border-radius: 999px; font-weight: 500; padding: .35rem .9rem; color: var(--bs-body-color); transition: background .2s, color .2s, transform .2s var(--ease); }
.nav-pills .nav-link:hover { background: rgba(99, 102, 241, .12); transform: translateY(-2px); }
.nav-pills .nav-link.active { background: var(--brand-grad); color: #fff; box-shadow: 0 6px 16px rgba(99, 102, 241, .35); }

/* ---------- Forms ---------- */
.form-control, .form-select { border-radius: .8rem; padding: .7rem 1rem; border-color: var(--line); background-color: var(--surface); transition: border-color .2s, box-shadow .25s var(--ease), transform .2s; }
.form-control:focus, .form-select:focus { border-color: var(--brand-1); box-shadow: 0 0 0 .25rem rgba(99, 102, 241, .2); }
.input-group > .form-control { border-radius: 999px 0 0 999px; padding-left: 1.3rem; }
.input-group > .btn { border-radius: 0 999px 999px 0; }
.form-label { font-weight: 500; }
textarea.form-control { resize: vertical; min-height: 7rem; }

/* ---------- Alerts / breadcrumb / pagination ---------- */
.alert { border: 0; border-radius: 1rem; box-shadow: var(--shadow-sm); border-left: 4px solid currentColor; animation: slideDown .45s var(--ease) both; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.breadcrumb { font-size: .86rem; }
.breadcrumb a { text-decoration: none; }
.pagination { gap: .3rem; flex-wrap: wrap; }
.page-link { border: 1px solid var(--line); border-radius: .7rem !important; color: var(--brand-1); background: var(--surface); transition: all .2s var(--ease); }
.page-link:hover { background: rgba(99, 102, 241, .12); color: var(--brand-2); transform: translateY(-2px); }
.page-item.active .page-link { background: var(--brand-grad); border-color: transparent; color: #fff; box-shadow: 0 6px 14px rgba(99, 102, 241, .35); }
.modal-content { border: 0; border-radius: 1.25rem; box-shadow: 0 30px 80px rgba(20, 20, 60, .4); }

/* ---------- Article content ---------- */
article img, .col-lg-8 img { max-width: 100%; height: auto; border-radius: 1rem; }
article h2, article h3 { margin-top: 1.8rem; }
article p, article li { line-height: 1.85; }
article blockquote { border-left: 4px solid var(--brand-1); background: var(--surface-soft); padding: 1rem 1.3rem; border-radius: 0 .9rem .9rem 0; }
article a, dd a, .glossary-link { text-decoration: underline; text-underline-offset: 3px; }
hr { opacity: .12; }

/* ---------- Footer ---------- */
footer { background: var(--surface) !important; border-top: 1px solid var(--line) !important; padding-block: 1.5rem !important; }
footer a { text-decoration: none; transition: color .2s; }
footer a:hover { color: var(--brand-2) !important; }

/* ---------- Back to top ---------- */
.to-top {
  position: fixed; right: 1.25rem; bottom: 1.25rem; width: 2.9rem; height: 2.9rem; border: 0; border-radius: 50%;
  background: var(--brand-grad); color: #fff; font-size: 1.2rem; box-shadow: 0 10px 24px rgba(99, 102, 241, .45);
  opacity: 0; visibility: hidden; transform: translateY(14px); transition: all .35s var(--ease); z-index: 1040; cursor: pointer;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { transform: translateY(-3px); }

/* ---------- Page + scroll reveal animations (only when JS is on) ---------- */
main { animation: pageIn .5s var(--ease) both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: var(--d, 0ms); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .navbar-collapse { padding: 1rem 0 .5rem; }
  .navbar .nav-link::after { display: none; }
  .theme-toggle { margin: 0 0 .75rem; }
}
@media (max-width: 575.98px) {
  body { font-size: .93rem; }
  .btn-lg { width: 100%; margin: 0 0 .6rem !important; }
}

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}