@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fredoka:wght@400;500;600;700&display=swap');


:root {

  --abbora-purple: #6B2ED9;

  --abbora-light-purple: #C8B5FF;

  --abbora-lavender: #D8C7FF;

  --abbora-pink: #FF65C7;

  --deep-purple: #4A2D6B;

  --dark-background: #10051C;

  --soft-white: #FFF8FF;

  --muted-white: #D9CDE5;

}


* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}


html {

  scroll-behavior: smooth;

}


body {

  min-height: 100vh;

  overflow-x: hidden;

  color: var(--soft-white);

  font-family: "DM Sans", sans-serif;

  background:

    radial-gradient(
      circle at 75% 35%,
      rgba(107, 46, 217, .38),
      transparent 32%
    ),

    radial-gradient(
      circle at 10% 85%,
      rgba(255, 70, 190, .20),
      transparent 30%
    ),

    linear-gradient(
      135deg,
      #09040F,
      #1A082A 50%,
      #10051C
    );

}


/* =================================
   BACKGROUND
================================= */


body::before {

  content: "";

  position: fixed;

  inset: 0;

  pointer-events: none;

  opacity: .15;

  background-image:

    radial-gradient(
      rgba(255,255,255,.8) 1px,
      transparent 1px
    );

  background-size: 65px 65px;

}


.background-glow {

  position: fixed;

  border-radius: 50%;

  filter: blur(90px);

  pointer-events: none;

  opacity: .5;

}


.glow-one {

  width: 330px;

  height: 330px;

  right: 4%;

  top: 10%;

  background: #6B2ED9;

  animation: glowMove 9s ease-in-out infinite;

}


.glow-two {

  width: 280px;

  height: 280px;

  left: 4%;

  bottom: 5%;

  background: #FF4DB8;

  animation: glowMove 11s ease-in-out infinite reverse;

}


@keyframes glowMove {

  50% {

    transform:
      translate(25px, -25px)
      scale(1.1);

  }

}


/* FLOATING STARS */


.floating-star {

  position: fixed;

  z-index: 1;

  color: #FFFFFF;

  opacity: .7;

  text-shadow:
    0 0 15px #FF8DE0;

  pointer-events: none;

  animation: starFloat 4s ease-in-out infinite;

}


.star-one {

  top: 20%;

  left: 48%;

  font-size: 18px;

}


.star-two {

  top: 65%;

  left: 8%;

  font-size: 15px;

  animation-delay: 1s;

}


.star-three {

  top: 35%;

  right: 8%;

  font-size: 22px;

  animation-delay: 2s;

}


@keyframes starFloat {

  50% {

    transform:
      translateY(-12px)
      scale(1.25);

    opacity: .35;

  }

}


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


.header {

  position: relative;

  z-index: 10;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding:
    24px
    clamp(18px, 5vw, 70px);

}


/* BRAND */


.brand {

  display: flex;

  align-items: center;

  gap: 10px;

  color: white;

  text-decoration: none;

}


.brand-logo {

  width: 55px;

  height: 55px;

  object-fit: contain;

  filter:
    drop-shadow(
      0 8px 16px
      rgba(107,46,217,.35)
    );

  animation: logoFloat 4s ease-in-out infinite;

}


@keyframes logoFloat {

  50% {

    transform:
      translateY(-3px)
      rotate(2deg);

  }

}


.brand-name {

  font-family: "Fredoka", sans-serif;

  font-size: 27px;

  font-weight: 700;

  letter-spacing: 1px;

  color: #FFFFFF;

}


/* LANGUAGE */


.language-box {

  display: flex;

  align-items: center;

  gap: 7px;

  padding:
    9px
    14px;

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

  border-radius: 999px;

  background:
    rgba(255,255,255,.07);

  backdrop-filter: blur(18px);

}


.language-icon {

  font-size: 14px;

}


.language-box select {

  border: none;

  outline: none;

  color: white;

  background: transparent;

  cursor: pointer;

  font-family: inherit;

  font-size: 13px;

  font-weight: 600;

}


.language-box option {

  color: #241532;

}


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


.hero {

  position: relative;

  z-index: 3;

  max-width: 1350px;

  min-height:
    calc(100vh - 110px);

  margin: auto;

  padding:
    20px
    clamp(20px, 5vw, 70px)
    50px;

  display: grid;

  grid-template-columns:
    1.05fr
    .95fr;

  align-items: center;

}


/* LEFT CONTENT */


.hero-content {

  max-width: 650px;

}


.eyebrow {

  display: flex;

  align-items: center;

  gap: 10px;

  color: #E5D8F5;

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 3px;

}


.eyebrow-dot {

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: var(--abbora-pink);

  box-shadow:
    0 0 18px
    var(--abbora-pink);

}


/* TITLE */


h1 {

  margin-top: 25px;

  margin-bottom: 25px;

  font-family: "Fredoka", sans-serif;

  font-size:
    clamp(58px, 7.5vw, 105px);

  line-height: .91;

  letter-spacing: -4px;

  font-weight: 700;

}


.gradient-text {

  background:

    linear-gradient(
      90deg,
      #C8B5FF,
      #FF72C8
    );

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent;

}


/* DESCRIPTION */


.hero-description {

  max-width: 550px;

  margin-bottom: 34px;

  color: var(--muted-white);

  font-size: 18px;

  line-height: 1.7;

}


.hero-description strong {

  color: #FFFFFF;

}


/* =================================
   BUTTONS
================================= */


.auth-buttons {

  display: flex;

  flex-wrap: wrap;

  gap: 14px;

}


.auth-button {

  position: relative;

  min-width: 190px;

  height: 70px;

  padding:
    8px
    15px
    8px
    9px;

  display: flex;

  align-items: center;

  gap: 13px;

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

  border-radius: 23px;

  color: white;

  cursor: pointer;

  overflow: hidden;

  backdrop-filter: blur(15px);

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

}


.auth-button::before {

  content: "";

  position: absolute;

  width: 100px;

  height: 100px;

  right: -40px;

  top: -45px;

  border-radius: 50%;

  background:
    rgba(255,255,255,.12);

}


.auth-button:hover {

  transform:
    translateY(-5px)
    scale(1.02);

}


.login-button {

  background:

    linear-gradient(
      135deg,
      #6B2ED9,
      #A84BEB
    );

  box-shadow:
    0 15px 35px
    rgba(107,46,217,.35);

}


.signup-button {

  background:
    rgba(255,255,255,.07);

}


.button-character {

  position: relative;

  z-index: 2;

  width: 53px;

  height: 53px;

  flex-shrink: 0;

  display: grid;

  place-items: center;

  border-radius: 17px;

  background:
    rgba(255,255,255,.15);

  overflow: hidden;

}


.button-character img {

  width: 100%;

  height: 100%;

  object-fit: contain;

}


.button-text {

  position: relative;

  z-index: 2;

  flex: 1;

  text-align: left;

  font-family: "Fredoka", sans-serif;

  font-size: 17px;

  font-weight: 600;

}


.button-arrow {

  position: relative;

  z-index: 2;

  width: 35px;

  height: 35px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background:
    rgba(255,255,255,.12);

  font-size: 21px;

}


.free-note {

  margin-top: 17px;

  color: #A99BB5;

  font-size: 12px;

}


.free-note span {

  color: #FF72C8;

}


/* =================================
   CHARACTER / LOGO SHOWCASE
================================= */


.character-section {

  position: relative;

  height: min(680px, 78vh);

  min-height: 470px;

  display: grid;

  place-items: center;

}


.character-glow {

  position: absolute;

  width: min(540px, 90%);

  aspect-ratio: 1;

  border-radius: 50%;

  background:

    radial-gradient(
      circle,
      rgba(107,46,217,.40),
      rgba(255,70,190,.13) 43%,
      transparent 70%
    );

  animation:
    characterGlow 5s ease-in-out infinite;

}


@keyframes characterGlow {

  50% {

    transform: scale(1.07);

    opacity: .75;

  }

}


.logo-showcase {

  position: relative;

  width: min(470px, 85%);

  aspect-ratio: 1;

  display: grid;

  place-items: center;

}


.logo-ring {

  position: absolute;

  inset: 5%;

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

  border-radius: 50%;

  box-shadow:

    0 0 70px
    rgba(107,46,217,.20),

    inset 0 0 70px
    rgba(255,100,200,.08);

  animation:
    ringPulse
    5s
    ease-in-out
    infinite;

}


@keyframes ringPulse {

  50% {

    transform: scale(1.04);

    opacity: .65;

  }

}


.hero-logo {

  position: relative;

  z-index: 2;

  width: 78%;

  height: 78%;

  object-fit: contain;

  filter:

    drop-shadow(
      0 25px 25px
      rgba(0,0,0,.35)
    )

    drop-shadow(
      0 0 30px
      rgba(107,46,217,.25)
    );

  animation:

    heroLogoFloat
    4.5s
    ease-in-out
    infinite;

}


@keyframes heroLogoFloat {

  50% {

    transform:
      translateY(-12px)
      rotate(1deg);

  }

}


/* SPARKLES */


.logo-sparkle {

  position: absolute;

  z-index: 5;

  color: white;

  text-shadow:
    0 0 20px
    #FF72C8;

  animation:
    sparkle
    2.4s
    ease-in-out
    infinite;

}


.sparkle-one {

  top: 18%;

  right: 5%;

  font-size: 28px;

}


.sparkle-two {

  left: 4%;

  top: 48%;

  font-size: 20px;

  animation-delay: .8s;

}


.sparkle-three {

  right: 14%;

  bottom: 14%;

  font-size: 23px;

  animation-delay: 1.5s;

}


@keyframes sparkle {

  50% {

    transform:
      scale(.65)
      rotate(20deg);

    opacity: .3;

  }

}


/* MESSAGE */


.story-message {

  position: absolute;

  bottom: 10px;

  display: flex;

  align-items: center;

  gap: 9px;

  color: #D5C6E2;

  font-size: 12px;

  letter-spacing: 1px;

}


.online-dot {

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: #FF65C7;

  box-shadow:
    0 0 14px
    #FF65C7;

}


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


.footer {

  position: relative;

  z-index: 5;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding:
    18px
    clamp(20px,5vw,70px);

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

  color: #81738E;

  font-size: 11px;

}


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


@media (max-width: 850px) {

  .hero {

    grid-template-columns: 1fr;

    text-align: center;

    padding-top: 40px;

  }


  .hero-content {

    margin: auto;

  }


  .eyebrow {

    justify-content: center;

  }


  .hero-description {

    margin-left: auto;

    margin-right: auto;

  }


  .auth-buttons {

    justify-content: center;

  }


  .character-section {

    height: 520px;

    min-height: 470px;

  }


  .footer {

    flex-direction: column;

    gap: 10px;

    text-align: center;

  }

}


/* =================================
   PHONE
================================= */


@media (max-width: 500px) {

  .header {

    padding:
      18px
      15px;

  }


  .brand-logo {

    width: 45px;

    height: 45px;

  }


  .brand-name {

    font-size: 22px;

  }


  .language-box {

    padding:
      8px
      10px;

  }


  .language-box select {

    max-width: 75px;

  }


  .hero {

    padding:
      30px
      15px
      40px;

  }


  h1 {

    font-size: 56px;

    letter-spacing: -3px;

  }


  .hero-description {

    font-size: 15px;

  }


  .auth-buttons {

    width: 100%;

    padding:
      0
      8px;

  }


  .auth-button {

    width: 100%;

  }


  .character-section {

    height: 450px;

    min-height: 410px;

  }


  .hero-logo {

    width: 85%;

    height: 85%;

  }


  .story-message {

    bottom: 0;

  }

}