/* ScreenSign — sales site.
   Theme = the management interface (public/admin.css): the logo's brass, warm neutrals, IBM Plex Sans
   Hebrew, 10/13/17/22px radii, the same four "world" colours for the four products. Every token below
   names the admin token it copies, so the two stay one system (Shimi, 11/09/2026: "צבעי הממשק והלוגו").
   Logical properties throughout: one sheet serves RTL (Hebrew) and LTR (English). */
:root {
  /* brand — admin.css --brand / --brand-deep / --brand-tint / --brand-line */
  --brand:#bb9862; --brand-deep:#8a6522; --brand-hover:#75551c; --brand-tint:#faf6ef; --brand-line:#e7d9c0;
  /* ink & ground — admin.css --ink / --ink-2 / --muted / --faint / --paper / --wash / --wash-2 / --wash-3 / --line / --line-2 */
  --ink:#1c1b19; --ink-2:#3a372f; --muted:#5f5c55; --faint:#6f6a62;
  --paper:#fff; --wash:#f6f5f3; --wash-2:#efedea; --wash-3:#e9e6e1; --line:#e7e4df; --line-2:#d9d5ce;
  /* states — admin.css --live / --down / --wait / --rest (a word and an icon always accompany the colour) */
  --ok:#186c3c; --ok-tint:#e8f4ed; --ok-line:#bfdfcd; --warn:#93641a; --warn-tint:#fbf3e3; --warn-line:#ecdcb8;
  --bad:#b23b32; --bad-tint:#fbecea; --sim:#5b6673; --sim-tint:#eef1f4; --sim-line:#d5dce3;
  /* the four worlds — admin.css --w-signage / --w-doors / --w-rooms / --w-queues (+ -ink, -line) */
  --w-signage:#1e4fa8; --w-doors:#186c3c; --w-rooms:#8a5c14; --w-queues:#5b21b6;
  --r-xs:7px; --r-sm:10px; --r:13px; --r-lg:17px; --r-xl:22px;           /* admin.css radii */
  --sh-1:0 1px 2px rgba(28,27,25,.05); --sh-2:0 1px 3px rgba(28,27,25,.08), 0 12px 30px -14px rgba(28,27,25,.32); --sh-3:0 24px 60px -20px rgba(28,27,25,.34), 0 2px 8px rgba(28,27,25,.08);
  --fast:.14s cubic-bezier(.32,.72,0,1); --ease:cubic-bezier(.32,.72,0,1);
  --panel:#15161a;                                                         /* admin.css --panel-bg: an unlit screen */
  /* scenes: warm room tones, the world colour as accent */
  --sc-wall:var(--wash-2); --sc-floor:var(--wash-3); --sc-wood:#cdb794; --sc-counter:#e2d6c3; --sc-brass:var(--brand); --sc-ink:var(--ink-2); --sc-panel:var(--panel); --sc-door:#b9a17a; --sc-glass:#f4f7fa; --sc-line:#d5dce3; --sc-accent:var(--acc, var(--brand));
}
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { background:var(--paper); color:var(--ink); font-family:'IBM Plex Sans Hebrew','Heebo',system-ui,-apple-system,'Segoe UI','Noto Sans Hebrew',Arial,sans-serif; font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a { color:var(--brand-deep); text-decoration:none; }
a:hover { text-decoration:underline; }
img, svg, video { display:block; max-width:100%; }
button, input, textarea, select { font:inherit; color:inherit; }
h1, h2, h3 { line-height:1.15; letter-spacing:-.014em; color:var(--ink); font-weight:700; }
h1 { font-size:clamp(1.9rem, 4.4vw, 3rem); }
h2 { font-size:clamp(1.4rem, 2.8vw, 2rem); margin-block-end:.5rem; }
.sec .wrap > h2:not(:first-child) { margin-block-start:2.25rem; }
h3 { font-size:1.1rem; font-weight:600; }
p { max-width:65ch; }
.wrap { width:min(1160px, 100% - 2rem); margin-inline:auto; }
.wrap.narrow { width:min(720px, 100% - 2rem); }
.sec { padding-block:clamp(3rem, 7vw, 5rem); }
.sec-alt { background:var(--wash); }
.sub { color:var(--muted); font-size:1.08rem; margin-block-end:1.5rem; max-width:60ch; }
.muted { color:var(--muted); }
.small { font-size:.92rem; }
.center { text-align:center; }
.kicker { color:var(--brand-deep); font-weight:600; font-size:.92rem; letter-spacing:.03em; margin-block-end:.7rem; }
.lead { font-size:1.12rem; color:var(--ink-2); }
.skip { position:absolute; inset-inline-start:0; top:-4rem; background:var(--ink); color:#fff; padding:.6rem 1rem; z-index:100; border-radius:0 0 var(--r) 0; }
.skip:focus { top:0; }
:focus-visible { outline:3px solid var(--brand); outline-offset:2px; border-radius:6px; }

/* ---------- buttons (admin.css .btn / .btn.ghost) ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:46px; padding:.65rem 1.25rem; border-radius:var(--r-sm); border:1px solid transparent; font-weight:600; font-size:15px; letter-spacing:.005em; cursor:pointer; white-space:nowrap; transition:background var(--fast), border-color var(--fast), transform var(--fast), box-shadow var(--fast); text-decoration:none !important; }
.btn:active { transform:scale(.985); }
.btn-primary { background:var(--brand-deep); color:#fff; }
.btn-primary:hover { background:var(--brand-hover); }
.btn-ghost { background:var(--paper); color:var(--ink); border-color:var(--line-2); box-shadow:var(--sh-1); }
.btn-ghost:hover { background:var(--wash); border-color:#c6c1b9; }
.btn-light { background:#fff; color:var(--ink); }
.btn-light:hover { background:var(--brand-tint); }
.btn-ghost-light { background:transparent; color:#fff; border-color:rgba(255,255,255,.45); }
.btn-ghost-light:hover { background:rgba(255,255,255,.1); }
.btn-ok { background:var(--ok); color:#fff; }
.btn-bad { background:var(--bad); color:#fff; }
.btn-block { width:100%; }
.btn-small { min-height:40px; padding:.4rem 1rem; font-size:.95rem; background:var(--brand-deep); color:#fff; }
.btn-small:hover { background:var(--brand-hover); }
.btn[disabled] { opacity:.6; cursor:progress; }
.cta-row { display:flex; flex-wrap:wrap; gap:.75rem; margin-block:1.5rem; }
.badge { display:inline-block; font-size:.78rem; font-weight:600; padding:.15rem .6rem; border-radius:999px; background:var(--brand-tint); color:var(--brand-deep); border:1px solid var(--brand-line); vertical-align:middle; }
.badge-warn { background:var(--warn-tint); color:var(--warn); border-color:var(--warn-line); }
.badge-sim { background:var(--sim-tint); color:var(--sim); border-color:var(--sim-line); }

/* ---------- header ---------- */
.hdr { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.9); backdrop-filter:saturate(1.3) blur(10px); border-block-end:1px solid var(--line); }
.hdr-in { display:flex; align-items:center; gap:1.5rem; min-height:68px; position:relative; }
.logo { display:inline-flex; align-items:center; text-decoration:none !important; }
.logo img { height:34px; width:auto; }
.nav { display:flex; gap:1.25rem; margin-inline-start:.5rem; }
.nav a { color:var(--ink-2); font-weight:500; padding:.5rem 0; }
.nav a:hover { color:var(--brand-deep); text-decoration:none; }
.hdr-tools { margin-inline-start:auto; display:flex; align-items:center; gap:.7rem; }
.lang { font-weight:600; color:var(--ink-2); font-size:.95rem; display:inline-flex; align-items:center; min-height:44px; padding-inline:.5rem; border-radius:var(--r-xs); }
.lang:hover { background:var(--wash); text-decoration:none; }
.acct { font-weight:600; color:var(--brand-deep); }
.cart-btn { position:relative; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; color:var(--ink); background:var(--wash); border:1px solid var(--line); }
.cart-btn:hover { background:var(--brand-tint); text-decoration:none; }
.cart-n { position:absolute; top:-3px; inset-inline-end:-3px; min-width:20px; height:20px; padding:0 5px; border-radius:999px; background:var(--brand-deep); color:#fff; font-size:.75rem; font-weight:700; display:flex; align-items:center; justify-content:center; }
.burger { display:none; width:44px; height:44px; border:0; background:transparent; flex-direction:column; justify-content:center; align-items:center; gap:5px; cursor:pointer; }
.burger span { width:22px; height:2px; background:var(--ink); border-radius:2px; }
.mnav { display:none; }
@media (max-width: 860px) {
  .nav, .acct, .lang { display:none; }
  .burger { display:flex; }
  .mnav { display:flex; flex-direction:column; position:absolute; top:100%; inset-inline:0; background:#fff; border-block-end:1px solid var(--line); box-shadow:var(--sh-2); padding:.5rem 1rem 1rem; }
  .mnav[hidden] { display:none; }
  .mnav a { padding:.8rem .25rem; border-block-end:1px solid var(--line); font-weight:600; color:var(--ink-2); }
  .mnav a:last-child { border:0; }
  .logo img { height:30px; }
}

/* ---------- hero ---------- */
.hero { padding-block:clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem); background:radial-gradient(900px 420px at 80% -20%, var(--brand-tint), transparent 62%), #fff; }
.hero-txt { max-width:52rem; }
.hero h1 { font-size:clamp(2rem, 4.8vw, 3.4rem); margin-block-end:1rem; }
.hero-note { color:var(--faint); font-size:.95rem; }

/* ---------- screen mockups (the product, drawn) ---------- */
.mock { position:relative; background:var(--panel); border-radius:10px; box-shadow:var(--sh-2), inset 0 0 0 1px rgba(255,255,255,.06); overflow:hidden; color:#fff; font-size:clamp(9px, 1.1vw, 13px); direction:inherit; }
.mock::after { content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(255,255,255,.07), transparent 45%); pointer-events:none; }
.mock-tv { aspect-ratio:16 / 9; display:grid; grid-template-columns:2.2fr 1fr; grid-template-rows:1fr auto; }
.mk-main { padding:7% 6%; background:linear-gradient(160deg, #1e4fa8, #0f2a5e 70%); display:flex; flex-direction:column; gap:.6em; }
.mk-title { font-weight:700; font-size:1.7em; letter-spacing:-.01em; }
.mk-line { height:.55em; border-radius:999px; background:rgba(255,255,255,.28); }
.w70 { width:70%; } .w50 { width:50%; } .w60 { width:60%; }
.mk-price { margin-block-start:auto; font-weight:700; font-size:2.2em; color:#ffd166; }
.mk-side { background:#111a33; padding:8% 7%; display:flex; flex-direction:column; gap:.6em; border-inline-start:1px solid rgba(255,255,255,.08); }
.mk-card { background:#fff; color:var(--ink); border-radius:.6em; padding:.7em .8em; display:flex; flex-direction:column; gap:.2em; font-size:1.05em; }
.mk-card b { font-weight:700; }
.mk-card > span { color:var(--muted); font-size:.9em; }
.mk-clock { margin-block-start:auto; font-weight:600; font-size:1.6em; opacity:.85; font-variant-numeric:tabular-nums; }
.mk-ticker { grid-column:1 / span 2; background:#ffd166; color:#1c1b19; font-weight:600; padding:.45em 0; overflow:hidden; white-space:nowrap; }
.mk-ticker span { display:inline-block; padding-inline:100%; animation:tick 18s linear infinite; }
[dir="rtl"] .mk-ticker span { animation-name:tick-rtl; }
@keyframes tick { from { transform:translateX(0); } to { transform:translateX(-100%); } }
@keyframes tick-rtl { from { transform:translateX(0); } to { transform:translateX(100%); } }
/* text that swaps to show a state change (card content, door state, board number) */
.mk-swap, .dr-swap, .qb-swap, .qb-swap2, .rm-swap { display:inline-grid; }
.mk-swap > span, .dr-swap > span, .qb-swap > span, .qb-swap2 > span, .rm-swap > span { grid-area:1 / 1; animation:swapA 8s ease-in-out infinite; }
.mk-swap > span:last-child, .dr-swap > span:last-child, .qb-swap > span:last-child, .qb-swap2 > span:last-child, .rm-swap > span:last-child { animation-name:swapB; }
@keyframes swapA { 0%, 45% { opacity:1; transform:translateY(0); } 50%, 95% { opacity:0; transform:translateY(-.3em); } 100% { opacity:1; transform:translateY(0); } }
@keyframes swapB { 0%, 45% { opacity:0; transform:translateY(.3em); } 50%, 95% { opacity:1; transform:translateY(0); } 100% { opacity:0; transform:translateY(.3em); } }
.mock-door { aspect-ratio:3 / 4; background:linear-gradient(170deg, #ffffff, #f3f1ec); color:var(--ink); padding:9% 8%; display:flex; flex-direction:column; gap:.5em; align-items:flex-start; font-size:clamp(10px, 1.2vw, 14px); }
.mock-door::after { display:none; }
.dr-logo { width:2.4em; height:2.4em; border-radius:.6em; background:linear-gradient(135deg, #186c3c, #4fb37a); margin-block-end:.4em; }
.dr-state { display:inline-flex; align-items:center; gap:.4em; font-weight:600; font-size:.95em; padding:.2em .7em; border-radius:999px; background:var(--ok-tint); color:var(--ok); }
.dr-state i { width:.6em; height:.6em; border-radius:50%; background:var(--ok); }
.dr-name { font-weight:700; font-size:2em; line-height:1.1; color:var(--ink); margin-block-start:.4em; }
.dr-title { font-size:1.15em; color:var(--muted); }
.dr-until { font-size:.95em; color:var(--faint); }
.dr-room { margin-block-start:auto; font-weight:600; color:var(--faint); font-size:.95em; }
.mock-room { aspect-ratio:16 / 9; background:var(--panel); padding:6% 6%; display:flex; flex-direction:column; gap:.55em; }
.rm-head { display:flex; justify-content:space-between; font-weight:600; font-size:1.4em; }
.rm-clock { opacity:.7; font-variant-numeric:tabular-nums; }
.rm-state { align-self:flex-start; font-weight:700; padding:.25em .8em; border-radius:999px; font-size:1.05em; }
.rm-state.busy { background:#b23b32; }
.rm-now { font-size:1.8em; font-weight:700; letter-spacing:-.01em; }
.rm-strip { display:flex; gap:.35em; margin-block-start:auto; }
.rm-strip i { flex:1; height:.9em; border-radius:.3em; background:rgba(255,255,255,.14); }
.rm-strip i.past { background:rgba(255,255,255,.3); } .rm-strip i.now { background:#b23b32; animation:pulse 2.4s ease-in-out infinite; } .rm-strip i.free { background:#186c3c; }
@keyframes pulse { 50% { opacity:.55; } }
.rm-next { font-size:.95em; opacity:.8; }
.mock-board { aspect-ratio:16 / 9; background:var(--panel); display:grid; grid-template-columns:1.2fr 1fr; grid-template-rows:1fr auto; }
.qb-now { grid-row:1 / span 2; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:.2em; background:#5b21b6; padding:6%; }
.qb-num { font-size:3em; font-weight:700; letter-spacing:-.02em; line-height:1; white-space:nowrap; }
.qb-arrow { font-size:1.6em; opacity:.8; }
[dir="rtl"] .qb-arrow { transform:scaleX(-1); }
.qb-desk { font-size:1.5em; font-weight:700; }
.qb-list { list-style:none; padding:6% 6%; display:flex; flex-direction:column; gap:.5em; font-size:1.05em; }
.qb-list li { display:flex; justify-content:space-between; border-block-end:1px solid rgba(255,255,255,.12); padding-block-end:.3em; opacity:.85; }
.qb-list li span { white-space:nowrap; }
.qb-foot { padding:0 6% 6%; font-size:.95em; opacity:.7; }

/* ---------- solution explorer (home) ---------- */
.explorer { padding-block:clamp(1rem, 3vw, 2rem) clamp(3rem, 6vw, 4.5rem); }
.ex-tiles { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:.9rem; }
.ex-tile { position:relative; display:flex; flex-direction:column; gap:.3rem; text-align:start; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:.9rem .9rem 1rem; cursor:pointer; transition:transform .2s var(--ease), box-shadow .2s, border-color .2s, background .2s; }
.ex-tile:hover { transform:translateY(-2px); box-shadow:var(--sh-2); border-color:var(--line-2); }
.ex-tile.is-on, .ex-tile[aria-selected="true"] { background:var(--tint); border-color:var(--wline); box-shadow:inset 0 0 0 1px var(--wline), var(--sh-2); }
.ex-mock { display:block; margin-block-end:.4rem; }
.ex-mock .mock { font-size:clamp(6px, .75vw, 8.5px); }
.ex-mock .mock-door { width:52%; margin-inline:auto; }
.ex-name { font-weight:700; font-size:1.1rem; color:var(--ink); }
.ex-tile.is-on .ex-name { color:var(--acc); }
.ex-short { color:var(--muted); font-size:.92rem; line-height:1.4; }
.ex-price { margin-block-start:.35rem; font-weight:700; color:var(--ink); }
.ex-price small { font-weight:500; color:var(--muted); font-size:.8rem; }
.ex-chev { position:absolute; inset-inline-end:.9rem; top:.9rem; width:10px; height:10px; border-radius:50%; background:var(--line-2); transition:background .2s, transform .3s var(--ease); }
.ex-tile.is-on .ex-chev { background:var(--acc); transform:scale(1.4); }
/* the panel opens under the row as a grid-row animation: height from 0fr to 1fr, so nothing jumps */
.ex-panels { margin-block-start:.9rem; }
.ex-panel { display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .45s var(--ease), opacity .35s ease; }
.ex-panel.is-open { grid-template-rows:1fr; opacity:1; }
.ex-panel[hidden] { display:none; }
.ex-inner { overflow:hidden; min-height:0; }
.ex-grid { display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr); gap:1.5rem; background:var(--tint); border:1px solid var(--wline); border-radius:var(--r-xl); padding:1.5rem; }
.ex-feats h3 { margin-block-end:.7rem; color:var(--acc); }
.ex-panel .caps.compact { grid-template-columns:1fr; gap:.45rem; }
.ex-panel .cap { background:#fff; }
.ex-panel.is-open .cap { animation:rise .45s var(--ease) both; }
.ex-panel.is-open .cap:nth-child(2) { animation-delay:.06s; } .ex-panel.is-open .cap:nth-child(3) { animation-delay:.12s; } .ex-panel.is-open .cap:nth-child(4) { animation-delay:.18s; } .ex-panel.is-open .cap:nth-child(5) { animation-delay:.24s; } .ex-panel.is-open .cap:nth-child(6) { animation-delay:.3s; }
@keyframes rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.ex-video .video-soon.compact { grid-template-columns:1fr; padding:1rem; background:#fff; }
.ex-video .video-poster .mock { font-size:clamp(8px, 1vw, 12px); }
.ex-video .video-cap h3 { font-size:1rem; margin-block:.5rem .25rem; }
/* phone / tablet: the four tiles become a swipe carousel (one big tile at a time, the next one peeking), the open panel sits right under it with the clip first */
.ex-dots, .ex-hint-touch { display:none; }
@media (max-width: 900px) {
  .ex-tiles { display:flex; gap:.75rem; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-inline:.25rem; padding:.25rem .25rem .5rem; margin-inline:-.25rem; scrollbar-width:none; }
  .ex-tiles::-webkit-scrollbar { display:none; }
  .ex-tile { flex:0 0 min(78vw, 340px); scroll-snap-align:center; padding:.8rem .8rem .95rem; }
  .ex-tile:hover { transform:none; box-shadow:none; }
  .ex-tile.is-on { box-shadow:inset 0 0 0 1px var(--wline), var(--sh-2); }
  .ex-mock { aspect-ratio:16 / 9; min-height:0; overflow:hidden; display:grid; place-items:center; }   /* every tile's screen box is 16:9, the portrait door sign sits centred inside it → equal tile heights, no empty band */
  .ex-mock .mock { width:100%; font-size:clamp(7.5px, 2.4vw, 9.5px); }   /* the grid centring must not shrink-wrap the TV: it fills the 16:9 box */
  .ex-mock .mock-door { width:42%; height:auto; max-height:100%; }
  .ex-name { font-size:1.05rem; }
  .ex-short { display:block; font-size:.9rem; }
  .ex-hint-fine { display:none; } .ex-hint-touch { display:inline; }   /* the hint talks about swiping, not the mouse */
  .ex-dots { display:flex; justify-content:center; gap:.45rem; margin-block:.35rem 0; }
  .ex-dots span { width:7px; height:7px; border-radius:50%; background:var(--line-2); transition:background .2s, transform .2s; }
  .ex-dots span.on { background:var(--brand); transform:scale(1.3); }
  .ex-panels { margin-block-start:.6rem; }
  .ex-grid { grid-template-columns:1fr; padding:1rem; gap:1rem; }
  .ex-grid .ex-video { order:-1; }
  .ex-panel .caps.compact { gap:.4rem; }
  .ex-panel .cta-row .btn { flex:1 1 auto; text-align:center; }
  .hero { background:radial-gradient(120% 55% at 85% -8%, var(--brand-tint), transparent 70%), #fff; }
}

/* ---------- product page: environment scene ---------- */
.phero { padding-block:clamp(2.5rem, 5vw, 4rem) 0; background:linear-gradient(180deg, var(--tint), #fff 60%); }
.phero .kicker { color:var(--acc); }
.scene-wrap { margin-block:1.5rem 2rem; }
.scene { position:relative; aspect-ratio:1200 / 560; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-2); container-type:inline-size; background:var(--wash-2); }
.scene svg { position:absolute; inset:0; width:100%; height:100%; }
.scene .ov { position:absolute; }
.scene .ov .mock { font-size:clamp(4.5px, 1cqw, 12.5px); }
.ov-tv { left:29%; top:9%; width:38%; }
.ov-phone { left:73%; top:47%; width:9%; }
.ov-door { left:50.5%; top:22%; width:11%; }
.ov-room { left:73%; top:19%; width:16%; }
.ov-phone2 { left:89%; top:50%; width:8%; }
.ov-board { left:47%; top:8%; width:34%; }
/* a phone drawn in CSS: the admin on it */
.ph { background:var(--ink); border-radius:1.6cqw; padding:.6cqw; box-shadow:var(--sh-2); font-size:clamp(4px, .95cqw, 11px); }
.ph-top { height:.7em; width:35%; margin:.2em auto .4em; background:#000; border-radius:999px; }
.ph-body { background:var(--wash); color:var(--ink); border-radius:1.2cqw; padding:.7em .6em; display:flex; flex-direction:column; gap:.45em; min-height:9em; }
.ph-row { display:flex; justify-content:space-between; gap:.4em; font-size:.95em; border-block-end:1px solid var(--line); padding-block-end:.3em; }
.ph-btn { margin-block-start:auto; background:var(--brand-deep); color:#fff; text-align:center; border-radius:.4em; padding:.4em; font-weight:600; }
.ph-btn.ph-ok { background:var(--ok); }
.ph-pulse { animation:tap 4s ease-in-out infinite; }
@keyframes tap { 0%, 70%, 100% { transform:scale(1); box-shadow:none; } 80% { transform:scale(.94); box-shadow:0 0 0 .6em rgba(138,101,34,.25); } }
.pin { position:absolute; left:var(--px); top:var(--py); transform:translate(-50%, -50%); width:clamp(24px, 3cqw, 34px); height:clamp(24px, 3cqw, 34px); border-radius:50%; border:2px solid #fff; background:var(--acc); color:#fff; font-weight:700; font-size:clamp(11px, 1.4cqw, 15px); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 2px 8px rgba(28,27,25,.35); padding:0; }
.pin::before { content:""; position:absolute; inset:-6px; border-radius:50%; border:2px solid var(--acc); opacity:.5; animation:ring 2.2s ease-out infinite; pointer-events:none; }   /* the ring is decoration: with it in the hit area, two pins 23px apart on a phone stole each other's taps */
@keyframes ring { from { transform:scale(.7); opacity:.6; } to { transform:scale(1.5); opacity:0; } }
.pin.is-hot, .pin:hover, .pin:focus-visible { background:var(--ink); border-color:var(--acc); }
.pin.is-hot::after, .pin:hover::after { content:attr(data-label); position:absolute; top:calc(100% + 8px); inset-inline-start:50%; transform:translateX(-50%); white-space:nowrap; background:var(--ink); color:#fff; font-size:clamp(10px, 1.2cqw, 13px); font-weight:500; padding:.3em .6em; border-radius:6px; pointer-events:none; }
[dir="rtl"] .pin.is-hot::after, [dir="rtl"] .pin:hover::after { transform:translateX(50%); }
.scene-badge { position:absolute; inset-inline-start:10px; bottom:10px; background:rgba(255,255,255,.9); color:var(--muted); font-size:.78rem; font-weight:500; padding:.2rem .6rem; border-radius:999px; border:1px solid var(--line); }
.phero-grid { display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(300px, .85fr); gap:clamp(1.5rem, 4vw, 3rem); align-items:start; padding-block-end:clamp(2rem, 5vw, 3.5rem); }
/* the screens repeated at readable size under the scene — phones only */
.scene-closeup { display:none; }
@media (max-width: 700px) {
  .scene-closeup { display:block; margin-block:.9rem 0; }
  .closeup-h { margin:0 0 .5rem; font-size:.9rem; color:var(--muted); }
  .closeup-grid { display:grid; gap:1rem; }
  .closeup-item { margin:0; }
  .closeup-mock { container-type:inline-size; }
  .closeup-mock .mock { font-size:clamp(9px, 3.4cqw, 13px); }
  .closeup-mock .mock-door { width:58%; margin-inline:auto; }
  .closeup-mock .ph { width:52%; margin-inline:auto; font-size:clamp(9px, 3.1cqw, 12px); border-radius:1.2rem; padding:.35rem; }
  .closeup-mock .ph-body { border-radius:.9rem; }
  .closeup-item figcaption { margin-top:.4rem; font-size:.85rem; color:var(--ink-2); }
}
.pinlist { list-style:none; display:grid; gap:.5rem; margin-block:1rem 1.5rem; }
.pinlist li { display:flex; gap:.7rem; align-items:flex-start; padding:.6rem .7rem; border-radius:var(--r); border:1px solid transparent; cursor:default; transition:background .15s, border-color .15s; }
.pinlist li b { flex:none; width:26px; height:26px; border-radius:50%; background:var(--acc); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.85rem; margin-block-start:.1rem; }
.pinlist li.is-hot, .pinlist li:hover, .pinlist li:focus-visible { background:var(--tint); border-color:var(--wline); }
.benefits { list-style:none; display:grid; gap:.55rem; }
.benefits li { position:relative; padding-inline-start:1.9rem; font-weight:500; }
.benefits li::before { content:"✓"; position:absolute; inset-inline-start:0; top:0; width:1.35rem; height:1.35rem; border-radius:50%; background:var(--acc); color:#fff; font-size:.8rem; display:flex; align-items:center; justify-content:center; margin-block-start:.2rem; }
.phero-side { display:grid; gap:1.25rem; position:sticky; top:84px; }
.pricebox { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:1.4rem; box-shadow:var(--sh-2); display:grid; gap:.8rem; }
.pb-top { display:flex; justify-content:space-between; align-items:center; gap:.5rem; flex-wrap:wrap; }
.pb-label { font-weight:600; color:var(--muted); }
.pb-price { font-size:2.2rem; font-weight:700; color:var(--ink); line-height:1.1; }
.pb-price small { font-size:1rem; font-weight:500; color:var(--muted); }
.pb-vat { color:var(--faint); font-size:.9rem; }
.qty { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem; font-weight:600; }
.qty-ctl { display:inline-flex; border:1px solid var(--line-2); border-radius:var(--r-sm); overflow:hidden; }
.qty-ctl button { width:44px; height:44px; border:0; background:var(--wash); font-size:1.3rem; cursor:pointer; color:var(--ink); }
.qty-ctl button:hover { background:var(--brand-tint); }
.qty-ctl input { width:64px; text-align:center; border:0; font-weight:600; font-size:1.05rem; -moz-appearance:textfield; }
.qty-ctl input::-webkit-outer-spin-button, .qty-ctl input::-webkit-inner-spin-button { -webkit-appearance:none; }
@media (max-width: 860px) { .phero-grid { grid-template-columns:1fr; } .phero-side { position:static; } .scene { border-radius:var(--r); } }
.video { border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--line); background:var(--wash); }
.video video { width:100%; aspect-ratio:16 / 9; background:#000; display:block; }
.video .video-cap { padding:.9rem 1.25rem 1.1rem; }
.video.compact .video-cap { padding:.7rem .9rem .9rem; }
.video.compact .video-cap h3 { font-size:1rem; margin-block:.4rem 0; }
.video-soon { display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr); align-items:center; gap:1.5rem; padding:1.5rem; }
.video-poster .mock { font-size:clamp(9px, 1.2vw, 14px); }
.video-poster .mock-door { width:44%; margin-inline:auto; }
.video-cap h3 { margin-block:.6rem .35rem; }
.video-cap p { color:var(--ink-2); }
@media (max-width: 760px) { .video-soon { grid-template-columns:1fr; } }
.caps { list-style:none; display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:.6rem 1.25rem; }
.cap { display:flex; align-items:flex-start; gap:.7rem; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:.75rem .9rem; }
.cap-st { flex:none; font-size:.75rem; font-weight:600; padding:.15rem .55rem; border-radius:999px; background:var(--ok-tint); color:var(--ok); margin-block-start:.2rem; }
.cap.partial .cap-st { background:var(--warn-tint); color:var(--warn); }
.cols3 { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:2rem; }
.list { list-style:none; display:grid; gap:.55rem; color:var(--ink-2); }
.list li { position:relative; padding-inline-start:1.4rem; }
.list li::before { content:"•"; position:absolute; inset-inline-start:.15rem; color:var(--brand); font-weight:700; }
.list.ok li::before { content:"✓"; color:var(--ok); }
.list.no li::before { content:"–"; color:var(--bad); }
.faq details { border-block-end:1px solid var(--line); padding-block:.9rem; }
.faq summary { cursor:pointer; font-weight:600; font-size:1.08rem; color:var(--ink); list-style:none; display:flex; justify-content:space-between; gap:1rem; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; color:var(--brand); font-weight:400; font-size:1.4rem; line-height:1; }
.faq details[open] summary::after { content:"−"; }
.faq p { color:var(--ink-2); margin-block-start:.6rem; }

/* ---------- solution cards (solutions index) ---------- */
.sol-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:1.25rem; }
.sol { display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; color:inherit; text-decoration:none !important; transition:transform .2s var(--ease), box-shadow .2s; }
.sol:hover { transform:translateY(-3px); box-shadow:var(--sh-2); border-color:var(--wline); }
.sol-mock { padding:1.1rem 1.1rem 0; background:linear-gradient(180deg, var(--tint), #fff); }
.sol-mock .mock { font-size:8.5px; }
.sol-mock .mock-door { width:52%; margin-inline:auto; }
.sol-body { padding:1.1rem 1.25rem 1.3rem; display:flex; flex-direction:column; gap:.4rem; }
.sol-body h3 { font-size:1.2rem; color:var(--acc); }
.sol-body p { color:var(--muted); font-size:.98rem; }
.sol-price { margin-block-start:.5rem; font-weight:700; color:var(--ink); font-size:1.15rem; }
.sol-price small { font-weight:500; color:var(--muted); font-size:.85rem; }
.sol-more { color:var(--brand-deep); font-weight:600; margin-block-start:.35rem; }

/* ---------- steps / why / cta ---------- */
.steps { list-style:none; display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:1.5rem; }
.steps li { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:1.5rem; }
.steps .n { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background:var(--brand-deep); color:#fff; font-weight:700; margin-block-end:.9rem; }
.steps p { color:var(--muted); }
.why { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:1.5rem 2rem; }
.why-i h3 { margin-block-end:.35rem; }
.why-i p { color:var(--muted); }
.why-i { padding-inline-start:1rem; border-inline-start:3px solid var(--brand); }
.cta { background-color:var(--ink); background-image:linear-gradient(135deg, #1c1b19, #3a372f); color:#fff; padding-block:clamp(3rem, 6vw, 4.5rem); }
.cta h2, .cta p { color:#fff; }
.cta p { opacity:.9; }
.cta-in { display:flex; flex-direction:column; align-items:flex-start; }

/* ---------- tables ---------- */
.tbl-wrap { overflow-x:auto; margin-block:1rem 2rem; -webkit-overflow-scrolling:touch; }
.tbl { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; min-width:560px; }
.tbl th, .tbl td { padding:.8rem .9rem; text-align:start; border-block-end:1px solid var(--line); vertical-align:middle; }
.tbl thead th { background:var(--wash); font-weight:600; color:var(--ink-2); font-size:.92rem; }
.tbl tbody th { font-weight:600; }
.tbl .num { font-variant-numeric:tabular-nums; white-space:nowrap; }
.tbl tfoot th, .tbl tfoot td { border:0; padding-block:.45rem; }
.tbl tfoot .tot th, .tbl tfoot .tot td { font-weight:700; font-size:1.1rem; color:var(--ink); border-block-start:2px solid var(--line-2); padding-block-start:.7rem; }
.tbl.order { min-width:0; }
@media (max-width: 560px) { .tbl.order th, .tbl.order td { padding:.6rem .5rem; font-size:.95rem; } }
.tbl.cmp th:first-child { width:38%; }
.tbl.cmp .c { text-align:center; font-weight:700; }
.tbl.cmp .c.yes { color:var(--ok); } .tbl.cmp .c.no { color:var(--faint); }
.inline-add { display:flex; gap:.4rem; align-items:center; }
.inline-add input { width:64px; min-height:40px; border:1px solid var(--line-2); border-radius:var(--r-xs); text-align:center; font-weight:600; }

/* ---------- forms ---------- */
.form { display:grid; gap:1rem; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:1.5rem; box-shadow:var(--sh-1); }
.form h2 { font-size:1.2rem; }
.form label { display:grid; gap:.35rem; font-weight:600; font-size:.95rem; }
.form label small { font-weight:400; color:var(--faint); }
.form input, .form textarea { width:100%; min-height:46px; border:1px solid var(--line-2); border-radius:var(--r-sm); padding:.6rem .8rem; background:#fff; font-weight:400; }
.form textarea { min-height:5rem; resize:vertical; }
.form input:focus, .form textarea:focus { border-color:var(--brand); outline:none; box-shadow:0 0 0 3px var(--brand-tint); }
.form input[disabled] { background:var(--wash); color:var(--muted); }
.form-err { background:var(--bad-tint); color:var(--bad); border-radius:var(--r-sm); padding:.6rem .8rem; font-weight:600; }
.auth h1 { margin-block-end:1.25rem; }
.auth p.center { margin-block-start:1rem; margin-inline:auto; }

/* ---------- cart / checkout ---------- */
.cart-lines { list-style:none; display:grid; gap:.75rem; margin-block-end:1.25rem; }
.cart-line { display:grid; grid-template-columns:minmax(0, 1fr) auto auto; gap:1rem; align-items:center; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:.9rem 1rem; }
.cart-line h3 { font-size:1.05rem; }
.cart-line .cl-meta { color:var(--muted); font-size:.92rem; }
.cart-line .cl-total { font-weight:700; color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums; }
.cart-line .cl-rm { background:none; border:0; color:var(--bad); font-weight:600; cursor:pointer; padding:.25rem .4rem; min-height:36px; }
@media (max-width: 560px) { .cart-line { grid-template-columns:1fr; } }
.totals { display:grid; gap:.4rem; background:var(--wash); border-radius:var(--r); padding:1rem 1.1rem; margin-block-end:1.25rem; }
.totals div { display:flex; justify-content:space-between; }
.totals .tot { font-weight:700; font-size:1.15rem; color:var(--ink); border-block-start:2px solid var(--line-2); padding-block-start:.5rem; margin-block-start:.3rem; }
.cart-empty { text-align:center; padding:2rem 1rem; border:1px dashed var(--line-2); border-radius:var(--r-lg); }
.cart-empty p { margin-inline:auto; }
.co-grid { display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(280px, .8fr); gap:2rem; align-items:start; }
.co-sum { position:sticky; top:84px; background:var(--wash); border-radius:var(--r-lg); padding:1.4rem; }
.co-sum h2 { font-size:1.15rem; margin-block-end:.75rem; }
@media (max-width: 860px) { .co-grid { grid-template-columns:1fr; } .co-sum { position:static; order:-1; } }
.sim-note { background:var(--sim-tint); color:var(--sim); border:1px solid var(--sim-line); border-radius:var(--r-sm); padding:.6rem .8rem; font-weight:500; font-size:.95rem; }
.sim-box { background:#fff; border:2px dashed var(--sim); border-radius:var(--r-lg); padding:1.75rem; }
.sim-box h1 { font-size:1.7rem; margin-block:.5rem .5rem; }
.sim-actions { display:grid; gap:.75rem; margin-block-start:1.25rem; }
.kv { display:grid; grid-template-columns:auto 1fr; gap:.35rem 1rem; margin-block:1rem; }
.kv dt { color:var(--muted); } .kv dd { font-weight:600; }
.st { display:inline-block; font-size:.85rem; font-weight:600; padding:.15rem .6rem; border-radius:999px; vertical-align:middle; }
.st-paid { background:var(--ok-tint); color:var(--ok); } .st-pending { background:var(--warn-tint); color:var(--warn); } .st-failed, .st-cancelled { background:var(--bad-tint); color:var(--bad); }
.result h1 { margin-block:.25rem .5rem; }
.result.paid h1 { color:var(--ok); } .result.failed h1, .result.cancelled h1 { color:var(--bad); } .result.pending h1 { color:var(--warn); }

/* ---------- footer (light, so the original logo stays itself) ---------- */
.ftr { background:var(--wash); color:var(--ink-2); padding-block:2.5rem 2rem; margin-block-start:auto; border-block-start:1px solid var(--line); }
.ftr-in { display:grid; grid-template-columns:minmax(0, 1.4fr) auto; gap:2rem; align-items:start; }
.ftr .logo img { height:34px; }
.ftr p { margin-block-start:.75rem; color:var(--muted); font-size:.95rem; }
.ftr nav { display:grid; gap:.5rem; }
.ftr nav a { color:var(--ink); font-weight:600; }
.ftr-meta { grid-column:1 / -1; display:flex; gap:1rem; align-items:center; border-block-start:1px solid var(--line-2); padding-block-start:1rem; font-size:.9rem; color:var(--muted); }
@media (max-width: 640px) { .ftr-in { grid-template-columns:1fr; } }

/* ---------- toast ---------- */
.toast[hidden] { display:none; }
.toast { position:fixed; inset-inline-start:50%; bottom:1.25rem; transform:translateX(-50%); background:var(--ink); color:#fff; padding:.8rem 1.2rem; border-radius:var(--r-sm); box-shadow:var(--sh-3); font-weight:500; z-index:60; display:flex; gap:1rem; align-items:center; max-width:calc(100% - 2rem); }
[dir="rtl"] .toast { transform:translateX(50%); }
.toast a { color:#ffd166; font-weight:700; }

/* ---------- motion: everything above is decoration; none of it is required to understand the page ---------- */
@media (prefers-reduced-motion: reduce) {
  .mk-ticker span { animation:none; padding-inline:.6em; }
  html { scroll-behavior:auto; }   /* no smooth scrolling either (astra-20260911-130023) */
  .mk-swap > span, .dr-swap > span, .qb-swap > span, .qb-swap2 > span, .rm-swap > span, .rm-strip i.now, .ph-pulse, .pin::before { animation:none; }
  .mk-swap > span:last-child, .dr-swap > span:last-child, .qb-swap > span:last-child, .qb-swap2 > span:last-child, .rm-swap > span:last-child { display:none; }
  .ex-panel, .ex-tile, .sol, .btn, .pinlist li { transition:none; }
  .ex-panel.is-open .cap { animation:none; }
}