diff --git a/hero-v2.html b/hero-v2.html
index 5c284bb..8a50855 100644
--- a/hero-v2.html
+++ b/hero-v2.html
@@ -78,11 +78,11 @@ body {
background: linear-gradient(
90deg,
transparent 0%,
- transparent 35%,
- rgba(255,255,255,0.008) 47%,
- rgba(34,197,94,0.03) 50%,
- rgba(255,255,255,0.006) 53%,
- transparent 65%,
+ transparent 32%,
+ rgba(255,255,255,0.025) 44%,
+ rgba(34,197,94,0.06) 50%,
+ rgba(255,255,255,0.02) 56%,
+ transparent 68%,
transparent 100%
);
background-size: 200% 100%;
@@ -99,15 +99,20 @@ body {
min-height: 100vh; display: flex; flex-direction: column;
align-items: center; justify-content: center;
padding: 120px 24px 80px;
+ overflow: hidden;
}
/* ============================================================
KPI CARDS — floating on sides
============================================================ */
-.kpi-cards { position: relative; z-index: 20; }
+.kpi-cards {
+ position: absolute; top: 0; left: 0; right: 0; bottom: 0;
+ z-index: 20; pointer-events: none;
+}
.kpi-card {
position: absolute;
+ pointer-events: auto;
background: rgba(22,22,24,0.85);
backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.08);
@@ -242,16 +247,18 @@ body {
RESPONSIVE
============================================================ */
@media (max-width: 1024px) {
- .kpi-card {
- position: static; transform: none;
- width: 100%; max-width: 320px; margin: 0 auto 12px;
- }
- .kpi-card.left, .kpi-card.right { left: auto; }
.kpi-cards {
+ position: relative; top: auto; left: auto; right: auto; bottom: auto;
display: grid; grid-template-columns: 1fr 1fr;
gap: 12px; width: 100%; max-width: 660px;
margin: 0 auto 32px;
+ pointer-events: auto;
}
+ .kpi-card {
+ position: static; transform: none;
+ width: 100%;
+ }
+ .kpi-card.left, .kpi-card.right { left: auto; }
.hero { padding-top: 160px; }
.hero-glow { width: 500px; height: 500px; }
}