@import url('https://fonts.googleapis.com/css2?family=Onest:wght@100..900&display=swap');

:root{
  --ink:#000;
  --muted:#666776;
  --brand:#b70f5b;
  --border:#efe8ea;
  --link:#666776;
  --link-hover:#000;
  --container:960px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Onest", Arial, Helvetica, sans-serif; line-height:1.4; color:var(--ink); background:#fff}

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

/* header */
.site-header{background:#fff; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:30; margin-bottom:50px}
.head-row{display:flex; align-items:center; gap:16px; padding:20px 0 0 0}
.brand{display:inline-flex; align-items:center}
.brand img{display:block; width:220px; height:auto; max-width:100%}
@media (max-width:420px){
  .brand img{width:180px;}
}

/* shadow strip under header (exactly after header content) */
.header-shadow{height:18px; background:url('bg.png') no-repeat center bottom}

/* nav */
.primary-nav{margin-left:auto}
.menu{display:flex; align-items:center; gap:0; padding:0; margin:0; list-style:none}
.menu li{display:inline; margin:0 22px} /* spacing via margins so underline equals text width */
.menu a, .menu button{
  appearance:none; border:0; background:transparent;
  font-size:20px; color:#525D69; cursor:pointer;
  padding:0; text-decoration-line: underline; text-decoration-color: transparent; text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}
.menu, .menu a, .menu button,
.mobile-menu, .mobile-menu a, .mobile-menu button,
.lang-switch button {
  font-family: "Onest", Arial, Helvetica, sans-serif !important;
}

/* active = solid underline under text only */
.menu .current > a, .menu .current > button{
  text-decoration-color: currentColor;
  text-decoration-style: solid;
  cursor:default;
}
/* hover = dotted underline */
.menu a:hover, .menu button:hover{
  text-decoration-color: currentColor;
  text-decoration-style: dotted;
}

.lang-switch{margin-left:8px}
.lang-switch button{
  font-size:18px; font-weight:700; color:#525D69; background:transparent; border:0; cursor:pointer; padding:4px 10px;
}
.lang-switch button:hover{text-decoration:underline}

.hamburger{
  display:none;
  margin-left:auto;
  width:42px; height:38px;
  border:1px solid var(--border);
  border-radius:8px;
  background:#fff;
  cursor:pointer;
  align-items:center; justify-content:center; flex-direction:column; gap:4px;
}
.hamburger span{display:block; width:22px; height:2px; background:#525D69}

.mobile-nav{border-top:1px solid var(--border); background:#fafafa}
.mobile-menu{list-style:none; padding:8px 16px; margin:0}
.mobile-menu li{border-top:1px solid #eee}
.mobile-menu li:first-child{border-top:0}
.mobile-menu a, .mobile-menu button{
  display:block; width:100%; text-align:left;
  background:transparent; border:0; padding:12px 2px;
  font-size:18px; color:#525D69; cursor:pointer;
}

/* content */
.section{padding:0 0 50px 0}
.section h1{color:var(--brand); font-size:36px; margin:0 0 6px 0; font-weight:600}
.section h2{font-size:18px; margin:10px 0 5px 0; font-weight:600}
.section h3{font-size:16px; margin:10px 0 6px 0; font-weight:600}
.section p{margin:8px 0}
.section ul{padding-left:1.5em; margin:0 0 12px 0}
.section ul.circle{list-style:circle}
a{color:var(--link); text-decoration:underline}
a:hover{color:var(--link-hover)}

.tableframe{overflow-x:auto;}
.tableframe table{width:100%; border-collapse:separate; border-spacing:0; background:#fff}
.tableframe th, .tableframe td{padding:10px; border:0}
.tableframe th{background:#fff; font-size:18px; font-weight:500}
.tableframe td{background:#fff}
.tableframe th {background: #f2f2f2}
.tableframe table tbody tr:nth-child(odd) td {
  background: #ffffff;
}

.tableframe table tbody tr:nth-child(even) td {
  background: #f7f7f7; /* очень светло-серый */
}


/* footer */
.site-footer{border-top:1px solid var(--border)}
.site-footer .container{padding:20px 16px}
.site-footer ul{display:flex; align-items:center; gap:50px; list-style:none; padding:0; margin:0; justify-content:center}
.site-footer, .site-footer a{color:var(--muted)}

/* fade */
.fade-enter{opacity:.01}
.fade-enter.fade-enter-active{opacity:1; transition:opacity .25s ease}
.fade-exit{opacity:1}
.fade-exit.fade-exit-active{opacity:.01; transition:opacity .2s ease}

/* responsive */
@media (max-width:1040px){
  .head-row{padding:10px 0 0 0}
}
@media (max-width:860px){
  .primary-nav{display:none}
  .hamburger{display:inline-flex}
  .lang-switch{order:3}
}
@media (max-width:520px){
  .section h1{font-size:30px}
  .menu a, .menu button{font-size:18px}
}