/* =====================================================
   ROOT
===================================================== */

:root {

  --blue: #0877ff;
  --green: #00ed00;
  --yellow: #f5f500;
  --red: #f52b32;

  --black: #000;
  --dark: #070b11;

  --white: #f8f8f6;

  --muted: #9299a3;
}


* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


html {
  scroll-behavior: smooth;
}


body {

  background: #000;

  color: #fff;

  font-family:
    Inter,
    Arial,
    sans-serif;

  overflow-x: hidden;
}


a {
  color: inherit;
  text-decoration: none;
}


/* =====================================================
   NAVBAR
===================================================== */

.nav {

  height: 92px;

  display: flex;

  align-items: center;

  gap: 40px;

  padding: 0 32px;

  background: #000;

  border-bottom:
    1px solid
    rgba(255,255,255,.08);

  position: relative;

  z-index: 50;
}


.brand {

  min-width: 320px;

  display: grid;

  line-height: .88;
}


.brand-main {

  color: var(--red);

  font-size: 31px;

  font-weight: 800;

  letter-spacing: -1.5px;
}


.brand-accent {

  color: #fff;

  font-size: 31px;

  font-weight: 800;

  letter-spacing: -1.5px;
}


.brand small {

  margin-top: 5px;

  color:
    rgba(255,255,255,.65);

  font-size: 7px;

  letter-spacing: 1.1px;
}


.nav-links {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 28px;

  flex: 1;

  font-size: 14px;

  color:
    rgba(255,255,255,.8);
}


.nav-links a {

  transition: .2s;
}


.nav-links a:hover {

  color: #fff;
}


.nav-links a.active {

  color: var(--blue);
}


.nav-cta {

  padding: 23px 28px;

  background: var(--blue);

  font-size: 13px;

  font-weight: 800;

  letter-spacing: .5px;

  transition: .25s;
}


.nav-cta:hover {

  background: var(--green);

  color: #000;
}


.menu {

  display: none;

  background: none;

  border: 0;
}


.menu span {

  display: block;

  width: 24px;

  height: 2px;

  margin: 5px;

  background: #fff;
}


/* =====================================================
   CONTACT PAGE
===================================================== */

.contact-page {

  position: relative;

  background: #000;

  overflow: hidden;

  isolation: isolate;
}


.contact-page::before {

  content: "";

  position: absolute;

  inset: 0;

  background-image:
    linear-gradient(
      rgba(255,255,255,.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.025) 1px,
      transparent 1px
    );

  background-size: 70px 70px;

  opacity: .5;

  pointer-events: none;

  z-index: -5;
}


/* =====================================================
   DECORATIVE SHAPES
===================================================== */

.contact-shape {

  position: absolute;

  pointer-events: none;

  z-index: -2;
}


.contact-blue {

  width: 420px;

  height: 420px;

  right: -220px;

  top: 120px;

  background: var(--blue);

  border-radius:
    55% 45% 70% 30% /
    40% 60% 40% 60%;

  transform: rotate(20deg);

  opacity: .9;
}


.contact-green {

  width: 180px;

  height: 180px;

  left: -80px;

  top: 1050px;

  background: var(--green);

  border-radius:
    40% 60% 30% 70%;

  transform: rotate(-25deg);
}


.contact-star {

  position: absolute;

  right: 8%;

  top: 650px;

  color: var(--yellow);

  font-size: 100px;

  opacity: .9;

  z-index: -1;
}


/* =====================================================
   HERO
===================================================== */

.contact-hero {

  width:
    min(
      1200px,
      calc(100% - 80px)
    );

  margin: auto;

  padding:
    150px 0
    120px;
}


.contact-label {

  display: flex;

  align-items: center;

  gap: 14px;

  color: #858c96;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 3px;

  margin-bottom: 40px;
}


.contact-label span {

  color: var(--yellow);

  font-size: 20px;
}


.contact-hero h1 {

  font-family:
    "Barlow Condensed",
    Impact,
    sans-serif;

  font-size:
    clamp(
      110px,
      15vw,
      210px
    );

  font-weight: 900;

  line-height: .62;

  letter-spacing: -7px;
}


.contact-hero h1 span {

  display: block;

  color: var(--blue);
}


.contact-hero-bottom {

  display: grid;

  grid-template-columns:
    1fr 400px;

  gap: 100px;

  align-items: end;

  margin-top: 70px;
}


.contact-hero-bottom > p {

  max-width: 650px;

  color: #9299a3;

  font-size: 18px;

  line-height: 1.7;
}


.hero-meta {

  display: flex;

  flex-direction: column;

  gap: 9px;

  color: #59616c;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 2px;

  text-align: right;
}


/* =====================================================
   SECTION LABEL
===================================================== */

.contact-section-label {

  display: flex;

  align-items: center;

  gap: 15px;

  margin-bottom: 45px;

  color: #777f89;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 3px;
}


.contact-section-label span {

  color: var(--blue);

  font-family:
    "Barlow Condensed",
    sans-serif;

  font-size: 18px;
}


/* =====================================================
   INFORMATION
===================================================== */

.contact-information {

  width:
    min(
      1200px,
      calc(100% - 80px)
    );

  margin: auto;

  padding:
    100px 0 140px;

  border-top:
    1px solid
    rgba(255,255,255,.1);
}


.contact-info-grid {

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 18px;
}


.contact-card {

  position: relative;

  min-height: 390px;

  padding: 32px;

  display: flex;

  flex-direction: column;

  border:
    1px solid
    rgba(255,255,255,.12);

  border-radius: 22px;

  overflow: hidden;

  transition:
    transform .35s ease,
    border-color .35s ease;
}


.contact-card:hover {

  transform: translateY(-8px);

  border-color:
    rgba(255,255,255,.35);
}


.contact-card-top {

  display: flex;

  align-items: center;

  justify-content: space-between;

  color: #737b85;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 2.5px;
}


.contact-card-top b {

  width: 38px;

  height: 38px;

  display: flex;

  align-items: center;

  justify-content: center;

  border:
    1px solid
    rgba(255,255,255,.15);

  border-radius: 50%;

  color: #fff;

  font-size: 17px;

  transition: .3s;
}


.contact-card:hover
.contact-card-top b {

  background: #fff;

  color: #000;

  transform:
    rotate(8deg);
}


.contact-card-icon {

  width: 75px;

  height: 75px;

  margin-top: 65px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  font-family:
    "Barlow Condensed",
    sans-serif;

  font-size: 38px;

  font-weight: 900;
}


.blue-card {

  background:
    linear-gradient(
      145deg,
      #0b2c55,
      #07101d
    );
}


.blue-card
.contact-card-icon {

  background: var(--blue);

  color: #fff;
}


.green-card {

  background:
    linear-gradient(
      145deg,
      #0b2718,
      #07100b
    );
}


.green-card
.contact-card-icon {

  background: var(--green);

  color: #000;
}


.yellow-card {

  background:
    linear-gradient(
      145deg,
      #292900,
      #0d0d07
    );
}


.yellow-card
.contact-card-icon {

  background: var(--yellow);

  color: #000;
}


.contact-card h2 {

  margin-top: 30px;

  font-family:
    "Barlow Condensed",
    sans-serif;

  font-size: 35px;

  line-height: .85;

  font-weight: 800;

  word-break: break-word;
}


.contact-card h2 span {

  display: block;

  color: var(--blue);
}


.green-card h2 span {

  color: var(--green);
}


.yellow-card h2 span {

  color: var(--yellow);
}


.contact-card p {

  margin-top: auto;

  padding-top: 25px;

  color: #7e8791;

  font-size: 12px;

  line-height: 1.6;
}


/* =====================================================
   FORM SECTION
===================================================== */

.contact-form-section {

  width:
    min(
      1200px,
      calc(100% - 80px)
    );

  margin: auto;

  padding:
    130px 0;

  display: grid;

  grid-template-columns:
    .8fr 1.2fr;

  gap: 100px;

  border-top:
    1px solid
    rgba(255,255,255,.1);
}


.form-intro h2 {

  font-family:
    "Barlow Condensed",
    Impact,
    sans-serif;

  font-size:
    clamp(
      70px,
      8vw,
      115px
    );

  line-height: .7;

  letter-spacing: -4px;

  font-weight: 900;
}


.form-intro h2 span {

  display: block;

  color: var(--blue);
}


.form-intro > p {

  max-width: 390px;

  margin-top: 35px;

  color: #858d97;

  font-size: 15px;

  line-height: 1.7;
}


.form-note {

  display: flex;

  align-items: center;

  gap: 12px;

  margin-top: 40px;

  color: #656d77;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: .5px;
}


.form-note span {

  color: var(--yellow);

  font-size: 18px;
}


/* =====================================================
   FORM
===================================================== */

.contact-form {

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 28px 20px;
}


.form-field {

  display: flex;

  flex-direction: column;

  gap: 11px;
}


.form-field.full-field {

  grid-column:
    1 / -1;
}


.form-field label {

  color: #737b86;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 2px;
}


.form-field input,
.form-field select,
.form-field textarea {

  width: 100%;

  border: 0;

  border-bottom:
    1px solid
    rgba(255,255,255,.2);

  background: transparent;

  color: #fff;

  padding:
    15px 5px;

  outline: none;

  font-family: Inter, sans-serif;

  font-size: 14px;

  transition: .25s;
}


.form-field input::placeholder,
.form-field textarea::placeholder {

  color: #4e5661;
}


.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {

  border-color: var(--blue);
}


.form-field select {

  color: #6d7580;

  cursor: pointer;
}


.form-field select option {

  background: #090d13;

  color: #fff;
}


.form-field textarea {

  resize: vertical;

  min-height: 150px;
}


.form-submit {

  grid-column:
    1 / -1;

  display: flex;

  align-items: center;

  gap: 25px;

  margin-top: 15px;
}


.form-submit button {

  min-height: 58px;

  padding:
    0 30px;

  border: 0;

  background: var(--blue);

  color: #fff;

  cursor: pointer;

  font-family: Inter, sans-serif;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 1px;

  transition: .25s;
}


.form-submit button:hover {

  background: var(--green);

  color: #000;

  transform: translateY(-3px);
}


.form-submit button span {

  margin-left: 15px;

  font-size: 18px;
}


.form-submit small {

  max-width: 280px;

  color: #555e68;

  font-size: 9px;

  line-height: 1.5;
}


/* =====================================================
   QUICK LINKS
===================================================== */

.quick-section {

  width:
    min(
      1200px,
      calc(100% - 80px)
    );

  margin: auto;

  padding:
    120px 0;

  border-top:
    1px solid
    rgba(255,255,255,.1);
}


.quick-grid {

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 15px;
}


.quick-card {

  position: relative;

  min-height: 300px;

  padding: 28px;

  background: #080d14;

  border:
    1px solid
    rgba(255,255,255,.1);

  border-radius: 18px;

  transition: .3s;

  overflow: hidden;
}


.quick-card::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 3px;

  background: var(--blue);

  transform:
    scaleX(0);

  transform-origin: left;

  transition: .3s;
}


.quick-card:nth-child(2)::before {

  background: var(--green);
}


.quick-card:nth-child(3)::before {

  background: var(--yellow);
}


.quick-card:nth-child(4)::before {

  background: var(--red);
}


.quick-card:hover {

  transform:
    translateY(-7px);

  background: #0c131d;
}


.quick-card:hover::before {

  transform:
    scaleX(1);
}


.quick-card > span {

  color: #4d5661;

  font-family:
    "Barlow Condensed",
    sans-serif;

  font-size: 17px;

  font-weight: 800;
}


.quick-card h3 {

  margin-top: 70px;

  font-family:
    "Barlow Condensed",
    sans-serif;

  font-size: 34px;

  line-height: .82;

  font-weight: 800;
}


.quick-card h3 strong {

  display: block;

  color: var(--blue);
}


.quick-card:nth-child(2)
h3 strong {

  color: var(--green);
}


.quick-card:nth-child(3)
h3 strong {

  color: var(--yellow);
}


.quick-card:nth-child(4)
h3 strong {

  color: var(--red);
}


.quick-card p {

  margin-top: 22px;

  color: #707985;

  font-size: 11px;

  line-height: 1.6;
}


.quick-card > b {

  position: absolute;

  right: 25px;

  bottom: 25px;

  width: 38px;

  height: 38px;

  display: flex;

  align-items: center;

  justify-content: center;

  border:
    1px solid
    rgba(255,255,255,.15);

  border-radius: 50%;

  color: var(--blue);

  transition: .3s;
}


.quick-card:hover > b {

  background: var(--blue);

  color: #fff;

  transform:
    translate(3px,-3px);
}


/* =====================================================
   FINAL CTA
===================================================== */

.contact-cta {

  min-height: 450px;

  padding:
    90px max(8vw, 50px);

  background: var(--blue);

  color: #fff;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 60px;

  position: relative;

  overflow: hidden;
}


.contact-cta::before {

  content: "✱";

  position: absolute;

  right: 5%;

  top: -100px;

  color: rgba(0,0,0,.13);

  font-size: 300px;
}


.cta-content {

  position: relative;

  z-index: 2;
}


.cta-content > span {

  color: var(--yellow);

  font-size: 10px;

  font-weight: 900;

  letter-spacing: 3px;
}


.cta-content h2 {

  margin-top: 25px;

  font-family:
    "Barlow Condensed",
    sans-serif;

  font-size:
    clamp(
      75px,
      9vw,
      130px
    );

  line-height: .68;

  letter-spacing: -4px;
}


.cta-content h2 strong {

  display: block;

  color: #000;
}


.cta-content p {

  margin-top: 30px;

  color: rgba(255,255,255,.7);

  font-size: 14px;
}


.cta-button {

  position: relative;

  z-index: 2;

  min-width: 190px;

  min-height: 190px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 12px;

  border-radius: 50%;

  background: #000;

  color: #fff;

  font-family:
    "Barlow Condensed",
    sans-serif;

  font-size: 22px;

  font-weight: 800;

  transition: .3s;
}


.cta-button span {

  font-size: 35px;
}


.cta-button:hover {

  background: var(--green);

  color: #000;

  transform:
    rotate(-8deg)
    scale(1.05);
}


/* =====================================================
   FOOTER
===================================================== */

.site-footer {

  background: #f7f7f3;

  color: #050505;

  border-top: 1px solid #ddd;
}


.footer-cta {

  min-height: 430px;

  padding:
    85px max(8vw, 50px);

  background: #fff;

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 60px;

  position: relative;

  overflow: hidden;
}


.footer-cta::before {

  content: "";

  position: absolute;

  width: 500px;

  height: 500px;

  right: -180px;

  top: -230px;

  background: var(--blue);

  border-radius: 50%;
}


.footer-cta::after {

  content: "✱";

  position: absolute;

  right: 310px;

  bottom: -45px;

  font-size: 150px;

  color: var(--green);
}


.footer-cta-content {

  position: relative;

  z-index: 2;

  max-width: 700px;
}


.footer-label {

  display: inline-block;

  margin-bottom: 22px;

  color: var(--blue);

  font-size: 12px;

  font-weight: 900;

  letter-spacing: 3px;
}


.footer-cta h2 {

  font-family:
    "Barlow Condensed",
    Impact,
    sans-serif;

  font-size:
    clamp(
      80px,
      10vw,
      145px
    );

  font-weight: 900;

  line-height: .76;

  letter-spacing: -4px;
}


.footer-cta h2 span {

  color: var(--blue);
}


.footer-cta p {

  max-width: 600px;

  margin-top: 30px;

  color: #555;

  font-size: 16px;

  line-height: 1.6;
}


.footer-register {

  position: relative;

  z-index: 3;

  width: 210px;

  height: 210px;

  border-radius: 50%;

  background: var(--blue);

  color: #fff;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 12px;

  font-family:
    "Barlow Condensed",
    sans-serif;

  font-size: 22px;

  font-weight: 800;

  transition: .3s;
}


.footer-register span {

  font-size: 35px;
}


.footer-register:hover {

  background: var(--green);

  color: #000;

  transform:
    rotate(-8deg)
    scale(1.05);
}


.footer-main {

  padding:
    75px max(8vw, 50px)
    70px;

  display: grid;

  grid-template-columns:
    2.2fr 1fr 1fr 1.4fr;

  gap: 70px;

  border-top:
    1px solid #ddd;
}


.footer-brand {}


.footer-logo {

  display: flex;

  align-items: baseline;

  gap: 5px;

  font-family:
    "Barlow Condensed",
    sans-serif;

  font-size: 47px;

  font-weight: 900;

  line-height: .8;
}


.footer-logo strong {

  color: var(--blue);
}


.footer-brand > p {

  max-width: 400px;

  margin-top: 25px;

  color: #666;

  font-size: 14px;

  line-height: 1.7;
}


.footer-socials {

  display: flex;

  gap: 10px;

  margin-top: 28px;
}


.footer-socials a {

  width: 40px;

  height: 40px;

  display: flex;

  align-items: center;

  justify-content: center;

  border:
    1px solid #bbb;

  border-radius: 50%;

  font-size: 13px;

  font-weight: 700;

  transition: .25s;
}


.footer-socials a:hover {

  background: var(--blue);

  border-color: var(--blue);

  color: #fff;
}


.footer-column {

  display: flex;

  flex-direction: column;

  align-items: flex-start;
}


.footer-column h3 {

  margin-bottom: 25px;

  font-family:
    "Barlow Condensed",
    sans-serif;

  font-size: 18px;

  letter-spacing: 2px;
}


.footer-column a {

  margin-bottom: 13px;

  color: #555;

  font-size: 14px;

  transition: .2s;
}


.footer-column a:hover {

  color: var(--blue);

  transform:
    translateX(4px);
}


.footer-contact p {

  margin-top: 15px;

  color: #777;

  font-size: 13px;

  line-height: 1.7;
}


.footer-bottom {

  min-height: 75px;

  padding:
    20px max(8vw, 50px);

  border-top:
    1px solid #d7d7d7;

  display: grid;

  grid-template-columns:
    1fr auto 1fr;

  align-items: center;

  gap: 30px;

  color: #777;

  font-size: 11px;
}


.footer-legal {

  display: flex;

  gap: 25px;
}


.footer-mark {

  justify-self: end;

  color: #111;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 2px;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1100px) {

  .nav-links {

    gap: 15px;

    font-size: 12px;
  }


  .brand {

    min-width: 230px;
  }


  .contact-info-grid {

    grid-template-columns:
      1fr 1fr;
  }


  .yellow-card {

    grid-column:
      1 / -1;
  }


  .quick-grid {

    grid-template-columns:
      1fr 1fr;
  }


  .footer-main {

    grid-template-columns:
      1.5fr 1fr 1fr;
  }


  .footer-brand {

    grid-column:
      1 / -1;
  }

}


@media (max-width: 800px) {

  .nav {

    height: 76px;

    padding: 0 18px;
  }


  .brand {

    min-width: 0;

    flex: 1;
  }


  .brand-main,
  .brand-accent {

    font-size: 24px;
  }


  .nav-links,
  .nav-cta {

    display: none;
  }


  .menu {

    display: block;
  }


  .contact-hero,
  .contact-information,
  .contact-form-section,
  .quick-section {

    width:
      calc(100% - 40px);
  }


  .contact-hero {

    padding:
      100px 0;
  }


  .contact-hero h1 {

    font-size: 90px;

    letter-spacing: -4px;
  }


  .contact-hero-bottom {

    grid-template-columns:
      1fr;

    gap: 35px;
  }


  .hero-meta {

    text-align: left;
  }


  .contact-info-grid {

    grid-template-columns:
      1fr;
  }


  .yellow-card {

    grid-column: auto;
  }


  .contact-form-section {

    grid-template-columns:
      1fr;

    gap: 65px;
  }


  .quick-grid {

    grid-template-columns:
      1fr 1fr;
  }


  .contact-cta {

    padding:
      80px 25px;

    display: block;
  }


  .cta-button {

    width: 150px;

    height: 150px;

    min-width: 150px;

    min-height: 150px;

    margin-top: 50px;
  }


  .footer-cta {

    min-height: 550px;

    padding:
      70px 25px;

    display: block;
  }


  .footer-cta h2 {

    font-size: 75px;

    letter-spacing: -2px;
  }


  .footer-register {

    width: 150px;

    height: 150px;

    margin-top: 45px;

    font-size: 17px;
  }


  .footer-main {

    padding:
      55px 25px;

    grid-template-columns:
      1fr 1fr;

    gap: 45px 30px;
  }


  .footer-brand {

    grid-column:
      1 / -1;
  }


  .footer-bottom {

    padding: 25px;

    grid-template-columns:
      1fr;

    gap: 18px;
  }


  .footer-mark {

    justify-self: start;
  }

}


@media (max-width: 550px) {

  .contact-hero h1 {

    font-size: 72px;

    letter-spacing: -3px;
  }


  .contact-info-grid {

    grid-template-columns:
      1fr;
  }


  .contact-card {

    min-height: 350px;
  }


  .contact-form {

    grid-template-columns:
      1fr;
  }


  .form-field.full-field {

    grid-column:
      auto;
  }


  .form-submit {

    display: block;
  }


  .form-submit small {

    display: block;

    margin-top: 18px;
  }


  .quick-grid {

    grid-template-columns:
      1fr;
  }


  .quick-card {

    min-height: 260px;
  }


  .contact-cta h2 {

    font-size: 72px;
  }


  .footer-main {

    grid-template-columns:
      1fr;
  }


  .footer-legal {

    flex-direction: column;

    gap: 10px;
  }

}