/* === IDS Modern Design System ===
   Токены палитры сверены с brand/identity/colors.md (IDS Navy / Deep Navy /
   Steel Blue / Cyan / Light Cyan / Charcoal / Graphite / Line / Cloud). */
:root{
  --navy:#0A3B63;      /* IDS Navy — primary */
  --deep:#03355F;      /* Deep Navy — тёмные фоны, футер */
  --steel:#084F7B;     /* Steel Blue — вторичные акценты, ссылки на белом */
  --cyan:#00ABC9;      /* IDS Cyan — CTA, акценты (10%) */
  --cyan-l:#87D4E1;    /* Light Cyan — hover, тонкие акценты, текст на тёмном */
  --cloud:#F4F6F8;     /* Cloud — светлый фон секций */
  --line:#DDE3EA;      /* Line — границы, разделители */
  --text:#2D2D34;      /* Charcoal — основной текст */
  --text-muted:#5A6472;/* Graphite — второстепенный текст */
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --shadow:0 1px 3px rgba(10,59,99,0.08),0 1px 2px rgba(10,59,99,0.04);
  --shadow-hover:0 10px 40px rgba(10,59,99,0.12);
  --transition:all 0.25s cubic-bezier(0.4,0,0.2,1);
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-head:'Montserrat','Arial Black',system-ui,sans-serif;
  --font-mono:'JetBrains Mono','Fira Code',monospace;
  --grad-brand:linear-gradient(135deg,#03355F 0%,#084F7B 55%,#00ABC9 100%);
  --grad-cyan:linear-gradient(135deg,#00ABC9 0%,#87D4E1 100%);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip;max-width:100%}
body{font-family:var(--font-sans);color:var(--text);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
.container{width:92%;max-width:1200px;margin:0 auto;padding:0 20px}

/* Фирменные заголовки — Montserrat (см. brand/identity/typography.md) */
h1,h2,h3,h4,.hero-title,.section-header h2,.cases-header h2,.page-hero h1{
  font-family:var(--font-head);
  letter-spacing:-0.01em;
}

/* === Accessibility: фокус и уважение к reduced-motion === */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,.mobile-nav-item:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:2px;
  border-radius:4px;
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* === Animations === */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.animate-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.6s cubic-bezier(0.4,0,0.2,1), transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.animate-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

.animate-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
.animate-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.animate-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
.animate-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.stagger-1 { transition-delay: 0.05s; }
.stagger-2 { transition-delay: 0.1s; }
.stagger-3 { transition-delay: 0.15s; }
.stagger-4 { transition-delay: 0.2s; }
.stagger-5 { transition-delay: 0.25s; }
.stagger-6 { transition-delay: 0.3s; }

.hero-content { animation: fadeInUp 0.8s cubic-bezier(0.4,0,0.2,1) 0.2s both; }
.hero-visual { animation: fadeInUp 0.8s cubic-bezier(0.4,0,0.2,1) 0.4s both; }

/* === Header (без top-bar — телефон/почта живут в шапке и футере) === */
.header{position:sticky;top:0;left:0;right:0;z-index:100;background:rgba(255,255,255,0.96);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);transition:var(--transition)}
.header.scrolled{box-shadow:var(--shadow)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:68px;gap:20px}
.header-brand{display:flex;align-items:center;flex-shrink:0}
.header-logo{height:38px;width:auto;display:block}
.header-nav{display:flex;gap:20px;align-items:center;margin-left:auto}
.header-nav a{color:var(--steel);text-decoration:none;font-size:14px;font-weight:500;transition:var(--transition);position:relative;padding:4px 0;white-space:nowrap}
.header-nav a:hover{color:var(--text)}
.header-nav a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--cyan);transition:width 0.3s cubic-bezier(0.4,0,0.2,1);border-radius:2px}
.header-nav a:hover::after{width:100%}
.header-cta{background:var(--navy);color:#fff;padding:10px 22px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;text-decoration:none;transition:var(--transition);letter-spacing:0.01em;white-space:nowrap;flex-shrink:0}
.header-cta::after{display:none!important}
/* Фикс специфичности: .header-nav a (0,1,1) перебивал .header-cta (0,1,0) — цвет, padding и font-size.
   Из-за этого «Чекап» был синий-на-синем и сжат без боковых отступов. Дублируем свойства с высокой специфичностью. */
.header-nav a.header-cta{color:#fff;padding:10px 22px;font-size:13px}
.header-nav a.header-cta:hover{color:#fff}
.header-cta:hover{background:var(--deep);transform:translateY(-1px);box-shadow:var(--shadow-hover)}

/* Компактный CTA-телефон в шапке (десктоп) */
.header-phone{display:flex;align-items:center;gap:6px;color:var(--steel);text-decoration:none;font-size:13px;font-weight:600;white-space:nowrap;transition:color 0.2s;margin-left:8px}
.header-phone svg,.header-phone i{color:var(--cyan);flex-shrink:0;font-size:13px}
.header-phone:hover{color:var(--navy)}

.mobile-menu-btn{display:none;background:none;border:none;cursor:pointer;padding:8px;flex-direction:column;gap:5px;min-width:44px;min-height:44px;align-items:center;justify-content:center}
.mobile-menu-btn span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:var(--transition)}

/* === Hero === */
.hero{padding:140px 0 100px;background:var(--bg);position:relative;overflow:hidden;min-height:90vh;display:flex;align-items:center}
.hero-bg{position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;opacity:0.4;background:radial-gradient(ellipse 80% 60% at 20% 40%,var(--cyan-l),transparent),radial-gradient(ellipse 60% 50% at 80% 60%,rgba(0,171,201,0.08),transparent)}
.hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;position:relative;z-index:1}
.hero-content{position:relative;z-index:2}
.hero-eyebrow{font-family:var(--font-mono);font-weight:500;font-size:11px;letter-spacing:0.15em;text-transform:uppercase;color:var(--cyan);margin-bottom:20px;background:var(--cyan-l);padding:6px 14px;border-radius:20px;display:inline-block}
.hero h1{font-weight:800;font-size:clamp(36px,5vw,64px);line-height:1.05;letter-spacing:-0.03em;margin-bottom:24px;color:var(--text)}
.hero h1 .accent{color:var(--navy)}
.hero-lead{font-size:clamp(16px,1.5vw,20px);color:var(--text-muted);max-width:520px;margin-bottom:32px;line-height:1.7}
.hero-btns{display:flex;gap:16px;flex-wrap:wrap}

.btn-primary{background:var(--navy);color:#fff;padding:14px 28px;border-radius:var(--radius-sm);font-size:15px;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:var(--transition);border:none;cursor:pointer;letter-spacing:0.01em}
.btn-primary:hover{background:var(--deep);transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.btn-secondary{background:transparent;color:var(--text);padding:14px 28px;border-radius:var(--radius-sm);font-size:15px;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line);transition:var(--transition)}
.btn-secondary:hover{border-color:var(--navy);background:var(--cloud)}

.hero-visual{position:relative;display:flex;justify-content:center;align-items:center;z-index:2}
.hero-visual img{max-width:100%;height:auto;filter:drop-shadow(0 30px 60px rgba(10,59,99,0.12));max-height:400px;border-radius:var(--radius-lg)}

/* === Section Headers === */
.section-header{text-align:center;margin-bottom:56px}
.section-header h2{font-weight:800;font-size:clamp(28px,3.5vw,40px);letter-spacing:-0.02em;margin-bottom:12px;color:var(--text)}
.section-header p{color:var(--text-muted);font-size:17px;max-width:640px;margin:0 auto;line-height:1.6}

/* === Cards === */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px;transition:var(--transition)}
.card:hover{border-color:var(--cyan);transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.card h3{font-weight:700;font-size:18px;margin-bottom:12px;color:var(--text)}
.card p{color:var(--text-muted);font-size:14px;line-height:1.7}
.card ul{margin:16px 0 0 20px;color:var(--text-muted);font-size:14px;line-height:1.8}
.card li{margin-bottom:4px}

.tag{display:inline-block;background:var(--cloud);padding:4px 12px;border-radius:20px;font-size:12px;color:var(--text-muted);border:1px solid var(--line);margin-top:12px;font-weight:500}

/* === Grid layouts === */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

/* === Integration === */
.integration{padding:100px 0;background:var(--bg)}

/* === Values === */
.values{padding:100px 0;background:var(--cloud)}
.value-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:36px 28px;transition:var(--transition)}
.value-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-color:var(--cyan)}
.value-icon{width:48px;height:48px;background:var(--navy);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;margin-bottom:20px;font-size:14px;color:#fff;font-weight:800;font-family:var(--font-mono)}
.value-card h3{font-weight:700;font-size:20px;margin-bottom:10px}
.value-card p{color:var(--text-muted);font-size:15px;line-height:1.7}

/* === Process === */
.process{padding:100px 0;background:var(--bg)}
.process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.process-step{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px 24px;text-align:center;transition:var(--transition);position:relative}
.process-step:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-color:var(--cyan)}
.process-step-num{width:40px;height:40px;background:var(--navy);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;margin:0 auto 16px;font-family:var(--font-mono)}
.process-step h4{font-weight:700;font-size:17px;margin-bottom:8px}
.process-step p{color:var(--text-muted);font-size:14px;line-height:1.6}

/* === Map / Feature Sections === */
.map-section{padding:100px 0;background:var(--cloud)}
.lake-section{padding:100px 0;background:var(--bg)}
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.feature-visual{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px}
.feature-visual img{width:100%;border-radius:var(--radius-md);box-shadow:var(--shadow)}
.feature-content h3{font-weight:700;font-size:22px;margin-bottom:16px}
.feature-content p{color:var(--text-muted);margin-bottom:12px;line-height:1.8;font-size:15px}
.feature-content ul{margin:16px 0 16px 24px;color:var(--text-muted);font-size:15px;line-height:1.8}
.feature-content li{margin-bottom:8px}

.feature-subgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
.feature-subitem{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:20px 16px;transition:var(--transition)}
.feature-subitem:hover{border-color:var(--cyan)}
.feature-subitem h4{font-weight:700;font-size:14px;margin-bottom:6px}
.feature-subitem p{color:var(--text-muted);font-size:13px;line-height:1.5}

.highlight-box{background:var(--navy);color:#fff;border-radius:var(--radius-lg);padding:28px 24px;margin-top:24px}
.highlight-box h4{font-weight:700;font-size:16px;margin-bottom:12px}
.highlight-box ul{margin:0 0 0 20px;font-size:14px;line-height:1.8;color:var(--cyan-l)}

/* === MDM/ESB === */
.mdm-esb{padding:100px 0;background:var(--cloud)}
.mdm-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px 28px;transition:var(--transition)}
.mdm-card:hover{border-color:var(--cyan);box-shadow:var(--shadow-hover)}
.mdm-card h3{font-weight:700;font-size:20px;margin-bottom:14px;display:flex;align-items:center;gap:12px}
.mdm-icon{width:44px;height:44px;background:var(--navy);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;flex-shrink:0}
.mdm-card p{color:var(--text-muted);margin-bottom:12px;line-height:1.7;font-size:14px}
.mdm-card ul{margin:12px 0 12px 24px;color:var(--text-muted);font-size:14px;line-height:1.8}
.mdm-card li{margin-bottom:6px}

/* === Tech === */
.tech{padding:100px 0;background:var(--bg)}
.tech-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tech-category{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px 20px;transition:var(--transition)}
.tech-category:hover{border-color:var(--cyan)}
.tech-category h4{font-weight:700;font-size:14px;margin-bottom:14px;color:var(--text);display:flex;align-items:center;gap:8px}
.tech-category h4::before{content:'';width:3px;height:16px;background:var(--cyan);border-radius:2px}
.tech-items{display:flex;flex-wrap:wrap;gap:6px}
.tech-item{background:var(--cloud);padding:4px 12px;border-radius:20px;font-size:12px;color:var(--text-muted);border:1px solid var(--line);font-weight:500;transition:var(--transition)}
.tech-category h4{margin-bottom:8px}
.tech-desc{color:var(--text-muted);font-size:12.5px;line-height:1.5;margin:0 0 12px}
.tech-item:hover{background:var(--navy);color:#fff;border-color:var(--navy)}

/* === Cases === */
.cases{padding:100px 0;background:var(--cloud)}
.cases-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:40px}
.cases-header h2{font-weight:800;font-size:clamp(28px,3.5vw,40px);letter-spacing:-0.02em}
.cases-header a{color:var(--steel);text-decoration:none;font-weight:600;font-size:14px;display:flex;align-items:center;gap:4px}
.cases-header a:hover{color:var(--navy)}
.case-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;transition:var(--transition)}
.case-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-color:var(--cyan)}
.case-card-img{height:160px;background:var(--cloud);position:relative;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:var(--steel);border-bottom:1px solid var(--line)}
.case-card-body{padding:24px}
.case-card-body h4{font-weight:700;font-size:17px;margin-bottom:8px}
.case-card-body p{color:var(--text-muted);font-size:14px;margin-bottom:12px;line-height:1.6}
.case-metric{display:flex;align-items:center;gap:6px;font-weight:800;font-size:22px;color:var(--navy)}
.case-metric span{font-size:12px;font-weight:500;color:var(--text-muted)}

/* === Contact === */
.contact-block{padding:100px 0;background:var(--cloud)}
.contact-item{display:flex;align-items:flex-start;gap:16px;margin-bottom:24px}
.contact-icon{width:48px;height:48px;background:var(--cloud);border:1px solid var(--line);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;transition:var(--transition)}
.contact-item:hover .contact-icon{border-color:var(--cyan);background:var(--cyan-l)}
.contact-icon i{color:var(--cyan)}
.contact-item:hover .contact-icon i{color:var(--navy)}
.contact-item h4{font-weight:700;font-size:15px;margin-bottom:4px}
.contact-item p,.contact-item a{color:var(--text-muted);font-size:15px;text-decoration:none;transition:color 0.2s}
.contact-item a:hover{color:var(--navy)}

.form-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:36px 28px;box-shadow:var(--shadow)}
.form-card h3{font-weight:800;font-size:20px;margin-bottom:6px}
.form-card>p{color:var(--text-muted);font-size:14px;margin-bottom:24px}
.form-group{margin-bottom:18px}
.form-group label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--text)}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--radius-sm);font-size:14px;font-family:var(--font-sans);transition:var(--transition);background:var(--bg)}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,171,201,0.1)}
.form-group textarea{min-height:100px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.btn-submit{background:var(--navy);color:#fff;padding:14px 28px;border-radius:var(--radius-sm);font-size:15px;font-weight:600;border:none;cursor:pointer;width:100%;transition:var(--transition)}
.btn-submit:hover{background:var(--deep);transform:translateY(-1px)}

/* === CTA === */
.cta{padding:100px 0;background:linear-gradient(rgba(3,53,95,0.35),rgba(3,53,95,0.35)),var(--grad-brand);position:relative;overflow:hidden;text-align:center}
.cta::before{content:'';position:absolute;top:-50%;left:-10%;width:60%;height:200%;background:radial-gradient(circle,rgba(0,171,201,0.12) 0%,transparent 70%);pointer-events:none}
.cta::after{content:'';position:absolute;bottom:-50%;right:-10%;width:60%;height:200%;background:radial-gradient(circle,rgba(0,171,201,0.08) 0%,transparent 70%);pointer-events:none}
.cta h2{font-weight:800;font-size:clamp(28px,4vw,40px);color:#fff;margin-bottom:16px;position:relative;z-index:1;letter-spacing:-0.02em}
.cta p{color:var(--cyan-l);font-size:17px;margin-bottom:28px;max-width:540px;margin-left:auto;margin-right:auto;position:relative;z-index:1;line-height:1.6}
.cta .btn-primary{background:#fff;color:var(--navy);position:relative;z-index:1}
.cta .btn-primary:hover{background:var(--cloud)}

/* === Footer === */
.footer{padding:60px 0 28px;background:var(--deep);color:#fff;position:relative}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
.footer-brand img{height:32px;width:auto;margin-bottom:14px;display:block}
.footer-brand p{color:var(--cyan-l);font-size:13px;line-height:1.7;opacity:0.85}
.footer-col h5{font-weight:700;font-size:12px;margin-bottom:16px;text-transform:uppercase;letter-spacing:0.08em;color:rgba(255,255,255,0.5)}
.footer-col a{display:block;color:var(--cyan-l);text-decoration:none;font-size:13px;margin-bottom:10px;opacity:0.7;transition:opacity 0.2s}
.footer-col a:hover{opacity:1}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.08);padding-top:24px;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--cyan-l);opacity:0.5}

/* === Mobile Nav === */
.mobile-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:rgba(255,255,255,0.95);backdrop-filter:blur(20px);border-top:1px solid var(--line);z-index:200;padding:8px 0 calc(8px + env(safe-area-inset-bottom));box-shadow:0 -4px 24px rgba(0,0,0,0.08)}
.mobile-nav-inner{display:flex;justify-content:space-around;align-items:center;max-width:500px;margin:0 auto}
.mobile-nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;color:var(--text-muted);font-size:11px;padding:6px 14px;border-radius:20px;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);font-weight:500;position:relative;min-width:52px}
.mobile-nav-item.active{color:var(--navy);background:var(--cloud);font-weight:700}
.mobile-nav-item.active::before{content:'';position:absolute;top:-9px;left:50%;transform:translateX(-50%);width:24px;height:3px;background:var(--navy);border-radius:2px}
.mobile-nav-item:hover{color:var(--navy)}
.mobile-nav-icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center;transition:transform 0.3s cubic-bezier(0.4,0,0.2,1)}
.mobile-nav-item:active .mobile-nav-icon{transform:scale(0.85)}
.mobile-nav-icon svg{width:100%;height:100%;stroke-width:2}

/* === Page Hero === */
.page-hero{padding:160px 0 80px;background:var(--cloud);text-align:center;position:relative;overflow:hidden}
.page-hero::before{content:'';position:absolute;top:-50%;left:-20%;width:60%;height:200%;background:radial-gradient(circle,rgba(0,171,201,0.06) 0%,transparent 60%);pointer-events:none}
.page-hero h1{font-weight:800;font-size:clamp(32px,4vw,48px);letter-spacing:-0.03em;margin-bottom:14px;color:var(--text);position:relative;z-index:1}
.page-hero p{color:var(--text-muted);font-size:18px;max-width:600px;margin:0 auto;position:relative;z-index:1}

/* === Content === */
.content{padding:80px 0;background:var(--bg)}
.content h2{font-weight:800;font-size:28px;margin:48px 0 20px;letter-spacing:-0.02em}
.content p{color:var(--text-muted);margin-bottom:16px;max-width:720px;line-height:1.7;font-size:15px}
.content ul{margin:16px 0 16px 24px;color:var(--text-muted);font-size:15px;line-height:1.8}
.content li{margin-bottom:8px}

/* === Responsive === */
@media(max-width:1100px){
  .header-phone{display:none}
}

@media(max-width:900px){
  .hero{padding:100px 0 60px;min-height:auto}
  .hero-inner{grid-template-columns:1fr;text-align:center;gap:32px}
  .hero-visual{order:-1}
  .hero-visual img{max-height:240px}
  .hero-btns{justify-content:center}
  .grid-3,.grid-4{grid-template-columns:1fr 1fr}
  .feature-grid,.grid-2{grid-template-columns:1fr;gap:32px}
  .process-steps{grid-template-columns:1fr 1fr}
  .feature-subgrid{grid-template-columns:1fr}
  .tech-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .cases-header{flex-direction:column;align-items:flex-start;gap:12px}
  .header-nav{display:none}
  .header-phone{display:none}
  .mobile-menu-btn{display:flex}
}

@media(max-width:600px){
  body{padding-bottom:64px}
  .container{width:94%;padding:0 16px}
  .header-inner{height:56px}
  .header-logo{height:32px}
  .hero{padding:80px 0 40px}
  .hero h1{font-size:32px}
  .hero-lead{font-size:15px}
  .section-header{margin-bottom:36px}
  .section-header h2{font-size:26px}
  .section-header p{font-size:15px}
  .integration,.values,.process,.map-section,.lake-section,.mdm-esb,.tech,.cases,.contact-block{padding:60px 0}
  .grid-3,.grid-4,.process-steps{grid-template-columns:1fr}
  .tech-grid{grid-template-columns:1fr}
  .feature-content h3{font-size:18px}
  .case-card-img{height:120px}
  .page-hero{padding:120px 0 48px}
  .page-hero h1{font-size:28px}
  .content{padding:48px 0}
  .content h2{font-size:22px}
  .footer{padding:40px 0 80px}
  .footer-grid{grid-template-columns:1fr;gap:24px}
  .footer-bottom{flex-direction:column;gap:10px;text-align:center}
  .mobile-nav{display:block}
}

/* ============================================
   ITGLT-Style Hero Animations (Added)
   ============================================ */

/* --- Isometric Grid Background --- */
.iso-grid {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.6;
  background-image:
    url("data:image/svg+xml,%3Csvg width='120' height='104' viewBox='0 0 120 104' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0' y1='52' x2='120' y2='0' stroke='rgba(0,171,201,0.06)' stroke-width='0.5'/%3E%3Cline x1='0' y1='52' x2='120' y2='104' stroke='rgba(0,171,201,0.06)' stroke-width='0.5'/%3E%3Cline x1='60' y1='0' x2='60' y2='104' stroke='rgba(0,171,201,0.06)' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size: 60px 52px;
  animation: gridDrift 30s linear infinite;
}

@keyframes gridDrift {
  0% { transform: translateX(0) translateY(0); }
  100% { transform: translateX(20px) translateY(10px); }
}

/* --- Conveyor Belt (left edge) --- */
.conveyor-line {
  position: fixed;
  left: 28px;
  top: 0;
  width: 44px;
  height: 100vh;
  z-index: 5;
  pointer-events: none;
}

.conveyor-rail {
  position: absolute;
  top: 0;
  height: 100%;
  width: 1px;
  background: rgba(0, 171, 201, 0.18);
}
.conveyor-rail--left { left: 2px; }
.conveyor-rail--center {
  left: 50%;
  transform: translateX(-0.5px);
  background: rgba(0, 171, 201, 0.28);
  width: 1px;
}
.conveyor-rail--right { right: 2px; }

.conveyor-rungs {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 34px,
    rgba(0, 171, 201, 0.12) 34px,
    rgba(0, 171, 201, 0.12) 36px
  );
}

.conveyor-fill {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(to bottom, rgba(0, 171, 201, 0.08), rgba(10, 59, 99, 0.2));
  transition: height 0.05s linear;
  box-shadow: inset 0 0 20px rgba(0, 171, 201, 0.1);
  pointer-events: none;
}

.conveyor-particles {
  position: fixed;
  left: 46px;
  top: 0;
  width: 8px;
  height: 100vh;
  z-index: 6;
  pointer-events: none;
  overflow: hidden;
}

.conveyor-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--cyan);
  animation: particleFall linear infinite;
  opacity: 0.7;
  box-shadow: 0 0 6px var(--cyan);
  border-radius: 50%;
}

@keyframes particleFall {
  0% { transform: translateY(-10px); opacity: 0; }
  10% { opacity: 0.7; }
  90% { opacity: 0.7; }
  100% { transform: translateY(100vh); opacity: 0; }
}

/* --- Hero 3D Elements --- */
.hero-3d {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.float-elem {
  position: absolute;
  border-radius: 8px;
  opacity: 0.15;
  animation: float3d 8s ease-in-out infinite;
  pointer-events: none;
}

.float-elem--cube {
  background: var(--grad-brand);
}

.float-elem--circle {
  background: radial-gradient(circle, var(--cyan), var(--navy));
  border-radius: 50%;
}

.float-elem--ring {
  border: 1.5px solid var(--cyan);
  background: transparent;
  border-radius: 50%;
}

@keyframes float3d {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(5deg); }
}

/* --- Hero Noise --- */
.hero-noise {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* --- Updated Hero Layout --- */
.hero-v2 {
  padding: 180px 24px 140px;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: var(--bg);
}

.hero-v2 .hero-inner {
  display: block;
  text-align: center;
  position: relative;
  z-index: 3;
  max-width: 1040px;
  margin: 0 auto;
}

.hero-v2 .hero-content {
  animation: none;
}

.hero-v2 .hero-lead {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--cyan);
  letter-spacing: 2px;
  text-transform: uppercase;
  max-width: none;
  text-align: center;
  margin: 0 auto 40px;
  opacity: 0;
  animation: fadeInUp 0.8s var(--ease-out) 0.2s forwards;
}

.hero-v2 .hero-title {
  font-size: clamp(32px, 4.6vw, 54px);
  font-weight: 800;
  line-height: 1.12;
  margin-bottom: 28px;
  letter-spacing: -0.03em;
  color: var(--text);
}

.hero-v2 .title-line {
  display: block;
  opacity: 0;
  animation: fadeInUp 0.8s var(--ease-out) forwards;
}

.hero-v2 .title-line:nth-child(1) { animation-delay: 0.4s; }
.hero-v2 .title-line:nth-child(2) { animation-delay: 0.6s; }
.hero-v2 .title-line:nth-child(3) { animation-delay: 0.8s; }

.hero-v2 .title-line.accent {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Terminal typing effect */
.hero-terminal {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 auto 44px;
  opacity: 0;
  animation: fadeIn 0.5s var(--ease-out) 1.2s forwards;
  background: rgba(0, 171, 201, 0.04);
  padding: 16px 20px;
  border: 1px solid rgba(0, 171, 201, 0.12);
  text-align: left;
  max-width: 560px;
  min-height: 180px;
  line-height: 1.85;
  border-radius: var(--radius-md);
}

.term-line {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.term-prompt {
  color: var(--cyan);
  opacity: 0.7;
  min-width: 24px;
}

.term-label {
  flex: 1;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

.term-status {
  font-variant-numeric: tabular-nums;
  color: var(--cyan);
  min-width: 52px;
  text-align: right;
  font-size: 11px;
}

.term-status.done {
  color: #00D48A;
}

.term-cursor {
  display: inline-block;
  width: 7px;
  height: 13px;
  background: var(--cyan);
  animation: blink 1s step-end infinite;
  margin-left: 2px;
  vertical-align: middle;
}

@keyframes blink {
  50% { opacity: 0; }
}

.hero-v2 .hero-subtitle {
  font-size: 18px;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 56px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0;
  animation: fadeInUp 0.8s var(--ease-out) 0.8s forwards;
}

.hero-v2 .hero-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeInUp 0.8s var(--ease-out) 1s forwards;
}

/* Scroll indicator */
.scroll-indicator {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  animation: bounce 2s infinite;
}

.scroll-chevron {
  color: var(--text-muted);
  opacity: 0.5;
}

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

/* --- Mobile Menu Overlay --- */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.98);
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 24px;
}

.mobile-menu-overlay.active {
  display: flex;
}

.mobile-menu-overlay a {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  transition: color 0.2s;
}

.mobile-menu-overlay a:hover {
  color: var(--cyan);
}

.mobile-menu-close {
  position: absolute;
  top: 24px;
  right: 24px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: var(--text);
}

.mobile-menu-btn.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.mobile-menu-btn.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-btn.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Hero tabs (A/B/C/D switcher) */
.hero-tabs {
  display: flex;
  gap: 8px;
  margin: 24px 0 20px;
  justify-content: center;
  opacity: 0;
  animation: fadeInUp 0.8s var(--ease-out) 1.1s forwards;
}

.hero-tab {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(10, 59, 99, 0.15);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
  letter-spacing: 0.5px;
  border-radius: 4px;
}

.hero-tab:hover {
  border-color: rgba(0, 171, 201, 0.4);
  color: var(--steel);
}

.hero-tab.is-active {
  border-color: var(--cyan);
  background: rgba(0, 171, 201, 0.1);
  color: var(--navy);
}

.hero-slides {
  position: relative;
  min-height: 180px;
}

.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.hero-slide.is-active {
  position: relative;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Responsive hero v2 */
@media(max-width:900px){
  .hero-v2 { padding: 140px 24px 100px; }
  .hero-terminal { max-width: 100%; min-height: 0; }
  .term-line { white-space: normal; }
  .conveyor-line, .conveyor-particles { display: none; }
}

@media(max-width:600px){
  .hero-v2 { padding: 110px 20px 72px; min-height: auto; }
  .hero-v2 .hero-lead { margin-bottom: 24px; font-size: 11px; }
  .hero-v2 .hero-title { font-size: clamp(28px, 8vw, 40px); margin-bottom: 24px; }
  .hero-terminal { font-size: 11px; padding: 14px 16px; margin-bottom: 32px; line-height: 1.7; min-height: 140px; }
  .term-status { min-width: 44px; font-size: 10px; }
  .hero-v2 .hero-subtitle { font-size: 16px; margin-bottom: 36px; }
  .hero-v2 .hero-actions { flex-direction: column; gap: 12px; }
  .btn-primary, .btn-secondary { width: 100%; justify-content: center; padding: 14px 24px; }
  .mobile-menu-overlay a { font-size: 20px; }
  .hero-tabs { gap: 6px; }
  .hero-tab { width: 32px; height: 32px; font-size: 11px; }
  .hero-slides { min-height: 200px; }
}

:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Форма: подсказка и капча (IDS) --- */
.form-hint{font-weight:400;opacity:.6;font-size:.82em}
.form-captcha .captcha-input{max-width:220px}
.ids-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* Меню многословное («Интегрированная платформа») — бургер раньше, чтобы шапка не переносилась.
   В конце файла: перекрывает базовое .mobile-menu-btn{display:none}. */
@media(max-width:1100px){
  .header-nav{display:none}
  .header-phone{display:none}
  .mobile-menu-btn{display:flex}
}

/* CTA под сеткой «Процессы и классы ПО» на главной */
.tech-cta{text-align:center;margin-top:36px}

/* ===================================================================
   IDS — модальное окно заявки, кастомные селекты, drag&drop загрузка
   (добавлено 2026-07-06)
   =================================================================== */

body.modal-open{overflow:hidden}

/* --- Оверлей и окно модалки --- */
.lead-modal-overlay{
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:rgba(10,59,99,0.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;
  transition:opacity 0.28s var(--ease-out),visibility 0.28s;
}
.lead-modal-overlay.is-open{opacity:1;visibility:visible}

.lead-modal{
  position:relative;
  width:100%;max-width:720px;
  max-height:calc(100vh - 48px);
  overflow-y:auto;
  background:var(--surface);
  border-radius:var(--radius-lg);
  box-shadow:0 30px 80px rgba(3,53,95,0.35);
  padding:40px 36px 36px;
  transform:translateY(24px) scale(0.96);
  opacity:0;
  transition:transform 0.3s var(--ease-out),opacity 0.28s;
}
.lead-modal-overlay.is-open .lead-modal{transform:translateY(0) scale(1);opacity:1}

.lead-modal-close{
  position:absolute;top:16px;right:16px;
  width:40px;height:40px;min-width:44px;min-height:44px;
  display:flex;align-items:center;justify-content:center;
  background:var(--cloud);border:1px solid var(--line);border-radius:50%;
  color:var(--text-muted);cursor:pointer;transition:var(--transition);
}
.lead-modal-close:hover{background:var(--navy);border-color:var(--navy);color:#fff}

.lead-modal-body h3{font-weight:800;font-size:22px;margin-bottom:6px;padding-right:40px}
.lead-modal-body>p.lead-modal-lead{color:var(--text-muted);font-size:14px;margin-bottom:24px}

.lead-modal .form-feedback{margin:16px 0;padding:12px 16px;border-radius:var(--radius-sm);font-size:14px;font-weight:500}
.lead-modal .form-feedback.is-success{background:rgba(0,171,201,0.1);color:var(--steel);border:1px solid rgba(0,171,201,0.3)}
.lead-modal .form-feedback.is-error{background:rgba(200,40,40,0.08);color:#B02A2A;border:1px solid rgba(200,40,40,0.25)}

@media(max-width:640px){
  .lead-modal-overlay{padding:0}
  .lead-modal{max-width:100%;height:100%;max-height:100%;border-radius:0;padding:28px 20px 24px}
}

/* --- Кастомные селекты (используются и в модалке, и в обычной форме) --- */
select.ids-select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-color:var(--bg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%235A6472' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:38px;
  cursor:pointer;
}
select.ids-select:hover{border-color:var(--cyan)}
select.ids-select:focus{
  border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(0,171,201,0.16);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%2300ABC9' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* --- Drag & Drop зона загрузки файла (общая для #leadForm и #leadFormModal) --- */
.file-drop-zone{
  position:relative;
  border:2px dashed var(--line);
  border-radius:var(--radius-md);
  background:var(--cloud);
  padding:24px 20px;
  text-align:center;
  cursor:pointer;
  transition:var(--transition);
}
.file-drop-zone:hover,.file-drop-zone:focus-visible,.file-drop-zone.drag-over{
  border-color:var(--cyan);
  background:rgba(0,171,201,0.06);
}
.file-drop-zone.has-file{cursor:default;border-style:solid;text-align:left}
.file-drop-zone input[type="file"]{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.file-drop-upload-icon{color:var(--steel);margin-bottom:8px}
.file-drop-empty p{margin:0;font-size:13.5px;color:var(--text)}
.file-drop-empty p+p{margin-top:4px}
.file-drop-preview{display:flex;align-items:center;gap:12px}
.file-drop-preview[hidden],.file-drop-thumb[hidden]{display:none!important}
.file-drop-thumb{width:48px;height:48px;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--line);flex-shrink:0}
.file-drop-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;font-size:22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);flex-shrink:0}
.file-drop-icon i{color:var(--cyan)}
.file-drop-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.file-drop-name{font-size:13.5px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-drop-size{font-size:12px;color:var(--text-muted)}
.file-drop-remove{
  flex-shrink:0;width:44px;height:44px;min-width:44px;min-height:44px;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--line);border-radius:50%;
  color:var(--text-muted);cursor:pointer;transition:var(--transition);
  position:relative;z-index:2;
}
.file-drop-remove:hover{background:#B02A2A;border-color:#B02A2A;color:#fff}

/* --- Форма: 1 колонка на мобильных (переопределяет .form-row из базовых стилей) --- */
@media(max-width:600px){
  .form-row{grid-template-columns:1fr}
}

/* === Ключевые продукты — компактные карточки-тизеры на главной === */
.solutions-teaser{padding:80px 0;background:var(--cloud)}
.teaser-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px}
.teaser-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px 22px;text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:var(--transition)}
.teaser-card:hover{border-color:var(--cyan);transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.teaser-icon{font-size:32px;margin-bottom:14px;line-height:1}
.teaser-card h3{font-weight:700;font-size:17px;margin-bottom:10px;color:var(--text)}
.teaser-card p{color:var(--text-muted);font-size:14px;line-height:1.55;flex:1;margin-bottom:16px}
.teaser-link{color:var(--steel);font-weight:600;font-size:14px}
.teaser-card:hover .teaser-link{color:var(--navy)}
@media(max-width:900px){.teaser-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.teaser-grid{grid-template-columns:1fr}}

/* === Интерактивная карта производства (services.php) === */
.factory-map{position:relative;background:var(--cloud);border:1px solid var(--line);border-radius:var(--radius-lg);padding:12px;overflow:hidden;box-shadow:var(--shadow)}
.fm-svg{display:block;width:100%;height:auto}
.fm-flow{animation:fmFlow 1.1s linear infinite}
@keyframes fmFlow{to{stroke-dashoffset:-36}}
.fm-terminal circle{fill:var(--steel)}
.fm-terminal text{fill:var(--text-muted);font:600 13px var(--font-sans);text-anchor:middle}
.fm-node{cursor:pointer}
.fm-box{fill:#fff;stroke:var(--line);stroke-width:1.5;transition:stroke .2s,filter .2s}
.fm-node:hover .fm-box,.fm-node.is-active .fm-box,.fm-node:focus .fm-box{stroke:var(--cyan);filter:drop-shadow(0 6px 16px rgba(10,59,99,.18))}
.fm-node:focus{outline:none}
.fm-name{fill:var(--text);font:700 13px var(--font-sans)}
.fm-status{fill:var(--text-muted);font:500 11px var(--font-sans)}
.fm-load{fill:var(--text-muted);font:600 11px var(--font-mono);text-anchor:end}
.fm-bar-bg{fill:rgba(10,59,99,.10)}
.fm-bar{fill:var(--cyan);transition:width .5s}
.fm-work .fm-bar{fill:#1E9E6A} .fm-idle .fm-bar{fill:#E0A200} .fm-down .fm-bar{fill:#D0453B}
.fm-dot,.fm-beltdot{stroke:#fff;stroke-width:2}
.fm-work .fm-dot,.fm-work.fm-beltdot{fill:#1E9E6A}
.fm-idle .fm-dot,.fm-idle.fm-beltdot{fill:#E0A200}
.fm-down .fm-dot,.fm-down.fm-beltdot{fill:#D0453B}
.fm-node.is-active .fm-name{fill:var(--navy)}
/* Карточка станка (детальная подсказка по образцу MES-мониторинга) */
.factory-wrap{position:relative}
.fm-card{position:absolute;width:252px;max-width:88vw;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-hover);opacity:0;pointer-events:none;transition:opacity .18s,left .2s,top .2s;z-index:4;overflow:hidden}
.fm-card.is-visible{opacity:1}
.fm-card-hd{display:flex;align-items:center;gap:10px;background:var(--deep);color:#fff;padding:12px 14px}
.fm-card-ava{width:40px;height:40px;border-radius:50%;background:var(--cyan);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;flex-shrink:0}
.fm-card-id{min-width:0}
.fm-card-model{display:block;font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm-card-type{font-size:11px;color:var(--cyan-l)}
.fm-card-live{width:9px;height:9px;border-radius:50%;background:#1E9E6A;margin-left:auto;flex-shrink:0;box-shadow:0 0 0 3px rgba(30,158,106,.25)}
.fm-idle .fm-card-live{background:#E0A200;box-shadow:0 0 0 3px rgba(224,162,0,.25)}
.fm-down .fm-card-live{background:#D0453B;box-shadow:0 0 0 3px rgba(208,69,59,.25)}
.fm-card-bd{padding:12px 14px}
.fm-card-row{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--text);margin-bottom:9px}
.fm-ic{width:15px;height:15px;fill:var(--steel);flex-shrink:0;margin-top:2px}
.fm-card-name{font-weight:700}
.fm-card-role{color:var(--text-muted);font-style:normal;display:block;font-size:11.5px}
.fm-card-optext,.fm-card-prptext{color:var(--text-muted)}
.fm-card-badge{display:inline-block;font-size:12px;font-weight:700;color:#1E9E6A;margin:2px 0 10px}
.fm-idle .fm-card-badge{color:#E0A200}.fm-down .fm-card-badge{color:#D0453B}
.fm-card-metric{border-top:1px solid var(--line);padding-top:10px}
.fm-card-mlabel{display:flex;justify-content:space-between;font-size:12px;color:var(--text-muted);margin-bottom:6px}
.fm-card-mval{color:var(--text);font-family:var(--font-mono);font-weight:600}
.fm-card-mbar{height:7px;background:rgba(10,59,99,.10);border-radius:4px;overflow:hidden}
.fm-card-mbar span{display:block;height:100%;width:0;background:#1E9E6A;border-radius:4px;transition:width .5s}
.fm-idle .fm-card-mbar span{background:#E0A200}.fm-down .fm-card-mbar span{background:#D0453B}
.fm-legend{position:absolute;left:14px;bottom:12px;display:flex;gap:14px;font-size:11px;color:var(--text-muted);background:rgba(255,255,255,.88);padding:5px 10px;border-radius:20px;border:1px solid var(--line)}
.fm-legend span{display:flex;align-items:center;gap:5px}
.fm-lg{width:8px;height:8px;border-radius:50%;display:inline-block}
.fm-lg-work{background:#1E9E6A}.fm-lg-idle{background:#E0A200}.fm-lg-down{background:#D0453B}
@media(max-width:560px){.fm-legend{display:none}}
/* Ряд ключевых пунктов под картой */
.fm-points{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:24px}
.fm-point{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:18px;transition:var(--transition)}
.fm-point:hover{border-color:var(--cyan);transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.fm-point-ic{font-size:22px;display:block;margin-bottom:8px;line-height:1}
.fm-point h4{font-weight:700;font-size:15px;margin-bottom:6px;color:var(--text)}
.fm-point p{color:var(--text-muted);font-size:13px;line-height:1.5}
@media(max-width:820px){.fm-points{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.fm-points{grid-template-columns:1fr}}
/* Карта на мобильном — горизонтальный свайп, чтобы станции читались */
@media(max-width:760px){
  .factory-map{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
  .fm-svg{min-width:660px}
  .fm-card{display:none}
}

/* === Схема потока данных «Локализация ИИ и озеро данных» === */
.data-flow{position:relative;background:var(--cloud);border:1px solid var(--line);border-radius:var(--radius-lg);padding:14px;overflow:hidden;box-shadow:var(--shadow)}
.df-svg{display:block;width:100%;height:auto}
.df-zone{fill:var(--text-muted);font:600 12px var(--font-sans);text-anchor:middle}
.df-conn{fill:none;stroke:rgba(8,79,123,.22);stroke-width:2.5;stroke-linecap:round}
.df-pkt{fill:#00ABC9;filter:drop-shadow(0 0 5px rgba(0,171,201,.85))}
.df-box{fill:#fff;stroke:var(--line);stroke-width:1.5}
.df-box-hub{stroke:var(--cyan);stroke-width:2}
.df-glow{fill:var(--cyan);opacity:.12}
.df-pulse{animation:dfPulse 2.6s ease-in-out infinite}
@keyframes dfPulse{0%,100%{opacity:.07}50%{opacity:.22}}
.df-icon{fill:none;stroke:var(--navy);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.df-icon-fill{fill:var(--cyan);stroke:none}
.df-led{fill:#1E9E6A}
.df-cyl-top{fill:var(--cyan)}
.df-cyl{fill:var(--cyan-l);stroke:var(--cyan);stroke-width:2}
.df-cyl-l{fill:none;stroke:var(--cyan);stroke-width:1.5;opacity:.65}
.df-ai{fill:var(--navy);font:800 15px var(--font-mono);text-anchor:middle}
.df-label{fill:var(--text);font:700 13px var(--font-sans);text-anchor:middle}
.df-sub{fill:var(--text-muted);font:500 11px var(--font-sans);text-anchor:middle}
@media(max-width:760px){.data-flow{overflow-x:auto;-webkit-overflow-scrolling:touch}.df-svg{min-width:860px}}

/* === Рабочее место сотрудника (интерактивный дашборд) === */
.wd{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
.wd-head{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;background:var(--deep);color:#fff;padding:18px 22px}
.wd-user{display:flex;align-items:center;gap:12px}
.wd-ava{width:46px;height:46px;border-radius:50%;background:var(--cyan);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;flex-shrink:0}
.wd-uinfo b{display:block;font-size:15px}
.wd-uinfo span{font-size:12px;color:var(--cyan-l)}
.wd-live{width:10px;height:10px;border-radius:50%;background:#1E9E6A;box-shadow:0 0 0 3px rgba(30,158,106,.3);align-self:flex-start;margin-top:4px}
.wd-stats{display:flex;gap:22px}
.wd-stat{text-align:center}
.wd-stat b{display:block;font-size:18px;font-weight:800;font-family:var(--font-mono)}
.wd-stat span{font-size:11px;color:var(--cyan-l)}
.wd-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);padding:8px 12px 0;overflow-x:auto}
.wd-tab{background:none;border:none;padding:10px 16px;font-size:14px;font-weight:600;color:var(--text-muted);cursor:pointer;border-radius:8px 8px 0 0;white-space:nowrap;display:flex;align-items:center;gap:7px;border-bottom:2px solid transparent;transition:var(--transition)}
.wd-tab:hover{color:var(--text)}
.wd-tab.is-active{color:var(--navy);border-bottom-color:var(--cyan);background:var(--cloud)}
.wd-tico{font-size:15px}
.wd-body{padding:14px 16px}
.wd-panel{display:none;animation:fadeIn .25s}
.wd-panel.is-active{display:block}
.wd-row{display:flex;align-items:center;gap:12px;padding:12px 8px;border-bottom:1px solid var(--line)}
.wd-row:last-of-type{border-bottom:none}
.wd-st{flex-shrink:0;font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px;min-width:92px;text-align:center}
.wd-st-new{background:rgba(8,79,123,.10);color:var(--steel)}
.wd-st-run{background:rgba(30,158,106,.14);color:#1E9E6A}
.wd-st-check{background:rgba(0,171,201,.16);color:#0587a0}
.wd-st-idle{background:rgba(224,162,0,.16);color:#a8790a}
.wd-main{flex:1;min-width:0}
.wd-main b{display:block;font-size:14px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wd-main i{font-style:normal;font-size:12px;color:var(--text-muted)}
.wd-date{font-size:12px;color:var(--text-muted);font-family:var(--font-mono);flex-shrink:0}
.wd-act{flex-shrink:0;background:var(--navy);color:#fff;border:none;padding:8px 14px;border-radius:8px;font-size:12.5px;font-weight:600;cursor:pointer;transition:var(--transition)}
.wd-act:hover{background:var(--steel);transform:translateY(-1px)}
.wd-more{margin-top:12px;padding:11px 14px;background:var(--cloud);border:1px dashed var(--line);border-radius:10px;font-size:13px;color:var(--text-muted);text-align:center}
@media(max-width:640px){
  .wd-head{flex-direction:column;align-items:flex-start}
  .wd-stats{gap:16px;width:100%;justify-content:space-between}
  .wd-row{flex-wrap:wrap}
  .wd-st{min-width:0}
  .wd-main{flex-basis:55%}
  .wd-date{margin-left:auto}
}

/* === Помощник технолога (интерактивный) === */
.ta{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
.ta-grid{display:grid;grid-template-columns:1fr 1fr}
.ta-card{padding:18px 20px}
.ta-card:first-child{border-right:1px solid var(--line)}
.ta-head{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px;color:var(--navy);margin-bottom:16px}
.ta-ico{font-size:17px}
.ta-doc-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.ta-thumb{width:64px;height:64px;flex-shrink:0}
.ta-doc-id b{display:block;font-size:16px;font-weight:800}
.ta-doc-id span{font-size:12px;color:var(--text-muted);font-family:var(--font-mono)}
.ta-badge{margin-left:auto;background:var(--cyan);color:#fff;font-size:12px;font-weight:700;padding:4px 12px;border-radius:20px}
.ta-params{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin-bottom:16px}
.ta-params>div{border-bottom:1px solid var(--line);padding-bottom:6px}
.ta-params i{display:block;font-style:normal;font-size:11px;color:var(--text-muted)}
.ta-params b{font-size:13px}
.ta-feat-title{font-weight:700;font-size:13px;color:var(--steel);margin-bottom:8px}
.ta-feat-wrap{overflow-x:auto}
.ta-feat{width:100%;border-collapse:collapse;font-size:12.5px}
.ta-feat th{text-align:left;font-weight:600;color:var(--text-muted);padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.ta-feat td{padding:7px 8px;border-bottom:1px solid var(--line)}
.ta-tag{background:#1E9E6A;color:#fff;font-size:11px;font-weight:600;padding:2px 8px;border-radius:6px}
.ta-dim{font-family:var(--font-mono);color:#b3335f;font-weight:600;white-space:nowrap}
.ta-chatcard{display:flex;flex-direction:column;background:var(--cloud)}
.ta-msgs{flex:1;min-height:230px;max-height:320px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:4px 2px;margin-bottom:12px}
.ta-msg{max-width:90%;padding:10px 13px;border-radius:12px;font-size:13px;line-height:1.5}
.ta-ai{background:#fff;border:1px solid var(--line);color:var(--text);align-self:flex-start;border-bottom-left-radius:4px}
.ta-user{background:var(--navy);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.ta-msg .ta-mini{width:100%;border-collapse:collapse;margin-top:8px;font-size:11.5px}
.ta-mini th{background:var(--cloud);text-align:left;padding:5px 7px;font-weight:600;border:1px solid var(--line)}
.ta-mini td{padding:5px 7px;border:1px solid var(--line);font-family:var(--font-mono)}
.ta-mini td:first-child{font-family:var(--font-sans)}
.ta-mini .ta-total td{font-weight:800;background:rgba(0,171,201,.10)}
.ta-typing{display:flex;gap:4px;align-items:center}
.ta-typing span{width:6px;height:6px;border-radius:50%;background:var(--text-muted);animation:taBlink 1s infinite}
.ta-typing span:nth-child(2){animation-delay:.15s}.ta-typing span:nth-child(3){animation-delay:.3s}
@keyframes taBlink{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.ta-chips{display:flex;flex-wrap:wrap;gap:8px}
.ta-chip{background:#fff;border:1px solid var(--cyan);color:var(--steel);font-size:12.5px;font-weight:600;padding:8px 14px;border-radius:20px;cursor:pointer;transition:var(--transition)}
.ta-chip:hover{background:var(--cyan);color:#fff}
/* переключатель источника 2D/3D */
.ta-src{margin-left:auto;display:inline-flex;background:var(--cloud);border:1px solid var(--line);border-radius:20px;padding:2px}
.ta-src-btn{display:inline-flex;align-items:center;gap:5px;border:none;background:none;color:var(--text-muted);font-size:12px;font-weight:600;padding:5px 12px;border-radius:18px;cursor:pointer;transition:var(--transition);white-space:nowrap}
.ta-src-btn.is-on{background:var(--navy);color:#fff}
.ta-src-btn i{font-size:11px}
.ta-tag-3d{background:var(--steel)}
.ta-doccard[data-mode="2d"] .only-3d{display:none}
.ta-doccard[data-mode="3d"] .only-2d{display:none}
@media(max-width:820px){.ta-grid{grid-template-columns:1fr}.ta-card{min-width:0}.ta-card:first-child{border-right:none;border-bottom:1px solid var(--line)}}
@media(max-width:520px){.ta-head{flex-wrap:wrap}.ta-src{margin-left:0;width:100%;justify-content:center}.ta-src-btn{flex:1;justify-content:center}.ta-params{grid-template-columns:1fr}}

/* === Заказ инструмента через постамат (интерактив) === */
.to{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:20px 22px}
.to-head{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:24px}
.to-item{display:flex;align-items:center;gap:12px}
.to-item-ic{width:46px;height:46px;border-radius:12px;background:var(--cloud);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.to-item-txt b{display:block;font-size:15px}
.to-item-txt i{font-style:normal;font-size:12px;color:var(--text-muted)}
.to-btn{margin-left:auto;background:var(--navy);color:#fff;border:none;padding:12px 22px;border-radius:10px;font-weight:700;font-size:14px;cursor:pointer;transition:var(--transition)}
.to-btn:hover{background:var(--deep);transform:translateY(-1px)}
.to-btn:disabled{opacity:.7;cursor:default;transform:none}
.to-eta{font-size:13px;color:var(--text-muted);font-weight:600}
.to-track{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:22px}
.to-line{position:absolute;top:20px;left:12.5%;right:12.5%;height:3px;background:var(--line);border-radius:2px;overflow:hidden}
.to-fill{display:block;height:100%;width:0;background:#1E9E6A;border-radius:2px;transition:width .6s ease}
.to-step{position:relative;text-align:center;z-index:1}
.to-dot{width:42px;height:42px;border-radius:50%;background:#fff;border:2px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:18px;transition:var(--transition)}
.to-step.is-active .to-dot{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(0,171,201,.15)}
.to-step.is-done .to-dot{border-color:#1E9E6A;background:#eafaf2}
.to-step b{display:block;font-size:13px;margin-top:8px;color:var(--text-muted)}
.to-step.is-active b,.to-step.is-done b{color:var(--text)}
.to-step em{font-style:normal;font-size:11px;color:var(--text-muted)}
/* Постамат-шкаф (как реальный: колонки ячеек + центральный киоск) */
.pm-outer{overflow-x:auto;-webkit-overflow-scrolling:touch;text-align:center}
.pm-stage{display:inline-block;text-align:left}
.pm{display:flex;gap:8px;background:#2b2f36;border-radius:12px;padding:14px;width:max-content}
.pm-col{display:flex;flex-direction:column;gap:8px;flex:0 0 auto}
.pm-cell{width:60px;height:60px;background:#f2f3f5;border-radius:5px;box-shadow:inset 0 0 0 3px #23262c;display:flex;align-items:flex-start;padding:6px 9px;font-weight:800;font-size:15px;color:#1a1d22;transition:var(--transition)}
.pm-cell.is-open{background:#1E9E6A;color:#fff;box-shadow:inset 0 0 0 3px #17805a,0 0 16px rgba(30,158,106,.55);animation:toPop .4s}
.pm-kiosk{flex:0 0 auto;width:128px;background:#1b1e24;border-radius:8px;display:flex;flex-direction:column;align-items:center;padding:14px 12px;gap:11px}
.pm-screen{width:100%;min-height:74px;background:#0a0e13;border:2px solid #2c313a;border-radius:5px;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--cyan);font-size:11px;line-height:1.4;font-family:var(--font-mono);padding:8px}
.pm-screen b{color:#fff;font-size:15px}
.pm-screen-ok{color:#4fe0a8}
.pm-scan{width:44px;height:44px;background:#0a0e13;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#5b6472;font-size:19px}
.pm-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;width:82px}
.pm-key{aspect-ratio:1;background:#333842;border-radius:3px}
.pm-slot{width:92px;height:9px;background:#0a0e13;border-radius:3px}
@keyframes toPop{0%{transform:scale(.85)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
.to-code{display:flex;align-items:center;gap:10px;margin-top:12px;padding:12px 14px;background:#eafaf2;border:1px solid #b6e6cf;border-radius:10px;font-size:14px;color:var(--text)}
.to-code-ic{font-size:18px;color:#1E9E6A}
.to-code-pin{font-family:var(--font-mono);color:#1E9E6A;font-size:16px}
@media(max-width:640px){.to-step em{display:none}.to-step b{font-size:11px}.to-btn{margin-left:0;width:100%}}

/* Компактная CTA-карточка формы + модалка-мастер */
.form-card-note{margin-top:12px;font-size:12px;color:var(--text-muted);text-align:center}
.lm-progress{height:5px;background:var(--line);border-radius:3px;overflow:hidden;margin:4px 0 18px}
.lm-prog-fill{display:block;height:100%;width:50%;background:var(--cyan);border-radius:3px;transition:width .3s}
.lm-step{display:none}
.lm-step.is-active{display:block;animation:fadeIn .25s}
.lm-err{display:block;color:#D0453B;font-size:12px;margin-top:4px}
.form-group.has-error input,.form-group.has-error select{border-color:#D0453B!important;box-shadow:0 0 0 3px rgba(208,69,59,.12)}
.lm-actions{display:flex;gap:12px;align-items:stretch;margin-top:4px}
.lm-actions .btn-secondary{flex:0 0 auto;padding:14px 20px}
.lm-actions .btn-submit{flex:1}

/* FA-иконки в интерактивных блоках — цвета бренда */
.fm-point-ic{color:var(--cyan)}
.teaser-icon{color:var(--cyan)}
.ta-ico{color:var(--cyan)}
.to-item-ic{color:var(--cyan)}
.to-dot{color:var(--steel)}
.to-step.is-active .to-dot{color:var(--cyan)}
.to-step.is-done .to-dot{color:#1E9E6A}
.wd-tico{color:var(--cyan)}
.fm-point-ic i,.teaser-icon i,.ta-ico i,.to-item-ic i,.wd-tico i,.to-dot i{line-height:1}

/* Анимация доставки/получения в постамате */
.pm-lane{position:relative;height:46px;margin-bottom:8px;overflow:hidden}
.pm-courier,.pm-worker{position:absolute;top:6px;display:flex;align-items:center;gap:8px;font-size:26px;transition:left 1.1s cubic-bezier(.4,0,.2,1),opacity .4s}
.pm-courier{left:-16%;opacity:0;color:var(--steel)}
.pm-courier.in{left:42%;opacity:1}
.pm-courier.out{left:118%;opacity:1}
.pm-worker{left:118%;opacity:0;color:var(--navy)}
.pm-worker.in{left:50%;opacity:1}
.pm-worker.out{left:-16%;opacity:1}
.pm-actor-box{font-size:18px;color:#b58a4a;transition:opacity .3s}
.pm-cell{position:relative}
.pm-pkg{display:none;position:absolute;right:8px;bottom:7px;font-size:15px;color:#b58a4a}
.pm-occupied .pm-pkg{display:block;animation:pkgIn .4s}
.pm-occupied span{opacity:.4}
@keyframes pkgIn{0%{transform:scale(0) translateY(-8px);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes pmKey{0%,100%{background:#333842}50%{background:var(--cyan)}}
.pm-keypad.pm-typing .pm-key{animation:pmKey .5s infinite}
.pm-keypad.pm-typing .pm-key:nth-child(2){animation-delay:.08s}.pm-keypad.pm-typing .pm-key:nth-child(3){animation-delay:.16s}
.pm-keypad.pm-typing .pm-key:nth-child(4){animation-delay:.24s}.pm-keypad.pm-typing .pm-key:nth-child(5){animation-delay:.32s}
.pm-keypad.pm-typing .pm-key:nth-child(6){animation-delay:.4s}.pm-keypad.pm-typing .pm-key:nth-child(7){animation-delay:.48s}
.pm-keypad.pm-typing .pm-key:nth-child(8){animation-delay:.56s}.pm-keypad.pm-typing .pm-key:nth-child(9){animation-delay:.64s}
.to-code{flex-wrap:wrap}
.to-pickup{margin-left:auto;background:#1E9E6A;color:#fff;border:none;padding:9px 18px;border-radius:8px;font-weight:700;font-size:13px;cursor:pointer;transition:var(--transition);flex-shrink:0}
.to-pickup:hover{background:#17805a;transform:translateY(-1px)}
.to-pickup:disabled{opacity:.7;cursor:default}

/* === MES/WMS: анимация цепочки поставок === */
.mf{background:var(--cloud);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:20px}
.mf-scene{position:relative;height:210px;min-width:700px}
.mf-belt{position:absolute;left:2%;right:2%;bottom:74px;height:6px;background:repeating-linear-gradient(90deg,rgba(8,79,123,.25) 0 14px,transparent 14px 24px);border-radius:3px}
.mf-stages{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end}
.mf-stage{flex:1;text-align:center;position:relative}
.mf-ic{width:56px;height:56px;margin:0 auto 8px;border-radius:14px;background:#fff;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:23px;color:var(--navy)}
.mf-prod .mf-ic{border-color:var(--cyan);color:var(--cyan)}
.mf-stage b{display:block;font-size:13px;color:var(--text)}
.mf-stage em{font-style:normal;font-size:11px;color:var(--text-muted)}
.mf-extra{position:absolute;top:-32px;left:50%;transform:translateX(-50%);display:flex;gap:9px;font-size:17px;white-space:nowrap}
.mf-worker{color:var(--steel);animation:mfBob 1.4s ease-in-out infinite}
.mf-worker.mf-w2{animation-delay:.5s;color:var(--navy)}
.mf-pm{color:var(--cyan)}
.mf-pm-flash{animation:mfFlash 2s ease-in-out infinite}
@keyframes mfBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes mfFlash{0%,100%{opacity:.4}50%{opacity:1;filter:drop-shadow(0 0 6px rgba(0,171,201,.7))}}
.mf-flow{position:absolute;left:0;right:0;bottom:70px;height:20px}
.mf-box{position:absolute;bottom:0;font-size:16px;opacity:0;will-change:left}
.mf-raw{color:#b58a4a;animation:mfRaw 4s linear infinite}
.mf-fin{color:var(--cyan);animation:mfFin 4s linear infinite}
@keyframes mfRaw{0%{left:8%;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:48%;opacity:0}}
@keyframes mfFin{0%{left:52%;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:92%;opacity:0}}
.mf-truck{position:absolute;bottom:60px;font-size:30px;color:var(--navy)}
.mf-truck-in{animation:mfTruckIn 5s ease-in-out infinite}
.mf-truck-out{animation:mfTruckOut 5s ease-in-out infinite}
@keyframes mfTruckIn{0%{left:-12%;opacity:0}16%{left:3%;opacity:1}42%{left:5%;opacity:1}56%{left:-12%;opacity:0}100%{left:-12%;opacity:0}}
@keyframes mfTruckOut{0%,44%{left:80%;opacity:0}50%{left:82%;opacity:1}72%{left:112%;opacity:1}78%{opacity:0}100%{left:112%;opacity:0}}
.mf-legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px;font-size:12px;color:var(--text-muted)}
.mf-legend span{display:flex;align-items:center;gap:6px}
.mf-lg{width:10px;height:10px;border-radius:3px;display:inline-block}
.mf-lg-raw{background:#b58a4a}.mf-lg-fin{background:var(--cyan)}
.mf-outer-scroll{overflow-x:auto}
@media(max-width:760px){.mf{overflow-x:auto}}