/* ===== HOME VIP PRO ===== */

/* Hero */
.home-hero{position:relative;min-height:85vh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;padding:140px 24px 80px}
.home-hero-bg{position:absolute;inset:0;background:linear-gradient(135deg,#0f172a 0%,#064e3b 40%,#059669 70%,#10b981 100%)}
.home-hero-bg::before{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M20 20.5V18H0v-2h20v-2H0v-2h20v-2H0V8h20V6H0V4h20V2H0V0h22v20h2V0h2v20h2V0h2v20h2V0h2v20h2V0h2v20h2V0h2v20.5z'/%3E%3C/g%3E%3C/svg%3E")}
.home-hero-inner{position:relative;z-index:1;max-width:800px;margin:0 auto}
.home-hero-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 18px;border-radius:50px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.85);font-size:13px;font-weight:600;margin-bottom:24px;backdrop-filter:blur(8px)}
.home-hero h1{font-size:clamp(32px,5.5vw,56px);font-weight:800;color:#fff;margin:0 0 20px;line-height:1.15;letter-spacing:-1px}
.home-hero h1 .hl{background:linear-gradient(90deg,#34d399,#6ee7b7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.home-hero p{font-size:clamp(15px,2vw,18px);color:rgba(255,255,255,.75);max-width:600px;margin:0 auto 32px;line-height:1.7}
.home-hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:48px}
.home-hero-cta .btn-lg{padding:16px 36px;font-size:16px;border-radius:14px}
.btn-primary{background:#059669;color:#fff;border:none;padding:12px 28px;border-radius:10px;font-weight:700;font-size:14px;cursor:pointer;text-decoration:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px}
.btn-primary:hover{background:#047857;transform:translateY(-2px);box-shadow:0 8px 24px rgba(5,150,105,.3)}
.btn-outline{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.3);padding:12px 28px;border-radius:10px;font-weight:700;font-size:14px;cursor:pointer;text-decoration:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px}
.btn-outline:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5)}
.btn-white{background:#fff;color:#059669;border:none;padding:14px 32px;border-radius:10px;font-weight:700;font-size:15px;text-decoration:none;transition:all .2s;display:inline-flex}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.15)}
.btn-outline-white{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.4);padding:14px 32px;border-radius:10px;font-weight:700;font-size:15px;text-decoration:none;transition:all .2s;display:inline-flex}
.btn-outline-white:hover{background:rgba(255,255,255,.1)}

.home-hero-stats{display:flex;justify-content:center;gap:48px;flex-wrap:wrap}
.stat-item{text-align:center}
.stat-num{display:block;font-size:clamp(24px,3.5vw,36px);font-weight:800;color:#34d399}
.stat-label{display:block;font-size:13px;color:rgba(255,255,255,.6);margin-top:4px;text-transform:uppercase;letter-spacing:1px;font-weight:600}

/* Section common */
.container{max-width:1140px;margin:0 auto;padding:0 24px}
.section-header{text-align:center;margin-bottom:40px}
.section-header h2{font-size:clamp(24px,3.5vw,36px);font-weight:800;color:#0f172a;margin:0 0 8px}
.section-header p{font-size:16px;color:#64748b;margin:0}
.section-footer{text-align:center;margin-top:36px}

/* Course tabs */
.home-courses{padding:80px 0;background:#f8fafc}
.course-tabs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:32px}
.course-tab{display:flex;align-items:center;gap:6px;padding:10px 20px;border-radius:50px;background:#fff;border:1px solid #e2e8f0;font-size:13px;font-weight:600;color:#475569;text-decoration:none;transition:all .2s}
.course-tab:hover{border-color:var(--tab-color);color:var(--tab-color);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.06)}
.tab-icon{font-size:16px}

/* Course cards */
.course-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}
.home-course-card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;overflow:hidden;text-decoration:none;transition:all .3s;display:flex;flex-direction:column}
.home-course-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.08)}
.hcc-thumb{height:180px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.hcc-thumb img{width:100%;height:100%;object-fit:cover}
.hcc-emoji{font-size:48px}
.hcc-badge{position:absolute;top:12px;left:12px;padding:4px 12px;border-radius:6px;color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;backdrop-filter:blur(4px)}
.hcc-body{padding:16px 20px;flex:1;display:flex;flex-direction:column}
.hcc-body h3{font-size:15px;font-weight:700;margin:0 0 8px;color:#0f172a;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hcc-price{font-size:16px;font-weight:800;color:#059669;margin-top:auto}
.hcc-contact{color:#94a3b8;font-weight:600;font-size:14px}

/* Why CiCC */
.home-why{padding:80px 0;background:#fff}
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.why-card{text-align:center;padding:32px 24px;border-radius:16px;border:1px solid #f1f5f9;transition:all .3s}
.why-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.06);border-color:#e2e8f0}
.why-icon{font-size:40px;margin-bottom:16px}
.why-card h3{font-size:16px;font-weight:700;margin:0 0 8px;color:#0f172a}
.why-card p{font-size:14px;color:#64748b;line-height:1.6;margin:0}

/* Certification path */
.home-path{padding:80px 0;background:linear-gradient(135deg,#f0fdf4,#ecfdf5)}
.path-timeline{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin:0 auto}
.path-step{text-align:center;background:#fff;border-radius:16px;padding:28px 24px;width:180px;border:1px solid #e2e8f0;transition:all .3s}
.path-step:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.06)}
.path-belt{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;margin:0 auto 12px}
.path-step h3{font-size:15px;font-weight:700;margin:0 0 6px;color:#0f172a}
.path-step p{font-size:13px;color:#64748b;margin:0 0 8px;line-height:1.5}
.path-duration{font-size:12px;font-weight:600;color:#059669;background:#f0fdf4;padding:3px 10px;border-radius:4px}
.path-arrow{font-size:24px;color:#94a3b8;font-weight:300}

/* Trust */
.home-trust{padding:80px 0;background:#fff}
.trust-logos{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.trust-item{padding:14px 28px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;font-weight:700;font-size:15px;color:#64748b;transition:all .2s}
.trust-item:hover{color:#059669;border-color:#059669;background:#f0fdf4}
.home-testimonial{max-width:700px;margin:0 auto;text-align:center;padding:32px;background:#f8fafc;border-radius:16px;border:1px solid #e2e8f0}
.home-testimonial blockquote{font-size:16px;color:#334155;line-height:1.7;font-style:italic;margin:0 0 12px}
.home-testimonial cite{font-size:14px;color:#94a3b8;font-style:normal}

/* CTA */
.home-cta{padding:80px 0;background:linear-gradient(135deg,#0f172a,#064e3b,#059669)}
.cta-box{text-align:center;max-width:600px;margin:0 auto}
.cta-box h2{font-size:clamp(22px,3vw,30px);font-weight:800;color:#fff;margin:0 0 12px}
.cta-box p{font-size:16px;color:rgba(255,255,255,.7);margin:0 0 28px}
.cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* Mobile */
@media(max-width:768px){
  .home-hero{min-height:70vh;padding:120px 20px 60px}
  .home-hero-stats{gap:24px}
  .stat-item{min-width:70px}
  .course-grid{grid-template-columns:1fr}
  .path-timeline{flex-direction:column}
  .path-arrow{transform:rotate(90deg)}
  .path-step{width:100%;max-width:280px}
  .why-grid{grid-template-columns:1fr 1fr}
  .trust-logos{gap:12px}
  .trust-item{padding:10px 16px;font-size:13px}
}
@media(max-width:480px){
  .why-grid{grid-template-columns:1fr}
  .home-hero-cta{flex-direction:column;align-items:center}
}