/* ==========================================================================
   home.css — خاص بالصفحة الرئيسية فقط
   ========================================================================== */

/* ---------- حركات مشتركة في الصفحة ---------- */
@keyframes swap-in {
  from { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.96); }
}
@keyframes letter-pop {
  from { opacity: 0.2; transform: scale(0.55) rotate(-8deg); }
}
@keyframes chip-in {
  from { opacity: 0; transform: translate3d(0, 22px, 0) scale(0.9); }
}
@keyframes dot-pop {
  from { transform: scale(0); }
}

.swap-in { animation: swap-in 0.7s var(--spring-smooth) backwards; }

/* ---------- الهيرو (Bento) ---------- */
.hero {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
}
.hero__main {
  grid-column: span 7; grid-row: span 3;
  display: flex; flex-direction: column; gap: 28px;
  padding: clamp(22px, 3.4vw, 44px);
}
.hero__main .stats { margin-block-start: auto; }
.hero__side { grid-column: span 5; }

.hero__title { font-size: clamp(1.9rem, 3.9vw, 3rem); line-height: 1.2; letter-spacing: -0.02em; }
.hero__title mark {
  background: var(--pink); color: var(--on-color);
  padding: 0 0.25em; border-radius: 0.32em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.hero__lead { font-size: 1.08rem; color: var(--muted); max-width: 52ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* صف الإحصاءات: بطاقة بيضاء بثلاثة أعمدة (كصف Health Points في المرجع) */
.stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  padding: clamp(16px, 2vw, 24px);
  background: var(--card-2);
  border-radius: var(--r-card);
}
.stat { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.stat__num { font-size: 1.55rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.stat__label { font-size: 0.78rem; color: var(--muted); font-weight: 600; margin-block-start: 4px; }

/* ---------- المحاكي التفاعلي ---------- */
.demo { background: var(--card-2); border-radius: var(--r-card); padding: clamp(16px, 2vw, 24px); }
.demo__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-block-end: 8px; }
.demo__title { font-size: 1rem; font-weight: 700; }
.demo__hint { font-size: 0.8rem; color: var(--muted); }

.dim { padding-block: 14px; border-block-start: 1px solid var(--line); }
.dim:first-of-type { border-block-start: 0; }
.dim__q { font-size: 0.82rem; color: var(--muted); margin-block-end: 6px; }
.dim__top { direction: ltr; display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; font-weight: 600; margin-block-end: 10px; }
.dim__pole { display: inline-flex; align-items: center; gap: 8px; opacity: 0.4; transition: opacity 0.4s var(--ease-out), scale var(--dur-slow) var(--spring-bouncy); }
.dim__pole b { font-size: 1.05rem; }
.dim__pole.is-on { opacity: 1; scale: 1.06; }
.dim__val { font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* شريط التمرير: حبّة بإبهام دائري ينتفخ عند اللمس (كمفاتيح iOS) */
.slider {
  direction: ltr;
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 18px; border-radius: var(--r-pill);
  background: linear-gradient(to right,
    var(--track) 0 var(--s, 50%), var(--pink) var(--s, 50%) var(--e, 50%), var(--track) var(--e, 50%) 100%);
  cursor: grab; touch-action: pan-y;
}
.slider:active { cursor: grabbing; }
.slider:focus-visible { outline-offset: 8px; }
.slider::-webkit-slider-runnable-track { background: transparent; height: 18px; }
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 32px; height: 32px; margin-top: -7px; border-radius: 50%;
  background: var(--dark); border: 4px solid var(--card-2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: transform var(--dur-slow) var(--spring-bouncy), box-shadow 0.4s var(--ease-out);
}
.slider:active::-webkit-slider-thumb {
  transform: scale(1.2);
  box-shadow: 0 0 0 9px color-mix(in srgb, var(--pink) 50%, transparent), 0 6px 16px rgba(0, 0, 0, 0.32);
}
.slider::-moz-range-track { background: transparent; height: 18px; }
.slider::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--dark); border: 4px solid var(--card-2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: transform var(--dur-slow) var(--spring-bouncy), box-shadow 0.4s var(--ease-out);
}
.slider:active::-moz-range-thumb {
  transform: scale(1.2);
  box-shadow: 0 0 0 9px color-mix(in srgb, var(--pink) 50%, transparent), 0 6px 16px rgba(0, 0, 0, 0.32);
}

/* ---------- بطاقة النتيجة التجريبية (سوداء) ---------- */
.type-card { display: flex; flex-direction: column; gap: 18px; }
.type-card__eyebrow { font-size: 0.8rem; color: var(--on-dark-muted); font-weight: 600; }
.type-letters { direction: ltr; display: flex; gap: 10px; }
.type-letter {
  flex: 1; aspect-ratio: 1; max-width: 76px; border-radius: var(--r-md);
  display: grid; place-items: center;
  font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800;
  color: var(--on-color);
}
.type-letter:nth-child(1) { background: var(--pink); }
.type-letter:nth-child(2) { background: var(--blue); }
.type-letter:nth-child(3) { background: var(--lav); }
.type-letter:nth-child(4) { background: var(--green); }
.type-letter.pop { animation: letter-pop 0.7s var(--spring-bouncy); }

.type-card__name { font-size: 1.6rem; }
.type-card__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.stack { direction: ltr; display: flex; gap: 6px; }
.stack .chip:first-child { background: var(--pink); color: var(--on-color); }
.stack .chip { animation: swap-in 0.7s var(--spring-smooth) backwards; }
.stack .chip:nth-child(2) { animation-delay: 60ms; }
.stack .chip:nth-child(3) { animation-delay: 120ms; }
.stack .chip:nth-child(4) { animation-delay: 180ms; }

.level__link {
  margin-block-start: auto; display: inline-flex; align-items: center; gap: 8px;
  width: fit-content; font-weight: 700; color: var(--pink);
  transition: scale var(--dur-slow) var(--spring-bouncy);
}
.level__link .arrow { translate: 4px 0; }
[dir="rtl"] .level__link .arrow { translate: -4px 0; }
@media (hover: hover) {
  .level__link:hover .arrow { translate: 9px 0; }
  [dir="rtl"] .level__link:hover .arrow { translate: -9px 0; }
}
.level__link:active { scale: 0.95; transition-duration: 0.1s; }

/* ---------- مصفوفة النقاط (البطاقة الوردية) ---------- */
/* 21 عموداً (7 أيام × 3): حجم النقطة يتبع عرض البطاقة تلقائياً */
.dots { direction: ltr; display: grid; grid-template-columns: repeat(21, minmax(0, 1fr)); gap: 3px; align-items: end; margin-block-start: 18px; }
.dots__col { display: flex; flex-direction: column-reverse; gap: 3px; }
.dot { width: 100%; aspect-ratio: 1; border-radius: 50%; background: rgba(0, 0, 0, 0.16); }
.dot.on { background: #111; }
.js .dot.on { transform: scale(0); }
.js .is-in .dot.on { transform: none; animation: dot-pop 0.9s var(--spring-bouncy) var(--d, 0ms) backwards; }
.big-num { font-size: 2.1rem; font-weight: 800; line-height: 1; }
.big-num small { font-size: 0.9rem; font-weight: 600; margin-inline-start: 6px; }

/* ---------- منحنى الوظائف (البطاقة الزرقاء) ---------- */
.curve { direction: ltr; margin-block-start: 14px; }
.curve svg { width: 100%; height: auto; overflow: visible; }
.curve__grid { stroke: rgba(0, 0, 0, 0.12); stroke-width: 1; }
.curve__line { fill: none; stroke: #111; stroke-width: 4; stroke-linecap: round; }
.js .curve__line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s var(--ease-ios) 0.2s; }
.js .is-in .curve__line { stroke-dashoffset: 0; }
.curve svg circle { transform-box: fill-box; transform-origin: center; }
.js .is-in .curve svg circle { animation: dot-pop 0.9s var(--spring-bouncy) 1.9s backwards; }
.curve__labels { direction: ltr; display: flex; justify-content: space-between; font-size: 0.72rem; font-weight: 600; color: rgba(17, 17, 17, 0.6); margin-block-start: 6px; }
.tag-dark { display: inline-block; background: #111; color: #fff; padding: 2px 10px; border-radius: var(--r-pill); font-size: 0.75rem; font-weight: 600; }

/* ---------- خطوات العمل ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.step__num {
  width: 48px; height: 48px; border-radius: 50%; margin-block-end: 18px;
  display: grid; place-items: center; font-weight: 800; color: var(--on-color);
}
.step:nth-child(1) .step__num { background: var(--pink); }
.step:nth-child(2) .step__num { background: var(--blue); }
.step:nth-child(3) .step__num { background: var(--lav); }

/* ---------- مستويات الاختبار (بطاقات سوداء كـ Depression Test) ---------- */
.levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.level { display: flex; flex-direction: column; gap: 14px; }
.level__meta { display: flex; gap: 8px; flex-wrap: wrap; }
.level__q { font-size: 3rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.level__q small { font-size: 1rem; font-weight: 600; margin-inline-start: 8px; color: var(--on-dark-muted); letter-spacing: 0; }
.level--featured { box-shadow: 0 0 0 3px var(--pink), 0 24px 44px -18px rgba(229, 184, 226, 0.6); }

/* ---------- الميزات (Bento) ---------- */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.bento > * { grid-column: span 4; }
.bento .span-6 { grid-column: span 6; }
.bento .span-8 { grid-column: span 8; }
.feature { display: flex; flex-direction: column; gap: 10px; }
.feature .icon-badge { margin-block-end: 8px; background: var(--card-2); box-shadow: none; }
.card--pink .icon-badge, .card--blue .icon-badge, .card--lav .icon-badge { background: rgba(255, 255, 255, 0.55); box-shadow: none; }
.card--dark .icon-badge { background: rgba(255, 255, 255, 0.12); color: var(--on-dark); box-shadow: none; }

/* دوائر الحضور (You've checked in 4 out of 7 days) */
.checkins { display: flex; gap: 8px; flex-wrap: wrap; margin-block-start: 10px; }
.checkins span {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font-size: 0.78rem; font-weight: 700; background: var(--card-2);
  transition: scale var(--dur-slow) var(--spring-bouncy);
}
.checkins .c-blue { background: var(--blue); color: var(--on-color); }
.checkins .c-pink { background: var(--pink); color: var(--on-color); }
@media (hover: hover) { .checkins span:hover { scale: 1.18; } }
.js .checkins span { opacity: 0; }
.js .is-in .checkins span { opacity: 1; animation: dot-pop 0.8s var(--spring-bouncy) calc(var(--i, 0) * 70ms + 300ms) backwards; }

.meter { display: grid; gap: 10px; margin-block-start: 8px; }
.meter__row { display: grid; grid-template-columns: 70px 1fr 40px; align-items: center; gap: 10px; font-size: 0.82rem; font-weight: 600; }
.meter__track { height: 10px; border-radius: var(--r-pill); background: rgba(0, 0, 0, 0.14); overflow: hidden; }
.meter__fill { height: 100%; width: var(--w); border-radius: inherit; background: #111; }
.js .meter__fill { width: 0; transition: width 1.3s var(--spring-smooth) 0.3s; }
.js .is-in .meter__fill { width: var(--w); }

/* ---------- اللوحة الشخصية (مثال بنمط المرجع) ---------- */
.dash { display: grid; grid-template-columns: 1.1fr 1fr 0.9fr; gap: var(--gap); align-items: start; }
.dash__col { display: grid; gap: 12px; align-content: start; min-width: 0; }
.dash__col > .label:not(:first-child) { margin-block-start: 6px; }

.ring-row { display: flex; align-items: center; gap: 22px; }
.ring-meta { flex: 1; min-width: 0; display: grid; gap: 4px; }
.kv { display: flex; flex-direction: column; gap: 2px; padding-inline-start: 14px; position: relative; }
.kv::before { content: ""; position: absolute; inset-block: 3px; inset-inline-start: 0; width: 3px; border-radius: 3px; background: var(--ink); }
.kv span { font-size: 0.78rem; }
.kv b { font-size: 1.15rem; }
.thin-set { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-block-start: 22px; }

.cap-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cap-info { display: grid; gap: 10px; min-width: 0; }
.cap-info .big-num { font-size: 1.7rem; }
.cap-info .row { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--muted); }
.cap-ctrl { display: grid; gap: 14px; }
.cap-tip { display: flex; gap: 10px; align-items: flex-start; font-size: 0.82rem; color: var(--muted); margin-block-start: 14px; }

/* بطاقة اختبار سوداء (Depression Test / Resilience Test) */
.test-card { position: relative; display: grid; gap: 10px; padding: 20px 22px; overflow: hidden; }
.test-card h3 { font-size: 1.02rem; padding-inline-end: 28px; }
.test-card__pts { display: inline-flex; align-items: center; gap: 10px; font-size: 0.8rem; font-weight: 600; }
.star-dot { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.14); }
.star-dot .icon { width: 13px; height: 13px; fill: currentColor; stroke: none; }
.test-card__time { font-size: 0.78rem; color: var(--on-dark-muted); font-weight: 500; }
.test-card > .arrow {
  position: absolute; inset-block-start: 20px; inset-inline-end: 20px;
  opacity: 0; translate: 10px 0;
  transition: opacity 0.35s var(--ease-out), translate var(--dur-slow) var(--spring-smooth);
}
[dir="rtl"] .test-card > .arrow { translate: -10px 0; }
@media (hover: hover) {
  .test-card:hover { translate: 0 -4px; box-shadow: 0 22px 40px -18px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
  .test-card:hover > .arrow, [dir="rtl"] .test-card:hover > .arrow { opacity: 1; translate: 0 0; }
}
.test-card:active { scale: 0.97; transition-duration: 0.12s; }

/* ==========================================================================
   مكوّنات اللوحة الشخصية (حلقة · أعمدة · كبسولة · شارات · ترتيب)
   ========================================================================== */

/* حلقة الثبات */
.ring { position: relative; width: 132px; aspect-ratio: 1; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.ring__track { stroke: var(--track); }
.ring__fill { stroke: var(--pink); stroke-dasharray: var(--v) 100; }
.js .ring__fill { stroke-dasharray: 0 100; transition: stroke-dasharray 1.6s var(--ease-ios) 0.3s; }
.js .is-in .ring__fill { stroke-dasharray: var(--v) 100; }
.ring__label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring__label b { font-size: 1.5rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ring__label small { font-size: 0.75rem; color: var(--muted); }

/* مؤشرات رفيعة (Carbs / Protein / Body Fat) */
.thin { display: grid; gap: 8px; }
.thin b { font-size: 0.95rem; }
.thin__bar { position: relative; height: 4px; border-radius: 4px; background: var(--track); overflow: hidden; }
.thin__bar::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--w); background: var(--ink); border-radius: inherit; }
.js .thin__bar::after { width: 0; transition: width 1.2s var(--spring-smooth) 0.4s; }
.js .is-in .thin__bar::after { width: var(--w); }
.thin small { font-size: 0.75rem; color: var(--muted); }

/* أعمدة النشاط الأسبوعي (Steps Highlights) */
.bars { display: flex; gap: 10px; height: 160px; }
.bars__col { flex: 1; display: grid; grid-template-rows: 1fr auto; gap: 10px; min-width: 0; }
.bars__track { display: flex; align-items: flex-end; justify-content: center; }
.bars__bar { width: min(14px, 100%); height: var(--h); min-height: 14px; border-radius: var(--r-pill); background: var(--chart); }
.js .bars__bar { height: 14px; }
.js .is-in .bars__bar { height: var(--h); transition: height 1s var(--spring-bouncy) var(--d, 0ms); }
.bars__day { font-size: 0.72rem; color: var(--muted); text-align: center; }

/* الكبسولة التفاعلية (Water measurement) */
.circle-btn {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--card-2); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: scale var(--dur-slow) var(--spring-bouncy);
}
.circle-btn:hover { scale: 1.08; }
.circle-btn:active { scale: 0.88; transition-duration: 0.1s; }
.capsule {
  position: relative; flex: none; width: 58px; height: 150px;
  display: grid; align-items: end; justify-items: center; padding-block-end: 20px;
  border-radius: var(--r-pill); background: var(--card-2); overflow: hidden;
}
.capsule__fill { position: absolute; inset-inline: 0; inset-block-end: 0; height: var(--p, 60%); background: var(--pink); transition: height 0.9s var(--spring-bouncy); }
.capsule__val { position: relative; font-size: 0.9rem; font-weight: 800; color: var(--on-color); font-variant-numeric: tabular-nums; }

/* الإنجازات */
.badge-row { display: flex; gap: 14px; }
.badge { flex: 1; min-width: 0; display: grid; justify-items: center; gap: 10px; text-align: center; font-size: 0.8rem; font-weight: 700; }
.badge__icon {
  width: 60px; height: 60px; border-radius: 20px;
  display: grid; place-items: center;
  background: var(--dark); color: var(--on-dark);
  transition: rotate var(--dur-slow) var(--spring-bouncy), scale var(--dur-slow) var(--spring-bouncy);
}
.badge__icon .icon { width: 26px; height: 26px; }
@media (hover: hover) { .badge:hover .badge__icon { rotate: -8deg; scale: 1.08; } }

/* الترتيب (Ranking) */
.rank { display: grid; gap: 8px; }
.rank__item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px 14px; background: var(--card); border-radius: var(--r-md); }
.rank__avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: var(--on-color); font-weight: 800; }
.rank__name { font-size: 0.92rem; font-weight: 700; line-height: 1.3; }
.rank__sub { font-size: 0.75rem; color: var(--muted); }
.rank__medal { color: var(--ink); }
.rank__pts { font-size: 0.8rem; font-weight: 700; color: var(--muted); }

/* ---------- شبكة الأنماط الـ16 ---------- */
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-block-end: 18px; font-size: 0.85rem; font-weight: 600; }
.legend__item { display: inline-flex; align-items: center; gap: 8px; }
.legend__item i { width: 14px; height: 14px; border-radius: 50%; background: var(--c); }

.types-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.type-chip {
  display: flex; flex-direction: column; gap: 2px;
  padding: 18px 20px; border-radius: var(--r-md);
  background: var(--c); color: var(--on-color);
  transition:
    translate var(--dur-slow) var(--spring-smooth),
    rotate var(--dur-slow) var(--spring-bouncy),
    scale var(--dur-slow) var(--spring-bouncy),
    box-shadow 0.5s var(--ease-out);
}
.type-chip b { font-size: 1.35rem; letter-spacing: 0.04em; }
.type-chip span { font-size: 0.88rem; font-weight: 600; opacity: 0.75; }
@media (hover: hover) {
  .type-chip:hover { translate: 0 -5px; rotate: -1.5deg; box-shadow: 0 18px 32px -14px rgba(0, 0, 0, 0.35); }
  .types-grid:hover .type-chip:not(:hover) { scale: 0.97; }
}
.type-chip:active { scale: 0.94; transition-duration: 0.12s; }
.js .types-grid .type-chip { opacity: 0; }
.js .types-grid.is-in .type-chip { opacity: 1; animation: chip-in 0.9s var(--spring-bouncy) calc(var(--i, 0) * 45ms + 150ms) backwards; }

/* ---------- الصدق العلمي والخصوصية ---------- */
.trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.trust ul { display: grid; gap: 10px; margin-block-start: 14px; }
.trust li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.95rem; }
.trust li::before { content: ""; flex: none; width: 10px; height: 10px; margin-block-start: 0.6em; border-radius: 50%; background: var(--pink); }

/* ---------- الدعوة الختامية ---------- */
.cta {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
  padding: clamp(28px, 5vw, 64px);
}
.cta::before, .cta::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); opacity: 0.55;
}
.cta::before { width: 320px; height: 320px; inset-block-start: -120px; inset-inline-start: -60px; background: var(--pink); }
.cta::after  { width: 280px; height: 280px; inset-block-end: -140px; inset-inline-end: 12%; background: var(--blue); }
.cta__title { font-size: clamp(1.6rem, 3.6vw, 2.6rem); max-width: 18ch; }

/* ---------- تأثير الرفع عند المرور (للأجهزة التي تدعم hover فقط) ---------- */
@media (hover: hover) {
  .steps .card:hover,
  .bento .card:hover,
  .levels .card:hover,
  .trust .card:hover,
  .hero__side:hover,
  .dash .card:not(.test-card):hover {
    translate: 0 -5px;
    box-shadow: var(--shadow-card);
  }
  .card--dark.level:hover, .card--dark.type-card:hover { box-shadow: 0 24px 44px -18px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
  .levels .level--featured.card:hover { box-shadow: 0 0 0 3px var(--pink), 0 30px 54px -18px rgba(229, 184, 226, 0.75); }
}

/* ---------- الاستجابة ---------- */
@media (max-width: 1000px) {
  .hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__main, .hero__demo, .type-card.hero__side { grid-column: 1 / -1; grid-row: auto; }
  .hero__side { grid-column: auto; }
  .steps, .levels { grid-template-columns: 1fr; }
  .bento > *, .bento .span-6, .bento .span-8 { grid-column: span 6; }
  .types-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust { grid-template-columns: 1fr; }
  .dash { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash__col:last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .hero { grid-template-columns: 1fr; }
  .hero__side { grid-column: auto; }
  .bento > *, .bento .span-6, .bento .span-8 { grid-column: 1 / -1; }
  .dash { grid-template-columns: 1fr; }
  .btn--lg { width: 100%; }
  .types-grid { gap: 10px; }
  .type-chip { padding: 14px 16px; }
  .ring-row { flex-direction: column; align-items: flex-start; }
  .badge-row { gap: 8px; }
  .cap-row { gap: 10px; }
}

/* ==========================================================================
   شعار الموقع تحت الشريط العلوي: الاسم أعلاه والدوائر أسفله، مفرغان تُرى الصورة منهما
   ========================================================================== */
.logo-hero {
  display: grid; gap: clamp(24px, 4vw, 52px);
  /* بعرض الصفحة كاملة، بلا حواف ولا زوايا مستديرة، وبخلفية الموقع نفسها */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-block-end: var(--gap);
  padding: clamp(16px, 3vw, 48px) clamp(16px, 4vw, 64px);
  background: var(--bg); color: var(--ink);
  border: 0; border-radius: 0; box-shadow: none;
}
.logo-hero__word { width: 100%; height: auto; display: block; overflow: hidden; direction: ltr; }
.logo-hero__bottom {
  /* الدوائر أصغر، وقسم تسجيل الدخول بجانبها */
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  align-items: center; gap: clamp(24px, 4vw, 56px);
}
.logo-hero__dots { width: 100%; height: auto; display: block; overflow: hidden; }
.logo-hero__tint { opacity: 0.34; }
.logo-hero__img { }

.logo-hero__copy { display: grid; gap: 18px; justify-items: start; }
.logo-hero__title {
  font-family: "Lalezar", var(--font);
  font-weight: 400; font-size: clamp(2.2rem, 4.6vw, 3.8rem);
  line-height: 1.2; letter-spacing: 0; text-wrap: balance;
}
.logo-hero__title mark {
  background: var(--pink); color: #111;
  padding: 0 0.22em; border-radius: 0.3em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.logo-hero__lead { font-size: 1.08rem; color: var(--muted); max-width: 52ch; }
.logo-hero__cta { display: grid; gap: 12px; justify-items: start; margin-block-start: 6px; }
.logo-hero__note { font-size: 0.82rem; color: var(--muted); max-width: 30ch; line-height: 1.5; }

@media (max-width: 820px) {
  .logo-hero__bottom { grid-template-columns: 1fr; }
  .logo-hero__dots { order: -1; width: min(100%, 420px); justify-self: center; }
}
@media (max-width: 640px) {
  .logo-hero__cta, .logo-hero__cta .btn { width: 100%; }
  .logo-hero__note { max-width: none; }
}