:root {
  --surface:    #141218;
  --on-surface: #E6E1E5;
  --outline:    #938F99;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background:  var(--surface);
  color:       var(--on-surface);
  font-family: 'Roboto', sans-serif;
  font-size:   16px;
  line-height: 1.7;
}

/* ── Header ──────────────────────────────────────────────────────────────── */

header {
  border-bottom: 1px solid var(--outline);
  padding-top:    20px;
  padding-bottom: 20px;
  padding-left:   max(32px, calc((100% - 960px) / 2));
  padding-right:  max(32px, calc((100% - 960px) / 2));
  display: flex;
  align-items: center;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: inherit;
  flex: 1;
}

.tile {
  width:  48px;
  height: 48px;
  border: 3px solid var(--outline);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:   24px;
  font-weight: 900;
  flex-shrink: 0;
}

.site-title {
  font-size:      20px;
  font-weight:    900;
  letter-spacing: 4px;
}

/* ── Nav ─────────────────────────────────────────────────────────────────── */

nav {
  border-bottom: 1px solid var(--outline);
  padding-left:  max(32px, calc((100% - 960px) / 2));
  padding-right: max(32px, calc((100% - 960px) / 2));
  display: flex;
}

nav a {
  color:           var(--outline);
  text-decoration: none;
  font-size:       12px;
  font-weight:     700;
  letter-spacing:  1.5px;
  text-transform:  uppercase;
  padding: 12px 16px;
  border-bottom: 2px solid transparent;
  transition: color 150ms, border-color 150ms;
}

nav a:hover,
nav a.active {
  color: var(--on-surface);
  border-bottom-color: var(--on-surface);
}

/* ── Content ─────────────────────────────────────────────────────────────── */

main {
  max-width: 680px;
  margin:  48px auto;
  padding: 0 32px;
}

h1 {
  font-size:      13px;
  font-weight:    700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color:          var(--outline);
  margin-bottom:  32px;
}

h2 {
  font-size:      12px;
  font-weight:    700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color:          var(--outline);
  margin-top:     32px;
  margin-bottom:  10px;
}

p { margin-bottom: 12px; }

a { color: var(--on-surface); }

.meta {
  margin-top:  48px;
  padding-top: 24px;
  border-top:  1px solid var(--outline);
  font-size:   13px;
  color:       var(--outline);
}

/* ── Lang Toggle ─────────────────────────────────────────────────────────── */

.lang-toggle {
  display: flex;
  gap: 4px;
}

.lang-btn {
  background:  none;
  border:      1px solid var(--outline);
  color:       var(--outline);
  font-family: 'Roboto', sans-serif;
  font-size:   12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 5px 10px;
  cursor: pointer;
  transition: color 150ms, border-color 150ms;
}

.lang-btn:hover,
.lang-btn.active {
  color:         var(--on-surface);
  border-color:  var(--on-surface);
}

/* ── Landing layout ──────────────────────────────────────────────────────── */

main.landing {
  max-width: 960px;
  margin:    48px auto;
  padding:   0 32px;
}

/* ── Screenshots ─────────────────────────────────────────────────────────── */

.screenshots {
  display:         flex;
  gap:             16px;
  justify-content: center;
  overflow-x:      auto;
  padding:         48px 0;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.screenshots::-webkit-scrollbar { display: none; }

.screen {
  height:           400px;
  width:            auto;
  flex-shrink:      0;
  border:           1px solid var(--outline);
  scroll-snap-align: center;
}

/* ── Description ─────────────────────────────────────────────────────────── */

.description {
  max-width:  680px;
  margin:     0 auto;
  padding-bottom: 56px;
}

.tagline {
  font-size:     20px;
  font-weight:   400;
  margin-bottom: 24px;
}

.mode-line {
  padding-left: 8px;
  border-left:  2px solid var(--outline);
}

/* ── Store badges ────────────────────────────────────────────────────────── */

.store-badges {
  display:         flex;
  gap:             16px;
  justify-content: center;
  flex-wrap:       wrap;
  padding-bottom:  64px;
}

.badge-btn {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  border:          2px solid var(--on-surface);
  padding:         10px 24px;
  min-width:       160px;
  text-decoration: none;
  color:           var(--on-surface);
  cursor:          pointer;
  transition:      background 150ms, color 150ms;
}

.badge-btn:hover {
  background: var(--on-surface);
  color:      var(--surface);
}

.badge-sub {
  font-size:      9px;
  font-weight:    700;
  letter-spacing: 1.5px;
}

.badge-name {
  font-size:      18px;
  font-weight:    900;
  letter-spacing: 1px;
}

.badge-wrap {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            8px;
}

.badge-link {
  font-size:       11px;
  color:           var(--outline);
  text-decoration: none;
  letter-spacing:  0.3px;
  transition:      color 150ms;
}

.badge-link:hover {
  color: var(--on-surface);
}

.badge-soon {
  border-style: dashed;
  opacity:      0.45;
  cursor:       default;
}

.badge-soon:hover {
  background: none;
  color:      var(--on-surface);
}

@media (max-width: 600px) {
  .screenshots {
    justify-content: flex-start;
    margin-left:   -32px;
    margin-right:  -32px;
    padding-left:  12vw;
    padding-right: 12vw;
    scroll-padding: 0 12vw;
  }

  .screen {
    height: auto;
    width:  76vw;
  }
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

footer {
  border-top: 1px solid var(--outline);
  padding:    20px 32px;
  display:    flex;
  gap:        24px;
  font-size:  13px;
  justify-content: center;
}

footer a {
  color:           var(--outline);
  text-decoration: none;
  transition:      color 150ms;
}

footer a:hover {
  color: var(--on-surface);
}