/* =======================================================
   DISTRICT PIXEL GLOBAL DESIGN SYSTEM
   Fonts, color tokens, type scale, buttons, indicators, and base UI.
   Update this file first when changing site-wide visual rules.
======================================================= */

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src: url("/assets/fonts/OpenSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --dp-font-heading: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --dp-font-body: "Open Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Brand color system
     Text-safe accent tokens pass WCAG AA for normal text on #08090A. */
  --dp-brand-bg: #08090A;
  --dp-brand-bg-light: #F6F4EF;
  --dp-brand-accent: #2E58FF;
  --dp-brand-accent-opaque: #2E58FFFF;
  --dp-brand-accent-text: #5B7FFF;
  --dp-brand-purple: #A210C9;
  --dp-brand-purple-text: #C44DFF;
  --dp-brand-green: #10CC55;
  --dp-brand-navy: #0F0099;
  --dp-brand-mint: #3FF864;
  --dp-brand-cyan: #00F5FF;
  --dp-brand-magenta: #FF0099;
  --dp-brand-amber: #FFB800;
  --dp-brand-coral: #FF6B6B;
  --dp-brand-teal: #20C997;
  --dp-brand-slate: #1C1E26;
  --dp-brand-periwinkle: #4D4DFF;
  --dp-brand-aquamarine: #33FFCC;
  --dp-brand-violet: #CC33FF;
  --dp-brand-sky: #4AB6E8;
  --dp-brand-steel: #44B6A0;
  --dp-brand-lavender-blue: #3592B0;
  --dp-brand-muted-indigo: #3592BD;
  --dp-brand-pale-mint: #20C993;
  --dp-brand-peach: #FF6AC8;
  --dp-brand-salmon: #FF6B67;

  --dp-color-bg: var(--dp-brand-bg);
  --dp-color-bg-light: var(--dp-brand-bg-light);
  --dp-color-panel: #0d0e10;
  --dp-color-panel-soft: #111216;
  --dp-color-text: #f5f5f5;
  --dp-color-body: #cdcdcd;
  --dp-color-muted: rgba(255, 255, 255, 0.65);
  --dp-color-dim: rgba(255, 255, 255, 0.6);
  --dp-color-border: rgba(255, 255, 255, 0.1);
  --dp-color-blue: var(--dp-brand-accent);
  --dp-color-blue-text: var(--dp-brand-accent-text);
  --dp-color-accent: var(--dp-brand-accent);
  --dp-color-accent-text: var(--dp-brand-accent-text);
  --dp-color-purple: var(--dp-brand-purple);
  --dp-color-purple-text: var(--dp-brand-purple-text);
  --dp-color-green: var(--dp-brand-green);
  --dp-color-navy: var(--dp-brand-navy);
  --dp-color-mint: var(--dp-brand-mint);
  --dp-color-cyan: var(--dp-brand-cyan);
  --dp-color-magenta: var(--dp-brand-magenta);
  --dp-color-amber: var(--dp-brand-amber);
  --dp-color-coral: var(--dp-brand-coral);
  --dp-color-teal: var(--dp-brand-teal);
  --dp-color-slate: var(--dp-brand-slate);
  --dp-color-periwinkle: var(--dp-brand-periwinkle);
  --dp-color-aquamarine: var(--dp-brand-aquamarine);
  --dp-color-violet: var(--dp-brand-violet);
  --dp-color-sky: var(--dp-brand-sky);
  --dp-color-steel: var(--dp-brand-steel);
  --dp-color-lavender-blue: var(--dp-brand-lavender-blue);
  --dp-color-muted-indigo: var(--dp-brand-muted-indigo);
  --dp-color-pale-mint: var(--dp-brand-pale-mint);
  --dp-color-peach: var(--dp-brand-peach);
  --dp-color-salmon: var(--dp-brand-salmon);
  --dp-text-accent: var(--dp-brand-accent-text);
  --dp-text-purple: var(--dp-brand-purple-text);
  --dp-text-green: var(--dp-brand-green);

  --dp-page-max: 1200px;
  --dp-page-wide: 1400px;
  --dp-page-gutter: 7vw;

  --dp-h1-desktop-size: 58px;
  --dp-h1-desktop-line: 1.15;
  --dp-h1-desktop-spacing: -0.05;
  --dp-h1-mobile-size: 40px;
  --dp-h1-mobile-line: 1.05;
  --dp-h1-mobile-spacing: 0;
  --dp-h1-size: var(--dp-h1-desktop-size);
  --dp-h2-desktop-size: 40px;
  --dp-h2-desktop-line: 1.25;
  --dp-h2-mobile-size: 32px;
  --dp-h2-mobile-line: 1.25;
  --dp-h2-size: var(--dp-h2-desktop-size);
  --dp-h2-line: var(--dp-h2-desktop-line);
  --dp-h3-size: clamp(24px, 2.4vw, 38px);
  --dp-h3-desktop-line: 1.14;
  --dp-h3-mobile-line: 1.30;
  --dp-h3-line: var(--dp-h3-desktop-line);
  --dp-h4-size: clamp(20px, 1.8vw, 28px);
  --dp-body-desktop-size: 17px;
  --dp-body-desktop-line: 1.75;
  --dp-body-desktop-color: #cdcdcd;
  --dp-body-mobile-size: 16px;
  --dp-body-mobile-line: 1.75;
  --dp-body-mobile-color: #cdcdcd;
  --dp-body-size: var(--dp-body-desktop-size);
  --dp-body-small-size: 15px;
  --dp-label-desktop-size: 13px;
  --dp-label-desktop-line: 1.2;
  --dp-label-desktop-spacing: 0.32em;
  --dp-label-mobile-size: 13px;
  --dp-label-mobile-line: 1.2;
  --dp-label-mobile-spacing: 0.26em;
  --dp-label-pill-width: 22px;
  --dp-label-pill-height: 8px;
  --dp-label-size: var(--dp-label-desktop-size);
  --dp-label-line: var(--dp-label-desktop-line);
  --dp-button-size: 13px;

  --dp-heading-weight: 300;
  --dp-body-weight: 400;
  --dp-heading-line: 1.30;
  --dp-body-line: var(--dp-body-desktop-line);
  --dp-heading-spacing: 0;
  --dp-label-spacing: var(--dp-label-desktop-spacing);
  --dp-button-spacing: 0.16em;

  --dp-radius-sm: 8px;
  --dp-radius-md: 12px;
  --dp-radius-lg: 18px;
  --dp-radius-pill: 999px;

  --dp-transition-fast: 0.2s ease;
  --dp-transition-med: 0.35s ease;
}

@media (max-width: 1728px) {
  :root {
    --dp-h1-size: var(--dp-h1-desktop-size);
    --dp-heading-line: var(--dp-h1-desktop-line);
    --dp-heading-spacing: var(--dp-h1-desktop-spacing);
  }
}

@media (max-width: 768px) {
  :root {
    --dp-page-gutter: 24px;
    --dp-h1-size: var(--dp-h1-mobile-size);
    --dp-h2-size: var(--dp-h2-mobile-size);
    --dp-h2-line: var(--dp-h2-mobile-line);
    --dp-h3-size: 24px;
    --dp-h3-line: var(--dp-h3-mobile-line);
    --dp-h4-size: 21px;
    --dp-body-size: var(--dp-body-mobile-size);
    --dp-body-small-size: 14px;
    --dp-label-size: var(--dp-label-mobile-size);
    --dp-label-line: var(--dp-label-mobile-line);
    --dp-button-size: 15px;
    --dp-heading-line: var(--dp-h1-mobile-line);
    --dp-heading-spacing: var(--dp-h1-mobile-spacing);
    --dp-body-line: var(--dp-body-mobile-line);
    --dp-body-desktop-color: var(--dp-body-mobile-color);
    --dp-label-spacing: var(--dp-label-mobile-spacing);
  }
}

html {
  background: var(--dp-color-bg);
}

body {
  background: var(--dp-color-bg);
  color: var(--dp-body-desktop-color);
  font-family: var(--dp-font-body);
  font-size: var(--dp-body-size);
  font-weight: var(--dp-body-weight);
  line-height: var(--dp-body-line);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:where(h1, .dp-h1),
:where(h2, .dp-h2),
:where(h3, .dp-h3),
:where(h4, .dp-h4) {
  color: var(--dp-color-text);
  font-family: var(--dp-font-heading);
  font-weight: var(--dp-heading-weight);
  letter-spacing: var(--dp-heading-spacing);
}

:where(h1, .dp-h1) {
  font-size: var(--dp-h1-size);
  line-height: var(--dp-heading-line);
}

:where(h2, .dp-h2) {
  font-size: var(--dp-h2-size);
  line-height: var(--dp-h2-line);
}

:where(h3, .dp-h3) {
  font-size: var(--dp-h3-size);
  line-height: var(--dp-h3-line);
}

:where(h4, .dp-h4) {
  font-size: var(--dp-h4-size);
  line-height: 1.25;
}

:where(p, li, .dp-body-copy) {
  font-family: var(--dp-font-body);
  font-size: var(--dp-body-size);
  line-height: var(--dp-body-line);
}

.dp-small-copy {
  font-size: var(--dp-body-small-size);
  line-height: 1.65;
}

.dp-muted {
  color: var(--dp-color-muted);
}

.dp-page-shell {
  margin: 0 auto;
  max-width: var(--dp-page-max);
  padding-left: var(--dp-page-gutter);
  padding-right: var(--dp-page-gutter);
}

.dp-page-shell--wide {
  max-width: var(--dp-page-wide);
}

/* =======================================================
   Linear Indicator System
======================================================= */

.linear-indicator,
.linear-indicator-b,
.linear-indicator-g,
.linear-indicator-p {
  align-items: center;
  color: rgba(255, 255, 255, 0.8);
  display: inline-flex;
  font-family: var(--dp-font-body);
  font-size: var(--dp-label-size);
  font-weight: 400;
  gap: 10px;
  letter-spacing: var(--dp-label-spacing);
  line-height: var(--dp-label-line);
  text-transform: uppercase;
}

.linear-indicator::before,
.linear-indicator-b::before,
.linear-indicator-g::before,
.linear-indicator-p::before {
  background: var(--dp-color-blue);
  border-radius: var(--dp-radius-pill);
  content: "";
  flex-shrink: 0;
  height: var(--dp-label-pill-height);
  margin-right: 10px;
  width: var(--dp-label-pill-width);
}

.linear-indicator-g::before,
.linear-indicator.linear-indicator-g::before {
  background: var(--dp-color-green);
}

.linear-indicator-p::before,
.linear-indicator.linear-indicator-p::before {
  background: var(--dp-color-purple);
}

/* =======================================================
   Button System
======================================================= */

.dp-btn {
  align-items: center;
  border: 0;
  border-radius: var(--dp-radius-pill);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--dp-font-heading);
  font-size: var(--dp-button-size);
  font-weight: 400;
  justify-content: center;
  letter-spacing: var(--dp-button-spacing);
  line-height: 1;
  min-height: 56px;
  padding: 15px 72px 15px 32px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform var(--dp-transition-fast), background var(--dp-transition-fast), border-color var(--dp-transition-fast), box-shadow var(--dp-transition-fast), color var(--dp-transition-fast);
}

.dp-btn__circle {
  align-items: center;
  border-radius: 50%;
  display: flex;
  height: 42px;
  justify-content: center;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  transition: background var(--dp-transition-fast);
  width: 42px;
}

.dp-btn__circle::before,
.dp-btn__circle::after {
  content: "";
  left: 50%;
  position: absolute;
  top: 50%;
}

.dp-btn__circle::before {
  height: 2px;
  transform: translate(-60%, -55%);
  width: 14px;
}

.dp-btn__circle::after {
  height: 9px;
  transform: translate(-4px, -50%) rotate(45deg);
  width: 9px;
}

.dp-btn--light,
.dp-btn--down {
  background: #ccc;
  color: var(--dp-color-bg);
}

.dp-btn--light .dp-btn__circle,
.dp-btn--down .dp-btn__circle {
  background: var(--dp-color-bg);
}

.dp-btn--light .dp-btn__circle::before,
.dp-btn--down .dp-btn__circle::before {
  background: #fff;
}

.dp-btn--light .dp-btn__circle::after,
.dp-btn--down .dp-btn__circle::after {
  border-right: 2px solid #fff;
  border-top: 2px solid #fff;
}

.dp-btn--dark {
  background: var(--dp-color-bg);
  color: #ccc;
}

.dp-btn--dark .dp-btn__circle {
  background: #ccc;
}

.dp-btn--dark .dp-btn__circle::before {
  background: var(--dp-color-bg);
}

.dp-btn--dark .dp-btn__circle::after {
  border-right: 2px solid var(--dp-color-bg);
  border-top: 2px solid var(--dp-color-bg);
}

.dp-btn--outline,
.dp-btn--outline-down {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
}

.dp-btn--outline .dp-btn__circle,
.dp-btn--outline-down .dp-btn__circle {
  background: var(--dp-color-blue);
}

.dp-btn--outline .dp-btn__circle::before,
.dp-btn--outline-down .dp-btn__circle::before {
  background: #fff;
}

.dp-btn--outline .dp-btn__circle::after,
.dp-btn--outline-down .dp-btn__circle::after {
  border-right: 2px solid #fff;
  border-top: 2px solid #fff;
}

.dp-btn--down .dp-btn__circle::before,
.dp-btn--outline-down .dp-btn__circle::before {
  height: 14px;
  transform: translate(-50%, -55%);
  width: 2px;
}

.dp-btn--down .dp-btn__circle::after,
.dp-btn--outline-down .dp-btn__circle::after {
  transform: translate(-50%, -70%) rotate(135deg);
}

.dp-btn:hover {
  transform: translateY(-5px);
}

.dp-btn--light:hover,
.dp-btn--dark:hover,
.dp-btn--down:hover {
  background: #fff;
  box-shadow: 0 0 25px rgba(220, 220, 220, 0.3);
  color: var(--dp-color-bg) !important;
}

.dp-btn--outline:hover,
.dp-btn--outline-down:hover {
  background: var(--dp-color-blue);
  border-color: var(--dp-color-blue);
  box-shadow: 0 0 30px rgba(46, 88, 255, 0.4);
  color: #fff !important;
}

.dp-btn--light:hover .dp-btn__circle,
.dp-btn--dark:hover .dp-btn__circle,
.dp-btn--down:hover .dp-btn__circle {
  background: var(--dp-color-blue);
}

.dp-btn--outline:hover .dp-btn__circle,
.dp-btn--outline-down:hover .dp-btn__circle {
  background: #fff;
}

.dp-btn--light:hover .dp-btn__circle::before,
.dp-btn--dark:hover .dp-btn__circle::before,
.dp-btn--down:hover .dp-btn__circle::before {
  background: #fff;
}

.dp-btn--outline:hover .dp-btn__circle::before,
.dp-btn--outline-down:hover .dp-btn__circle::before {
  background: var(--dp-color-blue);
}

.dp-btn--light:hover .dp-btn__circle::after,
.dp-btn--dark:hover .dp-btn__circle::after,
.dp-btn--down:hover .dp-btn__circle::after {
  border-right-color: #fff;
  border-top-color: #fff;
}

.dp-btn--outline:hover .dp-btn__circle::after,
.dp-btn--outline-down:hover .dp-btn__circle::after {
  border-right-color: var(--dp-color-blue);
  border-top-color: var(--dp-color-blue);
}

@media (max-width: 1024px) {
  .dp-btn {
    min-height: 62px;
    padding: 16px 82px 16px 28px;
  }

  .dp-btn__circle {
    height: 48px;
    width: 48px;
  }
}

@media (max-width: 520px) {
  .dp-btn {
    width: 100%;
  }
}