:root{
  --black:#06090a;
  --black-2:#0a0f10;
  --panel:#0d1314;
  --panel-2:#11191a;
  --cream:#f3efe6;
  --muted:#aab3b2;
  --teal:#4aaeb0;
  --teal-dark:#19494b;
  --copper:#c66d31;
  --copper-light:#df8a4d;
  --line:#294345;
  --max:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 78% 9%,rgba(44,133,137,.13),transparent 28rem),
    radial-gradient(circle at 12% 35%,rgba(198,109,49,.08),transparent 24rem),
    var(--black);
  color:var(--cream);
  font-family:Arial,Helvetica,sans-serif;
  line-height:1.55;
}
img{max-width:100%;display:block}
a{color:inherit}
.shell{width:min(var(--max),calc(100% - 42px));margin-inline:auto}

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(6,9,10,.94);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(198,109,49,.58);
}
.site-header:after{
  content:"";
  display:block;
  height:2px;
  background:linear-gradient(90deg,transparent 2%,var(--copper) 12%,transparent 35%,var(--teal) 65%,transparent 96%);
  opacity:.7;
}
.nav-shell{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.brand{text-decoration:none;display:flex;align-items:baseline;gap:4px;font-weight:800;white-space:nowrap}
.brand-mu{font-size:2.25rem;line-height:1;color:var(--teal);font-style:italic}
.brand-name{font-size:1.65rem;letter-spacing:-.04em}
.brand-dot{color:var(--teal);margin:0 6px}
.brand-robot{font-size:.8rem;letter-spacing:.18em;color:var(--copper-light)}
.nav{display:flex;align-items:center;gap:26px;font-size:.9rem;font-weight:700;letter-spacing:.04em}
.nav a{text-decoration:none;color:#cfd6d5;transition:.2s ease}
.nav a:hover{color:var(--teal)}

.hero{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid rgba(74,174,176,.32);
}
.hero:before,.hero:after{
  content:"";
  position:absolute;
  pointer-events:none;
  opacity:.5;
}
.hero:before{
  width:310px;height:180px;left:-65px;top:85px;
  border-top:2px solid var(--copper);border-right:2px solid var(--copper);
  transform:skewX(-28deg);
  box-shadow:50px 36px 0 -48px var(--copper),90px 72px 0 -88px var(--copper);
}
.hero:after{
  width:460px;height:260px;right:-165px;bottom:-90px;
  border-left:2px solid var(--teal-dark);border-top:2px solid var(--teal-dark);
  transform:skewX(26deg);
}
.hero-grid{min-height:680px;display:grid;grid-template-columns:.95fr 1.05fr;align-items:center;gap:30px;padding:72px 0 64px}
.hero-copy{position:relative;z-index:2}
.eyebrow{font-size:.8rem;letter-spacing:.16em;font-weight:800;color:#d7dcda;margin-bottom:8px}
.eyebrow span{color:var(--teal);padding:0 5px}
.hero h1{font-size:clamp(5rem,10vw,8.6rem);line-height:.82;margin:12px 0 0;letter-spacing:-.075em;font-weight:800}
.hero h1 .mu{color:var(--teal);font-style:italic;font-weight:800}
.robot-word{
  margin:24px 0 4px;
  color:var(--copper-light);
  font-family:"Arial Narrow",Impact,sans-serif;
  font-size:clamp(3.2rem,7vw,5.7rem);
  line-height:.9;
  letter-spacing:.035em;
  text-transform:uppercase;
  text-shadow:0 0 20px rgba(198,109,49,.11);
}
.hero-lead{font-size:clamp(1.25rem,2.2vw,1.65rem);font-weight:700;margin:18px 0 4px}
.hero-text{max-width:600px;color:#b7c1c0;font-size:1.04rem;margin:6px 0 24px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 20px}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:11px 18px;border:1px solid var(--copper);text-decoration:none;font-weight:800;letter-spacing:.025em;transition:.2s ease}
.button.primary{background:linear-gradient(180deg,var(--copper-light),var(--copper));color:#0a0b0b}
.button.primary:hover{filter:brightness(1.1);transform:translateY(-1px)}
.button.ghost{border-color:var(--teal-dark);color:#dce5e4;background:rgba(12,25,26,.44)}
.button.ghost:hover{border-color:var(--teal);color:var(--teal)}
.copyright-line{color:var(--teal);font-weight:800;letter-spacing:.16em;font-size:.86rem;margin-top:26px}

.hero-art{position:relative;display:grid;place-items:center;min-height:540px}
.board-glow{position:absolute;inset:13% 4% 8%;background:radial-gradient(ellipse,rgba(15,135,139,.32),rgba(0,0,0,0) 68%);filter:blur(24px)}
.hero-art img{position:relative;z-index:2;width:min(640px,100%);filter:drop-shadow(0 28px 35px rgba(0,0,0,.55));transform:rotate(1deg)}

.feature-strip{padding:58px 0 70px;background:linear-gradient(180deg,#080c0d,#0a1011);border-bottom:1px solid rgba(198,109,49,.35)}
.section-kicker{margin:0 0 14px;color:var(--teal);font-size:.85rem;font-weight:900;letter-spacing:.16em}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.feature-card{position:relative;min-height:205px;padding:24px 22px 20px;background:linear-gradient(145deg,rgba(17,25,26,.95),rgba(8,13,14,.95));border:1px solid #273739;overflow:hidden}
.feature-card:before{content:"";position:absolute;left:0;top:0;width:58px;height:2px;background:var(--copper)}
.feature-card:after{content:"";position:absolute;right:-28px;bottom:22px;width:80px;height:1px;background:var(--teal-dark);transform:rotate(-28deg)}
.feature-card h2{font-size:1.07rem;margin:14px 0 7px}
.feature-card p{font-size:.93rem;color:#aeb8b7;margin:0}
.icon{width:46px;height:46px;border:2px solid var(--copper);border-radius:50%;display:grid;place-items:center;color:var(--copper-light);font-size:1.35rem;font-weight:900}
.icon.chip:before{content:"";width:18px;height:18px;border:2px solid currentColor;box-shadow:6px 0 0 -5px currentColor,-6px 0 0 -5px currentColor,0 6px 0 -5px currentColor,0 -6px 0 -5px currentColor}
.icon.arrows{font-size:1.55rem}
.icon.wire{font-size:1.8rem}
.icon.check{font-size:1.35rem}

.content-section{padding:84px 0;border-bottom:1px solid rgba(74,174,176,.18)}
.dark-section{background:linear-gradient(180deg,#090e0f,#080b0c)}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:68px;align-items:center}
.split.reverse{grid-template-columns:.92fr 1.08fr}
.copy-block h2,.install-box h2{font-size:clamp(2rem,4.2vw,3.25rem);line-height:1.05;margin:0 0 22px;letter-spacing:-.035em}
.copy-block p{color:#b3bcbb;font-size:1.02rem}
.copy-block strong{color:#f0eee7}
.panel-photo{margin:0;padding:9px;background:#0d1213;border:1px solid #374547;box-shadow:0 22px 55px rgba(0,0,0,.3)}
.panel-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;background:#060808}
.panel-photo figcaption{padding:8px 5px 2px;text-align:center;color:#7f8c8b;font-size:.78rem}
.schematic-photo img{object-fit:contain;background:#fff}
.spec-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px}
.spec-row div{padding:16px 14px;border-top:1px solid var(--copper);background:#0d1314}
.spec-row strong{display:block;color:var(--teal);font-size:1.28rem}
.spec-row span{display:block;color:#879291;font-size:.78rem;line-height:1.35;margin-top:3px}

.install-box{display:grid;grid-template-columns:1.3fr .7fr;gap:48px;align-items:center;padding:34px;border:1px solid #344244;background:linear-gradient(145deg,#11191a,#090d0e);position:relative;overflow:hidden}
.install-box:after{content:"";position:absolute;right:-30px;top:22px;width:130px;height:2px;background:var(--copper);transform:rotate(-24deg)}
.install-box p{color:#b4bdbd;margin-bottom:0}
.install-actions{display:flex;flex-direction:column;align-items:flex-start;gap:13px;position:relative;z-index:2}
.small-note{font-size:.8rem;color:#7f8988}

.package-band{padding:58px 0 78px;background:#050708}
.package-band img{width:min(980px,100%);margin:auto;border:1px solid #313a3b;border-radius:12px;box-shadow:0 28px 65px rgba(0,0,0,.5)}

.site-footer{border-top:2px solid rgba(198,109,49,.65);background:#050708}
.footer-inner{min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:20px;color:#9ba6a5;font-size:.86rem;letter-spacing:.05em}
.footer-mu{color:var(--teal);font-size:1.2rem;font-style:italic}
.dot{color:var(--copper)}
.footer-domain{color:var(--copper-light);font-weight:700}

@media (max-width:900px){
  .nav{gap:16px;font-size:.82rem}
  .brand-robot{display:none}
  .hero-grid{grid-template-columns:1fr;min-height:auto;padding-top:60px}
  .hero-copy{text-align:center}
  .hero-text{margin-inline:auto}
  .hero-actions{justify-content:center}
  .hero-art{min-height:380px}
  .hero-art img{width:min(560px,90%)}
  .feature-grid{grid-template-columns:1fr 1fr}
  .split,.split.reverse{grid-template-columns:1fr;gap:34px}
  .split.reverse .panel-photo{order:2}
  .install-box{grid-template-columns:1fr}
}

@media (max-width:660px){
  .shell{width:min(100% - 26px,var(--max))}
  .nav-shell{min-height:64px}
  .nav{display:none}
  .brand-mu{font-size:2rem}.brand-name{font-size:1.5rem}
  .hero-grid{padding:46px 0 42px}
  .hero h1{font-size:5rem}
  .robot-word{font-size:3.4rem}
  .hero-art{min-height:300px}
  .feature-grid{grid-template-columns:1fr}
  .feature-card{min-height:160px}
  .content-section{padding:58px 0}
  .spec-row{grid-template-columns:1fr}
  .install-box{padding:24px 20px}
  .package-band{padding:42px 0 56px}
  .footer-inner{flex-direction:column;justify-content:center;text-align:center;min-height:110px}
}