/* =====================================================================
   Shared by the Services and Products pages (index + detail pages).
   ===================================================================== */

/* visual frame; everything inside scales with the frame (cqw units) */
.fl{animation:bob 5s ease-in-out infinite}
.fl.d2{animation-delay:-2.5s}
@keyframes bob{50%{translate:0 -1.4cqw}}
.fchip{position:absolute;z-index:3;display:flex;align-items:center;gap:1.2cqw;padding:1.4cqw 2.2cqw;border-radius:99px;background:#fff;font-size:2.3cqw;font-weight:600;color:var(--ink);box-shadow:0 1.6cqw 4cqw -1.6cqw rgba(24,24,24,.35);white-space:nowrap}
.fchip i{width:1.5cqw;height:1.5cqw;border-radius:50%}

/* v2 web */
.phone{position:absolute;z-index:3;right:6cqw;bottom:5cqw;width:21cqw;height:40cqw;border-radius:3.6cqw;background:var(--ink);padding:1.2cqw;box-shadow:0 4cqw 8cqw -3cqw rgba(24,24,24,.5)}
.phone-s{height:100%;border-radius:2.6cqw;background:#fff;padding:3cqw 2cqw;display:flex;flex-direction:column;gap:1.3cqw}
.phone-s .img{height:12cqw;border-radius:1.6cqw;background:linear-gradient(150deg,#ED3223,#B81E12)}
.phone-s .btn2{margin-top:auto;height:4.4cqw;border-radius:1.2cqw;background:var(--accent)}

/* bottom bar */
@media (prefers-reduced-motion:reduce){.fl{animation:none}}

/* shared heading helpers */
.h2{font-size:clamp(28px,4vw,46px);font-weight:800;margin-top:12px}
.sec-center{text-align:center;max-width:760px;margin:0 auto 44px}
.sec-center p:not(.eyebrow){margin-top:12px;color:var(--muted)}

/* feature rows (services / products) */
.feature-media{position:relative}
.feature-kpi{position:absolute;z-index:3;right:-12px;bottom:24px;display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:16px;background:var(--ink);color:#fff;box-shadow:0 20px 40px -22px rgba(24,24,24,.6)}
.feature-kpi b{font-family:var(--display);font-size:28px;font-weight:800;line-height:1;color:var(--accent)}
.feature-kpi span{font-size:13px;font-weight:600;line-height:1.3}
@media (max-width:900px){.feature-kpi{right:12px}}

/* product dashboard mock */
.dashc{container-type:inline-size;min-width:0;width:100%}
.dash{position:relative;aspect-ratio:4/3;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:0 40px 80px -50px rgba(24,24,24,.45);overflow:hidden;display:grid;grid-template-columns:20cqw 1fr}
.dash-side{background:var(--ink);padding:4cqw 3cqw;display:flex;flex-direction:column;gap:2.6cqw}
.dash-side .lg{width:8cqw;height:8cqw;border-radius:2.2cqw;background:var(--accent);display:grid;place-items:center;color:#fff;margin-bottom:2cqw}
.dash-side .lg svg{width:4.6cqw;height:4.6cqw}
.dash-side i{display:block;height:1.6cqw;border-radius:1cqw;background:#3A3735}
.dash-side i:nth-child(3){background:var(--accent);width:80%}
.dash-main{padding:4cqw;display:flex;flex-direction:column;gap:3cqw;min-width:0}
.dash-top{display:flex;justify-content:space-between;align-items:center;gap:2cqw}
.dash-top b{font-family:var(--display);font-size:4.4cqw;font-weight:800;letter-spacing:-.02em}
.dash-top span{font-family:var(--mono);font-size:2.2cqw;color:var(--muted);padding:1cqw 2cqw;border-radius:99px;background:var(--alt)}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw}
.kpis div{border:1px solid var(--line);border-radius:2.4cqw;padding:2.4cqw}
.kpis small{display:block;font-size:2cqw;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpis strong{display:block;font-family:var(--display);font-size:4.4cqw;font-weight:800;margin-top:.6cqw}
.kpis div:first-child{background:var(--soft);border-color:transparent}
.kpis div:first-child strong{color:var(--accent)}
.dash-chart{flex:1;display:flex;align-items:flex-end;gap:1.6cqw;padding:3cqw;border-radius:2.4cqw;background:var(--alt);min-height:0}
.dash-chart i{flex:1;border-radius:1cqw 1cqw 0 0;background:#DCD8D4}
.dash-chart i:nth-last-child(2){background:#F28A80}
.dash-chart i:last-child{background:var(--accent)}
.dash-rows{display:flex;flex-direction:column;gap:1.6cqw}
.dash-rows i{display:flex;align-items:center;gap:2cqw;height:5cqw;border-radius:1.6cqw;border:1px solid var(--line);padding-inline:2cqw}
.dash-rows i::before{content:"";width:2.6cqw;height:2.6cqw;border-radius:50%;background:var(--soft)}
.dash-rows i::after{content:"";height:1.4cqw;border-radius:1cqw;background:#ECE9E6;flex:1}
.ind{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ind-card{display:flex;gap:16px;align-items:flex-start;padding:22px;border-radius:18px;border:1px solid var(--line);background:#fff;transition:border-color .25s,background .25s}
.ind-card:hover{border-color:var(--accent);background:#FEF4F2}
.ind-card h3{font-family:var(--body);font-size:16.5px;font-weight:700;letter-spacing:0}
.ind-card p{margin-top:4px;font-size:14.5px;color:var(--muted)}
@media (max-width:900px){.ind{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ind{grid-template-columns:minmax(0,1fr)}}

/* Service & product detail pages: illustrated visuals + sections */
.visual .fchip{position:absolute}

/* phones (mobile apps / product mobile view) */
.v-app{background:linear-gradient(150deg,#FDEAE7,#fff 65%)}
.v-app .phone{right:auto;bottom:auto;top:8cqw;width:25cqw;height:50cqw}
.v-app .phone.p1{left:19cqw;transform:rotate(-6deg)}
.v-app .phone.p2{left:50cqw;top:12cqw;transform:rotate(5deg);background:#fff;border:1px solid var(--line)}
.v-app .phone.p2 .phone-s{background:var(--alt)}
.phone-s .row2{display:grid;grid-template-columns:1fr 1fr;gap:1.2cqw}
.phone-s .row2 i{height:7cqw;border-radius:1.4cqw;background:#F6F5F4;border:1px solid var(--line)}
.phone-s .row2 i:first-child{background:var(--soft);border-color:transparent}
.phone-s .hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:1cqw}
.phone-s .hd b{font-family:var(--display);font-size:2.6cqw;font-weight:800;color:var(--ink)}
.phone-s .hd span{width:4cqw;height:4cqw;border-radius:50%;background:var(--accent)}
.phone-s .ln{display:flex;align-items:center;gap:1.2cqw;padding:1.2cqw;border-radius:1.4cqw;background:#fff;border:1px solid var(--line)}
.phone-s .ln::before{content:"";width:3.4cqw;height:3.4cqw;border-radius:50%;background:var(--soft);flex-shrink:0}
.phone-s .ln::after{content:"";height:1.2cqw;border-radius:1cqw;background:#ECE9E6;flex:1}

/* detail: overview split */
.split2 .visual{aspect-ratio:5/4}
.split2 .visual.photo img{transform:none}

/* related cards */
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rel{display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:20px;border:1px solid var(--line);background:#fff;text-decoration:none;color:inherit;transition:border-color .25s,transform .25s,box-shadow .25s}
.rel:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 24px 44px -30px rgba(237,50,35,.55)}
.rel .why-ico{transition:background .25s,color .25s}
.rel:hover .why-ico{background:var(--accent);color:#fff}
.rel h3{font-family:var(--body);font-size:18px;font-weight:700;letter-spacing:0}
.rel p{font-size:14.5px;color:var(--muted)}
.rel .go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--accent)}
.rel .go svg{width:15px;height:15px}
@media (max-width:900px){.related{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.related{grid-template-columns:minmax(0,1fr)}}