/* ================================================================
   MOD: SERVICES — floating card grid
   Requires: core.css tokens. No JS dependency.
   HTML needed: <section class="services" id="services">
     <div class="container">
       <header class="services-header reveal">...</header>
       <div class="services-grid">
         <article class="service-card reveal">
           <div class="service-icon">...</div>
           <h3 class="service-title">...</h3>
           <p class="service-desc">...</p>
           <ul class="service-list"><li>...</li></ul>
         </article>
       </div>
     </div>
   </section>
================================================================ */

.services { background: var(--color-bg-alt); padding: var(--section-pad); scroll-margin-top: 32px; }
.services-header { margin-bottom: 56px; }
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; }

.service-card {
  background: var(--color-card);
  border-radius: var(--radius-md);
  padding: 40px 32px;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  position: relative;
  overflow: hidden;
}
.service-card::before {
  content: ''; position: absolute; top: -40px; right: -40px; width: 130px; height: 130px;
  background: radial-gradient(circle, var(--accent2-glow) 0%, transparent 70%);
  opacity: 0; transition: opacity var(--transition);
}
.service-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover); border-color: rgba(var(--accent2-rgb),0.4); }
.service-card:hover::before { opacity: 1; }

.service-icon {
  width: 52px; height: 52px; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--accent1), var(--accent1-dark));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; margin-bottom: 22px; box-shadow: var(--shadow-sm);
}
.service-title { font-family: var(--font-display); font-size: 1.22rem; font-weight: 700; color: var(--text-color); margin-bottom: 12px; }
.service-desc { font-size: 0.92rem; color: rgba(var(--fg-rgb), 0.6); line-height: 1.75; margin-bottom: 16px; }
.service-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.service-list li {
  font-size: 0.85rem; color: rgba(var(--fg-rgb), 0.68);
  padding-left: 20px; position: relative;
}
.service-list li::before {
  content: '';
  position: absolute; left: 0; top: 8px;
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--accent2);
  transform: rotate(45deg);
}

@media (max-width: 460px) {
  .services-grid { grid-template-columns: 1fr; }
}