/* /dizaineram/ — новый дизайн (06.10.2026). Сборщик tools/build-partner-pages.py, макет design-mockups/dizaineram-mock.html */
:root{--cu:#C8763C}
.dz .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)}

/* 1. герой: видео + «ваш клиент» */
.hero{position:relative;min-height:min(100vh,940px);display:flex;align-items:flex-end;overflow:hidden;background:#0b0705}
.hero video,.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,7,5,.92),rgba(11,7,5,.55) 55%,rgba(11,7,5,.2)),linear-gradient(180deg,transparent 60%,#0b0705)}
.hero .ui-wrap{position:relative;z-index:1;width:100%;padding:130px 20px 64px;display:grid;grid-template-columns:1.2fr .8fr;gap:50px;align-items:end}
.h1{font:200 clamp(48px,7.2vw,120px)/.95 Unbounded!important;letter-spacing:-.045em;color:#F5ECE2;margin:22px 0 0}
.h1 em{display:block;font-style:normal;font-weight:300;color:var(--cu)}
.hero p{max-width:560px;margin-top:24px;font:300 18px/1.6 Onest;color:#E9DFD3}
.hero .ui-actions{margin-top:28px}
.box{justify-self:end;max-width:340px;padding:24px;border-radius:24px;background:rgba(15,10,8,.7);border:1px solid rgba(200,118,60,.4);backdrop-filter:blur(8px)}
.box b{display:block;font:300 20px/1.3 Unbounded;color:#F5ECE2}
.box p{margin:10px 0 0;font:14px/1.6 Onest;color:#CFC3B4}
.swatch{display:flex;gap:6px;margin-top:16px}
.swatch i{width:30px;height:30px;border-radius:50%;box-shadow:0 0 0 2px rgba(15,10,8,.8);animation:sw 4s ease-in-out infinite}
.swatch i:nth-child(2){animation-delay:.3s}.swatch i:nth-child(3){animation-delay:.6s}.swatch i:nth-child(4){animation-delay:.9s}.swatch i:nth-child(5){animation-delay:1.2s}
@keyframes sw{50%{transform:translateY(-6px)}}

/* 2. договор — документ с подсветкой пунктов */
.ct{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-top:50px}
.paper{position:relative;border-radius:18px;background:#F6EFE5;color:#1B120C;padding:44px 44px 40px;box-shadow:0 40px 90px rgba(0,0,0,.5);transform:rotate(-1.5deg)}
.paper h4{margin:0;font:400 12px Onest;letter-spacing:.25em;text-transform:uppercase;color:#A35A24}
.paper h3{margin:10px 0 24px;font:300 22px Unbounded!important;color:#1B120C}
.cl{padding:14px 16px;margin:0 -16px;border-radius:12px;transition:background .4s}
.cl b{display:block;font:500 15px Onest;color:#1B120C}.cl span{display:block;margin-top:4px;font:14px/1.55 Onest;color:#4A3A2E}
.cl.on{background:rgba(200,118,60,.16)}
.cl i{font-style:normal;color:#A35A24;margin-right:8px}
.stamp{position:absolute;right:30px;bottom:30px;width:110px;height:110px;border-radius:50%;border:3px solid rgba(181,101,44,.75);display:grid;place-items:center;text-align:center;font:500 11px/1.25 Onest;letter-spacing:.12em;text-transform:uppercase;color:rgba(181,101,44,.85);transform:rotate(-14deg) scale(1.6);opacity:0;transition:all .5s cubic-bezier(.3,1.6,.5,1)}
.paper.done .stamp{transform:rotate(-14deg) scale(1);opacity:1}
.ct-tx .lead{margin-top:20px;font:300 18px/1.65 Onest;color:var(--ui-nav);max-width:520px}
.ct-tx .dl{display:flex;gap:10px;margin-top:26px}

/* 3. калькулятор комиссии */
.com{margin-top:50px;border-radius:30px;padding:46px;background:linear-gradient(150deg,rgba(200,118,60,.16),var(--ui-card) 55%);border:1px solid rgba(200,118,60,.35);display:grid;grid-template-columns:1.1fr 1fr;gap:50px;align-items:center}
.com label{display:flex;justify-content:space-between;font:15px Onest;color:var(--ui-nav)}
.com label b{font:300 24px Unbounded;color:var(--ui-strong)}
.rng{width:100%;-webkit-appearance:none;appearance:none;height:4px;border-radius:4px;background:var(--ui-line);margin-top:20px}
.rng::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:#fff;border:6px solid var(--cu);cursor:pointer}
.rng::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:6px solid var(--cu);cursor:pointer}
.pres{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.pres button{padding:10px 14px;border-radius:999px;border:1px solid var(--ui-line);background:var(--ui-field);font:13px Onest;color:var(--ui-nav);cursor:pointer}
.pres button:hover{border-color:var(--cu)}
.out{text-align:right}
.out .k{color:#F0B582}
.out .big{font:200 clamp(54px,6vw,100px)/1 Unbounded;letter-spacing:-.05em;background:linear-gradient(180deg,#F0B582,#C8763C 60%,#8E4E22);-webkit-background-clip:text;background-clip:text;color:transparent;margin-top:10px;white-space:nowrap}
.out p{margin:12px 0 0;font:14px/1.6 Onest;color:var(--ui-nav)}
.ticks{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px;font:14px Onest;color:var(--ui-text)}
.ticks span::before{content:"✓";color:var(--cu);margin-right:8px}

/* 4. почему — 6 карточек с фото-фоном при наведении */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:50px;background:var(--ui-line);border:1px solid var(--ui-line);border-radius:28px;overflow:hidden}
.why>div{position:relative;background:var(--ui-page);padding:34px 30px;min-height:230px;overflow:hidden}
.why>div::before{content:"";position:absolute;inset:0;background:var(--bg) center/cover;opacity:0;transform:scale(1.08);transition:all .6s}
.why>div::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,7,5,.55),rgba(11,7,5,.92));opacity:0;transition:opacity .6s}
.why>div:hover::before{opacity:1;transform:none}.why>div:hover::after{opacity:1}
.why>div>*{position:relative;z-index:1;transition:color .4s}
.why>div:hover b,.why>div:hover p{color:#F5ECE2}
.why i{font:200 15px Unbounded;font-style:normal;color:var(--cu)}
.why b{display:block;font:300 21px/1.25 Unbounded;color:var(--ui-strong);margin:16px 0 10px}
.why p{font:300 15px/1.65 Onest;color:var(--ui-nav);margin:0}

/* 5. путь проекта — горизонтальная лента с «2 часа» */
.path{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:56px}
.ps{position:relative;padding:24px 20px;border-radius:22px;background:var(--ui-card);border:1px solid var(--ui-line);min-height:210px}
.ps.hl{background:linear-gradient(160deg,#C8763C,#8E4E22);border-color:transparent}
.ps.hl b,.ps.hl p,.ps.hl i{color:#fff!important}
.ps i{font:200 34px/1 Unbounded;font-style:normal;color:var(--cu)}
.ps b{display:block;font:300 18px/1.25 Unbounded;color:var(--ui-strong);margin:18px 0 8px}
.ps p{font:300 14px/1.55 Onest;color:var(--ui-nav);margin:0}

/* 6. для каких проектов */
.proj{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:50px}
.proj div{position:relative;aspect-ratio:3/4;border-radius:24px;overflow:hidden;background:#140D09}
.proj img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s}
.proj div:hover img{transform:scale(1.05)}
.proj div::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(11,7,5,.9))}
.proj span{position:absolute;left:22px;right:22px;bottom:22px;z-index:1;font:300 22px/1.2 Unbounded;color:#F5ECE2}

/* 7. заявка */
.apply{margin-top:150px;position:relative;overflow:hidden;background:#0b0705}
.apply>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.25}
.apply .ui-wrap{position:relative;padding:120px 20px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.apply p.lead{margin-top:20px;font:300 18px/1.65 Onest;color:#CFC3B4;max-width:500px}
.form{padding:34px;border-radius:26px;background:rgba(23,16,12,.92);border:1px solid rgba(200,118,60,.35)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form input{width:100%;box-sizing:border-box;margin-top:12px;padding:16px 18px;border-radius:14px;border:1px solid rgba(200,118,60,.3);background:rgba(255,240,225,.05);font:15px Onest;color:#F5ECE2;outline:none}
.form input:focus{border-color:var(--cu)}
.form input::placeholder{color:#8F7F70}
.form button{width:100%;margin-top:18px}
.form small{display:block;margin-top:14px;font:12.5px/1.5 Onest;color:#A08E7C;text-align:center}
.form small a{color:#F0B582}

html[data-theme="light"] .why>div{background:#fff}
html[data-theme="light"] .ps:not(.hl){background:#fff}
@media(max-width:900px){
 .hero .ui-wrap{grid-template-columns:1fr}.box{justify-self:start}
 .ct,.com,.apply .ui-wrap{grid-template-columns:1fr}.paper{padding:30px 26px;transform:none}.com{padding:28px}.out{text-align:left}
 .why{grid-template-columns:1fr}.path{grid-template-columns:1fr 1fr}.proj{grid-template-columns:1fr 1fr}.form .row{grid-template-columns:1fr}.sec{padding-top:96px}
}
.pt-faq{padding-top:120px}
@media(max-width:900px){.pt-faq{padding-top:90px}}
@media(max-width:600px){.h2{font-size:30px!important;overflow-wrap:anywhere}.h1{font-size:44px!important}.proj span{font-size:16px!important;left:14px;right:14px;bottom:14px}}
.dz h1.k{font:400 12px Onest,sans-serif!important;letter-spacing:.3em!important;text-transform:uppercase!important;color:var(--cu)!important}
.df-status{min-height:20px;margin:12px 0 0;text-align:center;font:14px Onest;color:#CFC3B4}