/* =========================
   ViSiB Hero Module
   v29.6.1
   ========================= */

.hero-visib{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.hero-visib::before{
  content:"";
  position:absolute;
  inset:-35%;
  z-index:-1;
  background:linear-gradient(120deg,var(--v10-blue),var(--v10-pink),var(--v10-cyan),var(--v10-blue));
  background-size:300% 300%;
  filter:blur(100px);
  opacity:.20;
  animation:v10Liquid 14s ease infinite;
}

.hero-visib::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(circle at 50% 18%,rgba(0,229,255,.16),transparent 28%),
    radial-gradient(circle at 80% 30%,rgba(255,64,129,.10),transparent 32%);
}

.hero-visib{
  padding-top:128px !important;
  padding-bottom:55px !important;
}

.hero-visib h1{
  font-size:clamp(34px,4.2vw,58px) !important;
  line-height:1.06 !important;
}

.hero-visib p{
  font-size:clamp(16px,1.6vw,21px) !important;
}

.hero-badge{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  max-width:min(92vw,760px) !important;
  white-space:normal !important;
  text-align:center !important;
  line-height:1.35 !important;
  box-shadow:0 0 28px rgba(108,99,255,.26);
  transform-style:preserve-3d;
  animation:v10BadgeFloat 3.2s ease-in-out infinite !important;
}

.v10-ai-line{
  margin:18px auto 24px;
  max-width:620px !important;
  padding:11px 16px !important;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:rgba(0,0,0,.28);
  backdrop-filter:blur(16px);
  color:#dbeafe;
  font-weight:800;
  font-size:15px !important;
  box-shadow:0 0 34px rgba(108,99,255,.18);
}

.v10-ai-line span{
  color:#00E5FF;
}

.hero-particles-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  opacity:.85;
  z-index:0;
}

.hero-visib .container,
.hero-visib .hero-content{
  position:relative;
  z-index:2;
}

@keyframes v10Liquid{
  0%,100%{background-position:0% 50%;transform:rotate(0deg)}
  50%{background-position:100% 50%;transform:rotate(8deg)}
}

@keyframes v10BadgeFloat{
  0%,100%{
    transform:perspective(800px) rotateX(0deg) translateY(0);
  }
  50%{
    transform:perspective(800px) rotateX(8deg) translateY(-5px);
  }
}

@media(max-width:768px){
  .hero-visib{
    padding-top:138px !important;
  }

  .hero-badge{
    max-width:calc(100vw - 32px) !important;
    font-size:13px !important;
    padding:9px 12px !important;
    border-radius:999px !important;
    animation:none !important;
  }

  .hero-content > div:first-child{
    margin-bottom:16px !important;
  }
}

/* =========================
   V30 HERO REBUILD
   ========================= */

.hero-visib{
  min-height:100vh !important;
  display:flex !important;
  align-items:center !important;
  padding-top:120px !important;
  padding-bottom:80px !important;
}

.hero-visib::before{
  opacity:.30 !important;
  filter:blur(90px) !important;
}

.hero-content{
  max-width:1060px !important;
  margin:0 auto !important;
  text-align:center !important;
}

.hero-badge{
  position:relative !important;
  padding:12px 22px !important;
  font-size:15px !important;
  font-weight:900 !important;
  letter-spacing:.02em !important;
  background:
    linear-gradient(135deg,rgba(0,229,255,.14),rgba(108,99,255,.16),rgba(255,64,129,.12)) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:
    0 0 28px rgba(0,229,255,.22),
    inset 0 0 20px rgba(255,255,255,.04) !important;
  animation:v30Infinity 6s ease-in-out infinite !important;
}

@keyframes v30Infinity{
  0%{transform:translate(0,0) rotate(0deg)}
  12.5%{transform:translate(12px,-7px) rotate(1.5deg)}
  25%{transform:translate(24px,0) rotate(0deg)}
  37.5%{transform:translate(12px,7px) rotate(-1.5deg)}
  50%{transform:translate(0,0) rotate(0deg)}
  62.5%{transform:translate(-12px,-7px) rotate(-1.5deg)}
  75%{transform:translate(-24px,0) rotate(0deg)}
  87.5%{transform:translate(-12px,7px) rotate(1.5deg)}
  100%{transform:translate(0,0) rotate(0deg)}
}

.v30-hero-title{
  margin-top:22px !important;
  font-size:clamp(42px,7vw,86px) !important;
  line-height:.98 !important;
  letter-spacing:-.055em !important;
  color:#fff !important;
  text-shadow:
    0 0 34px rgba(0,229,255,.18),
    0 20px 70px rgba(0,0,0,.45);
}

.v30-hero-title span{
  display:inline-block;
  margin-top:8px;
  background:linear-gradient(135deg,#00E5FF,#6C63FF,#FF4081);
  background-size:220% 220%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:v30TextGradient 7s ease infinite;
}

@keyframes v30TextGradient{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

.v30-hero-subtitle{
  max-width:840px !important;
  margin:24px auto 0 !important;
  font-size:clamp(18px,2vw,25px) !important;
  line-height:1.45 !important;
  color:#dbeafe !important;
  text-align:center !important;
}

.v10-ai-line{
  margin-top:26px !important;
  margin-bottom:28px !important;
  max-width:680px !important;
  font-size:16px !important;
  box-shadow:
    0 0 30px rgba(0,229,255,.20),
    inset 0 0 18px rgba(255,255,255,.04) !important;
}

.hero-visib .hero-buttons,
.hero-visib .btn-group,
.hero-visib div[style*="gap"]{
  justify-content:center !important;
}

.hero-visib .btn{
  font-size:17px !important;
  padding:16px 26px !important;
  border-radius:18px !important;
}

.hero-visib::after{
  z-index:0 !important;
  background:
    radial-gradient(circle at 50% 38%,rgba(0,229,255,.19),transparent 24%),
    radial-gradient(circle at 30% 45%,rgba(108,99,255,.18),transparent 28%),
    radial-gradient(circle at 72% 48%,rgba(255,64,129,.14),transparent 30%) !important;
}

.hero-visib .container,
.hero-visib .hero-content{
  position:relative !important;
  z-index:3 !important;
}

.hero-visib .hero-content::before{
  content:"";
  position:absolute;
  left:50%;
  top:48%;
  width:min(560px,78vw);
  height:min(560px,78vw);
  transform:translate(-50%,-50%);
  z-index:-1;
  border-radius:50%;
  background:
    radial-gradient(circle,rgba(0,229,255,.18),transparent 45%),
    conic-gradient(from 120deg,rgba(0,229,255,.28),rgba(108,99,255,.20),rgba(255,64,129,.18),rgba(0,229,255,.28));
  filter:blur(18px);
  opacity:.75;
  animation:v30Orb 18s linear infinite;
}

@keyframes v30Orb{
  from{transform:translate(-50%,-50%) rotate(0deg) scale(1)}
  50%{transform:translate(-50%,-50%) rotate(180deg) scale(1.06)}
  to{transform:translate(-50%,-50%) rotate(360deg) scale(1)}
}

@media(max-width:768px){
  .hero-visib{
    min-height:auto !important;
    padding-top:132px !important;
    padding-bottom:54px !important;
  }

  .hero-badge{
    animation:v30InfinityMobile 7s ease-in-out infinite !important;
    font-size:13px !important;
    padding:10px 14px !important;
    max-width:calc(100vw - 44px) !important;
  }

  @keyframes v30InfinityMobile{
    0%{transform:translate(0,0)}
    25%{transform:translate(7px,-4px)}
    50%{transform:translate(0,0)}
    75%{transform:translate(-7px,4px)}
    100%{transform:translate(0,0)}
  }

  .v30-hero-title{
    font-size:clamp(34px,11vw,48px) !important;
    line-height:1.02 !important;
    letter-spacing:-.035em !important;
  }

  .v30-hero-subtitle{
    font-size:16px !important;
    line-height:1.5 !important;
    max-width:calc(100vw - 36px) !important;
  }

  .hero-visib .btn{
    width:100% !important;
    max-width:340px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .hero-visib .hero-content::before{
    width:92vw;
    height:92vw;
    opacity:.45;
  }
}

/* =========================
   V30.1 Floating hero badge
   ========================= */

.hero-badge.v301-floating-badge{
  animation:none !important;
  will-change:transform;
  position:relative !important;
  z-index:5 !important;
}

@media(max-width:768px){
  .hero-badge.v301-floating-badge{
    animation:none !important;
    transform:none !important;
  }
}

/* =========================
   V30.2 Hero CTA / Demo Input
   ========================= */

.v302-hero-demo{
  max-width:760px;
  margin:24px auto 0;
  position:relative;
  z-index:4;
}

.v302-demo-card{
  padding:18px;
  border-radius:28px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(22px);
  box-shadow:
    0 28px 90px rgba(0,0,0,.35),
    0 0 38px rgba(0,229,255,.12);
}

.v302-demo-title{
  color:#fff;
  font-weight:900;
  font-size:18px;
  margin-bottom:13px;
}

.v302-demo-form{
  display:flex;
  gap:10px;
}

.v302-demo-form input{
  flex:1;
  min-width:0;
  padding:16px 18px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.30);
  color:#fff;
  outline:none;
  font-size:16px;
  box-shadow:inset 0 0 18px rgba(255,255,255,.035);
}

.v302-demo-form input::placeholder{
  color:rgba(255,255,255,.55);
}

.v302-demo-form input:focus{
  border-color:rgba(0,229,255,.52);
  box-shadow:
    inset 0 0 18px rgba(255,255,255,.04),
    0 0 24px rgba(0,229,255,.18);
}

.v302-demo-form button{
  padding:0 22px;
  border:0;
  border-radius:18px;
  background:linear-gradient(135deg,#00E5FF,#6C63FF,#FF4081);
  color:#fff;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 18px 44px rgba(108,99,255,.30);
}

.v302-demo-chips{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:9px;
  margin-top:13px;
}

.v302-demo-chips button{
  padding:9px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.07);
  color:#e5e7eb;
  font-weight:800;
  cursor:pointer;
  transition:.22s ease;
}

.v302-demo-chips button:hover{
  color:#fff;
  border-color:rgba(0,229,255,.45);
  box-shadow:0 0 22px rgba(0,229,255,.16);
  transform:translateY(-2px);
}

@media(max-width:768px){
  .v302-hero-demo{
    max-width:calc(100vw - 28px);
    margin-top:20px;
  }

  .v302-demo-card{
    padding:14px;
    border-radius:22px;
  }

  .v302-demo-title{
    font-size:15px;
  }

  .v302-demo-form{
    flex-direction:column;
  }

  .v302-demo-form input,
  .v302-demo-form button{
    width:100%;
    min-height:52px;
  }

  .v302-demo-chips{
    justify-content:flex-start;
  }
}