/* VEYNTA — Ops HUD overlay: tactical brackets, side-rails, live indicators */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500&display=swap');

:root {
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --hud-red: #ff3b47;
  --hud-red-soft: rgba(255, 59, 71, 0.55);
  --hud-line: rgba(231, 207, 163, 0.22);
  --hud-line-hi: rgba(231, 207, 163, 0.55);
}

/* ============ DEEP BLACK BASE + FAINT GRID ============ */
html, body { background: #05060b !important; }
body::after {
  background:
    linear-gradient(rgba(231,207,163,0.025) 1px, transparent 1px) 0 0 / 80px 80px,
    linear-gradient(90deg, rgba(231,207,163,0.025) 1px, transparent 1px) 0 0 / 80px 80px,
    radial-gradient(60vw 50vw at 85% 10%, rgba(231,207,163,0.05), transparent 65%),
    radial-gradient(70vw 60vw at 15% 100%, rgba(255,59,71,0.04), transparent 70%) !important;
  filter: none !important;
  opacity: 0.9;
}

/* Kill the bundled app's purple gradient leaking through sections */
html body .hero-section,
html body .services-section,
html body .why-choose-us-section,
html body .about-section,
html body .contact-section,
html body .team-section,
html body .testimonials-section,
html body .consultation-section {
  background: transparent !important;
}
html body .hero-section::after,
html body .services-section::after,
html body .about-section::after,
html body .contact-section::after {
  content: none !important;
}
/* Any large background blobs the bundle injects — fade them */
html body [style*="radial-gradient"][style*="rgb(1"],
html body [style*="radial-gradient"][style*="rgb(2"],
html body [style*="radial-gradient"][style*="rgb(3"],
html body [style*="radial-gradient"][style*="rgba(1"],
html body [style*="radial-gradient"][style*="rgba(2"],
html body [style*="radial-gradient"][style*="rgba(3"] {
  opacity: 0.15 !important;
  filter: saturate(0.3) brightness(0.5) !important;
}
html body #services-bg-root { opacity: 0.1 !important; filter: saturate(0) brightness(0.5) !important; }

/* ============ TOP HUD STRIP ============ */
.ops-hud {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 99;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 24px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(231, 207, 163, 0.55);
  background: linear-gradient(180deg, rgba(7,8,17,0.75), transparent);
  pointer-events: none;
  mix-blend-mode: normal;
}
.ops-hud .ops-seg { display: flex; align-items: center; gap: 10px; }
.ops-hud .ops-dot {
  width: 7px; height: 7px;
  background: var(--hud-red);
  border-radius: 50%;
  box-shadow: 0 0 0 0 var(--hud-red-soft);
  animation: opsPulse 1.6s cubic-bezier(0.4,0,0.2,1) infinite;
}
@keyframes opsPulse {
  0%   { box-shadow: 0 0 0 0 var(--hud-red-soft); }
  70%  { box-shadow: 0 0 0 10px rgba(255,59,71,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,59,71,0); }
}
.ops-hud .ops-sep { color: rgba(231,207,163,0.22); }
.ops-hud .ops-val { color: rgba(244,238,228,0.85); }
.ops-hud .ops-red { color: var(--hud-red); }

/* ============ RIGHT SIDE-RAIL LABELS ============ */
.ops-rail {
  position: fixed;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  z-index: 98;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: rgba(231, 207, 163, 0.45);
  display: flex;
  gap: 28px;
  pointer-events: none;
}
.ops-rail .ops-rail-sep {
  width: 1px; height: 24px;
  background: var(--hud-line);
  writing-mode: horizontal-tb;
}
.ops-rail .ops-rail-hi { color: var(--hud-red); }

/* ============ LEFT SIDE-RAIL: SECTION TICKER ============ */
.ops-ticker {
  position: fixed;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
  z-index: 98;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(231, 207, 163, 0.4);
  pointer-events: none;
}
.ops-ticker .active { color: #fff; }

/* ============ CORNER BRACKETS ON CARDS ============ */
html body .card,
html body .about-block,
html body .contact-info-block,
html body .stat-card,
html body .testimonial-card,
html body .team-card,
html body .feature-block,
html body .consultation-form-container {
  position: relative;
}
html body .card::before, html body .card::after,
html body .about-block::before, html body .about-block::after,
html body .contact-info-block::before, html body .contact-info-block::after,
html body .stat-card::before, html body .stat-card::after,
html body .testimonial-card::before, html body .testimonial-card::after,
html body .team-card::before, html body .team-card::after,
html body .feature-block::before, html body .feature-block::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border-color: var(--hud-line-hi);
  pointer-events: none;
  transition: border-color .45s ease, width .45s ease, height .45s ease;
}
html body .card::before,
html body .about-block::before,
html body .contact-info-block::before,
html body .stat-card::before,
html body .testimonial-card::before,
html body .team-card::before,
html body .feature-block::before {
  top: 8px; left: 8px;
  border-top: 1px solid var(--hud-line-hi);
  border-left: 1px solid var(--hud-line-hi);
}
html body .card::after,
html body .about-block::after,
html body .contact-info-block::after,
html body .stat-card::after,
html body .testimonial-card::after,
html body .team-card::after,
html body .feature-block::after {
  bottom: 8px; right: 8px;
  border-bottom: 1px solid var(--hud-line-hi);
  border-right: 1px solid var(--hud-line-hi);
}
html body .card:hover::before, html body .card:hover::after,
html body .about-block:hover::before, html body .about-block:hover::after,
html body .stat-card:hover::before, html body .stat-card:hover::after {
  width: 24px; height: 24px;
  border-color: var(--hud-red);
}

/* ============ OPAQUE DEEP-BLACK CARDS (kill purple bleed) ============ */
html body .card,
html body .card-front,
html body .card-back,
html body .about-block,
html body .contact-info-block,
html body .stat-card,
html body .testimonial-card,
html body .team-card,
html body .feature-block,
html body .consultation-form-container,
html body .business-hours-block {
  background: linear-gradient(180deg, #0a0c15 0%, #070811 100%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Services section bg canvas — force dark */
html body .services-section,
html body #services-bg-root,
html body .services-section > div[style*="background"] {
  background: #05060b !important;
}

/* ============ KILL NEON CARD BOTTOM GLOW ============ */
html body .card,
html body .card-front,
html body .card-back {
  border-bottom-color: var(--hud-line) !important;
  box-shadow: var(--shadow-lg) !important;
}
html body .card-container [style*="rgb(0, 255"],
html body .card-container [style*="rgb(255, 255, 0"],
html body .card-container [style*="rgb(255, 0, 255"] {
  box-shadow: 0 1px 0 var(--hud-line-hi) !important;
}

/* ============ SERVICE CARD ICON — NEUTRALIZE NEON ============ */
html body .card-icon {
  background: rgba(231,207,163,0.06) !important;
  border: 1px solid var(--hud-line) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
html body .card-icon svg { stroke: var(--accent-hi) !important; filter: drop-shadow(0 0 8px rgba(231,207,163,0.35)); }

/* ============ HERO VIEWPORT CORNER TICKS ============ */
.hero-section::before,
.hero-section::after {
  content: "";
  position: absolute;
  width: 24px; height: 24px;
  border-color: var(--hud-line-hi);
  z-index: 4;
  pointer-events: none;
}
.hero-section::before {
  top: 84px; left: 24px;
  border-top: 1px solid var(--hud-line-hi);
  border-left: 1px solid var(--hud-line-hi);
}
.hero-section::after {
  bottom: 24px; right: 24px;
  border-bottom: 1px solid var(--hud-line-hi);
  border-right: 1px solid var(--hud-line-hi);
}

/* ============ HUD COORDINATE LABEL NEAR HERO CORNERS ============ */
.hero-section .hud-coord-tl,
.hero-section .hud-coord-br {
  position: absolute;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--hud-line-hi);
  z-index: 5;
  pointer-events: none;
}
.hero-section .hud-coord-tl { top: 94px; left: 56px; }
.hero-section .hud-coord-br { bottom: 34px; right: 56px; }

/* ============ MONO DATA — STATS, NUMBERS ============ */
html body .stat-number,
html body .info-value,
html body .hero-content .hud-meta {
  font-family: var(--mono) !important;
  font-feature-settings: 'tnum','zero';
}

/* ============ HERO META ROW ============ */
.hud-meta {
  display: flex;
  gap: 24px;
  margin-top: clamp(28px, 3.5vh, 48px);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(231,207,163,0.55);
  align-items: center;
}
.hud-meta .hud-meta-k { color: rgba(244,238,228,0.4); }
.hud-meta .hud-meta-v { color: #f4eee4; }
.hud-meta .hud-meta-sep { width: 24px; height: 1px; background: var(--hud-line); }

/* ============ CONNECTOR LINES (decorative) ============ */
.hero-section .hud-connector {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  stroke: var(--hud-line);
  stroke-width: 1;
  fill: none;
  opacity: 0.6;
}

/* ============ SECTION-TAG RED TREATMENT ============ */
html body .section-tag .tag-text {
  position: relative;
  padding-left: 18px;
}
html body .section-tag .tag-text::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--hud-red);
  box-shadow: 0 0 8px var(--hud-red-soft);
}

/* ============ NAVBAR HUD SLOT ============ */
html body .glass-navbar::after {
  content: "SYS · ONLINE";
  position: absolute;
  right: -96px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.28em;
  color: var(--hud-red);
  opacity: 0;
  pointer-events: none;
}
html[data-scrolled="true"] html body .glass-navbar::after { opacity: 0.85; }

/* ============ HIDE ALL SMALL HUD TEXT (kept brackets/grid only) ============ */
.ops-hud,
.ops-rail,
.ops-ticker,
.hud-meta,
.hero-section .hud-coord-tl,
.hero-section .hud-coord-br,
html body .glass-navbar::after,
html body .section-tag .tag-text::before { display: none !important; }
html body .section-tag .tag-text { padding-left: 0 !important; }

/* ============ RESPONSIVE: HIDE HUD ON MOBILE ============ */
@media (max-width: 900px) {
  .ops-hud, .ops-rail, .ops-ticker,
  .hero-section .hud-coord-tl,
  .hero-section .hud-coord-br,
  .hero-section .hud-connector { display: none !important; }
  .hero-section::before, .hero-section::after { display: none; }
}