/* ---------- service page scenes ---------- */
.svc-scene .st{position:relative;height:370px;overflow:hidden;font:400 .88rem/1.4 var(--body)}
.svc-scene .term-bar span{font:500 .8rem var(--mono)}

/* 1. manual: a lens explores a sign-up form and pins bugs */
.st-manual .mock{position:absolute;left:28px;top:24px;width:58%;background:#F7EFE9;border-radius:14px;padding:18px 18px 20px;color:#3a2a33;box-shadow:0 20px 40px -20px rgba(0,0,0,.6);overflow:hidden}
.mk-h{height:12px;width:55%;background:#d9c9cf;border-radius:6px;margin-bottom:16px}
.mk-l{font:600 .72rem var(--body);color:#6b5460;margin:10px 0 5px}
.mk-in{height:30px;border:1.5px solid #d6c4cc;border-radius:8px;background:#fff}
.mk-row{display:flex;gap:8px;align-items:center;margin:14px 0}
.mk-box{width:14px;height:14px;border:1.5px solid #bda8b3;border-radius:4px}
.mk-t{height:8px;width:60%;background:#e2d5db;border-radius:4px}
.mk-btn{background:#4A2340;color:#fff;font:600 .8rem var(--body);padding:10px 14px;border-radius:9px;width:112%;text-align:center}
.st-manual .pin{position:absolute;display:flex;align-items:center;gap:8px;opacity:0;transform:scale(.6);transform-origin:left center;transition:all .45s var(--ease)}
.st-manual .pin b{width:24px;height:24px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font:700 .75rem var(--body);box-shadow:0 0 0 5px rgba(240,122,98,.2);flex:none}
.st-manual .pin span{background:var(--bg-2);border:1px solid rgba(240,122,98,.4);color:var(--text);font:500 .78rem var(--body);padding:6px 10px;border-radius:8px;white-space:nowrap}
.st-manual .p1{left:150px;top:66px}
.st-manual .p2{left:170px;top:148px}
.st-manual .p3{left:120px;top:328px}
.st-manual .pin.on{opacity:1;transform:none}
.lens{position:absolute;left:0;top:0;width:78px;height:78px;border-radius:50%;border:3px solid var(--gold);background:radial-gradient(circle,rgba(245,227,161,.18),rgba(245,227,161,.04));box-shadow:0 10px 30px -8px rgba(0,0,0,.6);transition:transform 1.1s var(--ease);z-index:2}
.lens i{position:absolute;width:30px;height:6px;background:var(--gold);border-radius:4px;right:-24px;bottom:-4px;transform:rotate(45deg)}

/* 2. automation: parallel lanes */
.st-auto{padding:26px 26px 0;display:flex;flex-direction:column;gap:18px}
.lane{display:grid;grid-template-columns:70px 1fr 44px;gap:14px;align-items:center}
.lane .lb{font:600 .85rem var(--body);color:var(--muted)}
.track{position:relative;height:30px;border-radius:8px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 10px,transparent 10px 14px);overflow:hidden}
.track i{position:absolute;left:0;top:0;bottom:0;width:0;background:repeating-linear-gradient(90deg,var(--green) 0 10px,transparent 10px 14px);transition:width .25s linear}
.track i.f{background:repeating-linear-gradient(90deg,var(--green) 0 10px,transparent 10px 14px)}
.track .x{position:absolute;top:0;bottom:0;width:10px;background:var(--red)}
.lane em{font:500 .85rem var(--mono);color:var(--text);font-style:normal;text-align:right}
.auto-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:6px}
.auto-sum div{background:rgba(255,255,255,.04);border:1px solid var(--line-2);border-radius:12px;padding:12px}
.auto-sum strong{display:block;font:700 1.3rem var(--display);color:var(--gold)}
.auto-sum span{font-size:.78rem;color:var(--faint)}
.a-state.pass{color:var(--green)}

/* 3. api: packets and a log */
.st-api{padding:22px 24px}
.api-nodes{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;margin-bottom:18px}
.node{background:rgba(245,227,161,.08);border:1px solid var(--line);border-radius:12px;padding:10px 14px;font:600 .85rem var(--body);color:var(--gold)}
.wire{position:relative;height:2px;background:repeating-linear-gradient(90deg,var(--faint) 0 6px,transparent 6px 10px)}
.pk{position:absolute;top:-6px;left:0;width:14px;height:14px;border-radius:4px;background:var(--gold);box-shadow:0 0 16px var(--gold);opacity:0}
.pk.go{animation:pkt .9s var(--ease) forwards}
.pk.back{animation:pktb .9s var(--ease) forwards}
@keyframes pkt{0%{left:0;opacity:1}100%{left:calc(100% - 14px);opacity:1}}
@keyframes pktb{0%{left:calc(100% - 14px);opacity:1}100%{left:0;opacity:1}}
.api-log{list-style:none;margin:0;padding:0;font:400 .8rem/1.3 var(--mono);display:flex;flex-direction:column;gap:7px}
.api-log li{display:grid;grid-template-columns:52px 1fr auto;gap:10px;align-items:center;padding:9px 12px;border-radius:10px;background:rgba(255,255,255,.035);border:1px solid var(--line-2);animation:logIn .5s var(--ease)}
.api-log .m{font-weight:600;color:var(--gold)}
.api-log .p{color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.api-log .s{padding:2px 8px;border-radius:6px;font-weight:600}
.api-log .s.ok{background:rgba(70,183,126,.15);color:var(--green)}
.api-log .s.bad{background:rgba(240,122,98,.15);color:var(--red)}
.api-log li.bug{border-color:rgba(240,122,98,.45)}
.api-log .why{grid-column:2/-1;color:var(--red);font-size:.74rem}
@keyframes logIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* 4. mobile: phone that changes device and network */
.st-mobile{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;padding:24px 28px}
.phone{position:relative;width:170px;height:320px;border-radius:30px;border:3px solid #4a3446;background:#0f0710;padding:10px;transition:width .6s var(--ease),height .6s var(--ease),border-radius .6s var(--ease)}
.phone.small{width:150px;height:270px;border-radius:22px}
.phone.wide{width:190px;height:300px}
.notch{position:absolute;top:9px;left:50%;width:56px;height:14px;margin-left:-28px;background:#0f0710;border-radius:0 0 10px 10px;z-index:2}
.scr{position:relative;height:100%;border-radius:22px;background:#F7EFE9;overflow:hidden;padding:30px 12px 12px;color:#3a2a33}
.net{position:absolute;top:8px;right:12px;font:700 .62rem var(--mono);color:#3a2a33}
.net.bad{color:#C2412D}
.app-h{font:700 .95rem var(--display);margin-bottom:10px}
.app-c{height:52px;border-radius:10px;background:#fff;border:1px solid #e4d6dc;margin-bottom:8px}
.app-c.short{height:34px}
.offline{position:absolute;left:8px;right:8px;bottom:-60px;background:#2E1428;color:#F5E3A1;font:600 .66rem/1.3 var(--body);padding:9px 10px;border-radius:10px;transition:bottom .5s var(--ease)}
.offline.on{bottom:8px}
.notif{position:absolute;left:8px;right:8px;top:-50px;background:#fff;color:#3a2a33;font:600 .66rem var(--body);padding:9px 10px;border-radius:10px;box-shadow:0 8px 20px rgba(0,0,0,.25);transition:top .5s var(--ease)}
.notif.on{top:26px}
.dev-info{display:grid;gap:12px}
.dev-info div{background:rgba(255,255,255,.04);border:1px solid var(--line-2);border-radius:12px;padding:12px 14px}
.dev-info span{display:block;font-size:.76rem;color:var(--faint)}
.dev-info strong{font:700 1.05rem var(--display);color:var(--text);transition:opacity .3s}
.dev-info .ck{color:var(--green)}

/* 5. performance: live chart */
.st-perf{padding:20px 24px}
.perf-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.perf-stats div{background:rgba(255,255,255,.04);border:1px solid var(--line-2);border-radius:12px;padding:10px 12px}
.perf-stats span{display:block;font-size:.74rem;color:var(--faint)}
.perf-stats strong{font:700 1.1rem var(--display);color:var(--text);white-space:nowrap}
.perf-stats strong.hot{color:var(--red)}
.perf-chart{width:100%;height:150px;display:block}
.perf-chart .grid line{stroke:rgba(255,255,255,.07);stroke-width:1}
.perf-chart .users{fill:none;stroke:var(--gold);stroke-width:2.5;vector-effect:non-scaling-stroke}
.perf-chart .resp{fill:none;stroke:var(--rust);stroke-width:2.5;vector-effect:non-scaling-stroke}
.perf-legend{display:flex;gap:18px;font-size:.78rem;color:var(--muted);margin:0 0 6px}
.perf-legend span::before{content:"";display:inline-block;width:14px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle}
.perf-legend .lu::before{background:var(--gold)}.perf-legend .lr::before{background:var(--rust)}
.perf-note{position:absolute;left:24px;right:24px;bottom:16px;background:var(--bg-2);border:1px solid rgba(240,122,98,.45);color:var(--text);font:500 .82rem var(--body);padding:10px 14px;border-radius:10px;opacity:0;transform:translateY(12px);transition:all .5s var(--ease)}
.perf-note::before{content:"● ";color:var(--red)}
.perf-note.on{opacity:1;transform:none}

/* 6. e-commerce: product → cart drawer → order */
.st-shop{padding:22px}
.pcard{width:46%;background:#F7EFE9;border-radius:14px;padding:12px;color:#3a2a33;transition:opacity .4s}
.pimg{height:120px;border-radius:10px;background:radial-gradient(circle at 50% 60%,#D9803A 0 30%,transparent 31%),linear-gradient(135deg,#f0dfd2,#e6cfc0)}
.pname{font:700 .9rem var(--display);margin:10px 0 2px}
.pprice{font:600 .85rem var(--body)}
.pprice s{color:#9a8590;font-weight:400;margin-right:4px}
.padd{margin-top:10px;background:#4A2340;color:#fff;text-align:center;font:600 .78rem var(--body);padding:9px;border-radius:9px;transition:transform .15s}
.padd.press,.dr-btn.press{transform:scale(.94)}
.drawer{position:absolute;top:0;bottom:0;right:0;width:52%;background:var(--bg-2);border-left:1px solid var(--line);padding:18px;transform:translateX(105%);transition:transform .6s var(--ease);display:flex;flex-direction:column;gap:8px}
.drawer.on{transform:none}
.dr-h{font:700 1rem var(--display);display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.dr-n{background:var(--gold);color:var(--bg);border-radius:99px;font:700 .72rem var(--body);padding:2px 8px}
.dr-row{display:flex;justify-content:space-between;font-size:.82rem;padding:9px 10px;border-radius:9px;background:rgba(255,255,255,.04)}
.dr-row.cp{opacity:0;max-height:0;padding:0 10px;overflow:hidden;transition:all .45s var(--ease);color:var(--green)}
.dr-row.cp.on{opacity:1;max-height:40px;padding:9px 10px}
.dr-row.tot{font-weight:700;background:none;border-top:1px solid var(--line-2);border-radius:0}
.dr-t{transition:color .3s}
.dr-t.chg{color:var(--gold)}
.dr-btn{margin-top:auto;background:var(--gold);color:var(--bg);text-align:center;font:700 .85rem var(--body);padding:11px;border-radius:10px;transition:transform .15s}
.order-ok{position:absolute;inset:0;background:rgba(23,10,20,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;opacity:0;pointer-events:none;transition:opacity .5s}
.order-ok.on{opacity:1}
.order-ok b{width:58px;height:58px;border-radius:50%;background:var(--green);color:var(--bg);display:grid;place-items:center;font-size:1.6rem;transform:scale(.4);transition:transform .6s cubic-bezier(.3,1.6,.5,1)}
.order-ok.on b{transform:none}
.order-ok strong{font:800 1.3rem var(--display);color:var(--text);margin-top:8px}
.order-ok span{color:var(--muted);font-size:.85rem}
.tap{position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;background:rgba(245,227,161,.35);border:2px solid var(--gold);transition:transform .8s var(--ease);z-index:3;pointer-events:none}
.tap.click{animation:tapc .35s}
@keyframes tapc{50%{box-shadow:0 0 0 12px rgba(245,227,161,.25)}}

/* 7. consulting: CI pipeline */
.st-ci{padding:28px 26px}
.run-l{font:500 .85rem var(--mono);color:var(--muted);margin-bottom:26px}
.run-l strong{color:var(--gold)}
.pipe{display:grid;grid-template-columns:repeat(5,1fr);position:relative;margin-bottom:28px}
.pipe::before{content:"";position:absolute;left:10%;right:10%;top:21px;height:2px;background:var(--line-2)}
.stg{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.stg i{width:44px;height:44px;border-radius:50%;border:2px solid var(--line);background:var(--bg-2);display:grid;place-items:center;font-style:normal;font-weight:700;color:var(--bg);transition:all .4s var(--ease);z-index:1}
.stg span{font:500 .75rem var(--body);color:var(--faint)}
.stg.run i{border-color:var(--gold);border-top-color:transparent;animation:spin .8s linear infinite}
.stg.ok i{background:var(--green);border-color:var(--green)}
.stg.ok i::before{content:"✓"}
.stg.fail i{background:var(--red);border-color:var(--red)}
.stg.fail i::before{content:"✗"}
.stg.ok span,.stg.run span{color:var(--text)}
.stg.skipped i{border:2px dashed rgba(245,227,161,.35)}
.stg.skipped span{color:var(--faint)}
.stg.fail span{color:var(--red)}
.ci-out{font:400 .84rem/1.6 var(--mono);background:rgba(0,0,0,.25);border:1px solid var(--line-2);border-radius:12px;padding:14px 16px;color:var(--muted);min-height:82px}
.ci-out .r{color:var(--red)}.ci-out .g{color:var(--green)}

@media (max-width:560px){
  .svc-scene .st{height:340px}
  .st-manual .mock{width:64%;left:16px}
  .st-manual .pin span{font-size:.7rem}
  .st-manual .p1{left:138px}.st-manual .p2{left:120px}.st-manual .p3{left:60px;top:306px}
  .st-mobile{grid-template-columns:auto 1fr;gap:14px;padding:20px 16px}
  .phone{width:140px;height:280px}.phone.small{width:124px;height:240px}.phone.wide{width:154px;height:264px}
  .lane{grid-template-columns:58px 1fr 36px;gap:10px}
  .stg span{font-size:.64rem}
  .stg i{width:36px;height:36px}
  .pipe::before{top:17px}
}