/* Gamification Lab — sabe.lat
   Colour and display type from the "sabe.lat / VersionFinal" Figma frame,
   structure and components from IBM Carbon (Plex, 2x grid, square corners). */

:root {
  /* Figma */
  --sabe-blue: #0064d6;
  --sabe-blue-deep: #00479a;
  --sabe-grid: #eaf2ff;

  /* Carbon */
  --blue-60: #0f62fe;
  --blue-70: #0043ce;
  --blue-20: #d0e2ff;
  --gray-100: #161616;
  --gray-90: #262626;
  --gray-80: #393939;
  --gray-70: #525252;
  --gray-50: #8d8d8d;
  --gray-30: #c6c6c6;
  --gray-20: #e0e0e0;
  --gray-10: #f4f4f4;
  --white: #ffffff;
  --green-50: #24a148;
  --green-10: #defbe6;
  --green-70: #0e6027;

  --font-display: "Lexend", "IBM Plex Sans", system-ui, sans-serif;
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --gutter: 16px;
  --shell-h: 48px;
  --wrap: 1312px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--shell-h); }
body {
  margin: 0;
  background: var(--white);
  color: var(--gray-100);
  font: 400 16px/1.5 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-60); }
p { margin: 0 0 16px; }

.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 100;
  padding: 12px 16px; background: var(--blue-60); color: var(--white);
}
.skip-link:focus { top: 8px; }
:focus-visible { outline: 2px solid var(--blue-60); outline-offset: 2px; }

/* ── Icons: Carbon SVGs used as masks so they take currentColor ── */
.icon {
  display: inline-block; width: 16px; height: 16px; flex: none;
  background-color: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
          mask: var(--i) center / contain no-repeat;
}
.icon--lg { width: 32px; height: 32px; }
.icon--arrow        { --i: url("/assets/icons/arrow--right.svg"); }
.icon--launch       { --i: url("/assets/icons/launch.svg"); }
.icon--email        { --i: url("/assets/icons/email.svg"); }
.icon--download     { --i: url("/assets/icons/download.svg"); }
.icon--trophy       { --i: url("/assets/icons/trophy.svg"); }

/* ── Award badge (hero) ── */
.award {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center;
  margin: 0 0 48px; padding: 12px 16px;
  background: rgba(0, 35, 90, .35); border: 1px solid rgba(255,255,255,.35);
  color: var(--white); font-size: 14px; line-height: 1.4; text-decoration: none; text-align: center;
}
.award .icon { width: 20px; height: 20px; color: #f9d571; }
.award strong { font-weight: 600; margin-right: 6px; }
.award__see { font: 400 12px/1.33 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--blue-20); text-decoration: underline; text-underline-offset: 3px; }
.award:hover { background: rgba(0, 35, 90, .55); }
.open-card__award { display: flex; gap: 8px; align-items: flex-start; padding: 12px; background: var(--gray-10); font-size: 14px; color: var(--gray-100) !important; }
.open-card__award .icon { width: 20px; height: 20px; margin-top: 1px; color: #b28600; }
.facts a { color: var(--blue-60); }
.icon--report       { --i: url("/assets/icons/report.svg"); }
.icon--gamification { --i: url("/assets/icons/gamification.svg"); }
.icon--education    { --i: url("/assets/icons/education.svg"); }
.icon--video        { --i: url("/assets/icons/video.svg"); }

/* ── UI shell (Carbon header) ── */
.shell {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 24px;
  height: var(--shell-h); padding: 0 0 0 var(--gutter);
  background: var(--gray-100); color: var(--white);
  border-bottom: 1px solid var(--gray-80);
}
.shell__brand { display: flex; align-items: baseline; gap: 8px; color: inherit; text-decoration: none; white-space: nowrap; }
.shell__name { font-weight: 600; font-size: 14px; }
.shell__product { font-size: 14px; color: var(--gray-30); }
.shell__nav { display: none; height: 100%; }
.shell__nav a {
  display: flex; align-items: center; height: 100%; padding: 0 16px;
  color: var(--gray-30); font-size: 14px; text-decoration: none;
}
.shell__nav a:hover { background: var(--gray-80); color: var(--white); }
.shell__cta {
  margin-left: auto; display: flex; align-items: center; height: 100%;
  padding: 0 16px; background: var(--blue-60); color: var(--white);
  font-size: 14px; text-decoration: none; white-space: nowrap;
}
.shell__cta:hover { background: var(--blue-70); }

/* ── Buttons (Carbon: square, 48px, label left / icon right) ── */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 32px;
  min-height: 48px; padding: 12px 16px; min-width: 220px;
  font: 400 14px/1.3 var(--font-sans); text-decoration: none;
  border: 1px solid transparent; transition: background-color .11s, color .11s;
}
.btn--primary { background: var(--blue-60); color: var(--white); }
.btn--primary:hover { background: var(--blue-70); }
.btn--light { background: var(--white); color: var(--sabe-blue-deep); font-weight: 600; }
.btn--light:hover { background: var(--blue-20); }
.btn--outline-light { border-color: var(--white); color: var(--white); }
.btn--outline-light:hover { background: rgba(255,255,255,.12); }

/* ── Type ── */
.kicker {
  margin: 0 0 16px; font: 400 12px/1.33 var(--font-mono);
  letter-spacing: .16em; text-transform: uppercase; color: var(--gray-70);
}
.kicker--light { color: var(--blue-20); }
.kicker--dark { color: var(--gray-30); }
.h2 {
  margin: 0 0 24px; font: 600 clamp(32px, 4vw + 12px, 56px)/1.1 var(--font-display);
  letter-spacing: -0.02em;
}
.h3 { margin: 0 0 8px; font: 600 18px/1.35 var(--font-sans); }
.h3--dark { color: var(--white); margin-bottom: 16px; }
.lead { font-size: clamp(18px, .6vw + 14px, 22px); font-weight: 300; line-height: 1.45; max-width: 60ch; }

/* ── Layout ── */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.band { padding: 80px 0; }
.band--g10 { background: var(--gray-10); }
.band--g100 { background: var(--gray-100); color: var(--gray-20); }
.split { display: grid; gap: 48px; }
@media (min-width: 1056px) {
  .split { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
}

/* ── Blueprint = layout grid ──
   Carbon 2x Grid: 4 columns (sm), 8 (md, 672px+), 16 (lg, 1056px+), fixed outer edge
   (16px sm, 32px md+ = margin + column padding). The drawn lines ARE the column lines,
   with one on the exact centre axis, so anything that snaps to them reads as centred. */
:root { --cols: 4; --edge: 16px; --grid-max: 1520px; }
@media (min-width: 672px)  { :root { --cols: 8; --edge: 32px; } }
@media (min-width: 1056px) { :root { --cols: 16; } }

.blueprint-host { position: relative; container-type: inline-size; overflow: hidden; }
.blueprint-host > :not(.blueprint) { position: relative; z-index: 1; }
.blueprint, .hero__inner {
  --gw: min(100cqw - 2 * var(--edge), var(--grid-max));
  --col: calc(var(--gw) / var(--cols));
}
.blueprint {
  --line: rgba(234, 242, 255, .2);
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: var(--col) var(--col);
  /* a vertical line on the centre axis; the grid edges are whole columns away from it */
  background-position: calc(50% + var(--col) / 2) 0;
}

/* ── Hero (Figma VersionFinal) on the grid ── */
.hero {
  background: radial-gradient(ellipse 90% 70% at 50% 38%, #0b70e2 0%, var(--sabe-blue) 55%, #0058bd 100%);
  color: var(--white); text-align: center;
}
.hero__inner {
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  width: var(--gw); margin: 0 auto; padding-top: var(--col);
}
.hero__inner > * { grid-column: 1 / -1; }
/* padding-left offsets the trailing .16em tracking so the kicker sits on the axis */
.hero__kicker { margin-bottom: 24px; padding-left: .16em; }

/* Title: the INK of "GAMIFICATION" spans exactly its columns.
   Lexend Bold, tracking -0.01em: ink width 7.9674em, ink starts 0.0434em into the box. */
.hero__title {
  container-type: inline-size; margin: 0 0 40px;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  text-shadow: 0 6px 30px rgba(0, 35, 90, .25);
}
.hero__word {
  display: block; text-align: left; white-space: nowrap;
  font-size: calc(100cqw / 7.9674); line-height: .8; letter-spacing: -0.01em;
  margin-left: -0.0434em;
}
/* LAB: a symmetric lockup on the centre axis, rules running to the same ink edges */
.hero__lab {
  display: flex; align-items: center; gap: .55em; margin-top: .5em;
  font-size: calc(100cqw / 7.9674 * .35); line-height: 1; letter-spacing: .3em;
}
.hero__lab::before, .hero__lab::after { content: ""; flex: 1; height: max(2px, .07em); background: currentColor; opacity: .9; }
/* padding-left offsets the trailing tracking; left nudges for L/B side bearings */
.hero__lab > span { padding-left: .3em; position: relative; left: -.022em; }

.hero__lead { margin: 0 0 32px; font-size: clamp(18px, .8vw + 13px, 22px); font-weight: 300; line-height: 1.45; color: #eaf2ff; }
.hero__lead strong { font-weight: 600; color: var(--white); }

/* Button set: two buttons that meet on the centre axis (Carbon button set, no gap) */
.hero__actions { display: grid; grid-template-columns: subgrid; row-gap: 8px; margin-bottom: 24px; }
.hero__actions .btn { grid-column: 1 / -1; min-width: 0; }

.award { grid-column: 1 / -1; }
.hero__cast { position: relative; }
.hero__cast img { width: 100%; }
/* YouTube logo where the Figma frame puts it: x 736, y 100, 208px wide inside the 1648×945 cast */
.hero__cast .hero__yt { position: absolute; left: 44.66%; top: 10.58%; width: 12.62%; height: auto; }

@media (min-width: 672px) {
  .hero__lead { grid-column: 2 / 8; }
  .hero__actions .btn:first-child { grid-column: 2 / 5; }
  .hero__actions .btn:last-child  { grid-column: 5 / 8; }
}
@media (min-width: 1056px) {
  .hero__title, .hero__cast { grid-column: 2 / 16; }
  .hero__lead { grid-column: 5 / 13; }
  .hero__actions .btn:first-child { grid-column: 6 / 9; }
  .hero__actions .btn:last-child  { grid-column: 9 / 12; }
  .award { grid-column: 4 / 14; }
}

/* ── Tiles ── */
.tiles, .cards, .checks, .roadmap, .tags { list-style: none; margin: 0; padding: 0; }
.tiles { display: grid; gap: 1px; margin-top: 48px; background: var(--gray-20); border: 1px solid var(--gray-20); }
.tile { background: var(--white); padding: 24px 16px 32px; min-height: 260px; }
.tile .icon { color: var(--sabe-blue); margin-bottom: 48px; }
.tile p { color: var(--gray-70); font-size: 14px; line-height: 1.5; margin: 0; }
@media (min-width: 672px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1056px) { .tiles { grid-template-columns: repeat(4, 1fr); } }

/* ── Tags ── */
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.tag {
  display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 10px;
  border-radius: 24px; background: var(--gray-20); color: var(--gray-100);
  font-size: 12px; line-height: 1.33; letter-spacing: .02em;
}
.tag--green { background: var(--green-10); color: var(--green-70); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green-50); }

/* ── Steps (structured list) ── */
.steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--gray-20); }
.steps__item { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 24px 0; border-bottom: 1px solid var(--gray-20); }
.steps__item p { margin: 0; color: var(--gray-70); }
.steps__n { font: 500 14px/1.6 var(--font-mono); color: var(--sabe-blue); }
.steps__item--ai { background: linear-gradient(90deg, rgba(0,100,214,.07), transparent 70%); padding-left: 12px; margin-left: -12px; border-left: 3px solid var(--sabe-blue); }

/* ── Metrics + lists on dark ── */
.metrics { display: grid; gap: 1px; margin: 32px 0 64px; background: var(--gray-80); border: 1px solid var(--gray-80); }
.metric { background: var(--gray-90); padding: 24px 16px; }
.metric dt { font: 400 12px/1.33 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gray-30); }
.metric dd { margin: 8px 0 0; font: 700 clamp(48px, 5vw, 76px)/1 var(--font-display); color: var(--white); }
.metric__note { margin: 8px 0 0; font-size: 14px; color: var(--gray-50); }
@media (min-width: 672px) { .metrics { grid-template-columns: repeat(3, 1fr); } }
.band--g100 .h2 { color: var(--white); }
.checks li { position: relative; padding: 0 0 20px 32px; color: var(--gray-30); }
.checks li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px;
  background: #4589ff; -webkit-mask: url("/assets/icons/checkmark--filled.svg") center / contain no-repeat;
  mask: url("/assets/icons/checkmark--filled.svg") center / contain no-repeat;
}
.checks strong, .roadmap li::marker { color: var(--white); }
.roadmap { counter-reset: r; }
.roadmap li { counter-increment: r; display: grid; grid-template-columns: 48px 1fr; padding: 16px 0; border-top: 1px solid var(--gray-80); color: var(--gray-30); }
.roadmap li::before { content: "0" counter(r); font: 500 14px/1.6 var(--font-mono); color: #78a9ff; }

/* ── Cards ── */
.cards { display: grid; gap: 16px; margin-top: 32px; }
.card { background: var(--white); padding: 16px 16px 24px; border-top: 4px solid var(--sabe-blue); }
.card .tag { margin-bottom: 16px; }
.card p { margin: 0; color: var(--gray-70); font-size: 14px; }
@media (min-width: 672px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1056px) { .cards { grid-template-columns: repeat(3, 1fr); } }

/* ── Featured games ── */
.games { list-style: none; margin: 48px 0 0; padding: 0; display: grid; gap: 32px; }
.game { display: flex; flex-direction: column; background: var(--white); }
.game__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--gray-100); }
.game__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .24s cubic-bezier(.2, 0, .38, .9); }
.game__media:hover img { transform: scale(1.03); }
.game__body { display: flex; flex-direction: column; flex: 1; padding: 24px 16px 32px; border-top: 4px solid var(--sabe-blue); }
.game__body .tags { margin-bottom: 16px; }
.game__title { font: 600 clamp(22px, 1vw + 16px, 28px)/1.25 var(--font-display); margin-bottom: 12px; }
.game__body p { color: var(--gray-70); }
.game__body .btn { align-self: flex-start; margin-top: auto; }
@media (min-width: 1056px) { .games { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { .game__media img { transition: none; } }

/* ── Open lab (Figma blue band) ── */
.band--blue { background: var(--sabe-blue); color: var(--white); }
.band--blue .lead { color: #eaf2ff; }
.metrics--blue { background: rgba(255,255,255,.28); border-color: rgba(255,255,255,.28); margin-bottom: 16px; }
.metrics--blue .metric { background: var(--sabe-blue-deep); }
.metrics--blue .metric dt { color: var(--blue-20); }
.metrics--blue .metric__note { color: #b8d4ff; }
@media (min-width: 1056px) { .metrics--blue { grid-template-columns: repeat(4, 1fr); } }
.source { max-width: 90ch; font-size: 12px; line-height: 1.5; color: #cfe1ff; margin-bottom: 48px; }
.open-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.open-card { display: flex; flex-direction: column; background: var(--white); color: var(--gray-100); padding: 24px 16px 32px; }
.open-card p { color: var(--gray-70); }
.open-card .btn { align-self: flex-start; margin-top: auto; }
.open-card__label { align-self: flex-start; display: flex; align-items: center; height: 32px; margin-bottom: 24px; padding: 0 12px; background: var(--gray-100); color: var(--white); font: 500 15px/1 var(--font-display); letter-spacing: .02em; }
.open-card__label--logo img { width: 92px; height: auto; }
@media (min-width: 672px) { .open-links { grid-template-columns: 1fr 1fr; } }

/* ── Free guide ── */
.book { display: grid; gap: 48px; align-items: start; }
.book__cover { display: block; max-width: 360px; box-shadow: 12px 12px 0 var(--blue-20); transition: transform .24s cubic-bezier(.2, 0, .38, .9); }
.book__cover:hover { transform: translate(-4px, -4px); }
.book__parts { list-style: none; margin: 0 0 32px; padding: 0; border-top: 1px solid var(--gray-20); }
.book__parts li { display: grid; grid-template-columns: 40px 1fr; padding: 12px 0; border-bottom: 1px solid var(--gray-20); color: var(--gray-70); }
.book__parts span { font: 600 16px/1.5 var(--font-display); color: var(--sabe-blue); }
.book__note { margin: 16px 0 0; font-size: 12px; color: var(--gray-70); max-width: 60ch; }
.link-dark { color: #78a9ff; }
@media (min-width: 1056px) { .book { grid-template-columns: 360px 1fr; gap: 80px; } }
@media (prefers-reduced-motion: reduce) { .book__cover { transition: none; } }

/* ── Facts ── */
.facts { margin: 0; border-top: 1px solid var(--gray-20); }
.facts div { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--gray-20); }
.facts dt { font: 400 12px/1.6 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gray-70); }
.facts dd { margin: 0; font-weight: 600; }

/* ── Footer ── */
.footer { background: var(--gray-100); color: var(--gray-50); font-size: 14px; padding: 32px 0; }
.footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.footer p { margin: 0; }
.footer a { color: var(--gray-30); }

/* ── Plain document pages (privacy) ── */
.doc { max-width: 72ch; padding: 64px var(--gutter) 96px; margin: 0 auto; }
.doc h1 { margin: 0 0 8px; font: 600 clamp(32px, 4vw + 12px, 48px)/1.1 var(--font-display); }
.doc h2 { margin: 40px 0 8px; font: 600 20px/1.3 var(--font-sans); }
.doc p, .doc li { color: var(--gray-80); }
.doc .updated { font: 400 12px/1.33 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gray-70); margin-bottom: 32px; }

/* ── Breakpoints ── */
@media (min-width: 672px) {
  :root { --gutter: 32px; }
  .band { padding: 112px 0; }
}
@media (min-width: 1312px) {
  .shell__nav { display: flex; }
}
@media (max-width: 479px) {
  .shell__product { display: none; }
  .btn { width: 100%; min-width: 0; }
  .facts div { grid-template-columns: 1fr; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}