/* dx-showcase-2026-10 — Home "Selected work" wall + phone + panel (prefix dxsc-) */

.dxsc{
  --sc-bg:#05060B; --sc-card:#0E1220; --sc-line:rgba(255,255,255,.08); --sc-text:#F5F7FF; --sc-muted:#8B93A7;
  --sc-accent:#22D3EE; --sc-blue:#3D5AFE; --sc-violet:#A855F7; --sc-shadow:0 14px 36px rgba(0,0,0,.35);
  --sc-glass:rgba(5,6,11,.62);
  --pn-bg:rgba(14,18,32,.86); --pn-text:#F5F7FF; --pn-muted:#9AA3B8; --pn-line:rgba(255,255,255,.10); --pn-accent:#22D3EE;
  --sc-gap:clamp(10px,1vw,24px); --sc-cols:5; --sc-travel-n:34;
  --sc-colw:calc((100vw - (var(--sc-cols) + 1) * var(--sc-gap)) / var(--sc-cols));
  position:relative; padding:0 !important; background:var(--sc-bg); color:var(--sc-text); isolation:isolate;
}
html[data-theme="light"] .dxsc{
  --sc-bg:#ECEFF8; --sc-card:#fff; --sc-line:rgba(15,23,42,.08); --sc-text:#0B1220; --sc-muted:#53627b;
  --sc-accent:#0891B2; --sc-shadow:0 14px 34px rgba(30,41,80,.14); --sc-glass:rgba(255,255,255,.74);
  --pn-bg:rgba(255,255,255,.88); --pn-text:#0B1220; --pn-muted:#53627b; --pn-line:rgba(15,23,42,.08); --pn-accent:#0891B2;
}

/* ---------- stage: pinned while the wall moves ---------- */
.dxsc-stage{ position:relative; height:150vh; height:150svh; }
.dxsc-sticky{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; }

/* ---------- the wall ---------- */
.dxsc-wall{
  position:absolute; inset:0; display:flex; gap:var(--sc-gap); padding:0 var(--sc-gap);
  will-change:transform;
}
.dxsc-col{
  flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:var(--sc-gap);
  margin-top:calc((var(--sc-travel-n) * -1.3vh) - var(--off, 0) * 1vh);
  will-change:transform; transform:translate3d(0,0,0);
}
.dxsc-col:nth-child(n+6){ display:none; }

.dxsc-card{
  position:relative; flex:none; margin:0; overflow:hidden;
  border-radius:clamp(12px,1.1vw,24px); background:var(--sc-card);
  border:1px solid var(--sc-line); box-shadow:var(--sc-shadow);
}
.dxsc-card--tall{ aspect-ratio:3/4; }
.dxsc-card--sq{ aspect-ratio:1/1; }
.dxsc-card--wide{ aspect-ratio:4/3; }
.dxsc-card img{ display:block; width:100%; height:100%; object-fit:cover; }
.dxsc-card--client img{ object-position:top center; }
.dxsc-tag{
  position:absolute; left:8px; bottom:8px; max-width:calc(100% - 16px);
  padding:.55em .8em; border-radius:999px; background:rgba(5,6,11,.62); color:#fff;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font:500 clamp(9px,.6vw,13px)/1 'JetBrains Mono',monospace; letter-spacing:.05em; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ---------- small "live UI" cards (text drawn in code) ---------- */
.dxsc-ui{
  display:flex; flex-direction:column; justify-content:center; gap:.55em;
  padding:1.1em; font-size:calc(var(--sc-colw) / 17); line-height:1.25;
  background:linear-gradient(160deg, rgba(61,90,254,.16), rgba(168,85,247,.08) 55%, transparent), var(--sc-card);
}
.dxsc-ui-k{ font-size:.82em; color:var(--sc-muted); font-weight:500; }
.dxsc-ui-big{ font:700 3.4em/1 'Space Grotesk',sans-serif; letter-spacing:-.03em; }
.dxsc-ui-mid{ font:700 1.9em/1.05 'Space Grotesk',sans-serif; letter-spacing:-.02em; }
.dxsc-ui-mid small{ font-size:.5em; color:var(--sc-muted); font-weight:500; }
.dxsc-ui-s{ display:flex; align-items:center; gap:.45em; font-size:.82em; color:var(--sc-muted); }
.dxsc-ok{ width:1.15em; height:1.15em; flex:none; border-radius:50%; background:#22c55e; position:relative; }
.dxsc-ok::after{ content:""; position:absolute; left:.38em; top:.2em; width:.28em; height:.55em; border:solid #fff; border-width:0 .14em .14em 0; transform:rotate(45deg); }
.dxsc-bars{ display:flex; align-items:flex-end; gap:.3em; height:3.2em; }
.dxsc-bars i,.dxsc-chart i{ flex:1; height:var(--h); border-radius:.3em .3em .12em .12em; background:linear-gradient(180deg,var(--sc-accent),var(--sc-blue)); opacity:.9; }
.dxsc-chips,.dxsc-langs{ display:flex; flex-wrap:wrap; gap:.35em; }
.dxsc-chips b,.dxsc-langs b{ font-weight:500; font-size:.78em; padding:.35em .6em; border-radius:999px; border:1px solid var(--sc-line); background:rgba(127,140,180,.08); }
.dxsc-langs b{ font:600 1.05em/1 'Space Grotesk',sans-serif; padding:.5em .65em; }
.dxsc-ui--ring{ align-items:center; text-align:center; position:relative; }
.dxsc-ring{ width:58%; height:auto; transform:rotate(-90deg); }
.dxsc-ring circle{ fill:none; stroke:rgba(127,140,180,.18); stroke-width:6; }
.dxsc-ring .dxsc-ring-val{ stroke:#22c55e; stroke-linecap:round; stroke-dasharray:96 100; }
.dxsc-ui--ring .dxsc-ui-mid{ position:absolute; top:50%; left:50%; transform:translate(-50%,-78%); }
.dxsc-ui--chat{ justify-content:flex-start; }
.dxsc-b{ margin:0; font-size:.82em; padding:.55em .75em; border-radius:1em; max-width:88%; }
.dxsc-b--in{ background:rgba(127,140,180,.14); align-self:flex-start; border-bottom-left-radius:.3em; }
.dxsc-b--out{ background:linear-gradient(135deg,var(--sc-blue),var(--sc-violet)); color:#fff; align-self:flex-end; border-bottom-right-radius:.3em; }
.dxsc-typing{ display:inline-flex; gap:.25em; padding:.6em .75em; border-radius:1em; background:rgba(127,140,180,.14); align-self:flex-start; }
.dxsc-typing i{ width:.38em; height:.38em; border-radius:50%; background:var(--sc-muted); animation:dxscDot 1.2s infinite ease-in-out; }
.dxsc-typing i:nth-child(2){ animation-delay:.15s } .dxsc-typing i:nth-child(3){ animation-delay:.3s }
@keyframes dxscDot{ 0%,80%,100%{ opacity:.3; transform:none } 40%{ opacity:1; transform:translateY(-.2em) } }
.dxsc-ui--ticket{ justify-content:flex-start; gap:.45em; }
.dxsc-line{ display:flex; justify-content:space-between; gap:.5em; font-size:.82em; padding-bottom:.55em; border-bottom:1px dashed var(--sc-line); }
.dxsc-line b{ font-weight:600; }
.dxsc-line--total{ border:0; font-size:.95em; } .dxsc-line--total b{ color:var(--sc-accent); }
.dxsc-pay{ margin-top:auto; text-align:center; font-size:.8em; padding:.6em; border-radius:.8em; background:rgba(34,197,94,.14); color:#22c55e; font-weight:600; }

/* fade the wall into the page at the top and bottom */
.dxsc-fade{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, var(--sc-bg) 0, transparent 16%, transparent 84%, var(--sc-bg) 100%),
    radial-gradient(ellipse 48% 56% at 50% 54%, rgba(5,6,11,.30), transparent 70%);
}
html[data-theme="light"] .dxsc-fade{
  background:linear-gradient(180deg, var(--sc-bg) 0, transparent 16%, transparent 84%, var(--sc-bg) 100%),
    radial-gradient(ellipse 48% 56% at 50% 54%, rgba(236,239,248,.45), transparent 70%);
}

/* ---------- intro (small glass card, top-left) ---------- */
.dxsc-intro{
  position:absolute; z-index:3; top:calc(76px + clamp(14px,3vh,40px)); left:clamp(16px,4vw,72px);
  width:min(440px, calc(100% - 32px)); padding:clamp(16px,1.4vw,26px) clamp(18px,1.6vw,30px);
  border-radius:clamp(16px,1.3vw,24px); background:var(--sc-glass); border:1px solid var(--sc-line);
  -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%);
  box-shadow:var(--sc-shadow);
}
.dxsc-kicker{ display:block; font-size:clamp(11px,.65vw,14px); color:var(--sc-accent); margin-bottom:10px; }
.dxsc-intro h2{ font-size:clamp(22px,2.3vw,40px); font-weight:600; line-height:1.08; margin:0; }
.dxsc-intro p{ margin:10px 0 0; color:var(--sc-muted); font-size:clamp(13.5px,.85vw,18px); line-height:1.55; }

/* ---------- the phone ---------- */
.dxsc-phone{
  --ph-h:min(72vh, 940px); --ph-h:min(72svh, 940px);
  position:absolute; z-index:2; left:50%; top:53%;
  height:var(--ph-h); width:calc(var(--ph-h) * .47);
  font-size:calc(var(--ph-h) / 50);
  transform:translate(-50%,-50%) perspective(1400px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  will-change:transform;
}
.dxsc-phone::before{ /* soft glow behind the phone */
  content:""; position:absolute; inset:-14% -30%; z-index:-1; border-radius:50%;
  background:radial-gradient(closest-side, rgba(61,90,254,.45), rgba(168,85,247,.22) 55%, transparent);
  filter:blur(18px);
}
.dxsc-phone-body{
  position:absolute; inset:0; overflow:hidden; border-radius:4.6em;
  background:#F6F7FB; color:#0B1220;
  box-shadow:0 0 0 .5em #0b0c12, 0 0 0 .62em #2a2f45, 0 3em 6em rgba(0,0,0,.55);
}
.dxsc-island{ position:absolute; z-index:5; top:1em; left:50%; width:30%; height:1.9em; transform:translateX(-50%); border-radius:999px; background:#0b0c12; }

.dxsc-scr{
  position:absolute; inset:0; padding:3.4em 1.5em 1.5em; display:flex; flex-direction:column; gap:1em;
  opacity:0; transform:translateY(1.2em) scale(.985); transition:opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1);
  overflow-y:auto; overflow-x:hidden; scrollbar-width:none; pointer-events:none; padding-bottom:2.4em;
}
.dxsc-scr::-webkit-scrollbar{ display:none; }
.dxsc-scr > *{ flex-shrink:0; }
.dxsc-scr.is-on{ opacity:1; transform:none; pointer-events:auto; }
.dxsc-phone-body button{ appearance:none; border:0; font:inherit; color:inherit; cursor:pointer; text-align:inherit; }
.dxsc-phone-body button:focus-visible{ outline:2px solid #3D5AFE; outline-offset:2px; }
.dxsc-toast{ position:absolute; z-index:6; left:50%; top:3.4em; transform:translate(-50%,-.6em); padding:.55em 1em; border-radius:999px;
  background:#0B1220; color:#fff; font-size:.9em; font-weight:600; white-space:nowrap; opacity:0; transition:opacity .25s, transform .3s; pointer-events:none; }
.dxsc-toast.is-on{ opacity:1; transform:translate(-50%,0); }
.dxsc-hint{ position:absolute; left:50%; top:-2.9em; transform:translateX(-50%); white-space:nowrap; font-size:.85em; font-weight:600;
  color:var(--sc-muted); padding:.35em .9em; border-radius:999px; background:var(--sc-glass); border:1px solid var(--sc-line); opacity:.9; }
@media (hover:none){ .dxsc-hint{ display:none; } }
.dxsc-sb{ position:absolute; top:1.35em; left:2.4em; right:2em; display:flex; justify-content:space-between; font-size:1.05em; }
.dxsc-sb-i{ width:2.6em; height:1em; border-radius:.3em; border:.12em solid #0B1220; position:relative; }
.dxsc-sb-i::after{ content:""; position:absolute; inset:.12em; right:30%; background:#0B1220; border-radius:.12em; }
.dxsc-top{ display:flex; align-items:center; justify-content:space-between; gap:.6em; }
.dxsc-brand{ font:700 1.55em/1.1 'Space Grotesk',sans-serif; letter-spacing:-.02em; display:flex; flex-direction:column; }
.dxsc-brand small{ font:500 .55em/1.4 Inter,sans-serif; color:#64748b; display:flex; align-items:center; gap:.4em; letter-spacing:0; }
.dxsc-brand small i{ width:.6em; height:.6em; border-radius:50%; background:#22c55e; }
.dxsc-bag{ width:2.4em; height:2.4em; border-radius:50%; background:#0B1220; color:#fff; display:grid; place-items:center; font-size:.95em; font-weight:600; }
.dxsc-pill{ font-size:.9em; padding:.4em .9em; border-radius:999px; background:#dcfce7; color:#15803d; font-weight:600; }

/* store */
.dxsc-hero{ border-radius:1.6em; padding:1.3em; color:#fff; display:flex; flex-direction:column; gap:.3em; min-height:9.5em; justify-content:flex-end;
  background:radial-gradient(circle at 85% 20%, rgba(255,255,255,.35), transparent 40%), linear-gradient(135deg,#3D5AFE,#A855F7); }
.dxsc-hero small{ font-size:.9em; opacity:.85; }
.dxsc-hero strong{ font:700 1.7em/1.05 'Space Grotesk',sans-serif; }
.dxsc-cta{ align-self:flex-start; margin-top:.4em; font-size:.9em; font-weight:600; padding:.5em 1em; border-radius:999px; background:#fff; color:#0B1220; }
.dxsc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.8em; }
.dxsc-prod{ display:flex; flex-direction:column; gap:.2em; font-size:.95em; }
.dxsc-prod i{ display:block; aspect-ratio:1/1; border-radius:1.1em; background:var(--g); margin-bottom:.3em; position:relative; }
.dxsc-prod i::after{ content:""; position:absolute; left:38%; right:38%; top:22%; bottom:18%; border-radius:.5em .5em .9em .9em; background:rgba(255,255,255,.55); }
.dxsc-prod b{ font-weight:600; } .dxsc-prod span{ color:#64748b; }
.dxsc-foot{ margin-top:auto; display:flex; align-items:center; gap:.5em; font-size:.92em; padding:.8em 1em; border-radius:1em; background:#fff; box-shadow:0 .3em 1em rgba(15,23,42,.06); }

/* pos */
.dxsc-cats{ display:flex; gap:.5em; }
.dxsc-cats b{ font-weight:500; font-size:.92em; padding:.5em .9em; border-radius:999px; background:#fff; }
.dxsc-cats b.on{ background:#0B1220; color:#fff; }
.dxsc-items{ display:flex; flex-direction:column; gap:.6em; }
.dxsc-row{ display:flex; align-items:center; gap:.8em; padding:.6em; border-radius:1.1em; background:#fff; font-size:.98em; }
.dxsc-row i{ width:3em; height:3em; flex:none; border-radius:.8em; background:var(--g); }
.dxsc-row span{ flex:1; display:flex; flex-direction:column; font-weight:600; }
.dxsc-row small{ font-weight:400; color:#64748b; }
.dxsc-total{ margin-top:auto; display:flex; justify-content:space-between; align-items:baseline; padding:0 .3em; }
.dxsc-total span{ color:#64748b; } .dxsc-total strong{ font:700 1.8em/1 'Space Grotesk',sans-serif; }
.dxsc-paybtns{ display:grid; grid-template-columns:1fr 1fr; gap:.6em; }
.dxsc-paybtns span{ text-align:center; padding:.95em; border-radius:1em; font-weight:600; background:#fff; }
.dxsc-paybtns span.on{ background:linear-gradient(135deg,#3D5AFE,#A855F7); color:#fff; }

/* chat */
.dxsc-bot{ width:2.6em; height:2.6em; border-radius:50%; flex:none; background:linear-gradient(135deg,#22D3EE,#3D5AFE); order:-1; }
.dxsc-scr--chat .dxsc-top{ justify-content:flex-start; }
.dxsc-msgs{ display:flex; flex-direction:column; gap:.7em; }
.dxsc-m{ margin:0; font-size:1em; line-height:1.4; padding:.8em 1em; border-radius:1.3em; max-width:86%; }
.dxsc-m--in{ align-self:flex-end; background:#0B1220; color:#fff; border-bottom-right-radius:.4em; }
.dxsc-m--out{ align-self:flex-start; background:#fff; border-bottom-left-radius:.4em; box-shadow:0 .2em .8em rgba(15,23,42,.05); }
.dxsc-quick{ display:flex; gap:.5em; flex-wrap:wrap; }
.dxsc-quick span{ font-size:.9em; padding:.5em .9em; border-radius:999px; border:1px solid #c7d2fe; color:#3D5AFE; font-weight:600; background:#eef2ff; }
.dxsc-input{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; padding:.5em .5em .5em 1.1em; border-radius:999px; background:#fff; color:#94a3b8; font-size:.95em; }
.dxsc-input i{ width:2.4em; height:2.4em; border-radius:50%; background:linear-gradient(135deg,#3D5AFE,#A855F7); }

/* store extras */
.dxsc-search{ padding:.75em 1em; border-radius:1em; background:#fff; color:#94a3b8; font-size:.92em; }
.dxsc-prod{ position:relative; }
.dxsc-add{ position:absolute; right:.4em; top:calc(50% - 1.7em); width:2em; height:2em; border-radius:50%; background:#0B1220 !important; color:#fff !important;
  display:grid; place-items:center; font-size:1.2em !important; font-weight:600; line-height:1; box-shadow:0 .3em .8em rgba(0,0,0,.2); transition:transform .2s; text-align:center !important; }
.dxsc-add:hover{ transform:scale(1.1); } .dxsc-add.is-done{ background:#22c55e !important; }
.dxsc-bag.is-bump{ animation:dxscBump .4s ease; }
@keyframes dxscBump{ 40%{ transform:scale(1.25); } }
/* pos extras */
.dxsc-row{ width:100%; transition:background .2s, transform .15s; }
.dxsc-row:hover{ background:#eef2ff; } .dxsc-row:active{ transform:scale(.98); }
.dxsc-row small em{ font-style:normal; font-weight:600; color:#3D5AFE; }
.dxsc-paybtns button{ text-align:center !important; padding:.95em; border-radius:1em; font-weight:600; background:#fff; }
.dxsc-paybtns button.on{ background:linear-gradient(135deg,#3D5AFE,#A855F7); color:#fff; }
.dxsc-paybtns button.is-paid{ background:#22c55e; color:#fff; }
.dxsc-total em{ font-style:normal; }
/* booking */
.dxsc-avatar--doc{ background:linear-gradient(135deg,#14B8A6,#0891B2); }
.dxsc-doc{ display:flex; align-items:center; gap:.8em; padding:.8em; border-radius:1.2em; background:#fff; }
.dxsc-doc-ph{ width:3.4em; height:3.4em; flex:none; border-radius:1em; background:radial-gradient(circle at 50% 38%, #fcd9b6 0 22%, transparent 23%), radial-gradient(circle at 50% 100%, #14B8A6 0 45%, transparent 46%), #ccfbf1; }
.dxsc-doc > span:not(.dxsc-doc-ph){ flex:1; display:flex; flex-direction:column; } .dxsc-doc small{ color:#64748b; }
.dxsc-doc em{ font-style:normal; font-size:.82em; font-weight:600; color:#0f766e; background:#ccfbf1; padding:.35em .6em; border-radius:999px; }
.dxsc-lbl{ font-size:.9em; font-weight:600; margin-bottom:-.4em; }
.dxsc-days2{ display:grid; grid-template-columns:repeat(5,1fr); gap:.4em; }
.dxsc-days2 button{ display:flex; flex-direction:column; align-items:center; gap:.1em; padding:.6em 0; border-radius:.9em; background:#fff; text-align:center !important; }
.dxsc-days2 small{ font-size:.75em; color:#64748b; } .dxsc-days2 b{ font-size:1.1em; }
.dxsc-days2 button.on{ background:#0f766e; color:#fff; } .dxsc-days2 button.on small{ color:#ccfbf1; }
.dxsc-times{ display:grid; grid-template-columns:repeat(3,1fr); gap:.4em; }
.dxsc-times button{ padding:.6em 0; border-radius:.8em; background:#fff; border:1px solid #e2e8f0 !important; text-align:center !important; font-size:.92em; }
.dxsc-times button.on{ border-color:#0f766e !important; color:#0f766e; background:#f0fdfa; font-weight:700; }
.dxsc-book{ padding:1em; border-radius:1em; background:#0f766e !important; color:#fff !important; font-weight:700; text-align:center !important; }
.dxsc-book.is-done{ background:#22c55e !important; }
/* chat extras */
.dxsc-quick button{ font-size:.9em; padding:.5em .9em; border-radius:999px; border:1px solid #c7d2fe !important; color:#3D5AFE; font-weight:600; background:#eef2ff; }
.dxsc-quick button:hover{ background:#e0e7ff; }
.dxsc-typing2{ align-self:flex-start; display:inline-flex; gap:.3em; padding:.8em 1em; border-radius:1.3em; background:#fff; }
.dxsc-typing2 i{ width:.45em; height:.45em; border-radius:50%; background:#94a3b8; animation:dxscDot 1.1s infinite; }
.dxsc-typing2 i:nth-child(2){ animation-delay:.15s } .dxsc-typing2 i:nth-child(3){ animation-delay:.3s }
.dxsc-scr--chat .dxsc-input{ margin-top:auto; }

/* dashboard */
.dxsc-scr--dash{ gap:.85em; }
.dxsc-avatar{ width:2.6em; height:2.6em; border-radius:50%; background:linear-gradient(135deg,#fbbf24,#f97316); }
.dxsc-kpis{ display:grid; grid-template-columns:1fr 1fr; gap:.6em; }
.dxsc-kpis div{ padding:.8em .9em; border-radius:1.1em; background:#fff; display:flex; flex-direction:column; gap:.1em; }
.dxsc-kpis small{ color:#64748b; font-size:.85em; }
.dxsc-kpis strong{ font:700 1.55em/1.1 'Space Grotesk',sans-serif; }
.dxsc-kpis em{ font-style:normal; font-size:.78em; color:#16a34a; font-weight:600; }
.dxsc-chart-card{ padding:.85em .9em .6em; border-radius:1.1em; background:#0B1220; color:#fff; }
.dxsc-chart-h{ display:flex; justify-content:space-between; font-size:.85em; margin-bottom:.5em; } .dxsc-chart-h span{ color:#94a3b8; }
.dxsc-chart{ display:flex; align-items:flex-end; gap:.45em; height:7.6em; }
.dxsc-chart i{ flex:1; height:var(--h); border-radius:.3em .3em .12em .12em; background:linear-gradient(180deg,rgba(34,211,238,.55),rgba(61,90,254,.55)); }
.dxsc-chart i.on{ background:linear-gradient(180deg,#22D3EE,#3D5AFE); box-shadow:0 0 .8em rgba(34,211,238,.45); }
.dxsc-days{ display:flex; gap:.45em; margin-top:.35em; } .dxsc-days span{ flex:1; text-align:center; font-size:.72em; color:#94a3b8; }
.dxsc-orders{ display:flex; flex-direction:column; gap:.45em; }
.dxsc-orders-h{ display:flex; justify-content:space-between; font-size:.88em; } .dxsc-orders-h span{ color:#3D5AFE; font-weight:600; }
.dxsc-o{ display:flex; align-items:center; gap:.6em; padding:.5em .6em; border-radius:.9em; background:#fff; font-size:.85em; }
.dxsc-o i{ width:2.2em; height:2.2em; flex:none; border-radius:.6em; background:var(--g); }
.dxsc-o > span{ flex:1; display:flex; flex-direction:column; font-weight:600; min-width:0; }
.dxsc-o small{ font-weight:400; color:#64748b; }
.dxsc-o em{ font-style:normal; font-size:.8em; font-weight:600; padding:.3em .6em; border-radius:999px; }
.dxsc-o em.ok{ background:#dcfce7; color:#15803d; } .dxsc-o em.ship{ background:#e0e7ff; color:#3D5AFE; } .dxsc-o em.done{ background:#f1f5f9; color:#475569; }
.dxsc-dl{ display:flex; align-items:center; gap:.8em; padding:.65em .9em; border-radius:1.1em; background:#fff; }
.dxsc-scr--dash{ justify-content:flex-start; padding-bottom:2.2em; }
.dxsc-ring--sm{ width:3em; }
.dxsc-ring--sm circle{ stroke:#e2e8f0; stroke-width:8; } .dxsc-ring--sm .dxsc-ring-val{ stroke:#22c55e; stroke-dasharray:92 100; }
.dxsc-dl span{ display:flex; flex-direction:column; font-size:.92em; } .dxsc-dl b{ font-size:1.15em; } .dxsc-dl small{ color:#64748b; }

/* ---------- step chips under the phone ---------- */
.dxsc-steps{
  position:absolute; z-index:3; left:50%; bottom:clamp(12px,2.6vh,36px); transform:translateX(-50%);
  display:flex; flex-wrap:wrap; justify-content:center; gap:6px; padding:5px; max-width:calc(100% - 24px);
  border-radius:999px; background:var(--sc-glass); border:1px solid var(--sc-line);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.dxsc-steps button{
  appearance:none; border:0; cursor:pointer; font:500 clamp(12px,.7vw,15px)/1 Inter,sans-serif; color:var(--sc-muted);
  background:transparent; padding:.75em 1.15em; border-radius:999px; transition:background .3s, color .3s;
}
.dxsc-steps button:hover{ color:var(--sc-text); }
.dxsc-steps button.is-on{ background:linear-gradient(135deg,var(--sc-blue),var(--sc-violet)); color:#fff; }
.dxsc-steps button:focus-visible{ outline:2px solid var(--sc-accent); outline-offset:2px; }

/* ---------- small closing card that slides over the wall ---------- */
.dxsc-panel{
  position:relative; z-index:4; margin:-14vh auto 0; margin-top:-14svh;
  width:min(calc(100% - 2 * clamp(16px,4vw,72px)), 1180px + 18vw);
  padding:0 0 clamp(48px,6vw,110px);
}
.dxsc-panel-in{
  display:flex; align-items:center; justify-content:space-between; gap:clamp(18px,3vw,56px);
  padding:clamp(22px,2.4vw,48px) clamp(22px,3vw,56px);
  border-radius:clamp(20px,2vw,36px);
  background:var(--pn-bg); color:var(--pn-text); border:1px solid var(--pn-line);
  box-shadow:0 24px 70px rgba(15,23,60,.18);
  -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%);
}
.dxsc-panel-main h2{ font-size:clamp(22px,1.9vw,44px); font-weight:600; line-height:1.12; margin:0; }
.dxsc-panel-main h2 span{ background:linear-gradient(90deg,var(--sc-blue),var(--sc-violet)); -webkit-background-clip:text; background-clip:text; color:transparent; }
html:not([data-theme="light"]) .dxsc-panel-main h2 span{ background-image:linear-gradient(90deg,#22D3EE,#A855F7); }
.dxsc-panel-main p{ color:var(--pn-muted); font-size:clamp(14px,.3vw + 10.5px,20px); line-height:1.6; margin:8px 0 0; max-width:60ch; }
.dxsc-actions{ display:flex; flex-wrap:wrap; gap:10px; flex:none; }
.dxsc-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em; padding:.95em 1.5em; border-radius:999px;
  font:600 clamp(14px,.2vw + 11px,18px)/1 Inter,sans-serif; color:var(--pn-text) !important; text-decoration:none; white-space:nowrap;
  border:1px solid var(--pn-line); background:transparent; transition:transform .25s, border-color .25s;
}
.dxsc-btn:hover{ transform:translateY(-2px); border-color:var(--pn-accent); }
.dxsc-btn--main{ background:linear-gradient(135deg,#3D5AFE,#A855F7); color:#fff !important; border-color:transparent; box-shadow:0 10px 28px rgba(61,90,254,.3); }
.dxsc-btn:focus-visible{ outline:2px solid var(--pn-accent); outline-offset:3px; }

/* ---------- screen sizes ---------- */
/* phones */
@media (max-width:599px){
  .dxsc{ --sc-cols:3; --sc-travel-n:20; }
  .dxsc-col:nth-child(n+4){ display:none; }
  .dxsc-stage{ height:135vh; height:135svh; }
  .dxsc-intro{ top:calc(76px + 10px); left:12px; right:12px; width:auto; padding:14px 16px; }
  .dxsc-intro h2{ font-size:22px; }
  .dxsc-intro p{ font-size:13px; margin-top:6px; }
  .dxsc-phone{ --ph-h:min(56vh, 118vw); --ph-h:min(56svh, 118vw); top:58%; }
  .dxsc-tag{ left:6px; bottom:6px; font-size:8.5px; }
  .dxsc-steps{ gap:2px; padding:4px; flex-wrap:nowrap; }
  .dxsc-steps button{ padding:.75em .55em; font-size:11px; white-space:nowrap; }
  .dxsc-panel{ margin-top:-10vh; margin-top:-10svh; }
  .dxsc-actions{ width:100%; }
  .dxsc-actions .dxsc-btn{ flex:1 1 auto; }
}
@media (max-width:899px){ .dxsc-panel-in{ flex-direction:column; align-items:flex-start; } }
/* tablets */
@media (min-width:600px) and (max-width:999px){
  .dxsc{ --sc-cols:4; --sc-travel-n:26; }
  .dxsc-col:nth-child(n+5){ display:none; }
  .dxsc-phone{ --ph-h:min(64vh, 96vw); --ph-h:min(64svh, 96vw); top:56%; }

}
/* large screens and TVs */
@media (min-width:1600px){ .dxsc{ --sc-cols:6; } .dxsc-col:nth-child(6){ display:flex; } }
@media (min-width:2200px){ .dxsc{ --sc-cols:7; } .dxsc-col:nth-child(7){ display:flex; } }
@media (min-width:3000px){ .dxsc{ --sc-cols:8; } .dxsc-col:nth-child(8){ display:flex; } }
/* short, wide screens (phone turned sideways, small laptop windows) */
@media (max-height:560px) and (min-width:600px){
  .dxsc-intro{ top:calc(76px + 8px); width:min(340px, 40vw); padding:12px 14px; }
  .dxsc-intro p{ display:none; }
  .dxsc-intro h2{ font-size:20px; }
  .dxsc-phone{ --ph-h:min(72vh, 360px); --ph-h:min(72svh, 360px); left:66%; top:58%; }
  .dxsc-steps{ left:auto; right:12px; transform:none; }
}

/* ---------- RTL (Arabic) ---------- */
[dir="rtl"] .dxsc-intro{ left:auto; right:clamp(16px,4vw,72px); }
[dir="rtl"] .dxsc-tag{ left:auto; right:8px; }
@media (max-width:599px){ [dir="rtl"] .dxsc-intro{ left:12px; right:12px; } }

/* ---------- less motion ---------- */
@media (prefers-reduced-motion:reduce){
  .dxsc-stage{ height:auto; }
  .dxsc-sticky{ position:relative; height:100vh; height:100svh; }
  .dxsc-scr{ transition:opacity .2s; transform:none; }
  .dxsc-typing i{ animation:none; }
  .dxsc-panel{ margin-top:0; }
}
.dxsc.is-static .dxsc-col{ transform:none !important; }

/* store screen v3 (dx-showcase-2026-10c): real shop look with drawn bottles */
.dxsc-scr--store{ gap:.8em; }
.dxsc-promo{ display:flex; align-items:center; justify-content:space-between; gap:.6em; padding:1em 1.1em; border-radius:1.4em; color:#fff; overflow:hidden; position:relative;
  background:radial-gradient(circle at 90% 10%, rgba(255,255,255,.35), transparent 45%), linear-gradient(135deg,#1e1b4b,#6d28d9 60%,#a855f7); }
.dxsc-promo > span:first-child{ display:flex; flex-direction:column; gap:.15em; }
.dxsc-promo small{ font-size:.8em; text-transform:uppercase; letter-spacing:.08em; opacity:.85; }
.dxsc-promo strong{ font:700 1.45em/1.05 'Space Grotesk',sans-serif; }
.dxsc-timer{ font-size:.82em; opacity:.9; margin-top:.3em; } .dxsc-timer b{ font-family:'JetBrains Mono',monospace; background:rgba(255,255,255,.18); padding:.1em .4em; border-radius:.4em; }
.dxsc-promo-art{ width:4.6em; flex:none; transform:rotate(12deg); filter:drop-shadow(0 .5em .8em rgba(0,0,0,.35)); animation:dxscFloat 4s ease-in-out infinite; }
@keyframes dxscFloat{ 50%{ transform:rotate(6deg) translateY(-.3em); } }
.dxsc-row-h{ display:flex; justify-content:space-between; align-items:baseline; font-size:.95em; } .dxsc-row-h span{ color:#6d28d9; font-weight:600; font-size:.9em; }
.dxsc-pgrid{ display:grid; grid-template-columns:1fr 1fr; gap:.65em; }
.dxsc-pcard{ display:flex; flex-direction:column; gap:.15em; padding:.5em .5em .7em; border-radius:1.1em; background:#fff; box-shadow:0 .3em 1em rgba(15,23,42,.05); }
.dxsc-pimg{ position:relative; display:grid; place-items:center; aspect-ratio:1/1; border-radius:.85em; background:var(--bg); margin-bottom:.35em; }
.dxsc-pimg svg{ width:62%; height:auto; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.dxsc-pcard:hover .dxsc-pimg svg{ transform:translateY(-.25em) rotate(-4deg); }
.dxsc-pimg em{ position:absolute; left:.45em; top:.45em; font-style:normal; font-size:.72em; font-weight:700; color:#fff; background:#ef4444; padding:.2em .5em; border-radius:999px; }
.dxsc-pimg em:not(:empty) + .dxsc-heart{ } 
.dxsc-heart{ position:absolute; right:.45em; top:.45em; width:1.7em; height:1.7em; border-radius:50%; background:rgba(255,255,255,.85) no-repeat center/60% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1220' stroke-width='2'%3E%3Cpath d='M12 21s-7-4.5-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 11c0 5.5-7 10-7 10z'/%3E%3C/svg%3E"); }
.dxsc-pcard b{ font-size:.95em; }
.dxsc-stars{ font-size:.72em; color:#f59e0b; letter-spacing:.05em; } .dxsc-stars small{ color:#64748b; letter-spacing:0; }
.dxsc-price{ font-size:.92em; font-weight:700; color:#0B1220; } .dxsc-price s{ font-weight:400; color:#94a3b8; font-size:.85em; }
.dxsc-checkout{ display:flex; align-items:center; justify-content:space-between; gap:.6em; padding:.55em .55em .55em 1em; border-radius:999px; background:#0B1220; color:#fff; font-size:.92em; }
.dxsc-checkout-btn{ padding:.6em 1.1em; border-radius:999px; background:linear-gradient(135deg,#6d28d9,#a855f7); font-weight:700; }
.dxsc-scr--store .dxsc-foot{ margin-top:0; }