/* NexTrader welcome pack.
   Tokens from nextrader-landing/css/nextrader.css, so this page sits inside
   the same light fintech surface as the rest of the site: white ground, blue
   brand, gold kept for the things that carry a price.

   Tokens, base, parts, motion, then the small screens. */

:root {
  color-scheme: light;

  /* Surfaces, page ground to most elevated */
  --bg: #ffffff;
  --bg-tint: #f4f8fe;
  --bg-tint-2: #eaf2fd;
  --surface: #ffffff;
  --surface-2: #f7fafe;
  --line: rgba(12, 26, 51, .1);
  --line-2: rgba(12, 26, 51, .16);

  /* Ink */
  --ink: #0b1a33;
  --ink-2: #4a5c78;
  --ink-3: #7b8ca7;

  /* Brand */
  --blue: #0092ff;
  --blue-deep: #0b6fd0;
  --blue-ink: #0a5fb4;
  --cyan: #06b6d4;
  --green: #12a150;
  --gold: #d99413;
  --gold-ink: #a06b06;
  --purple: #7c5cfc;
  --red: #e0483d;

  --grad-blue: linear-gradient(135deg, #0092ff 0%, #06b6d4 100%);
  --grad-gold: linear-gradient(135deg, #f0a91f 0%, #d07d0a 100%);

  --r-sm: 10px;
  --r: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-full: 999px;

  --shadow-xs: 0 1px 2px rgba(11, 26, 51, .06);
  --shadow-sm: 0 2px 8px rgba(11, 26, 51, .07);
  --shadow-md: 0 8px 26px rgba(11, 26, 51, .09);
  --shadow-lg: 0 18px 50px rgba(11, 26, 51, .13);
  --shadow-tile: 0 6px 18px rgba(11, 26, 51, .1), 0 1px 3px rgba(11, 26, 51, .06);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --shell: 1200px;
  --topbar-h: 72px;

  /* Per-card accent, overridden by .is-* below. */
  --accent: #0092ff;
  --accent-ink: #0a5fb4;
  --accent-soft: rgba(0, 146, 255, .1);
  --accent-line: rgba(0, 146, 255, .2);
}

.is-blue   { --accent: #0092ff; --accent-ink: #0a5fb4; --accent-soft: rgba(0, 146, 255, .1);  --accent-line: rgba(0, 146, 255, .2); }
.is-sky    { --accent: #2f9bff; --accent-ink: #0a5fb4; --accent-soft: rgba(47, 155, 255, .12); --accent-line: rgba(47, 155, 255, .22); }
.is-purple { --accent: #7c5cfc; --accent-ink: #5b3fd6; --accent-soft: rgba(124, 92, 252, .1); --accent-line: rgba(124, 92, 252, .2); }
.is-gold   { --accent: #e0a93f; --accent-ink: #a06b06; --accent-soft: rgba(217, 148, 19, .12); --accent-line: rgba(217, 148, 19, .26); }

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--topbar-h) + 16px);
}

/* A column, so a short page still puts the footer on the floor instead of
   halfway up with white space under it. */
body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.68;
  letter-spacing: -.003em;
  color: var(--ink-2);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { color: var(--ink); line-height: 1.16; letter-spacing: -.028em; font-weight: 700; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.3rem); letter-spacing: -.036em; line-height: 1.12; text-wrap: balance; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); text-wrap: balance; }
h3 { font-size: 1.12rem; }
a { color: var(--blue-ink); }
::selection { background: rgba(0, 146, 255, .18); color: var(--ink); }

.wrap { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 24px; }
.muted { color: var(--ink-3); }
.small { font-size: .86rem; }
.center { text-align: center; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
[hidden] { display: none !important; }

/* ---------- top bar ------------------------------------------------------- */

.topbar {
  position: sticky; top: 0; z-index: 60; height: var(--topbar-h);
  display: flex; align-items: center;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.topbar.stuck { border-bottom-color: var(--line); background: rgba(255, 255, 255, .96); box-shadow: var(--shadow-xs); }
.topbar-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
/* The lockup is a gift box plus the wordmark, about 3.2:1 - much squarer
   than the old wordmark - so height drives the size and the width follows. */
.brand-logo {
  height: 45px; width: auto; display: block;
  /* it arrives with the page rather than just appearing */
  animation: logo-in .7s var(--ease) both;
}
@keyframes logo-in { from { opacity: 0; transform: translateY(-6px) scale(.94); } }
/* The picker and the account chip sit side by side. Without this the div is
   a block and they stack, which is what happened when the badge that used to
   live between these rules was cut out. */
.topbar-right { display: flex; align-items: center; gap: 12px; }

.user-chip {
  display: flex; align-items: center; gap: 9px; padding: 5px 12px 5px 5px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-full);
  box-shadow: var(--shadow-xs);
}
.user-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--grad-blue); color: #fff; font-weight: 700; font-size: .84rem;
}
.user-name { font-size: .86rem; font-weight: 600; color: var(--ink); max-width: 11ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip .caret { width: 8px; height: 8px; border-right: 1.8px solid var(--ink-3); border-bottom: 1.8px solid var(--ink-3); transform: rotate(45deg) translate(-2px, -2px); }

/* ---------- language ------------------------------------------------------ */

/* A translated page is fetched before the first paint. Until it lands the
   markup is English, so it is held back - but only when a translation is
   actually coming; an English visitor never waits. */
.i18n-pending body { visibility: hidden; }

.lang-picker { position: relative; }

.lang-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 10px; border-radius: var(--r-full);
  background: var(--surface); border: 1px solid var(--line); cursor: pointer;
  font: inherit; font-size: .8rem; font-weight: 700; color: var(--ink-2);
  box-shadow: var(--shadow-xs);
  transition: border-color .2s, color .2s, box-shadow .2s;
}
.lang-toggle:hover { border-color: var(--blue); color: var(--ink); box-shadow: var(--shadow-sm); }
.lang-toggle .caret {
  width: 7px; height: 7px; flex: none;
  border-right: 1.8px solid var(--ink-3); border-bottom: 1.8px solid var(--ink-3);
  transform: rotate(45deg) translate(-2px, -2px);
}
.lang-toggle[aria-expanded="true"] { border-color: var(--blue); color: var(--ink); }
.lang-code { letter-spacing: .04em; }

/* A flag is a small rectangle; a border keeps a white one from dissolving
   into the white surface behind it. */
.flag {
  width: 20px; height: auto; flex: none; display: block; border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(12, 26, 51, .12);
}

.lang-menu {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 70;
  min-width: 172px; margin: 0; padding: 6px; list-style: none;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-md);
  animation: menu-in .16s var(--ease);
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } }

.lang-opt {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border-radius: var(--r-sm);
  background: none; border: 0; cursor: pointer; text-align: start;
  font: inherit; font-size: .87rem; font-weight: 600; color: var(--ink-2);
  transition: background .15s, color .15s;
}
.lang-opt:hover { background: var(--surface-2); color: var(--ink); }
.lang-opt.on { background: rgba(0, 146, 255, .1); color: var(--blue-ink); }

@media (max-width: 720px) { .lang-code { display: none; } .lang-toggle { padding: 6px 8px; } }

/* ---------- right to left -------------------------------------------------
   Urdu reads right to left. Most of the page is flex or grid and mirrors on
   its own; these are the places that hard-coded a side. */

[dir="rtl"] .hero-copy { text-align: right; }
[dir="rtl"] .assurances,
[dir="rtl"] .hero-cta { justify-content: flex-start; }
[dir="rtl"] .unlocked-body,
[dir="rtl"] .gift-foot,
[dir="rtl"] .perk-list p { text-align: right; }
[dir="rtl"] .gift-foot .go { margin-left: 0; margin-right: auto; }
/* arrows point the way the language runs */
[dir="rtl"] .btn svg,
[dir="rtl"] .gift-foot .go svg { transform: scaleX(-1); }
[dir="rtl"] .acct-body b { direction: ltr; text-align: right; }
[dir="rtl"] .scribble { transform: rotate(7deg); }
[dir="rtl"] .scribble-arrow { left: auto; right: -66px; transform: scaleX(-1); }
[dir="rtl"] .lang-toggle .caret { transform: rotate(45deg) translate(-2px, -2px); }
[dir="rtl"] .nav { grid-template-columns: 1fr auto; }
[dir="rtl"] .nav .btn:first-child { order: 2; }

/* Nastaliq sits on a deeper line than Latin and needs the room. */
[lang="ur"] body { line-height: 2; }
[lang="ur"] h1, [lang="ur"] h2, [lang="ur"] h3 { line-height: 1.6; letter-spacing: 0; }
[lang="ur"] .btn { letter-spacing: 0; }
[lang="ur"] .eyebrow { letter-spacing: 0; text-transform: none; }

/* ---------- buttons ------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 22px; font: inherit; font-size: .93rem; font-weight: 700; line-height: 1;
  border: 1px solid transparent; border-radius: var(--r-full);
  cursor: pointer; white-space: nowrap; text-decoration: none; color: var(--ink);
  background: var(--surface-2);
  transition: transform .2s var(--ease), box-shadow .25s, background .25s, border-color .25s, color .25s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.btn[disabled] { opacity: .55; pointer-events: none; }
.btn svg { flex: none; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.btn-primary { background: var(--grad-blue); color: #fff; box-shadow: 0 6px 20px rgba(0, 146, 255, .3); }
.btn-primary:hover { box-shadow: 0 12px 30px rgba(0, 146, 255, .42); }

.btn-gold { background: var(--grad-gold); color: #fff; box-shadow: 0 6px 20px rgba(217, 148, 19, .3); }
.btn-gold:hover { box-shadow: 0 12px 30px rgba(217, 148, 19, .42); }

.btn-tg { background: linear-gradient(135deg, #37b2e8 0%, #1c7fae 100%); color: #fff; box-shadow: 0 6px 20px rgba(34, 158, 217, .3); }
.btn-tg:hover { box-shadow: 0 12px 30px rgba(34, 158, 217, .42); }

/* Deriv's own button, the same one the signals dashboard uses: slate ground,
   and the wordmark in Deriv red, italic and lowercase, as they set it. Both
   apps send people to the same login, so they should look like it. */
.btn-deriv {
  background: #323a46; color: #fff;
  text-transform: uppercase; letter-spacing: .04em;
  box-shadow: 0 6px 20px rgba(50, 58, 70, .28);
}
.btn-deriv:hover { background: #3d4654; box-shadow: 0 12px 30px rgba(50, 58, 70, .36); }
.btn-deriv b {
  color: #ff444f; font-style: italic; font-weight: 800;
  text-transform: lowercase; letter-spacing: 0;
}

.btn-ghost { background: #fff; border-color: var(--line-2); color: var(--ink); box-shadow: var(--shadow-xs); }
.btn-ghost:hover { border-color: var(--blue); color: var(--blue-ink); box-shadow: var(--shadow-sm); }

.btn-lg { padding: 15px 28px; font-size: .98rem; }
/* The panel's one call to action, so it carries more weight than a button
   sitting in a row with others. */
.claim-cta { padding: 18px 30px; font-size: 1.05rem; }
.btn-block { width: 100%; }

/* A slow sheen across the calls to action. */
.btn-primary, .btn-gold, .btn-deriv { position: relative; overflow: hidden; }
.btn-primary::after, .btn-gold::after, .btn-deriv::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 42%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .42), transparent);
  transform: translateX(-180%) skewX(-18deg);
  animation: sheen 4.8s ease-in-out infinite 1.4s;
}
@keyframes sheen { 0%, 64% { transform: translateX(-180%) skewX(-18deg); } 100% { transform: translateX(320%) skewX(-18deg); } }

/* ---------- eyebrow ------------------------------------------------------- */

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px 7px 11px;
  font-size: .74rem; font-weight: 700; letter-spacing: .055em; text-transform: uppercase;
  color: var(--blue-ink); background: rgba(0, 146, 255, .09);
  border: 1px solid rgba(0, 146, 255, .22); border-radius: var(--r-full);
}
.eyebrow.gold { color: var(--gold-ink); background: rgba(217, 148, 19, .1); border-color: rgba(217, 148, 19, .26); }
.eyebrow svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: ping 2.2s var(--ease) infinite; }
@keyframes ping {
  0% { box-shadow: 0 0 0 0 rgba(0, 146, 255, .5); }
  70% { box-shadow: 0 0 0 9px rgba(0, 146, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 146, 255, 0); }
}

/* ---------- hero ---------------------------------------------------------- */

.hero {
  position: relative; overflow: hidden;
  padding: clamp(36px, 5vw, 64px) 0 clamp(44px, 6vw, 80px);
  background: linear-gradient(176deg, #e8f2ff 0%, #f1f7ff 46%, #fbfdff 80%, #ffffff 100%);
}
/* A soft diagonal light across the tint, as on the main site. */
.hero::after {
  content: ""; position: absolute; inset: -20% -10%; pointer-events: none;
  background: linear-gradient(112deg, transparent 34%, rgba(255, 255, 255, .8) 50%, transparent 64%);
}
.hero > * { position: relative; z-index: 1; }

.hero-in { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(20px, 3vw, 48px); align-items: center; }
.hero-copy .eyebrow { margin-bottom: 22px; }
.hero h1 .hl { color: var(--blue); }
.hero-lede { margin-top: 18px; font-size: clamp(.98rem, 1.3vw, 1.08rem); max-width: 52ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.assurances { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 20px; }
.assurances li { display: inline-flex; align-items: center; gap: 7px; font-size: .84rem; color: var(--ink-3); font-weight: 500; }
.assurances svg { width: 15px; height: 15px; flex: none; stroke: var(--green); fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* the picture */
.hero-art { position: relative; }
.giftbox { display: block; width: 100%; height: auto; overflow: visible; }
/* The lid starts shut on the box and pops off, then keeps drifting. Two
   animations on one element: the entrance runs once, the float takes over
   the moment it ends. */
.giftbox .lid {
  transform-origin: 196px 196px;
  animation: lid-open 1.15s var(--ease) backwards, lid-float 6s ease-in-out 1.15s infinite;
}
@keyframes lid-open {
  0%   { transform: translate(300px, 268px) rotate(0deg); }
  55%  { transform: translate(232px, 172px) rotate(-19deg); }
  100% { transform: translate(196px, 196px) rotate(-13deg); }
}
@keyframes lid-float {
  50% { transform: translate(190px, 186px) rotate(-16deg); }
}

/* the light only spills out once the lid is off */
.giftbox .beam, .giftbox .bloom {
  transform-origin: 300px 300px;
  animation: beam-in .9s var(--ease) .5s backwards, glow 3.6s ease-in-out 1.4s infinite;
}
@keyframes beam-in { from { opacity: 0; transform: scaleY(.3); } }
@keyframes glow { 50% { opacity: .78; } }

/* the three things, floating out of the box */
.tile {
  position: absolute; width: 62px; height: 62px; border-radius: 18px;
  display: grid; place-items: center;
  background: #fff; box-shadow: var(--shadow-tile);
  border: 1px solid var(--line);
}
.tile svg { width: 28px; height: 28px; stroke: var(--accent); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tile-1 { left: 12%; top: 17%; animation: tile-out .85s var(--ease) .55s backwards, bob 6.5s ease-in-out 1.4s infinite; }
.tile-2 { left: 44%; top: 4%;  animation: tile-out .85s var(--ease) .75s backwards, bob 7.4s ease-in-out 1.6s infinite; }
.tile-3 { right: 16%; top: 14%; animation: tile-out .85s var(--ease) .95s backwards, bob 6.9s ease-in-out 1.8s infinite; }

/* up and out of the opening, with a little spin on the way */
@keyframes tile-out {
  from { opacity: 0; transform: translate(var(--fx, -40px), 150px) scale(.35) rotate(-18deg); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}
.tile-2 { --fx: 0px; }
.tile-3 { --fx: 40px; }

@keyframes bob { 50% { transform: translateY(-13px); } }

/* --- motes -------------------------------------------------------------
   Small lights rising out of the box on a loop. Purely atmosphere: the
   whole art block is aria-hidden. */
.spark {
  position: absolute; left: 50%; top: 52%;
  width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle, #ffe2a6 0%, rgba(255, 210, 130, .55) 45%, transparent 70%);
  opacity: 0; pointer-events: none;
  animation: mote 4.2s ease-out infinite;
}
.s1 { margin-left: -46px; animation-delay: 1.6s; }
.s2 { margin-left: -14px; animation-delay: 2.5s; width: 7px; height: 7px; }
.s3 { margin-left: 16px;  animation-delay: 2.0s; }
.s4 { margin-left: 44px;  animation-delay: 3.1s; width: 6px; height: 6px; }
.s5 { margin-left: 2px;   animation-delay: 3.7s; width: 11px; height: 11px; }
@keyframes mote {
  0%   { opacity: 0; transform: translateY(10px) scale(.4); }
  18%  { opacity: .95; }
  100% { opacity: 0; transform: translateY(-170px) scale(1.15); }
}

/* the handwritten note beside the box */
.scribble {
  position: absolute; right: -2%; top: 26%;
  font-family: Caveat, 'Segoe Script', cursive; font-weight: 600;
  font-size: 1.3rem; line-height: 1.24; color: var(--ink-2);
  transform: rotate(-7deg); text-align: left;
}
.scribble span { display: block; }
.scribble-arrow { position: absolute; left: -66px; top: 34px; width: 62px; height: 48px; color: var(--ink-3); }

/* ---------- sections ------------------------------------------------------ */

.section { padding: clamp(52px, 7vw, 92px) 0; position: relative; }
.section-tint { background: var(--bg-tint); }
.section-head { max-width: 720px; margin: 0 auto clamp(28px, 4vw, 48px); text-align: center; }
.section-head .eyebrow { margin-bottom: 18px; }
.section-head p { margin-top: 12px; font-size: 1.02rem; }

/* ---------- the pack, inside the claim block ------------------------------ */
/* Three cards above the ready band. Each one is also the way to take that
   gift: its footer strip is a button, which is why the whole card has a
   hover state. */

.pack-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }

.gift {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg); padding: 20px 20px 16px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-xs);
  transition: transform .28s var(--ease), border-color .25s, box-shadow .28s;
}
.gift:hover { transform: translateY(-3px); border-color: var(--accent-line); box-shadow: var(--shadow-md); }

/* the faint bars in the corner */
.gift-mark { position: absolute; top: 18px; right: 18px; width: 46px; height: 34px; opacity: .16; pointer-events: none; }
.gift-mark svg { width: 100%; height: 100%; fill: var(--accent); }

/* icon beside the title, not above it */
.gift-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.gift-ico {
  width: 46px; height: 46px; border-radius: 14px; flex: none; display: grid; place-items: center;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.gift-ico svg { width: 24px; height: 24px; stroke: var(--accent); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.gift-head h3 { font-size: 1.04rem; margin-bottom: 1px; }
.gift-meta { font-size: .82rem; color: var(--ink-3); font-weight: 500; }
.gift-meta .sep { margin: 0 6px; opacity: .55; }
.gift-meta b { color: var(--accent-ink); font-weight: 700; }

.gift ul { list-style: none; display: grid; gap: 7px; }
.gift li { display: flex; gap: 9px; font-size: .855rem; align-items: flex-start; color: var(--ink-2); }
.gift li svg { width: 14px; height: 14px; flex: none; margin-top: 5px; stroke: var(--accent); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* the strip at the foot is the claim button */
.gift-foot {
  display: flex; align-items: center; gap: 9px; width: 100%; margin-top: 16px;
  padding: 10px 14px; border-radius: var(--r-sm); border: 1px solid transparent;
  background: var(--accent-soft); color: var(--accent-ink);
  font: inherit; font-size: .79rem; font-weight: 600; text-align: left; text-decoration: none;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s var(--ease);
}
.gift-foot:hover { transform: translateY(-1px); }

/* --- the strip that can still be claimed --------------------------------
   It sits at the foot of a card full of text, so it has to read as the one
   thing to press. A light runs around its edge, the fill is stronger than
   the card's own tints, and the arrow keeps nudging. Only ever on a gift
   that is actually claimable: a taken one is settled, and a failed one has
   its own red to say so. */
.gift-foot.claimable {
  position: relative;
  background: color-mix(in srgb, var(--accent) 18%, #fff);
  color: var(--accent-ink);
  font-weight: 700;
  animation: claim-pulse 2.4s ease-in-out infinite;
}
.gift-foot.claimable:hover {
  background: color-mix(in srgb, var(--accent) 26%, #fff);
  animation-play-state: paused;
  box-shadow: 0 8px 22px -4px color-mix(in srgb, var(--accent) 62%, transparent);
}
/* a slow breath under the strip, so the eye catches it even at rest */
@keyframes claim-pulse {
  0%, 100% { box-shadow: 0 2px 10px -3px color-mix(in srgb, var(--accent) 40%, transparent); }
  50%      { box-shadow: 0 5px 18px -3px color-mix(in srgb, var(--accent) 70%, transparent); }
}

/* The running border. A conic gradient is masked down to the 1.5px edge, and
   the angle is animated - which needs @property, because a plain custom
   property cannot be interpolated. Where that is unsupported the gradient
   still paints, just without travelling. */
@property --spin {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
/* Two layers, both masked to the edge: a permanent ring so the strip always
   looks outlined, and a bright comet travelling over it. One layer alone
   reads either as a plain border or as a broken one. */
.gift-foot.claimable::before {
  content: "";
  position: absolute; inset: 0; border-radius: inherit; padding: 2px;
  background:
    conic-gradient(
      from var(--spin),
      transparent 0 52%,
      color-mix(in srgb, var(--accent) 55%, transparent) 68%,
      #fff 80%,
      var(--accent) 86%,
      transparent 96%
    ),
    linear-gradient(color-mix(in srgb, var(--accent) 45%, #fff) 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: spin-edge 2.2s linear infinite;
  pointer-events: none;
}
@keyframes spin-edge { to { --spin: 360deg; } }

/* the arrow keeps pointing at what to do */
.gift-foot.claimable .go { opacity: 1; color: var(--accent); animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(4px); } }
.gift-foot svg { width: 15px; height: 15px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.gift-foot .go { margin-left: auto; opacity: .7; }
.gift-foot[disabled] { opacity: .6; cursor: default; }
/* the last attempt failed: say so on the card that was pressed, not in a
   note further down the page */
.gift-foot.failed { background: rgba(224, 72, 61, .09); color: var(--red); }
.gift-foot.failed:hover { border-color: rgba(224, 72, 61, .3); }
/* taken: the strip settles to green and opens the gift instead */
.gift-foot.done { background: rgba(18, 161, 80, .1); color: var(--green); }
.gift-foot.done:hover { border-color: rgba(18, 161, 80, .3); }
.gift.is-taken { border-color: rgba(18, 161, 80, .26); }

/* ---------- the claim panel ----------------------------------------------- */

.claim-section { scroll-margin-top: calc(var(--topbar-h) + 18px); }
.claim {
  max-width: 560px; margin: 0 auto; border-radius: var(--r-xl);
  padding: clamp(22px, 4vw, 38px);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  position: relative; min-height: 280px;
}
.claim.wide { max-width: 640px; }
/* The pack screen is a wide band rather than a narrow card: it holds a status,
   an account and an action side by side. */
.claim.band { max-width: var(--shell); background: none; border: 0; box-shadow: none; padding: 0; }

.claim-head { text-align: center; margin-bottom: 24px; }
.claim-head h2 { font-size: clamp(1.35rem, 2.8vw, 1.8rem); }
.claim-head p { margin-top: 10px; font-size: .96rem; }

.claim-ways { display: grid; gap: 14px; }

.or {
  display: flex; align-items: center; gap: 14px; color: var(--ink-3);
  font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700;
}
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.id-form { display: flex; gap: 10px; }
.id-input {
  flex: 1; min-width: 0; padding: 14px 18px; border-radius: var(--r-full); font: inherit; font-size: 1rem;
  background: var(--surface-2); border: 1px solid var(--line-2); color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.id-input::placeholder { color: var(--ink-3); letter-spacing: normal; font-family: Inter, sans-serif; }
.id-input:focus { outline: none; background: #fff; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0, 146, 255, .14); }

.claim-fine { margin-top: 12px; font-size: .77rem; color: var(--ink-3); text-align: center; }

.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-top: 22px; }
.trust span { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; color: var(--ink-3); }
.trust svg { width: 15px; height: 15px; stroke: var(--green); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- the ready band ------------------------------------------------ */

.ready {
  display: grid; grid-template-columns: 1fr auto auto; gap: clamp(16px, 3vw, 36px); align-items: center;
  padding: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 32px); border-radius: var(--r-xl);
  background: linear-gradient(135deg, #eaf3ff 0%, #f3f9ff 100%);
  border: 1px solid rgba(0, 146, 255, .2);
  box-shadow: var(--shadow-sm);
}
.ready-status { display: inline-flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--green); }
.ready-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: ping-green 2.2s var(--ease) infinite; }
@keyframes ping-green {
  0% { box-shadow: 0 0 0 0 rgba(18, 161, 80, .45); }
  70% { box-shadow: 0 0 0 8px rgba(18, 161, 80, 0); }
  100% { box-shadow: 0 0 0 0 rgba(18, 161, 80, 0); }
}
.ready h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin-top: 8px; }
.ready-sub { font-size: .9rem; margin-top: 4px; }

.acct-card {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-xs);
}
.acct-ico { width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; background: rgba(0, 146, 255, .1); border: 1px solid rgba(0, 146, 255, .2); }
.acct-ico svg { width: 20px; height: 20px; stroke: var(--blue); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.acct-body { min-width: 0; }
.acct-body b { display: block; font-family: ui-monospace, Menlo, monospace; font-size: .92rem; color: var(--ink); letter-spacing: .01em; }
.acct-body span { font-size: .76rem; color: var(--ink-3); }
.acct-copy {
  width: 34px; height: 34px; flex: none; border-radius: 10px; cursor: pointer;
  display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line);
  transition: background .2s, border-color .2s, color .2s;
  color: var(--ink-3);
}
.acct-copy:hover { background: #fff; border-color: var(--blue); color: var(--blue); }
.acct-copy.copied { background: rgba(18, 161, 80, .1); border-color: rgba(18, 161, 80, .3); color: var(--green); }
.acct-copy svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.ready-act { display: flex; flex-direction: column; align-items: stretch; gap: 7px; }
.ready-act .btn { width: 100%; }
.ready-note { font-size: .74rem; color: var(--ink-3); text-align: center; }

/* ---------- claim states -------------------------------------------------- */

.state-center { text-align: center; padding: 14px 0; }

/* ---------- working ------------------------------------------------------- */

.loader { text-align: center; padding: 26px 0 14px; }

.loader-mark {
  position: relative; display: grid; place-items: center;
  width: 58px; height: 58px; margin: 0 auto 20px;
}
.loader-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: ring-spin 1.05s linear infinite; }
.loader-ring .track { fill: none; stroke: var(--bg-tint-2); stroke-width: 3.5; }
.loader-ring .arc {
  fill: none; stroke: var(--blue); stroke-width: 3.5; stroke-linecap: round;
  /* a quarter of the circumference (2*pi*21 = 132) */
  stroke-dasharray: 33 99;
}
@keyframes ring-spin { to { transform: rotate(360deg); } }

.loader-ico { position: relative; display: grid; place-items: center; animation: ico-breathe 1.9s ease-in-out infinite; }
.loader-ico svg { stroke: var(--blue); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@keyframes ico-breathe { 50% { transform: scale(.9); opacity: .65; } }

/* A transient state, so it does not shout: this is a step on the way, not a
   headline. */
.loader-title { font-size: 1.1rem; }
.loader-sub { margin-top: 7px; font-size: .9rem; color: var(--ink-3); }

.state-bad {
  width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 18px; display: grid; place-items: center;
  font-size: 1.7rem; font-weight: 800; color: var(--red);
  background: rgba(224, 72, 61, .09); border: 2px solid rgba(224, 72, 61, .26);
}

.actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 22px; }

/* ---------- joining the team ---------------------------------------------- */

.join-intro { text-align: center; margin-bottom: 16px; }
.join-intro h2 { font-size: clamp(1.3rem, 2.8vw, 1.72rem); margin-top: 14px; }
/* Held to a comfortable measure and centred, so it breaks into even lines
   instead of leaving one word stranded on the last. */
.join-intro p { margin-top: 9px; max-width: 56ch; margin-inline: auto; font-size: .9rem; line-height: 1.55; }
.join-intro .mono { color: var(--ink); font-weight: 600; }

.join-stage { min-height: 260px; }
.join-card { animation: slide-in .42s var(--ease) both; }
.join-card.from-right { --from: 34px; }
.join-card.from-left { --from: -34px; }
@keyframes slide-in { from { opacity: 0; transform: translateX(var(--from, 34px)); } }

.join-head { display: flex; gap: 13px; margin-bottom: 14px; }
.join-n { width: 36px; height: 36px; border-radius: 11px; flex: none; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--grad-blue); }
.join-head h3 { margin-bottom: 5px; }
.join-text { font-size: .94rem; }
.kw { background: rgba(0, 146, 255, .12); color: var(--blue-ink); border-radius: 5px; padding: 1px 6px; font-weight: 700; text-decoration: none; }
a.kw:hover { background: rgba(0, 146, 255, .22); }

/* Portrait screenshots, roughly 500x576. Sized by height, not by width: at
   full panel width they stood ~690px tall and pushed the buttons off screen.
   The cap never exceeds their natural size, so they stay sharp. */
.shot {
  display: block; margin: 0 auto;
  max-height: clamp(220px, 34vh, 320px);
  width: auto; max-width: 100%;
  border-radius: var(--r); border: 1px solid var(--line);
  background: var(--surface-2);
  box-shadow: var(--shadow-xs);
}

.perk-list { list-style: none; display: grid; }
.perk-list li {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 10px 2px;
  border-bottom: 1px solid var(--line);
  animation: rise .44s var(--ease) both; animation-delay: calc(var(--i) * .06s);
}
.perk-list li:last-child { border-bottom: 0; }
.perk-list p { font-size: .855rem; line-height: 1.5; color: var(--ink-3); }
.perk-list b { font-size: .9rem; color: var(--ink); font-weight: 650; }
.perk-list span { color: var(--ink-3); }

.copy-card { margin-top: 18px; padding: 17px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line-2); }
.copy-label { display: flex; align-items: center; gap: 9px; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin-bottom: 11px; }
.copy-label .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.copy-text { display: block; font-family: ui-monospace, Menlo, monospace; font-size: .85rem; color: var(--ink); word-break: break-all; line-height: 1.7; margin-bottom: 13px; }
.copy-btn { width: 100%; background: #fff; border: 1px solid var(--line-2); color: var(--ink); }
.copy-btn.copied { background: rgba(18, 161, 80, .1); border-color: rgba(18, 161, 80, .3); color: var(--green); }

.dots { display: flex; gap: 8px; justify-content: center; margin: 18px 0 14px; }
.dot-btn { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: var(--line-2); transition: width .3s var(--ease), background .3s; }
.dot-btn.on { width: 26px; border-radius: var(--r-full); background: var(--blue); }

/* The button never sits straight against the last card. */
.nav { display: grid; grid-template-columns: auto 1fr; gap: 10px; margin-top: 18px; }
.nav.single { grid-template-columns: 1fr; }

/* ---------- the sign-in dialog -------------------------------------------- */
/* A native <dialog>, so the backdrop, Escape and the focus trap come from the
   browser. Two ways out: log in, or go and open an account first - because
   someone with no Deriv account cannot log in, and a login page they cannot
   pass is where they leave. */

.authdlg {
  /* Put back the margin the reset above takes away: this is what centres a
     modal dialog, and without it the browser pins it to the corner. */
  margin: auto;
  width: min(430px, calc(100vw - 32px));
  padding: 30px 28px 24px;
  border: 1px solid var(--line); border-radius: var(--r-xl);
  background: var(--surface); color: var(--ink-2);
  box-shadow: var(--shadow-lg);
  text-align: center;
  position: relative; overflow: visible;
}
.authdlg::backdrop { background: rgba(11, 26, 51, .42); backdrop-filter: blur(3px); }
.authdlg[open] { animation: dlg-in .28s var(--ease); }
@keyframes dlg-in { from { opacity: 0; transform: translateY(12px) scale(.97); } }

.authdlg-close {
  position: absolute; top: 12px; right: 12px; width: 34px; height: 34px;
  display: grid; place-items: center; cursor: pointer;
  background: none; border: 0; border-radius: 10px; color: var(--ink-3);
  transition: background .2s, color .2s;
}
.authdlg-close:hover { background: var(--surface-2); color: var(--ink); }
.authdlg-close svg { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

.authdlg-badge {
  width: 58px; height: 58px; border-radius: 17px; margin: 0 auto 16px;
  display: grid; place-items: center;
  background: rgba(0, 146, 255, .1); border: 1px solid rgba(0, 146, 255, .2);
}
.authdlg-badge svg { stroke: var(--blue); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.authdlg h2 { font-size: 1.35rem; }
.authdlg-lede { margin-top: 10px; font-size: .92rem; }
.authdlg-actions { display: grid; gap: 10px; margin-top: 22px; }
.authdlg-err { margin-top: 12px; font-size: .82rem; color: var(--red); }
.authdlg-fine { margin-top: 16px; font-size: .78rem; color: var(--ink-3); }

/* ---------- joining the team: the benefits card --------------------------- */

/* A quiet divider above the benefits, so the intro and the list read as two
   things rather than one long column. */
.join-perks-head {
  text-align: center; margin-bottom: 10px; padding-top: 15px;
  border-top: 1px solid var(--line);
}
.join-perks-head h3 {
  margin: 0; font-size: 1.04rem;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.join-perks-head h3 svg { stroke: var(--accent); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.join-perks-head p { margin-top: 4px; max-width: 46ch; margin-inline: auto; }
.join-perks-head .worth { color: var(--gold-ink); font-weight: 700; }

.perk-list .ico {
  width: 22px; height: 22px; flex: none; border-radius: 7px; margin-top: 2px;
  display: grid; place-items: center;
  background: rgba(18, 161, 80, .1); border: 1px solid rgba(18, 161, 80, .2);
}
.perk-list .ico svg { stroke: var(--green); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- footer -------------------------------------------------------- */

main { flex: 1 0 auto; }
.footer { flex: none; margin-top: auto; border-top: 1px solid var(--line); padding: 34px 0 44px; background: var(--bg-tint); }
.footer-in { display: flex; flex-direction: column; gap: 16px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: .87rem; }
.footer-links a { color: var(--ink-2); text-decoration: none; }
.footer-links a:hover { color: var(--blue-ink); }
.risk { font-size: .8rem; color: var(--ink-3); line-height: 1.7; max-width: 80ch; }
.risk b { color: var(--ink-2); }

/* ---------- scroll reveal / confetti -------------------------------------- */

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }

.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; }
.confetti i { position: absolute; top: -14px; width: 9px; height: 15px; opacity: 0; animation: fall linear forwards; }
@keyframes fall {
  0% { opacity: 1; transform: translateY(0) rotate(0); }
  100% { opacity: 0; transform: translateY(104vh) rotate(760deg); }
}

/* ==========================================================================
   Small screens
   ========================================================================== */

@media (max-width: 1080px) {
  .scribble { font-size: 1.12rem; right: 0; }
}

@media (max-width: 1020px) {
  .pack-cards { grid-template-columns: 1fr; gap: 12px; }
}

@media (max-width: 960px) {
  .hero-in { grid-template-columns: 1fr; gap: 30px; }
  .hero-copy { text-align: center; }
  .hero-copy .eyebrow { margin-inline: auto; }
  .hero-lede { max-width: none; margin-inline: auto; }
  .hero-cta, .assurances { justify-content: center; }
  .hero-art { max-width: 520px; margin: 0 auto; }

  .ready { grid-template-columns: 1fr; text-align: left; }
  .ready-act { align-items: stretch; }
}

@media (max-width: 720px) {
  :root { --topbar-h: 64px; }
  .wrap { padding: 0 16px; }
  .section { padding: 46px 0; }
  .section-head { margin-bottom: 28px; }

  .brand-logo { height: 45px; }

  .hero { padding: 26px 0 38px; }
  .hero-cta { gap: 10px; }
  .hero-cta .btn { flex: 1 1 100%; }
  .assurances { gap: 8px 16px; }
  .assurances li { font-size: .79rem; }

  /* The note needs room the phone does not have; the box alone still reads. */
  .scribble { display: none; }
  .tile { width: 50px; height: 50px; border-radius: 15px; }
  .tile svg { width: 23px; height: 23px; }


  .claim { border-radius: var(--r-lg); }
  .id-form { flex-direction: column; }
  .id-form .btn { width: 100%; }

  .gift { padding: 18px 18px 14px; }
  .ready { padding: 20px; border-radius: var(--r-lg); }
  .acct-card { padding: 11px 12px; }


  .shot { max-height: clamp(180px, 28vh, 240px); }
  .nav { grid-template-columns: 1fr; }
  .nav .btn { width: 100%; }


}

@media (max-width: 400px) {
  .user-name { display: none; }
  .copy-text { font-size: .78rem; }
}

/* ---------- short screens ------------------------------------------------- */
/* A laptop is about 1440x780 once the browser chrome is gone, and the joining
   card is the tallest thing on the site. These rules trade ornament for
   height so the whole card - including the button - fits without scrolling.
   Keyed on height, not width: a wide but short window has the same problem. */

@media (max-height: 860px) {
  .claim { padding: 26px 28px; }
  .join-intro { margin-bottom: 16px; }
  .join-perks-head { padding-top: 14px; margin-bottom: 13px; }
  .join-perks-head h3 { margin-top: 10px; font-size: 1.05rem; }
  .perk-list li { padding: 8px 2px; }
  .nav { margin-top: 13px; }
  .claim-fine { margin-top: 10px; }
}

@media (max-height: 740px) {
  .join-intro p { font-size: .86rem; }
  .join-perks-head { padding-top: 12px; margin-bottom: 6px; }
  .perk-list li { padding: 7px 2px; gap: 10px; }
  .perk-list p { font-size: .82rem; line-height: 1.45; }
  .shot { max-height: clamp(170px, 26vh, 230px); }
}

@media (max-height: 640px) {
  /* Last resort: the list carries its titles alone, and the panel scrolls
     inside itself rather than pushing the page down. */
  .perk-list span, .join-perks-head p { display: none; }
  .join-stage { min-height: 0; max-height: 46vh; overflow-y: auto; }
  .claim { padding: 20px 22px; }
}

/* Coarse pointers get targets they can actually hit. */
@media (pointer: coarse) {
  .btn { min-height: 46px; }
  .dot-btn { min-width: 14px; min-height: 14px; }
}

/* ---------- motion off ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .confetti { display: none; }
}