html,body{overflow-x:hidden;width:100%}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:#0f172a;background:#fff;-webkit-font-smoothing:antialiased;overflow-x:hidden;width:100%}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:80rem;margin:0 auto;padding:0 1rem}

/* PanelPC topbar */
.panelpc-topbar{
  background:linear-gradient(to right,#fafafa,#f5f5f5);
  border-bottom:1px solid rgba(229,229,229,.8);
  font-size:.75rem;color:#404040;
}
.panelpc-topbar-inner{
  max-width:80rem;margin:0 auto;padding:.625rem 1rem;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;
}
.dealer-badge-top{display:none}
.topbar-dealer-note{
  font-size:.6875rem;font-weight:600;color:#64748b;letter-spacing:.02em;white-space:nowrap;
}
.topbar-brands{display:none;align-items:center;gap:.5rem;flex-wrap:nowrap;flex:1}
@media(min-width:768px){.topbar-brands{display:flex}}
.brand-logo-link{display:inline-flex;align-items:center;padding:.25rem .5rem;opacity:.82;transition:.2s}
.brand-logo-link:hover{opacity:1;transform:translateY(-1px)}
.brand-logo-link img{height:1.25rem;max-width:5rem;object-fit:contain}
.topbar-contact{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-left:auto}
.topbar-link{
  display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .5rem;border-radius:.5rem;
  font-weight:500;transition:.2s;white-space:nowrap;
}
.topbar-link:hover{background:#eff6ff;color:#1d4ed8}
.topbar-separator{width:1px;height:1rem;background:linear-gradient(to bottom,transparent,#94a3b8,transparent);opacity:.35}

/* Header — PanelPC */
#panelpc-header{background:rgba(255,255,255,.82);backdrop-filter:blur(12px);border-bottom:1px solid #e5e7eb;position:sticky;top:0;z-index:50}
.header-inner{height:4rem;display:flex;align-items:center;justify-content:space-between;position:relative}
.header-logo{display:flex;align-items:center;flex-shrink:0}
.oeo-lockup{display:block;height:2.625rem;width:auto;max-width:none}
.oeo-lockup--footer{height:2.35rem;margin-bottom:1rem;opacity:.96}
.oeo-lockup--badge{height:2.5rem;width:2.5rem;margin:0 auto}
.header-logo:hover .oeo-lockup{opacity:.92;transform:translateY(-.5px);transition:.2s}
.dealer-pill{display:none}
.header-nav{display:flex;align-items:center;gap:.125rem}
.header-nav a{
  padding:.625rem 1rem;border-radius:.5rem;font-size:.875rem;font-weight:600;color:#262626;
  letter-spacing:-.01em;transition:.2s;
}
.header-nav a:hover,.header-nav a.active{color:#2563eb;background:rgba(239,246,255,.5)}
.btn-ara{
  display:inline-flex;align-items:center;gap:.375rem;padding:.5rem 1rem;border-radius:.75rem;
  background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;font-size:.8125rem;font-weight:700;
  box-shadow:0 4px 14px rgba(37,99,235,.25);transition:.2s;margin-left:.25rem;
}
.btn-ara:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(37,99,235,.3)}
.btn-search{
  display:inline-flex;align-items:center;gap:.5rem;padding:.625rem 1.25rem;border-radius:.75rem;
  background:linear-gradient(135deg,#14b8a6,#0f766e);color:#fff;font-size:.875rem;font-weight:600;
  border:none;cursor:pointer;box-shadow:0 4px 14px rgba(13,148,136,.3);transition:.2s;
}
.btn-search:hover{transform:scale(1.02)}
.btn-contact{padding:.625rem 1rem;border-radius:.5rem;font-size:.875rem;font-weight:600;color:#262626}
.mobile-menu-btn{display:none;background:none;border:1px solid #d4d4d4;border-radius:.5rem;padding:.5rem;cursor:pointer;color:#262626}
@media(max-width:1023px){
  .mobile-menu-btn{display:flex}
  .header-nav{display:none}
  .header-nav.open{
    display:flex;flex-direction:column;position:absolute;top:4rem;left:0;right:0;
    background:#fff;border-bottom:1px solid #e5e7eb;padding:1rem;z-index:40;
  }
  .lg-only{display:none!important}
}
@media(min-width:1024px){.lg-only{display:revert}.lg-flex{display:flex!important}.lg-hidden{display:none!important}.hero-desktop-wrap{display:block}}
@media(max-width:1023px){.hero-desktop-wrap{display:none}}

/* Footer */
.site-footer{background:#0f172a;color:#94a3b8;padding:3rem 0 1.5rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem;padding-bottom:2rem;border-bottom:1px solid rgba(255,255,255,.08)}
@media(max-width:768px){.footer-grid{grid-template-columns:1fr}}
.site-footer h4{color:#fff;font-size:.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:1rem}
.site-footer ul{list-style:none}.site-footer li{margin-bottom:.5rem}
.site-footer a{font-size:.875rem;transition:.2s}.site-footer a:hover{color:#fff}
.footer-dealer{
  margin-top:1rem;padding:1rem;background:rgba(10,191,179,.08);
  border:1px solid rgba(10,191,179,.2);border-radius:.75rem;font-size:.8125rem;color:#cbd5e1;line-height:1.6;
}
.footer-bottom{text-align:center;padding-top:1.25rem;font-size:.8125rem;color:rgba(148,163,184,.6)}

.page-hero{background:linear-gradient(135deg,#0a0f1a,#111827);color:#fff;padding:3rem 0;text-align:center}
.page-hero h1{font-size:clamp(1.75rem,4vw,2.5rem);font-weight:800;margin-bottom:.5rem}
.page-hero p{color:#9ca3af;max-width:36rem;margin:0 auto}
.breadcrumb{font-size:.8125rem;color:#64748b;margin-bottom:1rem}.breadcrumb a:hover{color:#2563eb}

/* Global Search Modal */
.global-search-overlay { position: fixed; inset: 0; background: rgba(9, 14, 23, 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 99999; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 10vh; padding-left: 1rem; padding-right: 1rem; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.global-search-overlay.is-active { opacity: 1; pointer-events: auto; }
.global-search-container { width: 100%; max-width: 600px; background: #1e293b; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 12px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); overflow: hidden; transform: scale(0.95) translateY(-20px); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.global-search-overlay.is-active .global-search-container { transform: scale(1) translateY(0); }
.global-search-header { display: flex; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); background: rgba(15, 23, 42, 0.5); }
.global-search-header svg { color: #94a3b8; flex-shrink: 0; }
.global-search-input { width: 100%; background: transparent; border: none; outline: none; color: #f8fafc; font-size: 1.125rem; padding: 0 1rem; font-weight: 500; font-family: 'Inter', sans-serif; }
.global-search-input::placeholder { color: #64748b; }
.global-search-close { background: rgba(255, 255, 255, 0.1); border: none; color: #94a3b8; border-radius: 6px; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 600; cursor: pointer; transition: 0.2s; }
.global-search-close:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }
.global-search-results { max-height: 400px; overflow-y: auto; padding: 0.5rem; }
.global-search-results::-webkit-scrollbar { width: 6px; }
.global-search-results::-webkit-scrollbar-track { background: transparent; }
.global-search-results::-webkit-scrollbar-thumb { background: #475569; border-radius: 3px; }
.search-result-item { display: flex; align-items: center; padding: 0.75rem; border-radius: 8px; text-decoration: none; color: #f8fafc; transition: 0.2s; gap: 1rem; }
.search-result-item:hover { background: rgba(255, 255, 255, 0.05); }
.search-result-img { width: 48px; height: 48px; object-fit: contain; background: rgba(255, 255, 255, 0.03); border-radius: 6px; padding: 4px; border: 1px solid rgba(255, 255, 255, 0.05); }
.search-result-info { flex: 1; min-width: 0; }
.search-result-sku { font-weight: 700; font-size: 0.9375rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 0.125rem; color: #f8fafc; }
.search-result-desc { font-size: 0.8125rem; color: #94a3b8; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-result-empty { padding: 2rem; text-align: center; color: #94a3b8; font-size: 0.9375rem; }
.header-search-btn { background: transparent; border: none; color: #cbd5e1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem; border-radius: 50%; transition: 0.2s; margin-left: 15px; }
.header-search-btn:hover { background: rgba(255,255,255,0.1); color: #fff; transform: scale(1.05); }