/* faceOS site styles: site-v2/styles.css, fonts, site-v2/scifi.css, site-v4/blog.css, site-launch/launch.css, cover colours */
/* faceOS v2 preview. System fonts only, no external assets. Logical properties so Arabic (dir=rtl) mirrors. */
:root {
  --bg: #0b0f17;
  --bg-2: #101725;
  --bg-3: #162033;
  --line: #2a3752;
  --text: #e8ecf3;
  --muted: #b0bbcd;
  --accent: #7dd3fc;
  --accent-2: #c4b5fd;
  --accent-ink: #06111c;
  --wa: #25d366;
  --wa-ink: #052e16;
  --ph: #fbbf24;
  --ph-ink: #fcd34d;
  --err: #fca5a5;
  --ok: #86efac;
  --focus: #fde68a;
  --radius: 14px;
  --wrap: 1180px;
  --font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-ar: system-ui, -apple-system, "SF Arabic", "Geeza Pro", "Noto Sans Arabic", "Noto Naskh Arabic", "Segoe UI", Tahoma, "Arial", sans-serif;
}
:lang(ar) { --font: var(--font-ar); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
body { margin: 0; font-family: var(--font); font-size: 1rem; line-height: 1.6; color: var(--text); background: var(--bg); overflow-x: hidden; }
html[lang="ar"] body { line-height: 1.8; }
body.modal-open { overflow: hidden; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .75rem; }
html[lang="ar"] :is(h1, h2, h3, h4) { line-height: 1.45; }
h1 { font-size: clamp(1.75rem, 4.6vw, 3rem); font-weight: 800; letter-spacing: -.01em; }
h2 { font-size: clamp(1.45rem, 3.2vw, 2.2rem); font-weight: 800; }
h3 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0 0 1rem; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: #bae6fd; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; margin: 0; }
img, video { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; inset-inline-start: 1rem; top: -4rem; z-index: 100; background: var(--accent); color: var(--accent-ink); padding: .6rem 1rem; border-radius: 8px; font-weight: 700; }
.skip-link:focus { top: 1rem; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }
.narrow { max-width: 860px; }
.center { text-align: center; }
.muted { color: var(--muted); }
.lead { font-size: 1.12rem; }
.small { font-size: .9rem; color: var(--muted); }
.micro { font-size: .85rem; color: var(--muted); }
.strong { font-weight: 700; font-size: 1.1rem; }
.spec { font-size: .85rem; color: var(--ph-ink); border-inline-start: 3px solid var(--ph); padding-inline-start: .6rem; overflow-wrap: anywhere; }
.note { font-size: .9rem; color: var(--muted); }
.h-sub { font-size: 1.15rem; font-weight: 700; color: var(--accent); margin-top: -.25rem; }

/* demo strip */

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 46px; padding: .7rem 1.25rem; border-radius: 999px; border: 2px solid transparent; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; line-height: 1.2; text-align: center; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: #bae6fd; color: var(--accent-ink); }
.btn-secondary { background: var(--bg-3); color: var(--text); border-color: var(--line); }
.btn-secondary:hover { border-color: var(--accent); color: var(--text); }
.btn-ghost { background: transparent; color: var(--text); border-color: #4a5a7a; }
.btn-ghost:hover { border-color: var(--accent); color: var(--text); }
.btn-wa { background: var(--wa); color: var(--wa-ink); }
.btn-wa:hover { background: #4ae083; color: var(--wa-ink); }
.btn-sm { min-height: 40px; padding: .45rem .95rem; font-size: .92rem; white-space: nowrap; }
.btn-block { width: 100%; }
.link-btn { background: none; border: 0; color: var(--accent); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: .25rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.25rem 0 .75rem; }
.center-row { justify-content: center; }

/* header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(11, 15, 23, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.header-row { display: flex; align-items: center; gap: .5rem; min-height: 62px; }
.logo { font-weight: 800; font-size: 1.3rem; color: var(--text); text-decoration: none; letter-spacing: -.02em; margin: 0; }
.site-nav { display: none; }
.site-nav.open { display: block; position: absolute; inset-inline: 0; top: 100%; background: var(--bg-2); border-bottom: 1px solid var(--line); padding: .5rem 1.25rem 1rem; }
.site-nav a { display: block; padding: .6rem 0; color: var(--text); text-decoration: none; font-weight: 600; }
.site-nav a:hover { color: var(--accent); }
.header-actions { margin-inline-start: auto; display: flex; align-items: center; gap: .35rem; }
.icon-btn { display: inline-flex; align-items: center; gap: .4rem; min-width: 40px; height: 40px; justify-content: center; border-radius: 999px; color: var(--text); border: 1px solid var(--line); text-decoration: none; padding: 0 .55rem; }
.icon-btn svg, .menu-btn svg { width: 20px; height: 20px; }
.icon-btn.wa { color: var(--wa); }
.icon-btn:hover { border-color: var(--accent); color: var(--text); }
.phone-text { display: none; font-size: .9rem; font-weight: 600; }
.lang-btn { font: inherit; font-weight: 700; font-size: .9rem; min-height: 40px; padding: 0 .7rem; border-radius: 999px; background: transparent; color: var(--text); border: 1px solid var(--line); cursor: pointer; }
.lang-btn:hover { border-color: var(--accent); }
.lang-btn[lang="ar"] { font-family: var(--font-ar); }
.menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: transparent; color: var(--text); border: 1px solid var(--line); cursor: pointer; }
@media (max-width: 400px) {
  .header-row { gap: .3rem; }
  .header-actions { gap: .25rem; }
  .logo { font-size: 1.15rem; }
  .icon-btn, .lang-btn, .menu-btn { min-width: 36px; height: 36px; min-height: 36px; padding: 0 .45rem; }
  .btn-sm { padding: .4rem .7rem; font-size: .85rem; min-height: 36px; }
}
@media (min-width: 1100px) {
  .site-nav { display: block; margin-inline-start: 1rem; }
  .site-nav ul { display: flex; gap: 1.1rem; }
  .site-nav a { padding: .3rem 0; font-size: .95rem; }
  .menu-btn { display: none; }
  .phone-text { display: inline; }
}

/* sections */
.section { padding: 4rem 0; }
.section.alt { background: var(--bg-2); border-block: 1px solid var(--line); }
.hero { padding: 2.5rem 0 3rem; background: radial-gradient(60rem 30rem at 85% 10%, rgba(125, 211, 252, .12), transparent 60%), radial-gradient(40rem 25rem at 0% 90%, rgba(196, 181, 253, .1), transparent 60%); }
html[dir="rtl"] .hero { background: radial-gradient(60rem 30rem at 15% 10%, rgba(125, 211, 252, .12), transparent 60%), radial-gradient(40rem 25rem at 100% 90%, rgba(196, 181, 253, .1), transparent 60%); }
.hero-grid { display: grid; gap: 2rem; align-items: center; }
.eyebrow { color: var(--accent); font-weight: 700; letter-spacing: .02em; margin-bottom: .6rem; }
.price-chip { display: inline-block; margin: .25rem 0 0; padding: .45rem .95rem; border-radius: 999px; background: rgba(125, 211, 252, .12); border: 1px solid rgba(125, 211, 252, .5); font-weight: 800; color: var(--text); }
.hero-visual { position: relative; }
.bubble { position: absolute; inset-inline-start: 0; bottom: 1.25rem; max-width: 70%; background: var(--bg-3); border: 1px solid var(--line); padding: .7rem .9rem; border-radius: 14px 14px 14px 4px; font-size: .92rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
html[dir="rtl"] .bubble { border-radius: 14px 14px 4px 14px; }
@media (min-width: 900px) {
  .hero { padding: 4rem 0 4.5rem; }
  .hero-grid { grid-template-columns: 1.1fr .9fr; gap: 3rem; }
}

/* media placeholders */
.media { position: relative; margin: 0 0 1rem; border-radius: 12px; overflow: hidden; background: linear-gradient(160deg, #111a2b, #0c1220); border: 1px dashed rgba(251, 191, 36, .55); }
.media.has-media { border-style: solid; border-color: var(--line); }
.ph-art { display: flex; align-items: flex-end; justify-content: center; gap: 6%; aspect-ratio: 4 / 3; padding: 1rem 1rem 0; }
.ph-art svg { height: 88%; width: auto; max-width: 100%; }
.media-hero .ph-art { aspect-ratio: 1 / 1; }
.media-hero .art-7ft { height: 92%; }
.media-hero .art-tab { height: 38%; }
.real-media { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.media-hero .real-media { aspect-ratio: 1 / 1; }
.ph-tag { position: absolute; top: .6rem; inset-inline-start: .6rem; background: rgba(11, 15, 23, .88); color: var(--ph-ink); border: 1px solid rgba(251, 191, 36, .6); border-radius: 999px; padding: .2rem .65rem; font-size: .78rem; font-weight: 700; }

/* cards */
.cards { display: grid; gap: 1.25rem; margin: 1.75rem 0 1rem; }
.card { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; display: flex; flex-direction: column; min-width: 0; }
.card > .btn { margin-top: auto; align-self: flex-start; }
.card .spec { margin-bottom: 1.25rem; }
@media (min-width: 720px) { .cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.helper { font-weight: 600; }
.plan-main { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.plan-price { font-size: 1.35rem; font-weight: 800; color: var(--accent); margin-bottom: 1.25rem; }
.plan-price.quiet { color: var(--text); font-size: 1.1rem; }
.uc-card p:last-child { margin: 0; }
.suggest { color: var(--accent-2); font-weight: 700; font-size: .92rem; }

/* abilities */
.abilities { display: grid; gap: 1rem; margin: 1.75rem 0; }
.abilities li { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.1rem 1rem; position: relative; }
.abilities h3 { color: var(--accent); margin-bottom: .35rem; }
.abilities p { margin: 0; color: var(--muted); }
.ab-n { position: absolute; top: .9rem; inset-inline-end: 1rem; font-weight: 800; color: #3c4b69; font-size: 1.4rem; }
@media (min-width: 720px) { .abilities { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .abilities { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.one-brain { display: grid; gap: 1.5rem; align-items: center; background: linear-gradient(135deg, rgba(125, 211, 252, .08), rgba(196, 181, 253, .06)); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.bodies { display: flex; align-items: flex-end; justify-content: center; gap: 1rem; height: 170px; }
.bodies svg { height: 100%; width: auto; }
.bodies svg + svg { height: 62%; }
@media (min-width: 900px) { .one-brain { grid-template-columns: 300px 1fr; } }

/* steps */
.steps { display: grid; gap: 1rem; margin: 1.75rem 0 1.25rem; counter-reset: s; }
.steps li { display: flex; gap: .9rem; align-items: flex-start; background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; }
.steps p { margin: 0; font-weight: 600; }
.step-n { flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-weight: 800; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } .steps li { flex-direction: column; } }

/* trust */
.trust { padding: 1.5rem 0; background: var(--bg-3); border-block: 1px solid var(--line); }
.trust-list { display: flex; flex-wrap: wrap; gap: .75rem 1.75rem; justify-content: center; }
.trust-list li { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.trust-list svg { width: 20px; height: 20px; color: var(--ok); flex: 0 0 auto; }
.trust-list .tbc { color: var(--ph-ink); font-weight: 500; }
.trust-list .tbc svg { color: var(--ph); }

/* gallery */
.gallery { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1.5rem; }
@media (min-width: 900px) { .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gallery .media { margin: 0; }
.gallery figcaption { padding: .6rem .75rem .75rem; font-size: .88rem; }
.gallery figcaption .ph-tag { position: static; display: inline-block; margin-top: .35rem; }
.tile-name { display: block; font-weight: 600; }
.scene .ph-art { background: linear-gradient(to top, #1b263b 0 18%, transparent 18%); }
.scene-2 .ph-art, .scene-3 .ph-art { background: linear-gradient(to top, #2a3550 0 26%, transparent 26%); }

/* FAQ */
.faq-group { margin-top: 2rem; }
.faq-group > h3 { color: var(--accent); font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; }
html[lang="ar"] .faq-group > h3 { text-transform: none; letter-spacing: 0; font-size: 1.1rem; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item h4 { margin: 0; font-size: 1.02rem; }
.faq-item button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0; background: none; border: 0; color: var(--text); font: inherit; font-weight: 700; text-align: start; cursor: pointer; }
.faq-item button svg { width: 20px; height: 20px; flex: 0 0 auto; transition: transform .2s; }
.faq-item button[aria-expanded="true"] svg { transform: rotate(180deg); }
.faq-a p { color: var(--muted); }
.faq-more { margin-top: 1.5rem; font-weight: 700; }

/* contact + forms */
.contact-grid { display: grid; gap: 2rem; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1.4fr .8fr; align-items: start; } }
.contact-list { display: grid; gap: .75rem; }
.contact-side { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; }
.form { display: grid; gap: 1rem; margin-top: 1.25rem; }
.form > .btn { justify-self: start; }
.field { display: grid; gap: .35rem; min-width: 0; }
.field-row { display: grid; gap: 1rem; }
@media (min-width: 600px) { .field-row { grid-template-columns: 1fr 1fr; } }
label, legend { font-weight: 600; }
input[type="text"], input[type="tel"], input[type="email"], input[type="date"], input[type="number"], select, textarea {
  width: 100%; min-height: 46px; padding: .6rem .75rem; border-radius: 10px; border: 1px solid #4a5a7a; background: #0d1422; color: var(--text); font: inherit;
}
input[type="date"] { color-scheme: dark; }
select { color-scheme: dark; }
textarea { resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: #6b7da3; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--accent); }
[aria-invalid="true"]:not([type="radio"]):not([type="checkbox"]) { border-color: var(--err); }
html[dir="rtl"] input[dir="ltr"] { text-align: right; }
.check { display: flex; gap: .55rem; align-items: flex-start; font-weight: 500; }
.check input { width: 20px; height: 20px; margin: .2rem 0 0; flex: 0 0 auto; accent-color: var(--accent); }
.err { color: var(--err); font-size: .9rem; font-weight: 600; margin: 0; }
.hint { font-size: .85rem; color: var(--muted); margin: 0; }

/* dialogs */
dialog.modal { padding: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--bg-2); color: var(--text); width: min(640px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); }
dialog.modal::backdrop { background: rgba(3, 6, 12, .72); }
.modal-inner { padding: 1.5rem; position: relative; }
.modal-inner h2 { padding-inline-end: 2.5rem; }
.modal-close { position: absolute; top: .75rem; inset-inline-end: .75rem; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg-3); color: var(--text); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.media-talk .ph-art { aspect-ratio: 16 / 9; }
.bubble-inline { background: var(--bg-3); border: 1px solid var(--line); border-radius: 14px; padding: .7rem .9rem; }

/* quote flow */
dialog.flow { width: min(720px, calc(100vw - 2rem)); }
.flow-inner { padding: 1.25rem 1.5rem 1.5rem; }
.flow-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; position: relative; }
.flow-head .modal-close { position: static; }
.flow-title { font-size: 1.3rem; margin: 0; }
.progress { margin: 1rem 0 .5rem; }
.progress-label { margin: 0 0 .35rem; font-size: .9rem; color: var(--muted); font-weight: 600; }
.bar { height: 6px; background: var(--bg-3); border-radius: 999px; overflow: hidden; }
.bar span { display: block; height: 100%; width: 10%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: inherit; transition: width .25s; }
html[dir="rtl"] .bar span { background: linear-gradient(-90deg, var(--accent), var(--accent-2)); }
.flow-alert { margin: .25rem 0 0; color: var(--err); font-weight: 600; font-size: .92rem; }
.flow-alert:empty { display: none; }
.step { display: grid; gap: 1.1rem; padding-top: .75rem; }
.q { font-size: 1.2rem; font-weight: 800; margin: 0 0 .25rem; }
.q:focus { outline: none; }
fieldset.group { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: .6rem; }
fieldset.group > legend { padding: 0; margin-bottom: .6rem; }
fieldset.group > legend.q { margin-bottom: .75rem; }
.choices { display: grid; gap: .5rem; }
.choices.inline { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.choice { display: flex; align-items: center; gap: .6rem; padding: .7rem .85rem; border: 1px solid #4a5a7a; border-radius: 12px; background: #0d1422; cursor: pointer; font-weight: 600; min-height: 48px; }
.choice:hover { border-color: #6b7da3; }
.choice input { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; accent-color: var(--accent); }
.choice:has(input:checked) { border-color: var(--accent); background: rgba(125, 211, 252, .1); }
.choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.choice input:focus-visible { outline: none; }
.machines-pick { display: grid; gap: .6rem; }
.pick { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.pick .choice { flex: 1 1 220px; }
.qty { display: flex; align-items: center; gap: .4rem; }
.qty-label { font-size: .88rem; color: var(--muted); margin-inline-end: .25rem; }
.qty input { width: 4rem; text-align: center; min-height: 40px; padding: .3rem; }
.qty-btn { width: 40px; height: 40px; border-radius: 10px; border: 1px solid #4a5a7a; background: var(--bg-3); color: var(--text); font-size: 1.2rem; font-weight: 700; cursor: pointer; }
.qty-btn:hover { border-color: var(--accent); }
.or { margin: 0; color: var(--muted); font-weight: 700; display: flex; align-items: center; gap: .75rem; }
.or::before, .or::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.narrow-field { max-width: 14rem; }
.computed { margin: 0; font-weight: 700; color: var(--accent); }
.computed:empty { display: none; }
.price-note { margin: 0; padding: .7rem .9rem; border-radius: 10px; background: rgba(125, 211, 252, .08); border: 1px solid rgba(125, 211, 252, .35); font-weight: 600; }
.dates-block, .month-block { display: grid; gap: 1rem; }
.tel-row { display: grid; grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); gap: .5rem; }
.summary { margin: 0; display: grid; gap: .25rem; }
.sum-row { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.sum-row dt { font-weight: 700; color: var(--muted); font-size: .9rem; grid-column: 1; }
.sum-row dd { margin: 0; grid-column: 1; overflow-wrap: anywhere; }
.sum-row .link-btn { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
.flow-nav { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.flow-nav #qf-next, .flow-nav #qf-send, .flow-nav #qf-close { margin-inline-start: auto; }
@media (max-width: 640px) {
  dialog.modal { width: 100vw; max-width: 100vw; height: 100%; max-height: 100%; margin: 0; border-radius: 0; border: 0; }
  dialog.modal:not(.flow) { height: auto; max-height: 100%; margin-top: auto; border-radius: 18px 18px 0 0; }
  .flow-inner { padding: 1rem 1.1rem 1.25rem; }
  .flow-nav { position: sticky; bottom: 0; background: var(--bg-2); padding-bottom: .5rem; }
}

/* final + footer */
.final { padding: 4.5rem 0; background: radial-gradient(40rem 20rem at 50% 0%, rgba(125, 211, 252, .14), transparent 70%), var(--bg-2); border-top: 1px solid var(--line); }
.site-footer { padding: 2.5rem 0 5.5rem; border-top: 1px solid var(--line); }
.footer-grid { display: grid; gap: 1.5rem; }
@media (min-width: 800px) { .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; } .site-footer { padding-bottom: 2rem; } }
.footer-contact a, .footer-links a { display: inline-block; padding: .3rem 0; color: var(--text); }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.footer-bottom p { margin: 0; }
.wa-float { position: fixed; bottom: 1rem; inset-inline-end: 1rem; z-index: 40; width: 56px; height: 56px; border-radius: 50%; background: var(--wa); color: var(--wa-ink); display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.wa-float svg { width: 30px; height: 30px; }
@media (min-width: 800px) { .wa-float { display: none; } }

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

@font-face{font-family:"Display Digits";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/exo-2-digits-700.woff2) format("woff2");unicode-range:U+0030-0039}
@font-face{font-family:"Orbitron";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/orbitron-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Orbitron";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/orbitron-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Orbitron";font-style:normal;font-weight:900;font-display:swap;src:url(fonts/orbitron-latin-900-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Exo 2";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/exo-2-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Exo 2";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/exo-2-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/tajawal-arabic-400-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/tajawal-arabic-500-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/tajawal-arabic-700-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/tajawal-arabic-800-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
/* faceOS v3 — sci-fi theme layer for the whole page (approved style frame + Mia's 5 changes). Loaded after styles.css.
   Fonts are inlined by tools/build-v3.mjs (OFL: Orbitron, Exo 2, Tajawal); system fonts are the fallback.
   "Display Digits" = Exo 2 700, digits 0-9 only (unicode-range), first in every Orbitron stack: Orbitron's 7 reads
   as a hook, so numerals in display type come from Exo 2 while the letters stay Orbitron.
   Logical properties throughout so Arabic (dir=rtl) mirrors. All motion stops under prefers-reduced-motion. */
:root {
  --bg: #05060f;
  --bg-2: #0a0d1f;
  --bg-3: #10152e;
  --line: rgba(140, 180, 255, .18);
  --text: #eef3ff;
  --muted: #b3bfdc;
  --cyan: #22e4ff;
  --violet: #a58bff;
  --magenta: #ff5ad9;
  --accent: var(--cyan);
  --accent-2: var(--violet);
  --accent-ink: #040714;
  --glass: linear-gradient(180deg, rgba(22, 30, 66, .62), rgba(9, 12, 30, .62));
  --glow-c: 0 0 22px rgba(34, 228, 255, .35);
  --font: "Exo 2", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-ar: "Tajawal", "Exo 2", system-ui, -apple-system, "SF Arabic", "Geeza Pro", "Noto Sans Arabic", Tahoma, sans-serif;
  --font-display: "Display Digits", "Orbitron", "Exo 2", ui-sans-serif, system-ui, sans-serif;
  --font-orbitron: "Display Digits", "Orbitron", var(--font);
  --radius: 10px;
}
html[lang="ar"] { --font-display: var(--font-ar); }

html { background: var(--bg); }
body {
  background:
    radial-gradient(55rem 35rem at 12% -5%, rgba(165, 139, 255, .16), transparent 60%),
    radial-gradient(50rem 30rem at 100% 30%, rgba(34, 228, 255, .10), transparent 60%),
    radial-gradient(45rem 35rem at 30% 100%, rgba(255, 90, 217, .08), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
/* starfield (canvas added by scifi.js) and a faint CRT scan-line veil, both behind content */
.sf-stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
body::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .022) 0 1px, transparent 1px 3px);
}

h1, h2, h3 { font-family: var(--font-display); }
h1 { font-weight: 700; font-size: clamp(1.65rem, 3.3vw, 2.85rem); line-height: 1.16; letter-spacing: .01em; }
h2 { font-weight: 700; font-size: clamp(1.35rem, 2.5vw, 2rem); line-height: 1.22; letter-spacing: .01em; }
h3 { font-weight: 700; font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; }
html[lang="ar"] :is(h1, h2, h3) { font-weight: 800; letter-spacing: 0; text-transform: none; }
html[lang="ar"] h1 { font-size: clamp(1.75rem, 3.5vw, 3rem); line-height: 1.4; }
html[lang="ar"] h3 { font-size: 1.2rem; }
a { color: var(--cyan); }
a:hover { color: #a5f3ff; }

/* preview strip stays amber: it is a notice, not decoration */

/* ---------- buttons ---------- */
.btn { border-radius: 6px; font-weight: 600; letter-spacing: .02em; position: relative; overflow: hidden; transition: box-shadow .25s, transform .25s, background-color .25s, border-color .25s; }
.btn-primary { background: linear-gradient(100deg, var(--cyan), #7fb8ff 55%, var(--violet)); color: var(--accent-ink); box-shadow: var(--glow-c), inset 0 0 0 1px rgba(255, 255, 255, .35); }
html[dir="rtl"] .btn-primary { background: linear-gradient(-100deg, var(--cyan), #7fb8ff 55%, var(--violet)); }
.btn-primary:hover { background: linear-gradient(100deg, #7af0ff, #a9d0ff 55%, #c3b2ff); color: var(--accent-ink); box-shadow: 0 0 34px rgba(34, 228, 255, .6), inset 0 0 0 1px rgba(255, 255, 255, .5); transform: translateY(-1px); }
/* light sweep on hover */
.btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); transform: translateX(-120%); pointer-events: none; }
.btn:hover::after { transform: translateX(120%); transition: transform .7s ease; }
.btn-ghost { background: rgba(34, 228, 255, .06); color: var(--text); border: 1px solid rgba(34, 228, 255, .55); backdrop-filter: blur(6px); }
.btn-ghost:hover { border-color: var(--cyan); color: #fff; box-shadow: var(--glow-c), inset 0 0 18px rgba(34, 228, 255, .15); }

/* ---------- header: glass bar with a neon base line ---------- */
.site-header { background: rgba(5, 7, 18, .62); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 0; }
.site-header::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan) 20%, var(--violet) 55%, var(--magenta) 85%, transparent); opacity: .7; }
.logo { font-family: var(--font-orbitron); font-weight: 900; letter-spacing: .04em; background: linear-gradient(90deg, #fff, var(--cyan) 60%, var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 10px rgba(34, 228, 255, .45)); }
.site-nav a { font-weight: 600; letter-spacing: .03em; white-space: nowrap; transition: color .2s, text-shadow .2s; }
.phone-text { white-space: nowrap; }
.site-nav a:hover { color: var(--cyan); text-shadow: 0 0 12px rgba(34, 228, 255, .7); }
/* solid: a backdrop-filter nested inside the blurred header does not blur, and let the hero show through */
.site-nav.open { background: #080b1c; }
.icon-btn, .lang-btn, .menu-btn { border-color: rgba(140, 180, 255, .28); background: rgba(255, 255, 255, .03); transition: border-color .2s, box-shadow .2s; }
.icon-btn:hover, .lang-btn:hover, .menu-btn:hover { border-color: var(--cyan); box-shadow: 0 0 14px rgba(34, 228, 255, .35); }
.wa-float { box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 0 26px rgba(37, 211, 102, .55); }

/* ---------- HUD corner brackets (reusable): add class .hud, set --c ---------- */
.hud { --c: var(--cyan); --k: 16px; position: relative; }
.hud::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; border-radius: inherit;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--k) 2px, linear-gradient(var(--c), var(--c)) top left / 2px var(--k),
    linear-gradient(var(--c), var(--c)) top right / var(--k) 2px, linear-gradient(var(--c), var(--c)) top right / 2px var(--k),
    linear-gradient(var(--c), var(--c)) bottom left / var(--k) 2px, linear-gradient(var(--c), var(--c)) bottom left / 2px var(--k),
    linear-gradient(var(--c), var(--c)) bottom right / var(--k) 2px, linear-gradient(var(--c), var(--c)) bottom right / 2px var(--k);
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 4px var(--c));
}

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; background: none; padding-bottom: 4rem; }
html[dir="rtl"] .hero { background: none; }
/* perspective grid floor */
.hero::after {
  content: ""; position: absolute; z-index: -1; inset-inline: -40%; bottom: -2px; height: 55%;
  background-image: linear-gradient(rgba(34, 228, 255, .38) 1px, transparent 1px), linear-gradient(90deg, rgba(165, 139, 255, .32) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center 0;
  transform: perspective(420px) rotateX(64deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .6) 35%, transparent 85%); mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .6) 35%, transparent 85%);
  animation: sf-grid 2.8s linear infinite;
}
/* horizon glow */
.hero::before { content: ""; position: absolute; z-index: -1; inset-inline: 0; bottom: 52%; height: 2px; background: linear-gradient(90deg, transparent, rgba(34, 228, 255, .55), rgba(255, 90, 217, .45), transparent); filter: blur(1px); box-shadow: 0 0 40px 12px rgba(120, 100, 255, .18); }
@keyframes sf-grid { to { background-position: center 56px; } }

.eyebrow { font-family: var(--font); font-weight: 600; font-size: .9rem; text-transform: uppercase; letter-spacing: .16em; color: var(--cyan); display: flex; align-items: center; gap: .7rem; text-shadow: 0 0 12px rgba(34, 228, 255, .55); }
.eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; box-shadow: 0 0 8px currentColor; flex: 0 0 auto; }
html[lang="ar"] .eyebrow { font-family: var(--font-ar); font-size: 1rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
.hero h1 {
  background: linear-gradient(100deg, #ffffff 0%, #d7f9ff 30%, #a5f3ff 45%, #e2d9ff 60%, #ffffff 80%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px rgba(34, 228, 255, .22)); animation: sf-rise .8s .08s cubic-bezier(.2, .7, .2, 1) both, sf-shimmer 9s ease-in-out infinite alternate;
}
@keyframes sf-shimmer { from { background-position: 0% 0; } to { background-position: 100% 0; } }
.hero .lead { color: #d3dcf3; max-width: 38rem; }
.price-chip { display: inline-flex; align-items: center; gap: .6rem; border-radius: 4px; background: rgba(34, 228, 255, .07); border: 1px solid rgba(34, 228, 255, .5); box-shadow: inset 0 0 16px rgba(34, 228, 255, .12); font-family: var(--font-orbitron); font-weight: 700; font-size: .9rem; letter-spacing: .06em; }
html[lang="ar"] .price-chip { font-family: var(--font-ar); font-weight: 700; font-size: 1rem; letter-spacing: 0; }
.price-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #5bff9c; box-shadow: 0 0 8px #5bff9c; animation: sf-blink 1.6s ease-in-out infinite; flex: 0 0 auto; }
@keyframes sf-blink { 50% { opacity: .25; } }
.micro { color: #a6b3d2; }

/* staggered entrance */
.hero-copy > * { animation: sf-rise .8s cubic-bezier(.2, .7, .2, 1) both; }
.hero-copy > :nth-child(2) { animation-delay: .08s; } .hero-copy > :nth-child(3) { animation-delay: .16s; }
.hero-copy > :nth-child(4) { animation-delay: .24s; } .hero-copy > :nth-child(5) { animation-delay: .32s; } .hero-copy > :nth-child(6) { animation-delay: .4s; }
.hero-visual { animation: sf-materialise 1.2s .2s ease-out both; }
@keyframes sf-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes sf-materialise { from { opacity: 0; filter: blur(8px) brightness(1.8); transform: scale(.97); } }

.bubble { background: rgba(10, 14, 34, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(165, 139, 255, .5); box-shadow: 0 0 24px rgba(165, 139, 255, .25), 0 12px 30px rgba(0, 0, 0, .45); z-index: 4; padding-inline-start: 1.9rem; }
.bubble::before { content: ""; position: absolute; inset-inline-start: .8rem; top: 1.05rem; width: 7px; height: 7px; border-radius: 50%; background: var(--magenta); box-shadow: 0 0 8px var(--magenta); animation: sf-blink 1.2s infinite; }

/* ---------- hologram showcase (hero visual + machine cards) ---------- */
.media { border: 1px solid rgba(34, 228, 255, .22); border-radius: var(--radius); background: radial-gradient(70% 45% at 50% 100%, color-mix(in srgb, var(--c, var(--cyan)) 22%, transparent), transparent 70%), linear-gradient(180deg, rgba(10, 14, 34, .85), rgba(5, 7, 18, .92)); overflow: hidden; }
.ph-art { position: relative; isolation: isolate; padding: 1.25rem 1rem 9%; }
.ph-art svg { position: relative; z-index: 1; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--c, var(--cyan)) 70%, transparent)); animation: sf-flicker 6s steps(1) infinite; }
/* projector beam */
.ph-art::before { content: ""; position: absolute; z-index: 0; left: 50%; bottom: 7%; width: 74%; height: 88%; transform: translateX(-50%); background: linear-gradient(to top, color-mix(in srgb, var(--c, var(--cyan)) 45%, transparent), transparent 85%); clip-path: polygon(36% 100%, 64% 100%, 100% 0, 0 0); filter: blur(5px); opacity: .55; }
/* scan lines + travelling scan band */
.ph-art::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(180, 240, 255, .07) 0 1px, transparent 1px 4px), linear-gradient(to bottom, transparent, color-mix(in srgb, var(--c, var(--cyan)) 30%, transparent), transparent);
  background-size: 100% 100%, 100% 22%; background-repeat: repeat, no-repeat; background-position: 0 0, 0 -30%;
  animation: sf-scan 4.5s linear infinite;
}
@keyframes sf-scan { to { background-position: 0 0, 0 130%; } }
@keyframes sf-flicker { 0%, 100% { opacity: 1; } 47% { opacity: .82; } 48% { opacity: 1; } 73% { opacity: .9; } 74% { opacity: 1; } }
/* glowing base ring */
.media::after { content: ""; position: absolute; z-index: 2; left: 50%; bottom: 4.5%; width: 62%; height: 7%; transform: translateX(-50%); border-radius: 50%; border: 2px solid color-mix(in srgb, var(--c, var(--cyan)) 85%, white); box-shadow: 0 0 18px var(--c, var(--cyan)), inset 0 0 12px var(--c, var(--cyan)); opacity: .8; animation: sf-pulse 3s ease-in-out infinite; pointer-events: none; }
@keyframes sf-pulse { 50% { opacity: .45; transform: translateX(-50%) scale(1.06); } }
.media-hero { --k: 24px; box-shadow: 0 0 60px rgba(34, 228, 255, .12); }
/* placeholder label: kept amber and on top so it always reads as a sample */
.ph-tag { z-index: 5; background: rgba(5, 7, 18, .9); backdrop-filter: blur(4px); }

/* hologram artwork colours (CSS applies to the <symbol> contents) */
#g-holo stop:first-child { stop-color: #7ff3ff; }
#g-holo stop:last-child { stop-color: #b9a2ff; }
#g-glow stop { stop-color: #22e4ff; }
#s-7ft > rect:first-child, #s-21in > rect:nth-child(2), #s-tab > rect:nth-child(3) { fill: #070b1c; stroke: #5fe9ff; stroke-opacity: .7; }
#s-7ft > rect:last-child, #s-21in > rect:first-child, #s-tab > rect:first-child, #s-tab > path { fill: #141a3a; }

/* ---------- section chrome ---------- */
.section { position: relative; }
.section > .wrap > h2::before { content: ""; display: block; width: 76px; height: 3px; margin-bottom: 1rem; background: linear-gradient(90deg, var(--cyan), var(--violet), var(--magenta)); box-shadow: 0 0 12px rgba(165, 139, 255, .7); }
html[dir="rtl"] .section > .wrap > h2::before { background: linear-gradient(-90deg, var(--cyan), var(--violet), var(--magenta)); }
#machines { background: radial-gradient(40rem 22rem at 50% 0%, rgba(165, 139, 255, .10), transparent 70%); }
#machines::before { content: ""; position: absolute; inset-inline: 8%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(34, 228, 255, .5), transparent); }
#machines .lead { color: var(--muted); }

/* ---------- machine cards: glass + HUD ---------- */
.card { background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 20px 50px rgba(0, 0, 0, .35); transition: transform .35s cubic-bezier(.2, .7, .2, 1), border-color .35s, box-shadow .35s; overflow: hidden; }
.machine:nth-child(1) { --c: var(--cyan); }
.machine:nth-child(2) { --c: var(--violet); }
.machine:nth-child(3) { --c: var(--magenta); }
.machine h3 { color: #fff; text-shadow: 0 0 14px color-mix(in srgb, var(--c) 70%, transparent); margin-top: .25rem; }
.machine p { color: #d2dbf2; }
.machine .spec { color: var(--ph-ink); font-size: .8rem; letter-spacing: .02em; background: rgba(251, 191, 36, .05); padding-block: .35rem; }
.machine:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--c) 70%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent), 0 0 38px color-mix(in srgb, var(--c) 30%, transparent), 0 24px 60px rgba(0, 0, 0, .45); }
/* light sweep across the card on hover */
.machine::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .09) 50%, transparent 65%); transform: translateX(-110%); }
.machine:hover::after { transform: translateX(110%); transition: transform .9s ease; }
.machine .media { margin: -.35rem -.35rem 1.1rem; }
#machines ul.cards[role="list"] { margin-bottom: 0; }
#machines .helper { margin: 1.5rem 0 0; }
.helper a { font-weight: 600; text-shadow: 0 0 10px rgba(34, 228, 255, .35); }

/* scroll reveal (scifi.js adds .sf-on to <html> only when motion is allowed) */
.sf-on .sf-reveal { opacity: 0; }
.sf-on .sf-reveal.is-in { opacity: 1; animation: sf-rise .9s var(--d, 0s) cubic-bezier(.2, .7, .2, 1) backwards; }

/* ---------- whole page: section bands ---------- */
.section.alt { background: linear-gradient(180deg, rgba(14, 18, 44, .55), rgba(8, 10, 26, .55)); border-block: 0; }
.section.alt::before, .trust::before, .final::before, .site-footer::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(34, 228, 255, .45) 25%, rgba(165, 139, 255, .45) 75%, transparent); }
.section .lead.muted, .section > .wrap > .lead { color: var(--muted); }
.h-sub { font-family: var(--font-display); font-weight: 700; letter-spacing: .04em; color: var(--cyan); text-shadow: 0 0 14px rgba(34, 228, 255, .45); }
html[lang="ar"] .h-sub { font-family: var(--font-ar); letter-spacing: 0; }
.small { color: #a9b5d4; }
.small.fees { margin-top: -.4rem; }
.spec { background: rgba(251, 191, 36, .05); padding-block: .35rem; }
.card h3, .abilities h3 { color: #fff; }

/* the base reset ul/ol[role=list] { margin: 0 } outranks .cards/.abilities/.steps, so their spacing is restated here */
ul.cards[role="list"] { margin: 1.75rem 0 1.5rem; }
ol.abilities[role="list"] { margin: 1.75rem 0 1.5rem; }
ol.steps[role="list"] { margin: 1.75rem 0 1.25rem; }
ul.gallery[role="list"] { margin-top: 1.5rem; }

/* glass + HUD for every panel */
.card, .abilities li, .steps li, .one-brain, .contact-side, .faq-item, .bubble-inline, .trust { --c: var(--cyan); }
.abilities li, .steps li, .one-brain, .contact-side { background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 18px 44px rgba(0, 0, 0, .32); }

/* ---------- pricing ---------- */
.plan { transition: transform .35s cubic-bezier(.2, .7, .2, 1), border-color .35s, box-shadow .35s; }
.plan:nth-child(2) { --c: var(--violet); }
.plan:nth-child(3) { --c: var(--magenta); }
.plan h3 { text-shadow: 0 0 14px color-mix(in srgb, var(--c) 70%, transparent); }
.plan p { color: #d2dbf2; }
.plan-main { border-color: rgba(34, 228, 255, .7); box-shadow: 0 0 0 1px rgba(34, 228, 255, .45) inset, 0 0 40px rgba(34, 228, 255, .16), 0 20px 50px rgba(0, 0, 0, .35); }
.plan-price { font-family: var(--font-display); font-weight: 700; letter-spacing: .02em; color: var(--cyan); text-shadow: 0 0 16px rgba(34, 228, 255, .55); font-size: 1.25rem; }
.plan-price.quiet { color: #fff; text-shadow: none; font-size: 1.05rem; }
html[lang="ar"] .plan-price { font-family: var(--font-ar); font-weight: 800; letter-spacing: 0; }
.plan:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 70%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent), 0 0 34px color-mix(in srgb, var(--c) 26%, transparent), 0 24px 60px rgba(0, 0, 0, .45); }
.btn-secondary { background: rgba(165, 139, 255, .08); color: var(--text); border: 1px solid rgba(165, 139, 255, .6); }
.btn-secondary:hover { border-color: var(--violet); color: #fff; box-shadow: 0 0 22px rgba(165, 139, 255, .4), inset 0 0 16px rgba(165, 139, 255, .14); }
.btn-wa { box-shadow: 0 0 20px rgba(37, 211, 102, .35); }

/* ---------- the avatar: five abilities + one brain ---------- */
.abilities li { padding-top: 1.35rem; transition: border-color .3s, box-shadow .3s; }
.abilities li:nth-child(5n+2) { --c: var(--violet); } .abilities li:nth-child(5n+3) { --c: var(--magenta); }
.abilities li:nth-child(5n+4) { --c: #5bff9c; } .abilities li:nth-child(5n+5) { --c: #ffc75a; }
.abilities li::before { content: ""; position: absolute; inset-inline: 1.1rem; top: 0; height: 2px; background: var(--c); box-shadow: 0 0 12px var(--c); border-radius: 2px; }
.abilities h3 { color: #fff; text-shadow: 0 0 12px color-mix(in srgb, var(--c) 60%, transparent); }
.abilities p { color: #c3cde6; }
.ab-n { font-family: var(--font-display); color: color-mix(in srgb, var(--c) 75%, white); opacity: .85; text-shadow: 0 0 12px var(--c); font-size: 1.3rem; }
.abilities li:hover { border-color: color-mix(in srgb, var(--c) 60%, transparent); box-shadow: 0 0 26px color-mix(in srgb, var(--c) 22%, transparent); }
.one-brain { background: radial-gradient(30rem 14rem at 15% 50%, rgba(34, 228, 255, .10), transparent 70%), var(--glass); }
html[dir="rtl"] .one-brain { background: radial-gradient(30rem 14rem at 85% 50%, rgba(34, 228, 255, .10), transparent 70%), var(--glass); }
.one-brain .strong { font-family: var(--font-display); font-weight: 700; letter-spacing: .02em; color: #fff; }
html[lang="ar"] .one-brain .strong { font-family: var(--font-ar); letter-spacing: 0; }
.bodies { position: relative; }
.bodies::after { content: ""; position: absolute; inset-inline: 8%; bottom: -6px; height: 12px; border-radius: 50%; border: 2px solid rgba(34, 228, 255, .8); box-shadow: 0 0 18px var(--cyan); opacity: .7; }
.bodies svg { filter: drop-shadow(0 0 10px rgba(34, 228, 255, .55)); }

/* ---------- use cases ---------- */
.uc-card:nth-child(3n+2) { --c: var(--violet); } .uc-card:nth-child(3n+3) { --c: var(--magenta); }
.uc-card { border-top: 2px solid color-mix(in srgb, var(--c) 75%, transparent); }
.uc-card h3 { text-shadow: 0 0 12px color-mix(in srgb, var(--c) 60%, transparent); }
.uc-card p { color: #c8d2ea; }
.suggest { color: #c9b9ff; }
.uc-card:hover { border-color: color-mix(in srgb, var(--c) 60%, transparent); box-shadow: 0 0 28px color-mix(in srgb, var(--c) 22%, transparent), 0 20px 50px rgba(0, 0, 0, .35); }

/* ---------- how it works ---------- */
.steps li { position: relative; }
.steps p { color: #e4eaf8; }
.step-n { background: rgba(34, 228, 255, .1); color: var(--cyan); border: 1px solid var(--cyan); box-shadow: 0 0 14px rgba(34, 228, 255, .5), inset 0 0 10px rgba(34, 228, 255, .3); font-family: var(--font-display); font-weight: 700; }
.fees-note { margin: 0 0 1rem; padding: .75rem 1rem; border-radius: 6px; border: 1px solid rgba(34, 228, 255, .45); border-inline-start: 3px solid var(--cyan); background: rgba(34, 228, 255, .06); color: #e4eaf8; font-weight: 600; }
@media (min-width: 900px) {
  /* a light rail joining the four steps */
  .steps { position: relative; }
  .steps::before { content: ""; position: absolute; inset-inline: 2.1rem; top: 2.05rem; height: 1px; background: linear-gradient(90deg, rgba(34, 228, 255, .6), rgba(165, 139, 255, .6), rgba(255, 90, 217, .6)); z-index: 0; }
  .steps li { z-index: 1; }
}

/* ---------- trust strip ---------- */
.trust { position: relative; z-index: 1; background: rgba(10, 13, 32, .72); border-block: 0; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.trust::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(165, 139, 255, .4), transparent); }
.trust-list li { color: #e4eaf8; }
.trust-list svg { color: #5bff9c; filter: drop-shadow(0 0 6px rgba(91, 255, 156, .7)); }
.trust-list .tbc { color: var(--ph-ink); }
.trust-list .tbc svg { color: var(--ph); filter: none; }

/* ---------- gallery ---------- */
.gallery li:nth-child(2) { --c: var(--violet); } .gallery li:nth-child(3) { --c: var(--magenta); }
.gallery .media { background: radial-gradient(70% 45% at 50% 100%, color-mix(in srgb, var(--c, var(--cyan)) 22%, transparent), transparent 70%), linear-gradient(180deg, rgba(10, 14, 34, .85), rgba(5, 7, 18, .92)); }
.gallery figcaption { position: relative; z-index: 5; background: rgba(5, 7, 18, .85); border-top: 1px solid var(--line); }
.scene .ph-art, .scene-2 .ph-art, .scene-3 .ph-art { background: none; }
.gallery .media::after { display: none; } /* the base ring would sit on the caption */

/* ---------- FAQ: the MD's 16 questions, one flat list ---------- */
.faq-list { display: grid; gap: .6rem; margin-top: 1.75rem; }
.faq-item { border: 1px solid var(--line); border-radius: 8px; background: rgba(12, 16, 40, .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: border-color .25s, box-shadow .25s; }
.faq-item:has(button[aria-expanded="true"]) { border-color: rgba(34, 228, 255, .5); box-shadow: 0 0 24px rgba(34, 228, 255, .12), inset 3px 0 0 var(--cyan); }
html[dir="rtl"] .faq-item:has(button[aria-expanded="true"]) { box-shadow: 0 0 24px rgba(34, 228, 255, .12), inset -3px 0 0 var(--cyan); }
.faq-item h3 { margin: 0; font-family: var(--font); font-size: 1.02rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
html[lang="ar"] .faq-item h3 { font-family: var(--font-ar); font-size: 1.08rem; font-weight: 700; }
.faq-item button { padding: .95rem 1rem; justify-content: flex-start; }
.faq-item button:hover { color: #fff; }
.faq-item button:hover .faq-n { text-shadow: 0 0 12px var(--cyan); }
.faq-n { flex: 0 0 auto; min-width: 1.9rem; font-family: var(--font-display); font-weight: 700; font-size: .85rem; color: var(--cyan); opacity: .85; letter-spacing: .04em; }
.faq-q { flex: 1 1 auto; min-width: 0; }
.faq-item button svg { color: var(--cyan); margin-inline-start: auto; }
.faq-a { padding-block: 0 .2rem; padding-inline: calc(1rem + 1.9rem + 1rem) 1rem; }
@media (max-width: 640px) { .faq-a { padding-inline: 1rem; } }
.faq-a p { color: #c8d2ea; }
.faq-more a { text-shadow: 0 0 10px rgba(34, 228, 255, .35); }

/* ---------- contact + form fields (also used in the quote flow) ---------- */
.contact-side { --k: 14px; }
input[type="text"], input[type="tel"], input[type="email"], input[type="date"], input[type="number"], select, textarea {
  border-radius: 6px; border: 1px solid rgba(140, 180, 255, .32); background: rgba(6, 9, 24, .78); transition: border-color .2s, box-shadow .2s;
}
input:hover, select:hover, textarea:hover { border-color: rgba(34, 228, 255, .6); }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan), 0 0 18px rgba(34, 228, 255, .35); }
[aria-invalid="true"]:not([type="radio"]):not([type="checkbox"]) { border-color: var(--err); box-shadow: 0 0 12px rgba(252, 165, 165, .25); }
.check input, .choice input { accent-color: var(--cyan); }
label, legend { color: #e4eaf8; }

/* ---------- final call to action ---------- */
.final { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(40rem 20rem at 50% 0%, rgba(34, 228, 255, .14), transparent 70%), rgba(8, 10, 26, .6); border-top: 0; }
.final::after {
  content: ""; position: absolute; z-index: -1; inset-inline: -40%; bottom: -2px; height: 70%;
  background-image: linear-gradient(rgba(34, 228, 255, .28) 1px, transparent 1px), linear-gradient(90deg, rgba(165, 139, 255, .24) 1px, transparent 1px);
  background-size: 56px 56px; transform: perspective(420px) rotateX(64deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000, transparent 80%); mask-image: linear-gradient(to top, #000, transparent 80%);
  animation: sf-grid 3.6s linear infinite;
}
.final h2 { background: linear-gradient(100deg, #fff, #a5f3ff 50%, #e2d9ff); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 18px rgba(34, 228, 255, .25)); }
.final .lead { color: #d3dcf3; }

/* ---------- footer ---------- */
.site-footer { background: rgba(4, 5, 14, .82); border-top: 0; }
.site-footer .logo { display: inline-block; }
.footer-contact a, .footer-links a { color: #dbe3f5; text-decoration-color: rgba(34, 228, 255, .4); transition: color .2s, text-shadow .2s; }
.footer-contact a:hover, .footer-links a:hover { color: var(--cyan); text-shadow: 0 0 10px rgba(34, 228, 255, .6); }
.footer-bottom { border-top-color: rgba(140, 180, 255, .16); }

/* ---------- mobile menu ---------- */
.site-nav.open { border-bottom: 1px solid rgba(34, 228, 255, .35); box-shadow: 0 18px 40px rgba(0, 0, 0, .55), 0 1px 0 rgba(165, 139, 255, .4); padding-block: .4rem 1rem; }
.site-nav.open a { padding-block: .7rem; border-bottom: 1px solid rgba(140, 180, 255, .12); font-family: var(--font-orbitron); font-weight: 500; font-size: .92rem; letter-spacing: .08em; text-transform: uppercase; }
html[lang="ar"] .site-nav.open a { font-family: var(--font-ar); font-weight: 700; font-size: 1.05rem; letter-spacing: 0; text-transform: none; }
.site-nav.open li:last-child a { border-bottom: 0; }
.site-nav.open a::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-inline-end: .7rem; vertical-align: middle; border: 1px solid var(--cyan); transform: rotate(45deg); box-shadow: 0 0 6px var(--cyan); }
.menu-btn[aria-expanded="true"] { border-color: var(--cyan); box-shadow: 0 0 14px rgba(34, 228, 255, .45); }

/* ---------- dialogs: quote flow and talk panel ---------- */
dialog.modal { background: linear-gradient(180deg, rgba(16, 21, 50, .97), rgba(7, 9, 24, .98)); border: 1px solid rgba(34, 228, 255, .4); border-radius: 12px; box-shadow: 0 0 0 1px rgba(165, 139, 255, .18), 0 0 60px rgba(34, 228, 255, .16), 0 30px 80px rgba(0, 0, 0, .6); }
dialog.modal::backdrop { background: rgba(2, 3, 10, .78); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
dialog.modal::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--cyan), var(--violet), var(--magenta)); box-shadow: 0 0 14px rgba(165, 139, 255, .8); z-index: 2; }
.modal-close { border-color: rgba(140, 180, 255, .35); background: rgba(255, 255, 255, .04); transition: border-color .2s, box-shadow .2s; }
.modal-close:hover { border-color: var(--cyan); box-shadow: 0 0 14px rgba(34, 228, 255, .45); }
.flow-title { font-size: 1.15rem; letter-spacing: .04em; }
.bar { background: rgba(140, 180, 255, .12); height: 6px; }
.bar span { background: linear-gradient(90deg, var(--cyan), var(--violet)); box-shadow: 0 0 12px rgba(34, 228, 255, .8); }
html[dir="rtl"] .bar span { background: linear-gradient(-90deg, var(--cyan), var(--violet)); }
.progress-label { font-family: var(--font-orbitron); font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
html[lang="ar"] .progress-label { font-family: var(--font-ar); font-size: .95rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
.q { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; letter-spacing: .02em; text-transform: none; color: #fff; }
html[lang="ar"] .q { font-family: var(--font-ar); font-weight: 800; letter-spacing: 0; font-size: 1.2rem; }
.choice { border-radius: 6px; border: 1px solid rgba(140, 180, 255, .3); background: rgba(6, 9, 24, .7); transition: border-color .2s, box-shadow .2s, background-color .2s; }
.choice:hover { border-color: rgba(34, 228, 255, .6); }
.choice:has(input:checked) { border-color: var(--cyan); background: rgba(34, 228, 255, .1); box-shadow: 0 0 16px rgba(34, 228, 255, .25), inset 0 0 12px rgba(34, 228, 255, .08); }
.qty-btn { border-radius: 6px; border-color: rgba(140, 180, 255, .35); background: rgba(255, 255, 255, .04); }
.qty-btn:hover { border-color: var(--cyan); box-shadow: 0 0 12px rgba(34, 228, 255, .4); }
.computed { color: var(--cyan); text-shadow: 0 0 10px rgba(34, 228, 255, .45); }
.price-note { border-radius: 6px; background: rgba(34, 228, 255, .06); border-color: rgba(34, 228, 255, .4); }
.or::before, .or::after { background: linear-gradient(90deg, transparent, rgba(140, 180, 255, .35), transparent); }
.sum-row { border-bottom-color: rgba(140, 180, 255, .16); }
.sum-row dt { color: var(--cyan); font-size: .84rem; letter-spacing: .04em; }
.link-btn { color: var(--cyan); }
.flow-nav { border-top-color: rgba(140, 180, 255, .2); }
.step[data-step="done"] .q { background: linear-gradient(100deg, #fff, #a5f3ff 50%, #e2d9ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.media-talk { --k: 18px; }
.bubble-inline { background: rgba(10, 14, 34, .72); border: 1px solid rgba(165, 139, 255, .5); border-radius: 8px; box-shadow: 0 0 20px rgba(165, 139, 255, .2); }
.modal-inner .note { color: var(--ph-ink); }
@media (max-width: 640px) {
  .flow-nav { background: linear-gradient(180deg, rgba(10, 12, 30, .9), rgba(7, 9, 24, .98)); }
  dialog.modal { border-inline: 0; }
}

@media (min-width: 900px) {
  .hero { padding: 4.5rem 0 6rem; }
}
/* wide header, narrow desktop: keep one line (Arabic labels run longer); the call button keeps its label for screen readers */
@media (min-width: 400px) { .header-actions { gap: 8px; } }
@media (min-width: 1100px) and (max-width: 1359px) {
  .site-nav ul { gap: .95rem; }
  .site-nav a { font-size: .9rem; }
  html[lang="ar"] .phone-text { display: none; }
}
@media (max-width: 499.98px) {
  .header-row { padding-inline: 1rem; }
  .logo { letter-spacing: 0; font-size: 1.05rem; }
  .btn-sm { letter-spacing: 0; }
}
/* Small phones (bug #79): every header item keeps an 8px gap down to 320px, EN and AR. Below 500px the call
   icon goes (the number stays in the contact section and footer); below 360px the WhatsApp icon goes too,
   because the floating WhatsApp button is on screen at all times at that size. Bug #136: the full-size header
   with the call icon needs about 477px in Arabic, so the compact header runs up to 499.98px (it was 399.98px,
   which overflowed 400-476px), and the call icon is matched by its tel: link, as the launch build drops data-href. */
@media (max-width: 499.98px) {
  .header-row { padding-inline: .75rem; gap: 8px; }
  .header-actions { gap: 8px; }
  .header-actions a[href^="tel:"] { display: none; }
  .logo { font-size: 1rem; }
  .icon-btn, .lang-btn, .menu-btn { min-width: 38px; height: 38px; min-height: 38px; padding: 0 .5rem; }
  .menu-btn { width: 38px; }
  .btn-sm { padding: .35rem .7rem; font-size: .84rem; min-height: 38px; }
}
@media (max-width: 359.98px) {
  .header-row { padding-inline: .6rem; }
  .header-actions .icon-btn.wa { display: none; }
  .logo { font-size: .95rem; }
}

@media (max-width: 420px) {
  /* three drawn machines in "one brain": shrink to fit 320px (they were 278px wide plus padding) */
  .one-brain { padding: 1.1rem; }
  .bodies { height: 132px; gap: .6rem; }
  .bodies svg { min-width: 0; }
}
@media (max-width: 640px) {
  .hero::after { height: 34%; background-size: 40px 40px; }
  .hero::before { bottom: 33%; }
  .eyebrow { font-size: .85rem; letter-spacing: .1em; }
}
@media (prefers-reduced-motion: reduce) {
  .sf-on .sf-reveal { opacity: 1; }
  .btn:hover::after, .machine:hover::after { transform: translateX(-120%); }
  .machine:hover, .btn-primary:hover { transform: none; }
}
@media print {
  /* print shows everything, even sections not yet scrolled into view; no starfield or veil */
  .sf-on .sf-reveal { opacity: 1 !important; animation: none !important; }
  .sf-stars, body::after { display: none; }
}
@media (forced-colors: active) {
  .hero h1, .logo { color: CanvasText; background: none; filter: none; }
}

/* faceOS v4 blog layer: teaser, index and article in the v3 sci-fi style (glass cards, HUD corners, glow).
   Loaded after scifi.css. Logical properties only, so Arabic (dir=rtl) mirrors. */

/* one page, three views: in the blog views every home section is hidden and #blog-view shows */
html.blog-mode main > :not(#blog-view) { display: none !important; }
#blog-view { padding: 2.5rem 0 4.5rem; min-height: 70vh; }
#blog-view[hidden] { display: none; }
.site-nav a[aria-current="page"], .footer-links a[aria-current="page"] { color: var(--cyan); text-shadow: 0 0 12px rgba(34, 228, 255, .7); }

/* ---------- cards (teaser + index) ---------- */
ul.blog-cards[role="list"] { margin: 1.75rem 0 1.25rem; }
.blog-card { padding: 0 0 1.25rem; gap: .55rem; }
.blog-card > :not(.blog-card-cover) { margin-inline: 1.25rem; }
.blog-card-cover { display: block; text-decoration: none; }
.blog-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--c) 70%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent), 0 0 34px color-mix(in srgb, var(--c) 26%, transparent), 0 24px 60px rgba(0, 0, 0, .45); }
.blog-cat { margin-top: .8rem; margin-bottom: 0; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c, var(--cyan)); text-shadow: 0 0 10px color-mix(in srgb, var(--c, var(--cyan)) 60%, transparent); }
html[lang="ar"] .blog-cat { font-size: .92rem; letter-spacing: 0; text-transform: none; }
.blog-card .blog-card-title { margin-block: 0; font-family: var(--font-display); font-size: 1.08rem; line-height: 1.35; letter-spacing: .02em; text-transform: none; }
html[lang="ar"] .blog-card .blog-card-title { font-family: var(--font-ar); font-size: 1.2rem; font-weight: 800; letter-spacing: 0; line-height: 1.5; }
.blog-card-title a { color: #fff; text-decoration: none; }
.blog-card-title a:hover { color: #a5f3ff; text-shadow: 0 0 12px rgba(34, 228, 255, .5); }
.blog-sum { margin-block: 0; color: #c8d2ea; }
.blog-meta { margin-block: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .55rem; color: #a9b5d4; font-size: .86rem; }
.blog-meta .dot { color: var(--c, var(--cyan)); }
.blog-card .blog-read { margin-top: auto; align-self: flex-start; }
.blog-card > .blog-meta { margin-bottom: .35rem; }
#blog-teaser .helper { margin: 0; }
#blog-teaser .helper a::after { content: " →"; }
html[dir="rtl"] #blog-teaser .helper a::after { content: " ←"; }

/* ---------- covers: drawn sample art in a hologram frame ---------- */
.blog-cover { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  background: radial-gradient(80% 70% at 50% 100%, color-mix(in srgb, var(--c) 26%, transparent), transparent 70%), radial-gradient(60% 60% at 85% 10%, color-mix(in srgb, var(--c2) 22%, transparent), transparent 70%), linear-gradient(180deg, #0a0e24, #05060f); }
.blog-cover .bc-art, .blog-cover .bc-art svg, .blog-cover img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.blog-cover svg { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c) 70%, transparent)); }
/* scan lines over the art, like the machine frames */
.blog-cover::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(180, 240, 255, .06) 0 1px, transparent 1px 4px); }
.blog-cover.has-media::after { display: none; }
/* own class, not .ph-tag: the v3 tests count .ph-tag as the page's 'Sample visual' labels; same look */
.bc-tag { position: absolute; z-index: 5; top: .6rem; inset-inline-start: .6rem; margin: 0; background: rgba(5, 7, 18, .9); backdrop-filter: blur(4px); color: var(--ph-ink); border: 1px solid rgba(251, 191, 36, .6); border-radius: 999px; padding: .2rem .65rem; font-size: .78rem; font-weight: 700; }
.blog-cover-lg { border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); border-radius: var(--radius); margin: 1.5rem 0 2rem; box-shadow: 0 0 50px color-mix(in srgb, var(--c) 14%, transparent); }

/* ---------- index ---------- */
.blog-index h1, .blog-article h1 { margin: .4rem 0 .9rem; background: linear-gradient(100deg, #fff, #a5f3ff 50%, #e2d9ff); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 18px rgba(34, 228, 255, .22)); }
.blog-index h1:focus, .blog-article h1:focus { outline: none; }
.blog-index .lead { max-width: 46rem; }
.blog-note { padding: .75rem 1rem; border-radius: 6px; border: 1px solid rgba(251, 191, 36, .6); background: rgba(251, 191, 36, .07); color: var(--ph-ink); }

/* ---------- article ---------- */
.blog-crumbs { margin-bottom: 1.25rem; }
.blog-back { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; text-decoration: none; letter-spacing: .02em; text-shadow: 0 0 10px rgba(34, 228, 255, .35); }
.blog-back:hover { text-decoration: underline; }
.blog-back .arrow { display: inline-block; }
html[dir="rtl"] .blog-back .arrow { transform: scaleX(-1); }
.blog-head .blog-cat { margin-top: 0; }
.blog-article h1 { font-size: clamp(1.55rem, 3vw, 2.4rem); line-height: 1.22; }
html[lang="ar"] .blog-article h1 { line-height: 1.45; }
.blog-head .blog-meta { font-size: .92rem; }
.blog-body { font-size: 1.06rem; line-height: 1.75; color: #dbe3f5; }
html[lang="ar"] .blog-body { font-size: 1.12rem; line-height: 1.9; }
.blog-body h2 { margin: 2.2rem 0 .8rem; font-size: clamp(1.15rem, 2vw, 1.45rem); color: #fff; text-shadow: 0 0 14px rgba(34, 228, 255, .3); }
.blog-body h2::before { content: ""; display: block; width: 46px; height: 2px; margin-bottom: .7rem; background: linear-gradient(90deg, var(--cyan), var(--violet)); box-shadow: 0 0 10px rgba(165, 139, 255, .7); }
html[dir="rtl"] .blog-body h2::before { background: linear-gradient(-90deg, var(--cyan), var(--violet)); }
.blog-body p { margin: 0 0 1.05rem; }
.blog-body ul { margin: 0 0 1.2rem; padding-inline-start: 1.3rem; }
.blog-body li { margin-bottom: .45rem; }
.blog-body li::marker { color: var(--cyan); }
.blog-body strong { color: #fff; }
.blog-body a, .blog-sources a, .blog-related a { text-underline-offset: 3px; text-decoration-color: rgba(34, 228, 255, .5); overflow-wrap: anywhere; }
a.ext::after { content: "↗"; display: inline-block; margin-inline-start: .2em; font-size: .85em; }
a.ext:dir(rtl)::after { transform: scaleX(-1); }

/* sources, related links, CTA: glass panels */
.blog-sources, .blog-related, .blog-cta { --c: var(--cyan); margin-top: 2rem; padding: 1.25rem 1.4rem; background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 18px 44px rgba(0, 0, 0, .32); }
.blog-sources h2, .blog-related h2 { margin: 0 0 .5rem; font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); }
html[lang="ar"] .blog-sources h2, html[lang="ar"] .blog-related h2 { font-size: 1.15rem; letter-spacing: 0; }
.blog-sources ol { margin: .5rem 0 0; padding-inline-start: 1.3rem; display: grid; gap: .45rem; }
.blog-sources .small { margin: 0; }
.blog-related ul[role="list"] { margin: .6rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .55rem; }
.blog-related li a { display: inline-block; padding: .4rem .85rem; border: 1px solid rgba(34, 228, 255, .45); border-radius: 999px; background: rgba(34, 228, 255, .06); text-decoration: none; font-weight: 600; font-size: .92rem; }
.blog-related li a:hover { border-color: var(--cyan); box-shadow: 0 0 14px rgba(34, 228, 255, .35); }
.blog-cta { --c: var(--violet); --k: 18px; border-color: rgba(34, 228, 255, .55); background: radial-gradient(28rem 12rem at 15% 0%, rgba(34, 228, 255, .14), transparent 70%), radial-gradient(24rem 12rem at 100% 100%, rgba(255, 90, 217, .1), transparent 70%), var(--glass); box-shadow: 0 0 40px rgba(34, 228, 255, .14), 0 20px 50px rgba(0, 0, 0, .35); padding: 1.6rem 1.6rem 1.75rem; }
.blog-cta h2 { margin: 0 0 .5rem; font-size: clamp(1.2rem, 2.2vw, 1.55rem); }
.blog-cta p { margin: 0 0 1.1rem; color: #d3dcf3; max-width: 40rem; }

/* newer / older */
.blog-pager { display: grid; gap: .8rem; margin-top: 2rem; }
@media (min-width: 640px) { .blog-pager { grid-template-columns: 1fr 1fr; } .blog-pager-older:only-child { grid-column: 2; } }
.blog-pager a { display: flex; flex-direction: column; gap: .25rem; padding: .9rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(12, 16, 40, .55); text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.blog-pager a:hover { border-color: rgba(34, 228, 255, .6); box-shadow: 0 0 22px rgba(34, 228, 255, .15); }
.blog-pager-older { text-align: end; }
.blog-pager .small { color: var(--cyan); text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; font-weight: 700; }
html[lang="ar"] .blog-pager .small { text-transform: none; letter-spacing: 0; font-size: .9rem; }
.blog-pager-title { color: #fff; font-weight: 600; line-height: 1.4; }
.blog-back-end { margin: 2rem 0 0; }

@media (max-width: 640px) {
  #blog-view { padding-top: 1.5rem; }
  .blog-sources, .blog-related, .blog-cta { padding: 1.1rem 1rem; }
  .blog-cover-lg { margin: 1rem 0 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { .blog-card:hover { transform: none; } }
@media print {
  .blog-cover::after { display: none; }
  .blog-cta .btn, .blog-pager { display: none; }
}

/* the extra "Blog" item: on narrow desktops (1100-1239px) the one-line header needs ~20px more, so the nav
   gaps tighten a little there (v3 uses .95rem from 1100 to 1359px) */
@media (min-width: 1100px) and (max-width: 1239.98px) { .site-nav ul { gap: .62rem; } .site-nav { margin-inline-start: .6rem; } }
.blog-figure { margin: 1.6rem 0; }
.blog-figure img { display: block; max-width: 100%; height: auto; border-radius: 12px; border: 1px solid rgba(34, 228, 255, .25); }

/* faceOS launch layer: what the live site adds to the approved v4 look (language link, form states, honeypot,
   privacy page, 404). Loaded last. Logical properties only, so Arabic (dir=rtl) mirrors. */

/* the language switch is now a link to the other language's page; same look as the old button */
a.lang-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
a.lang-btn:hover { color: var(--text); }

/* form status line: sending / sent / not sent, with WhatsApp and e-mail as the way out */
.form-status { margin: .9rem 0 0; }
.form-status-msg { margin: 0; font-weight: 600; }
.form-status-msg:empty { display: none; }
.form-status.is-sending .form-status-msg { color: var(--muted, #a8b3c7); }
.form-status.is-sent .form-status-msg { color: #5bff9c; text-shadow: 0 0 10px rgba(91, 255, 156, .35); }
.form-status.is-failed .form-status-msg, .form-status.is-not_ready .form-status-msg { color: #ffc75a; }
.form-status-msg:focus { outline: 2px solid var(--cyan, #22e4ff); outline-offset: 3px; border-radius: 4px; }
.form-fallback { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0 0; }
.form-fallback[hidden] { display: none; }
#quote .form-status { margin: .75rem 0 0; }
button[aria-disabled="true"] { opacity: .7; cursor: progress; }

/* honeypot: off-screen for people, still in the form for bots */
.hp { position: absolute; inset-inline-start: -10000px; inset-block-start: auto; width: 1px; height: 1px; overflow: hidden; }

/* avatar panel: two clear choices */
#talk .talk-body { margin: 1rem 0 0; }

/* privacy page: the draft markers must stay impossible to miss until legal signs off */
.privacy-article h1 { margin-top: .4rem; }
.privacy-draft { margin: 1rem 0 1.5rem; padding: .7rem 1rem; border: 1px dashed rgba(255, 199, 90, .7); border-radius: 10px; color: #ffd98a; background: rgba(255, 199, 90, .08); font-weight: 600; }
mark.tbc { background: rgba(255, 199, 90, .18); color: #ffd98a; border-bottom: 1px dashed rgba(255, 199, 90, .8); padding: 0 .2em; border-radius: 3px; }

/* 404 */
.nf { text-align: center; padding-block: 3rem 4rem; }
.nf .nf-code { font-family: var(--font-display); font-size: clamp(3.5rem, 12vw, 7rem); line-height: 1; margin: 0 0 1rem; color: #fff; text-shadow: 0 0 24px rgba(34, 228, 255, .6), 0 0 60px rgba(165, 139, 255, .45); }
.nf .nf-lang { margin-top: 2.25rem; }
.nf [lang="ar"], .nf [lang="ar"] .btn { font-family: var(--font-ar); letter-spacing: 0; text-transform: none; }
.nf .cta-row { justify-content: center; }

/* floating WhatsApp button (phones only: it is hidden from 800px): smaller and nearer the corner, and it slides
   away while the visitor scrolls down to read, coming back on scroll up, near the top and at the end of the page */
@media (max-width: 799.98px) {
  .wa-float { width: 48px; height: 48px; bottom: .75rem; inset-inline-end: .75rem; transition: transform .2s ease, opacity .2s ease; }
  .wa-float svg { width: 26px; height: 26px; }
  .wa-float.is-tucked { transform: translateY(calc(100% + 1rem)); opacity: 0; pointer-events: none; }
  .wa-float.is-tucked:focus-visible { transform: none; opacity: 1; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) { .wa-float { transition: none; } }

@media print {
  .hp, .form-fallback { display: none !important; }
}

.cv-uae-gcc-ai-vision { --c: #22e4ff; --c2: #a58bff; }
.cv-dubai-abu-dhabi-customer-interaction { --c: #ff5ad9; --c2: #22e4ff; }
.cv-holobox-vs-2d-screen { --c: #a58bff; --c2: #22e4ff; }
.cv-rent-hologram-avatar-dubai { --c: #22e4ff; --c2: #5bff9c; }
.cv-avatars-exhibitions-trade-shows { --c: #ffc75a; --c2: #ff5ad9; }
.cv-digital-receptionist-hospitality { --c: #5bff9c; --c2: #22e4ff; }
.cv-avatars-real-estate-sales-centres { --c: #a58bff; --c2: #ffc75a; }
.cv-bilingual-arabic-english-avatars { --c: #22e4ff; --c2: #ff5ad9; }
.cv-digital-twin-brand-ambassador { --c: #ff5ad9; --c2: #a58bff; }
.cv-privacy-opt-in-face-recognition { --c: #5bff9c; --c2: #a58bff; }