/* ARQS product pages premium layer (Client Ops OS, Content-to-Commerce Engine, Project Intelligence Layer) - Oct 17, 2026 */
:root{--bg:#050a12;--tx:#eef3f8;--mt:#a7b6c6;--c:#3fd0c9;--c2:#2a7fff;--ed:rgba(255,255,255,.12)}
body.pp-client{--c:#3fd0c9;--c2:#2f8cff}
body.pp-commerce{--c:#6fb4ff;--c2:#6d5cff}
body.pp-intel{--c:#4cc3ff;--c2:#8a6bff}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth;overflow-x:clip}
body.pp{margin:0;background:var(--bg);color:var(--tx);font:17px/1.65 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;overflow-x:clip;-webkit-font-smoothing:antialiased}
body.pp .wrap{width:min(1200px,calc(100% - 44px))!important;margin:0 auto!important;padding-left:0!important;padding-right:0!important}
/* hero */
.pp .hero{position:relative;isolation:isolate;overflow:hidden;min-height:min(calc(100svh - 66px),860px);display:flex;align-items:flex-end;padding:110px 0 118px}
.pp .hero .bg{position:absolute;inset:-4% 0 0 0;z-index:-2;overflow:hidden}
.pp .hero .bg img{width:100%;height:108%;object-fit:cover;display:block;transform:translate3d(0,var(--py,0px),0) scale(1.05);animation:ppKen 28s ease-in-out infinite alternate;will-change:transform}
@keyframes ppKen{from{scale:1}to{scale:1.08}}
.pp .hero:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,10,18,.45) 0%,rgba(5,10,18,0) 26%,rgba(5,10,18,.25) 55%,rgba(5,10,18,.9) 88%,var(--bg) 100%),linear-gradient(90deg,rgba(5,10,18,.88) 0%,rgba(5,10,18,.5) 45%,rgba(5,10,18,0) 80%),radial-gradient(760px 420px at 10% 92%,color-mix(in srgb,var(--c) 24%,transparent),transparent 70%)}
.pp .k{display:inline-flex;align-items:center;gap:12px;color:var(--c);font-weight:850;letter-spacing:.22em;font-size:12px;text-transform:uppercase}
.pp .k:before{content:"";width:30px;height:1px;background:currentColor}
.pp h1{font:800 clamp(46px,8vw,112px)/.98 Inter,system-ui,sans-serif;letter-spacing:-.055em;margin:18px 0 22px;padding-bottom:.06em;max-width:12ch;text-shadow:none!important;filter:drop-shadow(0 2px 14px rgba(0,0,0,.35));background:linear-gradient(180deg,#fff 35%,#bfcddc);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#fff}
.pp .lead{color:#cfdbe6;font-size:clamp(17px,1.55vw,21px);max-width:720px;margin:0}
.pp .buy{margin-top:34px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;padding:22px 24px;max-width:720px;border-radius:24px;background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border:1px solid var(--ed);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);box-shadow:0 30px 80px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.12)}
.pp .price{font-size:clamp(22px,2.4vw,30px);font-weight:850;letter-spacing:-.02em;margin:0 auto 0 0;color:#fff}
.pp .actions{display:flex;flex-wrap:wrap;gap:10px}
.pp .btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:12px 24px;border-radius:999px;background:linear-gradient(135deg,var(--c),var(--c2));color:#04121c;font-weight:850;text-decoration:none;box-shadow:0 12px 32px color-mix(in srgb,var(--c) 32%,transparent),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .25s,box-shadow .25s,filter .25s}
.pp .btn:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 18px 44px color-mix(in srgb,var(--c) 44%,transparent)}
.pp .btn.line{background:rgba(255,255,255,.07);color:#fff;border:1px solid rgba(255,255,255,.2);box-shadow:none}
.pp .btn.line:hover{border-color:var(--c)}
.pp .btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* included */
.pp .inc{position:relative;padding:110px 0 70px;background:radial-gradient(900px 480px at 88% 30%,color-mix(in srgb,var(--c) 9%,transparent),transparent 70%)}
.pp .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
.pp h2{font:800 clamp(34px,4.4vw,58px)/1.02 Inter,system-ui,sans-serif;letter-spacing:-.045em;margin:0 0 28px;color:#fff}
.pp ul{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:it}
.pp li{counter-increment:it;position:relative;margin:0;padding:20px 22px 20px 74px;border-radius:20px;background:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.02));border:1px solid var(--ed);box-shadow:0 22px 60px rgba(0,0,0,.38);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-weight:600;color:#e6eef6;transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .45s}
.pp li:before{content:counter(it,decimal-leading-zero);position:absolute;left:22px;top:50%;transform:translateY(-50%);font:800 15px/1 Inter,system-ui,sans-serif;letter-spacing:.06em;color:var(--c)}
.pp li:hover{transform:translateX(6px);border-color:color-mix(in srgb,var(--c) 55%,transparent)}
.pp .frame{position:relative;margin:0;border-radius:28px;overflow:hidden;aspect-ratio:16/10;border:1px solid var(--ed);box-shadow:0 50px 120px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04);transform:perspective(1400px) rotateY(-6deg) rotateX(2deg);transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.pp .frame:hover{transform:perspective(1400px) rotateY(0) rotateX(0)}
.pp .frame img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.04)}
.pp .frame:after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,rgba(255,255,255,.12),transparent 40%),linear-gradient(0deg,rgba(5,10,18,.35),transparent 50%);pointer-events:none}
.pp .glow{position:absolute;inset:auto -10% -18% 10%;height:60%;z-index:-1;background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 30%,transparent),transparent);filter:blur(40px)}
.pp .media{position:relative}
.pp .note{margin:70px auto 0;max-width:820px;text-align:center;padding:26px 30px;border-radius:22px;background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid var(--ed);color:#d7e2ec;font-size:18px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.pp .note:before{content:"";display:block;width:44px;height:2px;margin:0 auto 14px;border-radius:2px;background:linear-gradient(90deg,var(--c),var(--c2))}
.pp .foot{padding:40px 0 60px;color:var(--mt);font-size:13px;text-align:center;border-top:1px solid rgba(255,255,255,.06)}
/* scroll reveal (only when JS has run) */
.pp-js .pp .rv{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.pp-js .pp .rv.in{opacity:1;transform:none}
.pp-js .pp .frame.rv{transform:perspective(1400px) rotateY(-14deg) translateY(40px)}
.pp-js .pp .frame.rv.in{transform:perspective(1400px) rotateY(-6deg) rotateX(2deg)}
.pp-js .pp .frame.rv.in:hover{transform:perspective(1400px) rotateY(0) rotateX(0)}
@media (max-width:860px){
 .pp .grid{grid-template-columns:1fr}
 .pp .media{order:-1}
 .pp .frame,.pp-js .pp .frame.rv.in{transform:none}
 .pp-js .pp .frame.rv{transform:translateY(30px)}
 .pp .hero{min-height:auto;padding:min(62vw,300px) 0 64px}
 .pp .hero .bg{inset:0 0 auto 0;height:min(118vw,560px)}
 .pp .hero .bg img{height:100%;object-position:var(--op,65%) center}
 .pp .hero:after{background:linear-gradient(180deg,rgba(5,10,18,.15) 0%,rgba(5,10,18,0) 22%,rgba(5,10,18,.55) min(70vw,330px),var(--bg) min(118vw,560px))}
 body.pp-client{--op:72%}body.pp-commerce{--op:64%}body.pp-intel{--op:66%}
 .pp .inc{padding:70px 0 50px}
 .pp .buy{padding:18px}
 .pp .price{width:100%}
 .pp .actions{width:100%}
 .pp .actions .btn{flex:1 1 auto}
 .pp li{padding:18px 18px 18px 62px}
 .pp li:before{left:18px}
}
@media (prefers-reduced-motion:reduce){
 .pp .hero .bg img{animation:none;transform:none}
 .pp-js .pp .rv,.pp-js .pp .frame.rv{opacity:1;transform:none;transition:none}
}