:root {
  --base: #0F0F14;
  --text: #fff;
  --text2: rgba(255,255,255,.6);
  --surface: rgba(255,255,255,.14);
  --surface2: rgba(255,255,255,.08);
  --a1: #B04BFF;
  --a2: #FF4B8B;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--base); color: var(--text); }
body {
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
}
main { max-width: 420px; width: 100%; }
/* a gyökéren csak a jel, nagyban; a meghívón kisebb, a név fölött */
.mark { width: 160px; height: 160px; display: block; margin: 0 auto; }
.inviting .mark, .doc .mark { width: 72px; height: 72px; margin-bottom: 20px; }
footer { opacity: .6; }
h1 { font-size: 34px; font-weight: 900; margin: 0 0 8px; letter-spacing: -.5px; }
h2 { font-size: 22px; font-weight: 800; margin: 24px 0 8px; }
p { font-size: 17px; line-height: 1.4; color: var(--text2); margin: 0 0 16px; }
.name { color: var(--text); font-weight: 800; }
.btn {
  display: block; width: 100%; padding: 15px 20px; margin-top: 12px;
  border-radius: 14px; font-size: 17px; font-weight: 800; text-decoration: none;
  transition: transform .15s ease, opacity .15s ease;
}
.btn:active { transform: scale(.97); opacity: .85; }
.btn.primary { background: #fff; color: #000; }
.btn.secondary { background: var(--surface); color: #fff; }
.card {
  background: var(--surface2); border-radius: 22px; padding: 20px; margin-top: 28px;
  text-align: left;
}
.card p { font-size: 15px; margin: 0 0 10px; }
.card p:last-child { margin: 0; }
footer { margin-top: 32px; font-size: 13px; color: var(--text2); }
footer a { color: var(--text2); }
.doc { text-align: left; }
.doc h1 { font-size: 28px; }
.doc h2 { font-size: 19px; margin-top: 28px; }
.doc p, .doc li { font-size: 16px; color: var(--text2); }
.doc li { margin-bottom: 6px; }
.doc strong { color: var(--text); }
/* a jogi oldalak (privacy, terms): szélesebb hasáb, táblázat, h3 */
.doc.long { max-width: 720px; }
.doc h3 { font-size: 17px; font-weight: 800; margin: 20px 0 6px; }
.doc table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 14px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 8px 10px; border-top: 1px solid var(--surface); color: var(--text2); }
.doc th { color: var(--text); font-weight: 800; }
.doc td a, .doc p a, .doc li a { color: var(--text); }
.doc code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; color: var(--text); }
@media (max-width: 600px) {
  .doc table, .doc thead, .doc tbody, .doc tr, .doc th, .doc td { display: block; }
  .doc thead { display: none; }
  .doc tr { border-top: 1px solid var(--surface); padding: 8px 0; }
  .doc td { border: 0; padding: 2px 0; }
}
/* a hosszú dokumentum felülről indul, nem középről: a flex-középre
   igazítás a kilógó tetejét elérhetetlenné tenné */
body:has(.doc.long) { justify-content: flex-start; }
/* Nunito a márka webes betűje, ahol nincs SF Rounded (brand.md);
   helyben, mert külső CDN-t a Privacy Policy kizár */
@font-face {
  font-family: Nunito;
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url(/fonts/nunito-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
body { font-family: ui-rounded, "SF Pro Rounded", Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }

/* a gyökér: bolt-landoló, felülről indul, szélesebb hasáb a képsávnak */
body.home { justify-content: flex-start; padding: 48px 0 32px; }
.home main { max-width: none; }
.home .mark { width: 96px; height: 96px; margin-bottom: 20px; }
.home h1.hero { font-size: clamp(40px, 9vw, 64px); line-height: 1.05; letter-spacing: -1px; margin: 0 16px 14px; }
.accent {
  background: linear-gradient(135deg, var(--a1), var(--a2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.home .lead { max-width: 440px; margin: 0 auto; padding: 0 16px; font-size: 19px; }
/* Apple: legalább 40 px magas, a szabad tér a magasság negyede */
.badge { display: inline-block; margin: 28px auto 8px; padding: 14px; line-height: 0; }
.badge img { height: 54px; width: auto; }

.shots { margin: 32px 0 8px; }
.strip {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 8px 16px 16px; scroll-padding: 0 16px;
  scrollbar-width: none;
}
.strip::-webkit-scrollbar { display: none; }
.strip img {
  flex: 0 0 62vw; max-width: 260px; height: auto; scroll-snap-align: start;
  border-radius: 22px; background: var(--surface2);
}
/* ha elfér, középen; ha nem, görgethető marad (a szélső margó auto) */
.strip img:first-child { margin-left: auto; }
.strip img:last-child { margin-right: auto; }
@media (min-width: 900px) {
  .strip img { flex: 0 0 190px; }
}

.steps { max-width: 640px; margin: 40px auto 0; padding: 0 16px; text-align: left; }
.label {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text2); text-align: center; margin: 0 0 20px;
}
.steps ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 640px) { .steps ol { grid-template-columns: 1fr 1fr; } }
.steps li { display: flex; gap: 14px; background: var(--surface2); border-radius: 22px; padding: 18px; }
.num {
  flex: 0 0 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--a1), var(--a2));
}
.steps h3 { font-size: 17px; font-weight: 800; margin: 4px 0 4px; }
.steps li p { font-size: 15px; margin: 0; }
.note { text-align: center; font-size: 15px; margin: 24px 0 0; }
.home footer { margin-top: 40px; }