/* ========================================================
   باسم التونسي — نظام تصميم موحّد لكل صفحات الموقع
   (حضور · نَسَق · وصلة · الرئيسية · تواصل)
   ======================================================== */

:root{
  --ink:#0B0B0C; --paper:#FFFFFF; --cream:#F2F2F2;
  --line:#D8D6D0; --gray:#56554E; --charcoal:#1C1C1B;
  color-scheme: light; /* يمنع المتصفحات (أوبرا/كروم) من "تعتيم" الأقسام تلقائياً وقلب ألوانها */
}
/* هوية أحادية اللون بالكامل — أبيض/أسود/كريمي فقط، بلا أي لون إضافي.
   التمييز بين الحالات (رابط، تفعيل، تحويم) يتم عبر السُمك والخط السفلي، لا اللون. */
.link-accent{color:var(--ink); text-decoration:underline; text-underline-offset:3px; font-weight:600;}
.link-accent:hover{opacity:.65;}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
html{overflow-x:clip;}
body{font-family:'IBM Plex Sans Arabic', sans-serif; background:var(--paper); color:var(--ink); line-height:1.8; -webkit-font-smoothing:antialiased; overflow-x:clip;}
h1,h2,h3,.display{font-weight:700; letter-spacing:-0.005em;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1100px; margin:0 auto; padding:0 28px;}
@media(max-width:640px){.wrap{padding:0 20px;}}

/* ---------- إتاحة: حالة تركيز واضحة على كل عنصر تفاعلي ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible{
  outline:2px solid var(--ink); outline-offset:3px; border-radius:1px;
}

/* ---------- شريط تقدّم القراءة أعلى الصفحة ---------- */
.scroll-progress{position:fixed; top:0; inset-inline-start:0; height:3px; background:var(--ink); z-index:300; width:0%;}

/* ---------- ظهور تدريجي عند التمرير ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.16,.8,.4,1), transform .7s cubic-bezier(.16,.8,.4,1);}
.reveal.in-view{opacity:1; transform:translateY(0);}
.reveal-stagger > *{opacity:0; transform:translateY(22px); transition:opacity .6s cubic-bezier(.16,.8,.4,1), transform .6s cubic-bezier(.16,.8,.4,1);}
.reveal-stagger.in-view > *{opacity:1; transform:translateY(0);}
.reveal-stagger.in-view > *:nth-child(1){transition-delay:.04s;}
.reveal-stagger.in-view > *:nth-child(2){transition-delay:.11s;}
.reveal-stagger.in-view > *:nth-child(3){transition-delay:.18s;}
.reveal-stagger.in-view > *:nth-child(4){transition-delay:.25s;}
.reveal-stagger.in-view > *:nth-child(5){transition-delay:.32s;}
.reveal-stagger.in-view > *:nth-child(6){transition-delay:.39s;}
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-stagger > *{opacity:1; transform:none; transition:none;}
  .scroll-progress{display:none;}
}

/* ---------- header / nav ---------- */
header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.92); backdrop-filter:blur(8px); border-bottom:1px solid transparent; transition:border-color .3s ease, box-shadow .3s ease;}
header.scrolled{border-bottom-color:var(--line); box-shadow:0 8px 24px rgba(11,11,12,.05);}
.nav{display:flex; align-items:center; justify-content:space-between; height:76px; gap:16px;}
.brand{font-weight:900; font-size:1.25rem;}
.brand span{color:var(--gray); font-weight:400; font-size:0.8rem; display:block; margin-top:2px;}
.nav-links{display:flex; gap:28px; font-size:0.92rem; color:var(--charcoal);}
.nav-links a{position:relative; padding-bottom:4px;}
.nav-links a::after{content:""; position:absolute; right:0; bottom:0; width:0; height:1.5px; background:var(--ink); transition:width .25s cubic-bezier(.16,.8,.4,1);}
.nav-links a:hover::after{width:100%;}
.nav-links a.active{color:var(--ink); font-weight:700;}
.nav-links a.active::after{width:100%;}
.nav-right{display:flex; align-items:center; gap:14px;}
.btn-cta{background:var(--ink); color:var(--paper); padding:11px 20px; border-radius:2px; font-size:0.88rem; font-weight:500; white-space:nowrap; transition:opacity .2s, transform .2s; border:none; cursor:pointer; display:inline-block;}
.btn-cta:hover{opacity:.8; transform:translateY(-1px);}
@media(max-width:860px){.nav-links{display:none;}}

/* ---------- hamburger trigger + full-screen overlay menu ---------- */
.menu-trigger{
  width:38px; height:38px; border:1px solid var(--line); border-radius:2px; background:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; cursor:pointer; flex:none;
}
.menu-trigger span{display:block; width:16px; height:1.5px; background:var(--ink); transition:transform .2s ease, opacity .2s ease;}
.menu-trigger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.menu-trigger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.menu-trigger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

.menu-overlay{
  position:fixed; inset:0; z-index:200; background:var(--ink); color:var(--paper);
  display:flex; transform:translateY(-100%); transition:transform .5s cubic-bezier(.16,.8,.4,1);
}
.menu-overlay.open{transform:translateY(0);}
.menu-overlay .visual{flex:0 0 38%; position:relative; background:var(--charcoal); overflow:hidden; display:none;}
@media(min-width:760px){.menu-overlay .visual{display:block;}}
.menu-overlay .menu-body{flex:1; display:flex; flex-direction:column; justify-content:center; padding:60px 8vw; position:relative;}
.menu-overlay .menu-close{
  position:absolute; top:26px; inset-inline-end:28px; width:38px; height:38px; border:1px solid #3a3a38; border-radius:2px;
  background:none; color:var(--paper); cursor:pointer; font-size:1.3rem; line-height:1;
}
.menu-overlay .menu-brand{font-size:1.1rem; font-weight:900; margin-bottom:44px; color:#B8B7B2;}
.menu-overlay nav{display:flex; flex-direction:column; gap:6px;}
.menu-overlay nav a{
  display:flex; align-items:baseline; gap:16px; font-size:clamp(1.5rem,4vw,2.4rem); font-weight:700; color:var(--paper);
  padding:12px 0 12px 20px; border-top:1px solid #2a2a28; border-inline-start:2px solid transparent;
  transition:padding-inline-start .25s ease, border-color .25s ease, opacity .2s ease;
}
.menu-overlay nav a:first-child{border-top:none;}
.menu-overlay nav a .n{font-size:0.85rem; font-weight:400; color:#6a6a67; font-family:inherit; transition:color .25s ease;}
.menu-overlay nav a:hover{padding-inline-start:32px; border-inline-start-color:var(--paper);}
.menu-overlay nav a.active{border-inline-start-color:var(--paper); padding-inline-start:32px;}
.menu-overlay nav a.active .n, .menu-overlay nav a:hover .n{color:var(--paper);}

/* ---------- hero ---------- */
.hero{background:var(--ink); color:var(--paper); padding:90px 0 70px; overflow:hidden;}
.eyebrow{font-size:0.85rem; color:#B8B7B2; padding-inline-start:12px; margin-bottom:24px; display:inline-block; border-inline-start:2px solid var(--paper);}
.hero h1{font-size:clamp(2rem, 4.6vw, 3.2rem); line-height:1.3; max-width:840px;}
.hero p.lead{font-size:1.05rem; color:#C9C8C3; max-width:600px; margin-top:22px; font-weight:300;}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; align-items:center;}
.btn-ghost{display:inline-block; border:1px solid var(--paper); padding:11px 20px; border-radius:2px; font-size:0.88rem; font-weight:500; transition:all .2s;}
.btn-ghost:hover{background:var(--paper); color:var(--ink); transform:translateY(-1px);}
.trust-strip{display:flex; flex-wrap:wrap; gap:28px; margin-top:52px; padding-top:28px; border-top:1px solid #333; color:#B0AFAA; font-size:0.86rem;}
.cta-note{font-size:0.78rem; color:var(--gray); margin-top:2px;}
.hero .cta-note{color:#9a9a96;}

/* ---------- دخول الهيرو عند تحميل الصفحة ---------- */
@keyframes heroIn{from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:translateY(0);}}
.hero .eyebrow, .hero h1, .hero p.lead, .hero .hero-actions, .hero .cta-note, .hero .trust-strip{
  animation:heroIn .7s cubic-bezier(.16,.8,.4,1) both;
}
.hero h1{animation-delay:.05s;}
.hero p.lead{animation-delay:.12s;}
.hero .hero-actions{animation-delay:.19s;}
.hero .cta-note{animation-delay:.25s;}
.hero .trust-strip{animation-delay:.3s;}
@media (prefers-reduced-motion: reduce){
  .hero .eyebrow, .hero h1, .hero p.lead, .hero .hero-actions, .hero .cta-note, .hero .trust-strip{animation:none;}
}

/* ---------- ghost watermark label (behind a section heading) ---------- */
.ghost-wrap{position:relative;}
.ghost-label{
  position:absolute; top:-0.35em; inset-inline-start:-0.02em; z-index:0;
  font-family:'IBM Plex Sans Arabic', sans-serif; font-weight:900;
  font-size:clamp(3.5rem, 12vw, 8.5rem); line-height:1; letter-spacing:-0.02em;
  color:rgba(255,255,255,.05); white-space:nowrap; pointer-events:none; user-select:none;
  will-change:transform;
}
.ghost-wrap.on-light .ghost-label{color:rgba(11,11,12,.045);}
.ghost-wrap > *:not(.ghost-label){position:relative; z-index:1;}

/* ---------- identity panel (stands in for a personal photo) ---------- */
.id-panel{
  position:relative; aspect-ratio:4/5; background:var(--charcoal); border:1px solid #2a2a28;
  overflow:hidden; display:flex; align-items:center; justify-content:center;
  box-shadow:0 30px 60px -20px rgba(11,11,12,.35);
}
.id-panel.light{box-shadow:0 30px 60px -24px rgba(11,11,12,.12);}
.id-panel .lines{position:absolute; inset:0; opacity:.5;
  background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 1px, transparent 1px 34px);
}
.id-panel .mono{position:relative; z-index:1; font-weight:900; font-size:clamp(4rem,10vw,7rem); color:var(--paper); letter-spacing:-0.02em;}
.id-panel .corner{position:absolute; bottom:0; inset-inline-start:0; width:46%; height:46%; border-top:1px solid var(--paper); border-inline-end:1px solid var(--paper); opacity:.4;}
.id-panel.light .corner{border-color:var(--ink); opacity:.35;}
.id-panel .tag{position:absolute; bottom:20px; inset-inline-end:22px; font-size:0.76rem; color:#8a8a86; z-index:1;}
.id-panel.light{background:var(--cream); border-color:var(--line);}
.id-panel.light .lines{background-image:repeating-linear-gradient(135deg, rgba(11,11,12,.05) 0 1px, transparent 1px 34px);}
.id-panel.light .mono{color:var(--ink);}
.id-panel.light .tag{color:var(--gray);}

/* ---------- sections ---------- */
section{padding:100px 0;}
.service-band{border-top:6px solid var(--ink);}
.service-eyebrow{font-size:0.82rem; color:var(--gray); margin-bottom:10px; display:block;}
.section-head{max-width:680px; margin-bottom:56px;}
.section-head .tag{font-size:0.78rem; color:var(--charcoal); margin-bottom:18px; display:inline-block; border:1px solid var(--line); border-radius:2px; padding:5px 13px; font-weight:600;}
.section-head h2{font-size:clamp(1.55rem, 3vw, 2.25rem); line-height:1.35;}
.section-head p.sub{margin-top:16px; font-size:1rem; color:var(--charcoal); font-weight:400; max-width:600px;}
.section-head.center{margin-inline:auto; text-align:center;}
.framework .section-head .tag{border-color:#3a3a38; color:#D8D7D2;}

/* ---------- two-col grid (main content + side panel) ---------- */
.nasaq-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:start;}
@media(max-width:800px){.nasaq-grid{grid-template-columns:1fr;}}
.check-list{list-style:none;}
.check-list li{font-size:0.98rem; padding:12px 0; border-top:1px solid var(--line); color:var(--charcoal);}
.check-list li:first-child{border-top:none;}
.check-grid-2{display:grid; grid-template-columns:1fr 1fr; gap:0 32px;}
.check-grid-2 li{display:flex; align-items:center; gap:10px;}
@media(max-width:640px){.check-grid-2{grid-template-columns:1fr;}}
.meta-box{background:var(--cream); padding:26px; border-radius:2px;}
.meta-box .meta-row{margin-bottom:16px;}
.meta-box .meta-row:last-child{margin-bottom:0;}
.meta-box .meta-label{font-size:0.78rem; color:var(--gray); margin-bottom:4px; display:block;}
.meta-box .meta-val{font-size:0.98rem; font-weight:500;}
.example-box{margin-top:28px; border-inline-start:3px solid var(--ink); padding-inline-start:18px;}
.example-tag{font-size:0.78rem; color:var(--gray); margin-bottom:6px; display:block; font-weight:600;}
.example-box p{font-size:0.95rem; color:var(--charcoal); font-weight:400;}
.service-cta{margin-top:32px; display:inline-block; background:var(--ink); color:var(--paper); padding:15px 30px; border-radius:2px; font-weight:600; font-size:0.95rem; transition:opacity .2s, transform .2s;}
.service-cta:hover{opacity:.85; transform:translateY(-1px);}
.service-cta.ghost{background:none; border:1px solid var(--ink); color:var(--ink);}
.service-cta.ghost:hover{background:var(--ink); color:var(--paper);}

/* ---------- fit / not-fit two columns ---------- */
.fit-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:8px;}
@media(max-width:760px){.fit-grid{grid-template-columns:1fr;}}
.fit-col{background:var(--paper); padding:30px 26px;}
.fit-col.no{background:var(--cream);}
.fit-col h3{font-size:1.02rem; margin-bottom:16px;}
.fit-col ul{list-style:none;}
.fit-col li{font-size:0.92rem; padding:9px 0; border-top:1px solid var(--line); color:var(--charcoal); display:flex; gap:10px; align-items:flex-start;}
.fit-col li:first-child{border-top:none;}
.fit-col li .mark{flex:none; width:16px; text-align:center; font-weight:700;}
.fit-col.yes li .mark{color:var(--ink);}
.fit-col.no li .mark{color:var(--gray);}

/* ---------- dark framework grid ---------- */
.framework{background:var(--ink); color:var(--paper);}
.framework .section-head .tag{color:#B8B7B2;}
.framework .section-head h2{color:var(--paper);}
.fw-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid #3a3a38; border-inline-start:1px solid #3a3a38;}
@media(max-width:760px){.fw-grid{grid-template-columns:repeat(2,1fr);}}
.fw-box{border-inline-end:1px solid #3a3a38; border-bottom:1px solid #3a3a38; padding:26px 20px;}
.fw-box .fw-num{font-weight:900; font-size:1.4rem; color:var(--paper); margin-bottom:10px;}
.fw-box h4{font-size:0.96rem; font-weight:600; margin-bottom:8px;}
.fw-box p{font-size:0.83rem; color:#B0AFAA; font-weight:300;}
.fw-note{margin-top:30px; font-size:0.93rem; color:#C9C8C3; font-weight:300; max-width:640px;}
.fw-note b{color:var(--paper); font-weight:600;}

/* ---------- step packages ---------- */
.pkg-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:8px;}
@media(max-width:860px){.pkg-grid{grid-template-columns:1fr;}}
.pkg{background:var(--paper); padding:36px 28px; display:flex; flex-direction:column;}
.pkg .step{font-size:0.78rem; color:var(--gray); margin-bottom:12px;}
.pkg h3{font-size:1.3rem; margin-bottom:10px;}
.pkg .sub{color:var(--gray); font-size:0.88rem; margin-bottom:20px;}
.pkg ul{list-style:none; flex:1;}
.pkg li{font-size:0.9rem; padding:9px 0; border-top:1px solid var(--line); color:var(--charcoal);}
.pkg li:first-child{border-top:none;}
.pkg.middle{background:var(--ink); color:var(--paper);}
.pkg.middle .sub{color:#B8B7B2;}
.pkg.middle li{color:#D8D7D2; border-top-color:#3a3a38;}
.pkg.middle .step{color:#B8B7B2;}

/* ---------- pricing card ---------- */
.price-wrap{display:flex; justify-content:center; margin-top:8px;}
.price-card{width:100%; max-width:460px; background:var(--paper); border:1px solid var(--ink); border-radius:2px; padding:38px 34px; box-shadow:0 24px 50px -20px rgba(11,11,12,.14); transition:box-shadow .3s ease, transform .3s cubic-bezier(.16,.8,.4,1);}
.price-card:hover{transform:translateY(-4px); box-shadow:0 26px 52px -14px rgba(11,11,12,.16);}
.price-card .step{font-size:0.78rem; color:var(--gray); margin-bottom:12px; display:block;}
.price-card h3{font-size:2.4rem; font-weight:900;}
.price-card .unit{font-size:0.95rem; color:var(--gray); font-weight:400; margin-inline-start:6px;}
.price-card .sub{color:var(--gray); font-size:0.9rem; margin:8px 0 26px;}
.price-card ul{list-style:none;}
.price-card li{font-size:0.92rem; padding:10px 0; border-top:1px solid var(--line); color:var(--charcoal);}
.price-card li:first-child{border-top:none;}
.price-exclude{margin-top:22px; padding-top:20px; border-top:1px dashed var(--line);}
.price-exclude .label{display:block; font-size:0.76rem; font-weight:600; color:var(--gray); margin-bottom:10px;}
.price-exclude li{color:var(--gray); border-top:none; padding:6px 0;}
.price-card .service-cta{width:100%; text-align:center; margin-top:26px;}

/* ---------- خطوات مرقّمة (نمط Perceptric: رقم كبير خفيف + عنوان + وصف) ---------- */
.proc-steps{display:flex; flex-direction:column; margin-top:8px;}
.proc-step{display:grid; grid-template-columns:100px 1fr; gap:28px; padding:34px 0; border-top:1px solid var(--line); align-items:start;}
.proc-step:first-child{border-top:none;}
.proc-step .pn{font-size:2.6rem; font-weight:900; color:var(--line); line-height:1;}
.proc-step .meta{font-size:0.76rem; color:var(--gray); margin-bottom:8px; display:block; letter-spacing:.03em;}
.proc-step h3{font-size:1.08rem; margin-bottom:8px;}
.proc-step p{color:var(--charcoal); font-size:0.95rem; max-width:64ch; font-weight:400;}
@media(max-width:640px){.proc-step{grid-template-columns:1fr; gap:10px;} .proc-step .pn{font-size:1.8rem;}}

/* ---------- simple info tables ---------- */
.table-wrap{overflow-x:auto; margin-top:8px;}
table.info-table{width:100%; border-collapse:collapse; min-width:520px;}
table.info-table th, table.info-table td{padding:14px 16px; text-align:start; font-size:0.92rem; border-bottom:1px solid var(--line);}
table.info-table thead th{background:var(--cream); font-weight:600; color:var(--charcoal); font-size:0.86rem;}
table.info-table tbody td{color:var(--charcoal); font-weight:400;}
table.info-table tbody tr:last-child td{border-bottom:1px solid var(--line);}

/* ---------- why grid ---------- */
.why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:40px;}
@media(max-width:760px){.why-grid{grid-template-columns:1fr;}}
.why-item .num{font-weight:900; font-size:2rem; color:var(--line); margin-bottom:12px;}
.why-item h3{font-size:1.02rem; margin-bottom:10px;}
.why-item p{color:var(--gray); font-size:0.92rem;}

/* ---------- faq accordion ---------- */
.faq-list{max-width:760px;}
details{border-bottom:1px solid var(--line); padding-block:20px;}
details:first-child{border-top:1px solid var(--line);}
summary{cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:1rem; font-weight:600; color:var(--ink);}
summary::-webkit-details-marker{display:none;}
summary .plus{flex:none; width:20px; height:20px; position:relative; color:var(--gray);}
summary .plus::before,summary .plus::after{content:""; position:absolute; background:currentColor; top:50%; left:50%; transform:translate(-50%,-50%);}
summary .plus::before{width:13px; height:1.5px;}
summary .plus::after{width:1.5px; height:13px; transition:transform .18s ease;}
details[open] summary .plus::after{transform:translate(-50%,-50%) rotate(90deg); opacity:0;}
details p{margin:14px 0 0; color:var(--gray); font-size:0.92rem; max-width:64ch; font-weight:400;}

/* ---------- contact band ---------- */
.contact{background:var(--ink); color:var(--paper); text-align:center;}
.contact h2{font-size:clamp(1.6rem,3.4vw,2.3rem); max-width:700px; margin:0 auto 18px;}
.contact > .wrap > p, .contact p.lead-c{color:#C9C8C3; font-size:1rem; max-width:520px; margin:0 auto 36px; font-weight:300;}
.contact .service-cta{background:var(--paper); color:var(--ink);}
.contact .cta-note{color:#9a9a96; margin-top:14px;}

/* ---------- contact form ---------- */
.form-box{max-width:560px; margin:0 auto; text-align:start;}
.form-row{margin-bottom:18px;}
.form-row label{display:block; font-size:0.85rem; color:#B8B7B2; margin-bottom:8px;}
.form-row input, .form-row textarea, .form-row select{
  width:100%; background:transparent; border:1px solid #4a4a48; color:var(--paper);
  padding:13px 14px; border-radius:2px; font-size:0.95rem; font-family:inherit;
}
.form-row select option{color:#000;}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus{outline:none; border-color:var(--paper);}
.form-row textarea{resize:vertical; min-height:100px;}
.form-submit{width:100%; margin-top:6px; background:var(--paper); color:var(--ink); border:none; padding:15px; border-radius:2px; font-weight:600; font-size:0.95rem; cursor:pointer; transition:opacity .2s, transform .2s;}
.form-submit:hover{opacity:.85; transform:translateY(-1px);}
.form-note{font-size:0.82rem; color:#8a8a86; margin-top:14px;}

/* ---------- نص اقتباس بارز (من أنا) ---------- */
.pull-quote{font-size:clamp(1.25rem, 2.2vw, 1.6rem); font-weight:700; line-height:1.55; color:var(--ink); margin-bottom:26px;}

/* ---------- قائمة تهييج المشكلة (قبل بطاقات اختيار المشكلة) ---------- */
.pain-list{list-style:none; display:flex; flex-wrap:wrap; gap:10px 30px; margin:28px 0 4px; padding-top:24px; border-top:1px solid var(--line);}
.pain-list li{font-size:0.9rem; color:var(--gray); position:relative; padding-inline-start:18px;}
.pain-list li::before{content:"—"; position:absolute; inset-inline-start:0; color:var(--line); font-weight:700;}

/* ---------- ladder (service list) ---------- */
.ladder-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:8px;}
@media(max-width:860px){.ladder-grid{grid-template-columns:1fr;}}
.ladder-card{background:var(--paper); padding:30px 26px; transition:transform .3s cubic-bezier(.16,.8,.4,1), box-shadow .3s ease;}
.ladder-card:hover{transform:translateY(-6px); box-shadow:0 18px 34px rgba(11,11,12,.08);}
.ladder-card .lvl{font-size:0.78rem; color:var(--gray); margin-bottom:10px;}
.ladder-card h3{font-size:1.15rem; margin-bottom:10px;}
.ladder-card p{font-size:0.9rem; color:var(--gray);}
.ladder-card a{display:inline-block; margin-top:16px; font-size:0.86rem; font-weight:600; color:var(--ink); border-bottom:1px solid var(--ink); padding-bottom:2px; transition:padding-inline-end .2s ease;}
.ladder-card a:hover{padding-inline-end:6px;}

/* ---------- بطاقة إثبات (عمل حقيقي) ---------- */
.proof-card{background:var(--paper); border:1px solid var(--ink); border-radius:2px; padding:38px 34px; max-width:640px; margin-top:8px; transition:transform .3s cubic-bezier(.16,.8,.4,1), box-shadow .3s ease;}
.proof-card:hover{transform:translateY(-4px); box-shadow:0 24px 50px -20px rgba(11,11,12,.14);}
.proof-tag{font-size:0.78rem; color:var(--gray); margin-bottom:14px; display:block; font-weight:600;}
.proof-card h3{font-size:1.2rem; margin-bottom:14px;}
.proof-card p{font-size:0.95rem; color:var(--charcoal); font-weight:400; max-width:60ch;}
.proof-link{display:inline-block; margin-top:22px; font-size:0.9rem; font-weight:600; color:var(--ink); border-bottom:1px solid var(--ink); padding-bottom:2px; transition:padding-inline-end .2s ease;}
.proof-link:hover{padding-inline-end:6px;}

/* ---------- نتيجة كل خطوة (pkg-grid) ---------- */
.pkg-result{margin-top:16px; padding-top:16px; border-top:1px dashed var(--line); font-size:0.86rem; color:var(--charcoal); font-weight:400;}
.pkg-result b{font-weight:700; color:var(--ink);}
.pkg.middle .pkg-result{border-top-color:#3a3a38; color:#D8D7D2;}
.pkg.middle .pkg-result b{color:var(--paper);}

/* ---------- problem picker cards ---------- */
.paths{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#333; margin-top:8px;}
@media(max-width:900px){.paths{grid-template-columns:1fr;}}
.path-card{background:var(--ink); padding:32px 30px; transition:transform .3s cubic-bezier(.16,.8,.4,1);}
.path-card:hover{transform:translateY(-6px);}
.path-tag{font-size:0.82rem; color:#9a9a96; margin-bottom:10px;}
.path-card h3{font-size:1.2rem; margin-bottom:14px; color:var(--paper);}
.path-card p.desc{font-size:0.9rem; color:#C9C8C3; font-weight:300; margin-bottom:20px;}
.path-cta{display:inline-block; border:1px solid var(--paper); padding:10px 18px; border-radius:2px; font-size:0.86rem; font-weight:500; color:var(--paper); transition:all .2s;}
.path-cta:hover{background:var(--paper); color:var(--ink);}

footer{padding:36px 0; border-top:1px solid var(--line); font-size:0.84rem; color:var(--gray); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;}

/* ========================================================
   نظام الأيقونات الموحّد — inline SVG، خط 1.6px، currentColor
   كل الأيقونات بالموقع تستخدم كلاس .icon (+ .icon-sm / .icon-lg)
   بدل رموز يونيكود متفرقة (✓ × ← ↗) — نفس الوزن البصري بكل مكان
   ======================================================== */
.icon{width:18px; height:18px; flex:none; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; vertical-align:-3px;}
.icon-sm{width:14px; height:14px;}
.icon-lg{width:26px; height:26px;}
a .icon, button .icon{transition:transform .2s ease;}

/* ---------- خط سير العملية (Flow Diagram) — لأي محتوى "خطوات/عملية" ---------- */
.flow-steps{display:grid; grid-template-columns:repeat(4,1fr); gap:0 8px; margin-top:12px; position:relative;}
.flow-steps[data-count="3"]{grid-template-columns:repeat(3,1fr);}
.flow-step{position:relative; padding:0 14px; text-align:center;}
.flow-step::before{
  content:""; position:absolute; top:27px; inset-inline-start:50%; width:100%; height:1.5px; background:var(--line);
  z-index:0; transform:scaleX(0); transform-origin:100% 50%; transition:transform .7s cubic-bezier(.16,.8,.4,1);
}
.flow-step:first-child::before{display:none;}
.flow-steps.in-view .flow-step::before{transform:scaleX(1);}
.flow-node{
  width:54px; height:54px; border-radius:50%; border:1.5px solid var(--ink); background:var(--paper);
  display:flex; align-items:center; justify-content:center; margin:0 auto 20px; position:relative; z-index:1;
  font-weight:900; font-size:1.1rem; transition:transform .25s ease;
}
.flow-step:hover .flow-node{transform:translateY(-3px);}
.flow-step h3{font-size:0.98rem; margin-bottom:8px;}
.flow-step p{font-size:0.87rem; color:var(--gray); max-width:26ch; margin:0 auto;}
/* شكل داكن (لأقسام framework) */
.framework .flow-node{border-color:#4a4a48; background:var(--ink);}
.framework .flow-step::before{background:#3a3a38;}
.framework .flow-step p{color:#B0AFAA;}
@media(max-width:760px){
  .flow-steps, .flow-steps[data-count="3"]{grid-template-columns:1fr; gap:30px 0;}
  .flow-step{text-align:start; padding:0; padding-inline-start:70px; min-height:54px;}
  .flow-step::before{
    top:58px; inset-inline-start:26px; inset-inline-end:auto; width:1.5px; height:calc(100% + 6px);
    transform:scaleY(0); transform-origin:0 100%;
  }
  .flow-steps.in-view .flow-step::before{transform:scaleY(1);}
  .flow-node{position:absolute; inset-inline-start:0; top:0; margin:0;}
  .flow-step p{max-width:none;}
}