/* ==========================================================================
   BeatBet Studios — site styles
   Palette and type are taken from the BeatBet Studios logo:
   volt green, white letters with ice-blue bevel, heavy black outline.
   ========================================================================== */

@font-face {
  font-family: "Bricolage";
  src: url("../fonts/bricolage-grotesque.woff2") format("woff2-variations"),
       url("../fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
}
@font-face {
  font-family: "Rubik";
  src: url("../fonts/rubik-latin-900-italic.woff2") format("woff2");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Rubik";
  src: url("../fonts/rubik-latin-800-italic.woff2") format("woff2");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

:root {
  --volt: #3eea14;
  --lime: #a8f98a;
  --depth: #179a0b;
  --ice: #dce6f7;
  --ice-2: #afc4ee;
  --ink: #000;
  --paper: #fff;
  --mist: #f1f3ef;
  --line: #e3e6e0;
  --muted: #555b53;
  --night: #0b1a0c;

  --frame: var(--lime);          /* colour around the white sheets */
  --frame-ink: var(--ink);       /* giant footer type on the frame */

  --font-body: "Bricolage", ui-sans-serif, system-ui, sans-serif;
  --font-brand: "Rubik", "Arial Black", sans-serif;

  --step--1: 0.875rem;
  --step-0: 1rem;
  --step-1: 1.1875rem;
  --step-2: 1.5rem;
  --step-3: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  --step-4: clamp(2.25rem, 1.5rem + 2.8vw, 3.5rem);
  --step-5: clamp(3rem, 1.6rem + 5vw, 6.5rem);

  --radius-sheet: clamp(20px, 3vw, 36px);
  --radius-card: 24px;
  --gutter: clamp(16px, 3vw, 40px);
  --max: 1320px;
  --header-h: 76px;
  --depth-shadow: 0 4px 0 var(--ink);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--frame);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.55;
  font-optical-sizing: auto;
  overflow-x: hidden;
}
body.theme-dark { --frame: var(--ink); --frame-ink: var(--volt); }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 450; letter-spacing: -0.025em; line-height: 1.05; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.theme-dark .giant:focus-visible, .on-dark :focus-visible { outline-color: var(--volt); }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 999px;
  text-decoration: none; transition: top .2s;
}
.skip-link:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- buttons ---------- */
.btn {
  --btn-bg: var(--ink); --btn-fg: var(--paper);
  display: inline-flex; align-items: center; gap: .5em;
  padding: .7em 1.35em; border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 2px solid var(--ink);
  font-weight: 600; font-size: .95rem; line-height: 1; text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
.btn:hover { --btn-bg: var(--volt); --btn-fg: var(--ink); }
.btn--volt { --btn-bg: var(--volt); --btn-fg: var(--ink); box-shadow: var(--depth-shadow); }
.btn--volt:hover { --btn-bg: var(--lime); transform: translateY(2px); box-shadow: 0 2px 0 var(--ink); }
.btn--volt:active { transform: translateY(4px); box-shadow: 0 0 0 var(--ink); }
.btn--lg { font-size: 1.05rem; padding: .9em 1.7em; }
.btn--sm { font-size: .85rem; padding: .55em 1.1em; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  transition: background-color .25s ease, box-shadow .25s ease;
}
.page-home .site-header:not(.is-scrolled) { background: var(--frame); }
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--line); }
.header-inner { height: var(--header-h); display: flex; align-items: center; gap: 24px; }
.brand { display: block; flex: none; }
.brand img { height: 42px; width: auto; }
.nav { margin-inline: auto; }
.nav__list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav__link {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 14px; border-radius: 999px; border: 0; background: none;
  font-size: .92rem; font-weight: 500; text-decoration: none; color: var(--ink); cursor: pointer;
  transition: background-color .15s ease;
}
.nav__link:hover { background: var(--mist); }
.page-home .site-header:not(.is-scrolled) .nav__link:hover { background: rgba(255,255,255,.55); }
.nav__link[aria-current="page"], .nav__link.is-active { background: var(--volt); }
.nav__link .chev { width: 10px; height: 10px; transition: transform .2s ease; }
.has-menu { position: relative; }
.has-menu[data-open] .chev { transform: rotate(180deg); }
.menu {
  position: absolute; top: calc(100% + 8px); left: 50%; translate: -50% 0;
  min-width: 240px; padding: 8px; list-style: none; margin: 0;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 18px;
  box-shadow: 0 6px 0 var(--ink);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
.has-menu[data-open] > .menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.menu a {
  display: block; padding: 10px 14px; border-radius: 12px; text-decoration: none; font-size: .95rem;
}
.menu a small { display: block; color: var(--muted); font-size: .8rem; }
.menu a:hover, .menu a:focus-visible { background: var(--lime); }
.header-tools { display: flex; align-items: center; gap: 8px; }
.lang .menu { min-width: 160px; left: auto; right: 0; translate: 0 0; }
.menu-toggle { display: none; }

@media (max-width: 1080px) {
  .nav, .header-tools .lang { display: none; }
  .header-tools { margin-left: auto; }
  .menu-toggle {
    display: inline-grid; place-items: center; width: 46px; height: 46px;
    border-radius: 50%; border: 2px solid var(--ink); background: var(--paper); cursor: pointer;
  }
  .menu-toggle span, .menu-toggle span::before, .menu-toggle span::after {
    content: ""; display: block; width: 18px; height: 2px; background: var(--ink); position: relative;
    transition: transform .2s ease, background-color .2s ease;
  }
  .menu-toggle span::before { position: absolute; top: -6px; }
  .menu-toggle span::after { position: absolute; top: 6px; }
  .menu-toggle[aria-expanded="true"] span { background: transparent; }
  .menu-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
}
@media (max-width: 520px) {
  .header-tools .btn { display: none; }
  .brand img { height: 36px; }
}

/* mobile drawer */
.drawer {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 49;
  background: var(--lime); overflow-y: auto;
  padding: 24px var(--gutter) 40px;
  display: none;
}
.drawer[data-open] { display: block; }
.drawer ul { list-style: none; margin: 0; padding: 0; }
.drawer > ul > li { border-bottom: 2px solid var(--ink); }
.drawer a { display: block; padding: 14px 0; text-decoration: none; font-size: 1.6rem; font-weight: 500; letter-spacing: -.02em; }
.drawer .sub a { font-size: 1.05rem; padding: 6px 0 6px 18px; color: var(--ink); }
.drawer .sub { padding-bottom: 12px; }
.drawer .btn { margin-top: 28px; font-size: 1.1rem; padding: 1em 1.8em; }
body.drawer-open { overflow: hidden; }

/* ---------- sheets (white rounded panels on the coloured frame) ---------- */
main { display: block; }
.sheet {
  background: var(--paper);
  border-radius: var(--radius-sheet);
  margin: 0 clamp(6px, 1vw, 12px) clamp(6px, 1vw, 12px);
  position: relative;
}
.sheet--first { border-top-left-radius: 0; border-top-right-radius: 0; }
.section { padding-block: clamp(56px, 7vw, 104px); }
.section + .section { border-top: 1px solid var(--line); }

/* ---------- page head ---------- */
.crumbs { display: flex; gap: 10px; align-items: center; font-size: .82rem; color: var(--muted); padding-top: 28px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs svg { width: 16px; height: 10px; }
.crumbs [aria-current] { color: var(--ink); }
.page-title { font-size: var(--step-5); font-weight: 400; letter-spacing: -.045em; line-height: .98; padding: 22px 0 clamp(32px, 5vw, 64px); }

/* ---------- prose / splits ---------- */
.h2 { font-size: var(--step-4); }
.h3 { font-size: var(--step-3); }
.lede { font-size: var(--step-1); color: var(--muted); max-width: 58ch; }
.muted { color: var(--muted); }
.prose { max-width: 60ch; color: var(--muted); }
.prose p:last-child { margin-bottom: 0; }
.prose ul { padding-left: 1.1em; margin: 0 0 1em; }
.prose li { margin-bottom: .35em; }
.prose strong { color: var(--ink); font-weight: 600; }

.split {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center;
  position: relative;
}
.split--flip > :first-child { order: 2; }
.split > * { min-width: 0; }
.split__text .h2, .split__text .h3 { margin-bottom: 24px; }
.split__media { position: relative; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split--flip > :first-child { order: 0; }
}

/* masks for images and artwork */
.shape { aspect-ratio: 1; width: 100%; overflow: hidden; background: var(--mist); }
.shape img { width: 100%; height: 100%; object-fit: cover; }
.shape--wide { aspect-ratio: 4 / 3; }
.mask-clover   { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg fill='%23000'%3E%3Ccircle cx='30' cy='30' r='30'/%3E%3Ccircle cx='70' cy='30' r='30'/%3E%3Ccircle cx='30' cy='70' r='30'/%3E%3Ccircle cx='70' cy='70' r='30'/%3E%3Crect x='20' y='20' width='60' height='60'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg fill='%23000'%3E%3Ccircle cx='30' cy='30' r='30'/%3E%3Ccircle cx='70' cy='30' r='30'/%3E%3Ccircle cx='30' cy='70' r='30'/%3E%3Ccircle cx='70' cy='70' r='30'/%3E%3Crect x='20' y='20' width='60' height='60'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.mask-pinch    { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M10,0 Q50,16 90,0 Q100,0 100,10 Q84,50 100,90 Q100,100 90,100 Q50,84 10,100 Q0,100 0,90 Q16,50 0,10 Q0,0 10,0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M10,0 Q50,16 90,0 Q100,0 100,10 Q84,50 100,90 Q100,100 90,100 Q50,84 10,100 Q0,100 0,90 Q16,50 0,10 Q0,0 10,0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.mask-scallop  { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0,30 Q0,0 30,0 H70 Q100,0 100,30 V82 A16.6,16.6 0 0 1 66.7,82 A16.6,16.6 0 0 1 33.3,82 A16.6,16.6 0 0 1 0,82Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0,30 Q0,0 30,0 H70 Q100,0 100,30 V82 A16.6,16.6 0 0 1 66.7,82 A16.6,16.6 0 0 1 33.3,82 A16.6,16.6 0 0 1 0,82Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.mask-flower   { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M100,50 L99.8,51.6 L99.3,53.1 L98.6,54.6 L97.5,56 L96.3,57.3 L95,58.6 L93.6,59.7 L92.2,60.8 L90.9,61.9 L89.8,62.9 L88.9,64 L88.2,65.1 L87.7,66.3 L87.4,67.6 L87.3,69 L87.4,70.5 L87.5,72.2 L87.7,73.9 L87.9,75.7 L87.9,77.6 L87.9,79.4 L87.6,81.1 L87.1,82.7 L86.3,84.1 L85.4,85.4 L84.1,86.3 L82.7,87.1 L81.1,87.6 L79.4,87.9 L77.6,87.9 L75.7,87.9 L73.9,87.7 L72.2,87.5 L70.5,87.4 L69,87.3 L67.6,87.4 L66.3,87.7 L65.1,88.2 L64,88.9 L62.9,89.8 L61.9,90.9 L60.8,92.2 L59.7,93.6 L58.6,95 L57.3,96.3 L56,97.5 L54.6,98.6 L53.1,99.3 L51.6,99.8 L50,100 L48.4,99.8 L46.9,99.3 L45.4,98.6 L44,97.5 L42.7,96.3 L41.4,95 L40.3,93.6 L39.2,92.2 L38.1,90.9 L37.1,89.8 L36,88.9 L34.9,88.2 L33.7,87.7 L32.4,87.4 L31,87.3 L29.5,87.4 L27.8,87.5 L26.1,87.7 L24.3,87.9 L22.4,87.9 L20.6,87.9 L18.9,87.6 L17.3,87.1 L15.9,86.3 L14.6,85.4 L13.7,84.1 L12.9,82.7 L12.4,81.1 L12.1,79.4 L12.1,77.6 L12.1,75.7 L12.3,73.9 L12.5,72.2 L12.6,70.5 L12.7,69 L12.6,67.6 L12.3,66.3 L11.8,65.1 L11.1,64 L10.2,62.9 L9.1,61.9 L7.8,60.8 L6.4,59.7 L5,58.6 L3.7,57.3 L2.5,56 L1.4,54.6 L0.7,53.1 L0.2,51.6 L0,50 L0.2,48.4 L0.7,46.9 L1.4,45.4 L2.5,44 L3.7,42.7 L5,41.4 L6.4,40.3 L7.8,39.2 L9.1,38.1 L10.2,37.1 L11.1,36 L11.8,34.9 L12.3,33.7 L12.6,32.4 L12.7,31 L12.6,29.5 L12.5,27.8 L12.3,26.1 L12.1,24.3 L12.1,22.4 L12.1,20.6 L12.4,18.9 L12.9,17.3 L13.7,15.9 L14.6,14.6 L15.9,13.7 L17.3,12.9 L18.9,12.4 L20.6,12.1 L22.4,12.1 L24.3,12.1 L26.1,12.3 L27.8,12.5 L29.5,12.6 L31,12.7 L32.4,12.6 L33.7,12.3 L34.9,11.8 L36,11.1 L37.1,10.2 L38.1,9.1 L39.2,7.8 L40.3,6.4 L41.4,5 L42.7,3.7 L44,2.5 L45.4,1.4 L46.9,0.7 L48.4,0.2 L50,0 L51.6,0.2 L53.1,0.7 L54.6,1.4 L56,2.5 L57.3,3.7 L58.6,5 L59.7,6.4 L60.8,7.8 L61.9,9.1 L62.9,10.2 L64,11.1 L65.1,11.8 L66.3,12.3 L67.6,12.6 L69,12.7 L70.5,12.6 L72.2,12.5 L73.9,12.3 L75.7,12.1 L77.6,12.1 L79.4,12.1 L81.1,12.4 L82.7,12.9 L84.1,13.7 L85.4,14.6 L86.3,15.9 L87.1,17.3 L87.6,18.9 L87.9,20.6 L87.9,22.4 L87.9,24.3 L87.7,26.1 L87.5,27.8 L87.4,29.5 L87.3,31 L87.4,32.4 L87.7,33.7 L88.2,34.9 L88.9,36 L89.8,37.1 L90.9,38.1 L92.2,39.2 L93.6,40.3 L95,41.4 L96.3,42.7 L97.5,44 L98.6,45.4 L99.3,46.9 L99.8,48.4Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M100,50 L99.8,51.6 L99.3,53.1 L98.6,54.6 L97.5,56 L96.3,57.3 L95,58.6 L93.6,59.7 L92.2,60.8 L90.9,61.9 L89.8,62.9 L88.9,64 L88.2,65.1 L87.7,66.3 L87.4,67.6 L87.3,69 L87.4,70.5 L87.5,72.2 L87.7,73.9 L87.9,75.7 L87.9,77.6 L87.9,79.4 L87.6,81.1 L87.1,82.7 L86.3,84.1 L85.4,85.4 L84.1,86.3 L82.7,87.1 L81.1,87.6 L79.4,87.9 L77.6,87.9 L75.7,87.9 L73.9,87.7 L72.2,87.5 L70.5,87.4 L69,87.3 L67.6,87.4 L66.3,87.7 L65.1,88.2 L64,88.9 L62.9,89.8 L61.9,90.9 L60.8,92.2 L59.7,93.6 L58.6,95 L57.3,96.3 L56,97.5 L54.6,98.6 L53.1,99.3 L51.6,99.8 L50,100 L48.4,99.8 L46.9,99.3 L45.4,98.6 L44,97.5 L42.7,96.3 L41.4,95 L40.3,93.6 L39.2,92.2 L38.1,90.9 L37.1,89.8 L36,88.9 L34.9,88.2 L33.7,87.7 L32.4,87.4 L31,87.3 L29.5,87.4 L27.8,87.5 L26.1,87.7 L24.3,87.9 L22.4,87.9 L20.6,87.9 L18.9,87.6 L17.3,87.1 L15.9,86.3 L14.6,85.4 L13.7,84.1 L12.9,82.7 L12.4,81.1 L12.1,79.4 L12.1,77.6 L12.1,75.7 L12.3,73.9 L12.5,72.2 L12.6,70.5 L12.7,69 L12.6,67.6 L12.3,66.3 L11.8,65.1 L11.1,64 L10.2,62.9 L9.1,61.9 L7.8,60.8 L6.4,59.7 L5,58.6 L3.7,57.3 L2.5,56 L1.4,54.6 L0.7,53.1 L0.2,51.6 L0,50 L0.2,48.4 L0.7,46.9 L1.4,45.4 L2.5,44 L3.7,42.7 L5,41.4 L6.4,40.3 L7.8,39.2 L9.1,38.1 L10.2,37.1 L11.1,36 L11.8,34.9 L12.3,33.7 L12.6,32.4 L12.7,31 L12.6,29.5 L12.5,27.8 L12.3,26.1 L12.1,24.3 L12.1,22.4 L12.1,20.6 L12.4,18.9 L12.9,17.3 L13.7,15.9 L14.6,14.6 L15.9,13.7 L17.3,12.9 L18.9,12.4 L20.6,12.1 L22.4,12.1 L24.3,12.1 L26.1,12.3 L27.8,12.5 L29.5,12.6 L31,12.7 L32.4,12.6 L33.7,12.3 L34.9,11.8 L36,11.1 L37.1,10.2 L38.1,9.1 L39.2,7.8 L40.3,6.4 L41.4,5 L42.7,3.7 L44,2.5 L45.4,1.4 L46.9,0.7 L48.4,0.2 L50,0 L51.6,0.2 L53.1,0.7 L54.6,1.4 L56,2.5 L57.3,3.7 L58.6,5 L59.7,6.4 L60.8,7.8 L61.9,9.1 L62.9,10.2 L64,11.1 L65.1,11.8 L66.3,12.3 L67.6,12.6 L69,12.7 L70.5,12.6 L72.2,12.5 L73.9,12.3 L75.7,12.1 L77.6,12.1 L79.4,12.1 L81.1,12.4 L82.7,12.9 L84.1,13.7 L85.4,14.6 L86.3,15.9 L87.1,17.3 L87.6,18.9 L87.9,20.6 L87.9,22.4 L87.9,24.3 L87.7,26.1 L87.5,27.8 L87.4,29.5 L87.3,31 L87.4,32.4 L87.7,33.7 L88.2,34.9 L88.9,36 L89.8,37.1 L90.9,38.1 L92.2,39.2 L93.6,40.3 L95,41.4 L96.3,42.7 L97.5,44 L98.6,45.4 L99.3,46.9 L99.8,48.4Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.mask-arches   { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0,40 A16.7,22 0 0 1 33.3,22 A16.7,22 0 0 1 66.7,22 A16.7,22 0 0 1 100,40 V78 A12.5,14 0 0 1 75,86 A12.5,14 0 0 1 50,86 A12.5,14 0 0 1 25,86 A12.5,14 0 0 1 0,78Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0,40 A16.7,22 0 0 1 33.3,22 A16.7,22 0 0 1 66.7,22 A16.7,22 0 0 1 100,40 V78 A12.5,14 0 0 1 75,86 A12.5,14 0 0 1 50,86 A12.5,14 0 0 1 25,86 A12.5,14 0 0 1 0,78Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.mask-cloud    { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg fill='%23000'%3E%3Ccircle cx='28' cy='34' r='28'/%3E%3Ccircle cx='72' cy='30' r='28'/%3E%3Ccircle cx='30' cy='72' r='28'/%3E%3Ccircle cx='74' cy='70' r='26'/%3E%3Ccircle cx='50' cy='50' r='34'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg fill='%23000'%3E%3Ccircle cx='28' cy='34' r='28'/%3E%3Ccircle cx='72' cy='30' r='28'/%3E%3Ccircle cx='30' cy='72' r='28'/%3E%3Ccircle cx='74' cy='70' r='26'/%3E%3Ccircle cx='50' cy='50' r='34'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.mask-bow      { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M20,0 H80 Q100,0 100,20 V35 Q92,50 100,65 V80 Q100,100 80,100 H20 Q0,100 0,80 V65 Q8,50 0,35 V20 Q0,0 20,0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M20,0 H80 Q100,0 100,20 V35 Q92,50 100,65 V80 Q100,100 80,100 H20 Q0,100 0,80 V65 Q8,50 0,35 V20 Q0,0 20,0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.mask-squircle { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M50,0 C90,0 100,10 100,50 C100,90 90,100 50,100 C10,100 0,90 0,50 C0,10 10,0 50,0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M50,0 C90,0 100,10 100,50 C100,90 90,100 50,100 C10,100 0,90 0,50 C0,10 10,0 50,0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }

/* small floating decorations */
.deco { position: absolute; pointer-events: none; z-index: 1; }
.deco--sparkle { width: 44px; height: 44px; }
.deco--flower { width: 56px; height: 56px; }

/* ---------- HOME: hero ---------- */
.hero {
  position: relative; padding: 8px var(--gutter) clamp(28px, 4vw, 56px); overflow: hidden;
}
.hero__stage {
  position: relative; max-width: 1180px; margin-inline: auto; aspect-ratio: 1180 / 640;
}
.badge { position: absolute; display: block; }
.badge svg { width: 100%; height: auto; overflow: visible; }
.badge--beat { width: 40%; left: 4%; top: 6%; }
.badge--bet  { width: 25%; left: 43%; top: 2%; }
.badge--win  { width: 21%; left: 45%; top: 44%; }
.badge-word { font-family: var(--font-brand); font-weight: 900; font-style: italic; }
.badge-tag { font-family: var(--font-brand); font-weight: 800; font-style: italic; }

.hero__pitch {
  position: absolute; right: 0; bottom: 0; width: 34%; aspect-ratio: 1;
  display: grid; place-items: center; text-align: center;
  color: var(--paper); padding: 11%;
}
.hero__pitch::before {
  content: ""; position: absolute; inset: 0; background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M100,50 L99.8,51.6 L99.3,53.1 L98.6,54.6 L97.5,56 L96.3,57.3 L95,58.6 L93.6,59.7 L92.2,60.8 L90.9,61.9 L89.8,62.9 L88.9,64 L88.2,65.1 L87.7,66.3 L87.4,67.6 L87.3,69 L87.4,70.5 L87.5,72.2 L87.7,73.9 L87.9,75.7 L87.9,77.6 L87.9,79.4 L87.6,81.1 L87.1,82.7 L86.3,84.1 L85.4,85.4 L84.1,86.3 L82.7,87.1 L81.1,87.6 L79.4,87.9 L77.6,87.9 L75.7,87.9 L73.9,87.7 L72.2,87.5 L70.5,87.4 L69,87.3 L67.6,87.4 L66.3,87.7 L65.1,88.2 L64,88.9 L62.9,89.8 L61.9,90.9 L60.8,92.2 L59.7,93.6 L58.6,95 L57.3,96.3 L56,97.5 L54.6,98.6 L53.1,99.3 L51.6,99.8 L50,100 L48.4,99.8 L46.9,99.3 L45.4,98.6 L44,97.5 L42.7,96.3 L41.4,95 L40.3,93.6 L39.2,92.2 L38.1,90.9 L37.1,89.8 L36,88.9 L34.9,88.2 L33.7,87.7 L32.4,87.4 L31,87.3 L29.5,87.4 L27.8,87.5 L26.1,87.7 L24.3,87.9 L22.4,87.9 L20.6,87.9 L18.9,87.6 L17.3,87.1 L15.9,86.3 L14.6,85.4 L13.7,84.1 L12.9,82.7 L12.4,81.1 L12.1,79.4 L12.1,77.6 L12.1,75.7 L12.3,73.9 L12.5,72.2 L12.6,70.5 L12.7,69 L12.6,67.6 L12.3,66.3 L11.8,65.1 L11.1,64 L10.2,62.9 L9.1,61.9 L7.8,60.8 L6.4,59.7 L5,58.6 L3.7,57.3 L2.5,56 L1.4,54.6 L0.7,53.1 L0.2,51.6 L0,50 L0.2,48.4 L0.7,46.9 L1.4,45.4 L2.5,44 L3.7,42.7 L5,41.4 L6.4,40.3 L7.8,39.2 L9.1,38.1 L10.2,37.1 L11.1,36 L11.8,34.9 L12.3,33.7 L12.6,32.4 L12.7,31 L12.6,29.5 L12.5,27.8 L12.3,26.1 L12.1,24.3 L12.1,22.4 L12.1,20.6 L12.4,18.9 L12.9,17.3 L13.7,15.9 L14.6,14.6 L15.9,13.7 L17.3,12.9 L18.9,12.4 L20.6,12.1 L22.4,12.1 L24.3,12.1 L26.1,12.3 L27.8,12.5 L29.5,12.6 L31,12.7 L32.4,12.6 L33.7,12.3 L34.9,11.8 L36,11.1 L37.1,10.2 L38.1,9.1 L39.2,7.8 L40.3,6.4 L41.4,5 L42.7,3.7 L44,2.5 L45.4,1.4 L46.9,0.7 L48.4,0.2 L50,0 L51.6,0.2 L53.1,0.7 L54.6,1.4 L56,2.5 L57.3,3.7 L58.6,5 L59.7,6.4 L60.8,7.8 L61.9,9.1 L62.9,10.2 L64,11.1 L65.1,11.8 L66.3,12.3 L67.6,12.6 L69,12.7 L70.5,12.6 L72.2,12.5 L73.9,12.3 L75.7,12.1 L77.6,12.1 L79.4,12.1 L81.1,12.4 L82.7,12.9 L84.1,13.7 L85.4,14.6 L86.3,15.9 L87.1,17.3 L87.6,18.9 L87.9,20.6 L87.9,22.4 L87.9,24.3 L87.7,26.1 L87.5,27.8 L87.4,29.5 L87.3,31 L87.4,32.4 L87.7,33.7 L88.2,34.9 L88.9,36 L89.8,37.1 L90.9,38.1 L92.2,39.2 L93.6,40.3 L95,41.4 L96.3,42.7 L97.5,44 L98.6,45.4 L99.3,46.9 L99.8,48.4Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M100,50 L99.8,51.6 L99.3,53.1 L98.6,54.6 L97.5,56 L96.3,57.3 L95,58.6 L93.6,59.7 L92.2,60.8 L90.9,61.9 L89.8,62.9 L88.9,64 L88.2,65.1 L87.7,66.3 L87.4,67.6 L87.3,69 L87.4,70.5 L87.5,72.2 L87.7,73.9 L87.9,75.7 L87.9,77.6 L87.9,79.4 L87.6,81.1 L87.1,82.7 L86.3,84.1 L85.4,85.4 L84.1,86.3 L82.7,87.1 L81.1,87.6 L79.4,87.9 L77.6,87.9 L75.7,87.9 L73.9,87.7 L72.2,87.5 L70.5,87.4 L69,87.3 L67.6,87.4 L66.3,87.7 L65.1,88.2 L64,88.9 L62.9,89.8 L61.9,90.9 L60.8,92.2 L59.7,93.6 L58.6,95 L57.3,96.3 L56,97.5 L54.6,98.6 L53.1,99.3 L51.6,99.8 L50,100 L48.4,99.8 L46.9,99.3 L45.4,98.6 L44,97.5 L42.7,96.3 L41.4,95 L40.3,93.6 L39.2,92.2 L38.1,90.9 L37.1,89.8 L36,88.9 L34.9,88.2 L33.7,87.7 L32.4,87.4 L31,87.3 L29.5,87.4 L27.8,87.5 L26.1,87.7 L24.3,87.9 L22.4,87.9 L20.6,87.9 L18.9,87.6 L17.3,87.1 L15.9,86.3 L14.6,85.4 L13.7,84.1 L12.9,82.7 L12.4,81.1 L12.1,79.4 L12.1,77.6 L12.1,75.7 L12.3,73.9 L12.5,72.2 L12.6,70.5 L12.7,69 L12.6,67.6 L12.3,66.3 L11.8,65.1 L11.1,64 L10.2,62.9 L9.1,61.9 L7.8,60.8 L6.4,59.7 L5,58.6 L3.7,57.3 L2.5,56 L1.4,54.6 L0.7,53.1 L0.2,51.6 L0,50 L0.2,48.4 L0.7,46.9 L1.4,45.4 L2.5,44 L3.7,42.7 L5,41.4 L6.4,40.3 L7.8,39.2 L9.1,38.1 L10.2,37.1 L11.1,36 L11.8,34.9 L12.3,33.7 L12.6,32.4 L12.7,31 L12.6,29.5 L12.5,27.8 L12.3,26.1 L12.1,24.3 L12.1,22.4 L12.1,20.6 L12.4,18.9 L12.9,17.3 L13.7,15.9 L14.6,14.6 L15.9,13.7 L17.3,12.9 L18.9,12.4 L20.6,12.1 L22.4,12.1 L24.3,12.1 L26.1,12.3 L27.8,12.5 L29.5,12.6 L31,12.7 L32.4,12.6 L33.7,12.3 L34.9,11.8 L36,11.1 L37.1,10.2 L38.1,9.1 L39.2,7.8 L40.3,6.4 L41.4,5 L42.7,3.7 L44,2.5 L45.4,1.4 L46.9,0.7 L48.4,0.2 L50,0 L51.6,0.2 L53.1,0.7 L54.6,1.4 L56,2.5 L57.3,3.7 L58.6,5 L59.7,6.4 L60.8,7.8 L61.9,9.1 L62.9,10.2 L64,11.1 L65.1,11.8 L66.3,12.3 L67.6,12.6 L69,12.7 L70.5,12.6 L72.2,12.5 L73.9,12.3 L75.7,12.1 L77.6,12.1 L79.4,12.1 L81.1,12.4 L82.7,12.9 L84.1,13.7 L85.4,14.6 L86.3,15.9 L87.1,17.3 L87.6,18.9 L87.9,20.6 L87.9,22.4 L87.9,24.3 L87.7,26.1 L87.5,27.8 L87.4,29.5 L87.3,31 L87.4,32.4 L87.7,33.7 L88.2,34.9 L88.9,36 L89.8,37.1 L90.9,38.1 L92.2,39.2 L93.6,40.3 L95,41.4 L96.3,42.7 L97.5,44 L98.6,45.4 L99.3,46.9 L99.8,48.4Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.hero__pitch > div { position: relative; }
.hero__pitch h2 { font-family: var(--font-brand); font-weight: 900; font-style: italic; font-size: clamp(1.15rem, 1.9vw, 1.6rem); line-height: 1.05; letter-spacing: 0; margin-bottom: 10px; color: var(--volt); }
.hero__pitch p { font-size: clamp(.8rem, 1vw, .95rem); line-height: 1.45; color: #e9eee8; margin-bottom: 14px; max-width: 26ch; margin-inline: auto; }
.hero__watch {
  position: absolute; left: 30%; bottom: 8%;
  display: inline-flex; align-items: center; gap: 12px;
  font-weight: 600; text-decoration: none; background: none; border: 0; cursor: pointer; padding: 6px;
}
.hero__watch .play {
  width: 54px; height: 54px; border-radius: 50%; background: var(--ink); color: var(--volt);
  display: grid; place-items: center; box-shadow: 0 4px 0 var(--depth);
  transition: transform .15s ease;
}
.hero__watch:hover .play { transform: scale(1.08); }
.hero__bubble { position: absolute; width: 76px; }
.hero__squiggle { position: absolute; }

/* load-in: the one orchestrated moment */
@media (prefers-reduced-motion: no-preference) {
  .badge, .hero__pitch, .hero__bubble { animation: pop .7s cubic-bezier(.2, 1.4, .4, 1) both; }
  .badge--bet { animation-delay: .12s; }
  .badge--win { animation-delay: .24s; }
  .hero__pitch { animation-delay: .36s; }
  .hero__bubble { animation-delay: .5s; }
  .camo { animation: drift 40s linear infinite; transform-origin: 200px 200px; }
  .badge--bet .camo { animation-duration: 32s; animation-direction: reverse; }
  .badge--win .camo { animation-duration: 26s; }
}
@keyframes pop { from { opacity: 0; transform: scale(.7) rotate(-6deg); } to { opacity: 1; transform: none; } }
@keyframes drift { to { transform: rotate(360deg); } }

@media (max-width: 860px) {
  .hero { min-height: 0; }
  .hero__stage { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding-top: 8px; }
  .badge, .hero__pitch, .hero__watch { position: relative; inset: auto; width: auto; }
  .badge--beat { grid-column: 1 / -1; width: 78%; justify-self: center; }
  .badge--bet, .badge--win { width: 100%; }
  .hero__pitch { grid-column: 1 / -1; width: min(100%, 420px); justify-self: center; padding: 15%; }
  .hero__pitch p { font-size: .92rem; }
  .hero__watch { grid-column: 1 / -1; justify-self: center; }
  .hero__bubble, .hero__squiggle { display: none; }
}

/* ---------- section heading rows ---------- */
.head-row { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px 64px; align-items: end; margin-bottom: 44px; }
.head-row .h2 { grid-column: 1 / -1; }
.head-row p { color: var(--muted); max-width: 52ch; margin: 0; }
@media (max-width: 760px) { .head-row { grid-template-columns: 1fr; } }

/* ---------- game cards ---------- */
.carousel { position: relative; }
.carousel__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, calc((100% - 3 * 20px) / 3.4));
  gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px;
  scrollbar-width: thin;
}
.carousel__track > * { scroll-snap-align: start; }
.carousel__nav { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.icon-btn {
  width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--ink); background: var(--paper);
  display: grid; place-items: center; cursor: pointer; box-shadow: 0 3px 0 var(--ink);
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.icon-btn:hover { background: var(--volt); }
.icon-btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
.icon-btn svg { width: 18px; height: 18px; }

.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 22px; }
.game {
  background: var(--mist); border-radius: var(--radius-card); padding: 16px 16px 18px;
  display: flex; flex-direction: column;
}
.game__art { padding: 6px 6px 14px; }
.game__art .shape { background: transparent; }
.game__title { font-size: 1.45rem; font-weight: 500; letter-spacing: -.02em; }
.game__desc { font-size: .9rem; color: var(--muted); margin: 6px 0 16px; }
.game__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
.tags li { font-size: .75rem; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: var(--paper); border: 1.5px solid var(--ink); }
.tags li.is-hot { background: var(--ink); color: var(--volt); }
.game .tags { margin-bottom: 16px; }
.tags li.link { padding: 0; }
.tags li.link a { display: block; padding: 4px 10px; border-radius: 999px; text-decoration: none; transition: background-color .15s ease; }
.tags li.link a:hover { background: var(--volt); }
.game__foot { justify-content: flex-end; }
.carousel__cta { margin-right: auto; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.carousel__cta > a:not(.btn) { font-weight: 600; text-underline-offset: 4px; }
.demo-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap;
  background: var(--lime); border: 2px solid var(--ink); border-radius: var(--radius-card); padding: 18px 22px; margin-bottom: clamp(36px, 5vw, 56px); }
.demo-bar p { margin: 0; max-width: 62ch; }
.game-group + .game-group { margin-top: clamp(48px, 6vw, 80px); }
.group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 22px; border-bottom: 2px solid var(--ink); }
.group-head span { color: var(--muted); font-size: .92rem; }

/* ---------- features (why us) ---------- */
.features { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.feature { background: linear-gradient(180deg, var(--mist), var(--paper) 90%); border-radius: var(--radius-card); padding: 18px 18px 26px; }
.feature img { width: 78%; margin: 0 auto 18px; aspect-ratio: 1; }
.feature h3 { font-size: 1.3rem; font-weight: 500; margin-bottom: 8px; }
.feature p { font-size: .9rem; color: var(--muted); margin: 0; }
@media (max-width: 1100px) { .features { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .features { grid-template-columns: repeat(2, 1fr); } .feature img { width: 90%; } }
@media (max-width: 420px) { .features { grid-template-columns: 1fr; } .feature img { width: 62%; } }

/* ---------- commercial ---------- */
.intro-center { text-align: center; padding-top: 10px; position: relative; }
.intro-center .kicker { font-size: .95rem; color: var(--muted); margin-bottom: 10px; }
.intro-center .page-title { padding-top: 0; padding-bottom: 28px; }
.cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; text-align: left; max-width: 1180px; margin: 0 auto; }
.cols-3 p { color: var(--muted); margin: 0; }
@media (max-width: 760px) { .cols-3 { grid-template-columns: 1fr; gap: 16px; } }
.cta-line { display: flex; justify-content: center; align-items: center; gap: 28px; margin-top: 44px; position: relative; min-height: 120px; }
.cta-line img.bub { width: 64px; }
.cta-line .sq { position: absolute; width: 200px; opacity: .9; }

.media-card { border-radius: var(--radius-card); overflow: hidden; border: 2px solid var(--ink); box-shadow: 0 6px 0 var(--ink); background: var(--ink); }
.media-card img { width: 100%; height: auto; }

/* lobby mockup */
.lobby { background: #070d07; color: #e8f5e4; border-radius: var(--radius-card); border: 2px solid var(--ink); box-shadow: 0 6px 0 var(--ink); overflow: hidden; font-size: 12px; }
.lobby__top { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: linear-gradient(90deg, #0f2a10, #070d07); }
.lobby__top img { height: 26px; width: auto; }
.lobby__bal { font-weight: 600; color: var(--volt); }
.lobby__hero { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 12px; padding: 16px 18px; background: radial-gradient(circle at 80% 50%, rgba(62,234,20,.35), transparent 60%); }
.lobby__hero h4 { font-family: var(--font-brand); font-style: italic; font-weight: 900; font-size: 20px; letter-spacing: 0; color: var(--paper); margin-bottom: 4px; }
.lobby__hero p { margin: 0 0 10px; opacity: .75; }
.lobby__hero img { width: 100%; max-width: 150px; justify-self: end; border-radius: 16px; }
.lobby__tabs { display: flex; gap: 6px; padding: 0 18px 12px; overflow: hidden; }
.lobby__tabs span { padding: 6px 10px; border-radius: 999px; background: #142414; white-space: nowrap; }
.lobby__tabs span.on { background: var(--volt); color: var(--ink); font-weight: 600; }
.lobby__label { padding: 0 18px 8px; font-weight: 600; letter-spacing: .02em; opacity: .7; }
.lobby__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 0 18px 18px; }
.lobby__grid figure { margin: 0; background: #142414; border-radius: 12px; overflow: hidden; }
.lobby__grid img { aspect-ratio: 1; width: 100%; object-fit: cover; }
.lobby__grid figcaption { padding: 6px 8px; display: grid; gap: 1px; }
.lobby__grid figcaption b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lobby__grid figcaption span { color: var(--volt); white-space: nowrap; }
@media (max-width: 520px) { .lobby__grid { grid-template-columns: repeat(2, 1fr); } }

.sidebet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sidebet-grid img { width: 100%; aspect-ratio: 1; }

.center-cta { text-align: center; }
.center-cta .h2 { max-width: 22ch; margin: 0 auto 20px; }
.center-cta p { max-width: 52ch; margin: 0 auto 28px; color: var(--muted); }

/* ---------- leaderboard mockup ---------- */
.board { background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius-card); box-shadow: 0 6px 0 var(--ink); overflow: hidden; }
.board__head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: var(--ink); color: var(--paper); }
.board__head b { font-family: var(--font-brand); font-style: italic; font-weight: 900; font-size: 1.15rem; color: var(--volt); }
.board__head span { font-size: .85rem; opacity: .8; }
.board table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.board th, .board td { padding: 12px 20px; text-align: left; border-bottom: 1px solid var(--line); }
.board th { font-size: .78rem; font-weight: 600; color: var(--muted); }
.board td:last-child, .board th:last-child { text-align: right; }
.board tr.me td { background: var(--lime); font-weight: 600; }
.board .rank { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--mist); font-weight: 700; font-size: .85rem; }
.board tr:nth-child(1) .rank { background: var(--volt); }

/* ---------- loot / feature cards ---------- */
.mark-card { background: var(--ink); border-radius: var(--radius-card); display: grid; place-items: center; aspect-ratio: 16 / 10; border: 2px solid var(--ink); box-shadow: 0 6px 0 var(--depth); }
.mark-card img { width: 46%; }

/* ---------- news ---------- */
.news-list { list-style: none; margin: 0; padding: 0; max-width: 1000px; }
.news-item { display: grid; grid-template-columns: 1fr 260px; gap: 20px 48px; padding: 30px 0; border-bottom: 1px solid var(--line); align-items: start; }
.news-item:first-child { padding-top: 0; }
.news-item time { font-size: .85rem; color: var(--muted); }
.news-item h2 { font-size: 1.45rem; font-weight: 500; line-height: 1.25; margin: 6px 0 10px; letter-spacing: -.015em; }
.news-item h2 a { text-decoration: none; }
.news-item h2 a::after { content: ""; position: absolute; inset: 0; }
.news-item { position: relative; }
.news-item:hover h2 { text-decoration: underline; text-underline-offset: 4px; }
.news-item p { color: var(--muted); margin: 0; font-size: .95rem; max-width: 62ch; }
.news-item img { border-radius: 14px; aspect-ratio: 16 / 9; width: 100%; object-fit: cover; border: 2px solid var(--ink); }
@media (max-width: 700px) { .news-item { grid-template-columns: 1fr; } .news-item img { order: -1; } }

/* ---------- contact ---------- */
.contact { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }
.form { display: grid; gap: 18px; background: var(--mist); padding: clamp(20px, 3vw, 36px); border-radius: var(--radius-card); }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .form .row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: .9rem; }
.field input, .field select, .field textarea {
  font: inherit; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--ink); background: var(--paper); color: var(--ink);
  width: 100%;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; box-shadow: 0 0 0 4px var(--volt); }
.field .hint { font-size: .8rem; color: var(--muted); }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: #c4122f; }
.field .err { color: #c4122f; font-size: .85rem; display: none; }
.field.has-error .err { display: block; }
.form-done { display: none; background: var(--lime); border: 2px solid var(--ink); border-radius: var(--radius-card); padding: 28px; }
.form-done h2 { font-size: var(--step-3); margin-bottom: 10px; }
.contact-points { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
.contact-points li { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: center; }
.contact-points img { width: 52px; }
.contact-points b { display: block; }
.contact-points span { color: var(--muted); font-size: .92rem; }
.contact-points a { color: var(--ink); font-weight: 600; }

/* ---------- footer ---------- */
.footer-top { display: grid; grid-template-columns: auto 1fr; gap: 24px 40px; align-items: center; padding-block: 44px; border-bottom: 1px solid var(--line); }
.footer-top .logo img { width: 260px; height: auto; }
.footer-top .tagline { text-align: right; font-size: 1.05rem; font-weight: 500; margin: 0; }
.footer-cols { display: grid; grid-template-columns: repeat(3, auto); gap: 8px 40px; justify-content: end; margin-top: 16px; list-style: none; padding: 0; font-size: .9rem; }
.footer-cols a { text-decoration: none; color: var(--muted); }
.footer-cols a:hover { color: var(--ink); text-decoration: underline; }
.footer-legal { display: grid; grid-template-columns: 1fr auto; gap: 24px; padding-block: 36px 44px; font-size: .8rem; color: var(--muted); }
.footer-legal p { max-width: 70ch; margin: 0 0 .6em; }
.footer-legal a { color: var(--ink); }
.age { display: inline-flex; align-items: center; gap: 10px; font-size: .85rem; color: var(--ink); text-decoration: none; align-self: start; }
.age b { width: 38px; height: 38px; border-radius: 50%; border: 2.5px solid var(--ink); display: grid; place-items: center; font-size: .82rem; font-weight: 800; }
@media (max-width: 860px) {
  .footer-top { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .footer-top .tagline { text-align: center; }
  .footer-cols { justify-content: center; }
  .footer-cols { grid-template-columns: repeat(2, auto); }
  .footer-legal { grid-template-columns: 1fr; }
}

.giant {
  display: block; text-decoration: none; color: var(--frame-ink);
  font-family: var(--font-brand); font-weight: 900; font-style: italic;
  font-size: 8vw; line-height: .9; letter-spacing: -.01em;
  text-align: center; white-space: nowrap; padding: clamp(18px, 3vw, 40px) 0 clamp(22px, 3.5vw, 48px);
  overflow: hidden;
}
.giant span { display: inline-block; transition: transform .25s cubic-bezier(.2, 1.4, .4, 1); }
.giant:hover span { transform: translateY(-6px) rotate(-1.5deg); }
.giant small { display: block; font-family: var(--font-body); font-style: normal; font-weight: 500; font-size: .95rem; letter-spacing: 0; margin-top: 10px; }

/* ---------- video modal ---------- */
.modal { position: fixed; inset: 0; z-index: 80; display: none; place-items: center; background: rgba(0,0,0,.82); padding: 20px; }
.modal[data-open] { display: grid; }
.modal__box { width: min(960px, 100%); position: relative; }
.modal__box video, .modal__ph { width: 100%; aspect-ratio: 16 / 9; border-radius: 18px; background: var(--night); border: 2px solid var(--volt); }
.modal__ph { display: grid; place-items: center; color: var(--lime); text-align: center; padding: 24px; }
.modal__close { position: absolute; top: -56px; right: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}