/*
  Empire Unbroken's website, in the game's own look: its night sky, dusk and gold (App/Sources/UI/Theme.swift), and
  its type, SF Pro: expanded capitals for names and headings, rounded for what a player reads (MenuFont).
*/

:root {
  color-scheme: dark;

  /* The game's palette (Theme.swift). */
  --night: #050920;
  --night-raised: #0b1030;
  --dusk: #2b1846;
  --violet: #4a2f6e;
  --ember: #e86a3e;
  --dawn: #ffb866;
  --gold: #ebc261;
  --gold-light: #ffe8a8;
  --gold-glint: #fff5d1;
  --gold-deep: #cc9438;
  --gold-shade: #9c6626;
  --parchment: #eddebd;

  --text: #efe9df;
  --text-soft: #c9c1d6;
  --text-faint: #958ca8;
  --panel: rgba(18, 16, 40, 0.66);
  --panel-solid: #12102a;
  --line: rgba(235, 194, 97, 0.2);
  --line-strong: rgba(235, 194, 97, 0.45);

  --gold-text: linear-gradient(180deg, var(--gold-glint) 0%, var(--gold-light) 30%, var(--gold) 55%, var(--gold-deep) 85%, var(--gold-shade) 100%);
  --gold-fill: linear-gradient(180deg, #ffe7a8 0%, #ebc261 45%, #cc9438 100%);

  --display: "SF Pro Display", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --numeral: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;

  --radius: 22px;
  --gutter: clamp(16px, 4vw, 40px);
  --measure: 1180px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--night);
  color: var(--text);
  font-family: var(--rounded);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a {
  color: var(--gold-light);
  text-decoration-color: rgba(255, 232, 168, 0.4);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--gold-glint);
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection {
  background: rgba(235, 194, 97, 0.35);
  color: #fff;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--night);
  font-weight: 700;
  text-decoration: none;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 16px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.wrap {
  width: 100%;
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Type ---------- */

.caps {
  font-family: var(--display);
  font-stretch: expanded;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  color: var(--gold);
  font-family: var(--display);
  font-stretch: expanded;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

.gold-text {
  background: var(--gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--display);
  font-stretch: expanded;
  line-height: 1.1;
  text-wrap: balance;
}

h2 {
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

h3 {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800;
  letter-spacing: 0.01em;
}

p {
  margin: 0 0 1em;
}

.lead {
  color: var(--text-soft);
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.6;
  text-wrap: pretty;
}

/* ---------- Buttons ---------- */

.button {
  --shine: -120%;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  font-family: var(--rounded);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s;
}

.button svg {
  width: 20px;
  height: 20px;
  flex: none;
}

.button-gold {
  background: var(--gold-fill);
  color: #2a1a06;
  box-shadow: 0 10px 30px -10px rgba(235, 160, 70, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 0 rgba(120, 70, 10, 0.35);
}

/* A glint that crosses the gold, as on the game's buttons. */
.button-gold::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
  transform: translateX(var(--shine));
  transition: transform 0.8s var(--ease);
}

.button-gold:hover {
  color: #2a1a06;
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -12px rgba(255, 180, 90, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 0 rgba(120, 70, 10, 0.35);
}

.button-gold:hover::after {
  --shine: 120%;
}

.button-ghost {
  background: rgba(10, 12, 36, 0.4);
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(255, 232, 168, 0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.button-ghost:hover {
  color: var(--gold-glint);
  background: rgba(30, 24, 60, 0.6);
  box-shadow: inset 0 0 0 1px rgba(255, 232, 168, 0.7);
}

.button-small {
  min-height: 40px;
  padding: 0 18px;
  font-size: 15px;
}

/* ---------- The bar along the top ---------- */

.site-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  transition: background-color 0.35s, box-shadow 0.35s, -webkit-backdrop-filter 0.35s, backdrop-filter 0.35s;
}

.site-nav.is-scrolled,
.site-nav.is-solid {
  background: rgba(5, 9, 32, 0.72);
  box-shadow: 0 1px 0 var(--line);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  backdrop-filter: saturate(140%) blur(18px);
}

.site-nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  text-decoration: none;
}

.brand img {
  width: 36px;
  height: 36px;
  filter: drop-shadow(0 0 10px rgba(255, 184, 102, 0.45));
}

.brand span {
  font-family: var(--display);
  font-stretch: expanded;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.brand:hover {
  color: var(--gold-glint);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 30px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-links a:not(.button) {
  color: var(--text-soft);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s;
}

.nav-links a:not(.button):hover,
.nav-links a[aria-current="page"] {
  color: var(--gold-light);
}

@media (max-width: 760px) {
  .nav-links .nav-text {
    display: none;
  }
}

@media (max-width: 420px) {
  .brand span {
    font-size: 12px;
    letter-spacing: 0.14em;
  }
}

/* ---------- The hero ---------- */

/* Three bands over the game's backdrop: the name in the night sky, the town of five ages left open in the middle,
   and the pitch over the dark lake. The backdrop's town runs through the middle of the picture, so a centred crop
   keeps it there at any width. */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  min-height: 100svh;
  padding: 92px 0 84px;
  overflow: hidden;
  text-align: center;
}

.hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero-backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
  animation: drift 40s ease-in-out infinite alternate;
}

/* The sky and the lake darkened a little behind the words; the town in the middle is left as it is. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 50% 26% at 50% 17%, rgba(5, 9, 32, 0.55), rgba(5, 9, 32, 0) 100%),
    linear-gradient(180deg, rgba(5, 9, 32, 0.6) 0%, rgba(5, 9, 32, 0.1) 26%, rgba(5, 9, 32, 0) 40%, rgba(5, 9, 32, 0) 62%, rgba(5, 9, 32, 0.45) 78%, rgba(5, 9, 32, 0.9) 100%);
}

.hero-top,
.hero-bottom {
  display: grid;
  justify-items: center;
}

.hero-top {
  align-self: start;
}

.hero-bottom {
  grid-row: 3;
  align-self: end;
}

.hero-emblem {
  width: clamp(54px, 6vw, 76px);
  height: auto;
  margin-bottom: 14px;
  filter: drop-shadow(0 0 22px rgba(255, 170, 90, 0.6)) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
  animation: rise 1.2s var(--ease) both, glow 6s ease-in-out 1.2s infinite alternate;
}

/* EMPIRE UNBROKEN on one line, as on the game's home screen; on a phone, two. A highlight crosses the gold now and
   then, in the gradient's first layer. */
.wordmark {
  font-size: clamp(34px, 6.1vw, 92px);
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  /* The last letter's tracking would push the word off centre. */
  margin-right: -0.1em;
  background-image: linear-gradient(105deg, rgba(255, 250, 230, 0) 42%, rgba(255, 250, 230, 0.95) 50%, rgba(255, 250, 230, 0) 58%), var(--gold-text);
  background-size: 260% 100%, 100% 100%;
  background-position: 130% 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 22px rgba(0, 0, 0, 0.6));
  animation: rise 1.2s var(--ease) 0.12s both, glint 8s ease-in-out 2s infinite;
}

@media (max-width: 700px) {
  .wordmark {
    font-size: clamp(34px, 11.5vw, 64px);
    white-space: normal;
  }

  .wordmark span {
    display: block;
  }
}

.tagline {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 18px 0 0;
  color: var(--gold-light);
  font-family: var(--display);
  font-stretch: expanded;
  font-size: clamp(11px, 1.3vw, 16px);
  font-weight: 700;
  letter-spacing: 0.42em;
  margin-right: -0.42em;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(5, 9, 32, 0.9);
  animation: rise 1.2s var(--ease) 0.24s both;
}

.tagline::before,
.tagline::after {
  content: "";
  width: clamp(28px, 6vw, 72px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

.tagline::after {
  transform: scaleX(-1);
  margin-left: -0.42em;
}

.hero .lead {
  max-width: 640px;
  margin: 0;
  text-wrap: balance;
  color: #f1eadf;
  font-weight: 600;
  text-shadow: 0 1px 14px rgba(5, 9, 32, 0.95), 0 0 2px rgba(5, 9, 32, 0.8);
  animation: rise 1.2s var(--ease) 0.36s both;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 22px;
  animation: rise 1.2s var(--ease) 0.46s both;
}

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 22px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  color: var(--parchment);
  font-size: 14px;
  font-weight: 600;
  animation: rise 1.2s var(--ease) 0.56s both;
}

.hero-facts li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-shadow: 0 1px 10px rgba(5, 9, 32, 0.9);
}

.hero-facts li::before {
  content: "";
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  background: var(--gold);
  box-shadow: 0 0 8px rgba(255, 200, 110, 0.8);
}

@media (max-width: 560px) {
  /* On a phone the scroll cue says it; the one button left is the App Store's. */
  .hero-actions .button-ghost {
    display: none;
  }

  .hero-facts {
    gap: 4px 16px;
    font-size: 13px;
  }
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 20px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  border-radius: 50%;
  color: var(--gold-light);
  box-shadow: inset 0 0 0 1px rgba(255, 232, 168, 0.35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: bob 2.6s ease-in-out infinite;
}

.scroll-cue svg {
  width: 18px;
  height: 18px;
}

/* ---------- Sections ---------- */

.section {
  position: relative;
  padding: clamp(80px, 11vw, 140px) 0;
}

.section-head {
  max-width: 760px;
  margin: 0 auto clamp(44px, 6vw, 72px);
  text-align: center;
}

.section-head .eyebrow::after {
  content: "";
  width: 28px;
  height: 1px;
  background: linear-gradient(270deg, transparent, var(--gold));
}

.section-head h2 {
  margin-bottom: 18px;
}

/* An ornament between sections: a line of gold with a keystone in the middle. */
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  max-width: 420px;
  margin: 0 auto;
}

.ornament::before,
.ornament::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong));
}

.ornament::after {
  transform: scaleX(-1);
}

.ornament i {
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  border: 1px solid var(--gold);
  box-shadow: 0 0 10px rgba(235, 194, 97, 0.5);
}

/* ---------- The five ages ---------- */

.ages {
  background:
    radial-gradient(ellipse 60% 50% at 85% 10%, rgba(232, 106, 62, 0.12), transparent 70%),
    radial-gradient(ellipse 60% 60% at 10% 90%, rgba(74, 47, 110, 0.35), transparent 70%),
    var(--night);
}

.age-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: age;
}

/* The road the ages are on: from night on the left to day on the right, as in the game's backdrop. */
.age-track::before {
  content: "";
  position: absolute;
  top: 34px;
  left: 6%;
  right: 6%;
  height: 2px;
  background: linear-gradient(90deg, rgba(74, 47, 110, 0.9), var(--gold-deep) 50%, var(--dawn));
  box-shadow: 0 0 18px rgba(255, 184, 102, 0.35);
}

.age {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  padding: 0 6px;
  text-align: center;
}

.age-numeral {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin-bottom: 22px;
  border-radius: 50%;
  background: var(--gold-fill);
  color: #3b2507;
  font-family: var(--numeral);
  font-size: 26px;
  font-weight: 700;
  box-shadow: 0 0 0 6px var(--night), 0 0 0 7px var(--line-strong), 0 10px 30px -6px rgba(255, 170, 80, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: transform 0.4s var(--ease);
}

.age:hover .age-numeral {
  transform: translateY(-4px) scale(1.06);
}

.age h3 {
  margin-bottom: 6px;
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.age-period {
  margin: 0 0 12px;
  color: var(--gold);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.age p:last-child {
  margin: 0;
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .age-track {
    grid-template-columns: 1fr;
    gap: 34px;
    max-width: 520px;
    margin: 0 auto;
  }

  .age-track::before {
    top: 10px;
    bottom: 10px;
    left: 33px;
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, rgba(74, 47, 110, 0.9), var(--gold-deep) 50%, var(--dawn));
  }

  .age {
    grid-template-columns: 68px 1fr;
    column-gap: 22px;
    justify-items: start;
    padding: 0;
    text-align: left;
  }

  .age-numeral {
    grid-row: span 3;
    margin: 0;
  }

  .age h3 {
    align-self: end;
    margin-top: 6px;
  }
}

/* ---------- Screenshots ---------- */

.showcase {
  background: linear-gradient(180deg, var(--night) 0%, #0a0b2a 40%, #120f33 100%);
}

.feature {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
}

.feature + .feature {
  margin-top: clamp(80px, 10vw, 130px);
}

.feature:nth-child(even) .feature-text {
  order: 2;
}

.feature-text p {
  color: var(--text-soft);
  font-size: 17px;
}

.feature-text h3 {
  margin-bottom: 18px;
}

.feature-points {
  display: grid;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  color: var(--text);
  font-size: 15.5px;
}

.feature-points li {
  position: relative;
  padding-left: 22px;
}

.feature-points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: var(--gold);
}

/* A landscape phone around each screenshot. */
.device {
  position: relative;
  margin: 0;
  padding: clamp(6px, 0.9vw, 11px);
  border-radius: clamp(22px, 3vw, 40px);
  background: linear-gradient(145deg, #2c2a3a, #0d0c14 40%, #1d1b28);
  box-shadow:
    0 0 0 1px rgba(255, 232, 168, 0.18),
    0 40px 80px -30px rgba(0, 0, 0, 0.85),
    0 20px 60px -20px rgba(232, 106, 62, 0.25);
  transform: perspective(1600px) rotateY(var(--tilt, -6deg)) rotateX(2deg);
  transition: transform 0.7s var(--ease), box-shadow 0.7s var(--ease);
}

.feature:nth-child(even) .device {
  --tilt: 6deg;
}

.device:hover {
  transform: perspective(1600px) rotateY(0deg) rotateX(0deg) translateY(-6px);
  box-shadow:
    0 0 0 1px rgba(255, 232, 168, 0.32),
    0 50px 90px -30px rgba(0, 0, 0, 0.9),
    0 26px 70px -20px rgba(255, 170, 90, 0.35);
}

.device button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: clamp(16px, 2.2vw, 30px);
  overflow: hidden;
  background: #000;
  cursor: zoom-in;
}

.device img {
  width: 100%;
  height: auto;
  aspect-ratio: 2868 / 1320;
  object-fit: cover;
}

.device figcaption {
  position: absolute;
  left: 50%;
  bottom: -38px;
  transform: translateX(-50%);
  color: var(--text-faint);
  font-size: 13px;
  white-space: nowrap;
}

@media (max-width: 860px) {
  .feature {
    grid-template-columns: 1fr;
  }

  .feature:nth-child(even) .feature-text {
    order: 0;
  }

  .device,
  .feature:nth-child(even) .device {
    --tilt: 0deg;
    transform: none;
  }

  .device figcaption {
    position: static;
    margin-top: 14px;
    transform: none;
    text-align: center;
    white-space: normal;
  }
}

/* ---------- Numbers ---------- */

.numbers {
  padding: clamp(56px, 7vw, 84px) 0;
  border-block: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(74, 47, 110, 0.25), rgba(232, 106, 62, 0.12)),
    #0c0b26;
}

.numbers ul {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.numbers strong {
  display: block;
  font-family: var(--display);
  font-stretch: expanded;
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 900;
  line-height: 1;
  background: var(--gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.numbers span {
  display: block;
  margin-top: 10px;
  color: var(--text-soft);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

@media (max-width: 760px) {
  .numbers ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 36px;
  }

  .numbers li:last-child {
    grid-column: span 2;
  }
}

/* ---------- Everything else ---------- */

.features {
  background:
    radial-gradient(ellipse 50% 40% at 50% 0%, rgba(235, 194, 97, 0.08), transparent 70%),
    var(--night);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card {
  position: relative;
  padding: 28px 26px 26px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(36, 30, 70, 0.55), rgba(16, 14, 38, 0.55));
  box-shadow: inset 0 0 0 1px var(--line);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), background-color 0.4s;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 1px var(--line-strong), 0 24px 50px -24px rgba(255, 170, 90, 0.35);
}

.card-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 232, 168, 0.18), rgba(204, 148, 56, 0.1));
  box-shadow: inset 0 0 0 1px rgba(255, 232, 168, 0.3);
  color: var(--gold-light);
}

.card-icon svg {
  width: 24px;
  height: 24px;
}

.card h3 {
  margin-bottom: 8px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.card p {
  margin: 0;
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.55;
}

@media (max-width: 1040px) {
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- The last call ---------- */

.finale {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(110px, 14vw, 180px) 0;
  text-align: center;
}

.finale::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 55% 75% at 50% 100%, rgba(255, 184, 102, 0.55), rgba(232, 106, 62, 0.3) 35%, rgba(74, 47, 110, 0.25) 65%, transparent 80%),
    linear-gradient(180deg, var(--night), #14133d 60%, #2b1846);
}

.finale img {
  width: clamp(110px, 14vw, 160px);
  height: auto;
  margin: 0 auto 28px;
  filter: drop-shadow(0 0 36px rgba(255, 184, 102, 0.6));
}

.finale h2 {
  font-size: clamp(34px, 6vw, 72px);
  margin-right: -0.1em;
  letter-spacing: 0.1em;
}

.finale p {
  margin: 18px auto 34px;
  max-width: 520px;
  color: var(--parchment);
}

/* ---------- The foot of every page ---------- */

.site-footer {
  padding: 56px 0 44px;
  border-top: 1px solid var(--line);
  background: #040718;
  color: var(--text-faint);
  font-size: 14px;
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 28px;
  margin-bottom: 26px;
  border-bottom: 1px solid rgba(235, 194, 97, 0.12);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links a {
  color: var(--text-soft);
  font-weight: 600;
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--gold-light);
}

.site-footer p {
  margin: 0 0 6px;
}

/* ---------- Privacy and support pages ---------- */

.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(140px, 20vh, 200px) 0 clamp(60px, 8vw, 96px);
  text-align: center;
}

.page-hero img.page-hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 58%;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(5, 9, 32, 0.82), rgba(5, 9, 32, 0.6) 50%, var(--night));
}

.page-hero h1 {
  font-size: clamp(34px, 6vw, 64px);
  font-weight: 900;
  letter-spacing: 0.08em;
  margin-right: -0.08em;
  text-transform: uppercase;
}

.page-hero .lead {
  max-width: 640px;
  margin: 18px auto 0;
  color: #e6def0;
}

.page-body {
  padding: 0 0 clamp(80px, 10vw, 120px);
}

.prose {
  max-width: 760px;
  margin: 0 auto;
}

.prose h2 {
  margin: 56px 0 16px;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 900;
  letter-spacing: 0.06em;
}

.prose h3 {
  margin: 30px 0 10px;
  font-size: 18px;
  font-weight: 800;
}

.prose p,
.prose li {
  color: var(--text-soft);
}

.prose strong {
  color: var(--text);
}

.prose ul {
  padding-left: 22px;
}

.prose li {
  margin-bottom: 8px;
}

.prose li::marker {
  color: var(--gold);
}

.updated {
  color: var(--text-faint);
  font-size: 14px;
}

.callout {
  margin: 0 0 36px;
  padding: 26px 28px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(235, 194, 97, 0.14), rgba(74, 47, 110, 0.3));
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.callout p {
  margin: 0;
  color: var(--text);
  font-size: 18px;
}

.callout p + p {
  margin-top: 10px;
  color: var(--text-soft);
  font-size: 16px;
}

.contact-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px;
  margin: 0 0 30px;
  padding: 28px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(235, 194, 97, 0.16), rgba(74, 47, 110, 0.32));
  box-shadow: inset 0 0 0 1px var(--line-strong), 0 30px 60px -30px rgba(255, 170, 90, 0.3);
}

.contact-card .card-icon {
  margin: 0;
  width: 56px;
  height: 56px;
}

.contact-card h2 {
  margin: 0 0 4px;
  font-size: 20px;
}

.contact-card p {
  margin: 0;
  color: var(--text-soft);
}

.contact-card .email {
  color: var(--gold-light);
  font-weight: 700;
  word-break: break-all;
}

@media (max-width: 640px) {
  .contact-card {
    grid-template-columns: 1fr;
    text-align: left;
  }
}

.faq {
  display: grid;
  gap: 12px;
}

.faq details {
  border-radius: 18px;
  background: rgba(24, 20, 52, 0.6);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow 0.3s, background-color 0.3s;
}

.faq details[open] {
  background: rgba(30, 24, 62, 0.75);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.faq summary {
  position: relative;
  padding: 20px 56px 20px 24px;
  color: var(--text);
  font-size: 17px;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  position: absolute;
  right: 26px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -7px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
  transition: transform 0.3s var(--ease);
}

.faq details[open] summary::after {
  transform: rotate(225deg);
  margin-top: -2px;
}

.faq .answer {
  padding: 0 24px 20px;
}

.faq .answer p,
.faq .answer li {
  color: var(--text-soft);
}

.faq .answer > :last-child {
  margin-bottom: 0;
}

.not-found {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 120px var(--gutter) 80px;
  text-align: center;
}

.not-found img {
  width: 120px;
  margin: 0 auto 24px;
  filter: drop-shadow(0 0 30px rgba(255, 184, 102, 0.5));
}

/* ---------- The screenshot viewer ---------- */

.viewer {
  width: min(96vw, 1600px);
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: 24px;
  overflow: visible;
  background: transparent;
}

.viewer::backdrop {
  background: rgba(3, 5, 18, 0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.viewer img {
  width: 100%;
  height: auto;
  max-height: 86vh;
  object-fit: contain;
  border-radius: 20px;
  box-shadow: 0 0 0 1px rgba(255, 232, 168, 0.25), 0 40px 120px rgba(0, 0, 0, 0.7);
}

.viewer p {
  margin: 14px 0 0;
  color: var(--text-soft);
  text-align: center;
}

.viewer-close {
  position: absolute;
  top: -18px;
  right: -10px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--gold-fill);
  color: #2a1a06;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

.viewer-close svg {
  width: 18px;
  height: 18px;
}

/* ---------- Revealed on scroll (only once the script runs) ---------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--delay, 0s);
}

/* Staggered: each step of a row rises a little after the one before. */
.d1 {
  --delay: 0.08s;
}

.d2 {
  --delay: 0.16s;
}

.d3 {
  --delay: 0.24s;
}

.d4 {
  --delay: 0.32s;
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- Motion ---------- */

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
}

@keyframes drift {
  from {
    transform: scale(1.02);
  }
  to {
    transform: scale(1.08) translate3d(-1%, 0, 0);
  }
}

@keyframes glow {
  to {
    filter: drop-shadow(0 0 42px rgba(255, 190, 110, 0.8)) drop-shadow(0 6px 18px rgba(0, 0, 0, 0.5));
  }
}

@keyframes glint {
  0%,
  60% {
    background-position: 130% 0, 0 0;
  }
  100% {
    background-position: -30% 0, 0 0;
  }
}

@keyframes bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .hero-backdrop img {
    animation: none;
  }


  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

.not-found h1 {
  margin-bottom: 8px;
  font-size: clamp(30px, 5vw, 52px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}