/* Main-page AURA and ORYNT detail dialogs */
body.modal-open { overflow: hidden; }
.brand-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; visibility: hidden; opacity: 0; transition: opacity .22s ease, visibility .22s ease; }
.brand-modal.is-open { visibility: visible; opacity: 1; }
.brand-modal-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; background: rgba(6, 5, 13, .78); border: 0; backdrop-filter: blur(10px); }
.brand-modal-panel { position: relative; z-index: 1; display: grid; width: min(820px, 100%); max-height: min(700px, calc(100vh - 48px)); grid-template-columns: .82fr 1.18fr; overflow: auto; color: #f3efff; background: linear-gradient(145deg, #1c1827, #11111c 75%); border: 1px solid #45354f; border-radius: 20px; box-shadow: 0 28px 90px #0009; transform: translateY(12px) scale(.985); transition: transform .22s ease; }
.brand-modal.is-open .brand-modal-panel { transform: translateY(0) scale(1); }
.brand-modal-visual { position: relative; display: grid; min-height: 360px; place-items: center; overflow: hidden; background: radial-gradient(ellipse at 50% 48%, #193e54 0, #182539 50%, #171722 90%); }
.brand-modal-visual::after { position: absolute; inset: 12%; content: ""; border: 1px solid #ffffff18; border-radius: 50%; box-shadow: 0 0 0 24px #ffffff08, 0 0 0 48px #ffffff05; }
.brand-modal-visual img { position: relative; z-index: 1; width: min(72%, 230px); max-height: 290px; object-fit: contain; filter: drop-shadow(0 18px 28px #0007); }
.orynt-modal-panel .brand-modal-visual { background: radial-gradient(ellipse at 50% 75%, #563666 0, #27203b 52%, #191722 90%); }
.orynt-modal-panel .brand-modal-visual img { width: 100%; height: 100%; max-height: 420px; object-position: center bottom; }
.brand-modal-content { align-self: center; padding: 48px 42px 42px; }
.brand-modal-content h2 { margin: 8px 0 18px; color: #fff; font-family: var(--font-display); font-size: clamp(32px, 5vw, 48px); letter-spacing: -.055em; }
.brand-modal-copy { color: #bbb3c8; font-size: 13px; line-height: 1.85; }
.brand-modal-copy p { margin: 0 0 13px; }
.brand-modal-copy ul { display: grid; gap: 8px; margin: 15px 0 21px; padding: 0; list-style: none; }
.brand-modal-copy li { position: relative; padding-left: 19px; color: #ded7e8; }
.brand-modal-copy li::before { position: absolute; top: .62em; left: 0; width: 7px; height: 7px; content: ""; background: linear-gradient(135deg, #e85eb3, #75c4ef); border-radius: 50%; box-shadow: 0 0 12px #bd63d677; }
.brand-modal-contact { display: inline-flex; align-items: center; gap: 22px; min-height: 42px; margin-top: 7px; padding: 0 15px; color: #fff; font-size: 11px; font-weight: 700; text-decoration: none; background: linear-gradient(110deg, #df41a5, #ad4ddd 57%, #7d92f0); border-radius: 8px; box-shadow: 0 6px 17px #d84caa29; transition: transform .18s, box-shadow .18s; }
.brand-modal-contact:hover { transform: translateY(-2px); box-shadow: 0 9px 22px #d84caa48; }
.brand-modal-contact span { font-size: 15px; }
.brand-modal-close { position: absolute; top: 13px; right: 15px; z-index: 3; display: grid; width: 36px; height: 36px; place-items: center; padding: 0; color: #d9d0e2; font-size: 25px; line-height: 1; cursor: pointer; background: #0b0b1499; border: 1px solid #ffffff20; border-radius: 50%; transition: background .18s, color .18s; }
.brand-modal-close:hover { color: #fff; background: #9c438e; }
.brand-modal-trigger { display: inline-flex; align-items: center; gap: 7px; padding: 0; color: #eee7f4; font: inherit; font-size: 9px; font-weight: 700; cursor: pointer; background: transparent; border: 0; }
.brand-modal-trigger:hover { color: #fff; }
.brand-modal-trigger span { color: #ec70bd; font-size: 13px; }
@media (max-width: 620px) {
    .brand-modal { padding: 12px; }
    .brand-modal-panel { width: min(460px, 100%); max-height: calc(100vh - 24px); grid-template-columns: 1fr; grid-template-rows: minmax(170px, 30vh) auto; border-radius: 16px; }
    .brand-modal-visual { min-height: 170px; }
    .brand-modal-visual img { width: 135px; max-height: 190px; }
    .orynt-modal-panel .brand-modal-visual img { width: 100%; max-height: 210px; }
    .brand-modal-content { padding: 24px 22px 25px; }
    .brand-modal-content h2 { margin-bottom: 11px; font-size: 34px; }
    .brand-modal-copy { font-size: 12px; line-height: 1.7; }
    .brand-modal-close { top: 9px; right: 9px; }
}
@media (prefers-reduced-motion: reduce) { .brand-modal, .brand-modal-panel, .brand-modal-contact { transition-duration: .01ms; } }