/* =====================================================================
   SERVICES PAGE REDESIGN (prefix sv-)   colours = Ninja Coding Pro logo
   ===================================================================== */
.sv-page{--blue:#0ABAEA;--blue-l:#38D4FF;--blue-d:#0691B8;--ink:#0B1A26;--text:#556172;--soft:#F0FAFE;
  font-family:"Nunito",sans-serif;color:var(--ink);overflow-x:clip;}
.sv-page *{box-sizing:border-box;}
.sv-page h1,.sv-page h2,.sv-page h3,.sv-page p{font-family:inherit;margin:0;}
.sv-page a{text-decoration:none;}
.sv-wrap{max-width:1240px;margin:0 auto;padding:0 24px;position:relative;z-index:2;}
.sv-grid{position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(10,186,234,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(10,186,234,.09) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 80% 75% at 50% 45%,#000 15%,transparent 78%);mask-image:radial-gradient(ellipse 80% 75% at 50% 45%,#000 15%,transparent 78%);animation:svGrid 24s linear infinite;}
@keyframes svGrid{to{background-position:64px 64px,64px 64px;}}
.sv-dots{position:absolute;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(rgba(10,186,234,.22) 1.4px,transparent 1.6px);background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse 85% 80% at 50% 40%,#000 10%,transparent 75%);mask-image:radial-gradient(ellipse 85% 80% at 50% 40%,#000 10%,transparent 75%);}
.sv-glow{position:absolute;z-index:0;border-radius:50%;pointer-events:none;filter:blur(20px);animation:svPulse 8s ease-in-out infinite;}
.sv-glow.g1{width:560px;height:560px;right:-150px;top:-180px;background:radial-gradient(circle,rgba(10,186,234,.4),rgba(10,186,234,0) 68%);}
.sv-glow.g2{width:480px;height:480px;left:-170px;bottom:-240px;background:radial-gradient(circle,rgba(10,186,234,.22),rgba(10,186,234,0) 70%);animation-delay:-3s;}
@keyframes svPulse{0%,100%{transform:scale(1);opacity:.9;}50%{transform:scale(1.16);opacity:.55;}}
.sv-icons{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
.sv-icons i{position:absolute;left:var(--x);top:var(--y);width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font-size:22px;color:rgba(56,212,255,.55);background:rgba(10,186,234,.06);border:1px solid rgba(10,186,234,.2);animation:svIco var(--t,10s) ease-in-out infinite;animation-delay:var(--d,0s);}
@keyframes svIco{0%,100%{transform:translateY(0) rotate(0);}50%{transform:translateY(-24px) rotate(9deg);}}

.sv-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:40px;background:rgba(10,186,234,.12);color:var(--blue-d);font-weight:800;font-size:13px;letter-spacing:.09em;text-transform:uppercase;}
.sv-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px rgba(10,186,234,.2);}
.sv-eyebrow i{display:none;}
.sv-hero .sv-eyebrow{background:rgba(10,186,234,.16);color:var(--blue-l);border:1px solid rgba(10,186,234,.4);}
.sv-hero .sv-eyebrow::before{display:none;}
.sv-hero .sv-eyebrow i{display:inline;}

.sv-btn{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;border-radius:50px;font-weight:800;font-size:16px;transition:.3s;border:2px solid transparent;cursor:pointer;}
.sv-btn-p{background:linear-gradient(135deg,#12C6F5,#0691B8);color:#fff;box-shadow:0 12px 28px rgba(10,186,234,.4);}
.sv-btn-p:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(10,186,234,.55);color:#fff;}
.sv-btn-g{background:rgba(255,255,255,.06);border-color:rgba(10,186,234,.5);color:#fff;}
.sv-btn-g:hover{background:rgba(10,186,234,.18);color:#fff;transform:translateY(-3px);}
.sv-btn i{transition:transform .3s;}
.sv-btn:hover i{transform:translateX(4px);}

.sv-rv{opacity:0;transform:translateY(38px);transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .8s cubic-bezier(.2,.7,.2,1) var(--d,0s);}
.sv-rv.in{opacity:1;transform:none;}
.no-js .sv-rv{opacity:1;transform:none;}

/* HERO */
.sv-hero{position:relative;overflow:hidden;color:#fff;text-align:center;padding:190px 0 170px;background:radial-gradient(ellipse 70% 90% at 15% 0%,#03293f 0%,#000612 62%);clip-path:polygon(0 0,100% 0,100% calc(100% - 60px),0 100%);}
.sv-hero-in{max-width:900px;}
.sv-h1{margin:22px 0 0 !important;font-size:56px;line-height:1.1;font-weight:900;color:#fff;letter-spacing:-.01em;}
.sv-h1 span{background:linear-gradient(90deg,#12C6F5,#8EEAFF);-webkit-background-clip:text;background-clip:text;color:transparent;}
.sv-lead{margin:22px auto 0 !important;max-width:680px;font-size:19px;line-height:1.7;color:rgba(255,255,255,.78);}
.sv-cta-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:36px;}
.sv-chips{list-style:none;margin:40px 0 0;padding:0;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.sv-chips li{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:40px;background:rgba(255,255,255,.06);border:1px solid rgba(10,186,234,.3);font-size:14px;font-weight:700;color:#DDF6FF;}
.sv-chips i{color:var(--blue-l);}

/* headings */
.sv-head{text-align:center;max-width:760px;margin:0 auto 56px;}
.sv-title{margin-top:16px !important;font-size:44px;line-height:1.14;font-weight:800;color:var(--ink);}
.sv-title span{background:linear-gradient(90deg,var(--blue),var(--blue-d));-webkit-background-clip:text;background-clip:text;color:transparent;}
.sv-sub{margin-top:16px !important;color:var(--text);font-size:17px;line-height:1.7;}

/* SERVICES */
.sv-services{position:relative;padding:110px 0 120px;background:linear-gradient(180deg,#fff,var(--soft));}
.sv-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.sv-card{position:relative;display:flex;flex-direction:column;padding:38px 32px 32px;border-radius:26px;background:#fff;color:var(--text);border:1px solid rgba(10,186,234,.22);box-shadow:0 14px 40px rgba(6,40,60,.07);overflow:hidden;transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .4s;}
.sv-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--blue),#8EEAFF);transform:scaleX(0);transform-origin:left;transition:transform .5s;}
.sv-card:hover{transform:translateY(-10px);border-color:rgba(10,186,234,.6);box-shadow:0 28px 60px rgba(10,186,234,.25);}
.sv-card:hover::before{transform:scaleX(1);}
.sv-num{position:absolute;right:26px;top:20px;font-size:54px;font-weight:900;line-height:1;color:rgba(10,186,234,.1);transition:.4s;}
.sv-card:hover .sv-num{color:rgba(10,186,234,.25);}
.sv-ico{display:grid;place-items:center;width:68px;height:68px;border-radius:20px;background:linear-gradient(135deg,rgba(10,186,234,.16),rgba(10,186,234,.04));border:1px solid rgba(10,186,234,.35);color:var(--blue-d);font-size:28px;transition:.4s;}
.sv-card:hover .sv-ico{background:linear-gradient(135deg,#12C6F5,#0691B8);color:#fff;transform:rotate(-6deg) scale(1.06);box-shadow:0 12px 26px rgba(10,186,234,.45);}
.sv-card h3{margin:24px 0 12px !important;font-size:24px;line-height:1.25;font-weight:800;color:var(--ink);}
.sv-card p{font-size:16px;line-height:1.7;color:var(--text);flex-grow:1;}
.sv-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;}
.sv-tags em{font-style:normal;font-size:12.5px;font-weight:700;padding:5px 12px;border-radius:30px;background:var(--soft);color:var(--blue-d);border:1px solid rgba(10,186,234,.25);}
.sv-more{display:inline-flex;align-items:center;gap:10px;margin-top:24px;font-weight:800;color:var(--ink);transition:.3s;}
.sv-more i{color:var(--blue);transition:transform .3s;}
.sv-card:hover .sv-more{color:var(--blue-d);}
.sv-card:hover .sv-more i{transform:translateX(6px);}
/* AI featured card */
.sv-card-ai{background:radial-gradient(ellipse 90% 80% at 0% 0%,#04324d,#000612 70%);border-color:rgba(10,186,234,.5);box-shadow:0 22px 54px rgba(10,186,234,.28);}
.sv-card-ai h3,.sv-card-ai .sv-more,.sv-card-ai:hover .sv-more{color:#fff;}
.sv-card-ai p{color:rgba(255,255,255,.78);}
.sv-card-ai .sv-ico{background:linear-gradient(135deg,#12C6F5,#0691B8);color:#fff;border-color:transparent;margin-top:14px;}
.sv-card-ai .sv-num{color:rgba(10,186,234,.22);}
.sv-card-ai .sv-tags em{background:rgba(10,186,234,.14);color:#DDF6FF;border-color:rgba(10,186,234,.4);}
.sv-card-ai .sv-more i{color:var(--blue-l);}
.sv-badge{position:absolute;left:32px;top:-1px;display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:0 0 12px 12px;background:linear-gradient(135deg,#12C6F5,#0691B8);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;}

/* PROCESS */
.sv-process{position:relative;overflow:hidden;color:#fff;background:radial-gradient(ellipse 70% 90% at 85% 0%,#03293f 0%,#000612 62%);clip-path:polygon(0 60px,100% 0,100% 100%,0 100%);margin-top:-60px;padding:170px 0 130px;}
.sv-process .sv-title{color:#fff;}
.sv-process .sv-sub{color:rgba(255,255,255,.72);}
.sv-process .sv-eyebrow{background:rgba(10,186,234,.16);color:var(--blue-l);}
.sv-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;}
.sv-steps::before{content:"";position:absolute;left:12%;right:12%;top:68px;height:2px;background:repeating-linear-gradient(90deg,rgba(10,186,234,.6) 0 8px,transparent 8px 16px);}
.sv-step{position:relative;text-align:center;padding:34px 22px 30px;border-radius:24px;background:rgba(255,255,255,.05);border:1px solid rgba(10,186,234,.25);transition:.4s;}
.sv-step:hover{transform:translateY(-8px);border-color:rgba(10,186,234,.65);background:rgba(10,186,234,.1);}
.sv-step .sv-ico{margin:0 auto;background:linear-gradient(135deg,#12C6F5,#0691B8);color:#fff;border-color:transparent;position:relative;z-index:1;}
.sv-step-n{position:absolute;right:18px;top:14px;font-size:38px;font-weight:900;color:rgba(10,186,234,.22);line-height:1;}
.sv-step h3{margin:22px 0 10px !important;font-size:21px;font-weight:800;color:#fff;}
.sv-step p{font-size:15.5px;line-height:1.65;color:rgba(255,255,255,.72);}

/* CTA */
.sv-final{padding:100px 0 110px;background:#fff;}
.sv-final-box{position:relative;overflow:hidden;text-align:center;padding:80px 40px;border-radius:34px;color:#fff;background:radial-gradient(ellipse 80% 100% at 15% 0%,#04324d,#000612 70%);border:1px solid rgba(10,186,234,.35);box-shadow:0 30px 70px rgba(10,186,234,.22);}
.sv-final-box>*:not(.sv-grid):not(.sv-glow){position:relative;z-index:2;}
.sv-final-box h2{font-size:46px;font-weight:900;color:#fff;line-height:1.15;}
.sv-final-box h2 span{background:linear-gradient(90deg,#12C6F5,#8EEAFF);-webkit-background-clip:text;background-clip:text;color:transparent;}
.sv-final-box p{max-width:600px;margin:18px auto 32px !important;font-size:18px;line-height:1.7;color:rgba(255,255,255,.78);}

@media(max-width:1024px){
  .sv-h1{font-size:44px;}
  .sv-cards{grid-template-columns:repeat(2,1fr);}
  .sv-steps{grid-template-columns:repeat(2,1fr);}
  .sv-steps::before{display:none;}
  .sv-title,.sv-final-box h2{font-size:36px;}
}
@media(max-width:640px){
  .sv-hero{padding:130px 0 120px;clip-path:polygon(0 0,100% 0,100% calc(100% - 34px),0 100%);}
  .sv-h1{font-size:34px;}
  .sv-lead{font-size:16.5px;}
  .sv-icons i:nth-child(n+3){display:none;}
  .sv-btn{padding:13px 24px;font-size:15px;}
  .sv-services{padding:70px 0 80px;}
  .sv-cards,.sv-steps{grid-template-columns:1fr;}
  .sv-title,.sv-final-box h2{font-size:29px;}
  .sv-process{padding:120px 0 80px;clip-path:polygon(0 34px,100% 0,100% 100%,0 100%);margin-top:-34px;}
  .sv-final{padding:60px 0 70px;}
  .sv-final-box{padding:50px 22px;border-radius:26px;}
}
@media(prefers-reduced-motion:reduce){.sv-grid,.sv-glow,.sv-icons i{animation:none;}.sv-rv{opacity:1;transform:none;transition:none;}}
