/* ==========================================================================
   1xBet Nepal x NPL 2026 — landing styles

   Colour roles, one colour one job. Any colour that starts doing two jobs
   breaks the system, so this list is the contract:

     NAVY   #122754  the page itself. Sampled from nplt20league.com, where it
                     covers eleven large blocks. This is the single most
                     recognisable thing about their site.
     PLATE  #0f172a  cards and panels. Darker than the page, which is how NPL
                     builds it — their plates sit *into* the blue, not on top
                     of it. Note this is the inverse of the LaLiga landing
                     this file grew from, where panels were lighter than a
                     near-black base. Flipping it was the point.
     CYAN   #53eafd  the NPL layer: the hero plate, tags, card actions, step
                     numbers. Structure and identity, never the main action.
     GOLD   #FFC72C  the offer: the amount the visitor walks away with, and
                     the button that gets it. Nothing else.
     RED    #DC2448  live and urgency. Nothing else.

   Green is gone. It used to carry the CTA, but white on it measured 2.7:1 —
   below the 4.5 floor — and it was the one warm-adjacent colour fighting the
   gold. The CTA is now gold with near-black type at 12.1:1, which is both the
   most legible pairing on the page and the warmest thing on a blue page, so
   it reads as the one thing to press.

   There are no glows. Every former `0 0 Npx` halo is removed: on buttons, on
   tags, on the heading colour, on the LIVE pill, on the ticker amounts, on
   card hover. Depth comes from the surface gradients and from --lift, which
   is a cast shadow with offset and direction, not light leaking from an edge.

   1xBet's brand blue #007ACC is deliberately absent from the accents. It sits
   17 degrees from the NPL cyan (204 against 187), and two accents that close
   read as one badly mixed shade rather than as a system. The bookmaker is
   carried by the logo. The dark navy base is the common ground: it is NPL's
   background and it is also 1xBet's register, their navy being #002F5E.

   Cyan is separated from the page not by hue but by lightness: L66 against
   L20. That is also how the NPL site does it.

   Measured contrast on the page navy #122754:
     white  14.5:1    cyan  10.1:1    gold  9.4:1
   On the plate #0f172a:
     white  18.9:1    cyan  13.1:1    gold  12.2:1
   Ink #0a1020 on gold: 12.1:1.

   Scales. Every value below comes from one of these three lists; nothing is
   picked by eye.
     space   4 8 12 16 20 24 32 40 44 48 56 68 88
     type    11 12 13 14 16 18 20 24, plus the display clamps
     radius  8 (r-sm) 12 (r-btn) 18 (r-card) 999 (pill)
   ========================================================================== */

/* TWO FACES, AND THE SPLIT IS THE WHOLE SYSTEM.

     Oswald      display only: h1, h2, the promo code, the step numbers and
                 the amount in the sticky bar. A condensed grotesque with a
                 tall cap height, which is what lets the headline run 27%
                 larger in the same column. It tops out at 700 and needs no
                 negative tracking: a condensed face closes up on its own.
     Inter Tight everything a person reads at length or presses: body copy,
                 leads, small print, labels, every button. A condensed
                 display face in a paragraph costs reading speed, and a
                 button is a control, not a poster.

   Both are self-hosted latin subsets, 28 KB and 45 KB, both preloaded
   because both render above the fold. Oswald is SIL Open Font License 1.1,
   redistributable with the folder. */
@font-face{
  font-family:'Oswald';
  font-style:normal;
  font-weight:200 700;
  font-display:swap;
  src:url(fonts/oswald-var.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face{
  font-family:'Inter Tight';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(fonts/inter-tight-var.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --navy:       #122754;   /* the page */
  --navy-deep:  #0d1c3c;   /* bands that sit below the page, same hue */
  --navy-lift:  #16306a;   /* bands that sit above it */
  --plate:      #0f172a;   /* cards and panels */

  --cyan:       #53eafd;
  --cyan-ink:   #0a1020;   /* type that sits on cyan or on gold */
  --line:       rgba(83,234,253,.28);
  --line-soft:  rgba(83,234,253,.16);

  --gold:       #FFC72C;
  --gold-hi:    #FFDC6B;   /* the gradient high on the button, same hue */
  --gold-lo:    #E8A800;
  --red:        #DC2448;

  --white:      #FFFFFF;
  --muted:      rgba(255,255,255,.76);
  --dim:        rgba(255,255,255,.58);

  --maxw: 1240px;
  --pad-x: clamp(16px, 4vw, 64px);

  /* Three shapes plus a small one, and every element belongs to exactly one.
       999px  pills: tags and badges. Labels, never controls.
        18px  surfaces: cards, panels, bands.
        12px  controls: every button and the copy field.
         8px  small marks: the skip link, step numbers, the wallet pads. */
  --pill: 999px;
  --r-card: 18px;
  --r-btn: 12px;
  --r-sm: 8px;

  /* Panels are gradients, not flat fills: a flat plate on a navy page reads
     as a patch rather than as a surface. Light enters top-left and falls off,
     which is also where the hero light comes from. */
  --surface:      linear-gradient(168deg, rgba(83,234,253,.10) 0%, rgba(15,23,42,.97) 44%, #0b1120 100%);
  --surface-soft: linear-gradient(168deg, rgba(83,234,253,.06) 0%, rgba(15,23,42,.94) 54%, #0c121f 100%);

  /* A cast shadow: offset, directional, and the only depth device on the
     page. Nothing here emits light.

     Deliberately almost invisible. These were 14px down at 55% black, which
     on a navy page prints a dark bruise under every card and button and
     turns a hairline separation into a hard edge. The lift is now carried by
     the surface gradient and the hairline border; the shadow only keeps the
     element from looking painted onto the background. */
  --lift:      0 4px 14px rgba(3,8,20,.18);
  --lift-hi:   0 8px 22px rgba(3,8,20,.26);
  --lift-btn:  0 2px 8px rgba(3,8,20,.14);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  margin:0;
  background:var(--navy);
  color:var(--white);
  font:400 16px/1.6 'Inter Tight',system-ui,-apple-system,sans-serif;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}
img{display:block;max-width:100%}
/* Every raster image is wrapped in a <picture> that offers WebP first and
   falls back to the original PNG or JPG. display:contents removes the
   wrapper's own box, so the <img> stays the layout element and every rule
   below keeps addressing it directly -- no selector in this file had to
   change for the format swap. Safe here because <picture> carries no
   semantics of its own to lose, and the browsers that lack display:contents
   are the same ones that lack WebP: they take the fallback. */
picture{display:contents}
picture>source{display:none}
a{color:inherit;text-decoration:none}

/* Browser surfaces belong to the page too. Left at their defaults they hand
   the visitor a stock blue selection and a grey scrollbar on a navy page. */
::selection{background:var(--cyan);color:var(--cyan-ink)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}
html{scrollbar-color:rgba(83,234,253,.42) #0f172a;scrollbar-width:thin}
body{accent-color:#53eafd}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--plate)}
::-webkit-scrollbar-thumb{background:rgba(83,234,253,.38);border-radius:99px;border:3px solid var(--plate)}
::-webkit-scrollbar-thumb:hover{background:rgba(83,234,253,.58)}

.wrap{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding-left:max(var(--pad-x),env(safe-area-inset-left,0px));
  padding-right:max(var(--pad-x),env(safe-area-inset-right,0px));
}
/* Sections are separated by space, not by rules. Every hairline that used to
   run between blocks is gone — a page divided by full-width lines reads as a
   slide deck, and the lines were doing work that spacing and a tonal step do
   better. This one value sets the rhythm for every block on the page. */
.section{padding-block:clamp(56px,6vw,88px)}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:1000;
  padding:12px 20px;border-radius:var(--r-sm);background:var(--cyan);color:var(--cyan-ink);
  font:900 13px/1 'Inter Tight',sans-serif;
}
.skip-link:focus{left:0}

/* ==========================================================================
   TYPE — Oswald, uppercase, tight leading, no tracking, white. Colour
   lives in the letters of one phrase — the amount in the hero — and
   nowhere else. No display line ends in a full stop.
   ========================================================================== */
h1,h2{margin:0;color:var(--white);text-transform:uppercase;text-wrap:balance}
/* Sized against the hero's left column, not the viewport, and measured on
   the live page with canvas measureText rather than estimated: in Oswald 700
   the longer line, DEPOSIT 1,500 NPR, renders 7.93x its font size, and
   GET 250 NPR FREE renders 7.48x. The 563px column therefore takes 71px
   before the first line breaks, so the cap is 68 with the rounding margin.
   That is 27% larger than the Inter Tight setting at the same column width,
   which is where the extra size comes from — not from letting it overrun.

   The vw term is tuned for the two-column hero. Below 900px the copy gets
   the full page width and the cap rises; see the 900px block.

   Re-measure both ratios against the live page after any change to the
   typeface, the tracking or this wording. */
h1{font:700 clamp(40px,6.1vw,71px)/0.98 'Oswald',sans-serif;letter-spacing:0}
h2{font:700 clamp(30px,5vw,64px)/0.98 'Oswald',sans-serif;letter-spacing:0}

/* The amount, coloured rather than plated. It was a solid cyan block behind
   the whole second line; the client asked for the colour to sit in the
   letters and for only the amount to carry it, so "GET" stays white and
   "250 NPR FREE" goes cyan. Cyan and not gold: gold now belongs to the
   button 24px below, and a gold headline directly above a gold button makes
   two gold objects where there should be one. Measured over the darkest
   part of the photograph the words land on — see the contrast table in the
   header. */
.hl{color:var(--cyan)}

.lead{
  margin:20px 0 0;max-width:56ch;
  font:400 clamp(16px,1.3vw,18px)/1.55 'Inter Tight',sans-serif;color:var(--muted);
  /* Stops the last line being one orphaned word. Browsers without it fall
     back to normal wrapping, and the nbsp bindings in the markup still
     hold the short words together. */
  text-wrap:pretty;
}
/* One body style for every supporting paragraph on the page. Three near-
   identical sizes used to do this job. */
.copy{margin:16px 0 0;max-width:56ch;font:400 16px/1.6 'Inter Tight',sans-serif;color:var(--muted);text-wrap:pretty}
/* A clause that must arrive whole on its own line. Used once, on the lead's
   closing phrase: the em dash was ending the line above it, which reads as a
   broken word. Measured at 320 the phrase is 232px inside a 294px column, so
   it never has to break; if the measure ever drops below that it wraps rather
   than overflowing, because nowrap only forbids the break, it does not widen
   the box. */
.nb{white-space:nowrap}

/* ==========================================================================
   TAGS — round pills, reserved for labels that carry data. A pill that says
   nothing the heading does not already say is decoration, and there are none.
   ========================================================================== */
.tagstrip{display:flex;flex-wrap:wrap;gap:8px}
.tag{
  display:inline-flex;align-items:center;gap:8px;
  height:28px;padding:0 16px;border-radius:var(--pill);
  font:900 11px/1 'Inter Tight',sans-serif;text-transform:uppercase;letter-spacing:.04em;
  white-space:nowrap;
}
.tag-solid{background:var(--cyan);color:var(--cyan-ink)}
.tag-ghost{
  background:rgba(255,255,255,.08);color:var(--white);
  border:1px solid rgba(255,255,255,.34);
  font-variant-numeric:tabular-nums;
}

/* ==========================================================================
   BUTTONS — gold is the conversion CTA and appears nowhere else as a fill.
   Near-black type on it, 12.1:1. No halo: the button is already the only warm
   object on a blue page, which is what makes it the obvious thing to press.
   Three heights, not six: 44 for inline and card actions, 52 standard,
   60 for the two places the page actually asks for the click.
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:52px;padding:0 32px;border-radius:var(--r-btn);border:none;
  font:900 14px/1 'Inter Tight',sans-serif;text-transform:uppercase;letter-spacing:.03em;
  cursor:pointer;white-space:nowrap;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.btn-primary{
  background:linear-gradient(180deg,var(--gold-hi) 0%,var(--gold) 50%,var(--gold-lo) 100%);
  color:var(--cyan-ink);
  box-shadow:var(--lift-btn), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-primary:hover{
  transform:translateY(-2px);
  background:linear-gradient(180deg,#FFE48A 0%,#FFD24F 50%,#F2B400 100%);
  box-shadow:var(--lift-hi), inset 0 1px 0 rgba(255,255,255,.6);
}
.btn-loud,.btn-giant{height:60px;padding:0 36px;font-size:16px}
.btn-giant{min-width:min(100%,280px)}

/* ==========================================================================
   NAV
   ========================================================================== */
/* No bottom rule. A sticky header needs to separate from what scrolls under
   it, and a cast shadow does that without drawing a line across the page. */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(13,28,60,.94);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 4px 18px rgba(3,8,20,.20);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
/* Two marks, one lockup: the bookmaker and the tournament the page is about.
   Each logo keeps its own aspect ratio, because a shared height rule plus a
   wrong ratio is what squashed the mark on three earlier landings. flex:none
   is load-bearing — without it the row squeezes the logos before the CTA. */
.nav-brand{display:flex;align-items:center;gap:clamp(12px,1.4vw,16px)}
/* The mark is 30px tall; the link around it is padded out to the 44px
   minimum target rather than leaving a 30px tap area in the corner. */
.nav-brand a{display:flex;align-items:center;min-height:44px}
.nav-logo{flex:none;height:30px;width:auto;aspect-ratio:381/120}
.nav-div{flex:none;width:1px;height:24px;background:rgba(255,255,255,.22)}
.nav-league{flex:none;height:32px;width:auto;aspect-ratio:713/287}
/* 24px against the pair's own 8px: grouping is carried entirely by the
   spacing ratio, so the geo pair binds before the eye reaches the button. */
.nav-actions{display:flex;align-items:center;gap:24px}
.nav-geo{
  display:inline-flex;align-items:center;gap:8px;
  color:rgba(255,255,255,.66);
  font:700 13px/1 'Inter Tight',sans-serif;white-space:nowrap;letter-spacing:.01em;
}
/* A map pin carries its mass in the bulb, not at the tip, so its optical
   centre sits above its geometric one. This lifts it onto the text midline. */
.nav-geo svg{width:16px;height:16px;flex:none;transform:translateY(-1.5px)}
/* 44px, the minimum target size, not the 42 it used to be. */
.nav-cta{height:44px;padding:0 20px;font-size:13px;flex:none}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;overflow:hidden;padding-block:clamp(32px,4vw,48px) 0}
.hero-bg{position:absolute;inset:0;z-index:0}
/* Anchored to the top of the photograph: the floodlights and the top of the
   stands are the band that has to survive a wide crop. */
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 0%}
/* The supplied stadium shot has a lit floodlight tower and bright stands in
   its left third, which is exactly where the copy lands, so the left wash is
   heavier here than a quieter photograph would need. The second layer fades
   the bottom edge into the page navy so the photograph does not end on a
   hard horizontal line — and so the hero needs no rule under it. */
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(10,19,44,.94) 0%, rgba(12,24,54,.84) 34%, rgba(18,39,84,.34) 64%, rgba(18,39,84,.06) 100%),
    linear-gradient(180deg, rgba(10,19,44,.42) 0%, rgba(18,39,84,0) 24%, rgba(18,39,84,.62) 80%, var(--navy) 100%);
}
/* The copy column is the wider one: it carries the headline, and the headline
   is what sets the hero's size. 1.14 against 1 gives it 571px at 1440. */
.hero-in{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,1fr);
  gap:clamp(24px,3vw,40px);align-items:center;
  padding-bottom:clamp(32px,4vw,56px);
}
.hero-copy{min-width:0}
.hero-in h1{margin-top:20px}

.hero-stage{position:relative;min-width:0}
/* Backlight behind the figures. Weak on purpose: the stadium behind it has to
   stay readable, so this is a wide, heavily blurred wash rather than a lamp.
   Its own element and not a filter on the image, because a filter would blur
   the players, and a drop-shadow would trace an even rim around the
   silhouette and read as a sticker.

   Two lamps, both low: a broad one behind the pair and a flatter, wider one
   along the floor under them. A single ellipse either stays invisible or
   turns into a flat disc once its opacity is raised far enough to see. */
.hero-glow{
  position:absolute;left:50%;bottom:4%;transform:translateX(-50%);
  width:min(100%,700px);height:min(78%,470px);border-radius:50%;
  z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 54%,
    rgba(150,240,255,.26) 0%,
    rgba(83,234,253,.17) 34%,
    rgba(40,150,220,.09) 58%,
    transparent 76%);
  filter:blur(68px);
}
/* The floor light: it lands under the boots and the trophy base, which is
   what stops a cut-out from looking pasted onto a photograph. */
.hero-glow::after{
  content:"";position:absolute;left:50%;bottom:4%;transform:translateX(-50%);
  width:86%;height:16%;border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%,
    rgba(170,245,255,.30) 0%,
    rgba(83,234,253,.15) 45%,
    transparent 74%);
  filter:blur(34px);
}
/* One supplied group cut-out rather than figures positioned against each
   other, so the arrangement is baked into the file. It runs wider than its
   column on purpose -- the figures are the hero's subject.

   Measured against the supplied file: 1122 x 1402, and the artwork touches
   the bottom edge of its own canvas with no transparent margin, so the legs
   are a hard crop and the trophy base sits in the last 8%. The fade therefore
   runs only over the last 10% -- enough to dissolve the crop line, not enough
   to eat the NPL plate on the base. Starting it at 84%, which suited the
   landscape placeholder, took the plate with it.

   It is only safe as a mask here because the light above is a separate
   element: a mask and a filter on the same element clip the filter output to
   the box and draw a visible rectangle of light.

   116% and not 124%: the file is portrait where the placeholder was
   landscape, so the same multiplier made the figures 785px tall and pushed
   the hero to 889 on a 940 viewport. */
.hero-players{
  position:relative;z-index:2;
  width:116%;max-width:none;margin-left:-8%;height:auto;
  mask-image:linear-gradient(180deg,#000 0%,#000 90%,rgba(0,0,0,.62) 96%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 90%,rgba(0,0,0,.62) 96%,transparent 100%);
}

/* The button is locked to the promo block's width and sits directly under it.
   Before, it was a 250px pill floating under a 420px field with 50px of air
   between them, aligned to nothing — it read as having drifted loose. The
   code and the button are one step of one task, so they share an edge, a
   width and a gap.

   24px, exactly: the reserved status line used to sit between them and push
   the real gap to 41. The status moved below the button, where its reserved
   line is the last thing in the column and shifts nothing above it. */
.hero-actions{
  position:relative;z-index:3;margin-top:24px;max-width:420px;
  display:flex;gap:12px;align-items:stretch;
}
.hero-actions .btn{flex:1}

/* ==========================================================================
   PROMO CODE — the one thing the visitor has to carry from this page into
   the cashier, so it is a real input. The browser's own select-all and copy
   then work when the clipboard API is blocked, which is what happens inside
   messenger in-app browsers.
   ========================================================================== */
.promo{
  position:relative;z-index:3;
  margin-top:clamp(24px,2.6vw,32px);
  max-width:420px;
}
.promo-label{
  display:block;margin-bottom:8px;
  font:900 11px/1 'Inter Tight',sans-serif;color:var(--muted);
  text-transform:uppercase;letter-spacing:.07em;
}
.promo-row{
  display:flex;align-items:stretch;gap:8px;
  padding:8px;border-radius:var(--r-card);
  background:rgba(10,16,32,.86);border:1px solid var(--line);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
/* Reset, not restyle: a bare input on a dark page arrives with a white fill,
   a system border and a blue caret. White, not gold: gold now belongs to the
   button sitting directly below, and two gold objects stacked 16px apart
   stop telling the visitor which one to press. */
.promo-code{
  flex:1;min-width:0;
  margin:0;padding:0 16px;height:52px;
  border:none;border-radius:var(--r-btn);
  background:transparent;color:var(--white);
  font:700 clamp(21px,2.3vw,28px)/1 'Oswald',sans-serif;
  letter-spacing:.06em;font-variant-numeric:tabular-nums;
  caret-color:var(--cyan);
  text-overflow:ellipsis;
}
.promo-code:focus{outline:none}
.promo-row:focus-within{border-color:var(--cyan)}
/* Cyan, and secondary by construction: copying the code is a convenience on
   the way to the gold button, not the conversion itself. */
.promo-copy{
  flex:none;display:inline-flex;align-items:center;gap:8px;
  height:52px;padding:0 20px;border:none;border-radius:var(--r-btn);
  background:var(--cyan);color:var(--cyan-ink);
  font:900 13px/1 'Inter Tight',sans-serif;text-transform:uppercase;letter-spacing:.04em;
  cursor:pointer;white-space:nowrap;
  transition:background .18s ease,transform .18s ease;
}
.promo-copy svg{width:16px;height:16px;flex:none}
.promo-copy:hover{transform:translateY(-1px);background:#8df4ff}
/* The success state changes value rather than introducing a sixth colour,
   and the label changes to "Copied" at the same time. */
.promo-copy.is-done{background:var(--white);color:var(--cyan-ink)}
/* Sits below the button, not between it and the code. Its line is still
   reserved from the first paint so the page does not jump when the status
   text appears, but nothing above it moves either way. */
.promo-hint{
  position:relative;z-index:3;
  margin:12px 0 0;min-height:1.3em;max-width:420px;
  font:700 13px/1.3 'Inter Tight',sans-serif;color:var(--cyan);
}

/* ==========================================================================
   TICKER — the one marquee on the page. It needs no rules above or below:
   it is darker than the page on both edges, which is the separation.
   ========================================================================== */
.ticker{
  position:relative;display:flex;align-items:center;height:56px;
  overflow:hidden;white-space:nowrap;
  background:linear-gradient(180deg,#0e1f45 0%,#0a1630 100%);
}
/* Red, and red is only ever this: live and urgency. */
.ticker-pill{
  flex:none;display:inline-flex;align-items:center;gap:8px;
  margin-left:clamp(16px,4vw,32px);height:28px;padding:0 16px;border-radius:var(--pill);
  background:linear-gradient(180deg,#DC2448,#A81030);color:var(--white);
  font:900 11px/1 'Inter Tight',sans-serif;letter-spacing:.06em;white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
}
.pulse-dot{
  display:block;width:8px;height:8px;border-radius:50%;background:var(--white);
  animation:pulse 1.3s infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(1.35)}}
.ticker-viewport{flex:1;min-width:0;overflow:hidden}
.ticker-track{display:inline-flex;animation:ticker 52s linear infinite;will-change:transform}
.ticker-track:hover{animation-play-state:paused}
.ticker-track span{
  display:inline-flex;align-items:center;gap:8px;padding-inline:24px;
  font:700 14px/1 'Inter Tight',sans-serif;color:var(--muted);white-space:nowrap;
}
.ticker-track b{font-weight:700;color:var(--white)}
.ticker-track b.amt{color:var(--gold);font-variant-numeric:tabular-nums}
@keyframes ticker{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-50%,0,0)}}

/* ==========================================================================
   SECTION HEADS
   ========================================================================== */
.sec-head{margin-bottom:clamp(32px,3.4vw,48px);max-width:720px}


/* ==========================================================================
   SQUAD — six identical cards. No lead card and no spanning: six equal names
   get six equal tiles, and a hero card among them would claim a ranking the
   page has no basis for.
   ========================================================================== */
.squad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.pcard{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-card);
  box-shadow:var(--lift);
  transition:transform .26s ease,border-color .26s ease,box-shadow .26s ease;
}
.pcard:hover{transform:translateY(-4px);border-color:var(--line);box-shadow:var(--lift-hi)}
/* Top-left, over the shot, so the franchise reads before the face does. The
   crest files are normalised to one fill ratio inside a 240px canvas, so six
   logos drawn at six different scales render at the same visual size without
   a per-file rule here. */
.pcrest{
  position:absolute;top:16px;left:16px;z-index:2;
  width:clamp(44px,4.4vw,56px);height:auto;aspect-ratio:1;
  object-fit:contain;
  filter:drop-shadow(0 1px 5px rgba(3,8,20,.42));
}
/* Fixed height, not a flexible minimum: with six equal cards the shot area
   has to be identical in all of them, and a flex-grown box makes each card as
   tall as its own row.

   The 32px top padding is the fix for heads butting against the card's top
   edge. object-fit:contain scales the figure to the full box, so with no
   padding the tallest pixel lands exactly on the border and the portrait
   reads as cropped. The padding is inside the fixed height, so all six cards
   stay the same size and the figures still stand on the body below. */
.pcard-shot{
  position:relative;flex:none;height:clamp(262px,23vw,312px);
  padding:32px 16px 0;
  display:flex;align-items:flex-end;justify-content:center;
  background:radial-gradient(ellipse 70% 50% at 50% 106%, rgba(83,234,253,.14), transparent 70%);
}
.pcard-shot img{
  width:100%;height:100%;object-fit:contain;object-position:bottom center;
  /* The cut-outs are cropped at the waist, so the bottom edge is a hard line
     sitting just above the club label. Dissolving the last 14% turns that
     collision into a transition -- the gap below is then read as part of the
     photograph, not as a missing margin. */
  mask-image:linear-gradient(180deg,#000 0%,#000 86%,rgba(0,0,0,.35) 95%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 86%,rgba(0,0,0,.35) 95%,transparent 100%);
}
/* Grows, so the button sits on the same line in all six cards even though
   Dipendra Singh Airee wraps onto two lines and Karan KC does not. */
.pcard-body{flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding:16px 16px}
.pclub{display:block;font:700 11.5px/1.3 'Inter Tight',sans-serif;color:var(--cyan);text-transform:uppercase;letter-spacing:.03em}
.pcard-body strong{display:block;margin-top:6px;font:900 19px/1.15 'Inter Tight',sans-serif;text-transform:uppercase;letter-spacing:.015em}
/* Quiet by design, and inset to the same 16px as the text above it so the
   name and the button share a left edge. All six lead to the same offer, so
   six solid cyan bars would be six objects competing with the one gold CTA
   while promising six different things. An outlined control still reads as
   clickable and leaves the hierarchy intact. 44px is the minimum target. */
.pbtn{
  display:flex;align-items:center;justify-content:center;
  height:44px;margin:0 16px 16px;border-radius:var(--r-btn);
  background:rgba(83,234,253,.08);
  border:1px solid var(--line);
  color:var(--cyan);
  font:900 13px/1 'Inter Tight',sans-serif;text-transform:uppercase;letter-spacing:.05em;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.pbtn:hover{background:var(--cyan);border-color:var(--cyan);color:var(--cyan-ink)}

/* ==========================================================================
   PAYMENTS -- two vertical cards, and nothing behind them.

   The band this block used to sit on is gone. A full-width panel on a very
   slightly different navy is the worst of both options: too weak to read as
   a deliberate surface, strong enough to look like a rendering fault. The
   section now sits on the page like every other one, and what is singled out
   is the two methods themselves.

   Each card is two surfaces stacked, which is the whole point: the card lifts
   off the page by a hairline and a shadow, and the mark sits on a second,
   lighter panel inside it. Vertical, so the pair reads as one composition of
   two columns rather than as a list of rows.
   ========================================================================== */
/* Left column carries the heading, the sentence and the action. Right column
   carries the two methods. The split used to be 1 : 1.25 with the button
   under the cards, which stacked all the weight on the right -- the cards
   plus a full-width gold bar against two lines of type. Now the left gets the
   larger share and the action, and the two columns come out the same height. */
.pay-in{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(32px,3.4vw,56px);align-items:start;
}
.pay-copy .copy{max-width:42ch}
.pay-btn{margin-top:clamp(24px,2.6vw,32px);min-width:min(100%,260px)}
.wallets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch}
/* Three surfaces, each a hairline and a shade apart from the one under it:
   page, card, nested panel. That is the whole device -- the separation is
   compositional, not decorative, so none of the three steps is loud. */
.wallet{
  display:flex;flex-direction:column;
  padding:12px;border-radius:var(--r-card);
  background:var(--surface-soft);
  border:1px solid var(--line-soft);
  box-shadow:var(--lift);
  transition:border-color .26s ease,box-shadow .26s ease,transform .26s ease;
}
.wallet:hover{transform:translateY(-4px);border-color:var(--line);box-shadow:var(--lift-hi)}
/* The nested panel stays dark, like the card. Fixed height rather than an
   aspect ratio: the two cards have to agree, and a ratio would tie the
   panel's height to the column width. */
.wallet-art{
  display:grid;place-items:center;
  height:clamp(96px,8vw,116px);
  border-radius:var(--r-btn);
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.07);
}
/* The only white on the card is the footprint of the mark. Both logos are
   dark-on-light artwork and neither reads on navy, so the chip is required --
   but a full white panel would shout where the reference whispers. */
.wallet-chip{
  display:grid;place-items:center;
  width:146px;height:52px;border-radius:var(--r-sm);
  background:linear-gradient(180deg,#FFFFFF 0%,#F0F3F8 100%);
  box-shadow:0 1px 5px rgba(3,8,20,.12);
}
/* The two chips are the same box, because two identical frames is what reads
   as a system. The marks inside them are matched optically, not by box: eSewa
   is a long wordmark 3.9 units wide and Khalti a compact one at 2.0, so one
   shared cap would print one of them at twice the other's weight. Each gets
   the height that makes it look the same size as the other. */
.wallet-chip img{max-width:84%;max-height:100%;width:auto;object-fit:contain}
.wallet-chip img[src*="esewa"]{max-height:26px}
.wallet-chip img[src*="khalti"]{max-height:34px}
.wallet-body{flex:1;display:flex;flex-direction:column;gap:6px;padding:14px 4px 4px}
.wallet strong{display:block;font:900 17px/1.15 'Inter Tight',sans-serif;text-transform:uppercase;letter-spacing:.015em}
.wallet p{margin:0;font:400 14px/1.5 'Inter Tight',sans-serif;color:var(--muted);text-wrap:pretty}

/* ==========================================================================
   OFFER BAND — the closing banner. One gradient surface carrying the amount,
   the order of operations and the button, and nothing else. The steps are
   numbered because the order is the information: the code goes in at the
   deposit, not before it.
   ========================================================================== */
.offerband{
  position:relative;overflow:hidden;
  border-radius:var(--r-card);
  border:1px solid var(--line-soft);
  background:linear-gradient(135deg,#1b3a7a 0%,#122754 44%,#0f172a 100%);
  box-shadow:var(--lift);
}
/* One wash, where the eye enters. The second one used to be green, under the
   button; with the CTA gold it would have been a glow around a glow. */
.offerband::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 120% at 88% 8%, rgba(83,234,253,.20), transparent 66%);
}
.offerband-in{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(24px,2.6vw,32px);
  padding:clamp(40px,5vw,64px) clamp(20px,4vw,56px);
}
.offerband-head{font-size:clamp(28px,4.8vw,56px)}
.offerband .steps{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;width:100%;max-width:860px;
}
.offerband .steps li{
  display:flex;align-items:center;gap:12px;text-align:left;
  padding:16px;border-radius:var(--r-card);
  background:rgba(10,16,32,.52);border:1px solid var(--line-soft);
  font:700 14px/1.35 'Inter Tight',sans-serif;color:var(--muted);text-wrap:pretty;
}
.offerband .steps b{
  flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:var(--r-sm);
  background:var(--cyan);color:var(--cyan-ink);
  font:700 13px/1 'Oswald',sans-serif;font-variant-numeric:tabular-nums;
}
.offerband-fine{margin:0;font:400 12px/1.5 'Inter Tight',sans-serif;color:var(--dim);max-width:52ch;text-wrap:pretty}

/* ==========================================================================
   STICKY MOBILE BAR — always on screen below 768px. Mobile carries the main
   traffic, so the offer is visible from the first paint. There is no JS gate
   and none should be added: a script failure must not be able to hide it.
   ========================================================================== */
.stickybar{display:none}

/* No rule above it. The footer is the darkest surface on the page, which is
   enough — and a hairline here was the last of the slide-deck dividers. */
footer{padding-block:32px;background:#0a1226}
.foot-in{display:flex;flex-direction:column;gap:8px;text-align:center;align-items:center}
.foot-in b{font:900 13px/1.4 'Inter Tight',sans-serif;color:var(--white);letter-spacing:.01em}
.foot-in span{font:400 12px/1.55 'Inter Tight',sans-serif;color:var(--dim);max-width:80ch;text-wrap:pretty}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media(max-width:1080px){
  /* Two columns, three rows of two. Six cards divide evenly either way. */
  .squad{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:900px){
  /* Below this width the two hero columns leave the headline too narrow to
     hold a line. */
  .hero-in{grid-template-columns:1fr;gap:clamp(20px,3vw,32px)}
  /* One column, so the headline has the whole page width and the desktop cap
     would leave it small on a phone. At 10.6vw the longer line measures 328px
     inside 359px at 390 wide, and 269 inside 294 at 320. */
  h1{font-size:clamp(34px,11vw,68px)}
  /* width:100% is load-bearing. Without it margin-inline:auto turns the grid
     item into shrink-to-fit, and its only in-flow child is width:100% — which
     then resolves against an auto width and collapses the stage to zero. */
  .hero-stage{width:100%;max-width:560px;margin-inline:auto}
  .offerband .steps{grid-template-columns:1fr;max-width:520px}
  /* One column: the heading sits above the pair, the pair stays two
     columns because two cards side by side is the composition. */
  .pay-in{grid-template-columns:1fr;gap:32px}
}

@media(max-width:768px){
  /* Must stay at least the sticky bar's own height or it covers the footer.
     The bar is 3px border + 16 + 60 + 16 = 95px; the rest is clearance so the
     small print does not sit against it. */
  body{padding-bottom:calc(136px + env(safe-area-inset-bottom,0px))}

  /* No text-stroke here any more. It existed because Inter Tight 900 still
     read thin at phone sizes; Oswald is condensed with heavy vertical stems,
     and a stroke on it closes the counters of A, E and R into solid blocks. */

  /* The lead sits over the photograph here, where 400 weight at 76% white is
     close to unreadable. Oswald is variable, so a heavier weight costs no
     extra download. */
  .lead{
    font-weight:500;color:rgba(255,255,255,.95);
    text-shadow:0 2px 10px rgba(10,19,44,.9);
  }

  /* The amount is nowrap and the button is flex:none, so neither can shrink:
     the row has a hard minimum width and everything above it is the gutter.
     The padding below is the largest the row still fits inside; see the 374px
     block for where the sizes step back down. */
  .stickybar{
    display:block;
    position:fixed;bottom:0;left:0;right:0;z-index:999;
    padding:16px max(16px,env(safe-area-inset-right,0px))
            max(16px,env(safe-area-inset-bottom,0px))
            max(16px,env(safe-area-inset-left,0px));
    background:rgba(10,19,44,.97);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-top:3px solid var(--cyan);
  }
  .stickybar-in{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:520px;margin-inline:auto}
  .stickybar small{display:block;font:900 11px/1 'Inter Tight',sans-serif;color:var(--cyan);text-transform:uppercase;letter-spacing:.05em}
  /* White, not gold. The gold object in this bar is the button; the amount
     repeating that colour 12px away flattens the two into one blob. */
  .stickybar strong{display:block;margin-top:4px;font:700 22px/1 'Oswald',sans-serif;color:var(--white);white-space:nowrap;font-variant-numeric:tabular-nums}
  .stickybar .btn{height:60px;padding:0 20px;font-size:14px;flex:none}

  /* The sticky bar carries the same button and never leaves the screen, so
     the header CTA would be the second of two identical gold buttons visible
     at once. The geo marker takes its place: it answers "does this apply to
     me", which the sticky bar does not. */
  .nav-cta{display:none}
  .nav-geo{display:inline-flex}
  .promo,.hero-actions{max-width:none}
}

@media(max-width:620px){
  /* Full-width bands on a phone: the card spans the screen and its own
     padding supplies the only gutter, so every block lines up on the same
     16px instead of the band's padding stacking on the page gutter. The
     player grid keeps its cards — those are a set of tiles, not a band. */
  #offer.wrap{padding-inline:0}
  .offerband{border-radius:0;border-left:0;border-right:0}

  .squad{grid-template-columns:1fr}
  /* One column, so the two cards stack and stay vertical rather than
     collapsing into the rows they used to be. */
  .wallets{grid-template-columns:1fr}
  .pay-btn{width:100%}
  .ticker-track span{font-size:14px;padding-inline:16px}
}

/* Below 375px the enlarged bar no longer fits on one row: the amount is
   nowrap and the button is flex:none, so neither gives, and the overflow eats
   the right-hand gutter instead. Scaling with vw rather than stepping at a
   breakpoint keeps the gutters proportional all the way down instead of
   snapping once and then tightening again. */
@media(max-width:374px){
  .stickybar{
    padding-left:max(4.8vw,env(safe-area-inset-left,0px));
    padding-right:max(4.8vw,env(safe-area-inset-right,0px));
  }
  .stickybar strong{font-size:5.4vw}
  .stickybar .btn{padding:0 4.4vw;font-size:3.7vw}
  .promo-code{font-size:5vw;padding-inline:12px}
  .promo-copy{padding:0 12px;font-size:12px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ticker-track,.pulse-dot{animation:none}
  .btn:hover,.pbtn:hover,.pcard:hover,.promo-copy:hover{transform:none}
}