:root {
            --primary: #EBEBEB;
            --accent: #3D3BFF;
            --accent-1: #3F2AFF;
            --canvas: #FFFFFF;
            --surface: #F5F5F5;
            --surface-alt: #292929;
            --on-primary: #000000;
            --body: #666666;
            --muted: #81859C;
            --hairline: #E0E0E0;
            --info: #657195;
            --neutral-1: #B8B8B8;
            --gradient-primary: linear-gradient(105deg, rgb(22, 26, 156), rgb(30, 43, 181) 40%, rgb(64, 80, 224));
            --radius-md: 8px;
            --radius-xl: 12px;
            --radius-20: 20px;
            --radius-full: 9999px;
            --shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
            --shadow-md: 0 4px 24px rgba(0,0,0,0.06);
            --shadow-hover: 0 12px 48px rgba(61,59,255,0.12);
            --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

        body {
            font-family: 'Graphik', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: var(--canvas);
            color: var(--on-primary);
            margin: 0;
            padding: 0;
            line-height: 1.5;
            -webkit-font-smoothing: antialiased;
        }

        *, *::before, *::after {
            box-sizing: border-box;
        }

        .container {
            max-width: 1140px;
            margin: 0 auto;
            padding: 0 20px;
            box-sizing: border-box;
        }

        h1, h2, h3, h4 { font-weight: 500; margin: 0 0 20px 0; color: var(--on-primary); }
        h1 { font-size: 60px; line-height: 1; letter-spacing: -0.6px; }
        h2 { font-size: 34px; line-height: 1.24; margin-bottom: 40px; }
        h3 { font-size: 22px; line-height: 1.45; margin-bottom: 16px; }
        p { font-size: 16px; color: var(--body); margin-bottom: 20px; line-height: 1.6; }

        .btn {
            display: inline-flex; align-items: center; justify-content: center;
            font-family: 'Graphik', sans-serif; text-decoration: none;
            cursor: pointer; transition: var(--transition);
            box-sizing: border-box; text-align: center;
        }
        .btn-primary {
            background-color: var(--accent); color: #fff;
            padding: 16px 32px; border-radius: var(--radius-xl);
            font-size: 18px; font-weight: 500; border: none;
        }
        .btn-primary:hover {
            background-color: var(--accent-1); box-shadow: 0 8px 24px rgba(61, 59, 255, 0.3); transform: translateY(-2px);
        }
        .btn-outline {
            background-color: transparent; color: var(--on-primary);
            padding: 10px 24px; border-radius: var(--radius-full);
            border: 1px solid var(--on-primary); font-size: 16px; font-weight: 500;
        }
        .btn-outline:hover { background-color: var(--on-primary); color: #fff; transform: translateY(-1px); }
        
        .btn-ghost {
            background-color: var(--primary); color: var(--on-primary);
            padding: 10px 24px; border-radius: var(--radius-full);
            border: none; font-size: 16px; font-weight: 500;
        }
        .btn-ghost:hover { background-color: #d8d8d8; transform: translateY(-1px); }

        section { padding: 90px 0; }
        
        .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
        .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
        .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

        header { padding: 16px 0; border-bottom: 1px solid rgba(224,224,224,0.5); background: rgba(255,255,255,0.9); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 100; }
        .header-inner { display: flex; justify-content: space-between; align-items: center; }
        .logo { font-size: 24px; font-weight: 600; color: var(--accent); text-decoration: none; letter-spacing: -0.5px; }
        .nav a { margin: 0 16px; color: var(--on-primary); text-decoration: none; font-size: 15px; font-weight: 500; transition: color 0.2s; }
        .nav a:hover { color: var(--accent); }
        .header-contacts { display: flex; align-items: center; gap: 24px; }
        .phone { font-size: 18px; font-weight: 600; text-decoration: none; color: var(--on-primary); transition: color 0.2s;}
        .phone:hover { color: var(--accent); }

        .hero { background: var(--gradient-primary); color: #fff; padding: 120px 0 100px; position: relative; overflow: hidden; }
        .hero::after { content:''; position:absolute; bottom:0; left:0; right:0; height:120px; background: linear-gradient(to top, var(--canvas), transparent); pointer-events: none; z-index: 1; }
        .hero .container { position: relative; z-index: 2; }
        .hero h1 { color: #fff; margin-bottom: 24px; }
        .hero p { color: rgba(255,255,255,0.85); font-size: 18px; margin-bottom: 40px; max-width: 580px; }
        .hero-img { width: 100%; height: 440px; object-fit: cover; border-radius: var(--radius-20); box-shadow: 0 24px 48px rgba(0,0,0,0.25); position: relative; z-index: 2;}
        
        .card {
            background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--radius-20);
            padding: 32px; box-shadow: var(--shadow-sm); transition: var(--transition);
            display: flex; flex-direction: column; position: relative; overflow: hidden;
        }
        .card:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover); border-color: rgba(61,59,255,0.2); }
        .card-img { width: 100%; height: 220px; background: var(--surface); border-radius: var(--radius-xl); margin-bottom: 24px; object-fit: cover; transition: var(--transition); }
        .card:hover .card-img { transform: scale(1.03); }
        .card-price { font-size: 28px; font-weight: 600; color: var(--on-primary); margin: 24px 0 30px; }
        .badge { display: inline-block; padding: 6px 14px; background: var(--surface); border-radius: var(--radius-full); font-size: 12px; font-weight: 600; margin-bottom: 20px; color: var(--on-primary); border: 1px solid var(--hairline);}

        .unique-block {
            border-left: 4px solid var(--accent); padding: 24px 32px; margin: 40px 0;
            background: rgba(61, 59, 255, 0.03); border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
            position: relative;
        }
        .unique-label { font-size: 12px; font-weight: 600; color: var(--accent); text-transform: uppercase; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; letter-spacing: 0.5px;}
        .unique-label::before { content: ''; display: inline-block; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }

        .form-surface {
            background: var(--surface); border-radius: var(--radius-20); padding: 60px; text-align: center; border: 1px solid var(--hairline); box-shadow: var(--shadow-sm);
        }
        .form-row { display: flex; gap: 16px; justify-content: center; margin-top: 32px; max-width: 640px; margin-left: auto; margin-right: auto;}
        .input {
            width: 100%; box-sizing: border-box;
            padding: 16px 24px; border: 1px solid var(--hairline); border-radius: var(--radius-md); font-size: 16px; outline: none; transition: var(--transition); font-family: 'Graphik', sans-serif; background: #fff; color: var(--on-surface);
        }
        .input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(61, 59, 255, 0.15); }

        .steps-container { display: flex; justify-content: space-between; position: relative; margin-top: 60px; }
        .steps-container::before { content: ''; position: absolute; top: 35px; left: 10%; right: 10%; height: 2px; background: var(--hairline); z-index: 1; }
        .step-item { position: relative; z-index: 2; width: 18%; text-align: center; background: transparent; }
        .step-num { width: 70px; height: 70px; background: var(--canvas); border: 2px solid var(--hairline); color: var(--muted); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 600; margin: 0 auto 20px; transition: var(--transition); }
        .step-item:hover .step-num { border-color: var(--accent); color: var(--accent); box-shadow: 0 8px 24px rgba(61, 59, 255, 0.15); transform: scale(1.05); }
        .step-title { font-size: 18px; font-weight: 600; color: var(--on-primary); margin-bottom: 12px; }
        .step-text { font-size: 15px; color: var(--body); line-height: 1.5;}

        .security-box { position: relative; border-radius: var(--radius-xl); overflow: hidden; background: #fff; border: 1px solid var(--hairline); padding: 12px; box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: center;}
        .security-box img { width: 100%; border-radius: var(--radius-md); display: block;}
        .loupe { position: absolute; width: 110px; height: 110px; border-radius: 50%; border: 4px solid var(--accent); box-shadow: 0 8px 24px rgba(0,0,0,0.25); background-image: url('../images/diplom-spetsialista-s-otlichem-2026.jpg'); background-size: 400%; transition: transform 0.3s;}
        .loupe:hover { transform: scale(1.1); z-index: 10;}
        .loupe-1 { top: 12%; left: 12%; background-position: 10% 10%; }
        .loupe-2 { top: 42%; right: 12%; background-position: 85% 45%; }
        .loupe-3 { bottom: 12%; left: 28%; background-position: 30% 85%; }
        .loupe-label { position: absolute; background: var(--on-primary); color: #fff; padding: 6px 14px; border-radius: var(--radius-full); font-size: 13px; font-weight: 500; white-space: nowrap; transform: translate(-50%, 120%); left: 50%; bottom: 0; box-shadow: var(--shadow-sm);}

        .faq-item { border-bottom: 1px solid var(--hairline); padding: 24px 0; transition: var(--transition); }
        .faq-question { font-size: 20px; font-weight: 500; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: color 0.2s;}
        .faq-question:hover { color: var(--accent); }
        .faq-answer { margin-top: 16px; color: var(--body); display: none; line-height: 1.6; font-size: 16px; padding-right: 40px;}
        
        .consult-wrap { padding: 60px; }
        .consult-form { padding: 40px; }

        footer { background: var(--surface-alt); color: var(--muted); padding: 100px 0 40px; }
        .footer-logo { color: #fff; font-size: 28px; font-weight: 600; text-decoration: none; margin-bottom: 24px; display: inline-block; letter-spacing: -0.5px;}
        footer h4 { color: #fff; font-size: 16px; font-weight: 600; margin-bottom: 24px; text-transform: uppercase; letter-spacing: 0.5px;}
        footer ul { list-style: none; padding: 0; margin: 0; }
        footer ul li { margin-bottom: 12px; }
        footer a { color: var(--muted); text-decoration: none; transition: color 0.2s; font-size: 15px;}
        footer a:hover { color: var(--accent); }

        @media(max-width: 992px) {
            .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; gap: 30px;}
            .header-contacts, .nav { display: none; }
            h1 { font-size: 42px; line-height: 1.1; }
            h2 { font-size: 28px; }
            .form-row { flex-direction: column; }
            .steps-container { flex-direction: column; gap: 32px; }
            .steps-container::before { display: none; }
            .step-item { width: 100%; text-align: left; display: flex; align-items: flex-start; gap: 24px; }
            .step-num { margin: 0; flex-shrink: 0; width: 50px; height: 50px; font-size: 18px; }
            .hero { padding: 60px 0 80px; }
            section { padding: 60px 0; }
            .form-surface { padding: 40px 20px; }
            .consult-wrap { padding: 30px 16px; }
            .consult-form { padding: 24px 16px; }
        }
    
.btn-sm {
    padding: 10px 20px !important;
    font-size: 15px !important;
    border-radius: var(--radius-md) !important;
}
@media (max-width: 600px) {
    .loupe { width: 80px; height: 80px; }
}
@media (max-width: 480px) {
    h1 { font-size: 34px; }
    h2 { font-size: 24px; margin-bottom: 24px; }
    .hero { padding: 40px 0 60px; }
    .hero h1 { margin-bottom: 16px; }
    section { padding: 50px 0; }
    .btn-primary { padding: 14px 24px; font-size: 16px; width: 100%; text-align: center; }
    .btn-outline, .btn-ghost { padding: 10px 20px; font-size: 14px; width: 100%; text-align: center; }
    .tab-btn { width: 100% !important; margin-bottom: 8px; }
}
body { overflow-wrap: break-word; word-wrap: break-word;  }
button:focus-visible, a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}