/* GitHub skills upgrade: WST-specific layer. Sources/licensing in docs/github-skill-upgrade.md */
html{scroll-padding-top:88px}body{overflow-x:hidden}.eyebrow{text-transform:none;letter-spacing:.035em;font-size:12px;font-weight:760}h1,h2,h3{text-wrap:balance}p{ text-wrap:pretty }[id]{scroll-margin-top:88px}
a,button,summary{touch-action:manipulation;-webkit-tap-highlight-color:rgba(8,120,209,.14)}
:where(a,button,input,select,textarea,summary):focus-visible{outline:3px solid rgba(8,120,209,.38);outline-offset:3px;border-radius:8px}.section{padding:72px 0}.section-head{margin-bottom:34px}.section-head h2{font-size:clamp(34px,3vw,46px)}
.header-inner{height:78px}.brand img{width:130px}.site-nav{gap:30px}.site-nav a{font-size:14px;font-weight:700}.header-cta{min-height:44px;padding-inline:18px}
.hero{padding-top:58px}.hero-grid{grid-template-columns:minmax(0,.86fr) minmax(590px,1.14fr);gap:58px;min-height:500px}.hero-copy{padding:20px 0 44px}.hero-copy h1{max-width:650px;font-size:clamp(48px,4.2vw,64px);line-height:1.01}.hero-lead{font-size:17px;line-height:1.68;max-width:640px}.hero-visual{min-height:455px}.hero-monitor{inset:8px 10px 34px 34px}.hero-stack{width:205px;top:34px;right:24px}
.trust-strip article{min-height:82px;padding:16px 20px}.trust-strip span{font-size:12px}.trust-strip b{font-size:15px}
.solutions-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.solution-card{border-radius:16px;box-shadow:0 9px 26px rgba(17,48,78,.055)}.solution-photo{height:210px}.solution-body{padding:20px 20px 22px}.solution-body h3{min-height:0;margin:0 0 9px;font-size:18px}.solution-body p{min-height:0;font-size:14px;line-height:1.55}.solution-body a{margin-top:14px;font-size:13px}.solution-card:hover{transform:translateY(-2px)}
.industries-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.industry-card{min-height:245px;border-radius:16px}.industry-card>div{left:18px;right:16px;bottom:16px}.industry-card h3{font-size:17px}.industry-card p{font-size:12px;line-height:1.45;-webkit-line-clamp:3}
.why-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.why-grid article{min-height:190px;padding:22px 20px;border-radius:15px}.why-icon{width:auto;min-width:44px;padding:0 10px;font-size:10px}.why-grid h3{font-size:17px}.why-grid p{font-size:13px;line-height:1.58}
.process-grid h3{font-size:15px}.process-grid p{font-size:12px;line-height:1.55}.project-content>p{font-size:14px}.case-flow b{font-size:12px}.brand-note{font-size:11px}.trust-points article{min-height:94px}.trust-points b{font-size:16px}.trust-points span{font-size:12px}
.faq-section{background:#fff;border-top:1px solid #edf2f6}.faq-layout{display:grid;grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr);gap:72px;align-items:start}.faq-intro{position:sticky;top:110px}.faq-intro h2{margin:0;font-size:clamp(34px,3vw,44px);line-height:1.06;letter-spacing:-.035em}.faq-intro>p:not(.eyebrow){max-width:460px;color:var(--muted);font-size:15px;line-height:1.65}.text-link{display:inline-flex;margin-top:8px;color:var(--blue);font-weight:800;font-size:14px}.faq-list{border-top:1px solid var(--line)}.faq-list details{border-bottom:1px solid var(--line)}.faq-list summary{position:relative;cursor:pointer;list-style:none;padding:23px 46px 23px 0;color:var(--navy);font-size:17px;font-weight:750}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary:after{content:"+";position:absolute;right:4px;top:18px;font-size:25px;font-weight:400;color:var(--blue)}.faq-list details[open] summary:after{content:"–"}.faq-list details p{margin:0;padding:0 46px 22px 0;color:#66788c;font-size:14px;line-height:1.65}
.form-grid span{font-size:12px}.form-grid input,.form-grid select{height:46px}.form-grid textarea{min-height:92px}.consent{font-size:11px}.footer-grid h3{font-size:13px}.footer-grid a,.footer-grid span{font-size:11px}.footer-brand p{font-size:12px}
.mobile-conversion{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
@media(max-width:1180px){.hero-grid{grid-template-columns:minmax(0,.9fr) minmax(470px,1.1fr);gap:32px}.hero-copy h1{font-size:50px}.hero-visual{min-height:410px}.solutions-grid{grid-template-columns:repeat(3,1fr)}.solution-photo{height:180px}.industries-grid{grid-template-columns:repeat(4,1fr)}.faq-layout{gap:42px}.header-inner{height:74px}.brand img{width:122px}}
@media(max-width:880px){.section{padding:58px 0}.hero-grid{grid-template-columns:1fr;gap:22px}.hero-copy h1{font-size:clamp(42px,7vw,58px)}.hero-visual{min-height:420px}.solutions-grid{grid-template-columns:repeat(2,1fr)}.solution-photo{height:210px}.industries-grid{grid-template-columns:repeat(2,1fr)}.why-grid{grid-template-columns:repeat(2,1fr)}.faq-layout{grid-template-columns:1fr;gap:28px}.faq-intro{position:static}.faq-intro>p:not(.eyebrow){max-width:650px}.site-nav a{font-size:14px}}
@media(max-width:620px){html{scroll-padding-top:70px}.section{padding:48px 0}.section-head h2{font-size:31px}.header-inner{height:64px}.brand img{width:108px}.hero{padding-top:32px}.hero-copy h1{font-size:38px;line-height:1.02}.hero-lead{font-size:14px}.hero-visual{min-height:320px}.hero-monitor{inset:8px 8px 42px 22px}.hero-stack{width:150px;top:22px;right:14px}.trust-strip article{min-height:70px;padding:11px}.solutions-grid{grid-template-columns:1fr}.solution-card{display:grid;grid-template-columns:142px minmax(0,1fr);min-height:164px}.solution-photo{height:100%;min-height:164px}.solution-body{padding:15px}.solution-body h3{font-size:15px}.solution-body p{font-size:11px}.industries-grid{grid-template-columns:1fr 1fr;gap:10px}.industry-card{min-height:190px}.industry-card h3{font-size:13px}.industry-card p{font-size:10px}.why-grid{grid-template-columns:1fr}.why-grid article{min-height:0}.faq-list summary{font-size:15px;padding:20px 40px 20px 0}.faq-list details p{font-size:13px;padding-right:18px}.form-grid input,.form-grid select,.form-grid textarea{font-size:16px}.footer-grid h3{font-size:12px}.footer-grid a,.footer-grid span{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.solution-card:hover,.industry-card:hover img,.btn:hover{transform:none!important}}
@media(min-width:1181px){.hero-grid{grid-template-columns:minmax(0,1.08fr) minmax(540px,.92fr);gap:42px}.hero-copy h1{max-width:710px;font-size:58px}}
@media(max-width:620px){body{padding-bottom:calc(68px + env(safe-area-inset-bottom))}}
@media(max-width:420px){.hero-copy h1{font-size:34px;line-height:1.04}}

/* 2026-09-18 hero cleanup: integration scene first, no floating product cutouts */
.hero-monitor{inset:0 0 24px 0;border-radius:22px}
.hero-stack{right:24px;top:28px;width:218px;padding:18px 18px 16px;background:rgba(6,24,43,.9);backdrop-filter:blur(4px)}
.hero-wst-label{display:block;margin-bottom:9px;color:#72c7f4;font-size:10px;line-height:1.2;font-weight:850;letter-spacing:.11em}
@media(max-width:880px){.hero-monitor{inset:0 0 24px 0}.hero-stack{right:20px;top:24px}}
@media(max-width:620px){.hero-monitor{inset:0 0 32px 0}.hero-stack{right:12px;top:18px;width:158px;padding:13px}.hero-wst-label{font-size:8px;letter-spacing:.09em}}

/* WebPro QA Refinements: Viewport resilience, mobile language drawer, touch targets, zero clipping */
.nav-mobile-langs{display:none}
@media(max-width:880px){
  .nav-mobile-langs{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding:12px 14px;border-top:1px solid var(--line)}
  .nav-lang-label{font-size:13px;font-weight:700;color:var(--muted)}
  .lang-switch-menu{display:inline-flex;align-items:center;gap:4px;background:#f1f6fa;border:1px solid var(--line);border-radius:8px;padding:3px}
  .lang-switch-menu .lang-btn{border:0;background:transparent;color:#61758a;font-size:12px;font-weight:800;padding:6px 12px;border-radius:6px;cursor:pointer;min-height:36px;transition:all .15s ease}
  .lang-switch-menu .lang-btn.is-active{background:#fff;color:var(--blue);box-shadow:0 2px 8px rgba(8,120,209,.15)}
}

/* Accessible zero-bounding-box honeypot without layout displacement */
.honeypot{position:absolute!important;left:0!important;top:0!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;opacity:0!important;pointer-events:none!important}

/* Final CTA and device alignment */
.final-cta{overflow:hidden}
.final-cta-inner{position:relative;overflow:hidden;border-radius:16px}
.final-device{bottom:0;max-height:100%;object-fit:contain;pointer-events:none}

/* Mobile header and actions polish */
@media(max-width:620px){
  .header-actions .lang-switch{display:inline-flex!important;padding:2px;border-radius:7px}
  .header-actions .lang-switch .lang-btn{padding:4px 6px;font-size:10.5px;min-height:32px}
  .hero-copy h1{letter-spacing:-0.025em}
  .final-cta-inner{padding:28px 20px!important}
  .final-device{display:none!important}
  .final-actions{width:100%;align-items:stretch}
  .final-actions .btn{width:100%;min-height:48px}
  .final-phone{text-align:center;width:100%;margin-top:4px}
}

/* Mobile button stacking to eliminate any Cyrillic/Uzbek truncation */
@media(max-width:480px){
  .hero-actions{flex-direction:column;width:100%;gap:10px}
  .hero-actions .btn{width:100%;min-height:48px;font-size:14px}
}

/* Enterprise Design System Polish: Visual hierarchy, depth, micro-interactions */
.hero-monitor{
  box-shadow: 0 24px 60px -12px rgba(8, 27, 49, 0.28), 0 0 0 1px rgba(8, 120, 209, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.hero-stack{
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 20px 40px rgba(4, 18, 32, 0.35);
  border-radius: 14px;
}
.trust-strip{
  border: 1px solid rgba(216, 228, 240, 0.9);
  box-shadow: 0 12px 32px rgba(15, 51, 83, 0.06);
}
.trust-strip article{
  transition: background-color 0.2s ease;
}
.trust-strip article:hover{
  background: #fafcff;
}
.solution-card{
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
  border: 1px solid #dfe7ef;
}
.solution-card:hover{
  transform: translateY(-4px);
  border-color: #bad3eb;
  box-shadow: 0 16px 36px rgba(17, 48, 78, 0.1);
}
.solution-body a{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap 0.2s ease, color 0.2s ease;
}
.solution-card:hover .solution-body a{
  gap: 7px;
  color: #066dbd;
}
.industry-card{
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}
.industry-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(15, 44, 72, 0.16);
}
.why-grid article{
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.why-grid article:hover{
  transform: translateY(-2px);
  border-color: #bad3eb;
  box-shadow: 0 8px 24px rgba(17, 48, 78, 0.06);
}
.brand-grid > div{
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.brand-grid > div:hover{
  border-color: #bad3eb;
  box-shadow: 0 8px 20px rgba(8, 120, 209, 0.08);
  transform: translateY(-2px);
}
.faq-list details{
  transition: background-color 0.2s ease;
}
.faq-list details[open]{
  background-color: #fbfdff;
}
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus{
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(8, 120, 209, 0.14);
}
.btn:active{
  transform: scale(0.985);
}
.btn-primary{
  background: linear-gradient(180deg, #1085e3 0%, #0878d1 100%);
}
.btn-primary:hover{
  background: linear-gradient(180deg, #0975cb 0%, #0669b6 100%);
}

/* ==========================================================================
   ENTERPRISE B2B INTEGRATOR MATERIAL REDESIGN LAYER (2026-09-22)
   ========================================================================== */

/* Top Utility / Status Bar */
.site-topbar{
  background: #030e1a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 11px;
  color: #8da4bc;
  line-height: 1.2;
}
.topbar-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 38px;
}
.topbar-status{
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.status-pulse{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  animation: pulseStatus 2.2s infinite;
  flex-shrink: 0;
}
@keyframes pulseStatus{
  0%{box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);}
  70%{box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);}
  100%{box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);}
}
.topbar-meta{
  display: flex;
  align-items: center;
  gap: 12px;
}
.topbar-sep{
  color: rgba(255, 255, 255, 0.2);
}
.topbar-phone{
  display: flex;
  align-items: center;
  gap: 5px;
  color: #cbdbe9;
  text-decoration: none;
  transition: color 0.15s ease;
}
.topbar-phone strong{
  color: #38bdf8;
  font-weight: 750;
}
.topbar-phone:hover strong{
  color: #7dd3fc;
}

/* Site Header Elevation — Unified Enterprise Dark Navy */
.site-header{
  background: #071b31 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}
.brand img{
  background: #ffffff;
  padding: 5px 12px;
  border-radius: 8px;
  width: 130px;
  height: auto;
  display: block;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.site-nav a{
  color: #e2e8f0 !important;
  font-weight: 650;
  font-size: 13.5px;
  transition: color 0.15s ease;
}
.site-nav a:hover{
  color: #38bdf8 !important;
}
.header-actions .lang-switch{
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 8px;
  padding: 3px;
}
.header-actions .lang-btn{
  color: #94a3b8 !important;
  font-weight: 750;
  border-radius: 6px;
  transition: all 0.15s ease;
}
.header-actions .lang-btn.is-active{
  background: #0284c7 !important;
  color: #ffffff !important;
}
.nav-toggle{
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
}
.nav-toggle span{
  background: #ffffff !important;
}
.header-cta{
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%) !important;
  border-radius: 8px;
  font-weight: 750;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.25);
  color: #ffffff !important;
}

/* Hero Section: Commercial B2B Integrator */
.hero.hero-commercial,
.hero.hero-enterprise{
  background: radial-gradient(circle at 85% 20%, rgba(14, 116, 214, 0.22) 0%, rgba(7, 27, 49, 0) 55%),
              linear-gradient(180deg, #071b31 0%, #0a2342 60%, #0d2c52 100%) !important;
  padding-top: 52px;
  padding-bottom: 0;
  position: relative;
  overflow: hidden;
}
.hero.hero-commercial:before,
.hero.hero-commercial::before,
.hero.hero-commercial:after,
.hero.hero-commercial::after,
.hero.hero-enterprise:before,
.hero.hero-enterprise::before{
  display: none !important;
  content: none !important;
}
.hero-commercial .hero-grid,
.hero-enterprise .hero-grid{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(500px, 0.95fr);
  gap: 46px;
  align-items: center;
  min-height: auto;
}
.hero-commercial .hero-copy{
  padding: 8px 0 20px;
}
.hero-kicker-group{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}
.hero-kicker-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.28);
  color: #38bdf8;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.02em;
}
.kicker-dot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
}
.hero-kicker-tag{
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbdbe9;
  font-size: 11px;
  font-weight: 700;
}
.hero-commercial .hero-copy h1{
  margin: 0;
  color: #ffffff !important;
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.03em;
  max-width: 680px;
}
.hero-commercial .hero-lead{
  margin: 18px 0 0;
  color: #b8ccdf !important;
  font-size: 15.5px;
  line-height: 1.62;
  max-width: 620px;
}

/* Audience Segmentation Chips */
.hero-audience-chips{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 22px 0 0;
}
.audience-chip{
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  color: #e2e8f0;
  line-height: 1.4;
}
.chip-badge{
  background: #0284c7;
  color: #ffffff;
  font-weight: 800;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* Hero Action CTAs */
.hero-commercial .hero-actions{
  display: flex;
  gap: 14px;
  margin-top: 26px;
}
.btn-hero-cta{
  min-height: 48px;
  padding: 0 24px;
  font-size: 14.5px;
  font-weight: 750;
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%) !important;
  color: #ffffff !important;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(2, 132, 199, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.btn-hero-cta:hover{
  background: linear-gradient(180deg, #0369a1 0%, #075985 100%) !important;
  transform: translateY(-2px);
}
.btn-hero-catalog{
  min-height: 48px;
  padding: 0 22px;
  font-size: 14px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  backdrop-filter: blur(8px);
}
.btn-hero-catalog:hover{
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  transform: translateY(-2px);
}

/* Hero Metrics Grid */
.hero-metrics-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.hero-metric-item{
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.hero-metric-num{
  display: block;
  color: #38bdf8;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.hero-metric-sub{
  display: block;
  margin-top: 4px;
  color: #8fa7be;
  font-size: 11px;
  line-height: 1.35;
}

/* Hero Hardware Architecture Showcase Frame */
.hero-hardware-frame{
  border-radius: 16px;
  background: #041426;
  border: 1px solid rgba(56, 189, 248, 0.25);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  overflow: hidden;
}
.hardware-frame-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: rgba(6, 23, 41, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 11px;
}
.hardware-frame-title{
  display: flex;
  align-items: center;
  gap: 8px;
  color: #f8fafc;
  font-weight: 750;
  letter-spacing: 0.02em;
}
.platform-dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 6px #38bdf8;
}
.hardware-frame-meta{
  color: #7dd3fc;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.04em;
}
.hardware-screen{
  position: relative;
  overflow: hidden;
  background: #020912;
}
.hardware-screen img{
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}
.hardware-overlay-badge{
  position: absolute;
  bottom: 12px;
  left: 12px;
  padding: 6px 12px;
  border-radius: 6px;
  background: rgba(4, 18, 32, 0.85);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  font-size: 11px;
}
.hardware-overlay-badge b{
  color: #38bdf8;
  font-weight: 800;
  margin-right: 6px;
}
.hardware-grid-preview{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 12px 14px;
  background: rgba(5, 20, 36, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.preview-chip{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.preview-chip img{
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}
.preview-chip div{
  display: flex;
  flex-direction: column;
}
.preview-chip strong{
  color: #f8fafc;
  font-size: 11.5px;
  font-weight: 750;
  line-height: 1.2;
}
.preview-chip span{
  color: #8fa7be;
  font-size: 10px;
  margin-top: 2px;
}

/* Hero Assurance Bar */
.hero-assurance-bar{
  background: #041222;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid #e2e8f0;
  padding: 16px 0;
  margin-top: 48px;
}
.assurance-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: center;
}
.assurance-item{
  display: flex;
  align-items: center;
  gap: 12px;
}
.assurance-item i{
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  font-weight: 800;
  font-size: 12px;
  font-style: normal;
  flex-shrink: 0;
}
.assurance-item b{
  display: block;
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 750;
}
.assurance-item span{
  display: block;
  color: #8fa7be;
  font-size: 11px;
  margin-top: 2px;
  line-height: 1.3;
}

/* ==========================================================================
   CATALOG & PRODUCT DISCOVERY LAYER STYLING
   ========================================================================== */
.catalog-section{
  background: #ffffff;
  padding-top: 46px !important;
  padding-bottom: 52px !important;
}
.catalog-section .section-head{
  margin-bottom: 24px;
}
.catalog-categories-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.cat-card{
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 16px rgba(10, 35, 60, 0.04);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.cat-card:hover{
  transform: translateY(-3px);
  border-color: #0284c7;
  box-shadow: 0 14px 32px rgba(2, 132, 199, 0.09);
}
.cat-card-media{
  height: 130px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  background: #f8fafc;
  border-radius: 10px;
  padding: 10px;
}
.cat-card-media img{
  max-height: 110px;
  max-width: 100%;
  object-fit: contain;
}
.cat-badge{
  display: inline-block;
  align-self: flex-start;
  padding: 3px 7px;
  border-radius: 4px;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}
.cat-card-body h3{
  font-size: 17px;
  font-weight: 750;
  color: #0f172a;
  margin: 0 0 6px 0;
}
.cat-card-body p{
  font-size: 13px;
  color: #64748b;
  line-height: 1.5;
  margin: 0 0 14px 0;
  flex-grow: 1;
}
.cat-link{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #0284c7;
  font-weight: 750;
  font-size: 13px;
  text-decoration: none;
  margin-top: auto;
}
.cat-link:hover{
  color: #0369a1;
}

/* Featured Products Grid */
.featured-products-shell{
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid #e2e8f0;
}
.products-header{
  margin-bottom: 24px;
}
.catalog-subhead{
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 6px 0;
  letter-spacing: -0.02em;
}
.catalog-subhead-desc{
  font-size: 14px;
  color: #64748b;
  margin: 0;
}
.featured-products-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.product-item-card{
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.product-item-card:hover{
  transform: translateY(-3px);
  border-color: #0284c7;
  box-shadow: 0 12px 28px rgba(2, 132, 199, 0.08);
}
.prod-badge-brand{
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #475569;
  background: #e2e8f0;
  padding: 3px 7px;
  border-radius: 4px;
}
.prod-image{
  height: 130px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
}
.prod-image img{
  max-height: 110px;
  max-width: 100%;
  object-fit: contain;
}
.prod-details{
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.prod-sku-tag{
  display: inline-block;
  font-size: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 700;
  color: #0284c7;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  padding: 2px 6px;
  border-radius: 4px;
  margin-bottom: 6px;
  width: fit-content;
}
.prod-details h4{
  font-size: 15px;
  font-weight: 750;
  color: #0f172a;
  margin: 0 0 8px 0;
  line-height: 1.35;
}
.prod-specs{
  font-size: 12px;
  color: #64748b;
  line-height: 1.45;
  margin: 0 0 16px 0;
  flex-grow: 1;
}
.prod-action{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #e2e8f0;
}
.prod-status{
  font-size: 11px;
  font-weight: 650;
  color: #16a34a;
}
.btn-outline{
  border: 1px solid #0284c7;
  color: #0284c7;
  background: #ffffff;
  font-size: 12px;
  font-weight: 750;
  padding: 6px 14px;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.15s ease;
}
.btn-outline:hover{
  background: #0284c7;
  color: #ffffff;
}

/* B2B Dealer / Installer Banner */
.dealer-banner{
  margin-top: 44px;
  background: linear-gradient(135deg, #071e38 0%, #0d3869 100%);
  border-radius: 16px;
  padding: 32px 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 16px 40px rgba(7, 30, 56, 0.18);
}
.dealer-banner-badge{
  display: inline-block;
  color: #38bdf8;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.dealer-banner-content h3{
  color: #ffffff;
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 8px 0;
}
.dealer-banner-content p{
  color: #cbdbe9;
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
  max-width: 640px;
}
.dealer-banner-actions{
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  flex-shrink: 0;
}
.dealer-phone{
  color: #38bdf8;
  font-weight: 750;
  font-size: 13.5px;
  text-decoration: none;
}
.dealer-phone:hover{
  color: #7dd3fc;
}

/* Services Section */
.services-section{
  background: #f8fafc;
}
.services-grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.service-card{
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 14px rgba(10, 35, 60, 0.03);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.service-card:hover{
  transform: translateY(-2px);
  border-color: #0284c7;
}
.service-num{
  color: #0284c7;
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 10px;
  line-height: 1;
}
.service-card h3{
  font-size: 15px;
  font-weight: 750;
  color: #0f172a;
  margin: 0 0 8px 0;
  line-height: 1.35;
}
.service-card p{
  font-size: 12px;
  color: #64748b;
  line-height: 1.5;
  margin: 0;
}

/* Solutions Section Badges & Cards */
.solution-tag{
  display: inline-block;
  padding: 3px 8px;
  border-radius: 5px;
  background: #e0f2fe;
  border: 1px solid #bae6fd;
  color: #0369a1;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}

/* Process Section */
.process-deliverable{
  display: block;
  margin-top: 10px;
  padding: 5px 8px;
  border-radius: 6px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.35;
}

/* Projects Section: Verified Project Capabilities Matrix */
.project-header-badges{
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}
.project-matrix-wrapper{
  display: flex;
  flex-direction: column;
}
.matrix-header{
  margin-bottom: 14px;
}
.matrix-header h3{
  font-size: 18px;
  font-weight: 750;
  color: #0f172a;
  margin: 0 0 4px 0;
}
.matrix-header p{
  font-size: 13px;
  color: #64748b;
  margin: 0;
}
.project-matrix-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.matrix-card{
  background: #fafcff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.matrix-card:hover{
  transform: translateY(-2px);
  border-color: #0284c7;
}
.matrix-badge{
  display: inline-block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #0369a1;
  background: #e0f2fe;
  padding: 2px 6px;
  border-radius: 4px;
  margin-bottom: 6px;
}
.matrix-card h4{
  font-size: 14px;
  font-weight: 750;
  color: #0f172a;
  margin: 0 0 6px 0;
}
.matrix-card p{
  font-size: 12px;
  color: #64748b;
  line-height: 1.45;
  margin: 0;
}

/* ==========================================================================
   RESPONSIVE DESIGN SYSTEM OVERRIDES (1440, 1180, 880, 620, 390)
   ========================================================================== */
@media(max-width: 1180px){
  .hero-commercial .hero-grid,
  .hero-enterprise .hero-grid{
    grid-template-columns: minmax(0, 1fr) minmax(440px, 1fr);
    gap: 36px;
  }
  .hero-commercial .hero-copy h1{
    font-size: 44px;
  }
  .catalog-categories-grid{
    grid-template-columns: repeat(3, 1fr);
  }
  .featured-products-grid{
    grid-template-columns: repeat(3, 1fr);
  }
  .services-grid{
    grid-template-columns: repeat(3, 1fr);
  }
}

@media(max-width: 880px){
  .topbar-meta .topbar-coverage{
    display: none;
  }
  .topbar-meta .topbar-sep{
    display: none;
  }
  .hero.hero-commercial{
    padding-top: 38px;
  }
  .hero-commercial .hero-grid{
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .hero-commercial .hero-copy h1{
    font-size: clamp(34px, 6.5vw, 44px);
  }
  .hero-metrics-grid{
    grid-template-columns: repeat(2, 1fr);
  }
  .assurance-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .catalog-categories-grid{
    grid-template-columns: repeat(2, 1fr);
  }
  .featured-products-grid{
    grid-template-columns: repeat(2, 1fr);
  }
  .dealer-banner{
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 24px;
  }
  .dealer-banner-actions{
    align-items: flex-start;
    width: 100%;
  }
  .services-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width: 620px){
  .site-topbar{
    height: auto;
    padding: 6px 0;
  }
  .topbar-inner{
    flex-direction: column;
    height: auto;
    gap: 4px;
    text-align: center;
    justify-content: center;
  }
  .topbar-meta{
    display: none;
  }
  .topbar-status{
    font-size: 10px;
    justify-content: center;
  }
  .hero.hero-commercial{
    padding-top: 28px;
  }
  .hero-commercial .hero-copy h1{
    font-size: 30px;
    line-height: 1.08;
  }
  .hero-commercial .hero-lead{
    font-size: 14px;
    margin-top: 12px;
  }
  .hero-commercial .hero-actions{
    flex-direction: column;
    gap: 10px;
  }
  .btn-hero-cta, .btn-hero-catalog{
    width: 100%;
    min-height: 48px;
  }
  .hero-metrics-grid{
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 22px;
    padding-top: 16px;
  }
  .hero-metric-item{
    padding: 10px;
  }
  .hero-metric-num{
    font-size: 15px;
  }
  .hero-metric-sub{
    font-size: 10px;
  }
  .hardware-frame-meta{
    display: none;
  }
  .hardware-grid-preview{
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 10px;
  }
  .hero-assurance-bar{
    margin-top: 32px;
    padding: 14px 0;
  }
  .assurance-grid{
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .assurance-item{
    gap: 8px;
  }
  .assurance-item i{
    width: 28px;
    height: 28px;
    font-size: 10px;
  }
  .assurance-item b{
    font-size: 12px;
  }
  .assurance-item span{
    font-size: 9.5px;
  }
  .catalog-categories-grid{
    grid-template-columns: 1fr;
  }
  .featured-products-grid{
    grid-template-columns: 1fr;
  }
  .services-grid{
    grid-template-columns: 1fr;
  }
  .project-matrix-grid{
    grid-template-columns: 1fr;
  }
  .solution-card{
    display: grid;
    grid-template-columns: 130px 1fr;
  }
  .solution-tag{
    font-size: 9px;
    padding: 2px 6px;
  }
}