*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{

  font-family:
	Inter,
	system-ui,
	sans-serif;

  background:
	radial-gradient(
	  circle at top left,
	  rgba(49,46,129,.65) 0%,
	  transparent 35%
	),

	radial-gradient(
	  circle at bottom right,
	  rgba(14,116,144,.32) 0%,
	  transparent 35%
	),

	#020617;

  color:white;

  overflow-x:hidden;

}

a{
  text-decoration:none;
  color:inherit;
}

img{
  max-width:100%;
  display:block;
}

.hero-condition{

  width:min(1200px,92%);

  margin:auto;

  padding:
	90px 20px 70px;

  display:grid;

  grid-template-columns:
	repeat(
	  auto-fit,
	  minmax(320px,1fr)
	);

  gap:60px;

  align-items:center;

}

.hero-content span{

  display:inline-flex;

  padding:10px 18px;

  border-radius:999px;

  background:
	rgba(59,130,246,.10);

  border:
	1px solid rgba(96,165,250,.25);

  color:#93c5fd;

  font-weight:700;

  margin-bottom:24px;

}

.hero-content h1{

  font-size:
	clamp(44px,6vw,82px);

  line-height:.96;

  font-weight:900;

  letter-spacing:-3px;

  margin-bottom:24px;

}

.hero-content p{

  color:#cbd5e1;

  font-size:19px;

  line-height:1.9;

  margin-bottom:30px;

}

.hero-btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  padding:16px 28px;

  border-radius:18px;

  font-weight:900;

  background:
	linear-gradient(
	  135deg,
	  #7c3aed,
	  #4f46e5
	);

  box-shadow:
	0 0 35px rgba(99,102,241,.30);

  transition:.3s ease;

}

.hero-btn:hover{

  transform:translateY(-3px);

  filter:brightness(1.06);

}

.hero-image{

  position:relative;

  border-radius:36px;

  overflow:hidden;

  min-height:520px;

  border:
	1px solid rgba(255,255,255,.08);

  box-shadow:
	0 20px 70px rgba(0,0,0,.45);

}

.hero-image img{

  width:100%;
  height:100%;

  object-fit:cover;

}

.section{

  width:min(1100px,92%);

  margin:0 auto 90px;

}

.section h2{

  font-size:
	clamp(34px,4vw,56px);

  line-height:1.08;

  margin-bottom:24px;

  letter-spacing:-2px;

}

.section p{

  color:#cbd5e1;

  font-size:18px;

  line-height:1.95;

  margin-bottom:22px;

}

.section ul{

  padding-left:24px;

  color:#cbd5e1;

}

.section li{

  margin-bottom:16px;

  line-height:1.8;

}

.video-wrapper{

  position:relative;

  width:100%;

  padding-bottom:56.25%;

  border-radius:30px;

  overflow:hidden;

  border:
	1px solid rgba(255,255,255,.08);

  box-shadow:
	0 20px 60px rgba(0,0,0,.35);

}

.video-wrapper iframe{

  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  border:none;

}

.faq{

  display:grid;

  gap:24px;

}

.faq-item{

  padding:28px;

  border-radius:26px;

  background:
	rgba(15,23,42,.75);

  border:
	1px solid rgba(255,255,255,.08);

}

.faq-item h3{

  font-size:24px;

  margin-bottom:14px;

}

.faq-item p{

  margin:0;

}

.cta{

  width:min(1100px,92%);

  margin:90px auto 70px;

  padding:60px;

  border-radius:38px;

  background:
	linear-gradient(
	  135deg,
	  rgba(124,58,237,.24),
	  rgba(59,130,246,.12)
	);

  border:
	1px solid rgba(255,255,255,.08);

  backdrop-filter:blur(20px);

  text-align:center;

}

.cta h2{

  font-size:
	clamp(38px,5vw,60px);

  margin-bottom:20px;

}

.cta p{

  color:#cbd5e1;

  font-size:18px;

  line-height:1.8;

  margin-bottom:30px;

}

.cta-btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  padding:18px 34px;

  border-radius:18px;

  font-weight:900;

  background:
	linear-gradient(
	  135deg,
	  #7c3aed,
	  #4f46e5
	);

}

footer{

  text-align:center;

  padding:40px 20px 60px;

  color:#64748b;

  font-size:14px;

}

@media(max-width:768px){

  .hero-condition{

	padding:
	  50px 10px 50px;

  }

  .hero-content h1{

	font-size:56px;

  }

  .hero-content p{

	font-size:17px;

  }

  .section p{

	font-size:16px;

  }

  .cta{

	padding:40px 22px;

  }

}




.mv-video-gallery{

  width:min(1400px,100%);
  margin:0 auto;

  display:grid;
  grid-template-columns:minmax(0,1.7fr) 280px;

  gap:28px;

  align-items:stretch;
  margin-bottom:120px;


}

/* PLAYER */

.mv-player-shell{

  position:relative;

  overflow:hidden;

  border-radius:32px;

  background:
    radial-gradient(circle at top right,#2563eb55,transparent 40%),
    linear-gradient(180deg,#020617,#020817);

  border:1px solid rgba(255,255,255,.06);

  box-shadow:
    0 20px 80px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 0 60px rgba(37,99,235,.15);

  padding:16px;

  display:flex;
  flex-direction:column;

}

.mv-player-backdrop{

  position:absolute;
  inset:0;

  background-size:cover;
  background-position:center;

  filter:blur(60px);

  opacity:.35;

  transform:scale(1.2);

}

.mv-player-wrapper{

  position:relative;

  aspect-ratio:16/9;

  border-radius:32px;

  overflow:hidden;

  z-index:2;
  
  flex-shrink:0;

}

.mv-player-wrapper iframe{

  width:100%;
  height:100%;

  border:none;

  display:block;

}

/* INFO */

.mv-player-meta{

  position:relative;

  z-index:2;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;

  padding:22px 10px 8px;

}

.mv-player-copy h3{

  color:#fff;

  font-size:clamp(1.2rem,2vw,1.6rem);

  font-weight:700;

  margin:0 0 6px;

}

.mv-player-copy p{

  color:rgba(255,255,255,.65);

  margin:0;

  line-height:1.5;

}

.mv-badge{

  display:inline-flex;
  align-items:center;
  gap:8px;

  padding:10px 16px;

  border-radius:999px;

  background:rgba(37,99,235,.15);

  border:1px solid rgba(96,165,250,.25);

  color:#93c5fd;

  font-size:.85rem;

  font-weight:600;

  backdrop-filter:blur(10px);

}

/* FEED */

.mv-feed{

  max-height:570px;

  overflow-y:auto;
  overflow-x:hidden;

  display:flex;
  flex-direction:column;

  gap:18px;

  scrollbar-width:thin;

}

.mv-feed::-webkit-scrollbar{

  width:8px;

}

.mv-feed::-webkit-scrollbar-thumb{

  background:rgba(255,255,255,.15);

  border-radius:999px;

}

.mv-feed::-webkit-scrollbar{

  height:8px;

}

.mv-feed::-webkit-scrollbar-thumb{

  background:rgba(255,255,255,.15);

  border-radius:999px;

}

/* CARD */

.mv-video-card{

  position:relative;

  flex:0 0 270px;

  overflow:hidden;

  border:none;

  border-radius:24px;

  background:
    linear-gradient(180deg,#071226,#020617);

  cursor:pointer;

  text-align:left;

  padding:0;

  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;

  border:1px solid rgba(255,255,255,.05);

  scroll-snap-align:start;

}

.mv-video-card:hover{

  transform:translateY(-6px) scale(1.02);

  box-shadow:
    0 20px 40px rgba(0,0,0,.35),
    0 0 40px rgba(37,99,235,.18);

}

.mv-video-card.active{

  border-color:rgba(96,165,250,.55);

  box-shadow:
    0 0 0 1px rgba(96,165,250,.2),
    0 0 40px rgba(37,99,235,.22);

}

.mv-video-thumb{

  position:relative;

  aspect-ratio:16/9;

  overflow:hidden;

}

.mv-video-thumb img{

  width:100%;
  height:100%;

  object-fit:cover;

  transition:transform .4s ease;

}

.mv-video-card:hover img{

  transform:scale(1.06);

}

.mv-video-overlay{

  position:absolute;
  inset:0;

  background:
    linear-gradient(180deg,transparent,rgba(0,0,0,.65));

}

.mv-play-button{

  position:absolute;

  top:50%;
  left:50%;

  transform:translate(-50%,-50%);

  width:68px;
  height:68px;

  border-radius:999px;

  background:rgba(255,255,255,.12);

  border:1px solid rgba(255,255,255,.15);

  display:grid;
  place-items:center;

  backdrop-filter:blur(10px);

}

.mv-play-button::before{

  content:"";

  border-left:18px solid white;
  border-top:12px solid transparent;
  border-bottom:12px solid transparent;

  margin-left:5px;

}

.mv-video-info{

  padding:18px;

}

.mv-video-title{

  color:white;

  font-size:1rem;

  font-weight:700;

  margin:0 0 8px;

}

.mv-video-subtitle{

  color:rgba(255,255,255,.6);

  font-size:.9rem;

  line-height:1.5;

  margin:0;

}

/* MOBILE */

@media(max-width:768px){

  .mv-player-shell{

    padding:10px;

    border-radius:24px;

  }

  .mv-video-card{

    flex:0 0 220px;

  }

  .mv-player-meta{

    flex-direction:column;
    align-items:flex-start;

  }

}
@media(max-width:980px){

  .mv-video-gallery{

    grid-template-columns:1fr;

  }

  .mv-feed{

    flex-direction:row;

    overflow-x:auto;
    overflow-y:hidden;

    max-height:none;

  }

  .mv-video-card{

    flex:0 0 240px;

  }

}

.mv-empty-state{

  width:100%;

  padding:80px 30px;

  border-radius:32px;

  background:
    radial-gradient(circle at top right,#2563eb22,transparent 40%),
    linear-gradient(180deg,#020617,#071226);

  border:1px solid rgba(255,255,255,.06);

  text-align:center;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  gap:18px;

  box-shadow:
    0 20px 60px rgba(0,0,0,.35),
    0 0 40px rgba(37,99,235,.08);

}

.mv-empty-icon{

  font-size:4rem;

  opacity:.9;

}

.mv-empty-state h3{

  color:white;

  font-size:clamp(1.5rem,2vw,2rem);

  margin:0;

  font-weight:700;

}

.mv-empty-state p{

  color:rgba(255,255,255,.65);

  max-width:600px;

  line-height:1.7;

  margin:0;

}

.mv-feed{

  scrollbar-width:thin;
  scrollbar-color:rgba(96,165,250,.35) transparent;

}

/* Chrome, Edge, Brave */

.mv-feed::-webkit-scrollbar{

  width:8px;

}

.mv-feed::-webkit-scrollbar-track{

  background:transparent;

}

.mv-feed::-webkit-scrollbar-thumb{

  background:
    linear-gradient(
      180deg,
      rgba(59,130,246,.55),
      rgba(37,99,235,.25)
    );

  border-radius:999px;

  border:1px solid rgba(255,255,255,.05);

  box-shadow:
    0 0 10px rgba(59,130,246,.18);

}

.mv-feed::-webkit-scrollbar-thumb:hover{

  background:
    linear-gradient(
      180deg,
      rgba(96,165,250,.75),
      rgba(59,130,246,.45)
    );

}

.mv-feed::-webkit-scrollbar-corner{

  background:transparent;

}

.mv-feed{

  padding-right:6px;

  mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      black 4%,
      black 96%,
      transparent 100%
    );

}