/* Shashatna landing. One theme (ink), one accent (signal teal). Arabic-first, logical properties so /en/ mirrors. */
@font-face{font-family:"Alexandria";src:url(/assets/fonts/alexandria-arabic-500-800.woff2) format("woff2");font-weight:500 800;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Alexandria";src:url(/assets/fonts/alexandria-latin-500-800.woff2) format("woff2");font-weight:500 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Arabic";src:url(/assets/fonts/plex-arabic-400.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Plex Arabic";src:url(/assets/fonts/plex-arabic-600.woff2) format("woff2");font-weight:500 600;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Plex Arabic";src:url(/assets/fonts/plex-arabic-700.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Plex Arabic";src:url(/assets/fonts/plex-latin-400.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Arabic";src:url(/assets/fonts/plex-latin-600.woff2) format("woff2");font-weight:500 600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Arabic";src:url(/assets/fonts/plex-latin-700.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bg:#0b0f16; --bg-2:#0e131c; --surface:#131a25; --surface-2:#1a2230; --line:#243041; --line-2:#2f3c50;
  --text:#eef2f7; --muted:#a6b0c0; --dim:#8591a3;
  --accent:#2fe0bf; --accent-press:#22c7a8; --on-accent:#032019; --accent-soft:rgba(47,224,191,.11); --accent-line:rgba(47,224,191,.35);
  --off:#ff7f6e;
  --warm:#f5b84f; /* restaurant content inside the screen mocks only */
  --display:"Alexandria","Plex Arabic",system-ui,sans-serif;
  --ui:"Plex Arabic",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  --r:14px; --r-sm:9px; --r-pill:999px;
  --wrap:1220px; --gut:clamp(18px,4vw,36px);
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px;scrollbar-color:var(--line-2) var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--ui);font-size:1.0625rem;line-height:1.8;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;caret-color:var(--accent)}
[lang=en] body,html[lang=en] body{line-height:1.65}
::selection{background:var(--accent);color:var(--on-accent)}
img,svg{display:block}
a{color:inherit;text-underline-offset:.25em}
h1,h2,h3{font-family:var(--display);font-weight:700;margin:0;text-wrap:balance;letter-spacing:0}
html[lang=en] h1,html[lang=en] h2{letter-spacing:-.02em}
h2{font-size:clamp(1.65rem,1.05rem + 2.1vw,2.6rem);line-height:1.35}
html[lang=en] h2{line-height:1.15}
h3{font-size:1.15rem;line-height:1.5}
p{margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.ic{width:1.15em;height:1.15em;flex:none;stroke-width:1.75}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;inset-inline-start:12px;top:-60px;z-index:30;background:var(--accent);color:var(--on-accent);padding:8px 14px;border-radius:8px;font-weight:600}
.skip:focus{top:12px}
.num,.plan-price b,.sm-list b,.sp-grid b,time{font-variant-numeric:tabular-nums}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:44px;padding:.55em 1.15em;border-radius:var(--r-pill);font-weight:600;font-size:.98rem;text-decoration:none;white-space:nowrap;border:1.5px solid transparent;transition:background .2s,border-color .2s,transform .15s var(--ease),color .2s}
.btn:active{transform:translateY(1px) scale(.985)}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:#5ae9cf}
.btn-ghost{border-color:var(--line-2);color:var(--text)}
.btn-ghost:hover{border-color:var(--accent-line);background:var(--accent-soft)}
.btn-lg{min-height:52px;padding:.7em 1.5em;font-size:1.04rem}
.btn-block{width:100%}
.link-arrow{display:inline-flex;align-items:center;gap:.4em;color:var(--accent);font-weight:600;text-decoration:none}
.link-arrow:hover{text-decoration:underline}
html[dir=ltr] .link-arrow .ic{transform:scaleX(-1)}

/* header */
.site-head{position:sticky;top:0;z-index:20;background:rgba(11,15,22,.86);-webkit-backdrop-filter:saturate(140%) blur(12px);backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid rgba(255,255,255,.06)}
.head-row{display:flex;align-items:center;gap:20px;min-height:68px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.mark{width:34px;height:34px;color:var(--text)}
.mark-accent{fill:var(--accent)}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-text b{font-family:var(--display);font-weight:700;font-size:1.2rem}
.brand-text small{font-size:.74rem;color:var(--dim);margin-top:3px}
.nav{display:flex;align-items:center;gap:4px;margin-inline-start:auto}
.nav a{display:inline-flex;align-items:center;gap:.4em;padding:8px 12px;border-radius:8px;text-decoration:none;color:var(--muted);font-size:.95rem;font-weight:500}
.nav a:hover{color:var(--text);background:rgba(255,255,255,.04)}
.nav .nav-login{color:var(--text)}
.nav-lang{border:1px solid var(--line)}
.menu-btn{display:none;margin-inline-start:auto;width:44px;height:44px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--text);align-items:center;justify-content:center;cursor:pointer}
.menu-btn .ic{width:22px;height:22px}
.menu-btn .ic:last-child{display:none}
.menu-btn[aria-expanded=true] .ic:first-child{display:none}
.menu-btn[aria-expanded=true] .ic:last-child{display:block}
@media (max-width:980px){
  .js .menu-btn{display:inline-flex}
  .js .nav{display:none;position:absolute;inset-inline:0;top:100%;flex-direction:column;align-items:stretch;gap:2px;padding:10px var(--gut) 18px;background:#0d121a;border-bottom:1px solid var(--line)}
  .js .nav.is-open{display:flex}
  .js .nav a{padding:12px 10px;font-size:1rem}
  .js .nav-lang{border:0}
  .head-cta{margin-inline-start:auto}
  .js .head-cta{margin-inline-start:0}
  .js .menu-btn{margin-inline-start:0}
  .js .nav ~ .head-cta{margin-inline-start:auto}
}
@media (max-width:560px){.head-cta{display:none}.js .menu-btn{margin-inline-start:auto}.brand-text small{font-size:.7rem}}
@media (max-width:980px){html:not(.js) .head-row{flex-wrap:wrap;padding-block:8px}html:not(.js) .nav{flex-wrap:wrap;order:3;width:100%;margin:0}}

/* hero */
.hero{padding-block:clamp(40px,6vw,84px) clamp(56px,7vw,96px);border-bottom:1px solid rgba(255,255,255,.05);overflow:clip}
.hero-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);gap:clamp(28px,4.5vw,64px);align-items:center}
.hero h1{font-size:clamp(2.1rem,1.2rem + 2.4vw,3.15rem);line-height:1.34;font-weight:800;text-wrap:initial}
html[lang=en] .hero h1{line-height:1.08;letter-spacing:-.03em;font-size:clamp(2.1rem,1.3rem + 1.9vw,2.75rem)}
.lead{margin-top:20px;font-size:clamp(1.05rem,.98rem + .3vw,1.2rem);color:var(--muted);max-width:34em}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.stage{position:relative;margin:0;padding-bottom:13%}
.stage-note{position:absolute;inset-inline-end:0;width:77%;bottom:0;font-size:.8rem;color:var(--dim);text-align:center}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}.stage{margin-top:6px}}

/* TV */
.tv{position:relative;width:77%;margin-inline-start:auto;padding:1.1%;border-radius:12px;background:#05070a;border:1px solid #2a3446;box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 40px 70px -34px rgba(0,0,0,.85)}
.tv-foot{position:absolute;inset-inline:38%;bottom:-5.5%;height:5.5%;background:linear-gradient(#1b2230,#0f141c);clip-path:polygon(18% 0,82% 0,100% 100%,0 100%);border-radius:0 0 6px 6px}
.tv-screen{position:relative;aspect-ratio:16/9;border-radius:5px;overflow:hidden;background:#101318;container-type:inline-size;font-family:var(--ui)}
.scene{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease)}
.scene.is-on{opacity:1}
html:not(.js) .scene{opacity:0}
html:not(.js) .scene-menu{opacity:1}

/* scene: menu (main + side + ticker) */
.scene-menu{display:grid;grid-template-columns:68% 32%;grid-template-rows:1fr 11.5%;background:#14110d;color:#f7efe2}
.sm-main{padding:4.2cqw 4.4cqw 2cqw;display:flex;flex-direction:column}
.sm-head{display:flex;align-items:center;justify-content:space-between;gap:2cqw}
.sm-head b{font-family:var(--display);font-size:3.7cqw;font-weight:800;color:var(--warm);line-height:1.2}
.sm-pill{font-size:1.75cqw;border:.2cqw solid rgba(245,184,79,.6);color:var(--warm);padding:.3cqw 1.4cqw;border-radius:99px}
.sm-list{list-style:none;margin:2.8cqw 0 0;padding:0;display:grid;gap:1.15cqw}
.sm-list li{display:flex;align-items:baseline;gap:1.2cqw;font-size:2.35cqw;line-height:1.45}
.sm-list i{flex:1;border-bottom:.25cqw dotted rgba(247,239,226,.28);transform:translateY(-.5cqw)}
.sm-list b{font-family:var(--display);font-weight:700;font-size:2.6cqw;color:#fff}
.sm-note{margin-top:auto;font-size:1.45cqw;color:rgba(247,239,226,.55)}
.sm-side{display:grid;grid-template-rows:auto 1fr auto;gap:1.6cqw;padding:3.2cqw 2.6cqw 2cqw;background:#1d1812;border-inline-start:.25cqw solid rgba(245,184,79,.18)}
.w-clock{display:flex;flex-direction:column;align-items:center;text-align:center}
.w-clock b,.sp-side b{font-family:var(--display);font-weight:700;font-size:5.4cqw;line-height:1.1;direction:ltr;font-variant-numeric:tabular-nums}
.w-clock span,.sp-side span{font-size:1.6cqw;opacity:.75}
.w-deal{border-radius:1.4cqw;background:var(--warm);color:#2a1a04;padding:1.8cqw 1.8cqw 1.5cqw;display:flex;flex-direction:column;justify-content:center;gap:.4cqw}
.w-deal span{font-size:1.5cqw;font-weight:600}
.w-deal b{font-family:var(--display);font-size:2.2cqw;line-height:1.3}
.w-deal em{font-style:normal;font-family:var(--display);font-weight:800;font-size:4.6cqw;line-height:1}
.w-deal em::after{content:" SAR";font-size:1.5cqw;font-weight:600}
html[lang=ar] .w-deal em::after{content:" ر.س"}
.w-qr{display:flex;align-items:center;gap:1.3cqw;font-size:1.45cqw}
.w-qr svg{width:5.6cqw;height:5.6cqw;color:#f7efe2;background:#14110d;padding:.4cqw;border-radius:.6cqw;flex:none}
.ticker{grid-column:1/-1;display:flex;align-items:center;overflow:hidden;background:var(--warm);color:#231505;font-weight:600;font-size:2.05cqw;white-space:nowrap;direction:ltr}
.tk{display:flex;width:max-content;animation:tk-rtl 26s linear infinite}
.tk span{direction:rtl;padding-inline:1cqw}
html[dir=ltr] .tk{animation-name:tk-ltr}
html[dir=ltr] .tk span{direction:ltr}
@keyframes tk-rtl{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes tk-ltr{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* scene: offer (full) */
.scene-offer{display:grid;grid-template-columns:1.25fr .75fr;align-items:center;gap:3cqw;padding:5cqw 6cqw;background:#7c1d14;color:#fff3e6}
.scene-offer::before{content:"";position:absolute;inset-block:0;inset-inline-end:0;width:42%;background:#9a2618;clip-path:polygon(18% 0,100% 0,100% 100%,0 100%)}
html[dir=ltr] .scene-offer::before{clip-path:polygon(0 0,82% 0,100% 100%,0 100%)}
.so-copy,.so-price{position:relative}
.so-kicker{display:inline-block;font-size:2cqw;font-weight:600;background:#fff3e6;color:#7c1d14;padding:.4cqw 1.6cqw;border-radius:99px}
.so-title{display:block;margin-top:2cqw;font-family:var(--display);font-weight:800;font-size:5.4cqw;line-height:1.3}
.so-time{display:block;margin-top:2.2cqw;font-size:2.1cqw;opacity:.85}
.so-price{display:flex;flex-direction:column;align-items:center;text-align:center}
.so-price b{font-family:var(--display);font-weight:800;font-size:15cqw;line-height:1;color:var(--warm)}
.so-price span{font-size:2.6cqw;font-weight:600}
.so-price s{font-size:2.6cqw;opacity:.6;margin-top:.6cqw}

/* scene: prayer (L-shape + ticker) */
.scene-prayer{display:grid;grid-template-columns:1fr 27%;grid-template-rows:auto 1fr 11.5%;background:#0f1d1d;color:#e9f4f1}
.sp-head{grid-column:1/-1;display:flex;align-items:baseline;justify-content:space-between;padding:3.2cqw 4cqw 1.2cqw}
.sp-head b{font-family:var(--display);font-size:3.6cqw;font-weight:800}
.sp-head span{font-size:1.7cqw;opacity:.7}
.sp-grid{list-style:none;margin:0;padding:1cqw 4cqw 3cqw;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5cqw}
.sp-grid li{position:relative;border-radius:1.3cqw;background:rgba(255,255,255,.06);padding:1.6cqw 2cqw;display:flex;flex-direction:column;justify-content:center}
.sp-grid span{font-size:2cqw;opacity:.8}
.sp-grid b{font-family:var(--display);font-weight:700;font-size:4cqw;line-height:1.2;direction:ltr;text-align:start}
.sp-grid .is-next{background:var(--accent);color:var(--on-accent)}
.sp-grid small{position:absolute;inset-inline-end:1.6cqw;top:1.5cqw;font-size:1.5cqw;font-weight:700}
.sp-side{grid-row:2;grid-column:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8cqw;margin:1cqw 3cqw 3cqw 0;border-radius:1.3cqw;background:rgba(255,255,255,.04);text-align:center}
html[dir=ltr] .sp-side{margin:1cqw 0 3cqw 3cqw}
html[dir=rtl] .sp-side{margin:1cqw 0 3cqw 3cqw}
.sp-temp{display:inline-flex;align-items:center;gap:.6cqw;margin-top:1cqw}
.sp-temp .ic{width:2.4cqw;height:2.4cqw}
.scene-prayer .ticker{background:#e9f4f1;color:#0f1d1d}

/* phone */
.phone{position:absolute;inset-inline-start:0;top:9%;width:21%;aspect-ratio:9/18.5;padding:1.2%;border-radius:22px;background:#06080c;border:1px solid #2c3648;box-shadow:0 30px 60px -20px rgba(0,0,0,.9),0 0 0 6px rgba(11,15,22,.9)}
.ph-screen{height:100%;border-radius:17px;overflow:hidden;background:#111824;container-type:inline-size;display:flex;flex-direction:column}
.ph-bar{display:flex;justify-content:space-between;align-items:center;padding:4cqw 7cqw 2cqw;font-size:5cqw;font-weight:600;direction:ltr}
.ph-icons{display:flex;gap:2cqw}.ph-icons i{width:4cqw;height:4cqw;border-radius:1cqw;background:rgba(255,255,255,.55)}
.ph-app{flex:1;display:flex;flex-direction:column;padding:2cqw 6cqw 6cqw;gap:3.4cqw}
.ph-title{display:flex;align-items:center;gap:2.6cqw;font-family:var(--display);font-size:6.6cqw}
.ph-title .mark{width:9cqw;height:9cqw}
.ph-now{display:flex;flex-wrap:wrap;align-items:center;gap:1.4cqw 2.4cqw;font-size:4.6cqw;color:var(--muted);background:rgba(255,255,255,.05);border-radius:3.5cqw;padding:3cqw 3.6cqw;line-height:1.5}
.ph-now b{flex-basis:100%;color:var(--text);font-size:5.6cqw;transition:opacity .3s}
.dot{display:inline-block;width:.6em;height:.6em;border-radius:50%;flex:none}
.dot-on{background:var(--accent)}.dot-off{background:var(--off)}
.ph-label{font-size:4.4cqw;color:var(--dim);margin-top:1cqw}
.ph-list{list-style:none;margin:0;padding:0;display:grid;gap:2cqw}
.ph-list li{display:flex;align-items:center;gap:2.6cqw;padding:3cqw 3.4cqw;border-radius:3cqw;font-size:5cqw;border:1px solid transparent;background:rgba(255,255,255,.03);transition:background .35s,border-color .35s}
.ph-list li .ic{width:6cqw;height:6cqw;color:var(--muted)}
.ph-list li.is-active{border-color:var(--accent-line);background:var(--accent-soft)}
.ph-list li.is-active .ic{color:var(--accent)}
.ph-publish{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:2cqw;padding:3.6cqw;border-radius:99px;background:var(--accent);color:var(--on-accent);font-weight:700;font-size:5cqw;transition:transform .25s var(--ease)}
.ph-publish .ic{width:5.6cqw;height:5.6cqw;stroke-width:2.6}
.ph-publish.is-press{transform:scale(.94)}
.ph-fleet{display:flex;justify-content:space-between;font-size:4.2cqw;color:var(--muted)}
.ph-fleet span{display:inline-flex;align-items:center;gap:1.4cqw}

@media (max-width:600px){.tv{width:100%}.stage{padding-bottom:44%}.phone{width:29%;inset-inline-start:auto;inset-inline-end:-1%;top:auto;bottom:7%;border-radius:16px}.ph-screen{border-radius:12px}.stage-note{width:68%;inset-inline-end:auto;inset-inline-start:0;text-align:start;bottom:9%}}

/* sections */
.section{padding-block:clamp(64px,8vw,112px)}
.section-lead{margin-top:14px;color:var(--muted);max-width:40em;font-size:1.08rem}
.section h2+.who-grid,.section h2+.steps,.section h2+.bento,.section h2+.price-grid,.section h2+.dev-row{margin-top:clamp(28px,4vw,48px)}

/* who */
.who-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:clamp(28px,4vw,48px)}
.who-card{display:flex;flex-direction:column;gap:10px}
.who-card h3{display:flex;align-items:center;gap:.5em;margin-top:8px}
.who-card h3 .ic{color:var(--accent)}
.who-card p{color:var(--muted);font-size:.98rem}
.mini{position:relative;aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;border:6px solid #05070a;outline:1px solid #2a3446;container-type:inline-size;display:grid}
.mini-tick{position:absolute;inset-inline:0;bottom:0;height:11%;background:var(--warm)}
.mini-menu{background:#14110d;color:#f7efe2;grid-template-columns:1fr 1fr;gap:5%;padding:7% 7% 16%}
.mm-col{display:flex;flex-direction:column;gap:2.6cqw}
.mm-col b{font-family:var(--display);color:var(--warm);font-size:7cqw;line-height:1.2}
.mm-col span{display:flex;align-items:center;gap:2cqw;font-size:5.4cqw;font-weight:600}
.mm-col i{flex:1;height:2.2cqw;border-radius:2cqw;background:rgba(247,239,226,.22)}
.mini-shop{background:#e9e6df;color:#141414;grid-template-columns:1fr auto;align-items:end;padding:7%}
.ms-hero{display:flex;flex-direction:column}
.ms-hero span{font-size:6cqw;font-weight:600;opacity:.7}
.ms-hero b{font-family:var(--display);font-weight:800;font-size:13cqw;line-height:1.1}
.ms-qr svg{width:21cqw;height:21cqw;background:#fff;padding:2cqw;border-radius:2cqw}
.mini-office{background:#0f1d1d;color:#e9f4f1;grid-template-columns:1fr 32%;gap:4%;padding:7% 7% 16%}
.mo-main{display:flex;flex-direction:column;gap:3cqw}
.mo-main b{font-family:var(--display);font-size:8cqw;line-height:1.1}
.mo-main span,.mc-side span{height:3cqw;border-radius:3cqw;background:rgba(233,244,241,.25)}
.mo-main span.short,.mc-side span.short{width:60%}
.mo-side{border-radius:3cqw;background:var(--accent);color:var(--on-accent);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:5.6cqw;font-weight:600}
.mo-side b{font-family:var(--display);font-size:9cqw;line-height:1.1}
.mini-office .mini-tick{background:#e9f4f1}
.mini-clinic{background:#16202c;grid-template-columns:1fr 30%;gap:4%;padding:6%}
.mc-video{border-radius:3cqw;background:#2a3a4d;display:grid;place-items:center}
.mc-video .ic{width:14cqw;height:14cqw;color:#e8eef5;stroke-width:1.5}
.mc-side{display:flex;flex-direction:column;gap:3.4cqw;justify-content:center}
.mc-side b{font-family:var(--display);font-size:9cqw;color:#e8eef5;direction:ltr;text-align:center}
@media (max-width:1060px){.who-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px}}
@media (max-width:640px){.who-grid{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:80%;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-inline:calc(var(--gut) * -1);padding:0 var(--gut) 10px;scroll-padding-inline:var(--gut);scrollbar-width:none}.who-grid::-webkit-scrollbar{display:none}.who-card{scroll-snap-align:start}}

/* how */
.how{background:var(--bg-2);border-block:1px solid rgba(255,255,255,.05)}
.steps{list-style:none;margin:clamp(28px,4vw,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,40px);counter-reset:none}
.step{display:flex;flex-direction:column;gap:12px}
.step h3{display:flex;align-items:center;gap:.6em;margin-top:6px}
.step-n{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--accent-line);color:var(--accent);font-family:var(--display);font-size:.95rem;flex:none}
.step p{color:var(--muted)}
.step p a{color:var(--accent);font-weight:600}
.step-vis{height:150px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;padding:18px}
.sv-box{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--muted);font-size:.9rem}
.sv-box .ic{width:46px;height:46px;color:var(--text);stroke-width:1.4}
.sv-box span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem;background:var(--bg);border:1px solid var(--line);padding:4px 10px;border-radius:6px}
.sv-code{display:flex;gap:8px}
.sv-code span{display:grid;place-items:center;width:clamp(30px,3.4vw,42px);aspect-ratio:3/4;border-radius:8px;background:var(--bg);border:1.5px solid var(--line-2);font-family:var(--display);font-weight:700;font-size:clamp(1.1rem,1.6vw,1.45rem);font-variant-numeric:tabular-nums}
.sv-code span:nth-child(-n+4){border-color:var(--accent-line);color:var(--accent)}
.sv-code span:nth-child(3){margin-inline-end:10px}
.sv-pub{display:flex;align-items:center;gap:18px}
.sv-btn{display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:var(--on-accent);font-weight:700;padding:9px 18px;border-radius:99px;font-size:.95rem}
.sv-btn .ic{stroke-width:2.6}
.sv-screens{display:flex;gap:7px}
.sv-screens i{width:40px;aspect-ratio:16/10;border-radius:4px;border:3px solid #05070a;outline:1px solid var(--line-2);background:linear-gradient(var(--surface-2) 0 74%,var(--accent) 74% 100%)}
.sv-screens i:nth-child(2){width:28px;aspect-ratio:10/16;background:linear-gradient(var(--surface-2) 0 82%,var(--accent) 82% 100%)}
@media (max-width:860px){.steps{grid-template-columns:1fr;gap:34px}.step-vis{height:130px}}

/* features bento */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-top:clamp(28px,4vw,48px)}
.tile{border-radius:var(--r);background:var(--surface);border:1px solid var(--line);padding:clamp(20px,2.4vw,30px);display:flex;flex-direction:column;gap:10px;min-width:0}
.tile p{color:var(--muted);font-size:.98rem}
.tile-content{grid-column:span 4;grid-row:span 2}
.tile-layouts{grid-column:span 2;grid-row:span 2}
.tile-schedule{grid-column:span 3}
.tile-alert{grid-column:span 3}
.tile-team{grid-column:span 6}
.chips{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{display:inline-flex;align-items:center;gap:.45em;padding:6px 14px;border-radius:99px;background:var(--bg);border:1px solid var(--line-2);font-weight:600;font-size:.95rem}
.chips .ic{color:var(--accent)}
.uploads{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.uploads li{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:var(--r-sm);border:1px solid var(--line);font-size:.92rem}
.uploads .ic{color:var(--muted)}
.uploads span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uploads em{margin-inline-start:auto;font-style:normal;color:var(--accent);font-size:.85rem;font-weight:600;white-space:nowrap}
.widgets{list-style:none;margin:auto 0 0;padding:18px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.widgets li{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:var(--r-sm);background:var(--surface-2);min-height:104px}
.widgets .ic{width:26px;height:26px;color:var(--accent);stroke-width:1.5}
.widgets b{font-weight:600;font-size:.97rem;line-height:1.45}
.layouts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px;margin-top:18px}
.layouts figure{margin:0;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.layouts figcaption{font-size:.85rem;color:var(--muted)}
.lo{width:100%;aspect-ratio:16/9;border-radius:6px;border:3px solid #05070a;outline:1px solid var(--line-2);display:grid;gap:3px;padding:3px;background:#05070a}
.lo i{border-radius:2px;background:var(--surface-2)}
.lo-full i{background:#2a3648}
.lo-ticker{grid-template-rows:1fr 22%}.lo-ticker i:last-child{background:var(--accent)}
.lo-side{grid-template-columns:1fr 32%}.lo-side i:last-child{background:var(--accent-line)}
.lo-l{grid-template-columns:1fr 30%;grid-template-rows:1fr 22%}.lo-l i:first-child{background:#2a3648}.lo-l i:nth-child(2){background:var(--accent-line)}.lo-l i:last-child{grid-column:1/-1;background:var(--accent)}
.lo-portrait{width:46%;aspect-ratio:9/16;grid-template-rows:1fr 14%}.lo-portrait i:last-child{background:var(--accent)}
.layouts figure:last-child{grid-column:1/-1;flex-direction:row;align-items:center;gap:14px}
.layouts figure:last-child .lo{width:22%}
.week{margin-top:auto;padding-top:14px;display:grid;gap:6px}
.wk-days,.wk-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.wk-days span{font-size:.74rem;color:var(--dim);text-align:center}
.wk-row b{font-size:.8rem;font-weight:600;padding:6px 8px;border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk-a{grid-column:1/-1;background:var(--surface-2);border:1px solid var(--line-2)}
.wk-b{grid-column:1/6;background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent)}
.wk-c{grid-column:1/6;background:var(--surface-2);border:1px solid var(--line-2)}
.wk-d{grid-column:6/8;background:var(--accent);color:var(--on-accent)}
.tile-alert{justify-content:flex-end}
.alert-banner{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:var(--r-sm);background:#3a1714;border:1px solid rgba(255,127,110,.45);color:#ffd9d3;font-weight:600;font-size:.95rem;margin-bottom:auto}
.alert-banner .ic{color:var(--off);width:22px;height:22px}
.tile-team{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:10px 40px;align-items:center}
.tile-team h3,.tile-team p{grid-column:1}
.roles{grid-column:2;grid-row:1/span 2;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.roles div{padding:14px;border-radius:var(--r-sm);background:var(--surface-2)}
.roles dt{font-family:var(--display);font-weight:700}
.roles dd{margin:2px 0 0;color:var(--muted);font-size:.88rem;line-height:1.5}
.roles div:first-child{background:var(--accent-soft);outline:1px solid var(--accent-line)}
@media (max-width:1060px){.tile-content{grid-column:span 6;grid-row:auto}.tile-layouts{grid-column:span 6;grid-row:auto}.layouts{grid-template-columns:repeat(4,minmax(0,1fr))}.layouts figure:last-child{grid-column:auto;flex-direction:column;align-items:flex-start}.layouts figure:last-child .lo{width:46%}}
@media (max-width:860px){.tile-schedule,.tile-alert{grid-column:span 6}.tile-team{grid-template-columns:1fr}.roles{grid-column:1;grid-row:auto;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.widgets{grid-template-columns:repeat(2,minmax(0,1fr))}.layouts{grid-template-columns:repeat(2,minmax(0,1fr))}.layouts figure:last-child{grid-column:1/-1;flex-direction:row;align-items:center}.layouts figure:last-child .lo{width:22%}}

/* remote */
.remote{background:var(--bg-2);border-block:1px solid rgba(255,255,255,.05)}
.remote-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,72px);align-items:center}
.remote-copy>p{margin-top:16px;color:var(--muted);font-size:1.08rem}
.ticks{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:18px}
.ticks li{display:flex;gap:14px;align-items:flex-start}
.ticks .ic{width:24px;height:24px;color:var(--accent);margin-top:4px}
.ticks span{color:var(--muted)}
.ticks b{color:var(--text);display:block;font-weight:600}
.console{border-radius:18px;background:var(--surface);border:1px solid var(--line);padding:18px;display:grid;gap:14px;box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.cs-head{display:flex;align-items:center;gap:10px}
.cs-head b{font-family:var(--display);font-weight:700}
.cs-meta{margin-inline-start:auto;font-size:.82rem;color:var(--accent);background:var(--accent-soft);padding:2px 10px;border-radius:99px}
.cs-shot{position:relative;border-radius:10px;overflow:hidden;background:#05070a;padding:6px}
.cs-shot-in{aspect-ratio:16/9;border-radius:4px;background:#14110d;display:grid;grid-template-columns:68% 32%;grid-template-rows:1fr 11.5%;container-type:inline-size}
.cs-mm{display:flex;flex-direction:column;gap:2.6cqw;padding:5cqw}
.cs-mm b{font-family:var(--display);color:var(--warm);font-size:4cqw}
.cs-mm span{height:2cqw;border-radius:2cqw;background:rgba(247,239,226,.22)}
.cs-mm span.short{width:55%}
.cs-ms{margin:4cqw 3cqw 3cqw 4cqw;border-radius:1.5cqw;background:var(--warm);padding:3cqw;display:flex;flex-direction:column;justify-content:flex-end;gap:1.6cqw}
.cs-ms b{height:5cqw;width:60%;border-radius:1cqw;background:rgba(42,26,4,.75)}
.cs-ms span{height:1.6cqw;border-radius:1cqw;background:rgba(42,26,4,.35)}
.cs-mt{grid-column:1/-1;background:var(--warm);opacity:.85}
.cs-cap{position:absolute;inset-inline-start:14px;bottom:14px;display:inline-flex;align-items:center;gap:6px;font-size:.78rem;background:rgba(5,7,10,.82);padding:4px 10px;border-radius:99px;color:var(--text)}
.cs-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.cs-actions span{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:12px 6px;border-radius:10px;background:var(--surface-2);font-size:.8rem;line-height:1.35;color:var(--muted)}
.cs-actions .ic{width:20px;height:20px;color:var(--text)}
.cs-vol{display:flex;align-items:center;gap:12px;padding:4px 6px;color:var(--muted)}
.cs-track{flex:1;height:6px;border-radius:6px;background:var(--surface-2);position:relative}
.cs-track i{position:absolute;inset-block:0;inset-inline-start:0;width:60%;border-radius:6px;background:var(--accent)}
.cs-track i::after{content:"";position:absolute;inset-inline-end:-7px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--text)}
.cs-vol b{font-variant-numeric:tabular-nums;color:var(--text);font-weight:600;min-width:2ch}
.cs-log{list-style:none;margin:0;padding:12px 0 0;border-top:1px solid var(--line);display:grid;gap:9px}
.cs-log li{display:grid;grid-template-columns:auto 1fr;gap:12px;font-size:.88rem;color:var(--muted);line-height:1.55}
.cs-log time{color:var(--text);font-weight:600;direction:ltr}
.cs-log li:nth-child(1) time{color:var(--off)}
.cs-log li:nth-child(3) time{color:var(--accent)}
@media (max-width:900px){.remote-grid{grid-template-columns:1fr}}
@media (max-width:480px){.cs-actions{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* devices */
.devices h2{max-width:22em}
.dev-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:clamp(28px,4vw,48px)}
.dev{margin:0;display:flex;flex-direction:column;gap:16px}
.dv{height:190px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;position:relative;overflow:hidden}
.dv-tv{width:58%;aspect-ratio:16/9;border-radius:6px;border:5px solid #05070a;outline:1px solid var(--line-2);background:linear-gradient(var(--surface-2) 0 82%,var(--accent) 82%)}
.dv-stb{position:absolute;bottom:24px;inset-inline-start:22%;width:22%;height:12px;border-radius:4px;background:#05070a;outline:1px solid var(--line-2)}
.dv-stb::after{content:"";position:absolute;inset-inline-end:8px;top:4px;width:4px;height:4px;border-radius:50%;background:var(--accent)}
.dv-box .dv-tv{margin-bottom:22px}
.dv-tablet{width:40%;aspect-ratio:4/3;border-radius:10px;border:7px solid #05070a;outline:1px solid var(--line-2);background:linear-gradient(var(--surface-2) 0 70%,var(--accent-line) 70%)}
.dv-stand{width:22%;aspect-ratio:9/16;border-radius:5px;border:5px solid #05070a;outline:1px solid var(--line-2);background:linear-gradient(#2a3648 0 64%,var(--surface-2) 64% 88%,var(--accent) 88%);margin-bottom:12px}
.dv-totem::after{content:"";position:absolute;bottom:14px;left:50%;width:16%;height:6px;margin-left:-8%;border-radius:4px;background:#05070a;outline:1px solid var(--line-2)}
.dev figcaption{display:flex;flex-direction:column}
.dev figcaption b{font-family:var(--display);font-weight:700;font-size:1.08rem}
.dev figcaption span{color:var(--muted);font-size:.96rem}
.dev-note{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;padding:20px 24px;border-radius:var(--r);border:1px dashed var(--line-2)}
.dev-note p{color:var(--muted)}
.dev-note b{color:var(--text)}
@media (max-width:760px){.dev-row{grid-template-columns:1fr;gap:12px}.dev{flex-direction:row;align-items:center;gap:16px}.dv{flex:none;width:118px;height:92px}.dv-stb{bottom:12px;height:8px}.dv-box .dv-tv{margin-bottom:12px;border-width:3px}.dv-tablet{border-width:4px;width:52%}.dv-stand{border-width:3px;width:24%;margin-bottom:8px}.dv-totem::after{bottom:7px;height:4px}}

/* pricing */
.pricing{background:var(--bg-2);border-block:1px solid rgba(255,255,255,.05)}
.price-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:20px;align-items:stretch;margin-top:clamp(28px,4vw,48px)}
.plan{border-radius:20px;background:var(--surface);border:1px solid var(--accent-line);padding:clamp(22px,3vw,38px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 40px}
.plan-top{display:flex;flex-direction:column;gap:10px}
.plan-name{color:var(--muted);font-weight:600}
.plan-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.plan-price b{font-family:var(--display);font-weight:800;font-size:clamp(3.6rem,2.6rem + 3vw,5.2rem);line-height:1;color:var(--text)}
.plan-price span{color:var(--muted);font-size:1.02rem}
.plan-year{color:var(--text);font-size:1rem}
.plan-trial{display:inline-flex;align-items:center;gap:.5em;align-self:flex-start;margin-top:6px;padding:6px 14px;border-radius:99px;background:var(--accent-soft);color:var(--accent);font-weight:600}
.plan-trial .ic{stroke-width:2.4}
.plan-list{list-style:none;margin:0;padding:0;display:grid;gap:10px;align-content:start}
.plan-list li{display:flex;gap:10px;align-items:flex-start;font-size:.98rem}
.plan-list .ic{color:var(--accent);margin-top:.35em;stroke-width:2.2}
.plan .btn-block{grid-column:1/-1}
.vat{grid-column:1/-1;margin-top:-12px;text-align:center;font-size:.86rem;color:var(--dim)}
.hw{border-radius:20px;background:var(--surface);border:1px solid var(--line);padding:clamp(22px,3vw,34px);display:flex;flex-direction:column;gap:12px}
.hw>.ic{width:32px;height:32px;color:var(--accent);stroke-width:1.5}
.hw p{color:var(--muted)}
.hw .link-arrow{margin-top:auto}
@media (max-width:1000px){.price-grid{grid-template-columns:1fr}}
@media (max-width:640px){.plan{grid-template-columns:1fr}}

/* soon */
.soon{border-bottom:1px solid rgba(255,255,255,.05)}
.soon-row{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:20px 48px;padding-block:34px}
.soon h2{font-size:1.25rem}
.soon ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 28px}
.soon li{display:inline-flex;align-items:center;gap:10px;color:var(--muted)}
.tag{font-size:.74rem;font-weight:700;padding:2px 9px;border-radius:99px;border:1px solid var(--line-2);color:var(--text)}
@media (max-width:900px){.soon-row{grid-template-columns:1fr}.soon ul{flex-direction:column}}

/* faq */
.faq-grid{display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr);gap:clamp(24px,5vw,72px);align-items:start}
.faq h2{position:sticky;top:100px}
.qa{border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 2px;font-weight:600;font-size:1.06rem}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--accent)}
.qa summary .ic{color:var(--muted);transition:transform .3s var(--ease)}
.qa details[open] summary .ic{transform:rotate(180deg);color:var(--accent)}
.qa details p{padding:0 2px 22px;color:var(--muted);max-width:62ch}
@media (max-width:860px){.faq-grid{grid-template-columns:1fr}.faq h2{position:static}}

/* final */
.final{padding-block:clamp(64px,8vw,104px)}
.final-in{display:flex;flex-direction:column;align-items:center;text-align:center}
.final h2{max-width:18em}
.final .cta-row{justify-content:center}

/* footer */
.site-foot{border-top:1px solid var(--line);background:#080b11;padding-top:44px;font-size:.95rem}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:28px}
.foot-brand p{margin-top:14px;color:var(--muted);line-height:1.8}
.foot-links,.foot-contact{display:flex;flex-direction:column;gap:8px}
.foot-links a,.foot-contact a{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;gap:.5em;align-self:flex-start}
.foot-links a:hover,.foot-contact a:hover{color:var(--accent)}
.foot-base{margin-top:36px;padding-block:18px;border-top:1px solid rgba(255,255,255,.05);color:var(--dim);font-size:.85rem}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr}}

/* motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .tk{transform:none}
}

/* /download/ page (template src/download.template.html) */
.dl main{min-height:calc(100dvh - 160px)}
.dl-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,72px);align-items:start}
.dl-title{font-size:clamp(1.9rem,1.2rem + 2.2vw,2.8rem);line-height:1.35}
.dl-meta{margin:28px 0 0;display:grid;gap:10px}
.dl-meta div{display:flex;gap:14px;align-items:baseline}
.dl-meta dt{color:var(--dim);min-width:7.5em}
.dl-meta dd{margin:0;font-weight:600}
.dl-meta a{color:var(--accent)}
.dl-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:s}
.dl-steps li{counter-increment:s;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;padding:18px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line)}
.dl-steps li::before{content:counter(s);grid-row:span 2;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--accent-line);color:var(--accent);font-family:var(--display)}
.dl-steps span{color:var(--muted);font-size:.96rem}
.dl .foot-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:0;border-top:0}
.dl .foot-base a{color:var(--muted)}
@media (max-width:860px){.dl-grid{grid-template-columns:1fr}}