/* ============================================================================
   site.css - تنسيق الصفحة التعريفية لنظام AI-ENG ITSM (هوية الذهبي والأسود، مظهر فاتح وغامق)
   EN: Styles of the AI-ENG ITSM product page (gold-and-black identity, light and dark themes)
   ----------------------------------------------------------------------------
   قاعدة 8: لا تدرّج لوني - ألوان مصمتة فقط. الأخضر للحالة "متاح" وحدها، والذهبي للهوية و"قادم".
   أخضر واتساب لزر واتساب وحده (هوية معروفة لا زينة). الحركة تُلغى لمن يفضّل تقليلها.
   ============================================================================ */

:root {
  --gold: #C9A227; --gold-d: #A3821B; --gold-l: #E6C75A;
  --ink: #141311; --ok: #0E7A3E; --wa: #25D366; --wa-d: #128C7E;
  --bg: #F7F6F2; --bg-2: #EFEDE6; --card: #FFFFFF; --text: #1F2328; --muted: #5F6672; --border: #E2DFD6;
  --hero-bg: #141311; --hero-text: #F3F1EC; --hero-muted: #B3AEA2; --hero-card: #1E1C18; --hero-border: #34302A;
  --shadow: 0 1px 2px rgba(20, 19, 17, .06), 0 6px 20px rgba(20, 19, 17, .06);
  --radius: 14px; --wrap: 1180px;
}
html[data-theme="dark"] {
  --bg: #0D0D0C; --bg-2: #151513; --card: #1A1A18; --text: #F3F1EC; --muted: #B3AEA2; --border: #2E2C27;
  --hero-bg: #080807; --hero-card: #171614; --ok: #2FB36A;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; font-family: "Cairo", system-ui, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); line-height: 1.75; font-size: 16px; }
a { color: inherit; }
img, svg { max-width: 100%; }
.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.mono, [dir="ltr"] { font-family: ui-monospace, Consolas, "Segoe UI", monospace; }
.skip { position: absolute; inset-inline-start: -999px; top: 8px; background: var(--gold); color: var(--ink); padding: .4rem .8rem; border-radius: 8px; z-index: 100; }
.skip:focus { inset-inline-start: 8px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 6px; }

/* ---------------- الأزرار ---------------- */
.btn { display: inline-flex; align-items: center; gap: .5rem; border: 2px solid transparent; border-radius: 999px; padding: .65rem 1.3rem;
       font: inherit; font-weight: 800; text-decoration: none; cursor: pointer; transition: transform .15s, background-color .15s, border-color .15s; }
.btn:hover { transform: translateY(-1px); }
.btn-sm { padding: .35rem .9rem; font-size: .9rem; }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--gold-l); }
.btn-ghost { border-color: currentColor; color: inherit; background: transparent; }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn-wa { background: var(--wa); color: #08321A; }
.btn-wa:hover { background: #3BE07A; }
.icon-btn { width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: 10px; border: 1px solid var(--border);
            background: var(--card); color: var(--text); cursor: pointer; font: inherit; font-weight: 800; font-size: .85rem; }
.icon-btn:hover { border-color: var(--gold); color: var(--gold-d); }

/* ---------------- الهيدر ---------------- */
.topbar { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--border); }
.topbar.scrolled { box-shadow: var(--shadow); }
.topbar-in { display: flex; align-items: center; gap: 1rem; min-height: 68px; }
.brand { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.brand .logo-img img { height: 40px; }
.nav { display: flex; gap: .15rem; margin-inline-start: auto; flex-wrap: wrap; }
.nav a { text-decoration: none; color: var(--muted); font-weight: 700; font-size: .92rem; padding: .35rem .5rem; border-radius: 8px; }
.nav a:hover, .nav a.active { color: var(--text); background: var(--bg-2); }
.nav a.active { box-shadow: inset 0 -2px 0 var(--gold); }
.tools { display: flex; align-items: center; gap: .4rem; }
.burger { display: none; }

/* الشعار صورة (logoImg): الفاتحة للمظهر الفاتح، والداكنة (حروف AI فاتحة) للغامق وللتذييل الداكن دائماً */
.logo-img { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; direction: ltr; }
.logo-img picture { display: block; line-height: 0; flex: 0 0 auto; }
.logo-img img { height: 40px; width: auto; max-width: none; display: block; }   /* عرضه من نسبته لا من عرض السطر تحته */
.logo-img .logo-dark { display: none; }
html[data-theme="dark"] .logo-img .logo-light { display: none; }
html[data-theme="dark"] .logo-img .logo-dark, .footer .logo-img .logo-dark { display: block; }
.logo-sub { color: var(--muted); font: 700 10px/1.2 "Segoe UI", Arial, sans-serif; letter-spacing: 4px; margin-top: 4px; }

/* ---------------- الواجهة الرئيسية (Hero): لوحة هندسية فنية حية ----------------
   ثلاث طبقات بعمق يتبع الفأرة (--mx / --my بين -1 و1 يضبطهما site.js): مسارات دوائر ترسم نفسها وتسري عليها نبضات ضوء،
   حلقة هندسية دوّارة بمسح راداري خلف بطاقة الرحلة، وبطاقة تميل بثلاثة أبعاد وخطواتها تضيء تباعاً.
   الضوء توهج ذهبي مصمت (ظلال ومرشح SVG) لا تدرّج - قاعدة 8. */
.hero { --mx: 0; --my: 0; background: var(--hero-bg); color: var(--hero-text); position: relative; overflow: hidden; }
.hero-in { display: grid; grid-template-columns: 1.15fr .85fr; gap: 2.5rem; align-items: center; padding: 4.5rem 0 4rem; position: relative; z-index: 1; }
.hero-art { position: absolute; inset: -20px; pointer-events: none; transition: transform .6s cubic-bezier(.2, .7, .2, 1);
            transform: translate(calc(var(--mx) * -14px), calc(var(--my) * -10px)); }
.hero-art .trace { fill: none; stroke: #3B3426; stroke-width: 2; stroke-dasharray: var(--len); stroke-dashoffset: var(--len);
                   animation: hero-draw 2.4s cubic-bezier(.6, 0, .2, 1) forwards; animation-delay: calc(var(--i) * .18s); }
.hero-art .node { fill: #141311; stroke: var(--gold); stroke-width: 2; opacity: 0; animation: hero-node-in .4s forwards, hero-blink 3.2s ease-in-out infinite;
                  animation-delay: calc(2s + var(--i) * .18s), calc(2.4s + var(--i) * .37s); }
.hero-art .pulse { fill: var(--gold-l); }
.hero-art .pulse.alt { fill: #FFF4CC; }
@keyframes hero-draw { to { stroke-dashoffset: 0; } }
@keyframes hero-node-in { to { opacity: 1; } }
@keyframes hero-blink { 0%, 100% { fill: #141311; } 50% { fill: var(--gold); } }

.badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.badge { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--hero-border); border-radius: 999px; padding: .2rem .75rem;
         font-size: .85rem; font-weight: 700; color: var(--hero-text); background: var(--hero-card); cursor: default;
         transition: border-color .25s, box-shadow .25s, transform .25s; }
.badge i { color: var(--gold); transition: transform .4s; }
.badge:hover { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 162, 39, .15), 0 0 18px rgba(201, 162, 39, .35); transform: translateY(-2px); }
.badge:hover i { transform: rotate(-14deg) scale(1.2); }

/* بطاقتا الهوية فوق العنوان: نظام ITSM + مفتوح المصدر (أبرز ما في الواجهة بعد العنوان) */
.hero-ids { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1.1rem; }
.hero-id { display: flex; align-items: center; gap: .8rem; padding: .75rem .95rem; border-radius: 14px; border: 1.5px solid var(--gold);
           background: var(--hero-card); color: var(--hero-text); text-decoration: none; transition: transform .25s, box-shadow .25s; }
.hero-id:hover, .hero-id:focus-visible { transform: translateY(-3px); box-shadow: 0 0 0 3px rgba(201, 162, 39, .18), 0 0 26px rgba(201, 162, 39, .4); }
.hero-id-ic { width: 48px; height: 48px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; background: var(--gold); color: var(--ink); font-size: 1.45rem; }
.hero-id.oss .hero-id-ic { background: transparent; color: var(--gold); border: 2px solid var(--gold); }
.hero-id-txt { display: grid; line-height: 1.4; min-width: 0; }
.hero-id-mark { font-family: ui-monospace, Consolas, monospace; font-weight: 900; letter-spacing: .2em; font-size: .7rem; color: var(--gold); }
.hero-id b { font-size: 1.08rem; font-weight: 900; }
.hero-id small { color: var(--hero-muted); font-size: .8rem; }
.hero h1 .w.hl { color: var(--gold-l); text-shadow: 0 0 18px rgba(201, 162, 39, .45); }

/* الشارة بجوار الشعار في الهيدر: مفتوح المصدر (الشعار يقول SMART · ITSM) */
.brand-tag { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid var(--gold); color: var(--gold-d); border-radius: 999px;
             padding: .12rem .6rem; font-weight: 800; font-size: .76rem; white-space: nowrap; flex-shrink: 0; }
html[data-theme="dark"] .brand-tag { color: var(--gold); }
.brand-tag[hidden] { display: none; }   /* fitBrandTag: تُخفى إن دفعت روابط القائمة إلى سطر ثانٍ */
@media (max-width: 1100px) { .brand-tag { display: none; } }
@media (max-width: 560px) { .hero-ids { grid-template-columns: 1fr; } }

/* العنوان: الكلمات تصعد تباعاً، والعبارة الذهبية تتوهج ويُرسم تحتها خط */
.hero h1 { font-size: clamp(1.9rem, 4.2vw, 3.1rem); line-height: 1.3; margin: 0 0 1rem; font-weight: 900; }
.hero h1 .w { display: inline-block; opacity: 0; transform: translateY(.45em); filter: blur(6px);
              animation: hero-word .7s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(.15s + var(--i) * .09s); }
.hero h1 b { color: var(--gold); font-weight: 900; position: relative; display: inline-block; animation: hero-glow 3.6s ease-in-out 1.6s infinite; }
.hero h1 b::after { content: ""; position: absolute; inset-inline: 0; bottom: .02em; height: .09em; border-radius: 4px; background: var(--gold);
                    transform: scaleX(0); transform-origin: var(--from, right); animation: hero-line 1s cubic-bezier(.6, 0, .2, 1) 1.1s forwards;
                    box-shadow: 0 0 14px rgba(201, 162, 39, .7); }
html[dir="ltr"] .hero h1 b::after { --from: left; }
@keyframes hero-word { to { opacity: 1; transform: none; filter: none; } }
@keyframes hero-line { to { transform: scaleX(1); } }
@keyframes hero-glow { 0%, 100% { text-shadow: 0 0 0 rgba(201, 162, 39, 0); } 50% { text-shadow: 0 0 22px rgba(201, 162, 39, .55); } }

.hero p.lead { color: var(--hero-muted); font-size: 1.12rem; margin: 0 0 1.6rem; max-width: 40rem; }
.hero .btn-ghost { color: var(--hero-text); }
.cta-row { display: flex; flex-wrap: wrap; gap: .7rem; }
.hero .btn { position: relative; }
.hero .btn:hover { box-shadow: 0 0 0 4px rgba(201, 162, 39, .14), 0 0 24px rgba(201, 162, 39, .3); }
.hero .btn-wa::before { content: ""; position: absolute; inset: -3px; border-radius: inherit; border: 2px solid var(--wa); opacity: 0; animation: hero-ring 2.6s ease-out 2.2s infinite; }
@keyframes hero-ring { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.18); } }

/* بطاقة الرحلة: حلقة هندسية دوّارة خلفها، وميل ثلاثي الأبعاد، وخطوات تضيء تباعاً يربطها مسار بنقطة ضوء */
.flow-wrap { position: relative; perspective: 1100px; }
.flow-rings { position: absolute; left: 50%; top: 50%; width: 135%; aspect-ratio: 1 / 1; transform: translate(-50%, -50%)
              translate(calc(var(--mx) * 12px), calc(var(--my) * 9px)); pointer-events: none; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.flow-rings svg { width: 100%; height: 100%; display: block; }
.flow-rings .r1 { animation: hero-spin 60s linear infinite; transform-origin: 300px 300px; }
.flow-rings .r2 { animation: hero-spin 90s linear infinite reverse; transform-origin: 300px 300px; }
.flow-rings .sweep { animation: hero-spin 7s linear infinite; transform-origin: 300px 300px; }
@keyframes hero-spin { to { transform: rotate(360deg); } }

.flow { position: relative; z-index: 1; background: var(--hero-card); border: 1px solid var(--hero-border); border-radius: 18px; padding: 1.2rem;
        transform: rotateY(calc(var(--mx) * 7deg)) rotateX(calc(var(--my) * -6deg)); transform-style: preserve-3d;
        transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .4s, border-color .4s; }
.hero:hover .flow { border-color: #4A4334; box-shadow: 0 20px 50px rgba(0, 0, 0, .45), 0 0 0 1px rgba(201, 162, 39, .12); }
.flow h2 { font-size: .95rem; color: var(--hero-muted); margin: 0 0 .9rem; font-weight: 700; display: flex; align-items: center; gap: .5rem; }
.flow h2::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); animation: arch-blink 1.4s steps(2) infinite; }
.flow ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; position: relative; }
.flow-rail { position: absolute; inset-inline-start: calc(.8rem + 18px); top: 30px; bottom: 30px; width: 2px; background: #2E2A22; z-index: 0; }
.flow-dot { position: absolute; inset-inline-start: calc(.8rem + 13px); width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; z-index: 2;
            background: var(--gold-l); box-shadow: 0 0 0 4px rgba(201, 162, 39, .25), 0 0 16px 4px rgba(201, 162, 39, .7);
            transition: top .7s cubic-bezier(.6, 0, .2, 1); pointer-events: none; }
.flow li { position: relative; z-index: 1; display: flex; align-items: center; gap: .75rem; padding: .6rem .8rem; border-radius: 12px;
           border: 1px solid var(--hero-border); background: var(--hero-bg); cursor: default; transition: border-color .35s, box-shadow .35s, transform .35s, background-color .35s; }
.flow li .ic { position: relative; z-index: 3; width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; background: var(--gold);
               color: var(--ink); font-size: 1.1rem; transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; }
.flow li b { display: block; font-size: .98rem; }
.flow li span { display: block; color: var(--hero-muted); font-size: .84rem; line-height: 1.5; }
.flow li .n { margin-inline-start: .5rem; color: var(--gold); font-weight: 900; font-family: ui-monospace, Consolas, monospace; transition: text-shadow .35s; }
.flow li .ai-mark { margin-inline-start: auto; color: var(--gold-l); opacity: 0; transform: scale(.4); transition: opacity .3s, transform .35s cubic-bezier(.2, .9, .3, 1.4); filter: drop-shadow(0 0 6px rgba(201, 162, 39, .8)); }
.flow li.on .ai-mark { opacity: 1; transform: none; }

/* الموظف الذكي: صورة رمزية متوهجة بمدار دوّار ونقاط تفكير، وفقاعة يكتب فيها ما يفعله، ووسم صادق
   (أخضر = أتمتة تعمل اليوم - دلالة "متاح"، ذهبي = ذكاء اصطناعي قادم) - قاعدة 8 */
.ai-agent { display: flex; gap: .75rem; align-items: flex-start; padding: .75rem; margin-bottom: .8rem; border-radius: 14px; position: relative;
            border: 1px solid rgba(201, 162, 39, .45); background: #16130C; box-shadow: 0 0 22px rgba(201, 162, 39, .14); }
.ai-avatar { position: relative; width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: var(--ink);
             border: 2px solid var(--gold); color: var(--gold-l); font-size: 1.5rem; animation: ai-breathe 2.8s ease-in-out infinite; }
.ai-orbit { position: absolute; inset: -7px; border-radius: 50%; border: 1.5px dashed rgba(201, 162, 39, .65); animation: hero-spin 8s linear infinite; }
.ai-orbit::after { content: ""; position: absolute; top: -4px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--gold-l); box-shadow: 0 0 8px var(--gold); }
@keyframes ai-breathe { 0%, 100% { box-shadow: 0 0 10px rgba(201, 162, 39, .45); } 50% { box-shadow: 0 0 24px 4px rgba(201, 162, 39, .7); } }
.ai-body { flex: 1; min-width: 0; }
.ai-head { display: flex; align-items: center; gap: .4rem; }
.ai-head b { color: var(--gold-l); font-size: 1rem; }
.ai-dots i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); margin-inline-start: 3px; opacity: .3; }
.ai-agent.typing .ai-dots i { animation: ai-dot 1s ease-in-out infinite; }
.ai-agent.typing .ai-dots i:nth-child(2) { animation-delay: .15s; } .ai-agent.typing .ai-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ai-dot { 0%, 100% { opacity: .3; transform: none; } 50% { opacity: 1; transform: translateY(-3px); } }
.ai-role { color: var(--hero-muted); font-size: .8rem; line-height: 1.5; }
.ai-bubble { margin-top: .45rem; background: var(--hero-bg); border: 1px solid var(--hero-border); border-radius: 10px; padding: .45rem .6rem;
             font-size: .88rem; line-height: 1.6; min-height: 3.4em; color: var(--hero-text); }
.ai-agent.typing .ai-say::after { content: "▍"; color: var(--gold); animation: arch-blink .8s steps(2) infinite; margin-inline-start: 1px; }
.ai-chip { display: inline-block; margin-inline-start: .4rem; font-size: .7rem; font-weight: 800; border-radius: 999px; padding: 0 .5rem; border: 1px solid; vertical-align: middle; white-space: nowrap; }
.ai-chip.now { color: #2FB36A; border-color: #2FB36A; }
.ai-chip.soon { color: var(--gold); border-color: var(--gold); }
.ai-agent:hover { border-color: var(--gold); }
.flow li.on { border-color: var(--gold); background: #1F1B12; transform: translateX(calc(var(--dir, -1) * 4px)); box-shadow: 0 0 0 1px rgba(201, 162, 39, .3), 0 0 26px rgba(201, 162, 39, .22); }
html[dir="ltr"] .flow li.on { --dir: 1; }
.flow li.on .ic { transform: rotate(-8deg) scale(1.1); box-shadow: 0 0 18px rgba(201, 162, 39, .75); }
.flow li.on .n { text-shadow: 0 0 12px var(--gold); }

/* ---------------- شريط الأرقام ---------------- */
.stats-band { background: var(--card); border-bottom: 1px solid var(--border); }
.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; padding: 1.4rem 0; text-align: center; }
.stat b { display: block; font-size: 1.9rem; font-weight: 900; color: var(--gold-d); line-height: 1.2; direction: ltr; unicode-bidi: isolate; }
html[data-theme="dark"] .stat b { color: var(--gold); }
.stat span { color: var(--muted); font-size: .9rem; font-weight: 600; }

/* ---------------- الأقسام ---------------- */
.sec { padding: 4.5rem 0; }
.sec.alt { background: var(--bg-2); }
.sec-head { max-width: 46rem; margin-bottom: 2.2rem; }
.kicker { display: inline-flex; align-items: center; gap: .4rem; color: var(--gold-d); font-weight: 800; font-size: .9rem; letter-spacing: .02em; }
html[data-theme="dark"] .kicker { color: var(--gold); }
.sec h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.35; margin: .3rem 0 .6rem; font-weight: 900; }
.sec-head p { color: var(--muted); margin: 0; font-size: 1.05rem; }

.grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); }
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.3rem; box-shadow: var(--shadow);
        transition: transform .2s, border-color .2s; }
.card:hover { transform: translateY(-3px); border-color: var(--gold); }
.card .ic { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: var(--ink); color: var(--gold); font-size: 1.35rem; margin-bottom: .8rem; }
.card h3 { margin: 0 0 .35rem; font-size: 1.12rem; font-weight: 800; line-height: 1.5; }
.card p { margin: 0; color: var(--muted); font-size: .95rem; }
.card .num { float: inline-end; color: var(--gold-d); font-weight: 900; font-family: ui-monospace, Consolas, monospace; opacity: .8; }

/* الخدمات: مجموعات بعناوين، وكل خدمة بحالتها */
.svc-groups { display: grid; gap: 1.2rem; grid-template-columns: repeat(2, 1fr); }
.svc-group { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem 1.3rem; box-shadow: var(--shadow); }
.svc-group > h3 { display: flex; align-items: center; gap: .55rem; margin: 0 0 .8rem; font-size: 1.15rem; font-weight: 900; }
.svc-group > h3 i { color: var(--gold); }
.svc { display: flex; gap: .8rem; padding: .7rem 0; border-top: 1px dashed var(--border); }
.svc:first-of-type { border-top: 0; }
.svc .ic { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--border); color: var(--gold-d); }
html[data-theme="dark"] .svc .ic { color: var(--gold); }
.svc b { display: block; font-weight: 800; }
.svc p { margin: .1rem 0 0; color: var(--muted); font-size: .92rem; line-height: 1.65; }
.chip { display: inline-flex; align-items: center; gap: .25rem; font-size: .74rem; font-weight: 800; border-radius: 999px; padding: .05rem .55rem; margin-inline-start: .35rem; vertical-align: middle; border: 1px solid; }
.chip.ready { color: var(--ok); border-color: var(--ok); }
.chip.soon { color: var(--gold-d); border-color: var(--gold); }
html[data-theme="dark"] .chip.soon { color: var(--gold); }

/* لماذا: قائمة مرقمة كبيرة */
.why-list { counter-reset: why; display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); list-style: none; padding: 0; margin: 0; }
.why-list li { position: relative; padding: 1.2rem 1.3rem; padding-inline-start: 4.2rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); }
.why-list li::before { counter-increment: why; content: counter(why, decimal-leading-zero); position: absolute; inset-inline-start: 1.1rem; top: 1.05rem;
                       font: 900 1.5rem/1 ui-monospace, Consolas, monospace; color: var(--gold); }
.why-list b { display: block; font-size: 1.08rem; font-weight: 800; }
.why-list p { margin: .2rem 0 0; color: var(--muted); font-size: .95rem; }

/* الابتكار: بطاقة بخط ذهبي جانبي */
.card.inno { border-inline-start: 4px solid var(--gold); }

/* مفتوح المصدر + الأدلة + المعايير */
.open-grid { display: grid; gap: 1.2rem; grid-template-columns: 1fr 1fr; }
.panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--shadow); }
.panel h3 { margin: 0 0 .8rem; font-size: 1.15rem; font-weight: 900; display: flex; gap: .5rem; align-items: center; }
.panel h3 i { color: var(--gold); }
.panel h4 { margin: 1rem 0 .4rem; font-size: .95rem; color: var(--muted); font-weight: 800; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.ticks li { display: flex; gap: .55rem; align-items: flex-start; }
.ticks li i { color: var(--gold); margin-top: .2rem; }
.open-hero { background: var(--ink); color: var(--hero-text); border-color: var(--hero-border); }
.open-hero p { color: var(--hero-muted); }
.std { display: grid; gap: .6rem; margin-top: .4rem; }
.std > div { display: flex; gap: .8rem; align-items: baseline; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: 10px; }
.std b { min-width: 7.5rem; font-family: ui-monospace, Consolas, monospace; color: var(--gold-d); font-size: .9rem; }
html[data-theme="dark"] .std b { color: var(--gold); }
.std span { color: var(--muted); font-size: .92rem; }
.note { font-size: .84rem; color: var(--muted); margin: .8rem 0 0; display: flex; gap: .4rem; }

/* التواصل */
.contact-box { display: grid; grid-template-columns: 1.1fr .9fr; gap: 1.5rem; align-items: stretch; }
.intents { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; margin: 1rem 0 1.2rem; }
.intent { display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; border-radius: 12px; border: 2px solid var(--border); background: var(--card);
          color: var(--text); font: inherit; font-weight: 800; cursor: pointer; text-align: start; }
.intent i { font-size: 1.2rem; color: var(--gold-d); }
.intent[aria-pressed="true"] { border-color: var(--wa); box-shadow: 0 0 0 3px rgba(37, 211, 102, .18); }
.preview { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; padding: .8rem 1rem; font-size: .92rem; color: var(--muted); margin-bottom: 1rem; white-space: pre-line; }
.wa-card { background: var(--ink); color: var(--hero-text); border-radius: var(--radius); padding: 1.6rem; display: flex; flex-direction: column; gap: .9rem; justify-content: center; }
.wa-card .big { font-size: 1.7rem; font-weight: 900; direction: ltr; text-align: start; }
html[dir="rtl"] .wa-card .big { text-align: end; }
.wa-card .lbl { color: var(--hero-muted); font-size: .9rem; display: flex; align-items: center; gap: .4rem; }
.wa-card .lbl i { color: var(--wa); font-size: 1.2rem; }
.wa-card .row { display: flex; flex-wrap: wrap; gap: .5rem; }
.wa-card .btn-ghost { color: var(--hero-text); }

/* زر واتساب العائم */
.wa-float { position: fixed; inset-inline-end: 18px; bottom: 18px; z-index: 60; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
            background: var(--wa); color: #fff; font-size: 1.8rem; text-decoration: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); transition: transform .15s; }
.wa-float:hover { transform: scale(1.07); background: var(--wa-d); }
.wa-float .tip { position: absolute; inset-inline-end: 66px; white-space: nowrap; background: var(--ink); color: #fff; font-size: .85rem; font-weight: 700;
                 padding: .3rem .7rem; border-radius: 8px; opacity: 0; transform: translateY(4px); transition: .15s; pointer-events: none; }
.wa-float:hover .tip, .wa-float:focus-visible .tip { opacity: 1; transform: none; }

/* ---------------- خلفيات الأقسام المتبدّلة (SECTION_BG في site.js) ----------------
   stars: سماء ليلية في المظهرين (نجوم تتلألأ + بريق + شهاب)، والنص فوقها فاتح؛ البطاقات تبقى بألوانها.
   itsm : شبكة هندسية وأيقونات دعم خافتة في طبقة position: fixed مقصوصة بحدود القسم (clip-path) - تثبت والمحتوى يمر فوقها،
          وتعمل في كل المتصفحات (بديل background-attachment: fixed الذي لا يعمل في iOS). لا تدرّج - قاعدة 8. */
.sec .wrap { position: relative; z-index: 1; }
.bg-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg-layer svg { width: 100%; height: 100%; display: block; }

.sec.bg-stars { position: relative; overflow: hidden; background: #070706; color: var(--hero-text); }
.sec.bg-stars .sec-head p, .sec.bg-stars .why-list p { color: var(--hero-muted); }
.sec.bg-stars .kicker { color: var(--gold); }
.sec.bg-stars .sec-head .tts { background: var(--hero-card); border-color: var(--hero-border); color: var(--gold); }
.bg-stars-layer .tw { animation: bg-twinkle var(--d) ease-in-out var(--dl) infinite; }
.bg-stars-layer .spark { animation: bg-spark var(--d) ease-in-out var(--dl) infinite; }
.bg-stars-layer .shoot { opacity: 0; transform: translate(var(--x), var(--y)); animation: bg-shoot 11s linear var(--dl) infinite; }
@keyframes bg-twinkle { 0%, 100% { opacity: .28; } 50% { opacity: 1; } }
/* الحركة الزخرفية تعمل في القسم الظاهر فقط (watchFx يضع fx-live) */
.sec:not(.fx-live) .bg-stars-layer *, .hero:not(.fx-live) *, .hero:not(.fx-live) .btn-wa::before, .hero:not(.fx-live) .flow h2::before { animation-play-state: paused; }
@keyframes bg-spark { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes bg-shoot { 0% { opacity: 0; transform: translate(var(--x), var(--y)); } 1.5% { opacity: 1; }
                      9% { opacity: 0; transform: translate(calc(var(--x) - 520px), calc(var(--y) + 260px)); } 100% { opacity: 0; transform: translate(calc(var(--x) - 520px), calc(var(--y) + 260px)); } }

.sec.bg-itsm { position: relative; background: var(--bg-2); clip-path: inset(0); }
.sec.bg-itsm > .bg-itsm-layer { position: fixed; inset: 0; }
.bg-itsm-layer .grid-line { fill: none; stroke: var(--border); stroke-width: 1; }
.bg-itsm-layer .grid-major { fill: none; stroke: var(--border); stroke-width: 1.6; }
.bg-itsm-layer svg { position: absolute; inset: 0; }
.bg-itsm-layer i { position: absolute; font-size: var(--s); transform: rotate(var(--r)); color: var(--gold-d); opacity: .14; }
html[data-theme="dark"] .bg-itsm-layer i { color: var(--gold); opacity: .1; }

/* ---------------- كيف يعمل: المخطط الهندسي الحي ----------------
   مسرح بخلفية "غرفة تحكم" داكنة في المظهرين: شبكة هندسية (نمط SVG لا تدرّج)، مداران يدوران باتجاهين، مكوّنات
   تتبادل رسائل تسري على خطوطها كحزم ذهبية، والمكوّن المستلم يضيء ويتحدث بفقاعة. التوهج ظل ذهبي مصمت لا تدرّج. */
.arch-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 1.6rem; align-items: start; }
.stage { position: relative; width: 100%; max-width: 660px; aspect-ratio: 1 / 1; margin-inline: auto; background: var(--hero-bg);
         border: 1px solid var(--hero-border); border-radius: 22px; overflow: hidden; color: var(--hero-text); direction: ltr; isolation: isolate; }
.stage > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage .orbit { fill: none; stroke: #4A4334; stroke-width: 1.6; stroke-dasharray: 5 9; }
.stage .ticks { fill: none; stroke: #5C523C; stroke-width: 10; stroke-dasharray: 1.5 14.9; }
.stage .axis { stroke: #2C2822; stroke-width: 1; stroke-dasharray: 2 6; }
.stage .spoke { stroke: #6B5D36; stroke-width: 1.6; stroke-dasharray: 6 10; animation: arch-flow 1.1s linear infinite; transition: stroke .3s; }
.stage .spoke.hot { stroke: var(--gold); stroke-width: 2.4; }
.stage .msg-line { stroke: var(--gold); stroke-width: 3; stroke-linecap: round; opacity: 0; transition: opacity .2s; }
.stage .msg-line.on { opacity: 1; }
.stage .packet { fill: var(--gold-l); opacity: 0; }
.stage .packet.on { opacity: 1; }
@keyframes arch-flow { to { stroke-dashoffset: -16; } }

.node { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: clamp(62px, 15.5%, 100px); aspect-ratio: 1 / 1;
        border-radius: 50%; background: var(--hero-card); border: 2px solid #4A4334; color: var(--hero-text); display: flex; flex-direction: column;
        align-items: center; justify-content: center; gap: .1rem; padding: 4px; font: inherit; cursor: pointer; z-index: 2;
        transition: border-color .3s, box-shadow .3s, background-color .3s; }
.node i { font-size: clamp(1rem, 2.4vw, 1.45rem); color: var(--gold); line-height: 1; }
.node span { font-size: clamp(.52rem, 1.25vw, .7rem); font-weight: 800; line-height: 1.2; text-align: center; }
.node:hover, .node:focus-visible, .node.sel { border-color: var(--gold); }
.node.talking { border-color: var(--gold-l); }
.node.talking::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--gold); animation: arch-ping 1s ease-out infinite; }
.node.lit { border-color: var(--gold); background: #2A2416; box-shadow: 0 0 0 4px rgba(201, 162, 39, .28), 0 0 30px 8px rgba(201, 162, 39, .55); }
.node.core { width: clamp(92px, 23%, 148px); border: 3px solid var(--gold); background: #0F0E0C; animation: arch-heart 2.6s ease-in-out infinite; z-index: 1; }
.node.core i { font-size: clamp(1.4rem, 3.6vw, 2.2rem); }
.node.core span { font-size: clamp(.6rem, 1.5vw, .85rem); color: var(--gold-l); }
@keyframes arch-ping { from { transform: scale(.92); opacity: .9; } to { transform: scale(1.35); opacity: 0; } }
@keyframes arch-heart { 0%, 100% { box-shadow: 0 0 0 0 rgba(201, 162, 39, .45), 0 0 22px 2px rgba(201, 162, 39, .35); }
                        50% { box-shadow: 0 0 0 16px rgba(201, 162, 39, 0), 0 0 34px 8px rgba(201, 162, 39, .5); } }

.bubble { position: absolute; left: 0; top: 0; transform: translate(-50%, calc(-100% - 10px)); z-index: 4; max-width: min(240px, 46%);
          background: var(--gold); color: var(--ink); font-weight: 800; font-size: clamp(.66rem, 1.5vw, .8rem); line-height: 1.5; padding: .4rem .65rem;
          border-radius: 10px; text-align: center; pointer-events: none; opacity: 0; transition: opacity .25s; }
.bubble.show { opacity: 1; }
.bubble::after { content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: var(--gold); }
.stage-note { position: absolute; z-index: 1; font: 700 .64rem/1 ui-monospace, Consolas, monospace; letter-spacing: .12em; color: #8A7F66; pointer-events: none; }
.stage-note.tl { left: 14px; top: 14px; } .stage-note.br { right: 14px; bottom: 14px; } .stage-note.bl { left: 14px; bottom: 14px; }
.stage-note .live { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); margin-inline-end: 6px; animation: arch-blink 1.4s steps(2) infinite; }
@keyframes arch-blink { 50% { opacity: .2; } }

.arch-side { display: grid; gap: 1rem; }
.arch-ctrl { display: flex; flex-wrap: wrap; gap: .5rem; }
.arch-ctrl .btn[aria-pressed="true"] { border-color: var(--gold); color: var(--gold-d); }
html[data-theme="dark"] .arch-ctrl .btn[aria-pressed="true"] { color: var(--gold); }
.arch-info { min-height: 5.2rem; }
.arch-info b { display: flex; align-items: center; gap: .45rem; font-size: 1.05rem; }
.arch-info b i { color: var(--gold); }
.arch-info p { margin: .25rem 0 0; color: var(--muted); font-size: .93rem; }
.legend { display: grid; gap: .35rem; font-size: .88rem; color: var(--muted); }
.legend span { display: flex; align-items: center; gap: .5rem; }
.legend .sw { width: 26px; height: 0; border-top: 2px dashed #6B5D36; }
.legend .sw.msg { border-top: 3px solid var(--gold); }
.legend .sw.lit { width: 14px; height: 14px; border: 2px solid var(--gold); border-radius: 50%; box-shadow: 0 0 10px 2px rgba(201, 162, 39, .55); }
.arch-log { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.arch-log li { font-size: .88rem; padding: .45rem .6rem; border: 1px solid var(--border); border-radius: 10px; background: var(--card); color: var(--muted); }
.arch-log li:first-child { border-color: var(--gold); color: var(--text); }
.arch-log li b { color: var(--text); font-weight: 800; }
.arch-script summary { cursor: pointer; font-weight: 800; }
.arch-script ol { margin: .5rem 0 0; padding-inline-start: 1.2rem; color: var(--muted); font-size: .9rem; }

/* ---------------- القارئ الصوتي: سماعة تشغيل/إيقاف لكل مقالة ----------------
   زر القسم بجوار عنوانه الصغير، وزر المقالة في زاويتها العليا من جهة النهاية؛ أثناء القراءة يصير زر إيقاف ذهبياً
   والمقالة المقروءة بإطار ذهبي. */
[data-tts] { position: relative; }
.tts { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border);
       background: var(--card); color: var(--gold-d); cursor: pointer; font-size: 1rem; padding: 0; transition: background-color .15s, color .15s, border-color .15s; }
html[data-theme="dark"] .tts { color: var(--gold); }
.tts:hover { border-color: var(--gold); }
.tts.playing { background: var(--gold); color: var(--ink); border-color: var(--gold); box-shadow: 0 0 0 4px rgba(201, 162, 39, .25); animation: tts-pulse 1.4s ease-in-out infinite; }
@keyframes tts-pulse { 50% { box-shadow: 0 0 0 8px rgba(201, 162, 39, .08); } }
.tts-section { margin-inline-start: .6rem; vertical-align: middle; width: 30px; height: 30px; font-size: .9rem; }
.tts-item { position: absolute; top: .7rem; inset-inline-end: .7rem; z-index: 2; width: 30px; height: 30px; font-size: .9rem; }
.hero .tts { background: var(--hero-card); border-color: var(--hero-border); color: var(--gold); }
.hero [data-tts] > .tts-item { top: 0; inset-inline-end: 0; }
.why-list li > .tts-item { top: 1rem; }
/* مساحة للسماعة في السطر الأول حتى لا تغطي العنوان */
.svc-group[data-tts] > h3, .panel[data-tts] > h3:first-of-type, .why-list li[data-tts] > b, .hero [data-tts] > .badges { padding-inline-end: 2.6rem; }
.reading { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: var(--radius); }
.sec-head.reading, section.reading { outline-offset: 8px; }

/* التذييل */
.footer { background: var(--hero-bg); color: var(--hero-muted); padding: 2.2rem 0; font-size: .92rem; }
.footer-in { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; justify-content: space-between; }
.footer .logo-sub { color: var(--hero-muted); }
.footer .logo-img img { height: 40px; }
.footer a { color: var(--hero-text); }

/* الظهور التدريجي عند التمرير */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .5s; }
.reveal.in { opacity: 1; transform: none; }

/* ---------------- الشاشات الصغيرة ---------------- */
@media (max-width: 1100px) {
  .burger { display: inline-grid; }
  .nav { display: none; position: absolute; inset-inline: 0; top: 100%; background: var(--bg); border-bottom: 1px solid var(--border);
         flex-direction: column; padding: .5rem 16px 1rem; box-shadow: var(--shadow); }
  .nav.open { display: flex; }
  .topbar-in { position: relative; }
  .tools { margin-inline-start: auto; }
}
@media (max-width: 900px) {
  .hero-in, .open-grid, .contact-box, .svc-groups, .arch-grid { grid-template-columns: 1fr; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .why-list { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .grid, .intents { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .tools .btn-wa span { display: none; }
  .brand .logo-img img { height: 34px; }
  .sec { padding: 3.2rem 0; }
}
@media (max-width: 420px) {
  .icon-btn { width: 36px; height: 36px; }
  .tools { gap: .25rem; }
  .tools .btn-wa { padding: .35rem .65rem; }
  .brand .logo-img img { height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .card, .btn, .wa-float { transition: none; }
  .stage .spoke, .node.core, .node.talking::after, .stage-note .live { animation: none; }
  .tts.playing { animation: none; }
  .hero-art .trace { animation: none; stroke-dashoffset: 0; }
  .hero-art .node { animation: none; opacity: 1; }
  .hero h1 .w { animation: none; opacity: 1; transform: none; filter: none; }
  .hero h1 b, .hero .btn-wa::before, .flow h2::before, .flow-rings .r1, .flow-rings .r2, .flow-rings .sweep { animation: none; }
  .hero h1 b::after { animation: none; transform: scaleX(1); }
  .hero-art, .flow, .flow-rings { transition: none; }
  .flow-dot { transition: none; }
  .ai-avatar, .ai-orbit, .ai-agent.typing .ai-dots i { animation: none; }
  .bg-stars-layer .tw, .bg-stars-layer .spark { animation: none; opacity: .8; }
  .sec.bg-itsm > .bg-itsm-layer { position: absolute; }
}
@media print {
  .topbar, .wa-float, .cta-row, .intents, .wa-card .row { display: none !important; }
  .hero, .footer, .open-hero, .wa-card { background: #fff !important; color: #000 !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------------- الإظهار الكسول مع التمرير ----------------
   القسم البعيد يبقى إطاراً فارغاً بارتفاع تقريبي (فيبقى شريط التمرير قريباً من طول الصفحة الحقيقي)
   ويُبنى حين يقترب منه التمرير (site.js mountSection)، ثم تظهر عناصره تدريجياً (.reveal). */
.sec.lazy-pending { min-height: 70vh; display: grid; place-items: center; }
.lazy-ph { display: grid; place-items: center; gap: .6rem; color: var(--muted); font-weight: 700; font-size: .9rem; }
.lazy-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--gold); animation: lazySpin .9s linear infinite; }
@keyframes lazySpin { to { transform: rotate(360deg); } }

/* شريط تقدّم القراءة أسفل الهيدر: يتبع شريط التمرير (لون واحد - قاعدة 8) */
.scroll-prog { position: absolute; inset-inline: 0; bottom: -1px; height: 3px; pointer-events: none; }
.scroll-prog i { display: block; height: 100%; background: var(--gold); transform: scaleX(var(--p, 0)); transform-origin: left; will-change: transform; }
html[dir="rtl"] .scroll-prog i { transform-origin: right; }
/* شريط التمرير نفسه بهوية الصفحة */
html { scrollbar-width: thin; scrollbar-color: var(--gold) var(--bg-2); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: var(--gold-d); border-radius: 999px; border: 2px solid var(--bg-2); }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* حماية المحتوى: لا تحديد للنص ولا سحب للصور، والحقول القابلة للكتابة مستثناة (site.js copyGuard) */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
:is(input, textarea, select, [contenteditable=""], [contenteditable="true"], .allow-copy, .allow-copy *) { -webkit-user-select: text; user-select: text; }
img, svg { -webkit-user-drag: none; }

@media (prefers-reduced-motion: reduce) {
  .lazy-spin { animation: none; }
}
@media print {
  .sec.lazy-pending { min-height: 0; }
  .scroll-prog { display: none; }
}

/* ---------------- جولة الفيديو (renderTour): الفيديو + شريط المراحل + الشرح + فهرس الفصول ----------------
   لون واحد للتقدّم (الذهبي = الهوية) بلا تدرّج؛ الفصل الجاري بحدّ ذهبي، والشريط السفلي يمتلئ بنسبة ما عُرض منه. */
.tour-grid { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 1.4rem; align-items: start; }
.tour-main { display: grid; gap: .9rem; min-width: 0; }
.tour-rail { display: flex; gap: 4px; }
.tour-seg { flex: var(--w) 1 0; min-width: 0; display: grid; gap: 5px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: var(--muted); text-align: start; }
.tour-seg-label { font-size: .78rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tour-seg::before { content: ""; order: 2; height: 5px; border-radius: 3px; background: var(--border); }
.tour-seg-fill { order: 3; height: 5px; margin-top: -10px; border-radius: 3px; background: var(--gold); width: calc(var(--p, 0) * 100%); transition: width .25s linear; }
.tour-seg:hover, .tour-seg.on { color: var(--text); }
.tour-seg.on .tour-seg-label { color: var(--gold-d); }
html[data-theme="dark"] .tour-seg.on .tour-seg-label { color: var(--gold); }
.tour-screen { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--hero-border); }
.tour-video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.tour-fallback { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .6rem; padding: 1.5rem; text-align: center; color: var(--hero-text); font-weight: 700; }
.tour-fallback[hidden] { display: none; }
.tour-fallback .bi { font-size: 2.2rem; color: var(--gold); }
.tour-now { background: var(--card); border: 1px solid var(--border); border-inline-start: 4px solid var(--gold); border-radius: var(--radius); padding: 1rem 1.2rem; box-shadow: var(--shadow); }
.tour-now-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; font-size: .82rem; font-weight: 800; color: var(--muted); }
.tour-now-label { color: var(--gold-d); }
html[data-theme="dark"] .tour-now-label { color: var(--gold); }
.tour-now-time { margin-inline-start: auto; font-family: ui-monospace, Consolas, monospace; direction: ltr; }
.tour-now h3 { margin: .35rem 0 .25rem; font-size: 1.2rem; font-weight: 900; }
.tour-now p { margin: 0; color: var(--muted); }
.tour-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.tour-index { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); max-height: 640px; overflow: auto; overscroll-behavior: contain; position: relative; }
.tour-index-head { position: sticky; top: 0; z-index: 1; background: var(--card); padding: .8rem 1rem; font-weight: 900; border-bottom: 1px solid var(--border); }
.tour-group { padding: .4rem .6rem .6rem; }
.tour-group + .tour-group { border-top: 1px solid var(--border); }
.tour-group-head { display: flex; align-items: center; gap: .5rem; padding: .35rem .4rem; font-size: .9rem; }
.tour-group-ic { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--ink); color: var(--gold); font-size: .9rem; }
.tour-count { margin-inline-start: auto; font-size: .75rem; font-weight: 800; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 0 .5rem; }
.tour-ch { position: relative; width: 100%; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: .7rem; align-items: start; padding: .5rem; margin-top: .3rem;
           border: 1px solid transparent; border-radius: 10px; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; overflow: hidden; }
.tour-ch:hover { background: var(--bg-2); }
.tour-ch.on { border-color: var(--gold); background: var(--bg-2); }
.tour-thumb { position: relative; display: block; border-radius: 7px; overflow: hidden; aspect-ratio: 16 / 9; background: #000; }
.tour-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tour-time { position: absolute; inset-inline-end: 4px; bottom: 4px; background: rgba(8, 8, 10, .85); color: #fff; font: 700 .7rem/1.4 ui-monospace, Consolas, monospace; padding: 0 .3rem; border-radius: 4px; }
.tour-ch-body { display: grid; gap: .1rem; min-width: 0; }
.tour-ch-body b { font-size: .92rem; line-height: 1.45; }
.tour-ch-body span { font-size: .8rem; color: var(--muted); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tour-ch.on .tour-ch-body span { -webkit-line-clamp: unset; }
.tour-ch-bar { position: absolute; inset-inline-start: 0; bottom: 0; height: 3px; width: calc(var(--p, 0) * 100%); background: var(--gold); }
@media (max-width: 980px) {
  .tour-grid { grid-template-columns: 1fr; }
  .tour-index { max-height: 520px; }
}
@media (max-width: 560px) {
  .tour-seg-label { font-size: 0; }
  .tour-seg-label .bi { font-size: .95rem; }
  .tour-ch { grid-template-columns: 96px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .tour-seg-fill { transition: none; } }