/* الصفحة الرئيسية المعتمدة (٢٠/١٠ · Voice Design · README-landing.md): أقسامُ الصفحة من اللوح، والعناصرُ ss-demo · ss-wall · ss-shot من نظام التصميم v25 */
html,body{min-height:100%;margin:0;background:var(--bg)}
.ss-btn{box-sizing:border-box;white-space:nowrap}
.ss-btn > svg{width:18px;height:18px;flex:none}
.ss-logo .on-dark{display:none}
[data-theme="dark"] .ss-logo .on-light{display:none}
[data-theme="dark"] .ss-logo .on-dark{display:block}
.ltr{direction:ltr;unicode-bidi:isolate}
.hx{position:relative;overflow:hidden;color:var(--white);background:radial-gradient(900px 520px at 88% -8%,color-mix(in srgb,var(--purple) 55%,transparent),transparent 62%),radial-gradient(700px 420px at 4% 108%,color-mix(in srgb,var(--teal) 18%,transparent),transparent 60%),var(--hero-1);padding:72px 0 84px}
.hx .ss-container{position:relative}
.hx-grid{display:grid;grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr);gap:56px;align-items:center}
.hx-copy{display:grid;gap:18px;align-content:center}
.hx-eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--teal);font-size:14px;font-weight:500}
.hx-eyebrow::before{content:"";width:28px;height:2px;background:var(--teal);border-radius:2px}
.hx h1{margin:0;color:var(--white);font:700 clamp(2.3rem,3.9vw,3.5rem)/1.28 var(--font-display);letter-spacing:0}
.hx h1 span{display:block;color:var(--teal)}
.hx-lead{margin:0;max-width:40em;color:rgba(255,255,255,.84);font-size:1.12rem;line-height:1.85;font-weight:300}
.hx-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hx-cta .ss-btn-primary{min-height:54px;padding-inline:28px;font-size:1.05rem}
.hx-sentence{margin-top:18px;text-align:center;font-size:14.5px;color:rgba(255,255,255,.7)}
.hx-sentence q{color:var(--white)}
.hx-app{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:12px;padding:14px;font-size:12.5px}
.hx-app .card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px;display:grid;gap:10px;align-content:start}
.hx-app h4{margin:0;font:600 13px/1.4 var(--font-body);display:flex;justify-content:space-between;color:var(--ink)}
.hx-app h4 small{font-weight:300;color:var(--muted)}
.hx-app .ck{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;background:color-mix(in srgb,var(--teal) 14%,transparent);border:1px solid color-mix(in srgb,var(--teal) 45%,transparent);color:var(--ink)}
.hx-app .ck b{font-weight:600}
.hx-app .ck em{margin-inline-start:auto;font-style:normal;background:var(--purple);color:var(--white);padding:4px 10px;border-radius:var(--r-pill);font-size:11.5px}
.hx-app .ed{border:1.5px solid var(--line-strong);border-radius:8px;padding:10px 12px;font-size:14.5px;line-height:2.05;font-weight:300;min-height:120px}
.hx-app .ed mark{color:var(--ink);border-radius:5px;padding:0 3px}
.hx-app .ed mark.t{background:color-mix(in srgb,var(--yellow) 32%,transparent);border-bottom:2px solid var(--yellow)}
.hx-app .ed mark.l{background:color-mix(in srgb,var(--blue) 14%,transparent);border-bottom:2px solid var(--blue)}
.hx-app .ed mark.n{background:color-mix(in srgb,var(--orange) 14%,transparent);border-bottom:2px solid var(--orange)}
.hx-app .btns{display:flex;gap:8px}
.hx-app .btns span{padding:7px 14px;border-radius:var(--r-pill);font-weight:500;font-size:12px}
.hx-app .btns .p{background:var(--purple);color:var(--white)}
.hx-app .btns .o{border:1.5px solid var(--purple);color:var(--purple)}
.hx-app .sec{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:8px}
.hx-app .sec b{font-weight:600}
.hx-app .sec span{color:var(--muted)}
.hx-app .sec.open{border-color:var(--line-strong);display:grid;gap:8px}
.hx-app .vr{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1.5px solid var(--purple);border-radius:8px}
.hx-app .vr i{width:24px;height:24px;border-radius:50%}
.pg-sec{padding:96px 0;background:var(--bg);color:var(--ink)}
.pg-alt{background:var(--bg-alt)}
.pg-dark{background:radial-gradient(800px 420px at 90% 0%,color-mix(in srgb,var(--purple) 40%,transparent),transparent 60%),var(--hero-1);color:var(--white)}
.pg-head{display:grid;gap:10px;max-width:46em;margin-bottom:40px}
.pg-head h2{margin:0;font:700 clamp(1.9rem,2.8vw,2.5rem)/1.35 var(--font-display);color:inherit}
.pg-head p{margin:0;color:var(--ink-2);font-size:1.06rem;line-height:1.85}
.pg-dark .pg-head p{color:rgba(255,255,255,.8)}
.pg-center{margin-inline:auto;text-align:center;justify-items:center}
.pg-eye{display:inline-flex;align-items:center;gap:10px;color:var(--teal-text);font-size:14px;font-weight:500}
[data-theme="dark"] .pg-eye,.pg-dark .pg-eye{color:var(--teal)}
.pg-eye::before{content:"";width:28px;height:2px;background:currentColor;border-radius:2px}
.pg-how-grid{display:grid;grid-template-columns:minmax(0,0.8fr) minmax(0,1.2fr);gap:48px;align-items:center}
.pg-steps{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.pg-steps li{display:flex;gap:16px;align-items:flex-start;padding:16px 18px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface)}
.pg-steps li.on{border-color:var(--teal);box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 16%,transparent)}
.pg-steps li > b{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--purple);color:var(--white);font:700 1rem/1 var(--font-display)}
.pg-steps li.on > b{background:var(--teal);color:var(--purple-dd)}
.pg-steps h3{margin:0 0 4px;font:700 1.2rem/1.4 var(--font-display)}
.pg-steps p{margin:0;color:var(--ink-2);font-size:15px;line-height:1.8}
.pg-steps .pg-steps-note{display:block;border:0;background:transparent;padding:4px 2px;color:var(--muted);font-size:14px;line-height:1.8}
.pg-stage{position:relative;padding:36px 34px 40px;border-radius:calc(var(--r) * 1.5);background:radial-gradient(600px 300px at 90% 0%,color-mix(in srgb,var(--purple) 50%,transparent),transparent 60%),var(--hero-1)}
.pg-cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pg-card{display:grid;gap:10px;align-content:start;padding:24px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line)}
.pg-card h3{margin:0;font:700 1.2rem/1.45 var(--font-display);color:var(--ink)}
.pg-card p{margin:0;color:var(--ink-2);font-size:15px;line-height:1.85}
.pg-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;color:var(--white)}
.pg-ic svg{width:22px;height:22px}
.pg-fact{margin-top:4px;padding:10px 12px;border-radius:var(--r-sm);background:var(--bg-alt);color:var(--ink-2);font-size:13.5px;line-height:1.7}
.pg-alt .pg-fact{background:var(--bg)}
.pg-feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pg-wide{grid-column:span 2;grid-row:span 2;grid-template-columns:1fr;align-content:center;gap:22px;padding:30px;border-color:var(--teal);background:linear-gradient(135deg,color-mix(in srgb,var(--teal) 10%,var(--surface)),var(--surface))}
.pg-wide h3{font-size:1.45rem}
.pg-mini{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:10px 12px;align-items:center;padding:16px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line);font-size:16px}
.pg-mini .w{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--line-strong)}
.pg-mini .ar{color:var(--muted)}
.pg-mini .m{justify-self:start;padding:0 6px;border-radius:6px;background:color-mix(in srgb,var(--yellow) 30%,transparent);border-bottom:2px solid var(--yellow);color:var(--ink)}
.pg-mini .m.n{background:color-mix(in srgb,var(--orange) 18%,transparent);border-bottom-color:var(--orange)}
.pg-vote{grid-column:1 / -1;display:flex;gap:8px;margin-top:10px}
.pg-vote button{flex:1;height:34px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.3);background:transparent;color:var(--white);font:400 13px/1 var(--font-body);cursor:pointer}
.pg-vote button:first-child{background:var(--teal);border-color:var(--teal);color:var(--purple-dd);font-weight:500}
.pg-plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}
.pg-plan{position:relative;display:grid;grid-template-rows:auto auto 1fr auto;gap:12px;padding:24px 22px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line)}
.pg-plan h3{margin:0;font:700 1.15rem/1.4 var(--font-display);color:var(--ink)}
.pg-plan .pr{font:700 2.2rem/1 var(--font-display);color:var(--ink)}
.pg-plan .pr small{font:400 14px/1 var(--font-body);color:var(--muted)}
.pg-plan ul{margin:0;padding-inline-start:18px;display:grid;gap:6px;align-content:start;color:var(--ink-2);font-size:14.5px;line-height:1.7}
.pg-plan .ss-btn{width:100%;justify-content:center}
.pg-hot{border:2px solid var(--purple)}
.pg-trial{border:2px solid var(--teal);background:linear-gradient(160deg,color-mix(in srgb,var(--teal) 12%,var(--surface)),var(--surface))}
.pg-badge{position:absolute;top:-12px;inset-inline-start:18px;padding:4px 12px;border-radius:var(--r-pill);background:var(--orange);color:var(--white);font-size:12px;font-weight:500}
.pg-fine{margin:22px 0 0;color:var(--muted);font-size:13.5px;line-height:1.85;max-width:62em}
.pg-join{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;padding:40px;border-radius:calc(var(--r) * 1.5);background:var(--surface);border:1px solid var(--line)}
.pg-form{display:grid;gap:16px}
.pg-form .ss-btn{min-height:52px;justify-content:center}
.pg-faq-wrap{display:grid;grid-template-columns:minmax(0,0.6fr) minmax(0,1.4fr);gap:40px;align-items:start}
.pg-faq{display:grid;gap:10px}
.pg-faq .ss-fold-body{color:var(--ink-2);font-size:15px;line-height:1.85}
.pg-foot{padding:56px 0 24px;background:var(--bg);color:var(--ink-2);font-size:14.5px}
.pg-foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:32px}
.pg-foot-brand{display:grid;gap:14px;align-content:start}
.pg-foot-brand p{margin:0;line-height:1.85;max-width:28em}
.pg-foot nav{display:grid;gap:10px;align-content:start}
.pg-foot h4{margin:0 0 4px;font:600 14px/1.4 var(--font-body);color:var(--ink)}
.pg-foot a{color:var(--ink-2);text-decoration:none}
.pg-foot a:hover{color:var(--purple-l)}
.pg-foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:40px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}
@media (max-width:900px){
.pg-sec{padding:56px 0}
.pg-head{margin-bottom:26px}
.pg-how-grid,.pg-cards3,.pg-feat,.pg-join,.pg-faq-wrap,.pg-foot-grid{grid-template-columns:1fr}
.pg-how-grid{gap:24px}
.pg-stage{padding:16px}
.pg-wide{grid-column:auto;grid-row:auto;padding:20px}
.pg-feat .pg-card:not(.pg-wide){padding:16px 18px}
.pg-plans{grid-template-columns:repeat(4,78%);overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-16px;padding:14px 16px 8px}
.pg-plan{scroll-snap-align:start}
.pg-join{padding:22px;gap:22px}
.pg-foot-grid{gap:22px}
}
.hx-a{overflow:visible;z-index:3}
.pg-contact{position:relative;display:inline-flex}
.pg-contact > .ss-btn svg.chev{width:16px;height:16px;transition:transform .2s}
.pg-contact > .ss-btn[aria-expanded="true"] svg.chev{transform:rotate(180deg)}
.pg-contact-menu{position:absolute;top:calc(100% + 10px);inset-inline-start:0;z-index:5;width:300px;display:grid;gap:4px;padding:8px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-lg)}
.pg-contact-menu a,.pg-contact-menu button{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;align-items:center;padding:10px 12px;border-radius:var(--r-sm);color:var(--ink);text-decoration:none}
.pg-contact-menu a:hover,.pg-contact-menu a:focus-visible,.pg-contact-menu button:hover,.pg-contact-menu button:focus-visible{background:var(--bg-alt)}
.pg-contact-menu .ic{grid-row:1 / span 2;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;color:var(--white)}
.pg-contact-menu .ic svg{width:20px;height:20px}
.pg-contact-menu .ic.wa{background:#1FA855}
.pg-contact-menu b{font-weight:500;font-size:15px}
.pg-contact-menu small{font-size:13px;color:var(--muted)}
.pg-contact-pair{display:none;gap:10px;width:100%}
.pg-contact-pair .ss-btn{flex:1;justify-content:center;min-height:52px;padding-inline:10px}
.pg-contact-pair .ss-btn svg{width:18px;height:18px}
@media (max-width:900px){
.hx-cta .pg-contact{display:none}
.hx-cta .pg-contact-pair{display:flex}
}
@media (max-width:900px){
.hx{padding:36px 0 44px}
.hx-grid,.hx-c .hx-grid{grid-template-columns:1fr;gap:26px}
.hx h1{font-size:2.05rem}
.hx-lead{font-size:1rem;line-height:1.8}
.hx-cta .ss-btn-primary{width:100%;justify-content:center}
.hx-app{grid-template-columns:1fr}
.hx-app .card.side{display:none}
.hx-notes-m{display:grid;gap:8px;margin-top:14px}
}
@media (min-width:901px){
.hx-notes-m{display:contents}
}

/* ——— نظام التصميم v25: الصفحة الرئيسية ——— */
/* LiveDemo: نصّ قبل «دقّق» وبعده، ثمّ «اسمع» */
.ss-demo { position: relative; display: grid; gap: 16px; padding: 22px 22px 18px; border-radius: var(--r); background: color-mix(in srgb, #120d24 72%, transparent); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 30px 80px rgba(8,4,24,.55); color: var(--white); }
.ss-demo-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13.5px; color: rgba(255,255,255,.72); }
.ss-demo-head b { color: var(--white); font-weight: 500; }
.ss-demo-toggle { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: rgba(255,255,255,.08); }
.ss-demo-toggle button { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: transparent; color: rgba(255,255,255,.75); font: 500 12.5px/1 var(--font-body); cursor: pointer; }
.ss-demo-toggle button svg { width: 14px; height: 14px; }
.ss-demo-toggle button[aria-checked="true"] { background: rgba(255,255,255,.14); color: var(--white); }
.ss-demo-toggle button[aria-checked="true"]:last-child { background: color-mix(in srgb, var(--teal) 24%, transparent); color: var(--teal); }
.ss-demo-text { position: relative; min-height: 150px; padding: 18px 20px; border-radius: var(--r-sm); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); font-size: 1.32rem; line-height: 2.15; font-weight: 300; }
.ss-demo-text p { margin: 0; position: absolute; inset: 18px 20px; transition: opacity .35s ease; }
.ss-demo-before u { text-decoration: underline wavy color-mix(in srgb, var(--orange) 80%, transparent); text-underline-offset: 7px; text-decoration-thickness: 1.5px; }
.ss-demo-text mark { color: var(--white); border-radius: 6px; padding: 0 4px; }
.ss-demo-text mark.t { background: color-mix(in srgb, var(--yellow) 30%, transparent); border-bottom: 2px solid var(--yellow); }
.ss-demo-text mark.l { background: color-mix(in srgb, var(--blue) 30%, transparent); border-bottom: 2px solid var(--blue); }
.ss-demo-text mark.n { background: color-mix(in srgb, var(--orange) 26%, transparent); border-bottom: 2px solid var(--orange); }
.ss-demo[data-state="before"] .ss-demo-after, .ss-demo[data-state="after"] .ss-demo-before { opacity: 0; }
.ss-demo.is-looping .ss-demo-before { animation: ss-demo-before 9s infinite; }
.ss-demo.is-looping .ss-demo-after { animation: ss-demo-after 9s infinite; }
@keyframes ss-demo-before { 0%, 38% { opacity: 1; } 46%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ss-demo-after { 0%, 38% { opacity: 0; } 46%, 94% { opacity: 1; } 100% { opacity: 0; } }
.ss-demo-play { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--r-sm); background: rgba(255,255,255,.06); }
.ss-demo-play .ss-btn { min-height: 46px; }
.ss-demo-play .ss-wave { flex: 1; height: 40px; gap: 4px; direction: ltr; }
.ss-demo-play .ss-wave i { flex: 1; max-width: 6px; background: linear-gradient(var(--teal), var(--purple-l)); }
.ss-demo-time { font: 500 13px/1 var(--font-latin); color: rgba(255,255,255,.72); direction: ltr; }
.ss-demo-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: rgba(255,255,255,.75); }
.ss-demo-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 6px; vertical-align: -1px; }
/* الموجة تتحرّك فقط أثناء الصوت */
.ss-demo .ss-wave i, .ss-wall .ss-wave i { animation-play-state: paused; transform: scaleY(.45); }
.ss-demo .ss-wave i:nth-child(3n), .ss-wall .ss-wave i:nth-child(3n) { transform: scaleY(.8); }
.ss-demo.is-playing .ss-wave i, .ss-wall-cap[aria-pressed="true"] .ss-wave i { animation-play-state: running; }
/* VoiceWall: كبسولات الأصوات بألوان اللهجات */
.ss-wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ss-wall-cap { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 16px 18px; border-radius: var(--r); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: var(--white); text-align: start; font-family: var(--font-body); cursor: pointer; transition: transform .15s, border-color .15s; }
.ss-wall-cap:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.3); }
.ss-wall-cap:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.ss-wall-av { grid-column: 1; grid-row: 1 / span 2; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: var(--white); }
.ss-wall-av svg { width: 20px; height: 20px; }
.ss-wall-name { grid-column: 2; grid-row: 1; align-self: end; font: 700 1.3rem/1.3 var(--font-display); }
.ss-wall-dialect { grid-column: 2; grid-row: 2; align-self: start; font-size: 13.5px; color: rgba(255,255,255,.75); }
.ss-wall-status { position: absolute; top: 12px; inset-inline-end: 12px; font-size: 11.5px; padding: 2px 9px; border-radius: var(--r-pill); }
.ss-wall-status.is-pending { background: rgba(255,255,255,.1); color: rgba(255,255,255,.8); }
.ss-wall-status.is-verified { background: color-mix(in srgb, var(--teal) 24%, transparent); color: var(--teal); }
.ss-wall-cap[aria-pressed="true"] { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 10%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 22%, transparent); }
.ss-wall-cap .ss-wave { grid-column: 1 / -1; grid-row: 3; height: 26px; gap: 4px; margin-top: 8px; direction: ltr; }
.ss-wall-cap .ss-wave i { flex: 1; max-width: 6px; background: linear-gradient(var(--teal), var(--purple-l)); }
.ss-wall-cap:not([aria-pressed="true"]) .ss-wave, .ss-wall-cap:not([aria-pressed="true"]) .ss-wall-vote { display: none; }
.ss-wall-vote { grid-column: 1 / -1; grid-row: 4; display: flex; gap: 8px; margin-top: 10px; }
.ss-wall-vote button { flex: 1; height: 34px; border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,.3); background: transparent; color: var(--white); font: 400 13px/1 var(--font-body); cursor: pointer; }
.ss-wall-vote button:first-child { background: var(--teal); border-color: var(--teal); color: var(--purple-dd); font-weight: 500; }
.ss-wall-info { display: grid; place-items: center; gap: 4px; padding: 16px 18px; border-radius: var(--r); border: 1px dashed rgba(255,255,255,.25); color: rgba(255,255,255,.8); text-align: center; font-size: 13.5px; }
.ss-wall-info b { font: 700 1.5rem/1.2 var(--font-display); color: var(--white); }
/* ProductShot: لقطة الاستوديو مائلة على مسرح داكن مع تعليقات مرقّمة */
.ss-shot { position: relative; padding: 36px 34px 40px; border-radius: calc(var(--r) * 1.5); background: radial-gradient(600px 300px at 90% 0%, color-mix(in srgb, var(--purple) 50%, transparent), transparent 60%), var(--hero-1); perspective: 1600px; }
.ss-shot-frame { transform: rotateY(-11deg) rotateX(5deg) rotate(-1deg); transform-origin: 70% 50%; border-radius: 14px; overflow: hidden; background: #FBFAFD; color: #241F2E; border: 1px solid rgba(255,255,255,.16); box-shadow: -30px 40px 90px rgba(8,4,24,.6); }
.ss-shot-chrome { display: flex; gap: 6px; align-items: center; padding: 10px 14px; background: #FFFFFF; border-bottom: 1px solid #E7E3F0; }
.ss-shot-chrome i { width: 10px; height: 10px; border-radius: 50%; background: #8C85A0; opacity: .6; }
.ss-shot-chrome span { margin-inline-start: 12px; font: 400 12px/1 var(--font-latin); color: #6E6880; direction: ltr; }
.ss-shot-body { display: block; }
.ss-shot-body img { display: block; width: 100%; height: auto; }
.ss-shot-note { position: absolute; top: var(--y, 0); inset-inline-start: var(--x, 0); z-index: 2; display: flex; align-items: center; gap: 10px; max-width: 250px; padding: 10px 14px; border-radius: var(--r-sm); background: #FFFFFF; color: #241F2E; font-size: 14px; line-height: 1.55; box-shadow: 0 14px 34px rgba(8,4,24,.4); }
.ss-shot-note b { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--purple); color: var(--white); font: 600 13px/1 var(--font-latin); }
.ss-shot-note.is-teal b { background: var(--teal); color: var(--purple-dd); }
@media (max-width: 900px) {
  .ss-demo { padding: 16px; }
  .ss-demo-text { font-size: 1.12rem; min-height: 168px; padding: 14px 16px; }
  .ss-demo-text p { inset: 14px 16px; }
  .ss-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ss-wall-cap { grid-template-columns: 1fr; justify-items: start; padding: 14px; }
  .ss-wall-av, .ss-wall-name, .ss-wall-dialect, .ss-wall-cap .ss-wave, .ss-wall-vote { grid-column: 1; grid-row: auto; }
  .ss-wall-av { width: 40px; height: 40px; }
  .ss-wall-name { font-size: 1.15rem; }
  .ss-wall-cap[aria-pressed="true"] { grid-column: span 2; }
  .ss-shot { padding: 16px; perspective: none; }
  .ss-shot-frame { transform: none; }
  .ss-shot-note { position: static; max-width: none; margin-top: 8px; box-shadow: none; background: rgba(255,255,255,.08); color: var(--white); }
}
@media (prefers-reduced-motion: reduce) {
  .ss-demo.is-looping .ss-demo-before { animation: none; opacity: 0; }
  .ss-demo.is-looping .ss-demo-after { animation: none; opacity: 1; }
  .ss-demo-text p { transition: none; }
  .ss-demo.is-playing .ss-wave i, .ss-wall-cap[aria-pressed="true"] .ss-wave i { animation: none; }
  .ss-wall-cap { transition: none; }
  .ss-wall-cap:hover { transform: none; }
}
@keyframes ss-wave { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
.ss-fold > summary { cursor: pointer; padding: 12px 16px; font-weight: 500; font-size: 15px; display: flex; align-items: center; gap: 8px; list-style: none; color: var(--ink); }
.ss-fold > summary::-webkit-details-marker { display: none; }
.ss-fold > summary::before { content: ""; width: 8px; height: 8px; border-inline-start: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); margin-inline-end: 4px; flex: none; transition: transform .2s; }
.ss-fold[open] > summary::before { transform: rotate(-45deg); }
.ss-fold > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
.ss-fold-body { padding: 0 16px 14px; }

/* قائمةُ «تواصل معنا» مخفيّةٌ حتى تُفتح (display:grid أعلاه كان يغلب hidden) */
.pg-contact-menu[hidden]{display:none !important} /* مسكّرةٌ من الأصل في HTML، فلا وميضَ قبل landing.js */

/* لقطةُ الاستوديو فاتحةٌ داخل الإطار حتى في الصفحة الغامقة (ألوانُ hx-app كانت من غلاف hx-shot في اللوح)، وشبكةُ العمودين تغلب display:block في ss-shot-body */
.ss-shot-body.hx-app{display:grid;--bg:#FBFAFD;--bg-alt:#F4F1FA;--surface:#FFFFFF;--ink:#241F2E;--ink-2:#524B48;--muted:#6E6880;--line:#E7E3F0;--line-strong:#8C85A0;background:var(--bg);color:var(--ink)}
@media (max-width:900px){.ss-shot-body.hx-app{grid-template-columns:1fr}.ss-shot-body.hx-app .card.side{display:none}}

/* الهاتف: رأسُ المثال يلتفّ (النصّ ثمّ المفتاح) فلا يوسّع الصفحة إلى 487px — يُنقل إلى نظام التصميم */
@media (max-width:900px){.ss-demo-head{flex-wrap:wrap;row-gap:8px}.ss-demo-head > span:first-child{min-width:0}}
/* الهاتف: الموجةُ (28 عموداً) كانت تفرض عرضاً أدنى فتتمدّد شبكةُ البطل إلى 487px */
.hx-grid > *{min-width:0}
.ss-demo-play{min-width:0}
.ss-demo-play .ss-wave{min-width:0;overflow:hidden}
.pg-contact-menu button{width:100%;border:0;background:none;font:inherit;text-align:start;cursor:pointer}
.pg-contact-menu button.is-copied small{color:var(--green,#1FA855)}
/* QA 20/10: on phones the pricing row scrolls (overflow-x) and clipped the contact menu; it opens as a fixed bottom sheet outside the row */
@media (max-width:900px){.pg-plans .pg-contact-menu{position:fixed;top:auto;bottom:max(16px,env(safe-area-inset-bottom));inset-inline:16px;width:auto;z-index:60}}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}} /* QA 20/10 */
.pg-toast{position:fixed;bottom:max(16px,env(safe-area-inset-bottom));inset-inline:16px;max-width:440px;margin-inline:auto;z-index:70;box-shadow:var(--shadow-lg)} .pg-toast[hidden]{display:none}
/* الجدار (Voice Manager 20/10): «+14» تكمّل الصفّ الأخير حتى نهايته، والسطرُ تحت الشبكة بفراغ الأقسام */
.ss-wall .pg-wall-more{grid-column:span 3 / -1} /* 9 أصوات في 4 أعمدة ⇒ 4 · 4 · 1، فتأخذ الثلاث الباقية؛ يُراجع إن تغيّر عددُ الأصوات */
@media (max-width:900px){.ss-wall .pg-wall-more{grid-column:span 1 / -1}} /* عمودان ⇒ 9 · فتأخذ الأخيرة */
#voices .hx-sentence{margin-top:var(--space-6)}

/* ——— «جولة اللهجات» تحت الـhero (design/tour-v1 · tr-*) ——— */
.tr{padding:72px 0 80px}
.tr-in{max-width:1180px;margin:0 auto;padding-inline:32px;box-sizing:border-box;display:grid;gap:32px}
.tr-head{display:grid;justify-items:center;text-align:center;gap:12px}
.tr-head h2{margin:0;font:700 clamp(1.6rem,2.6vw,2.2rem)/1.4 var(--font-display);color:var(--ink)}
.tr-head p{margin:0;max-width:34em;color:var(--ink-2);font-size:17px;line-height:1.8}
.tr-head .ss-btn{margin-top:8px}
.tr-head .ss-btn svg{flex:none}
.tr-stage{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:stretch;padding:28px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.tr-show{display:grid;gap:20px;align-content:start;min-width:0}
.tr-card{display:flex;align-items:center;gap:16px}
.tr-icon{flex:none;width:64px;height:64px;border-radius:18px;display:grid;place-items:center;background:color-mix(in srgb,var(--purple) 12%,var(--surface));color:var(--purple);transition:transform .35s var(--ease),background-color .35s}
.tr-icon svg{width:34px;height:34px}
.tr-who{display:grid;gap:2px;min-width:0}
.tr-who b{font:600 1.35rem/1.4 var(--font-display);color:var(--ink)}
.tr-who span{color:var(--muted);font-size:15px}
.tr-words{min-height:3.6em;margin:0;font:400 clamp(1.25rem,2vw,1.6rem)/1.8 var(--font-body);color:var(--ink)}
/* ألوانُ الكلمات بتباينٍ كافٍ (Voice Design 21/10 14:12 بعد QA): القادمةُ muted، والحاليّةُ بنفسجيّةٌ بوزن 500 (purple-l في الغامق) */
.tr-words span{color:var(--muted);transition:color .18s}
.tr-words span.on{color:var(--ink)}
.tr-words span.now{color:var(--purple);text-decoration:underline 2px;text-underline-offset:.35em} /* color and underline only: a bolder weight widened the line and wrapped it on phones (Ahmad 23/10) */
[data-theme="dark"] .tr-words span.now{color:var(--purple-l)}
.tr-wave{display:flex;align-items:center;gap:3px;height:56px;direction:ltr;overflow:hidden}
.tr-wave i{flex:1 1 0;min-width:2px;max-width:6px;border-radius:3px;background:var(--line-strong);height:6px;transition:height .08s linear}
.tr.is-playing .tr-wave i{background:var(--teal-d)}
.tr-idle{display:none;list-style:none;margin:0;padding:0;gap:10px;flex-wrap:wrap}
.tr-idle li{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--bg-alt);color:var(--muted)}
.tr-idle li svg{width:26px;height:26px}
.tr.is-idle .tr-idle{display:flex}
.tr.is-idle .tr-card,.tr.is-idle .tr-words{display:none}
.tr-pips{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.tr-pips li{flex:1;height:4px;border-radius:2px;background:var(--line)}
.tr-pips li.done{background:var(--purple)}
.tr-pips li.now{background:linear-gradient(to left,var(--purple) var(--p,0%),var(--line) var(--p,0%))}
.tr-map{position:relative;border-radius:var(--r-sm);background:var(--bg-alt);overflow:hidden;min-height:340px}
.tr-map svg{position:absolute;inset:0;width:100%;height:100%;direction:ltr}
.tr-map .grid circle{fill:var(--line)}
.tr-map .route{fill:none;stroke:var(--line-strong);stroke-width:1.5;stroke-dasharray:4 6}
.tr-map .city circle.dot{fill:var(--surface);stroke:var(--line-strong);stroke-width:2;transition:fill .3s,stroke .3s,r .3s}
.tr-map .city circle.halo{fill:var(--purple);opacity:0;transform-box:fill-box;transform-origin:center}
.tr-map .city text{font:500 13px var(--font-body);fill:var(--muted);transition:fill .3s}
.tr-map .city.lit circle.dot{fill:var(--purple);stroke:var(--purple)}
.tr-map .city.lit text{fill:var(--ink)}
.tr-map .city.now circle.dot{r:8}
.tr-map .city.now circle.halo{opacity:.18;animation:tr-pulse 1.6s var(--ease) infinite}
.tr-map .city.now text{fill:var(--purple)}
.tr.is-final .route{stroke:var(--purple);stroke-dasharray:none;opacity:.5}
@keyframes tr-pulse{0%{transform:scale(.6);opacity:.35}100%{transform:scale(2.2);opacity:0}}
@media (prefers-reduced-motion: reduce){.tr *{animation:none!important;transition:none!important}}
@media (max-width:900px){
.tr-idle{gap:6px;flex-wrap:nowrap}.tr-idle li{width:34px;height:34px;border-radius:10px}.tr-idle li svg{width:19px;height:19px}
.tr{padding:48px 0 56px}
.tr-in{padding-inline:16px;gap:24px}
.tr-head p{font-size:15.5px}
.tr-head .ss-btn{width:100%;justify-content:center}
.tr-stage{grid-template-columns:1fr;padding:18px;gap:20px}
.tr-icon{width:52px;height:52px;border-radius:14px}.tr-icon svg{width:28px;height:28px}
.tr-who b{font-size:1.15rem}
.tr-wave{height:44px}
.tr-map{min-height:260px}
}

/* ——— الجولة هي الـhero (design/ux-round1 §١ · LANDING_TOUR_HERO) ——— */
.tr.tr-hero{color:var(--white);background:radial-gradient(900px 420px at 85% 0%,color-mix(in srgb,var(--purple) 32%,transparent),transparent 65%),radial-gradient(700px 360px at 5% 100%,color-mix(in srgb,var(--teal) 12%,transparent),transparent 60%),var(--hero-1);padding:64px 0 72px}
.tr-hero .tr-head h1{margin:0;font:700 clamp(2rem,3.6vw,3rem)/1.3 var(--font-display);color:var(--white)}
.tr-hero .tr-head p{color:rgba(255,255,255,.8)}
.tr-cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.tr-cta .ss-btn svg{flex:none}
.tr-hero .tr-head .tr-hint{margin:4px 0 0;font-size:14px;color:rgba(255,255,255,.7)}
.tr-hint{position:relative}
.tr-hint .pg-contact{display:inline;position:static}
/* القائمة تحت سطر الدعوة في وسطه بعرض الشاشة على الهاتف، فلا تمرير أفقيّ (QA 21/10 18:46) */
.tr-hint .pg-contact-menu{inset-inline:0;margin-inline:auto;width:min(300px,100%);box-sizing:border-box;text-align:start}
.tr-link{padding:0;border:0;background:none;font:inherit;color:var(--white);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.tr-link:focus-visible{outline:2px solid var(--white);outline-offset:2px;border-radius:2px}
.tr-hero .tr-stage{box-shadow:0 24px 60px rgba(0,0,0,.35)}
/* ——— المدينة الحاليّة برتقاليّ ثابت والتي مرّت بنفسجيّ هادئ (design/ux-round1 §٢) ——— */
[data-theme="dark"] .tr-map .city.lit:not(.now) circle.dot{fill:var(--purple-l);stroke:var(--purple-l)}
.tr-map .city circle.ring{fill:none;stroke:var(--orange);stroke-width:2;opacity:0}
.tr-map .city.now circle.ring{opacity:1}
.tr-map .city.now circle.dot{fill:var(--orange);stroke:var(--surface);stroke-width:3;r:9}
.tr-map .city.now circle.halo{fill:var(--orange)}
.tr-map .city.now text{fill:var(--orange-text);font-weight:600}
.tr-icon.is-now{background:color-mix(in srgb,var(--orange) 14%,var(--surface));color:var(--orange-text)}
@media (max-width:900px){.tr.tr-hero{padding:48px 0 56px}.tr-cta .ss-btn{flex:1 1 100%;justify-content:center}}

/* --- showcase "what can you make here" (design/showcase-v1 · sc-*) --- */
.sc{background:var(--bg-alt);padding:72px 0 64px}
.sc-in{display:grid;gap:28px}
.sc-head{display:grid;justify-items:center;text-align:center;gap:10px}
.sc-head h2{margin:0;font:700 clamp(1.6rem,2.6vw,2.2rem)/1.4 var(--font-display);color:var(--ink)}
.sc-head p{margin:0;max-width:36em;color:var(--ink-2);font-size:17px;line-height:1.8}
.sc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.sc-grid.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.sc-card{display:grid;gap:14px;align-content:start;padding:20px;border-radius:var(--r);background:var(--surface);border:1.5px solid var(--line);box-shadow:var(--shadow)}
.sc-card.is-playing{border-color:var(--purple)}
.sc-top{display:flex;justify-content:space-between;align-items:center}
.sc-ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--purple) 12%,var(--surface));color:var(--purple)}
.sc-ic svg{width:24px;height:24px}
.sc-line{margin:0;font:500 1.02rem/1.8 var(--font-body);color:var(--ink);min-height:3.6em}
.sc-player{display:flex;align-items:center;gap:12px;padding-block:6px;padding-inline:14px; /* equal inline padding: the time touched the edge in RTL (Ahmad 23/10) */border-radius:999px;border:1px solid var(--line);background:var(--bg-alt)}
.sc-play{flex:none;width:40px;height:40px;border-radius:50%;border:0;background:var(--purple);color:var(--on-purple,#fff);display:grid;place-items:center;cursor:pointer}
.sc-play svg{width:16px;height:16px}
.sc-play:focus-visible{outline:2px solid var(--purple);outline-offset:3px}
.sc-player .ss-wave{flex:1;height:28px;gap:3px;direction:ltr;overflow:hidden}
.sc-player .ss-wave i{flex:1;max-width:4px;background:var(--line-strong);animation-play-state:paused;transform:scaleY(.45)}
.sc-card.is-playing .ss-wave i{background:var(--teal-d);animation-play-state:running}
.sc-time{flex:none;font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.sc-cta{justify-self:start}
.sc-hint{margin:0;text-align:center;color:var(--ink-2);font-size:14px}
@media (prefers-reduced-motion: reduce){.sc-card.is-playing .ss-wave i{animation:none;transform:scaleY(.7)}}
@media (max-width:900px){
.sc{padding:48px 0}
.sc-grid,.sc-grid.n4{grid-template-columns:1fr}
.sc-cta{justify-self:stretch;justify-content:center}
}