/**********************************************************************************************
 * 파일명: index.css
 **********************************************************************************************/

/* =========================================================
   Hero
========================================================= */
/* =========================================================
   Hero (Cyber Security & Emergency Doctor Concept)
========================================================= */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:#fff;background:radial-gradient(circle at center, #0a1633 0%, #050a1a 100%);padding:100px 20px;overflow:hidden}

/* 테크니컬 인프라 격자 배경 */
.hero-overlay-grid{position:absolute;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(rgba(0,242,254,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,242,254,0.03) 1px, transparent 1px);background-size:40px 40px;z-index:1}


/* 실시간 서버 패킷/도트 움직임 구현 */
.hero-particles span{position:absolute;display:block;width:6px;height:6px;background:rgba(0,242,254,0.4);box-shadow:0 0 10px #00f2fe;border-radius:50%;animation:packet 6s infinite linear;z-index:1}
.hero-particles span:nth-child(1){left:10%;top:20%;animation-delay:0s;background:rgba(255,75,75,0.5);box-shadow:0 0 10px #ff4b4b}
.hero-particles span:nth-child(2){left:40%;top:70%;animation-duration:8s;animation-delay:1s}
.hero-particles span:nth-child(3){left:80%;top:30%;animation-duration:5s;animation-delay:2s;background:rgba(255,75,75,0.5);box-shadow:0 0 10px #ff4b4b}
.hero-particles span:nth-child(4){left:25%;top:80%;animation-duration:7s;animation-delay:0s}
.hero-particles span:nth-child(5){left:70%;top:60%;animation-duration:9s;animation-delay:3s}

.hero-content{position:relative;z-index:2;max-width:1000px;text-shadow:0 4px 20px rgba(0,0,0,0.8)}
.hero h1{font-size:clamp(2.5rem,5vw,3.8rem);font-weight:900;margin-bottom:25px;line-height:1.3;letter-spacing:-0.03em}

/* 강렬한 임팩트를 위해 주요 키워드 하이라이트 처리를 원할 시 활용 */
.hero h1 span.alert{color:#ff4b4b;text-shadow:0 0 15px rgba(255,75,75,0.6)}

.hero p{font-size:clamp(1.1rem,2vw,1.35rem);color:#a5b4fc;margin-bottom:50px;font-weight:500;letter-spacing:-0.01em}

/* =========================================================
   Animation Keyframes
========================================================= */
@keyframes packet{
    0%{transform:translateY(0) scale(1);opacity:0}
    10%{opacity:1}
    90%{opacity:1}
    100%{transform:translateY(-100px) scale(0.5);opacity:0}
}.hero-bg{position:absolute;width:100%;height:100%;opacity:.4;object-fit:cover}
.hero-content{position:relative;z-index:2;max-width:1000px}
.hero h1{font-size:clamp(2.5rem,5vw,3.8rem);font-weight:900;margin-bottom:20px}
.hero p{font-size:clamp(1rem,2vw,1.25rem);margin-bottom:50px}

/* =========================================================
   Stats
========================================================= */
.stats{display:flex;gap:25px;justify-content:center;flex-wrap:wrap}
.stat-item{background:rgba(255,255,255,.1);padding:25px 45px;border-radius:20px;border:1px solid rgba(255,255,255,.15)}
.stat-item h3{font-size:2.8rem;color:var(--s);font-weight:900}

/* =========================================================
   Intro
========================================================= */
.intro-video{width:100%;max-width:900px;aspect-ratio:16/9;margin:0 auto;border-radius:24px;overflow:hidden}

/* =========================================================
   Reviews
========================================================= */
#reviews{background: #F4F5F8;padding:120px 0}
.review-header{text-align:center;margin-bottom:80px}
.reviews-flex-container{display:flex;gap:30px}
.review-col{flex:1;display:flex;flex-direction:column;gap:30px}
.review-card-v2{background:#fff;padding:40px;border:1px solid #eee}
.review-card-v2:hover{transform:translateY(-5px)}
.reviewer-profile{display:flex;gap:15px;margin-bottom:25px}
.avatar{width:60px;height:60px;border-radius:50%;overflow:hidden}
.avatar img{    width: 60px;
    height: 60px;}
.reviewer-info h5{font-size:1.15rem;font-weight:700}
.subs{font-size:.9rem;color:#888}
.rating{color:#ff4b4b;margin-bottom:20px}
.review-text{font-size:1.05rem;color:#444}

/* =========================================================
   Responsive
========================================================= */
@media(max-width:1024px){.review-col:last-child{display:none}}
@media(max-width:768px){.reviews-flex-container{flex-direction:column}}