/* ==========================================================================
   BASE RESET
   ========================================================================== */

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: 1.65;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}

img,
video,
svg {
  max-width: 100%;
  display: block;
}

a {
  color: var(--c-primary-mid);
  text-decoration: underline;
}

a:hover {
  color: var(--c-primary);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  text-wrap: balance;
  margin-block: 0 var(--sp-4);
}

h1 {
  font-size: clamp(var(--text-2xl), 5vw, var(--text-4xl));
  font-weight: var(--fw-bold);
}

h2 {
  font-size: clamp(var(--text-xl), 3.5vw, var(--text-3xl));
}

h3 {
  font-size: clamp(var(--text-lg), 2.5vw, var(--text-2xl));
}

h4 {
  font-size: clamp(var(--text-base), 2vw, var(--text-xl));
}

h5 {
  font-size: var(--text-lg);
}

h6 {
  font-size: var(--text-base);
}

p {
  margin-block: 0 var(--sp-4);
  max-width: 68ch;
}

ul,
ol {
  padding-inline-start: var(--sp-6);
}


/* ==========================================================================
   TYPOGRAPHY UTILITIES
   ========================================================================== */

.text-label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-label);
}

.text-lead {
  font-size: clamp(var(--text-base), 1.5vw, var(--text-lg));
  line-height: 1.7;
  color: var(--c-text-muted);
}

.text-muted {
  color: var(--c-text-muted);
}

.text-on-primary {
  color: var(--c-on-primary);
}

.text-on-primary-muted {
  color: var(--c-on-primary-muted);
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-balance {
  text-wrap: balance;
}

.text-nowrap {
  white-space: nowrap;
}

.text-medium {
  font-weight: var(--fw-medium);
}

.text-semibold {
  font-weight: var(--fw-semibold);
}

.text-bold {
  font-weight: var(--fw-bold);
}

.text-xs {
  font-size: var(--text-xs);
}

.text-sm {
  font-size: var(--text-sm);
}

.text-base {
  font-size: var(--text-base);
}

.text-lg {
  font-size: var(--text-lg);
}

.text-xl {
  font-size: var(--text-xl);
}

.text-2xl {
  font-size: var(--text-2xl);
}

.text-3xl {
  font-size: clamp(var(--text-xl), 3.5vw, var(--text-3xl));
}

.text-4xl {
  font-size: clamp(var(--text-2xl), 5vw, var(--text-4xl));
}

[id] {
  scroll-margin-top: calc(var(--header-height) + var(--sp-4));
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

#main {
  min-height: calc(100dvh - var(--header-height));
  width: 100%;
}

.content-wrap {
  width: 100%;
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.content-prose {
  width: 100%;
  max-width: var(--w-prose);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.content-narrow {
  width: 100%;
  max-width: var(--w-narrow);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container {
  width: 100%;
  max-width: var(--w-xl);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--sm {
  max-width: var(--w-sm);
}

.container--md {
  max-width: var(--w-md);
}

.container--lg {
  max-width: var(--w-lg);
}

.container--2xl {
  max-width: var(--w-2xl);
}

.section {
  padding-block: clamp(var(--sp-10), 6vw, var(--sp-16));
}

.section--sm {
  padding-block: clamp(var(--sp-6), 4vw, var(--sp-8));
}

.section--lg {
  padding-block: clamp(var(--sp-12), 8vw, var(--sp-24));
}

.section--alt {
  background: var(--c-surface);
}

.section--dark {
  background: var(--c-primary);
  color: var(--c-on-primary);
}

.section--dotted {
  position: relative;
}

.section--dotted::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

.section--dotted>.container {
  position: relative;
  z-index: 1;
}

.section--dark .section-head__label {
  color: var(--c-accent-light);
}

.section--dark .section-head__title {
  color: var(--c-on-primary);
}

.section--dark .section-head__sub {
  color: var(--c-on-primary-muted);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 260px), 100%), 1fr));
  gap: var(--sp-6);
}

.grid--2 {
  --min: 380px;
}

.grid--3 {
  --min: 260px;
}

.grid--4 {
  --min: 200px;
}

ul.grid {
  list-style: none;
  padding: 0;
  margin: 0;
}

.flex {
  display: flex;
  gap: var(--sp-4);
}

.flex--wrap {
  flex-wrap: wrap;
}

.flex--col {
  flex-direction: column;
}

.flex--center {
  align-items: center;
  justify-content: center;
}

.flex--between {
  align-items: center;
  justify-content: space-between;
}


/* ==========================================================================
   RESPONSIVE — VISIBILITY HELPERS
   ========================================================================== */

@media (max-width: 767px) {
  .hide-mobile {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .hide-tablet {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .hide-desktop {
    display: none !important;
  }
}
/* ==========================================================================
   SCROLL ANIMATIONS
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  [data-animate] {
    opacity: 0;
    transition:
      opacity  780ms cubic-bezier(0.4, 0, 0.2, 1),
      transform 780ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  [data-animate],
  [data-animate="fade-up"]    { transform: translateY(22px); }
  [data-animate="fade-left"]  { transform: translateX(-28px); }
  [data-animate="fade-right"] { transform: translateX(28px); }
  [data-animate="fade-in"]    { transform: none; }

  [data-animate].is-visible {
    opacity: 1;
    transform: none;
  }

  [data-animate-delay="1"] { transition-delay: 100ms; }
  [data-animate-delay="2"] { transition-delay: 200ms; }
  [data-animate-delay="3"] { transition-delay: 300ms; }
  [data-animate-delay="4"] { transition-delay: 400ms; }
  [data-animate-delay="5"] { transition-delay: 500ms; }
  [data-animate-delay="6"] { transition-delay: 600ms; }
}

@media (prefers-reduced-motion: no-preference) {
  [data-animate-onload] {
    opacity: 0;
    transition:
      opacity  860ms cubic-bezier(0.4, 0, 0.2, 1),
      transform 860ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  [data-animate-onload],
  [data-animate-onload="fade-up"]    { transform: translateY(18px); }
  [data-animate-onload="fade-left"]  { transform: translateX(-24px); }
  [data-animate-onload="fade-right"] { transform: translateX(24px); }
  [data-animate-onload="fade-in"]    { transform: none; }

  [data-animate-onload].is-visible {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   CUSTOM SCROLLBAR
   ========================================================================== */

:root {
  scrollbar-width: auto;
  scrollbar-color: var(--c-primary-mid) var(--c-bg-alt);
}

::-webkit-scrollbar                       { width: 12px; }
::-webkit-scrollbar-button                { width: 0; height: 0; display: none; }
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment  { display: none; }
::-webkit-scrollbar-track                 { background: var(--c-bg-alt); }
::-webkit-scrollbar-thumb                 {
  background: linear-gradient(180deg, var(--c-primary-light) 0%, var(--c-primary) 100%);
  border-radius: 0;
  border: none;
}
::-webkit-scrollbar-thumb:hover           { background: var(--c-primary-mid); }

/* ==========================================================================
   SCROLL TO TOP
   ========================================================================== */

.scroll-top {
  position: fixed;
  bottom: var(--sp-8);
  right: var(--sp-8);
  z-index: 900;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;

  background: var(--gradient-primary);
  color: var(--c-on-primary);
  border: none;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 20px color-mix(in srgb, var(--c-primary) 40%, transparent);
  cursor: pointer;
  font-size: var(--text-base);

  opacity: 0;
  transform: translateY(12px) scale(0.88);
  pointer-events: none;
  transition:
    opacity   280ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 280ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow var(--transition);
}

.scroll-top.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.scroll-top:hover {
  box-shadow: 0 8px 28px color-mix(in srgb, var(--c-primary) 55%, transparent);
  transform: translateY(-2px) scale(1.06);
}

.scroll-top:active {
  transform: translateY(0) scale(0.96);
}

@media (max-width: 639px) {
  .scroll-top {
    bottom: var(--sp-5);
    right: var(--sp-5);
    width: 42px;
    height: 42px;
  }
}