/* ============================================================================
   Zesty Solution — Home page styles (INLINED).
   All CSS lives inside this file, so there is no separate stylesheet to cache,
   mis-link, or have a build overwrite. The scroll-reveal stagger runs on
   animation-delay (not transition-delay), so hover effects are instant and
   consistent everywhere. Edit styles here; copy out to a shared file later.
============================================================================ */

/* ==========================================================================
   Zesty Solution — Vanilla CSS (faithful conversion of the Tailwind v4 build)
   styles.css : design tokens, base styles, and a utility layer that mirrors
   the exact Tailwind utilities used in the original components.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Syne:wght@500;600;700;800&family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700;800&display=swap");

/* ----------------------------- Tokens ----------------------------------- */
:root {
  --font-display: "Syne", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Poppins", ui-sans-serif, system-ui, sans-serif;

  --zesty-primary: #0948F5;
  --zesty-secondary: #212121;
  --zesty-bg: #FFFFFF;
  --zesty-surface: #F7F8FC;
  --zesty-accent: #EAF0FF;
  --zesty-text: #111111;
  --zesty-subtext: #6B7280;

  --border: rgba(0, 0, 0, 0.1);
}

/* ----------------------------- Reset ------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; border: 0 solid var(--border); }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }
html, body {
  font-family: var(--font-body);
  color: var(--zesty-text);
  background: var(--zesty-bg);
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
  min-height: 100%;
}
body { line-height: 1.5; }
img, svg, video { display: block; max-width: 100%; }
button { font-family: inherit; background: none; cursor: pointer; color: inherit; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 { font-weight: 500; line-height: 1.5; font-size: inherit; }

.font-display { font-family: var(--font-display); letter-spacing: -0.02em; }
.font-body { font-family: var(--font-body); }

/* hide scrollbar (marquee) */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* =====================================================================
   UTILITY LAYER — mirrors the default Tailwind v4 utilities in use.
   (1 spacing unit = 0.25rem = 4px)
   ===================================================================== */

/* display */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.block { display: block; }
.inline-block { display: inline-block; }
.hidden { display: none; }

/* position */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.inset-0 { inset: 0; }
.top-0 { top: 0; } .bottom-0 { bottom: 0; } .left-0 { left: 0; } .right-0 { right: 0; }
.top-4 { top: 1rem; } .top-10 { top: 2.5rem; } .top-16 { top: 4rem; }
.left-2 { left: 0.5rem; } .right-4 { right: 1rem; } .right-6 { right: 1.5rem; }
.right-12 { right: 3rem; } .right-20 { right: 5rem; } .right-0 { right: 0; }
.left-4 { left: 1rem; } .bottom-6 { bottom: 1.5rem; } .bottom-8 { bottom: 2rem; }
.bottom-32 { bottom: 8rem; } .left-6 { left: 1.5rem; } .left-[-7px] { left: -7px; }
.top-12 { top: 3rem; } .top-28 { top: 7rem; } .top-1\/2 { top: 50%; } .left-1\/2 { left: 50%; }
.inset-x-0 { left: 0; right: 0; } .inset-x-8 { left: 2rem; right: 2rem; }
.inset-12 { inset: 3rem; } .inset-8 { inset: 2rem; }
.-top-4 { top: -1rem; } .-top-6 { top: -1.5rem; } .-top-16 { top: -4rem; }
.-top-20 { top: -5rem; } .-top-32 { top: -8rem; } .-top-40 { top: -10rem; }
.-top-10 { top: -2.5rem; }
.-right-4 { right: -1rem; } .-right-6 { right: -1.5rem; } .-right-10 { right: -2.5rem; }
.-right-16 { right: -4rem; } .-right-20 { right: -5rem; } .-right-40 { right: -10rem; }
.-bottom-32 { bottom: -8rem; } .-bottom-40 { bottom: -10rem; }
.-left-10 { left: -2.5rem; } .-left-16 { left: -4rem; } .-left-40 { left: -10rem; }

.z-10 { z-index: 10; } .z-30 { z-index: 30; } .z-50 { z-index: 50; }

/* sizing */
.w-full { width: 100%; } .h-full { height: 100%; }
.w-px { width: 1px; } .h-px { height: 1px; }
.w-1\.5 { width: 0.375rem; } .h-1\.5 { height: 0.375rem; }
.w-2 { width: 0.5rem; } .h-2 { height: 0.5rem; }
.w-2\.5 { width: 0.625rem; } .h-2\.5 { height: 0.625rem; }
.w-3 { width: 0.75rem; } .h-3 { height: 0.75rem; }
.w-3\.5 { width: 0.875rem; } .h-3\.5 { height: 0.875rem; }
.w-8 { width: 2rem; } .h-8 { height: 2rem; } .h-6 { height: 1.5rem; }
.w-9 { width: 2.25rem; } .h-9 { height: 2.25rem; }
.w-10 { width: 2.5rem; } .h-10 { height: 2.5rem; }
.w-11 { width: 2.75rem; } .h-11 { height: 2.75rem; }
.w-12 { width: 3rem; } .h-12 { height: 3rem; }
.w-14 { width: 3.5rem; } .h-14 { height: 3.5rem; }
.w-16 { width: 4rem; } .h-16 { height: 4rem; }
.w-20 { width: 5rem; } .h-20 { height: 5rem; }
.w-24 { width: 6rem; } .h-24 { height: 6rem; }
.w-32 { width: 8rem; } .h-32 { height: 8rem; }
.w-48 { width: 12rem; } .h-48 { height: 12rem; }
.w-56 { width: 14rem; } .h-56 { height: 14rem; }
.w-64 { width: 16rem; } .h-64 { height: 16rem; }
.w-32 { width: 8rem; }
.h-px { height: 1px; }
.min-h-screen { min-height: 100vh; }

.max-w-fit { max-width: fit-content; }
.max-w-sm { max-width: 24rem; }
.max-w-md { max-width: 28rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-\[480px\] { max-width: 480px; }
.max-w-\[620px\] { max-width: 620px; }
.max-w-\[760px\] { max-width: 760px; }
.max-w-\[820px\] { max-width: 820px; }
.max-w-\[900px\] { max-width: 900px; }
.max-w-\[1280px\] { max-width: 1280px; }
.max-w-\[1320px\] { max-width: 1320px; }
.max-w-\[1400px\] { max-width: 1400px; }
.max-w-xl { max-width: 36rem; }

.flex-1 { flex: 1 1 0%; }
.flex-shrink-0, .shrink-0 { flex-shrink: 0; }

/* flex / grid helpers */
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.self-start { align-self: flex-start; }
.text-center { text-align: center; }
.text-left { text-align: left; }

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.col-span-6 { grid-column: span 6 / span 6; }
.col-span-8 { grid-column: span 8 / span 8; }
.grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.auto-rows-\[140px\] { grid-auto-rows: 140px; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-4 { grid-column: span 4 / span 4; }
.col-span-5 { grid-column: span 5 / span 5; }
.col-span-7 { grid-column: span 7 / span 7; }
.col-span-12 { grid-column: span 12 / span 12; }

/* gap */
.gap-0 { gap: 0; }
.gap-1 { gap: 0.25rem; }
.gap-1\.5 { gap: 0.375rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-12 { gap: 3rem; }
.gap-16 { gap: 4rem; }

/* space-y */
.space-y-1 > * + * { margin-top: 0.25rem; }
.space-y-1\.5 > * + * { margin-top: 0.375rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-5 > * + * { margin-top: 1.25rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }

/* margins */
.mx-auto { margin-left: auto; margin-right: auto; }
.ml-auto { margin-left: auto; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-9 { margin-top: 2.25rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }
.mt-14 { margin-top: 3.5rem; }
.mt-16 { margin-top: 4rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-16 { margin-bottom: 4rem; }
.mb-20 { margin-bottom: 5rem; }

/* padding */
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.p-7 { padding: 1.75rem; }
.p-8 { padding: 2rem; }
.p-10 { padding: 2.5rem; }
.p-12 { padding: 3rem; }
.p-16 { padding: 4rem; }
.p-24 { padding: 6rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-7 { padding-left: 1.75rem; padding-right: 1.75rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-3\.5 { padding-top: 0.875rem; padding-bottom: 0.875rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.py-24 { padding-top: 6rem; padding-bottom: 6rem; }
.py-32 { padding-top: 8rem; padding-bottom: 8rem; }
.pt-6 { padding-top: 1.5rem; }
.pt-8 { padding-top: 2rem; }
.pt-20 { padding-top: 5rem; }
.pt-32 { padding-top: 8rem; }
.pt-40 { padding-top: 10rem; }
.pb-10 { padding-bottom: 2.5rem; }
.pb-6 { padding-bottom: 1.5rem; }
.pb-16 { padding-bottom: 4rem; }
.pb-20 { padding-bottom: 5rem; }
.pb-24 { padding-bottom: 6rem; }
.pb-32 { padding-bottom: 8rem; }
.pr-2 { padding-right: 0.5rem; }
.pr-6 { padding-right: 1.5rem; }
.pl-10 { padding-left: 2.5rem; }

/* borders / radius */
.border { border-width: 1px; border-style: solid; }
.border-t { border-top-width: 1px; border-top-style: solid; }
.border-b { border-bottom-width: 1px; border-bottom-style: solid; }
.border-r { border-right-width: 1px; border-right-style: solid; }
.border-y { border-top-width: 1px; border-bottom-width: 1px; border-style: solid; }
.border-2 { border-width: 2px; border-style: solid; }
.border-4 { border-width: 4px; border-style: solid; }
.border-\[6px\] { border-width: 6px; border-style: solid; }
.border-black { border-color: #000; }
.border-black\/5 { border-color: rgba(0,0,0,0.05); }
.border-white\/30 { border-color: rgba(255,255,255,0.3); }
.rounded { border-radius: 0.25rem; }
.rounded-md { border-radius: 0.375rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-3xl { border-radius: 1.5rem; }
.rounded-full { border-radius: 9999px; }
.rounded-\[32px\] { border-radius: 32px; }
.rounded-\[34px\] { border-radius: 34px; }
.rounded-\[36px\] { border-radius: 36px; }
.rounded-\[40px\] { border-radius: 40px; }
.rounded-\[42px\] { border-radius: 42px; }

/* colors / bg */
.bg-white { background-color: #fff; }
.bg-black { background-color: #000; }
.bg-red-400 { background-color: #f87171; }
.bg-yellow-400 { background-color: #facc15; }
.bg-green-400 { background-color: #4ade80; }
.bg-gray-100 { background-color: #f3f4f6; }
.bg-white\/15 { background-color: rgba(255,255,255,0.15); }
.bg-white\/40 { background-color: rgba(255,255,255,0.4); }
.bg-white\/60 { background-color: rgba(255,255,255,0.6); }
.bg-white\/70 { background-color: rgba(255,255,255,0.7); }
.bg-white\/80 { background-color: rgba(255,255,255,0.8); }
.bg-white\/95 { background-color: rgba(255,255,255,0.95); }
.bg-white\/40 { background-color: rgba(255,255,255,0.4); }
.text-white { color: #fff; }
.text-black { color: #000; }
.text-white\/60 { color: rgba(255,255,255,0.6); }
.text-white\/70 { color: rgba(255,255,255,0.7); }
.text-white\/80 { color: rgba(255,255,255,0.8); }
.text-white\/85 { color: rgba(255,255,255,0.85); }
.text-white\/90 { color: rgba(255,255,255,0.9); }
.text-white\/95 { color: rgba(255,255,255,0.95); }
.bg-white\/15 { background-color: rgba(255,255,255,0.15); }

.text-sm { font-size: 0.875rem; line-height: 1.25rem; }

/* effects */
.overflow-hidden { overflow: hidden; }
.opacity-0 { opacity: 0; }
.opacity-10 { opacity: 0.1; }
.opacity-15 { opacity: 0.15; }
.opacity-20 { opacity: 0.2; }
.opacity-25 { opacity: 0.25; }
.opacity-30 { opacity: 0.3; }
.opacity-60 { opacity: 0.6; }
.pointer-events-none { pointer-events: none; }
.cursor-pointer { cursor: pointer; }
.overflow-x-auto { overflow-x: auto; }
.backdrop-blur-md { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.backdrop-blur-xl { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.outline-none { outline: none; }
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-\[16\/9\] { aspect-ratio: 16 / 9; }
.whitespace-nowrap { white-space: nowrap; }
.origin-top { transform-origin: top; }
.origin-left { transform-origin: left; }
.-translate-x-1\/2 { transform: translateX(-50%); }
.-translate-y-1\/2 { transform: translateY(-50%); }
.translate-x-1\/2 { transform: translateX(50%); }
.select-none { user-select: none; }

/* transitions */
.transition-colors { transition: color .15s, background-color .15s, border-color .15s; }
.transition-opacity { transition: opacity .15s; }
.transition-transform { transition: transform .15s; }
.transition-all { transition: all .15s; }
.duration-500 { transition-duration: .5s; }
.duration-700 { transition-duration: .7s; }

/* heights used as fixed px */
.h-\[240px\] { height: 240px; } .h-\[260px\] { height: 260px; } .h-\[280px\] { height: 280px; }
.h-\[380px\] { height: 380px; } .h-\[480px\] { height: 480px; } .h-\[520px\] { height: 520px; } .h-\[600px\] { height: 600px; }
.h-\[560px\] { height: 560px; } .h-\[500px\] { height: 500px; }
.w-\[200px\] { width: 200px; } .w-\[340px\] { width: 340px; } .w-\[420px\] { width: 420px; }
.w-\[500px\] { width: 500px; } .w-\[600px\] { width: 600px; } .w-\[900px\] { width: 900px; }
.w-40 { width: 10rem; }
.h-\[900px\] { height: 900px; } .h-\[420px\] { height: 420px; }
.w-\[260px\] { width: 260px; } .h-\[380px\] { height: 380px; }
.w-32 { width: 8rem; }
.w-3\/4 { width: 75%; } .w-1\/2 { width: 50%; }
.h-\[32px\] { height: 32px; }

/* misc */
.fill-current { fill: currentColor; }
.max-w-fit { max-width: fit-content; }
.flex-1 { flex: 1 1 0%; }

/* =====================================================================
   RESPONSIVE VARIANTS (Tailwind breakpoints: sm 640 / md 768 / lg 1024)
   Only the classes actually used in the markup are defined.
   ===================================================================== */
@media (min-width: 640px) {
  .sm\:inline-flex { display: inline-flex; }
  .sm\:block { display: block; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (min-width: 768px) {
  .md\:block { display: block; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0,1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .md\:flex-row { flex-direction: row; }
}
@media (min-width: 1024px) {
  .lg\:flex { display: flex; }
  .lg\:block { display: block; }
  .lg\:hidden { display: none; }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0,1fr)); }
  .lg\:col-span-2 { grid-column: span 2 / span 2; }
  .lg\:col-span-3 { grid-column: span 3 / span 3; }
  .lg\:col-span-4 { grid-column: span 4 / span 4; }
  .lg\:col-span-5 { grid-column: span 5 / span 5; }
  .lg\:col-span-7 { grid-column: span 7 / span 7; }
  .lg\:col-span-8 { grid-column: span 8 / span 8; }
  .lg\:col-start-6 { grid-column-start: 6; }
  .lg\:col-span-6 { grid-column: span 6 / span 6; }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
  .lg\:flex-row { flex-direction: row; }
  .lg\:items-center { align-items: center; }
  .lg\:items-end { align-items: flex-end; }
  .lg\:justify-between { justify-content: space-between; }
  .lg\:text-left { text-align: left; }
  .lg\:mx-0 { margin-left: 0; margin-right: 0; }
  .lg\:p-14 { padding: 3.5rem; }
  .lg\:p-16 { padding: 4rem; }
  .lg\:p-20 { padding: 5rem; }
  .lg\:p-24 { padding: 6rem; }
  .lg\:pt-48 { padding-top: 12rem; }
  .lg\:pt-40 { padding-top: 10rem; }
  .lg\:pb-32 { padding-bottom: 8rem; }
  .lg\:sticky { position: sticky; }
  .lg\:top-32 { top: 8rem; }
}

/* md:col-span used in portfolio masonry */
@media (min-width: 768px) {
  .md\:col-span-2 { grid-column: span 2 / span 2; }
  .md\:col-span-3 { grid-column: span 3 / span 3; }
  .md\:col-span-4 { grid-column: span 4 / span 4; }
  .md\:row-span-3 { grid-row: span 3 / span 3; }
  .md\:row-span-4 { grid-row: span 4 / span 4; }
}


/* ===================== components.css (merged) ===================== */
/* ==========================================================================
   components.css — navbar/mega-menu, hover states, keyframe animations,
   scroll-reveal, marquee, and component-specific styling that recreate the
   Framer Motion behaviour of the original React app.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   NAVBAR (recreates the motion width/top/radius/blur scroll animation)
   --------------------------------------------------------------------------- */
.nav-root {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  top: 1.5rem;
  width: 100%;
  transition: width .5s cubic-bezier(.22,1,.36,1), top .5s cubic-bezier(.22,1,.36,1);
}
.nav-root.scrolled { width: 90%; top: 1rem; }

.nav-bar {
  margin: 0 auto;
  max-width: 1320px;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid transparent;
  border-radius: 24px;
  background-color: rgba(255,255,255,0);
  box-shadow: 0 0 0 rgba(0,0,0,0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: background-color .5s cubic-bezier(.22,1,.36,1),
              box-shadow .5s cubic-bezier(.22,1,.36,1),
              border-radius .5s cubic-bezier(.22,1,.36,1),
              padding .5s cubic-bezier(.22,1,.36,1),
              backdrop-filter .5s cubic-bezier(.22,1,.36,1),
              border-color .5s cubic-bezier(.22,1,.36,1);
}
/* scrolled (or mega open) → frosted panel */
.nav-root.scrolled .nav-bar,
.nav-root.mega-open .nav-bar {
  background-color: rgba(255,255,255,0.85);
  box-shadow: 0 20px 60px rgba(0,0,0,0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: rgba(0,0,0,0.04);
}
.nav-root.scrolled .nav-bar { padding-top: 10px; padding-bottom: 10px; border-radius: 999px; }
/* when scrolled but mega open, radius stays 24px */
.nav-root.scrolled.mega-open .nav-bar { border-radius: 24px; }

.nav-logo { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); color: var(--zesty-text); }
.nav-logo .mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 0.75rem; background: var(--zesty-primary);
}
.nav-logo .mark span { color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 16px; }
.nav-logo .word { font-weight: 700; font-size: 20px; letter-spacing: -0.02em; }

.nav-links { display: none; align-items: center; gap: 0.25rem; }
@media (min-width: 1024px) { .nav-links { display: flex; } }
.nav-links > li { position: relative; }
.nav-links button.nav-item,
.nav-links a.nav-item {
  position: relative; display: flex; align-items: center; gap: 0.25rem;
  padding: 0.5rem 0.75rem; border-radius: 9999px;
  color: var(--zesty-secondary); font-size: 14px; font-weight: 500;
  transition: color .15s;
}
.nav-links li.active button.nav-item,
.nav-links li.active a.nav-item { color: var(--zesty-primary); }
.nav-item .caret { display: inline-block; font-size: 10px; transition: transform .3s; }
.nav-links li.active .caret { transform: rotate(180deg); }

.nav-cta-wrap { display: flex; align-items: center; gap: 0.75rem; }
.nav-cta {
  display: none; align-items: center; gap: 0.5rem;
  padding: 0.625rem 1.25rem; border-radius: 9999px; color: #fff;
  background: var(--zesty-primary); font-size: 14px; font-weight: 500;
  transition: transform .18s ease;
}
@media (min-width: 640px) { .nav-cta { display: inline-flex; } }
.nav-cta:hover { transform: scale(1.03); }
.nav-cta:active { transform: scale(0.97); }

.nav-burger { display: inline-flex; padding: 0.5rem; border-radius: 9999px; }
@media (min-width: 1024px) { .nav-burger { display: none; } }
.nav-burger .icon-x { display: none; }
.nav-root.menu-open .nav-burger .icon-x { display: block; }
.nav-root.menu-open .nav-burger .icon-menu { display: none; }

/* ---- Mega menu panel ---- */
.mega-panel {
  margin: 0.75rem auto 0;
  max-width: 1320px;
  border-radius: 32px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 40px 100px rgba(0,0,0,0.12);
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity .3s cubic-bezier(.22,1,.36,1), transform .3s cubic-bezier(.22,1,.36,1);
}
.mega-panel.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.mega-section { display: none; }
.mega-section.active { display: block; }

.mega-foot {
  padding: 1.25rem 2.5rem; border-top: 1px solid rgba(0,0,0,0.05);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--zesty-surface);
}
.mega-foot .left { display: flex; align-items: center; gap: 0.5rem; font-size: 14px; }
.mega-foot .muted { color: var(--zesty-subtext); }
.mega-foot .cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.625rem 1.25rem; border-radius: 9999px; color: #fff;
  background: var(--zesty-primary); font-size: 13px; font-weight: 500;
}

.eyebrow-label {
  font-family: var(--font-display); margin-bottom: 1rem; font-size: 11px;
  font-weight: 600; letter-spacing: 0.12em; color: var(--zesty-subtext); text-transform: uppercase;
}

/* services mega */
.svc-cat-btn {
  width: 100%; text-align: left; padding: 0.75rem; border-radius: 1rem;
  font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--zesty-text); background: transparent; transition: all .2s;
}
.svc-cat-btn.active { color: var(--zesty-primary); background: var(--zesty-accent); }
.svc-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0.25rem; }
.svc-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.625rem 0.75rem; border-radius: 0.75rem; font-size: 14px; font-weight: 500;
  transition: background-color .15s;
}
.svc-link:hover { background: var(--zesty-accent); }
.svc-link .arr { opacity: 0; transition: opacity .15s; color: var(--zesty-primary); }
.svc-link:hover .arr { opacity: 1; }
.svc-preview {
  position: relative; border-radius: 1.5rem; overflow: hidden; height: 260px;
  padding: 1.5rem; color: #fff; display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 20px 50px rgba(9,72,245,0.2);
  transition: background .3s;
}
.fade-swap { animation: fadeScale .3s ease; }
@keyframes fadeScale { from { opacity: 0; transform: scale(.96);} to { opacity: 1; transform: scale(1);} }
.fade-up-swap { animation: fadeUp .25s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px);} to { opacity:1; transform: translateY(0);} }

/* solutions mega cards */
.sol-card {
  display: block; border-radius: 1.5rem; padding: 1.5rem; color: #fff;
  position: relative; overflow: hidden; height: 240px;
  transition: transform .3s ease;
}
.sol-card:hover { transform: translateY(-6px); }
.sol-orb {
  position: absolute; top: -1.5rem; right: -1.5rem; width: 6rem; height: 6rem;
  border-radius: 1rem; backdrop-filter: blur(12px);
  background: rgba(255,255,255,0.25); border: 1px solid rgba(255,255,255,0.3);
  animation: floatRot 6s ease-in-out infinite;
}
@keyframes floatRot { 0%,100% { transform: rotate(0) translateY(0);} 50% { transform: rotate(6deg) translateY(-8px);} }

/* industries / hire mega lists */
.ind-btn {
  width: 100%; text-align: left; padding: 0.625rem 0.75rem; border-radius: 0.75rem;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 15px; font-weight: 500; color: var(--zesty-text); background: transparent; transition: all .2s;
}
.ind-btn.active { color: var(--zesty-primary); background: var(--zesty-accent); }
.ind-preview {
  position: relative; border-radius: 1.5rem; overflow: hidden; height: 280px;
  padding: 2rem; color: #fff; display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 20px 50px rgba(9,72,245,0.18);
}
.hire-btn {
  width: 100%; text-align: left; padding: 0.75rem; border-radius: 1rem;
  font-family: var(--font-display); display: flex; align-items: center; justify-content: space-between;
  font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--zesty-text); background: transparent; transition: all .2s;
}
.hire-btn.active { color: var(--zesty-primary); background: var(--zesty-accent); }
.hire-table-head {
  display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); padding: 0.75rem 1.25rem;
  background: var(--zesty-surface); font-size: 12px; font-weight: 600; color: var(--zesty-subtext);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.hire-row {
  display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); padding: 0.875rem 1.25rem;
  border-top: 1px solid rgba(0,0,0,0.05); align-items: center; font-size: 14px;
  transition: background .25s;
}
.hire-row.active { background: var(--zesty-accent); }

/* ---- Mobile menu ---- */
.mobile-menu {
  display: none; position: fixed; top: 86px; left: 12px; right: 12px; z-index: 60;
  background: #fff; border-radius: 1.25rem; padding: 1rem; box-shadow: 0 24px 60px rgba(0,0,0,0.18);
  border: 1px solid rgba(0,0,0,0.06); animation: fadeUp .3s ease; pointer-events: auto;
  max-height: calc(100vh - 110px); overflow-y: auto;
}
.nav-root.menu-open .mobile-menu { display: block; }
@media (min-width: 1024px) { .nav-root.menu-open .mobile-menu { display: none; } }
.mobile-menu ul { display: flex; flex-direction: column; gap: 0.25rem; }
.mobile-menu a { display: block; padding: 0.75rem 1rem; border-radius: 1rem; font-size: 15px; transition: background-color .15s; }
.mobile-menu a:hover { background: var(--zesty-accent); }

/* ---------------------------------------------------------------------------
   HOVER STATES (cards lifting, buttons, etc.) — replicate whileHover
   --------------------------------------------------------------------------- */
.hov-lift { transition: transform .4s ease, box-shadow .4s ease; }
.service-card:hover { transform: translateY(-8px); box-shadow: 0 30px 70px rgba(0,0,0,0.08); }
.service-card .glow { opacity: 0; transition: opacity .5s; }
.service-card:hover .glow { opacity: 1; }
.service-card .icon-box { transition: transform .3s; }
.service-card:hover .icon-box { transform: scale(1.1); }
.service-card .learn { opacity: 0; transition: opacity .15s; }
.service-card:hover .learn { opacity: 1; }

.solution-card { transition: transform .3s ease; }
.solution-card:hover { transform: translateY(-10px); }
.solution-card .explore { transition: transform .3s; }
.solution-card:hover .explore { transform: translateX(4px); }

.tech-card { transition: transform .3s ease; }
.tech-card:hover { transform: translateY(-4px); }
.tech-card .glow { opacity: 0; transition: opacity .5s; }
.tech-card:hover .glow { opacity: 1; }
.tech-card .bg-word { transition: transform .7s; }
.tech-card:hover .bg-word { transform: translateX(-20px); }
.tech-pill { transition: transform .2s, border-color .15s, color .15s; }
.tech-pill:hover { transform: translateY(-3px) scale(1.05); border-color: var(--zesty-primary); color: var(--zesty-primary); }

.work-card .scale-img { transition: transform .7s cubic-bezier(.22,1,.36,1); }
.work-card:hover .scale-img { transform: scale(1.06); }
.work-card .cs-btn { transition: transform .2s; }
.work-card:hover .cs-btn { transform: scale(1.1); }

.milestone-card { transition: transform .3s ease; }
.milestone-card:hover { transform: translateY(-6px); }
.milestone-card .glow, .milestone-card .blob { opacity: 0; transition: opacity .5s; }
.milestone-card:hover .glow, .milestone-card:hover .blob { opacity: 1; }
.milestone-card .ms-arrow { transition: transform .3s, background-color .15s, color .15s; }
.milestone-card:hover .ms-arrow { background: var(--zesty-primary); }
.milestone-card:hover .ms-arrow svg { color: #fff; }

.hire-card, .value-card, .blog-card { transition: transform .5s ease; }
.hire-card:hover, .blog-card:hover { transform: translateY(-6px); }

.metric-link:hover { transform: translateX(4px); }
.cta-btn { transition: transform .18s ease; }
.cta-btn:hover { transform: scale(1.03) translateY(-2px); }
.cta-btn:active { transform: scale(0.98); }
.cta-btn-lg:hover { transform: scale(1.04) translateY(-2px); }

.footer-link { transition: color .15s; }
.footer-link:hover { color: var(--zesty-primary); }
.social-link { transition: all .2s; }
.social-link:hover { background: var(--zesty-accent); border-color: var(--zesty-primary); }

.dot-nav { transition: background-color .15s; }
.carousel-btn { transition: background-color .15s; }
.carousel-btn:hover { background: var(--zesty-accent); }

.filter-btn { transition: all .2s; }

.field-input { transition: border-color .15s; }
.field-input:focus { border-color: var(--zesty-primary); }

.next-cta .next-arrow { transition: transform .3s; }
.next-cta:hover .next-arrow { transform: translateX(6px); }

/* industries timeline interactions */
.ind-row { transition: border-color .15s; cursor: pointer; }
.ind-dot { transition: all .3s; }
.ind-row:hover .ind-dot { transform: scale(1.4); background: #0948F5 !important; box-shadow: 0 0 0 6px rgba(9,72,245,0.15); }
.ind-title { transition: transform .3s, color .3s; }
.ind-row:hover .ind-title { transform: translateX(8px); color: #0948F5; }
.ind-arrow { transition: transform .3s, background-color .3s; }
.ind-row:hover .ind-arrow { transform: rotate(45deg); background: #0948F5 !important; }
.ind-row:hover .ind-arrow svg { color: #fff !important; }
.ind-float { opacity: 0; transition: opacity .35s cubic-bezier(.22,1,.36,1), transform .35s cubic-bezier(.22,1,.36,1); transform: scale(.95) translateY(20px); }
.ind-float.show { opacity: 1; transform: scale(1) translateY(0); }

/* portfolio masonry hover stats */
.pf-card .scale-img { transition: transform .7s cubic-bezier(.22,1,.36,1); }
.pf-card:hover .scale-img { transform: scale(1.06); }
.pf-stats { opacity: 0; transition: opacity .5s; }
.pf-card:hover .pf-stats { opacity: 1; }

/* ---------------------------------------------------------------------------
   GRADIENT TEXT
   --------------------------------------------------------------------------- */
.grad-text {
  background: linear-gradient(135deg, #0948F5, #6B9BFF);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------------------------------------------------------------------------
   MARQUEE (logo strip)
   --------------------------------------------------------------------------- */
.marquee-track { display: flex; gap: 4rem; white-space: nowrap; width: max-content; animation: marquee 30s linear infinite; }
@keyframes marquee { from { transform: translateX(0);} to { transform: translateX(-50%);} }

/* ---------------------------------------------------------------------------
   FLOATING / AMBIENT ANIMATIONS (hero composition)
   --------------------------------------------------------------------------- */
.float-a { animation: floatA 8s ease-in-out infinite; }
@keyframes floatA { 0%,100% { transform: translateY(0) rotate(0);} 50% { transform: translateY(-16px) rotate(6deg);} }
.float-b { animation: floatB 7s ease-in-out infinite; }
@keyframes floatB { 0%,100% { transform: translateY(0);} 50% { transform: translateY(12px);} }
.float-c { animation: floatC 6s ease-in-out infinite; animation-delay: 1s; }
@keyframes floatC { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-10px);} }
.float-d { animation: floatD 5s ease-in-out infinite; animation-delay: .5s; }
@keyframes floatD { 0%,100% { transform: translateY(0);} 50% { transform: translateY(8px);} }

/* hero entrance */
.enter { opacity: 0; transform: translateY(20px); animation: enterUp .6s ease forwards; }
@keyframes enterUp { to { opacity: 1; transform: translateY(0);} }
.d1 { animation-delay: .1s; } .d2 { animation-delay: .2s; } .d25 { animation-delay: .25s; }
.d3 { animation-delay: .3s; } .d35 { animation-delay: .35s; } .d5 { animation-delay: .5s; }
.enter-scale { opacity: 0; transform: scale(.95); animation: enterScale .8s ease .2s forwards; }
@keyframes enterScale { to { opacity: 1; transform: scale(1);} }

/* hero analytics bars grow */
.bar { height: 0; transition: height .8s ease; }

/* ---------------------------------------------------------------------------
   SCROLL REVEAL (whileInView)
   --------------------------------------------------------------------------- */
/* --- Scroll reveal: entrance driven by ANIMATION (stagger = animation-delay).
   The old `[data-delay] { transition-delay: var(--d) }` rule is GONE because it
   also delayed every :hover transition, which caused the laggy/inconsistent
   hover on service cards, the industry section, etc. animation-delay keeps the
   staggered entrance but never touches hover. No `forwards` fill, so cards keep
   no leftover transform at rest and :hover lifts run instantly. --- */
.reveal       { opacity: 0; }
.reveal-x     { opacity: 0; }
.reveal-scale { opacity: 0; }
.reveal.in       { opacity: 1; animation: zsRevealUp    .6s  ease backwards; animation-delay: var(--d, 0s); }
.reveal-x.in     { opacity: 1; animation: zsRevealX     .5s  ease backwards; animation-delay: var(--d, 0s); }
.reveal-scale.in { opacity: 1; animation: zsRevealScale .35s ease backwards; animation-delay: var(--d, 0s); }
/* milestone (industry) cards carry an inline transform offset -> fade only */
.milestone-card.reveal.in { animation-name: zsRevealFade; }
@keyframes zsRevealUp    { from { opacity:0; transform: translateY(30px); } to { opacity:1; transform: translateY(0); } }
@keyframes zsRevealX     { from { opacity:0; transform: translateX(30px); } to { opacity:1; transform: translateX(0); } }
@keyframes zsRevealScale { from { opacity:0; transform: scale(.9);        } to { opacity:1; transform: scale(1);       } }
@keyframes zsRevealFade  { from { opacity:0; } to { opacity:1; } }

/* timeline vertical line grow */
.tl-line { transform: scaleY(0); transform-origin: top; transition: transform 1.2s ease; }
.tl-line.in { transform: scaleY(1); }
.process-line { transform: scaleX(0); transform-origin: left; transition: transform 1.5s ease; }
.process-line.in { transform: scaleX(1); }

/* ---------------------------------------------------------------------------
   FORM
   --------------------------------------------------------------------------- */
.field-input {
  margin-top: 0.5rem; width: 100%; padding: 0.875rem 1.25rem; border-radius: 1rem;
  background: #fff; border: 1px solid rgba(0,0,0,0.08); outline: none; font-size: 15px;
}

/* testimonials fade */
.testi-slide { animation: fadeUp .4s ease; }

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal, .reveal-x, .reveal-scale, .enter, .enter-scale { opacity: 1 !important; transform: none !important; }  .marquee-track { animation: none !important; }
}

/* JS-rendered project-detail CTA pill */
.cta-pill { transition: transform .3s cubic-bezier(.22,1,.36,1); }
.cta-pill:hover { transform: translateY(-2px) scale(1.03); }


/* ============================================================================
   HOVER FIX (authoritative — keep at end of file)
   - transition-delay:0 !important on every hover target so no stray/cached
     delay rule can slow the hover (entrance stagger is handled by animation).
   - re-assert card hover lifts !important so they beat any inline transform.
============================================================================ */
.service-card, .solution-card, .sol-card, .tech-card, .tech-pill,
.work-card, .pf-card, .pf-item, .milestone-card, .hire-card, .blog-card,
.value-card, .ind-row, .nav-cta, .cta-btn, .cta-btn-lg, .cta-pill, .next-cta,
.carousel-btn, .social-link, .footer-link, .metric-link,
.service-card *, .solution-card *, .tech-card *, .milestone-card *,
.work-card *, .pf-card *, .ind-row *, .next-cta * {
  transition-delay: 0s !important;
}
.service-card:hover   { transform: translateY(-8px)  !important; }
.solution-card:hover  { transform: translateY(-10px) !important; }
.sol-card:hover       { transform: translateY(-6px)  !important; }
.tech-card:hover      { transform: translateY(-4px)  !important; }
.milestone-card:hover { transform: translateY(-6px)  !important; }
.hire-card:hover,
.blog-card:hover      { transform: translateY(-6px)  !important; }

/* ============================================================================
   NAVBAR OVERLAY FIX  (the real cause of the broken hover + links)
   .nav-root is position:fixed and contains the mega-menu panel, which keeps its
   layout height even while invisible. That made the nav container's box stretch
   down over the top of the page and, with pointer-events:auto, silently swallow
   hovers/clicks on the cards and case-study links beneath it. Make the container
   transparent to the pointer; only the visible pieces (the nav bar, an OPEN mega
   panel, an OPEN mobile menu) catch events.
============================================================================ */
.nav-root { pointer-events: none; }
.nav-bar,
.mega-panel.open,
.nav-root.menu-open .mobile-menu { pointer-events: auto; }
.mega-panel { pointer-events: none; }


/* listing/detail card hover (added for the new pages) */
.card-lift{transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s cubic-bezier(.22,1,.36,1);}
.card-lift:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(9,72,245,0.12);}

/* ============================================================================
   v2.1 additions — Poppins numerics, process wave, tabs, FAQ, placeholders
============================================================================ */
.font-num { font-family: "Poppins", ui-sans-serif, system-ui, sans-serif; }

/* metric/outcome cards: keep big numbers inside the box */
.metric-val {
  font-family: "Poppins", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800; color: var(--zesty-primary);
  letter-spacing: -0.03em; line-height: 1.02;
  font-size: clamp(30px, 3.4vw, 52px);
  overflow-wrap: anywhere; word-break: break-word; hyphens: auto;
  max-width: 100%;
}

/* ---- image / icon placeholders (author replaces later) ---- */
.ph {
  position: relative; display: flex; align-items: center; justify-content: center;
  text-align: center; color: var(--zesty-subtext);
  background:
    repeating-linear-gradient(45deg, rgba(9,72,245,0.04) 0 12px, transparent 12px 24px),
    var(--zesty-surface);
  border: 1.5px dashed rgba(9,72,245,0.28); border-radius: 24px;
}
.ph .ph-label {
  font-family: var(--font-display); font-size: 12px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 14px;
  background: #fff; border-radius: 999px; border: 1px solid rgba(0,0,0,0.06);
}
.ph-icon { width: 56px; height: 56px; border-radius: 16px; border-style: dashed; }

/* ---- service category tabs ---- */
.svc-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.svc-tab {
  font-family: var(--font-display); font-size: 14px; font-weight: 600;
  letter-spacing: -0.01em; color: var(--zesty-subtext);
  padding: 10px 20px; border-radius: 999px; border: 1px solid rgba(0,0,0,0.08);
  background: #fff; transition: all .25s ease; white-space: nowrap;
}
.svc-tab .cnt { font-size: 12px; opacity: .6; margin-left: 6px; }
.svc-tab:hover { border-color: rgba(9,72,245,0.4); color: var(--zesty-text); }
.svc-tab.active { background: var(--zesty-primary); color: #fff; border-color: var(--zesty-primary); }
.svc-tab.active .cnt { opacity: .85; }
.svc-panel { display: none; }
.svc-panel.active { display: block; animation: svcFade .4s cubic-bezier(.22,1,.36,1); }
@keyframes svcFade { from { opacity: 0; transform: translateY(12px);} to { opacity: 1; transform: none; } }

/* ---- process wave (scroll-pinned) ---- */
.proc-pin { position: relative; }
.proc-sticky {
  position: sticky; top: 0; min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 80px 0; overflow: hidden;
}
.proc-wave-path {
  fill: none; stroke: var(--zesty-primary); stroke-width: 2.5;
  stroke-linecap: round;
}
.proc-node { opacity: 0; transform: scale(.4); transition: opacity .45s ease, transform .45s cubic-bezier(.34,1.56,.64,1); transform-box: fill-box; transform-origin: center; }
.proc-node.on { opacity: 1; transform: scale(1); }
.proc-label { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1); }
.proc-label.on { opacity: 1; transform: none; }
.proc-dot-pulse { animation: procPulse 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes procPulse { 0%,100% { r: 7; opacity: 1;} 50% { r: 10; opacity: .7; } }

/* mobile fallback: vertical step list, no pin */
.proc-mobile { display: none; }
@media (max-width: 860px) {
  .proc-sticky { position: static; min-height: 0; padding: 0; }
  .proc-svg-wrap { display: none; }
  .proc-mobile { display: block; }
  .proc-pin { height: auto !important; }
}

/* ---- FAQ two-column ---- */
.faq2-grid { display: grid; grid-template-columns: 1fr; gap: 48px; }
@media (min-width: 1024px) { .faq2-grid { grid-template-columns: 0.85fr 1.15fr; gap: 72px; } }
.faq2-aside { position: relative; }
@media (min-width: 1024px) { .faq2-aside { position: sticky; top: 120px; align-self: start; } }
.faq2-orb { position: absolute; width: 36px; height: 36px; border-radius: 999px; border: 2px solid rgba(9,72,245,0.25); top: 6px; right: 12%; }
.faq2-orb.fill { width: 14px; height: 14px; background: var(--zesty-primary); border: none; right: 22%; top: 0; }

/* ---- team cards (about) ---- */
.team-card { transition: transform .35s cubic-bezier(.22,1,.36,1); }
.team-card:hover { transform: translateY(-6px); }
.team-avatar {
  aspect-ratio: 1; border-radius: 24px; display: flex; align-items: flex-end;
  justify-content: center; overflow: hidden; position: relative;
}
.team-avatar .ph-label { position: absolute; top: 14px; left: 14px; }

/* ============================ inquiry modal (scroll-triggered) ============ */
.inq-overlay { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(8,12,30,0.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s; }
.inq-overlay.open { opacity: 1; visibility: visible; }
.inq-card { position: relative; width: 100%; max-width: 520px; background: #fff; border-radius: 28px; padding: 48px; box-shadow: 0 40px 120px rgba(0,0,0,0.45); transform: translateY(24px) scale(.98); transition: transform .35s cubic-bezier(.22,1,.36,1); max-height: 90vh; overflow: auto; }
.inq-overlay.open .inq-card { transform: none; }
.inq-close { position: absolute; top: -16px; right: -16px; width: 46px; height: 46px; border-radius: 999px; background: #fff; border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 8px 24px rgba(0,0,0,0.18); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--zesty-text); transition: transform .2s ease; }
.inq-close:hover { transform: rotate(90deg); }
@media (max-width: 560px) { .inq-close { top: 12px; right: 12px; } .inq-card { padding: 32px 22px; } }
.inq-title { font-family: var(--font-display); font-size: clamp(26px,4vw,34px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.18; color: var(--zesty-text); }
.inq-form { margin-top: 28px; }
.inq-field { border-bottom: 1px solid rgba(0,0,0,0.12); padding: 14px 0; transition: border-color .2s ease; }
.inq-field:focus-within { border-color: var(--zesty-primary); }
.inq-field input, .inq-field textarea { width: 100%; border: none; outline: none; background: transparent; font-family: inherit; font-size: 16px; color: var(--zesty-text); resize: vertical; }
.inq-field input::placeholder, .inq-field textarea::placeholder { color: #9aa0ab; }
.inq-phone { display: flex; align-items: center; gap: 10px; }
.inq-cc { font-size: 15px; color: var(--zesty-text); white-space: nowrap; }
.inq-submit { margin-top: 28px; width: 100%; border: none; cursor: pointer; padding: 18px; border-radius: 999px; color: #fff; font-family: var(--font-display); font-weight: 600; letter-spacing: 0.06em; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(135deg,#0948F5,#001F8A); box-shadow: 0 18px 40px rgba(9,72,245,0.35); transition: transform .18s ease; }
.inq-submit:hover { transform: translateY(-2px); }
.inq-thanks { text-align: center; padding: 24px 0; }
.inq-check { width: 64px; height: 64px; border-radius: 999px; background: var(--zesty-accent); color: var(--zesty-primary); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.inq-thanks h3 { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--zesty-text); }
.inq-thanks p { margin-top: 8px; color: var(--zesty-subtext); }
/* footer designrush badge */
.dr-badge { transition: transform .2s ease, opacity .2s ease; opacity: .92; }
.dr-badge:hover { transform: translateY(-2px); opacity: 1; }

/* ===================== two-panel gradient inquiry modal (overrides) ====== */
.inq-card { max-width: 940px; padding: 0; display: flex; overflow: hidden; }
@media (max-width: 820px) { .inq-card { flex-direction: column; max-width: 520px; } }
.inq-left { flex: 1 1 44%; background: linear-gradient(160deg, #0A0A12 0%, #0B1B43 55%, #0948F5 120%); color: #fff; padding: 48px; display: flex; flex-direction: column; }
.inq-right { flex: 1 1 56%; background: #fff; padding: 48px; }
@media (max-width: 820px) { .inq-left, .inq-right { padding: 32px 26px; } }
.inq-dream { font-family: var(--font-display); font-size: clamp(34px,5vw,48px); font-weight: 700; line-height: 1.0; letter-spacing: -0.02em; }
.inq-dream em { font-style: italic; font-weight: 800; }
.inq-connect { font-size: 13px; font-weight: 600; margin-top: 28px; color: rgba(255,255,255,0.85); }
.inq-socials { display: flex; gap: 12px; margin-top: 14px; }
.inq-soc { width: 46px; height: 46px; border-radius: 999px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.16); display: flex; align-items: center; justify-content: center; color: #fff; transition: background .2s ease, transform .2s ease; }
.inq-soc:hover { background: rgba(255,255,255,0.22); transform: translateY(-2px); }
.inq-stats { margin-top: auto; padding-top: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 20px; }
.inq-stat-v { font-family: "Poppins", sans-serif; font-style: italic; font-weight: 800; font-size: 34px; letter-spacing: -0.02em; line-height: 1; }
.inq-stat-l { font-size: 13px; line-height: 1.25; color: rgba(255,255,255,0.8); margin-top: 4px; }
.inq-right .inq-title { font-size: clamp(24px,3vw,32px); }
.inq-right .inq-title b { font-weight: 800; }

/* ===================== redesigned shared footer ========================== */
.zfooter { position: relative; overflow: hidden; }
.zf-head { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: #6B9BFF; margin-bottom: 14px; }
.zf-val { font-size: 19px; color: #fff; display: inline-block; transition: color .2s ease; }
.zf-val:hover { color: #6B9BFF; }
.zf-val-sm { font-size: 16px; line-height: 1.55; color: rgba(255,255,255,0.85); max-width: 460px; }
.zf-sub { font-size: 13px; color: rgba(255,255,255,0.5); margin-top: 4px; }
.zf-copy { font-size: 13px; color: rgba(255,255,255,0.6); }
.zf-link { transition: color .2s ease; }
.zf-link:hover { color: #fff; }
.zf-soc { width: 38px; height: 38px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.85); border: 1px solid rgba(255,255,255,0.16); transition: all .2s ease; }
.zf-soc:hover { background: #fff; color: #0948F5; }
.zf-top { background: none; border: none; cursor: pointer; color: rgba(255,255,255,0.8); font-size: 14px; display: inline-flex; align-items: center; gap: 8px; transition: color .2s ease; font-family: inherit; }
.zf-top:hover { color: #fff; }
.zf-wordmark { font-family: var(--font-display); font-weight: 800; line-height: 0.72; letter-spacing: -0.04em; white-space: nowrap; text-align: center; margin-top: 24px; padding: 0 24px; transform: translateY(20%); user-select: none; font-size: clamp(72px, 21vw, 340px); }
.zf-wordmark .zf-word-light { color: rgba(255,255,255,0.55); font-weight: 500; }
.zf-wordmark > span:first-child { color: #fff; }

/* ===================== scroll-pinned portfolio gallery =================== */
.pf-pin { position: relative; background: #fff; }
.pf-stage { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; overflow: hidden; }
.pf-steps { position: relative; width: 100%; min-height: clamp(320px, 42vw, 460px); }
.pf-step { position: absolute; inset: 0; display: flex; align-items: center; opacity: 0; pointer-events: none; transition: opacity .4s ease; }
.pf-step.active { opacity: 1; pointer-events: auto; }
.pf-grid { display: grid; grid-template-columns: 1fr; gap: 24px; width: 100%; }
@media (min-width: 768px) { .pf-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
.pf-card { opacity: 0; transition: transform .6s cubic-bezier(.22,1,.36,1), opacity .5s ease; }
.pf-card[data-side="left"] { transform: translateX(-115%); }
.pf-card[data-side="right"] { transform: translateX(115%); }
.pf-step.active .pf-card { opacity: 1; transform: none; }
.pf-dots { display: flex; justify-content: center; gap: 10px; margin-top: 40px; }
.pf-dot { width: 9px; height: 9px; border-radius: 999px; background: rgba(9,72,245,0.2); transition: all .3s ease; }
.pf-dot.on { background: var(--zesty-primary); width: 28px; }
@media (max-width: 860px) {
  .pf-stage { position: static; min-height: 0; overflow: visible; }
  .pf-steps { position: static; min-height: 0; }
  .pf-step { position: static; opacity: 1; pointer-events: auto; margin-bottom: 24px; }
  .pf-card, .pf-card[data-side="left"], .pf-card[data-side="right"] { opacity: 1; transform: none; }
  .pf-pin { height: auto !important; }
  .pf-dots { display: none; }
}

/* ===== tech pin (single-card-per-step variant of pf-pin) ===== */
.pf-grid.pf-single { grid-template-columns: 1fr; }
.pf-card[data-side="up"] { transform: translateY(70px); }
.pf-step.active .pf-card[data-side="up"] { transform: none; }
.tech-pin .pf-steps { min-height: clamp(300px, 36vw, 420px); }

/* ===== redesigned testimonials (Image 4) ===== */
.tg-wrap { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 1024px) { .tg-wrap { grid-template-columns: 1fr 320px; gap: 28px; } }
.tg-card { position: relative; border-radius: 28px; padding: clamp(28px,4vw,52px); color: #fff; overflow: hidden;
  background: radial-gradient(120% 120% at 0% 0%, #0d2740 0%, #07111f 55%, #050a14 100%); border: 1px solid rgba(255,255,255,0.07); }
.tg-quotemark { font-family: Georgia, serif; font-size: 64px; line-height: 0.6; color: #6B9BFF; opacity: .85; }
.tg-stars { color: #fbbf24; letter-spacing: 4px; font-size: 18px; margin-top: 18px; }
.tg-quote { font-size: clamp(18px,1.9vw,24px); line-height: 1.6; margin-top: 22px; color: #e6edf5; min-height: 120px; }
.tg-author { display: flex; align-items: center; gap: 16px; margin-top: 34px; flex-wrap: wrap; }
.tg-avatar { width: 56px; height: 56px; border-radius: 999px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 18px; color: #fff; background: linear-gradient(135deg, #6B9BFF, #0948F5); }
.tg-aname { font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.tg-arole { font-size: 14px; color: #6B9BFF; margin-top: 2px; }
.tg-badges { display: flex; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.tg-badge { font-size: 13px; padding: 7px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.14); color: rgba(255,255,255,0.85); }
.tg-badge.verified { color: #6B9BFF; border-color: rgba(9,72,245,0.4); background: rgba(9,72,245,0.10); }
.tg-prog { height: 3px; border-radius: 999px; background: rgba(255,255,255,0.12); margin-top: 34px; overflow: hidden; }
.tg-prog-bar { height: 100%; width: 0; background: linear-gradient(90deg, #6B9BFF, #0948F5); border-radius: 999px; }
.tg-prog-bar.run { animation: tgProg 5s linear forwards; }
@keyframes tgProg { from { width: 0; } to { width: 100%; } }
.tg-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 26px; }
.tg-arrow { width: 48px; height: 48px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.04); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .2s ease; }
.tg-arrow:hover { background: #6B9BFF; color: #fff; border-color: #6B9BFF; }
.tg-dots { display: flex; gap: 8px; }
.tg-dot { width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,0.2); transition: all .3s ease; cursor: pointer; }
.tg-dot.on { width: 26px; background: #6B9BFF; }
.tg-side { border-radius: 28px; padding: 28px 22px; background: #07111f; border: 1px solid rgba(255,255,255,0.06); }
.tg-side-h { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 18px; }
.tg-client { display: flex; align-items: center; gap: 14px; padding: 12px 8px; border-radius: 14px; cursor: pointer; transition: background .2s ease; }
.tg-client:hover, .tg-client.on { background: rgba(9,72,245,0.12); }
.tg-cavatar { width: 44px; height: 44px; border-radius: 999px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: #fff; background: linear-gradient(135deg, #0948F5, #0a1f6b); }
.tg-cname { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: #fff; }
.tg-crole { font-size: 13px; color: rgba(255,255,255,0.55); margin-top: 1px; line-height: 1.3; }
@media (max-width: 1023px) { .tg-side { display: none; } }

/* tech pin: more pronounced slide-from-below */
.tech-pin .pf-card[data-side="up"] { transform: translateY(130px); }
.tech-pin .pf-step.active .pf-card[data-side="up"] { transform: none; }

/* footer link columns */
.zf-col-h { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: #fff; margin-bottom: 16px; }
.zf-flink { display: block; font-size: 14px; color: rgba(255,255,255,0.6); padding: 5px 0; transition: color .2s ease; }
.zf-flink:hover { color: #6B9BFF; }

/* ===== modal close button: keep inside the rounded card ===== */
.inq-close { top: 16px !important; right: 16px !important; bottom: auto; left: auto;
  background: #eef1f6; border: 1px solid rgba(0,0,0,0.08); color: #14181f; box-shadow: none; z-index: 6; }
.inq-close:hover { background: #e2e7ef; transform: rotate(90deg); }

/* ===== technology section: dark blue/black gradient panels ===== */
.tech-section { background: linear-gradient(180deg, #04060e 0%, #060c1e 55%, #0a1a4d 100%) !important; }
.tech-section .reveal h2, .tech-section h2 { color: #fff !important; }
.tech-panel { position: relative; overflow: hidden; border-radius: 32px; padding: clamp(36px,5vw,72px); width: 100%;
  min-height: clamp(300px,36vw,420px); display: flex; align-items: center; color: #fff;
  background: linear-gradient(135deg, #0948F5 0%, #0a1330 62%, #05070F 100%); border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 40px 90px rgba(4,8,24,0.5); }
.tech-ghost { position: absolute; left: 1%; top: 50%; transform: translateY(-50%); font-family: var(--font-display);
  font-weight: 800; font-size: clamp(110px,20vw,260px); letter-spacing: -0.05em; color: rgba(255,255,255,0.05);
  white-space: nowrap; pointer-events: none; text-transform: uppercase; }
.tech-panel-inner { position: relative; z-index: 2; max-width: 62%; }
.tech-num { font-family: var(--font-display); letter-spacing: 0.22em; font-size: 13px; color: #6B9BFF; font-weight: 600; }
.tech-cat { font-family: var(--font-display); font-size: clamp(34px,5vw,60px); font-weight: 700; letter-spacing: -0.02em; line-height: 1; margin-top: 12px; }
.tech-tag { font-size: clamp(15px,1.5vw,19px); color: rgba(255,255,255,0.72); margin-top: 16px; max-width: 440px; line-height: 1.5; }
.tech-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.tech-chips span { padding: 9px 18px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); font-size: 14px; }
.tech-blob { position: absolute; right: -50px; top: 50%; transform: translateY(-50%); width: clamp(200px,28vw,400px); height: clamp(200px,28vw,400px);
  border-radius: 52% 48% 43% 57% / 55% 50% 50% 45%; background: radial-gradient(circle at 35% 30%, #aecbff, #2d6bff 42%, #0a1d6b 88%);
  box-shadow: 0 40px 120px rgba(9,72,245,0.55); opacity: .9; }
@media (max-width: 860px) { .tech-panel-inner { max-width: 100%; } .tech-blob { display: none; } .tech-ghost { font-size: 110px; } }

/* ===== light footer (Image 4) sitting above the gradient footer ===== */
.lfooter { background: #fff; }
.lf-logo-mark { width: 38px; height: 38px; border-radius: 11px; background: var(--zesty-primary); display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 18px; }
.lf-logo-text { font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: -0.02em; color: var(--zesty-text); }
.lf-logo-text b { color: var(--zesty-primary); }
.lf-blurb { font-size: 15px; line-height: 1.6; color: var(--zesty-subtext); max-width: 320px; margin-top: 22px; }
.lf-contact { font-size: 15px; color: var(--zesty-text); margin-top: 22px; }
.lf-contact a { display: block; padding: 3px 0; transition: color .2s ease; }
.lf-contact a:hover { color: var(--zesty-primary); }
.lf-col-h { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--zesty-text); margin-bottom: 18px; }
.lf-link { display: block; font-size: 15px; color: var(--zesty-subtext); padding: 6px 0; transition: color .2s ease; }
.lf-link:hover { color: var(--zesty-primary); }

/* remove the white layer behind pinned galleries (esp. dark tech section) */
.pf-pin { background: transparent; }
/* footer link columns: keep all four on one line from tablet up */
@media (min-width: 768px) { .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); } }
/* portfolio: second card of the pair eases in just after the first */
.pf-step.active .pf-card:nth-child(2) { transition-delay: .12s; }