@import url('https://fonts.googleapis.com/css2?family=Almendra:wght@400;700&family=Inter:wght@400;500;600;700;800&display=swap');


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

:root {
  --bg: #080617;
  --panel: #12102a;

  --text: #f8f5ff;
  --muted: #b9b3cf;

  --accent: #ffb85c;
  --pink: #ff5ca8;
  --purple: #9b6cff;
  --blue: #4ca8ff;

  --accent2: #ff5b8d;

  --line: rgba(255,255,255,.11);
}


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

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

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: Inter, Arial, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}

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

img {
  max-width: 100%;
}


/* =====================================================
   TOP BAR
   ===================================================== */

.topbar {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;

  height: 76px;

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

  padding: 0 5%;

  background: rgba(9,7,18,.75);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

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

.brand,
.footer-brand {
  font-weight: 900;
  letter-spacing: 1px;
}

.brand span,
.footer-brand span {
  color: #fff;
}

.brand .pink-name,
.footer-brand .pink-name {
  color: var(--pink);
}


/* =====================================================
   NAVIGATION
   ===================================================== */

nav {
  display: flex;
  gap: 30px;

  color: #d9d4e5;

  font-size: 14px;
}

nav a {
  position: relative;
  transition: color .25s;
}

nav a:hover,
.footer-links a:hover {
  color: var(--accent);
}

nav a::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -6px;

  width: 0;
  height: 2px;

  background: var(--accent);

  transition: width .25s;
}

nav a:hover::after {
  width: 100%;
}


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

.nav-btn,
.btn,
.store-btn {

  display: inline-flex;

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

  border-radius: 5px;

  font-weight: 800;

  letter-spacing: .5px;

  transition:
    transform .25s,
    filter .25s,
    background .25s;
}

.nav-btn {

  background: var(--accent);

  color: #17100a;

  padding: 11px 19px;

  font-size: 13px;
}

.nav-btn:hover,
.primary:hover,
.store-btn:hover {

  transform: translateY(-2px);

  filter: brightness(1.08);
}

.btn {

  padding: 15px 25px;

  font-size: 13px;
}

.primary {

  background: var(--accent);

  color: #17100a;

  box-shadow:
    0 10px 30px
    rgba(255,184,92,.15);
}

.secondary {

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

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

  color: #fff;
}

.secondary:hover {

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

  transform: translateY(-2px);
}


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

.hero {

  min-height: 100vh;

  position: relative;

  display: flex;

  align-items: center;

  overflow: hidden;

  background:

    radial-gradient(
      circle at 78% 28%,
      rgba(255,92,168,.30),
      transparent 27%
    ),

    radial-gradient(
      circle at 58% 68%,
      rgba(76,168,255,.18),
      transparent 29%
    ),

    radial-gradient(
      circle at 25% 72%,
      rgba(155,108,255,.25),
      transparent 32%
    ),

    linear-gradient(
      135deg,
      #080617,
      #17102f 52%,
      #09091d
    );
}


/* =====================================================
   HERO GRID BACKGROUND
   ===================================================== */

.hero::before {

  content: "";

  position: absolute;

  inset: 0;

  z-index: 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: 55px 55px;

  animation: grid 18s linear infinite;
}

@keyframes grid {

  to {
    background-position: 55px 55px;
  }
}


/* =====================================================
   HERO CHARACTER IMAGE
   ===================================================== */

.hero-character {

  position: absolute;

  z-index: 2;

  top: 50%;

  right: 0;

  width: min(62vw, 850px);

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: flex-end;

  transform: translateY(-50%);

  pointer-events: none;
}

.hero-character img {

  width: 100%;

  max-height: 96vh;

  object-fit: contain;

  object-position: right center;

  display: block;

  filter:
    drop-shadow(
      0 30px 45px
      rgba(0,0,0,.65)
    );
}


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

.hero-overlay {

  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  background:

    linear-gradient(

      90deg,

      rgba(8,6,23,.98) 0%,

      rgba(8,6,23,.96) 28%,

      rgba(8,6,23,.82) 42%,

      rgba(8,6,23,.48) 58%,

      rgba(8,6,23,.12) 82%,

      rgba(8,6,23,.02) 100%

    );
}


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

.hero-content {

  position: relative;

  z-index: 3;

  width: min(1100px, 90%);

  margin: auto;

  padding-top: 70px;
}

.eyebrow {

  color: var(--accent);

  font-size: 12px;

  font-weight: 800;

  letter-spacing: 3px;

  margin-bottom: 14px;
}

h1,
h2 {

  font-family: Anton, Impact, sans-serif;

  font-weight: 400;

  line-height: .95;

  letter-spacing: 1px;
}

h1 {

  font-size: clamp(64px,10vw,132px);

  max-width: 800px;
}


/* RESCUE */

.rescue-name {

  color: var(--accent);

  text-shadow:
    0 0 25px
    rgba(255,184,92,.25);
}


/* MY */

h1 .my-name {

  color: #fff;

  text-shadow:
    0 0 25px
    rgba(255,255,255,.12);
}


/* PRINCESS */

h1 .princess-name {

  color: var(--pink);

  text-shadow:
    0 0 35px
    rgba(255,92,168,.30);
}

.hero-content > p {

  font-size: clamp(17px,2vw,23px);

  color: #ddd8e8;

  margin: 25px 0;

  max-width: 620px;
}


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

.hero-buttons {

  display: flex;

  gap: 12px;

  flex-wrap: wrap;
}


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

.hero-stats {

  display: flex;

  gap: 45px;

  margin-top: 60px;
}

.hero-stats div {

  display: flex;

  flex-direction: column;

  border-left: 2px solid var(--accent);

  padding-left: 12px;
}

.hero-stats strong {

  font-size: 25px;
}

.hero-stats small {

  font-size: 10px;

  color: var(--muted);

  letter-spacing: 1.5px;
}


/* =====================================================
   SCROLL TEXT
   ===================================================== */

.scroll {

  position: absolute;

  z-index: 5;

  bottom: 25px;

  left: 5%;

  color: #777287;

  font-size: 10px;

  letter-spacing: 2px;
}

.scroll span {

  color: var(--accent);

  margin-left: 8px;
}


/* =====================================================
   GENERAL SECTIONS
   ===================================================== */

.section {

  padding: 110px 5%;
}

.section-grid {

  width: min(1100px,100%);

  margin: auto;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 80px;

  align-items: center;
}


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

.art-card {

  min-height: 480px;

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

  background:
    linear-gradient(
      145deg,
      #1a142d,
      #0e0b18
    );

  padding: 14px;

  transform: rotate(-1deg);

  box-shadow:
    0 25px 80px
    rgba(0,0,0,.4);
}


/* =====================================================
   INTRO IMAGE + TEXT
   ===================================================== */

.mock-screen {

  position: relative;

  height: 100%;

  min-height: 450px;

  overflow: hidden;

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

  background: #14101f;
}


/* Image behind the text */

.mock-screen > img {

  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  max-width: none;

  object-fit: cover;

  object-position: center;

  display: block;
}


/* Dark overlay over image */

.mock-screen::after {

  content: "";

  position: absolute;

  inset: 0;

  z-index: 1;

  background:

    linear-gradient(
      180deg,
      rgba(8,6,23,.10) 0%,
      rgba(8,6,23,.20) 40%,
      rgba(8,6,23,.82) 100%
    );
}


/* Text above image */

.mock-screen-content {

  position: absolute;

  z-index: 2;

  left: 35px;

  right: 35px;

  bottom: 35px;
}


.mock-screen-content span {

  color: var(--accent);

  font-size: 11px;

  letter-spacing: 3px;
}


.mock-screen-content b {

  display: block;

  font-family: Anton, Impact, sans-serif;

  font-size: 48px;

  line-height: .95;

  margin-top: 15px;

  color: #fff;

  text-shadow:
    0 3px 12px rgba(0,0,0,.65);
}


h2 {

  font-size: clamp(48px,6vw,78px);
}

h2 span {

  color: var(--pink);
}


.lead {

  font-size: 18px;

  color: #ddd8e8;

  margin: 25px 0 16px;
}


.section-grid p:not(.lead) {

  color: var(--muted);
}


.text-link {

  display: inline-block;

  margin-top: 28px;

  color: var(--accent);

  font-weight: 800;

  font-size: 12px;

  letter-spacing: 1.5px;

  transition: transform .25s;
}


.text-link:hover {

  transform: translateX(5px);
}


/* =====================================================
   FEATURES
   ===================================================== */

.features {

  background:
    linear-gradient(
      180deg,
      #0d091d,
      #100a20 55%,
      #090c1e
    );
}


.section-heading {

  text-align: center;

  max-width: 750px;

  margin: 0 auto 55px;
}


.section-heading p {

  color: var(--muted);

  margin-top: 14px;
}


.feature-grid {

  max-width: 1100px;

  margin: auto;

  display: grid;

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

  gap: 16px;
}


.feature {

  padding: 32px;

  min-height: 210px;

  background:
    linear-gradient(
      145deg,
      #171325,
      #0f0c18
    );

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

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


.feature:hover {

  transform: translateY(-6px);

  border-color:
    rgba(255,181,46,.45);

  box-shadow:
    0 20px 50px
    rgba(0,0,0,.25);
}


.icon {

  font-size: 30px;

  margin-bottom: 20px;
}


.feature h3 {

  font-size: 16px;

  letter-spacing: 2px;

  margin-bottom: 8px;
}


.feature p {

  color: var(--muted);

  font-size: 14px;
}


/* =====================================================
   FEATURE ICON COLORS
   ===================================================== */

.feature:nth-child(3n+1) .icon {
  color: var(--pink);
}

.feature:nth-child(3n+2) .icon {
  color: var(--purple);
}

.feature:nth-child(3n) .icon {
  color: var(--blue);
}


/* =====================================================
   TRAILER
   ===================================================== */

.trailer {

  background:
    linear-gradient(
      135deg,
      #080817,
      #120a25,
      #081322
    );

  padding-top: 70px;

  padding-bottom: 70px;
}


.video-placeholder {

  max-width: 1050px;

  margin: auto;

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

  background: #000;

  overflow: hidden;

  box-shadow:
    0 25px 80px
    rgba(0,0,0,.4);
}


.video-wrapper {

  position: relative;

  width: 100%;

  aspect-ratio: 16 / 9;

  overflow: hidden;
}


.video-wrapper iframe {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  border: 0;
}


/* =====================================================
   SCREENSHOTS
   ===================================================== */

.screens {

  background:
    linear-gradient(
      180deg,
      #080617,
      #0d0a1b
    );
}


.gallery {

  max-width: 1100px;

  margin: auto;

  display: grid;

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

  gap: 14px;
}


.shot {

  aspect-ratio: 16 / 10;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #777185;

  font-size: 11px;

  letter-spacing: 2px;

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

  background:
    linear-gradient(
      135deg,
      #211b31,
      #100d19
    );

  transition:
    transform .25s,
    border-color .25s;

  overflow: hidden;
}


.shot img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  transition:
    transform .35s;
}


.shot:hover {

  transform: scale(1.02);

  color: var(--accent);

  border-color:
    rgba(255,181,46,.4);
}


.shot:hover img {

  transform: scale(1.05);
}


/* =====================================================
   STORY
   ===================================================== */

.story {

  min-height: 650px;

  display: flex;

  align-items: center;

  background:

    radial-gradient(
      circle at 75% 50%,
      rgba(255,92,168,.22),
      transparent 25%
    ),

    radial-gradient(
      circle at 55% 35%,
      rgba(76,168,255,.16),
      transparent 25%
    ),

    linear-gradient(
      90deg,
      #090716 0%,
      #170d2b 55%,
      #0b1427 100%
    );
}


.story > div {

  max-width: 650px;

  margin-left: 8%;
}


.story p {

  color: var(--muted);

  margin: 16px 0;
}


/* =====================================================
   QUOTE
   ===================================================== */

.quote {

  text-align: center;

  padding: 120px 5%;

  background:
    linear-gradient(
      135deg,
      #100a21,
      #160d31,
      #0b1529
    );
}


.quote-mark {

  color: var(--accent);

  font-family: Georgia, serif;

  font-size: 80px;

  line-height: .5;
}


.quote h2 {

  font-size:
    clamp(38px,6vw,70px);
}


/* =====================================================
   DOWNLOAD
   ===================================================== */

.download {

  text-align: center;

  background:

    radial-gradient(
      circle at 50% 0%,
      rgba(255,92,168,.22),
      transparent 35%
    ),

    linear-gradient(
      135deg,
      #15102c,
      #211044 55%,
      #0b1730
    );
}


.download p {

  color: var(--muted);

  margin: 16px 0 28px;
}


/* =====================================================
   GOOGLE PLAY BUTTON
   ===================================================== */

.google-play-btn {

  display: inline-flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  width: 190px;

  min-height: 64px;

  padding: 12px 20px;

  background: #90ee90;

  color: #071007;

  border: 1px solid #b8ffb8;

  border-radius: 5px;

  font-weight: 800;

  letter-spacing: .5px;

  text-decoration: none;

  transition:
    transform .25s,
    filter .25s;
}


.google-play-btn small {

  display: block;

  font-size: 9px;

  line-height: 1.2;

  letter-spacing: 1px;

  color: #071007;
}


.google-play-btn strong {

  display: block;

  font-size: 20px;

  line-height: 1.2;

  color: #071007;
}


.google-play-btn:hover {

  transform: translateY(-3px);

  filter: brightness(1.08);
}


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

footer {

  padding: 40px 5%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

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

  color: #777185;

  font-size: 12px;
}


.footer-brand {

  font-size: 16px;
}


.footer-links {

  display: flex;

  gap: 20px;
}


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

@media (max-width: 1000px) {

  .hero-character {

    width: 70vw;

    right: -8%;

    opacity: .95;
  }


  .hero-content {

    width: 90%;
  }

}


@media (max-width: 800px) {

  nav {
    display: none;
  }


  .topbar {
    height: 65px;
  }


  .hero-content {
    padding-top: 80px;
  }


  .hero-character {

    width: 75vw;

    right: -15%;
  }


  .hero-stats {

    gap: 20px;

    margin-top: 40px;
  }


  .section {

    padding: 80px 5%;
  }


  .section-grid {

    grid-template-columns: 1fr;

    gap: 45px;
  }


  .art-card {
    min-height: 350px;
  }


  .mock-screen {
    min-height: 320px;
  }


  .mock-screen-content {

    left: 25px;

    right: 25px;

    bottom: 25px;
  }


  .mock-screen-content b {

    font-size: 42px;
  }


  .feature-grid {

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


  .gallery {

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


  .story > div {
    margin-left: 0;
  }


  footer {

    flex-direction: column;

    text-align: center;
  }


  .video-placeholder {
    width: 100%;
  }

}


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

@media (max-width: 700px) {

  .hero {

    min-height: 850px;

    align-items: flex-start;
  }


  .hero-character {

    top: auto;

    bottom: -20px;

    right: -25%;

    transform: none;

    width: 125vw;

    height: auto;

    opacity: .55;
  }


  .hero-character img {

    width: 100%;

    max-height: none;
  }


  .hero-overlay {

    background:

      linear-gradient(

        180deg,

        rgba(8,6,23,.98) 0%,

        rgba(8,6,23,.94) 35%,

        rgba(8,6,23,.72) 60%,

        rgba(8,6,23,.35) 100%

      );
  }


  .hero-content {

    padding-top: 130px;
  }


  .scroll {

    left: 50%;

    transform: translateX(-50%);

    white-space: nowrap;
  }

}


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

@media (max-width: 520px) {

  .nav-btn {
    display: none;
  }


  .brand {

    font-size: 13px;
  }


  h1 {

    font-size:
      clamp(58px,18vw,90px);
  }


  .hero-content > p {

    font-size: 16px;
  }


  .feature-grid,
  .gallery {

    grid-template-columns: 1fr;
  }


  .hero-stats strong {

    font-size: 20px;
  }


  .hero-stats small {

    font-size: 8px;
  }


  .hero-buttons .btn {

    width: 100%;
  }


  .hero-stats {

    gap: 15px;
  }


  .mock-screen-content {

    left: 20px;

    right: 20px;

    bottom: 20px;
  }


  .mock-screen-content b {

    font-size:
      clamp(34px,10vw,44px);
  }


  .trailer {

    padding-top: 50px;

    padding-bottom: 50px;
  }


  .story {

    min-height: 550px;
  }


  .quote {

    padding: 90px 5%;
  }


  footer {

    padding: 30px 5%;
  }


  .footer-links {

    flex-direction: column;

    gap: 10px;
  }

}