/* ==========================================================================
   OrderOnQR — public site pages (Contact, Privacy policy, Browse restaurants)
   Builds on landing.css (tokens, header, buttons, reveals, motion layer).
   Loaded by layout/default.php for those pages only. All selectors are .oq- prefixed.
   ========================================================================== */

.oq-page { background: var(--oq-cream); overflow: clip; }

/* ---------- Page hero ---------- */
.oq-page-hero {
    position: relative; overflow: hidden; isolation: isolate;
    padding: calc(var(--oq-header-h) + 64px) 0 80px;
    background:
        radial-gradient(900px 480px at 88% 0%, rgba(85, 70, 232, .10), transparent 60%),
        radial-gradient(640px 380px at 0% 100%, rgba(227, 155, 47, .10), transparent 60%),
        var(--oq-cream);
}
.oq-page-hero::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: radial-gradient(rgba(14, 16, 32, .08) 1px, transparent 1px);
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(ellipse 60% 70% at 78% 30%, #000, transparent 72%);
    mask-image: radial-gradient(ellipse 60% 70% at 78% 30%, #000, transparent 72%);
}
.oq-page-hero::after {
    content: ''; position: absolute; z-index: -1; pointer-events: none;
    width: 560px; height: 560px; right: -180px; top: -220px; border-radius: 50%;
    background: radial-gradient(circle, rgba(122, 92, 240, .16), transparent 62%);
    animation: oqDrift1 18s ease-in-out infinite alternate;
}
.oq-crumbs {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    font-size: .85rem; color: var(--oq-subtle); margin-bottom: 20px !important;
}
.oq-crumbs a { color: var(--oq-muted); text-decoration: none; }
.oq-crumbs a:hover { color: var(--oq-brand); }
.oq-crumbs i { font-size: .58rem; }
.oq-page-hero__title {
    font-family: var(--oq-display); font-weight: 500; color: var(--oq-ink);
    font-size: clamp(2.4rem, 1.5rem + 3vw, 3.9rem); line-height: 1.04; letter-spacing: -.03em;
    margin-top: 18px !important; font-variation-settings: 'opsz' 96;
}
.oq-page-hero__title em { font-style: italic; color: var(--oq-brand); }
.oq-page-hero__lead {
    font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); color: var(--oq-muted);
    max-width: 36em; margin-top: 20px !important;
}
.oq-page-hero--center { text-align: center; }
.oq-page-hero--center .oq-crumbs { justify-content: center; }
.oq-page-hero--center .oq-page-hero__lead { margin-left: auto; margin-right: auto; }
.oq-rise { animation: oqEnter .7s var(--d, 0s) cubic-bezier(.2, .7, .2, 1) both; }

.oq-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px !important; }
.oq-page-hero--center .oq-chips { justify-content: center; }
.oq-chip {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
    background: #fff; border: 1px solid var(--oq-line); box-shadow: var(--oq-shadow-sm);
    font-size: .85rem; font-weight: 500; color: var(--oq-muted);
}
.oq-chip i { color: var(--oq-brand); font-size: .82rem; }

/* ==========================================================================
   Contact
   ========================================================================== */
.oq-chero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: 64px; align-items: center; }
.oq-chero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.oq-chero__visual { position: relative; aspect-ratio: 1 / .86; }
.oq-chero__photo {
    position: absolute; inset: 0 0 9% 10%; border-radius: 28px; overflow: hidden; box-shadow: var(--oq-shadow-lg);
    animation: oqClipIn 1.1s cubic-bezier(.65, 0, .25, 1) both;
}
.oq-chero__photo img { width: 100%; height: 100%; object-fit: cover; }
.oq-chero__photo::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(14, 16, 32, 0) 45%, rgba(14, 16, 32, .45) 100%);
}
.oq-chero__caption {
    position: absolute; left: 22px; bottom: 20px; z-index: 2;
    display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: .82rem; font-weight: 500;
}
.oq-chero__toast--a { left: 0; top: 12%; animation: oqEnter .7s .35s cubic-bezier(.2, .7, .2, 1) both, oqFloat 7s 1.1s ease-in-out infinite; }
.oq-chero__toast--b { right: -6px; bottom: 0; animation: oqEnter .7s .5s cubic-bezier(.2, .7, .2, 1) both, oqFloat 7s 1.2s ease-in-out infinite; }
.oq-chero__toast--b .oq-toast__icon { background: #e5f7ec; color: #1a8a4a; }
.oq-page-hero.is-offscreen .oq-toast, .oq-page-hero.is-offscreen::after { animation-play-state: paused; }

.oq-cgrid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr); gap: 32px; align-items: start; }

.oq-form-card {
    position: relative; overflow: hidden; isolation: isolate;
    background: #fff; border: 1px solid var(--oq-line); border-radius: var(--oq-radius-lg);
    padding: 40px; box-shadow: var(--oq-shadow);
}
.oq-form-card::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px;
    background: linear-gradient(90deg, var(--oq-brand), #8b7bff 55%, var(--oq-accent));
}
.oq-form-card::after {
    content: ''; position: absolute; z-index: -1; width: 380px; height: 380px; right: -170px; top: -190px; border-radius: 50%;
    background: radial-gradient(circle, rgba(85, 70, 232, .10), transparent 65%);
}
.oq-form-card__head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 28px; }
.oq-form-card__icon {
    flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
    background: var(--oq-brand-soft); color: var(--oq-brand); font-size: 1.05rem;
}
.oq-form-card h2 { font-size: 1.5rem; font-weight: 650; letter-spacing: -.01em; line-height: 1.25; }
.oq-form-card__head p { color: var(--oq-muted); font-size: .95rem; margin-top: 4px !important; }

.oq-form { display: grid; gap: 20px; }
.oq-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.oq-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.oq-field label { font-size: .88rem; font-weight: 600; color: var(--oq-ink); margin: 0; }
.oq-field label .oq-req { color: var(--oq-red); margin-left: 2px; }
.oq-field__control { position: relative; }
.oq-field__control > i {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    color: var(--oq-subtle); font-size: .9rem; pointer-events: none; transition: color .2s ease;
}
.oq-field__control--area > i { top: 19px; transform: none; }
.oq-field__control:focus-within > i { color: var(--oq-brand); }
.oq-input {
    display: block; width: 100%; min-height: 52px; padding: 14px 16px 14px 44px;
    font: 400 1rem/1.45 var(--oq-font); color: var(--oq-ink);
    background: #fbfaf7; border: 1.5px solid var(--oq-line); border-radius: 14px;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
    -webkit-appearance: none; appearance: none;
}
.oq-input::placeholder { color: #a3a6b5; }
.oq-input:hover { border-color: #d8d1c2; }
.oq-input:focus { outline: none; border-color: var(--oq-brand); background: #fff; box-shadow: 0 0 0 4px rgba(85, 70, 232, .12); }
.oq-home .oq-input:focus-visible { outline: none; }
textarea.oq-input { min-height: 168px; resize: vertical; }
.oq-input[aria-invalid="true"] { border-color: var(--oq-red); background: #fffafa; }
.oq-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(200, 68, 63, .14); }
.oq-field__error { display: none; align-items: flex-start; gap: 6px; font-size: .84rem; color: #b23a35; }
.oq-field__error.show { display: flex; animation: oqEnter .25s ease both; }
.oq-field__error.show::before {
    content: '\f06a'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: .8rem; margin-top: 2px;
}
.oq-field__meta { display: flex; justify-content: space-between; gap: 12px; font-size: .8rem; color: var(--oq-subtle); }
.oq-field__meta .is-met { color: var(--oq-green); }

.oq-form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 4px; }
.oq-form__note { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--oq-subtle); max-width: 26em; }
.oq-form__note a { color: var(--oq-brand); font-weight: 500; }
.oq-submit { min-width: 200px; }
.oq-submit__spin {
    display: none; width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: oqSpin .8s linear infinite;
}
.oq-submit.is-loading .oq-submit__spin { display: inline-block; }
.oq-submit.is-loading .oq-submit__icon { display: none; }
.oq-submit:disabled { cursor: progress; opacity: .85; transform: none; }

.oq-form-alert {
    display: none; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px;
    background: var(--oq-red-soft); border: 1px solid rgba(200, 68, 63, .22); color: #8f2a26; font-size: .92rem;
}
.oq-form-alert.show { display: flex; animation: oqEnter .3s ease both; }
.oq-form-alert i { margin-top: 3px; }

.oq-form-success { display: none; text-align: center; padding: 28px 8px 12px; }
.oq-form-success.show { display: block; animation: oqEnter .5s cubic-bezier(.2, .7, .2, 1) both; }
.oq-form-success__icon {
    position: relative; width: 84px; height: 84px; margin: 0 auto 22px; border-radius: 50%;
    display: grid; place-items: center; background: var(--oq-green-soft); color: var(--oq-green); font-size: 2rem;
}
.oq-form-success__icon::after {
    content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(23, 138, 93, .28);
    animation: oqRing 2.2s ease-out infinite;
}
.oq-form-success h3 { font-family: var(--oq-display); font-weight: 500; font-size: 1.9rem; letter-spacing: -.015em; }
.oq-form-success h3:focus { outline: none; }
.oq-form-success p { color: var(--oq-muted); max-width: 30em; margin: 10px auto 26px !important; }
.oq-form-success__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
@keyframes oqRing { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }

.oq-cinfo { display: grid; gap: 20px; }
.oq-info-card {
    position: relative; overflow: hidden; isolation: isolate;
    background: #fff; border: 1px solid var(--oq-line); border-radius: var(--oq-radius-lg);
    padding: 28px; box-shadow: var(--oq-shadow-sm);
}
.oq-info-card h2 { font-size: 1.15rem; font-weight: 650; }
.oq-info-card > p { color: var(--oq-muted); font-size: .92rem; margin-top: 4px !important; }
.oq-info-card .oq-channels { margin-top: 18px !important; }
.oq-channel { transition: border-color .15s ease, transform .2s ease, box-shadow .2s ease; }
a.oq-channel:hover { box-shadow: var(--oq-shadow-sm); }
.oq-channel__go { margin-left: auto; color: var(--oq-subtle); font-size: .8rem; transition: transform .2s ease, color .2s ease; }
a.oq-channel:hover .oq-channel__go { color: var(--oq-brand); transform: translateX(3px); }
.oq-facts { display: grid; gap: 16px; margin-top: 18px !important; }
.oq-fact { display: flex; gap: 14px; align-items: flex-start; }
.oq-fact__icon {
    flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
    background: var(--oq-accent-soft); color: #9a5f07; font-size: .95rem;
}
.oq-fact__icon--green { background: var(--oq-green-soft); color: var(--oq-green); }
.oq-fact__icon--brand { background: var(--oq-brand-soft); color: var(--oq-brand); }
.oq-fact strong { display: block; font-size: .95rem; font-weight: 600; color: var(--oq-ink); }
.oq-fact > div span { display: block; font-size: .88rem; color: var(--oq-muted); }
.oq-info-card--dark { background: var(--oq-ink); border-color: transparent; color: #fff; }
.oq-info-card--dark::before {
    content: ''; position: absolute; z-index: -1; width: 300px; height: 300px; right: -120px; bottom: -150px; border-radius: 50%;
    background: radial-gradient(circle, rgba(122, 92, 240, .45), transparent 65%);
}
.oq-info-card--dark h2 { color: #fff; }
.oq-info-card--dark > p { color: rgba(255, 255, 255, .7); }
.oq-info-card__links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* FAQ accordion */
.oq-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.oq-faq details {
    background: #fff; border: 1px solid var(--oq-line); border-radius: 18px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.oq-faq details:hover { border-color: #ddd5c5; }
.oq-faq details[open] { border-color: rgba(85, 70, 232, .3); box-shadow: var(--oq-shadow-sm); }
.oq-faq summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px;
    padding: 18px 20px; font-weight: 600; color: var(--oq-ink); border-radius: 18px;
}
.oq-faq summary::-webkit-details-marker { display: none; }
.oq-faq summary:focus-visible { outline: 3px solid rgba(85, 70, 232, .55); outline-offset: 3px; }
.oq-faq__icon {
    flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
    background: var(--oq-brand-soft); color: var(--oq-brand); font-size: .85rem;
}
.oq-faq__toggle {
    flex: none; margin-left: auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
    border: 1px solid var(--oq-line); color: var(--oq-muted); font-size: .72rem;
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), background-color .2s ease, color .2s ease, border-color .2s ease;
}
.oq-faq details[open] .oq-faq__toggle { transform: rotate(45deg); background: var(--oq-brand); border-color: var(--oq-brand); color: #fff; }
.oq-faq__a { padding: 0 20px 20px 68px; color: var(--oq-muted); font-size: .95rem; }
.oq-faq details[open] .oq-faq__a { animation: oqEnter .35s ease both; }

/* ==========================================================================
   Privacy policy
   ========================================================================== */
.oq-legal { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 48px; align-items: start; }
.oq-toc { position: sticky; top: calc(var(--oq-header-h) + 24px); display: grid; gap: 16px; }
.oq-toc__card { background: #fff; border: 1px solid var(--oq-line); border-radius: 20px; padding: 20px; box-shadow: var(--oq-shadow-sm); }
.oq-toc__title {
    display: flex; align-items: center; gap: 8px; margin-bottom: 10px !important;
    font-size: .76rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--oq-subtle);
}
.oq-toc__title i { color: var(--oq-brand); }
.oq-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: oqtoc; }
.oq-toc ol a {
    display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px;
    font-size: .9rem; line-height: 1.35; color: var(--oq-muted); text-decoration: none;
    transition: color .2s ease, background-color .2s ease;
}
.oq-toc ol a::before {
    counter-increment: oqtoc; content: counter(oqtoc, decimal-leading-zero);
    min-width: 20px; font-size: .72rem; font-weight: 700; color: var(--oq-subtle); font-variant-numeric: tabular-nums;
    transition: color .2s ease;
}
.oq-toc ol a:hover { color: var(--oq-ink); background: rgba(14, 16, 32, .04); }
.oq-toc ol a.is-active { color: var(--oq-brand-ink); background: var(--oq-brand-soft); font-weight: 600; }
.oq-toc ol a.is-active::before { color: var(--oq-brand); }
.oq-toc__progress { height: 3px; margin-top: 14px; border-radius: 3px; background: var(--oq-line); overflow: hidden; }
.oq-toc__progress span {
    display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0);
    background: linear-gradient(90deg, var(--oq-brand), #8b7bff);
}
.oq-toc__help {
    position: relative; overflow: hidden; isolation: isolate;
    padding: 20px; border-radius: 20px; background: var(--oq-ink); color: rgba(255, 255, 255, .72); font-size: .88rem;
}
.oq-toc__help::before {
    content: ''; position: absolute; z-index: -1; width: 220px; height: 220px; right: -90px; bottom: -110px; border-radius: 50%;
    background: radial-gradient(circle, rgba(122, 92, 240, .5), transparent 65%);
}
.oq-toc__help strong { display: block; color: #fff; font-size: .98rem; margin-bottom: 4px; }
.oq-toc__help .oq-btn { margin-top: 14px; }

.oq-legal__doc {
    background: #fff; border: 1px solid var(--oq-line); border-radius: var(--oq-radius-lg);
    padding: 56px 64px; box-shadow: var(--oq-shadow-sm);
}
.oq-legal__section { scroll-margin-top: calc(var(--oq-header-h) + 24px); padding-top: 44px; margin-top: 44px; border-top: 1px solid var(--oq-line); }
.oq-legal__section:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.oq-legal__section h2 {
    display: flex; align-items: center; gap: 14px; margin-bottom: 18px !important;
    font-family: var(--oq-display); font-weight: 500; letter-spacing: -.015em; line-height: 1.2;
    font-size: clamp(1.45rem, 1.2rem + .8vw, 1.85rem);
}
.oq-legal__icon {
    flex: none; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
    background: var(--oq-brand-soft); color: var(--oq-brand); font-size: 1rem;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), background-color .3s ease, color .3s ease;
}
.oq-legal__section.is-current .oq-legal__icon { background: var(--oq-brand); color: #fff; transform: rotate(-6deg); }
.oq-legal__section p { color: #3f4358; font-size: 1.02rem; line-height: 1.8; margin-bottom: 16px !important; }
.oq-legal__section > :last-child { margin-bottom: 0 !important; }
.oq-legal__section ul { display: grid; gap: 10px; margin: 0 0 20px !important; }
.oq-legal__section li { position: relative; padding-left: 28px; color: #3f4358; font-size: 1rem; line-height: 1.75; }
.oq-legal__section li::before {
    content: ''; position: absolute; left: 6px; top: .68em; width: 8px; height: 8px; border-radius: 50%;
    background: var(--oq-brand); box-shadow: 0 0 0 4px var(--oq-brand-soft);
}
.oq-legal__section strong { color: var(--oq-ink); font-weight: 600; }
.oq-legal__section a { color: var(--oq-brand); font-weight: 500; text-underline-offset: 3px; }
.oq-legal__section a:hover { color: var(--oq-brand-ink); }
.oq-legal__note {
    display: flex; gap: 14px; align-items: flex-start; margin: 24px 0 !important; padding: 18px 20px;
    border-radius: 16px; border: 1px solid rgba(85, 70, 232, .16);
    background: linear-gradient(135deg, #f4f2ff 0%, #faf7f1 100%);
}
.oq-legal__note > i { color: var(--oq-brand); margin-top: 6px; }
.oq-legal__note p { margin: 0 !important; font-size: .97rem; color: #34384c; }

.oq-legal-cta { margin-top: 48px; }

.oq-totop {
    position: fixed; right: 20px; bottom: 20px; z-index: 1020;
    width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
    border: 1px solid var(--oq-line); background: #fff; color: var(--oq-ink); box-shadow: var(--oq-shadow);
    opacity: 0; visibility: hidden; transform: translateY(12px);
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s, background-color .2s ease, color .2s ease;
}
.oq-totop.is-shown { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .25s ease, visibility 0s, background-color .2s ease, color .2s ease; }
.oq-totop:hover { background: var(--oq-brand); border-color: var(--oq-brand); color: #fff; }

/* ==========================================================================
   Browse restaurants
   ========================================================================== */
.oq-dir-hero { padding-bottom: 64px; }
.oq-search-wrap { max-width: 660px; margin: 36px auto 0; }
.oq-search {
    position: relative; display: flex; align-items: center; gap: 4px;
    padding: 6px 8px 6px 22px; border-radius: 999px;
    background: #fff; border: 1.5px solid var(--oq-line); box-shadow: var(--oq-shadow);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.oq-search:focus-within { border-color: var(--oq-brand); box-shadow: 0 0 0 5px rgba(85, 70, 232, .12), var(--oq-shadow); }
.oq-search__icon { color: var(--oq-brand); font-size: 1rem; }
.oq-search input {
    flex: 1; min-width: 0; height: 52px; padding: 0 12px; border: 0; background: transparent;
    font: 400 1.04rem var(--oq-font); color: var(--oq-ink); outline: none;
}
.oq-home .oq-search input:focus-visible { outline: none; }
.oq-search input::placeholder { color: #a3a6b5; }
.oq-search input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.oq-search__spin {
    display: none; flex: none; width: 18px; height: 18px; margin-right: 6px; border-radius: 50%;
    border: 2px solid var(--oq-brand-soft); border-top-color: var(--oq-brand); animation: oqSpin .8s linear infinite;
}
.oq-search.is-loading .oq-search__spin { display: block; }
.oq-search__clear {
    display: none; flex: none; width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
    place-items: center; background: #f2efe8; color: var(--oq-muted); transition: background-color .2s ease, color .2s ease;
}
.oq-search__clear.is-shown { display: grid; }
.oq-search__clear:hover { background: var(--oq-red-soft); color: var(--oq-red); }
.oq-search-hint { margin-top: 14px !important; font-size: .86rem; color: var(--oq-subtle); }
.oq-search-hint i { color: var(--oq-green); margin-right: 6px; }

.oq-dir { padding: 16px 0 88px; }
.oq-dir__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; min-height: 40px; }
.oq-dir__title { font-size: 1.25rem; font-weight: 650; letter-spacing: -.01em; }
.oq-dir__count { font-size: .95rem; color: var(--oq-muted); }
.oq-dir__count strong { color: var(--oq-ink); font-weight: 650; }

.oq-rgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; transition: opacity .2s ease; }
.oq-rgrid[aria-busy="true"] { opacity: .5; }
.oq-rgrid[hidden] { display: none; }
.oq-rcard {
    position: relative; display: flex; flex-direction: column; min-width: 0;
    background: #fff; border: 1px solid var(--oq-line); border-radius: 22px; overflow: hidden;
    box-shadow: var(--oq-shadow-sm);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, border-color .35s ease;
}
.oq-rcard:hover, .oq-rcard:focus-within { transform: translateY(-6px); box-shadow: var(--oq-shadow-lg); border-color: rgba(85, 70, 232, .25); }
.oq-rcard.is-entering { animation: oqTileIn .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 60ms); }
.oq-rcard__media {
    position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 16 / 10;
    display: grid; place-items: center;
    background: linear-gradient(135deg, #efedff 0%, #f7f3ea 55%, #fdf1dc 100%);
}
.oq-rcard__media::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: radial-gradient(rgba(14, 16, 32, .07) 1px, transparent 1px); background-size: 16px 16px;
}
.oq-rcard__backdrop {
    position: absolute; inset: -20%; z-index: -2; background-size: cover; background-position: center;
    filter: blur(28px) saturate(1.4); opacity: .5; transform: scale(1.05); transition: transform .8s cubic-bezier(.2, .8, .2, 1);
}
.oq-rcard__logo {
    width: 116px; height: 116px; border-radius: 26px; overflow: hidden; display: grid; place-items: center;
    background: #fff; box-shadow: 0 16px 34px -14px rgba(14, 16, 32, .4), 0 0 0 1px rgba(14, 16, 32, .04);
    transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.oq-rcard__logo img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.oq-rcard__mono {
    width: 116px; height: 116px; border-radius: 26px; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--oq-brand) 0%, #8b7bff 100%); color: #fff;
    font-family: var(--oq-display); font-size: 2.6rem; font-weight: 500; letter-spacing: -.02em;
    box-shadow: 0 16px 34px -14px rgba(85, 70, 232, .7);
    transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.oq-rcard__media--photo .oq-rcard__backdrop { inset: 0; filter: none; opacity: 1; transform: none; }
.oq-rcard__media--photo .oq-rcard__logo { display: none; }
.oq-rcard__media--photo::after {
    z-index: 0; background-image: linear-gradient(180deg, rgba(14, 16, 32, 0) 55%, rgba(14, 16, 32, .28) 100%); background-size: auto;
}
.oq-rcard:hover .oq-rcard__media--photo .oq-rcard__backdrop { transform: scale(1.06); }
.oq-rcard:hover .oq-rcard__logo, .oq-rcard:hover .oq-rcard__mono { transform: translateY(-4px) scale(1.05) rotate(-2deg); }
.oq-rcard:hover .oq-rcard__backdrop { transform: scale(1.2); }
.oq-rcard__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 22px 24px 22px; }
.oq-rcard__name { font-size: 1.18rem; font-weight: 650; letter-spacing: -.01em; line-height: 1.3; color: var(--oq-ink); overflow-wrap: anywhere; }
.oq-rcard__link { color: inherit; text-decoration: none; }
.oq-rcard__link::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.oq-rcard__link:hover { color: var(--oq-brand-ink); }
.oq-home .oq-rcard__link:focus-visible { outline: none; }
.oq-rcard:has(.oq-rcard__link:focus-visible) { outline: 3px solid rgba(85, 70, 232, .55); outline-offset: 3px; }
.oq-rcard__desc {
    font-size: .92rem; color: var(--oq-muted);
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.oq-rcard__meta { display: grid; gap: 6px; }
.oq-rcard__meta li { display: flex; align-items: flex-start; gap: 10px; font-size: .88rem; color: var(--oq-muted); min-width: 0; }
.oq-rcard__meta li > i { flex: none; width: 14px; margin-top: 4px; color: var(--oq-brand); font-size: .8rem; text-align: center; }
.oq-rcard__meta span { overflow-wrap: anywhere; }
.oq-rcard__phone { position: relative; z-index: 2; color: inherit; text-decoration: none; }
.oq-rcard__phone:hover { color: var(--oq-brand); text-decoration: underline; text-underline-offset: 3px; }
.oq-rcard__foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: auto; padding-top: 16px; border-top: 1px dashed var(--oq-line);
    font-size: .92rem; font-weight: 600; color: var(--oq-brand);
}
.oq-rcard__go {
    width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
    background: var(--oq-brand-soft); color: var(--oq-brand); font-size: .8rem;
    transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.oq-rcard:hover .oq-rcard__go { background: var(--oq-brand); color: #fff; transform: translateX(3px); }

.oq-empty {
    text-align: center; padding: 56px 24px; border-radius: 24px;
    background: #fff; border: 1px dashed #d9d1c1;
}
.oq-empty[hidden] { display: none; }
.oq-empty__icon {
    width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center;
    background: var(--oq-brand-soft); color: var(--oq-brand); font-size: 1.6rem;
}
.oq-empty__icon--warn { background: var(--oq-accent-soft); color: #9a5f07; }
.oq-empty h3 { font-family: var(--oq-display); font-weight: 500; font-size: 1.65rem; letter-spacing: -.015em; }
.oq-empty p { color: var(--oq-muted); max-width: 30em; margin: 8px auto 0 !important; overflow-wrap: anywhere; }
.oq-empty__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 22px; }

.oq-pager {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
    margin-top: 40px; padding: 10px 10px 10px 24px; border-radius: 999px;
    background: #fff; border: 1px solid var(--oq-line); box-shadow: var(--oq-shadow-sm);
}
.oq-pager[hidden] { display: none; }
.oq-pager__info { font-size: .9rem; color: var(--oq-muted); }
.oq-pager__info strong { color: var(--oq-ink); }
.oq-pager ul { display: flex; flex-wrap: wrap; gap: 4px; }
.oq-pager__item {
    min-width: 40px; height: 40px; padding: 0 10px; border-radius: 999px; display: inline-grid; place-items: center;
    font-size: .9rem; font-weight: 600; color: var(--oq-muted); text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}
a.oq-pager__item:hover { background: rgba(14, 16, 32, .05); color: var(--oq-ink); }
.oq-pager__item.is-current { background: var(--oq-brand); color: #fff; box-shadow: 0 8px 18px -8px rgba(85, 70, 232, .7); }
.oq-pager__item.is-disabled { color: #cbc6ba; }

.oq-gsteps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.oq-gstep {
    position: relative; overflow: hidden; padding: 28px; border-radius: 22px;
    background: #fff; border: 1px solid var(--oq-line);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease;
}
.oq-gstep:hover { transform: translateY(-4px); box-shadow: var(--oq-shadow); }
.oq-gstep__num {
    position: absolute; right: 22px; top: 12px; font-family: var(--oq-display); font-size: 3.6rem; line-height: 1;
    color: rgba(85, 70, 232, .09);
}
.oq-gstep__icon {
    width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
    background: var(--oq-brand-soft); color: var(--oq-brand); font-size: 1.05rem;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), background-color .3s ease, color .3s ease;
}
.oq-gstep:hover .oq-gstep__icon { transform: rotate(-8deg); background: var(--oq-brand); color: #fff; }
.oq-gstep h3 { margin-top: 18px !important; font-size: 1.1rem; font-weight: 650; }
.oq-gstep p { margin-top: 6px !important; color: var(--oq-muted); font-size: .94rem; }

.oq-fcart { position: fixed; right: 20px; bottom: 20px; z-index: 1020; }
.oq-fcart__btn {
    display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 18px 0 20px; border: 0; border-radius: 999px;
    background: var(--oq-ink); color: #fff; font: 600 .95rem var(--oq-font); cursor: pointer; box-shadow: var(--oq-shadow-lg);
    transition: transform .2s ease, background-color .2s ease;
}
.oq-fcart__btn:hover { transform: translateY(-2px); background: var(--oq-brand-ink); }
.oq-fcart__count {
    min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; display: inline-grid; place-items: center;
    background: var(--oq-accent); color: #fff; font-size: .78rem; font-weight: 700;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1199.98px) {
    .oq-legal { grid-template-columns: 236px minmax(0, 1fr); gap: 32px; }
    .oq-legal__doc { padding: 48px; }
    .oq-chero { gap: 48px; }
}

@media (max-width: 991.98px) {
    .oq-page-hero { padding: calc(var(--oq-header-h) + 44px) 0 64px; }
    .oq-chero { grid-template-columns: minmax(0, 1fr); gap: 48px; }
    .oq-chero__visual { max-width: 560px; width: 100%; margin: 0 auto; }
    .oq-cgrid { grid-template-columns: minmax(0, 1fr); }
    .oq-cinfo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .oq-info-card--dark { grid-column: 1 / -1; }
    .oq-faq { grid-template-columns: minmax(0, 1fr); }

    .oq-legal { grid-template-columns: minmax(0, 1fr); }
    .oq-toc { position: static; }
    .oq-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; }
    .oq-toc__progress, .oq-toc__help { display: none; }

    .oq-rgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .oq-gsteps { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767.98px) {
    .oq-chero__ctas .oq-btn { flex: 1 1 100%; }
    .oq-chero__visual { aspect-ratio: auto; height: 330px; }
    .oq-chero__photo { inset: 0 0 14% 0; }
    .oq-chero__toast--a { left: 10px; top: 14px; }
    .oq-chero__toast--b { right: 10px; }

    .oq-form-card { padding: 28px 20px; }
    .oq-form-card__head { margin-bottom: 22px; }
    .oq-form__row { grid-template-columns: minmax(0, 1fr); }
    .oq-form__foot { flex-direction: column-reverse; align-items: stretch; }
    .oq-submit { width: 100%; }
    .oq-cinfo { grid-template-columns: minmax(0, 1fr); }
    .oq-info-card { padding: 24px 20px; }
    .oq-faq__a { padding-left: 20px; }

    .oq-legal__doc { padding: 30px 22px; border-radius: 20px; }
    .oq-legal__section { padding-top: 34px; margin-top: 34px; }
    .oq-legal__section h2 { align-items: flex-start; }
    .oq-legal__icon { width: 38px; height: 38px; border-radius: 11px; font-size: .9rem; }
    .oq-legal__section p { font-size: 1rem; line-height: 1.75; }
    .oq-toc ol { grid-template-columns: minmax(0, 1fr); }

    .oq-search { padding-left: 18px; }
    .oq-search input { height: 48px; font-size: 1rem; }
    .oq-rgrid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .oq-pager { flex-direction: column; border-radius: 22px; padding: 16px; text-align: center; }
    .oq-pager ul { justify-content: center; }
    .oq-totop, .oq-fcart { right: 16px; bottom: 16px; }
}