/* Local CSS 3D scenes: explain each service with a short, labeled process. No external libraries or images. */
.scene-3d{--scene-blue:#1749d1;--scene-ink:#142343;--scene-coral:#ff795f;--scene-lime:#b7d96b;position:relative;isolation:isolate;min-height:370px;perspective:1100px;transform-style:preserve-3d;overflow:visible;color:var(--scene-ink)}
.scene-3d *{box-sizing:border-box}.scene-heading{position:absolute;top:4px;left:0;color:#65728a;font-size:13px;font-weight:700;letter-spacing:.02em}.scene-footnote{position:absolute;left:0;right:0;bottom:0;color:#66738a;font-size:12px;line-height:1.4}.scene-kicker{display:inline-flex;align-items:center;gap:8px;color:var(--scene-blue);font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}.scene-kicker:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--scene-coral);box-shadow:0 0 0 5px rgba(255,121,95,.12)}.scene-3d b,.scene-3d strong{font-weight:800}.scene-3d small{font:inherit}.scene-card{background:rgba(255,255,255,.94);border:1px solid #dce3ef;border-radius:17px;box-shadow:0 20px 38px rgba(20,35,67,.13),0 4px 10px rgba(20,35,67,.06);backdrop-filter:blur(8px)}
/* Home: one route from attention to a handled lead. */
.home-stage-area{position:absolute;inset:50px 0 44px;display:grid;place-items:center;perspective:950px}.home-route{position:absolute;left:9%;right:9%;top:52%;height:2px;background:linear-gradient(90deg,#ffb29e,#9db5f3,#aeca74);transform:translateY(-50%);opacity:.9}.home-route:before{content:"";position:absolute;right:-1px;top:-5px;border-left:10px solid #8da9e9;border-top:6px solid transparent;border-bottom:6px solid transparent}.home-signal{position:absolute;z-index:4;top:calc(52% - 5px);left:9%;width:10px;height:10px;border-radius:50%;background:var(--scene-blue);box-shadow:0 0 0 7px rgba(23,73,209,.14);animation:homeTravel 6s ease-in-out infinite}.home-stages{position:relative;z-index:2;width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:12px}.home-stage{min-height:142px;padding:17px 14px;display:flex;flex-direction:column;justify-content:center;gap:9px;transform:rotateX(8deg) rotateY(-9deg) translateZ(14px);transition:transform .3s ease}.home-stage:nth-child(2){transform:translateY(-17px) rotateX(8deg) rotateY(-2deg) translateZ(28px)}.home-stage:nth-child(3){transform:rotateX(8deg) rotateY(8deg) translateZ(14px)}.home-stage .stage-num{font-size:12px;color:var(--scene-blue);font-weight:800;letter-spacing:.08em}.home-stage b{font-size:17px;line-height:1.2}.home-stage small{font-size:12px;line-height:1.4;color:#596780}.home-stage:nth-child(1){animation:homeEmphasis 6s infinite}.home-stage:nth-child(2){animation:homeEmphasis 6s 2s infinite}.home-stage:nth-child(3){animation:homeEmphasis 6s 4s infinite}.home-stage:nth-child(1) .stage-num{color:#b6553b}.home-stage:nth-child(3) .stage-num{color:#54751e}
/* SMM: a post card moves across four human-readable production steps. */
.smm-stage-area{position:absolute;inset:49px 0 36px;display:grid;align-items:end;perspective:1000px}.smm-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;position:relative;z-index:2}.smm-steps:before{content:"";position:absolute;left:8%;right:8%;top:17px;height:2px;background:#cbd7ed;z-index:-1}.smm-step{min-height:105px;padding:31px 10px 12px;position:relative;transform:rotateX(7deg);animation:stepGlow 12s infinite}.smm-step:nth-child(2){animation-delay:3s}.smm-step:nth-child(3){animation-delay:6s}.smm-step:nth-child(4){animation-delay:9s}.smm-step .step-dot{position:absolute;top:9px;left:12px;width:17px;height:17px;border:4px solid #fff;border-radius:50%;background:#91a7d5;box-shadow:0 0 0 1px #c3d0e8}.smm-step b{display:block;font-size:14px;line-height:1.2}.smm-step small{display:block;margin-top:6px;color:#65728a;font-size:11px;line-height:1.3}.smm-note{position:absolute;left:0;right:0;top:4px;color:#65728a;font-size:12px;font-weight:700}.smm-post-token{position:absolute;z-index:3;top:20px;left:7%;width:78px;height:58px;padding:9px 10px;background:#fff;border:1px solid #cfdaee;border-radius:12px;box-shadow:0 13px 24px rgba(20,35,67,.17);transform:rotateX(9deg) rotateY(-12deg);animation:smmTravel 12s ease-in-out infinite}.smm-post-token:before{content:"";display:block;width:20px;height:5px;margin-bottom:7px;border-radius:5px;background:var(--scene-coral)}.smm-post-token:after{content:"";display:block;width:50px;height:5px;border-radius:5px;background:#d9e3f5;box-shadow:0 9px 0 #e9eef7}.smm-post-token span{position:absolute;right:7px;top:6px;color:var(--scene-blue);font-size:10px;font-weight:800}
/* Sites: visible page blocks plus a phone-sized responsive result. */
.site-stage-area{position:absolute;inset:50px 0 40px;display:flex;align-items:center;justify-content:center;gap:18px;perspective:1100px}.site-desktop{position:relative;width:70%;height:226px;overflow:hidden;transform:rotateY(-10deg) rotateX(5deg) translateZ(14px);transform-style:preserve-3d}.site-browserbar{height:31px;display:flex;align-items:center;gap:5px;padding:0 11px;background:#edf2fc;border-bottom:1px solid #dbe3f1}.site-browserbar i{width:7px;height:7px;border-radius:50%;background:#ff9b8b}.site-browserbar i:nth-child(2){background:#ffd37a}.site-browserbar i:nth-child(3){background:#b7d96b}.site-browserbar span{margin-left:auto;color:#71809a;font-size:10px}.site-page-layout{height:calc(100% - 31px);padding:17px;display:grid;grid-template-columns:1.05fr .95fr;gap:12px;background:linear-gradient(135deg,#fbfcff,#e8efff)}.site-copy-block{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px}.site-copy-block i{display:block;height:7px;border-radius:5px;background:#bfcee9;width:88%;animation:siteAssemble .8s both}.site-copy-block i:first-child{width:41%;background:var(--scene-coral);height:5px;animation-delay:.15s}.site-copy-block i:nth-child(3){width:66%;animation-delay:.3s}.site-copy-block i:nth-child(4){width:52%;animation-delay:.45s}.site-copy-block b{width:48px;height:16px;border-radius:5px;background:var(--scene-blue);margin-top:4px;animation:siteAssemble .8s .6s both}.site-image-block{border-radius:10px;background:linear-gradient(145deg,#c9d8fb,#f6c7b8);transform:translateZ(12px);box-shadow:inset 0 0 0 1px rgba(20,35,67,.05)}.site-mini-blocks{position:absolute;left:17px;right:17px;bottom:12px;display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.site-mini-blocks i{height:29px;border-radius:6px;background:rgba(255,255,255,.88);border:1px solid #d8e2f2;transform:translateZ(18px)}.site-phone{position:relative;width:80px;height:156px;flex:none;padding:7px;border:3px solid #273a61;border-radius:18px;background:#fff;box-shadow:0 17px 29px rgba(20,35,67,.2);transform:rotateY(12deg) rotateX(4deg) translateZ(36px)}.site-phone:before{content:"";position:absolute;top:4px;left:50%;width:24px;height:4px;transform:translateX(-50%);border-radius:4px;background:#273a61}.site-phone-screen{height:100%;padding:19px 6px 6px;border-radius:10px;background:#f1f5ff;display:flex;flex-direction:column;gap:6px}.site-phone-screen i{height:6px;border-radius:4px;background:#c3d2ef}.site-phone-screen i:first-child{height:35px;background:linear-gradient(140deg,#c9d8fb,#f6c7b8)}.site-phone-screen i:nth-child(2){width:85%;background:var(--scene-ink)}.site-phone-screen i:nth-child(3){width:65%}.site-phone-screen b{width:31px;height:11px;border-radius:4px;background:var(--scene-blue)}.site-labels{position:absolute;left:0;right:0;bottom:-25px;display:flex;justify-content:space-between;gap:8px;color:#596780;font-size:11px;font-weight:750}.site-labels span{padding:5px 8px;border:1px solid #dce3ef;border-radius:8px;background:rgba(255,255,255,.82)}
/* Automation: the path and destination are explicit. */
.auto-stage-area{position:absolute;inset:48px 0 43px;display:grid;align-items:center;perspective:1000px}.auto-track{position:absolute;left:8%;right:8%;top:52%;height:3px;background:linear-gradient(90deg,#ffb29e,#9db5f3,#aeca74);transform:translateY(-50%)}.auto-track:after{content:"";position:absolute;right:-1px;top:-5px;border-left:9px solid #8da9e9;border-top:6px solid transparent;border-bottom:6px solid transparent}.auto-packet{position:absolute;z-index:3;top:calc(52% - 7px);left:8%;width:15px;height:15px;border-radius:5px;background:var(--scene-blue);box-shadow:0 0 0 6px rgba(23,73,209,.13);transform:rotate(45deg);animation:autoTravel 8s ease-in-out infinite}.auto-steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;z-index:2}.auto-step{min-height:132px;padding:16px 10px;display:flex;flex-direction:column;justify-content:center;gap:7px;transform:rotateX(7deg) rotateY(-5deg);animation:stepGlow 8s infinite}.auto-step:nth-child(2){animation-delay:2s}.auto-step:nth-child(3){animation-delay:4s}.auto-step:nth-child(4){animation-delay:6s}.auto-step .stage-num{font-size:11px;color:var(--scene-blue);font-weight:800;letter-spacing:.08em}.auto-step b{font-size:13px;line-height:1.25}.auto-step small{font-size:11px;line-height:1.3;color:#65728a}.auto-step:nth-child(4) .stage-num{color:#54751e}.auto-result{position:absolute;right:0;bottom:0;padding:7px 10px;border-radius:9px;background:#edf5db;color:#49641b;font-size:11px;font-weight:750}
@keyframes homeTravel{0%,5%{left:9%;opacity:0}12%{opacity:1}88%{opacity:1}95%,100%{left:88%;opacity:0}}@keyframes homeEmphasis{0%,18%,100%{box-shadow:0 20px 38px rgba(20,35,67,.13),0 4px 10px rgba(20,35,67,.06)}8%{box-shadow:0 23px 44px rgba(23,73,209,.22),0 0 0 2px rgba(23,73,209,.18)}}@keyframes smmTravel{0%,4%{left:7%;opacity:0}10%{opacity:1}28%{left:28%}48%{left:51%}70%{left:73%}90%{left:85%;opacity:1}97%,100%{left:85%;opacity:0}}@keyframes stepGlow{0%,100%{box-shadow:0 12px 24px rgba(20,35,67,.07)}8%,24%{box-shadow:0 18px 30px rgba(23,73,209,.16),0 0 0 2px rgba(23,73,209,.13)}}@keyframes siteAssemble{from{opacity:.25;transform:translateY(6px) translateZ(-8px)}to{opacity:1;transform:translateY(0) translateZ(0)}}@keyframes autoTravel{0%,6%{left:8%;opacity:0}12%{opacity:1}28%{left:30%}50%{left:52%}72%{left:74%}91%{left:86%;opacity:1}98%,100%{left:86%;opacity:0}}
@media(max-width:900px){.scene-3d{min-height:330px}.home-stage-area{inset:48px 0 42px}.home-stage{min-height:132px;padding:13px 10px}.home-stage b{font-size:15px}.home-stage small{font-size:11px}.site-stage-area{gap:12px}.site-desktop{width:68%;height:205px}.site-phone{width:74px;height:145px}.smm-step{padding-left:8px;padding-right:7px}.smm-step b{font-size:13px}}
@media(max-width:680px){.scene-3d{min-height:300px}.scene-heading,.smm-note{font-size:12px}.home-stage-area{inset:46px 0 42px}.home-stages{gap:6px}.home-stage{min-height:128px;padding:12px 8px;transform:rotateX(4deg) rotateY(-5deg)}.home-stage:nth-child(2){transform:translateY(-10px) rotateX(4deg)}.home-stage:nth-child(3){transform:rotateX(4deg) rotateY(5deg)}.home-stage b{font-size:13px}.home-stage small{font-size:10px}.home-signal,.home-stage,.smm-step,.smm-post-token,.site-copy-block i,.auto-step,.auto-packet{animation:none!important}.home-signal{display:none}.smm-stage-area{inset:52px 0 32px}.smm-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.smm-steps:before{display:none}.smm-step{min-height:76px;padding:20px 10px 9px}.smm-step .step-dot{top:7px}.smm-post-token{top:2px;left:auto;right:0;width:58px;height:44px;transform:scale(.78);transform-origin:top right}.smm-note{max-width:calc(100% - 70px)}.site-stage-area{inset:48px 0 44px;gap:10px}.site-desktop{width:70%;height:174px}.site-page-layout{padding:12px;gap:8px}.site-mini-blocks{left:12px;right:12px;bottom:9px}.site-mini-blocks i{height:23px}.site-phone{width:65px;height:128px;padding:5px}.site-labels{font-size:10px}.site-labels span{padding:4px 5px}.auto-stage-area{inset:50px 0 38px}.auto-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.auto-track,.auto-packet{display:none}.auto-step{min-height:88px;padding:10px;transform:none}.auto-step b{font-size:12px}.auto-step small{font-size:10px}.auto-result{font-size:10px}}
@media(prefers-reduced-motion:reduce){.scene-3d *,.scene-3d *:before,.scene-3d *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}


/* SMM editorial storyboard: a post moves through a clear, one-pass 3D production sequence. */
.scene-smm.smm-motion-scene{min-height:430px;padding:20px 18px 14px;border:1px solid rgba(255,255,255,.22);border-radius:28px;overflow:hidden;color:#f6f8ff;background:radial-gradient(ellipse at 17% 7%,rgba(77,119,226,.38),transparent 42%),radial-gradient(ellipse at 94% 84%,rgba(87,176,197,.18),transparent 35%),linear-gradient(145deg,#101d3b 0%,#172b55 58%,#203769 100%);box-shadow:0 30px 72px rgba(20,35,67,.27),inset 0 1px rgba(255,255,255,.15);perspective:1200px}
.scene-smm.smm-motion-scene:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.24;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(to bottom,black,transparent 84%)}
.scene-smm.smm-motion-scene:after{content:"";position:absolute;width:210px;height:210px;right:-115px;top:130px;border:1px solid rgba(171,198,255,.22);border-radius:50%;box-shadow:0 0 0 28px rgba(171,198,255,.04),0 0 0 62px rgba(171,198,255,.03);pointer-events:none}
.smm-scene-header{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px}
.smm-scene-header>div{display:grid;gap:4px}.smm-scene-eyebrow{color:#a9c1ff;font-size:10px;font-weight:800;letter-spacing:.14em}.smm-scene-header strong{font-size:16px;line-height:1.2;color:#fff}
.smm-replay{flex:none;border:1px solid rgba(208,223,255,.36);border-radius:10px;padding:8px 10px;background:rgba(255,255,255,.1);color:#fff;font-family:inherit;font-size:11px;font-weight:600;line-height:1.1;cursor:pointer;transition:background .2s,transform .2s}
.smm-replay:hover{background:rgba(255,255,255,.2);transform:translateY(-2px)}.smm-replay:focus-visible{outline:3px solid #ffb38f;outline-offset:3px}.smm-replay:disabled{opacity:.75;cursor:wait}
.smm-workbench{position:absolute;z-index:2;inset:78px 18px 57px;transform-style:preserve-3d;perspective:1000px}
.smm-workbench-glow{position:absolute;left:9%;right:9%;top:46%;height:95px;border-radius:50%;background:rgba(88,139,255,.16);filter:blur(24px);transform:rotateX(67deg) translateZ(-15px)}
.smm-flight-line{position:absolute;left:5%;right:5%;top:57%;height:2px;background:linear-gradient(90deg,rgba(255,157,133,.48),rgba(133,170,255,.7),rgba(139,208,173,.6));transform:rotateX(58deg) translateZ(-8px);box-shadow:0 0 20px rgba(110,154,255,.35)}
.smm-flight-line i{position:absolute;left:0;top:-2px;width:22%;height:6px;border-radius:9px;background:linear-gradient(90deg,#ffac8d,#b7cbff);box-shadow:0 0 18px rgba(148,181,255,.9);opacity:.25}
.smm-steps{position:absolute;inset:62% 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-items:stretch}
.smm-stage{position:relative;min-width:0;min-height:91px;padding:15px 9px 10px;border:1px solid rgba(216,228,255,.19);border-radius:15px;background:linear-gradient(150deg,rgba(255,255,255,.13),rgba(255,255,255,.055));box-shadow:0 15px 26px rgba(5,13,30,.18),inset 0 1px rgba(255,255,255,.12);color:#edf2ff;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;transform:rotateX(10deg) rotateY(-4deg) translateZ(0);opacity:.67;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .45s,box-shadow .45s,border-color .45s,background .45s}
.smm-stage:nth-child(2){transform:rotateX(10deg) rotateY(-1deg) translateZ(5px)}.smm-stage:nth-child(3){transform:rotateX(10deg) rotateY(2deg) translateZ(10px)}.smm-stage:nth-child(4){transform:rotateX(10deg) rotateY(5deg) translateZ(15px)}
.smm-stage-number{position:absolute;top:9px;left:10px;color:#9ab5ff;font:800 10px/1 var(--font-mono,monospace);letter-spacing:.1em}
.smm-stage b{font-size:13px;line-height:1.15;color:#fff}.smm-stage small{color:#bdc9e3;font-size:10px;line-height:1.25}
.smm-stage.is-current{z-index:2;opacity:1;border-color:rgba(175,203,255,.65);background:linear-gradient(150deg,rgba(78,120,225,.47),rgba(255,255,255,.12));box-shadow:0 24px 38px rgba(6,15,38,.3),0 0 0 1px rgba(157,185,255,.22),0 0 30px rgba(80,131,255,.25);transform:translateY(-11px) rotateX(6deg) rotateY(-2deg) translateZ(35px) scale(1.035)}
.smm-stage.is-done{opacity:.88;border-color:rgba(147,218,184,.45)}.smm-stage.is-done .smm-stage-number{color:#a3e4c0}
.smm-editorial-card{position:absolute;z-index:4;left:0;top:1%;width:24%;max-width:132px;min-width:98px;min-height:126px;padding:9px;border:1px solid rgba(255,255,255,.66);border-radius:16px;background:linear-gradient(155deg,#fff 4%,#eef3ff 100%);color:#192a4e;box-shadow:0 22px 38px rgba(4,11,27,.36),0 0 0 1px rgba(255,255,255,.2);transform-style:preserve-3d;transform:rotateX(7deg) rotateY(-12deg) rotateZ(-3deg) translateZ(42px)}
.smm-card-top{display:flex;justify-content:space-between;align-items:center;gap:4px;color:#687792;font:700 7px/1.2 var(--font-mono,monospace);letter-spacing:.04em}.smm-card-state{padding:4px 5px;border-radius:5px;background:#fff0e9;color:#a24b2f;font-size:7px}
.smm-card-cover{min-height:56px;margin-top:8px;padding:7px;border-radius:9px;background:linear-gradient(140deg,#24418a,#6b8fea 58%,#f2a389);display:flex;flex-direction:column;justify-content:flex-end;gap:4px;transform:translateZ(9px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.smm-card-cover span{font-size:6px;font-weight:800;letter-spacing:.12em;color:#e8edff}.smm-card-cover b{font-size:10px;line-height:1.1;color:white}
.smm-card-copy{display:grid;gap:4px;margin:8px 2px}.smm-card-copy i{display:block;width:92%;height:3px;border-radius:4px;background:#ccd6e8}.smm-card-copy i:nth-child(2){width:77%}.smm-card-copy i:nth-child(3){width:56%}
.smm-card-bottom{display:flex;justify-content:space-between;align-items:center;color:#687792;font-size:7px}.smm-card-bottom b{color:#1749d1;font-size:7px}
.smm-review-note,.smm-publish-note{position:absolute;z-index:5;max-width:170px;padding:9px 11px;border:1px solid rgba(255,255,255,.2);border-radius:12px;background:rgba(8,17,38,.88);box-shadow:0 14px 28px rgba(4,11,27,.28);color:#f3f6ff;opacity:0;transform:translateY(8px) scale(.92);transition:opacity .35s,transform .35s}
.smm-review-note{left:50%;top:5%}.smm-review-note span{display:block;margin-bottom:4px;color:#aec4ff;font-size:8px;font-weight:800;letter-spacing:.08em}.smm-review-note b,.smm-publish-note b{font-size:10px;line-height:1.25}
.smm-publish-note{right:0;top:7%;display:flex;align-items:center;gap:8px}.smm-publish-note span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#9ce0ba;color:#153c34;font-weight:900}
.smm-motion-status{margin:0;color:#d6e0f4;font-size:11px;line-height:1.3}.smm-scene-footer{position:absolute;z-index:4;left:18px;right:18px;bottom:13px;display:grid;gap:8px}
.smm-progress{height:3px;border-radius:4px;background:rgba(255,255,255,.19);overflow:hidden}.smm-progress i{display:block;width:0;height:100%;border-radius:4px;background:linear-gradient(90deg,#ffac8d,#b7cbff,#9ce0ba);box-shadow:0 0 12px rgba(183,203,255,.7);transition:width .45s ease}
.smm-motion-scene.is-playing .smm-editorial-card{animation:smmEditorialJourney 8.8s cubic-bezier(.2,.7,.25,1) both}
.smm-motion-scene.is-playing .smm-flight-line i{animation:smmLineTravel 8.8s linear both;opacity:1}
.smm-motion-scene.is-playing .smm-review-note{animation:smmReview 8.8s both}
.smm-motion-scene.is-playing .smm-publish-note{animation:smmPublish 8.8s both}
.smm-motion-scene.is-finished .smm-editorial-card{left:76%;top:1%;transform:rotateX(2deg) rotateY(0) rotateZ(0) translateZ(42px)}
.smm-motion-scene.is-finished .smm-card-state{background:#e3f7eb;color:#286245}
@keyframes smmEditorialJourney{0%,7%{left:0;top:1%;transform:rotateX(8deg) rotateY(-16deg) rotateZ(-5deg) translateZ(38px)}14%{left:0;top:1%;transform:rotateX(0) rotateY(0) rotateZ(0) translateZ(55px)}20%,25%{left:0;top:1%;transform:rotateX(1deg) rotateY(88deg) rotateZ(0) translateZ(55px)}30%,40%{left:24%;top:1%;transform:rotateX(3deg) rotateY(0) rotateZ(2deg) translateZ(45px)}45%,50%{left:24%;top:1%;transform:rotateX(0) rotateY(-82deg) rotateZ(0) translateZ(45px)}56%,66%{left:50%;top:1%;transform:rotateX(2deg) rotateY(0) rotateZ(-2deg) translateZ(56px)}70%,75%{left:50%;top:1%;transform:rotateX(0) rotateY(82deg) rotateZ(0) translateZ(56px)}82%,94%{left:76%;top:1%;transform:rotateX(0) rotateY(0) rotateZ(1deg) translateZ(62px)}100%{left:76%;top:1%;transform:rotateX(0) rotateY(0) rotateZ(0) translateZ(42px)}}
@keyframes smmLineTravel{0%,12%{width:5%}30%,42%{width:30%}56%,68%{width:56%}82%,100%{width:90%}}
@keyframes smmReview{0%,48%{opacity:0;transform:translateY(8px) scale(.92)}54%,70%{opacity:1;transform:translateY(0) scale(1)}78%,100%{opacity:0;transform:translateY(-5px) scale(.96)}}
@keyframes smmPublish{0%,77%{opacity:0;transform:translateY(8px) scale(.9)}84%,96%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-4px) scale(.96)}}
@media(max-width:900px){.scene-smm.smm-motion-scene{min-height:400px;padding:18px 15px 13px}.smm-workbench{inset:74px 14px 57px}.smm-steps{gap:6px}.smm-stage{padding-left:7px;padding-right:7px}.smm-stage b{font-size:12px}.smm-stage small{font-size:9px}.smm-editorial-card{min-width:94px}.smm-scene-footer{left:15px;right:15px}}
@media(max-width:680px){.scene-smm.smm-motion-scene{min-height:345px;padding:16px 13px 12px}.smm-scene-header strong{font-size:14px}.smm-replay{display:none}.smm-workbench{inset:76px 12px 55px}.smm-workbench-glow{top:34%;height:82px}.smm-flight-line{top:51%}.smm-steps{inset:57% 0 0;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.smm-stage{min-height:73px;padding:13px 9px 8px;transform:none;opacity:.86}.smm-stage:nth-child(n){transform:none}.smm-stage.is-current{transform:translateY(-4px) translateZ(8px) scale(1.015)}.smm-stage-number{top:7px;left:8px}.smm-stage b{font-size:12px}.smm-stage small{font-size:10px}.smm-editorial-card{left:3%;top:2%;width:31%;max-width:116px;min-width:90px;min-height:116px;transform:rotateX(4deg) rotateY(-8deg) translateZ(20px)}.smm-review-note{left:38%;top:7%;max-width:145px}.smm-publish-note{top:7%;max-width:130px}.smm-motion-status{font-size:10px}.smm-motion-scene.is-playing .smm-editorial-card,.smm-motion-scene.is-playing .smm-flight-line i,.smm-motion-scene.is-playing .smm-review-note,.smm-motion-scene.is-playing .smm-publish-note{animation:none!important}.smm-motion-scene.is-playing .smm-editorial-card{left:3%;top:2%;transform:rotateX(4deg) rotateY(-8deg) translateZ(20px)}}
@media(prefers-reduced-motion:reduce){.smm-motion-scene.is-playing .smm-editorial-card{animation:smmEditorialJourney 8.8s cubic-bezier(.2,.7,.25,1) both!important}.smm-motion-scene.is-playing .smm-flight-line i{animation:smmLineTravel 8.8s linear both!important}.smm-motion-scene.is-playing .smm-review-note{animation:smmReview 8.8s both!important}.smm-motion-scene.is-playing .smm-publish-note{animation:smmPublish 8.8s both!important}.smm-motion-scene.is-playing .smm-stage{transition:transform .25s ease,opacity .25s ease,box-shadow .25s ease}}


/* Service scenes: richer depth, clearer focus and short explanatory motion. */
.scene-home,.scene-sites,.scene-automation{
  overflow:hidden;border:1px solid #dbe4f2;border-radius:26px;
  background:radial-gradient(ellipse at 82% 14%,rgba(170,197,255,.48),transparent 34%),
    radial-gradient(ellipse at 12% 90%,rgba(255,190,170,.28),transparent 35%),
    linear-gradient(145deg,#f8faff,#edf3ff 62%,#f6f8fc);
  box-shadow:0 28px 66px rgba(24,47,91,.15),inset 0 1px 0 rgba(255,255,255,.95)
}
.scene-home:before,.scene-sites:before,.scene-automation:before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.42;
  background-image:linear-gradient(rgba(71,102,166,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(71,102,166,.08) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:linear-gradient(135deg,#000 0%,transparent 78%)
}
.scene-home:after,.scene-sites:after,.scene-automation:after{
  content:"";position:absolute;z-index:0;pointer-events:none;width:210px;height:210px;
  right:-98px;top:72px;border:1px solid rgba(81,117,192,.18);border-radius:50%;
  box-shadow:0 0 0 22px rgba(81,117,192,.045),0 0 0 48px rgba(81,117,192,.035)
}
.scene-home .scene-heading,.scene-sites .scene-heading,.scene-automation .scene-heading,
.scene-home .scene-footnote,.scene-sites .scene-footnote,.scene-automation .scene-footnote{z-index:3}
.home-stage-area,.site-stage-area,.auto-stage-area{z-index:1}
.scene-home .scene-heading,.scene-sites .scene-heading,.scene-automation .scene-heading{
  color:#3c4c6c;font-size:13px;letter-spacing:.015em
}
.home-route{height:3px;box-shadow:0 0 15px rgba(91,128,212,.32)}
.home-signal{width:13px;height:13px;box-shadow:0 0 0 8px rgba(23,73,209,.12),0 0 24px rgba(23,73,209,.42)}
.home-stage{
  border:1px solid rgba(255,255,255,.95);
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(239,244,255,.94));
  box-shadow:0 20px 38px rgba(20,35,67,.14),0 5px 13px rgba(55,87,150,.08),inset 0 1px 0 #fff;
  transform-style:preserve-3d
}
.home-stage:nth-child(2){background:linear-gradient(145deg,#fff,rgba(229,237,255,.97))}
.home-stage:nth-child(3){background:linear-gradient(145deg,#fff,rgba(240,247,225,.96))}
.home-stage .stage-num{font-size:11px}
.home-stage b{font-size:18px}
.home-stage small{font-size:12px}
.home-stage:nth-child(1){animation:homeEmphasis 7.2s infinite}
.home-stage:nth-child(2){animation:homeEmphasis 7.2s 2.4s infinite}
.home-stage:nth-child(3){animation:homeEmphasis 7.2s 4.8s infinite}
.home-signal{animation:homeTravel 7.2s ease-in-out infinite}
.site-desktop{
  transform-style:preserve-3d;
  box-shadow:0 28px 44px rgba(20,35,67,.18),0 8px 15px rgba(55,87,150,.08);
  animation:siteDesktopFloat 7s ease-in-out infinite
}
.site-image-block{
  position:relative;overflow:hidden;
  background:linear-gradient(145deg,#a9c2f8 0%,#d6e1fb 44%,#f2b5a4 100%);
  box-shadow:inset 0 0 0 1px rgba(20,35,67,.06),inset 0 -20px 35px rgba(35,63,119,.12)
}
.site-image-block:after{
  content:"";position:absolute;inset:-35% auto -35% -55%;width:42%;
  transform:rotate(18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);
  animation:siteLightSweep 5.5s ease-in-out infinite
}
.site-phone{
  box-shadow:0 22px 36px rgba(20,35,67,.25),0 0 0 7px rgba(255,255,255,.52);
  animation:sitePhoneOrbit 7s 1s ease-in-out infinite
}
.site-phone-screen i:first-child{position:relative;overflow:hidden}
.site-labels{z-index:2}
.site-labels span{box-shadow:0 5px 14px rgba(20,35,67,.08)}
.auto-track{height:4px;box-shadow:0 0 18px rgba(91,128,212,.35)}
.auto-packet{
  width:18px;height:18px;border:2px solid #fff;
  box-shadow:0 0 0 7px rgba(23,73,209,.13),0 0 25px rgba(23,73,209,.38);
  animation:autoTravel 8s cubic-bezier(.4,0,.2,1) infinite
}
.auto-step{
  border:1px solid rgba(255,255,255,.96);
  background:linear-gradient(150deg,rgba(255,255,255,.98),rgba(241,245,253,.96));
  transform-style:preserve-3d;
  box-shadow:0 17px 32px rgba(20,35,67,.12),0 5px 12px rgba(55,87,150,.06),inset 0 1px #fff;
  animation:autoNodeCycle 8s ease-in-out infinite
}
.auto-step:nth-child(2){animation-delay:2s}
.auto-step:nth-child(3){animation-delay:4s}
.auto-step:nth-child(4){animation-delay:6s}
.auto-step b{font-size:14px}
.auto-step small{font-size:11px}
.auto-result{
  z-index:4;padding:9px 12px;border:1px solid #d6e6b6;
  box-shadow:0 10px 25px rgba(56,79,25,.12);
  animation:autoResult 8s ease-in-out infinite
}
@keyframes siteDesktopFloat{0%,100%{transform:rotateY(-10deg) rotateX(5deg) translate3d(0,0,14px)}50%{transform:rotateY(-7deg) rotateX(3deg) translate3d(0,-7px,22px)}}
@keyframes sitePhoneOrbit{0%,100%{transform:rotateY(12deg) rotateX(4deg) translate3d(0,0,36px)}50%{transform:rotateY(4deg) rotateX(1deg) translate3d(-5px,-10px,50px)}}
@keyframes siteLightSweep{0%,18%{left:-55%;opacity:0}35%,63%{opacity:.9}82%,100%{left:140%;opacity:0}}
@keyframes autoNodeCycle{0%,9%,100%{filter:saturate(.82);box-shadow:0 17px 32px rgba(20,35,67,.12),0 5px 12px rgba(55,87,150,.06),inset 0 1px #fff}18%,34%{filter:saturate(1.12);border-color:#9ab3ed;box-shadow:0 22px 38px rgba(23,73,209,.19),0 0 0 2px rgba(23,73,209,.10),inset 0 1px #fff;transform:translateY(-8px) rotateX(3deg) translateZ(18px)}}
@keyframes autoResult{0%,76%,100%{transform:translateY(4px);opacity:.65}84%,94%{transform:translateY(0);opacity:1}}
@keyframes smmEditorialJourneyMobile{
  0%,7%{left:2%;top:2%;transform:rotateX(5deg) rotateY(-15deg) rotateZ(-4deg) translateZ(20px)}
  14%,19%{left:2%;top:2%;transform:rotateX(2deg) rotateY(0) rotateZ(0) translateZ(32px)}
  23%,28%{left:2%;top:2%;transform:rotateX(0) rotateY(82deg) rotateZ(0) translateZ(32px)}
  34%,43%{left:66%;top:2%;transform:rotateX(3deg) rotateY(0) rotateZ(2deg) translateZ(26px)}
  47%,52%{left:66%;top:2%;transform:rotateX(0) rotateY(-80deg) rotateZ(0) translateZ(26px)}
  58%,67%{left:2%;top:2%;transform:rotateX(2deg) rotateY(0) rotateZ(-2deg) translateZ(34px)}
  71%,76%{left:2%;top:2%;transform:rotateX(0) rotateY(80deg) rotateZ(0) translateZ(34px)}
  83%,95%{left:66%;top:2%;transform:rotateX(1deg) rotateY(0) rotateZ(1deg) translateZ(40px)}
  100%{left:2%;top:2%;transform:rotateX(0) rotateY(0) rotateZ(0) translateZ(24px)}
}
@media(max-width:680px){
  .smm-replay{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:8px 9px;font-size:10px}
  .smm-motion-scene.is-playing .smm-editorial-card{animation:smmEditorialJourneyMobile 8.8s cubic-bezier(.2,.7,.25,1) both!important}
  .smm-motion-scene.is-playing .smm-flight-line i{animation:smmLineTravel 8.8s linear both!important}
  .smm-motion-scene.is-playing .smm-review-note{animation:smmReview 8.8s both!important}
  .smm-motion-scene.is-playing .smm-publish-note{animation:smmPublish 8.8s both!important}
  .smm-motion-scene.is-playing .smm-stage{transition:transform .35s ease,opacity .35s ease,box-shadow .35s ease}
  .smm-motion-scene.is-finished .smm-editorial-card{left:2%;top:2%;transform:rotateX(0) rotateY(0) translateZ(24px)}
  .smm-motion-scene.is-finished .smm-publish-note{opacity:1;transform:none}
}
@media(max-width:900px){
  .home-stage b{font-size:16px}
  .auto-step b{font-size:13px}
}
@media(max-width:680px){
  .scene-home,.scene-sites,.scene-automation{border-radius:20px}
  .home-stage{box-shadow:0 14px 24px rgba(20,35,67,.13),inset 0 1px 0 #fff}
  .home-stage b{font-size:13px}
  .home-stage small{font-size:10px}
  .site-desktop{animation:none}
  .site-phone{animation:none}
  .auto-step{animation:none}
}
@media(prefers-reduced-motion:reduce){
  .scene-home *,.scene-home *:before,.scene-home *:after,
  .scene-sites *,.scene-sites *:before,.scene-sites *:after,
  .scene-automation *,.scene-automation *:before,.scene-automation *:after,
  .smm-motion-scene *,.smm-motion-scene *:before,.smm-motion-scene *:after{
    animation:none!important;transition:none!important;scroll-behavior:auto!important
  }
}

/* Homepage story: a readable miniature workflow with one controlled motion sequence. */
.scene-home.home-story{min-height:386px;padding:20px;border:1px solid #ccd9f3;border-radius:28px;overflow:hidden;background:radial-gradient(circle at 8% 9%,rgba(255,196,166,.52),transparent 30%),radial-gradient(circle at 88% 84%,rgba(157,190,255,.46),transparent 39%),linear-gradient(145deg,#f8fbff,#edf3ff 75%,#e7f1fc);box-shadow:0 28px 62px rgba(27,54,111,.16),inset 0 1px #fff;perspective:1100px}
.home-story *{box-sizing:border-box}.home-story-top{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:10px}.home-story-top>div{display:grid;gap:3px}.home-story-overline{font-size:10px;letter-spacing:.14em;font-weight:800;color:#345caa}.home-story-top strong{font-size:17px;line-height:1.25;color:#172c52}.home-story-replay{min-height:38px;flex:none;padding:7px 11px;border:1px solid #b8c9e9;border-radius:11px;background:#fff;color:#214ca1;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;box-shadow:0 5px 14px rgba(33,76,161,.08)}.home-story-replay:hover{background:#ecf2ff}.home-story-replay:focus-visible{outline:3px solid #ff795f;outline-offset:3px}.home-story-replay:disabled{cursor:default;opacity:.7}
.home-story-board{position:relative;display:grid;align-items:center;min-height:264px;perspective:1000px}.home-story-tiles{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:center}.home-story-beam{position:absolute;z-index:1;left:7%;right:7%;top:50%;height:4px;background:linear-gradient(90deg,#f2a48e,#819eeb,#9bc9a4);box-shadow:0 0 18px rgba(81,126,213,.25)}
.home-story-tile{position:relative;min-width:0;height:205px;padding:14px 12px;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:6px;border:1px solid #cfdaef;border-radius:17px;background:linear-gradient(145deg,#fff,#f3f7ff);box-shadow:0 16px 27px rgba(29,56,113,.15),0 3px 6px rgba(29,56,113,.07),inset 0 1px #fff;transform:rotateY(-4deg) translateZ(8px);transform-style:preserve-3d;transition:transform .5s ease,border-color .5s ease,box-shadow .5s ease}.home-story-tile:nth-child(2){transform:translateY(-11px) translateZ(24px)}.home-story-tile:nth-child(3){transform:rotateY(4deg) translateZ(8px)}.home-story-tile.is-current{border-color:#7097ee;transform:translateY(-16px) translateZ(35px) rotateY(0);box-shadow:0 25px 40px rgba(34,76,166,.25),0 0 0 3px rgba(105,149,236,.17)}.home-story-tile.is-done{border-color:#9bcbb0}.home-story-icon{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:9px;background:#dfe9ff;color:#2454ae;font-size:19px}.home-story-tile:nth-child(1) .home-story-icon{background:#ffe9df;color:#b95439}.home-story-tile:nth-child(3) .home-story-icon{background:#e0f3e7;color:#337451}.home-story-count{font-size:10px;line-height:1.2;font-weight:800;color:#617394}.home-story-tile b{font-size:17px;line-height:1.12;color:#172c52}.home-story-tile small{font-size:11px;line-height:1.35;color:#51627d}
.home-story-art{position:relative;display:block;width:84%;height:49px;margin-top:auto;border:1px solid #d5def0;border-radius:8px;background:#fff;box-shadow:0 5px 10px rgba(36,66,130,.12);transform:translateZ(12px) rotate(-3deg)}.home-story-art i{position:absolute;display:block;border-radius:4px;background:#a9bde8}.home-story-post{background:linear-gradient(145deg,#e9e5ff,#ffdfd3)}.home-story-post i:first-child{left:9px;top:9px;width:27px;height:27px;background:#dd8e84}.home-story-post i:nth-child(2){left:43px;top:12px;width:35%;height:5px}.home-story-post i:nth-child(3){left:43px;top:23px;width:25%;height:5px}.home-story-browser{transform:translateZ(15px) rotate(2deg)}.home-story-browser:before{content:"";display:block;height:11px;border-bottom:1px solid #d6e1f5;background:#e9f0ff}.home-story-browser i:first-child{left:8px;top:19px;width:41%;height:6px;background:#315cbe}.home-story-browser i:nth-child(2){left:8px;top:30px;width:29%;height:5px}.home-story-browser i:nth-child(3){right:8px;top:18px;width:28%;height:21px;background:#f1bbb1}.home-story-inbox{transform:translateZ(12px) rotate(-2deg)}.home-story-inbox i:first-child{left:8px;top:9px;width:23px;height:23px;background:#a0d7b4}.home-story-inbox i:nth-child(2){left:40px;top:15px;width:42%;height:7px;background:#80a0df}
.home-story-bottom{position:relative;z-index:3;display:grid;gap:8px}.home-story-status{min-height:20px;font-size:12px;line-height:1.4;font-weight:650;color:#354e78}.home-story-progress{height:4px;border-radius:4px;background:#d8e3f7;overflow:hidden}.home-story-progress i{display:block;width:0;height:100%;border-radius:4px;background:linear-gradient(90deg,#f2856b,#4168cf,#5dba85);transition:width .5s ease}.home-story.is-complete .home-story-progress i{width:100%!important}
@media(max-width:900px){.scene-home.home-story{min-height:360px}.home-story-tile{height:190px;padding:11px 9px}.home-story-tile b{font-size:14px}.home-story-tile small{font-size:10px}}
@media(max-width:680px){.scene-home.home-story{min-height:374px;padding:15px 11px;border-radius:19px}.home-story-top strong{font-size:14px}.home-story-replay{font-size:11px;padding:6px 8px}.home-story-board{min-height:265px}.home-story-tiles{gap:5px}.home-story-tile{height:202px;padding:10px 6px;gap:6px;transform:none!important;border-radius:12px}.home-story-tile.is-current{transform:translateY(-7px)!important}.home-story-tile b{font-size:12px;overflow-wrap:anywhere}.home-story-tile small{font-size:9px;line-height:1.3}.home-story-count{font-size:9px}.home-story-icon{width:24px;height:24px;font-size:16px}.home-story-art{width:100%;height:37px;transform:none}.home-story-post i:first-child{left:5px;top:6px;width:21px;height:21px}.home-story-post i:nth-child(2){left:30px;top:8px}.home-story-post i:nth-child(3){left:30px;top:18px}.home-story-browser i:first-child{top:16px}.home-story-browser i:nth-child(2){top:26px}.home-story-browser i:nth-child(3){top:16px;height:17px}.home-story-inbox i:first-child{left:4px;top:6px;width:18px;height:19px}.home-story-inbox i:nth-child(2){left:26px;top:12px}.home-story-status{font-size:11px}}
@media(prefers-reduced-motion:reduce){.home-story-tile,.home-story-progress i{transition:none!important}.home-story-tile.is-current{transform:none!important}}

/* Story motion: the same visible lead travels through three dimensional objects. */
.home-story-signal{position:absolute;z-index:6;top:25%;left:8%;display:grid;place-items:center;width:76px;height:30px;border:1px solid #2759b6;border-radius:10px;color:#fff;background:linear-gradient(145deg,#326ad1,#173f9b);box-shadow:0 8px 18px rgba(22,63,148,.36),0 0 0 5px rgba(255,255,255,.84);transform:translate3d(0,0,55px) rotateY(-10deg);opacity:0;pointer-events:none}.home-story-signal span{font-size:9px;font-weight:850;letter-spacing:.04em}.home-story.is-playing .home-story-signal{animation:homeSignalJourney 5.7s cubic-bezier(.4,0,.2,1) both}.home-story.is-playing .home-story-beam:after{content:"";position:absolute;inset:-3px auto -3px 0;width:100%;border-radius:8px;background:linear-gradient(90deg,transparent,#fff,#79b7ff);box-shadow:0 0 19px #7aa9f5;transform-origin:left;animation:homeBeamFill 5.7s linear both}
.home-story-tile.is-current .home-story-art{animation:homeObjectReveal .75s cubic-bezier(.16,.8,.25,1) both}.home-story-tile.is-current .home-story-icon{animation:homeIconPulse 1.15s ease-in-out 2}.home-story-tile.is-done .home-story-art{filter:saturate(1.15);border-color:#8dc4a1}.home-story-tile.is-done:after{content:"✓";position:absolute;right:9px;top:9px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#d9f5e2;color:#236444;font-size:15px;font-weight:800}
@keyframes homeSignalJourney{0%{left:8%;top:25%;opacity:0;transform:translate3d(0,10px,10px) rotateY(-55deg) scale(.65)}7%,23%{left:8%;top:25%;opacity:1;transform:translate3d(0,0,55px) rotateY(-10deg) scale(1)}31%{left:46%;top:35%;opacity:1;transform:translate3d(0,-12px,85px) rotateY(80deg) scale(.9)}39%,55%{left:46%;top:35%;opacity:1;transform:translate3d(0,-12px,85px) rotateY(0) scale(1.08)}65%{left:78%;top:25%;opacity:1;transform:translate3d(0,-8px,90px) rotateY(-80deg) scale(.9)}74%,94%{left:78%;top:25%;opacity:1;transform:translate3d(0,0,60px) rotateY(0) scale(1)}100%{left:78%;top:25%;opacity:0;transform:translate3d(0,-15px,60px) rotateY(0) scale(1.1)}}
@keyframes homeBeamFill{0%,9%{transform:scaleX(0);opacity:0}15%{opacity:1}93%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes homeObjectReveal{0%{opacity:.35;transform:translate3d(0,14px,-30px) rotateY(-75deg) scale(.8)}65%{opacity:1;transform:translate3d(0,-7px,38px) rotateY(9deg) scale(1.08)}100%{opacity:1;transform:translate3d(0,0,24px) rotateY(0) scale(1)}}
@keyframes homeIconPulse{50%{transform:translateZ(25px) scale(1.18);box-shadow:0 0 0 6px rgba(71,124,225,.14)}}
@media(max-width:680px){.home-story-signal{width:47px;height:23px;top:20%;box-shadow:0 5px 12px rgba(22,63,148,.28),0 0 0 2px #fff}.home-story-signal span{font-size:6px}.home-story-tile.is-current .home-story-art{animation:homeObjectRevealMobile .6s ease-out both}.home-story.is-playing .home-story-signal{animation:homeSignalMobile 5.7s ease-in-out both}}
@keyframes homeSignalMobile{0%{left:4%;top:16%;opacity:0;transform:scale(.7)}9%,24%{left:4%;top:16%;opacity:1;transform:scale(1)}38%,56%{left:40%;top:16%;opacity:1;transform:scale(1.07)}74%,94%{left:78%;top:16%;opacity:1;transform:scale(1)}100%{left:78%;top:16%;opacity:0;transform:scale(.8)}}
@keyframes homeObjectRevealMobile{from{opacity:.45;transform:translateY(10px) scale(.86)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.home-story.is-playing .home-story-signal,.home-story.is-playing .home-story-beam:after,.home-story-tile.is-current .home-story-art,.home-story-tile.is-current .home-story-icon{animation:none!important}.home-story-signal{display:none}}

/* Public service stories share controls, while each scene depicts its actual service. */
.scene-sites.site-story,.scene-automation.automation-story{min-height:424px;padding:19px;border:1px solid #cbdaf4;border-radius:26px;overflow:hidden;background:radial-gradient(circle at 8% 12%,#ffe1d3,transparent 32%),radial-gradient(circle at 94% 75%,#cbebff,transparent 40%),linear-gradient(145deg,#fbfcff,#e9f1ff);box-shadow:0 24px 54px rgba(30,58,113,.16);color:#183157}
.service-story-head{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:8px}.service-story-head>div{display:grid;gap:4px}.service-story-head span{font-size:10px;font-weight:850;letter-spacing:.11em;color:#3463bb}.service-story-head strong{font-size:16px;line-height:1.25}.service-story-replay{min-height:38px;padding:7px 10px;flex:none;border:1px solid #a9bee8;border-radius:10px;background:#fff;color:#2450a3;font-family:inherit;font-size:11px;font-weight:750;cursor:pointer}.service-story-replay:hover{background:#edf3ff}.service-story-replay:focus-visible{outline:3px solid #ff795f;outline-offset:3px}.service-story-replay:disabled{opacity:.7;cursor:default}.service-story-bottom{position:relative;z-index:5;display:grid;gap:7px;font-size:11px;line-height:1.35;font-weight:700;color:#39557b}.service-story-bottom>span{min-height:16px}.service-story-bottom>i{height:4px;border-radius:4px;background:#d4e2f7;overflow:hidden}.service-story-bottom>i>b{display:block;width:0;height:100%;background:linear-gradient(90deg,#f38d71,#416cce,#62bb94);transition:width .5s ease}.service-story-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:0 0 12px}.service-story-steps span{padding:7px 5px;text-align:center;border:1px solid #d4e0f3;border-radius:8px;background:#fff;color:#627592;font-size:10px;font-weight:750;transition:background .4s,transform .4s}.service-story-steps span.is-current{background:#275ac0;color:#fff;transform:translateY(-4px)}.service-story-steps span.is-done{background:#e4f6eb;color:#236e47}
.site-story-stage{position:relative;min-height:298px;display:flex;align-items:center;padding:12px 10px 10px 4px;perspective:1000px}.site-story-desktop{position:relative;width:76%;height:235px;flex:none;border:5px solid #283d67;border-bottom:12px solid #283d67;border-radius:13px;overflow:hidden;background:#fff;box-shadow:0 22px 32px rgba(29,54,107,.22);transform:rotateY(-11deg) rotateX(4deg) translateZ(8px);transition:transform .65s cubic-bezier(.2,.7,.3,1),box-shadow .65s}.site-story-toolbar{height:25px;display:flex;align-items:center;gap:5px;padding:0 9px;background:#e8effd}.site-story-toolbar i{width:7px;height:7px;border-radius:50%;background:#f28d7c}.site-story-toolbar i:nth-child(2){background:#f3ca70}.site-story-toolbar i:nth-child(3){background:#8dcaad}.site-story-toolbar span{margin-left:auto;font-size:9px;color:#657b9d}.site-story-content{display:grid;grid-template-columns:1fr .75fr;gap:9px;height:158px;padding:14px;background:#f7faff}.site-story-copy{display:grid;align-content:center;justify-items:start;gap:8px}.site-story-copy small{font-size:8px;font-weight:850;color:#426eca}.site-story-copy b{font-size:15px;line-height:1.1}.site-story-copy i{width:87%;height:5px;border-radius:3px;background:#adc2e7}.site-story-copy i:nth-of-type(2){width:66%}.site-story-copy span{padding:6px 8px;border-radius:6px;background:#315ec0;color:#fff;font-size:9px;font-weight:750}.site-story-picture{display:grid;place-items:center;border-radius:10px;background:linear-gradient(135deg,#8caff4,#f3ab9c);color:#fff;font-size:10px;font-weight:850;text-align:center}.site-story-footer{padding:9px;font-size:9px;color:#607698}.site-story-phone{position:absolute;z-index:3;right:4%;top:69px;width:83px;height:164px;display:grid;align-content:start;gap:6px;padding:13px 7px 7px;border:4px solid #26385c;border-radius:17px;background:#f7faff;box-shadow:0 17px 25px rgba(24,51,111,.23);transform:rotateY(18deg) rotateZ(5deg) translateZ(35px) scale(.84);opacity:.65;transition:transform .7s cubic-bezier(.2,.7,.3,1),opacity .7s}.site-story-notch{position:absolute;top:3px;left:50%;width:25px;height:4px;border-radius:4px;background:#283d67;transform:translateX(-50%)}.site-story-mini-picture{height:43px;border-radius:5px;background:linear-gradient(135deg,#89acf3,#f1b2a3)}.site-story-phone b{font-size:10px;line-height:1.2}.site-story-phone i{height:4px;border-radius:4px;background:#b6c9e8}.site-story-phone span{padding:5px 2px;text-align:center;border-radius:5px;background:#315ec0;color:#fff;font-size:8px;font-weight:750}.site-story-lead{position:absolute;z-index:4;right:0;bottom:15px;display:flex;align-items:center;gap:7px;padding:10px;border:1px solid #a5dab8;border-radius:12px;background:#f2fff6;box-shadow:0 12px 24px rgba(32,92,63,.2);opacity:0;transform:translateY(25px) rotateX(65deg);transition:opacity .6s,transform .6s}.site-story-lead>span{font-size:24px;color:#26865b}.site-story-lead>div{display:grid;gap:2px}.site-story-lead b{font-size:11px}.site-story-lead small{font-size:9px;color:#567167}
.site-story[data-active-step="1"] .site-story-desktop,.site-story[data-active-step="2"] .site-story-desktop,.site-story[data-active-step="3"] .site-story-desktop,.site-story.is-complete .site-story-desktop{transform:rotateY(-3deg) rotateX(1deg) translateZ(34px);box-shadow:0 26px 42px rgba(32,65,147,.25)}.site-story[data-active-step="0"] .site-story-copy>*{animation:siteStoryBuild .7s ease-out both}.site-story[data-active-step="0"] .site-story-copy>*:nth-child(2){animation-delay:.15s}.site-story[data-active-step="0"] .site-story-copy>*:nth-child(3){animation-delay:.28s}.site-story[data-active-step="2"] .site-story-phone,.site-story[data-active-step="3"] .site-story-phone,.site-story.is-complete .site-story-phone{transform:rotateY(0) rotateZ(-4deg) translate3d(-5px,-13px,75px) scale(1);opacity:1}.site-story[data-active-step="3"] .site-story-lead,.site-story.is-complete .site-story-lead{opacity:1;transform:translateY(0) rotateX(0)}
@keyframes siteStoryBuild{from{opacity:.2;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.scene-automation.automation-story{padding:19px}.automation-story-stage{position:relative;display:grid;align-items:center;min-height:298px;perspective:950px}.automation-story-track{position:absolute;left:5%;right:5%;top:51%;height:4px;background:linear-gradient(90deg,#ff987d,#79a0ef,#70c495);box-shadow:0 0 17px rgba(72,112,204,.24)}.automation-story-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.automation-story-card{position:relative;display:flex;flex-direction:column;gap:7px;min-height:157px;padding:14px 9px;border:1px solid #d4dff1;border-radius:14px;background:linear-gradient(155deg,#fff,#f0f5ff);box-shadow:0 14px 27px rgba(27,56,114,.14);transform:rotateX(6deg) translateZ(8px);transition:transform .5s,background .5s,border-color .5s,box-shadow .5s}.automation-story-card>span{font-size:9px;color:#466bb0;font-weight:850}.automation-story-card b{font-size:13px;line-height:1.25}.automation-story-card small{font-size:10px;line-height:1.3;color:#5c6f8d}.automation-story-card>i{margin-top:auto;display:grid;place-items:center;width:29px;height:29px;border-radius:9px;background:#e2ebff;color:#2555b0;font-size:19px;font-style:normal}.automation-story-card.is-current{z-index:3;border-color:#6894eb;background:#fff;transform:translateY(-15px) rotateY(-4deg) translateZ(45px);box-shadow:0 24px 36px rgba(39,85,177,.26)}.automation-story-card.is-done{border-color:#a1cfb0;background:#f5fff7}.automation-story-card.is-done>i{background:#d9f5e2;color:#2b7c52}.automation-story-packet{position:absolute;z-index:5;left:6%;top:21%;padding:7px 8px;border-radius:8px;background:#2b5ec3;color:#fff;font-size:9px;font-weight:850;letter-spacing:.05em;box-shadow:0 8px 18px rgba(32,81,181,.34);opacity:0;pointer-events:none}.automation-story.is-playing .automation-story-packet{animation:automationStoryTravel 7.3s ease-in-out both}.automation-story-note{margin:7px 0 0;font-size:10px;line-height:1.35;color:#667b98}
@keyframes automationStoryTravel{0%{left:6%;top:21%;opacity:0;transform:scale(.7) rotateY(-70deg)}8%,19%{left:6%;top:21%;opacity:1;transform:scale(1) rotateY(0)}32%,43%{left:30%;top:18%;opacity:1;transform:scale(1.08) rotateY(0)}56%,67%{left:54%;top:18%;opacity:1;transform:scale(1.08) rotateY(0)}80%,92%{left:78%;top:21%;opacity:1;transform:scale(1) rotateY(0)}100%{left:78%;top:21%;opacity:0;transform:scale(.8) rotateY(40deg)}}
@media(max-width:680px){.scene-sites.site-story,.scene-automation.automation-story{min-height:408px;padding:14px 10px;border-radius:20px}.service-story-head strong{font-size:13px}.service-story-head span{font-size:9px}.service-story-replay{font-size:10px;padding:5px 7px}.site-story-stage{min-height:275px}.site-story-desktop{width:78%;height:188px;border-width:3px;border-bottom-width:8px}.site-story-content{height:122px;padding:8px;gap:5px}.site-story-copy{gap:5px}.site-story-copy b{font-size:11px}.site-story-copy small{font-size:7px}.site-story-copy span{font-size:7px}.site-story-picture{font-size:7px}.site-story-phone{right:1%;top:65px;width:64px;height:129px;padding:12px 5px 5px;gap:4px}.site-story-mini-picture{height:33px}.site-story-phone b{font-size:8px}.site-story-phone span{font-size:7px}.site-story-lead{bottom:3px;padding:7px}.site-story-lead b{font-size:9px}.site-story-lead small{font-size:8px}.service-story-steps span{font-size:8px;padding:6px 2px}.scene-automation.automation-story{min-height:442px}.automation-story-stage{min-height:312px}.automation-story-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.automation-story-track{display:none}.automation-story-card{min-height:126px;padding:9px;transform:none}.automation-story-card.is-current{transform:translateY(-5px) scale(1.025)}.automation-story-card b{font-size:12px}.automation-story-card small{font-size:9px}.automation-story-packet{top:4%;font-size:7px}.automation-story.is-playing .automation-story-packet{animation:automationStoryTravelMobile 7.3s ease-in-out both}.automation-story-note{font-size:9px}}
@keyframes automationStoryTravelMobile{0%{left:5%;top:4%;opacity:0}9%,21%{left:5%;top:4%;opacity:1}33%,44%{left:59%;top:4%;opacity:1}56%,68%{left:5%;top:54%;opacity:1}80%,94%{left:59%;top:54%;opacity:1}100%{left:59%;top:54%;opacity:0}}
@media(prefers-reduced-motion:reduce){.site-story *, .automation-story *{animation:none!important;transition:none!important}.automation-story-packet{display:none}}
/* The SMM example uses a contrasting workspace, with brighter accents and larger readable labels. */
.scene-smm.smm-motion-scene{background:radial-gradient(circle at 14% 12%,rgba(117,156,255,.42),transparent 42%),radial-gradient(circle at 92% 82%,rgba(104,227,201,.26),transparent 38%),linear-gradient(140deg,#172858,#21417c 64%,#315b8d);border-color:#799bd5}.smm-scene-eyebrow{color:#d1e0ff}.smm-motion-status{font-size:12px;color:#f2f6ff}


/* Direct Interactive Storyboard: Clean, spacious, high-contrast visual flow */
.scene-direct.direct-motion-scene {
  position: relative;
  min-height: 440px;
  padding: 22px 22px 16px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 26px;
  overflow: hidden;
  color: #f6f8ff;
  background: radial-gradient(ellipse at 15% 10%, rgba(252, 63, 29, 0.22), transparent 48%),
              radial-gradient(ellipse at 92% 86%, rgba(23, 73, 209, 0.32), transparent 45%),
              radial-gradient(ellipse at 50% 50%, rgba(16, 185, 129, 0.12), transparent 50%),
              linear-gradient(145deg, #0d172e 0%, #132448 55%, #182e5b 100%);
  box-shadow: 0 30px 72px rgba(9, 19, 42, 0.35), inset 0 1px rgba(255, 255, 255, 0.16);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.scene-direct.direct-motion-scene:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  background-image: linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, black, transparent 86%);
}
.scene-direct.direct-motion-scene:after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -100px;
  top: 100px;
  border: 1px solid rgba(255, 204, 0, 0.18);
  border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(255, 204, 0, 0.03), 0 0 0 64px rgba(255, 204, 0, 0.018);
  pointer-events: none;
}
.direct-scene-header {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
}
.direct-scene-title-group {
  display: grid;
  gap: 3px;
}
.direct-scene-eyebrow {
  color: #ffc978;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.direct-scene-header strong {
  font-size: 15px;
  line-height: 1.25;
  color: #ffffff;
}
.direct-replay {
  flex: none;
  border: 1px solid rgba(255, 204, 0, 0.45);
  border-radius: 10px;
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s, border-color 0.2s;
}
.direct-replay:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
  border-color: #ffcc00;
}
.direct-replay:focus-visible {
  outline: 3px solid #ffcc00;
  outline-offset: 3px;
}
.direct-replay:disabled {
  opacity: 0.7;
  cursor: wait;
}

/* Workbench & Viewport */
.direct-workbench {
  position: relative;
  z-index: 3;
  margin: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.direct-workbench-glow {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 30%;
  height: 90px;
  border-radius: 50%;
  background: rgba(255, 180, 50, 0.12);
  filter: blur(28px);
  pointer-events: none;
}
.direct-cards-viewport {
  position: relative;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Base Card Rules: strictly NO overlapping */
.direct-card {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  max-width: 470px;
  height: max-content;
  border-radius: 18px;
  padding: 18px 20px;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(14px) scale(0.96);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease;
}
.direct-card.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* Card 0: Search */
.direct-card-search {
  background: linear-gradient(160deg, #ffffff 0%, #f4f7ff 100%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 20px 42px rgba(4, 11, 27, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.2);
  color: #142343;
}
.direct-card-search .card-eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 750;
  color: #64748b;
  margin-bottom: 12px;
}
.ya-badge {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fc3f1d;
  color: #ffffff;
  font: 900 11px/1 var(--font-sans, sans-serif);
}
.direct-search-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 8px 8px 16px;
  border: 2px solid #fc3f1d;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(252, 63, 29, 0.12);
}
.direct-query-text {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}
.direct-search-btn {
  padding: 8px 16px;
  border-radius: 9px;
  background: #ffcc00;
  color: #18181b;
  font-size: 13px;
  font-weight: 800;
  cursor: default;
}
.direct-card-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 650;
}
.direct-card-tag.hot-tag {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

/* Card 1: Shield / Negative Keywords */
.direct-card-shield {
  background: radial-gradient(ellipse at 50% 15%, rgba(59, 130, 246, 0.28), transparent 70%),
              linear-gradient(155deg, rgba(15, 27, 53, 0.96), rgba(18, 36, 70, 0.94));
  border: 1.5px solid #60a5fa;
  box-shadow: 0 20px 42px rgba(2, 9, 24, 0.45), 0 0 30px rgba(59, 130, 246, 0.3);
  color: #ffffff;
}
.shield-badge-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.shield-big-icon {
  font-size: 32px;
  line-height: 1;
  filter: drop-shadow(0 0 10px rgba(96, 165, 250, 0.6));
}
.shield-title-wrap b {
  display: block;
  font-size: 15px;
  color: #93c5fd;
  font-weight: 800;
}
.shield-title-wrap small {
  display: block;
  font-size: 11px;
  color: #cbd5e1;
  margin-top: 2px;
}
.shield-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.chip-blocked {
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.6);
  color: #fca5a5;
  font-size: 11.5px;
  font-weight: 750;
  text-decoration: line-through;
}
.shield-savings-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 10px;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
}
.shield-savings-banner span {
  font-size: 11.5px;
  color: #a7f3d0;
  font-weight: 600;
}
.shield-savings-banner strong {
  font-size: 14px;
  color: #4ade80;
  font-weight: 800;
}

/* Card 2: Ad Snippet #1 */
.direct-card-ad {
  background: linear-gradient(160deg, #ffffff 0%, #f7f9ff 100%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 20px 42px rgba(4, 11, 27, 0.35);
  color: #1e293b;
}
.ad-header-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 11px;
}
.ad-yandex-badge {
  padding: 2px 6px;
  border-radius: 4px;
  background: #ffcc00;
  color: #18181b;
  font-size: 9.5px;
  font-weight: 800;
}
.ad-domain {
  color: #64748b;
  font-weight: 600;
}
.ad-pos-badge {
  margin-left: auto;
  color: #1d4ed8;
  font-weight: 750;
  font-size: 10.5px;
}
.ad-title {
  font-size: 15px;
  line-height: 1.25;
  font-weight: 800;
  color: #1749d1;
  margin-bottom: 6px;
}
.ad-desc {
  font-size: 12px;
  line-height: 1.35;
  color: #334155;
  margin-bottom: 10px;
}
.ad-quick-pills {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}
.ad-quick-pills span {
  padding: 5px 6px;
  border-radius: 6px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Card 3: Lead & Profit */
.direct-card-lead {
  background: radial-gradient(ellipse at 85% 15%, rgba(16, 185, 129, 0.25), transparent 65%),
              linear-gradient(150deg, #091a2b 0%, #0c2b34 60%, #0d3830 100%);
  border: 1.5px solid #10b981;
  box-shadow: 0 20px 42px rgba(3, 24, 18, 0.5), 0 0 30px rgba(16, 185, 129, 0.35);
  color: #f0fdf4;
}
.lead-head-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 11px;
  color: #a7f3d0;
}
.lead-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.3);
  animation: pulseGreen 1.6s infinite;
}
.lead-head-row b {
  flex: 1;
  font-weight: 750;
}
.lead-time {
  font-size: 10px;
  color: #6ee7b7;
}
.lead-main-box {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.lead-icon-success {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #10b981;
  color: #ffffff;
  font-size: 18px;
  font-weight: 900;
  flex-shrink: 0;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.55);
}
.lead-info strong {
  display: block;
  font-size: 14.5px;
  color: #ffffff;
  font-weight: 800;
}
.lead-info p {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: #d1fae5;
}
.lead-metrics-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.metric-item {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}
.metric-item small {
  display: block;
  font-size: 9.5px;
  color: #94a3b8;
  margin-bottom: 2px;
}
.metric-item b {
  display: block;
  font-size: 13.5px;
  color: #ffffff;
  font-weight: 800;
}
.metric-item.highlight {
  background: rgba(16, 185, 129, 0.2);
  border-color: rgba(52, 211, 153, 0.5);
}
.metric-item.highlight b {
  color: #4ade80;
}

/* Steps / Tabs below */
.direct-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.direct-stage {
  border: 1px solid rgba(216, 228, 255, 0.2);
  border-radius: 12px;
  padding: 10px 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.direct-stage:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 204, 0, 0.5);
  color: #ffffff;
}
.direct-stage-num {
  font-size: 10px;
  font-weight: 800;
  color: #93c5fd;
  font-family: monospace;
}
.direct-stage b {
  font-size: 12.5px;
  font-weight: 750;
  color: #ffffff;
}
.direct-stage.is-current {
  border-color: #ffcc00;
  background: rgba(255, 204, 0, 0.2);
  box-shadow: 0 0 16px rgba(255, 204, 0, 0.25);
  transform: translateY(-2px);
}
.direct-stage.is-current .direct-stage-num {
  color: #ffcc00;
}
.direct-stage.is-done {
  border-color: rgba(16, 185, 129, 0.5);
  background: rgba(16, 185, 129, 0.1);
}
.direct-stage.is-done .direct-stage-num {
  color: #34d399;
}

/* Footer & Progress */
.direct-scene-footer {
  position: relative;
  z-index: 4;
  display: grid;
  gap: 7px;
  margin-top: 4px;
}
.direct-motion-status {
  margin: 0;
  color: #cbd5e1;
  font-size: 11.5px;
  line-height: 1.35;
  min-height: 16px;
}
.direct-progress {
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
}
.direct-progress i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #fc3f1d, #ffcc00, #1749d1, #10b981);
  box-shadow: 0 0 12px rgba(255, 204, 0, 0.8);
  transition: width 0.4s ease;
}

/* Keyframes */
@keyframes pulseGreen {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.7; }
}

/* Responsive */
@media (max-width: 680px) {
  .scene-direct.direct-motion-scene {
    min-height: 380px;
    padding: 16px 14px 12px;
    border-radius: 20px;
  }
  .direct-scene-header strong {
    font-size: 13.5px;
  }
  .direct-replay {
    padding: 6px 9px;
    font-size: 10px;
  }
  .direct-card {
    padding: 14px 14px;
  }
  .direct-query-text {
    font-size: 13px;
  }
  .direct-search-btn {
    padding: 6px 12px;
    font-size: 11px;
  }
  .direct-card-tag {
    font-size: 11px;
    padding: 5px 8px;
  }
  .shield-big-icon {
    font-size: 26px;
  }
  .shield-title-wrap b {
    font-size: 13.5px;
  }
  .shield-title-wrap small {
    font-size: 10px;
  }
  .chip-blocked {
    font-size: 10px;
    padding: 4px 7px;
  }
  .shield-savings-banner {
    padding: 7px 10px;
    font-size: 11px;
  }
  .shield-savings-banner strong {
    font-size: 12.5px;
  }
  .ad-title {
    font-size: 13px;
  }
  .ad-desc {
    font-size: 11px;
  }
  .ad-quick-pills {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }
  .ad-quick-pills span {
    font-size: 9.5px;
  }
  .lead-info strong {
    font-size: 13px;
  }
  .lead-info p {
    font-size: 10.5px;
  }
  .metric-item b {
    font-size: 12px;
  }
  .direct-stage {
    padding: 8px 4px;
  }
  .direct-stage b {
    font-size: 11px;
  }
  .direct-motion-status {
    font-size: 10.5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .scene-direct.direct-motion-scene * {
    animation: none !important;
    transition: none !important;
  }
  .lead-pulse-dot {
    animation: none;
  }
}