/* Valyx brand: the same colours as the banner and the icon */
:root {
  --deep: #100d33;
  --night: #19154d;
  --dusk: #241f68;
  --glow: #312b84;
  --hill: #0c0a26;
  --cream: #f6f0e4;
  --soft: #d9d2f7;   /* body text on cards, 11:1 on --night */
  --shadow: #5b3fb8;
  --lilac: #b7a9ff;  /* 7.6:1 on --night */
  --coral: #fb7185;
  --px: 4px;         /* one "pixel" of the hard shadows */
  --pixel-font: "Press Start 2P", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--deep); }

body {
  margin: 0;
  color: var(--cream);
  font-family: "Rubik", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  background: var(--deep);
}

a { color: var(--lilac); cursor: pointer; transition: color .15s ease-out; }
a:hover { color: var(--cream); }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(1040px, 100% - 32px); margin-inline: auto; }

.ico { width: 1em; height: 1em; fill: currentColor; shape-rendering: crispEdges; flex: none; }
[dir="rtl"] .ico-flip { transform: scaleX(-1); }

/* top bar */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 16px; }
.brand { display: flex; align-items: center; gap: 12px; min-height: 44px; color: var(--cream); text-decoration: none; font-weight: 700; }
.brand img { width: 36px; height: 36px; image-rendering: pixelated; box-shadow: var(--px) var(--px) 0 var(--shadow); }
.brand .latin { font-family: var(--pixel-font); font-size: .7rem; letter-spacing: .05em; }
.lang {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  font-size: .95rem; font-weight: 500; text-decoration: none;
  border: 2px solid var(--glow); transition: border-color .15s ease-out, color .15s ease-out;
}
.lang:hover { border-color: var(--lilac); }

/* hero: the banner's sky, hard bands, darkest at the top */
.hero {
  position: relative; overflow: hidden; text-align: center;
  padding-block: 8px 136px; /* the bottom leaves room for site.js's hills */
  background: linear-gradient(var(--deep) 0 20%, #141040 20% 38%, var(--night) 38% 56%, #1e1a5a 56% 74%, var(--dusk) 74%);
}
.lost { min-height: 100vh; display: flex; align-items: center; } /* the 404 page: the sky fills the screen */
.sky { position: absolute; top: 0; left: 0; image-rendering: pixelated; }
.hero .wrap { position: relative; z-index: 1; }
/* the same whole-pixel sizes site.js picks (136 px x 2..6), so the wordmark never jumps when the script runs */
.wordmark { display: block; width: 272px; height: auto; margin: 56px auto 48px; image-rendering: pixelated; }
@media (min-width: 440px) { .wordmark { width: 408px; } }
@media (min-width: 576px) { .wordmark { width: 544px; } }
@media (min-width: 712px) { .wordmark { width: 680px; } }
@media (min-width: 848px) { .wordmark { width: 816px; } }
h1 { margin: 0; font-size: clamp(2rem, 5.5vw, 3.25rem); line-height: 1.2; font-weight: 800; text-shadow: 3px 3px 0 var(--shadow); }
.lead { max-width: 620px; margin: 16px auto 32px; color: var(--soft); font-size: 1.15rem; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 24px; }

.btn {
  display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 28px;
  background: var(--coral); color: var(--deep);
  font: inherit; font-weight: 800; text-decoration: none; cursor: pointer;
  border: 3px solid var(--deep);
  box-shadow: var(--px) var(--px) 0 var(--cream);
  transition: transform .15s ease-out, box-shadow .15s ease-out;
}
.btn:hover { color: var(--deep); transform: translate(-2px, -2px); box-shadow: calc(var(--px) + 2px) calc(var(--px) + 2px) 0 var(--cream); }
.btn:active { transform: translate(var(--px), var(--px)); box-shadow: 0 0 0 var(--cream); }
.btn .ico { width: 18px; height: 18px; }
.ghost { display: inline-flex; align-items: center; min-height: 52px; padding: 0 8px; font-weight: 500; }

/* sections */
section { padding-block: 64px; }
.kicker { display: block; margin-bottom: 12px; font-family: var(--pixel-font); font-size: .7rem; color: var(--coral); }
h2 { margin: 0 0 12px; font-size: clamp(1.6rem, 3.5vw, 2.2rem); line-height: 1.3; }
.intro { max-width: 680px; margin: 0 0 36px; color: var(--soft); }

.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.card { padding: 24px; background: var(--night); border: 3px solid var(--glow); box-shadow: var(--px) var(--px) 0 var(--hill); }
.card h3 { margin: 0 0 6px; font-size: 1.2rem; }
.card p { margin: 0; color: var(--soft); }
.card .ico { width: 36px; height: 36px; margin-bottom: 14px; color: var(--lilac); }
.card:nth-child(3n+2) .ico { color: var(--coral); }
.card:nth-child(3n+3) .ico { color: var(--cream); }

.band { background: var(--night); border-block: 3px solid var(--glow); }
.band .card { background: var(--deep); }

/* showcase: one real mod, then a slot for the next one */
.showcase { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }
.feature { grid-column: 1 / -1; }
@media (max-width: 760px) { .showcase { grid-template-columns: 1fr; } }
.showcase .card p { margin-bottom: 16px; }
.compare { max-width: 840px; }
.compare { display: grid; gap: 12px; margin-bottom: 20px; }
.compare figure { margin: 0; border: 3px solid var(--hill); }
.compare figcaption { padding: 2px 12px; font-size: .85rem; font-weight: 700; color: var(--deep); background: var(--coral); }
.compare figcaption.good { background: #86efac; }
.compare img { display: block; width: 100%; height: auto; }
.showcase .card > a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
.slot { display: flex; flex-direction: column; justify-content: center; text-align: center; border-style: dashed; background: transparent; box-shadow: none; }
.slot .ico { margin-inline: auto; }

/* FAQ: native details, so it opens with a tap or the keyboard and needs no script */
.faq { display: grid; gap: 12px; max-width: 760px; }
.faq details { background: var(--night); border: 3px solid var(--glow); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 10px 20px; font-weight: 700; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-family: var(--pixel-font); font-size: .8rem; color: var(--coral); }
.faq details[open] summary::after { content: "-"; }
.faq details p { margin: 0; padding: 0 20px 18px; color: var(--soft); }

.eyebrow { margin: 0 0 12px; font-weight: 700; color: var(--coral); letter-spacing: .02em; }

/* closing call */
.join { text-align: center; padding-block: 80px 96px; }
.join p { max-width: 560px; margin: 8px auto 32px; color: var(--soft); }
.join .note { margin: 28px auto 0; font-size: .95rem; color: var(--lilac); }

footer { background: var(--hill); border-top: 3px solid var(--glow); padding-block: 32px; font-size: .95rem; color: #b3abdf; }
footer p { margin: 0 0 8px; }
footer .latin { font-family: var(--pixel-font); font-size: .6rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .btn:hover, .btn:active { transition: none; transform: none; }
}