/* ============================================================
   1UZ — Loyalty page header (premium cashback hero)
   ============================================================ */

/* navbar legible on the dark hero (only while at top / not scrolled) */
body.loy .nav:not(.scrolled) .brand,
body.loy .nav:not(.scrolled) .nav-phone{ color:#fff; }
body.loy .nav:not(.scrolled) .nav-phone span{ color:rgba(255,255,255,.72); }
body.loy .nav:not(.scrolled) .nav-menu > li > a,
body.loy .nav:not(.scrolled) .nav-link{ color:rgba(255,255,255,.86); }
body.loy .nav:not(.scrolled) .nav-menu > li > a:hover,
body.loy .nav:not(.scrolled) .nav-link:hover{ background:rgba(255,255,255,.14); color:#fff; }
body.loy .nav:not(.scrolled) .lang{ background:rgba(255,255,255,.14); }
body.loy .nav:not(.scrolled) .lang button{ color:rgba(255,255,255,.7); }
body.loy .nav:not(.scrolled) .lang button.on{ background:#fff; color:#5B33C9; }
body.loy .nav:not(.scrolled) .burger{ background:rgba(255,255,255,.16); }
body.loy .nav:not(.scrolled) .burger span,
body.loy .nav:not(.scrolled) .burger span::before,
body.loy .nav:not(.scrolled) .burger span::after{ background:#fff; }

.ly-hero{
  position:relative; overflow:hidden; color:#fff;
  padding-top:calc(var(--nav-h) + 70px); padding-bottom:84px;
  background:
    radial-gradient(120% 130% at 88% 8%, rgba(226,91,224,.55), transparent 52%),
    radial-gradient(120% 130% at 4% 96%, rgba(31,198,230,.5), transparent 50%),
    linear-gradient(125deg, #1A1750 0%, #2A2A8C 46%, #5B33C9 100%);
}
.ly-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size:46px 46px; opacity:.05;
  -webkit-mask-image:radial-gradient(80% 75% at 70% 20%, #000, transparent 80%);
  mask-image:radial-gradient(80% 75% at 70% 20%, #000, transparent 80%);
}
.ly-hero .wrap{ position:relative; z-index:2; }
.ly-grid{ display:grid; grid-template-columns:1.04fr .96fr; gap:56px; align-items:center; }

.ly-crumbs{ display:flex; gap:8px; align-items:center; font-size:14px; font-weight:600; color:rgba(255,255,255,.62); margin-bottom:18px; }
.ly-crumbs a:hover{ color:#fff; }
.ly-badge{
  display:inline-flex; align-items:center; gap:9px; padding:7px 15px 7px 8px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(6px);
  font-size:13.5px; font-weight:600; margin-bottom:22px;
}
.ly-badge b{ background:#fff; color:#5B33C9; font-family:var(--font-display); font-weight:800; font-size:11.5px; padding:4px 11px; border-radius:var(--r-pill); letter-spacing:.04em; }
.ly-hero h1{ color:#fff; font-size:clamp(40px,5.6vw,70px); letter-spacing:-.03em; line-height:1.04; }
.ly-hero h1 .hl{ background:linear-gradient(100deg,#9FF5D6,#7BE0FF 55%,#E7B6FF); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ly-lead{ color:rgba(255,255,255,.84); font-size:clamp(17px,1.6vw,20px); max-width:500px; margin-top:22px; }
.ly-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.ly-chips{ display:flex; gap:24px; margin-top:38px; flex-wrap:wrap; }
.ly-chips .c b{ font-family:var(--font-display); font-weight:800; font-size:24px; display:block; line-height:1; }
.ly-chips .c span{ font-size:13px; color:rgba(255,255,255,.7); margin-top:4px; display:block; }
.ly-chips .sep{ width:1px; height:42px; background:rgba(255,255,255,.22); }

/* cashback card visual */
.ly-visual{ position:relative; display:grid; place-items:center; min-height:340px; }
.cashcard{
  position:relative; width:min(420px,100%); aspect-ratio:1.6/1; border-radius:26px; z-index:2;
  background:linear-gradient(135deg, #2E2BA0 0%, #6A3BE6 52%, #B14BE0 100%);
  box-shadow:0 40px 80px -28px rgba(10,8,40,.7), inset 0 1px 0 rgba(255,255,255,.25);
  padding:28px 30px; display:flex; flex-direction:column; justify-content:space-between;
  transform:rotate(-5deg); transition:transform .4s cubic-bezier(.2,.8,.2,1);
  overflow:hidden;
}
.ly-visual:hover .cashcard{ transform:rotate(-2deg) translateY(-6px); }
.cashcard::after{ content:""; position:absolute; inset:0; background:radial-gradient(120% 80% at 20% 0%, rgba(255,255,255,.3), transparent 55%); pointer-events:none; }
.cashcard .top{ display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2; }
.cashcard .brand{ display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:800; font-size:18px; color:#fff; }
.cashcard .brand img{ width:30px; height:30px; filter:drop-shadow(0 4px 10px rgba(0,0,0,.3)); }
.cashcard .chip-emv{ width:42px; height:32px; border-radius:7px; background:linear-gradient(135deg,#FFE9A8,#E8B84B); box-shadow:inset 0 0 0 1px rgba(0,0,0,.1); }
.cashcard .pct{ position:relative; z-index:2; }
.cashcard .pct b{ font-family:var(--font-display); font-weight:800; font-size:62px; line-height:.9; letter-spacing:-.03em; color:#fff; }
.cashcard .pct span{ display:block; font-size:13.5px; color:rgba(255,255,255,.82); margin-top:6px; letter-spacing:.04em; text-transform:uppercase; font-weight:600; }
.cashcard .bottom{ display:flex; align-items:flex-end; justify-content:space-between; position:relative; z-index:2; }
.cashcard .bottom .num{ font-family:'JetBrains Mono', monospace; font-size:15px; color:rgba(255,255,255,.85); letter-spacing:.08em; }
.cashcard .bottom .max{ text-align:right; }
.cashcard .bottom .max b{ font-family:var(--font-display); font-weight:800; font-size:19px; color:#fff; display:block; }
.cashcard .bottom .max span{ font-size:11px; color:rgba(255,255,255,.7); }

/* floating coins */
.coin{ position:absolute; border-radius:50%; display:grid; place-items:center; font-family:var(--font-display); font-weight:800; color:#7A4A12; z-index:3;
  background:radial-gradient(circle at 35% 30%, #FFE9A0, #F0B43C 70%, #D8951F);
  box-shadow:0 14px 28px -8px rgba(216,149,31,.7), inset 0 2px 4px rgba(255,255,255,.6), inset 0 -3px 6px rgba(150,90,10,.4);
  animation:coinbob 4s ease-in-out infinite;
}
.coin.c1{ width:74px; height:74px; font-size:22px; top:6%; right:6%; animation-delay:.2s; }
.coin.c2{ width:54px; height:54px; font-size:16px; bottom:10%; left:2%; animation-delay:1.1s; }
.coin.c3{ width:40px; height:40px; font-size:13px; top:46%; right:-2%; animation-delay:.7s; }
.coin::after{ content:"%"; }
.coin.cur::after{ content:"so'm"; font-size:.5em; }
@keyframes coinbob{ 0%,100%{ transform:translateY(0) rotate(-4deg) } 50%{ transform:translateY(-12px) rotate(4deg) } }

@media (prefers-reduced-motion:reduce){ .coin{ animation:none; } .cashcard{ transition:none; } }
@media (max-width:1080px){
  .ly-grid{ grid-template-columns:1fr; gap:46px; }
  .ly-visual{ min-height:0; max-width:440px; }
}
@media (max-width:560px){
  .ly-chips{ gap:16px; }
  .ly-chips .sep{ display:none; }
  .cashcard .pct b{ font-size:50px; }
}