:root {
    --bg: #0d1117;
    --card: #161b22;
    --primary: #58a6ff;
    --accent: #238636;
    --border: #30363d;
}

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

/* Navigation */
nav { 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    padding: 15px 10%; 
    background: var(--card); 
    border-bottom: 1px solid var(--border); 
    position: sticky; 
    top:0; 
    z-index:1000; 
}
.logo-container { display: flex; align-items: center; gap: 10px; }
.school-logo { height: 40px; width: 40px; border-radius: 50%; object-fit: cover; }
.logo-text { font-size: 20px; font-weight: 800; color: var(--primary); }
.logo-text span { color: #fff; }

.links { display: flex; align-items: center; gap: 20px; }
.links a { color: #8b949e; text-decoration: none; font-size: 14px; transition: 0.3s; }
.links a:hover { color: var(--primary); }
.contact-btn { border: 1px solid var(--primary); padding: 8px 15px; border-radius: 6px; color: var(--primary) !important; }

/* Hero Section */
.hero { text-align: center; padding: 100px 10%; }
.hero-badge { background: rgba(88, 166, 255, 0.1); color: var(--primary); padding: 5px 15px; border-radius: 20px; display: inline-block; margin-bottom: 20px; font-weight: bold; font-size: 13px; }
.hero h1 { font-size: 3.5rem; letter-spacing: -1px; margin-bottom: 15px; line-height: 1.2; }
.hero p { color: #8b949e; font-size: 1.2rem; max-width: 700px; margin: 0 auto 40px; }
.btn-main { background: var(--accent); padding: 15px 30px; border-radius: 8px; color: #fff; text-decoration: none; font-weight: bold; box-shadow: 0 4px 15px rgba(35, 134, 54, 0.3); display: inline-block; }
.btn-sub { border: 1px solid var(--border); padding: 15px 30px; border-radius: 8px; color: #fff; text-decoration: none; margin-left: 10px; display: inline-block; }

/* Trust Bar */
.trust-bar { display: flex; justify-content: space-around; padding: 30px 10%; background: var(--card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); color: #8b949e; flex-wrap: wrap; gap: 20px; }
.trust-item i { color: var(--accent); margin-right: 8px; }

/* Feature Grid */
.feature-grid-section { padding: 80px 10%; }
.section-title { font-size: 2.2rem; text-align: center; margin-bottom: 50px; font-weight: bold; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.f-card { background: var(--card); padding: 40px; border-radius: 12px; border: 1px solid var(--border); text-align: center; }
.f-card i { font-size: 2.5rem; color: var(--primary); margin-bottom: 20px; }

/* Comparison Table */
.comp-section { padding: 80px 10%; }
.table-container { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: 12px; border: 1px solid var(--border); min-width: 500px; }
th, td { padding: 20px; text-align: center; border: 1px solid var(--border); }
.mirage-col { background: rgba(88, 166, 255, 0.05); color: var(--primary); font-weight: bold; }

/* Pricing */
.pricing-section { padding: 80px 10%; }
.pricing-grid { display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; }
.p-card { background: var(--card); padding: 40px; border-radius: 15px; border: 1px solid var(--border); width: 320px; text-align: center; position: relative; }
.price { font-size: 2.5rem; font-weight: bold; margin: 20px 0; }
.price span { font-size: 1rem; color: #8b949e; }
.p-card ul { list-style: none; text-align: left; margin-bottom: 30px; }
.p-card ul li { margin-bottom: 10px; color: #c9d1d9; }
.p-card ul li::before { content: "✓"; color: var(--accent); margin-right: 10px; }
.premium { border-color: var(--primary); transform: scale(1.05); }
.premium .badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: var(--primary); color: #000; padding: 5px 15px; border-radius: 20px; font-size: 12px; font-weight: bold; }

/* Contact Section */
.contact-section { padding: 80px 10%; background: #0d1117; }
.contact-card { background: var(--card); padding: 50px; border-radius: 20px; border: 1px solid var(--border); text-align: center; max-width: 800px; margin: 0 auto; }
.btn-telegram { background: #0088cc; color: white; padding: 15px 40px; text-decoration: none; border-radius: 50px; font-weight: bold; display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; transition: 0.3s; }
.btn-telegram:hover { transform: scale(1.05); }

/* --- MOBILE RESPONSIVE FIX --- */
@media (max-width: 768px) {
    nav {
        flex-direction: column; 
        padding: 20px 5%;
        text-align: center;
    }
    .links {
        margin-top: 15px;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }
    .links a {
        margin-left: 0;
        font-size: 13px;
    }
    .hero { padding: 60px 5%; }
    .hero h1 { font-size: 2.4rem; }
    .hero p { font-size: 1rem; }
    .btn-sub { margin-left: 0; margin-top: 10px; width: 100%; }
    .btn-main { width: 100%; }
    .trust-bar { padding: 20px 5%; }
    .section-title { font-size: 1.8rem; }
}