/* /myagkie-izgolovya-i-paneli/ — изголовья и панели (08.10.2026). Сборщик tools/build-izgolovya-page.py, макет design-mockups/izgolovya-mock.html */
:root{--cu:#C8763C}
.iz .ui-wrap{max-width:1400px}
.k{font:12px Onest;letter-spacing:.3em;text-transform:uppercase;color:var(--cu)}
.h2{font:200 clamp(34px,4.6vw,72px)/1.05 Unbounded!important;letter-spacing:-.03em;color:var(--ui-strong);margin:18px 0 0;max-width:1150px}
.h2 em{font-style:normal;font-weight:300;color:var(--cu)}
.sec{padding-top:140px}
.dk{--ui-page:#0F0A08;--ui-card:#17100C;--ui-strong:#F5ECE2;--ui-text:#E9DFD3;--ui-nav:#CFC3B4;--ui-muted:#A08E7C;--ui-line:rgba(200,118,60,.18);--ui-field:rgba(255,240,225,.06);color:var(--ui-text)}
.iz p a{color:var(--cu);border-bottom:1px solid rgba(200,118,60,.4)}

/* 1. первый экран: текст + наша работа */
.ih{background:#0b0705;padding:140px 0 70px}
.ih .ui-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
.h1{font:200 clamp(40px,5.2vw,88px)/1 Unbounded!important;letter-spacing:-.04em;color:#F5ECE2;margin:20px 0 0}
.h1 em{display:block;font-style:normal;font-weight:300;color:var(--cu)}
.h1 small{display:block;margin-top:20px;font:300 clamp(16px,1.4vw,20px)/1.45 Onest;letter-spacing:0;color:#E3D7C9}
.ih p.ld{max-width:600px;margin:22px 0 0;font:300 17px/1.65 Onest;color:#CFC3B4}
.ih .ui-actions{margin-top:30px}
.ticks{display:flex;gap:22px;flex-wrap:wrap;margin-top:26px;font:14px Onest;color:#F5ECE2}
.ticks span::before{content:"✓";color:var(--cu);margin-right:8px}
.ih figure{margin:0;position:relative;border-radius:28px;overflow:hidden;aspect-ratio:4/5;background:#140D09}
.ih figure img{width:100%;height:100%;object-fit:cover;display:block}
.ih figcaption,.duo figcaption{position:absolute;left:18px;bottom:16px;padding:8px 14px;border-radius:999px;background:rgba(15,10,8,.72);font:12px Onest;letter-spacing:.12em;text-transform:uppercase;color:#F5ECE2}

/* 2. изголовье / панели */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:50px}
.duo>div{border-radius:28px;overflow:hidden;background:var(--ui-card);border:1px solid var(--ui-line);display:flex;flex-direction:column}
.duo figure{margin:0;position:relative;aspect-ratio:4/3;overflow:hidden}
.duo figure img{width:100%;height:100%;object-fit:cover;display:block}
.duo .tx{padding:32px 32px 36px}
.duo .tx b{display:block;font:300 26px/1.2 Unbounded;color:var(--ui-strong)}
.duo .tx p{margin:14px 0 0;font:300 15.5px/1.7 Onest;color:var(--ui-nav)}
.where{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.where span{padding:9px 14px;border-radius:999px;background:var(--ui-field);border:1px solid var(--ui-line);font:13.5px Onest;color:var(--ui-text)}

/* 3. формы */
.forms{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:50px}
.forms>div{border-radius:24px;padding:26px 22px;background:var(--ui-card);border:1px solid var(--ui-line)}
.forms svg{width:100%;height:84px;fill:none;stroke:var(--cu);stroke-width:1.6;stroke-linejoin:round}
.forms svg circle{fill:var(--cu);stroke:none}
.forms b{display:block;margin-top:18px;font:300 18px/1.25 Unbounded;color:var(--ui-strong)}
.forms p{margin:10px 0 0;font:300 14px/1.6 Onest;color:var(--ui-nav)}

/* 4. ткань + цена */
.tp{display:grid;grid-template-columns:1.2fr .8fr;gap:20px;margin-top:50px}
.tp>div{border-radius:28px;padding:38px 36px;background:var(--ui-card);border:1px solid var(--ui-line)}
.tp>div:first-child{display:flex;flex-direction:column;justify-content:center}
.tp p{margin:0;font:300 16px/1.75 Onest;color:var(--ui-nav)}
.tp .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.tp .chips span{padding:9px 14px;border-radius:999px;background:var(--ui-field);border:1px solid var(--ui-line);font:13.5px Onest;color:var(--ui-text)}
.pr{background:linear-gradient(150deg,rgba(200,118,60,.22),var(--ui-card) 62%)!important;display:flex;flex-direction:column}
.pr i{font:12px Onest;font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:var(--cu)}
.pr b{display:block;margin-top:22px;font:200 clamp(48px,4.6vw,76px)/1 Unbounded;letter-spacing:-.04em;color:var(--ui-strong);white-space:nowrap}
.pr b small{font:300 16px Onest;letter-spacing:0;color:var(--ui-nav);margin-right:8px}
.pr p{margin-top:18px!important;font-size:15px!important}
.pr .ui-actions{margin-top:auto;padding-top:24px}

/* 5. шаги + монтаж */
.how{display:grid;grid-template-columns:.85fr 1.15fr;gap:50px;align-items:center;margin-top:50px}
.how figure{margin:0;border-radius:28px;overflow:hidden;aspect-ratio:4/5;background:#140D09;position:relative}
.how figure img{width:100%;height:100%;object-fit:cover;display:block}
.how ol{list-style:none;margin:0;padding:0;counter-reset:s}
.how li{position:relative;padding:22px 0 22px 64px;border-top:1px solid var(--ui-line);counter-increment:s}
.how li::before{content:"0" counter(s);position:absolute;left:0;top:20px;font:200 28px Unbounded;color:var(--cu)}
.how li b{display:block;font:300 20px/1.25 Unbounded;color:var(--ui-strong)}
.how li p{margin:6px 0 0;font:300 15px/1.6 Onest;color:var(--ui-nav)}

/* 6. кровать целиком */
.bed{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;margin-top:120px;padding:34px 38px;border-radius:26px;border:1px dashed rgba(200,118,60,.5)}
.bed p{margin:0;max-width:820px;font:300 16px/1.7 Onest;color:var(--ui-nav)}
.iz-faq{padding-top:120px}

/* финал */
.fin{position:relative;overflow:hidden;background:#0b0705;margin-top:140px}
.fin>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32}
.fin .ui-wrap{position:relative;padding:130px 20px;text-align:center}
.fin .h2{margin:18px auto 0}
.fin p{margin:20px auto 0;max-width:560px;font:300 18px/1.6 Onest;color:#CFC3B4}
.fin .ui-actions{justify-content:center;margin-top:32px}

html[data-theme="light"] .duo>div,html[data-theme="light"] .forms>div,html[data-theme="light"] .tp>div{box-shadow:0 10px 30px rgba(60,35,20,.06)}

@media(max-width:1100px){.forms{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){
 .ih{padding:110px 0 50px}.ih .ui-wrap,.duo,.tp,.how{grid-template-columns:1fr}.ih figure{aspect-ratio:4/3}
 .forms{grid-template-columns:repeat(2,minmax(0,1fr))}.how figure{aspect-ratio:4/3}
 .sec{padding-top:96px}.iz-faq{padding-top:80px}.bed{margin-top:80px;padding:26px}
}
@media(max-width:600px){.h2{font-size:30px!important;overflow-wrap:anywhere}.h1{font-size:38px!important}.forms{gap:10px}.forms>div{padding:18px 14px}.forms svg{height:56px}.forms b{font-size:15px}.forms p{font-size:13px}.duo .tx,.tp>div{padding:26px}}