/* ============================================================
   Apex Technologies — Premium Theme Layer
   Loaded after the base styles to elevate the whole site.
   ============================================================ */

:root {
  --bg: #ffffff;
  --sky: #38bdf8;
  --sky-deep: #0ea5e9;
  --sky-tint: #eef8fe;
  --navy: #0b2d5c;
  --navy-deep: #061733;
  --ink: #17233a;
  --ink-soft: #5c6779;
  --line: #e8edf4;

  --shadow-sm: 0 1px 2px rgba(6, 23, 51, 0.06), 0 2px 8px rgba(6, 23, 51, 0.04);
  --shadow-md: 0 10px 30px -12px rgba(11, 45, 92, 0.18), 0 4px 12px rgba(6, 23, 51, 0.05);
  --shadow-lg: 0 30px 60px -24px rgba(11, 45, 92, 0.35), 0 8px 20px rgba(6, 23, 51, 0.08);
  --sky-grad: linear-gradient(135deg, #4fc9fb 0%, #0ea5e9 60%, #0b83c9 100%);
  --navy-grad: linear-gradient(155deg, #103a6e 0%, #0b2d5c 45%, #061733 100%);
}

html { scroll-behavior: smooth; }

body {
  color: var(--ink);
  letter-spacing: -0.006em;
  text-rendering: optimizeLegibility;
}

/* Slightly tighter, more confident display type */
h1, h2, h3, h4, .font-display { letter-spacing: -0.02em; }

/* Refined selection + scrollbar */
::selection { background: var(--sky); color: var(--navy-deep); }
* { scrollbar-color: var(--sky-deep) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgba(11, 45, 92, 0.28); border-radius: 999px; border: 2px solid #fff; }
*::-webkit-scrollbar-thumb:hover { background: rgba(11, 45, 92, 0.45); }

/* ---------- NAVIGATION ---------- */
#site-nav {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(11, 45, 92, 0.08);
}
#site-nav.scrolled {
  background: #ffffff !important;
  box-shadow: 0 14px 40px -22px rgba(11, 45, 92, 0.4);
}
/* Neutralise the old dark-hero white text so the solid white bar reads correctly */
#site-nav.on-dark:not(.scrolled) a.nav-link { color: var(--navy) !important; }
#site-nav.on-dark a.nav-link.text-sky-deep,
#site-nav a.nav-link.text-sky-deep { color: var(--sky-deep) !important; }
#site-nav .h-20 { height: 5.5rem; }

.nav-link { font-weight: 600; letter-spacing: -0.01em; transition: color 0.2s ease; }
.nav-link::after { height: 2px; border-radius: 999px; background: var(--sky-grad); }

/* Brand logo lockup — larger, on a solid white bar so its white background blends in */
.brand-lockup-img {
  height: 52px;
  width: auto;
  display: block;
}
@media (min-width: 1024px) { .brand-lockup-img { height: 60px; } }

.menu-btn-lite {
  border: 1px solid rgba(11, 45, 92, 0.15) !important;
  color: var(--navy);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.menu-btn-lite:hover { background: var(--sky-tint); border-color: rgba(14, 165, 233, 0.4) !important; }

/* ---------- BUTTONS ---------- */
.btn {
  border-radius: 999px;
  letter-spacing: -0.01em;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.btn-sky {
  background: var(--sky-grad) !important;
  color: #04263c !important;
  box-shadow: 0 12px 28px -10px rgba(14, 165, 233, 0.65);
}
.btn-sky:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -10px rgba(14, 165, 233, 0.8); }
.btn-navy {
  background: var(--navy-grad) !important;
  color: #fff !important;
  box-shadow: 0 12px 28px -12px rgba(11, 45, 92, 0.6);
}
.btn-navy:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(11, 45, 92, 0.75); }
.btn-outline { border: 1.5px solid rgba(255, 255, 255, 0.6); backdrop-filter: blur(4px); }
.btn-outline:hover { background: rgba(255, 255, 255, 0.14); }
.btn-outline-navy { border: 1.5px solid rgba(11, 45, 92, 0.35); }

/* Subtle sheen sweep on primary buttons */
.btn-sky::before, .btn-navy::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform 0.7s ease;
}
.btn-sky:hover::before, .btn-navy:hover::before { transform: translateX(130%); }

/* ---------- CARDS ---------- */
.card {
  border-radius: 20px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(14, 165, 233, 0.45);
}
/* Gradient icon chips inside cards */
.card .bg-sky-tint {
  background: linear-gradient(140deg, #e3f4fe 0%, #d3ecfd 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* ---------- HERO ---------- */
header.bg-navy-deep {
  background:
    radial-gradient(1100px 520px at 78% -10%, rgba(56, 189, 248, 0.22), transparent 60%),
    radial-gradient(760px 440px at 8% 110%, rgba(14, 165, 233, 0.16), transparent 60%),
    var(--navy-grad) !important;
}
header.bg-navy-deep::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 60%, rgba(6, 23, 51, 0.55));
  pointer-events: none;
}
/* Gradient accent on the hero highlight word */
header .text-sky {
  background: linear-gradient(100deg, #7dd6fb, #38bdf8 55%, #0ea5e9);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Frosted browser mockups */
.browser {
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

/* ---------- SECTION ACCENTS ---------- */
.text-sky.font-bold.uppercase,
p.text-sky {
  color: var(--sky-deep) !important;
}
/* eyebrow label pill treatment for section kickers */
section .text-sky.font-bold.uppercase.tracking-widest {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
section .text-sky.font-bold.uppercase.tracking-widest::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: var(--sky-grad);
}

/* Soft gradient on the light tinted sections */
section.bg-sky-tint {
  background: linear-gradient(180deg, #f4fbff 0%, #eaf6fe 100%) !important;
}

/* Dark sections get a subtle depth gradient */
section.bg-navy-deep, footer.bg-navy-deep {
  background:
    radial-gradient(800px 400px at 80% -20%, rgba(56, 189, 248, 0.14), transparent 60%),
    var(--navy-grad) !important;
}

/* ---------- TESTIMONIALS / CTA ---------- */
.testimonial-slide p.font-display { letter-spacing: -0.015em; }
.rounded-3xl.bg-gradient-to-br {
  box-shadow: 0 40px 80px -30px rgba(6, 23, 51, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ---------- FOOTER ---------- */
.brand-lockup-footer {
  background: #fff;
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.55);
}
.brand-lockup-footer-img { height: 34px; width: auto; display: block; }

/* ---------- REVEAL / MOTION POLISH ---------- */
.reveal { transform: translateY(26px); }
.card, .btn, .nav-link, a { -webkit-tap-highlight-color: transparent; }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2.5px solid var(--sky-deep);
  outline-offset: 2px;
  border-radius: 8px;
}