/* ============================================================
   Rocket Show — shared foundation
   Design tokens, reset, typography, buttons, header/nav, language
   switcher and footer: everything more than one part of the site uses.
   Loaded first by every page; the landing pages add lp.css on top, the
   migrated site pages add site.css. Page-specific rules belong there.
   ============================================================ */

:root {
  /* brand */
  --indigo-950: #140d33;
  --indigo-900: #1c1348;
  --indigo-800: #271a63;
  --purple-700: #4a2a8f;
  --purple-600: #5b2d9c;
  --purple-500: #7c3aed;
  --violet-400: #9d6bff;
  --gold: #ffce3a;
  --gold-soft: #ffe08a;

  /* ink + surfaces */
  --navy-900: #131b26;
  --navy-800: #1b2733;
  --ink: #1d2430;
  --slate: #5c6675;
  --slate-light: #8b93a1;
  --line: #e8e6f1;
  --paper: #ffffff;
  --paper-2: #f7f5fc;
  --paper-3: #f0ecfa;

  --radius: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 2px 8px rgba(28, 19, 72, .06);
  --shadow: 0 18px 40px -18px rgba(35, 22, 90, .28);
  --shadow-lg: 0 40px 80px -30px rgba(35, 22, 90, .5);
  --maxw: 1160px;

  --font-display: "Oswald", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

/* overflow-x must be `clip`, not `hidden`. `hidden` turns html/body into scroll
   containers, which silently disables `position: sticky` on every descendant —
   that is what stopped .site-header from sticking. `clip` suppresses the same
   horizontal overflow without creating a scroll container, so sticky works. */
html { scroll-behavior: smooth; scroll-padding-top: 84px; overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

::selection { background: rgba(124, 58, 237, .22); }

:focus-visible {
  outline: 2px solid var(--purple-500);
  outline-offset: 3px;
  border-radius: 6px;
}

/* thin scroll-progress indicator (updated via transform only) */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--violet-400), var(--purple-500) 55%, var(--gold));
  z-index: 200;
  pointer-events: none;
  will-change: transform;
}

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- typography ---------- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.5px;
  color: var(--navy-900);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 5.4vw, 4.1rem); line-height: 1.04; text-transform: none; }
h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); line-height: 1.08; text-transform: uppercase; letter-spacing: .5px; }
h3 { font-size: 1.35rem; line-height: 1.25; letter-spacing: 0; }
p { margin: 0; text-wrap: pretty; }

.grad {
  background: linear-gradient(100deg, #c6b3ff 0%, #a78bfa 42%, var(--gold) 112%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradShift 9s ease-in-out infinite alternate;
}
@keyframes gradShift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

.eyebrow, .kicker {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--purple-600);
}
.kicker.light { color: var(--gold-soft); }

/* ---------- buttons ---------- */
.btn {
  --btn-pad: .8em 1.5em;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .95rem;
  padding: var(--btn-pad);
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .25s ease, background .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

/* light sweep across the filled CTAs on hover */
.btn-primary::before,
.btn-buy::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 45%;
  z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: skewX(-18deg);
  transition: left .6s cubic-bezier(.4, 0, .2, 1);
}
.btn-primary:hover::before,
.btn-buy:hover::before { left: 135%; }

.btn-primary {
  background: linear-gradient(135deg, var(--purple-600), var(--purple-500));
  color: #fff;
  /* The border is already there at 1.5px transparent, so colouring it costs no
     layout. It earns its keep at the two ends of the pill: there the curve runs
     tangent to vertical over a fractional height, and pure background
     antialiasing against a purple hero reads as a chipped edge. The ghost
     button never showed this because its border draws the outline for it. */
  border-color: rgba(255, 255, 255, .16);
  box-shadow: 0 12px 26px -10px rgba(124, 58, 237, .7);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -10px rgba(124, 58, 237, .8); }

.btn-ghost {
  background: rgba(255, 255, 255, .06);
  color: #fff;
  border-color: rgba(255, 255, 255, .28);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .14); transform: translateY(-2px); }

.btn-outline {
  background: transparent;
  color: var(--purple-600);
  border-color: rgba(124, 58, 237, .35);
}
.btn-outline:hover { background: var(--purple-600); color: #fff; border-color: var(--purple-600); }

.btn-buy {
  background: var(--gold);
  color: var(--navy-900);
  font-weight: 700;
  box-shadow: 0 8px 20px -8px rgba(255, 206, 58, .8);
}
.btn-buy:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -8px rgba(255, 206, 58, .9); }

.btn-lg { font-size: 1.02rem; padding: .95em 1.8em; }
.btn-xl { font-size: 1.1rem; padding: 1.05em 2.3em; }

/* Runtime badge on the hero's video CTA. Deliberately its own element rather
   than part of the translated label: the number would otherwise have to be
   repeated — and kept in sync — across all five languages. Dimmed so it reads
   as metadata beside the label, not as part of it. */
.btn-dur { opacity: .6; font-variant-numeric: tabular-nums; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: 24px;
}
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
/* max-width:none overrides the global img{max-width:100%} so a tight flex
   header can never squeeze the logo narrower than its natural aspect ratio */
.brand-logo { height: 34px; width: auto; max-width: none; }

.nav { display: flex; gap: 2px; }
.nav a {
  font-weight: 600;
  font-size: .92rem;
  white-space: nowrap;
  color: var(--navy-800);
  padding: .55em .8em;
  border-radius: 999px;
  transition: background .18s ease, color .18s ease;
}
.nav a:hover { color: var(--purple-600); background: var(--paper-3); }

.header-actions { display: flex; align-items: center; gap: 14px; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 44px; height: 44px;
  border: none;
  background: var(--paper-3);
  border-radius: 12px;
  cursor: pointer;
  align-items: center; justify-content: center;
}
.nav-toggle span {
  width: 20px; height: 2px; border-radius: 2px;
  background: var(--navy-800);
  transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- language switcher ---------- */
.lang-switch { position: relative; }
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .9rem;
  color: var(--navy-800);
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .5em .75em;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.lang-btn:hover { background: #ece7f8; }
.lang-btn .lang-caret { transition: transform .2s ease; opacity: .7; }
.lang-switch.open .lang-btn .lang-caret { transform: rotate(180deg); }

.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 170px;
  list-style: none;
  margin: 0;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 120;
}
.lang-switch.open .lang-menu { opacity: 1; visibility: visible; transform: none; }
.lang-menu li { margin: 0; }
.lang-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  font-size: .92rem;
  font-weight: 500;
  color: var(--navy-800);
  background: none;
  border: none;
  border-radius: 9px;
  padding: .6em .7em;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.lang-menu button:hover { background: var(--paper-3); }
.lang-menu button[aria-selected="true"] { color: var(--purple-600); font-weight: 700; }
.lang-menu button[aria-selected="true"]::after { content: "✓"; font-size: .9rem; }
.final-cta p { color: rgba(255, 255, 255, .8); font-size: 1.15rem; margin-bottom: 34px; }

/* ---------- footer ---------- */
.site-footer { background: var(--navy-900); color: rgba(255, 255, 255, .7); padding: 56px 0 30px; }
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr auto;
  gap: 40px;
  align-items: start;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.footer-logo { height: 30px; filter: brightness(0) invert(1); opacity: .95; margin-bottom: 14px; }
.footer-brand p { max-width: 30ch; font-size: .92rem; color: rgba(255, 255, 255, .55); }
.footer-nav { display: flex; flex-direction: column; gap: 10px; }
.footer-nav a { font-size: .92rem; color: rgba(255, 255, 255, .72); transition: color .2s; }
.footer-nav a:hover { color: #fff; }
.footer-social { display: flex; gap: 12px; }
.footer-social a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  transition: background .2s, transform .2s;
}
.footer-social a:hover { background: var(--purple-500); transform: translateY(-2px); }
.footer-bottom {
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 24px;
}
.footer-bottom p { font-size: .84rem; color: rgba(255, 255, 255, .45); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-legal a { font-size: .84rem; color: rgba(255, 255, 255, .55); transition: color .2s; }
.footer-legal a:hover { color: #fff; }

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1);
  transition-delay: var(--d, 0s);
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
  .contact-card { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .faq-item summary { font-size: 1.05rem; }
  /* Header CTA only: on a phone the brand, the language switcher and this button
     cannot share one row, and the hero CTA is a few hundred pixels below anyway.
     Scoped to the header so buy buttons elsewhere on a page are left alone. */
  .site-header .btn-buy { display: none; }
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
}

/* tighten the header on phones: the brand no longer shrinks (so it keeps its
   aspect ratio), so trim gaps and the logo height to keep everything on one row */
@media (max-width: 480px) {
  .header-inner { gap: 12px; }
  .header-actions { gap: 10px; }
  .brand-logo { height: 26px; }
}

@media (max-width: 460px) {
  .btn-xl { width: 100%; }
}

/* Visually hidden, still read out — for labels a sighted reader gets from
   context (an empty table corner cell) but a screen reader does not. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   GLOBAL MENU
   The same shell as the header above, plus the site-wide additions: a
   current-page marker and the cart link. It is the only menu on the site —
   the landing pages under /lp carry a header with no navigation at all —
   so these rules do not need scoping to it. /spark ships both headers and
   drops one at parse time, which is why both live in this file.
   ============================================================ */

/* Six labels stay on one row down to about here in every language, German
   included; below it they collapse into the hamburger. */
@media (max-width: 1000px) {
  .nav { display: none; }
  .nav-toggle { display: flex; }
  .nav.open {
    display: flex;
    position: absolute;
    top: 72px; left: 0; right: 0;
    flex-direction: column;
    background: #fff;
    padding: 14px 20px 22px;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
  }
  .nav.open a { padding: 12px 8px; font-size: 1.05rem; white-space: normal; }
}

.nav a[aria-current] {
  color: var(--purple-600);
  background: var(--paper-3);
}

.cart-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: .9rem;
  color: var(--navy-800);
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .5em .85em;
  transition: background .18s ease, color .18s ease;
}
.cart-link:hover { background: #ece7f8; color: var(--purple-600); }
/* below this the label crowds the language switcher; the trolley alone reads */
@media (max-width: 560px) {
  .cart-link span { display: none; }
  .cart-link { padding: .5em .6em; }
}

/* ============================================================
   FAQ + CONTACT FORM
   Shared between the landing pages and /support, which asks the
   same questions and posts to the same contact.php.
   ============================================================ */

.faq-list {
  max-width: 820px;
  margin: 0 auto;
  border-top: 1px solid var(--line);
}
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 4px;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--navy-900);
  list-style: none;
  transition: color .18s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--purple-600); }
/* chevron drawn in CSS so there's no extra markup per question */
.faq-item summary::after {
  content: "";
  flex: 0 0 auto;
  width: 10px; height: 10px;
  border-right: 2.5px solid var(--purple-500);
  border-bottom: 2.5px solid var(--purple-500);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .22s ease;
}
.faq-item[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq-a {
  padding: 0 4px 24px;
  color: var(--slate);
  max-width: 68ch;
}
.faq-a a {
  color: var(--purple-600);
  font-weight: 600;
  border-bottom: 1px solid rgba(124, 58, 237, .35);
  transition: border-color .18s ease;
}
.faq-a a:hover { border-bottom-color: var(--purple-600); }

.contact-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 60px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(30px, 4.5vw, 56px);
  box-shadow: var(--shadow-sm);
}
.contact-copy .kicker { display: block; margin-bottom: 14px; }
.contact-copy h2 { margin-bottom: 14px; }
.contact-copy > p { color: var(--slate); margin-bottom: 26px; max-width: 46ch; }
.contact-points {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 14px;
}
.contact-points li {
  position: relative;
  padding-left: 30px;
  color: var(--ink);
  font-size: .97rem;
}
.contact-points li::before {
  content: "";
  position: absolute; left: 0; top: 7px;
  width: 15px; height: 9px;
  border-left: 2.5px solid var(--purple-500);
  border-bottom: 2.5px solid var(--purple-500);
  transform: rotate(-45deg);
}

.contact-form { display: grid; gap: 16px; align-content: start; }
.field { display: grid; gap: 6px; }
.field label {
  font-size: .85rem;
  font-weight: 600;
  color: var(--navy-900);
}
.field .opt { font-weight: 400; color: var(--slate-light); }
.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--ink);
  background: var(--paper-2);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 11px 14px;
  width: 100%;
  transition: border-color .18s ease, background .18s ease;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--purple-500);
  background: var(--paper);
}
.field input:user-invalid,
.field textarea:user-invalid { border-color: #d4536b; }
.contact-form .btn { width: 100%; margin-top: 4px; }

/* honeypot — off-screen rather than display:none, which some bots detect */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-status {
  font-size: .9rem;
  font-weight: 500;
  min-height: 1.2em;
}
.form-status.ok { color: #1f7a52; }
.form-status.err { color: #c23a53; }
.form-fine { font-size: .8rem; color: var(--slate-light); }