/* Ninety Six – 2026 shared components: language switch, footer, store buttons, modal.
   Loaded after style.css. The original @font-face rules in style.css use format('ttf'),
   which browsers reject, so the brand fonts are declared here again with valid formats. */

@font-face {
  font-family: 'NS Liebling Pro';
  src: url(../fonts/Liebling-Pro-Black.ttf) format('truetype');
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: 'NS Liebling';
  src: url(../fonts/fonnts.com-Liebling_Regular.otf) format('opentype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'NS Liebling';
  src: url(../fonts/fonnts.com-Liebling_Bold.otf) format('opentype');
  font-weight: 700;
  font-display: swap;
}
:root {
  --ns-bg: #0E100F;
  --ns-bg-2: #131615;
  --ns-card: #181B1A;
  --ns-card-2: #1F2322;
  --ns-line: rgba(255, 255, 255, .10);
  --ns-text: #FFFFFF;
  --ns-muted: rgba(255, 255, 255, .68);
  --ns-faint: rgba(255, 255, 255, .45);
  --ns-green: #15FCB4;
  --ns-cyan: #0CEDFA;
  --ns-blue: #1082A3;
  --ns-font-display: 'NS Liebling Pro', 'Rubik', sans-serif;
  --ns-font-body: 'Rubik', system-ui, sans-serif;
  --ns-radius: 20px;
}

/* ---------- header ---------- */
/* style.css makes the header fixed but gives it no z-index, so any section that creates its own
   layer (animations, transforms, glows) was painted over it while scrolling. */
body > header { top: 0; left: 0; right: 0; z-index: 1000; }

/* ---------- header: language switch ---------- */
.header-right { display: flex; align-items: center; gap: 18px; }
.header-right .navbar a { margin-right: 28px; }
.lang-switch {
  display: inline-flex; padding: 3px; border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px; font-family: var(--ns-font-body); flex: 0 0 auto;
}
.lang-switch a {
  color: var(--ns-muted); font-size: 13px; font-weight: 600; letter-spacing: .06em;
  padding: 5px 11px; border-radius: 999px; line-height: 1;
}
.lang-switch a:hover { color: #FFF; }
.lang-switch a.is-active { background: var(--ns-green); color: var(--ns-bg); }
.header-right .mobile-nav-toggle { margin: 0; }
@media (max-width: 991px) {
  #headerBody { padding: 0 16px; }
  .header-right { gap: 14px; }
}

/* ---------- buttons (one look for the whole site) ----------
   Store badges: App Store white/black, Google Play black/white with the coloured logo, always the
   same size and side by side (also on phones). Primary buttons use the logo gradient. */
:root { --ns-gradient: linear-gradient(90deg, #0288EC 0%, #0CC4CE 50%, #15FCB4 100%); }
.store-btns { display: flex; flex-wrap: nowrap; gap: 12px; }
.store-btn {
  flex: 0 0 182px; min-width: 0; height: 58px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 0 14px; border-radius: 12px; border: 1px solid transparent; font-family: var(--ns-font-body); line-height: 1.1; text-align: left;
  transition: transform .2s ease, box-shadow .2s ease;
}
.store-btn svg { width: 26px; height: 26px; flex: 0 0 26px; }
.store-btn span { display: flex; flex-direction: column; font-size: 19px; font-weight: 600; white-space: nowrap; }
.store-btn small { font-size: 11px; font-weight: 500; letter-spacing: .02em; }
.store-btn--apple, .store-btn--apple:hover, .store-btn--apple:focus { background: #FFF; border-color: #FFF; color: #000; }
.store-btn--google, .store-btn--google:hover, .store-btn--google:focus { background: #000; border-color: #A6A6A6; color: #FFF; }
.store-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, .35); }
@media (max-width: 575px) {
  .store-btns { width: 100%; max-width: 420px; }
  .store-btn { flex: 1 1 0; height: 54px; padding: 0 8px; gap: 8px; }
  .store-btn svg { width: 22px; height: 22px; flex-basis: 22px; }
  .store-btn span { font-size: 16px; }
  .store-btn small { font-size: 10px; }
}

/* primary (logo gradient) and dark buttons */
.ns-btn, .lp-form__row button, .cookie-btn--primary, .about-cta, .reportbug button.ns-btn, .back-to-top {
  background: var(--ns-gradient) border-box !important; border-color: transparent !important; color: #06110E !important; font-weight: 700;
  background-repeat: no-repeat !important;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.ns-btn:hover, .lp-form__row button:hover, .cookie-btn--primary:hover, .about-cta:hover, .back-to-top:hover {
  background: var(--ns-gradient) border-box !important; color: #06110E !important; filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 10px 28px rgba(12, 196, 206, .35);
}
.lp-last .lp-form__row button, .lp-last .lp-form__row button:hover { background: #0E100F !important; color: #FFF !important; filter: none; }
.lp-last .lp-form__row button:hover { background: #000 !important; }
.back-to-top i { color: #06110E !important; }

/* ---------- modal ---------- */
.store-modal {
  width: min(440px, calc(100vw - 32px)); padding: 0; border: 1px solid rgba(12, 237, 250, .25);
  border-radius: 24px; background: var(--ns-card); color: #FFF; font-family: var(--ns-font-body);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.store-modal[open] { margin: auto; } /* style.css resets margin on *, which pinned the dialog to the top-left corner */
.store-modal::backdrop { background: rgba(5, 8, 7, .72); backdrop-filter: blur(4px); }
.store-modal__body { padding: 40px 32px 32px; text-align: center; }
.store-modal__icon {
  width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(21, 252, 180, .12); color: var(--ns-green);
}
.store-modal__icon svg { width: 28px; height: 28px; }
.store-modal h3 { font-family: var(--ns-font-display); font-size: 26px; margin: 0 0 10px; color: #FFF; }
.store-modal p { color: var(--ns-muted); margin: 0 0 24px; font-size: 16px; }
.store-modal__close {
  position: absolute; top: 12px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: transparent; color: var(--ns-muted); font-size: 26px; line-height: 1; cursor: pointer;
}
.store-modal__close:hover { color: #FFF; background: rgba(255, 255, 255, .08); }

/* ---------- footer ---------- */
.site-footer {
  background: #0A0C0B; border-top: 1px solid var(--ns-line); color: #FFF;
  font-family: var(--ns-font-body); padding: 72px 0 0;
}
.site-footer__inner { padding: 0 20px; }
.site-footer__top { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; padding-bottom: 56px; }
.site-footer__brand { max-width: 360px; }
.site-footer__brand p { color: var(--ns-muted); margin: 18px 0 0; font-size: 16px; }
.site-footer__social { display: flex; gap: 14px; margin-top: 22px; }
.site-footer__social img { width: 28px; height: 28px; object-fit: contain; opacity: .8; }
.site-footer__social a:hover img { opacity: 1; }
.site-footer__cols { display: flex; gap: 88px; align-items: flex-start; justify-content: flex-start; }
.site-footer__cols div { display: flex; flex-direction: column; gap: 12px; min-width: 150px; }
.site-footer__cols h4 {
  font-family: var(--ns-font-body); font-size: 13px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: #FFF; margin: 0 0 8px;
}
.site-footer__cols a { color: var(--ns-muted); font-size: 16px; }
.site-footer__cols a:hover { color: var(--ns-green); }
.site-footer__bottom {
  display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; justify-content: center;
  border-top: 1px solid var(--ns-line); padding: 22px 0 26px; font-size: 14px; color: var(--ns-faint);
}
.site-footer__bottom a { color: var(--ns-faint); }
.site-footer__bottom a:hover { color: #FFF; }
.site-footer__bottom > * + *::before { content: '·'; margin-right: 22px; color: var(--ns-faint); }
@media (max-width: 767px) {
  .site-footer { padding-top: 52px; }
  .site-footer__top { flex-direction: column; gap: 36px; padding-bottom: 40px; }
  .site-footer__cols { gap: 40px; }
  .site-footer__cols div { min-width: 0; }
  .site-footer__bottom { flex-direction: column; gap: 8px; }
  .site-footer__bottom > * + *::before { content: none; }
}

/* ---------- cookie banner ---------- */
.cookie-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1100; max-width: 760px; margin: 0 auto;
  background: #151817; border: 1px solid rgba(12, 237, 250, .28); border-radius: 20px; padding: 20px 22px;
  color: #FFF; font-family: var(--ns-font-body); box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
}
.cookie-banner[hidden], .cookie-banner__settings[hidden] { display: none; }
.cookie-banner p { margin: 0 0 14px; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .85); }
.cookie-banner a { color: var(--ns-cyan); text-decoration: underline; }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-btn {
  min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3);
  background: transparent; color: #FFF; font: 600 15px var(--ns-font-body); cursor: pointer;
}
.cookie-btn:hover { border-color: #FFF; }
.cookie-btn--primary { background: var(--ns-green); border-color: var(--ns-green); color: var(--ns-bg); }
.cookie-btn--link { border-color: transparent; text-decoration: underline; padding: 0 8px; }
.cookie-banner__settings { display: grid; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--ns-line); }
.cookie-banner__settings label { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .8); cursor: pointer; }
.cookie-banner__settings input { -webkit-appearance: checkbox; -moz-appearance: checkbox; appearance: auto; width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; accent-color: var(--ns-green); }
.cookie-banner__settings strong { color: #FFF; }
.cookie-banner__settings .cookie-btn { justify-self: start; }
@media (max-width: 575px) { .cookie-banner__actions .cookie-btn { flex: 1 1 100%; } }

/* ---------- store buttons inside old home hero ---------- */
.hero-store-btns { margin-top: 26px; }

/* ---------- about CTA, report form ---------- */
.about-cta { display: inline-block; margin-top: 8px; padding: 14px 30px; border-radius: 999px; background: var(--ns-green); color: #0E100F !important; font-weight: 700; }
.report-consent input { -webkit-appearance: checkbox; -moz-appearance: checkbox; appearance: auto; }
.ns-btn { border-radius: 999px !important; min-height: 52px; }

/* ---------- page decorations: halftone dots and stripes with parallax ----------
   The layer sits behind the page (.ns-page); every top-level block of the page is lifted above it. */
.ns-page { position: relative; overflow-x: clip; background: var(--ns-bg, #0E100F); }
.ns-page > .lp { background: transparent; } /* the page background lives on .ns-page, so the decorations behind the content stay visible */
.ns-page > :not(.ns-decor) { position: relative; z-index: 1; }
.ns-decor, .lp-decor { position: absolute; z-index: 0; pointer-events: none; background-repeat: no-repeat; background-size: contain;
  transform: translate3d(0, var(--py, 0px), 0);
  -webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent 100%); mask-image: radial-gradient(closest-side, #000 45%, transparent 100%); }
.ns-decor { width: var(--w, 900px); }
.ns-decor--dots, .lp-decor--dots { background-image: url(../img/decor/dots-wave.svg); aspect-ratio: 900 / 520; }
.ns-decor--stripes, .lp-decor--stripes { background-image: url(../img/decor/stripes.svg); aspect-ratio: 600 / 900; }
.ns-decor.is-mirrored { transform: translate3d(0, var(--py, 0px), 0) scaleX(-1); }
@media (max-width: 767px) { .ns-decor { width: calc(var(--w, 900px) * .6); } }
/* the old full-page background pictures (big "96" watermark) are replaced by the decorations */
.ns-page > #heroAA, .ns-page > #about, .ns-page > #contact { background-image: none !important; background-color: transparent !important; }

/* ---------- header: no flicker on hover ----------
   style.css animates *every* property of the nav links (transition: all) and changes the borders of the
   social icons on hover, which made Chrome repaint the whole fixed header over the moving decorations.
   The header now has its own layer, and links only animate color/opacity. */
body > header { backface-visibility: hidden; will-change: opacity; } /* own layer without breaking the fixed mobile menu inside it */
body > header a, body > header img { transition: color .2s ease, opacity .2s ease, border-color .2s ease !important; }
body > header .socialIcons, body > header .socialIcons:hover { border: 0 !important; }
body > header .socialIcons img { opacity: .9; }
body > header .socialIcons:hover img { opacity: 1; filter: none; }
/* store buttons keep their own type sizes everywhere (the old hero CSS enlarges every span inside it) */
#leftData .store-btns .store-btn span, .store-btns .store-btn span { font-size: 19px !important; line-height: 1.1 !important; font-weight: 600 !important; margin: 0 !important; }
.store-btns .store-btn small { font-size: 11px !important; line-height: 1.1 !important; }
@media (max-width: 575px) {
  #leftData .store-btns .store-btn span, .store-btns .store-btn span { font-size: 16px !important; }
  .store-btns .store-btn small { font-size: 10px !important; }
}