/* === Minimal CSS for index.html (pruned) === */
:root{
  --bg:#f7f8fc;
  --panel:#ffffff;
  --panel-2:#f9fbff;
  --text:#0e1320;
  --muted:#667085;
  --brand:#6b4eff;     /* primary violet */
  --brand-2:#12b886;   /* emerald accent */
  --border:#e6e8f0;
  --shadow:0 10px 25px rgba(15, 23, 42, .06);
  --radius:16px;
}


/* Base */
*{box-sizing:border-box}

html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.6 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif}

a{color:var(--brand);text-decoration:none}

a:hover{text-decoration:underline}

.container{max-width:1160px;margin:0 auto;padding:0 20px}


/* Header */
.header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, .85);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--border);
}

.nav {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 0;
}

.nav-left {
  display: flex;
  align-items: center;
  justify-content: space-between; /* лого слева, меню вправо */
  flex: 1;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: auto; /* прижать к левому краю */
}

.menu {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-left: auto; /* увести вправо */
}

.menu a {
  padding: 10px 14px;
  border-radius: 12px;
  color: #111827;
}

.menu a:hover {
  background: #f1f4fb;
}



/* Hero */
.hero{padding:56px 0 28px}

.hero .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center}

.badge{display:inline-block;padding:6px 10px;border-radius:999px;border:1px solid var(--border);color:var(--muted);font-size:13px;background:#fff}


/* Typography */
h1{font-size:clamp(30px,3.4vw,44px);line-height:1.12;margin:12px 0 12px;color:#0b1220}

h2{font-size:clamp(22px,2.3vw,30px);margin:32px 0 12px;color:#0b1220}

h3{font-size:clamp(18px,1.9vw,22px);margin:18px 0 8px;color:#111827}

.lead{color:#475467;font-size:18px}


/* Cards / Panels */
.card{background:linear-gradient(180deg, var(--panel), var(--panel-2));border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}

.card.pad{padding:28px}


/* Buttons */
.cta{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}

.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;border:1px solid #d0d5dd;background:#fff;color:#111827;font-weight:600;transition:.15s ease}

.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(15,23,42,.08)}

.btn.primary{background:linear-gradient(92deg,var(--brand) 0%, #5a3bff 100%);border-color:transparent;color:#fff}

.btn.primary:hover{filter:saturate(110%)}

.btn.ghost{background:transparent}

.btn:focus-visible{outline:3px solid rgba(107,78,255,.35);outline-offset:2px;border-radius:14px}


/* Layout helpers */
.section{margin:28px 0}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}


/* Meta text */
.kicker{color:var(--muted);font-size:14px}

.list{display:grid;gap:8px;padding-left:18px}


/* Rules */
hr{border:none;border-top:1px solid var(--border);margin:24px 0}


/* Footer */
.footer{margin:44px 0 72px;color:#6b7280;font-size:14px}

.footer a{color:#6b7280}

.footer a:hover{color:#111827}


/* Breadcrumbs */
.breadcrumbs{font-size:14px;color:#6b7280;margin:8px 0 0}

.breadcrumbs a{color:#6b7280}


/* Sellers gallery */
.sellers{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}

.sellers .item{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--border);border-radius:18px;padding:12px;box-shadow:var(--shadow)}

.sellers img{width:250px;height:250px;object-fit:cover;border-radius:22px;display:block}


/* Notices */
.notice{border-left:4px solid var(--brand-2);padding:12px 14px;background:linear-gradient(180deg,#ecfdf5, #f7fff9);border-radius:12px;color:#065f46}


/* Tables */
.table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#fff}

.table th,.table td{padding:12px;border-bottom:1px solid var(--border)}

.table th{background:#f3f5fb;text-align:left;color:#475467;font-weight:600}


/* Utility: hero gradient stripe */
.hero::before{
  content:"";
  position:fixed;
  inset:auto 0 0 0;
  height:220px;
  pointer-events:none;
  background:radial-gradient(1200px 220px at 50% 100%, rgba(107,78,255,.12), rgba(18,184,134,.10) 45%, rgba(255,255,255,0) 70%);
  z-index:-1;
}


/* Focus states */
a:focus-visible{outline:3px solid rgba(18,184,134,.35);outline-offset:2px;border-radius:10px}


/* Improve contrast for menu btn */
.menu .btn{padding:10px 14px}
@media(max-width:900px){
  .hero .wrap{grid-template-columns:1fr}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-2{grid-template-columns:1fr}}
@media(max-width:700px){.sellers{grid-template-columns:repeat(2,1fr)}}


/* === Header: plain links, non-sticky, robust mobile === */
.header{position:static;top:auto;background:#fff;border-bottom:1px solid var(--border,#e6e8f0)}
.nav{display:flex;align-items:center;gap:16px;justify-content:flex-start}
.nav-left{display:flex;align-items:center;gap:18px;min-width:0}
.logo{display:inline-flex;align-items:center;gap:10px;min-width:0}
.logo img{height:28px;width:auto;display:block}
.logo-title{font-weight:800;font-size:20px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0;padding:0}
.menu a{display:inline;padding:0;border-radius:0;background:transparent;color:#111827;line-height:1.2;text-decoration:none}
.menu a:hover{text-decoration:underline}
.menu .btn{background:none;border:0;box-shadow:none;color:#111827;padding:0;font-weight:600}
@media(max-width:760px){
  .nav-left{flex-wrap:wrap}
  .logo{width:100%}
  .menu{width:100%;justify-content:flex-start;gap:10px 14px}
  .menu a{white-space:normal;overflow-wrap:anywhere;hyphens:auto}
  .menu a[href*="katalog"]{flex:1 1 100%}
}
@media(max-width:520px){
  .logo-title{font-size:17px}
}