/* ═══ الرئيسية ٣ (٢٧ أكتوبر ٢٠٢٦) — قرار المدير التنفيذي بعد مجلس ٤ نماذج: hq/site-v3/10-ceo-decision.md
   كتلة واحدة بلا حدود · فيديو الرياض · واجهات منتجات حيّة تعمل وحدها · الخطّ النحاسي المائل يصل المنتجات. */
:root{--deep:#0B2219;--deep-2:#123A2B}

/* الافتتاح */
.v3-hero{position:relative;min-height:min(92vh,860px);display:flex;align-items:center;overflow:hidden;color:#F3F1EA;background:var(--deep)}
.v3-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.v3-shade{position:absolute;inset:0;background:linear-gradient(270deg,rgba(11,34,25,.94) 0%,rgba(11,34,25,.78) 42%,rgba(11,34,25,.25) 100%),linear-gradient(0deg,rgba(11,34,25,.9),transparent 38%)}
.v3-hero-in{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding-block:96px 120px;width:100%}
.v3-kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-size:14.5px;color:#E2B884}
.v3-kicker:before{content:"";width:10px;height:18px;background:#C9914F;transform:skewX(-28deg);border-radius:2px}
.v3-copy h1{font-size:clamp(32px,4.6vw,58px);line-height:1.25;margin-top:16px;color:#fff}
.v3-copy h1 em{font-style:normal;color:#E2B884}
.v3-copy p{margin-top:20px;font-size:clamp(16.5px,1.4vw,19px);color:rgba(243,241,234,.82);max-width:52ch}
.v3-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn.glass{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(8px)}
.btn.glass:hover{background:rgba(255,255,255,.18)}
.v3-stage{position:relative;height:440px}
.fl{position:absolute;width:250px;padding:14px;border-radius:16px;background:rgba(255,255,255,.94);color:#13201B;box-shadow:0 24px 50px -18px rgba(0,0,0,.55);animation:flt 7s ease-in-out infinite}
.fl1{top:0;inset-inline-start:4%;animation-delay:-1s}
.fl2{top:30%;inset-inline-end:0;width:270px;animation-duration:8s;animation-delay:-3s}
.fl3{bottom:0;inset-inline-start:14%;animation-duration:9s}
@keyframes flt{50%{transform:translateY(-12px)}}
.fl-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.fl-h b{font-family:var(--display);font-size:14.5px}.fl-h span{font-size:11.5px;color:#56635D}
.fl-h.wa b:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#25A35A;margin-inline-end:6px}
.lo-row,.lo-tot{display:flex;justify-content:space-between;font-size:13px;padding:5px 0;border-bottom:1px dashed #E1DFD8;font-variant-numeric:tabular-nums}
.lo-tot{border:0;margin-top:4px;font-weight:600}.lo-tot b{color:#1F5A44}
.lo-row b{transition:color .3s}.lo-row b.up{color:#2C7A5C}
.wa-body{display:flex;flex-direction:column;gap:6px;min-height:118px}
.wa-body p{margin:0;max-width:88%;font-size:12.5px;line-height:1.6;padding:6px 10px;border-radius:10px;animation:evIn .35s both}
.wa-body p.in{align-self:flex-start;background:#F1F1EE}.wa-body p.out{align-self:flex-end;background:#DCF3E4}
.sc{display:grid;grid-template-columns:52px 1fr;align-items:center;gap:8px;font-size:12.5px;margin-top:7px}
.sc i{height:10px;border-radius:6px;background:linear-gradient(90deg,#1F5A44,#2C7A5C);width:var(--w);animation:grow 1.6s cubic-bezier(.2,.8,.2,1) both}
.sc:nth-child(3) i{background:linear-gradient(90deg,#B07A3B,#D6A060)}.sc:nth-child(4) i{background:#9AA8A1}
@keyframes grow{from{width:0}}
.v3-tag{position:absolute;bottom:-34px;inset-inline-end:0;font-size:11.5px;color:rgba(243,241,234,.65)}
.v3-down{position:absolute;bottom:22px;left:50%;width:28px;height:44px;margin-left:-14px;border:2px solid rgba(255,255,255,.5);border-radius:16px}
.v3-down i{position:absolute;left:50%;top:9px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:scrl 1.8s infinite}
@keyframes scrl{60%{transform:translateY(12px);opacity:0}}
@keyframes evIn{from{opacity:0;transform:translateY(10px)}}
@media (max-width:900px){
  .v3-hero{min-height:auto}
  .v3-hero-in{grid-template-columns:1fr;padding-block:56px 80px;gap:28px}
  .v3-shade{background:linear-gradient(0deg,rgba(11,34,25,.96) 30%,rgba(11,34,25,.7) 70%,rgba(11,34,25,.55))}
  .v3-stage{height:auto;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-20px;padding:6px 20px 14px;scrollbar-width:none}
  .fl{position:static;flex:none;width:248px;scroll-snap-align:start;animation:none}
  .v3-tag{position:static;align-self:center;flex:none}
  .v3-down{display:none}
}

/* شريط التعريف */
.v3-strip{background:linear-gradient(180deg,var(--deep),var(--deep-2));color:rgba(243,241,234,.86)}
.v3-strip p{padding-block:30px;font-size:clamp(16px,1.5vw,19px);max-width:70ch;margin-inline:auto;text-align:center}
.v3-strip b{color:#E2B884;font-family:var(--display)}

/* المنتجات الحيّة — كتلة واحدة متدرّجة بلا فواصل */
.v3-flow{position:relative;background:linear-gradient(180deg,var(--deep-2) 0,var(--ivory) 260px,var(--ivory) 40%,var(--copper-soft) 58%,var(--ivory) 72%)}
.pb-ag{background:linear-gradient(180deg,var(--ivory) 0,var(--deep-2) 110px,var(--deep) 100%)}
.v3-rail{position:absolute;top:120px;bottom:120px;inset-inline-start:max(20px,calc((100% - var(--max)) / 2 - 10px));width:4px}
.v3-rail:before{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--copper) 18%,transparent);border-radius:2px}
.v3-rail i{position:absolute;inset:0;background:linear-gradient(var(--copper),#D6A060);border-radius:2px;transform-origin:top;transform:scaleY(var(--p,0))}
.pband{position:relative;padding-block:110px}
.pband:before{content:"";position:absolute;inset-inline-start:max(14px,calc((100% - var(--max)) / 2 - 16px));top:118px;width:16px;height:28px;background:var(--copper);transform:skewX(-24deg);border-radius:3px;box-shadow:0 0 0 6px color-mix(in srgb,var(--copper) 18%,transparent)}
.pb-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center;padding-inline-start:48px}
.pb-in.rev .pb-copy{order:2}
.pb-n{font-family:var(--display);font-size:14.5px;color:var(--copper);font-weight:600}
.pb-copy h2{font-size:clamp(28px,3.4vw,44px);margin-top:12px;line-height:1.3}
.pb-copy p{margin-top:16px;font-size:17.5px;color:var(--muted);max-width:50ch}
.pb-pts{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:8px;font-size:15.5px}
.pb-pts li{display:flex;gap:10px;align-items:baseline}.pb-pts li:before{content:"";flex:none;width:7px;height:12px;background:var(--green-2);transform:skewX(-24deg);border-radius:1px}
.pb-link{display:inline-flex;margin-top:24px;font-weight:600;color:var(--green-2);text-decoration:none;border-bottom:2px solid var(--copper);padding-bottom:2px}
.pb-link:after{content:" ←";margin-inline-start:6px;transition:transform .2s}.pb-link:hover:after{transform:translateX(-4px)}
.pb-demo{position:relative;min-width:0}
.dev{background:var(--paper);border-radius:20px;box-shadow:0 40px 80px -30px rgba(19,32,27,.4),0 0 0 1px var(--line);overflow:hidden;transform:perspective(1400px) rotateY(var(--ry,-4deg));transition:transform .6s}
.pb-in.rev .dev{--ry:4deg}
.pb-demo:hover .dev{--ry:0deg}
.dev-bar{display:flex;align-items:center;gap:6px;padding:11px 16px;background:var(--green-soft)}
.dev-bar i{width:10px;height:10px;border-radius:50%;background:var(--line)}
.dev-bar span{margin-inline-start:12px;font-size:12.5px;color:var(--muted);background:var(--paper);padding:2px 14px;border-radius:999px}
.dev-body{padding:20px}
.chip{position:absolute;z-index:2;font-size:13px;font-weight:600;padding:9px 14px;border-radius:12px;background:var(--paper);color:var(--ink);box-shadow:0 16px 34px -14px rgba(19,32,27,.45);animation:flt 6s ease-in-out infinite;white-space:nowrap}
.chip.ch1{top:-18px;inset-inline-end:-14px;border-inline-start:3px solid var(--green-2)}
.chip.ch2{bottom:-16px;inset-inline-start:-18px;border-inline-start:3px solid var(--copper);animation-delay:-3s}
.pb-ag{color:#F3F1EA}
.pb-ag .pb-copy p{color:rgba(243,241,234,.78)}.pb-ag .pb-link{color:#E2B884}
.phone{width:min(330px,100%);margin-inline:auto;border-radius:36px;padding:12px;background:#0d1612;box-shadow:0 40px 80px -24px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08)}
.ph-top{display:flex;justify-content:space-between;align-items:baseline;padding:12px 14px;border-radius:24px 24px 0 0;background:#1F5A44;color:#fff}
.ph-top b{font-family:var(--display);font-size:15px}.ph-top span{font-size:11.5px;opacity:.8}
.phone .chat{height:340px;border-radius:0 0 24px 24px;background:#ECE5DA}
.chat{overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:14px}
.msg{max-width:84%;padding:8px 12px;border-radius:12px;font-size:14px;line-height:1.7;color:#13201B;animation:evIn .35s both}
.msg small{display:block;font-size:11px;color:#8A5A23;font-weight:600}
.msg.in{align-self:flex-start;background:#fff;border-start-start-radius:3px}
.msg.out{align-self:flex-end;background:#D9FDD3;border-start-end-radius:3px}
.msg.typing{display:flex;gap:4px;padding:12px}
.msg.typing i{width:7px;height:7px;border-radius:50%;background:#1F5A44;animation:dot 1s infinite}
.msg.typing i:nth-child(2){animation-delay:.15s}.msg.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{50%{opacity:.25;transform:translateY(-3px)}}
.chat-q{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.chat-q button,.co-switch button{font:600 14px var(--body);padding:8px 14px;border-radius:999px;cursor:pointer;border:1px solid var(--line);background:var(--ivory);color:var(--ink)}
.pb-ag .chat-q button{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#fff}
.chat-q button.on{background:var(--copper);border-color:var(--copper);color:#fff}
.co-switch{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.co-switch button.on{background:var(--copper);border-color:var(--copper);color:#fff}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.kpis div{background:var(--ivory);border-radius:12px;padding:10px 12px;min-width:0}
.kpis span{display:block;font-size:12px;color:var(--muted)}
.kpis b{font-family:var(--display);font-size:clamp(18px,1.9vw,24px);font-variant-numeric:tabular-nums}
.kpis small{font-size:11.5px;color:var(--muted);margin-inline-start:4px}
.bars{display:flex;align-items:flex-end;gap:7px;height:130px;margin-top:16px;padding:10px;border-radius:12px;background:linear-gradient(var(--line) 1px,transparent 1px) 0 0/100% 25%}
.bars i{flex:1;height:30%;border-radius:6px 6px 2px 2px;background:linear-gradient(var(--green-2),var(--green));transition:height .7s cubic-bezier(.2,.8,.2,1)}
.bars i:last-child{background:var(--copper)}
.feas{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.f-in{display:flex;flex-direction:column;gap:7px}
.f-in label{font-size:14px;font-weight:600;display:flex;justify-content:space-between;gap:6px;white-space:nowrap}
.f-in output,.sj-l output{color:var(--copper);font-family:var(--display);font-variant-numeric:tabular-nums}
.f-in input[type=range],#sj-b{width:100%;accent-color:var(--green-2)}
.f-in select{width:100%;font:inherit;padding:7px 10px;border-radius:10px;border:1px solid var(--line);background:var(--paper);color:var(--ink)}
.f-two{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.f-out{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start}
.plot{grid-column:1/-1;aspect-ratio:16/10;border:2px dashed var(--copper);border-radius:12px;display:grid;place-items:center;background:var(--copper-soft);margin-bottom:22px}
.bld{position:relative;background:var(--green-2);border-radius:6px;display:flex;flex-direction:column;gap:2px;padding:4px;transition:width .4s,height .4s}
.bld i{flex:1;background:rgba(255,255,255,.2);border-radius:2px}
.bld:after{content:attr(data-fl) " أدوار";position:absolute;inset:auto 0 -23px;text-align:center;font-size:12px;color:var(--copper);font-weight:600}
.f-res{background:var(--ivory);border-radius:12px;padding:10px 12px}
.f-res span{display:block;font-size:12px;color:var(--muted)}
.f-res b{font-family:var(--display);font-size:24px;font-variant-numeric:tabular-nums}
.f-res small{font-size:11.5px;color:var(--muted);margin-inline-start:4px}
.sj-l{display:block;font-weight:600;margin-bottom:6px;font-size:14.5px}
.sj-wrap{overflow-x:auto;margin-top:12px}
.sj-t{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.sj-t th{text-align:start;font-size:12px;color:var(--muted);font-weight:500;padding:7px;border-bottom:1px solid var(--line)}
.sj-t td{padding:8px 7px;border-bottom:1px dashed var(--line)}
.sj-t td b{font-family:var(--display);color:var(--green-2)}
@media (max-width:900px){
  .pband{padding-block:72px}
  .pb-in,.pb-in.rev{grid-template-columns:1fr;gap:40px;padding-inline-start:28px}
  .pb-in.rev .pb-copy{order:0}
  .v3-rail{inset-inline-start:14px}.pband:before{inset-inline-start:8px;top:76px}
  .dev,.pb-in.rev .dev{transform:none}
  .kpis{grid-template-columns:1fr 1fr}.feas{grid-template-columns:1fr}
  .chip.ch1{inset-inline-end:-4px}.chip.ch2{inset-inline-start:-4px}
}

/* من رسالتك إلى النتيجة */
.v3-how{background:var(--deep);color:#F3F1EA;padding-block:90px 100px}
.v3-how h2{font-size:clamp(28px,3.4vw,42px);text-align:center}
.how-line{list-style:none;padding:0;margin:56px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;position:relative;counter-reset:s}
.how-line:before{content:"";position:absolute;top:22px;inset-inline:16%;height:3px;background:linear-gradient(90deg,#D6A060,var(--copper));transform-origin:right;transform:scaleX(var(--p,0));transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.how-line.in:before{--p:1}
.how-line li{position:relative;text-align:center;padding-top:66px;counter-increment:s}
.how-line li:before{content:counter(s,arabic-indic);position:absolute;top:0;left:50%;margin-left:-23px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:700;background:var(--deep);border:2px solid var(--copper);color:#E2B884}
.how-line b{display:block;font-family:var(--display);font-size:20px}
.how-line span{display:block;margin-top:8px;color:rgba(243,241,234,.75);font-size:15.5px;max-width:30ch;margin-inline:auto}
@media (max-width:900px){.how-line{grid-template-columns:1fr;gap:34px}.how-line:before{display:none}}

/* لمن صُمّمت — فسيفساء صور بلا بطاقات */
.v3-who{display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:300px 300px;gap:6px;background:var(--deep)}
.wz{position:relative;overflow:hidden;display:block;color:#fff;text-decoration:none}
.wz-a{grid-row:1/3}
.wz img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.wz:hover img{transform:scale(1.05)}
.wz span{position:absolute;inset:auto 0 0;padding:28px 32px;background:linear-gradient(0deg,rgba(11,34,25,.88),transparent)}
.wz small{display:block;color:#E2B884;font-size:14px;font-weight:600}
.wz b{display:block;font-family:var(--display);font-size:clamp(20px,2.2vw,28px);margin-top:4px}
@media (max-width:900px){.v3-who{grid-template-columns:1fr;grid-template-rows:none}.wz-a{grid-row:auto}.wz{height:260px}}

/* الأسئلة والختام */
.v3-faq{padding-block:90px;background:var(--ivory)}
.v3-faq h2{font-size:clamp(26px,3vw,38px);margin-bottom:26px}
.v3-end{position:relative;padding-block:90px;text-align:center;color:#fff;background:linear-gradient(rgba(11,34,25,.82),rgba(11,34,25,.92)),url(riyadh-poster.webp) center/cover}
.v3-end h2{font-size:clamp(26px,3.2vw,40px)}
.v3-end .v3-ctas{justify-content:center}

/* الظهور عند التمرير */
.r3{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.r3.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.r3{opacity:1;transform:none}.fl,.chip{animation:none}.v3-rail i{transform:none}}

/* الأسئلة بلا صناديق — خطوط فاصلة فقط */
.v3-faq .faq details{background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;padding-inline:0}
.v3-faq .faq{max-width:860px}
@media (min-width:901px){.feas{grid-template-columns:1fr}.f-out{grid-template-columns:1fr 1fr 1.4fr}.plot{grid-column:auto;grid-row:1/3;grid-column-start:3;margin:0}}