:root {
  --acid: #9dff58;
  --cyan: #31f5ff;
  --blue: #4b7cff;
  --violet: #a970ff;
  --coral: #ff6b8b;
  --pointer-x: 50vw;
  --pointer-y: 50vh;
}

body {
  background:
    radial-gradient(circle at 8% 8%, rgba(75, 124, 255, 0.13), transparent 26rem),
    radial-gradient(circle at 92% 32%, rgba(169, 112, 255, 0.09), transparent 29rem),
    radial-gradient(circle at 50% 78%, rgba(49, 245, 255, 0.07), transparent 32rem),
    var(--ink);
}

.cursor-glow {
  position: fixed;
  z-index: 1;
  left: var(--pointer-x);
  top: var(--pointer-y);
  width: 420px;
  height: 420px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(49, 245, 255, 0.11), rgba(75, 124, 255, 0.045) 38%, transparent 68%);
  transition: opacity 0.4s ease;
  mix-blend-mode: screen;
}

.cursor-glow.active {
  opacity: 1;
}

.scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 3px;
  z-index: 100;
  background: rgba(255, 255, 255, 0.035);
}

.scroll-progress span {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--blue), var(--cyan), var(--acid), var(--violet), var(--coral));
  box-shadow: 0 0 18px rgba(49, 245, 255, 0.75);
}

.site-header {
  background: linear-gradient(180deg, rgba(7, 16, 14, 0.92), rgba(7, 16, 14, 0.48));
  backdrop-filter: blur(16px);
}

.brand-name {
  text-shadow: 0 0 24px rgba(49, 245, 255, 0.15);
}

.brand-name small {
  background: linear-gradient(90deg, var(--cyan), var(--acid));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(8px);
  opacity: 0.6;
}

.hero::before {
  width: 420px;
  height: 420px;
  right: -180px;
  top: 4%;
  background: radial-gradient(circle, rgba(169, 112, 255, 0.22), transparent 66%);
  animation: orbit-drift 11s ease-in-out infinite alternate;
}

.hero::after {
  width: 300px;
  height: 300px;
  left: 18%;
  bottom: 4%;
  background: radial-gradient(circle, rgba(49, 245, 255, 0.15), transparent 65%);
  animation: orbit-drift 8s ease-in-out infinite alternate-reverse;
}

.hero h1 em,
.section-heading h2 em,
.contact h2 em {
  background: linear-gradient(110deg, var(--acid), var(--cyan), var(--blue), var(--violet), var(--acid));
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: spectrum 8s linear infinite;
}

.pulse {
  animation: pulse-ring 2.2s ease-out infinite;
}

.signal-card {
  border-color: rgba(49, 245, 255, 0.24);
  box-shadow: 0 18px 80px rgba(75, 124, 255, 0.12), inset 0 0 40px rgba(49, 245, 255, 0.025);
}

.signal-visual .line {
  stroke: var(--cyan);
  stroke-dasharray: 760;
  stroke-dashoffset: 760;
  animation: draw-signal 3.2s cubic-bezier(0.2, 0.75, 0.2, 1) forwards, signal-glow 4s ease-in-out 3.2s infinite;
}

.service,
.client-card,
.principle {
  position: relative;
  isolation: isolate;
}

.service::before,
.client-card::before,
.principle::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(49, 245, 255, 0.10), transparent 48%);
  transition: opacity 0.3s ease;
}

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

.service:nth-child(2) .service-icon svg,
.service:nth-child(2) .service-arrow {
  stroke: var(--cyan);
  color: var(--cyan);
}

.service:nth-child(3) .service-icon svg,
.service:nth-child(3) .service-arrow {
  stroke: var(--violet);
  color: var(--violet);
}

.service:nth-child(4) .service-icon svg,
.service:nth-child(4) .service-arrow {
  stroke: var(--coral);
  color: var(--coral);
}

.client-card {
  transform-style: preserve-3d;
  transition: transform 0.18s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.client-card:hover {
  border-color: rgba(49, 245, 255, 0.35);
  box-shadow: 0 28px 90px rgba(75, 124, 255, 0.13);
}

.client-card-accent {
  background:
    linear-gradient(145deg, rgba(169, 112, 255, 0.15), rgba(49, 245, 255, 0.025)),
    rgba(255, 255, 255, 0.008);
}

.client-card-accent .client-label,
.client-card-accent li::before {
  color: var(--violet);
}

.principle:nth-child(1) span { color: var(--cyan); }
.principle:nth-child(2) span { color: var(--violet); }
.principle:nth-child(3) span { color: var(--coral); }

.button {
  position: relative;
  overflow: hidden;
  border: 0;
  background: linear-gradient(110deg, var(--acid), var(--cyan));
  box-shadow: 0 10px 38px rgba(49, 245, 255, 0.14);
}

.button::after {
  content: "";
  position: absolute;
  inset: -120% auto -120% -30%;
  width: 24%;
  transform: rotate(18deg);
  background: rgba(255, 255, 255, 0.48);
  filter: blur(4px);
  transition: left 0.6s ease;
}

.button:hover::after {
  left: 120%;
}

@keyframes spectrum {
  to { background-position: 260% 0; }
}

@keyframes orbit-drift {
  to { transform: translate3d(-46px, 54px, 0) scale(1.14); }
}

@keyframes pulse-ring {
  0%, 100% { box-shadow: 0 0 0 4px rgba(157, 255, 88, 0.12); }
  50% { box-shadow: 0 0 0 10px rgba(49, 245, 255, 0), 0 0 20px rgba(49, 245, 255, 0.55); }
}

@keyframes draw-signal {
  to { stroke-dashoffset: 0; }
}

@keyframes signal-glow {
  50% { filter: drop-shadow(0 0 10px rgba(49, 245, 255, 0.85)); }
}

@media (max-width: 900px) {
  .cursor-glow { display: none; }
  .hero::before { right: -280px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero::after,
  .hero h1 em,
  .section-heading h2 em,
  .contact h2 em,
  .pulse,
  .signal-visual .line {
    animation: none;
  }

  .signal-visual .line {
    stroke-dashoffset: 0;
  }

  .cursor-glow { display: none; }
}