/* AURUM ESTATE: развилка «Покупателям / Собственникам», блок брони лота, подстраницы.
   Только переменные и компоненты основного сайта: тёмный фон, золото, Montserrat + Inter. */

/* ---------- кнопки ---------- */
.btn-lg{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:14px 28px !important; font-size:.85rem !important; }
.btn-ghost{
    display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:14px 28px;
    border:1px solid rgba(255,255,255,.28); border-radius:4px; background:rgba(10,10,12,.35);
    font:700 .85rem 'Montserrat',sans-serif; text-transform:uppercase; letter-spacing:.5px; color:#fff; white-space:nowrap;
    transition:border-color .3s ease, color .3s ease, background .3s ease; cursor:pointer;
}
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); background:rgba(212,175,55,.08); }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; }

/* ---------- первый экран подстраницы (без «шторки») ---------- */
.hero.sub{ position:relative; height:auto; min-height:86svh; padding-top:140px; padding-bottom:70px; justify-content:flex-end; }
.hero.sub .hero-content{ margin-top:0; }
.hero.sub .hero-title{ font-size:clamp(2.4rem,7.4vw,6.4rem); line-height:.95; letter-spacing:-2px; }
.hero.sub .hero-subtitle{ max-width:640px; }
.hero.sub .btn-row{ margin-top:32px; }
.hero.sub .hero-stats{ position:relative; bottom:auto; right:auto; margin-top:46px; justify-content:flex-start; text-align:left; }
.content-wrapper.sub{ margin-top:0; }

/* ---------- главная: развилка в первом экране ---------- */
.hero-doors{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; max-width:780px; margin-top:36px; }
.door{
    display:flex; flex-direction:column; gap:10px; padding:24px 26px; border-radius:var(--r-md);
    border:1px solid var(--glass-line); background:rgba(10,10,12,.55);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); color:#fff;
    transition:border-color .3s ease, background .3s ease;
}
.door b{ display:flex; align-items:center; justify-content:space-between; gap:14px; font:700 1.05rem 'Montserrat',sans-serif; text-transform:uppercase; letter-spacing:.02em; }
.door b::after{ content:""; flex:none; width:9px; height:9px; border-top:2px solid var(--gold); border-right:2px solid var(--gold); transform:rotate(45deg); transition:transform .3s ease; }
.door span{ color:#c9c9d1; font-size:.92rem; line-height:1.5; }
.door:hover, .door:focus-visible{ border-color:rgba(212,175,55,.65); background:rgba(212,175,55,.09); color:#fff; }
.door:hover b::after{ transform:translateX(4px) rotate(45deg); }
.door.main{ border-color:rgba(212,175,55,.5); background:linear-gradient(135deg, rgba(212,175,55,.18), rgba(10,10,12,.55) 70%); }

/* ---------- заголовки секций в стиле каталога ---------- */
.sec-title{ font-size:clamp(2rem,4.4vw,4rem); font-weight:200; line-height:1.05; letter-spacing:-1px; max-width:900px; }
.sec-title strong{ font-weight:700; color:var(--gold); }
.sec-lead{ margin-top:18px; max-width:560px; color:#d1d1d1; font-size:1rem; line-height:1.6; }

/* ---------- БРОНЬ ЛОТА: главный блок ---------- */
.bridge{ background:radial-gradient(900px 460px at 8% 0%, rgba(212,175,55,.10), transparent 70%); }
.bridge-grid{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:56px; align-items:start; }
.bridge-copy .btn-row{ margin-top:34px; }
.plan-switch{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:34px; }
.plan-btn{
    text-align:left; padding:18px 18px 16px; border-radius:var(--r-md); cursor:pointer; color:#fff; font:inherit;
    border:1px solid var(--glass-line); background:var(--glass);
    transition:border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.plan-btn strong{ display:block; font:700 1.6rem/1.1 'Montserrat',sans-serif; margin-bottom:6px; }
.plan-btn small{ display:block; color:var(--text-muted); font-size:.82rem; line-height:1.4; }
.plan-btn:hover{ border-color:rgba(212,175,55,.5); }
.plan-btn[aria-pressed="true"]{ border-color:var(--gold); background:var(--gold-soft); box-shadow:0 10px 40px var(--gold-glow); }
.plan-btn[aria-pressed="true"] small{ color:#e9e9ee; }

.bstage{
    padding:30px 28px 26px; border-radius:var(--r-lg); border:1px solid rgba(255,255,255,.1);
    background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.01)), var(--bg-light);
    box-shadow:0 24px 60px rgba(0,0,0,.35);
}
/* история брони: два объекта, замок, поток денег */
.scene{ display:grid; grid-template-columns:minmax(0,1fr) 92px minmax(0,1fr); align-items:stretch; padding-top:10px; }
.scene .flow{ align-self:center; }
.cx{ display:flex; flex-direction:column; justify-content:center; }
.scene.solo{ grid-template-columns:minmax(0,320px); justify-content:center; }
.scene.solo .cx.old, .scene.solo .flow{ display:none; }
.cx{
    position:relative; padding:26px 16px 20px; border-radius:var(--r-md); text-align:center;
    border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03); opacity:.5;
    transition:opacity .4s ease, border-color .4s ease, background .4s ease, box-shadow .4s ease;
}
.cx.on{ opacity:1; border-color:rgba(212,175,55,.55); background:var(--gold-soft); box-shadow:0 0 44px var(--gold-glow); }
.cx-ico{ width:68px; height:68px; margin:0 auto 14px; color:var(--text-muted); transition:color .4s ease, transform .4s ease; }
.cx.on .cx-ico{ color:var(--gold); }
.cx-ico svg{ width:100%; height:100%; display:block; }
.cx b{ display:block; font:700 .86rem 'Montserrat',sans-serif; text-transform:uppercase; letter-spacing:.02em; }
.cx-st{ margin-top:10px; min-height:2.8em; display:flex; align-items:center; justify-content:center; font-size:.85rem; line-height:1.35; color:#e9e9ee; }
.cx-bar{ margin-top:12px; height:6px; border-radius:6px; background:rgba(255,255,255,.1); overflow:hidden; }
.cx-bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg, var(--gold), #e6bf47); }
.story[data-step="3"] .cx.old .cx-bar i{ width:100%; transition:width 2.13s linear; }
.story[data-step="4"] .cx.old .cx-bar i{ width:100%; }
.cx-lock{
    position:absolute; top:-14px; right:-10px; width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
    background:#0a0a0c; border:1px solid var(--gold); color:var(--gold); opacity:0; transform:scale(.4) rotate(-25deg);
    transition:opacity .27s ease, transform .33s cubic-bezier(.3,1.6,.5,1); box-shadow:0 0 22px var(--gold-glow);
}
.story:not([data-step="1"]) .cx-lock{ opacity:1; transform:none; }
.story[data-step="4"] .cx-lock{ background:var(--gold); color:#000; }
.flow{ position:relative; height:2px; margin:0 6px; background:repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 6px, transparent 6px 12px); transition:background .5s ease; }
.flow i{ position:absolute; top:-4px; left:0; width:10px; height:10px; border-radius:50%; background:var(--gold); box-shadow:0 0 14px var(--gold); opacity:0; }
.story[data-step="4"] .flow{ background:var(--gold); }
.story[data-step="4"] .flow i{ animation:flowDot 1s ease-in-out infinite; }
.story[data-step="4"] .flow i:nth-child(2){ animation-delay:.33s; }
.story[data-step="4"] .flow i:nth-child(3){ animation-delay:.67s; }
@keyframes flowDot{ 0%{ left:0; opacity:0; } 15%{ opacity:1; } 85%{ opacity:1; } 100%{ left:calc(100% - 10px); opacity:0; } }

.cap{ margin-top:26px; min-height:6.4em; text-align:center; }
.cap h3{ font:700 1.25rem/1.25 'Montserrat',sans-serif; text-transform:none; margin-bottom:8px; }
.cap p{ max-width:460px; margin:0 auto; color:#c9c9d1; font-size:.95rem; line-height:1.55; }
.cap.swap{ animation:catFade .5s ease both; }

.steps{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:20px; list-style:none; }
.steps button{
    position:relative; width:100%; padding:14px 8px 10px; border:0; border-radius:10px; cursor:pointer; text-align:left; overflow:hidden;
    background:rgba(255,255,255,.05); color:var(--text-muted); font:600 .76rem/1.25 'Inter',sans-serif;
    transition:color .4s ease, background .4s ease;
}
.steps button span{ position:relative; z-index:1; display:flex; flex-direction:column; gap:5px; }
.steps button b{ font:700 .95rem 'Montserrat',sans-serif; }
.steps .fill{ position:absolute; left:0; bottom:0; height:3px; width:0; background:var(--gold); }
.steps li.done button{ color:#e9e9ee; }
.steps li.done .fill{ width:100%; }
.steps li.active button{ color:#fff; background:var(--gold-soft); }
.steps li.active .fill{ animation:fillbar var(--dur,2.4s) linear forwards; }
@keyframes fillbar{ from{ width:0; } to{ width:100%; } }
.steps button:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.replay{ display:block; margin:16px auto 0; padding:10px 20px; border-radius:999px; border:1px solid rgba(212,175,55,.5); background:transparent; color:var(--gold); font:600 .85rem 'Inter',sans-serif; cursor:pointer; }
.replay[hidden]{ display:none; }
.replay:hover{ background:var(--gold-soft); }

.bkeys{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:64px; }
.bkey{ padding:28px 26px; border-radius:var(--r-lg); border:1px solid var(--glass-line); background:var(--glass); }
.bkey .svc-ico{ margin-bottom:22px; }
.bkey h3{ font:600 1.05rem 'Montserrat',sans-serif; text-transform:none; line-height:1.3; margin-bottom:10px; }
.bkey p{ color:#b9b9c2; font-size:.93rem; line-height:1.6; }

/* ---------- плашка с призывом (низ страниц и тизер на главной) ---------- */
.cta-band{
    display:flex; justify-content:space-between; align-items:center; gap:28px; flex-wrap:wrap;
    margin:0 5% 90px; padding:52px 44px; border:1px solid rgba(212,175,55,.3); border-radius:var(--r-lg);
    background:linear-gradient(90deg, rgba(212,175,55,.10), transparent);
}
.cta-band h2{ font-size:clamp(1.7rem,3.4vw,3rem); font-weight:200; line-height:1.1; letter-spacing:-1px; max-width:680px; }
.cta-band h2 strong{ font-weight:700; color:var(--gold); }
.cta-band p{ margin-top:14px; color:#d1d1d1; max-width:520px; }
.cta-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.chip{ display:inline-flex; align-items:center; padding:8px 14px; border-radius:999px; border:1px solid rgba(212,175,55,.35); background:var(--gold-soft); font:600 .82rem 'Inter',sans-serif; color:#fff; }
.cta-note{ margin-top:14px; font-size:.78rem; color:var(--text-muted); }
.teaser-wrap{ padding:0 0 10px; }

/* ---------- покупателям: подбор под сценарий ---------- */
.scn-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:34px; }
.scn-chip{
    padding:13px 20px; border-radius:999px; cursor:pointer; color:#fff; font:600 .92rem 'Inter',sans-serif;
    border:1px solid var(--glass-line); background:var(--glass); transition:background .3s ease, border-color .3s ease, color .3s ease;
}
.scn-chip:hover{ border-color:rgba(212,175,55,.5); }
.scn-chip[aria-pressed="true"]{ background:var(--gold); border-color:var(--gold); color:#000; }
.scn-out{ margin-top:22px; padding:34px; border-radius:var(--r-lg); border:1px solid rgba(212,175,55,.3); background:linear-gradient(135deg, rgba(212,175,55,.10), rgba(255,255,255,.02) 60%), var(--bg-light); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px 40px; align-items:end; animation:catFade .45s ease both; }
.scn-out h3{ font:700 1.7rem 'Montserrat',sans-serif; text-transform:uppercase; margin-bottom:12px; }
.scn-out p{ color:#d1d1d1; max-width:560px; line-height:1.6; }
.scn-note{ grid-column:1 / -1; margin-top:2px; font-size:.8rem; color:var(--text-muted); }

.conds{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.cond{ display:flex; flex-direction:column; padding:30px 28px; border-radius:var(--r-lg); border:1px solid var(--glass-line); background:var(--glass); }
.cond-big{ font:700 clamp(1.9rem,3vw,2.6rem)/1 'Montserrat',sans-serif; color:var(--gold); margin-bottom:16px; }
.cond h3{ font:600 1.05rem 'Montserrat',sans-serif; text-transform:none; margin-bottom:10px; }
.cond p{ color:#b9b9c2; font-size:.93rem; line-height:1.6; }
.cond a.cond-link{ margin-top:auto; padding-top:18px; color:var(--gold); font-weight:600; font-size:.9rem; }
.cond a.cond-link:hover{ color:#fff; }

.services-grid.svc-two{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.services-grid.svc-two .service-card:first-child{ grid-row:auto; padding:30px 30px 28px; }
.services-grid.svc-two .service-card:first-child .svc-lead{ font-size:1.1rem; line-height:1.42; font-weight:500; margin-bottom:10px; }
.services-grid.svc-one{ grid-template-columns:minmax(0,720px); }
.services-grid.svc-one .service-card:first-child{ grid-row:auto; padding:30px 30px 28px; }
.services-grid.svc-one .service-card:first-child .svc-lead{ font-size:1.1rem; line-height:1.42; font-weight:500; margin-bottom:10px; }

/* ---------- планшет и телефон ---------- */
@media (max-width:960px){
    .bridge-grid{ grid-template-columns:1fr; gap:36px; }
    .bkeys, .conds{ grid-template-columns:1fr; }
    .bkeys{ margin-top:40px; }
    .services-grid.svc-two{ grid-template-columns:1fr; }
}
@media (max-width:768px){
    .hero.sub{ min-height:0; padding-top:104px; padding-bottom:44px; }
    .hero.sub .hero-title{ font-size:clamp(1.6rem,8.2vw,3rem); letter-spacing:-1px; }
    .hero.sub .btn-row{ flex-direction:column; margin-top:24px; }
    .hero.sub .btn-row > *{ width:100%; }
    .hero-doors{ grid-template-columns:1fr; gap:10px; margin-top:22px; }
    .door{ padding:18px 20px; }
    .btn-lg{ padding:14px 22px !important; }
    .plan-btn strong{ font-size:1.3rem; }
    .bstage{ padding:22px 16px 20px; }
    .scene{ grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr); }
    .cx{ padding:22px 8px 14px; }
    .cx-ico{ width:48px; height:48px; margin-bottom:10px; }
    .cx b{ font-size:.7rem; }
    .cx-st{ font-size:.76rem; }
    .cx-lock{ right:-6px; width:34px; height:34px; }
    .steps button{ padding:12px 6px 9px; font-size:.68rem; }
    .cap h3{ font-size:1.1rem; }
    .cap{ min-height:7.4em; }
    .cta-band{ margin:0 4% 56px; padding:30px 22px; }
    .cta-band .btn-row{ width:100%; flex-direction:column; }
    .cta-band .btn-row > *{ width:100%; }
    .scn-out{ grid-template-columns:1fr; padding:24px 20px; }
    .scn-out .btn-row > *{ width:100%; }
    .sec-title{ letter-spacing:-.5px; }
}

/* текущий раздел в меню */
nav a.is-active, .m-link.is-active{ color:var(--gold); }
.lane-track{ z-index:0; }
.lane-label{ position:relative; z-index:3; }
.playhead{ z-index:2; }

/* ---------- финал истории: зелёная галочка «новая квартира получена» ---------- */
.story[data-step="4"] .cx.new{ border-color:rgba(46,204,113,.75); background:rgba(46,204,113,.13); box-shadow:0 0 48px rgba(46,204,113,.35); animation:okGlow 1.1s ease-out 1; }
.story[data-step="4"] .cx.new .cx-ico{ color:#2ecc71; }
.story[data-step="4"] .cx-lock{ width:44px; height:44px; top:-18px; right:-14px; background:#2ecc71; border-color:#2ecc71; color:#fff; box-shadow:0 0 0 0 rgba(46,204,113,.6), 0 0 26px rgba(46,204,113,.55); animation:okPop .37s cubic-bezier(.3,1.6,.5,1) both, okRing .95s ease-out .2s 2; }
.story[data-step="4"] .cx-lock svg{ display:none; }
.story[data-step="4"] .cx-lock::after{ content:""; width:9px; height:17px; margin-top:-3px; border:solid #fff; border-width:0 3.5px 3.5px 0; border-radius:1px; transform:rotate(45deg) scale(0); transform-origin:center; animation:okCheck .24s ease-out .17s forwards; }
.story[data-step="4"] .flow{ background:#2ecc71; }
.story[data-step="4"] .flow i{ background:#2ecc71; box-shadow:0 0 14px #2ecc71; }
.story[data-step="4"] .steps li:nth-child(4) .fill{ background:#2ecc71; }
.story[data-step="4"] .steps li:nth-child(4) button{ background:rgba(46,204,113,.14); }
.story[data-step="4"] .cap h3{ color:#2ecc71; }
@keyframes okPop{ from{ transform:scale(.2) rotate(-30deg); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes okCheck{ to{ transform:rotate(45deg) scale(1); } }
@keyframes okRing{ to{ box-shadow:0 0 0 18px rgba(46,204,113,0), 0 0 26px rgba(46,204,113,.55); } }
@keyframes okGlow{ 0%{ box-shadow:0 0 0 rgba(46,204,113,0); } 40%{ box-shadow:0 0 80px rgba(46,204,113,.55); } 100%{ box-shadow:0 0 48px rgba(46,204,113,.35); } }

/* ---------- покупателям: 3 главных объекта выбранного сценария ---------- */
.scn-out.has-top{ grid-template-columns:minmax(0,1fr) auto; }
.scn-top{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:6px; }
.scn-card{ display:flex; flex-direction:column; border:1px solid var(--glass-line); border-radius:var(--r-md); overflow:hidden; background:var(--bg-dark); color:#fff; opacity:0; transform:translateY(22px) scale(.97); animation:scnIn .6s cubic-bezier(.25,1,.5,1) forwards; animation-delay:calc(var(--i,0) * 120ms); transition:border-color .3s ease, box-shadow .3s ease; }
.scn-card:hover{ border-color:rgba(212,175,55,.65); box-shadow:0 14px 40px rgba(0,0,0,.5), 0 0 30px var(--gold-glow); color:#fff; }
.scn-card .m{ position:relative; aspect-ratio:4/3; background:#16161a; overflow:hidden; }
.scn-card .m img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.25,1,.5,1); }
.scn-card:hover .m img{ transform:scale(1.07); }
.scn-card .t{ position:absolute; top:12px; left:12px; padding:5px 10px; border-radius:3px; background:var(--gold); color:#000; font:800 .66rem Montserrat,sans-serif; letter-spacing:.08em; }
.scn-card .b{ padding:18px 18px 20px; }
.scn-card h3{ font-size:.92rem; line-height:1.3; margin-bottom:6px; text-transform:none; }
.scn-card small{ display:block; color:var(--text-muted); }
.scn-card .p{ display:block; margin-top:10px; font:700 1rem Montserrat,sans-serif; color:var(--gold); }
.scn-card.sk{ min-height:260px; background:linear-gradient(110deg,#141418 30%,#1d1d23 50%,#141418 70%) 0 0/200% 100%; animation:scnIn .5s ease forwards, scnSk 1.2s linear infinite; }
@keyframes scnIn{ to{ opacity:1; transform:none; } }
@keyframes scnSk{ to{ background-position:-200% 0; } }
@media (max-width:960px){ .scn-top{ grid-template-columns:1fr; } }
.scn-card .pr-eye{ display:inline-flex; align-items:center; gap:10px; margin-top:10px; padding:7px 12px; background:rgba(212,175,55,.08); border:1px solid rgba(212,175,55,.35); border-radius:999px; color:var(--gold); font:700 .9rem Montserrat,sans-serif; cursor:pointer; transition:.25s; }
.scn-card .pr-eye:hover{ background:rgba(212,175,55,.16); border-color:var(--gold); }
.scn-card .pr-dots{ filter:blur(3.5px); user-select:none; white-space:nowrap; }
.story[data-step="4"] .cx.old .cx-bar i{ background:#2ecc71; transition:background .4s ease; }