:root {

  --black: #0d0f13;
  --black-2: #151922;

  --blue: #1677ff;
  --blue-light: #55a0ff;

  --orange: #e84923;

  --white: #ffffff;
  --cream: #fffaf4;

  --text: #17120f;
  --muted: #756a61;

  --border: rgba(20,18,15,.10);

  --font:
    "Outfit",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}


/* =========================================================
   RESET
   ========================================================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {

  margin: 0;

  background: var(--cream);

  color: var(--text);

  font-family: var(--font);

  overflow-x: hidden;

  -webkit-font-smoothing: antialiased;
}

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

img {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
}

.container {

  width:
    min(
      calc(100% - 40px),
      1180px
    );

  margin-inline: auto;
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {

  position: sticky;

  top: 0;

  z-index: 100;

  background:
    rgba(255,250,244,.96);

  border-bottom:
    1px solid var(--border);
}

.header-inner {

  min-height: 70px;

  width:
    min(
      calc(100% - 40px),
      1180px
    );

  margin: auto;

  display: flex;

  align-items: center;

  justify-content: space-between;
}

.logo {

  font-size: 1.5rem;

  font-weight: 800;

  letter-spacing: -.07em;
}

.logo span {
  color: #17130f;
}

.logo b {
  color: var(--blue);
}

.desktop-nav {

  display: flex;

  align-items: center;

  gap: 30px;
}

.desktop-nav a {

  color: #756b63;

  font-size: .78rem;

  font-weight: 700;

  transition: color .2s ease;
}

.desktop-nav a:hover,
.desktop-nav a.active {

  color: var(--blue);
}

.header-button {

  padding:
    10px 17px;

  border-radius: 8px;

  background: var(--black);

  color: white;

  font-size: .72rem;

  font-weight: 800;
}


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

.contact-hero {

  position: relative;

  min-height: 390px;

  display: flex;

  align-items: center;

  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      #0c0f15,
      #121925
    );

  color: white;
}

.hero-glow {

  position: absolute;

  border-radius: 50%;

  pointer-events: none;

  filter: blur(5px);
}

.hero-glow-one {

  width: 500px;
  height: 500px;

  right: -170px;
  top: -260px;

  background:
    radial-gradient(
      circle,
      rgba(22,119,255,.28),
      transparent 68%
    );
}

.hero-glow-two {

  width: 380px;
  height: 380px;

  left: -180px;
  bottom: -240px;

  background:
    radial-gradient(
      circle,
      rgba(232,73,35,.17),
      transparent 68%
    );
}

.hero-content {

  position: relative;

  max-width: 780px;

  padding:
    80px 0;
}

.eyebrow {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 20px;

  color: var(--blue-light);

  font-size: .65rem;

  font-weight: 800;

  letter-spacing: .18em;
}

.eyebrow i {

  display: block;

  width: 32px;
  height: 2px;

  background:
    linear-gradient(
      90deg,
      var(--blue),
      var(--orange)
    );
}

.hero-content h1 {

  margin: 0;

  max-width: 800px;

  font-size:
    clamp(
      3.2rem,
      7vw,
      6.5rem
    );

  line-height: .9;

  letter-spacing: -.07em;
}

.hero-content h1 span {

  display: block;

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

.hero-content p {

  max-width: 650px;

  margin:
    28px 0 0;

  color: #aeb5c0;

  font-size: 1rem;

  line-height: 1.75;
}


/* =========================================================
   CONTACT SECTION
   ========================================================= */

.contact-section {

  padding:
    75px 0 90px;

  background: var(--cream);
}

.contact-grid {

  display: grid;

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

  gap: 18px;
}


/* =========================================================
   CONTACT CARDS
   ========================================================= */

.contact-card {

  position: relative;

  overflow: hidden;

  min-height: 310px;

  padding: 32px;

  border:
    1px solid var(--border);

  border-radius: 18px;

  background: white;

  box-shadow:
    0 15px 40px rgba(50,30,15,.055);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.contact-card:hover {

  transform: translateY(-5px);

  box-shadow:
    0 25px 55px rgba(50,30,15,.10);
}

.contact-card::after {

  content: "";

  position: absolute;

  width: 170px;
  height: 170px;

  right: -90px;
  bottom: -100px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(22,119,255,.09),
      transparent 70%
    );

  pointer-events: none;
}

.contact-card.primary {

  background:
    linear-gradient(
      145deg,
      #11151d,
      #171e2b
    );

  color: white;

  border: 0;
}

.contact-card.primary p {
  color: #aeb7c4;
}

.card-icon {

  width: 46px;
  height: 46px;

  display: grid;

  place-items: center;

  margin-bottom: 25px;

  border-radius: 13px;

  background:
    rgba(22,119,255,.10);

  color: var(--blue);

  font-size: 1.3rem;

  font-weight: 800;
}

.primary .card-icon {

  background: var(--blue);

  color: white;
}

.card-label {

  display: block;

  margin-bottom: 10px;

  color: var(--blue);

  font-size: .61rem;

  font-weight: 800;

  letter-spacing: .16em;
}

.primary .card-label {
  color: #72acff;
}

.contact-card h2 {

  margin:
    0 0 12px;

  font-size: 1.8rem;

  letter-spacing: -.045em;
}

.contact-card p {

  max-width: 500px;

  margin:
    0 0 23px;

  color: var(--muted);

  font-size: .88rem;

  line-height: 1.7;
}


/* =========================================================
   DIRECT LINKS
   ========================================================= */

.contact-link {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  padding:
    13px 0;

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

  color: white;

  font-size: .8rem;

  font-weight: 700;
}

.contact-link:first-of-type {
  margin-top: 20px;
}

.contact-link b {

  color: var(--blue-light);

  font-size: 1.1rem;

  transition:
    transform .2s ease;
}

.contact-link:hover b {
  transform: translateX(5px);
}


/* =========================================================
   EMAIL BOX
   ========================================================= */

.email-box {

  position: relative;

  display: block;

  margin-top: 20px;

  padding: 17px;

  border-radius: 11px;

  background:
    #f8f5f1;

  border:
    1px solid rgba(20,18,15,.07);

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

.email-box:hover {

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

  transform: translateY(-2px);
}

.email-box small {

  display: block;

  margin-bottom: 6px;

  color: #9a8e83;

  font-size: .55rem;

  font-weight: 800;

  letter-spacing: .14em;
}

.email-box strong {

  display: block;

  color: var(--text);

  font-size: .84rem;

  word-break: break-word;
}

.email-box span {

  display: block;

  margin-top: 6px;

  color: var(--blue);

  font-size: .65rem;

  font-weight: 700;
}


/* =========================================================
   SPECIAL CARDS
   ========================================================= */

.support-icon {

  color: var(--orange);

  background:
    rgba(232,73,35,.09);
}

.innovation {

  background:
    linear-gradient(
      145deg,
      #f7fbff,
      white
    );
}

.innovation-icon {

  color: var(--orange);

  background:
    rgba(232,73,35,.09);
}

.partnership {

  background:
    linear-gradient(
      145deg,
      #fff8f0,
      white
    );
}

.partnership-icon {

  color: var(--blue);

  background:
    rgba(22,119,255,.10);
}

.partnership-button {

  display: inline-flex;

  align-items: center;

  gap: 14px;

  margin-top: 17px;

  padding:
    12px 16px;

  border-radius: 9px;

  background: var(--black);

  color: white;

  font-size: .75rem;

  font-weight: 800;

  transition:
    transform .2s ease;
}

.partnership-button:hover {
  transform: translateY(-2px);
}

.partnership-button span {

  color: var(--blue-light);

  font-size: 1rem;
}


/* =========================================================
   LOCATION
   ========================================================= */

.location-card {

  display: grid;

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

  align-items: center;

  gap: 20px;

  margin-top: 18px;

  padding:
    27px 30px;

  border-radius: 17px;

  background:
    var(--black);

  color: white;
}

.location-mark {

  width: 46px;
  height: 46px;

  display: grid;

  place-items: center;

  border-radius: 13px;

  background: var(--blue);

  font-size: 1.2rem;
}

.location-content > span {

  color: var(--blue-light);

  font-size: .58rem;

  font-weight: 800;

  letter-spacing: .15em;
}

.location-content h2 {

  margin:
    7px 0 5px;

  font-size: 1.25rem;

  letter-spacing: -.035em;
}

.location-content p {

  margin: 0;

  color: #999fa9;

  font-size: .75rem;

  line-height: 1.6;
}

.location-side {

  text-align: right;
}

.location-side strong {

  display: block;

  color: white;

  font-size: .7rem;

  letter-spacing: .12em;
}

.location-side span {

  display: block;

  margin-top: 5px;

  color: #747b85;

  font-size: .65rem;
}


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

.contact-footer {

  padding:
    75px 0;

  background:
    linear-gradient(
      135deg,
      #1677ff,
      #0754c9
    );

  color: white;

  text-align: center;
}

.footer-message {

  max-width: 700px;

  margin: auto;
}

.footer-message > span {

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

  font-size: .62rem;

  font-weight: 800;

  letter-spacing: .2em;
}

.footer-message h2 {

  margin:
    15px 0 10px;

  font-size:
    clamp(
      2.3rem,
      5vw,
      4.5rem
    );

  line-height: .95;

  letter-spacing: -.06em;
}

.footer-message p {

  margin: 0;

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


/* =========================================================
   WHATSAPP
   ========================================================= */

.whatsapp-float {

  position: fixed;

  right: 22px;
  bottom: 22px;

  z-index: 500;

  display: flex;

  align-items: center;

  gap: 10px;

  padding:
    12px 16px 12px 12px;

  border-radius: 999px;

  background: #20b85a;

  color: white;

  box-shadow:
    0 12px 35px rgba(0,0,0,.25);

  font-size: .76rem;

  font-weight: 800;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.whatsapp-float:hover {

  transform: translateY(-4px);

  box-shadow:
    0 18px 40px rgba(0,0,0,.3);
}

.whatsapp-float svg {

  position: relative;

  width: 27px;
  height: 27px;

  fill: white;

  z-index: 2;
}

.whatsapp-text {
  position: relative;
  z-index: 2;
}

.whatsapp-pulse {

  position: absolute;

  inset: -5px;

  border-radius: inherit;

  border:
    2px solid rgba(32,184,90,.35);

  animation:
    whatsappPulse 2s infinite;

  pointer-events: none;
}

@keyframes whatsappPulse {

  0% {
    transform: scale(.95);
    opacity: .8;
  }

  70% {
    transform: scale(1.12);
    opacity: 0;
  }

  100% {
    transform: scale(1.12);
    opacity: 0;
  }
}


/* =========================================================
   REVEAL
   ========================================================= */

.reveal {

  opacity: 0;

  transform:
    translateY(22px);

  transition:
    opacity .65s ease,
    transform .65s ease;
}

.reveal.visible {

  opacity: 1;

  transform: none;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 800px) {

  .desktop-nav {
    gap: 16px;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .contact-card {
    min-height: auto;
  }

  .location-card {
    grid-template-columns: 55px 1fr;
  }

  .location-side {
    display: none;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

  .container {
    width:
      calc(100% - 30px);
  }

  .header-inner {
    width:
      calc(100% - 30px);
  }

  .desktop-nav {
    display: none;
  }

  .header-button {
    padding:
      9px 13px;

    font-size: .65rem;
  }

  .contact-hero {
    min-height: 360px;
  }

  .hero-content {
    padding:
      65px 0;
  }

  .hero-content h1 {
    font-size:
      clamp(
        3rem,
        15vw,
        4.5rem
      );
  }

  .hero-content p {
    font-size: .9rem;
  }

  .contact-section {
    padding:
      55px 0 70px;
  }

  .contact-card {
    padding: 26px;
    border-radius: 15px;
  }

  .contact-card h2 {
    font-size: 1.55rem;
  }

  .location-card {
    padding: 23px;
    grid-template-columns: 46px 1fr;
    gap: 15px;
  }

  .location-mark {
    width: 42px;
    height: 42px;
  }

  .location-content h2 {
    font-size: 1.05rem;
  }

  .location-content p {
    font-size: .7rem;
  }

  .contact-footer {
    padding:
      65px 0;
  }

  .footer-message h2 {
    font-size:
      clamp(
        2.4rem,
        12vw,
        3.6rem
      );
  }

  .whatsapp-float {

    right: 15px;
    bottom: 15px;

    width: 52px;
    height: 52px;

    padding: 0;

    justify-content: center;
  }

  .whatsapp-text {
    display: none;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  .reveal {

    opacity: 1;

    transform: none;

    transition: none;
  }

  .whatsapp-pulse {
    animation: none;
  }

  * {
    transition-duration: .01ms !important;
  }
}