/* ==========================================================================
   FrontTech IT Services — Premium Design System
   Palette: Deep Navy · Royal Blue · Sky · Soft Gold accent
   Fonts: Sora (display) · Inter (body)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  --navy:        #0a1026;
  --navy-light:  #111a3a;
  --primary:     #2563eb;
  --primary-dark:#1d4ed8;
  --sky:         #38bdf8;
  --accent:      #f5b94a;
  --ink:         #0f172a;
  --muted:       #64748b;
}

* { scroll-behavior: smooth; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, .font-display {
  font-family: 'Sora', 'Inter', sans-serif;
  letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------
   Gradient helpers
   -------------------------------------------------------------------------- */
.text-gradient {
  background: linear-gradient(100deg, #60a5fa 0%, #818cf8 45%, #38bdf8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-gold {
  background: linear-gradient(100deg, #fcd34d 0%, #f5b94a 60%, #fbbf24 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Grid lines — declared BEFORE .bg-navy-grad so the navy rule wins when both
   classes are used together (otherwise bg-grid would wipe the dark background). */
.bg-grid {
  background-color: #080d20;
  background-image:
    linear-gradient(rgba(148,163,184,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,0.07) 1px, transparent 1px);
  background-size: 54px 54px;
}

/* Self-contained dark premium background: solid navy fallback + subtle grid +
   blue glow. The solid background-color guarantees text stays readable even if
   any later rule overrides background-image. */
.bg-navy-grad {
  background-color: #080d20;
  background-image:
    linear-gradient(rgba(148,163,184,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,0.06) 1px, transparent 1px),
    radial-gradient(900px 500px at 12% -10%, rgba(37,99,235,0.32), transparent 62%),
    radial-gradient(800px 500px at 100% 0%, rgba(56,189,248,0.20), transparent 58%),
    linear-gradient(160deg, #080d20 0%, #0b142e 55%, #080d20 100%);
  background-size: 54px 54px, 54px 54px, auto, auto, auto;
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat;
}

.btn-gradient {
  background: linear-gradient(100deg, #2563eb 0%, #3b82f6 50%, #38bdf8 100%);
  box-shadow: 0 10px 30px -8px rgba(37,99,235,0.6);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.btn-gradient:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 38px -8px rgba(37,99,235,0.75);
  filter: brightness(1.05);
}

/* --------------------------------------------------------------------------
   Glass navbar
   -------------------------------------------------------------------------- */
.glass-nav {
  background: rgba(255,255,255,0.72);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(15,23,42,0.06);
  transition: box-shadow .3s ease, background .3s ease;
}
.glass-nav.scrolled {
  background: rgba(255,255,255,0.92);
  box-shadow: 0 10px 30px -14px rgba(15,23,42,0.25);
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card-premium {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(15,23,42,0.06);
  border-radius: 1.25rem;
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease, border-color .35s ease;
}
.card-premium:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px -24px rgba(37,99,235,0.35);
  border-color: rgba(37,99,235,0.35);
}

.icon-badge {
  background: linear-gradient(135deg, #2563eb 0%, #38bdf8 100%);
  box-shadow: 0 12px 24px -10px rgba(37,99,235,0.7);
}

/* Shine sweep on hover for feature media */
.media-shine { position: relative; overflow: hidden; }
.media-shine::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,0.35) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform .8s ease;
}
.card-premium:hover .media-shine::after { transform: translateX(120%); }

/* --------------------------------------------------------------------------
   Animated gradient blobs (hero ambience)
   -------------------------------------------------------------------------- */
.blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(72px);
  opacity: .32;
  animation: float 12s ease-in-out infinite;
}
@keyframes float {
  0%,100% { transform: translateY(0) translateX(0) scale(1); }
  50%     { transform: translateY(-28px) translateX(16px) scale(1.08); }
}

/* --------------------------------------------------------------------------
   Scroll reveal
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .blob { animation: none; }
}

/* --------------------------------------------------------------------------
   Custom scrollbar
   -------------------------------------------------------------------------- */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: #eef2f7; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(#2563eb, #1d4ed8);
  border-radius: 10px;
  border: 2px solid #eef2f7;
}
::selection { background: rgba(37,99,235,0.2); }

/* Marquee for trust bar */
.marquee { display: flex; gap: 4rem; animation: marquee 28s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-wrap:hover .marquee { animation-play-state: paused; }