/* ==========================================================================
   Black Eagle — services
   ========================================================================== */

.primary-service { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 5vw, 72px); padding: clamp(28px, 5vw, 64px); border-radius: var(--radius-lg); background: radial-gradient(90% 120% at 100% 100%, rgba(183, 214, 10, 0.12), transparent 60%), linear-gradient(160deg, var(--navy), var(--surface) 70%); border: 1px solid rgba(183, 214, 10, 0.25); transition: border-color 0.4s; }
.primary-service:hover { border-color: var(--lime); }
.primary-service__title { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.6rem); margin-block: 18px 16px; }
.primary-service__text { color: var(--muted); font-size: var(--fs-lead); }
.primary-service__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin-block: 28px 34px; }
.primary-service__list li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); }
.primary-service__list .icon { color: var(--lime); margin-block-start: 3px; }
.primary-service__visual .frame { transition: transform 0.7s var(--ease); }
.primary-service:hover .primary-service__visual .frame { transform: translateY(-8px) rotate(calc(-1deg * var(--dir))); }
@media (max-width: 960px) { .primary-service { grid-template-columns: 1fr; } .primary-service__list { grid-template-columns: 1fr; } }

.feature-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.feature-card { position: relative; padding: clamp(24px, 2.6vw, 34px); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); overflow: hidden; transition: border-color 0.35s, transform 0.5s var(--ease); }
.feature-card::after { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0; width: 100%; height: 2px; background: var(--lime); transform: scaleX(0); transform-origin: var(--o, left); transition: transform 0.6s var(--ease); }
[dir="rtl"] .feature-card::after { --o: right; }
.feature-card:hover { border-color: rgba(183, 214, 10, 0.3); transform: translateY(-4px); }
.feature-card:hover::after { transform: scaleX(1); }
.feature-card__num { font-family: var(--font-display); color: var(--lime); font-size: var(--fs-sm); font-weight: 600; }
.feature-card__title { font-size: 1.2rem; margin-block: 14px 8px; }
.feature-card__text { color: var(--muted); font-size: var(--fs-sm); }

.service-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: clamp(32px, 5vw, 80px); align-items: start; }
.deliverables { position: sticky; inset-block-start: calc(var(--header-h) + 24px); padding: 30px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.deliverables__title { font-size: 1.2rem; margin-block-end: 18px; }
.deliverables li { display: flex; gap: 10px; align-items: flex-start; padding-block: 10px; border-block-start: 1px solid var(--line); font-size: var(--fs-sm); }
.deliverables .icon { color: var(--lime); margin-block-start: 3px; }
@media (max-width: 960px) { .service-body { grid-template-columns: 1fr; } .deliverables { position: static; } }

.faq__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.faq__item { border-block-end: 1px solid var(--line); }
.faq__item:first-child { border-block-start: 1px solid var(--line); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 22px; cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary .icon { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 50%; border: 1px solid var(--line-2); transition: transform 0.4s var(--ease), background 0.3s, color 0.3s; }
.faq__item[open] summary .icon { transform: rotate(45deg); background: var(--lime); color: var(--black); border-color: var(--lime); }
.faq__item p { padding-block-end: 22px; color: var(--muted); max-width: 64ch; }
@media (max-width: 860px) { .faq__grid { grid-template-columns: 1fr; } }