/* =========================
   GLOBAL
========================= */

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


html {
  scroll-behavior: smooth;
}


body {
  font-family:
    Arial,
    Helvetica,
    sans-serif;

  background: #f7f8fc;

  color: #172033;
}


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

.hero {
  min-height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 60px 20px;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 15% 15%,
      rgba(109, 93, 252, 0.18),
      transparent 30%
    ),

    radial-gradient(
      circle at 85% 80%,
      rgba(0, 198, 255, 0.18),
      transparent 30%
    ),

    #f7f8fc;
}


.container {
  width: 100%;
  max-width: 800px;

  text-align: center;
}


/* =========================
   ADAPTIVE WAVE
========================= */

.adaptive-wave {
  width: 260px;

  margin:
    0 auto
    10px;

  animation:
    waveFloat
    6s
    ease-in-out
    infinite;
}


.adaptive-wave svg {
  display: block;

  width: 100%;
  height: auto;

  overflow: visible;
}


/* Individual wave movement */

.wave-back {
  animation:
    wavePulse
    5s
    ease-in-out
    infinite;
}


.wave-front {
  animation:
    wavePulse
    4s
    ease-in-out
    infinite
    reverse;
}


/* Spark animation */

.spark {
  transform-origin:
    160px
    42px;

  animation:
    sparkle
    3s
    ease-in-out
    infinite;
}


/* =========================
   WAVE ANIMATIONS
========================= */

@keyframes waveFloat {

  0%,
  100% {
    transform:
      translateY(0);
  }

  50% {
    transform:
      translateY(-8px);
  }

}


@keyframes wavePulse {

  0%,
  100% {
    opacity: 0.75;
  }

  50% {
    opacity: 1;
  }

}


@keyframes sparkle {

  0%,
  100% {
    transform:
      scale(0.8)
      rotate(0deg);

    opacity: 0.5;
  }

  50% {
    transform:
      scale(1.2)
      rotate(15deg);

    opacity: 1;
  }

}


/* =========================
   SPENDEZY BRAND
========================= */

.brand {
  font-size: 14px;

  font-weight: 700;

  letter-spacing: 5px;

  margin-bottom: 50px;

  color: #596275;
}


/* =========================
   INTRO
========================= */

.eyebrow {
  font-size: 14px;

  letter-spacing: 2px;

  text-transform: uppercase;

  color: #6d5dfc;

  margin-bottom: 12px;
}


/* =========================
   PHOELIO TITLE
========================= */

h1 {
  font-size:
    clamp(
      60px,
      10vw,
      110px
    );

  letter-spacing: 2px;

  margin-bottom: 12px;

  background:
    linear-gradient(
      90deg,
      #6d5dfc,
      #00c6ff
    );

  -webkit-background-clip: text;

  -webkit-text-fill-color:
    transparent;

  background-clip: text;

  color: transparent;
}


.hero h2 {
  font-size:
    clamp(
      22px,
      4vw,
      34px
    );

  font-weight: 500;

  margin-bottom: 30px;

  color: #2f3542;
}


.description {
  max-width: 620px;

  margin:
    0 auto
    22px;

  font-size: 18px;

  line-height: 1.7;

  color: #5c6473;
}


.tagline {
  font-size: 20px;

  font-style: italic;

  color: #3c4251;

  margin-bottom: 40px;
}


/* =========================
   COMING SOON
========================= */

.coming-soon {
  display: inline-block;

  padding:
    14px
    30px;

  border-radius: 30px;

  background:
    linear-gradient(
      90deg,
      #6d5dfc,
      #00c6ff
    );

  color: white;

  font-weight: 600;

  letter-spacing: 1px;

  text-transform: uppercase;

  box-shadow:
    0 10px 30px
    rgba(
      109,
      93,
      252,
      0.25
    );
}


/* =========================
   PHOELIO SECTION
========================= */

.phoelio-section {
  padding:
    110px
    20px;

  background: white;
}


.section-container {
  max-width: 1050px;

  margin: auto;

  text-align: center;
}


.section-eyebrow {
  font-size: 14px;

  letter-spacing: 2px;

  color: #6d5dfc;

  font-weight: 700;

  margin-bottom: 15px;
}


.phoelio-section h2 {
  max-width: 750px;

  margin:
    0 auto
    25px;

  font-size:
    clamp(
      32px,
      5vw,
      52px
    );

  line-height: 1.2;
}


.section-description {
  max-width: 650px;

  margin:
    0 auto
    60px;

  font-size: 18px;

  line-height: 1.7;

  color: #687080;
}


/* =========================
   FEATURE GRID
========================= */

.features {
  display: grid;

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

  gap: 25px;

  margin-bottom: 70px;
}


.feature-card {
  padding:
    40px
    30px;

  text-align: left;

  border-radius: 20px;

  background: white;

  box-shadow:
    0 15px 40px
    rgba(
      0,
      0,
      0,
      0.08
    );

  transition:
    transform
      0.25s
      ease,

    box-shadow
      0.25s
      ease;
}


.feature-card:hover {
  transform:
    translateY(-8px);

  box-shadow:
    0 25px 50px
    rgba(
      109,
      93,
      252,
      0.16
    );
}


.feature-icon {
  font-size: 38px;

  margin-bottom: 20px;
}


.feature-card h3 {
  font-size: 22px;

  margin-bottom: 12px;
}


.feature-card p {
  line-height: 1.6;

  color: #687080;
}


/* =========================
   FUTURE MESSAGE
========================= */

.future-message {
  max-width: 700px;

  margin: auto;

  padding:
    50px
    30px;

  border-radius: 25px;

  background:
    linear-gradient(
      135deg,
      #6d5dfc,
      #00c6ff
    );

  color: white;

  box-shadow:
    0 20px 50px
    rgba(
      109,
      93,
      252,
      0.2
    );
}


.future-message h3 {
  font-size: 30px;

  margin-bottom: 15px;
}


.future-message p {
  font-size: 17px;

  line-height: 1.7;

  opacity: 0.9;
}


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

footer {
  padding:
    35px
    20px;

  text-align: center;

  background: #172033;

  color:
    rgba(
      255,
      255,
      255,
      0.6
    );

  font-size: 14px;
}


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

@media (max-width: 700px) {

  .hero {
    padding:
      50px
      20px;
  }


  .adaptive-wave {
    width: 220px;

    margin-bottom: 5px;
  }


  .brand {
    margin-bottom: 40px;
  }


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


  .feature-card {
    padding:
      30px
      25px;
  }


  .description,
  .section-description {
    font-size: 16px;
  }


  .future-message h3 {
    font-size: 26px;
  }

}


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

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

  *,
  *::before,
  *::after {
    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;
  }

}