html {
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
}

[x-cloak] {
  display: none !important;
}

::selection {
  background: #bde038;
  color: #0a2e36;
}

/* Soft dotted / grid background used behind hero sections */
.bg-grid {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.18) 1px, transparent 1px);
  background-size: 26px 26px;
}


/* Marquee for trust strip */
.marquee-track {
  animation: marquee 28s linear infinite;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Gradient text */
.text-gradient {
  background: linear-gradient(90deg, #bde038, #7fbf7a 60%, #10454f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #10454f;
  border-radius: 999px;
}

/* Card hover lift */
.card-hover {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.card-hover:hover {
  transform: translateY(-6px);
}

/* Floating portfolio cards in hero */
@keyframes float-a {
  0%, 100% { transform: translateY(0) rotate(var(--r, 6deg)); }
  50% { transform: translateY(-18px) rotate(var(--r, 6deg)); }
}
.animate-float {
  animation: float-a 6s ease-in-out infinite;
}

/* Slow-drifting gradient blobs */
@keyframes blob-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -40px) scale(1.12); }
  66% { transform: translate(-25px, 25px) scale(0.92); }
}
.animate-blob {
  animation: blob-drift 14s ease-in-out infinite;
}

/* Animated gradient sheen sweeping across dark hero sections */
@keyframes sheen-sweep {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.bg-sheen {
  background-image: linear-gradient(115deg, transparent 30%, rgba(189, 224, 56, 0.10) 45%, rgba(189, 224, 56, 0.14) 50%, transparent 65%);
  background-size: 250% 250%;
  animation: sheen-sweep 9s linear infinite;
}

/* Pulsing accent dot */
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(189, 224, 56, 0.55); }
  70% { box-shadow: 0 0 0 10px rgba(189, 224, 56, 0); }
}
.animate-pulse-dot {
  animation: pulse-dot 2s ease-in-out infinite;
}

/* Rich, layered gradient for dark hero/CTA sections instead of a flat fill */
.bg-hero-gradient {
  background-color: #0a2e36;
  background-image:
    radial-gradient(90% 120% at 12% -10%, rgba(21, 90, 104, 0.85) 0%, rgba(10, 46, 54, 0) 55%),
    radial-gradient(70% 90% at 100% 0%, rgba(189, 224, 56, 0.16) 0%, rgba(10, 46, 54, 0) 50%),
    linear-gradient(180deg, #0d3742 0%, #0a2e36 55%, #071f24 100%);
}

/* Subtle film-grain texture for depth on any positioned container */
.bg-noise {
  position: relative;
  isolation: isolate;
}
.bg-noise::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}

/* Soft radial wash used behind light (white/slate) sections for depth --
   two points (top-right, bottom-left) so long sections don't fade to flat
   white halfway down, plus a faint dot texture for consistency with the
   dark hero sections. */
.bg-wash {
  background-image:
    radial-gradient(50% 60% at 88% 0%, rgba(16, 69, 79, 0.06) 0%, rgba(16, 69, 79, 0) 60%),
    radial-gradient(45% 55% at 5% 100%, rgba(189, 224, 56, 0.08) 0%, rgba(189, 224, 56, 0) 60%),
    radial-gradient(circle, rgba(10, 46, 54, 0.07) 1px, transparent 1px);
  background-size: auto, auto, 28px 28px;
}

/* Blog article body typography (content comes from the admin's HTML editor) */
.prose-content {
  color: #334155;
  font-size: 1.0625rem;
  line-height: 1.8;
}
.prose-content > * + * {
  margin-top: 1.25em;
}
.prose-content h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: #0a2e36;
  margin-top: 2em;
}
.prose-content h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: #0a2e36;
  margin-top: 1.75em;
}
.prose-content ul, .prose-content ol {
  padding-left: 1.4em;
}
.prose-content ul { list-style: disc; }
.prose-content ol { list-style: decimal; }
.prose-content li + li { margin-top: 0.5em; }
.prose-content a {
  color: #10454f;
  text-decoration: underline;
  text-decoration-color: #bde038;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
.prose-content strong { color: #0a2e36; font-weight: 600; }
.prose-content blockquote {
  border-left: 3px solid #bde038;
  padding-left: 1.25em;
  font-style: italic;
  color: #475569;
}
.prose-content code {
  background: #f1f5f9;
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-size: 0.9em;
}