html, body { font-family: "transducer", sans-serif; }

:root{
  --vc-white:#ffffff;
  --vc-orange:#ff9e1b;
  --vc-blue:#002a3a;
  --radius:12px;
  --shadow:0 10px 30px rgba(0,0,0,.25);
}

body{ margin:0; color:var(--vc-white); background:var(--vc-blue); line-height:1.6; }

.site-header{ position:sticky; top:0; z-index:100; background:var(--vc-white); border-bottom:4px solid var(--vc-orange); }
.nav-container{ display:flex; align-items:center; justify-content:space-between; max-width:1200px; margin:0 auto; padding:12px 5%; }
.nav-logo img{ height:36px; width:auto; display:block; }
.nav-links{ list-style:none; display:flex; gap:1.8rem; margin:0; padding:0; }
.nav-links a{ color:var(--vc-blue); text-decoration:none; font-weight:400; transition:.2s; }
.nav-links a:hover{ color:var(--vc-orange); }

.container{ max-width:1200px; margin:0 auto; padding:64px 5%; }
.slice-white{ background:var(--vc-white); color:var(--vc-blue); }
.eyebrow{ display:inline-block; letter-spacing:.06em; text-transform:uppercase; font-size:.9rem; opacity:.85; }
.section-title{ font-size:clamp(1.8rem,2.5vw + 1rem,2.8rem); font-weight:400; margin:.3rem 0 1rem; }
.section-intro{ max-width:900px; opacity:.9; }
.lead{ font-size:1.05rem; opacity:.9; }

.product-hero{ background:linear-gradient(180deg,var(--vc-blue),var(--vc-blue)); color:var(--vc-white); position:relative; overflow:hidden; }
.product-hero__wrap{ max-width:1200px; margin:0 auto; padding:80px 5% 90px; display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; }
.product-hero__copy .eyebrow{ color:var(--vc-white); opacity:.85; }
.product-hero__copy h1{ font-size:clamp(2rem,2.6vw + 1rem,3.2rem); font-weight:400; margin:.4rem 0 1rem; }
.product-hero__copy .lead{ color:var(--vc-white); opacity:.9; margin-bottom:1.2rem; }
.product-hero__art{ height:280px; border-left:14px solid var(--vc-orange); border-radius:18px; background:rgba(255,255,255,.06); }

.hero-bg {
  background: var(--vc-blue);
  background-image: url("sim3.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--vc-white);
  position: relative;
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 42, 58, 0.6);
  z-index: 0;
}
.product-hero__wrap { position: relative; z-index: 1; }

.btn{ display:inline-block; border-radius:999px; padding:.9rem 1.8rem; font-weight:500; text-decoration:none; cursor:pointer; transition:.2s; border:2px solid transparent; color:var(--vc-blue); }
.btn-primary{ background:var(--vc-orange); border:2px solid var(--vc-orange); }
.btn-primary:hover{ background:var(--vc-white); border-color:var(--vc-white); }

.cta{
  background:var(--vc-blue);
  padding:80px 5%;
  color:var(--vc-white);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
}
.cta-inner{ max-width:1100px; margin:0 auto; width:100%; }
.cta-form{ display:grid; gap:12px; }
.cta-form label{ display:grid; gap:6px; }
.cta-form input,.cta-form textarea{
  width:100%;
  padding:10px;
  border-radius:var(--radius);
  border:1px solid var(--vc-white);
  background:transparent;
  color:var(--vc-white);
  font-size:1rem;
}
.cta-form input::placeholder,.cta-form textarea::placeholder{ color:rgba(255,255,255,.75); }

.benefits-grid{ display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-top:28px; }
.benefit{ padding:22px 6px 12px 0; border-top:2px solid rgba(0,42,58,.15); }
.benefit h3{ margin:.4rem 0 .4rem; font-weight:400; }

.feature-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; }
.feature-reverse{ grid-template-columns:.9fr 1.1fr; }
.feature-text h3{ font-size:clamp(1.4rem,1.5vw + 1rem,2.2rem); font-weight:400; margin:0 0 12px; }
.feature-media img{ width:100%; height:auto; border-radius:16px; display:block; box-shadow:var(--shadow); }

.video-wrap{ position:relative; width:100%; aspect-ratio:16/9; border-radius:16px; overflow:hidden; box-shadow:var(--shadow); }
.video-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

.gallery{ position:relative; }
.gallery .slide{ display:none; }
.gallery .slide.active{ display:block; }
.gallery img{
  width:85%;
  max-width:900px;
  margin:0 auto;
  display:block;
  border-radius:12px;
  box-shadow:var(--shadow);
}
.gallery-controls{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:14px; }
.gallery-controls button{ border:1px solid rgba(0,42,58,.4); background:var(--vc-white); color:var(--vc-blue); padding:.4rem .7rem; border-radius:8px; cursor:pointer; }
.gal-dots{ display:flex; gap:10px; }
.gal-dots button{ width:10px; height:10px; border-radius:50%; border:1px solid rgba(0,42,58,.4); background:var(--vc-white); cursor:pointer; }
.gal-dots button.active{ background:var(--vc-orange); border-color:var(--vc-orange); }

.site-footer{ background:var(--vc-white); color:var(--vc-blue); padding:60px 5% 40px; text-align:center; border-top:4px solid var(--vc-orange); box-shadow:0 -4px 12px rgba(0,0,0,.1); }
.footer-inner{ max-width:1100px; margin:0 auto; }
.footer-logo img{ height:40px; width:auto; margin-bottom:20px; }
.footer-links{ list-style:none; display:flex; justify-content:center; gap:2rem; margin:10px 0 20px; padding:0; }
.footer-links a{ color:var(--vc-blue); text-decoration:none; font-size:.95rem; transition:.2s; }
.footer-links a:hover{ color:var(--vc-orange); }
.footer-copy{ font-size:.85rem; opacity:.8; margin-top:20px; }

@media (max-width: 1024px){
  .product-hero__wrap{ grid-template-columns:1fr; }
  .product-hero__art{ height:160px; }
}
@media (max-width: 900px){
  .nav-container{ flex-direction:column; gap:10px; }
  .nav-logo img{ height:30px; }
  .cta{ grid-template-columns:1fr; text-align:center; }
  .benefits-grid{ grid-template-columns:1fr; }
  .feature-grid,.feature-reverse{ grid-template-columns:1fr; }
  .container{ padding:48px 5%; }
}