.fn{width:min(470px,50vw);display:flex;flex-direction:column;align-items:center;gap:0;position:relative}
.fn-title{font-family:var(--font-mono);font-size:.65rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(233,236,243,.35);margin-bottom:14px;align-self:flex-start}

.fn-wrap{display:flex;justify-content:center}
/* Stupeň funnelu – skleněný panel s barevným gradientem stupně (--c = rgb) */
.fn-stage{
  --c:109,94,252;
  display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 18px;
  border-radius:14px;width:100%;position:relative;overflow:hidden;
  background:linear-gradient(135deg,rgba(var(--c),.22),rgba(var(--c),.06) 55%,rgba(255,255,255,.02));
  border:1px solid rgba(var(--c),.38);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 12px 30px -16px rgba(var(--c),.6);
  transition:filter .22s,box-shadow .22s,transform .22s;cursor:default;
}
.fn-stage::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.07) 50%,transparent 70%);
  transform:translateX(-100%);animation:shimmer2 5s ease-in-out infinite;
}
.fn-stage--0{--c:139,125,255}
.fn-stage--1{--c:152,140,252}
.fn-stage--2{--c:168,160,246}
.fn-stage--3{--c:186,183,238}
.fn-stage--4{--c:205,206,232;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 1px rgba(205,206,232,.3),0 0 36px -6px rgba(167,139,250,.5)}
@keyframes shimmer2{0%{transform:translateX(-100%)}60%,100%{transform:translateX(200%)}}

/* Ikona ve stupni – malá gradientová dlaždice, duotone SVG */
.fn-s-ico{
  flex-shrink:0;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;
  background:linear-gradient(135deg,rgba(var(--c),.55),rgba(var(--c),.15));
  border:1px solid rgba(var(--c),.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 4px 12px -4px rgba(var(--c),.7);
}
.fn-s-ico svg{width:17px;height:17px;display:block}
.fn-s-lbl{flex:0 0 auto;font-family:var(--font-body);font-size:.82rem;font-weight:600;letter-spacing:.01em;color:rgba(233,236,243,.92)}
.fn-s-cnt{font-family:var(--font-display);font-size:1.05rem;color:#fff;flex-shrink:0;letter-spacing:.02em;margin-left:4px}

/* Hrdlo mezi stupni – světlo stékající dolů */
.fn-neck{width:100%;height:14px;flex-shrink:0;position:relative;
  background:linear-gradient(to bottom,rgba(109,94,252,.16),rgba(80,160,180,.05))}
.fn-neck::after{
  content:'';position:absolute;left:50%;top:0;width:2px;height:100%;margin-left:-1px;
  background:linear-gradient(to bottom,transparent,rgba(255,255,255,.7),transparent);
  background-size:100% 200%;animation:fnflow 1.6s linear infinite;opacity:.55;
}
@keyframes fnflow{0%{background-position:0 -14px}100%{background-position:0 14px}}



.srv__cta-wrap{margin-top:28px}
.srv__cta{white-space:nowrap}

/* Service scenes share one DOM across natural mobile scroll and the desktop presentation. */
.services {position:relative;overflow-x:clip;scroll-margin-top:80px}
.services-stage {position:relative;max-width:1600px;margin:auto}
.service-scene {position:relative;display:grid;grid-template-columns:1fr 1fr;gap:6%;align-items:center;padding:90px max(24px,5vw);}
.service-copy {max-width:530px;position:relative;z-index:2}
.service-number {display:block;font-family:var(--font-head);font-size:clamp(5rem,9vw,9rem);font-weight:800;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(233,236,243,.3);margin-bottom:12px;letter-spacing:-.04em}
.service-copy h2 {font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:clamp(1.65rem,2.8vw,2.65rem);line-height:1.14;text-wrap:balance;margin-bottom:20px}
.service-copy p {font-size:1.05rem;line-height:1.7;color:#b8b6cb;max-width:39ch}
.service-art {position:relative;min-width:0;display:flex;justify-content:center;align-items:center}
.service-art::before {content:'';position:absolute;inset:-20%;background:radial-gradient(ellipse,rgba(109,94,252,.15),transparent 65%);pointer-events:none;z-index:-1}
.service-art .fn {width:min(100%,380px)}
.services-progress {display:none}
.services.is-pinned {height:500vh}
.is-pinned .services-stage {position:sticky;top:0;height:100vh;height:100dvh}
.is-pinned .service-scene {position:absolute;inset:0;padding-top:100px;padding-bottom:100px;opacity:0;visibility:hidden;transform:translateY(18px);transition:opacity 250ms ease,transform 250ms cubic-bezier(.23,1,.32,1),visibility 250ms;pointer-events:none}
.is-pinned .service-scene.is-active {opacity:1;visibility:visible;transform:none;pointer-events:auto}
.service-copy a:focus-visible {outline:2px solid #c9c2ff;outline-offset:6px}
.is-pinned .services-progress {display:block;position:absolute;bottom:0;left:5%;right:5%;height:2px;background:rgba(255,255,255,.1)}
.services-progress span {display:block;height:100%;background:#a78bfa;transform-origin:left;transform:scaleX(0)}
.preview-chrome {height:34px;display:flex;align-items:center;gap:5px;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.1);color:#b8b6cb;font-size:10px}
.preview-chrome i {height:5px;width:5px;background:#777187;border-radius:50%}
.preview-chrome span {margin-left:10px}
.system-preview {width:100%;max-width:570px;background:#15141f;border:1px solid #393446;border-radius:12px;box-shadow:0 30px 65px -25px #000;overflow:hidden;transform:perspective(1100px) rotateY(-7deg)}
.system-content {padding:24px}
.system-heading {display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:20px;font-weight:600}
.system-heading small {font-size:10px;color:#b8b6cb;font-weight:400}
.system-tabs {display:flex;gap:22px;margin:24px 0;color:#b8b6cb;font-size:12px}
.system-tabs b {color:#cbbfff;border-bottom:2px solid #a78bfa;padding-bottom:8px}
.system-totals {display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px}
.system-totals>div {border-bottom:1px solid #3c354d;padding:4px 0 18px}
.system-totals small {display:block;color:#b8b6cb;font-size:10px;margin-bottom:10px}
.system-totals strong {font-size:28px;font-weight:500;letter-spacing:-.03em}
.system-totals em {font-size:14px;font-style:normal;color:#b8b6cb}
.system-table>div {display:grid;grid-template-columns:1.4fr 1fr .8fr;gap:8px;align-items:center;padding:13px 0;border-bottom:1px solid #2e2939;font-size:10px;color:#c7c3d4}
.system-table>div:first-child {font-size:9px;color:#aaa4ba}
.system-table b {font-weight:500;color:#edeaf4}
.status-purple,.status-green {padding:5px 7px;border-radius:4px;width:max-content;font-size:10px;background:#302546;color:#d5bfff}
.status-green {background:#16352f;color:#9de4c3}
.system-footer {font-size:10px;color:#b8b6cb;margin-top:22px}
.website-preview {width:110%;flex-shrink:0;border:1px solid #484154;border-radius:12px;background:#14131d;box-shadow:0 28px 65px -24px #000;overflow:hidden;transform:perspective(1100px) rotateY(6deg) rotateZ(-2deg)}
.website-preview img {width:100%;display:block}
.website-caption {font-size:12px;color:#d3cce6;padding:16px 20px;border-top:1px solid #393446}
.phone-scene {width:100%;display:flex;justify-content:center;position:relative;padding:10px 0}
.phone {width:244px;background:#17151f;border:5px solid #49434f;border-radius:38px;box-shadow:0 25px 65px -20px #000;position:relative;padding:14px 16px 20px;transform:rotate(-5deg)}
.phone-island {position:absolute;width:65px;height:17px;border-radius:12px;background:#08070b;top:9px;left:50%;transform:translateX(-50%)}
.phone-top {display:flex;justify-content:space-between;font-size:9px;padding:0 3px;margin-bottom:30px}
.phone-content>small {font-size:8px;letter-spacing:.12em;color:#c2afdf}
.phone-content h3 {font-family:var(--font-head);font-size:27px;line-height:1.1;margin:9px 0}
.phone-date {color:#b9b1c8;font-size:10px;margin-bottom:22px}
.phone-appointment {background:#c6b8ee;color:#211a31;border-radius:12px;padding:16px;margin-bottom:23px}
.phone-appointment>span {font-size:8px;letter-spacing:.1em;display:block}
.phone-appointment strong {font-size:32px;display:block;margin:10px 0}
.phone-appointment p {font-size:12px;font-weight:600}
.phone-appointment small {font-size:9px}
.phone-content h4 {font-size:11px;font-weight:500;margin-bottom:12px}
.phone-task {display:flex;align-items:center;gap:8px;font-size:10px;padding:10px 0;border-bottom:1px solid #3c3448}
.phone-task i {height:12px;width:12px;border:1px solid #837093;border-radius:3px;font-style:normal;font-size:9px;text-align:center}
.phone-task.done {color:#a79db8}
.phone-nav {display:flex;justify-content:space-between;font-size:9px;color:#aea3be;padding-top:22px}
.phone-nav b {color:#dacbf5}
.phone-note {position:absolute;right:0;top:53%;padding:18px 22px;background:#24202f;border:1px solid #51445f;border-radius:12px;box-shadow:0 12px 25px -10px #000;transform:rotate(5deg)}
.phone-note p {font-size:13px;line-height:1.5;margin-top:12px}
.consult-preview {position:relative;max-width:320px;width:80%;transform:rotate(3deg)}
.consult-preview img {display:block;width:100%;height:390px;object-fit:cover;object-position:center 25%;border-radius:100px 100px 12px 12px}
.consult-caption {position:absolute;bottom:18px;left:-24px;background:#e0d7f0;color:#241b33;padding:15px 24px;box-shadow:0 12px 30px -12px #000;transform:rotate(-3deg)}
.consult-caption strong,.consult-caption span {display:block}
.consult-caption strong {font-size:15px}.consult-caption span {font-size:11px;margin-top:4px}
.trust__description {text-align:center;color:var(--text-dim);max-width:650px;margin:0 auto 30px;line-height:1.7}
.trust__label {max-width:850px;margin-left:auto;margin-right:auto;line-height:1.6}
@media(max-width:899px) {
 .service-scene {display:flex;flex-direction:column;align-items:stretch;padding:48px 24px 60px;gap:36px}
 .service-copy {max-width:560px}
 .service-number {font-size:5rem;margin-bottom:12px}
 .service-copy h2 {font-size:clamp(1.55rem,5.6vw,2.4rem);margin-bottom:14px}
 .service-copy p {font-size:1rem;max-width:34ch}
 .service-copy .srv__cta-wrap {margin-top:20px}
 .service-art {width:100%;max-width:540px;align-self:center}
 .system-preview {transform:none}.system-content {padding:18px 14px}
 .system-heading {font-size:17px}.system-heading small {display:none}
 .system-tabs {gap:20px;margin:18px 0}.system-totals strong {font-size:24px}
 .system-table>div {font-size:9px;grid-template-columns:1.3fr 1fr .65fr;gap:5px}.system-table .status-purple,.system-table .status-green {font-size:8px;padding:4px}
 .service-scene--websites {padding-top:28px;padding-bottom:80px}
 .website-preview {width:calc(100% + 16px);transform:rotate(-3deg);margin-top:8px}
 .service-scene--funnels {padding-top:20px}.service-scene--funnels .service-art {max-width:310px}
 .service-scene--mobile {padding-top:26px}.phone-note {right:0}
 .service-scene--consulting {display:grid;grid-template-columns:1fr;gap:34px;padding-top:25px;padding-bottom:70px}
 .consult-preview {max-width:250px;margin-left:auto;margin-right:14px}.consult-preview img {height:280px}
 .consult-caption {left:-40px}
}
@media(min-width:600px) and (max-width:899px) {
 .service-scene {padding-left:8vw;padding-right:8vw}
 .service-scene--consulting {grid-template-columns:1.1fr 1fr;align-items:center}
}
@media(prefers-reduced-motion:reduce) {
 .services *, .services *::before, .services *::after {animation:none!important;transition:none!important}
}

@media(min-width:900px) and (max-height:800px) {
 .is-pinned .service-number {font-size:5rem}
 .is-pinned .service-art {transform:scale(.82)}
}
/* Refined scene lighting and a full-bleed progress line. */
.services-stage {max-width:none}
.service-scene::before {content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 25% 48%,rgba(109,94,252,.12),transparent 55%);z-index:-1}
.service-scene--funnels::before {background:radial-gradient(ellipse at 68% 46%,rgba(137,91,231,.19),transparent 63%)}
.service-scene--mobile::before {background:radial-gradient(ellipse at 65% 53%,rgba(79,87,197,.22),transparent 62%)}
.service-scene--consulting::before {background:radial-gradient(ellipse at 60% 46%,rgba(132,98,193,.17),transparent 65%)}
.is-pinned .services-progress {left:0;right:0;background:rgba(167,139,250,.07);height:1px}
.services-progress span {background:linear-gradient(90deg,transparent,#8c78d4 15%,#baa4ef 85%,transparent)}
.service-art .fn {width:min(100%,470px)}
.service-scene--funnels .service-art {min-height:460px}
.fn-stage {padding:17px 22px;gap:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 16px 36px -14px rgba(var(--c),.35);background:linear-gradient(140deg,rgba(var(--c),.3),rgba(24,21,40,.92));backdrop-filter:blur(10px)}
.fn-s-ico {width:36px;height:36px}.fn-s-ico svg{width:21px;height:21px}
.fn-s-lbl {font-size:.9rem}.fn-s-cnt{font-size:1.2rem}.fn-neck{height:20px}
.consult-preview {max-width:365px;width:86%}
.consult-preview img {height:445px}
.consult-caption {background:rgba(18,17,30,.94);color:#eeebf7;border:1px solid rgba(176,154,230,.28);border-radius:15px;padding:17px 23px;box-shadow:0 16px 40px -20px #000;backdrop-filter:blur(18px)}
.consult-caption span {color:#bdb2d2;font-size:12px}
.website-preview {transform:rotate(-2deg)}
.website-canvas {position:relative}
.website-canvas .website-live-logo {position:absolute;left:2.55%;top:.9%;width:13.73%;height:auto}
/* Real device frame, with a layered metal edge in perspective. */
.device-scene {width:100%;height:560px;display:flex;align-items:center;justify-content:center;perspective:1100px}
.device-body {width:280px;height:576px;position:relative;transform-style:preserve-3d;transform:rotateY(-24deg) rotateX(7deg) rotateZ(-12deg)}
.device-depth {position:absolute;inset:1px 0 2px;background:linear-gradient(100deg,#111 0%,#b6b7b8 18%,#45474a 28%,#a1a4a7 70%,#242527);border-radius:48px;transform:translateZ(-13px);box-shadow:-1px 0 #dadce0,-2px 0 #909395,-3px 0 #b9bbbf,-4px 0 #5d6065,-5px 0 #a9acaf,-6px 0 #47494f,-7px 0 #9da0a6,-8px 0 #45474d,-9px 0 #a1a3a7,-10px 0 #44464c,0 35px 60px -10px #000}
.device-keys {position:absolute;left:-8px;top:95px;width:4px;height:35px;background:linear-gradient(90deg,#1b1b1b,#bfc0c5,#41434a);border-radius:3px;transform:translateZ(-6px);box-shadow:0 47px 0 #777b83}
.device-frame {position:absolute;inset:0;width:100%;height:100%;pointer-events:none;transform:translateZ(1px)}
.device-screen {position:absolute;inset:9px 10px;background:#060a15;border-radius:38px;overflow:hidden;color:#f3f4fa}
.device-status {display:flex;justify-content:space-between;padding:11px 20px 7px;font-size:10px;height:35px}
.task-app {padding:9px 12px 0}
.task-app-brand {display:flex;align-items:center;justify-content:space-between;height:28px;margin-bottom:10px;color:#b2b9c7}
.task-app-brand img {width:70px;height:auto}.task-app-brand span {font-size:17px}
.task-app h3 {font-size:21px;line-height:1.2;font-weight:600;margin-bottom:5px;letter-spacing:-.025em}
.task-app>p {font-size:8px;color:#a0aabc;margin-bottom:13px}
.task-filters {background:#111827;border:1px solid #263042;border-radius:10px;padding:9px;margin-bottom:12px}
.task-filters>div {display:flex;gap:4px;font-size:8px;color:#a0aabb;margin-bottom:6px}
.task-filters span,.task-filters b {padding:5px 8px;font-weight:400}
.task-filters b {background:#282647;color:#bebeff;border-radius:5px}
.task-filters .task-search {margin:0;padding:6px 8px;border:1px solid #2b3445;border-radius:6px}
.task-project {background:#111827;border:1px solid #283245;border-radius:10px;margin-bottom:10px;overflow:hidden}
.task-project header {display:flex;justify-content:space-between;background:#1a2038;padding:9px;font-size:9px;color:#cbd0e2}
.task-project header>span {font-size:8px;color:#98a4bc}
.task-item {display:flex;gap:7px;align-items:center;padding:10px 8px;border-top:1px solid #252e40;font-size:9px;font-weight:500}
.task-item>i {width:10px;height:10px;border:1px solid #788398;border-radius:3px;font-size:8px;font-style:normal;text-align:center;line-height:10px}
.task-item>span {flex:1}
.task-item small {display:block;font-size:7px;color:#abb4c7;margin-top:5px}
.task-item em {font-style:normal;color:#c2bcfa;background:#2b2849;border-radius:3px;padding:2px 3px;margin-right:3px}
.task-item>b {font-size:7px;background:#393051;color:#dbcef7;padding:4px;border-radius:50%}
.task-done {color:#9ba7ba}.task-done i{background:#137961;color:#ddfff2;border:0}
.task-add {position:absolute;bottom:58px;right:18px;border-radius:50%;width:33px;height:33px;background:#5940e8;font-size:26px;text-align:center;line-height:30px;box-shadow:0 4px 12px #000}
.task-bottom {position:absolute;bottom:15px;left:0;right:0;padding:12px 10px;display:flex;justify-content:space-around;background:#111827;border-top:1px solid #273145;font-size:8px;color:#a7afbf}
.task-bottom b {color:#b9aeff}
.device-home {position:absolute;bottom:5px;left:35%;width:30%;height:3px;background:#e9e9ec;border-radius:5px}
@media(max-width:899px) {
 .admin-preview {width:100%;min-height:400px}.admin-sidebar{display:none}.admin-main{padding:12px}
 .admin-header strong{font-size:19px}.admin-mobile-nav{display:flex;gap:3px;margin-bottom:12px}.admin-mobile-nav button{font-size:10px;min-height:38px;padding:7px 9px}.admin-mobile-nav svg{display:none}
 .admin-kpis {grid-template-columns:repeat(2,minmax(0,1fr))}.admin-kpi strong{font-size:19px}.admin-kpi small{font-size:9px}.admin-kpi em{font-size:8px}
 .admin-chart{padding:12px 10px}.admin-panel{min-height:340px}
 .device-scene{height:600px}.device-body{width:270px;height:555px;transform:rotateY(-20deg) rotateX(5deg) rotateZ(-9deg)}
 .service-scene--funnels .service-art{max-width:350px;min-height:380px}.fn-stage{padding:14px 12px;gap:10px}.fn-s-ico{width:28px;height:28px}.fn-s-lbl{font-size:.78rem}.fn-s-cnt{font-size:1rem}
 .consult-preview{max-width:290px}.consult-preview img{height:335px}.consult-caption{left:-20px;padding:14px 18px;border-radius:13px}
}
.task-bottom {bottom:0;padding-bottom:21px;z-index:3}
.device-home {z-index:5}

.finance-screenshot {width:118%;flex-shrink:0;max-width:760px;border:1px solid #293246;border-radius:12px;overflow:hidden;background:#060a15;box-shadow:0 30px 65px -25px #000}
.finance-screenshot img {display:block;width:100%;height:auto}
@media(max-width:899px) {.finance-screenshot {width:100%}}

/* The photographed frame and screen share a flat plane; no synthetic second bezel. */
.device-scene {position:relative;isolation:isolate;perspective:none}
.device-body {transform:rotate(-9deg);transform-style:flat;margin-left:85px;z-index:1;filter:drop-shadow(14px 24px 22px rgba(0,0,0,.5))}
.device-frame {transform:none}
.app-tile {position:absolute;z-index:2;width:174px;height:174px;left:calc(50% - 215px);top:53%;border-radius:39px;background:linear-gradient(145deg,#41414a 0%,#18181e 36%,#0d0d12 100%);border:1px solid #62616c;transform:perspective(700px) rotateY(-15deg) rotateX(9deg) rotateZ(-12deg);box-shadow:1px 1px #44434c,2px 2px #393840,3px 3px #34333b,4px 4px #2f2e36,5px 5px #292830,6px 6px #25242b,7px 7px #222128,8px 8px #1c1b22,9px 9px #19181f,10px 10px #15141a,15px 25px 32px -10px #000,inset 0 1px 1px rgba(255,255,255,.25)}
.app-tile::before {content:'';position:absolute;inset:-30%;z-index:-1;border-radius:50%;background:radial-gradient(ellipse,rgba(161,141,231,.23),transparent 65%);pointer-events:none}
.app-tile img {display:block;width:100%;height:100%;padding:31px;filter:drop-shadow(0 2px 2px #000)}
.consult-preview {transform:none;max-width:365px}
.portrait-frame {position:relative;isolation:isolate}
.portrait-frame::before {content:'';position:absolute;inset:-17px;border:1px solid rgba(177,151,241,.35);border-radius:117px 117px 28px 28px;box-shadow:0 12px 55px -20px rgba(140,103,232,.65);z-index:-1;animation:portrait-breathe 5s ease-in-out infinite}
.portrait-frame::after {content:'';position:absolute;inset:-42px;z-index:-2;border-radius:50%;background:radial-gradient(ellipse,rgba(153,115,231,.2),transparent 70%);pointer-events:none}
.consult-preview .consult-caption {position:relative;left:auto;bottom:auto;transform:none;border:0;border-radius:0;background:none;backdrop-filter:none;box-shadow:none;padding:26px 0 0;margin-top:15px}
.consult-caption::before {content:'';position:absolute;top:0;left:0;width:100%;height:1px;background:linear-gradient(90deg,#a78bfa,rgba(167,139,250,.05))}
.consult-caption strong {font-size:23px;font-weight:600;letter-spacing:-.02em}
.consult-caption span {font-size:15px;margin-top:5px;color:#c1b5d7}
@keyframes portrait-breathe {0%,100%{opacity:.45;transform:scale(.995)}50%{opacity:1;transform:scale(1.025)}}
@media(max-width:899px){
 .device-body {transform:rotate(-8deg) scale(.93);margin-left:45px;width:270px;height:555px}
 .app-tile {width:126px;height:126px;left:calc(50% - 166px);top:57%;border-radius:29px}
 .app-tile img {padding:23px}
 .device-scene {height:580px}
 .consult-preview {margin:0 auto;max-width:290px;width:85%}
 .consult-caption strong {font-size:22px}.consult-caption span{font-size:14px}
}
@media(prefers-reduced-motion:reduce){.portrait-frame::before{animation:none;opacity:.7;transform:none}}

/* One shared plane aligns the screen, bezel and subtle side edge. */
.device-body {transform:perspective(1000px) rotateY(-14deg) rotateZ(-8deg);filter:none}
.device-body::before {content:'';position:absolute;inset:1px;border-radius:46px;background:#17191d;box-shadow:1px 0 #b8bcc2,2px 0 #747a84,3px 0 #a9aeb6,4px 0 #42474e,5px 0 #777c83,7px 2px #22262c,16px 28px 32px -12px #000;z-index:-1}
.device-screen {inset:2% 4.4%;border-radius:14% / 6.5%;transform:none}
.device-frame {transform:none;object-fit:fill}
.app-tile {background:linear-gradient(145deg,#575961 0%,#26272d 18%,#121319 55%,#090a10 100%);border-color:#777983;box-shadow:inset 1px 2px 2px #92939a,inset -2px -3px 5px #000,1px 2px #555760,2px 4px #42444b,3px 6px #31343b,4px 8px #292c33,5px 10px #20232a,6px 12px #171a21,16px 28px 30px -10px #000}
.app-tile img {padding:34px;filter:drop-shadow(0 1px 0 #bebecb) drop-shadow(0 4px 2px #000)}
/* Crop only browser chrome; the original screenshot and all figures stay intact. */
.finance-screenshot {aspect-ratio:2940 / 1846}
.finance-screenshot img {width:100.8%;max-width:none;transform:translateY(-3.45%)}
.consult-preview .consult-caption {position:absolute;left:24px;right:16px;bottom:24px;margin:0;padding:0;z-index:2}
.consult-caption::before {display:none}
.consult-caption strong {font-size:25px;color:#fff}
.consult-caption span {font-size:13px;color:#e1dbea;letter-spacing:.02em}
.portrait-frame {overflow:hidden;border-radius:100px 100px 16px 16px}
.portrait-frame::before {display:none}
.portrait-frame::after {inset:45% 0 0;border-radius:0;z-index:1;background:linear-gradient(transparent,rgba(8,9,16,.92));pointer-events:none}
.consult-preview {filter:none}
.is-pinned .service-scene.is-active {transform:translateY(var(--scene-drift,0px))}
.is-pinned .service-scene:not(.is-active) *::before,.is-pinned .service-scene:not(.is-active) *::after {animation-play-state:paused}
@media(max-width:899px){
 .device-body {transform:perspective(1000px) rotateY(-14deg) rotateZ(-8deg) scale(.93)}
 .app-tile img {padding:24px}
 .consult-caption strong {font-size:22px}
 .services.is-compact {height:270svh}
 .is-compact .services-stage {height:100svh;overflow:hidden}
 .is-compact .service-scene {display:flex;flex-direction:column;justify-content:center;gap:18px;padding:85px 24px 62px}
 .is-compact .service-copy {flex:none;width:100%;max-width:500px;align-self:center}
 .is-compact .service-number {font-size:2.7rem;margin-bottom:6px}
 .is-compact .service-copy h2 {font-size:clamp(1.3rem,4.9vw,1.9rem);margin-bottom:10px}
 .is-compact .service-copy p {font-size:.92rem;line-height:1.5;max-width:36ch}
 .is-compact .srv__cta-wrap {margin-top:14px}
 .is-compact .service-art {height:clamp(230px,35svh,350px);min-height:0;flex:none;max-width:480px}
 .is-compact .device-scene {height:100%;transform:scale(.52);transform-origin:center}
 .is-compact .device-body {flex-shrink:0}
 .is-compact .app-tile {top:65%}
 .is-compact .fn {transform:scale(.8);width:100%}
 .is-compact .consult-preview {width:210px;max-width:65%}
 .is-compact .consult-preview img {height:clamp(230px,35svh,350px)}
 .is-compact .consult-caption {left:15px;bottom:18px}
 .is-compact .consult-caption strong {font-size:19px}
 .is-compact .consult-caption span {font-size:11px}
 .is-compact  .is-compact .website-preview {max-width:390px}
 .is-compact .finance-screenshot {max-width:440px}
}

/* Front-on phone; only the app tile has an extruded edge. */
.device-body {transform:none;filter:drop-shadow(0 18px 20px rgba(0,0,0,.45))}
.device-body::before {display:none}
.app-tile {transform:rotate(-8deg);border-radius:23%;background:linear-gradient(145deg,#42444d,#171920 65%);box-shadow:inset 1px 1px 2px #8b8d97,inset -1px -1px 2px #07080c,1px 1px #454750,2px 2px #41434c,3px 3px #3b3d46,4px 4px #353740,5px 5px #2e3039,6px 6px #272932,7px 7px #20222b,8px 8px #191b24,14px 22px 24px -8px #000}
.consult-preview::before {content:'';position:absolute;inset:-10px;border:1px solid rgba(180,158,244,.38);border-radius:110px 110px 26px 26px;box-shadow:0 0 30px rgba(133,104,212,.19);pointer-events:none;animation:portrait-halo 5s ease-in-out infinite}
@keyframes portrait-halo {0%,100%{opacity:.45}50%{opacity:1}}
@media(max-width:899px){
 .device-body {transform:scale(.93)}
 .is-compact .service-scene {transition:opacity 140ms ease,transform 140ms ease,visibility 140ms}
 .is-compact .service-scene--websites {gap:30px}
 .is-compact .website-preview {width:94%;max-width:360px;transform:none;margin-top:10px}
}
@media(prefers-reduced-motion:reduce){.consult-preview::before{animation:none}}

/* Keep the action anchored while the scene moves above it. */
.services-cta {display:none}
.is-pinned .service-copy .srv__cta-wrap {display:none}
.is-pinned .services-cta {display:inline-flex;position:absolute;bottom:94px;left:50%;transform:translateX(-50%);margin:0;white-space:nowrap;z-index:6}
.device-body {transform:rotate(8deg)}
.app-tile {box-shadow:inset 1px 1px 2px #8b8d97,inset -1px -1px 2px #07080c,1px 1px #565963,2px 2px #51545e,3px 3px #4c4f59,4px 4px #474a54,5px 5px #42454f,6px 6px #3d404a,7px 7px #383b45,8px 8px #333640,9px 9px #2e313b,10px 10px #292c36,11px 11px #242731,12px 12px #1f222c,13px 13px #1a1d27,14px 14px #151822,19px 27px 24px -8px #000}
.app-tile::before {opacity:.35}
@media(max-width:899px){
 .device-body {transform:rotate(8deg) scale(.93)}
 .service-number {font-size:8.125rem}
 .is-compact .service-number {font-size:4.3875rem}
 .is-compact .service-scene {padding-bottom:140px}
 .is-compact .services-cta {bottom:62px}
}
@media(min-width:390px) and (max-width:899px) and (min-height:800px){
 .is-compact .device-scene {transform:scale(.62)}
}

@media(max-width:899px){
 .is-compact .service-scene--websites {gap:40px}
 .is-compact .service-scene--funnels {gap:54px}
 .is-compact .service-scene--mobile {gap:50px}
 .is-compact .service-scene--consulting {gap:32px}
}
@media(max-width:359px){
 .is-compact .fn {transform:scale(.74)}
}