.dq-container { max-width: 860px; margin: 0 auto; padding: 0 20px; } .dq-head { position: relative; overflow: hidden; text-align: center; color: #fff; padding: 4rem 0 3.4rem; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 60%, #163a6e 100%); } .dq-head-orb { position: absolute; right: -90px; top: -100px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgba(201,151,43,.18), transparent 70%); pointer-events: none; } .dq-head-inner { position: relative; z-index: 1; } .dq-head .eyebrow-text { color: var(--gold-lt); } .dq-head h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); color: #fff; margin-bottom: .5rem; } .dq-head p { color: rgba(255,255,255,.74); margin: 0 auto 1.8rem; max-width: 500px; font-size: 1.02rem; } .dq-search { position: relative; max-width: 460px; margin: 0 auto; display: flex; align-items: center; } .dq-search svg { position: absolute; left: 16px; color: var(--txt3); pointer-events: none; } .dq-search input { width: 100%; background: #fff; border: 1.5px solid transparent; border-radius: var(--radius); padding: 14px 16px 14px 44px; font-size: 14px; font-family: inherit; color: var(--txt1); outline: none; box-shadow: var(--sh-md); transition: box-shadow .2s ease; } .dq-search input::placeholder { color: var(--txt3); } .dq-search input:focus { box-shadow: 0 0 0 4px rgba(201,151,43,.25), var(--sh-md); } .dq-body { padding-top: 2.5rem; } .dq-tabs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 2rem; } .dq-tab { background: var(--card); border: 1.5px solid var(--border); border-radius: 22px; padding: 8px 18px; font-size: 13px; font-weight: 700; color: var(--txt2); font-family: inherit; cursor: pointer; transition: background .15s, border-color .15s, color .15s; } .dq-tab:hover { border-color: var(--navy); color: var(--navy); } .dq-tab.active { background: var(--navy); border-color: var(--navy); color: #fff; } .dq-list { display: flex; flex-direction: column; gap: 12px; } .dq-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--sh-sm); transition: box-shadow .2s ease, border-color .2s ease; } .dq-item:hover { box-shadow: var(--sh-md); } .dq-item.open { border-color: rgba(201,151,43,.4); } .dq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; border: none; background: none; text-align: left; font-size: 15px; font-weight: 700; color: var(--navy); cursor: pointer; font-family: inherit; } .dq-ic { position: relative; width: 16px; height: 16px; flex-shrink: 0; } .dq-ic::before, .dq-ic::after { content: ''; position: absolute; background: var(--gold-dark); border-radius: 2px; transition: transform .3s ease, opacity .3s ease; } .dq-ic::before { top: 7px; left: 0; width: 16px; height: 2px; } .dq-ic::after { top: 0; left: 7px; width: 2px; height: 16px; } .dq-item.open .dq-ic::after { transform: rotate(90deg); opacity: 0; } .dq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; } .dq-a p { padding: 0 22px 20px; margin: 0; color: var(--txt2); font-size: 14px; line-height: 1.7; } .dq-a a { color: var(--gold-dark); text-decoration: underline; } .dq-item.open .dq-a { max-height: 320px; } .dq-empty { text-align: center; padding: 3.5rem 1.5rem; background: var(--surface); border: 1.5px dashed var(--border); border-radius: var(--radius); } .dq-empty-icon { width: 72px; height: 72px; margin: 0 auto 1rem; border-radius: 50%; background: var(--card); color: var(--txt3); display: flex; align-items: center; justify-content: center; box-shadow: var(--sh-sm); } .dq-empty h3 { color: var(--navy); margin-bottom: .4rem; } .dq-empty p { color: var(--txt2); margin: 0 auto 1.4rem; max-width: 360px; } .dq-cta { position: relative; overflow: hidden; text-align: center; padding: 4.5rem 20px; } .dq-cta-orb { position: absolute; left: -80px; bottom: -90px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(201,151,43,.16), transparent 70%); pointer-events: none; } .dq-cta-inner { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; } .dq-cta h2 { font-size: clamp(1.7rem, 3.5vw, 2.3rem); margin-bottom: .8rem; } .dq-cta p { color: rgba(255,255,255,.78); margin-bottom: 1.6rem; } .dq-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } @media (max-width: 560px) { .dq-q { font-size: 14px; padding: 16px 18px; } .dq-cta-actions .btn-gold-d, .dq-cta-actions .btn-outline-d { width: 100%; max-width: 280px; justify-content: center; } }