:root{
  --bg:#fff6f9;
  --card:#fff;
  --accent1:#FFB6C1;
  --accent2:#FFD79A;
  --accent3:#A0E8FF;
  --text:#23303b;
  --muted:#6b6b72;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:'Fredoka','Nunito',system-ui,-apple-system,'Segoe UI',Roboto;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
.page{display:flex;justify-content:center;width:100%}
.shell{width:100%;max-width:480px;margin:0 auto;position:relative}

/* decorative emojis */
.decor{position:absolute;z-index:0;opacity:0.25;pointer-events:none;font-size:42px;line-height:1}
.decor-top-left{top:-10px;left:-10px}
.decor-top-right{top:-10px;right:-10px}
.decor-bottom-left{bottom:-10px;left:-10px}
.decor-bottom-right{bottom:-10px;right:-10px}

/* HERO */
/* Основні шрифти та анімація */
@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

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

@keyframes neonPulse {
  0%, 100% { text-shadow: 0 0 4px #ff69b4, 0 0 8px #ff69b4; }
  50% { text-shadow: 0 0 8px #ff85c1, 0 0 16px #ff85c1; }
}

/* HERO */
.hero {
  padding: 30px 18px;
  text-align: center;
  font-family: 'Fredoka', sans-serif;
  animation: fadeInUp 1s ease forwards;
  opacity: 0;
}

.brand {
  font-size: 28px;
  font-weight: 700;
  margin: 8px 0;
  color: #ff69b4;
  animation: neonPulse 2s infinite alternate;
}

.lead {
  font-size: 16px;
  color: var(--muted);
  margin-bottom: 16px;
}

.hero-media {
  margin: 16px auto;
}

.product {
  width: 90%;
  max-width: 380px;
  border-radius: 20px;
  box-shadow: 0 14px 36px rgba(255,105,180,0.2);
  transform-origin: center;
  transition: transform 0.45s;
}

.product:hover {
  transform: translateY(-8px) rotate(-2deg);
}

/* Ціна під фото */
.price-row {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 14px 0;
}

.price-old {
  text-decoration: line-through;
  color: var(--muted);
  font-size: 15px;
}

.price-new {
  font-weight: 800;
  font-size: 24px;
  color: #FF0000;
}

/* Таймер та кнопка */
.timer-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  margin-top: 16px;
}

.timer {
  background: linear-gradient(90deg, var(--card), #fff8);
  padding: 10px 16px;
  border-radius: 14px;
  font-weight: 700;
  font-family: 'Fredoka', sans-serif;
  box-shadow: 0 4px 12px rgba(255,105,180,0.25);
}

.order-btn-unicorn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 90%;          /* займає 90% ширини блоку */
  margin: 0 auto;      /* центрування */
  background: linear-gradient(135deg, #ff69b4, #ff85c1);
  padding: 14px 22px;
  border-radius: 16px;
  color: #fff;
  font-weight: 800;
  font-size: 24px;
  cursor: pointer;
  border: none;
  transition: transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 6px 20px rgba(255,105,180,0.4);
}

.order-btn-unicorn:hover {
  transform: scale(1.05) translateY(-2px);
  box-shadow: 0 12px 28px rgba(255,105,180,0.6);
}

.btn-icon {
  font-size: 25px;
  animation: floaty 1.5s infinite alternate;
}


/* BENEFITS */
.benefits {
  padding: 30px 18px;
  text-align: center;
  font-family: 'Fredoka', sans-serif;
  animation: fadeInUp 1.2s ease forwards;
  opacity: 0;
}

.benefit-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 18px;
}

.benefit-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: linear-gradient(135deg, #fff7ff, #fff9f0);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(255,182,193,0.18);
  transition: transform 0.3s, box-shadow 0.3s;
}

.benefit-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 14px 28px rgba(255,182,193,0.3);
}

.benefit-card .icon {
  font-size: 32px;
  animation: floaty 3s ease-in-out infinite;
}

.benefit-card .txt {
  text-align: center;
}

.benefit-card .txt strong {
  display: block;
  font-size: 16px;
  color: #ff69b4;
  margin-bottom: 4px;
}

.benefit-card .txt .sub {
  font-size: 14px;
  color: var(--muted);
}

.benefit-card .mini-char {
  position: absolute;
  right: 12px;
  bottom: -14px;
  font-size: 36px;
  animation: floaty 3.6s ease-in-out infinite;
}


/* Unicorn button */
.order-btn-unicorn{display:inline-flex;align-items:center;gap:8px;background: linear-gradient(135deg, #ff0000, #ffd200);padding:12px 18px;border-radius:14px;color:#fff;border:0;cursor:pointer;font-weight:800}
.btn-icon{font-size:20px;animation:btnPulse 1.4s infinite}
@keyframes btnPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}

/* BENEFITS */


/* ===== Block 1: Product Overview ===== */
.product-overview{padding:18px;position:relative;overflow:hidden}
.overview-inner{display:flex;flex-direction:column;align-items:center;gap:12px;animation:fadeInUp 1s ease forwards;opacity:0}
.overview-product{width:86%;border-radius:18px;box-shadow:0 12px 30px rgba(0,0,0,0.12);transition:transform .4s}
.overview-product:hover{transform:translateY(-6px) rotate(-2deg)}
.overview-text p{font-size:16px;color:var(--text);text-align:center;line-height:1.5}
.overview-image {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* GALLERY */
.gallery {
  padding: 18px;
  text-align: center; /* Відцентровуємо заголовок */
}

.gallery-swiper {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(255,105,180,0.2);
  aspect-ratio: 1 / 1; /* квадратна галерея */
}



/* Слайди */
.g-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  border-radius: 14px;
  overflow: hidden;
  border: 3px solid rgba(255,105,180,0.3);
}

.g-slide img {
  width: 100%;
  display: block;
  border-radius: 12px;
  transition: transform 0.4s, filter 0.4s;
}

/* Активний слайд */
.g-slide.active {
  opacity: 1;
}

/* Hover ефекти для фото */
.g-slide:hover img {
  transform: scale(1.03);
  filter: brightness(1.05) drop-shadow(0 0 12px #ff69b4);
}

.g-slide:hover {
  border-color: rgba(255,105,180,0.6);
  box-shadow: 0 12px 28px rgba(255,105,180,0.5);
}


/* VIDEO */
.video{padding:18px}
.video-wrap{position:relative }
.video-wrap video{width:100%;border-radius:12px}
.video-char{position:absolute;right:10px;top:-12px;font-size:32px;animation:floaty 3.6s ease-in-out infinite}


/* ===== Block 2: Benefits & Usage ===== */
/* Анімації */
@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

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

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

/* Основний блок */
.product-benefits {
  padding: 24px 18px;
  text-align: center;
  font-family: 'Fredoka', sans-serif;
  background: linear-gradient(120deg, #fff7ff, #fff9f0);
  border-radius: 16px;
  overflow: hidden;
  animation: fadeInUp 1s ease forwards;
  opacity: 0;
}

/* Відцентроване фото */
.benefits-photo img {
  width: 100%;
  max-width: 360px;
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(255,182,193,0.25);
  animation: floaty 3s ease-in-out infinite;
  margin: 0 auto;
}

/* Список переваг */
.benefits-list {
  list-style: none;
  padding: 0;
  margin: 16px auto;
  max-width: 400px;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

.benefits-list li {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  background: linear-gradient(145deg, #fff, #ffe4f0);
  box-shadow: 0 6px 16px rgba(255,182,193,0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.benefits-list li:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 24px rgba(255,182,193,0.3);
}

/* Заголовок підсписку */
.usage-title {
  font-size: 20px;
  font-weight: 700;
  color: #ff69b4;
  margin-top: 20px;
  text-shadow: 0 0 8px rgba(255,182,193,0.5);
}

/* Відцентровані блоки "як працює" */
.usage-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

/* Фото користування */
.usage-photo {
  width: 90%;
  max-width: 400px;
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(255,182,193,0.2);
  animation: floaty 3s ease-in-out infinite;
}

/* Текст і кнопка */
.usage-text p {
  font-size: 15px;
  color: #333;
  line-height: 1.5;
  text-align: center;
  margin-bottom: 14px;
}

/* Кнопка */
.order-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #ff69b4, #ff85c1);
  padding: 14px 20px;
  border-radius: 16px;
  color: #fff;
  border: 0;
  cursor: pointer;
  font-weight: 800;
  font-family: 'Fredoka', sans-serif;
  font-size: 16px;
  transition: transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 6px 20px rgba(255,105,180,0.4);
}

.order-btn:hover {
  transform: scale(1.05) translateY(-2px);
  box-shadow: 0 12px 28px rgba(255,105,180,0.5);
}

.btn-icon {
  font-size: 20px;
  animation: btnPulse 1.4s infinite;
}


/* ===== Animations ===== */
@keyframes fadeInUp{0%{opacity:0;transform:translateY(18px)}100%{opacity:1;transform:translateY(0)}}
@keyframes btnPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}

/* ===== Responsive ===== */
@media(max-width:480px){
  .overview-inner,.benefits-inner,.usage-inner{gap:10px}
  .usage-inner{flex-direction:column}
}
/* SPECS */
.specs {
  padding: 24px 18px;
  text-align: center;
  background: radial-gradient(circle at top, #fff0f5, #fff);
  border-radius: 16px;
  font-family: 'Fredoka', sans-serif;
  position: relative;
}

.specs h2 {
  font-size: 28px;
  color: #ff69b4;
  margin-bottom: 20px;
  text-shadow: 0 0 8px rgba(255,182,193,0.6), 0 0 16px rgba(255,182,193,0.3);
}

.specs ul {
  list-style: none;
  padding: 0;
  margin: 0 auto 20px;
  max-width: 320px;
}

.specs ul li {
  background: linear-gradient(145deg, #fff, #ffe4f0);
  padding: 12px 16px;
  margin-bottom: 10px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  font-size: 15px;
  color: #333;
  box-shadow: 0 6px 16px rgba(255,182,193,0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.specs ul li:hover {
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 12px 24px rgba(255,182,193,0.35);
}

.specs ul li::before {
  content: "✔️"; /* Іконка перед кожним пунктом */
  font-size: 18px;
}

.spec-char {
  position: absolute;
  right: 8px;
  top: -20px;
  font-size: 36px;
  opacity: 0.85;
  animation: floaty 3.6s ease-in-out infinite;
}

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

/* Заглушка під фото */
.specs::before {
  content: '';
  display: block;
  width: 400px;
  height: 400px;
  margin: 0 auto 20px;
  background: url('../images/c.webp') center/contain no-repeat;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(255,182,193,0.25);
}


/* STEPS */
.steps {
  padding: 24px 18px;
  text-align: center;
  background: radial-gradient(circle at top, #fff, #fef9ff);
  border-radius: 16px;
}

.steps h2 {
  font-family: 'Fredoka', sans-serif;
  font-size: 28px;
  margin-bottom: 20px;
  color: #ffb6c1;
  text-shadow: 0 0 8px rgba(255,182,193,0.6), 0 0 16px rgba(255,182,193,0.3);
}

.steps-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.step-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 180px;
  padding: 16px;
  border-radius: 18px;
  background: linear-gradient(145deg, #fff, #ffe4f0);
  box-shadow: 0 8px 20px rgba(255,182,193,0.25), 0 0 12px rgba(255,182,193,0.2);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  font-family: 'Fredoka', sans-serif;
}

.step-card:hover {
  transform: translateY(-8px) scale(1.05);
  box-shadow: 0 12px 30px rgba(255,182,193,0.35), 0 0 20px rgba(255,182,193,0.3);
}

.step-card .emoji {
  font-size: 40px;
  animation: float 3s ease-in-out infinite;
  text-shadow: 0 0 6px rgba(255,182,193,0.6), 0 0 12px rgba(255,182,193,0.3);
}

.step-card .step-title {
  font-weight: 700;
  font-size: 16px;
  color: #ff69b4;
}

.step-card .step-sub {
  font-size: 13px;
  color: #555;
}

/* Анімація левітації емодзі */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}


/* REVIEWS */
.reviews{padding:18px}
.review-wrap{background:linear-gradient(90deg,#fff7ff,#fff9f0);padding:16px;border-radius:14px;min-height:100px;display:flex;align-items:center;justify-content:center}

/* FINAL + FORM вертикально */
.final {
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.final-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 18px;
}

.final-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 480px;
  gap: 16px;
}

.final-media img.final-product {
  width: 100%;
  max-width: 420px;
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.15);
  transition: transform 0.35s ease;
}

.final-media img.final-product:hover {
  transform: scale(1.05) rotate(-1deg);
}

/* Ціна */
.final-price-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin-top: 8px;
}

.final-price {
  font-weight: 800;
  font-size: 22px;
  color: #FF0000;
}

.final-old {
  font-weight: 400;
  text-decoration: line-through;
  color: var(--muted);
  font-size: 14px;
}

/* Таймер */
.timer-final {
  margin: 12px 0;
  font-weight: 700;
  background: linear-gradient(90deg, var(--card), #fff8);
  padding: 8px 14px;
  border-radius: 14px;
  display: inline-block;
  transition: transform 0.3s ease;
}

.timer-final:hover {
  transform: scale(1.05);
}

/* Заголовок форми */
.form-title {
  margin: 12px 0;
  font-weight: 600;
  font-size: 18px;
}

/* Форма */
/* Форма вертикально */
.order-form.enhanced {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

/* Всі input та select йдуть по одному */
/* Форма вертикально */
.order-form.enhanced {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
}

/* Кожне поле вертикально */
.order-form.enhanced input,
.order-form.enhanced select {
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid #eee;
  font-family: 'Fredoka', sans-serif;
  font-size: 15px;
  transition: all 0.3s ease;
  background: #fff;
  color: #23303b;
  box-shadow: inset 0 0 0 rgba(255,182,193,0);
}

/* Підсвічування і неон ефект на фокусі */
.order-form.enhanced input:focus,
.order-form.enhanced select:focus {
  outline: none;
  border-color: var(--accent1);
  box-shadow: 0 0 10px rgba(255,182,193,0.6), 0 0 20px rgba(255,182,193,0.3);
}

/* Placeholder більш м’який */
.order-form.enhanced input::placeholder,
.order-form.enhanced select::placeholder {
  color: #aaa;
  opacity: 1;
  transition: all 0.3s ease;
}

/* Hover ефект */
.order-form.enhanced input:hover,
.order-form.enhanced select:hover {
  border-color: var(--accent3);
  box-shadow: 0 0 6px rgba(160,232,255,0.4);
}

/* Кнопка */
.order-form.enhanced .order-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #ff0000, #ffd200);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  border: none;
  border-radius: 16px;
  padding: 14px 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.order-form.enhanced .order-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 16px rgba(255,182,193,0.6), 0 0 28px rgba(160,232,255,0.4);
}



/* LOADER */
.loader{position:fixed;inset:0;background:rgba(10,12,20,0.5);display:flex;align-items:center;justify-content:center;z-index:999;visibility:hidden;opacity:0;transition:opacity .24s}
.loader[aria-hidden="false"]{visibility:visible;opacity:1}
.loader-body{background:#fff;padding:18px 22px;border-radius:14px;display:flex;gap:12px;align-items:center}
.unicorn-loader{font-size:36px;animation:loaderBounce 0.9s infinite}
@keyframes loaderBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* mini animations */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* selection disabled softly */
*{ -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none }

@media(max-width:520px){.benefit-grid{grid-template-columns:1fr}}


.site-footer {
  background: linear-gradient(135deg, var(--accent3), var(--accent1));
  padding: 24px 18px;
  color: #fff;
  font-family: 'Fredoka', sans-serif;
  text-align: center;
  border-radius: 16px 16px 0 0;
  margin-top: 32px;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.12);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.footer-brand {
  font-size: 20px;
  font-weight: 700;
  text-shadow: 0 0 6px rgba(255,182,193,0.6), 0 0 12px rgba(160,232,255,0.3);
}

.footer-links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 14px;
}

.footer-links a {
  color: #fff;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
}

.footer-links a::after {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  background: #fff;
  transition: width 0.3s;
  position: absolute;
  bottom: -2px;
  left: 0;
}

.footer-links a:hover::after {
  width: 100%;
}

.footer-rights {
  font-size: 13px;
  color: #fefefe;
  opacity: 0.9;
}