:root{--rg-blue:#126FCC; --rg-deep:#0A4E92; --rg-sand:#D99B54; --rg-cream:#F0ECE4; --rg-ink:#22303C; --rg-grey:#6E6E6E; --rg-line:#DDD6CA;
  --font:"Fira Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;}
*{box-sizing:border-box}
/* ================= quiz shared ================= */
.q{height:100%; display:flex; flex-direction:column; font-family:var(--font); color:var(--rg-ink); position:relative; font-size:15px; line-height:1.4}
.q button{font-family:inherit}
.q-scroll{flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain}
.qbtn{appearance:none; border:0; width:100%; min-height:56px; border-radius:16px; background:var(--rg-blue); color:#fff; font-size:17px; font-weight:600; cursor:pointer; padding:0 18px; transition:transform .12s ease, filter .15s}
.qbtn:active{transform:scale(.985)}
.qbtn:hover{filter:brightness(1.06)}
.qbtn.sand{background:var(--rg-sand); color:var(--rg-ink)}
.qbtn.white{background:#fff; color:var(--rg-blue)}
.qback{appearance:none; width:38px; height:38px; border-radius:50%; border:1px solid var(--rg-line); background:#fff; display:grid; place-items:center; cursor:pointer; flex:none; color:var(--rg-ink)}
.qback svg{width:18px; height:18px}
.fade{animation:qfade .32s ease both}
@keyframes qfade{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

/* form */
.qf{display:grid; gap:12px}
.qf-h{font-size:22px; font-weight:700; line-height:1.15}
.qf-sub{color:#4C5762; font-size:15px}
.qf-lbl{font-size:13px; color:#5E6871; margin-top:2px}
.qf-msg{display:flex; flex-wrap:wrap; gap:6px}
.chip{appearance:none; border:1px solid #CFC7BA; background:#fff; color:var(--rg-ink); border-radius:999px; padding:9px 14px; font-size:14px; cursor:pointer}
.chip.on{background:var(--rg-blue); border-color:var(--rg-blue); color:#fff}
.qf-field{display:grid; gap:5px; font-size:13px; color:#5E6871}
.qf-field input{height:52px; border:1px solid #D2CABD; border-radius:14px; padding:0 14px; font:16px var(--font); color:var(--rg-ink); background:#fff; width:100%}
.qf-field input:focus{outline:none; border-color:var(--rg-blue); box-shadow:0 0 0 3px rgba(18,111,204,.18)}
.qf-check{display:grid; grid-template-columns:22px minmax(0,1fr); gap:10px; align-items:start; font-size:13px; color:#4C5762; cursor:pointer}
.qf-check input{width:20px; height:20px; margin:0; accent-color:var(--rg-blue)}
.qf-err{min-height:18px; font-size:13px; color:#B4331F}
.qf-legal{font-size:11.5px; color:#7A838B; text-align:center}
.qthanks{display:grid; gap:14px; justify-items:center; text-align:center; padding:36px 20px}
.qthanks svg{width:84px; height:96px}
.qthanks h3{font-size:24px; line-height:1.15}
.qthanks p{color:#4C5762; max-width:32ch}
.qlink{appearance:none; background:none; border:0; color:var(--rg-blue); font:500 15px var(--font); cursor:pointer; padding:8px}

/* ================= A: подбор ================= */
.qa{background:var(--rg-cream)}
.qa-bar{display:flex; align-items:center; gap:12px; padding:16px 16px 10px; background:var(--rg-cream)}
.qa-bar .qa-logo{height:30px; width:auto}
.qa-bar .qa-n{margin-left:auto; font-size:13px; color:#5E6871; font-variant-numeric:tabular-nums}
.qa-prog{height:4px; margin:0 16px; border-radius:4px; background:#DDD5C7; overflow:hidden}
.qa-prog i{display:block; height:100%; background:var(--rg-blue); border-radius:4px; transition:width .4s ease}
.qa-count{margin:12px 16px 0; display:flex; align-items:center; gap:10px; padding:10px 14px; background:#fff; border-radius:14px; font-size:14px; border:1px solid var(--rg-line)}
.qa-count svg{width:22px; height:24px; flex:none}
.qa-count b{font-size:18px; font-variant-numeric:tabular-nums; color:var(--rg-blue)}
.qa-count small{margin-left:auto; color:#6E777F; font-size:12px; text-align:right; line-height:1.3}
.qa-body{padding:18px 16px 20px; display:grid; gap:14px; align-content:start}
.qa-q{font-size:23px; line-height:1.15; font-weight:700}
.qa-q small{display:block; font-size:14px; font-weight:400; color:#5E6871; margin-top:6px}
.qa-room{appearance:none; width:100%; display:grid; grid-template-columns:84px minmax(0,1fr) 24px; gap:14px; align-items:center; text-align:left; background:#fff; border:1.5px solid transparent; border-radius:18px; padding:10px 14px 10px 10px; cursor:pointer; box-shadow:0 1px 0 rgba(0,0,0,.04); color:var(--rg-ink)}
.qa-room:hover{border-color:#BFD5EC}
.qa-room.on{border-color:var(--rg-blue)}
.qa-plan{width:84px; height:84px; border-radius:12px; background:#F7F5F1; display:grid; place-items:center; overflow:hidden}
.qa-plan img{width:92%; height:92%; object-fit:contain}
.qa-rt{display:grid; gap:2px; min-width:0}
.qa-rt b{font-size:17px}
.qa-rt span{font-size:14px; color:#4C5762}
.qa-rt em{font-style:normal; font-size:13px; color:var(--rg-blue); font-weight:500}
.tick{width:24px; height:24px; border-radius:50%; border:1.5px solid #C9C1B4; display:grid; place-items:center}
.on .tick{background:var(--rg-blue); border-color:var(--rg-blue)}
.on .tick::after{content:""; width:10px; height:6px; border:2px solid #fff; border-top:0; border-right:0; transform:rotate(-45deg) translate(1px,-1px)}
.qa-skip{appearance:none; background:none; border:0; color:var(--rg-blue); font-size:15px; font-weight:500; padding:6px; cursor:pointer; justify-self:center}
.qa-tiles{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px}
.qa-tile{appearance:none; position:relative; border:0; padding:0; border-radius:16px; overflow:hidden; aspect-ratio:1/1.02; cursor:pointer; background:#ddd; text-align:left; color:#fff}
.qa-tile .tl{position:absolute; inset:auto 0 0 0; padding:28px 12px 11px; background:linear-gradient(180deg, rgba(10,25,40,0), rgba(10,25,40,.82)); font-size:15px; font-weight:600; line-height:1.2}
.qa-tile .tf{position:absolute; inset:0; padding:14px 12px; background:rgba(18,111,204,.93); display:flex; flex-direction:column; justify-content:flex-end; gap:6px; font-size:13.5px; line-height:1.3; opacity:0; transition:opacity .25s ease}
.qa-tile .tf b{font-size:15px}
.qa-tile .tf small{font-size:12px; opacity:.85}
.qa-tile.on .tf{opacity:1}
.qa-tile.on .tl{opacity:0}
.qa-tile .tick{position:absolute; top:10px; right:10px; border-color:#fff; background:rgba(0,0,0,.18)}
.qa-tile.on .tick{background:#fff; border-color:#fff}
.qa-tile.on .tick::after{border-color:var(--rg-blue)}
.qa-opt{appearance:none; width:100%; display:grid; grid-template-columns:minmax(0,1fr) 24px; gap:12px; align-items:center; text-align:left; background:#fff; border:1.5px solid transparent; border-radius:16px; padding:15px 16px; cursor:pointer; color:var(--rg-ink); font-size:16px}
.qa-opt:hover{border-color:#BFD5EC}
.qa-opt.on{border-color:var(--rg-blue)}
.qa-opt span{display:grid; gap:3px}
.qa-opt small{font-size:13px; color:#5E6871}
.qa-opt small b{color:var(--rg-blue); font-weight:600}
.qa-foot{padding:12px 16px 16px; background:var(--rg-cream); border-top:1px solid #E2DACD}
/* A start */
.qa-start .qa-bar{padding-bottom:12px}
.qa-hero{position:relative; margin:0 16px}
/* dynamic containers */
.cs{position:relative; overflow:hidden; background:#CFC8BB}
.cs-sl{position:absolute; inset:0; margin:0; opacity:0; transition:opacity .9s ease}
.cs-sl.on{opacity:1}
.cs-sl img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.cs-sl.on img{animation:csz 7s ease-out both}
@keyframes csz{from{transform:scale(1.09)} to{transform:scale(1)}}
.cs-sl figcaption{position:absolute; left:12px; top:12px; max-width:calc(100% - 110px); background:rgba(12,24,36,.6); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); color:#fff; font-size:12.5px; line-height:1.25; padding:6px 10px; border-radius:999px}
.cs-dots{position:absolute; right:8px; top:8px; display:flex; z-index:2}
.cs-dots button{appearance:none; border:0; background:none; padding:0; width:16px; height:26px; display:grid; place-items:center; cursor:pointer}
.cs-dots button::before{content:""; width:7px; height:7px; border-radius:4px; background:rgba(255,255,255,.6); transition:width .3s ease}
.cs-dots button.on{width:26px}
.cs-dots button.on::before{width:18px; background:#fff}
.cs-hero{aspect-ratio:16/10; clip-path:polygon(0 0, 100% 0, 100% calc(100% - 34px), calc(100% - 34px) 100%, 0 100%); border-radius:18px 18px 0 18px; touch-action:pan-y; cursor:pointer}
.cs-band{aspect-ratio:16/6.4; border-radius:16px; touch-action:pan-y; cursor:pointer}
.cs-tile{position:absolute; inset:0; background:none}
.qa-badge{position:absolute; left:12px; bottom:12px; z-index:2; background:var(--rg-sand); color:var(--rg-ink); font-weight:700; font-size:14px; padding:7px 12px; border-radius:10px}
.qa-h1{font-size:27px; line-height:1.1; font-weight:800; letter-spacing:-.01em}
.qa-h1 span{color:var(--rg-blue)}
.qa-facts{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.qa-facts li{display:grid; grid-template-columns:30px minmax(0,1fr); gap:10px; align-items:center; font-size:14.5px}
.qa-facts svg{width:30px; height:30px; padding:6px; border-radius:9px; background:#fff; color:var(--rg-blue)}
.qa-note{font-size:12.5px; color:#6E777F; text-align:center; margin-top:8px}
/* A result */
.qa-res{background:#fff; border-radius:20px; overflow:hidden; border:1px solid var(--rg-line)}
.qa-res-top{display:grid; grid-template-columns:120px minmax(0,1fr); gap:14px; padding:14px; align-items:center}
.qa-res-plan{position:relative; width:120px; height:120px; border-radius:12px; background:#F7F5F1; overflow:hidden; display:grid; place-items:center}
.qa-res-plan img{width:90%; height:90%; object-fit:contain; filter:blur(2px); opacity:.85}
.qa-res-plan span{position:absolute; inset:auto 6px 6px 6px; font-size:10.5px; line-height:1.2; background:rgba(255,255,255,.92); border-radius:8px; padding:5px 6px; text-align:center; color:var(--rg-ink)}
.qa-res-d{display:grid; gap:4px; font-size:14px; color:#4C5762}
.qa-res-d b{font-size:17px; color:var(--rg-ink); line-height:1.2}
.qa-res-d strong{color:var(--rg-blue); font-weight:600}
.qa-res-p{display:flex; flex-wrap:wrap; gap:6px; padding:0 14px 14px}
.qa-res-p span{font-size:12.5px; padding:5px 9px; border-radius:999px; background:#EAF2FB; color:var(--rg-deep)}
.qa-gift{display:grid; grid-template-columns:40px minmax(0,1fr); gap:12px; align-items:center; background:#FBF1E4; border:1px solid #EBCFAA; border-radius:16px; padding:12px 14px}
.qa-gift svg{width:40px; height:44px}
.qa-gift b{display:block; font-size:16px}
.qa-gift span{font-size:13px; color:#5E5040}

/* ================= B: проверка ================= */
.qb{background:linear-gradient(180deg, #1577D6 0%, var(--rg-blue) 40%, #0D5BAA 100%); color:#fff; overflow:hidden}
.qb-pat{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0}
.qb > *:not(.qb-pat){position:relative; z-index:1}
.qb-bar{display:flex; align-items:center; gap:10px; padding:18px 18px 8px}
.qb-bar .lg{height:30px; width:auto}
.qb-bar .qback{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.3); color:#fff}
.qb-bar .qb-n{margin-left:auto; font-size:13px; opacity:.85; font-variant-numeric:tabular-nums}
.qb-pips{display:flex; gap:6px; padding:6px 18px 0}
.qb-pips svg{width:22px; height:25px}
.qb-start{flex:1; display:flex; flex-direction:column; min-height:0}
.qb-start .q-scroll{display:flex; flex-direction:column; align-items:center; text-align:center; padding:8px 22px 0; gap:16px}
.hexph{width:210px; aspect-ratio:1/1.12; clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background:#fff; padding:5px; flex:none}
.hexph img{width:100%; height:100%; object-fit:cover; clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); display:block}
.qb-h1{font-size:28px; line-height:1.1; font-weight:800; letter-spacing:-.01em}
.qb-sub{font-size:15.5px; opacity:.92; max-width:30ch}
.qb-wave{flex:none; display:block; width:100%; height:30px}
.qb-cta{background:var(--rg-sand); padding:4px 18px 20px; flex:none}
.qb-sheet{margin-top:auto; background:#fff; color:var(--rg-ink); border-radius:26px 26px 0 0; padding:22px 18px 18px; display:grid; gap:14px; max-height:82%; overflow-y:auto}
.qb-q{font-size:22px; line-height:1.18; font-weight:700}
.qb-k{font-size:13px; color:var(--rg-blue); font-weight:600}
.qb-ans{display:grid; gap:8px}
.qb-ans button{appearance:none; min-height:54px; border-radius:15px; border:1.5px solid #D9D2C6; background:#fff; font-size:16px; font-weight:500; color:var(--rg-ink); cursor:pointer; text-align:left; padding:0 16px}
.qb-ans button:hover{border-color:var(--rg-blue)}
.qb-stage{flex:1; min-height:0; display:flex; flex-direction:column; justify-content:center; gap:12px; padding:12px 22px 20px}
.qb-stage.rev{align-items:center}
.qb-kw{font-size:14px; opacity:.85}
.qb-qw{font-size:28px; line-height:1.15; font-weight:800; letter-spacing:-.01em}
.hexph.big{width:min(220px, 56%); background:var(--rg-sand); padding:5px}
.qb-t{display:block; font-size:20px; line-height:1.2; margin:3px 0 4px}
.qb-f{font-size:15px; color:#3F4A55}
.qb-you{display:inline-flex; gap:6px; align-items:center; font-size:13px; padding:6px 10px; border-radius:999px; background:#F1EEE8; color:#4C5762; justify-self:start}
.qb-score{padding:10px 18px 0; display:grid; gap:16px}
.qb-row{display:grid; gap:8px}
.qb-row .lbl{display:flex; justify-content:space-between; font-size:14px; opacity:.95}
.qb-row .lbl b{font-variant-numeric:tabular-nums}
.qb-row .hx{display:flex; gap:6px}
.qb-row .hx svg{width:36px; height:40px}
.qb-big{font-size:26px; line-height:1.12; font-weight:800}
.qb-opt{appearance:none; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; min-height:56px; border-radius:15px; border:1.5px solid #D9D2C6; background:#fff; padding:10px 16px; text-align:left; cursor:pointer; color:var(--rg-ink); font-size:16px}
.qb-opt:hover{border-color:var(--rg-blue)}
.qb-opt small{font-size:13px; color:var(--rg-blue); font-weight:600; white-space:nowrap}

/* ================= C: сторис ================= */
.qc{background:#0B1520; color:#fff; overflow:hidden}
.qc-bg{position:absolute; inset:0; z-index:0}
.qc-bg img{width:100%; height:100%; object-fit:cover; display:block; animation:qkb 9s ease-out both}
@keyframes qkb{from{transform:scale(1.08)} to{transform:scale(1)}}
.qc-bg::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(5,15,25,.55) 0%, rgba(5,15,25,0) 22%, rgba(5,15,25,0) 36%, rgba(5,15,25,.78) 64%, rgba(5,15,25,.94) 100%)}
.qc > *:not(.qc-bg){position:relative; z-index:1}
.qc-top{padding:14px 14px 0; display:grid; gap:12px}
.qc-seg{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:4px}
.qc-seg i{height:3px; border-radius:3px; background:rgba(255,255,255,.35); overflow:hidden; position:relative}
.qc-seg i.done{background:#fff}
.qc-seg i.cur::after{content:""; position:absolute; inset:0; background:#fff; transform-origin:left; animation:qseg 6s linear both}
@keyframes qseg{from{transform:scaleX(0)} to{transform:scaleX(1)}}
.qc-brand{display:flex; align-items:center; gap:10px; min-height:38px}
.qc-brand .lg{height:30px; width:auto}
.qc-brand span{margin-left:auto; font-size:13px; opacity:.85}
.qc-brand .qback{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.3); color:#fff; margin-left:auto}
.qc-low{margin-top:auto; padding:0 16px 18px; display:grid; gap:12px}
.qc-h{font-size:27px; line-height:1.12; font-weight:800; letter-spacing:-.01em; text-shadow:0 1px 18px rgba(0,0,0,.25)}
.qc-sub{font-size:15.5px; opacity:.92}
.qc-opts{display:grid; gap:8px}
.qc-opt{appearance:none; min-height:54px; border-radius:16px; border:1px solid rgba(255,255,255,.32); background:rgba(255,255,255,.14); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); color:#fff; text-align:left; font-size:16px; font-weight:500; padding:0 16px; cursor:pointer; transition:background .2s}
.qc-opt:hover{background:rgba(255,255,255,.24)}
.qc-opt.on{background:#fff; color:var(--rg-ink)}
.qc-fact{display:grid; grid-template-columns:44px minmax(0,1fr); gap:12px; align-items:center; background:#fff; color:var(--rg-ink); border-radius:18px; padding:12px 14px}
.qc-fact svg{width:44px; height:48px}
.qc-fact small{display:block; font-size:12px; color:var(--rg-blue); font-weight:600}
.qc-fact b{font-size:16px; line-height:1.25}
.qc-val{font-size:40px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1}
.qc-val small{font-size:18px; font-weight:500; opacity:.85}
.qc-range{width:100%; accent-color:var(--rg-sand); height:28px; margin:0}
.qc-scale{display:flex; justify-content:space-between; font-size:12px; opacity:.7; font-variant-numeric:tabular-nums}
.qc-fit{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px}
.qc-fit div{border-radius:14px; padding:10px 8px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); display:grid; gap:2px; transition:background .25s, color .25s}
.qc-fit div b{font-size:15px}
.qc-fit div span{font-size:12.5px; font-variant-numeric:tabular-nums}
.qc-fit div em{font-style:normal; font-size:11.5px; opacity:.8}
.qc-fit div.ok{background:#fff; color:var(--rg-ink); border-color:#fff}
.qc-fit div.ok em{color:#1E7A3C; opacity:1; font-weight:600}
.qc-fit div.best{box-shadow:0 0 0 3px var(--rg-sand)}
.qc-card{background:#fff; color:var(--rg-ink); border-radius:22px; padding:14px; display:grid; gap:12px}
.qc-card-top{display:grid; grid-template-columns:104px minmax(0,1fr); gap:12px; align-items:center}
.qc-card-top .pl{width:104px; height:104px; border-radius:12px; background:#F5F3EF; display:grid; place-items:center}
.qc-card-top .pl img{width:92%; height:92%; object-fit:contain}
.qc-card small{font-size:12px; color:var(--rg-blue); font-weight:600}
.qc-card h3{font-size:21px; line-height:1.15; margin:2px 0 4px}
.qc-card p{font-size:14px; color:#4C5762}
.qc-card p strong{color:var(--rg-ink)}
.qc-note{font-size:12.5px; color:#6E777F}
.qc-sheet{position:absolute; inset:auto 0 0 0; background:#fff; color:var(--rg-ink); border-radius:24px 24px 0 0; padding:20px 16px 16px; max-height:88%; overflow-y:auto; z-index:3}
.qc-dim{position:absolute; inset:0; background:rgba(5,15,25,.55); z-index:2}

@media (prefers-reduced-motion: reduce){
  .fade,.qc-bg img,.qc-seg i.cur::after,.cs-sl.on img{animation:none}
  .cs-sl{transition:none}
  .qa-prog i,.qa-tile .tf{transition:none}
}

html,body{height:100%; margin:0}
body{background:#0B1520; font-family:var(--font); -webkit-font-smoothing:antialiased; overflow:hidden}
h1,h2,h3{margin:0; text-wrap:balance}
p{margin:0}
:focus-visible{outline:3px solid var(--rg-blue); outline-offset:2px}
.app{height:100%; height:100dvh; display:flex; justify-content:center; padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px); position:relative; z-index:1}
.app .screen{width:100%; max-width:480px; height:100%; position:relative; overflow:hidden; background:var(--rg-cream); isolation:isolate}
.backdrop{position:fixed; inset:-40px; background-size:cover; background-position:center; filter:blur(26px) brightness(.55); z-index:0}
.back-home{display:none}
@media (min-width:700px){
  .app{align-items:center; padding:24px}
  .app .screen{height:min(880px, 100%); border-radius:30px; box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
  .back-home{display:block; position:fixed; left:24px; top:20px; z-index:2; color:#fff; font:500 15px var(--font); text-decoration:none; opacity:.85}
  .back-home:hover{opacity:1}
}