/* ============================================================
   FINNACLE — MARKETING SITE (shared across all pages)
   Live pixel trading floor. Deep navy night-city base,
   emerald-green + gold accents. Hard, saturated, arcade.
   Used by: landing.html (Home) and about.html. game.html and
   multiplayer.html were deleted on 2026-08-10 with the
   single-player product they described.
   Fonts are self-hosted from landing-assets/.
   ============================================================ */

/* ── WEBFONTS (self-hosted) ──────────────────────────────── */
/* Be Vietnam Pro */
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url("../landing-assets/aba49598-4ace-4439-8279-d8769eb58dd6.woff2") format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url("../landing-assets/cd962955-fb5e-4bcd-8095-a22ae9fa1d14.woff2") format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url("../landing-assets/39102fd3-ecf3-431f-bee0-bc3ee737be6a.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url("../landing-assets/279aeb82-96c8-4b30-ac30-3d9b0c814c65.woff2") format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url("../landing-assets/70e504a4-151d-49c8-ac24-2f4386f756e6.woff2") format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url("../landing-assets/c104dc55-bf7b-41bb-89d0-d8f99f77eeef.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* Press Start 2P */
@font-face{font-family:'Press Start 2P';font-style:normal;font-weight:400;font-display:swap;src:url("../landing-assets/bd6930b0-f5c6-4001-af43-9ca0db3589a8.woff2") format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Press Start 2P';font-style:normal;font-weight:400;font-display:swap;src:url("../landing-assets/c3d92126-03dd-467b-8f3f-29c75eb52224.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* VT323 */
@font-face{font-family:'VT323';font-style:normal;font-weight:400;font-display:swap;src:url("../landing-assets/aceccfd5-4c02-4261-86ab-969ba716715b.woff2") format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}
@font-face{font-family:'VT323';font-style:normal;font-weight:400;font-display:swap;src:url("../landing-assets/fc6f26d9-7731-464a-a8d0-ee117d71bd98.woff2") format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'VT323';font-style:normal;font-weight:400;font-display:swap;src:url("../landing-assets/514508b9-0573-495d-9cff-c695a6adcd56.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ── COLOR + EFFECT TOKENS ───────────────────────────────── */
:root{
  --fin-dark:#0f0f1a; --fin-panel:#1a1a2e; --fin-card:#16213e; --fin-void:#0a0a18; --fin-city:#0a0e1a;
  --fin-border:#4a4a8a; --fin-text:#c8c8f0; --fin-white:#fff; --fin-muted:#6868a8;
  --fin-accent:#00ff88; --fin-accent-2:#ffd700; --fin-accent-dk:#00cc66; --fin-gold-dk:#b8860b;
  --fin-red:#ff3030; --fin-blue:#4488ff;
  --fin-grn-top:#2E7D32; --fin-grn-bot:#1B5E20; --fin-grn-edge:#4CAF50; --fin-grn-shadow:#0a2a0a;
  --fin-glow-campus:#4CA8FF; --fin-glow-gym:#FF5252; --fin-glow-bank:#00E676;
  --fin-glow-job:#CE93D8; --fin-glow-stock:#00BFA5; --fin-glow-realty:#FFB74D;
  --fin-type-event:#CE93D8; --fin-type-opportunity:#4488ff; --fin-type-crisis:#ff3030;
  --fin-scanlines:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.12) 3px,rgba(0,0,0,.12) 4px);
}

/* ── KEYFRAMES (pixel motion vocabulary) ─────────────────── */
@keyframes fin-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes fin-blink{50%{opacity:0}}
@keyframes fin-scroll-x{to{transform:translateX(-50%)}}
@keyframes fin-spin-coin{0%{transform:rotateY(0)}100%{transform:rotateY(360deg)}}
@keyframes fin-flash{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes fin-pop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes fin-flip-in{from{transform:rotateX(90deg);opacity:0}to{transform:rotateX(0);opacity:1}}
@keyframes fin-bannerpulse{0%,100%{opacity:1}50%{opacity:.45}}

/* ── BASE ────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--fin-dark);color:var(--fin-text);
  font-family:'VT323',monospace;font-size:20px;line-height:1.5;
  overflow-x:hidden;-webkit-text-size-adjust:100%;
}
body::after{content:'';position:fixed;inset:0;z-index:9000;pointer-events:none;background:var(--fin-scanlines);opacity:.5}
::selection{background:var(--fin-accent);color:#000}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--fin-void)}
::-webkit-scrollbar-thumb{background:var(--fin-border);border:2px solid var(--fin-void)}
a{color:inherit}
img{max-width:100%}
.px{font-family:'Press Start 2P'}

/* ── NAV ─────────────────────────────────────────────────── */
#fin-nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(15,15,26,.82);backdrop-filter:blur(4px);border-bottom:3px solid var(--fin-border);transition:border-bottom-color .2s}
.navin{position:relative;max-width:1180px;margin:0 auto;padding:12px 28px;display:flex;align-items:center;gap:16px}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.nav-logo img{width:30px;height:30px;image-rendering:pixelated}
.nav-logo .wm{font-family:'Press Start 2P';font-size:15px;color:var(--fin-accent-2);text-shadow:2px 2px 0 #000}
.navlinks{margin-left:auto;display:flex;gap:26px;align-items:center}
.navlink{font-family:'Press Start 2P';font-size:8px;color:var(--fin-muted);text-decoration:none;letter-spacing:.5px;transition:color .12s}
.navlink:hover,.navlink.active{color:var(--fin-accent)}
.navcta{font-family:'Press Start 2P';font-size:8px;padding:9px 14px;background:var(--fin-accent);color:#000;border:2px solid var(--fin-accent-dk);box-shadow:3px 3px 0 #000;text-decoration:none;transition:filter .12s}
.navcta:hover{filter:brightness(1.1)}
.menutoggle{display:none;margin-left:auto;align-items:center;font-family:'Press Start 2P';font-size:10px;color:var(--fin-accent);background:transparent;border:2px solid var(--fin-border);padding:9px 12px;cursor:pointer;box-shadow:3px 3px 0 #000}
.menutoggle:hover{border-color:var(--fin-accent)}

/* ── BUTTONS ─────────────────────────────────────────────── */
.fin-btn{display:inline-flex;align-items:center;gap:10px;font-family:'Press Start 2P';font-size:11px;line-height:1.4;padding:16px 24px;text-decoration:none;cursor:pointer;border:4px solid var(--fin-border);box-shadow:4px 4px 0 #000;color:var(--fin-text);background:transparent;transition:filter .12s steps(2),transform .07s,box-shadow .07s,border-color .12s,color .12s}
.fin-btn:active{transform:translate(4px,4px);box-shadow:0 0 0 #000}
.fin-btn--green{background:linear-gradient(180deg,#2E7D32,#1B5E20);border-color:#4CAF50;color:#fff;box-shadow:4px 4px 0 #0a2a0a;text-shadow:2px 2px 0 #000}
.fin-btn--green:hover{filter:brightness(1.18)}
.fin-btn--green:active{box-shadow:0 0 0 #0a2a0a}
.fin-btn--ghost:hover{border-color:var(--fin-accent);color:#fff}
.fin-btn--gold{background:var(--fin-accent-2);border-color:var(--fin-gold-dk);color:#000;font-size:10px;padding:14px 22px}
.fin-btn--gold:hover{filter:brightness(1.1)}
.fin-btn--red{background:#3a0e0e;border-color:var(--fin-red);color:#fff}
.fin-btn--red:hover{filter:brightness(1.2)}
.fin-btn[disabled]{opacity:.45;pointer-events:none}

/* ── REVEAL ──────────────────────────────────────────────── */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .5s steps(6),transform .5s cubic-bezier(.22,.8,.4,1)}
[data-reveal].in{opacity:1;transform:none}

/* ── LAYOUT HELPERS ──────────────────────────────────────── */
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 28px}
.section{position:relative;padding:92px 0}
.eyebrow{font-family:'Press Start 2P';font-size:9px;color:var(--fin-accent);letter-spacing:2px;margin-bottom:16px}
.h2{font-family:'Press Start 2P';font-size:clamp(18px,3.4vw,30px);color:#fff;text-shadow:3px 3px 0 #000;line-height:1.4}
.hero-pad{position:relative;overflow:hidden}

/* ── CARD HOVER PATTERNS ─────────────────────────────────── */
.liftcard{transition:transform .15s steps(2),border-color .12s,box-shadow .12s}
.liftcard:hover{transform:translateY(-5px)}
.hovercard{text-decoration:none;display:block;transition:border-color .12s,transform .12s,box-shadow .12s}
.hovercard:hover{border-color:var(--fin-accent);transform:translate(-2px,-2px);box-shadow:6px 6px 0 #000}

/* ── FOOTER ──────────────────────────────────────────────── */
footer{background:var(--fin-void);border-top:3px solid var(--fin-border);padding:50px 0 30px}
.foot-cols{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between}
.foot-h5{font-family:'Press Start 2P';font-size:8px;color:var(--fin-muted);letter-spacing:1px;margin-bottom:16px}
.flink{display:block;font-size:18px;color:var(--fin-text);text-decoration:none;margin-bottom:9px;transition:color .12s}
.flink:hover{color:var(--fin-accent)}
.foot-bottom{margin-top:40px;padding-top:22px;border-top:2px solid var(--fin-border);display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;font-family:'Press Start 2P';font-size:7px;color:var(--fin-muted);line-height:2}

/* ── TICKER (home) ───────────────────────────────────────── */
.ticker{position:relative;z-index:5;background:var(--fin-void);border-top:3px solid var(--fin-border);border-bottom:3px solid var(--fin-border);overflow:hidden;padding:11px 0}
.ticker-track{display:inline-flex;gap:46px;white-space:nowrap;animation:fin-scroll-x 34s linear infinite;font-family:'Press Start 2P';font-size:11px;will-change:transform}
.tk{display:inline-flex;gap:10px}

/* ── HERO FLOOR DIORAMA (home) ───────────────────────────
   The poster and the canvas occupy the same band at the base of the
   hero. The poster paints instantly; js/site-floor.js crossfades the
   canvas over it once the sprite subset has decoded and drawn a
   frame, so a failed load or no JS at all simply leaves the still. */
.floor-band{position:absolute;left:0;right:0;bottom:0;z-index:1;pointer-events:none;height:var(--band,clamp(220px,36vw,400px));
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 42%,#000 100%);mask-image:linear-gradient(180deg,transparent 0,#000 42%,#000 100%)}
.floor-band>*{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated}
.floor-poster{object-fit:cover;object-position:50% 100%;opacity:.9;transition:opacity .5s ease}
.floor-poster.is-done{opacity:0}
#fin-floor-canvas{opacity:0;transition:opacity .5s ease}
#fin-floor-canvas.is-live{opacity:1}
@media (prefers-reduced-motion:reduce){.floor-poster,#fin-floor-canvas{transition:none}}
#fin-grid{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.35;background-image:linear-gradient(rgba(74,74,138,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(74,74,138,.18) 1px,transparent 1px);background-size:40px 40px;-webkit-mask-image:radial-gradient(circle at 50% 40%,#000 30%,transparent 75%);mask-image:radial-gradient(circle at 50% 40%,#000 30%,transparent 75%)}

/* ── SPRITE ICONS ────────────────────────────────────────
   The game's own art used as iconography, so nothing on this page is
   clip-art. The character sheets are horizontal strips, cropped here with
   the percentage trick: background-size:<frames*100>% 100% scales the strip
   so exactly one frame fills the box, then background-position-x of
   n/(frames-1)*100% selects frame n — resolution-independent, so no new
   cropped PNGs are shipped and the icons stay crisp at any size.
   Frame counts come from assets/trading-floor-v2/game/manifest.json:
   talk_* and walk are 6 frames, walk_* are 8. */
.spr{display:block;flex:none;background-repeat:no-repeat;image-rendering:pixelated}
/* Box sizes differ per sheet on purpose: walk.png carries far more transparent
   padding inside its 224x224 frame than the talk_* sheets do inside their
   168x168, so equal boxes would render visibly unequal characters. These are
   tuned so the FIGURES match, not the boxes. */
.spr--walk{width:104px;height:104px;background-image:url(../assets/trading-floor-v2/game/walk.png);background-size:600% 100%;background-position:20% 0}
.spr--settle{width:78px;height:78px;background-image:url(../assets/trading-floor-v2/game/talk_bonds.png);background-size:600% 100%;background-position:0 0}
.spr--joker{width:84px;height:84px;background-image:url(../assets/trading-floor-v2/game/talk_rumour.png);background-size:600% 100%;background-position:40% 0}
.spr--broker{width:84px;height:84px;background-image:url(../assets/trading-floor-v2/game/talk_stocks.png);background-size:600% 100%;background-position:60% 0}
.spr--vc{width:84px;height:84px;background-image:url(../assets/trading-floor-v2/game/talk_vc.png);background-size:600% 100%;background-position:60% 0}
/* Two archetypes from different markets, so "players are the market" is
   shown as a crowd rather than stated. 119x270 frames -> 34x77 at this size. */
.spr--trader-a{width:34px;height:77px;background-image:url(../assets/trading-floor-v2/game/walk_crypto.png);background-size:800% 100%;background-position:28.571% 0}
.spr--trader-b{width:34px;height:77px;background-image:url(../assets/trading-floor-v2/game/walk_realestate.png);background-size:800% 100%;background-position:71.428% 0}
.spr-pair{display:flex;align-items:flex-end;gap:2px}
/* The one non-sheet crop: the price board painted into the stocks facade.
   background-size is the whole 384x286 facade scaled by 148/243, and the offset
   lifts the board's native rect (81,68 243x112) to the box origin. The height
   stops at native y=180 deliberately — below that the facade's broker and his
   caption plate creep into frame and the icon stops reading as a board. */
.spr--board{width:148px;height:68px;background-image:url(../assets/trading-floor-v2/game/stocks.png);background-size:234px 174px;background-position:-49px -41px}

/* ── DEV TIMELINE CHART (about) ──────────────────────────
   Milestones are numbered dots on the line with their captions in a grid
   BELOW it, rather than free-floating labels over the SVG. Three of the six
   milestones fall in the last third of the span (66%, 87%, 92%), so anchored
   captions collide at every viewport width — a grid cannot. */
.tl-chart{margin-top:38px;background:rgba(4,8,20,.5);border:3px solid var(--fin-border);padding:14px 10px}
.tl-chart svg{display:block;width:100%;height:auto}
.tl-grid line{stroke:var(--fin-border);stroke-width:1.5;opacity:.55}
.tl-axis text{font-family:'Press Start 2P';font-size:9px;fill:var(--fin-muted)}
.tl-line{stroke:var(--fin-accent);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.tl-now{font-family:'Press Start 2P';font-size:11px;fill:var(--fin-accent-2)}
.tl-dots circle{fill:var(--fin-void);stroke:var(--fin-accent-2);stroke-width:2.5;transition:fill .18s,r .18s}
.tl-dots text{font-family:'Press Start 2P';font-size:11px;fill:var(--fin-accent-2);text-anchor:middle;pointer-events:none}
.tl-dots g.is-on circle{fill:var(--fin-accent-2)}
.tl-dots g.is-on text{fill:#06070f}
.tl-rider{fill:var(--fin-accent);stroke:#06070f;stroke-width:2}

.tl-caps{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:tl}
.tl-cap{counter-increment:tl;position:relative;background:var(--fin-card);border:3px solid var(--fin-border);padding:20px 18px 18px 46px;transition:border-color .18s,transform .18s}
.tl-cap::before{content:counter(tl);position:absolute;left:14px;top:18px;font-family:'Press Start 2P';font-size:12px;color:var(--fin-muted);transition:color .18s}
.tl-cap.is-on{border-color:var(--fin-accent-2);transform:translateY(-3px)}
.tl-cap.is-on::before{color:var(--fin-accent-2)}
.tl-date{display:block;font-family:'Press Start 2P';font-size:8px;color:var(--fin-accent);letter-spacing:1px;margin-bottom:10px}
.tl-title{display:block;font-family:'Press Start 2P';font-size:11px;color:#fff;line-height:1.5;margin-bottom:10px}
.tl-sub{display:block;font-size:17px;color:var(--fin-text);line-height:1.6}
.tl-sub code{font-family:ui-monospace,monospace;font-size:15px;color:var(--fin-accent-2)}
/* Build shots are optional; the grid is complete without them. */
.tl-shot{display:block;width:100%;margin-bottom:14px;border:2px solid var(--fin-border);image-rendering:pixelated}
@media (max-width:900px){.tl-caps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.tl-caps{grid-template-columns:1fr}.tl-chart{padding:10px 6px}}

/* ── RESPONSIVE GRID HELPERS ─────────────────────────────── */
@media (max-width:860px){
  .r6{grid-template-columns:repeat(3,1fr)!important}
  .r5{grid-template-columns:repeat(2,1fr)!important}
  .r4{grid-template-columns:repeat(2,1fr)!important}
  .r3{grid-template-columns:1fr!important}
  .r2{grid-template-columns:1fr!important}
}
@media (max-width:820px){
  .navin{padding:10px 16px}
  .menutoggle{display:inline-flex}
  .navlinks{display:none;position:absolute;top:100%;left:0;right:0;margin:0;flex-direction:column;align-items:stretch;background:rgba(8,8,20,.98);border-bottom:3px solid var(--fin-border);padding:14px 20px;gap:14px}
  .navlinks.open{display:flex}
  .navlinks .navlink{font-size:11px;padding:6px 2px}
  .navlinks .navcta{text-align:center;padding:12px;font-size:10px}
  .section{padding:60px 0}
  .wrap,.wrap-narrow{padding:0 18px}
}
@media (max-width:520px){
  body{font-size:18px}
  .r6{grid-template-columns:repeat(2,1fr)!important}
  .fin-btn{font-size:10px;padding:14px 16px;gap:8px}
}

@media (prefers-reduced-motion:reduce){
  *,*::after,*::before{animation:none!important}
  html{scroll-behavior:auto}
  .ticker-track{animation:none}
}