/* === hero.css === */
/* ================================================
   HERO SECTION — Beige/warm redesign
   ================================================ */
.hero {
  /* Scoped color palette */
  --hero-bg: var(--color-gray-100);
  --hero-ink: var(--color-gray-900);
  --hero-cream: var(--color-gray-50);
  --hero-soft: var(--color-gray-500);
  --hero-muted: var(--color-secondary);
  --hero-accent: var(--color-accent);
  --hero-warm: var(--color-primary);

  position: relative;
  min-height: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: transparent;
  z-index: 2;
}

/* ---- Particle canvas ---- */
/* ---- Main content grid ---- */
.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(32px, 4vh, 56px) clamp(20px, 5vw, 80px) 0;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

/* ---- Eyebrow ---- */
.hero-eyebrow {
  display: inline-flex;
  font-family: 'Golos Text', sans-serif;
  color: var(--hero-warm);
  margin-bottom: 24px;
  opacity: 0;
  animation: heroFadeUp 0.8s ease forwards 0.3s;
}

.hero-eyebrow::before {
  content: '';
  width: 28px;
  height: 1.5px;
  background: var(--hero-accent);
}

/* ---- Title row: title + guarantee side by side ---- */
.hero-title-row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 28px;
}

/* ---- Title ---- */
.hero-title {
  font-family: 'Lora', serif;
  font-size: clamp(44px, 7vw, 96px);
  font-weight: 400;
  line-height: 1.0;
  color: var(--hero-ink);
  max-width: 800px;
  margin-bottom: 0;
}

.hero-title .line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.15em;
}

.hero-title .line-inner {
  display: block;
  opacity: 0;
  transform: translateY(100%);
  animation: heroLineReveal 0.9s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

.hero-title .line:nth-child(1) .line-inner { animation-delay: 0.4s; }
.hero-title .line:nth-child(2) .line-inner { animation-delay: 0.55s; }

.hero-title em {
  font-style: italic;
  color: var(--hero-warm);
}

/* ---- Price note under title ---- */
.hero-price-note {
  font-family: 'Golos Text', sans-serif;
  font-size: 13px;
  color: var(--hero-muted);
  margin-top: 12px;
  opacity: 0;
  animation: heroFadeUp 0.8s ease forwards 0.65s;
}

/* ---- Subtitle + guarantee wrapper ---- */
.hero-text-block {
  position: relative;
  max-width: 520px;
}

.hero-sub {
  font-family: 'Golos Text', sans-serif;
  font-size: clamp(15px, 1.8vw, 18px);
  color: var(--hero-soft);
  max-width: 480px;
  line-height: 1.6;
  margin-bottom: 40px;
  opacity: 0;
  animation: heroFadeUp 0.8s ease forwards 0.7s;
}

/* ---- CTA row ---- */
.hero-ctas {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  opacity: 0;
  animation: heroFadeUp 0.8s ease forwards 0.85s;
}

.hero-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 36px;
  border-radius: 60px;
  background: linear-gradient(135deg, #2c2620, #3d3428);
  color: var(--hero-cream);
  font-family: 'Golos Text', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: 0 8px 32px rgba(28,26,21,0.2);
}

.hero-cta-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 48px rgba(28,26,21,0.3);
}

.hero-cta-primary::after {
  content: '';
  position: absolute;
  top: -50%; left: -60%;
  width: 40%; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}

.hero-cta-primary:hover::after { left: 120%; }

.hero-cta-primary svg {
  width: 18px; height: 18px;
  stroke: currentColor; stroke-width: 2; fill: none;
  transition: transform 0.3s ease;
}

.hero-cta-primary:hover svg { transform: translateX(4px); }

.hero-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 32px;
  border-radius: 60px;
  border: 1px solid rgba(28,26,21,0.15);
  background: rgba(250,248,244,0.88);
  color: var(--hero-ink);
  font-family: 'Golos Text', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.hero-cta-secondary:hover {
  border-color: rgba(28,26,21,0.3);
  background: rgba(250,248,244,0.75);
  transform: translateY(-2px);
}

/* ---- Pulse dot inside secondary CTA ---- */
.hero-cta-pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ff6b6b;
  position: relative;
  flex-shrink: 0;
}

.hero-cta-pulse::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid #ff6b6b;
  animation: heroPromoPing 1.5s ease-out infinite;
}

/* ================================================
   BOTTOM STRIP: USPs + Reviews
   ================================================ */
.hero-bottom {
  position: relative;
  z-index: 2;
  padding: 0 clamp(20px, 5vw, 80px);
  margin-top: 48px;
  padding-bottom: 40px;
}

.hero-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 16px;
  max-width: 1400px;
  margin: 0 auto;
}

/* ---- Review column ---- */
.hero-review-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---- USP Strip ---- */
.hero-usp-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(250,248,244,0.9);
  border: 1px solid rgba(196,180,154,0.2);
  border-radius: 20px;
  overflow: hidden;
  opacity: 0;
  animation: heroFadeUp 0.8s ease forwards 1.1s;
}

.hero-usp-item {
  padding: 22px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  position: relative;
  transition: background 0.3s ease;
  min-width: 0;
}

.hero-usp-item:hover { background: rgba(196,180,154,0.08); }

.hero-usp-item + .hero-usp-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: rgba(28,26,21,0.06);
}

.hero-usp-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(196,180,154,0.12);
  border: 1px solid rgba(196,180,154,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hero-usp-icon svg {
  width: 16px; height: 16px;
  stroke: var(--hero-warm);
  stroke-width: 1.5; fill: none;
}

.hero-usp-text strong {
  display: block;
  font-family: 'Golos Text', sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--hero-ink);
  margin-bottom: 2px;
  min-width: 0;
  text-wrap: balance;
}

.hero-usp-text span {
  font-family: 'Golos Text', sans-serif;
  font-size: 11px;
  color: var(--hero-soft);
  line-height: 1.15;
  text-wrap: balance;
}

/* ---- Review Card ---- */
.hero-review-card {
  background: rgba(250,248,244,0.92);
  border: 1px solid rgba(196,180,154,0.15);
  border-radius: 20px;
  padding: 22px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(28,26,21,0.06);
  opacity: 0;
  animation: heroFadeUp 0.8s ease forwards 1.2s;
}

.hero-review-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hero-review-header iframe {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 2;
}

.hero-review-label {
  font-family: 'Golos Text', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--hero-muted);
}

.hero-review-rating {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-review-stars {
  display: flex;
  gap: 2px;
}

.hero-review-stars svg {
  width: 14px; height: 14px;
  fill: #f5a623;
  stroke: none;
}

.hero-review-score {
  font-family: 'Golos Text', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--hero-ink);
}

/* Scrolling reviews */
.hero-review-scroll {
  position: relative;
  overflow: hidden;
  height: 56px;
}

.hero-review-track {
  display: flex;
  flex-direction: column;
  transition: transform 0.5s ease-in-out;
}

.hero-review-item {
  height: 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
}

.hero-review-name {
  font-family: 'Golos Text', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--hero-ink);
  margin-bottom: 3px;
}

.hero-review-text {
  font-family: 'Golos Text', sans-serif;
  font-size: 12px;
  color: var(--hero-soft);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hero-review-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hero-review-2gis {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Golos Text', sans-serif;
  font-size: 11px;
  color: var(--hero-muted);
}

.hero-review-2gis img {
  width: 16px; height: 16px;
  border-radius: 4px;
}

a.hero-review-2gis {
  text-decoration: none;
  transition: opacity 0.3s ease;
}

a.hero-review-2gis:hover {
  opacity: 0.7;
}

.hero-review-all {
  font-family: 'Golos Text', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--hero-warm);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: gap 0.3s ease;
}

.hero-review-all:hover { gap: 8px; }

.hero-review-all svg {
  width: 12px; height: 12px;
  stroke: currentColor; stroke-width: 2; fill: none;
}

/* ---- Guarantee floating badge (inside title-row on desktop) ---- */
.hero-guarantee-float {
  position: relative;
  z-index: 3;
  flex-shrink: 0;
  opacity: 0;
  animation: heroFadeUp 0.8s ease forwards 1.3s;
}

.hero-guarantee-circle {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: rgba(250,248,244,0.9);
  border: 1px solid rgba(196,180,154,0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: heroFloatBadge 6s ease-in-out infinite;
  box-shadow: 0 4px 20px rgba(28,26,21,0.06);
}

.hero-guarantee-circle .num {
  font-family: 'Lora', serif;
  font-size: 28px;
  font-weight: 400;
  color: var(--hero-warm);
  line-height: 1;
}

.hero-guarantee-circle .unit {
  font-family: 'Golos Text', sans-serif;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--hero-soft);
  margin-top: 2px;
}

/* Mobile guarantee — shown inline near subtitle */
.hero-guarantee-mobile {
  display: none;
}

/* ---- Hero logo (right side, desktop only) ---- */
.hero-logo {
  display: none;
}

@media (min-width: 1025px) {
  .hero-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    top: 22%;
    transform: translateY(-50%);
    z-index: 1;
    opacity: 0;
    animation: heroFadeUp 0.8s ease forwards 0.9s;
    pointer-events: none;
  }

  .hero-logo img {
    width: clamp(300px, 28vw, 440px);
    height: auto;
  }
}

/* ================================================
   ANIMATIONS
   ================================================ */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes heroLineReveal {
  to { opacity: 1; transform: translateY(0); }
}

/* heroReviewSlide removed — now JS-driven for all 22 reviews */

@keyframes heroPromoPing {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(2); opacity: 0; }
}

@keyframes heroFloatBadge {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(3deg); }
}

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 1200px) {
  .hero-bottom-grid { grid-template-columns: 1fr; }

  .hero-usp-strip {
    grid-template-columns: 1fr 1fr;
  }

  .hero-usp-item + .hero-usp-item::before { display: none; }

  .hero-usp-item:nth-child(1),
  .hero-usp-item:nth-child(2) {
    border-bottom: 1px solid rgba(196,180,154,0.1);
  }

  .hero-usp-item:nth-child(odd) {
    border-right: 1px solid rgba(196,180,154,0.1);
  }
}

@media (max-width: 1024px) {
  .hero-guarantee-float { display: none; }
  .hero-title-row { gap: 0; }

  .hero-guarantee-mobile {
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    pointer-events: none;
  }

  .hero-guarantee-mobile .hero-guarantee-circle {
    width: 76px;
    height: 76px;
  }

  .hero-guarantee-mobile .hero-guarantee-circle .num {
    font-size: 24px;
  }

  .hero-guarantee-mobile .hero-guarantee-circle .unit {
    font-size: 7px;
  }

  .hero-text-block {
    position: relative;
  }
}

@media (max-width: 767px) {
  .hero-content { padding-top: 60px; }

  .hero-usp-item {
    padding: 16px 16px;
    gap: 10px;
  }

  .hero-usp-text strong { font-size: 12px; }
  .hero-usp-text span { font-size: 10px; }
  .hero-usp-icon { width: 32px; height: 32px; border-radius: 8px; }
  .hero-usp-icon svg { width: 14px; height: 14px; }

  .hero-ctas { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero-cta-primary, .hero-cta-secondary { justify-content: center; }

  .hero-guarantee-mobile .hero-guarantee-circle {
    width: 68px;
    height: 68px;
  }

  .hero-guarantee-mobile .hero-guarantee-circle .num { font-size: 22px; }
}

@media (max-width: 480px) {
  .hero-content { padding: 40px 16px 0; }
  .hero-bottom { padding: 0 16px 24px; }
  .hero-title { font-size: 38px; }
  .hero-sub { font-size: 14px; }

  .hero-guarantee-mobile { right: -4px; }
  .hero-guarantee-mobile .hero-guarantee-circle { width: 62px; height: 62px; }
  .hero-guarantee-mobile .hero-guarantee-circle .num { font-size: 20px; }
  .hero-guarantee-mobile .hero-guarantee-circle .unit { font-size: 6px; letter-spacing: 0.5px; }
}

/* === home.css === */
/* ========================================
   Home Page Styles
   About Intro + Animations
   ======================================== */

/* ========================================
   ABOUT SECTION — "Мы — команда, которой доверяют"
   ======================================== */
.about {
  --ab-bg: var(--color-gray-100);
  --ab-ink: var(--color-gray-900);
  --ab-cream: var(--color-gray-50);
  --ab-soft: var(--color-gray-500);
  --ab-muted: var(--color-secondary);
  --ab-accent: var(--color-accent);
  --ab-warm: var(--color-primary);
  --ab-line: rgba(28,26,21,0.07);

  padding: 100px clamp(16px, 5vw, 80px);
  /* NO max-width here — section must be full-width for background */
}

/* Content constrained to 1400px */
.about > * {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

.about-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 560px;
  border-radius: 32px;
  overflow: hidden;
  position: relative;
}

/* ---- Left: Content ---- */
.about-left {
  padding: clamp(40px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.al-eyebrow {
  color: var(--ab-muted);
  margin-bottom: 20px;
}

.al-eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--ab-warm);
}

.al-title {
  margin-bottom: 24px;
  color: var(--ab-ink);
}

.al-title em {
  color: var(--ab-warm);
}

.al-text {
  font-family: 'Golos Text', sans-serif;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ab-soft);
  margin-bottom: 40px;
  max-width: 480px;
}

/* Timeline milestones */
.timeline {
  position: relative;
  padding-left: 28px;
  margin-bottom: 40px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--ab-line);
}

.tl-item {
  position: relative;
  padding-bottom: 20px;
}

.tl-item:last-child {
  padding-bottom: 0;
}

.tl-item::before {
  content: '';
  position: absolute;
  left: -28px;
  top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ab-bg);
  border: 2px solid var(--ab-muted);
  z-index: 1;
  transition: all 0.4s ease;
}

.tl-item.highlight::before {
  border-color: var(--ab-warm);
  background: var(--ab-warm);
  box-shadow: 0 0 0 4px rgba(140,123,99,0.15);
}

.tl-year {
  font-family: 'Lora', serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--ab-warm);
  margin-bottom: 3px;
}

.tl-desc {
  font-family: 'Golos Text', sans-serif;
  font-size: 13px;
  color: var(--ab-soft);
  line-height: 1.5;
}

/* Stats row */
.al-stats {
  display: flex;
  gap: 0;
}

.al-stat {
  flex: 1;
  text-align: center;
  padding: 20px 0;
  position: relative;
}

.al-stat + .al-stat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 25%;
  height: 50%;
  width: 1px;
  background: var(--ab-line);
}

.al-stat-num {
  font-family: 'Lora', serif;
  font-size: clamp(32px, 3vw, 44px);
  font-weight: 400;
  line-height: 1;
  color: var(--ab-ink);
  margin-bottom: 4px;
}

.al-stat-num .s {
  font-size: 0.6em;
  color: var(--ab-warm);
}

.al-stat-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ab-muted);
}

/* ---- Right: Photo with circle mask ---- */
.about-right {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  overflow: hidden;
}

.about-right::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--ab-line) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.5;
}

/* Circle photo */
.ar-photo {
  position: relative;
  width: clamp(300px, 26vw, 420px);
  height: clamp(300px, 26vw, 420px);
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(28,26,21,0.1);
  z-index: 1;
}

.ar-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  transform: scale(1.45) translateX(-13%);
  transition: transform 5s ease;
}

.ar-photo:hover img {
  transform: scale(1.52) translateX(-13%);
}

/* Decorative orbit */
.ar-orbit {
  position: absolute;
  width: calc(clamp(300px, 26vw, 420px) + 60px);
  height: calc(clamp(300px, 26vw, 420px) + 60px);
  border-radius: 50%;
  border: 1px dashed rgba(140,123,99,0.2);
  animation: orbitSpin 50s linear infinite;
  z-index: 0;
}

.ar-orbit .orb-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ab-accent);
  box-shadow: 0 2px 8px rgba(196,180,154,0.3);
}

.ar-orbit .orb-dot:nth-child(1) { top: -5px; left: 50%; transform: translateX(-50%); }
.ar-orbit .orb-dot:nth-child(2) { bottom: -5px; left: 50%; transform: translateX(-50%); }
.ar-orbit .orb-dot:nth-child(3) { top: 50%; right: -5px; transform: translateY(-50%); }

@keyframes orbitSpin { to { transform: rotate(360deg); } }

/* Floating trust badge */
.ar-trust {
  position: absolute;
  bottom: 12%;
  right: 8%;
  z-index: 3;
  padding: 12px 20px;
  background: var(--ab-ink);
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 12px 32px rgba(28,26,21,0.2);
  animation: aboutFloatY 5s ease-in-out infinite;
}

.ar-trust-stars {
  display: flex;
  gap: 2px;
}

.ar-trust-stars svg {
  width: 12px;
  height: 12px;
  fill: #f5a623;
}

.ar-trust-text {
  font-size: 11px;
  font-weight: 600;
  color: var(--ab-cream);
}

.ar-trust-text small {
  display: block;
  font-size: 9px;
  font-weight: 400;
  color: rgba(255,255,255,0.5);
}

@keyframes aboutFloatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Big background number */
.ar-bignum {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Lora', serif;
  font-size: clamp(180px, 20vw, 300px);
  font-weight: 400;
  color: rgba(28,26,21,0.025);
  pointer-events: none;
  line-height: 1;
  z-index: 0;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .about { padding: 60px 16px; }

  .about-layout {
    grid-template-columns: 1fr;
    border-radius: 24px;
  }

  .about-right {
    padding: 40px 20px;
    min-height: 340px;
  }

  .ar-photo {
    width: clamp(220px, 55vw, 300px);
    height: clamp(220px, 55vw, 300px);
  }

  .ar-photo img {
    transform: scale(1.45) translateX(-13%);
  }

  .ar-photo:hover img {
    transform: scale(1.52) translateX(-13%);
  }

  .ar-orbit {
    width: calc(clamp(220px, 55vw, 300px) + 48px);
    height: calc(clamp(220px, 55vw, 300px) + 48px);
  }

  .about-left { padding: 32px 24px 40px; }

  .timeline { margin-bottom: 32px; }
}

@media (max-width: 480px) {
  .about-left { padding: 24px 20px 32px; }

  .al-stats { flex-wrap: wrap; }
  .al-stat { flex: 1 1 33%; padding: 14px 0; }
  .al-stat-num { font-size: 28px; }

  .ar-trust { padding: 10px 14px; bottom: 8%; right: 4%; }
  .ar-bignum { font-size: 140px; }
}


/* === sections2.css === */
/* ========================================
   Additional Sections Styles (Part 2)
   Examples, FAQ, Contacts, Promos, Reviews
   (Projects section moved to solutions.css)
   ======================================== */

/* NOTE: Old .projects-section styles removed — now in solutions.css */

/* Projects section styles moved to solutions.css */

/* Old .projects-label removed */

.projects-section .section-subtitle {
  max-width: 460px;
  margin: 0 auto;
  font-size: 15px;
  color: var(--color-gray-500);
  line-height: 1.6;
}

/* Carousel wrapper */
.projects-carousel {
  position: relative;
}

/* Horizontal scrolling track */
.projects-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;

  scrollbar-width: none;
  padding: 16px 4px 20px;
}

.projects-track::-webkit-scrollbar {
  display: none;
}

/* Card */
.project-card {
  position: relative;
  flex: 0 0 calc(33.33% - 14px);
  background: var(--glass-bg);
  border: 1px solid rgba(180, 180, 195, 0.45);
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
  box-shadow: var(--glass-shadow);
}

.project-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 60px rgba(0,0,0,0.1), 0 8px 20px rgba(0,0,0,0.06);
  border-color: rgba(160, 160, 180, 0.6);
}

/* Shine effect on hover */
.project-card::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.3) 50%, transparent 60%);
  transform: translateX(-100%);
  pointer-events: none;
  z-index: 5;
}

.project-card:hover::after {
  animation: projectShine 0.8s ease forwards;
}

@keyframes projectShine {
  to { transform: translateX(60%); }
}

/* Visual zone */
.project-card__visual {
  height: 140px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Gradient backgrounds per card */
.project-card:nth-child(1) .project-card__visual {
  background: linear-gradient(135deg, #e8e8f0 0%, #d4d4e0 50%, #c8c8d8 100%);
}
.project-card:nth-child(2) .project-card__visual {
  background: linear-gradient(135deg, #eaeaf2 0%, #dcdce8 50%, #d0d0e0 100%);
}
.project-card:nth-child(3) .project-card__visual {
  background: linear-gradient(135deg, #e6e6f0 0%, #d8d8e8 50%, #ccccdc 100%);
}
.project-card:nth-child(4) .project-card__visual {
  background: linear-gradient(135deg, #ecece8 0%, #e0e0d8 50%, #d4d4cc 100%);
}
.project-card:nth-child(5) .project-card__visual {
  background: linear-gradient(135deg, #e8eced 0%, #d8dce0 50%, #ccd0d4 100%);
}
.project-card:nth-child(6) .project-card__visual {
  background: linear-gradient(135deg, #ece8ec 0%, #e0d8e0 50%, #d4ccd4 100%);
}

/* Wave at bottom of visual zone */
.project-card__visual::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 30px;
  background: rgba(255, 255, 255, 0.15);
  clip-path: ellipse(55% 100% at 50% 100%);
}

/* Room icon */
.project-card__room-icon {
  width: 80px;
  height: 80px;
  opacity: 0.5;
  transition: all 0.4s ease;
}

.project-card:hover .project-card__room-icon {
  opacity: 0.7;
  transform: scale(1.05);
}

/* Badge */
.project-card__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 14px;
  border-radius: 30px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  z-index: 3;
}

.project-card__badge--popular {
  background: linear-gradient(135deg, #2952cc, #4a7aff);
  color: #fff;
}

.project-card__badge--premium {
  background: linear-gradient(135deg, #8b6914, #c9a230);
  color: #fff;
}

/* Content area */
.project-card__content {
  padding: 22px 22px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.project-card__room {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 4px;
  line-height: 1.3;
}

.project-card__details {
  font-size: 13px;
  color: var(--color-gray-500);
  font-weight: 400;
  margin-bottom: 18px;
  line-height: 1.5;
}

/* Divider */
.project-card__divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.08), transparent);
  margin-bottom: 16px;
}

/* Includes list (itemized pricing) */
.project-card__includes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

/* Package item row */
.pkg-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pkg-item__name {
  font-size: 12px;
  color: #444;
  font-weight: 500;
  line-height: 1.3;
}

.pkg-item__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.pkg-item__calc {
  font-size: 11px;
  color: var(--color-secondary);
  font-weight: 400;
  white-space: nowrap;
}

.pkg-item__sum {
  font-size: 12px;
  color: var(--color-gray-900);
  font-weight: 600;
  white-space: nowrap;
}

.pkg-item__sum--free {
  color: #2a8c2a;
  font-weight: 600;
  font-style: italic;
}

/* Free spotlights — single row */
.pkg-item--free {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #2a8c2a;
}

.pkg-item--free .pkg-item__sum--free {
  margin-left: auto;
}

.pkg-item__gift {
  flex-shrink: 0;
  color: #2a8c2a;
}

/* Footnote */
.projects-note {
  text-align: center;
  font-size: 12px;
  color: var(--color-gray-500);
  margin-top: 24px;
  font-style: italic;
  line-height: 1.5;
  background: rgba(255, 255, 255, 0.88);
  padding: 12px 20px;
  border-radius: 10px;
  border: 1px solid rgba(180, 180, 195, 0.3);
}

/* ---- Calc CTA — premium style matching solutions section ---- */
.projects-calc-cta {
  margin-top: 40px;
  text-align: center;
  padding: 40px 32px 36px;
  background: var(--color-gray-50);
  border-radius: 28px;
  border: 1px solid rgba(28,26,21,0.07);
}

.projects-calc-cta__heading {
  font-family: 'Lora', serif;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 400;
  color: var(--color-gray-900);
  margin-bottom: 8px;
  line-height: 1.2;
}

.projects-calc-cta__sub {
  font-family: 'Golos Text', sans-serif;
  font-size: 14px;
  color: var(--color-gray-500);
  margin-bottom: 28px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.projects-calc-cta__options {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 16px;
}

.projects-calc-cta__option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 32px;
  background: var(--color-gray-100);
  border: 1px solid rgba(28,26,21,0.07);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  text-decoration: none;
  color: var(--color-gray-900);
  min-width: 210px;
}

.projects-calc-cta__option:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(28,26,21,0.08);
  border-color: var(--color-accent);
}

.projects-calc-cta__option svg {
  color: var(--color-primary);
  transition: transform 0.3s ease;
}
.projects-calc-cta__option:hover svg {
  transform: scale(1.1);
}

.projects-calc-cta__option--accent {
  background: rgba(140,123,99,0.06);
  border-color: rgba(140,123,99,0.2);
  color: var(--color-gray-900);
  font-family: inherit;
  font-size: inherit;
}

.projects-calc-cta__option--accent:hover {
  background: rgba(140,123,99,0.1);
  border-color: var(--color-accent);
}

.projects-calc-cta__option-title {
  font-family: 'Golos Text', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--color-gray-900);
}

.projects-calc-cta__option-desc {
  font-family: 'Golos Text', sans-serif;
  font-size: 12px;
  color: var(--color-secondary);
}

.projects-calc-cta__or {
  font-family: 'Golos Text', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-secondary);
  font-style: normal;
  display: flex;
  align-items: center;
}

@media (max-width: 560px) {
  .projects-calc-cta {
    padding: 28px 20px;
    border-radius: 20px;
  }
  .projects-calc-cta__options {
    flex-direction: column;
    gap: 10px;
  }
  .projects-calc-cta__option {
    width: 100%;
    min-width: 0;
    padding: 18px 20px;
    flex-direction: row;
    gap: 14px;
    border-radius: 16px;
  }
  .projects-calc-cta__option svg {
    flex-shrink: 0;
  }
  .projects-calc-cta__or {
    display: none;
  }
}


/* Price row */
.project-card__price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 18px;
  margin-top: auto;
}

.project-card__price-label {
  font-size: 11px;
  color: var(--color-secondary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.project-card__price {
  font-size: 24px;
  font-weight: 800;
  color: #c41e1e;
  line-height: 1;
}

.project-card__currency {
  font-size: 18px;
  font-weight: 600;
}

/* Button */
.project-card__btn {
  display: block;
  width: 100%;
  padding: 13px;
  background: linear-gradient(135deg, #d42020, #b81818);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.project-card__btn:hover {
  background: linear-gradient(135deg, #e02525, #c41e1e);
  box-shadow: 0 8px 25px rgba(200, 30, 30, 0.3);
  transform: translateY(-1px);
}

.project-card__btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transition: left 0.5s ease;
}

.project-card__btn:hover::before {
  left: 100%;
}

/* Arrow navigation */
.projects-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(220, 222, 230, 0.85);
  border: 1px solid rgba(230,233,240,0.8);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  color: var(--color-gray-700);
}

.projects-arrow:hover {
  background: var(--color-white);
  box-shadow: 0 6px 24px rgba(0,0,0,0.15);
  transform: translateY(-50%) scale(1.1);
}

.projects-arrow--prev { left: -56px; }
.projects-arrow--next { right: -56px; }

/* Tablet: 2 per view */
@media (max-width: 960px) {
  .project-card {
    flex: 0 0 calc(50% - 10px);
  }
}

/* Mobile: 1 + peek */
@media (max-width: 560px) {
  .project-card {
    flex: 0 0 85%;
  }

  .project-card__visual {
    height: 110px;
  }

  .projects-header {
    margin-bottom: 36px;
  }

  .projects-arrow {
    display: none;
  }
}

/* Examples section styles moved to examples.css */

/* ========================================
   FAQ SECTION — moved to faq.css
   ======================================== */

/* ========================================
   CONTACTS SECTION
   ======================================== */

.contacts-section {
  background: transparent;
}

.contacts-grid {
  margin-top: var(--space-8);
  align-items: start;
}

.contacts-subtitle {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-gray-900);
  margin-bottom: var(--space-4);
}

.contact-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.contact-item svg {
  color: var(--color-primary);
  flex-shrink: 0;
}

.contact-link {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-gray-900);
  text-decoration: none;
  transition: var(--transition-fast);
}

.contact-link:hover {
  color: var(--color-primary);
}

.contact-text {
  font-size: var(--text-base);
  color: var(--color-gray-700);
}

.contacts-messengers {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.messenger-btn {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-base);
}

.messenger-btn:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ========================================
   PROMOTIONS SECTION (main page)
   ======================================== */

.promos-section {
  padding: var(--space-16) 0;
  position: relative;
  overflow: hidden;
}

.promos-header {
  margin-bottom: var(--space-10);
}

.promos-label {
  letter-spacing: 3.5px;
  color: var(--color-secondary);
  margin-bottom: 14px;
}

/* Promos grid */
.promos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .promos-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }
  .promo-home-card--featured {
    grid-column: 1 / -1;
    max-width: 720px;
    margin: 0 auto;
    width: 100%;
  }
}

/* Card base */
.promo-home-card {
  position: relative;
  border-radius: 16px;
  background: var(--glass-bg);
  border: 1px solid rgba(180, 180, 195, 0.45);
  box-shadow:
    0 8px 32px rgba(28,26,21,0.07),
    0 1px 3px rgba(255,255,255,0.9) inset;
  padding: var(--space-8) var(--space-6);
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.23,1,0.32,1);
  display: flex;
  flex-direction: column;
}

.promo-home-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 20px 60px rgba(28,26,21,0.12),
    0 1px 3px rgba(255,255,255,1) inset;
  border-color: rgba(160, 160, 180, 0.6);
}

/* Colored top line */
.promo-home-card__top-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 24px 24px 0 0;
}

.promo-home-card--gold .promo-home-card__top-line {
  background: linear-gradient(90deg, #FFD700, #FF8C00, #FFD700);
}
.promo-home-card--green .promo-home-card__top-line {
  background: linear-gradient(90deg, #22C55E, #10B981, #22C55E);
}
.promo-home-card--red .promo-home-card__top-line {
  background: linear-gradient(90deg, #EF4444, #F97316, #EF4444);
}

/* Auto-shine */
.promo-home-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    transparent 0%, transparent 40%,
    rgba(230,235,245,0.2) 45%,
    rgba(248,250,255,0.35) 50%,
    rgba(230,235,245,0.2) 55%,
    transparent 60%, transparent 100%
  );
  background-size: 300% 300%;
  background-position: 100% 100%;
  pointer-events: none;
  animation: promoHomeShine 6s ease-in-out infinite;
}

@keyframes promoHomeShine {
  0%, 100% { background-position: 100% 100%; }
  40%, 60% { background-position: 0% 0%; }
}

/* Badge */
.promo-home-card__badge {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  z-index: 2;
}

.promo-home-card__badge--gold {
  background: linear-gradient(135deg, #FFD700, #FF8C00);
  color: #1a1a1a;
}
.promo-home-card__badge--green {
  background: linear-gradient(135deg, #22C55E, #059669);
  color: #fff;
}
.promo-home-card__badge--red {
  background: linear-gradient(135deg, #EF4444, #DC2626);
  color: #fff;
}

/* Icon */
.promo-home-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  transition: all 0.5s ease;
}

.promo-home-card:hover .promo-home-card__icon {
  transform: scale(1.1);
}

.promo-home-card__icon svg {
  width: 28px;
  height: 28px;
}

.promo-home-card__icon--gold {
  background: linear-gradient(135deg, rgba(255,215,0,0.2), rgba(255,140,0,0.15));
  border: 1px solid rgba(255,215,0,0.4);
  box-shadow: 0 0 20px rgba(255,215,0,0.15);
}
.promo-home-card__icon--gold svg { stroke: #D97706; }

.promo-home-card__icon--green {
  background: linear-gradient(135deg, rgba(34,197,94,0.2), rgba(5,150,105,0.15));
  border: 1px solid rgba(34,197,94,0.4);
  box-shadow: 0 0 20px rgba(34,197,94,0.15);
}
.promo-home-card__icon--green svg { stroke: #059669; }

.promo-home-card__icon--red {
  background: linear-gradient(135deg, rgba(239,68,68,0.15), rgba(249,115,22,0.12));
  border: 1px solid rgba(239,68,68,0.35);
  box-shadow: 0 0 20px rgba(239,68,68,0.1);
}
.promo-home-card__icon--red svg { stroke: #DC2626; }

/* Discount number */
.promo-home-card__discount {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  line-height: 1;
  margin-bottom: var(--space-2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: promoPulse 3s ease-in-out infinite;
}

.promo-home-card__discount--gold {
  background-image: linear-gradient(135deg, #FFD700, #FF8C00, #FFD700);
}
.promo-home-card__discount--green {
  background-image: linear-gradient(135deg, #22C55E, #059669, #22C55E);
}
.promo-home-card__discount--red {
  background-image: linear-gradient(135deg, #EF4444, #F97316, #EF4444);
}

@keyframes promoPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Title & description */
.promo-home-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: var(--space-2);
  line-height: 1.3;
}

.promo-home-card__desc {
  font-size: var(--text-sm);
  color: var(--color-gray-600);
  line-height: 1.6;
  margin-bottom: var(--space-5);
}

/* CTA button */
.promo-home-card__btn {
  margin-top: auto;
  width: 100%;
}

/* ---- Featured card layout ---- */
.promo-home-card--featured {
  padding: var(--space-8) var(--space-6);
}

.promo-home-card--featured .promo-home-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.promo-home-card--featured .promo-home-card__desc {
  margin-bottom: var(--space-3);
}

@media (min-width: 768px) {
  .promo-home-card--featured .promo-home-card__body {
    flex-direction: row;
    align-items: center;
    gap: var(--space-10);
  }

  .promo-home-card--featured .promo-home-card__info {
    flex: 1;
  }

  .promo-home-card--featured .promo-home-card__timer-block {
    flex-shrink: 0;
    text-align: center;
    min-width: 300px;
  }
}

/* ---- Countdown Timer ---- */
.promo-home-card__timer-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-gray-600);
  margin-bottom: var(--space-3);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.promo-timer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-bottom: var(--space-5);
}

.promo-timer__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 54px;
}

.promo-timer__number {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 700;
  color: var(--color-gray-900);
  line-height: 1;
  background: var(--glass-bg);
  border: 1px solid rgba(180, 180, 195, 0.45);
  border-radius: 12px;
  padding: var(--space-2) var(--space-3);
  box-shadow: 0 4px 16px rgba(28,26,21,0.06);
  width: 100%;
  text-align: center;
}

.promo-timer__label {
  font-size: 10px;
  color: var(--color-gray-500);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.promo-timer__sep {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--color-gray-400);
  padding-bottom: 18px;
}

/* Featured card button */
.promo-home-card--featured .promo-home-card__btn {
  width: 100%;
}

/* ---- Footer link ---- */
.promos-footer {
  text-align: center;
  margin-top: var(--space-8);
}

/* promos-all-link replaced by btn-promo-wrap in components.css */

/* ========================================
   REVIEWS SECTION — PREMIUM REDESIGN
   ======================================== */

/* Keyframes for reviews section */
@keyframes reviewsFadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes reviewsBadgeShine {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.reviews-section {
  padding: 100px 0 110px;
  position: relative;
  overflow: hidden;
}

/* Decorative background elements */
.reviews-section::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196,180,154,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.reviews-section::after {
  content: '';
  position: absolute;
  bottom: -150px;
  left: -150px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196,180,154,0.05) 0%, transparent 70%);
  pointer-events: none;
}

/* ---- Header ---- */
.reviews-header {
  text-align: center;
  margin-bottom: 60px;
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reviews-section.visible .reviews-header {
  opacity: 1;
  transform: translateY(0);
}

.reviews-label {
  font-weight: 500;
  letter-spacing: 4px;
  color: #8a95a5;
  margin-bottom: 12px;
  display: block;
  text-align: center;
}

.reviews-section .section-title {
  color: var(--color-gray-900);
  margin-bottom: 16px;
}

.reviews-section .section-title em {
  font-style: normal;
}

.reviews-section .section-subtitle {
  font-family: var(--font-primary);
  font-size: 18px;
  color: #64748b;
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ---- Rating Badge ---- */
.reviews-rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding: 12px 28px;
  border-radius: 50px;
  background: var(--glass-bg);
  border: 1px solid rgba(180, 180, 195, 0.45);
  box-shadow:
    0 4px 20px rgba(28,26,21,0.06),
    0 1px 3px rgba(0,0,0,0.03);
  position: relative;
  overflow: hidden;
}

.reviews-rating-badge::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.6) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  pointer-events: none;
}

.reviews-section.visible .reviews-rating-badge::after {
  animation: reviewsBadgeShine 3s ease-in-out 1s infinite;
}

.reviews-rating-stars {
  display: flex;
  gap: 2px;
}

.reviews-rating-stars svg {
  width: 18px;
  height: 18px;
  fill: #F59E0B;
  filter: drop-shadow(0 1px 2px rgba(245,158,11,0.3));
}

.reviews-rating-score {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  color: #2c2620;
}

.reviews-rating-text {
  font-family: var(--font-primary);
  font-size: 14px;
  color: #64748b;
}

/* ---- Slider Container ---- */
.reviews-slider {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.reviews-viewport {
  overflow: hidden;
  border-radius: 20px;
}

.reviews-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

/* ---- Review Card — premium glassmorphism (scoped to carousel) ---- */
.reviews-section .review-card {
  flex: 0 0 calc(33.333% - 24px);
  margin: 0 12px;
  box-sizing: border-box;
  position: relative;
  background: var(--glass-bg);
  border: 1px solid rgba(180, 180, 195, 0.45);
  border-radius: 16px;
  box-shadow:
    0 1px 1px rgba(255,255,255,1) inset,
    0 -1px 1px rgba(0,0,0,0.02) inset,
    0 12px 40px -8px rgba(28,26,21,0.08),
    0 4px 12px -2px rgba(28,26,21,0.04);
  padding: 36px 32px 32px;
  overflow: hidden;
  transition: all 0.55s cubic-bezier(0.23,1,0.32,1);
  display: flex;
  flex-direction: column;
  min-height: 320px;
  opacity: 0;
  transform: translateY(30px);
}

.reviews-section.visible .review-card:nth-child(1) { animation: reviewsFadeUp 0.6s ease forwards 0.1s; }
.reviews-section.visible .review-card:nth-child(2) { animation: reviewsFadeUp 0.6s ease forwards 0.2s; }
.reviews-section.visible .review-card:nth-child(3) { animation: reviewsFadeUp 0.6s ease forwards 0.3s; }
.reviews-section.visible .review-card:nth-child(4) { animation: reviewsFadeUp 0.6s ease forwards 0.4s; }
.reviews-section.visible .review-card:nth-child(5) { animation: reviewsFadeUp 0.6s ease forwards 0.5s; }
.reviews-section.visible .review-card:nth-child(6) { animation: reviewsFadeUp 0.6s ease forwards 0.6s; }
.reviews-section.visible .review-card:nth-child(7) { animation: reviewsFadeUp 0.6s ease forwards 0.7s; }

/* Inner card content z-index */
.reviews-section .review-card__quote,
.reviews-section .review-card__stars,
.reviews-section .review-card__text,
.reviews-section .review-card__divider {
  position: relative;
  z-index: 2;
}

.reviews-section .review-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow:
    0 1px 1px rgba(255,255,255,1) inset,
    0 -1px 1px rgba(0,0,0,0.02) inset,
    0 32px 64px -12px rgba(28,26,21,0.14),
    0 8px 20px -4px rgba(28,26,21,0.06);
  border-color: rgba(160, 160, 180, 0.6);
}

/* Top decorative accent line */
.reviews-section .review-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 32px;
  right: 32px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg,
    var(--color-primary),
    var(--color-primary-light),
    var(--color-primary));
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 2;
}

.reviews-section .review-card:hover::before {
  opacity: 1;
}

/* Shine sweep on hover */
.reviews-section .review-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 0%, transparent 38%,
    rgba(255,255,255,0.4) 44%,
    rgba(255,255,255,0.6) 50%,
    rgba(255,255,255,0.4) 56%,
    transparent 62%, transparent 100%
  );
  background-size: 300% 100%;
  background-position: 200% 0;
  pointer-events: none;
  border-radius: 24px;
  transition: background-position 0.8s ease;
  z-index: 1;
}

.reviews-section .review-card:hover::after {
  background-position: -100% 0;
}

/* Quote mark */
.reviews-section .review-card__quote {
  font-family: var(--font-display);
  font-size: 72px;
  font-weight: 700;
  line-height: 0.8;
  color: var(--color-primary);
  opacity: 0.1;
  margin-bottom: -10px;
  user-select: none;
  transition: opacity 0.4s ease;
}

.reviews-section .review-card:hover .review-card__quote {
  opacity: 0.18;
}

/* Stars row */
.reviews-section .review-card__stars {
  display: flex;
  gap: 3px;
  margin-bottom: 20px;
}

.reviews-section .review-card__stars svg {
  width: 16px;
  height: 16px;
  fill: #F59E0B;
  filter: drop-shadow(0 1px 2px rgba(245,158,11,0.3));
}

/* Review text */
.reviews-section .review-card__text {
  font-family: var(--font-primary);
  font-size: 15px;
  color: #4a4f5c;
  line-height: 1.75;
  flex: 1;
  margin-bottom: 24px;
  position: relative;
  z-index: 2;
}

/* Divider */
.reviews-section .review-card__divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(196,180,154,0.15), transparent);
  margin-bottom: 20px;
}

/* Author block */
.reviews-section .review-card__author {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 2;
}

.reviews-section .review-card__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  flex-shrink: 0;
}

.reviews-section .review-card__avatar-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, #2c2620 0%, var(--color-primary) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.reviews-section .review-card__info {
  flex: 1;
  min-width: 0;
}

.reviews-section .review-card__name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: #2c2620;
  line-height: 1.3;
}

.reviews-section .review-card__verified {
  display: inline-flex;
  flex-shrink: 0;
}

.reviews-section .review-card__verified svg {
  width: 18px;
  height: 18px;
}

.reviews-section .review-card__date {
  display: block;
  font-family: var(--font-primary);
  font-size: 13px;
  color: #94a3b8;
  margin-top: 3px;
}

/* ---- Navigation ---- */
.reviews-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 48px;
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.5s ease 0.4s, transform 0.5s ease 0.4s;
}

.reviews-section.visible .reviews-nav {
  opacity: 1;
  transform: translateY(0);
}

.reviews-nav-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(220, 222, 230, 0.85);
  border: 1px solid rgba(180, 180, 195, 0.45);
  box-shadow:
    0 4px 20px rgba(28,26,21,0.08),
    0 1px 3px rgba(0,0,0,0.04);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.35s cubic-bezier(0.23,1,0.32,1);
  color: #64748b;
  padding: 0;
}

.reviews-nav-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.reviews-nav-btn:hover {
  background: #fff;
  box-shadow:
    0 8px 30px rgba(28,26,21,0.15),
    0 2px 6px rgba(0,0,0,0.06);
  color: var(--color-primary);
  transform: scale(1.1);
}

.reviews-nav-btn:active {
  transform: scale(0.95);
}

/* Dots navigation */
.reviews-dots {
  display: flex;
  gap: 8px;
  align-items: center;
}

.reviews-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #cbd5e1;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.reviews-dot:hover {
  background: #94a3b8;
  transform: scale(1.2);
}

.reviews-dot--active {
  background: var(--color-primary);
  width: 28px;
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(140,123,99,0.3);
}

/* ---- CTA button ---- */
.reviews-cta {
  text-align: center;
  margin-top: 32px;
}

.reviews-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .reviews-section .review-card {
    flex: 0 0 calc(50% - 24px);
  }
  .reviews-section .section-title {
    font-size: 38px;
  }
  .reviews-section {
    padding: 80px 0 90px;
  }
}

@media (max-width: 767px) {
  .reviews-section .review-card {
    flex: 0 0 calc(100% - 16px);
    margin: 0 8px;
    min-height: 280px;
    padding: 28px 24px 24px;
  }
  .reviews-section {
    padding: 60px 0 70px;
  }
  .reviews-section .section-title {
    font-size: 30px;
  }
  .reviews-section .section-subtitle {
    font-size: 16px;
  }
  .reviews-header {
    margin-bottom: 40px;
  }
  .reviews-slider {
    padding: 0 16px;
  }
  .reviews-rating-badge {
    padding: 10px 20px;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .reviews-rating-text {
    font-size: 12px;
  }
  .reviews-nav {
    margin-top: 32px;
    gap: 14px;
  }
  .reviews-nav-btn {
    width: 42px;
    height: 42px;
  }
}

/* Disable sticky hover on touch devices */
@media (hover: none) {
  .project-card:hover {
    transform: none;
    box-shadow: 0 15px 40px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04);
    border-color: rgba(160, 160, 180, 0.55);
  }
  .project-card:hover::after { animation: none; }
  .project-card:hover .project-card__room-icon { opacity: 0.5; transform: none; }
  .project-card__btn:hover {
    background: linear-gradient(135deg, #d42a2a, #c41e1e);
    box-shadow: 0 6px 20px rgba(200, 30, 30, 0.25);
    transform: none;
  }
  .project-card__btn:hover::before { left: -100%; }
  .projects-arrow:hover {
    background: rgba(255,255,255,0.85);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    transform: translateY(-50%);
  }
  .ex-card:hover {
    transform: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border-color: rgba(180, 180, 195, 0.45);
  }
  .ex-card:hover::after { transform: translateX(-120%); transition: none; }
  .ex-card__expand-btn:hover { background: transparent; }
  .contact-link:hover { color: var(--color-gray-900); }
  .messenger-btn:hover {
    background: var(--color-primary);
    transform: none;
    box-shadow: none;
  }
  .promo-home-card:hover {
    transform: none;
    box-shadow: 0 8px 32px rgba(28,26,21,0.08), 0 1px 3px rgba(255,255,255,0.8) inset;
    border-color: rgba(160, 160, 180, 0.55);
  }
  .promo-home-card:hover .promo-home-card__icon { transform: none; }
  .reviews-section .review-card:hover {
    transform: none;
    box-shadow: 0 1px 1px rgba(255,255,255,0.8) inset, 0 8px 30px -8px rgba(28,26,21,0.08);
    border-color: rgba(160, 160, 180, 0.55);
  }
  .reviews-section .review-card:hover::before { opacity: 0; }
  .reviews-section .review-card:hover::after { background-position: 200% 0; }
  .reviews-section .review-card:hover .review-card__quote { opacity: 0.1; }
  .reviews-nav-btn:hover {
    background: rgba(255,255,255,0.85);
    box-shadow: 0 4px 16px rgba(28,26,21,0.08);
    color: inherit;
    transform: none;
  }
  .reviews-dot:hover { background: #cbd5e1; transform: none; }
}


/* ========================================
   CTA BLOCK "Не знаете, что выбрать?"
   ======================================== */

/* cta-choice styles moved to photo-cta.css */

/* TASKS SECTION — moved to tasks.css (np-solve redesign) */

/* === process.css === */
/* ========================================
   PROCESS SECTION — "How We Work" redesign
   Interactive rail (desktop) + accordion (mobile)
   ======================================== */

@property --np-glow-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* --- Section-level vars --- */
.np-hww-section {
  --np-cream: var(--color-gray-100);
  --np-dark: #0f0e0c;
  --np-gold: var(--color-accent);
  --np-warm: var(--color-primary);
  --np-gold-light: #d4c8b0;
  --np-cream-dark: var(--color-gray-200);
}

/* --- Section wrapper --- */
.np-hww-section {
  font-family: 'Golos Text', var(--font-primary);
  color: var(--np-dark);
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding: 80px 0 100px;
  /* transparent overlay so fon-bg shows through */
  background: transparent;
}

/* Subtle ambient gradient removed for performance — virtually invisible at 0.12/0.08 alpha */

/* --- Header --- */
.np-hww-header {
  text-align: center;
  position: relative;
  z-index: 2;
  margin-bottom: 70px;
}

.np-hww-label {
  font-family: 'Golos Text', var(--font-primary);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 4px;
  color: var(--np-warm);
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(20px);
}

.np-hww-section.visible .np-hww-label {
  animation: np-hww-fadeUp 0.8s ease forwards 0.2s;
}

.np-hww-title {
  color: var(--np-dark);
  opacity: 0;
  transform: translateY(30px);
}

.np-hww-section.visible .np-hww-title {
  animation: np-hww-fadeUp 0.8s ease forwards 0.4s;
}

.np-hww-title em {
  color: var(--np-warm);
}

.np-hww-subtitle {
  font-size: 16px;
  color: rgba(15,14,12,0.45);
  margin-top: 16px;
  font-weight: 300;
  opacity: 0;
  transform: translateY(20px);
}

.np-hww-section.visible .np-hww-subtitle {
  animation: np-hww-fadeUp 0.8s ease forwards 0.6s;
}

/* ========================================
   DESKTOP JOURNEY (rail + cards)
   ======================================== */

.np-hww-journey {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

/* --- Rail --- */
.np-hww-rail {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.np-hww-rail-line {
  position: absolute;
  top: 50%;
  left: 40px;
  right: 40px;
  height: 1px;
  background: rgba(140,123,99,0.15);
  transform: translateY(-50%);
}

.np-hww-rail-progress {
  position: absolute;
  top: 50%;
  left: 40px;
  height: 2px;
  background: linear-gradient(90deg, var(--np-warm), var(--np-gold));
  transform: translateY(-50%);
  width: 0%;
  transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Nodes --- */
.np-hww-node {
  position: relative;
  z-index: 2;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.np-hww-node-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(244,242,237,0.85);
  border: 1px solid rgba(140,123,99,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.6s ease, border-color 0.6s ease, box-shadow 0.6s ease, transform 0.6s ease;
  position: relative;
}

.np-hww-node-circle::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(from var(--np-glow-angle), transparent, rgba(140,123,99,0.25), transparent);
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: -1;
  animation: none;
}

.np-hww-node.active .np-hww-node-circle::before {
  opacity: 1;
  animation: np-hww-glowSpin 3s linear infinite;
}

.np-hww-node.active .np-hww-node-circle {
  background: rgba(255,255,255,0.9);
  border-color: var(--np-warm);
  box-shadow: 0 4px 24px rgba(140,123,99,0.15);
  transform: scale(1.15);
}

.np-hww-node.completed .np-hww-node-circle {
  background: rgba(255,255,255,0.5);
  border-color: rgba(140,123,99,0.25);
}

.np-hww-node-icon {
  width: 26px;
  height: 26px;
  color: var(--np-warm);
  transition: opacity 0.5s ease, transform 0.5s ease, color 0.5s ease;
  opacity: 0.55;
}

.np-hww-node.active .np-hww-node-icon {
  opacity: 1;
  transform: scale(1.05);
  color: var(--np-dark);
}

.np-hww-node.completed .np-hww-node-icon { opacity: 0.4; }

.np-hww-node-num {
  font-family: 'Lora', serif;
  font-size: 13px;
  color: rgba(15,14,12,0.25);
  transition: color 0.5s ease;
  letter-spacing: 1px;
}

.np-hww-node.active .np-hww-node-num { color: var(--np-warm); }
.np-hww-node.completed .np-hww-node-num { color: rgba(140,123,99,0.4); }

/* ========================================
   REVEAL PANEL (desktop cards)
   ======================================== */

.np-hww-reveal {
  display: grid;
  margin-top: 60px;
}

.np-hww-card {
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.np-hww-card.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.np-hww-card-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 50px;
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(140,123,99,0.08);
  border-radius: 24px;
  position: relative;
  overflow: hidden;
}

.np-hww-card-inner::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--np-warm), transparent);
  opacity: 0;
  transition: opacity 0.8s ease 0.2s;
}

.np-hww-card.active .np-hww-card-inner::before { opacity: 0.35; }

.np-hww-card-inner::after {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(196,180,154,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.np-hww-card-left {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.np-hww-card-step {
  font-family: 'Lora', serif;
  font-size: 80px;
  line-height: 1;
  color: rgba(140,123,99,0.07);
  font-style: italic;
  transition: color 0.8s ease;
}

.np-hww-card.active .np-hww-card-step { color: rgba(140,123,99,0.1); }

.np-hww-card-title {
  font-family: 'Lora', serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--np-dark);
}

.np-hww-card-desc {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(15,14,12,0.55);
  font-weight: 300;
  max-width: 440px;
}

.np-hww-card-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}

.np-hww-card-features {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.np-hww-feature {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  color: rgba(15,14,12,0.65);
  font-weight: 300;
}

.np-hww-feature-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--np-warm);
  flex-shrink: 0;
}

.np-hww-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-radius: 100px;
  background: rgba(140,123,99,0.06);
  border: 1px solid rgba(140,123,99,0.12);
  font-size: 13px;
  color: var(--np-warm);
  font-weight: 500;
  margin-top: 8px;
}

.np-hww-badge svg {
  width: 16px;
  height: 16px;
  color: var(--np-warm);
  flex-shrink: 0;
}

/* --- Navigation --- */
.np-hww-nav {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 40px;
  position: relative;
  z-index: 3;
}

.np-hww-nav-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(140,123,99,0.2);
  background: rgba(244,242,237,0.8);
  color: var(--np-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.np-hww-nav-btn:hover {
  border-color: var(--np-warm);
  background: rgba(255,255,255,0.8);
  box-shadow: 0 2px 16px rgba(140,123,99,0.12);
}

.np-hww-nav-btn:disabled { opacity: 0.2; cursor: default; pointer-events: none; }

.np-hww-nav-btn svg {
  width: 18px; height: 18px;
  stroke: currentColor; fill: none; stroke-width: 1.5;
}

.np-hww-counter {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Lora', serif;
  font-size: 16px;
  color: rgba(15,14,12,0.3);
}

.np-hww-counter-current {
  color: var(--np-warm);
  font-size: 20px;
  transition: all 0.3s ease;
}

/* ========================================
   MOBILE ACCORDION
   ======================================== */

.np-hww-mobile {
  display: none;
  position: relative;
  z-index: 2;
  padding: 0 20px;
}

.np-hww-mobile-step {
  border-bottom: 1px solid rgba(140,123,99,0.1);
  overflow: hidden;
}

.np-hww-mobile-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.np-hww-mobile-num {
  font-family: 'Lora', serif;
  font-size: 32px;
  font-style: italic;
  color: rgba(140,123,99,0.15);
  min-width: 44px;
  transition: color 0.4s ease;
}

.np-hww-mobile-step.active .np-hww-mobile-num { color: var(--np-warm); }

.np-hww-mobile-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(140,123,99,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.np-hww-mobile-step.active .np-hww-mobile-icon-wrap {
  background: rgba(255,255,255,0.9);
  border-color: rgba(140,123,99,0.2);
  box-shadow: 0 2px 12px rgba(140,123,99,0.1);
}

.np-hww-mobile-icon-wrap svg {
  width: 20px; height: 20px; color: var(--np-warm);
}

.np-hww-mobile-title-area { flex: 1; }

.np-hww-mobile-title {
  font-family: 'Lora', serif;
  font-size: 20px;
  color: var(--np-dark);
  font-weight: 400;
}

.np-hww-mobile-arrow {
  width: 24px; height: 24px;
  color: rgba(15,14,12,0.25);
  transition: transform 0.4s ease, color 0.4s ease;
  flex-shrink: 0;
}

.np-hww-mobile-step.active .np-hww-mobile-arrow {
  transform: rotate(180deg);
  color: var(--np-warm);
}

.np-hww-mobile-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.np-hww-mobile-step.active .np-hww-mobile-body { max-height: 400px; }

.np-hww-mobile-content {
  padding: 0 0 28px 60px;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
}

.np-hww-mobile-step.active .np-hww-mobile-content {
  opacity: 1;
  transform: translateY(0);
}

.np-hww-mobile-desc {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(15,14,12,0.5);
  font-weight: 300;
  margin-bottom: 16px;
}

.np-hww-mobile-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.np-hww-mobile-feat {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(15,14,12,0.55);
}

.np-hww-mobile-feat-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--np-warm);
  flex-shrink: 0;
}

.np-hww-mobile-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 100px;
  background: rgba(140,123,99,0.06);
  border: 1px solid rgba(140,123,99,0.1);
  font-size: 12px;
  color: var(--np-warm);
  font-weight: 500;
  margin-top: 14px;
}

.np-hww-mobile-badge svg { width: 14px; height: 14px; }

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes np-hww-fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes np-hww-glowSpin {
  to { --np-glow-angle: 360deg; }
}

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

@media (max-width: 900px) {
  .np-hww-journey { display: none; }
  .np-hww-mobile { display: block; }
  .np-hww-section { padding: 60px 0 80px; }
  .np-hww-header { margin-bottom: 40px; padding: 0 20px; }
  .np-hww-subtitle { font-size: 14px; }
}

@media (min-width: 901px) {
  .np-hww-mobile { display: none !important; }
}

/* === producers.css === */
/* ========================================
   PRODUCERS SECTION — Redesigned carousel
   ======================================== */

/* Scoped variables — do NOT leak to :root */
.producers {
  --p-bg: var(--color-gray-100);
  --p-ink: var(--color-gray-900);
  --p-cream: var(--color-gray-50);
  --p-soft: var(--color-gray-500);
  --p-muted: var(--color-secondary);
  --p-accent: var(--color-accent);
  --p-warm: var(--color-primary);
  --p-line: rgba(28,26,21,0.07);
  --p-card-bg: #fff;
}

.producers {
  padding: 80px clamp(16px, 5vw, 80px);
  /* position, z-index, background inherited from section base rule */
  /* NO max-width here — section must be full-width for background */
}

/* Content constrained to 1400px */
.producers > * {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

/* ---- Header ---- */
.p-head { text-align: center; margin-bottom: 56px; }

.p-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--p-muted);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.p-eyebrow::before,
.p-eyebrow::after {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--p-warm);
}

.p-title {
  font-family: 'Lora', serif;
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: 10px;
  color: var(--p-ink);
}

.p-title em {
  font-style: italic;
  color: var(--p-warm);
}

.p-sub {
  font-size: 15px;
  color: var(--p-soft);
  max-width: 420px;
  margin: 0 auto;
  line-height: 1.6;
  font-family: 'Golos Text', sans-serif;
}

/* ================================================
   PRICE RUNWAY (desktop only)
   ================================================ */
.runway {
  position: relative;
  margin-bottom: 48px;
  padding: 0 20px;
}

.runway-track {
  position: relative;
  height: 80px;
  display: flex;
  align-items: flex-start;
}

.runway-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 24px;
  height: 2px;
  background: var(--p-line);
}

.runway-fill {
  position: absolute;
  left: 0;
  top: 24px;
  height: 2px;
  background: linear-gradient(90deg, var(--p-accent), var(--p-warm));
  transition: width 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 1px;
}

.runway-markers {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
  z-index: 2;
  padding-top: 17px;
}

.runway-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.3s ease;
}

.runway-marker:hover { transform: translateY(-2px); }

.rm-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--p-bg);
  border: 2px solid var(--p-muted);
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
}

.runway-marker.active .rm-dot {
  width: 18px;
  height: 18px;
  border-color: var(--p-warm);
  background: var(--p-warm);
  box-shadow: 0 0 0 6px rgba(140,123,99,0.15), 0 2px 12px rgba(140,123,99,0.2);
}

.rm-label {
  margin-top: 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--p-muted);
  transition: color 0.3s ease;
  white-space: nowrap;
  font-family: 'Golos Text', sans-serif;
}

.runway-marker.active .rm-label { color: var(--p-ink); }

.rm-price {
  font-size: 10px;
  color: var(--p-muted);
  margin-top: 1px;
  transition: color 0.3s ease;
  font-family: 'Golos Text', sans-serif;
}

.runway-marker.active .rm-price { color: var(--p-warm); }

.runway-tiers {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  margin-top: -4px;
  margin-bottom: 20px;
}

.runway-tier {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--p-muted);
  opacity: 0.5;
  font-family: 'Golos Text', sans-serif;
}

/* ================================================
   PRODUCT CARD
   ================================================ */
.stage-wrap {
  position: relative;
  min-height: 340px;
  cursor: grab;
  user-select: none;
}

.product-card {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  background: var(--p-card-bg);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(28,26,21,0.06), 0 4px 16px rgba(28,26,21,0.03);
  border: 1px solid rgba(28,26,21,0.04);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  pointer-events: none;
}

.product-card.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  position: relative;
}

/* ---- Card info ---- */
.pc-info {
  padding: 40px 44px;
  display: flex;
  flex-direction: column;
}

.pc-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.pc-num {
  margin-left: auto;
  font-family: 'Lora', serif;
  font-size: 32px;
  font-weight: 400;
  color: var(--p-muted);
  opacity: 0.3;
  line-height: 1;
}

.pc-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: 'Golos Text', sans-serif;
}

.pc-badge.best { background: rgba(76,175,80,0.1); color: #388e3c; }
.pc-badge.popular { background: rgba(33,150,243,0.1); color: #1976d2; }
.pc-badge.china { background: rgba(244,67,54,0.06); color: #c62828; }
.pc-badge.km2 { background: rgba(255,152,0,0.1); color: #e65100; }
.pc-badge.eco { background: rgba(76,175,80,0.1); color: #2e7d32; }
.pc-badge.premium { background: rgba(140,123,99,0.12); color: var(--p-warm); }

.pc-flag {
  width: 24px;
  height: 16px;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  flex-shrink: 0;
}

.pc-flag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pc-name {
  font-family: 'Lora', serif;
  font-size: 42px;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 8px;
  color: var(--p-ink);
}

.pc-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 6px;
}

.pc-price .from {
  font-size: 14px;
  color: var(--p-soft);
  font-family: 'Golos Text', sans-serif;
}

.pc-price .amount {
  font-family: 'Lora', serif;
  font-size: 36px;
  font-weight: 400;
  color: var(--p-warm);
}

.pc-price .unit {
  font-size: 14px;
  color: var(--p-soft);
  font-family: 'Golos Text', sans-serif;
}

.pc-included {
  font-size: 11px;
  color: var(--p-muted);
  line-height: 1.5;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--p-line);
  font-family: 'Golos Text', sans-serif;
}

.pc-fabrics {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
  margin-bottom: 20px;
}

.pc-fab {
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  background: var(--p-bg);
  color: var(--p-soft);
  border: 1px solid var(--p-line);
  font-family: 'Golos Text', sans-serif;
}

/* CTA button */
.pc-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: 14px;
  background: var(--p-ink);
  color: var(--p-cream);
  font-size: 14px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: 0 4px 16px rgba(28,26,21,0.1);
  font-family: 'Golos Text', sans-serif;
}

.pc-cta:hover {
  background: var(--p-warm);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(140,123,99,0.25);
}

.pc-cta::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}

.pc-cta:hover::after { left: 120%; }

.pc-cta svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  transition: transform 0.3s ease;
}

.pc-cta:hover svg { transform: translateX(4px); }

/* ---- Specs ---- */
.pc-specs {
  background: var(--p-bg);
  padding: 40px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  position: relative;
}

.spec-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.spec-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.spec-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--p-soft);
  font-family: 'Golos Text', sans-serif;
}

.spec-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--p-ink);
  font-family: 'Golos Text', sans-serif;
}

.spec-value.highlight { color: var(--p-warm); }

.spec-bar {
  height: 6px;
  background: rgba(28,26,21,0.05);
  border-radius: 3px;
  overflow: hidden;
}

.spec-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--p-accent), var(--p-warm));
  width: 0;
  transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.spec-icon {
  display: flex;
  align-items: center;
  gap: 8px;
}

.spec-icon svg {
  width: 14px;
  height: 14px;
  stroke: var(--p-muted);
  stroke-width: 1.5;
  fill: none;
}

/* ---- Desktop Navigation ---- */
.stage-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

.nav-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--p-line);
  background: var(--p-card-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.nav-btn:hover:not(.disabled) {
  background: var(--p-ink);
  border-color: var(--p-ink);
}

.nav-btn svg {
  width: 18px;
  height: 18px;
  stroke: var(--p-ink);
  stroke-width: 2;
  fill: none;
  transition: stroke 0.3s ease;
}

.nav-btn:hover:not(.disabled) svg { stroke: var(--p-cream); }

.nav-btn.disabled {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}

.nav-counter {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--p-muted);
  padding: 0 16px;
  font-family: 'Golos Text', sans-serif;
}

.nav-counter .current {
  font-weight: 700;
  color: var(--p-ink);
  font-size: 16px;
}

/* ---- Footer ---- */
.p-footer { text-align: center; margin-top: 48px; }

.p-footer-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 36px;
  border-radius: 60px;
  border: 1.5px solid var(--p-line);
  background: transparent;
  color: var(--p-ink);
  font-family: 'Golos Text', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}

.p-footer-btn:hover {
  border-color: var(--p-warm);
  background: var(--p-card-bg);
  box-shadow: 0 8px 24px rgba(28,26,21,0.06);
  transform: translateY(-2px);
  color: var(--p-ink);
}

.p-footer-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  transition: transform 0.3s ease;
}

.p-footer-btn:hover svg { transform: translateX(4px); }

/* ================================================
   MOBILE: single card + swipe + dots
   ================================================ */

/* Dot nav */
.mob-dots {
  display: none;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}

.mob-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--p-line);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.mob-dot.active {
  width: 28px;
  border-radius: 4px;
  background: var(--p-warm);
}

@media (max-width: 900px) {
  .producers { padding: 60px 16px; }

  /* Hide desktop-only */
  .runway,
  .runway-tiers { display: none; }
  .stage-nav { display: none; }

  /* Show dots */
  .mob-dots { display: flex; }

  /* Single card mode */
  .product-card {
    grid-template-columns: 1fr;
    border-radius: 24px;
  }

  .pc-info { padding: 28px 24px; }
  .pc-specs { padding: 24px; gap: 24px; }
  .pc-name { font-size: 32px; }
  .pc-price .amount { font-size: 28px; }
  .pc-num { font-size: 26px; }
}

@media (max-width: 480px) {
  .pc-info { padding: 24px 20px; }
  .pc-specs { padding: 20px; }
  .pc-name { font-size: 28px; }
  .pc-price .amount { font-size: 24px; }
  .pc-num { font-size: 22px; }
}

/* === tasks.css === */
/* ═══════════════════════════════════════════
   TASKS SECTION — "Решим любую задачу"
   Optimized: no canvas, no blur-blobs, no 3D tilt,
   no conic-gradient border, blur(12px)
   ═══════════════════════════════════════════ */

/* Section — position/z-index/background from base.css section rule */
.np-solve {
  overflow: hidden;
  padding: 80px 0 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ── Header ── */
.np-solve__header {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-bottom: 80px;
}
.np-solve__label {
  font-family: 'Golos Text', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 24px;
  opacity: 0;
  transform: translateY(20px);
  animation: np-fade-up 0.8s ease forwards;
}
.np-solve__title {
  font-family: 'Lora', serif;
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 400;
  color: #0f0e0c;
  line-height: 1.1;
  opacity: 0;
  transform: translateY(30px);
  animation: np-fade-up 0.8s 0.15s ease forwards;
}
.np-solve__title em {
  font-style: italic;
  color: var(--color-primary);
}
.np-solve__subtitle {
  font-family: 'Golos Text', sans-serif;
  font-size: 16px;
  font-weight: 300;
  color: rgba(15,14,12,0.45);
  margin-top: 16px;
  opacity: 0;
  transform: translateY(20px);
  animation: np-fade-up 0.8s 0.3s ease forwards;
}

@keyframes np-fade-up {
  to { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════
   PANELS GRID
   ═══════════════════════════════════════════ */
.np-solve__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
  gap: 24px;
  max-width: 1200px;
  width: 90%;
}

/* ── Individual Panel ── */
.np-solve__panel {
  position: relative;
  border-radius: 24px;
  padding: 48px 32px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.4s ease,
              border-color 0.4s ease;
  opacity: 0;
  animation: np-panel-emerge 1s ease forwards;

  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.9) 0%,
    rgba(255,255,255,0.85) 100%
  );
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow:
    0 4px 24px rgba(140,123,99,0.06),
    inset 0 1px 0 rgba(255,255,255,0.8);
}

.np-solve__panel:nth-child(1) { animation-delay: 0.4s; }
.np-solve__panel:nth-child(2) { animation-delay: 0.55s; }
.np-solve__panel:nth-child(3) { animation-delay: 0.7s; }
.np-solve__panel:nth-child(4) { animation-delay: 0.85s; }

/* Stagger vertical offset for rhythm */
.np-solve__panel:nth-child(2),
.np-solve__panel:nth-child(4) {
  margin-top: 40px;
  animation-name: np-panel-emerge-offset;
}

@keyframes np-panel-emerge {
  0% {
    opacity: 0;
    transform: translateY(60px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes np-panel-emerge-offset {
  0% {
    opacity: 0;
    transform: translateY(90px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── Hover: simple border + glow (replaces conic-gradient + 3D tilt) ── */
.np-solve__panel:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow:
    0 0 40px rgba(196,180,154,0.12),
    0 20px 50px rgba(140,123,99,0.1),
    inset 0 1px 0 rgba(255,255,255,0.9);
  border-color: rgba(196,180,154,0.4);
  z-index: 10;
}

/* ═══════════════════════════════════════════
   SVG ICON CONTAINER
   ═══════════════════════════════════════════ */
.np-solve__icon-wrap {
  position: relative;
  width: 120px;
  height: 120px;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Orbiting ring */
.np-solve__icon-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(140,123,99,0.15);
  transition: border-color 0.6s ease, transform 1s ease;
}
.np-solve__panel:hover .np-solve__icon-ring {
  border-color: rgba(196,180,154,0.5);
  transform: rotate(180deg) scale(1.05);
}

/* Orbiting dot */
.np-solve__icon-ring::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--color-accent);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  margin-top: -3px;
  margin-left: -3px;
  box-shadow: 0 0 10px rgba(196,180,154,0.5);
  animation: np-orbit 8s linear infinite;
}
@keyframes np-orbit {
  from { transform: rotate(0deg) translateX(60px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(60px) rotate(-360deg); }
}

/* Inner glow */
.np-solve__icon-glow {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(196,180,154,0.08) 0%,
    transparent 70%
  );
  transition: transform 0.6s ease;
}
.np-solve__panel:hover .np-solve__icon-glow {
  transform: scale(1.4);
  background: radial-gradient(
    circle,
    rgba(196,180,154,0.18) 0%,
    transparent 70%
  );
}

/* SVG icon — uses original isometric 96x96 SVGs */
.np-solve__icon {
  position: relative;
  z-index: 2;
  width: 72px;
  height: 72px;
  opacity: 0.85;
  transition: opacity 0.4s ease;
}
.np-solve__icon svg {
  width: 100%;
  height: 100%;
}
.np-solve__panel:hover .np-solve__icon {
  opacity: 1;
}

/* ═══════════════════════════════════════════
   TEXT
   ═══════════════════════════════════════════ */
.np-solve__panel-title {
  font-family: 'Lora', serif;
  font-size: 22px;
  font-weight: 400;
  color: #0f0e0c;
  margin-bottom: 12px;
  transition: color 0.4s ease;
}

.np-solve__panel-text {
  font-family: 'Golos Text', sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: rgba(15,14,12,0.5);
  line-height: 1.6;
  max-width: 220px;
  transition: color 0.4s ease;
}
.np-solve__panel:hover .np-solve__panel-text {
  color: rgba(15,14,12,0.75);
}

/* ── Reveal line under title ── */
.np-solve__panel-title::after {
  content: '';
  display: block;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  margin: 8px auto 0;
  transition: width 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.np-solve__panel:hover .np-solve__panel-title::after {
  width: 60px;
}

/* ═══════════════════════════════════════════
   CONNECTION LINES
   ═══════════════════════════════════════════ */
.np-solve__connections {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.np-solve__connections line {
  stroke: rgba(196,180,154,0.1);
  stroke-width: 1;
  stroke-dasharray: 4 8;
  animation: np-dash-flow 3s linear infinite;
}
@keyframes np-dash-flow {
  to { stroke-dashoffset: -48; }
}

/* ═══════════════════════════════════════════
   BOTTOM TAGLINE
   ═══════════════════════════════════════════ */
.np-solve__tagline {
  position: relative;
  z-index: 2;
  margin-top: 80px;
  opacity: 0;
  animation: np-fade-up 0.8s 1.2s ease forwards;
}
.np-solve__tagline-text {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: clamp(16px, 2vw, 20px);
  color: var(--color-primary);
  padding: 16px 40px;
  border: 1px solid rgba(140,123,99,0.2);
  border-radius: 100px;
  position: relative;
  overflow: hidden;
}
.np-solve__tagline-text::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(196,180,154,0.12), transparent);
  animation: np-shimmer 4s ease-in-out infinite;
}
@keyframes np-shimmer {
  0%, 100% { left: -100%; }
  50% { left: 100%; }
}

/* ═══════════════════════════════════════════
   MOBILE
   ═══════════════════════════════════════════ */
.np-solve__mobile { display: none; }
.np-solve__m-dots { display: none; }

@media (max-width: 767px) {
  .np-solve {
    padding: 60px 0 80px;
  }
  .np-solve__header {
    margin-bottom: 48px;
  }
  .np-solve__grid {
    display: none !important;
  }
  .np-solve__connections {
    display: none !important;
  }

  .np-solve__mobile {
    display: flex !important;
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding: 0 20px;
    gap: 16px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: relative;
    z-index: 2;
  }
  .np-solve__mobile::-webkit-scrollbar { display: none; }

  .np-solve__m-panel {
    flex: 0 0 85%;
    scroll-snap-align: center;
    background: linear-gradient(
      135deg,
      rgba(255,255,255,0.92) 0%,
      rgba(255,255,255,0.87) 100%
    );
    border: 1px solid rgba(255,255,255,0.6);
    box-shadow: 0 4px 20px rgba(140,123,99,0.06);
    border-radius: 20px;
    padding: 40px 28px 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    animation: np-fade-up 0.8s ease forwards;
    opacity: 0;
  }
  .np-solve__m-panel:nth-child(1) { animation-delay: 0.3s; }
  .np-solve__m-panel:nth-child(2) { animation-delay: 0.4s; }
  .np-solve__m-panel:nth-child(3) { animation-delay: 0.5s; }
  .np-solve__m-panel:nth-child(4) { animation-delay: 0.6s; }

  .np-solve__m-panel .np-solve__icon-wrap {
    width: 100px; height: 100px;
    margin-bottom: 24px;
  }
  .np-solve__m-panel .np-solve__icon {
    width: 100px; height: 100px;
  }
  .np-solve__m-panel .np-solve__panel-title {
    font-size: 20px;
  }
  .np-solve__m-panel .np-solve__panel-text {
    font-size: 13px;
  }

  .np-solve__m-dots {
    display: flex !important;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
    position: relative;
    z-index: 2;
  }
  .np-solve__m-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(140,123,99,0.2);
    transition: all 0.3s ease;
  }
  .np-solve__m-dot.active {
    background: var(--color-accent);
    width: 24px;
    border-radius: 3px;
  }

  .np-solve__tagline {
    margin-top: 48px;
  }
  .np-solve__tagline-text {
    font-size: 14px;
    padding: 12px 28px;
  }
}

/* === faq.css === */
/* ========================================
   FAQ SECTION — Floating Chips + Card Stack
   ======================================== */

/* Scoped variables */
.np-faq-section {
  --np-cream: var(--color-gray-100);
  --np-dark: #0f0e0c;
  --np-gold: var(--color-accent);
  --np-warm: var(--color-primary);
  --np-accent: #b8956a;
  --np-bg: #f9f7f4;
  --np-serif: 'Lora', Georgia, serif;
  --np-sans: 'Golos Text', system-ui, sans-serif;
}

/* Section base — overrides default section overlay */
.np-faq-section {
  position: relative;
  z-index: 2;
  padding: 100px 0 120px;
  overflow: hidden;
  background: transparent;
}

.np-faq-container {
  position: relative;
  z-index: 1;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ── Header ── */
.np-faq-header {
  text-align: center;
  margin-bottom: 80px;
  opacity: 0;
  transform: translateY(24px);
}

.np-faq-header.np-animated {
  animation: np-fade-up 1s cubic-bezier(0.16,1,0.3,1) forwards;
}


.np-faq-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 24px;
  border-radius: 100px;
  background: linear-gradient(135deg, rgba(196,180,154,0.12), rgba(140,123,99,0.08));
  border: 1px solid rgba(196,180,154,0.25);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--np-warm);
  margin-bottom: 28px;
}

.np-faq-badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--np-gold);
  box-shadow: 0 0 8px var(--np-gold);
  animation: np-glow 2s ease-in-out infinite;
  will-change: opacity;
}

@keyframes np-glow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.np-faq-title {
  color: var(--np-dark);
}

.np-faq-title em {
  color: var(--np-warm);
}

.np-faq-subtitle {
  font-size: 17px;
  color: var(--np-warm);
  font-weight: 300;
  margin-top: 16px;
}

/* ── Desktop: Floating Chips ── */
.np-faq-field {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.np-faq-chip {
  position: relative;
  padding: 18px 28px;
  border-radius: 60px;
  background: rgba(252,250,247,0.88);
  border: 1px solid rgba(196,180,154,0.15);
  cursor: pointer;
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1),
              opacity 0.5s cubic-bezier(0.16,1,0.3,1),
              background 0.5s cubic-bezier(0.16,1,0.3,1),
              border-color 0.5s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.5s cubic-bezier(0.16,1,0.3,1);
  -webkit-tap-highlight-color: transparent;
  will-change: transform, opacity;
  opacity: 0;
  transform: translateY(20px) scale(0.95);
}

.np-faq-chip.np-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Glow border */
.np-faq-chip::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 60px;
  background: linear-gradient(135deg, var(--np-gold), transparent 50%, var(--np-accent));
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
}

.np-faq-chip::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 60px;
  background: rgba(255,255,255,0.5);
  z-index: -1;
}

.np-faq-chip:hover::before { opacity: 1; }

.np-faq-chip:hover {
  background: rgba(252,250,247,0.94);
  border-color: rgba(196,180,154,0.4);
  box-shadow: 0 12px 40px rgba(196,180,154,0.15), 0 4px 16px rgba(0,0,0,0.04);
}

.np-faq-chip.np-active-chip {
  background: rgba(252,250,247,0.96);
  border-color: var(--np-gold);
  box-shadow: 0 8px 40px rgba(196,180,154,0.2), 0 0 80px rgba(196,180,154,0.08);
}

.np-faq-chip.np-active-chip::before { opacity: 1; }

.np-chip-inner {
  display: flex;
  align-items: center;
  gap: 14px;
}

.np-chip-num {
  font-family: var(--np-serif);
  font-size: 13px;
  font-style: italic;
  color: var(--np-gold);
  opacity: 0.4;
  transition: opacity 0.3s ease;
}

.np-faq-chip:hover .np-chip-num,
.np-faq-chip.np-active-chip .np-chip-num { opacity: 1; }

.np-chip-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--np-dark);
  opacity: 0.65;
  white-space: nowrap;
  transition: opacity 0.3s ease;
}

.np-faq-chip:hover .np-chip-text { opacity: 1; }
.np-faq-chip.np-active-chip .np-chip-text { opacity: 1; font-weight: 600; }

/* ── Answer Panel (Desktop) ── */
.np-answer-stage {
  position: relative;
  margin-top: 48px;
}

.np-answer-panel {
  position: relative;
  border-radius: 28px;
  background: linear-gradient(165deg, rgba(255,255,255,0.94), rgba(249,247,244,0.96));
  border: 1px solid rgba(196,180,154,0.2);
  padding: 48px 56px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1),
              transform 0.7s cubic-bezier(0.16,1,0.3,1),
              visibility 0s linear 0.7s;
  box-shadow: 0 20px 60px rgba(15,14,12,0.04);
  will-change: transform, opacity;
}

.np-answer-panel.np-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1),
              transform 0.7s cubic-bezier(0.16,1,0.3,1),
              visibility 0s linear 0s;
}

.np-answer-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--np-gold), transparent);
  opacity: 0;
  transition: opacity 0.8s ease 0.3s;
}

.np-answer-panel.np-show::before { opacity: 1; }

.np-answer-orb {
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196,180,154,0.1), transparent 70%);
  top: 50%; right: -100px;
  transform: translateY(-50%);
  pointer-events: none;
  animation: np-breathe 8s ease-in-out infinite;
  animation-play-state: paused;
}

.np-answer-panel.np-show .np-answer-orb {
  animation-play-state: running;
}

@keyframes np-breathe {
  0%, 100% { opacity: 0.5; transform: translateY(-50%) scale(1); }
  50% { opacity: 1; transform: translateY(-50%) scale(1.15); }
}

.np-answer-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 40px;
  align-items: start;
}

.np-answer-big-num {
  font-family: var(--np-serif);
  font-size: 96px;
  font-style: italic;
  line-height: 0.85;
  background: linear-gradient(180deg, rgba(196,180,154,0.25), rgba(196,180,154,0.05));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  user-select: none;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1) 0.2s,
              transform 0.6s cubic-bezier(0.16,1,0.3,1) 0.2s;
}

.np-answer-panel.np-show .np-answer-big-num {
  opacity: 1;
  transform: scale(1);
}

.np-answer-body { display: flex; flex-direction: column; gap: 20px; }

.np-answer-question {
  font-family: var(--np-serif);
  font-size: 28px;
  font-weight: 400;
  color: var(--np-dark);
  line-height: 1.25;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s cubic-bezier(0.16,1,0.3,1) 0.3s,
              transform 0.5s cubic-bezier(0.16,1,0.3,1) 0.3s;
}

.np-answer-panel.np-show .np-answer-question {
  opacity: 1;
  transform: translateY(0);
}

.np-answer-sep {
  height: 1px;
  background: linear-gradient(90deg, var(--np-gold), transparent 60%);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.7s cubic-bezier(0.16,1,0.3,1) 0.4s;
}

.np-answer-panel.np-show .np-answer-sep { transform: scaleX(1); }

.np-answer-text {
  font-size: 16px;
  line-height: 1.8;
  color: var(--np-warm);
  font-weight: 300;
}

.np-answer-text strong {
  color: var(--np-dark);
  font-weight: 600;
}

.np-a-line {
  display: inline;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s cubic-bezier(0.16,1,0.3,1),
              transform 0.5s cubic-bezier(0.16,1,0.3,1);
}

.np-a-line.np-in {
  opacity: 1;
  transform: translateY(0);
}

/* ── Mobile: Card Stack ── */
.np-m-stack-wrap { display: none; }

@media (max-width: 900px) {
  .np-faq-section { padding: 80px 0 100px; }
  .np-faq-container { padding: 0 20px; }
  .np-faq-header { margin-bottom: 40px; }
  .np-faq-subtitle { display: none; }

  .np-faq-field { display: none; }
  .np-answer-stage { display: none; }
  .np-m-stack-wrap { display: block; }

  /* Stack container */
  .np-m-stack {
    position: relative;
    width: 100%;
    height: 420px;
    touch-action: pan-y;
  }

  /* Individual card */
  .np-m-scard {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 380px;
    border-radius: 24px;
    padding: 36px 28px 28px;
    display: flex;
    flex-direction: column;
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    will-change: transform, opacity;
    transition: transform 0.5s cubic-bezier(0.16,1,0.3,1),
                opacity 0.5s cubic-bezier(0.16,1,0.3,1),
                box-shadow 0.5s ease;
    transform-origin: center bottom;
  }

  .np-m-scard:active { cursor: grabbing; }

  /* Card skins — alternating */
  .np-m-scard:nth-child(odd) {
    background: linear-gradient(165deg, #ffffff, var(--color-gray-100));
    border: 1px solid rgba(196,180,154,0.2);
  }

  .np-m-scard:nth-child(even) {
    background: linear-gradient(165deg, #0f0e0c, #1e1c18);
    border: 1px solid rgba(196,180,154,0.1);
    color: var(--np-cream);
  }

  .np-m-scard:nth-child(even) .np-m-scard-num {
    background: linear-gradient(180deg, rgba(196,180,154,0.3), rgba(196,180,154,0.05));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .np-m-scard:nth-child(even) .np-m-scard-q { color: var(--np-cream); }
  .np-m-scard:nth-child(even) .np-m-scard-sep { background: linear-gradient(90deg, var(--np-gold), transparent 60%); }
  .np-m-scard:nth-child(even) .np-m-scard-a { color: rgba(244,242,237,0.6); }
  .np-m-scard:nth-child(even) .np-m-scard-a strong { color: var(--np-cream); }

  .np-m-scard-num {
    font-family: var(--np-serif);
    font-size: 56px;
    font-style: italic;
    line-height: 1;
    background: linear-gradient(180deg, rgba(196,180,154,0.3), rgba(196,180,154,0.05));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 12px;
  }

  .np-m-scard-q {
    font-family: var(--np-serif);
    font-size: 24px;
    font-weight: 400;
    color: var(--np-dark);
    line-height: 1.2;
    margin-bottom: 16px;
  }

  .np-m-scard-sep {
    height: 1px;
    background: linear-gradient(90deg, var(--np-gold), transparent 50%);
    margin-bottom: 16px;
    flex-shrink: 0;
  }

  .np-m-scard > * {
    pointer-events: none;
  }

  .np-m-scard-a {
    font-size: 15px;
    line-height: 1.7;
    color: var(--np-warm);
    font-weight: 300;
    flex: 1;
    overflow-y: hidden;
  }

  .np-m-scard-a strong {
    color: var(--np-dark);
    font-weight: 600;
  }

  /* Swipe indicator */
  .np-m-scard-indicator {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
  }

  .np-m-scard-indicator.np-ind-next {
    background: rgba(196,180,154,0.15);
    color: var(--np-warm);
  }

  /* Progress bar */
  .np-m-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
  }

  .np-m-progress-bar {
    flex: 1;
    height: 3px;
    background: rgba(196,180,154,0.15);
    border-radius: 2px;
    overflow: hidden;
  }

  .np-m-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--np-gold), var(--np-accent));
    border-radius: 2px;
    transition: width 0.5s cubic-bezier(0.16,1,0.3,1);
  }

  .np-m-progress-text {
    font-size: 13px;
    color: var(--np-warm);
    font-weight: 500;
    white-space: nowrap;
    min-width: 40px;
    text-align: right;
  }

  /* Swipe hint */
  .np-m-swipe-hint {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    font-size: 13px;
    color: rgba(140,123,99,0.4);
    font-weight: 300;
  }

  .np-m-swipe-hand {
    display: inline-block;
    animation: np-faq-swipe-anim 2.5s ease-in-out infinite;
  }

  @keyframes np-faq-swipe-anim {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    20% { transform: translateX(-6px) rotate(-8deg); }
    40% { transform: translateX(12px) rotate(5deg); }
    60% { transform: translateX(12px) rotate(5deg); }
    80% { transform: translateX(0) rotate(0deg); }
  }

  /* Restart button */
  .np-m-restart {
    display: none;
    margin: 24px auto 0;
    padding: 14px 32px;
    border: 1px solid rgba(196,180,154,0.3);
    border-radius: 100px;
    background: rgba(255,255,255,0.88);
    color: var(--np-dark);
    font-family: var(--np-sans);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease;
  }

  .np-m-restart.np-show-restart { display: flex; align-items: center; gap: 8px; }
  .np-m-restart:hover { background: rgba(255,255,255,0.8); border-color: var(--np-gold); }

  .np-m-restart svg {
    width: 16px; height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
  }
}

/* ── CTA button ── */
.np-faq-cta-row {
  display: flex;
  justify-content: center;
  margin-top: 64px;
  opacity: 0;
  transform: translateY(20px);
}

.np-faq-cta-row.np-animated {
  animation: np-fade-up 1s 0.3s cubic-bezier(0.16,1,0.3,1) forwards;
}

.np-faq-cta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 36px;
  border-radius: 100px;
  border: none;
  background: var(--np-dark);
  color: var(--np-cream);
  font-family: var(--np-sans);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.np-faq-cta-btn::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(196,180,154,0.3), transparent);
  transition: left 0.6s ease;
}

.np-faq-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(15,14,12,0.15);
}

.np-faq-cta-btn:hover::after { left: 100%; }

.np-faq-cta-btn svg {
  width: 18px; height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

@media (max-width: 900px) {
  .np-faq-cta-row { margin-top: 40px; }
}

/* === photo-cta.css === */
/* ========================================
   PHOTO CTA SECTION — "Не знаете, что выбрать?"
   Redesigned: split layout + viewfinder
   ======================================== */

/* Section-specific palette */
.np-photo-section {
  --np-cream: var(--color-gray-100);
  --np-dark: #0f0e0c;
  --np-gold: var(--color-accent);
  --np-warm: var(--color-primary);
  --np-accent: #b8956a;
  --np-serif: 'Lora', Georgia, serif;
  --np-sans: 'Golos Text', 'Inter', system-ui, sans-serif;
  position: relative;
  padding: 100px 0 120px;
  overflow: hidden;
  z-index: 2;
  background: transparent;
}

/* Ambient orbs — pre-blurred gradient (no filter: blur for GPU savings) */
.np-photo-section::before,
.np-photo-section::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
  contain: strict;
  animation-play-state: paused;
}

.np-photo-section::before {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(196,180,154,0.15) 0%, rgba(196,180,154,0.05) 30%, transparent 55%);
  top: -150px; right: 10%;
  animation: np-orb1 18s ease-in-out infinite;
  animation-play-state: paused;
}

.np-photo-section::after {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(140,123,99,0.1) 0%, rgba(140,123,99,0.03) 30%, transparent 55%);
  bottom: -100px; left: 15%;
  animation: np-orb1 22s ease-in-out infinite reverse;
  animation-play-state: paused;
}

/* Run animations only when section is in viewport */
.np-photo-section.np-in-view::before,
.np-photo-section.np-in-view::after {
  animation-play-state: running;
}

@keyframes np-orb1 {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(30px, -20px); }
  66% { transform: translate(-20px, 15px); }
}

.np-photo-container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ═══ DESKTOP: Split layout ═══ */
.np-photo-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  min-height: 520px;
}

/* ── Left: Text + CTAs ── */
.np-photo-text {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.np-photo-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: 100px;
  background: linear-gradient(135deg, rgba(196,180,154,0.12), rgba(140,123,99,0.08));
  border: 1px solid rgba(196,180,154,0.25);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--np-warm);
  width: fit-content;
  font-family: var(--np-sans);
}

.np-photo-badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--np-gold);
  box-shadow: 0 0 8px var(--np-gold);
  animation: np-dot-pulse 2s ease-in-out infinite;
  animation-play-state: paused;
}

.np-photo-section.np-in-view .np-photo-badge::before {
  animation-play-state: running;
}

@keyframes np-dot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.np-photo-heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.np-photo-h2 {
  font-family: var(--np-serif);
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--np-dark);
}

.np-photo-h2 em {
  font-style: italic;
  color: var(--np-warm);
}

.np-photo-desc {
  font-family: var(--np-sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--np-warm);
  font-weight: 300;
  max-width: 420px;
}

.np-photo-desc strong {
  color: var(--np-dark);
  font-weight: 500;
}

/* CTA buttons */
.np-photo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.np-photo-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 100px;
  border: none;
  font-family: var(--np-sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
  text-decoration: none;
}

.np-photo-btn svg {
  width: 18px; height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  flex-shrink: 0;
}

/* Primary button */
.np-photo-btn-primary {
  background: var(--np-dark);
  color: var(--np-cream);
}

.np-photo-btn-primary::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(196,180,154,0.3), transparent);
  transition: left 0.6s ease;
}

.np-photo-btn-primary:hover::after { left: 100%; }
.np-photo-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(15,14,12,0.15);
}

/* Secondary button */
.np-photo-btn-secondary {
  background: rgba(255,255,255,0.88);
  color: var(--np-dark);
  border: 1px solid rgba(196,180,154,0.25);
}

.np-photo-btn-secondary:hover {
  background: rgba(255,255,255,0.9);
  border-color: var(--np-gold);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(196,180,154,0.12);
}

/* ── Right: Viewfinder zone ── */
.np-photo-viewfinder {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 440px;
  border-radius: 28px;
  cursor: pointer;
  perspective: 800px;
  contain: content;
}

/* Animated gradient border */
@property --np-vf-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.np-photo-vf-border {
  position: absolute;
  inset: 0;
  border-radius: 28px;
  padding: 2px;
  background: conic-gradient(
    from var(--np-vf-angle),
    var(--np-gold) 0%, transparent 12%,
    transparent 35%, var(--np-accent) 50%,
    transparent 62%, transparent 85%,
    var(--np-gold) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: np-vf-spin 6s linear infinite;
  animation-play-state: paused;
  pointer-events: none;
}

.np-photo-section.np-in-view .np-photo-vf-border {
  animation-play-state: running;
}

@keyframes np-vf-spin {
  to { --np-vf-angle: 360deg; }
}

.np-photo-vf-inner {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 28px;
  background: linear-gradient(165deg, #ffffff, var(--color-gray-100));
  border: 1px solid rgba(196,180,154,0.15);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  transition: all 0.5s cubic-bezier(0.16,1,0.3,1);
  transform-style: preserve-3d;
}

.np-photo-vf-inner:hover {
  box-shadow: 0 24px 60px rgba(15,14,12,0.06), 0 0 80px rgba(196,180,154,0.08);
}

/* Corner brackets */
.np-vf-corner {
  position: absolute;
  width: 40px; height: 40px;
  pointer-events: none;
  z-index: 2;
}

.np-vf-corner::before,
.np-vf-corner::after {
  content: '';
  position: absolute;
  background: var(--np-gold);
  border-radius: 1px;
  transition: all 0.4s ease;
}

.np-vf-corner::before { width: 2px; height: 24px; }
.np-vf-corner::after { width: 24px; height: 2px; }

.np-vf-corner.np-tl { top: 24px; left: 24px; }
.np-vf-corner.np-tl::before { top: 0; left: 0; }
.np-vf-corner.np-tl::after { top: 0; left: 0; }

.np-vf-corner.np-tr { top: 24px; right: 24px; }
.np-vf-corner.np-tr::before { top: 0; right: 0; }
.np-vf-corner.np-tr::after { top: 0; right: 0; }

.np-vf-corner.np-bl { bottom: 24px; left: 24px; }
.np-vf-corner.np-bl::before { bottom: 0; left: 0; }
.np-vf-corner.np-bl::after { bottom: 0; left: 0; }

.np-vf-corner.np-br { bottom: 24px; right: 24px; }
.np-vf-corner.np-br::before { bottom: 0; right: 0; }
.np-vf-corner.np-br::after { bottom: 0; right: 0; }

.np-photo-vf-inner:hover .np-vf-corner::before { height: 32px; }
.np-photo-vf-inner:hover .np-vf-corner::after { width: 32px; }

/* Crosshair */
.np-vf-crosshair {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 48px; height: 48px;
  pointer-events: none;
  z-index: 2;
  opacity: 0.25;
  transition: opacity 0.4s ease;
}

.np-photo-vf-inner:hover .np-vf-crosshair { opacity: 0.5; }

.np-vf-crosshair::before,
.np-vf-crosshair::after {
  content: '';
  position: absolute;
  background: var(--np-gold);
}

.np-vf-crosshair::before {
  width: 1px; height: 100%;
  left: 50%; top: 0;
}

.np-vf-crosshair::after {
  width: 100%; height: 1px;
  top: 50%; left: 0;
}

/* Particle canvas */
/* Center content */
.np-vf-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  padding: 0 40px;
}

.np-vf-icon-wrap {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(196,180,154,0.12), rgba(196,180,154,0.04));
  border: 1px solid rgba(196,180,154,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s cubic-bezier(0.16,1,0.3,1);
  transform-style: preserve-3d;
}

.np-photo-vf-inner:hover .np-vf-icon-wrap {
  background: linear-gradient(135deg, rgba(196,180,154,0.2), rgba(196,180,154,0.08));
  border-color: var(--np-gold);
  box-shadow: 0 0 40px rgba(196,180,154,0.12);
  transform: scale(1.08);
}

.np-vf-icon-wrap svg {
  width: 36px; height: 36px;
  stroke: var(--np-warm);
  fill: none;
  stroke-width: 1.5;
  transition: stroke 0.3s ease;
}

.np-photo-vf-inner:hover .np-vf-icon-wrap svg {
  stroke: var(--np-accent);
}

.np-vf-label {
  font-family: var(--np-serif);
  font-size: 22px;
  font-style: italic;
  color: var(--np-warm);
  transition: color 0.3s ease;
}

.np-photo-vf-inner:hover .np-vf-label { color: var(--np-dark); }

.np-vf-sublabel {
  font-family: var(--np-sans);
  font-size: 13px;
  color: rgba(140,123,99,0.5);
  font-weight: 300;
}

/* Drag-over state */
.np-photo-vf-inner.np-dragover {
  border-color: var(--np-gold);
  box-shadow: 0 0 60px rgba(196,180,154,0.2), 0 24px 60px rgba(15,14,12,0.06);
}

.np-photo-vf-inner.np-dragover .np-vf-icon-wrap {
  transform: scale(1.15);
  background: linear-gradient(135deg, rgba(196,180,154,0.25), rgba(196,180,154,0.1));
  box-shadow: 0 0 60px rgba(196,180,154,0.2);
}

.np-photo-vf-inner.np-dragover .np-vf-corner::before { height: 40px; background: var(--np-accent); }
.np-photo-vf-inner.np-dragover .np-vf-corner::after { width: 40px; background: var(--np-accent); }

/* Image preview overlay */
.np-vf-preview {
  position: absolute;
  inset: 0;
  border-radius: 28px;
  z-index: 4;
  display: none;
  overflow: hidden;
}

.np-vf-preview img {
  width: 100%; height: 100%;
  object-fit: cover;
  animation: np-preview-in 0.8s cubic-bezier(0.16,1,0.3,1) forwards;
}

@keyframes np-preview-in {
  from { transform: scale(1.15); opacity: 0; filter: blur(10px); }
  to { transform: scale(1); opacity: 1; filter: blur(0); }
}

.np-vf-preview-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 20px 24px;
  background: linear-gradient(to top, rgba(15,14,12,0.85) 60%, transparent);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.np-vf-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.np-vf-preview-text {
  font-family: var(--np-serif);
  font-size: 16px;
  color: var(--np-cream);
  font-style: italic;
}

.np-vf-preview-btn {
  padding: 8px 16px;
  border-radius: 100px;
  border: 1px solid rgba(244,242,237,0.3);
  background: rgba(244,242,237,0.15);
  color: var(--np-cream);
  font-family: var(--np-sans);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.np-vf-preview-btn:hover {
  background: rgba(244,242,237,0.25);
  border-color: var(--np-cream);
}

/* ── Send form inside preview overlay (desktop) ── */
.np-vf-send-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.np-vf-send-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.np-vf-comment {
  width: 100%;
  padding: 8px 16px;
  border-radius: 14px;
  border: 1px solid rgba(244,242,237,0.3);
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  color: #fff;
  font-family: var(--np-sans);
  font-size: 13px;
  outline: none;
  resize: none;
  transition: border-color 0.3s ease;
  box-sizing: border-box;
}

.np-vf-comment::placeholder { color: rgba(244,242,237,0.5); }
.np-vf-comment:focus { border-color: var(--np-gold); }

.np-vf-phone {
  flex: 1;
  padding: 10px 16px;
  border-radius: 100px;
  border: 1px solid rgba(244,242,237,0.3);
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  color: #fff;
  font-family: var(--np-sans);
  font-size: 14px;
  outline: none;
  transition: border-color 0.3s ease;
}

.np-vf-phone::placeholder { color: rgba(244,242,237,0.5); }
.np-vf-phone:focus { border-color: var(--np-gold); }

.np-vf-send-btn {
  padding: 10px 24px;
  border-radius: 100px;
  border: none;
  background: var(--np-gold);
  color: #fff;
  font-family: var(--np-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.np-vf-send-btn:hover { background: var(--np-accent); transform: translateY(-1px); }
.np-vf-send-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.np-vf-send-status {
  font-family: var(--np-sans);
  font-size: 13px;
  text-align: center;
  min-height: 18px;
  transition: color 0.3s ease;
}

.np-vf-send-status--success { color: #6ecf6e; }
.np-vf-send-status--error { color: #ff7b7b; }

/* Social proof */
.np-photo-proof {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.np-photo-proof-avatars { display: flex; }

.np-photo-proof-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid var(--np-cream);
  background: linear-gradient(135deg, var(--np-gold), var(--np-warm));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--np-sans);
  font-size: 12px;
  font-weight: 600;
  color: white;
  margin-left: -8px;
}

.np-photo-proof-avatar:first-child { margin-left: 0; }

.np-photo-proof-text {
  font-family: var(--np-sans);
  font-size: 13px;
  color: var(--np-warm);
  font-weight: 300;
  line-height: 1.3;
}

.np-photo-proof-text strong {
  color: var(--np-dark);
  font-weight: 600;
}

/* ═══ MOBILE ═══ */
.np-photo-mobile { display: none; }

@media (max-width: 900px) {
  .np-photo-section { padding: 60px 0 80px; }
  .np-photo-container { padding: 0 20px; }
  .np-photo-split { display: none; }
  .np-photo-mobile { display: flex; flex-direction: column; gap: 0; }

  .np-m-photo-hero {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    background: linear-gradient(165deg, #ffffff, var(--color-gray-100));
    border: 1px solid rgba(196,180,154,0.15);
  }

  .np-m-photo-border {
    position: absolute;
    inset: 0;
    border-radius: 28px;
    padding: 2px;
    background: conic-gradient(
      from var(--np-vf-angle),
      var(--np-gold) 0%, transparent 15%,
      transparent 40%, var(--np-accent) 50%,
      transparent 65%, transparent 90%, var(--np-gold) 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: np-vf-spin 6s linear infinite;
    animation-play-state: paused;
    pointer-events: none;
    z-index: 2;
  }

  .np-photo-section.np-in-view .np-m-photo-border {
    animation-play-state: running;
  }

  .np-m-photo-inner {
    position: relative;
    padding: 48px 24px 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
  }

  .np-m-corner {
    position: absolute;
    width: 28px; height: 28px;
    pointer-events: none;
    z-index: 3;
  }

  .np-m-corner::before, .np-m-corner::after {
    content: '';
    position: absolute;
    background: var(--np-gold);
    border-radius: 1px;
  }

  .np-m-corner::before { width: 2px; height: 18px; }
  .np-m-corner::after { width: 18px; height: 2px; }

  .np-m-corner.np-mtl { top: 16px; left: 16px; }
  .np-m-corner.np-mtl::before { top: 0; left: 0; }
  .np-m-corner.np-mtl::after { top: 0; left: 0; }

  .np-m-corner.np-mtr { top: 16px; right: 16px; }
  .np-m-corner.np-mtr::before { top: 0; right: 0; }
  .np-m-corner.np-mtr::after { top: 0; right: 0; }

  .np-m-corner.np-mbl { bottom: 16px; left: 16px; }
  .np-m-corner.np-mbl::before { bottom: 0; left: 0; }
  .np-m-corner.np-mbl::after { bottom: 0; left: 0; }

  .np-m-corner.np-mbr { bottom: 16px; right: 16px; }
  .np-m-corner.np-mbr::before { bottom: 0; right: 0; }
  .np-m-corner.np-mbr::after { bottom: 0; right: 0; }

  .np-m-photo-icon {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(196,180,154,0.15), rgba(196,180,154,0.05));
    border: 1px solid rgba(196,180,154,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: np-icon-float 4s ease-in-out infinite;
    animation-play-state: paused;
  }

  .np-photo-section.np-in-view .np-m-photo-icon {
    animation-play-state: running;
  }

  @keyframes np-icon-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
  }

  .np-m-photo-icon svg {
    width: 32px; height: 32px;
    stroke: var(--np-warm);
    fill: none;
    stroke-width: 1.5;
  }

  .np-m-photo-title {
    font-family: var(--np-serif);
    font-size: 32px;
    font-weight: 400;
    line-height: 1.1;
    color: var(--np-dark);
  }

  .np-m-photo-title em {
    font-style: italic;
    color: var(--np-warm);
  }

  .np-m-photo-desc {
    font-family: var(--np-sans);
    font-size: 15px;
    line-height: 1.6;
    color: var(--np-warm);
    font-weight: 300;
    max-width: 300px;
  }

  .np-m-tap-zone {
    width: 100%;
    padding: 20px;
    border: 2px dashed rgba(196,180,154,0.25);
    border-radius: 20px;
    background: rgba(196,180,154,0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.4s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .np-m-tap-zone:active {
    transform: scale(0.97);
    background: rgba(196,180,154,0.1);
    border-color: var(--np-gold);
  }

  .np-m-tap-icon { font-size: 24px; line-height: 1; }

  .np-m-tap-text {
    font-family: var(--np-sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--np-dark);
  }

  .np-m-tap-hint {
    font-family: var(--np-sans);
    font-size: 12px;
    color: rgba(140,123,99,0.5);
    font-weight: 300;
  }

  .np-m-preview {
    display: none;
    border-radius: 20px;
    overflow: hidden;
    margin-top: -8px;
  }

  .np-m-preview img {
    width: 100%; height: 200px;
    object-fit: cover;
    border-radius: 20px;
    animation: np-preview-in 0.6s cubic-bezier(0.16,1,0.3,1) forwards;
  }

  /* ── Mobile send form ── */
  .np-m-send-form {
    display: none;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    padding: 16px 0 0;
  }

  .np-m-comment {
    width: 100%;
    padding: 12px 20px;
    border-radius: 16px;
    border: 1px solid rgba(196,180,154,0.25);
    background: rgba(255,255,255,0.88);
    color: var(--np-dark);
    font-family: var(--np-sans);
    font-size: 14px;
    outline: none;
    resize: none;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
  }

  .np-m-comment::placeholder { color: rgba(140,123,99,0.5); }
  .np-m-comment:focus { border-color: var(--np-gold); }

  .np-m-phone {
    width: 100%;
    padding: 14px 20px;
    border-radius: 100px;
    border: 1px solid rgba(196,180,154,0.25);
    background: rgba(255,255,255,0.88);
    color: var(--np-dark);
    font-family: var(--np-sans);
    font-size: 15px;
    outline: none;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
  }

  .np-m-phone::placeholder { color: rgba(140,123,99,0.5); }
  .np-m-phone:focus { border-color: var(--np-gold); }

  .np-m-send-status {
    font-family: var(--np-sans);
    font-size: 13px;
    text-align: center;
    min-height: 18px;
  }

  .np-m-send-status--success { color: #2a9d2a; }
  .np-m-send-status--error { color: #d44; }

  .np-m-photo-btns {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    padding: 24px 0 0;
  }

  .np-m-btn {
    width: 100%;
    padding: 16px 24px;
    border-radius: 100px;
    font-family: var(--np-sans);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
  }

  .np-m-btn svg {
    width: 18px; height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
  }

  .np-m-btn-primary {
    background: var(--np-dark);
    color: var(--np-cream);
    border: none;
  }

  .np-m-btn-primary:active { transform: scale(0.97); }

  .np-m-btn-ghost {
    background: transparent;
    color: var(--np-dark);
    border: 1px solid rgba(196,180,154,0.25);
  }

  .np-m-btn-ghost:active { background: rgba(196,180,154,0.08); }

  .np-m-proof {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-top: 24px;
  }

  .np-m-proof-avatars { display: flex; }

  .np-m-proof-av {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 2px solid var(--np-cream);
    background: linear-gradient(135deg, var(--np-gold), var(--np-warm));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--np-sans);
    font-size: 10px;
    font-weight: 600;
    color: white;
    margin-left: -6px;
  }

  .np-m-proof-av:first-child { margin-left: 0; }

  .np-m-proof-text {
    font-family: var(--np-sans);
    font-size: 12px;
    color: var(--np-warm);
    font-weight: 300;
  }

  .np-m-proof-text strong {
    color: var(--np-dark);
    font-weight: 600;
  }
}

/* ═══ SCROLL ENTRY ═══ */
.np-photo-text, .np-photo-viewfinder, .np-photo-mobile {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.9s cubic-bezier(0.16,1,0.3,1);
}

.np-photo-text.np-visible { opacity: 1; transform: translateY(0); }
.np-photo-viewfinder.np-visible { opacity: 1; transform: translateY(0); transition-delay: 0.15s; }
.np-photo-mobile.np-visible { opacity: 1; transform: translateY(0); }

/* ═══ REDUCED MOTION ═══ */
@media (prefers-reduced-motion: reduce) {
  .np-photo-section::before,
  .np-photo-section::after,
  .np-photo-vf-border,
  .np-m-photo-border,
  .np-photo-badge::before,
  .np-m-photo-icon {
    animation: none !important;
  }
  .np-photo-text, .np-photo-viewfinder, .np-photo-mobile {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* === examples.css === */
/* ═══════════════════════════════════════════
   EXAMPLES SECTION — Real Calculation Examples
   Glassmorphism cards, 3-col grid, custom modal
   ═══════════════════════════════════════════ */

/* Section-scoped variables (also on modal overlay since it lives outside section) */
.examples-section,
.np-modal-overlay {
  --np-cream: var(--color-gray-100);
  --np-dark: #0f0e0c;
  --np-gold: var(--color-accent);
  --np-warm: var(--color-primary);
  --np-card-bg: rgba(244, 242, 237, 0.6);
  --np-accent: #b8956a;
  --np-gift: #5a8f5a;
  --np-serif: 'Lora', Georgia, serif;
  --np-sans: 'Golos Text', system-ui, sans-serif;
}

/* ── Section wrapper ── */
.examples-section {
  background: transparent;
  position: relative;
  padding: 100px 0 120px;
  overflow: hidden;
}

.np-pricing-container {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ═══════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════ */
.np-pricing-header {
  margin-bottom: 72px;
}

.np-pricing-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 24px;
  border-radius: 100px;
  background: linear-gradient(135deg, rgba(196, 180, 154, 0.25), rgba(140, 123, 99, 0.18));
  border: 1px solid rgba(196, 180, 154, 0.3);
  font-family: var(--np-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--np-warm);
  margin-bottom: 28px;
}

.np-pricing-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--np-gold);
  animation: np-badge-pulse 2s ease-in-out infinite;
}

@keyframes np-badge-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.7); }
}

.np-pricing-title {
  color: var(--np-dark);
  margin-bottom: 20px;
}

.np-pricing-title em {
  color: var(--np-warm);
}

.np-pricing-subtitle {
  font-size: 17px;
  color: var(--np-warm);
  font-weight: 300;
  max-width: 500px;
  margin: 0 auto;
}

/* ═══════════════════════════════════════════
   CARDS GRID
   ═══════════════════════════════════════════ */
.np-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* ── Individual card ── */
.np-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  perspective: 1000px;
  will-change: transform;
}

/* Animated gradient border */
.np-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  padding: 1.5px;
  background: conic-gradient(
    from var(--np-card-angle, 0deg),
    transparent 0%,
    var(--np-gold) 10%,
    transparent 20%,
    transparent 80%,
    var(--np-gold) 90%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 2;
  pointer-events: none;
}

.np-card:hover::before {
  opacity: 1;
  animation: np-border-spin 4s linear infinite;
}

@property --np-card-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes np-border-spin {
  to { --np-card-angle: 360deg; }
}

.np-card-inner {
  position: relative;
  background: linear-gradient(165deg, rgba(255,255,255,0.92) 0%, rgba(244,242,237,0.88) 100%);
  border: 1px solid rgba(196, 180, 154, 0.2);
  border-radius: 24px;
  padding: 0;
  overflow: hidden;
  transition: box-shadow 0.5s ease, border-color 0.5s ease;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.np-card:hover .np-card-inner {
  box-shadow: 0 25px 60px rgba(15, 14, 12, 0.08), 0 8px 20px rgba(196, 180, 154, 0.15);
  border-color: rgba(196, 180, 154, 0.4);
}

/* ── Card photo area ── */
.np-card-visual {
  position: relative;
  height: 220px;
  background: linear-gradient(145deg, #e8e4de, #ddd8d0);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.np-card-visual::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to top, rgba(255,255,255,0.7), transparent);
  pointer-events: none;
}

.np-card-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  filter: blur(8px);
  transition: filter 0.6s ease;
}
.np-card-visual img.hd-loaded {
  filter: blur(0);
}

.np-card-visual-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--np-warm);
  opacity: 0.5;
}

.np-card-visual-icon svg {
  width: 48px;
  height: 48px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.2;
}

.np-card-visual-icon span {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* Room count floating badge */
.np-rooms-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(15, 14, 12, 0.85);
  color: var(--np-cream);
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  z-index: 1;
}

/* ── Card body ── */
.np-card-body {
  padding: 28px 32px 32px;
}

.np-card-type {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--np-accent);
  margin-bottom: 8px;
}

.np-card-name {
  font-family: var(--np-serif);
  font-size: 28px;
  font-weight: 400;
  color: var(--np-dark);
  margin-bottom: 6px;
}

.np-card-specs {
  font-size: 14px;
  color: var(--np-warm);
  font-weight: 300;
  margin-bottom: 28px;
}

/* ── Price row ── */
.np-card-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-top: 20px;
  border-top: 1px solid rgba(196, 180, 154, 0.15);
}

.np-card-price-label {
  font-size: 12px;
  color: var(--np-warm);
  font-weight: 400;
  margin-bottom: 4px;
}

.np-card-price {
  font-family: var(--np-serif);
  font-size: 36px;
  font-weight: 400;
  color: var(--np-dark);
  line-height: 1;
}

.np-card-price span {
  font-size: 20px;
  color: var(--np-warm);
  margin-left: 2px;
}

/* ── CTA button with shimmer ── */
.np-card-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: none;
  border-radius: 100px;
  background: var(--np-dark);
  color: var(--np-cream);
  font-family: var(--np-sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  flex-shrink: 0;
}

.np-card-cta::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(196,180,154,0.3), transparent);
  transition: left 0.6s ease;
}

.np-card-cta:hover::after {
  left: 100%;
}

.np-card-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(15, 14, 12, 0.2);
}

.np-card-cta svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  transition: transform 0.3s ease;
}

.np-card-cta:hover svg {
  transform: translateX(3px);
}

/* ═══════════════════════════════════════════
   MODAL OVERLAY (custom for examples)
   ═══════════════════════════════════════════ */
.np-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.np-modal-overlay.np-active {
  pointer-events: all;
  opacity: 1;
}

.np-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 14, 12, 0.7);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.np-modal-overlay.np-active .np-modal-backdrop {
  opacity: 1;
}

/* ── Modal container ── */
.np-modal {
  position: relative;
  width: 92%;
  max-width: 680px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(170deg, #faf8f5 0%, var(--np-cream, var(--color-gray-100)) 100%);
  border-radius: 28px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(30px) scale(0.92);
  transform-origin: var(--np-origin-x, 50%) var(--np-origin-y, 50%);
  box-shadow: 0 50px 100px rgba(15, 14, 12, 0.25), 0 0 0 1px rgba(196, 180, 154, 0.2);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.np-modal-overlay.np-active .np-modal {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ── Modal header ── */
.np-modal-header {
  flex-shrink: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 36px 20px;
  background: linear-gradient(to bottom, #faf8f5 80%, transparent);
}

.np-modal-header-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.np-modal-title {
  font-family: var(--np-serif);
  font-size: 32px;
  font-weight: 400;
  color: var(--np-dark);
}

.np-modal-meta {
  font-size: 14px;
  color: var(--np-warm);
  font-weight: 300;
}

.np-modal-close {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(196, 180, 154, 0.3);
  background: rgba(244, 242, 237, 0.85);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, border-color 0.3s ease;
  flex-shrink: 0;
}

.np-modal-close:hover {
  background: var(--np-dark);
  border-color: var(--np-dark);
}

.np-modal-close:hover svg {
  stroke: var(--np-cream);
}

.np-modal-close svg {
  width: 18px;
  height: 18px;
  stroke: var(--np-dark);
  fill: none;
  stroke-width: 2;
  transition: stroke 0.3s ease;
}

/* ── Modal scrollable body ── */
.np-modal-body {
  padding: 0 36px 36px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--np-gold) transparent;
}

.np-modal-body::-webkit-scrollbar { width: 4px; }
.np-modal-body::-webkit-scrollbar-track { background: transparent; }
.np-modal-body::-webkit-scrollbar-thumb {
  background: var(--np-gold);
  border-radius: 10px;
}

/* ── Room group ── */
.np-room-group {
  margin-bottom: 32px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.np-room-group.np-revealed {
  opacity: 1;
  transform: translateY(0);
}

.np-room-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--np-dark);
}

.np-room-name {
  font-family: var(--np-serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--np-dark);
}

.np-room-info {
  font-size: 13px;
  color: var(--np-warm);
  font-weight: 300;
}

/* ── Line items ── */
.np-line-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid rgba(196, 180, 154, 0.12);
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.np-line-item.np-revealed {
  opacity: 1;
  transform: translateX(0);
}

.np-line-item:last-child { border-bottom: none; }

.np-line-desc {
  font-size: 14px;
  color: var(--np-dark);
  font-weight: 400;
  flex: 1;
  padding-right: 16px;
}

.np-line-price {
  font-size: 15px;
  font-weight: 600;
  color: var(--np-dark);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Gift item (shows price + badge) */
.np-line-item.np-gift-item {
  background: linear-gradient(90deg, rgba(90, 143, 90, 0.06), transparent);
  border-radius: 8px;
  padding: 11px 12px;
  margin: 4px -12px;
}

.np-line-item.np-gift-item .np-line-desc {
  color: var(--np-gift);
  font-weight: 500;
}

.np-line-item.np-gift-item .np-line-price {
  color: var(--np-gift);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.np-gift-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--np-gift);
  background: rgba(90, 143, 90, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 4px;
  white-space: nowrap;
}

/* Subtotal row */
.np-subtotal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0 4px;
  margin-top: 4px;
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.np-subtotal.np-revealed {
  opacity: 1;
  transform: translateX(0);
}

.np-subtotal-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--np-warm);
}

.np-subtotal-value {
  font-family: var(--np-serif);
  font-size: 22px;
  color: var(--np-dark);
}

/* ── Grand total ── */
.np-grand-total {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  margin-top: 12px;
  border-top: 2px solid var(--np-dark);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* When grand-total contains total-rows, stack them vertically */
.np-grand-total:has(.np-total-row) {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}

.np-grand-total.np-revealed {
  opacity: 1;
  transform: translateY(0);
}

.np-grand-total-label {
  font-family: var(--np-serif);
  font-size: 24px;
  color: var(--np-dark);
}

.np-grand-total-value {
  font-family: var(--np-serif);
  font-size: 40px;
  color: var(--np-dark);
  line-height: 1;
}

.np-grand-total-value span {
  font-size: 24px;
  color: var(--np-warm);
}

/* Total rows (2-line summary: discount / final) */
.np-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 16px;
  color: var(--np-dark);
}

.np-total-row.np-total-discount {
  color: var(--np-gift);
  font-weight: 500;
}

.np-total-row.np-total-final {
  padding-top: 8px;
  margin-top: 4px;
}

.np-total-row.np-total-final div:first-child {
  font-family: var(--np-serif);
  font-size: 24px;
}

.np-total-row.np-total-final div:last-child {
  font-family: var(--np-serif);
  font-size: 40px;
  line-height: 1;
}

.np-total-row.np-total-final span {
  font-size: 24px;
  color: var(--np-warm);
}

/* ── Modal CTA ── */
.np-modal-cta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(196, 180, 154, 0.15);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.np-modal-cta-row.np-revealed {
  opacity: 1;
  transform: translateY(0);
}

.np-modal-cta-primary {
  flex: 1;
  padding: 16px 32px;
  border: none;
  border-radius: 100px;
  background: var(--np-dark);
  color: var(--np-cream);
  font-family: var(--np-sans);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.np-modal-cta-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(196,180,154,0.25), transparent);
  transition: left 0.6s ease;
}

.np-modal-cta-primary:hover::after { left: 100%; }

.np-modal-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(15, 14, 12, 0.2);
}

.np-modal-cta-secondary {
  padding: 16px 28px;
  border: 1px solid rgba(196, 180, 154, 0.3);
  border-radius: 100px;
  background: transparent;
  color: var(--np-dark);
  font-family: var(--np-sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.np-modal-cta-secondary:hover {
  background: rgba(196, 180, 154, 0.1);
  border-color: var(--np-gold);
}

/* ═══════════════════════════════════════════
   CTA BLOCK (below cards)
   ═══════════════════════════════════════════ */
.np-cta {
  text-align: center;
  margin-top: 56px;
}

.np-cta__text {
  font-size: 15px;
  color: var(--np-warm);
  margin-top: 16px;
}

/* Scoped to CTA block to avoid conflict with modal-form.css .np-trust */
.np-cta .np-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.np-trust__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--np-warm);
  font-weight: 500;
}

.np-trust__item svg { flex-shrink: 0; }

/* ═══════════════════════════════════════════
   ENTRY ANIMATIONS (scroll-triggered)
   ═══════════════════════════════════════════ */
.np-card {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.np-card.np-visible {
  opacity: 1;
  transform: translateY(0);
}

.np-card:nth-child(2) { transition-delay: 0.12s; }
.np-card:nth-child(3) { transition-delay: 0.24s; }

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width: 1024px) {
  .np-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 767px) {
  .examples-section { padding: 60px 0 80px; }
  .np-pricing-container { padding: 0 20px; }
  .np-pricing-header { margin-bottom: 48px; }
  .np-pricing-subtitle { font-size: 15px; }

  .np-cards-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
  }

  /* Compact card on mobile: hide visual, simplify body */
  .np-card-visual { display: none; }

  .np-card-body { padding: 20px 24px; }

  .np-card-name { font-size: 22px; }

  .np-card-specs { margin-bottom: 16px; }

  .np-card-price { font-size: 26px; }
  .np-card-price span { font-size: 16px; }

  /* ── Mobile modal adjustments ── */
  .np-modal {
    width: 100%;
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0 0 24px 24px;
    align-self: flex-start;
    transform: translateY(-100%);
    transform-origin: center top;
  }

  .np-modal-overlay {
    align-items: flex-start;
  }

  .np-modal-overlay.np-active .np-modal {
    opacity: 1;
    transform: translateY(0);
  }

  .np-modal-header { padding: 20px 20px 12px; }
  .np-modal-body {
    padding: 0 20px 20px;
  }
  .np-modal-title { font-size: 24px; }
  .np-modal-meta { font-size: 13px; }
  .np-modal-close { width: 38px; height: 38px; }
  .np-modal-close svg { width: 16px; height: 16px; }

  /* Compact room groups */
  .np-room-group { margin-bottom: 20px; }
  .np-room-header { margin-bottom: 10px; padding-bottom: 8px; gap: 8px; }
  .np-room-name { font-size: 18px; }
  .np-room-info { font-size: 12px; }

  /* Compact line items */
  .np-line-item { padding: 7px 0; }
  .np-line-desc { font-size: 13px; }
  .np-line-price { font-size: 13px; }
  .np-line-item.np-gift-item { padding: 7px 10px; margin: 2px -10px; }

  /* Compact subtotals */
  .np-subtotal { padding: 10px 0 2px; margin-top: 2px; }
  .np-subtotal-label { font-size: 13px; }
  .np-subtotal-value { font-size: 18px; }

  /* Compact grand total */
  .np-grand-total { padding: 16px 0; margin-top: 8px; }
  .np-grand-total-label { font-size: 20px; }
  .np-grand-total-value { font-size: 28px; }
  .np-grand-total-value span { font-size: 18px; }

  /* Compact total rows */
  .np-total-row { font-size: 14px; }
  .np-total-row.np-total-final div:first-child { font-size: 20px; }
  .np-total-row.np-total-final div:last-child { font-size: 28px; }
  .np-total-row.np-total-final span { font-size: 18px; }

  /* Compact CTA */
  .np-modal-cta-row { flex-direction: column; gap: 10px; margin-top: 20px; padding-top: 16px; }
  .np-modal-cta-primary { width: 100%; text-align: center; padding: 14px 24px; font-size: 14px; }
  .np-modal-cta-secondary { width: 100%; text-align: center; padding: 12px 24px; font-size: 13px; }

  .np-cta .np-trust { gap: 16px; }
}

/* === solutions.css === */
/* ========================================
   SOLUTIONS SECTION — New premium design
   3D cards + modal receipt
   ======================================== */

/* ---- Shared variables (section + modal overlay) ---- */
.solutions-section,
.sol-modal-overlay {
  --sol-bg: var(--color-gray-100);
  --sol-ink: var(--color-gray-900);
  --sol-cream: var(--color-gray-50);
  --sol-soft: var(--color-gray-500);
  --sol-muted: var(--color-secondary);
  --sol-accent: var(--color-accent);
  --sol-warm: var(--color-primary);
  --sol-line: rgba(28,26,21,0.07);
}

.solutions-section {
  position: relative;
  overflow: visible;
  background: transparent;
}

.solutions-wrap {
  padding: 100px clamp(16px, 5vw, 80px) 48px;
  max-width: 1400px;
  margin: 0 auto;
}

/* ---- Header ---- */
.s-head { margin-bottom: 56px; }

.s-eyebrow {
  color: var(--sol-muted); margin-bottom: 16px;
}
.s-eyebrow::before, .s-eyebrow::after {
  content: ''; width: 24px; height: 1px; background: var(--sol-warm);
}

.s-title {
  font-size: clamp(32px, 4vw, 52px);
  margin-bottom: 12px;
  color: var(--sol-ink);
}
.s-title em { color: var(--sol-warm); }

.s-sub {
  font-family: 'Golos Text', sans-serif;
  font-size: 15px; color: var(--sol-soft); max-width: 460px;
  margin: 0 auto;
}

/* ================================================
   ROOM CARDS — 3D perspective grid
   ================================================ */
.rooms-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  perspective: 1200px;
}

.room-card {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  cursor: pointer;
  background: var(--sol-cream);
  border: 1px solid var(--sol-line);
  padding: 40px 32px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.4s ease, border-color 0.3s ease;
}

.room-card:hover {
  transform: translateY(-10px) rotateX(3deg);
  box-shadow: 0 30px 60px rgba(28,26,21,0.08);
  border-color: var(--sol-accent);
}

/* Glow on hover */
.room-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 120%, rgba(196,180,154,0.08) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.room-card:hover::before { opacity: 1; }

/* Badge */
.rc-badge {
  align-self: flex-start;
  padding: 5px 14px;
  border-radius: 20px;
  font-family: 'Golos Text', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 32px;
}

.rc-badge.eco   { background: rgba(76,175,80,0.1);  color: #388e3c; }
.rc-badge.std   { background: rgba(33,150,243,0.1); color: #1976d2; }
.rc-badge.prem  { background: rgba(140,123,99,0.12); color: var(--sol-warm); }
.rc-badge.pop   { background: rgba(233,30,99,0.1);  color: #c2185b; }
.rc-badge.deal  { background: rgba(255,152,0,0.1);  color: #e65100; }

/* Price circle — the visual centerpiece */
.rc-circle-wrap {
  position: relative;
  width: 180px;
  height: 180px;
  margin-bottom: 28px;
}

/* SVG progress ring */
.rc-ring {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}
.rc-ring circle { fill: none; stroke-width: 3; }
.rc-ring .ring-bg { stroke: var(--sol-line); }
.rc-ring .ring-fill {
  stroke: url(#goldGrad);
  stroke-linecap: round;
  stroke-dasharray: 502;
  stroke-dashoffset: 502;
  transition: stroke-dashoffset 1.5s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Inner content */
.rc-circle-inner {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: var(--sol-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: background 0.4s ease;
}
.room-card:hover .rc-circle-inner { background: var(--sol-cream); }

.rc-area {
  font-family: 'Lora', serif;
  font-size: 42px;
  font-weight: 400;
  line-height: 1;
  color: var(--sol-ink);
  margin-bottom: 2px;
}
.rc-area span { font-size: 18px; color: var(--sol-warm); }

.rc-sqm {
  font-family: 'Golos Text', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--sol-muted);
}

/* Room name */
.rc-name {
  font-family: 'Lora', serif;
  font-size: 26px; font-weight: 400;
  margin-bottom: 4px; color: var(--sol-ink);
}

.rc-type {
  font-family: 'Golos Text', sans-serif;
  font-size: 13px; color: var(--sol-soft); margin-bottom: 20px;
}

/* Price */
.rc-price {
  font-family: 'Lora', serif;
  font-size: 32px; font-weight: 400;
  color: var(--sol-warm); margin-bottom: 4px;
}

.rc-price-label {
  font-family: 'Golos Text', sans-serif;
  font-size: 10px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--sol-muted); margin-bottom: 24px;
}

/* "Details" button */
.rc-open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 60px;
  border: 1px solid var(--sol-line);
  background: transparent;
  font-family: 'Golos Text', sans-serif;
  font-size: 12px; font-weight: 600;
  color: var(--sol-soft);
  cursor: pointer;
  transition: all 0.3s ease;
}
.rc-open:hover {
  border-color: var(--sol-warm);
  color: var(--sol-ink);
  background: var(--sol-bg);
}
.rc-open svg {
  width: 14px; height: 14px;
  stroke: currentColor; stroke-width: 2; fill: none;
  transition: transform 0.3s ease;
}
.rc-open:hover svg { transform: translateX(3px); }

/* ================================================
   MODAL — cinematic receipt
   ================================================ */
.sol-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,14,12,0.85);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.sol-modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.sol-modal {
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--sol-cream);
  border-radius: 28px;
  position: relative;
  transform: translateY(30px) scale(0.95);
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: 0 40px 80px rgba(0,0,0,0.15);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sol-modal::-webkit-scrollbar { display: none; }
.sol-modal-overlay.open .sol-modal {
  transform: translateY(0) scale(1);
}

/* Close — sticky so it stays visible when scrolling */
.m-close {
  position: sticky;
  top: 16px;
  z-index: 5;
  float: right;
  margin: 16px 16px -56px 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--sol-line);
  background: var(--sol-cream);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}
.m-close:hover { background: var(--sol-ink); border-color: var(--sol-ink); }
.m-close svg {
  width: 16px; height: 16px;
  stroke: var(--sol-soft); stroke-width: 2; fill: none;
  transition: stroke 0.3s ease;
}
.m-close:hover svg { stroke: var(--sol-cream); }

/* Modal header */
.m-head {
  padding: 40px 40px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.m-badge {
  padding: 5px 14px; border-radius: 20px;
  font-family: 'Golos Text', sans-serif;
  font-size: 9px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
}
.m-badge.eco  { background: rgba(76,175,80,0.1);  color: #388e3c; }
.m-badge.std  { background: rgba(33,150,243,0.1); color: #1976d2; }
.m-badge.prem { background: rgba(140,123,99,0.12); color: var(--sol-warm); }
.m-badge.pop  { background: rgba(233,30,99,0.1);  color: #c2185b; }
.m-badge.deal { background: rgba(255,152,0,0.1);  color: #e65100; }

.m-num {
  margin-left: auto;
  margin-right: 44px;
  font-family: 'Lora', serif;
  font-size: 28px;
  color: var(--sol-muted);
  opacity: 0.2;
}

.m-title {
  padding: 0 40px;
  font-family: 'Lora', serif;
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 400;
  margin-bottom: 4px;
  color: var(--sol-ink);
}

.m-subtitle {
  padding: 0 40px;
  font-family: 'Golos Text', sans-serif;
  font-size: 14px;
  color: var(--sol-soft);
  margin-bottom: 32px;
}

/* Receipt items */
.m-receipt { padding: 0 40px; }

.m-receipt-title {
  font-family: 'Golos Text', sans-serif;
  font-size: 10px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--sol-muted); margin-bottom: 16px;
}

.m-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--sol-line);
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.4s ease;
}
.m-item.show { opacity: 1; transform: translateY(0); }

.m-item-left { flex: 1; min-width: 0; }

.m-item-name {
  font-family: 'Golos Text', sans-serif;
  font-size: 14px; font-weight: 600;
  color: var(--sol-ink); margin-bottom: 2px;
}
.m-item-detail {
  font-family: 'Golos Text', sans-serif;
  font-size: 11px; color: var(--sol-muted);
}

.m-item-price {
  font-family: 'Golos Text', sans-serif;
  font-size: 15px; font-weight: 700;
  color: var(--sol-ink);
  white-space: nowrap;
  margin-left: 20px;
}

/* Price proportion bar */
.m-item-bar {
  width: 100%;
  height: 4px;
  background: rgba(28,26,21,0.03);
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}
.m-item-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--sol-accent), var(--sol-warm));
  border-radius: 2px;
  width: 0;
  transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.3s;
}

/* Free items row */
.m-item--free {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 0;
  border-bottom: 1px solid var(--sol-line);
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.4s ease;
}
.m-item--free.show { opacity: 1; transform: translateY(0); }
.m-item--free .m-item-name { color: #388e3c; }
.m-item--free .m-item-price { color: #388e3c; font-style: italic; }
.m-item--free svg { flex-shrink: 0; color: #388e3c; }

/* Divider */
.m-divider {
  margin: 8px 40px 0;
  border: none;
  height: 2px;
  background: linear-gradient(90deg, var(--sol-accent), var(--sol-warm), var(--sol-accent));
  border-radius: 1px;
  opacity: 0;
  transition: opacity 0.5s ease 0.8s;
}
.sol-modal-overlay.open .m-divider { opacity: 0.3; }

/* Total */
.m-total {
  padding: 24px 40px 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.5s ease;
}
.m-total.show { opacity: 1; transform: translateY(0); }

.m-total-label {
  font-family: 'Golos Text', sans-serif;
  font-size: 13px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--sol-soft);
}

.m-total-price {
  font-family: 'Lora', serif;
  font-size: clamp(36px, 4vw, 48px);
  font-weight: 400;
  color: var(--sol-warm);
}
.m-total-price .rub { font-size: 0.6em; }

/* CTA */
.m-cta-wrap {
  padding: 28px 40px 40px;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.5s ease;
}
.m-cta-wrap.show { opacity: 1; transform: translateY(0); }

.m-cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 18px;
  border-radius: 16px;
  background: var(--sol-ink); color: var(--sol-cream);
  font-family: 'Golos Text', sans-serif;
  font-size: 15px; font-weight: 700; border: none; cursor: pointer;
  position: relative; overflow: hidden;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: 0 4px 16px rgba(28,26,21,0.12);
}
.m-cta:hover {
  background: var(--sol-warm);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(140,123,99,0.25);
}
.m-cta::after {
  content: ''; position: absolute; top: -50%; left: -60%; width: 40%; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  transform: skewX(-20deg); transition: left 0.6s ease;
}
.m-cta:hover::after { left: 120%; }
.m-cta svg {
  width: 16px; height: 16px;
  stroke: currentColor; stroke-width: 2; fill: none;
  transition: transform 0.3s ease;
}
.m-cta:hover svg { transform: translateX(4px); }

/* ---- Footer note styling ---- */
.solutions-section .projects-note {
  font-family: 'Golos Text', sans-serif;
}

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 900px) {
  .solutions-wrap { padding: 60px 16px; }

  .rooms-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    perspective: none;
  }

  .room-card {
    flex-direction: row;
    align-items: center;
    text-align: left;
    padding: 24px;
    gap: 20px;
  }
  .room-card:hover { transform: translateY(-4px); }

  .rc-badge {
    align-self: auto; position: absolute;
    top: 16px; left: 16px; margin: 0;
  }

  .rc-circle-wrap { width: 100px; height: 100px; margin: 0; flex-shrink: 0; }
  .rc-area { font-size: 26px; }
  .rc-area span { font-size: 12px; }
  .rc-sqm { font-size: 9px; }
  .rc-circle-inner { inset: 8px; }

  .rc-content { flex: 1; display: flex; flex-direction: column; }
  .rc-name { font-size: 20px; margin-top: 4px; }
  .rc-type { margin-bottom: 8px; }
  .rc-price { font-size: 26px; }
  .rc-price-label { margin-bottom: 0; }
  .rc-open { display: none; }

  /* Modal — start below fixed header */
  .sol-modal-overlay { align-items: flex-start; padding: 0; top: var(--header-h); }
  .sol-modal {
    max-width: 100%;
    max-height: calc(100vh - var(--header-h));
    border-radius: 0 0 24px 24px;
    transform: translateY(-100%) scale(1);
  }
  .sol-modal-overlay.open .sol-modal {
    transform: translateY(0) scale(1);
  }
  .m-close {
    top: 12px;
    margin: 12px 12px -52px 0;
  }
  .m-head, .m-receipt, .m-total, .m-cta-wrap, .m-title, .m-subtitle {
    padding-left: 24px; padding-right: 24px;
  }
  .m-divider { margin-left: 24px; margin-right: 24px; }
}

@media (max-width: 480px) {
  .room-card { padding: 20px; gap: 16px; padding-top: 42px; }
  .rc-circle-wrap { width: 80px; height: 80px; }
  .rc-area { font-size: 22px; }
  .rc-name { font-size: 18px; }
  .rc-price { font-size: 22px; }
}

/* Disable sticky hover on touch */
@media (hover: none) {
  .room-card:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--sol-line);
  }
  .room-card:hover::before { opacity: 0; }
  .room-card:hover .rc-circle-inner { background: var(--sol-bg); }
  .rc-open:hover { border-color: var(--sol-line); color: var(--sol-soft); background: transparent; }
}

/* Hidden SVG defs */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* === ceiling-types.css === */
/* ========================================
   CEILING TYPES SECTION — Split-screen redesign
   Desktop: 55% image stage + 45% menu panel
   Mobile: immersive accordion
   ======================================== */

/* Scoped CSS variables for this section */
.ceiling-types-section {
  --ct-bg: var(--color-gray-100);
  --ct-ink: var(--color-gray-900);
  --ct-soft: var(--color-gray-500);
  --ct-muted: var(--color-secondary);
  --ct-accent: var(--color-primary);
  --ct-warm: var(--color-accent);
  --ct-cream: var(--color-gray-50);
  --ct-line: rgba(28,26,21,0.07);

  background: transparent;
  padding: 20px 0;
  position: relative;
  z-index: 2;
}

/* =========================================
   SECTION HEADING (above split block)
   ========================================= */
.ct-section-head {
  padding: 40px 20px 32px;
}

.ct-section-eyebrow {
  color: var(--ct-muted);
  margin-bottom: 12px;
}

.ct-section-title {
  color: var(--ct-ink);
}

.ct-section-title em {
  color: var(--ct-accent);
}

/* =========================================
   DESKTOP: SPLIT SCREEN EXPERIENCE
   ========================================= */
.ct-split {
  display: flex;
  height: auto;
  min-height: 0;
  max-height: none;
  margin: 0 20px;
  border-radius: 28px;
  overflow: hidden;
  background: var(--ct-cream);
  box-shadow: 0 40px 100px rgba(28,26,21,0.07), 0 8px 30px rgba(28,26,21,0.04);
  position: relative;
}

/* ---- LEFT: IMAGE STAGE ---- */
.ct-stage {
  flex: 0 0 55%;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #e8e5df 0%, #d9d5cd 50%, #e8e5df 100%);
  background-size: 200% 200%;
  animation: stagePulse 2s ease-in-out infinite;
}

@keyframes stagePulse {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Stacked fullsize images */
.ct-stage__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.93) saturate(0.9) blur(8px);
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
              filter 0.6s ease;
  will-change: transform, opacity;
  animation: none;
}
.ct-stage__img.hd-loaded {
  filter: brightness(0.93) saturate(0.9) blur(0);
}

.ct-stage__img.active {
  opacity: 1;
  transform: scale(1.0);
  filter: brightness(0.95) saturate(0.95) blur(8px);
  z-index: 1;
}
.ct-stage__img.active.hd-loaded {
  filter: brightness(0.95) saturate(0.95) blur(0);
}

/* Reveal mask — clip-path wipe + slow zoom (all in one animation, no transition conflict) */
.ct-stage__img.reveal-enter {
  animation: ctClipReveal 4s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  z-index: 2;
}

@keyframes ctClipReveal {
  0% {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    opacity: 1;
    transform: scale(1.08);
  }
  /* Clip-path fully open at ~23% (≈0.9s), zoom continues */
  23% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    opacity: 1;
    transform: scale(1.04);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    opacity: 1;
    transform: scale(1.0);
  }
}

/* Large number overlay */
.ct-stage__number {
  position: absolute;
  bottom: -30px;
  left: 36px;
  z-index: 5;
  font-family: 'Lora', serif;
  font-size: 220px;
  font-weight: 400;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,255,255,0.2);
  pointer-events: none;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Overlay gradient */
.ct-stage__overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(to right, transparent 60%, var(--ct-cream) 100%),
    linear-gradient(to top, rgba(28,26,21,0.3) 0%, transparent 40%);
  pointer-events: none;
}

/* Badge */
.ct-stage__badge {
  position: absolute;
  top: 32px;
  left: 32px;
  z-index: 6;
  padding: 8px 20px;
  border-radius: 28px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.5);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ct-accent);
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  pointer-events: none;
}

.ct-stage__badge.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- RIGHT: MENU PANEL ---- */
.ct-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px 44px 24px;
  position: relative;
  z-index: 4;
}

/* Panel header */
.ct-panel__head {
  margin-bottom: 16px;
}

.ct-panel__eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ct-muted);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ct-panel__eyebrow::before {
  content: '';
  width: 24px;
  height: 1.5px;
  background: var(--ct-warm);
}

.ct-panel__title {
  font-family: 'Lora', serif;
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--ct-ink);
}

.ct-panel__title em {
  font-style: italic;
  color: var(--ct-accent);
}

/* Type list */
.ct-type-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  overflow-y: auto;
}

.ct-type-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ct-line);
  cursor: pointer;
  position: relative;
  transition: padding 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  text-decoration: none;
  color: inherit;
}

.ct-type-item:first-child { border-top: 1px solid var(--ct-line); }

.ct-type-item:hover,
.ct-type-item.active {
  padding-left: 8px;
}

/* Active indicator */
.ct-type-item::before {
  content: '';
  position: absolute;
  left: -44px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  background: var(--ct-accent);
  border-radius: 2px;
  transition: height 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.ct-type-item.active::before {
  height: 36px;
}

/* Number */
.ct-type-item__num {
  font-family: 'Lora', serif;
  font-size: 14px;
  color: var(--ct-muted);
  min-width: 24px;
  transition: color 0.3s ease;
}

.ct-type-item.active .ct-type-item__num { color: var(--ct-accent); }

/* Name */
.ct-type-item__name {
  font-family: 'Lora', serif;
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 400;
  color: var(--ct-ink);
  flex: 1;
  transition: color 0.3s ease;
}

.ct-type-item.active .ct-type-item__name {
  color: var(--ct-accent);
}

/* Price */
.ct-type-item__price {
  font-size: 13px;
  color: var(--ct-muted);
  white-space: nowrap;
  transition: color 0.3s ease;
}

.ct-type-item__price b {
  font-weight: 600;
  color: var(--ct-soft);
}

.ct-type-item.active .ct-type-item__price b { color: var(--ct-accent); }


/* Description slide — grid 0fr/1fr for smooth height animation */
.ct-type-item__desc {
  flex-basis: 100%;
  padding-left: 36px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--ct-soft);
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.45s cubic-bezier(0.23, 1, 0.32, 1),
              opacity 0.35s ease;
}

.ct-type-item__desc > span {
  overflow: hidden;
}

.ct-type-item.active .ct-type-item__desc {
  grid-template-rows: 1fr;
  opacity: 1;
}

/* Included note */
.ct-included-note {
  font-size: 11px;
  color: var(--ct-soft);
  line-height: 1.5;
  margin: 12px 0 0;
}

.ct-mobile .ct-included-note {
  font-size: 12px;
  margin: 0 8px 16px;
  padding: 12px 16px;
  background: rgba(140,123,99, 0.08);
  border-left: 3px solid var(--ct-accent);
  border-radius: 0 10px 10px 0;
  color: var(--ct-ink);
  opacity: 0.7;
}

/* Panel footer */
.ct-panel__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--ct-line);
}

.ct-panel__stats {
  display: flex;
  gap: 28px;
}

.ct-ps__val {
  font-family: 'Lora', serif;
  font-size: 22px;
  color: var(--ct-ink);
  line-height: 1;
}

.ct-ps__lbl {
  font-size: 10px;
  color: var(--ct-muted);
  margin-top: 2px;
}

.ct-panel__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  border-radius: 50px;
  background: var(--ct-ink);
  color: var(--ct-cream);
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: 0 4px 20px rgba(28,26,21,0.12);
  text-decoration: none;
}

.ct-panel__cta:hover {
  background: var(--ct-accent);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(140,123,99,0.3);
  color: var(--ct-cream);
}

.ct-panel__cta svg {
  width: 14px; height: 14px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  transition: transform 0.3s ease;
}

.ct-panel__cta:hover svg { transform: translateX(3px); }

/* =========================================
   MOBILE: IMMERSIVE ACCORDION
   ========================================= */
.ct-mobile {
  display: none;
  padding: 16px;
}

.ct-mob-header {
  padding: 24px 8px 28px;
}

.ct-mob-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ct-muted);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ct-mob-eyebrow::before {
  content: '';
  width: 20px;
  height: 1.5px;
  background: var(--ct-warm);
}

.ct-mob-title {
  font-family: 'Lora', serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--ct-ink);
}

.ct-mob-title em { font-style: italic; color: var(--ct-accent); }

.ct-mob-sub {
  font-size: 14px;
  color: var(--ct-soft);
  margin-top: 10px;
  line-height: 1.5;
}

/* Accordion */
.ct-accordion {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ct-acc-item {
  border-radius: 20px;
  overflow: hidden;
  background: var(--ct-cream);
  box-shadow: 0 2px 12px rgba(28,26,21,0.04);
  contain: content;
  position: relative;
}

/* Box-shadow via pseudo — opacity is compositor-only, no per-frame paint */
.ct-acc-item::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(28,26,21,0.08);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 0;
}

.ct-acc-item.open::after {
  opacity: 1;
}

/* Trigger row */
.ct-acc-trigger {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.ct-acc-num {
  font-family: 'Lora', serif;
  font-size: 14px;
  color: var(--ct-muted);
  min-width: 22px;
  transition: color 0.3s ease;
}

.ct-acc-item.open .ct-acc-num { color: var(--ct-accent); }

.ct-acc-name {
  flex: 1;
  font-family: 'Lora', serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--ct-ink);
  transition: color 0.3s ease;
}

.ct-acc-item.open .ct-acc-name { color: var(--ct-accent); }

.ct-acc-price-sm {
  font-size: 12px;
  color: var(--ct-muted);
  transition: opacity 0.3s ease;
}

.ct-acc-item.open .ct-acc-price-sm { opacity: 0; }

.ct-acc-chevron {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--ct-line);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
              background 0.4s cubic-bezier(0.23, 1, 0.32, 1),
              border-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.ct-acc-item.open .ct-acc-chevron {
  background: var(--ct-ink);
  border-color: var(--ct-ink);
  transform: rotate(180deg);
}

.ct-acc-chevron svg {
  width: 12px; height: 12px;
  stroke: var(--ct-ink);
  stroke-width: 2;
  fill: none;
  transition: stroke 0.3s ease;
}

.ct-acc-item.open .ct-acc-chevron svg { stroke: var(--ct-cream); }

/* Expandable body — grid-rows trick (no layout thrash) */
.ct-acc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.ct-acc-body > .ct-acc-inner {
  overflow: hidden;
  min-height: 0;
  padding: 0 20px;
}

.ct-acc-item.open .ct-acc-body {
  grid-template-rows: 1fr;
}

.ct-acc-item.open .ct-acc-inner {
  padding-bottom: 22px;
}

/* Image inside accordion */
.ct-acc-img-wrap {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 14px;
  position: relative;
}

.ct-acc-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.94) saturate(0.9);
  transform: translateZ(0); /* promote to own layer — blur won't re-rasterize on resize */
}
.ct-acc-img-wrap img:not(.hd-loaded) {
  filter: brightness(0.94) saturate(0.9) blur(8px);
}
.ct-acc-img-wrap img.hd-loaded {
  filter: brightness(0.94) saturate(0.9);
}

/* Subtle zoom only on the open item, delayed to not compete with expand */
.ct-acc-item.open .ct-acc-img-wrap img {
  animation: ctAccImgZoom 8s ease-in-out 0.5s infinite alternate;
}

@keyframes ctAccImgZoom {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

.ct-acc-img-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.92);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ct-accent);
}

.ct-acc-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ct-acc-price-lg {
  font-size: 15px;
  color: var(--ct-soft);
}

.ct-acc-price-lg b { font-weight: 600; color: var(--ct-accent); }

.ct-acc-desc {
  font-size: 13px;
  color: var(--ct-soft);
  line-height: 1.55;
  margin-top: 8px;
}

.ct-acc-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ct-ink);
  text-decoration: none;
  margin-top: 12px;
  transition: gap 0.3s ease;
}

.ct-acc-link:hover { gap: 10px; }

.ct-acc-link span {
  display: inline-block;
  width: 20px;
  height: 1px;
  background: var(--ct-ink);
}

/* Mobile footer */
.ct-mob-footer {
  padding: 28px 8px 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ct-mob-stats {
  display: flex;
  gap: 28px;
}

.ct-mob-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px;
  border-radius: 60px;
  background: var(--ct-ink);
  color: var(--ct-cream);
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(28,26,21,0.12);
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.ct-mob-cta:hover {
  background: var(--ct-accent);
  color: var(--ct-cream);
}

.ct-mob-cta svg {
  width: 16px; height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

/* "Ещё" row with links to new services */
.ct-more-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 4px;
  padding: 20px 24px 0;
  font-family: var(--font-primary);
  font-size: 14px;
  color: var(--text-secondary, #6b7280);
}

.ct-more-label {
  font-weight: 500;
  color: var(--text-primary, #1a202c);
  margin-right: 2px;
}

.ct-more-link {
  color: var(--ct-accent, #c41230);
  text-decoration: none;
  transition: opacity 0.2s;
}

.ct-more-link:hover { opacity: 0.7; }

.ct-more-dot { opacity: 0.4; }

@media (max-width: 600px) {
  .ct-more-row { font-size: 13px; padding: 16px 16px 0; }
}

/* =========================================
   RESPONSIVE SWITCH
   ========================================= */
@media (max-width: 900px) {
  .ct-split { display: none; }
  .ct-mobile { display: block; }
}

@media (min-width: 901px) {
  .ct-mobile { display: none; }
}

/* ---- Desktop fine-tuning ---- */
@media (min-width: 901px) and (max-width: 1200px) {
  .ct-stage { flex: 0 0 48%; }
  .ct-panel { padding: 32px 32px 28px; }
  .ct-stage__number { font-size: 160px; left: 24px; }
}

/* Wide screens: 10% margins on each side */
@media (min-width: 1600px) {
  .ct-split {
    margin: 0 10%;
  }
}

/* === room-types.css === */
/* ========================================
   ROOM TYPES SECTION — Split-screen (mirrored)
   Desktop: 45% menu panel + 55% image stage
   Mobile: immersive accordion
   ======================================== */

/* Scoped CSS variables */
.room-types-section {
  --rt-bg: var(--color-gray-100);
  --rt-ink: var(--color-gray-900);
  --rt-soft: var(--color-gray-500);
  --rt-muted: var(--color-secondary);
  --rt-accent: var(--color-primary);
  --rt-warm: var(--color-accent);
  --rt-cream: var(--color-gray-50);
  --rt-line: rgba(28,26,21,0.07);

  background: transparent;
  padding: 20px 0;
  position: relative;
  z-index: 2;
}

/* =========================================
   SECTION HEADING (above split block)
   ========================================= */
.rt-section-head {
  text-align: center;
  padding: 40px 20px 32px;
}

.rt-section-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--rt-muted);
  margin-bottom: 12px;
}

.rt-section-title {
  font-family: 'Lora', serif;
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--rt-ink);
}

.rt-section-title em {
  font-style: italic;
  color: var(--rt-accent);
}

/* =========================================
   DESKTOP: SPLIT SCREEN (MIRRORED)
   Panel LEFT, Image RIGHT
   ========================================= */
.rt-split {
  display: flex;
  height: auto;
  min-height: 0;
  max-height: none;
  margin: 0 20px;
  border-radius: 28px;
  overflow: hidden;
  background: var(--rt-cream);
  box-shadow: 0 40px 100px rgba(28,26,21,0.07), 0 8px 30px rgba(28,26,21,0.04);
  position: relative;
}

/* ---- LEFT: MENU PANEL (mirrored) ---- */
.rt-panel {
  flex: 0 0 45%;
  display: flex;
  flex-direction: column;
  padding: 20px 44px 24px;
  position: relative;
  z-index: 4;
}

/* Panel header */
.rt-panel__head {
  margin-bottom: 16px;
}

.rt-panel__eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--rt-muted);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.rt-panel__eyebrow::before {
  content: '';
  width: 24px;
  height: 1.5px;
  background: var(--rt-warm);
}

.rt-panel__title {
  font-family: 'Lora', serif;
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--rt-ink);
}

.rt-panel__title em {
  font-style: italic;
  color: var(--rt-accent);
}

/* Room list */
.rt-type-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}

.rt-type-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rt-line);
  cursor: pointer;
  position: relative;
  transition: padding 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  text-decoration: none;
  color: inherit;
}

.rt-type-item:first-child { border-top: 1px solid var(--rt-line); }

.rt-type-item:hover,
.rt-type-item.active {
  padding-right: 8px;
}

/* Active indicator — RIGHT edge (mirrored from left) */
.rt-type-item::after {
  content: '';
  position: absolute;
  right: -44px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  background: var(--rt-accent);
  border-radius: 2px;
  transition: height 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.rt-type-item.active::after {
  height: 36px;
}

/* Number */
.rt-type-item__num {
  font-family: 'Lora', serif;
  font-size: 14px;
  color: var(--rt-muted);
  min-width: 24px;
  transition: color 0.3s ease;
}

.rt-type-item.active .rt-type-item__num { color: var(--rt-accent); }

/* Name */
.rt-type-item__name {
  font-family: 'Lora', serif;
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 400;
  color: var(--rt-ink);
  flex: 1;
  transition: color 0.3s ease;
}

.rt-type-item.active .rt-type-item__name {
  color: var(--rt-accent);
}

/* Tagline (instead of price) */
.rt-type-item__tagline {
  font-size: 13px;
  color: var(--rt-muted);
  white-space: nowrap;
  transition: color 0.3s ease;
}

.rt-type-item.active .rt-type-item__tagline { color: var(--rt-soft); }

/* Description slide */
.rt-type-item__desc {
  flex-basis: 100%;
  padding-left: 36px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--rt-soft);
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.45s cubic-bezier(0.23, 1, 0.32, 1),
              opacity 0.35s ease;
}

.rt-type-item__desc > span {
  overflow: hidden;
}

.rt-type-item.active .rt-type-item__desc {
  grid-template-rows: 1fr;
  opacity: 1;
}

/* Panel footer */
.rt-panel__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--rt-line);
}

.rt-panel__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  border-radius: 50px;
  background: var(--rt-ink);
  color: var(--rt-cream);
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: 0 4px 20px rgba(28,26,21,0.12);
  text-decoration: none;
}

.rt-panel__cta:hover {
  background: var(--rt-accent);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(140,123,99,0.3);
  color: var(--rt-cream);
}

.rt-panel__cta svg {
  width: 14px; height: 14px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  transition: transform 0.3s ease;
}

.rt-panel__cta:hover svg { transform: translateX(3px); }

/* ---- RIGHT: IMAGE STAGE (mirrored) ---- */
.rt-stage {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #e8e5df 0%, #d9d5cd 50%, #e8e5df 100%);
  background-size: 200% 200%;
  animation: stagePulse 2s ease-in-out infinite;
}


/* Stacked fullsize images */
.rt-stage__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.93) saturate(0.9) blur(8px);
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
              filter 0.6s ease;
  will-change: transform, opacity;
  animation: none;
}
.rt-stage__img.hd-loaded {
  filter: brightness(0.93) saturate(0.9) blur(0);
}

.rt-stage__img.active {
  opacity: 1;
  transform: scale(1.0);
  filter: brightness(0.95) saturate(0.95) blur(8px);
  z-index: 1;
}
.rt-stage__img.active.hd-loaded {
  filter: brightness(0.95) saturate(0.95) blur(0);
}

/* Reveal mask — clip from RIGHT (mirrored) */
.rt-stage__img.reveal-enter {
  animation: rtClipReveal 4s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  z-index: 2;
}

@keyframes rtClipReveal {
  0% {
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    opacity: 1;
    transform: scale(1.08);
  }
  23% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    opacity: 1;
    transform: scale(1.04);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    opacity: 1;
    transform: scale(1.0);
  }
}

/* Large number overlay — bottom-right (mirrored) */
.rt-stage__number {
  position: absolute;
  bottom: -30px;
  right: 36px;
  z-index: 5;
  font-family: 'Lora', serif;
  font-size: 220px;
  font-weight: 400;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,255,255,0.2);
  pointer-events: none;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Overlay gradient — fades into LEFT panel (mirrored) */
.rt-stage__overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(to left, transparent 60%, var(--rt-cream) 100%),
    linear-gradient(to top, rgba(28,26,21,0.3) 0%, transparent 40%);
  pointer-events: none;
}

/* Badge — top-right (mirrored) */
.rt-stage__badge {
  position: absolute;
  top: 32px;
  right: 32px;
  z-index: 6;
  padding: 8px 20px;
  border-radius: 28px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.5);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--rt-accent);
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  pointer-events: none;
}

.rt-stage__badge.visible {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================
   MOBILE: IMMERSIVE ACCORDION
   ========================================= */
.rt-mobile {
  display: none;
  padding: 16px;
}

.rt-mob-header {
  padding: 24px 8px 28px;
}

.rt-mob-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--rt-muted);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.rt-mob-eyebrow::before {
  content: '';
  width: 20px;
  height: 1.5px;
  background: var(--rt-warm);
}

.rt-mob-title {
  font-family: 'Lora', serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--rt-ink);
}

.rt-mob-title em { font-style: italic; color: var(--rt-accent); }

.rt-mob-sub {
  font-size: 14px;
  color: var(--rt-soft);
  margin-top: 10px;
  line-height: 1.5;
}

/* Accordion */
.rt-accordion {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rt-acc-item {
  border-radius: 20px;
  overflow: hidden;
  background: var(--rt-cream);
  box-shadow: 0 2px 12px rgba(28,26,21,0.04);
  contain: content;
  position: relative;
}

/* Box-shadow via pseudo — opacity is compositor-only, no per-frame paint */
.rt-acc-item::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(28,26,21,0.08);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 0;
}

.rt-acc-item.open::after {
  opacity: 1;
}

/* Trigger row */
.rt-acc-trigger {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.rt-acc-num {
  font-family: 'Lora', serif;
  font-size: 14px;
  color: var(--rt-muted);
  min-width: 22px;
  transition: color 0.3s ease;
}

.rt-acc-item.open .rt-acc-num { color: var(--rt-accent); }

.rt-acc-name {
  flex: 1;
  font-family: 'Lora', serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--rt-ink);
  transition: color 0.3s ease;
}

.rt-acc-item.open .rt-acc-name { color: var(--rt-accent); }

.rt-acc-tagline-sm {
  font-size: 12px;
  color: var(--rt-muted);
  transition: opacity 0.3s ease;
}

.rt-acc-item.open .rt-acc-tagline-sm { opacity: 0; }

.rt-acc-chevron {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--rt-line);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
              background 0.4s cubic-bezier(0.23, 1, 0.32, 1),
              border-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.rt-acc-item.open .rt-acc-chevron {
  background: var(--rt-ink);
  border-color: var(--rt-ink);
  transform: rotate(180deg);
}

.rt-acc-chevron svg {
  width: 12px; height: 12px;
  stroke: var(--rt-ink);
  stroke-width: 2;
  fill: none;
  transition: stroke 0.3s ease;
}

.rt-acc-item.open .rt-acc-chevron svg { stroke: var(--rt-cream); }

/* Expandable body — grid-rows trick (no layout thrash) */
.rt-acc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.rt-acc-body > .rt-acc-inner {
  overflow: hidden;
  min-height: 0;
  padding: 0 20px;
}

.rt-acc-item.open .rt-acc-body {
  grid-template-rows: 1fr;
}

.rt-acc-item.open .rt-acc-inner {
  padding-bottom: 22px;
}

/* Image inside accordion */
.rt-acc-img-wrap {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 14px;
  position: relative;
}

.rt-acc-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.94) saturate(0.9);
  transform: translateZ(0); /* promote to own layer — blur won't re-rasterize on resize */
}
.rt-acc-img-wrap img:not(.hd-loaded) {
  filter: brightness(0.94) saturate(0.9) blur(8px);
}
.rt-acc-img-wrap img.hd-loaded {
  filter: brightness(0.94) saturate(0.9);
}

/* Subtle zoom only on the open item, delayed to not compete with expand */
.rt-acc-item.open .rt-acc-img-wrap img {
  animation: rtAccImgZoom 8s ease-in-out 0.5s infinite alternate;
}

@keyframes rtAccImgZoom {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

.rt-acc-img-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.92);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--rt-accent);
}

.rt-acc-desc {
  font-size: 13px;
  color: var(--rt-soft);
  line-height: 1.55;
  margin-top: 8px;
}

.rt-acc-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--rt-ink);
  text-decoration: none;
  margin-top: 12px;
  transition: gap 0.3s ease;
}

.rt-acc-link:hover { gap: 10px; }

.rt-acc-link span {
  display: inline-block;
  width: 20px;
  height: 1px;
  background: var(--rt-ink);
}

/* Mobile footer */
.rt-mob-footer {
  padding: 28px 8px 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.rt-mob-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px;
  border-radius: 60px;
  background: var(--rt-ink);
  color: var(--rt-cream);
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(28,26,21,0.12);
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.rt-mob-cta:hover {
  background: var(--rt-accent);
  color: var(--rt-cream);
}

.rt-mob-cta svg {
  width: 16px; height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

/* =========================================
   RESPONSIVE SWITCH
   ========================================= */
@media (max-width: 900px) {
  .rt-split { display: none; }
  .rt-mobile { display: block; }
}

@media (min-width: 901px) {
  .rt-mobile { display: none; }
}

/* Desktop fine-tuning */
@media (min-width: 901px) and (max-width: 1200px) {
  .rt-stage { flex: 0 0 48%; }
  .rt-panel { flex: 0 0 52%; padding: 32px 32px 28px; }
  .rt-stage__number { font-size: 160px; right: 24px; }
}

/* Wide screens */
@media (min-width: 1600px) {
  .rt-split {
    margin: 0 10%;
  }
}

/* === vault-promo.css === */
/* =============================================
   VAULT PROMO SECTION — interactive safe promo
   ============================================= */

.np-vault {
  position: relative;
  background: #080706;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
}
.np-vault::before, .np-vault::after {
  content: ''; position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-primary) 20%, var(--color-accent) 40%, #e0d4be 50%, var(--color-accent) 60%, var(--color-primary) 80%, transparent);
  z-index: 20;
}
.np-vault::before { top: 0; }
.np-vault::after { bottom: 0; }

.np-vault__glow {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(196,180,154,0.04) 0%, transparent 70%);
  pointer-events: none;
  transition: all 1.5s ease;
}
.np-vault.opened .np-vault__glow {
  width: 1400px; height: 1400px;
  background: radial-gradient(circle, rgba(196,180,154,0.1) 0%, transparent 55%);
}

.np-vault__particles { position: absolute; inset: 0; pointer-events: none; z-index: 15; }

/* Header */
.np-vault__header { position: relative; z-index: 10; text-align: center; margin-bottom: 40px; }
.np-vault__label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--color-accent); display: flex; align-items: center; gap: 14px; justify-content: center;
  margin-bottom: 16px; opacity: 0; animation: nv-up 0.7s 0.1s ease forwards;
}
.np-vault__label-line { width: 40px; height: 1px; background: linear-gradient(90deg, transparent, rgba(196,180,154,0.4)); }
.np-vault__label-line:last-child { background: linear-gradient(90deg, rgba(196,180,154,0.4), transparent); }
.np-vault__title {
  font-family: 'Lora', serif; font-size: clamp(36px, 4vw, 52px);
  font-weight: 400; color: var(--color-gray-100); line-height: 1.1;
  opacity: 0; animation: nv-up 0.7s 0.2s ease forwards;
}
.np-vault__title em { font-style: italic; color: var(--color-accent); }
@keyframes nv-up { 0% { opacity:0; transform:translateY(20px); } 100% { opacity:1; transform:translateY(0); } }

/* Mechanism */
.np-vault__mechanism {
  position: relative; z-index: 10;
  width: 360px; height: 360px;
  max-width: 82vw; max-height: 82vw;
  margin-bottom: 40px;
  opacity: 0; animation: nv-scale 0.8s 0.3s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes nv-scale { 0% { opacity:0; transform:scale(0.8); } 100% { opacity:1; transform:scale(1); } }

@keyframes nv-dial-wiggle {
  0%, 55%, 100% { transform: rotate(0deg); }
  60% { transform: rotate(20deg); }
  67% { transform: rotate(-16deg); }
  74% { transform: rotate(12deg); }
  81% { transform: rotate(-6deg); }
  88% { transform: rotate(2deg); }
}

.np-vault__door-frame {
  position: absolute; inset: 0; border-radius: 24px;
  border: 2px solid rgba(196,180,154,0.12);
  background: linear-gradient(145deg, rgba(196,180,154,0.03), rgba(196,180,154,0.01));
  overflow: hidden; transition: border-color 0.8s;
}
.np-vault.opened .np-vault__door-frame { border-color: rgba(196,180,154,0.35); }

.np-vault__door {
  position: absolute; inset: 0; border-radius: 22px;
  background: linear-gradient(145deg, #141210, #1a1816);
  transform-origin: left center;
  transition: transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 5;
}
.np-vault.opened .np-vault__door { transform: perspective(800px) rotateY(-105deg); pointer-events: none; }

/* Dial */
.np-vault__dial-wrap {
  position: absolute;
  top: 50%; left: 50%;
  margin-top: -90px; margin-left: -90px;
  width: 180px; height: 180px;
  cursor: grab; user-select: none; -webkit-user-select: none;
  -webkit-user-drag: none; touch-action: none;
  animation: nv-dial-wiggle 4s ease-in-out 2s infinite;
}
.np-vault.interacted .np-vault__dial-wrap { animation: none; }
.np-vault__dial-wrap:active { cursor: grabbing; }
.np-vault__dial-svg {
  width: 100%; height: 100%;
  filter: drop-shadow(0 0 20px rgba(196,180,154,0.15));
  transition: filter 0.3s;
  -webkit-user-drag: none;
}
.np-vault__dial-wrap:hover .np-vault__dial-svg {
  filter: drop-shadow(0 0 30px rgba(196,180,154,0.3));
}

/* Bolts */
.np-vault__bolts { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.np-vault__bolt {
  position: absolute; background: linear-gradient(180deg, var(--color-accent), var(--color-primary));
  border-radius: 4px; transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 0 8px rgba(196,180,154,0.2);
}
.np-vault__bolt--top { width: 8px; height: 28px; top: -4px; left: 50%; margin-left: -4px; }
.np-vault__bolt--bottom { width: 8px; height: 28px; bottom: -4px; left: 50%; margin-left: -4px; }
.np-vault__bolt--left { width: 28px; height: 8px; left: -4px; top: 50%; margin-top: -4px; }
.np-vault__bolt--right { width: 28px; height: 8px; right: -4px; top: 50%; margin-top: -4px; }
.np-vault.unlocked .np-vault__bolt--top { transform: translateY(-24px); opacity: 0; }
.np-vault.unlocked .np-vault__bolt--bottom { transform: translateY(24px); opacity: 0; }
.np-vault.unlocked .np-vault__bolt--left { transform: translateX(-24px); opacity: 0; }
.np-vault.unlocked .np-vault__bolt--right { transform: translateX(24px); opacity: 0; }

/* Hint */
.np-vault__hint {
  position: absolute; bottom: -44px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  font-family: 'Lora', serif; font-style: italic; font-size: 15px;
  color: rgba(196,180,154,0.7); white-space: nowrap; z-index: 7;
  animation: nv-pulse 2.5s ease-in-out infinite;
  transition: opacity 0.5s;
}
.np-vault__hint-icon {
  width: 18px; height: 18px; flex-shrink: 0;
  animation: nv-hint-spin 4s linear infinite;
}
@keyframes nv-hint-spin { to { transform: rotate(360deg); } }
@keyframes nv-pulse { 0%,100% { opacity:0.6; } 50% { opacity:1; } }
.np-vault.unlocked .np-vault__hint,
.np-vault.opened .np-vault__hint { animation: none; opacity: 0; pointer-events: none; }

/* Progress ring */
.np-vault__progress { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.np-vault__progress-bg { fill: none; stroke: rgba(196,180,154,0.08); stroke-width: 2; }
.np-vault__progress-bar {
  fill: none; stroke: var(--color-accent); stroke-width: 2.5; stroke-linecap: round;
}

/* Reveal */
.np-vault__reveal {
  position: absolute; inset: 0; border-radius: 22px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 2; opacity: 0; transition: opacity 0.8s 0.4s ease; overflow: hidden;
}
.np-vault.opened .np-vault__reveal { opacity: 1; }

.np-vault__spotlight {
  position: absolute; top: -50%; left: 50%; transform: translateX(-50%);
  width: 200%; height: 200%;
  background: conic-gradient(from 260deg, transparent 0deg, rgba(196,180,154,0.06) 340deg,
    rgba(196,180,154,0.15) 360deg, rgba(196,180,154,0.06) 380deg, transparent 420deg);
  animation: nv-spot 8s linear infinite; pointer-events: none;
}
@keyframes nv-spot { to { transform: translateX(-50%) rotate(360deg); } }

.np-vault__reveal-discount {
  font-family: 'Lora', serif;
  font-size: clamp(64px, 14vw, 100px); font-weight: 400; line-height: 1;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent) 30%, #e8dcc0 50%, var(--color-accent) 70%, var(--color-primary));
  background-size: 200% 200%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: nv-gold 4s ease-in-out infinite;
  filter: drop-shadow(0 0 30px rgba(196,180,154,0.35));
  position: relative; z-index: 2; transform: scale(0);
  transition: transform 0.8s 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.np-vault.opened .np-vault__reveal-discount { transform: scale(1); }
@keyframes nv-gold { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.np-vault__reveal-sub {
  font-family: 'Lora', serif; font-style: italic;
  font-size: 18px; color: rgba(196,180,154,0.6);
  margin-top: 8px; position: relative; z-index: 2;
  opacity: 0; transition: opacity 0.6s 1s ease;
}
.np-vault.opened .np-vault__reveal-sub { opacity: 1; }

/* Bottom — collapsed when closed, expands on open */
.np-vault__bottom {
  position: relative; z-index: 10;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  max-height: 0; overflow: hidden;
  opacity: 0; pointer-events: none;
  transition: max-height 0.8s 0.7s cubic-bezier(0.23,1,0.32,1),
              opacity 0.6s 1s ease,
              transform 0.8s 1s cubic-bezier(0.23,1,0.32,1);
  transform: translateY(20px);
}
.np-vault.opened .np-vault__bottom {
  max-height: 500px; overflow: visible;
  opacity: 1; transform: translateY(0); pointer-events: auto;
}

.np-vault__promo-name {
  font-family: 'Lora', serif; font-size: clamp(22px, 3vw, 30px);
  font-weight: 400; color: var(--color-gray-100); text-align: center;
}
.np-vault__promo-name em { font-style: italic; color: var(--color-accent); }
.np-vault__promo-desc {
  font-size: 14px; font-weight: 300; color: rgba(244,242,237,0.4);
  text-align: center; max-width: 400px; line-height: 1.6;
}

.np-vault__timer-row { display: flex; align-items: center; gap: 6px; }
.np-vault__timer-num {
  font-family: 'Lora', serif; font-size: 24px; color: var(--color-gray-100);
  background: rgba(244,242,237,0.05); border: 1px solid rgba(196,180,154,0.1);
  padding: 6px 12px; border-radius: 10px; min-width: 46px; text-align: center;
}
.np-vault__timer-sep {
  font-family: 'Lora', serif; color: rgba(196,180,154,0.3); font-size: 20px;
  animation: nv-blink 1s ease-in-out infinite;
}
@keyframes nv-blink { 0%,100% { opacity:1; } 50% { opacity:0.15; } }
.np-vault__timer-label {
  font-size: 9px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(244,242,237,0.25); text-align: center;
}

.np-vault__cta {
  padding: 20px 56px; border: none; border-radius: 100px; cursor: pointer;
  font-family: 'Golos Text', sans-serif; font-size: 16px; font-weight: 600; color: #080706;
  background: linear-gradient(135deg, #a08a68, var(--color-accent) 30%, #ddd0b8 50%, var(--color-accent) 70%, #a08a68);
  background-size: 200% 200%; animation: nv-gold 4s ease-in-out infinite;
  box-shadow: 0 4px 24px rgba(196,180,154,0.25), 0 0 40px rgba(196,180,154,0.1);
  transition: transform 0.3s, box-shadow 0.3s;
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px;
}
.np-vault__cta::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: nv-shine 3s ease-in-out infinite;
}
@keyframes nv-shine { 0%,100% { left:-100%; } 50% { left:100%; } }
.np-vault__cta:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 8px 32px rgba(196,180,154,0.35); }
.np-vault__cta-arrow { transition: transform 0.3s; font-size: 18px; }
.np-vault__cta:hover .np-vault__cta-arrow { transform: translateX(6px); }

.np-vault__alt {
  margin-top: 8px; padding-top: 20px;
  border-top: 1px solid rgba(196,180,154,0.08);
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.np-vault__alt-question {
  font-family: 'Lora', serif; font-style: italic;
  font-size: 15px; color: rgba(196,180,154,0.85);
}
.np-vault__alt-desc {
  font-size: 13px; font-weight: 300; color: rgba(244,242,237,0.75);
  max-width: 320px; line-height: 1.5;
}
.np-vault__alt-btn {
  margin-top: 4px; padding: 10px 28px;
  border: 1px solid rgba(196,180,154,0.15); border-radius: 100px;
  color: rgba(196,180,154,0.85); font-family: 'Golos Text', sans-serif;
  font-size: 13px; font-weight: 500; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all 0.3s; background: transparent;
}
.np-vault__alt-btn:hover {
  border-color: rgba(196,180,154,0.4); color: var(--color-accent);
  background: rgba(196,180,154,0.05);
}
.np-vault__alt-btn span { transition: transform 0.3s; }
.np-vault__alt-btn:hover span { transform: translateX(4px); }

@media (max-width: 600px) {
  .np-vault { padding: 60px 16px; }
  .np-vault__mechanism { width: 280px; height: 280px; }
  .np-vault__dial-wrap { width: 140px; height: 140px; margin-top: -70px; margin-left: -70px; }
  .np-vault__hint { bottom: -38px; font-size: 13px; }
  .np-vault__cta { padding: 18px 40px; font-size: 15px; }
  .np-vault__timer-num { font-size: 20px; padding: 5px 10px; min-width: 40px; }
}

/* === blog-home.css === */
/* ========================================
   Blog Home Section (Main Page) — Warm Beige Theme
   Popular articles + Latest articles grid
   ======================================== */

.blog-home-section {
  --bh-bg: var(--color-gray-100);
  --bh-ink: var(--color-gray-900);
  --bh-cream: var(--color-gray-50);
  --bh-soft: var(--color-gray-500);
  --bh-muted: var(--color-secondary);
  --bh-accent: var(--color-accent);
  --bh-warm: var(--color-primary);
  --bh-line: rgba(28,26,21,0.07);

  background: transparent;
  padding: var(--space-16) 0 var(--space-20);
}

/* --- Header: eyebrow + title --- */
.blog-home__header {
  text-align: center;
  margin-bottom: var(--space-8);
}

.blog-home__eyebrow {
  font-family: var(--font-primary);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--bh-warm);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.blog-home__eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--bh-accent);
}

.blog-home__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--bh-ink);
  margin-bottom: 8px;
}

.blog-home__title em {
  font-style: italic;
  color: var(--bh-warm);
}

.blog-home__subtitle {
  font-family: var(--font-primary);
  font-size: clamp(13px, 1.1vw, 15px);
  color: var(--bh-soft);
  font-weight: 300;
  margin-top: 8px;
  line-height: 1.6;
}

/* --- Grid --- */
.blog-home__grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* --- Top row: popular --- */
.blog-home__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

/* --- Bottom row: latest --- */
.blog-home__bottom {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* --- Base card --- */
.bhc {
  display: block;
  text-decoration: none;
  color: inherit;
  background: rgba(250,248,244,0.9);
  border: 1px solid rgba(196,180,154,0.25);
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(28,26,21,0.05);
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
  cursor: pointer;
}

.bhc:hover {
  transform: translateY(-4px);
  background: rgba(250,248,244,0.92);
  box-shadow: 0 12px 40px rgba(28,26,21,0.09);
  border-color: rgba(196,180,154,0.4);
}

/* Mobile: show #1 popular (split) before #2 (vert) */
.bhc--split { order: -1; }

/* --- Vertical card (medium, left in top row) --- */
.bhc--vert {
  display: flex;
  flex-direction: column;
}

.bhc--vert .bhc__img {
  position: relative;
  height: 120px;
  overflow: hidden;
  background: linear-gradient(135deg, #e8e2d8 0%, #d9d0c3 40%, #ebe6de 70%, #d4ccc0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bhc--vert .bhc__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease, filter 0.6s ease;
}

.bhc--vert .bhc__img img[data-blog-hd] {
  filter: blur(8px);
  transform: scale(1.04);
}

.bhc--vert .bhc__img img.blog-hd-loaded {
  filter: blur(0);
  transform: scale(1);
}

.bhc--vert:hover .bhc__img img {
  transform: scale(1.06);
}

.bhc__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: var(--font-primary);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 50px;
  background: linear-gradient(135deg, #2c2620, #3d3428);
  color: var(--bh-cream);
  font-weight: 600;
  z-index: 2;
}

.bhc--vert .bhc__body {
  padding: 20px 22px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.bhc--vert .bhc__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  color: var(--bh-ink);
  line-height: 1.35;
  margin-bottom: 8px;
}

.bhc--vert .bhc__desc {
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  color: var(--bh-soft);
  line-height: 1.55;
  font-weight: 300;
  margin-bottom: 12px;
  flex: 1;
}

/* --- Split card (big, right in top row) --- */
.bhc--split {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100%;
}

.bhc--split .bhc__img {
  position: relative;
  height: 140px;
  overflow: hidden;
  background: linear-gradient(135deg, #e8e2d8 0%, #d9d0c3 40%, #ebe6de 70%, #d4ccc0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bhc--split .bhc__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease, filter 0.6s ease;
}

.bhc--split .bhc__img img[data-blog-hd] {
  filter: blur(8px);
  transform: scale(1.04);
}

.bhc--split .bhc__img img.blog-hd-loaded {
  filter: blur(0);
  transform: scale(1);
}

.bhc--split:hover .bhc__img img {
  transform: scale(1.05);
}

.bhc--split .bhc__body {
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bhc--split .bhc__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  color: var(--bh-ink);
  line-height: 1.35;
  margin-bottom: 12px;
}

.bhc--split .bhc__desc {
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  color: var(--bh-soft);
  line-height: 1.6;
  font-weight: 300;
  margin-bottom: 14px;
}

/* --- Compact card (bottom row, latest) --- */
.bhc--compact {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
}

.bhc--compact .bhc__thumb {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, #e8e2d8 0%, #d9d0c3 40%, #ebe6de 70%, #d4ccc0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bhc--compact .bhc__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease, filter 0.6s ease;
}

.bhc--compact .bhc__thumb img[data-blog-hd] {
  filter: blur(8px);
  transform: scale(1.04);
}

.bhc--compact .bhc__thumb img.blog-hd-loaded {
  filter: blur(0);
  transform: scale(1);
}

.bhc--compact:hover .bhc__thumb img {
  transform: scale(1.08);
}

.bhc--compact .bhc__info {
  flex: 1;
  min-width: 0;
}

.bhc--compact .bhc__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  color: var(--bh-ink);
  line-height: 1.35;
  margin-bottom: 6px;
}

/* --- Views badge --- */
.bhc__views {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  width: fit-content;
  gap: 5px;
  font-family: var(--font-primary);
  font-size: 11px;
  color: var(--bh-muted);
  font-weight: 500;
  background: rgba(196,180,154,0.15);
  padding: 3px 10px;
  border-radius: 20px;
}

.bhc__views svg {
  width: 12px;
  height: 12px;
}

/* --- Placeholder SVG --- */
.bhc__ph {
  width: 48px;
  height: 48px;
  color: rgba(140,123,99,0.25);
}

/* --- CTA button --- */
.blog-home__cta {
  text-align: center;
  margin-top: var(--space-8);
}

.blog-home__cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 600;
  color: var(--bh-cream);
  background: linear-gradient(135deg, #2c2620, #3d3428);
  border-radius: 50px;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-home__cta-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(28,26,21,0.15);
}

.blog-home__cta-link svg {
  width: 16px;
  height: 16px;
}

/* ========================================
   TABLET (768px+)
   ======================================== */
@media (min-width: 768px) {
  .blog-home__top {
    grid-template-columns: 1fr 2fr;
  }

  .bhc--split { order: 0; }

  .bhc--vert .bhc__img {
    height: 140px;
  }

  .bhc--split {
    grid-template-columns: 1.1fr 1fr;
  }

  .bhc--split .bhc__img {
    height: 100%;
    min-height: 0;
  }

  .bhc--split .bhc__body {
    padding: 36px 32px;
  }

  .bhc--split .bhc__title {
    margin-bottom: 14px;
  }

  .blog-home__bottom {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .bhc--compact .bhc__thumb {
    width: 90px;
    height: 90px;
  }

}

/* ========================================
   DESKTOP (1024px+)
   ======================================== */
@media (min-width: 1024px) {
  .bhc--split .bhc__body {
    padding: 44px 38px;
  }


  .bhc--split .bhc__desc {
    font-size: 15px;
  }
}