/* ========== HERO SECTION (SƏHİFƏ 1, BÖLMƏ 1) ========== */

.sb-hero {
  position: relative;
  padding: 36px 20px 70px;
}

.sb-hero-inner {
  max-width: var(--sb-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
  gap: 46px;
  align-items: center;
}

/* Yumşaq neon-vari parıltı fonu */

.sb-hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 0 0, rgba(200, 230, 160, 0.46), transparent 60%),
    radial-gradient(circle at 80% 0, rgba(92, 39, 81, 0.14), transparent 65%),
    radial-gradient(circle at 10% 100%, rgba(217, 146, 99, 0.28), transparent 65%);
  opacity: 0.85;
  mix-blend-mode: multiply;
  z-index: -1;
}

/* Sol sütun – mətn hissəsi */

.sb-hero-content {
  position: relative;
}

.sb-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--sb-radius-pill);
  padding: 5px 12px;
  background: rgba(249, 244, 237, 0.9);
  border: 1px solid rgba(92, 39, 81, 0.13);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.04);
  margin-bottom: 16px;
}

.sb-hero-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 0, #FFFFFF 0, var(--sb-color-pistachio-deep) 60%, var(--sb-color-plum) 100%);
  box-shadow: 0 0 0 6px rgba(200, 230, 160, 0.3);
}

.sb-hero-badge-text {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sb-color-ink-soft);
}

.sb-hero-title {
  font-size: 38px;
  line-height: 1.04;
  margin: 4px 0 16px;
  letter-spacing: -0.02em;
  color: var(--sb-color-ink);
}

.sb-hero-title-highlight {
  background: linear-gradient(120deg, var(--sb-color-plum), var(--sb-color-terracotta));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sb-hero-text {
  font-size: 15px;
  color: var(--sb-color-ink-soft);
  max-width: 620px;
}

.sb-hero-text p + p {
  margin-top: 10px;
}

/* CTA-lar */

.sb-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.sb-hero-meta {
  margin-top: 14px;
  font-size: 12px;
  color: rgba(45, 27, 20, 0.7);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.sb-hero-meta-item {
  padding: 3px 9px;
  border-radius: var(--sb-radius-pill);
  background: rgba(249, 244, 237, 0.7);
  border: 1px dashed rgba(200, 230, 160, 0.7);
}

.sb-hero-meta-sep {
  opacity: 0.6;
}

/* Sağ sütun – vizual orbit blok */

.sb-hero-visual {
  position: relative;
}

.sb-hero-orbit {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin-left: auto;
  margin-right: 0;
  aspect-ratio: 4 / 5;
  border-radius: 40px;
  background: radial-gradient(circle at 20% 0, #FFFFFF 0, rgba(200, 230, 160, 0.65) 40%, rgba(92, 39, 81, 0.55) 100%);
  box-shadow: var(--sb-shadow-soft);
  overflow: hidden;
  padding: 24px 20px;
}

/* Orbit halqaları */

.sb-hero-orbit-ring {
  position: absolute;
  border-radius: 999px;
  border: 1px dashed rgba(255, 255, 255, 0.6);
  inset: 20px 22px;
  opacity: 0.9;
}

.sb-hero-orbit-ring--inner {
  inset: 46px 48px;
  opacity: 0.55;
}

/* Flakonlar */

.sb-hero-figure {
  position: absolute;
}

.sb-hero-img {
  max-width: var(--sb-max-img-width);
  border-radius: 26px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

/* Əsas serum flakonu */

.sb-hero-figure--main {
  left: 50%;
  top: 16%;
  transform: translateX(-50%);
}

.sb-hero-img--primary {
  transform-origin: center;
  animation: sbFloatPrimary 7s ease-in-out infinite alternate;
}

/* Krem bankası */

.sb-hero-figure--secondary {
  right: -6%;
  bottom: 12%;
}

.sb-hero-figure--secondary .sb-hero-img {
  max-width: 210px;
  border-radius: 24px;
  animation: sbFloatSecondary 8s ease-in-out infinite alternate;
}

/* Tekstura smear */

.sb-hero-figure--texture {
  left: -8%;
  bottom: 0;
}

.sb-hero-figure--texture .sb-hero-img {
  max-width: 180px;
  border-radius: 40px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
  animation: sbFloatTexture 9s ease-in-out infinite alternate;
}

/* Caption */

.sb-hero-figure-label {
  position: absolute;
  left: 50%;
  bottom: -26px;
  transform: translateX(-50%);
  font-size: 11px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(249, 244, 237, 0.94);
  color: var(--sb-color-ink-soft);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  white-space: nowrap;
}

/* Orbit tag */

.sb-hero-tag {
  position: absolute;
  left: 22px;
  top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
}

.sb-hero-tag-line {
  width: 26px;
  height: 1px;
  background: rgba(255, 255, 255, 0.8);
}

.sb-hero-tag-text {
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

/* ========== ANIMASİYALAR ========== */

@keyframes sbFloatPrimary {
  0% {
    transform: translateX(-50%) translateY(0) rotate(-1deg);
  }
  100% {
    transform: translateX(-50%) translateY(-8px) rotate(2deg);
  }
}

@keyframes sbFloatSecondary {
  0% {
    transform: translateY(0) rotate(4deg);
  }
  100% {
    transform: translateY(-10px) rotate(0deg);
  }
}

@keyframes sbFloatTexture {
  0% {
    transform: translateY(0) rotate(-5deg);
  }
  100% {
    transform: translateY(-6px) rotate(-1deg);
  }
}

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

@media (max-width: 1024px) {
  .sb-hero-inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 32px;
  }

  .sb-hero-title {
    font-size: 32px;
  }
}

@media (max-width: 880px) {
  .sb-hero-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .sb-hero-content {
    order: 1;
  }

  .sb-hero-visual {
    order: 2;
  }

  .sb-hero-orbit {
    margin: 10px auto 0;
  }

  .sb-hero-title {
    font-size: 30px;
  }
}

@media (max-width: 640px) {
  .sb-hero {
    padding-inline: 16px;
    padding-bottom: 60px;
  }

  .sb-hero-title {
    font-size: 26px;
  }

  .sb-hero-text {
    font-size: 14px;
  }

  .sb-hero-orbit {
    max-width: 320px;
    padding: 20px 16px;
    border-radius: 32px;
  }

  .sb-hero-img {
    max-width: 260px; /* Yenə də 350px-dən kiçikdir */
  }

  .sb-hero-figure--secondary .sb-hero-img {
    max-width: 160px;
  }

  .sb-hero-figure--texture .sb-hero-img {
    max-width: 140px;
  }

  .sb-hero-figure-label {
    font-size: 10px;
  }

  .sb-hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 420px) {
  .sb-hero-orbit {
    max-width: 290px;
  }

  .sb-hero-img {
    max-width: 230px;
  }
}
/* ========== COMMON SECTION ELEMENTS ========== */

.sb-section-kicker {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sb-color-ink-soft);
  margin-bottom: 6px;
}

.sb-section-title {
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  color: var(--sb-color-ink);
}

/* ========== SECTION 2: RİTUAL XƏTTİ ========== */

.sb-ritual {
  padding: 18px 20px 64px;
}

.sb-ritual-inner {
  max-width: var(--sb-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 32px;
  align-items: center;
}

.sb-ritual-text {
  font-size: 14px;
  color: var(--sb-color-ink-soft);
  max-width: 420px;
}

.sb-ritual-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.sb-ritual-step {
  position: relative;
  padding: 12px 11px 13px;
  border-radius: 18px;
  background: linear-gradient(
    145deg,
    rgba(249, 244, 237, 0.96),
    rgba(200, 230, 160, 0.35)
  );
  border: 1px solid rgba(200, 230, 160, 0.7);
  box-shadow: var(--sb-shadow-subtle);
  overflow: hidden;
  transition:
    transform var(--sb-transition-fast),
    box-shadow var(--sb-transition-fast),
    border-color var(--sb-transition-fast),
    background var(--sb-transition-fast);
}

.sb-ritual-step::before {
  content: "";
  position: absolute;
  inset: -40px;
  background: radial-gradient(circle at 0 0, rgba(217, 146, 99, 0.26), transparent 55%);
  opacity: 0;
  transition: opacity 0.35s var(--sb-ease-soft);
  pointer-events: none;
}

.sb-ritual-step-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.sb-ritual-step-number {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: radial-gradient(circle at 20% 0, #FFFFFF 0, var(--sb-color-plum) 100%);
  color: #FFFFFF;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

.sb-ritual-step-title {
  font-size: 14px;
  margin: 0;
  color: var(--sb-color-ink);
}

.sb-ritual-figure {
  margin: 6px 0 6px;
}

.sb-ritual-img {
  max-width: var(--sb-max-img-width);
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16);
  transform-origin: center;
  transition:
    transform var(--sb-transition-base),
    box-shadow var(--sb-transition-base);
}

.sb-ritual-step-text {
  font-size: 13px;
  color: var(--sb-color-ink-soft);
  margin: 0;
}

/* Hover effect */

.sb-ritual-step:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 38px rgba(0, 0, 0, 0.16);
  border-color: rgba(92, 39, 81, 0.4);
  background: linear-gradient(
    145deg,
    rgba(249, 244, 237, 1),
    rgba(200, 230, 160, 0.5)
  );
}

.sb-ritual-step:hover::before {
  opacity: 1;
}

.sb-ritual-step:hover .sb-ritual-img {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

/* ========== SECTION 3: LABORATORİYA & BOTANİKA XƏRİTƏSİ ========== */

.sb-story {
  padding: 16px 20px 64px;
}

.sb-story-inner {
  max-width: var(--sb-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 34px;
  align-items: center;
}

.sb-story-gallery {
  display: grid;
  grid-template-rows: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 12px;
}

.sb-story-gallery-main {
  border-radius: 28px;
  overflow: hidden;
  background: radial-gradient(circle at top left, #FFFFFF 0, var(--sb-color-milk-soft) 50%);
  box-shadow: var(--sb-shadow-soft);
}

.sb-story-gallery-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.sb-story-figure {
  margin: 0;
}

.sb-story-figure--small {
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--sb-shadow-subtle);
}

.sb-story-img {
  max-width: var(--sb-max-img-width);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sb-story-content {
  position: relative;
}

.sb-story-text {
  font-size: 14px;
  color: var(--sb-color-ink-soft);
  max-width: 420px;
}

.sb-story-tags {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sb-story-tag {
  font-size: 12px;
  padding: 5px 10px;
  border-radius: var(--sb-radius-pill);
  background: rgba(249, 244, 237, 0.9);
  border: 1px dashed rgba(92, 39, 81, 0.3);
  color: var(--sb-color-ink-soft);
}

/* ========== SECTION 4: PINCO & PIN CO TEXNOLOGİYALARI ========== */

.sb-tech {
  padding: 14px 20px 72px;
}

.sb-tech-inner {
  max-width: var(--sb-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 30px;
  align-items: stretch;
  border-radius: 32px;
  background:
    radial-gradient(circle at 0 0, rgba(200, 230, 160, 0.4), transparent 55%),
    radial-gradient(circle at 100% 0, rgba(92, 39, 81, 0.32), transparent 60%),
    radial-gradient(circle at 0 100%, rgba(217, 146, 99, 0.32), transparent 60%),
    linear-gradient(135deg, #FDF9F3, #F9F4ED);
  box-shadow: var(--sb-shadow-soft);
  padding: 22px 22px 24px;
}

.sb-tech-text-block {
  max-width: 460px;
}

.sb-tech-text {
  font-size: 14px;
  color: var(--sb-color-ink-soft);
  margin-bottom: 14px;
}

.sb-tech-pills {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.sb-tech-pill {
  padding: 10px 11px;
  border-radius: 18px;
  background: rgba(249, 244, 237, 0.9);
  border: 1px solid rgba(200, 230, 160, 0.6);
}

.sb-tech-pill-title {
  font-size: 13px;
  margin: 0 0 4px;
  color: var(--sb-color-ink);
}

.sb-tech-pill-text {
  font-size: 13px;
  margin: 0;
  color: var(--sb-color-ink-soft);
}

.sb-tech-visual {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.sb-tech-card {
  border-radius: 22px;
  padding: 10px 10px 12px;
  background: rgba(249, 244, 237, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: var(--sb-shadow-subtle);
  transition:
    transform var(--sb-transition-fast),
    box-shadow var(--sb-transition-fast);
}

.sb-tech-card--secondary {
  background: rgba(200, 230, 160, 0.24);
  border-color: rgba(200, 230, 160, 0.7);
}

.sb-tech-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
}

.sb-tech-figure {
  margin: 0 0 6px;
}

.sb-tech-img {
  max-width: var(--sb-max-img-width);
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.sb-tech-note {
  font-size: 12px;
  color: var(--sb-color-ink-soft);
  margin: 0;
}

/* ========== RESPONSIVE 2–4 SECTION ========== */

@media (max-width: 1024px) {
  .sb-ritual-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .sb-ritual-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sb-story-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .sb-story-gallery {
    order: 2;
  }

  .sb-story-content {
    order: 1;
  }

  .sb-tech-inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 820px) {
  .sb-ritual-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .sb-ritual {
    padding-inline: 16px;
  }

  .sb-story {
    padding-inline: 16px;
  }

  .sb-tech {
    padding-inline: 16px;
    padding-bottom: 64px;
  }

  .sb-section-title {
    font-size: 22px;
  }

  .sb-ritual-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .sb-story-gallery {
    grid-template-rows: minmax(0, 1fr) minmax(0, 0.9fr);
  }

  .sb-story-img {
    max-width: 100%;
  }

  .sb-tech-inner {
    padding: 18px 16px 20px;
    border-radius: 26px;
  }

  .sb-tech-img {
    max-width: 100%;
  }
}
/* ========== SECTION 5: DƏRİ HƏDƏFLƏRİ XƏTTİ ========== */

.sb-skinline {
  padding: 16px 20px 64px;
}

.sb-skinline-inner {
  max-width: var(--sb-max-width);
  margin: 0 auto;
  border-radius: 30px;
  background:
    radial-gradient(circle at 0 0, rgba(200, 230, 160, 0.45), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(92, 39, 81, 0.3), transparent 60%),
    linear-gradient(135deg, #FDF9F3, #F9F4ED);
  box-shadow: var(--sb-shadow-soft);
  padding: 20px 22px 22px;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 26px;
  align-items: center;
}

.sb-skinline-text {
  font-size: 14px;
  color: var(--sb-color-ink-soft);
  max-width: 360px;
}

.sb-skinline-body {
  display: grid;
  grid-template-rows: auto auto;
  gap: 10px;
}

.sb-skinline-pills {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sb-skinline-pill {
  border-radius: var(--sb-radius-pill);
  padding: 6px 12px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid rgba(200, 230, 160, 0.6);
  background: rgba(249, 244, 237, 0.9);
  color: var(--sb-color-ink-soft);
  cursor: default;
  transition:
    background var(--sb-transition-fast),
    border-color var(--sb-transition-fast),
    transform var(--sb-transition-fast);
}

.sb-skinline-pill--active {
  background: rgba(92, 39, 81, 0.92);
  border-color: rgba(255, 255, 255, 0.7);
  color: #FFFFFF;
  transform: translateY(-1px);
}

.sb-skinline-visuals {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr) minmax(0, 0.9fr);
  gap: 10px;
  align-items: stretch;
}

.sb-skinline-figure {
  position: relative;
  margin: 0;
}

.sb-skinline-figure--main {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--sb-shadow-soft);
}

.sb-skinline-figure--secondary {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--sb-shadow-subtle);
}

.sb-skinline-img {
  max-width: var(--sb-max-img-width);
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform var(--sb-transition-base),
    filter var(--sb-transition-base);
}

.sb-skinline-caption {
  position: absolute;
  left: 10px;
  bottom: 10px;
  right: 10px;
  font-size: 11px;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(249, 244, 237, 0.92);
  color: var(--sb-color-ink-soft);
}

/* Hover – лёгкий параллакс */

.sb-skinline-figure--main:hover .sb-skinline-img {
  transform: scale(1.03);
}

.sb-skinline-figure--secondary:hover .sb-skinline-img {
  transform: translateY(-3px);
  filter: brightness(1.03);
}

/* ========== SECTION 6: BAKIDAN REAL HEKAYƏ ========== */

.sb-voice {
  padding: 10px 20px 64px;
}

.sb-voice-inner {
  max-width: var(--sb-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 30px;
  align-items: center;
}

.sb-voice-text {
  font-size: 14px;
  color: var(--sb-color-ink-soft);
  max-width: 440px;
}

.sb-voice-quote {
  margin-top: 14px;
  padding: 10px 13px;
  border-radius: 18px;
  background: rgba(249, 244, 237, 0.9);
  border: 1px solid rgba(92, 39, 81, 0.25);
  box-shadow: var(--sb-shadow-subtle);
  position: relative;
}

.sb-voice-quote::before {
  content: "“";
  position: absolute;
  top: -18px;
  left: 12px;
  font-size: 40px;
  color: rgba(92, 39, 81, 0.2);
}

.sb-voice-quote-text {
  font-size: 14px;
  margin: 0 0 8px;
  color: var(--sb-color-ink);
}

.sb-voice-quote-meta {
  font-size: 12px;
  margin: 0;
  color: var(--sb-color-ink-soft);
}

.sb-voice-visuals {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 10px;
}

.sb-voice-figure {
  margin: 0;
}

.sb-voice-figure--portrait {
  border-radius: 26px;
  overflow: hidden;
  box-shadow: var(--sb-shadow-soft);
}

.sb-voice-figure--product {
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--sb-shadow-subtle);
  align-self: flex-end;
}

.sb-voice-img {
  max-width: var(--sb-max-img-width);
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform var(--sb-transition-base),
    box-shadow var(--sb-transition-base);
}

.sb-voice-figure--portrait:hover .sb-voice-img {
  transform: translateY(-4px);
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.18);
}

/* ========== SECTION 7: BOTANİK TƏRKİB XƏTTİ ========== */

.sb-ingredients {
  padding: 8px 20px 72px;
}

.sb-ingredients-inner {
  max-width: var(--sb-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr);
  gap: 26px;
  align-items: center;
}

/* Rəngli “lent” blok */

.sb-ingredients-ribbon {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  padding: 18px 18px 20px;
}

.sb-ingredients-ribbon-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 0 0, rgba(200, 230, 160, 0.65), transparent 60%),
    radial-gradient(circle at 100% 0, rgba(92, 39, 81, 0.55), transparent 60%),
    radial-gradient(circle at 0 100%, rgba(217, 146, 99, 0.55), transparent 60%);
  opacity: 0.9;
}

.sb-ingredients-ribbon-content {
  position: relative;
  color: #FFFFFF;
}

.sb-ingredients-ribbon .sb-section-kicker {
  color: rgba(255, 255, 255, 0.8);
}

.sb-ingredients-ribbon .sb-section-title {
  color: #FFFFFF;
}

.sb-ingredients-text {
  font-size: 14px;
  max-width: 420px;
}

/* Kartlar */

.sb-ingredients-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.sb-ingredient {
  border-radius: 20px;
  background: rgba(249, 244, 237, 0.95);
  border: 1px solid rgba(200, 230, 160, 0.7);
  box-shadow: var(--sb-shadow-subtle);
  padding: 8px 9px 10px;
  text-align: left;
  transition:
    transform var(--sb-transition-fast),
    box-shadow var(--sb-transition-fast);
}

.sb-ingredient:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
}

.sb-ingredient-figure {
  margin: 0 0 6px;
}

.sb-ingredient-img {
  max-width: var(--sb-max-img-width);
  width: 100%;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}

.sb-ingredient-title {
  font-size: 14px;
  margin: 0 0 4px;
  color: var(--sb-color-ink);
}

.sb-ingredient-text {
  font-size: 13px;
  margin: 0;
  color: var(--sb-color-ink-soft);
}

/* ========== RESPONSIVE 5–7 SECTION ========== */

@media (max-width: 1024px) {
  .sb-skinline-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .sb-voice-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .sb-ingredients-inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 820px) {
  .sb-skinline-visuals {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
  }

  .sb-skinline-figure--secondary:last-child {
    grid-column: 1 / -1;
  }

  .sb-voice-visuals {
    grid-template-columns: minmax(0, 1fr);
  }

  .sb-ingredients-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .sb-skinline,
  .sb-voice,
  .sb-ingredients {
    padding-inline: 16px;
  }

  .sb-skinline-inner {
    padding: 16px 14px 18px;
    border-radius: 24px;
  }

  .sb-skinline-visuals {
    grid-template-columns: minmax(0, 1fr);
  }

  .sb-ingredients-inner {
    gap: 18px;
  }

  .sb-ingredients-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sb-ingredients-ribbon {
    padding: 14px 14px 16px;
    border-radius: 24px;
  }
}
/* ========== SECTION 8: SERENIQUE MOODBOARD ========== */

.sb-mood {
  padding: 10px 20px 64px;
}

.sb-mood-inner {
  max-width: var(--sb-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 28px;
  align-items: center;
}

.sb-mood-text {
  font-size: 14px;
  color: var(--sb-color-ink-soft);
  max-width: 380px;
}

.sb-mood-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.sb-mood-chip {
  font-size: 11px;
  padding: 5px 10px;
  border-radius: var(--sb-radius-pill);
  background: rgba(249, 244, 237, 0.95);
  border: 1px solid rgba(200, 230, 160, 0.7);
  color: var(--sb-color-ink-soft);
}

/* Grid vizual */

.sb-mood-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr);
  gap: 10px;
  align-items: stretch;
}

.sb-mood-card {
  position: relative;
  margin: 0;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: var(--sb-shadow-soft);
}

.sb-mood-card--tall {
  aspect-ratio: 3 / 4;
}

.sb-mood-stack {
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.sb-mood-card--wide {
  aspect-ratio: 4 / 3;
  border-radius: 22px;
  box-shadow: var(--sb-shadow-subtle);
}

.sb-mood-card--texture {
  border-radius: 26px;
}

.sb-mood-img {
  max-width: var(--sb-max-img-width);
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform var(--sb-transition-base),
    filter var(--sb-transition-base);
}

/* Hover – “soft zoom” */

.sb-mood-card:hover .sb-mood-img {
  transform: scale(1.04);
  filter: brightness(1.03);
}

/* ========== SECTION 9: SERENIQUE SÖZÜ / TƏMİZ FORMULLAR ========== */

.sb-promise {
  padding: 8px 20px 64px;
}

.sb-promise-inner {
  max-width: var(--sb-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 30px;
  align-items: center;
}

.sb-promise-lead {
  font-size: 14px;
  color: var(--sb-color-ink-soft);
  max-width: 360px;
}

.sb-promise-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sb-promise-item {
  position: relative;
  font-size: 13px;
  color: var(--sb-color-ink-soft);
  padding-left: 20px;
}

.sb-promise-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: radial-gradient(circle at 20% 0, #FFFFFF 0, var(--sb-color-pistachio-deep) 60%, var(--sb-color-plum) 100%);
  box-shadow: 0 0 0 4px rgba(200, 230, 160, 0.35);
}

/* Vizual kartlar */

.sb-promise-visual {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.sb-promise-card {
  border-radius: 22px;
  padding: 10px 10px 12px;
  background: rgba(249, 244, 237, 0.95);
  border: 1px solid rgba(200, 230, 160, 0.7);
  box-shadow: var(--sb-shadow-subtle);
  transition:
    transform var(--sb-transition-fast),
    box-shadow var(--sb-transition-fast);
}

.sb-promise-card--secondary {
  background: rgba(200, 230, 160, 0.2);
}

.sb-promise-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.16);
}

.sb-promise-figure {
  margin: 0 0 6px;
}

.sb-promise-img {
  max-width: var(--sb-max-img-width);
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16);
}

.sb-promise-note {
  font-size: 12px;
  margin: 0;
  color: var(--sb-color-ink-soft);
}

/* ========== SECTION 10: NEONSOFT CTA LENTİ ========== */

.sb-banner {
  padding: 8px 20px 72px;
}

.sb-banner-inner {
  max-width: var(--sb-max-width);
  margin: 0 auto;
  position: relative;
  border-radius: 32px;
  overflow: hidden;
  padding: 20px 20px 22px;
  box-shadow: var(--sb-shadow-soft);
  background: #120a08;
  color: #FFFFFF;
}

.sb-banner-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 0 0, rgba(200, 230, 160, 0.6), transparent 60%),
    radial-gradient(circle at 100% 0, rgba(92, 39, 81, 0.7), transparent 60%),
    radial-gradient(circle at 0 100%, rgba(217, 146, 99, 0.75), transparent 60%);
  opacity: 0.95;
}

.sb-banner-content {
  position: relative;
}

.sb-banner-title {
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 6px 0 10px;
}

.sb-banner-title-highlight {
  background: linear-gradient(120deg, #FFFFFF, #F9F4ED);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sb-banner-text {
  font-size: 14px;
  max-width: 460px;
  color: rgba(255, 255, 255, 0.9);
}

.sb-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

/* Немного подправим кнопки на тёмном фоне */

.sb-banner .sb-btn--primary {
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

.sb-banner .sb-btn--ghost {
  border-color: rgba(255, 255, 255, 0.65);
  background: rgba(10, 6, 4, 0.4);
  color: #FFFFFF;
}

/* ========== RESPONSIVE 8–10 SECTION ========== */

@media (max-width: 1024px) {
  .sb-mood-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .sb-promise-inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 820px) {
  .sb-mood-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }

  .sb-mood-card--tall {
    aspect-ratio: 3 / 4;
  }

  .sb-banner-inner {
    border-radius: 26px;
  }
}

@media (max-width: 640px) {
  .sb-mood,
  .sb-promise,
  .sb-banner {
    padding-inline: 16px;
  }

  .sb-mood-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sb-mood-card--tall {
    aspect-ratio: 3 / 3.8;
  }

  .sb-mood-stack {
    grid-template-rows: auto auto;
  }

  .sb-banner-title {
    font-size: 20px;
  }

  .sb-banner-inner {
    padding: 16px 14px 18px;
  }

  .sb-banner-actions {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* ========== SECTION 11: DƏRI TIPI & RITUAL UYĞUNLUĞU ========== */

.sb-match {
  padding: 10px 20px 64px;
}

.sb-match-inner {
  max-width: var(--sb-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 26px;
  align-items: flex-start;
}

.sb-match-text {
  font-size: 14px;
  color: var(--sb-color-ink-soft);
  max-width: 420px;
}

/* Vertikal “spine” */

.sb-match-list {
  position: relative;
  border-left: 1px dashed rgba(92, 39, 81, 0.26);
  padding-left: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.sb-match-item {
  position: relative;
  padding: 9px 10px 11px;
  border-radius: 20px;
  background: rgba(249, 244, 237, 0.95);
  border: 1px solid rgba(200, 230, 160, 0.6);
  box-shadow: var(--sb-shadow-subtle);
  transition:
    transform var(--sb-transition-fast),
    box-shadow var(--sb-transition-fast),
    border-color var(--sb-transition-fast),
    background var(--sb-transition-fast);
}

.sb-match-marker {
  position: absolute;
  left: -18px;
  top: 18px;
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: radial-gradient(circle at 20% 0, #FFFFFF 0, var(--sb-color-plum) 100%);
  box-shadow: 0 0 0 5px rgba(92, 39, 81, 0.18);
}

.sb-match-body {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 10px;
  align-items: center;
}

.sb-match-title {
  font-size: 14px;
  margin: 0 0 4px;
  color: var(--sb-color-ink);
}

.sb-match-desc {
  font-size: 13px;
  margin: 0;
  color: var(--sb-color-ink-soft);
}

.sb-match-figure {
  margin: 0;
}

.sb-match-img {
  max-width: var(--sb-max-img-width);
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16);
  transition:
    transform var(--sb-transition-base),
    box-shadow var(--sb-transition-base);
}

/* Hover effekt */

.sb-match-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18);
  border-color: rgba(92, 39, 81, 0.4);
  background: linear-gradient(
    120deg,
    rgba(249, 244, 237, 1),
    rgba(200, 230, 160, 0.45)
  );
}

.sb-match-item:hover .sb-match-img {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.22);
}

/* ========== SECTION 12: İSTEHSAL ADDIMLARI MINI-TİMLINE ========== */

.sb-steps {
  padding: 8px 20px 64px;
}

.sb-steps-inner {
  max-width: var(--sb-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 26px;
  align-items: flex-start;
}

.sb-steps-text {
  font-size: 14px;
  color: var(--sb-color-ink-soft);
  max-width: 400px;
}

.sb-steps-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.sb-step-card {
  position: relative;
  border-radius: 20px;
  padding: 10px 10px 12px;
  background: linear-gradient(
    140deg,
    rgba(249, 244, 237, 0.96),
    rgba(200, 230, 160, 0.25)
  );
  border: 1px solid rgba(200, 230, 160, 0.7);
  box-shadow: var(--sb-shadow-subtle);
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 6px;
  overflow: hidden;
  transition:
    transform var(--sb-transition-fast),
    box-shadow var(--sb-transition-fast);
}

.sb-step-number {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sb-color-ink-soft);
}

.sb-step-main {
  min-height: 70px;
}

.sb-step-title {
  font-size: 14px;
  margin: 0 0 4px;
  color: var(--sb-color-ink);
}

.sb-step-desc {
  font-size: 13px;
  margin: 0;
  color: var(--sb-color-ink-soft);
}

.sb-step-figure {
  margin: 0;
}

.sb-step-img {
  max-width: var(--sb-max-img-width);
  width: 100%;
  border-radius: 14px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16);
}

/* Hover */

.sb-step-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

/* ========== SECTION 13: SERENIQUE JOURNAL ========== */

.sb-journal {
  padding: 8px 20px 72px;
}

.sb-journal-inner {
  max-width: var(--sb-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto auto;
  row-gap: 18px;
}

.sb-journal-text {
  font-size: 14px;
  color: var(--sb-color-ink-soft);
  max-width: 460px;
}

.sb-journal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.sb-journal-card {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(249, 244, 237, 0.96);
  border: 1px solid rgba(200, 230, 160, 0.6);
  box-shadow: var(--sb-shadow-subtle);
  display: grid;
  grid-template-rows: minmax(0, 1.4fr) auto;
  transition:
    transform var(--sb-transition-fast),
    box-shadow var(--sb-transition-fast),
    border-color var(--sb-transition-fast);
}

.sb-journal-figure {
  margin: 0;
}

.sb-journal-img {
  max-width: var(--sb-max-img-width);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sb-journal-body {
  padding: 8px 10px 10px;
}

.sb-journal-title {
  font-size: 14px;
  margin: 0 0 4px;
  color: var(--sb-color-ink);
}

.sb-journal-excerpt {
  font-size: 13px;
  margin: 0;
  color: var(--sb-color-ink-soft);
}

/* Hover – “card lift” */

.sb-journal-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 0 0, rgba(200, 230, 160, 0.4), transparent 55%);
  opacity: 0;
  transition: opacity 0.4s var(--sb-ease-soft);
}

.sb-journal-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.2);
  border-color: rgba(92, 39, 81, 0.45);
}

.sb-journal-card:hover::before {
  opacity: 1;
}

/* ========== RESPONSIVE 11–13 SECTIONS ========== */

@media (max-width: 1024px) {
  .sb-match-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .sb-steps-inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 880px) {
  .sb-steps-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sb-journal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .sb-match,
  .sb-steps,
  .sb-journal {
    padding-inline: 16px;
  }

  .sb-match-list {
    border-left: none;
    padding-left: 0;
  }

  .sb-match-marker {
    left: 10px;
  }

  .sb-match-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .sb-steps-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .sb-journal-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* ========== SECTION 14: TEZ CAVABLAR ========== */

.sb-quick {
  padding: 8px 20px 56px;
}

.sb-quick-inner {
  max-width: var(--sb-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 24px;
  align-items: flex-start;
}

.sb-quick-text {
  font-size: 14px;
  color: var(--sb-color-ink-soft);
  max-width: 320px;
}

.sb-quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.sb-quick-item {
  position: relative;
  border-radius: 20px;
  padding: 9px 10px 11px;
  background: rgba(249, 244, 237, 0.96);
  border: 1px solid rgba(200, 230, 160, 0.6);
  box-shadow: var(--sb-shadow-subtle);
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 6px;
  transition:
    transform var(--sb-transition-fast),
    box-shadow var(--sb-transition-fast);
}

.sb-quick-label {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: radial-gradient(circle at 20% 0, #FFFFFF 0, var(--sb-color-plum) 100%);
  color: #FFFFFF;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

.sb-quick-title {
  font-size: 14px;
  margin: 0 0 2px;
  color: var(--sb-color-ink);
}

.sb-quick-desc {
  font-size: 13px;
  margin: 0;
  color: var(--sb-color-ink-soft);
}

.sb-quick-figure {
  margin: 0;
}

.sb-quick-img {
  max-width: var(--sb-max-img-width);
  width: 100%;
  border-radius: 14px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.16);
}

/* Hover */

.sb-quick-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18);
}

/* ========== SECTION 15: SON BAXIŞ & MINI GALLERİYA ========== */

.sb-endcap {
  padding: 0 20px 72px;
}

.sb-endcap-inner {
  max-width: var(--sb-max-width);
  margin: 0 auto;
  border-radius: 28px;
  background:
    radial-gradient(circle at 0 0, rgba(200, 230, 160, 0.45), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(92, 39, 81, 0.35), transparent 60%),
    linear-gradient(135deg, #FDF9F3, #F9F4ED);
  box-shadow: var(--sb-shadow-soft);
  padding: 18px 18px 20px;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 20px;
  align-items: center;
}

.sb-endcap-copy {
  font-size: 14px;
  color: var(--sb-color-ink-soft);
  max-width: 320px;
}

.sb-endcap-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.sb-endcap-card {
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--sb-shadow-subtle);
  background: rgba(249, 244, 237, 0.95);
  transition:
    transform var(--sb-transition-fast),
    box-shadow var(--sb-transition-fast);
}

.sb-endcap-img {
  max-width: var(--sb-max-img-width);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hover */

.sb-endcap-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2);
}

/* ========== RESPONSIVE 14–15 ========== */

@media (max-width: 1024px) {
  .sb-quick-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .sb-endcap-inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 820px) {
  .sb-quick-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .sb-quick,
  .sb-endcap {
    padding-inline: 16px;
  }

  .sb-endcap-inner {
    padding: 16px 14px 18px;
    border-radius: 24px;
  }

  .sb-endcap-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}