/* =====================================================================
   Shared by every service detail page (services/*.php).
   ===================================================================== */

/* visual frame; everything inside scales with the frame (cqw units) */
.bar-l{display:block;height:1.3cqw;border-radius:1cqw;background:#ECE9E6}

/* v1 social */
.post{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:54cqw;border-radius:3.2cqw;background:#fff;overflow:hidden;box-shadow:0 4cqw 8cqw -4cqw rgba(24,24,24,.4)}
.post-h{display:flex;align-items:center;gap:1.8cqw;padding:2.4cqw}
.post-h .av{width:6cqw;height:6cqw;border-radius:50%;background:var(--accent);display:grid;place-items:center;color:#fff}
.post-h .av svg{width:3.4cqw;height:3.4cqw}
.post-h b{display:block;font-size:2.4cqw;line-height:1.2}
.post-h small{font-size:1.9cqw;color:var(--muted)}
.post-img{height:32cqw;background:radial-gradient(circle at 80% 20%,#FF6A5C,transparent 55%),linear-gradient(150deg,#ED3223,#B81E12);display:flex;align-items:flex-end;padding:3cqw;color:#fff;font-family:var(--display);font-weight:800;font-size:5cqw;line-height:1.02;position:relative;overflow:hidden}
.post-img::after{content:"";position:absolute;right:-8cqw;top:-8cqw;width:26cqw;height:26cqw;border-radius:50%;border:1.6cqw solid rgba(255,255,255,.18)}
.post-cta{margin:0 2.4cqw 2.4cqw;padding:1.8cqw 2.2cqw;border-radius:1.6cqw;background:var(--soft);color:var(--accent);font-size:2.2cqw;font-weight:700;display:flex;justify-content:space-between}
.fcard{position:absolute;z-index:3;border-radius:2.4cqw;padding:2.4cqw 2.8cqw;background:var(--ink);color:#fff;box-shadow:0 2cqw 5cqw -2cqw rgba(24,24,24,.5)}
.fcard small{display:block;font-size:1.8cqw;color:#A9A5A1;letter-spacing:.08em;text-transform:uppercase}
.fcard b{display:block;font-size:2.5cqw;margin-top:.6cqw}

/* v2 web */
.browser{position:absolute;left:6cqw;top:8cqw;width:72cqw;height:60cqw;border-radius:2.4cqw;background:#fff;border:1px solid var(--line);overflow:hidden;box-shadow:0 4cqw 8cqw -4cqw rgba(24,24,24,.35)}
.b-bar{height:6cqw;background:#F6F5F4;display:flex;align-items:center;gap:1cqw;padding-inline:2.2cqw;border-bottom:1px solid var(--line)}
.b-bar i{width:1.4cqw;height:1.4cqw;border-radius:50%;background:#DAD6D2}
.b-bar i:first-child{background:var(--accent)}
.b-bar span{margin-left:2cqw;padding:.7cqw 2.6cqw;border-radius:99px;background:#fff;border:1px solid var(--line);font-size:1.8cqw;color:var(--muted)}
.b-page{padding:3.6cqw 4cqw;display:flex;flex-direction:column;gap:1.6cqw}
.b-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:2cqw}
.b-nav em{width:9cqw;height:1.8cqw;border-radius:1cqw;background:var(--ink)}
.b-nav span{display:flex;gap:1.6cqw}
.b-nav span i{width:5cqw;height:1cqw;border-radius:1cqw;background:#DAD6D2}

/* v3 seo / ads */
@keyframes blink{50%{opacity:0}}
.chart{position:absolute;z-index:3;right:7cqw;bottom:7cqw;width:32cqw;border-radius:2.4cqw;padding:2.6cqw;background:var(--ink);color:#fff;box-shadow:0 3cqw 6cqw -3cqw rgba(24,24,24,.55)}
.chart small{font-size:1.8cqw;color:#A9A5A1;letter-spacing:.08em;text-transform:uppercase}
.bars{display:flex;align-items:flex-end;gap:1.2cqw;height:16cqw;margin-top:2cqw}
.bars i{flex:1;border-radius:.8cqw .8cqw 0 0;background:#3A3735}
.bars i:last-child{background:var(--accent)}