/* Клиентский сайт fenix-metall.webtm.ru (client.html): светлая тёплая тема поверх app.css, тёмные первый экран и подвал,
   оранжевый акцент логотипа. Всё, что нужно только менеджеру, спрятано (.cl-off, конструктор, «Картинка»). */
:root {
  --bg: #f6f3ef; --panel: #fff; --panel2: #f4efe9; --fg: #1d1915; --muted: #70675e; --line: #e8e0d6;
  --accent: #d8621a; --accent-fg: #fff; --btn: #fff; --on: #1d1915; --on-fg: #fff;
  --scene-bg: #e7ebee; --card-img: #eef0f1; --r: 16px; --shadow: 0 12px 32px rgba(45, 28, 12, .09);
  --dark: #1b1612; --dark2: #2a1f17; --glow: #f08a2c;
  --f: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
body { font-size: 15.5px; background: var(--bg) }
h1 { font-size: 30px; letter-spacing: -.01em } h2 { font-size: 21px; letter-spacing: -.005em }

/* только для менеджера */
.cl-off, [data-t="png"], a[href*="/build"], #req, .est-opts { display: none !important }

/* шапка */
.top { background: color-mix(in srgb, #fff 88%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); padding: 10px 20px }
.top nav > a[aria-current="page"], .grp.cur > .grp-btn { background: var(--panel2); color: var(--fg) }
.grp-menu a[aria-current="page"] { background: var(--panel2); color: var(--fg); font-weight: 600 }
.nav-contact { margin-left: 10px; background: var(--accent); color: #fff; border: 0; border-radius: 99px; padding: 9px 18px; font-weight: 600; box-shadow: 0 6px 16px rgba(216, 98, 26, .28) }
.nav-contact:hover { background: #c2540f }
@media (max-width: 1120px) { .nav-contact { margin: 10px 0 0; min-height: 44px } }

/* кнопки */
button, .btn { border-radius: 12px }
.btn.primary, button.primary { box-shadow: 0 6px 16px rgba(216, 98, 26, .25) }
.btn.primary:hover, button.primary:hover { background: #c2540f; border-color: #c2540f }
.cta { min-height: 48px; padding: 12px 22px; font-size: 16px; border-radius: 14px }
.cta svg { width: 22px; height: 22px; margin-right: 2px }
.cta img { width: 24px; height: auto; margin-right: 4px; flex: none }
button.ghost, .btn.ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .35); min-height: 48px; padding: 12px 22px; font-size: 16px; border-radius: 14px }
button.ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .08) }
.chip[aria-pressed="true"] { background: var(--fg); border-color: var(--fg) }

/* каталоги разделов */
.catalog { padding: 26px 20px 56px }
.hero h1 { font-size: 32px }
.filters { border: 0; box-shadow: 0 2px 10px rgba(45, 28, 12, .05); border-radius: var(--r); padding: 14px 16px }
.grid { gap: 18px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)) }
.card { border: 0; border-radius: var(--r); box-shadow: 0 2px 10px rgba(45, 28, 12, .06); transition: transform .2s, box-shadow .2s }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow) }
.card .img img { transition: transform .5s }
.card:hover .img img { transform: scale(1.04) }
.card .body { padding: 14px 16px 16px; gap: 7px }
.card .ttl b { font-size: 16.5px }
.card .price { font-size: 17px; font-weight: 700; color: var(--fg) }
.card .price.alt { font-size: 14px; color: var(--muted); font-weight: 500 }
.badge { border-color: transparent; background: var(--panel2) }

/* карточка изделия */
.vpage { padding: 20px; gap: 22px; max-width: 1480px }
.vpage .stage { border: 0; border-radius: 20px; box-shadow: var(--shadow) }
.vinfo { gap: 16px }
.vinfo h1 { font-size: 28px }
.panel { border: 0; border-radius: var(--r); box-shadow: 0 2px 10px rgba(45, 28, 12, .06); padding: 18px }
.cbuy { display: grid; gap: 14px; background: linear-gradient(180deg, #fff, #fffaf5) }
.cprice { display: flex; flex-wrap: wrap; gap: 8px 30px; align-items: flex-end }
.cprice .sum { font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1 }
.cprice .sum.alt { font-size: 22px; font-weight: 700; color: var(--muted) }
.cprice .sum.req { font-size: 26px }
.cbuy .actions { gap: 10px }
.cbuy .actions .cta { flex: 1 1 240px }
.cbuy .actions button:not(.cta) { min-height: 48px; border-radius: 14px; padding: 12px 18px; font-size: 15px }
.stage .wm { position: absolute; right: 14px; bottom: 12px; z-index: 2; display: flex; align-items: center; gap: 6px; pointer-events: none; user-select: none;
  color: rgba(255, 255, 255, .9); font: 700 15px/1 var(--f); letter-spacing: .02em; text-shadow: 0 1px 3px rgba(0, 0, 0, .35); opacity: .75 }
.stage .wm svg { width: 26px; height: 26px; color: var(--glow); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3)) }
.stage .wm img { display: block; height: 30px; width: auto; opacity: .88; filter: drop-shadow(0 1px 3px rgba(255, 255, 255, .6)) }
.stage canvas { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none }

/* окно «Связаться» */
.cdlg { max-width: 440px; border: 0; border-radius: 22px; padding: 26px 24px 22px; box-shadow: 0 30px 80px rgba(0, 0, 0, .3) }
.cdlg::backdrop { background: rgba(20, 14, 10, .55); backdrop-filter: blur(3px) }
.cdlg-in { display: grid; gap: 12px; position: relative }
.cdlg-in h2 { margin: 0; font-size: 22px }
.cdlg-in p { margin: 0; color: var(--muted) }
.cdlg .x { position: absolute; right: -8px; top: -12px; width: 36px; height: 36px; min-height: 0; padding: 0; border: 0; border-radius: 50%; font-size: 22px; color: var(--muted); background: var(--panel2) }
.cdlg-logo { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #b3320a, #ec7d1c 60%, #f8cf55) }
.cdlg-logo img { width: 38px; height: auto; display: block }
.cdlg-phone { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; background: var(--panel2); border-radius: 14px }
.cdlg-phone b { font-size: 22px; letter-spacing: .01em; flex: 1 }
.cdlg-msg { display: grid; gap: 4px }
.cdlg-msg textarea { width: 100%; resize: none; font-size: 13.5px; background: var(--panel2); border: 0; border-radius: 12px }
.cdlg .actions { gap: 8px } .cdlg .actions > * { flex: 1 1 auto }

/* главная */
.chome { padding-bottom: 20px }
.chero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 44px; align-items: center;
  max-width: 1440px; margin: 18px auto 0; padding: 56px 52px; border-radius: 28px; color: #f6efe7;
  background: radial-gradient(120% 90% at 85% 10%, rgba(240, 138, 44, .32), transparent 55%), radial-gradient(80% 70% at 0% 100%, rgba(179, 50, 10, .35), transparent 60%), linear-gradient(160deg, var(--dark2), var(--dark)) }
.chero .eyebrow { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #f4b26a; margin-bottom: 14px }
.chero h1 { font-size: clamp(32px, 4.2vw, 54px); line-height: 1.05; letter-spacing: -.025em; margin: 0 0 16px; color: #fff }
.chero .lead { font-size: 18px; line-height: 1.5; color: #d9cec3; max-width: 560px; margin: 0 0 26px }
.chero .actions { gap: 12px }
.chero .facts { list-style: none; display: flex; flex-wrap: wrap; gap: 14px 34px; padding: 0; margin: 34px 0 0 }
.chero .facts li { display: grid }
.chero .facts b { font-size: 28px; color: #fff; letter-spacing: -.02em }
.chero .facts span { font-size: 13.5px; color: #bfb2a5 }

/* слайдер «Наши работы» на первом экране */
.works { display: grid; gap: 14px; min-width: 0 }
.works-stage { position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: #2a2018; cursor: zoom-in; touch-action: pan-y;
  -webkit-user-select: none; user-select: none; outline: none; isolation: isolate;
  box-shadow: 0 34px 80px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .09) }
.works-stage:focus-visible { box-shadow: 0 0 0 3px #f08a2c, 0 34px 80px rgba(0, 0, 0, .5) }
.ws { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 0s 1.15s }   /* уходящий кадр гаснет, когда новый уже проявился поверх */
.ws.on { opacity: 1; z-index: 1; transition: opacity 1.1s ease }
.ws img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.07); transition: transform 0s 1.15s; -webkit-user-drag: none }
.ws.on img { transform: scale(1); transition: transform 7s cubic-bezier(.2, .6, .3, 1) }
.works-shade { position: absolute; left: 0; right: 0; bottom: 0; height: 48%; z-index: 2; pointer-events: none; background: linear-gradient(to top, rgba(14, 10, 7, .84), rgba(14, 10, 7, .35) 55%, rgba(14, 10, 7, 0)) }
.works-cap { position: absolute; left: 24px; right: 112px; bottom: 24px; z-index: 3; display: grid; gap: 8px; justify-items: start; pointer-events: none }
.works-tag { display: inline-block; font-size: 11.5px; line-height: 1; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #fff; padding: 6px 10px; border-radius: 999px;
  background: linear-gradient(135deg, #b3320a, #ec7d1c); box-shadow: 0 4px 14px rgba(179, 50, 10, .35) }
.works-cap b { font-size: 22px; line-height: 1.2; letter-spacing: -.01em; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .45) }
.works-cap.swap { animation: wcap .7s ease both }
@keyframes wcap { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
.works-count { position: absolute; right: 24px; bottom: 24px; z-index: 3; display: flex; align-items: baseline; gap: 5px; color: #fff; font-variant-numeric: tabular-nums; pointer-events: none; line-height: 1 }
.works-count b { font-size: 28px; letter-spacing: -.02em }
.works-count span { font-size: 14px; color: #d9cec3 }
.works-nav, .works-zoom { position: absolute; z-index: 4; display: grid; place-items: center; width: 48px; height: 48px; min-height: 0; padding: 0; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3); background: rgba(20, 14, 10, .4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; cursor: pointer;
  transition: opacity .25s, background .2s, border-color .2s, transform .2s; box-shadow: none }
.works-nav { top: calc(50% - 24px) } .works-nav.prev { left: 16px } .works-nav.next { right: 16px }
.works-zoom { top: 16px; right: 16px; width: 42px; height: 42px }
.works-nav svg { width: 22px; height: 22px } .works-zoom svg { width: 19px; height: 19px }
.works-nav:hover, .works-zoom:hover { background: #d8621a; border-color: #d8621a; color: #fff }
.works-nav:active { transform: scale(.94) }
@media (hover: hover) {
  .works-nav, .works-zoom { opacity: 0 }
  .works-stage:hover .works-nav, .works-stage:hover .works-zoom, .works-stage:focus-within .works-nav, .works-stage:focus-within .works-zoom { opacity: 1 }
}
.works-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 4; background: rgba(255, 255, 255, .14) }
.works-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ec7d1c, #f8cf55) }
.works-stage.run .works-bar i { animation: wbar 5.5s linear forwards }
.works-stage.paused .works-bar i { animation-play-state: paused }
@keyframes wbar { from { width: 0 } to { width: 100% } }
.works-thumbs { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; padding: 4px 2px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent) }
.works-thumbs::-webkit-scrollbar { display: none }
.wt { flex: none; width: 96px; height: 54px; min-height: 0; padding: 0; border: 0; border-radius: 10px; overflow: hidden; cursor: pointer; background: #3a2d22; opacity: .5;
  transition: opacity .25s, box-shadow .25s; box-shadow: none }
.wt img { width: 100%; height: 100%; object-fit: cover; display: block }
.wt:hover { opacity: .85 }
.wt.on { opacity: 1; box-shadow: inset 0 0 0 2px #f08a2c }
.wt:focus-visible { outline: 2px solid #f08a2c; outline-offset: 1px }
@media (prefers-reduced-motion: reduce) { .ws, .ws img, .works-cap.swap { transition: none; animation: none } .ws img { transform: none } }

/* просмотр фото на весь экран */
html.wlb-open { overflow: hidden }
.wlb { position: fixed; inset: 0; z-index: 100; display: grid; grid-template-rows: minmax(0, 1fr) auto; padding: 64px 84px 20px; background: rgba(12, 9, 7, .95);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: wlbin .25s ease; touch-action: pan-y }
@keyframes wlbin { from { opacity: 0 } to { opacity: 1 } }
.wlb-fig { margin: 0; min-height: 0; display: grid; place-items: center }
.wlb-fig img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 14px; box-shadow: 0 30px 90px rgba(0, 0, 0, .6); opacity: 0; transform: scale(.985); transition: opacity .35s, transform .35s;
  -webkit-user-select: none; user-select: none }
.wlb-fig img.in { opacity: 1; transform: none }
.wlb-cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; padding-top: 16px; color: #f6efe7; text-align: center }
.wlb-cap b { font-size: 18px; font-weight: 600 }
.wlb-n { color: #a99c8f; font-variant-numeric: tabular-nums; font-size: 14px }
.wlb-btn { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; min-height: 0; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; transition: background .2s, border-color .2s; box-shadow: none }
.wlb-btn:hover { background: #d8621a; border-color: #d8621a; color: #fff }
.wlb-btn svg { width: 24px; height: 24px }
.wlb-x { top: 14px; right: 14px; width: 46px; height: 46px }
.wlb-nav { top: calc(50% - 26px) } .wlb-nav.prev { left: 16px } .wlb-nav.next { right: 16px }
.chome > section:not(.chero) { max-width: 1440px; margin: 0 auto; padding: 0 20px }
.cgroup { padding-top: 54px !important }
.cgroup-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-bottom: 18px }
.cgroup-head h2 { font-size: 28px; margin: 0 }
.cgroup-head p { margin: 0 }
.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px }
.ctile { display: flex; flex-direction: column; background: var(--panel); border-radius: 20px; overflow: hidden; color: var(--fg); text-decoration: none; box-shadow: 0 2px 10px rgba(45, 28, 12, .06); transition: transform .2s, box-shadow .2s }
.ctile:hover { transform: translateY(-4px); box-shadow: var(--shadow) }
.ctile-img { aspect-ratio: 4/3; background: var(--card-img); overflow: hidden }
.ctile-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s }
.ctile:hover .ctile-img img { transform: scale(1.05) }
.ctile-body { display: grid; gap: 6px; padding: 16px 18px 18px; flex: 1; align-content: start }
.ctile-body b { font-size: 18px; letter-spacing: -.01em }
.ctile-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 6px }
.ctile .from { font-weight: 700; font-size: 16px; color: var(--accent) }
.csteps { padding-top: 64px !important }
.csteps h2 { font-size: 28px; margin-bottom: 18px }
.csteps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; counter-reset: s }
.csteps li { display: grid; gap: 6px; align-content: start; background: var(--panel); border-radius: 20px; padding: 22px; box-shadow: 0 2px 10px rgba(45, 28, 12, .06) }
.csteps .n { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, #b3320a, #ec7d1c); margin-bottom: 6px }
.csteps b { font-size: 17px }
.ccta { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin: 64px auto 0 !important; max-width: 1400px !important;
  padding: 34px 40px !important; border-radius: 24px; color: #fff; background: linear-gradient(120deg, #b3320a, #e06a1c 55%, #f0a03a) }
.ccta h2 { font-size: 28px; margin: 0 0 6px; color: #fff }
.ccta p { margin: 0; color: #fff3e6; font-size: 16.5px }
.ccta .cta { background: #fff; color: var(--dark); border-color: #fff; box-shadow: 0 10px 24px rgba(0, 0, 0, .18) }
.ccta .cta:hover { background: #fff3e6 }

/* подвал */
.cfoot { margin-top: 70px; background: var(--dark); color: #cfc3b7; padding: 46px 20px 26px }
.cfoot-in { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); gap: 40px }
.cfoot .brand { color: #fff } .cfoot .brand-name { color: #fff }
.cfoot .brand .logo-img { height: 44px }
.cfoot-brand { display: grid; gap: 14px; align-content: start; justify-items: start }
.cfoot-brand p { margin: 0; max-width: 360px; color: #a99c8f }
.cfoot-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px }
.cfoot-nav div { display: grid; gap: 8px; align-content: start }
.cfoot-nav b { color: #fff; font-size: 14px; margin-bottom: 4px }
.cfoot-nav a { color: #cfc3b7; text-decoration: none; font-size: 14px }
.cfoot-nav a:hover { color: #fff }
.cfoot-copy { max-width: 1400px; margin: 34px auto 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .1); color: #8f8276 }

@media (max-width: 1000px) {
  .chero { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 40px 28px; margin: 12px 12px 0 }
  /* на узком экране слайдер — сразу под текстом, до кнопок */
  .chero-txt { display: contents }
  .chero .eyebrow { order: 1; justify-self: start } .chero h1 { order: 2 } .chero .lead { order: 3 }
  .chero .works { order: 4; margin-bottom: 24px } .chero .actions { order: 5 } .chero .facts { order: 6; margin-top: 28px }
  .csteps ol { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .cfoot-in { grid-template-columns: minmax(0, 1fr) }
  .cfoot-nav { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 640px) {
  h1, .hero h1, .vinfo h1 { font-size: 24px }
  .chero { padding: 30px 20px; border-radius: 22px }
  .chero .lead { font-size: 16px }
  .works-stage { border-radius: 16px }
  .works-cap { left: 14px; right: 74px; bottom: 14px; gap: 6px }
  .works-cap b { font-size: 15.5px }
  .works-tag { font-size: 10px; padding: 5px 8px }
  .works-count { right: 14px; bottom: 15px } .works-count b { font-size: 20px } .works-count span { font-size: 12px }
  .works-nav { width: 38px; height: 38px; top: calc(50% - 19px) } .works-nav.prev { left: 10px } .works-nav.next { right: 10px }
  .works-nav svg { width: 18px; height: 18px }
  .works-zoom { top: 10px; right: 10px; width: 36px; height: 36px }
  .wt { width: 76px; height: 43px; border-radius: 8px }
  .wlb { padding: 60px 10px 86px; grid-template-rows: auto auto; align-content: center }   /* подпись — сразу под фото */
  .wlb-nav { top: auto; bottom: 18px; width: 48px; height: 48px } .wlb-nav.prev { left: calc(50% - 60px) } .wlb-nav.next { right: calc(50% - 60px) }
  .wlb-cap b { font-size: 16px }
  .chero .actions > * { flex: 1 1 100% }
  .cgroup-head h2, .csteps h2, .ccta h2 { font-size: 23px }
  .csteps ol { grid-template-columns: minmax(0, 1fr) }
  .ccta { padding: 26px 22px !important; margin: 48px 16px 0 !important }
  .cprice .sum { font-size: 29px }
  .vpage { padding: 12px }
}
@media print { .cfoot { display: none !important } }

/* выпадающие списки: своя стрелка с отступом от края (у системной на скруглённых полях отступа нет) */
select { -webkit-appearance: none; appearance: none; padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2370675e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px }
select:hover { border-color: var(--accent) }
.toolbar select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2370675e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 10px 7px; padding-right: 28px }

/* меню: иконка разделу; на компьютере — в выпадающих списках, на телефоне — плитки с иконкой и жирным текстом */
.top nav .mi { flex: none; display: grid; place-items: center; color: var(--accent) }
.ml { min-width: 0; line-height: 1.2 }
@media (min-width: 1121px) {
  .grp-menu a { display: flex; align-items: center; gap: 10px; padding: 7px 10px }
  .grp-menu .mi { width: 30px; height: 30px; border-radius: 9px; background: #fff1e4 }
  .grp-menu .mi svg { width: 18px; height: 18px }
  .top nav > a .mi { display: none }
}
@media (max-width: 1120px) {
  .top nav { background: var(--bg); padding: 4px 14px 18px; gap: 0 }
  .grp-btn { padding: 16px 4px 8px; font-size: 12px; letter-spacing: .08em }
  .grp-menu { gap: 8px }
  .grp-menu a, .top nav > a.nav-smart { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 9px 10px; border-radius: 14px;
    background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 3px rgba(45, 28, 12, .05); color: var(--fg); font-weight: 650; font-size: 15.5px; text-decoration: none }
  .grp-menu a:hover, .grp-menu a:active { border-color: var(--accent); background: #fff }
  .grp-menu a[aria-current="page"] { border-color: var(--accent); background: #fff7ef }
  .grp-menu .mi, .top nav > a .mi { width: 36px; height: 36px; border-radius: 11px; background: linear-gradient(135deg, #fff1e4, #ffdcbd) }
  .top nav > a.nav-smart { margin-top: 18px; padding: 10px 12px; border: 0; color: #fff; background: linear-gradient(120deg, #1d3a78, #3b82f6); box-shadow: 0 6px 16px rgba(29, 58, 120, .25) }
  .top nav > a.nav-smart .mi { background: rgba(255, 255, 255, .18); color: #fff }
  .top nav > a.nav-smart[aria-current="page"] { background: linear-gradient(120deg, #162e60, #2f6fe0); color: #fff }
  .nav-contact { margin-top: 14px }
}