/* ============================================================
   Legend's Best — homepage showcase (js/home-showcase.js)
   Hot Deals + Games marquees, the Shop block, Best Sellers, the Gift Card
   block, Popular Brands rows and the eSIM block. Everything animated here
   is decoration: the content itself comes from the live catalogue.
   ============================================================ */
.hs { padding: 34px 0; }
.hs--tint { background: linear-gradient(180deg, #f6f8ff 0%, #f9fafc 100%); }
.hs__eyebrow { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray-600); margin-bottom: 4px; }
.hs__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.hs__head h2 { font-size: 18px; margin: 0; white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.hs__head h2 svg { width: 18px; height: 18px; color: var(--blue-600); }
.hs__rule { flex: 1; height: 1px; background: var(--border); }
.hs__all { font-size: 13px; font-weight: 600; color: var(--gray-600); text-decoration: none; white-space: nowrap; }
.hs__all:hover { color: var(--ink-900); }
/* A long heading wraps on a phone instead of pushing "View all" off screen. */
.hs__head h2 { min-width: 0; }
.hs__rule { min-width: 10px; }
.hs__all { flex: 0 0 auto; }
@media (max-width: 480px) {
  .hs__head h2 { white-space: normal; line-height: 1.2; }
}
.hs__sub { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 8px; }
.hs__sub h3 { font-size: 14px; margin: 0; }

/* ---- marquee strips ---- */
.hs-marquee { position: relative; overflow: hidden; margin: 0 calc(50% - 50vw); padding: 6px 0 10px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.hs-marquee__track { display: flex; gap: 12px; width: max-content; animation: hs-marquee var(--hs-dur, 40s) linear infinite; will-change: transform; }
.hs-marquee--reverse .hs-marquee__track { animation-direction: reverse; }
.hs-marquee:hover .hs-marquee__track { animation-play-state: paused; }
@keyframes hs-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- image tiles with the frosted label ---- */
.hs-tile { position: relative; display: block; width: 236px; height: 148px; flex: 0 0 auto; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); background: var(--white); text-decoration: none; color: var(--ink-900); transform-style: preserve-3d; transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0)); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06); }
.hs-tile:hover { --ty: -4px; box-shadow: 0 18px 34px rgba(15, 23, 42, 0.16); }
.hs-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hs-tile__ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #10163a, #1e4bff); }
.hs-tile__ph svg { width: 44px; height: 44px; color: rgba(255, 255, 255, 0.85); }
.hs-tile__badge { position: absolute; right: 0; top: 14px; height: 22px; display: flex; align-items: center; padding: 0 9px; border-radius: 8px 0 0 8px; background: var(--ink-900); color: #fff; font-size: 11px; font-weight: 800; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); }
.hs-tile__badge--gold { background: var(--gold); color: var(--ink-900); }
.hs-tile__label { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); width: 86%; padding: 6px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 12.5px; font-weight: 700; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-900); }
.hs-tile__shine { position: absolute; inset: 0; background: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.28), transparent 60%); opacity: 0; transition: opacity 0.25s; pointer-events: none; }
.hs-tile:hover .hs-tile__shine { opacity: 1; }

/* ---- Shop block ---- */
.hs-shop { border: 1px solid var(--border); border-radius: 22px; background: #f8f9fb; overflow: hidden; display: grid; grid-template-columns: 1.05fr 1fr; }
.hs-shop__copy { padding: 38px 40px 30px; }
.hs-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--blue-50); color: var(--blue-700); border: 1px solid var(--blue-100); }
.hs-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: hs-pulse 1.6s ease-in-out infinite; }
@keyframes hs-pulse { 50% { opacity: 0.35; } }
.hs-shop h2, .hs-gift h2, .hs-esim h2 { font-size: clamp(26px, 3.2vw, 38px); line-height: 1.12; margin: 18px 0 12px; letter-spacing: -0.02em; }
.hs-grad { background: linear-gradient(90deg, #1e4bff, #22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hs-muted { color: var(--gray-400); }
.hs-shop p, .hs-gift p, .hs-esim p { color: var(--gray-600); font-size: 15px; max-width: 460px; margin: 0 0 18px; }
.hs-points { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 18px; padding: 0; list-style: none; font-size: 13.5px; color: var(--ink-700); }
.hs-points li { display: inline-flex; align-items: center; gap: 7px; }
.hs-points svg { width: 16px; height: 16px; color: var(--blue-600); }
.hs-note { display: inline-flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: var(--white); border: 1px solid var(--border); margin-bottom: 20px; }
.hs-note__icon { width: 34px; height: 34px; border-radius: 10px; background: #fff4e0; color: #b45309; display: flex; align-items: center; justify-content: center; }
.hs-note__icon svg { width: 18px; height: 18px; }
.hs-note strong { display: block; font-size: 13.5px; }
.hs-note span { font-size: 12.5px; color: var(--gray-600); }
.hs-shop__stage { position: relative; min-height: 460px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px 24px 24px; perspective: 1200px; }
.hs-orb { position: absolute; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(30, 75, 255, 0.16), rgba(30, 75, 255, 0.03)); filter: blur(2px); animation: hs-float 7s ease-in-out infinite; }
.hs-orb--a { width: 80px; height: 80px; right: 12%; top: 10%; }
.hs-orb--b { width: 60px; height: 60px; left: 10%; bottom: 22%; animation-delay: -3s; }
@keyframes hs-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(6deg); } }
.hs-spin { width: min(360px, 100%); height: 360px; position: relative; transform-style: preserve-3d; animation: hs-hover 6s ease-in-out infinite; }
@keyframes hs-hover { 0%, 100% { transform: rotateY(-8deg) rotateX(4deg) translateY(0); } 50% { transform: rotateY(8deg) rotateX(-4deg) translateY(-12px); } }
/* Each picture is a link to the product in it. Only the one on screen
   takes a press: the other seven sit under it and would otherwise catch
   the tap meant for this one. */
.hs-spin__go { position: absolute; inset: 0; display: block; pointer-events: none; }
.hs-spin__go.is-on { pointer-events: auto; }
.hs-spin__go:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 6px; border-radius: 12px; }
.hs-spin img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: rotateY(90deg) scale(0.92); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); filter: drop-shadow(0 30px 30px rgba(15, 23, 42, 0.22)); }
.hs-spin img.is-on { opacity: 1; transform: rotateY(0) scale(1); }
.hs-spin__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.hs-spin__ph svg { width: 90px; height: 90px; color: var(--blue-600); }
.hs-shop__caption { margin-top: 10px; padding: 6px 14px; border-radius: 999px; background: var(--white); border: 1px solid var(--border); font-size: 13px; font-weight: 700; box-shadow: var(--shadow-soft); }
.hs-shop__caption a { color: inherit; text-decoration: none; display: inline-block; }
.hs-shop__caption a:hover { text-decoration: underline; }
.hs-shop__caption span { color: var(--blue-600); }
.hs-dots { display: flex; gap: 5px; margin-top: 10px; }
.hs-dots i { width: 5px; height: 22px; border-radius: 3px; background: #dbe2f4; transition: background 0.3s, width 0.3s; }
.hs-dots i.is-on { background: var(--blue-600); width: 18px; }
.hs-shop__cats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; padding: 0 24px 24px; border-top: 1px solid var(--border); padding-top: 20px; }
.hs-cat { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 10px; border-radius: 14px; background: var(--white); border: 1px solid var(--border); text-decoration: none; color: var(--ink-900); font-size: 13px; font-weight: 600; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.hs-cat:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.hs-cat__img { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #f1f3f9; }
.hs-cat__img img { width: 100%; height: 100%; object-fit: cover; }
.hs-cat__img svg { width: 28px; height: 28px; color: var(--blue-600); }
.hs-cat small { font-weight: 500; color: var(--gray-600); }

/* ---- Best sellers ---- */
/* minmax(0, ...) on both tracks: a grid track's smallest size is its content
   by default, so a long product name or a wide picture pushed the side
   column past the row and the tiles were cut off mid-word at the edge. */
.hs-best { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1.15fr); gap: 16px; }
.hs-feature { position: relative; border-radius: 22px; overflow: hidden; border: 1px solid var(--border); height: clamp(240px, 42vw, 480px); background: #0b1230; }
.hs-feature__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.7s var(--ease); text-decoration: none; color: #fff; }
.hs-feature__slide.is-on { opacity: 1; }
.hs-feature__slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 8s linear; }
.hs-feature__slide.is-on img { transform: scale(1); }
.hs-feature__slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.72)); }
.hs-feature__copy { position: absolute; left: 24px; right: 24px; bottom: 24px; z-index: 1; }
.hs-feature__cat { display: inline-block; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 10px; }
.hs-feature__name { display: block; font-size: clamp(18px, 2.4vw, 26px); font-weight: 800; margin-bottom: 6px; }
.hs-feature__price { font-size: 20px; font-weight: 800; }
.hs-feature__nav { position: absolute; right: 18px; top: 18px; z-index: 2; display: flex; gap: 6px; }
.hs-feature__nav button { width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.86); color: var(--ink-900); font-size: 16px; cursor: pointer; }
/* Beside the feature, the mini column matched the feature's height instead of
   running taller: four tiles in a 2x2 that fills the same height, so the two
   columns line up. */
@media (min-width: 901px) {
  .hs-best .hs-grid { align-content: stretch; grid-auto-rows: minmax(0, 1fr); height: clamp(240px, 42vw, 480px); }
  .hs-best .hs-grid > .hs-mini:nth-child(n+5) { display: none; }
}
.hs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-width: 0; }
.hs-mini { position: relative; display: block; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); background: var(--white); text-decoration: none; color: var(--ink-900); transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.hs-mini:hover { box-shadow: 0 16px 30px rgba(15, 23, 42, 0.14); }
/* Product pictures are mostly wide (about 16:9), so the frame is wide too:
   the picture fills it edge to edge with only a sliver trimmed, instead of
   being squeezed into a near-square box that cut the sides off every logo. */
.hs-mini__media { aspect-ratio: 16 / 10; background: #eef1f8; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hs-mini__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.hs-mini__media svg { width: 40px; height: 40px; color: var(--blue-600); }
.hs-mini__badge { position: absolute; right: 8px; top: 8px; padding: 3px 8px; border-radius: 999px; background: var(--green-600); color: #fff; font-size: 10.5px; font-weight: 700; }
.hs-mini__body { padding: 10px 12px 12px; }
/* Two lines for every name, even a short one, so the prices under the
   cards line up across the row instead of sitting at different heights. */
.hs-mini__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font-size: 13px; line-height: 1.3; min-height: calc(13px * 1.3 * 2); font-weight: 700; }
.hs-mini__price { display: block; margin-top: 4px; font-size: 13px; color: var(--gray-600); }

/* ---- Gift card block ---- */
.hs-gift { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.hs-pill--gold { background: #fff4e0; color: #b45309; border-color: #fde3b6; }
.hs-grad--gold { background: linear-gradient(90deg, #f59e0b, #f97316); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hs-gift .hs-points svg { color: #f59e0b; }
.btn-solid.btn-solid--gold { background: linear-gradient(90deg, #f59e0b, #f97316); border-color: transparent; }
/* The deck and the dots under it, stacked. The stage was a row, so the dots
   landed beside the cards rather than below them. */
/* The fanned cards lean past the stage by about 45px each side. Clipped
   sideways only, never vertically: the lift and the shadow under the front
   card are part of the fan, and a page is not allowed to grow wider than
   the screen for them. */
.hs-gift__stage { overflow-x: clip; overflow-y: visible; position: relative; min-height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center; perspective: 1400px; }
.hs-card3d { width: min(380px, 100%); aspect-ratio: 1.6; border-radius: 22px; position: relative; color: #fff; background: linear-gradient(135deg, #0b1230 0%, #1a2a6c 60%, #1e4bff 100%); box-shadow: 0 30px 60px rgba(15, 23, 42, 0.35); transform-style: preserve-3d; animation: hs-card 8s ease-in-out infinite; padding: 26px 28px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
@keyframes hs-card { 0%, 100% { transform: rotateY(-14deg) rotateX(6deg); } 50% { transform: rotateY(14deg) rotateX(-6deg) translateY(-8px); } }
.hs-card3d::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.22) 45%, transparent 60%); animation: hs-sheen 5s linear infinite; }
@keyframes hs-sheen { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.hs-card3d__top { display: flex; justify-content: space-between; align-items: flex-start; }
.hs-card3d__brand { font-weight: 800; letter-spacing: 0.14em; font-size: 15px; }
.hs-card3d__brand small { display: block; font-weight: 500; letter-spacing: 0.1em; opacity: 0.6; font-size: 10px; margin-top: 3px; }
.hs-card3d__chip { width: 44px; height: 32px; border-radius: 7px; background: linear-gradient(135deg, #f7d774, #d9a441); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.12); }
.hs-card3d__num { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.22em; font-size: 17px; opacity: 0.9; }
.hs-card3d__name { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.95; }
.hs-card3d__name small { display: block; font-size: 9.5px; opacity: 0.6; letter-spacing: 0.14em; margin-bottom: 3px; }
/* The gift-card deck: a fan of real cards, after the stack the owner sent
   (21st.dev). Each card is placed by four variables the script sets, so the
   layout maths lives in one place and the browser animates between them.

   What this replaced: a single card that rotated to 90 degrees and changed
   its artwork halfway through, in full view. Two cards were drawn over each
   other for a quarter of a second every cycle, which is what "the animation
   looks broken" was. */
.hs-gdeck {
  width: min(380px, 100%);
  aspect-ratio: 1.6;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(4deg);
}
.hs-gcard {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(135deg, #0b1230, #1a2a6c 60%, #1e4bff);
  box-shadow: 0 24px 50px rgba(15, 23, 42, 0.28);
  cursor: pointer;
  transform-style: preserve-3d;
  /* The fan: along the arc, back into the depth, leaned over, and tipped
     away unless it is the one in front. --drag follows a finger while the
     deck is being flicked through, so the card moves with the hand rather
     than after it. */
  transform:
    translate3d(calc(var(--x, 0px) + var(--drag, 0px)), var(--y, 0), var(--depth, 0))
    rotateX(var(--tilt, 0deg))
    rotate(var(--turn, 0deg))
    scale(var(--scale, 1));
  transition:
    transform 0.62s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.45s ease,
    box-shadow 0.45s ease;
}
.hs-gcard.is-front { box-shadow: 0 40px 72px rgba(15, 23, 42, 0.36); }
/* A finger on the deck should feel like a hand on the cards. */
.hs-gcard.is-front:active { cursor: grabbing; }

/* There were two big blurred washes behind the fan here, my own addition
   when the deck was ported. On a narrow screen they read as a grey smudge
   around the card rather than light, so they are gone. The card's own
   shadow is what gives it its place. */
.hs-gdeck { z-index: 1; }
.hs-gcard img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hs-gcard:focus-visible { outline: 3px solid var(--brand-500, #0164ce); outline-offset: 3px; }

/* Which card is in front, for a glance and for a tap. */
.hs-gdots { display: flex; justify-content: center; gap: 7px; margin: 18px 0 0; }
.hs-gdot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--ink-900, #0b1220) 22%, transparent);
  cursor: pointer; transition: background 0.3s ease, transform 0.3s ease;
}
.hs-gdot.is-on { background: var(--brand-500, #0164ce); transform: scale(1.35); }

/* Fallback face when a card has no art. */
.hs-gcard__mock { position: absolute; inset: 0; padding: 26px 28px; color: #fff; display: flex; flex-direction: column; justify-content: space-between; }
.hs-gcard__mock .b { font-weight: 800; letter-spacing: 0.14em; font-size: 15px; }
.hs-gcard__mock .b small { display: block; font-weight: 500; letter-spacing: 0.1em; opacity: 0.6; font-size: 10px; margin-top: 3px; }
.hs-gcard__mock .n { font-size: 15px; letter-spacing: 0.04em; }
.hs-gcard__mock .n small { display: block; font-size: 9.5px; opacity: 0.6; letter-spacing: 0.14em; margin-bottom: 3px; }
.hs-gcard__mock .chip { width: 44px; height: 32px; border-radius: 7px; background: linear-gradient(135deg, #f7d774, #d9a441); box-shadow: inset 0 0 0 2px rgba(0,0,0,0.12); }
.hs-gcard__mock .row { display: flex; justify-content: space-between; align-items: flex-start; }
@media (prefers-reduced-motion: reduce) { .hs-gcard { transition: none; } }

.hs-float { position: absolute; width: max-content; height: max-content; align-self: start; justify-self: start; padding: 8px 14px; border-radius: 999px; background: var(--white); border: 1px solid var(--border); box-shadow: var(--shadow-soft); font-size: 13px; font-weight: 700; animation: hs-float 6s ease-in-out infinite; z-index: 5; }
.hs-float--a { left: 0; bottom: 18%; color: #b45309; }
.hs-float--b { right: 0; top: 16%; color: var(--green-600); animation-delay: -2.5s; }
.hs-float--b::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green-600); margin-right: 6px; }

/* ---- Popular brands rows ---- */
.hs-brands .hs-tile { width: 220px; height: 138px; }

/* ---- eSIM block ---- */
.hs-esim { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 40px 0; }
.hs-pill--teal { background: rgba(20, 184, 166, 0.1); color: #0f766e; border-color: rgba(20, 184, 166, 0.25); }
.hs-grad--teal { background: linear-gradient(90deg, #06b6d4, #14b8a6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hs-esim__feats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 22px; padding: 0; list-style: none; }
.hs-esim__feats li { display: flex; gap: 12px; align-items: flex-start; }
.hs-esim__ico { width: 44px; height: 44px; border-radius: 12px; background: rgba(6, 182, 212, 0.1); color: #0e7490; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.hs-esim__ico svg { width: 22px; height: 22px; }
.hs-esim__feats strong { display: block; font-size: 14px; }
.hs-esim__feats span { font-size: 13px; color: var(--gray-600); }
.btn-solid.btn-solid--teal { background: linear-gradient(90deg, #0891b2, #0f766e); border-color: transparent; }
.hs-esim__stage { position: relative; min-height: 420px; display: flex; align-items: center; justify-content: center; perspective: 1400px; }
.hs-phone { width: 230px; height: 440px; border-radius: 40px; background: #0b1230; border: 8px solid #101833; box-shadow: 0 40px 70px rgba(15, 23, 42, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.06); position: relative; color: #fff; padding: 26px 18px; display: flex; flex-direction: column; align-items: center; transform-style: preserve-3d; animation: hs-phone 9s ease-in-out infinite; }
@keyframes hs-phone { 0%, 100% { transform: rotateY(-12deg) rotateX(4deg) rotate(-4deg); } 50% { transform: rotateY(10deg) rotateX(-3deg) rotate(-1deg) translateY(-10px); } }
.hs-phone__bar { display: flex; justify-content: space-between; width: 100%; font-size: 12px; opacity: 0.85; }
.hs-phone__app { margin-top: 70px; width: 72px; height: 72px; border-radius: 20px; background: rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: center; }
.hs-phone__app svg { width: 30px; height: 30px; }
.hs-phone__title { margin-top: 18px; font-size: 22px; font-weight: 800; }
.hs-phone__sub { font-size: 13px; opacity: 0.65; }
.hs-phone__panel { margin-top: auto; width: 100%; border-radius: 18px; background: rgba(255, 255, 255, 0.92); color: var(--ink-900); padding: 14px 16px; }
.hs-phone__panel small { font-size: 10px; letter-spacing: 0.1em; font-weight: 700; text-transform: uppercase; color: var(--gray-600); }
.hs-phone__panel strong { display: block; font-size: 26px; margin-top: 2px; }
.hs-phone__panel strong small { font-size: 12px; letter-spacing: 0; text-transform: none; margin-left: 4px; }
.hs-phone__bar-line { height: 5px; border-radius: 3px; background: #e5e9f4; margin-top: 8px; overflow: hidden; }
.hs-phone__bar-line i { display: block; height: 100%; width: 72%; background: linear-gradient(90deg, #06b6d4, #14b8a6); }
.hs-esim .hs-float--a { color: #0e7490; top: 30%; }
.hs-esim .hs-float--b { top: auto; bottom: 30%; }

/* ---- shared ---- */
.hs-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.hs-reveal.is-in { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .hs-shop, .hs-gift, .hs-esim, .hs-best { grid-template-columns: minmax(0, 1fr); }
  .hs-shop__copy { padding: 26px 20px 8px; }
  .hs-shop__stage { min-height: 360px; padding: 22px 16px 18px; }
  .hs-spin { width: min(300px, 100%); height: 300px; }
  .hs-tile { width: 178px; height: 112px; }
  .hs-brands .hs-tile { width: 170px; height: 106px; }
  .hs-grid { grid-template-columns: repeat(3, 1fr); }
  .hs-feature { height: clamp(200px, 56vw, 320px); }
  .hs-gift__stage, .hs-esim__stage { min-height: 260px; }
  /* The phone is taller than the stage above, so it hung over the next
     section. The stage now holds it, with room for its float. */
  .hs-esim__stage { min-height: 390px; overflow: hidden; padding: 12px 0; }
  .hs-phone { width: 190px; height: 360px; }
  .hs-esim { gap: 20px; padding: 24px 0; }
  .hs-esim__feats { grid-template-columns: minmax(0, 1fr); }
  .hs-float { display: none; }
}
@media (max-width: 480px) { .hs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Reduced motion: the decorative floating, spinning and orbiting stop, and
   the rolling rows slow to a third of their speed (they pause under the
   pointer). Hover tilt stays, because it only moves when the person does. */
@media (prefers-reduced-motion: reduce) {
  .hs-spin, .hs-card3d, .hs-card3d::before, .hs-phone, .hs-orb, .hs-float, .hs-pill::before { animation: none !important; }
  .hs-marquee__track { animation-duration: calc(var(--hs-dur, 40s) * 3); }
  .hs-reveal { opacity: 1; transform: none; }
}


/* ---- Ways to pay: rolling 3D badges ---- */
.pay { overflow: hidden; }
.pay .section__head--center { text-align: center; justify-content: center; margin-bottom: 26px; }
/* overflow: hidden, not the mask alone. The mask only decides what is
   PAINTED; the track is still 2327px wide in layout, and nothing between it
   and <html> clipped it, so the page measured 2327px across on a 390px
   phone. The root rule below hid that on browsers that take overflow:clip,
   and on the ones that do not it showed as a white strip down the right
   edge, which the owner photographed on 7 Oct 2026. The row clips itself
   now, so no page depends on the root rule to stay its own width. */
.pay__marquee { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); padding: 18px 0 26px; }
.pay__track { display: flex; width: max-content; animation: pay-roll 42s linear infinite; will-change: transform; }
.pay__marquee:hover .pay__track, .pay__marquee:focus-within .pay__track { animation-play-state: paused; }
.pay__set { display: flex; align-items: center; gap: 60px; padding-right: 60px; }
/* Real payment brand marks in one quiet rolling row, no card chrome. They
   sit a touch muted at rest and come to full colour under the pointer, the
   way a trust bar reads on a checkout, not a wall of identical tiles. */
.pay-logo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 40px;
  opacity: 0.82;
  filter: saturate(0.9);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), filter 0.3s var(--ease);
}
.pay-logo svg { height: 38px; width: auto; display: block; }
.pay-logo:hover, .pay-logo:focus-visible { opacity: 1; filter: saturate(1.08); transform: translateY(-2px); }
@keyframes pay-roll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 640px) {
  .pay-logo { height: 32px; }
  .pay-logo svg { height: 30px; }
  .pay__set { gap: 38px; padding-right: 38px; }
  .pay__track { animation-duration: 34s; }
}
@media (prefers-reduced-motion: reduce) {
  .pay__track { animation-duration: 120s; }
}

.hs__sub-note { margin: -6px 0 14px; font-size: 13.5px; color: var(--gray-600); }

/* ---- Pre-Order & Upcoming: poster cards with a countdown ---- */
.hs__head--pre h2 { gap: 10px; }
.hs__spark { display: inline-flex; width: 30px; height: 30px; border-radius: 9px; align-items: center; justify-content: center; background: linear-gradient(135deg, #f59e0b, #ea580c); color: #fff; box-shadow: 0 6px 14px -6px rgba(234, 88, 12, 0.7); }
.hs__spark svg { width: 16px; height: 16px; color: #fff; }
.hs__rule--pre { background: linear-gradient(90deg, rgba(245, 158, 11, 0.45), transparent); }
.hs-pre-row__nav { display: inline-flex; gap: 6px; }
.hs-pre-row__nav button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: var(--white); color: var(--ink-900); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s, opacity 0.15s; }
.hs-pre-row__nav button svg { width: 16px; height: 16px; }
.hs-pre-row__nav button:hover { background: var(--gray-100); }
.hs-pre-row__nav button:disabled { opacity: 0.35; cursor: default; }
.hs-pre-row { margin: 0 calc(50% - 50vw); padding: 6px 0 12px; }
.hs-pre-row__track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px max(16px, calc(50vw - 590px)) 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hs-pre-row__track::-webkit-scrollbar { display: none; }
.hs-pre { position: relative; flex: 0 0 auto; width: 300px; aspect-ratio: 300 / 430; border-radius: 22px; overflow: hidden; scroll-snap-align: start; background: #0f1320; color: #fff; text-decoration: none; display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; box-shadow: 0 14px 34px -14px rgba(7, 26, 77, 0.55); transform-style: preserve-3d; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0)); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.hs-pre:hover { --ty: -6px; box-shadow: 0 26px 46px -16px rgba(7, 26, 77, 0.65); text-decoration: none; color: #fff; }
.hs-pre__art { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #1e2a4a, #0f1320); }
.hs-pre__art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease); }
.hs-pre:hover .hs-pre__art img { transform: scale(1.06); }
.hs-pre__art svg { width: 44%; height: 44%; color: rgba(255, 255, 255, 0.28); }
.hs-pre__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 10, 20, 0.05) 0%, rgba(8, 10, 20, 0.15) 40%, rgba(8, 10, 20, 0.88) 78%, #0b0e1a 100%); }
.hs-pre__top { position: absolute; top: 14px; left: 14px; right: 14px; z-index: 2; display: flex; align-items: center; gap: 8px; }
.hs-pre__pill, .hs-pre__days { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hs-pre__pill { color: #fbbf24; background: rgba(120, 72, 8, 0.55); border: 1px solid rgba(251, 191, 36, 0.55); }
.hs-pre__days { color: #fff; background: rgba(10, 12, 22, 0.6); border: 1px solid rgba(255, 255, 255, 0.16); text-transform: none; letter-spacing: 0; font-size: 13px; }
.hs-pre__pill svg, .hs-pre__days svg, .hs-pre__date svg { width: 15px; height: 15px; flex: 0 0 auto; }
.hs-pre__body { position: relative; z-index: 2; padding: 0 18px 18px; display: flex; flex-direction: column; gap: 8px; }
.hs-pre__date { display: inline-flex; align-items: center; gap: 7px; color: #fbbf24; font-size: 13px; font-weight: 600; }
.hs-pre__name { font-family: var(--font-heading); font-size: 20px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hs-pre__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hs-pre__chips span { display: inline-block; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.1); }
.hs-pre__foot { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; }
.hs-pre__price { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.hs-pre__stock { font-size: 13px; font-weight: 600; color: #4ade80; }
.hs-pre__stock--out { color: #fb7185; }
@media (max-width: 640px) {
  .hs-pre { width: 240px; border-radius: 18px; }
  .hs-pre__name { font-size: 17px; }
  .hs-pre__price { font-size: 19px; }
  .hs-pre-row__track { gap: 12px; padding-left: 16px; padding-right: 16px; }
}

.hs__eyebrow, .hs-feature__cat, .hs-card3d__name, .hs-phone__panel small { text-transform: none; letter-spacing: 0.01em; }
.hs__eyebrow { font-size: 12.5px; font-weight: 600; }