:root{
  --bg:#1c1d24;
  --fg:#eaeaf0;
  --muted:#a7a7b3;
  --orange:#ff7a00;
  --panel:#1c1d24;
  --glass: rgba(15,16,22,0.6);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--fg);
  background:var(--bg);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  line-height:1.5;
}

/* Layout helpers */
.container{
  width:min(1100px, calc(100% - 2rem));
  margin-inline:auto;
}
.section{
  padding:72px 0;
}

/* Brand header */
.brand-header{
  background: linear-gradient(180deg, #0b0b0d 0%, #0d0e14 100%);
  border-bottom:1px solid #151724;
}
.brand-wrap{
  display:flex;
  align-items:center;
  gap:16px;
  padding:20px 0;
}

/* Logo — image only, no fallback overlay */
.logo {
  display:inline-block;
  width:128px; 
  height:128px;
  border-radius:12px;
  overflow:hidden;
  text-decoration:none;
  user-select:none;
}

.logo-img {
  width:auto;
  height:100%;
  max-width:100%;
  object-fit:contain;
  display:block;
  border-radius:12px;
}

/* Remove any previous AO background or overlay effects */
.logo::before,
.logo::after {
  content:none !important;
  background:none !important;
}

.brand-text .site-title{
  margin:0;
  font-size:2rem;
  font-weight:800;
}
.brand-text .site-tagline{
  margin:.15rem 0 0;
  color:var(--muted);
}

/* Nav (below header) */
.main-nav{
  position:sticky; top:0;
  z-index:50;
  backdrop-filter:saturate(120%) blur(8px);
  background:var(--glass);
  border-bottom:1px solid #1a1c29;
}
.main-nav .container{ display:flex; }
.main-nav ul{
  list-style:none; margin:0; padding:0;
  display:flex; gap:18px; align-items:center;
}
.main-nav a{
  display:inline-block;
  padding:14px 10px;
  color:var(--fg);
  text-decoration:none;
  font-weight:600;
  opacity:.85;
}
.main-nav a:hover{ opacity:1; }
.main-nav a.active{
  color:var(--orange);
}

/* Hero */
.hero-grid{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap:32px;
  align-items:center;
}
.hero h2{ font-size:2.1rem; margin:0 0 .25rem; }
.hero p{ color:var(--muted); max-width:60ch; }
.hero .cta{
  display:inline-block; margin-top:18px;
  background:var(--orange);
  color:#111; font-weight:800; text-decoration:none;
  padding:12px 16px; border-radius:10px;
  box-shadow: 0 6px 20px rgba(255,122,0,.25);
}
.hero-media img{
  width:100%; height:auto; border-radius:14px; border:1px solid #1b1d27;
  background:#0d0f16;
}

/* Section heads */
.section-head h2{
  margin:0 0 .5rem;
  font-size:1.8rem;
}
.section-head p{ color:var(--muted); }

/* Cards */
.card-grid{
  display:grid; gap:18px; margin-top:22px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
.card{
  background:var(--panel);
  border:1px solid #1b1d27;
  border-radius:14px;
  overflow:hidden;
}
.card img{ width:100%; height:auto; display:block; }
.card-body{ padding:16px; }
.card-body h3{ margin:0 0 .35rem; }
.card-body p{ color:var(--muted); }

/* Products */
.product-grid{
  display:grid; gap:18px; margin-top:22px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
.product-card{
  background:var(--panel);
  border:1px solid #1b1d27;
  border-radius:14px;
  overflow:hidden;
  display:flex; flex-direction:column;
}
.product-card img{ width:100%; display:block; }
.product-body{ padding:16px; display:grid; gap:10px; }
.video-wrap{ border-radius:10px; overflow:hidden; border:1px solid #222437; }
.video-16x9{ position:relative; width:100%; padding-top:56.25%; }
.video-16x9 iframe{
  position:absolute; inset:0; width:100%; height:100%;
}

/* Coming soon list */
.coming-soon{ margin:0; padding-left:18px; color:var(--muted); }

/* Contact */
.contact-grid{
  display:grid; gap:18px; margin-top:22px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
.contact-card{
  background:var(--panel);
  border:1px solid #1b1d27;
  border-radius:14px;
  padding:16px;
}
.contact-link{ color:var(--orange); text-decoration:none; }
.contact-link:hover{ text-decoration:underline; }

/* Footer */
.site-footer{
  border-top:1px solid #171928;
  padding:22px 0; color:var(--muted);
  font-size:.95rem;
}

/* Fade-in on scroll */
.fade-in{
  opacity:0; transform:translateY(10px);
  transition:opacity .7s ease, transform .7s ease;
}
.show{
  opacity:1; transform:translateY(0);
}
.delay-1{ transition-delay: .1s; }
.delay-2{ transition-delay: .2s; }

/* Responsive */
@media (max-width: 1000px){
  .hero-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 900px){
  .product-grid{ grid-template-columns: 1fr; }
  .card-grid{ grid-template-columns: 1fr; }
  .contact-grid{ grid-template-columns: 1fr; }
}