/* ============================================================
   صبّارة AI — طبقة العمق (depth.css)
   DEPTH LAYER — a layer on top of zahra.css + glow.css.
   · Hero: staged 3D demo (tilt, ghost layers as the first two
     stations peeking out, key light), pipeline nodes that follow
     the live conversation, headline word masks.
   · Brand mark: nodes light once on load, then on hover.
   · Header compaction, magnetic buttons (CSS variable), grain under
     the content, display numerals, section dividers, guard icons,
     numbered scan options, closing rings, product preview base.
   The exploded anatomy of 2026-09-04 (six plates + label column) was
   replaced on 2026-09-06 by «الشعار ينفتح» in css/journey.css.
   Official palette only (CSS tokens from zahra.css). RTL/LTR safe,
   fully calm under prefers-reduced-motion, visible without JS.
   ============================================================ */

/* ---------- 1. surface grain: a tiled texture UNDER the content (~3%) ---------- */
.grain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:160px 160px}
html[data-theme="light"] .grain{opacity:.03;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .06  0 0 0 0 .36  0 0 0 0 .29  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
main,.footer{position:relative;z-index:1}

/* ---------- 2. brand mark — nodes light in sequence once, then on hover ---------- */
@keyframes lgNode{0%,100%{fill:#0C1219}30%{fill:var(--mint)}70%{fill:#0C1219}}
@keyframes lgRing{0%,100%{stroke:#0C1219}30%{stroke:var(--mint)}70%{stroke:#0C1219}}
html.js .brand__icon .lg-ring{animation:lgRing 1.6s ease-in-out .6s 1}
html.js .brand__icon .lg-n1{animation:lgNode 1.6s ease-in-out .8s 1}
html.js .brand__icon .lg-n2{animation:lgNode 1.6s ease-in-out 1s 1}
html.js .brand__icon .lg-n3{animation:lgNode 1.6s ease-in-out 1.2s 1}
.brand:hover .brand__icon .lg-ring{animation:lgRing 1.4s ease-in-out 0s 1}
.brand:hover .brand__icon .lg-n1{animation:lgNode 1.4s ease-in-out .15s 1}
.brand:hover .brand__icon .lg-n2{animation:lgNode 1.4s ease-in-out .3s 1}
.brand:hover .brand__icon .lg-n3{animation:lgNode 1.4s ease-in-out .45s 1}

/* ---------- 3. header: compact on scroll ---------- */
.site-header{transition:background .35s ease,box-shadow .35s ease,border-color .35s ease}
.site-header.is-scrolled{background:rgba(5,15,14,.84);box-shadow:0 24px 60px -36px rgba(0,0,0,.7)}
.site-header.is-scrolled .nav{min-height:68px}
.nav{transition:min-height .3s ease}
.nav-menu a.is-active{color:#fff}
.nav-menu a.is-active::after{transform:scaleX(1)}
.nav-menu.has-active a[aria-current="page"]:not(.is-active){color:#c8d8d3}
.nav-menu.has-active a[aria-current="page"]:not(.is-active)::after{transform:scaleX(0)}

/* ---------- 4. hero: entrance (hidden-then-revealed only when JS runs) ---------- */
.hero{position:relative;overflow:hidden} /* the key light behind the stage bleeds past the column; keep it off the scroll width */
.hero h1 b{display:block;font-weight:inherit;color:inherit}
html.js .hero .kicker,html.js .hero__copy>p,html.js .hero__actions,html.js .hero .trust-line,html.js .hero__stage,html.js .sectors{
  opacity:0;transform:translateY(16px)}
html.i18n-ready .hero .kicker{animation:riseIn .8s var(--ease-out) .05s forwards}
html.i18n-ready .hero__copy>p{animation:riseIn .9s var(--ease-out) .5s forwards}
html.i18n-ready .hero__actions{animation:riseIn .9s var(--ease-out) .62s forwards}
html.i18n-ready .hero .trust-line{animation:riseIn .9s var(--ease-out) .74s forwards}
html.i18n-ready .sectors{animation:riseIn .9s var(--ease-out) .3s forwards}
html.i18n-ready .hero__stage{animation:riseIn 1.1s var(--ease-out) .38s forwards}
/* word masks: the headline reveals by word (never by letter), 480 ms each, staggered 90 ms */
.hero h1 .w{display:inline-block;white-space:nowrap}
html.js .hero h1.is-split .w{opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(.28em)}
html.i18n-ready .hero h1.is-split .w{animation:wordIn .48s var(--ease-out) forwards;animation-delay:calc(.16s + var(--i,0) * 90ms)}
@keyframes wordIn{to{opacity:1;clip-path:inset(-12% -6% -22% -6%);transform:none}}
.hero__actions .button{will-change:transform}

/* ---------- 5. hero: 3D stage around the live demo ---------- */
.hero__demo{position:relative;display:grid;justify-items:center;gap:14px}
.hero__demo::before{content:"";position:absolute;inset:-10% -12% 0;z-index:-1;pointer-events:none;
  background:radial-gradient(48% 48% at 50% 46%,rgba(22,201,154,.14),transparent 72%)}
.hero__stage{position:relative;width:100%;max-width:560px;perspective:1500px}
.stage-3d{position:relative;transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .6s var(--ease-out);will-change:transform}
.stage-3d .demo{position:relative;z-index:2;transform:translateZ(0)}
/* the two ghost layers are the first two stations peeking out below the demo — visible at rest */
.stage-layer{position:absolute;inset:0;border-radius:var(--radius-lg);pointer-events:none;
  border:1px solid rgba(63,232,182,.16);
  background:linear-gradient(180deg,rgba(13,32,29,.72),rgba(6,17,16,.6));
  box-shadow:0 30px 70px -40px rgba(0,0,0,.9)}
.stage-layer--1{transform:translate3d(0,30px,-70px) scale(.955);opacity:.95}
.stage-layer--2{transform:translate3d(0,58px,-140px) scale(.91);opacity:.7}
.stage-layer::after{content:"";position:absolute;inset-inline:18px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(63,232,182,.45),transparent)}
/* pipeline nodes under the conversation — driven by the real demo (js/depth.js syncs them to the bubbles) */
.demo__flow{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;list-style:none;margin:0;
  padding:12px 12px 14px;border-top:1px dashed var(--line-strong);text-align:center}
.demo__flow li{position:relative;padding-top:15px;font-size:12px;line-height:1.35;
  color:var(--muted-dim);letter-spacing:0;transition:color .4s ease}
.demo__flow li::before{content:"";position:absolute;z-index:1;top:0;left:50%;width:7px;height:7px;
  margin-left:-3.5px;border-radius:50%;background:rgba(63,232,182,.22);
  transition:background .4s ease,box-shadow .4s ease,transform .4s ease}
.demo__flow li::after{content:"";position:absolute;top:3px;height:1px;
  inset-inline-start:calc(50% + 7px);inset-inline-end:calc(-50% + 7px);
  background:linear-gradient(90deg,rgba(63,232,182,.3),rgba(63,232,182,.06));opacity:.5;transition:opacity .4s ease}
html[dir="rtl"] .demo__flow li::after{background:linear-gradient(270deg,rgba(63,232,182,.3),rgba(63,232,182,.06))}
.demo__flow li:last-child::after{display:none}
.demo__flow li.is-on{color:#cfe0db}
.demo__flow li.is-on::before{background:var(--mint)}
.demo__flow li.is-on::after{opacity:1}
.demo__flow li.is-now{color:#fff}
.demo__flow li.is-now::before{box-shadow:0 0 0 4px rgba(63,232,182,.18),0 0 14px 2px rgba(63,232,182,.7);transform:scale(1.15)}

/* ---------- 6. primary buttons: shine sweep on hover only ---------- */
.button{position:relative;overflow:hidden}
.button--primary::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.34) 50%,transparent 68%);
  transform:translateX(-130%);transition:transform .75s ease}
.button--primary:hover::after{transform:translateX(130%)}

/* ---------- 7. guard: icons ---------- */
.guard__copy,.guard__list{position:relative;z-index:1}
.guard__list li{text-align:start;display:grid;grid-template-columns:44px 1fr;column-gap:14px;align-items:center;padding:18px 20px}
.guard__icon{grid-row:1/3;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(160deg,rgba(31,217,160,.14),rgba(14,92,74,.10));border:1px solid rgba(22,201,154,.22);
  transition:transform .28s ease,border-color .28s ease}
.guard__icon svg{width:21px;height:21px;fill:none;stroke:var(--mint);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.guard__list li:hover .guard__icon{transform:translateY(-2px);border-color:rgba(31,217,160,.4)}
.guard__list li:last-child{grid-template-columns:44px 1fr}
.guard__list span{margin-top:3px}

/* ---------- 8. scan: segmented progress, numbered options ---------- */
.scan__bar{height:5px;border-radius:0;
  -webkit-mask:repeating-linear-gradient(90deg,#000 0,#000 calc(100%/7 - 4px),transparent calc(100%/7 - 4px),transparent calc(100%/7));
  mask:repeating-linear-gradient(90deg,#000 0,#000 calc(100%/7 - 4px),transparent calc(100%/7 - 4px),transparent calc(100%/7))}
.scan::before{content:"";position:absolute;top:-1px;inset-inline:8%;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(63,232,182,.9),transparent);
  background-size:36% 100%;background-repeat:no-repeat;background-position:-40% 0;opacity:0;transition:opacity .4s ease}
.scan.is-active::before{opacity:1;animation:scanSweep 5.5s ease-in-out infinite}
@keyframes scanSweep{0%{background-position:-40% 0}60%,100%{background-position:140% 0}}
.scan__options{counter-reset:opt}
.scan__opt{position:relative;counter-increment:opt;display:flex;align-items:center;gap:12px}
.scan__opt::before{content:counter(opt);flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  font-family:var(--ff-lat);font-size:12px;font-weight:600;color:var(--muted);
  border:1px solid var(--line-strong);background:rgba(255,255,255,.03);transition:color .22s ease,background .22s ease,border-color .22s ease}
.scan__opt:hover::before,.scan__opt.is-picked::before{color:#04120f;background:linear-gradient(135deg,var(--mint),var(--teal));border-color:transparent}

/* ---------- 9. faq open accent ---------- */
.faq details[open]{background:linear-gradient(90deg,rgba(22,201,154,.07),transparent 42%),var(--card)}
html[dir="rtl"] .faq details[open]{background:linear-gradient(270deg,rgba(22,201,154,.07),transparent 42%),var(--card)}

/* ---------- 10. pricing page: headline reveal, tabular numbers ---------- */
html.js .pricing-hero .eyebrow,html.js .pricing-hero h1,html.js .pricing-hero__sub,html.js .jump-pills{opacity:0;transform:translateY(16px)}
html.i18n-ready .pricing-hero .eyebrow{animation:riseIn .8s var(--ease-out) .05s forwards}
html.i18n-ready .pricing-hero h1{animation:riseIn .9s var(--ease-out) .16s forwards}
html.i18n-ready .pricing-hero__sub{animation:riseIn .9s var(--ease-out) .3s forwards}
html.i18n-ready .jump-pills{animation:riseIn .9s var(--ease-out) .42s forwards}
.price-card__price,.price-block__main,.map-strip__amount b,.ready-flag__pricebox b{font-variant-numeric:tabular-nums}

/* ---------- 10b. price numerals in the Latin display face (both languages) ---------- */
.price-block__main b,.price-card__price b{font-family:var(--ff-lat);font-weight:700;letter-spacing:-.02em;
  line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.price-block__main b{font-size:1.34em}
.price-card__price b{font-size:1.16em}
.price-now,.map-strip__amount b{font-family:var(--ff-lat);letter-spacing:-.02em}

/* ---------- 10c. solution cards: editorial polish + the network on the wide card ---------- */
.sol-card__icon{width:50px;height:50px}
.sol-card__icon svg{width:23px;height:23px}
.sol-card h3{font-size:21px}
.sol-card__net{position:absolute;inset-inline-end:-26px;bottom:-34px;width:300px;height:auto;opacity:.3;
  pointer-events:none;transition:opacity .4s ease;z-index:0}
.sol-card:hover .sol-card__net{opacity:.5}
.sol-card__net .net-links path{fill:none;stroke:rgba(63,232,182,.55);stroke-width:1.2;
  stroke-dasharray:420;stroke-dashoffset:420;transition:stroke-dashoffset 1.8s ease .4s}
.sol-grid.is-visible .sol-card__net .net-links path{stroke-dashoffset:0}
.sol-card__net .net-nodes circle{fill:#0b1c19;stroke:var(--mint);stroke-width:1.5}
.sol-card__net .net-core{fill:var(--mint);stroke:none}

/* ---------- 10d. Smart Portfolio — product preview base (the sequence lives in journey.css) ---------- */
.pf-mock{position:relative;margin:-2px -2px 18px;border-radius:14px;overflow:hidden;min-height:196px}
.pf-mock__page{position:relative;border-radius:14px;border:1px solid var(--line-strong);
  background:linear-gradient(180deg,rgba(13,32,29,.85),rgba(6,17,16,.92));overflow:hidden;
  box-shadow:0 24px 50px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.06)}
.pf-mock__bar{display:flex;gap:5px;padding:9px 11px;border-bottom:1px solid var(--line)}
.pf-mock__bar i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.14)}
.pf-mock__bar i:first-child{background:rgba(63,232,182,.75)}
.pf-mock__profile{display:flex;align-items:center;gap:10px;padding:12px 12px 8px}
.pf-mock__avatar{width:30px;height:30px;border-radius:50%;flex:none;background:linear-gradient(135deg,var(--mint),var(--teal))}
.pf-mock__lines{flex:1;display:grid;gap:6px}
.pf-mock__lines i{display:block;height:6px;border-radius:99px;background:rgba(255,255,255,.14);width:var(--w,60%)}
.pf-mock__tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:4px 12px 10px}
.pf-mock__tiles i{height:30px;border-radius:7px;border:1px solid rgba(63,232,182,.14);
  background:linear-gradient(160deg,rgba(22,201,154,.16),rgba(255,255,255,.03))}
.pf-mock__chat{border-top:1px dashed var(--line-strong);padding:10px 12px 12px;display:grid;gap:6px}
.ready-flag .pf-mock__q,.ready-flag .pf-mock__a{margin:0;max-width:88%;font-size:11.8px;line-height:1.5;padding:6px 10px;border-radius:10px}
.ready-flag .pf-mock__q{justify-self:end;background:rgba(255,255,255,.05);border:1px solid var(--line-strong);color:#dcece7;border-end-end-radius:3px}
.ready-flag .pf-mock__a{justify-self:start;background:linear-gradient(135deg,var(--mint),var(--teal));color:#04120f;font-weight:500;border-end-start-radius:3px}

/* ---------- 10e. structure: hairline dividers between the long page's sections ---------- */
main > .section:not(.section--anatomy):not(#scan):not(.section--field)::before{content:"";position:absolute;top:0;inset-inline:var(--gutter);height:1px;
  pointer-events:none;background:linear-gradient(90deg,transparent,var(--line-strong) 20%,var(--line-strong) 80%,transparent)}

/* ---------- 10f. closing CTA: concentric rings, content above ---------- */
.cta-card{overflow:hidden}
.cta-card>*{position:relative;z-index:1}
.cta-card::before{content:"";position:absolute;top:-46%;inset-inline-end:-8%;width:440px;aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(63,232,182,.14);pointer-events:none;
  box-shadow:0 0 0 62px rgba(63,232,182,.025),0 0 0 63px rgba(63,232,182,.08),0 0 0 136px rgba(63,232,182,.015),0 0 0 137px rgba(63,232,182,.05)}

/* ---------- 11. light theme: component colours (materials live in journey.css) ---------- */
html[data-theme="light"] .nav-menu a.is-active{color:var(--ink)}
html[data-theme="light"] .nav-menu.has-active a[aria-current="page"]:not(.is-active){color:#414d59}
html[data-theme="light"] .demo__flow li{color:#b5c4be}
html[data-theme="light"] .demo__flow li.is-on{color:#dcece7}
html[data-theme="light"] .demo__flow li.is-now{color:#fff}
html[data-theme="light"] .guard__icon svg{stroke:var(--jade)}
html[data-theme="light"] .faq details[open]{background:linear-gradient(90deg,rgba(14,92,74,.08),transparent 42%),var(--card)}
html[data-theme="light"][dir="rtl"] .faq details[open]{background:linear-gradient(270deg,rgba(14,92,74,.08),transparent 42%),var(--card)}
html[data-theme="light"] .price-block__main b,html[data-theme="light"] .price-card__price b{color:var(--ink)}
html[data-theme="light"] .sol-card__net .net-nodes circle{fill:#f5f1e8;stroke:var(--jade)}
html[data-theme="light"] .sol-card__net .net-core{fill:var(--jade)}
html[data-theme="light"] .sol-card__net .net-links path{stroke:rgba(14,92,74,.45)}
html[data-theme="light"] .scan__opt::before{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#b5c4be}
html[data-theme="light"] .scan::before{background:linear-gradient(90deg,transparent,rgba(31,217,160,.9),transparent);background-size:36% 100%;background-repeat:no-repeat}
html[data-theme="light"] .cta-card::before{border-color:rgba(245,241,232,.5);
  box-shadow:0 0 0 62px rgba(245,241,232,.06),0 0 0 63px rgba(245,241,232,.22),0 0 0 136px rgba(245,241,232,.04),0 0 0 137px rgba(245,241,232,.14)}
html[data-theme="light"] .site-header.is-scrolled{background:rgba(245,241,232,.9);box-shadow:0 12px 32px -20px rgba(14,92,74,.28)}
html[data-theme="light"] .site-header{background:rgba(245,241,232,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:rgba(14,92,74,.12)}

/* ---------- 12. responsive ---------- */
@media (max-width:1024px){
  .hero__stage{max-width:560px}
}
@media (max-width:720px){
  .stage-layer--1{transform:translate3d(0,16px,-70px) scale(.965)}
  .stage-layer--2{transform:translate3d(0,32px,-140px) scale(.93)}
  .demo__flow{grid-template-columns:repeat(4,1fr);padding:11px 8px 12px}
  .demo__flow li{font-size:12px}
  .sol-card__net{display:none}
  .cta-card::before{width:320px;top:-30%}
  .guard__list li{padding:16px}
}

/* ---------- 13. reduced motion: the layer stands still ---------- */
@media (prefers-reduced-motion:reduce){
  .hero .kicker,.hero h1 .w,.hero__copy>p,.hero__actions,.hero .trust-line,.hero__stage,.sectors,
  .pricing-hero .eyebrow,.pricing-hero h1,.pricing-hero__sub,.jump-pills{opacity:1;transform:none;clip-path:none;animation:none!important}
  .lg-ring,.lg-n1,.lg-n2,.lg-n3,.scan::before{animation:none!important}
  .stage-3d{transition:none}
  .button--primary::after{display:none}
}