/* ==========================================================================
   Global Styles
   ========================================================================== */

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: #FAFAFA;
  color: #111111;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.technical-grid {
  background-size: 40px 40px;
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
  mask-image: linear-gradient(to bottom, black 30%, transparent 100%);
}

.premium-card {
  background: #FFFFFF;
  border: 1px solid #EAEAEA;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02), 0 8px 16px -4px rgba(0,0,0,0.04);
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.premium-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.03), 0 12px 24px -6px rgba(0,0,0,0.06);
  border-color: #D4D4D4;
}

.node-line {
  stroke-dasharray: 4;
  animation: dash 30s linear infinite;
}

@keyframes dash {
  to { stroke-dashoffset: -100; }
}

/* ==========================================================================
   Pricing Transition
   ========================================================================== */

.pricing-transition {
  transition:
    transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 300ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 500ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 500ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 500ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity, box-shadow;
}

/* ==========================================================================
   Shimmer Animation
   ========================================================================== */

@keyframes shimmer {
  100% { transform: translateX(100%); }
}

.shimmer-layer {
  transform: translateX(-100%);
}

.group:hover .shimmer-layer {
  animation: shimmer 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* ==========================================================================
   Font Utility Classes
   ========================================================================== */

.font-geist { font-family: 'Geist', sans-serif !important; }
.font-roboto { font-family: 'Roboto', sans-serif !important; }
.font-montserrat { font-family: 'Montserrat', sans-serif !important; }
.font-poppins { font-family: 'Poppins', sans-serif !important; }
.font-playfair { font-family: 'Playfair Display', serif !important; }
.font-instrument-serif { font-family: 'Instrument Serif', serif !important; }
.font-merriweather { font-family: 'Merriweather', serif !important; }
.font-bricolage { font-family: 'Bricolage Grotesque', sans-serif !important; }
.font-jakarta { font-family: 'Plus Jakarta Sans', sans-serif !important; }
.font-manrope { font-family: 'Manrope', sans-serif !important; }
.font-space-grotesk { font-family: 'Space Grotesk', sans-serif !important; }
.font-work-sans { font-family: 'Work Sans', sans-serif !important; }
.font-pt-serif { font-family: 'PT Serif', serif !important; }
.font-geist-mono { font-family: 'Geist Mono', monospace !important; }
.font-space-mono { font-family: 'Space Mono', monospace !important; }
.font-quicksand { font-family: 'Quicksand', sans-serif !important; }
.font-nunito { font-family: 'Nunito', sans-serif !important; }
.font-newsreader { font-family: 'Newsreader', serif !important; }
.font-google-sans-flex { font-family: 'Google Sans Flex', sans-serif !important; }
.font-oswald { font-family: 'Oswald', sans-serif !important; }
.font-dm-sans { font-family: 'DM Sans', sans-serif !important; }
.font-cormorant { font-family: 'Cormorant Garamond', serif !important; }

/* ==========================================================================
   SVG Graph Animations (Hero Card)
   ========================================================================== */

.signal-path {
  stroke-dasharray: 60 400;
  stroke-dashoffset: 60;
  animation: signal-flow 6s linear infinite;
}

@keyframes signal-flow {
  0% { stroke-dashoffset: 60; opacity: 0; }
  5% { opacity: 1; }
  90% { stroke-dashoffset: -360; opacity: 1; }
  95% { opacity: 0; }
  100% { stroke-dashoffset: -360; opacity: 0; }
}

.node-context {
  animation: pulse-context 6s infinite ease-out;
  transform-origin: 50px 150px;
}

@keyframes pulse-context {
  0% { transform: scale(1); fill: #111; }
  5% { transform: scale(1.4); fill: #000; }
  15% { transform: scale(1); fill: #111; }
}

.node-assumptions {
  animation: pulse-assumptions 6s infinite ease-out;
  transform-origin: 190px 80px;
}

@keyframes pulse-assumptions {
  25% { stroke-width: 1.5; transform: scale(1); }
  30% { stroke-width: 2.5; transform: scale(1.05); stroke: #000; }
  40% { stroke-width: 1.5; transform: scale(1); stroke: #111; }
}

.node-bbdd {
  animation: pulse-bbdd 6s infinite ease-out;
  transform-origin: 190px 220px;
}

@keyframes pulse-bbdd {
  25% { stroke-width: 1.5; transform: scale(1); }
  30% { stroke-width: 2.5; transform: scale(1.05); stroke: #000; }
  40% { stroke-width: 1.5; transform: scale(1); stroke: #111; }
}

.node-memory {
  animation: pulse-memory 6s infinite ease-out;
  transform-origin: 250px 180px;
}

@keyframes pulse-memory {
  45% { stroke-width: 1.5; transform: scale(1); }
  50% { stroke-width: 2.5; transform: scale(1.05); stroke: #000; }
  60% { stroke-width: 1.5; transform: scale(1); stroke: #111; }
}

.node-evidence {
  animation: pulse-evidence 6s infinite ease-out;
  transform-origin: 280px 120px;
}

@keyframes pulse-evidence {
  55% { stroke-width: 1.5; transform: scale(1); }
  60% { stroke-width: 2.5; transform: scale(1.05); stroke: #000; }
  70% { stroke-width: 1.5; transform: scale(1); stroke: #111; }
}

.node-outcome {
  animation: pulse-outcome 6s infinite ease-out;
  transform-origin: 320px 150px;
}

@keyframes pulse-outcome {
  85% { transform: scale(1); fill: #111; }
  90% { transform: scale(1.25); fill: #000; }
  100% { transform: scale(1); fill: #111; }
}

.outcome-check {
  stroke-dasharray: 12;
  stroke-dashoffset: 12;
  animation: check-draw 6s linear infinite;
}

@keyframes check-draw {
  0%, 55% { stroke-dashoffset: 12; opacity: 0; }
  59% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

/* ==========================================================================
   Definition / Solution Steps
   ========================================================================== */

.def-active .def-num {
  border-color: #111;
  color: #111;
  background-color: #fff;
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.def-inactive .def-content {
  opacity: 0.4;
  filter: grayscale(100%);
}

.def-active .def-content {
  opacity: 1;
  filter: grayscale(0%);
  transform: translateY(0);
}

.def-step {
  transition: opacity 0.5s ease;
}

/* ==========================================================================
   Header Dark Mode (over dark sections)
   ========================================================================== */

header {
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

header.header-dark .header-logo {
  filter: brightness(0) invert(1);
  transition: filter 0.3s ease;
}

header .header-logo {
  transition: filter 0.3s ease;
}

header.header-dark .header-nav-link {
  color: rgba(255, 255, 255, 0.7);
}

header.header-dark .header-nav-link:hover {
  color: #fff;
}

header.header-dark .header-cta-primary {
  background-color: #fff;
  color: #111;
}

header.header-dark .header-cta-primary .shimmer-layer {
  background-image: linear-gradient(to right, transparent, rgba(0,0,0,0.08), transparent);
}

header.header-dark .header-signin {
  color: rgba(255, 255, 255, 0.7);
}

header.header-dark .header-signin:hover {
  color: #fff;
}