/* ============================================================
   VOLUM TECHNOLOGIES — Applications & About Sections
   ============================================================ */

/* ── APPLICATIONS ── */
.applications {
  background: #020507;
  overflow: hidden;
}
.applications::before {
  content: ''; position: absolute;
  right: -180px; top: 50%; transform: translateY(-50%);
  width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, rgba(130,0,123,0.07) 0%, transparent 70%);
  pointer-events: none;
}

.apps-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.app-card {
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px; padding: 2.5rem 2rem;
  background: rgba(255,255,255,0.012);
  backdrop-filter: blur(8px);
  position: relative; overflow: hidden;
  transition: transform 0.4s, background 0.4s, border-color 0.4s;
}
.app-card:hover {
  transform: translateY(-6px);
  background: rgba(0,152,253,0.025);
  border-color: rgba(0,152,253,0.2);
}

.app-num {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.28em;
  color: var(--primary); opacity: 0.55;
  margin-bottom: 1.5rem;
}

.app-icon { margin-bottom: 1.5rem; }
.app-icon svg {
  width: 34px; height: 34px; stroke: var(--primary);
  fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

.app-name {
  font-size: 1.05rem; font-weight: 600;
  margin-bottom: 0.7rem; letter-spacing: -0.01em;
}
.app-desc {
  font-size: 0.85rem; font-weight: 300;
  color: rgba(255,255,255,0.43); line-height: 1.65;
}

/* ── ABOUT ── */
.about { background: #000; overflow: hidden; }

.about-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.1fr;
  gap: 5rem; align-items: center;
}

.about-visual {
  position: relative; height: 380px;
  display: flex; align-items: center; justify-content: center;
}

.ring {
  position: absolute; border-radius: 50%;
  border: 1px solid;
}
.ring-1 {
  width: 320px; height: 320px;
  border-color: rgba(0,152,253,0.14);
  animation: spin 32s linear infinite;
}
.ring-2 {
  width: 230px; height: 230px;
  border-color: rgba(255,72,143,0.1);
  animation: spin 22s linear infinite reverse;
}
.ring-3 {
  width: 158px; height: 158px;
  border-color: rgba(130,0,123,0.15);
  animation: spin 16s linear infinite;
}
.ring-dot {
  position: absolute; width: 5px; height: 5px;
  border-radius: 50%; top: -2.5px; left: 50%;
  transform: translateX(-50%);
}
.ring-4 {
  width: 410px; height: 410px;
  border-color: rgba(0,212,200,0.1);
  animation: spin 44s linear infinite reverse;
}
.ring-dot-1 { background: var(--primary); box-shadow: 0 0 8px rgba(0,152,253,0.9); }
.ring-dot-2 { background: var(--secondary); box-shadow: 0 0 8px rgba(255,72,143,0.8); }
.ring-dot-3 { background: var(--tertiary); box-shadow: 0 0 8px rgba(130,0,123,0.8); }
.ring-dot-4 { background: #00D4C8; box-shadow: 0 0 8px rgba(0,212,200,0.9); }

.about-orb {
  width: 72px; height: 72px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,152,253,0.28), rgba(0,152,253,0.04));
  box-shadow: 0 0 40px rgba(0,152,253,0.22), inset 0 0 20px rgba(0,152,253,0.1);
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
}

.about-features {
  display: flex; flex-direction: column; gap: 1.2rem;
  margin-top: 2rem;
}
.about-feat {
  display: flex; align-items: flex-start; gap: 0.875rem;
}
.feat-dot {
  width: 5px; height: 5px; border-radius: 50%;
  flex-shrink: 0; margin-top: 0.55rem;
}
.feat-text {
  font-size: 0.88rem; font-weight: 300;
  color: rgba(255,255,255,0.5); line-height: 1.55;
}
.feat-text strong { color: rgba(255,255,255,0.8); font-weight: 500; }