@charset "UTF-8";
/*
 * Website NEO — entry SCSS dla statycznych stron Twig SSR (WebsiteController).
 * Skin Nuron (paleta gold + rose, dark theme, particles bg) — port 1:1 z play-v3.
 *
 * Kolejnosc importow ma znaczenie:
 *   1. nuron tokens (CSS vars, mixins, animations)
 *   2. layout (grid, container, sekcje, body)
 *   3. komponenty (topbar, footer, particles, button, hero stub)
 *
 * Nie uzywamy Tailwinda na Website — wszystkie klasy utility piszemy explicit.
 *
 * Patrz _doc/web/website-neo.md.
 */
/*
 * Nuron design tokens + utilities adapted for Prive play-v3.
 * Imports (kolejnosc ma znaczenie):
 *   1. Variables — CSS vars z Nuron (paleta, typografia, spacing, transitions)
 *   2. Brand override — nadpisywanie palety pod Prive purple
 *   3. Mixins — responsywne breakpointy ($sm-layout itd.)
 *   4. Animations — @keyframes i utility classes
 *   5. Text animation — font-based animations
 *   6. Sal — scroll animation classes (pod sal.js)
 *
 * Pominiete z Nuron defaultu (kolidowaly by z Tailwind/naszym layoutem):
 *   - _reset.scss      (Tailwind preflight + wlasny reset)
 *   - _typography.scss (body fonts juz zdefiniowane przez nas)
 *   - _spacing.scss    (Tailwind utilities robia to samo)
 *   - _forms.scss      (mamy wlasny .form-input)
 *   - _common.scss     (global helpers, czesc kolidowalaby)
 *   - _shortcode.scss  (buttony — mamy wlasne)
 *
 * Nuron `elements/` (banner, service, accordion itd.) importujemy selektywnie
 * per ekran ktory portujemy.
 */
:root {
  --color-primary: #00a3ff;
  --color-primary-alta: #212e48;
  --color-gray: #f6f6f6;
  --color-gray-2: #f5f8fa;
  --color-subtitle: #f9004d;
  --background-color-1: #24243557;
  --background-color-2: #13131d;
  --background-color-3: #151521;
  --background-color-4: #242435;
  --gradient-one: linear-gradient(to right bottom, #2899d8, #00a3ff);
  --color-heading: #ffffff;
  --color-body: #acacac;
  --color-dark: rgb(29, 29, 29);
  --color-light-heading: #181c32;
  --color-light-body: #65676b;
  --color-border-white: #00000024;
  --color-midgray: #878787;
  --color-light: #E4E6EA;
  --color-lighter: #CED0D4;
  --color-lightest: #F0F2F5;
  --color-border: #ffffff14;
  --color-white: #ffffff;
  --color-white-75: rgba(255, 255, 255, 0.75);
  --color-success: #3EB75E;
  --color-danger: #FF0003;
  --color-warning: #FF8F3C;
  --color-info: #1BA2DB;
  --color-facebook: #3B5997;
  --color-twitter: #1BA1F2;
  --color-youtube: #ED4141;
  --color-linkedin: #0077B5;
  --color-pinterest: #E60022;
  --color-instagram: #C231A1;
  --color-vimeo: #00ADEF;
  --color-twitch: #6441A3;
  --color-discord: #7289da;
  --p-light: 300;
  --p-regular: 400;
  --p-medium: 500;
  --p-semi-bold: 600;
  --p-bold: 700;
  --p-extra-bold: 800;
  --p-black: 900;
  --s-light: 300;
  --s-regular: 400;
  --s-medium: 500;
  --s-semi-bold: 600;
  --s-bold: 700;
  --s-extra-bold: 800;
  --s-black: 900;
  --transition: 0.4s;
  --font-primary: "Roboto", sans-serif;
  --font-secondary: "Roboto", sans-serif;
  --font-size-b1: 14px;
  --font-size-b2: 18px;
  --font-size-b3: 22px;
  --line-height-b1: 1.50;
  --line-height-b2: 1.6;
  --line-height-b3: 1.7;
  --h1: 50px;
  --h2: 36px;
  --h3: 32px;
  --h4: 26px;
  --h5: 22px;
  --h6: 20px;
}

/*
 * Prive brand override — DARK THEME (zgodnie z Nuron demo12).
 *
 * Nuron default juz jest dark. Zmieniamy tylko akcenty pod Prive:
 *  - color-primary (crypto blue) → brand purple
 *  - color-subtitle (red) → magenta
 *  - gradient purple→magenta
 *
 * Reszta (dark backgrounds, white headings, muted body text) pozostaje
 * z Nuron default.
 */
:root {
  --color-primary: #e6c38a;
  --color-primary-alta: #c9a961;
  --color-gold-deep: #a38044;
  --color-subtitle: #d47a7a;
  --color-rose-deep: #b85a5a;
  --gradient-one: linear-gradient(135deg, #e6c38a 0%, #d47a7a 100%);
  --background-color-1: #0e0f14;
  --background-color-2: #13131d;
  --background-color-3: #1a1a28;
  --background-color-4: #242435;
  --color-surface: #161622;
  --color-surface-2: #1d1d2c;
  --color-heading: #ffffff;
  --color-body: #acacac;
  --color-dark: #0e0f14;
  --color-white: #ffffff;
  --color-white-75: rgba(255, 255, 255, 0.75);
  --color-white-50: rgba(255, 255, 255, 0.5);
  --color-border: rgba(255, 255, 255, 0.1);
  --color-border-strong: rgba(255, 255, 255, 0.18);
  --text: #ffffff;
  --text-default: #ffffff;
  --text-muted: #acacac;
  --border-soft: rgba(255, 255, 255, 0.1);
  --bg-soft: #1a1a28;
  --brand: #e6c38a;
  --brand-deep: #a38044;
  --surface: #161622;
  --surface-muted: #1d1d2c;
}

/*!
Animate.css - http://daneden.me/animate
Version - 3.4.0
Licensed under the MIT license - http://opensource.org/licenses/MIT

Copyright (c) 2015 Daniel Eden
*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.bounceIn,
.animated.bounceOut {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
}

.animated.flipOutX,
.animated.flipOutY {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
}

@-webkit-keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}
@keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}
.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

@-webkit-keyframes flash {
  from, 50%, to {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
@keyframes flash {
  from, 50%, to {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}

@-webkit-keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
@keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
.swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}

@-webkit-keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  10%, 20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  10%, 20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes wobble {
  from {
    -webkit-transform: none;
    transform: none;
  }
  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }
  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }
  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }
  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }
  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }
  to {
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes wobble {
  from {
    -webkit-transform: none;
    transform: none;
  }
  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }
  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }
  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }
  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }
  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }
  to {
    -webkit-transform: none;
    transform: none;
  }
}
.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}

@-webkit-keyframes jello {
  from, 11.1%, to {
    -webkit-transform: none;
    transform: none;
  }
  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }
  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }
  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }
  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }
  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }
  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}
@keyframes jello {
  from, 11.1%, to {
    -webkit-transform: none;
    transform: none;
  }
  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }
  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }
  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }
  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }
  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }
  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}
.jello {
  -webkit-animation-name: jello;
  animation-name: jello;
  -webkit-transform-origin: center;
  transform-origin: center;
}

@-webkit-keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }
  to {
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }
  to {
    -webkit-transform: none;
    transform: none;
  }
}
.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }
  to {
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }
  to {
    -webkit-transform: none;
    transform: none;
  }
}
.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }
  to {
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }
  to {
    -webkit-transform: none;
    transform: none;
  }
}
.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}
@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}
.bounceOut {
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes fadeOutDown {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
@keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
@keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes fadeOutRight {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
@keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes fadeOutUp {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}
@keyframes flip {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}
.animated.flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}

@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
.flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
@keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
.flipOutX {
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}
@keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}
.flipOutY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}

@-webkit-keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1;
  }
  to {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
@keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1;
  }
  to {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}
@keyframes lightSpeedOut {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}
.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
@keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
@keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
@keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
@keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
@keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}
@keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}
.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}
@keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}
.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
@keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
@keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}
@keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}
.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  20%, 60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  40%, 80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}
@keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  20%, 60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  40%, 80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}
.hinge {
  -webkit-animation-name: hinge;
  animation-name: hinge;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}
@keyframes rollOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}
.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}

@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

@-webkit-keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}

@-webkit-keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft;
}

@-webkit-keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}

@-webkit-keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}

@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
@keyframes zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
.zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}

@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
}

@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}
@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}
.zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft;
}

@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}
@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}
.zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight;
}

@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp;
}

@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}

@-webkit-keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
.slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown;
}

@-webkit-keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}

@keyframes customOne {
  0% {
    -webkit-transform: translateY(-50%) scale(0);
    transform: translateY(-50%) scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(-50%) scale(1.3);
    transform: translateY(-50%) scale(1.3);
    opacity: 0;
  }
}
@keyframes liveAuction {
  0% {
    background: var(--color-white);
  }
  100% {
    background: var(--color-danger);
  }
}
.cd-intro {
  margin: 4em auto;
}

@media only screen and (min-width: 768px) {
  .cd-intro {
    margin: 5em auto;
  }
}
@media only screen and (min-width: 1170px) {
  .cd-intro {
    margin: 6em auto;
  }
}
.cd-headline {
  font-size: 3rem;
  line-height: 1.2;
}

@media only screen and (min-width: 768px) {
  .cd-headline {
    font-size: 4.4rem;
    font-weight: 300;
  }
}
@media only screen and (min-width: 1170px) {
  .cd-headline {
    font-size: 48px;
  }
}
@media only screen and (max-width: 768px) {
  .cd-headline {
    font-size: 40px;
  }
}
@media only screen and (max-width: 479px) {
  .cd-headline {
    font-size: 26px;
  }
}
.cd-words-wrapper {
  display: inline-block;
  position: relative;
  text-align: left;
}

.cd-words-wrapper b {
  display: inline-block;
  position: absolute;
  white-space: nowrap;
  left: 0;
  top: 0;
}

.cd-words-wrapper b.is-visible {
  position: relative;
}

.no-js .cd-words-wrapper b {
  opacity: 0;
}

.no-js .cd-words-wrapper b.is-visible {
  opacity: 1;
}

/* -------------------------------- 

xclip 

-------------------------------- */
.cd-headline.clip span {
  display: inline-block;
  padding: 0;
}

.cd-headline.clip .cd-words-wrapper {
  overflow: hidden;
  vertical-align: middle;
}

.cd-headline.clip .cd-words-wrapper::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 2px;
  height: 80%;
  background-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-50%);
}

.cd-headline.clip b {
  opacity: 0;
}

.cd-headline.clip b.is-visible {
  opacity: 1;
}

/*
 * Nuron-kit — warstwa wizualna nad Nuron tokenami.
 * Klasy utility dopasowane do potrzeb play-v3 (wizard, quiz, raport).
 * Nazwy prefixed .nk-* zeby nie kolidowaly z Tailwind ani legacy.
 */
/* ─────────────────────────────────────────
 * HEADINGS (Nuron duze, bold, letter-spacing)
 * ───────────────────────────────────────── */
.nk-heading-xl {
  font-size: 2.75rem;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-heading);
}
@media (min-width: 640px) {
  .nk-heading-xl {
    font-size: 3.5rem;
  }
}

.nk-heading-lg {
  font-size: 2rem;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-heading);
}
@media (min-width: 640px) {
  .nk-heading-lg {
    font-size: 2.5rem;
  }
}

.nk-heading-md {
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

.nk-pre-title {
  display: inline-block;
  color: var(--color-primary);
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 0.5rem;
}

.nk-subtitle {
  display: inline-block;
  color: var(--color-subtitle);
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.nk-post-title {
  font-size: 1rem;
  color: var(--color-body);
  line-height: 1.55;
}

/* ─────────────────────────────────────────
 * BUTTONS (rozmiar, radius, hover, gradient)
 * ───────────────────────────────────────── */
.nk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.75rem 1.25rem;
  border-radius: 0.625rem;
  border: 0 none;
  letter-spacing: 0.02em;
  transition: var(--transition, 0.3s ease);
  cursor: pointer;
  text-decoration: none;
  outline: none;
}
.nk-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(230, 195, 138, 0.4);
}
.nk-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.nk-btn-primary {
  background: var(--color-primary);
  color: #fff;
}
.nk-btn-primary:hover:not(:disabled) {
  background: var(--color-primary-alta);
}

.nk-btn-gradient {
  background: var(--gradient-one);
  color: #fff;
  box-shadow: 0 12px 28px -10px rgba(230, 195, 138, 0.55);
}
.nk-btn-gradient:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px -10px rgba(230, 195, 138, 0.7);
}
.nk-btn-gradient:active:not(:disabled) {
  transform: translateY(1px);
}

.nk-btn-large {
  display: block;
  width: 100%;
  padding: 1rem 1.5rem;
  font-size: 1.0625rem;
  border-radius: 0.75rem;
}
@media (min-width: 640px) {
  .nk-btn-large {
    display: inline-flex;
    width: auto;
    min-width: 280px;
    padding: 1rem 3.5rem;
  }
}

.nk-btn-small {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

.nk-btn-ghost {
  background: transparent;
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
}
.nk-btn-ghost:hover:not(:disabled) {
  background: rgba(230, 195, 138, 0.12);
}

/* ─────────────────────────────────────────
 * CARDS (elevated, hover-up, radial tint)
 * ───────────────────────────────────────── */
.nk-card {
  position: relative;
  background: var(--color-surface, #161622);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  color: var(--color-body, #acacac);
}
@media (min-width: 640px) {
  .nk-card {
    padding: 1.75rem;
  }
}

.nk-card-hover {
  cursor: pointer;
}
.nk-card-hover:hover {
  transform: translateY(-4px);
  border-color: rgba(230, 195, 138, 0.35);
  box-shadow: 0 24px 44px -16px rgba(230, 195, 138, 0.3);
}

.nk-card-bordered {
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
}

.nk-card-gradient {
  background: radial-gradient(circle at 0% 0%, rgba(230, 195, 138, 0.18), transparent 55%), radial-gradient(circle at 100% 100%, rgba(212, 122, 122, 0.14), transparent 55%), var(--color-surface, #161622);
}

/* ─────────────────────────────────────────
 * BANNER (hero full width z subtlym gradientem)
 * ───────────────────────────────────────── */
.nk-banner {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
  padding: 2rem 1.5rem;
  background: radial-gradient(ellipse at 20% 0%, rgba(230, 195, 138, 0.35), transparent 60%), radial-gradient(ellipse at 100% 100%, rgba(212, 122, 122, 0.28), transparent 55%), linear-gradient(180deg, #13131d 0%, #0e0f14 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 50px -25px rgba(0, 0, 0, 0.6);
}
@media (min-width: 640px) {
  .nk-banner {
    padding: 3rem 2.5rem;
  }
}

.nk-banner-lg {
  padding: 3rem 1.5rem;
}
@media (min-width: 640px) {
  .nk-banner-lg {
    padding: 4rem 3rem;
  }
}

.nk-banner-content {
  position: relative;
  max-width: 44rem;
  margin: 0 auto;
  text-align: center;
}

/* ─────────────────────────────────────────
 * PILL / BADGE
 * ───────────────────────────────────────── */
.nk-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nk-pill-filled {
  background: var(--color-primary);
  color: #fff;
}

.nk-pill-soft {
  background: rgba(230, 195, 138, 0.15);
  color: var(--color-primary);
}

.nk-pill-outline {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid rgba(230, 195, 138, 0.35);
}

/* ─────────────────────────────────────────
 * SECTION TITLE (duzy, z border-bottom akcent)
 * ───────────────────────────────────────── */
.nk-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.nk-section-title {
  font-size: 1.875rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-heading, #ffffff);
}
@media (min-width: 640px) {
  .nk-section-title {
    font-size: 2.125rem;
  }
}

.nk-section-count {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-body);
}

/* ─────────────────────────────────────────
 * FORM (input z widoczna ramka + brand focus)
 * ───────────────────────────────────────── */
.nk-input {
  width: 100%;
  background: var(--color-surface, #161622);
  border: 1.5px solid var(--color-border, rgba(255, 255, 255, 0.12));
  border-radius: 0.75rem;
  padding: 0.875rem 1rem;
  font-size: 1rem;
  color: var(--color-heading, #ffffff);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.nk-input::placeholder {
  color: rgba(172, 172, 172, 0.6);
}
.nk-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(230, 195, 138, 0.25);
}

.nk-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-heading);
}

/* ─────────────────────────────────────────
 * HOVER-UP (subtle lift transition)
 * ───────────────────────────────────────── */
.nk-hover-up {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.nk-hover-up:hover {
  transform: translateY(-3px);
}

/* ─────────────────────────────────────────
 * DIVIDER
 * ───────────────────────────────────────── */
.nk-divider {
  height: 1px;
  background: var(--color-border);
  margin: 1.5rem 0;
  border: 0 none;
}

/* ─────────────────────────────────────────
 * GRADIENT TEXT (dla akcentow)
 * ───────────────────────────────────────── */
.nk-gradient-text {
  background: var(--gradient-one);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ─────────────────────────────────────────
 * BG IMAGE UTILITIES (port z Nuron _shortcode.scss)
 * ───────────────────────────────────────── */
.bg_image {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.bg_image--23 {
  /* TODO: dodac bg image przy migracji hero (przeniesc do public/img/). */
}

/* Hero z bg waves — opacity gradientowe 80% góra → 0% dół.
 * Warstwa gradientu siedzi nad obrazem: rgba(body,0.2) na górze (= 80% obraz widoczny)
 * → rgba(body,1.0) na dole (= 0% obraz widoczny, ciągłe przejście w tło). */
.bg_image--wave {
  background-image: linear-gradient(to bottom, rgba(25, 25, 37, 0.3) 0%, rgba(25, 25, 37, 0.15) 100%);
  /* TODO: dodac url() z bg waves przy migracji hero. */
}

/* ─────────────────────────────────────────
 * BANNER 12 — Hero z Nuron demo12 (port 1:1)
 * Klasy: .banner-area.banner-12.bg_image.bg_image--23.with-down-shadow
 *        > .container > .row > .col > .banner-xii-wrapper
 *          > .banner-content-wrapper > .pre-title + .title + .post-title + .btn + .wallet-image-wrapper
 * ───────────────────────────────────────── */
@media (max-width: 767px) {
  .banner-12 {
    padding: 60px 0 !important;
  }
}

/* ::after — ciemna strefa przy górze hero (pod nagłówkiem).
 * 0deg = to top: transparent na dole → solid #191925 przy górze (87%).
 * ::before usuniete — obraz sam wygasa do 0% opacity na dole. */
.with-down-shadow {
  position: relative;
  z-index: 1;
}
.with-down-shadow::after {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  content: "";
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(0deg, rgba(25, 25, 37, 0) 0%, #191925 87%);
}

.banner-xii-wrapper {
  position: relative;
  z-index: 2; /* nad .with-down-shadow::before/::after (z-index: 1) */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh;
}
.banner-xii-wrapper .banner-content-wrapper {
  text-align: center;
  width: 50%;
}
@media (max-width: 991px) {
  .banner-xii-wrapper .banner-content-wrapper {
    width: 70%;
  }
}
@media (max-width: 767px) {
  .banner-xii-wrapper .banner-content-wrapper {
    width: 100%;
  }
}
.banner-xii-wrapper .banner-content-wrapper .pre-title {
  margin-bottom: 10px;
  color: var(--color-primary);
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 1px;
}
.banner-xii-wrapper .banner-content-wrapper .title {
  margin-bottom: 20px;
  color: var(--color-heading);
  font-size: 60px;
  line-height: 72px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
@media (max-width: 1199px) {
  .banner-xii-wrapper .banner-content-wrapper .title {
    font-size: 52px;
    line-height: 64px;
  }
}
@media (max-width: 991px) {
  .banner-xii-wrapper .banner-content-wrapper .title {
    font-size: 44px;
    line-height: 54px;
  }
}
@media (max-width: 767px) {
  .banner-xii-wrapper .banner-content-wrapper .title {
    font-size: 34px;
    line-height: 42px;
  }
}
.banner-xii-wrapper .banner-content-wrapper .post-title {
  margin-bottom: 30px;
  color: var(--color-body);
  font-size: 16px;
  line-height: 28px;
}
.banner-xii-wrapper .banner-content-wrapper .wallet-image-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 60px;
  margin-right: -15px;
  flex-wrap: wrap;
}
.banner-xii-wrapper .banner-content-wrapper .wallet-image-wrapper .avatar {
  padding: 10px;
  background: var(--background-color-1);
  margin-right: 15px;
  border-radius: 6px;
  margin-bottom: 15px;
  border: 1px solid var(--color-border);
  z-index: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  min-height: 60px;
}

/* Banner-area wrapper (port z Nuron layoutu). Nie ma direct rule
 * w Nuron SCSS — domyslnie dziedziczy od .bg_image. */
.banner-area {
  position: relative;
  overflow: hidden;
}

/* FULL-BLEED breakout — hero wychodzi poza max-w contaner SPA,
 * ciagnie sie na 100vw jak w demo. */
.nk-full-bleed {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: none;
}

/* ─────────────────────────────────────────
 * PARTICLES.JS — port 1:1 ze splash (rainbowit.net/splash/vue/nuron/)
 * CSS linia 6415-6426 style.css splash.
 * ───────────────────────────────────────── */
#particles-js {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 0;
  top: 0;
  left: 0;
  z-index: -1;
}

.with-particles {
  position: relative;
  z-index: 1;
}

/*
 * Layout — grid glowny strony NEO.
 * Page = TopBar (fixed) + main (z padding-top = --topbar-h) + Footer.
 * Particles renderowane jako fixed background (z-index: -1) za main contentem.
 */
:root {
  --topbar-h: 64px;
  --container-max: 1200px;
  --container-px: 1rem;
  /* Test zestawu: Fraunces (naglowki, szeryf display) + Inter (reszta).
   * Linkowane w baseWebsiteNeo.html.twig (Google Fonts). */
  --font-heading: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
}

@media (min-width: 640px) {
  :root {
    --topbar-h: 80px;
    --container-px: 1.5rem;
  }
}
html, body {
  margin: 0;
  padding: 0;
  overscroll-behavior-y: contain;
}

body.neo-page {
  background-color: #191925;
  color: var(--color-body, #acacac);
  font-family: var(--font-body);
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Noise texture — port 1:1 z raportu/SPA (play-v3 main.css: body::before,
 * rebeccapurple @ 5% opacity, noise.gif). Siedzi pod #particles-js (z-index -1)
 * i pod contentem (.neo-main z-index 1). */
body.neo-page::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("bg/noise-8f23b125e4e217b15f44a7afa3d73843.gif");
  background-color: rebeccapurple;
  opacity: 0.05;
  z-index: -2;
  pointer-events: none;
}

.neo-main {
  padding-top: var(--topbar-h);
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  z-index: 1;
}

.neo-container {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-px);
  padding-right: var(--container-px);
  width: 100%;
  box-sizing: border-box;
}

.neo-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (min-width: 768px) {
  .neo-section {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}
/*
 * TopBar — port z assets/play-v3/src/components/layout/TopBar.vue (style scoped).
 * Roznica vs SPA: dodajemy linki nawigacyjne (Home, How it works, Concept, Contact)
 * zamiast pustych spacer kolumn po obu stronach logo.
 *
 * Glassy backdrop-filter po scroll'u (>30px) — toggleowane klasa .is-scrolled
 * dodawana w assets/websiteNeo.js.
 */
/* Skip-to-content — pierwszy fokusowalny element, widoczny tylko na :focus (WCAG 2.4.1). */
.neo-skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 100000;
  padding: 0.6rem 1.1rem;
  border-radius: 0 0 8px 8px;
  background: var(--color-primary, #e6c38a);
  color: #191925;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}

.neo-skip-link:focus {
  top: 0;
}

.neo-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: transparent;
  transition: background 0.35s ease, box-shadow 0.35s ease;
}

.neo-topbar.is-scrolled {
  background: rgba(25, 25, 37, 0.88);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 2px 20px -8px rgba(0, 0, 0, 0.4);
}

.neo-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--topbar-h);
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-px);
  padding-right: var(--container-px);
  gap: 1.5rem;
  /* relative — kotwica dla absolutnie wycentrowanego logo na mobile (Opcja B,
     spójność z topbarem raportu SPA). */
  position: relative;
}

/* ── Mobile (<768): logo wycentrowane jak w raporcie ──────────────────
   Układ: [burger] —— ⟨logo⟩ —— [język]. CTA przeniesione do drawera.
   Burger (pierwsze dziecko inner) trzyma lewą, język (jedyny w __right) prawą,
   logo absolutnie na środku niezależnie od szerokości bocznych elementów. */
@media (max-width: 767px) {
  .neo-topbar__logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  /* CTA znika z paska (jest w drawerze burgera). */
  .neo-topbar__cta.neo-btn {
    display: none;
  }
}
/* Logo + nav zgrupowane po lewej (wzor Nuron .header-left). */
.neo-topbar__left {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  min-width: 0;
}

.neo-topbar__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.neo-topbar__logo img {
  height: 32px;
  width: auto;
  display: block;
}

@media (min-width: 640px) {
  .neo-topbar__logo img {
    height: 45px;
  }
}
.neo-topbar__nav {
  display: none;
  justify-content: flex-start;
  gap: 2rem;
}

@media (min-width: 768px) {
  .neo-topbar__nav {
    display: flex;
  }
}
.neo-topbar__link {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color 0.15s ease;
  white-space: nowrap;
}

.neo-topbar__link:hover,
.neo-topbar__link:focus-visible {
  color: var(--color-primary, #e6c38a);
}

/* Aktywna podstrona — link nawigacji podświetlony + złota podkreślka. */
.neo-topbar__link.is-active {
  color: var(--color-primary, #e6c38a);
  font-weight: 600;
  position: relative;
}

.neo-topbar__link.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.4rem;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(135deg, #e6c38a 0%, #d47a7a 100%);
}

.neo-topbar__right {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: flex-end;
}

@media (min-width: 768px) {
  .neo-topbar__right {
    gap: 0.75rem;
  }
}
/* Przelacznik jezyka — wlasny dropdown z flagami SVG. Przycisk (flaga + kod +
 * chevron) rozwija liste opcji. Stan otwarcia przez klase .is-open (JS). */
.neo-lang {
  position: relative;
}

.neo-lang__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0.5rem;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.5rem;
  cursor: pointer;
  outline: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.neo-lang__toggle:hover,
.neo-lang.is-open .neo-lang__toggle {
  background-color: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}

.neo-lang__flag {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

.neo-lang__chev {
  transition: transform 0.2s ease;
}

.neo-lang.is-open .neo-lang__chev {
  transform: rotate(180deg);
}

.neo-lang__menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 9.5rem;
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  background: rgba(25, 25, 37, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.6rem;
  box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  /* Domyslnie ukryte; .is-open pokazuje. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 60;
}

.neo-lang.is-open .neo-lang__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.neo-lang__option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.55rem;
  border-radius: 0.4rem;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}

.neo-lang__option img {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
}

.neo-lang__option:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.neo-lang__option.is-active {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

/* ── CTA w pasku (stałe, wszystkie szerokości) ── */
/* Compound `.neo-topbar__cta.neo-btn` — bije sama `.neo-btn` (rowna specyficznosc,
   ale _button.scss jest importowany PO _topbar.scss w main.scss, wiec bez podbicia
   specyficznosci wygrywalby padding z .neo-btn). */
.neo-topbar__cta.neo-btn {
  white-space: nowrap;
  padding: 0.45rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
}

@media (max-width: 479px) {
  .neo-topbar__cta.neo-btn {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
  }
}
/* ── Burger (tylko < 768px, tam gdzie znika nav desktop) ── */
.neo-topbar__burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

@media (min-width: 768px) {
  .neo-topbar__burger {
    display: none;
  }
}
.neo-topbar__burger-bar {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.85);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.neo-topbar__burger.is-open .neo-topbar__burger-bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.neo-topbar__burger.is-open .neo-topbar__burger-bar:nth-child(2) {
  opacity: 0;
}

.neo-topbar__burger.is-open .neo-topbar__burger-bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ── Panel nawigacji mobilnej ── */
.neo-mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem var(--container-px, 1rem) 1rem;
  background: rgba(19, 19, 29, 0.97);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.neo-mobile-nav[hidden] {
  display: none;
}

@media (min-width: 768px) {
  .neo-mobile-nav {
    display: none;
  }
}
/* Główne CTA na górze drawera (przeniesione z paska) — pełna szerokość,
   wyraźny odstęp od linków nawigacji poniżej. */
.neo-mobile-nav__cta.neo-btn {
  width: 100%;
  margin-bottom: 0.6rem;
}

.neo-mobile-nav__link {
  display: block;
  padding: 0.85rem 0.5rem;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 1.05rem;
  border-radius: 8px;
}

.neo-mobile-nav__link:hover,
.neo-mobile-nav__link.is-active {
  color: var(--color-primary, #e6c38a);
  background: rgba(255, 255, 255, 0.04);
}

/*
 * Footer — minimal stub do PR #1.
 * Pelny port z Nuron demo12 nastapi w PR z sekcjami home (lub osobnym PR-em).
 */
.neo-footer {
  border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  background-color: var(--background-color-2, #13131d);
  color: var(--color-white-50, rgba(255, 255, 255, 0.5));
  position: relative;
  z-index: 1;
}

.neo-footer__inner {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-px);
  padding-right: var(--container-px);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
  text-align: center;
}

@media (min-width: 768px) {
  .neo-footer__inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}
.neo-footer__brand {
  font-size: 0.875rem;
}

.neo-footer__nav {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.neo-footer__link {
  color: var(--color-white-75, rgba(255, 255, 255, 0.75));
  font-size: 0.875rem;
  text-decoration: none;
  transition: color 0.15s ease;
}

.neo-footer__link:hover,
.neo-footer__link:focus-visible {
  color: var(--color-primary, #e6c38a);
}

.neo-footer__link.is-active {
  color: var(--color-primary, #e6c38a);
  font-weight: 600;
}

/* Footer SEO-hub landingów (_navLandingsNeo) */
.neo-footer__landings {
  /* Pelna szerokosc, zeby divider (border-bottom miedzy SEO a stopka wlasciwa)
   * szedl edge-to-edge. Tresc kapowana osobno na .neo-footer__landings-list. */
  margin: 0 0 2.25rem;
  padding: 0 1.5rem 2.25rem;
  text-align: center;
  border-bottom: 1px solid rgba(245, 233, 214, 0.1);
}

.neo-footer__landings-title {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #e6c38a;
  margin-bottom: 1rem;
}

.neo-footer__landings-list {
  list-style: none;
  max-width: 62rem;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.25rem;
}

.neo-footer__landing-link {
  font-size: 0.85rem;
  color: rgba(245, 233, 214, 0.6);
}
.neo-footer__landing-link:hover, .neo-footer__landing-link:focus-visible {
  color: var(--color-primary, #e6c38a);
}

/* Mobile (<768px): kompaktowa stopka — linki nawigacji wijaly sie na 2-3 wiersze
 * z duzymi odstepami, a sekcja SEO (landingi) dokladala sporo pionu. Zbijamy
 * padding, gapy i marginesy. */
@media (max-width: 767px) {
  .neo-footer {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
  }
  .neo-footer__inner {
    gap: 1rem;
  }
  .neo-footer__nav {
    gap: 0.5rem 1.1rem;
  }
  .neo-footer__landings {
    margin-bottom: 1.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 1.5rem;
  }
  .neo-footer__landings-title {
    margin-bottom: 0.75rem;
  }
  .neo-footer__landings-list {
    gap: 0.4rem 0.9rem;
  }
}
/*
 * Particles canvas — fixed background warstwa za main contentem.
 * Init w assets/websiteNeo.js, config 1:1 z play-v3/ParticleBackground.vue.
 */
#particles-js {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Cala interaktywnosc particles.js obsluguje canvas wewnatrz #particles-js,
   * ktory ma wlasne pointer-events: auto. Wrapper przezroczysty dla scrolla
   * i klikow w content. */
}

#particles-js > canvas {
  pointer-events: auto;
}

/*
 * Button NEO — utility CTA.
 * Wzor: Nuron .btn-default (gradient gold->rose, white text, hover lift).
 */
.neo-btn {
  /* NEO nie ma globalnego resetu box-sizing — bez tego `width: 100%` (np. hero
   * CTA na mobile) + poziomy padding rozpychaja przycisk poza kontener i wyłazi
   * w prawo poza viewport. border-box trzyma szerokosc w ryzach. */
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.75rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  white-space: nowrap;
}

.neo-btn--primary {
  background: var(--gradient-one, linear-gradient(135deg, #e6c38a 0%, #d47a7a 100%));
  color: #0e0f14;
  box-shadow: 0 4px 14px rgba(230, 195, 138, 0.25);
}

.neo-btn--primary:hover,
.neo-btn--primary:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(230, 195, 138, 0.35);
}

.neo-btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.neo-btn--ghost:hover,
.neo-btn--ghost:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
}

.neo-btn--lg {
  padding: 1rem 2.25rem;
  font-size: 1.125rem;
}

/* Mobile (<640px): główne CTA (złote, --lg) zawsze na pełną szerokość — spójnie
 * na całym website (landing, cta-band, kroki, katalog itd.). Inline-flex + auto
 * width zostawiał przyciski przyklejone do lewej / wycentrowane, niespójnie.
 * NIE dotyczy: topbar CTA (.neo-topbar__cta, bez --lg) i pricing table (bez --lg).
 * Hero przełącza się na rząd dwóch przycisków dopiero ≥640 (własny override). */
@media (max-width: 639px) {
  .neo-btn--primary.neo-btn--lg {
    width: 100%;
  }
}
/*
 * Hero stub — pusty placeholder home dla PR #1.
 * Pelny hero (z konkretnego komponentu Nuron demo) zastapi to w PR #2.
 */
.neo-hero-stub {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Full-bleed pod przezroczystym topbarem (jak hero raportu): wciagamy sekcje
   * o wysokosc topbara w gore, zeby tlo fali siegalo gory ekranu. Tresc (z grafika)
   * jest wycentrowana pionowo w pelnym viewporcie — symetryczny padding, bez
   * kompensacji topbara (centrum jest daleko od nav). */
  margin-top: calc(-1 * var(--topbar-h));
  padding-top: 2rem;
  padding-bottom: 2rem;
  min-height: 100vh;
  min-height: 100dvh;
  text-align: center;
  /* Halo i ring (dekoracje za zdjeciem pary) sa wieksze niz viewport na mobile
     (~524px / ~470px) i rozpychaly dokument w poziomie -> co rozciagalo tez
     fixed topbar (left:0;right:0 rosnie do scrollWidth). `clip` ucina bleed na
     krawedzi sekcji bez tworzenia scroll-containera (pionowy scroll OK). */
  overflow-x: clip;
}

/* Fala. waveBackground.png to polprzezroczyste linie na transparentnym tle.
 * Tlo hero zostaje przezroczyste — wspolny backdrop strony (#191925 + noise +
 * particles) przeswituje przez hero TAK SAMO jak przez sekcje nizej => brak szwu.
 * Sama fala to maskowana warstwa ::before zanikajaca do przezroczystosci. */
.neo-hero-stub--wave::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("../../img/web3/waveBackground-3b8d82de4bfadeb8db46efb2d1946e80.png") center top/cover no-repeat;
  /* Subtelnie jak w raporcie — fale maja sie wtapiac w tlo, nie dominowac.
   * Maska wytlumia tez gora (najgestsze fale) + zanik do przezroczystosci na dole. */
  opacity: 0.35;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 35%, transparent 78%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 35%, transparent 78%);
}

/* Slot na grafike hero nad h1 (docelowo wlasna ilustracja).
 * Mobile: full width. Desktop: ~2x wieksza, sztywne 400px. */
/* Cala tresc hero (media + h1 + lead + CTA) podjezdza do gory razem.
 * ~10% wysokosci media (desktop media = 360px -> ~36px; mobile mniejsze). */
.neo-hero-stub .neo-container {
  transform: translateY(-30px);
}

@media (min-width: 768px) {
  .neo-hero-stub .neo-container {
    transform: translateY(-36px);
  }
}
/* Mobile (<768px): topbar ma teraz WYCENTROWANE logo (Opcja B), więc wciąganie
 * hero pod pasek (margin-top:-topbar-h) + podciąganie contentu w górę powodowało,
 * że ring/grafika wchodziły pod logo. Na mobile NIE wciągamy contentu pod topbar
 * (zostaje poniżej paska) i nie podciągamy go w górę. Tło stripe i tak wspólne
 * z resztą strony, więc brak full-bleed pod paskiem jest niezauważalny. */
@media (max-width: 767px) {
  .neo-hero-stub {
    margin-top: 0;
    min-height: calc(100vh - var(--topbar-h));
    min-height: calc(100dvh - var(--topbar-h));
  }
  .neo-hero-stub .neo-container {
    transform: none;
  }
}
.neo-hero-stub__media {
  position: relative;
  margin: 0 auto 2rem auto;
  width: 90%;
}

@media (min-width: 768px) {
  .neo-hero-stub__media {
    width: 360px;
    max-width: 100%;
  }
}
/* PNG bazowe — w przeplywie, dyktuje wysokosc kontenera (grafika 1:1). */
.neo-hero-stub__img {
  display: block;
  width: 100%;
  height: auto;
}

/* Duplikat PNG przyciety do gornej polowy — lezy nad pierscieniem i zaslania
 * jego gorny luk, dzieki czemu pierscien "wchodzi" za grafike u gory.
 * inset(0 0 50% 0) = obcina dolne 50%, zostaje gora. */
.neo-hero-stub__img--cap {
  position: absolute;
  inset: 0;
  -webkit-clip-path: inset(0 0 50% 0);
  clip-path: inset(0 0 50% 0);
}

/* Pierscien: gradient pastelowy niebiesko-fioletowy (paleta osi kompatybilnosci),
 * srednica = wysokosc PNG (dotyka gory i dolu), grubosc ~50px. Donut robimy maska
 * radial-gradient (dziura + obciecie do okregu). Wolny obrot przez spin. */
.neo-hero-stub__ring {
  /* --ring-grow: o ile srednica wieksza od grafiki (relatywnie do szerokosci media).
   * --ring-shift: o ile centrum pierscienia zsuniete w dol. Rozdzielone, by mozna
   * regulowac rozmiar i pozycje niezaleznie. */
  --ring-grow: 7%;
  --ring-shift: 4.8%; /* dodatkowo ~10% grubosci ringu w gore */
  position: absolute;
  left: calc(var(--ring-grow) / -2);
  right: calc(var(--ring-grow) / -2);
  top: calc(var(--ring-shift) - var(--ring-grow) / 2);
  bottom: calc(var(--ring-grow) / -2 - var(--ring-shift));
  border-radius: 50%;
  /* Rdzen: monochromatyczne, ciemne indygo z palety tla (#191925) — bez cieplych
   * akcentow. Tylko subtelny sheen: jeden punkt delikatnie jasniejszy (#34334a) +
   * ciemniejsze partie (#121119), wszystko blisko backdropu, by ring ledwo "blyszczal". */
  background: conic-gradient(from 0deg, #16161f 0%, #222234 28%, #34334a 50%, #1d1d2c 74%, #16161f 100%);
  /* Grubosc obwodki relatywnie: ~15.6% promienia (13% +20%). */
  -webkit-mask: radial-gradient(circle closest-side, transparent 84.4%, #000 84.4%, #000 100%, transparent 100%);
  mask: radial-gradient(circle closest-side, transparent 84.4%, #000 84.4%, #000 100%, transparent 100%);
  animation: neo-hero-ring-spin 13s linear infinite;
  will-change: transform;
  pointer-events: none;
}

/* Halo — rozmyta poswiata wokol rdzenia. OSOBNY element (rodzenstwo rdzenia, nie
 * jego dziecko): maska rdzenia przycinalaby tez jego poswiate. Koncentryczne z
 * rdzeniem, ale 4% wieksze na kazda strone -> bloom wychodzi na zewnatrz.
 * Szybszy obrot niz rdzen (9s vs 13s) => zmienna gra warstw. */
.neo-hero-stub__halo {
  --ring-grow: 7%;
  --ring-shift: 4.8%;
  position: absolute;
  left: calc(var(--ring-grow) / -2 - 4%);
  right: calc(var(--ring-grow) / -2 - 4%);
  top: calc(var(--ring-shift) - var(--ring-grow) / 2 - 4%);
  bottom: calc(var(--ring-grow) / -2 - var(--ring-shift) - 4%);
  border-radius: 50%;
  background: conic-gradient(from 0deg, #1c1c2c 0%, #2a2940 25%, #34334a 50%, #1d1c2e 75%, #1c1c2c 100%);
  -webkit-mask: radial-gradient(circle closest-side, transparent 80%, #000 80%, #000 100%, transparent 100%);
  mask: radial-gradient(circle closest-side, transparent 80%, #000 80%, #000 100%, transparent 100%);
  filter: blur(12px);
  opacity: 0.5;
  animation: neo-hero-ring-spin 9s linear infinite;
  will-change: transform;
  pointer-events: none;
}

@keyframes neo-hero-ring-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .neo-hero-stub__ring,
  .neo-hero-stub__halo {
    animation: none;
  }
}
.neo-hero-stub__title {
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 50, "WONK" 1; /* pazur */
  font-size: 2.5rem;
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--color-heading, #fff);
  margin: 0 auto 1.25rem auto;
  max-width: 28ch;
  text-wrap: balance;
}

@media (min-width: 640px) {
  .neo-hero-stub__title {
    font-size: 3.5rem;
  }
}
@media (min-width: 1024px) {
  .neo-hero-stub__title {
    font-size: 4.25rem;
  }
}
.neo-hero-stub__title em {
  background: var(--gradient-one, linear-gradient(135deg, #e6c38a 0%, #d47a7a 100%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: normal;
}

.neo-hero-stub__lead {
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--color-white-75, rgba(255, 255, 255, 0.75));
  max-width: 72ch;
  margin: 0 auto 2.25rem auto;
  text-wrap: pretty;
}

@media (min-width: 640px) {
  .neo-hero-stub__lead {
    font-size: 1.25rem;
  }
}
.neo-hero-stub__ctas {
  /* Mobile: kolumna, przyciski wezsze niz pelna szerokosc (nie od krawedzi
     do krawedzi) — wycentrowane. */
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: 20rem;
  margin-left: auto;
  margin-right: auto;
}

.neo-hero-stub__ctas .neo-btn {
  width: 100%;
  /* Pelna szerokosc + dlugi tekst CTA: nadpisujemy nowrap z .neo-btn, inaczej
     min-content tekstu rozpycha viewport (poziomy scroll na waskich ekranach). */
  min-width: 0;
  white-space: normal;
}

@media (min-width: 640px) {
  .neo-hero-stub__ctas {
    /* Desktop: dwa rowne przyciski w rzedzie (flex: 1 1 0 => identyczna szerokosc). */
    flex-direction: row;
    width: auto;
    max-width: 34rem;
    margin-left: auto;
    margin-right: auto;
  }
  .neo-hero-stub__ctas .neo-btn {
    flex: 1 1 0;
    width: auto;
  }
}
/*
 * Sekcje home NEO — system nagłówków + helpery scaffoldu.
 *
 * .neo-shead = nagłówek sekcji (eyebrow + h2 + subtitle), styl spójny z
 * .neo-steps__heading (Fraunces, pazur), ale z wariantami układu, żeby kolejne
 * sekcje nie wyglądały jak powielony nagłówek "Jak działa Privé":
 *   --center    : wyśrodkowany (jak steps)
 *   (domyślny)  : do lewej
 *   --editorial : 2 kolumny na desktop (eyebrow+tytuł lewo / subtitle prawo)
 *
 * Reszta klas to placeholdery scaffoldu — do rozbudowy sekcja po sekcji.
 * Patrz _doc/web/website-neo.md (sekcja "Scaffold home").
 */
/* ── Section header ─────────────────────────── */
.neo-shead {
  margin-bottom: 3rem;
}

@media (min-width: 768px) {
  .neo-shead {
    margin-bottom: 3.5rem;
  }
}
.neo-shead__eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary, #e6c38a);
  margin-bottom: 0.85rem;
}

.neo-shead__title {
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 50, "WONK" 1;
  font-size: 2rem;
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--color-heading, #fff);
  margin: 0;
  text-wrap: balance;
}

@media (min-width: 768px) {
  .neo-shead__title {
    font-size: 2.5rem;
  }
}
.neo-shead__subtitle {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: #c9c9d4;
  max-width: 60ch;
  margin: 1rem 0 0 0;
  text-wrap: pretty;
}

/* Wyróżnienia w tekście pod nagłówkiem — żeby blok dało się skanować. */
.neo-shead__subtitle strong,
.neo-concept__lead strong,
.neo-landing__lead strong {
  color: #fff;
  font-weight: 600;
}

.neo-shead__subtitle em,
.neo-concept__lead em,
.neo-landing__lead em {
  color: #e6c38a;
  font-style: normal;
  font-weight: 600;
}

@media (min-width: 768px) {
  .neo-shead__subtitle {
    font-size: 1.125rem;
  }
}
/* center */
.neo-shead--center {
  text-align: center;
}

.neo-shead--center .neo-shead__subtitle {
  margin-left: auto;
  margin-right: auto;
}

/* editorial — 2 kolumny na desktop: eyebrow+tytuł lewo, subtitle prawo (dół) */
@media (min-width: 900px) {
  .neo-shead--editorial {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    column-gap: 3rem;
    align-items: end;
  }
  .neo-shead--editorial .neo-shead__eyebrow {
    grid-column: 1;
    grid-row: 1;
  }
  .neo-shead--editorial .neo-shead__title {
    grid-column: 1;
    grid-row: 2;
  }
  .neo-shead--editorial .neo-shead__subtitle {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
    max-width: none;
  }
}
/* ── Section z layoutem 2-kolumnowym (tekst + wizual) ── */
@media (min-width: 900px) {
  .neo-section--split .neo-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    align-items: center;
  }
  .neo-section--split.neo-section--split-reverse .neo-split__visual {
    order: -1;
  }
}
/* ── Trust strip (cienki pasek pod heroem) ── */
.neo-trust {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(19, 19, 29, 0.6);
}

.neo-trust__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* Wezszy odstep — rozdzielenie niesie subtelny separator (zlota kropka). */
  gap: 0.6rem 1rem;
  padding: 1.1rem var(--container-px);
  max-width: var(--container-max);
  margin: 0 auto;
  list-style: none;
}

.neo-trust__item {
  display: inline-flex;
  align-items: center;
  gap: 1rem; /* rowny odstepowi kolumn -> kropka wysrodkowana miedzy tekstami */
  font-size: 0.9375rem;
  color: var(--color-white-75, rgba(255, 255, 255, 0.75));
}

/* Delikatny zloty separator miedzy pozycjami (poza pierwsza). Symetryczny odstep
 * po obu stronach kropki dzieki rownym gap (lista 1rem = item 1rem). */
.neo-trust__item:not(:first-child)::before {
  content: "•";
  color: rgba(230, 195, 138, 0.5);
  font-size: 0.7em;
  line-height: 1;
}

/* ── S5 · Filary wartosci (Blizej / Smielej / Bez wstydu) ── */
.neo-pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin: 2.5rem 0 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .neo-pillars {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}
.neo-pillar {
  text-align: center;
  padding: 2.5rem 1.75rem 2rem;
  border-radius: 10px;
  /* tlo 90% — delikatnie przepuszcza backdrop strony (jak karty S3). */
  background: rgba(19, 19, 29, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.neo-pillar:hover {
  border-color: rgba(230, 195, 138, 0.35);
  transform: translateY(-4px);
}

.neo-pillar__icon {
  display: flex;
  justify-content: center;
  margin-bottom: 1.25rem;
}

/* SVG maja viewBox bez width/height — jawny wymiar konieczny (inaczej 0). */
.neo-pillar__icon img {
  display: block;
  width: 72px;
  height: 72px;
}

@media (min-width: 768px) {
  .neo-pillar__icon img {
    width: 80px;
    height: 80px;
  }
}
.neo-pillar__kicker {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary, #e6c38a);
  margin-bottom: 0.6rem;
}

.neo-pillar__title {
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 50, "WONK" 1; /* pazur */
  font-size: 1.375rem;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-white, #fff);
  margin: 0 0 0.75rem 0;
}

.neo-pillar__desc {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-body, #acacac);
  margin: 0;
}

.neo-pillars__note {
  margin: 1.75rem auto 0;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--color-white-50, rgba(255, 255, 255, 0.5));
}

/* ── Final CTA band ── */
.neo-cta-band {
  position: relative;
  z-index: 1;
  text-align: center;
}

.neo-cta-band__title {
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 50, "WONK" 1;
  font-size: 2.25rem;
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--color-heading, #fff);
  margin: 0 auto 1rem auto;
  max-width: 20ch;
  text-wrap: balance;
}

@media (min-width: 768px) {
  .neo-cta-band__title {
    font-size: 3rem;
  }
}
.neo-cta-band__subtitle {
  font-size: 1.125rem;
  color: var(--color-body, #acacac);
  margin: 0 auto 2rem auto;
  max-width: 48ch;
}

/* ── Scaffold placeholder (TYMCZASOWE — usuwamy przy rozbudowie sekcji) ── */
.neo-scaffold-note {
  border: 1px dashed rgba(230, 195, 138, 0.35);
  border-radius: 10px;
  background: rgba(230, 195, 138, 0.04);
  padding: 1.25rem 1.5rem;
  color: var(--color-body, #acacac);
  font-size: 0.95rem;
  line-height: 1.7;
}

.neo-scaffold-note > strong {
  color: var(--color-primary, #e6c38a);
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.neo-scaffold-note ul {
  margin: 0;
  padding-left: 1.1rem;
}

/* ── S4 · Radar kompatybilności (G5) ──────────────────────────────────── */
.neo-compat__grid {
  display: grid;
  gap: 2rem;
  align-items: center;
  margin-top: 2.5rem;
}

@media (min-width: 900px) {
  .neo-compat__grid {
    grid-template-columns: 1fr 1fr; /* 50 / 50 */
    gap: 3rem;
  }
}
.neo-compat__chart {
  position: relative;
  height: 300px;
  margin: 0;
}

@media (min-width: 900px) {
  .neo-compat__chart {
    height: 380px;
  }
}
.neo-compat__chart canvas {
  width: 100% !important;
  height: 100% !important;
}

.neo-compat__sample {
  text-align: center;
  color: var(--color-body, #acacac);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 0.5rem;
}

.neo-compat__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.neo-compat-axis {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 3px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  padding: 0.8rem 1rem;
}

.neo-compat-axis--sparkling {
  border-left-color: #e6c38a;
}

.neo-compat-axis--growing {
  border-left-color: #7fc7bd;
}

.neo-compat-axis--budding {
  border-left-color: #b79ce0;
}

.neo-compat-axis--potential {
  border-left-color: #8a8aa0;
}

.neo-compat-axis__top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.neo-compat-axis__icon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  object-fit: contain;
}

.neo-compat-axis__label {
  font-weight: 600;
  flex: 1 1 auto;
}

.neo-compat-axis__score {
  font-family: var(--font-heading, "Fraunces"), serif;
  font-weight: 500;
  color: var(--color-primary, #e6c38a);
}

.neo-compat-axis__insight {
  margin: 0.3rem 0 0;
  color: var(--color-body, #acacac);
  font-size: 0.9rem;
  line-height: 1.45;
  /* Home: obcinamy do 1 linii (równa wysokość kart, brak skoków przy
     przełączaniu setów). W raporcie opis zawija się swobodnie — to osobny
     komponent (.compat-axis__insight). */
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.neo-compat-axis__pct {
  margin: 0.3rem 0 0;
  color: var(--color-primary, #e6c38a);
  font-size: 0.78rem;
  font-weight: 600;
}

.neo-compat__bars {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.75rem;
}

.neo-compat__bars:empty {
  display: none;
}

.neo-compat__bar {
  position: relative;
  width: 44px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.18);
  cursor: pointer;
  overflow: hidden;
  transition: background 0.25s ease;
}

.neo-compat__bar:hover {
  background: rgba(255, 255, 255, 0.3);
}

.neo-compat__bar.is-active {
  background: rgba(230, 195, 138, 0.25);
}

.neo-compat__bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
  background: var(--color-primary, #e6c38a);
  border-radius: 2px;
}

.neo-compat__locked {
  text-align: center;
  color: var(--color-body, #acacac);
  font-size: 0.85rem;
  margin: 1.75rem 0 0;
}

.neo-compat__ai {
  text-align: center;
  color: var(--color-body, #acacac);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  margin: 0.6rem 0 0;
}
.neo-compat__ai a {
  color: var(--color-primary, #e6c38a);
  text-decoration: none;
  border-bottom: 1px solid rgba(230, 195, 138, 0.4);
}
.neo-compat__ai a:hover {
  border-bottom-color: var(--color-primary, #e6c38a);
}

.neo-compat__cta {
  text-align: center;
  margin-top: 1.5rem;
}

/* ════════════════════════════════════════════════════════════════════
   Sekcje S6–S10 (build 2026-05-29) — katalog, "shame gap", social,
   wrapped, FAQ, prywatność. Spójne z glassy/gold/dark estetyką strony.
   ════════════════════════════════════════════════════════════════════ */
/* Eyebrow w wariancie "real data" — podkreśla, że liczby są prawdziwe. */
.neo-shead__eyebrow--data {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.neo-shead__eyebrow--data::before {
  content: "●";
  color: #6fcf97;
  font-size: 0.7em;
  animation: neoLivePulse 1.8s ease-in-out infinite;
}

/* Pulsująca kropka „live" — sygnalizuje, że liczby są na żywo z bazy. */
@keyframes neoLivePulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.35;
    transform: scale(0.78);
  }
}
@media (prefers-reduced-motion: reduce) {
  .neo-shead__eyebrow--data::before,
  .neo-rating__data::before {
    animation: none;
  }
}
/* ── S6 · Intensywności + chipy ── */
.neo-intensity {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}

.neo-intensity__item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  background: rgba(19, 19, 29, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}

.neo-intensity__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.neo-intensity__name {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.05rem;
  color: #fff;
}

.neo-intensity__desc {
  display: block;
  font-size: 0.9rem;
  color: var(--color-body, #acacac);
}

.neo-catalog__cta,
.neo-wrapped__cta {
  margin-top: 2rem;
}

/* Mobile (<900px, gdzie split jest jednokolumnowy): CTA katalogu pelna szerokosc
 * + odstep do chmury tagow ponizej. Na desktopie split jest 2-kol i przycisk
 * trzyma naturalna szerokosc. */
@media (max-width: 899px) {
  .neo-catalog__cta {
    margin-bottom: 2.5rem;
  }
  .neo-catalog__cta .neo-btn {
    width: 100%;
  }
}
.neo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-content: center;
  justify-content: center;
  height: 100%;
  padding: 1rem 0;
}

.neo-chip {
  padding: 0.55rem 1.05rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--color-white-75, rgba(255, 255, 255, 0.75));
  font-size: 0.95rem;
}

.neo-chip--blur {
  color: transparent;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.55);
  user-select: none;
}

/* ── S6.5 · "Nie popełnijcie tego błędu" (shame gap) ── */
.neo-mistake__grid {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

/* Mobile (<560px): zamiast pelnoszerokich kart jedna-pod-druga — poziomy slider
 * ze scroll-snap. Karta = 80% szerokosci, wiec kolejna podglada zza prawej
 * krawedzi (sygnal "jest wiecej, przesun"). Full-bleed przez ujemne marginesy
 * kompensujace padding .neo-container, padding wewnatrz przywraca inset, a
 * scroll-padding wyrownuje snap do tej samej linii co reszta tresci. */
@media (max-width: 559px) {
  .neo-mistake__grid {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--container-px);
    margin-left: calc(-1 * var(--container-px));
    margin-right: calc(-1 * var(--container-px));
    padding: 0 var(--container-px);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .neo-mistake__grid::-webkit-scrollbar {
    display: none;
  }
  .neo-mistake-card {
    flex: 0 0 80%;
    scroll-snap-align: start;
  }
}
@media (min-width: 560px) {
  .neo-mistake__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 900px) {
  .neo-mistake__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* Spójne ze stylem kart raportu (.nft-card): powierzchnia #242435, jasny kremowy
 * thumb 1:1, obrazek contain, tytuł + gradientowy %. */
/* Styl karty 1:1 z .nft-card na raporcie (BlurredMatches.vue): wypełnienie
   #242435 przez ::after, gradientowa ramka wystająca zza karty przez ::before,
   hover = uniesienie + obrót ramki (nie box-shadow) — spójność z raportem. */
.neo-mistake-card {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  padding: 12px;
  background: transparent;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.neo-mistake-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: #242435;
  z-index: -1;
}

.neo-mistake-card::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 99%;
  height: 100%;
  border-radius: 14px;
  background-image: linear-gradient(110deg, #13131d 0%, #5a1f65 100%);
  z-index: -2;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.neo-mistake-card:hover {
  transform: translateY(-6px);
}

.neo-mistake-card:hover::before {
  transform: rotate(2deg) translateX(-7px) translateY(11px);
}

.neo-mistake-card__thumb {
  position: relative;
  margin: -8px -8px 0;
  border-radius: 6px 6px 0 0;
  overflow: hidden;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* to samo tło co .nft-thumb na raporcie — spójność */
  background: radial-gradient(circle at 25% 20%, rgba(230, 195, 138, 0.2), transparent 45%), radial-gradient(circle at 80% 80%, rgba(212, 122, 122, 0.14), transparent 50%), #fffaf3;
}

.neo-mistake-card__img {
  max-width: 82%;
  max-height: 82%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.neo-mistake-card:hover .neo-mistake-card__img {
  transform: scale(1.05);
}

.neo-mistake-card__body {
  padding: 12px 2px 2px;
}

.neo-mistake-card__title {
  margin: 0 0 0.4rem;
  font-family: var(--font-heading);
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 700;
  color: #fff;
}

/* % nałożone na grafikę (rożek-badge) — spójnie z badge'ami kart raportu (.nft-tasks-badge). */
.neo-mistake-card__pct {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.3rem 0.55rem;
  border-radius: 0.7rem;
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1;
  letter-spacing: 0.01em;
  color: #1a0f1e;
  background: linear-gradient(135deg, #e6c38a 0%, #d47a7a 100%);
  box-shadow: 0 4px 12px -3px rgba(212, 122, 122, 0.6);
  pointer-events: none;
}

.neo-mistake-card__pct-sub {
  margin-top: 0.12rem;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.82;
}

.neo-mistake-card__cap {
  display: block;
  font-size: 0.78rem;
  line-height: 1.25;
  color: var(--color-body, #acacac);
}

.neo-mistake__note {
  max-width: 46rem;
  margin: 1.75rem auto 0;
  text-align: center;
  color: var(--color-body, #acacac);
  font-size: 1rem;
  line-height: 1.7;
}

.neo-mistake__cta {
  margin-top: 1.75rem;
  text-align: center;
}

/* ── S7 · Social proof + ekspert ── */
.neo-social__counter {
  text-align: center;
  margin: 0 0 2.5rem;
}

.neo-social__count {
  display: block;
  font-family: var(--font-heading);
  font-variation-settings: "SOFT" 50, "WONK" 1;
  font-size: clamp(2.75rem, 6vw, 4rem);
  font-weight: 600;
  line-height: 1;
  color: var(--color-primary, #e6c38a);
}

.neo-social__count-label {
  display: block;
  margin-top: 0.5rem;
  color: var(--color-body, #acacac);
  font-size: 1.05rem;
}

.neo-reviews {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .neo-reviews {
    grid-template-columns: repeat(3, 1fr);
  }
}
.neo-review {
  background: rgba(19, 19, 29, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 1.75rem 1.5rem;
}

.neo-review__stars {
  color: var(--color-primary, #e6c38a);
  letter-spacing: 0.15em;
  font-size: 0.95rem;
  margin-bottom: 0.85rem;
}

.neo-review__quote {
  margin: 0 0 1rem;
  font-size: 0.975rem;
  line-height: 1.7;
  color: var(--color-white-75, rgba(255, 255, 255, 0.8));
}

.neo-review__author {
  font-weight: 600;
  color: #fff;
  font-size: 0.9rem;
}

.neo-review__author span {
  color: var(--color-body, #acacac);
  font-weight: 400;
}

.neo-expert {
  max-width: 50rem;
  margin: 3rem auto 0;
  padding: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.neo-expert__photo-wrap {
  position: relative;
  display: inline-flex;
  margin-bottom: 1.5rem;
  isolation: isolate;
}

/* Halo wokół zdjęcia — obracana poświata jak przy pierścieniu hero (paleta indygo
 * z tła). Rozmyty dysk za zdjęciem; opaque foto zasłania środek -> świeci obwódka. */
.neo-expert__halo {
  position: absolute;
  inset: -16px;
  z-index: -1;
  border-radius: 50%;
  /* Jaśniejsze indygo niż tło, z wyraźnym punktem rozświetlenia — żeby poświata
   * była widoczna wokół małego zdjęcia (na hero ring jest duży, tu musi mocniej). */
  background: conic-gradient(from 0deg, #2a2a40 0%, #4a4a72 25%, #6f6fa0 50%, #353552 75%, #2a2a40 100%);
  filter: blur(10px);
  opacity: 0.95;
  animation: neo-hero-ring-spin 14s linear infinite;
}

.neo-expert__photo {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}

@media (min-width: 768px) {
  .neo-expert__photo {
    width: 112px;
    height: 112px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .neo-expert__halo {
    animation: none;
  }
}
/* Złote cudzysłowy na początku i końcu treści cytatu — czytelnie sygnalizują cytat. */
.neo-expert__rotator {
  margin-top: 1.25rem;
}

/* Znaki cudzysłowu — wyraźnie większe, stały rozmiar (niezależny od długości cytatu). */
.neo-expert__quote::before,
.neo-expert__quote::after {
  color: var(--color-primary, #e6c38a);
  font-family: var(--font-heading);
  font-size: 3rem;
  line-height: 0;
  vertical-align: -0.55em;
  opacity: 0.5;
}

@media (min-width: 768px) {
  .neo-expert__quote::before,
  .neo-expert__quote::after {
    font-size: 3.75rem;
  }
}
.neo-expert__quote::before {
  content: "“";
  margin-right: 0.22em;
}

.neo-expert__quote::after {
  content: "”";
  margin-left: 0.18em;
}

/* Rotator — wszystkie cytaty w jednej komórce gridu (wysokość = najwyższy),
 * przełączane przez opacity (.is-active). Brak skoków layoutu. */
.neo-expert__rotator {
  display: grid;
}

.neo-expert__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-white-50, rgba(255, 255, 255, 0.5));
  margin-bottom: 1.25rem;
}

.neo-expert__quote {
  grid-area: 1/1;
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  line-height: 1.35;
  font-weight: 500;
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s;
}

@media (min-width: 768px) {
  .neo-expert__quote {
    font-size: 1.6rem;
  }
}
.neo-expert__quote.is-active {
  opacity: 1;
  visibility: visible;
}

.neo-expert__cite {
  margin-top: 1.5rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-body, #acacac);
  max-width: 40rem;
}

/* Paski — jak w karuzeli radaru S4. */
.neo-expert__bars {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.neo-expert__bar {
  position: relative;
  width: 44px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.18);
  cursor: pointer;
  overflow: hidden;
  transition: background 0.25s ease;
}

.neo-expert__bar:hover {
  background: rgba(255, 255, 255, 0.3);
}

.neo-expert__bar.is-active {
  background: rgba(230, 195, 138, 0.25);
}

.neo-expert__bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--color-primary, #e6c38a);
  border-radius: 2px;
}

/* ── S8 · feature-list + wrapped card ── */
.neo-feature-list {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}

.neo-feature-list li {
  position: relative;
  padding-left: 1.9rem;
  color: var(--color-body, #acacac);
  font-size: 1rem;
  line-height: 1.6;
}

.neo-feature-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-primary, #e6c38a);
  font-weight: 700;
}

.neo-wrapped-card {
  width: 240px;
  max-width: 100%;
  margin: 0 auto;
  aspect-ratio: 9/16;
  border-radius: 18px;
  padding: 1.5rem 1.4rem;
  display: flex;
  flex-direction: column;
  color: #fff;
  background: linear-gradient(160deg, #3a1c5a 0%, #5a1f65 45%, #2e2348 100%);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.neo-wrapped-card__brand {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0.9;
}

.neo-wrapped-card__eyebrow {
  margin-top: auto;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
}

.neo-wrapped-card__score {
  font-family: var(--font-heading);
  font-variation-settings: "SOFT" 50, "WONK" 1;
  font-size: 3.25rem;
  line-height: 1;
  font-weight: 600;
}

.neo-wrapped-card__profile {
  font-size: 1.05rem;
  font-weight: 500;
  margin-bottom: 1rem;
}

.neo-wrapped-card__bars {
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
  height: 54px;
}

.neo-wrapped-card__bars span {
  flex: 1;
  height: var(--v, 50%);
  background: rgba(255, 255, 255, 0.55);
  border-radius: 3px 3px 0 0;
}

.neo-wrapped-card__foot {
  margin-top: auto;
  padding-top: 1rem;
  font-size: 0.75rem;
  opacity: 0.6;
}

/* ── S9 · FAQ accordion (natywne <details>) ── */
.neo-faq__list {
  margin: 2rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.neo-faq__item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.neo-faq__q {
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 2rem 1.15rem 0;
  position: relative;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 500;
  color: #fff;
}

.neo-faq__q::-webkit-details-marker {
  display: none;
}

.neo-faq__q::after {
  content: "+";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  color: var(--color-primary, #e6c38a);
  transition: transform 0.2s ease;
}

.neo-faq__item[open] .neo-faq__q::after {
  content: "−";
}

.neo-faq__a {
  padding: 0 0 1.25rem;
  color: var(--color-body, #acacac);
  font-size: 1rem;
  line-height: 1.7;
}

.neo-faq__a a {
  color: var(--color-primary, #e6c38a);
}

.neo-faq__more {
  margin-top: 1.75rem;
  text-align: center;
}

.neo-faq__cta {
  margin-top: 2.5rem;
  text-align: center;
}

/* ── Landing (/l/{slug}) ───────────────────────────────────────────── */
.neo-landing__lead {
  max-width: 44rem;
  margin: 1.25rem auto 0;
  text-align: center;
  color: #c9c9d4;
  line-height: 1.7;
}
.neo-landing__lead p {
  margin: 0 0 0.9rem;
}

.neo-landing__cta {
  margin-top: 1.75rem;
  text-align: center;
}

.neo-landing__prose {
  margin-top: 0;
}

/* Trzeci blok treści landingu — centrowana proza pod nagłówkiem. Mniejszy padding
 * górny (sekcja sąsiaduje z 2-kol secondSection), prose dosunięta do nagłówka. */
.neo-landing-extra {
  padding-top: 0;
}

.neo-landing-extra__prose {
  margin-top: 1.5rem;
}

.neo-landing-extra__prose > :first-child {
  margin-top: 0;
}

.neo-landing-links {
  padding-top: 0;
}

.neo-landing-links__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.5rem;
}
.neo-landing-links__list a {
  color: var(--color-primary, #e6c38a);
  font-size: 0.95rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Contact ───────────────────────────────────────────────────────── */
.neo-contact__card {
  max-width: 30rem;
  margin: 2.5rem auto 0;
  padding: 2.5rem 1.5rem;
  border-radius: 16px;
  background: #242435;
  border: 1px solid rgba(230, 195, 138, 0.16);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}

.neo-contact__icon img {
  display: block;
  width: 56px;
  height: 56px;
}

.neo-contact__team {
  max-width: 36rem;
  margin: 3rem auto 0;
  text-align: center;
  color: var(--color-body, #acacac);
  line-height: 1.7;
}

.neo-contact__team-title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.5rem;
  color: #fff;
  margin: 0 0 0.6rem;
}

.neo-contact__team a {
  color: var(--color-primary, #e6c38a);
}

/* ── How it works ──────────────────────────────────────────────────── */
.neo-hiw-intro {
  padding-bottom: 0;
}

.neo-hiw__note {
  margin: 1.25rem auto 0;
  text-align: center;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(245, 233, 214, 0.6);
}

.neo-hiw__price {
  margin: 2.5rem auto 0;
  text-align: center;
  line-height: 1.6;
}
.neo-hiw__price strong {
  color: #fff;
  display: block;
}
.neo-hiw__price span {
  color: var(--color-body, #acacac);
}

.neo-hiw__cta {
  margin-top: 1.75rem;
}

.neo-price-teaser {
  max-width: 30rem;
  margin: 2.5rem auto 0;
  padding: 1.75rem 1.5rem;
  border-radius: 16px;
  text-align: center;
  background: rgba(230, 195, 138, 0.06);
  border: 1px solid rgba(230, 195, 138, 0.22);
}

.neo-price-teaser__badge {
  display: inline-block;
  margin-bottom: 0.9rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: #1a1a2e;
  background: linear-gradient(135deg, #e6c38a 0%, #d47a7a 100%);
}

.neo-price-teaser__free {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 500;
  color: #fff;
  line-height: 1.3;
}

.neo-price-teaser__more {
  margin-top: 0.4rem;
  color: var(--color-body, #acacac);
  font-size: 1rem;
}
.neo-price-teaser__more strong {
  color: #e6c38a;
  font-weight: 700;
}

.neo-price-teaser .neo-btn {
  margin-top: 1.4rem;
}

/* ── Concept ───────────────────────────────────────────────────────── */
.neo-concept__lead {
  max-width: 44rem;
  margin: 1.5rem auto 0;
  text-align: center;
  color: #c9c9d4;
  line-height: 1.75;
}
.neo-concept__lead p {
  margin: 0 0 1rem;
}
.neo-concept__lead a {
  color: var(--color-primary, #e6c38a);
}

.neo-concept__lead-title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.6rem;
  color: #fff;
  margin: 1.75rem 0 1.1rem;
}

/* Team — zdjęcie założycieli z halo (jak ekspertka na home, ale większe). */
.neo-team__photo-wrap {
  position: relative;
  width: fit-content;
  margin: 0.75rem auto 2.75rem;
  isolation: isolate;
}

.neo-team__photo {
  width: 210px;
  height: 210px;
}

@media (min-width: 768px) {
  .neo-team__photo {
    width: 280px;
    height: 280px;
  }
}
.neo-team__photo-wrap .neo-expert__halo {
  inset: -24px;
}

.neo-advantages {
  list-style: none;
  margin: 2.5rem auto 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  max-width: 48rem;
}

@media (min-width: 640px) {
  .neo-advantages {
    grid-template-columns: repeat(3, 1fr);
  }
}
.neo-advantages__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding: 1.75rem 1rem;
  border-radius: 14px;
  background: #242435;
  border: 1px solid rgba(230, 195, 138, 0.12);
}

.neo-advantages__icon img {
  display: block;
  width: 56px;
  height: 56px;
}

.neo-advantages__label {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.15rem;
  color: #fff;
}

/* ── S10 · Prywatność ── */
.neo-privacy__list {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}

.neo-privacy__list li {
  position: relative;
  padding-left: 1.9rem;
  color: var(--color-white-75, rgba(255, 255, 255, 0.8));
  font-size: 1rem;
  line-height: 1.6;
}

.neo-privacy__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #6fcf97;
  font-weight: 700;
}

.neo-privacy__link {
  display: inline-block;
  margin-top: 1.5rem;
  color: var(--color-primary, #e6c38a);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(230, 195, 138, 0.4);
}

.neo-privacy__shield {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.neo-privacy__shield img {
  width: clamp(110px, 30vw, 160px);
  height: auto;
}

/* Mobile (<900px, split jednokolumnowy): grafika wisiala tuz pod linkiem i
 * wygladala na przyklejona do tekstu. Wysrodkowanie + odsuniecie nieco nizej,
 * zeby oddychala jako osobny akcent sekcji. */
@media (max-width: 899px) {
  .neo-privacy__shield {
    justify-content: center;
    margin-top: 2.5rem;
  }
}
/* ── S7 · Realna ocena z ankiet (gwiazdki wg średniej) ── */
.neo-rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 2.5rem;
}

.neo-rating__stars {
  position: relative;
  display: inline-block;
  font-size: 1.5rem;
  letter-spacing: 0.15em;
  line-height: 1;
}

.neo-rating__stars-base {
  color: rgba(255, 255, 255, 0.18);
}

.neo-rating__stars-fill {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--color-primary, #e6c38a);
}

.neo-rating__value {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.15rem;
  color: #fff;
}

.neo-rating__meta {
  font-size: 0.9rem;
  color: var(--color-body, #acacac);
}

.neo-rating__data {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-white-50, rgba(255, 255, 255, 0.5));
}

.neo-rating__data::before {
  content: "●";
  color: #6fcf97;
  font-size: 0.7em;
  animation: neoLivePulse 1.8s ease-in-out infinite;
}

/* ── HTML sitemap (/{_locale}/sitemap) ── */
.neo-sitemap__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2.25rem 2.5rem;
  margin-top: 2.5rem;
}

.neo-sitemap__heading {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-primary, #e6c38a);
  margin: 0 0 0.9rem;
}

.neo-sitemap__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.neo-sitemap__list a {
  color: var(--color-body, #acacac);
  text-decoration: none;
  transition: color 0.15s ease;
}

.neo-sitemap__list a:hover,
.neo-sitemap__list a:focus-visible {
  color: #fff;
}

/*
 * Steps — port templatki Nuron "Create and sell your NFTs" (.rn-service-one).
 * 4 karty z grafika w prawym gornym rogu, etykieta STEP, tytul, opis.
 */
.neo-steps {
  position: relative;
  z-index: 1;
  /* padding-bottom = standard sekcji (.neo-section) — wcześniej 7/10rem dawało
     przesadny odstęp do następnej sekcji, zwłaszcza na landingu. */
  padding-bottom: 4rem;
}

@media (min-width: 768px) {
  .neo-steps {
    padding-bottom: 6rem;
  }
}
.neo-steps__heading {
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 50, "WONK" 1; /* pazur */
  font-size: 2rem;
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--color-heading, #fff);
  margin: 0 auto 1rem auto;
  text-align: center;
  text-wrap: balance;
}

@media (min-width: 768px) {
  .neo-steps__heading {
    font-size: 2.5rem;
  }
}
.neo-steps__subtitle {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-body, #acacac);
  text-align: center;
  max-width: 62ch;
  margin: 0 auto 1rem auto;
  text-wrap: pretty;
}

@media (min-width: 768px) {
  .neo-steps__subtitle {
    font-size: 1.125rem;
    margin-bottom: 1.25rem;
  }
}
.neo-steps__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  /* Górny odstęp na wystające ikony kart (top: -30px) — niezależny od tego,
     czy nad gridem jest podtytuł (home) czy sam nagłówek (landing). */
  margin-top: 3.25rem;
  /* karty dopasowane do tresci — bez rozciagania do najwyzszej (pusta przestrzen). */
  align-items: start;
}

@media (min-width: 600px) {
  .neo-steps__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .neo-steps__grid {
    gap: 1.75rem;
    grid-template-columns: repeat(4, 1fr);
    /* desktop: rowna wysokosc wszystkich kart = najwyzsza (stretch sam wyrownuje). */
    align-items: stretch;
  }
  /* Wariant 3-kolumnowy (np. /prive-ai „jak budujemy raport"). */
  .neo-steps__grid--3 {
    grid-template-columns: repeat(3, 1fr);
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
  }
}
.neo-step-card {
  position: relative;
  text-align: left;
  padding: 48px 30px 32px;
  border-radius: 10px;
  /* tlo 90% — delikatnie przepuszcza backdrop strony (noise + particles). */
  background: rgba(19, 19, 29, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.neo-step-card:hover {
  border-color: rgba(230, 195, 138, 0.35);
  transform: translateY(-4px);
}

.neo-step-card__icon {
  position: absolute;
  right: -15px;
  top: -30px;
  z-index: 2;
}

@media (max-width: 575px) {
  .neo-step-card__icon {
    right: 0;
    top: -29px;
  }
}
/* SVG maja viewBox ale brak atrybutow width/height — trzeba jawny wymiar,
 * inaczej przegladarka renderuje je jako 0. Ikony sa ~kwadratowe. */
.neo-step-card__icon img {
  display: block;
  width: 72px;
  height: 72px;
}

@media (min-width: 768px) {
  .neo-step-card__icon img {
    width: 85px;
    height: 85px;
  }
}
.neo-step-card__step {
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-body, #acacac);
  margin-bottom: 1.5rem;
}

.neo-step-card__title {
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 50, "WONK" 1; /* pazur */
  font-size: 1.5rem;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-white, #fff);
  margin: 0 0 0.85rem 0;
  transition: color 0.3s ease;
}

.neo-step-card:hover .neo-step-card__title {
  color: var(--color-primary, #e6c38a);
}

.neo-step-card__desc {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-body, #acacac);
  margin: 0;
}

.neo-steps__cta {
  margin-top: 3rem;
  text-align: center;
}

@media (min-width: 768px) {
  .neo-steps__cta {
    margin-top: 3.75rem;
  }
}
/*
 * Mobile hub (/m) — sekcje specyficzne dla strony aplikacji.
 * Reużywa .neo-shead / .neo-split / .neo-step-card / .neo-privacy / .neo-faq /
 * .neo-cta-band z _sections.scss + _steps.scss. Tu tylko to, czego nie ma:
 * hero ze zrzutem, paski store, lista różnic, plany cenowe.
 * Paleta spójna z resztą NEO (gold #e6c38a, rose #d47a7a, dark #242435).
 */
/* ── Hero (ring-stub jak home; pierścień-aurora wokół zdjęcia pary) ─── */
.neo-mobile-hero {
  text-align: center;
}

.neo-mobile-hero__kicker {
  display: block;
  margin-bottom: 0.6rem;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #e6c38a;
}

.neo-mobile-hero__note {
  margin: 1rem 0 0;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(245, 233, 214, 0.7);
}

/* ── Store badges (App Store + Google Play soon) ───────────────────── */
.neo-store {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.neo-store--center {
  justify-content: center;
  margin-top: 2rem;
}
.neo-store__badge {
  display: inline-flex;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.neo-store__badge:hover {
  transform: translateY(-2px);
}
.neo-store__badge img {
  height: 48px;
  width: auto;
  display: block;
}

/* Google Play „wkrótce" — wyszarzony + tooltip (NEO self-contained, bez legacy CSS) */
.neo-store .store-soon {
  position: relative;
  display: inline-flex;
  cursor: default;
  opacity: 0.5;
  filter: grayscale(1);
}
.neo-store .store-soon img {
  height: 48px;
  width: auto;
  display: block;
}
.neo-store .store-soon__tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  white-space: nowrap;
  padding: 0.4rem 0.7rem;
  border-radius: 8px;
  background: #0e0f14;
  color: #f5e9d6;
  font-size: 0.75rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 2;
}
.neo-store .store-soon:hover .store-soon__tooltip, .neo-store .store-soon:focus .store-soon__tooltip, .neo-store .store-soon:focus-visible .store-soon__tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── M2 · „to osobna gra" — grid 2×2 kart ──────────────────────────── */
.neo-diff__grid {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 720px) {
  .neo-diff__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.neo-diff__card {
  position: relative;
  padding: 1.4rem 1.4rem 1.4rem 2.6rem;
  border-radius: 14px;
  background: #242435;
  border: 1px solid rgba(230, 195, 138, 0.12);
  line-height: 1.5;
  color: #d8d8e0;
  text-align: left;
}
.neo-diff__card::before {
  content: "";
  position: absolute;
  left: 1.4rem;
  top: 1.85rem;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #e6c38a 0%, #d47a7a 100%);
}

.neo-diff__cta {
  margin-top: 1.75rem;
  text-align: center;
}

/* ── M4 · Plany cenowe ─────────────────────────────────────────────── */
.neo-plans {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  max-width: 60rem;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .neo-plans {
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
  }
}
.neo-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.75rem 1.25rem;
  border-radius: 14px;
  background: #242435;
  border: 1px solid rgba(230, 195, 138, 0.14);
}
.neo-plan--featured {
  border-color: rgba(230, 195, 138, 0.55);
  box-shadow: 0 14px 40px -16px rgba(212, 122, 122, 0.45);
}
.neo-plan__badge {
  position: absolute;
  top: -0.7rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
  color: #1a1a2e;
  background: linear-gradient(135deg, #e6c38a 0%, #d47a7a 100%);
}
.neo-plan__name {
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(245, 233, 214, 0.7);
}
.neo-plan__price {
  margin: 0.6rem 0 0.1rem;
  font-family: var(--font-heading);
  font-size: 1.9rem;
  font-weight: 600;
  color: #fff;
}
.neo-plan__period {
  font-size: 0.85rem;
  color: #acacac;
}

.neo-plans__note {
  margin: 1.5rem auto 0;
  max-width: 42rem;
  text-align: center;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #acacac;
}

/*
 * Pricing (/pricing) — tabela porównawcza 3 planów (Free / Privé+ / Privé Max).
 * Kolumna „hot" (Privé+) wyróżniona złotą ramką. Mobile: poziomy scroll.
 * Paleta spójna z NEO (gold #e6c38a, rose #d47a7a, dark #242435).
 */
.neo-compare {
  margin-top: 2.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.neo-compare__table {
  width: 100%;
  min-width: 34rem;
  table-layout: fixed;
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 0;
  color: #f5e9d6;
}

.neo-compare__table th,
.neo-compare__table td {
  padding: 0.7rem 0.65rem;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid rgba(245, 233, 214, 0.08);
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Kolumna cech — lewa, opisowa (szersza, reszta dzieli pozostałe równo) */
.neo-compare__feat {
  text-align: left;
  font-weight: 500;
  color: #d8d8e0;
  width: 40%;
}

/* Nagłówki planów */
.neo-compare__table thead th {
  border-bottom: 1px solid rgba(245, 233, 214, 0.16);
  vertical-align: bottom;
}

.neo-compare__plan {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 500;
  color: #fff;
}

.neo-compare__plan--accent {
  color: #e6c38a;
}

.neo-compare__price {
  margin-top: 0.3rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
}

.neo-compare__note {
  margin-top: 0.2rem;
  font-size: 0.72rem;
  line-height: 1.3;
  color: rgba(245, 233, 214, 0.55);
}

.neo-compare__badge {
  display: inline-block;
  margin-bottom: 0.4rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 700;
  color: #1a1a2e;
  background: linear-gradient(135deg, #e6c38a 0%, #d47a7a 100%);
}

/* Kolumna wyróżniona (Privé+) */
.neo-compare__col--hot {
  background: rgba(230, 195, 138, 0.06);
  border-left: 1px solid rgba(230, 195, 138, 0.3);
  border-right: 1px solid rgba(230, 195, 138, 0.3);
}

.neo-compare__table thead .neo-compare__col--hot {
  border-top: 1px solid rgba(230, 195, 138, 0.3);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

/* Komórki wartości */
.neo-compare__chk {
  display: inline-flex;
  color: #9dcc96;
}

.neo-compare__dash {
  color: rgba(245, 233, 214, 0.35);
}

.neo-compare__table td span:not(.neo-compare__chk):not(.neo-compare__dash) {
  font-size: 0.9rem;
  color: #d8d8e0;
}

/* Wiersz CTA */
.neo-compare__cta-row td {
  padding-top: 1.5rem;
  border-bottom: none;
}

.neo-compare__cta-row .neo-compare__col--hot {
  border-bottom: 1px solid rgba(230, 195, 138, 0.3);
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.neo-compare__cta-row .neo-btn {
  width: 100%;
  box-sizing: border-box;
  /* Wąskie kolumny tabeli — pozwól zawijać i ścieśnij, żeby przyciski nie
     wylewały się z komórek (globalny .neo-btn ma white-space: nowrap). */
  white-space: normal;
  padding: 0.6rem 0.5rem;
  font-size: 0.85rem;
  letter-spacing: 0;
  line-height: 1.2;
}

.neo-pricing__mobile-note {
  max-width: 42rem;
  margin: 2rem auto 0;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-body, #acacac);
}
.neo-pricing__mobile-note a {
  color: var(--color-primary, #e6c38a);
}

/*
 * Legal (/tos, /tos/web, /tos/mobile, /privacy-policy, /gdpr) — opakowanie NEO
 * dla długich dokumentów prawnych. Treść partiali (_privacyPolicyPL itd.) zostaje
 * 1:1; tu tylko czytelna typografia prozy na ciemnym tle.
 */
.neo-legal {
  max-width: 52rem;
  margin: 2.5rem auto 0;
  color: #c9c9d4;
  font-size: 1rem;
  line-height: 1.75;
  text-align: left;
  /* Adres/dane kontaktowe i bloki cytowane */
  /* Tabele (np. rejestr przetwarzania w RODO) */
  /* „Wróć do wyboru regulaminu" — link nawigacyjny nad treścią */
}
.neo-legal h2 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.5rem;
  color: #fff;
  margin: 2.5rem 0 0.9rem;
  letter-spacing: -0.01em;
}
.neo-legal h3 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.2rem;
  color: #fff;
  margin: 1.75rem 0 0.6rem;
}
.neo-legal h4 {
  font-weight: 600;
  font-size: 1.02rem;
  color: #f5e9d6;
  margin: 1.4rem 0 0.5rem;
}
.neo-legal p {
  margin: 0 0 1rem;
}
.neo-legal ul,
.neo-legal ol {
  margin: 0 0 1rem;
  padding-left: 1.4rem;
}
.neo-legal li {
  margin: 0 0 0.5rem;
}
.neo-legal a {
  color: var(--color-primary, #e6c38a);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.neo-legal strong {
  color: #fff;
  font-weight: 600;
}
.neo-legal blockquote {
  margin: 1.25rem 0;
  padding: 0.75rem 1.25rem;
  border-left: 3px solid rgba(230, 195, 138, 0.4);
  color: #d8d8e0;
}
.neo-legal table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0;
  font-size: 0.92rem;
}
.neo-legal th,
.neo-legal td {
  border: 1px solid rgba(245, 233, 214, 0.14);
  padding: 0.6rem 0.8rem;
  text-align: left;
  vertical-align: top;
}
.neo-legal th {
  color: #fff;
  font-weight: 600;
  background: rgba(230, 195, 138, 0.06);
}
.neo-legal .neo-legal__back {
  display: inline-block;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}

/*
 * Cookie consent banner — port z prive.scss (app.css). baseWebsiteNeo nie ładuje
 * app.css, więc bez tego banner zgody (z base.html.twig, _consentBanner) był
 * NIEOSTYLOWANY na stronach NEO. Banner jest GDPR-krytyczny i bramkuje analitykę.
 * Paleta już zgodna z NEO (#161622 / gold #e6c38a). Trzymać w sync z prive.scss.
 */
#cookie-consent-banner-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.55);
  z-index: 399999;
  overscroll-behavior: contain;
  overflow: hidden;
}

#cookie-consent-banner {
  position: fixed;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 24px);
  max-width: 440px;
  padding: 16px 18px;
  background: #161622;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overscroll-behavior: contain;
  z-index: 400000;
}

#cookie-consent-banner h3 {
  font-size: 15px;
  line-height: 1.3;
  font-weight: 600;
  margin: 0 0 6px;
  color: #ffffff;
}

#cookie-consent-banner p {
  font-size: 12.5px;
  line-height: 1.45;
  text-wrap: balance;
  margin: 0 0 12px;
  color: #b8b8c4;
}

#cookie-consent-banner label {
  display: inline-flex;
  align-items: center;
  font-size: 12.5px;
  line-height: 1.4;
  color: #d4d4dc;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

#cookie-consent-banner label input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1.5px solid rgba(230, 195, 138, 0.55);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: background 0.15s, border-color 0.15s;
}

#cookie-consent-banner label input[type=checkbox]:checked {
  background: #e6c38a;
  border-color: #e6c38a;
}

#cookie-consent-banner label input[type=checkbox]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0px;
  width: 4px;
  height: 9px;
  border: solid #191925;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

#cookie-consent-banner label input[type=checkbox]:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

#cookie-consent-banner label:has(input:disabled) {
  color: #8a8a96;
  cursor: not-allowed;
}

#cookie-consent-banner .cookie-consent-options {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0 0 14px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}

#cookie-consent-banner .cookie-consent-options[hidden] {
  display: none;
}

#cookie-consent-banner .cookie-consent-buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

#cookie-consent-banner .cookie-consent-buttons .cookie-consent-button {
  min-height: 48px;
  padding: 12px 22px;
  border: 0;
  border-radius: 10px;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s, transform 0.05s;
}

#cookie-consent-banner .cookie-consent-buttons .cookie-consent-button:active {
  transform: scale(0.98);
}

#cookie-consent-banner .cookie-consent-buttons .btn-primary {
  background: #e6c38a;
  color: #191925;
  order: 3;
}

#cookie-consent-banner .cookie-consent-buttons .btn-primary:hover {
  background: #f0d4a4;
}

#cookie-consent-banner .cookie-consent-buttons .btn-outline {
  background: transparent;
  color: #e6c38a;
  border: 1px solid rgba(230, 195, 138, 0.5);
  order: 2;
}

#cookie-consent-banner .cookie-consent-buttons .btn-outline:hover {
  background: rgba(230, 195, 138, 0.08);
}

#cookie-consent-banner .cookie-consent-buttons .cookie-consent-link {
  background: transparent;
  color: #b8b8c4;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0 6px;
  font-weight: 500;
  height: auto;
  order: 1;
  margin-right: auto;
}

#cookie-consent-banner .cookie-consent-buttons .cookie-consent-link:hover {
  color: #ffffff;
}

#cookie-consent-banner .cookie-consent-buttons [hidden] {
  display: none;
}

@media screen and (width < 480px) {
  #cookie-consent-banner {
    bottom: 8px;
    width: calc(100% - 16px);
    padding: 14px 14px 12px;
  }
  #cookie-consent-banner .cookie-consent-buttons .btn-primary,
  #cookie-consent-banner .cookie-consent-buttons .btn-outline {
    flex: 1 1 100%;
    width: 100%;
  }
  #cookie-consent-banner .cookie-consent-buttons .cookie-consent-link {
    flex: 0 0 auto;
  }
}
/*
 * Sugestia zmiany języka (NEO) — wizualnie spójna z #cookie-consent-banner.
 * Markup: templates/website/_languageRecognizerNeo.html.twig (bramkowane na
 * rozstrzygniętą zgodę, więc nie nakłada się na banner consentu z overlayem).
 */
.lang-suggest-banner {
  position: fixed;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 24px);
  max-width: 440px;
  padding: 16px 18px;
  background: #161622;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  z-index: 400000;
}

.lang-suggest-banner[hidden] {
  display: none;
}

.lang-suggest-banner h3 {
  font-size: 14px;
  line-height: 1.35;
  font-weight: 600;
  margin: 0 0 6px;
  color: #ffffff;
}

.lang-suggest-banner p {
  font-size: 12.5px;
  line-height: 1.45;
  margin: 0 0 12px;
  color: #b8b8c4;
}

.lang-suggest-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.lang-suggest-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(230, 195, 138, 0.5);
  background: transparent;
  color: #e6c38a;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s;
}

.lang-suggest-btn:hover {
  background: rgba(230, 195, 138, 0.08);
}

.lang-suggest-btn img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: block;
  flex-shrink: 0;
}

/* Bieżący język — wariant „zostań" (gold jak btn-primary consentu). */
.lang-suggest-btn.is-current {
  background: #e6c38a;
  color: #191925;
  border-color: #e6c38a;
}

.lang-suggest-btn.is-current:hover {
  background: #f0d4a4;
}

.lang-suggest-link {
  align-self: flex-end;
  background: transparent;
  border: 0;
  color: #b8b8c4;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  padding: 2px 4px;
}

.lang-suggest-link:hover {
  color: #ffffff;
}

/*
 * Sticky CTA — tylko mobile. Przyklejony do dolu, wjezdza z dolu po
 * przescrollowaniu hero (klasa .is-visible dodawana w websiteNeo.js).
 * Gorny cien odcina go od contentu. Na desktop ukryty.
 */
.neo-sticky-cta {
  display: none;
}

@media (max-width: 767px) {
  .neo-sticky-cta {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 55;
    padding: 0.75rem 1rem;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    background: #191925;
    box-shadow: 0 -14px 28px -8px rgba(0, 0, 0, 0.6);
    transform: translateY(115%);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
  }
  .neo-sticky-cta.is-visible {
    transform: translateY(0);
  }
  .neo-sticky-cta__btn {
    width: 100%;
  }
  /* Rezerwa pod stopka, zeby przy widocznym sticky dojechac do samego dolu
   * (sticky nie zaslania stopki). */
  body.neo-page {
    padding-bottom: 76px;
  }
}
/*
 * StickyBar (return-to-game / report-ready) — NEO restyle.
 *
 * Logika JS: assets/js/prive.js:374-413 — czyta web_session_token /
 * web_report_token z localStorage, ustawia tresc + href, robi
 * jQuery.slideDown() + dodaje body.stickyBarActive.
 *
 * NEO przejmuje motion od jQuery: bar zawsze position: fixed, transform
 * translateY(-100%) gdy ukryty, translateY(0) gdy body.stickyBarActive.
 * Dzieki temu mamy plynna entrance animacje (slide + fade) zamiast
 * skokowego slideDown(height) z jQuery. !important nadpisuje inline
 * style ustawiane przez jQuery (display, height).
 *
 * Pozycja: NAD topbarem (top: 0, z-index 60 > topbar 50). Topbar i main
 * przesuwaja sie w dol o --stickybar-h gdy bar aktywny.
 */
:root {
  --stickybar-h: 44px;
}

@media (min-width: 640px) {
  :root {
    --stickybar-h: 48px;
  }
}
#stickyBarReturn.stickyBar {
  /* override jQuery slideDown's display/height inline styles */
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  /* nowrap: komunikat + CTA zawsze w jednej linii. Z `flex-wrap: wrap` na waskich
   * ekranach CTA zawijal sie do drugiego wiersza i byl ucinany przez sztywna
   * wysokosc + overflow:hidden. Teraz komunikat skraca sie elipsa, CTA zostaje. */
  flex-wrap: nowrap;
  height: var(--stickybar-h) !important;
  overflow: hidden !important;
  padding: 0 1rem;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 60;
  /* Glassy gold-tint band — kontrastuje subtelnie z dark background NEO,
   * ale nie krzyczy. Subtle attention przez delikatny shadow + transition. */
  background: linear-gradient(135deg, rgba(230, 195, 138, 0.96) 0%, rgba(212, 122, 122, 0.96) 100%);
  backdrop-filter: saturate(1.15);
  -webkit-backdrop-filter: saturate(1.15);
  color: #0e0f14;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  text-align: center;
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.45);
  /* Stan domyslny — schowany ponad ekranem. */
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.15s, opacity 0.45s ease 0.15s;
}

body.stickyBarActive #stickyBarReturn.stickyBar {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Klasa .hide siedzi w HTML (base.html.twig:488) zanim JS sie odpali —
 * w NEO nadpisujemy ja zeby element zawsze byl w layoutcie (animowany przez
 * transform powyzej), nie display:none. */
#stickyBarReturn.stickyBar.hide {
  display: flex !important;
}

#stickyBarReturn .stickyBarMsg {
  /* Kurczliwy element flex — min-width:0 pozwala zejsc ponizej szerokosci tresci,
   * dzieki czemu ellipsis dziala, a CTA obok zostaje w calosci. */
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#stickyBarReturn .stickyBarAction {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  background: rgba(14, 15, 20, 0.92);
  color: #fff;
  text-decoration: none;
  border-radius: 0.4rem;
  padding: 0.3rem 0.7rem;
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

#stickyBarReturn .stickyBarAction:hover,
#stickyBarReturn .stickyBarAction:focus-visible {
  background: #000;
  transform: translateY(-1px);
}

/* TopBar i main przesuwaja sie w dol gdy bar aktywny — bar zostaje NAD
 * topbarem, nie zaslania go. Plynna transition zsynchronizowana z bar. */
.neo-topbar {
  transition: top 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.15s, background 0.35s ease, box-shadow 0.35s ease;
}

body.stickyBarActive .neo-topbar {
  top: var(--stickybar-h);
}

.neo-main {
  transition: padding-top 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

body.stickyBarActive .neo-main {
  padding-top: calc(var(--topbar-h) + var(--stickybar-h));
}

/* Bottom-bound sticky barki (Valentine promo etc. z base.html.twig:499-505)
 * pomijamy w NEO — produktowo nie naleza tu. Hide defensywnie. */
.stickyBarBottom {
  display: none !important;
}

/* Newsletter usuniety z Website NEO — produktowo zrezygnowano (2026-05-08).
 * Modal-newsletter zostaje w base.html.twig dla legacy stron, ale w NEO
 * ukrywamy go zeby nie pokazal sie wizualnie pod stopka (bez app.scss
 * micromodal CSS modal byl widoczny). */
#modal-newsletter {
  display: none !important;
}

/*# sourceMappingURL=main.output.css.map */