:root{
  --vn-bg: #ffffff;
  --vn-text: #0f172a;
  --vn-muted: #475569;
  --vn-muted2:#64748b;
  --vn-green-900:#33691e;
  --vn-green-800:#558b2f;
  --vn-green-700:#689f38;
  --vn-green-600:#7cb342;
  --vn-green-500:#8bc34a;
  --vn-green-400:#9ccc65;
  --vn-green-200:#c5e1a5;
  --vn-green-100:#dcedc8;
  --vn-border:#e6edf3;
  --vn-border2:#d7e2ea;
  --vn-shadow: 0 18px 60px rgba(51, 105, 30, 0.06);
  --vn-shadow2: 0 10px 30px rgba(51, 105, 30, 0.05);
  --vn-radius: 18px;
  --vn-radius2: 14px;
  --vn-grad: linear-gradient(135deg, rgba(139,195,74,0.06), rgba(156,204,101,0.10));
  --vn-grad-strong: linear-gradient(135deg, #558b2f 0%, #7cb342 45%, #9ccc65 100%);
  --vn-grad-soft: radial-gradient(1200px 700px at 15% 10%, rgba(139,195,74,0.08), rgba(255,255,255,0) 60%),
               radial-gradient(900px 600px at 85% 25%, rgba(124,179,66,0.06), rgba(255,255,255,0) 60%);
  --vn-ring: 0 0 0 4px rgba(139,195,74,0.12);
  --vn-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --vn-max: 1120px;
}

.hp-page{
  background: var(--vn-grad-soft);
}

.hp-container{
  width: min(var(--vn-max), calc(100% - 40px));
  margin-inline:auto;
}

.hp-section{
  padding: 32px 0;
}

.hp-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(220,237,200,0.85);
  border: 1px solid rgba(197,225,165,0.9);
  color: var(--vn-green-800);
  font-weight: 600;
  letter-spacing: 0.2px;
  font-size: 14px;
}
.hp-dot{
  width:10px; height:10px; border-radius:999px;
  background: var(--vn-green-500);
  box-shadow: 0 0 0 6px rgba(139,195,74,0.08);
  animation: hp-pulse 1.6s ease-in-out infinite;
}
@keyframes hp-pulse{
  0%{ transform: scale(0.9); box-shadow: 0 0 0 2px rgba(139,195,74,0.06); }
  55%{ transform: scale(1.05); box-shadow: 0 0 0 10px rgba(139,195,74,0.10); }
  100%{ transform: scale(0.9); box-shadow: 0 0 0 2px rgba(139,195,74,0.06); }
}

.hp-hero{
  padding: 50px 0 20px;
  position: relative;
  overflow:hidden;
}
.hp-hero::before{
  content:"";
  position:absolute;
  inset: -2px;
  background:
    radial-gradient(800px 500px at 20% 15%, rgba(139,195,74,0.05), rgba(255,255,255,0) 62%),
    radial-gradient(700px 420px at 85% 35%, rgba(124,179,66,0.04), rgba(255,255,255,0) 62%);
  pointer-events:none;
  z-index:0;
}
.hp-hero .hp-container{
  position: relative;
  z-index: 1;
}

.hp-hero-grid{
  display:grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 34px;
  align-items: center;
}

.hp-hero-grid h1{
  margin: 14px 0 10px;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.hp-subtitle{
  margin: 0 0 22px;
  font-size: 16px;
  color: var(--vn-muted);
  max-width: 52ch;
  font-weight: 400;
}

.hp-cta-row{
  display:flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 18px;
}

.hp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid var(--vn-border2);
  background: #ffffff;
  color: var(--vn-text);
  font-weight: 600;
  letter-spacing: 0.1px;
  min-height: 44px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
  box-shadow: 0 2px 0 rgba(15,23,42,0.02);
  text-decoration: none;
  cursor: pointer;
  font-size: 15px;
}
.hp-btn:hover{ transform: translateY(-1px); box-shadow: var(--vn-shadow2); border-color: rgba(124,179,66,0.05); color: var(--vn-text); }
.hp-btn:focus{ outline: none; box-shadow: var(--vn-shadow2), var(--vn-ring); }

.hp-btn-primary{
  border: 0;
  color: #ffffff;
  background: var(--vn-grad-strong);
  box-shadow: 0 16px 40px rgba(85,139,47,0.22);
}
.hp-btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 18px 48px rgba(85,139,47,0.26); color: #fff; }

.hp-btn-secondary{
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(8px);
}

.hp-mini-proof{
  display:flex;
  gap: 12px;
  align-items:center;
  margin-top: 18px;
  color: var(--vn-muted2);
  font-size: 15px;
  font-weight: 400;
}
.hp-mini-proof strong{ color: var(--vn-green-800); }
.hp-check{
  width: 18px; height: 18px; border-radius: 6px;
  border: 1px solid rgba(124,179,66,0.15);
  background: rgba(220,237,200,0.75);
  position: relative;
  flex: 0 0 auto;
}
.hp-check::after{
  content:"";
  position:absolute;
  width: 8px; height: 4px;
  border-left: 2px solid var(--vn-green-700);
  border-bottom: 2px solid var(--vn-green-700);
  transform: rotate(-45deg);
  left: 4px; top: 5px;
}

.hp-dash{
  border-radius: var(--vn-radius);
  border: 1px solid rgba(15,23,42,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.72));
  box-shadow: var(--vn-shadow);
  overflow:hidden;
  position: relative;
  transform: perspective(1100px) rotateY(-8deg) rotateX(4deg);
  transform-origin: center;
  transition: transform .25s ease, box-shadow .25s ease;
  will-change: transform;
}
.hp-dash:hover{
  transform: perspective(1100px) rotateY(-5deg) rotateX(2deg) translateY(-2px);
  box-shadow: 0 22px 70px rgba(2,44,28,0.14);
}

.hp-dash-topbar{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.85);
}
.hp-brandmark{
  display:flex; align-items:center; gap:10px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.hp-leaf{
  width: 28px; height: 28px;
  border-radius: 10px;
  background: var(--vn-grad-strong);
  box-shadow: 0 12px 24px rgba(85,139,47,0.22);
  position: relative;
}
.hp-leaf:before{
  content:"";
  position:absolute;
  inset: 7px 8px 9px 10px;
  border-radius: 999px 999px 999px 0;
  background: rgba(255,255,255,0.85);
  transform: rotate(22deg);
  opacity: 0.9;
}
.hp-chip{
  font-family: var(--vn-mono);
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(124,179,66,0.05);
  background: rgba(220,237,200,0.72);
  color: var(--vn-green-800);
}

.hp-dash-body{
  padding: 16px;
  display:grid;
  gap: 12px;
}

.hp-kpis{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.hp-kpi{
  border-radius: var(--vn-radius2);
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.78);
  padding: 12px;
  position: relative;
  overflow:hidden;
}
.hp-kpi:before{
  content:"";
  position:absolute;
  inset:auto -30px -30px auto;
  width: 120px; height: 120px;
  border-radius: 999px;
  background: rgba(139,195,74,0.06);
}
.hp-kpi .hp-label{ color: var(--vn-muted2); font-size: 12px; }
.hp-kpi .hp-value{ font-size: 18px; font-weight: 500; letter-spacing: -0.02em; margin-top: 4px; }
.hp-kpi .hp-trend{
  margin-top: 8px;
  font-size: 12px;
  color: var(--vn-green-800);
  font-weight: 500;
  display:flex;
  align-items:center;
  gap: 6px;
}
.hp-arrow{
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 9px solid var(--vn-green-600);
  transform: translateY(-1px);
}

.hp-chart{
  border-radius: var(--vn-radius2);
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.78);
  padding: 14px 12px;
}
.hp-chart-header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.hp-chart-title{
  font-weight: 500;
  letter-spacing: -0.02em;
  font-size: 14px;
}
.hp-legend{
  display:flex;
  align-items:center;
  gap: 10px;
  color: var(--vn-muted2);
  font-size: 12px;
}
.hp-swatch{
  width: 10px; height: 10px; border-radius: 3px;
  background: rgba(124,179,66,0.15);
  border: 1px solid rgba(124,179,66,0.18);
}
.hp-spark{
  width:100%;
  height: 122px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(139,195,74,0.08), rgba(139,195,74,0) 70%),
    repeating-linear-gradient(90deg, rgba(15,23,42,0.06) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(0deg, rgba(15,23,42,0.05) 0 1px, transparent 1px 28px);
  position:relative;
  overflow:hidden;
}
.hp-spark svg{
  position:absolute;
  inset: 0;
  width:100%;
  height:100%;
}
.hp-glow-line{
  filter: drop-shadow(0 10px 16px rgba(85,139,47,0.25));
}

.hp-dash-foot{
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.78);
  color: var(--vn-muted2);
  font-size: 12px;
}
.hp-live-pill{
  display:inline-flex;
  gap: 8px;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(124,179,66,0.14);
  background: rgba(220,237,200,0.72);
  color: var(--vn-green-800);
  font-weight: 500;
  font-family: var(--vn-mono);
}
.hp-blink{
  width: 9px; height: 9px; border-radius: 999px;
  background: var(--vn-green-500);
  box-shadow: 0 0 0 6px rgba(139,195,74,0.07);
  animation: hp-blink 1.05s ease-in-out infinite;
}
@keyframes hp-blink{
  0%, 100%{ opacity: 1; transform: scale(1); }
  50%{ opacity: 0.25; transform: scale(0.88); }
}

.hp-page h2{
  margin: 0 0 10px;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.hp-lead{
  margin: 0 0 22px;
  color: var(--vn-muted);
  max-width: 70ch;
  font-size: 16px;
  font-weight: 400;
}
.hp-split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  align-items: start;
}

.hp-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.hp-card{
  border-radius: var(--vn-radius2);
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.78);
  box-shadow: 0 10px 26px rgba(2,44,28,0.05);
  padding: 10px 16px 16px;
  min-height: 118px;
  position:relative;
  overflow:hidden;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.hp-card::before{
  content:"";
  position:absolute;
  inset: -2px -2px auto -2px;
  height: 56px;
  background: linear-gradient(90deg, rgba(220,237,200,0.85), rgba(255,255,255,0));
  opacity: 0.9;
  pointer-events:none;
}
.hp-card h3{
  margin: 2px 0 8px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.hp-card p{
  margin: 0;
  color: var(--vn-muted2);
  font-size: 15px;
  line-height: 1.6;
  font-weight: 400;
}

.hp-icon{
  width: 38px; height: 38px;
  border-radius: 13px;
  background: rgba(220,237,200,0.78);
  border: 1px solid rgba(197,225,165,0.9);
  display:grid;
  place-items:center;
  color: var(--vn-green-800);
  margin-bottom: 10px;
  position:relative;
  z-index:1;
}
.hp-icon svg{
  width: 18px; height: 18px;
  display:block;
}

.hp-map-wrap{
  border-radius: var(--vn-radius);
  border: 1px solid rgba(15,23,42,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.90), rgba(255,255,255,0.70));
  box-shadow: var(--vn-shadow);
  overflow:hidden;
  position: relative;
  min-height: 320px;
}
.hp-map-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.80);
}
.hp-map-title{
  font-weight: 600;
  letter-spacing: -0.02em;
}
.hp-map-body{
  position: relative;
  padding: 16px;
  height: 340px;
}

.hp-world{
  position:absolute;
  inset: 16px;
  border-radius: 16px;
  background:
    radial-gradient(1100px 520px at 40% 35%, rgba(139,195,74,0.08), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(15,23,42,0.03), rgba(15,23,42,0.00)),
    repeating-linear-gradient(90deg, rgba(15,23,42,0.055) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(0deg, rgba(15,23,42,0.05) 0 1px, transparent 1px 38px);
  border: 1px solid rgba(15,23,42,0.07);
  overflow:hidden;
}

.hp-continent{
  position:absolute;
  background: rgba(15,106,71,0.12);
  border: 1px solid rgba(85,139,47,0.18);
  border-radius: 999px;
  filter: blur(0.2px);
}
.hp-c1{ width: 34%; height: 26%; left: 10%; top: 26%; transform: rotate(-12deg); }
.hp-c2{ width: 22%; height: 20%; left: 24%; top: 55%; transform: rotate(18deg); }
.hp-c3{ width: 30%; height: 22%; left: 46%; top: 30%; transform: rotate(10deg); }
.hp-c4{ width: 26%; height: 18%; left: 62%; top: 48%; transform: rotate(-8deg); }
.hp-c5{ width: 18%; height: 16%; left: 76%; top: 34%; transform: rotate(14deg); }

.hp-heat{
  position:absolute;
  border-radius: 999px;
  filter: blur(0.2px);
  opacity: 0.95;
  background: radial-gradient(circle at 30% 30%, rgba(139,195,74,0.20), rgba(139,195,74,0.05) 62%, rgba(255,255,255,0) 72%);
  border: 1px solid rgba(139,195,74,0.07);
  animation: hp-floaty 4.4s ease-in-out infinite;
}
.hp-h1{ width: 170px; height: 170px; left: 14%; top: 30%; animation-delay: -1.8s;}
.hp-h2{ width: 130px; height: 130px; left: 48%; top: 34%; animation-delay: -0.9s;}
.hp-h3{ width: 120px; height: 120px; left: 72%; top: 42%; animation-delay: -2.6s;}
.hp-h4{ width: 110px; height: 110px; left: 56%; top: 60%; animation-delay: -3.1s;}
@keyframes hp-floaty{
  0%,100%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(0,-6px,0) scale(1.02); }
}

.hp-pin{
  position:absolute;
  width: 9px; height: 9px;
  border-radius: 999px;
  background: var(--vn-green-500);
  box-shadow: 0 0 0 6px rgba(139,195,74,0.06);
  animation: hp-blink 1.05s ease-in-out infinite;
}
.hp-pin::after{
  content:"";
  position:absolute;
  inset: -14px;
  border-radius: 999px;
  border: 1px solid rgba(139,195,74,0.08);
  opacity: 0.5;
  transform: scale(0.9);
  animation: hp-ripple 1.7s ease-in-out infinite;
}
@keyframes hp-ripple{
  0%{ opacity: 0.0; transform: scale(0.6); }
  35%{ opacity: 0.35; }
  100%{ opacity: 0.0; transform: scale(1.35); }
}
.hp-p1{ left: 22%; top: 40%; animation-delay: -0.2s; }
.hp-p2{ left: 30%; top: 58%; animation-delay: -0.9s; }
.hp-p3{ left: 52%; top: 44%; animation-delay: -0.5s; }
.hp-p4{ left: 68%; top: 52%; animation-delay: -1.2s; }
.hp-p5{ left: 80%; top: 39%; animation-delay: -0.7s; }
.hp-p6{ left: 60%; top: 67%; animation-delay: -1.6s; }
.hp-p7{ left: 42%; top: 32%; animation-delay: -1.1s; }

.hp-map-note{
  position:absolute;
  left: 16px;
  bottom: 16px;
  right: 16px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items:center;
  justify-content: space-between;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(10px);
  color: var(--vn-muted2);
  font-size: 12.5px;
}
.hp-intensity{
  display:flex;
  align-items:center;
  gap: 10px;
  font-family: var(--vn-mono);
}
.hp-bar{
  width: 130px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,0.10);
  background: linear-gradient(90deg, rgba(124,179,66,0.05), rgba(124,179,66,0.10), rgba(139,195,74,0.25));
  position:relative;
  overflow:hidden;
}
.hp-bar::after{
  content:"";
  position:absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: translateX(-60%);
  animation: hp-sweep 1.9s ease-in-out infinite;
}
@keyframes hp-sweep{
  0%{ transform: translateX(-60%); }
  100%{ transform: translateX(60%); }
}

.hp-steps{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  counter-reset: hp-step;
}
.hp-step{
  border-radius: var(--vn-radius2);
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.78);
  padding: 16px;
  position: relative;
  overflow:hidden;
}
.hp-step::before{
  counter-increment: hp-step;
  content: counter(hp-step);
  position:absolute;
  top: 14px;
  right: 14px;
  width: 34px; height: 34px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  font-weight: 950;
  color: rgba(51,105,30,0.92);
  background: rgba(220,237,200,0.9);
  border: 1px solid rgba(197,225,165,0.9);
  box-shadow: 0 10px 20px rgba(2,44,28,0.08);
}
.hp-step h3{ margin: 0 0 8px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.hp-step p{ margin: 0; color: var(--vn-muted2); font-size: 15px; line-height: 1.6; font-weight: 400; }

.hp-cta{
  padding: 32px 0 40px;
}
.hp-cta-box{
  border-radius: calc(var(--vn-radius) + 6px);
  border: 1px solid rgba(15,23,42,0.08);
  background: linear-gradient(135deg, rgba(124,179,66,0.05), rgba(139,195,74,0.08)),
              rgba(255,255,255,0.78);
  box-shadow: var(--vn-shadow);
  padding: 26px;
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 16px;
  align-items: center;
  position: relative;
  overflow:hidden;
}
.hp-cta-box:before{
  content:"";
  position:absolute;
  width: 420px; height: 420px;
  border-radius: 999px;
  background: rgba(139,195,74,0.08);
  right: -220px;
  top: -220px;
}
.hp-cta-box h2{ margin: 0 0 10px; }
.hp-cta-box p{ margin:0; color: var(--vn-muted); max-width: 62ch; }
.hp-cta-actions{
  display:flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  justify-content: center;
  z-index: 1;
}
.hp-cta-actions .hp-btn{
  width: 100%;
  justify-content: center;
}

.hp-light-field{
  position:absolute;
  inset: 0;
  pointer-events:none;
  opacity: 0.0;
  transition: opacity .2s ease;
  background: radial-gradient(420px 300px at var(--x, 60%) var(--y, 35%), rgba(139,195,74,0.10), rgba(255,255,255,0) 62%);
  mix-blend-mode: multiply;
}
.has-pointer .hp-light-field{ opacity: 1; }

@media (max-width: 980px){
  .hp-hero-grid{ grid-template-columns: 1fr; }
  .hp-dash{ transform: none; }
  .hp-split{ grid-template-columns: 1fr; }
  .hp-grid{ grid-template-columns: repeat(2, 1fr); }
  .hp-kpis{ grid-template-columns: repeat(3, 1fr); }
  .hp-steps{ grid-template-columns: repeat(2, 1fr); }
  .hp-cta-box{ grid-template-columns: 1fr; }
  .hp-cta-actions{ flex-direction: row; flex-wrap: wrap; }
  .hp-cta-actions .hp-btn{ width: auto; flex: 1 1 220px; }
}
@media (max-width: 640px){
  .hp-section{ padding: 24px 0; }
  .hp-hero{ padding: 36px 0 16px; }
  .hp-grid{ grid-template-columns: 1fr; }
  .hp-kpis{ grid-template-columns: 1fr; }
  .hp-steps{ grid-template-columns: 1fr; }
  .hp-map-body{ height: 360px; }
  .hp-world{ inset: 14px; }
  .hp-map-note{ font-size: 12px; }
  .hp-bar{ width: 110px; }
  .hp-cta-actions{ flex-direction: column; }
  .hp-cta-actions .hp-btn{ width: 100%; }
}

@media (prefers-reduced-motion: reduce){
  .hp-page *{ animation: none !important; transition: none !important; }
  .hp-dash{ transform: none !important; }
  .hp-bar::after{ display:none; }
}