/* Sharpix Premium Pages 3.0 — immersive motion and layout refinement */
:root {
  --sxpp-pointer-x: 72%;
  --sxpp-pointer-y: 34%;
}

.sxpp-header {
  position: sticky;
  top: 0;
  height: 92px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: rgba(2, 9, 6, .9);
}
.admin-bar .sxpp-header { top: 32px; }
.sxpp-header-inner { max-width: 1380px; }
.sxpp-logo img { width: 214px; }
.sxpp-nav { gap: clamp(13px, 1.4vw, 24px); }
.sxpp-nav a { font-size: .64rem; letter-spacing: .085em; position: relative; }
.sxpp-nav a::after { content:""; position:absolute; height:1px; left:0; right:100%; bottom:-10px; background:var(--sxpp-green); transition:right .28s ease; }
.sxpp-nav a:hover::after,.sxpp-nav a[aria-current="page"]::after { right:0; }
.sxpp-header-cta { padding:14px 16px; font-size:.63rem; }

.sxpp-main .sxpp-hero {
  min-height: min(850px, calc(100svh - 92px));
  padding: clamp(88px, 9vw, 142px) 0;
  background:
    radial-gradient(700px circle at var(--sxpp-pointer-x) var(--sxpp-pointer-y), color-mix(in srgb,var(--sxpp-accent) 15%,transparent), transparent 46%),
    linear-gradient(105deg,#020906 0%,#04130c 58%,color-mix(in srgb,var(--sxpp-accent) 6%,#06110c) 100%);
}
.sxpp-main .sxpp-hero-atmosphere { animation:sxppAtmosphere 12s ease-in-out infinite alternate; }
.sxpp-main .sxpp-hero-atmosphere::after { content:""; position:absolute; width:46vw; height:46vw; min-width:520px; min-height:520px; right:-12vw; bottom:-31vw; border:1px solid color-mix(in srgb,var(--sxpp-accent) 18%,transparent); border-radius:42% 58% 62% 38%; animation:sxppContour 18s linear infinite; box-shadow:0 0 0 70px color-mix(in srgb,var(--sxpp-accent) 2.5%,transparent),0 0 0 145px color-mix(in srgb,var(--sxpp-accent) 1.8%,transparent); }
@keyframes sxppAtmosphere { to { opacity:.58; transform:scale(1.04) translate3d(-1.5%,1%,0); } }
@keyframes sxppContour { to { transform:rotate(360deg); } }

.sxpp-main .sxpp-hero-grid { width:min(1380px,calc(100% - 72px)); grid-template-columns:minmax(0,1fr) minmax(430px,.9fr); gap:clamp(60px,8vw,130px); }
.sxpp-main .sxpp-hero-copy { max-width:720px; }
.sxpp-main .sxpp-hero h1 { text-wrap:balance; }
.sxpp-main .sxpp-hero .sxpp-lead { max-width:650px; }
.sxpp-main .sxpp-visual { min-height:520px; border:0; border-radius:0; background:transparent; box-shadow:none; overflow:visible; }
.sxpp-main .sxpp-visual::before { content:""; position:absolute; inset:8%; border-radius:48%; background:color-mix(in srgb,var(--sxpp-accent) 9%,transparent); filter:blur(55px); animation:sxppVisualPulse 6s ease-in-out infinite alternate; }
.sxpp-main .sxpp-visual::after { opacity:.08; }
@keyframes sxppVisualPulse { to { transform:scale(1.18) translate3d(2%,-2%,0); opacity:.55; } }

/* Each hero uses a different composition rather than one repeated frame. */
.sxpp-page--services .sxpp-hero-grid { grid-template-columns:.88fr 1.12fr; }
.sxpp-page--services .sxpp-visual { min-height:600px; }
.sxpp-page--remote-it-projects .sxpp-hero-grid { grid-template-columns:.8fr 1.2fr; }
.sxpp-page--remote-it-projects .sxpp-v-pipeline { transform:rotate(-3deg); }
.sxpp-page--industries .sxpp-hero-copy { grid-column:2; grid-row:1; }
.sxpp-page--industries .sxpp-visual { grid-column:1; grid-row:1; }
.sxpp-page--faq .sxpp-hero-grid { grid-template-columns:1.12fr .88fr; }
.sxpp-page--contact-us .sxpp-hero-grid { grid-template-columns:1.08fr .92fr; }
.sxpp-page--about-us { --sxpp-accent:#32ee83; }
.sxpp-page--about-us .sxpp-hero-grid { grid-template-columns:1.05fr .95fr; }

/* Open, layered service constellation. */
.sxpp-v-core { animation:sxppConstellation 16s ease-in-out infinite alternate; }
.sxpp-v-core strong { width:175px; height:175px; background:rgba(3,13,8,.92); box-shadow:0 0 0 34px rgba(50,238,131,.035),0 0 0 70px rgba(50,238,131,.018),0 0 90px rgba(50,238,131,.18); }
.sxpp-v-core span { width:120px; backdrop-filter:blur(12px); animation:sxppNode 5s ease-in-out infinite alternate; }
.sxpp-v-core span:nth-of-type(2n) { animation-delay:-2.5s; }
@keyframes sxppConstellation { to { transform:rotate(.8deg) scale(1.025); } }
@keyframes sxppNode { to { transform:translateY(-9px); border-color:rgba(50,238,131,.72); box-shadow:0 12px 35px rgba(50,238,131,.1); } }

/* Pipeline becomes a moving delivery path. */
.sxpp-v-pipeline { padding:35px 55px; }
.sxpp-v-pipeline article { position:relative; overflow:hidden; min-height:95px; background:linear-gradient(110deg,rgba(123,241,120,.03),rgba(123,241,120,.09)); box-shadow:0 25px 60px rgba(0,0,0,.2); }
.sxpp-v-pipeline article::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(123,241,120,.13),transparent); transform:translateX(-100%); animation:sxppScan 4.6s ease-in-out infinite; }
.sxpp-v-pipeline article:nth-of-type(2)::after { animation-delay:1.1s; }.sxpp-v-pipeline article:nth-of-type(3)::after { animation-delay:2.2s; }
.sxpp-v-pipeline>i { position:relative; }
.sxpp-v-pipeline>i::after { content:""; position:absolute; width:7px;height:7px;border-radius:50%;background:var(--sxpp-accent);left:-4px;top:0;box-shadow:0 0 14px var(--sxpp-accent);animation:sxppDrop 1.9s linear infinite; }
@keyframes sxppScan { 45%,100% { transform:translateX(100%); } }
@keyframes sxppDrop { to { top:100%; } }

/* Industries is a floating operational landscape. */
.sxpp-v-industries { perspective:1000px; }
.sxpp-v-industries>strong { color:#eafff6; letter-spacing:-.02em; }
.sxpp-v-industries span { min-height:135px; border-radius:18px; backdrop-filter:blur(14px); background:linear-gradient(145deg,rgba(139,213,255,.08),rgba(139,213,255,.02)); box-shadow:0 22px 50px rgba(0,0,0,.18); }
.sxpp-v-industries span:nth-child(1),.sxpp-v-industries span:nth-child(4) { transform:translateY(-12px); }
.sxpp-v-industries span:nth-child(2),.sxpp-v-industries span:nth-child(3) { transform:translateY(12px); }
.sxpp-v-industries span:hover { transform:translateY(-6px) rotateX(5deg) scale(1.025); }

/* About: all green, no chart and no ticket count. */
.sxpp-v-values { height:100%; display:grid; place-content:center; gap:38px; position:relative; }
.sxpp-values-orbit { width:430px; height:430px; position:relative; border:1px solid rgba(50,238,131,.18); border-radius:50%; display:grid; place-items:center; box-shadow:0 0 0 52px rgba(50,238,131,.022),0 0 0 105px rgba(50,238,131,.012); animation:sxppOrbitBreath 7s ease-in-out infinite alternate; }
.sxpp-values-orbit::before,.sxpp-values-orbit::after { content:""; position:absolute; border:1px dashed rgba(50,238,131,.27); border-radius:50%; inset:18%; animation:sxppOrbitSpin 22s linear infinite; }
.sxpp-values-orbit::after { inset:34%; animation-direction:reverse; animation-duration:15s; }
.sxpp-values-orbit>strong { width:145px; height:145px; display:grid; place-items:center; text-align:center; border-radius:50%; background:radial-gradient(circle,rgba(50,238,131,.2),#06120c 70%); border:1px solid #32ee83; color:#fff; font-size:.75rem; line-height:1.6; letter-spacing:.14em; z-index:2; box-shadow:0 0 45px rgba(50,238,131,.16); }
.sxpp-values-orbit>span { position:absolute; padding:13px 18px; min-width:110px; text-align:center; border:1px solid rgba(50,238,131,.35); border-radius:30px; background:rgba(4,16,10,.88); color:#dffbea; font-size:.61rem; text-transform:uppercase; z-index:3; box-shadow:0 14px 35px rgba(0,0,0,.25); }
.sxpp-values-orbit>span:nth-of-type(1){top:3%;left:37%}.sxpp-values-orbit>span:nth-of-type(2){right:-5%;top:45%}.sxpp-values-orbit>span:nth-of-type(3){bottom:3%;left:37%}.sxpp-values-orbit>span:nth-of-type(4){left:-5%;top:45%}
.sxpp-values-orbit>i { position:absolute; width:9px;height:9px;border-radius:50%;background:#32ee83;box-shadow:0 0 18px #32ee83; }
.sxpp-values-orbit>i:nth-of-type(1){left:17%;top:21%}.sxpp-values-orbit>i:nth-of-type(2){right:19%;bottom:18%}.sxpp-values-orbit>i:nth-of-type(3){right:13%;top:27%}
.sxpp-v-values>p { max-width:430px; margin:0; text-align:center; color:#8fab9b; font-size:.75rem; letter-spacing:.04em; }
@keyframes sxppOrbitSpin { to { transform:rotate(360deg); } }
@keyframes sxppOrbitBreath { to { transform:scale(1.035); box-shadow:0 0 0 60px rgba(50,238,131,.028),0 0 0 115px rgba(50,238,131,.014); } }

.sxpp-about-manifesto { min-height:500px; border-radius:34px; padding:48px; background:linear-gradient(145deg,#06170f,#020906); position:relative; overflow:hidden; box-shadow:0 34px 85px rgba(4,20,12,.19); }
.sxpp-about-manifesto::before { content:""; position:absolute; width:310px;height:310px;right:-130px;bottom:-140px;border:1px solid rgba(50,238,131,.24);border-radius:45%;box-shadow:0 0 0 45px rgba(50,238,131,.025),0 0 0 90px rgba(50,238,131,.015);animation:sxppContour 20s linear infinite; }
.sxpp-about-manifesto>small { color:#32ee83; font-size:.63rem; letter-spacing:.15em; }
.sxpp-about-manifesto>strong { display:block; color:#fff; font-size:clamp(2rem,3.5vw,3.2rem); line-height:1.05; letter-spacing:-.05em; margin:75px 0 60px; position:relative; z-index:2; }
.sxpp-about-manifesto>div { display:flex; gap:9px; flex-wrap:wrap; position:relative; z-index:2; }
.sxpp-about-manifesto>div span { padding:10px 12px; border:1px solid rgba(50,238,131,.24); border-radius:30px; color:#91b5a2; font-size:.55rem; letter-spacing:.1em; }

/* Contact and FAQ feel live without becoming distracting. */
.sxpp-v-contact { border-radius:32px; background:linear-gradient(145deg,rgba(50,238,131,.09),rgba(3,15,9,.45)); border:1px solid rgba(50,238,131,.28); box-shadow:0 38px 80px rgba(0,0,0,.25); }
.sxpp-v-contact::after { content:""; position:absolute; left:52px; right:52px; bottom:42px; height:1px; background:linear-gradient(90deg,#32ee83,transparent); animation:sxppLine 3.8s ease-in-out infinite alternate; }
@keyframes sxppLine { to { right:75%; opacity:.4; } }
.sxpp-v-knowledge p { backdrop-filter:blur(10px); transition:transform .25s ease,background .25s ease,border-color .25s ease; }
.sxpp-v-knowledge p:hover { transform:translateX(9px); background:rgba(120,230,179,.08); border-color:rgba(120,230,179,.5); }

/* Richer content movement and card response. */
.sxpp-section { position:relative; overflow:hidden; }
.sxpp-section::after { content:""; position:absolute; pointer-events:none; width:420px;height:420px;border-radius:50%;right:-300px;top:12%;background:color-mix(in srgb,var(--sxpp-accent) 5%,transparent);filter:blur(40px); }
.sxpp-service-grid a,.sxpp-project-grid article,.sxpp-industry-grid article,.sxpp-three article,.sxpp-deliverables>div,.sxpp-process article { transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,border-color .3s ease,background .3s ease; }
.sxpp-service-grid a:hover,.sxpp-project-grid article:hover,.sxpp-industry-grid article:hover,.sxpp-three article:hover,.sxpp-deliverables>div:hover { transform:translateY(-9px); box-shadow:0 28px 65px rgba(8,30,18,.13); border-color:color-mix(in srgb,var(--sxpp-accent) 42%,transparent); }
.sxpp-dark .sxpp-three article:hover,.sxpp-dark .sxpp-deliverables>div:hover { box-shadow:0 30px 70px rgba(0,0,0,.26); background:color-mix(in srgb,var(--sxpp-accent) 4%,transparent); }
.sxpp-process article:hover { transform:translateX(5px); }
.sxpp-faq details { transition:transform .25s ease,box-shadow .25s ease; }
.sxpp-faq details:hover { transform:translateX(5px); box-shadow:0 18px 40px rgba(10,30,19,.08); }

.sxpp-footer-base span { letter-spacing:.01em; }

@media (max-width:1180px) {
  .sxpp-nav { gap:13px; }
  .sxpp-nav a { font-size:.58rem; }
  .sxpp-header-cta { display:none; }
}
@media (max-width:980px) {
  .admin-bar .sxpp-header { top:32px; }
  .sxpp-main .sxpp-hero-grid { width:min(var(--sxpp-shell),calc(100% - 48px)); grid-template-columns:1fr; }
  .sxpp-page--industries .sxpp-hero-copy { grid-column:1;grid-row:1; }
  .sxpp-page--industries .sxpp-visual { grid-column:1;grid-row:2; }
  .sxpp-main .sxpp-visual { width:100%;min-height:480px; }
  .sxpp-values-orbit { width:390px;height:390px;margin:auto; }
}
@media (max-width:782px) { .admin-bar .sxpp-header{top:46px;} }
@media (max-width:600px) {
  .sxpp-main .sxpp-hero-grid { width:min(var(--sxpp-shell),calc(100% - 28px)); }
  .sxpp-main .sxpp-hero { min-height:auto; }
  .sxpp-main .sxpp-visual { min-height:390px;overflow:hidden;border-radius:22px; }
  .sxpp-values-orbit { width:285px;height:285px; }
  .sxpp-values-orbit>strong { width:105px;height:105px;font-size:.58rem; }
  .sxpp-values-orbit>span { min-width:80px;padding:9px;font-size:.48rem; }
  .sxpp-v-values>p { font-size:.68rem; }
  .sxpp-about-manifesto { min-height:420px;padding:30px;border-radius:24px; }
  .sxpp-about-manifesto>strong { margin:58px 0 45px; }
  .sxpp-v-pipeline { padding:25px; transform:none!important; }
}
@media (prefers-reduced-motion:reduce) {
  .sxpp-main .sxpp-hero-atmosphere,.sxpp-main .sxpp-hero-atmosphere::after,.sxpp-main .sxpp-visual::before,.sxpp-v-core,.sxpp-v-core span,.sxpp-v-pipeline article::after,.sxpp-v-pipeline>i::after,.sxpp-values-orbit,.sxpp-values-orbit::before,.sxpp-values-orbit::after,.sxpp-about-manifesto::before,.sxpp-v-contact::after { animation:none!important; }
}
