/* v4: depth, light strips, OS badges, XiGuard, technology, P2P, AI night, global, investors */
:root { --guard: #c9a227; --guard-2: #3a7bd5; --vault: #8f7cf6; --erp: #e09a63; --night: #7c8cff; }

/* Brand mark (self-drawing in hero) */
.mark .mark-tile { fill: #1f292c; stroke: var(--accent); stroke-width: 0; }
.mark .mark-bars { fill: #d8ee73; }
.fx-on .hero-mark .mark-tile { stroke-width: 1.5; stroke-dasharray: 260; stroke-dashoffset: 260; fill-opacity: 0; animation: trace 1.6s ease forwards, fillin .6s 1.4s ease forwards; }
.fx-on .hero-mark .mark-bars { opacity: 0; transform-origin: 50% 50%; animation: bars .5s 1.8s ease forwards; }
@keyframes trace { to { stroke-dashoffset: 0; } }
@keyframes fillin { to { fill-opacity: 1; } }
@keyframes bars { from { opacity: 0; transform: scaleY(.3); } to { opacity: 1; transform: none; } }

/* Hero depth scene */
.hero-wrap { position: relative; overflow: hidden; }
.hero-wrap::before { content: ""; position: absolute; inset: -20% -10% auto; height: 120%; background: radial-gradient(60% 50% at 70% 30%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), radial-gradient(40% 40% at 20% 80%, color-mix(in srgb, var(--guard-2) 14%, transparent), transparent 70%); pointer-events: none; }
.hero { position: relative; }
.scene { perspective: 1100px; height: 460px; position: relative; }
.stage { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--srx, 0deg)) rotateY(var(--sry, 0deg)); transition: transform .25s ease-out; }
.layer { position: absolute; inset: 0; transition: transform .2s ease-out; transform-style: preserve-3d; }
.panel { position: absolute; width: 62%; border-radius: 18px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06); }
.p1 { inset-inline-start: 0; top: 4%; opacity: .55; filter: saturate(.8); transform: translateZ(-120px) rotate(-4deg); }
.p2 { inset-inline-end: 0; top: 18%; transform: translateZ(-40px) rotate(3deg); opacity: .85; }
.p3 { inset-inline-start: 12%; top: 50%; width: 55%; transform: translateZ(40px) rotate(-2deg); }
.fx-on .p1 { animation: float 9s ease-in-out infinite; } .fx-on .p2 { animation: float 11s ease-in-out -3s infinite; } .fx-on .p3 { animation: float 8s ease-in-out -5s infinite; }
@keyframes float { 50% { translate: 0 -12px; } }
.hero-mark { position: absolute; inset-inline-end: 8%; top: 52%; width: 120px; filter: drop-shadow(0 18px 30px rgba(0,0,0,.5)) drop-shadow(0 0 24px color-mix(in srgb, var(--accent) 40%, transparent)); }
.hero-mark svg { width: 100%; display: block; }
.chip-icon { position: absolute; width: 64px; height: 64px; border-radius: 16px; background: #fff; padding: 6px; box-shadow: 0 14px 30px -10px rgba(0,0,0,.6); }
.c1 { inset-inline-start: 2%; top: 40%; } .c2 { inset-inline-end: 34%; top: 2%; } .c3 { inset-inline-end: 2%; top: 4%; background: transparent; padding: 0; }
.fx-on .chip-icon { animation: float 7s ease-in-out infinite; } .fx-on .c2 { animation-delay: -2s; } .fx-on .c3 { animation-delay: -4s; }
.orb { position: absolute; border-radius: 50%; filter: blur(40px); opacity: .5; }
.o1 { width: 220px; height: 220px; background: var(--accent); inset-inline-end: 10%; top: 10%; opacity: .22; }
.o2 { width: 180px; height: 180px; background: var(--guard-2); inset-inline-start: 10%; bottom: 0; opacity: .22; }
@media (max-width: 860px) { .scene { height: 340px; } }

.stats { list-style: none; padding: 0; margin: 0 0 56px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; position: relative; }
.stats li { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; display: grid; gap: 2px; }
.stats strong { font-size: 34px; line-height: 1; font-weight: 700; background: linear-gradient(90deg, var(--ink), color-mix(in srgb, var(--accent) 70%, var(--ink))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stats span { color: var(--muted); font-size: 14px; }
@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* Reveal + tilt */
.fx-on [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s ease var(--d, 0ms), transform .7s cubic-bezier(.2,.7,.2,1) var(--d, 0ms); }
.fx-on [data-reveal].in { opacity: 1; transform: none; }
.fx-on [data-tilt].in { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .15s ease-out, opacity .7s ease; }
[data-tilt] { position: relative; }
.fx-on [data-tilt]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.07), transparent 60%); }

/* Light strip on top of each product */
.lit { --c: var(--accent); position: relative; overflow: hidden; border-top-width: 1px !important; }
.lit::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 4px; background: linear-gradient(90deg, transparent, var(--c) 20%, color-mix(in srgb, var(--c) 40%, #fff) 50%, var(--c) 80%, transparent); background-size: 200% 100%; box-shadow: 0 0 18px 2px color-mix(in srgb, var(--c) 55%, transparent), 0 0 42px 6px color-mix(in srgb, var(--c) 25%, transparent); z-index: 1; }
.fx-on .lit::before { animation: sheen 6s linear infinite; }
@keyframes sheen { from { background-position: 200% 0; } to { background-position: 0 0; } }
.fam-desktop { --c: #d8ee73; } .fam-guard { --c: var(--guard); } .fam-vault { --c: var(--vault); } .fam-erp { --c: var(--erp); }
.suite-creative { --c: #d8ee73; } .suite-office { --c: #6fa8dc; } .suite-media { --c: #e58f6b; } .suite-engineering { --c: #9aa7a3; }
.launcher.lit { --c: #d8ee73; } .guard-sec .lit { --c: var(--guard); } .ed-biz { --c: var(--guard-2) !important; }
.metric.lit, .rules.lit { --c: #5fd4b8; } .ncard.lit { --c: var(--night); } .pipeline.lit { --c: #d8ee73; }
.card, .suite { border-top: 1px solid var(--line) !important; }

/* Family cards */
.card .glyph img { padding: 0; background: #fff; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.badge.ship { background: #dff3e4; color: #1d5a2c; border-color: #b4dfbf; }
.badge.planned { background: transparent; border-style: dashed; color: var(--muted); }
.badge.research { background: #e9e7ff; color: #3b2f8f; border-color: #cbc6f7; }
.badge.dev { background: var(--soft); }
.os-lbl { margin: 4px 0 -4px !important; font-size: 12px !important; text-transform: uppercase; letter-spacing: .12em; }
:lang(ar) .os-lbl { text-transform: none; letter-spacing: 0; }

/* OS badges */
.os-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.os { --os-belly: var(--panel); display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 4px 9px 4px 7px; border-radius: 999px; border: 1px solid var(--line); background: var(--soft); color: var(--ink); }
.os svg { width: 15px; height: 15px; flex: none; }
.os small { font-size: 10.5px; font-weight: 600; color: var(--muted); }
.os.beta { border-color: color-mix(in srgb, var(--vault) 50%, var(--line)); }
.os.planned { background: transparent; border-style: dashed; color: var(--muted); }
.os.planned svg { opacity: .55; }
.launcher-os { margin: 8px 0 2px; } .launcher .os { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: var(--on-deep); --os-belly: var(--deep); }

/* Suite artwork banner */
.suite-art { margin: -22px -22px 16px; height: 120px; overflow: hidden; border-bottom: 1px solid var(--line); background: #0f1626; }
.suite-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transform: scale(1.06); transition: transform .8s ease; }
.suite:hover .suite-art img { transform: scale(1.12); }
.suite.compact .suite-art { margin: -18px -18px 14px; height: 90px; }

/* XiGuard */
.editions { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.edition { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.edition h3 { margin: 0 0 6px; font-size: 24px; } .edition p { color: var(--muted); margin: 0; }
.edition .eyebrow { margin-bottom: 4px; }
.central { display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: center; background: linear-gradient(135deg, #0f1a2e, #13253a); color: #eef2f7; border-radius: 24px; padding: 28px; margin-bottom: 18px; border: 1px solid #23395a; }
.central h3 { font-size: 28px; margin: 0 0 6px; } .central p { color: #c4d0e0; margin: 0 0 8px; } .central .eyebrow { color: #9fb3cf; }
.central .note { color: #9fb3cf; border-color: #4a6286; }
.central-art svg { width: 100%; }
.central-art .links line { stroke: #3a5f92; stroke-width: 1.5; stroke-dasharray: 4 5; }
.fx-on .central-art .links line { animation: dash 1.6s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -18; } }
.central-art .dev rect { fill: #1d3150; stroke: #5b84bd; } .central-art .dev .scr { fill: #2d4d7a; stroke: none; }
.central-art .hub rect { fill: var(--guard); } .central-art .hub path { fill: #13253a; }
.central-art .pulse { fill: none; stroke: var(--guard); stroke-width: 2; opacity: 0; }
.fx-on .central-art .pulse { animation: pulse 2.6s ease-out infinite; transform-origin: 135px 115px; }
@keyframes pulse { from { opacity: .7; transform: scale(.6); } to { opacity: 0; transform: scale(2.2); } }
.parts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.part { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: grid; gap: 10px; align-content: start; }
.part .head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .part h3 { margin: 0; font-size: 19px; }
.part .glyph { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--soft); font-size: 22px; overflow: hidden; }
.part .glyph img { width: 100%; height: 100%; background: #fff; }
.part p { margin: 0; color: var(--muted); font-size: 15px; }
.roadmap { color: var(--muted); border-inline-start: 3px solid var(--guard); padding-inline-start: 14px; margin: 22px 0 0; }
@media (max-width: 860px) { .editions, .parts { grid-template-columns: 1fr; } .central { grid-template-columns: 1fr; } }

/* Technology */
.tech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.metric { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.metric strong { display: block; font-size: 30px; line-height: 1.1; font-weight: 700; color: #5fd4b8; margin-bottom: 8px; direction: ltr; unicode-bidi: isolate; text-align: start; }
.metric p { margin: 0; color: var(--muted); font-size: 14.5px; }
.rules { margin-top: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 26px; }
.rules h3 { margin: 0 0 8px; } .rules ol { margin: 0; padding-inline-start: 22px; color: var(--muted); display: grid; gap: 4px; columns: 2; }
@media (max-width: 860px) { .tech-grid { grid-template-columns: 1fr; } .rules ol { columns: 1; } }

/* P2P */
.p2p-wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.p2p-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.p2p-list li { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: baseline; }
.p2p-list .badge { grid-row: span 2; align-self: start; }
.p2p-list h3 { margin: 0; font-size: 17.5px; } .p2p-list p { margin: 0; color: var(--muted); font-size: 15px; grid-column: 2; }
.p2p-art svg { width: 100%; }
.p2p-art .edges path { stroke: var(--line); stroke-width: 2; fill: none; }
.p2p-art .pk { fill: var(--vault); filter: drop-shadow(0 0 6px var(--vault)); }
.p2p-art .dev rect { fill: var(--panel); stroke: var(--vault); stroke-width: 1.5; } .p2p-art .dev .scr { fill: color-mix(in srgb, var(--vault) 25%, var(--panel)); stroke: none; }
.p2p-art .lan { fill: none; stroke: var(--muted); stroke-dasharray: 6 8; opacity: .5; }
.fx-off .p2p-art .pk { display: none; }
@media (max-width: 860px) { .p2p-wrap { grid-template-columns: 1fr; } }

/* AI night */
.night { background: radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, var(--night) 16%, transparent), transparent 70%); }
.timeline { list-style: none; padding: 0; margin: 0 0 22px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; position: relative; }
.timeline::before { content: ""; position: absolute; inset-inline: 4%; top: 15px; height: 2px; background: linear-gradient(90deg, var(--night), #d8ee73); opacity: .6; }
.timeline li { position: relative; padding-top: 34px; }
.timeline li::before { content: ""; position: absolute; top: 8px; inset-inline-start: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); border: 3px solid var(--night); box-shadow: 0 0 14px var(--night); }
.timeline time { font-weight: 700; font-size: 20px; color: var(--night); direction: ltr; unicode-bidi: isolate; }
.timeline h3 { margin: 2px 0 4px; font-size: 18px; } .timeline p { margin: 0; color: var(--muted); font-size: 14.5px; }
.night-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ncard { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.ncard .head { display: flex; align-items: center; gap: 10px; } .ncard h3 { margin: 0; font-size: 21px; } .ncard p { color: var(--muted); margin: 8px 0 0; }
@media (max-width: 860px) { .timeline { grid-template-columns: 1fr 1fr; } .timeline::before { display: none; } .night-cards { grid-template-columns: 1fr; } }

/* Global */
.glob-wrap { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: center; }
.glob-art svg { width: 100%; max-width: 420px; }
.glob-art .ring { fill: none; stroke: var(--line); stroke-width: 1.5; }
.glob-art .r0 { fill: color-mix(in srgb, var(--accent) 25%, transparent); stroke: var(--accent); }
.glob-art .r1 { stroke-dasharray: 2 6; } .glob-art .r2 { stroke-dasharray: 2 6; } .glob-art .r3 { stroke-dasharray: 2 8; }
.fx-on .glob-art .ring { animation: spin 60s linear infinite; transform-origin: 175px 175px; } .fx-on .glob-art .r2 { animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.glob-art .arc { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-dasharray: 300; stroke-dashoffset: 300; opacity: .8; }
.fx-on .glob-art .arc { animation: draw 4s ease-in-out infinite; } .fx-on .a1 { animation-delay: 1s; } .fx-on .a2 { animation-delay: 2s; } .fx-on .a3 { animation-delay: 3s; }
.fx-off .glob-art .arc { stroke-dashoffset: 0; }
@keyframes draw { 50% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -300; } }
.glob-art .home { fill: var(--accent); filter: drop-shadow(0 0 8px var(--accent)); }
.glob-art text { fill: var(--muted); font-size: 12px; font-family: inherit; }
.glob-pts { margin: 0; display: grid; gap: 14px; } .glob-pts div { display: grid; grid-template-columns: 90px 1fr; gap: 12px; }
.glob-pts dt { font-weight: 700; color: var(--accent); } .glob-pts dd { margin: 0; color: var(--muted); }
:root[data-theme="light"] .glob-pts dt { color: var(--deep); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .glob-pts dt { color: var(--deep); } }
@media (max-width: 860px) { .glob-wrap { grid-template-columns: 1fr; } }

/* Investors */
.investors { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 7%, transparent)); }
.inv-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 18px; margin-bottom: 22px; }
.pipeline { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.pipeline h3 { margin: 0 0 14px; }
.pipe { width: 100%; height: auto; overflow: visible; }
.pipe .seg { transform-box: fill-box; transform-origin: left center; }
.fx-on .pipeline:not(.in) .seg { transform: scaleX(0); } .fx-on .pipe .seg { transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.pipe text { fill: #1f292c; font-weight: 700; font-size: 18px; font-family: inherit; }
.pl-ship { fill: #7fd49a; } .pl-beta { fill: #a99cf0; } .pl-alpha { fill: #f0d98a; } .pl-dev { fill: #9fb3cf; }
.pipe-legend { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-size: 14px; color: var(--muted); }
.pipe-legend span { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-inline-end: 8px; vertical-align: -1px; }
.pipe-legend .pl-ship span { background: #7fd49a; } .pipe-legend .pl-beta span { background: #a99cf0; } .pipe-legend .pl-alpha span { background: #f0d98a; } .pipe-legend .pl-dev span { background: #9fb3cf; }
.why-inv { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wi { border-inline-start: 3px solid var(--accent); padding: 4px 0 4px 14px; padding-inline-start: 14px; }
.wi h3 { margin: 0 0 4px; font-size: 17.5px; } .wi p { margin: 0; color: var(--muted); font-size: 14.5px; }
@media (max-width: 860px) { .inv-grid, .why-inv { grid-template-columns: 1fr; } }

.legal .fine { font-size: 12.5px; opacity: .85; }
.brand .mark { width: 34px; height: 34px; }
nav.main { gap: 16px; font-size: 14.5px; }
.glob-art .dest { fill: var(--accent); opacity: .9; } .glob-art .home-lbl { fill: var(--ink); font-weight: 700; font-size: 13px; }
.glob-art .r0 { fill: color-mix(in srgb, var(--accent) 14%, transparent); }