/* ===================== Variables ===================== */
:root {
  --bg: #08080a;
  --bg-elevated: #121214;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --text-primary: #ffffff;
  --text-secondary: #b8b8c2;
  --text-muted: #7b7b87;

  --orange-500: #ff9a1f;
  --orange-400: #ffb648;
  --orange-600: #e8780a;
  --orange-glow: rgba(255, 154, 31, 0.45);

  --glass-bg: rgba(19, 19, 23, 0.68);
  --glass-border: rgba(255, 255, 255, 0.16);

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  --container-w: 1200px;
  /* The card drives the whole stage: everything under/around it (platform,
     notification spacing) scales from this one width. */
  --card-w: clamp(520px, 44vw, 640px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ===================== Reset ===================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
}

svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.container {
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 24px;
}

/* ===================== Header ===================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(8, 8, 10, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
}

.header-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 18px 24px;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--orange-400), var(--orange-600));
  box-shadow: 0 0 16px var(--orange-glow);
  display: inline-block;
}

.brand-mark.small {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  margin: 0 auto 10px;
}

.brand-name {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

/* Site logo (assets/config/brand-config.js -> siteLogo). Hidden until it has
   actually loaded; once it does, it replaces the built-in mark and name. */
.brand-logo-img {
  display: none;
  height: 34px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
}

.brand-logo.logo-ready .brand-logo-img {
  display: block;
}

.brand-logo.logo-ready .brand-mark,
.brand-logo.logo-ready .brand-name {
  display: none;
}

/* ===================== Hero ===================== */
/* The top padding is the gap between the header line and the badge. The logo's
   distance to the badge is that plus the header's own 18px bottom padding. */
.hero {
  position: relative;
  padding: 20px 0 16px;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Rim-lit arcs of two huge dark discs anchored to the hero's lower corners.
   The SVG viewBox is cropped to just the visible slice, so 1 unit = 1px and
   the geometry stays crisp; the mask fades them out before the section edge
   so no hard clip line shows. The right arc is a mirrored, larger disc for an
   asymmetric, less mechanical composition. */
.hero-arc {
  position: absolute;
  bottom: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
}

.arc-left {
  left: 0;
  width: 560px;
  height: 660px;
}

.arc-right {
  right: 0;
  width: 640px;
  height: 700px;
  transform: scaleX(-1);
}

.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: rgba(255, 154, 31, 0.12);
  border: 1px solid rgba(255, 154, 31, 0.35);
  color: var(--orange-400);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 20px;
}

.badge-icon {
  width: 15px;
  height: 15px;
}

.hero-title {
  font-size: clamp(56px, 8.2vw, 108px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.0;
  max-width: 1040px;
}

.hero-title .highlight {
  color: var(--orange-500);
  background: linear-gradient(180deg, var(--orange-400), var(--orange-600));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 24px rgba(255, 154, 31, 0.5));
}

.hero-subtitle {
  margin-top: 18px;
  font-size: 19px;
  color: var(--text-secondary);
  max-width: 550px;
  line-height: 1.5;
}

/* ===================== Hero visual (card + annotation + notifications) ===================== */
/* A real three-zone composition — annotation | card | (space reserved for
   the independently-floating notifications) — instead of one centered flex
   item with everything else absolutely nudged around it. The symmetric
   1fr/auto/1fr columns keep the card mathematically centered regardless of
   the annotation's content width. */
.hero-visual {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin: 26px 0 64px;
  padding: 14px 0;
}

/* The stage the card floats above. It's anchored to .hero-visual (not to the
   floating .card-stage), so the platform and its light stay put while the
   card drifts over them — that's what sells "floating above a light source".
   Everything scales from --card-w. z-index:-1 keeps it under the card and the
   CTA without touching layout. */
.stage-floor {
  position: absolute;
  left: 50%;
  bottom: calc(var(--card-w) * -0.155);
  width: calc(var(--card-w) * 1.39);
  height: auto;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  overflow: visible;
}

.floor-pool {
  transform-box: fill-box;
  transform-origin: center;
  animation: floor-pulse 7s ease-in-out infinite;
}

@keyframes floor-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.07); }
}

.card-stage {
  position: relative;
  width: var(--card-w);
  height: calc(var(--card-w) / 1.598);
  perspective: 1100px;
  animation: card-float 7s ease-in-out infinite;
}

@keyframes card-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(0.6deg); }
}

/* Light spilling up from the stage — wider than tall, and much tighter than
   the old all-around haze, so the surrounding hero stays dark. */
.card-glow {
  position: absolute;
  inset: -50px -76px -34px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 154, 31, 0.5), rgba(255, 154, 31, 0.12) 62%, transparent);
  filter: blur(26px);
  z-index: 0;
  animation: glow-pulse 7s ease-in-out infinite;
}

@keyframes glow-pulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

.reward-card {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(155deg, #232327 0%, #101012 55%, #030303 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  /* The first stack of hard 1px steps is an extruded edge: the tilt turns the
     card's right and bottom sides toward the viewer, so a lit-orange lip that
     darkens into shadow reads as real thickness rather than a flat panel. */
  box-shadow:
    1px 1px 0 rgba(255, 176, 80, 0.6),
    2px 2px 0 #3a3a40,
    3px 3px 0 #303036,
    4px 4px 0 #27272c,
    5px 5px 0 #1f1f24,
    6px 6px 0 #17171b,
    7px 7px 0 #101013,
    0 -1px 0 0 rgba(255, 212, 165, 0.55),
    1px 0 0 0 rgba(255, 180, 90, 0.3),
    0 0 0 1px rgba(255, 154, 31, 0.18),
    0 34px 60px -14px rgba(0, 0, 0, 0.85),
    0 60px 120px -34px rgba(0, 0, 0, 0.7),
    0 0 90px -12px rgba(255, 154, 31, 0.42),
    0 0 170px -30px rgba(255, 154, 31, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -26px 55px -30px rgba(0, 0, 0, 0.65);
  transform: rotate(-8deg) rotateX(12deg) rotateY(-9deg);
  transition: transform 0.5s var(--ease);
  padding: clamp(28px, 2.8vw, 40px) clamp(30px, 3vw, 46px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Card artwork (assets/reward/reward-card.png). It fills the whole face and
   fades in once loaded; until then, or if the file is missing, the card's own
   CSS gradient face above is what shows. Stacking, bottom to top: face/art (0),
   shine + gloss (1), logo and value (2). */
.reward-card-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  user-select: none;
}

.reward-card-art.is-loaded {
  opacity: 1;
}

/* animated diagonal light sweep */
.reward-card::before {
  content: "";
  position: absolute;
  top: -60%;
  left: -20%;
  width: 32%;
  height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  transform: rotate(20deg) translateX(-260%);
  animation: card-shine 6.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes card-shine {
  0%, 42% { transform: rotate(20deg) translateX(-260%); }
  62%, 100% { transform: rotate(20deg) translateX(260%); }
}

/* static soft gloss for a resting reflection */
.reward-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.1) 0%, transparent 32%, transparent 68%, rgba(255, 255, 255, 0.05) 100%);
  pointer-events: none;
  z-index: 1;
}

.card-stage:hover .reward-card {
  transform: rotate(-3deg) rotateX(3deg) rotateY(-1deg) scale(1.015);
}

.reward-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}

/* Reward logo (assets/reward/reward-logo.png), sized by height so any aspect
   ratio fits. The plain-text name below is only its fallback: shown when the
   logo image is missing, or before JS has run. */
.reward-card-logo {
  display: block;
  height: clamp(26px, 2.4vw, 38px);
  width: auto;
  max-width: 58%;
  object-fit: contain;
  object-position: left center;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.reward-card-logo.is-loaded {
  opacity: 1;
}

.reward-card-logo.is-missing {
  display: none;
}

.reward-card-brand {
  font-weight: 700;
  font-size: clamp(18px, 1.6vw, 23px);
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.reward-card.logo-pending .reward-card-brand,
.reward-card.logo-ready .reward-card-brand {
  display: none;
}

.reward-card.no-logo .reward-card-logo,
.reward-card.no-logo .reward-card-brand,
.reward-card.no-value .reward-card-bottom {
  display: none;
}

/* The CSS chip is part of the built-in face; supplied artwork brings its own. */
.reward-card.art-ready .reward-card-chip {
  display: none;
}

.reward-card-chip {
  position: relative;
  margin-left: auto;
  width: clamp(42px, 3.7vw, 54px);
  height: clamp(31px, 2.75vw, 40px);
  border-radius: 7px;
  background: linear-gradient(135deg, #ffd08a, var(--orange-400) 45%, var(--orange-600));
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.6),
    inset 0 -1px 2px rgba(0, 0, 0, 0.35);
}

.reward-card-chip::before,
.reward-card-chip::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  height: 1px;
  background: rgba(0, 0, 0, 0.25);
}

.reward-card-chip::before { top: 38%; }
.reward-card-chip::after { top: 62%; }

.reward-card-bottom {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  z-index: 2;
}

.reward-card-amount {
  font-size: clamp(50px, 4.7vw, 68px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.reward-card-label {
  font-size: clamp(12px, 1.05vw, 15px);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* A real grid item (column 1 of .hero-visual) rather than an absolutely
   positioned corner scribble — this is what actually keeps it vertically
   centered alongside the card instead of pinned near the top. */
.annotation {
  position: relative;
  justify-self: end;
  align-self: start;
  margin: 72px 40px 0 0;
  transform: rotate(-7deg);
  color: var(--orange-400);
  font-family: "Segoe Print", "Bradley Hand", cursive;
  font-size: clamp(22px, 1.9vw, 27px);
  line-height: 1.3;
  max-width: 210px;
  text-align: right;
  display: none;
  z-index: 2;
}

.annotation-arrow {
  position: absolute;
  top: 92%;
  left: 52%;
  width: 138px;
  height: 88px;
  color: var(--orange-400);
  opacity: 0.95;
  overflow: visible;
}

.annotation-arrow .arrow-curve,
.annotation-arrow .arrow-head {
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.annotation-arrow .arrow-curve {
  stroke-dasharray: 140;
  stroke-dashoffset: 140;
  animation: draw-arrow 1.4s var(--ease) 0.7s forwards;
}

.annotation-arrow .arrow-head {
  opacity: 0;
  animation: fade-in-head 0.4s ease 1.9s forwards;
}

@keyframes draw-arrow {
  to { stroke-dashoffset: 0; }
}

@keyframes fade-in-head {
  to { opacity: 1; }
}

/* ===================== Notifications (floating overlay toasts) ===================== */
/* Positioned relative to the whole .hero section (a sibling of .hero-content,
   not nested inside .hero-visual) so the toast stack is a fully independent
   element, structurally decoupled from the card. The `top`/`left` below are
   just a pre-JS fallback — script.js measures the card's actual rendered
   position (via positionFloatingLayers) and overrides them on load/resize,
   so alignment holds regardless of viewport size or how the headline wraps. */
.notifications {
  /* Toast colors. These defaults are the site theme, so the look is unchanged
     until assets/config/notification-config.js overrides any of them (see
     applyNotificationColors in script.js). */
  --toast-bg: var(--glass-bg);
  --toast-border: var(--glass-border);
  --toast-text: var(--text-primary);
  --toast-accent: var(--orange-400);
  --toast-accent-end: var(--orange-600);
  --toast-accent-text: #1a1200;
  --toast-ring: #17171b;   /* outline that separates the check badge from the tile */
  --toast-glow: #ff9a1f;   /* hue of the glows; follows the accent when one is set */

  position: absolute;
  top: 260px;
  right: 24px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: clamp(250px, 21vw, 300px);
  pointer-events: none;
  /* Below desktop this layer lives inside .hero-content (text-align: center);
     pin the alignment so the toast reads the same in both homes. */
  text-align: left;
}

.notifications .notification-card {
  pointer-events: auto;
}

.notification-card {
  display: flex;
  align-items: center;
  gap: 13px;
  background: var(--toast-bg);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid var(--toast-border);
  border-radius: 20px;
  padding: 15px 17px;
  box-shadow:
    0 26px 44px -18px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(255, 154, 31, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  animation: notif-in 0.7s var(--ease) both, notif-bob 6s ease-in-out infinite;
}

.notification-card:nth-child(2) { animation-delay: 0.15s, 0.5s; }
.notification-card:nth-child(3) { animation-delay: 0.3s, 1s; }

/* Toast icon: a fixed 42px circle, vertically centred against the text. By
   default it's an orange disc with a built-in gift glyph; when the source's
   icon (assets/notifications/icons/, or the reward's icon for a source without
   one) loads it takes over the whole disc (.has-asset). The image is cropped to
   fill the circle, never stretched. The corner check marks it as a status
   message. No people. */
.notif-icon {
  flex-shrink: 0;
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--toast-accent-text);
  background: linear-gradient(135deg, var(--toast-accent), var(--toast-accent-end));
  box-shadow:
    0 6px 16px -4px var(--orange-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.notif-glyph {
  width: 24px;
  height: 24px;
}

.notif-icon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.notif-icon img.is-loaded {
  opacity: 1;
}

.notif-icon img.is-missing {
  display: none;
}

.notif-icon.has-asset {
  background: none;
  box-shadow: none;
}

.notif-icon.has-asset .notif-glyph {
  display: none;
}

.notif-status-icon {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--toast-accent), var(--toast-accent-end));
  color: var(--toast-accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--toast-ring);
  box-shadow: 0 0 6px 1px rgba(255, 154, 31, 0.6);
}

.notif-status-icon svg {
  width: 10px;
  height: 10px;
}

.notif-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* The source's name, a quiet line above the message. Empty (no label in the
   config) collapses, leaving a one-line toast. */
.notif-label {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--toast-text);
  opacity: 0.62;
}

.notif-label:empty {
  display: none;
}

.notif-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--toast-text);
}

.notif-close {
  background: transparent;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  padding: 4px;
  border-radius: 6px;
  flex-shrink: 0;
}

.notif-close:hover {
  color: var(--toast-text);
  background: rgba(255, 255, 255, 0.08);
}

/* Where the browser supports color-mix(), the glows and the close button's
   hover tint are derived from --toast-glow / --toast-text, so they follow
   custom colors. With the default values these resolve to exactly the orange
   glows and white tint written in the rules above; older browsers keep those.
   Kept below every rule it overrides (same specificity, so order decides). */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .notification-card {
    box-shadow:
      0 26px 44px -18px rgba(0, 0, 0, 0.85),
      0 0 0 1px color-mix(in srgb, var(--toast-glow) 5%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  .notif-icon {
    box-shadow:
      0 6px 16px -4px color-mix(in srgb, var(--toast-glow) 45%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.4);
  }

  .notif-status-icon {
    box-shadow: 0 0 6px 1px color-mix(in srgb, var(--toast-glow) 60%, transparent);
  }

  .notif-close:hover {
    background: color-mix(in srgb, var(--toast-text) 8%, transparent);
  }
}

@keyframes notif-in {
  from { opacity: 0; transform: translateX(28px) scale(0.94); filter: blur(6px); }
  to { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
}

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

.notification-card.dismissing {
  animation: dismiss 0.35s var(--ease) forwards;
}

@keyframes dismiss {
  to { opacity: 0; transform: translateX(24px) scale(0.96); }
}

/* ===================== CTA ===================== */
.cta-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #ffc266, var(--orange-400) 45%, var(--orange-600));
  color: #1a1200;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 20px 48px;
  border-radius: var(--radius-pill);
  box-shadow:
    0 16px 40px -8px var(--orange-glow),
    0 4px 14px -2px rgba(255, 154, 31, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.cta-icon {
  width: 18px;
  height: 18px;
}

.cta-button:hover {
  transform: translateY(-5px) scale(1.035);
  box-shadow:
    0 22px 50px -6px var(--orange-glow),
    0 6px 18px -2px rgba(255, 154, 31, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.cta-button:active {
  transform: translateY(-1px) scale(0.98);
}

/* ===================== Trust row ===================== */
.trust-row {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  margin-top: 20px;
  color: var(--text-secondary);
  font-size: 15px;
}

.trust-row li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.trust-row svg {
  width: 16px;
  height: 16px;
  color: var(--orange-400);
}

/* ===================== How it works ===================== */
.how-it-works {
  padding: 36px 0 64px;
  border-top: 1px solid var(--border-subtle);
}

.section-title {
  text-align: center;
  font-size: clamp(30px, 3.8vw, 44px);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.section-subtitle {
  text-align: center;
  color: var(--text-secondary);
  margin-top: 12px;
  font-size: 16.5px;
}

.steps {
  margin-top: 40px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 32px;
}

.step-card {
  flex: 1;
  max-width: 350px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.035), transparent 40%) var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 46px 32px;
  text-align: center;
  box-shadow: 0 20px 40px -28px rgba(0, 0, 0, 0.7);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.step-card:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 154, 31, 0.4);
  box-shadow: 0 26px 50px -22px rgba(255, 154, 31, 0.25);
}

.step-icon-wrap {
  position: relative;
  width: fit-content;
  margin: 0 auto 18px;
}

.step-icon {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-md);
  background: rgba(255, 154, 31, 0.12);
  border: 1px solid rgba(255, 154, 31, 0.25);
  color: var(--orange-400);
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-icon svg {
  width: 46px;
  height: 46px;
}

.step-number {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange-400), var(--orange-600));
  color: #1a1200;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  box-shadow: 0 6px 14px -3px var(--orange-glow), 0 0 0 3px var(--bg-elevated);
}

.step-card h3 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}

.step-card p {
  font-size: 15.5px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.step-arrow {
  color: var(--orange-500);
  width: 68px;
  flex-shrink: 0;
  margin-top: 58px;
  animation: arrow-pulse 2.4s ease-in-out infinite;
}

.step-arrow svg {
  width: 100%;
  height: auto;
}

@keyframes arrow-pulse {
  0%, 100% { opacity: 0.45; filter: drop-shadow(0 0 0 rgba(255, 154, 31, 0)); }
  50% { opacity: 1; filter: drop-shadow(0 0 8px rgba(255, 154, 31, 0.6)); }
}

.steps-note {
  margin: 28px auto 0;
  max-width: 560px;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* ===================== Feature row ===================== */
.feature-row {
  padding: 40px 0 72px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.feature-item svg {
  width: 22px;
  height: 22px;
  color: var(--orange-400);
  flex-shrink: 0;
  margin-top: 3px;
}

.feature-item h4 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
}

.feature-item p {
  font-size: 13.5px;
  color: var(--text-muted);
}

/* ===================== Footer ===================== */
.site-footer {
  border-top: 1px solid var(--border-subtle);
  padding: 32px 0;
  text-align: center;
}

.site-footer p {
  font-size: 13px;
  color: var(--text-muted);
}

/* Footer logo (brand-config.js -> footerLogo). Hidden until it has loaded, at
   which point it replaces the built-in mark. `logo-none` means the config
   asked for no footer logo, so the mark is hidden too. */
.footer-logo-img {
  display: none;
  height: 28px;
  width: auto;
  max-width: 180px;
  margin: 0 auto 12px;
  object-fit: contain;
}

.site-footer.logo-ready .footer-logo-img {
  display: block;
}

.site-footer.logo-ready .brand-mark,
.site-footer.logo-none .brand-mark {
  display: none;
}

/* ===================== Responsive ===================== */
/* The three-zone hero (annotation | card | toasts) needs roughly 1160px to
   breathe. Below that it collapses to a single centered card with a small
   toast perched on its corner. This is independent of the section grids
   below, which keep their own 999px breakpoint. */
@media (min-width: 1160px) {
  .annotation {
    display: block;
  }
}

@media (max-width: 1159px) {
  :root {
    /* --toast-lift: how far the toast's top edge rises above the card wrapper's
       top edge. The card is tilted, so its top-right corner already sits above
       that edge; this lets the toast straddle the corner with a small overlap. */
    --toast-w: 290px;
    --toast-lift: 52px;
  }

  .hero {
    padding: 20px 0 16px;
  }

  /* Annotation is hidden at this width, so the grid collapses to a single
     centered column for the card — no more 1fr/auto/1fr split needed. The
     extra top margin is the room the floating toast lives in. */
  .hero-visual {
    display: flex;
    justify-content: center;
    margin-top: 84px;
  }

  /* Below desktop, script.js re-homes the toast layer into .hero-visual — the
     card's own wrapper. It is then anchored to the card's top-right corner
     with nothing but CSS: out of flow (so it can't push anything), one toast
     only, and no hero-level coordinates that text reflow could throw off. */
  .hero-visual .notifications {
    position: absolute;
    top: calc(var(--toast-lift) * -1);
    left: calc(50% + var(--card-w) / 2 - var(--toast-w) + 8px);
    right: auto;
    width: var(--toast-w);
    gap: 0;
  }

  .notification-card {
    padding: 11px 14px;
    gap: 11px;
  }

  .notif-label {
    font-size: 11.5px;
  }

  .notif-title {
    font-size: 13.5px;
  }
}

@media (max-width: 999px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 20px;
  }

  .steps {
    flex-direction: column;
    align-items: center;
  }

  .step-arrow {
    transform: rotate(90deg);
    width: 32px;
    margin-top: 0;
  }

  .step-card {
    max-width: 380px;
    width: 100%;
  }
}

@media (max-width: 640px) {
  :root {
    --card-w: clamp(250px, 84vw, 400px);
    --toast-w: 264px;
    --toast-lift: 52px;
  }

  .hero {
    padding: 20px 0 24px;
  }

  /* Mobile is a focused reward-card experience: the desktop arcs are kept only
     as a whisper at the edges, and the halo behind the card is toned down. */
  .hero-arc {
    opacity: 0.28;
  }

  .arc-left {
    width: 300px;
    height: 354px;
  }

  .arc-right {
    width: 330px;
    height: 361px;
  }

  .card-glow {
    background: radial-gradient(closest-side, rgba(255, 154, 31, 0.34), rgba(255, 154, 31, 0.08) 62%, transparent);
  }

  /* Vertical rhythm: badge -> headline -> description -> card, each with room
     to breathe. The gap above the card also hosts the floating toast. */
  .badge {
    margin-bottom: 28px;
  }

  .hero-title {
    font-size: clamp(36px, 10.5vw, 50px);
    line-height: 1.06;
  }

  .hero-subtitle {
    font-size: 16px;
    margin-top: 20px;
    padding: 0 8px;
  }

  .hero-visual {
    margin: 70px 0 44px;
    padding: 8px 0;
  }

  .card-stage {
    animation-name: card-float-sm;
  }

  @keyframes card-float-sm {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
  }

  .reward-card {
    padding: 22px 24px;
  }

  .reward-card-brand {
    font-size: 16px;
  }

  .reward-card-chip {
    width: 36px;
    height: 26px;
  }

  .reward-card-amount {
    font-size: 34px;
  }

  .notification-card {
    padding: 9px 12px;
    border-radius: 16px;
    gap: 10px;
  }

  .notif-status-icon {
    width: 16px;
    height: 16px;
  }

  .notif-status-icon svg {
    width: 9px;
    height: 9px;
  }

  .notif-label {
    font-size: 11px;
  }

  .notif-title {
    font-size: 13px;
  }

  .cta-button {
    width: 100%;
    justify-content: center;
    padding: 18px 28px;
    font-size: 17px;
  }

  .trust-row {
    gap: 14px 18px;
    font-size: 13px;
  }

  .how-it-works {
    padding: 56px 0;
  }

  .steps {
    margin-top: 40px;
    gap: 20px;
  }

  .step-card {
    padding: 36px 24px;
  }

  .step-icon {
    width: 68px;
    height: 68px;
  }

  .step-icon svg {
    width: 32px;
    height: 32px;
  }

  .step-number {
    width: 26px;
    height: 26px;
    font-size: 12px;
  }

  .feature-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}