html, body { height: 100%; }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, "Apple Color Emoji", "Segoe UI Emoji"; }
:root { --surface-rgb: 255,255,255; --accent-rgb: 247, 58, 19; }
.dark { --surface-rgb: 10,10,10; --accent-rgb: 247, 58, 19; }

@keyframes scrollY {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

@keyframes scrollX {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes heroZoom {
  0% { transform: scale(1); }
  100% { transform: scale(1.12); }
}

.auto-vertical-scroller { position: relative; overflow: hidden; }
.auto-vertical-track { animation: scrollY 30s linear infinite; will-change: transform; }
.auto-horizontal-scroller { position: relative; overflow: hidden; }
.auto-horizontal-track { display: inline-block; animation: scrollX 30s linear infinite; white-space: nowrap; will-change: transform; }

.fade-mask::before, .fade-mask::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 48px;
  pointer-events: none;
  z-index: 10;
}
.fade-mask::before { top: 0; background: linear-gradient(to bottom, rgba(var(--surface-rgb),1), rgba(var(--surface-rgb),0)); }
.fade-mask::after { bottom: 0; background: linear-gradient(to top, rgba(var(--surface-rgb),1), rgba(var(--surface-rgb),0)); }

.fade-mask-x::before, .fade-mask-x::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 48px;
  pointer-events: none;
  z-index: 10;
}
.fade-mask-x::before { left: 0; background: linear-gradient(to right, rgba(var(--surface-rgb),1), rgba(var(--surface-rgb),0)); }
.fade-mask-x::after { right: 0; background: linear-gradient(to left, rgba(var(--surface-rgb),1), rgba(var(--surface-rgb),0)); }

/* Subtle luxury accent borders */
.accent-borders .border-neutral-200 { border-color: rgba(var(--accent-rgb), 0.22) !important; }
.accent-borders .border-neutral-300 { border-color: rgba(var(--accent-rgb), 0.26) !important; }
.dark .accent-borders .border-neutral-800 { border-color: rgba(var(--accent-rgb), 0.18) !important; }

/* Force light mode - override any dark theme */
.dark .bg-white, .dark .bg-neutral-50 { background-color: #ffffff !important; }
.dark .text-neutral-700 { color: rgb(64 64 64) !important; }
.dark .text-neutral-800 { color: rgb(38 38 38) !important; }
.dark .text-white { color: rgb(38 38 38) !important; }
.dark .bg-neutral-900 { background-color: #ffffff !important; }
.dark .border-neutral-800 { border-color: rgb(229 229 229) !important; }

/* Pricing card glow */
.card-glow-wrap { position: relative; }
.card-glow-elt {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -12px;
  height: 40px;
  background: radial-gradient(60% 100% at 50% 100%, rgba(var(--accent-rgb), 0.18), transparent 70%);
  filter: blur(16px);
  pointer-events: none;
}

/* Enhanced Card gradients with red accent */
.card-gradient-light {
  background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.98) 100%);
  backdrop-filter: blur(20px);
  box-shadow: 
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(247, 58, 19, 0.05);
}

.card-gradient-subtle {
  background: linear-gradient(135deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.85) 100%);
  backdrop-filter: blur(15px);
  box-shadow: 
    0 2px 4px -1px rgba(0, 0, 0, 0.08),
    0 1px 2px -1px rgba(0, 0, 0, 0.04),
    0 0 0 1px rgba(247, 58, 19, 0.03);
}

/* Enhanced blur effects for modern tech feel */
.card-glow-wrap {
  position: relative;
  transition: all 0.3s ease;
}

.card-glow-wrap:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 10px 25px -3px rgba(247, 58, 19, 0.1),
    0 4px 6px -2px rgba(247, 58, 19, 0.05);
}

/* Red accent borders for cards */
.border-neutral-200 {
  border-color: rgba(247, 58, 19, 0.1) !important;
}

.border-neutral-300 {
  border-color: rgba(247, 58, 19, 0.15) !important;
}