/* ---------- fonts (self-hosted, latin subset) ---------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/poppins-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- tokens ---------- */
:root {
  --bg: rgb(46, 63, 139);
  --white: #FFFFFF;
  --subtitle: #E7E7E7;
  --credit: #585858;

  --gutter-x: 96px;
  --visual-w: 500px;   /* photo panel width — goes fluid under 1300px */
  --gutter-top: 40px;
  --col-left: 900px;

  --font-display: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--bg);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}

:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 2px; }

/* ---------- decorative arcs ---------- */
.arcs {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.arcs svg { width: 100%; height: 100%; }

/* ---------- layout ---------- */
.page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  padding-top: var(--gutter-top);
}

/* left column ------------------------------------------------ */
.col-left {
  display: flex;
  flex-direction: column;
  padding-left: var(--gutter-x);
  padding-right: 48px;
  padding-bottom: 56px;
  max-width: var(--col-left);
}

.brand { flex: 0 0 auto; }
.brand a { display: inline-block; }
.logo { width: 200px; height: 70px; object-fit: contain; }

/* hero — vertically centred in the remaining space */
.hero {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero__title {
  margin: 0;
  max-width: 620px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 45px;
  line-height: 56px;
  letter-spacing: 0.01em; /* 1% */
  color: var(--white);
  text-align: left;
}

.hero__subtitle {
  margin: 30px 0 0;
  max-width: 640px;
  font-family: var(--font-body);
  font-weight: 350;
  font-size: 18px;
  line-height: normal;
  letter-spacing: 0.02em; /* 2% */
  color: var(--subtitle);
  text-align: left;
}

.stores {
  margin-top: 30px;
  display: flex;
  gap: 5px;
}
.stores__link {
  display: block;
  border-radius: 10px;
  transition: transform .18s ease;
}
.stores__link:hover { transform: translateY(-2px); }
.stores__link img { width: 139px; height: 39px; object-fit: contain; }

@media (prefers-reduced-motion: reduce) {
  .stores__link { transition: none; }
  .stores__link:hover { transform: none; }
}

/* legal block ------------------------------------------------ */
.legal {
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 10px;
  line-height: normal;
  letter-spacing: 0;
  color: var(--white);
}
.legal__links { display: flex; gap: 10px; }
.legal a {
  color: var(--white);
  text-decoration: none;
}
.legal a:hover { text-decoration: underline; }
.legal__mail {
  display: inline-block;
  margin-top: 10px;
}

/* right column ----------------------------------------------- */
.col-right {
  position: relative;
  padding-right: var(--gutter-x);
  /* room for the hand overhanging to the left — scales with the panel */
  padding-left: calc(var(--visual-w) * 0.29 + 35px);
}

.visual {
  position: relative;
  margin: 0;
  width: var(--visual-w);
  height: auto;
  aspect-ratio: 1 / 1.6;   /* 500 x 800 */
}

.visual__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
}

.visual__hand {
  position: absolute;
  left: -29%;      /* 145 / 500 */
  bottom: -5%;     /*  40 / 800 */
  width: 115.2%;   /* 576 / 500 */
  height: auto;
  max-width: none;
  filter: drop-shadow(0 18px 40px rgba(16, 24, 64, .22));
}
.visual__hand-img { width: 100%; height: auto; }

/* gameplay video sitting in the phone's screen. Box and mask are measured
   from hand.png (963 x 1253): screen spans x 181–626, y 34–963. The mask
   rounds the corners and leaves the phone's notch uncovered. */
.visual__screen {
  position: absolute;
  left: 18.796%;   /* 181 / 963 */
  top: 2.7135%;    /*  34 / 1253 */
  width: 46.21%;   /* 445 / 963 */
  height: 74.142%; /* 929 / 1253 */
  object-fit: cover;
  background: #F0EFEB;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 445 929' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M62 0H383A62 62 0 0 1 445 62V867A62 62 0 0 1 383 929H62A62 62 0 0 1 0 867V62A62 62 0 0 1 62 0ZM97 -1C98 4 99 10 100 16C102 28 108 34 121 34H328C340 34 345 28 345 16C346 10 347 4 349 -1Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 445 929' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M62 0H383A62 62 0 0 1 445 62V867A62 62 0 0 1 383 929H62A62 62 0 0 1 0 867V62A62 62 0 0 1 62 0ZM97 -1C98 4 99 10 100 16C102 28 108 34 121 34H328C340 34 345 28 345 16C346 10 347 4 349 -1Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.visual__credit {
  position: absolute;
  left: 16px;
  bottom: 12px;
  z-index: 2;
  font-family: var(--font-body);
  font-size: 10px;
  line-height: normal;
  color: var(--credit);
}
.visual__credit a { color: inherit; text-decoration: underline; }

/* made-in line ------------------------------------------------ */
.made {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  color: var(--white);
  white-space: nowrap;
}

/* keep the composition intact on shorter / narrower desktops */
@media (max-width: 1440px) {
  :root { --gutter-x: 64px; }
  .col-right { padding-left: calc(var(--visual-w) * 0.29 - 5px); }
}

/* Under 1300px the fixed 500px panel starts squeezing the left column, so the
   whole visual scales down with the viewport instead of pushing the text. The
   reserve below is the left column's gutters (64 + 48 + 64) plus ~470px of text;
   1.29 is the panel plus the hand's 29% overhang. */
@media (max-width: 1300px) {
  :root {
    --visual-w: clamp(220px, calc((100vw - 646px) / 1.29), 500px);
  }

  /* once the panel no longer fills the column height, centre it vertically
     instead of leaving it pinned to the top */
  .col-right {
    display: flex;
    align-items: center;
  }

  .hero__title {
    font-size: clamp(30px, 3.4vw, 45px);
    line-height: 1.24;
  }
  .hero__subtitle { font-size: clamp(15px, 1.4vw, 18px); }
}

/* ---------- entrance animation ---------- */
/* the right-hand visual fades in first; the left column follows once it lands */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.visual,
.brand,
.hero,
.legal {
  opacity: 0;
  animation: fade-in var(--fade-duration, 1000ms) ease-out forwards;
}

.visual,
.brand,
.hero,
.legal { --fade-duration: 600ms; }

/* left column follows the visual closely so the headline shows up early */
.brand { animation-delay: 250ms; }
.hero  { animation-delay: 400ms; }
.legal { animation-delay: 550ms; }

/* honour the OS "reduce motion" setting: show everything immediately */
@media (prefers-reduced-motion: reduce) {
  .visual,
  .brand,
  .hero,
  .legal {
    opacity: 1;
    animation: none;
  }
}

/* ---------- hand flick ---------- */
/* mimics the in-game gesture: a sharp wrist flick that settles back down.
   Starts at 1150ms — the moment the left column finishes (550ms delay + 600ms). */
@keyframes hand-flick {
  0%   { transform: translateY(0)     rotate(0deg); }
  10%  { transform: translateY(-20px) rotate(-3.5deg); }
  24%  { transform: translateY(7px)   rotate(2.4deg); }
  38%  { transform: translateY(-13px) rotate(-2deg); }
  52%  { transform: translateY(5px)   rotate(1.4deg); }
  66%  { transform: translateY(-7px)  rotate(-0.9deg); }
  80%  { transform: translateY(2px)   rotate(0.5deg); }
  100% { transform: translateY(0)     rotate(0deg); }
}

.visual__hand {
  transform-origin: 50% 100%; /* pivot at the wrist, not the phone */
  animation: hand-flick 820ms 1150ms cubic-bezier(.36, .07, .19, .97) both;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .visual__hand {
    animation: none;
    transform: none;
  }
}

/* ---------- portrait: single stacked column ---------- */
/* Tablets in landscape keep the desktop composition above; portrait screens
   (tablets and phones) stack: logo, visual, then the whole info column. */
@media (orientation: portrait) and (max-width: 1180px) {
  :root { --gutter-x: 24px; }

  .page {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px var(--gutter-x) 40px;
  }

  /* hoist the left column's children into the page flow so they can be reordered */
  .col-left {
    display: contents;
  }

  .brand     { order: 1; }
  .col-right { order: 2; }
  .hero      { order: 3; }
  .legal     { order: 4; }
  .made      { order: 5; }

  .brand a { display: block; }

  /* visual ---------------------------------------------------- */
  .col-right {
    width: 100%;
    padding: 0;
    margin: 28px 0 40px; /* bottom margin covers the hand's overhang */
    display: flex;
    justify-content: center;
  }

  .visual {
    /* the photo panel and the hand are both centred on the viewport; the hand is
       115.2% as wide as the panel, so the width is capped so it still fits */
    width: clamp(240px, min(
      calc((100vw - 16px) / 1.152), /* the hand's own width — keeps it on screen */
      calc((100vh - 320px) / 1.6)   /* keep some room for the text below */
    ), 500px);
    height: auto;
    aspect-ratio: 1 / 1.6;
  }

  .visual__photo { width: 100%; height: 100%; }

  .visual__hand {
    width: 115.2%;  /* 576 / 500 */
    height: auto;
    left: -7.6%;    /* (100% - 115.2%) / 2 — centred on the panel */
    bottom: -5%;    /*  40 / 800 */
  }

  /* info column ----------------------------------------------- */
  .hero {
    flex: 0 0 auto;
    width: 100%;
    align-items: center;
    text-align: center;
  }

  .hero__title {
    font-size: clamp(28px, 5.6vw, 45px);
    line-height: 1.24;
    text-align: center;
  }

  .hero__subtitle {
    margin-top: 20px;
    font-size: clamp(15px, 2.2vw, 18px);
    text-align: center;
  }

  .stores { justify-content: center; gap: 10px; }

  .legal {
    width: 100%;
    margin-top: 32px;
    text-align: center;
  }
  .legal__links { justify-content: center; }

  .made {
    position: static;
    transform: none;
    margin-top: 20px;
  }
}

/* ---------- FAQ (below the fold) ---------- */
.faq {
  position: relative;
  z-index: 1;
  padding: 72px var(--gutter-x) 96px;
}
.faq__inner { max-width: 760px; }

.faq__title {
  margin: 0 0 24px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.25;
}

.faq__item { border-top: 1px solid rgba(255, 255, 255, .18); }
.faq__item:last-child { border-bottom: 1px solid rgba(255, 255, 255, .18); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 24px;
  line-height: 1;
  font-weight: 300;
  transition: transform .2s ease;
}
.faq__item[open] .faq__q::after { transform: rotate(45deg); }

.faq__q h3 {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
}

.faq__a {
  margin: 0;
  padding: 0 40px 20px 0;
  font-weight: 350;
  font-size: 16px;
  line-height: 1.6;
  color: var(--subtitle);
}
.faq__a a { text-decoration: underline; text-underline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .faq__q::after { transition: none; }
}

@media (orientation: portrait) and (max-width: 1180px) {
  .faq { padding: 48px var(--gutter-x) 64px; }
  .faq__inner { margin: 0 auto; }
  .faq__title { font-size: 26px; text-align: center; }
  .faq__q h3 { font-size: 16px; }
  .faq__a { padding-right: 0; font-size: 15px; }
}