:root {
  /* Colors: */
  --clr-green: #54e6af;
  --clr-blue-950: #121725;
  --clr-blue-900: #2c344b;
  --clr-blue-600: #5a668a;
  --clr-blue-300: #c2cbe5;
  --clr-red: #fb3e3e;

  /* Semantic colors */
  --clr-attribution: var(--clr-blue-600);

  /* Font sizes (in rem) */
  --fs-xs: 0.75rem; /* 12px */
  --fs-sm: 0.875rem; /* 14px */
  --fs-md: 1.125rem; /* 18px body text */
  --fs-lg: 3rem; /* 48px */

  /* Font weights */
  --fw-light: 300;
  --fw-bold: 700;

  /* Containers */
  --container-width-content: 46rem; /* 736px */
  --container-width-img: 60rem; /* 960px */
  --container-width-description: 28rem; /* 448px */

  /* Spacing scale (rem) */
  --space-2xs: 0.25rem; /* 4px */
  --space-xs: 0.5rem; /* 8px */
  --space-sm: 1.5rem; /* 24px */
  --space-md: 2.5rem; /* 40px */
  --space-lg: 2.75rem; /* 44px */
  --space-xl: 3.5rem; /* 56px */
  --space-2xl: 5.5rem; /* 88px */
  --space-3xl: 6.5rem; /* 104px */
  --space-4xl: 9.563rem; /* 153px */
  --space-5xl: 10rem; /* 160px */

  /* Border-radius scale */
  --radius-capsule: 1.75rem; /* 28px corners */
  --radius-circle: 50%; /* circular elements */

  /* Line heights */
  --lh-base: 1.5;
  --lh-title: 1.2;
  --lh-button: 2;
}

/* 
********************************
SELF-HOSTING FONT:
********************************
*/

/* VARIABLE FONT: */
@font-face {
  font-family: 'Chivo';
  src: url('/assets/fonts/Chivo-VariableFont_wght.woff2')
      format('woff2-variations'),
    url('/assets/fonts/Chivo-VariableFont_wght.woff') format('woff');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* 
********************************
GLOBAL CSS VALUES:
********************************
*/

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

* {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-weight: inherit;
}

body {
  font-family: 'Chivo', sans-serif;
  font-size: var(--fs-md);
  font-weight: var(--fw-light);
  line-height: var(--lh-base);
  letter-spacing: 0;

  color: var(--clr-blue-300);

  background-color: var(--clr-blue-950);
}

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

/* 
********************************
MAIN:
********************************
*/
/* Containers & Wrappers */
html,
body {
  overflow-x: hidden;
}

.wrapper {
  position: relative;
  max-width: 90rem; /* 1440px */
  margin: 9.563rem auto 4rem auto;
}

.hero {
  position: relative;
  width: 100%;
  margin-left: var(--space-5xl);
}

.hero__image-wrapper {
  position: absolute;
  top: -10rem; /* -160px */
  right: 0;
  width: 100%;
}

.hero__image-wrapper::after {
  content: '';
  background-image: url('/assets/images/desktop/bg-pattern-dots.svg');
  position: absolute;
  top: 37.5rem; /* 600px */
  right: 0;
  width: 14.5rem; /* 232px */
  height: 6.5rem; /* 104px */
}

.hero__image {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  height: 40.875rem; /* 654px */
  transform: translateX(3.125rem); /* 50px */
}

.logo {
  position: absolute;
  top: 0;
  left: 10rem; /* 160px */
  width: 8.428rem; /* 134.85px */
  height: 3.5rem; /* 56px */
  margin-bottom: var(--space-3xl);
}

.hero__content {
  max-width: var(--container-width-content);
  width: 100%;
  margin-top: 19.563rem; /* 313px */
  padding-top: var(--space-2xl);
  background-color: var(--clr-blue-950);
}

/* Texts */
.hero__title {
  margin-bottom: var(--space-sm);
  font-size: var(--fs-lg);
  line-height: var(--lh-title);
  text-transform: uppercase;
  color: var(--clr-green);
}

.hero__title span {
  color: white;
}

.hero__description {
  max-width: var(--container-width-description);
  width: 100%;
  margin-bottom: var(--space-md);
}

/* 
******
Hero Form:
******
*/
/* Default State */
.hero__form {
  max-width: var(--container-width-description);
  width: 100%;
  margin-bottom: 4rem; /* 64px */
}

.hero__form-group {
  position: relative;
}

.hero__input {
  width: 100%;
  height: 3.25rem; /* 52px */
  padding-left: var(--space-sm);
  padding-right: 12.5rem; /* 200px */

  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: white;
  caret-color: white;

  background-color: var(--clr-blue-900);
  border: none;
  border-radius: var(--radius-capsule);
}

.hero__input:focus-visible {
  outline: 2px solid var(--clr-blue-600);
  outline-offset: -2px;
}

.hero__input::placeholder {
  color: white;
  opacity: 0.5;
}

.hero__input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 125rem var(--clr-blue-900) inset;
  -webkit-text-fill-color: white;
}

.hero__button {
  position: absolute;
  top: 0;
  right: 0;
  width: 10.75rem; /* 172px */
  height: 2.75rem; /* 44px */
  margin-top: var(--space-2xs);
  margin-right: var(--space-2xs);

  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-transform: capitalize;

  background-color: var(--clr-green);
  border: none;
  border-radius: var(--radius-capsule);

  transition: background-color 0.2s ease;
}

.hero__button:hover {
  cursor: pointer;
  background-color: #a9f0d6;
}

.hero__button:active {
  transform: scale(0.99);
}

/* Feedback */
.hero__input-feedback {
  margin-left: 2rem; /* 32px */
  margin-top: var(--space-xs);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}
/* Error State */
.hero__input-outline--error {
  outline: 2px solid var(--clr-red);
}

.hero__input-feedback--error {
  color: var(--clr-red);
}

/* Success State */
.hero__input-outline--success {
  outline: 2px solid var(--clr-green);
}

.hero__input-feedback--success {
  color: var(--clr-green);
}

/* 
******
Hero Partners:
******
*/
.hero__partners {
  display: flex;
  gap: var(--space-md);
  padding-bottom: 0.25rem; /* 4px */
}

/* 
********************************
FOOTER:
********************************
*/
.attribution {
  text-align: center;
  margin: var(--space-md) 0;

  font-size: var(--fs-xs);
  color: var(--clr-attribution);
}

/* LINKS */
/* Default State */
.attribution a:link {
  color: var(--clr-attribution);
  text-decoration: none;
}

/* Visited State */
.attribution a:visited {
  color: var(--clr-attribution);
}

/* State On Hover / Whilst being clicked */
.attribution a:hover,
.attribution a:active {
  opacity: 0.75;
}

/* 
********************************
UTILITY CLASSES:
********************************
*/
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}