/* ============================================================================
   FinSim — landing page styles. Fully standalone (no project code/imports).
   Visual language is the in-game GRAPHITE TERMINAL: flat near-black graphite,
   cyan accent, green commit-action, and "volume" controls — gradient cap +
   inset top-light edge + chunky inset bottom bevel + neutral drop shadow +
   real travel on :active. NO glows, NO grids, NO radial mesh, NO animation.
   NO letter-spacing anywhere. Saira Condensed (synthesized italic) for display
   only; body text is a plain system sans.
   ============================================================================ */

/* ---- Display font: Saira Condensed (latin), self-hosted, no italic master ---- */
@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:700;font-display:swap;
  src:url('assets/fonts/saira-700-normal-latin.woff2') format('woff2');}
@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:800;font-display:swap;
  src:url('assets/fonts/saira-800-normal-latin.woff2') format('woff2');}
@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:900;font-display:swap;
  src:url('assets/fonts/saira-900-normal-latin.woff2') format('woff2');}

/* -------------------------------------------------------------------------- */
:root{
  --bg-0:#08080a;          /* page */
  --bg-1:#141418;          /* panel */
  --bg-2:#1c1c22;          /* raised panel */
  --cyan:#5DE3F2;
  --cyan-2:#3ac7d6;
  --green:#22c55e;
  --green-top:#33dd72;
  --green-bot:#19a851;
  --ink-1:#f3f6fb;         /* primary text */
  --ink-2:#aab0bd;         /* secondary text */
  --ink-3:#717784;         /* muted text */
  --hairline:rgba(255,255,255,0.08);
  --hairline-2:rgba(255,255,255,0.14);
  --r-md:14px;
  --r-lg:18px;
  --display:'Saira Condensed','Arial Narrow',sans-serif;
  --body:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:var(--body);
  background:var(--bg-0);
  color:var(--ink-1);
  letter-spacing:normal;                 /* hard rule: no tracking, anywhere */
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
  overflow-x:hidden;
}

/* no focus boxes on clickable elements */
a:focus,a:focus-visible,button:focus,button:focus-visible{outline:none;}

.wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 24px;}

/* ============================ header (static, no background) ============================ */
.site-header{position:static;background:transparent;border-bottom:none;}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:96px;}
.brand{display:flex;align-items:center;text-decoration:none;}
.brand img{height:32px;width:auto;display:block;}

/* small control button — the terminal's volume recipe */
.header-steam{display:inline-flex;align-items:center;gap:8px;
  font-family:var(--display);font-style:italic;font-weight:800;font-size:14px;text-transform:uppercase;
  color:var(--ink-1);text-decoration:none;padding:10px 16px;border-radius:12px;border:none;
  background:linear-gradient(180deg,#26282f 0%,#1a1c21 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 0 0 1px rgba(255,255,255,0.06),
    inset 0 -3px 0 rgba(0,0,0,0.45),
    0 2px 4px rgba(0,0,0,0.4);
  transition:color .14s ease,transform .08s ease,box-shadow .12s ease;}
.header-steam:hover{filter:brightness(1.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.14),inset 0 0 0 1px rgba(255,255,255,0.10),inset 0 -3px 0 rgba(0,0,0,0.45),0 3px 6px rgba(0,0,0,0.45);}
.header-steam:active{transform:translateY(2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06),inset 0 -1px 0 rgba(0,0,0,0.45);}
.header-steam svg{width:16px;height:16px;}

/* ============================ hero ============================ */
.hero{padding:72px 0 56px;text-align:center;}

.hero h1{font-family:var(--display);font-style:italic;font-weight:900;
  font-size:clamp(38px,7.2vw,82px);line-height:0.96;text-transform:uppercase;text-wrap:balance;
  color:var(--ink-1);margin-bottom:20px;}
.hero h1 .cy{color:var(--cyan);}

/* platform badges (Windows / macOS) — subtle, as is customary */
.platforms{display:flex;align-items:center;justify-content:center;gap:24px;margin:0 0 32px;}
.plat{display:inline-flex;align-items:center;gap:8px;color:var(--ink-3);
  font-family:var(--body);font-size:14px;font-weight:600;}
.plat svg{width:17px;height:17px;flex-shrink:0;}
.hero p.lead{font-family:var(--body);font-weight:400;
  font-size:clamp(16px,2.1vw,19px);color:var(--ink-2);text-wrap:balance;
  max-width:600px;margin:0 auto 34px;}

/* green "Add to Waitlist" — terminal commit button, clean volume (no halo) */
.btn-waitlist{display:inline-flex;align-items:center;justify-content:center;gap:11px;
  font-family:var(--display);font-style:italic;font-weight:900;font-size:21px;text-transform:uppercase;
  color:#04160d;text-decoration:none;cursor:pointer;border:none;
  padding:17px 34px;border-radius:var(--r-md);
  background:linear-gradient(180deg,var(--green-top) 0%,var(--green) 56%,var(--green-bot) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.50),
    inset 0 0 0 1px rgba(0,0,0,0.12),
    inset 0 -3px 0 rgba(0,0,0,0.28),
    0 6px 16px rgba(0,0,0,0.45);
  transition:filter .12s ease,transform .08s ease,box-shadow .12s ease;}
.btn-waitlist:hover{filter:brightness(1.05);transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.50),inset 0 0 0 1px rgba(0,0,0,0.12),inset 0 -3px 0 rgba(0,0,0,0.28),0 9px 22px rgba(0,0,0,0.5);}
.btn-waitlist:active{transform:translateY(2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.35),inset 0 0 0 1px rgba(0,0,0,0.14),inset 0 -1px 0 rgba(0,0,0,0.3),0 3px 8px rgba(0,0,0,0.4);}
.btn-waitlist svg{width:24px;height:24px;flex-shrink:0;}
.waitlist-row{margin-bottom:40px;}
.waitlist-note{display:block;margin-top:12px;font-size:13px;color:var(--ink-3);}

/* ============================ video ============================ */
.video-stage{margin:0 auto;max-width:920px;}
.video-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(168deg,#16161b 0%,#101013 60%,#0c0c0f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    inset 0 0 0 1px rgba(255,255,255,0.05),
    inset 0 -4px 0 rgba(0,0,0,0.4),
    0 30px 80px rgba(0,0,0,0.6);}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
/* placeholder shown until the real <iframe> is dropped in */
.video-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;}
.play-orb{width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#6ee9f6 0%,var(--cyan) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.5),inset 0 -3px 0 rgba(0,0,0,0.22),0 6px 16px rgba(0,0,0,0.5);}
.play-orb svg{width:34px;height:34px;margin-left:5px;color:#06262b;}
.video-placeholder .cap{font-family:var(--display);font-style:italic;font-weight:800;font-size:16px;
  text-transform:uppercase;color:var(--ink-2);}

/* ============================ about copy (under the video) ============================ */
/* A normal, left-aligned reading block — not centered. */
.about{max-width:720px;margin:48px auto 0;text-align:left;}
.about p{font-family:var(--body);font-size:clamp(17px,2vw,20px);line-height:1.65;
  color:var(--ink-2);font-weight:600;margin-bottom:18px;}
.about p:last-child{margin-bottom:0;}
.about p.about-cta{font-family:var(--display);font-style:italic;font-weight:800;text-transform:uppercase;
  font-size:clamp(17px,1.9vw,21px);line-height:1.3;color:var(--ink-1);margin-top:26px;}
.about p.about-sign{font-family:var(--display);font-style:italic;font-weight:900;text-transform:uppercase;
  font-size:clamp(30px,3.8vw,44px);line-height:1;color:var(--ink-1);margin-top:10px;}
.about p.about-sign .cy{color:var(--cyan);}

/* ============================ footer / socials ============================ */
.site-footer{margin-top:96px;border-top:1px solid var(--hairline);padding:48px 0 40px;text-align:center;}
.footer-kicker{font-family:var(--display);font-style:italic;font-weight:700;font-size:14px;text-transform:uppercase;
  color:var(--ink-2);margin-bottom:22px;}
.socials{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;margin-bottom:34px;}
.social{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:14px;
  color:var(--ink-1);text-decoration:none;
  background:linear-gradient(180deg,#26282f 0%,#1a1c21 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 0 0 1px rgba(255,255,255,0.06),
    inset 0 -3px 0 rgba(0,0,0,0.45),
    0 1px 2px rgba(0,0,0,0.35);
  transition:filter .14s ease,transform .08s ease,box-shadow .12s ease;}
.social svg{width:25px;height:25px;}
/* hover stays in the button's own graphite colour — just brighter, never blue */
.social:hover{filter:brightness(1.16);transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 0 0 1px rgba(255,255,255,0.10),
    inset 0 -3px 0 rgba(0,0,0,0.45),
    0 3px 6px rgba(0,0,0,0.45);}
.social:active{transform:translateY(2px);filter:brightness(1.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06),inset 0 0 0 1px rgba(255,255,255,0.06),inset 0 -1px 0 rgba(0,0,0,0.45);}
.contact{margin:2px 0 20px;display:flex;flex-direction:column;gap:6px;}
.contact p{font-family:var(--body);font-size:14px;color:var(--ink-3);}
.contact a{color:var(--ink-2);text-decoration:none;}
.contact a:hover{color:var(--cyan);}
.footer-legal{font-size:13px;color:var(--ink-3);}
.footer-legal a{color:var(--ink-2);text-decoration:none;}
.footer-legal a:hover{color:var(--cyan);}

/* ============================ responsive ============================ */
@media (max-width:760px){
  .site-header .wrap{height:60px;}
  .brand img{height:24px;}
  .header-steam{padding:8px 13px;font-size:12px;gap:6px;border-radius:10px;}
  .header-steam svg{width:14px;height:14px;}
  .hero{padding:40px 0 32px;}
}
@media (max-width:360px){
  .header-steam{padding:8px;}            /* icon-only on very small screens */
  .header-steam span{display:none;}
}
@media (max-width:480px){
  .btn-waitlist{font-size:18px;padding:15px 26px;width:100%;}
  .socials{gap:8px;}
  .social{width:42px;height:42px;border-radius:12px;}
  .social svg{width:21px;height:21px;}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;}}