/* ===== About ===== */
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
}
@media (min-width: 1024px) { .about-grid { grid-template-columns: 1fr 1fr; gap: 3rem; } }

.about-title { margin-top: .75rem; font-size: 1.9rem; }
@media (min-width: 640px) { .about-title { font-size: 2.25rem; } }
.about-text { margin-top: 1.25rem; line-height: 1.75; color: rgb(var(--color-text-muted)); }
.about-text + .about-text { margin-top: 1rem; }

.pillars { display: flex; flex-direction: column; gap: 1.25rem; }
.pillar-card {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
}
.pillar-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.75rem;
  width: 2.75rem;
  border-radius: .85rem;
  background-color: rgba(38,181,216,.1);
  color: var(--brand);
}
.pillar-icon svg { width: 20px; height: 20px; }
.pillar-title { font-size: 1.1rem; }
.pillar-text { margin-top: .35rem; font-size: .9rem; line-height: 1.6; color: rgb(var(--color-text-muted)); }

/* ===== Section heading shared ===== */
.section-heading { max-width: 640px; }
.section-heading.center { margin-inline: auto; text-align: center; }
.section-title { margin-top: .75rem; font-size: 1.9rem; }
@media (min-width: 640px) { .section-title { font-size: 2.25rem; } }
.section-subtitle { margin-top: 1rem; line-height: 1.7; color: rgb(var(--color-text-muted)); }

/* ===== Services ===== */
.services-grid {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 640px) { .services-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .services-grid { grid-template-columns: 1fr 1fr 1fr; } }

.service-card {
  padding: 1.5rem;
  transition: transform .25s ease, box-shadow .25s ease;
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-glow-sm); }
.service-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.75rem;
  width: 2.75rem;
  border-radius: .85rem;
  background-color: rgba(38,181,216,.1);
  color: var(--brand);
  transition: all .25s ease;
}
.service-card:hover .service-icon { background-color: var(--brand); color: #fff; }
.service-icon svg { width: 20px; height: 20px; }
.service-title { margin-top: 1rem; font-size: 1rem; }
.service-desc { margin-top: .5rem; font-size: .875rem; line-height: 1.6; color: rgb(var(--color-text-muted)); }

/* ===== Technologies marquee ===== */
.tech-marquee-wrap { position: relative; margin-top: 3.5rem; display: flex; flex-direction: column; gap: 1rem; }
.tech-fade {
  position: absolute;
  inset-block: 0;
  z-index: 10;
  width: 6rem;
  pointer-events: none;
}
@media (min-width: 640px) { .tech-fade { width: 10rem; } }
.tech-fade.left { left: 0; background: linear-gradient(to right, #F5F7FA, transparent); }
.tech-fade.right { right: 0; background: linear-gradient(to left, #F5F7FA, transparent); }
html.dark .tech-fade.left { background: linear-gradient(to right, #0d0d0e, transparent); }
html.dark .tech-fade.right { background: linear-gradient(to left, #0d0d0e, transparent); }

.tech-row { display: flex; overflow: hidden; }
.tech-track {
  display: flex;
  flex-shrink: 0;
  gap: 1rem;
  padding-right: 1rem;
  animation: marquee 32s linear infinite;
}
.tech-track.reverse { animation-direction: reverse; animation-duration: 26s; }

.tech-pill {
  display: flex;
  align-items: center;
  gap: .75rem;
  border-radius: 1rem;
  padding: .9rem 1.25rem;
  white-space: nowrap;
}
.tech-dot { height: 8px; width: 8px; border-radius: 50%; background-color: var(--brand); flex-shrink: 0; }
.tech-name { font-family: var(--font-display); font-size: .875rem; font-weight: 600; }
.tech-category { font-size: .65rem; text-transform: uppercase; letter-spacing: .05em; color: rgb(var(--color-text-muted)); }