/* Hero Section */
.hero {
  display:grid;
  grid-template-columns:65% 35%;
  align-items:center;
  min-height:100vh;
  padding:clamp(20px,6vw,80px);
  background: radial-gradient(circle at top left, rgba(172,255,47,0.15), transparent 50%),
              radial-gradient(circle at bottom right, rgba(172,255,47,0.15), transparent 50%),
              #000;
}

/* Content */
.hero__content { max-width:700px; }
.hero__title { font-size:clamp(2rem,4.8vw,4rem); font-weight:800; line-height:1.2; margin-bottom:24px; position:relative; }

.hero__title .outline {
  position:relative; color:transparent; -webkit-text-stroke:2px #fff; display:inline-block; overflow:hidden;
}
.hero__title .outline::before {
  content: attr(data-text); position:absolute; left:0; top:0; width:100%; height:100%;
  background: linear-gradient(90deg,#fff 0%,#fff 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  clip-path: polygon(0 100%,100% 100%,100% 100%,0 100%);
  transition: clip-path 0.8s ease;
}
.hero__title:hover .outline::before { animation: waveFill 2s ease forwards; }
@keyframes waveFill {
  0% { clip-path: polygon(0 100%,100% 100%,100% 100%,0 100%); }
  30% { clip-path: polygon(0 60%,20% 65%,40% 55%,60% 65%,80% 55%,100% 60%,100% 100%,0 100%); }
  60% { clip-path: polygon(0 40%,20% 35%,40% 45%,60% 35%,80% 45%,100% 40%,100% 100%,0 100%); }
  100% { clip-path: polygon(0 0%,100% 0%,100% 100%,0 100%); }
}
.hero__title .fill { color:#fff; }

.hero__subtitle{font-size:clamp(1rem,1.3vw,1.2rem);line-height:1.6;opacity:0.85;margin-bottom:32px;max-width:580px;color:#fff !important;}
.hero__badges { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:28px; }
.badge { background:#111; border-radius:6px; padding:8px 14px; font-size:0.9rem; font-weight:600; border:1px solid #333; color: #b3f35a;}

/* Buttons */
.hero__actions { display:flex; flex-wrap:wrap; gap:16px; }
.hero__actions-wrapper { display:flex; justify-content:flex-start; flex-wrap:wrap; }
.btn {
  position:relative; padding:14px 32px; border-radius:50px; font-weight:600; font-size:1rem;
  cursor:pointer; border:none; outline:none; overflow:hidden;
  transition:transform 0.2s ease, box-shadow 0.3s ease;
  box-shadow: inset 0 -4px 8px rgba(0,0,0,0.4), 0 6px 15px rgba(182,255,78,0.4);
  background:linear-gradient(145deg,#c7ff73,#9ee63e); color:#000; animation:pulse 4s infinite;
}
.btn:active { transform: scale(0.96) translateY(2px); box-shadow: inset 0 -2px 4px rgba(0,0,0,0.6), 0 3px 8px rgba(182,255,78,0.3); }
.btn::after {
  content:""; position:absolute; top:0; left:-75%; width:50%; height:100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.6), transparent);
  transform: skewX(-25deg); transition:0.5s;
}
.btn:hover::after { left:130%; }
@keyframes pulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.05);} }
.btn-secondary { background:linear-gradient(145deg,#222,#111); color:#fff; box-shadow: inset 0 -4px 8px rgba(0,0,0,0.6), 0 6px 15px rgba(255,255,255,0.2); }

/* Visuals */
.hero__visuals {
  display: flex;
  justify-content: center;
  gap: 36px;
  flex-wrap: nowrap;
  position: relative;
}

/* Parent holds static offset */
.hero__img {
  flex: 0 0 clamp(180px, 20vw, 260px);
  position: relative;
}

/* Inner handles magnetic movement via CSS variables */
.hero__img-inner {
  --tx: 0px; /* Magnetic X */
  --ty: 0px; /* Magnetic Y */
  transform: translate(var(--tx), var(--ty)); /* Apply transformation */
transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  will-change: transform;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

.line{width:80%;height:3px;background:linear-gradient(to right,#000,#00FF00,#000);background-size:200% 100%;animation:glowingLine 3s ease-in-out infinite}@keyframes glowingLine{0%{background-position:200% 0}50%{background-position:0% 0}100%{background-position:200% 0}}