/* Trade Llama landing page. Dark, with the platform's orange (#FF8F5C) for actions only. Mobile first. */
:root {
  --bg: #0a0b0d; --surface: #14161b; --surface-2: #1a1d23; --line: rgba(255, 255, 255, .09); --line-2: rgba(255, 255, 255, .16);
  --ink: #f4f5f6; --muted: #a3a8b0; --faint: #7d838c;
  --accent: #FF8F5C; --accent-hover: #FF7A42; --accent-ink: #0a0b0d;
  --ok: #46d08b; --warn: #f2c14e; --err: #ff6b6b;
  --r-sm: 10px; --r-md: 14px; --r-lg: 22px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--ink); }
img, svg { display: block; }
.wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 20px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* ── Header ── */
.top { position: sticky; top: 0; z-index: 10; background: rgba(10, 11, 13, .86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
/* The standing llama as big as the 64px bar allows: the file has empty space around the drawing, so the image is 77px tall
   (drawing ~56px); the negative margins keep that empty space from making the bar taller. */
.brand img { height: 77px; width: auto; margin: -7px -6px -7px 0; }
.top-right { display: flex; align-items: center; gap: 12px; }
.langs { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; }
.langs a { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-decoration: none; color: var(--muted); padding: 5px 9px; border-radius: 999px; }
.langs a:hover { color: var(--ink); }
.langs a[aria-current="page"] { background: var(--surface-2); color: var(--ink); }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  border-radius: 999px; border: 1px solid transparent; height: 48px; padding: 0 22px; transition: background .15s ease, border-color .15s ease, opacity .15s ease; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:disabled { opacity: .65; cursor: progress; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-sm { height: 38px; padding: 0 16px; font-size: 14px; }
.btn-block { width: 100%; }

/* ── Hero: headline and form ── */
.hero { position: relative; isolation: isolate; overflow: hidden; padding: 40px 0 56px; }
/* The main site's hero film behind the whole section (its tl/home.css .tlh-hero-video): it covers the hero edge to edge,
   no controls, no clicks reach it; a wash keeps the heading readable, darkest where the text is. */
.hero-video { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; user-select: none; -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 84%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 84%, transparent 100%); }
.hero-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; pointer-events: none; background: transparent; }
.hero-video video::-webkit-media-controls,
.hero-video video::-webkit-media-controls-start-playback-button,
.hero-video video::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; }
.hero-video::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 55% at 80% 28%, rgba(255, 143, 92, .14), rgba(255, 143, 92, 0) 70%),
    linear-gradient(90deg, rgba(10, 11, 13, .86) 0%, rgba(10, 11, 13, .6) 45%, rgba(10, 11, 13, .32) 100%),
    linear-gradient(180deg, rgba(10, 11, 13, .3) 0%, rgba(10, 11, 13, .1) 55%, rgba(10, 11, 13, .8) 100%); }
.hero-in { position: relative; display: grid; gap: 32px; }
h1 { font-size: clamp(32px, 6vw, 54px); line-height: 1.07; letter-spacing: -.025em; margin: 0 0 16px; font-weight: 800; }
.lead { font-size: clamp(17px, 2.2vw, 19px); color: var(--muted); margin: 0 0 24px; max-width: 34em; }
.points { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.points li { display: flex; gap: 12px; align-items: flex-start; }
.points .ic { width: 22px; height: 22px; flex: none; margin-top: 1px; fill: var(--accent); }
/* ── The sign-up bonus, shown only while the admin has it on (app.js): a badge, the 3D coin with the amount counting up,
   and its conditions right under it, in plain words ── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bonus { margin: 0 0 22px; max-width: 38em; }
.bonus[hidden] { display: none; }
@property --spin { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.offer-badge { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 7px 15px 7px 11px; border-radius: 999px;
  font-size: 13px; font-weight: 700; letter-spacing: .02em; color: #ffe1cf; border: 1px solid transparent;
  background: linear-gradient(rgba(16, 17, 21, .86), rgba(16, 17, 21, .86)) padding-box,
    conic-gradient(from var(--spin), #FF8F5C, #FFD58A, #FF6F91, #B48CFF, #6FE3FF, #FF8F5C) border-box;
  box-shadow: 0 0 24px rgba(255, 143, 92, .25); animation: badge-spin 5s linear infinite, rise .7s cubic-bezier(.2, .9, .3, 1) both; }
.offer-badge svg { width: 15px; height: 15px; fill: #FFD58A; animation: twinkle 1.8s ease-in-out infinite; }
@keyframes badge-spin { to { --spin: 360deg; } }
@keyframes twinkle { 50% { transform: scale(.65) rotate(45deg); opacity: .55; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

.offer-stage { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 26px); margin: 0 0 16px; animation: rise .8s .12s cubic-bezier(.2, .9, .3, 1) both; }
.offer-amount { margin: 0; display: grid; grid-template-columns: auto 1fr; align-items: end; column-gap: 10px; min-width: 0; }
.offer-num { display: block; font-size: clamp(64px, 11vw, 116px); line-height: .9; font-weight: 900; letter-spacing: -.045em; font-variant-numeric: tabular-nums;
  background: linear-gradient(100deg, #FFB547 0%, #FFF3E2 20%, #FF8F5C 42%, #FFD58A 66%, #FF8F5C 86%, #FFB547 100%); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 10px 34px rgba(255, 143, 92, .38)); animation: sheen 5s linear infinite; }
.offer-num.is-done { animation: sheen 5s linear infinite, pop .55s cubic-bezier(.2, 1.7, .4, 1); }
@keyframes sheen { to { background-position: -220% 0; } }
@keyframes pop { 40% { transform: scale(1.09); } }
.offer-cur { font-size: clamp(22px, 3.4vw, 36px); font-weight: 800; color: #FFD58A; padding-bottom: .38em; letter-spacing: -.01em; }
.offer-label { grid-column: 1 / -1; margin-top: 8px; color: var(--ink); font-weight: 600; font-size: clamp(15px, 1.8vw, 17px); line-height: 1.35; }
.bonus-cond { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted); max-width: 40em; animation: rise .8s .24s cubic-bezier(.2, .9, .3, 1) both; }
.bonus-cond a { color: var(--ink); }
.offer-cta { margin-top: 18px; width: 100%; height: 52px; font-size: 17px; animation: rise .8s .36s cubic-bezier(.2, .9, .3, 1) both; }
@media (min-width: 980px) { .offer-cta { display: none; } }
.lead-form { scroll-margin-top: 84px; }

/* The coin: faces and a stack of thin discs for its edge (app.js coin()), turning in 3D; it floats, leans to the pointer
   and catches the light as it turns */
.coin { --size: clamp(96px, 14vw, 138px); position: relative; flex: none; width: var(--size); height: var(--size); perspective: 760px; }
.coin::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -18px; height: 16px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 143, 92, .5), rgba(255, 143, 92, 0)); filter: blur(3px); animation: coin-shadow 3.2s ease-in-out infinite; }
.coin-float { width: 100%; height: 100%; transform-style: preserve-3d; animation: coin-float 3.2s ease-in-out infinite; }
.coin-tilt { width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(var(--rx, 12deg)) rotateY(var(--ry, -8deg)); transition: transform .35s ease-out; }
.coin-body { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: coin-spin 7s cubic-bezier(.55, .05, .45, .95) infinite; }
.coin-edge { position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(90deg, #7d3512, #f0954f 48%, #ffd4a3 52%, #7d3512); }
.coin-face { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; display: grid; place-content: center; justify-items: center;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  background: radial-gradient(circle at 32% 26%, #fff4e4 0%, #ffc677 20%, #ff9a5e 50%, #d0632b 82%, #a8481c 100%);
  box-shadow: inset 0 0 0 3px rgba(255, 238, 214, .7), inset 0 0 0 8px rgba(150, 62, 20, .55), inset 0 0 0 10px rgba(255, 214, 170, .45),
    inset 0 -12px 22px rgba(110, 40, 8, .5), inset 0 10px 18px rgba(255, 255, 255, .35); }
.coin-front { transform: translateZ(6.5px); }
.coin-back { transform: rotateY(180deg) translateZ(6.5px); }
.coin-face::after { content: ""; position: absolute; inset: -40%; background: linear-gradient(115deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .6) 50%, rgba(255, 255, 255, 0) 62%);
  transform: translateX(-70%); animation: coin-shine 7s ease-in-out infinite; }
.coin-glyph { font-size: calc(var(--size) * .44); line-height: 1; font-weight: 900; color: #6e2a0a;
  text-shadow: 0 1px 0 rgba(255, 238, 214, .8), 0 -1px 0 rgba(80, 26, 4, .55), 0 3px 8px rgba(110, 40, 8, .35); }
.coin-num { font-size: calc(var(--size) * .3); letter-spacing: -.03em; }
.coin-sub { margin-top: 2px; font-size: calc(var(--size) * .1); font-weight: 800; letter-spacing: .16em; color: #6e2a0a; }
@keyframes coin-spin { 0% { transform: rotateY(0); } 38%, 50% { transform: rotateY(180deg); } 88%, 100% { transform: rotateY(360deg); } }
@keyframes coin-float { 50% { transform: translateY(-9px); } }
@keyframes coin-shadow { 50% { transform: scale(.82); opacity: .6; } }
@keyframes coin-shine { 0%, 30% { transform: translateX(-70%); } 46%, 100% { transform: translateX(70%); } }

/* The fireworks (fx.js) over the film, under the content; a hint that tapping the sky launches more */
.fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hero-in { z-index: 1; }
.fx-hint { position: absolute; left: 50%; bottom: 16px; z-index: 2; margin: 0; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px;
  font-size: 12px; color: var(--muted); white-space: nowrap; background: rgba(10, 11, 13, .62); border: 1px solid var(--line); pointer-events: none;
  animation: rise .6s 2.6s both; transition: opacity .5s ease; }
.fx-hint.is-gone { opacity: 0; }
.has-offer .hero-video::after { background: radial-gradient(55% 50% at 26% 30%, rgba(255, 143, 92, .2), rgba(255, 143, 92, 0) 70%),
    radial-gradient(60% 55% at 80% 28%, rgba(180, 140, 255, .1), rgba(180, 140, 255, 0) 70%),
    linear-gradient(90deg, rgba(10, 11, 13, .86) 0%, rgba(10, 11, 13, .6) 45%, rgba(10, 11, 13, .32) 100%),
    linear-gradient(180deg, rgba(10, 11, 13, .3) 0%, rgba(10, 11, 13, .1) 55%, rgba(10, 11, 13, .8) 100%); }
.has-offer h1 { font-size: clamp(24px, 3.4vw, 34px); margin-bottom: 10px; }
.has-offer .lead { margin-bottom: 18px; }

/* ── The form ── */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.lead-form { padding: 24px 20px; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.lead-form h2 { font-size: 22px; margin: 0 0 18px; letter-spacing: -.015em; }
.grid2 { display: grid; gap: 0 12px; grid-template-columns: 1fr 1fr; }
.field { margin-bottom: 14px; min-width: 0; }
.field label { display: block; font-size: 14px; color: var(--muted); margin-bottom: 6px; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select {
  width: 100%; height: 48px; font: inherit; font-size: 16px; color: var(--ink); background: var(--bg); border: 1px solid var(--line-2);
  border-radius: var(--r-md); padding: 0 14px; transition: border-color .15s ease, box-shadow .15s ease; }
.field select { appearance: none; padding-right: 40px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; }
.field input:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 143, 92, .2); }
.field :is(input, select)[aria-invalid="true"] { border-color: var(--err); }
.field-err { color: var(--err); font-size: 13px; margin: 6px 2px 0; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-size: 14px; line-height: 1.5; padding: 12px 14px; border-radius: var(--r-md); margin: 4px 0 14px; border: 1px solid var(--line); background: var(--surface-2); }
.form-status.is-ok { border-color: rgba(70, 208, 139, .4); color: var(--ok); }
.form-status.is-warn { border-color: rgba(242, 193, 78, .4); color: var(--warn); }
.form-status.is-err { border-color: rgba(255, 107, 107, .4); color: var(--err); }
.form-status a { color: var(--ink); font-weight: 700; }
.form-note { margin: 14px 0 0; text-align: center; font-size: 14px; color: var(--muted); }
/* The account's terms, under the button (no checkbox) */
.form-legal { margin: 10px 0 0; text-align: center; font-size: 12px; line-height: 1.5; color: var(--faint); }
.form-legal a { color: var(--muted); }
/* How far along the form is (app.js progress()) */
.form-progress { display: flex; align-items: center; gap: 10px; margin: -6px 0 18px; }
.form-progress-track { flex: 1; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.form-progress-fill { display: block; height: 100%; border-radius: inherit; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, #FF8F5C, #FFD58A); transition: transform .5s cubic-bezier(.2, .9, .3, 1.15); }
.form-progress-label { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* With the offer on: the form glows, wears the amount on a ribbon, and its button catches the light */
.lead-form { position: relative; }
.has-offer .lead-form { border-color: rgba(255, 143, 92, .32); box-shadow: 0 24px 60px rgba(0, 0, 0, .35), 0 0 70px rgba(255, 143, 92, .13); }
.form-ribbon { position: absolute; top: -15px; right: 18px; padding: 7px 15px; border-radius: 999px; font-weight: 900; font-size: 14px; letter-spacing: -.01em;
  color: var(--accent-ink); background: linear-gradient(135deg, #FFE0A8, #FF8F5C); box-shadow: 0 10px 26px rgba(255, 143, 92, .45);
  animation: rise .6s .4s both, wiggle 3.6s 1.4s ease-in-out infinite; }
@keyframes wiggle { 0%, 80%, 100% { transform: rotate(0); } 84% { transform: rotate(-6deg) scale(1.07); } 88% { transform: rotate(5deg) scale(1.07); } 92% { transform: rotate(-2deg); } }
.has-offer .btn-primary { position: relative; overflow: hidden; background: linear-gradient(135deg, #FFB547, #FF8F5C 55%, #FF7A42); }
.has-offer .btn-primary::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg);
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); animation: btn-shine 3.6s ease-in-out infinite; }
@keyframes btn-shine { 0%, 62% { left: -60%; } 100% { left: 130%; } }
.lead-form.is-ready .btn-primary:not(:disabled) { animation: ready 1.7s ease-in-out infinite; }
@keyframes ready { 50% { box-shadow: 0 0 0 9px rgba(255, 143, 92, .18); } }

/* Sections come in as they scroll into view (app.js) */
/* (.band .reveal outranks the hover transitions below; app.js drops the classes once in) */
.band .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .9, .3, 1); transition-delay: var(--delay, 0ms); }
.band .reveal.is-in { opacity: 1; transform: none; }
.steps li { transition: transform .25s ease, border-color .25s ease; }
.steps li:hover { transform: translateY(-4px); border-color: rgba(255, 143, 92, .35); }

/* ── Steps ── */
.band { padding: 48px 0; border-top: 1px solid var(--line); }
.band h2 { font-size: clamp(22px, 3.5vw, 30px); letter-spacing: -.02em; margin: 0 0 20px; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.steps li { padding: 22px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.steps .num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 143, 92, .14); color: var(--accent); font-weight: 800; margin-bottom: 14px; }
.steps h3 { font-size: 18px; margin: 0 0 6px; }
.steps p { margin: 0; color: var(--muted); }

/* ── Footer ── */
.foot { border-top: 1px solid var(--line); padding: 24px 0 32px; color: var(--muted); font-size: 13px; }
.copy { margin: 0; color: var(--faint); }
.copy a { color: var(--faint); }
.copy a:hover { color: var(--muted); }

@media (min-width: 720px) {
  .wrap { padding: 0 28px; }
  .lead-form { padding: 28px; }
  .steps { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 979px) {
  .hero-video::after { background: radial-gradient(70% 45% at 75% 22%, rgba(255, 143, 92, .14), rgba(255, 143, 92, 0) 70%),
    linear-gradient(180deg, rgba(10, 11, 13, .78) 0%, rgba(10, 11, 13, .68) 38%, rgba(10, 11, 13, .74) 72%, rgba(10, 11, 13, .95) 100%); }
}
@media (min-width: 980px) {
  .hero { padding: 72px 0 88px; min-height: calc(100vh - 64px); display: flex; align-items: center; }
  .hero > .wrap { width: 100%; }
  .hero-in { grid-template-columns: minmax(0, 1.1fr) minmax(380px, .9fr); gap: 56px; align-items: center; }
}
@media (max-width: 420px) {
  .grid2 { grid-template-columns: 1fr; }
  .langs a { padding: 5px 7px; }
  .brand span { display: none; }
}
@media (max-width: 420px) {
  .offer-stage { gap: 12px; }
  .coin { --size: 84px; }
  .fx-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }