/* ============================================================
   CONNECTIVITY DESIGN SYSTEM — v1.0
   CSS + inline-SVG graphic components for a broadband/ISP theme.
   No raster images. Loaded after style.css so it can extend it.
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   REUSABLE: technical grid background
   ──────────────────────────────────────────────────────────── */
.tech-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  z-index: 0;
}
.tech-grid.tech-grid-dark {
  background-image:
    linear-gradient(rgba(15,27,61,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,27,61,0.05) 1px, transparent 1px);
}
.tech-grid.tech-grid-fade {
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 90%);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 90%);
}

/* ────────────────────────────────────────────────────────────
   REUSABLE: ambient glows
   ──────────────────────────────────────────────────────────── */
.ambient-glow { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0; }
.ambient-glow-orange { background: radial-gradient(circle, rgba(255,106,0,0.32) 0%, transparent 72%); animation: ambientDrift 14s ease-in-out infinite; }
.ambient-glow-blue   { background: radial-gradient(circle, rgba(59,130,246,0.24) 0%, transparent 72%); animation: ambientDrift 18s ease-in-out infinite reverse; }
@keyframes ambientDrift {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(14px,-10px) scale(1.06); }
}

/* ────────────────────────────────────────────────────────────
   REUSABLE: signal pulse indicator (live/online style dot)
   ──────────────────────────────────────────────────────────── */
.signal-pulse { position: relative; display: inline-flex; width: 10px; height: 10px; }
.signal-pulse::before,
.signal-pulse::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--red);
}
.signal-pulse::before { animation: signalPulseRing 2.2s ease-out infinite; }
.signal-pulse::after { }
@keyframes signalPulseRing {
  0%   { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(2.8); opacity: 0; }
}

/* ────────────────────────────────────────────────────────────
   HERO — connectivity graphic
   ──────────────────────────────────────────────────────────── */
.hero-connectivity {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
}
.hero-connectivity .ambient-glow-orange { width: 320px; height: 320px; bottom: 0; left: 10%; }
.hero-connectivity .ambient-glow-blue   { width: 260px; height: 260px; top: 6%; right: 4%; }
.hero-connectivity svg { position: relative; z-index: 1; width: 100%; height: 100%; overflow: visible; }

.hc-arc { fill: none; stroke-width: 3; stroke-linecap: round; transform-box: fill-box; transform-origin: center; }
.hc-arc-1 { stroke: var(--red-light); animation: hcArcPulse 3.2s ease-out infinite; }
.hc-arc-2 { stroke: var(--blue-soft); animation: hcArcPulse 3.2s 0.55s ease-out infinite; }
.hc-arc-3 { stroke: rgba(255,255,255,0.6); animation: hcArcPulse 3.2s 1.1s ease-out infinite; }
@keyframes hcArcPulse {
  0%   { opacity: 0;   transform: scale(0.85); }
  15%  { opacity: 0.9; }
  70%  { opacity: 0.25; }
  100% { opacity: 0;   transform: scale(1.08); }
}

.hc-node-dot { fill: var(--red-light); }
.hc-node-dot.hc-node-blue { fill: var(--blue-soft); }
.hc-node-glow { fill: var(--red-light); opacity: 0.18; }
.hc-node-glow.hc-node-blue { fill: var(--blue-soft); }
.hc-node { animation: hcNodeBlink 3.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.hc-node:nth-of-type(2n) { animation-delay: 0.6s; }
.hc-node:nth-of-type(3n) { animation-delay: 1.2s; }
.hc-node:nth-of-type(4n) { animation-delay: 1.8s; }
@keyframes hcNodeBlink {
  0%,100% { opacity: 0.55; transform: scale(1); }
  50%     { opacity: 1;    transform: scale(1.25); }
}
.hc-link { stroke: rgba(255,255,255,0.16); stroke-width: 1; fill: none; }

.hc-tower { stroke: url(#hcTowerGradient); stroke-width: 3; fill: none; stroke-linecap: round; }
.hc-tower-rung { stroke-width: 2.5; }
.hc-tower-cross { stroke: rgba(255,255,255,0.14); stroke-width: 1.4; }
.hc-dish { fill: url(#hcDishGradient); stroke: rgba(255,255,255,0.4); stroke-width: 1; }
.hc-tower-beacon-glow { fill: var(--red); opacity: 0.35; filter: blur(4px); animation: hcBeacon 2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.hc-tower-beacon { fill: var(--red-light); animation: hcBeacon 2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes hcBeacon {
  0%,100% { opacity: 0.65; transform: scale(1); }
  50%     { opacity: 1; transform: scale(1.15); filter: drop-shadow(0 0 8px rgba(255,106,0,0.9)); }
}

.hc-coverage-ring { fill: none; stroke: rgba(255,255,255,0.10); stroke-width: 1; stroke-dasharray: 3 7; }

.hc-cable { fill: none; stroke: rgba(255,255,255,0.22); stroke-width: 3; stroke-linecap: round; }
.hc-cable-soft { fill: none; stroke: var(--red); stroke-width: 8; stroke-linecap: round; opacity: 0.08; filter: blur(2px); }
.hc-cable-glow { fill: none; stroke: url(#hcCableGradient); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 50 400; animation: hcCableFlow 3.5s linear infinite; }
@keyframes hcCableFlow {
  0%   { stroke-dashoffset: 440; }
  100% { stroke-dashoffset: 0; }
}

.hc-particle { fill: var(--red-light); animation: hcParticleFloat 5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.hc-particle.hc-particle-blue { fill: var(--blue-soft); }
.hc-particle:nth-of-type(2n) { animation-delay: -1.5s; }
.hc-particle:nth-of-type(3n) { animation-delay: -3s; }
@keyframes hcParticleFloat {
  0%,100% { opacity: 0.25; transform: translateY(0); }
  50%     { opacity: 0.95; transform: translateY(-10px); }
}

@media (max-width: 991.98px) {
  .hero-connectivity { max-width: 400px; }
}

/* Background variant — sits behind the admin-uploaded hero image */
.hero-connectivity-bg {
  position: absolute;
  inset: -6% -10% -4% -10%;
  z-index: 0;
  pointer-events: none;
}
.hero-connectivity-bg .ambient-glow-orange { width: 340px; height: 340px; bottom: 6%; left: 8%; }
.hero-connectivity-bg .ambient-glow-blue   { width: 280px; height: 280px; top: 8%; right: 4%; }
.hero-connectivity-bg svg { position: relative; z-index: 1; width: 100%; height: 100%; }

.hc-ping { fill: none; stroke-width: 2.5; stroke: var(--red-light); transform-box: fill-box; transform-origin: center; }
.hc-ping-1 { animation: hcPing 3s ease-out infinite; }
.hc-ping-2 { stroke: var(--blue-soft); animation: hcPing 3s 1s ease-out infinite; }
.hc-ping-3 { stroke: rgba(255,255,255,0.7); animation: hcPing 3s 2s ease-out infinite; }
@keyframes hcPing {
  0%   { opacity: 0;   transform: scale(0.5); }
  20%  { opacity: 0.9; }
  100% { opacity: 0;   transform: scale(2.6); }
}

/* ────────────────────────────────────────────────────────────
   COMPACT NETWORK ACCENT — reusable antenna + fiber corner graphic
   ──────────────────────────────────────────────────────────── */
.network-accent {
  position: absolute;
  width: 320px;
  height: 260px;
  pointer-events: none;
  opacity: 0.5;
  overflow: visible;
}
.na-tower { stroke: rgba(255,255,255,0.35); stroke-width: 2; fill: none; stroke-linecap: round; }
.na-beacon { fill: var(--red-light); animation: hcBeacon 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.na-arc { fill: none; stroke-width: 2; stroke-linecap: round; transform-box: fill-box; transform-origin: center; }
.na-arc-1 { stroke: var(--red-light); animation: hcArcPulse 3.4s ease-out infinite; }
.na-arc-2 { stroke: var(--blue-soft); animation: hcArcPulse 3.4s 0.6s ease-out infinite; }
.na-cable { fill: none; stroke: rgba(255,255,255,0.16); stroke-width: 2; stroke-linecap: round; }
.na-cable-glow { fill: none; stroke: var(--red-light); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 24 260; opacity: 0.75; animation: hcCableFlow 4s linear infinite; }
.na-node { fill: var(--red-light); animation: hcNodeBlink 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.na-node-blue { fill: var(--blue-soft); animation-delay: 0.8s; }

/* Light-background variant (Trusted Partners, Testimonials) */
.network-accent.na-on-light .na-tower { stroke: rgba(15,27,61,0.18); }
.network-accent.na-on-light .na-cable { stroke: rgba(15,27,61,0.14); }

.about-img-col { position: relative; }
.about-exp-badge { z-index: 2; }

/* ────────────────────────────────────────────────────────────
   TRUSTED PARTNERS — subtle dotted network backdrop
   ──────────────────────────────────────────────────────────── */
.trusted-network-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(15,27,61,0.14) 1.4px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%);
}
#partners { position: relative; overflow: hidden; }
#partners .container { position: relative; z-index: 1; }

/* ────────────────────────────────────────────────────────────
   SVG FEATURE / SERVICE ICONS
   ──────────────────────────────────────────────────────────── */
.svg-icon { width: 28px; height: 28px; display: block; }
.svg-icon path, .svg-icon circle, .svg-icon line, .svg-icon polyline {
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.svg-icon .fill { fill: currentColor; stroke: none; }

/* Why-Us icon frame — replaces bootstrap-icon font glyph */
.why-icon.svg-icon-frame { color: inherit; }
.why-icon.svg-icon-frame .svg-icon { width: 26px; height: 26px; }

/* Service icon panel — replaces stock/uploaded thumbnail */
.svc-icon-panel {
  position: relative;
  width: 100%;
  padding-top: 56%;
  overflow: hidden;
  background: linear-gradient(150deg, var(--dark) 0%, var(--dark-mid) 100%);
}
.svc-icon-panel .tech-grid { opacity: 0.5; }
.svc-icon-panel .ambient-glow-orange { width: 160px; height: 160px; bottom: -20%; left: 10%; }
.svc-icon-panel-icon {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
}
.svc-icon-panel-icon .svg-icon { width: 46px; height: 46px; color: var(--red-light); }

/* ────────────────────────────────────────────────────────────
   WHY CHOOSE US — technical grid layer already exists via
   .why-us-bg-gfx; add faint scanning line for extra texture
   ──────────────────────────────────────────────────────────── */
.why-card-enhanced { position: relative; }
.why-card-enhanced::after {
  content: '';
  position: absolute; left: 1.75rem; right: 1.75rem; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,106,0,0.35), transparent);
  opacity: 0; transition: opacity 0.4s;
}
.why-card-enhanced:hover::after { opacity: 1; }

/* ────────────────────────────────────────────────────────────
   TESTIMONIALS — curved signal line accent
   ──────────────────────────────────────────────────────────── */
#testimonials { position: relative; overflow: hidden; }
#testimonials .container,
#testimonials .testi-track-wrap { position: relative; z-index: 1; }
.testi-signal-line {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}
.testi-signal-line path {
  fill: none;
  stroke: rgba(255,106,0,0.18);
  stroke-width: 1.5;
  stroke-dasharray: 8 10;
}
.testi-quote-mark {
  position: absolute; top: 1.1rem; right: 1.35rem;
  width: 30px; height: 30px; opacity: 0.14; color: var(--red);
  pointer-events: none;
}

/* ────────────────────────────────────────────────────────────
   CONTACT — subtle network backdrop
   ──────────────────────────────────────────────────────────── */
#contact { position: relative; overflow: hidden; }
.contact-network-bg {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.5;
  z-index: 0;
}
#contact .container { position: relative; z-index: 1; }
.contact-info-dark .tech-grid { opacity: 0.4; }
.contact-info-dark .ci-fiber-accent {
  position: absolute; bottom: 0; left: 0; width: 100%; height: 90px;
  pointer-events: none; opacity: 0.7; z-index: 0;
}
.contact-info-dark > h3,
.contact-info-dark > p,
.contact-info-dark > .contact-info-item,
.contact-info-dark > .social-row {
  position: relative;
  z-index: 1;
}

/* ────────────────────────────────────────────────────────────
   FOOTER — fiber line + connectivity nodes
   ──────────────────────────────────────────────────────────── */
.footer-fiber-line { position: absolute; top: 46%; left: 0; width: 100%; height: 60px; pointer-events: none; z-index: 1; opacity: 0.8; }
.footer-fiber-line path { fill: none; stroke: rgba(255,106,0,0.14); stroke-width: 1.5; }
.footer-fiber-line path.ffl-pulse { stroke: var(--red-light); stroke-width: 2; }

/* Shared "traveling light" animation for any fiber-style path */
.ffl-pulse { animation: hcCableFlow 6s linear infinite; opacity: 0.7; }

.footer-node-dot {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: var(--red-light); z-index: 1; pointer-events: none;
  box-shadow: 0 0 8px rgba(255,145,66,0.7);
  animation: hcNodeBlink 3.4s ease-in-out infinite;
}

/* ────────────────────────────────────────────────────────────
   MOTION PREFERENCES
   ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  /* Site-wide: stop every decorative keyframe loop (hero float, glows, signal
     arcs, node blinks, fiber pulses, carousel chips, footer orbs, etc.)
     while leaving ordinary hover transitions untouched. */
  *, *::before, *::after {
    animation-play-state: paused !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}