/* ============================================================
   Страница «Подбор портфеля» — дизайн 1:1 из site2 (glass-версия),
   вместо синего фона calc-hero/res-head — светлое стекло поверх
   анимированного светового поля (как на главной). Всё изолировано
   под .rk-portfolio. Токены — из дизайн-системы (со светлыми
   переопределениями glass-overlay), стили опроса/результата сняты
   с живой страницы process1.
   ============================================================ */
.rk-portfolio {
  --color-primary: #000f9f; --color-primary-hover: #000d80; --color-primary-deep: #000b73; --color-primary-bright: #2338c8; --color-on-primary: #ffffff;
  --color-surface-900: #05071b; --color-surface-800: #0a1140; --color-surface-700: #141d6e; --color-surface-grad-1: #070a2b; --color-surface-grad-2: #0d1893;
  --color-white: #ffffff; --color-surface: #ffffff; --color-surface-subtle: #eef1f7; --color-surface-muted: #e2e7f2;
  --color-text-strong: #14161d; --color-text: #474b58; --color-text-muted: #83879a; --color-text-on-dark: #eef0ff; --color-text-on-dark-muted: #b3bce6;
  --color-border: #dfe3ec; --color-border-subtle: #eaedf4; --color-border-on-dark: rgba(255, 255, 255, .13); --color-border-on-dark-strong: rgba(255, 255, 255, .24);
  --color-up: #2f6d25; --color-up-soft: #5cc169; --color-down: #a83232;
  --font-family: 'Montserrat', sans-serif;
  --layout-max: 1200px; --layout-gutter: 32px; --density: 1;
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-pill: 999px;
  --shadow-sm: 0 2px 10px rgba(20, 28, 60, .06); --shadow-lg: 0 26px 64px rgba(9, 13, 48, .20);
  --glass-bg: rgba(255, 255, 255, .55); --glass-border: rgba(255, 255, 255, .78); --glass-blur: 18px;
  --glass-dark-bg: rgba(255, 255, 255, .09); --glass-dark-border: rgba(255, 255, 255, .22); --glass-dark-hi: rgba(255, 255, 255, .35); --glass-dark-solid: rgba(16, 22, 54, .90);
  --blue: var(--color-primary); --blue-bright: var(--color-primary-bright);
  --accent: var(--color-primary); --accent-deep: var(--color-primary-deep); --accent-soft: #9fb1ff; --on-accent: var(--color-on-primary);
  --navy-grad-1: var(--color-surface-grad-1); --navy-grad-2: var(--color-surface-grad-2);
  --card: var(--color-surface); --paper: var(--color-surface-subtle); --paper-2: var(--color-surface-muted);
  --ink: var(--color-text-strong); --ink-soft: var(--color-text); --ink-mute: var(--color-text-muted);
  --line: var(--color-border); --line-2: var(--color-border-subtle);
  --d-ink: var(--color-text-on-dark); --d-soft: var(--color-text-on-dark-muted); --d-line: var(--color-border-on-dark); --d-line-strong: var(--color-border-on-dark-strong);
  --green: var(--color-up); --green-soft: var(--color-up-soft); --red: var(--color-down);
  --font-head: var(--font-family); --font-body: var(--font-family); --font-display: var(--font-family);
  --radius: var(--radius-md); --maxw: var(--layout-max); --gutter: var(--layout-gutter); --d: var(--density);
  --glassd-bg: var(--glass-dark-bg); --glassd-brd: var(--glass-dark-border); --glassd-hi: var(--glass-dark-hi); --glassd-solid: var(--glass-dark-solid);
}
/* Светлые переопределения glass-overlay */
.rk-portfolio {
  --color-surface-grad-1: rgba(255,255,255,.52); --color-surface-grad-2: rgba(255,255,255,.40);
  --color-text-on-dark: #14161d; --color-text-on-dark-muted: #3f4551;
  --shadow-sm: 0 2px 10px rgba(9,13,48,.06); --shadow-lg: 0 26px 64px rgba(9,13,48,.18);
  --gl-bg2: rgba(255,255,255,.08); --gl-sh2: 0 10px 30px rgba(9,13,48,.09), inset 0 1px 0 rgba(255,255,255,.75);
  --accent-soft: #2338c8;
}

.rk-portfolio *, .rk-portfolio *::before, .rk-portfolio *::after{box-sizing: border-box;}
.rk-portfolio h1, .rk-portfolio h2, .rk-portfolio h3{font-family: var(--font-head); font-weight: 700; color: var(--ink); margin: 0px; line-height: 1.12; letter-spacing: -0.015em;}
.rk-portfolio button{font-family: inherit; cursor: pointer; border: none; background: none;}
.rk-portfolio .eyebrow{font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-deep); display: inline-flex; align-items: center; gap: 11px;}
.rk-portfolio .eyebrow::before{content: ""; width: 30px; height: 1.5px; background: var(--accent); display: inline-block;}
.rk-portfolio .eyebrow.on-dark{color: var(--accent-soft);}
.rk-portfolio .eyebrow.on-dark::before{background: var(--accent-soft);}
/* Ширина страницы как на остальных: main = 1200 и без своих боковых полей —
   их на узких задаёт .wrap. Иначе main брал 90% из main.css, и к его полям
   прибавлялись 20px обёртки: опросник стоял на 40px от края, а шапка страницы
   (она полноширинная) — на 20px, из-за чего блок казался уже остальных. */
main { width: 100%; max-width: 1200px; padding-inline: 0; }
.rk-portfolio .wrap{max-width: var(--maxw); margin: 0px auto; padding-inline: 0;}
@media (max-width: 1240px) { .rk-portfolio .wrap{ padding-inline: 20px; } }
.rk-portfolio .section{padding-block: calc(80px * var(--d));}
.rk-portfolio .reveal{opacity: 0; transform: translateY(22px); transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);}
.rk-portfolio .reveal.in{opacity: 1; transform: none;}
.rk-portfolio .reveal.d1{transition-delay: 0.07s;}
.rk-portfolio .reveal.d2{transition-delay: 0.14s;}
.rk-portfolio .reveal.d3{transition-delay: 0.21s;}
@media (prefers-reduced-motion: reduce) { .rk-portfolio .reveal{opacity: 1 !important; transform: none !important;} }
.rk-portfolio .btn{display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-body); font-weight: 600; font-size: 15px; padding: 13px 24px; border-radius: 999px; transition: 0.22s; white-space: nowrap; line-height: 1; text-decoration: none; cursor: pointer;}
.rk-portfolio .btn-primary{background: var(--accent); color: var(--on-accent); position: relative; overflow: hidden;}
.rk-portfolio .btn-primary:hover{background: var(--color-primary-deep); transform: translateY(-1px); box-shadow: rgba(0, 15, 159, 0.28) 0px 6px 18px;}
.rk-portfolio .btn-ghost{background: transparent; color: var(--ink); border: 1.5px solid var(--line);}
.rk-portfolio .btn-ghost:hover{border-color: var(--ink);}
.rk-portfolio .btn-blue{background: var(--accent); color: var(--on-accent);}
.rk-portfolio .btn-blue:hover{background: var(--color-primary-deep);}
.rk-portfolio .btn-lg{padding: 16px 30px; font-size: 16px;}
.rk-portfolio .pos{color: var(--green); font-weight: 700;}

.rk-portfolio .calc-hero{position: relative; overflow: hidden; color: var(--ink); background: var(--gl-bg2); backdrop-filter: none; border: none; box-shadow: none; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);}
.rk-portfolio .calc-hero h1{font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 3.8vw, 50px); line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); margin: 20px 0px 0px; max-width: 16ch;}
.rk-portfolio .calc-hero p{color: var(--ink-soft); margin: 18px 0px 0px; max-width: 46ch; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6;}
.rk-portfolio .calc-hero .ch-ticks{margin-top: 26px; display: flex; flex-direction: column; gap: 12px;}
.rk-portfolio .calc-hero .ch-ticks div{display: flex; gap: 11px; align-items: center; color: var(--ink-soft); font-size: 14.5px;}
.rk-portfolio .calc-hero .ch-ticks svg{color: var(--blue); flex: 0 0 auto;}
.rk-portfolio .calc-hero-inner{position: relative; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center;}
.rk-portfolio .calc-hero-card{position: relative; overflow: hidden; background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.85); border-radius: var(--radius-lg); padding: 26px; backdrop-filter: blur(18px) saturate(1.7); box-shadow: var(--shadow-lg);}
.rk-portfolio .calc-hero-card .chc-row{display: flex; align-items: center; gap: 14px; padding: 13px 0px; border-bottom: 1px solid var(--line-2);}
.rk-portfolio .calc-hero-card .chc-row:last-child{border-bottom: none;}
.rk-portfolio .calc-hero-card .chc-n{width: 30px; height: 30px; border-radius: 50%; background: rgba(0,15,159,.08); color: var(--blue); font-family: var(--font-head); font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto;}
.rk-portfolio .calc-hero-card .chc-t{color: var(--ink); font-size: 14px;}

.rk-portfolio .quiz{max-width: 760px; margin: 0px auto;}
.rk-portfolio .quiz-progress{display: flex; align-items: center; gap: 14px; margin-bottom: 30px;}
.rk-portfolio .quiz-bar{flex: 1 1 0%; height: 6px; background: var(--paper-2); border-radius: 999px; overflow: hidden;}
.rk-portfolio .quiz-bar i{display: block; height: 100%; background: var(--blue); border-radius: 999px; transition: width 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);}
.rk-portfolio .quiz-step-n{font-size: 13px; font-weight: 600; color: var(--ink-mute); white-space: nowrap; font-variant-numeric: tabular-nums;}
.rk-portfolio .quiz-card{background: rgb(255, 255, 255); border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: 38px; box-shadow: var(--shadow-sm); animation: qIn 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);}
@keyframes qIn { 0% { opacity: 0; transform: translateX(14px); } 100% { opacity: 1; transform: none; } }
.rk-portfolio .quiz-q{font-family: var(--font-head); font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; letter-spacing: -0.02em; margin: 0px 0px 6px;}
.rk-portfolio .quiz-hint{font-size: 14px; color: var(--ink-soft); margin: 0px 0px 26px;}
.rk-portfolio .quiz-opts{display: flex; flex-direction: column; gap: 12px;}
.rk-portfolio .quiz-opt{display: flex; align-items: center; gap: 15px; padding: 18px 20px; border: 1.5px solid var(--line); border-radius: var(--radius); cursor: pointer; transition: 0.16s; text-align: left; background: rgb(255, 255, 255); width: 100%;}
.rk-portfolio .quiz-opt:hover{border-color: var(--blue); background: var(--paper);}
.rk-portfolio .quiz-opt.sel{border-color: var(--blue);}
.rk-portfolio .quiz-opt .qo-radio{width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; transition: 0.16s;}
.rk-portfolio .quiz-opt.sel .qo-radio{border-color: var(--blue); background: var(--blue); box-shadow: inset 0 0 0 3px #fff;}
.rk-portfolio .quiz-opt .qo-tx b{display: block; font-family: var(--font-head); font-weight: 600; font-size: 15.5px; color: var(--ink);}
.rk-portfolio .quiz-opt .qo-tx span{font-size: 13px; color: var(--ink-mute);}
.rk-portfolio .quiz-nav{display: flex; justify-content: space-between; align-items: center; margin-top: 28px;}
.rk-portfolio .quiz-back{font-size: 14px; font-weight: 600; color: var(--ink-mute); display: inline-flex; align-items: center; gap: 7px; transition: 0.15s; background: none; border: none; cursor: pointer;}
.rk-portfolio .quiz-back:hover{color: var(--ink);}
.rk-portfolio .quiz-back:disabled{opacity: 0; pointer-events: none;}
.rk-portfolio .quiz-slider .qs-val{font-family: var(--font-head); font-weight: 800; font-size: 34px; color: var(--blue); letter-spacing: -0.02em; text-align: center; margin-bottom: 8px;}
/* Кастомный ползунок без нативной обводки/границы: серая дорожка, синий бегунок,
   синяя заливка слева задаётся градиентом фона (обновляется в portfolio.js). */
.rk-portfolio .quiz-slider input[type=range]{width: 100%; margin: 10px 0; height: 8px; border-radius: 999px; -webkit-appearance: none; appearance: none; outline: none; border: none; background: var(--paper-2, #eaedf4); cursor: pointer;}
.rk-portfolio .quiz-slider input[type=range]:focus{outline: none;}
.rk-portfolio .quiz-slider input[type=range]::-moz-range-track{height: 8px; border: none; border-radius: 999px; background: transparent;}
.rk-portfolio .quiz-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance: none; appearance: none; width: 20px; height: 20px; border: 2px solid #fff; border-radius: 50%; background: var(--blue); box-shadow: 0 2px 4px rgba(0,0,0,0.2); cursor: pointer;}
.rk-portfolio .quiz-slider input[type=range]::-moz-range-thumb{width: 20px; height: 20px; border: 2px solid #fff; border-radius: 50%; background: var(--blue); box-shadow: 0 2px 4px rgba(0,0,0,0.2); cursor: pointer;}
.rk-portfolio .quiz-slider .qs-scale{display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-mute); margin-top: 2px;}
.rk-portfolio .quiz-chips{display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px;}
.rk-portfolio .quiz-chips button{padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 13px; font-weight: 600; color: var(--ink-soft); cursor: pointer; transition: .16s;}
.rk-portfolio .quiz-chips button:hover{border-color: var(--blue); color: var(--blue);}
.rk-portfolio .quiz-chips button.on{background: var(--blue); color: #fff; border-color: var(--blue);}

.rk-portfolio .res-head{display: grid; grid-template-columns: 240px 1fr; gap: 40px; align-items: center; background: linear-gradient(160deg, var(--navy-grad-1), var(--navy-grad-2)); border: 1px solid rgba(255,255,255,.7); border-radius: var(--radius-lg); padding: 38px; color: var(--ink); position: relative; overflow: hidden; box-shadow: var(--gl-sh2); backdrop-filter: blur(18px) saturate(1.5);}
.rk-portfolio .res-donut{display: flex; align-items: center; justify-content: center;}
.rk-portfolio .res-profile .rp-tag{display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); margin-bottom: 8px;}
.rk-portfolio .res-profile h2{font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; color: var(--ink); font-size: clamp(26px, 3vw, 34px); margin: 0px 0px 12px;}
.rk-portfolio .res-profile p{color: var(--ink-soft); margin: 0px 0px 18px; font-size: 14.5px; line-height: 1.6; max-width: 52ch;}
.rk-portfolio .res-metrics{display: flex; gap: 30px; flex-wrap: wrap;}
.rk-portfolio .res-metrics div .rm-v{font-family: var(--font-head); font-weight: 800; font-size: 24px; color: var(--blue); letter-spacing: -0.02em;}
.rk-portfolio .res-metrics div .rm-v .pos{color: var(--green);}
.rk-portfolio .res-metrics div .rm-l{font-size: 12.5px; color: var(--ink-soft); margin-top: 3px;}
.rk-portfolio .res-funds{margin-top: 30px;}
.rk-portfolio .res-fund{display: grid; grid-template-columns: 14px 1.4fr repeat(3, 0.8fr) auto; gap: 18px; align-items: center; padding: 18px 22px; background: rgb(255, 255, 255); border: 1px solid var(--line-2); border-radius: var(--radius); margin-bottom: 12px; transition: 0.16s; cursor: pointer; text-decoration: none;}
.rk-portfolio .res-fund:hover{box-shadow: var(--shadow-sm); border-color: var(--line);}
.rk-portfolio .res-fund .rf-dot{width: 14px; height: 14px; border-radius: 4px;}
.rk-portfolio .res-fund .rf-name b{font-family: var(--font-head); font-size: 15px; display: block; color: var(--ink);}
.rk-portfolio .res-fund .rf-name span{font-size: 12px; color: var(--ink-mute);}
.rk-portfolio .res-fund .rf-cell .v{font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums;}
.rk-portfolio .res-fund .rf-cell .l{font-size: 11px; color: var(--ink-mute);}
.rk-portfolio .res-fund .rf-share{font-family: var(--font-head); font-weight: 800; font-size: 22px; color: var(--blue); text-align: right; letter-spacing: -0.02em;}
.rk-portfolio .res-cta{display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; align-items: center;}
.rk-portfolio .res-disc{display: flex; gap: 14px; margin-top: 24px; padding: 20px 22px; background: var(--paper); border-radius: var(--radius); font-size: 12.5px; color: var(--ink-soft); line-height: 1.55;}
.rk-portfolio .res-disc svg{color: var(--blue); flex: 0 0 auto; margin-top: 1px;}
.rk-portfolio .res-disc a{color: var(--blue); font-weight: 600; cursor: pointer;}
@media (max-width: 880px) {
  .rk-portfolio .calc-hero-inner{grid-template-columns: 1fr; gap: 30px;}
  .rk-portfolio .res-head{grid-template-columns: 1fr; text-align: center;}
  .rk-portfolio .res-donut{margin: 0px auto;}
  .rk-portfolio .res-metrics{justify-content: center;}
  .rk-portfolio .res-fund{grid-template-columns: 14px 1fr auto; gap: 12px;}
  .rk-portfolio .res-fund .rf-cell{display: none;}
}

/* Телефоны: внутренние поля карточек. 38px съедали пятую часть экрана —
   варианты ответа стояли на 79px от края при ширине 390px. Приводим к тому же
   порядку, что у карточек на остальных страницах (18-22px). На планшетах
   карточка ещё узкая (760px) внутри широкого экрана, там прежние 38px уместны. */
@media (max-width: 560px) {
  .rk-portfolio .quiz-card{padding: 22px 18px;}
  .rk-portfolio .quiz-opt{padding: 16px 14px; gap: 12px;}
  .rk-portfolio .quiz-hint{margin-bottom: 20px;}
  .rk-portfolio .res-head{padding: 24px 18px;}
  .rk-portfolio .res-disc{padding: 16px;}
}