/* === BASE: style.css === */
/* ETL — Premium light B2B (CLEAN, FIXED)
   Brand: red/black/gray
   Single source of truth. No duplicates. No broken comments.
*/
/* =========================
   FONT: BOWLER (FINAL FIX)
   ========================= */

   @font-face {
    font-family: "Bowler";
    src:
      url("../fonts/bowler.woff2") format("woff2"),
      url("../fonts/bowler.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
  
  /* Принудительно на заголовки */
  h1,
  h2 {
    font-family: "Bowler", Arial, sans-serif !important;
    letter-spacing: 0.04em;
  }
  
/* =========================
   TOKENS / ROOT
   ========================= */
   :root {
  /* === BRAND COLORS (STRICT) === */
  --etl-red: #E52629;          /* Primary Brand Color */
  --etl-red-dark: #B91F22;     /* Hover State */
  --etl-black: #1D1D1B;        /* Brand Black (Warm Graphite) */
  --etl-gray: #575756;         /* Brand Gray (Text) */
  
  /* === UI COLORS === */
  --bg-body: #ffffff;          /* White Background for content */
  --bg-surface: #f4f5f7;       /* Light Gray for sections */
  --bg-dark: var(--etl-black); /* Header/Footer/Hero */
  
  --text-main: var(--etl-black);
  --text-body: var(--etl-gray);
  --text-inverse: #ffffff;
  
  --border-light: rgba(29, 29, 27, 0.1);
  
  /* === TYPOGRAPHY === */
  /* Brandbook: Bowler for Headings. Instrument Sans for Body. */
  --font-display: "Bowler", Impact, sans-serif;
  --font-body: "Instrument Sans", system-ui, Arial, sans-serif;

  /* === LAYOUT === */
  --header-height: 80px;
  --container-width: 1240px;
  --radius-btn: 14px;
}

/* =========================
     BASE
     ========================= */
  *{ box-sizing:border-box; }
  html,body{ height:100%; }
  html{ scroll-behavior:smooth; }
  
  body{
    margin:0;
    font-family:"Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x:hidden;
  }
  
  img{ max-width:100%; display:block; }
  a{ color:inherit; text-decoration:none; }
  
  h1,h2,h3{ margin:0; letter-spacing:-0.02em; }
  h1{ font-size: clamp(40px, 5.6vw, 84px); line-height:0.96; }
  h2{ font-size: clamp(28px, 3.2vw, 44px); position:relative; }
  h3{ font-size: clamp(16px, 2vw, 18px); }
  
  p{ margin:0; line-height:1.55; color: var(--muted); }
  
  .text-red{ color: var(--etl-red); }
  
  /* H2 micro-accent bar */
  h2::before{
    content:"";
    display:block;
    width: 38px;
    height: 3px;
    background: var(--etl-red);
    border-radius: 999px;
    margin-bottom: 10px;
    opacity: .9;
  }
  
  /* Utilities (DT22) */
  .muted{ color: rgba(29,29,27,.65); font-size: 13px; }
  .mono{
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
                 "Liberation Mono", "Courier New", monospace;
  }
  
  /* =========================
     LAYOUT
     ========================= */
  .container{
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 28px;
  }
  
  .section-light{
    background: var(--bg);
    padding: 96px 0;
  }
  
  .section-muted{
    background: var(--surface-2);
    padding: 96px 0;
    border-top: 1px solid rgba(0,0,0,.04);
    border-bottom: 1px solid rgba(0,0,0,.04);
  }
  
  /* =========================
     NAVBAR (HUD glass)
     ========================= */
  .navbar{
    position: sticky;
    top: 0;
    z-index: 50;
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 28px;
    background:#ffffff;
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    transition: box-shadow .25s var(--ease);
  }
  .navbar.is-scrolled{ box-shadow: 0 10px 30px rgba(0,0,0,.06); }
  .logo-img{ height: 34px; width:auto; }
  
  .nav-menu{
    list-style:none;
    display:flex;
    gap: 22px;
    padding:0; margin:0;
    align-items:center;
  }
  .nav-menu a{
    font-weight: 500;
    color: rgba(29,29,27,.70);
    position: relative;
    padding: 6px 2px;
    transition: color .2s var(--ease);
  }
  .nav-menu a:hover{ color: var(--etl-black); }
  .nav-menu a::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:-6px;
    height:2px;
    background: var(--etl-red);
    transform: scaleX(0);
    transform-origin:left;
    transition: transform .22s var(--ease);
  }
  .nav-menu a:hover::after{ transform: scaleX(1); }
  
  /* =========================
     BUTTONS (with sheen fix)
     ========================= */
  .btn-primary, .btn-outline{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding: 14px 18px;
    border-radius: 14px;
    font-weight: 650;
    border: 1px solid transparent;
    cursor:pointer;
    user-select:none;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
    position: relative;     overflow: hidden;       }
  
  .btn-primary{
    background: var(--etl-red);
    color:#fff;
    box-shadow: 0 12px 34px rgba(229,38,41,.22);
  }
  .btn-primary:hover{
    transform: translateY(-1px);
    background: #CB1E21;
    box-shadow: 0 22px 54px rgba(229,38,41,.26);
  }
  
  .btn-outline{
    background: rgba(255,255,255,.72);
    color: var(--etl-black);
    border-color: rgba(29,29,27,.18);
  }
  .btn-outline:hover{
    transform: translateY(-1px);
    border-color: rgba(229,38,41,.28);
    background: rgba(229,38,41,.06);
  }
  
  .magnetic-btn, .magnetic-link{ will-change: transform; }
  
  /* Sheen */
  .btn-primary::after, .btn-outline::after{
    content:"";
    position:absolute;
    inset:-30% -60%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 40%, rgba(255,255,255,0) 70%);
    transform: translateX(-40%);
    opacity: 0;
    transition: opacity .2s var(--ease-premium);
    pointer-events:none;
  }
  .btn-primary:hover::after, .btn-outline:hover::after{
    opacity: .7;
    animation: btnsheen .9s var(--ease-premium) 1;
  }
  @keyframes btnsheen{
    from{ transform: translateX(-40%); }
    to{ transform: translateX(40%); }
  }
  
  /* =========================
     KICKER / CHIPS
     ========================= */
  .kicker{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size:12px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color: rgba(29,29,27,.62);
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(229,38,41,.08);
    border: 1px solid rgba(229,38,41,.14);
  }
  
  .chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding: 8px 10px;
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(29,29,27,.70);
    background: rgba(255,255,255,.75);
    border: 1px solid rgba(0,0,0,.06);
  }
  .chip .dot{
    width: 8px; height: 8px;
    border-radius: 999px;
    background: var(--etl-red);
    box-shadow: 0 0 0 4px rgba(229,38,41,.12);
    opacity: .9;
  }
  
  /* =========================
     HERO
     ========================= */
  .hero-section{
    padding: 94px 0 66px;
    position: relative;
    overflow:hidden;
  }
  .hero-bg{
    position:absolute;
    inset:-35%;
    background:
      radial-gradient(55% 45% at 70% 12%, rgba(0,0,0,.045), transparent 60%),
      radial-gradient(55% 45% at 78% 28%, rgba(229,38,41,.05), transparent 62%);
    pointer-events:none;
    z-index:0;
  }
  
  .hero-inner{
    position: relative;
    z-index: 1;
    display:grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 54px;
    align-items: start;
  }
  .hero-subtitle{ margin-top: 14px; max-width: 52ch; }
  .hero-actions{ margin-top: 26px; display:flex; gap: 12px; flex-wrap: wrap; }
  .hero-benefits{ margin-top: 14px; font-size: 14px; color: rgba(29,29,27,.70); }
  
  .hero-visual{ position: relative; }
  .hero-visual::after{
    content:"";
    position:absolute;
    left: 56%;
    top: 320px;
    width: 760px;
    height: 190px;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(0,0,0,.22), transparent 72%);
    filter: blur(18px);
    opacity: .62;
    pointer-events:none;
    z-index: 0;
  }
  
  /* HERO_FIX: no panel look, no cropping */
  .hero-visual,
  .container-drop-zone{
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }
  .hero-visual::before{ content:none !important; display:none !important; }
  
  .container-img{
    position: relative;
    z-index: 1;
    width: 120%;
    max-width: 860px;
    transform: translateY(-140px) scale(1.12);
    transform-origin: top center;
    opacity: 1;
    filter:
      drop-shadow(0 10px 16px rgba(0,0,0,.22))
      drop-shadow(0 44px 98px rgba(0,0,0,.14))
      drop-shadow(0 96px 180px rgba(229,38,41,.06));
  }
  
  /* =========================
     STATS
     ========================= */
  .stats-section{ padding: 36px 0 26px; }
  .stats-grid{
    display:grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 16px;
  }
  .stat-card{
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-1);
    padding: 18px 18px;
  }
  .stat-number{
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.02em;
  }
  .stat-label{ margin-top: 6px; color: rgba(29,29,27,.66); }
  
  /* =========================
     BENTO CARDS (single hover model)
     ========================= */
  .bento-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
    gap: 18px;
  }
  
  .bento-card{
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    padding: 22px;
    box-shadow: var(--shadow-1);
    transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease), background .28s var(--ease);
    position: relative;
    overflow:hidden;
    transform-style: preserve-3d;
    will-change: transform;
  }
  
  .bento-card::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height:3px;
    background: var(--etl-red);
    transform: scaleX(0);
    transform-origin:left;
    transition: transform .22s var(--ease);
  }
  
  .bento-card::before{
    content:"";
    position:absolute;
    inset:0;
    background: radial-gradient(120px 120px at var(--mx, 50%) var(--my, 20%),
      rgba(255,255,255,0.9),
      rgba(255,255,255,0) 60%);
    opacity: 0;
    transition: opacity .22s var(--ease);
    pointer-events:none;
  }
  
  .bento-card:hover{
    transform: translateY(-3px);
    border-color: rgba(229,38,41,.18);
    background: #FAFAFA;
    box-shadow: 0 30px 90px rgba(0,0,0,0.10), 0 26px 90px rgba(229,38,41,0.08);
  }
  .bento-card:hover::after{ transform: scaleX(1); }
  .bento-card:hover::before{ opacity: .55; }
  
  .bento-card:active{ transform: translateY(-1px) scale(0.99); }
  
  .bento-card p{ margin-top: 10px; }
  
  /* Active card (scoped) */
  .bento-card.card--active{
    border: 1px solid var(--etl-red);
    box-shadow: 0 10px 26px rgba(0,0,0,.12);
  }
  
  /* =========================
     OPS PANEL (DT18 + DT24)
     ========================= */
  .ops-card .ops-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
  }
  
  /* Default ops-meta */
  .ops-meta{
    font-size: 12px;
    color: rgba(29,29,27,.62);
    letter-spacing: .02em;
  }
  
  .ops-card .ops-meta{
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  
  /* DT24: avoid “empty pool” */
  #ops .bento-card.ops-card{
    min-height:auto !important;
    height:auto !important;
  }
  #ops .ops-card .ops-top{
    align-items:flex-start;
  }
  
  .ops-list{
    margin-top: 12px;
    display:flex;
    flex-direction:column;
    gap:6px;
    font-size:13px;
    color: rgba(29,29,27,.72);
  }
  .ops-list strong{
    font-weight:700;
    color: rgba(29,29,27,.88);
  }
  
  /* =========================
     FORMS / INPUTS
     ========================= */
  .lead-input{
    width:100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(29,29,27,.14);
    background: rgba(255,255,255,.85);
    outline: none;
  }
  .lead-input:focus{
    border-color: rgba(229,38,41,.45);
    box-shadow: 0 0 0 4px rgba(229,38,41,.08);
  }
  
  /* =========================
     TABLES (single, no duplicates)
     ========================= */
  .data-table{
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
  }
  .data-table th{
    text-align:left;
    font-size: 13px;
    color: rgba(29,29,27,.65);
    padding: 12px 10px;
    border-bottom: 1px solid rgba(0,0,0,.08);
    white-space: nowrap;
  }
  .data-table td{
    padding: 12px 10px;
    border-bottom: 1px solid rgba(0,0,0,.05);
    color: rgba(29,29,27,.78);
  }
  .data-table tr:hover td{
    background: rgba(0,0,0,.02);
  }
  
  /* =========================
     PARTNER LOGOS (keep Variant A only)
     ========================= */
  .logo-grid{
    display:grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
  }
  .logo-tile{
    height: 72px;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,.06);
    background: rgba(255,255,255,.72);
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 10px 12px;
    overflow:hidden;
  }
  .logo-tile img{
    max-height: 44px;
    max-width: 100%;
    width: auto;
    height: auto;
    filter: grayscale(1) contrast(1.05);
    opacity: .78;
    transition: filter .22s ease, opacity .22s ease, transform .22s ease;
  }
  .logo-tile:hover img{
    filter: grayscale(0) contrast(1);
    opacity: 1;
    transform: translateY(-1px);
  }
  
  /* =========================
     FOOTER
     ========================= */
  footer{
    padding: 54px 0;
    border-top: 1px solid rgba(0,0,0,.06);
    background: #fff;
  }
  .footer-inner{
    display:grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 24px;
    align-items:start;
  }
  .footer-logo{ height: 28px; margin-bottom: 10px; }
  .phone-link{ color: var(--etl-red); text-decoration:none; }
  
  /* =========================
     RESPONSIVE
     ========================= */
  @media (max-width: 980px){
    .hero-inner{ grid-template-columns: 1fr; gap: 26px; }
    .container-img{ transform: translateY(-140px) scale(1.06); width: 110%; }
    .hero-visual::after{ top: 280px; width: 620px; height: 170px; }
    .stats-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
    .nav-menu{ display:none; }
    .logo-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
    .logo-tile{ height: 64px; }
    .logo-tile img{ max-height: 40px; }
  }
  
  /* Scroll reveal base (kept) */
  .reveal{
    opacity: 0;
    transform: translateY(18px);
  }

/* Final polish: small spacing + mobile comfort, without changing design language */

/* Slightly calmer section padding on small screens */
@media (max-width: 980px){
  .section-light{ padding: 72px 0; }
  .section-muted{ padding: 72px 0; }
  .hero-section{ padding: 72px 0 52px; }
}

/* Tables: ensure comfortable scrolling on narrow screens */
.table-wrap, .data-table{
  -webkit-overflow-scrolling: touch;
}

/* Buttons: avoid layout jump on focus */
.btn-primary:focus, .btn-outline:focus{
  outline: none;
  box-shadow: 0 0 0 4px rgba(229,38,41,.08);
}

/* Reduce accidental horizontal overflow from long strings */
.data-table td, .data-table th{
  max-width: 480px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Make page-head spacing consistent when used inside section-light */
.page-head{
  padding-top: 84px;
}
@media (max-width: 980px){
  .page-head{ padding-top: 64px; }
}

/* DT52_SAFE — terminal scale + click clarity */
.hero-section{ padding: 72px 0 54px !important; }
.section-light{ padding: 82px 0 !important; }
.section-muted{ padding: 82px 0 !important; }
.stats-section{ padding: 26px 0 18px !important; }

h1{ font-size: clamp(34px, 4.8vw, 72px) !important; }
h2{ font-size: clamp(24px, 2.8vw, 38px) !important; }

.container{ padding: 0 22px !important; }
.container-img{ transform: translateY(-120px) scale(1.10) !important; }

.logo-img{ height: 40px !important; }
.logo-link{ display:inline-flex; align-items:center; }
.logo-link:hover .logo-img{ transform: scale(1.03); transition: transform .18s var(--ease); }

.bento-card:hover{
  transform: none !important;
  box-shadow: var(--shadow-1) !important;
  border-color: var(--border-soft) !important;
}
.bento-card:hover::after{ transform: scaleX(0) !important; }
.bento-card:hover::before{ opacity: 0 !important; }

a.bento-card.is-clickable,
.bento-card.is-clickable{ cursor: pointer; }

a.bento-card.is-clickable:hover,
.bento-card.is-clickable:hover{
  transform: translateY(-3px) !important;
  border-color: rgba(229,38,41,.18) !important;
  background: #FAFAFA !important;
  box-shadow: 0 30px 90px rgba(0,0,0,0.10), 0 26px 90px rgba(229,38,41,0.08) !important;
}
a.bento-card.is-clickable:hover::after,
.bento-card.is-clickable:hover::after{ transform: scaleX(1) !important; }
a.bento-card.is-clickable:hover::before,
.bento-card.is-clickable:hover::before{ opacity: .55 !important; }

@media (max-width: 980px){
  .hero-section{ padding: 64px 0 48px !important; }
  .container{ padding: 0 18px !important; }
  .stats-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

/* DT53_SAFE (adjusted) */
/* Cleaner KPI: visible immediately, no overlap */

.hero-section{ padding-bottom: 46px !important; }

.stats-section{
  padding-top: 18px !important;
  padding-bottom: 18px !important;
  margin-top: 0 !important;       /* убрали подъём */
}

/* если где-то используется reveal/opacity на stats — принудительно включаем */
.stats-section, .stats-grid, .stat-card{
  opacity: 1 !important;
  transform: none !important;
}
.stats-section {
  margin-top: clamp(24px, 4vh, 40px);
}
/* KPI reveal — terminal safe */
.stats-section {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .35s ease, transform .35s ease;
  will-change: opacity, transform;
}

.stats-section.is-visible {
  opacity: 1;
  transform: none;
}

/* чтобы на очень маленьких экранах не было "скачка" */
@media (prefers-reduced-motion: reduce){
  .stats-section { transition: none; }
}
/* Terminal scale — smaller */
h1 { font-size: clamp(30px, 4.2vw, 64px) !important; }
h2 { font-size: clamp(22px, 2.5vw, 34px) !important; }

.hero-section { padding: 64px 0 44px !important; }
.section-light { padding: 74px 0 !important; }
.section-muted { padding: 74px 0 !important; }

.btn-primary, .btn-outline { padding: 12px 16px !important; border-radius: 13px !important; }

/* 1) Make UI slightly denser (terminal): */
h1{ font-size: clamp(28px, 4.1vw, 62px) !important; }
h2{ font-size: clamp(22px, 2.5vw, 34px) !important; }

.hero-section{ padding: 62px 0 44px !important; }
.section-light{ padding: 74px 0 !important; }
.section-muted{ padding: 74px 0 !important; }

/* 2) Click clarity: hover only where clickable */
.bento-card:hover{
  transform: none !important;
  box-shadow: var(--shadow-1) !important;
  border-color: var(--border-soft) !important;
}
.bento-card:hover::after{ transform: scaleX(0) !important; }
.bento-card:hover::before{ opacity: 0 !important; }

.is-clickable{ cursor: pointer; }
a.is-clickable{ text-decoration: none; }

.is-clickable:hover{
  transform: translateY(-3px) !important;
  border-color: rgba(229,38,41,.18) !important;
  background: #FAFAFA !important;
  box-shadow: 0 30px 90px rgba(0,0,0,0.10), 0 26px 90px rgba(229,38,41,0.08) !important;
}
.is-clickable:hover::after{ transform: scaleX(1) !important; }
.is-clickable:hover::before{ opacity: .55 !important; }

/* Services page cards (svc-card) */
.svc-card{ transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); }
.svc-card.is-clickable:hover{
  transform: translateY(-3px);
  border-color: rgba(229,38,41,.18);
  box-shadow: 0 30px 90px rgba(0,0,0,0.10), 0 26px 90px rgba(229,38,41,0.08);
}

/* 3) KPI reveal (no layout shift) */
.stats-section{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .28s ease, transform .28s ease;
  will-change: opacity, transform;
}
.stats-section.is-visible{
  opacity: 1;
  transform: none;
}

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .stats-section{ transition: none; opacity: 1; transform: none; }
}

/* 4) Mobile: keep comfortable density */
@media (max-width: 980px){
  .hero-section{ padding: 56px 0 40px !important; }
  .section-light{ padding: 68px 0 !important; }
  .section-muted{ padding: 68px 0 !important; }
}

/* Make service cards behave like links (terminal clarity) */
.svc-card.is-clickable{ cursor: pointer; }
.svc-card.is-clickable:focus-within{
  box-shadow: 0 0 0 4px rgba(229,38,41,.08);
}

.geo-list{ display:flex; flex-direction:column; gap:10px; }
.geo-btn[aria-pressed="true"]{
  border-color: rgba(229,38,41,.28) !important;
  background: rgba(229,38,41,.06) !important;
}
.geo-svg-wrap{
  margin-top: 10px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.72);
  padding: 10px;
  overflow:hidden;
}
.geo-svg{ width:100%; height:auto; display:block; }

/* Ensure OPS/terminal cards show pointer and consistent hover via .is-clickable */
.ops-card.is-clickable{ cursor:pointer; }
.ops-card.is-clickable:hover{
  transform: translateY(-3px) !important;
  border-color: rgba(229,38,41,.18) !important;
  background: #FAFAFA !important;
  box-shadow: 0 30px 90px rgba(0,0,0,0.10), 0 26px 90px rgba(229,38,41,0.08) !important;
}
.ops-card.is-clickable:hover::after{ transform: scaleX(1) !important; }
.ops-card.is-clickable:hover::before{ opacity: .55 !important; }

/* Terminal microcopy density */
#ops p{ max-width: 86ch; }

/* Make hover underline + lift only for is-clickable cards */
.bento-card::after{ transform: scaleX(0) !important; }
.bento-card::before{ opacity: 0 !important; }

.bento-card.is-clickable::after{ transform: scaleX(0); }
.bento-card.is-clickable:hover::after{ transform: scaleX(1) !important; }
.bento-card.is-clickable:hover::before{ opacity: .55 !important; }

/* Cursor clarity */
.bento-card.is-clickable, a.bento-card.is-clickable{ cursor: pointer; }

/* Prevent accidental hover on non-clickable bento cards */
.bento-card:not(.is-clickable):hover{
  transform: none !important;
  box-shadow: var(--shadow-1) !important;
  border-color: var(--border-soft) !important;
}

/* DT62_SAFE — footer terminal */
.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 22px;
  align-items:start;
}
.footer-h{
  margin:0 0 10px 0;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(29,29,27,.72);
}
.footer-links{
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.footer-links a{
  text-decoration:none;
  color: rgba(29,29,27,.78);
}
.footer-links a:hover{
  color: rgba(29,29,27,.95);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-text{
  color: rgba(29,29,27,.72);
  line-height: 1.55;
}
.footer-meta{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap:wrap;
}
.footer-pill{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.72);
  font-size: 12px;
  color: rgba(29,29,27,.72);
}
.footer-top{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(229,38,41,.06);
  color: rgba(29,29,27,.85);
  text-decoration:none;
  font-size: 12px;
}
.footer-top:hover{
  border-color: rgba(229,38,41,.22);
}
.footer-note{
  margin-top: 12px;
  font-size: 12px;
  color: rgba(29,29,27,.62);
}
.footer-bottom{
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,.06);
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap:wrap;
  color: rgba(29,29,27,.62);
  font-size: 12px;
}
.footer-dot{ opacity: .6; }
@media (max-width: 980px){
  .footer-grid{ grid-template-columns: 1fr; gap: 16px; }
  .footer-bottom{ margin-top: 18px; }
}

/* DT63_SAFE — nav active + focus */
.nav-menu a.nav-active{
  color: rgba(29,29,27,.95) !important;
}
.nav-menu a.nav-active::after{
  transform: scaleX(1) !important;
}

/* Clear focus visibility (terminal) */
.nav-menu a:focus-visible,
.btn-primary:focus-visible,
.btn-outline:focus-visible,
.is-clickable:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(229,38,41,.10);
  border-radius: 12px;
}

/* DT64_SAFE — first-screen density tuning */

/* Slightly tighter hero layout to fit KPI on common laptops */
.hero-section{ padding: 56px 0 36px !important; }
.hero-subtitle{ margin-top: 8px !important; }
.hero-actions{ margin-top: 14px !important; }
.hero-benefits{ margin-top: 8px !important; }

/* Container visual: reduce vertical footprint */
.container-img{ transform: translateY(-110px) scale(1.06) !important; }
.hero-visual::after{ top: 290px !important; opacity: .52 !important; }

/* KPI block: compact but readable */
.stats-section{ padding: 18px 0 16px !important; margin-top: 0 !important; }
.stat-number{ font-size: 28px !important; }
.stat-card{ padding: 16px 16px !important; }

/* Keep OPS closer without overlap */
#ops.section-light{ padding-top: 70px !important; }
#ops .bento-grid{ margin-top: 18px !important; }

/* On short viewports, tighten further */
@media (max-height: 800px){
  .hero-section{ padding: 52px 0 32px !important; }
  .container-img{ transform: translateY(-96px) scale(1.04) !important; }
  .stat-number{ font-size: 26px !important; }
  .stat-card{ padding: 14px 14px !important; }
}

/* On small widths, avoid crowding */
@media (max-width: 980px){
  .hero-section{ padding: 52px 0 34px !important; }
  .container-img{ transform: translateY(-92px) scale(1.02) !important; width: 108% !important; }
  .stats-section{ padding: 14px 0 14px !important; }
}

/* DT66_SAFE - terminal hero scale + KPI fit (1440px) */

/* Hero: a bit denser */
.hero-section{ padding: 50px 0 30px !important; }
h1{ font-size: clamp(26px, 3.8vw, 56px) !important; line-height: 0.98 !important; }
.hero-subtitle{ margin-top: 8px !important; max-width: 56ch !important; }
.hero-actions{ margin-top: 12px !important; }
.hero-benefits{ margin-top: 8px !important; font-size: 13px !important; }

/* Visual: reduce container vertical footprint */
.container-img{ transform: translateY(-88px) scale(1.03) !important; width: 112% !important; }
.hero-visual::after{ top: 268px !important; opacity: .46 !important; }

/* KPI: compact but readable; no overlap tricks */
.stats-section{ padding: 14px 0 14px !important; margin-top: 0 !important; }
.stat-card{ padding: 14px 14px !important; }
.stat-number{ font-size: 26px !important; }
.stat-label{ font-size: 13px !important; }

/* Ensure KPI reveal doesn't hide forever on small screens */
@media (max-width: 980px){
  .stats-section{ opacity: 1 !important; transform: none !important; }
}

/* Ops closer */
#ops.section-light{ padding-top: 66px !important; padding-bottom: 78px !important; }
#ops .bento-grid{ margin-top: 16px !important; }

/* Navbar: slightly tighter */
.navbar{ padding-top: 14px !important; padding-bottom: 14px !important; }
.logo-img{ height: 42px !important; }

/* DT67_SAFE — terminal navbar polish */
.navbar{
  padding: 12px 22px !important;
  gap: 14px !important;
}
.logo-area{
  display:flex;
  align-items:center;
  gap: 10px;
}
.logo-link{
  display:inline-flex;
  align-items:center;
  border-radius: 12px;
  padding: 4px;
}
.logo-img{
  height: 48px !important; /* bigger */
  width:auto;
  transition: transform .18s var(--ease), filter .18s var(--ease);
}
.logo-link:hover .logo-img{
  transform: scale(1.04);
  filter: drop-shadow(0 12px 26px rgba(0,0,0,.10));
}
.nav-menu a{
  font-size: 14px !important;
}
.btn-primary.magnetic-btn{
  padding: 12px 16px !important;
  border-radius: 14px !important;
}
@media (max-width: 980px){
  .logo-img{ height: 42px !important; }
  .navbar{ padding: 10px 16px !important; }
}

/* DT69_SAFE — KPI reveal terminal */
.stats-section{
  opacity: 0;
  transform: none !important; /* no motion */
  transition: opacity .18s ease;
  will-change: opacity;
}
.stats-section.is-visible{
  opacity: 1;
}
@media (prefers-reduced-motion: reduce){
  .stats-section{ transition:none; opacity:1; }
}

/* DT73_SAFE */
/* DT73_SAFE — terminal rhythm polish */
p{ line-height: 1.52; }
.hero-subtitle{ max-width: 60ch !important; }
.kicker{ padding: 6px 10px !important; font-size: 11px !important; }
.btn-primary, .btn-outline{ font-weight: 700 !important; }

/* Reduce visual noise on cards */
.bento-card{ border-color: rgba(0,0,0,.06) !important; }
.bento-card.is-clickable:hover{ transform: translateY(-2px) !important; }

/* Make KPI labels slightly tighter */
.stat-label{ line-height: 1.35 !important; }

/* Smooth section separators */
.section-muted{ border-top: 1px solid rgba(0,0,0,.05) !important; border-bottom: 1px solid rgba(0,0,0,.05) !important; }
@font-face{
  font-family:"Bowler";
  src:url("../fonts/bowler.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}/* =========================
   D75 — TRUST + TYPO FIX
   ========================= */

/* Typography lock */
@font-face {
  font-family: "Bowler";
  src:
    url("../fonts/bowler.woff2") format("woff2"),
    url("../fonts/bowler.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

h1, h2 {
  font-family: "Bowler", "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
  letter-spacing: 0.05em;
}

/* Trust logos */
.trust-logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}

.trust-logos .logo-tile {
  height: 72px;
  border-radius: 14px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(0,0,0,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .18s ease, box-shadow .18s ease;
}

.trust-logos .logo-tile img {
  max-height: 42px;
  opacity: .75;
  filter: grayscale(1);
  transition: opacity .18s ease, filter .18s ease, transform .18s ease;
}

.trust-logos .logo-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(0,0,0,.08);
}

.trust-logos .logo-tile:hover img {
  opacity: 1;
  filter: grayscale(0);
  transform: scale(1.04);
}

/* D76_TRUST_START */
/* Trust: marquee + reveal-on-scroll (GPU-friendly, no GSAP) */

.trust-section .trust-marquee{
  margin-top: 18px;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.72);
  padding: 14px 12px;
}

.trust-section .marquee-track{
  display:flex;
  width: max-content;
  gap: 18px;
  will-change: transform;
  animation: none !important;
  transform: translate3d(0,0,0);
}

.trust-section .marquee-group{
  display:flex;
  gap: 18px;
  align-items:center;
}

@keyframes etlMarquee{
  from{ transform: translate3d(0,0,0); }
  to{ transform: translate3d(-50%,0,0); }
}

/* Reveal */
.trust-section .trust-reveal-item{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .42s ease, transform .42s ease, filter .25s ease;
  transition-delay: calc(var(--i, 0) * 70ms);
}

.trust-section.trust-visible .trust-reveal-item{
  opacity: 1;
  transform: none;
}

/* Reduced motion */
.trust-section.trust-reduce-motion .marquee-track{
  animation: none !important;
}

@media (prefers-reduced-motion: reduce){
  .trust-section .marquee-track{ animation: none !important; }
  .trust-section .trust-reveal-item{ transition: none !important; opacity: 1 !important; transform: none !important; }
}

/* Fallback: show grid on small screens, hide marquee */
@media (max-width: 860px){
  .trust-section .trust-marquee{ display: none; }
}

/* D76.1 — show marquee on desktop, grid on mobile */
.trust-section .trust-logos{ display: none; }
@media (max-width: 860px){
  .trust-section .trust-logos{ display: grid; }
}

/* D76_TRUST_END */
/* ===== Process (How we work) ===== */
.process-section { position: relative; }

.process-subtitle{
  margin-top: 10px;
  max-width: 78ch;
  color: rgba(29,29,27,.72);
}

.process-track{
  position: relative;
  margin-top: 18px;
  margin-bottom: 18px;
  height: 22px;
}

.process-line{
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: rgba(29,29,27,.10);
  border-radius: 999px;
}

.process-dot{
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: #E52629;
  box-shadow: 0 6px 18px rgba(229,38,41,.20);
  left: 0%;
}

.process-grid{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.process-step{
  border-radius: 16px;
  padding: 16px 16px 14px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(8px);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.process-step__num{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  background: rgba(229,38,41,.10);
  color: rgba(29,29,27,.88);
}

.process-step__title{
  margin-top: 10px;
  margin-bottom: 6px;
}

.process-step__lead{
  margin: 0;
  color: rgba(29,29,27,.78);
  font-weight: 600;
}

.process-step__text{
  margin-top: 8px;
  color: rgba(29,29,27,.68);
  font-size: 14px;
  line-height: 1.45;
}

.process-step.is-active{
  border-color: rgba(229,38,41,.35);
  background: rgba(255,255,255,.78);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  transform: translateY(-2px);
}

.process-step.is-active .process-step__num{
  background: #E52629;
  color: white;
}

/* Responsive */
@media (max-width: 1024px){
  .process-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process-track{ display:none; } /* на планшете и ниже прячем линию (чтобы не ломать) */
}
@media (max-width: 560px){
  .process-grid{ grid-template-columns: 1fr; }
}
/* hover/focus — мягко, без цирка */
.process-step:hover{
  transform: translateY(-2px);
  border-color: rgba(0,0,0,.10);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

.process-step:focus-within{
  outline: none;
  border-color: rgba(229,38,41,.28);
}

/* делаем шаг “кликабельным” без ссылки */
.process-step{
  cursor: pointer;
}

/* =========================
   D77 — TRUST MARQUEE PREMIUM
   ========================= */

/* Edge fade (premium mask) */
.trust-section .trust-marquee{
  position: relative;
}

.trust-section .trust-marquee::before,
.trust-section .trust-marquee::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width: 72px;
  pointer-events:none;
  z-index: 2;
}

.trust-section .trust-marquee::before{
  left:0;
  background: linear-gradient(90deg, rgba(255,255,255,.95), rgba(255,255,255,0));
}

.trust-section .trust-marquee::after{
  right:0;
  background: linear-gradient(270deg, rgba(255,255,255,.95), rgba(255,255,255,0));
}

/* Speed control */
.trust-section{
  --marquee-speed: 28s;       /* default speed */
  --marquee-speed-hover: 18s; /* faster on hover */
}

.trust-section .marquee-track{
  animation-duration: var(--marquee-speed);
}

/* Touch devices: keep steady, no hover tricks */
@media (hover: none) and (pointer: coarse){
  .trust-section{
    --marquee-speed: 34s;
    --marquee-speed-hover: 34s;
  }
}

/* Reduced motion: keep everything still */
@media (prefers-reduced-motion: reduce){
  .trust-section .trust-marquee::before,
  .trust-section .trust-marquee::after{ display:none; }
}

/* =========================
   D77_FIX — MARQUEE NO JUMP
   ========================= */

/* ВАЖНО: не меняем duration на hover — это и вызывает скачок */
.trust-section .marquee-track{
  animation-duration: var(--marquee-speed, 28s) !important;
}

/* Hover = пауза (самый стабильный премиум-вариант) */
/* Лёгкая подсветка вместо изменения скорости */
.trust-section .trust-marquee:hover{
  border-color: rgba(229,38,41,.14);
  box-shadow: 0 18px 50px rgba(0,0,0,.06);
}

/* На hover “оживают” только плитки */
.trust-section .trust-marquee .logo-tile{
  transition: transform .16s ease, box-shadow .16s ease;
}
.trust-section .trust-marquee .logo-tile:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
}

/* Тач-устройства: не паузим (hover нет смысла) */
/* =========================
   TRUST MARQUEE — STABLE PREMIUM
   ========================= */

.trust-section .trust-marquee{
  position: relative;
  margin-top: 18px;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.72);
  padding: 14px 12px;
}

/* fade по краям */
.trust-section .trust-marquee::before,
.trust-section .trust-marquee::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width: 72px;
  pointer-events:none;
  z-index: 2;
}
.trust-section .trust-marquee::before{
  left:0;
  background: linear-gradient(90deg, rgba(255,255,255,.95), rgba(255,255,255,0));
}
.trust-section .trust-marquee::after{
  right:0;
  background: linear-gradient(270deg, rgba(255,255,255,.95), rgba(255,255,255,0));
}

/* трек — без смены duration на hover */
.trust-section .marquee-track{
  display:flex;
  width: max-content;
  gap: 18px;
  will-change: transform;
  transform: translate3d(0,0,0);
}

.trust-section .marquee-group{
  display:flex;
  gap: 18px;
  align-items:center;
}

@keyframes etlMarquee{
  from{ transform: translate3d(0,0,0); }
  to{ transform: translate3d(-50%,0,0); }
}

/* hover = пауза (без скачков) */
.trust-section .trust-marquee:hover{
  border-color: rgba(229,38,41,.14);
  box-shadow: 0 18px 50px rgba(0,0,0,.06);
}

/* touch: hover нет — не паузим */
/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .trust-section .marquee-track{ animation: none !important; }
  .trust-section .trust-marquee::before,
  .trust-section .trust-marquee::after{ display:none; }
}

/* mobile: сетка вместо ленты */
@media (max-width: 860px){
  .trust-section .trust-marquee{ display:none; }
  .trust-section .trust-logos{ display:grid; }
}



/* ===== Trust Anchor ===== */
.trust-anchor{
  margin-top: 22px;
}

.trust-anchor .bento-card{
  position: relative;
  overflow: hidden;
}

.trust-anchor .ta-kicker{
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(29,29,27,.60);
}

.trust-anchor .ta-list{
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.trust-anchor .ta-list li{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: rgba(29,29,27,.74);
  line-height: 1.35;
}

.trust-anchor .ta-bullet{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(229,38,41,.75);
  margin-top: 6px;
  flex: 0 0 auto;
}

.trust-anchor .ta-foot{
  margin-top: 12px;
  color: rgba(29,29,27,.58);
  font-size: 12px;
}

.trust-anchor a.ta-link{
  color: rgba(229,38,41,.95);
  text-decoration: none;
  border-bottom: 1px solid rgba(229,38,41,.30);
}

.trust-anchor a.ta-link:hover{
  border-bottom-color: rgba(229,38,41,.60);
}

/* D78_TRUST_START */
/* rAF marquee: ensure track is GPU-friendly and not animated by CSS */
.trust-section .marquee-track{
  will-change: transform;
  transform: translate3d(0,0,0);
  animation: none !important;
}
/* Keep hover highlight only (no pause) */
.trust-section .trust-marquee:hover{
  border-color: rgba(229,38,41,.14);
  box-shadow: 0 18px 50px rgba(0,0,0,.06);
}
/* D78_TRUST_END */

/* D80_SCALE_START */
/* Global scale & density (calmer terminal) */

/* 1) Base type slightly smaller */
html{ font-size: 15px; }
@media (max-width: 980px){
  html{ font-size: 14.5px; }
}

/* 2) Sections: tighter rhythm */
.section-light{ padding: 68px 0 !important; }
.section-muted{ padding: 68px 0 !important; }
#ops.section-light{ padding-top: 60px !important; padding-bottom: 70px !important; }

/* 3) Hero: less tall, tighter text */
.hero-section{ padding: 46px 0 28px !important; }
.hero-subtitle{ margin-top: 8px !important; max-width: 64ch !important; }
.hero-actions{ margin-top: 12px !important; }
.hero-benefits{ margin-top: 8px !important; font-size: 13px !important; }

/* H1/H2 sizes a bit smaller (keep Bowler) */
h1{ font-size: clamp(24px, 3.4vw, 54px) !important; line-height: 0.94 !important; }
h2{ font-size: clamp(20px, 2.25vw, 32px) !important; }

/* 4) KPI: slightly smaller */
.stats-section{ padding: 12px 0 12px !important; }
.stat-card{ padding: 14px 14px !important; }
.stat-number{ font-size: 24px !important; }
.stat-label{ font-size: 12.5px !important; }

/* 5) Cards/buttons: lighter */
.bento-card{ padding: 18px !important; }
.btn-primary, .btn-outline{ padding: 11px 15px !important; border-radius: 13px !important; }

/* 6) Container visual: reduce vertical footprint a bit */
.container-img{ transform: translateY(-78px) scale(1.02) !important; width: 112% !important; }
.hero-visual::after{ top: 250px !important; opacity: .40 !important; }

/* Mobile: keep comfy */
@media (max-width: 980px){
  .hero-section{ padding: 44px 0 26px !important; }
  .container-img{ transform: translateY(-70px) scale(1.00) !important; width: 108% !important; }
  .section-light{ padding: 62px 0 !important; }
  .section-muted{ padding: 62px 0 !important; }
}
/* D80_SCALE_END */

/* D81_STABILIZE_START */
/* Trust marquee stabilization for rAF (d78) */

/* No CSS keyframes on track (avoid conflicts / jumps) */
.trust-section .marquee-track{
  animation: none !important;
  will-change: transform;
  transform: translate3d(0,0,0);
}

/* Desktop: marquee visible; grid hidden (mobile fallback) */
.trust-section .trust-logos{ display: none; }
@media (max-width: 860px){
  .trust-section .trust-marquee{ display: none; }
  .trust-section .trust-logos{ display: grid; }
}

/* Premium edge fade (safe, no interaction changes) */
.trust-section .trust-marquee{
  position: relative;
}
.trust-section .trust-marquee::before,
.trust-section .trust-marquee::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width: 72px;
  pointer-events:none;
  z-index: 2;
}
.trust-section .trust-marquee::before{
  left:0;
  background: linear-gradient(90deg, rgba(255,255,255,.95), rgba(255,255,255,0));
}
.trust-section .trust-marquee::after{
  right:0;
  background: linear-gradient(270deg, rgba(255,255,255,.95), rgba(255,255,255,0));
}

/* Hover: highlight only (JS handles speed easing) */
.trust-section .trust-marquee:hover{
  border-color: rgba(229,38,41,.14);
  box-shadow: 0 18px 50px rgba(0,0,0,.06);
}

/* D81_STABILIZE_END */

/* D82_SCALE_MICRO_START */
/* Micro scale down (post-d80): keep terminal feel, less vertical weight */
html{ font-size: 14.6px; }
@media (max-width: 980px){ html{ font-size: 14.2px; } }

.hero-section{ padding: 40px 0 24px !important; }
.section-light{ padding: 62px 0 !important; }
.section-muted{ padding: 62px 0 !important; }

h1{ font-size: clamp(22px, 3.15vw, 50px) !important; }
h2{ font-size: clamp(19px, 2.1vw, 30px) !important; }

.stat-number{ font-size: 22px !important; }
.stat-card{ padding: 12px 12px !important; }

.bento-card{ padding: 16px !important; }
.btn-primary, .btn-outline{ padding: 10px 14px !important; }

@media (max-width: 980px){
  .hero-section{ padding: 38px 0 22px !important; }
  .section-light{ padding: 58px 0 !important; }
  .section-muted{ padding: 58px 0 !important; }
}
/* D82_SCALE_MICRO_END */

/* D83_NAV_START */
/* Navbar: no jump on hover + cleaner terminal feel */
.nav-menu a{
  display: inline-flex;
  align-items: center;
  height: 32px;
  line-height: 1;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
.nav-menu a::after{
  bottom: -5px;
}
/* Avoid layout jitter from subpixel transforms */
.nav-menu a, .nav-menu a::after{
  transform: translateZ(0);
}
/* D83_NAV_END */

/* D84_START */
/* Services header + brand truck accent */
.services-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 18px;
}
.services-truck{
  width: 260px;
  max-width: 40vw;
  height: auto;
  opacity: .92;
  transform: translateY(6px);
  filter: drop-shadow(0 14px 32px rgba(0,0,0,.10));
}
@media (max-width: 980px){
  .services-head{ align-items:flex-start; }
  .services-truck{ width: 220px; transform: none; }
}
@media (max-width: 640px){
  .services-truck{ display:none; }
}
/* D84_END */

/* D87_START */
/* Services: make truck an integrated anchor */
#services .services-hero{
  position: relative;
}

#services .services-hero .services-hero-truck {
  position: absolute;
  top: 110px;
  width: 520px;
  max-width: 48vw;
  height: auto;
  opacity: .28;
  pointer-events: none;
  filter: grayscale(.15) drop-shadow(0 18px 44px rgba(0,0,0,.10));
  transform: rotate(-0.6deg);
}


#services .services-head{
  position: relative;
  z-index: 2;
}

#services .bento-grid{
  position: relative;
  z-index: 2;
}

/* Prevent text overlap by reserving space on wide screens */
@media (min-width: 1020px){
  #services .services-head{
    padding-right: 380px;
  }
}

/* Tablet */
@media (max-width: 980px){
  #services .services-truck{
    width: 420px;
    max-width: 56vw;
    opacity: .22;
    top: -22px;
  }
  #services .services-head{
    padding-right: 0;
  }
}

/* Mobile: hide */
@media (max-width: 640px){
  #services .services-truck{ display:none !important; }
}
/* D87_END */

/* =========================
   BUTTON — TERMINAL HOVER
   ========================= */

   .btn-primary{
    background: #E52629;
    color: #fff;
    border-radius: 14px;
    font-weight: 700;
    padding: 12px 18px;
    box-shadow: 0 6px 18px rgba(229,38,41,.18);
    transition:
      background-color .14s ease,
      box-shadow .14s ease;
  }
  
  /* Hover — спокойно, дорого */
  .btn-primary:hover{
    background: #D61F22;
    box-shadow: 0 10px 28px rgba(229,38,41,.22);
  }
  
  /* Active — без прыжка */
  .btn-primary:active{
    background: #C61B1E;
    box-shadow: 0 4px 14px rgba(229,38,41,.20);
  }
  
  /* Убираем ВСЕ эффекты */
  .btn-primary::before,
  .btn-primary::after{
    display: none !important;
  }
  
  .btn-primary:hover,
  .btn-primary:active{
    transform: none !important;
  }

/* D89_NAV_START */
/* Navbar hover refine — calm terminal */
.navbar{
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 12px 22px !important;
  gap: 16px !important;
  background: rgba(255,255,255,.86) !important;
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
  backdrop-filter: blur(16px) saturate(1.08);
  -webkit-backdrop-filter: blur(16px) saturate(1.08);
}

/* Dock */
.nav-menu{
  gap: 6px !important;
  padding: 6px !important;
  border-radius: 999px;
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.045);
  box-shadow: none; /* calmer */
}

/* Links */
.nav-menu a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 34px;
  line-height: 1;
  padding: 0 14px;
  border-radius: 999px;
  font-weight: 520;
  font-size: 14px;
  letter-spacing: .01em;
  color: rgba(29,29,27,.76) !important;
  background: transparent;
  transition: background .12s ease, color .12s ease; /* no shadow transitions */
  text-decoration:none;
  transform: translateZ(0);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
.nav-menu a::after{ display:none !important; content:none !important; }

/* Hover — only subtle bg */
.nav-menu a:hover{
  color: rgba(29,29,27,.92) !important;
  background: rgba(0,0,0,.04);
}

/* Active — slightly stronger bg, no shadow */
.nav-menu a.nav-active{
  color: rgba(29,29,27,.96) !important;
  background: rgba(0,0,0,.06);
  font-weight: 650;
}

/* Focus */
.nav-menu a:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(229,38,41,.10);
}

/* CTA stays red, but no jump */
.btn-primary.magnetic-btn{
  transform: none !important;
}

/* Responsive */
.logo-img{ height: 44px !important; }
@media (max-width: 980px){
  .nav-menu{ display:none !important; }
  .logo-img{ height: 40px !important; }
  .navbar{ padding: 10px 16px !important; }
}
/* D89_NAV_END */

/* D90_TRUST_CLEAN_START */
/* Trust marquee: clean CSS for rAF (no keyframes), edge fade, mobile fallback */
.trust-section .marquee-track{
  animation: none !important;
  will-change: transform;
  transform: translate3d(0,0,0);
}

/* Desktop: marquee visible; grid hidden */
.trust-section .trust-logos{ display: none; }
@media (max-width: 860px){
  .trust-section .trust-marquee{ display: none; }
  .trust-section .trust-logos{ display: grid; }
}

/* Edge fade (premium) */
.trust-section .trust-marquee{
  position: relative;
}
.trust-section .trust-marquee::before,
.trust-section .trust-marquee::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width: 72px;
  pointer-events:none;
  z-index: 2;
}
.trust-section .trust-marquee::before{
  left:0;
  background: linear-gradient(90deg, rgba(255,255,255,.95), rgba(255,255,255,0));
}
.trust-section .trust-marquee::after{
  right:0;
  background: linear-gradient(270deg, rgba(255,255,255,.95), rgba(255,255,255,0));
}
/* D90_TRUST_CLEAN_END */

/* =========================
   D91 — CONTAINER SAFE PADDING
   ========================= */
.container{
  padding-left: 32px !important;
  padding-right: 32px !important;
}
@media (max-width: 980px){
  .container{
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}
@media (max-width: 560px){
  .container{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* D93_SERVICES_START */
/* Services page: segment buttons stable + small trust strip spacing */
.seg{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.seg-btn{
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.72);
  cursor: pointer;
}
.seg-btn[aria-pressed="true"]{
  border-color: rgba(0,0,0,.14);
  background: rgba(0,0,0,.04);
}
.svc-title{ font-weight: 800; }
/* D93_SERVICES_END */

/* D95_PRICING_START */
/* Pricing: factors + responsive table */
.price-factors{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}
.price-factor{
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.72);
  padding: 14px 14px;
}
.price-factor b{
  display:block;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(29,29,27,.70);
}
.price-factor span{
  display:block;
  margin-top: 8px;
  color: rgba(29,29,27,.78);
  font-size: 13px;
  line-height: 1.35;
}

.table-wrap{
  width:100%;
  overflow:auto;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.72);
}
.table-wrap .data-table{
  min-width: 760px;
}

@media (max-width: 980px){
  .price-factors{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
  .price-factors{ grid-template-columns: 1fr; }
}
/* D95_PRICING_END */

/* D98_OVERRIDE_START */
/* Terminal bg: slightly more visible */
#ops .terminal-bg{ right: -80px !important; top: 56% !important; }
#ops .terminal-bg img{ opacity: 0.34 !important; filter: grayscale(70%) !important; }

/* Services truck: sit lower, behind second row */
#services .services-truck{ top: 110px !important; opacity: 0.22 !important; }
/* D98_OVERRIDE_END */

/* D101_START */
/* ===== OPS: SINGLE CONTAINER WATERMARK ===== */
#ops{
  position: relative !important;
  overflow: hidden !important;
}

#ops .terminal-bg{
  right: -260px !important;
  top: 58% !important;
  transform: translateY(-50%) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

#ops .terminal-bg img{
  width: 520px !important;
  max-width: none !important;
  opacity: 0.08 !important;
  filter: grayscale(100%) contrast(1.05) !important;
}

#ops .container{
  position: relative;
  z-index: 2;
}

/* ===== SERVICES: TRUCK ONLY (NO CONTAINER) ===== */
#services{
  position: relative !important;
  overflow: hidden !important;
}

#services .services-bg{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* remove container image if still present (via display) */
#services .services-bg .bg-container{ display:none !important; }

/* truck accent */
#services .services-bg .bg-truck{
  position: absolute;
  right: -80px;
  bottom: -60px;
  width: 520px;
  max-width: none;
  opacity: 0.25;
  filter: grayscale(10%);
}

#services .container{
  position: relative;
  z-index: 2;
}

/* If older "services-truck in header" exists, keep hidden */
#services .services-truck{ display:none !important; }

/* Mobile: keep clean */
@media (max-width: 900px){
  #services .services-bg{ display:none !important; }
  #ops .terminal-bg{ display:none !important; }
}
/* D101_END */

/* D102_OVERRIDE_START */
/* OPS: move container watermark lower so it doesn't appear under KPI */
#ops .terminal-bg{
  top: 70% !important;
  right: -300px !important;
}
#ops .terminal-bg img{
  width: 460px !important;
  opacity: 0.06 !important;
}

/* Services: make truck fully visible (no crop) */
#services .services-bg .bg-truck{
  right: 19px !important;
  bottom: 11px !important;
  width: 520px !important;
  opacity: 0.95 !important;
}

/* Keep it clean on smaller screens */
@media (max-width: 1100px){
  #services .services-bg .bg-truck{
    width: 360px !important;
    opacity: 0.95 !important;
  }
}
@media (max-width: 900px){
  #services .services-bg{ display:none !important; }
  #ops .terminal-bg{ display:none !important; }
}
/* D102_OVERRIDE_END */

/* D103_START */
/* HERO SCENE: truck + container move together (bottom-anchored) */
.hero-section{
  position: relative;
  overflow: hidden;
}

.hero-section .hero-inner{
  position: relative;
  z-index: 2;
}

.hero-scene{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* Background container watermark */
.hero-bg-container{
  position: absolute;
  right: -6%;
  bottom: -140px;
  width: 920px;
  max-width: none;
  opacity: 0.06;
  filter: grayscale(100%) contrast(1.05);
}

/* Hero truck */
.hero-truck{
  position: absolute;
  right: -2%;
  bottom: -40px;
  width: 860px;
  max-width: none;
  filter: drop-shadow(0 18px 44px rgba(0,0,0,.10));
}

/* Hide old hero visual block to avoid double rendering */
.hero-visual{ visibility: hidden; height: 0; overflow: hidden; }

/* Mobile */
@media (max-width: 980px){
  .hero-bg-container{ display:none; }
  .hero-truck{ right: -10%; width: 560px; bottom: -26px; }
  .hero-visual{ visibility: hidden; height: 0; }
}

/* Hide any legacy OPS container watermark (keep only hero) */
#ops .terminal-bg{ display:none !important; }
/* D103_END */

/* D104_START */
/* Hero scene sizing (calm) */
.hero-bg-container{
  right: -10% !important;
  bottom: -160px !important;
  width: 820px !important;
  opacity: 0.07 !important;
}
.hero-truck{
  right: -6% !important;
  bottom: -28px !important;
  width: 760px !important;
}
/* Keep old hero-visual hidden */
.hero-visual{ visibility: hidden; height: 0; overflow: hidden; }
/* Mobile */
@media (max-width: 980px){
  .hero-truck{ right: -18% !important; width: 520px !important; bottom: -18px !important; }
  .hero-bg-container{ display:none !important; }
}
/* D104_END */

/* D105_START */
/* HERO scene: explicit layering + reliable sizing */
.hero-scene{ z-index: 1; }
.hero-scene .hero-bg-container{
  z-index: 0;
  opacity: 0.07 !important;
  right: -14% !important;
  bottom: -150px !important;
  width: 860px !important;
  max-width: none !important;
}
.hero-scene .hero-truck{
  z-index: 1;
  width: min(760px, 58vw) !important;
  right: -6% !important;
  bottom: -26px !important;
}

/* Ensure content always above scene */
.hero-inner{ position: relative; z-index: 2; }

/* Mobile */
@media (max-width: 980px){
  .hero-scene .hero-bg-container{ display:none !important; }
  .hero-scene .hero-truck{
    width: min(520px, 92vw) !important;
    right: -18% !important;
    bottom: -16px !important;
  }
}
/* D105_END */

/* D106_START */
/* HERO: no container watermark, truck only */
.hero-bg-container{ display:none !important; }

/* Give hero a bit more breathing room (avoid "hero became smaller") */
.hero-section{ padding-bottom: 44px !important; }
@media (max-width: 980px){
  .hero-section{ padding-bottom: 36px !important; }
}

/* MID WATERMARK between OPS and SERVICES */
.mid-watermark{
  position: relative;
  overflow: hidden;
  padding: 0;
  height: 0; /* no layout impact */
}

.mid-watermark .wm-layer{
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mid-watermark .wm-img{
  position: absolute;
  left: 50%;
  top: -260px;
  transform: translateX(-50%);
  width: 1100px;
  max-width: none;
  opacity: 0.06;
  filter: grayscale(100%) contrast(1.05);
}

/* keep visible only on desktop, hide on smaller screens */
@media (max-width: 1024px){
  .mid-watermark{ display:none; }
}
/* D106_END */

/* D107_START */
/* Mid-page container watermark (pseudo-element, no layout shift in content) */
#midwm{
  position: relative;
  height: 220px;
  margin-top: -120px;   /* overlaps space between sections */
  margin-bottom: -60px; /* keeps rhythm */
  overflow: hidden;
  pointer-events: none;
}
#midwm::before{
  content:"";
  position:absolute;
  inset: -120px 0 -120px 0;
  background-image: url("../container1.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1100px auto;
  opacity: 0.06;
  filter: grayscale(100%) contrast(1.05);
}
@media (max-width: 1024px){
  #midwm{ display:none; }
}
/* D107_END */

/* D108_START */
/* Mid watermark: dedicated spacer, smaller container, no overlap */
#midwm{
  position: relative;
  height: 160px;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
}

#midwm::before{
  content:"";
  position:absolute;
  inset: 0;
  background-image: url("../container1.png");
  background-repeat: no-repeat;
  background-position: center 55%;
  background-size: 760px auto;
  opacity: 0.045;
  filter: grayscale(100%) contrast(1.05);
}

@media (max-width: 1024px){
  #midwm{ display:none; }
}
/* D108_END */



/* DT114_SAFE_QUOTE_MODAL_START */
/* Quote modal — lightweight, no layout shift */
.quote-modal{
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.quote-modal.is-open{
  opacity: 1;
  pointer-events: auto;
}
.quote-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.32);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.quote-modal__dialog{
  position: relative;
  width: min(820px, calc(100vw - 32px));
  max-height: min(84vh, 760px);
  overflow: auto;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 40px 120px rgba(0,0,0,.22);
  padding: 18px 18px 16px;
}
.quote-modal__close{
  position: absolute;
  right: 10px;
  top: 8px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.82);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}
.quote-modal__close:hover{ background: rgba(0,0,0,.04); }

.quote-modal__head h2::before{ display:none; } /* keep modal clean */
.quote-modal__hint{ margin-top: 10px; max-width: 70ch; }

.quote-grid{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
.quote-field{
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.quote-field span{
  font-size: 12px;
  color: rgba(29,29,27,.70);
  letter-spacing: .02em;
}
.quote-field--full{ margin-top: 12px; }
.quote-textarea{ resize: vertical; min-height: 92px; }

.quote-modal__actions{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
}
.quote-modal__note{ margin-left: auto; }

@media (max-width: 720px){
  .quote-grid{ grid-template-columns: 1fr; }
  .quote-modal__note{ width:100%; margin-left: 0; }
}

/* Lock scroll when modal open */
.no-scroll{ overflow: hidden !important; }
/* Privacy note under form submit */
.quote-modal__privacy{
  margin-top: 10px;
  font-size: 11px;
  color: rgba(29,29,27,.48);
  line-height: 1.4;
}
.quote-modal__privacy a{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* DT114_SAFE_QUOTE_MODAL_END */


/* =========================
   DT122_SAFE_CSS_RESTORE
   Restore missing shared UI primitives and Services page (svc-*) styles
   ========================= */

.card{
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  padding: 22px;
  box-shadow: var(--shadow-1);
}
@media (max-width: 820px){
  .card{ padding: 18px; }
}

/* Small utility chips used across pages */
.tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: rgba(255,255,255,.72);
  color: rgba(29,29,27,.72);
  font-size: 12px;
  letter-spacing: .02em;
  white-space: nowrap;
}
.tag .dot{
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--etl-red);
  box-shadow: 0 0 0 4px rgba(229,38,41,.10);
}

/* Bulleted list (compact, clean) */
.bul{
  margin: 12px 0 0;
  padding-left: 18px;
  color: rgba(29,29,27,.78);
}
.bul li{ margin: 6px 0; }

/* =========================
   Services page layout
   ========================= */
.svc-grid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 980px){
  .svc-grid{ grid-template-columns: 1fr; }
}

.svc-card{
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  padding: 20px;
  box-shadow: var(--shadow-1);
  position: relative;
  overflow:hidden;
}
.svc-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.svc-ico{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(229,38,41,.08);
  border: 1px solid rgba(229,38,41,.16);
  color: var(--etl-red);
  flex: 0 0 auto;
}
.svc-ico i{ font-size: 20px; line-height: 1; }

.svc-title{
  font-weight: 800;
  font-size: 18px;
  letter-spacing: .02em;
  margin-top: 2px;
}
.svc-desc{
  margin-top: 8px;
  color: rgba(29,29,27,.76);
  max-width: 72ch;
}
.svc-actions{
  margin-top: 14px;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}

/* Segmented filter (services) — ensure it looks like pills everywhere */
.seg{
  margin-top: 14px;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}
.seg-btn{
  appearance:none;
  border: 1px solid var(--border-soft);
  background: rgba(255,255,255,.70);
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  color: rgba(29,29,27,.78);
  cursor:pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.seg-btn[aria-pressed="true"]{
  border-color: rgba(229,38,41,.25);
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  color: rgba(29,29,27,.92);
}
.seg-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(229,38,41,.18);
}


/* === DT123_SAFE_RESTORE_ALL_PAGES :: BEGIN === */
:root{
  --etl-bg:#ffffff;
  --etl-card:#ffffff;
  --etl-border:rgba(0,0,0,.08);
  --etl-shadow:0 8px 26px rgba(0,0,0,.06);
  --etl-radius:18px;
}

/* generic section layout helpers */
.section-block{margin:28px 0;padding:22px;border:1px solid var(--etl-border);border-radius:var(--etl-radius);background:var(--etl-card);box-shadow:var(--etl-shadow);}
.section-block h2,.section-block h3{margin-top:0}
.muted{opacity:.72}

/* cards / grids used across pages */
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width: 900px){
  .grid-2,.grid-3{grid-template-columns:1fr}
}

.card{border:1px solid var(--etl-border);border-radius:var(--etl-radius);background:var(--etl-card);box-shadow:var(--etl-shadow);padding:18px}
.card-title{font-weight:700;margin:0 0 8px}

/* PRICING: examples */
.examples-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
@media (max-width: 900px){.examples-grid{grid-template-columns:1fr}}
.example-card,.ex2{border:1px solid var(--etl-border);border-radius:var(--etl-radius);background:var(--etl-card);box-shadow:var(--etl-shadow);padding:18px}
.example-card h3,.ex2 h3{margin:0 0 8px}
.example-meta{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:10px;opacity:.75;font-size:14px}

/* DOCUMENTS: templates list */
.docs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
@media (max-width: 900px){.docs-grid{grid-template-columns:1fr}}
.doc-item{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--etl-border);border-radius:var(--etl-radius);background:var(--etl-card);box-shadow:var(--etl-shadow);padding:16px}
.doc-ico{width:38px;height:38px;border-radius:12px;border:1px solid rgba(255,0,0,.25);background:rgba(255,0,0,.06);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.doc-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.badge{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--etl-border);border-radius:999px;padding:4px 10px;font-size:12px;opacity:.8;background:#fff}

/* ABOUT/WHY: facts */
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
@media (max-width: 900px){.facts{grid-template-columns:1fr}}
.fact{border:1px solid var(--etl-border);border-radius:var(--etl-radius);background:var(--etl-card);box-shadow:var(--etl-shadow);padding:16px}
.fact b{display:block;margin-bottom:6px}

/* list polishing */
.bul{margin:10px 0 0;padding-left:18px}
.bul li{margin:6px 0}

/* tabs / pills */
.pills{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 14px}
.pill{border:1px solid var(--etl-border);border-radius:999px;padding:7px 12px;font-size:14px;background:#fff;cursor:pointer}
.pill.is-active{border-color:rgba(255,0,0,.35);background:rgba(255,0,0,.06)}

/* === DT123_SAFE_RESTORE_ALL_PAGES :: END === */



/* ==== DT161_SAFE_NAVBAR_RESTYLE (desktop + dropdown + mobile) ==== */
.navbar.etl-nav{
  position: sticky;
  top: 0;
  z-index: 120;
}

/* Logo block */
.etl-nav .logo{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.etl-nav .logo-img{
  height: 34px;
  width: auto;
  flex: 0 0 auto;
  display: block;
}
.etl-nav .logo-text{
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.02;
  font-size: 12px;
  color: rgba(29,29,27,.86);
}
@media (max-width: 980px){
  .etl-nav .logo-text{ display:none; }
  .etl-nav .logo-img{ height: 32px; }
}

/* Menu links */
.etl-nav .nav-menu{
  display:flex;
  align-items:center;
  gap: 18px;
}
.etl-nav .nav-link{
  font-weight: 600;
  color: rgba(29,29,27,.74);
  text-decoration: none;
  padding: 8px 8px;
  border-radius: 10px;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.etl-nav .nav-link:hover{
  color: var(--etl-black);
  background: rgba(0,0,0,.04);
}
.etl-nav .nav-link.is-current{
  color: var(--etl-black);
}
.etl-nav .nav-link.is-current::after{
  transform: scaleX(1);
}

/* Actions */
.etl-nav .nav-actions{
  display:flex;
  align-items:center;
  gap: 10px;
}
.etl-nav .nav-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 700;
  text-decoration:none;
  white-space: nowrap;
}
.etl-nav .nav-btn-primary{
  color: #fff;
  background: var(--etl-red);
  box-shadow: 0 10px 26px rgba(219, 37, 45, .22);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease);
}
.etl-nav .nav-btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(219, 37, 45, .28);
  filter: saturate(1.04);
}
.etl-nav .nav-btn-ghost{
  color: rgba(29,29,27,.78);
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.08);
}
.etl-nav .nav-btn-ghost[aria-disabled="true"]{
  opacity:.55;
  pointer-events:none;
}

/* Dropdown */
.etl-nav .nav-dropdown{
  position: relative;
}
.etl-nav .nav-dropdown-trigger{
  cursor: pointer;
  border: 0;
  background: transparent;
  font: inherit;
}
.etl-nav .nav-dropdown-trigger .nav-dd-chevron{
  display:inline-block;
  width: 10px; height: 10px;
  margin-left: 6px;
  border-right: 2px solid rgba(29,29,27,.48);
  border-bottom: 2px solid rgba(29,29,27,.48);
  transform: rotate(45deg) translateY(-1px);
  transition: transform .18s var(--ease);
}
.etl-nav .nav-dropdown.is-open .nav-dd-chevron{
  transform: rotate(225deg) translateY(1px);
}

.etl-nav .nav-dropdown-menu{
  position: absolute;
  top: calc(100% + 10px);
  left: -6px;
  min-width: 320px;
  padding: 10px;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.12);
  display: none;
}
.etl-nav .nav-dropdown.is-open .nav-dropdown-menu{ display:block; }

.etl-nav .nav-dd-item{
  display:block;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: rgba(29,29,27,.86);
  transition: background .16s var(--ease), transform .16s var(--ease);
}
.etl-nav .nav-dd-item:hover{
  background: rgba(0,0,0,.04);
  transform: translateY(-1px);
}
.etl-nav .nav-dd-item .tt{
  display:block;
  font-weight: 800;
  letter-spacing: .01em;
}
.etl-nav .nav-dd-item .dd{
  display:block;
  font-size: 12px;
  color: rgba(29,29,27,.62);
  margin-top: 2px;
}
.etl-nav .nav-dd-item.is-current{
  background: rgba(219, 37, 45, .08);
  border: 1px solid rgba(219, 37, 45, .18);
}
.etl-nav .nav-dd-item.is-current .tt{ color: var(--etl-black); }

/* Mobile toggle */
.etl-nav .nav-toggle{
  display:none;
  width: 42px; height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  align-items:center;
  justify-content:center;
  gap: 5px;
}
.etl-nav .nav-toggle span{
  display:block;
  width: 18px;
  height: 2px;
  background: rgba(29,29,27,.82);
  border-radius: 2px;
}

/* Mobile nav drawer */
.mobile-nav{
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
}
.mobile-nav.is-open{ display:block; }
.mobile-nav__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.35);
}
.mobile-nav__panel{
  position:absolute;
  top: 0; right: 0;
  width: min(420px, 92vw);
  height: 100%;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-left: 1px solid rgba(0,0,0,.08);
  box-shadow: -30px 0 80px rgba(0,0,0,.18);
  transform: translateX(12px);
  opacity: 0;
  transition: transform .18s var(--ease), opacity .18s var(--ease);
}
.mobile-nav.is-open .mobile-nav__panel{
  transform: translateX(0);
  opacity: 1;
}
.mobile-nav__head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 18px 18px 12px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.mobile-nav__title{
  font-family: "Bowler", "Instrument Sans", "Roboto", system-ui;
  font-weight: 800;
  letter-spacing:.02em;
}
.mobile-nav__close{
  width: 40px; height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.7);
}
.mobile-nav__list{
  padding: 14px 18px 18px;
  display:flex;
  flex-direction: column;
  gap: 6px;
}
.mobile-nav__list a,
.mobile-nav__list button{
  width: 100%;
  text-align:left;
  border: 0;
  background: transparent;
  font: inherit;
  padding: 12px 12px;
  border-radius: 12px;
  color: rgba(29,29,27,.86);
  text-decoration:none;
}
.mobile-nav__list a:hover,
.mobile-nav__list button:hover{
  background: rgba(0,0,0,.04);
}
.mobile-nav__section{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,.06);
}
.mobile-nav__cta{
  display:flex;
  gap: 10px;
  padding: 0 18px 18px;
}
.mobile-nav__cta a{ flex: 1; }

/* Responsive behavior */
@media (max-width: 980px){
  .etl-nav .nav-menu{ display:none; }
  .etl-nav .nav-actions{ display:none; }
  .etl-nav .nav-toggle{ display:flex; flex-direction: column; }
}


html.mnav-lock, body.mnav-lock{ overflow: hidden; }

/* =========================================================
   DT216: BRANDBOOK OVERRIDES
   White body + dark header + red primary buttons
   ========================================================= */

body{
  background: var(--bg-body);
  color: var(--text-main);
  font-family: var(--font-body);
}

/* Typography fix (Bowler headings) */
h1,h2,h3{
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Dark header (navbar) */
.navbar,
.etl-nav,
.etl-nav .navbar{
  background: var(--bg-dark);
  color: var(--text-inverse);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Links in header */
.navbar a{
  color: rgba(255,255,255,0.80);
}
.navbar a:hover{
  color: #ffffff;
}

/* Primary buttons */
.btn-primary,
a.btn-primary,
button.btn-primary{
  background: var(--etl-red);
  color: #ffffff;
  border-radius: var(--radius-btn);
}
.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover{
  background: var(--etl-red-dark);
}

/* =========================================================
   DT217: HEADER + HERO (Brandbook)
   White body + dark header + premium hero
   ========================================================= */

.p-header{
  position: sticky;
  top: 0;
  z-index: 999;
  height: var(--header-height);
  background: var(--bg-dark);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.p-nav{
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.p-logo img{ display:block; height:42px; width:auto; }

.p-actions{ display:flex; align-items:center; gap:12px; }

.p-menu-desktop{ display:none; }
@media (min-width: 1100px){
  .p-menu-desktop{ display:block; }
}

.p-menu-list{
  display:flex;
  align-items:center;
  gap: 28px;
  margin:0;
  padding:0;
  list-style:none;
}

.p-link{
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.78);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration:none;
  transition: color .2s ease;
}

.p-link:hover{ color:#fff; }

.p-btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: var(--etl-red);
  color: var(--text-inverse);
  font-weight: 700;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: var(--radius-btn);
  text-decoration:none;
  transition: background .2s ease, transform .2s ease;
  white-space: nowrap;
}
.p-btn-primary:hover{
  background: var(--etl-red-dark);
  transform: translateY(-1px);
}

.p-btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: transparent;
  color: rgba(255,255,255,0.90);
  font-weight: 700;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: var(--radius-btn);
  text-decoration:none;
  border: 1px solid rgba(255,255,255,0.18);
  transition: border-color .2s ease, background .2s ease;
  white-space: nowrap;
}
.p-btn-ghost:hover{
  border-color: rgba(255,255,255,0.32);
  background: rgba(255,255,255,0.06);
}

/* HERO */
.hero-premium{
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: stretch;
  color: #fff;
  background: var(--bg-dark);
  overflow: hidden;
}

.hero-bg{
  position:absolute;
  inset:0;
  z-index:1;
  opacity: 0.25;
  filter: saturate(0) contrast(1.1);
}
.hero-bg img{
  width:100%;
  height:100%;
  object-fit: cover;
}

.hero-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  background:
    linear-gradient(90deg, rgba(29,29,27,0.92) 0%, rgba(29,29,27,0.70) 55%, rgba(29,29,27,0.55) 100%),
    linear-gradient(135deg, rgba(229,38,41,0.20) 0%, rgba(229,38,41,0.00) 55%);
}

.hero-grid{
  position: relative;
  z-index:3;
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 24px;
  align-items: center;
  padding: 48px 0;
}

@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; padding: 42px 0; }
  .hero-visual{ display:none; }
}

.hero-tag{
  display:inline-block;
  color: var(--etl-red);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-size: 12px;
  margin-bottom: 18px;
  border: 1px solid rgba(229,38,41,0.35);
  padding: 6px 10px;
  border-radius: 4px;
}

.hero-premium h1{
  margin: 0 0 18px;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 0.95;
  font-weight: 400;
  font-size: clamp(36px, 4.6vw, 64px);
}

.hero-accent{ color: #fff; }
.hero-accent::after{
  content:"";
  display:block;
  margin-top: 10px;
  width: 120px;
  height: 6px;
  background: var(--etl-red);
  border-radius: 999px;
}

.hero-subtitle{
  margin: 0 0 28px;
  font-size: 18px;
  color: rgba(255,255,255,0.76);
  line-height: 1.6;
  max-width: 62ch;
}

.hero-actions{ display:flex; gap: 14px; flex-wrap: wrap; }

.hero-visual{
  display:flex;
  justify-content:flex-end;
  align-items:center;
}

.hero-truck{
  width: min(520px, 40vw);
  max-width: 100%;
  height: auto;
  opacity: 0.95;
  filter: drop-shadow(0 24px 42px rgba(0,0,0,0.45));
}

/* =========================================================
   DT221: CLEAN NO-HOTFIX + HERO TRUCK + KPI CARDS
   - hotfix.css is no longer required
   - show tractor+trailer hero (container.png)
   - lighter hero background
   - premium KPI cards
   ========================================================= */

/* --- HERO: show the truck scene, hide legacy hero-visual --- */
.hero-scene{ display:block; }
.hero-truck{ display:block; }
.hero-visual{ display:none !important; }

/* Slightly lighter, more premium hero surface */
.hero-bg{
  background:
    radial-gradient(1000px 520px at 20% 30%, rgba(229,38,41,0.10), transparent 60%),
    radial-gradient(900px 480px at 70% 70%, rgba(29,29,27,0.16), transparent 55%),
    linear-gradient(180deg, rgba(29,29,27,0.06), rgba(29,29,27,0.02));
}

/* Make the truck feel like a watermark, but still visible */
.hero-truck{
  opacity: 0.22;
  filter: grayscale(0.10) drop-shadow(0 22px 36px rgba(0,0,0,.22));
}

/* If something else forces it hidden, we win */
.hero-scene,
.hero-truck{ visibility: visible !important; }

/* --- KPI / STATS: premium cards --- */
.stats-section{
  padding: 22px 0 42px;
  background: #fff;
}

.stats-grid{
  gap: 18px;
}

.stat-card{
  position: relative;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(250,250,250,0.92));
  border: 1px solid rgba(29,29,27,0.08);
  box-shadow: 0 14px 38px rgba(0,0,0,0.08);
  padding: 16px 18px;
  overflow: hidden;
}

.stat-card::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 4px;
  width: 100%;
  background: linear-gradient(90deg, rgba(229,38,41,0.90), rgba(229,38,41,0.10));
}

.stat-number{
  font-family: "JetBrains Mono", "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  letter-spacing: -0.02em;
}

.stat-label{
  color: rgba(29,29,27,0.72);
}

/* Slight hover for premium feel */
.stat-card:hover{
  transform: translateY(-2px);
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 18px 48px rgba(0,0,0,0.11);
}

@media (max-width: 900px){
  .stats-section{ padding: 16px 0 32px; }
  .stat-card{ border-radius: 14px; }
}

/* =========================================================
   DT223: MERGED hotfix.css
   (hotfix.css content merged here; keep hotfix.css unused)
   ========================================================= */

/* HOTFIX (DT110) — hero alignment + mid watermark
   Loaded AFTER style.css. Only overrides, no redesign.
*/

/* Container padding — stable */
html body .container,
html body main .container,
html body section > .container,
html body .section-light > .container,
html body .section-muted > .container{
  padding-left: 32px !important;
  padding-right: 32px !important;
}
@media (max-width: 980px){
  html body .container,
  html body main .container,
  html body section > .container,
  html body .section-light > .container,
  html body .section-muted > .container{
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}
@media (max-width: 560px){
  html body .container,
  html body main .container,
  html body section > .container,
  html body .section-light > .container,
  html body .section-muted > .container{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Global: prevent sideways drift */
html, body{ overflow-x: hidden; }

/* ===== HERO: stop clipping / remove duplicate layer =====
   HTML has TWO images in hero:
   - .hero-scene img.hero-truck (currently also container.png)
   - .hero-visual img.container-img (visible block)
   Hide scene image to avoid duplicates/cropping.
*/
.hero-scene,
.hero-truck{
  display: none !important;
}

/* Some old blocks in style.css hide hero-visual completely. Force it back on. */
.hero-visual{
  visibility: visible !important;
  height: auto !important;
  overflow: visible !important;
}

/* Controls: move the visible hero image here */
:root{
  --hero-img-x: 0px;
  --hero-img-y: -10px;
  --hero-img-scale: 1.06;
}
.hero-visual .container-img{
  transform:
    translateX(var(--hero-img-x))
    translateY(var(--hero-img-y))
    scale(var(--hero-img-scale)) !important;
  transform-origin: top center !important;
  width: 120% !important;
  max-width: 860px !important;
  height: auto !important;
}

/* Give hero more breathing room */
.hero-section{ padding-bottom: 44px !important; overflow: hidden !important; }

@media (max-width: 980px){
  :root{
    --hero-img-x: 0px;
    --hero-img-y: -60px;
    --hero-img-scale: 1.02;
  }
  .hero-visual .container-img{
    width: 108% !important;
    max-width: 720px !important;
  }
  .hero-section{ padding-bottom: 36px !important; }
}

/* ===== MID WATERMARK: between OPS and Services ===== */
#midwm{
  display: block !important;
  position: relative;
  height: 160px !important;
  margin: 0 !important;
  overflow: hidden !important;
  pointer-events: none;
}
#midwm{ display: none !important; }

@media (max-width: 1024px){
  #midwm{ display:none !important; }
}
/* DT111_SAFE — Vertical rhythm (sections) */
/* Цель: единый “воздух” у секций + аккуратные отступы вокруг заголовков */

:root{
  --sec-y: 72px;         /* вертикальный паддинг секций (desktop) */
  --sec-y-md: 62px;      /* tablet */
  --sec-y-sm: 54px;      /* mobile */
  --head-gap: 14px;      /* расстояние от h2 до описания/контента */
  --grid-gap-top: 22px;  /* отступ сетки карточек после заголовка */
}

/* 1) Унифицируем секции */
.section-light,
.section-muted{
  padding-top: var(--sec-y) !important;
  padding-bottom: var(--sec-y) !important;
}

/* 2) Одинаковая “шапка” секций: h2 + абзац */
.section-light h2,
.section-muted h2{
  margin-bottom: 10px !important;
}

.section-light h2 + p,
.section-muted h2 + p{
  margin-top: 0 !important;
  margin-bottom: var(--head-gap) !important;
}

/* 3) Сетка карточек всегда на одинаковом расстоянии от заголовка */
.section-light .bento-grid,
.section-muted .bento-grid{
  margin-top: var(--grid-gap-top) !important;
}

/* 4) Спец-случаи: OPS / SERVICES / TRUST / PROCESS — только отступы */
#ops.section-light,
#services.section-light{
  padding-top: calc(var(--sec-y) - 6px) !important;
  padding-bottom: var(--sec-y) !important;
}

.trust-section.section-light,
.process-section.section-light{
  padding-top: var(--sec-y) !important;
  padding-bottom: var(--sec-y) !important;
}

/* 5) Блок KPI (stats) — чтобы не был “ни рыба ни мясо” между hero и секцией */
.stats-section{
  padding-top: 22px !important;
  padding-bottom: 22px !important;
}

/* 6) Адаптив: уменьшаем воздух одинаково везде */
@media (max-width: 980px){
  .section-light,
  .section-muted{
    padding-top: var(--sec-y-md) !important;
    padding-bottom: var(--sec-y-md) !important;
  }
  .stats-section{
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }
}

@media (max-width: 560px){
  .section-light,
  .section-muted{
    padding-top: var(--sec-y-sm) !important;
    padding-bottom: var(--sec-y-sm) !important;
  }
}

/* DT116_SAFE_MOBILE_POLISH_START */
/* Mobile polish: tighter rhythm + CTA readability + prevent hero truck overlap */
@media (max-width: 520px){

  /* Layout rhythm */
  .container{ padding-left: 16px !important; padding-right: 16px !important; }
  .section-light, .section-muted{ padding: 46px 0 !important; }

  /* Navbar */
  .navbar{ padding: 10px 14px !important; }

  /* Hero: keep text + buttons readable on small screens */
  .hero-section{
    padding: 28px 0 18px !important;
  }
  .hero-inner{ gap: 18px !important; }

  .hero-actions{
    margin-top: 14px !important;
    flex-direction: column;
    align-items: stretch;
  }
  .hero-actions .btn-primary,
  .hero-actions .btn-outline{
    width: 100%;
  }

  /* Truck scene: move further right so it doesn't sit on the CTA */
  .hero-scene .hero-truck{
    right: -34% !important;
    bottom: -6px !important;
    width: min(540px, 128vw) !important;
  }

  /* If any legacy hero visual is still present — keep hidden */
  .hero-visual{ display:none !important; }

  /* KPI cards: fit 2x2 */
  .stats-grid{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 12px !important;
  }
  .stat-card{ padding: 12px 12px !important; }
  .stat-number{ font-size: 22px !important; }

  /* Cards */
  .bento-grid{ grid-template-columns: 1fr !important; gap: 14px !important; }
  .bento-card{ padding: 16px !important; }

  /* Trust logos: 2 columns, tighter */
  .trust-logos{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .trust-logos .logo-tile{ height: 58px !important; }
  .trust-logos .logo-tile img{ max-height: 36px !important; }
}
/* DT116_SAFE_MOBILE_POLISH_END */

/* DT117_SAFE_MOBILE_MENU_START */
/* Hamburger button (mobile only) */
.nav-toggle{
  display:none;
  width: 44px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.72);
  align-items:center;
  justify-content:center;
  gap: 4px;
  padding: 10px;
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  width: 18px;
  height: 2px;
  background: rgba(29,29,27,.78);
  border-radius: 999px;
}
@media (max-width: 980px){
  .nav-toggle{ display:inline-flex; }
}

/* Drawer */
.mobile-nav{
  position: fixed;
  inset: 0;
  z-index: 999;
  display:none;
}
.mobile-nav.is-open{ display:block; }
.mobile-nav__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.32);
  backdrop-filter: blur(2px);
}
.mobile-nav__panel{
  position:absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  width: min(560px, calc(100vw - 24px));
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.92);
  box-shadow: 0 22px 70px rgba(0,0,0,.18);
  overflow:hidden;
}
.mobile-nav__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.mobile-nav__title{
  font-weight: 800;
  letter-spacing: .02em;
}
.mobile-nav__close{
  width: 40px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.70);
  cursor:pointer;
}
.mobile-nav__body{
  padding: 10px 14px 12px;
}
.mobile-nav__links{
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.mobile-nav__link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height: 44px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.70);
  color: rgba(29,29,27,.86);
}
.mobile-nav__link:hover{
  background: rgba(0,0,0,.03);
}
.mobile-nav__foot{
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(0,0,0,.06);
  display:grid;
  gap: 10px;
}
.mobile-nav__cta, .mobile-nav__cta2{
  width: 100%;
  justify-content:center;
}
html.mnav-lock, html.mnav-lock body{
  overflow:hidden;
  touch-action: none;
}
/* DT117_SAFE_MOBILE_MENU_END */



/* DT120_SAFE_TABS — tabbed nav active state + fade transition */
.nav-menu a.is-active{
  position: relative;
  color: var(--etl-black, #0b0b0b);
  font-weight: 700;
}
.nav-menu a.is-active::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-10px;
  width:22px;
  height:3px;
  border-radius:999px;
  background: var(--etl-red, #e60012);
  opacity:.9;
}

/* Main fade when swapping tab content */
main{ transition: opacity .18s ease; }
main.tab-fade-out{ opacity: 0; }

/* Optional: small cursor feedback while loading (only when custom cursor is NOT active) */
html.tab-loading:not(.etl-cursor-on):not(.etl-magnetic-cursor-on),
html.tab-loading:not(.etl-cursor-on):not(.etl-magnetic-cursor-on) *{ cursor: auto !important; }

/* DT150 — navbar dropdown (Услуги): readable menu + proper layering */
.navbar{ position: sticky; top: 0; z-index: 2000; }
.nav-menu{ position: relative; z-index: 2001; }

.nav-dd{ position: relative; }
.nav-dd-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.nav-dd-caret{ font-size: 12px; opacity: .7; transform: translateY(1px); }

.nav-dd-menu{
  position: absolute;
  top: calc(100% + 12px);
  left: -10px;
  min-width: 260px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 60px rgba(0,0,0,.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}
.nav-dd-menu a{
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  color: #111 !important;
  text-decoration: none;
  font-weight: 600;
}
.nav-dd-menu a:hover{
  background: rgba(0,0,0,.06);
}
.nav-dd:hover .nav-dd-menu,
.nav-dd:focus-within .nav-dd-menu{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* keep dropdown usable on touch: show menu on button focus */
@media (max-width: 980px){
  .nav-dd-menu{
    position: static;
    min-width: unset;
    margin-top: 10px;
    box-shadow: none;
    border: 1px solid rgba(0,0,0,.08);
  }
}

/* DT150 — autotransport page helpers */
.cards-2, .grid-2{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 980px){
  .cards-2, .grid-2{ grid-template-columns: 1fr; }
}
.divider{
  height: 1px;
  background: rgba(0,0,0,.08);
  border-radius: 999px;
}
.ol-steps{
  margin: 0;
  padding-left: 18px;
}
.ol-steps li{ margin: 8px 0; }
.faq details{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  padding: 10px 12px;
  margin: 10px 0;
  background: rgba(255,255,255,.6);
}
.faq summary{
  cursor: pointer;
  font-weight: 700;
}
.faq p{ margin: 10px 0 0 0; color: rgba(0,0,0,.75); }

/* DT152_NAV_DROPDOWN_FIX */
.navbar { z-index: 1000; }
.nav-menu { position: relative; z-index: 1001; }
.nav-menu .nav-dd { position: relative; }
.nav-menu .nav-dd > a.nav-dd-trigger::after{
  content: "▾";
  display: inline-block;
  margin-left: 6px;
  font-size: 12px;
  opacity: .6;
  transform: translateY(-1px);
}
.nav-menu .nav-dd-menu{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 280px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(255,255,255,.94) !important;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 16px 40px rgba(0,0,0,.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #111 !important;
  z-index: 9999;
  display: none;
  opacity: 1 !important;
}
.nav-menu .nav-dd-menu *{ color:#111 !important; opacity: 1 !important; }
.nav-menu .nav-dd-menu a{
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
}
.nav-menu .nav-dd-menu a:hover,
.nav-menu .nav-dd-menu a:focus{
  background: rgba(0,0,0,.05);
}
.nav-menu .nav-dd:hover > .nav-dd-menu,
.nav-menu .nav-dd:focus-within > .nav-dd-menu{
  display: block;
}

/* Make sure dropdown is not hidden by hero overlays */
.hero-section, .hero-bg, .hero-scene { z-index: 0; }

/* DT154_NAV_DROPDOWN_HOVER_INTENT */
.nav-menu .nav-dd { position: relative; }
.nav-menu .nav-dd-menu{
  /* keep menu within hover area; allow cursor travel */
  top: calc(100% + 8px);
}
.nav-menu .nav-dd-menu::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-12px;
  height:12px;
  /* invisible bridge so hover doesn't drop on the gap */
}
.nav-menu .nav-dd.dd-open > .nav-dd-menu{
  display:block;
}

/* ==== DT160 SAFE: Premium dropdown for top nav ("Услуги") ==== */
html body .nav-menu .nav-dropdown { position: relative; }

/* Trigger */
html body .nav-menu .nav-dropdown-trigger{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  padding-right: 18px; /* room for caret */
}
html body .nav-menu .nav-dropdown-trigger::after{
  content:"";
  width: 10px; height: 10px;
  display: inline-block;
  margin-left: 4px;
  border-right: 2px solid rgba(0,0,0,.55);
  border-bottom: 2px solid rgba(0,0,0,.55);
  transform: rotate(45deg) translateY(-1px);
  border-radius: 1px;
  opacity: .85;
}

/* Menu shell */
html body .nav-dropdown-menu{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 320px;
  max-width: 420px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(10,12,16,.10);
  box-shadow: 0 18px 50px rgba(12,16,22,.14), 0 4px 14px rgba(12,16,22,.08);
  z-index: 9999;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

/* Invisible hover bridge (so it doesn't close while moving cursor) */
html body .nav-dropdown::before{
  content:"";
  position:absolute;
  left:-10px; right:-10px;
  top:100%;
  height: 14px;
}

/* Open state */
html body .nav-dropdown.is-open .nav-dropdown-menu,
html body .nav-dropdown:hover .nav-dropdown-menu{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Items */
html body .nav-dropdown-menu .nav-dd-item{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 12px;
  color: rgba(18,22,28,.92);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .01em;
  background: transparent !important;
  transition: background .14s ease, transform .14s ease;
  position: relative;
}
html body .nav-dropdown-menu .nav-dd-item:hover{
  background: rgba(12,16,22,.04) !important;
  transform: translateY(-1px);
}
html body .nav-dropdown-menu .nav-dd-item:active{
  transform: translateY(0);
}

/* Separator */
html body .nav-dropdown-menu .nav-dd-sep{
  height: 1px;
  margin: 6px 6px;
  background: rgba(10,12,16,.10);
}

/* Current item */
html body .nav-dropdown-menu .nav-dd-item.is-current{
  background: rgba(220,0,0,.08) !important;
  color: rgba(12,16,22,.96);
}
html body .nav-dropdown-menu .nav-dd-item.is-current::before{
  content:"";
  position:absolute;
  left: 10px;
  width: 6px; height: 6px;
  border-radius: 99px;
  background: #d10000;
  box-shadow: 0 0 0 3px rgba(209,0,0,.12);
}
html body .nav-dropdown-menu .nav-dd-item.is-current{
  padding-left: 24px;
}

/* Make sure other site styles don't paint grey pills */
html body .nav-dropdown-menu a,
html body .nav-dropdown-menu a *{
  filter: none !important;
}

/* Mobile: keep dropdown menu hidden (mobile nav handles navigation separately) */
@media (max-width: 980px){
  html body .nav-menu .nav-dropdown-menu{ display:none !important; }
  html body .nav-menu .nav-dropdown-trigger::after{ display:none; }
}
/* ==== /DT160 ==== */

/* DT162_SAFE_NAV_DROPDOWN_PREMIUM_ANIM: start */
:root{
  --etl-dd-bg: rgba(255,255,255,.92);
  --etl-dd-border: rgba(15,23,42,.10);
  --etl-dd-shadow: 0 22px 50px rgba(2,6,23,.18), 0 8px 18px rgba(2,6,23,.10);
  --etl-dd-text: #0f172a;
  --etl-dd-muted: rgba(15,23,42,.70);
  --etl-dd-hover: rgba(15,23,42,.04);
  --etl-dd-accent: #e21c23;
}
.etl-nav-dd{ position: relative; }
.etl-nav-dd > a{ display:inline-flex; align-items:center; gap:8px; }
.etl-nav-dd .etl-dd-caret{
  width:10px; height:10px; display:inline-block;
  border-right:2px solid rgba(15,23,42,.55);
  border-bottom:2px solid rgba(15,23,42,.55);
  transform: rotate(45deg) translateY(-1px);
  transition: transform .18s ease, border-color .18s ease;
}
.etl-nav-dd.is-open .etl-dd-caret{ transform: rotate(225deg) translateY(1px); border-color: rgba(15,23,42,.75); }

.etl-dd-panel{
  position:absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 300px;
  padding: 10px;
  border-radius: 16px;
  background: var(--etl-dd-bg);
  border: 1px solid var(--etl-dd-border);
  box-shadow: var(--etl-dd-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 9999;
  transform-origin: top left;
  opacity: 0;
  transform: translateY(-6px) scale(.98);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.etl-nav-dd.is-open .etl-dd-panel{
  opacity:1;
  transform: translateY(0) scale(1);
  pointer-events:auto;
}
.etl-dd-bridge{
  position:absolute;
  top: 100%;
  left: 0;
  height: 14px;
  width: 100%;
  pointer-events: auto;
}
.etl-dd-list{ position:relative; margin:0; padding:0; list-style:none; }
.etl-dd-item{
  position: relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--etl-dd-text);
  text-decoration:none;
  font-weight:600;
  letter-spacing:.1px;
  transition: background .18s ease, color .18s ease;
}
.etl-dd-item .etl-dd-sub{
  display:block;
  font-weight:500;
  font-size:12px;
  color: var(--etl-dd-muted);
  margin-top:2px;
}
.etl-dd-item:hover{ background: var(--etl-dd-hover); }
.etl-dd-item.is-active{
  box-shadow: inset 0 0 0 1px rgba(226,28,35,.35);
}
.etl-dd-item.is-active::after{
  content:"";
  position:absolute; inset:0;
  border-radius:12px;
  box-shadow: inset 0 0 0 2px rgba(226,28,35,.22);
  pointer-events:none;
  opacity:.9;
}
.etl-dd-highlight{
  position:absolute;
  left:0;
  top:0;
  height:44px;
  width:100%;
  border-radius:12px;
  background: rgba(15,23,42,.03);
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.06);
  transition: transform .22s cubic-bezier(.2,.9,.2,1), height .22s cubic-bezier(.2,.9,.2,1), opacity .18s ease;
  opacity:0;
  pointer-events:none;
}
.etl-dd-panel.is-armed .etl-dd-highlight{ opacity:1; }
.services-dropdown, .nav-dropdown, .dropdown-menu { background: initial; }
@media (max-width: 900px){
  .etl-dd-panel{ display:none !important; }
}
/* DT162_SAFE_NAV_DROPDOWN_PREMIUM_ANIM: end */


/* DT164_SAFE_NAV_DROPDOWN_DEDUP_PREMIUM: SERVICES_DROPDOWN_PREMIUM */
/* Premium dropdown (clean white/glass, no dirty grays) */
.nav-menu .has-services-dropdown { position: relative; }
.nav-menu .has-services-dropdown > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nav-menu .etl-services-caret {
  width: 12px;
  height: 12px;
  display: inline-block;
  opacity: .7;
  transform: translateY(1px);
  transition: transform .18s ease, opacity .18s ease;
}
.nav-menu .has-services-dropdown.is-open .etl-services-caret {
  transform: translateY(1px) rotate(180deg);
  opacity: .95;
}

.etl-services-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 320px;
  padding: 10px;
  border-radius: 18px;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 26px 70px rgba(0,0,0,.14);
  opacity: 0;
  pointer-events: none;
  transform-origin: top center;
  transform: translateX(-50%) translateY(-6px) scale(.98);
  transition: opacity .18s ease, transform .18s ease;
  z-index: 2000;
}

.has-services-dropdown.is-open .etl-services-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}

.etl-services-dropdown .etl-dd-inner {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
}

.etl-services-dropdown .etl-dd-hl {
  position: absolute;
  left: 6px;
  right: 6px;
  top: 6px;
  height: 44px;
  border-radius: 12px;
  background: rgba(227,27,35,.06);
  border: 1px solid rgba(227,27,35,.22);
  box-shadow: 0 8px 22px rgba(227,27,35,.10);
  transform: translateY(0);
  transition: transform .22s cubic-bezier(.2,.8,.2,1), height .22s cubic-bezier(.2,.8,.2,1), opacity .18s ease;
  opacity: 0;
  pointer-events: none;
}

.etl-services-dropdown .etl-dd-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  color: #111;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .1px;
  line-height: 1.2;
  transition: color .18s ease;
  user-select: none;
}

.etl-services-dropdown .etl-dd-item small {
  display: block;
  font-weight: 500;
  opacity: .72;
  margin-top: 2px;
}

.etl-services-dropdown .etl-dd-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(227,27,35,.18);
}

.etl-services-dropdown .etl-dd-item.is-active {
  color: #000;
}

.etl-services-dropdown .etl-dd-item .etl-dd-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(227,27,35,.85);
  box-shadow: 0 6px 16px rgba(227,27,35,.22);
}

.etl-services-dropdown .etl-dd-divider {
  height: 1px;
  margin: 6px 8px;
  background: rgba(0,0,0,.06);
}

/* Hover-bridge: gives you time to move mouse into dropdown */
.nav-menu .has-services-dropdown::after {
  content: "";
  position: absolute;
  left: -10px;
  right: -10px;
  top: 100%;
  height: 16px;
}
/* ===============================
   TERMINAL NAVBAR (Variant A)
   =============================== */

   .etl-nav {
    position: sticky;
    top: 0;
    z-index: 1000;
  
    height: 64px;
    padding: 0 28px;
  
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: none;
  
    border-bottom: 1px solid #e5e7eb;
    box-shadow: none;
  }
  
  /* логотип */
  .etl-nav .logo img {
    height: 32px;
    width: auto;
  }
  
  /* меню */
  .etl-nav .nav-links {
    display: flex;
    gap: 22px;
    align-items: center;
  }
  
  .etl-nav .nav-links a {
    font-size: 14px;
    font-weight: 500;
    color: #111;
    padding: 6px 0;
  
    border-bottom: 2px solid transparent;
    border-radius: 0;
  
    transition: border-color .15s ease, color .15s ease;
  }
  
  .etl-nav .nav-links a:hover {
    color: #000;
    border-bottom-color: #e11d2e; /* ETL red */
  }
  
  /* активная страница */
  .etl-nav .nav-links a.active {
    border-bottom-color: #e11d2e;
    font-weight: 600;
  }
  
  /* CTA */
  .etl-nav .nav-cta {
    margin-left: 32px;
  }
  
  .etl-nav .nav-cta .btn {
    height: 36px;
    padding: 0 18px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
  }
  
  /* ===============================
     DROPDOWN = TERMINAL PANEL
     =============================== */
  
  .nav-dropdown-menu {
    border-radius: 0;
    border: 1px solid #e5e7eb;
    box-shadow: 0 12px 32px rgba(0,0,0,.08);
  
    background: #fff;
    padding: 16px 20px;
  
    min-width: 420px;
  }
  
  .nav-dropdown-menu a {
    display: block;
    padding: 8px 0;
  
    font-size: 14px;
    color: #111;
    border-bottom: 1px dashed #eee;
  }
  
  .nav-dropdown-menu a:last-child {
    border-bottom: none;
  }
  
  .nav-dropdown-menu a:hover {
    color: #e11d2e;
  }
  
  /* ===============================
     MOBILE (если нужно)
     =============================== */
  
  @media (max-width: 960px) {
    .etl-nav {
      height: 56px;
      padding: 0 16px;
    }
  }
  /* ===== Terminal dropdown: one column, bigger, no descriptions ===== */

.nav-dropdown-menu{
  min-width: 280px;      /* было слишком “плиткой” */
  max-width: 340px;
  padding: 10px 12px;
  border-radius: 6px;    /* чуть-чуть, но не “пузырь” */
  border: 1px solid #e5e7eb;
  box-shadow: 0 16px 40px rgba(0,0,0,.10);
  background: #fff;
}

.nav-dropdown-menu a{
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 10px 12px;
  margin: 2px 0;

  font-size: 15px;       /* крупнее */
  font-weight: 600;
  color: #111;

  border: 1px solid transparent;
  border-radius: 6px;
  text-decoration: none;
}

.nav-dropdown-menu a:hover{
  border-color: #f1f5f9;
  background: #f8fafc;
  color: #111;
}

/* если внутри ссылки есть подписи/описания — глушим */
.nav-dropdown-menu small,
.nav-dropdown-menu .desc,
.nav-dropdown-menu .muted,
.nav-dropdown-menu .sub,
.nav-dropdown-menu .hint{
  display: none !important;
}
/* ===== Remove dropdown triangles/chevrons ===== */

/* если шеврон сделан через ::after */
.nav-dropdown-trigger::after{
  content: "" !important;
  display: none !important;
}

/* если шеврон — svg или span внутри */
.nav-dropdown-trigger svg,
.nav-dropdown-trigger .chevron,
.nav-dropdown-trigger .caret,
.nav-dropdown-trigger .arrow{
  display: none !important;
}
/* =========================
   TERMINAL NAV DROPDOWN vA
   (override nav_service_down.css)
   ========================= */

/* 1) Убираем pill-стиль у ссылок/кнопок в наве */
.navbar.etl-nav .nav-link{
  border-radius: 6px !important;
  padding: 8px 10px !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* 2) Триггер "Услуги": без стрелок, без доп-икон */
.navbar.etl-nav .nav-dropdown-trigger::after{
  content: "" !important;
  display: none !important;
}
.navbar.etl-nav .nav-dropdown-trigger svg,
.navbar.etl-nav .nav-dropdown-trigger .chevron,
.navbar.etl-nav .nav-dropdown-trigger .caret,
.navbar.etl-nav .nav-dropdown-trigger .arrow{
  display: none !important;
}

/* 3) Меню: одна колонка, крупнее */
.navbar.etl-nav .nav-dropdown-menu{
  min-width: 340px !important;
  max-width: 380px !important;
  padding: 10px 10px !important;

  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.12) !important;
}

/* 4) Пункты меню: крупные, терминальные */
.navbar.etl-nav .nav-dropdown-menu a{
  display: block !important;
  padding: 10px 12px !important;
  margin: 2px 0 !important;

  font-size: 15px !important;
  font-weight: 700 !important;
  color: #111 !important;

  border: 1px solid transparent !important;
  border-radius: 6px !important;
  text-decoration: none !important;
}
.navbar.etl-nav .nav-dropdown-menu a:hover{
  background: #f8fafc !important;
  border-color: #eef2f7 !important;
  color: #111 !important;
}

/* 5) Убираем "описания" и вторую колонку (у тебя это не small, а, скорее всего, div/p/span) */
.navbar.etl-nav .nav-dropdown-menu small,
.navbar.etl-nav .nav-dropdown-menu p,
.navbar.etl-nav .nav-dropdown-menu .desc,
.navbar.etl-nav .nav-dropdown-menu .muted,
.navbar.etl-nav .nav-dropdown-menu .hint,
.navbar.etl-nav .nav-dropdown-menu .sub,
.navbar.etl-nav .nav-dropdown-menu [class*="desc"],
.navbar.etl-nav .nav-dropdown-menu [class*="hint"],
.navbar.etl-nav .nav-dropdown-menu [class*="sub"],
.navbar.etl-nav .nav-dropdown-menu [class*="meta"]{
  display: none !important;
}

/* 6) На случай grid-раскладки: принудительно 1 колонка */
.navbar.etl-nav .nav-dropdown-menu{
  display: block !important;
}
.navbar.etl-nav .nav-dropdown-menu > *{
  display: block !important;
  grid-template-columns: 1fr !important;
}
/* =========================
   TERMINAL DROPDOWN — readable + hover
   ========================= */

/* контейнер */
.navbar.etl-nav .nav-dropdown-menu{
  min-width: 360px !important;
  max-width: 420px !important;
  padding: 12px !important;
}

/* ссылки (пункты меню) */
.navbar.etl-nav .nav-dropdown-menu a{
  display: block !important;
  padding: 12px 14px !important;
  margin: 4px 0 !important;

  font-size: 16px !important;       /* было мелко */
  font-weight: 700 !important;
  line-height: 1.2 !important;

  white-space: normal !important;   /* НЕ обрезать */
  overflow: visible !important;
  text-overflow: initial !important;

  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;

  transition: background .12s ease, border-color .12s ease, color .12s ease, transform .12s ease !important;
}

/* hover: чёткая рамка + лёгкая подложка + красный акцент */
.navbar.etl-nav .nav-dropdown-menu a:hover{
  background: #f8fafc !important;
  border-color: #e5e7eb !important;
  color: #111 !important;
  transform: translateY(-1px) !important;
}

/* активный пункт (если скрипт/страница ставит active/current) */
.navbar.etl-nav .nav-dropdown-menu a.active,
.navbar.etl-nav .nav-dropdown-menu a[aria-current="page"]{
  border-color: #e11d2e !important;
  box-shadow: inset 3px 0 0 #e11d2e !important; /* красный “терминальный” маркер */
}

/* заголовок внутри пункта (если есть span/strong) — делаем крупнее */
.navbar.etl-nav .nav-dropdown-menu a strong,
.navbar.etl-nav .nav-dropdown-menu a .title{
  font-size: 16px !important;
  font-weight: 800 !important;
}

/* описание (вторая строка) — показываем, но компактно и читабельно */
.navbar.etl-nav .nav-dropdown-menu a small,
.navbar.etl-nav .nav-dropdown-menu a .desc,
.navbar.etl-nav .nav-dropdown-menu a .muted{
  display: block !important;
  margin-top: 4px !important;

  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  color: rgba(17,18,22,.72) !important;

  white-space: normal !important;
  overflow: visible !important;
}

/* чтобы описание НЕ “перехватывало” hover клики */
.navbar.etl-nav .nav-dropdown-menu a *{
  pointer-events: none !important;
}
/* =========================
   ETL Terminal Navbar + Dropdown (clean)
   ========================= */

   .navbar.etl-nav{
    position: sticky;
    top: 0;
    z-index: 1000;
    height: 64px;
    background: rgba(255,255,255,.92);
    border-bottom: 1px solid #e7e7ea;
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
    backdrop-filter: saturate(1.2) blur(10px);
  }
  
  .navbar.etl-nav .nav-menu{
    display: flex;
    align-items: center;
    gap: 18px;
  }
  
  .navbar.etl-nav .nav-link{
    appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
  
    color: rgba(17,18,22,.82);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
  
    padding: 10px 12px;
    border-radius: 10px;
    transition: background .12s ease, color .12s ease, box-shadow .12s ease;
  }
  
  .navbar.etl-nav .nav-link:hover{
    background: rgba(17,18,22,.06);
    color: #111;
  }
  
  .navbar.etl-nav .nav-link.active,
  .navbar.etl-nav .nav-link[aria-current="page"]{
    background: rgba(225,29,46,.10);
    box-shadow: inset 0 0 0 1px rgba(225,29,46,.22);
    color: #111;
  }
  
  /* убрать стрелочки/иконки у триггера */
  .navbar.etl-nav .nav-dropdown-trigger::after{ content:none; }
  .navbar.etl-nav .nav-dropdown-trigger svg{ display:none; }
  
  /* dropdown container */
  .navbar.etl-nav .nav-dropdown{
    position: relative;
  }
  
  .navbar.etl-nav .nav-dropdown-menu{
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
  
    display: none;
    min-width: 360px;
    padding: 10px;
  
    background: #fff;
    border: 1px solid rgba(17,18,22,.10);
    border-radius: 14px;
    box-shadow: 0 22px 55px rgba(0,0,0,.14);
  
    overflow: hidden;
  }
  
  /* показать меню когда открыто (скрипт ставит aria-expanded=true на trigger) */
  .navbar.etl-nav .nav-dropdown-trigger[aria-expanded="true"] + .nav-dropdown-menu{
    display: block;
  }
  
  /* items */
  .navbar.etl-nav .nav-dropdown-menu a{
    display: block;
    padding: 12px 12px;
    border-radius: 12px;
    text-decoration: none;
  
    color: #111;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.15;
    transition: background .12s ease, box-shadow .12s ease, transform .12s ease;
  }
  
  .navbar.etl-nav .nav-dropdown-menu a:hover{
    background: rgba(17,18,22,.06);
    box-shadow: inset 0 0 0 1px rgba(17,18,22,.10);
    transform: translateY(-1px);
  }
  
  /* optional description line if present */
  .navbar.etl-nav .nav-dropdown-menu a small,
  .navbar.etl-nav .nav-dropdown-menu a .desc{
    display: block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.25;
    color: rgba(17,18,22,.68);
  }
  
  /* if you want NO descriptions — просто включи эту строку */
  /* .navbar.etl-nav .nav-dropdown-menu a small, .navbar.etl-nav .nav-dropdown-menu a .desc{ display:none; } */
  /* =========================
   DT_NAV_DROPDOWN_A_v2 (REAL .nav-dd-*)
   ========================= */

/* контейнер */
.navbar.etl-nav .nav-item.has-dropdown{
  position: relative;
}

/* прячем шеврон у "Услуги" */
.navbar.etl-nav .nav-dd-chevron{
  display: none !important;
}

/* меню */
.navbar.etl-nav .nav-dd-menu{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 1200;

  display: none;

  width: 420px;
  max-width: min(420px, 92vw);

  padding: 10px;
  background: #fff;
  border: 1px solid rgba(17,18,22,.12);
  border-radius: 14px;
  box-shadow: 0 22px 55px rgba(0,0,0,.14);

  overflow: hidden;

  /* если пунктов много — скролл внутри */
  max-height: min(60vh, 520px);
  overflow: auto;
}

/* открытие: JS ставит is-open на li И/ИЛИ aria-expanded на кнопке */
.navbar.etl-nav .nav-item.has-dropdown.is-open .nav-dd-menu,
.navbar.etl-nav .nav-dd-btn[aria-expanded="true"] + .nav-dd-menu{
  display: block;
}

/* пункты меню */
.navbar.etl-nav .nav-dd-item{
  display: block;
  padding: 12px 14px;

  border-radius: 12px;
  text-decoration: none;

  border: 1px solid transparent;
  background: transparent;

  color: #111;
  line-height: 1.15;

  /* чтобы не было обрезаний */
  white-space: normal;
}

/* заголовок и описание */
.navbar.etl-nav .nav-dd-item .tt{
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: #111;
}

.navbar.etl-nav .nav-dd-item .dd{
  display: block;
  margin-top: 4px;

  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  color: rgba(17,18,22,.66);
}

/* hover/focus */
.navbar.etl-nav .nav-dd-item:hover{
  background: rgba(17,18,22,.06);
  border-color: rgba(17,18,22,.10);
}

.navbar.etl-nav .nav-dd-item:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(225,29,46,.18);
  border-color: rgba(225,29,46,.22);
}

/* active/current */
.navbar.etl-nav .nav-dd-item.is-active,
.navbar.etl-nav .nav-dd-item.is-current{
  background: rgba(225,29,46,.08);
  border-color: rgba(225,29,46,.22);
}

/* мобилка: десктоп меню прячем (если у тебя отдельное мобильное) */
@media (max-width: 980px){
  .navbar.etl-nav .nav-menu{ display: none; }
}

/* DT209_SAFE_HEADER_COLOR_LOGO_FIX — force clean premium header + fix logo aspect */
.navbar.etl-nav{
  background: #0f1216 !important; /* clean graphite */
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.22) !important;
}
.navbar.etl-nav .logo{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 10px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}
.navbar.etl-nav .logo img{
  height: 44px !important;
  width: auto !important;        /* prevent “crumpled” logo */
  max-width: none !important;
  object-fit: contain !important;
  filter: none !important;       /* remove dirty grayscale/filters */
  opacity: 1 !important;
}
/* menu text */
.navbar.etl-nav .nav-links a,
.navbar.etl-nav .nav-links button,
.navbar.etl-nav .nav-item{
  color: rgba(255,255,255,.92) !important;
}
.navbar.etl-nav .nav-links a:hover,
.navbar.etl-nav .nav-links button:hover{
  color: #ffffff !important;
}
/* dropdown: make it premium and readable */
.navbar.etl-nav .nav-dd-menu,
.navbar.etl-nav .dropdown,
.navbar.etl-nav .services-dropdown{
  background: rgba(17,20,26,.94) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.45) !important;
  backdrop-filter: blur(10px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
}
.navbar.etl-nav .nav-dd-menu a,
.navbar.etl-nav .dropdown a,
.navbar.etl-nav .services-dropdown a{
  color: rgba(255,255,255,.90) !important;
}
.navbar.etl-nav .nav-dd-menu a:hover,
.navbar.etl-nav .dropdown a:hover,
.navbar.etl-nav .services-dropdown a:hover{
  background: rgba(255,255,255,.06) !important;
  outline: 1px solid rgba(255,255,255,.14) !important;
}
/* CTA button (if exists) */
.navbar.etl-nav .nav-cta,
.navbar.etl-nav .btn-cta,
.navbar.etl-nav .cta{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #fff !important;
}

/* =========================================================
   DT219: LIGHT HEADER + HERO TRUCK DIM CARDS
   Safe overrides (keeps existing navbar layout)
   ========================================================= */

:root{
  --etl-header-bg: rgba(255,255,255,0.74);
  --etl-header-border: rgba(29,29,27,0.10);
  --etl-card-bg: rgba(255,255,255,0.78);
  --etl-card-border: rgba(29,29,27,0.12);
}

/* Make header light/premium even if older patches forced it dark */
.navbar,
.etl-nav,
.etl-nav.navbar,
.navbar.etl-nav{
  background: var(--etl-header-bg) !important;
  color: rgba(29,29,27,0.92) !important;
  border-bottom: 1px solid var(--etl-header-border) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.navbar a,
.etl-nav a{
  color: rgba(29,29,27,0.78) !important;
}
.navbar a:hover,
.etl-nav a:hover{
  color: rgba(29,29,27,1) !important;
}

/* HERO dimension cards */
.hero-scene{ position: relative; }

.truck-dims{
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: flex;
  gap: 10px;
  align-items: stretch;
  z-index: 3;
}

.dim-card{
  background: var(--etl-card-bg);
  border: 1px solid var(--etl-card-border);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.10);
  min-width: 118px;
}

.dim-card .k{
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(29,29,27,0.55);
  margin-bottom: 4px;
}

.dim-card .v{
  font-family: "JetBrains Mono", "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-weight: 650;
  font-size: 14px;
  color: rgba(29,29,27,0.90);
  white-space: nowrap;
}

.dim-card .s{
  margin-top: 4px;
  font-size: 11px;
  color: rgba(29,29,27,0.50);
}

@media (max-width: 720px){
  .truck-dims{
    position: static;
    margin-top: 10px;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .dim-card{ min-width: 0; }
}

/* =========================================================
   DT220: HERO VISUAL + LIGHT HERO + KPI CARDS
   ========================================================= */

/* 1) Make hero light/premium */
.hero-section{
  background:
    radial-gradient(1000px 520px at 75% 40%, rgba(229,38,41,0.06) 0%, rgba(229,38,41,0.00) 55%),
    radial-gradient(900px 480px at 20% 20%, rgba(29,29,27,0.05) 0%, rgba(29,29,27,0.00) 60%),
    linear-gradient(180deg, #ffffff 0%, #fbfbfc 60%, #ffffff 100%) !important;
}

.hero-title{ color:#111111 !important; text-shadow:none !important; }
.hero-subtitle{ color:rgba(29,29,27,0.70) !important; }

.hero-badge{
  color: var(--etl-red);
  background: rgba(229,38,41,0.06);
  border-color: rgba(229,38,41,0.25);
}

.hero-underline{ background: var(--etl-red) !important; }

/* 2) Ensure hero truck image is visible (container.png) */
.hero-visual{ display:flex !important; }
.container-drop-zone{ background: transparent !important; }
.container-img{
  opacity: 1 !important;
  filter: drop-shadow(0 30px 80px rgba(0,0,0,0.22));
}

/* 3) KPI cards */
.stats-section{
  opacity: 1 !important;
  transform: none !important;
  background: #ffffff;
}

.stats-grid{
  gap: 18px;
}

.stat-card{
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(29,29,27,0.10);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.06);
  backdrop-filter: blur(6px);
}

.stat-number{
  color:#111111;
  letter-spacing: 0.01em;
}

.stat-label{
  color: rgba(29,29,27,0.64);
}

@media (max-width: 980px){
  .hero-section{ padding-top: 110px !important; }
  .hero-visual{ margin-top: 16px; }
  .container-img{ width: min(560px, 86vw) !important; }
}
/* =========================================================
   DT225: FORCE HERO container.png (safe override)
   ========================================================= */

/* Ensure hero image element is not hidden by previous CSS */
.hero-truck,
.hero__truck,
.hero-media img,
.hero-graphic img{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* If hero uses background-image on a container, point it to container.png */
.hero-media,
.hero-graphic{
  background-image: url("../img/container.png") !important;
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: contain;
}

/* =========================================================
   DT226: HERO FORCE container.png
   - Keeps your hero "тягач с прицепом" visible and premium
   ========================================================= */

.hero-visual{
  overflow: visible; /* prevent accidental clipping */
}

.hero-visual .container-img{
  width: min(860px, 46vw);
  height: auto;
  max-width: 46vw;
  transform: translateY(-96px) scale(1.06);
  transform-origin: top center;
  opacity: 0.98;
  filter:
    drop-shadow(0 10px 16px rgba(0,0,0,.20))
    drop-shadow(0 44px 98px rgba(0,0,0,.12))
    drop-shadow(0 96px 180px rgba(229,38,41,.06));
}

@media (max-width: 980px){
  .hero-visual .container-img{
    width: min(720px, 72vw);
    max-width: 72vw;
    transform: translateY(-48px) scale(1.00);
  }
}

/* =========================================================
   DT227: HERO LIGHTEN + SCALE
   - lighter premium hero (less black fog)
   - bigger container.png hero visual
   - small header alignment tweaks
   ========================================================= */

.hero-premium{
  /* Make hero lighter and cleaner (Baykal-service-ish clarity) */
  background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.94) 55%, rgba(255,255,255,0.98) 100%);
  color: var(--etl-black, #1D1D1B);
}

.hero-premium .hero-bg{
  /* keep depth but kill the "black hole" */
  opacity: .10;
  filter: blur(28px) saturate(1.05);
}

.hero-premium .hero-overlay{
  /* subtle premium tint instead of dark mask */
  background:
    radial-gradient(900px 520px at 78% 46%, rgba(229,38,41,0.06), rgba(229,38,41,0.00) 62%),
    radial-gradient(820px 520px at 18% 40%, rgba(29,29,27,0.05), rgba(29,29,27,0.00) 60%);
  opacity: 1;
  mix-blend-mode: normal;
}

.hero-premium .hero-tag{
  color: var(--etl-red, #E52629);
  border-color: rgba(229,38,41,0.35);
  background: rgba(229,38,41,0.06);
}

.hero-premium .hero-title{
  color: var(--etl-black, #1D1D1B);
  text-shadow: none;
}
.hero-premium .hero-sub{
  color: rgba(29,29,27,0.72);
  text-shadow: none;
}

/* hero buttons: keep existing style, just improve contrast on light bg */
.hero-premium .btn-ghost{
  border-color: rgba(29,29,27,0.22);
  color: rgba(29,29,27,0.86);
}
.hero-premium .btn-ghost:hover{
  border-color: rgba(29,29,27,0.32);
  background: rgba(29,29,27,0.04);
}

/* Scale & place the container.png (it is smaller source image) */
.hero-premium .hero-visual{
  pointer-events: none;
}
.hero-premium .hero-truck{
  width: clamp(980px, 66vw, 1320px);
  max-width: none;
  height: auto;
  right: -4vw;
  bottom: -78px;
  opacity: 0.98;
  filter: drop-shadow(0 18px 44px rgba(0,0,0,0.22));
}

/* Header polish: keep geometry stable and centered */
.p-header{
  backdrop-filter: blur(10px);
}
.p-link{
  line-height: 1;
  padding: 10px 14px;
}
.p-cta{
  line-height: 1;
}

/* Mobile: avoid truck covering content */
@media (max-width: 980px){
  .hero-premium .hero-truck{
    width: min(92vw, 920px);
    right: -30vw;
    bottom: -40px;
    opacity: 0.75;
  }
}
/* === FORCE HERO BACKGROUND LIGHTER === */
.hero,
.hero-section,
.section-hero {
  background: radial-gradient(
    circle at 30% 40%,
    #3a3a3a 0%,
    #1c1c1c 60%,
    #121212 100%
  ) !important;
}
.hero::before,
.hero-section::before,
.section-hero::before {
  background: rgba(244, 242, 242, 0.18) !important;
}
/* === FORCE HERO TRUCK POSITION === */
.hero img[src*="container"],
.hero img[src*="truck"] {
  position: absolute !important;
  right: -160px !important;   /* ← сдвиг ВПРАВО */
  bottom: -20px !important;
  width: 1000px !important;   /* ← размер */
  max-width: none !important;
  height: auto !important;
  z-index: 1;
}

/* =========================================================
   DT228: HERO+NAV FIX
   - Fix hero layout so text and truck never collide/cut
   - Lighten hero background
   - Normalize header/nav alignment
   ========================================================= */

:root{
  --hero-bg-1: #f5f6f8;
  --hero-bg-2: #eceff3;
  --hero-bg-3: #f8f8f8;
}

/* --- Header / Nav alignment (premium + ровно) --- */
.p-header{ 
  height: 72px;
}
.p-nav{
  min-height: 72px;
  display:flex;
  align-items:center;
  gap: 18px;
}
.p-logo{ 
  display:flex;
  align-items:center;
  gap: 10px;
}
.p-menu{
  display:flex;
  align-items:center;
}
.p-menu a, .p-nav a{
  line-height: 1.1;
}
.p-cta{
  margin-left:auto;
  display:flex;
  align-items:center;
}
/* убираем "подпрыгивание" кнопки из-за line-height/padding */
.p-cta .btn, .p-cta a, .p-cta button{
  line-height: 1;
}

/* --- HERO layout --- */
.hero-premium{
  position: relative;
  overflow: hidden; /* не даём торчать за секцию */
  background: radial-gradient(1200px 600px at 30% 35%, var(--hero-bg-1) 0%, var(--hero-bg-2) 55%, var(--hero-bg-3) 100%) !important;
}

/* если где-то ранее скрывали визуальный блок — возвращаем */
.hero-premium .hero-visual{
  visibility: visible !important;
  height: auto !important;
  width: auto !important;
  position: relative !important;
  z-index: 1;
}

.hero-premium .hero-inner{
  display:grid !important;
  grid-template-columns: minmax(520px, 1.05fr) minmax(520px, 0.95fr);
  align-items:center;
  gap: clamp(22px, 3vw, 54px);
  padding-top: clamp(36px, 5vw, 86px);
  padding-bottom: clamp(26px, 4vw, 56px);
}

.hero-premium .hero-content{
  position: relative;
  z-index: 2;
  max-width: 720px;
}

.hero-premium .hero-title{
  max-width: 680px;
  word-break: normal;
}
/* на светлом фоне — читаемость */
.hero-premium .hero-kicker,
.hero-premium .hero-title,
.hero-premium .hero-subtitle{
  color: #141414 !important;
}
.hero-premium .hero-title .muted,
.hero-premium .hero-title span.muted{
  color: rgba(20,20,20,.28) !important;
}

/* --- Truck image: не абсолют, управляем размером/смещением через transform --- */
.hero-premium .hero-visual{
  display:flex !important;
  justify-content:flex-end;
  align-items:flex-end;
  padding-right: clamp(0px, 2vw, 28px);
}
.hero-premium img.hero-truck,
.hero-premium .hero-truck{
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
  width: min(940px, 54vw) !important;
  max-width: 940px !important;
  height: auto !important;
  transform: translateX(clamp(10px, 2.5vw, 44px)) translateY(12px);
  filter: drop-shadow(0 22px 40px rgba(0,0,0,.18));
}

/* чтобы грузовик не "заезжал" на текст на средних ширинах */
@media (max-width: 1180px){
  .hero-premium .hero-inner{
    grid-template-columns: minmax(460px, 1.1fr) minmax(420px, 0.9fr);
  }
  .hero-premium img.hero-truck,
  .hero-premium .hero-truck{
    width: min(820px, 56vw) !important;
    transform: translateX(clamp(0px, 2vw, 22px)) translateY(6px);
  }
}

@media (max-width: 980px){
  .hero-premium .hero-inner{
    grid-template-columns: 1fr !important;
  }
  .hero-premium .hero-visual{
    order: 2;
    justify-content:center;
    padding-right: 0;
    margin-top: 8px;
  }
  .hero-premium img.hero-truck,
  .hero-premium .hero-truck{
    width: min(860px, 92vw) !important;
    transform: none;
  }
}

/* KPI карточки ближе к "Байкал"-чистоте */
.kpi-row, .kpis, .kpi-grid{
  background: #ffffff;
}
.map-premium{ padding: 16px 18px 18px; }
.map-toolbar{
  display:flex; gap:12px; flex-wrap:wrap;
  align-items:flex-end; justify-content:space-between;
  margin-bottom: 12px;
}
.map-toolbar-left{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.map-toolbar-right{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

.map-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom: 2px; }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.85);
  font-weight: 800;
  font-size: 13px;
  cursor:pointer;
}
.chip[aria-pressed="true"]{
  border-color: rgba(229,38,41,.26);
  background: rgba(229,38,41,.08);
}

.map-grid{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 14px;
}
.map-canvas{
  height: 520px;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 20px 60px rgba(0,0,0,.06);
  background: rgba(0,0,0,.02);
}
.map-panel{
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.92);
  padding: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.06);
}
.map-panel-title{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(0,0,0,.60);
  margin-bottom: 12px;
}
.map-panel-row{ display:flex; justify-content:space-between; gap:12px; margin-top: 10px; }
.map-panel-row .k{ font-size:12px; color: rgba(0,0,0,.55); font-weight: 800; letter-spacing:.04em; text-transform:uppercase; }
.map-panel-row .v{ font-weight: 900; color: rgba(0,0,0,.84); text-align:right; }
.map-panel-actions{ margin-top: 14px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.map-toggle{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.map-toggle button{
  height: 38px; padding: 0 12px; border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.82);
  cursor:pointer; font-weight: 900;
}
.map-toggle button[aria-pressed="true"]{
  border-color: rgba(229,38,41,.26);
  background: rgba(229,38,41,.08);
}

/* Modal */
.map-modal{ position: fixed; inset: 0; display:none; z-index: 9999; }
.map-modal[aria-hidden="false"]{ display:block; }
.map-modal-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.45); }
.map-modal-body{
  position: relative;
  width: min(1200px, calc(100vw - 24px));
  height: min(780px, calc(100vh - 24px));
  margin: 12px auto;
  border-radius: 22px;
  overflow:hidden;
  background:#fff;
  box-shadow: 0 40px 120px rgba(0,0,0,.35);
}
.map-modal-top{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.92);
}
.map-canvas-full{ height: calc(100% - 54px); border-radius: 0; border:0; box-shadow:none; }

@media (max-width: 980px){
  .map-grid{ grid-template-columns: 1fr; }
  .map-canvas{ height: 420px; }
}
/* Tabs (Sea / Auto) */
.sc-tabs{
  margin-top: 18px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.sc-tab{
  height: 42px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.82);
  cursor: pointer;
  font-weight: 900;
  color: rgba(0,0,0,.78);
  display:flex;
  align-items:center;
  gap:10px;
  user-select:none;
}
.sc-tab:hover{ border-color: rgba(229,38,41,.22); transform: translateY(-1px); }
.sc-tab[aria-selected="true"]{
  border-color: rgba(229,38,41,.25);
  background: rgba(229,38,41,.08);
  color: rgba(0,0,0,.92);
}
.sc-tab .dot{
  width:8px; height:8px; border-radius:999px;
  background:#e52629;
  box-shadow: 0 0 0 4px rgba(229,38,41,.12);
}
.sc-tab[aria-selected="false"] .dot{
  background: rgba(0,0,0,.35);
  box-shadow:none;
}

/* Tab panels */
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

/* Make tables feel lighter when hidden/shown */
.table-wrap{ scroll-margin-top: 90px; }
/* ===== FIX: одинаковый hover/полоса для active bento-card (Рейсы грузовиков) ===== */

.bento-card.card--active::after{
  transform: scaleX(1);            /* красная полоска всегда видна */
}

.bento-card.card--active:hover{
  transform: translateY(-3px);     /* как у обычных карточек */
  border-color: rgba(229,38,41,.18);
  background: #FAFAFA;
  box-shadow: 0 30px 90px rgba(0,0,0,0.10), 0 26px 90px rgba(229,38,41,0.08);
}

.bento-card.card--active:hover::before{
  opacity: .55;                   /* такой же световой блик */
}
/* ===== FIX: одинаковый hover/полоса для active bento-card (Рейсы грузовиков) ===== */
.bento-card.card--active::after{
  transform: scaleX(1);
}
.bento-card.card--active:hover{
  transform: translateY(-3px);
  border-color: rgba(229,38,41,.18);
  background: #FAFAFA;
  box-shadow: 0 30px 90px rgba(0,0,0,0.10), 0 26px 90px rgba(229,38,41,0.08);
}
.bento-card.card--active:hover::before{
  opacity: .55;
}

/* ===== FIX: одинаковый hover/полоса для active bento-card (Рейсы грузовиков) ===== */
.bento-card.card--active::after{
  transform: scaleX(1);
}
.bento-card.card--active:hover{
  transform: translateY(-3px);
  border-color: rgba(229,38,41,.18);
  background: #FAFAFA;
  box-shadow: 0 30px 90px rgba(0,0,0,0.10), 0 26px 90px rgba(229,38,41,0.08);
}
.bento-card.card--active:hover::before{
  opacity: .55;
}


/* === PATTERNS: patterns.css === */
/* ETL BRAND PATTERN — corner accent (SAFE, valid CSS)
   This file must contain ONLY CSS. (No shell heredoc markers.)
*/

:root{
  --etl-pattern-size: 280px;
  --etl-pattern-opacity: 0.14; /* заметно, но не кричит */
}

/* Sections that can host the corner pattern */
.section-light,
.section-muted{
  position: relative;
  overflow: hidden;
}

/* Corner pattern (bottom-right) */
.section-light::after,
.section-muted::after{
  content: "";
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: var(--etl-pattern-size);
  height: var(--etl-pattern-size);

  background-image: url("../img/container.png");
  background-repeat: repeat;
  background-size: 520px 520px;

  opacity: var(--etl-pattern-opacity);

  /* slightly dark so it doesn't disappear on light bg */
  filter: grayscale(1) contrast(1.1) brightness(0.85);

  /* soft mask */
  mask-image: radial-gradient(circle at bottom right,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,0.9) 45%,
    rgba(0,0,0,0) 70%);
  -webkit-mask-image: radial-gradient(circle at bottom right,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,0.9) 45%,
    rgba(0,0,0,0) 70%);

  pointer-events: none;
  z-index: 0;
}

/* Keep section content above the pattern */
.section-light > *,
.section-muted > *{
  position: relative;
  z-index: 1;
}

/* CTA pattern helper (used on pricing etc.) */
.pattern-cta{
  position: relative;
  overflow: hidden;
}
.pattern-cta::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/container.png");
  background-repeat: repeat;
  background-size: 520px 520px;
  opacity: 0.06;
  filter: grayscale(1) contrast(1.05) brightness(0.9);
  pointer-events: none;
}
.pattern-cta > *{ position: relative; z-index: 1; }

@media (max-width: 980px){
  :root{
    --etl-pattern-size: 200px;
    --etl-pattern-opacity: 0.12;
  }
}


/* === HOTFIX: hotfix.css === */
/* DT616_NEUTRALIZED_DROPDOWN_BLOCKS: commented out dropdown-related legacy rules */
/* HOTFIX (DT110) — hero alignment + mid watermark
   Loaded AFTER style.css. Only overrides, no redesign.
*/

/* Container padding — stable */
html body .container,
html body main .container,
html body section > .container,
html body .section-light > .container,
html body .section-muted > .container{
  padding-left: 32px !important;
  padding-right: 32px !important;
}
@media (max-width: 980px){
  html body .container,
  html body main .container,
  html body section > .container,
  html body .section-light > .container,
  html body .section-muted > .container{
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}
@media (max-width: 560px){
  html body .container,
  html body main .container,
  html body section > .container,
  html body .section-light > .container,
  html body .section-muted > .container{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Global: prevent sideways drift */
html, body{ overflow-x: hidden; }

/* ===== HERO: stop clipping / remove duplicate layer =====
   HTML has TWO images in hero:
   - .hero-scene img.hero-truck (currently also container.png)
   - .hero-visual img.container-img (visible block)
   Hide scene image to avoid duplicates/cropping.
*/
.hero-scene,
.hero-truck{
  display: none !important;
}

/* Some old blocks in style.css hide hero-visual completely. Force it back on. */
.hero-visual{
  visibility: visible !important;
  height: auto !important;
  overflow: visible !important;
}

/* Controls: move the visible hero image here */
:root{
  --hero-img-x: 0px;
  --hero-img-y: -10px;
  --hero-img-scale: 1.06;
}
.hero-visual .container-img{
  transform:
    translateX(var(--hero-img-x))
    translateY(var(--hero-img-y))
    scale(var(--hero-img-scale)) !important;
  transform-origin: top center !important;
  width: 120% !important;
  max-width: 860px !important;
  height: auto !important;
}

/* Give hero more breathing room */
.hero-section{ padding-bottom: 44px !important; overflow: hidden !important; }

@media (max-width: 980px){
  :root{
    --hero-img-x: 0px;
    --hero-img-y: -60px;
    --hero-img-scale: 1.02;
  }
  .hero-visual .container-img{
    width: 108% !important;
    max-width: 720px !important;
  }
  .hero-section{ padding-bottom: 36px !important; }
}

/* ===== MID WATERMARK: between OPS and Services ===== */
#midwm{
  display: block !important;
  position: relative;
  height: 160px !important;
  margin: 0 !important;
  overflow: hidden !important;
  pointer-events: none;
}
#midwm{ display: none !important; }

@media (max-width: 1024px){
  #midwm{ display:none !important; }
}
/* DT111_SAFE — Vertical rhythm (sections) */
/* Цель: единый “воздух” у секций + аккуратные отступы вокруг заголовков */

:root{
  --sec-y: 72px;         /* вертикальный паддинг секций (desktop) */
  --sec-y-md: 62px;      /* tablet */
  --sec-y-sm: 54px;      /* mobile */
  --head-gap: 14px;      /* расстояние от h2 до описания/контента */
  --grid-gap-top: 22px;  /* отступ сетки карточек после заголовка */
}

/* 1) Унифицируем секции */
.section-light,
.section-muted{
  padding-top: var(--sec-y) !important;
  padding-bottom: var(--sec-y) !important;
}

/* 2) Одинаковая “шапка” секций: h2 + абзац */
.section-light h2,
.section-muted h2{
  margin-bottom: 10px !important;
}

.section-light h2 + p,
.section-muted h2 + p{
  margin-top: 0 !important;
  margin-bottom: var(--head-gap) !important;
}

/* 3) Сетка карточек всегда на одинаковом расстоянии от заголовка */
.section-light .bento-grid,
.section-muted .bento-grid{
  margin-top: var(--grid-gap-top) !important;
}

/* 4) Спец-случаи: OPS / SERVICES / TRUST / PROCESS — только отступы */
#ops.section-light,
#services.section-light{
  padding-top: calc(var(--sec-y) - 6px) !important;
  padding-bottom: var(--sec-y) !important;
}

.trust-section.section-light,
.process-section.section-light{
  padding-top: var(--sec-y) !important;
  padding-bottom: var(--sec-y) !important;
}

/* 5) Блок KPI (stats) — чтобы не был “ни рыба ни мясо” между hero и секцией */
.stats-section{
  padding-top: 22px !important;
  padding-bottom: 22px !important;
}

/* 6) Адаптив: уменьшаем воздух одинаково везде */
@media (max-width: 980px){
  .section-light,
  .section-muted{
    padding-top: var(--sec-y-md) !important;
    padding-bottom: var(--sec-y-md) !important;
  }
  .stats-section{
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }
}

@media (max-width: 560px){
  .section-light,
  .section-muted{
    padding-top: var(--sec-y-sm) !important;
    padding-bottom: var(--sec-y-sm) !important;
  }
}

/* DT116_SAFE_MOBILE_POLISH_START */
/* Mobile polish: tighter rhythm + CTA readability + prevent hero truck overlap */
@media (max-width: 520px){

  /* Layout rhythm */
  .container{ padding-left: 16px !important; padding-right: 16px !important; }
  .section-light, .section-muted{ padding: 46px 0 !important; }

  /* Navbar */
  .navbar{ padding: 10px 14px !important; }

  /* Hero: keep text + buttons readable on small screens */
  .hero-section{
    padding: 28px 0 18px !important;
  }
  .hero-inner{ gap: 18px !important; }

  .hero-actions{
    margin-top: 14px !important;
    flex-direction: column;
    align-items: stretch;
  }
  .hero-actions .btn-primary,
  .hero-actions .btn-outline{
    width: 100%;
  }

  /* Truck scene: move further right so it doesn't sit on the CTA */
  .hero-scene .hero-truck{
    right: -34% !important;
    bottom: -6px !important;
    width: min(540px, 128vw) !important;
  }

  /* If any legacy hero visual is still present — keep hidden */
  .hero-visual{ display:none !important; }

  /* KPI cards: fit 2x2 */
  .stats-grid{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 12px !important;
  }
  .stat-card{ padding: 12px 12px !important; }
  .stat-number{ font-size: 22px !important; }

  /* Cards */
  .bento-grid{ grid-template-columns: 1fr !important; gap: 14px !important; }
  .bento-card{ padding: 16px !important; }

  /* Trust logos: 2 columns, tighter */
  .trust-logos{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .trust-logos .logo-tile{ height: 58px !important; }
  .trust-logos .logo-tile img{ max-height: 36px !important; }
}
/* DT116_SAFE_MOBILE_POLISH_END */

/* DT117_SAFE_MOBILE_MENU_START */
/* Hamburger button (mobile only) */
.nav-toggle{
  display:none;
  width: 44px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.72);
  align-items:center;
  justify-content:center;
  gap: 4px;
  padding: 10px;
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  width: 18px;
  height: 2px;
  background: rgba(29,29,27,.78);
  border-radius: 999px;
}
@media (max-width: 980px){
  .nav-toggle{ display:inline-flex; }
}

/* Drawer */
.mobile-nav{
  position: fixed;
  inset: 0;
  z-index: 999;
  display:none;
}
.mobile-nav.is-open{ display:block; }
.mobile-nav__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.32);
  backdrop-filter: blur(2px);
}
.mobile-nav__panel{
  position:absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  width: min(560px, calc(100vw - 24px));
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.92);
  box-shadow: 0 22px 70px rgba(0,0,0,.18);
  overflow:hidden;
}
.mobile-nav__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.mobile-nav__title{
  font-weight: 800;
  letter-spacing: .02em;
}
.mobile-nav__close{
  width: 40px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.70);
  cursor:pointer;
}
.mobile-nav__body{
  padding: 10px 14px 12px;
}
.mobile-nav__links{
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.mobile-nav__link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height: 44px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.70);
  color: rgba(29,29,27,.86);
}
.mobile-nav__link:hover{
  background: rgba(0,0,0,.03);
}
.mobile-nav__foot{
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(0,0,0,.06);
  display:grid;
  gap: 10px;
}
.mobile-nav__cta, .mobile-nav__cta2{
  width: 100%;
  justify-content:center;
}
html.mnav-lock, html.mnav-lock body{
  overflow:hidden;
  touch-action: none;
}
/* DT117_SAFE_MOBILE_MENU_END */



/* DT120_SAFE_TABS — tabbed nav active state + fade transition */
.nav-menu a.is-active{
  position: relative;
  color: var(--etl-black, #0b0b0b);
  font-weight: 700;
}
.nav-menu a.is-active::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-10px;
  width:22px;
  height:3px;
  border-radius:999px;
  background: var(--etl-red, #e60012);
  opacity:.9;
}

/* Main fade when swapping tab content */
main{ transition: opacity .18s ease; }
main.tab-fade-out{ opacity: 0; }

/* Optional: small cursor feedback while loading (only when custom cursor is NOT active) */
html.tab-loading:not(.etl-cursor-on):not(.etl-magnetic-cursor-on),
html.tab-loading:not(.etl-cursor-on):not(.etl-magnetic-cursor-on) *{ cursor: auto !important; }

/* DT150 — navbar dropdown (Услуги): readable menu + proper layering */
.navbar{ position: sticky; top: 0; z-index: 2000; }
.nav-menu{ position: relative; z-index: 2001; }

.nav-dd{ position: relative; }
.nav-dd-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.nav-dd-caret{ font-size: 12px; opacity: .7; transform: translateY(1px); }

.nav-dd-menu{
  position: absolute;
  top: calc(100% + 12px);
  left: -10px;
  min-width: 260px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 60px rgba(0,0,0,.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}

/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS BEGIN --- */
/*
.nav-dd-menu a{
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  color: #111 !important;
  text-decoration: none;
  font-weight: 600;
}
*/
/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS END --- */


/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS BEGIN --- */
/*
.nav-dd-menu a:hover{
  background: rgba(0,0,0,.06);
}
*/
/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS END --- */

.nav-dd:hover .nav-dd-menu,

/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS BEGIN --- */
/*
.nav-dd:focus-within .nav-dd-menu{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
*/
/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS END --- */

/* keep dropdown usable on touch: show menu on button focus */
@media (max-width: 980px){
  .nav-dd-menu{
    position: static;
    min-width: unset;
    margin-top: 10px;
    box-shadow: none;
    border: 1px solid rgba(0,0,0,.08);
  }
}

/* DT150 — autotransport page helpers */
.cards-2, .grid-2{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 980px){
  .cards-2, .grid-2{ grid-template-columns: 1fr; }
}
.divider{
  height: 1px;
  background: rgba(0,0,0,.08);
  border-radius: 999px;
}
.ol-steps{
  margin: 0;
  padding-left: 18px;
}
.ol-steps li{ margin: 8px 0; }
.faq details{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  padding: 10px 12px;
  margin: 10px 0;
  background: rgba(255,255,255,.6);
}
.faq summary{
  cursor: pointer;
  font-weight: 700;
}
.faq p{ margin: 10px 0 0 0; color: rgba(0,0,0,.75); }

/* DT152_NAV_DROPDOWN_FIX */
.navbar { z-index: 1000; }
.nav-menu { position: relative; z-index: 1001; }
.nav-menu .nav-dd { position: relative; }
.nav-menu .nav-dd > a.nav-dd-trigger::after{
  content: "▾";
  display: inline-block;
  margin-left: 6px;
  font-size: 12px;
  opacity: .6;
  transform: translateY(-1px);
}

/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS BEGIN --- */
/*
.nav-menu .nav-dd-menu{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 280px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(255,255,255,.94) !important;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 16px 40px rgba(0,0,0,.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #111 !important;
  z-index: 9999;
  display: none;
  opacity: 1 !important;
}
*/
/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS END --- */


/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS BEGIN --- */
/*
.nav-menu .nav-dd-menu *{ color:#111 !important; opacity: 1 !important; }
.nav-menu .nav-dd-menu a{
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
}
*/
/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS END --- */

.nav-menu .nav-dd-menu a:hover,

/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS BEGIN --- */
/*
.nav-menu .nav-dd-menu a:focus{
  background: rgba(0,0,0,.05);
}
*/
/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS END --- */

.nav-menu .nav-dd:hover > .nav-dd-menu,

/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS BEGIN --- */
/*
.nav-menu .nav-dd:focus-within > .nav-dd-menu{
  display: block;
}
*/
/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS END --- */


/* Make sure dropdown is not hidden by hero overlays */
.hero-section, .hero-bg, .hero-scene { z-index: 0; }

/* DT154_NAV_DROPDOWN_HOVER_INTENT */
.nav-menu .nav-dd { position: relative; }
.nav-menu .nav-dd-menu{
  /* keep menu within hover area; allow cursor travel */
  top: calc(100% + 8px);
}

/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS BEGIN --- */
/*
.nav-menu .nav-dd-menu::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-12px;
  height:12px;
  /* invisible bridge so hover doesn't drop on the gap */
}
*/
/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS END --- */


/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS BEGIN --- */
/*
.nav-menu .nav-dd.dd-open > .nav-dd-menu{
  display:block;
}
*/
/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS END --- */


/* ==== DT160 SAFE: Premium dropdown for top nav ("Услуги") ==== */
html body .nav-menu .nav-dropdown { position: relative; }

/* Trigger */
html body .nav-menu .nav-dropdown-trigger{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  padding-right: 18px; /* room for caret */
}
html body .nav-menu .nav-dropdown-trigger::after{
  content:"";
  width: 10px; height: 10px;
  display: inline-block;
  margin-left: 4px;
  border-right: 2px solid rgba(0,0,0,.55);
  border-bottom: 2px solid rgba(0,0,0,.55);
  transform: rotate(45deg) translateY(-1px);
  border-radius: 1px;
  opacity: .85;
}

/* Menu shell */
html body .nav-dropdown-menu{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 320px;
  max-width: 420px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(10,12,16,.10);
  box-shadow: 0 18px 50px rgba(12,16,22,.14), 0 4px 14px rgba(12,16,22,.08);
  z-index: 9999;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

/* Invisible hover bridge (so it doesn't close while moving cursor) */
html body .nav-dropdown::before{
  content:"";
  position:absolute;
  left:-10px; right:-10px;
  top:100%;
  height: 14px;
}

/* Open state */
html body .nav-dropdown.is-open .nav-dropdown-menu,
html body .nav-dropdown:hover .nav-dropdown-menu{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Items */
html body .nav-dropdown-menu .nav-dd-item{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 12px;
  color: rgba(18,22,28,.92);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .01em;
  background: transparent !important;
  transition: background .14s ease, transform .14s ease;
  position: relative;
}
html body .nav-dropdown-menu .nav-dd-item:hover{
  background: rgba(12,16,22,.04) !important;
  transform: translateY(-1px);
}
html body .nav-dropdown-menu .nav-dd-item:active{
  transform: translateY(0);
}

/* Separator */
html body .nav-dropdown-menu .nav-dd-sep{
  height: 1px;
  margin: 6px 6px;
  background: rgba(10,12,16,.10);
}

/* Current item */
html body .nav-dropdown-menu .nav-dd-item.is-current{
  background: rgba(220,0,0,.08) !important;
  color: rgba(12,16,22,.96);
}
html body .nav-dropdown-menu .nav-dd-item.is-current::before{
  content:"";
  position:absolute;
  left: 10px;
  width: 6px; height: 6px;
  border-radius: 99px;
  background: #d10000;
  box-shadow: 0 0 0 3px rgba(209,0,0,.12);
}
html body .nav-dropdown-menu .nav-dd-item.is-current{
  padding-left: 24px;
}

/* Make sure other site styles don't paint grey pills */
html body .nav-dropdown-menu a,
html body .nav-dropdown-menu a *{
  filter: none !important;
}

/* Mobile: keep dropdown menu hidden (mobile nav handles navigation separately) */
@media (max-width: 980px){
  html body .nav-menu .nav-dropdown-menu{ display:none !important; }
  html body .nav-menu .nav-dropdown-trigger::after{ display:none; }
}
/* ==== /DT160 ==== */

/* DT162_SAFE_NAV_DROPDOWN_PREMIUM_ANIM: start */
:root{
  --etl-dd-bg: rgba(255,255,255,.92);
  --etl-dd-border: rgba(15,23,42,.10);
  --etl-dd-shadow: 0 22px 50px rgba(2,6,23,.18), 0 8px 18px rgba(2,6,23,.10);
  --etl-dd-text: #0f172a;
  --etl-dd-muted: rgba(15,23,42,.70);
  --etl-dd-hover: rgba(15,23,42,.04);
  --etl-dd-accent: #e21c23;
}
.etl-nav-dd{ position: relative; }
.etl-nav-dd > a{ display:inline-flex; align-items:center; gap:8px; }
.etl-nav-dd .etl-dd-caret{
  width:10px; height:10px; display:inline-block;
  border-right:2px solid rgba(15,23,42,.55);
  border-bottom:2px solid rgba(15,23,42,.55);
  transform: rotate(45deg) translateY(-1px);
  transition: transform .18s ease, border-color .18s ease;
}

/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS BEGIN --- */
/*
.etl-nav-dd.is-open .etl-dd-caret{ transform: rotate(225deg) translateY(1px); border-color: rgba(15,23,42,.75); }

.etl-dd-panel{
  position:absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 300px;
  padding: 10px;
  border-radius: 16px;
  background: var(--etl-dd-bg);
  border: 1px solid var(--etl-dd-border);
  box-shadow: var(--etl-dd-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 9999;
  transform-origin: top left;
  opacity: 0;
  transform: translateY(-6px) scale(.98);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
*/
/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS END --- */


/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS BEGIN --- */
/*
.etl-nav-dd.is-open .etl-dd-panel{
  opacity:1;
  transform: translateY(0) scale(1);
  pointer-events:auto;
}
*/
/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS END --- */


/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS BEGIN --- */
/*
.etl-dd-bridge{
  position:absolute;
  top: 100%;
  left: 0;
  height: 14px;
  width: 100%;
  pointer-events: auto;
}
*/
/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS END --- */


/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS BEGIN --- */
/*
.etl-dd-list{ position:relative; margin:0; padding:0; list-style:none; }
.etl-dd-item{
  position: relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--etl-dd-text);
  text-decoration:none;
  font-weight:600;
  letter-spacing:.1px;
  transition: background .18s ease, color .18s ease;
}
*/
/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS END --- */


/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS BEGIN --- */
/*
.etl-dd-item .etl-dd-sub{
  display:block;
  font-weight:500;
  font-size:12px;
  color: var(--etl-dd-muted);
  margin-top:2px;
}
*/
/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS END --- */


/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS BEGIN --- */
/*
.etl-dd-item:hover{ background: var(--etl-dd-hover); }
.etl-dd-item.is-active{
  box-shadow: inset 0 0 0 1px rgba(226,28,35,.35);
}
*/
/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS END --- */


/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS BEGIN --- */
/*
.etl-dd-item.is-active::after{
  content:"";
  position:absolute; inset:0;
  border-radius:12px;
  box-shadow: inset 0 0 0 2px rgba(226,28,35,.22);
  pointer-events:none;
  opacity:.9;
}
*/
/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS END --- */


/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS BEGIN --- */
/*
.etl-dd-highlight{
  position:absolute;
  left:0;
  top:0;
  height:44px;
  width:100%;
  border-radius:12px;
  background: rgba(15,23,42,.03);
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.06);
  transition: transform .22s cubic-bezier(.2,.9,.2,1), height .22s cubic-bezier(.2,.9,.2,1), opacity .18s ease;
  opacity:0;
  pointer-events:none;
}
*/
/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS END --- */


/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS BEGIN --- */
/*
.etl-dd-panel.is-armed .etl-dd-highlight{ opacity:1; }
.services-dropdown, .nav-dropdown, .dropdown-menu { background: initial; }
@media (max-width: 900px){
  .etl-dd-panel{ display:none !important; }
}
*/
/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS END --- */

/* DT162_SAFE_NAV_DROPDOWN_PREMIUM_ANIM: end */


/* DT164_SAFE_NAV_DROPDOWN_DEDUP_PREMIUM: SERVICES_DROPDOWN_PREMIUM */
/* Premium dropdown (clean white/glass, no dirty grays) */

/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS BEGIN --- */
/*
.nav-menu .has-services-dropdown { position: relative; }
.nav-menu .has-services-dropdown > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
*/
/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS END --- */

.nav-menu .etl-services-caret {
  width: 12px;
  height: 12px;
  display: inline-block;
  opacity: .7;
  transform: translateY(1px);
  transition: transform .18s ease, opacity .18s ease;
}

/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS BEGIN --- */
/*
.nav-menu .has-services-dropdown.is-open .etl-services-caret {
  transform: translateY(1px) rotate(180deg);
  opacity: .95;
}
*/
/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS END --- */


/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS BEGIN --- */
/*

.etl-services-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 320px;
  padding: 10px;
  border-radius: 18px;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 26px 70px rgba(0,0,0,.14);
  opacity: 0;
  pointer-events: none;
  transform-origin: top center;
  transform: translateX(-50%) translateY(-6px) scale(.98);
  transition: opacity .18s ease, transform .18s ease;
  z-index: 2000;
}
*/
/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS END --- */


/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS BEGIN --- */
/*

.has-services-dropdown.is-open .etl-services-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}
*/
/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS END --- */


/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS BEGIN --- */
/*

.etl-services-dropdown .etl-dd-inner {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
}
*/
/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS END --- */


/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS BEGIN --- */
/*

.etl-services-dropdown .etl-dd-hl {
  position: absolute;
  left: 6px;
  right: 6px;
  top: 6px;
  height: 44px;
  border-radius: 12px;
  background: rgba(227,27,35,.06);
  border: 1px solid rgba(227,27,35,.22);
  box-shadow: 0 8px 22px rgba(227,27,35,.10);
  transform: translateY(0);
  transition: transform .22s cubic-bezier(.2,.8,.2,1), height .22s cubic-bezier(.2,.8,.2,1), opacity .18s ease;
  opacity: 0;
  pointer-events: none;
}
*/
/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS END --- */


/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS BEGIN --- */
/*

.etl-services-dropdown .etl-dd-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  color: #111;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .1px;
  line-height: 1.2;
  transition: color .18s ease;
  user-select: none;
}
*/
/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS END --- */


/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS BEGIN --- */
/*

.etl-services-dropdown .etl-dd-item small {
  display: block;
  font-weight: 500;
  opacity: .72;
  margin-top: 2px;
}
*/
/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS END --- */


/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS BEGIN --- */
/*

.etl-services-dropdown .etl-dd-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(227,27,35,.18);
}
*/
/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS END --- */


/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS BEGIN --- */
/*

.etl-services-dropdown .etl-dd-item.is-active {
  color: #000;
}
*/
/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS END --- */


/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS BEGIN --- */
/*

.etl-services-dropdown .etl-dd-item .etl-dd-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(227,27,35,.85);
  box-shadow: 0 6px 16px rgba(227,27,35,.22);
}
*/
/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS END --- */


/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS BEGIN --- */
/*

.etl-services-dropdown .etl-dd-divider {
  height: 1px;
  margin: 6px 8px;
  background: rgba(0,0,0,.06);
}
*/
/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS END --- */


/* Hover-bridge: gives you time to move mouse into dropdown */

/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS BEGIN --- */
/*
.nav-menu .has-services-dropdown::after {
  content: "";
  position: absolute;
  left: -10px;
  right: -10px;
  top: 100%;
  height: 16px;
}
*/
/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS END --- */

/* ===============================
   TERMINAL NAVBAR (Variant A)
   =============================== */

   .etl-nav {
    position: sticky;
    top: 0;
    z-index: 1000;
  
    height: 64px;
    padding: 0 28px;
  
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: none;
  
    border-bottom: 1px solid #e5e7eb;
    box-shadow: none;
  }
  
  /* логотип */
  .etl-nav .logo img {
    height: 32px;
    width: auto;
  }
  
  /* меню */
  .etl-nav .nav-links {
    display: flex;
    gap: 22px;
    align-items: center;
  }
  
  .etl-nav .nav-links a {
    font-size: 14px;
    font-weight: 500;
    color: #111;
    padding: 6px 0;
  
    border-bottom: 2px solid transparent;
    border-radius: 0;
  
    transition: border-color .15s ease, color .15s ease;
  }
  
  .etl-nav .nav-links a:hover {
    color: #000;
    border-bottom-color: #e11d2e; /* ETL red */
  }
  
  /* активная страница */
  .etl-nav .nav-links a.active {
    border-bottom-color: #e11d2e;
    font-weight: 600;
  }
  
  /* CTA */
  .etl-nav .nav-cta {
    margin-left: 32px;
  }
  
  .etl-nav .nav-cta .btn {
    height: 36px;
    padding: 0 18px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
  }
  
  /* ===============================
     DROPDOWN = TERMINAL PANEL
     =============================== */
  
  .nav-dropdown-menu {
    border-radius: 0;
    border: 1px solid #e5e7eb;
    box-shadow: 0 12px 32px rgba(0,0,0,.08);
  
    background: #fff;
    padding: 16px 20px;
  
    min-width: 420px;
  }
  
  .nav-dropdown-menu a {
    display: block;
    padding: 8px 0;
  
    font-size: 14px;
    color: #111;
    border-bottom: 1px dashed #eee;
  }
  
  .nav-dropdown-menu a:last-child {
    border-bottom: none;
  }
  
  .nav-dropdown-menu a:hover {
    color: #e11d2e;
  }
  
  /* ===============================
     MOBILE (если нужно)
     =============================== */
  
  @media (max-width: 960px) {
    .etl-nav {
      height: 56px;
      padding: 0 16px;
    }
  }
  /* ===== Terminal dropdown: one column, bigger, no descriptions ===== */

.nav-dropdown-menu{
  min-width: 280px;      /* было слишком “плиткой” */
  max-width: 340px;
  padding: 10px 12px;
  border-radius: 6px;    /* чуть-чуть, но не “пузырь” */
  border: 1px solid #e5e7eb;
  box-shadow: 0 16px 40px rgba(0,0,0,.10);
  background: #fff;
}

.nav-dropdown-menu a{
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 10px 12px;
  margin: 2px 0;

  font-size: 15px;       /* крупнее */
  font-weight: 600;
  color: #111;

  border: 1px solid transparent;
  border-radius: 6px;
  text-decoration: none;
}

.nav-dropdown-menu a:hover{
  border-color: #f1f5f9;
  background: #f8fafc;
  color: #111;
}

/* если внутри ссылки есть подписи/описания — глушим */
.nav-dropdown-menu small,
.nav-dropdown-menu .desc,
.nav-dropdown-menu .muted,
.nav-dropdown-menu .sub,
.nav-dropdown-menu .hint{
  display: none !important;
}
/* ===== Remove dropdown triangles/chevrons ===== */

/* если шеврон сделан через ::after */
.nav-dropdown-trigger::after{
  content: "" !important;
  display: none !important;
}

/* если шеврон — svg или span внутри */
.nav-dropdown-trigger svg,
.nav-dropdown-trigger .chevron,
.nav-dropdown-trigger .caret,
.nav-dropdown-trigger .arrow{
  display: none !important;
}
/* =========================
   TERMINAL NAV DROPDOWN vA
   (override nav_service_down.css)
   ========================= */

/* 1) Убираем pill-стиль у ссылок/кнопок в наве */
.navbar.etl-nav .nav-link{
  border-radius: 6px !important;
  padding: 8px 10px !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* 2) Триггер "Услуги": без стрелок, без доп-икон */
.navbar.etl-nav .nav-dropdown-trigger::after{
  content: "" !important;
  display: none !important;
}
.navbar.etl-nav .nav-dropdown-trigger svg,
.navbar.etl-nav .nav-dropdown-trigger .chevron,
.navbar.etl-nav .nav-dropdown-trigger .caret,
.navbar.etl-nav .nav-dropdown-trigger .arrow{
  display: none !important;
}

/* 3) Меню: одна колонка, крупнее */
.navbar.etl-nav .nav-dropdown-menu{
  min-width: 340px !important;
  max-width: 380px !important;
  padding: 10px 10px !important;

  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.12) !important;
}

/* 4) Пункты меню: крупные, терминальные */
.navbar.etl-nav .nav-dropdown-menu a{
  display: block !important;
  padding: 10px 12px !important;
  margin: 2px 0 !important;

  font-size: 15px !important;
  font-weight: 700 !important;
  color: #111 !important;

  border: 1px solid transparent !important;
  border-radius: 6px !important;
  text-decoration: none !important;
}
.navbar.etl-nav .nav-dropdown-menu a:hover{
  background: #f8fafc !important;
  border-color: #eef2f7 !important;
  color: #111 !important;
}

/* 5) Убираем "описания" и вторую колонку (у тебя это не small, а, скорее всего, div/p/span) */
.navbar.etl-nav .nav-dropdown-menu small,
.navbar.etl-nav .nav-dropdown-menu p,
.navbar.etl-nav .nav-dropdown-menu .desc,
.navbar.etl-nav .nav-dropdown-menu .muted,
.navbar.etl-nav .nav-dropdown-menu .hint,
.navbar.etl-nav .nav-dropdown-menu .sub,
.navbar.etl-nav .nav-dropdown-menu [class*="desc"],
.navbar.etl-nav .nav-dropdown-menu [class*="hint"],
.navbar.etl-nav .nav-dropdown-menu [class*="sub"],
.navbar.etl-nav .nav-dropdown-menu [class*="meta"]{
  display: none !important;
}

/* 6) На случай grid-раскладки: принудительно 1 колонка */
.navbar.etl-nav .nav-dropdown-menu{
  display: block !important;
}
.navbar.etl-nav .nav-dropdown-menu > *{
  display: block !important;
  grid-template-columns: 1fr !important;
}
/* =========================
   TERMINAL DROPDOWN — readable + hover
   ========================= */

/* контейнер */
.navbar.etl-nav .nav-dropdown-menu{
  min-width: 360px !important;
  max-width: 420px !important;
  padding: 12px !important;
}

/* ссылки (пункты меню) */
.navbar.etl-nav .nav-dropdown-menu a{
  display: block !important;
  padding: 12px 14px !important;
  margin: 4px 0 !important;

  font-size: 16px !important;       /* было мелко */
  font-weight: 700 !important;
  line-height: 1.2 !important;

  white-space: normal !important;   /* НЕ обрезать */
  overflow: visible !important;
  text-overflow: initial !important;

  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;

  transition: background .12s ease, border-color .12s ease, color .12s ease, transform .12s ease !important;
}

/* hover: чёткая рамка + лёгкая подложка + красный акцент */
.navbar.etl-nav .nav-dropdown-menu a:hover{
  background: #f8fafc !important;
  border-color: #e5e7eb !important;
  color: #111 !important;
  transform: translateY(-1px) !important;
}

/* активный пункт (если скрипт/страница ставит active/current) */
.navbar.etl-nav .nav-dropdown-menu a.active,
.navbar.etl-nav .nav-dropdown-menu a[aria-current="page"]{
  border-color: #e11d2e !important;
  box-shadow: inset 3px 0 0 #e11d2e !important; /* красный “терминальный” маркер */
}

/* заголовок внутри пункта (если есть span/strong) — делаем крупнее */
.navbar.etl-nav .nav-dropdown-menu a strong,
.navbar.etl-nav .nav-dropdown-menu a .title{
  font-size: 16px !important;
  font-weight: 800 !important;
}

/* описание (вторая строка) — показываем, но компактно и читабельно */
.navbar.etl-nav .nav-dropdown-menu a small,
.navbar.etl-nav .nav-dropdown-menu a .desc,
.navbar.etl-nav .nav-dropdown-menu a .muted{
  display: block !important;
  margin-top: 4px !important;

  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  color: rgba(17,18,22,.72) !important;

  white-space: normal !important;
  overflow: visible !important;
}

/* чтобы описание НЕ “перехватывало” hover клики */
.navbar.etl-nav .nav-dropdown-menu a *{
  pointer-events: none !important;
}
/* =========================
   ETL Terminal Navbar + Dropdown (clean)
   ========================= */

   .navbar.etl-nav{
    position: sticky;
    top: 0;
    z-index: 1000;
    height: 64px;
    background: rgba(255,255,255,.92);
    border-bottom: 1px solid #e7e7ea;
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
    backdrop-filter: saturate(1.2) blur(10px);
  }
  
  .navbar.etl-nav .nav-menu{
    display: flex;
    align-items: center;
    gap: 18px;
  }
  
  .navbar.etl-nav .nav-link{
    appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
  
    color: rgba(17,18,22,.82);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
  
    padding: 10px 12px;
    border-radius: 10px;
    transition: background .12s ease, color .12s ease, box-shadow .12s ease;
  }
  
  .navbar.etl-nav .nav-link:hover{
    background: rgba(17,18,22,.06);
    color: #111;
  }
  
  .navbar.etl-nav .nav-link.active,
  .navbar.etl-nav .nav-link[aria-current="page"]{
    background: rgba(225,29,46,.10);
    box-shadow: inset 0 0 0 1px rgba(225,29,46,.22);
    color: #111;
  }
  
  /* убрать стрелочки/иконки у триггера */
  .navbar.etl-nav .nav-dropdown-trigger::after{ content:none; }
  .navbar.etl-nav .nav-dropdown-trigger svg{ display:none; }
  
  /* dropdown container */
  .navbar.etl-nav .nav-dropdown{
    position: relative;
  }
  
  .navbar.etl-nav .nav-dropdown-menu{
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
  
    display: none;
    min-width: 360px;
    padding: 10px;
  
    background: #fff;
    border: 1px solid rgba(17,18,22,.10);
    border-radius: 14px;
    box-shadow: 0 22px 55px rgba(0,0,0,.14);
  
    overflow: hidden;
  }
  
  /* показать меню когда открыто (скрипт ставит aria-expanded=true на trigger) */
  .navbar.etl-nav .nav-dropdown-trigger[aria-expanded="true"] + .nav-dropdown-menu{
    display: block;
  }
  
  /* items */
  .navbar.etl-nav .nav-dropdown-menu a{
    display: block;
    padding: 12px 12px;
    border-radius: 12px;
    text-decoration: none;
  
    color: #111;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.15;
    transition: background .12s ease, box-shadow .12s ease, transform .12s ease;
  }
  
  .navbar.etl-nav .nav-dropdown-menu a:hover{
    background: rgba(17,18,22,.06);
    box-shadow: inset 0 0 0 1px rgba(17,18,22,.10);
    transform: translateY(-1px);
  }
  
  /* optional description line if present */
  .navbar.etl-nav .nav-dropdown-menu a small,
  .navbar.etl-nav .nav-dropdown-menu a .desc{
    display: block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.25;
    color: rgba(17,18,22,.68);
  }
  
  /* if you want NO descriptions — просто включи эту строку */
  /* .navbar.etl-nav .nav-dropdown-menu a small, .navbar.etl-nav .nav-dropdown-menu a .desc{ display:none; } */
  /* =========================
   DT_NAV_DROPDOWN_A_v2 (REAL .nav-dd-*)
   ========================= */

/* контейнер */
.navbar.etl-nav .nav-item.has-dropdown{
  position: relative;
}

/* прячем шеврон у "Услуги" */
.navbar.etl-nav .nav-dd-chevron{
  display: none !important;
}

/* меню */

/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS BEGIN --- */
/*
.navbar.etl-nav .nav-dd-menu{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 1200;

  display: none;

  width: 420px;
  max-width: min(420px, 92vw);

  padding: 10px;
  background: #fff;
  border: 1px solid rgba(17,18,22,.12);
  border-radius: 14px;
  box-shadow: 0 22px 55px rgba(0,0,0,.14);

  overflow: hidden;

  /* если пунктов много — скролл внутри */
  max-height: min(60vh, 520px);
  overflow: auto;
}
*/
/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS END --- */


/* открытие: JS ставит is-open на li И/ИЛИ aria-expanded на кнопке */
.navbar.etl-nav .nav-item.has-dropdown.is-open .nav-dd-menu,

/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS BEGIN --- */
/*
.navbar.etl-nav .nav-dd-btn[aria-expanded="true"] + .nav-dd-menu{
  display: block;
}
*/
/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS END --- */


/* пункты меню */
.navbar.etl-nav .nav-dd-item{
  display: block;
  padding: 12px 14px;

  border-radius: 12px;
  text-decoration: none;

  border: 1px solid transparent;
  background: transparent;

  color: #111;
  line-height: 1.15;

  /* чтобы не было обрезаний */
  white-space: normal;
}

/* заголовок и описание */
.navbar.etl-nav .nav-dd-item .tt{
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: #111;
}

.navbar.etl-nav .nav-dd-item .dd{
  display: block;
  margin-top: 4px;

  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  color: rgba(17,18,22,.66);
}

/* hover/focus */
.navbar.etl-nav .nav-dd-item:hover{
  background: rgba(17,18,22,.06);
  border-color: rgba(17,18,22,.10);
}

.navbar.etl-nav .nav-dd-item:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(225,29,46,.18);
  border-color: rgba(225,29,46,.22);
}

/* active/current */
.navbar.etl-nav .nav-dd-item.is-active,
.navbar.etl-nav .nav-dd-item.is-current{
  background: rgba(225,29,46,.08);
  border-color: rgba(225,29,46,.22);
}

/* мобилка: десктоп меню прячем (если у тебя отдельное мобильное) */
@media (max-width: 980px){
  .navbar.etl-nav .nav-menu{ display: none; }
}

/* DT209_SAFE_HEADER_COLOR_LOGO_FIX — force clean premium header + fix logo aspect */
.navbar.etl-nav{
  background: #0f1216 !important; /* clean graphite */
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.22) !important;
}
.navbar.etl-nav .logo{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 10px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}
.navbar.etl-nav .logo img{
  height: 44px !important;
  width: auto !important;        /* prevent “crumpled” logo */
  max-width: none !important;
  object-fit: contain !important;
  filter: none !important;       /* remove dirty grayscale/filters */
  opacity: 1 !important;
}
/* menu text */
.navbar.etl-nav .nav-links a,
.navbar.etl-nav .nav-links button,
.navbar.etl-nav .nav-item{
  color: rgba(255,255,255,.92) !important;
}
.navbar.etl-nav .nav-links a:hover,
.navbar.etl-nav .nav-links button:hover{
  color: #ffffff !important;
}
/* dropdown: make it premium and readable */
.navbar.etl-nav .nav-dd-menu,
.navbar.etl-nav .dropdown,

/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS BEGIN --- */
/*
.navbar.etl-nav .services-dropdown{
  background: rgba(17,20,26,.94) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.45) !important;
  backdrop-filter: blur(10px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
}
*/
/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS END --- */

.navbar.etl-nav .nav-dd-menu a,
.navbar.etl-nav .dropdown a,

/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS BEGIN --- */
/*
.navbar.etl-nav .services-dropdown a{
  color: rgba(255,255,255,.90) !important;
}
*/
/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS END --- */

.navbar.etl-nav .nav-dd-menu a:hover,
.navbar.etl-nav .dropdown a:hover,

/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS BEGIN --- */
/*
.navbar.etl-nav .services-dropdown a:hover{
  background: rgba(255,255,255,.06) !important;
  outline: 1px solid rgba(255,255,255,.14) !important;
}
*/
/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS END --- */

/* CTA button (if exists) */
.navbar.etl-nav .nav-cta,
.navbar.etl-nav .btn-cta,
.navbar.etl-nav .cta{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #fff !important;
}

/* =========================================================
   DT219: LIGHT HEADER + HERO TRUCK DIM CARDS
   Safe overrides (keeps existing navbar layout)
   ========================================================= */

:root{
  --etl-header-bg: rgba(255,255,255,0.74);
  --etl-header-border: rgba(29,29,27,0.10);
  --etl-card-bg: rgba(255,255,255,0.78);
  --etl-card-border: rgba(29,29,27,0.12);
}

/* Make header light/premium even if older patches forced it dark */
.navbar,
.etl-nav,
.etl-nav.navbar,
.navbar.etl-nav{
  background: var(--etl-header-bg) !important;
  color: rgba(29,29,27,0.92) !important;
  border-bottom: 1px solid var(--etl-header-border) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.navbar a,
.etl-nav a{
  color: rgba(29,29,27,0.78) !important;
}
.navbar a:hover,
.etl-nav a:hover{
  color: rgba(29,29,27,1) !important;
}

/* HERO dimension cards */
.hero-scene{ position: relative; }

.truck-dims{
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: flex;
  gap: 10px;
  align-items: stretch;
  z-index: 3;
}

.dim-card{
  background: var(--etl-card-bg);
  border: 1px solid var(--etl-card-border);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.10);
  min-width: 118px;
}

.dim-card .k{
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(29,29,27,0.55);
  margin-bottom: 4px;
}

.dim-card .v{
  font-family: "JetBrains Mono", "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-weight: 650;
  font-size: 14px;
  color: rgba(29,29,27,0.90);
  white-space: nowrap;
}

.dim-card .s{
  margin-top: 4px;
  font-size: 11px;
  color: rgba(29,29,27,0.50);
}

@media (max-width: 720px){
  .truck-dims{
    position: static;
    margin-top: 10px;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .dim-card{ min-width: 0; }
}

/* =========================================================
   DT220: HERO VISUAL + LIGHT HERO + KPI CARDS
   ========================================================= */

/* 1) Make hero light/premium */
.hero-section{
  background:
    radial-gradient(1000px 520px at 75% 40%, rgba(229,38,41,0.06) 0%, rgba(229,38,41,0.00) 55%),
    radial-gradient(900px 480px at 20% 20%, rgba(29,29,27,0.05) 0%, rgba(29,29,27,0.00) 60%),
    linear-gradient(180deg, #ffffff 0%, #fbfbfc 60%, #ffffff 100%) !important;
}

.hero-title{ color:#111111 !important; text-shadow:none !important; }
.hero-subtitle{ color:rgba(29,29,27,0.70) !important; }

.hero-badge{
  color: var(--etl-red);
  background: rgba(229,38,41,0.06);
  border-color: rgba(229,38,41,0.25);
}

.hero-underline{ background: var(--etl-red) !important; }

/* 2) Ensure hero truck image is visible (container.png) */
.hero-visual{ display:flex !important; }
.container-drop-zone{ background: transparent !important; }
.container-img{
  opacity: 1 !important;
  filter: drop-shadow(0 30px 80px rgba(0,0,0,0.22));
}

/* 3) KPI cards */
.stats-section{
  opacity: 1 !important;
  transform: none !important;
  background: #ffffff;
}

.stats-grid{
  gap: 18px;
}

.stat-card{
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(29,29,27,0.10);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.06);
  backdrop-filter: blur(6px);
}

.stat-number{
  color:#111111;
  letter-spacing: 0.01em;
}

.stat-label{
  color: rgba(29,29,27,0.64);
}

@media (max-width: 980px){
  .hero-section{ padding-top: 110px !important; }
  .hero-visual{ margin-top: 16px; }
  .container-img{ width: min(560px, 86vw) !important; }
}
/* DT304_SAFE_FONT_SCOPE_RESET */
/* Typography scope: Bowler only for loud headings; Roboto for UI */
:root{
  --font-ui: "Mono","Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --font-head: "Bowler", var(--font-ui);
}
/* Default UI */
html, body{
  font-family: var(--font-ui) !important;
}
/* Navigation + UI controls */
nav, .navbar, .etl-nav, .p-nav, .p-navbar,
a, button, input, select, textarea, label,
.p-btn, .p-btn-primary, .p-btn-secondary, .btn, .button,
.card, .panel, .section, .container, .grid{
  font-family: var(--font-ui) !important;
}
/* Loud headings only */
h1, .hero-title, .hero__title, .p-hero__title,
.headline, .headline-strong, .accent-title{
  font-family: var(--font-head) !important;
}
/* Secondary headings: keep UI font unless explicitly styled elsewhere */
h2, h3, h4, h5, h6{
  font-family: var(--font-ui) !important;
}
/* DT305_SAFE_NAV_DROPDOWN_HOVER_INTENT */
/* Make dropdown easier to reach: small hover bridge + gentle motion + keep-open window */
.etl-nav .nav-dropdown,
.etl-nav .services-dropdown,
.nav-dropdown,

/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS BEGIN --- */
/*
.services-dropdown{
  will-change: transform, opacity;
  transform-origin: top;
  transition: opacity .18s ease, transform .18s ease;
}
*/
/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS END --- */


/* If your dropdown uses visibility/opacity toggle, keep animations smooth */
.nav-dropdown[aria-hidden="false"],
.services-dropdown[aria-hidden="false"],
.nav-dropdown.is-open,

/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS BEGIN --- */
/*
.services-dropdown.is-open{
  opacity: 1;
  transform: translateY(0);
}
*/
/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS END --- */


.nav-dropdown[aria-hidden="true"],

/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS BEGIN --- */
/*
.services-dropdown[aria-hidden="true"]{
  opacity: 0;
  transform: translateY(-6px);
}
*/
/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS END --- */


/* Hover bridge: prevents the "gap" that closes the menu while cursor moves down */
.etl-nav .nav-item.has-dropdown,
.etl-nav .nav-item--dropdown,
.etl-nav .services-item{
  position: relative;
}

.etl-nav .nav-item.has-dropdown::after,
.etl-nav .nav-item--dropdown::after,
.etl-nav .services-item::after{
  content: "";
  position: absolute;
  left: -10px;
  right: -10px;
  top: 100%;
  height: 18px;
  background: transparent;
}

/* Bigger safe padding on dropdown container */
.etl-nav .nav-dropdown,

/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS BEGIN --- */
/*
.etl-nav .services-dropdown{
  margin-top: 6px;
  padding-top: 10px;
}
*/
/* --- DT616_NEUTRALIZED_DROPDOWN_BLOCKS END --- */


/* DT312_SAFE_REQUEST_FORM_LAYOUT_SIMPLIFY */
@media (min-width: 900px){
  #rf-form.rf-grid{
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: 14px 18px !important;
    align-items: start;
  }
  #rf-form.rf-grid .rf-field{ grid-column: span 12; }
  #rf-form.rf-grid .rf-field.w3{ grid-column: span 3; }
  #rf-form.rf-grid .rf-field.w4{ grid-column: span 4; }
  #rf-form.rf-grid .rf-field.w6{ grid-column: span 6; }
  #rf-form.rf-grid .rf-field.w12{ grid-column: span 12; }
  #rf-form.rf-grid .rf-field.w12 .rf-actions{ display:flex; gap:10px; flex-wrap:wrap; }
}


/* DT234_SAFE_NAVBAR_GLASS_VISIBILITY_BG: Glass navbar visibility + white page bg (SAFE override) */
html, body { background:#fff !important; }
:root{ --bg:#fff; --text:#111; --muted:#575756; }

/* Make the monolith navbar look premium & readable on light hero */
:root{
  --p-bg: rgba(255,255,255,.58);
  --p-border: rgba(29,29,27,.10);
  --p-text: #14171a;
  --p-text-muted: rgba(20,23,26,.72);
}

.p-header{
  background: var(--p-bg) !important;
  border-bottom: 1px solid var(--p-border) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.p-header.is-scrolled{
  background: rgba(255,255,255,.86) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.10) !important;
}

.p-link{
  color: var(--p-text-muted) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.65);
}
.p-link:hover,
.p-link.is-active,
.p-dd-trigger[aria-expanded="true"]{
  color: var(--p-text) !important;
}

/* Actions */
.p-btn-primary{ box-shadow: 0 10px 26px rgba(229,38,41,.20) !important; }

/* Ensure tracking/cabinet are not visually "different" */
.p-menu-list .p-link{ font-family: var(--p-font) !important; }


/* === DT236_SAFE_ROLLBACK_NAV_HERO_FIX_v2:BEGIN === */
/* NAVBAR + HERO VISUAL ROLLBACK OVERRIDES (SAFE) */

/* 1) Никогда не прячем hero-визуал (грузовик) из-за конфликтующих оверраидов */
.hero-visual, .hero__visual, .heroVisual, .hero-graphic, .hero__graphic,
.hero-right, .hero__right, .hero-media, .hero__media, .hero-truck, .hero__truck,
.hero-illustration, .hero__illustration {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Если картинка грузовика внутри — тоже не душим */
.hero-visual img, .hero__visual img, .hero-right img, .hero__right img,
.hero-media img, .hero__media img, .hero-truck img, .hero__truck img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* 2) Навбар: поверх hero — белый текст, читаемо */
.p-header, .etl-nav, .navbar, header.site-header {
  background: rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}

.p-header a, .etl-nav a, .navbar a,
.p-header .nav a, .etl-nav .nav a, .navbar .nav a {
  color: rgba(255,255,255,0.92) !important;
  text-shadow: 0 1px 10px rgba(0,0,0,0.25);
}

.p-header .nav a:hover, .etl-nav .nav a:hover, .navbar .nav a:hover {
  color: #fff !important;
}

.p-header .nav a.active, .etl-nav .nav a.active, .navbar .nav a.active,
.p-header .nav a[aria-current="page"], .etl-nav .nav a[aria-current="page"], .navbar .nav a[aria-current="page"] {
  color: #fff !important;
}

/* 3) При скролле — делаем светлее фон и тёмный текст (если у тебя есть класс is-scrolled) */
.p-header.is-scrolled, .etl-nav.is-scrolled, .navbar.is-scrolled, header.site-header.is-scrolled {
  background: rgba(255,255,255,0.86) !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}

.p-header.is-scrolled a, .etl-nav.is-scrolled a, .navbar.is-scrolled a {
  color: rgba(10,12,16,0.92) !important;
  text-shadow: none !important;
}

/* 4) Убираем “серый фон” на уровне страницы (не трогаем hero-градиенты) */
html, body {
  background: #fff !important;
}
/* === DT236_SAFE_ROLLBACK_NAV_HERO_FIX_v2:END === */

/* DT237_SAFE_NAV_READABLE_CLEAN_BG:BEGIN */
:root{ --dt237-white:#ffffff; --dt237-ink:#0f1216; --dt237-ink-muted:rgba(15,18,22,.72); }

html, body {
  background: var(--dt237-white) !important;
  background-color: var(--dt237-white) !important;
}

/* NAV: readable + glass */
.p-header {
  --p-bg: rgba(255,255,255,.62);
  --p-border: rgba(15,18,22,.10);
  --p-text: var(--dt237-ink);
  --p-text-muted: var(--dt237-ink-muted);
  background: var(--p-bg) !important;
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: 1px solid var(--p-border);
}
.p-header .p-link {
  color: var(--p-text) !important;
  opacity: .92;
}
.p-header .p-link:hover { opacity: 1; }
.p-header .p-dd-trigger, .p-header .p-dd-trigger * { color: var(--p-text) !important; }

/* When scrolled – slightly denser for contrast */
.p-header.is-scrolled {
  --p-bg: rgba(255,255,255,.82);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

/* HERO: remove grey overlay/pattern for clean look, keep truck */
.hero-premium {
  background: #fff !important;
  color: var(--dt237-ink) !important;
}
.hero-overlay { background: none !important; }
.hero-bg { opacity: 0 !important; }
.hero-subtitle { color: rgba(15,18,22,.78) !important; }
.hero-tag { color: rgba(15,18,22,.70) !important; border-color: rgba(15,18,22,.18) !important; }
.hero-accent { color: rgba(15,18,22,.18) !important; }
/* DT237_SAFE_NAV_READABLE_CLEAN_BG:END */
/* =========================
   NAVBAR FINAL CLEAN FIX
   ========================= */

/* 1. ЧИСТЫЙ ФОН САЙТА */
html, body {
  background: #ffffff !important;
}

/* 2. NAVBAR — ПРОЗРАЧНЫЙ, НО ЧИТАЕМЫЙ */
.etl-nav,
.p-header {
  background: rgba(255,255,255,0.75) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* 3. ТЕКСТ МЕНЮ — ЧИТАЕМЫЙ */
.etl-nav a,
.p-header a {
  color: #1b1b1b !important;
  font-weight: 500;
}

/* 4. HOVER */
.etl-nav a:hover,
.p-header a:hover {
  color: #000 !important;
}

/* 5. АКТИВНЫЙ ПУНКТ (ГЛАВНОЕ!) */
.etl-nav a.active,
.etl-nav li.active a,
.p-header a.active {
  color: #000 !important;
  font-weight: 600;
  position: relative;
}

.etl-nav a.active::after,
.p-header a.active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 2px;
  background: #e53935;
  border-radius: 2px;
}

/* 6. УБИРАЕМ "ГРЯЗНЫЙ" СЕРЫЙ ОВЕРЛЕЙ В HERO */
.hero::before,
.hero::after,
.hero-overlay,
.hero-bg {
  display: none !important;
}

/* === DT501b_SAFE_NAV_CONTRAST_HARD:BEGIN === */
/* Force readable nav links across ALL pages (index included) */
.p-nav{
  background: rgba(255,255,255,.92) !important;
  border-bottom: 1px solid rgba(17,17,17,.08) !important;
  backdrop-filter: saturate(180%) blur(10px);
}
.p-nav .p-link,
.p-menu-list .p-link,
.p-dd-trigger.p-link{
  color: rgba(17,17,17,.78) !important;
  text-shadow: none !important;
  opacity: 1 !important;
}
.p-nav .p-link:hover,
.p-nav .p-link:focus-visible{
  color: rgba(17,17,17,.95) !important;
}
/* Active/current */
.p-nav .p-link.is-active,
.p-nav .p-menu-list a[aria-current="page"],
.p-nav .p-menu-list a[aria-current="true"]{
  color: #E52629 !important;
}
/* Dropdown menu items */
.p-nav .p-dd-panel a,
.p-nav .p-dd-panel button{
  color: rgba(17,17,17,.82) !important;
}
.p-nav .p-dd-panel a:hover,
.p-nav .p-dd-panel button:hover{
  color: rgba(17,17,17,.96) !important;
}
/* === DT501b_SAFE_NAV_CONTRAST_HARD:END === */
.chk--wide { grid-column: 1 / -1; }

/* DT619_DROPDOWN_CSS_SAFETY: hide common legacy dropdown containers */
.dropdown, .dropdown-menu, .etl-dd, .dd-menu, .dd-open, .services-dropdown, .nav-services-dropdown,
[data-dropdown], [data-dd], [data-dropdown-menu], [data-dd-menu] { display:none !important; visibility:hidden !important; pointer-events:none !important; }
/* keep unified */
.p-has-dropdown .p-dd { display:none; }
.p-has-dropdown.is-open .p-dd { display:block; }

/* DT651: remove full-width separators/accent lines before sections (incl. "Наши услуги") */
h2::before{
  content: none !important;
  display: none !important;
}
.section-light,
.section-muted{
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* DT652: hard-stop any legacy debug viewport/frame outlines */
body {
  outline: none !important;
}

/* QA hotfix: mobile touch targets */
@media (max-width: 980px){
  .btn,
  .btn-primary,
  .btn-outline,
  .p-btn-primary,
  .svc-ghost,
  .seg button,
  .map-geo-btn,
  .map-select{
    min-height: 44px !important;
  }
}

/* Homepage flow tuning: lift "Регулярность отправок" closer to process block */
body#top #how{
  padding-bottom: 44px !important;
}
body#top #dispatch-regularity{
  padding-top: 34px !important;
  padding-bottom: 56px !important;
}
@media (max-width: 980px){
  body#top #how{
    padding-bottom: 36px !important;
  }
  body#top #dispatch-regularity{
    padding-top: 28px !important;
    padding-bottom: 44px !important;
  }
}

/* ===== Global Responsive Safety Layer (SAFE) ===== */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

main, section, article, aside, header, footer {
  max-width: 100%;
}

img, picture, video, canvas, svg {
  max-width: 100%;
  height: auto;
}

table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

body#top .container,
body#top main .container,
body#top section > .container {
  width: min(100%, 1540px);
  margin-inline: auto;
}

@media (max-width: 980px) {
  body#top .container,
  body#top main .container,
  body#top section > .container {
    width: calc(100% - 16px);
  }
}

/* Prevent decorative absolute layers from pushing viewport width */
.hero-premium,
.hero-grid,
.hero-visual,
.services-bg,
.geo-svg-wrap,
.bento-grid {
  max-width: 100%;
  overflow-x: clip;
}