.sgvx-hero {
  --sgvx-bg: #f6f7f3;
  --sgvx-surface: rgba(255,255,255,.84);
  --sgvx-surface-strong: rgba(255,255,255,.92);
  --sgvx-text: #0f1720;
  --sgvx-text-muted: #334155;
  --sgvx-line: rgba(15,23,32,.08);
  --sgvx-accent: #65b32e;
  --sgvx-accent-2: #8cc63f;
  --sgvx-shadow: 0 20px 60px rgba(15, 23, 32, .10);
  --sgvx-radius-xl: 34px;
  --sgvx-radius-lg: 24px;
  --sgvx-radius-md: 18px;
  position: relative;
  overflow: hidden;
  border-radius: var(--sgvx-radius-xl);
  background:
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.92)),
    #f4f7f1;
  border: 1px solid rgba(101,179,46,.10);
  box-shadow: var(--sgvx-shadow);
  isolation: isolate;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--sgvx-text);
}
.sgvx-hero *, .sgvx-hero *::before, .sgvx-hero *::after { box-sizing: border-box; }
.sgvx-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(520px, .97fr);
  min-height: 760px;
}
.sgvx-hero__col { position: relative; }
.sgvx-hero__content { padding: 20px 16px; display:flex; flex-direction:column; }
.sgvx-hero__topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom: 28px; }
.sgvx-hero__brand { display:flex; align-items:center; gap:18px; }
.sgvx-hero__badge { display:inline-flex; align-items:center; gap:10px; min-height:52px; padding:0 18px; border-radius:999px; background:rgba(255,255,255,.82); border:1px solid var(--sgvx-line); color:#20303e; font-size:17px; font-weight:500; backdrop-filter: blur(16px); }
.sgvx-hero__badge svg { width:22px; height:22px; color: var(--sgvx-accent); flex:0 0 auto; }
.sgvx-hero__title { margin:0px 0 18px; font-size: clamp(16px, 2vw, 24px); line-height: 1.5; letter-spacing: -.04em; font-weight: 800; max-width: 720px; }
.sgvx-hero__lead { margin:0 0 28px; max-width: 620px; font-size: clamp(14px, 1.3vw, 18px); line-height:1.38; color: var(--sgvx-text-muted); }
.sgvx-hero__lead strong { color: var(--sgvx-accent); font-weight: 700; }
.sgvx-hero__pills { display:flex; flex-wrap:wrap; gap:14px; margin: 0 0 24px; }
.sgvx-hero__pill { display:flex; align-items:center; gap:12px; min-height:74px; padding:16px 18px; border-radius:20px; background: rgba(255,255,255,.80); border:1px solid var(--sgvx-line); box-shadow: 0 10px 32px rgba(15,23,32,.06); backdrop-filter: blur(14px); min-width: 188px; }
.sgvx-hero__pill-icon { width:42px; height:42px; border-radius:14px; display:grid; place-items:center; flex:0 0 auto; background: linear-gradient(180deg, rgba(101,179,46,.12), rgba(101,179,46,.04)); }
.sgvx-hero__pill-icon img { width:24px; height:24px; display:block; }
.sgvx-hero__pill-text { font-size: 15px; line-height:1.22; color:#24313e; font-weight:600; }
.sgvx-hero__stats { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:18px; margin-top: auto; }
.sgvx-hero__stat { min-height: 208px; padding: 24px 22px 22px; border-radius: 24px; background: rgba(255,255,255,.86); border:1px solid var(--sgvx-line); backdrop-filter: blur(14px); box-shadow: 0 14px 40px rgba(15,23,32,.06); }
.sgvx-hero__stat-icon { width:52px; height:52px; border-radius:16px; display:grid; place-items:center; margin-bottom:18px; }
.sgvx-hero__stat-icon img { width:28px; height:28px; }
.sgvx-hero__stat-value { font-size: clamp(14px, 1.4vw, 18px); line-height:1; font-weight:800; letter-spacing:-.03em; margin-bottom: 6px; }
.sgvx-hero__stat-unit { font-size: 15px; font-weight: 700; color:#182430; margin-bottom:2px; }
.sgvx-hero__stat-line { width:50px; height:3px; border-radius:999px; background: var(--sgvx-accent); margin-bottom:14px; }
.sgvx-hero__stat-desc { font-size:12px; line-height:1.1; color:#4b5563; max-width: 180px; }

.sgvx-hero__visual {
  display:flex;
  align-items:stretch;
  justify-content:stretch;
  min-height:100%;
}
.sgvx-hero__visual-frame {
  position: relative;
  flex:1;
  min-height:100%;
  overflow:hidden;
  background:
    linear-gradient(270deg, rgba(255,255,255,0) 45%, rgba(246,247,243, .68) 71%, rgba(246,247,243, .98) 100%),
    url('../images/hero-industrial-bg.webp') center right / cover no-repeat;
}
.sgvx-hero__visual-frame::before {
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
    radial-gradient(circle at 18% 20%, rgba(101,179,46,.08), transparent 22%);
}
.sgvx-hero__cta {
  position:absolute;
  top:40px;
  right:34px;
  z-index:3;
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding: 0 24px;
  min-height:58px;
  border-radius:999px;
  background: linear-gradient(180deg, var(--sgvx-accent-2), var(--sgvx-accent));
  color:#fff;
  font-size:18px;
  font-weight:700;
  text-decoration:none;
  box-shadow: 0 16px 36px rgba(101,179,46,.35);
}
.sgvx-hero__cta svg { width:22px; height:22px; }
.sgvx-hero__install {
  position:absolute;
  right:26px;
  left:24px;
  bottom:40px;
  z-index:3;
  padding:22px 22px 18px;
  border-radius:26px;
  background: rgba(255,255,255,.88);
  border:1px solid rgba(15,23,32,.07);
  box-shadow: 0 20px 48px rgba(15,23,32,.12);
  backdrop-filter: blur(16px);
}
.sgvx-hero__install-head { margin:0 0 16px; font-size:24px!important; font-weight:800; color:#111827; }
.sgvx-hero__install-head span { color: var(--sgvx-accent); }
.sgvx-hero__install-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:18px; }
.sgvx-hero__install-card + .sgvx-hero__install-card { border-left:1px solid rgba(15,23,32,.08); padding-left:18px; }
.sgvx-hero__install-title { font-size:14px!important; font-weight:700; color:#111827; margin:0 0 12px; }
.sgvx-hero__install-image { aspect-ratio: 1.5/1; width:100%; overflow:hidden; border-radius:18px; background:#f8fafc; border:1px solid rgba(15,23,32,.06); }
.sgvx-hero__install-image img { width:100%; height:100%; display:block; object-fit:cover; }
.sgvx-hero__install-caption { margin:12px 0 0; font-size:13px; line-height:1.35; color:#4b5563; }

.sgvx-hero__decor { position:absolute; pointer-events:none; z-index:1; }
.sgvx-hero__decor--top { top:0; right:0; width:min(62%, 780px); opacity:.95; }
.sgvx-hero__decor--bottom { left:-4%; bottom:-3%; width:min(54%, 680px); opacity:.7; }
.sgvx-hero__gridline {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:
    linear-gradient(rgba(15,23,32,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,32,.022) 1px, transparent 1px),
    radial-gradient(circle at 20% 34%, rgba(101,179,46,.06), transparent 28%);
  background-size: 120px 120px, 120px 120px, auto;
  mask-image: linear-gradient(90deg, rgba(0,0,0,.20), rgba(0,0,0,0) 52%);
}
.sgvx-hero__blueprint {
  position:absolute; left:0; top:0; width:58%; height:100%; z-index:1; pointer-events:none; opacity:.18;
  background-image: url('./wave-top.svg'); background-repeat:no-repeat; background-position: 90px 220px; background-size: 82% auto;
  mix-blend-mode: multiply;
}
@media (max-width: 1420px) {
  .sgvx-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(420px, .92fr); }
  .sgvx-hero__stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 1100px) {
  .sgvx-hero__inner { grid-template-columns: 1fr; }
  .sgvx-hero__visual { min-height: 720px; }
  .sgvx-hero__content { padding-bottom: 24px; }
  .sgvx-hero__cta { top:24px; right:24px; }
  .sgvx-hero__install { left:20px; right:20px; bottom:24px; }
}
@media (max-width: 760px) {
  .sgvx-hero { border-radius: 24px; }
  .sgvx-hero__content { padding: 24px 18px 22px; }
  .sgvx-hero__topbar { flex-direction: column; align-items:flex-start; gap:14px; }
  .sgvx-hero__brand { flex-direction: column; align-items:flex-start; gap:12px; }
  .sgvx-hero__title { font-size: clamp(36px, 12vw, 58px); }
  .sgvx-hero__lead { font-size: 18px; }
  .sgvx-hero__pill { width:100%; min-width:0; }
  .sgvx-hero__stats { grid-template-columns: 1fr; gap:14px; }
  .sgvx-hero__stat { min-height: 178px; }
  .sgvx-hero__visual { min-height: 760px; }
  .sgvx-hero__cta { position:static; margin: 18px 18px 0 auto; }
  .sgvx-hero__install-grid { grid-template-columns: 1fr; }
  .sgvx-hero__install-card + .sgvx-hero__install-card { border-left:0; padding-left:0; border-top:1px solid rgba(15,23,32,.08); padding-top:18px; }
  .sgvx-hero__decor--top { width: 100%; opacity:.7; }
}