@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:Inter,sans-serif;background:#f4fafb;color:#1a2e3b;line-height:1.6;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}

/* Переменные */
:root{
--primary:#008b8f;--dark:#003355;--light:#e1f5f5;--muted:#5b7b92;
--border:#d4e8ed;--white:#fff;--bg:#f4fafb;
--shadow:0 8px 30px rgba(0,51,85,.12);--shadow-lg:0 20px 60px rgba(0,51,85,.18);
--r:14px;--r-lg:24px;--r-xl:40px;
}

/* Контейнер — КЛЮЧЕВОЕ */
.wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 64px}

/* Кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 28px;border-radius:var(--r-xl);font-weight:600;font-size:.92rem;cursor:pointer;border:none;font-family:inherit;white-space:nowrap;transition:all .2s}
.btn-primary{background:linear-gradient(135deg,var(--dark),var(--primary));color:#fff;box-shadow:0 4px 15px rgba(0,139,143,.25)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,139,143,.35)}
.btn-outline{background:transparent;border:2px solid var(--primary);color:var(--primary)}
.btn-outline:hover{background:var(--light)}
.btn-white{background:#fff;color:var(--dark)}
.btn-white:hover{background:var(--light)}
.btn-ghost{background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.3);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.2)}
.btn-sm{padding:9px 20px;font-size:.82rem}
.btn-lg{padding:15px 36px;font-size:1rem}
.btn-block{width:100%}

/* Навбар */
.navbar{background:rgba(255,255,255,.96);backdrop-filter:blur(12px);position:sticky;top:0;z-index:1000;border-bottom:1px solid rgba(0,139,143,.08)}
.navbar .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:13px;padding-bottom:13px;gap:24px}
.logo{display:flex;flex-direction:column;align-items:center;gap:1px}
.logo img{height:40px}
.logo-sub{font-size:.6rem;font-weight:700;color:var(--primary);letter-spacing:1.5px;text-transform:uppercase}
.nav-links{display:flex;gap:6px}
.nav-links a{font-weight:500;color:var(--muted);font-size:.88rem;padding:7px 14px;border-radius:var(--r);transition:all .2s}
.nav-links a:hover{color:var(--primary);background:var(--light)}
.nav-actions{display:flex;gap:10px;align-items:center}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;background:none;border:none}
.burger span{display:block;width:22px;height:2px;background:var(--dark);border-radius:2px}
.mob-menu{display:none;position:fixed;top:67px;left:0;right:0;background:#fff;border-bottom:1px solid var(--border);z-index:999;box-shadow:var(--shadow)}
.mob-menu.open{display:block}
.mob-menu .wrap{padding-top:16px;padding-bottom:16px;display:flex;flex-direction:column;gap:4px}
.mob-menu a{display:block;padding:11px 0;font-weight:500;border-bottom:1px solid var(--border);color:var(--dark)}
.mob-menu a:last-child{border:none}

/* Герой */
.hero{padding:60px 0 52px;background:linear-gradient(150deg,#edf8f9 0%,#fff 55%,#f0f8f9 100%);overflow:hidden;position:relative}
.hero-circles{position:absolute;inset:0;pointer-events:none}
.hero-c1{position:absolute;top:-120px;right:0;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(0,139,143,.07) 0%,transparent 70%)}
.hero-c2{position:absolute;bottom:-80px;left:-60px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(0,51,85,.05) 0%,transparent 70%)}
.hero-inner{display:flex;gap:52px;align-items:flex-start;position:relative}
.hero-left{flex:0 0 48%;min-width:0}
.hero-right{flex:0 0 48%;min-width:0}
.badge{display:inline-flex;align-items:center;gap:8px;background:var(--light);color:#006d72;padding:6px 16px;border-radius:30px;font-size:.76rem;font-weight:700;margin-bottom:20px;border:1px solid rgba(0,139,143,.2)}
.hero h1{font-size:2.7rem;font-weight:800;line-height:1.13;color:var(--dark);margin-bottom:18px;letter-spacing:-.5px}
.hero h1 em{font-style:normal;color:var(--primary)}
.hero-desc{font-size:1rem;color:var(--muted);margin-bottom:28px;line-height:1.7;max-width:440px}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:36px}
.hero-stats{display:flex;gap:28px;padding-top:24px;border-top:1px solid var(--border)}
.hero-stat strong{display:block;font-size:1.8rem;font-weight:900;color:var(--dark);line-height:1}
.hero-stat span{font-size:.76rem;color:var(--muted);margin-top:3px;display:block}

/* Карточка входа */
.login-card{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:32px 28px;border:1px solid rgba(0,139,143,.12);position:relative;width:100%}
.login-card::before{content:"";position:absolute;top:0;left:28px;right:28px;height:3px;background:linear-gradient(90deg,var(--dark),var(--primary));border-radius:0 0 3px 3px}
.lc-title{font-size:1.25rem;font-weight:700;color:var(--dark);margin-bottom:4px}
.lc-sub{font-size:.82rem;color:var(--muted);margin-bottom:20px}
.fg{margin-bottom:13px}
.fg label{display:block;font-size:.8rem;font-weight:600;color:var(--dark);margin-bottom:5px}
.fg input{width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:var(--r);font-size:.9rem;font-family:inherit;transition:border-color .2s}
.fg input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(0,139,143,.1)}
.fg input::placeholder{color:#aac0ca}
.divider{display:flex;align-items:center;gap:12px;margin:14px 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--border)}
.divider span{font-size:.76rem;color:var(--muted);white-space:nowrap}
.auth-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.auth-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 10px;border:1.5px solid var(--border);border-radius:var(--r);background:#fff;cursor:pointer;font-size:.78rem;font-weight:600;color:var(--dark);transition:all .2s;font-family:inherit}
.auth-btn:hover{border-color:var(--primary);background:var(--light);color:var(--primary)}
.lc-foot{text-align:center;font-size:.81rem;color:var(--muted);margin-top:13px}
.lc-foot a{color:var(--primary);font-weight:600}
.alert-err{background:#fff0f0;border:1px solid #fcc;border-radius:var(--r);padding:9px 13px;color:#c00;font-size:.82rem;margin-bottom:13px}

/* Секции */
section{padding:80px 0}
.sec-label{font-size:.7rem;font-weight:800;color:var(--primary);letter-spacing:2px;text-transform:uppercase;text-align:center;margin-bottom:10px}
.sec-title{font-size:2.1rem;font-weight:800;text-align:center;color:var(--dark);margin-bottom:14px;letter-spacing:-.3px}
.sec-sub{text-align:center;color:var(--muted);max-width:540px;margin:0 auto 48px;font-size:.98rem;line-height:1.7}

/* Проекты */
.proj-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.proj-card{background:#fff;border-radius:var(--r-lg);padding:28px;border:1.5px solid var(--border);transition:all .25s;position:relative;overflow:hidden}
.proj-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;transition:height .25s}
.p1::before{background:linear-gradient(90deg,#003355,#008b8f)}
.p2::before{background:linear-gradient(90deg,#1a1a2e,#4a4a8a)}
.p3::before{background:linear-gradient(90deg,#006d72,#00a8ad)}
.p4::before{background:linear-gradient(90deg,#92400e,#d97706)}
.proj-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.proj-card:hover::before{height:4px}
.proj-num{position:absolute;top:16px;right:20px;font-size:2.6rem;font-weight:900;color:rgba(0,51,85,.05);line-height:1}
.proj-ico{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:16px}
.p1 .proj-ico{background:linear-gradient(135deg,#e1f5f5,#b8e8e9)}
.p2 .proj-ico{background:linear-gradient(135deg,#e8e8f5,#c8c8e8)}
.p3 .proj-ico{background:linear-gradient(135deg,#e0f5f5,#b0e5e6)}
.p4 .proj-ico{background:linear-gradient(135deg,#fef3c7,#fde68a)}
.proj-card h3{font-size:1.1rem;font-weight:700;color:var(--dark);margin-bottom:8px}
.proj-card p{color:var(--muted);font-size:.86rem;margin-bottom:16px;line-height:1.65}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.tag{padding:3px 10px;border-radius:20px;font-size:.71rem;font-weight:600}
.t-teal{background:var(--light);color:#006d72}
.t-blue{background:#e1f0ff;color:#1d4ed8}
.t-green{background:#dcfce7;color:#15803d}
.t-amber{background:#fef3c7;color:#b45309}
.t-gray{background:#f3f4f6;color:#6b7280}
.proj-cta{display:inline-flex;align-items:center;gap:6px;color:var(--primary);font-weight:600;font-size:.86rem;transition:gap .2s}
.proj-cta:hover{gap:10px}
.proj-status{position:absolute;bottom:20px;right:20px;display:flex;align-items:center;gap:5px;font-size:.71rem;font-weight:600}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.dot-green{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.2)}
.dot-amber{background:#f59e0b}

/* Преимущества */
.ben-section{background:#fff}
.ben-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ben-card{padding:26px;border-radius:var(--r-lg);border:1.5px solid var(--border);transition:all .2s}
.ben-card:hover{border-color:var(--primary);box-shadow:0 4px 16px rgba(0,139,143,.08)}
.ben-ico{width:46px;height:46px;border-radius:13px;background:var(--light);display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:13px}
.ben-card h4{font-size:.93rem;font-weight:700;color:var(--dark);margin-bottom:7px}
.ben-card p{font-size:.82rem;color:var(--muted);line-height:1.6}

/* CTA */
.cta{background:linear-gradient(135deg,#002a45 0%,#005566 100%);color:#fff;text-align:center;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;top:-40%;left:-10%;width:120%;height:180%;background:radial-gradient(ellipse,rgba(0,139,143,.25) 0%,transparent 60%)}
.cta .wrap{position:relative}
.cta h2{font-size:2.3rem;font-weight:800;margin-bottom:13px;letter-spacing:-.3px}
.cta p{font-size:1rem;opacity:.82;margin-bottom:28px}
.cta-btns{display:flex;gap:13px;justify-content:center;flex-wrap:wrap}
.part-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);padding:9px 18px;border-radius:30px;font-size:.82rem;margin-top:20px}

/* Футер */
.footer{background:#071e28;color:#8aabb8;padding:48px 0 24px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;margin-bottom:36px}
.footer-desc{font-size:.81rem;line-height:1.7;max-width:230px;margin-top:12px}
.footer-col h5{font-size:.73rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#fff;margin-bottom:13px}
.footer-col a{display:block;font-size:.81rem;color:#8aabb8;margin-bottom:8px;transition:color .2s}
.footer-col a:hover{color:var(--primary)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.07);padding-top:20px;display:flex;justify-content:space-between;font-size:.77rem;flex-wrap:wrap;gap:6px}

/* Адаптив */
@media(max-width:1024px){
  .wrap{padding:0 32px}
  .hero h1{font-size:2.2rem}
  .hero-inner{gap:32px}
  .footer-grid{grid-template-columns:1fr 1fr 1fr}
}

@media(max-width:768px){
  /* Контейнер */
  .wrap{padding:0 16px !important}

  /* Навбар */
  .navbar .wrap{padding-top:10px;padding-bottom:10px}
  .logo img{height:34px}
  .nav-links{display:none}
  .burger{display:flex}
  .btn-sm{padding:7px 14px;font-size:0.82rem}

  /* Hero */
  .hero{padding:24px 0 32px}
  .hero-inner{flex-direction:column;gap:24px}
  .hero-left{flex:none;width:100%;order:1}
  .hero-right{flex:none;width:100%;order:2}
  .hero h1{font-size:1.85rem;line-height:1.25}
  .hero-desc{font-size:0.92rem;margin-bottom:20px}
  .hero-btns{flex-direction:column;gap:10px;margin-bottom:24px}
  .hero-btns .btn{width:100%;justify-content:center}
  .hero-stats{gap:20px;padding-top:16px}
  .hero-stat strong{font-size:1.6rem}
  .hero-stat span{font-size:0.72rem}

  /* Форма логина */
  .login-card{padding:22px 18px;box-shadow:0 4px 20px rgba(0,51,85,.12)}
  .lc-title{font-size:1.1rem}
  .lc-sub{font-size:0.78rem;margin-bottom:14px}
  .fg{margin-bottom:10px}
  .fg input{padding:10px 12px;font-size:0.88rem}
  .auth-btns{grid-template-columns:1fr 1fr;gap:7px}
  .auth-btn{padding:8px 6px;font-size:0.74rem}
  .divider{margin:10px 0}

  /* Секции */
  section{padding:48px 0}
  .sec-title{font-size:1.5rem}
  .sec-sub{font-size:0.9rem;margin-bottom:28px}

  /* Проекты */
  .proj-grid{grid-template-columns:1fr;gap:14px}
  .proj-card{padding:20px 18px}
  .proj-card h3{font-size:1rem}
  .proj-card p{font-size:0.82rem}

  /* Преимущества */
  .ben-grid{grid-template-columns:1fr;gap:12px}
  .ben-card{padding:18px}
  .ben-card h4{font-size:0.9rem}

  /* CTA */
  .cta h2{font-size:1.7rem}
  .cta-btns{flex-direction:column;align-items:center;gap:10px}
  .cta-btns .btn{width:100%;max-width:280px;justify-content:center}

  /* Футер */
  .footer-grid{grid-template-columns:1fr 1fr;gap:20px}
  .footer-bottom{flex-direction:column;align-items:center;text-align:center;gap:8px}

  /* AI виджет */
  #umko-ai-wrap{bottom:16px;right:10px}
  #umko-ai-box{width:calc(100vw - 20px) !important;height:440px !important;right:0}

  /* Баг кнопка */
  
}

@media(max-width:480px){
  .hero h1{font-size:1.6rem}
  .auth-btns{grid-template-columns:1fr}
  .hero-stats{flex-wrap:wrap;gap:12px}
  .footer-grid{grid-template-columns:1fr}
  .badge{font-size:0.7rem;padding:5px 12px}
  .btn-lg{padding:13px 20px;font-size:0.95rem}
  .sec-title{font-size:1.35rem}
  .proj-card h3{font-size:0.95rem}
}

/* Тёмная тема */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1923;
    --bg2: #1a2535;
    --border: #2a3a4a;
    --text: #e2edf2;
    --muted: #8aa3b4;
  }
}
[data-theme="dark"] {
  --bg: #0f1923 !important;
  --bg2: #1a2535 !important;
  --border: #2a3a4a !important;
  --text: #e2edf2 !important;
  --muted: #8aa3b4 !important;
  background: #0f1923 !important;
  color: #e2edf2 !important;
}
[data-theme="dark"] .card,
[data-theme="dark"] .kpi-card,
[data-theme="dark"] body {
  background: #1a2535 !important;
  color: #e2edf2 !important;
  border-color: #2a3a4a !important;
}

/* ═══ МОБИЛЬНАЯ АДАПТАЦИЯ ═══ */
@media(max-width:768px){
  /* Hero секция */
  .hero { padding: 20px 0 30px; }
  .hero-inner { flex-direction: column; gap: 20px; }
  .hero-left { order: 1; }
  .hero-right { order: 2; width: 100%; }
  .hero h1 { font-size: 1.8rem; line-height: 1.3; }
  .hero-desc { font-size: 0.95rem; }
  .hero-btns { flex-direction: column; gap: 10px; }
  .hero-btns .btn { width: 100%; text-align: center; }
  .hero-stats { gap: 16px; }
  .hero-stat strong { font-size: 1.6rem; }

  /* Форма логина */
  .login-card { padding: 20px; border-radius: 12px; }
  .lc-title { font-size: 1.2rem; }
  .auth-btns { grid-template-columns: 1fr 1fr; gap: 8px; }
  .auth-btns .btn { font-size: 0.8rem; padding: 8px 6px; }

  /* Навигация */
  .navbar { padding: 10px 0; }
  .logo img { height: 32px; }
  .btn-sm { padding: 6px 14px; font-size: 0.85rem; }

  /* Секции */
  .sec-title { font-size: 1.5rem; }
  .proj-grid { grid-template-columns: 1fr; gap: 16px; }
  .ben-grid { grid-template-columns: 1fr; gap: 12px; }
  .proj-card, .ben-card { padding: 20px; }

  /* Wrap */
  .wrap { padding: 0 16px; }

  /* AI виджет на мобильном */
  #umko-ai-wrap { bottom: 70px; right: 10px; }
  #umko-ai-box { width: calc(100vw - 20px) !important; height: 420px !important; }
}

@media(max-width:480px){
  .hero h1 { font-size: 1.6rem; }
  .auth-btns { grid-template-columns: 1fr; }
  .hero-stats { flex-wrap: wrap; gap: 12px; }
  .hero-stat { min-width: 80px; }
  .login-card { margin: 0; }
  .btn-lg { padding: 14px 20px; font-size: 1rem; }
}

/* Фикс мобильной статистики */
@media(max-width:480px){
  .hero-stats {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 16px;
  }
  .hero-stat {
    flex: 1;
    min-width: 70px;
  }
  .auth-btns {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* Критические мобильные фиксы */
@media(max-width:768px){
  html, body { overflow-x: hidden; max-width: 100vw; }
  .hero-stats {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start;
    gap: 24px;
    flex-wrap: nowrap;
  }
  .hero-stat { flex: 0 0 auto; }
  * { max-width: 100%; box-sizing: border-box; }
}

/* ФИНАЛЬНЫЕ МОБИЛЬНЫЕ ФИКСЫ */
@media(max-width:768px){
  .hero-circles { display: none; }
  .hero-stats { 
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px;
  }
  .hero-stat strong { font-size: 1.4rem; }
  .hero-stat span { font-size: 0.65rem; }
}

/* Фикс горизонтального скролла */
@media(max-width:768px){
  .cta { overflow: hidden; }
  .cta::before { display: none; }
  .hero { overflow: hidden; }
}

/* Фикс navbar на мобильном */
@media(max-width:480px){
  .navbar .wrap { padding: 8px 12px; gap: 8px; }
  .nav-actions { gap: 6px; }
  .nav-actions .btn-outline { display: none; }
  .nav-actions .btn-primary { padding: 7px 12px; font-size: 0.78rem; }
  .logo img { height: 28px; }
  .logo-sub { display: none; }
  .burger { margin-left: auto; }
}

/* Cookie баннер — компактный */
#cookie-banner {
  padding: 10px 12px !important;
}
#cookie-banner > div:first-child {
  font-size: 0.75rem !important;
}

/* Финальные фиксы */
@media(max-width:480px){
  /* Логотип — показать иконку */
  .logo img { height: 30px; display: block; }
  
  /* AI виджет — левее чтобы не перекрывал Баг */
  #umko-ai-widget { right: 80px !important; bottom: 20px !important; }
  
  
  /* Устранить горизонтальный скролл */
  .hero-inner { width: 100%; overflow: hidden; }
  .section, section { overflow: hidden; }
}

@media(max-width:400px){
  .hero-stat strong { font-size: 1.2rem; }
  .hero-stat span { font-size: 0.6rem; }
  .hero-stats { gap: 6px; }
}

/* Cookie баннер — убрать после принятия навсегда */
#cookie-banner {
  max-height: 120px;
  overflow: hidden;
}

/* AI виджет и Баг кнопка — не перекрываются */
#umko-ai-widget {
  bottom: 80px !important;
  right: 24px !important;
}

@media(max-width:768px){
  #umko-ai-widget { bottom: 80px !important; right: 10px !important; }
  
}

/* AI над Баг — финальная позиция */
#umko-ai-widget,
div#umko-ai-widget {
  position: fixed !important;
  bottom: 76px !important;
  right: 20px !important;
  z-index: 9999 !important;
}
#uai-bubble {
  margin-left: 0 !important;
}