:root {
    --svip-navy: var(--e-global-color-primary, #001e59);
    --svip-gold: var(--e-global-color-secondary, #e39e29);
    --svip-ink: #111c2d;
    --svip-muted: #667085;
    --svip-line: #e5edf7;
    --svip-sky: #eff8ff;
    --svip-paper: #f7f9fc;
    --svip-white: #fff;
    --svip-radius-lg: 25px;
    --svip-radius-md: 16px;
    --svip-shadow: 14px 11px 23px rgba(0, 30, 89, .13);
    --svip-font: var(--e-global-typography-text-font-family, "IRANSansX", "Yekan Bakh", Tahoma, Arial, sans-serif);
    --svip-heading: var(--e-global-typography-primary-font-family, "Yekan Bakh", "IRANSansX", Tahoma, sans-serif);
}

.svip-page, .svip-gate, .svip-modal, .svip-button {
    box-sizing: border-box;
    font-family: var(--svip-font);
}

.svip-page *, .svip-gate *, .svip-modal * { box-sizing: border-box; }
.svip-page a, .svip-gate a, .svip-modal a { text-decoration: none; }
.svip-page svg, .svip-gate svg, .svip-modal svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.svip-page { width: min(1240px, calc(100% - 32px)); margin: 24px auto 80px; color: var(--svip-ink); }
.svip-page h1, .svip-page h2, .svip-page h3, .svip-gate h1, .svip-modal h2 { font-family: var(--svip-heading); margin: 0; color: inherit; }
.svip-page p, .svip-gate p, .svip-modal p { margin: 0; }

.svip-button {
    appearance: none;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.svip-button:hover { transform: translateY(-2px); }
.svip-button:focus-visible, .svip-page input:focus-visible, .svip-page select:focus-visible, .svip-page textarea:focus-visible, .svip-modal input:focus-visible { outline: 3px solid rgba(227, 158, 41, .3); outline-offset: 2px; }
.svip-button .svip-arrow { width: 18px; height: 18px; transition: transform .25s ease; }
.svip-button:hover .svip-arrow { transform: translateX(-3px); }
.svip-button--site { background: var(--svip-navy); color: #fff; box-shadow: 0 8px 24px rgba(0, 30, 89, .2); }
.svip-button--site:hover { background: #082a6c; color: #fff; }
.svip-button--primary { background: var(--svip-navy); color: #fff; box-shadow: 0 10px 24px rgba(0, 30, 89, .18); }
.svip-button--primary:hover { color: #fff; }
.svip-button--gold { background: linear-gradient(135deg, #f0b44d, var(--svip-gold)); color: #172033; box-shadow: 0 12px 30px rgba(227, 158, 41, .28); }
.svip-button--gold:hover { color: #172033; box-shadow: 0 16px 36px rgba(227, 158, 41, .4); }
.svip-button--soft { background: var(--svip-sky); color: var(--svip-navy); border: 1px solid #d9efff; }
.svip-button--glass { color: #fff; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .3); backdrop-filter: blur(10px); }
.svip-button--wide { width: 100%; }

.svip-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: 2px; color: var(--svip-gold); }
.svip-eyebrow::before { content: ""; width: 24px; height: 2px; border-radius: 5px; background: currentColor; }

.svip-brand-bar {
    min-height: 72px;
    padding: 12px 20px;
    margin-bottom: 24px;
    border: 1px solid rgba(0, 30, 89, .08);
    border-radius: 18px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 10px 35px rgba(0, 30, 89, .07);
    backdrop-filter: saturate(160%) blur(18px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    position: relative;
    z-index: 4;
}
.svip-brand-bar__logo { display: inline-flex; align-items: center; min-height: 42px; }
.svip-site-logo { max-width: 150px; max-height: 48px; width: auto; height: auto; object-fit: contain; }
.svip-wordmark { display: inline-flex; align-items: baseline; gap: 7px; color: var(--svip-navy); direction: ltr; }
.svip-wordmark b { font-family: Arial, sans-serif; font-size: 20px; letter-spacing: 2px; }
.svip-wordmark small { font-size: 9px; font-weight: 800; color: var(--svip-gold); letter-spacing: 2px; }
.svip-brand-bar nav { display: flex; align-items: center; gap: 8px; }
.svip-brand-bar nav a, .svip-brand-bar nav span { color: #344054; padding: 9px 12px; border-radius: 10px; font-size: 13px; }
.svip-brand-bar nav a:hover { background: var(--svip-sky); color: var(--svip-navy); }
.svip-brand-bar nav span { color: var(--svip-navy); font-weight: 700; background: #f3f6fb; }

.svip-gate {
    width: min(1180px, calc(100% - 32px));
    min-height: 620px;
    margin: 30px auto;
    padding: clamp(32px, 7vw, 84px);
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    align-items: center;
    color: #fff;
    background:
        radial-gradient(circle at 82% 20%, rgba(227, 158, 41, .18), transparent 30%),
        linear-gradient(135deg, #02050e 0%, #061331 45%, var(--svip-navy) 100%);
    border-radius: 32px;
    box-shadow: 0 32px 70px rgba(0, 18, 55, .28);
    isolation: isolate;
}
.svip-gate::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .16; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(90deg, #000, transparent 90%); }
.svip-gate__content { position: relative; z-index: 2; }
.svip-gate h1 { max-width: 650px; margin: 15px 0 20px; font-size: clamp(42px, 6vw, 76px); line-height: 1.18; letter-spacing: -2px; }
.svip-gate h1 em { color: var(--svip-gold); font-style: normal; }
.svip-gate__content > p { max-width: 570px; color: rgba(255,255,255,.72); font-size: 17px; line-height: 2; }
.svip-gate__actions { margin-top: 34px; display: flex; align-items: center; flex-wrap: wrap; gap: 20px; }
.svip-text-link { color: rgba(255,255,255,.75); font-size: 13px; border-bottom: 1px solid rgba(255,255,255,.3); padding-bottom: 4px; }
.svip-text-link:hover { color: #fff; }
.svip-gate__proof { display: grid; grid-template-columns: auto auto 1px auto auto; align-items: center; gap: 12px; margin-top: 42px; width: fit-content; }
.svip-gate__proof span { font-size: 24px; font-weight: 800; color: #fff; }
.svip-gate__proof small { color: rgba(255,255,255,.55); font-size: 11px; }
.svip-gate__proof i { height: 30px; background: rgba(255,255,255,.18); }
.svip-gate__visual { min-height: 410px; position: relative; display: grid; place-items: center; }
.svip-vip-mark { width: 230px; aspect-ratio: 1; border-radius: 42%; position: relative; display: grid; place-content: center; text-align: center; background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.025)); border: 1px solid rgba(255,255,255,.22); box-shadow: inset 0 0 60px rgba(255,255,255,.08), 0 34px 80px rgba(0,0,0,.3); backdrop-filter: blur(18px); transform: rotate(-7deg); }
.svip-vip-mark::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(227,158,41,.45); border-radius: inherit; }
.svip-vip-mark b { font: 800 72px/1 Arial, sans-serif; letter-spacing: -6px; color: #fff; }
.svip-vip-mark span { margin-top: 8px; font: 700 12px/1 Arial, sans-serif; letter-spacing: 8px; color: var(--svip-gold); }
.svip-orbit { position: absolute; border: 1px solid rgba(227,158,41,.28); border-radius: 50%; animation: svip-spin 22s linear infinite; }
.svip-orbit::after { content: ""; position: absolute; top: 50%; left: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--svip-gold); box-shadow: 0 0 18px var(--svip-gold); }
.svip-orbit--one { width: 360px; height: 360px; }
.svip-orbit--two { width: 470px; height: 250px; transform: rotate(35deg); animation-direction: reverse; }
.svip-gate__glow { position: absolute; width: 280px; height: 280px; border-radius: 50%; filter: blur(70px); opacity: .22; z-index: -1; }
.svip-gate__glow--one { background: var(--svip-gold); right: 28%; top: -150px; }
.svip-gate__glow--two { background: #3a7afe; left: -140px; bottom: -120px; }
@keyframes svip-spin { to { transform: rotate(360deg); } }

.svip-modal[hidden] { display: none !important; }
.svip-modal { position: fixed; inset: 0; z-index: 999999; display: grid; place-items: center; padding: 20px; }
.svip-modal__backdrop { position: absolute; inset: 0; background: rgba(2, 5, 14, .68); backdrop-filter: blur(16px) saturate(130%); animation: svip-fade .25s ease; }
.svip-login { width: min(950px, 100%); max-height: min(720px, calc(100vh - 40px)); display: grid; grid-template-columns: .9fr 1.1fr; overflow: auto; position: relative; background: #fff; border: 1px solid rgba(255,255,255,.7); border-radius: 32px; box-shadow: 0 40px 100px rgba(0, 15, 50, .45); animation: svip-rise .35s cubic-bezier(.2,.8,.2,1); }
.svip-login__close { position: absolute; left: 18px; top: 18px; z-index: 5; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(17,28,45,.07); color: #172033; cursor: pointer; font-size: 24px; line-height: 1; }
.svip-login__visual { min-height: 610px; padding: 40px; position: relative; overflow: hidden; color: #fff; background: radial-gradient(circle at 50% 20%, rgba(227,158,41,.28), transparent 28%), linear-gradient(150deg, #061331, #001e59 72%, #0b327b); display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; }
.svip-login__visual::after { content: ""; position: absolute; inset: 0; opacity: .18; background-image: radial-gradient(circle, rgba(255,255,255,.4) 1px, transparent 1px); background-size: 18px 18px; mask-image: linear-gradient(#000, transparent 70%); }
.svip-login__badge { position: relative; z-index: 2; font: 700 10px/1 Arial, sans-serif; letter-spacing: 2px; padding: 9px 13px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); }
.svip-login__mark { position: relative; z-index: 2; display: flex; align-items: baseline; gap: 9px; direction: ltr; }
.svip-login__mark b { font: 800 78px/1 Arial, sans-serif; letter-spacing: -5px; }
.svip-login__mark small { color: var(--svip-gold); font: 700 10px/1 Arial, sans-serif; letter-spacing: 4px; }
.svip-login__visual p { position: relative; z-index: 2; font-family: var(--svip-heading); font-size: 25px; line-height: 1.8; }
.svip-login__rings { position: absolute; width: 360px; height: 360px; border: 1px solid rgba(227,158,41,.3); border-radius: 50%; right: -180px; bottom: 80px; box-shadow: 0 0 0 70px rgba(227,158,41,.035), 0 0 0 140px rgba(227,158,41,.02); }
.svip-login__form-wrap { padding: clamp(38px, 6vw, 72px); display: flex; flex-direction: column; justify-content: center; }
.svip-login__brand { min-height: 50px; margin-bottom: 38px; display: flex; align-items: center; }
.svip-login__form-wrap h2 { color: var(--svip-navy); margin: 10px 0 9px; font-size: clamp(30px, 4vw, 44px); }
.svip-login__form-wrap > p { color: var(--svip-muted); font-size: 14px; }
.svip-login-form { display: grid; gap: 18px; margin-top: 30px; }
.svip-login-form label > span { display: block; margin-bottom: 8px; color: #344054; font-size: 12px; font-weight: 700; }
.svip-input { min-height: 56px; display: flex; align-items: center; gap: 11px; padding: 0 16px; border-radius: 15px; border: 1px solid #dbe4ef; background: #f8fafc; transition: border-color .2s, box-shadow .2s, background .2s; }
.svip-input:focus-within { background: #fff; border-color: var(--svip-gold); box-shadow: 0 0 0 4px rgba(227,158,41,.1); }
.svip-input svg { color: #98a2b3; flex: 0 0 auto; }
.svip-input input { width: 100%; border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; color: #172033; padding: 0 !important; font-family: inherit; font-size: 14px; }
.svip-input button { border: 0; background: transparent; color: #98a2b3; cursor: pointer; }
.svip-login__error { padding: 10px 13px; color: #b42318; background: #fef3f2; border: 1px solid #fee4e2; border-radius: 12px; font-size: 12px; }
.svip-login__register { display: flex; justify-content: center; gap: 6px; margin-top: 24px; font-size: 12px; color: var(--svip-muted); }
.svip-login__register a { color: var(--svip-navy); font-weight: 800; }
.svip-login__secure { display: block; margin-top: 22px; text-align: center; color: #98a2b3; font-size: 10px; }
@keyframes svip-fade { from { opacity: 0; } }
@keyframes svip-rise { from { opacity: 0; transform: translateY(25px) scale(.97); } }
body.svip-modal-open { overflow: hidden !important; }

.svip-directory { background: #fff; }
.svip-directory__hero { min-height: 270px; padding: clamp(28px, 5vw, 58px); display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; position: relative; overflow: hidden; border-radius: 25px; color: #fff; background: radial-gradient(circle at 80% 10%, rgba(227,158,41,.23), transparent 35%), linear-gradient(135deg, #061331, var(--svip-navy)); }
.svip-directory__hero::after { content: "VIP"; position: absolute; left: 4%; top: -32%; font: 900 260px/1 Arial, sans-serif; color: rgba(255,255,255,.028); letter-spacing: -24px; }
.svip-directory__hero > div { position: relative; z-index: 1; }
.svip-directory__hero h1 { max-width: 680px; margin: 10px 0 14px; font-size: clamp(34px, 5vw, 58px); line-height: 1.3; }
.svip-directory__hero h1 em { color: var(--svip-gold); font-style: normal; }
.svip-directory__hero p { max-width: 640px; color: rgba(255,255,255,.68); line-height: 1.9; }
.svip-directory__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.svip-icon-button { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); }

.svip-discovery { margin: -28px 34px 0; padding: 16px; position: relative; z-index: 3; display: grid; grid-template-columns: 1fr 245px; gap: 12px; border-radius: 20px; background: rgba(255,255,255,.92); box-shadow: 0 18px 50px rgba(0,30,89,.13); border: 1px solid rgba(255,255,255,.8); backdrop-filter: blur(16px); }
.svip-search { min-height: 58px; padding: 0 18px; display: flex; align-items: center; gap: 12px; border-radius: 14px; background: #f6f8fb; border: 1px solid transparent; }
.svip-search:focus-within { background: #fff; border-color: rgba(227,158,41,.6); }
.svip-search svg { color: var(--svip-navy); }
.svip-search input { flex: 1; width: 100%; border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; padding: 0 !important; font: 14px/1 var(--svip-font); color: var(--svip-ink); }
.svip-search kbd { direction: ltr; padding: 4px 7px; border-radius: 6px; color: #98a2b3; background: #fff; border: 1px solid #e4e7ec; font: 11px/1 Arial, sans-serif; }
.svip-filter-select { min-height: 58px; padding: 8px 15px; display: flex; flex-direction: column; justify-content: center; border-radius: 14px; background: var(--svip-navy); }
.svip-filter-select span { color: rgba(255,255,255,.55); font-size: 9px; }
.svip-filter-select select { width: 100%; border: 0 !important; outline: 0 !important; box-shadow: none !important; padding: 2px 0 0 !important; color: #fff; background: transparent !important; font: 12px/1.4 var(--svip-font); }
.svip-filter-select option { color: #172033; background: #fff; }

.svip-categories { margin: 42px 0 60px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 13px; }
.svip-category-card { min-height: 145px; padding: 17px; border: 1px solid var(--svip-line); border-radius: 16px; background: #fff; color: var(--svip-ink); cursor: pointer; text-align: right; display: flex; flex-direction: column; align-items: flex-start; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.svip-category-card:hover, .svip-category-card.is-active { transform: translateY(-4px); border-color: rgba(227,158,41,.55); box-shadow: 10px 14px 30px rgba(0,30,89,.1); }
.svip-category-card.is-active { background: linear-gradient(145deg, #fff, #fffaf2); }
.svip-category-card__icon { width: 43px; height: 43px; margin-bottom: auto; border-radius: 13px; display: grid; place-items: center; color: var(--svip-navy); background: var(--svip-sky); }
.svip-category-card.is-active .svip-category-card__icon { color: #fff; background: var(--svip-navy); }
.svip-category-card__icon svg { width: 23px; height: 23px; }
.svip-category-card__name { margin-top: 14px; font-weight: 800; font-size: 13px; line-height: 1.6; }
.svip-category-card small { margin-top: 3px; color: #98a2b3; font-size: 10px; }

.svip-members-section > header { margin-bottom: 22px; display: flex; justify-content: space-between; align-items: flex-end; }
.svip-members-section > header h2 { margin-top: 5px; color: var(--svip-navy); font-size: 30px; }
.svip-members-section > header p { color: #98a2b3; font-size: 12px; }
.svip-members-section > header strong { color: var(--svip-navy); font-size: 20px; }
.svip-members { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.svip-member-card { min-width: 0; overflow: hidden; border: 1px solid #dfe7f1; border-radius: 18px; background: #fff; box-shadow: 0 8px 24px rgba(0,30,89,.055); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.svip-member-card:hover { transform: translateY(-4px); border-color: rgba(0,30,89,.25); box-shadow: var(--svip-shadow); }
.svip-member-card[hidden] { display: none !important; }
.svip-member-card__top { min-height: 46px; padding: 10px 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #fff; background: linear-gradient(115deg, #001844, var(--svip-navy)); }
.svip-member-code { direction: ltr; font: 700 10px/1 Arial, sans-serif; letter-spacing: 1px; color: rgba(255,255,255,.68); }
.svip-member-category { display: inline-flex; align-items: center; width: fit-content; padding: 6px 10px; border-radius: 999px; color: var(--svip-gold); background: rgba(227,158,41,.12); border: 1px solid rgba(227,158,41,.25); font-size: 10px; font-weight: 800; }
.svip-member-card__body { min-height: 165px; padding: 22px; display: grid; grid-template-columns: 82px 1fr; gap: 18px; align-items: center; }
.svip-member-logo { width: 82px; height: 82px; border-radius: 18px; overflow: hidden; display: grid; place-items: center; color: var(--svip-navy); background: linear-gradient(145deg, #eff8ff, #e5edf7); border: 1px solid #dce7f2; }
.svip-member-logo img { width: 100%; height: 100%; object-fit: contain; padding: 9px; background: #fff; }
.svip-member-logo span { font-size: 30px; font-weight: 900; }
.svip-member-copy { min-width: 0; }
.svip-member-copy h3 { margin-bottom: 7px; color: var(--svip-navy); font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svip-member-copy p { min-height: 42px; color: #667085; font-size: 12px; line-height: 1.8; }
.svip-location { margin-top: 12px; display: inline-flex; align-items: center; gap: 5px; color: #344054; font-size: 11px; font-weight: 700; }
.svip-location svg { width: 15px; height: 15px; color: var(--svip-gold); }
.svip-member-card__footer { min-height: 64px; padding: 11px 16px; display: grid; grid-template-columns: minmax(100px, auto) 1fr 42px; gap: 9px; align-items: center; border-top: 1px solid #edf1f6; background: #fbfcfe; }
.svip-phone { direction: ltr; display: inline-flex; align-items: center; gap: 6px; color: #344054; font: 600 11px/1 Arial, sans-serif; }
.svip-phone svg { width: 16px; height: 16px; color: var(--svip-navy); }
.svip-card-link { justify-self: end; display: inline-flex; align-items: center; gap: 4px; color: var(--svip-navy); font-size: 11px; font-weight: 800; }
.svip-card-link .svip-arrow { width: 15px; height: 15px; }
.svip-qr { display: grid; place-items: center; padding: 8px; border-radius: 14px; background: #fff; border: 1px solid #dfe7f1; }
.svip-qr img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.svip-qr--small { width: 42px; height: 42px; padding: 4px; border-radius: 8px; }
.svip-empty { min-height: 260px; display: grid; place-content: center; text-align: center; color: #98a2b3; }
.svip-empty[hidden] { display: none !important; }
.svip-empty div { font-size: 42px; }
.svip-empty h3 { margin: 7px 0; color: #344054; }

.svip-profile-view { background: #fff; }
.svip-back { margin: 5px 8px 18px; width: fit-content; display: inline-flex; align-items: center; gap: 5px; color: #667085; font-size: 12px; }
.svip-back .svip-arrow { width: 16px; }
.svip-profile-hero { min-height: 330px; padding: clamp(28px, 5vw, 58px); position: relative; overflow: hidden; display: grid; grid-template-columns: 150px 1fr 130px; gap: 30px; align-items: center; color: #fff; border-radius: 28px; background: radial-gradient(circle at 80% 20%, rgba(227,158,41,.24), transparent 33%), linear-gradient(135deg, #061331, var(--svip-navy)); }
.svip-profile-hero::after { content: ""; position: absolute; left: -70px; bottom: -140px; width: 340px; height: 340px; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; box-shadow: 0 0 0 70px rgba(255,255,255,.025); }
.svip-profile-logo { width: 150px; height: 150px; position: relative; z-index: 1; overflow: hidden; display: grid; place-items: center; border-radius: 28px; color: var(--svip-navy); background: #fff; box-shadow: 0 25px 45px rgba(0,0,0,.25); }
.svip-profile-logo img { width: 100%; height: 100%; object-fit: contain; padding: 16px; }
.svip-profile-logo span { font-size: 55px; font-weight: 900; }
.svip-profile-heading { position: relative; z-index: 1; }
.svip-profile-heading h1 { margin: 13px 0 10px; font-size: clamp(36px, 5vw, 60px); }
.svip-profile-heading > p { max-width: 700px; color: rgba(255,255,255,.72); font-size: 15px; line-height: 2; }
.svip-profile-heading__actions { margin-top: 25px; display: flex; flex-wrap: wrap; gap: 10px; }
.svip-qr-panel { position: relative; z-index: 1; padding: 12px; border-radius: 18px; color: rgba(255,255,255,.65); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(12px); text-align: center; }
.svip-qr-panel .svip-qr { width: 100px; margin: auto; }
.svip-qr-panel span { display: block; margin-top: 8px; font-size: 10px; }
.svip-profile-layout { margin-top: 24px; display: grid; grid-template-columns: 1fr 330px; gap: 22px; align-items: start; }
.svip-profile-layout main { display: grid; gap: 22px; }
.svip-profile-layout aside { position: sticky; top: 22px; display: grid; gap: 14px; }
.svip-content-card { padding: clamp(24px, 4vw, 38px); border-radius: 22px; background: #fff; border: 1px solid var(--svip-line); box-shadow: 0 10px 30px rgba(0,30,89,.05); }
.svip-content-card h2 { margin: 7px 0 24px; color: var(--svip-navy); font-size: 25px; }
.svip-details-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--svip-line); border-radius: 16px; background: var(--svip-line); }
.svip-details-grid div { min-height: 88px; padding: 18px; display: flex; flex-direction: column; justify-content: center; gap: 7px; background: #fff; }
.svip-details-grid span { color: #98a2b3; font-size: 10px; }
.svip-details-grid strong { color: #344054; font-size: 13px; line-height: 1.8; }
.svip-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.svip-gallery a { overflow: hidden; border-radius: 16px; aspect-ratio: 16/10; background: #f1f4f8; }
.svip-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.svip-gallery a:hover img { transform: scale(1.04); }
.svip-contact-card p { margin: -10px 0 22px; color: #667085; font-size: 11px; line-height: 1.9; }
.svip-socials { display: grid; gap: 8px; }
.svip-socials a { min-height: 50px; padding: 8px 10px; display: grid; grid-template-columns: 34px 1fr 18px; align-items: center; gap: 9px; color: #344054; border-radius: 12px; background: #f7f9fc; border: 1px solid #edf1f6; }
.svip-socials a:hover { color: var(--svip-navy); border-color: #d9e8f8; background: var(--svip-sky); }
.svip-socials a > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: var(--svip-navy); font: 800 12px/1 Arial, sans-serif; }
.svip-socials strong { font-size: 11px; }
.svip-socials .svip-arrow { width: 15px; }

.svip-page--form { max-width: 980px; }
.svip-form-hero { margin-bottom: 22px; padding: clamp(32px, 5vw, 58px); overflow: hidden; position: relative; border-radius: 25px; color: #fff; background: radial-gradient(circle at 78% 10%, rgba(227,158,41,.25), transparent 33%), linear-gradient(135deg, #061331, var(--svip-navy)); }
.svip-form-hero::after { content: "VIP"; position: absolute; left: -15px; bottom: -52px; color: rgba(255,255,255,.035); font: 900 180px/1 Arial, sans-serif; letter-spacing: -14px; }
.svip-form-hero h1 { margin: 10px 0; font-size: clamp(34px, 5vw, 54px); }
.svip-form-hero h1 em { color: var(--svip-gold); font-style: normal; }
.svip-form-hero p { max-width: 650px; color: rgba(255,255,255,.7); line-height: 1.9; }
.svip-form-hero--compact { min-height: 220px; }
.svip-stepper { margin-top: 30px; display: flex; align-items: center; gap: 9px; }
.svip-stepper span { padding: 8px 12px; border-radius: 999px; color: rgba(255,255,255,.5); background: rgba(255,255,255,.07); font-size: 10px; border: 1px solid rgba(255,255,255,.1); }
.svip-stepper span.is-active { color: #172033; background: var(--svip-gold); border-color: transparent; }
.svip-profile-form { display: grid; gap: 18px; }
.svip-form-card { padding: clamp(22px, 4vw, 36px); border-radius: 22px; background: #fff; border: 1px solid var(--svip-line); box-shadow: 0 10px 34px rgba(0,30,89,.055); }
.svip-form-card > header { margin-bottom: 26px; display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: center; }
.svip-form-card > header > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: var(--svip-navy); background: var(--svip-sky); font-weight: 900; }
.svip-form-card > header h2 { color: var(--svip-navy); font-size: 21px; }
.svip-form-card > header p { margin-top: 4px; color: #98a2b3; font-size: 11px; line-height: 1.7; }
.svip-form-card--invite { display: grid; grid-template-columns: 1fr 260px; align-items: center; gap: 20px; border-color: rgba(227,158,41,.35); background: linear-gradient(145deg, #fff, #fffaf1); }
.svip-form-card--invite > header { margin: 0; }
.svip-code-field { min-height: 88px; padding: 13px 18px; border-radius: 16px; background: var(--svip-navy); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.svip-code-field input { width: 100%; border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; color: #fff; padding: 0 !important; text-align: center; font: 800 28px/1 Arial, sans-serif; letter-spacing: 12px; }
.svip-code-field span { margin-top: 6px; color: rgba(255,255,255,.45); font: 700 8px/1 Arial, sans-serif; letter-spacing: 3px; }
.svip-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.svip-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.svip-field--full { grid-column: 1 / -1; }
.svip-field > span { color: #344054; font-size: 11px; font-weight: 800; }
.svip-field > span b { color: #d92d20; }
.svip-field input, .svip-field select, .svip-field textarea { width: 100%; margin: 0; border: 1px solid #dce5ef !important; border-radius: 13px !important; background: #f8fafc !important; box-shadow: none !important; color: #172033 !important; padding: 13px 14px !important; font: 13px/1.7 var(--svip-font) !important; transition: border-color .2s, box-shadow .2s, background .2s; }
.svip-field input, .svip-field select { min-height: 50px; }
.svip-field textarea { resize: vertical; }
.svip-field input:focus, .svip-field select:focus, .svip-field textarea:focus { background: #fff !important; border-color: var(--svip-gold) !important; box-shadow: 0 0 0 4px rgba(227,158,41,.09) !important; }
.svip-field > small { color: #98a2b3; font-size: 9px; }
.svip-upload-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; }
.svip-upload { min-height: 190px; padding: 24px; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 1.5px dashed #c9d6e5; border-radius: 18px; background: #f9fbfd; cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.svip-upload:hover { transform: translateY(-2px); border-color: var(--svip-gold); background: #fffaf2; }
.svip-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.svip-upload__icon { width: 48px; height: 48px; margin-bottom: 12px; display: grid; place-items: center; border-radius: 15px; color: var(--svip-navy); background: var(--svip-sky); font-size: 25px; }
.svip-upload strong { color: #344054; font-size: 13px; }
.svip-upload small { margin-top: 5px; color: #98a2b3; font-size: 9px; }
.svip-upload img { position: absolute; right: 12px; top: 12px; width: 48px; height: 48px; object-fit: contain; border-radius: 10px; background: #fff; border: 1px solid #e4e7ec; }
.svip-gallery-count { margin-top: 11px; padding: 5px 9px; border-radius: 999px; color: var(--svip-navy); background: #edf3ff; font-size: 9px; }
.svip-check { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; color: #667085; font-size: 11px; }
.svip-check input { accent-color: var(--svip-navy); }
.svip-form-submit { padding: 22px 26px; display: flex; justify-content: space-between; align-items: center; gap: 20px; border-radius: 20px; color: #fff; background: var(--svip-navy); box-shadow: 0 18px 42px rgba(0,30,89,.18); }
.svip-form-submit strong, .svip-form-submit small { display: block; }
.svip-form-submit small { margin-top: 5px; color: rgba(255,255,255,.55); font-size: 10px; }
.svip-notice { margin: 0 0 18px; padding: 14px 17px; border-radius: 13px; font-size: 12px; font-weight: 700; }
.svip-notice--success { color: #027a48; background: #ecfdf3; border: 1px solid #abefc6; }
.svip-notice--error { color: #b42318; background: #fef3f2; border: 1px solid #fecdca; }
.svip-state { min-height: 420px; padding: 50px 20px; display: grid; place-content: center; justify-items: center; text-align: center; border-radius: 25px; background: #f8fafc; border: 1px solid var(--svip-line); }
.svip-state__icon { width: 66px; height: 66px; margin-bottom: 18px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--svip-navy); font-size: 28px; }
.svip-state h2 { color: var(--svip-navy); }
.svip-state p { margin: 8px 0 22px; color: #667085; }
.svip-state--success .svip-state__icon { background: #12b76a; }

@media (max-width: 1024px) {
    .svip-categories { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .svip-profile-layout { grid-template-columns: 1fr 290px; }
    .svip-gate { grid-template-columns: 1fr; }
    .svip-gate__visual { position: absolute; left: -80px; bottom: -100px; opacity: .35; }
    .svip-gate__content { max-width: 690px; }
}

@media (max-width: 780px) {
    .svip-page { width: min(100% - 20px, 1240px); margin-top: 10px; }
    .svip-brand-bar { min-height: 62px; margin-bottom: 14px; padding: 9px 12px; }
    .svip-brand-bar nav a { display: none; }
    .svip-brand-bar nav span { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .svip-gate { min-height: 590px; width: calc(100% - 20px); padding: 34px 24px; border-radius: 24px; align-items: center; }
    .svip-gate h1 { font-size: clamp(39px, 12vw, 58px); }
    .svip-gate__visual { display: none; }
    .svip-gate__proof { grid-template-columns: auto auto 1px auto auto; gap: 8px; }
    .svip-login { grid-template-columns: 1fr; max-height: calc(100vh - 24px); border-radius: 24px; }
    .svip-login__visual { min-height: 170px; padding: 25px; display: grid; grid-template-columns: 1fr auto; align-items: center; }
    .svip-login__close { color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.18); }
    .svip-login__mark b { font-size: 54px; }
    .svip-login__visual p, .svip-login__rings { display: none; }
    .svip-login__form-wrap { padding: 30px 24px; }
    .svip-login__brand { margin-bottom: 22px; }
    .svip-directory__hero { min-height: 350px; padding: 30px 24px 80px; align-items: flex-start; flex-direction: column; }
    .svip-directory__hero h1 { font-size: 38px; }
    .svip-directory__actions { width: 100%; }
    .svip-discovery { margin: -50px 14px 0; grid-template-columns: 1fr; }
    .svip-search kbd { display: none; }
    .svip-categories { margin-top: 30px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .svip-category-card { min-height: 130px; padding: 14px; }
    .svip-members { grid-template-columns: 1fr; }
    .svip-member-card__footer { grid-template-columns: 1fr auto 42px; }
    .svip-profile-hero { grid-template-columns: 95px 1fr; min-height: 390px; align-items: start; }
    .svip-profile-logo { width: 95px; height: 95px; border-radius: 20px; }
    .svip-profile-heading h1 { font-size: 34px; }
    .svip-qr-panel { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; width: fit-content; }
    .svip-qr-panel .svip-qr { width: 70px; }
    .svip-profile-layout { grid-template-columns: 1fr; }
    .svip-profile-layout aside { position: static; }
    .svip-form-card--invite { grid-template-columns: 1fr; }
    .svip-form-grid { grid-template-columns: 1fr; }
    .svip-field--full { grid-column: auto; }
    .svip-upload-grid { grid-template-columns: 1fr; }
    .svip-form-submit { align-items: stretch; flex-direction: column; }
}

@media (max-width: 480px) {
    .svip-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .svip-category-card__name { font-size: 11px; }
    .svip-member-card__body { grid-template-columns: 66px 1fr; padding: 17px; gap: 13px; }
    .svip-member-logo { width: 66px; height: 66px; border-radius: 14px; }
    .svip-member-copy h3 { font-size: 16px; }
    .svip-phone { display: none; }
    .svip-member-card__footer { grid-template-columns: 1fr 42px; }
    .svip-details-grid { grid-template-columns: 1fr; }
    .svip-gallery { grid-template-columns: 1fr; }
    .svip-profile-hero { padding: 25px 20px; grid-template-columns: 75px 1fr; gap: 16px; }
    .svip-profile-logo { width: 75px; height: 75px; }
    .svip-profile-heading h1 { font-size: 28px; }
    .svip-profile-heading__actions { grid-column: 1 / -1; }
    .svip-stepper span { padding: 7px 8px; font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .svip-page *, .svip-gate *, .svip-modal * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}