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

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --parallax-offset: 0px;
  }

  * {
    @apply box-border;
  }

  body {
    @apply m-0 bg-gray-900 font-sans text-white antialiased leading-relaxed;
    background: radial-gradient(circle at 20% 20%, rgba(74, 95, 255, 0.35), transparent 35%),
      radial-gradient(circle at 80% 0%, rgba(44, 63, 209, 0.3), transparent 25%),
      theme('colors.gray.900');
  }

  body.parallax-enabled {
    --parallax-offset: 0px;
  }

  a {
    color: inherit;
    @apply no-underline;
  }

  a:focus-visible {
    outline-offset: 3px;
    @apply rounded-full outline outline-2 outline-blue-500;
  }

  main {
    @apply flex flex-col gap-section;
  }
}

@layer components {
  header {
    @apply sticky top-0 z-10 border-b border-card-border bg-blue-900/70 backdrop-blur-lg;
  }

  .nav-bar {
    @apply mx-auto flex max-w-layout items-center justify-between gap-4 px-6 py-4;
  }

  .brand {
    @apply flex items-center gap-3 font-bold tracking-tight;
  }

  .brand img {
    @apply h-10 w-10 rounded-full object-cover shadow-strong;
  }

  nav ul {
    @apply m-0 flex list-none gap-5 p-0 font-semibold;
  }

  nav a {
    @apply rounded-full px-3 py-[7px] transition duration-200 ease-in-out;
  }

  nav a:hover,
  nav a:focus-visible {
    background: rgba(74, 95, 255, 0.2);
    @apply -translate-y-[1px] text-white;
  }

  .section-shell {
    @apply mx-auto max-w-layout px-6;
  }

  .section-heading-row {
    @apply flex flex-col gap-3 md:flex-row md:items-center md:justify-between;
  }

  .section-heading {
    @apply text-[clamp(2rem,3vw,2.6rem)] font-bold leading-tight text-white;
  }

  .muted {
    @apply max-w-3xl text-lg text-gray-200/90;
  }

  .pill {
    @apply mb-2 inline-flex items-center gap-2 rounded-full border border-card-border bg-white/10 px-4 py-2 text-sm font-semibold uppercase tracking-[2px] text-gray-200;
  }

  .hero {
    @apply relative overflow-hidden px-6 pt-[calc(theme('spacing.11')+4px)] pb-[calc(theme('spacing.11')+12px)];
  }

  .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: image-set(
        url('assets/images/hHALEzndCocwwCc4c2OojsBsSo.avif') type('image/avif'),
        url('assets/images/hHALEzndCocwwCc4c2OojsBsSo.webp') type('image/webp'),
        url('assets/images/hHALEzndCocwwCc4c2OojsBsSo.png') type('image/png')
      )
      center/cover no-repeat;
    opacity: 0.14;
    pointer-events: none;
    transform: translateY(var(--parallax-offset, 0px));
    transition: transform 0.5s ease;
  }

  .hero-content {
    @apply relative grid max-w-[820px] gap-4;
  }

  .eyebrow {
    @apply text-[0.9rem] font-bold uppercase tracking-[2px] text-[#c7d3ff];
  }

  h1 {
    @apply m-0 text-[clamp(2.6rem,4vw,3.75rem)] leading-[1.1];
  }

  .lede {
    @apply max-w-[680px] text-lg text-[#dde5ff];
  }

  .cta-row {
    @apply flex flex-wrap items-center gap-4;
  }

  .button {
    background: linear-gradient(135deg, theme('colors.blue.700'), theme('colors.blue.500'));
    @apply inline-flex items-center gap-2 rounded-full px-[18px] py-3 font-bold text-white shadow-strong transition duration-200 ease-in-out;
    box-shadow: 0 12px 30px rgba(74, 95, 255, 0.45);
  }

  .button:hover {
    box-shadow: 0 16px 36px rgba(74, 95, 255, 0.5);
    @apply -translate-y-[2px];
  }

  .social-links {
    @apply flex items-center gap-3;
  }

  .social-links a {
    @apply grid h-9 w-9 place-items-center rounded-full border border-card-border bg-white/10 transition duration-200 ease-in-out;
  }

  .social-links a:hover {
    @apply -translate-y-[2px] bg-white/20;
  }

  .badge-row {
    @apply flex flex-wrap gap-3;
  }

  .badge {
    @apply rounded-full border border-card-border bg-white/10 px-4 py-2 font-semibold;
  }

  .metrics {
    @apply relative z-[1] mx-auto mt-8 grid w-full max-w-layout grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-4 rounded-md border border-card-border bg-blue-900/60 p-6 backdrop-blur shadow-strong;
  }

  .metrics dt {
    @apply m-0 text-[0.95rem] font-semibold text-[#d6ddff];
  }

  .metrics dd {
    @apply m-0 mt-1 text-lg font-bold;
  }

  .values-grid,
  .services-grid,
  .features-grid,
  .faq-grid,
  .services-detail-grid {
    @apply grid gap-6;
  }

  .values-grid {
    @apply grid-cols-[repeat(auto-fit,minmax(240px,1fr))];
  }

  .services-grid {
    @apply grid-cols-1 md:grid-cols-2 xl:grid-cols-4;
  }

  .features-grid {
    @apply grid-cols-[repeat(auto-fit,minmax(260px,1fr))];
  }

  .faq-grid {
    @apply grid-cols-[repeat(auto-fit,minmax(280px,1fr))];
  }

  .services-detail-grid {
    @apply grid-cols-1 sm:grid-cols-2 xl:grid-cols-4;
  }

  .card {
    @apply rounded-md border border-card-border bg-surface p-6 shadow-soft backdrop-blur;
  }

  .values-grid .card {
    @apply bg-white/5;
  }

  .inline-link {
    @apply font-semibold text-blue-300 underline decoration-blue-500 decoration-2 underline-offset-4 transition hover:text-white;
  }

  .service-card {
    @apply h-full;
  }

  .service-card figure {
    @apply aspect-[16/9] w-full overflow-hidden;
    max-height: clamp(180px, 45vw, 260px);
  }

  .service-card figure img {
    @apply h-full w-full rounded-md object-cover shadow-soft;
  }

  .service-card__heading {
    @apply mt-4 flex items-center justify-between gap-2;
  }

  .service-card__heading h3 {
    @apply text-xl font-bold;
  }

  .service-card__cta {
    @apply text-sm font-semibold text-blue-200;
  }

  .service-card ul {
    @apply mt-3 list-disc space-y-2 pl-5 text-gray-200;
  }

  .service-card__link {
    color: inherit;
    @apply block h-full no-underline transition duration-200 ease-in-out hover:-translate-y-[2px];
  }

  .service-card {
    @apply flex h-full flex-col;
  }

  .section-shell .card + .card {
    @apply mt-4;
  }

  .features-grid .card,
  .faq-grid .card,
  .services-detail-grid .card {
    @apply bg-white/5;
  }

  .testimonial {
    @apply grid gap-4 rounded-md border border-card-border bg-white/5 p-6 shadow-soft md:grid-cols-[auto,1fr];
  }

  .testimonial cite {
    @apply block font-semibold text-blue-200;
  }

  .cta-panel {
    @apply grid gap-6 rounded-md border border-card-border bg-gradient-to-r from-blue-800/70 to-blue-600/60 p-8 shadow-elevated md:grid-cols-2;
  }

  .cta-panel .button {
    @apply shadow-elevated;
  }

  .footer-shell {
    @apply mx-auto flex max-w-layout flex-col gap-6 border-t border-card-border px-6 py-8 text-sm text-gray-200/80;
  }

  .footer-links {
    @apply flex flex-wrap gap-4 font-semibold text-white;
  }

  .contact-form {
    @apply mt-6 grid gap-4 rounded-md border border-card-border bg-white/5 p-6 shadow-soft;
  }

  .form-grid {
    @apply grid gap-4 md:grid-cols-2;
  }

  .contact-form label {
    @apply block text-sm font-semibold text-gray-200;
  }

  .contact-form input,
  .contact-form textarea {
    @apply mt-2 w-full rounded-md border border-card-border bg-gray-800 p-3 text-white outline-none ring-0 transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500;
  }

  .contact-form textarea {
    @apply min-h-[160px] md:col-span-2;
  }

  .contact-form button {
    @apply justify-self-start;
  }

  .services-detail-grid h3 {
    @apply text-xl font-bold;
  }

  .full-width {
    @apply w-full;
  }
}

@layer utilities {
  .blur-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(12, 26, 83, 0) 0%, rgba(12, 26, 83, 0.8) 100%);
  }
}