:root {
  --purple: #4b397b;
  --purple-deep: #3b2d6d;
  --purple-soft: #68449c;
  --pink: #ec5d92;
  --pink-dark: #e9548e;
  --green: #3f806b;
  --orange: #f2741b;
  --ink: #302c37;
  --line: #d9d4df;
  --content-width: 890px;
  --shadow: 0 7px 18px rgba(56, 38, 88, .14);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --btn-radius: 10px;
  --btn-primary-bg: linear-gradient(180deg, #f36ca8 0%, #ea5797 100%);
  --btn-primary-shadow: 0 7px 15px rgba(232, 76, 145, .23);
  --btn-primary-shadow-hover: 0 10px 20px rgba(232, 76, 145, .32);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body {
  margin: 0;
  color: var(--ink);
  background: #eeebf3;
  font-family: "Nunito Sans", Lato, Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.25;
  overflow-x: hidden;
}
.page-shell {
  width: 941px;
  max-width: 100%;
  margin: 0 auto;
  background: #fcfaf9;
  box-shadow: 0 0 28px rgba(46, 31, 78, .08);
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid rgba(238, 91, 155, .42); outline-offset: 3px; }

.site-header {
  height: 64px;
  position: relative;
  z-index: 20;
  color: #fff;
  background: linear-gradient(90deg, #4e3c80 0%, #493779 50%, #4d3a7e 100%);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.14);
}
.header-inner {
  width: min(var(--content-width), calc(100% - 52px));
  height: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
.brand { justify-self: start; }
.brand img {
  width: 140px;
  height: 47px;
  object-fit: contain;
  object-position: left center;
}
.main-nav {
  display: flex;
  justify-content: center;
  gap: 30px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}
.main-nav a {
  padding: 6px 2px;
  opacity: .92;
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.main-nav a:hover { opacity: 1; transform: translateY(-1px); }
.header-cta {
  justify-self: end;
  min-height: 42px;
  padding: 8px 18px 8px 13px;
  border-radius: var(--btn-radius);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  background: var(--btn-primary-bg);
  box-shadow: var(--btn-primary-shadow);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.header-cta img { width: 24px; height: 24px; }
.header-cta:hover { transform: translateY(-2px); box-shadow: var(--btn-primary-shadow-hover); }
.header-cta:active { transform: scale(.97); }
.mobile-site-header { display: none; }

main { width: 100%; }
section { position: relative; overflow: visible; }
section h2 {
  margin: 0;
  color: var(--purple);
  font-size: 24px;
  line-height: 1;
  font-weight: 800;
  text-align: center;
  letter-spacing: -.35px;
}

/* Desktop section rhythm: generous spacing while retaining the reference proportions. */
.hero {
  position: relative;
  min-height: 379px;
  overflow: hidden;
  border-bottom: 1px solid #e7e1e5;
  background: radial-gradient(circle at 35% 50%, #fdfbfa 0, #fdfbfa 37%, #f8f3ef 68%, #eee3da 100%);
}
.hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: calc(42.4% - 39px);
  width: 92px;
  pointer-events: none;
  display: block;
  background: url("assets/images/hero-brush-edge.png") center / 100% 100% no-repeat;
}
.hero-copy {
  position: relative;
  z-index: 2;
  width: 400px;
  padding: 24px 0 0 27px;
}
.hero h1 {
  margin: 0 0 12px;
  color: var(--purple);
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -.8px;
  font-weight: 900;
}
.hero h1 span { color: var(--pink); }
.hero-intro {
  margin: 0 0 13px;
  width: 345px;
  font-size: 14px;
  line-height: 1.4;
  color: #34303b;
}
.trust-row {
  width: 372px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 0;
  margin-bottom: 18px;
}
.trust-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding-right: 5px;
  font-size: 11.5px;
  line-height: 1.18;
  font-weight: 700;
}
.trust-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1.5px solid #8769b4;
  border-radius: 50%;
  background: #fff;
}
.trust-icon img {
  width: 28px;
  height: 28px;
  filter: none;
}
.trust-icon img[src*="material"] {
  filter: invert(31%) sepia(25%) saturate(1904%) hue-rotate(225deg) brightness(88%) contrast(88%);
}
.hero-actions {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 12px;
}
.button {
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-weight: 900;
  line-height: 1.05;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out), filter 160ms var(--ease-out);
}
.button:hover { transform: translateY(-2px); filter: saturate(1.03); }
.button:active { transform: scale(.97); }
.button-primary {
  min-height: 49px;
  padding: 9px 16px;
  color: #fff;
  border-radius: var(--btn-radius);
  background: var(--btn-primary-bg);
  box-shadow: var(--btn-primary-shadow);
}
.button-primary:hover { box-shadow: var(--btn-primary-shadow-hover); }
.button-primary img { width: 31px; height: 31px; }
.button-secondary {
  min-width: 167px;
  min-height: 49px;
  padding: 8px 15px;
  color: var(--purple);
  border: 1.5px solid #8262aa;
  border-radius: var(--btn-radius);
  background: rgba(255,255,255,.96);
  font-size: 12px;
}
.button-secondary img { width: 31px; height: 31px; }
.hero .button-primary {
  min-width: 196px;
  font-size: 13px;
  white-space: nowrap;
}
.reassurance {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #4c4751;
  font-size: 10.5px;
  white-space: nowrap;
}
.mini-messenger {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  padding: 1px;
  border-radius: 50%;
  background: #1684ed;
}
.mini-messenger img { width: 18px; height: 18px; }
.hero-visual {
  position: absolute;
  z-index: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 57.6%;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.hero-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 53% center;
  transform: none;
}
.hero-video {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}
.hero-fallback { z-index: 1; }

/* ------------------------------------------------------------------ */
/* Scroll-scrub video (lives inside .hero)                            */
/* ------------------------------------------------------------------ */
.hero-scrub-video {
  z-index: 2;
  display: block;
}

/* Reduced motion: just show poster, no scrubbing */
@media (prefers-reduced-motion: reduce) {
  .video-scrub-progress { display: none; }
}

.transformation {
  padding: 54px 0 58px;
  background: linear-gradient(180deg, #fdfafa 0%, #fcfaf9 100%);
}
.transformation h2 {
  font-size: 24px;
  line-height: .96;
  letter-spacing: -.65px;
  font-weight: 900;
}
.transformation-grid {
  width: 830px;
  max-width: calc(100% - 52px);
  height: 213px;
  margin: 30px auto 0;
  display: grid;
  grid-template-columns: 240px 315px 210px;
  gap: 15px;
  align-items: start;
}
.photo-collage {
  position: relative;
  height: 238px;
  transform: translateY(-32px);
}
.photo-collage .photo {
  position: absolute;
  width: 100px;
  height: 116px;
  object-fit: cover;
  border: 5px solid #fff;
  box-shadow: 0 5px 9px rgba(58,50,60,.24);
  opacity: 1;
}
.photo-collage .p1 { left: -8px; top: 29px; transform: rotate(-7deg); z-index: 2; }
.photo-collage .p2 { left: 66px; top: -8px; transform: rotate(1deg); z-index: 1; }
.photo-collage .p3 { left: 137px; top: 30px; transform: rotate(4deg); z-index: 2; }
.photo-collage .p4 { left: 30px; top: 118px; transform: rotate(-2deg); z-index: 4; }
.photo-collage .p5 { left: 110px; top: 120px; transform: rotate(2deg); z-index: 4; }
.transform-center > p {
  margin: 1px -42px 8px -15px;
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
}
.combine-visual {
  position: relative;
  height: 174px;
  transform: translateY(-8px);
}
.combined-photo {
  position: absolute;
  left: 22px;
  top: 0;
  width: 270px;
  height: 174px;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
}
.combine-arrow {
  position: absolute;
  left: -31px;
  top: 55px;
  width: 70px;
  height: 48px;
  z-index: 4;
  display: grid;
  place-items: center;
}
.combine-arrow img { width: 100%; height: auto; }
.occasion-list {
  list-style: none;
  margin: 60px 0 0;
  padding: 0;
  display: grid;
  gap: 4px;
  font-size: 11px;
  line-height: 1.11;
  transform: translateX(-6px);
}
.occasion-list li {
  min-height: 23px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.occasion-list img { width: 25px; height: 25px; flex: 0 0 auto; }
.occasion-list img[src*="material"] {
  filter: invert(54%) sepia(66%) saturate(1602%) hue-rotate(303deg) brightness(97%) contrast(91%);
}

.process {
  padding: 48px 0;
  background: #fefefe;
  z-index: 3;
}
.process h2 { font-size: 23px; margin-bottom: 28px; font-weight: 900; letter-spacing: -.6px; }
.process-row {
  width: 780px;
  max-width: calc(100% - 80px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 232px 24px 241px 24px 257px;
  align-items: center;
  transform: translateX(.5px);
}
.process-card {
  height: auto;
  min-height: 102px;
  position: relative;
  display: grid;
  grid-template-columns: 75px 1fr;
  align-items: center;
  padding: 12px 10px 9px 31px;
  border: 1px solid #d3cfd7;
  border-radius: 13px;
  background: #fff;
}
.step-number {
  position: absolute;
  top: 10px;
  left: 7px;
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--purple-soft);
  font-size: 12px;
  font-weight: 900;
}
.process-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #f06ca8, #eb4f94);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.18);
}
.process-icon img { width: 42px; height: 42px; filter: brightness(0) invert(1); }
.process-icon.messenger-circle img { width: 49px; height: 49px; filter: none; }
.process-card h3 {
  margin: 0 0 4px;
  color: var(--purple);
  font-size: 11.2px;
  line-height: 1.06;
  font-weight: 900;
}
.process-card p {
  margin: 0;
  color: #4b4650;
  font-size: 9px;
  line-height: 1.25;
}
.step-arrow {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  justify-self: center;
}
.step-arrow img { width: 100%; height: auto; }

.benefits {
  padding: 48px 0;
  background: #fefefe;
  z-index: 2;
}
.benefits h2 { font-size: 21px; margin-bottom: 28px; font-weight: 900; letter-spacing: -1.05px; }
.benefit-grid {
  width: 780px;
  max-width: calc(100% - 80px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  transform: translateX(.5px);
}
.benefit-card {
  height: auto;
  min-height: 88px;
  padding: 9px;
  display: grid;
  grid-template-columns: 54px 1fr;
  align-items: center;
  gap: 4px;
  border: 1.4px solid #f0b5cf;
  border-radius: 10px;
  background: #fff;
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.benefit-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.benefit-card img { width: 48px; height: 48px; object-fit: contain; }
.benefit-card > img[src*="material"] {
  filter: invert(31%) sepia(25%) saturate(1904%) hue-rotate(225deg) brightness(88%) contrast(88%);
}
.benefit-card:nth-child(2) > img {
  filter: none;
}
.benefit-card h3 {
  margin: 0 0 6px;
  color: var(--purple);
  font-size: 11.5px;
  line-height: 1.05;
  font-weight: 900;
}
.benefit-card p { margin: 0; font-size: 9px; line-height: 1.25; }

.pricing {
  padding: 48px 0;
  background: #fcfaf9;
  z-index: 1;
}
.pricing h2 { font-size: 24px; margin-bottom: 28px; font-weight: 900; letter-spacing: -.85px; }
.pricing-layout {
  width: 745px;
  max-width: calc(100% - 90px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 483px 237px;
  gap: 25px;
  align-items: start;   /* each column at its natural height */
}
.table-scroll {
  overflow: hidden;
  border: 1px solid #cbc7ce;
  border-radius: 10px;
  background: #fff;
}
table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: center;
  font-size: 11.5px;
}
thead { color: #fff; background: linear-gradient(180deg, #5d438d, #4d387d); }
th { height: 23px; padding: 3px 5px; font-size: 9.5px; font-weight: 800; }
td {
  height: 19px;
  padding: 0 5px;
  border-top: 1px solid #ddd9de;
  border-right: 1px solid #ddd9de;
  color: var(--purple);
  font-weight: 900;
}
th:last-child, td:last-child { border-right: 0; }
td:nth-child(2) { color: #7f1d1d; }
td:nth-child(3) { color: var(--green); }
td:nth-child(4) { color: var(--orange); }
/* Taller row so the badge can sit above the dimension text without
   covering it. padding-top applied to every cell in the row so all
   4 columns' text (dimension, old-price, new-price, saving) stay
   vertically aligned with each other. */
.popular-row td {
  background: #fdf2f7;
  padding-top: 12px;
  padding-bottom: 3px;
  vertical-align: middle;
}
.popular-row td:first-child {
  box-shadow: inset 3px 0 0 var(--pink);
  position: relative;
}
.popular-row td:first-child .popular-badge {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 6px;
  color: #fff;
  background: linear-gradient(180deg, var(--pink) 0%, var(--pink-dark) 100%);
  border-radius: 3px;
  font-size: 7.5px;
  font-weight: 900;
  letter-spacing: .3px;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(233, 84, 142, .45);
  white-space: nowrap;
  z-index: 2;
  pointer-events: none;
}
.old-price {
  position: relative;
  z-index: 0;
  display: inline-block;
  padding: 0 2px;
  text-decoration: none;
}
.old-price::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: -8%;
  top: 50%;
  width: 116%;
  height: 12px;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: .82;
  background: url("assets/images/old-price-brush-strike.png") center / 100% 100% no-repeat;
}
.purchase-benefits {
  min-height: 172px;
  padding: 3px 12px;
  border: 1px solid #cfcad4;
  border-radius: 10px;
  background: #fff;
}
.purchase-benefits > div {
  min-height: 42px;
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  border-bottom: 1px solid #d8d3dc;
  color: var(--purple);
  font-size: 10px;
  line-height: 1.08;
  font-weight: 900;
}
.purchase-benefits > div:last-child { min-height: 62px; border-bottom: 0; }
.purchase-benefits img { width: 34px; height: 34px; object-fit: contain; }
.purchase-benefits img[src*="material"] {
  filter: invert(31%) sepia(25%) saturate(1904%) hue-rotate(225deg) brightness(88%) contrast(88%);
}
.purchase-benefits strong { color: var(--pink); font-size: 11px; }
.merge-price-info {
  background: radial-gradient(
    ellipse 62% 42% at 43% 50%,
    rgba(236, 93, 146, .075) 0%,
    rgba(236, 93, 146, .045) 48%,
    rgba(236, 93, 146, 0) 100%
  );
}
.merge-price-info strong {
  color: #655783;
  font-size: 9.6px;
}
.purchase-benefits small {
  display: block;
  margin-top: 3px;
  color: var(--pink);
  font-size: 11.2px;
  line-height: 1.06;
  font-weight: 900;
}

.gallery {
  padding: 48px 0;
  background: transparent;
}
.gallery h2 { font-size: 22px; margin-bottom: 26px; font-weight: 900; letter-spacing: -1.25px; }
.gallery-strip {
  width: 930px;
  height: 114px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 170px 191px 170px 189px 194px;
  gap: 8px;
  transform: translateX(1.5px);
  overflow: hidden;
}
.gallery-strip img {
  width: 100%;
  height: 114px;
  object-fit: cover;
  border-radius: 8px;
  opacity: 1;
  transition: transform 220ms var(--ease-out);
}
.gallery-strip img:hover { transform: scale(1.035); }

.faq {
  padding: 48px 0 52px;
  background: #fefefe;
}
.faq h2 { font-size: 23px; margin-bottom: 28px; letter-spacing: -1.85px; }
.faq-grid {
  width: 861px;
  max-width: calc(100% - 78px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.06fr .88fr 1.2fr;
  gap: 26px;
}
.faq-card {
  height: auto;
  min-height: 0;
  padding: 11px 10px 9px;
  display: grid;
  grid-template-columns: 39px 1fr;
  gap: 3px;
  align-items: start;
  border: 1px solid #cfc8db;
  border-radius: 12px;
  background: #fff;
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.faq-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.faq-card img { width: 34px; height: 34px; }
.faq-card img[src*="material"] {
  filter: invert(54%) sepia(66%) saturate(1602%) hue-rotate(303deg) brightness(97%) contrast(91%);
}
.faq-card h3 {
  margin: 0 0 5px;
  color: var(--purple);
  font-size: 10px;
  line-height: 1.08;
  font-weight: 900;
}
.faq-card p { margin: 0; font-size: 9px; line-height: 1.25; }

.bottom-cta {
  padding: 34px 0;
  color: #fff;
  background: linear-gradient(90deg, #4b387d 0%, #362e6c 32%, #372f6e 50%, #403374 74.5%, #584289 100%);
  border-top: 1px solid rgba(255,255,255,.17);
  border-bottom: 1px solid rgba(255,255,255,.28);
}
.cta-inner {
  width: 780px;
  max-width: calc(100% - 80px);
  height: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 105px 365px 286px;
  align-items: center;
  gap: 12px;
}
.heart-art {
  width: 100px;
  height: 94px;
  object-fit: contain;
  transform: translateX(-.5px);
  filter: brightness(0) saturate(100%) invert(54%) sepia(66%) saturate(1602%) hue-rotate(303deg) brightness(97%) contrast(91%);
}
.cta-copy { margin-left: 12px; }
.cta-copy h2 {
  margin: 0 0 8px;
  color: #fff;
  text-align: left;
  font-size: 20px;
  line-height: 1.08;
  font-weight: 900;
}
.cta-copy h2 span { color: var(--pink); }
.cta-proof { display: flex; align-items: center; gap: 0; transform: none; }
.cta-proof p { margin: 0; font-size: 10.5px; line-height: 1.2; }
.cta-actions { justify-self: end; margin-left: 12px; }
.button.large { min-width: 275px; min-height: 55px; border-radius: var(--btn-radius); font-size: 15px; white-space: nowrap; }
.button.large img { width: 36px; height: 36px; }
.cta-actions p {
  margin: 8px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 10.5px;
}
.cta-actions p img { width: 18px; height: 18px; }
.cta-actions p img[src*="material"] {
  filter: invert(54%) sepia(66%) saturate(1602%) hue-rotate(303deg) brightness(97%) contrast(91%);
}

.site-footer {
  height: 65px;
  color: #fff;
  background: #4c3d82;
}
.footer-inner {
  width: 810px;
  max-width: calc(100% - 70px);
  height: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 125px 1fr 225px;
  align-items: center;
  gap: 15px;
}
.footer-brand img { width: 110px; height: 46px; object-fit: contain; transform: translate(3px, -3px); }
.footer-inner > p { margin: 0; font-size: 10.5px; line-height: 1.25; transform: translateY(-6px); }
.footer-message {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  margin-left: 20px;
  font-size: 9.5px;
  line-height: 1.2;
}
.footer-message img { width: 34px; height: 34px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ------------------------------------------------------------------ */
/* Offer system / conversion mechanics (URL-gated, progressive)       */
/* ------------------------------------------------------------------ */
.offer-fixed [hidden],
.offer-strip [hidden] { display: none !important; }

/* In-flow strip: children expand and push content down — nothing is
   ever covered, so the page layout stays intact with any offer on. */
.offer-strip { position: relative; z-index: 30; }
.offer-strip > div {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  transition: max-height 420ms var(--ease-out), padding 420ms var(--ease-out);
}
.offer-strip > div.is-visible { max-height: 76px; }

/* Slim promo bar — brand colors, dismissible */
.offer-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 16px;
  padding-right: 48px;
  color: #fff;
  background: linear-gradient(90deg, #33265f 0%, #4b397b 55%, #5a3f8f 100%);
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
}
.offer-banner.is-visible { padding-top: 10px; padding-bottom: 10px; }
.offer-banner strong { color: #ffd9e8; }
.offer-banner-close {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.12);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background 140ms ease;
}
.offer-banner-close:hover { background: rgba(255,255,255,.24); }

/* Countdown bar — in-flow, with draining progress bar */
.offer-countdown {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fff;
  background: #2f2354;
  font-size: 12.5px;
  font-weight: 800;
}
.offer-countdown.is-visible { padding-top: 9px; padding-bottom: 13px; }
.offer-countdown .countdown-timer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,.12);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 900;
}
.offer-countdown .countdown-label { font-size: 12px; opacity: .92; }
.countdown-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255,255,255,.14);
}
.countdown-progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--pink) 0%, var(--orange) 100%);
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform 1s linear;
}

/* Hero badge — immediate, inline, message-match (not a slap-in-the-face banner) */
.hero-offer-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 7px 14px;
  border-radius: 999px;
  color: var(--purple-deep);
  background: #fff;
  border: 1.5px solid #f0b5cf;
  box-shadow: 0 4px 10px rgba(236,93,146,.14);
  font-size: 12px;
  line-height: 1.15;
  font-weight: 900;
}
.hero-offer-badge strong { color: var(--pink-dark); }
.hero-offer-badge .badge-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--pink);
}

/* -50% starburst pinned to the hero visual */
.discount-burst {
  position: absolute;
  z-index: 3;
  top: 16px;
  right: 16px;
  width: 106px;
  height: 106px;
  display: grid;
  place-content: center;
  gap: 1px;
  color: #fff;
  text-align: center;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #f476ab 0%, var(--pink) 58%, #d63d7c 100%);
  box-shadow: 0 10px 22px rgba(214, 61, 124, .38);
  transform: rotate(8deg);
  animation: burst-pop 520ms var(--ease-out) 400ms backwards;
}
.discount-burst::before {
  content: "";
  position: absolute;
  inset: -7px;
  border: 2px dashed rgba(236, 93, 146, .65);
  border-radius: 50%;
  animation: burst-spin 14s linear infinite;
}
.burst-value { font-size: 27px; line-height: 1; font-weight: 900; letter-spacing: -1px; }
.burst-label { font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; opacity: .95; }
@keyframes burst-pop {
  from { opacity: 0; transform: rotate(8deg) scale(.4); }
  to { opacity: 1; transform: rotate(8deg) scale(1); }
}
@keyframes burst-spin { to { transform: rotate(360deg); } }

/* Scarcity slot meter */
.slot-meter {
  width: fit-content;
  max-width: 100%;
  margin: 0 0 14px;
  padding: 9px 13px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1.5px solid #f0b5cf;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(236, 93, 146, .12);
}
.slot-dots { display: flex; gap: 5px; }
.slot-dot { width: 11px; height: 11px; border-radius: 50%; background: #e5dfe8; }
.slot-dot.is-left {
  background: var(--pink);
  box-shadow: 0 0 0 3px rgba(236, 93, 146, .18);
  animation: dot-pulse 1.6s var(--ease-in-out) infinite;
}
@keyframes dot-pulse {
  50% { box-shadow: 0 0 0 5px rgba(236, 93, 146, .1); }
}
.slot-text { color: var(--purple-deep); font-size: 12px; font-weight: 800; }
.slot-text strong { color: var(--pink-dark); }

/* Bonus gift card */
.bonus-card {
  width: fit-content;
  max-width: 100%;
  margin: 0 0 14px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1.5px solid #f4c3d8;
  border-radius: 12px;
  background: linear-gradient(120deg, #fdeef5 0%, #fdf6f9 100%);
  box-shadow: 0 4px 10px rgba(236, 93, 146, .1);
}
.bonus-card img {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  filter: invert(54%) sepia(66%) saturate(1602%) hue-rotate(303deg) brightness(97%) contrast(91%);
}
.bonus-card p { margin: 0; color: var(--purple-deep); font-size: 12px; line-height: 1.35; font-weight: 800; }
.bonus-card strong { color: var(--pink-dark); }

/* Guarantee seal */
.guarantee-seal {
  width: fit-content;
  max-width: 100%;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.seal-circle {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: #fff;
  border-radius: 50%;
  background: linear-gradient(145deg, #4a9a80 0%, var(--green) 100%);
  box-shadow: 0 6px 14px rgba(63, 128, 107, .3), inset 0 0 0 2px rgba(255, 255, 255, .25);
}
.seal-circle svg { width: 24px; height: 24px; }
.guarantee-seal p { margin: 0; color: var(--purple-deep); font-size: 12px; line-height: 1.35; font-weight: 800; }
.guarantee-seal strong { color: var(--green); }

/* Social-proof toasts */
.offer-toasts {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 42;
  display: grid;
  gap: 10px;
}
body.offer-sticky-on .offer-toasts { bottom: 92px; }
.proof-toast {
  width: 300px;
  max-width: calc(100vw - 28px);
  padding: 11px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #eee7f2;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(30, 18, 62, .22);
  transform: translateX(-120%);
  transition: transform 420ms var(--ease-out), opacity 320ms ease;
}
.proof-toast.is-visible { transform: translateX(0); }
.proof-toast.is-hiding { opacity: 0; transform: translateX(-30%); }
.proof-avatar {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, var(--purple-soft) 0%, var(--purple) 100%);
  font-size: 15px;
  font-weight: 900;
}
.proof-text { flex: 1; min-width: 0; color: #4b4650; font-size: 11.5px; line-height: 1.3; }
.proof-text strong { color: var(--purple); }
.proof-time { display: block; margin-top: 2px; color: #8a8394; font-size: 10px; }
.proof-close {
  flex: 0 0 auto;
  align-self: flex-start;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  color: #8a8394;
  background: #f3eff6;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background 140ms ease;
}
.proof-close:hover { background: #e9e2ee; }

/* Sticky CTA — after scroll, unified button style; bottom space is
   reserved on <body> from the start so nothing shifts when it appears */
.offer-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.97);
  box-shadow: 0 -8px 24px rgba(46,31,78,.14);
  backdrop-filter: blur(8px);
  transform: translateY(100%);
  transition: transform 240ms var(--ease-out);
}
.offer-sticky-cta.is-visible { transform: translateY(0); }
body.offer-sticky-on { padding-bottom: 76px; }
.offer-sticky-inner {
  width: min(100% - 8px, 620px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.offer-sticky-text {
  color: var(--purple);
  font-size: 13px;
  line-height: 1.25;
  font-weight: 800;
}
.offer-sticky-button {
  flex: 0 0 auto;
  min-height: 46px;
  padding: 8px 16px;
  border-radius: var(--btn-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  background: var(--btn-primary-bg);
  box-shadow: var(--btn-primary-shadow);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.offer-sticky-button:hover { transform: translateY(-2px); box-shadow: var(--btn-primary-shadow-hover); }
.offer-sticky-button:active { transform: scale(.97); }
.offer-sticky-button img { width: 26px; height: 26px; }

/* Exit-intent popup — fires only on real exit behavior */
.offer-exit-popup {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 20px;
}
.offer-exit-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(21, 12, 42, .62);
  backdrop-filter: blur(4px);
}
.offer-exit-card {
  position: relative;
  width: min(100%, 400px);
  padding: 30px 24px 22px;
  border-radius: 16px;
  border-top: 6px solid var(--pink);
  background: #fff;
  box-shadow: 0 24px 48px rgba(30, 18, 62, .28);
  text-align: center;
  animation: popup-in 260ms var(--ease-out);
}
@keyframes popup-in {
  from { opacity: 0; transform: scale(.95) translateY(10px); }
  to { opacity: 1; transform: none; }
}
.offer-exit-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  color: #6b6474;
  background: #f3eff6;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: transform 140ms ease, background 140ms ease;
}
.offer-exit-close:hover { background: #e9e2ee; transform: scale(1.06); }
.offer-exit-img { width: 120px; margin: -6px auto 12px; }
.offer-exit-card h2 {
  margin: 0 0 10px;
  color: var(--purple);
  font-size: 23px;
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: -.4px;
}
.offer-exit-card > p {
  margin: 0 0 18px;
  color: #4b4650;
  font-size: 14px;
  line-height: 1.5;
}
.offer-exit-card > p strong { color: var(--pink-dark); }
.offer-exit-card .button { width: 100%; }
.offer-exit-note {
  margin: 12px 0 0;
  color: #8a8394;
  font-size: 11.5px;
  line-height: 1.3;
}

/* Better focus visibility for accessibility */
:focus-visible {
  outline: 3px solid rgba(236, 93, 146, .55);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Desktop: scale the complete 941 px design canvas to the full viewport. */
@media (min-width: 941px) {
  .page-shell {
    width: 941px;
    max-width: none;
    margin: 0;
    zoom: calc(100vw / 941px);
    box-shadow: none;
  }
}

/* Scroll-scrub hero: native sticky pin + canvas image sequence */
.hero-scrub-wrap { position: relative; }
.hero-scrub-canvas {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.video-scrub-progress {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 5;
  width: 140px;
  height: 3px;
  margin-left: -70px;
  border-radius: 999px;
  background: rgba(255,255,255,.45);
  overflow: hidden;
  display: none;
}
.video-scrub-progress-fill {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--pink);
  transform: scaleX(0);
  transform-origin: left center;
}

@media (min-width: 821px) {
  .hero-scrub-wrap .hero { position: sticky; top: 0; }
  .hero-scrub-wrap.has-frames .hero-scrub-canvas { display: block; }
  .hero-scrub-wrap.has-frames .hero-video { display: none !important; }
  .hero-scrub-wrap.video-fallback .hero-video { display: block !important; }
  .hero-scrub-wrap.has-frames .video-scrub-progress,
  .hero-scrub-wrap.video-fallback .video-scrub-progress { display: block; }
}

@media (max-width: 820px) {
  .offer-strip > div.is-visible { max-height: 110px; }
  .offer-banner { font-size: 12px; padding-left: 12px; padding-right: 42px; }
  .offer-countdown { font-size: 12px; gap: 8px; flex-wrap: wrap; }
  .offer-countdown .countdown-timer { font-size: 13px; padding: 3px 8px; }
  .offer-sticky-inner { flex-direction: column; align-items: stretch; gap: 8px; }
  .offer-sticky-text { text-align: center; }
  .offer-sticky-button { width: 100%; }
  body.offer-sticky-on { padding-bottom: 132px; }
  body.offer-sticky-on .offer-toasts { bottom: 142px; }
  .offer-exit-card { padding: 26px 18px 18px; }
  .offer-exit-card h2 { font-size: 21px; }
  .discount-burst { top: 10px; right: 10px; width: 86px; height: 86px; }
  .burst-value { font-size: 21px; }
  .burst-label { font-size: 9px; }
  .slot-meter, .bonus-card, .guarantee-seal { width: 100%; }
  .offer-toasts { left: 10px; right: 10px; bottom: 10px; }
  .proof-toast { width: 100%; max-width: none; }
}

@media (max-width: 820px) {
  .site-header { display: none; }
  .mobile-site-header {
    position: relative;
    z-index: 20;
    display: block;
    color: #fff;
    background: linear-gradient(120deg, #463375 0%, #3b2d6d 60%, #463476 100%);
    box-shadow: 0 4px 14px rgba(48,31,80,.22);
  }
  .mobile-header-top {
    width: min(calc(100% - 28px), 620px);
    min-height: 62px;
    margin: 0 auto;
    padding: 8px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .mobile-brand {
    flex: 0 1 130px;
    min-width: 0;
    display: flex;
    align-items: center;
  }
  .mobile-brand img {
    width: 118px;
    height: 44px;
    object-fit: contain;
    object-position: left center;
  }
  .mobile-header-cta {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 8px 16px 8px 12px;
    border-radius: var(--btn-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    background: var(--btn-primary-bg);
    box-shadow: var(--btn-primary-shadow);
    font-size: 12.5px;
    line-height: 1;
    font-weight: 900;
    white-space: nowrap;
    transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
  }
  .mobile-header-cta:active { transform: scale(.97); }
  .mobile-header-cta img { width: 24px; height: 24px; }
  .mobile-nav {
    width: min(calc(100% - 24px), 620px);
    margin: 0 auto;
    padding: 8px 0 10px;
    display: flex;
    justify-content: space-between;
    gap: 4px;
    border-top: 1px solid rgba(255,255,255,.14);
  }
  .mobile-nav a {
    flex: 1;
    min-width: 0;
    min-height: 42px;
    padding: 6px 4px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: rgba(255,255,255,.88);
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    text-align: center;
    white-space: nowrap;
    transition: background 140ms ease, color 140ms ease;
  }
  .mobile-nav a:hover, .mobile-nav a:active { background: rgba(255,255,255,.12); color: #fff; }

  .hero { height: auto; min-height: 0; padding-bottom: 0; }
  .hero::after { display: none; }
  .hero-copy { width: min(100% - 32px, 580px); margin: 0 auto; padding: 30px 0 24px; }
  .hero h1 { font-size: clamp(34px, 8vw, 48px); }
  .hero-intro { width: auto; max-width: 520px; font-size: 15px; }
  .trust-row { width: 100%; }
  .hero-actions { flex-wrap: wrap; }
  .hero .button-primary, .button-secondary { flex: 1 1 230px; }
  .reassurance { white-space: normal; }
  .hero-visual { position: relative; width: 100%; height: auto; aspect-ratio: 1.44; }
  .hero-visual img { object-position: center; object-fit: cover; transform: none; }

  .transformation, .process, .benefits, .pricing, .gallery, .faq { height: auto; padding: 40px 0; }
  section h2 { font-size: 26px !important; line-height: 1.05 !important; }
  .process h2 { transform: none; }
  .transformation-grid {
    width: min(100% - 34px, 620px);
    height: auto;
    margin: 32px auto 0;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .photo-collage { width: 250px; margin: 0 auto; transform: none; background: none; }
  .photo-collage .photo { opacity: 1; }
  .transform-center > p { margin: 0 0 12px; font-size: 14px; }
  .combine-visual {
    height: auto;
    max-width: 460px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: center;
    gap: 8px;
    transform: none;
  }
  .combine-arrow { position: static; width: 44px; height: 44px; transform: rotate(90deg); }
  .combined-photo { position: static; width: 100%; height: auto; }
  .occasion-list { max-width: 300px; margin: 0 auto; gap: 8px; font-size: 14px; transform: none; }

  .process-row { max-width: min(100% - 34px, 580px); height: auto; display: grid; grid-template-columns: 1fr; gap: 12px; background: none; transform: none; }
  .process-row > * { display: block; }
  .process-row > .process-card { display: grid; }
  .process-card { width: 100%; height: auto; min-height: 112px; grid-template-columns: 82px 1fr; }
  .process-card h3 { font-size: 14px; }
  .process-card p { font-size: 11px; }
  .process-row > .step-arrow { width: 30px; height: 30px; display: grid; place-items: center; transform: rotate(90deg); }

  .benefit-grid { max-width: min(100% - 34px, 620px); height: auto; display: grid; grid-template-columns: 1fr 1fr; background: none; transform: none; }
  .benefit-grid > * { display: grid; }
  .benefit-card {
    height: auto;
    min-height: 86px;
    padding: 10px 12px;
    grid-template-columns: 56px 1fr;
    align-items: center;
    gap: 8px;
  }
  .benefit-card > img { justify-self: center; }
  .benefit-card > div { align-self: center; }
  .benefit-card h3 { font-size: 13px; }
  .benefit-card p { font-size: 10px; }

  .pricing-layout { max-width: min(100% - 34px, 620px); height: auto; display: grid; grid-template-columns: 1fr; background: none; }
  .pricing-layout > * { display: block; }
  .table-scroll { overflow-x: auto; }
  table { min-width: 470px; }
  .purchase-benefits { min-height: 0; }

  .gallery-strip { width: 100%; height: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 0 8px; background: none; transform: none; }
  .gallery-strip img { height: auto; aspect-ratio: 1.45; opacity: 1; }
  .gallery-strip img:last-child { grid-column: 1 / -1; width: 50%; justify-self: center; }

  .faq h2 { margin-bottom: 10px; }
  .faq-grid { max-width: min(100% - 34px, 620px); height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; background: none; }
  .faq-grid > * { display: grid; }
  .faq-card { height: auto; min-height: 116px; }
  .faq-card h3 { font-size: 12px; }
  .faq-card p { font-size: 10px; }

  .bottom-cta { height: auto; padding: 28px 0; }
  .cta-inner { max-width: min(100% - 34px, 620px); grid-template-columns: 74px 1fr; gap: 12px; }
  .heart-art { width: 72px; height: auto; }
  .cta-copy, .cta-actions { margin-left: 0; }
  .cta-copy h2 { font-size: 24px; }
  .cta-actions { grid-column: 1 / -1; justify-self: stretch; }
  .button.large { width: 100%; }

  .site-footer { height: auto; padding: 18px 0; }
  .footer-inner { max-width: min(100% - 34px, 620px); grid-template-columns: 120px 1fr; }
  .footer-message { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 520px) {
  .mobile-header-top { width: calc(100% - 24px); gap: 9px; }
  .mobile-brand { flex-basis: 108px; }
  .mobile-brand img { width: 104px; height: 40px; }
  .mobile-header-cta { padding-right: 13px; font-size: 11.5px; }
  .mobile-header-cta img { width: 22px; height: 22px; }
  .mobile-nav { width: calc(100% - 20px); gap: 2px; }
  .mobile-nav a { min-height: 40px; font-size: 11px; }
  .hero-copy { width: calc(100% - 28px); }
  .table-scroll { overflow-x: hidden; }
  .table-scroll table { width: 100%; min-width: 0; }
  .table-scroll th:nth-child(4),
  .table-scroll td:nth-child(4) { display: none; }
  .purchase-benefits small { font-size: 11.5px; }
  .hero h1 { font-size: 36px; letter-spacing: -1px; }
  .trust-row { display: grid; grid-template-columns: 1fr 1fr; }
  .trust-item { min-width: 0 !important; }
  .benefit-grid, .faq-grid { grid-template-columns: 1fr; }
  .benefit-card { min-height: 82px; padding: 9px 13px; }
  .faq { padding-bottom: 20px; }
  .faq-card { min-height: 0; padding: 12px 10px; }
  .gallery-strip { grid-template-columns: 1fr; }
  .gallery-strip img:last-child { grid-column: auto; width: 100%; }
  .cta-inner { grid-template-columns: 1fr; text-align: center; }
  .heart-art { margin: 0 auto; }
  .cta-copy h2 { text-align: center; }
  .cta-proof { justify-content: center; flex-direction: column; gap: 7px; }
  .footer-inner { grid-template-columns: 1fr; text-align: center; }
  .footer-brand, .footer-message { justify-self: center; }
}

/* ================================================================== */
/* STUDIO MODULES (?ponuda=)                                           */
/* Built in the site's own language: white rounded cards, pink/purple  */
/* borders, circle icon badges, --shadow. Clear + visual for an older  */
/* audience. Own .st-* namespace; legacy offer styling untouched.      */
/* ================================================================== */

/* --- M1. Kapacitet ove sedmice (signature card, near pricing) ------ */
.st-cap {
  width: 745px;
  max-width: calc(100% - 90px);
  margin: 0 auto 22px;
  padding: 15px 18px 16px;
  border: 1.5px solid #f0b5cf;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow);
}
.st-cap-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.st-cap-badge {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #f06ca8, #eb4f94);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.2), 0 5px 11px rgba(236,93,146,.28);
}
.st-cap-badge img { width: 27px; height: 27px; filter: brightness(0) invert(1); }
.st-cap-lead {
  margin: 0;
  color: var(--purple-deep);
  font-size: 13.5px;
  line-height: 1.3;
  font-weight: 800;
}
.st-cap-numrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2px 0 12px;
  padding-left: 4px;
}
.st-cap-num {
  color: var(--pink-dark);
  font-size: 52px;
  line-height: .9;
  font-weight: 900;
  letter-spacing: -1.5px;
}
.st-cap-unit {
  color: var(--purple);
  font-size: 16px;
  line-height: 1.1;
  font-weight: 900;
}
.st-cap-unit span { color: var(--purple-soft); font-size: 14px; font-weight: 800; }
.st-cap-bar {
  height: 13px;
  margin-bottom: 11px;
  border-radius: 999px;
  background: #efe7f2;
  overflow: hidden;
}
.st-cap-bar > span {
  display: block;
  height: 100%;
  min-width: 14px;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--pink) 0%, var(--pink-dark) 100%);
  box-shadow: 0 0 0 1px rgba(233,84,142,.25) inset;
}
.st-cap-note {
  margin: 0;
  color: #4b4650;
  font-size: 12.5px;
  line-height: 1.5;
}
.st-cap-note strong { color: var(--purple); }

/* --- M2. Viewers pill (on the hero image) -------------------------- */
.st-viewtag {
  position: absolute;
  z-index: 3;
  left: 14px;
  top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  border: 1.5px solid #f0b5cf;
  box-shadow: 0 5px 13px rgba(236,93,146,.2);
  color: var(--purple-deep);
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  backdrop-filter: blur(3px);
  animation: st-tag-in 460ms var(--ease-out) 600ms backwards;
}
@keyframes st-tag-in { from { opacity: 0; transform: translateY(-6px); } }
.st-viewtag img {
  width: 20px;
  height: 20px;
  filter: invert(31%) sepia(25%) saturate(1904%) hue-rotate(225deg) brightness(88%) contrast(88%);
}
.st-viewtag strong { color: var(--pink-dark); font-weight: 900; font-size: 15px; font-variant-numeric: tabular-nums; }
/* Viewers pill is mobile-only (most traffic); hidden on desktop */
@media (min-width: 821px) { .st-viewtag { display: none !important; } }

/* --- M3. Live order toasts (reuse #offer-toasts stack) ------------- */
.st-slip {
  position: relative;
  width: 320px;
  max-width: calc(100vw - 28px);
  padding: 12px 13px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid #eee7f2;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(30, 18, 62, .2);
  transform: translateX(-120%);
  transition: transform 440ms var(--ease-out), opacity 320ms ease;
}
.st-slip.is-visible { transform: translateX(0); }
.st-slip.is-hiding { opacity: 0; transform: translateX(-30%); }
.st-slip-mark {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, var(--purple-soft) 0%, var(--purple) 100%);
  font-size: 16px;
  font-weight: 900;
}
.st-slip-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.st-slip-body strong { color: var(--purple); font-size: 13px; font-weight: 900; }
.st-slip-body span { color: #8a8394; font-size: 11px; line-height: 1.25; }
.st-slip-hot { color: var(--pink-dark); font-weight: 900; }
.st-slip-close {
  flex: 0 0 auto;
  align-self: flex-start;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  color: #8a8394;
  background: #f3eff6;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.st-slip-close:hover { background: #e9e2ee; }

/* --- M4. Gift / free UV varnish (in the pricing aside) ------------- */
.st-gift {
  margin: 10px -12px -3px;
  padding: 14px 15px;
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 12px;
  border: 0;
  border-top: 1.5px solid #bfe3d5;
  border-radius: 0 0 9px 9px;
  background: linear-gradient(180deg, #e8f6ef 0%, #dff2e8 100%);
}
.st-gift-badge {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #fff;
  border-radius: 50%;
  background: linear-gradient(145deg, #4a9a80 0%, var(--green) 100%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.22), 0 5px 11px rgba(63,128,107,.28);
}
.st-gift-badge svg { width: 24px; height: 24px; }
.st-gift-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.st-gift-title { color: var(--purple); font-size: 13px; font-weight: 900; line-height: 1.1; }
.st-gift-desc { color: #4b4650; font-size: 11px; line-height: 1.3; }
.st-gift-price { margin-top: 3px; font-size: 12px; font-weight: 800; }
.st-gift-price s { color: #9a93a3; }
.st-gift-price strong { color: var(--green); font-size: 14px; font-weight: 900; letter-spacing: .4px; }

/* --- M6. Reservation — pinned top bar (always visible) ------------- */
.st-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 45;
  display: flex;
  align-items: stretch;
  color: #fff;
  background: linear-gradient(90deg, #4b387d 0%, #5a3f8f 60%, #6a4aa0 100%);
  box-shadow: 0 3px 14px rgba(48, 31, 80, .28);
  transform: translateY(-100%);
  transition: transform 380ms var(--ease-out), background 400ms ease;
}
.st-topbar.is-in { transform: translateY(0); }
.st-topbar-stub {
  display: flex;
  align-items: center;
  padding: 0 15px;
  background: rgba(0, 0, 0, .16);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .3px;
  white-space: nowrap;
}
.st-topbar-main {
  flex: 1;
  padding: 10px 16px;
  text-align: center;
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.3;
}
.st-topbar-time {
  display: inline-block;
  min-width: 66px;
  margin-left: 6px;
  padding: 3px 11px;
  border-radius: 8px;
  color: var(--purple);
  background: #fff;
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .5px;
}
.st-topbar-warn {
  display: block;
  margin-top: 3px;
  color: #ffe0ec;
  font-size: 12px;
  font-weight: 800;
}
.st-topbar.is-urgent { background: linear-gradient(90deg, #7a2f5a 0%, #b4472f 100%); }
.st-topbar.is-urgent .st-topbar-time { color: #b4472f; animation: st-flash 1.3s ease-in-out infinite; }
@keyframes st-flash { 50% { filter: brightness(1.14); } }
.st-topbar-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, .16);
}
.st-topbar-fill {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--pink) 0%, var(--orange) 100%);
  transform: scaleX(1);
  transition: transform 1s linear;
}

/* --- M5. Scratch card (on-demand modal) --------------------------- */
.st-scratch {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 260ms var(--ease-out);
}
.st-scratch.is-open { opacity: 1; }
.st-scratch-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(21, 12, 42, .62);
  backdrop-filter: blur(4px);
}
.st-scratch-card {
  position: relative;
  width: min(100%, 350px);
  padding: 24px 22px 20px;
  border-radius: 16px;
  border-top: 0;
  background: #fff;
  box-shadow: 0 24px 48px rgba(30, 18, 62, .3);
  text-align: center;
  transform: scale(.94);
  transition: transform 260ms var(--ease-out);
}
.st-scratch.is-open .st-scratch-card { transform: scale(1); }
.st-scratch-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  color: #6b6474;
  background: #f3eff6;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.st-scratch-close:hover { background: #e9e2ee; }
.st-scratch-eyebrow {
  margin: 0 0 3px;
  color: var(--pink-dark);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.st-scratch-head {
  margin: 0 0 14px;
  color: var(--purple);
  font-size: 20px;
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: -.3px;
}
.st-scratch-stage {
  position: relative;
  height: 130px;
  margin-bottom: 15px;
  border-radius: 13px;
  overflow: hidden;
  border: 1.5px solid #e6d3ee;
}
.st-scratch-prize {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 4px;
  padding: 10px;
  background: linear-gradient(135deg, #fdeef5 0%, #eef8f3 100%);
}
.st-scratch-prize-icon { font-size: 32px; line-height: 1; }
.st-scratch-prize-title { color: var(--purple); font-size: 16px; font-weight: 900; }
.st-scratch-prize-sub { color: #4b4650; font-size: 11.5px; font-weight: 700; }
.st-scratch-prize-sub strong { color: var(--green); font-weight: 900; }
.st-scratch-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
  transition: opacity 340ms ease;
}
.st-scratch-stage.is-revealed .st-scratch-canvas { opacity: 0; pointer-events: none; }
.st-scratch-stage.is-revealed .st-scratch-prize { animation: st-prize-pop 440ms var(--ease-out); }
@keyframes st-prize-pop { 0% { transform: scale(.9); } 60% { transform: scale(1.05); } 100% { transform: scale(1); } }
.st-scratch-hint {
  position: absolute;
  left: 50%;
  bottom: 9px;
  transform: translateX(-50%);
  color: rgba(255,255,255,.95);
  font-size: 12px;
  font-weight: 800;
  pointer-events: none;
}
.st-scratch-cta { width: 100%; }
.st-scratch-note { margin: 11px 0 0; color: #8a8394; font-size: 12px; line-height: 1.35; }
.st-scratch-note strong { color: var(--purple); }

/* --- Najava — welcome popup (kapacitet + lak) --------------------- */
.st-welcome {
  position: fixed;
  inset: 0;
  z-index: 56;
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 260ms var(--ease-out);
}
.st-welcome.is-open { opacity: 1; }
.st-welcome-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(21, 12, 42, .62);
  backdrop-filter: blur(4px);
}
.st-welcome-card {
  position: relative;
  width: min(100%, 360px);
  padding: 28px 24px 22px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 48px rgba(30, 18, 62, .3);
  text-align: center;
  transform: scale(.94);
  transition: transform 260ms var(--ease-out);
}
.st-welcome.is-open .st-welcome-card { transform: scale(1); }
.st-welcome-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  color: #6b6474;
  background: #f3eff6;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.st-welcome-close:hover { background: #e9e2ee; }
.st-welcome-eyebrow {
  display: inline-block;
  margin: 0 0 6px;
  padding: 4px 10px;
  color: #fff;
  background: var(--pink-dark);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.st-welcome-lead {
  margin: 0 0 4px;
  color: var(--purple-deep);
  font-size: 14px;
  line-height: 1.3;
  font-weight: 800;
}
.st-welcome-hero {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin: 4px 0 8px;
}
.st-welcome-num {
  color: var(--pink-dark);
  font-size: 68px;
  line-height: .9;
  font-weight: 900;
  letter-spacing: -3px;
  text-shadow: 0 4px 0 rgba(236,93,146,.12);
}
.st-welcome-unit {
  color: var(--purple);
  font-size: 26px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -.5px;
}
.st-welcome-sub {
  margin: 0 0 14px;
  color: #4b4650;
  font-size: 12.5px;
  line-height: 1.4;
}
.st-welcome-sub strong { color: var(--purple); }
.st-welcome-gift {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 16px;
  padding: 11px 13px;
  border: 1.5px solid #bfe3d5;
  border-radius: 12px;
  background: linear-gradient(120deg, #eef8f3 0%, #f6fbf9 100%);
  text-align: left;
}
.st-welcome-gift-ic { font-size: 22px; flex: 0 0 auto; }
.st-welcome-gift-tx { color: var(--purple); font-size: 12.5px; font-weight: 800; line-height: 1.35; }
.st-welcome-gift-tx strong { color: var(--pink-dark); }
.st-welcome-gift-free { color: var(--green); font-weight: 900; letter-spacing: .3px; }
.st-welcome-gift-tx s { color: #9a93a3; font-weight: 700; }
.st-welcome-cta { width: 100%; }
.st-welcome-note { margin: 12px 0 0; color: #8a8394; font-size: 11.5px; line-height: 1.35; }

/* --- Popust — reserved 50% discount inline card ---------------------- */
.st-popust {
  width: 745px;
  max-width: calc(100% - 90px);
  margin: 0 auto 22px;
  padding: 15px 18px 16px;
  border: 1.5px solid #f0b5cf;
  border-radius: 14px;
  background:
    radial-gradient(circle at 92% 0%, rgba(236,93,146,.11) 0%, rgba(236,93,146,0) 55%),
    #fff;
  box-shadow: var(--shadow);
}
.st-popust-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.st-popust-badge {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #f36ca8, #d63d7c);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.22), 0 5px 12px rgba(214,61,124,.28);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -1px;
}
.st-popust-headwrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.st-popust-eyebrow {
  color: var(--purple-deep);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.st-popust-title {
  color: var(--purple);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.15;
}
.st-popust-title strong { color: var(--pink-dark); font-size: 20px; font-weight: 900; }
.st-popust-timerow {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  margin-bottom: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: linear-gradient(90deg, #fdf2f8 0%, #f7ecf5 100%);
  border: 1px dashed #f0b5cf;
}
.st-popust-timelabel {
  color: var(--purple-deep);
  font-size: 12.5px;
  font-weight: 800;
}
.st-popust-time {
  color: var(--pink-dark);
  font-size: 26px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}
.st-popust.is-expired .st-popust-time { color: #b4472f; }
.st-popust-bar {
  height: 8px;
  margin-bottom: 11px;
  border-radius: 999px;
  background: #efe7f2;
  overflow: hidden;
}
.st-popust-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--pink) 0%, var(--pink-dark) 100%);
  transform-origin: left center;
  transition: transform 1s linear;
}
.st-popust-note {
  margin: 0;
  color: #4b4650;
  font-size: 12.5px;
  line-height: 1.4;
}
.st-popust-note strong { color: var(--purple); }
@media (max-width: 820px) {
  .st-popust { width: min(100% - 34px, 620px); max-width: none; }
  .st-popust-time { font-size: 24px; }
}

/* --- Sticky bar + exit popup accents when studio is active --------- */
.st-sticky .offer-sticky-text strong { color: var(--pink-dark); }
.offer-exit-card.st-exit { border-top: 0; }
.offer-exit-card.st-exit > p strong { color: var(--pink-dark); }

@media (max-width: 820px) {
  .st-cap { width: min(100% - 34px, 620px); max-width: none; }
  .st-cap-num { font-size: 46px; }
  .st-topbar-stub { padding: 0 11px; font-size: 11px; }
  .st-topbar-main { padding: 9px 12px; font-size: 13px; }
  .st-topbar-time { font-size: 15px; min-width: 60px; }
  .st-viewtag { left: 11px; top: 11px; font-size: 12px; }
}