:root{
  --bg:#f5f3ec; --card:#fffdf8; --ink:#171a1f; --mut:#5d656c;
  --line:#e2dccc; --line2:#d3ccba;
  --green:#0e8a5f; --green-soft:#e2f2ea; --yellow:#f2c94c;
  --fd:'Unbounded',sans-serif; --fb:'Golos Text',sans-serif; --fm:'JetBrains Mono',monospace;
  --cut:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--fb);font-size:16px;line-height:1.6}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
section{scroll-margin-top:90px}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.mono{font-family:var(--fm)}
::selection{background:var(--green);color:#fff}
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
[data-reveal].on{opacity:1;transform:none}

.ruler{height:12px;border-bottom:1px solid var(--line2);
  background-image:repeating-linear-gradient(90deg,var(--line2) 0 1px,transparent 1px 12px),
                   repeating-linear-gradient(90deg,#b9b09a 0 1px,transparent 1px 60px);
  background-size:auto 4px,auto 9px;background-repeat:repeat-x;background-position:left bottom}

header{position:sticky;top:0;z-index:50;background:rgba(245,243,236,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.hrow{display:flex;align-items:center;gap:24px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--fd);font-weight:800;font-size:16px;letter-spacing:.03em}
.brand svg{width:24px;height:24px;flex:none}
.brand em{font-style:normal;color:var(--green)}
.brand .tag{font-family:var(--fm);font-weight:400;font-size:10px;letter-spacing:.14em;color:var(--mut);text-transform:uppercase;margin-left:4px}
nav{margin-left:auto;display:flex;gap:24px}
nav a{font-size:14px;font-weight:500;color:var(--mut);transition:color .2s}
nav a:hover{color:var(--green)}
.hphone{font-family:var(--fm);font-size:13.5px;font-weight:600;margin-left:auto;white-space:nowrap}
.hphone:hover{color:var(--green)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--fm);font-size:12.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;padding:13px 22px;border:0;cursor:pointer;clip-path:var(--cut);transition:transform .2s,background .2s,color .2s}
.btn-solid{background:var(--ink);color:#fdfcf8}
.btn-solid:hover{background:var(--green);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-ghost:hover{color:var(--green);box-shadow:inset 0 0 0 1.5px var(--green);transform:translateY(-2px)}
.hcta{white-space:nowrap}
@media(max-width:900px){nav{display:none}}
@media(max-width:640px){.hcta{display:none}}

.hero{padding:64px 0 72px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(0deg,transparent 0 119px,rgba(14,138,95,.06) 119px 120px),
                   repeating-linear-gradient(90deg,transparent 0 119px,rgba(14,138,95,.06) 119px 120px)}
.hgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;position:relative}
.kicker{font-family:var(--fm);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--green);display:flex;align-items:center;gap:12px;margin-bottom:20px}
.kicker::before{content:"";width:30px;height:1.5px;background:var(--green)}
h1{font-family:var(--fd);font-weight:800;font-size:clamp(28px,4.4vw,50px);line-height:1.12}
.hsub{margin:20px 0 22px;color:var(--mut);font-size:17px;max-width:520px}
.facts{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px}
.fact{font-family:var(--fm);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;padding:8px 13px;background:var(--green-soft);color:var(--green);font-weight:600}
.hbtns{display:flex;gap:12px;flex-wrap:wrap}
.hvisual{position:relative;height:400px}
.photo{position:absolute;background:#fff;padding:10px 10px 34px;border:1px solid var(--line);box-shadow:0 18px 44px rgba(23,26,31,.12);transition:transform .4s ease}
.photo img{width:100%;height:100%;object-fit:cover}
.photo figcaption{font-family:var(--fm);font-size:10px;letter-spacing:.12em;color:var(--mut);text-transform:uppercase;padding-top:9px;text-align:center}
.ph1{width:66%;height:70%;top:0;left:0;transform:rotate(-3deg);z-index:2}
.ph2{width:56%;height:56%;bottom:0;right:0;transform:rotate(2.5deg)}
.photo:hover{transform:rotate(0) scale(1.02);z-index:3}
.tagchip{position:absolute;z-index:4;top:56%;left:-14px;background:var(--yellow);color:#221c05;font-family:var(--fm);
  font-size:11px;font-weight:600;letter-spacing:.1em;padding:9px 14px;transform:rotate(-4deg);box-shadow:0 8px 18px rgba(23,26,31,.15)}
@media(max-width:860px){.hgrid{grid-template-columns:1fr}.hvisual{height:340px;max-width:480px}}

.shead{margin-bottom:34px}
.sid{font-family:var(--fm);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--green);display:flex;align-items:center;gap:14px;margin-bottom:12px}
.sid::after{content:"";flex:1;max-width:180px;height:1px;background:var(--line2)}
h2{font-family:var(--fd);font-weight:800;font-size:clamp(22px,3vw,34px);line-height:1.15}
.lead{color:var(--mut);margin-top:12px;max-width:620px}

.cutline{overflow:hidden;height:22px}
.cutline svg{width:100%;height:22px}
.cutline .cl{stroke:var(--green);stroke-width:1.5;fill:none;stroke-dasharray:5 8;opacity:.5;animation:dash 22s linear infinite}
@keyframes dash{to{stroke-dashoffset:-520}}

.cats{padding:64px 0 20px}
.sliderbox{position:relative}
.slider{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 18px;cursor:grab;scrollbar-width:none}
.slider::-webkit-scrollbar{display:none}
.slider.drag{cursor:grabbing}
.cat-card{flex:0 0 262px;scroll-snap-align:start;background:var(--card);border:1px solid var(--line);padding:24px 22px;
  display:flex;flex-direction:column;gap:10px;text-align:left;transition:transform .25s,border-color .25s,box-shadow .25s;user-select:none}
.cat-card:hover{transform:translateY(-5px);border-color:var(--green);box-shadow:0 14px 30px rgba(23,26,31,.08)}
.cat-ic{width:46px;height:46px;display:grid;place-items:center;background:var(--green-soft);font-size:22px;clip-path:var(--cut)}
.cat-name{font-family:var(--fd);font-weight:700;font-size:16px;line-height:1.3}
.cat-desc{font-size:13.5px;color:var(--mut);flex:1}
.cat-cta{font-family:var(--fm);font-size:11.5px;letter-spacing:.1em;color:var(--green);font-weight:600}
.snav{display:flex;gap:10px;position:absolute;top:-66px;right:0}
.sbtn{width:44px;height:44px;border:1px solid var(--line2);background:var(--card);color:var(--ink);font-size:17px;cursor:pointer;transition:.2s;display:grid;place-items:center}
.sbtn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
@media(max-width:640px){.snav{position:static;margin-bottom:6px;justify-content:flex-end}}

.cats-products{padding:30px 0 70px}
.cat-block{margin-bottom:52px}
.cat-block:last-child{margin-bottom:0}
.cbhead{display:flex;align-items:baseline;gap:16px;margin-bottom:20px;border-bottom:1px dashed var(--line2);padding-bottom:12px}
.cbhead h3{font-family:var(--fd);font-weight:700;font-size:clamp(17px,2.2vw,23px)}
.cbhead .cnt{font-family:var(--fm);font-size:12px;color:var(--mut);letter-spacing:.08em}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:18px}
.pcard{background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;position:relative;transition:transform .3s ease,box-shadow .3s ease}
.pcard:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(23,26,31,.1)}
.pcard::before{content:"";position:absolute;top:0;right:0;border-top:18px solid var(--bg);border-left:18px solid transparent;transition:.25s;z-index:2}
.pcard:hover::before{border-top-width:28px;border-left-width:28px}
.pimg{position:relative;aspect-ratio:4/3;overflow:hidden;background:#eae6da}
.pimg img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.pcard:hover .pimg img{transform:scale(1.05)}
.psize{position:absolute;left:10px;bottom:10px;font-family:var(--fm);font-size:11px;letter-spacing:.08em;background:rgba(23,26,31,.85);color:#d9f5e8;padding:5px 9px}
.pbadge{position:absolute;top:10px;left:10px;background:var(--yellow);color:#221c05;font-family:var(--fm);font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:5px 9px;transform:rotate(-2deg)}
.pbody{padding:16px 16px 18px;display:flex;flex-direction:column;flex:1}
.ptag{font-family:var(--fm);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--green);font-weight:600;margin-bottom:7px}
.pbody h4{font-size:15.5px;font-weight:600;line-height:1.35;margin-bottom:6px}
.pbody .spec{font-size:13px;color:var(--mut);flex:1;margin-bottom:14px}
.pfoot{display:flex;align-items:center;justify-content:space-between;border-top:1px dashed var(--line);padding-top:13px}
.price{font-family:var(--fm);font-weight:600;font-size:16.5px}
.plinks{display:flex;gap:6px}
.mk{font-family:var(--fm);font-size:9.5px;font-weight:600;letter-spacing:.06em;padding:6px 8px;border:1px solid var(--line2);color:var(--mut);transition:.2s}
.mk:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.mk.wb:hover{background:#cb11ab;border-color:#cb11ab}
.mk.oz:hover{background:#005bff;border-color:#005bff}

.how{background:var(--green-soft);border-block:1px solid #cfe6da}
.how .wrap{display:flex;flex-wrap:wrap;gap:14px 34px;align-items:center;padding-top:26px;padding-bottom:26px}
.how b{font-family:var(--fm);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--green)}
.how span{font-size:14.5px;color:#2c4a3e}
.how span i{font-style:normal;font-family:var(--fm);font-weight:600;color:var(--green);margin-right:7px}

.contacts{padding:76px 0 84px}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ccard{background:var(--card);border:1px solid var(--line);padding:30px 30px 26px}
.ccard h3{font-family:var(--fd);font-weight:700;font-size:17px;margin-bottom:20px}
.bigphone{font-family:var(--fd);font-weight:800;font-size:clamp(22px,2.8vw,32px);display:inline-block;margin-bottom:18px}
.bigphone:hover{color:var(--green)}
.clist{list-style:none;display:grid;gap:12px}
.clist li{display:flex;gap:14px;align-items:baseline;font-size:15px}
.clist .k{font-family:var(--fm);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);width:92px;flex:none}
.clist a{border-bottom:1px dashed transparent;transition:.2s;font-weight:500}
.clist a:hover{color:var(--green);border-color:var(--green)}
.mbtns{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.mbtns .btn{padding:11px 18px;font-size:11.5px}
.req dl{display:grid;grid-template-columns:96px 1fr;gap:9px 14px;font-size:14.5px;margin-top:6px}
.req dt{font-family:var(--fm);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);padding-top:3px}
.req dd b{font-family:var(--fm);font-weight:600}
.req .note{margin-top:18px;padding-top:16px;border-top:1px dashed var(--line);font-size:13.5px;color:var(--mut)}
@media(max-width:760px){.cgrid{grid-template-columns:1fr}}

footer{background:#14161a;color:#c8cdd2}
.flinks{display:flex;flex-wrap:wrap;gap:10px;padding:30px 0;border-bottom:1px solid rgba(255,255,255,.09)}
.flink{font-family:var(--fm);font-size:12px;letter-spacing:.06em;padding:9px 14px;border:1px solid rgba(255,255,255,.18);color:#e6e9eb;transition:.2s}
.flink:hover{background:var(--green);border-color:var(--green);color:#fff;transform:translateY(-2px)}
.fbottom{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:22px 0;
  font-family:var(--fm);font-size:11.5px;letter-spacing:.05em;color:#8b9299}
.fbottom .adminlink{color:#565d64;transition:color .2s;background:none;border:0;font:inherit}
.fbottom .adminlink:hover{color:var(--green)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
  [data-reveal]{opacity:1;transform:none}
}