/* Landing page — Albert: Akademia Mistrzów (Fale Loki Koki). Static, no build step.
   Visual language shared with the FLK games landing (gry.falelokikoki.wiki). */
:root {
  --bordo: #86004f;
  --bordo-deep: #45002a;
  --plum: #2a0a1f;
  --plum-2: #3a0f2b;
  --orange: #e9511d;
  --pink: #e83c6a;
  --gold: #ceab5b;
  --gold-light: #f4dc9a;
  --gold-pale: #fbefcf;
  --cream: #fff6e8;
  --cream-2: #fbe9cf;
  --paper: #fffaf2;
  --ink: #3d0c2c;
  --ink-soft: #6b3a57;
  --good: #2d9d69;
  --lime: #d8f55f;
  --display: 'Baloo 2', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --body: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --outline:
    0 2.5px 0 #5a0a33, 2.5px 0 0 #5a0a33, -2.5px 0 0 #5a0a33, 0 -2.5px 0 #5a0a33, 2px 2px 0 #5a0a33,
    -2px 2px 0 #5a0a33, 2px -2px 0 #5a0a33, -2px -2px 0 #5a0a33, 0 6px 0 #5a0a33;
  --outline-sm:
    0 2px 0 #5a0a33, 2px 0 0 #5a0a33, -2px 0 0 #5a0a33, 0 -2px 0 #5a0a33, 1.5px 1.5px 0 #5a0a33,
    -1.5px 1.5px 0 #5a0a33, 1.5px -1.5px 0 #5a0a33, -1.5px -1.5px 0 #5a0a33, 0 4px 0 #5a0a33;
  --gutter: clamp(16px, 4vw, 40px);
  --topbar-h: 64px;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-h) + 8px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font: 400 17px/1.55 var(--body);
  color: var(--cream);
  background: var(--plum);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

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

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--gold-light);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}

.skip:focus {
  top: 12px;
}

.wrap {
  width: min(100%, 1180px);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------------------------------------------------------------- type */
.h2 {
  margin: 0 0 14px;
  font: 800 clamp(32px, 5.4vw, 56px) / 1.02 var(--display);
  color: #fff;
  text-shadow: var(--outline), 0 12px 32px rgba(20, 2, 14, 0.45);
  text-wrap: balance;
}

.h3 {
  margin: 0 0 6px;
  font: 800 clamp(20px, 2.4vw, 24px) / 1.15 var(--display);
  color: var(--gold-light);
  text-wrap: balance;
}

.kicker {
  display: inline-block;
  margin: 0 0 12px;
  padding: 6px 14px;
  border-radius: 999px;
  font: 700 13px/1.1 var(--body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-pale);
  background: rgba(206, 171, 91, 0.16);
  border: 1px solid rgba(244, 220, 154, 0.45);
}

.lead {
  margin: 0 0 18px;
  font: 500 clamp(17px, 2vw, 20px) / 1.5 var(--body);
  color: rgba(255, 246, 232, 0.92);
  text-wrap: pretty;
}

.note {
  margin: 10px 0 0;
  font: 500 15px/1.5 var(--body);
  color: rgba(255, 246, 232, 0.72);
  text-wrap: pretty;
}

p {
  text-wrap: pretty;
}

/* ---------------------------------------------------------------- buttons */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 26px;
  border: 0;
  border-radius: 18px;
  font: 800 19px/1.1 var(--display);
  text-decoration: none;
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.25s var(--ease-bounce), box-shadow 0.25s, background-color 0.25s;
}

.btn svg {
  width: 24px;
  height: 24px;
  flex: none;
}

.btn--primary {
  background: linear-gradient(to bottom, #ff9146, var(--orange));
  box-shadow: 0 5px 0 #a93a0f, 0 14px 26px rgba(0, 0, 0, 0.35);
  text-shadow: 0 2px 0 #a93a0f;
}

.btn--primary::after {
  /* shine sweep */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: shine 4.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes shine {
  0%,
  62% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(120%);
  }
}

.btn--primary:hover,
.btn--primary:focus-visible {
  transform: translateY(-3px) scale(1.02);
}

.btn--primary:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #a93a0f;
}

.btn--ghost {
  color: var(--gold-pale);
  background: rgba(42, 10, 31, 0.5);
  border: 2px solid rgba(244, 220, 154, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: rgba(134, 0, 79, 0.65);
  transform: translateY(-2px);
}

.btn--gold {
  color: var(--ink);
  background: linear-gradient(to bottom, #fbe7a8, var(--gold));
  box-shadow: 0 3px 0 #8f6f2b;
}

.btn--gold:hover,
.btn--gold:focus-visible {
  transform: translateY(-2px);
}

.btn--small {
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 14px;
  font-size: 16px;
}

.btn--big {
  min-height: 60px;
  padding: 14px 34px;
  font-size: 22px;
}

/* ---------------------------------------------------------------- top bar */
.topbar {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) var(--gutter) 0;
  display: flex;
  align-items: center;
  gap: 18px;
  transition: background-color 0.35s, box-shadow 0.35s, backdrop-filter 0.35s;
}

.topbar.is-solid {
  background: rgba(42, 10, 31, 0.86);
  box-shadow: 0 1px 0 rgba(206, 171, 91, 0.35), 0 10px 30px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}

.topbar__brand img {
  width: 92px;
  filter: drop-shadow(0 2px 6px rgba(20, 2, 14, 0.6));
}

.topbar__nav {
  display: none;
  gap: 4px;
  margin-left: auto;
}

.topbar__nav a {
  padding: 8px 12px;
  border-radius: 12px;
  font: 600 15px/1 var(--body);
  text-decoration: none;
  color: rgba(255, 246, 232, 0.88);
  transition: background-color 0.2s, color 0.2s;
}

.topbar__nav a:hover,
.topbar__nav a.is-active {
  color: #fff;
  background: rgba(244, 220, 154, 0.14);
}

.topbar__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar__cta {
  display: none;
}

.sound {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid var(--gold);
  border-radius: 50%;
  color: var(--gold-pale);
  background: radial-gradient(circle at 30% 25%, rgba(140, 30, 100, 0.95), rgba(42, 10, 31, 0.92));
  box-shadow: 0 3px 0 rgba(20, 2, 14, 0.6);
  cursor: pointer;
}

.sound svg {
  width: 24px;
  height: 24px;
}

.sound .sound__waves {
  display: none;
}

.sound[aria-pressed='true'] .sound__waves {
  display: block;
}

.sound[aria-pressed='true'] .sound__off {
  display: none;
}

.sound[aria-pressed='true'] {
  animation: pulse-ring 2.4s ease-out infinite;
}

@keyframes pulse-ring {
  0% {
    box-shadow: 0 3px 0 rgba(20, 2, 14, 0.6), 0 0 0 0 rgba(244, 220, 154, 0.5);
  }
  100% {
    box-shadow: 0 3px 0 rgba(20, 2, 14, 0.6), 0 0 0 14px rgba(244, 220, 154, 0);
  }
}

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative;
  min-height: max(100svh, 720px);
  display: flex;
  overflow: hidden;
  isolation: isolate;
  background: var(--plum);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  will-change: transform;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
  transform-origin: 50% 85%;
  animation: hero-breathe 24s ease-in-out infinite alternate;
}

@keyframes hero-breathe {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.05);
  }
}

.hero__sparkles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
}

.hero__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 22% at 50% 0%, rgba(42, 10, 31, 0.7), transparent 100%),
    linear-gradient(to top, var(--plum) 0%, rgba(42, 10, 31, 0.94) 24%, rgba(42, 10, 31, 0.6) 36%, transparent 50%);
}

.hero__inner {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--topbar-h) + env(safe-area-inset-top, 0px) + 4px) var(--gutter) 64px;
}

.hero__top {
  display: flex;
  justify-content: center;
}

.hero__logo {
  margin: 0;
  width: min(80vw, 380px);
}

.hero__logo img {
  width: 100%;
  filter: drop-shadow(0 10px 22px rgba(20, 2, 14, 0.55));
  animation: logo-bob 4.5s ease-in-out infinite;
}

@keyframes logo-bob {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -6px;
  }
}

.hero__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  max-width: 620px;
  margin: 0 auto;
}

.hero__eyebrow {
  display: none;
  margin: 0;
  padding: 6px 14px;
  border-radius: 999px;
  font: 700 13px/1.1 var(--body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-pale);
  background: rgba(42, 10, 31, 0.6);
  border: 1px solid rgba(244, 220, 154, 0.55);
}

.hero__headline {
  margin: 0;
  font: 800 clamp(31px, 8.4vw, 50px) / 1 var(--display);
  color: #fff;
  text-shadow: var(--outline), 0 12px 40px rgba(42, 10, 31, 0.6);
  text-wrap: balance;
}

.hero__headline span {
  display: block;
}

.hero__headline-accent {
  color: var(--gold-light);
}

.hero__lead {
  display: none;
  margin: 0;
  font: 500 clamp(16px, 2vw, 19px) / 1.45 var(--body);
  color: rgba(255, 246, 232, 0.95);
  text-shadow: 0 2px 6px rgba(20, 2, 14, 0.9), 0 0 18px rgba(20, 2, 14, 0.6);
  max-width: 34em;
}

.hero__ctas {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  width: 100%;
}

.hero__ctas .btn {
  flex: 1 1 100%;
  max-width: 320px;
}

.hero__ctas .hero__ghost {
  min-height: 0;
  padding: 4px 10px;
  border: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font: 700 16px/1.3 var(--body);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(244, 220, 154, 0.6);
}

.intro {
  margin: 4px auto 18px;
  max-width: 34em;
  text-align: center;
  font: 500 17px/1.5 var(--body);
  color: rgba(255, 246, 232, 0.9);
  text-wrap: pretty;
}

.hero__scroll {
  position: absolute;
  bottom: 16px;
  left: 50%;
  translate: -50% 0;
  width: 28px;
  height: 44px;
  border: 3px solid rgba(244, 220, 154, 0.85);
  border-radius: 18px;
  z-index: 3;
}

.hero__scroll span {
  position: absolute;
  left: 50%;
  top: 7px;
  width: 6px;
  height: 9px;
  margin-left: -3px;
  border-radius: 3px;
  background: var(--gold-light);
  animation: scroll-dot 1.6s ease-in-out infinite;
}

@keyframes scroll-dot {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  80% {
    transform: translateY(16px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* ---------------------------------------------------------------- highlights */
.highlights {
  position: relative;
  z-index: 2;
  padding: 8px var(--gutter) 10px;
  background: var(--plum);
}

.highlights__list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: min(100%, 1180px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.hl {
  position: relative;
  padding: 16px 14px 18px;
  border-radius: 24px;
  text-align: center;
  color: var(--ink);
  background: linear-gradient(to bottom, var(--cream), var(--cream-2));
  box-shadow: 0 5px 0 #d3b184, 0 18px 34px rgba(0, 0, 0, 0.35);
  transition: transform 0.35s var(--ease-bounce);
}

.hl:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.hl img {
  width: 64px;
  height: 64px;
  margin: -2px auto 6px;
  filter: drop-shadow(0 4px 6px rgba(134, 0, 79, 0.25));
}

.hl__title {
  margin: 0 0 4px;
  font: 800 19px/1.1 var(--display);
  color: var(--bordo);
}

.hl p {
  margin: 0;
  font: 500 14.5px/1.4 var(--body);
  color: var(--ink-soft);
}

@media (hover: hover) {
  .hl:hover {
    transform: translateY(-6px) rotate(-0.6deg);
  }
}

/* ---------------------------------------------------------------- sections */
.section {
  position: relative;
  padding: clamp(72px, 10vw, 128px) 0;
  overflow: hidden;
}

.section__head {
  max-width: 780px;
  margin: 0 auto clamp(30px, 5vw, 54px);
  text-align: center;
}

.section--dark {
  background:
    radial-gradient(ellipse 60% 50% at 15% 20%, rgba(233, 81, 29, 0.22), transparent 70%),
    radial-gradient(ellipse 55% 55% at 90% 85%, rgba(206, 171, 91, 0.2), transparent 70%),
    linear-gradient(160deg, var(--plum), var(--bordo-deep) 60%, #5b1030);
}

.section--deep {
  background:
    radial-gradient(ellipse 60% 45% at 85% 15%, rgba(232, 60, 106, 0.3), transparent 70%),
    radial-gradient(ellipse 60% 60% at 8% 90%, rgba(122, 75, 196, 0.22), transparent 70%),
    linear-gradient(200deg, #5b1030, var(--bordo) 50%, var(--bordo-deep));
}

.section--dark::before,
.section--deep::before {
  /* drifting bokeh lights */
  content: '';
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 12% 20%, rgba(244, 220, 154, 0.32), transparent 6px),
    radial-gradient(circle at 78% 12%, rgba(255, 134, 164, 0.26), transparent 10px),
    radial-gradient(circle at 60% 70%, rgba(244, 220, 154, 0.28), transparent 5px),
    radial-gradient(circle at 30% 85%, rgba(255, 145, 70, 0.24), transparent 8px),
    radial-gradient(circle at 90% 55%, rgba(244, 220, 154, 0.28), transparent 4px);
  background-size: 420px 420px;
  animation: bokeh 34s linear infinite;
  pointer-events: none;
}

@keyframes bokeh {
  to {
    transform: translateY(-420px);
  }
}

/* light sections: warm paper with the game's ink */
.section--cream,
.section--paper,
.section--garden {
  color: var(--ink);
}

.section--cream {
  background:
    radial-gradient(ellipse 50% 40% at 90% 10%, rgba(232, 60, 106, 0.1), transparent 70%),
    linear-gradient(to bottom, var(--cream), var(--cream-2));
}

.section--paper {
  background:
    radial-gradient(ellipse 60% 40% at 10% 0%, rgba(206, 171, 91, 0.22), transparent 70%),
    linear-gradient(to bottom, var(--paper), #f8e9d4);
}

.section--cream .h2,
.section--paper .h2,
.section--garden .h2 {
  color: var(--bordo);
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.8), 0 10px 26px rgba(134, 0, 79, 0.16);
}

.section--cream .h3,
.section--paper .h3,
.section--garden .h3 {
  color: var(--bordo);
}

.section--cream .lead,
.section--paper .lead,
.section--garden .lead {
  color: var(--ink);
}

.section--cream .note,
.section--paper .note,
.section--garden .note {
  color: var(--ink-soft);
}

.section--cream .kicker,
.section--paper .kicker,
.section--garden .kicker {
  color: var(--bordo);
  background: rgba(134, 0, 79, 0.08);
  border-color: rgba(134, 0, 79, 0.28);
}

/* split layouts */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(34px, 6vw, 72px);
  align-items: center;
}

.split__media {
  position: relative;
  display: flex;
  justify-content: center;
}

/* ---------------------------------------------------------------- phone mockup */
.phone {
  /* a real iPhone: the screenshot from the iOS simulator in Apple's iPhone 18 Pro bezel (Apple Design
     Resources, product bezels), the whole screen at its own proportions */
  position: relative;
  margin: 0;
  width: min(280px, 70vw);
  flex: none;
  filter: drop-shadow(0 28px 34px rgba(10, 0, 6, 0.5)) drop-shadow(0 6px 10px rgba(10, 0, 6, 0.35));
}

.phone img {
  display: block;
  width: 100%;
  height: auto;
}

.phone--tilt-l {
  rotate: -3deg;
}

.phone--tilt-r {
  rotate: 3deg;
}

.phone--offset {
  margin-left: -64px;
  margin-top: 70px;
  z-index: 1;
}

.phones .phone {
  width: min(230px, 49vw);
}

.phones .phone--offset {
  margin-left: -11vw;
  margin-top: 56px;
}

@media (hover: hover) {
  .phone {
    transition: rotate 0.5s var(--ease-out), translate 0.5s var(--ease-out);
  }
  .phone:hover {
    rotate: 0deg;
    translate: 0 -8px;
  }
}

.float-peek {
  position: absolute;
  pointer-events: none;
  filter: drop-shadow(0 14px 18px rgba(20, 2, 14, 0.45));
  animation: float 4s ease-in-out infinite;
}

.float-peek--story {
  width: clamp(96px, 20vw, 150px);
  left: max(0px, calc(50% - 250px));
  bottom: -10px;
}

.float-peek--career {
  width: clamp(100px, 22vw, 170px);
  right: max(0px, calc(50% - 240px));
  bottom: 0;
}

.float {
  animation: float 4s ease-in-out infinite;
}

@keyframes float {
  0%,
  100% {
    translate: 0 0;
    rotate: -2deg;
  }
  50% {
    translate: 0 -12px;
    rotate: 2deg;
  }
}

/* ---------------------------------------------------------------- story */
.quote {
  margin: 4px 0 20px;
  padding: 18px 20px 16px 22px;
  border-radius: 22px;
  border-left: 5px solid var(--gold);
  background: rgba(255, 246, 232, 0.08);
  box-shadow: inset 0 0 0 1px rgba(244, 220, 154, 0.2);
}

.quote p {
  margin: 0 0 6px;
  font: 600 clamp(17px, 2vw, 20px) / 1.45 var(--body);
  font-style: italic;
  color: var(--gold-pale);
}

.quote footer {
  font: 500 14px/1.3 var(--body);
  color: rgba(255, 246, 232, 0.65);
}

/* ---------------------------------------------------------------- visit */
.visit__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 30px;
  align-items: center;
}

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  position: relative;
}

.steps::before {
  /* the dotted path joining the steps */
  content: '';
  position: absolute;
  left: 25px;
  top: 30px;
  bottom: 30px;
  border-left: 3px dotted rgba(244, 220, 154, 0.55);
}

.step {
  position: relative;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px 18px 16px 14px;
  border-radius: 22px;
  background: rgba(42, 10, 31, 0.42);
  border: 1px solid rgba(244, 220, 154, 0.25);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.step p {
  margin: 0;
  font-size: 16px;
  color: rgba(255, 246, 232, 0.88);
}

.step__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font: 800 22px/1 var(--display);
  color: var(--ink);
  background: radial-gradient(circle at 35% 30%, #fff1c2, var(--gold));
  box-shadow: 0 3px 0 #8f6f2b, 0 0 0 4px rgba(42, 10, 31, 0.6);
}

.visit__art {
  display: flex;
  justify-content: center;
}

.visit__illu {
  width: min(100%, 460px);
  filter: drop-shadow(0 22px 26px rgba(20, 2, 14, 0.45));
}

.clients {
  margin: clamp(30px, 5vw, 50px) auto 0;
  max-width: 900px;
  text-align: center;
}

.clients__label {
  margin: 0 0 12px;
  font: 600 16px/1.4 var(--body);
  color: rgba(255, 246, 232, 0.8);
}

.chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.chips li {
  padding: 7px 12px;
  border-radius: 999px;
  font: 600 14px/1.2 var(--body);
  color: var(--gold-pale);
  background: rgba(255, 246, 232, 0.1);
  border: 1px solid rgba(244, 220, 154, 0.35);
}

.chips--light {
  justify-content: flex-start;
  margin-top: 10px;
}

.chips--light li {
  color: var(--bordo);
  background: #fff;
  border-color: rgba(134, 0, 79, 0.22);
  box-shadow: 0 2px 0 rgba(134, 0, 79, 0.12);
}

/* score card */
.score {
  margin-top: clamp(44px, 7vw, 80px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

.score__card {
  padding: 22px 20px 20px;
  border-radius: 30px;
  color: var(--ink);
  background: linear-gradient(to bottom, var(--paper), var(--cream-2));
  box-shadow: 0 6px 0 #d3b184, 0 26px 50px rgba(10, 0, 6, 0.45);
}

.score__head {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}

.score__head img {
  width: 76px;
  flex: none;
}

.score__head .h3 {
  color: var(--bordo);
}

.score__head p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--ink-soft);
}

.bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.bar__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 16px;
}

.bar__top b {
  font: 800 18px/1.1 var(--display);
  color: var(--bordo);
}

.bar__top span {
  font: 700 14px/1 var(--body);
  color: var(--ink-soft);
  white-space: nowrap;
}

.bar__track {
  height: 12px;
  margin: 6px 0 4px;
  border-radius: 999px;
  background: rgba(134, 0, 79, 0.1);
  box-shadow: inset 0 1px 2px rgba(134, 0, 79, 0.2);
  overflow: hidden;
}

.bar__track i {
  display: block;
  height: 100%;
  width: calc(var(--v) / 33 * 100%);
  border-radius: inherit;
  background: linear-gradient(90deg, #ffb35c, var(--orange) 55%, var(--pink));
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.1s var(--ease-out);
}

.bar:nth-child(2) i {
  transition-delay: 0.12s;
}
.bar:nth-child(3) i {
  transition-delay: 0.24s;
}
.bar:nth-child(4) i {
  transition-delay: 0.36s;
}
.bar:nth-child(5) i {
  transition-delay: 0.48s;
}

.score__card.is-in .bar__track i {
  transform: scaleX(1);
}

.bar p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--ink-soft);
}

.score__phones {
  display: flex;
  justify-content: center;
  padding-bottom: 70px;
}

/* ---------------------------------------------------------------- academy */
.section--garden {
  background-color: #f5ead8;
  background-image:
    linear-gradient(to bottom, rgba(255, 246, 232, 0.97), rgba(255, 246, 232, 0.86) 30%, rgba(255, 246, 232, 0.9) 70%, rgba(251, 233, 207, 0.98)),
    url(assets/img/land.webp);
  background-size: auto, 520px auto;
  background-repeat: no-repeat, repeat;
}

.academy__palace {
  position: absolute;
  top: 18px;
  right: max(-90px, calc(50% - 720px));
  width: clamp(150px, 24vw, 300px);
  opacity: 0.95;
  filter: drop-shadow(0 18px 24px rgba(134, 0, 79, 0.22));
  pointer-events: none;
  animation: float 7s ease-in-out infinite;
}

.academy .section__head {
  position: relative;
}

.academy__phones {
  padding-bottom: 70px;
}

.card {
  border-radius: 26px;
  padding: 20px 22px;
}

.card--paper {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(206, 171, 91, 0.45);
  box-shadow: 0 4px 0 rgba(206, 171, 91, 0.45), 0 18px 34px rgba(134, 0, 79, 0.1);
}

.card--paper p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}

.card--paper .h3 {
  color: var(--bordo);
}

.card--paper a {
  color: var(--bordo);
  font-weight: 700;
  text-underline-offset: 3px;
}

.split--academy .split__text {
  display: grid;
  gap: 16px;
}

.lesson {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  counter-reset: lesson;
  display: grid;
  gap: 8px;
}

.lesson li {
  counter-increment: lesson;
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 16px;
  line-height: 1.4;
}

.lesson li::before {
  content: counter(lesson);
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font: 800 15px/1 var(--display);
  color: #fff;
  background: var(--bordo);
  translate: 0 -1px;
}

.lesson b {
  color: var(--bordo);
}

.card--stars {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
}

.card--stars p {
  flex: 1 1 240px;
}

.stars {
  flex: none;
  display: flex;
}

.stars img {
  width: 34px;
  margin-left: -6px;
  filter: drop-shadow(0 2px 3px rgba(134, 0, 79, 0.3));
}

.stars img:first-child {
  margin-left: 0;
}

.card--stars b {
  color: var(--bordo);
}

.domains__title {
  margin-top: clamp(40px, 6vw, 70px);
  text-align: center;
}

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

.domain {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 6px 14px;
  border-radius: 20px;
  text-align: center;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(206, 171, 91, 0.4);
  box-shadow: 0 3px 0 rgba(206, 171, 91, 0.35);
  transition: transform 0.3s var(--ease-bounce);
}

.domain img {
  width: 58px;
  height: auto;
  filter: drop-shadow(0 4px 5px rgba(134, 0, 79, 0.25));
}

.domain span {
  font: 600 13px/1.25 var(--body);
  color: var(--ink);
  overflow-wrap: break-word;
}

@media (hover: hover) {
  .domain:hover {
    transform: translateY(-5px) scale(1.03);
  }
}

/* ---------------------------------------------------------------- career */
.ranks {
  list-style: none;
  margin: 0 auto clamp(50px, 7vw, 80px);
  padding: 0;
  max-width: 1060px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 12px;
  counter-reset: rank;
}

.rank {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 10px 10px;
  border-radius: 18px;
  background: rgba(255, 246, 232, 0.08);
  border: 1px solid rgba(244, 220, 154, 0.26);
}

.rank__n {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  font: 800 18px/1 var(--display);
  color: var(--ink);
  background: linear-gradient(to bottom, #fbe7a8, var(--gold));
  box-shadow: 0 3px 0 #8f6f2b;
}

.rank__name {
  font: 700 15px/1.2 var(--body);
  color: var(--gold-pale);
}

.rank--final {
  background: linear-gradient(120deg, rgba(232, 60, 106, 0.4), rgba(206, 171, 91, 0.35));
  border-color: var(--gold-light);
  box-shadow: 0 0 24px rgba(244, 220, 154, 0.25);
}

.rank--final .rank__n {
  background: radial-gradient(circle at 35% 30%, #fff6d6, #f1c24f 60%, #c9902b);
}

.talents {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.talent {
  padding: 14px 14px 14px;
  border-radius: 20px;
  background: rgba(42, 10, 31, 0.45);
  border: 1px solid rgba(244, 220, 154, 0.3);
}

.talent b {
  display: block;
  font: 800 19px/1.1 var(--display);
  color: var(--gold-light);
  margin-bottom: 4px;
}

.talent span {
  font-size: 15px;
  line-height: 1.35;
  color: rgba(255, 246, 232, 0.85);
}

.split--career .split__text > p {
  margin: 0;
  color: rgba(255, 246, 232, 0.88);
}

/* ---------------------------------------------------------------- salon showcase */
.showcase {
  display: grid;
  gap: 22px;
}

.showcase__tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px 10px;
  border: 2px solid rgba(134, 0, 79, 0.15);
  border-radius: 18px;
  font: 700 13.5px/1.1 var(--body);
  color: var(--bordo);
  background: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: transform 0.25s var(--ease-bounce), background-color 0.25s, border-color 0.25s, box-shadow 0.25s;
}

.tab span {
  font-size: clamp(11.5px, 3.2vw, 14px);
  text-align: center;
}

.tab img {
  width: 44px;
  height: 44px;
  transition: transform 0.3s var(--ease-bounce);
}

.tab[aria-selected='true'] {
  color: #fff;
  background: linear-gradient(to bottom, #a3176a, var(--bordo));
  border-color: var(--gold);
  box-shadow: 0 4px 0 var(--bordo-deep), 0 12px 24px rgba(134, 0, 79, 0.25);
}

.tab[aria-selected='true'] img {
  transform: scale(1.12) rotate(-4deg);
}

@media (hover: hover) {
  .tab:hover {
    transform: translateY(-3px);
  }
}

.showcase__body {
  display: grid;
  gap: 26px;
  justify-items: center;
}

.showcase__panels {
  width: 100%;
  min-height: 0;
}

.tabpanel {
  animation: panel-in 0.45s var(--ease-out);
}

.tabpanel p {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
}

.tabpanel .note {
  margin-top: 10px;
  font-size: 15.5px;
}

.inline-icon {
  display: inline-block;
  width: 26px;
  height: 26px;
  vertical-align: -7px;
  margin-right: 6px;
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

.phone--showcase {
  rotate: 2deg;
}

.phone--showcase img {
  transition: opacity 0.25s ease;
}

.phone--showcase img.is-swapping {
  opacity: 0;
}

.team {
  margin-top: 34px;
  display: flex;
  gap: 16px;
  align-items: center;
}

.team img {
  flex: none;
  width: 64px;
  height: 64px;
}

/* ---------------------------------------------------------------- shop */
.bc {
  margin: 0 auto 26px;
  max-width: 720px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 22px;
  background: rgba(42, 10, 31, 0.45);
  border: 1px solid rgba(244, 220, 154, 0.35);
}

.bc img {
  flex: none;
  width: 58px;
  animation: coin-spin 3.2s ease-in-out infinite;
}

.bc p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.45;
}

.bc b {
  color: var(--gold-light);
}

@keyframes coin-spin {
  0%,
  60%,
  100% {
    transform: scaleX(1);
  }
  75% {
    transform: scaleX(0.12);
  }
  90% {
    transform: scaleX(1);
  }
}

.shelf {
  list-style: none;
  margin: 0 auto clamp(40px, 6vw, 64px);
  padding: 18px 12px 0;
  max-width: 760px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(4px, 2vw, 18px);
  border-bottom: 10px solid #c79a4e;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(to bottom, transparent 60%, rgba(255, 246, 232, 0.08));
  box-shadow: 0 14px 22px rgba(10, 0, 6, 0.35);
}

.shelf li {
  flex: 1 1 0;
  max-width: 120px;
}

.shelf img {
  width: 100%;
  filter: drop-shadow(0 6px 6px rgba(10, 0, 6, 0.35));
  transition: transform 0.3s var(--ease-bounce);
}

@media (hover: hover) {
  .shelf img:hover {
    transform: translateY(-8px) rotate(-3deg);
  }
}

.delivery {
  list-style: none;
  margin: 0 0 clamp(44px, 7vw, 80px);
  padding: 0;
  display: grid;
  gap: 14px;
}

.dstep {
  position: relative;
  display: grid;
  grid-template-columns: 92px 1fr;
  grid-template-rows: auto 1fr;
  column-gap: 14px;
  align-items: center;
  padding: 16px 18px;
  border-radius: 26px;
  text-align: left;
  background: rgba(42, 10, 31, 0.42);
  border: 1px solid rgba(244, 220, 154, 0.28);
}

.dstep img {
  grid-row: 1 / 3;
  width: 84px;
  height: 84px;
  object-fit: contain;
  margin: 0 auto;
  filter: drop-shadow(0 8px 10px rgba(10, 0, 6, 0.4));
}

.dstep .h3 {
  align-self: end;
}

.dstep p {
  align-self: start;
}

.dstep p {
  margin: 0;
  font-size: 16px;
  color: rgba(255, 246, 232, 0.88);
}

.dstep .van {
  width: 100px;
  height: 84px;
}

.dstep--van.is-in .van {
  animation: van-in 1.4s var(--ease-out) both, van-idle 1.6s 1.4s ease-in-out infinite;
}

@keyframes van-in {
  from {
    transform: translateX(-60vw);
  }
  80% {
    transform: translateX(6px);
  }
  to {
    transform: none;
  }
}

@keyframes van-idle {
  50% {
    transform: translateY(-2px);
  }
}

.shop__phones,
.hands__phones,
.career__phones,
.community__phones {
  padding-bottom: 70px;
}

.career__extra {
  margin-top: 30px;
}

.split--hands .split__text {
  display: grid;
  gap: 16px;
}

.split--hands .chips {
  justify-content: flex-start;
  margin: 4px 0 0;
}

.split--shop .split__text {
  display: grid;
  gap: 18px;
}

.mail {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 20px;
  border-radius: 26px;
  background: rgba(42, 10, 31, 0.42);
  border: 1px solid rgba(244, 220, 154, 0.3);
}

.mail img {
  flex: none;
  width: 60px;
  height: 60px;
}

.mail p {
  margin: 0;
  font-size: 16px;
  color: rgba(255, 246, 232, 0.9);
}

/* Cybersalon keeps its own look: black, white, lime */
.cyber {
  position: relative;
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 22px 20px 22px 22px;
  border-radius: 26px;
  color: #fff;
  background: #0d0d0d;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 22px 40px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.cyber::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: var(--lime);
}

.cyber__logo {
  width: 132px;
  max-width: none;
  height: auto;
  margin-bottom: 10px;
}

.cyber__title {
  margin: 0 0 6px;
  font: 600 20px/1.25 'Poppins', var(--body);
  color: var(--lime);
}

.cyber p {
  margin: 0;
  font: 400 15.5px/1.55 'Poppins', var(--body);
  color: rgba(255, 255, 255, 0.86);
}

.cyber__sticker {
  flex: none;
  width: 74px;
  max-width: none;
  height: auto;
  rotate: 5deg;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.6));
}

/* ---------------------------------------------------------------- community */
.community__illu {
  width: min(100%, 640px);
  margin: -10px auto clamp(30px, 5vw, 50px);
  filter: drop-shadow(0 24px 28px rgba(10, 0, 6, 0.45));
}

.split--community .split__text {
  display: grid;
  gap: 16px;
}

.card--glass {
  background: rgba(42, 10, 31, 0.45);
  border: 1px solid rgba(244, 220, 154, 0.3);
}

.card--glass p {
  margin: 0;
  font-size: 16.5px;
  color: rgba(255, 246, 232, 0.9);
}

.card--glass .note {
  margin-top: 10px;
  font-size: 15px;
  color: var(--gold-pale);
}

.safe {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0;
  font-size: 15.5px;
  line-height: 1.5;
  color: rgba(255, 246, 232, 0.82);
}

.safe svg {
  flex: none;
  width: 26px;
  height: 26px;
  color: var(--good);
  filter: drop-shadow(0 0 6px rgba(45, 157, 105, 0.5));
}

/* ---------------------------------------------------------------- schools */
.schools__illu {
  width: min(100%, 680px);
  margin: -6px auto clamp(30px, 5vw, 50px);
  filter: drop-shadow(0 22px 24px rgba(134, 0, 79, 0.18));
}

.split--schools .split__text {
  display: grid;
  gap: 18px;
}

.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.ticks {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.ticks li {
  position: relative;
  padding-left: 28px;
  font-size: 16px;
  line-height: 1.45;
}

.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E")
      center / 13px no-repeat,
    var(--good);
}

.ticks b {
  color: var(--bordo);
}

.callout {
  padding: 18px 20px 18px 22px;
  border-radius: 24px;
  color: var(--ink);
  background: #fff7e0;
  border: 2px solid var(--gold);
  box-shadow: 0 4px 0 rgba(206, 171, 91, 0.5);
}

.callout__title {
  margin: 0 0 8px;
  font: 800 20px/1.15 var(--display);
  color: var(--bordo);
}

.callout ul {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
  font-size: 15.5px;
  line-height: 1.45;
}

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

.teacher {
  margin: 0;
  font: 600 17px/1.5 var(--body);
  color: var(--ink);
}

.teacher a {
  color: var(--bordo);
  font-weight: 800;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- iPhone CTA */
.cta {
  text-align: center;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(244, 220, 154, 0.25), transparent 70%),
    radial-gradient(ellipse 60% 50% at 10% 90%, rgba(232, 60, 106, 0.3), transparent 70%),
    linear-gradient(to bottom, var(--bordo), var(--bordo-deep) 70%, var(--plum));
}

.cta__inner {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.cta__phone {
  display: none;
}

@media (min-width: 900px) {
  .cta__inner {
    grid-template-columns: auto minmax(0, 640px);
    justify-content: center;
    align-items: end;
    column-gap: 56px;
  }
  .cta__phone {
    display: block;
    width: 250px;
  }
}

.cta__card {
  position: relative;
  width: min(100%, 760px);
  margin-top: clamp(110px, 18vw, 170px);
  padding: clamp(34px, 5vw, 50px) clamp(18px, 4vw, 48px) clamp(30px, 5vw, 44px);
  border-radius: 34px;
  background: radial-gradient(ellipse 80% 70% at 50% 0%, rgba(244, 220, 154, 0.16), rgba(42, 10, 31, 0.55));
  border: 2px solid rgba(244, 220, 154, 0.7);
  box-shadow: 0 8px 0 rgba(20, 2, 14, 0.45), 0 30px 60px rgba(10, 0, 6, 0.45);
}

.cta__peek {
  /* Albert looks over the card's top edge: everything below the gold border is cut away, so the
     picture's straight bottom (the coat between his hands) never shows inside the card. The
     padding leaves room for the shadow above and at the sides. */
  position: absolute;
  left: 50%;
  bottom: calc(100% + 1px);
  translate: -50% 0;
  padding: 28px 28px 0;
  overflow: hidden;
  pointer-events: none;
}

.cta__albert {
  display: block;
  width: clamp(150px, 24vw, 210px);
  height: auto;
  /* the coat is cut at 96% of the picture's height: that line sits on the border, the fingertips
     below it curl over the edge */
  translate: 0 4.3%;
  filter: drop-shadow(0 -6px 16px rgba(10, 0, 6, 0.35));
  animation: peek 5s ease-in-out infinite;
}

/* he ducks a little behind the edge and comes back up (never above it: the cut would show) */
@keyframes peek {
  0%,
  70%,
  100% {
    transform: translateY(0);
  }
  80% {
    transform: translateY(9%);
  }
  88% {
    transform: translateY(0);
  }
}

.cta__text {
  max-width: 680px;
  margin: 0 auto;
}

/* store buttons: the same as on gry.falelokikoki.wiki (the tests are open: TestFlight and Google Play) */
.stores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 18px;
  margin-top: 10px;
}

.store-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.store {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 230px;
  padding: 12px 20px 12px 16px;
  border-radius: 18px;
  text-align: left;
  text-decoration: none;
  font: 800 19px/1.05 var(--display);
  color: #fff;
  background: linear-gradient(to bottom, #ff9146, var(--orange));
  box-shadow: 0 5px 0 #a93a0f, 0 12px 24px rgba(0, 0, 0, 0.35);
  position: relative;
  overflow: hidden;
}

.store svg {
  width: 30px;
  height: 30px;
  flex: none;
}

.store small {
  display: block;
  font: 600 12px/1.2 var(--body);
  opacity: 0.9;
  margin-bottom: 2px;
}

.store--android {
  background: linear-gradient(to bottom, #ff86a4, var(--pink));
  box-shadow: 0 5px 0 #a8163f, 0 12px 24px rgba(0, 0, 0, 0.35);
}

.store:hover,
.store:focus-visible {
  filter: brightness(1.06);
}

.store:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #a93a0f, 0 6px 14px rgba(0, 0, 0, 0.3);
}

.store--android:active {
  box-shadow: 0 2px 0 #a8163f, 0 6px 14px rgba(0, 0, 0, 0.3);
}

/* (on an Android phone its own store first) */
.cta__stores.is-android .store-slot:last-child {
  order: -1;
}

.store-slot__how {
  max-width: 250px;
  font: 500 13px/1.4 var(--body);
  text-align: center;
  color: rgba(255, 240, 230, 0.78);
}

.cloud {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 560px;
  margin: 26px auto 0;
  font: 500 15px/1.5 var(--body);
  text-align: left;
  color: rgba(255, 240, 230, 0.85);
}

.cloud svg {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: var(--gold-light);
}

.store.is-disabled {
  cursor: default;
  filter: grayscale(0.55) brightness(0.9);
  opacity: 0.75;
  box-shadow: 0 3px 0 rgba(20, 2, 14, 0.6);
}

.store-slot__soon {
  padding: 3px 14px;
  border-radius: 999px;
  font: 800 13px/1.3 var(--display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--plum);
  background: linear-gradient(to bottom, var(--gold-light), var(--gold));
  box-shadow: 0 2px 0 rgba(20, 2, 14, 0.4);
}

@media (max-width: 520px) {
  .store {
    min-width: 0;
    width: min(100%, 280px);
  }
  .store-slot {
    width: 100%;
  }
}

.family {
  margin-top: clamp(50px, 8vw, 90px);
}

.family__label {
  margin: 0 0 16px;
  font: 600 16px/1.4 var(--body);
  color: rgba(255, 246, 232, 0.8);
}

.family__games {
  display: flex;
  justify-content: center;
  gap: clamp(12px, 4vw, 32px);
}

.family__game {
  width: min(42vw, 220px);
  padding: 10px 12px;
  border-radius: 24px;
  background: radial-gradient(circle at 50% 30%, rgba(255, 246, 232, 0.16), rgba(42, 10, 31, 0.5));
  border: 2px solid rgba(244, 220, 154, 0.55);
  transition: transform 0.35s var(--ease-bounce);
}

.family__game img {
  width: 100%;
  filter: drop-shadow(0 6px 10px rgba(20, 2, 14, 0.5));
}

.family__game:hover,
.family__game:focus-visible {
  transform: translateY(-6px) rotate(-1deg) scale(1.03);
}

/* ---------------------------------------------------------------- footer */
.footer {
  padding: 44px var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 44px);
  text-align: center;
  background: var(--plum);
  border-top: 1px solid rgba(206, 171, 91, 0.3);
  font: 500 14px/1.6 var(--body);
  color: rgba(255, 246, 232, 0.8);
}

.footer__logo {
  width: 150px;
  margin: 0 auto 14px;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 18px;
}

.footer__links a {
  text-underline-offset: 3px;
}

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

.footer__small {
  margin: 14px auto 0;
  max-width: 560px;
  font-size: 13px;
  opacity: 0.7;
}

/* ---------------------------------------------------------------- reveal on scroll */
.js .reveal {
  opacity: 0;
  transform: translateY(26px) scale(0.98);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: var(--rd, 0s);
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------------- larger screens */
@media (min-width: 640px) {
  .highlights__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .hl:last-child:nth-child(odd) {
    grid-column: auto;
  }
  .domains {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .ranks {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .rank {
    flex-direction: column;
    text-align: center;
    padding: 14px 8px;
  }
  .duo {
    grid-template-columns: 1fr 1fr;
  }
  .delivery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .dstep {
    display: block;
    text-align: center;
    padding: 18px;
  }
  .dstep img {
    margin: 0 auto 6px;
  }
  .dstep .van {
    width: 170px;
    height: 120px;
  }
  .phone {
    width: 270px;
  }
  .phones .phone {
    width: 260px;
  }
  .phones .phone--offset {
    margin-left: -64px;
    margin-top: 70px;
  }
  .intro {
    font-size: 19px;
  }
}

@media (min-width: 900px) {
  :root {
    --topbar-h: 72px;
  }
  .topbar__brand img {
    width: 104px;
  }
  .topbar__cta {
    display: inline-flex;
  }
  .highlights__list {
    margin-top: -64px;
  }
  .split {
    grid-template-columns: 1.05fr 0.95fr;
  }
  .split--academy,
  .split--shop,
  .split--hands {
    grid-template-columns: 0.95fr 1.05fr;
  }
  .visit__grid {
    grid-template-columns: 1fr 0.9fr;
  }
  .score {
    grid-template-columns: 1fr 1fr;
  }
  .showcase {
    max-width: 1000px;
    margin: 0 auto;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'tabs phone'
      'panels phone';
    grid-template-rows: auto 1fr;
    column-gap: 70px;
    row-gap: 30px;
  }
  .showcase__body {
    display: contents;
  }
  .showcase__tabs {
    grid-area: tabs;
    align-self: end;
  }
  .showcase__panels {
    grid-area: panels;
    align-self: start;
  }
  .phone--showcase {
    grid-area: phone;
    width: 290px;
  }
  .split--schools .duo {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1180px) {
  .topbar__nav {
    display: flex;
  }
  .topbar__nav a {
    padding: 8px 9px;
    font-size: 14.5px;
  }
  .topbar__actions {
    margin-left: 10px;
  }
}

@media (min-width: 1200px) {
  .highlights__list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (min-width: 1320px) {
  .topbar__nav a {
    padding: 8px 12px;
    font-size: 15px;
  }
}

/* hero: landscape screens get the wide art, the text on the left and Albert on the right */
@media (min-aspect-ratio: 1/1) and (min-width: 760px) {
  .hero {
    min-height: max(100svh, 680px);
  }
  .hero__bg img {
    object-position: 62% 20%;
    transform-origin: 70% 90%;
  }
  .hero__lead,
  .hero__eyebrow {
    display: block;
  }
  .intro {
    display: none;
  }
  .hero__ctas .hero__ghost {
    min-height: 52px;
    padding: 12px 26px;
    border: 2px solid rgba(244, 220, 154, 0.75);
    background: rgba(42, 10, 31, 0.5);
    font: 800 19px/1.1 var(--display);
    text-decoration: none;
  }
  .hero__shade {
    background:
      linear-gradient(90deg, rgba(42, 10, 31, 0.86) 0%, rgba(42, 10, 31, 0.66) 30%, rgba(42, 10, 31, 0.15) 52%, transparent 62%),
      linear-gradient(to bottom, rgba(42, 10, 31, 0.5), transparent 18%),
      linear-gradient(to top, var(--plum) 0%, transparent 22%);
  }
  .hero__inner {
    justify-content: center;
    padding-top: calc(var(--topbar-h) + 10px);
    padding-bottom: 110px;
    padding-left: max(var(--gutter), calc(50% - 600px));
  }
  .hero__top,
  .hero__bottom {
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    margin: 0;
    max-width: min(620px, 48vw);
  }
  .hero__logo {
    width: min(420px, 34vw);
    margin: 0 0 6px -10px;
  }
  .hero__headline {
    font-size: clamp(34px, 3.7vw, 56px);
  }
  .hero__ctas {
    justify-content: flex-start;
  }
  .hero__ctas .btn {
    flex: 0 0 auto;
  }
}

/* short landscape phones: keep the hero compact */
@media (min-aspect-ratio: 1/1) and (max-height: 560px) {
  .hero__logo {
    width: min(300px, 34vw);
  }
  .hero__lead {
    display: none;
  }
}

/* short phones: a smaller logo leaves room for the art */
@media (max-aspect-ratio: 1/1) and (max-height: 720px) {
  .hero__logo {
    width: min(70vw, 300px);
  }
}

/* very small phones */
@media (max-width: 360px) {
  .hero__logo {
    width: 76vw;
  }
  .hero__headline {
    font-size: 28px;
  }
  .tab span {
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ---------------------------------------------------------------- trailer
   The game's trailer in a gold picture frame. The page loads only the poster; the video file is
   fetched after the visitor presses play (vertical cut on phones held upright). Albert stands
   beside the frame and points at it, and steps aside once the film is on. */
.trailer {
  padding-top: clamp(64px, 8vw, 104px);
}

.trailer__stage {
  position: relative;
  width: min(100%, 960px);
  margin: 0 auto;
}

.trailer__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 3px solid transparent;
  border-radius: clamp(18px, 3vw, 30px);
  overflow: hidden;
  background:
    linear-gradient(var(--plum), var(--plum)) padding-box,
    linear-gradient(135deg, #fff1c4, var(--gold) 34%, #8f6f2b 58%, var(--gold-light) 82%, #b8913f) border-box;
  box-shadow:
    0 0 0 7px rgba(42, 10, 31, 0.72),
    0 0 0 9px rgba(244, 220, 154, 0.38),
    0 12px 0 2px rgba(20, 2, 14, 0.5),
    0 44px 90px rgba(10, 0, 6, 0.6),
    0 0 140px rgba(233, 81, 29, 0.2);
  isolation: isolate;
}

.trailer__poster,
.trailer__poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.trailer__poster img {
  object-fit: cover;
  transition: transform 0.9s var(--ease-out), filter 0.4s;
}

.trailer__frame::after {
  /* a soft shade under the play button so its label reads on any poster */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 2, 14, 0.78), rgba(20, 2, 14, 0.2) 38%, transparent 60%);
  pointer-events: none;
  transition: opacity 0.3s;
}

.trailer__play {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: clamp(12px, 2vw, 18px);
  padding: clamp(16px, 3.2vw, 34px);
  border: 0;
  border-radius: inherit;
  color: #fff;
  background: none;
  text-align: left;
  cursor: pointer;
}

.trailer__play:focus-visible {
  outline-offset: -8px;
}

.trailer__play-icon {
  display: grid;
  place-items: center;
  width: clamp(62px, 8.5vw, 92px);
  aspect-ratio: 1;
  flex: none;
  border: 3px solid rgba(255, 241, 214, 0.9);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #ffb26a, var(--orange) 55%, #c63a12);
  box-shadow: 0 6px 0 #a93a0f, 0 16px 30px rgba(0, 0, 0, 0.45);
  animation: trailer-ring 2.4s ease-out infinite;
  transition: transform 0.3s var(--ease-bounce);
}

.trailer__play-icon svg {
  width: 46%;
  height: 46%;
  margin-left: 8%;
  filter: drop-shadow(0 2px 0 #a93a0f);
}

@keyframes trailer-ring {
  0% {
    box-shadow: 0 6px 0 #a93a0f, 0 16px 30px rgba(0, 0, 0, 0.45), 0 0 0 0 rgba(255, 178, 106, 0.6);
  }
  100% {
    box-shadow: 0 6px 0 #a93a0f, 0 16px 30px rgba(0, 0, 0, 0.45), 0 0 0 22px rgba(255, 178, 106, 0);
  }
}

.trailer__play-text {
  display: grid;
  gap: 2px;
  padding-bottom: 6px;
  font: 800 clamp(21px, 2.8vw, 32px) / 1.05 var(--display);
  text-shadow: var(--outline-sm), 0 8px 20px rgba(20, 2, 14, 0.5);
}

.trailer__play-text small {
  font: 600 clamp(13px, 1.4vw, 15px) / 1.3 var(--body);
  color: var(--gold-pale);
  text-shadow: 0 1px 2px rgba(20, 2, 14, 0.8);
}

@media (hover: hover) {
  .trailer__play:hover .trailer__play-icon {
    transform: scale(1.08);
  }
  .trailer__frame:hover .trailer__poster img {
    transform: scale(1.03);
  }
}

.trailer__video {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: var(--plum);
  object-fit: contain;
}

.trailer__frame.has-video::after,
.trailer__frame.has-video .trailer__play {
  opacity: 0;
  pointer-events: none;
}

.trailer__albert {
  position: absolute;
  z-index: 3;
  right: -4%;
  bottom: -9%;
  width: clamp(92px, 16vw, 190px);
  pointer-events: none;
  filter: drop-shadow(0 16px 20px rgba(20, 2, 14, 0.5));
  animation: float 4s ease-in-out infinite;
  transition: opacity 0.4s, translate 0.6s var(--ease-out);
}

.trailer__frame.has-video + .trailer__albert {
  opacity: 0;
  translate: 40% 20%;
  animation: none;
}

.trailer__note {
  margin-top: clamp(26px, 4vw, 40px);
  text-align: center;
}

/* wide screens: Albert stands outside the frame and points in */
@media (min-width: 1240px) {
  .trailer__albert {
    right: -200px;
    bottom: -4%;
    width: 210px;
  }
  .trailer__frame.has-video + .trailer__albert {
    opacity: 1;
    translate: 0 0;
    animation: float 4s ease-in-out infinite;
  }
}

/* phones held upright: the vertical cut of the trailer */
@media (max-width: 640px) and (orientation: portrait) {
  .trailer__frame {
    aspect-ratio: 9 / 16;
    width: min(100%, calc(76svh * 9 / 16));
    margin: 0 auto;
  }
  .trailer__albert {
    right: -2%;
    bottom: -5%;
    width: 78px;
  }
}

@media (max-width: 400px) and (orientation: portrait) {
  .trailer__play {
    gap: 10px;
  }
  .trailer__play-text {
    font-size: 19px;
  }
}

/* ---------------------------------------------------------------- achievements: the four tiers (Kariera) */
.tiers {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tier {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 4px;
  border-radius: 999px;
  font: 600 14px/1.2 var(--body);
  color: var(--gold-pale);
  background: rgba(42, 10, 31, 0.45);
  border: 1px solid rgba(244, 220, 154, 0.3);
}

.tier b {
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  border-radius: 999px;
  font: 800 16px/1 var(--display);
  color: var(--ink);
  box-shadow: 0 2px 0 rgba(20, 2, 14, 0.45);
}

.tier--bronze b {
  background: radial-gradient(circle at 35% 30%, #f6d2ae, #b9733a 62%, #8a4f22);
}

.tier--silver b {
  background: radial-gradient(circle at 35% 30%, #fff, #cfd3dc 60%, #8f95a3);
}

.tier--gold b {
  background: radial-gradient(circle at 35% 30%, #fff6d6, #f1c24f 60%, #c9902b);
}

.tier--legend b {
  background: radial-gradient(circle at 35% 30%, #ffe8f2, #f08ab4 55%, #c9902b);
  box-shadow: 0 2px 0 rgba(20, 2, 14, 0.45), 0 0 10px rgba(255, 190, 225, 0.55);
}

/* ---------------------------------------------------------------- highlights: the Akademia FLK card and the top bar's news link */
.hl--flk {
  background: linear-gradient(to bottom, #fff, #f8f5f4);
  box-shadow: 0 5px 0 var(--orange), 0 18px 34px rgba(0, 0, 0, 0.35);
}

.hl--flk .hl__title {
  color: #b83a0f;
}

.topbar__nav .topbar__news {
  color: var(--gold-light);
}

/* ---------------------------------------------------------------- Akademia FLK
   The real training company of Fale Loki Koki (docs/AKADEMIA-FLK.md), always with its original logo and in its colours:
   orange #E9511D, graphite #32332F, warm white #F8F5F4. */
.section--flk {
  --flk-orange: #e9511d;
  --flk-orange-ink: #b83a0f;
  --flk-graphite: #32332f;
  --flk-warm: #f8f5f4;
  --flk-line: rgba(50, 51, 47, 0.14);
  color: var(--flk-graphite);
  background:
    radial-gradient(ellipse 55% 35% at 92% 0%, rgba(233, 81, 29, 0.14), transparent 70%),
    radial-gradient(ellipse 50% 40% at 4% 100%, rgba(233, 81, 29, 0.09), transparent 70%),
    linear-gradient(to bottom, var(--flk-warm), #efe9e6);
  border-top: 6px solid var(--flk-orange);
}

.section--flk .h2 {
  color: var(--flk-graphite);
  text-shadow: 0 2px 0 #fff, 0 10px 26px rgba(50, 51, 47, 0.12);
}

.section--flk .h3 {
  color: var(--flk-graphite);
}

.section--flk .lead {
  color: var(--flk-graphite);
}

.section--flk .note {
  color: #585952;
}

.section--flk .kicker {
  color: var(--flk-graphite);
  background: rgba(233, 81, 29, 0.12);
  border-color: rgba(233, 81, 29, 0.5);
}

/* a focus ring that shows on the light sections (the page's gold ring is made for the dark ones) */
.section--flk :focus-visible {
  outline-color: var(--flk-orange-ink);
}

.section--cream :focus-visible,
.section--paper :focus-visible,
.section--garden :focus-visible {
  outline-color: var(--bordo);
}

.flk__logo {
  width: min(100%, 300px);
  margin: 0 auto 22px;
}

.flk__head .note {
  margin-top: 0;
}

.flk__stats {
  list-style: none;
  margin: 0 auto clamp(44px, 7vw, 80px);
  padding: 0;
  max-width: 980px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.flk__stats li {
  padding: 14px 10px 12px;
  border-radius: 22px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--flk-line);
  box-shadow: 0 3px 0 rgba(233, 81, 29, 0.45), 0 14px 26px rgba(50, 51, 47, 0.07);
}

.flk__stats li:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.flk__stats b {
  display: block;
  font: 800 clamp(36px, 6vw, 48px) / 1 var(--display);
  color: var(--flk-orange);
}

.flk__stats span {
  display: block;
  margin-top: 2px;
  font: 600 14px/1.3 var(--body);
  color: var(--flk-graphite);
}

.flk .split + .split {
  margin-top: clamp(56px, 8vw, 100px);
}

.flk__phones {
  padding-bottom: 70px;
}

.fsteps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.fstep {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px 18px 18px 14px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--flk-line);
  box-shadow: 0 4px 0 rgba(233, 81, 29, 0.38), 0 18px 34px rgba(50, 51, 47, 0.08);
}

.fstep__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font: 800 22px/1 var(--display);
  color: #fff;
  background: linear-gradient(to bottom, #ff7a43, var(--flk-orange));
  box-shadow: 0 3px 0 #a93a0f;
}

.fstep p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}

.ticks--flk {
  margin-top: 12px;
  gap: 12px;
}

.ticks--flk li::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E")
      center / 13px no-repeat,
    var(--flk-orange);
}

.ticks--flk b {
  color: var(--flk-graphite);
}

.split--flk-rev .split__text > .note {
  margin-top: 16px;
}

.flk__stack {
  display: grid;
  gap: 16px;
}

.card--flk {
  color: var(--flk-graphite);
  background: #fff;
  border: 1px solid var(--flk-line);
  border-top: 5px solid var(--flk-orange);
  box-shadow: 0 4px 0 rgba(233, 81, 29, 0.3), 0 18px 34px rgba(50, 51, 47, 0.08);
}

.card--flk p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}

.kfs {
  list-style: none;
  counter-reset: kfs;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.kfs li {
  counter-increment: kfs;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 5px;
  border-radius: 999px;
  font: 600 14px/1.2 var(--body);
  background: var(--flk-warm);
  border: 1px solid rgba(233, 81, 29, 0.45);
}

.kfs li::before {
  content: counter(kfs);
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font: 800 13px/1 var(--display);
  color: #fff;
  background: var(--flk-orange-ink);
}

.flk__cards {
  margin-top: clamp(44px, 7vw, 80px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.callout--flk {
  max-width: 900px;
  margin: clamp(30px, 5vw, 56px) auto 0;
  color: var(--flk-graphite);
  background: #fff;
  border-color: var(--flk-orange);
  box-shadow: 0 4px 0 rgba(233, 81, 29, 0.4);
}

.callout--flk .callout__title {
  color: var(--flk-graphite);
}

.callout--flk li::marker {
  color: var(--flk-orange);
}

.callout__link {
  margin: 14px 0 0;
  font: 600 16px/1.4 var(--body);
}

.callout__link a {
  color: var(--flk-orange-ink);
  font-weight: 800;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- Co nowego (the changelog teaser) */
.news__teaser {
  max-width: 860px;
  margin: 0 auto;
}

.news__fallback {
  margin: 0;
  text-align: center;
}

.news__fallback .btn {
  text-decoration: none;
}

.trailer__note a {
  color: var(--gold-light);
  text-underline-offset: 3px;
}

@media (min-width: 640px) {
  .flk__stats {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .flk__stats li:last-child:nth-child(odd) {
    grid-column: auto;
  }
  .flk__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .split--flk {
    grid-template-columns: 0.95fr 1.05fr;
  }
  .split--flk-rev {
    grid-template-columns: 1.05fr 0.95fr;
  }
}