/* ============================================================
   HERO
   ============================================================ */
.hero {
  background: var(--navy);
  background-image:
    radial-gradient(ellipse 60% 80% at 10% 50%, rgba(67,97,238,.18) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 85% 20%, rgba(67,97,238,.1) 0%, transparent 50%);
  padding: 88px 0 96px;
  overflow: hidden;
  position: relative;
}

.hero-glow {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 4px;
  background: linear-gradient(180deg, transparent 0%, var(--blue) 50%, transparent 100%);
  opacity: .6;
  transform-origin: top center;
  animation: glowBreathe 3.2s ease-in-out infinite;
}

.hero-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* Hero Text */
.hero-text .section-label { color: var(--blue); }
.hero-text h1 {
  font-size: 52px;
  font-weight: 900;
  color: var(--itzone-white);
  line-height: 1.15;
  letter-spacing: -.5px;
  margin-bottom: 20px;
}
.hero-text p {
  font-size: 16px;
  color: rgba(255,255,255,.68);
  line-height: 1.75;
  margin-bottom: 34px;
  max-width: 480px;
}
.hero-buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.hero-trust {
  display: flex;
  align-items: center;
  gap: 14px;
}
.trust-avatars {
  display: flex;
}
.trust-avatars img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--navy);
  object-fit: cover;
  margin-left: -8px;
}
.trust-avatars img:first-child { margin-left: 0; }

.trust-text strong {
  display: block;
  color: var(--itzone-white);
  font-size: 14px;
  font-weight: 600;
}
.trust-text span { font-size: 13px; }

/* Hero Visual */
.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-blob {
  width: 420px;
  height: 380px;
  border-radius: 58% 42% 68% 32% / 48% 56% 44% 52%;
  overflow: hidden;
  border: 3px solid rgba(67,97,238,.45);
  box-shadow: 0 0 60px rgba(67,97,238,.3), 0 0 120px rgba(67,97,238,.1);
  flex-shrink: 0;
  animation: blobMorph 10s ease-in-out infinite;
  will-change: border-radius, transform;
}
.hero-blob img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Floating Badges */
.badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 14px;
  padding: 12px 16px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.badge-clients {
  top: 28px;
  left: -10px;
  background: rgba(13,27,42,.72);
  border: 1px solid rgba(255,255,255,.18);
  color: var(--itzone-white);
  animation: floatUp 4.2s ease-in-out 1.1s infinite;
}
.badge-years {
  bottom: 36px;
  right: -16px;
  background: var(--itzone-white);
  color: var(--itzone-black);
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
  animation: floatDown 5.0s ease-in-out 1.4s infinite;
}

.badge-icon-wrap {
  width: 38px;
  height: 38px;
  background: rgba(67,97,238,.18);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  font-size: 17px;
  flex-shrink: 0;
}
.badge-icon-wrap.trophy {
  background: #92400e;
  color: var(--itzone-white);
}

.badge-info strong {
  display: block;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.1;
}
.badge-info span {
  font-size: 12px;
  opacity: .75;
  line-height: 1.3;
}
.badge-info.dark{
    text-align: left;
}
.badge-info.dark strong,
.badge-info.dark span { color: var(--itzone-black); }


/* ============================================================
   ANIMATIONS & MOTION
   ============================================================ */

/* --- Keyframes --- */

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(64px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes blobMorph {
  0%,100% { border-radius: 58% 42% 68% 32% / 48% 56% 44% 52%; transform: translateY(0)    rotate(0deg); }
  20%     { border-radius: 42% 58% 55% 45% / 55% 42% 58% 45%; transform: translateY(-14px) rotate(.6deg); }
  40%     { border-radius: 65% 35% 40% 60% / 40% 65% 35% 60%; transform: translateY(-22px) rotate(-1deg); }
  60%     { border-radius: 35% 65% 65% 35% / 60% 35% 65% 40%; transform: translateY(-10px) rotate(.8deg); }
  80%     { border-radius: 55% 45% 50% 50% / 45% 55% 50% 50%; transform: translateY(-18px) rotate(-.4deg); }
}

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

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

@keyframes glowBreathe {
  0%,100% { opacity: .35; transform: scaleY(.65); }
  50%     { opacity: .9;  transform: scaleY(1); }
}

@keyframes shimmerSweep {
  0%   { background-position: 0% center; }
  100% { background-position: 300% center; }
}

@keyframes particleDrift {
  0%,100% { transform: translateY(0)     translateX(0)    scale(1);    opacity: .55; }
  33%     { transform: translateY(-45px)  translateX(28px)  scale(1.12); opacity: .75; }
  66%     { transform: translateY(-75px)  translateX(-18px) scale(.88);  opacity: .35; }
}

@keyframes iconPop {
  0%   { transform: scale(.6);    opacity: 0; }
  60%  { transform: scale(1.15); }
  80%  { transform: scale(.95); }
  100% { transform: scale(1);    opacity: 1; }
}

@keyframes spinRing {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* --- Hero entrance (staggered, CSS custom property --d set inline) --- */
.hero-anim {
  opacity: 0;
  animation: fadeSlideUp .75s cubic-bezier(.22,.61,.36,1) var(--d, 0s) forwards;
}
.hero-visual-anim {
  opacity: 0;
  animation: slideInRight .9s cubic-bezier(.22,.61,.36,1) .38s forwards;
}

/* --- "Drive Success" gradient shimmer --- */
.text-blue-shimmer {
  background: linear-gradient(90deg,
    #4361ee 0%,
    #7c9bff 25%,
    #bdd0ff 50%,
    #7c9bff 75%,
    #4361ee 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmerSweep 4s linear 1.2s infinite;
}

/* --- Ambient hero particles --- */
.hero-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.hero-particles .p {
  position: absolute;
  border-radius: 50%;
  filter: blur(52px);
  animation: particleDrift linear infinite;
}
.p1 { width: 300px; height: 300px; top: -90px;    left: 14%;  background: rgba(67,97,238,.16);   animation-duration: 20s; }
.p2 { width: 190px; height: 190px; top: 48%;      right: 6%;  background: rgba(67,97,238,.10);   animation-duration: 27s; animation-delay: -7s; }
.p3 { width: 130px; height: 130px; bottom: -40px; left: 48%;  background: rgba(110,140,255,.11); animation-duration: 17s; animation-delay: -11s; }
.p4 { width: 90px;  height: 90px;  top: 22%;      left: 4%;   background: rgba(67,97,238,.08);   animation-duration: 14s; animation-delay: -4s; }
.p5 { width: 65px;  height: 65px;  bottom: 28%;   right: 38%; background: rgba(140,100,255,.09); animation-duration: 23s; animation-delay: -15s; }

/* --- Scroll reveal --- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity   .72s cubic-bezier(.22,.61,.36,1),
    transform .72s cubic-bezier(.22,.61,.36,1);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}


@media (max-width: 1100px) {
  .hero-text h1 { font-size: 40px; }
  .hero-blob { width: 360px; height: 330px; }
}

@media (max-width: 992px) {
  .hero-container {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .hero-text h1 { font-size: 38px; }
  .hero-text p { max-width: 100%; }

  .hero-visual { justify-content: flex-start; }
  .hero-blob { width: 100%; max-width: 420px; height: 320px; }
}

@media (max-width: 768px) {
  .hero { padding: 64px 0 72px; }
  .hero-text h1 { font-size: 32px; }
  .hero-visual { display: none; }
}

@media (max-width: 576px) {
  .hero-text h1 { font-size: 28px; }
  .hero-buttons { flex-direction: column; align-items: flex-start; }

}

@media (max-width: 400px) {
  .hero-text h1 { font-size: 24px; }
}