/* ═══════════════════════════════════════════
   SHARED SERVICE PAGE LAYOUT
   ═══════════════════════════════════════════ */

.svc-page{min-height:100vh;padding-top:80px}

/* ─── SERVICE HERO ─── */
.svc-hero{padding:5rem 2rem 4rem;text-align:center;position:relative;overflow:hidden}
.svc-hero-bg{position:absolute;inset:0;z-index:0;opacity:.06}
.svc-hero-bg img{width:100%;height:100%;object-fit:cover}
.svc-hero-content{position:relative;z-index:2;max-width:800px;margin:0 auto}
.svc-hero-icon{font-size:4rem;margin-bottom:1.5rem;display:inline-block;animation:float 3s ease-in-out infinite}
.svc-hero-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.2em;margin-bottom:1rem;display:inline-flex;align-items:center;gap:.75rem}
.svc-hero-label::before,.svc-hero-label::after{content:'';width:30px;height:1px}
.svc-hero-title{font-family:'Syne',sans-serif;font-size:clamp(2.2rem,5vw,4rem);font-weight:800;line-height:1.05;letter-spacing:-.03em;margin-bottom:1.25rem}
.svc-hero-title .hl{color:var(--accent-violet)}
.svc-hero-desc{color:var(--text-muted);font-size:1.1rem;max-width:600px;margin:0 auto 2rem;line-height:1.8}
.svc-hero-ctas{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* ─── SERVICE CONTENT ─── */
.svc-content{max-width:1100px;margin:0 auto;padding:0 2rem}
.svc-section{padding:4rem 0}
.svc-section-title{font-family:'Syne',sans-serif;font-size:clamp(1.5rem,3vw,2.2rem);font-weight:700;margin-bottom:1rem}
.svc-section-title .hl{color:var(--accent-violet)}
.svc-section-desc{color:var(--text-muted);font-size:1rem;line-height:1.8;margin-bottom:2rem}

/* ─── STATS ROW ─── */
.svc-stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.25rem;margin:2rem 0}
.svc-stat-card{text-align:center;padding:2rem 1.25rem;border-radius:var(--radius-lg);background:var(--glass-bg);border:1px solid var(--glass-border);backdrop-filter:blur(10px);transition:all .4s cubic-bezier(.16,1,.3,1)}
.svc-stat-card:hover{transform:translateY(-6px);box-shadow:var(--glow-violet)}
.svc-stat-num{font-family:'Syne',sans-serif;font-size:2.5rem;font-weight:800;background:linear-gradient(135deg,var(--accent-violet),var(--accent-cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.svc-stat-label{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;margin-top:.5rem}

/* ─── WHAT I DO GRID ─── */
.svc-offerings{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin:2rem 0}
.svc-offering{padding:1.75rem;border-radius:var(--radius-lg);background:var(--glass-bg);border:1px solid var(--glass-border);backdrop-filter:blur(10px);transition:all .4s cubic-bezier(.16,1,.3,1)}
.svc-offering:hover{transform:translateY(-4px);border-color:var(--accent-violet);box-shadow:var(--glow-violet)}
.svc-offering-icon{font-size:1.8rem;margin-bottom:1rem;display:block}
.svc-offering h4{font-family:'Syne',sans-serif;font-size:1.1rem;font-weight:700;margin-bottom:.5rem}
.svc-offering p{color:var(--text-muted);font-size:.88rem;line-height:1.7}

/* ─── TOOLS / PLATFORMS ─── */
.svc-tools-wrap{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.5rem 0}
.svc-tool-pill{display:flex;align-items:center;gap:.5rem;padding:.6rem 1.25rem;border-radius:100px;background:var(--glass-bg);border:1px solid var(--glass-border);backdrop-filter:blur(8px);font-size:.85rem;font-weight:500;transition:all .3s ease}
.svc-tool-pill:hover{transform:translateY(-3px);border-color:var(--accent-violet);box-shadow:var(--glow-violet)}
.svc-tool-pill .tp-icon{font-size:1.1rem}

/* ─── PROCESS STEPS ─── */
.svc-process{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;margin:2rem 0}
.svc-step{text-align:center;padding:2rem 1.25rem;border-radius:var(--radius-lg);background:var(--glass-bg);border:1px solid var(--glass-border);position:relative;transition:all .4s ease}
.svc-step:hover{transform:translateY(-4px);box-shadow:var(--glow-violet)}
.svc-step-num{font-family:'Syne',sans-serif;font-size:2.5rem;font-weight:800;opacity:.12;position:absolute;top:.75rem;right:1rem}
.svc-step-icon{font-size:2rem;margin-bottom:1rem;display:block}
.svc-step h4{font-family:'Syne',sans-serif;font-size:1rem;font-weight:700;margin-bottom:.5rem}
.svc-step p{color:var(--text-muted);font-size:.82rem;line-height:1.6}

/* ─── CTA SECTION ─── */
.svc-cta{text-align:center;padding:5rem 2rem;position:relative}
.svc-cta-title{font-family:'Syne',sans-serif;font-size:clamp(1.8rem,4vw,3rem);font-weight:800;margin-bottom:1rem}
.svc-cta-title .hl{color:var(--accent-violet)}
.svc-cta-desc{color:var(--text-muted);font-size:1.05rem;max-width:550px;margin:0 auto 2rem}
.svc-cta-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* ─── BACK LINK ─── */
.svc-back{display:inline-flex;align-items:center;gap:.5rem;color:var(--text-muted);font-size:.85rem;font-weight:500;transition:color .3s ease;margin-bottom:2rem}
.svc-back:hover{color:var(--accent-violet)}
.svc-back svg{width:16px;height:16px;transition:transform .3s ease}
.svc-back:hover svg{transform:translateX(-4px)}

/* ─── RESPONSIVE ─── */
@media(max-width:768px){
  .svc-hero{padding:3rem 1.25rem 2.5rem}
  .svc-hero-icon{font-size:3rem}
  .svc-stats-row{grid-template-columns:repeat(2,1fr)}
  .svc-offerings{grid-template-columns:1fr}
  .svc-process{grid-template-columns:1fr 1fr}
  .svc-cta{padding:3rem 1.25rem}
}
@media(max-width:480px){
  .svc-stats-row{grid-template-columns:1fr}
  .svc-process{grid-template-columns:1fr}
  .svc-hero-ctas{flex-direction:column;align-items:center}
}