:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-press: 120ms;
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 250ms;
  --dur-exit-fast: 120ms;
  --dur-exit-base: 160ms;
  --dur-exit-slow: 200ms;
  --stagger: 30ms;
  --press-scale: 0.97;
  --pop-from: 0.95;
  /* Noble Blue */
  --noble-50: #edf6ff;
  --noble-100: #dcebff;
  --noble-200: #c4deff;
  --noble-300: #a7ceff;
  --noble-400: #80b9ff;
  --noble-500: #64a5f5;
  --noble-600: #4689dc;
  --noble-700: #326cb5;
  --noble-800: #244f86;
  --noble-900: #19365c;
  --noble-950: #10243e;

  /* Electric Blue */
  --accent-50: #edf4ff;
  --accent-100: #d9e7ff;
  --accent-200: #b8d2ff;
  --accent-300: #8db5ff;
  --accent-400: #629aff;
  --accent-500: #3985ff;
  --accent-600: #246ceb;
  --accent-700: #1d55c1;
  --accent-800: #1e4695;
  --accent-900: #1d376e;
  --accent-950: #142448;

  /* Graphite Blue */
  --graphite-50: #edf1f7;
  --graphite-100: #dce3ed;
  --graphite-200: #becada;
  --graphite-300: #9baec5;
  --graphite-400: #788da8;
  --graphite-500: #5d718c;
  --graphite-600: #485b75;
  --graphite-700: #38485e;
  --graphite-800: #28364a;
  --graphite-900: #1c293b;
  --graphite-950: #111b29;

  /* Success */
  --success-50: #e9fbf4;
  --success-100: #cff7e6;
  --success-300: #72e2b5;
  --success-500: #22c58b;
  --success-700: #14845c;
  --success-900: #104c38;

  /* Warning */
  --warning-50: #fff7e5;
  --warning-100: #fdecc4;
  --warning-300: #f8d27c;
  --warning-500: #f5b942;
  --warning-700: #a76c13;
  --warning-900: #68420d;

  /* Danger */
  --danger-50: #fff0f1;
  --danger-100: #ffd9de;
  --danger-300: #f99ba5;
  --danger-500: #f06472;
  --danger-700: #b93245;
  --danger-900: #70202d;

  /* Info */
  --info-50: #edf7ff;
  --info-100: #d9eeff;
  --info-300: #8cceff;
  --info-500: #65b5f5;
  --info-700: #246faf;
  --info-900: #19456e;

  /* 
  =============
	  Dark Mode
  =============
*/

  --dark-950: #0b0f14;
  --dark-900: #101722;
  --dark-850: #141d29;
  --dark-800: #192331;
  --dark-700: #263344;
  --dark-600: #3b4a5d;
  --dark-500: #566579;
  --dark-400: #8493a6;
  --dark-300: #b0bdcc;
  --dark-200: #d0d9e4;
  --dark-100: #e8edf4;
  --dark-50: #f6f8fc;

  --light-950: #111923;
  --light-900: #1b2735;
  --light-800: #2d3b4c;
  --light-700: #465568;
  --light-600: #65758a;
  --light-500: #8492a4;
  --light-400: #a7b2c1;
  --light-300: #c5ced9;
  --light-200: #dce2e9;
  --light-100: #eaf0f6;
  --light-50: #f5f8fc;
  --white: #ffffff;

  /* 
  ========
	  Font
  ========
*/

  --font-primary: "Manrope", sans-serif;
  --font-display: "Geist", sans-serif;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-display: clamp(2.75rem, 5vw, 4rem);

  --leading-tight: 1.1;
  --leading-heading: 1.2;
  --leading-normal: 1.5;
  --leading-body: 1.6;

  --tracking-tight: -0.045em;
  --tracking-heading: -0.03em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;

  /* 
  =========
	  Theme
  =========
*/

  color-scheme: dark;

  --bg-primary: var(--dark-950);
  --bg-secondary: var(--dark-900);
  --bg-tertiary: var(--dark-850);

  --surface: var(--dark-800);
  --surface-elevated: var(--dark-700);
  --surface-hover: var(--graphite-800);

  --text-primary: var(--dark-50);
  --text-secondary: var(--dark-300);
  --text-muted: var(--dark-400);
  --text-disabled: var(--dark-500);

  --border: var(--dark-700);
  --border-strong: var(--dark-600);
  --divider: var(--dark-800);

  --brand: var(--noble-400);
  --brand-hover: var(--noble-300);
  --brand-active: var(--noble-500);

  --accent: var(--accent-500);
  --accent-hover: var(--accent-400);
  --accent-active: var(--accent-600);

  --success: var(--success-500);
  --warning: var(--warning-500);
  --danger: var(--danger-500);
  --info: var(--info-500);

  --focus-ring: var(--accent-500);
  --selection-bg: var(--accent-800);
  --selection-text: var(--dark-50);

  --logo-color: var(--noble-400);
}

/* 
  ==============
	  Light Mode
  ==============
*/

[data-theme="light"] {
  color-scheme: light;

  --bg-primary: var(--light-50);
  --bg-secondary: var(--light-100);
  --bg-tertiary: var(--white);

  --surface: var(--white);
  --surface-elevated: var(--white);
  --surface-hover: var(--light-100);

  --text-primary: var(--light-950);
  --text-secondary: var(--light-700);
  --text-muted: var(--light-600);
  --text-disabled: var(--light-500);

  --border: var(--light-200);
  --border-strong: var(--light-300);
  --divider: var(--light-100);

  --brand: var(--noble-600);
  --brand-hover: var(--noble-700);
  --brand-active: var(--noble-500);

  --accent: var(--accent-600);
  --accent-hover: var(--accent-700);
  --accent-active: var(--accent-500);

  --success: var(--success-700);
  --warning: var(--warning-700);
  --danger: var(--danger-700);
  --info: var(--info-700);

  --focus-ring: var(--accent-600);
  --selection-bg: var(--accent-100);
  --selection-text: var(--accent-950);

  --logo-color: var(--noble-600);
}

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

html {
  font-family: var(--font-primary);
  font-optical-sizing: auto;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: clip;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  transition:
    background-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

::selection {
  background: var(--selection-bg);
  color: var(--selection-text);
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

a {
  color: var(--brand);
  text-decoration: none;
}

a:hover {
  color: var(--brand-hover);
}

/* 
  ========
  	Text 
  ========
*/

.font-primary {
  font-family: var(--font-primary);
}

.font-display {
  font-family: var(--font-display);
}

.select-none {
  user-select: none;
}

.em-dash {
  user-select: none;
  letter-spacing: -1.35px;
  font-family: var(--font-display);
  color: var(--text-disabled);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-primary);
}

h1 {
  font-size: clamp(2.25rem, 4vw, 3rem);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-heading);
}

h2 {
  font-size: clamp(1.875rem, 3vw, 2.25rem);
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

h3 {
  font-size: clamp(1.5rem, 2.5vw, 1.75rem);
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

h4 {
  font-size: 1.375rem;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
}

h5 {
  font-size: 1.125rem;
  font-weight: var(--weight-semibold);
  line-height: 1.4;
}

p {
  margin: 0;
  color: var(--text-secondary);
}

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

.text-display {
  font-size: var(--text-display);
  font-weight: var(--weight-bold);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
}

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

.text-secondary {
  color: var(--text-secondary);
}

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

.text-brand {
  color: var(--brand);
}

.text-accent {
  color: var(--accent);
}

.text-success {
  color: var(--success);
}

.text-warning {
  color: var(--warning);
}

.text-danger {
  color: var(--danger);
}

.text-info {
  color: var(--info);
}

/* 
  ========
  	Logo
  ========
*/

.noble-logo {
  color: var(--logo-color);
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: var(--weight-bold);
  line-height: 0.9;
  letter-spacing: -0.065em;
}

.noble-tagline {
  color: var(--text-muted);
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.08em;
}

/* 
  ==========
	  Layout
  ==========
*/

.center-horizontal,
.center-vertical {
  position: absolute;
  white-space: nowrap;
  translate: var(--center-x, 0) var(--center-y, 0);
}

.center-horizontal {
  left: 50%;
  --center-x: -50%;
}

.center-vertical {
  top: 50%;
  --center-y: -50%;
}

/*
  ===========
	  Section
  ===========
*/

.section {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
}

.section-h-25 {
  min-height: 25vh;
  min-height: 25svh;
}
.section-h-50 {
  min-height: 50vh;
  min-height: 50svh;
}
.section-h-75 {
  min-height: 75vh;
  min-height: 75svh;
}
.section-h-150 {
  min-height: 150vh;
  min-height: 150svh;
}
.section-h-200 {
  min-height: 200vh;
  min-height: 200svh;
}
.section-h-300 {
  min-height: 300vh;
  min-height: 300svh;
}
.section-h-400 {
  min-height: 400vh;
  min-height: 400svh;
}
.section-h-500 {
  min-height: 500vh;
  min-height: 500svh;
}
.section-h-100 {
  min-height: 100vh;
  min-height: 100svh;
}

/* 
  ========
	  Move
  ========
*/

[class*="move-down-"],
[class*="move-up-"] {
  position: absolute;
  translate: var(--center-x, 0) var(--center-y, 0);
}

.move-down-5 {
  top: 0.5%;
  --center-y: -0.5%;
}
.move-down-10 {
  top: 1%;
  --center-y: -1%;
}
.move-down-15 {
  top: 1.5%;
  --center-y: -1.5%;
}
.move-down-20 {
  top: 2%;
  --center-y: -2%;
}
.move-down-25 {
  top: 2.5%;
  --center-y: -2.5%;
}
.move-down-30 {
  top: 3%;
  --center-y: -3%;
}
.move-down-35 {
  top: 3.5%;
  --center-y: -3.5%;
}
.move-down-40 {
  top: 4%;
  --center-y: -4%;
}
.move-down-45 {
  top: 4.5%;
  --center-y: -4.5%;
}
.move-down-50 {
  top: 5%;
  --center-y: -5%;
}
.move-down-55 {
  top: 5.5%;
  --center-y: -5.5%;
}
.move-down-60 {
  top: 6%;
  --center-y: -6%;
}
.move-down-65 {
  top: 6.5%;
  --center-y: -6.5%;
}
.move-down-70 {
  top: 7%;
  --center-y: -7%;
}
.move-down-75 {
  top: 7.5%;
  --center-y: -7.5%;
}
.move-down-80 {
  top: 8%;
  --center-y: -8%;
}
.move-down-85 {
  top: 8.5%;
  --center-y: -8.5%;
}
.move-down-90 {
  top: 9%;
  --center-y: -9%;
}
.move-down-95 {
  top: 9.5%;
  --center-y: -9.5%;
}
.move-down-100 {
  top: 10%;
  --center-y: -10%;
}
.move-down-125 {
  top: 12.5%;
  --center-y: -12.5%;
}
.move-down-150 {
  top: 15%;
  --center-y: -15%;
}
.move-down-175 {
  top: 17.5%;
  --center-y: -17.5%;
}
.move-down-200 {
  top: 20%;
  --center-y: -20%;
}
.move-down-225 {
  top: 22.5%;
  --center-y: -22.5%;
}
.move-down-250 {
  top: 25%;
  --center-y: -25%;
}
.move-down-275 {
  top: 27.5%;
  --center-y: -27.5%;
}
.move-down-300 {
  top: 30%;
  --center-y: -30%;
}
.move-down-325 {
  top: 32.5%;
  --center-y: -32.5%;
}
.move-down-350 {
  top: 35%;
  --center-y: -35%;
}
.move-down-375 {
  top: 37.5%;
  --center-y: -37.5%;
}
.move-down-400 {
  top: 40%;
  --center-y: -40%;
}
.move-down-425 {
  top: 42.5%;
  --center-y: -42.5%;
}
.move-down-450 {
  top: 45%;
  --center-y: -45%;
}
.move-down-475 {
  top: 47.5%;
  --center-y: -47.5%;
}
.move-down-500 {
  top: 50%;
  --center-y: -50%;
}
.move-down-525 {
  top: 52.5%;
  --center-y: -52.5%;
}
.move-down-550 {
  top: 55%;
  --center-y: -55%;
}
.move-down-575 {
  top: 57.5%;
  --center-y: -57.5%;
}
.move-down-600 {
  top: 60%;
  --center-y: -60%;
}
.move-down-625 {
  top: 62.5%;
  --center-y: -62.5%;
}
.move-down-650 {
  top: 65%;
  --center-y: -65%;
}
.move-down-675 {
  top: 67.5%;
  --center-y: -67.5%;
}
.move-down-700 {
  top: 70%;
  --center-y: -70%;
}
.move-down-725 {
  top: 72.5%;
  --center-y: -72.5%;
}
.move-down-750 {
  top: 75%;
  --center-y: -75%;
}
.move-down-775 {
  top: 77.5%;
  --center-y: -77.5%;
}
.move-down-800 {
  top: 80%;
  --center-y: -80%;
}
.move-down-825 {
  top: 82.5%;
  --center-y: -82.5%;
}
.move-down-850 {
  top: 85%;
  --center-y: -85%;
}
.move-down-875 {
  top: 87.5%;
  --center-y: -87.5%;
}
.move-down-900 {
  top: 90%;
  --center-y: -90%;
}
.move-down-925 {
  top: 92.5%;
  --center-y: -92.5%;
}
.move-down-950 {
  top: 95%;
  --center-y: -95%;
}
.move-down-975 {
  top: 97.5%;
  --center-y: -97.5%;
}
.move-down-1000 {
  top: 100%;
  --center-y: -100%;
}

.move-up-5 {
  top: 99.5%;
  --center-y: -99.5%;
}
.move-up-10 {
  top: 99%;
  --center-y: -99%;
}
.move-up-15 {
  top: 98.5%;
  --center-y: -98.5%;
}
.move-up-20 {
  top: 98%;
  --center-y: -98%;
}
.move-up-25 {
  top: 97.5%;
  --center-y: -97.5%;
}
.move-up-30 {
  top: 97%;
  --center-y: -97%;
}
.move-up-35 {
  top: 96.5%;
  --center-y: -96.5%;
}
.move-up-40 {
  top: 96%;
  --center-y: -96%;
}
.move-up-45 {
  top: 95.5%;
  --center-y: -95.5%;
}
.move-up-50 {
  top: 95%;
  --center-y: -95%;
}
.move-up-55 {
  top: 94.5%;
  --center-y: -94.5%;
}
.move-up-60 {
  top: 94%;
  --center-y: -94%;
}
.move-up-65 {
  top: 93.5%;
  --center-y: -93.5%;
}
.move-up-70 {
  top: 93%;
  --center-y: -93%;
}
.move-up-75 {
  top: 92.5%;
  --center-y: -92.5%;
}
.move-up-80 {
  top: 92%;
  --center-y: -92%;
}
.move-up-85 {
  top: 91.5%;
  --center-y: -91.5%;
}
.move-up-90 {
  top: 91%;
  --center-y: -91%;
}
.move-up-95 {
  top: 90.5%;
  --center-y: -90.5%;
}
.move-up-100 {
  top: 90%;
  --center-y: -90%;
}
.move-up-125 {
  top: 87.5%;
  --center-y: -87.5%;
}
.move-up-150 {
  top: 85%;
  --center-y: -85%;
}
.move-up-175 {
  top: 82.5%;
  --center-y: -82.5%;
}
.move-up-200 {
  top: 80%;
  --center-y: -80%;
}
.move-up-225 {
  top: 77.5%;
  --center-y: -77.5%;
}
.move-up-250 {
  top: 75%;
  --center-y: -75%;
}
.move-up-275 {
  top: 72.5%;
  --center-y: -72.5%;
}
.move-up-300 {
  top: 70%;
  --center-y: -70%;
}
.move-up-325 {
  top: 67.5%;
  --center-y: -67.5%;
}
.move-up-350 {
  top: 65%;
  --center-y: -65%;
}
.move-up-375 {
  top: 62.5%;
  --center-y: -62.5%;
}
.move-up-400 {
  top: 60%;
  --center-y: -60%;
}
.move-up-425 {
  top: 57.5%;
  --center-y: -57.5%;
}
.move-up-450 {
  top: 55%;
  --center-y: -55%;
}
.move-up-475 {
  top: 52.5%;
  --center-y: -52.5%;
}
.move-up-500 {
  top: 50%;
  --center-y: -50%;
}
.move-up-525 {
  top: 47.5%;
  --center-y: -47.5%;
}
.move-up-550 {
  top: 45%;
  --center-y: -45%;
}
.move-up-575 {
  top: 42.5%;
  --center-y: -42.5%;
}
.move-up-600 {
  top: 40%;
  --center-y: -40%;
}
.move-up-625 {
  top: 37.5%;
  --center-y: -37.5%;
}
.move-up-650 {
  top: 35%;
  --center-y: -35%;
}
.move-up-675 {
  top: 32.5%;
  --center-y: -32.5%;
}
.move-up-700 {
  top: 30%;
  --center-y: -30%;
}
.move-up-725 {
  top: 27.5%;
  --center-y: -27.5%;
}
.move-up-750 {
  top: 25%;
  --center-y: -25%;
}
.move-up-775 {
  top: 22.5%;
  --center-y: -22.5%;
}
.move-up-800 {
  top: 20%;
  --center-y: -20%;
}
.move-up-825 {
  top: 17.5%;
  --center-y: -17.5%;
}
.move-up-850 {
  top: 15%;
  --center-y: -15%;
}
.move-up-875 {
  top: 12.5%;
  --center-y: -12.5%;
}
.move-up-900 {
  top: 10%;
  --center-y: -10%;
}
.move-up-925 {
  top: 7.5%;
  --center-y: -7.5%;
}
.move-up-950 {
  top: 5%;
  --center-y: -5%;
}
.move-up-975 {
  top: 2.5%;
  --center-y: -2.5%;
}
.move-up-1000 {
  top: 0%;
  --center-y: -0%;
}

.move-right-5 {
  margin-left: min(5px, 50vw);
}
.move-right-10 {
  margin-left: min(10px, 50vw);
}
.move-right-15 {
  margin-left: min(15px, 50vw);
}
.move-right-20 {
  margin-left: min(20px, 50vw);
}
.move-right-25 {
  margin-left: min(25px, 50vw);
}
.move-right-30 {
  margin-left: min(30px, 50vw);
}
.move-right-35 {
  margin-left: min(35px, 50vw);
}
.move-right-40 {
  margin-left: min(40px, 50vw);
}
.move-right-45 {
  margin-left: min(45px, 50vw);
}
.move-right-50 {
  margin-left: min(50px, 50vw);
}
.move-right-55 {
  margin-left: min(55px, 50vw);
}
.move-right-60 {
  margin-left: min(60px, 50vw);
}
.move-right-65 {
  margin-left: min(65px, 50vw);
}
.move-right-70 {
  margin-left: min(70px, 50vw);
}
.move-right-75 {
  margin-left: min(75px, 50vw);
}
.move-right-80 {
  margin-left: min(80px, 50vw);
}
.move-right-85 {
  margin-left: min(85px, 50vw);
}
.move-right-90 {
  margin-left: min(90px, 50vw);
}
.move-right-95 {
  margin-left: min(95px, 50vw);
}
.move-right-100 {
  margin-left: min(100px, 50vw);
}
.move-right-125 {
  margin-left: min(125px, 50vw);
}
.move-right-150 {
  margin-left: min(150px, 50vw);
}
.move-right-175 {
  margin-left: min(175px, 50vw);
}
.move-right-200 {
  margin-left: min(200px, 50vw);
}
.move-right-225 {
  margin-left: min(225px, 50vw);
}
.move-right-250 {
  margin-left: min(250px, 50vw);
}
.move-right-300 {
  margin-left: min(300px, 50vw);
}
.move-right-350 {
  margin-left: min(350px, 50vw);
}
.move-right-400 {
  margin-left: min(400px, 50vw);
}
.move-right-450 {
  margin-left: min(450px, 50vw);
}
.move-right-500 {
  margin-left: min(500px, 50vw);
}

.move-left-5 {
  margin-left: calc(min(5px, 50vw) * -1);
}
.move-left-10 {
  margin-left: calc(min(10px, 50vw) * -1);
}
.move-left-15 {
  margin-left: calc(min(15px, 50vw) * -1);
}
.move-left-20 {
  margin-left: calc(min(20px, 50vw) * -1);
}
.move-left-25 {
  margin-left: calc(min(25px, 50vw) * -1);
}
.move-left-30 {
  margin-left: calc(min(30px, 50vw) * -1);
}
.move-left-35 {
  margin-left: calc(min(35px, 50vw) * -1);
}
.move-left-40 {
  margin-left: calc(min(40px, 50vw) * -1);
}
.move-left-45 {
  margin-left: calc(min(45px, 50vw) * -1);
}
.move-left-50 {
  margin-left: calc(min(50px, 50vw) * -1);
}
.move-left-55 {
  margin-left: calc(min(55px, 50vw) * -1);
}
.move-left-60 {
  margin-left: calc(min(60px, 50vw) * -1);
}
.move-left-65 {
  margin-left: calc(min(65px, 50vw) * -1);
}
.move-left-70 {
  margin-left: calc(min(70px, 50vw) * -1);
}
.move-left-75 {
  margin-left: calc(min(75px, 50vw) * -1);
}
.move-left-80 {
  margin-left: calc(min(80px, 50vw) * -1);
}
.move-left-85 {
  margin-left: calc(min(85px, 50vw) * -1);
}
.move-left-90 {
  margin-left: calc(min(90px, 50vw) * -1);
}
.move-left-95 {
  margin-left: calc(min(95px, 50vw) * -1);
}
.move-left-100 {
  margin-left: calc(min(100px, 50vw) * -1);
}
.move-left-125 {
  margin-left: calc(min(125px, 50vw) * -1);
}
.move-left-150 {
  margin-left: calc(min(150px, 50vw) * -1);
}
.move-left-175 {
  margin-left: calc(min(175px, 50vw) * -1);
}
.move-left-200 {
  margin-left: calc(min(200px, 50vw) * -1);
}
.move-left-225 {
  margin-left: calc(min(225px, 50vw) * -1);
}
.move-left-250 {
  margin-left: calc(min(250px, 50vw) * -1);
}
.move-left-300 {
  margin-left: calc(min(300px, 50vw) * -1);
}
.move-left-350 {
  margin-left: calc(min(350px, 50vw) * -1);
}
.move-left-400 {
  margin-left: calc(min(400px, 50vw) * -1);
}
.move-left-450 {
  margin-left: calc(min(450px, 50vw) * -1);
}
.move-left-500 {
  margin-left: calc(min(500px, 50vw) * -1);
}

/* 
  =========
	  Scale
  =========
*/

.scale-1 {
  font-size: min(1rem, 9vw);
  white-space: nowrap;
}
.scale-2 {
  font-size: min(2rem, 9vw);
  white-space: nowrap;
}
.scale-3 {
  font-size: min(3rem, 9vw);
  white-space: nowrap;
}
.scale-4 {
  font-size: min(4rem, 9vw);
  white-space: nowrap;
}
.scale-5 {
  font-size: min(5rem, 9vw);
  white-space: nowrap;
}
.scale-6 {
  font-size: min(6rem, 9vw);
  white-space: nowrap;
}
.scale-7 {
  font-size: min(7rem, 9vw);
  white-space: nowrap;
}
.scale-8 {
  font-size: min(8rem, 9vw);
  white-space: nowrap;
}
.scale-9 {
  font-size: min(9rem, 9vw);
  white-space: nowrap;
}
.scale-10 {
  font-size: min(10rem, 9vw);
  white-space: nowrap;
}
.scale-12 {
  font-size: min(12rem, 9vw);
  white-space: nowrap;
}
.scale-16 {
  font-size: min(16rem, 9vw);
  white-space: nowrap;
}

/*
  ========
	  Glow
  ========
*/

.glow-brand-1 {
  filter: drop-shadow(
      0 0 calc(4px + 0.05em)
        color-mix(in srgb, var(--accent-500) 20%, transparent)
    )
    drop-shadow(
      0 0 min(calc(14px + 0.2em), 36px)
        color-mix(in srgb, var(--accent-500) 20%, transparent)
    );
}
.glow-brand-2 {
  filter: drop-shadow(
      0 0 calc(4px + 0.05em)
        color-mix(in srgb, var(--accent-500) 40%, transparent)
    )
    drop-shadow(
      0 0 min(calc(14px + 0.2em), 36px)
        color-mix(in srgb, var(--accent-500) 40%, transparent)
    );
}
.glow-brand-3 {
  filter: drop-shadow(
      0 0 calc(4px + 0.05em)
        color-mix(in srgb, var(--accent-500) 60%, transparent)
    )
    drop-shadow(
      0 0 min(calc(14px + 0.2em), 36px)
        color-mix(in srgb, var(--accent-500) 60%, transparent)
    );
}
.glow-brand-4 {
  filter: drop-shadow(
      0 0 calc(4px + 0.05em)
        color-mix(in srgb, var(--accent-500) 80%, transparent)
    )
    drop-shadow(
      0 0 min(calc(14px + 0.2em), 36px)
        color-mix(in srgb, var(--accent-500) 80%, transparent)
    );
}
.glow-brand-5 {
  filter: drop-shadow(
      0 0 calc(4px + 0.05em)
        color-mix(in srgb, var(--accent-500) 100%, transparent)
    )
    drop-shadow(
      0 0 min(calc(14px + 0.2em), 36px)
        color-mix(in srgb, var(--accent-500) 100%, transparent)
    );
}

.glow-accent-1 {
  filter: drop-shadow(
      0 0 calc(4px + 0.05em)
        color-mix(in srgb, var(--accent-500) 20%, transparent)
    )
    drop-shadow(
      0 0 min(calc(14px + 0.2em), 36px)
        color-mix(in srgb, var(--accent-500) 20%, transparent)
    );
}
.glow-accent-2 {
  filter: drop-shadow(
      0 0 calc(4px + 0.05em)
        color-mix(in srgb, var(--accent-500) 40%, transparent)
    )
    drop-shadow(
      0 0 min(calc(14px + 0.2em), 36px)
        color-mix(in srgb, var(--accent-500) 40%, transparent)
    );
}
.glow-accent-3 {
  filter: drop-shadow(
      0 0 calc(4px + 0.05em)
        color-mix(in srgb, var(--accent-500) 60%, transparent)
    )
    drop-shadow(
      0 0 min(calc(14px + 0.2em), 36px)
        color-mix(in srgb, var(--accent-500) 60%, transparent)
    );
}
.glow-accent-4 {
  filter: drop-shadow(
      0 0 calc(4px + 0.05em)
        color-mix(in srgb, var(--accent-500) 80%, transparent)
    )
    drop-shadow(
      0 0 min(calc(14px + 0.2em), 36px)
        color-mix(in srgb, var(--accent-500) 80%, transparent)
    );
}
.glow-accent-5 {
  filter: drop-shadow(
      0 0 calc(4px + 0.05em)
        color-mix(in srgb, var(--accent-500) 100%, transparent)
    )
    drop-shadow(
      0 0 min(calc(14px + 0.2em), 36px)
        color-mix(in srgb, var(--accent-500) 100%, transparent)
    );
}

.glow-success-1 {
  filter: drop-shadow(
      0 0 calc(4px + 0.05em)
        color-mix(in srgb, var(--success-500) 20%, transparent)
    )
    drop-shadow(
      0 0 min(calc(14px + 0.2em), 36px)
        color-mix(in srgb, var(--success-500) 20%, transparent)
    );
}
.glow-success-2 {
  filter: drop-shadow(
      0 0 calc(4px + 0.05em)
        color-mix(in srgb, var(--success-500) 40%, transparent)
    )
    drop-shadow(
      0 0 min(calc(14px + 0.2em), 36px)
        color-mix(in srgb, var(--success-500) 40%, transparent)
    );
}
.glow-success-3 {
  filter: drop-shadow(
      0 0 calc(4px + 0.05em)
        color-mix(in srgb, var(--success-500) 60%, transparent)
    )
    drop-shadow(
      0 0 min(calc(14px + 0.2em), 36px)
        color-mix(in srgb, var(--success-500) 60%, transparent)
    );
}
.glow-success-4 {
  filter: drop-shadow(
      0 0 calc(4px + 0.05em)
        color-mix(in srgb, var(--success-500) 80%, transparent)
    )
    drop-shadow(
      0 0 min(calc(14px + 0.2em), 36px)
        color-mix(in srgb, var(--success-500) 80%, transparent)
    );
}
.glow-success-5 {
  filter: drop-shadow(
      0 0 calc(4px + 0.05em)
        color-mix(in srgb, var(--success-500) 100%, transparent)
    )
    drop-shadow(
      0 0 min(calc(14px + 0.2em), 36px)
        color-mix(in srgb, var(--success-500) 100%, transparent)
    );
}

.glow-warning-1 {
  filter: drop-shadow(
      0 0 calc(4px + 0.05em)
        color-mix(in srgb, var(--warning-500) 20%, transparent)
    )
    drop-shadow(
      0 0 min(calc(14px + 0.2em), 36px)
        color-mix(in srgb, var(--warning-500) 20%, transparent)
    );
}
.glow-warning-2 {
  filter: drop-shadow(
      0 0 calc(4px + 0.05em)
        color-mix(in srgb, var(--warning-500) 40%, transparent)
    )
    drop-shadow(
      0 0 min(calc(14px + 0.2em), 36px)
        color-mix(in srgb, var(--warning-500) 40%, transparent)
    );
}
.glow-warning-3 {
  filter: drop-shadow(
      0 0 calc(4px + 0.05em)
        color-mix(in srgb, var(--warning-500) 60%, transparent)
    )
    drop-shadow(
      0 0 min(calc(14px + 0.2em), 36px)
        color-mix(in srgb, var(--warning-500) 60%, transparent)
    );
}
.glow-warning-4 {
  filter: drop-shadow(
      0 0 calc(4px + 0.05em)
        color-mix(in srgb, var(--warning-500) 80%, transparent)
    )
    drop-shadow(
      0 0 min(calc(14px + 0.2em), 36px)
        color-mix(in srgb, var(--warning-500) 80%, transparent)
    );
}
.glow-warning-5 {
  filter: drop-shadow(
      0 0 calc(4px + 0.05em)
        color-mix(in srgb, var(--warning-500) 100%, transparent)
    )
    drop-shadow(
      0 0 min(calc(14px + 0.2em), 36px)
        color-mix(in srgb, var(--warning-500) 100%, transparent)
    );
}

.glow-danger-1 {
  filter: drop-shadow(
      0 0 calc(4px + 0.05em)
        color-mix(in srgb, var(--danger-500) 20%, transparent)
    )
    drop-shadow(
      0 0 min(calc(14px + 0.2em), 36px)
        color-mix(in srgb, var(--danger-500) 20%, transparent)
    );
}
.glow-danger-2 {
  filter: drop-shadow(
      0 0 calc(4px + 0.05em)
        color-mix(in srgb, var(--danger-500) 40%, transparent)
    )
    drop-shadow(
      0 0 min(calc(14px + 0.2em), 36px)
        color-mix(in srgb, var(--danger-500) 40%, transparent)
    );
}
.glow-danger-3 {
  filter: drop-shadow(
      0 0 calc(4px + 0.05em)
        color-mix(in srgb, var(--danger-500) 60%, transparent)
    )
    drop-shadow(
      0 0 min(calc(14px + 0.2em), 36px)
        color-mix(in srgb, var(--danger-500) 60%, transparent)
    );
}
.glow-danger-4 {
  filter: drop-shadow(
      0 0 calc(4px + 0.05em)
        color-mix(in srgb, var(--danger-500) 80%, transparent)
    )
    drop-shadow(
      0 0 min(calc(14px + 0.2em), 36px)
        color-mix(in srgb, var(--danger-500) 80%, transparent)
    );
}
.glow-danger-5 {
  filter: drop-shadow(
      0 0 calc(4px + 0.05em)
        color-mix(in srgb, var(--danger-500) 100%, transparent)
    )
    drop-shadow(
      0 0 min(calc(14px + 0.2em), 36px)
        color-mix(in srgb, var(--danger-500) 100%, transparent)
    );
}

.glow-info-1 {
  filter: drop-shadow(
      0 0 calc(4px + 0.05em)
        color-mix(in srgb, var(--info-500) 20%, transparent)
    )
    drop-shadow(
      0 0 min(calc(14px + 0.2em), 36px)
        color-mix(in srgb, var(--info-500) 20%, transparent)
    );
}
.glow-info-2 {
  filter: drop-shadow(
      0 0 calc(4px + 0.05em)
        color-mix(in srgb, var(--info-500) 40%, transparent)
    )
    drop-shadow(
      0 0 min(calc(14px + 0.2em), 36px)
        color-mix(in srgb, var(--info-500) 40%, transparent)
    );
}
.glow-info-3 {
  filter: drop-shadow(
      0 0 calc(4px + 0.05em)
        color-mix(in srgb, var(--info-500) 60%, transparent)
    )
    drop-shadow(
      0 0 min(calc(14px + 0.2em), 36px)
        color-mix(in srgb, var(--info-500) 60%, transparent)
    );
}
.glow-info-4 {
  filter: drop-shadow(
      0 0 calc(4px + 0.05em)
        color-mix(in srgb, var(--info-500) 80%, transparent)
    )
    drop-shadow(
      0 0 min(calc(14px + 0.2em), 36px)
        color-mix(in srgb, var(--info-500) 80%, transparent)
    );
}
.glow-info-5 {
  filter: drop-shadow(
      0 0 calc(4px + 0.05em)
        color-mix(in srgb, var(--info-500) 100%, transparent)
    )
    drop-shadow(
      0 0 min(calc(14px + 0.2em), 36px)
        color-mix(in srgb, var(--info-500) 100%, transparent)
    );
}

.glow-text-1 {
  filter: drop-shadow(
      0 0 calc(4px + 0.05em)
        color-mix(in srgb, var(--text-primary) 20%, transparent)
    )
    drop-shadow(
      0 0 min(calc(14px + 0.2em), 36px)
        color-mix(in srgb, var(--text-primary) 20%, transparent)
    );
}
.glow-text-2 {
  filter: drop-shadow(
      0 0 calc(4px + 0.05em)
        color-mix(in srgb, var(--text-primary) 40%, transparent)
    )
    drop-shadow(
      0 0 min(calc(14px + 0.2em), 36px)
        color-mix(in srgb, var(--text-primary) 40%, transparent)
    );
}
.glow-text-3 {
  filter: drop-shadow(
      0 0 calc(4px + 0.05em)
        color-mix(in srgb, var(--text-primary) 60%, transparent)
    )
    drop-shadow(
      0 0 min(calc(14px + 0.2em), 36px)
        color-mix(in srgb, var(--text-primary) 60%, transparent)
    );
}
.glow-text-4 {
  filter: drop-shadow(
      0 0 calc(4px + 0.05em)
        color-mix(in srgb, var(--text-primary) 80%, transparent)
    )
    drop-shadow(
      0 0 min(calc(14px + 0.2em), 36px)
        color-mix(in srgb, var(--text-primary) 80%, transparent)
    );
}
.glow-text-5 {
  filter: drop-shadow(
      0 0 calc(4px + 0.05em)
        color-mix(in srgb, var(--text-primary) 100%, transparent)
    )
    drop-shadow(
      0 0 min(calc(14px + 0.2em), 36px)
        color-mix(in srgb, var(--text-primary) 100%, transparent)
    );
}

/* 
  =======
	  SVG
  =======
*/

.svg {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

/*
  ========
	  Grow
  ========
*/

[class*="grow-"] {
  --grow: 1.05;
  will-change: scale;
  transition: scale 0.4s cubic-bezier(0.28, 0.11, 0.32, 1);
}

.grow-1 {
  --grow: 1.01;
}
.grow-2 {
  --grow: 1.02;
}
.grow-3 {
  --grow: 1.03;
}
.grow-4 {
  --grow: 1.04;
}
.grow-5 {
  --grow: 1.05;
}
.grow-6 {
  --grow: 1.06;
}
.grow-7 {
  --grow: 1.07;
}
.grow-8 {
  --grow: 1.08;
}
.grow-9 {
  --grow: 1.09;
}
.grow-10 {
  --grow: 1.1;
}
.grow-11 {
  --grow: 1.11;
}
.grow-12 {
  --grow: 1.12;
}
.grow-13 {
  --grow: 1.13;
}
.grow-14 {
  --grow: 1.14;
}
.grow-15 {
  --grow: 1.15;
}
.grow-16 {
  --grow: 1.16;
}
.grow-17 {
  --grow: 1.17;
}
.grow-18 {
  --grow: 1.18;
}
.grow-19 {
  --grow: 1.19;
}
.grow-20 {
  --grow: 1.2;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  [class*="grow-"]:hover {
    scale: var(--grow);
    transition: scale 0.66s
      linear(
        0,
        0.027,
        0.097,
        0.192,
        0.302,
        0.415,
        0.525,
        0.627,
        0.719,
        0.798,
        0.865,
        0.919,
        0.961,
        0.993,
        1.016,
        1.031,
        1.041,
        1.045,
        1.046,
        1.044,
        1.041,
        1.036,
        1.031,
        1.026,
        1.021,
        1.016,
        1.012,
        1.009,
        1.006,
        1.003,
        1.001,
        1
      );
  }
}

/*
  =========
	  Shine
  =========
*/

@keyframes shine-sweep {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

@keyframes shine-sweep-loop {
  0% {
    transform: translateX(-100%);
  }
  25% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes shine-text-sweep {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0% 0;
  }
}

@keyframes shine-text-sweep-loop {
  0% {
    background-position: 100% 0;
  }
  25% {
    background-position: 0% 0;
  }
  100% {
    background-position: 0% 0;
  }
}

.shine-1 {
  --shine-level: 1;
}
.shine-2 {
  --shine-level: 2;
}
.shine-3 {
  --shine-level: 3;
}
.shine-4 {
  --shine-level: 4;
}
.shine-5 {
  --shine-level: 5;
}

.shine-rect {
  opacity: calc(var(--shine-level, 3) * 0.14);
  transform: translateX(-100%);
  transform-box: fill-box;
  animation: var(--shine-animation, none);
}

.shine-btn {
  overflow: hidden;
  isolation: isolate;
}

:where(.shine-btn) {
  position: relative;
}

.shine-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgb(255 255 255 / calc(var(--shine-level, 3) * 0.07)) 50%,
    transparent 65%
  );
  transform: translateX(-100%);
  animation: var(--shine-animation, none);
}

.shine-text {
  background-image: linear-gradient(
    105deg,
    currentColor 0 44%,
    color-mix(
        in srgb,
        var(--shine-color, #ffffff) calc(var(--shine-level, 3) * 20%),
        currentColor
      )
      50%,
    currentColor 56% 100%
  );
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .shine:hover,
  .shine-btn:hover {
    --shine-animation: shine-sweep 1s cubic-bezier(0.45, 0, 0.2, 1) both;
  }

  .shine-text:hover {
    animation: shine-text-sweep 1s cubic-bezier(0.45, 0, 0.2, 1) both;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .shine-loop,
  .shine-btn-loop {
    --shine-animation: shine-sweep-loop 4s cubic-bezier(0.45, 0, 0.2, 1)
      infinite both;
  }

  .shine-text-loop {
    animation: shine-text-sweep-loop 4s cubic-bezier(0.45, 0, 0.2, 1) infinite
      both;
  }
}

/*
  =========
	  Stats
  =========
*/

.stats {
  width: min(92vw, 46rem);
  overflow: hidden;
  white-space: normal;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--accent) 7%, var(--surface)),
    var(--surface) 55%
  );
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: 1.5rem;
}

.stats-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1.1rem 1.5rem;
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.stats-dot {
  width: 0.55rem;
  height: 0.55rem;
  flex-shrink: 0;
  background: var(--success);
  border-radius: 50%;
  box-shadow: 0 0 0.6rem color-mix(in srgb, var(--success) 70%, transparent);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border);
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  min-width: 0;
  padding: 1.75rem 0.75rem 2rem;
}

.stat + .stat {
  border-left: 1px solid var(--border);
}

.stat-label {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
}

.stat-value {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5vw, 2.75rem);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: var(--tracking-heading);
}

@media (max-width: 480px) {
  .stats-header {
    padding: 0.9rem 1rem;
  }

  .stat {
    gap: 0.6rem;
    padding: 1.25rem 0.5rem 1.4rem;
  }

  .stat-label {
    letter-spacing: 0.08em;
  }
}

/*
  =========
	  Other
  =========
*/

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.7rem 1.1rem;

  border: 1px solid transparent;
  border-radius: 0.65rem;

  font-family: var(--font-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);

  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-press) var(--ease-out);
}

.button:active:not(:disabled) {
  transform: scale(var(--press-scale));
}

.button-primary {
  background: var(--accent);
  color: #ffffff;
}

.button-primary:hover {
  background: var(--accent-hover);
  color: #ffffff;
}

.button-secondary {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-primary);
}

.button-secondary:hover {
  background: var(--surface-hover);
}

.button-ghost {
  background: transparent;
  color: var(--text-secondary);
}

.button-ghost:hover {
  background: var(--surface);
  color: var(--text-primary);
}

.card {
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.875rem;
}

.panel {
  padding: 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
}

.divider {
  height: 1px;
  background: var(--divider);
  border: 0;
}

input,
textarea,
select {
  width: 100%;
  padding: 0.75rem 0.875rem;

  background: var(--bg-secondary);
  color: var(--text-primary);

  border: 1px solid var(--border);
  border-radius: 0.625rem;

  font-family: var(--font-primary);
  font-size: var(--text-sm);
}

input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 20%, transparent);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.badge-success {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 12%, transparent);
}

.badge-warning {
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 12%, transparent);
}

.badge-danger {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}

.badge-info {
  color: var(--info);
  background: color-mix(in srgb, var(--info) 12%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion='full']) *,
  :root:not([data-motion='full']) *::before,
  :root:not([data-motion='full']) *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}