/* SAPNON global polish: tighter rhythm, responsive layouts, rich homepage-matched colour */
:root{
  --sap-ink:#101a35;--sap-ink-2:#17264a;--sap-muted:#53627d;--sap-line:#dce4f2;
  --sap-blue:#3d6dff;--sap-violet:#655fe0;--sap-purple:#a34dff;--sap-cyan:#18a9c4;
  --sap-gradient:linear-gradient(115deg,#514fe0 0%,#3d6dff 55%,#963ee8 115%);
}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{color:var(--sap-ink);overflow-x:clip}
img,svg,video,iframe{max-width:100%}
.wrap{width:min(1160px,calc(100% - 40px))}
.header{box-shadow:0 5px 20px rgba(20,35,75,.045)}
.nav{min-height:72px;height:auto;padding-top:9px;padding-bottom:9px}
.navlinks{gap:clamp(14px,2vw,25px)}
.nav-cta,.btn-primary{background:var(--sap-gradient)!important;color:#fff!important;box-shadow:0 9px 24px rgba(61,91,220,.24)}
.nav-cta:hover,.btn-primary:hover{filter:saturate(1.12);box-shadow:0 13px 30px rgba(61,91,220,.32)}
.eyebrow,.text-link{color:#4b57d8}
h1,h2,h3,h4{color:var(--sap-ink)}
.section{padding:clamp(44px,5vw,62px) 0}
.section-head{margin-bottom:clamp(20px,2.8vw,29px);gap:18px}
.section-head h2,.page-hero h1{color:var(--sap-ink)}
.cards{gap:15px}
.card{padding:21px;border-color:#dce4f2;box-shadow:0 8px 24px rgba(26,44,91,.055)}
.card:hover{border-color:rgba(78,91,220,.38);box-shadow:0 15px 32px rgba(26,44,91,.10)}
.card h3{color:#17264a}
.card p,.section-head p,.lead{color:#53627d}
.service-icon{background:var(--sap-gradient);color:#fff;box-shadow:0 8px 20px rgba(61,91,220,.23)}
.page-hero{padding:clamp(40px,5vw,58px) 0 clamp(28px,3vw,38px);background:radial-gradient(ellipse at 84% 12%,rgba(163,77,255,.10),transparent 36%),linear-gradient(135deg,#f8faff,#fff 72%)}
.page-hero p:not(.eyebrow){color:#53627d}
.hero{padding:clamp(58px,6.5vw,76px) 0 clamp(48px,5.5vw,64px)}
.hero-grid{gap:clamp(28px,4vw,48px)}
.hero h1{letter-spacing:-.045em}
.hero h1 em{color:#514fe0}
.section-soft{background:linear-gradient(180deg,#f5f7ff,#fff)}
.split{gap:clamp(28px,4vw,48px)}
.stats{gap:14px;margin-top:24px}
.footer-cta{padding:clamp(30px,4vw,46px) 0;background:var(--sap-gradient)!important}
.footer-cta h2,.footer-cta p{color:#fff}
.footer{background:#111a35;color:#e8edff}
.footer a:hover{color:#aebaff}
.footer-bottom{gap:12px}
.service-detail-section,.library-page,.portfolio-page{padding-top:clamp(38px,5vw,58px)!important;padding-bottom:clamp(42px,5vw,62px)!important}
.services-hero-inner{min-height:0!important;padding-top:clamp(42px,5vw,62px)!important;padding-bottom:clamp(38px,4.5vw,54px)!important}
.service-list-section{padding-top:clamp(40px,4.5vw,56px)!important;padding-bottom:clamp(42px,4.5vw,58px)!important}
.service-section-head{margin-bottom:22px!important;gap:18px!important}
.service-cards{gap:14px!important}
.service-card{min-height:220px!important;padding:20px!important}
.service-card-top{margin-bottom:16px!important}
.service-card>p{margin-bottom:14px!important;line-height:1.65!important}
.service-bottom-cta{padding:38px 0!important}
.library-heading{gap:22px!important;padding-bottom:20px!important}
.library-grid,.portfolio-grid{gap:15px!important}
.portfolio-heading{margin-bottom:26px!important}
.contact-page,.contact-section{padding-top:clamp(34px,4vw,48px)!important;padding-bottom:clamp(38px,4.5vw,54px)!important}
.prose h2{margin-top:25px}
.prose p{margin:0 0 12px}
.faq-section,.sapnon-faq-section{padding:38px 0!important}
.faq-grid{gap:12px!important}
button,a,input,select,textarea{ -webkit-tap-highlight-color:transparent }
button,.btn,.primary,.button-link{min-height:42px}
input,select,textarea{max-width:100%}
table{border-collapse:collapse}
@media(max-width:900px){
 .navlinks{gap:14px}
 .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}
 .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
 .section-head{align-items:flex-start}
}
@media(max-width:767px){
 html{scroll-padding-top:76px}
 .wrap{width:calc(100% - 32px)}
 .nav{min-height:66px}
 .navlinks{gap:0}
 .hero{padding:42px 0 38px}
 .hero-grid{grid-template-columns:1fr;gap:24px}
 .hero h1{font-size:clamp(36px,10vw,52px);letter-spacing:-.045em;margin-bottom:15px}
 .hero p,.lead{font-size:15px;line-height:1.65}
 .actions{gap:9px;margin-top:20px}
 .section{padding:34px 0}
 .section-head{display:block;margin-bottom:18px}
 .section-head h2,.page-hero h1{font-size:clamp(27px,7.5vw,36px);line-height:1.13}
 .section-head p{margin-top:9px;font-size:13px;line-height:1.65}
 .cards{grid-template-columns:1fr;gap:12px}
 .card{padding:18px;border-radius:15px}
 .card h3{font-size:18px}
 .card p{font-size:13px;line-height:1.65}
 .split{grid-template-columns:1fr;gap:20px}
 .split-visual{min-height:230px;padding:22px}
 .stats{gap:12px;margin-top:18px}
 .stat{padding-left:12px}
 .stat strong{font-size:25px}
 .page-hero{padding:34px 0 24px}
 .page-hero p:not(.eyebrow){font-size:14px;line-height:1.65}
 .services-hero-inner{grid-template-columns:1fr!important;gap:18px!important;padding:34px 0 28px!important}
 .services-hero h1{font-size:clamp(34px,9vw,46px)!important}
 .services-orbit-stage{max-width:310px}
 .service-list-section{padding:32px 0!important}
 .service-cards{grid-template-columns:1fr!important;gap:12px!important}
 .service-card{min-height:0!important;padding:18px!important}
 .service-section-head{display:block!important;margin-bottom:18px!important}
 .service-section-head>p{margin-top:8px}
 .service-bottom-cta{padding:30px 0!important}
 .service-bottom-inner{align-items:flex-start;flex-direction:column;gap:16px}
 .library-page,.portfolio-page{padding:34px 0 42px!important}
 .library-wrap,.portfolio-wrap{width:calc(100% - 32px)!important}
 .library-heading{display:block!important;padding-bottom:16px!important}
 .portfolio-heading{margin-bottom:20px!important}
 .portfolio-grid{grid-template-columns:1fr!important;gap:12px!important}
 .contact-page,.contact-section{padding:30px 0 38px!important}
 .footer-cta{padding:28px 0!important}
 .footer-cta-inner{gap:15px}
 .footer-grid{gap:22px}
 .footer-bottom{flex-direction:column;align-items:flex-start}
 .sapnon-faq-section{padding:28px 0!important}
}
@media(max-width:380px){
 .wrap,.library-wrap,.portfolio-wrap{width:calc(100% - 26px)!important}
 .btn{width:100%;justify-content:center}
 .actions{flex-direction:column;align-items:stretch}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}


.content-detail{padding:42px 0 54px!important}
.content-detail-wrap{max-width:900px}
.content-detail-head{margin:20px 0 22px}
.content-detail-head h1{font-size:clamp(34px,5vw,54px);line-height:1.08;letter-spacing:-.045em;margin:0 0 13px}
.content-detail-meta{font-size:13px;color:#53627d}
.content-detail-cover{width:100%;max-height:480px;object-fit:cover;border-radius:20px;margin:22px 0;box-shadow:0 18px 45px rgba(25,43,90,.12)}
.content-detail-body{font-size:16px;line-height:1.8;color:#35435e;overflow-wrap:anywhere}
.content-detail-body h2{font-size:clamp(23px,3vw,30px);margin:28px 0 10px;color:#17264a}
.content-detail-body p{margin:0 0 15px}
.content-detail-body img{border-radius:14px;margin:18px auto}
.content-detail-results{margin:26px 0;padding:20px;border:1px solid #dce4f2;border-radius:16px;background:linear-gradient(135deg,#f4f6ff,#fff)}
.content-detail-results h2{margin:0 0 8px}
.content-detail-results p{margin:0;color:#46536b;line-height:1.7}
.content-detail-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin:22px 0}
.content-detail-gallery img{width:100%;height:220px;object-fit:cover;border-radius:14px}
@media(max-width:650px){.content-detail{padding:30px 0 38px!important}.content-detail-head{margin:15px 0}.content-detail-head h1{font-size:34px}.content-detail-body{font-size:14px;line-height:1.7}.content-detail-gallery{grid-template-columns:1fr}.content-detail-gallery img{height:auto;max-height:280px}}

/* Keep every internal section on the homepage's indigo / electric-blue / violet family */
.service-card:nth-child(6n+1){--service-accent:#4f5fe8;--service-tint:rgba(79,95,232,.13)}
.service-card:nth-child(6n+2){--service-accent:#3476ed;--service-tint:rgba(52,118,237,.13)}
.service-card:nth-child(6n+3){--service-accent:#7650dc;--service-tint:rgba(118,80,220,.13)}
.service-card:nth-child(6n+4){--service-accent:#963fe4;--service-tint:rgba(150,63,228,.13)}
.service-card:nth-child(6n+5){--service-accent:#168fca;--service-tint:rgba(22,143,202,.13)}
.service-card:nth-child(6n){--service-accent:#5554d9;--service-tint:rgba(85,84,217,.13)}
.services-orbit-stage .services-orbit-item:nth-child(6n+1) span{--orbit-accent:#4f5fe8;--orbit-wash:rgba(79,95,232,.13)}
.services-orbit-stage .services-orbit-item:nth-child(6n+2) span{--orbit-accent:#3476ed;--orbit-wash:rgba(52,118,237,.13)}
.services-orbit-stage .services-orbit-item:nth-child(6n+3) span{--orbit-accent:#7650dc;--orbit-wash:rgba(118,80,220,.13)}
.services-orbit-stage .services-orbit-item:nth-child(6n+4) span{--orbit-accent:#963fe4;--orbit-wash:rgba(150,63,228,.13)}
.services-orbit-stage .services-orbit-item:nth-child(6n+5) span{--orbit-accent:#168fca;--orbit-wash:rgba(22,143,202,.13)}
.services-orbit-stage .services-orbit-item:nth-child(6n) span{--orbit-accent:#5554d9;--orbit-wash:rgba(85,84,217,.13)}
.library-page{background:radial-gradient(ellipse at 8% 0%,rgba(61,109,255,.12),transparent 34%),radial-gradient(ellipse at 96% 18%,rgba(163,77,255,.11),transparent 32%),#fff!important}
.portfolio-page{background:radial-gradient(ellipse at 88% 0%,rgba(163,77,255,.10),transparent 34%),radial-gradient(ellipse at 5% 15%,rgba(61,109,255,.09),transparent 32%),#fff!important}
.portfolio-kicker{color:#4d55d8!important;border-color:#d8defa!important;background:#f5f6ff!important}
.portfolio-open{background:var(--sap-gradient)!important}
.library-kicker,.library-page h1,.portfolio-page h1{color:#111a35}
.service-list-section{background:radial-gradient(ellipse at 100% 0%,rgba(163,77,255,.065),transparent 35%),linear-gradient(180deg,#f8f9ff,#fff)!important}
.service-card h3,.service-section-head h2{color:#111a35!important}

@media(max-width:767px){
 .service-detail-grid,.detail-grid{grid-template-columns:minmax(0,1fr)!important;gap:18px!important}
 .app-hero{grid-template-columns:minmax(0,1fr)!important;gap:18px!important}
 .app-screenshots{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
 .contact-grid,.contact-layout{grid-template-columns:minmax(0,1fr)!important;gap:16px!important}
}