/* Services module styles - follow global variables and wrappers */

:root{
    --services-accent: #00BCD4;
}

.services-hero{ background: radial-gradient(circle at 15% -10%, rgba(0, 188, 212, 0.25), transparent 45%),
    radial-gradient(circle at 85% 30%, rgba(156, 39, 176, 0.25), transparent 50%),
    linear-gradient(180deg,#030410 0%,#090f1f 55%,#10182d 100%); color:#fff; overflow:hidden; position:relative; }
.services-hero::after{ content:''; position:absolute; inset:10% 0 auto auto; width:400px; height:400px; background:rgba(0,0,0,0.3); border-radius:50%; filter:blur(60px); opacity:.65; pointer-events:none; }
.services-hero .section-inner{ position:relative; z-index:1; }
.services-hero .section-content{ max-width:840px; position:relative; z-index:2; display:flex; flex-direction:column; gap:1.5rem; }
.hero-grid{ display:grid; grid-template-columns: minmax(320px, 1fr) minmax(220px, 1fr) minmax(220px, 280px); gap: clamp(1.5rem, 2vw, 3rem); align-items:center; justify-content:space-between; }
.hero-copy{ display:flex; flex-direction:column; gap:1.25rem;}
.hero-eyebrow{ text-transform:uppercase; letter-spacing:0.45em; font-size:.75rem; color:rgba(255,255,255,0.6); margin-bottom:.35rem; }
.services-hero .title{ font-size: clamp(2.24rem, 4vw, 3.4rem); line-height:1.3; }
.services-hero .lead{ margin:0; color:rgba(255,255,255,0.8); font-size:1.15rem; }
.hero-actions{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.hero-actions .btn-primary{ border-radius:999px; padding: .95rem 1.8rem; font-size:1rem; }
.hero-note{ font-size:.9rem; color:rgba(255,255,255,0.75); letter-spacing:.1em; text-transform:uppercase; }
.hero-metrics{ margin-top:0; display:flex; flex-direction:column; gap:1rem; }
.hero-metrics article{ background: rgba(255,255,255,0.04); padding:1rem 1.25rem; border-radius:18px; border:1px solid rgba(255,255,255,0.08); box-shadow:0 25px 60px rgba(3,7,18,0.35); }
.hero-metrics .metric-value{ font-size:1.75rem; font-weight:700; color:#00cddc; display:block; }
.hero-metrics p{ margin:0; color:rgba(255,255,255,0.7); font-size:.85rem; }
.hero-visual{ display:flex; flex-direction:column; gap:1rem; }
.hero-visual-card{ background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:20px; padding:1rem; min-height:120px; box-shadow:0 20px 45px rgba(3,7,18,0.35); display:flex; flex-direction:column; gap:.5rem; }
.hero-visual-card span{ font-size:1rem; letter-spacing:.5em; color:rgba(255,255,255,0.6); }
.hero-visual-card p{ margin:0; color:rgba(255,255,255,0.85); font-size:.95rem; line-height:1.4; }

/* light-background offerings */
.services-offerings{ background:#f8fafc; color:#0f172a; }
.services-offerings .section-inner{ position:relative; }
.services-offerings .section-content{ padding: clamp(3rem,4vw,4.5rem) 0; display:flex; flex-direction:column; gap:2rem; }
.offerings-intro{ max-width:580px; }
.section-eyebrow{ text-transform:uppercase; letter-spacing:.4em; font-size:.7rem; color:#0f172a; display:inline-block; margin-bottom:.75rem; }
.services-offerings .section-title{ font-size: clamp(2rem,4vw,2.75rem); color:#040b15; margin:0 0 .75rem 0; }
.services-offerings .section-lead{ margin:0; color:rgba(15,23,42,.75); font-size:1rem; }
.offerings-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap:1.25rem; }
.offering{ background:#ffffff; border-radius:22px; padding:1.5rem; border:1px solid rgba(15,23,42,0.08); box-shadow:0 30px 70px rgba(3,7,18,0.12); display:flex; flex-direction:column; gap:1rem; min-height:240px; }
.offering-pill{ display:inline-flex; padding:.2rem .85rem; border-radius:999px; background:rgba(0,188,212,.15); color:#006374; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; }
.offering p{ margin:0; color:#0f172a; font-size:1rem; line-height:1.5; }
.offering ul{ margin:0; padding-left:1.25rem; display:flex; flex-direction:column; gap:.4rem; color:rgba(15,23,42,.7); font-size:.9rem; }
.offering ul li{ line-height:1.4; }
.offering-graphic{ display:flex; align-items:center; justify-content:center; gap:.8rem; margin-top:auto; }
.graphic-line{ flex:1; height:4px; border-radius:999px; background:linear-gradient(90deg, rgba(0,188,212,.95), rgba(15,23,42,.2)); box-shadow:0 10px 15px rgba(0,0,0,.15); }
.graphic-line:nth-child(3){ width:60%; }
.graphic-dot{ width:16px; height:16px; border-radius:999px; border:2px solid rgba(0,188,212,.8); background:#fff; box-shadow:0 0 20px rgba(0,188,212,.35); }
.services-offerings::before{ content:''; position:absolute; inset:auto 5% 5% auto; width:260px; height:260px; background:rgba(0,188,212,0.08); border-radius:50%; filter:blur(40px); }

.services-process{ background: linear-gradient(180deg,#fdfdff 0%,#f4f6fb 100%); color:#0f172a; position:relative; overflow:hidden }
.services-process::after{ content:''; position:absolute; inset:auto 10% 10% auto; width:320px; height:320px; background:rgba(255,255,255,0.9); border-radius:50%; filter:blur(50px); pointer-events:none; }
.services-process .section-inner{ position:relative; z-index:1 }
.services-process-header{ max-width:640px }
.services-process-header .section-eyebrow{ color:rgba(0,188,212,0.9); }
.services-process .section-title{ color:#081427 }
.services-process .section-lead{ color:rgba(15,23,42,0.8); margin-top:.4rem }
.process-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,320px); gap:clamp(2rem,3vw,3rem); align-items:flex-start }
.process-timeline{ position:relative }
.process-timeline::after{ content:''; position:absolute; left:35px; top:1.5rem; bottom:0; width:2px; background:linear-gradient(180deg,rgba(0,188,212,0.9),rgba(0,0,0,0)); border-radius:999px }
.svc-steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1.25rem }
.svc-step{ background:#fff; border:1px solid rgba(9,21,43,0.08); border-radius:24px; padding:1.25rem 1.75rem; display:flex; gap:1.25rem; align-items:flex-start; box-shadow:0 12px 40px rgba(15,23,42,0.08); }
.svc-step:nth-child(even){ background:#fdfbff; }
.step-index{ width:52px; height:52px; border-radius:16px; background:rgba(0,188,212,0.15); border:1px solid rgba(0,188,212,0.5); color:#00a6bb; font-weight:700; letter-spacing:.45em; font-size:.85rem; display:flex; align-items:center; justify-content:center; box-shadow:0 12px 35px rgba(9,21,43,0.1) }
.step-copy h3{ margin:0; font-size:1.25rem; color:#081427 }
.step-copy p{ margin:.35rem 0 0; color:rgba(9,21,43,0.7); line-height:1.45 }
.process-highlight{ background:#fff; border:1px solid rgba(9,21,43,0.08); border-radius:24px; padding:1.5rem; box-shadow:0 20px 60px rgba(15,23,42,0.12); align-self:flex-start }
.process-highlight h3{ margin:.5rem 0 0; font-size:1.5rem; color:#081427 }
.process-highlight p{ color:rgba(9,21,43,0.75); margin:0 }
.highlight-points{ list-style:none; margin:1rem 0 0; padding:0; display:flex; flex-direction:column; gap:.65rem }
.highlight-points li{ padding-left:1.85rem; position:relative; color:rgba(9,21,43,0.75); line-height:1.4; font-weight:500 }
.highlight-points li::before{ content:''; position:absolute; left:0; top:calc(50% - 1px); width:10px; height:2px; border-radius:999px; background:linear-gradient(90deg,rgba(255,255,255,0),#00BCD4); box-shadow:0 0 12px rgba(0,188,212,0.35) }

.services-contact{ background: radial-gradient(circle at 0% 0%, rgba(0,188,212,0.15), transparent 45%),
    radial-gradient(circle at 90% -10%, rgba(156,39,176,0.12), transparent 50%),
    linear-gradient(180deg,#02050f 0%,#050b16 60%,#0c111f 100%); color:#fff; position:relative; overflow:hidden }
.services-contact::after{ content:''; position:absolute; inset:auto 10% 10% auto; width:320px; height:320px; background:rgba(255,255,255,0.1); border-radius:50%; filter:blur(60px); pointer-events:none; }
.services-contact .section-inner{ position:relative; z-index:1 }
.contact-layout{ width:100%; display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,360px); gap:clamp(2rem,3vw,3rem); align-items:flex-start }
.contact-copy{ max-width:580px }
.contact-copy .section-title{ color:#fff }
.contact-highlights{ display:grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap:1rem; margin-top:1.25rem }
.contact-highlights article{ background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.18); border-radius:18px; padding:1rem; box-shadow:0 25px 60px rgba(2,5,13,0.55); }
.contact-highlights h4{ margin:0 0 .35rem; font-size:1rem; text-transform:uppercase; letter-spacing:.25em; color:#00cddc }
.contact-highlights p{ margin:0; color:rgba(255,255,255,0.8); font-size:.9rem; line-height:1.4 }
.contact-note{ margin-top:1.25rem; color:rgba(255,255,255,0.75); font-size:.9rem; }
.contact-visual{ background:rgba(15,18,52,0.8); border-radius:28px; padding:1.75rem; border:1px solid rgba(255,255,255,0.12); box-shadow:0 30px 70px rgba(2,5,13,0.65); display:flex; flex-direction:column; gap:1rem }
.visual-hero{ display:flex; flex-direction:column; gap:.35rem }
.visual-eyebrow{ text-transform:uppercase; letter-spacing:.4em; font-size:.65rem; color:rgba(255,255,255,0.7); margin:0 }
.visual-hero h3{ margin:0; font-size:1.5rem; color:#fff }
.visual-hero p{ margin:0; color:rgba(255,255,255,0.7); font-size:.95rem; line-height:1.4 }
.visual-graph{ display:flex; justify-content:space-between; gap:.75rem; padding-top:1rem }
.visual-blob{ flex:1; height:80px; border-radius:16px; background:linear-gradient(180deg,#00cddc,#027d8a); opacity:.8; box-shadow:0 15px 25px rgba(0,0,0,0.35); }
.visual-blob:nth-child(2){ opacity:.6; }
.visual-blob:nth-child(3){ height:70px; }
.visual-blob:nth-child(4){ height:60px; }
.visual-metrics{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem; color:rgba(255,255,255,0.78); font-size:.9rem; }
.visual-metrics li{ position:relative; padding-left:1.2rem; }
.visual-metrics li::before{ content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:6px; height:6px; border-radius:999px; background:#00cddc; }
.contact-footnote{ font-size:.8rem; color:rgba(255,255,255,0.6); margin:0 }
.contact-footer{ margin-top:1.5rem; display:flex; justify-content:flex-end }
.contact-footer .btn-primary{ padding:.85rem 1.75rem; border-radius:999px; font-size:1rem; background:#FFC107; color:#081427; border:none; box-shadow:0 10px 30px rgba(255,193,7,0.4); }

/* Make sections respect header height */
.services-hero, .services-offerings, .services-process, .services-contact{ min-height: calc(100vh - var(--header-height)); display:flex; align-items:center }

@media (max-width:900px){
    .services-hero .title{ font-size:1.8rem }
    .hero-grid{ grid-template-columns: 1fr }
    .hero-actions{ flex-direction:column; align-items:flex-start }
    .offerings-grid{ grid-template-columns: 1fr }
    .process-grid{ grid-template-columns: 1fr }
    .process-timeline::after{ left:20px }
    .process-highlight{ width:100% }
    .contact-layout{ grid-template-columns: 1fr }
    .contact-visual{ width:100%; }
}

/* small animation */
@keyframes servicesFade{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
.section-content{ animation: servicesFade 480ms ease both }