/* Midnight Electric / shared Arabic and English design system */
:root {
  color-scheme: dark;
  --bg: #030916;
  --panel: #0b172a;
  --ink: #f4f7ff;
  --muted: #9eafc9;
  --cyan: #29ddff;
  --purple: #ab7aff;
  --line: #263957;
  --font: "IBM Plex Sans Arabic", "DM Sans", sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  font-synthesis: none;
  scroll-behavior: smooth;
  scroll-padding-top: 35px;
}
html[lang="en"] {
  --font: "DM Sans", "IBM Plex Sans Arabic", sans-serif;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background:
    radial-gradient(ellipse at 65% 6%, #092a684a, transparent 27%),
    radial-gradient(ellipse at 7% 40%, #28164030, transparent 25%), var(--bg);
  overflow-x: clip;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  cursor: pointer;
}
a,
button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
button:disabled {
  cursor: default;
}
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 5px;
}
::selection {
  background: #713de5;
  color: white;
}
img {
  display: block;
  max-width: 100%;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1,
h2,
h3 {
  font-weight: 700;
}
p {
  color: var(--muted);
  line-height: 1.85;
}
strong {
  font-weight: 600;
}
.shell {
  width: min(1320px, calc(100% - 96px));
  margin-inline: auto;
}
.icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
}
.direction-arrow {
  width: 21px;
  height: 21px;
}
:root[dir="rtl"] .direction-arrow {
  transform: rotate(180deg);
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: "DM Sans", var(--font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--cyan);
}
.eyebrow .icon {
  width: 19px;
  height: 19px;
  filter: invert(78%) sepia(86%) saturate(927%) hue-rotate(147deg)
    brightness(107%);
}
.gradient-text {
  background: linear-gradient(
    110deg,
    #23dfff 6%,
    #c8e9ff 38%,
    #b695ff 75%,
    #b665ff
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.button {
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 14px 24px;
  border: 1px solid #94bdff;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  position: relative;
  transition:
    transform 0.35s var(--ease),
    box-shadow 0.35s,
    filter 0.35s;
}
.button-primary {
  color: white;
  background: linear-gradient(
    108deg,
    #04cde6 -15%,
    #0574fa 36%,
    #6237fb 74%,
    #b354f3 110%
  );
  box-shadow:
    inset 0 0 9px #b9edff57,
    0 0 22px #244ff42b,
    0 3px 10px #0006;
}
.button-primary:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 0 10px #a1edff8c,
    0 0 35px #5968fe60;
  filter: brightness(1.12);
}
.button-primary:active {
  transform: translateY(0) scale(0.98);
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--cyan);
  font-size: 14px;
  white-space: nowrap;
}
.text-link .icon {
  width: 18px;
  filter: invert(80%) sepia(73%) saturate(1431%) hue-rotate(149deg);
}
/* Navigation */
.site-header {
  position: relative;
  z-index: 15;
  border-bottom: 1px solid #1a2a4633;
}
.header-inner {
  height: 108px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
}
.logo {
  flex-shrink: 0;
  display: inline-flex;
}
.brand-lockup {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.brand-name {
  font:
    800 38px/1.15 "DM Sans",
    sans-serif;
  letter-spacing: -1.5px;
  color: #f4faff;
  display: flex;
  align-items: center;
  gap: 7px;
  text-shadow: 0 0 18px #487cff40;
}
.brand-crown {
  width: 33px;
  height: 33px;
  filter: invert(75%) sepia(77%) saturate(990%) hue-rotate(150deg)
    brightness(111%);
}
.brand-tagline {
  font: 11px/1.5 var(--font);
  color: #bed0ec;
  letter-spacing: 0.15px;
}
.header-inner nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.header-inner nav a {
  font-size: 14px;
  font-weight: 500;
  color: #d0dbf2;
  padding-block: 12px;
  position: relative;
  white-space: nowrap;
}
.header-inner nav a:hover {
  color: white;
}
.header-inner nav a.active:after {
  content: "";
  position: absolute;
  bottom: 5px;
  inset-inline: 0;
  height: 2px;
  background: var(--cyan);
  box-shadow: 0 0 9px #26dfffa1;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 22px;
}
.language-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #d2dff7;
  min-height: 44px;
  white-space: nowrap;
}
.language-switch .icon {
  width: 19px;
  height: 19px;
}
.header-cta {
  font-size: 14px;
  min-height: 46px;
  border-radius: 14px;
  padding: 12px 20px;
  gap: 17px;
}
.header-cta .icon {
  width: 18px;
}
.menu-toggle {
  display: none;
  background: none;
  border: 0;
  width: 44px;
  height: 44px;
  padding: 11px;
  color: white;
}
.menu-toggle span {
  display: block;
  height: 2px;
  background: currentColor;
  margin: 5px 0;
  border-radius: 3px;
  transition:
    transform 0.25s,
    opacity 0.25s;
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
/* Hero artwork and original service marks */
.hero {
  display: grid;
  grid-template-columns: 1.02fr 1.08fr;
  gap: 10px;
  min-height: 552px;
  align-items: center;
  position: relative;
  padding-block: 25px;
}
.hero-copy {
  position: relative;
  z-index: 3;
  padding-block: 24px;
}
.hero-badge {
  display: inline-flex;
  padding: 7px 12px;
  border: 1px solid #a1689c88;
  border-radius: 50px;
  background: linear-gradient(100deg, #ce912615, #912cff10);
  color: #e8e8ff;
  letter-spacing: 0.3px;
  font-family: var(--font);
  font-size: 12px;
  box-shadow: 0 0 22px #e39a1410;
}
.hero-badge .icon {
  filter: invert(76%) sepia(57%) saturate(939%) hue-rotate(348deg);
  width: 17px;
  height: 17px;
}
.hero h1 {
  font-size: clamp(42px, 4.45vw, 66px);
  line-height: 1.26;
  letter-spacing: -1px;
  margin: 21px 0 20px;
}
.hero h1 em {
  font-family: "DM Sans", sans-serif;
  font-style: normal;
  color: #35dbf9;
}
.hero-first-line {
  white-space: nowrap;
}
.hero-description {
  font-size: 17px;
  line-height: 1.9;
  color: #b9c9e1;
  margin-bottom: 26px;
  max-width: 520px;
}
.hero-description strong {
  color: #e9f0fd;
}
.hero-cta {
  min-height: 60px;
  min-width: 295px;
  gap: 18px;
  border-radius: 17px;
}
.hero-reassurance {
  display: flex;
  align-items: center;
  gap: 21px;
  margin-top: 20px;
  color: #bdcce2;
  font-size: 12px;
}
.hero-reassurance > span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hero-reassurance .icon {
  width: 14px;
  height: 14px;
  filter: invert(82%) sepia(43%) saturate(1558%) hue-rotate(105deg);
}
.preview-note {
  font-size: 11px;
  color: #8999b5;
  line-height: 1.8;
  margin: 16px 0 0;
}
.hero-scene {
  height: 525px;
  position: relative;
  min-width: 0;
  isolation: isolate;
  direction: ltr;
}
.hero-scene:before {
  content: "";
  position: absolute;
  inset: 10% 5% 2%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #1b4afe21, transparent 69%);
  z-index: -1;
}
.hero-art {
  width: 108%;
  max-width: none;
  height: 110%;
  object-fit: contain;
  position: absolute;
  bottom: -11%;
  left: -4%;
  mask-image:
    linear-gradient(to right, transparent, #000 12%, #000 88%, transparent),
    linear-gradient(
      to bottom,
      transparent 2%,
      #000 18%,
      #000 83%,
      transparent 99%
    );
  mask-composite: intersect;
  pointer-events: none;
}
.scene-orbit {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.floating-service {
  width: 102px;
  height: 108px;
  border: 1px solid #48b9fa;
  background: linear-gradient(145deg, #061429ee, #030813f5);
  box-shadow:
    inset 0 0 17px #2058b12d,
    0 0 5px #348dff99,
    0 0 24px #1559df38;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 9px;
  border-radius: 20px;
  position: absolute;
  pointer-events: auto;
  animation: levitate 7s ease-in-out infinite;
  transform: rotate(var(--tilt));
  transition: box-shadow 0.25s;
}
.floating-service:hover {
  box-shadow:
    inset 0 0 20px #436fe82e,
    0 0 8px #4acbff,
    0 0 35px #2572ee70;
}
.floating-service > span:last-child {
  font:
    700 15px "DM Sans",
    sans-serif;
  color: white;
}
.brand-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 49px;
  height: 49px;
  border-radius: 13px;
  flex-shrink: 0;
}
.brand-icon img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}
.brand-netflix img {
  filter: invert(23%) sepia(96%) saturate(4461%) hue-rotate(334deg)
    brightness(97%) contrast(107%);
}
.brand-spotify img {
  filter: invert(69%) sepia(63%) saturate(1980%) hue-rotate(93deg)
    brightness(95%) contrast(86%);
}
.brand-gemini img {
  filter: invert(65%) sepia(32%) saturate(1169%) hue-rotate(199deg)
    brightness(112%);
}
.brand-chatgpt img {
  filter: invert(81%) sepia(58%) saturate(453%) hue-rotate(102deg)
    brightness(98%);
}
.brand-canva img {
  filter: invert(69%) sepia(53%) saturate(1247%) hue-rotate(146deg)
    brightness(106%);
}
.brand-capcut img {
  border-radius: 9px;
}
.floating-service .brand-icon img {
  width: 46px;
  height: 46px;
}
.floating-netflix {
  --tilt: -17deg;
  left: 18%;
  top: 10%;
  animation-delay: -1s;
}
.floating-spotify {
  --tilt: 13deg;
  left: 43%;
  top: 3%;
  animation-delay: -3s;
}
.floating-gemini {
  --tilt: 16deg;
  right: 9%;
  top: 25%;
  animation-delay: -4.5s;
  border-color: #a68bff;
}
.floating-canva {
  --tilt: -18deg;
  left: 2%;
  top: 38%;
  animation-delay: -2s;
  border-color: #b783ff;
  background: linear-gradient(145deg, #003e658f, #170836);
}
.floating-chatgpt {
  --tilt: 11deg;
  right: 3%;
  top: 54%;
  animation-delay: -5s;
}
.scene-note {
  position: absolute;
  z-index: 3;
  color: #d6ddfa;
  font-size: 14px;
  line-height: 1.5;
  font-style: italic;
  transform: rotate(-8deg);
  pointer-events: none;
  text-shadow: 0 0 15px #5984e544;
}
.note-one {
  left: 2%;
  top: 6%;
}
.note-one > span {
  display: block;
  font: 33px/1.1 Georgia;
  text-align: center;
}
.note-two {
  right: 4%;
  bottom: 4%;
  transform: rotate(8deg);
  font-size: 13px;
}
.scene-caption {
  position: absolute;
  inset: auto 0 0;
  text-align: center;
  color: #6d86b0;
  font:
    9px "DM Sans",
    sans-serif;
  letter-spacing: 3.5px;
}
/* Three-step explainer */
.quick-steps {
  border: 1px solid #2d4770;
  background: linear-gradient(110deg, #0a162bd9, #0b1528b3);
  border-radius: 21px;
  padding: 27px 29px;
  display: grid;
  grid-template-columns: 1.06fr repeat(3, 1fr);
  gap: 24px;
  position: relative;
  z-index: 4;
  box-shadow: 0 15px 55px #0002;
}
.steps-intro {
  border-inline-end: 1px solid #2a3b57;
  padding-inline-end: 23px;
}
.steps-intro h2 {
  font-size: 24px;
  line-height: 1.45;
  margin-bottom: 8px;
}
.steps-intro p {
  font-size: 13px;
  line-height: 1.65;
  margin: 0;
  color: #a5b5ce;
}
.quick-step {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding-top: 9px;
}
.step-icon {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow:
    0 0 22px #7759ff38,
    inset 0 0 12px #ffffff38;
}
.step-icon .icon {
  width: 21px;
  height: 21px;
}
.step-0 {
  background: linear-gradient(135deg, #b168fa, #6229df);
}
.step-1 {
  background: linear-gradient(135deg, #33d9f9, #1275eb);
}
.step-2 {
  background: linear-gradient(135deg, #43eccb, #00aa86);
}
.step-number {
  font:
    600 11px "DM Sans",
    sans-serif;
  display: block;
  color: #8b9dba;
  margin-bottom: 4px;
}
.quick-step h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 7px;
  line-height: 1.5;
}
.quick-step p {
  font-size: 12px;
  line-height: 1.7;
  color: #a5b5ce;
  margin: 0;
}
/* Service catalog */
.section {
  padding-block: 67px;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: center;
  margin-bottom: 27px;
}
.section-heading h2 {
  font-size: 33px;
  line-height: 1.45;
  margin: 10px 0 6px;
}
.section-heading h2 span {
  font-family: "DM Sans", sans-serif;
  color: #a58dff;
}
.section-heading p {
  font-size: 16px;
  color: #9caec9;
  margin: 0;
}
.perk-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
.perk-card {
  position: relative;
  min-width: 0;
  background: linear-gradient(140deg, #0c192a, #050d19);
  border: 1px solid #213755;
  border-radius: 18px;
  padding: 19px 17px 18px;
  transition:
    transform 0.35s var(--ease),
    border-color 0.35s,
    box-shadow 0.35s;
  scroll-margin-top: 30px;
}
.perk-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--brand-color), transparent 50%);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--brand-color), transparent 94%);
}
.perk-card:target {
  border-color: var(--brand-color);
}
.perk-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.perk-card .brand-icon {
  background: #010711;
  border: 1px solid color-mix(in srgb, var(--brand-color), transparent 75%);
  width: 54px;
  height: 54px;
  border-radius: 14px;
}
.perk-spark {
  color: #3d5374;
  font-size: 16px;
}
.perk-card h3 {
  font:
    700 17px "DM Sans",
    sans-serif;
  text-align: inherit;
  margin: 19px 0 8px;
}
.service-category {
  font-size: 12px;
  color: #becbe0;
  line-height: 1.6;
  margin-bottom: 10px;
}
.service-description {
  font-size: 12px;
  color: #8fa1bc;
  line-height: 1.7;
  margin: 0 0 20px;
  min-height: 41px;
}
.free-badge {
  display: inline-flex;
  color: #d6eaff;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  background: linear-gradient(100deg, #13469c, #183583);
  border: 1px solid #2a5da04f;
  border-radius: 20px;
  line-height: 1.5;
}
.section-note {
  font-size: 11px;
  line-height: 1.8;
  color: #8291ac;
  text-align: center;
  margin: 18px 0 0;
}
/* Card discovery and progress */
.discovery-section {
  border-block: 1px solid #1b2d464f;
  background:
    radial-gradient(ellipse at 20% 60%, #172c662e, transparent 60%),
    linear-gradient(180deg, #030917, #080d1b);
  padding-block: 61px;
}
.discovery-layout {
  display: grid;
  grid-template-columns: 0.93fr 1.07fr;
  gap: 75px;
  align-items: center;
}
.discovery-copy h2 {
  font-size: 42px;
  line-height: 1.45;
  margin: 19px 0 22px;
}
.discovery-copy > p {
  font-size: 16px;
  line-height: 1.95;
  margin-bottom: 0;
}
.discovery-copy .eyebrow {
  font-size: 10px;
  letter-spacing: 1.6px;
}
.discovery-facts {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 30px;
}
.discovery-facts > span {
  display: flex;
  flex-direction: column;
  color: #9fadc6;
  font-size: 12px;
  gap: 7px;
  padding-inline-end: 28px;
  border-inline-end: 1px solid #29334c;
}
.discovery-facts > span:last-child {
  border: 0;
  padding: 0;
}
.discovery-facts strong {
  font:
    700 34px/1.1 "DM Sans",
    sans-serif;
  color: #eaf7ff;
}
.discovery-copy .preview-note {
  font-size: 11px;
  margin-top: 23px;
  color: #8d9cb7;
}
.discovery-board {
  background: linear-gradient(135deg, #0d192cee, #0c1325ed);
  border: 1px solid #35496b;
  border-radius: 24px;
  padding: 26px 28px;
  position: relative;
  box-shadow:
    0 0 60px #212e671a,
    inset 0 1px 0 #6b99dd17;
  min-width: 0;
}
.discovery-board:before {
  content: "";
  position: absolute;
  inset: -1px 25% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, #66c7ff, transparent);
}
.board-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.board-topline > .eyebrow {
  font-size: 10px;
  color: #8f9fcc;
  letter-spacing: 2px;
}
.attempt-counter {
  font-size: 11px;
  color: #b2c4e8;
  background: #152239;
  padding: 5px 11px;
  border: 1px solid #2a3a54;
  border-radius: 20px;
  white-space: nowrap;
}
.discovery-board h3 {
  font-size: 20px;
  text-align: center;
  margin: 21px 0 3px;
  font-weight: 600;
}
.board-hint {
  text-align: center;
  font-size: 12px;
  margin: 0;
  color: #8194b5;
}
.reveal-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
  margin: 26px 0 22px;
  perspective: 1100px;
}
.reveal-card {
  min-height: 188px;
  padding: 17px 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  isolation: isolate;
  background: linear-gradient(145deg, #182d55, #0d1831 62%, #172039);
  color: white;
  border: 1px solid #3c71ab;
  border-radius: 15px;
  box-shadow:
    inset 0 0 22px #2261ad16,
    0 7px 17px #0003;
  transition:
    transform 0.35s var(--ease),
    box-shadow 0.3s,
    border-color 0.3s;
}
.card-1 {
  background: linear-gradient(145deg, #2c245a, #181331 62%, #261c47);
  border-color: #7759b0;
}
.card-2 {
  background: linear-gradient(145deg, #14354e, #0a1c30 62%, #112c3c);
  border-color: #368999;
}
.reveal-card:before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid #869fce24;
  border-radius: 10px;
  z-index: -1;
}
.reveal-card:hover:not(:disabled) {
  transform: translateY(-8px) rotateX(5deg);
  border-color: #6edbff;
  box-shadow: 0 0 22px #2c89fc36;
}
.card-index {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-start: 16px;
  font:
    10px "DM Sans",
    sans-serif;
  color: #829fc7;
}
.card-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin-top: 18px;
}
.card-center > .icon {
  width: 33px;
  height: 33px;
  filter: invert(76%) sepia(81%) saturate(1110%) hue-rotate(156deg);
}
.card-center > span {
  font:
    800 22px "DM Sans",
    sans-serif;
  letter-spacing: -0.5px;
  color: #dbe9ff;
}
.card-1 .card-center > .icon {
  filter: invert(68%) sepia(62%) saturate(2678%) hue-rotate(214deg);
}
.card-label {
  font-size: 12px;
  line-height: 1.6;
  color: #b9c9e4;
  margin-top: 8px;
  text-align: center;
}
.card-bottom-star {
  font-size: 17px;
  color: #5275a6;
  position: absolute;
  bottom: 9px;
}
.reveal-card.revealed {
  border-color: #466b88;
  background: linear-gradient(145deg, #122b34, #0c1728);
  box-shadow: inset 0 0 15px #368c9020;
}
.revealed .card-center {
  flex-direction: row;
  margin-top: 16px;
  gap: 2px;
}
.revealed .card-center img {
  width: 29px;
  height: 29px;
}
.revealed .card-center .brand-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #05101c;
}
.revealed .card-label {
  font:
    600 12px/1.8 "DM Sans",
    sans-serif;
  color: #d6ecf4;
  direction: ltr;
}
.revealed .card-bottom-star {
  color: #64dabc;
  font-size: 14px;
}
.reveal-card.is-revealing {
  animation: reveal 0.58s var(--ease) both;
}
.board-progress {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.progress-track {
  height: 4px;
  background: #1d2c44;
  border-radius: 8px;
  overflow: hidden;
}
#progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #36d5f4, #9676ff);
  border-radius: 8px;
  transition: width 0.5s var(--ease);
  box-shadow: 0 0 9px #249efb;
}
#progress-label {
  font-size: 12px;
  color: #95a8c6;
}
.collection {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}
.collection:not(:empty) {
  margin-top: 19px;
}
.collection-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font:
    500 11px "DM Sans",
    sans-serif;
  padding: 6px 9px;
  border-radius: 7px;
  background: #17293b;
  border: 1px solid #294358;
  color: #d0e4ef;
  animation: arrive 0.4s var(--ease);
}
.collection-chip img {
  width: 14px;
  height: 14px;
  filter: invert(79%) sepia(58%) saturate(454%) hue-rotate(95deg);
}
.game-status {
  text-align: center;
  font-size: 12px;
  line-height: 1.7;
  min-height: 20px;
  color: #8fe3e5;
  margin: 17px 0 0;
}
.game-actions .button {
  width: 100%;
  margin-top: 21px;
  min-height: 49px;
  font-size: 14px;
  border-radius: 12px;
}
/* Reassurance, FAQ, and footer */
.trust-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  padding-block: 38px;
  border-bottom: 1px solid #1d2d465c;
}
.trust-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border-inline-end: 1px solid #25334b;
}
.trust-item:last-child {
  border: 0;
}
.trust-item > .icon {
  width: 34px;
  height: 34px;
  filter: invert(85%) sepia(30%) saturate(686%) hue-rotate(176deg);
}
.trust-item h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 4px;
}
.trust-item p {
  font-size: 12px;
  margin: 0;
  color: #889dbb;
}
.faq-section {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 100px;
  padding-block: 76px;
}
.faq-intro h2 {
  font-size: 37px;
  line-height: 1.5;
  margin: 17px 0;
}
.faq-intro p {
  font-size: 16px;
}
.faq-intro .eyebrow {
  font-size: 10px;
  letter-spacing: 2px;
}
.faq-list details {
  border-bottom: 1px solid #24334c;
}
.faq-list summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  padding: 20px 0;
  line-height: 1.6;
}
.faq-list summary::-webkit-details-marker {
  display: none;
}
.faq-toggle {
  font:
    300 25px "DM Sans",
    sans-serif;
  color: #81bbf7;
  flex: none;
  transition: transform 0.25s;
}
.faq-list details[open] .faq-toggle {
  transform: rotate(45deg);
  color: #b698ff;
}
.faq-list details p {
  font-size: 14px;
  line-height: 1.9;
  margin: 0 0 23px;
  padding-inline-end: 24px;
  color: #95a6c1;
}
.closing-banner {
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 36px 39px;
  border: 1px solid #3e4381;
  border-radius: 22px;
  background:
    radial-gradient(ellipse at 90% 100%, #41256f66, transparent 60%),
    linear-gradient(115deg, #0b2235, #111529);
  position: relative;
  overflow: hidden;
}
.closing-crown {
  height: 66px;
  width: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 17px;
  border: 1px solid #356a8b;
  background: #14304766;
  flex-shrink: 0;
}
.closing-crown > .icon {
  width: 37px;
  height: 37px;
  filter: invert(76%) sepia(77%) saturate(1090%) hue-rotate(147deg);
}
.closing-banner .eyebrow {
  font-size: 10px;
  letter-spacing: 2px;
  color: #8eafdd;
}
.closing-banner h2 {
  font-size: 27px;
  line-height: 1.5;
  margin: 9px 0 6px;
}
.closing-banner p {
  font-size: 14px;
  margin: 0;
  color: #a6b6ce;
}
.closing-banner > .button {
  margin-inline-start: auto;
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 14px;
  gap: 12px;
  padding-inline: 20px;
}
.closing-banner > .button > .icon {
  width: 20px;
}
.site-footer {
  padding-top: 53px;
}
.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding-bottom: 30px;
}
.site-footer .brand-name {
  font-size: 31px;
}
.site-footer .brand-crown {
  width: 26px;
  height: 26px;
}
.site-footer .brand-tagline {
  display: none;
}
.footer-top p {
  font-size: 12px;
  color: #7f93b2;
  margin: 11px 0 0;
}
.footer-links {
  display: flex;
  gap: 28px;
  align-items: center;
  flex-wrap: wrap;
}
.footer-links a,
.footer-links button {
  color: #b0bfd6;
  font-size: 13px;
  padding: 10px 0;
  background: none;
  border: 0;
}
.footer-links a:hover,
.footer-links button:hover {
  color: var(--cyan);
}
.footer-bottom {
  border-top: 1px solid #1f2d435c;
  display: flex;
  justify-content: space-between;
  gap: 25px;
  padding: 22px 0;
  color: #8596b1;
  font-size: 11px;
  line-height: 1.7;
}
/* Accessible native dialogs */
dialog {
  color: var(--ink);
  background: linear-gradient(145deg, #111e34, #090f20);
  border: 1px solid #465881;
  border-radius: 23px;
  width: calc(100% - 32px);
  max-width: 510px;
  max-height: 86dvh;
  overflow: auto;
  padding: 28px;
  box-shadow: 0 0 90px #10163080;
}
dialog::backdrop {
  background: #01040dba;
  backdrop-filter: blur(9px);
}
.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.dialog-header .eyebrow {
  font-size: 11px;
}
.close-dialog {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #2b3d58;
  background: #19273b;
  color: #c8d9f5;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 25px;
}
.close-dialog:hover {
  background: #28324f;
}
dialog h2 {
  font-size: 27px;
  line-height: 1.5;
  margin-bottom: 19px;
}
#dialog-content {
  color: #a9bad3;
  font-size: 16px;
  line-height: 1.9;
}
#dialog-content p {
  color: inherit;
}
.dialog-rewards {
  display: grid;
  gap: 9px;
  margin: 20px 0;
}
.dialog-reward {
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1px solid #253a57;
  border-radius: 11px;
  padding: 9px 12px;
  background: #111e30;
  font:
    600 15px "DM Sans",
    sans-serif;
  color: #e3edfc;
}
.dialog-reward .brand-icon {
  height: 37px;
  width: 37px;
}
.dialog-reward .brand-icon img {
  width: 27px;
  height: 27px;
}
.dialog-reward small {
  margin-inline-start: auto;
  font: 12px var(--font);
  color: #87cdee;
}
.redemption-note {
  padding: 16px;
  border: 1px solid #45436b;
  border-radius: 12px;
  background: #26203942;
  font-size: 14px;
}
.redemption-note strong {
  color: #d7c4ff;
}
.redemption-note p {
  margin: 7px 0 0;
  font-size: 14px;
  line-height: 1.85;
}
.dialog-done {
  width: 100%;
  margin-top: 17px;
  min-height: 48px;
  font-size: 14px;
  border-radius: 12px;
}
.skip-link {
  position: fixed;
  top: -80px;
  inset-inline-start: 20px;
  background: var(--cyan);
  color: #021322;
  padding: 12px 20px;
  z-index: 30;
}
.skip-link:focus {
  top: 12px;
}
.noscript-note {
  background: #102641;
  padding: 20px;
  color: #d3e3fa;
  text-align: center;
  font-size: 14px;
}
html[lang="en"] .hero h1 {
  font-size: clamp(37px, 4.1vw, 60px);
  line-height: 1.14;
  font-weight: 800;
  letter-spacing: -2px;
  margin-block: 23px;
}
html[lang="en"] .hero-description {
  font-size: 16px;
  line-height: 1.8;
}
html[lang="en"] .quick-step h3 {
  font-size: 14px;
}
html[lang="en"] .steps-intro h2 {
  font-size: 23px;
  line-height: 1.3;
}
html[lang="en"] .discovery-copy h2 {
  font-size: 41px;
  line-height: 1.25;
  letter-spacing: -1.2px;
}
html[lang="en"] .faq-intro h2 {
  font-size: 35px;
  line-height: 1.3;
  letter-spacing: -1px;
}
html[lang="en"] .closing-banner h2 {
  font-size: 25px;
  line-height: 1.3;
  letter-spacing: -0.5px;
}
@keyframes levitate {
  0%,
  100% {
    transform: translateY(0) rotate(var(--tilt));
  }
  50% {
    transform: translateY(-9px) rotate(calc(var(--tilt) + 2deg));
  }
}
@keyframes reveal {
  0% {
    transform: rotateY(0);
  }
  48% {
    transform: rotateY(88deg) scale(0.97);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes arrive {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Laptop and tablet */
@media (max-width: 1200px) {
  .shell {
    width: calc(100% - 64px);
  }
  .header-inner {
    height: 95px;
    gap: 18px;
  }
  .header-inner nav {
    gap: 20px;
  }
  .header-inner nav a {
    font-size: 13px;
  }
  .header-actions {
    gap: 17px;
  }
  .brand-name {
    font-size: 33px;
  }
  .brand-crown {
    width: 29px;
    height: 29px;
  }
  .brand-tagline {
    font-size: 10px;
  }
  .header-cta {
    font-size: 12px;
    padding-inline: 16px;
    gap: 13px;
  }
  .language-switch {
    font-size: 12px;
  }
  .hero {
    min-height: 535px;
    gap: 0;
  }
  .hero-scene {
    height: 488px;
  }
  .hero h1 {
    font-size: 50px;
  }
  .hero-description {
    font-size: 16px;
  }
  .floating-service {
    width: 91px;
    height: 98px;
    border-radius: 17px;
  }
  .floating-service .brand-icon img {
    width: 40px;
    height: 40px;
  }
  .floating-service > span:last-child {
    font-size: 13px;
  }
  .scene-note {
    font-size: 12px;
  }
  .hero-cta {
    min-width: 265px;
  }
  .quick-steps {
    gap: 19px;
    padding: 24px;
  }
  .steps-intro h2 {
    font-size: 22px;
  }
  .quick-step {
    gap: 10px;
  }
  .quick-step h3 {
    font-size: 15px;
  }
  .step-icon {
    width: 34px;
    height: 34px;
  }
  .perk-grid {
    gap: 11px;
  }
  .perk-card {
    padding: 17px 13px;
  }
  .perk-card h3 {
    font-size: 16px;
  }
  .perk-card .brand-icon {
    width: 48px;
    height: 48px;
  }
  .service-category,
  .service-description {
    font-size: 12px;
  }
  .free-badge {
    font-size: 10px;
    padding-inline: 8px;
  }
  .discovery-layout {
    gap: 45px;
  }
  .discovery-copy h2 {
    font-size: 37px;
  }
  .discovery-board {
    padding: 24px;
  }
  .reveal-card {
    min-height: 179px;
  }
  .faq-section {
    gap: 65px;
  }
  .closing-banner {
    gap: 20px;
    padding: 30px;
  }
  .closing-crown {
    height: 58px;
    width: 58px;
  }
  .closing-banner h2 {
    font-size: 24px;
  }
  .closing-banner > .button {
    font-size: 13px;
  }
  html[lang="en"] .hero h1 {
    font-size: 48px;
  }
  html[lang="en"] .steps-intro h2 {
    font-size: 20px;
  }
  html[lang="en"] .quick-step h3 {
    font-size: 13px;
  }
  html[lang="en"] .discovery-copy h2 {
    font-size: 36px;
  }
  html[lang="en"] .closing-banner h2 {
    font-size: 22px;
  }
}
@media (max-width: 1000px) {
  .nav-home {
    display: none;
  }
  .header-cta .direction-arrow {
    display: none;
  }
  .header-inner nav {
    gap: 17px;
  }
  .header-actions {
    gap: 15px;
  }
  .hero h1 {
    font-size: 43px;
  }
  .hero-description {
    font-size: 15px;
  }
  .hero-cta {
    font-size: 15px;
    min-width: 250px;
  }
  .hero-scene {
    height: 457px;
  }
  .hero {
    min-height: 510px;
  }
  .hero-reassurance {
    font-size: 11px;
    gap: 13px;
  }
  .floating-service {
    width: 82px;
    height: 90px;
    gap: 3px;
  }
  .floating-service .brand-icon img {
    width: 35px;
    height: 35px;
  }
  .floating-netflix {
    left: 16%;
    top: 13%;
  }
  .floating-spotify {
    left: 45%;
    top: 5%;
  }
  .floating-gemini {
    right: 2%;
    top: 30%;
  }
  .floating-canva {
    left: 0;
    top: 42%;
  }
  .floating-chatgpt {
    right: 1%;
    top: 60%;
  }
  .note-one {
    left: 0;
    top: 0;
    font-size: 11px;
  }
  .note-two {
    font-size: 11px;
    right: 0;
    bottom: 0;
  }
  .scene-caption {
    display: none;
  }
  .quick-steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
  }
  .steps-intro {
    grid-column: 1/-1;
    border: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .steps-intro h2 {
    font-size: 24px;
    margin: 0;
  }
  .steps-intro h2 br {
    display: none;
  }
  .quick-step {
    padding-top: 0;
  }
  .perk-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
  }
  .perk-card {
    padding: 20px;
  }
  .perk-card h3 {
    font-size: 20px;
    margin-top: 15px;
  }
  .perk-card .brand-icon {
    width: 52px;
    height: 52px;
  }
  .service-category,
  .service-description {
    font-size: 13px;
  }
  .service-description {
    min-height: 23px;
    margin-bottom: 17px;
  }
  .free-badge {
    font-size: 12px;
    padding: 5px 11px;
  }
  .section {
    padding-block: 52px;
  }
  .section-heading h2 {
    font-size: 31px;
  }
  .discovery-layout {
    gap: 30px;
    grid-template-columns: 0.9fr 1.1fr;
  }
  .discovery-copy h2 {
    font-size: 33px;
  }
  .discovery-copy > p {
    font-size: 14px;
  }
  .discovery-board {
    padding: 21px;
  }
  .discovery-board h3 {
    font-size: 18px;
  }
  .reveal-cards {
    gap: 9px;
  }
  .reveal-card {
    min-height: 164px;
  }
  .card-center > span {
    font-size: 19px;
  }
  .card-label {
    font-size: 11px;
  }
  .discovery-facts {
    gap: 20px;
  }
  .discovery-facts > span {
    padding-inline-end: 20px;
    font-size: 11px;
  }
  .discovery-facts strong {
    font-size: 30px;
  }
  .faq-section {
    gap: 45px;
  }
  .faq-intro h2 {
    font-size: 33px;
  }
  .trust-strip {
    gap: 17px;
  }
  .trust-item {
    gap: 12px;
  }
  .trust-item h3 {
    font-size: 14px;
  }
  .trust-item p {
    font-size: 11px;
  }
  .trust-item > .icon {
    width: 29px;
    height: 29px;
  }
  .closing-crown {
    display: none;
  }
  .closing-banner h2 {
    font-size: 24px;
  }
  html[lang="en"] .hero h1 {
    font-size: 39px;
  }
  html[lang="en"] .hero-description {
    font-size: 14px;
  }
  html[lang="en"] .hero-cta {
    font-size: 14px;
  }
  html[lang="en"] .discovery-copy h2 {
    font-size: 31px;
  }
  html[lang="en"] .faq-intro h2 {
    font-size: 30px;
  }
  html[lang="en"] .closing-banner h2 {
    font-size: 22px;
  }
}
/* Mobile: readable content, dedicated artwork stage, and touch targets */
@media (max-width: 760px) {
  .shell {
    width: calc(100% - 40px);
  }
  .header-inner {
    height: 90px;
    gap: 16px;
  }
  .brand-name {
    font-size: 32px;
  }
  .brand-crown {
    width: 27px;
    height: 27px;
  }
  .brand-tagline {
    font-size: 10px;
  }
  .header-cta {
    display: none;
  }
  .header-inner nav {
    display: none;
    position: absolute;
    inset: 83px 20px auto;
    background: #0b172af5;
    border: 1px solid #304364;
    backdrop-filter: blur(20px);
    padding: 13px;
    border-radius: 15px;
    box-shadow: 0 20px 50px #0009;
    z-index: 30;
    gap: 0;
  }
  .header-inner nav.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .header-inner nav a {
    font-size: 15px;
    padding: 13px 16px;
    display: block;
  }
  .header-inner nav a.active:after {
    display: none;
  }
  .header-inner nav a:hover {
    background: #152541;
    border-radius: 8px;
  }
  .header-actions {
    gap: 13px;
  }
  .language-switch {
    font-size: 13px;
    gap: 7px;
  }
  .language-switch .icon {
    width: 18px;
    height: 18px;
  }
  .menu-toggle {
    display: block;
  }
  .hero {
    grid-template-columns: 1fr;
    gap: 0;
    padding-block: 25px 10px;
    min-height: unset;
  }
  .hero-copy {
    text-align: center;
    padding: 0;
  }
  .hero-badge {
    font-size: 12px;
    padding: 7px 12px;
    gap: 7px;
  }
  .hero h1 {
    font-size: 49px;
    line-height: 1.32;
    margin: 20px 0 17px;
  }
  .hero-first-line {
    white-space: normal;
  }
  .hero-description {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: none;
  }
  .hero-cta {
    min-width: 310px;
    font-size: 16px;
    min-height: 57px;
    border-radius: 16px;
  }
  .hero-reassurance {
    justify-content: center;
    font-size: 12px;
    gap: 19px;
    margin-top: 17px;
  }
  .preview-note {
    font-size: 11px;
    margin-top: 13px;
  }
  .hero-scene {
    width: min(530px, 100%);
    height: 490px;
    margin: 16px auto 0;
  }
  .floating-service {
    width: 98px;
    height: 105px;
  }
  .floating-service .brand-icon img {
    width: 43px;
    height: 43px;
  }
  .floating-service > span:last-child {
    font-size: 14px;
  }
  .floating-netflix {
    left: 17%;
    top: 9%;
  }
  .floating-spotify {
    left: 45%;
    top: 3%;
  }
  .floating-gemini {
    right: 6%;
    top: 30%;
  }
  .floating-canva {
    left: 0;
    top: 35%;
  }
  .floating-chatgpt {
    right: 4%;
    top: 58%;
  }
  .hero-art {
    height: 111%;
    bottom: -10%;
    width: 110%;
    left: -5%;
  }
  .note-one {
    left: 0;
    top: 1%;
    font-size: 11px;
  }
  .note-two {
    right: 0;
    bottom: 4%;
    font-size: 12px;
  }
  .quick-steps {
    padding: 24px;
    gap: 24px 20px;
    border-radius: 18px;
  }
  .steps-intro {
    display: block;
    text-align: center;
  }
  .steps-intro h2 {
    font-size: 26px;
    margin-bottom: 8px;
  }
  .steps-intro p {
    font-size: 14px;
  }
  .quick-step {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 11px;
  }
  .step-icon {
    height: 39px;
    width: 39px;
  }
  .step-number {
    font-size: 10px;
    margin-bottom: 5px;
  }
  .quick-step h3 {
    font-size: 16px;
    line-height: 1.5;
  }
  .quick-step p {
    font-size: 12px;
  }
  .section {
    padding-block: 45px;
  }
  .section-heading {
    gap: 20px;
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 23px;
  }
  .section-heading h2 {
    font-size: 30px;
  }
  .section-heading p {
    font-size: 15px;
  }
  .section-heading .text-link {
    font-size: 13px;
  }
  .perk-grid {
    gap: 13px;
  }
  .perk-card {
    padding: 19px 16px;
  }
  .perk-card h3 {
    font-size: 18px;
  }
  .service-category,
  .service-description {
    font-size: 12px;
  }
  .service-description {
    min-height: 42px;
    margin-bottom: 17px;
  }
  .free-badge {
    font-size: 11px;
  }
  .section-note {
    font-size: 11px;
    margin-top: 16px;
  }
  .discovery-layout {
    grid-template-columns: 1fr;
    gap: 31px;
  }
  .discovery-copy {
    text-align: center;
  }
  .discovery-copy .eyebrow {
    justify-content: center;
    font-size: 10px;
    letter-spacing: 1.1px;
  }
  .discovery-copy h2 {
    font-size: 37px;
    margin: 16px 0;
  }
  .discovery-copy > p {
    font-size: 16px;
    line-height: 1.9;
  }
  .discovery-facts {
    justify-content: center;
    gap: 27px;
    margin-top: 24px;
  }
  .discovery-facts > span {
    font-size: 12px;
    padding-inline-end: 27px;
  }
  .discovery-facts strong {
    font-size: 33px;
  }
  .discovery-copy .preview-note {
    font-size: 11px;
    margin-top: 20px;
  }
  .discovery-board {
    max-width: 510px;
    width: 100%;
    margin-inline: auto;
    padding: 25px;
  }
  .discovery-board h3 {
    font-size: 22px;
  }
  .reveal-card {
    min-height: 194px;
  }
  .card-center > span {
    font-size: 24px;
  }
  .card-label {
    font-size: 12px;
  }
  .card-center > .icon {
    width: 36px;
    height: 36px;
  }
  .reveal-cards {
    gap: 12px;
  }
  .trust-strip {
    padding-block: 29px;
    gap: 15px;
  }
  .trust-item {
    flex-direction: column;
    text-align: center;
    gap: 12px;
    padding-inline-end: 10px;
  }
  .trust-item:last-child {
    padding: 0;
  }
  .trust-item h3 {
    font-size: 14px;
  }
  .trust-item p {
    font-size: 11px;
    line-height: 1.7;
  }
  .trust-item > .icon {
    width: 29px;
    height: 29px;
  }
  .faq-section {
    grid-template-columns: 1fr;
    gap: 14px;
    padding-block: 48px;
  }
  .faq-intro h2 {
    font-size: 32px;
    line-height: 1.45;
    margin-block: 14px;
  }
  .faq-intro h2 br {
    display: none;
  }
  .faq-intro p {
    font-size: 15px;
  }
  .faq-list summary {
    font-size: 15px;
    padding-block: 18px;
  }
  .faq-list details p {
    font-size: 14px;
  }
  .closing-banner {
    padding: 29px;
    gap: 22px;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .closing-banner .eyebrow {
    justify-content: center;
  }
  .closing-banner h2 {
    font-size: 27px;
    line-height: 1.5;
  }
  .closing-banner p {
    font-size: 14px;
  }
  .closing-banner > .button {
    margin: 0;
    font-size: 15px;
    min-width: 280px;
    min-height: 53px;
  }
  .footer-top {
    align-items: flex-start;
    gap: 25px;
  }
  .footer-links {
    gap: 7px 20px;
    max-width: 240px;
    justify-content: flex-end;
  }
  .footer-links a,
  .footer-links button {
    font-size: 12px;
  }
  .footer-top p {
    font-size: 11px;
  }
  .footer-bottom {
    font-size: 11px;
    gap: 20px;
  }
  html[lang="en"] .hero h1 {
    font-size: 47px;
    line-height: 1.15;
    margin-block: 22px;
  }
  html[lang="en"] .hero-description {
    font-size: 16px;
  }
  html[lang="en"] .hero-cta {
    font-size: 16px;
  }
  html[lang="en"] .steps-intro h2 {
    font-size: 25px;
  }
  html[lang="en"] .quick-step h3 {
    font-size: 15px;
  }
  html[lang="en"] .quick-step p {
    font-size: 12px;
  }
  html[lang="en"] .discovery-copy h2 {
    font-size: 36px;
  }
  html[lang="en"] .faq-intro h2 {
    font-size: 31px;
  }
  html[lang="en"] .closing-banner h2 {
    font-size: 27px;
  }
}
@media (max-width: 480px) {
  .shell {
    width: calc(100% - 36px);
  }
  .header-inner {
    height: 83px;
    gap: 10px;
  }
  .brand-name {
    font-size: 29px;
    gap: 5px;
  }
  .brand-crown {
    width: 25px;
    height: 25px;
  }
  .brand-tagline {
    font-size: 9px;
  }
  .header-actions {
    gap: 6px;
  }
  .language-switch {
    font-size: 12px;
    gap: 6px;
  }
  .language-switch .icon {
    width: 17px;
    height: 17px;
  }
  .menu-toggle {
    padding: 11px;
    width: 41px;
  }
  .hero {
    padding-top: 26px;
  }
  .hero h1 {
    font-size: 40px;
    margin-top: 19px;
    line-height: 1.4;
  }
  .hero-badge {
    font-size: 11px;
  }
  .hero-description {
    font-size: 15px;
    line-height: 1.9;
    margin-bottom: 24px;
  }
  .desktop-break {
    display: none;
  }
  .hero-cta {
    min-width: 0;
    width: 100%;
    min-height: 57px;
    font-size: 16px;
    gap: 17px;
  }
  .hero-reassurance {
    font-size: 11px;
    gap: 12px;
    margin-top: 15px;
  }
  .hero-reassurance .icon {
    width: 12px;
    height: 12px;
  }
  .preview-note {
    font-size: 10px;
    margin-top: 12px;
  }
  .hero-scene {
    height: 379px;
    margin-top: 23px;
  }
  .floating-service {
    width: 77px;
    height: 85px;
    border-radius: 15px;
    gap: 5px;
  }
  .floating-service .brand-icon {
    width: 34px;
    height: 34px;
  }
  .floating-service .brand-icon img {
    width: 34px;
    height: 34px;
  }
  .floating-service > span:last-child {
    font-size: 12px;
  }
  .floating-netflix {
    left: 14%;
    top: 9%;
  }
  .floating-spotify {
    left: 45%;
    top: 2%;
  }
  .floating-gemini {
    right: 0;
    top: 31%;
  }
  .floating-canva {
    left: 0;
    top: 40%;
  }
  .floating-chatgpt {
    right: 1%;
    top: 59%;
  }
  .note-one {
    font-size: 10px;
    left: -1%;
    top: 0;
    max-width: 75px;
  }
  .note-one span {
    font-size: 25px;
  }
  .note-two {
    font-size: 10px;
    right: 1%;
    bottom: 2%;
    max-width: 94px;
  }
  .hero-art {
    width: 114%;
    left: -7%;
    height: 116%;
    bottom: -12%;
  }
  .quick-steps {
    padding: 22px 15px;
    gap: 22px 12px;
  }
  .steps-intro h2 {
    font-size: 24px;
  }
  .steps-intro p {
    font-size: 13px;
  }
  .quick-step {
    gap: 10px;
  }
  .quick-step h3 {
    font-size: 14px;
    line-height: 1.6;
  }
  .quick-step p {
    font-size: 12px;
    line-height: 1.8;
  }
  .step-icon {
    height: 35px;
    width: 35px;
  }
  .step-icon .icon {
    width: 19px;
    height: 19px;
  }
  .section {
    padding-block: 40px;
  }
  .section-heading h2 {
    font-size: 28px;
    line-height: 1.5;
  }
  .section-heading .eyebrow {
    font-size: 10px;
  }
  .section-heading p {
    font-size: 15px;
    line-height: 1.8;
  }
  .section-heading {
    gap: 15px;
  }
  .perk-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .perk-card {
    padding: 17px 15px;
    border-radius: 15px;
  }
  .perk-card .brand-icon {
    width: 47px;
    height: 47px;
    border-radius: 11px;
  }
  .perk-card .brand-icon img {
    width: 31px;
    height: 31px;
  }
  .perk-card h3 {
    font-size: 19px;
    margin-top: 16px;
  }
  .service-category {
    font-size: 12px;
  }
  .service-description {
    font-size: 12px;
    min-height: 42px;
  }
  .free-badge {
    font-size: 11px;
  }
  .section-note {
    font-size: 11px;
  }
  .discovery-copy .eyebrow {
    font-size: 9px;
    letter-spacing: 1px;
  }
  .discovery-copy h2 {
    font-size: 32px;
  }
  .discovery-copy > p {
    font-size: 15px;
  }
  .discovery-board {
    padding: 22px 15px;
    border-radius: 19px;
  }
  .discovery-board h3 {
    font-size: 20px;
    margin-top: 18px;
  }
  .board-hint {
    font-size: 12px;
  }
  .board-topline > .eyebrow {
    font-size: 10px;
  }
  .attempt-counter {
    font-size: 10px;
    padding: 4px 9px;
  }
  .reveal-cards {
    gap: 8px;
    margin-top: 23px;
  }
  .reveal-card {
    min-height: 164px;
    border-radius: 12px;
    padding-inline: 6px;
  }
  .card-index {
    font-size: 9px;
    inset-inline-start: 13px;
  }
  .card-center {
    margin-top: 15px;
  }
  .card-center > .icon {
    width: 29px;
    height: 29px;
  }
  .card-center > span {
    font-size: 21px;
  }
  .card-label {
    font-size: 11px;
    line-height: 1.5;
    max-width: 85px;
  }
  .card-bottom-star {
    font-size: 15px;
  }
  .revealed .card-label {
    font-size: 11px;
  }
  .revealed .card-center .brand-icon {
    width: 29px;
    height: 29px;
  }
  .revealed .card-center img {
    width: 24px;
    height: 24px;
  }
  .revealed .card-center {
    gap: 1px;
  }
  .collection-chip {
    font-size: 10px;
    padding: 6px 7px;
  }
  .game-status,
  #progress-label {
    font-size: 12px;
  }
  .game-actions .button {
    font-size: 13px;
    gap: 11px;
    padding-inline: 13px;
  }
  .trust-strip {
    gap: 10px;
  }
  .trust-item {
    padding-inline-end: 8px;
  }
  .trust-item h3 {
    font-size: 13px;
    line-height: 1.6;
  }
  .trust-item p {
    font-size: 11px;
    line-height: 1.8;
  }
  .trust-item > .icon {
    width: 26px;
    height: 26px;
  }
  .faq-intro h2 {
    font-size: 29px;
  }
  .faq-intro p {
    font-size: 15px;
  }
  .faq-list summary {
    font-size: 15px;
    line-height: 1.7;
    gap: 20px;
  }
  .faq-list details p {
    font-size: 14px;
    line-height: 1.9;
    padding-inline-end: 18px;
  }
  .closing-banner {
    padding: 26px 20px;
  }
  .closing-banner h2 {
    font-size: 25px;
  }
  .closing-banner .eyebrow {
    font-size: 10px;
  }
  .closing-banner p {
    font-size: 14px;
  }
  .closing-banner > .button {
    min-width: 0;
    width: 100%;
    font-size: 14px;
    gap: 12px;
  }
  .footer-top {
    flex-direction: column;
    gap: 20px;
  }
  .footer-links {
    justify-content: space-between;
    max-width: none;
    width: 100%;
    gap: 10px;
  }
  .footer-links a,
  .footer-links button {
    font-size: 12px;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 9px;
    font-size: 11px;
  }
  .site-footer {
    padding-top: 40px;
  }
  .footer-top {
    padding-bottom: 22px;
  }
  dialog {
    padding: 22px;
    max-height: 88dvh;
    border-radius: 19px;
  }
  dialog h2 {
    font-size: 24px;
  }
  #dialog-content {
    font-size: 14px;
  }
  .dialog-reward {
    font-size: 14px;
  }
  .redemption-note {
    padding: 13px;
  }
  .redemption-note p {
    font-size: 13px;
  }
  .dialog-done {
    font-size: 14px;
  }
  html[lang="en"] .hero h1 {
    font-size: 36px;
    line-height: 1.2;
    letter-spacing: -1.4px;
  }
  html[lang="en"] .hero-description {
    font-size: 15px;
    line-height: 1.8;
  }
  html[lang="en"] .hero-cta {
    font-size: 15px;
  }
  html[lang="en"] .steps-intro h2 {
    font-size: 23px;
  }
  html[lang="en"] .quick-step h3 {
    font-size: 13px;
  }
  html[lang="en"] .quick-step p {
    font-size: 12px;
  }
  html[lang="en"] .discovery-copy h2 {
    font-size: 31px;
  }
  html[lang="en"] .discovery-copy > p {
    font-size: 15px;
  }
  html[lang="en"] .faq-intro h2 {
    font-size: 28px;
  }
  html[lang="en"] .closing-banner h2 {
    font-size: 25px;
  }
}
@media (max-width: 350px) {
  .shell {
    width: calc(100% - 28px);
  }
  .brand-name {
    font-size: 26px;
  }
  .brand-crown {
    width: 23px;
    height: 23px;
  }
  .brand-tagline {
    font-size: 8px;
  }
  .language-switch {
    font-size: 11px;
  }
  .header-actions {
    gap: 1px;
  }
  .hero h1 {
    font-size: 35px;
  }
  .hero-cta {
    font-size: 14px;
    gap: 12px;
  }
  .hero-description {
    font-size: 14px;
  }
  .hero-scene {
    height: 336px;
  }
  .floating-service {
    width: 69px;
    height: 75px;
  }
  .floating-service .brand-icon img {
    width: 30px;
    height: 30px;
  }
  .floating-service > span:last-child {
    font-size: 11px;
  }
  .note-one,
  .note-two {
    font-size: 9px;
  }
  .quick-step h3 {
    font-size: 13px;
  }
  .quick-step p {
    font-size: 11px;
  }
  .quick-steps {
    gap: 21px 9px;
    padding-inline: 12px;
  }
  .perk-card {
    padding-inline: 13px;
  }
  .discovery-copy h2 {
    font-size: 28px;
  }
  .discovery-board {
    padding-inline: 12px;
  }
  .reveal-cards {
    gap: 7px;
  }
  .reveal-card {
    min-height: 151px;
  }
  .card-center > span {
    font-size: 19px;
  }
  .card-label {
    font-size: 10px;
  }
  .revealed .card-label {
    font-size: 10px;
  }
  .revealed .card-center img {
    width: 20px;
    height: 20px;
  }
  .revealed .card-center .brand-icon {
    width: 24px;
    height: 24px;
  }
  .footer-links a,
  .footer-links button {
    font-size: 11px;
  }
  html[lang="en"] .hero h1 {
    font-size: 31px;
  }
  html[lang="en"] .hero-cta {
    font-size: 14px;
  }
  html[lang="en"] .discovery-copy h2 {
    font-size: 27px;
  }
}
.header-gift {
  display: none;
}
.hero-art {
  mix-blend-mode: screen;
}
@media (max-width: 760px) {
  .hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-bottom: 27px;
  }
  .hero-copy {
    display: contents;
  }
  .hero-badge {
    order: 0;
    align-self: center;
  }
  .hero h1 {
    order: 1;
    text-align: center;
  }
  .hero-description {
    order: 2;
    text-align: center;
    margin-bottom: 0;
  }
  .hero-scene {
    order: 3;
  }
  .hero-cta {
    order: 4;
    align-self: center;
    margin-top: 5px;
  }
  .hero-reassurance {
    order: 5;
  }
  .hero-copy > .preview-note {
    order: 6;
    text-align: center;
  }
  .header-cta {
    display: inline-flex;
    padding: 10px;
    width: 40px;
    min-height: 40px;
    border-radius: 12px;
  }
  .header-cta > span,
  .header-cta > .direction-arrow {
    display: none;
  }
  .header-cta > .header-gift {
    display: block;
    width: 19px;
    height: 19px;
  }
  .header-actions {
    gap: 9px;
  }
  .hero-reassurance {
    flex-wrap: wrap;
  }
}
@media (max-width: 480px) {
  .header-actions {
    gap: 4px;
  }
  .brand-name {
    font-size: 27px;
  }
  .brand-crown {
    width: 23px;
    height: 23px;
  }
  .language-switch {
    font-size: 11px;
    gap: 4px;
  }
  .language-switch .icon {
    width: 15px;
    height: 15px;
  }
  .header-cta {
    width: 35px;
    min-height: 36px;
    padding: 8px;
    border-radius: 10px;
  }
  .menu-toggle {
    width: 34px;
    padding: 8px;
  }
  .hero-scene {
    height: 367px;
    margin-top: 18px;
  }
  .hero-cta {
    margin-top: 5px;
  }
  .hero-copy > .preview-note {
    margin-top: 12px;
  }
}
@media (max-width: 350px) {
  .brand-name {
    font-size: 24px;
  }
  .brand-crown {
    width: 21px;
    height: 21px;
  }
  .language-switch .icon {
    display: none;
  }
  .header-actions {
    gap: 3px;
  }
  .hero-scene {
    height: 320px;
  }
  .hero-cta {
    font-size: 14px;
  }
  .hero-reassurance {
    font-size: 10px;
    gap: 9px;
  }
}
@media (max-width: 760px) {
  .header-cta {
    width: 42px;
    min-height: 44px;
  }
  .menu-toggle {
    width: 40px;
    height: 44px;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
}
/* One gift at a time; the visitor controls when the next one appears. */
.mobile-copy,
.perk-carousel-controls {
  display: none;
}
.reveal-stage {
  position: relative;
  display: flow-root;
}
.reveal-cards {
  transition:
    opacity 0.3s,
    filter 0.3s,
    transform 0.3s;
}
.presenting-rewards .reveal-cards {
  opacity: 0;
  filter: blur(3px);
  transform: scale(0.97);
}
.reward-spotlight {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 4;
  pointer-events: none;
}
.reward-spotlight[hidden] {
  display: none;
}
.reward-focus {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--reward-color), transparent 92%),
    transparent 67%
  );
}
.reward-sequence {
  font-size: 11px;
  color: #abc2df;
  letter-spacing: 1px;
}
.reward-emblem {
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--reward-color), transparent 40%);
  border-radius: 23px;
  background: #050d1cee;
  box-shadow:
    0 0 33px color-mix(in srgb, var(--reward-color), transparent 82%),
    inset 0 0 18px color-mix(in srgb, var(--reward-color), transparent 94%);
}
.reward-emblem .brand-icon {
  width: 60px;
  height: 60px;
}
.reward-emblem .brand-icon img {
  width: 48px;
  height: 48px;
}
.reward-focus > strong {
  font:
    700 25px "DM Sans",
    sans-serif;
  color: white;
  line-height: 1.3;
}
.reward-duration {
  font-size: 12px;
  color: #adddff;
}
.collection-chip {
  animation: perk-collected 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes perk-collected {
  0% {
    opacity: 0;
    transform: translateY(-10px) scale(0.86);
    box-shadow: 0 0 16px #5af0ff77;
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    box-shadow: none;
  }
}
/* Compact mobile copy and progressive disclosure; desktop content stays intact. */
@media (max-width: 760px) {
  .desktop-copy {
    display: none;
  }
  .mobile-copy {
    display: inline;
  }
  .hero-description {
    line-height: 1.85;
  }
  .hero-description br {
    display: block;
  }
  .scene-note,
  .steps-intro p,
  .quick-step p,
  .quick-step .step-number,
  .service-description,
  .discovery-facts,
  .board-hint,
  .trust-item p,
  .faq-intro > p,
  .closing-banner p,
  .footer-top > div > p {
    display: none;
  }
  .perks-section .section-heading p,
  .discovery-copy > .eyebrow,
  .faq-intro > .eyebrow,
  .closing-banner .eyebrow {
    display: none;
  }
  .hero-scene {
    margin-top: 5px;
  }
  .quick-steps {
    padding: 20px 16px;
    gap: 18px 14px;
  }
  .steps-intro h2 {
    font-size: 23px;
    margin-bottom: 0;
  }
  .quick-step {
    gap: 9px;
  }
  .quick-step h3 {
    margin: 0;
    font-size: 14px;
  }
  .section {
    padding-block: 33px;
  }
  .section-heading {
    gap: 12px;
    margin-bottom: 21px;
  }
  .section-heading h2 {
    margin-bottom: 0;
    font-size: 28px;
  }
  .perk-grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 2px;
    padding: 5px 2px 9px;
    scrollbar-width: none;
  }
  .perk-grid::-webkit-scrollbar {
    display: none;
  }
  .perk-card {
    flex: 0 0 calc((100% - 20px) / 2.15);
    min-width: 150px;
    scroll-snap-align: start;
    margin: 0;
    padding: 16px;
  }
  .perk-card h3 {
    font-size: 18px;
    margin-top: 13px;
  }
  .service-category {
    margin-bottom: 12px;
  }
  .perk-spark {
    display: none;
  }
  .section-note {
    font-size: 11px;
    margin-top: 8px;
  }
  .perk-carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 9px;
    font:
      11px "DM Sans",
      sans-serif;
    color: #91a6c7;
  }
  .perk-carousel-controls button {
    display: grid;
    place-items: center;
    background: #0c192c;
    border: 1px solid #314664;
    border-radius: 50%;
    height: 36px;
    width: 36px;
    padding: 8px;
    color: white;
  }
  .perk-carousel-controls .icon {
    width: 17px;
    height: 17px;
  }
  .perk-carousel-controls button:disabled {
    opacity: 0.3;
    cursor: default;
  }
  .carousel-prev .direction-arrow {
    transform: rotate(180deg);
  }
  :root[dir="rtl"] .carousel-prev .direction-arrow {
    transform: none;
  }
  .discovery-layout {
    gap: 20px;
  }
  .discovery-copy h2 {
    margin: 0 0 12px;
    font-size: 31px;
  }
  .discovery-copy > p {
    font-size: 15px;
    line-height: 1.8;
  }
  .discovery-copy .preview-note {
    margin-top: 10px;
  }
  .discovery-board {
    padding-block: 19px;
  }
  .discovery-board h3 {
    margin-top: 17px;
  }
  .reveal-cards {
    margin-block: 21px 17px;
  }
  .trust-strip {
    padding-block: 24px;
  }
  .trust-item {
    gap: 10px;
  }
  .trust-item h3 {
    margin: 0;
    font-size: 13px;
  }
  .faq-section {
    gap: 5px;
  }
  .faq-intro h2 {
    font-size: 28px;
    margin: 0 0 14px;
  }
  .faq-list summary {
    padding-block: 16px;
  }
  .closing-banner {
    padding: 24px 21px;
    gap: 19px;
  }
  .closing-banner h2 {
    margin: 0;
    font-size: 24px;
  }
  .site-footer {
    padding-top: 31px;
  }
  .footer-top {
    padding-bottom: 18px;
  }
  .game-status {
    font-size: 11px;
    line-height: 1.65;
  }
  .reward-focus {
    gap: 7px;
  }
  .reward-emblem {
    height: 67px;
    width: 67px;
    border-radius: 20px;
  }
  .reward-emblem .brand-icon img {
    width: 42px;
    height: 42px;
  }
  .reward-focus > strong {
    font-size: 22px;
  }
}
@media (max-width: 480px) {
  .perk-card {
    flex-basis: calc((100% - 20px) / 2.1);
    min-width: 145px;
  }
  .hero-scene {
    height: 341px;
  }
  .hero-copy > .preview-note {
    font-size: 11px;
  }
  .discovery-copy h2 {
    font-size: 29px;
  }
  .quick-step h3 {
    font-size: 13px;
  }
  .steps-intro h2 {
    font-size: 22px;
  }
  .hero-description {
    font-size: 15px;
  }
  .reward-sequence {
    font-size: 10px;
  }
}
@media (max-width: 350px) {
  .hero-scene {
    height: 304px;
  }
  .perk-card {
    min-width: 132px;
    padding: 14px;
  }
  .hero-description {
    font-size: 14px;
  }
  .steps-intro h2 {
    font-size: 20px;
  }
  .discovery-copy h2 {
    font-size: 27px;
  }
  .reward-emblem {
    height: 58px;
    width: 58px;
  }
  .reward-emblem .brand-icon img {
    width: 36px;
    height: 36px;
  }
  .reward-focus > strong {
    font-size: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
}
/* Branded reward moments and unmistakable tap targets. */
.perk-kind { display:block; margin-top:8px; font-size:10px; color:#a2b3ce; }
.board-topline { gap:10px; flex-wrap:wrap; }
.sound-toggle { display:flex; align-items:center; justify-content:center; gap:6px; min-height:40px; padding:7px 10px; border:1px solid #47607e; border-radius:20px; background:#0b1729; color:#ccdef5; font:inherit; font-size:11px; cursor:pointer; margin-inline-start:auto; }
.sound-toggle[aria-pressed="false"] { color:#94a4ba; }
.board-hint { display:block; max-width:100%; color:#b4c6e0; }
.reveal-stage { min-height:230px; display:grid; align-items:center; }
.presenting-rewards .reveal-stage { min-height:490px; }
.reveal-cards { width:100%; }
.reveal-card:not(.revealed) .card-label { display:block; border:1px solid #78d9ff70; border-radius:9px; background:#299bd62a; padding:7px 10px; color:#eefbff; font-weight:700; }
.reveal-card:not(:disabled) { cursor:pointer; }
.reveal-card.suggested-card { border-color:#73e6ff; box-shadow:0 0 0 2px #55d6ff1c,0 0 25px #29a6dd24; animation:inviting-card 3s ease-in-out 3; }
.reveal-card:active:not(:disabled) { transform:translateY(-2px) scale(.97); }
.reveal-card.revealed .card-center { flex-wrap:wrap; }
.reveal-card.revealed .card-label { font-size:11px; }
.game-actions[hidden] { display:none; }
.game-actions > .button { width:100%; justify-content:center; min-height:52px; }
.presenting-rewards { border-color:color-mix(in srgb,var(--reward-color),#233347 55%); background:radial-gradient(ellipse at 50% 35%,color-mix(in srgb,var(--reward-color),transparent 90%),transparent 65%),#0a1323; }
.presenting-rewards > h3,.presenting-rewards > .board-hint,.presenting-rewards > .game-status { display:none; }
.hero-first-line { white-space:normal; text-wrap:balance; }
.discovery-board { transition:border-color .6s,box-shadow .6s; }
.reward-spotlight { pointer-events:auto; }
.reward-focus { position:relative; isolation:isolate; overflow:hidden; min-height:380px; padding:15px 10px; gap:7px; border-radius:20px; text-align:center; background:radial-gradient(ellipse at 50% 32%,color-mix(in srgb,var(--reward-color),transparent 84%),transparent 64%); }
.reward-emblem { position:relative; flex-shrink:0; width:86px; height:86px; border-radius:25px; margin:3px 0 7px; box-shadow:0 0 55px color-mix(in srgb,var(--reward-color),transparent 77%),inset 0 1px 0 #ffffff26; }
.reward-emblem:before { content:""; position:absolute; inset:-13px; border:1px solid color-mix(in srgb,var(--reward-color),transparent 77%); border-radius:34px; animation:reward-halo 1.8s ease-out both; pointer-events:none; }
.reward-emblem .brand-icon { width:65px; height:65px; }
.reward-emblem .brand-icon img { width:52px; height:52px; }
.reward-theme-capcut .reward-emblem { background:#f5f5f5; }
.reward-theme-capcut .reward-emblem .brand-icon { background:transparent; }
.reward-focus > strong { font-size:30px; letter-spacing:-.6px; line-height:1.15; }
.reward-congrats { font-size:13px; color:var(--reward-color); font-weight:600; }
.reward-sequence { color:#adbed4; font-size:10px; letter-spacing:.4px; }
.reward-benefit { font-size:13px; color:#ccd8e8; margin:0; line-height:1.6; text-wrap:balance; }
.reward-duration { display:flex; align-items:baseline; justify-content:center; gap:6px; color:#eaf2ff; font-size:14px; margin:3px 0; }
.reward-duration b { font:700 32px/1.2 "DM Sans",sans-serif; color:var(--reward-color); }
.reward-duration > span { font-size:11px; border-inline-start:1px solid #ffffff30; padding-inline-start:8px; color:#b9c9dc; }
.reward-saved { display:flex; align-items:center; gap:5px; color:#aabed3; font-size:10px; }
.reward-saved .icon { height:12px; width:12px; filter:invert(80%); }
.reward-continue { width:min(100%,310px); min-height:48px; justify-content:center; border:1px solid color-mix(in srgb,var(--reward-color),white 25%); background:var(--reward-color); color:#031219; font-size:14px; box-shadow:0 5px 26px color-mix(in srgb,var(--reward-color),transparent 84%); margin-top:9px; }
.reward-continue .icon { filter:none; width:20px; height:20px; }
.reward-continue:hover { background:color-mix(in srgb,var(--reward-color),white 15%); transform:translateY(-2px); }
.reward-continue:disabled { opacity:.6; cursor:default; }
.reward-followup { font-size:10px; line-height:1.5; color:#9cb1ca; max-width:100%; text-wrap:balance; }
.reward-particles { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:-1; }
.reward-particles i { position:absolute; top:33%; left:50%; width:4px; height:4px; background:var(--reward-color); border-radius:1px; opacity:0; transform:rotate(calc(var(--n) * 30deg)) translateY(-48px); animation:reward-particle 1.8s calc(var(--n) * 35ms) ease-out both; }
.collection-chip { border-color:color-mix(in srgb,var(--reward-color),transparent 65%); background:color-mix(in srgb,var(--reward-color),#081325 94%); gap:7px; padding:8px 10px; }
.collection-chip > .brand-icon { width:25px; height:25px; border-radius:6px; background:transparent; }
.collection-chip > .brand-icon img { width:20px; height:20px; }
.collection-chip > span:not(.brand-icon) { display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.collection-chip small { color:#a5b6cd; font-size:9px; font-weight:400; }
.collection-chip > .icon { width:12px; height:12px; margin-inline-start:2px; }
.collection-finished .progress-track { box-shadow:0 0 15px #59dfca2b; }
@keyframes inviting-card { 50% { box-shadow:0 0 0 3px #55d6ff2b,0 0 28px #29a6dd40; } }
@keyframes reward-halo { from { opacity:0; transform:scale(.8); } 30% { opacity:1; } to { opacity:.5; transform:scale(1.14); } }
@keyframes reward-particle { 15% { opacity:.65; } to { opacity:0; transform:rotate(calc(var(--n) * 30deg)) translateY(-155px) rotate(80deg); } }
@media (max-width:760px) {
  .board-topline { flex-wrap:nowrap; gap:8px; }
  .board-hint { display:block; font-size:11px; margin-top:5px; line-height:1.6; }
  .reveal-stage { min-height:215px; }
  .presenting-rewards .reveal-stage { min-height:440px; }
  .reward-focus { min-height:440px; padding:8px 4px; gap:5px; }
  .reward-emblem { width:64px; height:64px; border-radius:20px; margin:2px 0 4px; }
  .reward-emblem .brand-icon { width:54px; height:54px; }
  .reward-emblem .brand-icon img { width:43px; height:43px; }
  .reward-focus > strong { font-size:27px; }
  .reward-benefit { font-size:12px; }
  .reward-congrats { font-size:12px; }
  .reward-duration b { font-size:29px; }
  .reward-continue { min-height:48px; font-size:13px; }
  .reveal-card:not(.revealed) .card-label { font-size:10px; padding:6px 4px; width:100%; }
  .reveal-card { min-height:170px; padding:12px 7px; }
  .revealed .card-label { font-size:10px; }
  .collection-chip { padding:7px 8px; font-size:10px; }
  .collection-chip > .brand-icon { width:21px; height:21px; }
  .collection-chip > .brand-icon img { width:18px; height:18px; }
  .perk-kind { margin-top:5px; font-size:9px; }
  .sound-toggle { font-size:10px; padding:6px 9px; min-height:40px; }
}
@media (prefers-reduced-motion:reduce) { .reward-particles,.reward-emblem:before { display:none; } }
/* Account handoff and the future verification step. */
.account-note { background:linear-gradient(130deg,#12303966,#17224088); border-color:#386377; }
.account-note > strong { color:#b2edeb; }
.account-benefits { display:flex; flex-wrap:wrap; gap:8px 12px; margin-top:15px; }
.account-benefits > span { display:flex; align-items:center; gap:5px; color:#b9cfe5; font-size:10px; }
.account-benefits .icon { width:15px; height:15px; filter:invert(76%) sepia(18%) saturate(685%) hue-rotate(141deg); }
.dialog-done[hidden] { display:none; }
.claim-dialog { max-width:500px; }
.claim-dialog > h2 { font-size:23px; text-align:center; margin-block:15px 5px; text-wrap:balance; }
.claim-loading,.verification-panel { display:flex; flex-direction:column; align-items:center; text-align:center; padding:23px 0 5px; animation:claim-entrance .38s ease-out both; }
.claim-loading { min-height:320px; justify-content:center; }
.claim-symbol { width:76px; height:76px; position:relative; display:grid; place-items:center; background:linear-gradient(135deg,#153d52,#24274c); border:1px solid #66ddec70; border-radius:24px; box-shadow:0 0 35px #42cdd81c; margin-bottom:20px; }
.claim-symbol > .icon { height:35px; width:35px; filter:invert(86%) sepia(22%) saturate(1171%) hue-rotate(139deg); }
.claim-tag { color:#7bdce3; font-size:10px; letter-spacing:.6px; }
.claim-loading h3,.verification-panel h3 { font-size:21px; line-height:1.6; color:#ecf6ff; margin:7px 0 8px; text-wrap:balance; }
#dialog-content .claim-description { max-width:350px; font-size:13px; line-height:1.8; color:#a9bcd6; margin:0; text-wrap:balance; }
.preparing-orbit { position:absolute; inset:-7px; border:1px solid #415976; border-top:2px solid #79e6fa; border-radius:29px; animation:claim-orbit 2.2s linear infinite; }
.claim-loading-track { width:150px; height:3px; overflow:hidden; background:#23324b; border-radius:5px; margin-top:25px; }
.claim-loading-track > span { display:block; width:55%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#49dceb,#9379ff); animation:claim-loading 1.4s ease-in-out infinite; }
.claim-loading-note { font-size:11px; color:#839bb8; margin-top:14px; }
.verification-task { display:flex; align-items:center; text-align:start; gap:12px; width:100%; margin:23px 0 17px; padding:16px; background:#0b1729; border:1px solid #34506b; border-radius:14px; }
.verification-task > div { flex:1; min-width:0; }
.verification-task strong { display:block; color:#dce9fc; font-size:13px; font-weight:600; }
.verification-task small { display:block; font-size:11px; color:#93aac8; line-height:1.65; margin-top:4px; }
.verification-task > .icon { width:19px; height:19px; filter:invert(75%); flex-shrink:0; }
.verification-status { width:12px; height:12px; border:1px solid #879fc3; border-radius:50%; background:#182640; flex-shrink:0; }
#verification-action { width:100%; }
.verification-cta { width:100%; justify-content:center; min-height:49px; font-size:14px; }
.verification-cta:disabled { background:#23324b; border-color:#3d516b; color:#bccce1; box-shadow:none; cursor:not-allowed; opacity:1; transform:none; }
.verification-availability { font-size:11px; line-height:1.7; max-width:350px; margin:11px 0 6px; color:#a6b8d0; text-wrap:balance; }
.claim-back { min-height:44px; background:transparent; border:none; color:#97c9ed; padding:10px 18px; font:inherit; font-size:12px; cursor:pointer; text-decoration:underline; text-underline-offset:4px; }
.claim-back:hover { color:#d8f4ff; }
@keyframes claim-orbit { to { transform:rotate(360deg); } }
@keyframes claim-loading { from { transform:translateX(-100%); } to { transform:translateX(280%); } }
@keyframes claim-entrance { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:760px) {
  .account-note p { font-size:12px; line-height:1.8; }
  .account-benefits { gap:8px 10px; }
  .account-benefits > span { font-size:9px; }
  .claim-dialog > h2 { font-size:20px; }
  .claim-loading,.verification-panel { padding-top:19px; }
  .claim-loading h3,.verification-panel h3 { font-size:19px; }
  .claim-symbol { width:66px; height:66px; margin-bottom:18px; border-radius:21px; }
  .claim-symbol > .icon { width:30px; height:30px; }
  .verification-task { padding:13px 11px; gap:9px; }
  .verification-task strong { font-size:12px; }
  .verification-task small { font-size:10px; }
}
/* External verification remains inside the existing native dialog. */
.verification-frame-dialog[open] {
  display:flex;
  flex-direction:column;
  width:calc(100% - 32px);
  max-width:920px;
  height:min(88dvh,820px);
  max-height:88dvh;
  padding:20px;
  overflow:hidden;
}
.verification-frame-dialog .dialog-header { flex-shrink:0; margin-bottom:4px; }
.verification-frame-dialog > h2 { flex-shrink:0; margin:0 0 10px; font-size:21px; }
.verification-frame-dialog #dialog-content { flex:1; display:flex; min-height:0; }
.verification-embed { flex:1; display:flex; flex-direction:column; min-width:0; min-height:0; }
.verification-frame-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:10px; flex-shrink:0; }
.verification-frame-toolbar > span { font-size:12px; line-height:1.6; color:#a9bcd6; }
.verification-frame-back,.verification-frame-retry { min-height:44px; border:1px solid #39536f; border-radius:10px; padding:7px 15px; background:#142239; color:#d2e9fb; font:inherit; font-size:12px; cursor:pointer; white-space:nowrap; }
.verification-frame-back:hover,.verification-frame-retry:hover { background:#243652; border-color:#6a9bbe; }
.verification-frame-shell { flex:1; min-height:0; position:relative; border:1px solid #456381; border-radius:12px; overflow:hidden; background:#fff; }
.verification-frame { position:absolute; inset:0; width:100%; height:100%; border:0; background:#fff; }
#dialog-content .verification-frame-loading { position:absolute; top:50%; left:0; right:0; margin:0; text-align:center; color:#34455b; font-size:13px; }
.verification-frame-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:10px; flex-shrink:0; }
.verification-frame-footer p { margin:0; font-size:11px; line-height:1.6; }
.verification-frame-retry { font-size:11px; padding-inline:12px; }
@media(max-width:760px) {
  .verification-frame-dialog[open] { width:calc(100% - 16px); height:92dvh; max-height:92dvh; padding:13px; border-radius:17px; }
  .verification-frame-dialog > h2 { font-size:19px; margin-bottom:7px; }
  .verification-frame-toolbar { gap:10px; margin-bottom:8px; }
  .verification-frame-toolbar > span { font-size:11px; }
  .verification-frame-back { padding-inline:12px; }
  .verification-frame-footer { gap:8px; padding-top:8px; }
  .verification-frame-footer p { font-size:10px; }
}