:root{
  --ink:#07141b; --ink2:#0c212b; --ink3:#12303c;
  --cream:#f4ead8; --muted:rgba(244,234,216,.62);
  --red:#e8502a; --red2:#ff7a45; --amber:#f2a33c;
  --line:rgba(244,234,216,.13);
  --disp:'Unbounded',sans-serif; --body:'Manrope',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--body); color:var(--cream); background:
  radial-gradient(1100px 560px at 85% -5%, rgba(232,80,42,.09), transparent 60%),
  radial-gradient(900px 500px at -10% 40%, rgba(38,84,100,.25), transparent 60%),
  var(--ink);
  overflow-x:hidden; line-height:1.55;
}
::selection{background:var(--red); color:#fff}
img{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer}
h1,h2,h3{font-family:var(--disp); font-weight:800; line-height:1.08; letter-spacing:.3px}
.wrap{width:min(1180px,92%); margin:0 auto}
section{padding:96px 0; position:relative}
.section-top{padding-top:0;}
.kicker{display:inline-block; font-size:11px; font-weight:800; letter-spacing:.32em; text-transform:uppercase; color:var(--red2); margin-bottom:18px}
.kicker::before{content:"— "; color:var(--amber)}
.sec-title{font-size:clamp(30px,4.6vw,52px); margin-bottom:16px}
.sec-sub{color:var(--muted); max-width:560px; font-size:16px}
.noise{position:fixed; inset:0; z-index:70; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
/* ---------- reveal ---------- */
.rv{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.on{opacity:1; transform:none}
.rv .mask{display:block; overflow:hidden}
.rv .mask>span{display:block; transform:translateY(110%); transition:transform .85s cubic-bezier(.2,.75,.15,1) .1s}
.rv.on .mask>span{transform:none}
/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 26px; border-radius:12px;
  font-family:var(--disp); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid transparent; transition:transform .15s ease, box-shadow .25s ease, background .2s, border-color .2s}
.btn:active{transform:translateY(2px) scale(.98)}
.btn--red{background:var(--red); color:#fff; box-shadow:0 10px 28px rgba(232,80,42,.32)}
.btn--red:hover{background:var(--red2); transform:translateY(-2px); box-shadow:0 16px 34px rgba(232,80,42,.42)}
.btn--ghost{border-color:var(--line); color:var(--cream); background:transparent}
.btn--ghost:hover{border-color:var(--red2); color:var(--red2); transform:translateY(-2px)}
.btn[disabled]{opacity:.45; cursor:not-allowed; box-shadow:none}
/* ---------- socials ---------- */
.soc{display:flex; gap:10px; align-items:center}
.ft-soc .soc a{width:40px; height:40px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; color:var(--muted); transition:all .25s cubic-bezier(.2,.7,.2,1); flex:none}
.soc a:hover{border-color:var(--red); background:var(--red); color:#fff; transform:translateY(-3px); box-shadow:0 8px 20px rgba(232,80,42,.4)}
.soc svg, .soc img{width:19px; height:19px; display:block}
.hd .soc a{width:38px; height:38px}
.hd .soc svg, .hd .soc img{width:17px; height:17px}
/* ---------- header ---------- */
header{position:fixed; top:0; left:0; right:0; z-index:60; transition:background .3s, border-color .3s;background: #07141b;border-block: 1px solid var(--line);}
header.scrolled{background:rgba(7,20,27,.86); backdrop-filter:blur(12px); border-color:var(--line)}
.hd{display:flex; align-items:center; gap:34px; padding:16px 0}
.logo{display:flex; align-items:center; gap:12px; font-family:var(--disp); font-weight:900; font-size:17px; letter-spacing:.04em}
.logo-mark{width:108px; height:108px; border-radius:50%; background:#071319; display:grid; place-items:center; color:#fff;flex:none}
.logo small{display:block; font-family:var(--body); font-weight:600; font-size:10px; letter-spacing:.22em; color:var(--muted); text-transform:uppercase}
nav{display:flex; gap:26px; margin-left:auto}
nav a{font-size:13.5px; font-weight:700; letter-spacing:.06em; color:var(--muted); position:relative; padding:6px 0; transition:color .2s}
nav a::after{content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--red); transition:width .3s cubic-bezier(.2,.7,.2,1)}
nav a:hover{color:var(--cream)} nav a:hover::after{width:100%}
.hd-right{display:flex; align-items:center; gap:14px; margin-left:auto;flex-direction: column;}
nav + .hd-right{margin-left:0}
.hd-phone{font-family:var(--disp); font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--amber)}
.cart-btn{position:relative; display:flex; align-items:center; gap:10px; background:var(--ink3); border:1px solid var(--line); color:var(--cream); padding:11px 18px; border-radius:12px; font-weight:800; font-size:13px; transition:border-color .2s, transform .15s}
.cart-btn:hover{border-color:var(--red2)}
.cart-btn.bump{animation:bump .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes bump{40%{transform:scale(1.12)}}
.cart-count{background:var(--red); color:#fff; border-radius:20px; min-width:22px; height:22px; display:grid; place-items:center; font-size:11.5px; padding:0 6px}
/* ---------- hero ---------- */
.hero{padding:150px 0 0;  display:flex; flex-direction:column; justify-content:space-between}
.hero-grid{display:grid; grid-template-columns:1.25fr .9fr; gap:56px; align-items:center}
.hero h1{font-size:clamp(46px,8.6vw,116px); font-weight:900; text-transform:uppercase; letter-spacing:-.01em}
.hero h1 .line{display:block}
.hero h1 .accent{color:var(--red); text-shadow:0 0 46px rgba(232,80,42,.35)}
.hero h1 .small{font-size:.34em; font-weight:700; letter-spacing:.14em; color:var(--muted); margin-top:14px}
.hero-sub{margin:26px 0 30px; color:var(--muted); max-width:480px; font-size:16.5px}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap}
.hero-chips{display:flex; gap:10px; flex-wrap:wrap; margin-top:30px}
.chip{font-size:12.5px; font-weight:700; padding:8px 14px; border:1px solid var(--line); border-radius:100px; color:var(--muted); background:rgba(18,48,60,.35)}
/* catch card */
.catch-card{position:relative; border:1px solid var(--line); border-radius:18px; background:var(--ink2); overflow:visible; transform:rotate(1.2deg)}
.catch-img{position:relative; overflow:hidden; border-radius:17px 17px 0 0; aspect-ratio:7/5}
.catch-img img{width:100%; height:100%; object-fit:cover; animation:kenburns 16s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1) translate(0,0)}to{transform:scale(1.12) translate(-2%,2%)}}
.live-tag{position:absolute; top:14px; left:14px; display:flex; align-items:center; gap:8px; background:rgba(7,20,27,.82); padding:7px 13px; border-radius:100px; font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase}
.live-dot{width:8px; height:8px; border-radius:50%; background:var(--red); animation:pulse 1.6s ease infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(232,80,42,.25)}}
.steam{position:absolute; top:-6px; left:0; right:0; height:0; pointer-events:none}
.steam i{position:absolute; bottom:0; width:16px; height:52px; border-radius:50%; background:rgba(244,234,216,.55); filter:blur(9px); animation:rise 3.2s ease-in infinite; opacity:0}
.steam i:nth-child(1){left:32%} .steam i:nth-child(2){left:50%; animation-delay:1.1s} .steam i:nth-child(3){left:66%; animation-delay:2.1s}
@keyframes rise{0%{transform:translateY(20px) scaleX(1); opacity:0}25%{opacity:.7}100%{transform:translateY(-70px) scaleX(1.9); opacity:0}}
.catch-meta{padding:18px 20px; display:flex; flex-direction:column; gap:8px}
.catch-count{font-size:14px; color:var(--muted)}
.catch-count b{font-family:var(--disp); font-size:22px; color:var(--amber); display:inline-block; transition:transform .3s}
.catch-count b.pop{animation:pop .5s cubic-bezier(.3,1.8,.5,1)}
@keyframes pop{40%{transform:scale(1.28)}}
.catch-row{font-size:12.5px; color:var(--muted); border-top:1px dashed var(--line); padding-top:10px}
.stamp{position:absolute; top:-42px; right:-38px; width:118px; height:118px; color:var(--red); animation:spin 22s linear infinite; filter:drop-shadow(0 6px 14px rgba(0,0,0,.4))}
@keyframes spin{to{transform:rotate(360deg)}}
/* bubbles */
.bubbles{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.bubbles i{position:absolute; bottom:-30px; border-radius:50%; border:1.5px solid rgba(244,234,216,.22); animation:bubble linear infinite}
@keyframes bubble{0%{transform:translateY(0); opacity:0}12%{opacity:.9}100%{transform:translateY(-105vh); opacity:0}}
/* ---------- crayfish ---------- */
.cray{display:block}
.cray .leg{stroke:currentColor; stroke-width:3; fill:none; stroke-linecap:round; transform-box:fill-box; transform-origin:top center; animation:legstep .42s ease-in-out infinite alternate}
.cray .l2,.cray .l4{animation-delay:.21s}
@keyframes legstep{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
.cray .clawT,.cray .clawB{transform-box:fill-box; transform-origin:left center; animation:snap 1.1s ease-in-out infinite alternate}
.cray .clawB{animation-delay:.3s}
@keyframes snap{from{transform:rotate(3deg)}to{transform:rotate(-7deg)}}
.cray{animation:craybob .42s ease-in-out infinite alternate}
@keyframes craybob{to{transform:translateY(-2px)}}
/* ---------- trout banner ---------- */
.trout{--ice:#9fd8e8; --salmon:#ff8f7a; position:relative; overflow:hidden; padding:76px 0;
  background:linear-gradient(115deg,#0c2b36,#12414f 55%,#0c2b36); border-bottom:1px solid rgba(159,216,232,.15)}
.trout::before{content:""; position:absolute; inset:0; background:radial-gradient(640px 320px at 85% 15%, rgba(159,216,232,.13), transparent 60%)}
.trout::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg,transparent 35%,rgba(159,216,232,.08) 48%,transparent 60%);
  transform:translateX(-130%); animation:shine 7s ease-in-out infinite}
@keyframes shine{45%,100%{transform:translateX(130%)}}
.trout-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:52px; align-items:center; position:relative; z-index:2}
.kicker--ice{color:var(--ice)}
.accent-ice{color:var(--ice)}
.trout-sub{color:rgba(234,247,251,.68); max-width:470px; margin:18px 0 24px}
.trout-tags{display:flex; gap:9px; flex-wrap:wrap; margin-bottom:28px}
.trout-tags .chip{border-color:rgba(159,216,232,.3); color:rgba(234,247,251,.75); background:rgba(12,43,54,.5)}
.btn--ice{background:var(--ice); color:#06222b; box-shadow:0 10px 26px rgba(159,216,232,.25)}
.btn--ice:hover{background:#c3e8f2; transform:translateY(-2px)}
.btn--ice.done{background:#59b87d; color:#fff}
.ice-card{position:relative; background:rgba(6,25,32,.62); border:1px solid rgba(159,216,232,.28); border-radius:20px; padding:22px; backdrop-filter:blur(4px)}
.ice-img{position:relative; border-radius:13px; overflow:hidden; aspect-ratio:16/8; margin-bottom:20px}
.ice-img img{width:100%; height:100%; object-fit:cover; animation:kenburns 17s ease-in-out infinite alternate}
.ice-tag{position:absolute; top:12px; left:12px; background:rgba(6,25,32,.85); border:1px solid rgba(159,216,232,.4); color:var(--ice); font-size:10.5px; font-weight:800; letter-spacing:.16em; padding:6px 12px; border-radius:100px; text-transform:uppercase}
.cd-status{font-size:11.5px; font-weight:800; letter-spacing:.24em; text-transform:uppercase; color:rgba(159,216,232,.8); margin-bottom:12px; display:flex; align-items:center; gap:9px}
.cd-status::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--ice); animation:pulse 1.6s infinite; flex:none}
.cd{display:flex; gap:10px}
.cd-cell{flex:1; background:rgba(9,33,42,.85); border:1px solid rgba(159,216,232,.22); border-radius:13px; padding:13px 4px 11px; text-align:center; perspective:300px}
.cd-num{display:block; font-family:var(--disp); font-weight:800; font-size:clamp(22px,3vw,34px); color:#ecf8fc; transform-origin:center bottom}
.cd-num.tick{animation:flipNum .5s cubic-bezier(.2,.7,.2,1)}
@keyframes flipNum{from{transform:rotateX(-84deg); opacity:0}}
.cd-lbl{font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:rgba(159,216,232,.65)}
.trout-done{display:none; text-align:center; padding:8px 0 4px}
.trout-done-stamp{display:inline-block; font-family:var(--disp); font-weight:900; font-size:clamp(21px,3.2vw,36px); letter-spacing:.06em;
  color:var(--salmon); border:3px dashed rgba(255,143,122,.65); border-radius:16px; padding:18px 28px; transform:rotate(-2deg);
  animation:doneIn .7s cubic-bezier(.2,1.4,.3,1), glowS 2.2s ease-in-out infinite .7s}
@keyframes doneIn{from{transform:rotate(-2deg) scale(.55); opacity:0}}
@keyframes glowS{50%{box-shadow:0 0 36px rgba(255,143,122,.4); border-color:#ff8f7a}}
.trout-done p{margin-top:14px; color:rgba(234,247,251,.6); font-size:13.5px}
.trout.ended .cd-wrap{display:none}
.trout.ended .trout-done{display:block}
.swim{position:absolute; top:0; left:0; color:rgba(159,216,232,.55); pointer-events:none; z-index:1; animation:swimAcross linear infinite}
@keyframes swimAcross{from{transform:translateX(calc(100vw + 200px))}to{transform:translateX(-280px)}}
.swim-bob{transform:scaleX(-1); animation:swimBob 3.2s ease-in-out infinite alternate}
@keyframes swimBob{from{translate:0 -9px}to{translate:0 9px}}
.ftail{transform-box:fill-box; transform-origin:right center; animation:tailsway .55s ease-in-out infinite alternate}
@keyframes tailsway{from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}
/* ---------- parade ---------- */
.parade{position:relative; height:86px; overflow:hidden; pointer-events:none; border-top:1px dashed var(--line); border-bottom:1px dashed var(--line)}
.parade.tall{height:120px}
.walker{position:absolute; left:0; color:var(--red); animation:walk linear infinite; will-change:transform}
.walker.amber{color:var(--amber)}
@keyframes walk{from{transform:translateX(-160px)}to{transform:translateX(calc(100vw + 60px))}}
/* ---------- marquee ---------- */
.mq{overflow:hidden; border-block:1px solid var(--line); padding:16px 0; background:rgba(18,48,60,.28)}
.mq-track{display:flex; width:max-content; animation:mq 26s linear infinite}
.mq.rev .mq-track{animation-direction:reverse}
.mq span{font-family:var(--disp); font-weight:700; font-size:15px; letter-spacing:.2em; text-transform:uppercase; white-space:nowrap; padding:0 14px; color:var(--cream)}
.mq b{color:var(--red2)}
@keyframes mq{to{transform:translateX(-50%)}}
/* ---------- catalog ---------- */
.filters{display:flex; gap:10px; flex-wrap:wrap; margin:34px 0 38px}
.filter{padding:10px 18px; border-radius:100px; border:1px solid var(--line); background:transparent; color:var(--muted); font-weight:700; font-size:13px; transition:all .2s}
.filter:hover{border-color:var(--red2); color:var(--cream)}
.filter.on{background:var(--red); border-color:var(--red); color:#fff; box-shadow:0 8px 20px rgba(232,80,42,.3)}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(262px,1fr)); gap:22px}
.prod{background:var(--ink2); border:1px solid var(--line); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; position:relative; transition:transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .3s; animation:prodIn .5s cubic-bezier(.2,.7,.2,1) backwards}
@keyframes prodIn{from{opacity:0; transform:translateY(22px)}}
.prod:hover{transform:translateY(-7px); border-color:rgba(232,80,42,.5); box-shadow:0 22px 44px rgba(0,0,0,.4)}
.prod-img{position:relative; aspect-ratio:4/3; overflow:hidden}
.prod-img img{width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.prod:hover .prod-img img{transform:scale(1.09)}
.badge{position:absolute; top:12px; left:12px; background:var(--amber); color:#231303; font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:6px 11px; border-radius:100px}
.prod-cray{position:absolute; right:8px; bottom:6px; color:var(--red2); opacity:.95; transform:translateX(130%); transition:none}
.prod:hover .prod-cray{animation:crossCard 1.6s linear forwards}
@keyframes crossCard{from{transform:translateX(130%)}to{transform:translateX(-360%)}}
.prod-body{padding:18px 18px 20px; display:flex; flex-direction:column; gap:9px; flex:1}
.prod-cat{font-size:10.5px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--red2)}
.prod h3{font-size:15.5px; font-weight:700}
.prod-desc{font-size:13px; color:var(--muted); flex:1}
.prod-tag{align-self:flex-start; font-size:11.5px; font-weight:700; padding:5px 11px; border:1px dashed var(--line); border-radius:100px; color:var(--muted)}
.spicy{display:flex; gap:7px; flex-wrap:wrap}
.spicy button{font-size:11px; font-weight:800; padding:6px 11px; border-radius:100px; border:1px solid var(--line); background:transparent; color:var(--muted); transition:all .15s}
.spicy button:hover{color:var(--cream)}
.spicy button.on{background:var(--red); border-color:var(--red); color:#fff}
.prod-foot{display:flex; flex-direction:column; gap:12px; margin-top:6px}
.price-row{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.price-old{font-size:13.5px; font-weight:700; color:var(--muted); text-decoration:line-through; text-decoration-color:rgba(232,80,42,.85); text-decoration-thickness:2px}
.price{font-family:var(--disp); font-weight:800; font-size:19px}
.price small{font-family:var(--body); font-weight:600; font-size:11px; color:var(--muted); display:block; letter-spacing:.05em}
.price-ask{font-size:14px; color:var(--amber); letter-spacing:.06em; text-transform:uppercase}
.price-ask small{color:var(--muted); text-transform:none; letter-spacing:normal}
.price small{font-family:var(--body); font-weight:600; font-size:11px; color:var(--muted); display:block; letter-spacing:.05em}
.prod-btns{display:flex; gap:8px; flex-wrap:wrap}
.add{background:var(--red); border:none; color:#fff; font-family:var(--disp); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:13px 18px; border-radius:11px; transition:background .2s, transform .15s; white-space:nowrap;width: 100%;text-align: center;}
.add:hover{background:var(--red2)} .add:active{transform:scale(.95)}
.add.done{background:#2c7a4b}
.call{display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:12px 15px; border-radius:11px; border:1px solid var(--line); color:var(--muted); font-family:var(--disp); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; transition:all .2s; white-space:nowrap; background:transparent;width: 100%;}
.call:hover{border-color:var(--amber); color:var(--amber); transform:translateY(-2px)}
.call--main{flex:1; min-width:140px; background:var(--red); border-color:var(--red); color:#fff; box-shadow:0 8px 20px rgba(232,80,42,.3)}
.call--main:hover{background:var(--red2); border-color:var(--red2); color:#fff}
.call svg{flex:none}/* ---------- about ---------- */
.about-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:60px; margin-top:44px; align-items:start}
.about-txt p{color:var(--muted); margin-bottom:16px; font-size:15.5px}
.about-txt p b{color:var(--cream)}
.values{margin:26px 0 20px; display:flex; flex-direction:column; gap:16px}
.value{display:flex; gap:14px; align-items:flex-start}
.v-ico{width:44px; height:44px; border-radius:12px; flex:none; background:rgba(242,163,60,.12); border:1px solid rgba(242,163,60,.4); display:grid; place-items:center; color:var(--amber)}
.value b{display:block; font-size:14.5px; margin-bottom:3px}
.value span{font-size:13px; color:var(--muted)}
.sign{font-family:var(--disp); color:var(--amber); font-size:13.5px; letter-spacing:.04em}
.about-photo{position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--line); aspect-ratio:16/10}
.about-photo img{width:100%; height:100%; object-fit:cover; animation:kenburns 18s ease-in-out infinite alternate}
.about-photo figcaption{position:absolute; left:0; right:0; bottom:0; padding:36px 16px 14px; background:linear-gradient(transparent, rgba(7,20,27,.92)); font-family:var(--disp); font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase}
.stats{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px}
.stat-card{background:var(--ink2); border:1px solid var(--line); border-radius:14px; padding:18px 18px 15px; transition:transform .3s, border-color .3s}
.stat-card:hover{transform:translateY(-4px); border-color:rgba(242,163,60,.5)}
.stat-card b{font-family:var(--disp); font-weight:800; font-size:clamp(24px,2.6vw,32px); color:var(--red2); display:block; margin-bottom:4px}
.stat-card span{font-size:12px; color:var(--muted); letter-spacing:.04em}
#about{padding:0}
/* ---------- news ---------- */
.news-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap}
.news-all{font-family:var(--disp); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--red2); display:inline-flex; gap:8px; align-items:center}
.news-all i{font-style:normal; transition:transform .25s}
.news-all:hover i{transform:translateX(6px)}
.news-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:22px; margin-top:44px}
.news{background:var(--ink2); border:1px solid var(--line); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; transition:transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .3s}
.news:hover{transform:translateY(-7px); border-color:rgba(242,163,60,.5); box-shadow:0 22px 44px rgba(0,0,0,.4)}
.news-img{position:relative; aspect-ratio:16/9; overflow:hidden}
.news-img img{width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.news:hover .news-img img{transform:scale(1.08)}
.news-date{position:absolute; left:12px; bottom:12px; background:rgba(7,20,27,.88); padding:6px 12px; border-radius:100px; font-size:11px; font-weight:800; letter-spacing:.08em}
.news-tag{position:absolute; top:12px; right:12px; background:var(--amber); color:#231303; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:5px 11px; border-radius:100px}
.news-tag.hot{background:var(--red); color:#fff}
.news-body{padding:18px; display:flex; flex-direction:column; gap:9px; flex:1}
.news h3{font-size:15px}
.news p{font-size:13px; color:var(--muted); flex:1}
.news-more{font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--red2); display:inline-flex; gap:7px; align-items:center}
.news-more i{font-style:normal; transition:transform .25s}
.news:hover .news-more i{transform:translateX(6px)}
/* ---------- recipe ---------- */
.recipe{background:var(--ink2); border-block:1px solid var(--line)}
.recipe-grid{display:grid; grid-template-columns:.95fr 1.05fr; gap:60px; margin-top:44px; align-items:start}
.recipe-left{position:sticky; top:110px}
.recipe-img{position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--line); aspect-ratio:16/10}
.recipe-img img{width:100%; height:100%; object-fit:cover; animation:kenburns 17s ease-in-out infinite alternate-reverse}
.recipe-meta{display:flex; gap:9px; flex-wrap:wrap; margin:18px 0}
.ing{background:var(--ink); border:1px solid var(--line); border-radius:16px; padding:22px}
.ing h3{font-size:15px; margin-bottom:16px}
.ing-list{display:flex; flex-direction:column; gap:11px}
.ing label{display:flex; gap:12px; align-items:center; cursor:pointer; font-size:14px; transition:color .2s; user-select:none}
.ing input{display:none}
.ing .box{width:22px; height:22px; border-radius:7px; border:2px solid var(--line); flex:none; display:grid; place-items:center; transition:all .2s; color:transparent; font-size:12px; font-weight:800}
.ing input:checked + .box{background:var(--red); border-color:var(--red); color:#fff; transform:scale(1.08)}
.ing input:checked ~ .txt{color:var(--muted); text-decoration:line-through}
.ing-prog{height:6px; background:rgba(244,234,216,.1); border-radius:10px; margin-top:18px; overflow:hidden}
.ing-prog i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--amber),var(--red)); transition:width .45s cubic-bezier(.2,.7,.2,1)}
.ing-lbl{font-size:12px; color:var(--muted); margin-top:9px}
.rstep{display:flex; gap:22px; padding:26px 0; border-bottom:1px dashed var(--line)}
.rstep-num{font-family:var(--disp); font-weight:900; font-size:34px; line-height:1; color:transparent; -webkit-text-stroke:1.5px var(--amber); flex:none; width:56px}
.rstep h3{font-size:17px; margin-bottom:8px}
.rstep p{color:var(--muted); font-size:14.5px}
.tip{margin-top:28px; background:rgba(242,163,60,.08); border:1px dashed rgba(242,163,60,.5); border-radius:14px; padding:18px 20px; font-size:14px; color:rgba(244,234,216,.85)}
.tip b{color:var(--amber)}
/* ---------- steps ---------- */
.steps-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:70px}
.steps-left{position:sticky; top:110px; align-self:start}
.pot{position:relative; margin-top:30px; border-radius:18px; overflow:hidden; border:1px solid var(--line); aspect-ratio:4/4.6; max-width:420px}
.pot img{width:100%; height:100%; object-fit:cover; animation:kenburns 18s ease-in-out infinite alternate-reverse}
.pot-cap{position:absolute; left:0; right:0; bottom:0; padding:38px 18px 16px; background:linear-gradient(transparent, rgba(7,20,27,.92)); font-family:var(--disp); font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase}
.step{padding:44px 0 44px 26px; border-left:2px solid var(--line); position:relative; transition:opacity .5s; opacity:.38}
.step::before{content:""; position:absolute; left:-8px; top:54px; width:14px; height:14px; border-radius:50%; background:var(--ink); border:2px solid var(--line); transition:all .4s}
.step.is-active{opacity:1}
.step.is-active::before{background:var(--red); border-color:var(--red); box-shadow:0 0 0 6px rgba(232,80,42,.18)}
.step-num{font-family:var(--disp); font-weight:900; font-size:15px; color:var(--amber); letter-spacing:.14em}
.step h3{font-size:24px; margin:10px 0 12px}
.step p{color:var(--muted); max-width:460px; font-size:15px}
.step .tag{display:inline-block; margin-top:14px; font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--red2); border:1px solid rgba(232,80,42,.4); padding:6px 12px; border-radius:100px}
/* ---------- calc ---------- */
.calc{background:var(--ink2); border-block:1px solid var(--line)}
.calc-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center}
.people-row{display:flex; align-items:baseline; gap:16px; margin:34px 0 10px}
.people-num{font-family:var(--disp); font-weight:900; font-size:64px; color:var(--amber); min-width:100px}
.people-lbl{color:var(--muted); font-size:14px}
input[type=range]{width:100%; accent-color:var(--red); height:34px; cursor:pointer}
.modes{display:flex; gap:10px; margin-top:18px}
.mode{flex:1; padding:14px; border-radius:12px; border:1px solid var(--line); background:transparent; color:var(--muted); font-weight:800; font-size:13px; transition:all .2s}
.mode.on{border-color:var(--red); color:var(--cream); background:rgba(232,80,42,.12)}
.calc-panel{background:var(--ink); border:1px solid var(--line); border-radius:18px; padding:32px; position:relative; overflow:hidden}
.calc-panel::before{content:""; position:absolute; inset:0; background:radial-gradient(300px 200px at 90% 0%, rgba(232,80,42,.12), transparent)}
.calc-stats{display: flex;justify-content: space-between; gap:18px; position:relative}
.stat b{display:block; font-family:var(--disp); font-weight:800; font-size:clamp(24px,3vw,29px); color:var(--red2)}
.stat span{font-size:12px; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; font-weight:700}
.calc-panel .btn{width:100%; margin-top:26px; position:relative}
/* ---------- postcards ---------- */
.pc-field{position:relative; height:600px; margin-top:46px}
.pc{position:absolute; width:296px; background:#f6efe2; color:#221812; padding:12px 12px 0; border-radius:6px; box-shadow:0 18px 44px rgba(0,0,0,.45); transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s, z-index 0s; cursor:pointer}
.pc::before{content:""; position:absolute; top:-13px; left:50%; width:96px; height:28px; transform:translateX(-50%) rotate(-2deg); background:rgba(244,234,216,.3); border:1px solid rgba(244,234,216,.15)}
.pc img{width:100%; aspect-ratio:5/4; object-fit:cover}
.pc figcaption{font-family:var(--disp); font-size:12.5px; font-weight:700; padding:13px 4px; letter-spacing:.03em; display:flex; justify-content:space-between; align-items:center}
.pc figcaption em{font-style:normal; font-family:var(--body); font-size:11px; color:#8a6c4d}
.pc:hover{transform:rotate(0deg) translateY(-12px) scale(1.04) !important; z-index:9; box-shadow:0 30px 60px rgba(0,0,0,.6)}
.pc1{left:1%; top:5%; transform:rotate(-6deg)}
.pc2{left:25%; top:42%; transform:rotate(3.5deg)}
.pc3{left:50%; top:1%; transform:rotate(-3deg)}
.pc4{left:73%; top:36%; transform:rotate(6deg)}
/* ---------- delivery ---------- */
.del-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center}
.del-item{display:flex; gap:18px; padding:22px 0; border-bottom:1px dashed var(--line)}
.del-ico{width:52px; height:52px; flex:none; border-radius:14px; background:rgba(232,80,42,.12); border:1px solid rgba(232,80,42,.35); display:grid; place-items:center; color:var(--red2)}
.del-item h3{font-size:16px; margin-bottom:6px}
.del-item p{color:var(--muted); font-size:14px}
.zones{display:flex; gap:9px; flex-wrap:wrap; margin-top:26px}
.route-panel{background:var(--ink2); border:1px solid var(--line); border-radius:18px; padding:10px; overflow:hidden}
.route-dash{stroke:rgba(244,234,216,.5); stroke-width:2.5; stroke-dasharray:10 12; fill:none; animation:dash 2.4s linear infinite}
@keyframes dash{to{stroke-dashoffset:-44}}
.route-pin{fill:var(--red); animation:pulse 1.8s ease infinite}
/* ---------- reviews ---------- */
.rev-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap}
.rev-nav{display:flex; gap:10px}
.rev-arrow{width:52px; height:52px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--cream); font-size:19px; transition:all .2s}
.rev-arrow:hover{border-color:var(--red2); color:var(--red2); transform:translateY(-2px)}
.rev-track{display:flex; gap:20px; overflow-x:auto; margin-top:40px; padding:10px 4px 26px; scroll-snap-type:x mandatory; cursor:grab; scrollbar-width:thin; scrollbar-color:var(--red) transparent}
.rev-track:active{cursor:grabbing}
.rev-track::-webkit-scrollbar{height:6px}
.rev-track::-webkit-scrollbar-thumb{background:var(--red); border-radius:10px}
.rev-card{flex:0 0 348px; scroll-snap-align:start; background:var(--ink2); border:1px solid var(--line); border-radius:16px; padding:26px; transition:transform .3s, border-color .3s}
.rev-card:hover{transform:translateY(-5px); border-color:rgba(242,163,60,.45)}
.rev-top{display:flex; gap:14px; align-items:center; margin-bottom:16px}
.rev-top img{width:52px; height:52px; border-radius:50%; object-fit:cover; border:2px solid rgba(242,163,60,.5)}
.rev-top b{font-family:var(--disp); font-size:13.5px; display:block}
.rev-top span{font-size:12px; color:var(--muted)}
.stars{color:var(--amber); letter-spacing:3px; font-size:13px; margin-bottom:12px}
.rev-card p{font-size:14px; color:rgba(244,234,216,.85)}
.rev-prod{display:inline-block; margin-top:16px; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--red2); border:1px dashed rgba(232,80,42,.4); padding:6px 12px; border-radius:100px}
/* ---------- map / contacts ---------- */
.map-sec{position:relative; height:640px; padding:0; overflow:hidden}
.map-frame{position:absolute; inset:0; width:100%; height:100%; border:0;
  filter:grayscale(1) invert(.92) hue-rotate(190deg) saturate(.65) brightness(.92); opacity:.92}
.map-wrap{height:100%; display:flex; align-items:center; position:relative; pointer-events:none}
.map-card{pointer-events:auto; width:min(450px,100%); background:rgba(7,20,27,.94); border:1px solid rgba(242,163,60,.35); border-radius:20px; padding:30px; box-shadow:0 30px 70px rgba(0,0,0,.55)}
.map-card h2{font-size:clamp(22px,2.6vw,30px); margin-bottom:8px}
.map-row{display:flex; gap:13px; align-items:flex-start; padding:14px 0; border-bottom:1px dashed var(--line); font-size:14.5px}
.map-row .m-ico{width:40px; height:40px; flex:none; border-radius:11px; background:rgba(232,80,42,.12); border:1px solid rgba(232,80,42,.4); display:grid; place-items:center; color:var(--red2)}
.map-row a:hover{color:var(--red2)}
.hours-tbl{width:100%; font-size:13px; color:var(--muted); margin-top:6px}
.hours-tbl div{display:flex; justify-content:space-between; padding:3px 0}
.hours-tbl b{color:var(--cream); font-weight:700}
.map-btns{display:flex; gap:10px; margin-top:22px; }
.map-btns .btn {
    font-size: 10px;
    padding: 10px 26px;
}
/* ---------- CTA ---------- */
.cta{padding:130px 0; text-align:center; position:relative; overflow:hidden}
.cta-title{font-family:var(--disp); font-weight:900; font-size:clamp(28px,8.4vw,118px); text-transform:uppercase; line-height:1;  -webkit-text-stroke:2px var(--cream); position:relative; z-index:2;line-height: 1.2;}
.cta-title b{color:var(--red); -webkit-text-stroke:0}
.cta-parade{position:absolute; top:50%; left:0; right:0; transform:translateY(-50%); opacity:.35; z-index:1; height:100px}
.cta-phone{display:inline-block; margin-top:34px; font-family:var(--disp); font-weight:800; font-size:clamp(20px,3vw,32px); color:var(--amber); position:relative; z-index:2; transition:color .2s}
.cta-phone:hover{color:var(--red2)}
.cta-form{display:flex; gap:12px; justify-content:center; margin-top:26px; position:relative; z-index:2; flex-wrap:wrap}
.cta-form input{background:var(--ink2); border:1px solid var(--line); color:var(--cream); padding:15px 20px; border-radius:12px; font-family:var(--body); font-size:15px; width:280px; outline:none; transition:border-color .2s}
.cta-form input:focus{border-color:var(--red)}
.cta-ok{font-family:var(--disp); font-size:14px; color:#7dd89b; margin-top:26px; position:relative; z-index:2}
/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); padding:60px 0 30px; background:rgba(7,18,24,.6)}
.ft-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px}
.ft-grid h4{font-family:var(--disp); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--amber); margin-bottom:16px}
.ft-grid a,.ft-grid p{display:block; font-size:13.5px; color:var(--muted); margin-bottom:9px; transition:color .2s}
.ft-grid a:hover{color:var(--cream)}
.ft-bottom{margin-top:46px; padding-top:22px; border-top:1px dashed var(--line); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:12px; color:rgba(244,234,216,.4)}
.ft-soc{margin-top:18px}
.ft-soc h4{margin-bottom:12px}
.ft-bottom{margin-top:46px; padding-top:22px; border-top:1px dashed var(--line); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:12px; color:rgba(244,234,216,.4)}
/* ---------- drawer ---------- */
.overlay{position:fixed; inset:0; background:rgba(4,10,14,.7); opacity:0; pointer-events:none; transition:opacity .35s; z-index:80}
.overlay.open{opacity:1; pointer-events:auto}
.drawer{position:fixed; top:0; right:0; bottom:0; width:min(440px,100%); background:var(--ink2); border-left:1px solid var(--line); z-index:90; transform:translateX(105%); transition:transform .45s cubic-bezier(.25,.8,.25,1); display:flex; flex-direction:column}
.drawer.open{transform:none}
.dw-head{display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1px solid var(--line)}
.dw-head h3{font-size:16px}
.dw-close{background:none; border:none; color:var(--muted); font-size:26px; line-height:1; transition:color .2s, transform .3s}
.dw-close:hover{color:var(--red2); transform:rotate(90deg)}
.dw-body{flex:1; overflow-y:auto; padding:18px 24px; scrollbar-width:thin}
.dw-empty{text-align:center; padding:60px 20px; color:var(--muted)}
.dw-empty .cray{margin:0 auto 18px; color:rgba(232,80,42,.4)}
.ci{display:grid; grid-template-columns:1fr auto; gap:6px 14px; padding:16px 0; border-bottom:1px dashed var(--line)}
.ci b{font-size:14px}
.ci .opt{font-size:12px; color:var(--muted)}
.ci-sum{font-family:var(--disp); font-weight:700; font-size:14px; text-align:right}
.ci-ctrl{display:flex; align-items:center; gap:10px; margin-top:8px}
.ci-ctrl button{width:30px; height:30px; border-radius:9px; border:1px solid var(--line); background:transparent; color:var(--cream); font-size:16px; transition:all .15s}
.ci-ctrl button:hover{border-color:var(--red2); color:var(--red2)}
.ci-ctrl span{min-width:26px; text-align:center; font-weight:800}
.dw-foot{padding:20px 24px; border-top:1px solid var(--line)}
.progress{height:6px; background:rgba(244,234,216,.1); border-radius:10px; overflow:hidden; margin-bottom:8px}
.progress i{display:block; height:100%; background:linear-gradient(90deg,var(--red),var(--amber)); width:0; transition:width .5s cubic-bezier(.2,.7,.2,1)}
.prog-lbl{font-size:12px; color:var(--muted); margin-bottom:14px}
.dw-row{display:flex; justify-content:space-between; font-size:14px; margin-bottom:6px; color:var(--muted)}
.dw-row.total{font-family:var(--disp); font-weight:800; font-size:18px; color:var(--cream); margin:10px 0 16px}
.dw-foot .btn{width:100%}
.dw-form{display:flex; flex-direction:column; gap:12px; padding-top:6px}
.dw-form input,.dw-form select,.dw-form textarea{background:var(--ink); border:1px solid var(--line); color:var(--cream); padding:14px 16px; border-radius:11px; font-family:var(--body); font-size:14px; outline:none; transition:border-color .2s; width:100%}
.dw-form input:focus,.dw-form select:focus{border-color:var(--red)}
.dw-note{font-size:12.5px; color:var(--muted); border:1px dashed rgba(242,163,60,.45); background:rgba(242,163,60,.06); border-radius:11px; padding:11px 14px; line-height:1.5}
.dw-note b{color:var(--amber)}
.dw-back{background:none; border:none; color:var(--muted); font-size:13px; margin-bottom:14px; font-weight:700}
.dw-back:hover{color:var(--red2)}
.dw-done{text-align:center; padding:44px 10px}
.dw-done h3{font-size:20px; margin-bottom:10px}
.dw-done p{color:var(--muted); font-size:14px}
.dw-done .strip{height:64px; margin:22px 0; position:relative; overflow:hidden}
.dw-done .walker{animation-duration:5s !important}
.hide{display:none !important}
/* ---------- call badge ---------- */
.call-badge{position:fixed; right:22px; bottom:22px; width:96px; height:96px; border-radius:50%; background:var(--red); z-index:75;
  display:grid; place-items:center; box-shadow:0 14px 36px rgba(232,80,42,.5);
  transition:transform .25s cubic-bezier(.2,.8,.2,1), background .2s}
.call-badge:hover{transform:scale(1.09); background:var(--red2)}
.call-badge::before{content:""; position:absolute; inset:-7px; border-radius:50%; border:1.5px dashed rgba(232,80,42,.65); animation:spin 26s linear infinite reverse}
.call-badge::after{content:""; position:absolute; inset:0; border-radius:50%; animation:ringPulse 2.2s ease-out infinite; pointer-events:none}
@keyframes ringPulse{from{box-shadow:0 0 0 0 rgba(232,80,42,.45)}to{box-shadow:0 0 0 20px rgba(232,80,42,0)}}
.call-badge-ring{position:absolute; inset:0; width:100%; height:100%; color:var(--cream); animation:spin 14s linear infinite}
.call-badge-ico{position:relative; z-index:2; width:42px; height:42px; border-radius:50%; background:rgba(7,20,27,.28); display:grid; place-items:center; color:#fff}
/* ---------- toast ---------- */
#toasts{position:fixed; left:20px; bottom:20px; z-index:120; display:flex; flex-direction:column; gap:10px}
.toast{display:flex; align-items:center; gap:12px; background:var(--ink3); border:1px solid rgba(232,80,42,.5); border-radius:12px; padding:13px 18px; font-size:13.5px; font-weight:700; box-shadow:0 14px 34px rgba(0,0,0,.45); animation:toastIn .4s cubic-bezier(.2,1.2,.3,1)}
.toast .tk{color:var(--red2); flex:none}
.toast.out{animation:toastOut .35s forwards}
@keyframes toastIn{from{transform:translateX(-120%); opacity:0}}
@keyframes toastOut{to{transform:translateX(-120%); opacity:0}}
/* ---------- responsive ---------- */
/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important; transition:none !important}
  .parade,.cta-parade,.dw-done .strip,.swim{display:none}
  .rv{opacity:1; transform:none} .rv .mask>span{transform:none}
}
.footer-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.cta-text{
padding-top: 20px;
}
.cta-text span{
	display:block;
}
.cta-btn{
	background: var(--ink2);
    border: 1px solid var(--line);
    color: var(--cream);
    padding: 15px 20px;
    border-radius: 12px;
    font-family: var(--disp);
    font-size: 12px;
    outline: none;
    transition: all .2s;
	text-transform: uppercase;
}
.cta-btns{
	    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 26px;
    position: relative;
    z-index: 2;
    flex-wrap: wrap;
	
}
.cta-btn:hover {
    border-color: var(--red);
    color: var(--cream);
    background: rgba(232, 80, 42, .12);
}

/* ── отзывы: бегущие строки ── */
.reviews{padding:clamp(3.5rem,7vw,6rem) 0;border-top:1px solid var(--line);overflow:hidden}
.rrow{overflow:hidden;margin-top:1.4rem;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.rtrack{display:flex;gap:1.2rem;width:max-content;animation:mar 46s linear infinite;padding:.4rem 0}
.rrow.rev .rtrack{animation-direction:reverse;animation-duration:54s}
.rrow:hover .rtrack{animation-play-state:paused}
.rcard{
	width:400px;
	flex:none;    
	background: var(--ink2);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 26px;
    transition: transform .3s, border-color .3s;}
.rcard:hover{
	transform: translateY(-5px);
    border-color: rgba(242, 163, 60, .45);
}
.rcard p{
	    font-size: 14px;
    color: rgba(244, 234, 216, .85);
}
.rcard .who{margin-top:.9rem;font-family:'Unbounded';font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--red2)}

@keyframes mar{to{transform:translateX(-50%)}}
@media(max-width:1000px){
  .hero-grid,.steps-grid,.calc-grid,.del-grid,.trout-grid,.about-grid,.recipe-grid{grid-template-columns:1fr}
  .steps-left,.recipe-left{position:static}
  .stamp{right:6px}
  .pc-field{height:auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:26px}
  .pc{position:static; width:auto; transform:rotate(-1.5deg)}
  .pc:nth-child(even){transform:rotate(1.5deg)}
  nav{display:none}
  .ft-grid{grid-template-columns:1fr 1fr}
  .map-sec{height:auto; padding:96px 0}
  .map-frame{opacity:.25}
  .map-wrap{align-items:stretch}
  .map-card{width:100%}
}
.burger{
	display:none;
}
.hd-small-text{
	display:none;
}
@media(max-width:767px){
	.logo span:last-child {
    display: none;
}
	/* --- Стили для бургера --- */
.burger {
  width: 30px;
  height: 20px;
  position: relative;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
  z-index: 10;
  display:block;
}

.burger span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: var(--amber);
  border-radius: 3px;
  transition: all 0.3s ease;
  left: 0;
}

/* Расположение полосок */
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 8px; }
.burger span:nth-child(3) { top: 16px; }

/* Анимация бургера в крестик при добавлении класса .active */
.burger.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.burger.active span:nth-child(2) {
  opacity: 0;
}
.burger.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* --- Стили для меню --- */
.menu {
	padding: 0;
        margin: 10px 0;
        overflow: hidden;
        transition: all 0.4s ease-out;
        left: -100%;
        display: flex;
        position: absolute;
        background: #14171a;
        height: 100dvh;
        top: 0;
        flex-direction: column;
        width: 100%;
        align-items: center;
        justify-content: center;
		gap: 15px;
}

.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu  a {
  font-size: 18px;
}

/* Показываем меню при добавлении класса .active */
.menu.active {
  left: 0;
}
.logo-mark {
    width: 58px;
    height: 58px;
}
.hd {
    justify-content: space-between;
}
section, .cta {
    padding: 40px 0;
}
.steps-grid {
    gap: 30px;
}
.cta-btn, .btn {
    width: 100%;
}
.hd-small-text{
	
	display:block;
	    display: block;
    font-family: var(--body);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: .22em;
    color: var(--muted);
    text-transform: uppercase;
}
.hd-right {
    flex-direction: column;
    gap: 3px;
}
.ft-grid {
    grid-template-columns: 1fr;
    gap: 10px;
}
footer {
    padding: 30px 0;
}
.ft-bottom {
    margin-top: 16px;
}
.map-btns {
    flex-direction: column;
}
iframe.map-frame {
    position: relative;
    height: 300px;
    opacity: 1;
}
.map-sec {
    padding: 40px 0;
}
.map-wrap {
    margin-top: 30px;
}
.reviews .rcard p {
    font-size: 12px;
}
}
@media(max-width:560px){
  .hero{padding-top:120px}
  .rev-card{flex-basis:290px}
  .calc-stats{grid-template-columns:1fr; gap:24px}
  .cd-cell{padding:10px 2px 8px}
  .stats{grid-template-columns:1fr 1fr}
  .rcard {
    width: 300px;
  }
}
/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important; transition:none !important}
  .parade,.cta-parade,.dw-done .strip,.swim{display:none}
  .rv{opacity:1; transform:none} .rv .mask>span{transform:none}
}

.rewiews__karts {
    display: flex;
    align-items: center;
    justify-content: center;
}
.zones__h3{
  padding-bottom: 20px;
}

.cart-btn{position:relative; display:flex; align-items:center; gap:10px; background:var(--ink3); border:1px solid var(--line); color:var(--cream); padding:11px 18px; border-radius:12px; font-weight:800; font-size:13px; transition:border-color .2s, transform .15s}
.cart-btn:hover{border-color:var(--red2)}
.cart-btn.bump{animation:bump .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes bump{40%{transform:scale(1.12)}}
.cart-count{background:var(--red); color:#fff; border-radius:20px; min-width:22px; height:22px; display:grid; place-items:center; font-size:11.5px; padding:0 6px}

.overlay{position:fixed; inset:0; background:rgba(4,10,14,.7); opacity:0; pointer-events:none; transition:opacity .35s; z-index:80}
.overlay.open{opacity:1; pointer-events:auto}
.drawer{position:fixed; top:0; right:0; bottom:0; width:min(440px,100%); background:var(--ink2); border-left:1px solid var(--line); z-index:90; transform:translateX(105%); transition:transform .45s cubic-bezier(.25,.8,.25,1); display:flex; flex-direction:column}
.drawer.open{transform:none}
.dw-head{display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1px solid var(--line)}
.dw-head h3{font-size:16px}
.dw-close{background:none; border:none; color:var(--muted); font-size:26px; line-height:1; transition:color .2s, transform .3s}
.dw-close:hover{color:var(--red2); transform:rotate(90deg)}
.dw-body{flex:1; overflow-y:auto; padding:18px 24px; scrollbar-width:thin}
.dw-empty{text-align:center; padding:60px 20px; color:var(--muted)}
.dw-empty .cray{margin:0 auto 18px; color:rgba(232,80,42,.4)}
.ci{display:grid; grid-template-columns:1fr auto; gap:6px 14px; padding:16px 0; border-bottom:1px dashed var(--line)}
.ci b{font-size:14px}
.ci .opt{font-size:12px; color:var(--muted)}
.ci-sum{font-family:var(--disp); font-weight:700; font-size:14px; text-align:right}
.ci-ctrl{display:flex; align-items:center; gap:10px; margin-top:8px}
.ci-ctrl button{width:30px; height:30px; border-radius:9px; border:1px solid var(--line); background:transparent; color:var(--cream); font-size:16px; transition:all .15s}
.ci-ctrl button:hover{border-color:var(--red2); color:var(--red2)}
.ci-ctrl span{min-width:26px; text-align:center; font-weight:800}
.dw-foot{padding:20px 24px; border-top:1px solid var(--line)}
.progress{height:6px; background:rgba(244,234,216,.1); border-radius:10px; overflow:hidden; margin-bottom:8px}
.progress i{display:block; height:100%; background:linear-gradient(90deg,var(--red),var(--amber)); width:0; transition:width .5s cubic-bezier(.2,.7,.2,1)}
.prog-lbl{font-size:12px; color:var(--muted); margin-bottom:14px}
.dw-row{display:flex; justify-content:space-between; font-size:14px; margin-bottom:6px; color:var(--muted)}
.dw-row.total{font-family:var(--disp); font-weight:800; font-size:18px; color:var(--cream); margin:10px 0 16px}
.dw-foot .btn{width:100%}
.dw-form{display:flex; flex-direction:column; gap:12px; padding-top:6px}
.dw-form input,.dw-form select,.dw-form textarea{background:var(--ink); border:1px solid var(--line); color:var(--cream); padding:14px 16px; border-radius:11px; font-family:var(--body); font-size:14px; outline:none; transition:border-color .2s; width:100%}
.dw-form input:focus,.dw-form select:focus{border-color:var(--red)}
.dw-back{background:none; border:none; color:var(--muted); font-size:13px; margin-bottom:14px; font-weight:700}
.dw-back:hover{color:var(--red2)}
.dw-done{text-align:center; padding:44px 10px}
.dw-done h3{font-size:20px; margin-bottom:10px}
.dw-done p{color:var(--muted); font-size:14px}
.dw-done .strip{height:64px; margin:22px 0; position:relative; overflow:hidden}
.dw-done .walker{animation-duration:5s !important}
.hide{display:none !important}