/* ==========================================================================
   TOKENS
   ========================================================================== */
:root{
  --bg:        #050505;
  --ink:       #EDEAE5;          /* warm off-white, not pure #fff */
  --ink-2:     #9B9895;
  --gold:      #D3B07C;
  --hair:      rgba(255,255,255,.07);
  --hair-2:    rgba(255,255,255,.11);
  --fill:      rgba(255,255,255,.028);

  /* dashboard surfaces + market direction.
     green/red are functional here, not brand, they carry price direction.
     gold stays the brand accent (watchlist stars, focus rings). */
  --card:      #0A0A0A;
  --card-2:    #0D0D0D;
  --edge:      rgba(255,255,255,.08);
  --mute:      #8B8B8B;
  --up:        #9FE84B;
  --down:      #FF4B4B;

  /* Two families, one job each: Inter Tight sets every heading and every large
     figure, Inter carries body, UI and labels. Every weight declared below is
     requested in the <link>, so none of them is ever browser-synthesised. */
  --display:   "Inter Tight","Inter",system-ui,-apple-system,Helvetica,Arial,sans-serif;
  --sans:      "Inter",system-ui,-apple-system,Helvetica,Arial,sans-serif;

  /* The ruled column, and it now follows the window instead of ignoring it.
   *
   * It was a flat 1280px. The header and footer run edge to edge and this does not, so on
   * anything wider than a laptop the page sat in a band with two dead margins beside it —
   * 120px each side at 1536, and 320px each side on a 1920 monitor. Read as the page having
   * failed to fill the screen rather than as a margin.
   *
   * `min()` keeps the rules and the intent: a generous cap so the measure never runs away
   * on an ultrawide, and a small constant gutter below that so the column breathes rather
   * than butting against the glass. Everything sized from `--col` — the nav, the frame, the
   * footer and its watermark — moves together, which is what kept them aligned before. */
  --col:       min(1600px, 100% - 48px);   /* the ruled column */
  --nav-h:     88px;

  --fs-logo:   24px;
  --fs-nav:    17px;
  --fs-pill:   15px;
  --fs-h1:     clamp(40px, 5.4vw, 92px);
  --fs-sub:    clamp(16px, 1.35vw, 19px);
  --fs-btn:    16px;

  --ease:      cubic-bezier(.22,.61,.36,1);
  color-scheme: dark;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  min-height:100dvh;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.is-locked{ overflow:hidden; }

ul{ list-style:none; }
a{ color:inherit; text-decoration:none; }
svg{ display:block; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }

.skip{
  position:fixed; top:10px; left:10px; z-index:200;
  padding:10px 16px; border:1px solid var(--gold); border-radius:8px;
  background:#0d0c0a; color:var(--gold); font-size:14px;
  transform:translateY(-200%); transition:transform .2s var(--ease);
}
.skip:focus-visible{ transform:none; }

/* ==========================================================================
   NAV. Full-bleed hairline, content on the same rails as the column.
   ========================================================================== */
.nav{
  position:relative; z-index:20;
  height:var(--nav-h);
  border-bottom:1px solid var(--hair);
}
.nav__in{
  max-width:var(--col);
  height:100%;
  margin-inline:auto;
  padding-inline:28px;
  display:flex; align-items:center; gap:24px;
}

.brand{ display:flex; align-items:center; gap:11px; flex:none; }
.brand svg{ width:24px; height:24px; color:var(--ink); }
.brand span{
  font-family:var(--display);
  font-size:var(--fs-logo); font-weight:600;
  letter-spacing:-.022em; line-height:1;
}

.links{ display:flex; align-items:center; gap:46px; margin-inline:auto; }
.links a{
  font-size:var(--fs-nav); font-weight:450;
  color:var(--ink); white-space:nowrap;
  transition:color .25s var(--ease);
}
.links a:hover{ color:var(--gold); }

/* The three properties are DECLARED, not just referenced.

   `var(--mx,0px)` looked like it made a fallback unnecessary. It does not, and the failure
   was total rather than cosmetic: GSAP reads the current value of a property before it can
   tween it, an undeclared custom property reads as the empty string, and `quickTo` turned
   that into `--mx: NaNpx`. A declared-but-invalid custom property is not ignored — it is
   substituted into `transform`, which makes the whole declaration invalid at computed-value
   time, and the element falls back to `transform:none`. So the first pointer move over a
   button deleted the CSS hover lift as well as the effect it was supposed to add.

   `@property` is what makes them safe. A typed custom property cannot hold an invalid value
   at all: the browser rejects the bad set and keeps the last good one, so the transform
   stays valid no matter what a script writes. It also makes them interpolatable by the
   browser rather than only by GSAP.

   The plain declarations below it are the floor for browsers without `@property`. Between
   the two, `--mx` is a length and `--press` is a number before any script runs. */
@property --mx    { syntax:"<length>"; inherits:false; initial-value:0px; }
@property --my    { syntax:"<length>"; inherits:false; initial-value:0px; }
@property --press { syntax:"<number>"; inherits:false; initial-value:1;   }

/* The three properties motion.js drives, and the transform composed from them.

   `transform` here and `translate` on the hover rules below are DIFFERENT properties. The
   browser applies `translate`, then `rotate`, then `scale`, then `transform`, so the two
   compose instead of overwriting each other — which is the whole point: CSS keeps the 1px
   hover lift and its transition, GSAP gets `transform` to itself and drives it per frame.

   One owner per property. `.btn--light:hover{transform:translateY(-1px)}` and a script
   writing `transform` sixty times a second were two owners of one property, and whichever
   lost the frame is a flicker nobody can reproduce.

   The fallbacks are what the page looks like with no script at all: no offset, no press,
   and the CSS hover exactly as it was. Nothing below needs motion.js to be correct. */
.btn, .challenge-card__cta, .cta-final__btn, .co__pay{
  --mx:0px; --my:0px; --press:1;
  transform:translate3d(var(--mx), var(--my), 0) scale(var(--press));
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border-radius:999px; font-size:var(--fs-btn); font-weight:500;
  white-space:nowrap; flex:none;
  transition:translate .3s var(--ease), background-color .3s var(--ease),
             color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.btn--light{ height:46px; padding-inline:26px; background:#fff; color:#0A0A0A; }
.btn--light:hover{ translate:0 -1px; box-shadow:0 10px 30px -12px rgba(255,255,255,.4); }
.nav-auth{ display:flex; align-items:center; gap:10px; flex:none; }
.nav-auth .btn{ width:110px; }

/* ==========================================================================
   THE SHEEN
   One pass of light across a solid button when the pointer arrives.

   Every hover state on this site changes a colour, and a colour change is a
   state — it says "this is hoverable" and stops. A sweep is an EVENT: it starts,
   crosses, and finishes, and it happens once no matter how long you rest there.
   That is what a physical control does when it catches the light, and it is the
   cheapest thing on this page that reads as expensive.

   Only on the light buttons. On a white pill a lighter band is a highlight; on
   the dark secondaries it would be a grey smear, and putting it everywhere is
   how a nice detail becomes a tic — the audit's note about motion that carries
   no meaning was written about exactly this failure mode.

   ## How it runs once instead of looping

   The band is a pseudo-element parked off the left edge and moved to off the
   right on `:hover`. Because it is a transition between two positions and not
   an animation, it crosses once per arrival and stays where it lands. Leaving
   resets it — with no transition on the way back, so it does not sweep
   backwards through the button on exit, which looks like a mistake.

   `overflow:hidden` keeps it inside the pill's radius, and `isolation:isolate`
   stops the band being clipped by the ancestor's own stacking.
   ========================================================================== */
.btn--light, .challenge-card__cta, .cta-final__btn, .co__pay{
  position:relative; overflow:hidden; isolation:isolate;
}

.btn--light::after,
.challenge-card__cta::after,
.cta-final__btn::after,
.co__pay::after{
  content:"";
  position:absolute; z-index:-1; inset:0 auto 0 0;
  width:42%;
  /* Angled, because a vertical band reads as a wipe and a raked one reads as
     light. 18deg is about the rake of a highlight on a curved surface. */
  transform:translateX(-160%) skewX(-18deg);
  background:linear-gradient(90deg,
              transparent,
              rgba(255,255,255,.55) 50%,
              transparent);
  pointer-events:none;
}

.btn--light:hover::after,
.challenge-card__cta:hover::after,
.cta-final__btn:hover::after,
.co__pay:hover::after{
  transform:translateX(340%) skewX(-18deg);
  transition:transform .78s cubic-bezier(.22,.61,.36,1);
}

/* A disabled control does not catch the light. */
.btn--light[disabled]::after, .co__pay[disabled]::after{ display:none; }

.btn--login{
  height:46px;
  padding-inline:20px;
  border:1px solid var(--hair-2);
  background:transparent;
  color:var(--ink);
}
.btn--login:hover{ border-color:rgba(211,176,124,.55); color:var(--gold); background:rgba(211,176,124,.06); }
.drawer-auth{ display:none; }

.burger{
  display:none; width:42px; height:42px; margin-right:-6px;
  place-items:center; border-radius:999px;
}
.burger i{ display:block; width:19px; height:1.5px; background:var(--ink); border-radius:2px; transition:transform .3s var(--ease), opacity .2s var(--ease); }
.burger i + i{ margin-top:5px; }
.burger[aria-expanded="true"] i:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] i:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* Desktop navigation menus */
.nav-item{ position:relative; }
.nav-trigger{
  display:inline-flex; align-items:center; gap:7px; height:42px; padding:0 13px;
  border:1px solid transparent; border-radius:999px; color:var(--ink);
  font:inherit; font-size:var(--fs-nav); font-weight:450; cursor:pointer;
  transition:color .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease);
}
.nav-trigger svg{ width:12px; height:12px; transition:transform .3s var(--ease); }
.nav-item:hover .nav-trigger,
.nav-item:focus-within .nav-trigger,
.nav-item.is-open .nav-trigger,
.nav-trigger[aria-expanded="true"]{
  color:#F3EFE8; background:linear-gradient(180deg,#1A1712 0%,#0F0D0B 100%);
  border-color:rgba(211,176,124,.34); box-shadow:0 8px 22px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.05);
}
.nav-item:hover .nav-trigger svg,
.nav-item:focus-within .nav-trigger svg,
.nav-item.is-open .nav-trigger svg,
.nav-trigger[aria-expanded="true"] svg{ transform:rotate(180deg); }
.nav-menu{
  position:absolute; top:calc(100% + 8px); left:50%; z-index:30;
  display:grid; gap:4px; min-width:252px; padding:12px;
  border:1px solid rgba(211,176,124,.2); border-radius:18px;
  background:linear-gradient(150deg,rgba(22,20,17,.98) 0%,rgba(8,8,8,.99) 78%);
  box-shadow:0 26px 70px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.055);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translate(-50%,-7px); transform-origin:50% 0;
  transition:opacity .22s var(--ease), transform .28s var(--ease), visibility 0s linear .28s;
}
.nav-menu::before{ content:""; position:absolute; top:-9px; left:0; right:0; height:10px; }
.nav-menu--wide{ min-width:286px; }
.nav-item:hover .nav-menu,
.nav-item:focus-within .nav-menu,
.nav-item.is-open .nav-menu,
.nav-menu.is-open{ opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0); transition-delay:0s; }

/* Ye do rules pehle !important par chal rahe the. Zaroorat sirf itni thi ki
   `.links a` se jeet jayen, aur `.nav-menu a` waise bhi usse zyada specific
   hai. !important hataya, taki aage koi bhi override normal tareeke se kaam
   kare. */
.nav-menu a{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:13px 14px; border-radius:11px; font-size:15px; font-weight:500;
  letter-spacing:-.01em; color:#D8D4CC;
  transition:background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.nav-menu a::after{ content:"↗"; opacity:0; color:var(--gold); transform:translate(-4px,4px); transition:opacity .25s var(--ease), transform .25s var(--ease); }
.nav-menu a:hover,.nav-menu a:focus-visible{ background:rgba(211,176,124,.11); color:#F5F2ED; transform:translateX(2px); }
.nav-menu a:hover::after,.nav-menu a:focus-visible::after{ opacity:1; transform:none; }

/* ==========================================================================
   RULED COLUMN
   ========================================================================== */
.frame{
  position:relative;
  max-width:var(--col);
  margin-inline:auto;
  border-inline:1px solid var(--hair);
}

/* ==========================================================================
   HERO
   ========================================================================== */
/* `overflow:hidden` is gone, and that is the whole of the "there is still a black bar
   behind the header" bug.

   The header has been fully transparent for two commits — measured, `background-color:
   rgba(0,0,0,0)` with no backdrop-filter and nothing painting in any ancestor but the body.
   It looked like a black bar anyway, because there was nothing behind it to see.

   `.hero::before` is the gold aura, and it is already 220px TALLER than the hero at the
   top: `min(72vw,760px)` tall, positioned at `top:2%` and pulled up 42% of its own height.
   All 220px of that were being clipped away by this one declaration, so the page ran flat
   `#050505` from y=0 to y=88 and then began glowing on the exact pixel the header ended.
   A hard horizontal seam at the bottom of the header is indistinguishable from the header
   having a fill.

   Unclipped, the aura runs up behind the header and the transparency has something to be
   transparent about. The header is `z-index:40` and the aura is `z-index:-1` inside this
   element's own stacking context, so the paint order is unchanged — the glow goes behind
   the links, not over them.

   Nothing else was being clipped: `::before` is the only thing that leaves this box, and
   `body{overflow-x:hidden}` is what actually stops it widening the page. */
.hero{
  padding:100px 32px 120px;
  text-align:center;
  position:relative; isolation:isolate;
}
/* The dot field. Full-bleed, and it runs up behind the header for the same reason the
   aura does — a texture that stops at the header's bottom edge draws the header.

   `z-index:-2` puts it behind the gold aura at -1, so the aura reads as light ON the field
   rather than beside it. Both are inside `.hero`'s own stacking context (`isolation:isolate`)
   so neither can escape above the content.

   `pointer-events:none` is not optional: this element covers the header and the hero's two
   buttons, and without it the landing page's primary call to action is unclickable.

   The element is created by hero-dots.js and only when a 2D context exists, so there is no
   empty box on a browser that cannot draw into it. */
.hero__dots{
  position:absolute; z-index:-2;
  top:calc(var(--nav-h) * -1); left:50%; transform:translateX(-50%);
  width:100vw; height:calc(100% + var(--nav-h));
  pointer-events:none;
  /* Fades out at the bottom so the field ends in the page rather than on a line. */
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 58%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 58%,transparent 100%);
}

.hero::before{
  content:""; position:absolute; z-index:-1; width:min(72vw,760px); height:min(72vw,760px);
  left:50%; top:2%; transform:translate(-50%,-42%); border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(211,176,124,.14) 0%,rgba(211,176,124,.045) 28%,transparent 68%);
  filter:blur(2px); animation:hero-breathe 14s ease-in-out infinite;
}
@keyframes hero-breathe{ 0%,100%{ opacity:.45; transform:translate(-50%,-42%) scale(.92); } 50%{ opacity:.9; transform:translate(-50%,-40%) scale(1.08); } }

.pill{
  display:inline-flex; align-items:center; gap:12px;
  height:44px; padding-inline:22px;
  border:1px solid var(--hair-2); border-radius:999px;
  background:#0C0B0A;
  font-size:var(--fs-pill); color:var(--ink);
  white-space:nowrap;
  transition:border-color .3s var(--ease), background-color .3s var(--ease);
}
.pill:hover{ border-color:rgba(211,176,124,.45); background:#100E0B; }
.pill b{ color:var(--gold); font-weight:500; }
.pill svg{ width:15px; height:15px; opacity:.85; transition:transform .3s var(--ease); }
.pill:hover svg{ transform:translateX(4px); }

.h1{
  margin-top:34px;
  font-family:var(--display);
  font-size:var(--fs-h1);
  font-weight:400;
  line-height:1.02;
  letter-spacing:-.035em;
  background:linear-gradient(180deg,#FFFDFA 0%,#DCD7CF 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

.sub{
  margin:30px auto 0;
  max-width:640px;
  font-size:var(--fs-sub);
  line-height:1.62;
  color:var(--ink-2);
}
.sub b{ color:var(--ink); font-weight:500; }

.cta{ display:flex; justify-content:center; gap:16px; margin-top:42px; flex-wrap:wrap; }
.btn--hero{ height:56px; padding-inline:34px; font-size:17px; }
.btn--dark{
  height:56px; padding-inline:32px; font-size:17px;
  background:#111010; color:var(--ink);
  border:1px solid var(--hair-2);
}
/* The secondary earns a lift too. It sat perfectly still next to a primary that
   rose a pixel and glowed, which made "See the rules" read as the disabled one
   of the pair rather than the quieter one. Same 1px, no shadow — quieter, not
   absent. */
.btn--dark:hover{
  background:#191817;
  border-color:rgba(211,176,124,.34);
  translate:0 -1px;
}

/* ==========================================================================
   PRODUCT SHOT
   Sits between the rails exactly where the console did, so the tab strip
   still reads as a lid on top of it.
   ========================================================================== */
.slot{ padding:24px; }

/* The container the desk measures itself against.
 *
 * `container-type` has to sit on the PARENT, not on `.hs` itself. An element is a container
 * for its descendants and not for its own properties, so `font-size:cqi` written on `.hs`
 * while `.hs` was the container resolved against the next container up — of which there was
 * none, so it silently fell back to the viewport. Measured: 11.52px at every slot width,
 * including the 560px one where it should have been 7.5px, which is the whole point of
 * doing this in container units rather than viewport units in the first place.
 *
 * A hero that sizes itself from the window instead of from the column it is in is the same
 * bug as a header that centres itself between two things instead of on the page. */
.shot{ margin:0; container-type:inline-size; }
/* ==========================================================================
   THE HERO WINDOW
   The terminal, framed as an application window.

   A screenshot dropped on a page is a rectangle. A window is an object: the bar
   and the three lights say "this is software, running, on a machine" before a
   single number in it has been read, and it costs about forty lines.

   The frame's contents are `embed/desk.html`, which loads the terminal's own
   stylesheets. See the note in index.html for why that is an iframe.
   ========================================================================== */
.win{
  position:relative;
  border-radius:14px; overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:#0A0A0A;
  /* Three shadows doing three jobs: a hairline to lift the edge off the page, a
     close one for contact, and a very wide soft one so the window sits ABOVE the
     hero rather than on it. The wide one is what makes it read as floating; the
     other two are what stop it reading as a sticker. */
  box-shadow:
    0 0 0 1px rgba(0,0,0,.6),
    0 18px 40px -24px rgba(0,0,0,.9),
    0 60px 140px -60px rgba(0,0,0,1);
}

/* The title bar. macOS proportions: 38px tall, the lights 12px on 8px gaps,
   inset 16px, and the title optically centred rather than centred between the
   lights and the right edge — which is why it is absolutely positioned. */
.win__bar{
  position:relative;
  display:flex; align-items:center; gap:14px;
  height:38px; padding:0 16px;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg,#1B1A19 0%,#141312 100%);
}
.win__dots{ display:flex; align-items:center; gap:8px; flex:none; }
.win__dots i{
  width:12px; height:12px; border-radius:50%;
  /* The real colours, and an inner ring, because a flat disc reads as a dot and
     a ringed one reads as a button. */
  box-shadow:inset 0 0 0 .5px rgba(0,0,0,.28);
}
.win__dots i:nth-child(1){ background:#FF5F57; }
.win__dots i:nth-child(2){ background:#FEBC2E; }
.win__dots i:nth-child(3){ background:#28C840; }

.win__title{
  position:absolute; left:50%; transform:translateX(-50%);
  font-size:12.5px; font-weight:500; letter-spacing:-.005em;
  color:#A8A29B; white-space:nowrap; pointer-events:none;
}
.win__url{
  margin-left:auto;
  font-size:11.5px; color:#6E6963; white-space:nowrap;
}

/* The frame, and the whole reason this is not simply an <iframe> with a height.
 *
 * `embed/desk.html` is laid out at a fixed 1440px, because the terminal is an
 * application and an application that reflows to 700px is a different design —
 * one this page has no business showing. So the frame renders AT 1440 and is
 * scaled down to whatever the column gives it. That is what a screenshot does
 * and what a responsive embed cannot.
 *
 * `padding-top` reserves the aspect before the frame has loaded, so nothing on
 * the page jumps when it arrives. `cqw` is 1% of `.win`'s width, and dividing a
 * length by a length gives the unitless number `scale()` needs.
 *
 * Without container query support the `transform` is invalid and simply does
 * not apply: the frame renders at 1440px and is clipped by `overflow:hidden`.
 * A crop is a poor result and it is not a broken one. */
.win{ container-type:inline-size; }
.win__body{
  --win-w:1440;
  /* 1440x900, which is a laptop, and the crop is the point.
   *
   * This was 1,059 for a while — the desk's real height — on the reasoning that a frame
   * shorter than its content crops the order book. It does, and that is what a window does:
   * an application taller than the screen it is on shows the top of itself. A hero that
   * grows to whatever height the app happens to be is not a window, it is a very long
   * screenshot, and 1440x1060 is nearly square.
   *
   * So the frame is a 16:10 laptop and the book and the positions run off the bottom edge,
   * the same way they do on a real 900px screen. */
  --win-h:900;
  position:relative;
  width:100%;
  padding-top:calc(var(--win-h) / var(--win-w) * 100%);
  overflow:hidden;
  background:#050505;
}
.win__frame{
  position:absolute; top:0; left:0;
  width:calc(var(--win-w) * 1px);
  height:calc(var(--win-h) * 1px);
  border:0;
  transform-origin:0 0;
  transform:scale(calc(100cqw / (var(--win-w) * 1px)));
}

/* Pointer events stay ON, and that is deliberate.
 *
 * `pointer-events:none` was the obvious way to make the still un-clickable and
 * it takes the hovers with it — the browser stops sending the frame anything at
 * all, so the market rows never highlight and the ticket's buttons never lift.
 * The hovers are the entire reason this is a live document instead of a PNG.
 *
 * So the frame is left alive and made inert at the source instead: no script
 * tag in `embed/desk.html`, every select and input disabled, every href a "#",
 * and no handler anywhere to fire. A click lands on something that does nothing,
 * which is what a click on a picture of an app should do. */

@media (max-width:820px){
  .win__url{ display:none; }
  .win__bar{ height:32px; }
  .win__dots i{ width:10px; height:10px; }
}

/* ==========================================================================
   REACH
   Two claims, then who they route through. The bracket marks are drawn in
   CSS so the copy stays clean in the markup.
   ========================================================================== */
.reach{ padding:74px 32px 76px; }

.brk{
  display:flex; align-items:center; justify-content:center; gap:9px;
  font-size:11px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
}
.brk::before{ content:"["; }
.brk::after{ content:"]"; }
.brk::before,.brk::after{ color:var(--mute); font-weight:400; }

.reach__stats{ display:grid; grid-template-columns:1fr 1fr; }
.reach__cell{ padding:0 24px; text-align:center; }
.reach__cell + .reach__cell{ border-left:1px solid var(--hair); }
.reach__cell b{
  display:block; margin-top:18px;
  font-family:var(--display);
  font-size:clamp(32px,4.6vw,64px); font-weight:400;
  line-height:1.02; letter-spacing:-.035em;
  background:linear-gradient(180deg,#FFFDFA 0%,#DCD7CF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.reach__venues{ margin-top:88px; }

.marks{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(26px,5vw,72px); flex-wrap:wrap;
  margin-top:30px;
}
.marks li{
  font-size:clamp(16px,1.6vw,21px); font-weight:600;
  letter-spacing:.01em; color:rgba(255,255,255,.86);
  white-space:nowrap;
  transition:color .25s var(--ease);
}
.marks li:hover{ color:#fff; }

@media (max-width:820px){
  .reach{ padding:48px 20px 52px; }
  .reach__stats{ grid-template-columns:1fr; gap:34px; }
  .reach__cell{ padding:0; }
  .reach__cell + .reach__cell{ border-left:0; border-top:1px solid var(--hair); padding-top:34px; }
  .reach__venues{ margin-top:52px; }
  .marks{ gap:22px 30px; margin-top:24px; }
}

/* ==========================================================================
   SECTION FURNITURE
   ========================================================================== */
.sec{ border-top:1px solid var(--hair); }

.sec__head{ padding:76px 32px 44px; text-align:center; }
.sec__eyebrow{
  font-size:12px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
}
.sec__title{
  margin-top:18px;
  font-family:var(--display);
  font-size:clamp(28px,3.2vw,48px); font-weight:400;
  line-height:1.08; letter-spacing:-.032em;
  background:linear-gradient(180deg,#FFFDFA 0%,#DCD7CF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.sec__lede{
  margin:20px auto 0; max-width:560px;
  font-size:clamp(15px,1.2vw,17px); line-height:1.6; color:var(--mute);
}

/* ========================================================================
   CHALLENGES
   Account-size cards follow the landing page's ruled, dark visual system
   while keeping the comparison readable at a glance.
   ======================================================================== */
.challenge-grid{
  display:grid;
  /* The COUNT drives the columns, not the other way round. This was a hard five, sized for
     the five cards that used to be typed into the markup; the catalogue has five crypto
     plans and three prediction ones, and a five-column grid holding three is two empty
     cells. `challenges.js` sets `--n` from what the API actually returned. */
  grid-template-columns:repeat(var(--n,5),minmax(0,1fr));
  gap:12px;
  padding:8px 24px 78px;
}

/* Which market, above the cards. An account trades one vertical for its whole life, so
   this is a purchase decision and not a filter — it cannot be changed afterwards. */
.challenge-tabs{
  display:flex; gap:6px; padding:0 24px 18px;
}
.challenge-tabs button{
  height:34px; padding-inline:16px; border-radius:999px;
  border:1px solid var(--hair-2); background:transparent;
  color:var(--mute); font-size:12px; font-weight:500;
  transition:color .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease);
}
.challenge-tabs button:hover{ color:#ECE9E4; }
.challenge-tabs button[aria-pressed="true"]{
  background:#F1EFEB; border-color:#F1EFEB; color:#0A0A0A;
}
.challenge-empty{
  grid-column:1 / -1; padding:28px 0; color:var(--mute); font-size:13px; line-height:1.6;
}

@media (max-width:820px){ .challenge-tabs{ padding:0 20px 14px; } }
.challenge-card{
  position:relative;
  display:flex; flex-direction:column; min-width:0; min-height:500px;
  padding:26px 20px 20px;
  border:1px solid var(--hair-2);
  background:linear-gradient(180deg,#0D0D0D 0%,#080808 100%);
  transition:transform .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
/* `translate`, not `transform`, for the same reason as the buttons: motion.js
   owns `transform` on anything it touches and two owners of one property is a
   fight that shows up as a flicker on whichever frame loses. The card itself is
   not a motion.js target, but its CTA is a child and the rule reads better kept
   consistent than kept clever.

   The lift is 4px and the border warms. What is new is the light: a soft gold
   pool at the top edge, brought in on hover, so the card looks lit from above
   rather than merely displaced upward. A card that only moves reads as a
   sticker being peeled. */
.challenge-card:hover{
  translate:0 -4px;
  border-color:rgba(211,176,124,.42);
  background:#0E0D0C;
  box-shadow:0 -1px 0 rgba(211,176,124,.35),
             0 18px 46px -28px rgba(211,176,124,.5);
}

@media (prefers-reduced-motion:reduce){
  .challenge-card:hover{ translate:none; }
  .btn--dark:hover, .btn--light:hover{ translate:none; }
}
.challenge-card--featured{ border-color:rgba(211,176,124,.5); background:linear-gradient(180deg,#12100E 0%,#090909 100%); }
.challenge-card--featured::before{ content:""; position:absolute; inset:-1px -1px auto; height:2px; background:linear-gradient(90deg,#B9925A,#E2C58E); }
.challenge-card__top h3{
  font-family:var(--display); font-size:clamp(38px,3.4vw,58px); font-weight:400;
  line-height:1; letter-spacing:-.045em; color:#F5F2ED;
}
.challenge-card__top p{ margin-top:17px; font-size:11px; line-height:1.4; color:var(--mute); }
.challenge-card__tag{
  position:absolute; top:13px; right:14px;
  font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold);
}
.challenge-card__fee{ margin-top:39px; padding:24px 0 23px; border-block:1px solid var(--hair); }
.challenge-card__fee strong{ display:block; font-family:var(--display); font-size:34px; font-weight:400; letter-spacing:-.03em; color:#F5F2ED; }
.challenge-card__fee span{ display:block; margin-top:8px; font-size:10.5px; color:var(--mute); }
.challenge-card__fee s{ margin-right:5px; color:#6D6965; }
.challenge-card__rules{ margin-top:19px; }
.challenge-card__rules > div{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 0; border-bottom:1px solid var(--hair); }
.challenge-card__rules dt{ display:flex; align-items:center; gap:8px; min-width:0; font-size:11px; color:var(--mute); }
.challenge-card__rules dt::before{ display:inline-grid; place-items:center; width:13px; color:#A9A39B; font-size:12px; }
.challenge-card__rules > div:nth-child(1) dt::before{ content:"↗"; }
.challenge-card__rules > div:nth-child(2) dt::before{ content:"◇"; }
.challenge-card__rules > div:nth-child(3) dt::before{ content:"◷"; }
.challenge-card__rules > div:nth-child(4) dt::before{ content:"⌁"; }
/* Two more rows: the step count and the drawdown type, both of which decide whether somebody
   passes and neither of which the card used to state. */
.challenge-card__rules > div:nth-child(5) dt::before{ content:"◈"; }
.challenge-card__rules > div:nth-child(6) dt::before{ content:"◷"; }
.challenge-card__rules dd{ flex:none; font-size:11px; font-weight:600; color:#ECE9E4; text-align:right; }
.challenge-card__cta{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-height:48px; margin-top:auto; padding:0 14px;
  background:#F1EFEB; color:#0A0A0A; font-size:11.5px; font-weight:600;
  transition:translate .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.challenge-card__cta span{ font-size:21px; font-weight:400; line-height:1; }
.challenge-card__cta:hover{ translate:0 -1px; box-shadow:0 12px 26px -16px rgba(255,255,255,.8); }
.challenge-card--featured .challenge-card__cta{ background:linear-gradient(105deg,#B9925A,#E2C58E); color:#0A0A0A; }

@media (max-width:1160px){
  /* `min()` so a three-plan catalogue stays three columns here rather than being widened
     back out to three from two. The breakpoint is a ceiling on the count, not a target. */
  .challenge-grid{ grid-template-columns:repeat(min(var(--n,5),3),minmax(0,1fr)); }
}

/* ==========================================================================
   BELOW 820px THE GRID BECOMES A SWIPE

   Five cards stacked one per row is roughly 2,300px of scrolling to compare
   two prices, and comparison is the entire job of this page. Side by side is
   what makes a price mean something, and a phone can only do side by side
   horizontally.

   Deliberately NOT applied above this width. Five cards already fit there, and
   a carousel on a desktop hides four of them behind a gesture — it would be
   taking working layout away and calling it an improvement.

   Native scroll-snap, no library and no JavaScript. The cards are already
   focusable through their CTA links, so keyboard users reach them by tabbing
   and the browser scrolls to follow — which is why there is no `tabindex` on
   the container. Adding one would put an extra stop in the tab order that does
   nothing when you land on it.
   ========================================================================== */
@media (max-width:820px){
  .challenge-grid{
    display:flex;
    grid-template-columns:none;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    gap:10px;
    /* Both the gutter and the card width are in `vw`, and they have to be.
       *
       Written as percentages first, and the last card then rested 30px off centre at the
       end of the scroll. The two resolve against DIFFERENT boxes: `flex-basis` against the
       flex container's CONTENT box, which the padding has already narrowed, and `padding`
       against its containing block. So 82% of one and 9% of the other are not the halves
       of 100% they look like.
       *
       In `vw` the arithmetic is exact and legible: the gutter is half of whatever the card
       does not occupy, so the first and last card can both reach the centre. `.sec` adds no
       horizontal padding, so the grid spans the viewport and `vw` is the right unit. */
    padding:4px 11vw 52px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  /* The scrollbar is hidden because the cut-off next card is the affordance — a
     78% card leaves 22% of its neighbour showing, which says "there is more"
     more clearly than a 3px bar nobody looks at. */
  .challenge-grid::-webkit-scrollbar{ display:none; }

  .challenge-card{
    flex:0 0 78vw;
    scroll-snap-align:center;
    min-height:460px; padding:22px 16px 16px;
  }
  .challenge-card__fee{ margin-top:32px; padding-block:20px; }
}

@media (max-width:560px){
  /* Taller cards would push the CTA below the fold on a small phone, and a card
     you have to scroll vertically AND horizontally is two gestures to read one
     price. */
  .challenge-card{ min-height:0; flex-basis:82vw; }
  .challenge-grid{ padding-inline:9vw; }   /* (100 - 82) / 2 */
  .challenge-card__fee{ margin-top:28px; }
}

@media (prefers-reduced-motion:reduce){
  .challenge-grid{ scroll-behavior:auto; }
}

/* ==========================================================================
   HOW IT WORKS
   Media block on top, copy beneath it on the page itself. No card frame
   around the words.
   ========================================================================== */
.how-feed{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px;
  width:calc(100% - 68px); max-width:1240px; margin:0 auto; padding:8px 0 70px;
}
.how-feed__card{
  min-width:0; opacity:0; transform:translateY(18px);
  transition:opacity .8s var(--ease), transform .9s var(--ease), border-color .3s var(--ease);
  transition-delay:calc(var(--i,0) * 90ms);
}
.how-feed__card.is-live{ opacity:1; transform:none; }
.how-feed__media{
  position:relative; aspect-ratio:16 / 10; overflow:hidden;
  border:0; border-radius:10px;
  background-color:#000; background-image:var(--slot-image);
  background-size:cover; background-position:center;
  box-shadow:none;
  transition:transform .8s var(--ease),filter .8s var(--ease);
}
.how-feed__card:hover .how-feed__media{ transform:scale(1.018); filter:saturate(1.08); }
.how-feed__media::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:rgba(0,0,0,.48);
}
.how-feed__step{
  position:absolute; top:16px; left:18px; z-index:1;
  font-size:11px; letter-spacing:.2em; color:var(--gold);
}
.how-feed__label{
  position:absolute; top:50%; left:50%; z-index:1;
  transform:translate(-50%,-50%);
  font-family:var(--display); font-size:clamp(18px,2vw,27px); font-weight:500;
  letter-spacing:.05em; color:#F3EFE8; text-align:center; white-space:nowrap;
  text-shadow:0 2px 18px rgba(0,0,0,.5);
}
.how-feed__card h3{
  margin:26px 0 0; font-family:var(--display); font-size:clamp(20px,1.7vw,26px);
  font-weight:500; line-height:1.16; letter-spacing:-.025em; color:#F1EEE8;
}
.how-feed__card p{ margin:22px 0 0; max-width:390px; font-size:14px; line-height:1.62; color:var(--mute); }

@media (max-width:900px){
  .how-feed{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; width:calc(100% - 48px); }
}
@media (max-width:620px){
  .how-feed{ grid-template-columns:minmax(0,1fr); width:calc(100% - 40px); gap:34px; padding-bottom:48px; }
  .how-feed__card h3{ margin-top:20px; }
  .how-feed__card p{ margin-top:12px; }
}

/* ==========================================================================
   RULES
   Chaar rules, do par do khaanon mein, beech mein wahi hairline cross jo poore
   page ko baandhta hai. Baayen taraf baat, daayen taraf wahi baat product ke
   andar chalti hui.

   MOTION
   Do marquee aur ek slider. Har marquee ke andar ek hi set do baar rakha hai,
   isliye -50% par frame bilkul wahi dikhta hai jahan se shuru hua tha aur loop
   mein jod nazar nahi aata. Yahi tarkeeb pred-rail mein pehle se chal rahi hai.
   Hover par sab ruk jaata hai.

   Saare selectors `.rules` ke andar hain. `.cell` aur `.mock` jaise naam aam
   hain, aur is tarah wo page ke kisi aur hisse se kabhi nahi takrayenge.

   script.js chhune ki zaroorat nahi. Har cell par [data-step] hai aur maujooda
   observer usko .is-live de deta hai.
   ========================================================================== */
.rules{
  /* padhne laayak tones. Kaali screen par --mute chhote text ke liye bahut
     halka padta hai, isliye labels aur body ke liye alag rakhe hain. Dono
     #050505 par 7:1 se upar hain. */
  --label:var(--ink-2);
  --copy:var(--mute);
  --gold-txt:var(--gold);
  --loss:#D9A7A7;

  font-family:var(--sans);

  display:grid; grid-template-columns:1fr 1fr;
  width:calc(100% - 68px); max-width:1240px; margin:0 auto; padding:12px 0 82px;
}

.rules .cell{
  display:grid; grid-template-columns:minmax(0,236fr) minmax(0,272fr);
  align-items:end; gap:46px;
  opacity:0; transform:translateY(22px);
  transition:opacity .85s var(--ease) var(--d,0ms), transform .9s var(--ease) var(--d,0ms);
}
.rules .cell.is-live{ opacity:1; transform:none; }
.rules .cell:nth-child(odd){ padding-right:30px; border-right:1px solid var(--hair); }
.rules .cell:nth-child(even){ padding-left:30px; }
.rules .cell:nth-child(-n+2){ padding-bottom:48px; border-bottom:1px solid var(--hair); }
.rules .cell:nth-child(n+3){ padding-top:48px; }

.rules .cell__copy h3{
  font-family:var(--display); font-size:clamp(19px,1.75vw,24px);
  font-weight:600; line-height:1.22; letter-spacing:-.028em; color:var(--ink);
}
.rules .cell__copy h3 em{ font-style:normal; color:var(--gold); }
.rules .cell__copy p{
  margin-top:14px; max-width:34ch;
  font-size:13.5px; line-height:1.58; color:var(--copy);
}

/* --- card shell ---------------------------------------------------------- */
.rules .mock{
  position:relative; min-width:0; height:262px; overflow:hidden;
  border:1px solid var(--hair-2); border-radius:16px;
  background:linear-gradient(180deg,#121211 0%,#090909 100%);
  box-shadow:0 18px 42px rgba(0,0,0,.24);
  transition:border-color .35s var(--ease);
}
.rules .cell:hover .mock{ border-color:rgba(211,176,124,.3); }
/* Visually hidden, still read aloud. Was scoped to `.rules` and is now global,
   because the hero's figcaption needs it too — it carries the description the
   old <img alt> did, and it sits outside the `aria-hidden` block so it is the
   one thing in there a screen reader does get. */
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* --- 01 . tile marquee ----------------------------------------------------
   Do rows, ulti disha mein. Tiles kinare se bahar nikalte hain, isliye list
   card se lambi lagti hai.
   -------------------------------------------------------------------------- */
.rules .tiles{
  position:absolute; inset:32px auto auto 0; display:grid; gap:15px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 88%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 88%,transparent 100%);
}
.rules .tiles__row{ overflow:hidden; }
.rules .tiles__track{ display:flex; width:max-content; animation:tiles-fwd 26s linear infinite; }
.rules .tiles__row:nth-child(2) .tiles__track{ animation:tiles-rev 31s linear infinite; }
.rules .tiles__set{ display:flex; gap:15px; padding-right:15px; }
.rules .mock:hover .tiles__track{ animation-play-state:paused; }
@keyframes tiles-fwd{ to{ transform:translateX(-50%); } }
@keyframes tiles-rev{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }

/* Coins gol, venues chaukor. Ye sajawat nahi: har exchange apne aap ko
   chaukor draw karta hai aur har coin ko gol, to yahi shakl padhne wale ko
   bina soche bata deti hai ki kaunsi cheez kya hai.

   Har tile mein ticker neeche baithta hai aur logo uske upar. Logo ki file
   maujood hui to woh ticker ko dhak leta hai; nahi hui to <img alt=""> khud
   ko chhupa leta hai aur ticker dikhta rehta hai. Isliye card aaj bhi, bina
   ek bhi nayi file ke, poora dikhta hai. Iske liye JS ki zaroorat nahi. */
.rules .tile{
  position:relative; overflow:hidden;
  display:grid; place-items:center; width:74px; height:74px; flex:none;
  border-radius:16px; border:1px solid var(--hair-2); background:#0E0E0D;
  color:var(--gold); transition:border-color .3s var(--ease);
}
.rules .tile--coin{ border-radius:50%; }
.rules .tile b{
  font-family:var(--display); font-size:14px; font-weight:600;
  letter-spacing:-.01em; color:var(--gold-txt);
}
.rules .tile img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; padding:17px; background:#0E0E0D;
}
.rules .tile--coin img{ padding:12px; border-radius:50%; }
.rules .mock:hover .tile{ border-color:rgba(211,176,124,.28); }

/* --- 02 . candles under a target line -------------------------------------
   Ye ek baar chalta hai, loop nahi. Target ki taraf badhna ek safar hai, aur
   safar dohraya jaye to woh safar nahi rehta.
   -------------------------------------------------------------------------- */
.rules .chart{ position:absolute; inset:22px; }
.rules .chart svg{ width:100%; height:100%; }
.rules .chart__note{ position:absolute; top:0; left:2px; font-size:11px; font-weight:500; color:var(--label); }
.rules .chart__pen{ stroke-dasharray:600; stroke-dashoffset:600;
                    transition:stroke-dashoffset 1.4s var(--ease) .35s; }
.rules .is-live .chart__pen{ stroke-dashoffset:0; }
.rules .chart rect{ opacity:0; transform:translateY(7px); transform-box:fill-box;
                    transition:opacity .5s var(--ease) var(--cd,0ms), transform .6s var(--ease) var(--cd,0ms); }
.rules .is-live .chart rect{ opacity:1; transform:none; }
.rules .chart__last{ animation:rules-glow 3s ease-in-out infinite 2s; }
@keyframes rules-glow{ 0%,100%{ opacity:1 } 50%{ opacity:.62 } }

/* --- 03 . risk ticket ------------------------------------------------------
   Knob 0 se 1.80% tak jaata hai, wahan thehrta hai, phir wapas.

   Button aur chip flow mein hain, absolute nahi. Card ki oonchai tay hai,
   isliye do cheezein ek hi kone par pin nahi ho saktin, warna ek doosre par
   chadh jaati hain. Neeche wala hissa margin-top:auto se tal par baithta hai.
   -------------------------------------------------------------------------- */
.rules .ticket{ position:absolute; inset:20px; display:flex; flex-direction:column; }
.rules .ticket__top{ display:flex; align-items:center; gap:9px; }
.rules .ticket__pair{
  display:inline-flex; align-items:center; gap:8px; padding:7px 11px;
  border-radius:8px; background:#141312; font-size:11.5px; font-weight:600; color:var(--ink);
}
.rules .ticket__pair i{ width:14px; height:14px; border-radius:50%;
                        background:linear-gradient(135deg,#D3B07C,#8B6F45); }
.rules .ticket__badge{
  padding:6px 10px; border-radius:7px; background:rgba(211,176,124,.15);
  font-size:10.5px; font-weight:600; letter-spacing:.04em; color:var(--gold-txt);
}
.rules .ticket__live{
  margin-left:auto; display:inline-flex; align-items:center; gap:7px;
  font-size:10.5px; font-weight:500; color:var(--label);
}
.rules .ticket__live::before{
  content:""; width:5px; height:5px; border-radius:50%; background:var(--gold);
  animation:rules-blink 2.6s ease-in-out infinite;
}
@keyframes rules-blink{ 0%,100%{ opacity:1 } 50%{ opacity:.22 } }

.rules .ticket__panel{ margin-top:13px; padding:12px 13px 14px; border-radius:11px; background:#0D0D0C; }
.rules .ticket__panel > span{
  font-size:10.5px; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; color:var(--label);
}
.rules .ticket__val{
  margin-top:4px; font-family:var(--display); font-size:27px; font-weight:500;
  letter-spacing:-.035em; color:var(--gold); font-variant-numeric:tabular-nums;
}

.rules .ticket__slider{ position:relative; height:12px; margin-top:12px; }
.rules .ticket__slider::before{
  content:""; position:absolute; top:5px; left:0; right:0; height:2px; border-radius:2px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.2) 0 1px,transparent 1px 10px),
             rgba(255,255,255,.07);
}
.rules .ticket__bar{ position:absolute; top:5px; left:0; width:0; height:2px; border-radius:2px;
                     background:linear-gradient(90deg,#8B6F45,var(--gold)); }
.rules .ticket__knob{ position:absolute; top:0; left:0; width:12px; height:12px; border-radius:50%;
                      border:2px solid var(--gold); background:#0A0A0A; }
.rules .is-live .ticket__bar { animation:slide-bar  6s var(--ease) infinite .6s; }
.rules .is-live .ticket__knob{ animation:slide-knob 6s var(--ease) infinite .6s; }
.rules .mock:hover .ticket__bar,
.rules .mock:hover .ticket__knob{ animation-play-state:paused; }
@keyframes slide-knob{ 0%{ left:0 } 26%{ left:var(--at,36%) } 84%{ left:var(--at,36%) } 100%{ left:0 } }
@keyframes slide-bar { 0%{ width:0 } 26%{ width:var(--at,36%) } 84%{ width:var(--at,36%) } 100%{ width:0 } }

.rules .ticket__tip{
  position:absolute; top:58px; right:-4px; z-index:2; padding:10px 13px;
  border:1px solid var(--hair-2); border-radius:11px; background:#171614;
  box-shadow:0 14px 34px rgba(0,0,0,.55);
  opacity:0; transform:translateY(6px);
  transition:opacity .5s var(--ease) 1s, transform .5s var(--ease) 1s;
}
.rules .is-live .ticket__tip{ opacity:1; transform:none; }
.rules .ticket__tip span{ font-size:10px; font-weight:500; letter-spacing:.06em; color:var(--label); }
.rules .ticket__tip b{
  display:block; margin-top:3px; font-family:var(--display); font-size:18px;
  font-weight:500; letter-spacing:-.03em; color:var(--loss);
}

.rules .ticket__foot{ display:grid; justify-items:start; gap:9px; margin-top:auto; }
.rules .ticket__btn{
  padding:10px 16px; border-radius:9px; background:rgba(211,176,124,.16);
  font-size:12.5px; font-weight:600; color:var(--gold-txt);
}
.rules .ticket__chip{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px;
  border:1px solid var(--hair-2); border-radius:9px; background:#121110;
  font-size:11px; font-weight:500; color:var(--label);
}
.rules .ticket__chip svg{ width:13px; height:13px; flex:none; color:var(--gold); }

/* --- 04 . payout marquee ---------------------------------------------------
   List upar ki taraf sarakti hai. Beech ki patti tay hai, aur jo row uske aar
   paar guzarti hai wahi apne aap ujaagar hoti hai, isliye highlight kisi row
   se nahi, jagah se bandha hai.

   Note: yahan ke figures illustrative hain. Agar ye asli payouts nahi hain to
   ya to inhe API se bharo, ya card par ek chhota "Illustrative" label lagao.
   -------------------------------------------------------------------------- */
.rules .pay{ position:absolute; inset:22px; }
.rules .pay__head{
  display:flex; justify-content:space-between; padding:0 12px 11px;
  font-size:11.5px; font-weight:500; color:var(--label);
}
.rules .pay__win{
  position:relative; height:180px; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 78%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 78%,transparent 100%);
}
.rules .pay__track{ animation:pay-up 17s linear infinite; }
.rules .mock:hover .pay__track{ animation-play-state:paused; }
@keyframes pay-up{ to{ transform:translateY(-50%); } }

.rules .pay__row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  height:52px; padding:0 12px; border-left:2px solid var(--hair-2);
}
.rules .pay__row + .pay__row{ margin-top:7px; }
.rules .pay__row b{ display:block; font-size:12.5px; font-weight:600; color:var(--ink); }
.rules .pay__row span{ display:block; margin-top:3px; font-size:11px; color:var(--label); }
.rules .pay__amt{ text-align:right; }
.rules .pay__amt b{ font-variant-numeric:tabular-nums; }
.rules .pay__amt span{ color:var(--gold-txt); font-weight:500; font-variant-numeric:tabular-nums; }

.rules .pay__band{
  position:absolute; left:0; right:0; top:96px; height:52px; z-index:1;
  border-left:2px solid var(--gold); border-radius:0 8px 8px 0;
  background:linear-gradient(90deg,rgba(211,176,124,.15),rgba(211,176,124,.02));
  pointer-events:none;
}
.rules__cta{ grid-column:1 / -1; display:flex; justify-content:flex-end; margin-top:30px; padding-top:24px; border-top:1px solid var(--hair); }
.rules__cta .btn{ height:46px; padding-inline:24px; font-size:14px; }
.rules .cell__copy h3 em,
.rules .chart__note,
.rules .ticket__badge,
.rules .ticket__val,
.rules .ticket__btn,
.rules .pay__amt span{ color:var(--gold); }

/* --- responsive ----------------------------------------------------------- */
@media (max-width:1040px){
  .rules .cell{ grid-template-columns:minmax(0,1fr); gap:24px; align-items:start; }
  .rules .cell__copy{ order:2; }
  .rules .cell__copy p{ max-width:none; }
  .rules .mock{ order:1; height:250px; }
  .rules .pay__win{ height:170px; }
  .rules .pay__band{ top:90px; }
}
@media (max-width:820px){
  .rules{ grid-template-columns:minmax(0,1fr); width:calc(100% - 40px); padding-bottom:52px; }
  .rules .cell:nth-child(odd){ padding-right:0; border-right:0; }
  .rules .cell:nth-child(even){ padding-left:0; }
  .rules .cell:nth-child(-n+3){ padding-bottom:34px; border-bottom:1px solid var(--hair); }
  .rules .cell:nth-child(n+2){ padding-top:34px; }
  .rules__cta{ justify-content:flex-start; margin-top:24px; padding-top:20px; }
}

/* motion band karne walon ke liye marquee ruk jaate hain, content rehta hai */
@media (prefers-reduced-motion:reduce){
  .rules .tiles__track,
  .rules .pay__track,
  .rules .ticket__bar,
  .rules .ticket__knob,
  .rules .ticket__live::before,
  .rules .chart__last{ animation:none !important; }
  .rules .ticket__bar{ width:var(--at,36%); }
  .rules .ticket__knob{ left:var(--at,36%); }
}

/* ==========================================================================
   MARKETS
   Two full-bleed bands, mirrored. Almost no body copy: the argument is
   carried by scale and by form, a continuous candle field against a stack of
   binary bars. Crypto runs, predictions land.
   ========================================================================== */
.band{
  position:relative;
  min-height:clamp(340px,47vh,480px);
  display:flex; align-items:center;
  border-top:1px solid var(--hair);
  overflow:hidden;
}

.band__viz{
  position:absolute; top:0; bottom:0;
  pointer-events:none;
}
.band--a .band__viz{
  left:50%; right:0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 88%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 88%,transparent 100%);
}
.band--b .band__viz{ left:0; right:50%; }

/* Prediction-market cards. Each moving row contains two identical sets,
   allowing it to loop without a visible reset. */
.pred-rail{
  display:flex; flex-direction:column; justify-content:center; gap:12px;
  overflow:hidden;
  padding-block:26px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);
}
.pred-rail__row{ overflow:hidden; }
.pred-rail__track{ display:flex; width:max-content; animation:pred-flow 34s linear infinite; }
.pred-rail:hover .pred-rail__track{ animation-play-state:paused; }
.pred-rail__track--reverse{ animation-direction:reverse; animation-duration:39s; }
.pred-rail__set{ display:flex; gap:12px; padding-right:12px; }
@keyframes pred-flow{ to{ transform:translateX(-50%); } }

.pred-card{
  width:246px; min-height:126px; padding:13px;
  border:1px solid rgba(255,255,255,.09); border-radius:13px;
  background:linear-gradient(145deg,#191d20,#111315);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025), 0 10px 28px rgba(0,0,0,.18);
  color:#D8D8D5;
}
.pred-card__top{ display:flex; align-items:flex-start; gap:9px; min-height:37px; }
.pred-card__top b{
  display:-webkit-box; flex:1; min-width:0; overflow:hidden;
  -webkit-box-orient:vertical; -webkit-line-clamp:2;
  font-size:12px; font-weight:600; line-height:1.3; letter-spacing:-.012em;
}
.pred-card__icon{
  display:grid; place-items:center; flex:none;
  width:27px; height:27px; border-radius:7px;
  font-size:14px; font-style:normal; font-weight:700; line-height:1;
}
.pred-card__icon--image{ padding:2px; overflow:hidden; background:#12161B; }
.pred-card__icon--image img{ display:block; width:100%; height:100%; object-fit:contain; }
.pred-card__icon--kharg{ padding:0; overflow:hidden; background:#15506A; }
.pred-card__icon--kharg svg{ display:block; width:100%; height:100%; }
.pred-card__icon--seal{ padding:0; overflow:hidden; }
.pred-card__icon--seal svg{ display:block; width:100%; height:100%; }
.pred-card__icon--btc{ background:#F7931A url("./img/bitcoin-logo.png") center / 100% no-repeat; color:transparent; font-size:0; }
.pred-card__icon--fed{ background:#14271B url("./img/fed-logo.png") center / 74% no-repeat; color:transparent; font-size:0; }
.pred-card__icon--ai{ background:#E7E3D8 url("./img/anthropic-logo.png") center / 74% no-repeat; color:transparent; font-size:0; }
.pred-card__choice{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:7px; margin-top:6px; }
.pred-card__choice span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10.5px; color:#C0C2C0; }
.pred-card__choice strong{ font-size:11px; font-weight:600; color:#F2F0EC; }
.pred-card__choice em{ min-width:31px; padding:4px 5px; border-radius:4px; background:rgba(46,189,133,.16); color:#49C88C; font-size:9.5px; font-style:normal; font-weight:700; line-height:1; text-align:center; }
.pred-card__choice em.is-no{ background:rgba(240,97,109,.14); color:#EF737C; }
.pred-card__foot{ display:flex; justify-content:space-between; gap:8px; margin-top:10px; padding-top:8px; border-top:1px solid rgba(255,255,255,.06); font-size:9.5px; letter-spacing:.04em; color:#858A89; text-transform:uppercase; }
.pred-card__foot i{ display:inline-block; width:5px; height:5px; margin-right:4px; border-radius:50%; background:#F0483D; }
.pred-card__foot b{ color:var(--gold); font-weight:600; }
.pred-card__gauge{ display:flex; flex:none; flex-direction:column; align-items:center; justify-content:center; width:37px; height:37px; border:3px solid #62C887; border-left-color:rgba(98,200,135,.22); border-bottom-color:rgba(98,200,135,.22); border-radius:50%; }
.pred-card__gauge strong{ font-size:11px; line-height:1; }
.pred-card__gauge em{ margin-top:2px; font-size:8px; font-style:normal; color:#8C9490; }
.pred-card--binary .pred-card__top{ align-items:center; }
.pred-card--binary .pred-card__top b{ line-height:1.22; }
.pred-card--binary .pred-card__gauge{ margin-left:auto; }
.pred-card__binary-actions{ display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:9px; }
.pred-card__binary-actions span{ padding:9px 8px; border-radius:5px; font-size:11px; font-weight:700; text-align:center; }
.pred-card__binary-actions .is-up{ background:rgba(46,189,133,.18); }
.pred-card__binary-actions .is-down{ background:rgba(240,97,109,.16); }

.band__copy{ position:relative; z-index:1; width:50%; padding:48px 36px; }
.band--b .band__copy{ margin-left:auto; text-align:right; }

.band__idx{
  font-size:12px; font-weight:500;
  letter-spacing:.22em; color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.band__name{
  margin-top:16px;
  font-family:var(--display);
  font-size:clamp(42px,7.4vw,116px); font-weight:300;
  line-height:.94; letter-spacing:-.042em;
  background:linear-gradient(180deg,#FFFDFA 0%,#D6D1C9 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.band__line{
  margin-top:20px;
  font-size:clamp(17px,1.5vw,21px); line-height:1.45; color:#B4B1AC;
}
.band__read{
  margin-top:26px;
  font-size:clamp(24px,2.4vw,34px); font-weight:500;
  letter-spacing:-.025em; color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.band__read em{
  font-style:normal; font-size:12px; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--mute); margin-left:11px;
}

.band__meta{ display:flex; align-items:center; gap:16px; margin-top:28px; flex-wrap:wrap; }
.band--b .band__meta{ justify-content:flex-end; }
.band__meta li{
  display:flex; align-items:center; gap:16px;
  font-size:12px; letter-spacing:.11em; text-transform:uppercase; color:var(--mute);
  white-space:nowrap;
}
.band__meta li + li::before{
  content:""; width:1px; height:12px; background:var(--hair-2); display:block;
}

/* a railway of everything on the desk: three tracks, opposing directions */
.rail{
  height:100%;
  display:flex; flex-direction:column; justify-content:center; gap:18px;
  padding-block:30px;
}
.rail__row{ overflow:hidden; }
.rail__track{ display:flex; width:max-content; }
.rail__set{
  display:flex; align-items:center; gap:34px;
  /* the trailing gap lives inside the set, so -50% lands on an identical frame */
  padding-right:34px;
}
.rail__row:nth-child(1) .rail__track{ animation:rail-fwd 44s linear infinite; }
.rail__row:nth-child(2) .rail__track{ animation:rail-rev 52s linear infinite; }
.rail__row:nth-child(3) .rail__track{ animation:rail-fwd 38s linear infinite; }
.rail:hover .rail__track{ animation-play-state:paused; }
@keyframes rail-fwd{ to{ transform:translateX(-50%); } }
@keyframes rail-rev{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }

.tok{
  display:inline-flex; align-items:center; gap:11px;
  font-size:clamp(15px,1.35vw,19px); font-weight:600;
  letter-spacing:-.012em; color:#F2F0EC; white-space:nowrap;
}
/* The mark on a chip: the real logo where we ship one, a monogram otherwise.
   `.tok i` below is the same disc for the pre-load fallback chips, and the two
   must stay identical or the rail changes shape when real data arrives. */
.tok .mark{
  flex:none;
  width:29px; height:29px; border-radius:50%;
  object-fit:cover;
  background:rgba(255,255,255,.06);
}
.tok .mark--text{
  display:grid; place-items:center;
  background:#fff; color:#0A0A0A;
  font-size:11px; font-weight:700; letter-spacing:0;
}
.tok i{
  display:grid; place-items:center; flex:none;
  width:29px; height:29px; border-radius:50%;
  background:#fff; color:#0A0A0A;
  font-style:normal; font-size:12.5px; font-weight:700; letter-spacing:0;
}
.tok b{
  margin-left:-3px;
  font-size:12.5px; font-weight:500;
  letter-spacing:0; font-variant-numeric:tabular-nums;
}

/* --- what joins them ----------------------------------------------------- */
.unify{
  display:flex; align-items:center; justify-content:center; gap:26px;
  min-height:74px; padding:20px 24px;
  border-top:1px solid var(--hair);
  flex-wrap:wrap;
}
.unify span{
  font-size:12.5px; letter-spacing:.13em; text-transform:uppercase; color:#C4C1BC;
  white-space:nowrap;
}
.unify i{ display:block; width:1px; height:13px; background:var(--hair-2); }

@media (max-width:820px){
  .sec__head{ padding:50px 20px 30px; }
  .band{ min-height:0; flex-direction:column; align-items:stretch; }
  .band__copy, .band--b .band__copy{ width:100%; padding:34px 20px 26px; text-align:left; }
  .band--b .band__meta{ justify-content:flex-start; }
  .band__viz,
  .band--a .band__viz,
  .band--b .band__viz{
    position:relative; inset:auto; left:auto; right:auto;
    height:190px; width:100%;
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 76%,transparent 100%);
            mask-image:linear-gradient(90deg,#000 0,#000 76%,transparent 100%);
  }
  .rail{ padding-block:16px; gap:14px; }
  .rail__set{ gap:24px; padding-right:24px; }
  .pred-rail{ gap:8px; padding-block:12px; }
  .pred-rail__set{ gap:8px; padding-right:8px; }
  .pred-card{ width:184px; min-height:78px; padding:8px; border-radius:10px; }
  .pred-card__top{ gap:6px; min-height:24px; }
  .pred-card__top b{ font-size:9.5px; }
  .pred-card__icon{ width:20px; height:20px; border-radius:5px; font-size:11px; }
  .pred-card__choice{ gap:4px; margin-top:3px; }
  .pred-card__choice span,.pred-card__choice strong{ font-size:8.5px; }
  .pred-card__choice em{ min-width:24px; padding:3px; font-size:7.5px; }
  .pred-card__foot{ margin-top:5px; padding-top:5px; font-size:7.5px; }
  .pred-card__gauge{ width:25px; height:25px; border-width:2px; }
  .pred-card__gauge strong{ font-size:7.5px; }
  .pred-card__gauge em{ margin-top:1px; font-size:6px; }
  .pred-card__binary-actions{ gap:4px; margin-top:5px; }
  .pred-card__binary-actions span{ padding:5px 4px; border-radius:4px; font-size:8.5px; }
  .unify{ gap:14px; }
  .unify i{ display:none; }
}

/* ==========================================================================
   MOBILE DRAWER
   ========================================================================== */
.drawer{
  position:fixed; inset:var(--nav-h) 0 0; z-index:15;
  padding:8px clamp(20px,6vw,40px) 40px;
  background:var(--bg);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .26s var(--ease), transform .3s var(--ease), visibility 0s linear .3s;
  overflow-y:auto;
}
.drawer.is-open{ opacity:1; visibility:visible; transform:none; transition-delay:0s,0s,0s; }
.drawer a{
  display:block; padding:20px 2px; font-size:19px;
  border-bottom:1px solid var(--hair);
}
.drawer-group{ border-bottom:1px solid var(--hair); }
.drawer-trigger{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  padding:20px 2px; border:0; background:none; color:var(--ink);
  font:inherit; font-size:19px; text-align:left; cursor:pointer;
}
.drawer-trigger svg{ width:14px; height:14px; transition:transform .3s var(--ease); }
.drawer-group.is-open .drawer-trigger{ color:var(--gold); }
.drawer-group.is-open .drawer-trigger svg{ transform:rotate(180deg); }
.drawer-submenu{ max-height:0; overflow:hidden; opacity:0; transition:max-height .4s var(--ease), opacity .25s var(--ease); }
.drawer-group.is-open .drawer-submenu{ max-height:280px; opacity:1; }
.drawer-submenu a{ padding:12px 2px 12px 20px; border:0; font-size:15px; color:var(--ink-2); }
.drawer-submenu a:hover{ color:var(--gold); }
.drawer .btn{ width:100%; margin-top:28px; height:52px; }
.drawer-auth{ display:none; }
.drawer-auth .btn{ margin-top:0; padding:0; border-bottom:0; font-size:15px; }

/* ==========================================================================
   ENTRANCE
   ========================================================================== */
[data-in]{ opacity:0; transform:translateY(14px); }
.ready [data-in]{
  opacity:1; transform:none;
  transition:opacity .8s var(--ease) var(--d,0ms), transform .9s var(--ease) var(--d,0ms);
}

/* One-shot scroll reveals for content that enters below the fold. */
.reveal-target{
  opacity:0; transform:translateY(24px);
  transition:opacity .8s var(--ease) var(--reveal-delay,0ms), transform .9s var(--ease) var(--reveal-delay,0ms);
}
.reveal-target.is-visible{ opacity:1; transform:none; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1040px){
  .links{ gap:30px; }
}

@media (max-width:820px){
  :root{ --nav-h:70px; }
  .nav__in{ padding-inline:20px; }
  .links{ display:none; }
  .nav-auth{ display:none; }
  .burger{ display:grid; }
  .nav .btn--light{ height:40px; padding-inline:18px; font-size:14.5px; }
  .drawer-auth{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:28px; }
  .drawer-auth .btn{ height:50px; }

  .frame{ border-inline:0; }
  .hero{ padding:64px 20px 76px; }
  .pill{ height:38px; padding-inline:16px; font-size:13px; gap:9px; white-space:normal; text-align:left; }
  .h1{ margin-top:26px; line-height:1.06; }
  .sub{ margin-top:22px; }
  .cta{ margin-top:32px; gap:12px; flex-direction:column; align-items:center; }
  .cta .btn{ width:100%; max-width:300px; height:52px; font-size:16px; }

  .slot{ padding:14px; }
  .shot img{ min-height:180px; border-radius:12px; }
}

/* ==========================================================================
   REDUCED MOTION
   Pehle ye block file mein do baar tha, alag alag values ke saath. Ab ek hi
   jagah, sab kuch shaamil.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-in]{ opacity:1; transform:none; }
  .reveal-target{ opacity:1; transform:none; }
}

/* ==========================================================================
   FINAL CTA
   A quiet closing panel that carries the same dark, editorial Nexora feel.
   The optional video sits behind a readable scrim and is safe to omit.
   ========================================================================== */
.cta-final{ padding:14px; }
.cta-final__panel{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:grid;
  place-items:center;
  min-height:clamp(360px,46vh,480px);
  padding:64px 32px;
  border:1px solid var(--hair-2);
  border-radius:22px;
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(211,176,124,.16) 0%, rgba(211,176,124,.04) 34%, transparent 70%),
    linear-gradient(180deg,#0D0C0B 0%,#050505 100%);
}
.cta-final__video{
  position:absolute;
  inset:0;
  z-index:-2;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.5;
}
.cta-final__scrim{
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(75% 90% at 50% 50%, rgba(5,5,5,.62) 0%, rgba(5,5,5,.86) 62%, #050505 100%);
}
.cta-final__in{ position:relative; max-width:660px; text-align:center; }
.cta-final__mark{
  display:grid;
  place-items:center;
  width:56px;
  height:56px;
  margin:0 auto;
  border:1px solid rgba(211,176,124,.32);
  border-radius:16px;
  background:rgba(211,176,124,.1);
  color:var(--gold);
  box-shadow:0 12px 30px rgba(0,0,0,.4);
}
.cta-final__mark svg{ width:26px; height:26px; }
.cta-final__title{
  margin-top:30px;
  font-family:var(--display);
  font-size:clamp(30px,4vw,56px);
  font-weight:400;
  line-height:1.06;
  letter-spacing:-.035em;
  background:linear-gradient(180deg,#FFFDFA 0%,#DCD7CF 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.cta-final__sub{
  max-width:520px;
  margin:22px auto 0;
  font-size:clamp(14.5px,1.2vw,16.5px);
  line-height:1.62;
  color:var(--ink-2);
}
.cta-final__btn{ margin-top:34px; height:52px; padding-inline:32px; font-size:16px; }

@media (max-width:820px){
  .cta-final{ padding:10px; }
  .cta-final__panel{ min-height:0; padding:48px 22px; border-radius:18px; }
  .cta-final__mark{ width:48px; height:48px; border-radius:14px; }
  .cta-final__mark svg{ width:22px; height:22px; }
  .cta-final__title{ margin-top:24px; }
  .cta-final__sub{ margin-top:18px; }
  .cta-final__btn{ width:100%; max-width:300px; margin-top:28px; }
}

/* Use the same plain Nexora mark as the navigation logo. */
.cta-final__mark{ display:grid; place-items:center; width:24px; height:24px; margin-inline:auto;
  border:0; border-radius:0; background:transparent; color:var(--ink); box-shadow:none; line-height:0; }
.cta-final__mark::before{ display:none; }
.cta-final__mark svg{ display:block; width:24px; height:24px; flex:none; }

@media (prefers-reduced-motion:reduce){
  .cta-final__video{ display:none; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{
  position:relative;
  overflow:hidden;
  border-top:1px solid var(--hair);
  background:
    radial-gradient(80% 100% at 50% 100%, rgba(211,176,124,.07) 0%, transparent 62%),
    var(--bg);
}
.foot__in{ max-width:var(--col); margin-inline:auto; padding:64px 28px 0; }
.foot__grid{
  display:grid;
  /* Brand, then three columns. It was four: the fourth was "Community", six social links
     that all pointed at `#`. A heading over six destinations we do not have is worse than
     no heading, so the column went with them. */
  grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:40px 32px;
}
.foot__brand p{
  margin-top:18px;
  max-width:34ch;
  font-size:14px;
  line-height:1.62;
  color:var(--ink-2);
}
.foot__col h4{
  font-family:var(--display);
  font-size:16px;
  font-weight:600;
  letter-spacing:-.016em;
  line-height:1.2;
  color:var(--ink);
}
.foot__col ul{ margin-top:20px; display:grid; gap:12px; }
.foot__col a{
  display:inline-block;
  font-size:14.5px;
  color:#C6C2BB;
  transition:color .25s var(--ease), transform .25s var(--ease);
}
.foot__col a:hover{ color:var(--ink); transform:translateX(2px); }
.foot__risk{
  display:grid;
  gap:14px;
  max-width:96ch;
  margin-top:52px;
  padding-top:28px;
  border-top:1px solid var(--hair);
  font-size:12px;
  line-height:1.75;
  color:#8A8680;
}
.foot__risk b{ color:#ADA8A1; font-weight:500; }
.foot__end{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  margin-top:28px;
  padding:20px 0 34px;
  border-top:1px solid var(--hair);
  font-size:12.5px;
  color:#8A8680;
}
.foot__social{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px; }
.foot__social li{ display:flex; align-items:center; gap:20px; }
.foot__social li + li::before{ content:""; width:1px; height:11px; background:var(--hair-2); }
.foot__social a{ transition:color .25s var(--ease); }
.foot__social a:hover{ color:var(--gold); }
.foot__mark{
  overflow:hidden;
  max-width:var(--col);
  margin-inline:auto;
  padding-inline:28px;
  pointer-events:none;
  user-select:none;
}
.foot__mark b{
  display:block;
  margin-bottom:-.19em;
  font-family:var(--display);
  font-size:clamp(58px,15.6vw,232px);
  font-weight:600;
  line-height:.82;
  letter-spacing:-.045em;
  text-align:center;
  white-space:nowrap;
  background:linear-gradient(180deg, rgba(211,176,124,.46) 0%, rgba(211,176,124,.16) 52%, rgba(211,176,124,.02) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
@media (max-width:1040px){
  .foot__grid{ grid-template-columns:minmax(0,1fr) repeat(2,minmax(0,1fr)); }
  .foot__brand{ grid-column:1 / -1; }
}
@media (max-width:820px){
  .foot__in{ padding:48px 20px 0; }
  .foot__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px 24px; }
  .foot__risk{ margin-top:40px; }
  .foot__end{ padding-bottom:26px; }
  .foot__mark{ padding-inline:14px; }
}
@media (max-width:520px){
  .foot__grid{ grid-template-columns:minmax(0,1fr); }
  .foot__end{ flex-direction:column; align-items:flex-start; gap:16px; }
}

/* Footer variant: compact brand-led layout with four clear link columns. */
.foot{ position:static; overflow:visible; border-top:1px solid var(--hair); background:var(--bg); }
.foot__in{ max-width:var(--col); margin-inline:auto; padding:56px 28px 0; }
.foot__grid{ display:grid; grid-template-columns:minmax(0,1.35fr) repeat(4,minmax(0,1fr)); gap:44px 32px; }
.foot__brand p{ margin-top:20px; max-width:30ch; font-size:14px; line-height:1.62; color:var(--ink-2); }
.foot__brand small{ display:block; margin-top:12px; font-size:14px; color:#7E7A75; }
.foot__col h4{ font-family:var(--display); font-size:15px; font-weight:600; letter-spacing:-.014em; color:var(--ink); }
.foot__col ul{ margin-top:22px; display:grid; gap:14px; }
.foot__col a{ display:inline-flex; align-items:center; gap:6px; font-size:14.5px; color:#A5A19B; transition:color .25s var(--ease); }
.foot__col a:hover{ color:var(--ink); }
.foot__col a.is-ext::after{ content:"↗"; font-size:12px; color:#6F6B66; transition:color .25s var(--ease), transform .25s var(--ease); }
.foot__col a.is-ext:hover::after{ color:var(--gold); transform:translate(1px,-1px); }
.foot__warn{ margin-top:44px; padding:24px 0 28px; border-top:1px solid var(--hair); display:grid; gap:14px; font-size:12px; line-height:1.75; color:#8A8680; }
.foot__warn b{ color:#ADA8A1; font-weight:500; }
@media (max-width:1040px){
  .foot__grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:40px 24px; }
  .foot__brand{ grid-column:1 / -1; }
  .foot__brand p{ max-width:46ch; }
}
@media (max-width:760px){
  .foot__in{ padding:44px 20px 0; }
  .foot__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px 24px; }
  .foot__warn{ margin-top:32px; padding-bottom:24px; }
}
@media (max-width:460px){ .foot__grid{ grid-template-columns:minmax(0,1fr); } }