/* ══════════════════════════════════════════════════════════════
   DIRTYWORK — SITE CSS
   Общие стили сайта: сброс, шапка, футер, кнопки, тема.
   Стили конкретных страниц лежат в отдельных файлах (см. home.css).
   ══════════════════════════════════════════════════════════════ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}

/* Визуально скрыт, но остаётся в DOM для скринридеров и поисковых ботов —
   нужен там, где по дизайну на странице нет "настоящего" h1 (например /about/). */
.sr-only{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
body{font-family:var(--font-body);background:var(--darkest);color:var(--text);transition:background .3s,color .3s;overflow-x:hidden}

:root{
  --site-width: 1380px;
  --site-pad:   36px;
  --nav-ease:   cubic-bezier(.4,0,.2,1);
  --header-h:   130px; /* топбар + сабнав + gap */

  --pill-bg:    color-mix(in srgb, var(--darkest) 90%, transparent);
  --pill-b:     var(--card-border);
  --pill-sh:    0 4px 32px rgba(0,0,0,.08);
  --pill-r:     18px;
  --gap:        8px; /* зазор между двумя пилюлями */
}

.container{width:100%;max-width:var(--site-width);margin:0 auto;padding:0 var(--site-pad)}

/* ─── КНОПКИ ─── */
.btn-p{padding:15px 30px;border-radius:999px;background:var(--accent);color:var(--darkest);font-family:var(--font-head);font-size:15px;font-weight:600;text-decoration:none;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:9px;transition:transform .22s ease,opacity .22s ease;white-space:nowrap}
.btn-p:hover{transform:translateY(-2px);opacity:.87}
.btn-o{padding:15px 30px;border-radius:999px;background:transparent;color:var(--text);font-family:var(--font-head);font-size:15px;font-weight:600;text-decoration:none;border:1.5px solid var(--card-border);cursor:pointer;display:inline-flex;align-items:center;gap:9px;transition:border-color .22s ease,background .22s ease;white-space:nowrap}
.btn-o:hover{border-color:var(--card-hover-border);background:var(--accent-subtle)}

/* ─── SECTION TAG / TITLE ─── */
.s-tag{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.s-tag::before{content:'';width:20px;height:1px;background:var(--text-muted);flex-shrink:0}
.s-title{font-family:var(--font-head);font-size:clamp(34px,4vw,56px);font-weight:700;line-height:1.04;letter-spacing:-.03em;color:var(--text)}
.s-title em{font-style:normal;color:var(--text-dim)}

/* ══════════════════════════════════════
   GOO LOGO
══════════════════════════════════════ */
.dw-logo-goo-wrap{position:relative;width:42px;height:42px;flex-shrink:0}
.dw-goo-layer{position:absolute;inset:0;filter:url(#dw-goo);display:flex;align-items:center;justify-content:center}
.dw-core-svg{position:absolute;width:42px;height:42px;overflow:visible;animation:dw-breathe 4s ease-in-out infinite alternate}
.dw-core-path{fill:var(--accent);transition:d .8s cubic-bezier(.4,0,.2,1);d:path("M100,35 C150,15 180,70 150,120 C120,170 140,160 100,170 C60,180 30,150 40,100 C50,50 50,55 100,35 Z")}
.dw-drop{position:absolute;background:var(--accent);border-radius:50%;transition:all .8s cubic-bezier(.4,0,.2,1)}
.dw-d1{width:11px;height:11px;margin-top:-24px;margin-left:-10px;animation:dw-float 3s infinite alternate ease-in-out}
.dw-d2{width:8px;height:8px;margin-top:18px;margin-left:21px;animation:dw-float 4s infinite alternate-reverse ease-in-out}
.dw-d3{width:9px;height:9px;margin-top:22px;margin-left:-17px;animation:dw-float 3.5s infinite alternate ease-in-out}
.dw-face{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease .3s;pointer-events:none;z-index:10}
.dw-feat{position:absolute;border-radius:50%;filter:blur(1.3px)}
.dw-eye-l{width:7px;height:5px;background:rgba(0,0,0,.55);top:20px;left:13px;transform:rotate(-15deg);animation:dw-blink 4s infinite}
.dw-eye-r{width:7px;height:5px;background:rgba(0,0,0,.55);top:20px;right:13px;transform:rotate(15deg);animation:dw-blink 4s infinite}
.dw-nose{width:2px;height:7px;background:rgba(255,255,255,.12);top:23px;left:50%;margin-left:-1px;border-radius:2px}
.dw-mouth{width:8px;height:3px;background:rgba(0,0,0,.45);top:31px;left:50%;margin-left:-4px}
.dw-logo:hover .dw-core-path{d:path("M100,20 C140,20 155,55 155,90 C155,130 130,170 100,180 C70,170 45,130 45,90 C45,55 60,20 100,20 Z")}
.dw-logo:hover .dw-drop{margin:0;transform:scale(0)}
.dw-logo:hover .dw-face{opacity:1}
.dw-logo:hover .dw-core-svg{transform:scale(1.06)}
@keyframes dw-breathe{0%{transform:scale(.94) rotate(-3deg)}100%{transform:scale(1.03) rotate(3deg)}}
@keyframes dw-float{0%{transform:translate(-3px,-3px)}100%{transform:translate(3px,3px)}}
@keyframes dw-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}

/* ══════════════════════════════════════════════
   НАВБАР — три состояния через JS-классы
   .state-default    → одна пилюля (два ряда внутри)
   .state-split      → две отдельные пилюли
   .state-top-hidden → нижняя пилюля одна (верхняя спрятана)
══════════════════════════════════════════════ */
.dw-nav{
  position: fixed;
  top: 14px; left: 0; right: 0;
  z-index: 1001;
  transition: top .4s var(--nav-ease);
}

.dw-wrap{
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: gap .4s var(--nav-ease);
}

.dw-top{
  display: flex; align-items: center;
  height: 62px;
  padding: 0 10px;
  background: var(--pill-bg);
  border: 1px solid var(--pill-b);
  border-bottom: 1px solid var(--pill-b);
  border-radius: var(--pill-r) var(--pill-r) 0 0;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: none;
  transition:
    height        .4s var(--nav-ease),
    opacity       .35s var(--nav-ease),
    border-radius .4s var(--nav-ease),
    border        .4s var(--nav-ease),
    box-shadow    .4s var(--nav-ease),
    margin-bottom .4s var(--nav-ease);
}

.dw-sub{
  display: flex; align-items: center;
  height: 52px;
  padding: 0 8px;
  background: var(--pill-bg);
  border: 1px solid var(--pill-b);
  border-top: none;
  border-radius: 0 0 var(--pill-r) var(--pill-r);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: none;
  transition:
    height        .4s var(--nav-ease),
    border-radius .4s var(--nav-ease),
    border        .4s var(--nav-ease),
    box-shadow    .4s var(--nav-ease);
}

.dw-inner-sep{
  height: 1px;
  background: var(--pill-b);
  margin: 0 10px;
  opacity: 1;
  transition: opacity .3s var(--nav-ease), margin .4s var(--nav-ease);
}

/* STATE: SPLIT — две отдельные пилюли (скролл вверх) */
.dw-nav.state-split .dw-wrap{ gap: var(--gap); }
.dw-nav.state-split .dw-top{
  border-radius: var(--pill-r);
  border: 1px solid var(--pill-b);
  box-shadow: var(--pill-sh);
}
.dw-nav.state-split .dw-inner-sep{ opacity: 0; margin: 0; }
.dw-nav.state-split .dw-sub{
  border-radius: var(--pill-r);
  border: 1px solid var(--pill-b);
  box-shadow: var(--pill-sh);
}

/* STATE: TOP HIDDEN — только нижняя пилюля (скролл вниз) */
.dw-nav.state-top-hidden{ top: 14px; }
.dw-nav.state-top-hidden .dw-top{
  height: 0;
  opacity: 0;
  pointer-events: none;
  border-width: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
}
.dw-nav.state-top-hidden .dw-inner-sep{ opacity: 0; margin: 0; }
.dw-nav.state-top-hidden .dw-sub{
  border-radius: var(--pill-r);
  border: 1px solid var(--pill-b);
  box-shadow: var(--pill-sh);
}

/* ── ЭЛЕМЕНТЫ ВЕРХНЕГО РЯДА ── */
.dw-logo{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0;padding:0 4px}
.dw-logo-text{display:flex;flex-direction:column;line-height:1.1}
.dw-logo-name{font-family:var(--font-head);font-size:16px;font-weight:700;letter-spacing:.09em;color:var(--text)}
.dw-logo-sub{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-muted);margin-top:2px}

.dw-vsep{width:1px;height:20px;background:var(--pill-b);flex-shrink:0;margin:0 10px}

.dw-top-links{display:flex;align-items:center;gap:2px}
.dw-top-link{
  padding:8px 14px;font-size:14px;font-weight:500;
  color:var(--text-dim);border-radius:10px;white-space:nowrap;
  text-decoration:none;display:flex;align-items:center;gap:7px;
  transition:color .18s ease,background .18s ease;
}
.dw-top-link:hover{color:var(--text);background:var(--accent-subtle)}

.dw-splash{width:15px;height:15px;flex-shrink:0;opacity:.6;transition:opacity .18s ease}
.dw-top-link:hover .dw-splash{opacity:1}

.dw-top-right{display:flex;align-items:center;gap:16px;margin-left:auto;padding-right:6px}
.dw-top-phone{font-size:14px;font-weight:600;color:var(--text-dim);text-decoration:none;transition:color .18s;white-space:nowrap}
.dw-top-phone:hover{color:var(--text)}
.dw-top-mail{font-size:13px;color:var(--text-dim);text-decoration:none;transition:color .18s;white-space:nowrap}
.dw-top-mail:hover{color:var(--text-dim)}
.dw-top-cta{
  padding:11px 24px;border-radius:999px;
  background:var(--accent);color:var(--darkest);
  font-family:var(--font-head);font-size:13px;font-weight:600;letter-spacing:.03em;
  text-decoration:none;border:none;cursor:pointer;white-space:nowrap;
  display:flex;align-items:center;gap:8px;
  transition:transform .22s ease,opacity .22s ease;
}
.dw-top-cta:hover{transform:translateY(-2px);opacity:.87}

/* ── ЭЛЕМЕНТЫ НИЖНЕГО РЯДА ── */
.dw-svc-list{display:flex;align-items:center;flex:1;overflow-x:auto;padding:0 4px}
.dw-svc-list::-webkit-scrollbar{display:none}
.dw-svc-link{
  padding:0 14px;height:40px;
  display:flex;align-items:center;
  font-size:14px;font-weight:500;
  color:var(--text-dim);text-decoration:none;
  white-space:nowrap;border-radius:10px;
  transition:color .18s ease,background .18s ease;
}
.dw-svc-link:hover{color:var(--text);background:var(--accent-subtle)}

.dw-vsep-s{width:1px;height:20px;background:var(--pill-b);flex-shrink:0;margin:0 6px}

.dw-sub-right{display:flex;align-items:center;gap:2px;padding-right:4px}
.dw-portfolio-link{
  padding:0 14px;height:40px;
  display:flex;align-items:center;gap:7px;
  font-size:14px;font-weight:700;
  color:var(--text);text-decoration:none;white-space:nowrap;border-radius:10px;
  transition:color .18s ease,background .18s ease;
}
.dw-portfolio-link:hover{color:var(--accent);background:var(--accent-subtle)}
.dw-flame{flex-shrink:0;width:10px;height:14px}
.dw-contact-link{
  padding:0 14px;height:40px;
  display:flex;align-items:center;
  font-size:14px;font-weight:500;
  color:var(--text-dim);text-decoration:none;white-space:nowrap;border-radius:10px;
  transition:color .18s ease,background .18s ease;
}
.dw-contact-link:hover{color:var(--text);background:var(--accent-subtle)}

/* ── БУРГЕР ── */
.dw-hamburger{display:none;background:none;border:none;cursor:pointer;padding:6px;flex-direction:column;gap:5px;margin-left:auto}
.dw-hamburger span{display:block;width:24px;height:2px;background:var(--text);border-radius:1px;transition:transform .22s var(--nav-ease),opacity .22s var(--nav-ease)}
.dw-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.dw-hamburger.open span:nth-child(2){opacity:0}
.dw-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── МОБИЛЬНОЕ МЕНЮ ── */
.dw-mob-menu{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--darkest);z-index:1002;overflow-y:auto;transform:translateX(100%);transition:transform .3s var(--nav-ease);padding-top:0}
.dw-mob-header{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:0 var(--site-pad);height:68px;background:var(--darkest);border-bottom:1px solid var(--card-border)}
.dw-mob-header-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.dw-mob-header-name{font-family:var(--font-head);font-size:15px;font-weight:700;letter-spacing:.09em;color:var(--text)}
.dw-mob-close{width:36px;height:36px;border-radius:10px;background:var(--accent-subtle);border:1px solid var(--card-border);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text);transition:background .18s ease}
.dw-mob-close:hover{background:var(--surface2)}
.dw-mob-close svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.dw-mob-quick{display:flex;align-items:center;gap:6px;padding:12px var(--site-pad);border-bottom:1px solid var(--card-border)}
.dw-mob-quick-link{padding:8px 16px;border-radius:10px;font-size:13px;font-weight:600;color:var(--text);text-decoration:none;display:flex;align-items:center;gap:6px;background:var(--accent-subtle);transition:background .18s ease}
.dw-mob-quick-link:hover{background:var(--surface2)}
.dw-mob-menu.open{transform:translateX(0)}
.dw-mob-body{padding:16px var(--site-pad) 48px}
.dw-mob-section{margin-bottom:28px}
.dw-mob-cap{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px;padding-bottom:8px;border-bottom:1px solid var(--card-border)}
.dw-mob-a{display:flex;align-items:center;justify-content:space-between;padding:14px 0;font-size:18px;font-family:var(--font-head);font-weight:600;color:var(--text);text-decoration:none;border-bottom:1px solid var(--card-border);transition:color .18s ease,padding-left .18s ease}
.dw-mob-a:hover{color:var(--accent);padding-left:6px}
.dw-mob-a-sm{font-size:14px;font-family:var(--font-body);font-weight:500;padding:11px 0}
.dw-mob-cta{display:flex;gap:8px;margin-top:28px}
.dw-mob-btn{flex:1;padding:14px;border-radius:14px;text-align:center;font-family:var(--font-head);font-size:14px;font-weight:600;text-decoration:none;transition:transform .2s ease,opacity .2s ease}
.dw-mob-btn:hover{transform:translateY(-2px);opacity:.85}
.dw-mob-p{background:var(--accent);color:var(--darkest)}
.dw-mob-s{background:var(--accent-subtle);color:var(--text);border:1px solid var(--card-border)}

/* ══════════════════════════════════════
   ХЛЕБНЫЕ КРОШКИ
══════════════════════════════════════ */
.dw-breadcrumbs{padding:calc(var(--header-h) + 28px) 0 0}
.dw-bc-list{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.dw-bc-item{display:flex;align-items:center;gap:6px}
.dw-bc-list a{font-size:13px;color:var(--text-muted);text-decoration:none;transition:color .18s}
.dw-bc-list a:hover{color:var(--text)}
.dw-bc-sep{color:var(--text-muted);opacity:.5;font-size:13px}
.dw-bc-current{font-size:13px;color:var(--text-dim);font-weight:500}

/* ══════════════════════════════════════
   CTA (перед футером, один раз на весь сайт — includes/footer.php)
══════════════════════════════════════ */
.dw-cta{padding:110px 0;border-top:1px solid var(--card-border)}
.dw-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:44px}
.dw-cta-title{font-family:var(--font-head);font-size:clamp(36px,4.5vw,58px);font-weight:800;line-height:1.03;letter-spacing:-.03em;color:var(--text)}
.dw-cta-title em{font-style:normal;color:var(--text-dim)}
.dw-cta-right{display:flex;flex-direction:column;align-items:flex-end;gap:11px;flex-shrink:0}
.dw-cta-note{font-size:12px;color:var(--text-muted)}

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
.dw-footer{border-top:1px solid var(--card-border);padding-top:72px}

.dw-fgrid{display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr;gap:56px;padding:60px 0;border-bottom:1px solid var(--card-border)}

.dw-flogo{display:flex;align-items:center;gap:11px;text-decoration:none;margin-bottom:22px}
.dw-fltext{display:flex;flex-direction:column;line-height:1.1}
.dw-flname{font-family:var(--font-head);font-size:15px;font-weight:700;letter-spacing:.09em;color:var(--text)}
.dw-flsub{font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-muted);margin-top:2px}

.dw-ftagline{font-size:14px;line-height:1.8;color:var(--text-dim);max-width:320px;margin-bottom:28px}

.dw-fcontacts{display:flex;flex-direction:column;gap:8px;margin-bottom:28px}
.dw-fcontacts a{font-size:13px;font-weight:500;color:var(--text-dim);text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:color .18s}
.dw-fcontacts a:hover{color:var(--text)}
.dw-cdot{width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.5;flex-shrink:0}

.dw-fsocials{display:flex;gap:7px}
.dw-fsoc{width:34px;height:34px;border-radius:10px;background:var(--accent-subtle);border:1px solid var(--card-border);display:flex;align-items:center;justify-content:center;text-decoration:none;color:var(--text-dim);transition:background .18s,color .18s,border-color .18s}
.dw-fsoc:hover{background:var(--accent);color:var(--darkest);border-color:var(--accent)}
.dw-fsoc svg{width:15px;height:15px;fill:currentColor}

.dw-fcol-title{font-family:var(--font-head);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:18px}
.dw-fcol-list{list-style:none;display:flex;flex-direction:column;gap:12px}
.dw-fcol-list a{font-size:14px;font-weight:500;color:var(--text-dim);text-decoration:none;display:inline-flex;align-items:center;gap:0;transition:color .18s}
.dw-fcol-list a:hover{color:var(--text)}

.dw-ff-flame{width:9px;height:12px;margin-left:6px;flex-shrink:0}

.dw-fvisits{padding:14px 0 0}
.dw-fvisits-pill{display:inline-flex;align-items:center;gap:8px;padding:4px 14px 4px 4px;border-radius:999px;background:var(--accent-subtle);font-size:11px;color:var(--text-muted);white-space:nowrap}
.dw-fvisits-avatar{width:22px;height:22px;border-radius:50%;flex-shrink:0;display:block;background:var(--surface2)}

.dw-fbottom{padding:22px 0;display:flex;align-items:center;justify-content:space-between;gap:16px}
.dw-fcopy{font-size:12px;color:var(--text-muted)}
.dw-flegal{display:flex;gap:22px}
.dw-flegal a{font-size:12px;color:var(--text-muted);text-decoration:none;transition:color .18s}
.dw-flegal a:hover{color:var(--text-dim)}
.dw-fmade{font-size:12px;color:var(--text-muted)}
.dw-fmade span{color:var(--text-dim);font-weight:500}
.dw-fmade a{color:var(--text-dim);text-decoration:none;transition:color .18s}
.dw-fmade a:hover{color:var(--text)}

/* ══════════════════════════════════════
   ПЕРЕКЛЮЧАТЕЛЬ ТЕМЫ
══════════════════════════════════════ */
#dw-tt{position:fixed;bottom:24px;right:24px;z-index:9999;width:44px;height:44px;border-radius:50%;border:1px solid var(--card-border);background:color-mix(in srgb,var(--darkest) 85%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;transition:transform .25s ease,border-color .25s ease;box-shadow:0 2px 12px rgba(0,0,0,.07)}
#dw-tt:hover{transform:scale(1.12) rotate(12deg);border-color:var(--accent)}
#dw-ap{position:fixed;bottom:76px;right:24px;z-index:9998;display:flex;flex-direction:column;gap:7px;opacity:0;pointer-events:none;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease}
#dw-ap.open{opacity:1;pointer-events:all;transform:translateY(0)}
.dw-dot{width:28px;height:28px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform .18s ease,border-color .18s ease;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.dw-dot:hover,.dw-dot.on{transform:scale(1.22);border-color:var(--text)}
.dw-dot[data-a="default"]{background:#111}.dw-dot[data-a="rust"]{background:#c4622d}.dw-dot[data-a="acid"]{background:#6abf40}.dw-dot[data-a="milk"]{background:#e8e0d0;border-color:#ccc}

/* ══ RESPONSIVE (шапка/футер) ══ */
@media(max-width:960px){
  .dw-top-links,.dw-top-right,.dw-vsep{display:none}
  .dw-hamburger{display:flex}
  .dw-svc-list,.dw-vsep-s{display:none}
  .dw-fgrid{grid-template-columns:1fr 1fr;gap:36px}
  .dw-fbrand{grid-column:1/-1}
  .dw-cta-inner{flex-direction:column;align-items:flex-start}
  .dw-cta-right{align-items:flex-start}
}
@media(max-width:560px){
  .dw-fgrid{grid-template-columns:1fr}
  .dw-fbottom{flex-direction:column;align-items:flex-start;gap:10px}
}
@media(max-width:480px){:root{--site-pad:16px}.dw-logo-sub{display:none}}