/* «Приватним особам» — світла й зелена, трохи яскравіша за наш зелений, затишна (Віктор 01.10).
   Поверх v2.css (світла шапка й футер, як на головній). Великий шрифт без капсу, м'які заокруглення,
   один перемикач «Будинок / Квартира» змінює вміст усієї сторінки. */

.pg-home{
  --pg:#1E9D57; --pg-hi:#25B866; --pg-d:#0E4D30; --pg-ink:#12261B; --pg-ink-2:#5A6B61;
  --pg-bg:#FAFCF8; --pg-soft:#EEF7EF; --pg-line:#DCE9DF;
  background:var(--pg-bg);color:var(--pg-ink)
}
.pg-home .hdr{background:rgba(250,252,248,.75)}
.pg-home .hdr__nav a:hover,.pg-home .hdr__nav a[aria-current="page"]{border-color:var(--pg)}
.pg-home .ftr{background:var(--pg-soft);border-top-color:var(--pg-line)}
.pg-home .btn--green{background:var(--pg)}
.pg-home .btn--green:hover{background:var(--pg-hi)}

/* показ блоків за режимом */
[data-mode="house"] [data-for="flat"],[data-mode="flat"] [data-for="house"]{display:none!important}

.pv h1,.pv h2{font-family:var(--f-head);font-weight:700;letter-spacing:-.035em;text-transform:none;margin:0;color:var(--pg-ink)}
.pv h2{font-size:clamp(32px,4.4vw,60px);line-height:1.06}
.p-kicker{font:600 1rem/1.2 var(--f-body);color:var(--pg);margin:0 0 14px}
.p-sub{font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.55;color:var(--pg-ink-2);margin-top:18px;max-width:34em}
.p-head{margin-bottom:clamp(36px,5vw,60px)}
.p-sec{padding:clamp(90px,11vw,150px) 0}
.p-sec--soft{background:var(--pg-soft)}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.reveal.is-in{opacity:1;transform:none}

/* кнопки */
.p-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 28px;border-radius:999px;border:0;cursor:pointer;
  background:var(--pg);color:#fff;font:600 1.05rem/1 var(--f-body);text-decoration:none;box-shadow:0 10px 24px rgba(30,157,87,.28);transition:background .2s,transform .2s,box-shadow .2s}
.p-btn i{font-size:1.15em;transition:transform .2s}
@media (hover:hover) and (pointer:fine){.p-btn:hover{background:var(--pg-hi);transform:translateY(-1px);box-shadow:0 14px 30px rgba(30,157,87,.34)}}
@media (hover:hover) and (pointer:fine){.p-btn:hover i{transform:translateX(3px)}}
.p-btn--light{background:#fff;color:var(--pg-d);box-shadow:none;margin-top:30px}
.p-btn--light:hover{background:#F3FBF5}
.p-btn--light i{color:var(--pg)}
.p-btn--block{width:100%}
.p-link{display:inline-flex;align-items:center;gap:8px;color:var(--pg-d);font:600 1.02rem/1 var(--f-body);text-decoration:none;padding:14px 4px}
.p-link i{color:var(--pg);font-size:1.2em}
.p-link:hover{color:var(--pg)}

/* ---------- 1. Перший екран ---------- */
.p-hero{position:relative;padding:calc(var(--hdr-h) + 40px) 0 clamp(60px,8vw,110px);overflow:hidden;
  background:radial-gradient(60% 70% at 85% 10%,rgba(37,184,102,.16),transparent 65%),radial-gradient(50% 60% at 0% 100%,rgba(248,180,36,.10),transparent 60%),var(--pg-bg)}
.p-switch{position:relative;display:inline-flex;gap:4px;padding:5px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--pg-line),0 6px 18px rgba(18,38,27,.06);margin-bottom:clamp(30px,4vw,48px)}
.p-switch button{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border:0;border-radius:999px;background:none;cursor:pointer;
  font:600 1rem/1 var(--f-body);color:var(--pg-ink-2);transition:color .3s}
.p-switch button i{font-size:1.2rem}
.p-switch button[aria-selected="true"]{color:#fff}
.p-switch__pill{position:absolute;z-index:0;top:5px;bottom:5px;left:5px;border-radius:999px;background:var(--pg);
  width:var(--pw,0);transform:translateX(var(--px,0));transition:transform .45s cubic-bezier(.3,.9,.3,1.1),width .45s}
.p-hero__grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,5vw,72px);align-items:center;animation:p-in .6s cubic-bezier(.2,.8,.2,1)}
/* фото першого екрана на 20% більше (Віктор 02.10): ряд ширший за звичайну колонку, фото забирає більшу частку */
@media (min-width:1000px){
  .p-hero>.wrap{width:min(1320px,100% - 48px)}
  .p-hero__grid{grid-template-columns:1fr 1.36fr;gap:clamp(32px,4vw,64px)}
}
@keyframes p-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* один h1 на сторінку (13.10.2026): заголовок вкладки «Квартира» — h2 з тим самим виглядом */
.p-hero h1,.p-hero .p-h1{font-size:clamp(40px,5.6vw,80px);line-height:1.02}
.p-hero h1 span,.p-hero .p-h1 span{color:var(--pg)}
.p-lead{margin-top:22px;font-size:clamp(1.1rem,1.5vw,1.35rem);line-height:1.5;color:var(--pg-ink-2);max-width:28em}
.p-btns{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin-top:34px}
.p-hero__img{margin:0;border-radius:32px;overflow:hidden;aspect-ratio:4 / 3;box-shadow:0 30px 60px rgba(18,38,27,.16)}
.p-hero__img img{width:100%;height:100%;object-fit:cover}

/* ---------- 2. Вигода ---------- */
.p-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.p-card{display:flex;flex-direction:column;gap:10px;padding:clamp(26px,3vw,38px);border-radius:28px;background:#fff;box-shadow:0 0 0 1px var(--pg-line);min-height:240px;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
@media (hover:hover) and (pointer:fine){.p-card:hover{transform:translateY(-5px);box-shadow:0 0 0 1px var(--pg-line),0 20px 40px rgba(18,38,27,.08)}}
.p-card i{font-size:2.3rem;color:var(--pg);margin-bottom:auto;padding-bottom:24px}
.p-card h3{font:700 clamp(1.25rem,1.8vw,1.6rem)/1.18 var(--f-head);letter-spacing:-.025em;color:var(--pg-ink)}
.p-card p{color:var(--pg-ink-2);line-height:1.55}
.p-card--hero{grid-column:span 2;background:linear-gradient(135deg,var(--pg),#178049);box-shadow:none}
.p-card--hero i,.p-card--hero h3,.p-card--hero p{color:#fff}
.p-card--hero p{opacity:.88}
.p-card--hero h3{font-size:clamp(1.6rem,2.6vw,2.4rem)}
.p-cards .p-card:last-child{grid-column:span 2}
.p-card--car{background:#FFF8E6;box-shadow:0 0 0 1px #F6E3B0}
.p-card--car i{color:#C98A00}

/* ---------- 3. Що працюватиме ---------- */
.p-works{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,5vw,80px);align-items:center}
.p-dev{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.p-dev li{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:20px 18px;border-radius:20px;background:#fff;font:600 1rem/1.25 var(--f-head);letter-spacing:-.015em;color:var(--pg-ink)}
.p-dev i{font-size:1.9rem;color:var(--pg)}

/* ---------- 4. Обладнання ---------- */
.p-kit{display:grid;grid-template-columns:1fr .9fr;gap:clamp(32px,5vw,80px);align-items:center}
.p-ticks{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:12px}
.p-ticks li{display:flex;align-items:center;gap:12px;font-size:1.05rem;color:var(--pg-ink)}
.p-ticks i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--pg-soft);color:var(--pg);font-size:1rem;flex:none}
.p-kit__img{margin:0;border-radius:32px;overflow:hidden;aspect-ratio:3 / 4;max-height:620px;justify-self:center;width:min(100%,460px);box-shadow:0 30px 60px rgba(18,38,27,.14)}
.p-kit__img--wide{aspect-ratio:4 / 3;width:100%}
.p-kit__img img{width:100%;height:100%;object-fit:cover}

/* ---------- 5. Як це працює ---------- */
.p-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:ps}
.p-steps li{counter-increment:ps;position:relative;display:flex;flex-direction:column;gap:8px;padding:28px 24px;border-radius:24px;background:#fff}
.p-steps li::before{content:counter(ps);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--pg);color:#fff;font:700 1.05rem/1 var(--f-head);margin-bottom:14px}
.p-steps b{font:700 1.15rem/1.2 var(--f-head);letter-spacing:-.02em;color:var(--pg-ink)}
.p-steps span{color:var(--pg-ink-2);line-height:1.45}
.p-note{display:flex;align-items:center;gap:12px;margin-top:28px;padding:18px 22px;border-radius:18px;background:#fff;color:var(--pg-ink);font-size:1.05rem;box-shadow:0 0 0 1px var(--pg-line)}
.p-note i{font-size:1.5rem;color:var(--pg);flex:none}

/* ---------- 6. Чому ми ---------- */
.p-trust{list-style:none;margin:0;padding:clamp(26px,4vw,38px) 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;border-top:1px solid var(--pg-line)}
.p-trust b{display:block;font:700 clamp(30px,3.4vw,50px)/1 var(--f-head);letter-spacing:-.04em;color:var(--pg-d);white-space:nowrap}
.p-trust span{display:block;margin-top:12px;color:var(--pg-ink-2);line-height:1.45;max-width:15em}
.p-trust li:first-child b{color:var(--pg)}

/* ---------- 7. Заявка ---------- */
.p-sec--green{background:radial-gradient(60% 80% at 100% 0%,rgba(255,255,255,.14),transparent 60%),linear-gradient(140deg,#1E9D57,#126B3C)}
.p-sec--green h2{color:#fff}
.p-sec--green .p-sub{color:rgba(255,255,255,.85)}
.p-final{display:grid;grid-template-columns:1fr .95fr;gap:clamp(32px,5vw,80px);align-items:center}
.p-form{display:grid;gap:14px;padding:clamp(24px,3vw,36px);border-radius:28px;background:#fff;box-shadow:0 30px 60px rgba(0,0,0,.18)}
.p-form label{display:grid;gap:6px;color:var(--pg-ink-2);font-size:.9rem}
.p-form input[type="text"],.p-form input:not([type]),.p-form input[type="tel"]{font:inherit;font-size:1.02rem;color:var(--pg-ink);background:var(--pg-bg);border:1px solid var(--pg-line);border-radius:14px;padding:14px 16px}
.p-form input:focus{outline:none;border-color:var(--pg);background:#fff}
.p-form input[aria-invalid="true"]{border-color:#E5484D}
.p-form__pick{border:0;margin:0 0 4px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.p-form__pick legend{margin-bottom:8px;color:var(--pg-ink-2);font-size:.9rem;padding:0}
.p-form__pick label{position:relative;cursor:pointer}
.p-form__pick input{position:absolute;opacity:0;pointer-events:none}
.p-form__pick span{display:flex;flex-direction:column;align-items:flex-start;gap:8px;height:100%;padding:14px;border-radius:16px;background:var(--pg-bg);box-shadow:inset 0 0 0 1px var(--pg-line);
  color:var(--pg-ink);font:600 .92rem/1.2 var(--f-body);transition:background .2s,box-shadow .2s,color .2s}
.p-form__pick span i{font-size:1.4rem;color:var(--pg)}
.p-form__pick input:checked + span{background:var(--pg-soft);box-shadow:inset 0 0 0 2px var(--pg)}
.p-form__pick input:focus-visible + span{outline:2px solid var(--pg);outline-offset:2px}
.p-form__done{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--pg-ink)}
.p-form__done[hidden]{display:none}
.p-form__done i{color:var(--pg);font-size:1.4rem}
.p-form__done small{width:100%;color:var(--pg-ink-2)}

/* ---------- Адаптив ---------- */
@media (max-width:999px){
  .p-hero__grid,.p-works,.p-kit,.p-final{grid-template-columns:minmax(0,1fr)}
  .p-cards{grid-template-columns:1fr 1fr}
  .p-steps,.p-trust{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p-dev{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:640px){
  .p-switch{display:flex;width:100%}
  .p-switch button{flex:1;justify-content:center;padding:12px 10px}
  .p-cards{grid-template-columns:1fr}
  .p-card--hero,.p-cards .p-card:last-child{grid-column:auto}
  .p-card{min-height:0}
  .p-dev{grid-template-columns:repeat(2,1fr)}
  .p-steps{grid-template-columns:1fr}
  .p-form__pick{grid-template-columns:1fr}
  .p-form__pick span{flex-direction:row;align-items:center}
  .p-trust b{font-size:26px;white-space:normal}
  .p-trust{gap:22px 16px}
}
@media (prefers-reduced-motion:reduce){
  .reveal,.p-card,.p-switch__pill{transition:none}
  .p-hero__grid{animation:none}
}
/* hover-gate: зсуви при наведенні — лише з мишею (06.10) */

/* 20.10.2026 (Віктор: «мені подобається»): перший екран і кнопки — у стилі «Головної» й «Про нас» (відстань між рядками ≥1.12: інакше «Й» і «Ї» великими налазять на рядок вище):
   заголовок великими літерами шрифтом бренду, кнопки зі «зрізаними кутами» замість «пігулок» (зелений колір сторінки лишається) */
.p-hero h1,.p-hero .p-h1{font-family:var(--f-head);font-weight:800;text-transform:uppercase;letter-spacing:-.025em;line-height:1.12;font-size:clamp(34px,4.6vw,68px)}
.p-btn{--c:12px;border-radius:0;padding:1.05em 1.7em;font:700 1.02rem/1 var(--f-display);letter-spacing:.04em;text-transform:uppercase;box-shadow:none;
  clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c))}
@media (hover:hover) and (pointer:fine){.p-btn:hover{box-shadow:none}}
