.expert-page, .expert-related, .expert-detail-cta { --ex-ink: #10182d; --ex-text: #405071; --ex-muted: #74809b; --ex-line: #e7e8f3; --ex-violet: #5e13ef; --ex-pink: #ed3f8d; --ex-gradient: linear-gradient(110deg, #5512ef, #8524ed 52%, #ed3f8d); color: var(--ex-ink); }
.expert-page *, .expert-related *, .expert-detail-cta * { box-sizing: border-box; }
.expert-page__hero { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(320px, .78fr); gap: clamp(40px, 7vw, 100px); align-items: center; overflow: hidden; padding: clamp(48px, 7vw, 92px); background: radial-gradient(circle at 86% 20%, rgba(237,63,141,.14), transparent 27%), radial-gradient(circle at 68% 90%, rgba(94,19,239,.13), transparent 31%), linear-gradient(135deg, #fff, #faf8ff); border: 1px solid var(--ex-line); border-radius: 28px; box-shadow: 0 28px 80px rgba(36,27,81,.07); }
.expert-page__eyebrow, .expert-page__heading span, .expert-related__heading > span { margin-bottom: 20px; color: #58688e; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.expert-page__hero h1 { max-width: 800px; margin: 0; font-size: clamp(48px, 6vw, 78px); line-height: 1.02; letter-spacing: -.05em; }
.expert-page__hero h1 span { color: transparent; background: var(--ex-gradient); -webkit-background-clip: text; background-clip: text; }
.expert-page__hero-copy > p { max-width: 720px; margin: 25px 0 0; color: var(--ex-text); font-size: clamp(17px, 1.6vw, 21px); line-height: 1.65; }
.expert-page__topics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.expert-page__topics span { padding: 9px 13px; color: #5d4d83; font-size: 13px; font-weight: 600; background: rgba(94,19,239,.06); border: 1px solid rgba(94,19,239,.1); border-radius: 999px; }
.expert-page__hero-aside { display: grid; gap: 24px; padding: 32px; background: rgba(255,255,255,.76); border: 1px solid rgba(94,19,239,.12); border-radius: 20px; box-shadow: 0 22px 55px rgba(45,29,96,.08); backdrop-filter: blur(10px); }
.expert-page__hero-icon { display: flex; width: 76px; height: 76px; align-items: center; justify-content: center; color: var(--ex-violet); background: linear-gradient(145deg, #fff, #f1e9ff); border: 1px solid rgba(94,19,239,.12); border-radius: 18px; box-shadow: 0 14px 30px rgba(94,19,239,.1); }
.expert-page__hero-icon svg { width: 40px; height: 40px; }
.expert-page__hero-aside strong { display: block; margin-bottom: 10px; font-size: 21px; }
.expert-page__hero-aside p { margin: 0; color: var(--ex-text); line-height: 1.65; }
.expert-page__catalog { margin-top: clamp(78px, 9vw, 128px); }
.expert-page__heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 42px; }
.expert-page__heading span { display: block; margin-bottom: 15px; }
.expert-page__heading h2, .expert-related__heading h2 { margin: 0; font-size: clamp(36px, 4.2vw, 56px); line-height: 1.07; letter-spacing: -.04em; }
.expert-page__heading > p { max-width: 520px; margin: 0; color: var(--ex-text); font-size: 16px; line-height: 1.65; }
.expert-page__telegram { display: grid; grid-template-columns: 66px 1fr auto; gap: 22px; align-items: center; margin-top: 70px; padding: 26px 30px; background: linear-gradient(120deg, #fbf9ff, #fff); border: 1px solid var(--ex-line); border-radius: 20px; }
.expert-page__telegram-icon { display: flex; width: 66px; height: 66px; align-items: center; justify-content: center; color: #fff; font-weight: 800; background: linear-gradient(135deg, #25a9e9, #6615e9); border-radius: 50%; }
.expert-page__telegram strong { display: block; margin-bottom: 5px; font-size: 19px; }
.expert-page__telegram p { margin: 0; color: var(--ex-text); }
.expert-page__telegram a { display: inline-flex; gap: 18px; align-items: center; padding: 14px 20px; color: var(--ex-violet); font-weight: 700; text-decoration: none; border: 1px solid rgba(94,19,239,.22); border-radius: 11px; }
.expert-page__cta, .expert-detail-cta { display: flex; align-items: center; justify-content: space-between; gap: 44px; margin-top: clamp(78px, 9vw, 128px); padding: clamp(40px, 6vw, 72px); color: #fff; background: radial-gradient(circle at 75% 10%, rgba(255,255,255,.16), transparent 25%), var(--ex-gradient); border-radius: 26px; box-shadow: 0 28px 70px rgba(94,19,239,.2); }
.expert-page__cta > div, .expert-detail-cta > div { max-width: 780px; }
.expert-page__cta span, .expert-detail-cta span { font-size: 14px; font-weight: 700; opacity: .75; }
.expert-page__cta h2, .expert-detail-cta h2 { margin: 10px 0 12px; font-size: clamp(30px, 4vw, 47px); line-height: 1.12; letter-spacing: -.035em; }
.expert-page__cta p, .expert-detail-cta p { margin: 0; font-size: 17px; opacity: .78; }
.expert-page__cta button, .expert-detail-cta button { display: inline-flex; flex: 0 0 auto; min-height: 52px; align-items: center; gap: 18px; padding: 13px 23px; color: var(--ex-violet); font-weight: 700; cursor: pointer; background: #fff; border: 0; border-radius: 12px; transition: transform .25s ease; }
.expert-page__cta button:hover, .expert-detail-cta button:hover { transform: translateY(-2px); }
.expert-related { margin-top: clamp(78px, 9vw, 128px); }
.expert-related__heading { position: relative; margin-bottom: 38px; padding-right: 130px; }
.expert-related__heading > span { display: block; margin-bottom: 14px; }
.expert-related__heading > a { position: absolute; right: 0; bottom: 8px; color: var(--ex-violet); font-weight: 700; text-decoration: none; }

@media (max-width: 991.98px) { .expert-page__hero { grid-template-columns: 1fr 300px; padding: 50px 36px; } .expert-page__heading { align-items: flex-start; flex-direction: column; gap: 18px; } .expert-page__cta, .expert-detail-cta { align-items: flex-start; flex-direction: column; } }
@media (max-width: 767.98px) { .expert-page__hero { grid-template-columns: 1fr; padding: 34px 22px; border-radius: 20px; } .expert-page__hero-aside { padding: 24px; } .expert-page__telegram { grid-template-columns: 54px 1fr; padding: 22px; } .expert-page__telegram-icon { width: 54px; height: 54px; } .expert-page__telegram a { grid-column: 1 / -1; justify-content: space-between; } .expert-page__cta, .expert-detail-cta { padding: 34px 22px; border-radius: 20px; } .expert-page__cta button, .expert-detail-cta button { width: 100%; justify-content: center; } .expert-related__heading { padding-right: 0; } .expert-related__heading > a { position: static; display: inline-block; margin-top: 18px; } }