/**
 * Services Page Specific Styles
 * Service offerings, capabilities, deployment options
 */

/* Smooth scrolling */
html, body {
  scroll-behavior: smooth;
}

/* Enhanced hero */
.hero {
  padding: 96px 0 88px;
}

.hero-content {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Gradient button */
.btn-accent {
  background: linear-gradient(135deg, #00c2ff, #0066ff);
}

/* Neon card effect */
.neon-card {
  border: 1px solid rgba(0, 198, 255, 0.25);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-lg, 12px);
}

/* Grid background effect */
.grid-bg {
  position: relative;
  overflow: hidden;
}

.grid-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 20% 10%, rgba(0, 198, 255, 0.12), transparent 35%),
    radial-gradient(circle at 80% 20%, rgba(0, 98, 255, 0.12), transparent 35%),
    radial-gradient(circle at 50% 90%, rgba(0, 255, 170, 0.10), transparent 30%);
  filter: blur(18px);
  pointer-events: none;
}

.grid-bg > * {
  position: relative;
  z-index: 1;
}

/* Visualization wrapper */
.viz-wrap {
  position: relative;
  height: 320px;
}

/* Large stat numbers */
.stat-number {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
}

/* Industry cards */
.industry-card {
  padding: 20px;
  border-radius: var(--radius-lg, 12px);
  background: var(--bg-card);
  box-shadow: var(--shadow-md);
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.industry-card i {
  font-size: 2.2rem;
  color: var(--color-primary);
}

/* Why items */
.why-item {
  display: flex;
  gap: 14px;
  margin: 18px 0;
}

.why-item i {
  font-size: 2.2rem;
  color: var(--color-primary);
}

/* Service deep dive */
.service-deep-dive .service-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.service-deep-dive h3 {
  margin: 0.2rem 0 0.6rem;
}

/* Capability cards */
.cap-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.cap-chip {
  margin: 4px 6px 0 0;
}

/* Pill badge */
.pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-pill, 999px);
  background: #e8f5e9;
  color: #1b5e20;
  font-weight: 600;
  font-size: 0.8rem;
}

html[data-theme="dark"] .pill {
  background: rgba(129, 199, 132, 0.2);
  color: #a5d6a7;
}

/* Back to top button */
.page-footer #back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  background: var(--color-primary);
}

/* Collapsible enhancements */
.collapsible.expandable .collapsible-body {
  padding-top: 10px;
}

/* Tabs */
.tabs .tab a {
  user-select: none;
}

a[href="javascript:void(0)"] {
  cursor: default;
}

/* Capability grid */
.row.cap-grid .col {
  display: flex;
}

.row.cap-grid .card-panel {
  width: 100%;
}

/* ===== Dark Mode Overrides ===== */
html[data-theme="dark"] .hero {
  color: var(--text-primary);
}

html[data-theme="dark"] .overlay {
  background: linear-gradient(135deg, rgba(5, 11, 21, 0.85), rgba(15, 30, 51, 0.75));
}

html[data-theme="dark"] .neon-card,
html[data-theme="dark"] .industry-card,
html[data-theme="dark"] .card-panel,
html[data-theme="dark"] .cap-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  box-shadow: 0 10px 30px rgba(5, 12, 22, 0.35);
  color: var(--text-primary);
}

html[data-theme="dark"] .industry-card i,
html[data-theme="dark"] .why-item i,
html[data-theme="dark"] .service-deep-dive h3,
html[data-theme="dark"] .service-deep-dive .service-title,
html[data-theme="dark"] .stat-number {
  color: var(--color-accent);
}

html[data-theme="dark"] .grid-bg::before {
  opacity: 0.35;
}

html[data-theme="dark"] .section.section-light {
  background: rgba(5, 12, 22, 0.65);
}

html[data-theme="dark"] .section.section-medium {
  background: rgba(8, 20, 35, 0.7);
}

html[data-theme="dark"] .service-deep-dive p,
html[data-theme="dark"] .industry-card p,
html[data-theme="dark"] .why-item p,
html[data-theme="dark"] .cap-card p {
  color: var(--text-secondary);
}

html[data-theme="dark"] .tabs .tab a {
  color: var(--text-secondary);
}

html[data-theme="dark"] .tabs .tab a.active {
  color: var(--color-accent);
}

html[data-theme="dark"] .tabs .indicator {
  background: var(--color-accent);
}

html[data-theme="dark"] .card-panel h5 {
  color: var(--text-primary);
}

html[data-theme="dark"] .card-panel li {
  color: var(--text-secondary);
}