/*
 * showroom.css v2.0 — общие стили сайта ШОУРУМ
 * Обновление 23.04.2026: вынесены .bcrumbs, .ft-col-title, <main>, .visually-hidden.
 * Старые локальные .bcrumbs в project.css/catalog.css/uslugi.css/dizayneram.css нужно удалить.
 * Подключается на всех страницах: <link rel="stylesheet" href="/assets/showroom.css">
 * Специфика страницы — в отдельном <style> в конце <head> каждого файла
 */

/* ─── RESET ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{cursor:pointer;font:inherit;border:none;background:none}

/* ─── TOKENS ─── */
:root{
  /* Палитра */
  --cream:  #F2EDE6;
  --sand:   #EAE2D6;
  --slate:  #4A5568;
  --mauve:  #C29C96;
  --taupe:  #9B8880;
  --ink:    #1E1C1A;
  --ink60:  rgba(30,28,26,.58);
  --ink15:  rgba(30,28,26,.1);

  /* Типографика */
  --serif: 'Cormorant Garamond', Georgia, serif;
  --ui:    'DM Sans', system-ui, sans-serif;

  /* Отступы (горизонтальные паддинги секций) */
  --px:    20px;
  --px-md: 48px;
  --px-lg: 80px;
}

/* ─── BASE ─── */
body{
  font-family:var(--ui);
  background:var(--cream);
  color:var(--ink);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ─── TYPOGRAPHY UTILS ─── */
.serif{font-family:var(--serif)}

/* Section label: "── ПАРТНЁРСКАЯ ПРОГРАММА" */
.slabel{
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--taupe);
  display:flex;align-items:center;gap:10px;
  margin-bottom:12px;
}
.slabel::before{content:'';width:16px;height:1px;background:currentColor;display:block}

/* Section heading */
.sec-h{
  font-family:var(--serif);
  font-size:clamp(1.9rem,6vw,3rem);
  font-weight:300;line-height:1.1;
  margin-bottom:8px;
}

/* ─── LOGO (три столбика) ─── */
.logo{display:flex;gap:3.5px;align-items:flex-end}
.lb{width:4px}
.lb:nth-child(1){height:13px}
.lb:nth-child(2){height:18px}
.lb:nth-child(3){height:13px}

/* ─── NAV ─── */
.nav{
  position:fixed;inset:0 0 auto;z-index:500;
  height:56px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--px);
  transition:background .35s,border-color .35s;
}
/* nav transparent (главная поверх hero) */
.nav--transparent .lb{background:var(--cream)}
.nav--transparent.sc .lb{background:var(--cream)}
/* nav solid (все остальные страницы) */
.nav--solid,
.nav--transparent.sc{
  background:rgba(74,85,104,.97);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.nav--solid .lb{background:var(--cream)}

/* Ссылки (десктоп) */
.nav-links{display:none}
.nav-cta{display:none}

/* Бургер (мобиль) */
.burger{display:flex;flex-direction:column;gap:5px;width:36px;height:36px;padding:7px}
.burger span{
  display:block;height:1px;
  transition:transform .3s,opacity .3s,background .35s;
}
.nav--transparent .burger span{background:var(--cream)}
.nav--transparent.sc .burger span,
.nav--solid .burger span{background:var(--cream)}
.burger.op span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.op span:nth-child(2){opacity:0}
.burger.op span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Drawer */
.drawer{
  position:fixed;inset:0;z-index:490;
  background:var(--slate);color:var(--cream);
  display:flex;flex-direction:column;justify-content:center;
  padding:80px 32px 40px;
  transform:translateX(100%);transition:transform .42s cubic-bezier(.77,0,.18,1);
}
.drawer.op{transform:none}
.drl{display:flex;flex-direction:column;gap:0;margin-bottom:48px}
.drl a{
  font-family:var(--serif);font-size:clamp(2.2rem,8vw,3.2rem);font-weight:300;
  color:var(--cream);padding:8px 0;border-bottom:1px solid rgba(255,255,255,.1);
  opacity:0;transform:translateX(20px);transition:opacity .35s,transform .35s;
}
.drawer.op .drl a{opacity:1;transform:none}
.drawer.op .drl a:nth-child(1){transition-delay:.07s}
.drawer.op .drl a:nth-child(2){transition-delay:.13s}
.drawer.op .drl a:nth-child(3){transition-delay:.19s}
.drawer.op .drl a:nth-child(4){transition-delay:.25s}
.dr-cta{
  align-self:flex-start;padding:12px 24px;
  background:var(--cream);color:var(--ink);
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;
  opacity:0;transform:translateY(12px);transition:opacity .35s .3s,transform .35s .3s;
}
.drawer.op .dr-cta{opacity:1;transform:none}

@media(min-width:768px){
  .nav{height:64px;padding:0 var(--px-md)}
  .burger{display:none}
  .nav-links{
    display:flex;gap:26px;
    font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
    transition:color .35s;
  }
  .nav--transparent .nav-links{color:rgba(255,255,255,.5)}
  .nav--transparent.sc .nav-links,
  .nav--solid .nav-links{color:rgba(255,255,255,.7)}
  .nav-links a:hover{opacity:.7}
  .nav-cta{
    display:block;
    font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
    padding:8px 18px;transition:all .25s;
  }
  .nav--transparent .nav-cta{border:1px solid rgba(255,255,255,.28);color:var(--cream)}
  .nav--transparent.sc .nav-cta,
  .nav--solid .nav-cta{border:1px solid rgba(255,255,255,.35);color:var(--cream)}
  .nav--transparent .nav-cta:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)}
  .nav--transparent.sc .nav-cta:hover,
  .nav--solid .nav-cta:hover{background:var(--cream);color:var(--slate);border-color:var(--cream)}
}
@media(min-width:1200px){.nav{padding:0 var(--px-lg)}}

/* ─── BUTTONS ─── */
/* Первичная — кремовая (поверх тёмных фонов) */
.btn-cream{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 26px;background:var(--cream);color:var(--ink);
  font-family:var(--ui);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;
  transition:opacity .2s;
}
.btn-cream:hover{opacity:.86}

/* Обводная светлая (поверх тёмных фонов) */
.btn-outline-light{
  display:inline-flex;align-items:center;
  padding:13px 26px;background:transparent;color:rgba(255,255,255,.65);
  font-family:var(--ui);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.22);transition:all .25s;
}
.btn-outline-light:hover{border-color:rgba(255,255,255,.55);color:var(--cream)}

/* Первичная тёмная (поверх светлых фонов) */
.btn-slate{
  display:inline-flex;align-items:center;
  padding:13px 24px;background:var(--slate);color:var(--cream);
  font-family:var(--ui);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  transition:opacity .2s;
}
.btn-slate:hover{opacity:.82}

/* Обводная тёмная (поверх светлых фонов) */
.btn-outline{
  display:inline-flex;align-items:center;
  padding:12px 24px;border:1px solid var(--ink15);color:var(--ink60);
  font-family:var(--ui);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  transition:all .25s;
}
.btn-outline:hover{border-color:var(--slate);color:var(--slate)}

/* Мессенджер-кнопки (анимированные) */
.mbtn{
  display:flex;align-items:center;
  height:58px;position:relative;overflow:hidden;
  transition:transform .2s;
}
.mbtn:hover{transform:translateX(4px)}
.mbtn-bg{
  position:absolute;inset:0;
  transform:translateX(-101%);
  transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.mbtn:hover .mbtn-bg{transform:none}
.mbtn-inner{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:14px;
  width:100%;padding:0 18px;
}
.mbtn-icon{
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.mbtn-icon svg{width:17px;height:17px;fill:currentColor}
.mbtn-txt{flex:1}
.mbtn-title{display:block;font-weight:500;font-size:.84rem}
.mbtn-sub{display:block;font-size:.7rem;opacity:.6;letter-spacing:.02em}
.mbtn-arr{font-size:.9rem;opacity:.4;transition:opacity .2s,transform .2s}
.mbtn:hover .mbtn-arr{opacity:.85;transform:translateX(4px)}
.mbtn-wa{border:1px solid rgba(37,162,68,.22);color:#1a7a36;background:rgba(37,162,68,.06)}
.mbtn-wa .mbtn-bg{background:rgba(37,162,68,.1)}
.mbtn-wa .mbtn-icon{background:rgba(37,162,68,.14)}
.mbtn-tg{border:1px solid rgba(34,158,217,.22);color:#1270a0;background:rgba(34,158,217,.06)}
.mbtn-tg .mbtn-bg{background:rgba(34,158,217,.1)}
.mbtn-tg .mbtn-icon{background:rgba(34,158,217,.14)}

/* ─── SCROLL-STRIP (горизонтальный скролл карточек) ─── */
.hscroll{
  display:flex;gap:3px;overflow-x:auto;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.hscroll::-webkit-scrollbar{display:none}

/* Карточка проекта (используется на главной и странице проектов) */
.pc{
  flex:0 0 76vw;max-width:320px;scroll-snap-align:start;
  aspect-ratio:3/4;overflow:hidden;position:relative;background:#2a2520;
}
.pc img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.pc:hover img{transform:scale(1.04)}
.pc-info{
  position:absolute;bottom:0;left:0;right:0;padding:20px 16px 16px;
  background:linear-gradient(to top,rgba(15,13,10,.9) 0%,transparent 100%);
  transform:translateY(6px);transition:transform .3s;
}
.pc:hover .pc-info{transform:none}
.pc-tag{font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mauve);margin-bottom:3px}
.pc-name{font-size:.88rem;color:var(--cream);font-weight:300;line-height:1.3}
.pc-meta{font-size:.68rem;color:rgba(255,255,255,.65);margin-top:3px}

@media(min-width:768px){.pc{flex:0 0 300px}}
@media(min-width:1200px){.pc{flex:0 0 360px}}

/* ─── PHOTO-CAPTION (подпись поверх фото) ─── */
.photo-cap{
  position:absolute;bottom:14px;left:14px;
  background:rgba(242,237,230,.92);padding:7px 12px;
  font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);
}

/* ─── FOOTER ─── */
footer{
  background:#1a1916;color:var(--cream);
  padding:52px var(--px) 28px;
  border-top:2px solid var(--slate);
}
.ft{display:flex;align-items:center;gap:8px;margin-bottom:6px}
/* .lb используется внутри .ft — цвет переопределён ниже */
footer .lb{background:rgba(242,237,230,.45)}
.ft-tag{font-size:.74rem;color:rgba(255,255,255,.45);line-height:1.65;margin-bottom:44px}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:28px 16px;margin-bottom:40px}
.fc h4, .fc .ft-col-title{
  font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.4);margin-bottom:12px;
  font-weight:400;
}
.fc ul{display:flex;flex-direction:column;gap:8px}
.fc ul a{font-size:.82rem;color:rgba(255,255,255,.6);transition:color .2s}
.fc ul a:hover{color:var(--cream)}
.fb{
  border-top:1px solid rgba(255,255,255,.06);padding-top:18px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
  font-size:.62rem;color:rgba(255,255,255,.35);
}
@media(min-width:640px){.fg{grid-template-columns:repeat(3,1fr)}}
@media(min-width:768px){footer{padding:64px var(--px-md) 28px}.fg{grid-template-columns:repeat(5,1fr)}}
@media(min-width:1200px){footer{padding:72px var(--px-lg) 32px}}


/* ─── BREADCRUMBS (canonical v2.0) ─── */
.bcrumbs{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:16px var(--px);
  font-size:.82rem;line-height:1.4;
  color:var(--ink);
  background:var(--cream);
  border-bottom:1px solid var(--ink15);
  max-width:1400px;margin:0 auto;
}
.bcrumbs a{color:var(--taupe);transition:color .2s}
.bcrumbs a:hover{color:var(--ink)}
.bcrumbs-sep{color:var(--ink15);margin:0 2px}
.bcrumbs-cur{color:var(--ink);font-weight:400}
@media(min-width:768px){.bcrumbs{padding:20px var(--px-md)}}
@media(min-width:1200px){.bcrumbs{padding:22px var(--px-lg)}}

/* ─── MAIN landmark wrapper ─── */
main{display:block}

/* ─── A11Y: visually hidden ─── */
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ─── REVEAL ON SCROLL ─── */
.rv {opacity:0;transform:translateY(22px); transition:opacity .65s ease,transform .65s ease}
.rvl{opacity:0;transform:translateX(-22px);transition:opacity .65s ease,transform .65s ease}
.rvr{opacity:0;transform:translateX(22px); transition:opacity .65s ease,transform .65s ease}
.rv.in,.rvl.in,.rvr.in{opacity:1;transform:none}

/* ─── ANIMATIONS ─── */
@keyframes fup  {from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes fi   {to{opacity:1}}
@keyframes pulse{0%,100%{opacity:.2}50%{opacity:.65}}

/* ═══ ЛАЙТБОКС ДЛЯ ГАЛЕРЕЙ (общий, все страницы портфолио) ═══ */
.lb-trigger{cursor:zoom-in}
.lb-overlay{
  position:fixed;inset:0;z-index:2000;
  background:rgba(15,14,12,.94);
  display:none;
  align-items:center;justify-content:center;
  opacity:0;transition:opacity .25s ease;
}
.lb-overlay.open{display:flex;opacity:1}
.lb-stage{
  position:relative;
  width:min(96vw,1400px);height:88vh;
  display:flex;align-items:center;justify-content:center;
}
.lb-img{
  max-width:100%;max-height:100%;
  object-fit:contain;
  display:block;
  user-select:none;-webkit-user-select:none;
}
.lb-close{
  position:absolute;top:20px;right:20px;z-index:2;
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  color:var(--cream);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.lb-close:hover{background:rgba(255,255,255,.16)}
.lb-close svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none}
.lb-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  color:var(--cream);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;z-index:2;
}
.lb-nav:hover{background:rgba(255,255,255,.16)}
.lb-nav:disabled{opacity:.25;cursor:not-allowed}
.lb-nav svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.8;fill:none}
.lb-prev{left:20px}
.lb-next{right:20px}
.lb-counter{
  position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
  color:rgba(242,237,230,.55);
  font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;
  font-family:var(--ui);
  z-index:2;
}
body.lb-locked{overflow:hidden}
@media(max-width:767px){
  .lb-stage{width:100vw;height:100vh}
  .lb-close{top:12px;right:12px;width:40px;height:40px}
  .lb-nav{width:42px;height:42px}
  .lb-prev{left:8px}
  .lb-next{right:8px}
  .lb-counter{bottom:16px;font-size:.65rem}
}


/* ── LOGO SVG ── */
.logo-img{
  height:22px;width:auto;display:block;
  color:var(--cream); /* белый на hero */
  transition:color .35s;
}
/* После скролла — slate */
.nav.sc .logo-img{color:var(--cream)}

/* На мобиле — чуть меньше */
@media(min-width:768px){.logo-img{height:26px}}

/* ── Метки проектов: Без ретуши / Финал ── */
.pc-meta--raw{
  color:var(--mauve) !important;
  font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;
}
.pc-meta--fin{
  color:rgba(255,255,255,.55) !important;
  font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;
}

/* ── Проекты как ссылки ── */
a.pc-link{display:block;text-decoration:none;cursor:pointer}
a.pc-link:hover img{transform:scale(1.04)}

/* ── Archive card (6-я плашка без фото) ── */
.pc--archive{
  background:var(--slate);
  display:flex;
  align-items:center;
  justify-content:center;
}
.pc--archive .pc-archive-inner{
  position:relative;
  width:100%;height:100%;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:24px;
  text-align:center;
}
.pc--archive .pc-archive-logo{
  width:56px;height:auto;
  color:rgba(242,237,230,.25);
  margin-bottom:22px;
  transition:color .4s;
}
.pc--archive:hover .pc-archive-logo{color:rgba(242,237,230,.55)}
.pc--archive .pc-archive-num{
  font-family:var(--serif);
  font-size:clamp(2rem,7vw,2.8rem);
  font-weight:300;
  color:var(--cream);
  line-height:.9;
  margin-bottom:8px;
}
.pc--archive .pc-archive-sub{
  font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(242,237,230,.55);
  line-height:1.5;
  max-width:220px;
}
.pc--archive .pc-info{
  background:linear-gradient(to top,rgba(15,13,10,.55) 0%,transparent 100%);
}
.pc--archive .pc-name{color:var(--cream)}
.pc--archive .pc-tag{color:rgba(242,237,230,.7)}

/* ── PROJECTS ── */
.projects{padding:56px 0;background:var(--sand)}
.proj-head{display:flex;align-items:flex-end;justify-content:space-between;padding:0 var(--px) 24px;gap:16px}
.proj-sub{font-size:.9rem;color:var(--taupe);margin-top:4px}
.proj-scr{
  display:flex;gap:3px;overflow-x:auto;padding:0 var(--px) 4px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.proj-scr::-webkit-scrollbar{display:none}
@media(min-width:768px){
  .projects{padding:72px 0}
  .proj-head{padding:0 var(--px-md) 28px}
  .proj-scr{padding:0 var(--px-md) 4px}
}
@media(min-width:1200px){
  .proj-head{padding:0 var(--px-lg) 32px}
  .proj-scr{padding:0 var(--px-lg) 4px}
}

/* ── CTA ── */
.cta{padding:72px var(--px);background:var(--cream);border-top:1px solid var(--ink15)}
.cta-inner{max-width:520px}
.cta-sup{
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--taupe);margin-bottom:14px;
  display:flex;align-items:center;gap:10px;
}
.cta-sup::before{content:'';width:16px;height:1px;background:var(--taupe);display:block}
.cta-h{
  font-family:var(--serif);font-size:clamp(2.4rem,9vw,4.8rem);
  font-weight:300;line-height:.98;color:var(--ink);margin-bottom:14px;
}
.cta-h em{font-style:italic;color:var(--mauve);display:block}
.cta-body{font-size:1.05rem;color:var(--ink);line-height:1.7;margin-bottom:32px}

.cta-note{font-size:.9rem;color:rgba(30,28,26,.45);letter-spacing:.02em}
@media(min-width:768px){.cta{padding:96px var(--px-md)}.cta-btns{flex-direction:row}.mbtn{min-width:230px}}
@media(min-width:1200px){.cta{padding:112px var(--px-lg)}}

/* ── CTA PILLS (новые кнопки в стиле бренда) ── */
.cta-btns{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}

.cta-pill{
  display:inline-flex;align-items:center;gap:14px;
  padding:0 28px 0 6px;
  height:56px;
  border-radius:100px;
  font-family:var(--ui);font-size:.82rem;font-weight:500;letter-spacing:.04em;
  position:relative;overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
  white-space:nowrap;
}
.cta-pill:hover{transform:translateY(-2px)}

.cta-pill-icon{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.cta-pill-icon svg{width:20px;height:20px}

/* Shimmer animation */
.cta-pill::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.22) 50%,transparent 60%);
  transform:translateX(-100%);
  transition:transform .55s ease;
}
.cta-pill:hover::after{transform:translateX(100%)}

/* WhatsApp */
.cta-pill-wa{
  background:linear-gradient(135deg,#c8f7d8 0%,#25d366 100%);
  color:#0d4a22;
  box-shadow:0 4px 20px rgba(37,211,102,.25);
}
.cta-pill-wa:hover{box-shadow:0 8px 28px rgba(37,211,102,.38)}
.cta-pill-wa .cta-pill-icon{background:rgba(255,255,255,.3)}

/* Telegram */
.cta-pill-tg{
  background:linear-gradient(135deg,#b8e4f9 0%,#229ED9 100%);
  color:#082d44;
  box-shadow:0 4px 20px rgba(34,158,217,.25);
}
.cta-pill-tg:hover{box-shadow:0 8px 28px rgba(34,158,217,.38)}
.cta-pill-tg .cta-pill-icon{background:rgba(255,255,255,.3)}

/* Phone */
.cta-pill-ph{
  background:var(--cream);
  color:var(--ink);
  border:1px solid var(--ink15);
  box-shadow:0 2px 10px rgba(30,28,26,.06);
}
.cta-pill-ph:hover{box-shadow:0 6px 20px rgba(30,28,26,.12)}
.cta-pill-ph .cta-pill-icon{background:var(--sand)}

@media(min-width:600px){
  .cta-btns{flex-direction:row;flex-wrap:wrap}
}

/* ── FLOATING WIDGET ── */
.float-widget{
  position:fixed;bottom:24px;right:20px;z-index:600;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
}

/* Trigger button */
.fw-trigger{
  width:56px;height:56px;border-radius:50%;
  background:var(--slate);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;border:none;
  box-shadow:0 4px 16px rgba(74,85,104,.35);
  transition:transform .25s ease, box-shadow .25s ease;
  position:relative;z-index:2;
  animation:fw-pulse 3s ease-in-out 2s infinite;
}
.fw-trigger:hover{transform:scale(1.08);box-shadow:0 8px 24px rgba(74,85,104,.45)}
.fw-trigger.open{transform:rotate(45deg);background:var(--ink);animation:none}

@keyframes fw-pulse{
  0%,100%{box-shadow:0 4px 16px rgba(74,85,104,.35)}
  50%{box-shadow:0 4px 24px rgba(74,85,104,.6),0 0 0 8px rgba(74,85,104,.08)}
}

/* Logo icon inside trigger */
.fw-logo{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.fw-logo img{width:26px;height:auto;filter:brightness(0) invert(1)}

/* Plus → X icon */
.fw-x{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .2s;
}
.fw-x svg{width:18px;height:18px;stroke:var(--cream);stroke-width:2}
.fw-trigger.open .fw-logo{opacity:0}
.fw-trigger.open .fw-x{opacity:1}

/* Menu items */
.fw-menu{
  display:flex;flex-direction:column;align-items:flex-end;gap:8px;
  pointer-events:none;
}
.fw-item{
  display:flex;align-items:center;gap:10px;
  opacity:0;transform:translateY(12px) scale(.92);
  transition:opacity .25s ease, transform .25s ease;
}
.fw-item:nth-child(1){transition-delay:.05s}
.fw-item:nth-child(2){transition-delay:.1s}
.fw-item:nth-child(3){transition-delay:.15s}
.fw-widget-open .fw-item{
  opacity:1;transform:none;pointer-events:auto;
}

.fw-label{
  background:var(--ink);color:var(--cream);
  padding:6px 14px;border-radius:100px;
  font-size:.72rem;font-weight:400;letter-spacing:.04em;
  white-space:nowrap;
  box-shadow:0 2px 10px rgba(0,0,0,.18);
}

.fw-btn{
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s;
}
.fw-btn:hover{transform:scale(1.1)}
.fw-btn svg{width:20px;height:20px;fill:var(--cream)}

.fw-btn-wa{background:#25d366;box-shadow:0 3px 12px rgba(37,211,102,.35)}
.fw-btn-tg{background:#229ED9;box-shadow:0 3px 12px rgba(34,158,217,.35)}
.fw-btn-ph{background:var(--slate);box-shadow:0 3px 12px rgba(74,85,104,.3)}
.fw-btn-ph svg{fill:none;stroke:var(--cream);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

@media(min-width:768px){
  .float-widget{bottom:32px;right:32px}
  .fw-trigger{width:62px;height:62px}
}