*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

:root {
  --bg: #050501;
  --bg2: #0a0903;
  --bg3: #111006;

  --surface: #151207;
  --surface2: #1f1a0b;

  --border: rgba(184, 255, 0, 0.18);
  --border2: rgba(184, 255, 0, 0.08);

  --yellow: #b8ff00;
  --yellow2: #8fcc00;

  --orange: #8fcc00;
  --orange2: #b8ff00;

  --green: #b6ff4d;


  --text: #fff6d6;
  --muted: #94a3b8;
  --muted2: #475569;
}

html {
  scroll-behavior: smooth;
  font-size: clamp(14px, 1.05vw, 16px)
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.65;
  overflow-x: hidden;
  cursor: default
}

/* ═══════════════════════════════════════════════
   NEW THEME v2 — reference design
═══════════════════════════════════════════════ */

/* ── Google Font: bebas-like heavy impact ── */
/* Already loaded Space Grotesk + Orbitron; we'll use Orbitron for display */

/* ── Shared utilities ── */
.lime-text {
  color: var(--yellow);
}

.sec-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 3px;
  color: var(--yellow);
  text-transform: uppercase;
  margin-bottom: 14px;
  opacity: 0.9;
}

/* ── HERO V2 ── */
.hero-v2 {
  background: #000;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 120px 0 80px;
  position: relative;
  overflow: hidden;
}

.hero-v2::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 20% 60%, rgba(184, 255, 0, 0.07) 0%, transparent 60%);
  pointer-events: none;
}

.hero-v2-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
}

.hero-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: var(--yellow);
  letter-spacing: 2px;
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero-v2-title {
  display: flex;
  flex-direction: column;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  line-height: 0.95;
  margin-bottom: 32px;
  text-transform: uppercase;
}

.hw-white {
  font-size: clamp(2.8rem, 6vw, 5.5rem);
  color: #fff;
  letter-spacing: -2px;
}

.hw-lime {
  font-size: clamp(2.8rem, 6vw, 5.5rem);
  color: var(--yellow);
  letter-spacing: -2px;
}

.hw-outline {
  font-size: clamp(2.8rem, 6vw, 5.5rem);
  color: transparent;
  -webkit-text-stroke: 2px var(--yellow);
  letter-spacing: -2px;
}

.hero-v2-sub {
  font-size: clamp(0.9rem, 1.2vw, 1.05rem);
  color: rgba(255, 255, 255, 0.65);
  max-width: 500px;
  line-height: 1.7;
  margin-bottom: 40px;
}

.hero-v2-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* Buttons */
/* Aliases for legacy support */
.btn-outline,
.btn-outline-white,
.btn-lime-outline,
.cta3-btn-outline {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 1.1rem 2.8rem !important;
  background: transparent !important;
  color: #fff !important;
  font-family: 'Orbitron', sans-serif !important;
  font-weight: 800 !important;
  font-size: 0.8rem !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
}

.btn-lime,
.btn-lime-fill,
.cta3-btn-lime {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 1.1rem 2.8rem !important;
  background: var(--yellow) !important;
  color: #000 !important;
  font-family: 'Orbitron', sans-serif !important;
  font-weight: 800 !important;
  font-size: 0.8rem !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border: 1px solid var(--yellow) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 0 20px rgba(184, 255, 0, 0.15) !important;
  cursor: pointer !important;
}

.btn-outline:hover,
.btn-outline-white:hover,
.btn-lime-outline:hover,
.cta3-btn-outline:hover {
  border-color: var(--yellow) !important;
  color: var(--yellow) !important;
  background: rgba(184, 255, 0, 0.08) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 0 15px rgba(184, 255, 0, 0.15) !important;
}

.btn-lime:hover,
.btn-lime-fill:hover,
.cta3-btn-lime:hover {
  background: transparent !important;
  color: var(--yellow) !important;
  box-shadow: 0 0 35px rgba(184, 255, 0, 0.45) !important;
  transform: translateY(-4px) !important;
}

/* Keep original legacy definitions nested if needed, but the above should rule */

/* Metric cards */
.hero-v2-right {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.metric-card {
  background: #0d0d0d;
  border: 1px solid rgba(184, 255, 0, 0.15);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: border-color 0.25s, background 0.25s;
}

.metric-card:hover {
  border-color: rgba(184, 255, 0, 0.4);
  background: #111;
}

.mc-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.mc-icon {
  font-size: 1.4rem;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(184, 255, 0, 0.08);
  border: 1px solid rgba(184, 255, 0, 0.15);
}

.mc-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: #fff;
}

.mc-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 2px;
}

.mc-pct {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.mc-pct.lime {
  color: var(--yellow);
  text-shadow: 0 0 16px rgba(184, 255, 0, 0.5);
}

.mc-pct.white {
  color: #fff;
}

/* ── TICKER ── */
.ticker-wrap {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
}

.lime-ticker {
  background: var(--yellow);
  padding: 10px 0;
}

.lime-ticker .ticker-track {
  color: #000;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 1.5px;
}

.ticker-dot {
  margin: 0 20px;
  opacity: 0.6;
}

.dark-ticker {
  background: #0a0a0a;
  border-top: 1px solid rgba(184, 255, 0, 0.08);
  border-bottom: 1px solid rgba(184, 255, 0, 0.08);
  padding: 7px 0;
}

.dark-ticker .ticker-track {
  color: rgba(255, 255, 255, 0.5);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 1.5px;
}

.td-sep {
  margin: 0 18px;
  color: var(--yellow);
}

.ticker-track {
  display: inline-flex;
  align-items: center;
  gap: 0;
  animation: tickerScroll 30s linear infinite;
}

.ticker-slow {
  animation-duration: 40s;
}

@keyframes tickerScroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* ── CLIENTS ── */
.clients-section {
  padding: 60px 0;
  background: #000;
  border-bottom: 1px solid rgba(184, 255, 0, 0.1);
}

.clients-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.35);
  text-align: center;
  margin-bottom: 36px;
  text-transform: uppercase;
}

.clients-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: center;
  align-items: center;
}

.client-logo {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.18);
  padding: 10px 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.25s ease;
  cursor: default;
}

.client-logo:hover {
  color: var(--yellow);
  border-color: rgba(184, 255, 0, 0.35);
  background: rgba(184, 255, 0, 0.04);
}

/* ── SERVICES V2 ── */
.svc2-section {
  padding: 100px 0;
  background: #050505;
}

.svc2-header {
  text-align: center;
  margin-bottom: 64px;
}

.svc2-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 14px;
  text-transform: uppercase;
}

.svc2-sub {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.5);
  max-width: 540px;
  margin: 0 auto;
  line-height: 1.7;
}

.svc2-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
}

.svc2-card {
  background: #0a0a0a;
  border: 1px solid rgba(184, 255, 0, 0.08);
  padding: 44px 36px;
  transition: border-color 0.25s, background 0.25s;
  position: relative;
  overflow: hidden;
}

.svc2-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--yellow), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.svc2-card:hover {
  border-color: rgba(184, 255, 0, 0.25);
  background: #0f0f0f;
}

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

.svc2-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  color: var(--yellow);
  letter-spacing: 2px;
  margin-bottom: 16px;
  opacity: 0.7;
}

.svc2-icon {
  font-size: 2rem;
  margin-bottom: 16px;
}

.svc2-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 14px;
  line-height: 1.3;
}

.svc2-desc {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.75;
  margin-bottom: 20px;
}

.svc2-list {
  list-style: none;
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.svc2-list li {
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}

.li-lime {
  color: var(--yellow);
  margin-right: 6px;
}

.svc2-link {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--yellow);
  text-decoration: none;
  text-transform: uppercase;
  transition: opacity 0.2s;
  display: inline-block;
}

.svc2-link:hover {
  opacity: 0.7;
}

/* ── ABOUT V2 ── */
.about2-section {
  padding: 100px 0;
  background: #000;
}

.about2-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.about2-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.6rem, 2.8vw, 2.5rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 24px;
  text-transform: uppercase;
}

.about2-desc {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.75;
  margin-bottom: 16px;
}

.about2-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid rgba(184, 255, 0, 0.12);
}

.astat-val {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--yellow);
}

.astat-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.4;
  margin-top: 4px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* About info card */
.about2-card {
  background: #0a0a0a;
  border: 1px solid rgba(184, 255, 0, 0.15);
  padding: 36px;
}

.ac-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.88rem;
}

.ac-row:first-child {
  padding-top: 0;
}

.ac-row:last-child {
  border-bottom: none;
}

.ac-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.ac-val {
  font-weight: 600;
  color: #fff;
  font-size: 0.88rem;
}

.ac-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  color: var(--yellow);
  letter-spacing: 1px;
}

/* ── PROCESS V2 ── */
.process2-section {
  padding: 100px 0;
  background: #050505;
}

.process2-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.p2-step {
  padding: 36px 28px;
  border-right: 1px solid rgba(184, 255, 0, 0.1);
  position: relative;
}

.p2-step:last-child {
  border-right: none;
}

.p2-num {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.8rem;
  font-weight: 900;
  color: rgba(184, 255, 0, 0.12);
  margin-bottom: 16px;
  line-height: 1;
}

.p2-step h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
  font-family: 'Space Grotesk', sans-serif;
}

.p2-step p {
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.7;
}

/* ── TESTIMONIALS V2 ── */
.testi2-section {
  padding: 100px 0;
  background: #000;
}

.testi2-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 0;
}

.testi2-card {
  background: #0a0a0a;
  border: 1px solid rgba(184, 255, 0, 0.08);
  padding: 36px 30px;
  transition: border-color 0.25s;
}

.testi2-card:hover {
  border-color: rgba(184, 255, 0, 0.25);
}

.t2-stars {
  color: var(--yellow);
  font-size: 1rem;
  margin-bottom: 18px;
  letter-spacing: 2px;
}

.t2-text {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.75;
  margin-bottom: 24px;
  font-style: italic;
}

.t2-name {
  font-weight: 700;
  color: #fff;
  font-size: 0.9rem;
}

.t2-role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 3px;
}

/* ── CTA V2 ── */
.cta2-section {
  padding: 80px 0;
  background: #050505;
  border-top: 1px solid rgba(184, 255, 0, 0.1);
}

.cta2-box {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 80px;
  align-items: center;
}

.cta2-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 16px;
  text-transform: uppercase;
}

.cta2-sub {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.7;
  margin-bottom: 32px;
  max-width: 440px;
}

.cta2-btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.cta2-note {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.5px;
}

.cta2-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cta2-stat {
  padding: 20px 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #0a0a0a;
}

.cta2-stat.lime-border {
  border-color: rgba(184, 255, 0, 0.3);
}

.cs-val {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
}

.cs-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 4px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ── RESPONSIVE v2 ── */
@media (max-width: 960px) {
  .hero-v2-inner {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .hero-v2-right {
    display: grid;
    /* grid-template-columns: 1fr 1fr; */
  }

  .svc2-grid {
    grid-template-columns: 1fr;
  }

  .about2-inner {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .process2-grid {
    grid-template-columns: 1fr 1fr;
  }

  .p2-step:nth-child(2) {
    border-right: none;
  }

  .testi2-grid {
    grid-template-columns: 1fr;
  }

  .cta2-box {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .hw-white,
  .hw-lime,
  .hw-outline {
    font-size: clamp(2.2rem, 7vw, 3.5rem);
  }
}

@media (max-width: 600px) {
  .hero-v2-right {
    grid-template-columns: 1fr;
  }

  .hero-v2-inner {
    padding: 0;
  }

  .client-logo {
    font-size: 0.75rem;
    padding: 8px 14px;
  }

  .about2-stats {
    grid-template-columns: 1fr 1fr;
  }

  .process2-grid {
    grid-template-columns: 1fr;
  }

  .p2-step {
    border-right: none;
    border-bottom: 1px solid rgba(184, 255, 0, 0.1);
  }

  .cta2-right {
    display: none;
  }

  .svc2-card {
    padding: 28px 20px;
  }

  .add-svc-grid {
    grid-template-columns: 1fr;
  }

  .clients2-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ═══════════════════════════════════════════════
   GRID BANNER — "ANTI WASTE / BUILD SMARTER" (Image 1 style)
═══════════════════════════════════════════════ */
.grid-banner-section {
  background: #000;
  border-top: 1px solid rgba(184, 255, 0, 0.15);
  border-bottom: 1px solid rgba(184, 255, 0, 0.15);
  overflow: hidden;
  position: relative;
}

.grid-banner-inner {
  position: relative;
  min-height: 240px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}

/* CSS grid overlay (like the image's grid lines) */
.gb-grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(184, 255, 0, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184, 255, 0, 0.08) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

.gb-text-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 50px 60px;
  position: relative;
  z-index: 2;
}

.gb-text-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  padding: 50px 60px;
  position: relative;
  z-index: 2;
}

.gb-word {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: clamp(2.5rem, 5vw, 5rem);
  color: var(--yellow);
  line-height: 0.95;
  letter-spacing: -1px;
  text-transform: uppercase;
  display: block;
}

@media (max-width: 768px) {
  .grid-banner-inner {
    flex-direction: column;
    min-height: auto;
  }

  .gb-text-left,
  .gb-text-right {
    padding: 30px;
    align-items: flex-start;
  }

  .gb-word {
    font-size: 2.2rem;
  }
}

/* ═══════════════════════════════════════════════
   CLIENTS GRID V2 — card style (Image 2 style, black & lime)
═══════════════════════════════════════════════ */
.clients2-section {
  padding: 80px 0;
  background: #000;
  border-bottom: 1px solid rgba(184, 255, 0, 0.1);
}

.clients2-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.client2-card {
  background: #0a0a0a;
  border: 1px solid rgba(184, 255, 0, 0.12);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  transition: border-color 0.25s, background 0.25s, transform 0.2s;
  cursor: default;
  position: relative;
  overflow: hidden;
}

.client2-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--yellow);
  transform: scaleX(0);
  transition: transform 0.3s ease;
  transform-origin: left;
}

.client2-card:hover {
  border-color: rgba(184, 255, 0, 0.4);
  background: #0f0f0f;
  transform: translateY(-3px);
}

.client2-card:hover::after {
  transform: scaleX(1);
}

.client2-icon {
  font-size: 1.4rem;
  opacity: 0.7;
  transition: opacity 0.25s;
}

.client2-card:hover .client2-icon {
  opacity: 1;
}

.client2-name {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  transition: color 0.25s;
}

.client2-card:hover .client2-name {
  color: var(--yellow);
}

@media (max-width: 960px) {
  .clients2-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 600px) {
  .clients2-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ═══════════════════════════════════════════════
   ADDITIONAL SERVICES (existing site services strip)
═══════════════════════════════════════════════ */
.add-svc-section {
  padding: 80px 0;
  background: #060606;
  border-top: 1px solid rgba(184, 255, 0, 0.08);
}

.add-svc-header {
  text-align: center;
  margin-bottom: 48px;
}

.add-svc-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.4rem, 2.5vw, 2.2rem);
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
}

.add-svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

.add-svc-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #0a0a0a;
  border: 1px solid rgba(184, 255, 0, 0.08);
  padding: 32px 28px;
  text-decoration: none;
  transition: border-color 0.25s, background 0.25s;
  position: relative;
  overflow: hidden;
}

.add-svc-card::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--yellow);
  transform: scaleX(0);
  transition: transform 0.3s ease;
  transform-origin: left;
}

.add-svc-card:hover {
  border-color: rgba(184, 255, 0, 0.3);
  background: #0f0f0f;
}

.add-svc-card:hover::before {
  transform: scaleX(1);
}

.as-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  color: var(--yellow);
  letter-spacing: 2px;
  opacity: 0.6;
}

.as-icon {
  font-size: 1.6rem;
}

.as-name {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
  font-size: 1rem;
}

.as-desc {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.6;
  flex: 1;
}

.as-arrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 2px;
  color: rgba(184, 255, 0, 0.6);
  font-weight: 700;
  margin-top: auto;
  transition: color 0.2s;
}

.add-svc-card:hover .as-arrow {
  color: var(--yellow);
}

.add-svc-cta-card {
  background: rgba(184, 255, 0, 0.03);
  border-color: rgba(184, 255, 0, 0.2);
  justify-content: center;
  align-items: flex-start;
}

.add-svc-cta-card .as-icon {
  font-size: 2.4rem;
  color: var(--yellow);
}

@media (max-width: 960px) {
  .add-svc-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .add-svc-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════
   CTA V3 — "STOP DOING IT MANUALLY" (Image 3 style)
═══════════════════════════════════════════════ */
.cta3-section {
  position: relative;
  background: #020202;
  padding: 140px 0;
  text-align: center;
  overflow: hidden;
  border-top: 1px solid rgba(184, 255, 0, 0.1);
}

/* CSS grid pattern like image 3 */
.cta3-grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(184, 255, 0, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184, 255, 0, 0.05) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
}

/* Radial vignette over the grid */
.cta3-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, transparent 0%, rgba(0, 0, 0, 0.85) 80%);
  pointer-events: none;
  z-index: 1;
}

.cta3-inner {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
}

.cta3-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: var(--yellow);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 32px;
  opacity: 0.85;
}

.cta3-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.9;
  margin-bottom: 40px;
}

.cta3-white {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 900;
  color: #fff;
  letter-spacing: -2px;
  text-transform: uppercase;
}

.cta3-lime {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 900;
  color: var(--yellow);
  letter-spacing: -2px;
  text-transform: uppercase;
  text-shadow: 0 0 40px rgba(184, 255, 0, 0.3);
}

.cta3-sub {
  font-size: clamp(0.9rem, 1.3vw, 1.05rem);
  color: rgba(255, 255, 255, 0.55);
  max-width: 560px;
  margin: 0 auto 48px;
  line-height: 1.75;
}

.cta3-btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.cta3-btn-lime {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 1.1rem 2.6rem;
  background: var(--yellow);
  color: #000;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800;
  font-size: 0.88rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--yellow);
  transition: all 0.25s ease;
  box-shadow: 0 0 30px rgba(184, 255, 0, 0.25);
}

.cta3-btn-lime:hover {
  background: transparent;
  color: var(--yellow);
  box-shadow: 0 0 50px rgba(184, 255, 0, 0.4);
  transform: translateY(-3px);
}

.cta3-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 1.1rem 2.6rem;
  background: transparent;
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid rgba(255, 255, 255, 0.3);
  transition: all 0.25s ease;
}

.cta3-btn-outline:hover {
  border-color: var(--yellow);
  color: var(--yellow);
  transform: translateY(-3px);
}

.cta3-note {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.25);
  letter-spacing: 1px;
}

@media (max-width: 600px) {
  .cta3-section {
    padding: 80px 0;
  }

  .cta3-white,
  .cta3-lime {
    font-size: 2.2rem;
    letter-spacing: -1px;
  }

  .cta3-btns {
    flex-direction: column;
    align-items: center;
  }

  .cta3-btn-lime,
  .cta3-btn-outline {
    width: 100%;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════
   LOGO IMAGE in card
═══════════════════════════════════════════════ */
.client-logo-img {
  max-width: 130px;
  max-height: 44px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  /* make all logos white */
  opacity: 0.7;
  transition: opacity 0.3s ease, filter 0.3s ease;
}

.client2-card:hover .client-logo-img {
  filter: brightness(0) saturate(100%) invert(92%) sepia(60%) saturate(600%) hue-rotate(40deg) brightness(110%);
  opacity: 1;
}

/* ═══════════════════════════════════════════════
   UNIFIED SERVICES GRID — 3 per row, equal height
═══════════════════════════════════════════════ */
.svc-unified-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 12px;
}

.svc-u-card {
  display: flex;
  flex-direction: column;
  background: #080808;
  border: 1px solid rgba(184, 255, 0, 0.08);
  padding: 36px 32px;
  position: relative;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow: hidden;
}

.svc-u-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--yellow);
  transform: scaleX(0);
  transition: transform 0.3s ease;
  transform-origin: left;
}

.svc-u-card:hover {
  border-color: rgba(184, 255, 0, 0.25);
  background: #0d0d0d;
  transform: translateY(-5px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(184, 255, 0, 0.05);
}

.svc-u-card:hover::after {
  transform: scaleX(1);
}

/* Equalise description + list height so cards match */
.svc-u-card .svc2-desc {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.6);
  flex: 1;
}

.svc-u-card .svc2-list {
  min-height: 80px;
}

@media (max-width: 1024px) {
  .svc-unified-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .svc-unified-grid {
    grid-template-columns: 1fr;
  }

  .svc-u-card {
    padding: 28px 20px;
  }
}

/* ═══════════════════════════════════════════════
   TRUST SIGNALS SECTION
═══════════════════════════════════════════════ */
.trust2-section {
  padding: 100px 0;
  background: #050505;
  border-top: 1px solid rgba(184, 255, 0, 0.08);
  border-bottom: 1px solid rgba(184, 255, 0, 0.08);
}

.trust2-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 16px;
}

.about2-left .trust2-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.trust2-card {
  background: #090909;
  border: 1px solid rgba(184, 255, 0, 0.07);
  padding: 36px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}

.trust2-card::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--yellow);
  transform: scaleX(0);
  transition: transform 0.3s ease;
  transform-origin: left;
}

.trust2-card:hover {
  border-color: rgba(184, 255, 0, 0.22);
  background: #0e0e0e;
  transform: translateY(-5px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(184, 255, 0, 0.05);
}

.trust2-card:hover::before {
  transform: scaleX(1);
}

.trust2-icon {
  font-size: 2rem;
  line-height: 1;
}

.trust2-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
  margin: 0;
}

.trust2-desc {
  font-size: 0.97rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.7;
  margin: 0;
  flex: 1;
}

.trust2-badge {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 1.5px;
  color: var(--yellow);
  border: 1px solid rgba(184, 255, 0, 0.25);
  padding: 4px 10px;
  text-transform: uppercase;
  width: fit-content;
  opacity: 0.8;
}

@media (max-width: 1024px) {
  .trust2-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .trust2-grid {
    grid-template-columns: 1fr;
  }

  .trust2-card {
    padding: 28px 22px;
  }
}

/* ═══════════════════════════════════════════════
   ABOUT IMAGE WRAP
═══════════════════════════════════════════════ */
.about2-img-wrap {
  margin-bottom: 24px;
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}

.trust-img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  opacity: 0.85;
  transition: opacity 0.3s ease;
}

.about2-img-wrap:hover .trust-img {
  opacity: 1;
}

/* ═══════════════════════════════════════════════
   PLATFORM PREVIEW SECTION
═══════════════════════════════════════════════ */
.platform-preview-section {
  padding: 120px 0;
  background: #000;
  border-bottom: 1px solid rgba(184, 255, 0, 0.08);
}

.pp-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.pp-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 2.8rem;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 24px;
  letter-spacing: -1px;
}

.pp-desc {
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 32px;
}

.pp-features {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pp-f-item {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9rem;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
}

.pp-f-text {
  opacity: 0.9;
}

.pp-img-frame {
  position: relative;
  border: 1px solid rgba(184, 255, 0, 0.2);
  padding: 10px;
  background: #080808;
  border-radius: 4px;
  box-shadow: 0 0 40px rgba(184, 255, 0, 0.05);
}

.pp-img {
  width: 100%;
  display: block;
  border-radius: 2px;
}

@media (max-width: 1024px) {
  .pp-inner {
    grid-template-columns: 1fr;
    gap: 48px;
    text-align: center;
  }

  .pp-features {
    align-items: center;
  }

  .pp-title {
    font-size: 2.2rem;
  }
}

/* global body text size bump for readability */
.hero-v2-sub,
.svc2-sub,
.svc2-desc,
.about2-desc,
.t2-text,
.p2-step p {
  font-size: 1rem;
  line-height: 1.75;
}

/* ── SCROLL REVEAL ANIMATIONS ── */
@keyframes slideUpFade {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal {
  opacity: 0;
  will-change: opacity, transform;
}

.reveal.visible {
  animation: slideUpFade 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.cursor {
  position: fixed;
  width: 10px;
  height: 10px;
  background: var(--yellow);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px var(--yellow), 0 0 20px rgba(184, 255, 0, 0.4);
  transition: width .15s, height .15s, background .2s
}

.cursor-ring {
  position: fixed;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(184, 255, 0, 0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  transition: width .2s, height .2s, border-color .2s
}

/* ── SCANLINES ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(184, 255, 0, 0.012) 3px, rgba(184, 255, 0, 0.012) 4px);
  pointer-events: none;
  z-index: 9998
}

/* ── GRID ── */
.grid-bg {
  position: fixed;
  inset: 0;
  background-image: linear-gradient(rgba(184, 255, 0, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(184, 255, 0, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0
}

/* ── ANIMATED HERO CANVAS ── */
#heroCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0
}

/* ── MAGNETIC ORBS (mouse-following) ── */
.mag-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 1;
  transition: transform 0.08s linear, opacity .4s
}

.mo-1 {
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(184, 255, 0, 0.18), transparent 70%);
  top: -200px;
  right: -100px
}

.mo-2 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(143, 204, 0, 0.12), transparent 70%);
  bottom: -50px;
  left: -50px
}

.mo-3 {
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(184, 255, 0, 0.1), transparent 70%);
  top: 40%;
  left: 30%
}

/* ── CORNER DECO ── */
.corner {
  position: fixed;
  width: 80px;
  height: 80px;
  pointer-events: none;
  z-index: 10
}

.corner-tl {
  top: 90px;
  left: 16px;
  border-top: 1px solid rgba(184, 255, 0, 0.3);
  border-left: 1px solid rgba(184, 255, 0, 0.3)
}

.corner-tr {
  top: 90px;
  right: 16px;
  border-top: 1px solid rgba(184, 255, 0, 0.3);
  border-right: 1px solid rgba(184, 255, 0, 0.3)
}

.corner-bl {
  bottom: 16px;
  left: 16px;
  border-bottom: 1px solid rgba(184, 255, 0, 0.3);
  border-left: 1px solid rgba(184, 255, 0, 0.3)
}

.corner-br {
  bottom: 16px;
  right: 16px;
  border-bottom: 1px solid rgba(184, 255, 0, 0.3);
  border-right: 1px solid rgba(184, 255, 0, 0.3)
}

/* ── LAYOUT ── */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 2
}

/* ── ANIMATED BUTTONS ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.8rem 1.8rem;
  border-radius: 2px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  border: none;
  outline: none;
  transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
  overflow: hidden
}

/* Shimmer sweep */
.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  transform: skewX(-20deg);
  transition: left 0.55s ease;
  pointer-events: none
}

.btn:hover::before {
  left: 150%
}

/* Ripple on click */
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  transform: scale(0);
  animation: rippleAnim 0.55s linear;
  pointer-events: none
}

@keyframes rippleAnim {
  to {
    transform: scale(4);
    opacity: 0
  }
}

.btn-primary {
  background: linear-gradient(135deg, var(--yellow2), var(--yellow));
  color: #000;
  box-shadow: 0 0 20px rgba(184, 255, 0, 0.35), 0 0 60px rgba(184, 255, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.15)
}

.btn-primary:hover {
  box-shadow: 0 0 40px rgba(184, 255, 0, 0.7), 0 0 80px rgba(184, 255, 0, 0.25);
  transform: translateY(-3px) scale(1.03)
}

.btn-primary:active {
  transform: translateY(0) scale(0.98)
}

.btn-orange {
  background: linear-gradient(135deg, #6b9900, var(--yellow));
  color: #000;
  box-shadow: 0 0 20px rgba(184, 255, 0, 0.35)
}

.btn-orange:hover {
  box-shadow: 0 0 40px rgba(184, 255, 0, 0.7), 0 0 80px rgba(184, 255, 0, 0.2);
  transform: translateY(-3px) scale(1.03)
}

.btn-orange:active {
  transform: translateY(0) scale(0.98)
}

.btn-outline {
  background: transparent;
  color: var(--yellow);
  border: 1px solid rgba(184, 255, 0, 0.4);
  box-shadow: 0 0 10px rgba(184, 255, 0, 0.06), inset 0 0 10px rgba(184, 255, 0, 0.03)
}

.btn-outline:hover {
  background: rgba(184, 255, 0, 0.08);
  border-color: var(--yellow);
  box-shadow: 0 0 30px rgba(184, 255, 0, 0.3), inset 0 0 20px rgba(184, 255, 0, 0.06);
  transform: translateY(-3px) scale(1.03)
}

.btn-outline:active {
  transform: translateY(0) scale(0.98)
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  border: 1px solid var(--border)
}

.btn-ghost:hover {
  background: rgba(184, 255, 0, 0.06);
  border-color: rgba(184, 255, 0, 0.3);
  transform: translateY(-3px) scale(1.03)
}

.btn-ghost:active {
  transform: translateY(0) scale(0.98)
}

/* Pulsing glow on primary CTA */
@keyframes pulseGlow {

  0%,
  100% {
    box-shadow: 0 0 20px rgba(184, 255, 0, 0.35), 0 0 60px rgba(184, 255, 0, 0.1)
  }

  50% {
    box-shadow: 0 0 35px rgba(184, 255, 0, 0.6), 0 0 90px rgba(184, 255, 0, 0.2)
  }
}

.btn-primary.pulse {
  animation: pulseGlow 2.5s ease-in-out infinite
}

.btn-lg {
  padding: 1rem 2.4rem;
  font-size: 0.85rem
}

.btn-sm {
  padding: 0.55rem 1.2rem;
  font-size: 0.72rem
}

/* ── HERO ── */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 120px 0 80px;
  position: relative;
  overflow: hidden
}

/* Animated gradient mesh background */
.hero-mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden
}

.mesh-gradient {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at var(--mx, 50%) var(--my, 40%), rgba(184, 255, 0, 0.15) 0%, transparent 55%), radial-gradient(ellipse at calc(100% - var(--mx, 50%)) calc(100% - var(--my, 40%)), rgba(143, 204, 0, 0.08) 0%, transparent 50%);
  transition: background 0.08s linear
}

/* Animated particles */
.particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none
}

.particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: floatParticle var(--dur, 8s) var(--delay, 0s) ease-in-out infinite alternate
}

@keyframes floatParticle {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: var(--op, 0.4)
  }

  100% {
    transform: translate(var(--tx, 20px), var(--ty, -30px)) scale(1.2);
    opacity: calc(var(--op, 0.4)*1.5)
  }
}

/* Animated ring */
.hero-ring {
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  width: 520px;
  height: 520px;
  pointer-events: none;
  z-index: 1
}

.ring-circle {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(184, 255, 0, 0.1);
  animation: spinRing var(--spd, 20s) linear infinite
}

.ring-circle:nth-child(2) {
  inset: 40px;
  border-color: rgba(143, 204, 0, 0.08);
  animation-direction: reverse;
  animation-duration: 15s
}

.ring-circle:nth-child(3) {
  inset: 80px;
  border-color: rgba(184, 255, 0, 0.12);
  animation-duration: 25s
}

.ring-circle:nth-child(4) {
  inset: 120px;
  border-color: rgba(184, 255, 0, 0.06);
  animation-direction: reverse;
  animation-duration: 35s
}

.ring-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 8px var(--yellow);
  top: -3px;
  left: 50%;
  margin-left: -3px
}

@keyframes spinRing {
  to {
    transform: rotate(360deg)
  }
}


.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 2
}

.sys-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  color: var(--yellow);
  letter-spacing: 2px;
  margin-bottom: 20px;
  opacity: 0.8;
  animation: fadeInUp 0.5s ease both
}

.sys-label::before {
  content: '// '
}

.hero h1 {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.8rem, 3vw+0.5rem, 3.2rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -1px;
  margin-bottom: 24px;
  text-transform: uppercase;
  animation: fadeInUp 0.5s 0.08s ease both
}

.hero h1 em {
  font-style: normal;
  background: linear-gradient(135deg, var(--yellow), var(--orange));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.hero-sub {
  font-size: clamp(0.875rem, 1vw+0.2rem, 1rem);
  color: var(--muted);
  max-width: 480px;
  margin-bottom: 40px;
  line-height: 1.75;
  animation: fadeInUp 0.5s 0.16s ease both
}

.hero-sub strong {
  color: var(--text);
  font-weight: 600
}

.hero-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  animation: fadeInUp 0.5s 0.24s ease both
}

.hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 52px;
  background: var(--border);
  border: 1px solid var(--border);
  animation: fadeInUp 0.5s 0.32s ease both
}

.hm {
  background: var(--bg2);
  padding: 20px;
  position: relative;
  transition: background 0.3s
}

.hm:hover {
  background: var(--surface)
}

.hm::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--yellow), transparent);
  opacity: 0;
  transition: opacity 0.3s
}

.hm:hover::before {
  opacity: 1
}

.hm-val {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--yellow);
  line-height: 1;
  text-shadow: 0 0 20px rgba(184, 255, 0, 0.4)
}

.hm-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  color: var(--muted);
  margin-top: 5px;
  letter-spacing: 0.8px
}

/* Terminal card */
.hero-visual {
  position: relative;
  animation: fadeInUp 0.6s 0.2s ease both
}

.terminal {
  background: var(--bg2);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden
}

.terminal::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--yellow), var(--orange), transparent);
  animation: scanLine 3s ease-in-out infinite
}

@keyframes scanLine {

  0%,
  100% {
    opacity: 0.4
  }

  50% {
    opacity: 1
  }
}

.term-bar {
  background: var(--bg3);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--border)
}

.term-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%
}

.term-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: var(--muted);
  margin-left: 8px;
  letter-spacing: 0.5px
}

.term-body {
  padding: 24px
}

.term-line {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  line-height: 1.8;
  display: flex;
  gap: 10px
}

.t-prompt {
  color: var(--yellow);
  flex-shrink: 0
}

.t-cmd {
  color: var(--text)
}

.t-str {
  color: var(--orange)
}

.t-comment {
  color: var(--muted);
  font-style: italic
}

.t-success {
  color: var(--green)
}

.t-cursor {
  display: inline-block;
  width: 8px;
  height: 14px;
  background: var(--yellow);
  animation: blink 1s infinite;
  vertical-align: middle
}

.eng-cards {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.eng-card {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: border-color 0.2s, background 0.2s, transform 0.2s
}

.eng-card:hover {
  border-color: rgba(184, 255, 0, 0.3);
  background: var(--surface2);
  transform: translateX(4px)
}

.eng-avatar {
  width: 36px;
  height: 36px;
  border-radius: 2px;
  object-fit: cover;
  filter: saturate(0.4) brightness(0.9);
  border: 1px solid var(--border);
  flex-shrink: 0
}

.eng-info {
  flex: 1
}

.eng-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1
}

.eng-role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  color: var(--yellow);
  margin-top: 3px
}

.eng-tags {
  display: flex;
  gap: 5px;
  margin-top: 6px;
  flex-wrap: wrap
}

.tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  background: rgba(184, 255, 0, 0.07);
  border: 1px solid rgba(184, 255, 0, 0.15);
  color: var(--muted);
  padding: 2px 7px;
  letter-spacing: 0.3px
}

.eng-avail {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  color: var(--green);
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0
}

.avail-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 5px var(--green)
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

/* ── TRUST ── */
.trust {
  padding: 44px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 1;
  background: var(--bg2)
}

.trust-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  color: var(--muted);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 28px
}

.trust-label::before {
  content: '[ '
}

.trust-label::after {
  content: ' ]'
}

.logos {
  display: flex;
  gap: 44px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap
}

.logo-item {
  font-family: 'Orbitron', sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.1);
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: color 0.3s, text-shadow 0.3s;
  cursor: default
}

.logo-item:hover {
  color: rgba(184, 255, 0, 0.45);
  text-shadow: 0 0 20px rgba(184, 255, 0, 0.3)
}

/* ── SECTION SHARED ── */
section {
  position: relative;
  z-index: 1
}

.sec-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 14px
}

.sec-eyebrow::before {
  content: '> '
}

.sec-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.5rem, 2.5vw+0.3rem, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.1;
  text-transform: uppercase;
  margin-bottom: 16px
}

.sec-sub {
  color: var(--muted);
  font-size: 0.9375rem;
  max-width: 520px;
  line-height: 1.7
}

.sec-header {
  margin-bottom: 60px
}

/* ── BANNER SECTIONS animated bg ── */
.banner-section {
  position: relative;
  overflow: hidden
}

.banner-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  transition: background 0.06s linear
}

/* ── HOW IT WORKS ── */
.how {
  padding: 100px 0
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--border)
}

.process-step {
  padding: 36px 28px;
  border-right: 1px solid var(--border);
  position: relative;
  background: var(--bg2);
  transition: background 0.3s, transform 0.3s
}

.process-step:last-child {
  border-right: none
}

.process-step:hover {
  background: var(--surface);
  transform: translateY(-4px)
}

.step-num {
  font-family: 'Orbitron', sans-serif;
  font-size: 2.5rem;
  font-weight: 900;
  color: rgba(184, 255, 0, 0.06);
  line-height: 1;
  margin-bottom: 16px;
  letter-spacing: -2px
}

.step-icon {
  font-size: 1.4rem;
  margin-bottom: 16px;
  display: block;
  filter: drop-shadow(0 0 8px rgba(184, 255, 0, 0.4));
  transition: transform 0.3s
}

.process-step:hover .step-icon {
  transform: scale(1.2) rotate(-5deg)
}

.process-step h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
  color: #fff
}

.process-step p {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.6
}

/* ── ENGINEERS ── */
.engineers {
  padding: 100px 0
}

.eng-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px
}

.engineer-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 28px;
  transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
  overflow: hidden
}

.engineer-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--yellow2), var(--yellow), var(--orange));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s
}

.engineer-card:hover {
  border-color: rgba(184, 255, 0, 0.25);
  transform: translateY(-6px);
  background: var(--surface);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(184, 255, 0, 0.06)
}

.engineer-card:hover::before {
  transform: scaleX(1)
}

.ec-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px
}

.ec-photo {
  width: 52px;
  height: 52px;
  border-radius: 2px;
  object-fit: cover;
  filter: saturate(0.5);
  border: 1px solid var(--border);
  flex-shrink: 0;
  transition: filter 0.3s
}

.engineer-card:hover .ec-photo {
  filter: saturate(0.8)
}

.ec-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff
}

.ec-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  color: var(--yellow);
  margin-top: 3px
}

.ec-rate {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: var(--orange);
  margin-top: 3px
}

.ec-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 16px
}

.skill-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  background: rgba(184, 255, 0, 0.06);
  border: 1px solid rgba(184, 255, 0, 0.18);
  color: rgba(184, 255, 0, 0.8);
  padding: 3px 8px;
  letter-spacing: 0.3px;
  transition: background 0.2s, border-color 0.2s
}

.skill-pill:hover {
  background: rgba(184, 255, 0, 0.15);
  border-color: rgba(184, 255, 0, 0.4)
}

.ec-bar {
  margin-bottom: 10px
}

.ec-bar-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px
}

.ec-bar-track {
  height: 2px;
  background: var(--border);
  position: relative;
  overflow: hidden
}

.ec-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--yellow2), var(--yellow));
  position: relative;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1)
}

.ec-bar-fill.animated {
  transform: scaleX(1)
}

.ec-bar-fill::after {
  content: '';
  position: absolute;
  right: 0;
  top: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 5px var(--yellow)
}

.ec-status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem
}

/* ── SERVICES ── */
.services {
  padding: 100px 0;
  background: linear-gradient(180deg, transparent, rgba(184, 255, 0, 0.02), transparent)
}

#services .grid-4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr)
}

.svc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border)
}

.svc-card {
  background: var(--bg2);
  padding: 40px 36px;
  position: relative;
  overflow: hidden;
  transition: background 0.3s
}

.svc-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--cx, 50%) var(--cy, 50%), rgba(184, 255, 0, 0.06), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none
}

.svc-card:hover {
  background: var(--surface)
}

.svc-card:hover::after {
  opacity: 1
}

.svc-num {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--yellow);
  letter-spacing: 2px;
  margin-bottom: 20px
}

.svc-card h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  color: #fff
}

.svc-card p {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 20px
}

.svc-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px
}

.svc-list li {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  display: flex;
  gap: 8px
}

.svc-list li::before {
  content: '→';
  color: var(--yellow);
  flex-shrink: 0
}

.svc-corner {
  position: absolute;
  bottom: 24px;
  right: 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  color: var(--muted);
  opacity: 0.4
}

/* ── CASE STUDIES ── */
.cases {
  padding: 100px 0
}

.cases-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px
}

.case-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1)
}

.case-card:hover {
  border-color: rgba(184, 255, 0, 0.25);
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(184, 255, 0, 0.06)
}

.case-img-wrap {
  position: relative;
  overflow: hidden
}

.case-img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  display: block;
  filter: saturate(0.35) brightness(0.7) hue-rotate(30deg);
  transition: filter 0.4s, transform 0.5s
}

.case-card:hover .case-img {
  filter: saturate(0.6) brightness(0.85) hue-rotate(30deg);
  transform: scale(1.06)
}

.case-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--bg2) 0%, rgba(2, 5, 9, 0.3) 50%, transparent 100%)
}

.case-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--yellow);
  background: rgba(184, 255, 0, 0.1);
  border: 1px solid rgba(184, 255, 0, 0.25);
  padding: 4px 12px
}

.case-body {
  padding: 28px
}

.case-body h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  line-height: 1.3;
  color: #fff
}

.case-body p {
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 20px
}

.case-metrics {
  display: flex;
  gap: 24px
}

.cm-val {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--yellow);
  text-shadow: 0 0 15px rgba(184, 255, 0, 0.4);
  line-height: 1
}

.cm-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  color: var(--muted);
  margin-top: 4px
}

.case-card.wide {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1.2fr 1fr
}

.case-card.wide .case-img {
  height: 100%
}

.case-card.wide .case-img-wrap {
  height: auto
}

/* ── TESTIMONIALS ── */
.testimonials {
  padding: 100px 0
}

.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px
}

.testi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 28px;
  position: relative;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s
}

.testi-card:hover {
  transform: translateY(-4px);
  border-color: rgba(184, 255, 0, 0.2);
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4)
}

.testi-card::after {
  content: '"';
  position: absolute;
  top: 16px;
  right: 20px;
  font-family: 'Orbitron', sans-serif;
  font-size: 3rem;
  color: rgba(184, 255, 0, 0.06);
  line-height: 1
}

.stars {
  color: var(--orange);
  font-size: 0.7rem;
  letter-spacing: 2px;
  margin-bottom: 14px
}

.testi-text {
  font-size: 0.875rem;
  color: rgba(208, 232, 245, 0.75);
  line-height: 1.7;
  margin-bottom: 20px
}

.testi-author {
  display: flex;
  align-items: center;
  gap: 12px
}

.testi-photo {
  width: 38px;
  height: 38px;
  border-radius: 2px;
  object-fit: cover;
  filter: saturate(0.4);
  border: 1px solid var(--border)
}

.testi-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #fff
}

.testi-role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  color: var(--muted);
  margin-top: 2px
}

/* ── PRICING ── */
.pricing {
  padding: 100px 0
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px
}

.price-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 36px 28px;
  position: relative;
  transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s
}

.price-card:hover {
  transform: translateY(-6px)
}

.price-card.featured {
  background: linear-gradient(160deg, rgba(184, 255, 0, 0.08), rgba(184, 255, 0, 0.04));
  border-color: rgba(184, 255, 0, 0.35);
  box-shadow: 0 0 40px rgba(184, 255, 0, 0.08)
}

.price-card.featured:hover {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 60px rgba(184, 255, 0, 0.15)
}

.featured-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--yellow2), var(--yellow));
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 3px 14px
}

.plan-tier {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px
}

.plan-price {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.6rem, 2vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -1px;
  color: #fff;
  line-height: 1;
  margin-bottom: 4px
}

.plan-price sub {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0;
  vertical-align: baseline
}

.plan-note {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--muted);
  margin-bottom: 24px
}

.plan-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 20px 0
}

.plan-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 28px
}

.plan-features li {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: rgba(184, 255, 0, 0.35);
  display: flex;
  align-items: flex-start;
  gap: 8px
}

.plan-features li::before {
  content: '✓';
  color: var(--yellow);
  font-weight: 700;
  flex-shrink: 0
}

/* CTA SECTION */
.cta-section {
  padding: 120px 0;
  text-align: center;
}

/* BOX */
.cta-box {
  position: relative;
  padding: 90px 60px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(135deg, #0a0f1c, #0c1b2a);
  border: 1px solid rgba(0, 180, 255, 0.2);
  box-shadow: 0 0 80px rgba(0, 180, 255, 0.08);
}

/* GLOW BACKGROUND */
.cta-glow {
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 180, 255, 0.25), transparent 70%);
  top: -100px;
  left: -100px;
  animation: moveGlow 8s linear infinite alternate;
}

@keyframes moveGlow {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(200px, 150px);
  }
}

/* GRID OVERLAY */
.cta-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* CONTENT */
.cta-content {
  position: relative;
  z-index: 2;
}

.cta-badge {
  display: inline-block;
  padding: 6px 14px;
  margin-bottom: 20px;
  font-size: 12px;
  letter-spacing: 1px;
  color: #00b4ff;
  border: 1px solid rgba(0, 180, 255, 0.4);
  border-radius: 50px;
}

/* HEADING */
.cta-box h2 {
  font-size: 44px;
  line-height: 1.3;
  margin-bottom: 20px;
}

.cta-box h2 em {
  color: #00b4ff;
  font-style: normal;
}

/* TEXT */
.cta-main {
  font-size: 18px;
  opacity: 0.9;
  margin-bottom: 10px;
}

.cta-subtext {
  font-size: 15px;
  opacity: 0.6;
  margin-bottom: 35px;
}

/* BUTTONS */
.cta-btns {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

/* GLOW BUTTON */
.glow-btn {
  position: relative;
  box-shadow: 0 0 20px rgba(0, 180, 255, 0.4);
  transition: 0.3s ease;
}

.glow-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 40px rgba(0, 180, 255, 0.7);
}

/* TRUST ROW */
.cta-trust {
  display: flex;
  justify-content: center;
  gap: 25px;
  font-size: 14px;
  opacity: 0.7;
  flex-wrap: wrap;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .cta-box {
    padding: 60px 25px;
  }

  .cta-box h2 {
    font-size: 30px;
  }
}

/* Animated bg layer for CTA */
.cta-anim-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at var(--mx, 50%) var(--my, 50%), rgba(0, 100, 255, 0.1) 0%, transparent 60%);
  transition: background 0.07s linear;
  pointer-events: none;
  z-index: 0
}

.cta-box>*:not(.cta-anim-bg) {
  position: relative;
  z-index: 1
}

.cta-box h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  margin-bottom: 16px
}

.cta-box p {
  color: var(--muted);
  font-size: 0.9375rem;
  margin-bottom: 40px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7
}

.cta-box .cta-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 20px;
  letter-spacing: 0.5px
}

.cta-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap
}

/* Floating particles in CTA */
.cta-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden
}

.cp {
  position: absolute;
  border-radius: 50%;
  animation: cpFloat var(--d, 6s) var(--dl, 0s) ease-in-out infinite alternate
}

@keyframes cpFloat {
  0% {
    transform: translate(0, 0);
    opacity: 0.3
  }

  100% {
    transform: translate(var(--tx, 10px), var(--ty, -20px));
    opacity: 0.7
  }
}

/* ── FOOTER ── */
footer {
  border-top: 1px solid var(--border);
  padding: 44px 0;
  position: relative;
  z-index: 1
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px
}

.footer-logo {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none
}

.footer-logo span {
  color: var(--blue)
}

.footer-links {
  display: flex;
  gap: 28px
}

.footer-links a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--muted);
  text-decoration: none;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: color 0.2s
}

.footer-links a:hover {
  color: var(--blue)
}

.footer-copy {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  color: rgba(61, 100, 120, 0.5);
  letter-spacing: 0.5px
}

/* ── REVEAL ── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease
}

.reveal.visible {
  opacity: 1;
  transform: none
}

.reveal-delay-1 {
  transition-delay: 0.08s
}

.reveal-delay-2 {
  transition-delay: 0.16s
}

.reveal-delay-3 {
  transition-delay: 0.24s
}

/* ── RESPONSIVE ── */
@media(max-width:960px) {

  .hero-inner,
  .case-card.wide {
    grid-template-columns: 1fr
  }

  .hero-visual {
    display: none
  }

  .process-grid {
    grid-template-columns: 1fr 1fr
  }

  .eng-grid,
  .testi-grid,
  .pricing-grid {
    grid-template-columns: 1fr
  }

  .svc-grid,
  .cases-grid {
    grid-template-columns: 1fr
  }

  .case-card.wide {
    grid-column: auto
  }

  .hero-ring {
    display: none
  }
}

@media(max-width:600px) {
  .container {
    padding: 0 20px
  }

  .nav-links,
  .nav-status {
    display: none
  }

  .hero-metrics {
    grid-template-columns: 1fr
  }

  .cta-box {
    padding: 48px 24px
  }

  .corner {
    display: none
  }
}



/* ─── SHARED ─── */
.sec-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 14px
}

.sec-eyebrow::before {
  content: '> '
}

.sec-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.5rem, 2.5vw+0.3rem, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.08;
  text-transform: uppercase;
  margin-bottom: 16px
}

.sec-sub {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.75
}

.gradient-text {
  background: linear-gradient(135deg, var(--blue), var(--orange));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

/* ─── REVEAL ANIMATIONS ─── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.75s cubic-bezier(0.23, 1, 0.32, 1), transform 0.75s cubic-bezier(0.23, 1, 0.32, 1)
}

.reveal.from-left {
  transform: translateX(-40px)
}

.reveal.from-right {
  transform: translateX(40px)
}

.reveal.scale-in {
  transform: scale(0.92) translateY(16px)
}

.reveal.visible {
  opacity: 1;
  transform: none
}

.reveal-d1 {
  transition-delay: 0.08s
}

.reveal-d2 {
  transition-delay: 0.16s
}

.reveal-d3 {
  transition-delay: 0.24s
}

.reveal-d4 {
  transition-delay: 0.32s
}

.reveal-d5 {
  transition-delay: 0.40s
}

.reveal-d6 {
  transition-delay: 0.48s
}

/* ══════════════════════════════════════
   WHO WE ARE SECTION
══════════════════════════════════════ */
.who-section {
  position: relative;
  padding: 120px 0;
  overflow: hidden;
  z-index: 1
}

/* Animated background canvas */
#whoCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55
}

/* Left accent line */
.who-section::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg,
      transparent,
      rgba(184, 255, 0, 0.4),
      transparent);
  z-index: 1;
}

.who-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  position: relative;
  z-index: 2
}

/* LEFT: identity block */
.who-left {}

/* badge */
.who-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(184, 255, 0, 0.06);
  border: 1px solid rgba(184, 255, 0, 0.22);
  padding: 8px 16px;
  margin-bottom: 28px;
}

/* animated dot */
.who-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 8px rgba(184, 255, 0, 0.45);
  animation: pulse-dot 2s ease-in-out infinite;
}

/* pulse animation (yellow glow) */
@keyframes pulse-dot {

  0%,
  100% {
    box-shadow: 0 0 6px rgba(184, 255, 0, 0.35);
  }

  50% {
    box-shadow:
      0 0 16px rgba(184, 255, 0, 0.7),
      0 0 30px rgba(184, 255, 0, 0.25);
  }
}

/* text */
.who-badge-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 2px;
  color: var(--yellow);
  text-transform: uppercase;
}

.who-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.8rem);
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -1px;
  margin-bottom: 24px
}

.who-title .line2 {
  display: block;
  font-size: 0.55rem;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 2px;
  margin-top: 6px
}

.who-desc {
  font-size: 0.9375rem;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 32px;
  max-width: 460px
}

.who-desc strong {
  color: var(--text);
  font-weight: 600
}

/* Stat row */
.who-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-bottom: 36px
}

.ws {
  background: var(--bg2);
  padding: 18px 16px;
  position: relative;
  overflow: hidden;
  transition: background 0.3s
}

.ws:hover {
  background: var(--surface)
}

.ws::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--blue), transparent);
  transform: scaleX(0);
  transition: transform 0.4s
}

.ws:hover::after {
  transform: scaleX(1)
}

.ws-val {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--blue);
  line-height: 1;
  text-shadow: 0 0 15px rgba(0, 180, 255, 0.35)
}

.ws-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  color: var(--muted);
  margin-top: 5px;
  letter-spacing: 0.5px
}

/* CTA row */
.who-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.8rem 1.8rem;
  border-radius: 2px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  border: none;
  outline: none;
  position: relative;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1)
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  transform: skewX(-20deg);
  transition: left 0.55s ease;
  pointer-events: none
}

.btn:hover::before {
  left: 150%
}

.btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  transform: scale(0);
  animation: rippleAnim 0.55s linear;
  pointer-events: none
}

@keyframes rippleAnim {
  to {
    transform: scale(4);
    opacity: 0
  }
}

.btn-primary {
  background: linear-gradient(135deg, var(--blue2), var(--blue));
  color: #fff;
  box-shadow: 0 0 20px rgba(184, 255, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15)
}

.btn-primary:hover {
  box-shadow: 0 0 40px rgba(184, 255, 0, 0.7), 0 0 80px rgba(184, 255, 0, 0.35);
  transform: translateY(-3px) scale(1.03)
}

.btn-outline {
  background: transparent;
  color: var(--blue);
  border: 1px solid rgba(184, 255, 0, 0.35) !important;
}

.btn-outline:hover {
  background: rgba(184, 255, 0, 0.08);
  border-color: var(--blue);
  box-shadow: 0 0 25px rgba(184, 255, 0, 0.25);
  transform: translateY(-3px) scale(1.03)
}

.btn-lg {
  padding: 1rem 2.2rem;
  font-size: 0.85rem
}

@keyframes pulseGlow {

  0%,
  100% {
    box-shadow: 0 0 20px rgba(184, 255, 0, 0.35)
  }

  50% {
    box-shadow: 0 0 40px rgba(184, 255, 0, 0.65), 0 0 80px rgba(184, 255, 0, 0.2)
  }
}

.pulse {
  animation: pulseGlow 2.5s ease-in-out infinite
}

/* RIGHT: visual identity card */
.who-right {
  position: relative
}

.who-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 0;
  position: relative;
  overflow: hidden
}

.who-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d4ff66, #8fcc00, transparent);
  animation: topScan 3.5s ease-in-out infinite
}

@keyframes topScan {

  0%,
  100% {
    opacity: 0.4
  }

  50% {
    opacity: 1
  }
}

.wc-header {
  background: var(--bg3);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border)
}

.wc-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--muted);
  letter-spacing: 1px
}

.wc-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  color: #a6ff4d
}

.wc-status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #a6ff4d;
  box-shadow: 0 0 6px #a6ff4d;
  animation: pulse-dot 1.5s infinite
}

.wc-body {
  padding: 28px
}

.dna-row {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.dna-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: all 0.3s;
  position: relative;
  overflow: hidden
}

.dna-item::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, #d4ff66, #8fcc00);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.35s
}

.dna-item:hover {
  border-color: rgba(184, 255, 0, 0.35);
  background: var(--surface2);
  transform: translateX(4px)
}

.dna-item:hover::after {
  transform: scaleY(1)
}

.dna-icon {
  font-size: 1.2rem;
  width: 36px;
  text-align: center;
  filter: drop-shadow(0 0 6px rgba(184, 255, 0, 0.35));
  flex-shrink: 0
}

.dna-info {
  flex: 1
}

.dna-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #fff
}

.dna-desc {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  color: var(--muted);
  margin-top: 3px
}

.dna-bar {
  width: 60px;
  height: 2px;
  background: var(--border);
  position: relative;
  flex-shrink: 0
}

.dna-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #d4ff66, #8fcc00);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s cubic-bezier(0.23, 1, 0.32, 1)
}

.dna-bar-fill.go {
  transform: scaleX(1)
}

.wc-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between
}

.wc-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  color: var(--muted);
  opacity: 0.5
}

/* Floating corner accents on card */
.card-corner {
  position: absolute;
  width: 16px;
  height: 16px;
  pointer-events: none
}

.cc-tl {
  top: 0;
  left: 0;
  border-top: 1px solid rgba(184, 255, 0, 0.4);
  border-left: 1px solid rgba(184, 255, 0, 0.4)
}

.cc-tr {
  top: 0;
  right: 0;
  border-top: 1px solid rgba(184, 255, 0, 0.4);
  border-right: 1px solid rgba(184, 255, 0, 0.4)
}

.cc-bl {
  bottom: 0;
  left: 0;
  border-bottom: 1px solid rgba(184, 255, 0, 0.4);
  border-left: 1px solid rgba(184, 255, 0, 0.4)
}

.cc-br {
  bottom: 0;
  right: 0;
  border-bottom: 1px solid rgba(184, 255, 0, 0.4);
  border-right: 1px solid rgba(184, 255, 0, 0.4)
}

/* ══════════════════════════════════════
   SERVICES SECTION
══════════════════════════════════════ */
.svc-section {
  position: relative;
  padding: 120px 0;
  overflow: hidden;
  z-index: 1
}

.svc-section::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(184, 255, 0, 0.3), transparent)
}

/* Animated orbs */
.svc-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(130px);
  pointer-events: none;
  z-index: 0
}

.svc-orb-1 {
  width: 600px;
  height: 600px;
  background: rgba(184, 255, 0, 0.08);
  top: -100px;
  right: -150px
}

.svc-orb-2 {
  width: 400px;
  height: 400px;
  background: rgba(143, 204, 0, 0.06);
  bottom: -80px;
  left: -80px
}

.svc-header {
  text-align: center;
  margin-bottom: 72px;
  position: relative;
  z-index: 2
}

.svc-header .sec-eyebrow {
  text-align: center
}

/* Divider line under title */
.svc-divider {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, #d4ff66, #8fcc00);
  margin: 20px auto 0
}

.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  position: relative;
  z-index: 2
}

.svc-grid1 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  position: relative;
  z-index: 2
}

.svc-card {
  background: var(--bg2);
  padding: 36px 30px;
  position: relative;
  overflow: hidden;
  transition: background 0.3s, transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
  cursor: default
}

/* Hover spotlight */
.svc-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--cx, 50%) var(--cy, 50%), rgba(184, 255, 0, 0.08), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none
}

.svc-card:hover::before {
  opacity: 1
}

/* Top border animation */
.svc-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #d4ff66, #8fcc00, #b8ff00);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1)
}

.svc-card:hover {
  background: var(--surface);
  transform: translateY(-5px)
}

.svc-card:hover::after {
  transform: scaleX(1)
}

/* Numbered tag */
.svc-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 2px;
  color: rgba(184, 255, 0, 0.35);
  margin-bottom: 20px
}

/* Big icon */
.svc-icon-wrap {
  position: relative;
  width: 56px;
  height: 56px;
  margin-bottom: 22px
}

.svc-icon-bg {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: rgba(184, 255, 0, 0.06);
  border: 1px solid rgba(184, 255, 0, 0.15);
  transition: background 0.3s, border-color 0.3s
}

.svc-card:hover .svc-icon-bg {
  background: rgba(184, 255, 0, 0.12);
  border-color: rgba(184, 255, 0, 0.35)
}

.svc-icon {
  position: relative;
  z-index: 1;
  font-size: 1.5rem;
  line-height: 56px;
  text-align: center;
  display: block;
  filter: drop-shadow(0 0 8px rgba(184, 255, 0, 0.3));
  transition: transform 0.35s, filter 0.35s
}

.svc-card:hover .svc-icon {
  transform: scale(1.15) rotate(-5deg);
  filter: drop-shadow(0 0 14px rgba(184, 255, 0, 0.6))
}

.svc-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #fff;
  margin-bottom: 10px;
  line-height: 1.3
}

.svc-desc {
  font-size: 0.83rem;
  color: var(--muted);
  line-height: 1.7
}

/* Arrow link on hover */
.svc-arrow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  color: #8fcc00;
  letter-spacing: 1px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s, transform 0.3s
}

.svc-card:hover .svc-arrow {
  opacity: 1;
  transform: translateY(0)
}

.svc-arrow svg {
  transition: transform 0.2s
}

.svc-card:hover .svc-arrow svg {
  transform: translateX(4px)
}

/* Bottom CTA strip */
.svc-cta-strip {
  border-top: 1px solid var(--border);
  margin-top: 48px;
  padding-top: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: gap;
  gap: 20px;
  position: relative;
  z-index: 2
}

.scs-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.6
}

.scs-text strong {
  color: var(--text);
  font-weight: 600
}

.btn-border {
  position: relative;
  display: inline-block;
  padding: 12px 28px;
  color: #fff;
  text-decoration: none;
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  overflow: hidden;
  background: transparent;
  z-index: 1;
}

/* INNER BACKGROUND */
.btn-border::before {
  content: '';
  position: absolute;
  inset: 2px;
  background: #120d02;
  z-index: -1;
}

/* ANIMATED BORDER */
.btn-border::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
      transparent,
      #b8ff00,
      #8fcc00,
      #b8ff00,
      transparent);
  background-size: 300% 300%;
  animation: borderMove 4s linear infinite;
  z-index: -2;
}

/* HOVER EFFECT */
.btn-border:hover {
  color: #b8ff00;
}



/* ══════════════════════
   TEAM SECTION
══════════════════════ */
.team-section {
  position: relative;
  padding: 120px 0;
  overflow: hidden;
  width: 100%;
  z-index: 1
}

/* Animated canvas bg */
#teamCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0
}

/* side accent lines */
.team-section::before,
.team-section::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(184, 255, 0, 0.25), transparent);
  z-index: 1
}

.team-section::before {
  left: 0
}

.team-section::after {
  right: 0
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 2
}

/* ── HEADER ── */
.team-header {
  text-align: center;
  margin-bottom: 80px
}

.sec-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #8fcc00;
  margin-bottom: 14px;
  display: block
}

.sec-eyebrow::before {
  content: '> '
}

.sec-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.6rem, 2.8vw, 2.8rem);
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1.05;
  text-transform: uppercase;
  margin-bottom: 16px
}

.gradient-text {
  background: linear-gradient(135deg, #b8ff00, #8fcc00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.sec-sub {
  color: #cbd5e1;
  font-size: .9375rem;
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.75
}

.header-line {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, #b8ff00, #8fcc00);
  margin: 20px auto 0
}

/* ── CARDS GRID ── */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  max-width: 840px;
  margin: 0 auto
}

/* ── CARD ── */
.team-card {
  position: relative;
  background: #120d02;
  border: 1px solid rgba(184, 255, 0, 0.15);
  overflow: hidden;
  transition: transform .4s cubic-bezier(.23, 1, .32, 1), border-color .3s, box-shadow .4s;
  cursor: pointer
}

.team-card:hover {
  transform: translateY(-8px);
  border-color: rgba(184, 255, 0, 0.35);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .6), 0 0 50px rgba(184, 255, 0, .08)
}

/* animated top bar */
.card-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #8fcc00, #b8ff00, #8fcc00);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.23, 1, .32, 1);
  z-index: 5
}

.team-card:hover .card-topbar {
  transform: scaleX(1)
}

/* card corner brackets */
.cc {
  position: absolute;
  width: 14px;
  height: 14px;
  z-index: 5;
  transition: width .3s, height .3s, opacity .3s;
  opacity: .4
}

.team-card:hover .cc {
  width: 20px;
  height: 20px;
  opacity: 1
}

.cc-tl {
  top: 8px;
  left: 8px;
  border-top: 1px solid #b8ff00;
  border-left: 1px solid #b8ff00
}

.cc-tr {
  top: 8px;
  right: 8px;
  border-top: 1px solid #b8ff00;
  border-right: 1px solid #b8ff00
}

.cc-bl {
  bottom: 8px;
  left: 8px;
  border-bottom: 1px solid #b8ff00;
  border-left: 1px solid #b8ff00
}

.cc-br {
  bottom: 8px;
  right: 8px;
  border-bottom: 1px solid #b8ff00;
  border-right: 1px solid #b8ff00
}

/* spotlight on hover */
.card-spotlight {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--cx, 50%) var(--cy, 50%), rgba(184, 255, 0, .07), transparent 60%);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
  z-index: 1
}

.team-card:hover .card-spotlight {
  opacity: 1
}

/* ── PHOTO AREA ── */
.card-photo-wrap {
  position: relative;
  overflow: hidden;
  height: 280px
}

.card-photo {
  /* width: 100%; */
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
  transition: filter .5s, transform .5s cubic-bezier(.23, 1, .32, 1);
  margin: 0px auto;
}

.team-card:hover .card-photo {
  filter: saturate(.85) brightness(.9);
  transform: scale(1.06)
}

.card-photo {
  /* LEFT + RIGHT fade */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%),
    linear-gradient(to top, transparent 0%, black 25%);

  mask-image:
    linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%),
    linear-gradient(to top, transparent 0%, black 25%);

  /* Combine masks */
  -webkit-mask-composite: destination-in;
  mask-composite: intersect;
}

/* photo gradient overlay */
.card-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--bg2) 0%, rgba(18, 13, 2, .5) 50%, transparent 100%)
}

/* floating id chip */
.card-id {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  font-family: 'JetBrains Mono', monospace;
  font-size: .6rem;
  letter-spacing: 1.5px;
  color: #b8ff00;
  background: rgba(184, 255, 0, .08);
  border: 1px solid rgba(184, 255, 0, .22);
  padding: 4px 10px;
  backdrop-filter: blur(6px)
}

/* status badge */
.card-status {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .6rem;
  color: #00ff9d;
  background: rgba(0, 255, 157, .07);
  border: 1px solid rgba(0, 255, 157, .18);
  padding: 4px 10px;
  backdrop-filter: blur(6px)
}

.status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #00ff9d;
  box-shadow: 0 0 6px #00ff9d;
  animation: blink 1.6s ease-in-out infinite
}

@keyframes blink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .3
  }
}

/* ── CARD BODY ── */
.card-body {
  padding: 24px 26px 26px;
  position: relative;
  z-index: 2
}

.card-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #fff;
  margin-bottom: 4px;
  transition: color .3s
}

.team-card:hover .card-name {
  color: #b8ff00;
  text-shadow: 0 0 20px rgba(184, 255, 0, .3)
}

.card-role {
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem;
  color: #8fcc00;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 14px
}

.card-bio {
  font-size: .83rem;
  color: #cbd5e1;
  line-height: 1.75;
  margin-bottom: 18px
}

/* skill tags */
.card-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px
}

.skill {
  font-family: 'JetBrains Mono', monospace;
  font-size: .6rem;
  background: rgba(184, 255, 0, .06);
  border: 1px solid rgba(184, 255, 0, .16);
  color: rgba(184, 255, 0, .8);
  padding: 3px 9px;
  letter-spacing: .3px;
  transition: background .2s, border-color .2s, transform .2s
}

.skill:hover {
  background: rgba(184, 255, 0, .15);
  border-color: rgba(184, 255, 0, .4);
  transform: translateY(-2px)
}

/* stat bar row */
.card-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px
}

.bar-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 3px
}

.bar-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .6rem;
  color: #cbd5e1
}

.bar-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: .6rem;
  color: #b8ff00
}

.bar-track {
  height: 2px;
  background: rgba(184, 255, 0, .1);
  position: relative;
  overflow: hidden
}

.bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #8fcc00, #b8ff00);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.3s cubic-bezier(.23, 1, .32, 1)
}

.bar-fill.go {
  transform: scaleX(1)
}

/* social row */
.card-social {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid rgba(184, 255, 0, .15)
}

.social-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem;
  color: #cbd5e1;
  letter-spacing: .8px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 6px 12px;
  border: 1px solid rgba(184, 255, 0, .15);
  transition: all .25s;
  background: transparent
}

.social-btn:hover {
  color: #b8ff00;
  border-color: rgba(184, 255, 0, .4);
  background: rgba(184, 255, 0, .06);
  transform: translateY(-2px)
}

.social-btn svg {
  transition: transform .2s
}

.social-btn:hover svg {
  transform: scale(1.2)
}

.card-num {
  margin-left: auto;
  font-family: 'Orbitron', monospace;
  font-size: 1.4rem;
  font-weight: 900;
  color: rgba(184, 255, 0, .06);
  line-height: 1;
  letter-spacing: -2px
}

/* ── BOTTOM STRIP ── */
.team-footer {
  margin-top: 60px;
  border-top: 1px solid rgba(184, 255, 0, .15);
  padding-top: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px
}

.tf-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  color: #cbd5e1;
  line-height: 1.7
}

.tf-text strong {
  color: #fff
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: .85rem 2rem;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  border: none;
  outline: none;
  position: relative;
  overflow: hidden;
  transition: all .35s cubic-bezier(.23, 1, .32, 1)
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent);
  transform: skewX(-20deg);
  transition: left .55s ease;
  pointer-events: none
}

.btn:hover::before {
  left: 150%
}

.btn-primary {
  background: linear-gradient(135deg, #8fcc00, #b8ff00);
  color: #000;
  box-shadow: 0 0 20px rgba(184, 255, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .15)
}

.btn-primary:hover {
  box-shadow: 0 0 40px rgba(184, 255, 0, .7);
  transform: translateY(-3px) scale(1.03)
}

@keyframes pulseGlow {

  0%,
  100% {
    box-shadow: 0 0 20px rgba(184, 255, 0, .35)
  }

  50% {
    box-shadow: 0 0 40px rgba(184, 255, 0, .65), 0 0 80px rgba(184, 255, 0, .2)
  }
}

.pulse {
  animation: pulseGlow 2.5s ease-in-out infinite
}

.btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .25);
  transform: scale(0);
  animation: rippleAnim .55s linear;
  pointer-events: none
}

@keyframes rippleAnim {
  to {
    transform: scale(4);
    opacity: 0
  }
}



@media(max-width:680px) {

  .svc-cta-strip {
    flex-direction: column !important;
  }

  .team-grid {
    grid-template-columns: 1fr
  }

  .container {
    padding: 0 20px
  }

  .card-photo-wrap {
    height: 220px
  }
}

/* KEYFRAMES */
@keyframes borderMove {
  0% {
    background-position: 0% 50%
  }

  100% {
    background-position: 300% 50%
  }
}



/* ─── RESPONSIVE ─── */
@media(max-width:960px) {
  .who-inner {
    grid-template-columns: 1fr;
    gap: 40px
  }

  .svc-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .svc-grid1 {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:600px) {
  .container {
    padding: 0 20px
  }

  .svc-grid {
    grid-template-columns: 1fr
  }

  .svc-grid1 {
    grid-template-columns: 1fr
  }

  .who-stats {
    grid-template-columns: 1fr
  }
}



/* -----------------About--------------- */



/* ══════════════════════════════════
   HERO
══════════════════════════════════ */
.about-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 72px
}

#heroCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0
}

/* magnetic orbs */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(130px);
  pointer-events: none;
  z-index: 1;
  will-change: transform
}

.o1 {
  width: 700px;
  height: 700px;
  background: rgba(184, 255, 0, 0.13);
  top: -200px;
  right: -100px
}

.o2 {
  width: 500px;
  height: 500px;
  background: rgba(255, 140, 0, 0.09);
  bottom: -100px;
  left: -80px
}

.hero-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
  position: relative;
  z-index: 2;
  padding: 80px 0
}

/* Left */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(184, 255, 0, 0.05);
  border: 1px solid rgba(184, 255, 0, 0.2);
  padding: 8px 16px;
  margin-bottom: 28px
}

.hb-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 8px var(--yellow);
  animation: bdot 2s ease-in-out infinite
}

@keyframes bdot {

  0%,
  100% {
    box-shadow: 0 0 5px var(--yellow)
  }

  50% {
    box-shadow: 0 0 18px var(--yellow), 0 0 30px rgba(184, 255, 0, 0.4)
  }
}

.hb-txt {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 2px;
  color: var(--yellow);
  text-transform: uppercase
}

.hero-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(2rem, 4vw, 4rem);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -2px;
  text-transform: uppercase;
  margin-bottom: 26px
}

.hero-desc {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.85;
  margin-bottom: 36px;
  max-width: 520px
}

.hero-desc strong {
  color: var(--text);
  font-weight: 600
}

.hero-btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 44px
}

/* breadcrumb path */
.hero-path {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  color: var(--muted);
  letter-spacing: 1px
}

.hp-sep {
  color: rgba(184, 255, 0, 0.3)
}

.hp-cur {
  color: var(--yellow)
}

/* Right: identity terminal */
.identity-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden
}

.identity-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--yellow), var(--orange), transparent);
  animation: topScan 3.5s ease-in-out infinite
}

@keyframes topScan {

  0%,
  100% {
    opacity: 0.4
  }

  50% {
    opacity: 1
  }
}

.ic-bar {
  background: var(--bg3);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--border)
}

.ic-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%
}

.ic-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: var(--muted);
  margin-left: 8px;
  letter-spacing: 0.5px
}

.ic-body {
  padding: 24px 26px
}

.profile-top {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border)
}

.profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 2px;
  border: 2px solid rgba(184, 255, 0, 0.25);
  overflow: hidden;
  flex-shrink: 0;
  position: relative
}

.avatar-inner {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--yellow2), rgba(184, 255, 0, 0.3));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Orbitron', sans-serif;
  font-size: 1.4rem;
  font-weight: 900;
  color: #fff
}

.profile-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.9rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff
}

.profile-role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  color: var(--yellow);
  margin-top: 4px
}

.profile-loc {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  color: var(--muted);
  margin-top: 3px
}

.ic-rows {
  display: flex;
  flex-direction: column;
  gap: 10px
}

.ic-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color 0.2s, background 0.2s
}

.ic-row:hover {
  border-color: rgba(184, 255, 0, 0.3);
  background: var(--surface2)
}

.ic-key {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  color: var(--muted);
  letter-spacing: 0.5px
}

.ic-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  color: var(--text);
  font-weight: 500
}

.ic-val.blue {
  color: var(--yellow)
}

.ic-val.green {
  color: #b8ff00
}

.ic-val.orange {
  color: #8fcc00
}

/* ══════════════════════════════════
   MISSION STRIP
══════════════════════════════════ */
.mission-strip {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  padding: 60px 0;
  position: relative;
  z-index: 1
}

.mission-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 30px
}

.mission-div {
  width: 1px;
  height: 100px;
  background: var(--border);
  margin: 0 auto
}

.mi-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px
}

.mi-desc {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.6
}

.mi-icon {
  font-size: 1.8rem;
  margin-bottom: 14px;
  filter: drop-shadow(0 0 8px rgba(184, 255, 0, 0.4));
  display: block;
  transition: transform 0.3s
}

/* ══════════════════════════════════
   STORY SECTION
══════════════════════════════════ */
.story-section {
  position: relative;
}

.story-section::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(184, 255, 0, 0.08), transparent);
  z-index: 0
}

.story-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;
  align-items: start;
  position: relative;
}

.story-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 2px;
  color: var(--yellow);
  margin-bottom: 20px;
  padding: 0 0 10px 0;
  border-bottom: 1px solid rgba(184, 255, 0, 0.15)
}

.story-lbl::before {
  content: '// '
}

.story-quote {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--yellow);
  padding: 28px;
  margin-bottom: 24px;
  position: relative
}

/* ══════════════════════════════════
   STATS
══════════════════════════════════ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border)
}

.stat-cell {
  background: var(--bg2);
  padding: 40px 28px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: background 0.3s
}

.stat-cell:hover {
  background: var(--surface)
}

.stat-cell::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--yellow2), var(--yellow));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s
}

.sc-num {
  font-family: 'Orbitron', sans-serif;
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--yellow);
  text-shadow: 0 0 20px rgba(184, 255, 0, 0.4);
  line-height: 1;
  margin-bottom: 8px
}







.sc-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  color: var(--muted);
  letter-spacing: 1px;
  text-transform: uppercase
}

/* ══════════════════════════════════
   VALUES
══════════════════════════════════ */
.values-section {
  padding: 110px 0;
  position: relative;
  z-index: 1;
  overflow: hidden
}

.v-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
  pointer-events: none
}

.v-orb-1 {
  width: 600px;
  height: 600px;
  background: rgba(184, 255, 0, 0.08);
  top: -200px;
  right: -100px
}

.v-orb-2 {
  width: 400px;
  height: 400px;
  background: rgba(143, 204, 0, 0.06);
  bottom: -80px;
  left: -80px
}

.values-header {
  text-align: center;
  margin-bottom: 72px;
  position: relative;
  z-index: 2
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  position: relative;
  z-index: 2
}

.v-card {
  background: var(--bg2);
  padding: 38px 32px;
  position: relative;
  overflow: hidden;
  transition: background 0.3s, transform 0.35s cubic-bezier(0.23, 1, 0.32, 1)
}

.v-card-spot {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--cx, 50%) var(--cy, 50%), rgba(184, 255, 0, 0.08), transparent 58%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none
}

.v-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #d4ff66, #8fcc00, #b8ff00);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s
}

.v-card:hover {
  background: var(--surface);
  transform: translateY(-5px)
}

.v-card:hover .v-card-spot {
  opacity: 1
}

.v-card:hover::after {
  transform: scaleX(1)
}

.v-icon-ring {
  width: 58px;
  height: 58px;
  border-radius: 2px;
  background: rgba(184, 255, 0, 0.06);
  border: 1px solid rgba(184, 255, 0, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  transition: background 0.3s, border-color 0.3s
}

.v-card:hover .v-icon-ring {
  background: rgba(184, 255, 0, 0.12);
  border-color: rgba(184, 255, 0, 0.35)
}

.v-icon {
  font-size: 1.4rem;
  filter: drop-shadow(0 0 6px rgba(184, 255, 0, 0.35));
  transition: transform 0.35s
}

.v-card:hover .v-icon {
  transform: scale(1.2) rotate(-8deg)
}

.v-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #fff;
  margin-bottom: 10px
}

.v-desc {
  font-size: 0.83rem;
  color: var(--muted);
  line-height: 1.7
}

/* ══════════════════════════════════
   TEAM
══════════════════════════════════ */
.team-section {
  padding: 110px 0;
  position: relative;
  z-index: 1;
  overflow: hidden
}

#teamCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0
}

.team-header {
  text-align: center;
  margin-bottom: 72px;
  position: relative;
  z-index: 2
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 2
}

.t-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  overflow: hidden;
  position: relative;
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.3s, box-shadow 0.4s
}

.t-card:hover {
  transform: translateY(-8px);
  border-color: rgba(184, 255, 0, 0.35);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), 0 0 50px rgba(184, 255, 0, 0.08)
}

.t-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #d4ff66, #8fcc00, #b8ff00);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: 5
}

.t-card:hover .t-topbar {
  transform: scaleX(1)
}

/* corner brackets */
.cc {
  position: absolute;
  width: 13px;
  height: 13px;
  z-index: 5;
  opacity: 0.35;
  transition: all 0.3s
}

.t-card:hover .cc {
  width: 18px;
  height: 18px;
  opacity: 1
}

.cc-tl {
  top: 8px;
  left: 8px;
  border-top: 1px solid var(--yellow);
  border-left: 1px solid var(--yellow)
}

.cc-tr {
  top: 8px;
  right: 8px;
  border-top: 1px solid var(--yellow);
  border-right: 1px solid var(--yellow)
}

.cc-bl {
  bottom: 8px;
  left: 8px;
  border-bottom: 1px solid var(--yellow);
  border-left: 1px solid var(--yellow)
}

.cc-br {
  bottom: 8px;
  right: 8px;
  border-bottom: 1px solid var(--yellow);
  border-right: 1px solid var(--yellow)
}

.t-spot {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--cx, 50%) var(--cy, 50%), rgba(184, 255, 0, 0.08), transparent 58%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: 1;
}

.t-card:hover .t-spot {
  opacity: 1
}

/* PHOTO */
.t-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  filter: saturate(0.45) brightness(0.75) sepia(0.25) hue-rotate(-10deg);
  transition: filter 0.5s, transform 0.5s cubic-bezier(0.23, 1, 0.32, 1)
}

.t-card:hover .t-photo {
  filter: saturate(0.9) brightness(0.95) sepia(0.1);
  transform: scale(1.06)
}

/* chip */
.t-chip {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 1.5px;
  color: var(--yellow);
  background: rgba(184, 255, 0, 0.08);
  border: 1px solid rgba(184, 255, 0, 0.25);
  padding: 4px 10px;
  backdrop-filter: blur(6px)
}

/* availability badge */
.t-avail {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  color: var(--yellow2);
  background: rgba(184, 255, 0, 0.07);
  border: 1px solid rgba(184, 255, 0, 0.2);
  padding: 4px 10px;
  backdrop-filter: blur(6px)
}

.av-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 6px var(--gold-glow);
  animation: blinkDot 1.6s infinite
}

/* NAME HOVER */
.t-card:hover .t-name {
  color: var(--yellow);
  text-shadow: 0 0 18px rgba(184, 255, 0, 0.35)
}

/* ROLE */
.t-role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  color: var(--orange);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 14px
}

/* SKILLS */
.t-skill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  background: rgba(184, 255, 0, 0.06);
  border: 1px solid rgba(184, 255, 0, 0.18);
  color: rgba(184, 255, 0, 0.85);
  padding: 3px 8px;
  transition: all 0.2s
}

.t-skill:hover {
  background: rgba(184, 255, 0, 0.15);
  border-color: rgba(184, 255, 0, 0.4);
  transform: translateY(-2px)
}

/* SOCIAL */
.t-soc-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  color: rgba(184, 255, 0, 0.65);
  text-decoration: none;
  padding: 5px 10px;
  border: 1px solid rgba(184, 255, 0, 0.2);
  transition: all 0.25s
}

.t-soc-btn:hover {
  color: var(--yellow);
  border-color: rgba(184, 255, 0, 0.4);
  background: rgba(184, 255, 0, 0.06);
  transform: translateY(-2px)
}

/* NUMBERS */
.t-num {
  margin-left: auto;
  font-family: 'Orbitron', monospace;
  font-size: 1.6rem;
  font-weight: 900;
  color: rgba(184, 255, 0, 0.08);
  line-height: 1
}

/* BARS */
.tb-val {
  color: var(--yellow)
}

.tb-track {
  height: 2px;
  background: rgba(184, 255, 0, 0.12)
}

.tb-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--yellow2), var(--yellow));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.3s cubic-bezier(0.23, 1, 0.32, 1)
}

/* FOOTER */
.team-footer {
  margin-top: 48px;
  border: 1px solid rgba(184, 255, 0, 0.15);
  background: var(--bg2);
  padding: 28px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  position: relative;
  z-index: 2
}

.tf-text strong {
  color: var(--yellow)
}


/* ══════════════════════════════════
   CTA BANNER
══════════════════════════════════ */

.cta-section {
  padding: 100px 0;
  text-align: center;
  position: relative;
  z-index: 1;
}

.cta-box {
  background: var(--surface);
  border: 1px solid rgba(184, 255, 0, 0.22);
  padding: 72px 60px;
  position: relative;
  overflow: hidden;
}

/* top scan line */
.cta-box::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--yellow), var(--orange), transparent);
  animation: topScan 4s ease-in-out infinite;
}

/* background glow */
.cta-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at var(--cx, 50%) var(--cy, 50%),
      rgba(184, 255, 0, 0.12),
      transparent 60%);
  transition: background 0.07s linear;
  pointer-events: none;
}

/* particles */
.cta-parts {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.cp {
  position: absolute;
  border-radius: 50%;
  animation: cpf var(--d, 6s) var(--dl, 0s) ease-in-out infinite alternate;
}

@keyframes cpf {
  0% {
    transform: translate(0, 0);
    opacity: 0.25;
  }

  100% {
    transform: translate(var(--tx, 10px), var(--ty, -20px));
    opacity: 0.7;
  }
}

/* content */
.cta-content {
  position: relative;
  z-index: 1
}

.cta-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.5rem, 2.5vw, 2.6rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  margin-bottom: 16px;
}

.cta-desc {
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 36px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.8;
}

/* buttons */
.cta-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-note {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  color: rgba(184, 255, 0, 0.65);
  margin-top: 20px;
  letter-spacing: 0.5px;
}

/* ══════════════════════════════════
   FOOTER
══════════════════════════════════ */

footer {
  border-top: 1px solid rgba(184, 255, 0, 0.15);
  padding: 44px 0;
  position: relative;
  z-index: 1;
}

.fi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

/* logo */
.fl {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
}

.fl span {
  color: var(--yellow);
}

/* links */
.flinks {
  display: flex;
  gap: 28px;
}

.flinks a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: 0.2s;
}

.flinks a:hover {
  color: var(--yellow);
  text-shadow: 0 0 10px rgba(184, 255, 0, 0.25);
}

/* copyright */
.fc {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  color: rgba(184, 255, 0, 0.55);
}

/* ── RESPONSIVE ── */
@media(max-width:960px) {

  .hero-wrap,
  .story-grid {
    grid-template-columns: 1fr;
    gap: 44px
  }

  .hero-right {
    display: none
  }

  .mission-inner {
    grid-template-columns: 1fr;
    gap: 0
  }

  .mission-div {
    height: 1px;
    width: 100%;
    background: var(--border)
  }

  .mission-item {
    padding: 28px 0
  }

  .values-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .team-grid {
    grid-template-columns: 1fr;
    max-width: 480px
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:620px) {
  .container {
    padding: 0 20px
  }

  .nav-links,
  .nav-status {
    display: none
  }

  .values-grid {
    grid-template-columns: 1fr
  }

  .stats-grid {
    grid-template-columns: 1fr
  }

  .cta-box {
    padding: 48px 24px
  }
}






















/* FOOTER */
.site-footer {
  background: #05070d;
  padding: 80px 0 40px;
  border-top: 1px solid rgba(184, 255, 0, 0.18);
}

/* GRID */
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 50px;
  margin-bottom: 50px;
}

/* LOGO */
.footer-logo {
  font-size: 22px;
  font-weight: bold;
}

.footer-logo span {
  color: var(--yellow);
}

/* DESC */
.footer-desc {
  font-size: 14px;
  opacity: 0.75;
  margin: 15px 0;
  color: rgba(255, 255, 255, 0.75);
}

/* STATUS */
.footer-status {
  font-size: 12px;
  color: var(--yellow);
  margin-top: 10px;
  text-shadow: 0 0 10px rgba(184, 255, 0, 0.25);
}

/* HEADINGS */
.footer-col h4 {
  font-size: 14px;
  margin-bottom: 15px;
  color: var(--yellow);
  letter-spacing: 0.5px;
}

/* LINKS */
.footer-col ul {
  list-style: none;
  padding: 0;
}

.footer-col ul li {
  margin-bottom: 8px;
}

.footer-col ul li a {
  font-size: 14px;
  opacity: 0.75;
  transition: 0.3s;
  color: rgba(255, 255, 255, 0.75);
}

.footer-col ul li a:hover {
  opacity: 1;
  color: var(--yellow);
  text-shadow: 0 0 8px rgba(184, 255, 0, 0.25);
}

/* CTA */
.footer-cta-text {
  font-size: 14px;
  opacity: 0.75;
  margin-bottom: 15px;
  color: rgba(255, 255, 255, 0.75);
}

.footer-email {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  opacity: 0.75;
  color: rgba(255, 255, 255, 0.75);
}

/* BOTTOM */
.footer-bottom {
  border-top: 1px solid rgba(184, 255, 0, 0.12);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.footer-copy {
  color: var(--yellow);
  font-size: 12px;
  opacity: 0.75;
}

.footer-mini span {
  margin-left: 15px;
  font-size: 12px;
  opacity: 0.7;
  color: rgba(255, 255, 255, 0.7);
}

/* HOVER EFFECT GLOW */
.footer-col ul li a:hover {
  transform: translateX(3px);
}

/* RESPONSIVE */
@media(max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  .footer-mini span {
    margin: 0 8px;
  }
}

/* ------------------Services------------------*/

/* HERO */
.services-hero {
  padding-top: 120px;
  padding-bottom: 80px;
  text-align: center;
}

.services-hero h1 {
  font-size: 3rem;
  font-family: 'Orbitron', sans-serif;
  margin-bottom: 10px;
}

.services-hero p {
  color: var(--muted);
}


.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

/* CARD BASE */
.service-card {
  position: relative;
  padding: 30px;
  background: rgba(2, 5, 9, 0.6);
  border: 1px solid var(--border);
  transition: 0.35s;
  overflow: hidden;
}

/* NUMBER */
.service-number {
  font-size: 0.7rem;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  display: block;
  margin-bottom: 10px;
}

/* ICON */
.service-icon {
  font-size: 1.8rem;
  margin-bottom: 10px;
}

/* ACTIONS */
.service-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

/* LEARN MORE */
.learn-more {
  font-size: 0.7rem;
  color: var(--muted);
  text-decoration: none;
  letter-spacing: 1px;
  transition: 0.3s;
}

.learn-more:hover {
  color: var(--blue);
}

/* =========================
   GLOW BORDER
========================= */
.service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, #d4ff66, #8fcc00, #b8ff00);
  background-size: 300% 300%;
  opacity: 0;
  z-index: -2;
  transition: 0.4s;
}

/* INNER BG */
.service-card::after {
  content: '';
  position: absolute;
  inset: 1px;
  background: #020509;
  z-index: -1;
}

/* HOVER */
.service-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 25px 50px rgba(184, 255, 0, 0.18);
}

.service-card:hover::before {
  opacity: 0.55;
  animation: aiGlow 5s linear infinite;
}

/* TEXT HOVER */
.service-card:hover h3 {
  color: var(--yellow);
  text-shadow: 0 0 10px rgba(184, 255, 0, 0.35);
}

/* =========================
   PROCESS SECTION
========================= */
.process-section {
  padding: 80px 0;
}

.process-grid1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.process-step span {
  font-family: 'JetBrains Mono', monospace;
  color: var(--yellow);
}

.process-step h4 {
  margin: 10px 0;
}

/* =========================
   CTA SECTION
========================= */
.services-cta {
  padding: 100px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* BACKGROUND GLOW */
.services-cta::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(184, 255, 0, 0.18), transparent 70%);
  transform: translate(-50%, -50%);
  z-index: -1;
}

/* CTA BOX */
.cta-box {
  position: relative;
  padding: 50px 40px;
  border: 1px solid rgba(184, 255, 0, 0.18);
  background: rgba(2, 5, 9, 0.7);
  backdrop-filter: blur(14px);
  overflow: hidden;
  transition: all .3s ease;
}

/* ANIMATED BORDER */
.cta-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
      transparent,
      #d4ff66,
      #8fcc00,
      #b8ff00,
      transparent);
  background-size: 300% 300%;
  animation: ctaGlow 5s linear infinite;
  opacity: 0.5;
  z-index: -2;
}

/* GLOW BORDER */
.service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, #d4ff66, #8fcc00, #d4ff66);
  background-size: 300% 300%;
  opacity: 0;
  z-index: -2;
  transition: 0.4s;
}

/* INNER BG */
.service-card::after {
  content: '';
  position: absolute;
  inset: 1px;
  background: #020509;
  z-index: -1;
}

/* HOVER */
.service-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 25px 50px rgba(245, 197, 66, 0.18);
}

.service-card:hover::before {
  opacity: 0.5;
  animation: aiGlow 5s linear infinite;
}

/* TEXT HOVER */
.service-card:hover h3 {
  color: #d4ff66;
}

/* PROCESS */
.process-section {
  padding: 80px 0;
}



.process-step span {
  font-family: 'JetBrains Mono', monospace;
  color: #d4ff66;
}

.process-step h4 {
  margin: 10px 0;
}

/* CTA SECTION */
.services-cta {
  padding: 100px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* BACKGROUND GLOW */
.services-cta::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(245, 197, 66, 0.18), transparent 70%);
  transform: translate(-50%, -50%);
  z-index: -1;
}

/* CTA BOX */
.cta-box {
  position: relative;
  padding: 50px 40px;
  border: 1px solid rgba(245, 197, 66, 0.25);
  background: rgba(2, 5, 9, 0.7);
  backdrop-filter: blur(14px);
  overflow: hidden;
  transition: all .3s ease;
}

/* ANIMATED BORDER */
.cta-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
      transparent,
      #d4ff66,
      #8fcc00,
      #d4ff66,
      transparent);
  background-size: 300% 300%;
  animation: ctaGlow 5s linear infinite;
  opacity: 0.4;
  z-index: -2;
}

/* INNER BG */
.cta-box::after {
  content: '';
  position: absolute;
  inset: 1px;
  background: #020509;
  z-index: -1;
}

/* TEXT */
.cta-box h2 {
  font-size: 2.2rem;
  margin-bottom: 10px;
  font-family: 'Orbitron', sans-serif;
}

.cta-box p {
  color: var(--muted);
  margin-bottom: 25px;
}

/* BUTTONS */
.cta-actions {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

/* HOVER EFFECT */
.cta-box:hover {
  box-shadow: 0 20px 50px rgba(245, 197, 66, 0.18);
}

/* ANIMATION */
@keyframes ctaGlow {
  0% {
    background-position: 0% 50%
  }

  100% {
    background-position: 300% 50%
  }
}

/* RESPONSIVE */
@media(max-width:600px) {
  .cta-box {
    padding: 30px 20px;
  }

  .cta-box h2 {
    font-size: 1.6rem;
  }
}

/* RESPONSIVE */
@media(max-width:900px) {

  .process-grid {
    grid-template-columns: 1fr;
  }

  .services-hero h1 {
    font-size: 2rem;
  }
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.value-item {
  position: relative;
  padding: 25px;
  border: 1px solid rgba(245, 197, 66, 0.2);
  background: rgba(2, 5, 9, 0.6);
  transition: 0.35s ease;
  overflow: hidden;
}

/* GLOW BORDER */
.value-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, #d4ff66, #8fcc00, #d4ff66);
  background-size: 300% 300%;
  opacity: 0;
  z-index: -2;
  transition: 0.4s;
}

/* INNER BG */
.value-item::after {
  content: '';
  position: absolute;
  inset: 1px;
  background: #020509;
  z-index: -1;
}

/* HOVER */
.value-item:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(245, 197, 66, 0.18);
}

.value-item:hover::before {
  opacity: 0.6;
  animation: aiGlow 4s linear infinite;
}

/* USE CASE GRID */
.usecase-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.usecase {
  position: relative;
  padding: 25px;
  border: 1px solid rgba(245, 197, 66, 0.18);
  border-left: 2px solid #d4ff66;
  background: rgba(2, 5, 9, 0.5);
  transition: 0.3s;
  overflow: hidden;
}

/* HOVER STRIP ANIMATION */
.usecase::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(#d4ff66, #8fcc00);
  transform: scaleY(0);
  transform-origin: top;
  transition: 0.4s;
}

.usecase:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 30px rgba(245, 197, 66, 0.12);
  border-color: rgba(245, 197, 66, 0.35);
}

.usecase:hover::before {
  transform: scaleY(1);
}

/* WHY GRID */
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.why-grid div {
  position: relative;
  padding: 20px;
  border: 1px solid rgba(245, 197, 66, 0.18);
  background: rgba(2, 5, 9, 0.6);
  transition: 0.3s;
  overflow: hidden;
}

/* SOFT GLOW */
.why-grid div::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(245, 197, 66, 0.18), transparent 70%);
  opacity: 0;
  transition: 0.3s;
}

.why-grid div:hover {
  transform: translateY(-6px);
  border-color: #d4ff66;
}

.why-grid div:hover::after {
  opacity: 1;
}

/* GLOW ANIMATION */
@keyframes aiGlow {
  0% {
    background-position: 0% 50%
  }

  100% {
    background-position: 300% 50%
  }
}

/* TEXT HOVER */
.value-item h4,
.usecase h4,
.why-grid h4 {
  transition: 0.3s;
}

.value-item:hover h4,
.usecase:hover h4,
.why-grid div:hover h4 {
  color: var(--yellow);
  text-shadow: 0 0 10px rgba(184, 255, 0, 0.45);
}

/* GLOBAL SECTION */
section {
  position: relative;
  z-index: 1;
}

/* HERO */
.case-hero {
  padding: 140px 0 100px;
  text-align: center;
  position: relative;
}

.case-hero::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(184, 255, 0, 0.12), transparent 70%);
  transform: translate(-50%, -50%);
  z-index: -1;
}

.case-hero h1 {
  font-size: 3rem;
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 2px;
}

.case-hero p {
  color: var(--muted);
  margin-top: 10px;
}

/* GRID */
.cases-grid1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.case-card {
  position: relative;
  padding: 28px;
  background: rgba(2, 5, 9, 0.65);
  border: 1px solid rgba(184, 255, 0, 0.15);
  backdrop-filter: blur(14px);
  transition: 0.4s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
}

/* GLOW BORDER */
.case-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, #d4ff66, #8fcc00, #b8ff00);
  background-size: 300% 300%;
  opacity: 0;
  z-index: -2;
  transition: 0.4s;
}

/* INNER DARK */
.case-card::after {
  content: '';
  position: absolute;
  inset: 1px;
  background: #020509;
  z-index: -1;
}

/* TAG */
.case-tag {
  font-size: 0.7rem;
  color: var(--yellow);
  margin-bottom: 12px;
  letter-spacing: 1px;
}

/* TITLE */
.case-card h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
  transition: 0.3s;
}

/* TEXT */
.case-card p {
  color: var(--muted);
  font-size: 0.9rem;
}

/* RESULTS */
.case-results {
  display: flex;
  gap: 10px;
  margin: 18px 0;
  flex-wrap: wrap;
}

.case-results span {
  font-size: 0.65rem;
  border: 1px solid rgba(184, 255, 0, 0.2);
  padding: 6px 10px;
  background: rgba(184, 255, 0, 0.05);
  color: rgba(184, 255, 0, 0.85);
}

/* HOVER */
.case-card:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: 0 35px 70px rgba(184, 255, 0, 0.15);
}

.case-card:hover::before {
  opacity: 0.6;
  animation: aiGlow 5s linear infinite;
}

.case-card:hover h3 {
  color: var(--yellow);
  text-shadow: 0 0 10px rgba(184, 255, 0, 0.5);
}

/* BREAKDOWN */
.case-breakdown {
  padding: 100px 0;
  text-align: center;
}

.breakdown-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 50px;
}

.break-card {
  position: relative;
  padding: 25px;
  background: rgba(2, 5, 9, 0.65);
  border: 1px solid rgba(184, 255, 0, 0.12);
  transition: 0.3s;
  overflow: hidden;
}

.break-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(184, 255, 0, 0.15), transparent 70%);
  opacity: 0;
  transition: 0.3s;
}

.break-card:hover {
  transform: translateY(-6px);
  border-color: var(--yellow);
}

.break-card:hover::after {
  opacity: 1;
}

/* STATS */
.case-stats {
  padding: 80px 0;
  text-align: center;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.stats-grid div {
  padding: 20px;
  border: 1px solid rgba(184, 255, 0, 0.12);
  transition: 0.3s;
}

.stats-grid div:hover {
  transform: translateY(-5px);
  border-color: var(--yellow);
}

.stats-grid h3 {
  font-size: 2.2rem;
  color: var(--yellow);
  text-shadow: 0 0 12px rgba(184, 255, 0, 0.5);
}

/* PROCESS */
.case-process {
  padding: 100px 0;
  text-align: center;
}

.process-grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 40px;
}

.process-grid3 div {
  padding: 25px;
  border: 1px solid rgba(184, 255, 0, 0.12);
  background: rgba(2, 5, 9, 0.6);
  transition: 0.3s;
}

.process-grid3 div:hover {
  transform: translateY(-6px);
  border-color: var(--yellow);
}

/* GLOW ANIMATION */
@keyframes aiGlow {
  0% {
    background-position: 0% 50%
  }

  100% {
    background-position: 300% 50%
  }
}

/* =======================
   TESTIMONIAL
======================= */

.case-testimonial {
  padding: 100px 0;
  text-align: center;
}

.case-testimonial blockquote {
  font-size: 1.6rem;
  font-weight: 500;
  max-width: 700px;
  margin: auto;
  line-height: 1.5;
  color: #fff;
}

.case-testimonial span {
  display: block;
  margin-top: 15px;
  color: var(--muted);
}

/* CTA ENHANCEMENT */
.services-cta {
  padding: 120px 0;
}

/* ANIMATION */
@keyframes aiGlow {
  0% {
    background-position: 0%
  }

  100% {
    background-position: 300%
  }
}

/* =======================
   RESPONSIVE
======================= */

@media(max-width:900px) {
  .cases-grid1 {
    grid-template-columns: 1fr;
  }

  .breakdown-grid,
  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .process-grid {
    grid-template-columns: 1fr;
  }
}

@media(max-width:500px) {
  .process-grid1 {
    grid-template-columns: repeat(1, 1fr);
  }

  .breakdown-grid,
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .case-hero h1 {
    font-size: 2rem;
  }
}

/* =======================
   CONTACT GLOBAL
======================= */

.contact-why,
.contact-services,
.contact-process {
  padding: 80px 0;
  text-align: center;
}

.contact-title {
  font-size: 34px;
  color: #fff;
  margin-bottom: 40px;
}

/* GRID */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* CARDS */
.contact-card,
.contact-step {
  background: rgba(184, 255, 0, 0.04);
  padding: 25px;
  border-radius: 12px;
  border: 1px solid rgba(184, 255, 0, 0.12);
  transition: 0.3s;
}

.contact-card:hover,
.contact-step:hover {
  transform: translateY(-5px);
  border-color: rgba(184, 255, 0, 0.4);
  box-shadow: 0 15px 35px rgba(184, 255, 0, 0.08);
}

.contact-card h3,
.contact-step h3 {
  color: #d4ff66;
  margin-bottom: 10px;
}

.contact-card p,
.contact-step p {
  color: #aaa;
  font-size: 14px;
  line-height: 1.6;
}

/* CTA */
.contact-cta {
  background: radial-gradient(circle at center, #0b1220, #05070c);
  padding: 90px 0;
  text-align: center;
}

.contact-cta-box {
  background: rgba(184, 255, 0, 0.04);
  padding: 50px;
  border-radius: 16px;
  border: 1px solid rgba(184, 255, 0, 0.2);
  box-shadow: 0 0 40px rgba(184, 255, 0, 0.05);
}

.contact-cta-box h2 {
  margin-bottom: 15px;
  color: #fff;
}

.contact-cta-box p {
  color: #aaa;
  margin-bottom: 25px;
}

/* BUTTON */
.contact-btn {
  display: inline-block;
  padding: 12px 22px;
  background: #d4ff66;
  color: #000;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s;
}

.contact-btn:hover {
  background: #8fcc00;
  box-shadow: 0 0 20px rgba(184, 255, 0, 0.25);
}

/* WRAPPER */
.contact-section {
  background: #05070c;
  padding: 100px 0;
  color: #fff;
}

.contact-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 60px;
  align-items: start;
}

/* INFO BLOCK */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.contact-title {
  font-size: 34px;
  color: #fff;
}

.contact-subtitle {
  color: #aaa;
  line-height: 1.6;
  margin-bottom: 20px;
}

/* =========================
   GLOBAL YELLOW THEME SHIFT
========================= */
:root {
  --yellow: #b8ff00;
  --yellow2: #d4ff66;
  --orange: #8fcc00;
}

/* =========================
   SERVICES / CTA BUTTONS
========================= */

.btn-primary {
  background: linear-gradient(135deg, var(--yellow2), var(--yellow));
  color: #000;
  box-shadow: 0 0 20px rgba(184, 255, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.btn-primary:hover {
  box-shadow: 0 0 40px rgba(184, 255, 0, 0.6),
    0 0 80px rgba(255, 180, 0, 0.35);
}

.btn-outline {
  color: var(--yellow);
  border: 1px solid rgba(184, 255, 0, 0.35) !important;
}

.btn-outline:hover {
  background: rgba(184, 255, 0, 0.08);
  border-color: var(--yellow);
  box-shadow: 0 0 25px rgba(184, 255, 0, 0.25);
}

/* =========================
   WHO / BADGE / STATUS
========================= */

.who-badge {
  background: rgba(184, 255, 0, 0.06);
  border: 1px solid rgba(184, 255, 0, 0.18);
}

.who-badge-dot {
  background: var(--yellow);
  box-shadow: 0 0 8px var(--yellow);
}

.who-badge-text {
  color: var(--yellow);
}

/* =========================
   SERVICE CARDS
========================= */

.svc-card:hover {
  border-color: rgba(184, 255, 0, 0.35);
}

.svc-card::after {
  background: linear-gradient(90deg, var(--yellow2), var(--yellow), var(--orange));
}

.svc-card:hover::after {
  transform: scaleX(1);
}

.svc-num {
  color: rgba(184, 255, 0, 0.45);
}

/* =========================
   ICONS
========================= */

.svc-icon-bg {
  background: rgba(184, 255, 0, 0.06);
  border: 1px solid rgba(184, 255, 0, 0.15);
}

.svc-card:hover .svc-icon-bg {
  background: rgba(184, 255, 0, 0.12);
  border-color: rgba(184, 255, 0, 0.35);
}

.svc-icon {
  filter: drop-shadow(0 0 8px rgba(184, 255, 0, 0.35));
}

/* =========================
   CASE STUDIES
========================= */

.case-card {
  border: 1px solid rgba(184, 255, 0, 0.15);
}

.case-card::before {
  background: linear-gradient(120deg, #d4ff66, #8fcc00, #b8ff00);
}

.case-card:hover {
  box-shadow: 0 35px 70px rgba(184, 255, 0, 0.15);
}

.case-tag {
  color: var(--yellow);
}

/* =========================
   TESTIMONIAL / STATS
========================= */

.cm-val {
  color: var(--yellow);
  text-shadow: 0 0 15px rgba(184, 255, 0, 0.4);
}

/* =========================
   VALUE / USECASE / WHY
========================= */

.value-item:hover,
.usecase:hover,
.why-grid div:hover {
  border-color: var(--yellow);
}

.value-item:hover h4,
.usecase:hover h4,
.why-grid div:hover h4 {
  color: var(--yellow);
  text-shadow: 0 0 10px rgba(184, 255, 0, 0.6);
}

/* =========================
   CTA BOX
========================= */

.cta-box {
  border: 1px solid rgba(184, 255, 0, 0.2);
}

.cta-box::before {
  background: linear-gradient(120deg,
      transparent,
      #d4ff66,
      #8fcc00,
      #b8ff00,
      transparent);
}

/* =========================
   CONTACT
========================= */

.contact-card:hover,
.contact-step:hover {
  border-color: rgba(184, 255, 0, 0.3);
}

.contact-card h3,
.contact-step h3 {
  color: var(--yellow);
}

.contact-icon,
.contact-text h3 {
  color: var(--yellow);
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--yellow);
  box-shadow: 0 0 10px rgba(184, 255, 0, 0.25);
}

.contact-btn {
  background: var(--yellow);
  color: #000;
}

.contact-btn:hover {
  background: #e6b800;
}

.icf-tag {
  font-size: 10px;
  margin: 0px 20px;
}

/* ==============================================================
   ABOUT PAGE / SERVICES PAGE MISSING STRUCTURE
============================================================== */
.story-para {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--muted);
  margin-bottom: 20px
}

.story-quote {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--yellow);
  padding: 28px;
  margin-bottom: 24px;
  position: relative
}

.sq-text {
  font-size: 1.15rem;
  color: #fff;
  font-style: italic;
  line-height: 1.7;
  margin-bottom: 12px
}

.sq-author {
  color: var(--yellow);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem
}

.milestones {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-top: 20px
}

.ms-item {
  display: flex;
  align-items: flex-start;
  gap: 24px
}

.ms-year {
  font-family: 'Orbitron', sans-serif;
  color: var(--yellow);
  font-weight: 700;
  font-size: 0.9rem;
  width: 45px;
  flex-shrink: 0;
  margin-top: 2px
}

.ms-bar {
  position: relative;
  width: 2px;
  min-height: 50px;
  height: 100%;
  background: var(--border)
}

.ms-bar::before {
  content: '';
  position: absolute;
  top: 6px;
  left: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 8px rgba(184, 255, 0, 0.4)
}

.ms-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 6px
}

.ms-desc {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.5
}

@media(max-width:500px) {
  .services-grid {
    grid-template-columns: repeat(1, 1fr) !important;
  }

  .value-grid {
    grid-template-columns: repeat(1, 1fr) !important;
  }

  .why-grid {
    grid-template-columns: repeat(1, 1fr) !important;
  }

  .process-grid3 {
    grid-template-columns: repeat(1, 1fr) !important;
  }

  .contact-grid {
    grid-template-columns: repeat(1, 1fr);
  }

  .contact-wrapper {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* ── ENTRY ANIMATIONS ON PAGE LOAD ── */
@keyframes slideDownFade {
  from { opacity: 0; transform: translateY(-30px); }
  to { opacity: 1; transform: translateY(0); }
}

nav {
  opacity: 0;
  animation: slideDownFade 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.hero-eyebrow {
  opacity: 0;
  animation: slideUpFade 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards 0.1s;
}

.hero-v2-title {
  opacity: 0;
  animation: slideUpFade 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards 0.2s;
}

.hero-v2-sub {
  opacity: 0;
  animation: slideUpFade 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards 0.3s;
}

.hero-v2-cta, .hero-v2-btns {
  opacity: 0;
  animation: slideUpFade 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards 0.4s;
}

.hero-v2-right {
  opacity: 0;
  animation: slideUpFade 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards 0.5s;
}