:root{--sp-ink:#090b12;--sp-panel:#12121e;--sp-purple:#6d28d9;--sp-violet:#8b5cf6;--sp-lime:#c9ff3d;--sp-paper:#f5f5f1;--sp-muted:#aab0bd;--sp-line:#ffffff1d}
.premium-services{overflow-x:clip;background:var(--sp-paper);color:#111318}
.content-theme.premium-services .site-header{position:absolute;z-index:30;top:18px;right:auto;left:50%;transform:translateX(-50%);width:min(calc(100% - 32px),1200px);margin:0;border-color:#ffffff26;background:#090b12a6;color:#fff;backdrop-filter:blur(18px)}
.premium-services .site-header .identity,.premium-services .site-header .site-navigation a{color:#fff}.premium-services .site-header .identity-name small{color:#c9c5d4}.premium-services .site-header .nav-quote{border-color:#ffffff28;background:#fff;color:#15121b}
.premium-services main{max-width:none;margin:0;padding:0}.premium-services .wrap{width:min(calc(100% - 40px),1200px)}
.services-hero{position:relative;isolation:isolate;min-height:790px;overflow:hidden;padding:160px max(20px,calc((100vw - 1200px)/2)) 90px;background:#090b12;color:#fff}
.services-hero-banner{position:absolute;inset:0;z-index:-3}.services-hero-banner,.services-hero-banner img{width:100%;height:100%}.services-hero-banner img{object-fit:cover;object-position:58% center;filter:saturate(.9) contrast(1.02)}
.services-hero:after{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#070910f7 0%,#100a1fe8 43%,#170c355f 72%,#090b121f),linear-gradient(0deg,#090b12d9 0%,transparent 55%),linear-gradient(135deg,#6d28d947,transparent 55%)}
.services-hero:before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(#ffffff07 1px,transparent 1px),linear-gradient(90deg,#ffffff07 1px,transparent 1px);background-size:74px 74px;mask-image:linear-gradient(90deg,#000,transparent 83%)}
.services-hero-in{display:grid;grid-template-columns:minmax(0,760px);align-items:center;max-width:1200px;margin:auto}
.services-eyebrow{display:flex;align-items:center;gap:.65rem;margin:0 0 1.4rem;color:#d2c1f7;font-size:.67rem;font-weight:800;letter-spacing:.17em;text-transform:uppercase}.services-eyebrow:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sp-lime);box-shadow:0 0 0 7px #c9ff3d17}
.services-hero h1{max-width:720px;margin:0;font-size:clamp(3.7rem,6.4vw,7rem);font-weight:540;line-height:.91;letter-spacing:-.07em}.services-hero h1 span{color:var(--sp-lime)}
.services-hero-copy>p:not(.services-eyebrow):not(.services-byline){max-width:680px;margin:1.7rem 0 0;color:#c5c8d2;font-size:clamp(1rem,1.3vw,1.18rem);line-height:1.7}.services-byline{color:#948fa0!important;font-size:.76rem!important;font-weight:650;letter-spacing:.05em}
.services-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.1rem}.services-actions a{display:inline-flex;min-height:52px;align-items:center;justify-content:center;gap:.8rem;padding:.8rem 1.05rem .8rem 1.2rem;border:1px solid #ffffff32;border-radius:999px;color:#fff;font-size:.78rem;font-weight:780;transition:.25s}.services-actions a:first-child{border-color:var(--sp-lime);background:var(--sp-lime);color:#111318}.services-actions a span{display:grid;width:30px;height:30px;place-items:center;border-radius:50%;background:#ffffff14}.services-actions a:first-child span{background:#111318;color:#fff}.services-actions a:hover{transform:translateY(-3px);box-shadow:0 15px 36px #0004}
.systems-visual{position:relative;min-height:510px;perspective:1000px}.systems-desk{position:absolute;left:5%;right:0;bottom:8%;height:38%;border-radius:28px;background:linear-gradient(145deg,#2b2640,#11111b);box-shadow:0 40px 80px #0008;transform:rotateX(64deg);transform-origin:bottom}
.systems-screen{position:absolute;z-index:2;left:12%;right:7%;top:14%;min-height:310px;padding:16px;border:1px solid #ffffff28;border-radius:25px;background:linear-gradient(145deg,#191827ee,#0d0d16f4);box-shadow:0 35px 90px #0009,inset 0 1px #ffffff1d;transform:rotateY(-5deg)}
.systems-screen-top{display:flex;align-items:center;gap:6px;margin-bottom:14px}.systems-screen-top i{width:7px;height:7px;border-radius:50%;background:#8b5cf6}.systems-screen-top i:nth-child(2){background:#c9ff3d}.systems-screen-top i:nth-child(3){background:#fff}.systems-dashboard{display:grid;grid-template-columns:.65fr 1.35fr;gap:12px}.systems-nav,.systems-main{display:grid;gap:9px}.systems-nav span,.systems-chart,.systems-stat{border:1px solid #ffffff13;border-radius:12px;background:#ffffff08}.systems-nav span{min-height:38px;padding:12px;color:#a9a4b4;font-size:.55rem;font-weight:750}.systems-nav span:first-child{background:#6d28d938;color:#d9c9ff}.systems-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.systems-stat{min-height:65px;padding:10px}.systems-stat b{display:block;color:#fff;font-size:1rem}.systems-stat small{color:#8f8a99;font-size:.48rem}.systems-chart{position:relative;min-height:155px;overflow:hidden}.systems-chart:before{content:"";position:absolute;inset:28% 8% 15%;background:linear-gradient(150deg,transparent 35%,#8b5cf6 36% 40%,transparent 41% 48%,#c9ff3d 49% 53%,transparent 54%);filter:drop-shadow(0 0 8px #8b5cf6)}
.service-float{--float:#8b5cf6;position:absolute;z-index:4;display:flex;min-width:145px;align-items:center;gap:.65rem;padding:.75rem;border:1px solid #ffffff24;border-radius:15px;background:#171522e8;color:#fff;box-shadow:0 18px 45px #0007;backdrop-filter:blur(12px);animation:floatCard 4s ease-in-out infinite alternate}.service-float i{display:grid;width:34px;height:34px;place-items:center;border-radius:10px;background:color-mix(in srgb,var(--float) 25%,transparent);color:var(--float);font-size:.72rem;font-weight:900;font-style:normal}.service-float span{display:grid}.service-float b{font-size:.68rem}.service-float small{margin-top:.2rem;color:#9993a4;font-size:.49rem}.float-shopify{--float:#59d480;left:0;top:4%}.float-wordpress{--float:#68b8ff;right:-3%;top:2%;animation-delay:-1s}.float-ai{--float:#c9ff3d;right:-7%;top:42%;animation-delay:-2s}.float-erp{--float:#f4a261;left:-5%;top:47%;animation-delay:-3s}.float-orders{--float:#f472b6;left:8%;bottom:2%;animation-delay:-1.5s}.float-app{--float:#a78bfa;right:3%;bottom:0;animation-delay:-2.5s}@keyframes floatCard{to{transform:translateY(-9px)}}
.service-hub{padding:clamp(5rem,9vw,8rem) max(20px,calc((100vw - 1200px)/2));background:radial-gradient(circle at 100% 0,#7c3aed11,transparent 28%),var(--sp-paper)}
.hub-heading{display:grid;grid-template-columns:.7fr 1.3fr;gap:3rem;margin-bottom:3.5rem}.hub-heading p{max-width:560px;color:#626b75;line-height:1.75}.hub-heading h2{max-width:780px;margin:0;font-size:clamp(2.8rem,5vw,5.2rem);font-weight:560;line-height:.98;letter-spacing:-.06em}.hub-kicker{color:#6d28d9!important;font-size:.66rem;font-weight:850;letter-spacing:.17em;text-transform:uppercase}
.premium-service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.premium-service-card{--card:#6d28d9;position:relative;display:flex;min-height:430px;overflow:hidden;flex-direction:column;padding:1.35rem;border:1px solid #ddd9e4;border-radius:25px;background:#fff;box-shadow:0 18px 50px #26123b0b;transition:.35s}.premium-service-card:before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--card)}.premium-service-card:hover{transform:translateY(-7px);border-color:#baa6e0;box-shadow:0 28px 70px #34125c18}.service-card-top{display:flex;align-items:center;justify-content:space-between}.service-icon{display:grid;width:48px;height:48px;place-items:center;border-radius:14px;background:color-mix(in srgb,var(--card) 12%,white);color:var(--card);font-size:.75rem;font-weight:900}.service-card-top small{color:#8b929d;font-size:.58rem;font-weight:800;letter-spacing:.13em}.premium-service-card h3{margin:1.6rem 0 .75rem;font-size:clamp(1.5rem,2.3vw,2.15rem);line-height:1.05;letter-spacing:-.045em}.premium-service-card>p{color:#646c76;font-size:.9rem;line-height:1.65}.premium-service-card ul{display:grid;gap:.55rem;margin:1rem 0 1.5rem;padding:0;list-style:none}.premium-service-card li{display:flex;gap:.55rem;color:#3f4650;font-size:.76rem}.premium-service-card li:before{content:"";width:6px;height:6px;flex:0 0 6px;margin-top:.45em;border-radius:50%;background:var(--card)}.premium-service-card>a{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:1rem;border-top:1px solid #e5e6e8;color:#391272;font-size:.78rem;font-weight:800}.premium-service-card>a span{display:grid;width:34px;height:34px;place-items:center;border:1px solid #dad2e8;border-radius:50%;transition:.25s}.premium-service-card:hover>a span{transform:rotate(45deg);background:var(--card);color:#fff}.card-shopify{--card:#168653}.card-wordpress{--card:#1676b8}.card-ai{--card:#6d28d9}.card-erp{--card:#d97706}.card-commerce{--card:#be185d}.card-web{--card:#4f46e5}
.service-detail{padding:clamp(5rem,8vw,7.5rem) max(20px,calc((100vw - 1200px)/2));background:#fff}.service-detail:nth-of-type(even){background:#f0f0eb}.detail-grid{display:grid;grid-template-columns:.8fr 1.2fr;align-items:start;gap:clamp(2.5rem,7vw,7rem)}.detail-copy h2{margin:.75rem 0 1.1rem;font-size:clamp(2.4rem,4.5vw,4.8rem);font-weight:560;line-height:.98;letter-spacing:-.06em}.detail-copy>p{color:#606873;line-height:1.75}.detail-copy .who{margin-top:1.25rem;padding:1rem;border-left:3px solid var(--sp-purple);background:#f5f1ff;color:#45404d;font-size:.82rem}.detail-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}.detail-points article{min-height:160px;padding:1.15rem;border:1px solid #dfe1e5;border-radius:20px;background:#fff}.detail-points b{display:block;margin-bottom:.55rem;font-size:.88rem}.detail-points p{margin:0;color:#69717b;font-size:.76rem;line-height:1.55}.detail-proof{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1rem;padding:1rem 1.2rem;border:1px solid #ddd7e9;border-radius:18px;background:#faf8ff}.detail-proof p{margin:0;color:#595361;font-size:.79rem}.detail-proof a,.detail-copy>a{display:inline-flex;align-items:center;gap:.7rem;color:#5820b9;font-size:.78rem;font-weight:800}.detail-copy>a{margin-top:1.5rem;padding:.8rem 1rem;border:1px solid #cfc2e8;border-radius:999px}
.workflow-example{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin-top:1rem}.workflow-example div{position:relative;padding:1rem;border:1px solid #ddd8e7;border-radius:17px;background:#faf8ff}.workflow-example div:not(:last-child):after{content:"→";position:absolute;z-index:2;right:-.7rem;top:50%;color:#6d28d9;font-weight:900}.workflow-example small{color:#6d28d9;font-weight:850}.workflow-example b{display:block;margin-top:.45rem;font-size:.78rem}
.services-faq{padding:clamp(5rem,9vw,8rem) max(20px,calc((100vw - 1200px)/2));background:#edece7}.services-faq-head{display:grid;grid-template-columns:.7fr 1.3fr;gap:3rem;margin-bottom:2.5rem}.services-faq h2{margin:0;font-size:clamp(2.7rem,5vw,5rem);line-height:.98;letter-spacing:-.06em}.services-faq-list{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}.services-faq details{border:1px solid #dadce0;border-radius:18px;background:#fff}.services-faq summary{padding:1.1rem;font-size:.94rem}.services-faq details p{padding:0 1.1rem 1.1rem;font-size:.82rem;line-height:1.65}
.services-final{position:relative;overflow:hidden;padding:clamp(5rem,9vw,8rem) max(20px,calc((100vw - 1200px)/2));background:linear-gradient(145deg,#160d25,#48169b 60%,#6d28d9);color:#fff}.services-final:after{content:"";position:absolute;width:560px;height:560px;right:-170px;bottom:-310px;border:1px solid #ffffff25;border-radius:50%;box-shadow:0 0 0 80px #ffffff08,0 0 0 160px #ffffff05}.services-final-in{position:relative;z-index:2;display:grid;grid-template-columns:1.3fr .7fr;align-items:end;gap:3rem}.services-final h2{max-width:850px;margin:.7rem 0 1.2rem;font-size:clamp(3rem,6vw,6.5rem);font-weight:540;line-height:.93;letter-spacing:-.07em}.services-final p{max-width:730px;color:#ddd4e9;line-height:1.7}.services-final .services-actions{justify-content:flex-end}
.service-select-form{display:grid;gap:.7rem;padding:1.2rem;border:1px solid #ffffff29;border-radius:22px;background:#120b20a8;backdrop-filter:blur(14px)}.service-select-form label{color:#d6cce2;font-size:.65rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.service-select-form select{width:100%;min-height:48px;padding:0 .9rem;border:1px solid #ffffff32;border-radius:13px;background:#ffffff10;color:#fff;font:inherit;font-size:.82rem}.service-select-form select option{background:#191121;color:#fff}.service-select-form .services-actions{margin-top:.25rem}.service-select-form button{display:inline-flex;width:100%;min-height:52px;align-items:center;justify-content:space-between;gap:.8rem;padding:.8rem 1rem .8rem 1.1rem;border:0;border-radius:999px;background:var(--sp-lime);color:#111318;font:inherit;font-size:.78rem;font-weight:800;cursor:pointer}.service-select-form button span{display:grid;width:30px;height:30px;place-items:center;border-radius:50%;background:#111318;color:#fff}
.premium-services .site-footer{margin-top:0}
@media(max-width:980px){.services-hero-in{grid-template-columns:1fr}.systems-visual{min-height:480px}.premium-service-grid{grid-template-columns:repeat(2,1fr)}.hub-heading,.services-faq-head{grid-template-columns:1fr}.detail-grid{grid-template-columns:1fr}.services-final-in{grid-template-columns:1fr}.services-final .services-actions{justify-content:flex-start}}
@media(max-width:680px){.content-theme.premium-services .site-header{top:10px;width:calc(100% - 20px)}.services-hero{min-height:760px;padding-top:120px;padding-bottom:60px}.services-hero-banner img{object-position:62% center}.services-hero:after{background:linear-gradient(180deg,#13092575 0%,#160b30b8 36%,#080a11f5 72%),linear-gradient(90deg,#6d28d94f,transparent)}.services-hero-in{align-items:end;min-height:580px}.services-hero h1{font-size:clamp(3rem,14vw,4.35rem)}.services-actions{align-items:stretch;flex-direction:column}.services-actions a{width:100%;justify-content:space-between}.hub-heading{gap:.5rem}.hub-heading h2{font-size:2.65rem}.premium-service-grid{grid-template-columns:1fr}.premium-service-card{min-height:380px}.detail-points{grid-template-columns:1fr}.detail-points article{min-height:0}.detail-proof{align-items:flex-start;flex-direction:column}.workflow-example{grid-template-columns:1fr 1fr}.workflow-example div:not(:last-child):after{display:none}.services-faq-list{grid-template-columns:1fr}.services-final h2{font-size:3.2rem}}
@media(max-width:360px){.services-hero h1{font-size:2.75rem}.workflow-example{grid-template-columns:1fr}.systems-visual{min-height:300px}.service-float{transform:scale(.88)}}
@media(prefers-reduced-motion:reduce){.service-float{animation:none}.premium-service-card,.services-actions a{transition:none}}

/* Light editorial services landing: the services themselves are the visual focus. */
.content-theme.premium-services{background:#f5f5f1;color:#111318}
.content-theme.premium-services .site-header{position:sticky;top:10px;right:auto;left:auto;transform:none;width:min(calc(100% - 28px),1320px);margin:10px auto 0;border-color:#ffffffc4;background:#ffffffd9;color:#111318;box-shadow:0 15px 50px #2d174019}
.premium-services .site-header .identity,.premium-services .site-header .site-navigation a{color:#4d5560}.premium-services .site-header .identity-icon{background-image:url('assets/devbyhaseeb-logo-dark.png')}.premium-services .site-header .nav-quote{border-color:#d9cbed;background:#fff;color:#111318}.premium-services .site-header .nav-quote:hover{background:#6d28d9;color:#fff}
.services-hero{min-height:0;margin-top:-88px;padding:clamp(10rem,15vw,13rem) max(20px,calc((100vw - 1200px)/2)) clamp(4.5rem,8vw,7rem);background:radial-gradient(circle at 88% 22%,#8b5cf626,transparent 28%),radial-gradient(circle at 8% 92%,#c9ff3d2b,transparent 25%),linear-gradient(180deg,#fbfaff,#f5f5f1);color:#111318}
.services-hero:after{inset:auto -8rem -16rem auto;width:35rem;height:35rem;border:1px solid #6d28d91e;border-radius:50%;background:transparent;box-shadow:0 0 0 5rem #6d28d908,0 0 0 10rem #6d28d905;animation:servicesOrbit 12s ease-in-out infinite}.services-hero:before{inset:0;background-image:linear-gradient(#6d28d908 1px,transparent 1px),linear-gradient(90deg,#6d28d908 1px,transparent 1px);mask-image:linear-gradient(90deg,#0009,transparent 78%)}
@keyframes servicesOrbit{50%{transform:translate3d(-22px,-18px,0) scale(1.06)}}
.services-hero-in{grid-template-columns:minmax(0,900px)}.services-eyebrow{color:#6d28d9}.services-eyebrow:before{background:#6d28d9;box-shadow:0 0 0 7px #6d28d912}.services-hero h1{max-width:900px;color:#111318}.services-hero h1 span{color:#6d28d9}.services-hero-copy>p:not(.services-eyebrow):not(.services-byline){max-width:760px;color:#626b75}.services-byline{color:#747b85!important}
.premium-services main .services-actions a{color:#17131d;text-decoration:none}.premium-services main .services-actions a:first-child{background:#6d28d9;color:#fff}.services-actions a:first-child span{background:#fff;color:#6d28d9}.premium-services main .services-actions a:last-child{border-color:#d9d1e3;background:#fff;color:#17131d}.services-actions a:hover{transform:translateY(-4px);box-shadow:0 14px 35px #3812671c}
.service-hub{padding-top:clamp(4.5rem,8vw,7rem);background:radial-gradient(circle at 100% 0,#7c3aed11,transparent 28%),#f5f5f1}.premium-service-card{isolation:isolate}.premium-service-card:after{content:"";position:absolute;z-index:-1;right:-70px;bottom:-100px;width:220px;height:220px;border-radius:50%;background:var(--card);opacity:.055;transform:scale(.6);transition:.45s}.premium-service-card:hover:after{opacity:.13;transform:scale(1)}
.service-detail{position:relative;overflow:hidden}.service-detail:before{content:"";position:absolute;right:-110px;top:30px;width:230px;height:230px;border:1px solid #6d28d915;border-radius:50%;pointer-events:none}.detail-points article{transition:transform .3s,border-color .3s,box-shadow .3s}.detail-points article:hover{transform:translateY(-4px);border-color:#bda9e3;box-shadow:0 18px 40px #32145112}.detail-copy>a:hover,.detail-proof a:hover{color:#6d28d9;text-decoration-color:currentColor}
.page-reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease var(--reveal-delay,0ms),transform .7s cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms)}.page-reveal.is-visible{opacity:1;transform:none}
@media(max-width:680px){.content-theme.premium-services .site-header{top:8px;width:calc(100% - 20px);margin-top:8px}.services-hero{margin-top:-78px;padding-top:9.2rem;padding-bottom:4rem}.services-hero-in{min-height:0}.services-hero h1{font-size:clamp(2.8rem,13vw,4rem)}.services-hero:after{right:-20rem}.premium-service-card{min-height:360px}}
@media(prefers-reduced-motion:reduce){.services-hero:after{animation:none}.page-reveal{opacity:1;transform:none;transition:none}}
.service-mini{position:relative;display:grid;grid-template-columns:repeat(3,1fr);align-items:end;gap:5px;height:72px;overflow:hidden;margin-top:1rem;padding:13px;border:1px solid color-mix(in srgb,var(--card) 18%,#e3e3e8);border-radius:15px;background:linear-gradient(145deg,color-mix(in srgb,var(--card) 8%,white),#fafafa)}.service-mini:before{content:"";position:absolute;left:12px;right:12px;top:10px;height:4px;border-radius:5px;background:linear-gradient(90deg,var(--card) 0 18%,#dfe1e5 18% 45%,transparent 45%)}.service-mini span{height:22px;border-radius:5px;background:color-mix(in srgb,var(--card) 18%,white)}.service-mini span:nth-child(2){height:34px}.service-mini span:nth-child(3){height:44px}.service-mini i{position:absolute;left:13px;right:13px;bottom:9px;height:2px;background:var(--card);opacity:.5}.premium-service-card h3{margin-top:1.25rem}
.service-banner{position:relative;isolation:isolate;aspect-ratio:90/38;overflow:hidden;margin:1rem 0 0;border:1px solid color-mix(in srgb,var(--card) 20%,#e3e3e8);border-radius:16px;background:color-mix(in srgb,var(--card) 7%,white)}.service-banner:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,color-mix(in srgb,var(--card) 12%,transparent));pointer-events:none}.service-banner img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.7,.2,1),filter .4s}.premium-service-card:hover .service-banner img{transform:scale(1.055);filter:saturate(1.06)}.premium-service-card h3{margin-top:1.25rem}
@media(max-width:680px){.service-banner{border-radius:14px}.premium-service-card:hover .service-banner img{transform:none}}
@media(prefers-reduced-motion:reduce){.service-banner img{transition:none}}