/* SongBoss — static site styles. No JavaScript required. */

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/lato-400.woff2") format("woff2");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/lato-700.woff2") format("woff2");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/lato-900.woff2") format("woff2");
}

:root {
  --bg: #0b0b10;
  --surface: #15151d;
  --surface-2: #1d1d27;
  --border: #2a2a36;
  --text: #ececf1;
  --muted: #a9a9b6;
  --accent: #fb7f22;
  --accent-hover: #ff9a4d;
  --accent-ink: #1a0d02;
  --header-h: 72px;
  --max: 1180px;
  --radius: 10px;
  color-scheme: dark;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1.0625rem/1.65 "Lato", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

h1, h2, h3 { line-height: 1.25; margin: 0 0 .6em; }
h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }

.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: 16px;
}
@media (min-width: 700px) {
  .container { padding-inline: 32px; }
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 8px 14px;
  border-radius: 6px;
  z-index: 100;
}
.skip-link:focus { top: 12px; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(11 11 16 / .92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--header-h);
}
.logo img { width: auto; height: 60px; }

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav a {
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  font-size: .95rem;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* On small screens: logo above a wrapped, centred nav; header scrolls away. */
@media (max-width: 860px) {
  :root { --header-h: 0px; }
  .site-header { position: static; }
  .site-header .container {
    flex-direction: column;
    gap: 4px;
    padding-block: 10px;
  }
  .logo img { height: 48px; }
  .site-nav ul { justify-content: center; gap: 2px 20px; }
  .site-nav a { white-space: nowrap; }
}

/* ---------- Hero ---------- */

.hero,
.page-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(60% 70% at 85% 10%, rgb(180 43 64 / .30), transparent 70%),
    radial-gradient(50% 60% at 10% 0%, rgb(251 127 34 / .16), transparent 70%),
    linear-gradient(#07070b, var(--bg));
}
.hero {
  min-height: min(calc(100svh - var(--header-h)), 820px);
  display: flex;
  align-items: center;
  padding-block: 72px 120px;
}

/* Stage spotlights: two soft beams that slowly sway. */
.hero-lights,
.hero-lights::before,
.hero-lights::after { position: absolute; pointer-events: none; }
.hero-lights { inset: 0; z-index: -1; }
.hero-lights::before,
.hero-lights::after {
  content: "";
  top: -20%;
  width: 46vmax;
  height: 140%;
  filter: blur(30px);
  transform-origin: 50% 0;
  animation: sway 11s ease-in-out infinite alternate;
}
.hero-lights::before {
  left: 8%;
  background: conic-gradient(from 168deg at 50% 0, transparent, rgb(251 127 34 / .16) 12deg, transparent 24deg);
  --from: -9deg; --to: 7deg;
}
.hero-lights::after {
  right: 4%;
  background: conic-gradient(from 166deg at 50% 0, transparent, rgb(220 50 70 / .20) 14deg, transparent 28deg);
  --from: 8deg; --to: -6deg;
  animation-duration: 13s;
}
@keyframes sway {
  from { transform: rotate(var(--from)); }
  to { transform: rotate(var(--to)); }
}

.hero-grid {
  display: grid;
  gap: 56px;
  align-items: center;
}
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: 1.1fr 1fr; gap: 40px; }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  padding: 6px 14px;
  border: 1px solid rgb(255 255 255 / .12);
  border-radius: 999px;
  background: rgb(255 255 255 / .04);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff3b4e;
  box-shadow: 0 0 0 0 rgb(255 59 78 / .6);
  animation: live 2s ease-out infinite;
}
@keyframes live {
  to { box-shadow: 0 0 0 10px rgb(255 59 78 / 0); }
}

.hero h1 {
  font-weight: 900;
  font-size: clamp(2.8rem, 1.6rem + 5.4vw, 5.6rem);
  line-height: 1;
  letter-spacing: -.03em;
  margin: 0 0 24px;
}
/* The karaoke "wipe": the line fills with colour as if being sung. */
.lyric {
  display: inline-block;
  padding-bottom: .08em;
  background: linear-gradient(90deg, var(--accent) 0 50%, rgb(255 255 255 / .28) 50% 100%);
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sing 2.6s cubic-bezier(.45, .05, .35, 1) .5s forwards;
}
@keyframes sing {
  to { background-position: 0 0; }
}

.hero-sub {
  font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem);
  color: var(--muted);
  max-width: 34em;
  margin-bottom: 32px;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 32px; }
.hero .btn { box-shadow: 0 10px 30px -10px rgb(251 127 34 / .7); }
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .95rem;
  color: var(--muted);
}
.hero-meta li { display: flex; align-items: center; gap: 8px; }
.hero-meta li::before {
  content: "";
  width: 14px;
  height: 8px;
  border: solid var(--accent);
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg) translateY(-2px);
}

/* ----- Stage illustration ----- */

.hero-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 440px;
  padding-bottom: 48px;
}

.hero-waves {
  /* 1 SVG unit = 1px, so the 380px card spans x 130–510 and the arcs sit just outside it */
  position: absolute;
  left: 50%;
  top: calc(50% - 24px);
  width: 640px;
  height: 440px;
  translate: -50% -50%;
  overflow: visible;
}
.hero-waves path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 14;
  stroke-linecap: round;
  opacity: .2;
  filter: drop-shadow(0 0 12px rgb(251 127 34 / .6));
  animation: pulse 2.4s ease-in-out infinite;
}
.hero-waves .w1 { stroke: #d0384f; filter: drop-shadow(0 0 12px rgb(208 56 79 / .6)); }
.hero-waves .w2 { animation-delay: .2s; }
.hero-waves .w3 { animation-delay: .4s; }
@keyframes pulse {
  0%, 100% { opacity: .15; }
  30% { opacity: .9; }
}

.rotation {
  position: relative;
  width: min(380px, 100%);
  padding: 20px;
  border-radius: 18px;
  background: rgb(24 24 33 / .72);
  border: 1px solid rgb(255 255 255 / .09);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow:
    0 30px 80px -20px rgb(0 0 0 / .8),
    0 0 0 1px rgb(0 0 0 / .4),
    0 0 60px -10px rgb(251 127 34 / .25);
  transform: perspective(1200px) rotateY(-8deg) rotateX(3deg);
  animation: float 7s ease-in-out infinite;
}
@keyframes float {
  50% { transform: perspective(1200px) rotateY(-8deg) rotateX(3deg) translateY(-10px); }
}

.rotation-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.badge {
  letter-spacing: .02em;
  text-transform: none;
  color: var(--accent);
  background: rgb(251 127 34 / .12);
  border: 1px solid rgb(251 127 34 / .3);
  padding: 3px 10px;
  border-radius: 999px;
}

.avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-weight: 900;
  color: #fff;
}
.a1 { background: linear-gradient(135deg, #fb7f22, #b42b40); width: 48px; height: 48px; font-size: 1.2rem; }
.a2 { background: #3b3a6b; }
.a3 { background: #1f5f5b; }
.a4 { background: #6b3a5a; }

.now {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 12px;
  background: rgb(251 127 34 / .08);
  border: 1px solid rgb(251 127 34 / .2);
}
.now > div { flex: 1; min-width: 0; line-height: 1.3; }
.rotation small {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}
.rotation strong { display: block; font-size: 1rem; }
.song { display: block; font-size: .88rem; color: var(--muted); }

.mic-level { display: flex; align-items: flex-end; gap: 3px; height: 22px; }
.mic-level i {
  width: 4px;
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
  transform-origin: bottom;
  animation: bounce .9s ease-in-out infinite alternate;
}
.mic-level i:nth-child(2) { animation-delay: -.3s; animation-duration: .7s; }
.mic-level i:nth-child(3) { animation-delay: -.6s; animation-duration: 1.1s; }
.mic-level i:nth-child(4) { animation-delay: -.15s; animation-duration: .8s; }

.progress {
  height: 4px;
  margin: 12px 2px 16px;
  border-radius: 2px;
  background: rgb(255 255 255 / .08);
  overflow: hidden;
}
.progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #b42b40, var(--accent));
  transform-origin: left;
  animation: track 40s linear infinite;
}
@keyframes track {
  from { transform: scaleX(.18); }
  to { transform: scaleX(1); }
}

.queue { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.queue li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  line-height: 1.3;
}
.queue li:nth-child(odd) { background: rgb(255 255 255 / .03); }
.queue li > span:nth-child(2) { flex: 1; min-width: 0; }
.queue strong { font-size: .95rem; }
.queue em {
  font-style: normal;
  font-size: .82rem;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.toast {
  position: absolute;
  left: max(0px, calc(50% - 230px));
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgb(250 250 252 / .96);
  color: #17171f;
  font-size: .92rem;
  line-height: 1.3;
  box-shadow: 0 20px 50px -12px rgb(0 0 0 / .7);
  opacity: 0;
  animation: toast-in .6s cubic-bezier(.2, .9, .3, 1.3) 3.2s forwards;
}
.toast small {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #b4521a;
}
.toast strong { font-weight: 900; }
.toast-icon {
  position: relative;
  flex: none;
  width: 18px;
  height: 30px;
  border: 2.5px solid #17171f;
  border-radius: 5px;
}
.toast-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--accent);
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(16px) scale(.96); }
  to { opacity: 1; transform: none; }
}

/* Equaliser along the bottom of the stage. */
.eq {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 72px;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding-inline: 4px;
  z-index: -1;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}
.eq i {
  flex: 1;
  height: 100%;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(to top, rgb(180 43 64 / .4), rgb(251 127 34 / .18));
  transform-origin: bottom;
  transform: scaleY(.3);
  animation: bounce 1.2s ease-in-out infinite alternate;
}
.eq i:nth-child(2n) { animation-duration: .9s; animation-delay: -.4s; }
.eq i:nth-child(3n) { animation-duration: 1.5s; animation-delay: -.8s; }
.eq i:nth-child(5n) { animation-duration: .75s; animation-delay: -.2s; }
.eq i:nth-child(7n) { animation-duration: 1.35s; animation-delay: -1.1s; }
.eq i:nth-child(4n+1) { animation-delay: -.6s; }
@keyframes bounce {
  from { transform: scaleY(.15); }
  to { transform: scaleY(1); }
}

@media (max-width: 959px) {
  .hero { padding-block: 48px 110px; }
  .hero-stage { min-height: 400px; }
  .rotation { transform: none; animation: none; }
}
@media (max-width: 600px) {
  .hero-waves { display: none; }
}
@media (max-width: 480px) {
  .hero-stage { min-height: 380px; }
  .toast { left: 0; bottom: -8px; }
  .eq { height: 60px; gap: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero *, .hero *::before, .hero *::after,
  .page-hero *, .page-hero *::before, .page-hero *::after { animation: none !important; }
  .lyric { background-position: 0 0; }
  .toast { opacity: 1; }
  .progress span { transform: scaleX(.6); }
  .hero-waves path { opacity: .35; }
}

/* ---------- Sections ---------- */

.section { padding-block: clamp(56px, 8vw, 104px); }
.section-alt { background: var(--surface); }

.lead {
  font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem);
  line-height: 1.55;
  max-width: 900px;
  margin: 0 auto 48px;
  text-align: center;
}

.center { text-align: center; }
.nowrap { white-space: nowrap; }
.section-head { text-align: center; max-width: 820px; margin: 0 auto 48px; }
.section-head p { color: var(--muted); }

/* Section with a fixed photo behind it (CSS-only parallax). */
.photo-section {
  position: relative;
  background-color: #000;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  isolation: isolate;
}
.photo-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgb(5 5 8 / .82), rgb(5 5 8 / .9));
  z-index: -1;
}
/* iOS/Android ignore or break fixed backgrounds; fall back to scrolling. */
@media (hover: none), (prefers-reduced-motion: reduce) {
  .photo-section { background-attachment: scroll; }
}
.bg-microphone { background-image: url("img/bg-microphone.webp"); }
.bg-community { background-image: url("img/bg-community.webp"); }

/* ---------- Buttons & cards ---------- */

.btn {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 999px;
  transition: background-color .15s ease, transform .15s ease;
}
.btn:hover { background: var(--accent-hover); color: var(--accent-ink); transform: translateY(-1px); }

.downloads {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  max-width: 900px;
  margin-inline: auto;
}
.download {
  display: block;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 28px;
  color: var(--text);
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.download:hover { border-color: var(--accent); color: var(--text); transform: translateY(-2px); }
.download strong { display: block; font-size: 1.3rem; margin-bottom: 8px; color: var(--accent); }
.download p { margin: 0; color: var(--muted); }
.download code {
  display: block;
  margin-top: 4px;
  font-size: .9rem;
  color: var(--text);
  background: var(--bg);
  border-radius: 6px;
  padding: 10px 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---------- Support the project ---------- */

.support {
  display: grid;
  gap: 40px;
  align-items: center;
}
@media (min-width: 900px) {
  .support { grid-template-columns: 1.4fr 1fr; }
}
.support ul { padding-left: 1.2em; margin: 0 0 1.2em; }
.support li { margin-bottom: .6em; }
.support li::marker { color: var(--accent); }
.price {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: .6em;
}
.support-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  text-align: center;
}
.support-card img { width: 200px; margin: 0 auto 20px; }
.support-card p { color: var(--muted); }

/* ---------- Video guides ---------- */

.videos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.video {
  display: block;
  color: var(--text);
  text-decoration: none;
  background: rgb(21 21 29 / .85);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  height: 100%;
  transition: border-color .15s ease, transform .15s ease;
}
.video:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.video-thumb { position: relative; aspect-ratio: 16 / 9; background: #000; }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.video-thumb::after {
  /* play icon */
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgb(0 0 0 / .65);
  border: 2px solid var(--accent);
  transition: background-color .15s ease;
}
.video-thumb::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  translate: -35% -50%;
  border-style: solid;
  border-width: 10px 0 10px 17px;
  border-color: transparent transparent transparent var(--accent);
}
.video:hover .video-thumb::after { background: rgb(0 0 0 / .85); }
.video span { display: block; padding: 14px 16px; font-weight: 700; }

/* ---------- Latest update ---------- */

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 24px;
  margin-top: 48px;
}
.feature {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  text-align: center;
}
.feature img {
  height: 160px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin: 0 auto 20px;
}
.feature p { color: var(--muted); margin: 0; }

/* ---------- Community ---------- */

.community { text-align: center; max-width: 760px; margin-inline: auto; }
.community p { font-size: 1.15rem; margin-bottom: 32px; }

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--border);
  padding-block: 28px;
  font-size: .9rem;
  color: var(--muted);
}
.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  align-items: center;
}
.site-footer ul { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; margin: 0; padding: 0; }
.site-footer p { margin: 0; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--accent); }

/* ---------- Prose pages (privacy policy) ---------- */

.prose { max-width: 760px; margin-inline: auto; }
.prose h2 { font-size: 1.4rem; margin-top: 1.8em; color: var(--accent); }
.prose h2:first-child { margin-top: 0; }

.page-hero { padding-block: 56px 64px; border-bottom: 1px solid var(--border); }
.page-hero h1 {
  font-weight: 900;
  font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  margin-bottom: 16px;
}
.page-hero-sub { font-size: 1.15rem; color: var(--muted); margin: 0; }
.back-link {
  display: block;
  width: fit-content;
  margin-bottom: 28px;
  font-weight: 700;
  text-decoration: none;
}
.back-link:hover { text-decoration: underline; }
.page-hero + .section { padding-top: 56px; }
.page-end { margin-top: 48px; }

/* Privacy note under the downloads */
.privacy-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 900px;
  margin: 28px auto 0;
  color: var(--muted);
  font-size: .95rem;
}
.privacy-note a { font-weight: 700; white-space: nowrap; }
@media (max-width: 600px) {
  .privacy-note a { white-space: normal; }
}
.shield {
  flex: none;
  width: 18px;
  height: 21px;
  margin-top: 2px;
  background: var(--accent);
  clip-path: polygon(50% 0, 100% 16%, 100% 50%, 85% 78%, 50% 100%, 15% 78%, 0 50%, 0 16%);
}

/* ---------- Language switch (header) ---------- */

.site-nav { margin-left: auto; }
.lang-switch { display: flex; gap: 4px; }
.lang-switch a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
}
.lang-switch a:hover { color: var(--text); border-color: var(--border); }
.lang-switch a[aria-current] {
  color: var(--text);
  background: rgb(255 255 255 / .06);
  border-color: var(--border);
}
.lang-switch img {
  width: auto;
  height: 13px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .15);
}
@media (max-width: 860px) {
  .site-nav { margin-left: 0; }
  .lang-switch { justify-content: center; }
}

/* ---------- Language chooser (/) ---------- */

.hero.chooser {
  min-height: 100svh;
  padding-block: 48px 120px;
  text-align: center;
}
.chooser .container { display: flex; flex-direction: column; align-items: center; }
.chooser-logo { width: auto; height: clamp(84px, 14vw, 124px); margin-bottom: 40px; }
.chooser h1 {
  font-size: clamp(1.5rem, 1rem + 2vw, 2.2rem);
  line-height: 1.25;
  letter-spacing: -.02em;
  margin-bottom: 40px;
}
.chooser h1 span { display: block; }
.chooser h1 span + span::before {
  /* short divider so the two equal lines read as a pair */
  content: "";
  display: block;
  width: 36px;
  height: 3px;
  margin: 12px auto;
  border-radius: 2px;
  background: var(--accent);
}

.lang-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 260px));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 560px) {
  .lang-cards { grid-template-columns: minmax(0, 320px); }
}
.lang-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 36px 24px 28px;
  border-radius: 20px;
  background: rgb(24 24 33 / .72);
  border: 1px solid rgb(255 255 255 / .09);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 70px -25px rgb(0 0 0 / .85);
  color: var(--text);
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.lang-card:hover,
.lang-card:focus-visible {
  color: var(--text);
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 30px 70px -25px rgb(0 0 0 / .85), 0 0 50px -10px rgb(251 127 34 / .45);
}
.lang-card img {
  width: auto;
  height: 72px;
  margin-bottom: 10px;
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .15), 0 12px 30px -10px rgb(0 0 0 / .8);
  transition: transform .2s ease;
}
.lang-card:hover img { transform: scale(1.05); }
.lang-card strong { font-size: 1.6rem; font-weight: 900; letter-spacing: -.01em; }
.lang-card span { color: var(--muted); font-size: .95rem; }

.chooser-foot { margin: 40px 0 0; font-size: .9rem; }
.chooser-foot a { color: var(--muted); }
.chooser-foot a:hover { color: var(--accent); }

/* ---------- Touch targets (phones) ---------- */
/* Aim for ~44px tall tap areas without changing the desktop layout. */
@media (max-width: 860px) {
  .site-nav ul { gap: 0 20px; }
  .site-nav a { display: inline-block; padding: 10px 2px; }
  .lang-switch { padding-bottom: 4px; }
  .lang-switch a { padding: 10px 14px; }
  .site-footer ul { gap: 0 22px; }
  .site-footer a { display: inline-block; padding: 11px 0; }
  .back-link { padding-block: 10px; margin-bottom: 18px; }
  .chooser-foot a { display: inline-block; padding: 11px 8px; }
}