/* ============================================
   fany tattoo – Coherent Theme System
   Loaded AFTER styles.css — single source of visual truth
   ============================================ */

:root {
  --th-dark: #08080a;
  --th-dark-card: #141418;
  --th-light: #ffffff;
  --th-light-bg: #F5F4F2;
  --th-text: #0a0a0c;
  --th-body: #3a3840;
  --th-label: #b0126a;
  --th-on-dark: #ffffff;
  --th-on-dark-body: rgba(255, 255, 255, 0.88);
  --th-on-dark-muted: rgba(255, 255, 255, 0.7);
  --th-accent-dark: #ff9ec4;
  --th-pink: #E91E8C;
  --th-fade-light:
    inset 0 0 0 1px rgba(10, 10, 12, 0.04),
    0 0 0 1px rgba(10, 10, 12, 0.03),
    0 14px 40px rgba(10, 10, 12, 0.05);
  --th-fade-dark:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 18px 48px rgba(0, 0, 0, 0.3);
}

/* ── Global type & chrome ── */
html, body, button, input, select, textarea {
  font-family: var(--font-sans);
}

h1, h2, h3, h4,
.section-title,
.logo__name,
.hero__brand,
.hero__title,
.contact__person-name,
.contact__form-title,
.reviews__title,
.faq__title,
.instagram__title,
.results__title,
.benefits__intro,
.services__beauty-title,
.result__heading {
  font-family: var(--font-serif);
}

.btn,
.btn--primary,
.btn--outline,
.btn--sm,
.btn--glow {
  border-radius: 0 !important;
  box-shadow: none !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.72rem;
  border: 0 !important;
}

.btn--primary,
.btn--glow {
  background: var(--th-pink) !important;
  color: #fff !important;
}

.btn--outline {
  background: rgba(10, 10, 12, 0.06) !important;
  color: var(--th-text) !important;
}

.btn--outline:hover {
  background: rgba(233, 30, 140, 0.12) !important;
  color: var(--th-pink) !important;
}

.section--dark .btn--outline,
.instagram__panel .btn--outline,
.reviews__social .btn--outline,
.contact .btn--on-dark.btn--outline {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}

.logo__badge {
  border-radius: 50% !important;
  border: 2px solid var(--th-pink) !important;
  box-shadow: none !important;
}

/* ── Section rhythm ── */
.section {
  padding-block: clamp(64px, 9vw, 112px);
}

.about,
.services.section--light,
.gallery,
.trust,
.how,
.reviews,
.instagram,
.blog,
.faq {
  background: var(--th-light-bg) !important;
  color: var(--th-body);
}

.results,
.pricing,
.contact,
.section--dark,
.benefits,
.hero {
  background: var(--th-dark) !important;
  color: var(--th-on-dark-body);
}

/* ── Labels ── */
.section-label,
.benefits__label,
.faq__label,
.instagram__label {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  padding-bottom: 0 !important;
  margin-bottom: 12px;
  font-size: 0.6875rem !important;
  font-weight: 600;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--th-label) !important;
}

.section-label::after,
.benefits__label::after,
.faq__label::after,
.instagram__label::after {
  content: '';
  position: static !important;
  transform: none !important;
  left: auto !important;
  width: 28px !important;
  height: 1px !important;
  border-radius: 0 !important;
  background: rgba(233, 30, 140, 0.55) !important;
}

.section--dark .section-label,
.section-label--light,
.results .section-label,
.pricing .section-label,
.contact .section-label,
.contact .section-label--light,
.benefits__label,
.instagram__label {
  color: var(--th-accent-dark) !important;
}

.contact__form-wrap .section-label,
.contact .section-label--dark {
  color: var(--th-label) !important;
}

/* ── Titles ── */
.section-title,
.reviews__title,
.faq__title,
.instagram__title,
.results__title,
.benefits__intro,
.services__beauty-title,
.contact__form-title {
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

.section-title,
.reviews__title,
.faq__title,
.contact__form-title,
.services__craft-body h3,
.blog-card h3,
.trust-badge h3,
.step h3,
.faq__q-text,
.review-card__name {
  color: var(--th-text) !important;
  -webkit-text-fill-color: var(--th-text) !important;
}

.section--dark .section-title,
.section-title--light,
.results__title,
.pricing .section-title,
.contact .section-title,
.contact .section-title--light,
.benefits__intro,
.instagram__title,
.services__beauty-title,
.result__heading,
.faq__help-label,
.reviews__social-label,
.contact__person-name {
  color: var(--th-on-dark) !important;
  -webkit-text-fill-color: var(--th-on-dark) !important;
}

/* ── Body copy ── */
.section-intro,
.faq__intro,
.faq__answer p,
.reviews__intro,
.review-card__text,
.blog-card p,
.trust-badge p,
.step p,
.about__content-inner p:not(.about__signature),
.services__craft-body p,
.contact__form-intro,
.contact .form-group label,
.contact .form-hint,
.contact .form-group--checkbox label,
.reviews__trust-label {
  color: var(--th-body) !important;
}

.section--dark .section-intro,
.results__lead,
.results__note,
.pricing__text,
.benefit-card p,
.beauty-card p,
.services__beauty-lead,
.result__text,
.result__points li,
.instagram__intro,
.instagram__profile-meta span,
.reviews__social-text,
.faq__help p,
.contact__detail dd,
.contact__map-note {
  color: var(--th-on-dark-body) !important;
}

.contact__detail dt,
.contact__map-label,
.contact__detail-sub,
.result__hint,
.beauty-card__num,
.benefit-card__num,
.result__index {
  color: var(--th-on-dark-muted) !important;
}

.about__signature,
.services__craft-artist,
.blog-card__meta,
.faq__tag,
.faq__topics li,
.review-card__service {
  color: var(--th-label) !important;
}

.contact__person-role,
.contact__map-link,
.instagram__handle,
.reviews__social-handle,
.services__beauty-artist {
  color: var(--th-accent-dark) !important;
}

.contact__detail a {
  color: #fff !important;
}

.contact__detail a:hover,
.contact__map-link:hover {
  color: var(--th-accent-dark) !important;
}

/* ── Headers ── */
.section-header--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: end;
  text-align: left;
  margin-bottom: clamp(40px, 5vw, 64px);
  padding-bottom: clamp(24px, 3vw, 36px);
  border: 0 !important;
  position: relative;
}

.section-header--left,
.reviews__header,
.results__header {
  text-align: left;
  margin-bottom: clamp(32px, 4vw, 48px);
  padding-bottom: clamp(20px, 3vw, 28px);
  border: 0 !important;
  position: relative;
}

.section-header--split .section-intro,
.section-intro--split {
  margin: 0;
  max-width: none;
  text-align: left;
  font-size: 0.9375rem;
  line-height: 1.7;
}

.section-header--split::after,
.section-header--left::after,
.reviews__header::after,
.results__header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(233, 30, 140, 0.4) 0%, rgba(10, 10, 12, 0.08) 50%, transparent 100%);
}

.section--dark .section-header--left::after,
.results__header::after,
.contact .section-header--left::after {
  background: linear-gradient(90deg, rgba(233, 30, 140, 0.45) 0%, rgba(255, 255, 255, 0.12) 50%, transparent 100%);
}

/* ── Soft-fade surfaces (light) ── */
.review-card,
.reviews__trust-item,
.trust-badge,
.contact__form-wrap,
.faq__item.open {
  position: relative;
  background: var(--th-light) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: var(--th-fade-light) !important;
  overflow: hidden;
}

.review-card,
.reviews__main .review-card {
  padding: 1.5rem 1.35rem !important;
}

.reviews__trust-item {
  padding: 1.15rem 1rem !important;
}

.trust-badge {
  padding: 1.25rem 1.1rem !important;
}

.faq__item {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  position: relative;
}

.faq__item.open {
  background: rgba(233, 30, 140, 0.05) !important;
}

.faq__panel,
.content-panel {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.blog-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.blog-card__img {
  position: relative;
  overflow: hidden;
  box-shadow: var(--th-fade-light) !important;
}

.faq__topics li,
.faq__tag,
.review-card__service {
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(233, 30, 140, 0.12) !important;
  color: var(--th-label) !important;
}

.faq__num {
  color: rgba(176, 18, 106, 0.5) !important;
}

.faq__item.open .faq__num,
.faq__item.open .faq__q-text {
  color: var(--th-pink) !important;
}

.reviews__trust-value {
  color: var(--th-text) !important;
}

/* ── Soft-fade surfaces (dark islands) ── */
.instagram__panel,
.services__beauty-shell,
.faq__help,
.reviews__social,
.contact__aside,
.benefit-card,
.beauty-card,
.result {
  position: relative;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: var(--th-fade-dark) !important;
}

.instagram__panel,
.services__beauty-shell {
  background: var(--th-dark) !important;
}

.faq__help,
.reviews__social,
.contact__aside,
.benefit-card,
.beauty-card,
.result,
.instagram__profile {
  background: var(--th-dark-card) !important;
}

.services__beauty-shell .beauty-card,
.benefits .benefit-card,
.results .result,
.instagram__panel .instagram__profile {
  background: rgba(255, 255, 255, 0.06) !important;
}

.beauty-card__tag,
.instagram__topics li,
.result__tag {
  border: 0 !important;
  color: #ffb0d0 !important;
  background: rgba(233, 30, 140, 0.28) !important;
}

/* Soft edge overlays */
.review-card::after,
.reviews__trust-item::after,
.trust-badge::after,
.contact__form-wrap::after,
.faq__help::after,
.reviews__social::after,
.contact__aside::after,
.instagram__panel::after,
.services__beauty-shell::after,
.beauty-card::after,
.benefit-card::after,
.result::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  display: block !important;
  opacity: 1 !important;
  border: 0 !important;
  box-shadow: none !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, transparent 28%, transparent 72%, rgba(0, 0, 0, 0.06) 100%),
    radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.16) 0%, transparent 55%);
  mix-blend-mode: soft-light;
}

.faq__help::after,
.reviews__social::after,
.contact__aside::after,
.instagram__panel::after,
.services__beauty-shell::after,
.beauty-card::after,
.benefit-card::after,
.result::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, transparent 30%, transparent 68%, rgba(0, 0, 0, 0.32) 100%),
    radial-gradient(90% 60% at 50% -10%, rgba(233, 30, 140, 0.16) 0%, transparent 60%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0%, transparent 16%, transparent 84%, rgba(255, 255, 255, 0.05) 100%);
  mix-blend-mode: screen;
  opacity: 0.9 !important;
}

.review-card > *,
.reviews__trust-item > *,
.trust-badge > *,
.contact__form-wrap > *,
.contact__aside > *,
.faq__help > *,
.reviews__social > *,
.instagram__panel > *,
.services__beauty-shell > *,
.beauty-card > *,
.benefit-card > *,
.result > * {
  position: relative;
  z-index: 2;
}

/* Kill decorative corner chrome / lifts */
.service-card::before,
.review-card::before,
.blog-card::before,
.beauty-card::before,
.benefit-card::before,
.contact__form::before,
.contact::before,
.contact::after,
.pricing::before {
  display: none !important;
}

.review-card:hover,
.blog-card:hover,
.trust-badge:hover,
.benefit-card:hover,
.beauty-card:hover,
.service-card:hover,
.quick-service:hover {
  transform: none !important;
  box-shadow: var(--th-fade-light) !important;
}

.benefit-card:hover,
.beauty-card:hover {
  box-shadow: var(--th-fade-dark) !important;
}

/* ── Gallery / Instagram tiles ── */
.gallery__item,
.instagram__tile {
  position: relative;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  background: #111 !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18) !important;
}

.gallery__item::after,
.instagram__tile::after,
.blog-card__img::after,
.about__img::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 24%, transparent 70%, rgba(0, 0, 0, 0.28) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0%, transparent 14%, transparent 86%, rgba(0, 0, 0, 0.1) 100%);
}

.gallery__item:hover,
.instagram__tile:hover {
  transform: none !important;
  border: 0 !important;
  opacity: 0.94;
}

.gallery__item > *,
.instagram__tile > *,
.blog-card__img > * {
  position: relative;
  z-index: 1;
}

.instagram__tile-tag {
  border: 0 !important;
  background: rgba(10, 10, 12, 0.55) !important;
  backdrop-filter: blur(6px);
}

.about__img {
  border: 0 !important;
  box-shadow: var(--th-fade-light) !important;
}

/* ── Icons ── */
.trust-badge__icon,
.step__icon,
.faq__icon,
.gallery__ig-icon {
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(233, 30, 140, 0.12) !important;
  color: var(--th-label) !important;
  box-shadow: none !important;
}

.reviews__social-icon,
.instagram__profile-icon,
.footer__social a {
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--th-accent-dark) !important;
}

.faq__item.open .faq__icon {
  background: rgba(233, 30, 140, 0.18) !important;
}

/* ── Contact form ── */
.contact__form-wrap {
  background: var(--th-light) !important;
  padding: clamp(1.5rem, 3vw, 2.5rem) !important;
}

.contact__form {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.contact__form-title {
  color: var(--th-text) !important;
  -webkit-text-fill-color: var(--th-text) !important;
}

.contact .form-group input,
.contact .form-group select,
.contact .form-group textarea {
  border: 0 !important;
  border-radius: 0 !important;
  background: #ebe9e6 !important;
  color: var(--th-text) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 0 rgba(10, 10, 12, 0.04),
    0 0 0 1px rgba(10, 10, 12, 0.03) !important;
}

.contact .form-group input::placeholder,
.contact .form-group textarea::placeholder {
  color: #6a6770 !important;
  opacity: 1;
}

.contact .form-group input:focus,
.contact .form-group select:focus,
.contact .form-group textarea:focus {
  outline: none;
  background: #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 0 0 2px rgba(233, 30, 140, 0.22) !important;
}

.contact__aside {
  background: var(--th-dark-card) !important;
  padding: clamp(1.5rem, 3vw, 2.25rem) !important;
}

.contact__map-frame {
  border: 0 !important;
  background: rgba(255, 255, 255, 0.04) !important;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.25);
}

.contact__people,
.contact__map {
  border: 0 !important;
}

/* ── Pricing soft rules ── */
.pricing__band {
  position: relative;
  border: 0 !important;
  box-shadow: none !important;
  background: none !important;
}

.pricing__band::before,
.pricing__band::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 20%, rgba(233, 30, 140, 0.35) 50%, rgba(255, 255, 255, 0.2) 80%, transparent 100%);
}

.pricing__band::before { top: 0; }
.pricing__band::after { bottom: 0; }

/* ── Results BA ── */
.result .ba-slider__viewport {
  border: 0 !important;
  box-shadow: var(--th-fade-dark) !important;
}

.result .ba-slider__label {
  border: 0 !important;
  background: rgba(10, 10, 12, 0.65) !important;
}

/* ── Footer ── */
.footer {
  background: #050507 !important;
  color: var(--th-on-dark-body) !important;
}

.footer__links h4,
.footer__contact h4,
.logo--footer .logo__name {
  color: #fff !important;
}

.footer__links a,
.footer__contact a,
.footer__privacy-link,
.logo--footer .logo__tagline {
  color: var(--th-on-dark-muted) !important;
}

.footer__links a:hover,
.footer__contact a:hover,
.footer__privacy-link:hover {
  color: var(--th-accent-dark) !important;
}

.footer__bottom {
  border: 0 !important;
  background: rgba(255, 255, 255, 0.02);
}

.footer__bottom p {
  color: rgba(255, 255, 255, 0.5) !important;
}

.footer__social a {
  border-radius: 0 !important;
}

/* ── Header ── */
.header {
  border: 0 !important;
  box-shadow: none !important;
}

/* ── Blog modal ── */
.blog-modal__inner {
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.2) !important;
}

/* ── Watermarks ── */
.faq__watermark,
.instagram__watermark,
.content-panel__watermark,
.benefits__mark {
  opacity: 0.7;
  color: rgba(233, 30, 140, 0.06);
}

.instagram__watermark,
.benefits__mark {
  color: rgba(255, 255, 255, 0.04);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .section-header--split {
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
  }

  .faq__side,
  .instagram__side {
    border: 0 !important;
  }
}

@media (max-width: 640px) {
  .instagram__panel {
    padding: 20px 16px !important;
  }

  .contact__form-wrap,
  .contact__aside {
    padding: 1.25rem !important;
  }
}


/* ===== Mobile: fixed header must not cover text ===== */
@media (max-width: 820px) {
  :root {
    --header-height: 64px;
  }

  html {
    scroll-padding-top: calc(var(--header-height) + var(--safe-top) + 12px) !important;
  }

  .header {
    height: calc(var(--header-height) + var(--safe-top)) !important;
    overflow: hidden !important;
  }

  .header__inner {
    height: var(--header-height) !important;
    min-height: 0 !important;
  }

  .logo__badge {
    width: 40px !important;
    height: 40px !important;
  }

  .logo__name {
    font-size: 0.92rem !important;
    line-height: 1.1 !important;
  }

  .logo__tagline {
    font-size: 0.52rem !important;
    white-space: nowrap !important;
  }

  /* Hero top copy in normal flow under header — never overlapping */
  .hero {
    padding: 0 !important;
  }

  .hero__rail--top {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 8px !important;
    padding: calc(var(--header-height) + var(--safe-top) + 14px) 16px 18px !important;
    background: var(--th-dark, #08080a) !important;
    pointer-events: auto !important;
  }

  .hero__brand {
    font-size: clamp(2.2rem, 12vw, 3.2rem) !important;
  }

  .hero__title {
    font-size: clamp(1.05rem, 4.2vw, 1.25rem) !important;
  }

  .hero__stage,
  html.is-mobile .hero__stage {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto auto !important;
    min-height: auto !important;
  }

  .hero__rail--top { order: 0; }
  .hero__panel--karin { order: 1; }
  .hero__panel--milan { order: 2; }
  .hero__rail--bottom { order: 3; }

  .hero__seam {
    display: none !important;
  }

  /* Anchor targets clear the fixed header */
  section[id],
  .section,
  .faq__item,
  .review-card {
    scroll-margin-top: calc(var(--header-height) + var(--safe-top) + 16px) !important;
  }

  /* Sticky FAQ side shouldn't tuck under header */
  .faq__side {
    position: static !important;
    top: auto !important;
  }
}

@media (max-width: 480px) {
  :root {
    --header-height: 60px;
  }

  .hero__rail--top {
    padding: calc(var(--header-height) + var(--safe-top) + 12px) 14px 16px !important;
  }
}

html.is-mobile .hero__rail--top {
  position: relative !important;
  padding-top: calc(var(--header-height) + var(--safe-top) + 14px) !important;
  background: var(--th-dark, #08080a) !important;
}

html.is-mobile {
  scroll-padding-top: calc(var(--header-height) + var(--safe-top) + 12px) !important;
}

html.is-mobile section[id],
html.is-mobile .section {
  scroll-margin-top: calc(var(--header-height) + var(--safe-top) + 16px) !important;
}