/* =========================================================
   SAPIOLOV HERO FINAL — dark luxury implementation
   Loaded LAST. Overrides all previous hero/nav CSS.
   Assets: left-punch-reference, logo-sapiolov-hero,
           smoke-left, smoke-right
========================================================= */

/* ================= NAVBAR — premium private club ================= */

#navbar {
  height: 76px !important;
  background: rgba(5, 5, 7, 0.88) !important;
  backdrop-filter: blur(18px) saturate(112%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(112%) !important;
  border-bottom: none !important;
}

#navbar .nav-container {
  max-width: 1280px !important;
  height: 100% !important;
  padding: 0 clamp(20px, 3vw, 48px) !important;
}

#navbar .logo-container img {
  height: 60px !important;
  opacity: 0.92 !important;
  filter: drop-shadow(0 0 4px rgba(210, 139, 102, 0.06)) !important;
  transition: opacity 0.4s ease !important;
}

#navbar .logo-container img:hover {
  opacity: 1 !important;
}

#navbar .nav-links {
  gap: clamp(24px, 3.2vw, 48px) !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 0.76rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.30em !important;
}

#navbar .nav-link {
  color: rgba(180, 165, 152, 0.58) !important;
  position: relative !important;
  padding: 4px 0 !important;
  transition: color 0.4s ease !important;
}

#navbar .nav-link:hover {
  color: #c9986a !important;
}

#navbar .nav-link::after {
  content: "" !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 50% !important;
  width: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(201, 152, 106, 0.6), transparent) !important;
  transform: translateX(-50%) !important;
  transition: width 0.4s ease !important;
}

#navbar .nav-link:hover::after {
  width: 100% !important;
}

#navbar .nav-link--vip {
  color: rgba(201, 152, 106, 0.68) !important;
}

#navbar .nav-link--vip:hover {
  color: #e8c97f !important;
}

#navbar .lang-switch {
  border: 1px solid rgba(210, 139, 102, 0.20) !important;
  border-radius: 999px !important;
  background: rgba(5, 5, 7, 0.35) !important;
  transition: border-color 0.4s ease !important;
}

#navbar .lang-switch:hover {
  border-color: rgba(210, 139, 102, 0.38) !important;
}

#navbar .lang-btn {
  padding: 5px 11px !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.14em !important;
  color: rgba(180, 165, 152, 0.40) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  transition: color 0.3s ease, background 0.3s ease !important;
}

#navbar .lang-btn:hover {
  color: rgba(201, 152, 106, 0.65) !important;
}

#navbar .lang-btn.active {
  color: #c9986a !important;
  background: rgba(210, 139, 102, 0.09) !important;
}

/* ================= SMOKE — subtle atmospheric ================= */

/* Hot pink rgb(230, 80, 140) baseline — visible saturation (hero refresh v2) */
#hero .hero-smoke--left {
  display: block !important;
  opacity: 0.42 !important;
  visibility: visible !important;
  filter:
    brightness(0.72)
    sepia(1)
    saturate(3.2)
    hue-rotate(296deg)
    contrast(1.05) !important;
  animation: smokeFloat 18s ease-in-out infinite alternate !important;
}

#hero .hero-smoke--right {
  display: block !important;
  opacity: 0.48 !important;
  visibility: visible !important;
  filter:
    brightness(0.72)
    sepia(1)
    saturate(3.4)
    hue-rotate(296deg)
    contrast(1.05) !important;
  animation: smokeFloat 22s ease-in-out infinite alternate-reverse !important;
}

@keyframes smokeFloat {
  0%   { opacity: var(--smoke-base, 0.07); transform: translateY(0) scale(1); }
  50%  { opacity: calc(var(--smoke-base, 0.07) + 0.02); transform: translateY(-8px) scale(1.01); }
  100% { opacity: var(--smoke-base, 0.07); transform: translateY(4px) scale(0.99); }
}

#hero .hero-smoke--left  { --smoke-base: 0.42; }
#hero .hero-smoke--right { --smoke-base: 0.48; }

/* ================= SILHOUETTE — clean, no colored glow ================= */

#hero .hero-silhouette {
  filter:
    brightness(1.06)
    contrast(1.04)
    saturate(0.96)
    drop-shadow(14px 0 24px rgba(0, 0, 0, 0.40)) !important;
}

/* Leg/heel pseudo-elements — OFF (baseline handles this) */
#hero .hero-silhouette::before,
#hero .hero-silhouette::after {
  display: none !important;
  content: none !important;
}

/* ================= GATES — ZOBACZ / POCZUJ / POSŁUCHAJ ================= */

#hero .world-gates--hero {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: clamp(32px, 4vw, 72px) !important;
  width: min(54vw, 720px) !important;
  margin-top: clamp(32px, 4vh, 56px) !important;
}

#hero .world-gates--hero .world-gate,
#hero .world-gates--hero .world-gate.gate-unlocked {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: visible !important;
  padding: 0 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: transform 0.4s ease !important;
}

#hero .world-gates--hero .world-gate:hover {
  transform: translateY(-3px) !important;
}

/* Gate icon */
#hero .world-gate__icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  margin-bottom: 14px !important;
  color: rgba(201, 152, 106, 0.65) !important;
  transition: color 0.4s ease, filter 0.4s ease !important;
}

#hero .world-gate__icon svg {
  width: 100% !important;
  height: 100% !important;
}

#hero .world-gate:hover .world-gate__icon {
  color: #e8c97f !important;
  filter: drop-shadow(0 0 6px rgba(232, 201, 127, 0.22)) !important;
}

/* Gate label */
#hero .world-gates--hero .world-gate__badge {
  position: static !important;
  display: block !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(0.78rem, 1.05vw, 0.92rem) !important;
  font-weight: 400 !important;
  letter-spacing: 0.30em !important;
  color: rgba(201, 152, 106, 0.78) !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  text-align: center !important;
  margin-bottom: 8px !important;
  transition: color 0.4s ease !important;
}

#hero .world-gate:hover .world-gate__badge {
  color: #e8c97f !important;
}

/* Gate description */
#hero .world-gate__desc {
  display: block !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(0.6rem, 0.78vw, 0.7rem) !important;
  font-weight: 300 !important;
  font-style: italic !important;
  letter-spacing: 0.06em !important;
  color: rgba(180, 165, 152, 0.35) !important;
  text-align: center !important;
  line-height: 1.4 !important;
  margin-bottom: 14px !important;
  max-width: 160px !important;
  transition: color 0.4s ease !important;
}

#hero .world-gate:hover .world-gate__desc {
  color: rgba(180, 165, 152, 0.52) !important;
}

/* Gate diamond */
#hero .world-gate__diamond {
  display: block !important;
  position: relative !important;
  width: 6px !important;
  height: 6px !important;
  background: linear-gradient(135deg, #e8c97f, #a66551) !important;
  transform: rotate(45deg) !important;
  flex-shrink: 0 !important;
}

#hero .world-gate__diamond::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: calc(100% + 2px) !important;
  width: 1px !important;
  height: 12px !important;
  background: linear-gradient(180deg, transparent, rgba(166, 101, 81, 0.35)) !important;
  transform: translateX(-50%) rotate(-45deg) !important;
}

#hero .world-gate__diamond::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: calc(100% + 2px) !important;
  width: 1px !important;
  height: 12px !important;
  background: linear-gradient(180deg, rgba(166, 101, 81, 0.35), transparent) !important;
  transform: translateX(-50%) rotate(-45deg) !important;
}

/* ================= CTA BUTTONS — subtle refinement ================= */

#hero .btn-protocol--primary {
  transition: box-shadow 0.4s ease, transform 0.3s ease !important;
}

#hero .btn-protocol--primary:hover {
  box-shadow: 0 0 18px rgba(210, 139, 102, 0.12) !important;
  transform: translateY(-1px) !important;
}

#hero .btn-protocol--secondary:hover {
  box-shadow: 0 0 14px rgba(181, 59, 104, 0.08) !important;
  transform: translateY(-1px) !important;
}

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

@media (max-width: 768px) {
  #hero .world-gates--hero {
    width: min(92vw, 440px) !important;
    gap: 18px !important;
  }

  #hero .world-gate__icon {
    width: 38px !important;
    height: 38px !important;
    margin-bottom: 10px !important;
  }

  #hero .world-gate__desc {
    font-size: 0.58rem !important;
    max-width: 120px !important;
  }

  #hero .world-gates--hero .world-gate__badge {
    font-size: 0.72rem !important;
    letter-spacing: 0.22em !important;
  }
}

/* =================================================================
   GLOBAL SUBPAGE OVERRIDES — dark luxury consistency across all pages
   ================================================================= */

/* ---- BODY & BASE — GLOBAL FONT + COLOR RESET ---- */

html, body {
  background: #050507 !important;
  background-image: none !important;
  color: rgba(210, 200, 190, 0.72) !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
}

body *, body *::before, body *::after {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
}

body p, body span, body li, body a, body div,
body label, body small, body em, body strong,
body td, body th, body dd, body dt {
  color: rgba(210, 200, 190, 0.65) !important;
}

body strong, body b {
  color: rgba(225, 215, 205, 0.8) !important;
  font-weight: 500 !important;
}

body a {
  color: rgba(201, 152, 106, 0.65) !important;
  transition: color 0.3s ease !important;
}

body a:hover {
  color: #c9986a !important;
}

/* ---- HEADINGS — copper metallic gradient ---- */

h1, h2, h3, .h1, .h2, .h3,
.hero-tagline,
.hero-kicker,
.start-title,
.about-title,
.mx-inside__heading,
.mx-vip__heading,
.vip-page__title,
.checkout-title,
.recover-title,
.failed-title,
.question-title,
.player-title,
.paywall-title {
  background: linear-gradient(
    135deg,
    #a6816a 0%,
    #d2a882 20%,
    #f0dcc8 48%,
    #e8c97f 52%,
    #d2a882 80%,
    #a6816a 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}

/* Italic serif for page titles */
.vip-page__title,
.checkout-title,
.recover-title,
.failed-title,
.question-title,
.player-title,
.paywall-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 300 !important;
  font-style: italic !important;
}

/* Body text — warm muted (specific overrides for key elements) */
.hero-description,
.vip-page__subtitle,
.vip-page__anchor {
  color: rgba(210, 200, 190, 0.55) !important;
  font-size: 0.92rem !important;
  line-height: 1.7 !important;
  letter-spacing: 0.02em !important;
}

/* ---- SECTION LABELS (BIBLIOTEKA, VIP, etc.) ---- */

.section-label,
.catalog-page__label {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  color: rgba(201, 152, 106, 0.7) !important;
  border: 1px solid rgba(201, 152, 106, 0.2) !important;
  background: rgba(201, 152, 106, 0.04) !important;
  padding: 5px 16px !important;
  border-radius: 999px !important;
  -webkit-text-fill-color: rgba(201, 152, 106, 0.7) !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
}

/* ---- BACK HOME LINK ---- */

.mx-back-home {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.18em !important;
  color: rgba(180, 165, 152, 0.45) !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
}

.mx-back-home:hover {
  color: #c9986a !important;
}

/* ---- BUTTONS — unified dark luxury ---- */

.btn-protocol,
.btn-protocol--primary {
  background: linear-gradient(135deg, rgba(201, 152, 106, 0.18), rgba(201, 152, 106, 0.08)) !important;
  border: 1px solid rgba(201, 152, 106, 0.35) !important;
  color: #e8c97f !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  padding: 14px 36px !important;
  border-radius: 0 !important;
  transition: all 0.4s ease !important;
  text-shadow: none !important;
  -webkit-text-fill-color: #e8c97f !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
}

.btn-protocol:hover,
.btn-protocol--primary:hover {
  background: linear-gradient(135deg, rgba(201, 152, 106, 0.28), rgba(232, 201, 127, 0.14)) !important;
  border-color: rgba(232, 201, 127, 0.5) !important;
  box-shadow: 0 0 20px rgba(201, 152, 106, 0.12) !important;
  transform: translateY(-1px) !important;
}

.btn-protocol--secondary,
.btn-vip,
.btn-back,
.btn-alt,
.upsell-btn,
.btn-recover,
.btn-retry {
  background: transparent !important;
  border: 1px solid rgba(180, 165, 152, 0.18) !important;
  color: rgba(180, 165, 152, 0.6) !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  transition: all 0.4s ease !important;
  -webkit-text-fill-color: rgba(180, 165, 152, 0.6) !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
}

.btn-protocol--secondary:hover,
.btn-vip:hover,
.btn-back:hover,
.btn-alt:hover,
.upsell-btn:hover,
.btn-recover:hover,
.btn-retry:hover {
  border-color: rgba(201, 152, 106, 0.4) !important;
  color: #c9986a !important;
  -webkit-text-fill-color: #c9986a !important;
  background: rgba(201, 152, 106, 0.04) !important;
}

/* VIP CTA gold variant */
.paywall-cta,
.result-cta,
.btn-enter {
  background: linear-gradient(135deg, rgba(232, 201, 127, 0.14), rgba(201, 152, 106, 0.08)) !important;
  border: 1px solid rgba(232, 201, 127, 0.4) !important;
  color: #e8c97f !important;
  -webkit-text-fill-color: #e8c97f !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
}

.paywall-cta:hover,
.result-cta:hover,
.btn-enter:hover {
  background: rgba(232, 201, 127, 0.12) !important;
  border-color: rgba(232, 201, 127, 0.6) !important;
  box-shadow: 0 0 24px rgba(232, 201, 127, 0.1) !important;
}

/* ---- CARDS / OPTIONS (protocol-flow, commission) ---- */

.option,
.payment-option {
  background: rgba(201, 152, 106, 0.03) !important;
  border: 1px solid rgba(201, 152, 106, 0.1) !important;
  color: rgba(210, 200, 190, 0.7) !important;
  transition: all 0.3s ease !important;
}

.option:hover,
.payment-option:hover {
  border-color: rgba(201, 152, 106, 0.25) !important;
  background: rgba(201, 152, 106, 0.06) !important;
}

.option.selected,
.payment-option.selected {
  border-color: #c9986a !important;
  background: rgba(201, 152, 106, 0.08) !important;
}

.option h3,
.option strong {
  color: rgba(235, 225, 215, 0.9) !important;
  -webkit-text-fill-color: rgba(235, 225, 215, 0.9) !important;
  background: none !important;
}

.option p,
.option small {
  color: rgba(180, 165, 152, 0.5) !important;
}

/* ---- FORM INPUTS ---- */

.form-input,
input[type="text"],
input[type="email"],
textarea,
select {
  background: rgba(201, 152, 106, 0.03) !important;
  border: 1px solid rgba(201, 152, 106, 0.12) !important;
  color: rgba(235, 225, 215, 0.85) !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  border-radius: 0 !important;
}

.form-input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
  border-color: rgba(201, 152, 106, 0.35) !important;
  background: rgba(201, 152, 106, 0.05) !important;
  outline: none !important;
}

/* ---- COMMISSION PRICING CARDS ---- */

.mx-commission__tier,
.commission-tier {
  background: rgba(201, 152, 106, 0.03) !important;
  border: 1px solid rgba(201, 152, 106, 0.12) !important;
  border-radius: 0 !important;
}

.mx-commission__tier:hover,
.commission-tier:hover {
  border-color: rgba(201, 152, 106, 0.3) !important;
}

/* ---- VIP DOOR / FEATURE LIST ---- */

.mx-vip__door {
  background: rgba(201, 152, 106, 0.03) !important;
  border: 1px solid rgba(201, 152, 106, 0.1) !important;
  border-radius: 0 !important;
}

.mx-vip__door--primary {
  border-color: rgba(201, 152, 106, 0.25) !important;
}

.mx-vip__feature::before {
  color: #c9986a !important;
}

/* ---- FOOTER ---- */

footer, .footer, .site-footer {
  background: linear-gradient(180deg, transparent 0%, rgba(5, 5, 7, 0.95) 40%, #050507 100%) !important;
  border-top: 1px solid rgba(201, 152, 106, 0.06) !important;
}

.footer-logo img {
  opacity: 0.5 !important;
  filter: drop-shadow(0 0 3px rgba(201, 152, 106, 0.06)) !important;
}

footer a, .footer a, .site-footer a {
  color: rgba(180, 165, 152, 0.4) !important;
  transition: color 0.3s ease !important;
}

footer a:hover, .footer a:hover, .site-footer a:hover {
  color: #c9986a !important;
}

.support-link {
  border-color: rgba(201, 152, 106, 0.1) !important;
  color: rgba(180, 165, 152, 0.5) !important;
}

.support-link:hover {
  border-color: rgba(201, 152, 106, 0.25) !important;
  color: #c9986a !important;
}

/* ---- NAV — kill vivid-overrides competition ---- */

#navbar {
  border-bottom: none !important;
}

#navbar.scrolled {
  background: rgba(5, 5, 7, 0.94) !important;
  border-bottom: none !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

.nav-links a,
#navbar .nav-links a {
  color: rgba(180, 165, 152, 0.58) !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 0.76rem !important;
  letter-spacing: 0.30em !important;
  text-shadow: none !important;
  transition: color 0.4s ease !important;
}

.nav-links a:hover,
#navbar .nav-links a:hover {
  color: #c9986a !important;
  text-shadow: none !important;
}

/* ---- STEP DOTS (protocol-flow) ---- */

.step-dot.active {
  background: #c9986a !important;
  box-shadow: 0 0 12px rgba(201, 152, 106, 0.4) !important;
}

.step-dot.completed {
  background: rgba(201, 152, 106, 0.4) !important;
}

/* ---- DIVIDERS & DECORATIVE LINES ---- */

.mx-divider,
.footer-divider,
hr {
  background: linear-gradient(90deg, transparent, rgba(201, 152, 106, 0.15), transparent) !important;
  border: none !important;
  height: 1px !important;
}

/* ---- SCROLLBAR (subtle luxury) ---- */

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #050507;
}

::-webkit-scrollbar-thumb {
  background: rgba(201, 152, 106, 0.15);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(201, 152, 106, 0.3);
}

/* ---- RESPONSIVE SUBPAGE OVERRIDES ---- */

@media (max-width: 768px) {
  .nav-links a,
  #navbar .nav-links a {
    font-size: 0.68rem !important;
    letter-spacing: 0.2em !important;
  }
}

/* =================================================================
   HERO REFRESH V2 — title / diamonds / tagline / subline / CTA /
   sense row / framed lang switch. Scoped to #hero and #navbar only.
   ================================================================= */

/* ---- HERO TITLE — branded wordmark image (exact logotype + metallic finish) ---- */
#hero .hero-title {
  text-align: center !important;
  margin: 0 auto !important;
  background: none !important;
  line-height: 0 !important;
}

#hero .hero-title img {
  display: block !important;
  width: clamp(240px, 44vw, 600px) !important;  /* native 837x169, ratio ~4.95 */
  height: auto !important;
  margin: 0 auto !important;
  filter: drop-shadow(0 3px 16px rgba(0, 0, 0, 0.5)) !important;
}

/* ---- HERO CONTENT — top-align (kill vertical centering gap under nav) ---- */
#hero .hero-content {
  justify-content: flex-start !important;          /* was center -> 287px gap */
  min-height: calc(100svh - 78px) !important;       /* exact fit, no overflow */
  padding-top: clamp(14px, 2.2vh, 26px) !important; /* was 108px */
}

/* ---- DIAMONDS — under nav + between title and tagline ---- */
#hero .hero-diamond {
  display: block !important;
  text-align: center !important;
  color: #c9986a !important;
  -webkit-text-fill-color: #c9986a !important;
  line-height: 1 !important;
  opacity: 0.85 !important;
}

#hero .hero-diamond--top {
  font-size: 9px !important;
  margin: 0 auto clamp(16px, 2.5vh, 30px) !important;
}

#hero .hero-diamond--mid {
  font-size: 8px !important;
  margin: clamp(18px, 3vh, 30px) auto clamp(16px, 2.6vh, 26px) !important;
}

/* ---- TAGLINE — cream Cormorant italic (override copper gradient) ---- */
#hero .hero-tagline {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 300 !important;
  font-size: clamp(21px, 2.6vw, 30px) !important;
  line-height: 1.55 !important;
  letter-spacing: 0.01em !important;
  text-align: center !important;
  background: none !important;
  color: #f6e1d2 !important;
  -webkit-text-fill-color: #f6e1d2 !important;
  text-shadow: none !important;
  margin: 0 auto !important;
  max-width: 32ch !important;
}

#hero .hero-tagline span {
  font-style: italic !important;
  color: #f6e1d2 !important;
  -webkit-text-fill-color: #f6e1d2 !important;
}

/* ---- SUBLINE — copper, all-caps, wide spacing ---- */
#hero .hero-subline {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  letter-spacing: 0.34em !important;           /* ~4px */
  text-transform: uppercase !important;
  text-align: center !important;
  color: #C98C6B !important;
  -webkit-text-fill-color: #C98C6B !important;
  margin: clamp(18px, 3vh, 28px) auto 0 !important;
}

#hero .hero-subline span {
  color: #C98C6B !important;
  -webkit-text-fill-color: #C98C6B !important;
}

/* ---- CTA ROW ---- */
#hero .hero-cta-row {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: clamp(14px, 1.6vw, 22px) !important;
  flex-wrap: wrap !important;
  margin: clamp(28px, 4.5vh, 48px) auto 0 !important;
}

/* ---- SENSE ROW — WZROK / CZUCIE / GŁOS ---- */
#hero .hero-senses {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0 !important;                 /* spacing handled by .hero-sense__sep margin */
  flex-wrap: wrap !important;
  margin: clamp(40px, 6vh, 72px) auto 0 !important;
}

#hero .hero-sense {
  position: relative !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 500 !important;
  font-size: clamp(0.78rem, 1vw, 0.92rem) !important;
  letter-spacing: 0.34em !important;
  text-transform: uppercase !important;
  color: rgba(201, 152, 106, 0.82) !important;
  -webkit-text-fill-color: rgba(201, 152, 106, 0.82) !important;
  text-decoration: none !important;
  padding-bottom: 12px !important;
  transition: color 0.4s ease !important;
}

/* decorative underline beneath each sense word (per PNG) */
#hero .hero-sense::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(201, 152, 106, 0.5), transparent) !important;
}

#hero .hero-sense:hover {
  color: #e8c97f !important;
  -webkit-text-fill-color: #e8c97f !important;
}

#hero .hero-sense__sep {
  color: #C98C6B !important;
  -webkit-text-fill-color: #C98C6B !important;
  font-size: 11px !important;
  opacity: 0.7 !important;
  margin: 0 16px !important;
  transform: translateY(-1px) !important;
}

/* ---- LANG SWITCHER — framed copper border + slash separator ---- */
#navbar .lang-switch--framed {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  border: 1px solid rgba(201, 152, 106, 0.32) !important;
  border-radius: 3px !important;
  padding: 2px 6px !important;
  background: rgba(5, 5, 7, 0.35) !important;
}

#navbar .lang-switch--framed:hover {
  border-color: rgba(201, 152, 106, 0.5) !important;
}

#navbar .lang-switch__sep {
  color: rgba(201, 152, 106, 0.55) !important;
  -webkit-text-fill-color: rgba(201, 152, 106, 0.55) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.66rem !important;
}

/* ---- RESPONSIVE — mobile hero ---- */
@media (max-width: 768px) {
  #hero .hero-title img {
    width: 72vw !important;
    max-width: 340px !important;
  }
  #hero .hero-tagline {
    font-size: 20px !important;
    max-width: 24ch !important;
  }
  #hero .hero-subline {
    font-size: 11px !important;
    letter-spacing: 0.2em !important;
  }
  #hero .hero-senses {
    gap: 0 !important;
  }
  #hero .hero-cta-row {
    gap: 12px !important;
  }
}