/* Wolves sky-blue visual theme
   Primary: Sky Blue | Brand anchor: Company Logo Blue */
:root {
  --ink: #063b66;
  --ink-2: #075985;
  --ink-3: #0369a1;
  --mint: #38bdf8;
  --mint-soft: #bae6fd;
  --blue: #0ea5e9;
  --paper: #f0f9ff;
  --text: #0c4a6e;
  --muted: #52758a;
  --line: #c7e8f8;
  --shadow: 0 24px 60px rgba(2, 132, 199, .14);
}

body {
  color: var(--text);
  background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 34%, #eff8ff 100%);
}

/* Global navigation and controls */
.site-header.scrolled,
.catalog-page .site-header {
  background: rgba(2, 112, 180, .95);
  border-bottom-color: rgba(255, 255, 255, .2);
  box-shadow: 0 10px 32px rgba(3, 105, 161, .2);
}
.desktop-nav a::after { background: #7dd3fc; }
.header-contact { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.08); }
.header-contact:hover { border-color: #fff; background: rgba(255,255,255,.15); }
.header-contact i { color: #bae6fd; }
.mobile-menu { background: linear-gradient(160deg, #0369a1, #075985); }
.skip-link,
.btn-primary,
.back-top { color: #063b66; background: #7dd3fc; }
.btn-primary:hover,
.back-top:hover { background: #bae6fd; }
.toast { background: #075985; border-left-color: #38bdf8; }

/* Homepage hero */
.hero {
  background:
    radial-gradient(circle at 76% 38%, rgba(125, 211, 252, .95) 0, rgba(14, 165, 233, .92) 19%, rgba(2, 132, 199, .96) 42%, #075985 72%, #063b66 100%);
}
.hero::before { background: linear-gradient(transparent, rgba(3, 73, 112, .58)); }
.hero-grid,
.contact-grid {
  opacity: .48;
  background-image:
    linear-gradient(rgba(224, 242, 254, .13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(224, 242, 254, .13) 1px, transparent 1px);
}
.hero-grid::after {
  background: rgba(186, 230, 253, .6);
  box-shadow: 272px 0 rgba(186,230,253,.2), 816px 0 rgba(186,230,253,.2);
}
.hero-glow-one {
  border-color: rgba(224,242,254,.34);
  box-shadow: inset 0 0 130px rgba(125,211,252,.13);
}
.hero-glow-two { background: rgba(186,230,253,.22); }
.eyebrow,
.hero h1 em { color: #d9f3ff; }
.eyebrow span { background: #d9f3ff; }
.hero-copy > p { color: rgba(240,249,255,.82); }
.btn-ghost:hover { border-color: #bae6fd; background: rgba(255,255,255,.08); }
.orbit { border-color: rgba(224,242,254,.27); }
.orbit-one::before,
.orbit-one::after,
.orbit-two::before {
  background: #bae6fd;
  box-shadow: 0 0 18px #bae6fd;
}
.system-card {
  border-color: rgba(224,242,254,.38);
  background: linear-gradient(145deg, rgba(3,105,161,.78), rgba(6,59,102,.88));
  box-shadow: 0 46px 90px rgba(3, 72, 112, .34);
}
.system-card::before,
.system-card::after { border-color: #7dd3fc; }
.system-top i { background: #7dd3fc; box-shadow: 0 0 8px #7dd3fc; }
.system-top b { color: #bae6fd; }
.signal-row i::before { background: linear-gradient(90deg, #7dd3fc, #fff); }
.float-tag {
  border-color: rgba(224,242,254,.36);
  background: rgba(3,105,161,.75);
  box-shadow: 0 18px 34px rgba(3,72,112,.24);
}
.float-tag > i { border-color: #bae6fd; box-shadow: 0 0 12px rgba(186,230,253,.8); }
.scroll-cue span::after { background: #bae6fd; }

/* Brand overview */
.brand-strip { background: linear-gradient(90deg, #0284c7, #0369a1 55%, #075985); }
.strip-label { color: #dff5ff; }
.brand-wordmarks b::before { border-color: rgba(186,230,253,.85); }
.brands-section { background: linear-gradient(180deg, #f0f9ff, #e7f6ff); }
.section-index { color: #0284c7; }
.brand-showcase { box-shadow: 0 24px 64px rgba(2,132,199,.16); }
.brand-tab:hover { background: #e0f2fe; }
.brand-tab.active { background: linear-gradient(135deg, #0284c7, #075985); }
.brand-tab.active i { color: #bae6fd; }
.brand-panel { background: linear-gradient(135deg, #f8fdff, #e0f2fe); }
.brand-panel-label { color: #0284c7; }
.official-link:hover { color: #00509a; border-color: #38bdf8; }
.brand-category { border-color: #b9e3f8; background: rgba(255,255,255,.76); }
.brand-category span { color: #0369a1; border-color: #7dd3fc; }
.brand-chips span { color: #075985; background: #d9f2ff; }

/* Product overview */
.products-section { background: linear-gradient(145deg, #075985, #0369a1 58%, #0284c7); }
.product-filters button.active { color: #e0f2fe; border-color: #7dd3fc; background: rgba(125,211,252,.14); }
.product-search span { color: #bae6fd; }
.product-grid { background: rgba(224,242,254,.2); border-color: rgba(224,242,254,.22); }
.product-card { background: rgba(6,59,102,.72); }
.product-card:hover { background: rgba(2,132,199,.72); }
.product-card-footer a { color: #bae6fd; }
.product-card-footer a:hover { color: #063b66; background: #bae6fd; }
.product-footer a { color: #d9f3ff; border-color: rgba(217,243,255,.7); }

/* Solutions and services */
.solutions-section { background: linear-gradient(180deg, #f8fdff, #e0f2fe); }
.solution-layout { box-shadow: 0 24px 60px rgba(2,132,199,.15); }
.solution-tab:hover,
.solution-tab.active { background: #e0f2fe; }
.solution-tab.active { border-left-color: #38bdf8; }
.solution-tab i { color: #0284c7; }
.solution-visual { background: linear-gradient(145deg, #0369a1, #075985); }
.solution-visual::after { border-color: rgba(186,230,253,.28); box-shadow: 0 0 0 65px rgba(125,211,252,.05), 0 0 0 130px rgba(125,211,252,.035); }
.solution-tag { color: #bae6fd; }
.diagram-core { border-color: #7dd3fc; background: #075985; box-shadow: 0 0 40px rgba(125,211,252,.2); }
.diagram-node b { color: #bae6fd; }
.diagram-node::after { background: rgba(186,230,253,.55); }
.capability-band { background: linear-gradient(90deg, #7dd3fc, #38bdf8); }
.service-section { background: linear-gradient(145deg, #0369a1, #075985); }
.service-section .section-index { color: #d9f3ff; }
.service-grid article:hover { background: rgba(56,189,248,.14); }
.service-icon { color: #bae6fd; border-color: rgba(186,230,253,.62); }
.service-grid li::before { color: #7dd3fc; }

/* About and contact */
.about-section { background: linear-gradient(180deg, #f0f9ff, #fff); }
.about-visual { background: linear-gradient(145deg, #0284c7, #075985); }
.about-map svg { fill: rgba(186,230,253,.08); stroke: rgba(224,242,254,.45); }
.about-map circle:not(.map-pulse) { fill: #bae6fd; }
.about-map .map-pulse { stroke: #bae6fd; }
.location-badge { border-left-color: #7dd3fc; background: rgba(3,83,132,.84); }
.location-badge small,
.about-values i,
.text-link span { color: #0284c7; }
.text-link { border-bottom-color: #7dd3fc; }
.contact-section { background: linear-gradient(135deg, #075985 0, #0369a1 58%, #0284c7 100%); }
.contact-copy h2 em { color: #d9f3ff; }
.contact-form { box-shadow: 0 30px 75px rgba(3,72,112,.3); }
.form-title span { color: #0284c7; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { border-color: #0ea5e9; }
.site-footer { background: linear-gradient(135deg, #063b66, #042f52); }
.footer-links a:hover { color: #7dd3fc; }

/* Catalog index */
.catalog-page { background: linear-gradient(180deg, #f0f9ff, #e6f5fd); }
.catalog-hero { background: linear-gradient(125deg, #075985, #0284c7 66%, #38bdf8); }
.catalog-grid-bg {
  opacity: .5;
  background-image:
    linear-gradient(rgba(224,242,254,.13) 1px,transparent 1px),
    linear-gradient(90deg,rgba(224,242,254,.13) 1px,transparent 1px);
}
.catalog-hero-inner > div:first-child > span,
.catalog-stats b { color: #d9f3ff; }
.brand-filter { box-shadow: 0 18px 44px rgba(2,132,199,.14); }
.brand-filter button { border-right-color: #c7e8f8; }
.brand-filter button.active { background: linear-gradient(135deg, #0284c7, #075985); box-shadow: inset 0 -3px #7dd3fc; }
.brand-filter button.active span { color: #d9f3ff; }
.catalog-search,
.catalog-tools label { border-color: #b9e3f8; box-shadow: 0 8px 22px rgba(2,132,199,.06); }
.catalog-search span { color: #0284c7; }
.catalog-result-bar strong { color: #00509a; }
.catalog-item { border: 1px solid #d6effb; box-shadow: 0 12px 34px rgba(2,132,199,.08); }
.catalog-item:hover { box-shadow: 0 24px 50px rgba(2,132,199,.17); }
.catalog-product-art { background: linear-gradient(145deg, #0284c7, #075985); }
.art-device { background: linear-gradient(145deg, #0ea5e9, #075985); }
.catalog-key-specs div { background: #eff9fe; }
.catalog-item-actions { border-top-color: #d6effb; }
.catalog-item-actions > a:first-child,
.catalog-empty a { color: #0369a1; }
.quick-quote { border-color: #7dd3fc; color: #0369a1; }
.catalog-notice { border-color: #a7daf4; color: #496d83; background: rgba(255,255,255,.55); }
.catalog-notice > span { color: #0284c7; border-color: #7dd3fc; }
.catalog-product-art.has-real-image { background: radial-gradient(circle at 50% 42%, #fff 0, #f0f9ff 68%, #dff3fd 100%); }
.catalog-product-art.has-real-image.image-error { background: linear-gradient(145deg, #0284c7, #075985); }

/* Product detail */
.detail-hero { background: linear-gradient(180deg, #e0f2fe, #f8fdff); }
.detail-hero-grid { box-shadow: 0 25px 65px rgba(2,132,199,.15); }
.detail-copy > em { color: #0369a1; background: #e0f2fe; }
.detail-copy h2 { color: #306c8c; }
.detail-print { border-color: #7dd3fc; color: #075985; }
.detail-art { background: radial-gradient(circle at center, #0ea5e9, #075985 72%); }
.detail-device { background: linear-gradient(145deg, #38bdf8, #075985); }
.detail-anchor { border-bottom-color: #b9e3f8; background: rgba(248,253,255,.96); }
.detail-anchor a:hover,
.detail-kicker,
.detail-section-head > span,
.detail-manual-section > .container > div > span { color: #0284c7; }
.application-chips span { color: #075985; border-color: #7dd3fc; background: #f0f9ff; }
.detail-spec-section { background: linear-gradient(145deg, #0369a1, #075985); }
.detail-spec-section .detail-section-head > span,
.detail-spec-grid b { color: #bae6fd; }
.model-table-wrap { box-shadow: 0 16px 44px rgba(2,132,199,.1); }
.model-table-wrap th { color: #306c8c; background: #dff3fd; }
.model-table-wrap td { border-bottom-color: #d6effb; }
.model-table-wrap td a { color: #0284c7; }
.detail-app-section { background: linear-gradient(180deg, #e0f2fe, #d8f1fd); }
.detail-app-grid { background: #a8dcf4; }
.detail-app-grid article { background: #f8fdff; }
.app-icon { color: #0284c7; border-color: #7dd3fc; }
.manual-list { border-top-color: #a8d9f0; }
.manual-list a,
.manual-list button { border-bottom-color: #a8d9f0; }
.manual-list > * > b { color: #0284c7; border-color: #7dd3fc; }
.manual-list i { color: #0284c7; }
.detail-cta { background: linear-gradient(120deg, #075985, #0284c7); }
.detail-cta span { color: #d9f3ff; }
.detail-art.has-real-image { background: radial-gradient(circle at 50% 45%, #fff 0, #f0f9ff 68%, #dff3fd 100%); }
.detail-image-source { color: #306c8c; border-color: #a8d9f0; }
.detail-image-source:hover { color: #00509a; border-color: #38bdf8; }
.detail-art.has-real-image.image-error { background: radial-gradient(circle at center,#0ea5e9,#075985 72%); }

/* Forms and fine details */
input::selection,
textarea::selection { color: #fff; background: #0284c7; }
::selection { color: #fff; background: #0284c7; }

@media (max-width: 820px) {
  .hero { background: linear-gradient(155deg, #075985 0, #0284c7 62%, #38bdf8 120%); }
  .brand-strip { background: linear-gradient(145deg, #0284c7, #075985); }
}

@media print {
  body,
  .detail-hero,
  .detail-app-section { color: #111; background: #fff; }
  .detail-spec-section { color: #111; background: #fff; }
  .detail-spec-section .detail-section-head > span,
  .detail-spec-grid b { color: #111; }
}

/* Brand logos and visual product categories */
.brand-wordmarks { gap: 14px; }
.brand-wordmark { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 12px 16px; border-left: 1px solid rgba(255,255,255,.14); transition: background .2s, transform .2s; }
.brand-wordmark:first-child { border-left: 0; }
.brand-wordmark:hover { background: rgba(255,255,255,.1); transform: translateY(-2px); }
.brand-logo-frame { width: 100%; height: 34px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 4px 10px; border-radius: 4px; background: rgba(255,255,255,.96); }
.brand-logo-frame img { display: block; max-width: 112px; max-height: 26px; object-fit: contain; }
.brand-logo-frame.icon-wordmark img { width: 24px; height: 24px; }
.brand-wordmarks .brand-logo-frame b { position: static; padding: 0; color: #00509a; font: 700 15px Arial, sans-serif; letter-spacing: .06em; }
.brand-wordmarks .brand-logo-frame b::before { content: none; }
.brand-wordmark > small { color: rgba(255,255,255,.68); font-size: 9px; letter-spacing: .12em; }

.brand-tab { grid-template-columns: 30px 58px 1fr auto; gap: 12px; }
.brand-tab-logo { width: 58px; height: 36px; padding: 6px; object-fit: contain; border: 1px solid #d7edf8; border-radius: 4px; background: #fff; }
.brand-tab-logo.icon-wordmark { padding: 5px 16px; }
.brand-tab.active .brand-tab-logo { border-color: rgba(255,255,255,.38); box-shadow: 0 6px 18px rgba(3,72,112,.18); }
.brand-panel { padding: 42px 48px; }
.brand-panel-identity { min-width: 0; display: flex; align-items: flex-start; gap: 22px; }
.brand-panel-logo { flex: 0 0 150px; height: 62px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 14px; border: 1px solid #c5e6f6; border-radius: 5px; background: #fff; box-shadow: 0 10px 24px rgba(2,132,199,.09); }
.brand-panel-logo img { max-width: 122px; max-height: 42px; object-fit: contain; }
.brand-panel-logo.icon-wordmark img { width: 34px; height: 34px; }
.brand-panel-logo.icon-wordmark b { color: #00509a; font: 700 17px Arial, sans-serif; letter-spacing: .04em; }
.brand-panel h3 { margin-top: 8px; }
.brand-panel-desc { max-width: 510px; }
.brand-categories { gap: 14px; margin-top: 30px; }
.brand-category { min-width: 0; min-height: 142px; display: grid; grid-template-columns: 43% 57%; overflow: hidden; padding: 0; border-color: #b9e3f8; background: rgba(255,255,255,.84); transition: transform .2s, border-color .2s, box-shadow .2s; }
.brand-category:hover { z-index: 2; transform: translateY(-3px); border-color: #38bdf8; box-shadow: 0 14px 30px rgba(2,132,199,.14); }
.brand-category .brand-category-image { width: auto; height: 142px; display: grid; place-items: center; margin: 0; overflow: hidden; color: inherit; border: 0; background: radial-gradient(circle, #fff, #eaf7fd); font: inherit; }
.brand-category-image img { width: 92%; height: 92%; object-fit: contain; mix-blend-mode: multiply; filter: drop-shadow(0 8px 10px rgba(3,72,112,.12)); transition: transform .25s; }
.brand-category:hover .brand-category-image img { transform: scale(1.05); }
.brand-category .brand-category-copy { width: auto; height: auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; margin: 0; padding: 15px; color: inherit; border: 0; font: inherit; }
.brand-category-copy i { display: block; margin-bottom: 8px; color: #0284c7; font: 9px Arial, sans-serif; font-style: normal; }
.brand-category-copy b { font-size: 14px; }
.brand-category-copy small { display: block; margin-top: 4px; color: #668297; font-size: 10px; line-height: 1.55; }

.catalog-brand-logo { grid-row: 1 / 3; align-self: center; width: 66px; height: 38px; padding: 6px; object-fit: contain; border: 1px solid #d4ebf7; border-radius: 4px; background: #fff; }
.catalog-brand-logo.icon-wordmark { padding-inline: 19px; }
.brand-filter button:not(:first-child) { display: grid; grid-template-columns: 68px 1fr; grid-template-rows: auto auto; column-gap: 9px; align-content: center; }
.brand-filter button:not(:first-child) > span,
.brand-filter button:not(:first-child) > b { grid-column: 2; }
.brand-filter button.active .catalog-brand-logo { border-color: rgba(255,255,255,.45); box-shadow: 0 6px 16px rgba(3,72,112,.18); }

.visual-category-section { margin-top: 42px; }
.visual-category-heading { display: grid; grid-template-columns: 1fr auto; align-items: end; margin-bottom: 17px; }
.visual-category-heading > span { grid-column: 1 / 3; color: #0284c7; font: 9px Arial, sans-serif; font-weight: 700; letter-spacing: .18em; }
.visual-category-heading h2 { margin: 7px 0 0; color: #0c4a6e; font-size: 22px; }
.visual-category-heading p { margin: 0; color: #6c8798; font-size: 10px; }
.visual-category-filter { display: grid; grid-auto-flow: column; grid-auto-columns: 158px; gap: 10px; overflow-x: auto; padding: 2px 2px 14px; scrollbar-color: #7dd3fc #e0f2fe; scrollbar-width: thin; scroll-snap-type: x proximity; }
.visual-category-card { position: relative; height: 172px; overflow: hidden; padding: 0; border: 1px solid #c7e8f8; border-radius: 4px; background: #fff; cursor: pointer; text-align: left; scroll-snap-align: start; transition: transform .2s, border-color .2s, box-shadow .2s; }
.visual-category-card:hover,
.visual-category-card.active { transform: translateY(-3px); border-color: #0ea5e9; box-shadow: 0 12px 26px rgba(2,132,199,.16); }
.visual-category-card.active::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: #0ea5e9; }
.visual-category-image { height: 116px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle, #fff, #e7f6fd); }
.visual-category-image img { width: 92%; height: 92%; object-fit: contain; mix-blend-mode: multiply; filter: drop-shadow(0 7px 9px rgba(3,72,112,.12)); transition: transform .25s; }
.visual-category-card:hover .visual-category-image img { transform: scale(1.06); }
.visual-category-image > i { color: #38bdf8; font-size: 32px; font-style: normal; }
.visual-category-copy { display: flex; flex-direction: column; justify-content: center; height: 56px; padding: 7px 10px; border-top: 1px solid #e0f2fe; }
.visual-category-copy small { color: #7993a2; font-size: 8px; }
.visual-category-copy b { overflow: hidden; margin-top: 1px; color: #0c4a6e; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.category-all { background: linear-gradient(145deg, #0284c7, #075985); }
.category-all-art { height: 116px; display: grid; grid-template-columns: 35px 35px; grid-template-rows: 35px 35px; place-content: center; gap: 8px; }
.category-all-art i { border: 1px solid rgba(255,255,255,.58); background: rgba(255,255,255,.11); }
.category-all .visual-category-copy { border-color: rgba(255,255,255,.18); }
.category-all .visual-category-copy small { color: rgba(255,255,255,.58); }
.category-all .visual-category-copy b { color: #fff; }
.catalog-tools { margin-top: 26px; }

@media (max-width: 820px) {
  .brand-wordmarks { gap: 6px; }
  .brand-wordmark { padding: 10px 7px; border-left: 0; }
  .brand-logo-frame { height: 32px; padding-inline: 6px; }
  .brand-logo-frame img { max-width: 86px; max-height: 23px; }
  .brand-panel-identity { display: block; }
  .brand-panel-logo { width: 145px; margin-bottom: 18px; }
  .visual-category-heading { display: block; }
  .visual-category-heading p { margin-top: 5px; }
}

@media (max-width: 560px) {
  .brand-wordmark > small { font-size: 8px; }
  .brand-logo-frame.icon-wordmark b { font-size: 11px; }
  .brand-tab { grid-template-columns: 20px 44px 1fr; gap: 8px; padding: 12px 10px; }
  .brand-tab-logo { width: 44px; height: 31px; padding: 5px; }
  .brand-tab-logo.icon-wordmark { padding-inline: 12px; }
  .brand-panel { padding: 28px 20px; }
  .brand-panel-logo { height: 54px; }
  .brand-category { grid-template-columns: 40% 60%; min-height: 126px; }
  .brand-category .brand-category-image { height: 126px; }
  .brand-category .brand-category-copy { padding: 12px; }
  .brand-filter button:not(:first-child) { grid-template-columns: 52px 1fr; padding: 10px; }
  .catalog-brand-logo { width: 50px; height: 32px; padding: 5px; }
  .catalog-brand-logo.icon-wordmark { padding-inline: 14px; }
  .visual-category-section { margin-top: 30px; }
  .visual-category-filter { grid-auto-columns: 145px; }
  .visual-category-card { height: 162px; }
  .visual-category-image,
  .category-all-art { height: 106px; }
}

.detail-brand-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.detail-product-brand-logo { width: 118px; height: 48px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 10px; border: 1px solid #c7e8f8; border-radius: 4px; background: #fff; box-shadow: 0 8px 20px rgba(2,132,199,.09); }
.detail-product-brand-logo img { max-width: 98px; max-height: 32px; object-fit: contain; }
.detail-product-brand-logo.icon-wordmark img { width: 27px; height: 27px; }
.detail-product-brand-logo i { color: #00509a; font: 700 12px Arial, sans-serif; font-style: normal; }
.detail-brand-heading .detail-brand { flex: 1; }
@media (max-width: 560px) {
  .detail-brand-heading { align-items: flex-start; flex-direction: column; }
  .detail-product-brand-logo { width: 108px; height: 44px; }
}