/* ==========================================================================
   Paglu Game — pages/home.css
   Homepage-only composition: split hero, 3D coverflow showcase, screenshot
   slider, bonus spotlight, VIP tiers, category board and step rail.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 1.4rem + 5vw, 5.5rem) clamp(3rem, 1.8rem + 5vw, 6rem);
  isolation: isolate;
}

/* Angled burgundy wedge sweeping in from the top-right — sharp geometry,
   not a curved blob. */
.hero__wedge {
  position: absolute;
  inset: -20% -25% auto -25%;
  height: 130%;
  z-index: -1;
  background: linear-gradient(118deg, transparent 46%, rgba(140, 16, 41, 0.30) 58%, rgba(79, 8, 23, 0.12) 76%, transparent 88%);
  clip-path: polygon(0 12%, 100% 0, 100% 84%, 0 100%);
  pointer-events: none;
}

.hero__grid {
  display: grid;
  gap: clamp(2rem, 1.2rem + 3.4vw, 3.25rem);
  align-items: center;
}

.hero__copy-top,
.hero__copy-bottom { position: relative; z-index: 2; }
.hero__title {
  font-size: var(--fs-display);
  line-height: 0.98;
  margin-bottom: var(--space-lg);
}
.hero__title span { display: block; }
.hero__title .gold-text { filter: drop-shadow(0 0 34px rgba(227, 189, 115, 0.22)); }
.hero__lead {
  max-width: 46ch;
  margin-bottom: var(--space-xl);
  font-size: var(--fs-lead);
  line-height: 1.85;
  color: var(--color-text-secondary);
}
.hero__lead strong { color: var(--color-gold-light); font-weight: 500; }

.hero__bonus { margin-bottom: var(--space-xl); }
.hero__actions { gap: 0.7rem; }
.hero__actions .btn { flex: 1 1 auto; }

/* Micro trust row under the CTAs */
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.35rem;
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(227, 189, 115, 0.12);
}
.hero__trust li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}
.hero__trust svg { width: 15px; height: 15px; color: var(--color-gold-dark); flex-shrink: 0; }

.hero__visual { position: relative; z-index: 1; }

@media (min-width: 900px) {
  /* Beside the copy on desktop: the mockup spans both copy rows and sits
     centered between them. On mobile the same three blocks simply stack in
     source order, which is what puts the phone above the bonus/CTA block. */
  .hero__grid {
    grid-template-columns: 1.06fr 0.94fr;
    grid-template-areas:
      "top    visual"
      "bottom visual";
    align-items: start;
  }
  .hero__copy-top    { grid-area: top; }
  .hero__copy-bottom { grid-area: bottom; align-self: end; }
  .hero__visual       { grid-area: visual; align-self: center; }
  .hero__actions .btn { flex: 0 0 auto; }
}
@media (min-width: 1200px) {
  .hero__grid { grid-template-columns: 1.1fr 0.9fr; gap: clamp(3rem, 4vw, 5rem); }
}

/* --------------------------------------------------------------------------
   2. BONUS SPOTLIGHT PANEL
   -------------------------------------------------------------------------- */
.bonus-panel {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: clamp(1.75rem, 1rem + 3vw, 3.25rem);
}
.bonus-panel__beam {
  position: absolute;
  inset: -60% -20%;
  z-index: 0;
  background: linear-gradient(102deg, transparent 42%, rgba(227, 189, 115, 0.075) 50%, transparent 58%);
  animation: beam-sweep 22s var(--ease-io) infinite;
  pointer-events: none;
}
.bonus-panel > * { position: relative; z-index: 1; }

.bonus-panel__figure {
  display: grid;
  gap: 0.35rem;
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid rgba(227, 189, 115, 0.14);
}
.bonus-panel__amount {
  font-family: var(--font-num);
  font-size: clamp(3rem, 1.6rem + 7vw, 6rem);
  font-weight: 800;
  line-height: 0.92;
  background: var(--grad-gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 28px rgba(227, 189, 115, 0.28));
}
.bonus-panel__caption {
  font-size: var(--fs-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.bonus-tranche {
  position: relative;
  display: grid;
  gap: 0.55rem;
  align-content: start;
  padding: 1.2rem 1.2rem 1.2rem 1.35rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: rgba(8, 8, 11, 0.45);
  transition: border-color var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out);
}
.bonus-tranche::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14%;
  bottom: 14%;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--color-gold-light), var(--color-burgundy));
  box-shadow: 0 0 12px var(--color-glow-gold);
}
.bonus-tranche:hover {
  transform: translateY(-4px);
  border-color: var(--color-border-strong);
  box-shadow: 0 0 30px -16px var(--color-glow-gold);
}
.bonus-tranche__tag {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold-dark);
}
.bonus-tranche__value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-gold-light);
  line-height: 1.15;
  letter-spacing: 0.005em;
}
.bonus-tranche p { font-size: var(--fs-sm); line-height: 1.8; color: var(--color-text-secondary); }

/* The ₹10,000 figure reads as a banner across the top of the panel, with the
   four components as an even row beneath it. Putting the display number in a
   side column starves the components of width on every screen size. */
.bonus-panel__figure {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 2.25rem;
}
.bonus-panel__figure-num { display: grid; gap: 0.3rem; flex: 0 0 auto; min-width: 0; }
.bonus-panel__figure > p {
  flex: 1 1 20rem;
  min-width: 0;
  font-size: var(--fs-sm);
  line-height: 1.85;
  color: var(--color-text-secondary);
}

@media (min-width: 700px) {
  .bonus-panel .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .bonus-panel .grid--2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   3. 3D COVERFLOW GAME SHOWCASE
   -------------------------------------------------------------------------- */
.coverflow {
  position: relative;
  width: 100%;
  /* Clipped so the receding side cards can never push the page sideways. */
  overflow: hidden;
  padding-block: clamp(1rem, 2vw, 2rem);
}
.coverflow__viewport {
  position: relative;
  height: clamp(350px, 44vw, 480px);
  perspective: 1500px;
  transform-style: preserve-3d;
  touch-action: pan-y;
  cursor: grab;
}
.coverflow__viewport:active { cursor: grabbing; }

.coverflow__item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(190px, 25vw, 278px);
  aspect-ratio: 211 / 260;
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #0B0A0E;
  border: 1px solid var(--color-border);
  box-shadow: 0 30px 70px -34px #000;
  transform-origin: center center;
  transform: translate3d(-50%, -50%, 0);
  transition:
    transform 620ms var(--ease-out),
    opacity 620ms var(--ease-out),
    filter 620ms var(--ease-out),
    box-shadow 620ms var(--ease-out),
    border-color 400ms var(--ease-out);
  will-change: transform, opacity;
}
.coverflow__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}
.coverflow__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(8, 8, 11, 0.92) 100%);
  pointer-events: none;
}
.coverflow__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: grid;
  gap: 0.2rem;
  padding: 0.9rem 0.95rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
}
.coverflow__caption strong {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: 1.3;
}
.coverflow__caption span {
  font-size: 0.63rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold);
}

/* Only the centre card is fully lit and interactive */
.coverflow__item[data-pos='0'] {
  z-index: 5;
  border-color: var(--color-border-strong);
  box-shadow: 0 40px 90px -34px #000, 0 0 44px -16px var(--color-glow-gold);
}
.coverflow__item[data-pos='0'] .coverflow__caption { opacity: 1; transform: none; }
.coverflow__item:not([data-pos='0']) { filter: saturate(0.55) brightness(0.6); }
.coverflow__item[data-hidden='true'] { opacity: 0; pointer-events: none; }

.coverflow__link { position: absolute; inset: 0; z-index: 3; }

/* Controls --------------------------------------------------------------- */
.coverflow__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin-top: var(--space-lg);
}
.coverflow__btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--glass-bg-soft);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--color-gold);
  transition: all var(--dur-fast) var(--ease-out);
}
.coverflow__btn:hover { border-color: var(--color-gold); box-shadow: var(--shadow-neon); transform: translateY(-2px); }
.coverflow__btn svg { width: 18px; height: 18px; }

.coverflow__dots { display: flex; align-items: center; gap: 0.4rem; }
.coverflow__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(227, 189, 115, 0.26);
  transition: all var(--dur-mid) var(--ease-out);
}
.coverflow__dot[aria-current='true'] {
  width: 24px;
  border-radius: var(--radius-pill);
  background: var(--color-gold);
  box-shadow: 0 0 12px var(--color-glow-gold);
}

/* --------------------------------------------------------------------------
   4. SCREENSHOT SLIDER
   Native scroll-snap paging drives the motion — the browser's own scroll
   physics are smoother than any JS-driven scrollLeft loop, on every input
   (touch swipe, trackpad, mouse-wheel, or dragging with a mouse where JS
   assists). JS only supplies autoplay (via scrollTo), the dot state and the
   arrow buttons. Below 600px each screenshot fills the viewport width, so
   exactly one is visible per "page"; from 600px up several are visible at
   once, same as before.
   -------------------------------------------------------------------------- */
.shots {
  position: relative;
  overflow: hidden;
}
.shots__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  /* Bleed the rail toward the gutters without ever exceeding the shell. */
  margin-inline: calc(var(--gutter) * -0.5);
  padding-inline: calc(var(--gutter) * 0.5);
  padding-block: 1.25rem;
  cursor: grab;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.shots__viewport::-webkit-scrollbar { display: none; }
.shots__viewport:active { cursor: grabbing; }

.shots__rail {
  display: flex;
  gap: clamp(0.75rem, 0.4rem + 1.4vw, 1.5rem);
  /* No explicit width: it fills the viewport's content box (a definite
     size), which .shot needs to resolve its own width:100% against on
     mobile. flex-shrink:0 on the cards still lets the row overflow that
     box exactly as before — this only fixes what the 100% is 100% of. */
}

.shot {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 560 / 1160;
  border-radius: 22px;
  overflow: hidden;
  padding: 6px;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  background: linear-gradient(155deg, #3B3835 0%, #100F0E 26%, #0A0A0C 60%, #2A2724 100%);
  box-shadow:
    0 0 0 1px rgba(227, 189, 115, 0.20),
    0 30px 64px -34px rgba(0, 0, 0, 0.95);
  transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out);
}
.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 17px;
  -webkit-user-drag: none;
  pointer-events: none;
}
.shot::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 17px;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.13) 0%, transparent 42%);
  mix-blend-mode: screen;
  pointer-events: none;
}
.shot:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 0 0 1px var(--color-border-strong), 0 36px 76px -30px #000, 0 0 40px -18px var(--color-glow-gold);
}
.shot__index {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 3;
  transform: translateX(-50%);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  background: rgba(8, 8, 11, 0.78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  color: var(--color-gold);
  opacity: 1;
  transition: opacity var(--dur-mid) var(--ease-out);
}
@media (hover: hover) {
  .shot__index { opacity: 0; }
  .shot:hover .shot__index { opacity: 1; }
}

@media (min-width: 600px) {
  .shot { max-width: none; width: clamp(160px, 42vw, 236px); }
}

/* Edge fades so the rail dissolves rather than being cut off */
.shots__fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(28px, 6vw, 90px);
  z-index: 3;
  pointer-events: none;
}
.shots__fade--l { left: 0;  background: linear-gradient(90deg, var(--color-obsidian) 10%, transparent); }
.shots__fade--r { right: 0; background: linear-gradient(270deg, var(--color-obsidian) 10%, transparent); }

.shots__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin-top: var(--space-lg);
}
.shots__meta {
  margin-top: 0.6rem;
  text-align: center;
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Dot pagination — mirrors the coverflow dots' visual language */
.shots__dots {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.shots__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(227, 189, 115, 0.26);
  transition: all var(--dur-mid) var(--ease-out);
}
.shots__dot[aria-current='true'] {
  width: 24px;
  border-radius: var(--radius-pill);
  background: var(--color-gold);
  box-shadow: 0 0 12px var(--color-glow-gold);
}

/* --------------------------------------------------------------------------
   5. CATEGORY BOARD
   -------------------------------------------------------------------------- */
.cat-board { display: grid; gap: var(--space-md); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cat-tile {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding: clamp(1.1rem, 0.8rem + 1.2vw, 1.85rem);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--glass-bg-soft);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  transition: transform var(--dur-mid) var(--ease-out), border-color var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out);
}
.cat-tile__shine {
  position: absolute;
  inset: -60% -120%;
  background: var(--grad-glass-shine);
  transform: translateX(-70%) rotate(9deg);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.9s var(--ease-out), opacity 0.4s var(--ease-out);
}
.cat-tile:hover {
  transform: translateY(-5px);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-lift);
}
.cat-tile:hover .cat-tile__shine { transform: translateX(70%) rotate(9deg); opacity: 1; }
.cat-tile__icon { color: var(--color-gold); width: 28px; height: 28px; }
.cat-tile h3 { font-size: 1.2rem; }
.cat-tile p { font-size: var(--fs-xs); line-height: 1.7; color: var(--color-text-secondary); }
.cat-tile__count {
  font-family: var(--font-num);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  color: var(--color-gold-dark);
}
.cat-tile__link { position: absolute; inset: 0; z-index: 2; }
@media (min-width: 768px)  { .cat-board { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .cat-board { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* --------------------------------------------------------------------------
   6. STEP RAIL (how it works)
   -------------------------------------------------------------------------- */
.steps { display: grid; gap: var(--space-md); counter-reset: step; }
.step {
  position: relative;
  display: grid;
  gap: 0.6rem;
  padding: clamp(1.3rem, 0.9rem + 1.4vw, 2rem);
  padding-top: clamp(2.4rem, 1.6rem + 2vw, 3rem);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--glass-bg-soft);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  counter-increment: step;
  transition: transform var(--dur-mid) var(--ease-out), border-color var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out);
}
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: clamp(0.9rem, 1.6vw, 1.4rem);
  left: clamp(1.3rem, 0.9rem + 1.4vw, 2rem);
  font-family: var(--font-num);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(227, 189, 115, 0.5);
}
.step::after {
  content: '';
  position: absolute;
  top: 0;
  left: clamp(1.3rem, 0.9rem + 1.4vw, 2rem);
  width: 34px;
  height: 1px;
  background: var(--color-gold);
  box-shadow: 0 0 10px var(--color-glow-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}
.step:hover {
  transform: translateY(-5px);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-lift);
}
.step:hover::after { transform: scaleX(1); }
.step h3 { font-size: 1.22rem; }
.step p { font-size: var(--fs-sm); line-height: 1.8; color: var(--color-text-secondary); }
@media (min-width: 768px)  { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* --------------------------------------------------------------------------
   7. VIP TIERS
   -------------------------------------------------------------------------- */
.tiers { display: grid; gap: var(--space-md); }
.tier {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 0.85rem;
  align-content: start;
  padding: clamp(1.4rem, 1rem + 1.6vw, 2.1rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-panel);
  transition: transform var(--dur-mid) var(--ease-out), border-color var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out);
}
.tier::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--tier-accent, var(--color-gold)), transparent);
  opacity: 0.9;
}
.tier:hover { transform: translateY(-6px); border-color: var(--color-border-strong); box-shadow: var(--shadow-lift); }
.tier__crest {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: linear-gradient(150deg, color-mix(in srgb, var(--tier-accent, #E3BD73) 26%, transparent), rgba(18, 18, 24, 0.85));
  color: var(--tier-accent, var(--color-gold));
}
.tier__crest svg { width: 25px; height: 25px; }
.tier__name { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--color-text-primary); }
.tier__req {
  font-family: var(--font-num);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tier-accent, var(--color-gold-dark));
}
.tier ul { display: grid; gap: 0.5rem; margin-top: 0.25rem; }
.tier li {
  position: relative;
  padding-left: 1.15rem;
  font-size: var(--fs-xs);
  line-height: 1.75;
  color: var(--color-text-secondary);
}
.tier li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 5px;
  height: 5px;
  background: var(--tier-accent, var(--color-gold));
  transform: rotate(45deg);
}
.tier--featured {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-panel), 0 0 46px -26px var(--color-glow-gold);
}
.tier__flag {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-xs);
  border: 1px solid var(--color-border-strong);
  background: rgba(140, 16, 41, 0.34);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold-light);
}
@media (min-width: 768px)  { .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .tiers { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* --------------------------------------------------------------------------
   8. SPLIT CONTENT BLOCK (payments / security narrative)
   -------------------------------------------------------------------------- */
.split { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3.5rem); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split--wide-left  { grid-template-columns: 1.15fr 0.85fr; }
  .split--wide-right { grid-template-columns: 0.85fr 1.15fr; }
  .split--reverse > *:first-child { order: 2; }
}

/* Payment method chips */
.method-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.method {
  display: grid;
  gap: 0.2rem;
  padding: 0.9rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: rgba(8, 8, 11, 0.45);
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.method:hover { border-color: var(--color-border-strong); transform: translateY(-3px); }
.method strong { font-size: var(--fs-sm); font-weight: 500; color: var(--color-text-primary); }
.method span { font-size: var(--fs-xs); color: var(--color-text-muted); }
@media (min-width: 560px) { .method-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }