@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Dancing+Script:wght@500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&display=swap");

:root {
  --primary:        #ff9ec1;
  --primary-dark:   #ff6b9c;
  --primary-light:  #ffc4d6;
  --accent:         #e879a0;
  --accent2:        #c084fc;
  --glow:           rgba(255,158,193,0.55);
  --glow2:          rgba(192,132,252,0.35);
  --radius-card:    24px;
  --radius-btn:     50px;
  --radius-sm:      12px;
  --transition:     0.38s cubic-bezier(0.4,0,0.2,1);
}

[data-theme="dark"] {
  --bg:           #07070d;
  --bg-solid:     #07070d;
  --bg-gradient:  linear-gradient(145deg, #07070d 0%, #150a14 45%, #0c0715 100%);
  --card-bg:      rgba(255,255,255,0.04);
  --card-border:  rgba(255,158,193,0.18);
  --glass-bg:     rgba(255,255,255,0.06);
  --glass-border: rgba(255,255,255,0.1);
  --text:         #f8f0f4;
  --text-muted:   rgba(255,178,210,0.82);
  --text-dim:     rgba(255,255,255,0.38);
  --shadow:       rgba(255,105,180,0.14);
  --orb1:         rgba(255,100,170,0.28);
  --orb2:         rgba(147,51,234,0.22);
  --orb3:         rgba(236,72,153,0.2);
  --orb4:         rgba(192,132,252,0.18);
  --surface:      rgba(20,8,20,0.65);
}

*, *::before, *::after {
  margin: 0; padding: 0; box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  background: var(--bg-solid);
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-y: scroll;
  width: 100%; height: 100%;
  font-size: 16px;
}

body {
  font-family: "Inter", system-ui, sans-serif;
  background: var(--bg-gradient);
  background-attachment: fixed;
  color: var(--text);
  line-height: 1.65;
  min-height: 100%;
  width: 100%; max-width: 100vw;
  overflow-x: hidden;
  overflow-y: visible;
  position: relative;
  transition: background 0.5s ease, color 0.5s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (pointer: coarse) {
  html { touch-action: pan-y; overscroll-behavior: none; }
  body { touch-action: pan-y; overscroll-behavior-y: contain; }
}

a { text-decoration: none; color: inherit; }

.bg-canvas {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0; overflow: hidden;
}

.orb {
  position: absolute; border-radius: 50%;
  filter: blur(90px);
}

.orb-1 {
  width: clamp(320px,55vw,650px); height: clamp(320px,55vw,650px);
  background: var(--orb1); top: -12%; left: -12%;
  animation: driftOrb1 44s ease-in-out infinite;
}
.orb-2 {
  width: clamp(260px,48vw,540px); height: clamp(260px,48vw,540px);
  background: var(--orb2); bottom: -12%; right: -12%;
  animation: driftOrb2 52s ease-in-out infinite;
}
.orb-3 {
  width: clamp(200px,38vw,420px); height: clamp(200px,38vw,420px);
  background: var(--orb3); top: 50%; left: 48%;
  transform: translate(-50%,-50%);
  animation: driftOrb3 38s ease-in-out infinite;
  animation-delay: -6s;
}
.orb-4 {
  width: clamp(180px,30vw,360px); height: clamp(180px,30vw,360px);
  background: var(--orb4); top: 30%; right: 5%;
  animation: driftOrb1 48s ease-in-out infinite reverse;
  animation-delay: -10s;
}

@keyframes driftOrb1 {
  0%,100% { transform: translate(0,0) scale(1); opacity:.7; }
  33%      { transform: translate(30px,-28px) scale(1.06); opacity:.85; }
  66%      { transform: translate(-22px,20px) scale(.95); opacity:.58; }
}
@keyframes driftOrb2 {
  0%,100% { transform: translate(0,0) scale(1); opacity:.55; }
  40%      { transform: translate(-28px,22px) scale(1.08); opacity:.72; }
  70%      { transform: translate(18px,-18px) scale(.92); opacity:.45; }
}
@keyframes driftOrb3 {
  0%,100% { transform: translate(-50%,-50%) scale(1); opacity:.5; }
  25%      { transform: translate(-48%,-53%) scale(1.05); opacity:.65; }
  75%      { transform: translate(-52%,-48%) scale(.94); opacity:.42; }
}

.sparkle-layer {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0; overflow: hidden;
}

.sparkle {
  position: absolute;
  width: var(--size, 3px); height: var(--size, 3px);
  border-radius: 50%;
  background: var(--color, var(--primary));
  box-shadow: 0 0 4px 1px var(--color, var(--glow));
  animation: sparkleFade var(--dur,4s) ease-in-out infinite var(--delay,0s);
  opacity: 0;
}

@keyframes sparkleFade {
  0%,100% { opacity:0; transform: scale(0.3) rotate(0deg); }
  50%      { opacity:0.45; transform: scale(1.1) rotate(90deg); }
}

.cursor-trail {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  opacity: 0.85;
  box-shadow: 0 0 8px 2px currentColor;
  animation: trailFade 0.7s ease-out forwards;
}
@keyframes trailFade {
  0%   { opacity:.85; transform: translate(-50%,-50%) scale(1); }
  100% { opacity:0; transform: translate(-50%,-50%) scale(0.2); }
}

.main-content {
  position: relative; z-index: 1;
  width: 100%; min-height: 100vh;
  display: flex; flex-direction: column;
}

header {
  position: fixed; top: 14px; left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  width: calc(100% - 28px); max-width: 1120px;
  background: var(--glass-bg);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-radius: 16px;
  border: 1px solid var(--glass-border);
  box-shadow:
    0 8px 32px rgba(0,0,0,0.12),
    inset 0 1px 0 rgba(255,255,255,0.1),
    inset 0 -1px 0 rgba(255,255,255,0.04);
  transition: box-shadow var(--transition), border-color var(--transition);
}
header::before {
  content:""; position:absolute; inset:0; border-radius:16px;
  background: linear-gradient(135deg, rgba(255,158,193,0.06) 0%, transparent 60%);
  pointer-events:none;
}
/* shimmer sweep on hover */
header::after {
  content:""; position:absolute; inset:0; border-radius:16px;
  background: linear-gradient(110deg,
    transparent 20%, rgba(255,255,255,0.06) 50%, transparent 80%);
  transform: translateX(-100%);
  transition: transform 0.7s ease;
  pointer-events:none;
}
header:hover::after { transform: translateX(100%); }
header:hover {
  border-color: rgba(255,158,193,0.3);
  box-shadow:
    0 10px 40px rgba(0,0,0,0.16),
    0 0 40px var(--glow),
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(255,255,255,0.06);
}

.nav-container {
  padding: .9rem 1.5rem;
  display: flex; justify-content: space-between; align-items: center;
  gap: .5rem; width: 100%; min-width: 0;
}

.logo {
  font-family: "Dancing Script", cursive; font-size: 1.85rem; font-weight: 700;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 55%, #fff 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter: drop-shadow(0 0 20px var(--glow));
  white-space: nowrap; flex-shrink: 0; letter-spacing: -.3px;
}

nav { flex:1; min-width:0; display:flex; justify-content:center; overflow:hidden; }
nav ul { display:flex; gap:.3rem; list-style:none; }
nav a {
  font-weight:500; font-size:.875rem; color:var(--text);
  padding:.48rem .9rem; border-radius:10px;
  position:relative; white-space:nowrap;
  transition: color .25s ease, text-shadow .25s ease;
  letter-spacing:.01em;
}
nav a::before {
  content:""; position:absolute; inset:0;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-radius:10px; opacity:0; transition:opacity .25s ease; z-index:-1;
}
nav a:hover::before, nav a.active::before { opacity:.16; }
nav a:hover, nav a.active { color:var(--primary); text-shadow:0 0 20px var(--glow); }

.nav-icons {
  display:flex; gap:.5rem; align-items:center;
  flex-shrink:0; min-width:0; overflow:visible; padding-right:10px;
}
.nav-icon-btn {
  background:none; border:none; color:var(--text); opacity:.72;
  cursor:pointer; font-size:1.05rem;
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:10px;
  transition: opacity .25s ease, color .25s ease, transform .25s ease, background .25s ease;
}
.nav-icon-btn:hover {
  opacity:1; color:var(--primary);
  background:rgba(255,158,193,0.1);
  filter:drop-shadow(0 0 8px var(--glow));
  transform:scale(1.08);
}

.cart-wrapper {
  position:relative; display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; overflow:visible;
}
.cart-count {
  position:absolute; top:-6px; right:-8px;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#fff; font-size:.6rem; font-weight:700;
  min-width:16px; height:16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 10px var(--glow); border:1px solid rgba(255,255,255,0.2);
}

.hero {
  min-height:100vh; min-height:100dvh;
  display:flex; align-items:center; justify-content:center;
  text-align:center; position:relative; z-index:1;
  padding:120px 1.5rem 4rem; width:100%;
}
.hero::before {
  content:""; position:absolute;
  width:clamp(300px,75vw,550px); height:clamp(300px,75vw,550px);
  background:radial-gradient(circle, var(--orb1) 0%, transparent 68%);
  top:25%; left:50%; transform:translateX(-50%);
  animation:heroPulse 8s ease-in-out infinite;
  z-index:-1; pointer-events:none;
}
@keyframes heroPulse {
  0%,100% { transform:translateX(-50%) scale(1); opacity:.4; }
  50%      { transform:translateX(-50%) scale(1.18); opacity:.72; }
}
.hero-content { max-width:800px; width:100%; margin:0 auto; }

.hero-badge {
  display:inline-flex; align-items:center; gap:.45rem;
  background:rgba(255,158,193,0.12); border:1px solid rgba(255,158,193,0.28);
  backdrop-filter:blur(12px); border-radius:50px;
  padding:.42rem 1.1rem; font-size:.78rem; font-weight:600;
  color:var(--primary); letter-spacing:.08em; text-transform:uppercase;
  margin-bottom:1.8rem;
  animation:badgePop .6s cubic-bezier(.4,0,.2,1) both;
}
.hero-badge .dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--primary); box-shadow:0 0 8px var(--glow);
  animation:pulseDot 2s ease-in-out infinite;
}
@keyframes badgePop {
  from { opacity:0; transform:translateY(12px) scale(.9); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes pulseDot {
  0%,100% { transform:scale(1); opacity:1; }
  50%      { transform:scale(1.4); opacity:.7; }
}

.hero-logo {
  display:block;
  width:clamp(160px,38vw,260px); height:auto;
  margin:0 auto 1.6rem;
  filter:drop-shadow(0 12px 40px rgba(255,158,193,0.35));
  animation:logoFloat 5s ease-in-out infinite; border-radius:50%;
}
@keyframes logoFloat {
  0%,100% { transform:translateY(0) rotate(0deg); }
  50%      { transform:translateY(-12px) rotate(1deg); }
}

.hero h1 {
  font-family:"Dancing Script",cursive;
  font-size:clamp(3.4rem,10vw,7rem); line-height:1.02; margin-bottom:1.5rem;
  background:linear-gradient(140deg,var(--primary) 0%,#fff 48%,var(--primary-light) 80%,var(--accent2) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  filter:drop-shadow(0 0 40px var(--glow));
  animation:titleGlow 4s ease-in-out infinite;
}
@keyframes titleGlow {
  0%,100% { filter:drop-shadow(0 0 40px var(--glow)); }
  50%      { filter:drop-shadow(0 0 65px var(--glow)) brightness(1.1); }
}

.hero p {
  font-size:clamp(.95rem,2.5vw,1.22rem); max-width:540px;
  margin:0 auto 2.4rem; color:var(--text-muted); line-height:1.78; font-weight:400;
}

.hero-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.95rem 2.5rem;
  background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);
  color:#fff; font-weight:700; border-radius:var(--radius-btn);
  text-transform:uppercase; letter-spacing:1.8px; font-size:.8rem;
  position:relative; overflow:hidden; border:none; cursor:pointer;
  box-shadow:0 10px 40px rgba(255,105,180,0.4),inset 0 1px 0 rgba(255,255,255,0.28);
  transition:transform var(--transition),box-shadow var(--transition);
}
.btn::before {
  content:""; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);
  transition:left .5s ease;
}
.btn:hover::before { left:100%; }
.btn:hover { transform:translateY(-5px) scale(1.02); box-shadow:0 20px 60px rgba(255,105,180,0.52),0 0 40px var(--glow),inset 0 1px 0 rgba(255,255,255,0.38); }
.btn:active { transform:translateY(-2px) scale(1); }

.btn-outline {
  background:transparent; border:1.5px solid rgba(255,158,193,0.4);
  color:var(--primary); backdrop-filter:blur(8px);
  box-shadow:0 4px 20px rgba(255,105,180,0.12);
}
.btn-outline::before { background:linear-gradient(90deg,transparent,rgba(255,158,193,0.15),transparent); }
.btn-outline:hover { background:rgba(255,158,193,0.1); border-color:rgba(255,158,193,0.65); box-shadow:0 10px 35px rgba(255,105,180,0.28),0 0 25px var(--glow); }

.section {
  padding:5rem 1.5rem; max-width:1120px; margin:0 auto;
  position:relative; z-index:1; width:100%;
}
.section-label {
  text-align:center; font-size:.75rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--primary);
  margin-bottom:.65rem;
  display:flex; align-items:center; justify-content:center; gap:.65rem;
}
.section-label::before, .section-label::after {
  content:""; flex:1; max-width:60px; height:1px;
  background:linear-gradient(90deg,transparent,var(--primary));
}
.section-label::after { background:linear-gradient(90deg,var(--primary),transparent); }

.section-title {
  text-align:center; font-family:"Playfair Display",serif;
  font-size:clamp(1.9rem,4.5vw,2.9rem); font-weight:700; margin-bottom:.8rem;
  background:linear-gradient(140deg,var(--primary) 0%,var(--text) 60%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  position:relative; line-height:1.2;
}
.section-subtitle {
  text-align:center; font-size:.98rem; color:var(--text-muted);
  max-width:480px; margin:0 auto 3.5rem; line-height:1.72;
}
.section-divider {
  width:80px; height:2px;
  background:linear-gradient(90deg,transparent,var(--primary),transparent);
  margin:1rem auto 2.8rem; border-radius:2px;
}

.info-band {
  display:grid; grid-template-columns:repeat(2,minmax(0,420px));
  gap:1.2rem; padding:0 1.5rem 4rem;
  max-width:900px; margin:0 auto;
  justify-content:center; position:relative; z-index:1;
}
.info-tile {
  background:var(--glass-bg);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-card); padding:1.8rem 1.4rem;
  text-align:center; position:relative; overflow:hidden;
  transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
}
.info-tile::before {
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,158,193,0.07) 0%,transparent 55%);
  pointer-events:none; border-radius:var(--radius-card);
}
/* shimmer sweep */
.info-tile::after {
  content:""; position:absolute; inset:0; border-radius:var(--radius-card);
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,0.07) 50%,transparent 80%);
  transform:translateX(-100%); transition:transform .65s ease;
  pointer-events:none;
}
.info-tile:hover::after { transform:translateX(100%); }
.info-tile:hover {
  transform:translateY(-6px); border-color:rgba(255,158,193,0.32);
  box-shadow:0 20px 50px rgba(0,0,0,0.1),0 0 30px var(--glow);
}
.info-tile-icon {
  font-size:1.8rem; margin-bottom:.75rem; display:block;
  background:linear-gradient(135deg,var(--primary),var(--accent2));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  filter:drop-shadow(0 0 12px var(--glow));
}
.info-tile h3 { font-size:.92rem; font-weight:700; margin-bottom:.3rem; color:var(--text); letter-spacing:.02em; }
.info-tile p  { font-size:.78rem; color:var(--text-muted); line-height:1.5; }

.products-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:2.2rem; max-width:980px; margin:0 auto;
}

.product-card {
  background:var(--card-bg);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  border-radius:var(--radius-card); overflow:hidden;
  border:1px solid var(--card-border);
  box-shadow:
    0 20px 60px rgba(0,0,0,0.1),
    inset 0 1px 0 rgba(255,255,255,0.09),
    inset 0 -1px 0 rgba(255,255,255,0.03);
  transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
  position:relative; width:100%;
}
/* top highlight line */
.product-card::after {
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.25),rgba(255,158,193,0.4),rgba(255,255,255,0.25),transparent);
  border-radius:var(--radius-card) var(--radius-card) 0 0;
  z-index:2; pointer-events:none;
}
/* shimmer sweep on hover */
.product-card::before {
  content:""; position:absolute; inset:0;
  background:linear-gradient(110deg,
    rgba(255,255,255,0.08) 0%,
    rgba(255,158,193,0.06) 25%,
    transparent 55%,
    rgba(192,132,252,0.04) 80%,
    transparent 100%);
  border-radius:var(--radius-card);
  opacity:0; transition:opacity var(--transition); z-index:1; pointer-events:none;
}
.product-card:hover::before { opacity:1; }
.product-card:hover {
  transform:translateY(-14px) scale(1.012);
  border-color:rgba(255,158,193,0.4);
  box-shadow:
    0 40px 80px rgba(0,0,0,0.18),
    0 0 60px var(--glow),
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -1px 0 rgba(255,255,255,0.06);
}

.product-card.featured-card {
  border:1.5px solid rgba(255,158,193,0.5);
  background:linear-gradient(160deg,rgba(255,158,193,0.08) 0%,var(--card-bg) 40%);
}

/* animated glow ring on featured card */
.product-card.featured-card::after {
  animation:glowRing 3s ease-in-out infinite;
}
@keyframes glowRing {
  0%,100% { opacity:.6; }
  50%      { opacity:1; filter:brightness(1.4); }
}

.card-ribbon {
  position:absolute; top:18px; right:-2px;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#fff; padding:.38rem 1rem .38rem .85rem;
  font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em;
  z-index:10; display:flex; align-items:center; gap:.38rem;
  border-radius:4px 0 0 4px;
  box-shadow:0 4px 18px rgba(255,105,180,0.45);
}
.card-ribbon::after {
  content:""; position:absolute; bottom:-6px; right:0;
  border-style:solid; border-width:0 6px 6px 0;
  border-color:transparent var(--primary-dark) transparent transparent;
}

.product-img {
  width:100%; aspect-ratio:4/3; overflow:hidden; position:relative;
  background:linear-gradient(135deg,rgba(255,182,193,0.07),rgba(147,51,234,0.04));
}
.product-img::after {
  content:""; position:absolute; bottom:0; left:0; right:0; height:90px;
  background:linear-gradient(transparent,rgba(7,7,13,0.8));
  pointer-events:none; z-index:2;
}
.product-img img {
  width:100%; height:100%; object-fit:cover; object-position:center;
  transition:transform 0.8s cubic-bezier(.4,0,.2,1);
}
.product-card:hover .product-img img { transform:scale(1.07); }

.product-info { padding:1.8rem; text-align:center; position:relative; z-index:2; }

.product-tag {
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:.68rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--primary); background:rgba(255,158,193,0.12);
  border:1px solid rgba(255,158,193,0.24); border-radius:50px;
  padding:.28rem .75rem; margin-bottom:.8rem;
}
.product-title {
  font-family:"Playfair Display",serif;
  font-size:clamp(1.3rem,3.5vw,1.65rem); font-weight:700; margin-bottom:.6rem;
  background:linear-gradient(135deg,var(--primary),var(--primary-light) 70%,#fff);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  line-height:1.2;
}
.product-desc { font-size:.875rem; color:var(--text-muted); margin-bottom:1.6rem; line-height:1.7; }

.video-notice {
  background:linear-gradient(135deg,rgba(255,158,193,0.14),rgba(255,107,156,0.08));
  border:1px solid rgba(255,158,193,0.28); border-radius:var(--radius-sm);
  padding:.85rem 1rem; margin-bottom:1.3rem; font-size:.78rem; color:var(--primary);
  display:flex; align-items:center; gap:.55rem; text-align:left;
}
.video-notice i { font-size:1rem; flex-shrink:0; }

/* ── Tier buttons ── */
.tier-buttons { display:flex; flex-direction:column; gap:.5rem; width:100%; }

.tier-btn {
  background:rgba(15,5,15,0.75);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  color:var(--text); padding:.88rem 1.1rem;
  border-radius:var(--radius-sm); font-weight:600; cursor:pointer;
  border:1px solid rgba(255,158,193,0.2); font-size:.85rem;
  position:relative; overflow:hidden;
  transition:color .28s ease, border-color .28s ease, transform .28s ease, box-shadow .28s ease, background .28s ease;
  letter-spacing:.01em;
  display:flex; align-items:center; justify-content:space-between; width:100%;
}
.tier-btn .tier-label { font-weight:600; }
.tier-btn .tier-price { font-weight:700; color:var(--primary); font-size:.92rem; }
.tier-btn::before {
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  opacity:0; transition:opacity .28s ease; z-index:-1;
}
.tier-btn:hover::before, .tier-btn:active::before { opacity:1; }
.tier-btn:hover, .tier-btn:active {
  color:#fff; border-color:transparent; transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(255,105,180,0.42),0 0 24px var(--glow);
}
.tier-btn:active { transform:translateY(0) scale(.98); }
.tier-btn:hover .tier-price, .tier-btn:active .tier-price { color:rgba(255,255,255,0.92); }

.stats-bar {
  display:flex; justify-content:center; gap:3rem;
  padding:3.5rem 1.5rem; position:relative; z-index:1;
  max-width:1120px; margin:0 auto;
}
.stat-item { text-align:center; }
.stat-number {
  font-family:"Playfair Display",serif;
  font-size:clamp(2.2rem,5vw,3.2rem); font-weight:700;
  background:linear-gradient(135deg,var(--primary),var(--accent2));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  line-height:1; display:block; margin-bottom:.3rem;
}
.stat-label { font-size:.82rem; color:var(--text-muted); font-weight:500; letter-spacing:.04em; }

#contact {
  padding:5rem 1.5rem; text-align:center;
  position:relative; z-index:1; width:100%;
}
#contact::before {
  content:""; position:absolute;
  width:clamp(250px,55vw,380px); height:clamp(250px,55vw,380px);
  background:radial-gradient(circle,var(--orb2) 0%,transparent 68%);
  top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:-1; pointer-events:none;
}
.contact-inner { max-width:600px; margin:0 auto; }
#contact p { font-size:clamp(.95rem,2.2vw,1.08rem); color:var(--text-muted); margin-bottom:2.4rem; line-height:1.75; }

.contact-card {
  background:var(--glass-bg);
  backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid var(--glass-border); border-radius:var(--radius-card);
  padding:2.2rem; position:relative; overflow:hidden;
}
.contact-card::before {
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,158,193,0.08) 0%,transparent 55%);
  pointer-events:none; border-radius:var(--radius-card);
}
.contact-card::after {
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,158,193,0.5),transparent);
  border-radius:var(--radius-card) var(--radius-card) 0 0;
}

.social-links { display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; }
.social-link {
  display:flex; align-items:center; gap:.55rem;
  padding:.75rem 1.4rem; border-radius:50px;
  background:var(--glass-bg); border:1px solid var(--glass-border);
  font-size:.85rem; font-weight:600; color:var(--text-muted);
  transition:color var(--transition),border-color var(--transition),
    transform var(--transition),box-shadow var(--transition),background var(--transition);
}
.social-link i { font-size:1.15rem; }
.social-link:hover {
  color:var(--primary); border-color:rgba(255,158,193,0.45);
  transform:translateY(-3px) scale(1.04); box-shadow:0 10px 28px var(--glow);
  background:rgba(255,158,193,0.1);
}

.footer {
  background:var(--glass-bg);
  backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%);
  padding:2.8rem 1.5rem; border-top:1px solid var(--glass-border);
  position:relative; z-index:1; width:100%; margin-top:auto;
}
.footer::before {
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--primary),transparent);
}
.footer-inner {
  max-width:1120px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center; gap:1.4rem;
}
.footer-logo {
  font-family:"Dancing Script",cursive; font-size:1.6rem; font-weight:700;
  background:linear-gradient(135deg,var(--primary),var(--primary-light));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  filter:drop-shadow(0 0 16px var(--glow));
}
.footer-nav { display:flex; gap:2rem; list-style:none; }
.footer-nav a { font-size:.82rem; color:var(--text-dim); font-weight:500; transition:color .25s ease; }
.footer-nav a:hover { color:var(--primary); }
.social-footer { display:flex; justify-content:center; gap:1rem; }
.social-footer a {
  font-size:1.4rem; color:var(--text-muted);
  display:flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:14px;
  background:var(--glass-bg); border:1px solid var(--glass-border);
  transition:color var(--transition),transform var(--transition),box-shadow var(--transition),border-color var(--transition);
}
.social-footer a:hover { color:var(--primary); transform:translateY(-4px) scale(1.08); box-shadow:0 10px 28px var(--glow); border-color:rgba(255,158,193,0.45); }
.footer-copy { font-size:.75rem; color:var(--text-dim); }

.cart-modal {
  display:flex; /* always flex, visibility via opacity/pointer-events */
  position:fixed; inset:0;
  background:rgba(0,0,0,0.72);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  z-index:2000;
  align-items:center; justify-content:center;
  padding:1rem;
  opacity:0; pointer-events:none;
  transition:opacity .3s ease;
}
.cart-modal.open {
  opacity:1; pointer-events:all;
}
.cart-modal.open .cart-content {
  transform:translateY(0) scale(1); opacity:1;
}

.cart-content {
  background:var(--bg-solid);
  backdrop-filter:blur(30px); -webkit-backdrop-filter:blur(30px);
  border-radius:var(--radius-card);
  max-width:520px; width:100%;
  max-height:84vh; max-height:84dvh;
  overflow-y:auto; overflow-x:hidden;
  border:1px solid var(--card-border);
  box-shadow:
    0 30px 80px rgba(0,0,0,0.32),
    0 0 60px var(--glow),
    inset 0 1px 0 rgba(255,255,255,0.09);
  -webkit-overflow-scrolling:touch;
  transform:translateY(24px) scale(.97);
  opacity:0;
  transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .35s ease;
  /* pulsing border glow on open */
  position:relative;
}
.cart-modal.open .cart-content {
  animation:cartGlow 3s ease-in-out infinite;
}
@keyframes cartGlow {
  0%,100% { box-shadow:0 30px 80px rgba(0,0,0,0.32),0 0 40px var(--glow),inset 0 1px 0 rgba(255,255,255,0.09); }
  50%      { box-shadow:0 30px 80px rgba(0,0,0,0.32),0 0 80px var(--glow),inset 0 1px 0 rgba(255,255,255,0.16); }
}

.cart-header {
  padding:1.5rem 1.6rem; border-bottom:1px solid var(--glass-border);
  display:flex; justify-content:space-between; align-items:center;
  position:sticky; top:0; background:var(--bg-solid); z-index:5;
}
.cart-header h2 {
  font-family:"Playfair Display",serif; font-size:1.45rem;
  background:linear-gradient(135deg,var(--primary),var(--text));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.close-cart {
  font-size:1.6rem; cursor:pointer; color:var(--text-muted);
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--glass-bg); border:1px solid var(--glass-border);
  transition:color .25s ease,transform .25s ease,background .25s ease; line-height:1;
}
.close-cart:hover { color:var(--primary); transform:rotate(90deg); background:rgba(255,158,193,0.12); }

.cart-items { padding:1.2rem 1.6rem; }
.cart-item {
  display:flex; align-items:center; padding:1rem 1.1rem;
  border-radius:var(--radius-sm); background:var(--glass-bg);
  margin-bottom:.7rem; border:1px solid var(--glass-border);
  transition:border-color .25s ease;
}
.cart-item:hover { border-color:rgba(255,158,193,0.3); }
.cart-item-info { flex:1; min-width:0; }
.cart-item-title { font-weight:600; margin-bottom:.18rem; font-size:.9rem; }
.cart-item-price { color:var(--primary); font-weight:700; font-size:.85rem; }

.remove-item {
  background:rgba(255,158,193,0.10); border:1px solid rgba(255,158,193,0.22);
  color:var(--text-muted); cursor:pointer; font-size:1rem;
  padding:.3rem .5rem; border-radius:8px;
  transition:all .22s ease;
}
.remove-item:hover { color:var(--primary); background:rgba(255,158,193,0.2); }

.cart-total {
  padding:1.2rem 1.6rem; font-size:1.15rem; font-weight:700;
  border-top:1px solid var(--glass-border);
  display:flex; justify-content:space-between; align-items:center;
}
.cart-total span:last-child {
  background:linear-gradient(135deg,var(--primary),var(--accent2));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  font-size:1.25rem;
}
.cart-actions { padding:1.2rem 1.6rem; display:flex; gap:.75rem; }

.btn-checkout, .btn-clear {
  flex:1; padding:.9rem; border-radius:var(--radius-sm);
  font-weight:700; cursor:pointer; border:none; font-size:.9rem;
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease,color .28s ease;
  letter-spacing:.02em;
}
.btn-checkout {
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#fff; box-shadow:0 8px 30px rgba(255,105,180,0.32);
}
.btn-checkout:hover { transform:translateY(-2px); box-shadow:0 14px 40px rgba(255,105,180,0.5); }
.btn-clear {
  background:var(--glass-bg); border:1px solid var(--glass-border); color:var(--text);
}
.btn-clear:hover { border-color:rgba(255,158,193,0.45); color:var(--primary); }

.toast {
  position:fixed; bottom:24px; left:50%;
  transform:translateX(-50%) translateY(120px);
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#fff; padding:1rem 2.2rem; border-radius:50px;
  font-weight:700; font-size:.88rem; z-index:3000;
  opacity:0;
  transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .35s ease;
  box-shadow:0 10px 35px rgba(255,105,180,0.45),0 0 24px var(--glow);
  display:flex; align-items:center; gap:.55rem;
  white-space:nowrap; pointer-events:none;
}
.toast.show { transform:translateX(-50%) translateY(0); opacity:1; }

.reveal {
  opacity:0; transform:translateY(18px);
  transition:opacity 1.1s ease,transform 1.1s ease;
}
.reveal.visible { opacity:1; transform:translateY(0); }

@media (max-width:900px) {
  .info-band { grid-template-columns:repeat(2,minmax(0,420px)); gap:.9rem; }
}

@media (max-width:768px) {
  header { top:10px; width:calc(100% - 20px); border-radius:14px; }
  .nav-container { padding:.7rem .9rem; gap:.4rem; }
  .logo { font-size:1.35rem; flex-shrink:0; }
  nav ul { gap:.05rem; }
  nav a { padding:.38rem .55rem; font-size:.78rem; }
  .nav-icon-btn { width:30px; height:30px; font-size:.9rem; }
  .nav-icons { gap:.3rem; }
  .hero { padding:100px 1.2rem 3rem; }
  .products-grid { grid-template-columns:1fr; max-width:440px; }
  .info-band { grid-template-columns:1fr; max-width:440px; }
  .stats-bar { gap:2rem; }
  .section { padding:4rem 1.1rem; }
  .social-footer a { width:44px; height:44px; }
}

@media (max-width:480px) {
  header { top:8px; width:calc(100% - 16px); border-radius:12px; }
  .nav-container { padding:.55rem .7rem; gap:.3rem; }
  .logo { font-size:1.15rem; flex-shrink:0; }
  nav { flex:1; min-width:0; overflow:hidden; }
  nav ul { gap:0; flex-wrap:nowrap; }
  nav a { padding:.32rem .42rem; font-size:.72rem; white-space:nowrap; }
  .nav-icons { gap:.2rem; flex-shrink:0; }
  .nav-icon-btn { width:28px; height:28px; font-size:.85rem; }
  .hero { padding:90px 1rem 2.5rem; }
  .hero h1 { font-size:2.8rem; }
  .hero-logo { width:clamp(120px,30vw,180px); }
  .btn { padding:.85rem 1.9rem; font-size:.76rem; }
  .section { padding:3.5rem 1rem; }
  .product-info { padding:1.4rem; }
  .tier-btn { padding:.78rem .85rem; font-size:.8rem; }
  .stats-bar { flex-direction:row; flex-wrap:wrap; gap:1.8rem; }
  .footer-nav { gap:1.3rem; }
  .contact-card { padding:1.6rem; }
  .social-link { padding:.65rem 1.1rem; font-size:.8rem; }
}

@media (max-width:360px) {
  .nav-container { padding:.5rem .5rem; gap:.2rem; }
  .logo { font-size:.95rem; }
  nav a { padding:.28rem .32rem; font-size:.63rem; }
  .nav-icon-btn { width:26px; height:26px; font-size:.78rem; }
  .nav-icons { gap:.15rem; }
  .hero h1 { font-size:2.2rem; }
  .stats-bar { gap:1.4rem; }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}