:root{
  --navy:#0d1b2a;
  --navy2:#142235;
  --orange:#ff6a00;
  --text:#f5f7fa;
  --muted:#aab5c1;
  --light:#f4f6f8;
  --line:rgba(255,255,255,.12);
  --max:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:#16202c;
  background:#fff;
}
a{color:inherit;text-decoration:none}
.container{width:min(var(--max), calc(100% - 40px)); margin:0 auto}

.site-header{
  position:sticky; top:0; z-index:30;
  background:rgba(13,27,42,.94); backdrop-filter: blur(14px);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.nav{height:76px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px;color:#fff;font-weight:800;letter-spacing:.02em}
.brand-mark{width:42px;height:42px}
.brand-word{font-size:24px;line-height:1}
.brand-word strong{color:var(--orange)}
.desktop-nav{display:flex;align-items:center;gap:28px;color:#dfe5eb;font-size:14px;font-weight:600}
.desktop-nav a:hover{color:#fff}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 22px;border-radius:8px;
  background:var(--orange);color:#fff;font-weight:750;
  border:1px solid var(--orange);transition:.2s ease;cursor:pointer;
}
.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
.btn-small{min-height:40px;padding:0 16px}
.btn-outline{background:transparent;border-color:rgba(255,255,255,.35)}
.btn-outline:hover{border-color:#fff}
.menu-btn{display:none;background:none;border:0;color:#fff;font-size:26px}
.mobile-menu{background:var(--navy);padding:10px 20px 20px;color:#fff}
.mobile-menu a{display:block;padding:12px 0;border-bottom:1px solid var(--line)}

.hero{
  background:
    radial-gradient(circle at 80% 28%, rgba(255,106,0,.14), transparent 28%),
    linear-gradient(135deg,#09131e 0%,#0d1b2a 60%,#101e2e 100%);
  color:#fff;overflow:hidden;
}
.hero-grid{min-height:650px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:70px}
.eyebrow{font-size:12px;letter-spacing:.18em;font-weight:800;color:var(--orange);margin:0 0 20px}
.hero h1{font-size:clamp(48px,6vw,82px);line-height:.98;margin:0;letter-spacing:-.04em}
.hero h1 span{color:var(--orange)}
.lead{font-size:20px;line-height:1.6;color:#cbd4dc;max-width:650px;margin:26px 0 30px}
.lead.small{font-size:18px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.trust-row{display:flex;gap:22px;flex-wrap:wrap;margin-top:34px;color:#aeb9c4;font-size:13px;font-weight:650}
.trust-row span::before{content:"✓";color:var(--orange);margin-right:7px}

.hero-visual{position:relative;height:460px}
.visual-glow{position:absolute;inset:16% 5% 14% 8%;background:radial-gradient(circle,rgba(255,106,0,.28),transparent 65%);filter:blur(12px)}
.component{
  position:absolute;display:flex;align-items:center;justify-content:center;
  color:#e8eef4;font-weight:800;letter-spacing:.05em;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 22px 55px rgba(0,0,0,.35), inset 0 0 28px rgba(255,255,255,.025);
  background:linear-gradient(150deg,#1b2b3e,#101a27);
}
.component::after{content:"";position:absolute;bottom:0;left:14%;right:14%;height:5px;background:var(--orange);border-radius:3px 3px 0 0}
.component-a{width:120px;height:160px;left:4%;bottom:15%;border-radius:15px;font-size:40px}
.component-b{width:150px;height:205px;left:30%;bottom:8%;border-radius:11px;font-size:30px}
.component-c{width:115px;height:145px;right:9%;bottom:20%;border-radius:9px;font-size:26px}
.component-d{width:95px;height:110px;right:31%;top:12%;border-radius:50%;font-size:28px}
.visual-caption{position:absolute;right:0;bottom:2%;font-size:12px;letter-spacing:.2em;color:#8091a2;text-transform:uppercase}

.visual-strip{padding:100px 0;background:#fff}
.section-heading{max-width:760px;margin-bottom:42px}
.section-heading h2,.rfq-section h2,.about h2,.contact h2{font-size:clamp(34px,4vw,52px);letter-spacing:-.035em;margin:0 0 18px;color:#0e1b29}
.section-heading p:not(.eyebrow){font-size:18px;line-height:1.6;color:#66717d}
.category-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.category-card{
  min-height:190px;padding:22px 16px;border:1px solid #e7ebef;border-radius:14px;
  background:linear-gradient(#fff,#fafbfc);display:flex;flex-direction:column;justify-content:flex-end;
}
.category-card h3{font-size:15px;line-height:1.3;margin:16px 0 0}
.icon{width:58px;height:58px;border:2px solid #233447;border-radius:12px;position:relative}
.icon::before,.icon::after{content:"";position:absolute;background:var(--orange)}
.relay-icon::before{width:28px;height:2px;left:13px;top:27px}
.relay-icon::after{width:2px;height:28px;left:27px;top:13px}
.control-icon{border-radius:50%}
.control-icon::before{width:18px;height:18px;border-radius:50%;left:18px;top:18px}
.control-icon::after{width:2px;height:15px;left:27px;top:-8px}
.panel-icon::before{width:30px;height:22px;left:12px;top:16px;border:2px solid var(--orange);background:transparent}
.panel-icon::after{width:18px;height:2px;left:20px;top:27px}
.power-icon::before{width:4px;height:26px;transform:skew(-18deg);left:26px;top:13px}
.power-icon::after{width:18px;height:4px;left:19px;top:27px;transform:rotate(-55deg)}
.sensor-icon::before{width:8px;height:8px;border-radius:50%;left:23px;top:23px}
.sensor-icon::after{width:32px;height:32px;border:2px solid var(--orange);background:transparent;border-radius:50%;left:11px;top:11px}
.connect-icon::before{width:30px;height:12px;left:12px;top:22px;border-radius:5px}
.connect-icon::after{width:12px;height:2px;right:-10px;top:27px}

.rfq-section{padding:100px 0;background:var(--light)}
.rfq-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:start}
.contact-mini{display:flex;gap:10px;flex-wrap:wrap;font-weight:700}
.contact-mini a{color:#0f3654}
.rfq-form{background:#fff;border-radius:18px;padding:30px;box-shadow:0 12px 35px rgba(15,31,48,.08)}
.rfq-form label{display:block;font-weight:700;font-size:13px;margin-bottom:16px;color:#334151}
.rfq-form input,.rfq-form textarea{
  display:block;width:100%;margin-top:8px;padding:14px 15px;border:1px solid #dce2e8;border-radius:8px;
  font:inherit;background:#fff;color:#182432;outline:none;
}
.rfq-form input:focus,.rfq-form textarea:focus{border-color:#8ca3b7;box-shadow:0 0 0 3px rgba(38,83,120,.08)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-note{font-size:12px;color:#7b8792;margin-bottom:0}

.about{padding:100px 0;background:#fff}
.about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:90px}
.about-copy{font-size:19px;line-height:1.75;color:#56626d}
.about-copy p:first-child{margin-top:0}

.contact{padding:0 0 100px;background:#fff}
.contact-box{
  border-radius:20px;padding:54px;
  background:linear-gradient(135deg,#0d1b2a,#15283c);color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:40px;
}
.contact-box h2{color:#fff;margin-bottom:10px}
.contact-box p{color:#bbc6d0}
.contact-actions{display:flex;gap:12px;flex-wrap:wrap}

.site-footer{background:#08121c;color:#aeb8c2;padding:50px 0}
.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end}
.footer-tagline{margin:16px 0 0}
.footer-meta{text-align:right;font-size:13px;line-height:1.7}
.footer-meta a{color:#fff}

@media (max-width:980px){
  .desktop-nav{display:none}
  .menu-btn{display:block}
  .hero-grid,.rfq-grid,.about-grid{grid-template-columns:1fr}
  .hero-grid{padding:90px 0 60px;gap:10px}
  .hero-visual{height:340px}
  .category-grid{grid-template-columns:repeat(3,1fr)}
  .rfq-grid,.about-grid{gap:40px}
}
@media (max-width:640px){
  .container{width:min(100% - 28px,var(--max))}
  .nav{height:68px}
  .brand-word{font-size:21px}
  .brand-mark{width:36px;height:36px}
  .hero-grid{min-height:auto;padding-top:70px}
  .lead{font-size:17px}
  .hero-actions .btn{width:100%}
  .category-grid{grid-template-columns:1fr 1fr}
  .category-card{min-height:160px}
  .two-col{grid-template-columns:1fr;gap:0}
  .rfq-form{padding:22px}
  .contact-box{padding:34px 24px;display:block}
  .contact-actions{margin-top:28px}
  .contact-actions .btn{width:100%}
  .footer-grid{grid-template-columns:1fr}
  .footer-meta{text-align:left}
}