@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Pixelify+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --night: #070b1c;
  --navy: #0b1a3c;
  --panel: #0e2148;
  --panel-deep: #08142e;
  --ink: #e9f8ff;
  --muted: #a8c3de;
  --cyan: #69e4ff;
  --lime: #aefa7c;
  --coral: #ff7a5c;
  --gold: #ffe36d;
  --jade: #72d8ad;
  --line: rgba(105, 228, 255, .36);
  --mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Space Grotesk', system-ui, sans-serif;
  --display: 'Space Grotesk', system-ui, sans-serif;
  --pixel: 'Pixelify Sans', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background-color: var(--night);
  background-image:
    radial-gradient(circle at 15% 8%, rgba(105, 228, 255, .16), transparent 26%),
    radial-gradient(circle at 85% 24%, rgba(255, 122, 92, .14), transparent 24%),
    linear-gradient(rgba(70, 133, 190, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70, 133, 190, .09) 1px, transparent 1px);
  background-size: auto, auto, 26px 26px, 26px 26px;
  color: var(--ink);
  font-family: var(--sans);
  margin: 0;
}

a { color: inherit; text-decoration: none; }
p, h1, h2, h3 { margin-top: 0; }
.page { overflow: hidden; }
.wrap { margin: 0 auto; max-width: 1120px; width: min(100% - 48px, 1120px); }

.site-header {
  align-items: center;
  background: rgba(8, 18, 43, .94);
  border: 3px solid #2b5995;
  box-shadow: 6px 6px 0 var(--coral);
  display: flex;
  justify-content: space-between;
  margin-top: 22px;
  padding: 14px 18px;
  position: relative;
  z-index: 2;
}
.brand { align-items: center; display: inline-flex; font-family: var(--pixel); font-size: 20px; font-weight: 700; gap: 10px; letter-spacing: -.04em; }
.brand-mark { background: #061127; border: 2px solid var(--cyan); box-shadow: 3px 3px 0 #132a58; display: inline-flex; height: 32px; overflow: hidden; width: 32px; }
.brand-mark img { height: 100%; image-rendering: pixelated; object-fit: cover; width: 100%; }
.brand-accent { color: var(--lime); }
.site-nav { display: flex; gap: 6px; }
.site-nav a { color: var(--ink); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .06em; padding: 7px 9px; text-transform: uppercase; }
.site-nav a:hover { background: var(--lime); box-shadow: 2px 2px 0 #020613; color: var(--night); }
.language-switch { align-items: center; border: 2px solid #285c9a; display: inline-flex; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .06em; margin-left: auto; overflow: hidden; text-transform: uppercase; }
.language-switch a { color: var(--muted); padding: 7px 9px; }
.language-switch a:hover, .language-switch a[aria-current='true'] { background: var(--lime); color: var(--night); }
.header-cta, .button {
  align-items: center;
  border: 2px solid #153b70;
  box-shadow: 4px 4px 0 #020613;
  display: inline-flex;
  font-family: var(--pixel);
  font-size: 13px;
  gap: 10px;
  justify-content: center;
  padding: 11px 14px;
  transition: box-shadow .15s ease, transform .15s ease;
}
.header-cta { background: var(--lime); color: var(--night); }
.button { background: var(--cyan); color: var(--night); }
.button.alt { background: transparent; border-color: var(--cyan); color: var(--ink); }
.header-cta:hover, .button:hover { box-shadow: 1px 1px 0 #020613; transform: translate(3px, 3px); }

.hero { display: grid; gap: 52px; grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr); min-height: 650px; padding: 92px 0 84px; }
.eyebrow { align-items: center; color: #9ccfea; display: flex; font-family: var(--mono); font-size: 10px; font-weight: 700; gap: 9px; letter-spacing: .11em; margin-bottom: 24px; text-transform: uppercase; }
.eyebrow i { background: var(--coral); box-shadow: 2px 2px 0 #173c78; display: block; height: 8px; width: 8px; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -.06em; }
h1 { font-size: clamp(56px, 8vw, 98px); line-height: .88; margin-bottom: 33px; }
h1 em, h2 em { color: var(--lime); font-style: normal; text-shadow: 2px 2px 0 #183b70; }
.hero-copy > p:not(.eyebrow) { color: var(--muted); font-size: 17px; line-height: 1.7; max-width: 555px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 34px; }
.text-link { border-bottom: 2px solid var(--cyan); font-family: var(--mono); font-size: 11px; font-weight: 700; padding-bottom: 5px; }
.text-link:hover { border-color: var(--coral); color: var(--coral); }

.hero-tile-stack { align-self: center; height: 420px; position: relative; }
.tile { background: linear-gradient(135deg, #122e64, #07142d 72%); border: 4px solid var(--gold); box-shadow: 8px 8px 0 #020613; height: 250px; position: absolute; width: 190px; }
.tile::after { border: 2px solid rgba(105, 228, 255, .65); content: ''; inset: 12px; position: absolute; }
.tile-one { left: 14%; top: 75px; transform: rotate(-12deg); }.tile-two { left: 45%; top: 8px; transform: rotate(9deg); }.tile-three { left: 37%; top: 164px; transform: rotate(2deg); }
.tile-lotus { color: var(--coral); font-family: var(--pixel); font-size: 92px; left: 0; line-height: 1; position: absolute; text-align: center; top: 75px; width: 100%; z-index: 1; }
.tile-symbol { color: var(--jade); font-family: var(--pixel); font-size: 105px; left: 0; line-height: 1; position: absolute; text-align: center; top: 61px; width: 100%; z-index: 1; }
.tile-number { color: var(--gold); font-family: var(--pixel); font-size: 95px; left: 0; line-height: 1; position: absolute; text-align: center; top: 72px; width: 100%; z-index: 1; }
.tile-label { bottom: 25px; color: var(--cyan); font-family: var(--mono); font-size: 9px; font-weight: 700; left: 0; letter-spacing: .13em; position: absolute; text-align: center; text-transform: uppercase; width: 100%; z-index: 1; }

.signal-bar { background: #0a1937; border-bottom: 3px solid #2a609b; border-top: 3px solid #2a609b; color: var(--lime); overflow: hidden; }
.signal-bar div { font-family: var(--pixel); font-size: 16px; letter-spacing: .04em; padding: 14px 0; text-align: center; }.signal-bar span { color: var(--cyan); margin: 0 19px; }
.section { padding: 105px 0; }.section-heading { display: grid; gap: 36px; grid-template-columns: minmax(0, 1fr) 330px; margin-bottom: 42px; }h2 { font-size: clamp(45px, 6vw, 76px); line-height: .92; margin-bottom: 0; }.section-lead { border-left: 3px solid var(--cyan); color: var(--muted); font-size: 14px; line-height: 1.7; margin: 37px 0 0; padding-left: 15px; }
.feature-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }.feature { background: linear-gradient(145deg, rgba(18, 46, 100, .94), rgba(8, 20, 46, .96)); border: 3px solid #27548e; box-shadow: 6px 6px 0 #020613; min-height: 245px; padding: 24px; }.feature-index { color: var(--coral); font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .1em; }.feature h3 { font-size: 28px; line-height: .9; margin: 34px 0 13px; }.feature p { color: var(--muted); font-size: 13px; line-height: 1.7; margin-bottom: 0; }
.play-layout { display: grid; gap: 44px; grid-template-columns: .9fr 1.1fr; }.play-visual { background: radial-gradient(circle at 50% 30%, rgba(255, 227, 109, .22), transparent 38%), #0a1835; border: 4px solid var(--cyan); box-shadow: 8px 8px 0 var(--coral); min-height: 500px; padding: 34px; position: relative; }.play-visual::before { background-image: linear-gradient(rgba(105, 228, 255, .13) 1px, transparent 1px), linear-gradient(90deg, rgba(105, 228, 255, .13) 1px, transparent 1px); background-size: 24px 24px; content: ''; inset: 0; position: absolute; }.play-visual > * { position: relative; z-index: 1; }.mini-label { color: var(--cyan); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .12em; }.mini-board { display: grid; gap: 10px; grid-template-columns: repeat(4, 1fr); margin: 64px auto 0; max-width: 300px; transform: rotate(-4deg); }.mini-tile { align-items: center; background: linear-gradient(135deg, #24110e, #080b15); border: 2px solid var(--gold); box-shadow: 3px 3px 0 #020613; color: var(--coral); display: flex; font-family: var(--pixel); font-size: 32px; height: 68px; justify-content: center; }.mini-tile:nth-child(2n) { color: var(--jade); }.mini-tile:nth-child(3n) { color: var(--gold); }.mini-tray { background: rgba(2, 6, 19, .82); border: 2px solid var(--lime); bottom: 34px; color: var(--lime); font-family: var(--mono); font-size: 10px; left: 34px; letter-spacing: .09em; padding: 16px; position: absolute; right: 34px; text-transform: uppercase; }
.steps { counter-reset: how; display: grid; gap: 19px; padding-top: 8px; }.step { border-bottom: 1px solid var(--line); display: grid; gap: 20px; grid-template-columns: 48px 1fr; padding: 0 0 20px; }.step::before { color: var(--lime); content: '0' counter(how); counter-increment: how; font-family: var(--pixel); font-size: 27px; }.step h3 { font-size: 27px; line-height: .9; margin-bottom: 10px; }.step p { color: var(--muted); font-size: 14px; line-height: 1.7; margin-bottom: 0; }
.faq-grid { display: grid; gap: 15px; grid-template-columns: repeat(2, 1fr); }details { background: rgba(11, 29, 65, .92); border: 2px solid #28588f; box-shadow: 4px 4px 0 #020613; padding: 20px 22px; }summary { color: var(--ink); cursor: pointer; font-family: var(--display); font-size: 20px; font-weight: 700; line-height: 1.1; list-style: none; padding-right: 26px; position: relative; }summary::-webkit-details-marker { display: none; }summary::after { color: var(--lime); content: '+'; font-family: var(--mono); font-size: 28px; position: absolute; right: 0; top: -5px; }details[open] summary::after { content: '–'; }details p { color: var(--muted); font-size: 13px; line-height: 1.7; margin: 18px 0 0; }
.privacy-card { background: radial-gradient(circle at 88% 18%, rgba(174, 250, 124, .15), transparent 24%), linear-gradient(145deg, #112b60, #08142e); border: 4px solid var(--cyan); box-shadow: 8px 8px 0 var(--coral); display: grid; gap: 40px; grid-template-columns: 1.1fr .9fr; padding: 48px; }.privacy-card h2 { margin-bottom: 22px; }.privacy-card p { color: var(--muted); font-size: 14px; line-height: 1.75; max-width: 550px; }.privacy-list { display: grid; gap: 12px; margin: 0; padding: 0; }.privacy-list li { background: rgba(4, 12, 29, .65); border-left: 4px solid var(--lime); color: var(--ink); font-family: var(--mono); font-size: 11px; font-weight: 700; list-style: none; padding: 13px; text-transform: uppercase; }
.site-footer { align-items: center; border-top: 3px solid #285b97; display: flex; justify-content: space-between; margin-top: 8px; padding: 28px 0 38px; }.site-footer p { color: #91afd0; font-family: var(--mono); font-size: 9px; letter-spacing: .06em; margin-bottom: 0; text-transform: uppercase; }.footer-links { display: flex; gap: 13px; }.footer-links a { color: var(--ink); font-family: var(--mono); font-size: 10px; font-weight: 700; text-transform: uppercase; }.footer-links a:hover { color: var(--lime); }
.privacy-page .policy-hero { padding: 92px 0 56px; }.privacy-page h1 { font-size: clamp(54px, 7vw, 88px); }.privacy-page .policy-intro { color: var(--muted); font-size: 16px; line-height: 1.7; max-width: 670px; }.policy { background: rgba(8, 21, 47, .95); border: 3px solid #28568e; box-shadow: 8px 8px 0 #020613; margin: 20px auto 92px; max-width: 850px; padding: clamp(28px, 6vw, 62px); }.policy h2 { color: var(--lime); font-size: 38px; line-height: .9; margin: 42px 0 15px; }.policy h2:first-of-type { margin-top: 32px; }.policy p { color: var(--muted); font-size: 15px; line-height: 1.8; }.policy strong { color: var(--ink); }.policy a { border-bottom: 1px solid var(--cyan); color: var(--cyan); }.policy-meta { color: var(--cyan) !important; font-family: var(--mono); font-size: 11px !important; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }

@media (max-width: 820px) {
  .wrap { width: min(100% - 32px, 640px); }.site-header { flex-wrap: wrap; gap: 15px; padding: 13px; }.site-nav { order: 3; width: 100%; }.language-switch { margin-left: auto; }.header-cta { margin-left: 0; }.hero { grid-template-columns: 1fr; min-height: auto; padding: 68px 0 76px; }.hero-tile-stack { height: 360px; margin: 0 auto; max-width: 450px; width: 100%; }.tile { height: 220px; width: 165px; }.tile-lotus, .tile-number { font-size: 78px; }.tile-symbol { font-size: 90px; }.tile-one { left: 12%; }.tile-two { left: 47%; }.tile-three { left: 36%; top: 140px; }.section { padding: 78px 0; }.section-heading, .play-layout, .privacy-card { grid-template-columns: 1fr; }.section-heading { gap: 0; }.section-lead { margin-top: 28px; max-width: 500px; }.feature-grid, .faq-grid { grid-template-columns: 1fr; }.play-visual { min-height: 440px; }.privacy-card { gap: 30px; padding: 34px 28px; }.site-footer { align-items: flex-start; flex-direction: column; gap: 17px; }.footer-links { order: -1; }
}
@media (max-width: 520px) {
  .brand { font-size: 18px; }.site-nav { gap: 1px; }.site-nav a, .header-cta { font-size: 10px; }.header-cta { padding: 8px; }.hero-actions { align-items: flex-start; flex-direction: column; }.hero-tile-stack { height: 300px; }.tile { height: 180px; width: 137px; }.tile-one { left: 7%; top: 67px; }.tile-two { left: 48%; }.tile-three { left: 34%; top: 125px; }.tile-lotus { font-size: 63px; top: 52px; }.tile-symbol { font-size: 68px; top: 49px; }.tile-number { font-size: 65px; top: 55px; }.tile-label { bottom: 16px; font-size: 7px; }.play-visual { min-height: 390px; padding: 23px; }.mini-board { margin-top: 51px; }.mini-tile { font-size: 25px; height: 55px; }.mini-tray { bottom: 23px; left: 23px; right: 23px; }.policy { margin-bottom: 70px; }.policy h2 { font-size: 33px; }
}