:root {
  color-scheme: light;
  --cy-site-bg:
    radial-gradient(circle at 8% -8%, rgba(14, 165, 233, 0.15), transparent 31%),
    radial-gradient(circle at 88% 0%, rgba(248, 189, 51, 0.18), transparent 28%),
    radial-gradient(circle at 50% 54%, rgba(15, 23, 42, 0.045), transparent 34%),
    linear-gradient(180deg, #fbfdff 0%, #f7fafc 36%, #edf4f8 100%);
  --cy-panel-bg: rgba(255, 255, 255, 0.9);
  --cy-panel-border: rgba(255, 255, 255, 0.92);
  --cy-panel-shadow: 0 24px 70px rgba(15, 23, 42, 0.09), 0 1px 0 rgba(255, 255, 255, 0.72) inset;
  --cy-panel-shadow-strong: 0 34px 100px rgba(15, 23, 42, 0.16), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
  --cy-glass-shadow: 0 22px 70px rgba(15, 23, 42, 0.12);
  --cy-radius: 2rem;
  --cy-ink: #0b1220;
  --cy-gold: #f8bd33;
  --cy-cyan: #22d3ee;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--cy-site-bg);
  background-attachment: fixed;
  text-rendering: optimizeLegibility;
  color: var(--cy-ink);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at center, black 35%, transparent 88%);
  opacity: 0.48;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.72), transparent 18%, transparent 82%, rgba(255, 255, 255, 0.72));
  z-index: -1;
}

::selection {
  background: rgba(248, 189, 51, 0.35);
  color: #020617;
}

header {
  backdrop-filter: blur(18px);
}

.nav-shell,
header > div.mx-auto,
header .mx-auto.flex.max-w-6xl.flex-col.gap-3.px-4.py-3.sm\:flex-row.sm\:items-center.sm\:justify-between.md\:px-6 {
  border-color: rgba(255, 255, 255, 0.75);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.82)),
    linear-gradient(90deg, rgba(34, 211, 238, 0.12), rgba(248, 189, 51, 0.1));
  box-shadow: 0 18px 54px rgba(15, 23, 42, 0.1), 0 1px 0 rgba(255, 255, 255, 0.85) inset;
}

.nav-shell {
  backdrop-filter: blur(16px);
}

.logo-mark {
  filter: drop-shadow(0 14px 22px rgba(15, 23, 42, 0.13));
}

.hero-overlay {
  position: relative;
}

.hero-overlay::before {
  content: "";
  position: absolute;
  inset: -5rem -1.5rem auto;
  height: 22rem;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(34, 211, 238, 0.13), transparent 62%);
}

.section-grid {
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px),
    radial-gradient(circle at center, rgba(34, 211, 238, 0.08), transparent 38%);
  background-size: 42px 42px, 42px 42px, 100% 100%;
}

section.bg-slate-950 {
  background:
    radial-gradient(circle at 12% 12%, rgba(34, 211, 238, 0.14), transparent 28%),
    radial-gradient(circle at 86% 18%, rgba(248, 189, 51, 0.14), transparent 24%),
    radial-gradient(circle at 50% 110%, rgba(15, 23, 42, 0.9), transparent 42%),
    linear-gradient(135deg, #020617 0%, #0f172a 46%, #111827 100%) !important;
}

.tech-panel,
.blog-card,
article.rounded-3xl.border.border-slate-200.bg-white,
div.rounded-3xl.border.border-slate-200.bg-slate-50,
div.rounded-\[2rem\].border.border-slate-200\/80.bg-white\/80,
div.rounded-\[2rem\].border.border-slate-200.bg-white,
div.rounded-\[2rem\].border.border-slate-200.bg-slate-50,
article.rounded-3xl.border.border-slate-200.bg-yellow-50,
div.rounded-2xl.border.border-white\/10.bg-white\/5,
div.rounded-3xl.border.border-white\/10.bg-white\/5,
div.city-shell,
div.tech-panel-dark {
  position: relative;
  overflow: hidden;
}

.tech-panel > *,
.blog-card > *,
article.rounded-3xl.border.border-slate-200.bg-white > *,
div.rounded-3xl.border.border-slate-200.bg-slate-50 > *,
div.rounded-\[2rem\].border.border-slate-200\/80.bg-white\/80 > *,
div.rounded-\[2rem\].border.border-slate-200.bg-white > *,
div.rounded-\[2rem\].border.border-slate-200.bg-slate-50 > *,
article.rounded-3xl.border.border-slate-200.bg-yellow-50 > *,
div.rounded-2xl.border.border-white\/10.bg-white\/5 > *,
div.rounded-3xl.border.border-white\/10.bg-white\/5 > *,
div.city-shell > *,
div.tech-panel-dark > * {
  position: relative;
  z-index: 1;
}

.tech-panel::before,
.blog-card::before,
article.rounded-3xl.border.border-slate-200.bg-white::before,
div.rounded-3xl.border.border-slate-200.bg-slate-50::before,
div.rounded-\[2rem\].border.border-slate-200\/80.bg-white\/80::before,
div.rounded-\[2rem\].border.border-slate-200.bg-white::before,
div.rounded-\[2rem\].border.border-slate-200.bg-slate-50::before,
article.rounded-3xl.border.border-slate-200.bg-yellow-50::before,
div.rounded-2xl.border.border-white\/10.bg-white\/5::before,
div.rounded-3xl.border.border-white\/10.bg-white\/5::before,
div.city-shell::before,
div.tech-panel-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), transparent 24%),
    radial-gradient(circle at top right, rgba(125, 211, 252, 0.15), transparent 27%),
    radial-gradient(circle at bottom left, rgba(250, 204, 21, 0.12), transparent 24%);
}

.tech-panel,
.blog-card,
article.rounded-3xl.border.border-slate-200.bg-white,
div.rounded-3xl.border.border-slate-200.bg-slate-50,
div.rounded-\[2rem\].border.border-slate-200\/80.bg-white\/80,
div.rounded-\[2rem\].border.border-slate-200.bg-white,
div.rounded-\[2rem\].border.border-slate-200.bg-slate-50,
article.rounded-3xl.border.border-slate-200.bg-yellow-50 {
  border-color: rgba(255, 255, 255, 0.86) !important;
  background-color: var(--cy-panel-bg) !important;
  box-shadow: var(--cy-panel-shadow) !important;
  backdrop-filter: blur(16px);
}

.tech-panel::after,
.blog-card::after,
article.rounded-3xl.border.border-slate-200.bg-white::after,
div.rounded-\[2rem\].border.border-slate-200\/80.bg-white\/80::after,
div.rounded-\[2rem\].border.border-slate-200.bg-white::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.72) inset;
}

article.rounded-3xl.border.border-slate-200.bg-yellow-50,
div.rounded-\[2rem\].border.border-slate-200.bg-slate-50,
div.rounded-3xl.border.border-slate-200.bg-slate-50 {
  background:
    radial-gradient(circle at top right, rgba(254, 240, 138, 0.42), transparent 30%),
    linear-gradient(180deg, rgba(255, 252, 242, 0.96), rgba(248, 250, 252, 0.92)) !important;
}

.tech-panel-dark,
div.city-shell,
div.rounded-2xl.border.border-white\/10.bg-white\/5,
div.rounded-3xl.border.border-white\/10.bg-white\/5 {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background-color: rgba(15, 23, 42, 0.58) !important;
  box-shadow: 0 30px 90px rgba(2, 6, 23, 0.44), 0 1px 0 rgba(255, 255, 255, 0.08) inset !important;
}

section.bg-white {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.56)) !important;
  backdrop-filter: blur(8px);
}

.btn-primary,
a.rounded-full.bg-\[\#F8BD33\] {
  border-color: rgba(248, 189, 51, 0.85) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.36), transparent 38%),
    linear-gradient(135deg, #ffe08a 0%, #f8bd33 48%, #d99618 100%) !important;
  box-shadow: 0 18px 42px rgba(248, 189, 51, 0.34), 0 0 0 1px rgba(248, 189, 51, 0.16), 0 1px 0 rgba(255, 255, 255, 0.55) inset !important;
  position: relative;
}

.btn-primary::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(248, 189, 51, 0.3), transparent);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.btn-primary:hover::before {
  opacity: 1;
}

.btn-primary:hover,
a.rounded-full.bg-\[\#F8BD33\]:hover {
  transform: translateY(-2px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.44), transparent 38%),
    linear-gradient(135deg, #fff0b8 0%, #f8bd33 48%, #c98512 100%) !important;
  box-shadow: 0 24px 54px rgba(248, 189, 51, 0.38), 0 0 0 1px rgba(248, 189, 51, 0.26), 0 1px 0 rgba(255, 255, 255, 0.62) inset !important;
}

.btn-secondary {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 44%),
    linear-gradient(135deg, #0f172a, #020617) !important;
  border-color: rgba(148, 163, 184, 0.44) !important;
  box-shadow: 0 16px 34px rgba(2, 6, 23, 0.2), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
}

.btn-secondary:hover {
  border-color: rgba(34, 211, 238, 0.44) !important;
  box-shadow: 0 20px 42px rgba(2, 6, 23, 0.26), 0 0 0 1px rgba(34, 211, 238, 0.08);
}

.btn-primary:focus-visible,
.btn-secondary:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 2px solid rgba(14, 165, 233, 0.55);
  outline-offset: 3px;
}

.blog-card,
article.rounded-3xl.border.border-slate-200.bg-white,
article.rounded-3xl.border.border-slate-200.bg-yellow-50,
div.rounded-\[2rem\].border.border-slate-200.bg-slate-50,
div.rounded-\[2rem\].border.border-slate-200\/80.bg-white\/80,
div.rounded-\[2rem\].border.border-slate-200.bg-white {
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.blog-card:hover,
article.rounded-3xl.border.border-slate-200.bg-white:hover,
article.rounded-3xl.border.border-slate-200.bg-yellow-50:hover,
div.rounded-\[2rem\].border.border-slate-200.bg-slate-50:hover,
div.rounded-\[2rem\].border.border-slate-200\/80.bg-white\/80:hover,
div.rounded-\[2rem\].border.border-slate-200.bg-white:hover {
  transform: translateY(-5px);
  box-shadow: var(--cy-panel-shadow-strong) !important;
}

.mobile-image-frame,
.tool-gallery-card {
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.14), 0 1px 0 rgba(255, 255, 255, 0.76) inset !important;
}

.tool-gallery-card {
  border-color: rgba(255, 255, 255, 0.16) !important;
}

.tool-gallery-caption {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.9), rgba(2, 6, 23, 0.82)) !important;
  box-shadow: 0 18px 40px rgba(2, 6, 23, 0.32), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
}

.meta-chip,
.metric-chip,
span.rounded-full.border.border-slate-200.bg-slate-50,
div.mt-6.flex.flex-wrap.gap-2.text-\[11px\].font-semibold.uppercase.tracking-\[0\.24em\].text-slate-500 > span,
div.mt-8.flex.flex-wrap.gap-3.text-sm.text-slate-300 > span {
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.footer-shell {
  background:
    radial-gradient(circle at top left, rgba(125, 211, 252, 0.18), transparent 26%),
    radial-gradient(circle at top right, rgba(250, 204, 21, 0.16), transparent 22%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(241, 245, 249, 0.96)) !important;
  backdrop-filter: blur(12px);
}

a {
  text-underline-offset: 0.18em;
}

main section {
  position: relative;
}

@media (max-width: 768px) {
  body::before {
    opacity: 0.28;
    background-size: 30px 30px;
  }

  .logo-mark {
    height: 3.75rem;
  }

  .nav-shell,
  header > div.mx-auto,
  header .mx-auto.flex.max-w-6xl.flex-col.gap-3.px-4.py-3.sm\:flex-row.sm\:items-center.sm\:justify-between.md\:px-6 {
    border-radius: 1.4rem;
  }

  .tech-panel,
  .blog-card,
  article.rounded-3xl.border.border-slate-200.bg-white,
  article.rounded-3xl.border.border-slate-200.bg-yellow-50,
  div.rounded-\[2rem\].border.border-slate-200.bg-slate-50,
  div.rounded-\[2rem\].border.border-slate-200\/80.bg-white\/80,
  div.rounded-\[2rem\].border.border-slate-200.bg-white {
    box-shadow: 0 16px 44px rgba(15, 23, 42, 0.09) !important;
  }

  .mobile-image-frame {
    margin-inline: -1rem;
    padding: 0.15rem !important;
    border-radius: 1.4rem;
  }

  .mobile-feature-image > img,
  .mobile-diagram-frame > img {
    display: block;
    border-radius: 1.2rem !important;
  }

  .mobile-feature-image > img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
  }

  .mobile-diagram-frame > img {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
  }

  .mobile-split-media {
    gap: 0.85rem !important;
    padding: 0.65rem !important;
  }

  .mobile-split-media .mobile-media-figure {
    margin-inline: -0.65rem;
  }

  .mobile-split-media .mobile-media-figure img {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
  }

  .mobile-split-media .mobile-media-figure figcaption {
    padding-inline: 0.85rem;
  }
}

/* Premium scrollbar */
::-webkit-scrollbar {
  width: 7px;
}
::-webkit-scrollbar-track {
  background: rgba(241, 245, 249, 0.5);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #cbd5e1, #94a3b8);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #94a3b8, #64748b);
}

/* Premium form inputs */
input[type="text"],
input[type="email"],
textarea,
select {
  background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04), 0 1px 0 rgba(255, 255, 255, 0.8) inset !important;
  transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease !important;
}
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(248, 189, 51, 0.16), 0 4px 14px rgba(15, 23, 42, 0.06) !important;
}

/* Typography polish */
h1, h2, h3 {
  letter-spacing: -0.025em;
  text-wrap: balance;
}
h1 {
  line-height: 1.08;
}
h2 {
  line-height: 1.12;
}

/* Image sharpness */
img {
  image-rendering: -webkit-optimize-contrast;
}

/* Link transitions */
a {
  transition: color 0.18s ease, opacity 0.18s ease;
}

/* Nav link premium hover underline */
header nav a {
  position: relative;
}
header nav a::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: linear-gradient(90deg, var(--cy-cyan), var(--cy-gold));
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.28s ease;
  border-radius: 1px;
}
header nav a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Scroll-to-top button premium styling */
#scrollTopButton {
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 14px 38px rgba(248, 189, 51, 0.32), 0 0 0 1px rgba(248, 189, 51, 0.12), 0 1px 0 rgba(255, 255, 255, 0.5) inset !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease !important;
}
#scrollTopButton:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 18px 48px rgba(248, 189, 51, 0.38), 0 0 0 1px rgba(248, 189, 51, 0.18), 0 1px 0 rgba(255, 255, 255, 0.6) inset !important;
}

/* Blog prose refinements */
.blog-prose h2 {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}
.blog-prose li {
  margin-bottom: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .blog-card,
  article.rounded-3xl.border.border-slate-200.bg-white,
  article.rounded-3xl.border.border-slate-200.bg-yellow-50,
  div.rounded-\[2rem\].border.border-slate-200.bg-slate-50,
  div.rounded-\[2rem\].border.border-slate-200\/80.bg-white\/80,
  div.rounded-\[2rem\].border.border-slate-200.bg-white,
  .btn-primary,
  a.rounded-full.bg-\[\#F8BD33\] {
    transition: none;
  }

  .blog-card:hover,
  article.rounded-3xl.border.border-slate-200.bg-white:hover,
  article.rounded-3xl.border.border-slate-200.bg-yellow-50:hover,
  div.rounded-\[2rem\].border.border-slate-200.bg-slate-50:hover,
  div.rounded-\[2rem\].border.border-slate-200\/80.bg-white\/80:hover,
  div.rounded-\[2rem\].border.border-slate-200.bg-white:hover,
  .btn-primary:hover,
  a.rounded-full.bg-\[\#F8BD33\]:hover {
    transform: none;
  }
}