/* css/sections.css — Services, Why Us, Approach, Tech, Industries */

/* ── SERVICES ── */
#services { background: var(--navy); }

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

.service-group {
  background: var(--navy); padding: 2.5rem;
  position: relative; overflow: hidden; transition: background 0.3s;
}
.service-group::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 3px; height: 0; background: var(--teal); transition: height 0.4s ease;
}
.service-group:hover::before { height: 100%; }
.service-group:hover { background: var(--navy-light); }

.service-group-icon { font-size: 1.6rem; margin-bottom: 1rem; display: block; }
.service-group-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 1.15rem; color: var(--white); margin-bottom: 0.4rem; }
.service-group-sub { font-size: 0.8rem; color: var(--teal); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1.5rem; }

.service-list { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }
.service-list li {
  font-size: 0.9rem; color: var(--muted); display: flex;
  align-items: flex-start; gap: 0.75rem; line-height: 1.5; transition: color 0.2s;
}
.service-group:hover .service-list li { color: #A8BDD0; }
.service-list li::before { content: '→'; color: var(--teal); font-size: 0.8rem; flex-shrink: 0; margin-top: 0.1rem; opacity: 0.6; transition: opacity 0.2s; }
.service-group:hover .service-list li::before { opacity: 1; }

/* ── WHY US ── */
#why { background: var(--navy-mid); }

.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 1rem; }

.why-card { padding: 2rem; border: 1px solid var(--border); position: relative; transition: border-color 0.3s, transform 0.3s; }
.why-card:hover { border-color: rgba(0,180,216,0.3); transform: translateY(-4px); }
.why-num { font-family: 'Syne', sans-serif; font-size: 3rem; font-weight: 800; color: rgba(0,180,216,0.08); position: absolute; top: 1rem; right: 1.2rem; line-height: 1; pointer-events: none; }
.why-icon { font-size: 1.5rem; margin-bottom: 1rem; display: block; }
.why-title { font-family: 'Syne', sans-serif; font-size: 1rem; font-weight: 700; margin-bottom: 0.6rem; color: var(--white); }
.why-body { font-size: 0.88rem; color: var(--muted); line-height: 1.65; }

/* ── APPROACH ── */
#approach { background: var(--navy); }

.approach-steps {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; position: relative; margin-top: 1rem;
}
.approach-steps::before {
  content: ''; position: absolute; top: 2rem; left: 12.5%; right: 12.5%;
  height: 1px; background: linear-gradient(90deg, var(--teal), var(--gold), var(--teal)); opacity: 0.3;
}

.step { padding: 0 1.5rem 2rem; position: relative; text-align: center; }
.step-num {
  width: 4rem; height: 4rem; background: var(--navy-light); border: 1px solid var(--teal); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Syne', sans-serif; font-weight: 700; font-size: 1.1rem; color: var(--teal);
  margin: 0 auto 1.5rem; position: relative; z-index: 1;
}
.step-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 0.95rem; color: var(--white); margin-bottom: 0.6rem; }
.step-body { font-size: 0.85rem; color: var(--muted); line-height: 1.6; }

/* ── TECH STACK ── */
#tech { background: var(--navy-mid); }

.tech-categories { display: flex; flex-direction: column; gap: 2rem; }
.tech-row { display: flex; align-items: flex-start; gap: 2rem; padding: 1.5rem 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.tech-row:last-child { border-bottom: none; }
.tech-cat-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--teal); min-width: 140px; padding-top: 0.3rem; flex-shrink: 0; }
.tech-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.tech-tag {
  padding: 0.35rem 0.9rem; border: 1px solid var(--border);
  font-size: 0.8rem; color: var(--muted); letter-spacing: 0.04em; transition: all 0.2s; cursor: default;
}
.tech-tag:hover { border-color: var(--teal); color: var(--teal); background: var(--teal-glow); }

/* ── INDUSTRIES ── */
#industries { background: var(--navy); }

.industries-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.industry-card { border: 1px solid var(--border); padding: 1.8rem 1.5rem; text-align: center; transition: all 0.3s; cursor: default; }
.industry-card:hover { background: var(--navy-light); border-color: rgba(233,180,76,0.3); transform: translateY(-4px); }
.industry-icon { font-size: 2rem; margin-bottom: 0.8rem; display: block; }
.industry-name { font-family: 'Syne', sans-serif; font-size: 0.9rem; font-weight: 600; color: var(--white); margin-bottom: 0.4rem; }
.industry-desc { font-size: 0.78rem; color: var(--muted); }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .services-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .approach-steps { grid-template-columns: repeat(2, 1fr); }
  .approach-steps::before { display: none; }
  .industries-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .why-grid { grid-template-columns: 1fr; }
  .approach-steps { grid-template-columns: 1fr; }
  .industries-grid { grid-template-columns: repeat(2, 1fr); }
  .service-group { padding: 1.8rem 1.5rem; }
  .tech-row { flex-direction: column; gap: 0.8rem; }
  .tech-cat-label { min-width: unset; }
}