:root { --black:#171716; --ink:#181816; --paper:#f2efe6; --white:#fffdf7; --hot:#ed4c2c; --lime:#d7ed65; --grey:#aaa79d; --line:rgba(242,239,230,.2); --head:'Manrope','Arial',sans-serif; --body:'DM Sans','Arial',sans-serif; --ease:cubic-bezier(.2,.72,.22,1); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:84px; }
body { margin:0; color:var(--paper); background:var(--black); font-family:var(--body); -webkit-font-smoothing:antialiased; }
body,button,a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; }
button { font:inherit; }
::selection { color:var(--ink); background:var(--lime); }
.skip-link { position:fixed; z-index:100; top:10px; left:10px; padding:12px 16px; color:var(--ink); background:var(--lime); transform:translateY(-150%); }
.skip-link:focus { transform:translateY(0); }
a:focus-visible,button:focus-visible { outline:3px solid var(--lime); outline-offset:4px; }
.topbar { width:100%; min-height:78px; padding:0 clamp(22px,5vw,78px); display:flex; align-items:center; justify-content:space-between; gap:28px; position:absolute; inset:0 0 auto; z-index:20; border-bottom:1px solid rgba(255,255,255,.18); }
.brand { display:inline-flex; align-items:center; gap:11px; text-decoration:none; flex-shrink:0; }
.brand__logo { width:48px; height:48px; border-radius:50%; object-fit:cover; border:1px solid rgba(255,255,255,.5); }
.brand__name { display:flex; flex-direction:column; font:800 15px/1.05 var(--head); letter-spacing:.1em; }
.brand__name > span { color:var(--hot); }
.brand__name small { margin-top:5px; color:rgba(255,255,255,.65); font:600 8px/1 var(--body); letter-spacing:.16em; }
.nav { display:flex; align-items:center; gap:clamp(22px,3.2vw,48px); }
.nav a { position:relative; color:#f5f2ec; font-size:11px; font-weight:600; text-decoration:none; letter-spacing:.07em; }
.nav a::after { content:''; position:absolute; left:0; right:100%; bottom:-8px; height:2px; background:var(--hot); transition:right .25s var(--ease); }
.nav a:hover::after { right:0; }
.topbar__phone { min-height:38px; padding:0 14px; border:1px solid rgba(255,255,255,.36); display:flex; align-items:center; gap:9px; color:white; text-decoration:none; font-size:11px; font-weight:600; transition:background .2s,border-color .2s; }
.topbar__phone:hover { border-color:var(--hot); background:var(--hot); }
.phone-dot,.open-mark { width:7px; height:7px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 4px rgba(215,237,101,.16); }
.menu-toggle,.mobile-nav { display:none; }
.hero { min-height:735px; height:min(900px,100vh); height:min(900px,100svh); min-height:min(735px,100vh); min-height:min(735px,100svh); display:grid; grid-template-columns:1.03fr .97fr; position:relative; isolation:isolate; overflow:hidden; }
.hero__photo { position:relative; grid-column:1 / -1; grid-row:1; overflow:hidden; background:#302a25; }
.hero__photo img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; object-position:center 53%; opacity:.91; transform:scale(1.01); transition:opacity .45s ease,transform 7s linear; }
.hero__photo.is-changing img { opacity:.35; transform:scale(1.055); }
.hero__shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(14,15,14,.9) 0%,rgba(16,16,15,.77) 29%,rgba(16,16,15,.28) 63%,rgba(16,16,15,.18) 100%),linear-gradient(0deg,rgba(16,16,15,.69),transparent 29%); }
.hero__copy { width:min(590px,86%); grid-column:1; grid-row:1; z-index:2; align-self:center; margin:31px 0 0 clamp(26px,8vw,130px); }
.hero__eyebrow,.eyebrow { display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.67); font-size:9px; font-weight:700; letter-spacing:.17em; }
.hero__eyebrow i { width:5px; height:5px; background:var(--hot); border-radius:50%; }
.hero__heading-wrap { position:relative; margin-top:37px; }
.hero__serial { position:absolute; top:-12px; right:12%; color:rgba(255,255,255,.52); font-size:8px; letter-spacing:.15em; }
.hero h1 { margin:0; color:#fffdf7; font:700 clamp(58px,8.1vw,119px)/.91 var(--head); letter-spacing:-.085em; }
.hero h1 em,.section-head h2 em,.about__copy h2 em,.contact-heading h2 em { color:var(--hot); font-style:normal; }
.hero__intro { max-width:390px; margin:25px 0 0; color:rgba(255,255,255,.72); font-size:13px; line-height:1.75; }
.hero__actions { margin-top:28px; display:flex; align-items:center; gap:25px; }
.button { min-height:47px; padding:0 18px; display:inline-flex; align-items:center; justify-content:space-between; gap:23px; color:var(--paper); background:var(--hot); text-decoration:none; font-size:11px; font-weight:700; transition:background .2s,transform .2s var(--ease); }
.button:hover { color:var(--ink); background:var(--lime); transform:translateY(-2px); }
.button span { font-size:17px; }
.hero__quiet-link { color:rgba(255,255,255,.84); text-decoration:none; font-size:10px; }
.hero__quiet-link span { margin-left:7px; color:var(--lime); }
.hero__hours { width:min(315px,100%); margin-top:54px; padding:15px 17px; border-top:1px solid rgba(255,255,255,.29); border-bottom:1px solid rgba(255,255,255,.29); display:flex; align-items:center; gap:13px; }
.hero__hours > div { display:flex; flex-direction:column; gap:5px; }
.hero__hours > div > span { color:rgba(255,255,255,.57); font-size:8px; letter-spacing:.14em; }
.hero__hours strong { color:#fffdf7; font:700 19px/1 var(--head); letter-spacing:-.04em; }
.hero__hours strong i { color:var(--hot); font-style:normal; }
.hero__sun { margin-left:auto; color:var(--lime); font-size:27px; }
.hero__photo-index { position:absolute; z-index:2; top:122px; right:clamp(26px,6vw,88px); display:flex; align-items:center; gap:10px; font:600 10px var(--head); color:rgba(255,255,255,.55); }
.hero__photo-index span:first-child { color:white; font-size:15px; }
.hero__photo-index i { width:31px; height:1px; background:rgba(255,255,255,.52); }
.photo-controls { position:absolute; z-index:3; top:50%; right:clamp(26px,6vw,88px); display:flex; gap:6px; transform:translateY(-50%); }
.photo-controls button { width:40px; height:40px; border:1px solid rgba(255,255,255,.62); border-radius:50%; color:white; background:rgba(0,0,0,.13); font-size:18px; cursor:pointer; transition:background .2s,border .2s,color .2s; }
.photo-controls button:hover { color:var(--ink); border-color:var(--lime); background:var(--lime); }
.hero__vertical { position:absolute; z-index:2; top:48%; right:29px; color:rgba(255,255,255,.75); font-size:7px; font-weight:700; letter-spacing:.19em; writing-mode:vertical-rl; }
.hero__stamp { position:absolute; z-index:4; right:clamp(74px,16vw,235px); bottom:75px; width:81px; height:81px; border:1px solid rgba(255,255,255,.58); border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:white; font:700 11px/1 var(--head); transform:rotate(8deg); backdrop-filter:blur(8px); }
.hero__stamp i { width:14px; height:1px; background:var(--hot); }
.hero__stamp span:last-child { color:rgba(255,255,255,.7); font-size:8px; }
.hero__bottom { grid-column:1/-1; grid-row:1; position:absolute; z-index:3; right:clamp(26px,5vw,78px); bottom:0; left:clamp(26px,5vw,78px); height:44px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid rgba(255,255,255,.24); color:rgba(255,255,255,.73); font-size:8px; font-weight:700; letter-spacing:.15em; }
.hero__bottom b { margin-left:14px; color:var(--lime); font-size:15px; }
.ticker { overflow:hidden; height:58px; color:var(--ink); background:var(--lime); display:flex; align-items:center; }
.ticker__track { min-width:max-content; display:flex; align-items:center; gap:27px; animation:ticker 38s linear infinite; font:800 13px/1 var(--head); letter-spacing:.14em; }
.ticker__track i { color:var(--hot); font-size:18px; font-style:normal; }
.menu-section { padding:clamp(85px,10vw,145px) clamp(22px,7vw,108px) clamp(75px,9vw,124px); color:var(--ink); background:var(--paper); }
.section-head { max-width:1250px; margin:0 auto 42px; display:flex; align-items:flex-end; justify-content:space-between; gap:35px; }
.eyebrow { margin:0 0 20px; color:#75736b; font-size:8px; }
.eyebrow > span { color:var(--hot); }
.section-head h2,.about__copy h2,.contact-heading h2 { margin:0; font:800 clamp(42px,6.3vw,78px)/.98 var(--head); letter-spacing:-.075em; }
.section-head__note { max-width:290px; margin:0 4% 5px 0; color:#737268; font-size:12px; line-height:1.75; }
.menu-grid { max-width:1250px; margin:0 auto; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.menu-card { min-height:285px; padding:19px 19px 17px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; background:var(--black); color:#fffdf7; isolation:isolate; }
.menu-card::before { content:''; position:absolute; z-index:-1; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.03) 0%,rgba(0,0,0,.03) 38%,rgba(0,0,0,.71) 100%); }
.menu-card--feature { background:var(--hot); color:white; }
.menu-card--feature::after { content:'XL'; position:absolute; z-index:-2; top:41px; right:-13px; color:rgba(255,255,255,.16); font:800 162px/.8 var(--head); letter-spacing:-.1em; }
.menu-card--paper { background:var(--white); color:var(--ink); }
.menu-card--paper::before { background:linear-gradient(180deg,transparent 37%,rgba(242,239,230,.98) 100%); }
.menu-card--paper::after { content:'♉'; position:absolute; z-index:-2; top:62px; right:15px; color:rgba(237,76,44,.12); font-size:145px; }
.menu-card--red { background:#812c1f; }
.menu-card--red::after { content:'СПБ'; position:absolute; z-index:-2; top:70px; left:-16px; color:rgba(255,255,255,.13); font:800 83px/.8 var(--head); letter-spacing:-.1em; transform:rotate(-90deg) translateX(-100%); transform-origin:left top; }
.menu-card--photo { background:#46372b; }
.menu-card__image { position:absolute; z-index:-2; inset:0; display:block; overflow:hidden; }
.menu-card__image img { width:100%; height:100%; display:block; object-fit:cover; opacity:.84; transform:scale(1.04); }
.menu-card--photo-main .menu-card__image img { object-position:center 55%; }
.menu-card--photo-alt .menu-card__image img { object-position:center 56%; }
.menu-card--photo-shift .menu-card__image img { object-position:65% center; }
.menu-card--paper .menu-card__image img { opacity:.58; filter:saturate(.82) contrast(1.05); }
.menu-card--feature .menu-card__image img,.menu-card--red .menu-card__image img { opacity:.68; }
.menu-card--top { font-size:8px; font-weight:700; letter-spacing:.13em; }
.menu-card__top { display:flex; align-items:center; justify-content:space-between; font-size:8px; font-weight:700; letter-spacing:.12em; }
.menu-card__spark { color:var(--lime); font-size:15px; }
.menu-card--paper .menu-card__spark { color:var(--hot); }
.menu-card h3 { margin:auto 0 20px; padding-top:62px; position:relative; z-index:1; font:800 clamp(25px,3vw,40px)/.97 var(--head); letter-spacing:-.06em; }
.menu-card h3 em { color:var(--lime); font-style:normal; }
.menu-card--feature h3 em,.menu-card--red h3 em { color:#ffd982; }
.menu-card--paper h3 em { color:var(--hot); }
.menu-card a { min-height:36px; padding-top:11px; border-top:1px solid currentColor; position:relative; z-index:1; display:flex; justify-content:space-between; color:inherit; font-size:8px; font-weight:700; letter-spacing:.13em; text-decoration:none; }
.menu-card a span { font-size:14px; transition:transform .18s; }
.menu-card a:hover span { transform:translate(2px,-2px); }
.menu-footnote { max-width:1250px; margin:18px auto 0; padding-top:15px; border-top:1px solid #d6d2c7; display:flex; align-items:center; gap:12px; color:#6d6c64; font-size:10px; }
.menu-footnote__bull { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; color:#fff; background:var(--black); font-size:15px; }
.menu-footnote a { margin-left:auto; color:var(--ink); font-size:10px; font-weight:700; text-decoration:none; white-space:nowrap; }
.menu-footnote a:hover { color:var(--hot); }
.about-section { min-height:560px; display:grid; grid-template-columns:1fr 1fr; color:var(--paper); background:#20211e; }
.about__photo { min-height:520px; position:relative; overflow:hidden; }
.about__photo img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; filter:saturate(.82); }
.about__photo::after { content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(13,14,13,.63),transparent 45%); }
.about__photo-label { position:absolute; z-index:1; bottom:25px; left:clamp(22px,6vw,88px); color:white; font-size:8px; font-weight:700; letter-spacing:.14em; }
.about__copy { padding:clamp(58px,7vw,100px) clamp(28px,8vw,120px) 55px clamp(28px,7vw,100px); position:relative; overflow:hidden; }
.eyebrow--light { color:#bcb9af; }
.about__copy h2 { font-size:clamp(43px,5.8vw,73px); }
.about__text { max-width:370px; margin:26px 0 0; color:#bcb9af; font-size:12px; line-height:1.8; }
.rating { margin-top:30px; display:flex; align-items:center; gap:12px; }
.rating__stars { color:var(--lime); font-size:13px; letter-spacing:2px; }
.rating strong { font:700 22px var(--head); }
.rating > span:last-child { padding-left:10px; border-left:1px solid rgba(255,255,255,.24); color:#aaa89e; font-size:7px; line-height:1.6; letter-spacing:.08em; }
.about__vk { margin-top:29px; display:inline-flex; align-items:center; gap:11px; color:white; font-size:10px; font-weight:600; text-decoration:none; }
.about__vk:hover { color:var(--lime); }
.about__vk > span:last-child { color:var(--hot); font-size:15px; }
.vk-icon,.contact-vk__icon { width:23px; height:23px; border-radius:50%; display:grid; place-items:center; color:var(--ink); background:var(--lime); font:800 10px var(--head); letter-spacing:-.06em; }
.about__scribble { position:absolute; right:12px; bottom:17px; color:rgba(255,255,255,.08); font:800 38px/.86 var(--head); letter-spacing:-.07em; transform:rotate(-8deg); }
.contact-section { padding:clamp(76px,9vw,132px) clamp(22px,8vw,122px); display:grid; grid-template-columns:.88fr 1.12fr; gap:9%; color:var(--ink); background:var(--hot); }
.contact-heading .eyebrow { color:rgba(32,28,25,.68); }
.contact-heading .eyebrow span { color:var(--lime); }
.contact-heading h2 em { color:var(--lime); }
.contact-info { padding-top:10px; }
.contact-line { min-height:94px; padding:17px 0; border-top:1px solid rgba(24,24,22,.33); display:grid; grid-template-columns:.58fr 1fr 28px; align-items:center; gap:14px; color:inherit; text-decoration:none; }
.contact-line:last-of-type { border-bottom:1px solid rgba(24,24,22,.33); }
.contact-label { display:flex; flex-direction:column; gap:7px; font-size:8px; font-weight:700; letter-spacing:.15em; }
.contact-label i { color:rgba(24,24,22,.55); font:500 8px var(--body); font-style:normal; }
.contact-value { font:700 clamp(17px,2vw,24px)/1.15 var(--head); letter-spacing:-.04em; }
.contact-value i { color:var(--paper); font-style:normal; }
.contact-arrow { justify-self:end; color:var(--paper); font-size:19px; transition:transform .2s; }
.contact-line:hover .contact-arrow,.contact-vk:hover .contact-arrow { transform:translate(2px,-2px); }
.contact-vk { min-height:52px; padding:0 13px; margin-top:18px; border:1px solid rgba(24,24,22,.5); display:flex; align-items:center; gap:12px; color:var(--ink); font-size:9px; font-weight:700; letter-spacing:.14em; text-decoration:none; transition:color .2s,background .2s; }
.contact-vk:hover { color:var(--paper); background:var(--ink); }
.contact-vk__icon { width:24px; height:24px; color:var(--paper); background:var(--ink); }
.contact-vk .contact-arrow { margin-left:auto; color:var(--ink); }
.contact-vk:hover .contact-arrow { color:var(--lime); }
.footer { min-height:82px; padding:14px clamp(22px,5vw,78px); display:flex; align-items:center; justify-content:space-between; gap:20px; background:var(--black); }
.brand--footer .brand__logo { width:39px; height:39px; }
.brand--footer .brand__name { font-size:12px; }
.footer__middle,.footer__top { color:#aaa79d; font-size:8px; font-weight:600; letter-spacing:.11em; }
.footer__top { text-decoration:none; }
.footer__top:hover { color:var(--lime); }
@keyframes ticker { to { transform:translateX(-50%); } }
@media (min-width:1500px) { .hero__copy { margin-left:max(8vw,calc((100vw - 1360px)/2)); } }
@media (max-width:850px) {
  .topbar { min-height:70px; padding:0 23px; }
  .nav { gap:20px; }
  .nav a { font-size:10px; }
  .topbar__phone { padding:0 10px; font-size:10px; }
  .hero { min-height:660px; height:82vh; height:82svh; grid-template-columns:1fr; }
  .hero__copy { width:min(590px,83%); grid-column:1; margin-left:6%; }
  .hero__photo-index { top:105px; }
  .hero__stamp { right:16%; bottom:76px; }
  .menu-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .menu-card { min-height:270px; }
  .about-section { min-height:0; }
  .about__photo { min-height:440px; }
  .about__copy { padding:55px 30px 50px; }
  .contact-section { gap:5%; }
}
@media (max-width:620px) {
  html { scroll-padding-top:72px; }
  .topbar { position:absolute; min-height:66px; padding:0 17px; }
  .brand { gap:8px; }
  .brand__logo { width:38px; height:38px; }
  .brand__name { font-size:12px; }
  .brand__name small { font-size:7px; }
  .nav,.topbar__phone { display:none; }
  .menu-toggle { width:40px; height:40px; padding:0; border:1px solid rgba(255,255,255,.55); border-radius:50%; display:grid; align-content:center; justify-items:center; gap:5px; color:white; background:transparent; }
  .menu-toggle span { width:15px; height:1px; background:white; transition:transform .2s; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform:translateY(3px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform:translateY(-3px) rotate(-45deg); }
  .mobile-nav { position:absolute; z-index:19; top:66px; left:0; right:0; padding:8px 22px 17px; border-bottom:1px solid rgba(255,255,255,.18); background:#1c1c1a; }
  .mobile-nav:not([hidden]) { display:grid; }
  .mobile-nav a { min-height:45px; border-bottom:1px solid rgba(255,255,255,.12); display:flex; align-items:center; justify-content:space-between; color:white; font:600 14px var(--head); text-decoration:none; }
  .mobile-nav a span { color:var(--lime); font:600 9px var(--body); }
  .hero { min-height:750px; height:100vh; height:100svh; max-height:920px; }
  .hero__photo img { object-position:60% center; }
  .hero__shade { background:linear-gradient(90deg,rgba(14,15,14,.83),rgba(16,16,15,.35)),linear-gradient(0deg,rgba(16,16,15,.69),transparent 39%); }
  .hero__copy { width:auto; max-width:490px; margin:72px 20px 65px; align-self:end; }
  .hero__heading-wrap { margin-top:27px; }
  .hero__serial { top:-22px; right:0; }
  .hero h1 { font-size:clamp(57px,14vw,83px); }
  .hero__intro { max-width:350px; margin-top:19px; font-size:12px; }
  .hero__actions { margin-top:20px; gap:17px; }
  .button { min-height:44px; padding:0 14px; gap:17px; font-size:10px; }
  .hero__quiet-link { font-size:9px; }
  .hero__hours { margin-top:29px; }
  .hero__photo-index { top:91px; right:21px; }
  .photo-controls { top:44%; right:20px; flex-direction:column; }
  .photo-controls button { width:34px; height:34px; font-size:16px; }
  .hero__vertical { right:9px; top:40%; font-size:6px; }
  .hero__stamp { width:63px; height:63px; right:18px; bottom:90px; font-size:9px; }
  .hero__bottom { left:20px; right:20px; font-size:7px; letter-spacing:.09em; }
  .hero__bottom b { margin-left:5px; }
  .ticker { height:48px; }
  .ticker__track { gap:19px; font-size:10px; }
  .menu-section { padding:72px 19px 69px; }
  .section-head { margin-bottom:26px; align-items:flex-start; flex-direction:column; gap:15px; }
  .eyebrow { margin-bottom:15px; font-size:7px; }
  .section-head h2,.about__copy h2,.contact-heading h2 { font-size:clamp(41px,10vw,57px); }
  .section-head__note { max-width:355px; margin:0; font-size:11px; }
  .menu-grid { gap:8px; }
  .menu-card { min-height:229px; padding:14px 13px 12px; }
  .menu-card__top { font-size:6px; letter-spacing:.08em; }
  .menu-card h3 { padding-top:54px; margin-bottom:17px; font-size:clamp(23px,6vw,31px); }
  .menu-card a { min-height:32px; padding-top:9px; font-size:6px; letter-spacing:.09em; }
  .menu-footnote { align-items:flex-start; flex-wrap:wrap; gap:9px; font-size:9px; line-height:1.5; }
  .menu-footnote__bull { flex:0 0 24px; }
  .menu-footnote > span:nth-child(2) { flex:1; }
  .menu-footnote a { flex-basis:100%; margin-left:33px; font-size:10px; }
  .about-section { grid-template-columns:1fr; }
  .about__photo { min-height:300px; aspect-ratio:1.18; }
  .about__copy { padding:57px 22px 62px; }
  .about__text { margin-top:19px; font-size:11px; }
  .rating { margin-top:24px; gap:9px; }
  .rating__stars { font-size:11px; }
  .rating strong { font-size:19px; }
  .about__scribble { right:7px; bottom:12px; font-size:29px; }
  .contact-section { padding:70px 22px 68px; grid-template-columns:1fr; gap:30px; }
  .contact-info { padding-top:0; }
  .contact-line { min-height:79px; padding:14px 0; grid-template-columns:.55fr 1fr 18px; gap:8px; }
  .contact-label { font-size:7px; }
  .contact-value { font-size:clamp(15px,4vw,19px); }
  .contact-arrow { font-size:16px; }
  .contact-vk { min-height:46px; padding:0 9px; font-size:8px; }
  .footer { min-height:72px; padding:11px 16px; gap:9px; }
  .brand--footer .brand__logo { width:32px; height:32px; }
  .brand--footer .brand__name { font-size:10px; }
  .brand--footer .brand__name small { margin-top:3px; font-size:6px; }
  .footer__middle { display:none; }
  .footer__top { margin-left:auto; font-size:7px; }
}
@media (max-width:365px) {
  .hero h1 { font-size:56px; }
  .hero__intro { max-width:295px; }
  .menu-card { min-height:211px; }
  .menu-card__top { font-size:5px; }
  .contact-label { letter-spacing:.1em; }
  .contact-value { font-size:15px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}

/* Keep motion smooth without blocking first paint on reduced-motion devices. */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }