/* FlowSync UI polish layer: small visual refinements over the generated build. */
:root {
  --fs-ink-soft: rgba(15, 23, 42, 0.72);
  --fs-blue-soft: rgba(37, 99, 235, 0.12);
  --fs-blue-line: rgba(37, 99, 235, 0.22);
  --fs-card-shadow: 0 18px 60px rgba(15, 23, 42, 0.08);
  --fs-card-shadow-strong: 0 28px 90px rgba(15, 23, 42, 0.14);
}

body {
  background:
    radial-gradient(circle at 10% 0%, rgba(37, 99, 235, 0.055), transparent 34rem),
    radial-gradient(circle at 90% 18%, rgba(59, 130, 246, 0.045), transparent 28rem),
    var(--color-background);
}

::selection {
  background: rgba(37, 99, 235, 0.18);
  color: var(--color-foreground);
}

.bg-secondary {
  background:
    radial-gradient(circle at 18% 12%, rgba(37, 99, 235, 0.18), transparent 30rem),
    radial-gradient(circle at 84% 8%, rgba(124, 58, 237, 0.14), transparent 28rem),
    linear-gradient(180deg, #101a2e 0%, #0d1728 52%, #0f172a 100%) !important;
}

.tech-grid-bg {
  opacity: 0.24 !important;
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
}

.gradient-text {
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 42%, #0ea5e9 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.text-glow {
  text-shadow: 0 0 34px rgba(37, 99, 235, 0.48), 0 0 90px rgba(14, 165, 233, 0.22);
}

.sticky.top-16 {
  border-color: rgba(226, 232, 240, 0.82) !important;
  box-shadow: 0 10px 36px rgba(15, 23, 42, 0.055);
}

.bg-background\/95,
[style*="blur(12px)"] {
  backdrop-filter: blur(18px) saturate(1.18) !important;
}

.rounded-2xl.border,
.rounded-3xl.border,
.rounded-xl.border {
  box-shadow: var(--fs-card-shadow);
}

.group.rounded-2xl,
.group.rounded-3xl,
.card-glow,
article.rounded-2xl,
[class*="hover:-translate-y"] {
  transition-duration: 260ms !important;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.group.rounded-2xl:hover,
.group.rounded-3xl:hover,
.card-glow:hover,
article.rounded-2xl:hover {
  box-shadow: var(--fs-card-shadow-strong), 0 0 0 1px var(--fs-blue-line);
}

.glow-btn,
button[type="submit"],
a.bg-primary,
button.bg-primary {
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.24) !important;
}

.glow-btn:before,
button[type="submit"]:before,
a.bg-primary:before,
button.bg-primary:before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-120%) skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.glow-btn:hover:before,
button[type="submit"]:hover:before,
a.bg-primary:hover:before,
button.bg-primary:hover:before {
  transform: translateX(120%) skewX(-18deg);
}

input,
select,
textarea {
  box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.035);
}

input:focus,
select:focus,
textarea:focus {
  background: color-mix(in srgb, var(--color-background) 96%, var(--color-primary) 4%) !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
}

textarea {
  min-height: 8.5rem;
}

.inline-flex.rounded-full,
.inline-flex.rounded-md {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 10px 30px rgba(37, 99, 235, 0.08);
}

img {
  border-radius: inherit;
}

footer {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

@media (min-width: 768px) {
  h1 {
    letter-spacing: -0.035em;
  }

  .rounded-3xl {
    border-radius: 1.65rem;
  }
}

@media (max-width: 767px) {
  :root {
    --section-spacing-mobile: 3.25rem;
    --container-padding-mobile: 1.1rem;
  }

  h1 {
    letter-spacing: -0.025em;
  }

  .rounded-3xl {
    border-radius: 1.2rem;
  }

  .grid {
    row-gap: 1.35rem;
  }

  button[type="submit"],
  a.bg-primary,
  button.bg-primary {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .glow-btn:before,
  button[type="submit"]:before,
  a.bg-primary:before,
  button.bg-primary:before {
    display: none;
  }

  *,
  *:before,
  *:after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

@media (max-width: 767px) {
  .blur-\[80px\],
  .blur-\[90px\],
  .blur-\[100px\],
  .blur-\[110px\],
  .blur-\[120px\],
  .blur-\[140px\],
  .blur-\[160px\] {
    filter: blur(44px) !important;
  }

  .animate-pulse,
  .animate-ping {
    animation: none !important;
  }

  .rounded-2xl.border,
  .rounded-3xl.border,
  .rounded-xl.border,
  .group.rounded-2xl:hover,
  .group.rounded-3xl:hover,
  .card-glow:hover,
  article.rounded-2xl:hover {
    box-shadow: 0 12px 34px rgba(15, 23, 42, 0.07) !important;
  }
}

/* Stronger reset for generated nav item pills, including active mobile inline styles. */
nav a:has([data-text-id="nav.home"]),
nav a:has([data-text-id="nav.services"]),
nav a:has([data-text-id="nav.about"]),
nav a:has([data-text-id="nav.insights"]),
nav a:has([data-text-id="nav.contact"]) {
  background: transparent !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

nav a:has([data-text-id="nav.home"]):hover,
nav a:has([data-text-id="nav.services"]):hover,
nav a:has([data-text-id="nav.about"]):hover,
nav a:has([data-text-id="nav.insights"]):hover,
nav a:has([data-text-id="nav.contact"]):hover {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

nav a:has([data-text-id="nav.home"]) > span[class*="rounded-full"],
nav a:has([data-text-id="nav.services"]) > span[class*="rounded-full"],
nav a:has([data-text-id="nav.about"]) > span[class*="rounded-full"],
nav a:has([data-text-id="nav.insights"]) > span[class*="rounded-full"],
nav a:has([data-text-id="nav.contact"]) > span[class*="rounded-full"] {
  display: none !important;
}

@media (max-width: 1023px) {
  nav a:has([data-text-id="nav.home"]),
  nav a:has([data-text-id="nav.services"]),
  nav a:has([data-text-id="nav.about"]),
  nav a:has([data-text-id="nav.insights"]),
  nav a:has([data-text-id="nav.contact"]) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Keep primary CTA buttons intact after nav link cleanup. */
nav a:has([data-text-id="nav.book"]),
.fixed.top-0 a:has([data-text-id="nav.book"]) {
  border-radius: 0.75rem !important;
}

nav a.color-cycle-btn:has([data-text-id="nav.book"]),
.fixed.top-0 a.color-cycle-btn:has([data-text-id="nav.book"]) {
  color: #fff !important;
  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.24) !important;
}

/* Final navbar text-link reset: no chips, no individual surfaces. */
header nav,
header nav > div {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

header nav a:has([data-text-id="nav.home"]),
header nav a:has([data-text-id="nav.services"]),
header nav a:has([data-text-id="nav.about"]),
header nav a:has([data-text-id="nav.insights"]),
header nav a:has([data-text-id="nav.contact"]),
header nav a:has([data-text-id="nav.home"]) *,
header nav a:has([data-text-id="nav.services"]) *,
header nav a:has([data-text-id="nav.about"]) *,
header nav a:has([data-text-id="nav.insights"]) *,
header nav a:has([data-text-id="nav.contact"]) * {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

header nav a:has([data-text-id="nav.home"]),
header nav a:has([data-text-id="nav.services"]),
header nav a:has([data-text-id="nav.about"]),
header nav a:has([data-text-id="nav.insights"]),
header nav a:has([data-text-id="nav.contact"]) {
  padding: 0 !important;
}

header nav a:has([data-text-id="nav.home"]):after,
header nav a:has([data-text-id="nav.services"]):after,
header nav a:has([data-text-id="nav.about"]):after,
header nav a:has([data-text-id="nav.insights"]):after,
header nav a:has([data-text-id="nav.contact"]):after,
header nav a:has([data-text-id="nav.home"]):before,
header nav a:has([data-text-id="nav.services"]):before,
header nav a:has([data-text-id="nav.about"]):before,
header nav a:has([data-text-id="nav.insights"]):before,
header nav a:has([data-text-id="nav.contact"]):before {
  display: none !important;
}