/* ArtLine3D product showcase: the 3D Doodle and 3D Paint product pages (pages/demo_doodle.html and pages/demo_paint.html,
   served at /doodle and /paint by the coming-soon preview). The shared layout lives here: the hero, the big interactive
   demo (.sc: step bar, a stage with a visual side and one pane per step, controls, example picker), the scene pieces both
   products use (drop zone, photo card, the 3D model box, chips, files), the feature cards, the example strip and the
   closing call to action. Product-specific scene styles live in each page. Builds on the site.css tokens; logical
   properties plus --dir (1, or -1 in Hebrew) keep right-to-left mirrored. */

html { --dir:1; scroll-behavior:smooth; }
html[dir="rtl"] { --dir:-1; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }
main section[id] { scroll-margin-top:calc(var(--site-header-h) + 12px); }
.sc-sr { position:absolute !important; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* ---------- hero */
.sc-hero { padding:clamp(28px, 4.5vw, 56px) 0 4px; text-align:center; }
.sc-hero-top { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px; margin-bottom:18px; animation:siteIn .6s ease both; }
.sc-hero-top .site-badge { font-size:14px; padding:6px 14px; gap:7px; }
.sc-hero-top .site-badge .si { width:15px; height:15px; }
.sc-soon { display:inline-flex; align-items:center; gap:8px; padding:5px 13px 5px 11px; border-radius:999px; border:1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  background:var(--site-soft); color:var(--accent); font:800 13.5px/1.25 var(--font-head); }
[data-theme="dark"] .sc-soon { color:#b9a6ff; }
.sc-hero .site-h1 { max-width:20ch; margin:0 auto 18px; animation:siteIn .7s .05s ease both; }
.sc-hero .site-lead { max-width:62ch; margin:0 auto; animation:siteIn .7s .12s ease both; }
.sc-cta { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin:28px 0 18px; animation:siteIn .7s .2s ease both; }
.sc-hint { list-style:none; margin:0; padding:0; display:flex; justify-content:center; flex-wrap:wrap; gap:8px 22px; color:var(--muted); font-size:14.5px; font-weight:700;
  animation:siteIn .7s .28s ease both; }
.sc-hint li { display:inline-flex; align-items:center; gap:7px; }
.sc-hint .si { color:var(--accent); }
[data-theme="dark"] .sc-hint .si { color:#b9a6ff; }

/* ---------- section heads */
.sc-head { max-width:760px; margin:0 auto 30px; text-align:center; }
.sc-head .site-lead { margin:0 auto; }

/* ---------- the big demo: step bar */
.sc-sec { padding:34px 0 60px; }
.sc { position:relative; }
.sc-steps { list-style:none; margin:0 auto 16px; padding:5px; display:flex; gap:4px; max-width:920px; background:var(--panel); border:1px solid var(--line); border-radius:999px; box-shadow:var(--shadow); }
.sc-steps li { flex:1 1 auto; min-width:0; display:flex; transition:flex-grow .45s cubic-bezier(.2,.7,.2,1); }
.sc-step { position:relative; flex:1; min-width:0; display:flex; align-items:center; justify-content:center; gap:8px; padding:9px 12px; border:0; border-radius:999px; background:none;
  cursor:pointer; overflow:hidden; isolation:isolate; color:var(--muted); font:700 14px/1.2 var(--font-head); transition:color .3s, background-color .3s, box-shadow .3s; }
.sc-step:hover { color:var(--ink); background:var(--panel-2); }
.sc-step b { flex:none; width:23px; height:23px; display:grid; place-items:center; border-radius:50%; background:var(--panel-2); font-size:12px; font-weight:800; transition:background-color .3s, color .3s; }
.sc-step .t { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sc-step.done b { background:color-mix(in srgb, var(--ok) 18%, var(--panel)); color:var(--ok); }
.sc-step[aria-current="step"] { color:#fff; background:#6d4aff; box-shadow:0 6px 16px color-mix(in srgb, var(--accent) 32%, transparent); }
.sc-step[aria-current="step"] b { background:#fff; color:#6d4aff; }
.sc-step .fill { position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0; transform:scaleX(0); transform-origin:left center;
  background:linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.26)); }
[dir="rtl"] .sc-step .fill { transform-origin:right center; background:linear-gradient(270deg, rgba(255,255,255,.04), rgba(255,255,255,.26)); }
.sc.auto .sc-step[aria-current="step"] .fill { opacity:1; }
@keyframes scFill { from { transform:scaleX(0) } to { transform:scaleX(1) } }

/* ---------- the stage: a visual side and a panel with one pane per step */
.sc-stage { position:relative; display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr); grid-template-rows:minmax(0, 1fr);
  width:100%; aspect-ratio:16 / 10; min-height:560px; max-height:max(560px, calc(var(--site-vh) * 100 - var(--site-header-h) - 170px));
  border-radius:34px; border:1px solid var(--line); overflow:hidden; isolation:isolate; outline-offset:4px;
  background:radial-gradient(80% 70% at 28% 22%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%),
    radial-gradient(60% 60% at 92% 100%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 70%), var(--panel);
  box-shadow:var(--site-shadow-lg); }
.sc-vis { position:relative; min-width:0; min-height:0; container-type:size; overflow:hidden; user-select:none; -webkit-user-select:none; touch-action:pan-y; transition:opacity .25s ease; }
.sc-vis::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.75;
  background-image:radial-gradient(color-mix(in srgb, var(--ink) 12%, transparent) 1.1px, transparent 1.7px); background-size:22px 22px;
  -webkit-mask-image:radial-gradient(70% 65% at 50% 50%, #000 15%, transparent 100%); mask-image:radial-gradient(70% 65% at 50% 50%, #000 15%, transparent 100%); }
.sc.swap .sc-vis { opacity:0; }
.sc.jump .sc-vis, .sc.jump .sc-vis * { transition:none !important; }
.sc-panel { position:relative; display:grid; grid-template-columns:minmax(0, 1fr); min-width:0; min-height:0; padding:24px; padding-inline-start:6px; }
.sc-pane { grid-area:1 / 1; align-self:center; min-width:0; max-height:100%; overflow:hidden; padding:24px 24px 22px; border-radius:24px;
  background:var(--glass); border:1px solid var(--line); -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 22px 56px rgba(30,16,60,.12); opacity:0; visibility:hidden; transition:opacity .28s ease, visibility 0s linear .28s; }
[data-theme="dark"] .sc-pane { box-shadow:0 22px 56px rgba(0,0,0,.35); }
.sc-pane.on { opacity:1; visibility:visible; transition:opacity .45s ease .06s, visibility 0s; animation:scPaneIn .7s cubic-bezier(.2,.75,.2,1) both; }
@keyframes scPaneIn { from { transform:translateX(calc(var(--pd, 1) * 34px)); } to { transform:none; } }

/* pane contents */
.sc-ph { display:flex; align-items:center; gap:12px; margin:0 0 10px; }
.sc-n { flex:none; width:34px; height:34px; border-radius:11px; display:grid; place-items:center; color:#fff; background:var(--site-btn); font:800 16px var(--font-head);
  box-shadow:0 8px 18px color-mix(in srgb, var(--accent) 34%, transparent); }
.sc-pt { margin:0; font:800 clamp(1.25rem, 1rem + .7vw, 1.55rem)/1.15 var(--font-head); letter-spacing:-.01em; }
.sc-pl { margin:0 0 14px; color:var(--muted); font-size:15.5px; line-height:1.55; }
.sc-pl b { color:var(--ink); }
.sc-lbl { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:16px 0 8px; font:800 12px/1.3 var(--font-head); letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
[lang="he"] .sc-lbl { letter-spacing:.02em; }
.sc-lbl small { font:700 12.5px var(--font-body); letter-spacing:0; text-transform:none; }
.sc-note { display:flex; align-items:flex-start; gap:8px; margin:14px 0 0; color:var(--muted); font-size:13.5px; font-weight:600; line-height:1.45; }
.sc-note .si { flex:none; width:16px; height:16px; margin-top:1px; color:var(--accent); }
[data-theme="dark"] .sc-note .si { color:#b9a6ff; }
.sc-ticks { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.sc-ticks li { display:flex; align-items:flex-start; gap:10px; font-weight:700; font-size:15px; line-height:1.4; }
.sc-ticks .si { flex:none; width:21px; height:21px; padding:3.5px; border-radius:50%; background:color-mix(in srgb, var(--ok) 16%, transparent); color:var(--ok); stroke-width:3; }
.sc-chips { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:7px; }
.sc-chip { display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:999px; border:1px solid var(--line); background:var(--panel); color:var(--ink);
  font:700 13.5px/1.2 var(--font-head); white-space:nowrap; transition:background-color .25s, color .25s, border-color .25s, box-shadow .25s; }
.sc-chip .si { width:15px; height:15px; }
.sc-chip.dash { border-style:dashed; color:var(--muted); background:none; }
.sc-chip.hot { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.sc-chip.on { background:#6d4aff; border-color:#6d4aff; color:#fff; box-shadow:0 8px 18px color-mix(in srgb, var(--accent) 32%, transparent); animation:scPop .5s ease both; }
@keyframes scPop { 40% { transform:scale(1.12) } 100% { transform:none } }

/* progress + status line (the AI at work) */
.sc-work { margin-top:16px; padding:12px 14px; border-radius:16px; background:var(--panel); border:1px solid var(--line); }
.sc-prog { height:8px; border-radius:99px; overflow:hidden; background:var(--panel-2); border:1px solid var(--line); }
.sc-prog i { display:block; height:100%; background:var(--site-btn); transform:scaleX(0); transform-origin:left center; }
[dir="rtl"] .sc-prog i { transform-origin:right center; }
.sc-pane.run .sc-prog i { animation:scProg var(--work, 3s) cubic-bezier(.35,.1,.35,1) forwards; }
.sc-pane.done .sc-prog i { animation:none; transform:none; }
@keyframes scProg { to { transform:scaleX(1) } }
.sc-status { display:flex; align-items:center; gap:9px; margin-top:10px; font:800 14.5px/1.3 var(--font-head); min-height:24px; }
.sc-status > span { display:none; align-items:center; gap:9px; }
.sc-pane:not(.run):not(.done) .sc-status .idle, .sc-pane.run:not(.done) .sc-status .wait, .sc-pane.done .sc-status .ok { display:inline-flex; }
.sc-status .idle { color:var(--muted); }
.sc-status .idle .si { width:18px; height:18px; color:var(--accent); }
.sc-status .wait .site-spin { width:18px; height:18px; border-width:2.5px; }
.sc-status .ok { color:var(--ok); }
.sc-status .ok .si { width:22px; height:22px; padding:4px; border-radius:50%; background:var(--ok); color:#fff; stroke-width:3; }
[data-theme="dark"] .sc-status .ok .si { color:#0d0b16; }

/* colour swatches (interactive) */
.sc-swrow { display:flex; align-items:center; gap:12px; }
.sc-swrow + .sc-swrow { margin-top:12px; }
.sc-swrow > b { flex:none; width:64px; font:800 13.5px var(--font-head); color:var(--muted); }
.sc-sws { display:flex; flex-wrap:wrap; gap:9px; }
.sc-sw { position:relative; width:34px; height:34px; padding:0; border:0; border-radius:50%; cursor:pointer; background:var(--c);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.2), 0 2px 6px rgba(30,16,60,.14); transition:transform .2s, box-shadow .25s; }
.sc-sw:hover { transform:translateY(-2px); }
.sc-sw[aria-pressed="true"] { box-shadow:inset 0 0 0 1px rgba(0,0,0,.2), 0 0 0 3px var(--panel), 0 0 0 5.5px #6d4aff; }
.sc-sw[aria-pressed="true"]::after { content:""; position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:12px; height:7px;
  border:solid var(--tick, #fff); border-width:0 0 2.6px 2.6px; transform:translateY(-1.5px) rotate(-45deg); }

/* downloads: files and slicers */
.sc-files { display:grid; gap:8px; }
.sc-file { display:flex; align-items:center; gap:12px; padding:9px 10px; padding-inline-end:12px; border-radius:15px; background:var(--panel); border:1px solid var(--line); min-width:0; }
.sc-file .ext { flex:none; width:44px; height:44px; border-radius:12px; display:grid; place-items:center; color:#fff; background:var(--site-btn); font:800 12.5px var(--font-head); letter-spacing:.02em; }
.sc-file .ext.alt { background:linear-gradient(135deg, #0b6f8a, #1f9fc0); }
.sc-file .ext.txt { background:linear-gradient(135deg, #b8467e, #e0407f); }
.sc-file span { min-width:0; }
.sc-file b { display:block; font:800 14.5px/1.25 var(--font-head); }
.sc-file small { display:block; color:var(--muted); font-size:13px; font-weight:600; line-height:1.3; }
.sc-file .dl { flex:none; margin-inline-start:auto; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:var(--accent); background:var(--site-soft); }
[data-theme="dark"] .sc-file .dl { color:#b9a6ff; }
.sc-file .dl .si { width:17px; height:17px; }
.sc-apps { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.sc-app { display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:999px; background:var(--panel); border:1px solid var(--line); font:700 13px/1.2 var(--font-head); white-space:nowrap; }
.sc-app .si { width:14px; height:14px; color:var(--accent); }
[data-theme="dark"] .sc-app .si { color:#b9a6ff; }
.sc-ready { display:inline-flex; align-items:center; gap:9px; margin-top:14px; padding:7px 15px 7px 7px; border-radius:999px; background:var(--site-ok-bg); color:var(--ok);
  border:1px solid color-mix(in srgb, var(--ok) 35%, var(--line)); font:800 14.5px var(--font-head); }
[dir="rtl"] .sc-ready { padding:7px 7px 7px 15px; }
.sc-ready .si { width:24px; height:24px; padding:4px; border-radius:50%; background:var(--ok); color:#fff; stroke-width:3; }
[data-theme="dark"] .sc-ready .si { color:#0d0b16; }
.sc-pane.on .sc-in { animation:scIn .5s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--k, 0) * 90ms + 220ms); }
@keyframes scIn { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:none } }
.sc-pane.on .sc-ready { animation:scReady .6s cubic-bezier(.2,1.35,.4,1) both; animation-delay:var(--at, 1.6s); }
@keyframes scReady { from { opacity:0; transform:scale(.6) } to { opacity:1; transform:none } }

/* ---------- controls under the stage */
.sc-bar { display:flex; align-items:center; gap:12px 18px; margin-top:16px; }
.sc-cap { flex:1; min-width:0; margin:0; display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 10px; color:var(--ink); font:700 15.5px/1.4 var(--font-body); }
.sc-cap b { color:var(--accent); font:800 12.5px/1.4 var(--font-head); letter-spacing:.09em; text-transform:uppercase; white-space:nowrap; }
[lang="he"] .sc-cap b { letter-spacing:.02em; }
[data-theme="dark"] .sc-cap b { color:#b9a6ff; }
.sc-ctl { flex:none; display:flex; align-items:center; gap:8px; }
.sc-btn { width:46px; height:46px; padding:0; border-radius:50%; border:1px solid var(--line); background:var(--panel); color:var(--ink); display:grid; place-items:center; cursor:pointer;
  box-shadow:0 1px 2px rgba(27,23,48,.05); transition:transform .15s, border-color .2s, box-shadow .2s, opacity .2s; }
.sc-btn:hover:not(:disabled) { border-color:var(--accent); transform:translateY(-1px); box-shadow:0 8px 20px color-mix(in srgb, var(--accent) 16%, transparent); }
.sc-btn:disabled { opacity:.38; cursor:default; }
.sc-btn .si { width:20px; height:20px; stroke-width:2.2; }
.sc-btn.play { width:56px; height:56px; border:0; color:#fff; background:var(--site-btn); box-shadow:0 10px 24px color-mix(in srgb, var(--accent) 32%, transparent); }
.sc-btn.play .si { width:22px; height:22px; }
.sc-btn.play .si path[d^="M7.5"] { fill:currentColor; }

/* ---------- example picker */
.sc-pick { display:flex; align-items:center; gap:14px; margin-top:16px; padding:6px; padding-inline-start:18px; border-radius:22px; background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow); }
.sc-pick-l { flex:none; display:flex; align-items:center; gap:8px; font:800 14.5px var(--font-head); white-space:nowrap; }
.sc-pick-l .si { width:18px; height:18px; color:var(--accent); }
[data-theme="dark"] .sc-pick-l .si { color:#b9a6ff; }
.sc-thumbs { flex:1; min-width:0; display:flex; gap:10px; padding:7px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; }
.sc-thumbs::-webkit-scrollbar { display:none; }
.sc-thumb { position:relative; flex:none; width:58px; height:58px; padding:0; border:0; border-radius:16px; overflow:hidden; cursor:pointer; background:var(--panel-2);
  box-shadow:0 0 0 1px var(--line); transition:box-shadow .25s, transform .2s; }
.sc-thumb img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.sc-thumb:hover img { transform:scale(1.08); }
.sc-thumb[aria-pressed="true"] { box-shadow:0 0 0 3px #6d4aff, 0 8px 18px color-mix(in srgb, var(--accent) 30%, transparent); }
.sc-thumb::after { content:""; position:absolute; inset:0; margin:auto; width:22px; height:22px; border-radius:50%; border:3px solid rgba(255,255,255,.55); border-top-color:#fff; opacity:0; }
.sc.loading .sc-thumb[aria-pressed="true"]::after { opacity:1; animation:siteSpin .7s linear infinite; }
.sc.loading .sc-thumb[aria-pressed="true"] img { filter:brightness(.6); }

/* ---------- scene pieces both products use: the drop zone, the photo card, the 3D model box */
.sc-dz { position:absolute; left:50%; top:50%; translate:-50% -50%; width:min(80cqw, 76cqh); height:86cqh; border-radius:28px;
  border:2.5px dashed color-mix(in srgb, var(--accent) 42%, var(--line)); background:color-mix(in srgb, var(--accent) 4%, transparent);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:20px; text-align:center; color:var(--muted);
  transition:opacity .5s, scale .6s cubic-bezier(.2,.7,.2,1), border-color .4s, background-color .4s, box-shadow .4s; }
.sc-dz .ic { width:64px; height:64px; margin-bottom:8px; border-radius:20px; display:grid; place-items:center; color:#fff; background:var(--site-btn); box-shadow:0 12px 26px color-mix(in srgb, var(--accent) 35%, transparent); }
.sc-dz .ic .si { width:30px; height:30px; }
.sc-dz b { font:800 clamp(15px, 3.4cqmin, 19px)/1.3 var(--font-head); color:var(--ink); }
.sc-dz small { font-size:clamp(12.5px, 2.6cqmin, 14.5px); font-weight:600; }
.sc-vis.landed .sc-dz { border-style:solid; border-color:color-mix(in srgb, var(--accent) 65%, transparent); background:color-mix(in srgb, var(--accent) 8%, transparent);
  box-shadow:0 0 0 7px color-mix(in srgb, var(--accent) 10%, transparent); }
.sc-stage:not([data-step="1"]) .sc-dz { opacity:0; scale:.94; }
.sc-ok { position:absolute; z-index:6; left:50%; bottom:calc(7cqh + 6px); translate:-50% 0; display:inline-flex; align-items:center; gap:7px; padding:6px 14px 6px 7px; border-radius:999px;
  background:var(--panel); color:var(--ok); border:1px solid color-mix(in srgb, var(--ok) 35%, var(--line)); box-shadow:var(--shadow); font:800 13.5px var(--font-head); white-space:nowrap;
  opacity:0; scale:.8; transition:opacity .3s, scale .45s cubic-bezier(.2,1.4,.4,1); }
[dir="rtl"] .sc-ok { padding:6px 7px 6px 14px; }
.sc-ok .si { width:20px; height:20px; padding:3px; border-radius:50%; background:var(--ok); color:#fff; stroke-width:3; }
[data-theme="dark"] .sc-ok .si { color:#0d0b16; }
[data-step="1"] .sc-vis.landed .sc-ok { opacity:1; scale:1; }

.sc-photo { position:absolute; left:50%; top:50%; z-index:3; margin:0; --ph:min(60cqh, calc(60cqw / var(--par, .75)));
  width:calc(var(--ph) * (var(--par, .75) + .07)); padding:calc(var(--ph) * .035) calc(var(--ph) * .035) calc(var(--ph) * .13);
  translate:-50% -50%; background:#fff; border-radius:6px; box-shadow:0 22px 48px rgba(30,16,60,.26), 0 3px 8px rgba(30,16,60,.12);
  transition:translate .85s cubic-bezier(.2,.75,.2,1), rotate .85s cubic-bezier(.2,.75,.2,1), scale .85s cubic-bezier(.2,.75,.2,1), opacity .5s ease; }
.sc-photo img { display:block; width:100%; height:auto; aspect-ratio:var(--par, .75); object-fit:cover; border-radius:2px; background:#ece9f4; }
.sc-photo figcaption { position:absolute; inset-inline:0; bottom:0; height:calc(var(--ph) * .13); display:grid; place-items:center; font:700 clamp(10px, calc(var(--ph) * .05), 16px) var(--font-head); color:#3a3550; }
.sc-vis.drop .sc-photo { animation:scDrop .95s .35s cubic-bezier(.3,.7,.35,1) both; }
@keyframes scDrop { 0% { transform:translateY(-75cqh) rotate(calc(-18deg * var(--dir))) scale(1.08); opacity:0 } 35% { opacity:1 }
  78% { transform:translateY(1.2cqh) rotate(calc(1deg * var(--dir))) } 100% { transform:none; opacity:1 } }
.sc-photo .scan { position:absolute; inset:calc(var(--ph) * .035) calc(var(--ph) * .035) calc(var(--ph) * .13); overflow:hidden; border-radius:2px; pointer-events:none; opacity:0; transition:opacity .3s; }
.sc-photo .scan::before { content:""; position:absolute; inset-inline:0; top:-34%; height:34%; background:linear-gradient(180deg, transparent, rgba(139,108,255,.5) 78%, rgba(255,255,255,.95) 100%); }
.sc-photo .scan::after { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(139,108,255,.25) 1px, transparent 1px), linear-gradient(90deg, rgba(139,108,255,.25) 1px, transparent 1px); background-size:12.5% 8.33%; }
.sc-vis.scan .sc-photo .scan { opacity:1; }
.sc-vis.scan .sc-photo .scan::before { animation:scScan 1.15s cubic-bezier(.45,.05,.55,.95) infinite; }
@keyframes scScan { to { top:100% } }
.sc-sty { position:absolute; z-index:3; display:inline-flex; align-items:center; gap:.4em; padding:.45em .95em .45em .6em; border-radius:999px; background:var(--site-btn); color:#fff;
  white-space:nowrap; font:800 clamp(12px, 2.4cqmin, 15.5px)/1.2 var(--font-head); box-shadow:0 10px 22px color-mix(in srgb, var(--accent) 40%, transparent);
  rotate:calc(4deg * var(--dir)); opacity:0; scale:.5; transition:opacity .3s, scale .5s cubic-bezier(.2,1.5,.4,1); pointer-events:none; }
[dir="rtl"] .sc-sty { padding:.45em .6em .45em .95em; }
.sc-sty .si { width:1.1em; height:1.1em; }
.sc-vis.styled .sc-sty { opacity:1; scale:1; }

/* the shared real-3D viewer (/static/site/model3d.js mounts into .site-model); a flat picture stands in until it is live */
.sc-mbox { position:absolute; inset:4cqh 3cqw; z-index:2; opacity:0; scale:.92; pointer-events:none; transition:opacity .7s ease, scale .9s cubic-bezier(.2,.75,.2,1), translate .9s cubic-bezier(.2,.75,.2,1); }
.sc-mbox .site-model { position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity .5s ease; }
.sc-mbox .sc-mimg { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transition:opacity .5s ease; }
.sc-mbox.ready .site-model { opacity:1; }
.sc-mbox.ready .sc-mimg { opacity:0; }
.sc-vis.m-on .sc-mbox { opacity:1; scale:1; pointer-events:auto; }
.sc-tag3d { position:absolute; z-index:4; top:3.2cqh; inset-inline-start:3cqw; display:inline-flex; align-items:center; gap:7px; padding:6px 13px 6px 8px; border-radius:999px;
  background:var(--glass); border:1px solid var(--line); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:var(--ink); font:800 13px/1.2 var(--font-head); white-space:nowrap;
  box-shadow:0 6px 18px rgba(30,16,60,.1); opacity:0; translate:0 -6px; transition:opacity .45s .35s, translate .45s .35s; pointer-events:none; }
[dir="rtl"] .sc-tag3d { padding:6px 8px 6px 13px; }
.sc-tag3d .si { width:22px; height:22px; padding:4px; border-radius:7px; color:#fff; background:var(--site-btn); }
.sc-vis.m-on .sc-tag3d { opacity:1; translate:0 0; }
.sc-drag { position:absolute; z-index:4; bottom:3cqh; left:50%; translate:-50% 0; display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:999px;
  background:var(--glass); border:1px solid var(--line); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:var(--muted); font:700 12.5px/1.2 var(--font-head); white-space:nowrap;
  opacity:0; transition:opacity .4s .8s; pointer-events:none; }
.sc-drag .si { width:15px; height:15px; }
.sc-vis.m-on .sc-mbox.ready ~ .sc-drag { opacity:1; }

/* ---------- what you get */
.sc-feats { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:18px; }
.sc-feat { position:relative; padding:26px 22px 24px; overflow:hidden; }
.sc-feat .ic { width:50px; height:50px; margin-bottom:18px; border-radius:16px; display:grid; place-items:center; color:#fff; background:var(--site-btn);
  box-shadow:0 12px 24px color-mix(in srgb, var(--accent) 30%, transparent); }
.sc-feat .ic .si { width:24px; height:24px; }
.sc-feat h3 { margin:0 0 8px; font:800 1.14rem/1.3 var(--font-head); }
.sc-feat p { margin:0; color:var(--muted); font-size:15px; line-height:1.55; }
.sc-feat.key { border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); background:linear-gradient(180deg, var(--site-soft), var(--panel) 70%); }
.sc-feat.key::after { content:""; position:absolute; width:160px; height:160px; border-radius:50%; top:-80px; inset-inline-end:-60px; background:color-mix(in srgb, var(--accent) 10%, transparent); }

/* ---------- the example strip */
.sc-gal { position:relative; }
.sc-gal-track { display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none;
  padding:12px max(22px, calc((100% - 1156px) / 2)) 24px; scroll-padding-inline:max(22px, calc((100% - 1156px) / 2)); }
.sc-gal-track::-webkit-scrollbar { display:none; }
.sc-card { position:relative; flex:none; margin:0; height:340px; aspect-ratio:var(--ar); scroll-snap-align:start; border-radius:20px; overflow:hidden; background:#fff;
  border:1px solid var(--line); box-shadow:var(--shadow); cursor:pointer; outline-offset:3px; }
.sc-card .art { display:block; width:100%; height:100%; object-fit:cover; }
.sc-card .photo { position:absolute; top:10px; inset-inline-end:10px; width:76px; height:76px; object-fit:cover; border-radius:50%; border:3px solid #fff; box-shadow:0 6px 16px rgba(0,0,0,.25);
  transition:all .45s cubic-bezier(.2,.7,.2,1); }
.sc-card:hover .photo, .sc-card:focus-visible .photo, .sc-card.show .photo { top:0; inset-inline-end:0; width:100%; height:100%; border-radius:0; border-width:0; }
.sc-card figcaption { position:absolute; inset-inline-start:10px; bottom:10px; display:flex; align-items:center; gap:7px; max-width:calc(100% - 20px); padding:5px 11px 5px 5px; border-radius:999px;
  background:rgba(255,255,255,.93); color:#1b1730; font:700 12.5px var(--font-head); box-shadow:0 4px 12px rgba(0,0,0,.12); }
[dir="rtl"] .sc-card figcaption { padding:5px 5px 5px 11px; }
.sc-card figcaption span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sc-gal-foot { display:flex; align-items:center; justify-content:center; gap:10px 18px; flex-wrap:wrap; color:var(--muted); font-size:13.5px; text-align:center; }
.sc-gal-nav { display:flex; gap:8px; flex:none; }
.sc-gal-nav .sc-btn { width:44px; height:44px; }

/* ---------- closing call to action */
.sc-end { position:relative; overflow:hidden; border-radius:32px; padding:clamp(34px, 5vw, 60px); text-align:center; color:#fff; background:var(--site-btn);
  box-shadow:0 30px 70px color-mix(in srgb, var(--accent) 30%, transparent); }
.sc-end::before, .sc-end::after { content:""; position:absolute; border-radius:50%; background:rgba(255,255,255,.12); }
.sc-end::before { width:340px; height:340px; top:-160px; inset-inline-start:-90px; }
.sc-end::after { width:260px; height:260px; bottom:-150px; inset-inline-end:-60px; }
.sc-end > * { position:relative; }
.sc-end .site-h2 { color:#fff; max-width:22ch; margin:0 auto 10px; }
.sc-end p { opacity:.95; font-size:1.1rem; margin:0 0 24px; }
.sc-end .row { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.sc-end .site-btn.light { background:#fff; color:#4b2fd6; box-shadow:0 12px 26px rgba(0,0,0,.18); }
.sc-end .site-btn.outline { background:rgba(255,255,255,.14); color:#fff; box-shadow:none; border:1px solid rgba(255,255,255,.5); }

/* ---------- smaller screens */
@media (max-width: 1000px) { .sc-feats { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .sc-stage { grid-template-columns:minmax(0, 1fr); grid-template-rows:auto auto; aspect-ratio:auto; min-height:0; max-height:none; border-radius:28px; }
  .sc-vis { height:clamp(300px, 88vw, 480px); }
  .sc-panel { padding:0 12px 12px; }
  .sc-pane { align-self:stretch; display:flex; flex-direction:column; justify-content:center; padding:18px 18px 16px; border-radius:20px; }
  .sc-pane > * { flex:none; }
}
@media (max-width: 640px) {
  .sc-sec { padding-top:24px; }
  .sc-steps li.cur { flex-grow:3.3; }
  .sc-step { padding:8px 6px; gap:6px; font-size:12.5px; }
  .sc-steps li:not(.cur) .t { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .sc-bar { flex-wrap:wrap; justify-content:center; }
  .sc-cap { flex-basis:100%; justify-content:center; text-align:center; font-size:14.5px; }
  .sc-pick { flex-direction:column; align-items:stretch; gap:2px; padding:12px 6px 6px; }
  .sc-pick-l { justify-content:center; }
  .sc-pl { font-size:14.5px; margin-bottom:12px; }
  .sc-apps { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-inline:-4px; padding:2px 4px;
    -webkit-mask-image:linear-gradient(90deg, #000 82%, transparent); mask-image:linear-gradient(90deg, #000 82%, transparent); }
  [dir="rtl"] .sc-apps { -webkit-mask-image:linear-gradient(270deg, #000 82%, transparent); mask-image:linear-gradient(270deg, #000 82%, transparent); }
  .sc-apps::-webkit-scrollbar { display:none; }
  .sc-file { padding:7px 8px; }
  .sc-file .ext { width:38px; height:38px; font-size:11.5px; }
  .sc-card { height:220px; }
}
@media (max-width: 560px) {
  .sc-feats { grid-template-columns:minmax(0, 1fr); gap:12px; }
  .sc-cta .site-btn, .sc-cta .site-soon { width:100%; }
}