/* ===========================================================
   Адвокат Дубовиков — общая тема сайта
   Один файл стилей для всех страниц. Каркас (site-shell: боковое
   меню + контент, инъекция меню/футера через nav.js) сохранён
   по образцу исходного проекта, визуальный стиль — новый,
   рассчитан на юридическую тематику.
   =========================================================== */

:root{
  --bg:#0d1015;
  --panel:#161a22;
  --panel-2:#1b202a;
  --panel-line:#2b313d;
  --ink:#eceef1;
  --ink-dim:#9aa3b0;
  --gold:#c19a4d;
  --gold-dim:#8f7539;
  --line-solid:#3a4150;
  --radius:10px;
  --maxw:1280px;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',Arial,sans-serif;
  line-height:1.6;
  position:relative;
  -webkit-font-smoothing:antialiased;
}

/* ---------- фоновая подложка (спокойная, без анимации звёзд) ---------- */
.backdrop{
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(ellipse at 15% 0%, rgba(193,154,77,0.08), transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(193,154,77,0.06), transparent 55%),
    var(--bg);
}
.backdrop::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size:100% 42px;
  opacity:.5;
}

/* ---------- каркас страницы: боковое меню + контент ---------- */
.site-shell{
  display:flex;
  align-items:flex-start;
  gap:36px;
  max-width:var(--maxw);
  margin:0 auto;
  padding:32px 24px 64px;
  position:relative;
  z-index:1;
}

.sidebar{
  flex:0 0 258px;
  position:sticky;
  top:24px;
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:var(--radius);
  padding:22px 20px;
}
.sidebar .brand{
  display:block;
  font-family:'PT Serif',Georgia,serif;
  font-weight:700;
  font-size:19px;
  line-height:1.3;
  margin:0 0 3px;
  color:var(--ink);
  text-decoration:none;
}
.sidebar .brand span{color:var(--gold);}
.sidebar .tagline{
  font-size:12.5px;
  color:var(--ink-dim);
  margin:0 0 16px;
  padding-bottom:16px;
  border-bottom:1px solid var(--panel-line);
}
.sidebar nav.key-pages ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.sidebar nav.key-pages a{
  color:var(--ink-dim);
  text-decoration:none;
  font-size:14px;
  line-height:1.4;
  display:block;
  padding:8px 4px;
  border-radius:6px;
  transition:color .15s, background .15s;
}
.sidebar nav.key-pages a:hover{color:var(--ink);background:var(--panel-2);}
.sidebar nav.key-pages a.active{color:var(--gold);font-weight:600;background:var(--panel-2);}

.sidebar-contact{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--panel-line);
}
.sidebar-contact .phone{
  display:block;
  font-family:'PT Serif',Georgia,serif;
  font-size:17px;
  font-weight:700;
  color:var(--ink);
  text-decoration:none;
  margin-bottom:6px;
}
.sidebar-contact .phone:hover{color:var(--gold);}
.sidebar-contact p{font-size:12px;color:var(--ink-dim);margin:0 0 12px;}
.sidebar-contact .cta-btn{
  display:block;
  text-align:center;
  background:var(--gold);
  color:#161a22;
  font-weight:600;
  font-size:13.5px;
  text-decoration:none;
  padding:10px 12px;
  border-radius:8px;
  transition:background .15s;
}
.sidebar-contact .cta-btn:hover{background:#d4ac5e;}

.wrap{
  flex:1;
  min-width:0;
  max-width:960px;
}

/* ---------- типографика ---------- */
h1{
  font-family:'PT Serif',Georgia,serif;
  font-weight:700;
  font-size:clamp(28px,4vw,40px);
  line-height:1.2;
  margin:0 0 16px;
  max-width:24ch;
}
.wrap h2, article h2{
  font-family:'PT Serif',Georgia,serif;
  font-weight:700;
  font-size:22px;
  margin:36px 0 14px;
  color:var(--ink);
}
.wrap h3, article h3{
  font-family:'PT Serif',Georgia,serif;
  font-weight:700;
  font-size:17px;
  margin:22px 0 8px;
  color:var(--ink);
}
.wrap p, article p{
  max-width:70ch;
  color:var(--ink-dim);
  font-size:15.5px;
  margin:0 0 16px;
}
.wrap p strong, article p strong{color:var(--ink);font-weight:600;}
.wrap a, article a{color:var(--gold);text-decoration:underline;text-decoration-color:var(--panel-line);}
.wrap a:hover, article a:hover{text-decoration-color:var(--gold);}
.wrap ul, article ul{max-width:70ch;color:var(--ink-dim);font-size:15.5px;padding-left:20px;margin:0 0 18px;}
.wrap li, article li{margin-bottom:6px;}

.eyebrow{
  font-size:12.5px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--gold);
  font-weight:600;
  margin:0 0 10px;
}
.intro{
  max-width:68ch;
  color:var(--ink-dim);
  font-size:17px;
  margin-bottom:28px;
}
.intro strong{color:var(--ink);font-weight:600;}

/* ---------- главный экран (только index) ---------- */
.hero{
  padding:8px 0 8px;
  margin-bottom:8px;
  border-bottom:1px solid var(--panel-line);
  padding-bottom:32px;
}
.hero-buttons{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px;}
.btn{
  display:inline-block;
  padding:13px 22px;
  border-radius:8px;
  font-size:14.5px;
  font-weight:600;
  text-decoration:none;
  transition:background .15s, color .15s, border-color .15s;
}
.btn-primary{background:var(--gold);color:#161a22;}
.btn-primary:hover{background:#d4ac5e;}
.btn-secondary{background:transparent;color:var(--ink);border:1px solid var(--line-solid);}
.btn-secondary:hover{border-color:var(--gold);color:var(--gold);}
/* .wrap a / article a (color:gold, underline) has higher specificity than the
   rules above and was overriding button text color — gold text on a gold
   background made the primary button unreadable until hover. Re-assert with
   matching specificity so the button styles always win. */
.wrap a.btn, article a.btn{text-decoration:none;}
.wrap a.btn-primary, article a.btn-primary,
.wrap a.btn-primary:hover, article a.btn-primary:hover{color:#161a22;}
.wrap a.btn-secondary, article a.btn-secondary{color:var(--ink);}
.wrap a.btn-secondary:hover, article a.btn-secondary:hover{color:var(--gold);}

/* ---------- карточки услуг (7 групп) ---------- */
.service-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
  margin:20px 0 36px;
}
.service-card{
  display:block;
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:var(--radius);
  padding:20px 18px;
  text-decoration:none;
  transition:border-color .15s, transform .15s;
}
.service-card:hover{border-color:var(--gold);transform:translateY(-2px);}
.service-card .num{
  font-family:'PT Serif',Georgia,serif;
  font-size:13px;
  color:var(--gold);
  margin:0 0 8px;
}
.service-card h3{
  margin:0 0 8px;
  font-size:16px;
  color:var(--ink);
}
.service-card p{
  margin:0;
  font-size:13.5px;
  color:var(--ink-dim);
  max-width:none;
}

/* ---------- ключевые страницы: сетка карточек-разделов ---------- */
.page-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:14px;
  margin:20px 0 36px;
}
.page-card{
  display:block;
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:var(--radius);
  padding:18px 18px;
  text-decoration:none;
}
.page-card:hover{border-color:var(--gold);}
.page-card h3{margin:0 0 6px;font-size:15.5px;color:var(--ink);}
.page-card p{margin:0;font-size:13.5px;color:var(--ink-dim);}

/* ---------- преимущества ---------- */
.advantages{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:18px 28px;
  margin:20px 0 36px;
}
.advantage h3{
  font-family:'PT Serif',Georgia,serif;
  font-size:16px;
  margin:0 0 6px;
  color:var(--ink);
}
.advantage p{font-size:14px;color:var(--ink-dim);margin:0;max-width:none;}

/* ---------- блок практики (примеры категорий дел) ---------- */
.practice-card{
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-left:3px solid var(--gold);
  border-radius:var(--radius);
  padding:18px 20px;
  margin-bottom:14px;
}
.practice-card .tag{
  display:inline-block;
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--gold);
  margin-bottom:8px;
}
.practice-card h3{margin:0 0 8px;font-size:16px;}
.practice-card p{margin:0;font-size:14px;color:var(--ink-dim);max-width:none;}

/* ---------- блок контактов ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin:20px 0 36px;
}
.contact-block{
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:var(--radius);
  padding:22px;
}
.contact-block dt{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--gold);margin:14px 0 4px;}
.contact-block dt:first-child{margin-top:0;}
.contact-block dd{margin:0;font-size:15px;color:var(--ink);}
.contact-block dd a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--panel-line);}
.contact-block dd a:hover{color:var(--gold);}

.note-box{
  background:var(--panel-2);
  border:1px dashed var(--line-solid);
  border-radius:var(--radius);
  padding:14px 16px;
  font-size:13px;
  color:var(--ink-dim);
  margin:0 0 28px;
}
.note-box strong{color:var(--ink);}

/* ---------- футер (дублирует меню, на каждой странице) ---------- */
.site-footer{
  border-top:1px solid var(--panel-line);
  margin-top:52px;
  padding-top:22px;
  font-size:13px;
  color:var(--ink-dim);
}
.site-footer .foot-cols{
  display:flex;
  flex-wrap:wrap;
  gap:32px;
  margin-bottom:20px;
}
.site-footer .foot-col h4{
  font-family:'PT Serif',Georgia,serif;
  font-size:13.5px;
  color:var(--ink);
  margin:0 0 10px;
}
.site-footer .foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;}
.site-footer .foot-col a{color:var(--ink-dim);text-decoration:none;}
.site-footer .foot-col a:hover{color:var(--gold);}
.site-footer .legal{
  border-top:1px solid var(--panel-line);
  padding-top:16px;
  font-size:12px;
  line-height:1.7;
}
.site-footer .legal a{color:var(--ink-dim);text-decoration:underline;text-decoration-color:var(--panel-line);}
.site-footer .legal a:hover{color:var(--gold);}
.site-footer .legal .sep{color:var(--line-solid);margin:0 8px;}

/* ---------- блок «вспышки слов» (только index.html) ---------- */
.word-flash-wrap{
  position:relative;
  margin:44px 0 52px;
  min-height:220px;
  border-radius:var(--radius);
  border:1px solid var(--panel-line);
  background:linear-gradient(160deg, var(--panel-2), var(--panel));
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:24px;
}
.word-flash-wrap::before{
  content:"";
  position:absolute;
  inset:10%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(193,154,77,.16), transparent 70%);
  filter:blur(14px);
  animation:law-glow 5s ease-in-out infinite;
  pointer-events:none;
}
.word-flash{
  position:relative;
  z-index:1;
  font-family:'PT Serif', Georgia, serif;
  font-weight:700;
  font-size:clamp(24px, 4vw, 44px);
  color:#f3dda6;
  text-shadow:0 0 20px rgba(193,154,77,.35);
  text-align:center;
  opacity:0;
  transform:translateY(6px) scale(.97);
  transition:opacity .45s ease, transform .45s ease;
}
.word-flash.show{
  opacity:1;
  transform:translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce){
  .word-flash{transition:none;}
}
@media (max-width:600px){
  .word-flash-wrap{min-height:160px;margin:30px 0 38px;}
}

/* ---------- разделитель «весы правосудия» (только index.html) ---------- */
.law-divider{
  display:flex;
  align-items:center;
  gap:24px;
  margin:44px 0 52px;
}
.law-divider .line{
  flex:1;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--panel-line));
}
.law-divider .line.right{
  background:linear-gradient(270deg, transparent, var(--panel-line));
}
.law-emblem-wrap{
  position:relative;
  flex:none;
  width:150px;
  height:150px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.law-emblem-wrap::before{
  content:"";
  position:absolute;
  inset:6px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(193,154,77,0.28), transparent 70%);
  filter:blur(6px);
  animation:law-glow 5s ease-in-out infinite;
  pointer-events:none;
}
.law-emblem{
  position:relative;
  z-index:1;
  width:118px;
  height:118px;
  display:block;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.5));
  animation:law-float 6s ease-in-out infinite;
}
.law-emblem .pan-left{
  transform-box:fill-box;
  transform-origin:center;
  animation:law-sway-left 4.5s ease-in-out infinite;
}
.law-emblem .pan-right{
  transform-box:fill-box;
  transform-origin:center;
  animation:law-sway-right 4.5s ease-in-out infinite;
}
@keyframes law-glow{
  0%,100%{opacity:.5;transform:scale(1);}
  50%{opacity:1;transform:scale(1.14);}
}
@keyframes law-float{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-4px) rotate(.6deg);}
}
@keyframes law-sway-left{
  0%,100%{transform:rotate(0deg);}
  50%{transform:rotate(2.5deg);}
}
@keyframes law-sway-right{
  0%,100%{transform:rotate(0deg);}
  50%{transform:rotate(-2.5deg);}
}
@media (prefers-reduced-motion: reduce){
  .law-emblem, .law-emblem-wrap::before, .law-emblem .pan-left, .law-emblem .pan-right{animation:none;}
}
@media (max-width:600px){
  .law-divider{margin:30px 0 38px;gap:14px;}
  .law-emblem-wrap{width:100px;height:100px;}
  .law-emblem{width:80px;height:80px;}
}

/* ---------- страница разработчика (site-advokat-SRT...) ---------- */
.dev-icon-tile{
  width:100%;
  aspect-ratio:16/10;
  border-radius:12px;
  background:linear-gradient(160deg, var(--panel-2), var(--panel));
  border:1px solid var(--panel-line);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}
.dev-icon-tile::before{
  content:"";
  position:absolute;
  inset:10%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(193,154,77,.24), transparent 70%);
  filter:blur(10px);
  animation:law-glow 5s ease-in-out infinite;
  pointer-events:none;
}
.dev-icon{
  width:56px;
  height:56px;
  position:relative;
  z-index:1;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.5));
  animation:law-float 6s ease-in-out infinite;
}
.dev-icon.lg{width:76px;height:76px;}

.dev-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  margin:20px 0 40px;
}
.dev-card{
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:var(--radius);
  padding:14px;
}
.dev-card h3{margin:16px 0 8px;font-size:15.5px;color:var(--ink);}
.dev-card p{margin:0;font-size:13.5px;color:var(--ink-dim);max-width:none;}

.dev-cta{
  text-align:center;
  padding:36px 24px;
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:var(--radius);
  margin:0 0 40px;
}
.dev-cta .dev-icon-wrap{
  width:120px;
  height:120px;
  margin:0 auto 18px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.dev-cta .dev-icon-wrap::before{
  content:"";
  position:absolute;
  inset:6px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(193,154,77,.28), transparent 70%);
  filter:blur(8px);
  animation:law-glow 5s ease-in-out infinite;
}
.dev-cta h2{margin-top:0;}
.dev-cta p{margin-left:auto;margin-right:auto;}
.dev-license{
  font-size:12px;
  color:var(--ink-dim);
  max-width:60ch;
  margin:18px auto 0;
}

.dev-history{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:32px;
  align-items:center;
  margin:0 0 40px;
}
.dev-history-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

@media (max-width:900px){
  .dev-grid{grid-template-columns:repeat(2, 1fr);}
  .dev-history{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .dev-grid{grid-template-columns:1fr;}
}

/* ---------- мобильная адаптация ---------- */
@media (max-width:900px){
  .site-shell{flex-direction:column;gap:20px;padding:20px 16px 48px;}
  .sidebar{position:relative;top:0;width:100%;flex:none;}
  .sidebar nav.key-pages ul{flex-direction:row;flex-wrap:wrap;gap:4px 10px;}
  .sidebar nav.key-pages a{padding:6px 8px;}
  .wrap{max-width:100%;}
  .service-grid{grid-template-columns:repeat(2, 1fr);}
  .page-grid, .advantages, .contact-grid{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .service-grid{grid-template-columns:1fr;}
}