/* Custom Styles for Rivo Services Landing Page */

:root {
  --color-imperial: #001A38;
  --color-imperial-dark: #000E20;
  --color-imperial-light: #082852;
  --color-cyber: #7EE016;
  --color-cyber-glow: #94ff19;
  --color-grey: #334D66;
  --color-light-grey: #E0E6ED;
  --color-glacier: #F4F7FB;
  --color-accent: #46BCCC;
}

/* Light Theme Variables */
html:not(.dark) {
  --color-imperial-dark: #F4F7FB;
  --color-imperial: #FFFFFF;
  --color-imperial-light: #EBF1F8;
  --color-grey: #64748B;
  --color-light-grey: #1E293B;
  --color-glacier: #0F172A;
}

html:not(.dark) body {
  background-color: #F8FAFC !important;
  color: #0F172A !important;
}

html:not(.dark) .logo-top-bar {
  fill: #001A38 !important;
}

html:not(.dark) .bg-brand-imperial-dark {
  background-color: #FFFFFF !important;
}

html:not(.dark) .bg-brand-imperial-dark\/90,
html:not(.dark) .bg-brand-imperial-dark\/95,
html:not(.dark) .bg-brand-imperial-dark\/85,
html:not(.dark) .bg-brand-imperial-dark\/75 {
  background-color: rgba(255, 255, 255, 0.95) !important;
}

html:not(.dark) .bg-brand-imperial,
html:not(.dark) .bg-brand-imperial\/80,
html:not(.dark) .bg-brand-imperial\/70,
html:not(.dark) .bg-brand-imperial\/60,
html:not(.dark) .bg-brand-imperial\/50,
html:not(.dark) .bg-brand-imperial\/40 {
  background-color: #F1F5F9 !important;
}

html:not(.dark) .text-white {
  color: #001A38 !important;
}

html:not(.dark) .text-brand-glacier {
  color: #1E293B !important;
}

html:not(.dark) .text-brand-light-grey\/80,
html:not(.dark) .text-brand-light-grey\/70 {
  color: #475569 !important;
}

html:not(.dark) .border-brand-grey\/20,
html:not(.dark) .border-brand-grey\/30,
html:not(.dark) .border-brand-grey\/40,
html:not(.dark) .border-brand-grey\/50 {
  border-color: #CBD5E1 !important;
}

/* Cyber Grid Background */
.cyber-grid {
  background-size: 50px 50px;
  background-image: 
    linear-gradient(to right, rgba(51, 77, 102, 0.15) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(51, 77, 102, 0.15) 1px, transparent 1px);
}

/* Custom Buttons (Strictly matching user's Brand Design System) */
.btn-primary-activate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--color-cyber);
  color: #001A38;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  padding: 0.75rem 1.75rem;
  border-radius: 9999px;
  box-shadow: 0 0 25px rgba(126, 224, 22, 0.4);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid var(--color-cyber);
  cursor: pointer;
}

.btn-primary-activate:hover {
  background-color: var(--color-cyber-glow);
  box-shadow: 0 0 35px rgba(126, 224, 22, 0.75);
  transform: translateY(-2px) scale(1.02);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: transparent;
  color: var(--color-cyber);
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  padding: 0.75rem 1.75rem;
  border-radius: 9999px;
  border: 1.5px solid var(--color-cyber);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.btn-secondary:hover {
  background-color: rgba(126, 224, 22, 0.12);
  box-shadow: 0 0 20px rgba(126, 224, 22, 0.3);
  transform: translateY(-2px);
}

.btn-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #8E9FB2;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  padding: 0.75rem 1.25rem;
  transition: all 0.2s ease;
  cursor: pointer;
}

.btn-cancel:hover {
  color: #FFFFFF;
}

/* Smooth Lenis Scrolling */
html.lenis, html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

/* Perspective HUD tilt effect */
.perspective-1000 {
  perspective: 1000px;
}

.hud-card {
  transform-style: preserve-3d;
  transition: transform 0.2s ease-out;
}

/* Subtle glowing pulse */
@keyframes glowPulse {
  0%, 100% { opacity: 0.25; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(1.05); }
}

.ambient-glow {
  animation: glowPulse 8s ease-in-out infinite alternate;
}
.glow-2 {
  animation-delay: 3s;
}
.glow-3 {
  animation-delay: 5s;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #000E20;
}
::-webkit-scrollbar-thumb {
  background: #334D66;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #7EE016;
}