:root{
  --paper:#F4F1E9; --paper2:#ECE8DC; --ink:#15180F; --ink2:#4E5346; --ink3:#8B9082;
  --pine:#17301F; --pine2:#224731; --gold:#A8842C; --gold2:#C9A961;
  --line:rgba(21,24,15,.12); --line2:rgba(21,24,15,.2);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:Manrope,system-ui,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:Onest,system-ui,sans-serif;letter-spacing:-.03em;line-height:1.02;font-weight:800}
a{color:inherit;text-decoration:none}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
.k{font-size:11px;font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}

nav{position:fixed;top:0;left:0;right:0;z-index:90;transition:.3s}
nav.sc{background:rgba(244,241,233,.88);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nvi{display:flex;align-items:center;height:78px;gap:36px}
.logo{font-family:Onest;font-weight:900;font-size:17px;letter-spacing:.14em}
.logo b{color:var(--gold)}
.nvl{display:flex;gap:30px;margin-left:auto;font-size:13.5px;font-weight:600;color:var(--ink2)}
.nvl a{position:relative;padding:4px 0}
.nvl a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--gold);transition:.25s}
.nvl a:hover::after{right:0}
.cta{margin-left:6px;background:var(--ink);color:var(--paper);font-size:13px;font-weight:700;
  padding:12px 22px;border-radius:999px;transition:.25s}
.cta:hover{background:var(--pine2)}
@media(max-width:960px){.nvl{display:none}}

.hero{position:relative;padding:150px 0 0;overflow:hidden}
.hero .bgnum{position:absolute;right:-40px;top:40px;font-family:Onest;font-weight:900;
  font-size:min(44vw,540px);line-height:.8;color:transparent;-webkit-text-stroke:1.5px rgba(21,24,15,.07);
  letter-spacing:-.05em;user-select:none;pointer-events:none}
.hero h1{font-size:clamp(44px,8.2vw,118px);text-transform:uppercase;letter-spacing:-.035em}
.hero h1 .l2{display:block;color:transparent;-webkit-text-stroke:2px var(--ink)}
.hero h1 .l3{display:block;color:var(--pine)}
.hsub{display:grid;grid-template-columns:1.2fr .8fr;gap:44px;align-items:end;margin-top:34px}
@media(max-width:960px){.hsub{grid-template-columns:1fr}}
.hsub p{font-size:17px;color:var(--ink2);max-width:560px}
.hbtns{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.b1{background:var(--gold);color:#fff;font-weight:700;font-size:14px;padding:15px 28px;border-radius:999px;transition:.25s}
.b1:hover{background:#8F6E20;transform:translateY(-1px)}
.b2{border:1.5px solid var(--line2);font-weight:700;font-size:14px;padding:14px 26px;border-radius:999px;color:var(--ink2);transition:.25s}
.b2:hover{border-color:var(--ink);color:var(--ink)}
.hstats{display:flex;flex-wrap:wrap;gap:30px 38px;margin-top:40px;padding-top:26px;border-top:1px solid var(--line)}
/* классика: текст слева, фото справа */
.hgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
@media(max-width:960px){.hgrid{grid-template-columns:1fr;gap:34px}}
.hpic{position:relative;border-radius:30px;overflow:hidden;aspect-ratio:4/4.8;
  background:linear-gradient(160deg,#E5DECB 0%,#CFC3A2 55%,#BCAE88 100%);
  box-shadow:0 44px 90px -44px rgba(23,48,31,.4)}
.hpic::after{content:'{{ФОТО: витрина / торговое пространство}}';position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;font-size:13px;font-weight:600;color:#8A7F63;text-align:center;padding:20px}
/* слот с реальным фото: прячем плейсхолдер-подпись, накрываем картинкой */
.hpic.img::after,.vph.img::after{content:none}
.hpic.img,.vph.img{background-size:cover;background-position:center}
.hpic.img::before,.vph.img::before{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(21,24,15,0) 55%,rgba(21,24,15,.28))}
.hpic .cap{position:absolute;left:20px;bottom:18px;z-index:1;font-size:11px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:#F2EDDD;background:rgba(21,24,15,.55);
  backdrop-filter:blur(6px);padding:9px 16px;border-radius:999px}
@media(max-width:960px){.hpic{aspect-ratio:4/3}}
.hst b{font-family:Onest;font-weight:900;font-size:29px;letter-spacing:-.02em;line-height:1.05;display:block;color:var(--ink)}
.hst b i{font-style:normal;color:var(--gold);font-size:24px;vertical-align:top}
.hst span{font-size:12px;font-weight:600;color:var(--ink3);letter-spacing:.04em}
.hband{margin-top:56px;border-top:1px solid var(--line);background:var(--paper2)}
.hband .wrap{display:flex;gap:0;overflow:hidden}
.hb{flex:1;padding:22px 26px 22px 0;margin-right:26px;border-right:1px solid var(--line);font-size:13px;
  font-weight:600;color:var(--ink2);display:flex;gap:10px;align-items:center;white-space:nowrap}
.hb:last-child{border-right:none;margin-right:0}
.hb em{font-style:normal;color:var(--gold);font-weight:800}
@media(max-width:960px){.hband .wrap{flex-wrap:wrap}.hb{border:none;white-space:normal}}

section{padding:110px 0}
.shead{display:flex;align-items:baseline;justify-content:space-between;gap:30px;margin-bottom:58px;flex-wrap:wrap}
.shead h2{font-size:clamp(32px,4.4vw,58px);max-width:720px;text-transform:uppercase}
.shead h2 em{font-style:normal;color:var(--pine)}
.shead .side{font-size:14px;color:var(--ink2);max-width:320px}

.about{background:var(--pine);color:#E9E4D2;position:relative;overflow:hidden}
.about::before{content:'FIRAT';position:absolute;left:-20px;bottom:-70px;font-family:Onest;font-weight:900;
  font-size:min(30vw,340px);color:rgba(255,255,255,.03);letter-spacing:-.04em}
.about .k{color:var(--gold2)}
.about h2{color:#F5F1E2}
.about .shead .side{color:rgba(233,228,210,.75)}
.agrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.12);border-radius:24px;overflow:hidden;position:relative}
@media(max-width:960px){.agrid{grid-template-columns:1fr 1fr}}
.ac{background:var(--pine);padding:30px 26px;transition:.3s}
.ac:hover{background:var(--pine2)}
.ac b{font-family:Onest;font-weight:800;font-size:17px;display:block;margin:16px 0 8px;color:#F5F1E2}
.ac p{font-size:13.5px;color:rgba(233,228,210,.72)}
.ac .ic{width:42px;height:42px;border-radius:12px;border:1.5px solid rgba(201,169,97,.5);
  display:flex;align-items:center;justify-content:center;color:var(--gold2)}

.cat{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:74px 0;
  border-top:1px solid var(--line);position:relative}
.cat:first-of-type{border-top:none;padding-top:0}
@media(max-width:960px){.cat{grid-template-columns:1fr;gap:30px}}
.cat .wnum{position:absolute;top:38px;right:0;font-family:Onest;font-weight:900;font-size:150px;
  line-height:1;color:transparent;-webkit-text-stroke:1.2px rgba(21,24,15,.1);letter-spacing:-.04em}
.cat.alt .wnum{right:auto;left:0}
.cat.alt .txt{order:2}
.cat.alt .vis{order:1}
@media(max-width:960px){.cat.alt .txt{order:1}.cat.alt .vis{order:2}.cat .wnum{font-size:90px;top:20px}}
.cat h3{font-size:clamp(30px,3.4vw,46px);text-transform:uppercase;margin:12px 0 14px}
.cat .desc{color:var(--ink2);max-width:480px}
.pos{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0}
.pos span{font-size:13px;font-weight:600;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:9px 15px;color:var(--ink2);transition:.2s}
.pos span:hover{border-color:var(--gold);color:var(--ink)}
.trm{border-left:2.5px solid var(--gold);padding:4px 0 4px 18px;display:grid;gap:9px}
.trm div{font-size:14px;color:var(--ink2)}
.trm b{color:var(--ink);font-weight:800;font-family:Onest;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;display:block;margin-bottom:1px}
.vis{position:relative}
.vph{aspect-ratio:4/4.7;border-radius:26px;overflow:hidden;position:relative;
  background:linear-gradient(160deg,#E5DFCC,#CFC5A6);box-shadow:0 40px 80px -40px rgba(23,48,31,.35)}
.vph::after{content:attr(data-ph);position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-size:12.5px;font-weight:600;color:#8A7F63;text-align:center;padding:20px}
.vtag{position:absolute;left:18px;bottom:18px;background:rgba(21,24,15,.85);color:#F0EBDB;
  backdrop-filter:blur(8px);border-radius:999px;padding:10px 18px;font-size:12px;font-weight:700;letter-spacing:.08em}

.sbp{background:var(--ink);color:#EDE8D8;border-radius:36px;overflow:hidden;position:relative}
.sbp .in{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;padding:78px 70px;align-items:center}
@media(max-width:960px){.sbp .in{grid-template-columns:1fr;padding:44px 28px}}
.sbp::before{content:'';position:absolute;right:-160px;top:-160px;width:480px;height:480px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(168,132,44,.25),transparent 70%)}
.sbp .k{color:var(--gold2)}
.sbp h2{color:#F7F2E2;font-size:clamp(30px,3.8vw,50px);text-transform:uppercase;margin:12px 0 16px}
.sbp p{color:rgba(237,232,216,.78);max-width:520px;font-size:15.5px}
.rail{display:grid;gap:0;margin-top:30px;border-top:1px solid rgba(255,255,255,.14)}
.rl{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.14);align-items:baseline}
.rl b{font-family:Onest;font-weight:900;color:var(--gold2);font-size:15px;flex:none;width:30px}
.rl span{font-size:14px;color:rgba(237,232,216,.85)}
.crd{display:flex;gap:8px;margin-top:22px;flex-wrap:wrap}
.crd span{font-size:11.5px;font-weight:800;letter-spacing:.08em;border:1px solid rgba(255,255,255,.25);
  border-radius:9px;padding:8px 14px}
.phw{display:flex;justify-content:center}
.phone{width:264px;aspect-ratio:9/19;border-radius:38px;background:#0B0D08;border:1.5px solid rgba(255,255,255,.18);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7), inset 0 0 0 6px #0B0D08;padding:14px 12px;display:flex;flex-direction:column;gap:10px;
  transform:rotate(4deg)}
.phone .pill{width:74px;height:20px;border-radius:999px;background:#000;margin:0 auto}
.psc{flex:1;border-radius:22px;background:linear-gradient(180deg,#141810,#0E110B);padding:16px 14px;display:flex;flex-direction:column;gap:10px}
.psc .bnk{font-size:10px;font-weight:700;color:#9BA38F;letter-spacing:.1em}
.psc .amt{font-family:Onest;font-weight:900;font-size:26px;color:#F2EDDC;letter-spacing:-.02em}
.psc .sub{font-size:10.5px;color:#8B9082}
.psc .row{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:12px;
  padding:10px 12px;font-size:10.5px;color:#C9CDBD;display:flex;justify-content:space-between}
.psc .ok{margin-top:auto;background:var(--gold);border-radius:12px;text-align:center;padding:12px;
  font-family:Onest;font-weight:800;font-size:12px;color:#15180F}

.mq{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;background:#fff}
.mtrack{display:flex;gap:56px;width:max-content;animation:mv 28s linear infinite}
.mq:hover .mtrack{animation-play-state:paused}
@keyframes mv{to{transform:translateX(-50%)}}
.mi{display:flex;align-items:center;gap:12px;font-family:Onest;font-weight:800;font-size:15px;color:var(--ink2);white-space:nowrap}
.mi .dot{width:8px;height:8px;border-radius:99px;background:var(--gold)}

.det{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:24px;overflow:hidden}
@media(max-width:960px){.det{grid-template-columns:1fr}}
.dc{background:#fff;padding:30px}
.dc h4{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.dc p{font-size:13.5px;color:var(--ink2);margin-bottom:8px;word-break:break-word}
.dc b{color:var(--ink);font-weight:700}
footer{padding:36px 0 46px;font-size:13px;color:var(--ink3)}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
@media(prefers-reduced-motion:reduce){.rv{transition:none}.mtrack{animation:none}}