/*
 * OSKO landing page.
 *
 * The design language: near-black and white with a single orange accent, very
 * large editorial display type, warm cream cards with gradient headings, 28px
 * radii, and a scroll that stages text rather than just moving it.
 *
 * The app (globals.css) reads from the same palette so the two halves of the
 * product feel like one thing.
 */

:root {
  --white: #fff;
  --cream: #ffefe6;
  --dark: #101010;
  --dark-soft: #1b1b1b;
  --orange: #df4418;
  --orange-bright: #ff9000;
  --orange-deep: #cf1e00;
  --muted: #6f6f6f;
  --muted-dark: #9a9a9a;
  --line: rgba(16, 16, 16, 0.12);
  --line-dark: rgba(255, 255, 255, 0.14);
  --yes: #1f9d63;
  --no: #cf1e00;
  --transition: 0.4s;
  --page-x: 40px;
}

* {
  box-sizing: border-box;
}

html {
  width: 100%;
  /* `clip`, not `hidden`. `overflow-x: hidden` makes this a scroll container,
     which silently breaks `position: sticky` for every descendant — the staged
     section then scrolls past as empty space instead of pinning. `clip` cuts
     the overflow without creating that container. */
  overflow-x: clip;
  background: var(--white);
  transition: background var(--transition);
  scroll-behavior: smooth;
}

html.dark {
  background: var(--dark);
}

body {
  margin: 0;
  width: 100%;
  overflow-x: clip;
  background: transparent;
  color: var(--dark);
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: color var(--transition);
}

html.dark body {
  color: var(--white);
}

::selection {
  color: #fff;
  background: #e75800;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 500;
  line-height: 100%;
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(44px, 9vw, 102px);
}

h3 {
  font-size: 28px;
  line-height: 34px;
}

h4 {
  font-size: clamp(26px, 4vw, 36px);
  line-height: 1.1;
}

p {
  margin: 0;
  line-height: 1.6;
}

a {
  color: inherit;
  text-decoration: none;
}

.eyebrow {
  display: block;
  font-size: 14px;
  line-height: 14px;
  letter-spacing: 2px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 24px;
}

/* ---------------------------------------------------------------- header */

header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px var(--page-x);
  color: #fff;
  transition: color var(--transition);
}

/* The page alternates dark and light sections under a fixed header. A
   `mix-blend-mode: difference` header inverts against the backdrop, which
   reads fine for white text but turns the orange mark blue over the light
   sections — and a child cannot opt out, because the blend applies to the
   whole layer. So osko.js samples what is behind the header instead and sets
   this class, leaving the logo its real colour everywhere. */
header.on-light {
  color: var(--dark);
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.wordmark img {
  display: block;
}

nav {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 14px;
  letter-spacing: 0.04em;
}

nav a {
  opacity: 0.75;
  transition: opacity 0.2s;
}

nav a:hover {
  opacity: 1;
}

.nav-cta {
  mix-blend-mode: normal;
  padding: 10px 22px;
  border: 1px solid currentColor;
  border-radius: 999px;
  opacity: 1;
}

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

.hero {
  position: relative;
  background: var(--dark);
  color: #fff;
  border-radius: 0 0 40px 40px;
  overflow: hidden;
}

.hero-inner {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 140px var(--page-x) 80px;
  max-width: 1400px;
  margin: 0 auto;
}

.hero h1 {
  font-size: clamp(48px, 11vw, 132px);
  max-width: 14ch;
}

.hero h1 .line {
  display: block;
  overflow: hidden;
}

.hero h1 .line > span {
  display: block;
}

.hero-lede {
  margin-top: 40px;
  max-width: 54ch;
  font-size: clamp(16px, 2vw, 20px);
  color: rgba(255, 255, 255, 0.7);
}

.hero-actions {
  margin-top: 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 0.2s, background 0.2s, color 0.2s;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: var(--orange);
  color: #fff;
}

.btn-ghost {
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
}

.hero-stats {
  margin-top: 90px;
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
  border-top: 1px solid var(--line-dark);
  padding-top: 32px;
}

.hero-stat-value {
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.hero-stat-label {
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

/* --------------------------------------------------------------- staged */

/* Long scroll section where each panel of copy is swapped in place, the way
   the reference site stages its story instead of simply stacking sections. */
.staged {
  position: relative;
  background: var(--dark);
  color: #fff;
}

.staged-track {
  height: 320vh;
}

.staged-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  /* Clears the fixed header, so a tall panel on a short viewport cannot ride
     up underneath the wordmark. */
  padding: 110px var(--page-x) 90px;
}

.staged-inner {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  /* The panels are stacked in one grid cell rather than positioned absolutely.
     Absolute panels collapse this box to zero height, and a zero-height box
     centred in the sticky leaves most of the viewport empty while the text
     hangs off one edge. In the grid the box takes the height of the tallest
     panel and the sticky can centre it properly. */
  display: grid;
  align-items: center;
}

.staged-panel {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s, transform 0.5s;
  pointer-events: none;
}

.staged-panel.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.staged-panel h2 {
  max-width: 16ch;
}

.staged-panel p {
  margin-top: 28px;
  max-width: 52ch;
  font-size: clamp(16px, 1.6vw, 19px);
  color: rgba(255, 255, 255, 0.68);
}

.staged-progress {
  position: absolute;
  left: var(--page-x);
  bottom: 56px;
  display: flex;
  gap: 10px;
}

.staged-dot {
  width: 28px;
  height: 2px;
  background: rgba(255, 255, 255, 0.24);
  transition: background 0.3s;
}

.staged-dot.is-active {
  background: var(--orange);
}

/* ------------------------------------------------------------- products */

.products {
  background: var(--white);
  color: var(--dark);
  padding: 140px 0;
  transition: background var(--transition), color var(--transition);
}

html.dark .products {
  background: var(--dark);
  color: #fff;
}

.section-head {
  padding: 0 var(--page-x);
  max-width: 1400px;
  margin: 0 auto 64px;
}

.products-row {
  display: flex;
  gap: 20px;
  padding: 0 var(--page-x);
  overflow-x: auto;
  scrollbar-width: none;
}

.products-row::-webkit-scrollbar {
  display: none;
}

.product-card {
  flex: 0 0 auto;
  width: min(400px, 80vw);
  border-radius: 28px;
  background: var(--cream);
  color: var(--dark);
  padding: 35px 40px 40px;
}

.product-card h3 {
  background: linear-gradient(90deg, var(--orange-bright), var(--orange-deep));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 28px;
  max-width: 12ch;
}

.product-card p {
  color: #3a3a3a;
  font-size: 15px;
}

.product-card .meta {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(16, 16, 16, 0.12);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --------------------------------------------------------------- marquee */

.marquee {
  overflow: hidden;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  padding: 25px 0 18px;
  background: var(--white);
  transition: background var(--transition);
}

html.dark .marquee {
  background: var(--dark);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
}

.marquee-track h2 {
  font-size: clamp(64px, 14vw, 156px);
  white-space: nowrap;
  text-transform: uppercase;
  font-weight: 600;
  color: #eaeaea;
  padding-left: 40px;
}

html.dark .marquee-track h2 {
  color: #242424;
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
  }
}

/* --------------------------------------------------------------- markets */

.markets {
  background: var(--white);
  padding: 140px 0;
  transition: background var(--transition);
}

html.dark .markets {
  background: var(--dark);
}

.markets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
  padding: 0 var(--page-x);
  max-width: 1400px;
  margin: 0 auto;
}

.market-card {
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 32px;
  transition: transform 0.3s, border-color 0.3s;
}

html.dark .market-card {
  border-color: var(--line-dark);
}

.market-card:hover {
  transform: translateY(-4px);
  border-color: var(--orange);
}

.market-card .cat {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

html.dark .market-card .cat {
  color: var(--muted-dark);
}

.market-card h3 {
  margin: 20px 0 28px;
  font-size: 24px;
  line-height: 30px;
}

.market-odds {
  display: flex;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
}

.odd {
  flex: 1;
  padding: 12px 16px;
  border-radius: 999px;
  display: flex;
  justify-content: space-between;
}

.odd-yes {
  background: rgba(31, 157, 99, 0.12);
  color: var(--yes);
}

.odd-no {
  background: rgba(207, 30, 0, 0.1);
  color: var(--no);
}

/* --------------------------------------------------------------- closing */

.closing {
  background: var(--dark);
  color: #fff;
  border-radius: 40px 40px 0 0;
  padding: 160px var(--page-x);
}

.closing-inner {
  max-width: 1400px;
  margin: 0 auto;
}

.closing h2 {
  max-width: 14ch;
}

.closing-actions {
  margin-top: 56px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

footer {
  background: var(--dark);
  color: rgba(255, 255, 255, 0.5);
  padding: 0 var(--page-x) 56px;
  font-size: 13px;
}

.footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  border-top: 1px solid var(--line-dark);
  padding-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
}

.footer-risk {
  max-width: 60ch;
  line-height: 1.6;
}

/* ---------------------------------------------------------- theme toggle */

.theme-toggle {
  position: fixed;
  right: var(--page-x);
  bottom: 32px;
  z-index: 60;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--dark);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: background var(--transition), color var(--transition);
}

html.dark .theme-toggle {
  background: var(--dark-soft);
  color: #fff;
  border-color: var(--line-dark);
}

/* ----------------------------------------------------------------- reveal */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s, transform 0.7s;
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 900px) {
  :root {
    --page-x: 20px;
  }

  nav a:not(.nav-cta) {
    display: none;
  }

  .hero-stats {
    gap: 32px;
  }

  .staged-track {
    height: 280vh;
  }

  .products {
    padding: 90px 0;
  }

  .markets {
    padding: 90px 0;
  }

  .closing {
    padding: 100px var(--page-x);
  }
}