/* ─────────────────────────────────────────────────────────────────────
   VDTEL — site.css
   Theme: "Mission-Critical Modern"
   Light-mode body for accessibility + dark aurora heroes for tech credibility.
   Aurora gradient meshes, bento grids, glass cards, motion micro-interactions.
   ───────────────────────────────────────────────────────────────────── */

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

/* ─── Aurora hero background ──────────────────────────────────────────
   Animated radial gradients that bloom + drift slowly. Pure CSS — no JS.
   Use inside any dark hero section via .aurora wrapper. */
.aurora {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #0A0E1F;
}
.aurora::before,
.aurora::after {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  filter: blur(80px);
  opacity: .55;
}
.aurora::before {
  background:
    radial-gradient(60% 50% at 15% 25%, #1E3A8A 0%, transparent 60%),
    radial-gradient(50% 50% at 80% 15%, #06B6D4 0%, transparent 60%),
    radial-gradient(60% 60% at 45% 80%, #8B5CF6 0%, transparent 60%);
  animation: aurora-1 22s ease-in-out infinite alternate;
}
.aurora::after {
  background:
    radial-gradient(40% 40% at 80% 70%, #06B6D4 0%, transparent 60%),
    radial-gradient(45% 45% at 10% 80%, #6366F1 0%, transparent 60%);
  animation: aurora-2 28s ease-in-out infinite alternate;
  opacity: .35;
}
@keyframes aurora-1 {
  0%   { transform: translate3d(0,  0,  0) rotate(0deg);   }
  100% { transform: translate3d(2%, -3%, 0) rotate(8deg);  }
}
@keyframes aurora-2 {
  0%   { transform: translate3d(0,  0,  0) rotate(0deg);   }
  100% { transform: translate3d(-3%, 2%, 0) rotate(-6deg); }
}

/* Subtle grid texture on top of the aurora, like Stripe / Linear */
.hero-grid {
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 100%);
}

/* ─── Gradient text — for the hero accent words ───────────────────── */
.text-gradient {
  background: linear-gradient(120deg, #67E8F9 0%, #818CF8 45%, #C084FC 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ─── Glass cards ─────────────────────────────────────────────────── */
.glass {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.glass-light {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(15, 23, 42, 0.08);
}

/* ─── Stat number — monospace tabular figures for that techy feel ─── */
.stat-num {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.02em;
}

/* ─── Bento grid for the homepage services ────────────────────────── */
.bento {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 768px) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bento .b-feature { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .bento {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  /* 2 featured cards at top — each spans 3 cols */
  .bento .b-feature { grid-column: span 3; }
  /* 6 regular cards underneath — each spans 2 cols */
  .bento .b-regular { grid-column: span 2; }
}

/* ─── Service card hover lift ─────────────────────────────────────── */
.svc-card {
  position: relative;
  isolation: isolate;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.svc-card:hover {
  transform: translateY(-2px);
  border-color: rgba(6, 182, 212, 0.5);
  box-shadow: 0 20px 40px -20px rgba(30, 58, 138, 0.30);
}
.svc-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(80% 60% at 50% 0%, rgba(6, 182, 212, 0.10) 0%, transparent 70%);
  opacity: 0;
  transition: opacity .25s ease;
  z-index: -1;
}
.svc-card:hover::after { opacity: 1; }

/* ─── Reveal on scroll (Alpine x-intersect compatible) ────────────── */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s ease-out, transform .6s ease-out;
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* ─── Pulse dot for the live-status indicator ─────────────────────── */
@keyframes pulse-soft { 0%, 100% { opacity: 1 } 50% { opacity: .5 } }
.animate-pulse-soft { animation: pulse-soft 2s ease-in-out infinite; }

/* ─── Marquee for the trusted-by / logo strip ─────────────────────── */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 40s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }

/* ─── Better focus rings ──────────────────────────────────────────── */
:where(input, select, textarea, button, a):focus-visible {
  outline: 2px solid #06B6D4;
  outline-offset: 2px;
  border-radius: 4px;
}
:where(input, select, textarea):focus-visible { outline-offset: 0; }

/* ─── Avoid font-loading flash ────────────────────────────────────── */
.font-display { font-display: swap; }

/* ─── Prevent layout-shift on selects with emoji flag ─────────────── */
select { font-variant-emoji: emoji; }

/* ─── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .aurora::before,
  .aurora::after,
  .marquee-track,
  .animate-pulse-soft { animation: none !important; }
  .reveal { transition: none; opacity: 1; transform: none; }
}

/* ─── Print friendliness ──────────────────────────────────────────── */
@media print {
  .aurora { background: #fff !important; color: #000 !important; }
  .aurora::before, .aurora::after { display: none; }
  .hero-grid { display: none; }
  .text-gradient { -webkit-text-fill-color: #0B3D91; color: #0B3D91; }
}