/* ============================================================
   ABICO — Design System
   Brand: Abico blue — deep navy depth, sky-blue accent (matches logo)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@300;400;500;600;700;800&display=swap');

:root{
  /* Brand */
  --blue:        #1572BE;
  --blue-dark:   #0E5A9C;
  --blue-700:    #0c4f8a;
  --blue-light:  #6FC4EE;
  --blue-50:     #eaf4fb;

  /* Abico brand blues (abico.mn exact colors, kept under legacy --green* names) */
  --green-900:   #001C3B;   /* deep navy — footer/dark sections (abico.mn) */
  --green-800:   #023876;   /* navy — panels (abico.mn) */
  --green:       #00b5f5;   /* sky blue accent (abico.mn) */
  --green-50:    #e6f7fe;

  /* Neutrals */
  --ink:         #14201c;
  --ink-2:       #3c4944;
  --muted:       #66736c;
  --paper:       #ffffff;
  --cream:       #f6f7f4;
  --cream-2:     #eef0ea;
  --line:        #e6e8e2;

  /* Type */
  --font: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Radius */
  --r-sm: 12px;
  --r:    18px;
  --r-lg: 26px;
  --r-xl: 36px;
  --pill: 999px;

  /* Shadow */
  --sh-sm: 0 1px 2px rgba(0,28,59,.06), 0 1px 3px rgba(0,28,59,.05);
  --sh:    0 6px 24px -8px rgba(0,28,59,.14);
  --sh-lg: 0 24px 60px -20px rgba(0,28,59,.24);

  /* Layout */
  --container: clamp(1600px, 94vw, 2100px);
  --gutter: clamp(20px, 5vw, 48px);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; max-width:100%; overflow-x:clip; }
body{
  margin:0;
  max-width:100%;
  overflow-x:clip;
  font-family:var(--font);
  color:var(--ink);
  background:var(--paper);
  font-size:17px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ margin:0; line-height:1.08; letter-spacing:-.02em; font-weight:700; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

/* ---------- Layout primitives ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(64px,9vw,128px); }
.section--tight{ padding-block:clamp(48px,6vw,80px); }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue);
}
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--blue); border-radius:2px; }
.eyebrow.is-green{ color:var(--green); }
.eyebrow.is-green::before{ background:var(--green); }
.eyebrow.on-dark{ color:var(--blue-light); }
.eyebrow.on-dark::before{ background:var(--blue-light); }

.sec-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:clamp(32px,4vw,56px); flex-wrap:wrap; }
.sec-head p{ margin-top:16px; max-width:46ch; }

.h-display{ font-size:clamp(38px,6vw,76px); font-weight:800; letter-spacing:-.035em; }
.h-1{ font-size:clamp(30px,4.4vw,52px); font-weight:800; letter-spacing:-.03em; }
.h-2{ font-size:clamp(24px,3vw,36px); font-weight:700; }
.lede{ font-size:clamp(17px,1.5vw,21px); color:var(--ink-2); line-height:1.55; }
.muted{ color:var(--muted); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-weight:600; font-size:15.5px; line-height:1;
  padding:15px 26px; border-radius:var(--pill);
  border:1px solid transparent; transition:.2s ease; white-space:nowrap;
}
.btn svg{ width:18px; height:18px; }
.btn--primary{ background:var(--blue); color:#fff; box-shadow:0 8px 20px -8px rgba(21,114,190,.6); }
.btn--primary:hover{ background:var(--blue-dark); transform:translateY(-2px); box-shadow:0 14px 26px -10px rgba(21,114,190,.7); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--blue); color:var(--blue); }
.btn--light{ background:#fff; color:var(--ink); }
.btn--light:hover{ transform:translateY(-2px); box-shadow:var(--sh); }
.btn--on-dark{ background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.22); backdrop-filter:blur(6px); }
.btn--on-dark:hover{ background:rgba(255,255,255,.2); }

.link-arrow{ display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--blue); }
.link-arrow svg{ width:17px; height:17px; transition:transform .2s; }
.link-arrow:hover svg{ transform:translateX(4px); }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; gap:28px; height:74px; }
.nav__logo img{ height:34px; }
.nav__links{ display:flex; align-items:center; gap:6px; margin-left:8px; }
.nav__links a{
  padding:9px 14px; border-radius:var(--pill); font-size:15px; font-weight:500; color:var(--ink-2);
  transition:.18s;
}
.nav__links a:hover{ background:var(--cream-2); color:var(--ink); }
.nav__links a.is-active{ color:var(--blue); font-weight:600; }
.nav__right{ margin-left:auto; display:flex; align-items:center; gap:14px; }
.lang{ display:flex; gap:2px; font-size:14px; font-weight:600; color:var(--muted); }
.lang a.is-active{ color:var(--ink); }
.lang span{ opacity:.4; }
.nav__lang{ display:inline-flex; align-items:center; gap:2px; border:1px solid var(--line); border-radius:999px; padding:3px; background:#fff; }
.nav__lang a{ font-size:12px; font-weight:700; letter-spacing:.02em; color:var(--muted); text-decoration:none; padding:5px 9px; border-radius:999px; line-height:1; transition:.18s ease; }
.nav__lang a:hover{ color:var(--ink); background:var(--cream-2); }
.nav__lang a.is-active{ color:#fff; background:var(--blue); }
.nav__toggle{ display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:12px; background:#fff; align-items:center; justify-content:center; }
.nav__toggle svg{ width:22px; height:22px; }

/* mobile menu */
.mobile-menu{ display:none; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--green-900); color:#b8cfe8; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:48px; padding-block:72px; }
.site-footer h6{ font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:#fff; margin:0 0 18px; font-weight:600; }
.site-footer a{ color:#aebbb2; transition:.18s; }
.site-footer a:hover{ color:#fff; }
.footer-col p{ color:#9fb0a6; font-size:15px; line-height:1.7; }
.footer-list li{ margin-bottom:11px; font-size:15px; }
.footer-logo img{ height:34px; margin-bottom:20px; }
.footer-social{ display:flex; gap:10px; margin-top:22px; }
.footer-social a{ width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; }
.footer-social a:hover{ background:var(--blue); }
.footer-social svg{ width:18px; height:18px; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); padding-block:24px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13.5px; color:#8b9a90; }

/* ---------- Cards / generic ---------- */
.card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; transition:.25s ease; }
.card:hover{ box-shadow:var(--sh-lg); transform:translateY(-4px); border-color:transparent; }

.tag{ display:inline-block; font-size:12px; font-weight:600; letter-spacing:.04em; padding:5px 11px; border-radius:var(--pill); background:var(--blue-50); color:var(--blue-dark); }
.tag.is-green{ background:var(--green-50); color:#0369a1; }

/* ---------- Subpage shared ---------- */
.page-hero{ background:linear-gradient(180deg,var(--blue-50),#fff); border-bottom:1px solid var(--line); padding-block:clamp(40px,6vw,72px); }
.crumb{ font-size:14px; color:var(--muted); display:flex; gap:8px; align-items:center; margin-bottom:18px; }
.crumb a:hover{ color:var(--blue); }
.crumb span{ opacity:.5; }
.page-hero h1{ font-size:clamp(34px,5vw,60px); font-weight:800; letter-spacing:-.03em; }
.page-hero p{ margin-top:18px; max-width:54ch; }
/* Бараан hero — газрын зургийн цэгэн хээтэй (stores, about, brands г.м. дэд хуудсууд) */
.page-hero--dark{ background:linear-gradient(140deg,#0e2a47 0%,#123a63 55%,#0f4c81 100%); border-bottom:0; position:relative; overflow:hidden; }
.page-hero--dark::before{ content:""; position:absolute; inset:0; opacity:.14;
  background-image:radial-gradient(rgba(255,255,255,.9) 1.2px, transparent 1.2px);
  background-size:26px 26px; }
.page-hero--dark::after{ content:""; position:absolute; right:-60px; top:-80px; width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle, rgba(64,160,255,.28), transparent 65%); }
.page-hero--dark .container{ position:relative; z-index:1; }
.page-hero--dark h1{ color:#fff; }
.page-hero--dark .lede{ color:#c7dcf2; }
.page-hero--dark .crumb, .page-hero--dark .crumb a{ color:#8fb4d9; }
.page-hero--dark .filters button{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.18); color:#e7f1fb; }
.page-hero--dark .filters button:hover{ border-color:#7cc4ff; color:#fff; }
.page-hero--dark .filters button.is-active{ background:#fff; color:var(--ink); border-color:#fff; }
.hero-chips{ display:flex; gap:10px; margin-top:26px; flex-wrap:wrap; }
.hero-chips span{ display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16);
  color:#e7f1fb; font-size:13.5px; font-weight:600; padding:8px 15px; border-radius:var(--pill); }
.hero-chips svg{ width:14px; height:14px; color:#7cc4ff; }
/* Статистик мөр (about, stores) */
.statbar{ display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:#fff; box-shadow:var(--sh-sm); }
.statbar .s{ padding:30px 28px; border-right:1px solid var(--line); }
.statbar .s:last-child{ border-right:0; }
.statbar .n{ font-size:clamp(30px,3.8vw,46px); font-weight:800; letter-spacing:-.03em; color:var(--blue); }
.statbar .t{ font-size:13.5px; color:var(--muted); margin-top:6px; }
@media (max-width:860px){
  .statbar{ grid-template-columns:1fr 1fr; }
  .statbar .s:nth-child(2){ border-right:0; }
  .statbar .s:nth-child(1),.statbar .s:nth-child(2){ border-bottom:1px solid var(--line); }
}
/* CTA band (index, stores) */
.cta-band{ background:linear-gradient(140deg,var(--blue),var(--blue-700)); border-radius:var(--r-xl); padding:clamp(40px,6vw,72px);
  color:#fff; display:grid; grid-template-columns:1.4fr 1fr; gap:30px; align-items:center; position:relative; overflow:hidden; }
.cta-band::after{ content:""; position:absolute; right:-80px; bottom:-120px; width:360px; height:360px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.14), transparent 65%); }
.cta-band h2{ font-size:clamp(26px,3.4vw,42px); font-weight:800; letter-spacing:-.02em; }
.cta-band p{ margin-top:14px; color:#dcebf8; max-width:42ch; }
.cta-band .actions{ display:flex; gap:14px; flex-wrap:wrap; position:relative; }
@media (max-width:900px){ .cta-band{ grid-template-columns:1fr; } }
.prose p{ margin-bottom:18px; color:var(--ink-2); }
.prose p:last-child{ margin-bottom:0; }

/* ---------- Reveal on scroll (replays every time it enters/leaves the viewport) ---------- */
@media (prefers-reduced-motion:no-preference){
  .reveal{
    opacity:0; transform:translateX(-40px);
    transition:opacity 1.3s cubic-bezier(.22,1,.36,1), transform 1.3s cubic-bezier(.22,1,.36,1);
  }
  .reveal.in{ opacity:1; transform:none; }
  /* text blocks (headings, paragraphs) rise up instead of sliding sideways */
  .reveal-up{
    opacity:0; transform:translateY(34px);
    transition:opacity 1.3s cubic-bezier(.22,1,.36,1), transform 1.3s cubic-bezier(.22,1,.36,1);
  }
  .reveal-up.in{ opacity:1; transform:none; }
  /* stagger siblings revealed together (grids, columns) for a smoother, one-after-another feel */
  .reveal.in:nth-child(2), .reveal-up.in:nth-child(2){ transition-delay:.12s; }
  .reveal.in:nth-child(3), .reveal-up.in:nth-child(3){ transition-delay:.24s; }
  .reveal.in:nth-child(4), .reveal-up.in:nth-child(4){ transition-delay:.36s; }
  .reveal.in:nth-child(5), .reveal-up.in:nth-child(5){ transition-delay:.48s; }
  .reveal.in:nth-child(6), .reveal-up.in:nth-child(6){ transition-delay:.6s; }
  .reveal.in:nth-child(7), .reveal-up.in:nth-child(7){ transition-delay:.72s; }
  .reveal.in:nth-child(8), .reveal-up.in:nth-child(8){ transition-delay:.84s; }
}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .footer-top{ grid-template-columns:1fr 1fr; gap:36px; }
}
@media (max-width:860px){
  .nav__logo{ flex-shrink:0; }
  .nav__links, .nav .lang, .nav__right > .btn{ display:none; }
  .nav__toggle{ display:flex; flex-shrink:0; }
  .mobile-menu{ display:block; position:fixed; inset:74px 0 auto 0; background:#fff; border-bottom:1px solid var(--line);
    padding:16px var(--gutter) 28px; transform:translateY(-120%); transition:transform .35s cubic-bezier(.16,1,.3,1); z-index:99; box-shadow:var(--sh-lg); }
  .mobile-menu.open{ transform:translateY(0); }
  .mobile-menu a{ display:block; padding:14px 6px; font-size:18px; font-weight:600; border-bottom:1px solid var(--cream-2); }
  .mobile-menu .btn{ margin-top:18px; width:100%; }
}
@media (max-width:600px){
  body{ font-size:16px; }
  .footer-top{ grid-template-columns:1fr; gap:28px; padding-block:54px; }
}