.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background 380ms ease,
    backdrop-filter 380ms ease,
    border-color 380ms ease,
    box-shadow 380ms ease;
}

/* Glass state once the user scrolls past the hero edge */
.site-header.is-scrolled {
  background: rgba(8, 1, 18, 0.62);
  backdrop-filter: blur(22px) saturate(140%);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.38);
}

.navbar {
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  transition: min-height 380ms ease;
}

.site-header.is-scrolled .navbar {
  min-height: calc(var(--header-height) - 12px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: max-content;
}

.brand__logo {
  width: 118px;
  height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(57, 255, 20, 0.34));
}

.brand__logo--small {
  width: 104px;
  height: 42px;
}

.brand__name {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 800;
  color: #fff;
}

.nav-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
}

.nav-menu a {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.92rem;
  font-weight: 600;
  transition: color 220ms ease, text-shadow 220ms ease;
}

/* Animated underline for primary nav links (skips the boxed admin pill) */
.nav-menu a:not(.nav-admin-link) {
  position: relative;
}

.nav-menu a:not(.nav-admin-link)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-gold));
  box-shadow: 0 0 12px rgba(57, 255, 20, 0.6);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-menu a:not(.nav-admin-link):hover::after,
.nav-menu a:not(.nav-admin-link):focus-visible::after {
  transform: scaleX(1);
}

.nav-menu a:hover,
.nav-menu a:focus-visible {
  color: var(--color-primary);
  text-shadow: 0 0 14px rgba(57, 255, 20, 0.55);
}

.nav-admin-link {
  transition: border-color 220ms ease, background 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.nav-admin-link:hover,
.nav-admin-link:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(57, 255, 20, 0.55);
  background: rgba(57, 255, 20, 0.12);
  box-shadow: 0 0 22px rgba(57, 255, 20, 0.22), inset 0 0 18px rgba(57, 255, 20, 0.08);
}

.nav-admin-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border: 1px solid rgba(57, 255, 20, 0.28);
  border-radius: var(--radius-md);
  background: rgba(57, 255, 20, 0.07);
  box-shadow: inset 0 0 18px rgba(57, 255, 20, 0.06);
}

.nav-admin-link .material-symbols-outlined {
  font-size: 17px;
}

.language-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-primary);
}

.language-select .material-symbols-outlined {
  font-size: 18px;
}

.language-select select {
  width: 82px;
  height: 30px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font-family: var(--font-code);
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
  appearance: auto;
}

.language-select select option {
  background: #080112;
  color: #fff;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 4px auto;
  background: currentColor;
  border-radius: 2px;
}

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 2147483200;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(57, 255, 20, 0.14), transparent 28%),
    radial-gradient(circle at 58% 46%, rgba(214, 168, 79, 0.16), transparent 28%),
    rgba(8, 1, 18, 0.98);
  transition: opacity 620ms ease, visibility 620ms ease;
}

.page-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.page-loader__stage {
  position: relative;
  width: min(430px, 82vw);
  aspect-ratio: 1;
  transform-style: preserve-3d;
  perspective: 900px;
}

.page-loader__stage::before,
.page-loader__stage::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.page-loader__stage::before {
  width: 128%;
  height: 12px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent, rgba(255, 248, 205, 0.12), rgba(255, 248, 205, 0.72), rgba(214, 168, 79, 0.42), transparent);
  box-shadow:
    0 0 13px rgba(255, 242, 174, 0.48),
    0 0 38px rgba(214, 168, 79, 0.26),
    0 0 58px rgba(57, 255, 20, 0.08);
  filter: blur(0.45px);
}

.page-loader__stage::after {
  width: 106%;
  height: 56px;
  background:
    radial-gradient(circle at 18% 52%, rgba(255, 242, 174, 0.9) 0 2px, transparent 3px),
    radial-gradient(circle at 32% 40%, rgba(214, 168, 79, 0.9) 0 1px, transparent 2px),
    radial-gradient(circle at 48% 58%, rgba(255, 242, 174, 0.72) 0 2px, transparent 3px),
    radial-gradient(circle at 64% 44%, rgba(57, 255, 20, 0.56) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 50%, rgba(214, 168, 79, 0.84) 0 2px, transparent 3px);
  filter: blur(0.25px) drop-shadow(0 0 9px rgba(214, 168, 79, 0.34));
}

.page-loader__slice--top,
.page-loader__slice--bottom {
  filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
}

.page-loader__slice {
  position: absolute;
  inset: 0;
  will-change: transform, opacity, filter;
}

.page-loader__slice--top {
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.page-loader__slice--bottom {
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.page-loader__logo {
  position: absolute;
  z-index: 2;
  inset: 50% auto auto 50%;
  width: min(360px, 74vw);
  height: auto;
  filter:
    drop-shadow(0 0 18px rgba(57, 255, 20, 0.42))
    drop-shadow(0 0 28px rgba(214, 168, 79, 0.28));
  transform: translate(-50%, -50%);
  object-fit: contain;
}

.page-loader__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 999px;
  border: 1px solid rgba(57, 255, 20, 0.2);
  box-shadow:
    0 0 28px rgba(57, 255, 20, 0.16),
    inset 0 0 32px rgba(214, 168, 79, 0.08);
}

.page-loader__ring::before,
.page-loader__ring::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  background:
    conic-gradient(
      from 12deg,
      transparent 0deg,
      transparent 24deg,
      rgba(214, 168, 79, 0.98) 36deg,
      rgba(255, 242, 174, 0.92) 46deg,
      transparent 64deg,
      transparent 145deg,
      rgba(214, 168, 79, 0.86) 164deg,
      rgba(255, 242, 174, 0.94) 174deg,
      transparent 194deg,
      transparent 360deg
    );
  padding: 3px;
  opacity: 0.92;
  filter: drop-shadow(0 0 13px rgba(214, 168, 79, 0.62));
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
}

.page-loader__ring::after {
  inset: 10px;
  padding: 2px;
  opacity: 0.54;
  background:
    conic-gradient(
      from 140deg,
      transparent 0deg,
      transparent 46deg,
      rgba(255, 242, 174, 0.82) 54deg,
      rgba(214, 168, 79, 0.92) 62deg,
      transparent 82deg,
      transparent 230deg,
      rgba(214, 168, 79, 0.76) 246deg,
      transparent 268deg,
      transparent 360deg
    );
}

.page-loader__line {
  position: absolute;
  width: min(290px, 56vw);
  height: 2px;
  margin-top: min(245px, 46vw);
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
}

.page-loader__slash {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: 120%;
  height: 4px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent, rgba(255, 242, 174, 0.72), rgba(214, 168, 79, 0.78), rgba(255, 255, 255, 0.48), transparent);
  box-shadow:
    0 0 12px rgba(255, 242, 174, 0.5),
    0 0 28px rgba(214, 168, 79, 0.32),
    0 0 46px rgba(57, 255, 20, 0.08);
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transform: translate(-50%, -50%) rotate(-45deg);
  transform-origin: center;
}

.page-loader__slash::before,
.page-loader__slash::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 28%;
  height: 1px;
  border-radius: inherit;
  background: rgba(57, 255, 20, 0.56);
  box-shadow: 0 0 11px rgba(57, 255, 20, 0.28);
}

.page-loader__slash::before {
  left: 16%;
  transform: translateY(-10px);
}

.page-loader__slash::after {
  right: 16%;
  transform: translateY(10px);
}

.page-loader__line::before {
  content: "";
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--color-primary), var(--color-gold), transparent);
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2147482500;
  height: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}

.scroll-progress span {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--color-primary), var(--color-gold), var(--color-primary));
  box-shadow: 0 0 18px rgba(57, 255, 20, 0.55);
}

.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: var(--radius-md);
  font-weight: 800;
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.btn > * {
  position: relative;
  z-index: 2;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn--primary {
  border: 1px solid rgba(57, 255, 20, 0.38);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02)),
    rgba(8, 1, 18, 0.28);
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.035) inset,
    0 16px 42px rgba(57, 255, 20, 0.14);
  backdrop-filter: blur(16px);
}

.btn--primary::before,
.btn--primary::after {
  content: "";
  position: absolute;
  inset: auto -18% -72% -18%;
  z-index: 1;
  height: 96%;
  pointer-events: none;
  transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1), opacity 320ms ease;
}

.btn--primary::before {
  border-radius: 48% 52% 0 0;
  background:
    radial-gradient(circle at 22% 35%, rgba(255, 255, 255, 0.42), transparent 18%),
    radial-gradient(circle at 72% 28%, rgba(214, 168, 79, 0.34), transparent 19%),
    radial-gradient(circle at 48% 72%, rgba(255, 255, 255, 0.22), transparent 13%),
    linear-gradient(135deg, rgba(57, 255, 20, 0.95), rgba(19, 189, 88, 0.92));
  background-size: 230% 100%, 210% 100%, 180% 100%, 180% 100%;
  opacity: 0.9;
  transform: translateY(2%) rotate(3deg);
}

.btn--primary::after {
  border-radius: 43% 57% 0 0;
  background:
    radial-gradient(circle at 36% 38%, rgba(255, 255, 255, 0.24), transparent 16%),
    radial-gradient(circle at 68% 72%, rgba(214, 168, 79, 0.24), transparent 15%),
    linear-gradient(135deg, rgba(191, 255, 177, 0.72), rgba(57, 255, 20, 0.52));
  background-size: 210% 100%, 190% 100%, 180% 100%;
  opacity: 0.7;
  transform: translateY(8%) translateX(8%) rotate(5deg);
  transition-delay: 40ms;
}

.btn--primary:hover,
.btn--primary:focus-visible {
  border-color: rgba(57, 255, 20, 0.7);
  background: linear-gradient(135deg, var(--color-primary), #8fff75);
  color: var(--color-primary-dark);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 20px 58px rgba(57, 255, 20, 0.28);
}

.btn--primary:hover::before,
.btn--primary:focus-visible::before {
  opacity: 0;
  transform: translateY(-12%) rotate(0deg);
}

.btn--primary:hover::after,
.btn--primary:focus-visible::after {
  opacity: 0;
  transform: translateY(-8%) translateX(0) rotate(0deg);
}

.btn--ghost {
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  background: rgba(255, 255, 255, 0.035);
}

.btn--ghost:hover {
  border-color: rgba(57, 255, 20, 0.45);
  background: rgba(57, 255, 20, 0.06);
}

.glass-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025));
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(22px);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.32);
}

.eyebrow,
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--color-primary);
  font-family: var(--font-code);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.eyebrow {
  padding: 10px 16px;
  font-size: clamp(1.05rem, 1.55vw, 1.35rem);
  border: 1px solid rgba(57, 255, 20, 0.26);
  background: rgba(57, 255, 20, 0.08);
  border-radius: 999px;
}

.eyebrow__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--color-primary);
  box-shadow: 0 0 16px var(--color-primary);
}

.hero__lead {
  max-width: 650px;
  margin: 28px 0 0;
}

.hero__actions,
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.hero__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 42px;
}

.hero__meta div {
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.035);
}

.hero__meta strong {
  display: block;
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: 1.65rem;
  text-shadow: 0 0 18px rgba(57, 255, 20, 0.38);
}

.hero__meta strong span {
  color: inherit;
  font-size: inherit;
}

.hero__meta div > span {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.82rem;
}

/* ===========================================================================
   HERO BACKDROP — layered, self-contained "futuristic" scene
   aurora gradients + perspective grid floor + neural network + legibility scrim
   =========================================================================== */
.hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero__aurora {
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(38% 38% at 18% 22%, rgba(109, 40, 217, 0.55), transparent 62%),
    radial-gradient(34% 34% at 82% 16%, rgba(57, 255, 20, 0.30), transparent 62%),
    radial-gradient(46% 46% at 72% 82%, rgba(30, 64, 175, 0.48), transparent 64%),
    radial-gradient(32% 32% at 28% 80%, rgba(214, 168, 79, 0.22), transparent 62%);
  filter: blur(26px);
  opacity: 0.92;
  will-change: transform;
  animation: auroraDrift 22s ease-in-out infinite alternate;
}

.hero__grid-floor {
  position: absolute;
  left: 50%;
  bottom: -14%;
  width: 220%;
  height: 72%;
  transform: translateX(-50%) perspective(440px) rotateX(64deg);
  transform-origin: center bottom;
  background-image:
    linear-gradient(rgba(57, 255, 20, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110, 200, 255, 0.12) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse 60% 80% at 50% 100%, #000 8%, transparent 72%);
  mask-image: radial-gradient(ellipse 60% 80% at 50% 100%, #000 8%, transparent 72%);
  opacity: 0.5;
  will-change: background-position;
  animation: gridScroll 7s linear infinite;
}

.hero__network {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.85;
  will-change: transform;
  animation: netDrift 26s ease-in-out infinite alternate;
}

.hero__network-lines line {
  stroke: rgba(57, 255, 20, 0.16);
  stroke-width: 1;
}

.hero__network-nodes circle {
  fill: var(--color-primary);
  filter: drop-shadow(0 0 6px rgba(57, 255, 20, 0.85));
  transform-box: fill-box;
  transform-origin: center;
  animation: nodeTwinkle 4.2s ease-in-out infinite;
}

.hero__network-nodes circle:nth-child(2n) { animation-delay: 0.6s; }
.hero__network-nodes circle:nth-child(3n) { animation-delay: 1.2s; fill: var(--color-gold); }
.hero__network-nodes circle:nth-child(5n) { animation-delay: 1.9s; fill: #8fd0ff; }
.hero__network-nodes circle:last-child {
  fill: #fff;
  filter: drop-shadow(0 0 14px rgba(57, 255, 20, 0.95));
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 1, 18, 0.55) 0%, transparent 20%, transparent 58%, rgba(8, 1, 18, 0.92) 100%),
    radial-gradient(62% 54% at 50% 42%, transparent 40%, rgba(8, 1, 18, 0.42) 100%);
}

/* keep hero content above the backdrop */
.hero__grid {
  position: relative;
  z-index: 1;
}

.device-stack {
  position: relative;
  min-height: 560px;
  perspective: 900px;
}

.device-card {
  border-radius: var(--radius-lg);
}

.waving-avatar {
  position: absolute;
  top: 0;
  left: min(8vw, 54px);
  z-index: 4;
  width: 178px;
  height: 220px;
  pointer-events: none;
  transform-style: preserve-3d;
  animation: avatarFloat 6.4s ease-in-out infinite;
}

.waving-avatar__halo {
  position: absolute;
  inset: 18px 12px 28px;
  border-radius: 42% 58% 50% 50%;
  background:
    radial-gradient(circle at 50% 34%, rgba(57, 255, 20, 0.24), transparent 52%),
    radial-gradient(circle at 50% 66%, rgba(109, 40, 217, 0.22), transparent 58%);
  filter: blur(8px);
  opacity: 0.9;
  animation: avatarGlow 3.8s ease-in-out infinite alternate;
}

.waving-avatar__body {
  position: absolute;
  left: 50%;
  top: 28px;
  width: 116px;
  height: 158px;
  transform: translateX(-50%) rotateX(7deg) rotateY(-12deg);
  transform-style: preserve-3d;
}

.waving-avatar__head {
  position: absolute;
  left: 50%;
  top: 0;
  width: 86px;
  height: 76px;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 26px 26px 24px 24px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.06)),
    linear-gradient(160deg, rgba(57, 255, 20, 0.18), rgba(109, 40, 217, 0.20));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 18px 42px rgba(0, 0, 0, 0.28),
    0 0 32px rgba(57, 255, 20, 0.15);
  backdrop-filter: blur(14px);
}

.waving-avatar__head::before,
.waving-avatar__head::after {
  content: "";
  position: absolute;
  top: -18px;
  width: 2px;
  height: 20px;
  background: linear-gradient(rgba(57, 255, 20, 0.9), transparent);
  transform-origin: bottom;
}

.waving-avatar__head::before {
  left: 24px;
  transform: rotate(-18deg);
}

.waving-avatar__head::after {
  right: 24px;
  transform: rotate(18deg);
}

.waving-avatar__eye {
  position: absolute;
  top: 30px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 14px rgba(57, 255, 20, 0.9);
  animation: avatarBlink 5.5s ease-in-out infinite;
}

.waving-avatar__eye:first-child {
  left: 25px;
}

.waving-avatar__eye:nth-child(2) {
  right: 25px;
}

.waving-avatar__smile {
  position: absolute;
  left: 50%;
  bottom: 19px;
  width: 25px;
  height: 12px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.86);
  border-radius: 0 0 999px 999px;
  transform: translateX(-50%);
}

.waving-avatar__torso {
  position: absolute;
  left: 50%;
  top: 78px;
  width: 96px;
  height: 92px;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 30px 30px 24px 24px;
  background:
    radial-gradient(circle at 50% 28%, rgba(57, 255, 20, 0.22), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.045));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 20px 46px rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(12px);
}

.waving-avatar__core {
  position: absolute;
  left: 50%;
  top: 31px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  transform: translateX(-50%);
  border: 1px solid rgba(57, 255, 20, 0.55);
  background: radial-gradient(circle, rgba(57, 255, 20, 0.95), rgba(57, 255, 20, 0.12) 62%, transparent 64%);
  box-shadow: 0 0 26px rgba(57, 255, 20, 0.48);
}

.waving-avatar__arm {
  position: absolute;
  top: 88px;
  width: 34px;
  height: 72px;
  border-radius: 999px;
  transform-origin: 50% 12px;
}

.waving-avatar__arm span {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: inherit;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.17), rgba(57, 255, 20, 0.08));
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.20);
}

.waving-avatar__arm span::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -12px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(145deg, rgba(57, 255, 20, 0.94), rgba(30, 64, 175, 0.72));
  box-shadow: 0 0 24px rgba(57, 255, 20, 0.28);
}

.waving-avatar__arm--left {
  left: 0;
  transform: rotate(18deg);
}

.waving-avatar__arm--right {
  right: -4px;
  top: 75px;
  height: 78px;
  transform: rotate(-42deg);
  animation: avatarWave 1.55s ease-in-out infinite;
}

.waving-avatar__shadow {
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 116px;
  height: 24px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(57, 255, 20, 0.25), transparent 68%);
  filter: blur(5px);
  animation: avatarShadow 6.4s ease-in-out infinite;
}

.waving-avatar__spark {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 18px rgba(57, 255, 20, 0.9);
  animation: avatarSpark 3.8s ease-in-out infinite;
}

.waving-avatar__spark--one {
  top: 34px;
  right: 20px;
}

.waving-avatar__spark--two {
  top: 92px;
  left: 0;
  width: 6px;
  height: 6px;
  animation-delay: -1.4s;
}

.waving-avatar__spark--three {
  right: 8px;
  bottom: 44px;
  width: 5px;
  height: 5px;
  animation-delay: -2.2s;
}

.device-card--main {
  position: relative;
  width: min(100%, 720px);
  padding: 16px;
  margin-left: auto;
  box-shadow: var(--shadow-purple);
}

.device-card__top {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.device-card__top span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
}

.device-card__top span:first-child {
  background: var(--color-gold);
}

.dashboard-preview {
  display: grid;
  grid-template-columns: 74px 1fr;
  min-height: 400px;
  border-radius: 14px;
  overflow: hidden;
  background: #0b0715;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.dashboard-preview__sidebar {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 22px 18px;
  background: rgba(109, 40, 217, 0.18);
}

.dashboard-preview__sidebar span {
  height: 34px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.12);
}

.dashboard-preview__content {
  display: grid;
  gap: 18px;
  padding: 24px;
}

.metric-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.metric-card,
.chart-card,
.list-card {
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.metric-card {
  min-height: 90px;
}

.metric-card--green {
  background: linear-gradient(135deg, rgba(57, 255, 20, 0.18), rgba(214, 168, 79, 0.09));
}

.chart-card {
  display: flex;
  align-items: end;
  gap: 16px;
  min-height: 180px;
  padding: 22px;
}

.chart-card span {
  flex: 1;
  border-radius: 999px 999px 4px 4px;
  background: linear-gradient(180deg, var(--color-primary), var(--color-purple));
}

.chart-card span:nth-child(1) { height: 42%; }
.chart-card span:nth-child(2) { height: 72%; }
.chart-card span:nth-child(3) { height: 58%; }
.chart-card span:nth-child(4) { height: 86%; }
.chart-card span:nth-child(5) { height: 64%; }

.list-card {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.list-card span {
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

.device-card--phone {
  position: absolute;
  right: 0;
  bottom: 20px;
  width: 190px;
  padding: 18px;
  text-align: center;
  box-shadow: var(--shadow-gold);
}

.phone-notch {
  width: 54px;
  height: 6px;
  margin: 0 auto 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
}

.qr-tile {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px;
  border-radius: var(--radius-md);
  background: rgba(57, 255, 20, 0.09);
  border: 1px solid rgba(57, 255, 20, 0.25);
}

.qr-tile span {
  aspect-ratio: 1;
  border-radius: 3px;
  background: var(--color-primary);
}

.device-card--phone p {
  margin: 16px 0 0;
  color: #fff;
  font-weight: 800;
}

.orbit-badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 999px;
  background: rgba(8, 1, 18, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 800;
  box-shadow: 0 12px 38px rgba(0, 0, 0, 0.28);
}

.orbit-badge .material-symbols-outlined {
  color: var(--color-primary);
}

.orbit-badge--ai {
  top: 40px;
  right: 24px;
}

.orbit-badge--secure {
  left: 8px;
  bottom: 104px;
}

.about-copy {
  display: grid;
  gap: 16px;
}

.service-card {
  position: relative;
  overflow: hidden;
  min-height: 232px;
  padding: 30px 28px;
  border-radius: var(--radius-lg);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), border-color 320ms ease, box-shadow 320ms ease;
}

/* top accent line that lights up on hover */
.service-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-primary), var(--color-gold), transparent);
  opacity: 0;
  transition: opacity 320ms ease;
}

.service-card:hover {
  transform: translateY(-8px);
  border-color: rgba(57, 255, 20, 0.4);
  box-shadow: var(--shadow-green);
}

.service-card:hover::before {
  opacity: 1;
}

.service-card__icon {
  display: inline-flex;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  border-radius: 16px;
  font-size: 28px;
  color: var(--color-primary);
  background: rgba(57, 255, 20, 0.1);
  border: 1px solid rgba(57, 255, 20, 0.28);
  box-shadow: inset 0 0 20px rgba(57, 255, 20, 0.08);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 320ms ease;
}

.service-card:hover .service-card__icon {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 0 26px rgba(57, 255, 20, 0.4), inset 0 0 20px rgba(57, 255, 20, 0.12);
}

.service-card h3,
.project-card h3,
.workflow-step h3 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  color: #fff;
  letter-spacing: 0;
}

.service-card p,
.project-card p,
.workflow-step p,
.why-list p {
  margin: 0;
  color: rgba(229, 226, 225, 0.64);
  line-height: 1.65;
}

.project-card {
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  transition: transform 280ms ease, border-color 280ms ease;
}

.project-card:hover {
  transform: translateY(-7px);
  border-color: rgba(214, 168, 79, 0.42);
}

.project-card__visual {
  min-height: 250px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(109, 40, 217, 0.42), rgba(30, 64, 175, 0.20)),
    #0c0618;
}

.project-card__visual--catalog {
  background:
    linear-gradient(135deg, rgba(214, 168, 79, 0.34), rgba(57, 255, 20, 0.12)),
    #0c0618;
}

.project-card__visual--dashboard {
  background:
    linear-gradient(135deg, rgba(30, 64, 175, 0.40), rgba(109, 40, 217, 0.24)),
    #0c0618;
}

.project-card__visual .material-symbols-outlined {
  font-size: 72px;
  color: var(--color-primary);
  text-shadow: 0 0 24px rgba(57, 255, 20, 0.6);
}

.project-card__body {
  padding: 26px;
}

.project-card__body > span {
  display: block;
  margin-bottom: 10px;
  color: var(--color-gold);
  font-family: var(--font-code);
  font-size: 0.76rem;
  text-transform: uppercase;
}

.workflow-step {
  min-height: 250px;
  padding: 28px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.workflow-step span {
  display: inline-flex;
  margin-bottom: 42px;
  color: var(--color-primary);
  font-family: var(--font-code);
  font-size: 0.88rem;
}

.why-list {
  display: grid;
  gap: 16px;
}

.why-list div {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 16px;
  align-items: center;
  padding: 18px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.why-list .material-symbols-outlined {
  display: inline-flex;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  border-radius: var(--radius-md);
  background: rgba(57, 255, 20, 0.09);
}

.contact-card {
  position: relative;
  max-width: 900px;
  margin-inline: auto;
  padding: 58px;
  border-radius: var(--radius-lg);
  text-align: center;
  overflow: hidden;
}

.contact-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 0%, rgba(57, 255, 20, 0.16), transparent 34rem);
}

.contact-card > * {
  position: relative;
}

.contact-email {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3vw, 2rem);
  font-weight: 800;
  text-shadow: 0 0 18px rgba(57, 255, 20, 0.34);
}

.contact-actions {
  justify-content: center;
}

.site-footer {
  padding: 32px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(8, 1, 18, 0.72);
}

.site-footer p,
.site-footer a:last-child {
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.9rem;
}

[dir="rtl"] .hero__content,
[dir="rtl"] .section-heading,
[dir="rtl"] .about-copy,
[dir="rtl"] .project-card__body,
[dir="rtl"] .workflow-step,
[dir="rtl"] .why-list,
[dir="rtl"] .contact-card {
  text-align: right;
}

[dir="rtl"] .section-heading--center,
[dir="rtl"] .contact-card {
  text-align: center;
}

.scroll-top {
  position: fixed !important;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 2147483000;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(57, 255, 20, 0.38);
  border-radius: var(--radius-md);
  background: rgba(8, 1, 18, 0.72);
  color: var(--color-primary);
  box-shadow: var(--shadow-green);
  backdrop-filter: blur(18px);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 220ms ease, visibility 220ms ease, transform 220ms ease, background 220ms ease;
}

.scroll-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-top:hover {
  background: rgba(57, 255, 20, 0.12);
}

.floating-contact {
  position: fixed !important;
  right: max(20px, env(safe-area-inset-right));
  left: auto;
  bottom: calc(max(20px, env(safe-area-inset-bottom)) + 76px);
  z-index: 2147483000;
  display: grid;
  gap: 12px;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto;
  isolation: isolate;
}

.floating-contact__item {
  position: relative;
  z-index: 1;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
  opacity: 1;
  visibility: visible;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.floating-contact__item:hover {
  transform: translateY(-5px) scale(1.04);
  box-shadow: var(--shadow-green);
  border-color: rgba(57, 255, 20, 0.45);
}

.floating-contact__item--whatsapp {
  background: linear-gradient(145deg, rgba(37, 211, 102, 0.95), rgba(18, 128, 72, 0.95));
}

.floating-contact__item--email {
  background: linear-gradient(145deg, rgba(109, 40, 217, 0.88), rgba(214, 168, 79, 0.58));
}

.floating-contact__item svg {
  width: 29px;
  height: 29px;
  fill: currentColor;
}

.floating-contact__item .material-symbols-outlined {
  font-size: 26px;
}

.floating-contact__item--phone {
  background: linear-gradient(145deg, rgba(57, 255, 20, 0.92), rgba(5, 57, 0, 0.95));
}

.floating-contact__item--instagram {
  background: linear-gradient(145deg, #feda75, #d62976 45%, #962fbf 75%, #4f5bd5);
}

/* Direct contact channels (inside contact card) */
.contact-channels {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 28px;
}

.contact-channel {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text);
  font-weight: 600;
  font-size: 0.92rem;
  transition: border-color 200ms ease, background 200ms ease, transform 200ms ease;
}

.contact-channel .material-symbols-outlined {
  font-size: 20px;
  color: var(--color-primary);
}

.contact-channel svg {
  width: 20px;
  height: 20px;
  fill: var(--color-primary);
  flex: 0 0 auto;
}

.contact-channel:hover {
  transform: translateY(-2px);
  border-color: rgba(57, 255, 20, 0.45);
  background: rgba(57, 255, 20, 0.08);
}

/* Footer extra row: social + policies */
.footer-extra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-social {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.footer-social__item {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.78);
  transition: color 200ms ease, border-color 200ms ease, transform 200ms ease, background 200ms ease;
}

.footer-social__item svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.footer-social__item .material-symbols-outlined {
  font-size: 20px;
}

.footer-social__item:hover {
  color: #fff;
  transform: translateY(-2px);
  border-color: rgba(57, 255, 20, 0.4);
  background: rgba(57, 255, 20, 0.08);
}

.footer-policies {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.footer-policy-link {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
  transition: color 200ms ease;
}

.footer-policy-link:hover {
  color: var(--color-primary);
}

.footer-policy-sep {
  color: rgba(255, 255, 255, 0.28);
}

/* Policy modal */
body.modal-open {
  overflow: hidden;
}

.policy-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 240ms ease, visibility 240ms ease;
}

.policy-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.policy-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 1, 10, 0.72);
  backdrop-filter: blur(6px);
}

.policy-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(640px, 100%);
  max-height: min(80vh, 720px);
  overflow-y: auto;
  padding: 40px;
  border-radius: var(--radius-lg);
  transform: translateY(16px) scale(0.98);
  transition: transform 280ms ease;
}

.policy-modal.is-open .policy-modal__dialog {
  transform: translateY(0) scale(1);
}

.policy-modal__close {
  position: absolute;
  top: 16px;
  inset-inline-end: 16px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text);
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease;
}

.policy-modal__close:hover {
  background: rgba(57, 255, 20, 0.12);
  border-color: rgba(57, 255, 20, 0.4);
}

.policy-modal__title {
  margin: 0 0 18px;
  padding-inline-end: 44px;
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  text-shadow: 0 0 18px rgba(57, 255, 20, 0.3);
}

.policy-modal__body {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.96rem;
  line-height: 1.85;
}

.policy-modal__body p {
  margin: 0 0 14px;
}

.policy-modal__body strong {
  color: var(--color-text);
}

.policy-modal__body a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* ===========================================================================
   ANIMATED STATISTICS / IMPACT
   =========================================================================== */
.stats-section {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(57, 255, 20, 0.04), rgba(109, 40, 217, 0.05)),
    rgba(9, 4, 22, 0.6);
  border-block: 1px solid rgba(255, 255, 255, 0.07);
}

.stats-section__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(40% 60% at 12% 0%, rgba(57, 255, 20, 0.12), transparent 60%),
    radial-gradient(40% 60% at 88% 100%, rgba(109, 40, 217, 0.16), transparent 60%);
}

.stats-section .container {
  position: relative;
  z-index: 1;
}

.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 34px 22px;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
  transition: transform 320ms ease, border-color 320ms ease, box-shadow 320ms ease;
}

.stat-card:hover {
  transform: translateY(-6px);
  border-color: rgba(57, 255, 20, 0.4);
  box-shadow: var(--shadow-green);
}

.stat-card__icon {
  display: inline-flex;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  border-radius: 50%;
  color: var(--color-primary);
  background: rgba(57, 255, 20, 0.1);
  border: 1px solid rgba(57, 255, 20, 0.26);
  box-shadow: inset 0 0 20px rgba(57, 255, 20, 0.08);
  font-size: 28px;
}

.stat-card__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 4.6vw, 3.4rem);
  line-height: 1;
  direction: ltr;
  unicode-bidi: isolate;
  color: #fff;
  background: linear-gradient(135deg, #fff 0%, var(--color-primary) 70%, var(--color-gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 26px rgba(57, 255, 20, 0.25);
  font-variant-numeric: tabular-nums;
}

.stat-card__label {
  color: rgba(229, 226, 225, 0.66);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ===========================================================================
   TECHNOLOGY STACK — marquee strip
   =========================================================================== */
.section--tech {
  padding: 72px 0;
  overflow: hidden;
  border-block: 1px solid rgba(255, 255, 255, 0.06);
  background:
    radial-gradient(circle at 18% 20%, rgba(57, 255, 20, 0.12), transparent 28%),
    radial-gradient(circle at 82% 66%, rgba(109, 40, 217, 0.18), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent);
}

.section-heading h2.section-heading__sm {
  font-size: clamp(1.3rem, 2.4vw, 1.95rem);
}

.tech-space {
  position: relative;
  width: min(1180px, calc(100% - 32px));
  height: clamp(360px, 42vw, 500px);
  margin: 38px auto 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 50%, rgba(57, 255, 20, 0.08), transparent 22%),
    radial-gradient(circle at 30% 70%, rgba(30, 64, 175, 0.18), transparent 30%),
    radial-gradient(circle at 72% 30%, rgba(109, 40, 217, 0.18), transparent 28%),
    rgba(8, 1, 18, 0.62);
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.48), 0 30px 80px rgba(0, 0, 0, 0.22);
}

.tech-space::before,
.tech-space::after {
  content: "";
  position: absolute;
  inset: -35%;
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.58) 0 1px, transparent 1.5px) 0 0 / 94px 94px,
    radial-gradient(circle, rgba(57, 255, 20, 0.38) 0 1px, transparent 1.5px) 38px 22px / 146px 146px;
  opacity: 0.26;
  animation: techStars 42s linear infinite;
}

.tech-space::after {
  filter: blur(1px);
  opacity: 0.18;
  animation-duration: 64s;
  animation-direction: reverse;
}

.tech-space__stars {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 22%, rgba(57, 255, 20, 0.8) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 18%, rgba(255, 255, 255, 0.7) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 82%, rgba(214, 168, 79, 0.7) 0 1.5px, transparent 3px),
    radial-gradient(circle at 22% 78%, rgba(143, 208, 255, 0.7) 0 1px, transparent 2px);
  animation: techNebula 11s ease-in-out infinite alternate;
}

.tech-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(57, 255, 20, 0.12);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  pointer-events: none;
}

.tech-orbit--a {
  width: 68%;
  height: 54%;
  animation: techOrbitSpin 36s linear infinite;
}

.tech-orbit--b {
  width: 88%;
  height: 70%;
  border-color: rgba(143, 208, 255, 0.10);
  animation: techOrbitSpin 52s linear infinite reverse;
}

.tech-planet {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 142px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.035));
  color: var(--color-text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  white-space: nowrap;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28), 0 0 24px rgba(57, 255, 20, 0.10);
  backdrop-filter: blur(14px);
  transform: translate(-50%, -50%);
  animation: techFloat var(--duration) ease-in-out infinite;
  animation-delay: var(--delay);
  will-change: transform;
}

.tech-planet:nth-of-type(odd) {
  animation-name: techFloatAlt;
}

.tech-planet:hover {
  border-color: rgba(57, 255, 20, 0.4);
  box-shadow: var(--shadow-green);
}

.tech-logo {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  color: #071007;
  background: var(--color-primary);
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 0 22px rgba(57, 255, 20, 0.35);
}

.tech-logo--react {
  color: #61dafb;
  background: rgba(97, 218, 251, 0.10);
  border: 1px solid rgba(97, 218, 251, 0.5);
}

.tech-logo--react::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 14px currentColor;
}

.tech-logo--react i {
  position: absolute;
  width: 30px;
  height: 12px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.tech-logo--react i:nth-child(2) { transform: rotate(60deg); }
.tech-logo--react i:nth-child(3) { transform: rotate(-60deg); }

.tech-logo--next { background: #f5f5f5; color: #050505; }
.tech-logo--node { background: #68a063; color: #071007; font-size: 0.82rem; }
.tech-logo--ts { background: #3178c6; color: #fff; border-radius: 10px; font-size: 0.8rem; }
.tech-logo--postgres { background: #336791; color: #fff; font-size: 0.82rem; }
.tech-logo--stripe { background: #635bff; color: #fff; }
.tech-logo--api { background: #d6a84f; color: #0b0614; font-size: 0.72rem; }
.tech-logo--ai { background: #111827; color: #39ff14; border: 1px solid rgba(57, 255, 20, 0.42); }

.tech-logo--tailwind {
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.55);
}

.tech-logo--tailwind i {
  position: absolute;
  width: 25px;
  height: 10px;
  border-radius: 999px;
  background: #38bdf8;
  transform: skewX(-18deg);
}

.tech-logo--tailwind i:nth-child(1) {
  top: 11px;
  left: 6px;
}

.tech-logo--tailwind i:nth-child(2) {
  bottom: 10px;
  right: 6px;
  opacity: 0.76;
}

.tech-logo--figma {
  grid-template-columns: repeat(2, 11px);
  grid-template-rows: repeat(3, 11px);
  gap: 1px;
  background: transparent;
  box-shadow: none;
}

.tech-logo--figma i {
  width: 11px;
  height: 11px;
}

.tech-logo--figma i:nth-child(1) { background: #f24e1e; border-radius: 9px 0 0 9px; }
.tech-logo--figma i:nth-child(2) { background: #ff7262; border-radius: 0 9px 9px 0; }
.tech-logo--figma i:nth-child(3) { background: #a259ff; border-radius: 9px 0 0 9px; }
.tech-logo--figma i:nth-child(4) { background: #1abcfe; border-radius: 50%; }
.tech-logo--figma i:nth-child(5) { background: #0acf83; border-radius: 9px 0 9px 9px; grid-column: 1; }

@keyframes techFloat {
  0%, 100% { transform: translate(-50%, -50%) translate3d(0, 0, 0) rotate(-2deg); }
  35% { transform: translate(-50%, -50%) translate3d(18px, -18px, 0) rotate(3deg); }
  70% { transform: translate(-50%, -50%) translate3d(-14px, 16px, 0) rotate(-4deg); }
}

@keyframes techFloatAlt {
  0%, 100% { transform: translate(-50%, -50%) translate3d(0, 0, 0) rotate(2deg); }
  40% { transform: translate(-50%, -50%) translate3d(-20px, -14px, 0) rotate(-3deg); }
  75% { transform: translate(-50%, -50%) translate3d(16px, 18px, 0) rotate(4deg); }
}

@keyframes techStars {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to { transform: translate3d(4%, -4%, 0) rotate(360deg); }
}

@keyframes techNebula {
  from { opacity: 0.58; transform: scale(1); }
  to { opacity: 0.95; transform: scale(1.04); }
}

@keyframes techOrbitSpin {
  from { transform: translate(-50%, -50%) rotate(-12deg); }
  to { transform: translate(-50%, -50%) rotate(348deg); }
}

/* ===========================================================================
   OUR WORK — project showcase cards
   =========================================================================== */
.work-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-lg);
  transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1), border-color 380ms ease, box-shadow 380ms ease;
}

.work-card:hover {
  transform: translateY(-10px);
  border-color: rgba(57, 255, 20, 0.4);
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.4), 0 0 40px rgba(57, 255, 20, 0.12);
}

.work-card__preview {
  position: relative;
}

.work-card__shot {
  display: block;
  width: 100%;
  height: auto;
}

.work-logo-panel {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(57, 255, 20, 0.16), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015)),
    #0a0617;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.work-logo-panel:hover .work-card__logo {
  transform: translateY(-4px) scale(1.03);
  filter: drop-shadow(0 18px 34px rgba(57, 255, 20, 0.2));
}

.work-card__logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 260ms ease, filter 260ms ease;
}

.work-mock {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(160deg, #0e0822, #0a0617);
}

.work-mock__chrome {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.work-mock__chrome span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}

.work-mock__chrome span:first-child { background: var(--color-gold); }
.work-mock__chrome span:nth-child(2) { background: rgba(57, 255, 20, 0.6); }

.work-mock__screen {
  position: absolute;
  inset: 32px 0 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-content: start;
  gap: 12px;
  padding: 18px;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.work-card:hover .work-mock__screen {
  transform: scale(1.03);
}

.wm-bar {
  grid-column: 1 / -1;
  height: 16px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
}

.wm-hero {
  grid-column: 1 / -1;
  height: 96px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(109, 40, 217, 0.5), rgba(57, 255, 20, 0.18));
}

.wm-cell {
  height: 46px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.work-mock__icon {
  position: absolute;
  bottom: 12px;
  inset-inline-end: 14px;
  font-size: 78px;
  color: var(--color-primary);
  opacity: 0.16;
  filter: drop-shadow(0 0 18px rgba(57, 255, 20, 0.5));
}

.work-mock--ecom .wm-hero { background: linear-gradient(135deg, rgba(214, 168, 79, 0.42), rgba(57, 255, 20, 0.14)); }
.work-mock--corporate .wm-hero { background: linear-gradient(135deg, rgba(30, 64, 175, 0.55), rgba(109, 40, 217, 0.3)); }
.work-mock--dashboard .wm-hero { background: linear-gradient(135deg, rgba(57, 255, 20, 0.3), rgba(30, 64, 175, 0.4)); }

.work-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px;
}

.work-card__type {
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(57, 255, 20, 0.08);
  border: 1px solid rgba(57, 255, 20, 0.24);
  color: var(--color-primary);
  font-family: var(--font-code);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.work-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.42rem;
  color: #fff;
}

.work-card__desc {
  margin: 0;
  color: rgba(229, 226, 225, 0.66);
  line-height: 1.7;
}

.work-card__stack {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.tech-badge {
  padding: 5px 11px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--font-code);
  font-size: 0.74rem;
}

.work-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: var(--color-primary);
  font-family: var(--font-display);
  font-weight: 800;
  transition: gap 240ms ease, color 240ms ease;
}

.work-card__link .material-symbols-outlined { font-size: 20px; }

.work-card__link:hover { gap: 14px; color: #8fff75; }

/* ===========================================================================
   HOW WE WORK — process timeline
   =========================================================================== */
.process {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
  margin: 58px 0 0;
  padding: 0;
  list-style: none;
}

.process::before {
  content: "";
  position: absolute;
  top: 27px;
  left: 9%;
  right: 9%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(57, 255, 20, 0.4), rgba(214, 168, 79, 0.4), rgba(57, 255, 20, 0.4), transparent);
  z-index: 0;
}

.process-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.process-step__node {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  color: var(--color-primary);
  background: rgba(8, 1, 18, 0.95);
  border: 1px solid rgba(57, 255, 20, 0.4);
  box-shadow: 0 0 0 7px rgba(8, 1, 18, 0.95), 0 0 24px rgba(57, 255, 20, 0.2);
  transition: transform 300ms ease, box-shadow 300ms ease, background 300ms ease;
}

.process-step__node .material-symbols-outlined { font-size: 26px; }

.process-step:hover .process-step__node {
  transform: translateY(-4px);
  background: rgba(57, 255, 20, 0.12);
  box-shadow: 0 0 0 7px rgba(8, 1, 18, 0.95), 0 0 30px rgba(57, 255, 20, 0.45);
}

.process-step__index {
  font-family: var(--font-code);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--color-gold);
}

.process-step__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.06rem;
  color: #fff;
}

.process-step__text {
  margin: 0;
  color: rgba(229, 226, 225, 0.6);
  font-size: 0.86rem;
  line-height: 1.6;
}

/* ===========================================================================
   WHY CHOOSE US — feature cards
   =========================================================================== */
.feature-card {
  position: relative;
  overflow: hidden;
  padding: 30px 26px;
  border-radius: var(--radius-lg);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), border-color 320ms ease, box-shadow 320ms ease;
}

.feature-card:hover {
  transform: translateY(-7px);
  border-color: rgba(57, 255, 20, 0.36);
  box-shadow: var(--shadow-green);
}

.feature-card__icon {
  display: inline-flex;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border-radius: 14px;
  font-size: 26px;
  color: var(--color-primary);
  background: rgba(57, 255, 20, 0.1);
  border: 1px solid rgba(57, 255, 20, 0.26);
  box-shadow: inset 0 0 18px rgba(57, 255, 20, 0.08);
}

.feature-card__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 1.18rem;
  color: #fff;
}

.feature-card__text {
  margin: 0;
  color: rgba(229, 226, 225, 0.64);
  line-height: 1.65;
}

/* ===========================================================================
   CTA — high-conversion gradient band
   =========================================================================== */
.cta-section {
  padding-top: 48px;
}

.cta-card {
  position: relative;
  overflow: hidden;
  padding: 66px 48px;
  border-radius: 28px;
  text-align: center;
  border: 1px solid rgba(57, 255, 20, 0.28);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(109, 40, 217, 0.6), transparent 55%),
    radial-gradient(120% 140% at 100% 100%, rgba(57, 255, 20, 0.32), transparent 55%),
    linear-gradient(135deg, rgba(20, 8, 40, 0.92), rgba(8, 1, 18, 0.94));
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.cta-card__glow {
  position: absolute;
  inset: -40%;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(57, 255, 20, 0.16), transparent 60%);
  animation: ctaPulse 6s ease-in-out infinite;
}

.cta-card__content {
  position: relative;
  z-index: 1;
}

.cta-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.08;
  color: #fff;
}

.cta-card__subtitle {
  max-width: 640px;
  margin: 18px auto 0;
  color: rgba(229, 226, 225, 0.8);
  font-size: 1.08rem;
  line-height: 1.7;
}

.cta-card__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 32px;
}