/* ============================================================
   Wine Concierge — Алексей Митрофанов · tribruta.ru
   Общий стиль всех страниц. Палитра: глубокое бордо + крем.
   ============================================================ */

:root{
  --cream:#F5EFE3;
  --cream-2:#ECE0CD;
  --cream-3:#EDE3D1;
  --ink:#2A1014;
  --ink-70:rgba(42,16,20,.78);
  --ink-55:rgba(42,16,20,.6);
  --wine:#7A1E2B;
  --wine-h:#8F2533;
  --gold:#B98A4B;
  --gold-l:#C8A26A;
  --gold-pale:#E9C890;
  --dark:#140B0C;
  --dark-2:#0F0809;
  --paper:#F3EAD8;
  --paper-70:rgba(240,231,214,.8);
  --paper-55:rgba(240,231,214,.6);
  --line-gold:rgba(185,138,75,.22);
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Golos Text',-apple-system,'Segoe UI',Roboto,sans-serif;
  --pad-x:clamp(20px,5vw,56px);
  --radius:12px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--wine);color:var(--paper)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
section{scroll-margin-top:76px}

.wrap{max-width:1180px;margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x)}

/* ---------- типографика ---------- */
.kicker{
  font-size:clamp(11px,1.3vw,12.5px);
  letter-spacing:.38em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:600;
}
.dark .kicker,.kicker.on-dark{color:var(--gold-l)}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.dark h1,.dark h2,.dark h3{color:var(--paper)}
h1{font-size:clamp(36px,6.6vw,64px);line-height:1.05}
h2{font-size:clamp(28px,4.6vw,46px);line-height:1.1}
h3{font-size:clamp(19px,2.3vw,23px);line-height:1.25}
.lead{font-size:clamp(16px,1.9vw,18.5px);line-height:1.64;color:var(--ink-70)}
.dark .lead{color:var(--paper-70)}
.serif-accent{font-family:var(--serif);font-style:italic;font-weight:500}

/* ---------- шапка ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(15,8,9,.85);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(200,162,106,.16);
}
.site-header .bar{
  max-width:1180px;margin:0 auto;
  padding:12px var(--pad-x);
  display:flex;align-items:center;gap:20px;
}
.logo{display:flex;flex-direction:column;line-height:1.05;flex:none}
.logo .l1{font-size:10.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-l);font-weight:600}
.logo .l2{font-family:var(--serif);font-size:16px;color:var(--paper);margin-top:3px}
.site-nav{display:flex;gap:clamp(14px,2.4vw,30px);margin-left:auto}
.site-nav a{
  font-size:14px;color:rgba(240,231,214,.75);
  padding:6px 2px;border-bottom:1px solid transparent;
  transition:color .15s,border-color .15s;white-space:nowrap;
}
.site-nav a:hover{color:var(--paper)}
.site-nav a.active{color:var(--gold-pale);border-bottom-color:rgba(200,162,106,.55)}
.btn-header{
  flex:none;margin-left:auto;
  background:var(--wine);color:var(--paper);
  font-weight:600;font-size:14px;
  padding:11px 20px;border-radius:5px;
  border:1px solid rgba(200,162,106,.28);
  transition:background .15s,transform .15s;
  white-space:nowrap;
}
.site-nav + .btn-header{margin-left:0}
.btn-header:hover{background:var(--wine-h)}
@media(max-width:820px){
  .site-nav{display:none}
}

/* ---------- кнопки ---------- */
.btn{
  display:inline-block;
  font-weight:600;font-size:clamp(15px,1.7vw,16.5px);
  padding:16px 30px;border-radius:5px;
  transition:background .15s,border-color .15s,transform .15s;
}
.btn-wine{background:var(--wine);color:var(--paper);border:1px solid rgba(200,162,106,.3)}
.btn-wine:hover{background:var(--wine-h);transform:translateY(-1px)}
.btn-ghost{border:1px solid rgba(185,138,75,.5);color:var(--wine);font-weight:600}
.btn-ghost:hover{border-color:var(--gold);background:rgba(185,138,75,.08)}
.dark .btn-ghost,.btn-ghost.on-dark{color:var(--gold-pale)}
.dark .btn-ghost:hover{background:rgba(200,162,106,.1)}

/* ---------- секции ---------- */
.section{padding-top:clamp(64px,10vh,110px);padding-bottom:clamp(64px,10vh,110px)}
.section-tight{padding-top:clamp(48px,7vh,80px);padding-bottom:clamp(48px,7vh,80px)}
.dark{background:var(--dark);color:var(--paper)}
.dark-grad{background:linear-gradient(180deg,#1C0D10,var(--dark));color:var(--paper)}
.tint{background:var(--cream-2)}
.gold-rule{height:1px;background:linear-gradient(90deg,transparent,var(--gold) 18%,var(--gold) 82%,transparent);opacity:.6}

/* ---------- герой главной ---------- */
.hero{
  position:relative;background:var(--dark-2);overflow:hidden;
}
.hero-grid{
  max-width:1180px;margin:0 auto;
  padding:clamp(36px,6vh,64px) var(--pad-x) clamp(40px,7vh,72px);
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(28px,4vw,56px);align-items:center;
}
.hero h1{color:var(--paper);font-size:clamp(34px,5.6vw,58px)}
.hero h1 em{font-style:italic;font-weight:500;color:var(--gold-pale)}
.hero .sub{font-size:clamp(16px,1.9vw,18.5px);line-height:1.6;color:var(--paper-70);margin-top:clamp(16px,2.4vh,22px);max-width:520px}
.hero .creds{font-size:clamp(13px,1.5vw,14.5px);color:var(--gold-l);margin-top:18px;font-weight:600;letter-spacing:.02em}
.hero .cta-row{display:flex;align-items:center;gap:18px;margin-top:clamp(24px,3.6vh,32px);flex-wrap:wrap}
.hero .cta-note{font-size:14px;color:var(--paper-55)}
.hero-photo{
  position:relative;border-radius:var(--radius);overflow:hidden;
  aspect-ratio:4/4.6;max-height:520px;width:100%;
  background:var(--dark);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.75);
}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:60% 30%}
.hero-photo::after{
  content:"";position:absolute;inset:0;border-radius:var(--radius);
  border:1px solid rgba(200,162,106,.25);pointer-events:none;
  background:linear-gradient(190deg,transparent 70%,rgba(15,8,9,.5));
}
@media(max-width:760px){
  .hero-grid{grid-template-columns:1fr;padding-top:28px;padding-bottom:36px;gap:24px}
  .hero-photo{aspect-ratio:4/3.4;max-height:340px;order:-1}
  .hero-photo img{object-position:60% 22%}
  .hero .sub{margin-top:14px}
}

/* ---------- карточки-маршруты ---------- */
.routes-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.routes{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,2vw,22px);margin-top:clamp(26px,4vh,38px);
}
@media(max-width:860px){.routes{grid-template-columns:1fr}}
.route{
  display:flex;flex-direction:column;
  background:var(--cream-2);
  border:1px solid rgba(185,138,75,.24);
  border-radius:var(--radius);overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.route:hover{
  transform:translateY(-4px);
  border-color:rgba(185,138,75,.55);
  box-shadow:0 24px 48px -24px rgba(42,16,20,.35);
}
.route-img{position:relative;aspect-ratio:16/9.5;overflow:hidden;background:var(--dark)}
.route-img img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.route:hover .route-img img{transform:scale(1.045)}
.route-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(20,11,12,.42))}
.route-body{display:flex;flex-direction:column;flex:1;padding:clamp(18px,2.4vw,26px)}
.route-body .who{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:600}
.route-body h3{font-size:clamp(21px,2.6vw,26px);margin-top:8px;color:var(--ink)}
.route-body p{font-size:15px;line-height:1.55;color:var(--ink-70);margin-top:10px;flex:1}
.route-body .go{color:var(--wine);font-weight:600;font-size:14.5px;margin-top:16px;transition:transform .2s}
.route:hover .go{transform:translateX(3px)}

/* ---------- как это работает ---------- */
.steps{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,2vw,22px);margin-top:clamp(28px,4vh,40px);
  counter-reset:step;
}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.step{
  position:relative;
  background:var(--cream);
  border:1px solid rgba(185,138,75,.2);
  border-radius:10px;
  padding:clamp(22px,3vw,30px);
}
.step .num{
  font-family:var(--serif);font-size:clamp(34px,4.4vw,46px);
  line-height:1;color:var(--gold);opacity:.85;
}
.step h3{margin-top:14px;color:var(--wine)}
.step p{font-size:15px;line-height:1.58;color:var(--ink-70);margin-top:10px}

/* ---------- доверие / marquee ---------- */
.trust-label{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:rgba(185,138,75,.75);font-weight:600;text-align:center}
.marquee{
  overflow:hidden;margin-top:22px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.marquee-track{display:flex;width:max-content;animation:marquee 30s linear infinite}
.marquee-group{display:flex;align-items:center;gap:clamp(36px,5vw,72px);padding-right:clamp(36px,5vw,72px)}
.marquee-group span{
  font-family:var(--serif);font-size:clamp(19px,2.3vw,25px);
  color:rgba(42,16,20,.55);letter-spacing:.04em;white-space:nowrap;
}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- кейс / доказательство ---------- */
.case-card{
  background:var(--cream-2);
  border:1px solid rgba(185,138,75,.26);
  border-left:3px solid var(--wine);
  border-radius:var(--radius);
  padding:clamp(26px,4vw,44px);
}
.case-card .tag{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:600}
.case-card h3{font-size:clamp(21px,3vw,30px);margin-top:10px}
.case-card p{font-size:clamp(15px,1.8vw,17px);line-height:1.64;color:var(--ink-70);margin-top:14px}
.case-card strong{color:var(--wine);font-weight:600}

/* ---------- контакты: выбор канала ---------- */
.contact-channels{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:12px;margin-top:clamp(28px,4vh,40px);
  max-width:860px;margin-left:auto;margin-right:auto;
}
@media(max-width:700px){
  .contact-channels{grid-template-columns:repeat(2,1fr)}
  /* при нечётном числе каналов последняя кнопка занимает весь ряд */
  .contact-channels .chan-btn:last-child:nth-child(odd){grid-column:1/-1}
}
.chan-btn{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  background:#1A0F11;
  border:1px solid rgba(200,162,106,.22);
  border-radius:10px;
  padding:clamp(18px,2.6vw,26px) 12px;
  transition:border-color .15s,background .15s,transform .15s;
  text-align:center;
}
.chan-btn:hover{border-color:rgba(200,162,106,.55);background:#221316;transform:translateY(-2px)}
.chan-btn svg{display:block;flex:none}
.chan-btn .name{font-weight:600;font-size:15px;color:var(--paper)}
.chan-btn .hint{font-size:12.5px;color:var(--paper-55)}
.contact-alt{font-size:clamp(14px,1.6vw,15.5px);color:var(--paper-70);text-align:center;margin-top:26px}
.contact-alt a{color:var(--paper);border-bottom:1px solid rgba(200,162,106,.4)}

/* ---------- подвал ---------- */
.footer-note{
  font-size:13.5px;line-height:1.6;font-style:italic;color:rgba(240,231,214,.5);
  text-align:center;max-width:660px;margin:clamp(36px,5vh,48px) auto 0;
  border-top:1px solid rgba(200,162,106,.14);padding-top:26px;
}
.footer-brand{text-align:center;margin-top:clamp(30px,4vh,44px)}
.footer-brand .fb1{font-family:var(--serif);font-size:clamp(18px,2.3vw,21px);color:var(--gold-l)}
.footer-brand .fb2{font-size:13px;color:rgba(240,231,214,.45);margin-top:6px}
.footer-links{display:flex;flex-wrap:wrap;gap:clamp(14px,2.6vw,32px);justify-content:center;align-items:center;margin-top:clamp(28px,4vh,40px)}
.footer-links a{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;color:var(--paper-70);transition:color .15s}
.footer-links a:hover{color:var(--paper)}
.footer-links a span{border-bottom:1px solid rgba(185,138,75,.4)}
.footer-nav{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center;margin-top:clamp(24px,3.4vh,32px)}
.footer-nav a{font-size:13.5px;color:rgba(240,231,214,.55);border-bottom:1px solid transparent}
.footer-nav a:hover{color:var(--paper-70);border-bottom-color:rgba(200,162,106,.35)}

/* ---------- страницы услуг: общее ---------- */
.page-hero{position:relative;background:var(--dark-2);overflow:hidden}
.page-hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42}
.page-hero .shade{position:absolute;inset:0;background:linear-gradient(100deg,var(--dark) 18%,rgba(20,11,12,.9) 46%,rgba(20,11,12,.42) 76%,rgba(20,11,12,.6) 100%)}
.page-hero .shade-b{position:absolute;inset:0;background:linear-gradient(to top,var(--dark) 1%,transparent 26%)}
.page-hero .inner{position:relative;max-width:1180px;margin:0 auto;padding:clamp(56px,10vh,110px) var(--pad-x) clamp(60px,10vh,104px)}
.page-hero .inner-box{max-width:720px}
.page-hero h1{color:var(--paper)}
.page-hero .lead{margin-top:clamp(18px,3vh,26px);max-width:620px;color:var(--paper-70)}
.page-hero .kicker{color:var(--gold-l)}
.page-hero .gold-note{font-size:clamp(15px,1.8vw,17px);color:var(--gold-pale);margin-top:16px;max-width:620px}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px;margin-top:clamp(32px,5vh,48px)}
.card{
  background:var(--cream-2);
  border:1px solid rgba(185,138,75,.18);
  border-top:2px solid var(--wine);
  border-radius:10px;
  padding:clamp(24px,3vw,32px);
}
.tint .card,.card.on-tint{background:var(--cream)}
.card h3{color:var(--wine)}
.card p{font-size:15px;line-height:1.58;color:var(--ink-70);margin-top:12px}
.card svg{display:block;margin-bottom:16px}
.card.flat{border-top:1px solid rgba(185,138,75,.18)}

.checklist{
  display:flex;flex-direction:column;gap:1px;
  background:rgba(185,138,75,.22);
  border:1px solid rgba(185,138,75,.22);
  border-radius:10px;overflow:hidden;
  margin-top:clamp(32px,5vh,48px);
}
.checklist .row{display:flex;gap:18px;align-items:flex-start;background:var(--cream);padding:clamp(20px,2.8vw,28px) clamp(20px,3vw,32px)}
.tint .checklist .row{background:var(--cream)}
.checklist .row svg{flex:none;margin-top:2px}
.checklist .row h3{font-size:clamp(17.5px,2.1vw,21px)}
.checklist .row p{font-size:14.5px;line-height:1.56;color:var(--ink-70);margin-top:7px}

.num-steps{display:flex;flex-direction:column;gap:16px;margin-top:clamp(32px,5vh,48px)}
.num-step{
  display:flex;gap:clamp(18px,3vw,32px);align-items:flex-start;
  background:var(--cream-2);border:1px solid rgba(185,138,75,.18);
  border-radius:10px;padding:clamp(24px,3.2vw,36px);
}
.num-step.hl{border-left:3px solid var(--wine)}
.num-step .n{font-family:var(--serif);font-size:clamp(32px,4.6vw,50px);line-height:.9;color:var(--gold);flex:none;min-width:clamp(44px,6vw,76px)}
.num-step h3{font-size:clamp(19px,2.3vw,25px)}
.num-step h3 small{color:var(--ink-55);font-weight:400;font-style:italic;font-size:.78em}
.num-step h3 small.hl{color:var(--wine)}
.num-step p{font-size:15.5px;line-height:1.6;color:var(--ink-70);margin-top:11px;max-width:760px}

.link-list{display:flex;flex-direction:column;gap:1px;background:rgba(185,138,75,.2);border:1px solid rgba(185,138,75,.2);border-radius:10px;overflow:hidden;margin-top:18px}
.link-list a,.link-list .row-static{
  display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline;justify-content:space-between;
  background:var(--cream-2);padding:clamp(16px,2.2vw,22px) clamp(18px,2.8vw,28px);
  transition:background .15s;
}
.link-list a:hover{background:#E4D5BD}
.link-list .nm{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline}
.link-list .nm b{font-family:var(--serif);font-weight:600;font-size:clamp(17px,2.1vw,22px);color:var(--ink)}
.link-list .nm i{font-style:normal;font-size:13.5px;color:var(--ink-55)}
.link-list .act{color:var(--wine);font-weight:600;font-size:14px;white-space:nowrap}
.link-list .act.mut{color:var(--ink-55);font-weight:500;font-style:italic}

/* приватная страница — люкс-режим */
.lux{background:#100708;color:#E8DDCB}
.lux h1,.lux h2,.lux h3{color:#F0E7D6;font-weight:500}
.lux .lead{color:rgba(232,221,203,.74)}
.lux .kicker{letter-spacing:.44em;font-weight:500;color:var(--gold)}
.lux-sep{width:54px;height:1px;background:rgba(185,138,75,.55);margin:clamp(28px,4.4vh,44px) 0}
.lux-sep.c{margin-left:auto;margin-right:auto}
.lux-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:1px;background:rgba(185,138,75,.16);border:1px solid rgba(185,138,75,.16);border-radius:6px;overflow:hidden;margin-top:clamp(44px,7vh,72px)}
.lux-cell{background:#140A0B;padding:clamp(30px,4.2vw,48px)}
.lux-cell svg{opacity:.85}
.lux-cell h3{font-size:clamp(20px,2.5vw,26px);margin-top:20px}
.lux-cell p{font-size:15.5px;line-height:1.66;color:rgba(232,221,203,.68);margin-top:13px}
.lux-roman{display:flex;gap:clamp(22px,3.6vw,48px);align-items:baseline;flex-wrap:wrap;border-bottom:1px solid rgba(185,138,75,.14);padding-bottom:clamp(34px,5.4vh,56px)}
.lux-roman:last-child{border-bottom:none;padding-bottom:0}
.lux-roman .rn{font-family:var(--serif);font-style:italic;font-size:clamp(26px,3.4vw,38px);color:rgba(185,138,75,.55);flex:none}
.lux-roman h3{font-size:clamp(21px,2.7vw,29px)}
.lux-roman p{font-size:clamp(15px,1.8vw,16.5px);line-height:1.7;color:rgba(232,221,203,.7);margin-top:13px}
.lux .chan-btn{background:#150C0E;border-radius:6px}
.lux .chan-btn:hover{background:#1C1013}

/* ---------- анимация появления ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.08s}
.reveal-d2{transition-delay:.16s}
.reveal-d3{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .marquee-track{animation:none;flex-wrap:wrap}
  html{scroll-behavior:auto}
}

/* ---------- цитаты ---------- */
blockquote.pull{
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(22px,3.4vw,34px);line-height:1.3;color:var(--wine);
  padding-left:clamp(18px,2.6vw,30px);border-left:3px solid var(--gold);
}
blockquote.pull.gold{color:var(--gold)}

/* ---------- медиа-цифры ---------- */
.stats{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:clamp(8px,2vw,16px)}
.stats .stat{flex:1;min-width:160px;padding:clamp(18px,2.6vw,26px) clamp(12px,2vw,20px);text-align:center}
.stats .v{font-family:var(--serif);font-size:clamp(30px,4.6vw,48px);line-height:1;color:var(--gold-pale)}
.stats .l{font-size:clamp(12.5px,1.5vw,14px);color:rgba(240,231,214,.66);margin-top:11px}
.stats .div{width:1px;align-self:stretch;background:rgba(200,162,106,.24)}