/* ============================================================================
   home.css — أنماط صفحة الهبوط وحدها (Fu Operation)          [FDX_FUOP_HOME_CSS]
   يعتمد توكنات fuop.css ولا يعدّلها. مالك الملف: كلود.
   كل ما هنا خاص بـindex.html — لا تضع فيه مكوّناً عاماً (مكانه fuop.css).
   ========================================================================= */

/* ─────────────────── ① البطل ─────────────────── */
.hero{padding-block:calc(var(--s9) + var(--s4)) var(--s8)}
.hero-bg{position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(1100px 520px at 88% -12%, color-mix(in srgb,var(--brand) 16%,transparent), transparent 62%),
    radial-gradient(900px 480px at 4% 8%, color-mix(in srgb,var(--deep) 14%,transparent), transparent 60%);
  pointer-events:none}
.hero-bg::after{content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 0%,#000,transparent 75%);
  mask-image:radial-gradient(70% 60% at 50% 0%,#000,transparent 75%)}

.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:var(--s8);align-items:center}
.hero-copy .display{margin-block:var(--s4) var(--s4);font-size:clamp(34px,5.2vw,var(--fs-5xl));line-height:1.12}
.hero-copy .lead{margin-block-end:var(--s6)}
.hero-copy .btns{margin-block-end:var(--s6)}

.hero-assur{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.hero-assur li{display:flex;gap:var(--s2);align-items:flex-start;
  font-size:var(--fs-sm);color:var(--ink-2);line-height:1.6}
.hero-assur .ico{inline-size:18px;block-size:18px;flex:none;color:var(--brand);margin-block-start:2px}

/* الصورة + بطاقات الإثبات الطافية */
.hero-art{position:relative;min-block-size:440px}
.hero-photo{margin:0;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-3);
  border:1px solid var(--line);position:relative;isolation:isolate}
.hero-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(200deg,transparent 45%,color-mix(in srgb,var(--deep) 42%,transparent))}
.hero-photo img{display:block;inline-size:100%;block-size:auto;aspect-ratio:1/1;object-fit:cover}

.float-card{position:absolute;background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:saturate(180%) blur(16px);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-3);padding:var(--s4);z-index:2;
  animation:fo-float 7s var(--ease) infinite alternate}
.fc-1{inset-block-start:12%;inset-inline-start:-8%;inline-size:min(252px,64%)}
.fc-2{inset-block-end:6%;inset-inline-end:-6%;inline-size:min(290px,72%);animation-delay:-3.5s;
  display:flex;flex-direction:column;gap:var(--s3)}
.fc-head{display:flex;align-items:center;gap:var(--s2);justify-content:space-between;
  font-size:var(--fs-xs);color:var(--ink-3);font-weight:600;margin-block-end:var(--s2)}
.fc-head span:first-child{display:flex;align-items:center;gap:6px}
.fc-timer{font-size:26px;font-weight:800;color:var(--ink);letter-spacing:.02em}
.fc-timer .mono{font-variant-numeric:tabular-nums}
.fc-sub{font-size:var(--fs-xs);color:var(--ink-3);margin-block-start:2px}
.fc-2 .m-top{display:flex;justify-content:space-between;font-size:var(--fs-xs);color:var(--ink-2)}
@keyframes fo-float{from{transform:translateY(0)}to{transform:translateY(-12px)}}
@media (prefers-reduced-motion:reduce){.float-card{animation:none}}

/* شريط القدرات */
.cap-strip{list-style:none;margin:var(--s8) 0 0;padding:var(--s5) var(--s4);display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s4);text-align:center;
  border-block-start:1px solid var(--line);border-block-end:1px solid var(--line)}
.cap-strip li{display:flex;flex-direction:column;gap:4px;position:relative}
.cap-strip li+li::before{content:"";position:absolute;inset-inline-start:calc(var(--s4) * -.5);
  inset-block:12%;inline-size:1px;background:var(--line)}
.cap-n{font-size:var(--fs-2xl);font-weight:800;color:var(--brand);line-height:1.1}
.cap-k{font-size:var(--fs-xs);color:var(--ink-3)}

/* ─────────────────── ② المساران ─────────────────── */
.path-grid{align-items:stretch}
.path-grid > [class^="c"]{display:flex}
.path-card{flex:1;display:flex;flex-direction:column;gap:var(--s4);position:relative;overflow:hidden}
.path-card.featured{border-color:color-mix(in srgb,var(--brand) 42%,var(--line));box-shadow:var(--sh-2)}
.path-card.featured::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;
  block-size:4px;background:var(--grad)}
.path-card .ribbon{position:absolute;inset-block-start:var(--s4);inset-inline-end:var(--s4);
  background:var(--brand);color:#fff;font-size:var(--fs-xs);font-weight:700;
  padding:4px 10px;border-radius:var(--r-full)}
.path-ico{inline-size:52px;block-size:52px;border-radius:var(--r);display:grid;place-items:center;
  background:var(--brand-050);color:var(--brand);flex:none}
.path-ico.deep{background:var(--deep-050);color:var(--deep)}
.path-card .ticks{margin-block:var(--s2) 0}
.path-foot{margin-block-start:auto;padding-block-start:var(--s4);border-block-start:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.path-price{font-size:var(--fs-sm);color:var(--ink-3)}
.path-price strong{font-size:var(--fs-xl);color:var(--ink);font-weight:800}

.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.ticks li{position:relative;padding-inline-start:26px;font-size:var(--fs-sm);color:var(--ink-2);line-height:1.65}
.ticks li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:7px;
  inline-size:16px;block-size:16px;border-radius:50%;background:var(--brand-050);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--brand) 45%,transparent)}
.ticks li::after{content:"";position:absolute;inset-inline-start:5px;inset-block-start:11px;
  inline-size:5px;block-size:8px;border:solid var(--brand);border-width:0 1.8px 1.8px 0;
  transform:rotate(40deg)}
.ticks.lg li{font-size:var(--fs-md);padding-block:2px}

/* ─────────────────── ③ كيف تعمل ─────────────────── */
.how-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s6);
  counter-reset:how;position:relative}
.how-list::before{content:"";position:absolute;inset-block:60px 60px;inset-inline-start:119px;
  inline-size:2px;background:linear-gradient(var(--brand),var(--deep));opacity:.22}
.how-item{display:grid;grid-template-columns:240px minmax(0,1fr);gap:var(--s6);align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:var(--s5) var(--s6);box-shadow:var(--sh-1);position:relative}
.how-art{display:grid;place-items:center}
.how-art img{inline-size:100%;max-inline-size:190px;block-size:auto}
.how-body{position:relative}
.how-n{position:absolute;inset-block-start:-6px;inset-inline-start:-58px;
  inline-size:40px;block-size:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface);border:2px solid var(--brand);color:var(--brand);
  font-weight:800;font-size:var(--fs-lg);z-index:1}
.how-body h3{margin-block-end:var(--s2)}
.how-body p{color:var(--ink-2);line-height:1.8;margin-block-end:var(--s3);max-inline-size:64ch}
.how-out{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:600;
  color:var(--deep);background:var(--deep-050);padding:5px 12px;border-radius:var(--r-full)}

/* ─────────────────── ⑤ المشغّلون ─────────────────── */
.ops-grid{align-items:stretch}
.ops-grid > [class^="c"]{display:flex}
.ops-grid .op-card{flex:1}
.op-photo{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--surface-2)}
.op-photo img{inline-size:100%;block-size:100%;object-fit:cover;object-position:50% 22%;
  transition:transform .5s var(--ease)}
.op-card:hover .op-photo img{transform:scale(1.04)}
.op-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,color-mix(in srgb,var(--deep) 30%,transparent),transparent 55%)}
.note-fine{margin-block-start:var(--s5);font-size:var(--fs-xs)}
.avail.soon{color:var(--warn)}

/* ─────────────────── ⑥ الغرفة الزجاجية ─────────────────── */
.glass-sec{position:relative;overflow:hidden}
.glass-sec::before{content:"";position:absolute;inset-block-start:-30%;inset-inline-end:-10%;
  inline-size:620px;block-size:620px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 12%,transparent),transparent 68%);
  pointer-events:none}
.callout{display:flex;gap:var(--s3);align-items:flex-start;margin-block-start:var(--s5);
  padding:var(--s4);border-radius:var(--r);background:var(--surface-2);
  border-inline-start:3px solid var(--brand);font-size:var(--fs-sm);color:var(--ink-2);line-height:1.7}
.callout .ico{color:var(--brand);flex:none;inline-size:20px;block-size:20px;margin-block-start:2px}

.glass-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--sh-3);overflow:hidden}
.gp-head{display:flex;align-items:center;justify-content:space-between;
  padding:var(--s4) var(--s5);border-block-end:1px solid var(--line);background:var(--surface-2)}
.gp-title{font-weight:700}
.gp-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);padding:var(--s4)}
.gp-stats .stat{box-shadow:none;padding:var(--s4)}
.gp-feed{padding:0 var(--s5) var(--s5)}
.gp-feed-h{font-size:var(--fs-xs);font-weight:700;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.06em;margin-block-end:var(--s3)}
.feed{list-style:none;margin:0;padding:0;position:relative}
.feed::before{content:"";position:absolute;inset-block:10px;inset-inline-start:47px;
  inline-size:1px;background:var(--line)}
.feed li{display:flex;gap:var(--s3);align-items:flex-start;padding-block:9px;
  font-size:var(--fs-sm);color:var(--ink-2);position:relative}
.feed .t{color:var(--ink-4);font-size:var(--fs-xs);inline-size:42px;flex:none;padding-block-start:2px}
.feed .d{position:relative;padding-inline-start:var(--s4)}
.feed .d::before{content:"";position:absolute;inset-inline-start:-4px;inset-block-start:8px;
  inline-size:9px;block-size:9px;border-radius:50%;background:var(--surface);
  box-shadow:inset 0 0 0 2px var(--brand)}
.feed .badge{margin-inline-start:8px}

/* ─────────────────── ⑦ اتفاقية التوقعات ─────────────────── */
.ea-demo{display:flex;flex-direction:column;gap:var(--s4)}
.ea-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3)}
.ea-table{font-size:var(--fs-sm)}
.ea-table td:not(:first-child),.ea-table th:not(:first-child){text-align:center}
.ea-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);
  flex-wrap:wrap;padding-block-start:var(--s4);border-block-start:1px solid var(--line)}
.score-n{font-size:var(--fs-3xl);font-weight:800;color:var(--brand);line-height:1}
.score-max{font-size:var(--fs-lg);color:var(--ink-4);font-weight:700}
.f-ico{inline-size:38px;block-size:38px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--brand-050);color:var(--brand);flex:none}
.feature p{margin-block-start:2px;font-size:var(--fs-sm);line-height:1.65}

/* ─────────────────── ⑧ المقارنة ─────────────────── */
.cmp-table{min-inline-size:760px}
.cmp-table th{font-size:var(--fs-sm);vertical-align:bottom}
.cmp-table th.us,.cmp-table td.us{background:color-mix(in srgb,var(--brand) 7%,transparent)}
.cmp-table th.us{color:var(--brand);font-weight:800;
  border-block-start:3px solid var(--brand);border-start-start-radius:var(--r-sm);border-start-end-radius:var(--r-sm)}
.cmp-table td{font-size:var(--fs-sm);color:var(--ink-3);vertical-align:middle}
.cmp-table td:first-child{color:var(--ink);font-weight:600}
.cmp-table .yes{color:var(--ink);font-weight:600;display:inline-flex;align-items:center;gap:6px}
.cmp-table .yes::before{content:"";inline-size:7px;block-size:7px;border-radius:50%;background:var(--ok);flex:none}

/* ─────────────────── ⑨/⑩ ─────────────────── */
.eco-bento .bento-cell{align-items:flex-start}
.wrap.narrow{max-inline-size:860px}
.accordion details{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  margin-block-end:var(--s2);overflow:hidden}
.accordion summary{cursor:pointer;padding:var(--s4) var(--s5);font-weight:700;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary::after{content:"";inline-size:9px;block-size:9px;flex:none;
  border:solid var(--ink-3);border-width:0 2px 2px 0;transform:rotate(45deg);
  transition:transform var(--dur) var(--ease);margin-block-start:-4px}
.accordion details[open] summary::after{transform:rotate(-135deg);margin-block-start:2px}
.accordion details[open] summary{color:var(--brand)}
.acc-body{padding:0 var(--s5) var(--s5);color:var(--ink-2);font-size:var(--fs-sm);line-height:1.85}
.cta-band .btns{margin-block-start:var(--s5);justify-content:center}
.cta-band p{color:rgba(255,255,255,.86);max-inline-size:56ch;margin-inline:auto}

/* ─────────────────── التذييل ─────────────────── */
.foot{background:var(--surface-2);border-block-start:1px solid var(--line);padding-block:var(--s8) var(--s5);margin-block-start:var(--s8)}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:var(--s6)}
.foot-grid > div{display:flex;flex-direction:column;gap:8px}
.foot-h{font-weight:700;font-size:var(--fs-sm);margin-block-end:4px}
.foot-grid a{color:var(--ink-3);font-size:var(--fs-sm);text-decoration:none}
.foot-grid a:hover{color:var(--brand)}
.foot-brand .nm-full{font-size:var(--fs-xl);font-weight:800;color:var(--ink)}
.foot-brand .nm-full em{font-style:normal;color:var(--brand)}
.foot-bar{margin-block-start:var(--s6);padding-block-start:var(--s4);border-block-start:1px solid var(--line);
  display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.foot-bar a{color:var(--ink-3)}

/* ─────────────────── متجاوب ─────────────────── */
@media (max-width:1040px){
  .hero-grid{grid-template-columns:1fr;gap:var(--s7)}
  .hero-art{min-block-size:0;max-inline-size:520px;margin-inline:auto;inline-size:100%}
  .fc-1{inset-inline-start:-4%}
  .fc-2{inset-inline-end:-2%}
  .cap-strip{grid-template-columns:repeat(3,1fr);gap:var(--s5)}
  .cap-strip li:nth-child(3n+1)::before{display:none}
  .how-list::before{display:none}
  .how-item{grid-template-columns:150px minmax(0,1fr);gap:var(--s5)}
  .how-n{position:static;margin-block-end:var(--s2)}
  .gp-stats{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .hero{padding-block:var(--s7) var(--s6)}
  .hero-copy .btns .btn{inline-size:100%;justify-content:center}
  .float-card{position:static;inline-size:100%;margin-block-start:var(--s3);animation:none}
  .hero-art{display:flex;flex-direction:column}
  .cap-strip{grid-template-columns:repeat(2,1fr)}
  .cap-strip li::before{display:none}
  .how-item{grid-template-columns:1fr;padding:var(--s5)}
  .how-art{display:none}
  .foot-grid{grid-template-columns:1fr}
  .ea-foot{flex-direction:column;align-items:flex-start}
}

/* ─────────────────── الوضع الداكن ─────────────────── */
/* التوكنات نفسها تنقلب في fuop.css؛ هنا فقط ما يحتاج ضبطاً بصرياً إضافياً. */
:root[data-theme="dark"] .float-card,
:root[data-theme="dark"] .glass-panel{background:color-mix(in srgb,var(--surface) 88%,transparent)}
:root[data-theme="dark"] .hero-photo::after{
  background:linear-gradient(200deg,transparent 40%,color-mix(in srgb,#000 55%,transparent))}
:root[data-theme="dark"] .hero-bg::after{opacity:.28}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .float-card,
  :root:not([data-theme="light"]) .glass-panel{background:color-mix(in srgb,var(--surface) 88%,transparent)}
  :root:not([data-theme="light"]) .hero-bg::after{opacity:.28}
}