/* Upmarx - global styles layered on top of Tailwind (CDN build) */

:root {
  --emerald: #046A38;
  --emerald-dark: #013A1E;
  --platinum-start: #E2E8F0;
  --platinum-end: #94A3B8;
  --bg-tint: #F8FAFC;
}

html { scroll-behavior: smooth; }

body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; }

.font-display, h1, h2, h3, h4 { font-family: 'Sora', ui-sans-serif, system-ui, sans-serif; }

/* Metallic silver / platinum gradient, per brand spec */
.gradient-metallic {
  background: linear-gradient(135deg, #E2E8F0 0%, #94A3B8 100%);
}

/* Softer metallic panel used behind image placeholders */
.gradient-metallic-panel {
  background: linear-gradient(135deg, #F1F5F9 0%, #E2E8F0 45%, #CBD5E1 100%);
}

/* Matches the SVG illustrations' own internal background gradient (see _bg() in the
   generator), so when an illustration is stretched to fill a variable-height column
   and its artwork letterboxes (via preserveAspectRatio meet), the surrounding frame
   blends seamlessly instead of showing a visible white bar. */
.illustration-frame {
  background: linear-gradient(135deg, #F1F5F9 0%, #E2E8F0 100%);
}

/* Deep emerald contrast sections */
.gradient-emerald-dark {
  background: linear-gradient(160deg, #013A1E 0%, #046A38 60%, #035C30 100%);
}

/* Every card/panel bordered with ring-platinum-200 gets a persistent, subtle shadow
   so its edges stay clearly visible regardless of monitor/browser color rendering,
   not just a border that can wash out on some displays. */
.ring-platinum-200 {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 6px rgba(15, 23, 42, 0.05);
}

.card-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px -15px rgba(4, 106, 56, 0.25);
}

/* Header shadow on scroll (toggled via main.js) */
#site-header.is-scrolled {
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06), 0 8px 24px -12px rgba(15, 23, 42, 0.08);
}

/* FAQ / accordion chevron rotation handled via Tailwind's group-open; this covers Safari <details> polish */
details > summary { -webkit-tap-highlight-color: transparent; }
details > summary::-webkit-details-marker { display: none; }

.logo-wall-item { filter: grayscale(100%); opacity: 0.75; transition: opacity 0.2s ease, filter 0.2s ease; }
.logo-wall-item:hover { filter: grayscale(0%); opacity: 1; }

/* Infinite-scroll trusted-by logo marquee */
.marquee-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: marquee 32s linear infinite;
}
.marquee-viewport:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* Typewriter rotating headline word */
.typewriter { display: inline-block; min-height: 1.1em; white-space: nowrap; max-width: 100%; }
.typewriter-cursor-light, .typewriter-cursor-dark {
  display: inline-block;
  margin-left: 2px;
  animation: blink 1s steps(1) infinite;
  font-weight: 300;
}
.typewriter-cursor-light { color: #046A38; }
.typewriter-cursor-dark { color: #6EE7B7; }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .typewriter-cursor-light, .typewriter-cursor-dark { animation: none; }
}

/* Focus visibility for keyboard users */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--emerald);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Skip flash of unstyled mobile menu */
#mobile-menu.hidden { display: none; }