:root{--blue:#0878ee;--black:#030507;--ink:#090c10;--white:#f4f6f8;--muted:#b6c0cb}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#05070a;color:#fff;font-family:Arial,Helvetica,sans-serif}
a{text-decoration:none;color:inherit}
.wrap{width:min(1200px,calc(100% - 34px));margin:auto}

.topbar{position:sticky;top:0;z-index:100;background:rgba(2,4,6,.96);border-bottom:1px solid #202832;backdrop-filter:blur(12px)}
.nav{height:78px;display:flex;align-items:center;justify-content:space-between;gap:22px}
.brand{display:flex;align-items:center;gap:9px}
.brand-cnc{font-size:38px;font-weight:1000;font-style:italic;letter-spacing:-4px}
.brand-copy{display:flex;flex-direction:column}
.brand-copy b{color:#1685f7;font-size:19px}
.brand-copy small{font-size:8px;letter-spacing:.12em}
nav{display:flex;gap:24px;font-size:11px;font-weight:1000}
nav a:hover{color:#1685f7}
.nav-cta{background:var(--blue);padding:14px 16px;font-size:11px;font-weight:1000}

.hero{height:720px;position:relative;overflow:hidden;background:#06090c}
.hero-image{position:absolute;inset:0;background:url('assets/hero-terragator.jpg') 69% center/cover no-repeat;animation:heroPush 20s ease-in-out infinite alternate;will-change:transform}
@keyframes heroPush{0%{transform:scale(1.02)}100%{transform:scale(1.10) translateX(-1.5%)}}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.75) 35%,rgba(0,0,0,.13) 72%),linear-gradient(0deg,rgba(0,0,0,.73),transparent 50%)}

{
  nav{display:none}.nav-cta{font-size:10px}
  .hero{height:760px}.hero-image{background-position:66% center}
  .hero-content{padding-top:112px}.hero h1{font-size:64px}
  .lead{max-width:92%;font-size:14px}
  .benefitbar{grid-template-columns:1fr 1fr;gap:17px}.benefitbar div{border:0;padding:0}
  .equipment-grid{grid-template-columns:1fr 1fr}
  .dark-grid,.area-grid,.contact-grid{grid-template-columns:1fr}
  .call-panel{border-left:0;border-top:1px solid #303946;padding:30px 0 0}
}
@media(max-width:560px){
  .brand-copy small{display:none}.brand-cnc{font-size:34px}.brand-copy b{font-size:17px}.nav-cta{display:none}
  .hero{height:790px}.hero-image{background-position:68% center}
  .hero-content{padding-top:95px}.hero h1{font-size:58px}
  .hero-actions{flex-direction:column;max-width:295px}
  .equipment-grid{grid-template-columns:1fr}.photo{height:260px}
  .services{padding-top:58px}.call-panel a{font-size:37px}
}


/* Clean supplied CNC logo treatment */
.brand-logo-only{
  display:flex;
  align-items:center;
  width:92px;
  height:62px;
  overflow:hidden;
  flex:0 0 auto;
}
.brand-logo-only img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
@media(max-width:560px){
  .brand-logo-only{
    width:82px;
    height:56px;
  }
}

.developer-credit{color:#5f6b78;margin-left:4px}
@media(max-width:560px){.developer-credit{display:block;margin:6px 0 0}}

.developer-credit a{color:inherit;text-decoration:none}.developer-credit a:hover{color:#1685f7}


/* Refined live storm-cloud motion */
.hero{position:relative;overflow:hidden}

.cloud{
  position:absolute;
  z-index:2;
  pointer-events:none;
  top:-10%;
  left:-32%;
  width:170%;
  height:62%;
  opacity:.30;
  filter:blur(18px);
  mix-blend-mode:screen;
  will-change:transform,opacity;
  background:
    radial-gradient(ellipse at 9% 48%,rgba(242,245,248,.72) 0 5%,rgba(110,120,132,.42) 15%,transparent 31%),
    radial-gradient(ellipse at 32% 29%,rgba(228,233,238,.64) 0 8%,rgba(91,101,113,.38) 19%,transparent 34%),
    radial-gradient(ellipse at 58% 51%,rgba(248,250,252,.67) 0 5%,rgba(103,114,126,.40) 17%,transparent 33%),
    radial-gradient(ellipse at 84% 30%,rgba(226,231,236,.62) 0 7%,rgba(86,96,108,.36) 18%,transparent 34%);
}

.cloud-a{}

.cloud-b{}

.cloud-c{}

@keyframes cloudRollA{
  0%{transform:translate3d(-8%,0,0) scale(1.04);opacity:.25}
  50%{transform:translate3d(5%,1.5%,0) scale(1.10);opacity:.32}
  100%{transform:translate3d(19%,0.5%,0) scale(1.14);opacity:.25}
}

@keyframes cloudRollB{
  0%{transform:translate3d(17%,1%,0) scale(1.20);opacity:.14}
  50%{transform:translate3d(3%,-1%,0) scale(1.26);opacity:.22}
  100%{transform:translate3d(-13%,-2%,0) scale(1.31);opacity:.14}
}

@keyframes cloudRollC{
  0%{transform:translate3d(-4%,-1%,0) scale(1.08);opacity:.09}
  50%{transform:translate3d(8%,1%,0) scale(1.13);opacity:.15}
  100%{transform:translate3d(16%,0,0) scale(1.18);opacity:.09}
}




/* FORCE LIVE CLOUD MOTION — intentionally overrides reduced-motion settings */
.hero{position:relative;overflow:hidden}
.hero-image{z-index:0}
.hero-shade{z-index:3}

.cloud{
  position:absolute;
  z-index:2;
  pointer-events:none;
  top:-8%;
  left:-45%;
  width:190%;
  height:66%;
  opacity:.42;
  filter:blur(14px);
  will-change:transform;
  transform:translate3d(0,0,0);
  background:
    radial-gradient(ellipse at 8% 42%,rgba(255,255,255,.85) 0 5%,rgba(140,150,162,.52) 13%,transparent 29%),
    radial-gradient(ellipse at 27% 28%,rgba(236,240,244,.78) 0 8%,rgba(98,108,120,.48) 18%,transparent 34%),
    radial-gradient(ellipse at 48% 52%,rgba(255,255,255,.74) 0 6%,rgba(108,118,130,.48) 17%,transparent 33%),
    radial-gradient(ellipse at 69% 31%,rgba(235,240,245,.76) 0 7%,rgba(91,101,113,.45) 18%,transparent 34%),
    radial-gradient(ellipse at 90% 48%,rgba(255,255,255,.78) 0 5%,rgba(116,126,138,.48) 16%,transparent 31%);
}

.cloud-a{}

.cloud-b{}

.cloud-c{}


  100%{transform:translate3d(20%,2%,0) scale(1.12)}
}

  100%{transform:translate3d(-18%,-2%,0) scale(1.28)}
}

  100%{transform:translate3d(16%,1%,0) scale(1.22)}
}

/* JS-driven cloud layers — no CSS animation dependency */
.cloud{
  position:absolute;
  z-index:2;
  pointer-events:none;
  top:-8%;
  left:-40%;
  width:190%;
  height:66%;
  opacity:.38;
  filter:blur(14px);
  will-change:transform;
  backface-visibility:hidden;
  transform:translate3d(0,0,0);
  background:
    radial-gradient(ellipse at 7% 44%,rgba(255,255,255,.82) 0 5%,rgba(132,142,154,.50) 14%,transparent 30%),
    radial-gradient(ellipse at 29% 29%,rgba(238,242,246,.76) 0 8%,rgba(100,110,122,.46) 18%,transparent 34%),
    radial-gradient(ellipse at 52% 50%,rgba(255,255,255,.72) 0 6%,rgba(110,120,132,.47) 17%,transparent 33%),
    radial-gradient(ellipse at 74% 31%,rgba(236,240,245,.74) 0 7%,rgba(92,102,114,.44) 18%,transparent 34%),
    radial-gradient(ellipse at 93% 46%,rgba(255,255,255,.75) 0 5%,rgba(118,128,140,.46) 16%,transparent 31%);
}
.cloud-b{top:3%;opacity:.26;filter:blur(22px)}
.cloud-c{top:-15%;opacity:.18;filter:blur(30px)}