.story-card {
  transition: opacity .55s ease, transform .55s ease, filter .55s ease;
}

.story-card.is-hidden {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(8px);
  pointer-events: none;
}

.story-card.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.float-a {
  animation: floatA 6s ease-in-out infinite;
}

.float-b {
  animation: floatB 7.5s ease-in-out infinite;
}

.float-c {
  animation: floatC 8.5s ease-in-out infinite;
}

@keyframes floatA {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg); }
  50% { transform: translate3d(0, -14px, 0) rotate(1deg); }
}

@keyframes floatB {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(2deg); }
  50% { transform: translate3d(8px, -18px, 0) rotate(-1deg); }
}

@keyframes floatC {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-8px, -12px, 0); }
}

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .75s ease, transform .75s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.phone-shell {
  background: linear-gradient(145deg, #2c1736, #100615);
  box-shadow:
    0 45px 100px rgba(36, 22, 43, .28),
    0 0 0 10px rgba(255, 255, 255, .55),
    inset 0 0 0 2px rgba(255, 255, 255, .12);
}

.receipt-edge {
  background:
    linear-gradient(135deg, transparent 8px, white 0) top left,
    linear-gradient(225deg, transparent 8px, white 0) top right,
    linear-gradient(45deg, transparent 8px, white 0) bottom left,
    linear-gradient(315deg, transparent 8px, white 0) bottom right;
  background-size: 51% 51%;
  background-repeat: no-repeat;
}

html.dark-mode .phone-shell {
  box-shadow:
    0 45px 100px rgba(0, 0, 0, .42),
    0 0 0 10px rgba(255, 255, 255, .08),
    inset 0 0 0 2px rgba(255, 255, 255, .10);
}

html.dark-mode .receipt-edge {
  background:
    linear-gradient(135deg, transparent 8px, #22142c 0) top left,
    linear-gradient(225deg, transparent 8px, #22142c 0) top right,
    linear-gradient(45deg, transparent 8px, #22142c 0) bottom left,
    linear-gradient(315deg, transparent 8px, #22142c 0) bottom right;
  background-size: 51% 51%;
  background-repeat: no-repeat;
  color: #f8f1ff;
}

html.dark-mode #siteHeader,
html.dark-mode #mobileMenu,
html.dark-mode .story-card,
html.dark-mode .rounded-\[2rem\].bg-white,
html.dark-mode .rounded-2xl.bg-white,
html.dark-mode .bg-white,
html.dark-mode .bg-white\/80,
html.dark-mode .bg-white\/82,
html.dark-mode .bg-\[\#fbf8fd\],
html.dark-mode .modal-panel,
html.dark-mode select,
html.dark-mode textarea,
html.dark-mode input[type="text"],
html.dark-mode input[type="email"],
html.dark-mode input[type="tel"] {
  background-color: rgba(28, 17, 39, 0.92) !important;
  color: #f8f1ff !important;
  border-color: rgba(196, 160, 255, 0.18) !important;
  box-shadow: none;
}

html.dark-mode .border-purple-100,
html.dark-mode .border-purple-200,
html.dark-mode .border-white\/70,
html.dark-mode .border-dashed {
  border-color: rgba(196, 160, 255, 0.18) !important;
}

html.dark-mode .bg-white\/15 {
  background-color: rgba(255, 255, 255, 0.10) !important;
}

html.dark-mode .bg-white\/80,
html.dark-mode .bg-white\/82 {
  backdrop-filter: blur(18px);
}

html.dark-mode .text-recyt-ink,
html.dark-mode .text-recyt-ink\/75,
html.dark-mode .text-recyt-ink\/68,
html.dark-mode .text-recyt-ink\/65,
html.dark-mode .text-recyt-ink\/60,
html.dark-mode .text-recyt-ink\/55,
html.dark-mode .text-recyt-ink\/50,
html.dark-mode .text-recyt-ink\/45,
html.dark-mode .text-recyt-ink\/40 {
  color: rgba(244, 236, 255, 0.82) !important;
}

html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode strong,
html.dark-mode .font-extrabold,
html.dark-mode .font-bold {
  color: #fff8ff;
}

html.dark-mode .shadow-card,
html.dark-mode .shadow-soft,
html.dark-mode .shadow-sm,
html.dark-mode .shadow-xl {
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.30) !important;
}

html.dark-mode #features {
  background: linear-gradient(180deg, #160d20 0%, #21112c 100%);
}

html.dark-mode #features .accent-gradient,
html.dark-mode #business .accent-gradient {
  background: linear-gradient(135deg, rgba(140, 7, 222, 0.28), rgba(250, 172, 65, 0.18));
}

html.dark-mode #features h2,
html.dark-mode #features li,
html.dark-mode #business h2,
html.dark-mode #business p,
html.dark-mode #business .rounded-3xl p {
  color: #fff8ff !important;
}

html.dark-mode #features .text-recyt-ink\/60,
html.dark-mode #business .text-recyt-ink\/65 {
  color: rgba(236, 226, 247, 0.88) !important;
}

html.dark-mode #features .bg-purple-100,
html.dark-mode #features .bg-lime-100,
html.dark-mode #features .bg-orange-100 {
  border: 1px solid rgba(196, 160, 255, 0.16);
}

html.dark-mode #features .bg-purple-100 {
  background: rgba(102, 51, 153, 0.30) !important;
  color: #e6ccff !important;
}

html.dark-mode #features .bg-lime-100 {
  background: rgba(146, 211, 77, 0.20) !important;
  color: #dff8c3 !important;
}

html.dark-mode #features .bg-orange-100 {
  background: rgba(250, 172, 65, 0.18) !important;
  color: #ffd9a1 !important;
}

html.dark-mode #features .bg-white\/86 {
  background: rgba(24, 15, 34, 0.84) !important;
  color: #fff8ff !important;
  border-color: rgba(196, 160, 255, 0.16) !important;
  backdrop-filter: blur(18px);
}

html.dark-mode #business .accent-gradient {
  border-color: rgba(196, 160, 255, 0.16) !important;
  color: #fff8ff !important;
}

html.dark-mode #business .rounded-3xl.bg-white {
  background: rgba(26, 17, 36, 0.92) !important;
  border: 1px solid rgba(196, 160, 255, 0.16);
}