/* ==========================================================
   MENTOROID EDUVISOR
   Hero Section
   Version: 1.1
========================================================== */

.hero{
  position:relative;
  min-height:calc(100vh - 42px);
  display:flex;
  align-items:center;
  overflow:hidden;
  padding:140px 0 100px;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at top left, rgba(0,212,255,.16), transparent 38%),
             radial-gradient(circle at bottom right, rgba(122,92,255,.16), transparent 34%);
  pointer-events:none;
  z-index:0;
}

.hero-container{
  width:100%;
  max-width:1320px;
  margin:0 auto;
  padding:0 24px;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);
  align-items:center;
  gap:72px;
}

.hero-content{
  position:relative;
  z-index:2;
  max-width:620px;
}

.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 18px;
  border-radius:999px;
  background:rgba(0,212,255,.12);
  border:1px solid rgba(0,212,255,.24);
  color:var(--color-primary);
  font-size:.9rem;
  font-weight:700;
  letter-spacing:.02em;
  margin-bottom:24px;
  box-shadow:0 10px 30px rgba(0,212,255,.12);
}

.hero-title{
  margin-bottom:24px;
  font-size:clamp(3rem,6vw,5.4rem);
  font-weight:800;
  line-height:1.04;
  letter-spacing:-.035em;
}

.hero-title span{
  color:var(--color-primary);
}

.hero-description{
  max-width:620px;
  margin-bottom:24px;
  font-size:1.08rem;
  line-height:1.8;
  color:var(--color-text-secondary);
}

.hero-trust-strip{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:28px;
}

.hero-trust-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  color:var(--color-text-secondary);
  font-size:.92rem;
  backdrop-filter:blur(10px);
}

.hero-trust-icon{
  display:inline-grid;
  place-items:center;
  width:22px;
  height:22px;
  border-radius:50%;
  background:rgba(0,212,255,.16);
  color:var(--color-primary);
  font-size:.8rem;
  font-weight:700;
}

.hero-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-bottom:30px;
}

.hero-stats{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  margin-top:0;
}

.hero-stat{
  display:flex;
  flex-direction:column;
  min-width:112px;
  padding:10px 0;
  border-left:1px solid rgba(255,255,255,.12);
  padding-left:18px;
}

.hero-stat:first-child{
  border-left:0;
  padding-left:0;
}

.hero-stat-number{
  font-size:1.5rem;
  font-weight:800;
  color:var(--color-primary);
}

.hero-stat-label{
  font-size:.95rem;
  color:var(--color-text-secondary);
}

.hero-visual{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:560px;
}

.hero-visual::before{
  content:"";
  position:absolute;
  width:80%;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle, rgba(0,212,255,.24), transparent 68%);
  filter:blur(70px);
  opacity:.9;
  z-index:0;
}

.hero-floating-card{
  position:absolute;
  z-index:3;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:16px 18px;
  border-radius:18px;
  background:rgba(7,12,28,.8);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(16px);
  box-shadow:0 18px 44px rgba(0,0,0,.3);
}

.hero-floating-card-top{
  top:6%;
  right:-4%;
  transform:rotate(-6deg);
}

.hero-floating-card-bottom{
  bottom:8%;
  left:-4%;
  transform:rotate(6deg);
}

.hero-floating-label{
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--color-primary);
}

.hero-floating-card strong{
  color:#fff;
  font-size:1rem;
}

.hero-video-card{
  position:relative;
  width:100%;
  max-width:540px;
  border-radius:28px;
  overflow:hidden;
  background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(24px);
  box-shadow:0 28px 90px rgba(0,0,0,.42);
  z-index:2;
  transition:transform .35s ease, box-shadow .35s ease;
}

.hero-video-card:hover{
  transform:translateY(-8px);
  box-shadow:0 40px 100px rgba(0,0,0,.48);
}

.hero-video-image{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
}

.hero-video-image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.hero-play-button{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:78px;
  height:78px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
  background:rgba(255,255,255,.18);
  backdrop-filter:blur(18px);
  color:#ffffff;
  font-size:30px;
  cursor:pointer;
  transition:transform .35s ease, background .35s ease, box-shadow .35s ease;
}

.hero-play-button:hover{
  transform:translate(-50%,-50%) scale(1.08);
  background:rgba(255,255,255,.24);
  box-shadow:0 10px 28px rgba(0,0,0,.25);
}

.hero-video-info{
  padding:28px;
}

.hero-video-time{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:16px;
  font-size:.9rem;
  color:var(--color-text-secondary);
}

.hero-video-info h3{
  margin-bottom:14px;
  font-size:1.75rem;
}

.hero-video-info p{
  color:var(--color-text-secondary);
  line-height:1.8;
}

.hero-video-stats{
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin-top:24px;
  padding:0 28px 28px;
}

.video-stat{
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1;
  min-width:0;
}

.video-stat strong{
  color:var(--color-primary);
  font-size:1.15rem;
}

.video-stat span{
  font-size:.85rem;
  color:var(--color-text-secondary);
}

.video-modal{
  position:fixed;
  inset:0;
  display:none;
  justify-content:center;
  align-items:center;
  background:rgba(5,10,25,.92);
  backdrop-filter:blur(16px);
  z-index:3000;
}

.video-overlay{
  position:absolute;
  inset:0;
}

.video-container{
  position:relative;
  width:min(90%,1100px);
  border-radius:24px;
  overflow:hidden;
  background:#000;
  box-shadow:0 35px 100px rgba(0,0,0,.6);
  z-index:2;
}

.hero-video{
  width:100%;
  display:block;
  aspect-ratio:16/9;
  background:#000;
}

.video-close{
  position:absolute;
  top:16px;
  right:16px;
  width:52px;
  height:52px;
  border:none;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(12px);
  color:#ffffff;
  font-size:1.3rem;
  cursor:pointer;
  z-index:5;
  transition:transform .3s ease, background .3s ease;
}

.video-close:hover{
  transform:scale(1.08);
  background:rgba(255,255,255,.22);
}

@media (max-width:1100px){
  .hero-container{
    grid-template-columns:1fr;
    gap:56px;
    text-align:center;
  }

  .hero-content{
    margin:0 auto;
  }

  .hero-description,
  .hero-trust-strip,
  .hero-buttons,
  .hero-stats{
    justify-content:center;
  }

  .hero-trust-strip{
    justify-content:center;
  }

  .hero-visual{
    min-height:500px;
  }

  .hero-floating-card-top{
    right:2%;
  }

  .hero-floating-card-bottom{
    left:2%;
  }
}

@media (max-width:768px){
  .hero{
    padding:112px 0 76px;
  }

  .hero-container{
    padding:0 20px;
    gap:44px;
  }

  .hero-title{
    letter-spacing:-.02em;
  }

  .hero-buttons{
    justify-content:center;
  }

  .hero-stats{
    justify-content:center;
  }

  .hero-floating-card{
    padding:12px 14px;
  }

  .hero-video-stats{
    flex-direction:column;
  }
}

@media (max-width:480px){
  .hero{
    padding:104px 0 70px;
  }

  .hero-container{
    padding:0 16px;
  }

  .hero-badge{
    font-size:.82rem;
  }

  .hero-title{
    font-size:2.5rem;
  }

  .hero-description{
    font-size:1rem;
  }

  .hero-buttons{
    flex-direction:column;
    width:100%;
  }

  .hero-buttons .btn{
    width:100%;
  }

  .hero-stats{
    gap:16px;
  }

  .hero-stat{
    border-left:0;
    padding-left:0;
    align-items:center;
  }

  .hero-visual{
    min-height:430px;
  }

  .hero-floating-card{
    display:none;
  }

  .hero-video-card{
    max-width:100%;
  }

  .hero-video-info{
    padding:22px;
  }

  .hero-video-stats{
    padding:0 22px 22px;
  }
}

@media (prefers-reduced-motion: reduce){
  .hero-video-card,
  .hero-play-button,
  .hero-floating-card{
    transition:none;
  }
}