:root {
  interpolate-size: allow-keywords;
  /* Primary Colors */
  --primary-color: #648ef9;
  --primary-dark: #4169e1;
  --primary-light: #7adeff;
  --primary-lighter: #add8e6;

  /* Grayscale */
  --black-100: #000000;
  --black-200: #0b0b0b;
  --black-300: #161616;
  --black-400: #222222;
  --black-500: #2b2b2b;
  --black-600: #666666;
  --black-700: #525252;

  --white-100: #ffffff;
  --white-200: #f5f5f5;
  --white-300: #d9d9d9;

  --font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Helvetica Neue', Arial, sans-serif;

  --font-family-Roboto: 'Roboto', -apple-system, BlinkMacSystemFont,
    'Segoe UI', 'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  --logo-font-family: 'Sofia Sans Extra Condensed', -apple-system,
    BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial,
    sans-serif;
  --logo-font-size-laptop: 1.875rem;
  --logo-font-size-mobile: 1.5rem;
  --logo-font-weight: 900;
  --logo-font-line-height: 1.375rem;

  /* laptop typography */
  --hero-text-1-size-laptop: 3rem;
  /* 48px */
  --hero-text-1-weight-laptop: 700;

  --hero-text-2-primary-size-laptop: 2.5rem;
  /* 40px */
  --hero-text-2-primary-weight-laptop: 700;
  --hero-text-2-secondary-size-laptop: 2.5rem;
  /* 40px */
  --hero-text-2-secondary-weight-laptop: 300;

  --heading-text-1-size-laptop: 2rem;
  /* 32px */
  --heading-text-1-weight-laptop: 700;

  --heading-text-2-size-laptop: 2rem;
  /* 32px */
  --heading-text-2-weight-laptop: 600;

  --heading-text-3-size-laptop: 1.5rem;
  /* 24px */
  --heading-text-3-weight-laptop: 700;

  --heading-text-4-size-laptop: 1.5rem;
  /* 24px */
  --heading-text-4-weight-laptop: 600;

  --subheading-text-1-size-laptop: 1.125rem;
  /* 18px */
  --subheading-text-1-weight-laptop: 700;

  --subheading-text-2-size-laptop: 1.125rem;
  /* 18px */
  --subheading-text-2-weight-laptop: 600;

  --subheading-text-3-size-laptop: 1rem;
  /* 16px */
  --subheading-text-3-weight-laptop: 700;

  --subheading-text-4-size-laptop: 1rem;
  /* 16px */
  --subheading-text-4-weight-laptop: 600;

  --body-text-1-size-laptop: 1rem;
  /* 16px */
  --body-text-1-weight-laptop: 500;

  --body-text-2-size-laptop: 1rem;
  /* 16px */
  --body-text-2-weight-laptop: 400;

  --body-text-3-size-laptop: 0.875rem;
  /* 14px */
  --body-text-3-weight-laptop: 400;

  --body-text-4-size-laptop: 0.75rem;
  /* 12px */
  --body-text-4-weight-laptop: 400;

  /* mobile typography */
  --hero-text-1-size-mobile: 1.75rem;
  /* 28px */
  --hero-text-1-weight-mobile: 700;

  --hero-text-2-size-mobile: 1.75rem;
  /* 28px */
  --hero-text-2-weight-mobile: 300;

  --heading-text-1-size-mobile: 1.5rem;
  /* 24px */
  --heading-text-1-weight-mobile: 700;

  --heading-text-2-size-mobile: 1.5rem;
  /* 24px */
  --heading-text-2-weight-mobile: 600;

  --subheading-text-1-size-mobile: 1.125rem;
  /* 18px */
  --subheading-text-1-weight-mobile: 700;

  --subheading-text-2-size-mobile: 1.125rem;
  /* 18px */
  --subheading-text-2-weight-mobile: 600;

  --subheading-text-3-size-mobile: 1rem;
  /* 16px */
  --subheading-text-3-weight-mobile: 700;

  --subheading-text-4-size-mobile: 1rem;
  /* 16px */
  --subheading-text-4-weight-mobile: 600;

  --body-text-1-size-mobile: 1rem;
  /* 16px */
  --body-text-1-weight-mobile: 500;

  --body-text-2-size-mobile: 1rem;
  /* 16px */
  --body-text-2-weight-mobile: 400;

  --body-text-3-size-mobile: 0.875rem;
  /* 14px */
  --body-text-3-weight-mobile: 400;

  --body-text-4-size-mobile: 0.75rem;
  /* 12px */
  --body-text-4-weight-mobile: 400;
}

/* Reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-family);
}

/* Remove tap highlight on touch devices */
button,
input[type='button'],
input[type='submit'],
a {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

body {
  width: 100dvw;
  height: 100dvh;
  overflow: hidden;
  background-color: var(--black-300);
}

img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

.hero-text-1 {
  font-family: var(--font-family);
  font-size: var(--hero-text-1-size-laptop);
  font-weight: var(--hero-text-1-weight-laptop);
}

.hero-text-2-primary {
  font-family: var(--font-family);
  font-size: var(--hero-text-2-primary-size-laptop);
  font-weight: var(--hero-text-2-primary-weight-laptop);
}

.hero-text-2-secondary {
  font-family: var(--font-family);
  font-size: var(--hero-text-2-secondary-size-laptop);
  font-weight: var(--hero-text-2-secondary-weight-laptop);
}

.heading-text-1 {
  font-family: var(--font-family);
  font-size: var(--heading-text-1-size-laptop);
  font-weight: var(--heading-text-1-weight-laptop);
}

.heading-text-2 {
  font-family: var(--font-family);
  font-size: var(--heading-text-2-size-laptop);
  font-weight: var(--heading-text-2-weight-laptop);
}

.heading-text-3 {
  font-family: var(--font-family);
  font-size: var(--heading-text-3-size-laptop);
  font-weight: var(--heading-text-3-weight-laptop);
}

.heading-text-4 {
  font-family: var(--font-family);
  font-size: var(--heading-text-4-size-laptop);
  font-weight: var(--heading-text-4-weight-laptop);
}

.subheading-text-1 {
  font-family: var(--font-family);
  font-size: var(--subheading-text-1-size-laptop);
  font-weight: var(--subheading-text-1-weight-laptop);
}

.subheading-text-2 {
  font-family: var(--font-family);
  font-size: var(--subheading-text-2-size-laptop);
  font-weight: var(--subheading-text-2-weight-laptop);
}

.subheading-text-3 {
  font-family: var(--font-family);
  font-size: var(--subheading-text-3-size-laptop);
  font-weight: var(--subheading-text-3-weight-laptop);
}

.subheading-text-4 {
  font-family: var(--font-family);
  font-size: var(--subheading-text-4-size-laptop);
  font-weight: var(--subheading-text-4-weight-laptop);
}

.body-text-1 {
  font-family: var(--font-family);
  font-size: var(--body-text-1-size-laptop);
  font-weight: var(--body-text-1-weight-laptop);
}

.body-text-2 {
  font-family: var(--font-family);
  font-size: var(--body-text-2-size-laptop);
  font-weight: var(--body-text-2-weight-laptop);
}

.body-text-3 {
  font-family: var(--font-family);
  font-size: var(--body-text-3-size-laptop);
  font-weight: var(--body-text-3-weight-laptop);
}

.body-text-4 {
  font-family: var(--font-family);
  font-size: var(--body-text-4-size-laptop);
  font-weight: var(--body-text-4-weight-laptop);
}

@media (max-width: 768px) {

  .hero-text-1,
  .hero-text-2-primary {
    font-family: var(--font-family);
    font-size: var(--hero-text-1-size-mobile);
    font-weight: var(--hero-text-1-weight-mobile);
  }

  .hero-text-2-secondary {
    font-family: var(--font-family);
    font-size: var(--hero-text-2-size-mobile);
    font-weight: var(--hero-text-2-weight-mobile);
  }

  .heading-text-1 {
    font-family: var(--font-family);
    font-size: var(--heading-text-1-size-mobile);
    font-weight: var(--heading-text-1-weight-mobile);
  }

  .heading-text-2 {
    font-family: var(--font-family);
    font-size: var(--heading-text-2-size-mobile);
    font-weight: var(--heading-text-2-weight-mobile);
  }

  .subheading-text-1 {
    font-family: var(--font-family);
    font-size: var(--subheading-text-1-size-mobile);
    font-weight: var(--subheading-text-1-weight-mobile);
  }

  .subheading-text-2 {
    font-family: var(--font-family);
    font-size: var(--subheading-text-2-size-mobile);
    font-weight: var(--subheading-text-2-weight-mobile);
  }

  .subheading-text-3 {
    font-family: var(--font-family);
    font-size: var(--subheading-text-3-size-mobile);
    font-weight: var(--subheading-text-3-weight-mobile);
  }

  .subheading-text-4 {
    font-family: var(--font-family);
    font-size: var(--subheading-text-4-size-mobile);
    font-weight: var(--subheading-text-4-weight-mobile);
  }

  .body-text-1 {
    font-family: var(--font-family);
    font-size: var(--body-text-1-size-mobile);
    font-weight: var(--body-text-1-weight-mobile);
  }

  .body-text-2 {
    font-family: var(--font-family);
    font-size: var(--body-text-2-size-mobile);
    font-weight: var(--body-text-2-weight-mobile);
  }

  .body-text-3 {
    font-family: var(--font-family);
    font-size: var(--body-text-3-size-mobile);
    font-weight: var(--body-text-3-weight-mobile);
  }

  .body-text-4 {
    font-family: var(--font-family);
    font-size: var(--body-text-4-size-mobile);
    font-weight: var(--body-text-4-weight-mobile);
  }
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: var(--black-100);
}

.page-container {
  display: flex;
  flex-direction: column;
  background-color: var(--black-100);
}

.gradient-text {
  background: linear-gradient(270deg,
      var(--primary-dark) 0%,
      var(--primary-light) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-button {
  display: flex;
  padding: 12px 24px;
  align-items: center;
  justify-content: center;
  color: var(--black-100);
  line-height: 24px;
  letter-spacing: -0.25px;
  background: linear-gradient(270deg,
      var(--primary-dark) 0%,
      var(--primary-light) 100%);
  border: 0;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track:hover {
  background: var(--black-500);
}

::-webkit-scrollbar-track {
  background: var(--black-100);
}

::-webkit-scrollbar-thumb {
  background: var(--primary-dark);
  border-radius: 4px;
}

.popup {
  position: fixed;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 2px solid #444;
  padding: 1rem 2rem;
  z-index: 10000;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.popup.success {
  border-color: green;
}

.popup.error {
  border-color: red;
}

.popup button {
  margin-top: 10px;
}