/* ============================================================================
   ZIVOGIFT — STUDENT VIBES LAYER
   Gen-Z energy on top of the base design system
   Signature: floating currency note particles + neon glow on key CTAs
   ============================================================================ */

/* ── IMPORTS ── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap');

/* ── ROOT ADDITIONS ── */
:root {
  --neon-coral: #FF4D2E;
  --neon-gold: #F5C842;
  --neon-green: #39FF14;
  --purple-pop: #A855F7;
  --pink-pop: #EC4899;
  --glow-coral: 0 0 20px rgba(255,77,46,.5), 0 0 40px rgba(255,77,46,.25);
  --glow-gold: 0 0 20px rgba(245,200,66,.5), 0 0 40px rgba(245,200,66,.2);
  --glow-purple: 0 0 20px rgba(168,85,247,.4);
}

/* ── GRADIENT BLOB BACKGROUND ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 700px 500px at 85% 10%, rgba(168,85,247,.06) 0%, transparent 70%),
    radial-gradient(ellipse 600px 400px at 5% 40%, rgba(255,77,46,.05) 0%, transparent 70%),
    radial-gradient(ellipse 800px 600px at 50% 90%, rgba(245,200,66,.04) 0%, transparent 70%);
  animation: blobShift 20s ease-in-out infinite alternate;
}
@keyframes blobShift {
  0%  { opacity: .6; }
  50% { opacity: 1; }
  100%{ opacity: .7; }
}

/* ── FLOATING PARTICLES CANVAS ── */
#particles-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .35;
}

/* ── VIBE BADGE (top of page) ── */
.vibe-badge {
  position: fixed;
  top: 76px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, var(--purple-pop), var(--pink-pop));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: 50px;
  z-index: 999;
  animation: badgePop .6s cubic-bezier(.34,1.56,.64,1) forwards;
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(168,85,247,.4);
}
@keyframes badgePop {
  from { opacity:0; transform: translateX(-50%) scale(.6); }
  to   { opacity:1; transform: translateX(-50%) scale(1); }
}

/* ── HERO UPGRADES ── */
#hero {
  position: relative;
  overflow: hidden;
}
/* animated gradient border on serial demo */
.serial-demo {
  position: relative;
  background: transparent;
  border: none;
  padding: 2px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(212,160,23,.4), rgba(168,85,247,.4), rgba(255,77,46,.4));
  animation: borderGlow 4s ease-in-out infinite alternate;
}
.serial-demo-inner {
  background: #1a1814;
  border-radius: 16px;
  padding: 20px 26px;
}
@keyframes borderGlow {
  0%  { background: linear-gradient(135deg, rgba(212,160,23,.5), rgba(168,85,247,.3)); }
  50% { background: linear-gradient(135deg, rgba(168,85,247,.5), rgba(255,77,46,.4)); }
  100%{ background: linear-gradient(135deg, rgba(255,77,46,.4), rgba(212,160,23,.5)); }
}

/* glowing CTA buttons */
.btn-coral {
  box-shadow: var(--glow-coral);
  transition: transform .15s, box-shadow .3s !important;
  animation: pulseGlow 3s ease-in-out infinite;
}
.btn-coral:hover {
  box-shadow: 0 0 30px rgba(255,77,46,.7), 0 0 60px rgba(255,77,46,.35) !important;
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 18px rgba(255,77,46,.4); }
  50%       { box-shadow: 0 0 32px rgba(255,77,46,.65), 0 0 50px rgba(255,77,46,.2); }
}

/* hero eyebrow upgrades */
.hero-eyebrow {
  display: inline-block;
  background: linear-gradient(90deg, var(--gold-light), var(--pink-pop));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 23px;
}

/* hero headline neon shimmer */
.hero-headline {
  text-shadow: 0 0 60px rgba(245,200,66,.08);
}
.hero-headline .gold {
  text-shadow: 0 0 30px rgba(245,200,66,.4);
  animation: goldShimmer 3s ease-in-out infinite;
}
.hero-headline .accent {
  text-shadow: var(--glow-coral);
}
@keyframes goldShimmer {
  0%, 100% { text-shadow: 0 0 20px rgba(245,200,66,.4); }
  50%       { text-shadow: 0 0 40px rgba(245,200,66,.7), 0 0 80px rgba(245,200,66,.2); }
}

/* ── TICKER UPGRADE ── */
#ticker {
  background: linear-gradient(90deg, var(--purple-pop), var(--pink-pop), var(--coral), var(--gold-light), var(--purple-pop));
  background-size: 300% 100%;
  animation: tickerGradient 8s linear infinite;
}
@keyframes tickerGradient {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* ── SECTION UPGRADES ── */
/* section labels get a left accent line */
.section-label {
  position: relative;
  padding-left: 14px;
}
.section-label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(to bottom, var(--coral), var(--purple-pop));
}

/* ── HOW IT WORKS — STEP CARDS WITH NUMBER GLOW ── */
.step-card {
  position: relative;
  overflow: hidden;
}
.step-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(168,85,247,.04), transparent);
  opacity: 0;
  transition: opacity .3s;
}
.step-card:hover::before { opacity: 1; }
.step-num {
  background: linear-gradient(90deg, var(--gold-light), var(--purple-pop));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 14px;
  font-weight: 700;
}
.step-icon {
  font-size: 40px;
  filter: drop-shadow(0 0 10px rgba(245,200,66,.3));
  transition: filter .3s, transform .3s;
}
.step-card:hover .step-icon {
  filter: drop-shadow(0 0 16px rgba(245,200,66,.6));
  transform: scale(1.15) rotate(-5deg);
}

/* ── DENOM CARDS — NEON CURRENCY FEEL ── */
.denom-card {
  position: relative;
  overflow: hidden;
  transition: all .3s !important;
}
.denom-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(245,200,66,.0), rgba(168,85,247,.0));
  transition: background .3s;
}
.denom-card:hover {
  transform: translateY(-6px) scale(1.02) !important;
  border-color: var(--neon-gold) !important;
  box-shadow: 0 8px 32px rgba(245,200,66,.2), var(--glow-gold);
}
.denom-face {
  font-size: 40px;
  text-shadow: 0 0 20px rgba(245,200,66,.4);
  transition: text-shadow .3s;
}
.denom-card:hover .denom-face {
  text-shadow: 0 0 30px rgba(245,200,66,.7);
}

/* ── NOTE INTRO BOX ── */
.note-intro {
  position: relative;
  overflow: hidden;
}
.note-intro::before {
  content: '₹';
  position: absolute;
  right: -10px;
  top: -20px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 160px;
  color: rgba(212,160,23,.05);
  pointer-events: none;
  line-height: 1;
}

/* ── BUNDLE CARDS ── */
.bundle-card {
  transition: all .3s !important;
}
.bundle-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 12px 40px rgba(212,160,23,.25) !important;
}

/* ── PRODUCT CARDS — GLOWING FEATURED ── */
.product-card.featured {
  box-shadow: 0 0 0 1.5px var(--gold), var(--glow-gold) !important;
  animation: featuredPulse 4s ease-in-out infinite;
}
@keyframes featuredPulse {
  0%, 100% { box-shadow: 0 0 0 1.5px var(--gold), 0 0 20px rgba(245,200,66,.2); }
  50%       { box-shadow: 0 0 0 1.5px var(--gold), 0 0 40px rgba(245,200,66,.4); }
}
.product-card {
  transition: all .3s !important;
}
.product-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.4) !important;
}

/* ── SQUAD SECTION — COLLEGE COLORS ── */
#more-gifting {
  position: relative;
}
.squad-card {
  position: relative;
  overflow: hidden;
  transition: all .3s !important;
}
.squad-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, transparent 60%, rgba(255,225,53,.06) 70%, transparent 80%);
  animation: squadSpin 8s linear infinite;
  pointer-events: none;
}
@keyframes squadSpin {
  to { transform: rotate(360deg); }
}
.squad-card:hover {
  transform: translateY(-6px) scale(1.01) !important;
  border-color: var(--yellow) !important;
  box-shadow: 0 12px 40px rgba(255,225,53,.2) !important;
}

/* ── TESTIMONIALS — QUOTE GLOW ── */
.testi-card {
  transition: all .3s;
  position: relative;
  overflow: hidden;
}
.testi-card::before {
  content: '"';
  position: absolute;
  top: -10px;
  left: 14px;
  font-size: 100px;
  line-height: 1;
  color: rgba(245,200,66,.06);
  font-family: serif;
  pointer-events: none;
}
.testi-card:hover {
  border-color: rgba(245,200,66,.3);
  box-shadow: 0 8px 30px rgba(0,0,0,.3);
  transform: translateY(-3px);
}

/* ── DELIVERY SECTION ── */
.area-chip {
  transition: all .2s;
  cursor: default;
}
.area-chip:hover {
  border-color: var(--coral);
  color: var(--white);
  box-shadow: 0 0 12px rgba(255,77,46,.2);
  transform: translateY(-2px);
}

/* ── ADDON CARDS ── */
.addon-feature-card {
  transition: all .3s !important;
  position: relative;
  overflow: hidden;
}
.addon-feature-card:hover {
  transform: translateY(-5px) !important;
  border-color: var(--coral) !important;
  box-shadow: 0 10px 30px rgba(255,77,46,.15) !important;
}
.addon-feature-icon {
  font-size: 32px;
  transition: transform .3s;
  display: inline-block;
}
.addon-feature-card:hover .addon-feature-icon {
  transform: scale(1.2) rotate(-8deg);
}

/* ── SOCIAL PROOF COUNTER STRIP ── */
#vibe-strip {
  background: linear-gradient(135deg, #0f0d14, #130d0a);
  border-top: 1px solid rgba(168,85,247,.15);
  border-bottom: 1px solid rgba(255,77,46,.1);
  padding: 44px 5%;
  text-align: center;
}
.vibe-strip-inner {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.vibe-stat {
  padding: 20px;
}
.vibe-stat-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(38px, 5vw, 56px);
  letter-spacing: 1px;
  line-height: 1;
  margin-bottom: 6px;
  background: linear-gradient(135deg, var(--gold-light), var(--pink-pop));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.vibe-stat-label {
  font-size: 12.5px;
  color: var(--grey);
  text-transform: uppercase;
  letter-spacing: 1px;
}
@media (max-width: 620px) {
  .vibe-strip-inner { grid-template-columns: repeat(2, 1fr); }
}

/* ── CAMPUS LOVE SECTION ── */
#campus-love {
  background: linear-gradient(180deg, var(--dark2), #110d1a);
  padding: 80px 5%;
  overflow: hidden;
  position: relative;
}
#campus-love::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 600px 400px at 50% 0%, rgba(168,85,247,.08), transparent 70%);
  pointer-events: none;
}
.campus-scroll {
  display: flex;
  gap: 14px;
  margin-top: 36px;
  animation: campusScroll 28s linear infinite;
  width: max-content;
}
.campus-scroll:hover { animation-play-state: paused; }
.campus-pill {
  background: rgba(168,85,247,.08);
  border: 1.5px solid rgba(168,85,247,.25);
  color: #c8a8f8;
  padding: 10px 20px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: all .2s;
  cursor: default;
}
.campus-pill:hover {
  background: rgba(168,85,247,.2);
  border-color: var(--purple-pop);
  transform: scale(1.05);
}
.campus-pill.active {
  background: linear-gradient(135deg, rgba(168,85,247,.25), rgba(236,72,153,.15));
  border-color: var(--purple-pop);
  color: #e8c8ff;
}
@keyframes campusScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── MIDNIGHT DROP FEATURE CALLOUT ── */
.midnight-callout {
  background: linear-gradient(135deg, #0d0a1a, #1a0d14);
  border: 1.5px solid rgba(168,85,247,.3);
  border-radius: 20px;
  padding: 28px 30px;
  margin: 40px 0;
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
  overflow: hidden;
}
.midnight-callout::before {
  content: '🌙';
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 80px;
  opacity: .08;
  pointer-events: none;
}
.midnight-callout-icon {
  font-size: 42px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 12px rgba(168,85,247,.5));
}
.midnight-callout-text h4 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: .5px;
  color: #c8a8f8;
  margin-bottom: 5px;
}
.midnight-callout-text p {
  font-size: 13px;
  color: var(--grey);
  line-height: 1.55;
}

/* ── SECTION DIVIDER ── */
.wave-divider {
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--purple-pop), var(--coral), var(--gold-light), transparent);
  opacity: .25;
  margin: 0;
}

/* ── HOW IT WORKS CONNECTOR LINE ── */
.steps-grid {
  position: relative;
}
.steps-grid::before {
  content: '';
  position: absolute;
  top: 56px;
  left: 15%;
  right: 15%;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-light), var(--purple-pop), var(--coral));
  opacity: .2;
  z-index: 0;
  pointer-events: none;
}
@media (max-width: 700px) {
  .steps-grid::before { display: none; }
}

/* ── CART / WA BUTTON UPGRADES ── */
#wa-btn {
  animation: waPulse 3s ease-in-out infinite;
  box-shadow: 0 4px 20px rgba(37,211,102,.4) !important;
}
@keyframes waPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(37,211,102,.4); transform: scale(1); }
  50%       { box-shadow: 0 4px 36px rgba(37,211,102,.6); transform: scale(1.06); }
}

/* ── FOOTER SOCIAL ICON GLOW ── */
.social-icon {
  transition: transform .2s, filter .2s;
  display: inline-block;
}
.social-icon:hover {
  transform: scale(1.2);
  filter: drop-shadow(0 0 8px rgba(245,200,66,.5));
}

/* ── MOBILE TWEAKS ── */
@media (max-width: 760px) {
  .vibe-badge { top: 72px; font-size: 10px; padding: 5px 14px; }
  .midnight-callout { flex-direction: column; text-align: center; }
  .midnight-callout::before { right: 50%; transform: translate(50%, -50%); font-size: 60px; }
  /* the fixed nav is 68px tall on mobile too — 110px of top padding on
     #hero was desktop-tuned and left needless dead space above the fold */
  #hero { padding: 88px 6% 50px; min-height: auto; }
  .hero-sub { margin: 16px auto 22px; }
  .serial-demo { margin-top: 26px; }
}

/* ── SCROLL REVEAL OVERRIDE for vibe elements ── */
.vibe-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s ease, transform .7s ease;
}
.vibe-in.vibe-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================================================
   FLOATING STICKY NOTES — hero section
   Authentic physical note feel, gentle drift, fills hero side-space
   ============================================================================ */

/* Base sticky note */
.sticky-note {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  border-radius: 4px 12px 12px 4px;
  font-family: 'Caveat', cursive;
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  box-shadow:
    0 4px 14px rgba(0,0,0,.25),
    0 1px 3px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.4);
  z-index: 3;
  user-select: none;
  cursor: default;
  transform-origin: center center;
  /* each note gets its own animation via modifier classes */
  transition: box-shadow .3s, transform .3s;
  max-width: 190px;
  line-height: 1.3;
  white-space: nowrap;
}
/* left tape strip accent */
.sticky-note::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 4px 0 0 4px;
  background: rgba(0,0,0,.12);
}
.sticky-note:hover {
  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    0 2px 6px rgba(0,0,0,.2);
  z-index: 10;
}
.sn-emoji { font-size: 17px; flex-shrink: 0; }
.sn-text  { font-size: 14px; }

/* Colors */
.sn-yellow   { background: #FFE135; }
.sn-white    { background: #F8F6F0; }
.sn-green    { background: #B8F5A0; }
.sn-pink     { background: #FFCCD5; }
.sn-mint     { background: #C8F5E8; }
.sn-lavender { background: #DDD0FF; }
.sn-peach    { background: #FFDAB9; }

/* Positions — left side */
.sn-left-1 {
  left: 4%;
  top: 20%;
  --rot: -4deg;
  --fall-delay: .15s;
  animation: snDrop .9s cubic-bezier(.22,1.5,.4,1) var(--fall-delay) both,
             driftA 7s ease-in-out calc(var(--fall-delay) + .9s) infinite;
}
.sn-left-2 {
  left: 2%;
  top: 50%;
  --rot: 3deg;
  --fall-delay: .75s;
  animation: snDrop .9s cubic-bezier(.22,1.5,.4,1) var(--fall-delay) both,
             driftB 9s ease-in-out calc(var(--fall-delay) + .9s) infinite;
}
.sn-left-3 {
  left: 7%;
  top: 72%;
  --rot: -2deg;
  --fall-delay: 1.35s;
  animation: snDrop .9s cubic-bezier(.22,1.5,.4,1) var(--fall-delay) both,
             driftC 11s ease-in-out calc(var(--fall-delay) + .9s) infinite;
}

/* Positions — right side */
.sn-right-1 {
  right: 4%;
  top: 18%;
  --rot: 3deg;
  --fall-delay: .45s;
  animation: snDrop .9s cubic-bezier(.22,1.5,.4,1) var(--fall-delay) both,
             driftB 8s ease-in-out calc(var(--fall-delay) + .9s) infinite;
}
.sn-right-2 {
  right: 2%;
  top: 42%;
  --rot: -2deg;
  --fall-delay: 1.05s;
  animation: snDrop .9s cubic-bezier(.22,1.5,.4,1) var(--fall-delay) both,
             driftC 10s ease-in-out calc(var(--fall-delay) + .9s) infinite;
}
.sn-right-3 {
  right: 6%;
  top: 64%;
  --rot: -4deg;
  --fall-delay: 1.65s;
  animation: snDrop .9s cubic-bezier(.22,1.5,.4,1) var(--fall-delay) both,
             driftA 12s ease-in-out calc(var(--fall-delay) + .9s) infinite;
}
.sn-right-4 {
  right: 3%;
  top: 82%;
  --rot: 3deg;
  --fall-delay: 1.95s;
  animation: snDrop .9s cubic-bezier(.22,1.5,.4,1) var(--fall-delay) both,
             driftB 7.5s ease-in-out calc(var(--fall-delay) + .9s) infinite;
}

/* One-shot entrance — notes fall from above and land one after another,
   settling into their own rest rotation (--rot) with a soft bounce */
@keyframes snDrop {
  0%   { opacity: 0;  transform: translateY(-135vh) rotate(calc(var(--rot) - 25deg)) scale(.8); }
  55%  { opacity: 1;  transform: translateY(4vh)     rotate(calc(var(--rot) + 6deg))  scale(1.05); }
  75%  { transform: translateY(-1.5vh) rotate(calc(var(--rot) - 3deg)) scale(.98); }
  90%  { transform: translateY(.5vh)   rotate(calc(var(--rot) + 1deg)) scale(1.01); }
  100% { opacity: 1;  transform: translateY(0)        rotate(var(--rot))            scale(1); }
}

/* Drift keyframes — three gentle variations (baseline matches each note's --rot) */
@keyframes driftA {
  0%   { transform: rotate(-4deg) translateY(0px)    translateX(0px); }
  25%  { transform: rotate(-2deg) translateY(-8px)   translateX(4px); }
  50%  { transform: rotate(-5deg) translateY(-14px)  translateX(-3px); }
  75%  { transform: rotate(-3deg) translateY(-6px)   translateX(5px); }
  100% { transform: rotate(-4deg) translateY(0px)    translateX(0px); }
}
@keyframes driftB {
  0%   { transform: rotate(3deg)  translateY(0px)    translateX(0px); }
  30%  { transform: rotate(5deg)  translateY(-10px)  translateX(-4px); }
  60%  { transform: rotate(2deg)  translateY(-16px)  translateX(3px); }
  80%  { transform: rotate(4deg)  translateY(-5px)   translateX(-2px); }
  100% { transform: rotate(3deg)  translateY(0px)    translateX(0px); }
}
@keyframes driftC {
  0%   { transform: rotate(-2deg) translateY(0px)    translateX(0px); }
  20%  { transform: rotate(0deg)  translateY(-12px)  translateX(3px); }
  55%  { transform: rotate(-3deg) translateY(-8px)   translateX(-4px); }
  80%  { transform: rotate(-1deg) translateY(-15px)  translateX(2px); }
  100% { transform: rotate(-2deg) translateY(0px)    translateX(0px); }
}

/* Respect users who prefer reduced motion — show notes settled, no fall/drift */
@media (prefers-reduced-motion: reduce) {
  .sticky-note { animation: none !important; opacity: 1; transform: rotate(var(--rot,0deg)); }
}

/* Decorative glowing orbs — fill the dark corners */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.hero-orb-1 {
  width: 340px;
  height: 340px;
  right: -60px;
  top: 5%;
  background: radial-gradient(circle, rgba(168,85,247,.12) 0%, transparent 70%);
  animation: orbPulse 8s ease-in-out infinite;
}
.hero-orb-2 {
  width: 260px;
  height: 260px;
  left: -40px;
  bottom: 10%;
  background: radial-gradient(circle, rgba(255,77,46,.08) 0%, transparent 70%);
  animation: orbPulse 11s ease-in-out infinite reverse;
}
@keyframes orbPulse {
  0%, 100% { transform: scale(1);    opacity: .6; }
  50%       { transform: scale(1.18); opacity: 1; }
}

/* hide on very small screens to avoid clutter */
@media (max-width: 640px) {
  .sticky-note {
    font-size: 12px;
    padding: 7px 12px;
    max-width: 130px;
  }
  .sn-left-3, .sn-right-3, .sn-right-4 { display: none; }
  .sn-left-1  { left: 1%;  top: 18%; }
  .sn-left-2  { left: 0%;  top: 52%; }
  .sn-right-1 { right: 1%; top: 22%; }
  .sn-right-2 { right: 0%; top: 56%; }
}

/* On mobile, the hero's real height (headline wraps across several lines)
   varies a lot by device and text length, so the desktop-tuned top:%/left:%
   spots for these notes can end up sitting over the headline or subtext.
   Rather than fight that per-device, let them do their fall-in moment and
   then fade away completely — same personality, zero risk of blocking
   content, and matches every phone width without special-casing each one. */
@media (max-width: 760px) {
  .sticky-note {
    animation: snDropFade 2.6s cubic-bezier(.22,1.5,.4,1) var(--fall-delay, 0s) both !important;
    pointer-events: none;
  }
}
@keyframes snDropFade {
  0%   { opacity: 0; transform: translateY(-135vh) rotate(calc(var(--rot) - 25deg)) scale(.8); }
  35%  { opacity: 1; transform: translateY(4vh)     rotate(calc(var(--rot) + 6deg))  scale(1.05); }
  50%  { transform: translateY(-1.5vh) rotate(calc(var(--rot) - 3deg)) scale(.98); }
  62%  { opacity: 1; transform: translateY(0)        rotate(var(--rot))            scale(1); }
  100% { opacity: 0; transform: translateY(0)        rotate(var(--rot))            scale(1); }
}

/* ── DIGITAL SPOTLIGHT CARDS ── */
.digi-card {
  background: rgba(168,85,247,.05);
  border: 1.5px solid rgba(168,85,247,.2);
  border-radius: 18px;
  padding: 22px 20px;
  position: relative;
  overflow: hidden;
  transition: all .3s;
  cursor: pointer;
  display: block;
}
.digi-card:hover {
  background: rgba(168,85,247,.1);
  border-color: #A855F7;
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(168,85,247,.2);
}
.digi-icon { font-size: 36px; margin-bottom: 12px; }
.digi-name { font-weight: 700; font-size: 15px; color: #fff; margin-bottom: 6px; }
.digi-desc { font-size: 12px; color: var(--grey); line-height: 1.55; margin-bottom: 12px; }
.digi-price { font-size: 13px; font-weight: 700; color: var(--gold-light); margin-bottom: 8px; }
.digi-cta   { font-size: 12px; color: #A855F7; font-weight: 700; }

/* Shared tag badge — top-right corner of a digi-card */
.digi-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 50px;
  white-space: nowrap;
}
.digi-tag-fire   { background: rgba(255,77,46,.15);  border: 1px solid rgba(255,77,46,.3);  color: #ff7b62; }
.digi-tag-new    { background: rgba(168,85,247,.15); border: 1px solid rgba(168,85,247,.3); color: #c8a0ff; }
.digi-tag-love   { background: rgba(236,72,153,.12); border: 1px solid rgba(236,72,153,.3); color: #f472b6; }
.digi-tag-gold   { background: rgba(212,160,23,.15); border: 1px solid rgba(212,160,23,.35); color: #F5C842; }
.digi-tag-mint   { background: rgba(45,212,191,.14); border: 1px solid rgba(45,212,191,.35); color: #5eead4; }
.digi-tag-blue   { background: rgba(59,130,246,.14); border: 1px solid rgba(59,130,246,.35); color: #93c5fd; }

/* "More waiting in Digital Studio" teaser banner */
.digi-more-banner {
  margin-top: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: linear-gradient(90deg, rgba(168,85,247,.1), rgba(236,72,153,.08));
  border: 1.5px dashed rgba(168,85,247,.35);
  border-radius: 18px;
  padding: 20px 26px;
  text-decoration: none;
  transition: all .3s;
}
.digi-more-banner:hover {
  border-color: #A855F7;
  background: linear-gradient(90deg, rgba(168,85,247,.16), rgba(236,72,153,.13));
  transform: translateY(-2px);
}
.digi-more-left { display: flex; align-items: center; gap: 14px; }
.digi-more-emoji {
  font-size: 26px;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(168,85,247,.15);
  border-radius: 50%;
  flex-shrink: 0;
  animation: digiMoreFloat 2.6s ease-in-out infinite;
}
@keyframes digiMoreFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.digi-more-title { font-weight: 700; font-size: 15px; color: #fff; margin-bottom: 3px; }
.digi-more-sub   { font-size: 12.5px; color: var(--grey); }
.digi-more-cta {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(90deg,#A855F7,#EC4899);
  padding: 11px 22px;
  border-radius: 50px;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .digi-more-banner { padding: 16px 18px; }
  .digi-more-cta { width: 100%; text-align: center; }
}