/* ==========================================================================
   Revanta — shared styles
   Custom CSS layered on top of Tailwind (CDN). Loaded by every page.
   ========================================================================== */

:root {
  --accent: #7fe7ff;
  --muted: #8a929e;
  --hairline: rgba(255, 255, 255, 0.1);
}

/* Base ---------------------------------------------------------------------- */
html { scroll-behavior: smooth; }
body {
  background: #07080a;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
section[id] { scroll-margin-top: 5rem; }

/* Typography ---------------------------------------------------------------- */
h1, h2, .display {
  font-family: "Geist", "Inter", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.08;
}
.eyebrow {
  font-family: "Geist Mono", "ui-monospace", monospace;
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

/* Header — transparent over the hero, gains a backdrop once scrolled past it - */
#siteHeader {
  transition: background-color 0.35s, border-color 0.35s, backdrop-filter 0.35s;
  border-bottom: 1px solid transparent;
}
#siteHeader.is-stuck {
  background: rgba(7, 8, 10, 0.72);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: rgba(35, 38, 46, 0.7);
}

/* Signature animated gradient (cyan → purple → mint) ------------------------ */
.gradient-text {
  background: linear-gradient(100deg, #7fe7ff 0%, #b69dff 40%, #8affc1 70%, #7fe7ff 100%) 0 0 / 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 8s linear infinite;
}
@keyframes shimmer { to { background-position: 200% center; } }

/* Primary CTA — gradient fill with dark text ------------------------------- */
.btn-primary {
  background: linear-gradient(100deg, #7fe7ff 0%, #b69dff 45%, #8affc1 100%) 0 0 / 200% auto;
  color: #07080a;
  font-weight: 600;
  transition: background-position 0.5s, filter 0.25s, transform 0.25s;
}
.btn-primary:hover {
  background-position: 100% center;
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* Glass tiles (0asis-style) ------------------------------------------------- */
.glass {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.glass-hover {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s, border-color 0.45s, background 0.45s;
}
.glass-hover:hover {
  transform: translateY(-4px);
  border-color: rgba(127, 231, 255, 0.4);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 30px 80px -24px rgba(0, 0, 0, 0.75);
}
.iridescent-border::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(127, 231, 255, 0.55), rgba(182, 157, 255, 0.4), rgba(138, 255, 193, 0.45), rgba(127, 231, 255, 0.55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}
.sheen::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.1) 50%, transparent 65%);
  background-size: 220% 100%;
  background-position: 220% 0;
  pointer-events: none;
  z-index: 1;
}
.sheen:hover::after { animation: sheenSweep 1.1s ease; }
@keyframes sheenSweep {
  from { background-position: 220% 0; }
  to { background-position: -60% 0; }
}
.ring-line { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.card-hover { transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.card-hover:hover { transform: translateY(-4px); border-color: rgba(127, 231, 255, 0.45); }

/* Hero intro + scroll-reveal animations ------------------------------------ */
.fade-up {
  opacity: 0;
  transform: translateY(16px);
  animation: fadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes fadeUp { to { opacity: 1; transform: none; } }

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

/* Tactile click feedback on pills/buttons ---------------------------------- */
a.rounded-full:active,
button.rounded-full:active,
.btn-primary:active { transform: scale(0.97); }
a, button { -webkit-tap-highlight-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .fade-up { animation: none; opacity: 1; transform: none; }
  .gradient-text { animation: none; }
}

/* Custom form validation ---------------------------------------------------- */
.field-error {
  margin-top: 0.4rem;
  font-size: 0.72rem;
  line-height: 1.35;
  color: #fb7185;
  display: none;
}
.field-error.show {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.field-error.show::before {
  content: "";
  width: 0.85rem;
  height: 0.85rem;
  flex-shrink: 0;
  background: #fb7185;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1 5h2v7h-2V7zm0 9h2v2h-2v-2z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1 5h2v7h-2V7zm0 9h2v2h-2v-2z'/></svg>") center / contain no-repeat;
}
input.invalid,
input.invalid:focus {
  border-color: #fb7185 !important;
  box-shadow: 0 0 0 1px rgba(251, 113, 133, 0.25);
}

/* Legal document typography (privacy / terms) ------------------------------ */
.legal h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #f5f7fa;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  scroll-margin-top: 6rem;
}
.legal h3 {
  font-size: 1rem;
  font-weight: 600;
  color: #f5f7fa;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
.legal p { color: #b8bfca; line-height: 1.75; margin-bottom: 1rem; }
.legal ul { list-style: disc; padding-left: 1.25rem; margin-bottom: 1rem; }
.legal li { color: #b8bfca; line-height: 1.7; margin-bottom: 0.4rem; }
.legal a { color: #7fe7ff; text-decoration: underline; text-underline-offset: 2px; }
.legal strong { color: #f5f7fa; font-weight: 600; }