:root{
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.72);
  --stroke: rgba(255,255,255,.14);
  --shadow: 0 24px 80px rgba(0,0,0,.62);
  --pink: #ff4da6;
  --pink2:#ff7ac8;
  --cardA: rgba(255,255,255,.10);
  --cardB: rgba(255,255,255,.06);
  --glass: blur(12px);
}

html, body{height:100%;}
body{
  margin:0;
  color:var(--text);
  overflow-x:hidden;
  background:#06060a;
}

/* ============ BG ============ */
.sv-bg{position:fixed;inset:0;z-index:-3;overflow:hidden;}
.sv-bg-layer{
  position:absolute;inset:0;
  background-size:cover;
  background-repeat:no-repeat;
  background-position: 50% 20%;
  transform: scale(1.05);
  filter: saturate(1.05) contrast(1.06);
  opacity:0;
  transition: opacity .7s ease;
  will-change: opacity;
}
.sv-bg-layer.is-on{opacity:1;}
.sv-bg-overlay{
  position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(900px 600px at 20% 12%, rgba(255,77,166,.18), transparent 60%),
    radial-gradient(900px 700px at 85% 40%, rgba(255,122,200,.14), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.58), rgba(0,0,0,.82));
}
.sv-bg-grain{
  position:absolute;inset:-30%;z-index:2;opacity:.07;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.10) 0px, rgba(255,255,255,.10) 1px, transparent 2px, transparent 4px);
  transform: rotate(6deg);
  mix-blend-mode: overlay;
  pointer-events:none;
}

/* ============ WRAP + CARD ============ */
.sv-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(16px,3vw,36px);
}
.sv-card{
  width:min(980px, 100%);
  border:1px solid var(--stroke);
  background: linear-gradient(180deg, var(--cardA), var(--cardB));
  box-shadow: var(--shadow);
  border-radius: 28px;
  padding: clamp(18px,3.2vw,34px);
  backdrop-filter: var(--glass);
  text-align:center;

  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .22s ease;
  position:relative;
}
.sv-card::before{
  content:"";
  position:absolute;inset:0;border-radius:28px;pointer-events:none;
  background: radial-gradient(900px 260px at var(--mx, 50%) 0%, rgba(255,255,255,.18), transparent 60%);
  opacity:.55;
}

/* ============ TYPO + DANCE ============ */
.sv-title{
  font-size:clamp(28px,4.2vw,52px);
  line-height:1.05;
  margin:0 0 10px;
}
.sv-sub{
  font-size:clamp(16px,2.2vw,20px);
  color:var(--muted);
  margin:0;
}
.sv-small{font-size:12px;color:rgba(255,255,255,.55);margin-top:14px}

.sv-dance{display:inline-block;transform-origin:50% 80%;}
.sv-step.is-show .sv-dance{animation: sv-dance 2.8s ease-in-out infinite;}
@keyframes sv-dance{
  0%{transform: translateY(0) rotate(0deg) scale(1);}
  25%{transform: translateY(-1px) rotate(-0.6deg) scale(1.006);}
  50%{transform: translateY(0) rotate(0.8deg) scale(1.01);}
  75%{transform: translateY(-1px) rotate(-0.4deg) scale(1.006);}
  100%{transform: translateY(0) rotate(0deg) scale(1);}
}

/* ============ STEP + STACK ============ */
.sv-step{display:none;opacity:0;transform:translateY(8px);transition:opacity .45s ease, transform .45s ease;}
.sv-step.is-on{display:block;}
.sv-step.is-show{opacity:1;transform:translateY(0);}

.sv-stack{
  display:grid;
  gap:12px;
  margin-top:14px;
}

/* кожен шматок у своїй міні-картці */
.sv-box{
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.22);
  border-radius:18px;
  padding: 14px 14px;
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
}

/* reveal-анімація на блоки */
.sv-reveal{
  opacity:0;
  transform: translateY(10px);
  filter: blur(1px);
  transition: opacity .55s ease, transform .55s ease, filter .55s ease;
  transition-delay: var(--d, 0ms);
}
.sv-step.is-show .sv-reveal{
  opacity:1;
  transform: translateY(0);
  filter: blur(0);
}

/* ============ GRID REASONS ============ */
.sv-grid{display:grid;gap:12px;grid-template-columns:repeat(3,1fr);margin-top:6px;}
@media (max-width:860px){.sv-grid{grid-template-columns:1fr;}}
.sv-pill{
  border:1px solid var(--stroke);
  background:rgba(0,0,0,.22);
  border-radius:18px;
  padding:14px 14px;
  min-height:76px;
}
.sv-pill b{display:block;margin-bottom:6px;}
.sv-pill span{color:var(--muted);}

/* ============ FOOTER + BUTTONS ============ */
.sv-footer{
  margin-top:16px;
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

.sv-btn{
  display:inline-flex;
  gap:10px;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(255,255,255,.18);
  background: linear-gradient(90deg, rgba(255,77,166,.95), rgba(255,122,200,.90));
  color:#140814;
  font-weight:950;

  border-radius:999px;
  padding: 14px 26px;               /* БІЛЬША */
  font-size: clamp(16px, 2vw, 18px);/* БІЛЬША */
  cursor:pointer;

  transition: transform .18s ease, filter .18s ease;
  user-select:none;
  text-decoration:none;

  position:relative;
  overflow:hidden;
  isolation:isolate;
}

/* блиск (шимер-лінія) */
.sv-btn::before{
  content:"";
  position:absolute;
  top:-60%;
  left:-40%;
  width:40%;
  height:220%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  transform: skewX(-20deg) translateX(-160%);
  opacity:.0;
  z-index:0;
}
.sv-btn:hover{transform:scale(1.03);filter:brightness(1.06);}
.sv-btn:hover::before{
  opacity:.75;
  animation: sv-glint .95s ease;
}
.sv-btn:active{transform:scale(.99);}

/* одноразовий “блиск” при появі кроку */
.sv-btn.is-pop::before{
  opacity:.75;
  animation: sv-glint .95s ease;
}
@keyframes sv-glint{
  0%{transform: skewX(-20deg) translateX(-160%);}
  100%{transform: skewX(-20deg) translateX(420%);}
}

.sv-btn--ghost{
  background:rgba(255,255,255,.10);
  color:var(--text);
  border-color:var(--stroke);
}

/* ============ HEARTS ============ */
.sv-heartfield{position:fixed;inset:0;pointer-events:none;z-index:-1;overflow:hidden;}
.sv-heart{
  position:absolute;
  font-size:18px;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.55));
  animation: sv-float linear forwards;
  opacity:0;
}
@keyframes sv-float{
  0%{transform:translateY(20px) scale(.9);opacity:0;}
  12%{opacity:1;}
  100%{transform:translateY(-120vh) scale(1.5);opacity:0;}
}

/* vertical BG tweak */
@media (min-width: 1024px){
  .sv-bg-layer{background-position: 50% 15%;}
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .sv-step,.sv-reveal,.sv-bg-layer,.sv-btn{transition:none !important;}
  .sv-step.is-show .sv-dance{animation:none !important;}
  .sv-btn::before{display:none !important;}
}