@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap");

:root {
  color-scheme: dark;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  background: #111621;
}

body {
  font-family: "Inter", sans-serif;
  color: rgb(241 245 249);
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 450, "GRAD" 0, "opsz" 24;
}

body.nav-open {
  overflow: hidden;
}

[data-site-header],
[data-site-footer] {
  display: block;
}

[data-menu-panel][hidden] {
  display: none !important;
}

[data-portfolio-item],
[data-budget-chip] {
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    background-color 180ms ease,
    color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

[data-portfolio-item][hidden] {
  display: none !important;
}

[data-budget-chip].is-selected {
  background: #1754cf;
  border-color: #1754cf;
  color: #fff;
  box-shadow: 0 18px 40px rgba(23, 84, 207, 0.24);
}

.glass-panel {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgb(241 245 249);
}

.section-on-dark h1,
.section-on-dark h2,
.section-on-dark h3,
.section-on-dark h4,
.section-on-dark h5,
.section-on-dark h6 {
  color: #fff;
}

.section-on-dark p,
.section-on-dark li,
.section-on-dark summary,
.section-on-dark label {
  color: rgb(203 213 225);
}

.section-on-dark .text-primary,
.section-on-dark .material-symbols-outlined.text-primary {
  color: #1754cf;
}

.section-on-dark .glass-panel h1,
.section-on-dark .glass-panel h2,
.section-on-dark .glass-panel h3,
.section-on-dark .glass-panel h4,
.section-on-dark .glass-panel h5,
.section-on-dark .glass-panel h6 {
  color: #fff;
}

.section-on-dark .glass-panel p,
.section-on-dark .glass-panel li,
.section-on-dark .glass-panel summary,
.section-on-dark .glass-panel label {
  color: rgb(203 213 225);
}

.bg-white h1,
.bg-white h2,
.bg-white h3,
.bg-white h4,
.bg-white h5,
.bg-white h6 {
  color: rgb(15 23 42);
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.legal-prose h2 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
}

.legal-prose p,
.legal-prose li {
  color: rgb(148 163 184);
  line-height: 1.75;
}

.legal-prose ul {
  margin: 0;
  padding-left: 1.2rem;
}

.legal-prose strong {
  color: #fff;
}

.chip-muted {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: rgb(226 232 240);
}

.btn-primary {
  background: #1754cf !important;
  color: #ffffff !important;
  box-shadow: 0 18px 40px rgba(23, 84, 207, 0.24);
}

.btn-primary:hover {
  background: #2b67e3 !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 24px 48px rgba(23, 84, 207, 0.32);
}

.btn-secondary-dark {
  background: rgba(15, 23, 42, 0.72) !important;
  color: #ffffff !important;
  border: 1px solid rgba(71, 85, 105, 0.55) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.btn-secondary-dark:hover {
  background: rgba(23, 84, 207, 0.18) !important;
  color: #ffffff !important;
  border-color: rgba(96, 165, 250, 0.55) !important;
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.28);
}

.btn-light-contrast {
  background: #ffffff !important;
  color: #111621 !important;
  border: 1px solid rgba(17, 22, 33, 0.08);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.18);
}

.btn-light-contrast:hover {
  background: #e2e8f0 !important;
  color: #111621 !important;
  transform: translateY(-2px);
  box-shadow: 0 22px 42px rgba(15, 23, 42, 0.24);
}

.btn-outline-light {
  background: transparent !important;
  color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, 0.34) !important;
}

.btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.56) !important;
  transform: translateY(-2px);
}

.floating-badge {
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  background: #1754cf;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 14px 28px rgba(10, 18, 32, 0.28);
  z-index: 2;
}

[data-filter],
[data-budget-chip] {
  cursor: pointer;
}

[data-filter]:hover,
[data-budget-chip]:hover {
  background: rgba(23, 84, 207, 0.14);
  border-color: rgba(96, 165, 250, 0.45);
  color: #ffffff;
  transform: translateY(-1px);
}

a[class*="rounded-"],
button[class*="rounded-"] {
  transition:
    transform 180ms ease,
    background-color 180ms ease,
    color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.orbit-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at top left, rgba(23, 84, 207, 0.18), transparent 30%),
    radial-gradient(circle at bottom right, rgba(23, 84, 207, 0.12), transparent 35%);
}

.focus-ring:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(23, 84, 207, 0.18);
}