/* =========================================================
   GENESIZ 3.2 — SITE-WIDE MOTION SYSTEM
   Shared across every HTML page.
   ========================================================= */

:root {
  --gx-ease: cubic-bezier(.22,.8,.24,1);
  --gx-fast: cubic-bezier(.16,1,.3,1);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  overflow-x: hidden;
}

/* Site-wide film grain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9997;
  pointer-events: none;
  opacity: .022;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.gx-site-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  z-index: 10000;
  transform-origin: left;
  background: var(--gxa, #b8ff4d);
  box-shadow: 0 0 16px rgba(184,255,77,.65);
}

.gx-header-motion {
  transition: background .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.gx-header-motion.gx-scrolled {
  background: rgba(7,9,13,.96) !important;
  box-shadow: 0 14px 45px rgba(0,0,0,.25);
  border-bottom-color: rgba(184,255,77,.12) !important;
}

/* Generic reveal */
.gx-motion-reveal {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(4px);
  transition:
    opacity .75s var(--gx-ease),
    transform .75s var(--gx-ease),
    filter .75s ease;
}

.gx-motion-reveal.gx-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

.gx-motion-delay-1 { transition-delay: .08s; }
.gx-motion-delay-2 { transition-delay: .16s; }
.gx-motion-delay-3 { transition-delay: .24s; }

/* Headings enter with a more editorial movement */
.gx-motion-title {
  animation: gxTitleIn .9s var(--gx-ease) both;
}

.gx-motion-kicker {
  animation: gxKickerIn .7s var(--gx-ease) both;
}

.gx-motion-lead {
  animation: gxLeadIn .85s var(--gx-ease) .12s both;
}

/* Links and navigation */
nav a, header a {
  transition: color .25s ease, opacity .25s ease, transform .25s var(--gx-fast);
}

nav a:hover {
  transform: translateY(-1px);
}

/* Buttons */
a[class*="btn"], button, input[type="submit"] {
  transition:
    transform .3s var(--gx-fast),
    box-shadow .3s ease,
    border-color .3s ease,
    background .3s ease;
}

a[class*="btn"]:hover, button:hover, input[type="submit"]:hover {
  transform: translateY(-3px);
}

/* Cards: broad selector catches the existing design system without
   forcing a new layout onto existing pages. */
.gx-card-motion,
.service-card,
.project-card,
.portfolio-card,
.faq-item,
.feature-card,
.process-step,
.pricing-card,
.stat-card,
.blog-card,
.contact-card,
.tool-card {
  transition:
    transform .45s var(--gx-ease),
    border-color .35s ease,
    background .35s ease,
    box-shadow .4s ease;
}

.gx-card-motion:hover,
.service-card:hover,
.project-card:hover,
.portfolio-card:hover,
.feature-card:hover,
.process-step:hover,
.pricing-card:hover,
.stat-card:hover,
.blog-card:hover,
.contact-card:hover,
.tool-card:hover {
  transform: translateY(-7px);
}

/* Image treatment */
img {
  transition: transform .65s var(--gx-ease), filter .45s ease;
}

a:hover img,
.card:hover img,
[class*="card"]:hover img {
  transform: scale(1.025);
}

/* Horizontal section dividers get life without becoming distracting */
section {
  position: relative;
}

section::after {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  pointer-events: none;
}

/* Forms feel less static */
input, textarea, select {
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

input:focus, textarea:focus, select:focus {
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(184,255,77,.06);
}

/* Floating ambient light used on non-home pages */
.gx-page-ambient {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(184,255,77,.08), transparent 65%);
  filter: blur(14px);
  animation: gxAmbient 10s ease-in-out infinite;
}

/* Staggered lists */
.gx-stagger > * {
  opacity: 0;
  transform: translateY(18px);
  animation: gxStaggerIn .7s var(--gx-ease) forwards;
}

.gx-stagger > *:nth-child(1) { animation-delay: .04s; }
.gx-stagger > *:nth-child(2) { animation-delay: .10s; }
.gx-stagger > *:nth-child(3) { animation-delay: .16s; }
.gx-stagger > *:nth-child(4) { animation-delay: .22s; }
.gx-stagger > *:nth-child(5) { animation-delay: .28s; }
.gx-stagger > *:nth-child(6) { animation-delay: .34s; }
.gx-stagger > *:nth-child(7) { animation-delay: .40s; }
.gx-stagger > *:nth-child(8) { animation-delay: .46s; }

/* Accordion */
details {
  transition: border-color .3s ease, transform .3s var(--gx-fast);
}

details:hover {
  transform: translateX(3px);
}

/* Success / status pages */
.gx-status-pulse {
  animation: gxStatusPulse 2.4s ease-in-out infinite;
}

/* Prevent animation overload on mobile */
@media (max-width: 700px) {
  .gx-page-ambient {
    width: 320px;
    height: 320px;
  }

  .gx-motion-reveal {
    transform: translateY(16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  body::before,
  .gx-page-ambient,
  .gx-status-pulse,
  .gx-motion-title,
  .gx-motion-kicker,
  .gx-motion-lead,
  .gx-stagger > * {
    animation: none !important;
  }

  .gx-motion-reveal,
  .gx-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  * {
    transition-duration: .01ms !important;
  }
}

@keyframes gxTitleIn {
  from { opacity: 0; transform: translateY(30px) scale(.985); filter: blur(7px); }
  to { opacity: 1; transform: none; filter: none; }
}

@keyframes gxKickerIn {
  from { opacity: 0; transform: translateX(-16px); letter-spacing: .16em; }
  to { opacity: 1; transform: none; letter-spacing: normal; }
}

@keyframes gxLeadIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@keyframes gxAmbient {
  0%,100% { transform: translate3d(0,0,0) scale(1); opacity: .55; }
  50% { transform: translate3d(-28px,22px,0) scale(1.08); opacity: 1; }
}

@keyframes gxStaggerIn {
  to { opacity: 1; transform: none; }
}

@keyframes gxStatusPulse {
  0%,100% { opacity: .65; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}


/* GENESIZ 3.3 — PERFORMANCE LAB + 404 */
.gx-performance-lab{position:relative;isolation:isolate;overflow:hidden;padding:clamp(80px,10vw,140px) 6vw;background:radial-gradient(circle at 84% 20%,rgba(184,255,77,.08),transparent 30%),#080b0f;border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07)}
.gx-lab-grid{position:absolute;inset:0;opacity:.35;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,transparent,black 20%,black 80%,transparent);animation:gxLabGrid 20s linear infinite}
.gx-lab-head,.gx-lab-board{position:relative;z-index:1;max-width:1180px;margin-inline:auto}
.gx-lab-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:42px}
.gx-lab-kicker,.gx-metric-label,.gx-stat span,.gx-chart-top span,.gx-lab-foot>span{font:700 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.18em;color:#9ba5af}
.gx-lab-head h2{max-width:720px;margin:12px 0 0;font-size:clamp(34px,5vw,68px);line-height:.98;letter-spacing:-.045em}
.gx-lab-live{white-space:nowrap;font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#b8ff4d}
.gx-lab-live i{display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:#b8ff4d;box-shadow:0 0 14px #b8ff4d;animation:gxLive 1.6s ease-in-out infinite}
.gx-lab-board{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:1px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.09)}
.gx-lab-score,.gx-stat,.gx-chart-card,.gx-lab-foot{background:rgba(10,14,19,.94);padding:28px}
.gx-lab-score{grid-row:span 2;min-height:230px}
.gx-lab-score strong{display:inline-block;margin-top:18px;font-size:clamp(58px,7vw,92px);line-height:.8;letter-spacing:-.07em;color:#b8ff4d}
.gx-lab-score small{color:#66707a;font:700 14px/1 ui-monospace,monospace}
.gx-lab-score p,.gx-stat em{margin:12px 0 0;color:#737d87;font-size:12px;font-style:normal}
.gx-meter{height:4px;margin-top:26px;overflow:hidden;background:rgba(255,255,255,.08)}
.gx-meter span{display:block;width:0;height:100%;background:#b8ff4d;box-shadow:0 0 18px rgba(184,255,77,.55);transition:width 1.3s cubic-bezier(.16,1,.3,1)}
.gx-stat strong{display:block;margin-top:24px;font-size:38px;letter-spacing:-.04em}
.gx-chart-card{grid-column:2/-1;padding-bottom:18px}
.gx-chart-top{display:flex;justify-content:space-between}
.gx-chart-top b{color:#b8ff4d;font:700 12px ui-monospace,monospace}
.gx-sparkline{display:block;width:100%;height:210px;margin-top:12px;overflow:visible}
.gx-chart-grid{fill:none;stroke:rgba(255,255,255,.055);stroke-width:1}
.gx-chart-line{fill:none;stroke:#b8ff4d;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:gxDrawChart 2s cubic-bezier(.16,1,.3,1) .3s forwards}
.gx-chart-axis{display:flex;justify-content:space-between;color:#56606a;font:700 9px ui-monospace,monospace}
.gx-lab-foot{grid-column:1/-1;display:flex;gap:18px;align-items:center;border-top:1px solid rgba(255,255,255,.07)}
.gx-lab-foot p{margin:0;color:#66707a;font-size:11px}
.gx-404{min-height:100vh;margin:0;background:#07090d;color:#f2f5f7;overflow:hidden;font-family:Inter,system-ui,sans-serif}
.gx-404-main{position:relative;min-height:100vh;display:grid;align-content:center;padding:7vw}
.gx-404-noise{position:fixed;inset:0;opacity:.04;pointer-events:none;background-image:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.05) 4px)}
.gx-404-meta{position:absolute;top:30px;left:7vw;right:7vw;display:flex;justify-content:space-between;color:#7c8791;font:700 10px ui-monospace,monospace;letter-spacing:.14em}
.gx-404-number{position:absolute;right:4vw;top:6vh;font-size:clamp(180px,34vw,520px);font-weight:900;letter-spacing:-.1em;line-height:.8;color:rgba(255,255,255,.035);user-select:none}
.gx-404-copy{position:relative;max-width:800px;z-index:1}
.gx-404-kicker{color:#b8ff4d;font:800 12px ui-monospace,monospace;letter-spacing:.2em}
.gx-404 h1{margin:18px 0 14px;max-width:700px;font-size:clamp(56px,9vw,130px);line-height:.87;letter-spacing:-.065em}
.gx-404-copy p{max-width:500px;color:#9ba5af;font-size:17px;line-height:1.6}
.gx-404-button{display:inline-flex;align-items:center;gap:28px;margin-top:26px;padding:15px 18px 15px 20px;color:#080b0f;background:#b8ff4d;text-decoration:none;font-weight:800;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease}
.gx-404-button:hover{transform:translateY(-4px);box-shadow:0 20px 55px rgba(184,255,77,.18)}
.gx-404-ticker{position:absolute;left:-3%;right:-3%;bottom:34px;display:flex;gap:50px;white-space:nowrap;overflow:hidden;color:rgba(255,255,255,.16);font:900 11px ui-monospace,monospace;letter-spacing:.2em;transform:rotate(-2deg)}
.gx-404-ticker span{animation:gxTicker 14s linear infinite}
@media(max-width:760px){.gx-lab-head{display:block}.gx-lab-live{margin-top:22px}.gx-lab-board{grid-template-columns:1fr 1fr}.gx-lab-score{grid-row:auto;grid-column:1/-1}.gx-chart-card{grid-column:1/-1}.gx-lab-foot{grid-column:1/-1;display:block}.gx-lab-foot p{margin-top:10px}.gx-404-number{top:17vh;right:-8vw}}
@media(prefers-reduced-motion:reduce){.gx-chart-line,.gx-lab-live i,.gx-lab-grid,.gx-404-ticker span{animation:none!important}}
@keyframes gxDrawChart{to{stroke-dashoffset:0}} @keyframes gxLabGrid{to{background-position:96px 96px}} @keyframes gxLive{50%{opacity:.35;transform:scale(.7)}} @keyframes gxTicker{to{transform:translateX(-100%)}}