/* Home: top line, sample-site stage (laptop + phone), service tiles row, reviews band, founder strip. Logical properties only; tokens only (light and dark). */
.home-hero.st-hero{background:var(--primary-tint);padding-block:clamp(28px,5vw,56px)}
.st-in{display:grid;gap:var(--s-8);align-items:center}
.st-copy h1{margin:0 0 var(--s-2)}
.st-sub{margin:0 0 var(--s-3);font:var(--fw-semibold) clamp(20px,2.6vw,28px)/1.2 var(--font-serif);color:var(--primary-ink)}
@media (min-width:900px){.st-in{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}

.st{display:grid;gap:var(--s-3);justify-items:center}
.st-top{display:flex;gap:var(--s-2);align-items:center;justify-self:stretch;justify-content:space-between}
.st-count{color:var(--muted);font-size:var(--fs-14)}
.st-frames{position:relative;inline-size:100%;max-inline-size:620px;padding-block-end:var(--s-6)}
.st-laptop{border:1px solid var(--border-strong);border-radius:var(--r-md) var(--r-md) var(--r-xs) var(--r-xs);background:var(--card);box-shadow:var(--shadow-3);overflow:hidden}
.st-bar{display:flex;gap:5px;align-items:center;padding:8px 10px;background:var(--card-2);border-block-end:1px solid var(--border)}
.st-bar i{inline-size:8px;block-size:8px;border-radius:50%;background:var(--border-strong)}
.st-laptop .st-screen{block-size:clamp(300px,44vw,340px);overflow:hidden}
.st-phone{position:absolute;inset-block-end:0;inset-inline-end:-4px;inline-size:30%;min-inline-size:118px;border:3px solid var(--ink);border-radius:var(--r-lg);background:var(--card);box-shadow:var(--shadow-3);overflow:hidden}
.st-phone .st-screen{aspect-ratio:9/17;overflow:hidden}

.st-site{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-3);block-size:100%;box-sizing:border-box;color:var(--ink);font-size:var(--fs-14);text-align:start}
.st-nav{display:flex;align-items:center;gap:var(--s-2)}
.st-logo{inline-size:20px;block-size:20px;border-radius:6px;background:var(--primary)}
.st-lnk{inline-size:30px;block-size:5px;border-radius:3px;background:var(--border-strong)}
.st-menu{margin-inline-start:auto;inline-size:18px;block-size:12px;border-block:2px solid var(--border-strong)}

/* cinematic hero of the sample site: photo, dark scrim, name and tagline in white (at least 4.5:1 on the scrim) */
.st-hi{position:relative;flex:0 0 auto;block-size:clamp(104px,14vw,128px);border-radius:var(--r-xs);overflow:hidden;background:#102a43;color:#fff}
.st-hi img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;opacity:0;transition:opacity .9s ease}
.st-hi img.ld{opacity:1}
.st-hi::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.8) 0%,rgba(0,0,0,.6) 55%,rgba(0,0,0,.04) 100%)}
.st-hi-txt{text-shadow:0 1px 2px rgba(0,0,0,.55);position:absolute;z-index:1;inset-inline:var(--s-3);inset-block-end:var(--s-2);display:grid;gap:2px;max-inline-size:62%}
.st-hi-txt b{font-size:var(--fs-13);font-weight:var(--fw-semibold)}
.st-hi-txt span{font:var(--fw-semibold) clamp(16px,2.2vw,19px)/1.2 var(--font-serif)}
.st-book{position:absolute;z-index:1;inset-inline-end:var(--s-3);inset-block-start:var(--s-2);padding:6px 12px;border-radius:var(--r-pill);background:var(--primary);color:var(--on-primary);font-weight:var(--fw-semibold);font-size:var(--fs-13)}
.st-hi .st-book.st-b{transform:none}
@media (prefers-reduced-motion:no-preference){.st-hi.is-on img{animation:st-kb 10s ease-out both}}
@keyframes st-kb{from{transform:scale(1)}to{transform:scale(1.1)}}

.st-lo{position:relative;flex:1 1 auto;min-block-size:0;overflow:hidden}
.st-svc{list-style:none;margin:0;padding:0;display:grid;gap:4px}
/* the phone sits over the laptop's lower end (right in a left-to-right page, left in a right-to-left one): keep the laptop content clear of it, whatever the mock site's own direction */
.st-laptop .st-svc{margin-right:35%}
.st-laptop .st-demo{right:35%}
.st-laptop .st-hi-txt{inset-inline:auto;left:var(--s-3);right:35%}
html[dir="rtl"] .st-laptop .st-svc{margin-right:0;margin-left:35%}
html[dir="rtl"] .st-laptop .st-demo{right:0;left:35%}
html[dir="rtl"] .st-laptop .st-hi-txt{left:35%;right:var(--s-3)}
.st-svc li{display:flex;justify-content:space-between;gap:var(--s-2);padding:4px 10px;border-radius:var(--r-xs);background:var(--primary-tint);font-size:var(--fs-13)}
.st-svc em{font-style:normal;color:var(--primary-ink);font-weight:var(--fw-semibold)}
.st-phone .st-site{padding:var(--s-2);gap:6px}
.st-phone .st-hi{flex:1 1 0;block-size:auto;min-block-size:84px}
.st-phone .st-hi-txt{max-inline-size:none;inset-inline:6px;inset-block-end:6px}
.st-phone .st-hi-txt span{font-size:var(--fs-14);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.st-phone .st-hi-txt b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-phone .st-book,.st-phone .st-lnk,.st-phone .st-chip{display:none}
.st-phone .st-lo{flex:0 0 86px}
.st-phone .st-nav{block-size:18px}
.st-phone .st-logo{inline-size:16px;block-size:16px}
.st-phone .st-svc li:nth-child(n+3){display:none}
.st-phone .st-svc li{padding:3px 6px}
.st-phone .st-svc li em{display:none}

.st-b{opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease}
.st-b.is-on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.st-b{opacity:1;transform:none;transition:none}.st-hi img{transition:none}}

/* feature demos (home-demos.js): a panel that covers the services area of the mock, with a chip naming the feature */
.st-demo{container-type:inline-size;position:absolute;inset:0;display:flex;flex-direction:column;gap:4px;padding:4px 2px 0;background:var(--card);opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .4s ease;pointer-events:none}
.st-site.is-demo .st-demo{opacity:1;transform:none}
.st-chip{align-self:flex-start;display:inline-flex;flex-wrap:wrap;gap:2px 6px;padding:2px 10px;border-radius:var(--r-pill);background:var(--primary-soft);color:var(--primary-ink);font-size:var(--fs-13);font-weight:var(--fw-semibold)}
.st-chip em{font-style:normal;font-weight:400}
@container (max-width:250px){.st-chip em{display:none}}
.dm-t{font-size:var(--fs-13)}
.dm-b{flex:1;min-block-size:0;display:flex;gap:var(--s-3);align-items:center}
.dm-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;flex:1;max-inline-size:220px}
.dm-d{display:grid;place-items:center;block-size:20px;border-radius:4px;background:var(--card-2);color:var(--ink-2);font-size:var(--fs-13);transition:background .3s ease,color .3s ease,transform .3s ease}
.st-demo.d2 .dm-d.pick{background:var(--primary);color:var(--on-primary);transform:scale(1.12)}
.dm-ok{margin:0;padding:3px 10px;border-radius:var(--r-pill);background:var(--ok-bg);color:var(--ok-ink);font-size:var(--fs-13);font-weight:var(--fw-semibold);opacity:0;transform:scale(.9);transition:opacity .35s ease,transform .35s ease}
.dm-ok::before{content:"\2713\00a0"}
.st-demo.d3 .dm-ok{opacity:1;transform:none}
.dm-kpi{display:grid;gap:2px;flex:0 0 36%}
.dm-kpi b{font:var(--fw-semibold) 22px/1 var(--font-serif);color:var(--primary-ink);font-variant-numeric:tabular-nums}
.dm-kpi span{font-size:var(--fs-13);color:var(--ink-2)}
.dm-bars{flex:1;align-self:stretch;display:flex;align-items:flex-end;gap:6px;border-block-end:2px solid var(--border-strong);padding-block-end:0}
.dm-bars i{flex:1;block-size:var(--h);background:var(--primary);border-radius:3px 3px 0 0;transform:scaleY(0);transform-origin:bottom;transition:transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i) * 90ms)}
.st-demo.d1 .dm-bars i{transform:none}
.dm-chat{display:grid;gap:4px;inline-size:100%}
.dm-chat p{margin:0;padding:3px 10px;border-radius:12px;font-size:var(--fs-13);line-height:1.3;max-inline-size:88%;opacity:0;transform:translateY(8px) scale(.96);transition:opacity .4s ease,transform .4s ease}
.dm-in{justify-self:end;background:var(--ok-bg);color:var(--ok-ink)}
.dm-out{justify-self:start;background:var(--card-2);color:var(--ink);border:1px solid var(--border)}
.st-demo.d1 .dm-in,.st-demo.d2 .dm-out{opacity:1;transform:none}
.dm-cost{display:grid;gap:3px;inline-size:100%}
.dm-row{display:flex;justify-content:space-between;gap:var(--s-2);margin:0;font-size:var(--fs-13);opacity:0;transform:translateY(4px);transition:opacity .35s ease,transform .35s ease}
.dm-row b{font-variant-numeric:tabular-nums}
.dm-tot{padding-block-start:3px;border-block-start:1px solid var(--border-strong);font-weight:var(--fw-semibold);color:var(--primary-ink)}
.st-demo.d1 .dm-row:nth-child(1),.st-demo.d2 .dm-row:nth-child(2),.st-demo.d3 .dm-row:nth-child(3){opacity:1;transform:none}
.dm-lang{flex-direction:column;align-items:flex-start;gap:6px}
.dm-pills{display:flex;gap:3px;direction:ltr}
.dm-pills i{font-style:normal;font-size:var(--fs-13);padding:0 7px;border-radius:var(--r-pill);border:1px solid var(--border-strong);color:var(--ink-2);transition:background .3s ease,color .3s ease}
.dm-pills i.on{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.dm-card{display:grid;gap:4px;inline-size:100%;padding-inline-start:var(--s-2);border-inline-start:3px solid var(--primary);transition:opacity .25s ease}
.dm-card b{font:var(--fw-semibold) var(--fs-14)/1.25 var(--font-serif)}
.dm-btn{justify-self:start;padding:1px 10px;border-radius:var(--r-pill);background:var(--primary);color:var(--on-primary);font-size:var(--fs-13);font-weight:var(--fw-semibold)}
.st-phone .dm-d:nth-child(n+6){display:none}
.st-phone .dm-grid{grid-template-columns:repeat(5,1fr)}
.st-phone .dm-b{flex-direction:column;gap:4px;align-items:stretch}
.st-phone .dm-ok{justify-self:start}
.st-phone .dm-t{display:none}
.st-phone .dm-kpi{flex:0 0 auto}
.st-phone .dm-kpi span{display:none}
.st-phone .dm-bars{min-block-size:0;block-size:44px;flex:0 0 auto}
.st-phone .dm-pills i:nth-child(2),.st-phone .dm-pills i:nth-child(4),.st-phone .dm-pills i:nth-child(5){display:none}
.st-phone .dm-btn{display:none}
.st-phone .dm-cost{gap:2px}
.st-phone .dm-row span{display:none}
.st-phone .dm-row{justify-content:flex-end}
@media (prefers-reduced-motion:reduce){.st-demo,.dm-d,.dm-ok,.dm-bars i,.dm-chat p,.dm-row,.dm-card,.dm-pills i{transition:none}}

/* hero ambience: soft skyline photo behind the top section on wide screens, added by home-stage.js after load; kept faint and faded toward the text */
.home-hero.st-hero{position:relative;isolation:isolate}
.st-in{position:relative;z-index:1}
.st-hero.has-bd::before{content:"";position:absolute;z-index:0;inset:0;background:url(/assets/img/stock/cine-hero-sunrise-skyline.webp) center/cover no-repeat;-webkit-mask-image:linear-gradient(to left,#000,transparent 75%);mask-image:linear-gradient(to left,#000,transparent 75%);opacity:.14;pointer-events:none;animation:st-bd 1.2s ease both}
html[dir="rtl"] .st-hero.has-bd::before{-webkit-mask-image:linear-gradient(to right,#000,transparent 75%);mask-image:linear-gradient(to right,#000,transparent 75%)}
@keyframes st-bd{from{opacity:0}to{opacity:.14}}
@media (prefers-reduced-motion:reduce){.st-hero.has-bd::before{animation:none}}
/* hero backdrop loop (home-bd-video.js, lazy): sits over the faint photo, same fade toward the text; the light hero tint is the scrim, so the headline keeps its contrast */
.st-bdv{position:absolute;z-index:0;inset:0;inline-size:100%;block-size:100%;object-fit:cover;pointer-events:none;opacity:0;transition:opacity 1.2s ease;-webkit-mask-image:linear-gradient(to left,#000,transparent 75%);mask-image:linear-gradient(to left,#000,transparent 75%)}
.st-bdv.is-on{opacity:.2}
html[dir="rtl"] .st-bdv{-webkit-mask-image:linear-gradient(to right,#000,transparent 75%);mask-image:linear-gradient(to right,#000,transparent 75%)}
@media (max-width:899px),(prefers-reduced-motion:reduce){.st-bdv{display:none}}

.st-cap{margin:0;color:var(--ink-2);text-align:center}
.st-ctl{display:flex;gap:var(--s-2);flex-wrap:wrap;justify-content:center}
.st-ctl{align-items:center}
.st-ctl .btn{min-block-size:44px;display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);line-height:1.2;padding-block:0}

.st-rv{background:var(--card-2)}
.st-rv-grid{list-style:none;margin:var(--s-4) 0 0;padding:0;display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.st-rv-grid li{padding:var(--s-4);background:var(--card);border:1px solid var(--border);border-radius:var(--r-md)}
.st-rv-grid p{margin:0 0 var(--s-2)}
.st-rv-by{color:var(--muted);font-size:var(--fs-14)}
.st-rv-note{margin:var(--s-3) 0 0;color:var(--muted);font-size:var(--fs-14)}
.st-rv[hidden]{display:none}

.st-fd{display:grid;gap:var(--s-5);align-items:center;justify-items:center;text-align:center}
.st-fd-photo{inline-size:128px;block-size:160px;object-fit:cover;border-radius:var(--r-xl);border:3px solid var(--gold);box-shadow:var(--shadow-1)}
.st-fd-line{margin:0;font:var(--fw-semibold) clamp(20px,2.6vw,28px)/1.3 var(--font-serif)}
.st-fd-name{margin:0;color:var(--ink-2)}
.st-nums{list-style:none;margin:0;padding:0;display:flex;gap:var(--s-6);flex-wrap:wrap;justify-content:center}
.st-nums b{display:block;font:var(--fw-semibold) var(--fs-24,24px)/1.1 var(--font-serif);color:var(--primary-ink)}
.st-nums span{color:var(--muted);font-size:var(--fs-14)}
@media (min-width:760px){.st-fd{grid-template-columns:auto 1fr;justify-items:start;text-align:start}.st-nums{justify-content:flex-start}}