@charset "utf-8";
/* CSS Document */
/*   ЕДИНЫЙ СТИЛЬ ХАБА «ТОВАРНЫЕ ЗНАКИ»   ─── БАЗА ─── */
*, ::before, ::after {box-sizing: border-box;}
html {overflow-x: hidden; scroll-behavior: smooth;}
body {margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif;}
a:link {color: #c00;} a:visited {color: #963;} a:hover {color: #f30;}
h1, h2, h3, h4, h5, h6 {line-height: 1.2; margin: 1.5em auto; text-align: center; color: #c30; width: 100%; max-width: 100%; display: block; box-sizing: border-box; overflow-wrap: break-word; padding: 0 8px;}
h1 {font-size: clamp(1.5rem, 7vw, 2.2rem); font-weight: 600;}
h2 {font-size: clamp(1.3rem, 6vw, 1.8rem); font-weight: 600;}
@media (max-width: 767px) {h1, h2, h3 {margin: 1em 0; font-size: clamp(1.3rem, 6vw, 1.6rem);}}
/* ─── ШАПКА ─── */
.header {background: linear-gradient(to bottom, #fff6b5 0%, #ffffff 100%); padding: 10px 20px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 20px; width: 100%; color: #c30; font-size: 90%; line-height: 1.5em;}
.hd1 {width: 565px; padding: 10px; flex: 1 1 auto; max-width: 100%; min-width: 0;}
#logo {width: 100%; max-width: 565px; height: auto;}
.hd2 {padding: 5px; margin-top: 20px; font-weight: bolder; text-align: right;}
.hphone {font-size: 150%; text-decoration: none; line-height: 1.5em;}
@media (max-width: 480px) {.header {justify-content: center; text-align: center;} .hd1, .hd2 {width: 100%;} .hd2 {margin-top: 0; text-align: center;} #logo {width: 100%; max-width: 565px; height: auto;}}
/* иконки контактов (шапка + футер) */
.contact-row {display: flex; gap: 15px; align-items: center; margin: 15px 0;}
.contact-row a {display: flex; align-items: center; gap: 5px; color: #630; text-decoration: none; background: rgba(255, 255, 255, 0.5); padding: 5px 10px; border-radius: 5px; transition: background 0.3s;}
.contact-row a:hover {background: #fff;}
.header-icon {width: 32px; height: 32px;}
/* ─── МЕНЮ ─── */
#nav, #nav ul {list-style: none; margin: 0; padding: 0;}
#nav {font-family: Arial, Helvetica, sans-serif; width: 100%; background-color: #FFCF88; position: relative; display: block; border-bottom: 2px solid #FFAC2F;}
#nav::after {content: ""; display: table; clear: both;}
#nav ul.subs {background-color: #fffef9; box-shadow: 1px 1px 5px rgba(0,0,0,.2); color: #c00; display: none; left: 0; position: absolute; top: 54px; width: 96%; min-width: 600px; z-index: 1000;}
@media (min-width: 769px) {#nav li:hover ul.subs, #nav li:focus-within ul.subs {display: block;}}
#nav > li {border-bottom: 5px solid transparent; float: left; margin-bottom: -5px; text-align: left; transition: all .3s ease-in-out; font-size: 17px; font-weight: 600; position: relative;}
#nav > li > a, #nav > li > label {display: block; line-height: 49px; padding: 0 15px; color: #9F0028; text-decoration: none; transition: color .45s, background-color .45s;}
#nav > li:hover > a, #nav > li:hover > label, #nav > li > a:hover, #nav > li > label:hover {background-color: #C00; color: #fff;}
#nav ul.subs > li {display: inline-block; float: none; padding: 6px 10px; vertical-align: top; width: 45%; text-align: left; color: #f60; font-weight: 600; font-size: 13px;}
#nav ul.subs a {display: block; color: #c00; background: #fdedb5; font-size: 14px; line-height: 1.35em; font-weight: 500; text-align: left; margin: 5px 0; padding: 10px; text-decoration: none; border-radius: 5px;}
#nav ul.subs a:hover {color: #f30; background: #fdf4e0;}
#nav ul.subs > li li {float: none; padding-left: 8px; transition: padding .15s ease-out;}
#nav ul.subs > li li:hover {padding-left: 24px;}
.submenu-toggle {position: absolute; opacity: 0; z-index: 2;}
.toggle-plus, .toggle-minus {margin-left: 6px; font-weight: bold;}
.toggle-minus {display: none;}
@media (max-width: 768px) {#nav > li {float: none; width: 100%; border-bottom: 1px solid rgba(255,255,255,.2); margin-bottom: 0; font-size: 18px;} #nav ul.subs {position: relative; top: 0; width: 100%; min-width: auto; box-shadow: none; border-top: 1px solid #e67a00; display: none;} .submenu-toggle:checked ~ ul.subs {display: block !important;} #nav ul.subs > li {display: block; width: auto; text-align: left; padding: 10px 15px 15px; font-size: 14px;} .submenu-toggle:checked + label .toggle-plus {display: none !important;} .submenu-toggle:checked + label .toggle-minus {display: inline !important;}}
/* ─── ХЛЕБНЫЕ КРОШКИ ─── */
.breadcrumb {display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; width: 90%; margin: 6px auto; padding: 6px 12px; font-size: 15px; line-height: 1.6; color: #666; border-bottom: 1px solid #f8f3d3;}
.breadcrumb li {display: flex; align-items: center;}
.breadcrumb li:not(:last-child)::after {content: "»"; margin-left: 6px; color: #666;}
.breadcrumb a {color: #933; text-decoration: none;}
.breadcrumb a:hover {text-decoration: underline; color: #f30;}
@media (max-width: 767px) {.breadcrumb {font-size: 16px; line-height: 1.8; width: 95%;}}
/* ─── СЕТКА И MAIN ─── */
.grid-container {display: grid; grid-template-columns: 9fr 3fr; gap: 24px;}
.grid-container > * {min-width: 0;}
@media (max-width: 768px) {.grid-container {grid-template-columns: 1fr; gap: 0;}}
.main {contain: layout paint; font: 17px Arial, Helvetica, sans-serif; color: #666; padding: 40px; width: 100%; max-width: 100%; box-sizing: border-box;}
@media screen and (max-width: 767px) {.main {padding: 20px 15px; margin: 0;}}
.main p {padding: 7px; line-height: 1.5em;}
@media screen and (max-width: 600px) {.main p {overflow-wrap: break-word; word-break: break-word; hyphens: auto;}}
/* ─── КНОПКИ ─── */
/* общий градиент и hover для всех кнопок */
.alsoButton, .bigBtn, .hub-anchor-nav a {background: linear-gradient(180deg, #fae844 35%, #ffa12f 100%);}
.alsoButton:hover, .bigBtn:hover, .hub-anchor-nav a:hover {background: linear-gradient(0deg, #fae844 35%, #ffa12f 100%);}
.alsoButton, .bigBtn {border-radius: 5px; border: 1px solid #ffaa22; cursor: pointer; color: #a31416; text-decoration: none;}
/* цвет кнопок-ссылок: перебивает a:link и a:visited */
a.alsoButton, a.bigBtn {color: #a31416;}
a.alsoButton:hover, a.bigBtn:hover {color: #a31416;}
.alsoButton {display: inline-block; padding: 8px 10px; font: 18px Arial;}
.alsoButton:active, .bigBtn:active {position: relative; top: 1px;}
.bigBtn {display: block; font-size: 20px; text-align: center; margin: 10px auto; padding: 15px 10px; width: 50%; font-weight: 500; line-height: 16px;}
/* на мобильных кнопка расширяется до 70% ширины контента */
@media (max-width: 767px) {.bigBtn {width: 70%; margin: 15px auto;}}
/* ─── КНОПКА НАВЕРХ ─── */
#scroll {position: fixed; right: 16px; bottom: 16px; width: 40px; height: 40px; background-color: #fc6; border-radius: 50%; display: none; cursor: pointer; z-index: 10000; touch-action: manipulation; text-decoration: none; color: transparent; overflow: hidden;}
#scroll span {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid #fff;}
#scroll:hover {background-color: #999;}
/* ─── ФУТЕР ─── */
.footer {background: linear-gradient(to bottom, #fff6b5 0%, #ffffff 100%); font-size: 14px; color: #630; border-top: 1px solid #fdffac; border-bottom: 1px solid #fdffac; padding: 30px 20px 15px 20px; line-height: 1.5;}
.footer-container {display: flex; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; justify-content: space-between; gap: 30px;}
.f1 {flex: 1; min-width: 200px;}
.f2 {flex: 1.5; min-width: 300px;}
.f-title {font-weight: bold; text-transform: uppercase; margin-bottom: 15px; border-bottom: 1px solid rgba(102, 51, 0, 0.2); display: inline-block; padding-bottom: 5px;}
.f-menu {list-style: none; padding: 0; margin: 0;}
.f-menu li {margin-bottom: 8px;}
.f-menu a {color: #C60; text-decoration: none; transition: 0.3s;}
.f-menu a:hover {text-decoration: underline;}
address {font-style: normal; margin-bottom: 10px;}
.map-link {color: #C60; text-decoration: none; font-size: 13px; border-bottom: 1px dashed #C60;}
.map-link:hover {border-bottom-style: solid;}
.footer-phones {margin: 15px 0;}
.footer-phones p {margin: 5px 0; font-weight: bold;}
.footer-phones a {color: #630; text-decoration: none;}
.footer-phones a:hover {color: #C60;}
.f-revisites small {display: block; line-height: 1.4; opacity: 0.8; margin-top: 15px; font-size: 12px;}
.footer-bottom {margin-top: 30px; padding-top: 15px; border-top: 1px solid rgba(102, 51, 0, 0.1); display: flex; flex-wrap: wrap; justify-content: space-between; font-size: 13px; gap: 10px;}
.footer-bottom a {color: #630; text-decoration: none;}
.bottom-links a {margin-left: 15px; opacity: 0.7;}
.bottom-links a:hover {opacity: 1; text-decoration: underline;}
@media (max-width: 768px) {.footer-container {flex-direction: column; gap: 40px;} .footer-bottom {flex-direction: column; text-align: center;} .bottom-links {display: flex; flex-direction: column; gap: 10px;} .bottom-links a {margin-left: 0;}}
/* ═════════ СТИЛИ ХАБА ═════════ */
/* ─── ВСТУПЛЕНИЕ ─── */
.hub-intro {background: linear-gradient(0deg, #fffdf0 27%, #fff); border-bottom: thin solid #fc3; border-radius: 5px; padding: 20px 25px; margin: 0 0 30px 0; box-shadow: 5px 6px 3px -4px rgba(120, 100, 91, .35);}
.hub-intro p {font-size: 100%; color: #666; line-height: 1.5em; margin: 10px 0; padding: 0;}
/* Якорная навигация */
.hub-anchor-nav {display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 0 0; margin: 0;}
.hub-anchor-nav a {display: inline-block; padding: 7px 12px; border: 1px solid #ffaa22; border-radius: 5px; color: #a31416; text-decoration: none; font-size: 14px; font-weight: 500; transition: all .2s;}
.hub-anchor-nav a:hover {transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0, 0, 0, .15);}
/* ─── СЕКЦИИ ─── */
.hub-section {margin: 40px 0;}
/* ─── УСЛУГИ ─── */
.hub-services-group {margin-bottom: 30px;}
.hub-group-title {font-size: 120%; color: #930; font-weight: 600; border-left: 5px solid #f93; padding: 4px 0 4px 12px; margin: 20px 0 15px;}
.hub-services-grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px;}
.hub-service {display: flex; flex-direction: column; background: #fff; border: 1px solid #ffe066; border-radius: 8px; padding: 15px; text-decoration: none; box-shadow: 4px 4px 8px 0 #eadfbe; transition: all .25s;}
.hub-service:hover {border-color: #f93; box-shadow: 6px 8px 14px 0 #eadfbe; transform: translateY(-2px);}
.hub-service h4 {font-size: 17px; color: #900; margin: 0 0 8px; font-weight: 600; text-align: left; line-height: 1.25;}
.hub-service p {font-size: 14px; color: #666; line-height: 1.45; margin: 0; padding: 0;}
/* ─── КАРТОЧКИ (калькуляторы, статьи, законы, МКТУ, база знаний) ─── */
.hub-calc-row,.hub-articles-row,.hub-laws-row,.hub-mktu-row,.hub-baza-znaniy-row {display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 20px;}
.hub-calc-card,.hub-articles-card,.hub-laws-card,.hub-mktu-card,.hub-baza-znaniy-card {background: linear-gradient(180deg, #fcffde 20%, #fff); border: 1px solid #f60; border-radius: 8px; padding: 20px; box-shadow: 3px 6px 14px 4px rgba(240, 224, 178, 1); display: flex; flex-direction: column;}
.hub-calc-card h3,.hub-articles-card h3,.hub-laws-card h3,.hub-mktu-card h3,.hub-baza-znaniy-card h3 {font-size: 19px; color: #c00; font-weight: 600; margin: 0 0 10px; text-align: left;}
.hub-calc-card p,.hub-articles-card p,.hub-laws-card p,.hub-mktu-card p,.hub-baza-znaniy-card p {font-size: 15px; color: #666; line-height: 1.5; margin: 0 0 14px; padding: 0; flex: 1;}
.hub-calc-card .alsoButton,.hub-articles-card .alsoButton,.hub-laws-card .alsoButton,.hub-mktu-card .alsoButton,.hub-baza-znaniy-card .alsoButton {align-self: flex-start;}

/* ─── ДОВЕРИЕ ─── */
.hub-trust-row {display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px;}
.hub-trust-card {display: flex; flex-direction: column; background: #fff; border: 1px solid #ffe066; border-top: 3px solid #f93; border-radius: 8px; padding: 18px 16px; text-decoration: none; box-shadow: 4px 4px 8px 0 #eadfbe; transition: all .25s;}
.hub-trust-card:hover {transform: translateY(-2px); border-top-color: #c00; box-shadow: 6px 8px 14px 0 #eadfbe;}
.hub-trust-card b {color: #900; font-size: 17px; font-weight: 600; margin-bottom: 6px;}
.hub-trust-card span {color: #666; font-size: 14px; line-height: 1.4; padding: 0;}

/* ─── САЙДБАР ─── */
.sidebar {display: flex; flex-direction: column; gap: 20px; align-self: flex-start; position: sticky; top: 20px;}
.sidebar-cta {border: 1px solid #f93; border-radius: 8px; padding: 18px; box-shadow: 5px 6px 3px -4px rgba(120, 100, 91, .45); background: linear-gradient(0deg, #fff6b5 27%, #fff);}
.sidebar-cta h3 {font-size: 18px; color: #c00; margin: 0 0 12px; font-weight: 600; text-align: left; padding: 0;}
.sidebar-cta p {font-size: 14px; color: #666; line-height: 1.4; margin: 0 0 12px; padding: 0;}
.sidebar-cta .bigBtn {width: fit-content; margin: 0 auto; font-size: 16px; padding: 12px 10px;}

/* ─── АДАПТИВ ХАБА ─── */
@media (max-width: 768px) {
.sidebar {position: static; order: 10;}
.hub-services-grid, .hub-calc-row, .hub-articles-row, .hub-laws-row, .hub-mktu-row, .hub-baza-znaniy-row, .hub-trust-row {grid-template-columns: 1fr;}
.hub-anchor-nav a {flex: 1 1 auto; text-align: center; font-size: 13px; padding: 6px 8px;}
.hub-section {margin: 30px 0;}
}
@media (max-width: 480px) {.hub-intro {padding: 15px;}}