/* ===== BASE ===== */
* { margin:0; padding:0; box-sizing:border-box; font-family:'Montserrat', sans-serif; }
body { background:#0b0b13; color:#fff; line-height:1.6; overflow-x:hidden; }
a { text-decoration:none; color:inherit; }
button { cursor:pointer; }

/* ===== HEADER ===== */
header {
    display:flex; justify-content:space-between; align-items:center;
    padding:20px 60px; background:#151520; position:sticky; top:0; z-index:1000;
    box-shadow:0 2px 10px rgba(0,0,0,0.5);
}
header .logo { font-size:28px; font-weight:bold; color:#4da3ff; }
header nav a { margin-left:25px; font-weight:500; transition:0.3s; }
header nav a:hover { color:#4da3ff; }

/* ===== HERO ===== */
.hero {
    position: relative;
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    text-align:center; padding:150px 20px; overflow:hidden;
}
.hero h1 { font-size:3rem; color:#4da3ff; margin-bottom:20px; z-index:1; position:relative; }
.hero p { font-size:1.2rem; color:#aaa; max-width:600px; margin-bottom:30px; z-index:1; position:relative; }
.hero .btn {
    background:#4da3ff; padding:15px 35px; border-radius:10px; font-weight:bold; color:#fff; 
    transition:0.3s; box-shadow:0 4px 15px rgba(77,163,255,0.5); z-index:1; position:relative;
}
.hero .btn:hover { background:#3a8ee0; transform:translateY(-2px); box-shadow:0 6px 20px rgba(77,163,255,0.7); }

/* ===== PLANS ===== */
.plans { display:flex; justify-content:center; gap:30px; padding:80px 20px; flex-wrap:wrap; }
.plan { background:#1c1c28; padding:30px; border-radius:15px; width:260px; text-align:center;
       box-shadow:0 5px 15px rgba(0,0,0,0.5); transition:0.3s; }
.plan:hover { transform:translateY(-5px); box-shadow:0 10px 25px rgba(77,163,255,0.5); }
.plan h2 { color:#4da3ff; margin-bottom:15px; }
.plan p { margin-bottom:10px; color:#ccc; font-size:1rem; }
.plan .btn { display:inline-block; margin-top:10px; background:#4da3ff; padding:10px 20px; border-radius:8px; font-weight:500; transition:0.3s; }
.plan .btn:hover { background:#3a8ee0; transform:translateY(-2px); box-shadow:0 6px 15px rgba(77,163,255,0.7); }

/* ===== FEATURES ===== */
.features { display:flex; justify-content:center; gap:50px; flex-wrap:wrap; padding:80px 20px; text-align:center; }
.feature { max-width:200px; }
.feature img { width:60px; margin-bottom:15px; }
.feature h3 { color:#4da3ff; margin-bottom:10px; }
.feature p { color:#aaa; font-size:0.95rem; }

/* ===== SUPPORT FORM ===== */
.support-form { max-width:500px; margin:50px auto; background:#1c1c28; padding:30px; border-radius:15px;
               box-shadow:0 5px 15px rgba(0,0,0,0.5); }
.support-form h2 { text-align:center; color:#4da3ff; margin-bottom:20px; }
.support-form input, .support-form textarea { width:100%; padding:12px 15px; margin-bottom:15px; border-radius:8px;
                                             border:none; background:#151520; color:#fff; }
.support-form button { width:100%; padding:12px; border:none; border-radius:8px; background:#4da3ff;
                      color:#fff; font-weight:bold; transition:0.3s; }
.support-form button:hover { background:#3a8ee0; box-shadow:0 6px 15px rgba(77,163,255,0.7); }

/* ===== FOOTER ===== */
footer { background:#151520; text-align:center; padding:30px; border-top:1px solid #222; }
footer p { color:#777; font-size:0.9rem; }

/* ===== RESPONSIVE ===== */
@media(max-width:900px){ header{padding:20px 30px;} }
@media(max-width:600px){ .plans{flex-direction:column; align-items:center;} .features{flex-direction:column;} 
.hero h1{font-size:2.2rem;} .hero p{font-size:1rem;} }

/* ===== PARTICLES CANVAS ===== */
#particles-js { position:absolute; top:0; left:0; width:100%; height:100%; z-index:0; }