:root{
  --bg:#F3F2EF;
  --surface:#FFFFFF;
  --ink:#15140F;
  --muted:#6E6C64;
  --faint:#9B9890;
  --line:#E5E3DC;
  --dark:#191814;
  --accent:#2F5D3E;       /* deep evergreen — only interactive/active */
  --accent-soft:#E9F0EA;
  --radius:18px;
  --maxw:1180px;
}

.n__sec section{padding:65px 0}

.seg button {
  
    outline: none;
    border: none;
}

.plan-toggle button {

    border: none;
}

/* ---------- HOUSE TITLE ---------- */
.house-head{margin-top:22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:30px 34px;display:flex;align-items:center;gap:40px;flex-wrap:wrap}
.house-head h1{font-size:40px}
.spec-row{margin-left:auto;display:flex;gap:48px;flex-wrap:wrap}
.spec{min-width:96px}
.spec .lbl{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.spec .val{font-weight:700;font-size:24px}

.hero-img{margin-top:14px;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/7;border:1px solid var(--line)}
.hero-img img{width:100%;height:100%;object-fit:cover}

/* ---------- SECTION SHELL ---------- */

.eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.sec-title{font-size:34px;margin-bottom:8px}
.sec-sub{color:var(--muted);font-size:16px;max-width:620px;margin-bottom:36px}

/* ---------- SPEC GRID (расширенные характеристики) ---------- */
.spec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.spec-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px}
.spec-card .lbl{font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.spec-card .val{font-weight:700;font-size:22px}
.spec-card .val span{font-size:14px;color:var(--faint);font-weight:500}

/* ---------- ВАРИАНТЫ ИСПОЛНЕНИЯ (interactive) ---------- */
.config{background:var(--dark);color:#fff;border-radius:var(--radius);padding:42px;overflow:hidden}
.config .eyebrow{color:#7FB58C}
.config h2{color:#fff;font-size:30px;margin-bottom:6px}
.config .lead{color:#B7B5AC;font-size:15px;margin-bottom:30px;max-width:560px}
.seg{display:inline-flex;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:40px;padding:5px;gap:4px;flex-wrap:wrap}
.seg button{background:transparent;color:#CFCDC4;padding:11px 24px;border-radius:34px;font-size:14px;font-weight:600;transition:all .2s}
.seg button.on{background:var(--accent);color:#fff}
.config-body{display:grid;grid-template-columns:1.1fr 1fr;gap:30px;margin-top:34px;align-items:start}
.mat-meta{display:flex;flex-direction:column;gap:18px}
.mat-row{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.1)}
.mat-row .k{color:#9B998F;font-size:14px}
.mat-row .v{font-weight:700;font-size:20px}
.mat-row .v small{font-size:13px;color:#7FB58C;font-weight:600;display:block;text-align:right}
.mat-desc{color:#B7B5AC;font-size:14px;line-height:1.6}
.price-box{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:26px}
.price-box .from{color:#9B998F;font-size:13px;text-transform:uppercase;letter-spacing:.05em}
.price-box .big{font-weight:800;font-size:42px;margin:6px 0 2px}
.price-box .sqm{color:#7FB58C;font-size:14px;font-weight:600}
.price-box .note{color:#86847B;font-size:12px;margin-top:14px;line-height:1.5}
.price-box .cta{display:block;text-align:center;width:100%;background:#fff;color:var(--dark);padding:14px;border-radius:40px;font-weight:700;font-size:14px;margin-top:18px;transition:transform .15s}
.price-box .cta:hover{transform:translateY(-1px)}

/* ---------- КОМПЛЕКТАЦИИ ---------- */
.pkg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pkg{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:28px;display:flex;flex-direction:column}
.pkg.featured{border-color:var(--accent);box-shadow:0 12px 30px -18px rgba(47,93,62,.4)}
.pkg-tag{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);padding:5px 11px;border-radius:30px;margin-bottom:16px;}
.pkg.featured .pkg-tag{visibility:visible}
.pkg h3{font-size:21px;margin-bottom:4px}
.pkg .desc{color:var(--muted);font-size:14px;min-height:40px;margin-bottom:18px}
.pkg .price{font-weight:800;font-size:30px}
.pkg .price small{font-size:13px;color:var(--faint);font-weight:500}
.pkg .perm{color:var(--muted);font-size:13px;margin:4px 0 18px}
.pkg ul{list-style:none;display:flex;flex-direction:column;gap:11px;font-size:14px;margin-bottom:22px}
.pkg li{display:flex;gap:9px;align-items:flex-start;color:#37352C}
.pkg li svg{flex-shrink:0;margin-top:3px}
.pkg .choose{margin-top:auto;text-align:center;border:1px solid var(--ink);color:var(--ink);padding:13px;border-radius:40px;font-weight:600;font-size:14px;transition:all .2s}
.pkg.featured .choose{background:var(--dark);color:#fff;border-color:var(--dark)}
.pkg .choose:hover{background:var(--ink);color:#fff}

/* ---------- ПЛАНИРОВКИ ---------- */
.plan-toggle{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:40px;padding:5px;gap:4px;margin-bottom:28px}
.plan-toggle button{background:transparent;color:var(--muted);padding:10px 22px;border-radius:34px;font-weight:600;font-size:14px;transition:all .2s}
.plan-toggle button.on{background:var(--dark);color:#fff}
.plan-wrap{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:stretch}
.plan-svg{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px;display:flex;align-items:center;justify-content:center}
.plan-svg svg{width:100%;height:auto}
.room{fill:#F7F6F2;stroke:#D8D6CE;stroke-width:1.4}
.room-lbl{font-family:'Manrope';font-size:11px;font-weight:600;fill:#37352C}
.room-area{font-size:10px;fill:#9B9890}
.outer{fill:none;stroke:#15140F;stroke-width:2.4}
.plan-legend{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:26px}
.plan-legend h4{font-size:18px;margin-bottom:16px}
.leg-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.leg-row:last-child{border-bottom:none}
.leg-row span:last-child{color:var(--muted)}
.leg-total{display:flex;justify-content:space-between;margin-top:14px;padding-top:14px;border-top:2px solid var(--ink);font-weight:700;font-size:17px}

/* ---------- ЭТАПЫ ---------- */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.step{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px}
.step .num{font-weight:800;font-size:15px;color:var(--accent);margin-bottom:14px}
.step h4{font-size:16px;margin-bottom:6px}
.step p{color:var(--muted);font-size:13px;line-height:1.5}
.step .dur{margin-top:12px;font-size:12px;font-weight:600;color:var(--faint)}

/* ---------- TRUST STRIP ---------- */
.trust{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:36px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.trust .t .n{font-weight:800;font-size:38px}
.trust .t .l{color:var(--muted);font-size:14px;margin-top:4px}


.plan-toggle button , .seg button{
    cursor:pointer;    font-family: Unbounded;
}

@media(max-width:960px){

  .config-body,.lead-form,.plan-wrap{grid-template-columns:1fr}
  .spec-grid,.pkg-grid,.steps,.trust{grid-template-columns:repeat(2,1fr)}
  .steps .step:last-child{grid-column:span 2}
}
@media(max-width:640px){
    .price-box {
  
    padding: 10px;
}
    .price-box .big {
    font-weight: 600;
    font-size: 26px;
    }
        h2 {
        font-family: Unbounded;
        font-size: 22px!important;
        }
.sec-sub {
    color: var(--muted);
    font-size: 14px;
    max-width: 620px;
    margin-bottom: 36px;
    margin-top: 20px;
}
  .hdr-right{gap:12px}
  .pill{display:none}
  .house-head h1{font-size:30px}
  .spec-row{gap:26px}
  .config,.lead-form,.trust{padding:26px}
  .spec-grid,.pkg-grid,.trust{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .steps .step:last-child{grid-column:span 1}
  .sec-title{font-size:26px}
  
  
      .config, .lead-form, .trust {
        padding: 20px 12px;
    }
    
    
    .seg button {
    background: transparent;
    color: #CFCDC4;
    padding: 7px 16px;
    border-radius: 34px;
    font-size: 12px;
    font-weight: 600;
    transition: all .2s;
}
.config .lead {
    
    font-size: 13px;

    margin-top: 16px;
}

.mat-row .k {
    color: #9B998F;
    font-size: 12px;
}

.mat-row .v {
    font-weight: 700;
    font-size: 17px;
    text-align: right;
}
.mat-desc {
    color: #B7B5AC;
    font-size: 12px;
    line-height: 1.6;
}

.pkg {

    padding: 15px;
}

.pkg .price {
    font-weight: 800;
    font-size: 25px;
    margin-bottom: 8px;
}

.trust .t .n {
    font-weight: 800;
    font-size: 24px;
}

}