/* ============================================================
   e-uyim.uz — дизайн-система (финал)
   Manrope · Тил #0C9488 · Arctic (белый + холодный серый)
   Стиль domyland: мягко, чисто, воздушно, пилюли-кнопки
   ============================================================ */

:root {
  /* --- Акцент --- */
  --teal:      #0C9488;
  --teal-d:    #0A776D;
  --teal-l:    #16C098;
  --teal-soft: #E6F4F2;

  /* --- Нейтралы Arctic (белый + прохладный серый) --- */
  --white: #FFFFFF;
  --n50:   #F5F6F8;   /* нейтральная серая подложка секций */
  --n100:  #EDEFF1;
  --n200:  #E0E3E7;   /* линии, бордеры */
  --n300:  #CBD0D5;
  --n400:  #97A0A8;   /* приглушённый */
  --n600:  #566069;   /* вторичный текст */
  --n800:  #262C32;
  --ink:   #16211F;   /* основной текст */
  --forest:#0F1C1A;   /* тёмные секции, футер */

  /* --- Семантика --- */
  --ok:     #0C9488;  --ok-soft:#E6F4F2;
  --warn:   #F2CF1F;  --warn-soft:#FCF6D2;  --warn-ink:#7A6410;
  --danger: #FA0F0F;  --danger-soft:#FDE4E4; --danger-ink:#C00A0A;
  --info:   #2E86C1;

  /* --- Шрифт --- */
  --f: "Manrope", system-ui, -apple-system, sans-serif;

  /* --- Радиусы (мягкие) --- */
  --r-sm: 8px; --r: 12px; --r-lg: 18px; --r-xl: 26px; --r-pill: 999px;

  /* --- Тени (мягкие, холодный подтон — не нейтральный слоп) --- */
  --sh-sm: 0 1px 2px rgba(15,28,26,.05), 0 2px 6px rgba(15,28,26,.04);
  --sh:    0 6px 16px -6px rgba(15,28,26,.10), 0 12px 34px -14px rgba(15,28,26,.10);
  --sh-lg: 0 24px 60px -24px rgba(12,148,136,.28);

  --container: 1200px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ------------------------- reset ------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--f); color: var(--ink); background: var(--white);
  line-height: 1.6; font-size: 16px;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
ul { list-style: none; padding: 0; }

/* ------------------------- типографика ------------------------- */
h1, h2, h3, h4 { font-family: var(--f); line-height: 1.1; letter-spacing: -.03em; font-weight: 800; color: inherit; }
h1 { font-size: clamp(38px, 4.6vw, 56px); }
h2 { font-size: clamp(28px, 3.4vw, 42px); }
h3 { font-size: clamp(19px, 1.8vw, 23px); font-weight: 700; letter-spacing: -.02em; }
h4 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
p { color: var(--n600); }
.lead { font-size: clamp(17px, 1.4vw, 20px); color: var(--n600); font-weight: 500; line-height: 1.55; }
.measure { max-width: 58ch; }

/* надзаголовок — спокойный, без капсулы-пилюли */
.eyebrow { font-size: 14px; font-weight: 700; color: var(--teal); letter-spacing: .01em; margin-bottom: 16px; display: inline-block; }

/* ------------------------- layout ------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 28px; }
.section { padding-block: clamp(60px, 8vw, 104px); }
.section--n50 { background: var(--n50); }

.sec-head { max-width: 680px; margin-bottom: 44px; }
.sec-head h2 { margin-bottom: 16px; }

/* ------------------------- кнопки (пилюли, как domyland) ------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--f); font-weight: 700; font-size: 15px;
  padding: 14px 26px; border-radius: var(--r-pill);
  transition: background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
  white-space: nowrap; line-height: 1;
}
.btn i { font-size: 13px; }
.btn--primary { background: var(--teal); color: #fff; }
.btn--primary:hover { background: var(--teal-d); }
.btn--dark { background: var(--forest); color: #fff; }
.btn--dark:hover { background: #000; }
.btn--outline { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--n200); }
.btn--outline:hover { box-shadow: inset 0 0 0 1.5px var(--teal); color: var(--teal); }
.btn--light { background: #fff; color: var(--forest); }
.btn--light:hover { background: var(--n100); }
.btn--ghost-light { background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.25); }
.btn--ghost-light:hover { background: rgba(255,255,255,.16); }
.btn--lg { padding: 16px 30px; font-size: 16px; }

.arrow-link { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; color: var(--teal); }
.arrow-link i { transition: transform .2s var(--ease); font-size: 13px; }
.arrow-link:hover i { transform: translateX(4px); }

/* ------------------------- бейджи-статусы (сплошной фон + белый текст) ------------------------- */
.badge { font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; color: #fff; }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .85; }
/* стандартная семантика статусов (solid) */
.badge--new  { background: #3D85C6; }             /* новое — синий */
.badge--work { background: #F97316; }             /* в работе — оранжевый, белый текст */
.badge--done { background: var(--teal); }         /* успех — акцентный тил */
.badge--over { background: #F50707; }             /* проблема — красный */
.badge--neu  { background: #5B7290; }             /* нейтральное — сине-серый */
/* алиасы старых имён */
.badge--ok { background: #3D85C6; }
.badge--warn { background: #F97316; }
.badge--danger { background: #F50707; }
.badge--mut { background: var(--teal); }

/* ------------------------- появление ------------------------- */
.reveal { opacity: 1; }
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
[data-delay="1"]{ transition-delay: .07s; }
[data-delay="2"]{ transition-delay: .14s; }
[data-delay="3"]{ transition-delay: .21s; }
[data-delay="4"]{ transition-delay: .28s; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}