:root{
  --bg:#0b0b0e;
  --panel:#111119;
  --panel2:#151526;
  --text:#f5f5f7;
  --muted:#b7b7c4;
  --brand:#ff7a1a;
  --brand2:#ffffff;
  --ring: rgba(255,122,26,.35);
  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --radius: 22px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:
    radial-gradient(1100px 700px at 70% -10%, rgba(255,122,26,.22), transparent 60%),
    radial-gradient(900px 600px at 10% 10%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(180deg, #07070a, var(--bg));
  color:var(--text);
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}

.container{width:min(1120px, 92vw); margin:0 auto}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.9rem 1.05rem; border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:var(--text);
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
  backdrop-filter: blur(10px);
}
.btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.24)}
.btn.primary{
  background: linear-gradient(135deg, rgba(255,122,26,.95), rgba(255,122,26,.72));
  border-color: rgba(255,122,26,.55);
  box-shadow: 0 12px 30px rgba(255,122,26,.20);
}
.btn.primary:hover{background: linear-gradient(135deg, rgba(255,122,26,1), rgba(255,122,26,.80))}

.badge{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.35rem .7rem; border-radius: 999px;
  background: rgba(255,122,26,.14);
  border:1px solid rgba(255,122,26,.30);
  color: #ffd6b6;
  font-weight:600;
  letter-spacing:.2px;
}

header{
  position:sticky; top:0; z-index:50;
  background: rgba(10,10,14,.55);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:.85rem 0;
}
.brand{
  display:flex; align-items:center; gap:.8rem;
}
.brand .mark{
  width:40px; height:40px; border-radius: 14px;
  background: rgba(255,122,26,.14);
  border:1px solid rgba(255,122,26,.30);
  display:grid; place-items:center;
}
.brand .mark svg{width:22px; height:22px}
.brand .name{line-height:1.1}
.brand .name strong{display:block; font-size:1rem}
.brand .name span{display:block; font-size:.82rem; color:var(--muted)}
.navlinks{
  display:flex; align-items:center; gap:1.05rem;
}
.navlinks a{
  color:var(--muted);
  font-weight:600;
  font-size:.95rem;
  padding:.5rem .6rem;
  border-radius: 999px;
  transition: background .2s ease, color .2s ease;
}
.navlinks a:hover{background: rgba(255,255,255,.06); color:var(--text)}
.navcta{display:flex; gap:.55rem; align-items:center}

.hamburger{
  display:none;
  width:44px; height:44px; border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
}
.hamburger span{
  display:block; width:18px; height:2px; background: rgba(255,255,255,.85);
  margin:4px auto; border-radius: 10px;
}

.hero{
  padding: clamp(2rem, 4vw, 3.6rem) 0 1.8rem;
}
.heroGrid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(1.2rem, 3vw, 2rem);
  align-items:stretch;
}
.heroCard{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}
.heroInner{
  padding: clamp(1.3rem, 3vw, 2.2rem);
}
.hero h1{
  font-size: clamp(1.8rem, 4.2vw, 3.15rem);
  line-height:1.02;
  margin: .8rem 0 .8rem;
}
.hero p{
  color: var(--muted);
  font-size: clamp(1rem, 1.25vw, 1.08rem);
  line-height: 1.6;
  margin:0 0 1.2rem;
}
.heroActions{display:flex; gap:.7rem; flex-wrap:wrap}
.heroMeta{
  display:flex; gap:1rem; flex-wrap:wrap;
  margin-top: 1.1rem;
  color: var(--muted);
  font-weight:600;
}
.heroMeta div{display:flex; align-items:center; gap:.45rem}
.heroMeta svg{width:18px; height:18px; opacity:.9}

.heroMedia{
  min-height: 320px;
  display:flex;
  flex-direction:column;
  background: linear-gradient(180deg, rgba(255,122,26,.20), rgba(255,255,255,.03));
}
.heroMedia .mediaWrap{
  padding: 1.1rem;
  display:grid;
  gap:.9rem;
}
.cardImg{
  border-radius: 18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
}
.cardImg img{width:100%; height: 220px; object-fit: cover}

.kpis{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap:.8rem;
  padding: 0 1.1rem 1.1rem;
}
.kpi{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  border-radius: 16px;
  padding: .85rem .9rem;
}
.kpi strong{display:block; font-size:1.02rem}
.kpi span{display:block; color:var(--muted); font-weight:600; margin-top:.1rem; font-size:.9rem}

.section{padding: 2.2rem 0}
.sectionHead{
  display:flex; justify-content:space-between; align-items:flex-end; gap:1rem;
  margin-bottom: 1.1rem;
}
.sectionHead h2{
  margin:0;
  font-size: clamp(1.25rem, 2.4vw, 1.9rem);
}
.sectionHead p{
  margin:0;
  color:var(--muted);
  max-width: 62ch;
  line-height: 1.55;
}

.grid2{display:grid; grid-template-columns: 1fr 1fr; gap:1rem}
.panel{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  border-radius: var(--radius);
  padding: 1.1rem;
  box-shadow: 0 10px 34px rgba(0,0,0,.35);
}
.panel h3{margin:.1rem 0 .6rem; font-size:1.15rem}
.panel p{margin:0; color:var(--muted); line-height:1.6}

.features{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: .9rem;
  margin-top: .9rem;
}
.feature{
  padding: 1rem;
  border-radius: 18px;
  background: rgba(0,0,0,.20);
  border:1px solid rgba(255,255,255,.10);
}
.feature strong{display:block; margin-bottom:.25rem}
.feature span{color:var(--muted); line-height:1.5; display:block}

.products{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .95rem;
}
.product{
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  transition: transform .18s ease, border-color .2s ease;
}
.product:hover{transform: translateY(-2px); border-color: rgba(255,122,26,.35)}
.product .img{
  height: 190px; overflow:hidden; background:#0e0e13;
}
.product .img img{width:100%; height:100%; object-fit: cover; transition: transform .25s ease}
.product:hover .img img{transform: scale(1.03)}
.product .body{padding: 1rem 1rem 1.1rem}
.product .body strong{display:block; font-size:1.02rem}
.product .body span{display:block; color:var(--muted); margin-top:.35rem; line-height:1.55}

.brandStrip{
  display:flex; gap:1rem; align-items:center; justify-content:space-between;
  flex-wrap:wrap;
}
.brandStrip img{
  max-height: 86px;
  width:auto;
  opacity:.95;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.35));
}

.gallery{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: .7rem;
}
.gItem{
  grid-column: span 4;
  border-radius: 18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
  cursor: zoom-in;
  position:relative;
}
.gItem img{width:100%; height: 180px; object-fit: cover; transition: transform .25s ease}
.gItem:hover img{transform: scale(1.03)}
.gItem::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(800px 200px at 50% 120%, rgba(255,122,26,.22), transparent 60%);
  opacity:.7; pointer-events:none;
}

.videoWrap{
  aspect-ratio: 16/9;
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  box-shadow: var(--shadow);
}
.videoWrap iframe{width:100%; height:100%; border:0}

.contactGrid{display:grid; grid-template-columns: 1.1fr .9fr; gap:1rem}
.form{
  display:grid; gap:.75rem;
}
.input{
  width:100%;
  padding: .95rem 1rem;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
  color:var(--text);
  outline:none;
}
.input:focus{border-color: rgba(255,122,26,.45); box-shadow: 0 0 0 4px var(--ring)}
textarea.input{min-height: 140px; resize: vertical}

.map{
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  min-height: 360px;
}
.map iframe{width:100%; height:100%; border:0; min-height:360px}

.social{
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
}
.socialHead{
  display:flex; align-items:center; justify-content:space-between;
  padding: 1rem 1rem .75rem;
  gap: .8rem;
}
.socialHead strong{display:block}
.socialHead span{display:block; color:var(--muted); font-size:.95rem; margin-top:.2rem}
.socialFrame{padding:0 1rem 1rem}
.socialFrame iframe{
  width:100%;
  border:0;
  min-height: 420px;
  border-radius: 16px;
  overflow:hidden;
  background:#fff;
}

.footer{
  padding: 2.1rem 0 4.5rem;
  color: var(--muted);
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 1.3rem;
}
.footerRow{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:1.2rem; flex-wrap:wrap;
}
.footer small{display:block; margin-top:.35rem}

.fab{
  position:fixed; right: 16px; bottom: 16px;
  z-index: 80;
  display:flex; flex-direction:column; gap:.7rem;
}
.fab a{
  width: 54px; height:54px; border-radius: 999px;
  display:grid; place-items:center;
  box-shadow: 0 16px 38px rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  transition: transform .15s ease;
}
.fab a:hover{transform: translateY(-2px)}
.fab a.primary{background: linear-gradient(135deg, rgba(37, 211, 102,.95), rgba(37,211,102,.72)); border-color: rgba(37,211,102,.55)}
.fab svg{width:22px; height:22px; fill:#fff}

.modal{
  position:fixed; inset:0;
  display:none;
  place-items:center;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(8px);
  z-index: 120;
  padding: 18px;
}
.modal.open{display:grid}
.modalContent{
  width:min(980px, 94vw);
  border-radius: 22px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(12,12,18,.92);
  box-shadow: var(--shadow);
}
.modalBar{
  display:flex; justify-content:space-between; align-items:center;
  padding: .75rem 1rem;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.modalBar strong{font-size:.98rem}
.closeBtn{
  width:42px; height:42px; border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:var(--text);
  cursor:pointer;
}
.modalImg{max-height: 78vh; width:100%; object-fit:contain; background:#0b0b0e}

.reveal{opacity:0; transform: translateY(10px); transition: opacity .55s ease, transform .55s ease}
.reveal.show{opacity:1; transform:none}

@media (max-width: 980px){
  .heroGrid{grid-template-columns: 1fr}
  .products{grid-template-columns: 1fr 1fr}
  .features{grid-template-columns: 1fr}
  .contactGrid{grid-template-columns: 1fr}
  .kpis{grid-template-columns: 1fr 1fr 1fr}
}
@media (max-width: 720px){
  .navlinks{display:none}
  .hamburger{display:inline-grid; place-items:center}
  .products{grid-template-columns: 1fr}
  .gallery{gap:.6rem}
  .gItem{grid-column: span 12}
  .kpis{grid-template-columns: 1fr}
}