@font-face {
  font-family: "Berkshire Swash";
  src: url("../assets/fonts/BerkshireSwash-Regular.ttf") format("truetype");
  font-display: swap;
}

:root {
  --night: #080a12;
  --night-soft: #101322;
  --cream: #f4eee3;
  --paper: #fbf7ef;
  --ink: #241b18;
  --muted: #756a63;
  --terra: #c66e43;
  --ochre: #d89d50;
  --rose: #c84676;
  --violet: #8971ff;
  --gold: #f1bd60;
  --line: rgba(58, 42, 35, 0.13);
  --display: "Fraunces", Georgia, serif;
  --brand: "Berkshire Swash", "Fraunces", serif;
  --sans: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.2, .75, .25, 1);
  --max: 1240px;
}

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

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

body {
  margin: 0;
  color: var(--ink);
  background: var(--night);
  font-family: var(--sans);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow: hidden;
}

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

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

button {
  color: inherit;
  font: inherit;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
  padding: 10px 16px;
  color: var(--night);
  background: white;
  border-radius: 100px;
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

.nav {
  position: fixed;
  z-index: 50;
  top: 14px;
  left: 50%;
  width: min(calc(100% - 28px), 1180px);
  height: 62px;
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 8px 10px 8px 12px;
  color: var(--ink);
  background: rgba(250, 242, 226, .66);
  border: 1px solid rgba(78, 49, 36, .1);
  border-radius: 22px;
  box-shadow: 0 16px 50px rgba(94, 57, 35, .1);
  backdrop-filter: blur(22px) saturate(1.35);
  transform: translateX(-50%);
  transition: top .35s var(--ease), background .35s, border-color .35s;
}

.nav.is-stuck {
  top: 8px;
  background: rgba(250, 242, 226, .9);
  border-color: rgba(78, 49, 36, .14);
}

.nav__brand,
.footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.nav__brand img,
.footer__brand img {
  border-radius: 9px;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .28);
}

.nav__brand span,
.footer__brand span {
  padding-top: 3px;
  font-family: var(--brand);
  font-size: 23px;
}

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

.nav__links a {
  position: relative;
  color: rgba(36, 27, 24, .58);
  font-size: 13px;
  font-weight: 800;
  transition: color .2s;
}

.nav__links a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -7px;
  left: 0;
  height: 1px;
  background: var(--terra);
  transform: scaleX(0);
  transition: transform .25s var(--ease);
}

.nav__links a:hover,
.nav__links a:focus-visible {
  color: var(--ink);
}

.nav__links a:hover::after,
.nav__links a:focus-visible::after {
  transform: scaleX(1);
}

.nav__cta {
  padding: 11px 18px;
  color: white;
  background: var(--ink);
  border-radius: 14px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  transition: transform .25s var(--ease), box-shadow .25s;
}

.nav__cta:hover {
  box-shadow: 0 10px 28px rgba(36, 27, 24, .22);
  transform: translateY(-1px);
}

.lang-selector {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 5px;
  background: rgba(36, 27, 24, .06);
  border: 1px solid rgba(36, 27, 24, .1);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
}

.lang-selector__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 7px;
  border-radius: 8px;
  color: rgba(36, 27, 24, .55);
  text-decoration: none;
  transition: all .2s var(--ease);
  cursor: pointer;
}

.lang-selector__item:hover {
  color: var(--ink);
  background: rgba(250, 242, 226, .5);
}

.lang-selector__item.is-active {
  color: var(--ink);
  background: rgba(250, 242, 226, .95);
  box-shadow: 0 2px 8px rgba(36, 27, 24, .12);
  font-weight: 900;
}

.nav__menu {
  display: none;
  width: 42px;
  height: 42px;
  margin-left: auto;
  padding: 0;
  background: rgba(36, 27, 24, .07);
  border: 0;
  border-radius: 13px;
}

.nav__menu span {
  display: block;
  width: 18px;
  height: 1.5px;
  margin: 5px auto;
  background: var(--ink);
  transition: transform .25s, opacity .25s;
}

.hero {
  position: relative;
  min-height: 930px;
  height: max(100svh, 930px);
  color: var(--ink);
  background:
    radial-gradient(circle at 72% 42%, rgba(211, 132, 76, .28), transparent 28%),
    radial-gradient(circle at 24% 32%, rgba(255, 247, 218, .82), transparent 33%),
    radial-gradient(circle at 50% 100%, rgba(236, 164, 87, .2), transparent 38%),
    linear-gradient(145deg, #fbf1dd 0%, #f4dfc3 50%, #f8eade 100%);
  overflow: hidden;
}

.sky-canvas,
.hero__atmosphere,
.hero__aurora,
.hero__grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.sky-canvas {
  z-index: 0;
}

.hero__atmosphere {
  z-index: 2;
}

.hero__aurora {
  z-index: 1;
  background:
    radial-gradient(ellipse at 76% 49%, rgba(220, 135, 70, .2), transparent 31%),
    radial-gradient(ellipse at 58% 82%, rgba(248, 192, 99, .22), transparent 34%),
    radial-gradient(ellipse at 18% 14%, rgba(255, 255, 236, .52), transparent 28%);
  filter: blur(8px);
  transform: translateZ(0);
  will-change: transform, opacity;
  animation: aurora 9s ease-in-out infinite alternate;
}

.hero__grain {
  z-index: 3;
  opacity: .07;
  background-image:
    radial-gradient(circle at 20% 30%, #8d634c 0 .4px, transparent .65px),
    radial-gradient(circle at 70% 65%, #fff8e8 0 .5px, transparent .7px);
  background-size: 7px 7px, 11px 11px;
  mix-blend-mode: multiply;
}

@keyframes aurora {
  to { transform: scale(1.08) translate3d(-2%, 2%, 0); opacity: .78; }
}

.hero__content {
  position: relative;
  z-index: 4;
  width: min(calc(100% - 56px), 1360px);
  height: 100%;
  min-height: inherit;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  align-items: center;
  gap: clamp(20px, 3vw, 58px);
  padding: 118px 0 62px;
}

.hero__copy {
  position: relative;
  z-index: 6;
  max-width: 710px;
  transition: transform .24s ease-out;
}

.kicker {
  margin: 0 0 24px;
  color: rgba(255, 255, 255, .58);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .19em;
  text-transform: uppercase;
}

.kicker span {
  margin-right: 9px;
  color: var(--gold);
}

.kicker--ink {
  color: var(--muted);
}

.kicker--ink span {
  color: var(--terra);
}

.kicker--rose {
  color: #8b6b78;
}

.kicker--rose span {
  color: var(--rose);
}

.hero h1,
.manifesto h2,
.universe h2,
.ritual h2,
.remember h2,
.panorama h2,
.download h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -.055em;
}

.hero h1 {
  max-width: 760px;
  font-family: var(--brand);
  font-size: clamp(88px, 9.3vw, 150px);
  font-weight: 400;
  line-height: .78;
  letter-spacing: -.045em;
  text-shadow: 0 10px 35px rgba(106, 57, 37, .08);
}

.hero .kicker {
  display: inline-flex;
  align-items: center;
  margin-bottom: 27px;
  padding: 8px 14px;
  color: var(--terra);
  background: rgba(198, 110, 67, .08);
  border: 1px solid rgba(198, 110, 67, .08);
  border-radius: 100px;
  box-shadow: inset 0 1px rgba(255, 255, 255, .45);
}

.hero__tagline {
  margin: 24px 0 0;
  color: var(--terra);
  font-family: var(--display);
  font-size: clamp(30px, 3.1vw, 48px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.045em;
}

.hero__tagline em {
  color: var(--ochre);
  font-weight: 500;
}

.hero__lead {
  max-width: 620px;
  margin: 34px 0 0;
  color: rgba(73, 60, 52, .68);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.68;
}

.hero__stores {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.hero .store-button {
  min-width: 190px;
  min-height: 64px;
  padding: 10px 18px;
  color: white;
  background: #15110f;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 15px;
  box-shadow: 0 17px 34px rgba(92, 55, 35, .18);
}

.hero .store-button:hover {
  box-shadow: 0 22px 42px rgba(92, 55, 35, .26);
}

.store-button--android {
  position: relative;
  opacity: .74;
  cursor: default;
}

.hero .store-button--android:hover {
  transform: none;
}

.store-button__play {
  width: 30px;
  height: 34px;
  background:
    linear-gradient(148deg, transparent 46%, #ffcb57 47% 56%, transparent 57%),
    linear-gradient(32deg, transparent 45%, #ec5368 46% 55%, transparent 56%),
    linear-gradient(90deg, #65d3c5 0 47%, #6e92ff 48% 100%);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  filter: saturate(.8);
}

.store-button__soon {
  position: absolute;
  top: -10px;
  right: 8px;
  padding: 4px 8px;
  color: white;
  background: var(--ochre);
  border-radius: 100px;
  box-shadow: 0 5px 14px rgba(125, 76, 34, .24);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hero__note {
  margin: 22px 0 0;
  color: rgba(73, 60, 52, .48);
  font-size: 12px;
  font-weight: 800;
}

.hero__product {
  position: relative;
  z-index: 4;
  height: min(760px, 79vh);
  min-height: 630px;
  display: grid;
  place-items: center;
  perspective: 1600px;
  isolation: isolate;
}

.phone-aura {
  position: absolute;
  width: 92%;
  aspect-ratio: 1;
  background:
    radial-gradient(circle, rgba(214, 135, 75, .3), rgba(236, 175, 103, .12) 43%, transparent 70%);
  filter: blur(15px);
  animation: breathe 5s ease-in-out infinite;
  transition: transform .3s ease-out;
}

@keyframes breathe {
  50% { opacity: .62; transform: scale(1.12); }
}

.iphone {
  position: relative;
  z-index: 5;
  width: 318px;
  aspect-ratio: 1179 / 2556;
  padding: 8px;
  background:
    linear-gradient(110deg, #86878a 0%, #26272a 10%, #0a0b0d 47%, #55565a 88%, #aaa 100%);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 58px;
  box-shadow:
    0 55px 100px rgba(0, 0, 0, .55),
    0 12px 30px rgba(0, 0, 0, .38),
    inset 0 0 0 1px rgba(255, 255, 255, .2);
  transform-style: preserve-3d;
}

.iphone::before {
  content: "";
  position: absolute;
  z-index: 6;
  inset: 4px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 53px;
  pointer-events: none;
}

.iphone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: #090a0e;
  border-radius: 50px;
  overflow: hidden;
}

.iphone__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.iphone__island {
  position: absolute;
  z-index: 3;
  top: 14px;
  left: 50%;
  width: 88px;
  height: 25px;
  background: #020204;
  border-radius: 30px;
  box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .06);
  transform: translateX(-50%);
}

.iphone__island::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 7px;
  height: 7px;
  background: #07101f;
  border: 1px solid #13213a;
  border-radius: 50%;
}

.iphone__button {
  position: absolute;
  width: 3px;
  background: linear-gradient(#303136, #76777a, #25262a);
}

.iphone__button--action {
  top: 104px;
  left: -4px;
  height: 28px;
  border-radius: 3px 0 0 3px;
}

.iphone__button--volume {
  top: 151px;
  left: -4px;
  height: 78px;
  border-radius: 3px 0 0 3px;
  box-shadow: 0 96px 0 #4b4c50;
}

.iphone__button--power {
  top: 181px;
  right: -4px;
  height: 96px;
  border-radius: 0 3px 3px 0;
}

.iphone--hero {
  width: min(330px, 26vw);
  min-width: 285px;
  translate: var(--primary-peek-x, 0px) 0;
  transform: rotateY(-8deg) rotateX(2deg) rotateZ(2deg);
  transition: translate .38s var(--ease);
  animation: phone-float 6s ease-in-out infinite;
  will-change: translate, transform;
}

.hero__phone-cluster {
  position: relative;
  z-index: 5;
  transform-style: preserve-3d;
  transition: transform .24s ease-out;
  will-change: transform;
}

.iphone--hero-secondary {
  position: absolute;
  z-index: 1;
  top: 13%;
  right: -43%;
  width: min(244px, 19vw);
  min-width: 205px;
  border-radius: 47px;
  opacity: .9;
  filter: saturate(.88) brightness(.92);
  translate: var(--secondary-peek-x, 0px) 0;
  box-shadow:
    0 42px 80px rgba(83, 48, 31, .28),
    0 10px 24px rgba(0, 0, 0, .26),
    inset 0 0 0 1px rgba(255, 255, 255, .18);
  transform: translateZ(-80px) rotateY(-10deg) rotateZ(7deg);
  transition: translate .38s var(--ease), filter .38s var(--ease), opacity .38s var(--ease);
  animation: phone-secondary-float 7.5s ease-in-out infinite;
  will-change: translate, transform;
}

.iphone--hero-secondary .iphone__screen {
  border-radius: 40px;
}

.iphone--hero-secondary::before {
  border-radius: 43px;
}

@keyframes phone-float {
  50% { transform: translateY(-12px) rotateY(-5deg) rotateX(1deg) rotateZ(1deg); }
}

@keyframes phone-secondary-float {
  50% { transform: translate3d(0, -8px, -80px) rotateY(-8deg) rotateZ(5deg); }
}

.catalogue {
  position: relative;
  min-height: 1180px;
  padding: clamp(100px, 11vw, 170px) 0 clamp(90px, 9vw, 140px);
  color: var(--ink);
  background:
    linear-gradient(180deg, #fffdfa 0%, #fbf4ec 58%, #f8ead7 100%);
  overflow: hidden;
  isolation: isolate;
}

.catalogue::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .3;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(84, 54, 44, .18) 0 .6px, transparent .8px),
    radial-gradient(circle at 75% 65%, rgba(255, 255, 255, .9) 0 .7px, transparent .9px);
  background-size: 11px 11px, 17px 17px;
  mask-image: linear-gradient(to bottom, transparent, black 18%, black 80%, transparent);
}

.catalogue__wash {
  position: absolute;
  z-index: -1;
  width: min(46vw, 700px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}

.catalogue__wash--rose {
  top: 22%;
  left: 29%;
  background: rgba(218, 111, 148, .17);
}

.catalogue__wash--gold {
  right: -12%;
  bottom: 2%;
  background: rgba(225, 159, 76, .13);
}

.catalogue__intro {
  position: relative;
  z-index: 2;
  width: min(calc(100% - 48px), 1100px);
  margin: 0 auto clamp(58px, 7vw, 100px);
  text-align: center;
}

.catalogue__intro .kicker {
  display: inline-flex;
  align-items: center;
  margin-bottom: 26px;
}

.catalogue h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(66px, 9.1vw, 142px);
  font-weight: 600;
  line-height: .78;
  letter-spacing: -.065em;
}

.catalogue h2 em {
  color: var(--rose);
  font-weight: 600;
}

.catalogue__lead {
  max-width: 720px;
  margin: 42px auto 0;
  color: var(--muted);
  font-size: clamp(18px, 1.65vw, 24px);
  line-height: 1.5;
}

.catalogue__lead strong {
  color: var(--ink);
  font-weight: 900;
}

.catalogue__stage {
  position: relative;
  width: min(calc(100% - 40px), 1500px);
  height: clamp(690px, 59vw, 900px);
  margin: 0 auto;
}

.catalogue-phone {
  position: absolute;
  z-index: 3;
  padding: 6px;
  background: #100c12;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: clamp(25px, 2.3vw, 40px);
  box-shadow:
    0 34px 80px rgba(67, 40, 33, .2),
    0 8px 24px rgba(67, 40, 33, .12),
    inset 0 0 0 1px rgba(255, 255, 255, .08);
  overflow: visible;
  transition: transform .65s var(--ease), box-shadow .65s var(--ease);
}

.catalogue-phone::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 11% 8% -5%;
  background: rgba(184, 79, 119, .2);
  border-radius: inherit;
  filter: blur(34px);
  opacity: .5;
}

.catalogue-phone:hover {
  z-index: 8;
  box-shadow:
    0 45px 100px rgba(67, 40, 33, .26),
    0 12px 30px rgba(67, 40, 33, .15),
    inset 0 0 0 1px rgba(255, 255, 255, .1);
}

.catalogue-phone img {
  width: 100%;
  height: auto;
  border-radius: calc(clamp(25px, 2.3vw, 40px) - 7px);
}

.catalogue-phone__label {
  position: absolute;
  z-index: 2;
  top: 24px;
  left: 50%;
  padding: 7px 12px;
  color: white;
  background: rgba(24, 17, 22, .7);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 100px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: 0;
  transform: translate(-50%, -8px);
  backdrop-filter: blur(12px);
  transition: opacity .3s, transform .3s var(--ease);
}

.catalogue-phone:hover .catalogue-phone__label {
  opacity: 1;
  transform: translate(-50%, 0);
}

.catalogue-phone--search {
  top: 27%;
  left: 15%;
  width: clamp(180px, 17.5vw, 252px);
  transform: rotate(-4.5deg);
}

.catalogue-phone--search:hover {
  transform: rotate(-2deg) translateY(-12px);
}

.catalogue-phone--library {
  top: 6%;
  left: 36.7%;
  width: clamp(230px, 22vw, 318px);
  transform: rotate(-.7deg);
}

.catalogue-phone--library:hover {
  transform: rotate(0) translateY(-14px);
}

.catalogue-phone--detail {
  top: 20%;
  left: 58.2%;
  width: clamp(205px, 19vw, 276px);
  transform: rotate(2deg);
}

.catalogue-phone--detail:hover {
  transform: rotate(.5deg) translateY(-12px);
}

.catalogue-phone--community {
  z-index: 2;
  top: 30%;
  right: 4%;
  width: clamp(175px, 16vw, 232px);
  transform: rotate(5deg);
}

.catalogue-phone--community:hover {
  transform: rotate(2deg) translateY(-12px);
}

.catalogue-note {
  position: absolute;
  z-index: 6;
  max-width: 275px;
}

.catalogue-note__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 13px;
  color: var(--rose);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.catalogue-note__eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
}

.catalogue-note h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(27px, 2.55vw, 42px);
  font-weight: 600;
  line-height: .94;
  letter-spacing: -.045em;
}

.catalogue-note p {
  margin: 15px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.catalogue-note--discover {
  top: 3%;
  left: 0;
}

.catalogue-note--save {
  top: 0;
  right: 1.5%;
  max-width: 290px;
}

.catalogue-note--save ul {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.catalogue-note--save li {
  padding: 7px 11px;
  color: #795968;
  background: rgba(200, 70, 118, .08);
  border: 1px solid rgba(200, 70, 118, .12);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 900;
}

.catalogue-note--community {
  right: 0;
  bottom: 0;
  max-width: 330px;
}

.catalogue-note__scores {
  display: flex;
  gap: 7px;
  margin-top: 18px;
}

.catalogue-note__scores span {
  padding: 8px 10px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(67, 40, 33, .09);
  border-radius: 12px;
  box-shadow: 0 9px 28px rgba(67, 40, 33, .07);
  font-size: 11px;
}

.catalogue-note__scores strong {
  margin-left: 3px;
}

.catalogue-path,
.catalogue-loop {
  position: absolute;
  z-index: 5;
  pointer-events: none;
}

.catalogue-path {
  border: 3px solid rgba(36, 27, 24, .78);
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-radius: 50%;
}

.catalogue-path::before,
.catalogue-path::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(36, 27, 24, .72);
}

.catalogue-path::before {
  width: 5px;
  height: 5px;
  box-shadow: 12px 0 rgba(36, 27, 24, .5), 24px 0 rgba(36, 27, 24, .28);
}

.catalogue-path::after {
  width: 8px;
  height: 8px;
}

.catalogue-path i,
.catalogue-loop i {
  position: absolute;
  display: block;
  width: 14px;
  height: 14px;
  border-right: 3px solid rgba(36, 27, 24, .82);
  border-bottom: 3px solid rgba(36, 27, 24, .82);
}

.catalogue-path--discover {
  top: 16%;
  left: 16%;
  width: 145px;
  height: 94px;
  transform: rotate(17deg);
}

.catalogue-path--discover::before {
  top: 9px;
  left: -17px;
}

.catalogue-path--discover::after {
  right: 7px;
  bottom: 9px;
}

.catalogue-path--discover i {
  right: -2px;
  bottom: 3px;
  transform: rotate(49deg);
}

.catalogue-path--save {
  top: 15%;
  right: 20%;
  width: 160px;
  height: 115px;
  border-right-color: transparent;
  border-left-color: rgba(36, 27, 24, .78);
  transform: rotate(-17deg);
}

.catalogue-path--save::before {
  top: 12px;
  right: -17px;
}

.catalogue-path--save::after {
  bottom: 7px;
  left: 5px;
}

.catalogue-path--save i {
  bottom: 0;
  left: -4px;
  transform: rotate(72deg);
}

.catalogue-path--community {
  right: 14%;
  bottom: 17%;
  width: 180px;
  height: 128px;
  border-top-color: transparent;
  border-bottom-color: rgba(36, 27, 24, .78);
  transform: rotate(9deg);
}

.catalogue-path--community::before {
  right: -16px;
  bottom: 10px;
}

.catalogue-path--community::after {
  top: 7px;
  left: 8px;
}

.catalogue-path--community i {
  top: 1px;
  left: 0;
  transform: rotate(-106deg);
}

.catalogue-loop {
  bottom: 12%;
  left: 45%;
  width: 72px;
  height: 72px;
  border: 2px solid rgba(200, 70, 118, .45);
  border-left-color: transparent;
  border-radius: 50%;
  transform: rotate(-25deg);
}

.catalogue-loop::after {
  content: "···";
  position: absolute;
  top: 18px;
  left: 66px;
  color: rgba(200, 70, 118, .55);
  font-size: 21px;
  font-weight: 900;
  letter-spacing: 3px;
}

.catalogue-loop i {
  top: -4px;
  left: 8px;
  width: 10px;
  height: 10px;
  border-color: rgba(200, 70, 118, .58);
  border-width: 2px;
  transform: rotate(148deg);
}

.catalogue__closer {
  position: relative;
  z-index: 3;
  margin: clamp(50px, 5vw, 80px) auto 0;
  padding: 0 24px;
  text-align: center;
  font-family: var(--display);
  font-size: clamp(27px, 3vw, 46px);
  letter-spacing: -.035em;
}

.catalogue__closer strong {
  color: var(--rose);
  font-weight: 600;
}

.feature-showcase {
  position: relative;
  padding: clamp(40px, 5vw, 70px) 0 clamp(60px, 7vw, 100px);
  color: var(--ink);
  background:
    linear-gradient(180deg, #f8ead7 0%, #f8f0e5 50%, #15101a 50.05%, #09080d 100%);
  overflow: hidden;
  isolation: isolate;
}

.feature-showcase__glow {
  position: absolute;
  z-index: -1;
  width: min(52vw, 760px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}

.feature-showcase__glow--one {
  top: 12%;
  right: -18%;
  background: rgba(220, 104, 143, .14);
}

.feature-showcase__glow--two {
  right: 22%;
  bottom: 5%;
  background: rgba(126, 84, 191, .16);
}

.feature-chapter {
  width: min(calc(100% - 48px), 1420px);
  margin-right: auto;
  margin-left: auto;
}

.feature-chapter + .feature-chapter {
  margin-top: clamp(130px, 15vw, 230px);
}

.feature-chapter__heading {
  display: grid;
  grid-template-columns: .7fr 1.1fr 1fr;
  align-items: end;
  gap: 35px;
  margin-bottom: clamp(42px, 5vw, 72px);
  padding: 0 4px 28px;
  border-bottom: 1px solid rgba(60, 43, 35, .15);
}

.feature-chapter__heading > div {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 8px;
}

.feature-chapter__number {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  color: white;
  background: var(--terra);
  border-radius: 50%;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
}

.feature-chapter__heading p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.feature-chapter__heading > div p {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.feature-chapter__heading h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(42px, 5vw, 74px);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: .9;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.7vw, 24px);
}

.feature-card {
  position: relative;
  min-width: 0;
  padding: clamp(24px, 2.2vw, 34px) clamp(18px, 1.8vw, 28px) 0;
  background:
    radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--card-accent) 13%, transparent), transparent 28%),
    rgba(255, 252, 247, .82);
  border: 1px solid rgba(70, 47, 38, .1);
  border-radius: clamp(26px, 2.5vw, 38px);
  box-shadow: 0 25px 70px rgba(78, 48, 34, .1);
  overflow: hidden;
  transition:
    opacity .9s var(--ease) var(--stagger),
    transform .7s var(--ease) var(--stagger),
    box-shadow .45s var(--ease),
    border-color .45s var(--ease);
}

.feature-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 15%;
  left: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--card-accent) 72%, white), transparent);
}

.feature-card:hover {
  border-color: color-mix(in srgb, var(--card-accent) 35%, transparent);
  box-shadow: 0 34px 85px rgba(68, 39, 27, .17);
  transform: translateY(-10px);
}

.feature-card__copy {
  min-height: 205px;
}

.feature-card__copy > span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--card-accent);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
}

.feature-card__copy > span::after {
  content: "";
  width: 32px;
  height: 1px;
  background: currentColor;
  opacity: .45;
}

.feature-card h4 {
  margin: 17px 0 12px;
  font-family: var(--display);
  font-size: clamp(29px, 2.7vw, 43px);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: .95;
}

.feature-card__copy p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(13px, 1.15vw, 15px);
  line-height: 1.55;
}

.feature-card__phone {
  position: relative;
  width: 94%;
  margin: 0 auto -40%;
  padding: 6px;
  background: #050507;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: clamp(25px, 2.4vw, 36px);
  box-shadow:
    0 28px 55px rgba(29, 18, 18, .28),
    inset 0 0 0 1px rgba(255, 255, 255, .08);
  overflow: hidden;
  transform: translateY(3px);
  transition: transform .6s var(--ease);
}

.feature-card:hover .feature-card__phone {
  transform: translateY(-4px) scale(1.012);
}

.feature-card__phone img {
  width: 100%;
  height: auto;
  border-radius: calc(clamp(25px, 2.4vw, 36px) - 7px);
}

.feature-chapter--history {
  color: white;
}

.feature-chapter--history .feature-chapter__heading {
  border-color: rgba(255, 255, 255, .13);
}

.feature-chapter--history .feature-chapter__number {
  color: #171019;
  background: #f2b75e;
}

.feature-chapter--history .feature-chapter__heading p {
  color: rgba(255, 255, 255, .48);
}

.feature-chapter--history .feature-card {
  background:
    radial-gradient(circle at 78% 16%, color-mix(in srgb, var(--card-accent) 18%, transparent), transparent 31%),
    linear-gradient(155deg, rgba(40, 30, 43, .94), rgba(18, 15, 22, .97));
  border-color: rgba(255, 255, 255, .09);
  box-shadow: 0 30px 85px rgba(0, 0, 0, .28);
}

.feature-chapter--history .feature-card:hover {
  border-color: color-mix(in srgb, var(--card-accent) 42%, transparent);
  box-shadow:
    0 36px 90px rgba(0, 0, 0, .46),
    0 0 50px color-mix(in srgb, var(--card-accent) 10%, transparent);
}

.feature-chapter--history .feature-card__copy p {
  color: rgba(255, 255, 255, .5);
}

.manifesto {
  position: relative;
  padding: clamp(50px, 6vw, 90px) 0;
  background: var(--cream);
  overflow: hidden;
}

.manifesto__mist {
  position: absolute;
  top: -15vw;
  right: -8vw;
  width: 45vw;
  height: 45vw;
  background: radial-gradient(circle, rgba(216, 157, 80, .22), transparent 68%);
  filter: blur(18px);
  transform: translateZ(0);
  will-change: transform;
}

.manifesto__inner {
  position: relative;
  width: min(calc(100% - 48px), var(--max));
  margin: 0 auto;
}

.manifesto h2 {
  max-width: 1080px;
  font-size: clamp(36px, 4.5vw, 68px);
  line-height: .98;
}

.manifesto h2 em,
.ritual h2 em {
  color: var(--terra);
  font-weight: 500;
}

.manifesto__lead {
  max-width: 640px;
  margin: 20px 0 44px auto;
  color: var(--muted);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
}

.shelf-stage {
  position: relative;
  min-height: 520px;
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  align-items: center;
  gap: 30px;
  padding: 44px clamp(24px, 4vw, 60px);
  color: white;
  background:
    radial-gradient(circle at 70% 55%, rgba(48, 106, 92, .38), transparent 32%),
    radial-gradient(circle at 35% 28%, rgba(206, 150, 73, .18), transparent 25%),
    linear-gradient(145deg, #19191a, #07090c 65%);
  border-radius: 46px;
  box-shadow: 0 40px 100px rgba(45, 31, 24, .22);
  overflow: hidden;
  isolation: isolate;
}

.shelf-stage::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, .05), transparent 30%);
  pointer-events: none;
}

.shelf-stage__glow {
  position: absolute;
  top: 12%;
  right: 14%;
  width: 32%;
  aspect-ratio: 1;
  background: rgba(255, 201, 112, .22);
  border-radius: 50%;
  filter: blur(90px);
}

.shelf-stage__copy {
  position: relative;
  z-index: 3;
}

.micro-label {
  color: var(--gold);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.shelf-stage h3 {
  max-width: 480px;
  margin: 18px 0 20px;
  font-family: var(--display);
  font-size: clamp(40px, 5vw, 70px);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1;
}

.shelf-stage__copy p {
  max-width: 440px;
  margin: 0;
  color: rgba(255, 255, 255, .58);
  font-size: 17px;
}

.feature-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.feature-pills li {
  padding: 8px 12px;
  color: rgba(255, 255, 255, .7);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 800;
}

.shelf-stage__visual {
  position: absolute;
  top: -8%;
  right: 3%;
  width: min(470px, 42%);
  height: 118%;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 36px;
  box-shadow: -30px 40px 80px rgba(0, 0, 0, .55);
  overflow: hidden;
  transform: rotate(4deg);
  transition: transform .3s var(--ease);
}

.shelf-stage__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.universe {
  position: relative;
  min-height: 1200px;
  padding: clamp(60px, 7vw, 100px) 0 clamp(60px, 7vw, 100px);
  color: white;
  background: linear-gradient(165deg, #10152b, #070913 50%, #05060b);
  overflow: clip;
}

.universe__nebula {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(102, 75, 221, .24), transparent 23%),
    radial-gradient(circle at 15% 78%, rgba(36, 92, 166, .14), transparent 23%);
  pointer-events: none;
}

.universe__intro {
  position: relative;
  z-index: 2;
  width: min(calc(100% - 48px), 1040px);
  margin: 0 auto 60px;
  text-align: center;
}

.universe__intro h2 {
  font-size: clamp(52px, 8vw, 110px);
  line-height: .95;
}

.universe__intro > p:last-child {
  max-width: 700px;
  margin: 30px auto 0;
  color: rgba(255, 255, 255, .57);
  font-size: clamp(18px, 2vw, 23px);
}

.universe__stage {
  position: relative;
  z-index: 3;
  width: min(calc(100% - 48px), 1120px);
  min-height: 1050px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  align-items: start;
  gap: 90px;
}

.universe__copy {
  padding-top: 130px;
}

.story-beat {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  max-width: 460px;
  margin-bottom: 100px;
  opacity: .28;
  transform: translateX(-10px);
  transition: opacity .45s, transform .45s;
}

.story-beat--active {
  opacity: 1;
  transform: none;
}

.story-beat__number {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--gold);
  border: 1px solid rgba(241, 189, 96, .4);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 900;
}

.story-beat h3 {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: clamp(31px, 3vw, 46px);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1.05;
}

.story-beat p {
  margin: 0;
  color: rgba(255, 255, 255, .58);
  font-size: 16px;
}

.universe__phone-wrap {
  position: sticky;
  top: 105px;
  min-height: 760px;
  display: grid;
  place-items: center;
}

.iphone--cosmic {
  width: min(350px, 31vw);
  min-width: 300px;
  box-shadow:
    0 60px 120px rgba(0, 0, 0, .68),
    0 0 100px rgba(100, 77, 231, .18);
}

.orbit {
  position: absolute;
  width: 620px;
  aspect-ratio: 1;
  border: 1px solid rgba(137, 113, 255, .18);
  border-radius: 50%;
  animation: orbit-spin 32s linear infinite;
}

.orbit--two {
  width: 460px;
  border-color: rgba(241, 189, 96, .12);
  animation-duration: 22s;
  animation-direction: reverse;
}

.orbit span {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #b8a7ff;
  border-radius: 50%;
  box-shadow: 0 0 18px 5px rgba(137, 113, 255, .65);
}

.orbit span:nth-child(1) { top: 12%; left: 17%; }
.orbit span:nth-child(2) { right: -4px; bottom: 45%; }
.orbit span:nth-child(3) { bottom: 8%; left: 25%; }
.orbit--two span { background: var(--gold); box-shadow: 0 0 18px 5px rgba(241, 189, 96, .48); }

@keyframes orbit-spin {
  to { transform: rotate(360deg); }
}

.universe__tag {
  position: absolute;
  z-index: 7;
  padding: 10px 15px;
  color: rgba(255, 255, 255, .82);
  background: rgba(26, 28, 49, .68);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 100px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, .25);
  backdrop-filter: blur(15px);
  font-size: 11px;
  font-weight: 900;
}

.universe__tag--cosmere {
  top: 18%;
  right: -3%;
}

.universe__tag--optional {
  bottom: 20%;
  left: -2%;
  color: #c5b8ff;
}

.ritual {
  position: relative;
  padding: clamp(70px, 7vw, 110px) 0 clamp(80px, 8vw, 130px);
  background: var(--paper);
  overflow: hidden;
}

.ritual__inner {
  width: min(calc(100% - 48px), var(--max));
  margin: 0 auto;
}

.ritual__copy {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: end;
  gap: 48px;
  margin-bottom: clamp(38px, 4vw, 58px);
}

.ritual__copy .kicker {
  grid-column: 1 / -1;
  margin-bottom: -24px;
}

.ritual h2 {
  font-size: clamp(38px, 4.5vw, 68px);
  line-height: 1.02;
}

.ritual__copy > p:last-child {
  max-width: 500px;
  margin: 0 0 4px;
  color: var(--muted);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.5;
}

.ritual-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: 230px 160px 230px;
  gap: 14px;
}

.ritual-tile {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(58, 32, 42, .08);
  border-radius: 34px;
  box-shadow: 0 22px 55px rgba(75, 42, 29, .1);
  isolation: isolate;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

.ritual-tile:hover {
  transform: translateY(-4px);
}

.ritual-tile__copy {
  position: relative;
  z-index: 3;
}

.ritual-tile__eyebrow {
  display: block;
  margin-bottom: 9px;
  color: #bc4e76;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.ritual-tile h3 {
  margin: 0;
  color: #28161d;
  font-family: var(--display);
  font-size: clamp(22px, 2vw, 31px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.035em;
}

.ritual-tile p {
  margin: 10px 0 0;
  color: rgba(53, 32, 42, .58);
  font-size: 12px;
  line-height: 1.45;
}

.ritual-tile__badge {
  position: absolute;
  z-index: 4;
  right: 18px;
  bottom: 16px;
  padding: 8px 11px;
  color: #fff;
  background: rgba(44, 25, 34, .76);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 100px;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
}

.timer-card {
  grid-column: 1 / 7;
  grid-row: 1 / 4;
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  align-items: center;
  gap: clamp(18px, 2vw, 32px);
  padding: clamp(25px, 3vw, 43px);
  color: white;
  background:
    radial-gradient(circle at 72% 44%, rgba(221, 119, 73, .2), transparent 31%),
    linear-gradient(145deg, #301812, #170c0b 65%, #0e0808);
  box-shadow: 0 45px 100px rgba(75, 42, 29, .2);
}

.timer-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, rgba(255, 255, 255, .08), transparent 30%);
}

.timer-card__book {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.timer-card__book img {
  width: min(150px, 82%);
  aspect-ratio: 2 / 3;
  object-fit: cover;
  margin-bottom: 19px;
  border-radius: 9px;
  box-shadow: 0 28px 60px rgba(0, 0, 0, .55);
}

.timer-card__book span,
.reading-ring__value span {
  color: #ef849d;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.timer-card__book strong {
  margin-top: 8px;
  font-family: var(--display);
  font-size: 23px;
  font-weight: 600;
}

.timer-card__book small {
  color: rgba(255, 255, 255, .56);
  font-size: 13px;
}

.reading-ring {
  position: relative;
  width: min(260px, 21vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin: 0 auto;
  border-radius: 50%;
  background:
    radial-gradient(circle, #241110 0 57%, transparent 58%),
    conic-gradient(from 210deg, #ea6c91 0 20%, #e7a15c 34%, rgba(255, 255, 255, .11) 34% 100%);
  box-shadow: 0 0 90px rgba(234, 108, 145, .16);
}

.reading-ring::after {
  content: "";
  position: absolute;
  inset: 13px;
  background: #1d0e0d;
  border-radius: 50%;
}

.reading-ring__value {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.reading-ring__value strong {
  font-size: clamp(40px, 4.3vw, 62px);
  font-weight: 700;
  letter-spacing: -.06em;
  line-height: 1.1;
}

.reading-ring__value small {
  color: rgba(255, 255, 255, .52);
  font-size: 13px;
}

.timer-card__progress {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 27px;
}

.timer-card__stats {
  position: static;
  width: min(100%, 330px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.timer-card__stats > span {
  min-width: 0;
  padding: 11px 8px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  text-align: center;
}

.timer-card__stats strong,
.timer-card__stats small {
  display: block;
}

.timer-card__stats strong {
  font-size: 18px;
}

.timer-card__stats small {
  color: rgba(255, 255, 255, .48);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .05em;
}

.timer-card__leaves {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}

.timer-card__leaves i {
  position: absolute;
  width: 14px;
  height: 9px;
  background: #bd542f;
  border-radius: 100% 0 100% 0;
  opacity: .65;
  animation: leaf-drift 8s ease-in-out infinite;
}

.timer-card__leaves i:nth-child(1) { top: 12%; left: 8%; animation-delay: -1s; }
.timer-card__leaves i:nth-child(2) { top: 20%; right: 8%; animation-delay: -4s; }
.timer-card__leaves i:nth-child(3) { right: 43%; bottom: 10%; animation-delay: -6s; }
.timer-card__leaves i:nth-child(4) { top: 48%; left: 3%; animation-delay: -2s; }
.timer-card__leaves i:nth-child(5) { top: 8%; right: 35%; animation-delay: -7s; }

@keyframes leaf-drift {
  50% { transform: translate(20px, 28px) rotate(130deg); opacity: .28; }
}

.ritual-tile--watch {
  grid-column: 7 / 10;
  grid-row: 1;
  padding: 25px 23px;
  background: #2d1d25;
  border-color: rgba(255, 255, 255, .12);
  box-shadow: 0 28px 60px rgba(54, 27, 40, .22);
}

.ritual-tile--watch h3 {
  color: #fff8f5;
  font-size: clamp(22px, 1.8vw, 28px);
  line-height: .96;
}

.ritual-tile--watch .ritual-tile__copy {
  width: 45%;
}

.ritual-tile--watch p {
  display: block;
  color: rgba(255, 248, 245, .62);
  font-size: 10px;
}

.ritual-tile--watch .ritual-tile__eyebrow {
  color: #f18aac;
}

.ritual-tile--watch::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, rgba(38, 21, 29, .72) 0%, rgba(38, 21, 29, .24) 45%, transparent 68%);
  pointer-events: none;
}

.watch-product {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.ritual-tile--widget {
  grid-column: 10 / 13;
  grid-row: 1;
  padding: 24px;
  background:
    radial-gradient(circle at 78% 26%, rgba(151, 177, 238, .26), transparent 37%),
    linear-gradient(135deg, #332b3e, #45394c);
  border-color: rgba(255, 255, 255, .12);
  box-shadow: 0 28px 60px rgba(47, 35, 55, .2);
}

.ritual-tile--widget::before,
.ritual-tile--streak::before,
.ritual-tile--calendar::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(125deg, rgba(255, 255, 255, .1), transparent 34%);
  pointer-events: none;
}

.ritual-tile--widget h3,
.ritual-tile--streak h3,
.ritual-tile--calendar h3 {
  color: #fff8f6;
}

.ritual-tile--widget .ritual-tile__eyebrow,
.ritual-tile--streak .ritual-tile__eyebrow,
.ritual-tile--calendar .ritual-tile__eyebrow {
  color: #ff94b8;
}

.ritual-tile--widget p,
.ritual-tile--streak p,
.ritual-tile--calendar p {
  color: rgba(255, 248, 246, .64);
}

.ritual-tile--widget .ritual-tile__copy {
  width: 48%;
}

.ritual-tile--widget .ritual-tile__image {
  position: absolute;
  top: 50%;
  right: 18px;
  width: 41%;
  height: auto;
  padding: 5px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 27px;
  box-shadow:
    0 24px 45px rgba(17, 12, 23, .34),
    0 0 40px rgba(132, 159, 225, .14);
  transform: translateY(-50%);
}

.ritual-tile--streak {
  grid-column: 7 / 13;
  grid-row: 2;
  padding: 24px;
  background:
    radial-gradient(circle at 84% 50%, rgba(219, 127, 154, .18), transparent 34%),
    linear-gradient(120deg, #4b303d, #62404d);
  border-color: rgba(255, 255, 255, .13);
  box-shadow: 0 25px 55px rgba(72, 42, 54, .18);
}

.ritual-tile--streak .ritual-tile__copy {
  width: 43%;
}

.ritual-tile--streak h3 {
  font-size: clamp(21px, 1.8vw, 28px);
}

.ritual-tile--streak p {
  max-width: 210px;
}

.ritual-tile--streak .ritual-tile__image {
  position: absolute;
  top: 50%;
  right: 18px;
  width: 41%;
  height: auto;
  max-height: calc(100% - 20px);
  object-fit: contain;
  padding: 6px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 21px;
  box-shadow:
    0 18px 36px rgba(28, 16, 23, .3),
    0 0 38px rgba(230, 135, 164, .09);
  transform: translateY(-50%);
}

.ritual-tile--calendar {
  grid-column: 7 / 13;
  grid-row: 3;
  padding: 27px;
  background:
    radial-gradient(circle at 84% 38%, rgba(244, 182, 196, .18), transparent 35%),
    linear-gradient(125deg, #674754, #805d68);
  border-color: rgba(255, 255, 255, .14);
  box-shadow: 0 28px 58px rgba(83, 51, 63, .17);
}

.ritual-tile--calendar .ritual-tile__copy {
  width: 45%;
}

.ritual-tile--calendar .ritual-tile__image {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 51%;
  height: calc(100% - 24px);
  object-fit: cover;
  object-position: center 62%;
  padding: 6px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 25px;
  box-shadow:
    0 25px 45px rgba(40, 23, 30, .3),
    0 0 45px rgba(255, 205, 216, .09);
  transform: rotate(-1deg);
}

.remember {
  position: relative;
  padding: clamp(90px, 9vw, 140px) 0 54px;
  color: #35202a;
  background:
    radial-gradient(circle at 76% 41%, rgba(200, 70, 118, .16), transparent 27%),
    radial-gradient(circle at 18% 74%, rgba(217, 151, 81, .1), transparent 24%),
    linear-gradient(135deg, #fbf4f5, #f1e2e4);
  overflow: clip;
  isolation: isolate;
}

.remember::before {
  content: "RECUERDA";
  position: absolute;
  z-index: -1;
  top: 5%;
  right: -2%;
  color: rgba(106, 62, 79, .035);
  font-size: clamp(90px, 14vw, 210px);
  font-weight: 950;
  letter-spacing: -.08em;
  pointer-events: none;
}

.remember__inner {
  display: grid;
  grid-template-columns: minmax(330px, .72fr) minmax(650px, 1.28fr);
  align-items: center;
  gap: clamp(28px, 4vw, 65px);
  width: min(calc(100% - 48px), 1380px);
  margin: 0 auto;
}

.remember__copy {
  position: relative;
  z-index: 12;
}

.remember h2 {
  max-width: 640px;
  font-size: clamp(48px, 5.4vw, 78px);
  line-height: .92;
}

.remember__copy > p:not(.kicker) {
  max-width: 520px;
  margin: 30px 0 0;
  color: #806873;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.55;
}

.remember__promise {
  display: grid;
  max-width: 430px;
  margin-top: 38px;
  border-top: 1px solid rgba(78, 43, 58, .13);
  border-bottom: 1px solid rgba(78, 43, 58, .13);
}

.remember__promise span {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 11px 0;
  color: #765565;
  font-size: 11px;
  font-weight: 800;
}

.remember__promise span + span {
  border-top: 1px solid rgba(78, 43, 58, .09);
}

.remember__promise strong {
  color: var(--rose);
  font-size: 9px;
  letter-spacing: .12em;
}

.remember__visual {
  position: relative;
  min-height: 900px;
  display: grid;
  place-items: center;
  perspective: 1400px;
}

.review-glow {
  position: absolute;
  width: min(72vw, 760px);
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 50% 48%, rgba(200, 70, 118, .2), transparent 54%),
    radial-gradient(circle at 27% 62%, rgba(214, 160, 88, .12), transparent 36%);
  filter: blur(12px);
}

.iphone--review {
  position: relative;
  z-index: 7;
  width: min(335px, 26vw);
  min-width: 300px;
  transform: rotate(1.5deg);
  box-shadow:
    0 60px 110px rgba(80, 38, 57, .32),
    0 15px 35px rgba(80, 38, 57, .18);
}

.remember-card {
  position: absolute;
  z-index: 3;
  margin: 0;
  padding: 6px;
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 30px;
  box-shadow:
    0 34px 70px rgba(101, 55, 73, .2),
    inset 0 0 0 1px rgba(102, 58, 76, .06);
  backdrop-filter: blur(18px);
  transform-style: preserve-3d;
  animation: remember-float 8s ease-in-out infinite;
}

.remember-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
}

.remember-card--notes {
  top: 23%;
  left: -1%;
  width: min(235px, 20vw);
  height: 470px;
  transform: rotate(-7deg) translateZ(-40px);
  animation-delay: -2s;
}

.remember-card--notes img {
  object-position: center top;
}

.remember-card--theories {
  top: 8%;
  right: 1%;
  width: min(225px, 19vw);
  aspect-ratio: 548 / 640;
  transform: rotate(7deg) translateZ(-55px);
  animation-delay: -5s;
}

.remember-card--community {
  right: -1%;
  bottom: 12%;
  width: min(275px, 23vw);
  aspect-ratio: 1053 / 1060;
  transform: rotate(4deg) translateZ(-28px);
  animation-delay: -7s;
}

.remember-card figcaption {
  position: absolute;
  z-index: 5;
  width: 205px;
  padding: 11px 13px;
  color: #6f4658;
  background: rgba(255, 255, 255, .84);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 15px;
  box-shadow: 0 14px 34px rgba(91, 52, 68, .14);
  backdrop-filter: blur(14px);
}

.remember-card figcaption::after {
  content: "";
  position: absolute;
  width: 42px;
  height: 1px;
  background: rgba(200, 70, 118, .5);
}

.remember-card figcaption strong,
.remember-card figcaption span {
  display: block;
}

.remember-card figcaption strong {
  color: var(--rose);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.remember-card figcaption span {
  margin-top: 4px;
  color: #7f6470;
  font-size: 9px;
  line-height: 1.35;
}

.remember-card--notes figcaption {
  top: -75px;
  left: -12px;
}

.remember-card--notes figcaption::after {
  bottom: -13px;
  left: 31px;
  transform: rotate(52deg);
  transform-origin: left;
}

.remember-card--theories figcaption {
  top: -62px;
  right: -8px;
}

.remember-card--theories figcaption::after {
  right: 28px;
  bottom: -13px;
  transform: rotate(126deg);
  transform-origin: right;
}

.remember-card--community figcaption {
  right: -12px;
  bottom: -66px;
}

.remember-card--community figcaption::after {
  top: -12px;
  right: 27px;
  transform: rotate(52deg);
  transform-origin: right;
}

@keyframes remember-float {
  50% { translate: 0 -9px; }
}

.remember__feature-rail {
  width: 100%;
  margin-top: 30px;
  padding: 18px 0 4px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.remember__feature-track {
  display: flex;
  width: max-content;
  animation: remember-rail 42s linear infinite;
}

.remember__feature-track > div {
  display: flex;
  gap: 8px;
  padding-right: 8px;
}

.remember__feature-track span {
  padding: 9px 13px;
  color: #8b5d70;
  background: rgba(255, 255, 255, .58);
  border: 1px solid rgba(200, 70, 118, .14);
  border-radius: 100px;
  box-shadow: 0 8px 24px rgba(103, 61, 77, .06);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .03em;
  white-space: nowrap;
}

@keyframes remember-rail {
  to { transform: translateX(-50%); }
}

.panorama {
  position: relative;
  padding: clamp(60px, 7vw, 80px) 0;
  color: white;
  background: #08090e;
  overflow: hidden;
}

.panorama::before {
  content: "";
  position: absolute;
  top: 0;
  right: 15%;
  left: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent);
}

.panorama__head {
  width: min(calc(100% - 48px), var(--max));
  margin: 0 auto 72px;
  text-align: center;
}

.panorama h2 {
  font-size: clamp(50px, 7.5vw, 102px);
  line-height: .96;
}

.panorama__frame {
  width: min(calc(100% - 34px), 1500px);
  margin: 0 auto;
  padding: 9px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 35px;
  box-shadow: 0 50px 120px rgba(0, 0, 0, .65);
  overflow: hidden;
}

.panorama__frame img {
  width: 100%;
  border-radius: 27px;
}

.panorama__grid {
  width: min(calc(100% - 48px), var(--max));
  margin: 70px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, .12);
}

.panorama__grid article {
  min-height: 190px;
  padding: 30px;
  background: #08090e;
}

.panorama__grid span {
  color: var(--gold);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .15em;
}

.panorama__grid h3 {
  margin: 35px 0 7px;
  font-family: var(--display);
  font-size: 26px;
  font-weight: 600;
}

.panorama__grid p {
  margin: 0;
  color: rgba(255, 255, 255, .46);
  font-size: 13px;
}

.download {
  position: relative;
  display: grid;
  place-items: center;
  padding: 60px 24px;
  color: white;
  background: linear-gradient(160deg, #11172c, #070912 60%, #05060a);
  overflow: hidden;
}

.download__glow {
  position: absolute;
  z-index: 1;
  width: min(800px, 80vw);
  aspect-ratio: 1;
  background:
    radial-gradient(circle, rgba(200, 110, 67, .22), rgba(137, 113, 255, .08) 45%, transparent 70%);
  filter: blur(15px);
}

.download__inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 980px;
  text-align: center;
}

.download__inner > img {
  margin-bottom: 28px;
  border-radius: 28px;
  box-shadow: 0 25px 70px rgba(0, 0, 0, .48);
}

.download h2 {
  font-size: clamp(38px, 4.8vw, 70px);
  line-height: .95;
}

.download__inner > p:not(.kicker) {
  max-width: 620px;
  margin: 22px 0 0;
  color: rgba(255, 255, 255, .62);
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.6;
}

.download__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-top: 38px;
}

.store-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 200px;
  padding: 10px 20px;
  color: var(--night);
  background: white;
  border-radius: 15px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .34);
  text-align: left;
  transition: transform .25s var(--ease), box-shadow .25s;
}

.store-button:hover {
  box-shadow: 0 24px 58px rgba(0, 0, 0, .42);
  transform: translateY(-2px);
}

.store-button__apple-svg {
  flex-shrink: 0;
  width: 22px;
  height: 26px;
  fill: currentColor;
}

.store-button__apple {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 34px;
  line-height: 1;
}

.store-button small,
.store-button strong {
  display: block;
  line-height: 1.05;
}

.store-button small {
  font-size: 9px;
  font-weight: 700;
}

.store-button strong {
  margin-top: 2px;
  font-size: 20px;
}

.download__soon {
  color: rgba(255, 255, 255, .36);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.footer {
  min-height: 120px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 25px;
  padding: 28px max(24px, calc((100vw - var(--max)) / 2));
  color: rgba(255, 255, 255, .6);
  background: #05060a;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.footer p,
.footer small {
  margin: 0;
  font-size: 11px;
}

.footer small {
  justify-self: end;
}

.footer__link {
  color: rgba(255, 255, 255, .7);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s var(--ease);
}

.footer__link:hover {
  color: var(--cream);
}

.reveal {
  opacity: 1;
  transform: none;
}

.motion-ready .reveal:not(.is-visible) {
  opacity: 0;
  transform: translateY(28px);
}

.motion-ready .reveal {
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}

.motion-ready .feature-card.reveal {
  transition:
    box-shadow .45s var(--ease),
    border-color .45s var(--ease),
    transform .45s var(--ease);
}

.motion-ready .feature-card.reveal.is-visible {
  animation: feature-arrive .85s var(--ease) var(--stagger) backwards;
}

@keyframes feature-arrive {
  from {
    opacity: 0;
    transform: translateY(36px) scale(.975);
  }
}

@media (max-width: 1050px) {
  .hero {
    min-height: 880px;
    height: auto;
  }

  .hero__content {
    min-height: 880px;
    grid-template-columns: 1fr .9fr;
  }

  .hero__product {
    min-height: 590px;
  }

  .iphone--hero {
    min-width: 260px;
  }

  .iphone--hero-secondary {
    right: -36%;
    min-width: 190px;
  }

  .catalogue__stage {
    width: min(calc(100% - 30px), 1020px);
  }

  .catalogue-note--discover,
  .catalogue-note--save {
    max-width: 220px;
  }

  .catalogue-note--discover {
    left: 1%;
  }

  .catalogue-note--save {
    right: 0;
  }

  .catalogue-note--community {
    max-width: 275px;
  }

  .catalogue-phone--search {
    left: 10%;
  }

  .catalogue-phone--library {
    left: 32.5%;
  }

  .catalogue-phone--detail {
    left: 57%;
  }

  .catalogue-phone--community {
    right: 0;
  }

  .catalogue-path--discover {
    left: 14%;
    transform: scale(.82) rotate(17deg);
  }

  .catalogue-path--save {
    right: 16%;
    transform: scale(.82) rotate(-17deg);
  }

  .feature-showcase {
    background:
      linear-gradient(180deg, #f8ead7 0%, #f8f0e5 50%, #15101a 50.05%, #09080d 100%);
  }

  .feature-chapter__heading {
    grid-template-columns: .65fr 1fr 1fr;
  }

  .feature-card {
    padding-right: 17px;
    padding-left: 17px;
  }

  .feature-card__copy {
    min-height: 220px;
  }

  .shelf-stage {
    min-height: 660px;
  }

  .timer-card {
    grid-template-columns: .7fr 1fr;
  }

  .reading-ring {
    width: min(240px, 22vw);
  }

  .ritual-grid {
    grid-template-rows: 220px 155px 220px;
  }

  .ritual-tile--watch {
    grid-column: 7 / 10;
  }

  .ritual-tile--widget {
    grid-column: 10 / 13;
  }

  .ritual-tile--widget .ritual-tile__copy {
    width: 52%;
  }

  .ritual-tile--widget .ritual-tile__image {
    right: 12px;
    width: 43%;
  }

  .remember__inner {
    grid-template-columns: minmax(300px, .75fr) minmax(560px, 1.25fr);
    gap: 24px;
  }

  .remember__visual {
    min-height: 850px;
  }
}

@media (max-width: 820px) {
  .nav {
    width: calc(100% - 24px);
  }

  .nav__links {
    position: fixed;
    top: 70px;
    right: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px;
    color: var(--ink);
    background: rgba(250, 242, 226, .97);
    border: 1px solid rgba(78, 49, 36, .1);
    border-radius: 20px;
    box-shadow: 0 30px 60px rgba(72, 45, 31, .18);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-12px);
    transition: opacity .25s, transform .25s;
  }

  .nav.is-open .nav__links {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .nav__links a {
    padding: 14px 16px;
    font-size: 15px;
  }

  .nav__links a::after,
  .nav__cta {
    display: none;
  }

  .nav__menu {
    display: block;
  }

  .nav.is-open .nav__menu span:first-child {
    transform: translateY(3.25px) rotate(45deg);
  }

  .nav.is-open .nav__menu span:last-child {
    transform: translateY(-3.25px) rotate(-45deg);
  }

  .hero {
    min-height: auto;
    height: auto;
    padding-bottom: 50px;
  }

  .hero__content {
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding-top: 120px;
    text-align: center;
  }

  .hero__copy {
    display: contents;
  }

  .hero .kicker {
    order: 1;
    margin-bottom: 12px;
  }

  .hero h1 {
    order: 2;
    font-size: clamp(76px, 16vw, 110px);
  }

  .hero .hero__tagline {
    order: 3;
    font-size: clamp(28px, 6vw, 40px);
    margin-top: 14px;
  }

  .hero .hero__lead {
    order: 4;
    margin-right: auto;
    margin-left: auto;
    margin-top: 14px;
    max-width: 580px;
  }

  .hero .hero__product {
    order: 5;
    height: 580px;
    min-height: 0;
    margin: 24px auto 12px;
    width: 100%;
  }

  .hero .waitlist-card {
    order: 6;
    margin-top: 12px;
    margin-bottom: 24px;
    width: 100%;
    max-width: 520px;
  }

  .hero .hero__stores {
    order: 7;
    justify-content: center;
    margin-top: 8px;
  }

  .hero .hero__note {
    order: 8;
    margin-top: 16px;
  }

  .iphone--hero {
    width: 280px;
    min-width: 0;
  }

  .iphone--hero-secondary {
    top: 16%;
    right: -32%;
    width: 205px;
    min-width: 0;
  }

  .catalogue {
    min-height: auto;
    padding-top: 100px;
  }

  .catalogue__intro {
    margin-bottom: 64px;
  }

  .catalogue h2 {
    font-size: clamp(62px, 13vw, 106px);
  }

  .catalogue__lead {
    margin-top: 30px;
  }

  .catalogue__stage {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 28px 20px;
    width: min(calc(100% - 40px), 700px);
    height: auto;
  }

  .catalogue-phone,
  .catalogue-note {
    position: relative;
    inset: auto;
    width: auto;
    max-width: none;
    transform: none;
  }

  .catalogue-phone:hover {
    transform: translateY(-6px);
  }

  .catalogue-note {
    align-self: center;
    padding: 22px 4px;
  }

  .catalogue-note--discover {
    grid-column: 1;
    grid-row: 1;
  }

  .catalogue-phone--search {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .catalogue-phone--library {
    grid-column: 1;
    grid-row: 2 / span 2;
  }

  .catalogue-note--save {
    grid-column: 2;
    grid-row: 3;
  }

  .catalogue-phone--detail {
    grid-column: 2;
    grid-row: 4 / span 2;
  }

  .catalogue-phone--community {
    grid-column: 1;
    grid-row: 4 / span 2;
  }

  .catalogue-note--community {
    grid-column: 1 / -1;
    grid-row: 6;
    width: min(100%, 480px);
    margin: 14px auto 0;
    text-align: center;
  }

  .catalogue-note__scores {
    justify-content: center;
  }

  .catalogue-path,
  .catalogue-loop {
    display: none;
  }

  .feature-showcase {
    background:
      linear-gradient(180deg, #f8ead7 0%, #f8f0e5 50%, #15101a 50.05%, #09080d 100%);
  }

  .feature-chapter__heading {
    grid-template-columns: .65fr 1fr;
  }

  .feature-chapter__heading > p {
    grid-column: 2;
  }

  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .feature-card__copy {
    min-height: 190px;
  }

  .feature-card__phone {
    margin-bottom: -48%;
  }

  .manifesto__lead {
    margin-left: 0;
  }

  .shelf-stage {
    min-height: 900px;
    grid-template-columns: 1fr;
    align-items: start;
    padding-top: 58px;
  }

  .shelf-stage__copy {
    max-width: 500px;
  }

  .shelf-stage__visual {
    top: auto;
    right: 50%;
    bottom: -17%;
    width: 400px;
    max-width: 70%;
    height: 76%;
    transform: translateX(50%) rotate(3deg);
  }

  .universe {
    min-height: auto;
    padding-bottom: 140px;
  }

  .universe__intro {
    margin-bottom: 70px;
  }

  .universe__stage {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .universe__copy {
    padding-top: 0;
  }

  .story-beat {
    margin: 0 auto 35px;
    opacity: 1;
    transform: none;
  }

  .universe__phone-wrap {
    position: relative;
    top: 0;
    min-height: 780px;
  }

  .iphone--cosmic {
    width: 315px;
    min-width: 0;
  }

  .orbit {
    width: 580px;
  }

  .orbit--two {
    width: 430px;
  }

  .ritual__copy {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .ritual__copy .kicker {
    grid-column: auto;
    margin-bottom: 0;
  }

  .timer-card {
    grid-column: auto;
    grid-row: auto;
    grid-template-columns: 1fr;
    align-content: center;
    gap: 52px;
    padding-top: 55px;
    padding-bottom: 55px;
  }

  .timer-card__book img {
    width: 155px;
  }

  .reading-ring {
    width: 330px;
    max-width: 82vw;
  }

  .timer-card__stats {
    width: min(100%, 410px);
  }

  .ritual-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto 260px 180px 260px;
    gap: 12px;
  }

  .timer-card {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .ritual-tile--watch {
    grid-column: 1;
    grid-row: 2;
  }

  .ritual-tile--widget {
    grid-column: 2;
    grid-row: 2;
  }

  .ritual-tile--streak {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .ritual-tile--calendar {
    grid-column: 1 / -1;
    grid-row: 4;
  }

  .ritual-tile--widget .ritual-tile__copy {
    width: 54%;
  }

  .ritual-tile--widget .ritual-tile__image {
    right: 12px;
    width: 46%;
  }

  .remember {
    min-height: auto;
    padding-top: 105px;
  }

  .remember__inner {
    grid-template-columns: 1fr;
    gap: 35px;
    width: min(calc(100% - 40px), 720px);
  }

  .remember__copy {
    max-width: 720px;
  }

  .remember__visual {
    min-height: 950px;
  }

  .iphone--review {
    width: 315px;
    min-width: 0;
  }

  .remember-card--notes {
    top: 24%;
    left: 0;
    width: 190px;
    height: 380px;
  }

  .remember-card--theories {
    top: 8%;
    right: 0;
    width: 180px;
  }

  .remember-card--community {
    right: 0;
    bottom: 9%;
    width: 220px;
  }

  .panorama__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .footer small {
    justify-self: center;
  }
}

@media (max-width: 560px) {
  .hero,
  .hero__content {
    min-height: auto;
  }

  .hero__content,
  .catalogue__intro,
  .feature-chapter,
  .manifesto__inner,
  .universe__intro,
  .universe__stage,
  .ritual__inner,
  .panorama__head,
  .panorama__grid {
    width: min(calc(100% - 32px), var(--max));
  }

  .hero__content {
    padding-top: 125px;
  }

  .hero h1 {
    font-size: clamp(72px, 22vw, 102px);
  }

  .hero__tagline {
    margin-top: 18px;
    font-size: clamp(27px, 9vw, 38px);
  }

  .hero__lead {
    font-size: 16px;
  }

  .catalogue {
    padding-top: 86px;
  }

  .catalogue__intro {
    margin-bottom: 46px;
  }

  .catalogue h2 {
    font-size: clamp(54px, 16vw, 82px);
    line-height: .82;
  }

  .catalogue__lead {
    font-size: 17px;
  }

  .catalogue__stage {
    gap: 32px 12px;
    width: min(calc(100% - 24px), 500px);
  }

  .catalogue-note {
    padding: 4px 0;
  }

  .catalogue-note h3 {
    font-size: clamp(23px, 7.2vw, 33px);
  }

  .catalogue-note p {
    font-size: 12px;
  }

  .catalogue-note--save ul {
    gap: 5px;
    margin-top: 13px;
  }

  .catalogue-note--save li {
    padding: 5px 8px;
    font-size: 9px;
  }

  .catalogue-phone {
    padding: 4px;
    border-radius: 24px;
  }

  .catalogue-phone img {
    border-radius: 19px;
  }

  .catalogue-note--community {
    padding: 36px 12px 0;
  }

  .catalogue__closer {
    margin-top: 46px;
    font-size: clamp(25px, 7.8vw, 36px);
  }

  .hero__stores {
    flex-direction: column;
    gap: 13px;
  }

  .hero .store-button {
    width: min(220px, 100%);
  }

  .hero__product {
    height: 555px;
  }

  .iphone--hero {
    width: 250px;
  }

  .iphone--hero-secondary {
    top: 17%;
    right: -25%;
    width: 175px;
  }

  .feature-showcase {
    padding-top: 68px;
    background:
      linear-gradient(180deg, #f8ead7 0%, #f8f0e5 50%, #15101a 50.05%, #09080d 100%);
  }

  .feature-chapter__heading {
    display: block;
    margin-bottom: 32px;
    padding-bottom: 24px;
  }

  .feature-chapter__heading > div {
    margin-bottom: 20px;
  }

  .feature-chapter__heading h3 {
    font-size: 50px;
  }

  .feature-chapter__heading > p {
    max-width: 330px;
    margin-top: 14px;
    font-size: 13px;
  }

  .feature-grid {
    width: calc(100% + 32px);
    grid-auto-columns: min(78vw, 330px);
    grid-template-columns: none;
    grid-auto-flow: column;
    gap: 14px;
    margin-right: -16px;
    margin-left: -16px;
    padding: 4px 16px 30px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 16px;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
  }

  .feature-grid::-webkit-scrollbar {
    display: none;
  }

  .feature-card {
    min-height: 650px;
    padding: 27px 22px 0;
    scroll-snap-align: start;
  }

  .feature-card__copy {
    min-height: 185px;
  }

  .feature-card h4 {
    font-size: 36px;
  }

  .feature-card__copy p {
    font-size: 14px;
  }

  .feature-card__phone {
    width: 92%;
    margin-bottom: -48%;
    border-radius: 31px;
  }

  .feature-card:hover {
    transform: none;
  }

  .feature-card:hover .feature-card__phone {
    transform: translateY(3px);
  }

  .feature-chapter + .feature-chapter {
    margin-top: 145px;
  }

  .manifesto {
    padding-top: 100px;
  }

  .manifesto h2,
  .universe__intro h2,
  .ritual h2,
  .remember h2,
  .panorama h2,
  .download h2 {
    font-size: clamp(44px, 13vw, 68px);
  }

  .manifesto__lead {
    margin-bottom: 60px;
    font-size: 17px;
  }

  .shelf-stage {
    min-height: 800px;
    padding: 42px 24px;
    border-radius: 30px;
  }

  .shelf-stage h3 {
    font-size: 43px;
  }

  .shelf-stage__visual {
    bottom: -15%;
    max-width: 82%;
    height: 68%;
    border-radius: 26px;
  }

  .universe {
    padding-top: 105px;
  }

  .universe__intro > p:last-child,
  .ritual__copy > p:last-child,
  .remember__copy > p:not(.kicker) {
    font-size: 17px;
  }

  .story-beat {
    grid-template-columns: 36px 1fr;
    gap: 12px;
  }

  .story-beat__number {
    width: 32px;
    height: 32px;
  }

  .story-beat h3 {
    font-size: 31px;
  }

  .universe__phone-wrap {
    min-height: 700px;
  }

  .iphone--cosmic,
  .iphone--review {
    width: 280px;
  }

  .orbit {
    width: 480px;
  }

  .orbit--two {
    width: 360px;
  }

  .universe__tag--cosmere {
    top: 12%;
    right: -4%;
  }

  .universe__tag--optional {
    bottom: 16%;
    left: -3%;
  }

  .timer-card {
    gap: 42px;
    padding: 40px 20px;
    border-radius: 30px;
  }

  .timer-card__book img {
    width: 130px;
  }

  .reading-ring {
    width: 270px;
  }

  .timer-card__stats {
    gap: 6px;
  }

  .timer-card__stats > span {
    min-width: 0;
    flex: 1;
    padding: 12px 7px;
  }

  .timer-card__stats strong {
    font-size: 17px;
  }

  .ritual__inner {
    width: min(calc(100% - 28px), var(--max));
  }

  .ritual-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto 245px 245px 180px 260px;
  }

  .ritual-tile,
  .timer-card {
    grid-column: 1;
    border-radius: 28px;
  }

  .timer-card { grid-row: 1; }
  .ritual-tile--watch { grid-row: 2; }
  .ritual-tile--widget { grid-row: 3; }
  .ritual-tile--streak { grid-row: 4; }
  .ritual-tile--calendar { grid-row: 5; }

  .ritual-tile--watch p {
    display: block;
    max-width: 48%;
  }

  .ritual-tile--watch .ritual-tile__copy {
    width: 43%;
  }

  .ritual-tile--widget .ritual-tile__copy,
  .ritual-tile--streak .ritual-tile__copy,
  .ritual-tile--calendar .ritual-tile__copy {
    width: 55%;
  }

  .ritual-tile--widget .ritual-tile__image {
    top: 50%;
    right: 16px;
    width: 44%;
  }

  .remember {
    padding-top: 88px;
  }

  .remember__inner {
    width: min(calc(100% - 28px), 520px);
  }

  .remember__visual {
    min-height: 880px;
  }

  .remember-card {
    padding: 4px;
    border-radius: 22px;
  }

  .remember-card img {
    border-radius: 18px;
  }

  .remember-card--notes {
    top: 25%;
    left: -8px;
    width: 140px;
    height: 285px;
  }

  .remember-card--theories {
    top: 9%;
    right: -8px;
    width: 145px;
  }

  .remember-card--community {
    right: -6px;
    bottom: 11%;
    width: 175px;
  }

  .remember-card figcaption {
    width: 155px;
    padding: 8px 10px;
  }

  .remember-card--notes figcaption {
    top: -67px;
    left: 0;
  }

  .remember-card--theories figcaption {
    top: -59px;
    right: 0;
  }

  .remember-card--community figcaption {
    right: 0;
    bottom: -62px;
  }

  .panorama__frame {
    width: calc(100% - 20px);
    padding: 5px;
    border-radius: 20px;
    overflow-x: auto;
  }

  .panorama__frame img {
    width: 980px;
    max-width: none;
    border-radius: 15px;
  }

  .panorama__grid {
    grid-template-columns: 1fr;
  }

  .panorama__grid article {
    min-height: 150px;
  }

  .download {
    min-height: 820px;
  }

  .download__inner > img {
    width: 88px;
    border-radius: 22px;
  }
}

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

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

  .motion-ready .reveal:not(.is-visible) {
    opacity: 1;
    transform: none;
  }

  .feature-card {
    transition-delay: 0ms;
  }
}

/* ── Legal / Privacy Policy Page ── */
.legal-hero {
  position: relative;
  padding: 140px max(24px, calc((100vw - 800px) / 2)) 40px;
  text-align: center;
  overflow: hidden;
}

.legal-hero h1 {
  font-family: var(--display);
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 600;
  color: var(--cream);
  margin: 12px 0 16px;
  letter-spacing: -0.02em;
}

.legal-hero .hero__lead {
  max-width: 600px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  line-height: 1.6;
}

.legal-content {
  max-width: 800px;
  margin: 0 auto 100px;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.legal-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 28px 32px;
  backdrop-filter: blur(12px);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}

.legal-card:hover {
  border-color: rgba(241, 189, 96, 0.25);
  transform: translateY(-2px);
}

.legal-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.legal-card__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(241, 189, 96, 0.12);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.legal-card h2 {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 700;
  color: var(--cream);
  margin: 0;
}

.legal-card p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
}

.legal-card ul {
  margin: 10px 0 0 20px;
  padding: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 15px;
  line-height: 1.7;
}

.legal-date {
  text-align: center;
  color: rgba(255, 255, 255, 0.45);
  font-size: 13px;
  margin-top: 16px;
}

/* ==========================================================================
   WAITLIST FORM (LANDING HERO)
   ========================================================================== */

.waitlist-card,
.hero .waitlist-card {
  margin-top: 24px;
  margin-bottom: 24px;
  padding: 22px 26px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(216, 157, 80, 0.35);
  border-radius: 20px;
  box-shadow: 0 14px 34px rgba(125, 76, 34, 0.09);
  max-width: 520px;
}

.waitlist-card__title,
.hero .waitlist-card__title {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 800;
  color: #241b18;
  margin: 0 0 4px 0;
  letter-spacing: -0.01em;
}

.waitlist-card__subtitle,
.hero .waitlist-card__subtitle {
  font-size: 14px;
  color: rgba(73, 60, 52, 0.82);
  margin: 0 0 16px 0;
  line-height: 1.45;
}

.waitlist-form__group,
.hero .waitlist-form__group {
  display: flex;
  gap: 10px;
  align-items: center;
}

.waitlist-form__input,
.hero .waitlist-form__input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 18px;
  background: #ffffff !important;
  border: 1.5px solid rgba(216, 157, 80, 0.38) !important;
  border-radius: 12px !important;
  color: #241b18 !important;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  outline: none;
  box-shadow: 0 2px 8px rgba(108, 61, 38, 0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.waitlist-form__input::placeholder,
.hero .waitlist-form__input::placeholder {
  color: rgba(73, 60, 52, 0.45) !important;
  font-weight: 500;
}

.waitlist-form__input:focus,
.hero .waitlist-form__input:focus {
  border-color: #d89d50 !important;
  box-shadow: 0 0 0 3.5px rgba(216, 157, 80, 0.22) !important;
}

.waitlist-form__button,
.hero .waitlist-form__button {
  height: 48px;
  padding: 0 24px;
  background: #15110f !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(21, 17, 15, 0.22);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.waitlist-form__button:hover,
.hero .waitlist-form__button:hover {
  background: #28211d !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(21, 17, 15, 0.32);
}

.waitlist-form__button:active,
.hero .waitlist-form__button:active {
  transform: translateY(0);
}

.waitlist-form__button:disabled,
.hero .waitlist-form__button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.waitlist-form__message,
.hero .waitlist-form__message {
  margin: 10px 0 0 0;
  font-size: 13px;
  font-weight: 700;
  min-height: 20px;
  transition: opacity 0.2s ease;
}

.waitlist-form__message.is-success,
.hero .waitlist-form__message.is-success {
  color: #1b8a75;
}

.waitlist-form__message.is-error,
.hero .waitlist-form__message.is-error {
  color: #d93856;
}

@media (max-width: 480px) {
  .waitlist-card,
  .hero .waitlist-card {
    padding: 18px;
  }
  .waitlist-form__group,
  .hero .waitlist-form__group {
    flex-direction: column;
  }
  .waitlist-form__button,
  .hero .waitlist-form__button {
    width: 100%;
  }
}

/* ── Database story ── */
.database {
  position: relative;
  color: #f8f2eb;
  background:
    radial-gradient(circle at 76% 27%, rgba(200, 70, 118, .16), transparent 27%),
    radial-gradient(circle at 18% 70%, rgba(216, 157, 80, .1), transparent 28%),
    linear-gradient(180deg, #171018 0%, #0c0910 42%, #08070b 100%);
  overflow: clip;
  isolation: isolate;
}

.database::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
}

.database__aurora {
  position: absolute;
  z-index: -2;
  top: 10%;
  left: 50%;
  width: min(78vw, 1180px);
  aspect-ratio: 1.7;
  background:
    radial-gradient(ellipse at 50% 44%, rgba(202, 55, 111, .2), transparent 46%),
    radial-gradient(ellipse at 72% 48%, rgba(229, 156, 78, .1), transparent 42%);
  filter: blur(70px);
  transform: translateX(-50%);
  pointer-events: none;
}

.database__grain {
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .09;
  background-image:
    radial-gradient(circle at 20% 30%, #fff 0 .5px, transparent .7px),
    radial-gradient(circle at 70% 65%, #d88aa8 0 .45px, transparent .65px);
  background-size: 9px 9px, 13px 13px;
  mask-image: linear-gradient(to bottom, black, transparent 42%, black 78%, transparent);
  pointer-events: none;
}

.database__monogram {
  position: absolute;
  z-index: -1;
  top: 9.5%;
  left: 50%;
  color: transparent;
  font-family: var(--display);
  font-size: clamp(180px, 29vw, 470px);
  font-weight: 700;
  line-height: .75;
  letter-spacing: -.1em;
  white-space: nowrap;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .045);
  transform: translateX(-51%);
  user-select: none;
}

.database__intro {
  position: relative;
  z-index: 2;
  min-height: min(560px, 61.6svh);
  width: min(calc(100% - 48px), 1180px);
  margin: 0 auto;
  padding: clamp(70px, 6.3vw, 98px) 0 clamp(50px, 4.9vw, 74px);
  text-align: center;
}

.database__kicker {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 34px;
  color: rgba(255, 255, 255, .48);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .19em;
  text-transform: uppercase;
}

.database__kicker span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #170e14;
  background: #f1bd60;
  border-radius: 50%;
  letter-spacing: 0;
}

.database h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(62px, 8vw, 122px);
  font-weight: 600;
  line-height: .8;
  letter-spacing: -.07em;
}

.database h2 em {
  color: transparent;
  background: linear-gradient(105deg, #f2bd72 5%, #e57b9f 48%, #c84676 85%);
  background-clip: text;
  -webkit-background-clip: text;
  font-weight: 600;
}

.database__hero-stat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.4vw, 34px);
  margin: clamp(30px, 3.5vw, 48px) auto 0;
}

.database__hero-stat strong {
  color: transparent;
  background: linear-gradient(105deg, #fff4dc 3%, #f1bd60 46%, #e16f99 100%);
  background-clip: text;
  -webkit-background-clip: text;
  font-family: var(--display);
  font-size: clamp(104px, 13vw, 190px);
  font-weight: 600;
  line-height: .7;
  letter-spacing: -.085em;
}

.database__hero-stat span {
  color: rgba(255, 255, 255, .54);
  font-size: clamp(13px, 1.35vw, 18px);
  font-weight: 800;
  line-height: 1.35;
  text-align: left;
}

.database__lead {
  margin: clamp(26px, 3vw, 40px) auto 0;
  color: rgba(255, 255, 255, .47);
  font-family: var(--display);
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.15;
  letter-spacing: -.035em;
}

.database__lead strong {
  color: #fff;
  font-weight: 600;
}

.database__facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: min(100%, 470px);
  margin: clamp(30px, 3.6vw, 48px) auto 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.database__facts div {
  padding: 21px 18px 23px;
}

.database__facts div + div {
  border-left: 1px solid rgba(255, 255, 255, .12);
}

.database__facts dt {
  margin-bottom: 5px;
  color: rgba(255, 255, 255, .34);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.database__facts dd {
  margin: 0;
  color: #fff;
  font-family: var(--display);
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 600;
  letter-spacing: -.03em;
}

.database-story {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: .9fr 1.08fr 1fr .9fr;
  align-items: end;
  gap: clamp(14px, 2vw, 30px);
  width: min(calc(100% - 56px), 1420px);
  margin: 0 auto;
  padding: 70px clamp(8px, 1.5vw, 22px) 100px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.database-story::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 10% 3% 4%;
  background:
    radial-gradient(circle at 28% 45%, rgba(200, 70, 118, .18), transparent 24%),
    radial-gradient(circle at 72% 55%, rgba(241, 189, 96, .1), transparent 28%);
  filter: blur(40px);
}

.database-beat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
}

.database-beat--find,
.database-beat--feel {
  padding-bottom: 12px;
}

.database-beat--explore {
  padding-bottom: 78px;
}

.database-beat--decide {
  padding-bottom: 34px;
}

.database-beat__copy {
  min-height: 220px;
  padding: 0 clamp(2px, .7vw, 10px);
}

.database-beat__number {
  display: block;
  margin-bottom: 14px;
  color: #e487a8;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.database-beat h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(26px, 2.15vw, 35px);
  font-weight: 600;
  line-height: .98;
  letter-spacing: -.045em;
}

.database-beat h3 em {
  color: #f1bd60;
  font-weight: 600;
}

.database-beat__copy > p {
  margin: 14px 0 0;
  color: rgba(255, 255, 255, .49);
  font-size: clamp(11px, .9vw, 14px);
  line-height: 1.5;
}

.database-beat__signal {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
  margin-top: 13px;
  color: rgba(255, 255, 255, .77);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.database-beat__signal::before {
  content: "";
  width: 18px;
  height: 1px;
  background: #c84676;
}

.database-beat__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 13px 0 0;
  padding: 0;
  list-style: none;
}

.database-beat__pills li {
  padding: 6px 9px;
  color: rgba(255, 255, 255, .72);
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 100px;
  font-size: 8px;
  font-weight: 900;
}

.database-beat__scores {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin-top: 13px;
}

.database-beat__scores span {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0 7px;
  padding: 7px 8px;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 11px;
  font-size: 9px;
}

.database-beat__scores strong {
  font-size: 10px;
}

.database-beat__scores small {
  grid-column: 1 / -1;
  margin-top: 5px;
  color: rgba(255, 255, 255, .34);
  font-size: 6px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.database-screen {
  position: relative;
  width: 100%;
  margin: 22px 0 0;
  padding: 5px;
  background: #070609;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: clamp(22px, 2vw, 34px);
  box-shadow:
    0 30px 64px rgba(0, 0, 0, .5),
    0 8px 24px rgba(0, 0, 0, .32),
    inset 0 0 0 1px rgba(255, 255, 255, .09);
}

.database-screen img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(clamp(22px, 2vw, 34px) - 6px);
}

.database-screen figcaption {
  position: absolute;
  bottom: 13px;
  left: 50%;
  width: max-content;
  max-width: calc(100% - 34px);
  padding: 8px 12px;
  color: rgba(255, 255, 255, .82);
  background: rgba(11, 8, 13, .72);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 100px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
  text-align: center;
  opacity: 1;
  transform: translate(-50%, 0);
  backdrop-filter: blur(14px);
}

.database-arrow {
  position: absolute;
  z-index: 3;
  right: clamp(-27px, -1.9vw, -14px);
  bottom: 34%;
  display: grid;
  place-items: center;
  width: clamp(34px, 3.5vw, 52px);
  height: clamp(34px, 3.5vw, 52px);
  color: #f1bd60;
  font-family: var(--sans);
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1;
  text-shadow: 0 0 24px rgba(241, 189, 96, .35);
  transform: rotate(-8deg);
}

.database-arrow--up {
  bottom: 46%;
  color: #e487a8;
  transform: rotate(8deg);
}

.database__closing {
  position: relative;
  z-index: 2;
  min-height: 54svh;
  display: grid;
  place-content: center;
  justify-items: center;
  width: min(calc(100% - 40px), 980px);
  margin: 0 auto;
  text-align: center;
}

.database__closing > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 28px;
  color: #1a0e15;
  background: #f1bd60;
  border-radius: 50%;
  box-shadow: 0 0 55px rgba(241, 189, 96, .2);
}

.database__closing p {
  margin: 0;
  color: rgba(255, 255, 255, .46);
  font-family: var(--display);
  font-size: clamp(43px, 6vw, 88px);
  line-height: .95;
  letter-spacing: -.055em;
}

.database__closing strong {
  color: #fff;
  font-weight: 600;
}

@media (max-width: 1050px) {
  .database-story {
    gap: 13px;
    width: min(calc(100% - 28px), 1100px);
  }

  .database-beat h3 {
    font-size: clamp(23px, 2.7vw, 31px);
  }

  .database-beat__copy {
    min-height: 232px;
  }
}

@media (max-width: 820px) {
  .database {
    overflow: hidden;
  }

  .database__monogram {
    top: 5%;
    font-size: 41vw;
  }

  .database__intro {
    min-height: auto;
    padding: 64px 0 57px;
  }

  .database h2 {
    font-size: clamp(58px, 12.5vw, 92px);
  }

  .database__facts {
    margin-top: 34px;
  }

  .database-story {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(76vw, 330px);
    grid-template-columns: none;
    align-items: end;
    gap: 18px;
    width: 100%;
    padding: 48px max(22px, calc((100vw - 600px) / 2)) 58px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 22px;
    scrollbar-width: none;
  }

  .database-beat {
    padding: 0;
    scroll-snap-align: center;
  }

  .database-story::-webkit-scrollbar {
    display: none;
  }

  .database-beat__copy {
    min-height: 220px;
  }

  .database-beat h3 {
    font-size: 32px;
  }

  .database-beat__copy > p {
    font-size: 13px;
  }

  .database-arrow {
    right: -30px;
    bottom: 30%;
  }

  .database__closing {
    min-height: 500px;
  }
}

@media (max-width: 560px) {
  .database__intro {
    width: min(calc(100% - 28px), 520px);
    padding-top: 57px;
    padding-bottom: 48px;
  }

  .database__kicker {
    margin-bottom: 25px;
  }

  .database h2 {
    font-size: clamp(48px, 14vw, 70px);
    line-height: .82;
  }

  .database__hero-stat {
    gap: 14px;
    margin-top: 30px;
  }

  .database__hero-stat strong {
    font-size: clamp(92px, 27vw, 128px);
  }

  .database__hero-stat span {
    font-size: 12px;
  }

  .database__lead {
    margin-top: 24px;
    font-size: clamp(21px, 6.2vw, 30px);
  }

  .database__facts {
    margin-top: 30px;
  }

  .database__facts div {
    padding: 17px 8px 19px;
  }

  .database__facts dd {
    font-size: 22px;
  }

  .database-story {
    grid-auto-columns: 82vw;
    padding-inline: 20px;
  }

  .database-beat h3 {
    font-size: 30px;
  }

  .database-beat__copy {
    min-height: 225px;
  }

  .database-beat__scores {
    gap: 6px;
  }

  .database-beat__scores span {
    padding: 9px 8px;
    font-size: 10px;
  }

  .database-screen {
    padding: 5px;
    border-radius: 31px;
  }

  .database-screen img {
    border-radius: 25px;
  }

  .database__closing {
    min-height: 430px;
  }

  .database__closing p {
    font-size: clamp(39px, 12vw, 62px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .database-screen,
  .database-beat,
  .ritual-tile { transition: none; }

  .remember-card,
  .remember__feature-track {
    animation: none;
  }
}

/* ── Sticker collection ─────────────────────────────────────────────── */
.stickers {
  position: relative;
  color: #fffaf6;
  background:
    radial-gradient(circle at 78% 31%, rgba(133, 95, 255, .19), transparent 27%),
    radial-gradient(circle at 20% 64%, rgba(233, 103, 151, .14), transparent 25%),
    linear-gradient(145deg, #17101f 0%, #0b0912 48%, #07080e 100%);
  overflow: hidden;
  isolation: isolate;
}

.stickers::before {
  content: "STICKERS";
  position: absolute;
  z-index: -1;
  top: 3%;
  right: -2%;
  color: rgba(255, 255, 255, .025);
  font-size: clamp(100px, 17vw, 260px);
  font-weight: 950;
  letter-spacing: -.085em;
  line-height: 1;
  pointer-events: none;
}

.stickers::after {
  content: "";
  position: absolute;
  z-index: 5;
  right: 9%;
  bottom: -180px;
  width: 440px;
  height: 290px;
  background: rgba(109, 74, 215, .15);
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}

.stickers__aurora,
.stickers__stars {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.stickers__aurora {
  width: min(52vw, 760px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .34;
  animation: sticker-aurora 10s ease-in-out infinite alternate;
}

.stickers__aurora--rose {
  top: 16%;
  left: -24%;
  background: #eb5d93;
}

.stickers__aurora--violet {
  top: -14%;
  right: -10%;
  background: #7054df;
  animation-delay: -5s;
}

.stickers__stars {
  inset: 0;
  opacity: .66;
  background-image:
    radial-gradient(circle at 8% 16%, rgba(255,255,255,.86) 0 1px, transparent 1.8px),
    radial-gradient(circle at 22% 38%, rgba(249,205,112,.9) 0 1.4px, transparent 2.2px),
    radial-gradient(circle at 38% 11%, rgba(255,255,255,.72) 0 1px, transparent 1.7px),
    radial-gradient(circle at 63% 19%, rgba(211,197,255,.94) 0 1.2px, transparent 2px),
    radial-gradient(circle at 91% 14%, rgba(255,255,255,.7) 0 1px, transparent 1.8px),
    radial-gradient(circle at 86% 48%, rgba(255,214,126,.86) 0 1.2px, transparent 2px),
    radial-gradient(circle at 16% 83%, rgba(255,255,255,.72) 0 1px, transparent 1.7px),
    radial-gradient(circle at 56% 86%, rgba(202,184,255,.74) 0 1.1px, transparent 2px);
  background-size: 280px 310px, 360px 390px, 250px 270px, 430px 450px, 330px 360px, 400px 420px, 260px 280px, 380px 410px;
  animation: sticker-stars 18s linear infinite;
}

.stickers__inner {
  position: relative;
  z-index: 2;
  width: min(calc(100% - 48px), 1380px);
  min-height: 1040px;
  display: grid;
  grid-template-columns: minmax(360px, .76fr) minmax(620px, 1.24fr);
  grid-template-rows: minmax(570px, auto) 230px auto;
  gap: 0 clamp(28px, 4vw, 64px);
  margin: 0 auto;
  padding: clamp(96px, 9vw, 140px) 0 clamp(72px, 8vw, 115px);
}

.stickers__copy {
  position: relative;
  z-index: 12;
  align-self: center;
  grid-column: 1;
  grid-row: 1;
  padding-bottom: 20px;
}

.stickers__kicker {
  color: rgba(255, 255, 255, .52);
}

.stickers__kicker span {
  color: #f3c461;
}

.stickers h2 {
  max-width: 650px;
  margin-top: 26px;
  font-size: clamp(48px, 5.2vw, 78px);
  line-height: .92;
  letter-spacing: -.055em;
}

.stickers h2 em {
  color: transparent;
  background: linear-gradient(96deg, #f7bd68 5%, #f38eb5 46%, #c3afff 94%);
  background-clip: text;
  -webkit-background-clip: text;
  font-weight: 500;
}

.stickers__lead {
  max-width: 560px;
  margin: 30px 0 0;
  color: rgba(255, 255, 255, .62);
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.6;
}

.stickers__rarities {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 30px;
}

.stickers__rarities > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  color: rgba(255, 255, 255, .7);
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .095);
  border-radius: 100px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}

.rarity-dot {
  width: 8px;
  height: 8px;
  background: #c5d7bd;
  border-radius: 50%;
  box-shadow: 0 0 12px currentColor;
}

.rarity-dot--foil { background: #8ba9e6; }
.rarity-dot--holo { background: linear-gradient(135deg, #79e3f1, #d88dff 52%, #ffd97d); }
.rarity-dot--secret { background: #efb842; box-shadow: 0 0 14px #efb842; }

.stickers__promise {
  max-width: 470px;
  margin: 34px 0 0;
  padding: 18px 0 0 21px;
  color: rgba(255, 255, 255, .48);
  border-left: 1px solid rgba(242, 190, 97, .5);
  font-family: var(--display);
  font-size: 17px;
  line-height: 1.45;
}

.stickers__promise strong {
  color: #fff;
  font-weight: 600;
}

.sticker-stage {
  position: relative;
  z-index: 4;
  grid-column: 2;
  grid-row: 1 / 3;
  min-height: 800px;
  align-self: center;
  perspective: 1300px;
  transform-style: preserve-3d;
}

.sticker-stage__halo {
  position: absolute;
  top: 48%;
  left: 50%;
  width: min(60vw, 710px);
  aspect-ratio: 1;
  background:
    radial-gradient(circle, rgba(246, 177, 101, .12) 0 12%, transparent 32%),
    radial-gradient(circle, rgba(139, 102, 242, .14) 0 35%, transparent 68%);
  border: 1px solid rgba(222, 203, 255, .07);
  border-radius: 50%;
  box-shadow:
    0 0 0 55px rgba(255, 255, 255, .012),
    0 0 0 120px rgba(255, 255, 255, .008);
  filter: blur(.1px);
  transform: translate(-50%, -50%);
  animation: sticker-halo 7s ease-in-out infinite;
}

.sticker-stage__spark {
  position: absolute;
  z-index: 20;
  color: #ffe39a;
  font-size: 28px;
  text-shadow: 0 0 22px rgba(255, 210, 106, .8);
  animation: sticker-spark 3.4s ease-in-out infinite;
}

.sticker-stage__spark--one { top: 12%; right: 8%; }
.sticker-stage__spark--two { top: 42%; left: 2%; color: #d9cbff; animation-delay: -1.2s; }
.sticker-stage__spark--three { right: 2%; bottom: 17%; font-size: 20px; animation-delay: -2.3s; }

.web-sticker {
  --sticker-color: brightness(1);
  position: absolute;
  z-index: var(--z, 2);
  width: var(--w, 265px);
  margin: 0;
  pointer-events: auto;
  transform:
    translate3d(var(--shift-x, 0), var(--shift-y, 0), var(--tz, 0))
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg))
    rotateZ(var(--rz, 0deg));
  transform-style: preserve-3d;
  transition: transform .55s var(--ease), z-index 0s .2s;
  will-change: transform;
}

.web-sticker:hover {
  z-index: 30;
  transition-delay: 0s;
}

.web-sticker__face {
  position: relative;
  width: 100%;
  animation: sticker-float var(--float-time, 6s) ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
  transform-style: preserve-3d;
  filter: drop-shadow(0 28px 28px rgba(0, 0, 0, .44));
  transition: transform .45s var(--ease), filter .45s;
}

.web-sticker:hover .web-sticker__face {
  filter: drop-shadow(0 38px 34px rgba(0, 0, 0, .55));
  transform: translateY(-15px) scale(1.055) rotateY(-3deg);
}

.web-sticker img {
  position: relative;
  z-index: 2;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  filter:
    var(--sticker-color)
    drop-shadow(4px 0 0 #fffaf0)
    drop-shadow(-4px 0 0 #fffaf0)
    drop-shadow(0 4px 0 #fffaf0)
    drop-shadow(0 -4px 0 #fffaf0)
    drop-shadow(3px 3px 0 #fffaf0)
    drop-shadow(-3px 3px 0 #fffaf0)
    drop-shadow(3px -3px 0 #fffaf0)
    drop-shadow(-3px -3px 0 #fffaf0)
    drop-shadow(0 2px 1px rgba(54, 45, 67, .72));
}

.web-sticker__foil,
.web-sticker__shine {
  position: absolute;
  z-index: 3;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  -webkit-mask-image: var(--sticker);
  mask-image: var(--sticker);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.web-sticker__foil {
  background:
    repeating-linear-gradient(118deg,
      rgba(255,255,255,0) 0 9%,
      rgba(113,238,255,.55) 13%,
      rgba(238,136,255,.58) 19%,
      rgba(255,221,116,.52) 25%,
      rgba(255,255,255,0) 34%),
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.8), transparent 26%);
  background-size: 250% 250%, 100% 100%;
  mix-blend-mode: color-dodge;
  animation: sticker-foil 4.8s linear infinite;
}

.web-sticker__shine {
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.06) 38%, rgba(255,255,255,.94) 47%, rgba(255,255,255,.13) 55%, transparent 72%);
  background-size: 240% 100%;
  mix-blend-mode: screen;
  animation: sticker-shine 4.2s ease-in-out infinite;
}

.web-sticker--foil .web-sticker__foil { opacity: .28; }
.web-sticker--holo .web-sticker__foil { opacity: .52; }
.web-sticker--holo .web-sticker__shine,
.web-sticker--secret .web-sticker__shine { opacity: .72; }

.web-sticker--secret {
  --sticker-color: sepia(.7) saturate(1.7) hue-rotate(330deg) contrast(1.12);
}

.web-sticker--secret .web-sticker__foil {
  opacity: .62;
  background:
    repeating-linear-gradient(126deg, transparent 0 10%, rgba(255, 47, 70, .42) 14%, rgba(255, 215, 92, .82) 23%, rgba(255,255,255,.18) 28%, transparent 37%),
    radial-gradient(circle at 50% 42%, rgba(255, 196, 72, .58), transparent 55%);
  mix-blend-mode: color-dodge;
}

.web-sticker figcaption {
  position: absolute;
  z-index: 9;
  bottom: -6px;
  left: 50%;
  width: max-content;
  max-width: 230px;
  padding: 8px 12px;
  color: rgba(255,255,255,.88);
  background: rgba(12, 9, 17, .68);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 100px;
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  opacity: .78;
  transform: translateX(-50%);
  backdrop-filter: blur(14px);
  transition: opacity .25s, bottom .35s var(--ease);
}

.web-sticker:hover figcaption {
  bottom: -19px;
  opacity: 1;
}

.web-sticker figcaption small {
  display: block;
  margin-top: 5px;
  color: #e9bb64;
  font-size: 7px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.web-sticker--book {
  --w: 220px;
  --rz: -15deg;
  --rx: 5deg;
  --float-time: 7.4s;
  --float-delay: -2s;
  top: 12%;
  left: 4%;
}

.web-sticker--raven {
  --w: 265px;
  --rz: 10deg;
  --ry: -5deg;
  --z: 6;
  --float-time: 6.3s;
  --float-delay: -4s;
  top: 5%;
  right: 4%;
}

.web-sticker--phoenix {
  --w: 340px;
  --rz: -2deg;
  --rx: 2deg;
  --z: 12;
  --float-time: 5.7s;
  --float-delay: -1s;
  top: 28%;
  left: 24%;
}

.web-sticker--heroine {
  --w: 245px;
  --rz: 13deg;
  --ry: 4deg;
  --z: 8;
  --float-time: 6.8s;
  --float-delay: -3.2s;
  right: 2%;
  bottom: 8%;
}

.web-sticker--untold {
  --w: 205px;
  --rz: -11deg;
  --ry: 7deg;
  --z: 9;
  --float-time: 7.1s;
  --float-delay: -5s;
  bottom: 4%;
  left: 2%;
}

.capsule-pair {
  position: relative;
  z-index: 16;
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  width: 360px;
  height: 222px;
  margin-left: 10px;
  perspective: 900px;
}

.gacha-ball {
  position: relative;
  width: 178px;
  height: 178px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  filter: drop-shadow(0 28px 25px rgba(0,0,0,.46));
  transform-style: preserve-3d;
  animation: capsule-sway 6s ease-in-out infinite;
  transition: filter .3s, transform .3s var(--ease);
}

.gacha-ball--black {
  width: 151px;
  height: 151px;
  margin: 0 0 8px -17px;
  animation-delay: -3.2s;
  animation-duration: 7.3s;
}

.gacha-ball:hover,
.gacha-ball:focus-visible {
  z-index: 3;
  filter: drop-shadow(0 34px 28px rgba(0,0,0,.58)) drop-shadow(0 0 25px rgba(241, 150, 187, .17));
}

.gacha-ball:focus-visible {
  outline: 2px solid #f7ca71;
  outline-offset: 6px;
}

.gacha-ball.is-shaking {
  animation: capsule-shake .65s cubic-bezier(.36,.07,.19,.97);
}

.gacha-ball__glass,
.gacha-ball__sticker,
.gacha-ball__seam,
.gacha-ball__glint {
  position: absolute;
  pointer-events: none;
}

.gacha-ball__glass {
  z-index: 2;
  inset: 0;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 50%;
}

.gacha-ball__glass--top {
  background:
    radial-gradient(circle at 29% 20%, rgba(255,255,255,.75) 0 3%, rgba(255,255,255,.16) 11%, transparent 27%),
    radial-gradient(circle at 55% 78%, transparent 0 42%, rgba(255,255,255,.14) 70%, rgba(255,255,255,.31) 100%),
    linear-gradient(155deg, rgba(255,255,255,.28), rgba(255,255,255,.055) 45%, rgba(235,96,149,.25));
  clip-path: inset(0 0 49% 0 round 50% 50% 0 0);
  box-shadow: inset 9px 10px 21px rgba(255,255,255,.2), inset -12px -4px 25px rgba(102,42,85,.26);
}

.gacha-ball__glass--bottom {
  background:
    radial-gradient(circle at 35% 80%, rgba(255,255,255,.25), transparent 28%),
    linear-gradient(155deg, rgba(230,97,144,.55), rgba(128,38,84,.78));
  clip-path: inset(49% 0 0 0 round 0 0 50% 50%);
  box-shadow: inset 10px -12px 20px rgba(255,255,255,.15), inset -12px 6px 27px rgba(70,17,51,.38);
}

.gacha-ball--black .gacha-ball__glass--top {
  background:
    radial-gradient(circle at 29% 20%, rgba(255,255,255,.7) 0 3%, rgba(255,255,255,.12) 11%, transparent 27%),
    radial-gradient(circle at 55% 78%, transparent 0 42%, rgba(255,255,255,.08) 70%, rgba(255,255,255,.19) 100%),
    linear-gradient(155deg, rgba(255,255,255,.22), rgba(33,30,43,.18) 45%, rgba(12,10,17,.66));
}

.gacha-ball--black .gacha-ball__glass--bottom {
  background:
    radial-gradient(circle at 35% 80%, rgba(255,255,255,.15), transparent 28%),
    linear-gradient(155deg, #35303f, #0d0b11);
}

.gacha-ball__sticker {
  z-index: 1;
  inset: 22%;
  display: grid;
  place-items: center;
  opacity: .82;
  filter: drop-shadow(0 4px 7px rgba(0,0,0,.35));
  transform: rotate(-10deg) translateZ(7px);
  animation: capsule-sticker 4.5s ease-in-out infinite;
}

.gacha-ball--black .gacha-ball__sticker {
  inset: 19%;
  transform: rotate(8deg) translateZ(7px);
  animation-delay: -2s;
}

.gacha-ball__sticker img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gacha-ball__seam {
  z-index: 5;
  top: 47%;
  right: -1%;
  left: -1%;
  height: 11%;
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(236,178,202,.68) 38%, rgba(117,35,72,.9) 50%, rgba(255,255,255,.28) 59%, rgba(119,38,76,.76));
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 100px;
  box-shadow: 0 4px 9px rgba(27,9,19,.34), inset 0 2px 2px rgba(255,255,255,.35);
}

.gacha-ball--black .gacha-ball__seam {
  background: linear-gradient(180deg, #918b9e, #3a3542 36%, #09080c 53%, #5a5562);
}

.gacha-ball__glint {
  z-index: 7;
  top: 15%;
  left: 18%;
  width: 18%;
  height: 9%;
  background: rgba(255,255,255,.76);
  border-radius: 50%;
  filter: blur(2px);
  transform: rotate(-35deg);
}

.capsule-pair__label {
  position: absolute;
  right: 16px;
  bottom: 2px;
  color: rgba(255,255,255,.38);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.album-ribbon {
  position: relative;
  z-index: 18;
  grid-column: 1 / -1;
  grid-row: 3;
  align-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 78px;
  margin-top: 48px;
  padding: 14px 16px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.085);
  border-radius: 24px;
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 24px 60px rgba(0,0,0,.22);
  backdrop-filter: blur(20px);
}

.album-ribbon__label {
  margin: 0 auto 0 7px;
  color: rgba(255,255,255,.36);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.album-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 15px 11px 11px;
  color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 100px;
  font-family: var(--display);
  font-size: 13px;
  white-space: nowrap;
}

.album-chip i {
  display: block;
  width: 27px;
  height: 27px;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.8) 0 5%, transparent 8%),
    linear-gradient(145deg, #eb8fa0, #b94d70);
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(233,121,138,.24);
}

.album-chip--academy i { background: linear-gradient(145deg, #718276, #2c3f30); }
.album-chip--future { color: rgba(255,255,255,.42); border-style: dashed; }
.album-chip--future i {
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.05);
  border: 1px dashed rgba(255,255,255,.18);
  box-shadow: none;
}

.album-chip--future i::after {
  content: "+";
  color: rgba(255,255,255,.5);
  font-family: var(--sans);
  font-style: normal;
}

@keyframes sticker-aurora {
  to { opacity: .48; transform: translate3d(4%, 5%, 0) scale(1.12); }
}

@keyframes sticker-stars {
  50% { opacity: .92; transform: translate3d(-8px, 11px, 0); }
}

@keyframes sticker-halo {
  50% { opacity: .76; transform: translate(-50%, -50%) scale(1.075) rotate(4deg); }
}

@keyframes sticker-spark {
  0%, 100% { opacity: .24; transform: scale(.65) rotate(0); }
  45% { opacity: 1; transform: scale(1.12) rotate(35deg); }
}

@keyframes sticker-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotateY(-1deg); }
  50% { transform: translate3d(0, -14px, 12px) rotateY(3deg); }
}

@keyframes sticker-foil {
  to { background-position: 200% 200%, center; }
}

@keyframes sticker-shine {
  0%, 28% { background-position: 160% 0; }
  72%, 100% { background-position: -120% 0; }
}

@keyframes capsule-sway {
  0%, 100% { transform: rotateX(3deg) rotateY(-8deg) rotateZ(-2deg) translateY(0); }
  50% { transform: rotateX(-5deg) rotateY(12deg) rotateZ(3deg) translateY(-10px); }
}

@keyframes capsule-sticker {
  50% { transform: rotate(7deg) translate3d(4px, -5px, 9px); }
}

@keyframes capsule-shake {
  0%, 100% { transform: translateX(0) rotate(0); }
  15% { transform: translateX(-9px) rotate(-7deg); }
  30% { transform: translateX(8px) rotate(6deg); }
  45% { transform: translateX(-7px) rotate(-5deg); }
  60% { transform: translateX(6px) rotate(4deg); }
  75% { transform: translateX(-3px) rotate(-2deg); }
}

@media (max-width: 1050px) {
  .stickers__inner {
    grid-template-columns: minmax(320px, .78fr) minmax(520px, 1.22fr);
    gap: 0 18px;
  }

  .sticker-stage {
    transform: scale(.91);
    transform-origin: center;
  }

  .stickers h2 {
    font-size: clamp(48px, 5.8vw, 68px);
  }

  .album-ribbon {
    margin-top: 30px;
  }
}

@media (max-width: 820px) {
  .stickers__inner {
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: min(calc(100% - 32px), 720px);
    padding-top: 86px;
  }

  .stickers__copy {
    align-self: auto;
    padding-bottom: 0;
    text-align: center;
  }

  .stickers h2,
  .stickers__lead,
  .stickers__promise {
    margin-right: auto;
    margin-left: auto;
  }

  .stickers__rarities {
    justify-content: center;
  }

  .stickers__promise {
    padding-left: 0;
    border-left: 0;
  }

  .sticker-stage {
    width: min(100%, 680px);
    min-height: 690px;
    margin: 35px auto 0;
    transform: none;
  }

  .capsule-pair {
    align-self: center;
    margin-top: -42px;
    margin-left: 0;
  }

  .album-ribbon {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 32px;
  }

  .album-ribbon__label {
    width: 100%;
    margin: 3px 0 5px;
    text-align: center;
  }
}

@media (max-width: 560px) {
  .stickers__inner {
    width: min(calc(100% - 24px), 520px);
    padding: 72px 0 68px;
  }

  .stickers h2 {
    margin-top: 20px;
    font-size: clamp(45px, 14vw, 66px);
  }

  .stickers__lead {
    margin-top: 24px;
    padding: 0 8px;
    font-size: 16px;
  }

  .stickers__rarities {
    gap: 6px;
    margin-top: 24px;
  }

  .stickers__rarities > span {
    padding: 7px 9px;
    font-size: 8px;
  }

  .stickers__promise {
    margin-top: 26px;
    padding: 0 12px;
    font-size: 16px;
  }

  .sticker-stage {
    min-height: 570px;
    margin-top: 28px;
  }

  .web-sticker--book { --w: 142px; top: 12%; left: 0; }
  .web-sticker--raven { --w: 168px; top: 4%; right: -2%; }
  .web-sticker--phoenix { --w: 225px; top: 28%; left: 18%; }
  .web-sticker--heroine { --w: 157px; right: -1%; bottom: 7%; }
  .web-sticker--untold { --w: 140px; bottom: 4%; left: -1%; }

  .web-sticker img {
    filter:
      var(--sticker-color)
      drop-shadow(3px 0 0 #fffaf0)
      drop-shadow(-3px 0 0 #fffaf0)
      drop-shadow(0 3px 0 #fffaf0)
      drop-shadow(0 -3px 0 #fffaf0)
      drop-shadow(0 2px 1px rgba(54, 45, 67, .72));
  }

  .web-sticker figcaption {
    display: none;
  }

  .sticker-stage__spark--two {
    left: 0;
  }

  .capsule-pair {
    width: 300px;
    height: 180px;
    margin-top: -30px;
  }

  .gacha-ball {
    width: 148px;
    height: 148px;
  }

  .gacha-ball--black {
    width: 126px;
    height: 126px;
  }

  .capsule-pair__label {
    right: 8px;
    bottom: -1px;
  }

  .album-ribbon {
    gap: 7px;
    margin-top: 30px;
    padding: 13px 9px;
    border-radius: 21px;
  }

  .album-chip {
    padding: 8px 10px 8px 8px;
    font-size: 11px;
  }

  .album-chip i {
    width: 22px;
    height: 22px;
  }

  .album-chip--future {
    width: calc(100% - 8px);
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stickers__aurora,
  .stickers__stars,
  .sticker-stage__halo,
  .sticker-stage__spark,
  .web-sticker__face,
  .web-sticker__foil,
  .web-sticker__shine,
  .gacha-ball,
  .gacha-ball__sticker {
    animation: none;
  }
}

/* ── Social profiles & buddy reads ────────────────────────────────── */
.social {
  --social-accent: #65dcff;
  --social-accent-strong: #25bce8;
  --social-secondary: #91a1ff;
  --social-deep: #06141d;
  --buddy-accent: #f2b55f;
  --buddy-secondary: #65c9a8;
  --buddy-deep: #102923;
  position: relative;
  min-height: 2200px;
  color: #142a35;
  background:
    radial-gradient(circle at 12% 15%, rgba(72, 198, 230, .2), transparent 27%),
    radial-gradient(circle at 82% 25%, rgba(119, 139, 232, .17), transparent 31%),
    radial-gradient(circle at 56% 72%, rgba(89, 188, 183, .13), transparent 32%),
    linear-gradient(160deg, #f9fcfb 0%, #eef8fa 40%, #f4f7fb 70%, #fffdf8 100%);
  overflow: hidden;
  isolation: isolate;
}

.social::before {
  content: "SOCIAL";
  position: absolute;
  z-index: -1;
  top: 2.2%;
  left: 50%;
  color: rgba(22, 91, 118, .045);
  font-size: clamp(130px, 23vw, 340px);
  font-weight: 950;
  line-height: .8;
  letter-spacing: -.09em;
  transform: translateX(-50%);
  pointer-events: none;
}

.social::after {
  content: "";
  position: absolute;
  z-index: 10;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.45), transparent 8%, transparent 92%, rgba(33,95,112,.025));
  pointer-events: none;
}

.social__aurora,
.social__mesh {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.social__aurora {
  width: min(60vw, 860px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .18;
  animation: social-aurora 12s ease-in-out infinite alternate;
}

.social__aurora--rose {
  top: 8%;
  left: -18%;
  background: #62d6ef;
}

.social__aurora--blue {
  top: 31%;
  right: -18%;
  background: #8193e8;
  animation-delay: -5s;
}

.social__mesh {
  inset: 0;
  opacity: .3;
  background-image:
    linear-gradient(rgba(25,91,111,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(25,91,111,.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(180deg, #000, transparent 44%, #000 72%, transparent);
}

.social__inner {
  position: relative;
  z-index: 2;
  width: min(calc(100% - 56px), 1360px);
  margin: 0 auto;
  padding: 150px 0 130px;
}

.social__intro {
  min-height: 970px;
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  align-items: center;
  gap: clamp(34px, 5vw, 80px);
}

.social__copy {
  position: relative;
  z-index: 3;
  max-width: 560px;
}

.social__kicker {
  color: rgba(30, 72, 88, .62);
}

.social__kicker span {
  color: var(--social-accent);
}

.social h2,
.buddy h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -.06em;
}

.social h2 {
  font-size: clamp(62px, 6.4vw, 104px);
  line-height: .89;
}

.social h2 em,
.social h2 em {
  color: var(--social-accent);
  font-style: normal;
  text-shadow: 0 0 40px rgba(74, 205, 244, .26);
}

.buddy h3 em {
  color: var(--buddy-accent);
  font-style: normal;
  text-shadow: 0 0 40px rgba(242, 181, 95, .24);
}

.social__lead {
  max-width: 535px;
  margin: 35px 0 0;
  color: rgba(30, 58, 69, .67);
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.75;
}

.social-proof {
  width: fit-content;
  margin-top: 34px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px 10px 11px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(38,117,143,.13);
  border-radius: 100px;
  box-shadow: inset 0 1px rgba(255,255,255,.9), 0 20px 50px rgba(41,93,108,.11);
  backdrop-filter: blur(18px);
}

.social-proof__avatars {
  display: flex;
}

.social-proof__avatars span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  margin-left: -9px;
  color: white;
  background: var(--avatar);
  border: 2px solid #eef8fa;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
}

.social-proof__avatars span:first-child {
  margin-left: 0;
}

.social-proof p {
  margin: 0;
  display: grid;
  line-height: 1.18;
}

.social-proof strong {
  font-size: 13px;
  font-weight: 900;
}

.social-proof p span {
  color: rgba(28,65,78,.52);
  font-size: 11px;
}

.social-proof > i,
.buddy__status i {
  width: 8px;
  height: 8px;
  background: #6ee79c;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(110,231,156,.1), 0 0 18px rgba(110,231,156,.85);
  animation: social-online 1.8s ease-in-out infinite;
}

.social__signals {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.social__signals span {
  padding: 8px 12px;
  color: rgba(25,67,82,.65);
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(34,105,130,.1);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 800;
}

.social-profile-stage {
  position: relative;
  min-height: 880px;
  perspective: 1500px;
}

.social-profile-stage__orbit {
  position: absolute;
  top: 7%;
  left: 4%;
  width: 91%;
  aspect-ratio: 1;
  border: 1px solid rgba(101, 220, 255, .16);
  border-radius: 50%;
  box-shadow:
    0 0 0 38px rgba(45,131,156,.025),
    0 0 0 90px rgba(45,131,156,.015),
    inset 0 0 90px rgba(55, 181, 221, .08);
  transform: rotate(-13deg);
  animation: social-orbit 18s linear infinite;
}

.social-profile-stage__orbit::before,
.social-profile-stage__orbit::after {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  background: var(--social-accent);
  border-radius: 50%;
  box-shadow: 0 0 24px var(--social-accent);
}

.social-profile-stage__orbit::before { top: 12%; left: 16%; }
.social-profile-stage__orbit::after { right: 5%; bottom: 28%; background: var(--social-secondary); box-shadow: 0 0 24px var(--social-secondary); }

.social-profile-tabs {
  position: absolute;
  z-index: 12;
  top: 1%;
  left: 50%;
  display: flex;
  gap: 5px;
  padding: 5px;
  background: rgba(255, 255, 255, .76);
  border: 1px solid rgba(35, 101, 125, .13);
  border-radius: 100px;
  box-shadow: 0 14px 40px rgba(35,84,101,.16);
  backdrop-filter: blur(20px);
  transform: translateX(-50%);
}

.social-profile-tabs button {
  min-width: 88px;
  padding: 9px 15px;
  color: rgba(22,59,74,.58);
  background: transparent;
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
  transition: color .25s, background .25s, box-shadow .25s;
}

.social-profile-tabs button.is-active {
  color: white;
  background: linear-gradient(120deg, #1cb9e5, #526dd6);
  box-shadow: 0 7px 20px rgba(38, 184, 226, .3);
}

.social-phone {
  margin: 0;
  padding: 8px;
  background: linear-gradient(145deg, #5e5862, #0b0a0d 19%, #29262b 77%, #77717a);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 43px;
  box-shadow:
    0 42px 90px rgba(0,0,0,.48),
    0 0 0 1px rgba(0,0,0,.9),
    inset 0 1px rgba(255,255,255,.42);
  overflow: hidden;
}

.social-phone__screen {
  height: 100%;
  background: #edf5f7;
  border-radius: 35px;
  overflow: hidden;
}

.social-phone img {
  width: 100%;
  height: auto;
}

.social-phone--tom,
.social-phone--laia,
.social-follow,
.social-float-sticker {
  position: absolute;
  transform: translate3d(var(--social-x, 0), var(--social-y, 0), 0);
  transition: filter .6s var(--ease), opacity .6s var(--ease), transform .22s ease-out;
  will-change: transform;
}

.social-phone--tom,
.social-phone--laia {
  top: 7%;
  width: min(47%, 345px);
  height: 720px;
  transition: filter .6s var(--ease), opacity .6s var(--ease), transform .6s var(--ease);
}

.social-phone--tom {
  z-index: 5;
  left: 13%;
  transform:
    translate3d(var(--social-x, 0), var(--social-y, 0), 70px)
    rotateY(7deg) rotateZ(-4deg) scale(.92);
}

.social-phone--laia {
  z-index: 4;
  top: 12%;
  right: 6%;
  transform:
    translate3d(var(--social-x, 0), var(--social-y, 0), 10px)
    rotateY(-8deg) rotateZ(5deg) scale(.86);
}

.social-phone--tom:not(.is-active),
.social-phone--laia:not(.is-active) {
  filter: brightness(.55) saturate(.7);
  opacity: .7;
}

.social-phone--tom.is-active {
  z-index: 7;
  filter: none;
  opacity: 1;
  transform:
    translate3d(var(--social-x, 0), var(--social-y, 0), 100px)
    rotateY(3deg) rotateZ(-2deg) scale(1);
}

.social-phone--laia.is-active {
  z-index: 7;
  filter: none;
  opacity: 1;
  transform:
    translate3d(var(--social-x, 0), var(--social-y, 0), 100px)
    rotateY(-3deg) rotateZ(2deg) scale(1);
}

.social-phone--tom img,
.social-phone--laia img {
  animation: social-profile-scroll 16s ease-in-out infinite alternate;
}

.social-follow {
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
  padding: 10px 13px 10px 10px;
  color: #142d38;
  background: rgba(239, 250, 253, .94);
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(36,82,98,.2), inset 0 1px white;
  backdrop-filter: blur(18px);
}

.social-follow--one {
  top: 34%;
  right: -2%;
  animation: social-float-one 5.5s ease-in-out infinite;
}

.social-follow--two {
  bottom: 15%;
  left: -2%;
  animation: social-float-two 6.5s ease-in-out infinite;
}

.social-follow__avatar {
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  display: grid;
  place-items: center;
  color: white;
  background: linear-gradient(145deg, #58d8fa, #257ca7);
  border-radius: 13px;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.social-follow__avatar--green {
  background: linear-gradient(145deg, #98aa90, #61765e);
}

.social-follow p {
  flex: 1;
  margin: 0;
  display: grid;
  line-height: 1.25;
}

.social-follow strong {
  font-size: 11px;
  font-weight: 900;
}

.social-follow small {
  color: #6c8792;
  font-size: 9px;
}

.social-follow b {
  color: #168eb8;
  font-size: 16px;
}

.social-float-sticker {
  z-index: 10;
  width: 124px;
  filter: drop-shadow(0 18px 22px rgba(0,0,0,.42));
}

.social-float-sticker img {
  position: relative;
  z-index: 1;
}

.social-float-sticker span {
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 25%, rgba(255,255,255,.95) 45%, transparent 59%),
    conic-gradient(from 210deg, #54d9ff66, #8294ff88, #66f0d777, #ffe07866, #54d9ff66);
  background-size: 260% 100%, 100% 100%;
  mix-blend-mode: color-dodge;
  opacity: .62;
  -webkit-mask: var(--sticker) center / contain no-repeat;
  mask: var(--sticker) center / contain no-repeat;
  animation: social-sticker-shine 4s linear infinite;
}

.social-float-sticker--raven {
  top: 6%;
  right: -2%;
  transform: translate3d(var(--social-x, 0), var(--social-y, 0), 0) rotate(11deg);
  animation: social-sticker-float 5.2s ease-in-out infinite;
}

.social-float-sticker--book {
  bottom: 5%;
  right: 15%;
  width: 112px;
  transform: translate3d(var(--social-x, 0), var(--social-y, 0), 0) rotate(-10deg);
  animation: social-sticker-float 6.2s -2s ease-in-out infinite;
}

.social-profile-stage__spark {
  position: absolute;
  z-index: 8;
  color: var(--social-accent);
  text-shadow: 0 0 20px currentColor;
  animation: social-spark 2.4s ease-in-out infinite;
}

.social-profile-stage__spark--one { top: 18%; left: 4%; font-size: 25px; }
.social-profile-stage__spark--two { right: 4%; bottom: 28%; color: var(--social-secondary); font-size: 18px; animation-delay: -1.1s; }

.buddy {
  position: relative;
  min-height: 860px;
  margin-top: 120px;
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  align-items: center;
  gap: clamp(38px, 6vw, 90px);
  padding: 72px clamp(30px, 5vw, 72px);
  background:
    radial-gradient(circle at 75% 35%, rgba(242, 181, 95, .18), transparent 34%),
    radial-gradient(circle at 18% 78%, rgba(101, 201, 168, .15), transparent 32%),
    linear-gradient(140deg, rgba(20, 59, 50, .96), rgba(8, 29, 27, .94));
  border: 1px solid rgba(143, 214, 184, .18);
  border-radius: 58px;
  box-shadow: 0 50px 130px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.1);
  backdrop-filter: blur(20px);
  color: #f4fbf7;
}

.buddy::before {
  content: "JUNTOS";
  position: absolute;
  top: -45px;
  right: 2%;
  color: rgba(255,255,255,.035);
  font-size: clamp(90px, 14vw, 190px);
  font-weight: 950;
  letter-spacing: -.08em;
}

.buddy__copy {
  position: relative;
  z-index: 3;
}

.buddy .social__kicker {
  color: rgba(219, 244, 233, .64);
}

.buddy .social__kicker span {
  color: var(--buddy-accent);
}

.buddy h3 {
  font-size: clamp(48px, 5.1vw, 76px);
  line-height: .98;
}

.buddy__copy > p:not(.kicker) {
  margin: 28px 0 0;
  color: rgba(255,255,255,.62);
  font-size: 17px;
  line-height: 1.7;
}

.buddy__readers {
  margin-top: 36px;
  display: grid;
  gap: 13px;
}

.buddy__readers > span {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 13px 16px 15px 12px;
  background:
    linear-gradient(110deg, rgba(231, 255, 244, .09), rgba(231, 255, 244, .035));
  border: 1px solid rgba(143, 214, 184, .14);
  border-radius: 21px;
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 14px 30px rgba(0,0,0,.09);
}

.buddy__readers i {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  color: white;
  background: linear-gradient(145deg, #e5af61, #a76d2f);
  border-radius: 17px;
  box-shadow: inset 0 1px rgba(255,255,255,.25), 0 8px 20px rgba(0,0,0,.18);
  font-size: 14px;
  font-style: normal;
  font-weight: 900;
}

.buddy__readers span:nth-child(2) i { background: linear-gradient(145deg, #73d2b1, #377e6b); }
.buddy__readers span:nth-child(3) i { background: linear-gradient(145deg, #79a7ad, #3f696f); }

.buddy-reader__name {
  min-width: 0;
  display: grid;
  line-height: 1.1;
}

.buddy-reader__name b {
  font-size: 18px;
  font-weight: 900;
}

.buddy-reader__name small {
  margin-top: 5px;
  color: rgba(222, 244, 235, .48);
  font-size: 10px;
  font-weight: 700;
}

.buddy__readers .buddy-reader > strong {
  color: #f4c477;
  font-family: var(--display);
  font-size: 25px;
  font-weight: 900;
  letter-spacing: -.035em;
}

.buddy-reader__track {
  position: relative;
  grid-column: 2 / -1;
  height: 9px;
  margin-top: -3px;
  background: rgba(229, 246, 238, .09);
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 100px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.16);
  overflow: hidden;
}

.buddy-reader__track > span {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--buddy-progress);
  background:
    linear-gradient(90deg, #59b99b 0%, #83d0ad 46%, #e9ad58 82%, #f7cc79 100%);
  border-radius: inherit;
  box-shadow: 0 0 18px rgba(242,181,95,.28);
  transform: scaleX(0);
  transform-origin: left center;
}

.buddy-reader__track > span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 25%, rgba(255,255,255,.78) 48%, transparent 67%);
  transform: translateX(-120%);
}

.buddy__readers.is-in-view .buddy-reader__track > span {
  transform: scaleX(1);
  transition: transform 1.45s cubic-bezier(.16, .78, .2, 1) var(--buddy-delay);
}

.buddy__readers.is-in-view .buddy-reader__track > span::after {
  animation: buddy-progress-glint 1.1s ease-out calc(var(--buddy-delay) + .72s) both;
}

.buddy__status {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,.52);
  font-size: 11px;
  font-weight: 800;
}

.buddy__phones {
  position: relative;
  min-height: 710px;
  perspective: 1400px;
}

.buddy-phone {
  position: absolute;
  top: 2%;
  width: min(50%, 330px);
  height: 660px;
}

.buddy-phone--progress {
  z-index: 3;
  left: 2%;
  transform: rotateY(8deg) rotateZ(-4deg);
  animation: buddy-phone-one 7s ease-in-out infinite;
}

.buddy-phone--chat {
  z-index: 4;
  top: 9%;
  right: 0;
  transform: rotateY(-8deg) rotateZ(4deg);
  animation: buddy-phone-two 7.5s -2s ease-in-out infinite;
}

.buddy-phone--progress img,
.buddy-phone--chat img {
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.buddy__bubble {
  position: absolute;
  z-index: 7;
  padding: 12px 16px;
  border-radius: 18px 18px 5px;
  box-shadow: 0 15px 36px rgba(0,0,0,.28);
  font-size: 12px;
  font-weight: 900;
  backdrop-filter: blur(14px);
}

.buddy__bubble--one {
  top: 18%;
  right: -4%;
  color: white;
  background: rgba(210, 142, 53, .94);
  animation: buddy-bubble 4.5s ease-in-out infinite;
}

.buddy__bubble--two {
  bottom: 17%;
  left: -3%;
  color: #173e34;
  background: rgba(224, 250, 239, .94);
  border-radius: 18px 18px 18px 5px;
  animation: buddy-bubble 5.2s -1.8s ease-in-out infinite;
}

.social__closing {
  max-width: 980px;
  margin: 120px auto 0;
  color: rgba(26,67,80,.48);
  font-family: var(--display);
  font-size: clamp(32px, 4.2vw, 62px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.045em;
  text-align: center;
}

.social__closing strong {
  display: block;
  margin-top: 10px;
  color: #173a48;
  font-weight: 600;
}

@keyframes social-aurora {
  to { transform: translate3d(8%, -5%, 0) scale(1.12); opacity: .45; }
}

@keyframes social-orbit {
  to { transform: rotate(347deg); }
}

@keyframes social-online {
  50% { opacity: .45; box-shadow: 0 0 0 9px rgba(110,231,156,0), 0 0 9px rgba(110,231,156,.45); }
}

@keyframes social-profile-scroll {
  0%, 12% { transform: translateY(0); }
  88%, 100% { transform: translateY(-24%); }
}

@keyframes social-float-one {
  50% { margin-top: -12px; }
}

@keyframes social-float-two {
  50% { margin-bottom: 13px; }
}

@keyframes social-sticker-float {
  50% { margin-top: -15px; filter: drop-shadow(0 26px 25px rgba(0,0,0,.5)); }
}

@keyframes social-sticker-shine {
  to { background-position: -160% 0, 0 0; filter: hue-rotate(360deg); }
}

@keyframes social-spark {
  50% { opacity: .35; transform: scale(.7) rotate(45deg); }
}

@keyframes buddy-phone-one {
  50% { margin-top: -11px; transform: rotateY(5deg) rotateZ(-2.5deg); }
}

@keyframes buddy-phone-two {
  50% { margin-top: 12px; transform: rotateY(-5deg) rotateZ(2.5deg); }
}

@keyframes buddy-bubble {
  50% { transform: translateY(-9px) scale(1.025); }
}

@keyframes buddy-progress-glint {
  from { transform: translateX(-120%); }
  to { transform: translateX(130%); }
}

@media (max-width: 1080px) {
  .social__intro {
    grid-template-columns: .88fr 1.12fr;
  }

  .social-profile-stage {
    min-height: 760px;
  }

  .social-phone--tom,
  .social-phone--laia {
    width: min(48%, 300px);
    height: 625px;
  }

  .buddy {
    grid-template-columns: .83fr 1.17fr;
    padding-inline: 38px;
  }

  .buddy-phone {
    height: 590px;
  }
}

@media (max-width: 820px) {
  .social {
    min-height: 0;
  }

  .social__inner {
    width: min(calc(100% - 34px), 680px);
    padding: 110px 0 100px;
  }

  .social__intro {
    display: block;
  }

  .social__copy {
    max-width: 620px;
    text-align: center;
  }

  .social__lead {
    margin-inline: auto;
  }

  .social-proof {
    margin-inline: auto;
  }

  .social__signals {
    justify-content: center;
  }

  .social-profile-stage {
    min-height: 740px;
    margin-top: 70px;
  }

  .social-phone--tom,
  .social-phone--laia {
    width: 44%;
    height: 620px;
  }

  .social-phone--tom { left: 8%; }
  .social-phone--laia { right: 8%; }

  .social-follow--one { right: 0; }
  .social-follow--two { left: 0; }

  .buddy {
    margin-top: 100px;
    display: block;
    padding: 58px 35px;
    border-radius: 42px;
  }

  .buddy__copy {
    max-width: 570px;
    margin: 0 auto;
    text-align: center;
  }

  .buddy__readers {
    max-width: 410px;
    margin-inline: auto;
  }

  .buddy__status {
    justify-content: center;
  }

  .buddy__phones {
    max-width: 610px;
    margin: 60px auto 0;
  }
}

@media (max-width: 560px) {
  .social::before {
    top: 1.4%;
    font-size: 31vw;
  }

  .social__inner {
    width: min(calc(100% - 24px), 470px);
    padding-top: 92px;
  }

  .social h2 {
    font-size: clamp(54px, 17vw, 78px);
  }

  .social__lead {
    font-size: 16px;
    line-height: 1.65;
  }

  .social-proof {
    gap: 9px;
    padding-right: 13px;
  }

  .social-proof__avatars span {
    width: 32px;
    height: 32px;
  }

  .social__signals span {
    font-size: 10px;
  }

  .social-profile-stage {
    min-height: 650px;
    margin-top: 58px;
  }

  .social-profile-tabs {
    top: 0;
  }

  .social-phone--tom,
  .social-phone--laia {
    top: 11%;
    width: 56%;
    height: 510px;
    padding: 6px;
    border-radius: 32px;
  }

  .social-phone__screen {
    border-radius: 25px;
  }

  .social-phone--tom { left: 2%; }
  .social-phone--laia { top: 15%; right: 2%; }

  .social-follow {
    min-width: 188px;
    padding: 8px;
  }

  .social-follow--one {
    top: 38%;
    right: -4%;
  }

  .social-follow--two {
    bottom: 7%;
    left: -3%;
  }

  .social-follow__avatar {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .social-follow strong { font-size: 10px; }
  .social-follow small { font-size: 8px; }

  .social-float-sticker {
    width: 82px;
  }

  .social-float-sticker--raven { top: 8%; right: -5%; }
  .social-float-sticker--book { right: 5%; bottom: 2%; width: 76px; }

  .buddy {
    min-height: 0;
    margin-top: 65px;
    padding: 54px 14px 40px;
    border-radius: 34px;
  }

  .buddy::before {
    top: -20px;
    font-size: 23vw;
  }

  .buddy__copy {
    padding-inline: 12px;
  }

  .buddy h3 {
    font-size: clamp(44px, 13vw, 62px);
  }

  .buddy__copy > p:not(.kicker) {
    font-size: 15px;
  }

  .buddy__readers > span {
    grid-template-columns: 47px 1fr auto;
    gap: 11px;
    padding: 11px 12px 13px 10px;
  }

  .buddy__readers i {
    width: 47px;
    height: 47px;
    border-radius: 15px;
  }

  .buddy-reader__name b {
    font-size: 16px;
  }

  .buddy__readers .buddy-reader > strong {
    font-size: 22px;
  }

  .buddy__phones {
    min-height: 560px;
    margin-top: 45px;
  }

  .buddy-phone {
    width: 57%;
    height: 520px;
    padding: 5px;
    border-radius: 31px;
  }

  .buddy-phone--progress { left: 0; }
  .buddy-phone--chat { right: 0; }

  .buddy__bubble {
    padding: 9px 11px;
    font-size: 10px;
  }

  .buddy__bubble--one { top: 16%; right: -3%; }
  .buddy__bubble--two { bottom: 14%; left: -2%; }

  .social__closing {
    margin-top: 80px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .social__aurora,
  .social-profile-stage__orbit,
  .social-phone img,
  .social-follow,
  .social-float-sticker,
  .social-float-sticker span,
  .social-profile-stage__spark,
  .buddy-phone,
  .buddy__bubble,
  .social-proof > i,
  .buddy__status i {
    animation: none;
  }

  .buddy-reader__track > span {
    transform: scaleX(1);
    transition: none !important;
  }

  .buddy-reader__track > span::after {
    animation: none !important;
  }
}

/* ── Sticker collection: mixed 3D cabinet ──────────────────────────── */
.stickers__inner {
  min-height: 1210px;
  grid-template-columns: minmax(340px, .66fr) minmax(720px, 1.34fr);
  grid-template-rows: 1fr;
}

.stickers__copy {
  grid-row: 1;
}

.sticker-stage {
  grid-row: 1;
  min-height: 1010px;
  align-self: center;
}

.sticker-album {
  --album-rx: 3deg;
  --album-ry: 0deg;
  --album-rz: 0deg;
  position: absolute;
  z-index: 1;
  width: 255px;
  aspect-ratio: .73;
  transform:
    translate3d(var(--shift-x, 0), var(--shift-y, 0), -35px)
    rotateX(var(--album-rx))
    rotateY(var(--album-ry))
    rotateZ(var(--album-rz));
  transform-style: preserve-3d;
  transition: transform .6s var(--ease);
}

.sticker-album--pages {
  --album-rz: -8deg;
  --album-ry: 8deg;
  top: 8%;
  left: 8%;
}

.sticker-album--academy {
  --album-rz: 7deg;
  --album-ry: -9deg;
  top: 10%;
  right: 3%;
}

.sticker-album__cover {
  position: relative;
  height: 100%;
  padding: 27px 22px 20px 30px;
  background:
    radial-gradient(circle at 80% 16%, rgba(255,255,255,.22), transparent 22%),
    linear-gradient(145deg, #e995a3, #b64e70 66%, #7b2949);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 11px 21px 21px 11px;
  box-shadow:
    -9px 7px 0 #713047,
    -12px 10px 0 rgba(255,255,255,.2),
    0 38px 55px rgba(0,0,0,.48),
    inset 1px 0 rgba(255,255,255,.32),
    inset -1px 0 rgba(73,20,42,.38);
  overflow: hidden;
  transform-style: preserve-3d;
  animation: album-breathe 8s ease-in-out infinite;
}

.sticker-album--academy .sticker-album__cover {
  background:
    radial-gradient(circle at 72% 19%, rgba(213,226,205,.16), transparent 24%),
    linear-gradient(145deg, #526b58, #2c4031 65%, #17251c);
  box-shadow:
    -9px 7px 0 #17261c,
    -12px 10px 0 rgba(217,224,204,.16),
    0 38px 55px rgba(0,0,0,.5),
    inset 1px 0 rgba(255,255,255,.22),
    inset -1px 0 rgba(7,17,10,.5);
  animation-delay: -4s;
}

.sticker-album__cover::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 17px;
  width: 2px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.38) 15%, rgba(255,255,255,.12) 82%, transparent);
  box-shadow: 4px 0 11px rgba(74,22,45,.3);
}

.sticker-album__cover::after {
  content: "";
  position: absolute;
  z-index: 5;
  inset: -35%;
  background: linear-gradient(118deg, transparent 35%, rgba(255,255,255,.32) 46%, rgba(255,215,139,.13) 52%, transparent 63%);
  transform: translateX(-55%) rotate(8deg);
  animation: album-shine 6.5s ease-in-out infinite;
  pointer-events: none;
}

.sticker-album__eyebrow {
  position: relative;
  z-index: 2;
  color: rgba(255,255,255,.65);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.sticker-album h3 {
  position: relative;
  z-index: 2;
  margin: 17px 0 8px;
  color: #fffaf2;
  font-family: var(--display);
  font-size: 31px;
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: .86;
}

.sticker-album p {
  position: relative;
  z-index: 2;
  max-width: 155px;
  margin: 0;
  color: rgba(255,255,255,.58);
  font-size: 9px;
  line-height: 1.35;
}

.sticker-album__miniatures {
  position: absolute;
  z-index: 2;
  right: 12px;
  bottom: 43px;
  left: 22px;
  height: 118px;
}

.sticker-album__miniatures img {
  position: absolute;
  width: 92px;
  height: 92px;
  object-fit: contain;
  filter:
    drop-shadow(2px 0 #fff7e9)
    drop-shadow(-2px 0 #fff7e9)
    drop-shadow(0 2px #fff7e9)
    drop-shadow(0 -2px #fff7e9)
    drop-shadow(0 8px 9px rgba(42,18,29,.32));
}

.sticker-album__miniatures img:nth-child(1) { bottom: 4px; left: 0; transform: rotate(-10deg); }
.sticker-album__miniatures img:nth-child(2) { right: 34px; bottom: 19px; z-index: 2; transform: rotate(5deg); }
.sticker-album__miniatures img:nth-child(3) { right: -8px; bottom: -2px; transform: rotate(13deg); }

.sticker-album__count {
  position: absolute;
  z-index: 3;
  right: 17px;
  bottom: 16px;
  color: rgba(255,255,255,.7);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.web-sticker__face {
  animation-name: sticker-turn;
  transform-origin: 50% 50%;
}

.web-sticker__face::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    repeating-linear-gradient(135deg, rgba(140,121,153,.13) 0 1px, transparent 1px 12px),
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.9), transparent 38%),
    #f4ecdf;
  -webkit-mask-image: var(--sticker);
  mask-image: var(--sticker);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  filter:
    drop-shadow(4px 0 0 #fffaf0)
    drop-shadow(-4px 0 0 #fffaf0)
    drop-shadow(0 4px 0 #fffaf0)
    drop-shadow(0 -4px 0 #fffaf0)
    drop-shadow(0 2px 1px rgba(54,45,67,.7));
  transform: rotateY(180deg) translateZ(2px);
  backface-visibility: hidden;
}

.web-sticker img,
.web-sticker__foil,
.web-sticker__shine {
  backface-visibility: hidden;
  transform: translateZ(3px);
}

.web-sticker:hover .web-sticker__face {
  animation: none;
  transform: translateY(-15px) scale(1.06) rotateX(-7deg) rotateY(16deg);
}

.web-sticker--fullfoil {
  --sticker-color: saturate(1.15) contrast(1.08) brightness(1.04);
}

.web-sticker--fullfoil .web-sticker__foil {
  opacity: .96;
  background:
    repeating-linear-gradient(122deg,
      rgba(255,255,255,.04) 0 7%,
      rgba(82,235,255,.86) 11%,
      rgba(121,111,255,.78) 17%,
      rgba(255,111,226,.86) 23%,
      rgba(255,225,92,.82) 30%,
      rgba(255,255,255,.08) 37%),
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.98), transparent 28%);
  background-size: 220% 220%, 100% 100%;
  mix-blend-mode: hard-light;
  filter:
    drop-shadow(4px 0 0 rgba(116,232,255,.7))
    drop-shadow(-4px 0 0 rgba(255,129,224,.66))
    drop-shadow(0 4px 0 rgba(255,219,107,.7))
    drop-shadow(0 -4px 0 rgba(164,139,255,.72));
}

.web-sticker--fullfoil .web-sticker__shine {
  opacity: .95;
}

.web-sticker--spin .web-sticker__face {
  animation-name: sticker-full-spin;
  animation-duration: 10.5s;
}

.web-sticker--book {
  --w: 160px;
  --z: 10;
  top: 3%;
  left: 33%;
}

.web-sticker--raven {
  --w: 180px;
  --z: 9;
  top: 7%;
  right: 16%;
}

.web-sticker--dragon {
  --w: 255px;
  --rz: -2deg;
  --z: 18;
  top: 28%;
  left: 36%;
}

.web-sticker--star {
  --w: 185px;
  --rz: 12deg;
  --z: 11;
  top: 38%;
  right: -1%;
}

.web-sticker--untold {
  --w: 165px;
  --rz: -8deg;
  --z: 12;
  right: 31%;
  bottom: 4%;
  left: auto;
}

.web-sticker--owl {
  --w: 175px;
  --rz: -13deg;
  --z: 9;
  top: 41%;
  left: 1%;
}

.web-sticker--witch {
  --w: 190px;
  --rz: 11deg;
  --z: 13;
  right: 1%;
  bottom: 5%;
}

.web-sticker--atium {
  --w: 155px;
  --rz: -16deg;
  --z: 14;
  bottom: 16%;
  left: 2%;
}

.gacha-stage-slot {
  position: absolute;
  z-index: 16;
  width: 138px;
  height: 138px;
  transform: translate3d(var(--shift-x, 0), var(--shift-y, 0), 45px);
  transition: transform .55s var(--ease);
  perspective: 850px;
}

.gacha-stage-slot--rose {
  top: 61%;
  left: 24%;
}

.gacha-stage-slot--black {
  top: 27%;
  right: 25%;
  width: 112px;
  height: 112px;
}

.gacha-stage-slot .gacha-ball,
.gacha-stage-slot .gacha-ball--black {
  width: 100%;
  height: 100%;
  margin: 0;
}

.sticker-stage__hint {
  position: absolute;
  z-index: 22;
  bottom: 0;
  left: 50%;
  color: rgba(255,255,255,.36);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
  transform: translateX(-50%);
  white-space: nowrap;
}

@keyframes sticker-turn {
  0%, 100% { transform: translate3d(0, 0, 0) rotateX(2deg) rotateY(-12deg); }
  30% { transform: translate3d(0, -13px, 16px) rotateX(-8deg) rotateY(20deg); }
  63% { transform: translate3d(0, -5px, 8px) rotateX(10deg) rotateY(-24deg); }
  82% { transform: translate3d(0, -17px, 18px) rotateX(-4deg) rotateY(11deg); }
}

@keyframes sticker-full-spin {
  0%, 14% { transform: translate3d(0, 0, 0) rotateX(3deg) rotateY(0deg); }
  46% { transform: translate3d(0, -16px, 26px) rotateX(-8deg) rotateY(180deg); }
  82%, 100% { transform: translate3d(0, 0, 0) rotateX(3deg) rotateY(360deg); }
}

@keyframes album-breathe {
  50% { transform: translate3d(0, -8px, 8px) rotateY(2deg); }
}

@keyframes album-shine {
  0%, 27% { transform: translateX(-58%) rotate(8deg); }
  67%, 100% { transform: translateX(58%) rotate(8deg); }
}

@media (max-width: 1050px) {
  .stickers__inner {
    min-height: 1130px;
    grid-template-columns: minmax(310px, .68fr) minmax(630px, 1.32fr);
  }

  .sticker-stage {
    min-height: 960px;
    transform: scale(.88);
  }
}

@media (max-width: 820px) {
  .stickers__inner {
    min-height: 0;
  }

  .sticker-stage {
    min-height: 900px;
    transform: none;
  }

  .sticker-album {
    width: 215px;
  }

  .sticker-album--pages { left: 7%; }
  .sticker-album--academy { right: 5%; }

  .web-sticker--book { --w: 145px; left: 35%; }
  .web-sticker--raven { --w: 160px; right: 12%; }
  .web-sticker--dragon { --w: 220px; left: 34%; }
  .web-sticker--star { --w: 165px; right: 0; }
  .web-sticker--untold { --w: 150px; right: 31%; }
  .web-sticker--owl { --w: 155px; }
  .web-sticker--witch { --w: 170px; }
  .web-sticker--atium { --w: 140px; }

  .gacha-stage-slot--rose {
    left: 23%;
  }

  .gacha-stage-slot--black {
    right: 24%;
  }
}

@media (max-width: 560px) {
  .sticker-stage {
    min-height: 790px;
  }

  .sticker-album {
    width: 168px;
  }

  .sticker-album__cover {
    padding: 18px 13px 14px 22px;
    border-radius: 8px 15px 15px 8px;
  }

  .sticker-album__cover::before {
    left: 12px;
  }

  .sticker-album h3 {
    margin-top: 11px;
    font-size: 23px;
  }

  .sticker-album p {
    max-width: 115px;
    font-size: 7px;
  }

  .sticker-album__miniatures {
    right: 7px;
    bottom: 29px;
    left: 14px;
    height: 83px;
  }

  .sticker-album__miniatures img {
    width: 66px;
    height: 66px;
  }

  .sticker-album__count {
    right: 11px;
    bottom: 9px;
    font-size: 5px;
  }

  .sticker-album--pages { top: 8%; left: 2%; }
  .sticker-album--academy { top: 10%; right: 0; }

  .web-sticker--book { --w: 106px; top: 2%; left: 35%; }
  .web-sticker--raven { --w: 116px; top: 12%; right: 9%; }
  .web-sticker--dragon { --w: 165px; top: 30%; left: 29%; }
  .web-sticker--star { --w: 118px; top: 43%; right: -1%; }
  .web-sticker--untold { --w: 106px; right: 31%; bottom: 2%; }
  .web-sticker--owl { --w: 112px; top: 42%; left: -1%; }
  .web-sticker--witch { --w: 125px; right: 0; bottom: 5%; }
  .web-sticker--atium { --w: 104px; bottom: 16%; left: 0; }

  .gacha-stage-slot {
    width: 102px;
    height: 102px;
  }

  .gacha-stage-slot--rose {
    top: 62%;
    left: 22%;
  }

  .gacha-stage-slot--black {
    top: 28%;
    right: 23%;
    width: 82px;
    height: 82px;
  }

  .sticker-stage__hint {
    bottom: -3px;
    font-size: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sticker-album__cover,
  .web-sticker__face {
    animation: none;
  }
}

/* ── Sticker collection: compact cut ───────────────────────────────── */
.rarity-dot--legendary {
  background: linear-gradient(135deg, #f6cc69, #ef7da8);
  box-shadow: 0 0 14px rgba(246, 204, 105, .7);
}

.stickers__rarity-mystery {
  color: #f2c66c !important;
  border-color: rgba(242, 198, 108, .24) !important;
}

.stickers__inner {
  min-height: 850px;
  grid-template-columns: minmax(320px, .68fr) minmax(640px, 1.32fr);
  padding: 70px 0 72px;
}

.stickers h2 {
  margin-top: 20px;
  font-size: clamp(43px, 4.5vw, 66px);
}

.stickers__lead {
  margin-top: 22px;
  font-size: clamp(15px, 1.3vw, 18px);
}

.stickers__rarities {
  gap: 7px;
  margin-top: 22px;
}

.stickers__rarities > span {
  padding: 7px 10px;
  font-size: 8px;
}

.stickers__promise {
  margin-top: 24px;
  padding-top: 14px;
  font-size: 15px;
}

.sticker-stage {
  min-height: 720px;
  transform: none;
}

.sticker-stage__halo {
  width: min(52vw, 540px);
}

.sticker-album {
  width: 190px;
}

.sticker-album__cover {
  padding: 20px 15px 15px 24px;
  border-radius: 9px 17px 17px 9px;
  box-shadow:
    -7px 5px 0 #713047,
    -9px 7px 0 rgba(255,255,255,.2),
    0 28px 42px rgba(0,0,0,.45),
    inset 1px 0 rgba(255,255,255,.32),
    inset -1px 0 rgba(73,20,42,.38);
}

.sticker-album--academy .sticker-album__cover {
  box-shadow:
    -7px 5px 0 #17261c,
    -9px 7px 0 rgba(217,224,204,.16),
    0 28px 42px rgba(0,0,0,.48),
    inset 1px 0 rgba(255,255,255,.22),
    inset -1px 0 rgba(7,17,10,.5);
}

.sticker-album__cover::before {
  left: 13px;
}

.sticker-album h3 {
  margin: 12px 0 6px;
  font-size: 24px;
}

.sticker-album p {
  max-width: 120px;
  font-size: 7px;
}

.sticker-album__miniatures {
  right: 8px;
  bottom: 31px;
  left: 16px;
  height: 88px;
}

.sticker-album__miniatures img {
  width: 68px;
  height: 68px;
}

.sticker-album__count {
  right: 12px;
  bottom: 10px;
  font-size: 5px;
}

.web-sticker--book { --w: 118px; }
.web-sticker--raven { --w: 138px; }
.web-sticker--dragon { --w: 190px; }
.web-sticker--trophy {
  --w: 140px;
  --rz: 12deg;
  --z: 11;
  top: 38%;
  right: -1%;
}
.web-sticker--untold { --w: 124px; }
.web-sticker--owl { --w: 132px; }
.web-sticker--witch { --w: 144px; }
.web-sticker--atium { --w: 116px; }

.gacha-stage-slot {
  width: 104px;
  height: 104px;
}

.gacha-stage-slot--black {
  width: 84px;
  height: 84px;
}

.sticker-stage__hint {
  bottom: 3px;
}

@media (max-width: 1050px) {
  .stickers__inner {
    min-height: 820px;
    grid-template-columns: minmax(290px, .7fr) minmax(560px, 1.3fr);
  }

  .sticker-stage {
    min-height: 690px;
    transform: none;
  }
}

@media (max-width: 820px) {
  .stickers__inner {
    min-height: 0;
    padding: 64px 0 60px;
  }

  .sticker-stage {
    min-height: 640px;
    margin-top: 18px;
  }

  .sticker-album {
    width: 164px;
  }

  .web-sticker--book { --w: 102px; }
  .web-sticker--raven { --w: 120px; }
  .web-sticker--dragon { --w: 166px; }
  .web-sticker--trophy { --w: 122px; }
  .web-sticker--untold { --w: 108px; }
  .web-sticker--owl { --w: 114px; }
  .web-sticker--witch { --w: 126px; }
  .web-sticker--atium { --w: 102px; }

  .gacha-stage-slot {
    width: 91px;
    height: 91px;
  }

  .gacha-stage-slot--black {
    width: 74px;
    height: 74px;
  }
}

@media (max-width: 560px) {
  .stickers__inner {
    padding: 56px 0 52px;
  }

  .stickers h2 {
    font-size: clamp(40px, 12.5vw, 58px);
  }

  .stickers__lead {
    margin-top: 18px;
  }

  .stickers__promise {
    margin-top: 20px;
  }

  .sticker-stage {
    min-height: 540px;
    margin-top: 12px;
  }

  .sticker-album {
    width: 122px;
  }

  .sticker-album__cover {
    padding: 13px 8px 9px 16px;
  }

  .sticker-album__cover::before {
    left: 9px;
  }

  .sticker-album__eyebrow {
    font-size: 5px;
  }

  .sticker-album h3 {
    margin-top: 8px;
    font-size: 17px;
  }

  .sticker-album p {
    max-width: 82px;
    font-size: 5px;
  }

  .sticker-album__miniatures {
    right: 4px;
    bottom: 20px;
    left: 10px;
    height: 61px;
  }

  .sticker-album__miniatures img {
    width: 48px;
    height: 48px;
  }

  .sticker-album__count {
    right: 7px;
    bottom: 6px;
    font-size: 4px;
  }

  .web-sticker--book { --w: 76px; }
  .web-sticker--raven { --w: 88px; }
  .web-sticker--dragon { --w: 122px; }
  .web-sticker--trophy { --w: 90px; }
  .web-sticker--untold { --w: 79px; }
  .web-sticker--owl { --w: 84px; }
  .web-sticker--witch { --w: 93px; }
  .web-sticker--atium { --w: 76px; }

  .gacha-stage-slot {
    width: 70px;
    height: 70px;
  }

  .gacha-stage-slot--black {
    width: 58px;
    height: 58px;
  }

  .sticker-stage__hint {
    font-size: 6px;
  }
}