/* Blindcare website — shared styles. Tokens come from the Figma file "npc" (blindcare · Шинэчилсэн). */
:root{
  --bg-base:#fff; --bg-page:#f6f8f9; --surface:#fff;
  --line-site:#e3e9ec;
  --text-primary:#042539; --text-secondary:#2b4a5c; --text-accent:#c4430c;
  --panel-inverse:#042539; --panel-chip:#16384c;
  --accent:#f26a35; --accent-bg-mist:#ffefe6; --accent-bg-mist-2:#fff8f4; --accent-soft:#ffb08c;
  --muted-inverse:#9fb3be; --muted-inverse-2:#7c95a3; --line-inverse:#1d3a4c;
  --gutter:120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'Rubik',system-ui,sans-serif;color:var(--text-primary);background:var(--bg-base);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}

.container{padding-left:var(--gutter);padding-right:var(--gutter)}
.inner{max-width:1272px;margin:0 auto;width:100%}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 24px;border-radius:12px;font:450 12px/16px 'Rubik',sans-serif;letter-spacing:.5px;white-space:nowrap;cursor:pointer;border:1px solid transparent;transition:filter .15s,background .15s}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{filter:brightness(.94)}
.btn-outline{background:rgba(255,255,255,.32);border-color:rgba(4,37,57,.24);color:var(--text-primary)}
.btn-outline:hover{background:rgba(4,37,57,.06)}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:var(--bg-base);border-bottom:1px solid var(--line-site);height:72px;display:flex;align-items:center;justify-content:space-between;padding:16px max(var(--gutter),calc((100% - 1272px)/2))}
.site-header .logo img{width:158.4px;height:32.56px}
.site-nav{display:flex;gap:28px;font-weight:500;font-size:14px;line-height:20px}
.site-nav a{white-space:nowrap}
.site-nav .nav-actions{display:none}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--accent)}
.header-actions{display:flex;gap:8px;align-items:center}
.menu-btn{display:none;width:40px;height:40px;border-radius:10px;background:var(--bg-page);border:0;flex-direction:column;gap:4px;align-items:center;justify-content:center;cursor:pointer}
.menu-btn span{width:18px;height:2px;border-radius:1px;background:var(--text-primary)}
.header-actions .btn-mobile-only{display:none}

/* Footer */
.site-footer{background:var(--panel-inverse);padding:64px max(var(--gutter),calc((100% - 1272px)/2)) 32px;display:flex;flex-direction:column;gap:40px;color:var(--muted-inverse);font-size:14px;line-height:20px}
.footer-top{display:flex;justify-content:space-between;gap:40px}
.footer-brand{display:flex;flex-direction:column;gap:16px;width:360px}
.footer-brand img{width:180px;height:36.76px}
.footer-brand p{line-height:22px;width:300px}
.footer-social{display:flex;gap:16px}
.footer-links{display:flex;gap:72px}
.footer-col{display:flex;flex-direction:column;gap:12px}
.footer-col h4{color:#fff;font-weight:500;font-size:14px}
.footer-col a:hover,.footer-social a:hover{color:#fff}
.footer-bottom{border-top:1px solid var(--line-inverse);padding-top:20px;display:flex;justify-content:space-between;gap:16px;color:var(--muted-inverse-2);font-size:12px;line-height:16px}

/* Shared blocks */
.chip{display:inline-flex;align-items:center;padding:4px 12px;border-radius:999px;background:var(--panel-chip);color:var(--accent-soft);font-weight:500;font-size:12px;line-height:16px}
.section{padding:96px var(--gutter)}
.section-page{background:var(--bg-page)}
.section-dark{background:var(--panel-inverse);color:#fff}
.h2{font-weight:600;font-size:40px;line-height:48px}
.h2.center{text-align:center}
.lead{font-size:17px;line-height:28px;color:var(--text-secondary)}
.badges{display:flex;gap:12px;align-items:center}
.badges img{height:48px;width:auto;max-width:none}

/* Mobile nav drawer */
@media (max-width:1100px){
  :root{--gutter:48px}
  .site-nav{gap:18px}
}
@media (max-width:900px){
  :root{--gutter:16px}
  .site-header{height:64px;padding:12px 16px}
  .site-header .logo img{width:129.6px;height:26.64px}
  .menu-btn{display:flex}
  .site-nav{position:absolute;top:64px;left:0;right:0;background:var(--bg-base);border-bottom:1px solid var(--line-site);flex-direction:column;gap:0;padding:8px 16px 16px;display:none}
  .site-nav.open{display:flex}
  .site-nav a{padding:12px 0;border-bottom:1px solid var(--line-site)}
  .header-actions .btn{display:none}
  .site-nav .nav-actions{display:flex;flex-direction:column;gap:8px;padding-top:16px}
  .site-nav .nav-actions .btn{height:44px;width:100%;padding:0 16px;border-bottom:1px solid transparent}
  .site-nav .nav-actions .btn-outline{border-color:rgba(4,37,57,.24);background:#fff}
  .site-nav .nav-actions .btn-primary{border-color:var(--accent);color:#fff}
  .site-nav .nav-actions .btn-outline{color:var(--text-primary)}
  .site-footer{padding:40px 20px 24px;gap:28px}
  .footer-top{flex-direction:column;gap:28px}
  .footer-brand{width:auto;gap:12px}
  .footer-brand img{width:160px;height:32.67px}
  .footer-brand p{width:auto}
  .footer-links{flex-wrap:wrap;gap:28px;display:grid;grid-template-columns:auto auto}
  .footer-col{gap:10px}
  .footer-social{order:3}
  .footer-bottom{flex-direction:column;gap:4px}
  .section{padding:56px 16px}
  .h2{font-size:28px;line-height:36px}
  .lead{font-size:16px;line-height:26px}
}