/* Assistora motion layer.
   Base rules give a complete static page; scroll scenes only switch on under .motion-on,
   which assistora-motion.js adds when GSAP loads and reduced motion is not requested. */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body::after{content:'';position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.wi{display:inline-block;will-change:transform}
.manifesto-words .w{overflow:visible}

/* ---------- Hero: canvas sequence over the idle loop ---------- */
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:0;pointer-events:none}
.hero-idle-video{opacity:1}
.motion-on .hero-canvas{opacity:var(--seq-opacity,0)}
.motion-on .hero-idle-video{opacity:calc(1 - var(--seq-opacity,0))}
.motion-on .story{height:270svh}
.motion-on .hero-frame{position:sticky;top:12px;height:calc(100svh - 24px);min-height:0}
.motion-on .hero-scene{min-height:0;height:100%}
.hero-line{display:inline-block}
.motion-on .hero-copy .hero-line{transform:translate3d(var(--line-x,0),0,0);opacity:var(--intro-opacity,1)}
.motion-on .hero-copy .hero-line:nth-of-type(1){--line-x:calc(var(--intro-out,0) * -90px)}
.motion-on .hero-copy .hero-line:nth-of-type(2){--line-x:calc(var(--intro-out,0) * -150px)}
.motion-on .hero-copy em.hero-line{--line-x:calc(var(--intro-out,0) * -220px)}
.motion-on .hero-copy{filter:blur(calc(var(--intro-out,0) * 6px))}
.hero-scrub-hint{display:none}
.motion-on .hero-scrub-hint{position:absolute;z-index:5;right:clamp(26px,4.4vw,70px);top:50%;display:flex;flex-direction:column;align-items:center;gap:12px;transform:translateY(-50%);opacity:var(--hint-opacity,0);pointer-events:none;color:#11110f}
.hero-scrub-hint__track{display:block;width:2px;height:120px;border-radius:2px;background:rgba(17,17,15,.16);overflow:hidden}
.hero-scrub-hint__track i{display:block;width:100%;height:100%;background:#11110f;transform:scaleY(var(--camera,0));transform-origin:top}
.hero-scrub-hint__label{writing-mode:vertical-rl;font-size:9px;letter-spacing:.14em;text-transform:uppercase;background:rgba(243,240,232,.86);padding:10px 5px;border-radius:999px}
.scroll-cue span{display:inline-block;animation:cue-bob 1.8s cubic-bezier(.45,0,.2,1) infinite}
@keyframes cue-bob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(4px)}}
@media(max-width:899px) and (orientation:portrait){.hero-canvas{background:#d5d6d4}.motion-on .story{height:250svh}}
@media(max-width:599px){.motion-on .hero-scrub-hint{right:12px;top:110px;transform:none}.hero-scrub-hint__track{height:60px}}

/* ---------- Floating dock ---------- */
.dock{position:fixed;z-index:60;top:14px;left:50%;display:flex;align-items:center;gap:18px;padding:7px 7px 7px 18px;background:rgba(243,240,232,.8);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);border:1px solid rgba(17,17,15,.09);border-radius:999px;box-shadow:0 10px 40px -12px rgba(17,17,15,.28);transform:translate3d(-50%,-160%,0);transition:transform .6s cubic-bezier(.2,.8,.2,1);overflow:hidden}
.dock.is-visible{transform:translate3d(-50%,0,0)}
.dock:focus-within{transform:translate3d(-50%,0,0)}
.dock__brand{display:block;line-height:0}.dock__brand img{width:92px;height:auto}
.dock__label{display:flex;gap:9px;align-items:baseline;font-size:11px;min-width:150px;color:#3a3a37}
.dock__index{font-variant-numeric:tabular-nums;font-size:9px;letter-spacing:.1em;color:#7a7a76}
.dock__name{display:inline-block;transition:opacity .25s,transform .25s}
.dock__name.is-swapping{opacity:0;transform:translateY(6px)}
.dock__cta{display:flex;align-items:center;gap:14px;background:var(--ink);color:#f3f0e8;font-size:12px;font-weight:500;padding:11px 16px;border-radius:999px}
.dock__cta span{font-size:15px;line-height:1}
.dock__progress{position:absolute;left:18px;right:18px;bottom:0;height:2px;background:rgba(17,17,15,.06)}
.dock__progress i{display:block;height:100%;background:var(--ink);transform:scaleX(var(--page-progress,0));transform-origin:left}
@media(max-width:699px){
  .dock{top:auto;bottom:calc(12px + env(safe-area-inset-bottom));width:calc(100% - 24px);justify-content:space-between;gap:10px;padding:6px 6px 6px 14px;transform:translate3d(-50%,170%,0)}
  .dock.is-visible,.dock:focus-within{transform:translate3d(-50%,0,0)}
  .dock__brand img{width:78px}.dock__label{min-width:0;flex:1;font-size:10px;justify-content:center}.dock__cta{padding:11px 14px;font-size:11px}
}

/* ---------- Custom cursor (fine pointers only) ---------- */
.cursor{display:none}
.has-cursor .cursor{display:block;position:fixed;left:0;top:0;z-index:100;pointer-events:none;mix-blend-mode:difference;color:#fff}
.cursor__dot,.cursor__ring{position:fixed;left:0;top:0;border-radius:50%;transform:translate3d(var(--cx,-100px),var(--cy,-100px),0) translate(-50%,-50%)}
.cursor__dot{width:6px;height:6px;background:#fff}
.cursor__ring{display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(255,255,255,.75);transform:translate3d(var(--rx,-100px),var(--ry,-100px),0) translate(-50%,-50%) scale(var(--rs,1));transition:width .35s cubic-bezier(.2,.8,.2,1),height .35s cubic-bezier(.2,.8,.2,1),background .35s}
.cursor__label{font:500 10px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;opacity:0;transition:opacity .2s;color:#000}
.cursor.is-link .cursor__ring{width:56px;height:56px}
.cursor.is-label .cursor__ring{width:92px;height:92px;background:#fff}
.cursor.is-label .cursor__label{opacity:1}
.cursor.is-hidden{opacity:0}

/* ---------- 02 Manifesto: an inline pill opens into the whole scene ---------- */
.manifesto{position:relative;margin:12px 12px 0}
.manifesto-stage{position:relative;isolation:isolate;overflow:clip;border-radius:22px;background:#ecebe6;min-height:calc(100svh - 24px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:48px;padding:110px clamp(24px,5vw,80px)}
.manifesto-window{position:absolute;inset:0;z-index:-1;display:none}
.shader{position:absolute;inset:0;width:100%;height:100%;display:block}
.manifesto-scrim{position:absolute;inset:0;background:#0b0b0a;opacity:var(--scrim,0)}
.manifesto-kicker{position:absolute;top:34px;left:clamp(26px,4.4vw,70px);color:var(--kicker,#11110f)}
.manifesto-title{font-family:var(--heading);font-weight:460;font-variation-settings:'wdth' 80;font-size:clamp(42px,8.2vw,140px);line-height:.96;letter-spacing:-.06em;text-align:center;color:var(--title-color,#11110f)}
.mt-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;column-gap:.24em}
.manifesto-title em{font-family:var(--serif);font-weight:400;font-size:1.06em;letter-spacing:-.04em}
.manifesto-pill{display:inline-block;width:2.05em;height:.8em;border-radius:999px;background:radial-gradient(circle at 35% 40%,#8f8e8a,#2a2a28 70%);vertical-align:middle}
.manifesto-words{max-width:880px;text-align:center;font-family:var(--heading);font-weight:430;font-variation-settings:'wdth' 88;font-size:clamp(24px,3.1vw,48px);line-height:1.14;letter-spacing:-.035em;color:#11110f}
.manifesto-meter{display:none}
.motion-on .manifesto{height:360svh}
.motion-on .manifesto-stage{position:sticky;top:12px;height:calc(100svh - 24px);min-height:0;padding:0;display:grid;place-items:center;gap:0}
.motion-on .manifesto-window{display:block;clip-path:inset(var(--wt,45%) var(--wr,45%) var(--wb,45%) var(--wl,45%) round var(--wrad,999px));will-change:clip-path}
.motion-on .manifesto-pill{background:transparent;box-shadow:inset 0 0 0 1px rgba(17,17,15,.18)}
.motion-on .manifesto-title{grid-area:1/1;transform:translate3d(0,var(--title-y,0px),0) scale(var(--title-s,1));opacity:var(--title-o,1);will-change:transform,opacity}
.motion-on .manifesto-words{grid-area:1/1;color:#f3f0e8;padding:0 24px;visibility:var(--words-vis,hidden)}
.motion-on .manifesto-words .wi{opacity:.14;transition:none}
.motion-on .manifesto-meter{position:absolute;left:clamp(26px,4.4vw,70px);right:clamp(26px,4.4vw,70px);bottom:30px;display:flex;align-items:center;gap:18px;font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--kicker,#11110f)}
.manifesto-meter__bar{flex:1;height:1px;background:currentColor;opacity:.35;overflow:hidden;position:relative}
.manifesto-meter__bar i{position:absolute;inset:0;background:currentColor;transform:scaleX(var(--mprog,0));transform-origin:left}
@media(max-width:699px){
  .manifesto-title{font-size:clamp(40px,13vw,64px)}
  .manifesto-words{font-size:clamp(23px,7vw,32px);line-height:1.18}
  .manifesto-kicker{top:24px;left:24px;font-size:8px}
  .motion-on .manifesto-meter{bottom:84px;left:24px;right:24px;font-size:8px}
}

/* ---------- De la idea a algo real: the hand assembles with the scroll ---------- */
.idea-scene{position:relative;margin:12px}
.idea-stage{position:relative;isolation:isolate;overflow:clip;border-radius:22px;background:#c4c4c0;color:#171715;display:grid;grid-template-columns:minmax(0,47fr) minmax(0,53fr);min-height:calc(100svh - 24px)}
.idea-media{position:relative;grid-column:2;grid-row:1;min-height:560px;overflow:hidden}
.idea-poster,.idea-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.idea-canvas{opacity:0}
.idea-orbit{position:absolute;inset:0;pointer-events:none;display:none}
.idea-media::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#c4c4c0 0%,rgba(196,196,192,.55) 14%,rgba(196,196,192,0) 34%)}
@media(max-width:899px){.idea-media::after{background:linear-gradient(0deg,#c4c4c0 0%,rgba(196,196,192,0) 30%)}}
.idea-copy{grid-column:1;grid-row:1;align-self:center;padding:80px 0 80px clamp(30px,6vw,100px);position:relative;z-index:2}
.idea-beats{display:grid;gap:42px;margin-top:30px}
.idea-beat__n{display:block;font-size:10px;letter-spacing:.14em;opacity:.6;margin-bottom:14px}
.idea-beat h3{font-family:var(--heading);font-weight:450;font-variation-settings:'wdth' 85;font-size:clamp(38px,4.6vw,74px);line-height:1;letter-spacing:-.055em}
.idea-beat h3 em{font-family:var(--serif);font-weight:400;font-size:1.12em;letter-spacing:-.04em}
.idea-beat>p{font-size:15px;line-height:1.75;max-width:360px;margin-top:22px}
.idea-steps{display:none}
.idea-progress{display:none}
.motion-on .idea-scene{height:400svh}
.motion-on .idea-stage{position:sticky;top:12px;height:calc(100svh - 24px);min-height:0}
.motion-on .idea-media{min-height:0;clip-path:circle(var(--reveal,16%) at 50% 50%);will-change:clip-path}
.motion-on .idea-canvas{opacity:1;transform:scale(var(--idea-zoom,1.12));will-change:transform}
.motion-on .idea-orbit{display:block;transform:rotate(var(--spin,0deg));opacity:var(--orbit-o,1)}
.idea-orbit span{position:absolute;left:50%;top:50%;border:1px dashed rgba(23,23,21,.35);border-radius:50%;transform:translate(-50%,-50%)}
.idea-orbit span:nth-child(1){width:38vmin;height:38vmin}
.idea-orbit span:nth-child(2){width:52vmin;height:52vmin;border-style:solid;border-color:rgba(23,23,21,.14)}
.idea-orbit span:nth-child(3){width:66vmin;height:66vmin;border-color:rgba(23,23,21,.1)}
.motion-on .idea-beats{display:grid;gap:0;margin-top:26px}
.motion-on .idea-beat{grid-area:1/1;visibility:hidden;pointer-events:none}
.motion-on .idea-beat.is-current{visibility:visible;pointer-events:auto}
.motion-on .idea-beat .wi{transform:translate3d(0,110%,0);transition:transform .75s cubic-bezier(.2,.85,.2,1)}
.motion-on .idea-beat.is-current .wi{transform:none;transition-delay:calc(var(--wi,0) * 28ms + 120ms)}
.motion-on .idea-beat>p,.motion-on .idea-beat__n{opacity:0;transform:translateY(14px);transition:opacity .4s,transform .6s cubic-bezier(.2,.85,.2,1)}
.motion-on .idea-beat.is-current>p,.motion-on .idea-beat.is-current .idea-beat__n{opacity:1;transform:none;transition-delay:.3s}
.motion-on .idea-steps{display:flex;gap:10px;margin-top:40px;max-width:420px}
.idea-steps li{flex:1}
.idea-steps button{width:100%;display:flex;gap:10px;align-items:baseline;background:none;border:0;border-top:1px solid rgba(23,23,21,.25);padding:12px 0 6px;font-size:11px;letter-spacing:.04em;color:inherit;text-align:left;opacity:.45;transition:opacity .25s,border-color .25s}
.idea-steps button span{font-size:9px;opacity:.7}
.idea-steps button[aria-current]{opacity:1;border-top-color:#171715}
.idea-steps button:hover{opacity:1}
.motion-on .idea-progress{display:block;position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(23,23,21,.1)}
.idea-progress i{display:block;height:100%;background:#171715;transform:scaleX(var(--idea-p,0));transform-origin:left}
@media(max-width:899px){
  .idea-stage{grid-template-columns:1fr;grid-template-rows:auto auto}
  .idea-media{grid-column:1;grid-row:1;min-height:0;aspect-ratio:852/1064;max-height:70svh}
  .idea-copy{grid-column:1;grid-row:2;padding:30px 24px 40px}
  .motion-on .idea-stage{grid-template-rows:minmax(0,1fr) auto}
  .motion-on .idea-media{aspect-ratio:auto;max-height:none}
  .motion-on .idea-copy{padding:18px 24px 30px;background:linear-gradient(0deg,#c4c4c0 82%,rgba(196,196,192,0))}
  .idea-beat h3{font-size:clamp(30px,9vw,46px)}
  .idea-beat>p{font-size:13px;line-height:1.6;margin-top:12px}
  .motion-on .idea-beats{margin-top:14px}
  .motion-on .idea-steps{margin-top:20px}
  .idea-orbit span:nth-child(1){width:58vw;height:58vw}.idea-orbit span:nth-child(2){width:78vw;height:78vw}.idea-orbit span:nth-child(3){width:98vw;height:98vw}
}
@media(max-width:899px) and (max-height:700px){.idea-beat h3{font-size:28px}.motion-on .idea-beat>p{display:none}}

/* ---------- Marquee ---------- */
.marquee{overflow:hidden;padding:clamp(40px,7vw,90px) 0;white-space:nowrap;user-select:none}
.marquee__track{display:inline-flex;align-items:center;gap:.35em;font-family:var(--heading);font-weight:450;font-variation-settings:'wdth' 80;font-size:clamp(64px,11vw,184px);line-height:1;letter-spacing:-.06em;will-change:transform;transform:skewX(var(--skew,0deg))}
.marquee__track em{font-family:var(--serif);font-weight:400;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px #11110f}
.marquee__track i{font-style:normal;font-size:.32em;opacity:.55}

/* ---------- 03 Services: a pinned horizontal gallery ---------- */
.services-x{padding-top:40px}
.services-x__intro{max-width:1440px;margin:0 auto;padding:0 clamp(30px,6.2vw,100px)}
.services-x__intro h2{font-family:var(--heading);font-weight:430;font-variation-settings:'wdth' 92;font-size:clamp(36px,4.1vw,61px);letter-spacing:-.05em;line-height:1.12;margin-top:24px}
.services-x__intro h2 em{font-family:var(--serif);font-size:1.14em;font-weight:400;letter-spacing:-.035em}
.hscroll{margin-top:48px}
.hscroll__stage{position:relative}
.hscroll__track{display:flex;gap:clamp(14px,2vw,28px);padding:0 clamp(18px,6.2vw,100px) 10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.hscroll__track::-webkit-scrollbar{display:none}
.hpanel{position:relative;flex:none;width:min(70vw,1080px);height:min(74svh,760px);min-height:520px;border-radius:22px;overflow:hidden;background:#d8d8d4;color:#11110f;scroll-snap-align:center;isolation:isolate}
.hpanel__media{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hpanel__body{position:absolute;left:24px;bottom:24px;width:min(450px,calc(100% - 48px));background:rgba(243,240,232,.86);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:16px;padding:26px 28px 22px}
.hpanel--dark .hpanel__body{background:rgba(17,17,15,.66);color:#f3f0e8}
.hpanel__num{position:absolute;right:6px;bottom:calc(100% - 22px);font-family:var(--heading);font-weight:450;font-variation-settings:'wdth' 80;font-size:clamp(90px,11vw,190px);line-height:.8;letter-spacing:-.07em;color:transparent;-webkit-text-stroke:1.2px #fff;filter:drop-shadow(0 2px 14px rgba(0,0,0,.45));pointer-events:none}
.hpanel__tags{font-size:8px;letter-spacing:.13em;opacity:.7}
.hpanel__body h3{font-family:var(--heading);font-weight:430;font-variation-settings:'wdth' 88;font-size:clamp(26px,2.4vw,38px);line-height:1.08;letter-spacing:-.045em;margin-top:12px}
.hpanel__body h3 em{display:block;font-family:var(--serif);font-weight:400;font-size:1.1em;letter-spacing:-.035em}
.hpanel__body>p:not(.hpanel__tags){font-size:13px;line-height:1.7;margin-top:12px;opacity:.86}
.hpanel__flip{display:flex;width:100%;justify-content:space-between;align-items:center;margin-top:14px;padding:10px 0 2px;border:0;border-top:1px solid currentColor;border-top-color:rgba(127,127,120,.4);background:none;color:inherit;font-size:12px}
.hpanel__flip span{font-size:20px;line-height:1;transition:transform .3s}
.hpanel__flip[aria-expanded="true"] span{transform:rotate(45deg)}
.hpanel__example{font-size:12px!important;line-height:1.7;margin-top:8px!important;animation:example-in .45s cubic-bezier(.2,.85,.2,1)}
@keyframes example-in{from{opacity:0;transform:translateY(8px)}}
.hpanel--end{background:transparent;width:min(44vw,560px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:26px;padding:0 20px}
.hpanel-end__title{font-family:var(--heading);font-weight:450;font-variation-settings:'wdth' 85;font-size:clamp(40px,4.4vw,70px);line-height:1;letter-spacing:-.055em}
.hpanel-end__title em{font-family:var(--serif);font-weight:400;font-size:1.1em}
.hscroll__hud{display:none}
.services-x .technology-note{max-width:610px;font-size:12px;line-height:1.8;color:var(--gray);margin:36px clamp(30px,6.2vw,100px) 0 auto;padding-bottom:20px}
.motion-on .hscroll__stage{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:22px}
.motion-on .hscroll__track{overflow:visible;scroll-snap-type:none;width:max-content;will-change:transform;padding-bottom:0}
.motion-on .hscroll__hud{display:flex;align-items:center;gap:22px;padding:0 clamp(18px,6.2vw,100px);font-size:10px;letter-spacing:.1em}
.hscroll__count b{font-weight:500;font-variant-numeric:tabular-nums}
.hscroll__bar{flex:1;max-width:420px;height:1px;background:rgba(17,17,15,.18);position:relative;overflow:hidden}
.hscroll__bar i{position:absolute;inset:0;background:#11110f;transform:scaleX(var(--hs,0));transform-origin:left}
.hscroll__hint{margin-left:auto;opacity:calc(1 - var(--hs,0) * 3)}
@media(max-width:699px){
  .services-x{padding-top:20px}
  .services-x__intro{padding:0 24px}
  .services-x__intro h2{font-size:34px}
  .services-x__intro>p:last-child{font-size:13px}
  .hscroll__track{padding:0 16px 10px;gap:12px}
  .hpanel{width:86vw;height:72svh;min-height:470px;border-radius:18px}
  .hpanel__body{left:10px;right:10px;bottom:10px;width:auto;padding:18px 18px 14px;border-radius:13px}
  .hpanel__num{font-size:96px}
  .hpanel__body h3{font-size:25px}
  .hpanel__body>p:not(.hpanel__tags){font-size:12.5px;line-height:1.6}
  .hpanel--end{width:78vw}
  .motion-on .hscroll__stage{gap:16px}
  .motion-on .hscroll__hud{padding:0 18px;font-size:9px}
  .services-x .technology-note{margin:28px 24px 0;font-size:11px}
}
@media(max-width:699px) and (max-height:720px){.hpanel{height:68svh;min-height:430px}.hpanel__body>p:not(.hpanel__tags){display:none}}

/* ---------- 04 Loopra ---------- */
.case-study{overflow:hidden}
.case-wordmark{display:inline-block;transform-origin:left bottom}
.motion-on .case-wordmark{transform:translate3d(0,var(--lw-y,0),0) scale(var(--lw-s,1));letter-spacing:var(--lw-ls,-.075em)}
.case-journey li{transition:color .3s}
.motion-on .case-journey li{opacity:var(--o,.35)}

/* ---------- Así podría funcionar: silk scrubbed by scroll + live demo ---------- */
.flow-scene{position:relative;margin:12px}
.flow-stage{position:relative;isolation:isolate;overflow:clip;border-radius:22px;background:#050505;color:#f3f0e8;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:1fr auto;min-height:calc(100svh - 24px)}
.flow-media{position:absolute;inset:0;z-index:-1}
.flow-media{background:#050505}
.flow-media::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,5,5,.85),rgba(5,5,5,.15) 60%),linear-gradient(0deg,rgba(5,5,5,.7),transparent 35%)}
.flow-copy{grid-column:1;grid-row:1;align-self:center;padding:80px 0 30px clamp(30px,6vw,100px)}
.flow-beats{display:grid;gap:36px;margin-top:28px}
.flow-beat h2{font-family:var(--heading);font-weight:450;font-variation-settings:'wdth' 85;font-size:clamp(38px,4.5vw,70px);line-height:1.01;letter-spacing:-.055em}
.flow-beat h2 em{font-family:var(--serif);font-weight:400;font-size:1.14em;letter-spacing:-.04em}
.flow-beat>p{font-size:15px;line-height:1.75;max-width:360px;margin-top:20px;color:#cfcdc6}
.flow-diagram{grid-column:1/-1;grid-row:2;position:relative;padding:0 clamp(30px,6vw,100px) 50px}
.flow-line{position:absolute;left:calc(clamp(30px,6vw,100px) + 12.5% - clamp(30px,6vw,100px) * .25);right:calc(clamp(30px,6vw,100px) + 12.5% - clamp(30px,6vw,100px) * .25);top:7px;height:1px;background:rgba(243,240,232,.2)}
.flow-line i{position:absolute;inset:0;background:#f3f0e8;transform:scaleX(var(--line,1));transform-origin:left}
.flow-pulse{position:absolute;top:2px;left:calc(clamp(30px,6vw,100px) + (100% - 2 * clamp(30px,6vw,100px)) * (.125 + var(--pulse,0) * .75));width:11px;height:11px;margin-left:-5.5px;border-radius:50%;background:#fff;box-shadow:0 0 0 6px rgba(255,255,255,.12),0 0 28px 6px rgba(255,255,255,.55);opacity:var(--pulse-o,0)}
.flow-nodes{display:grid;grid-template-columns:repeat(4,1fr);text-align:center}
.flow-nodes li{display:flex;flex-direction:column;align-items:center;gap:6px}
.flow-dot{width:15px;height:15px;border-radius:50%;border:1px solid rgba(243,240,232,.55);background:#050505;transition:background .35s,box-shadow .35s,transform .35s}
.flow-nodes b{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;margin-top:8px}
.flow-nodes small{font-size:11px;color:#a9a7a0}
.flow-nodes li.is-lit .flow-dot,.flow-nodes li.is-ping .flow-dot{background:#f3f0e8;box-shadow:0 0 0 6px rgba(243,240,232,.12),0 0 24px rgba(243,240,232,.6);transform:scale(1.12)}
.flow-demo{grid-column:2;grid-row:1;align-self:center;justify-self:end;margin-right:clamp(24px,5vw,80px);width:min(380px,100%);display:flex;flex-direction:column;gap:14px}
.flow-demo__label{font-size:8px;letter-spacing:.14em;color:#a9a7a0}
.flow-card{background:rgba(243,240,232,.96);color:#11110f;border-radius:16px;padding:18px 20px;box-shadow:0 30px 80px -20px rgba(0,0,0,.6);min-height:190px}
.flow-card__head{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:500;padding-bottom:12px;border-bottom:1px solid rgba(17,17,15,.12)}
.flow-card__status{font-weight:400;color:#6b6b67;display:flex;align-items:center;gap:7px}
.flow-card__status::before{content:'';width:7px;height:7px;border-radius:50%;background:#b9b8b2}
.flow-card[data-state="arrived"] .flow-card__status::before{background:#11110f;animation:ping 1.2s infinite}
.flow-card[data-state="done"] .flow-card__status::before{background:#11110f}
@keyframes ping{50%{box-shadow:0 0 0 6px rgba(17,17,15,.12)}}
.flow-card__body{padding-top:14px}
.flow-card__empty{font-size:13px;line-height:1.6;color:#6b6b67}
.flow-card__request,.flow-card__done{display:none}
.flow-card[data-state="sending"] .flow-card__empty{opacity:.4}
.flow-card[data-state="arrived"] .flow-card__empty,.flow-card[data-state="done"] .flow-card__empty{display:none}
.flow-card[data-state="arrived"] .flow-card__request{display:block;animation:example-in .5s cubic-bezier(.2,.85,.2,1)}
.flow-card[data-state="done"] .flow-card__done{display:block;font-size:14px;line-height:1.6;animation:example-in .5s cubic-bezier(.2,.85,.2,1)}
.flow-card__title{font-size:15px;font-weight:500;letter-spacing:-.02em}
.flow-card__meta{font-size:11px;color:#6b6b67;margin-top:4px}
.flow-card__alert{font-size:12px;margin-top:12px;padding:8px 10px;background:rgba(17,17,15,.06);border-radius:8px}
.flow-card__actions{display:flex;gap:8px;margin-top:14px}
.flow-card__actions button{flex:1;border:1px solid #11110f;background:#11110f;color:#f3f0e8;border-radius:999px;padding:10px 12px;font-size:12px;transition:transform .15s}
.flow-card__actions button+button{background:transparent;color:#11110f}
.flow-card__actions button:active,.chip:active,.flow-send:active{transform:scale(.96)}
.flow-send{background:#f3f0e8;color:#11110f;border-radius:999px;justify-content:space-between}
.flow-send:hover{background:#fff}
.flow-send[disabled]{opacity:.5;cursor:default}
.flow-progress{display:none}
.motion-on .flow-scene{height:420svh}
.motion-on .flow-stage{position:sticky;top:12px;height:calc(100svh - 24px);min-height:0}
.motion-on .flow-beats{display:grid;gap:0}
.motion-on .flow-beat{grid-area:1/1;visibility:hidden}
.motion-on .flow-beat.is-current{visibility:visible}
.motion-on .flow-beat .wi{transform:translate3d(0,110%,0);transition:transform .75s cubic-bezier(.2,.85,.2,1)}
.motion-on .flow-beat.is-current .wi{transform:none;transition-delay:calc(var(--wi,0) * 28ms + 100ms)}
.motion-on .flow-beat>p{opacity:0;transform:translateY(12px);transition:opacity .4s,transform .6s}
.motion-on .flow-beat.is-current>p{opacity:1;transform:none;transition-delay:.3s}
.motion-on .flow-line i{transform:scaleX(var(--line,0))}
.motion-on .flow-demo{opacity:var(--demo,0);transform:translate3d(0,calc((1 - var(--demo,0)) * 40px),0);visibility:var(--demo-vis,hidden)}
.motion-on .flow-progress{display:block;position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(243,240,232,.1)}
.flow-progress i{display:block;height:100%;background:#f3f0e8;transform:scaleX(var(--flow-p,0));transform-origin:left}
@media(max-width:899px){
  .flow-stage{grid-template-columns:1fr;grid-template-rows:auto 1fr auto}
  .flow-copy{grid-column:1;grid-row:1;padding:56px 24px 0}
  .flow-demo{grid-column:1;grid-row:2;justify-self:center;margin:18px 24px;width:calc(100% - 48px);max-width:380px}
  .flow-diagram{grid-row:3;padding:0 24px 34px}
  .flow-line{left:calc(24px + (100% - 48px) * .125);right:calc(24px + (100% - 48px) * .125)}
  .flow-pulse{left:calc(24px + (100% - 48px) * (.125 + var(--pulse,0) * .75))}
  .flow-beat h2{font-size:clamp(30px,9vw,46px)}
  .flow-beat>p{font-size:13px;line-height:1.6;margin-top:12px}
  .flow-nodes b{font-size:9px;letter-spacing:.05em}
  .flow-nodes small{display:none}
  .flow-media::after{background:linear-gradient(180deg,rgba(5,5,5,.8),rgba(5,5,5,.2) 45%,rgba(5,5,5,.75))}
  .motion-on .flow-copy{padding-top:44px}
  .motion-on .flow-demo{align-self:center;margin-top:0;margin-bottom:0}
  .flow-card{min-height:0;padding:15px 16px}
}
@media(max-width:899px) and (max-height:720px){.motion-on .flow-beat>p{display:none}.flow-card__alert{margin-top:8px}}

/* ---------- 05 Process: cards that stack ---------- */
.process-stack{position:relative;margin:12px;border-radius:22px;overflow:clip;background:#e4e3df}
.process-bg{position:absolute;inset:0;z-index:0}
.process-bg{background:#e9e8e3}
.process-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(236,235,230,.6),rgba(236,235,230,.12) 45%,rgba(236,235,230,.5))}
.process-inner{position:relative;z-index:1;max-width:1440px;margin:0 auto;padding:112px clamp(24px,6.2vw,100px)}
.process-heading h2{font-family:var(--heading);font-weight:430;font-variation-settings:'wdth' 92;font-size:clamp(36px,4.1vw,61px);letter-spacing:-.05em;line-height:1.12;margin-top:24px}
.process-heading h2 em{font-family:var(--serif);font-size:1.14em;font-weight:400;letter-spacing:-.035em}
.stack{margin-top:60px;display:grid;gap:18px}
.stack-card{--i:0;position:relative;display:grid;grid-template-columns:minmax(120px,22%) 1fr;gap:6%;align-items:end;min-height:min(46svh,420px);padding:clamp(26px,3.6vw,52px);border-radius:20px;background:#f3f0e8;box-shadow:0 30px 70px -40px rgba(17,17,15,.5);overflow:hidden;transform-origin:50% 0}
.stack-card:nth-child(2){--i:1}.stack-card:nth-child(3){--i:2}.stack-card:nth-child(4){--i:3;background:#11110f;color:#f3f0e8}
.stack-card__n{font-family:var(--heading);font-weight:450;font-variation-settings:'wdth' 80;font-size:clamp(90px,12vw,200px);line-height:.8;letter-spacing:-.07em;align-self:start}
.stack-card__tag{font-size:9px;letter-spacing:.14em;opacity:.6}
.stack-card h3{font-family:var(--heading);font-weight:450;font-variation-settings:'wdth' 85;font-size:clamp(34px,4vw,64px);letter-spacing:-.05em;margin-top:12px}
.stack-card__body>p:last-child{font-size:15px;line-height:1.75;max-width:460px;margin-top:14px;opacity:.8}
.stack-card__shade{position:absolute;inset:0;background:#11110f;opacity:var(--shade,0);pointer-events:none}
.process-stack .project-terms{margin-top:56px;border-top-color:rgba(17,17,15,.2)}
.motion-on .process-bg{position:sticky;top:0;height:100svh;margin-bottom:-100svh;inset:auto}
.motion-on .stack{gap:16svh}
.motion-on .stack-card{position:sticky;top:calc(12svh + var(--i) * 22px)}
@media(max-width:699px){
  .process-inner{padding:64px 18px 70px}
  .process-heading{padding:0 6px}
  .process-heading h2{font-size:32px}
  .stack-card{grid-template-columns:1fr;gap:20px;min-height:340px;padding:24px;align-items:start}
  .stack-card__n{font-size:84px}
  .stack-card h3{font-size:34px}
  .stack-card__body>p:last-child{font-size:13px}
  .motion-on .stack-card{top:calc(9svh + var(--i) * 16px)}
  .motion-on .stack{gap:10svh}
}

/* ---------- 06 Builder ---------- */
.builder-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6%;margin-top:56px;align-items:start}
.chip-group+.chip-group{margin-top:30px}
.chip-group__label{font-size:12px;margin-bottom:12px;color:#4d4d4b}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid rgba(17,17,15,.28);background:transparent;color:#11110f;border-radius:999px;padding:11px 16px;font-size:13px;line-height:1.2;transition:background .2s,color .2s,border-color .2s,transform .15s}
.chip:hover{border-color:#11110f}
.chip[aria-pressed="true"]{background:#11110f;color:#f3f0e8;border-color:#11110f}
.chip[aria-pressed="true"]::before{content:'✓ ';font-size:.9em}
.builder-output{position:sticky;top:90px;background:#1c1c1b;color:#f4f4f1;border-radius:20px;padding:clamp(26px,3vw,44px);overflow:hidden}
.builder-output .eyebrow{color:#b1b1ae}
.builder-sentence{font-family:var(--serif);font-size:clamp(25px,2.5vw,38px);line-height:1.2;letter-spacing:-.02em;margin-top:18px;min-height:3.6em}
.builder-sentence .bw{display:inline-block;animation:word-in .5s cubic-bezier(.2,.85,.2,1) both;animation-delay:calc(var(--d,0) * 22ms)}
.builder-sentence mark{background:none;color:#fff;border-bottom:1px solid rgba(255,255,255,.4)}
@keyframes word-in{from{opacity:0;transform:translateY(.4em);filter:blur(4px)}}
.builder-modules-label{font-size:9px;letter-spacing:.13em;color:#b1b1ae;margin-top:30px}
.builder-modules{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;counter-reset:mod}
.builder-modules li{counter-increment:mod;display:flex;gap:10px;align-items:baseline;padding:12px 12px;border:1px solid rgba(255,255,255,.14);border-radius:10px;font-size:13px;line-height:1.35}
.builder-modules li::before{content:counter(mod,decimal-leading-zero);font-size:9px;color:#9a9a96}
.builder-modules li.is-new{animation:module-in .55s cubic-bezier(.2,.85,.2,1) both}
@keyframes module-in{from{opacity:0;transform:scale(.9) translateY(8px)}}
.builder-use{margin-top:28px;background:#f3f0e8;color:#11110f}
.builder-use:hover{background:#fff}
@media(max-width:899px){.builder-grid{grid-template-columns:1fr;gap:34px}.builder-output{position:relative;top:0}}
@media(max-width:599px){.builder-modules{grid-template-columns:1fr}.chip{padding:10px 13px;font-size:12.5px}.builder-sentence{font-size:25px}}

/* ---------- Outro: the mountains open before contact ---------- */
.outro{position:relative;margin:12px}
.outro-stage{position:relative;height:calc(100svh - 24px);min-height:520px;display:grid;place-items:center;isolation:isolate}
.outro-frame{position:absolute;inset:0;z-index:-1;border-radius:22px;overflow:hidden;background:#555}
.outro-frame{background:linear-gradient(#9a9b9b,#3c3d3e)}
.outro-frame::after{content:'';position:absolute;inset:0;background:rgba(10,10,9,.32)}
.outro-title{display:flex;flex-direction:column;align-items:center;text-align:center;color:#f3f0e8;font-family:var(--heading);font-weight:450;font-variation-settings:'wdth' 80;font-size:clamp(44px,8vw,132px);line-height:.98;letter-spacing:-.06em;padding:0 20px}
.outro-title em{font-family:var(--serif);font-weight:400;letter-spacing:-.04em;font-size:1.05em}
.motion-on .outro{height:220svh}
.motion-on .outro-stage{position:sticky;top:12px;min-height:0}
.motion-on .outro-frame{transform:scale(var(--os,.6));border-radius:var(--orad,60px);will-change:transform}
.motion-on .outro-title>*{display:block;opacity:var(--oo,0);transform:translate3d(0,calc((1 - var(--oo,0)) * 60px),0)}
.motion-on .outro-title>*:nth-child(2){opacity:var(--oo2,0);transform:translate3d(0,calc((1 - var(--oo2,0)) * 60px),0)}
.motion-on .outro-title>*:nth-child(3){opacity:var(--oo3,0);transform:translate3d(0,calc((1 - var(--oo3,0)) * 60px),0)}
@media(max-width:599px){.outro-title{font-size:clamp(40px,12.5vw,62px)}}

/* ---------- Contact refinements ---------- */
.contact{margin-top:12px}
.project-form textarea.is-filled{animation:field-flash 1.2s ease}
@keyframes field-flash{0%{background:rgba(17,17,15,.08)}100%{background:transparent}}

/* ---------- Generic reveals ---------- */
.motion-on [data-reveal]{opacity:0;transform:translate3d(0,26px,0)}
.motion-on [data-reveal].is-in{opacity:1;transform:none;transition:opacity .9s cubic-bezier(.2,.85,.2,1),transform 1s cubic-bezier(.2,.85,.2,1)}
.motion-on [data-split] .wi{transform:translate3d(0,110%,0)}
.motion-on [data-split].is-in .wi{transform:none;transition:transform 1s cubic-bezier(.2,.85,.2,1);transition-delay:calc(var(--wi,0) * 35ms)}
.motion-on .case-journey li,.motion-on .case-capabilities li,.motion-on .flow-step{will-change:opacity}
@media(prefers-reduced-motion:reduce){body::after{display:none}.scroll-cue span{animation:none}.dock{transition:none}}

/* Phones: keep pinned content clear of the floating dock. */
@media(max-width:699px){
  .motion-on .idea-copy{padding-bottom:88px}
  .motion-on .flow-diagram{padding-bottom:92px}
  .motion-on .hscroll__stage{padding-bottom:64px}
  .motion-on .manifesto-meter{bottom:90px}
}

/* ---------- Living particles: one cloud behind the page ---------- */
.particles{display:none}
.has-particles .particles{display:block;position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.has-particles .story,.has-particles main,.has-particles .site-footer{position:relative;z-index:1}
.p-anchor{position:absolute;left:0;width:1px;height:0;pointer-events:none}
.finale-anchor{top:auto;bottom:50svh}

.morph-scene{position:relative;padding:90px clamp(30px,6vw,100px)}
.morph-stage{position:relative}
.morph-copy{max-width:540px}
.morph-beats{display:grid;gap:40px;margin-top:28px}
.morph-beat__n{display:block;font-size:10px;letter-spacing:.14em;color:#6b6b67;margin-bottom:16px;font-variant-numeric:tabular-nums}
.morph-beat h2{font-family:var(--heading);font-weight:450;font-variation-settings:'wdth' 82;font-size:clamp(44px,5.6vw,92px);line-height:.98;letter-spacing:-.06em}
.morph-beat h2 em{font-family:var(--serif);font-weight:400;font-size:1.1em;letter-spacing:-.04em}
.morph-beat>p{font-size:15px;line-height:1.75;max-width:380px;margin-top:22px;color:#4d4d4b}
.morph-hint{display:none}
.has-particles.motion-on .morph-scene{height:440svh;padding:0}
.has-particles.motion-on .morph-stage{position:sticky;top:0;height:100svh;display:flex;align-items:center;padding:0 clamp(30px,6vw,100px)}
.has-particles.motion-on .morph-beats{gap:0}
.has-particles.motion-on .morph-beat{grid-area:1/1;visibility:hidden}
.has-particles.motion-on .morph-beat.is-current{visibility:visible}
.has-particles.motion-on .morph-beat .wi{transform:translate3d(0,110%,0);transition:transform .8s cubic-bezier(.2,.85,.2,1)}
.has-particles.motion-on .morph-beat.is-current .wi{transform:none;transition-delay:calc(var(--wi,0) * 30ms + 120ms)}
.has-particles.motion-on .morph-beat>p,.has-particles.motion-on .morph-beat__n{opacity:0;transform:translateY(12px);transition:opacity .4s,transform .6s cubic-bezier(.2,.85,.2,1)}
.has-particles.motion-on .morph-beat.is-current>p,.has-particles.motion-on .morph-beat.is-current .morph-beat__n{opacity:1;transform:none;transition-delay:.3s}
.has-particles .morph-hint{display:flex;gap:10px;align-items:center;margin-top:44px;font-size:11px;color:#6b6b67}
.morph-hint span{animation:hint-spin 6s linear infinite;display:inline-block}
@keyframes hint-spin{to{transform:rotate(360deg)}}
@media(max-width:899px){
  .has-particles.motion-on .morph-stage{align-items:flex-end;padding:0 24px 104px}
  .morph-beat h2{font-size:clamp(38px,11vw,56px)}
  .morph-beat>p{font-size:13px;line-height:1.6;margin-top:14px}
  .has-particles .morph-hint{margin-top:22px;font-size:10px}
}

.finale{position:relative;padding:60px 24px}
.finale-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:36px;text-align:center}
.finale-logo{width:min(420px,70vw);height:auto}
.finale-line{font-family:var(--heading);font-weight:450;font-variation-settings:'wdth' 85;font-size:clamp(28px,3.4vw,52px);line-height:1.05;letter-spacing:-.05em}
.finale-line em{font-family:var(--serif);font-weight:400;font-size:1.1em}
.finale-hint{display:none}
.has-particles.motion-on .finale{height:170svh;padding:0}
.has-particles.motion-on .finale-stage{position:sticky;top:0;height:100svh;justify-content:flex-end;padding:0 24px 9svh}
.has-particles .finale-logo{display:none}
.has-particles .finale-hint{display:block;font-size:11px;color:#6b6b67;margin-top:-18px}
@media(max-width:699px){.has-particles.motion-on .finale-stage{padding-bottom:120px}}

/* ---------- Service gallery: living example interfaces ---------- */
.hpanel__media--ui{background:linear-gradient(160deg,#e6e5e0,#cdccc6)}
.hpanel--dark .hpanel__media--ui{background:linear-gradient(160deg,#1b1b1a,#060606)}
.hpanel__bg{position:absolute;inset:-10% -12%;background-image:radial-gradient(rgba(17,17,15,.16) 1px,transparent 1.4px);background-size:22px 22px;transform:translate3d(var(--px,0),0,0);opacity:.8}
.hpanel--dark .hpanel__bg{background-image:radial-gradient(rgba(243,240,232,.14) 1px,transparent 1.4px)}
.mock{position:absolute;top:7%;right:5%;width:520px;transform:scale(var(--mock-scale,1));transform-origin:top right;font-family:var(--body);color:#11110f;background:#f7f6f2;border-radius:14px;box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 40px 80px -30px rgba(17,17,15,.45),0 0 0 1px rgba(17,17,15,.08);overflow:hidden}
.mock__bar{display:flex;align-items:center;gap:6px;padding:11px 14px;border-bottom:1px solid rgba(17,17,15,.08);background:#efeee9;font-size:11px;color:#77776f}
.mock__bar i{width:8px;height:8px;border-radius:50%;background:#d0cfc9}
.mock__bar span{margin-left:10px;flex:1;background:#fff;border-radius:6px;padding:4px 10px}
.mock__bar b{font-size:8px;letter-spacing:.14em;font-weight:600;color:#55554f;border:1px solid rgba(17,17,15,.18);border-radius:999px;padding:3px 7px}
.mock__body{position:relative;padding:18px 20px 20px}
@media(max-width:699px){.mock{top:5%;right:50%;transform:translateX(50%) scale(var(--mock-scale,1));transform-origin:top center}}

/* 01 bookings */
.booking-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.booking-head strong{font-family:var(--heading);font-weight:500;font-size:21px;letter-spacing:-.04em}
.booking-head span{font-size:11px;color:#77776f}
.booking-grid{display:grid;grid-template-columns:44px repeat(5,1fr);gap:6px;font-size:10px}
.booking-day{text-align:center;color:#77776f;letter-spacing:.06em;text-transform:uppercase;font-size:9px}
.booking-hour{color:#77776f;align-self:center;font-variant-numeric:tabular-nums}
.booking-cell{height:30px;border-radius:7px;border:1px dashed rgba(17,17,15,.2);background:#fff;transition:background .4s,border-color .4s,transform .4s}
.booking-cell.is-picking{border:1px solid #11110f;transform:scale(1.06);animation:cell-pulse .55s ease}
.booking-cell.is-booked{background:#11110f;border:1px solid #11110f}
.booking-cell.is-new{background:#3a3a37;box-shadow:0 0 0 4px rgba(17,17,15,.12)}
@keyframes cell-pulse{50%{box-shadow:0 0 0 6px rgba(17,17,15,.12)}}
.mock-toast{position:absolute;right:16px;bottom:14px;display:flex;gap:10px;align-items:center;background:#11110f;color:#f3f0e8;border-radius:12px;padding:10px 14px;box-shadow:0 18px 30px -12px rgba(0,0,0,.5);opacity:0;transform:translateY(12px)}
.mock-toast.is-shown{animation:toast 2.6s cubic-bezier(.2,.85,.2,1) forwards}
@keyframes toast{0%{opacity:0;transform:translateY(12px)}12%,80%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px)}}
.mock-toast b{display:block;font-size:12px;font-weight:500}
.mock-toast small{font-size:10px;color:#bdbbb4}
.mock-toast__dot{width:8px;height:8px;border-radius:50%;background:#f3f0e8;box-shadow:0 0 0 4px rgba(243,240,232,.18)}

/* 02 orders */
.panel-layout{display:grid;grid-template-columns:34px 1fr;gap:16px;padding-left:12px}
.panel-side{display:flex;flex-direction:column;gap:12px;padding-top:4px}
.panel-side i{display:block;width:22px;height:22px;border-radius:7px;background:#e3e2dc}
.panel-side i.is-on{background:#11110f}
.panel-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.panel-kpis>div{background:#fff;border:1px solid rgba(17,17,15,.07);border-radius:10px;padding:10px 12px}
.panel-kpis small{display:block;font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:#77776f}
.panel-kpis b{display:block;font-family:var(--heading);font-weight:500;font-size:26px;letter-spacing:-.04em;margin-top:2px;font-variant-numeric:tabular-nums}
.panel-rows{margin-top:12px;display:grid;gap:6px}
.panel-rows li{display:grid;grid-template-columns:48px 1fr 70px 72px;gap:10px;align-items:center;background:#fff;border-radius:9px;padding:8px 10px;font-size:11px;border:1px solid rgba(17,17,15,.06)}
.panel-rows li.is-flash{animation:row-flash .9s ease}
@keyframes row-flash{0%{background:#ecebe5}100%{background:#fff}}
.row-id{color:#77776f;font-variant-numeric:tabular-nums}
.row-bar{height:4px;border-radius:4px;background:#ecebe5;overflow:hidden}
.row-bar i{display:block;height:100%;background:#11110f;transform-origin:left;transition:transform .7s cubic-bezier(.2,.85,.2,1)}
.pill{justify-self:end;font-size:10px;border-radius:999px;padding:3px 9px;border:1px solid rgba(17,17,15,.25);transition:background .3s,color .3s}
li[data-state="1"] .pill{background:#e3e2dc;border-color:transparent}
li[data-state="2"] .pill{background:#11110f;color:#f3f0e8;border-color:#11110f}

/* 03 automation */
.mock--automation{background:#121211;color:#f3f0e8;box-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(243,240,232,.1)}
.mock--automation .mock__bar{background:#1a1a19;border-color:rgba(243,240,232,.08);color:#9a998f}
.mock--automation .mock__bar i{background:#3a3a37}
.mock--automation .mock__bar span{background:#0d0d0c}
.mock--automation .mock__bar b{color:#c9c7bf;border-color:rgba(243,240,232,.2)}
.flowmock-track{position:relative;padding:8px 0 4px}
.flowmock-line{position:absolute;left:12.5%;right:12.5%;top:20px;height:1px;background:rgba(243,240,232,.18)}
.flowmock-line i{position:absolute;inset:0;background:#f3f0e8;transform-origin:left;transform:scaleX(var(--run,0));transition:transform .8s cubic-bezier(.2,.85,.2,1)}
.flowmock-nodes{position:relative;display:grid;grid-template-columns:repeat(4,1fr);text-align:center;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#8d8c84}
.flowmock-nodes span::before{content:'';display:block;width:24px;height:24px;margin:0 auto 9px;border-radius:50%;border:1px solid rgba(243,240,232,.35);background:#121211;transition:background .35s,box-shadow .35s}
.flowmock-nodes span.is-on{color:#f3f0e8}
.flowmock-nodes span.is-on::before{background:#f3f0e8;box-shadow:0 0 0 5px rgba(243,240,232,.12),0 0 22px rgba(243,240,232,.45)}
.flowmock-log{margin-top:16px;min-height:118px;border-top:1px solid rgba(243,240,232,.1);padding-top:12px;display:grid;align-content:start;gap:7px;font:11px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#c9c7bf}
.flowmock-log li{animation:log-in .45s cubic-bezier(.2,.85,.2,1)}
.flowmock-log time{color:#77776f;margin-right:6px}
.flowmock-log li.is-review{color:#fff}
.flowmock-log li.is-review::after{content:' ●';color:#f3f0e8;animation:blink 1s steps(2) infinite}
@keyframes log-in{from{opacity:0;transform:translateX(-8px)}}
@keyframes blink{50%{opacity:0}}

/* 04 product */
.mock--product{width:420px;height:430px;background:transparent;box-shadow:none;overflow:visible}
.pp-phone{position:absolute;right:40px;top:0;width:230px;height:430px;border-radius:34px;background:#11110f;padding:10px;box-shadow:0 40px 70px -30px rgba(17,17,15,.6)}
.pp-notch{position:absolute;top:16px;left:50%;width:62px;height:16px;margin-left:-31px;border-radius:999px;background:#000;z-index:2}
.pp-screen{height:100%;border-radius:26px;background:#f7f6f2;padding:40px 14px 14px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.pp-top{display:flex;justify-content:space-between;align-items:center;font-size:12px}
.pp-top span{font-size:7px;letter-spacing:.14em;border:1px solid rgba(17,17,15,.2);border-radius:999px;padding:2px 6px;color:#55554f}
.pp-plan,.pp-stat{background:#fff;border-radius:14px;padding:11px 12px;border:1px solid rgba(17,17,15,.06)}
.pp-plan small,.pp-stat small{display:block;font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:#77776f}
.pp-plan b{display:block;font-size:15px;font-weight:500;margin-top:3px}
.pp-active{display:inline-flex;align-items:center;gap:5px;font-size:10px;margin-top:6px;color:#3a3a37}
.pp-active::before{content:'';width:6px;height:6px;border-radius:50%;background:#11110f}
.pp-stat b{display:block;font-family:var(--heading);font-weight:500;font-size:30px;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.pp-spark{display:block;width:100%;height:46px;margin-top:4px}
.pp-spark path{fill:none;stroke:#11110f;stroke-width:1.6;vector-effect:non-scaling-stroke}
.pp-spark .pp-area{fill:rgba(17,17,15,.07);stroke:none}
.pp-feed{display:grid;gap:6px}
.pp-feed li{background:#fff;border-radius:11px;padding:8px 10px;border:1px solid rgba(17,17,15,.06)}
.pp-feed li.is-new{animation:feed-in .55s cubic-bezier(.2,.85,.2,1)}
.pp-feed b{display:block;font-size:11px;font-weight:500}
.pp-feed small{font-size:9.5px;color:#77776f}
@keyframes feed-in{from{opacity:0;transform:translateY(-10px) scale(.96)}}
.pp-float{position:absolute;left:0;top:150px;background:#11110f;color:#f3f0e8;border-radius:14px;padding:12px 16px;box-shadow:0 24px 40px -18px rgba(0,0,0,.55);animation:float 5s ease-in-out infinite}
.pp-float small{display:block;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#a9a7a0}
.pp-float b{font-size:14px;font-weight:500}
@keyframes float{50%{transform:translateY(-10px)}}
@media(prefers-reduced-motion:reduce){.pp-float,.flowmock-log li.is-review::after{animation:none}}