:root {
    --bg: #050816;
    --card: #0f172a;
    --text: #ffffff;
    --muted: #94a3b8;
    --border: rgba(255,255,255,.08);
    --blue: #3b82f6;
    --pink: #ec4899;
    --violet: #8b5cf6;
    --gradient: linear-gradient(135deg, #2563eb, #8b5cf6, #ec4899);
    --shadow: 0 20px 60px rgba(0,0,0,.45);
    --radius: 24px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Poppins',sans-serif; background:var(--bg); color:var(--text); overflow-x:hidden; }


::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-thumb { background:linear-gradient(#3b82f6,#8b5cf6,#ec4899); border-radius:20px; }


body::before {
    content:""; position:fixed; width:700px; height:700px;
    background:radial-gradient(circle,#8b5cf633 0%,transparent 70%);
    top:-200px; right:-100px; z-index:-1; filter:blur(40px); pointer-events: none;
}
body::after {
    content:""; position:fixed; width:600px; height:600px;
    background:radial-gradient(circle,#ec489933 0%,transparent 70%);
    bottom:-200px; left:-100px; z-index:-1; filter:blur(40px); pointer-events: none;
}


.container { max-width:1320px; margin:0 auto; padding:0 24px; }


.text-center { text-align: center !important; }
.section-title.text-center, .section-sub.text-center {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block;
}


header { 
    position:fixed; width:100%; top:0; left:0; z-index:999; padding:18px 0; transition:.4s; 
    background: #ffffff; /* Solid white background */
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
header.scrolled { 
    background: rgba(255,255,255,0.95); /* Slightly translucent white when scrolled */
    backdrop-filter: blur(16px); 
    padding: 14px 0; 
    box-shadow: 0 4px 30px rgba(0,0,0,0.05); 
    border-bottom: none;
}
.navbar { display:flex; justify-content:space-between; align-items:center; }


.logo-container {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.3s;
}
.logo-container:hover { opacity: 0.8; }
.logo-container img {
    height: 70px; 
    object-fit: contain;
    display: block;
}
.logo-fallback-text { font-size: 24px; font-weight: 800; color: #0f172a; margin: 0; line-height: 1; }
.logo-fallback-text span { color: var(--blue); }


.nav-links { display:flex; gap:40px; align-items:center; }
.nav-links a { color:#0f172a; text-decoration:none; font-weight:600; transition:.3s; position:relative; }
.nav-links a:hover { color:var(--blue); }
.cta-btn {
    padding:14px 28px; background:var(--gradient); border:none; border-radius:999px;
    color:#fff; font-weight:700; cursor:pointer; font-size:15px;
    box-shadow:0 10px 25px rgba(139,92,246,.25); transition:.4s;
}
.cta-btn:hover { transform:translateY(-3px) scale(1.02); box-shadow:0 15px 35px rgba(236,72,153,.35); }


.menu-toggle { display:none; font-size:28px; cursor:pointer; color:#0f172a; }


.hero { padding:180px 0 120px; position:relative; overflow:hidden; }
#particles-js { position:absolute; width:100%; height:100%; top:0; left:0; z-index:1; }
.grid-bg {
    position:absolute; inset:0; z-index: 0;
    background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size:60px 60px; mask-image:linear-gradient(to bottom,black,transparent);
}
.hero-wrapper { display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:60px; position:relative; z-index:2; }
.hero-badge {
    display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:999px;
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.06); backdrop-filter:blur(10px);
    font-size:14px; margin-bottom:30px;
}
.hero-badge i { color:#8b5cf6; }
.hero h1 { font-size:68px; line-height:1.1; font-weight:600; margin-bottom:28px; letter-spacing:-1px; }
.hero h1 span { background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.hero p { font-size:19px; line-height:1.5; color:var(--muted); max-width:700px; margin-bottom:36px; }
.hero-actions { display:flex; gap:20px; flex-wrap:wrap; margin-bottom:45px; }
.btn-secondary {
    padding:16px 28px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
    color:#fff; font-weight:600; cursor:pointer; transition:.4s; text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
}
.btn-secondary:hover { background:rgba(255,255,255,.1); }
.stats { display:flex; gap:28px; flex-wrap:wrap; }
.stat-box { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); backdrop-filter:blur(12px); padding:22px; border-radius:20px; min-width:170px; }
.stat-box h3 { font-size:34px; margin-bottom:8px; }
.stat-box p { font-size:14px; margin:0; color:var(--muted); }


.hero-visual { position:relative; height:650px; z-index:2; }
.main-card {
    position:absolute; right:0; top:20px; width:420px; background:rgba(255,255,255,.06);
    backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,.08); border-radius:32px; overflow:hidden;
    box-shadow:var(--shadow); animation:float 6s ease-in-out infinite;
}
.main-card img { width:100%; height:280px; object-fit:cover; }
.main-card-content { padding:28px; }
.main-card-content h3 { font-size:26px; margin-bottom:12px; }
.main-card-content p { font-size:14px; line-height:1.8; color:var(--muted); margin:0; }
.floating-card {
    position:absolute; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(16px); border-radius:24px; padding:22px; box-shadow:var(--shadow);
}
.fc1 { left:0; top:120px; width:240px; animation:float 5s ease-in-out infinite; }
.fc2 { bottom:30px; right:60px; width:260px; animation:float 7s ease-in-out infinite; }
.fc3 { top:0; right:60px; padding:16px 24px; border-radius:999px; }
.fc-title { font-size:30px; font-weight:800; margin-bottom:8px; }
.fc-text { font-size:14px; color:var(--muted); }
@keyframes float { 0% {transform:translateY(0px);} 50% {transform:translateY(-18px);} 100% {transform:translateY(0px);} }


.trust-strip {
    padding:30px 0; border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06);
    background:rgba(255,255,255,.02); backdrop-filter:blur(12px); overflow: hidden; position: relative; z-index: 2;
}
.trust-row { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; align-items:center; }
.trust-item img {
    height: 80px; object-fit: contain;
}



.section { padding:100px 0; position:relative; }
.section-title { font-size:52px; line-height:1.1; margin-bottom:24px; font-weight:600; max-width:900px; }
.section-title span { background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.section-sub { max-width:900px; color:var(--muted); font-size:19px; line-height:1.5; margin-bottom:60px; }


.bento { display:grid; grid-template-columns:repeat(12,1fr); gap:24px; }
.bento-card {
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); border-radius:32px; padding:40px;
    backdrop-filter:blur(12px); transition:.4s; overflow:hidden; position:relative;
}
.bento-card:hover { transform:translateY(-10px); border-color:rgba(139,92,246,.35); }
.large { grid-column:span 7; } .medium { grid-column:span 5; } .full { grid-column:span 12; }
.bento-card h3 { font-size:32px; margin-bottom:20px; position:relative; z-index:2; }
.bento-card p { font-size:16px; line-height:1.9; color:var(--muted); position:relative; z-index:2; }
.list-style { list-style:none; margin-top:15px; }
.list-style li { position:relative; padding-left:25px; margin-bottom:12px; font-size:15px; color:var(--muted); }
.list-style li i { position:absolute; left:0; top:4px; color:var(--blue); font-size:14px; }


.software-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:24px; }
.software-card {
    padding:32px; border-radius:28px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06);
    text-align:center; transition:.4s;
}
.software-card:hover { transform:translateY(-8px); background:linear-gradient(135deg,#1e293b,#0f172a); border-color:#8b5cf6; }
.software-card i { font-size:48px; margin-bottom:24px; background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.software-card h4 { font-size:20px; margin-bottom:12px; }
.software-card p { font-size:14px; color:var(--muted); }


.syllabus-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:24px; }
.module-card {
    background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); padding:30px; border-radius:24px;
    transition:.4s; position:relative; overflow:hidden;
}
.module-card:hover { border-color:rgba(236,72,153,.35); background:rgba(255,255,255,.05); }
.module-card h4 { font-size:22px; margin-bottom:15px; color:#fff; border-bottom:1px solid rgba(255,255,255,.08); padding-bottom:10px; }
.module-card ul { list-style:none; }
.module-card ul li { font-size:14px; color:var(--muted); margin-bottom:10px; padding-left:20px; position:relative; }
.module-card ul li::before { content:'✓'; position:absolute; left:0; color:var(--pink); font-weight:bold; }


.two-col { display:grid; grid-template-columns:1fr 420px; gap:60px; align-items:start; }
.sticky-form { position:sticky; top:120px; z-index:10; }
.form-box { padding:40px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); backdrop-filter:blur(20px); border-radius:32px; box-shadow:var(--shadow); }
.form-box h3 { font-size:38px; margin-bottom:10px; }
.form-box p { color:var(--muted); margin-bottom:30px; font-size:15px; }
.input-group { margin-bottom:18px; }
.input-group input, .input-group select {
    width:100%; padding:16px 20px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
    border-radius:16px; color:#fff; font-family:'Poppins'; font-size:15px; outline:none; transition:.3s;
}
.input-group input:focus, .input-group select:focus { border-color:#8b5cf6; box-shadow:0 0 0 4px rgba(139,92,246,.15); }
.input-group select option { background:#0f172a; color: #fff; }
.submit-btn { width:100%; padding:18px; background:var(--gradient); border:none; border-radius:16px; font-size:17px; font-weight:700; color:#fff; cursor:pointer; margin-top:10px; transition:.4s; }
.submit-btn:hover { transform:translateY(-3px); box-shadow:0 15px 35px rgba(236,72,153,.35); }
.tags { margin-top:26px; display:flex; gap:10px; flex-wrap:wrap; }
.tags span { padding:10px 14px; border-radius:999px; background:rgba(255,255,255,.06); font-size:12px; color:#cbd5e1; }


.review-slider-wrapper {
    grid-column: span 12; position: relative; width: 100%; height: 250px; background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06); border-radius: 32px; overflow: hidden; margin-top: 24px;
}
.review-slide {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 40px; display: flex;
    flex-direction: column; justify-content: center; transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.8s;
}
.review-slide p { font-size: 16px; line-height: 1.9; color: #cbd5e1; margin-bottom: 24px; font-style: italic; position: relative; z-index: 2; }
.review-slide::after { content: '\f10d'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; top: 20px; right: 30px; font-size: 60px; color: rgba(255,255,255,0.05); z-index: 1; }
.review-slide.waiting { transform: translateX(100%); opacity: 0; }
.review-slide.active { transform: translateX(0); opacity: 1; }
.review-slide.leaving { transform: translateX(-100%); opacity: 0; }
.review-slide a
{
    text-decoration: none;
}
.user { display: flex; align-items: center; gap: 16px; position: relative; z-index: 2; }
.user img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(139,92,246, 0.5); }
.user h4 { font-size: 16px; color: #fff; }
.user span { font-size: 13px; color: var(--muted); }


.related-courses-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; }
.course-card { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 24px; overflow: hidden; transition: 0.4s; position: relative; display: flex; flex-direction: column; }
.course-card:hover { transform: translateY(-8px); border-color: rgba(236, 72, 153, 0.35); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5); }
.course-img { position: relative; height: 270px; width: 100%; }
.course-img img { width: 100%; height: 100%; object-fit: cover; }
.course-badge { position: absolute; top: 16px; right: 16px; padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #fff; backdrop-filter: blur(10px); box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.badge-popular { background: linear-gradient(135deg, #ec4899, #f43f5e); }
.badge-trending { background: linear-gradient(135deg, #8b5cf6, #3b82f6); }
.badge-demand { background: linear-gradient(135deg, #10b981, #059669); }
.course-content { padding: 26px; display: flex; flex-direction: column; flex-grow: 1; }
.course-content h4 { font-size: 22px; margin-bottom: 16px; color: #fff; line-height: 1.4; }
.course-meta { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; flex-grow: 1; }
.course-meta span { font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.course-meta i { color: var(--blue); width: 16px; }
.course-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.btn-card-primary { background: var(--gradient); border: none; padding: 12px; border-radius: 12px; color: #fff; font-weight: 600; font-size: 14px; cursor: pointer; transition: 0.3s; text-align: center; text-decoration: none; }
.btn-card-primary:hover { box-shadow: 0 10px 20px rgba(236, 72, 153, 0.3); }
.btn-card-secondary { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); padding: 12px; border-radius: 12px; color: #fff; font-weight: 600; font-size: 14px; cursor: pointer; transition: 0.3s; text-align: center; text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn-card-secondary:hover { background: rgba(255, 255, 255, 0.1); }


.faq-container { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.faq-item { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 16px; overflow: hidden; transition: 0.3s; }
.faq-item:hover { border-color: rgba(139, 92, 246, 0.3); background: rgba(255, 255, 255, 0.05); }
.faq-question { padding: 24px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-size: 17px; font-weight: 600; color: #fff; user-select: none; }
.faq-question i { color: var(--blue); transition: transform 0.4s ease; }
.faq-answer-content { padding: 0 24px 24px 24px; color: var(--muted); font-size: 15px; line-height: 1.8; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.faq-item.active .faq-question i { transform: rotate(180deg); color: var(--pink); }


.floating-buttons { position: fixed; bottom: 30px; right: 30px; display: flex; flex-direction: column; gap: 15px; z-index: 999; }
.float-btn {
    width: 55px; height: 55px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 24px; color: #fff; text-decoration: none; box-shadow: 0 10px 25px rgba(0,0,0,0.5); transition: 0.3s;
    border: 1px solid rgba(255,255,255,0.1);
}
.float-btn:hover { transform: translateY(-5px); }
.float-call { background: linear-gradient(135deg, #3b82f6, #8b5cf6); }
.float-wa { background: linear-gradient(135deg, #10b981, #059669); }


.lead-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(5, 8, 22, 0.85); backdrop-filter: blur(12px);
    z-index: 2000; display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: 0.4s ease-in-out; padding: 20px;
}
.lead-modal-overlay.active { opacity: 1; visibility: visible; }
.lead-modal-box {
    background: #0f172a; border-radius: 24px; width: 100%; max-width: 850px;
    position: relative; transform: scale(0.95) translateY(20px); transition: 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 30px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.08); display: flex; overflow: hidden;
}
.lead-modal-overlay.active .lead-modal-box { transform: scale(1) translateY(0); }
.modal-visual {
    flex: 1; position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 40px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.2), rgba(236, 72, 153, 0.2)), url('https://images.unsplash.com/photo-1503387762-592deb58ef4e?q=80&w=600&auto=format&fit=crop') center/cover;
}
.modal-visual::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, #0f172a 5%, transparent 80%); }
.modal-visual-text { position: relative; z-index: 2; }
.modal-visual-text h3 { font-size: 28px; font-weight: 800; margin-bottom: 10px; color: #fff; line-height: 1.2; }
.modal-visual-text p { color: #cbd5e1; font-size: 15px; }
.modal-content-wrap { flex: 1.2; padding: 45px 40px; position: relative; background: #0f172a; }
.close-modal {
    position: absolute; top: 20px; right: 20px; width: 36px; height: 36px;
    background: rgba(255,255,255,0.05); border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 16px; color: var(--muted); cursor: pointer; transition: 0.3s; border: 1px solid rgba(255,255,255,0.1); z-index: 10;
}
.close-modal:hover { background: var(--pink); color: #fff; transform: rotate(90deg); border-color: var(--pink); }
.modal-content-wrap h3 { font-size: 26px; margin-bottom: 8px; color: #fff; }
.modal-content-wrap > p { color: var(--muted); font-size: 14px; margin-bottom: 24px; }
.modal-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px; }
.modal-content-wrap .input-group { margin-bottom: 0; }
.modal-content-wrap .input-group input, .modal-content-wrap .input-group select {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px; padding: 14px 16px; font-size: 14px;
}
.modal-content-wrap .input-group input:focus, .modal-content-wrap .input-group select:focus { background: rgba(255,255,255,0.06); border-color: var(--blue); }
.full-width { grid-column: span 2; }
.modal-submit { border-radius: 12px; padding: 16px; font-size: 16px; margin-top: 5px; }


footer { padding:100px 0 40px; border-top:1px solid rgba(255,255,255,.06); background:#040611; }
.footer-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:50px; margin-bottom:60px; }
.footer-col h4 { font-size:22px; margin-bottom:24px; }
.footer-col p, .footer-col a { color:#94a3b8; text-decoration:none; line-height:2; transition:.3s; font-size: 15px; }
.footer-col a:hover { color:#fff; }
.footer-bottom { padding-top:30px; border-top:1px solid rgba(255,255,255,.06); text-align:center; color:#64748b; font-size: 14px; display: flex; flex-direction: column; gap: 10px;}


@media(max-width:1100px) {
    .hero-wrapper, .two-col { grid-template-columns:1fr; }
    .hero-visual { height:auto; }
    .main-card { position:relative; width:100%; }
    .fc1,.fc2,.fc3 { display:none; }
    .sticky-form { position:relative; top:0; }
    .large, .medium { grid-column:span 12; }
}
@media(max-width:768px) {
    .hero h1 { font-size:48px; }
    .section-title { font-size:38px; }
    .nav-links { position:fixed; top:80px; left:-100%; width:100%; height:calc(100vh - 80px); background:#050816; flex-direction:column; padding-top:60px; transition:.4s; }
    .nav-links a { color:#fff; }
    .nav-links.active { left:0; }
    .menu-toggle { display:block; }
    .hero { padding-top:140px; }
    .review-slider-wrapper { height: 300px; }
    .floating-buttons { bottom: 20px; right: 20px; }
    .lead-modal-box { flex-direction: column; max-width: 400px; }
    .modal-visual { display: none; }
    .modal-content-wrap { padding: 40px 25px; }
    .modal-form-grid { grid-template-columns: 1fr; }
    .full-width { grid-column: span 1; }
    .section { padding: 50px 0 !important; }
    .course-img { height: 360px; }
}