.faq-hero { min-height: 50vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 160px 24px 60px; background: var(--black); position: relative; overflow: hidden; } .faq-hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient( 90deg, transparent, var(--cyan), var(--blue), transparent ); } .faq-hero::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 600px; height: 600px; background: radial-gradient( circle, rgba(0, 60, 130, 0.08) 0%, transparent 65% ); pointer-events: none; } .faq-hero-inner { position: relative; z-index: 2; max-width: 640px; } .faq-hero-inner h1 { font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: 14px; } [lang="ar"] .faq-hero-inner h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); } .faq-hero-inner p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.8; } .faq-section { background: var(--deep); padding: var(--space-xl) 24px; } .faq-inner { max-width: 820px; margin: auto; } .faq-item { border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 14px; overflow: hidden; transition: var(--t-base); } .faq-item.open { border-color: var(--border-cyan); } .faq-q { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; cursor: pointer; gap: 16px; background: var(--surface); } .faq-q span { font-family: "Orbitron", sans-serif; font-size: 0.82rem; font-weight: 600; color: var(--text-primary); line-height: 1.5; } .faq-q i { color: var(--cyan); font-size: 1rem; flex-shrink: 0; transition: transform 0.35s var(--ease); } .faq-item.open .faq-q i { transform: rotate(45deg); } .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease), padding 0.3s; } .faq-item.open .faq-a { max-height: 300px; } .faq-a-inner { padding: 0 24px 22px; font-size: 0.9rem; color: var(--text-muted); line-height: 1.8; } .faq-a-inner a { color: var(--cyan); text-decoration: none; }