/* ===== Service detail pages ===== */
:root{
  --ink:#14103a;--ink-2:#1e1856;--tint:#f4f2ff;--orange:#faa61a;--red:#e5484d;
  --wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30C180 62 360 58 560 36S960-4 1160 14 1380 42 1440 30V60H0Z'/%3E%3C/svg%3E");
}

/* extra buttons */
.button-orange{background:var(--orange);color:#2b1c00}
.button-orange:hover{background:#ffb83d}
.button-dark{background:var(--ink);color:#fff}
.button-dark:hover{background:var(--ink-2)}

/* ---------- section base with wavy top edge ---------- */
.sp-sec{position:relative;padding:100px 0;background:var(--band,#fff)}
.sp-sec::before{content:"";position:absolute;left:0;right:0;top:-59px;height:60px;background:var(--band,#fff);-webkit-mask:var(--wave) center/100% 100% no-repeat;mask:var(--wave) center/100% 100% no-repeat;pointer-events:none}
.bg-tint{--band:var(--tint)}
.bg-ink{--band:var(--ink)}
.bg-brand{--band:#6558e8}
.bg-ink,.bg-brand{color:#fff}
.bg-ink p,.bg-brand p{color:rgba(255,255,255,.82)}
.bg-ink h3,.bg-brand h3{color:#fff}

.sp-eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;color:var(--primary);font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.sp-eyebrow::before{content:"";width:28px;height:2px;background:currentColor}
.bg-ink .sp-eyebrow,.bg-brand .sp-eyebrow,.sp-panel .sp-eyebrow{color:var(--orange)}

.sp-h2{margin:0 0 18px;font-size:clamp(1.9rem,3.8vw,3rem);font-weight:800;line-height:1.1;letter-spacing:-.035em;text-transform:uppercase}
.sp-h2 em{font-style:normal;color:var(--primary)}
.bg-ink .sp-h2,.bg-brand .sp-h2,.sp-panel .sp-h2{color:#fff}
.bg-ink .sp-h2 em,.bg-brand .sp-h2 em,.sp-panel .sp-h2 em{color:var(--orange)}
.sp-lead{max-width:600px;font-size:1.05rem}
.sp-center{text-align:center}
.sp-center .sp-lead{margin-inline:auto}

.sp-two{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}

/* ---------- 1. hero ---------- */
.sp-hero{padding:90px 0 80px;background:radial-gradient(ellipse at 85% 10%,rgba(101,88,232,.10),transparent 45%),#fff}
.sp-hero .container{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.sp-hero.no-visual .container{grid-template-columns:1fr}
.sp-hero h1{margin-bottom:14px;font-size:clamp(2.4rem,5vw,4.2rem);font-weight:800;line-height:1.05}
.sp-hero-tag{margin-bottom:12px;color:var(--text);font-size:1.2rem;font-weight:700}
.sp-hero p{max-width:560px}

.sp-cal{padding:26px;border:1px solid rgba(101,88,232,.16);border-radius:var(--radius-lg);background:#fff;box-shadow:0 24px 80px rgba(42,32,120,.10)}
.sp-cal-top{display:flex;justify-content:space-between;margin-bottom:18px;color:var(--text-muted);font-size:.8rem;font-weight:700}
.sp-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.sp-day{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--text-muted);font-size:.68rem;font-weight:700}
.sp-post{display:grid;width:100%;aspect-ratio:3/4;place-items:end center;padding-bottom:6px;border-radius:10px;color:#fff;font-size:.6rem;font-weight:700}
.sp-post.p1{background:var(--primary)}
.sp-post.p2{background:#8f85f0}
.sp-post.p3{background:var(--orange);color:#3a2a00}
.sp-post.p4{background:#c9c2ff;color:#2b2470}
.sp-cal-foot{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.sp-cal-foot span{padding:6px 12px;border-radius:999px;background:var(--primary-light);color:var(--primary);font-size:.74rem;font-weight:700}

/* ---------- 2. client strip ---------- */
.sp-strip{padding:56px 0 64px}
.sp-strip small{display:block;margin-bottom:26px;text-align:center;color:rgba(255,255,255,.72);font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.sp-marquee{overflow:hidden;padding-bottom:30px}
.sp-track{display:flex;align-items:center;width:max-content;animation:spMarq 60s linear infinite}
.sp-group{display:flex;align-items:center;gap:18px;padding-right:18px}
.sp-logo{display:flex;flex:0 0 150px;align-items:center;justify-content:center;box-sizing:border-box;width:150px;height:72px;padding:12px 22px;overflow:hidden}
.sp-logo img{display:block;width:100%;height:100%;object-fit:contain}
@keyframes spMarq{to{transform:translateX(-50%)}}

/* ---------- 3. problems ---------- */
.sp-pain{display:grid;gap:12px;margin:24px 0 0;padding:0;list-style:none}
.sp-pain li{position:relative;padding:16px 18px 16px 60px;border:1px solid var(--border);border-radius:var(--radius-md);background:#fff;box-shadow:var(--shadow-card);color:var(--text-secondary);font-size:.97rem}
.sp-pain li::before{content:"✕";position:absolute;left:18px;top:16px;display:grid;width:26px;height:26px;place-items:center;border-radius:8px;background:#fdecec;color:var(--red);font-size:.72rem;font-weight:800}
.sp-promise{position:sticky;top:110px;padding:38px;border-radius:var(--radius-lg);background:linear-gradient(145deg,var(--ink),var(--ink-2));box-shadow:0 30px 70px rgba(20,16,58,.35)}
.sp-promise h3{margin-bottom:14px;color:#fff;font-size:1.7rem;line-height:1.2;text-transform:uppercase}
.sp-promise p{margin-bottom:26px;color:rgba(255,255,255,.82)}

/* ---------- 4. platforms ---------- */
.sp-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.sp-chips span{padding:8px 16px;border:1px solid var(--border);border-radius:999px;background:#fff;color:var(--text);font-size:.85rem;font-weight:600}
.sp-card-list{padding:30px;border:1px solid var(--border);border-radius:var(--radius-lg);background:#fff;box-shadow:0 24px 60px rgba(30,25,80,.08)}
.sp-card-list h3{margin-bottom:12px;font-size:1.25rem;text-transform:uppercase}
.sp-row{display:grid;grid-template-columns:140px 1fr;gap:18px;padding:16px 0;border-top:1px solid var(--border);font-size:.93rem}
.sp-card-list h3 + .sp-row{border-top:0}
.sp-row b{color:var(--primary)}
.sp-row span{color:var(--text-secondary)}

/* ---------- 5. comparison + recommendation ---------- */
.sp-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:44px}
.sp-cmp{padding:32px;border:1px solid var(--border);border-radius:var(--radius-lg);background:linear-gradient(145deg,#fff,#f6f4ff);box-shadow:var(--shadow-card)}
.sp-cmp h3{font-size:1.2rem;text-transform:uppercase}
.sp-cmp ul{margin:18px 0 22px;padding:0;list-style:none}
.sp-cmp li{position:relative;padding:5px 0 5px 26px;color:var(--text-secondary);font-size:.93rem}
.sp-cmp li::before{content:"✓";position:absolute;left:0;top:6px;color:var(--primary);font-size:.85rem;font-weight:800}
.sp-best{display:inline-block;padding:7px 14px;border-radius:999px;background:var(--primary-light);color:var(--primary);font-size:.78rem;font-weight:700}
.sp-panel{margin-top:40px;padding:56px 40px;border-radius:var(--radius-lg);background:linear-gradient(145deg,var(--ink),var(--ink-2));text-align:center;box-shadow:0 30px 70px rgba(20,16,58,.35)}
.sp-panel .sp-h2{font-size:clamp(1.5rem,3vw,2.3rem)}
.sp-panel p{max-width:640px;margin:0 auto;color:rgba(255,255,255,.82)}
.sp-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:640px;margin:28px auto}
.sp-tile{padding:16px 18px;border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-md);background:rgba(255,255,255,.06);text-align:left}
.sp-tile b{display:block;color:var(--orange);font-size:.85rem}
.sp-tile span{color:#fff;font-size:.92rem}

/* ---------- 6. services grid ---------- */
.sp-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:44px}
.sp-svc{position:relative;padding:28px;border:1px solid var(--border);border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-card);transition:transform .3s ease,box-shadow .3s ease}
.sp-svc::after{content:"";position:absolute;left:28px;right:28px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--primary);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.sp-svc:hover{transform:translateY(-5px);box-shadow:0 22px 50px rgba(30,25,80,.12)}
.sp-svc:hover::after{transform:scaleX(1)}
.sp-ico{display:grid;width:46px;height:46px;margin-bottom:18px;place-items:center;border-radius:13px;background:var(--primary-light);color:var(--primary)}
.sp-ico svg{width:22px;height:22px}
.sp-svc h3{font-size:1.1rem;line-height:1.3;text-transform:uppercase}
.sp-svc p{margin:0;font-size:.93rem}

/* ---------- 7. process ---------- */
.sp-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:44px;text-align:left}
.sp-step{display:flex;gap:22px;padding:26px 28px;border:1px solid var(--border);border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-card)}
.sp-step:last-child:nth-child(odd){grid-column:1/-1}
.sp-step i{flex-shrink:0;color:var(--primary);font-size:1.8rem;font-style:normal;font-weight:800;line-height:1.1}
.sp-step h3{margin-bottom:6px;font-size:1.05rem;text-transform:uppercase}
.sp-step p{margin:0;font-size:.93rem}

/* ---------- 8. industries ---------- */
.sp-ind{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:40px}
.sp-ind div{position:relative;padding:22px 24px 22px 66px;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-md);background:rgba(255,255,255,.05)}
.sp-ind div::before{content:"✓";position:absolute;left:22px;top:22px;display:grid;width:26px;height:26px;place-items:center;border-radius:50%;background:var(--orange);color:#2b1c00;font-size:.75rem;font-weight:800}
.sp-ind b{display:block;margin-bottom:4px;color:#fff;font-size:.95rem;text-transform:uppercase}
.sp-ind span{color:rgba(255,255,255,.74);font-size:.9rem}

/* ---------- 9. why choose us ---------- */
.sp-why{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:44px;align-items:start}
.sp-why article{padding:26px;border:1px solid var(--border);border-radius:var(--radius-lg);background:linear-gradient(145deg,#fff,#f6f4ff);box-shadow:var(--shadow-card)}
.sp-why article:nth-child(even){margin-top:28px}
.sp-why small{display:block;margin-bottom:12px;color:var(--primary);font-size:.78rem;font-weight:800;letter-spacing:.12em}
.sp-why h3{font-size:1rem;line-height:1.3;text-transform:uppercase}
.sp-why p{margin:0;font-size:.9rem}

/* ---------- 10. stats ---------- */
.sp-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;max-width:900px;margin:36px auto 0}
.sp-stat{padding:28px 20px;border:1px solid rgba(255,255,255,.22);border-radius:var(--radius-lg);background:rgba(255,255,255,.12)}
.sp-stat b{display:block;color:#fff;font-size:clamp(2.2rem,4vw,3.2rem);font-weight:800;letter-spacing:-.04em;line-height:1.1}
.sp-stat span{color:rgba(255,255,255,.92);font-size:.9rem;font-weight:600}

/* ---------- 11. locations ---------- */
.sp-pins{padding:32px;border-radius:var(--radius-lg);background:linear-gradient(145deg,var(--ink),var(--ink-2));box-shadow:0 30px 70px rgba(20,16,58,.3)}
.sp-pins h3{margin-bottom:6px;color:#fff;font-size:1.2rem;text-transform:uppercase}
.sp-pins ul{margin:14px 0 0;padding:0;list-style:none}
.sp-pins li{position:relative;padding:8px 0 8px 22px;color:rgba(255,255,255,.9)}
.sp-pins li::before{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--orange)}

/* ---------- 12. quote ---------- */
.sp-quote{max-width:720px;margin:36px auto 0}
.sp-quote q{display:block;color:var(--text);font-size:clamp(1.5rem,3.2vw,2.4rem);font-weight:800;line-height:1.25;letter-spacing:-.03em;quotes:"\201C" "\201D"}
.sp-quote q em{font-style:normal;color:var(--primary)}
.sp-quote cite{display:block;margin-top:14px;color:var(--text-muted);font-size:.9rem;font-style:normal}

/* ---------- 13. consultation ---------- */
.sp-checks{margin:22px 0 0;padding:0;list-style:none}
.sp-checks li{position:relative;padding:6px 0 6px 32px;color:rgba(255,255,255,.9)}
.sp-checks li::before{content:"✓";position:absolute;left:0;top:7px;display:grid;width:20px;height:20px;place-items:center;border-radius:50%;background:var(--orange);color:#2b1c00;font-size:.65rem;font-weight:800}
.sp-book{padding:32px;border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-lg);background:rgba(255,255,255,.07)}
.sp-book h3{margin-bottom:6px;font-size:1.3rem;text-transform:uppercase}
.sp-book a{display:block;margin-top:12px;padding:16px 18px;border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-md);background:rgba(255,255,255,.06);transition:background .25s ease,transform .25s ease}
.sp-book a:hover{background:rgba(255,255,255,.12);transform:translateX(4px)}
.sp-book b{display:block;color:#fff}
.sp-book span{color:rgba(255,255,255,.7);font-size:.82rem}

/* ---------- 14. FAQ ---------- */
.sp-faq{display:grid;gap:12px;max-width:860px;margin:40px auto 0;text-align:left}
.sp-faq details{border:1px solid var(--border);border-radius:var(--radius-md);background:#fff;box-shadow:var(--shadow-card)}
.sp-faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;color:var(--text);font-weight:700;cursor:pointer;list-style:none}
.sp-faq summary::-webkit-details-marker{display:none}
.sp-faq summary::after{content:"+";display:grid;flex-shrink:0;width:28px;height:28px;place-items:center;border-radius:50%;background:var(--primary);color:#fff;font-size:1.1rem;transition:transform .25s ease}
.sp-faq details[open] summary::after{transform:rotate(45deg)}
.sp-faq details p{margin:0;padding:0 22px 22px}

/* ---------- 15. explore all ---------- */
.sp-explore{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:40px}
.sp-ex{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;min-height:88px;padding:16px 18px;border:1px solid var(--border);border-radius:var(--radius-md);background:#fff;color:var(--text);font-size:.9rem;font-weight:700;line-height:1.3;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.sp-ex:hover{transform:translateY(-3px);border-color:rgba(101,88,232,.45);box-shadow:var(--shadow-card)}
.sp-ex small{display:block;margin-bottom:4px;color:var(--text-muted);font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.sp-ex i{color:var(--primary);font-style:normal}
.sp-ex.is-here{border-color:transparent;background:linear-gradient(135deg,var(--primary),#4b3fd0);color:#fff;box-shadow:0 18px 40px rgba(101,88,232,.35)}
.sp-ex.is-here small,.sp-ex.is-here i{color:rgba(255,255,255,.85)}

/* ---------- 16. closing CTA ---------- */
.sp-cta{padding:90px 0}
.sp-cta .sp-lead{margin-bottom:30px}

/* ---------- footer + whatsapp ---------- */
.sp-foot{margin-top:0;padding:70px 0 0;background:#0d0a26}
.sp-foot-grid{display:grid;grid-template-columns:1.3fr repeat(3,1fr) .7fr;gap:36px}
.sp-foot h4{margin:0 0 16px;color:#fff;font-size:.95rem;letter-spacing:0}
.sp-foot a{display:block;padding:4px 0;color:rgba(255,255,255,.72);font-size:.88rem;transition:color .2s ease}
.sp-foot a:hover{color:var(--orange)}
.sp-foot p{margin:0 0 8px;color:rgba(255,255,255,.72);font-size:.88rem}
.sp-foot .logo{display:inline-flex;margin-bottom:14px;padding:0;color:#fff;font-size:1.7rem}
.sp-foot-bottom{margin-top:46px;padding:22px 0;border-top:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.55);font-size:.82rem}
.sp-wa{position:fixed;right:22px;bottom:22px;z-index:90;display:grid;width:56px;height:56px;place-items:center;border-radius:50%;background:#25d366;color:#fff;box-shadow:0 12px 30px rgba(0,0,0,.25);transition:transform .25s ease}
.sp-wa:hover{transform:scale(1.08)}
.sp-wa svg{width:28px;height:28px}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .sp-explore{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sp-why{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp-why article:nth-child(even){margin-top:0}
  .sp-grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp-foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .sp-hero .container,.sp-two{grid-template-columns:1fr}
  .sp-hero .container{gap:36px}
  .sp-promise{position:static}
  .sp-compare,.sp-steps,.sp-ind{grid-template-columns:1fr}
}
@media (max-width:760px){
  .sp-sec{padding:72px 0}
  .sp-sec::before{top:-39px;height:40px}
  .sp-hero{padding:60px 0 56px}
  .sp-grid3,.sp-why,.sp-foot-grid{grid-template-columns:1fr}
  .sp-explore{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp-row{grid-template-columns:1fr;gap:4px}
  .sp-tiles{grid-template-columns:1fr}
  .sp-panel{padding:40px 22px}
  .sp-promise{padding:28px}
  .sp-logo{flex-basis:120px;width:120px;height:60px;padding:10px 16px}
}
@media (prefers-reduced-motion:reduce){
  .sp-track{animation:none}
  .sp-svc,.sp-svc::after,.sp-ex,.sp-book a,.sp-faq summary::after{transition:none}
}