:root{
            --bg:#eef4ff;
            --bg2:#f9fbff;
            --card:#ffffff;
            --text:#183153;
            --muted:#5f7190;
            --line:rgba(31,79,209,.14);
            --primary:#1f4fd1;
            --primary-2:#4f7cff;
            --accent:#11b7a3;
            --accent-2:#0f8f91;
            --dark:#0f1b33;
            --soft:#e8f0ff;
            --soft-2:#eefcf9;
            --shadow:0 18px 50px rgba(20, 48, 110, .14);
            --shadow-soft:0 12px 28px rgba(20, 48, 110, .10);
            --radius-xl:30px;
            --radius-lg:22px;
            --radius-md:16px;
            --container:1280px;
        }

        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            font-family:Arial, Helvetica, sans-serif;
            color:var(--text);
            background:
                radial-gradient(circle at top left, rgba(79,124,255,.18), transparent 28%),
                radial-gradient(circle at right top, rgba(17,183,163,.12), transparent 24%),
                linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
            line-height:1.68;
            font-size:16px;
        }

        a{
            color:var(--primary);
            text-decoration:none;
            transition:.25s ease;
        }
        a:hover{color:var(--accent-2)}

        img{max-width:100%; height:auto}

        .site-shell{
            max-width:var(--container);
            margin:24px auto;
            padding:0 16px 28px;
        }

        .page{
            background:rgba(255,255,255,.78);
            backdrop-filter:blur(8px);
            border:1px solid rgba(255,255,255,.6);
            border-radius:36px;
            box-shadow:var(--shadow);
            overflow:visible;
        }

        .topbar{
            background:linear-gradient(135deg, #0f1b33 0%, #163a84 52%, #2f69ff 100%);
            color:#fff;
            padding:14px 34px;
            font-size:14px;
            display:flex;
            justify-content:space-between;
            gap:18px;
            flex-wrap:wrap;
        }

        .topbar strong{color:#fff}
        .topbar a{color:#dff5ff}
        .topbar a:hover{color:#fff}

        header.hero{
            position:relative;
            overflow:hidden;
            padding:46px 34px 34px;
            background:
                linear-gradient(135deg, rgba(255,255,255,.96) 0%, rgba(237,244,255,.96) 50%, rgba(236,252,249,.94) 100%);
            border-bottom:1px solid var(--line);
        }

        .hero:before{
            content:"";
            position:absolute;
            right:-120px;
            top:-100px;
            width:380px;
            height:380px;
            border-radius:50%;
            background:radial-gradient(circle, rgba(79,124,255,.22) 0%, rgba(79,124,255,0) 68%);
        }

        .hero:after{
            content:"";
            position:absolute;
            left:-120px;
            bottom:-120px;
            width:320px;
            height:320px;
            border-radius:50%;
            background:radial-gradient(circle, rgba(17,183,163,.18) 0%, rgba(17,183,163,0) 70%);
        }

        .hero-grid{
            position:relative;
            z-index:1;
            display:grid;
            grid-template-columns:minmax(0, 1.45fr) minmax(320px, .9fr);
            gap:26px;
            align-items:center;
        }

        .brand-badge{
            display:inline-flex;
            align-items:center;
            gap:10px;
            padding:10px 16px;
            border-radius:999px;
            background:linear-gradient(135deg, #eaf1ff 0%, #effcf9 100%);
            color:var(--primary);
            border:1px solid rgba(31,79,209,.12);
            box-shadow:var(--shadow-soft);
            font-size:14px;
            font-weight:700;
            letter-spacing:.2px;
        }

        .hero h1{
            margin:18px 0 14px;
            font-size:32px;
            line-height:1.12;
            color:var(--dark);
        }

        .hero p.lead{
            margin:0 0 22px;
            font-size:18px;
            color:#41557c;
            max-width:860px;
        }

        .hero-actions{
            display:flex;
            gap:14px;
            flex-wrap:wrap;
            margin-bottom:24px;
        }

        .btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            padding:14px 22px;
            border-radius:16px;
            font-weight:700;
            box-shadow:var(--shadow-soft);
            border:1px solid transparent;
        }

        .btn-primary{
            background:linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%);
            color:#fff;
        }
        .btn-primary:hover{color:#fff; transform:translateY(-1px)}

        .btn-secondary{
            background:linear-gradient(135deg, #ffffff 0%, #eef4ff 100%);
            color:var(--primary);
            border-color:rgba(31,79,209,.14);
        }

        .hero-points{
            display:grid;
            grid-template-columns:repeat(3, minmax(0, 1fr));
            gap:14px;
        }

        .hero-point{
            background:rgba(255,255,255,.85);
            border:1px solid rgba(31,79,209,.12);
            border-radius:18px;
            padding:16px;
            box-shadow:var(--shadow-soft);
        }

        .hero-point strong{
            display:block;
            margin-bottom:6px;
            color:var(--dark);
            font-size:17px;
        }

        .hero-card{
            background:linear-gradient(160deg, #173a87 0%, #204fbf 55%, #11b7a3 140%);
            color:#fff;
            border-radius:28px;
            padding:28px;
            box-shadow:0 22px 50px rgba(23,58,135,.28);
            position:relative;
            overflow:hidden;
        }

        .hero-card:before{
            content:"";
            position:absolute;
            right:-60px;
            top:-60px;
            width:180px;
            height:180px;
            border-radius:50%;
            background:rgba(255,255,255,.12);
        }

        .hero-card h2{
            margin:0 0 14px;
            font-size:28px;
            line-height:1.2;
        }

        .hero-card p{
            margin:0 0 18px;
            color:rgba(255,255,255,.92);
        }

        .hero-card ul{
            margin:0;
            padding-left:18px;
        }

        .hero-card li{
            margin:0 0 8px;
        }

        .hero-inner{
            position:relative;
            z-index:2;
            display:flex;
            justify-content:space-between;
            gap:22px;
            flex-wrap:wrap;
            align-items:flex-start;
        }

        .eyebrow{
            display:inline-block;
            padding:8px 14px;
            border-radius:999px;
            background:rgba(255,255,255,.14);
            border:1px solid rgba(255,255,255,.22);
            font-size:13px;
            margin-bottom:14px;
        }
        .layout{
            display:grid;
            grid-template-columns:minmax(0, 1.95fr) minmax(300px, .95fr);
            gap:28px;
            padding:30px 34px 36px;
            align-items:start;
            background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
        }

        .main-content{
            min-width:0;
        }
		.sidebar{ 
		    padding-bottom:4px;
            position:sticky;
            top:24px;
			}

        .card{
            background:linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
            border:1px solid var(--line);
            border-radius:26px;
            box-shadow:var(--shadow-soft);
            padding:28px;
            margin-bottom:22px;
        }

        .card h2{
            margin:0 0 14px;
            color:var(--dark);
            font-size:31px;
            line-height:1.2;
        }

        .card h3{
            margin:24px 0 12px;
            font-size:23px;
            line-height:1.28;
            color:var(--dark);
        }

        .card p{
            margin:0 0 16px;
            color:#33486d;
        }

        .card ul{
            margin:0 0 16px;
            padding-left:20px;
        }

        .card li{
            margin-bottom:10px;
            color:#31466d;
        }

        .section-title{
            display:inline-flex;
            align-items:center;
            gap:10px;
            margin-bottom:14px;
            padding:8px 14px;
            border-radius:999px;
            background:linear-gradient(135deg, #edf3ff 0%, #eefcf9 100%);
            color:var(--primary);
            font-size:13px;
            font-weight:700;
            letter-spacing:.4px;
            text-transform:uppercase;
        }

        .feature-grid{
            display:grid;
            grid-template-columns:repeat(2, minmax(0, 1fr));
            gap:16px;
            margin-top:10px;
        }

        .feature-item{
            border:1px solid var(--line);
            background:linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
            border-radius:20px;
            padding:18px;
        }

        .feature-item h4{
            margin:0 0 10px;
            font-size:18px;
            color:var(--dark);
        }

        .highlight-box{
            padding:22px;
            border-radius:22px;
            background:linear-gradient(135deg, #ecf2ff 0%, #f3fffc 100%);
            border:1px solid rgba(31,79,209,.12);
            margin:18px 0;
        }

        .cta-box{
            background:linear-gradient(135deg, #132b63 0%, #1f4fd1 50%, #11b7a3 120%);
            color:#fff;
            border-radius:28px;
            padding:28px;
            box-shadow:0 20px 40px rgba(31,79,209,.24);
        }

        .cta-box h3{
            margin:0 0 12px;
            color:#fff;
        }

        .cta-box p{
            color:rgba(255,255,255,.92);
            margin-bottom:18px;
        }

        .cta-box .btn-secondary{
            background:rgba(255,255,255,.94);
            color:#12357f;
            border-color:rgba(255,255,255,.34);
        }

        .side-card{
            background:linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
            border:1px solid var(--line);
            border-radius:24px;
            padding:22px;
            box-shadow:var(--shadow-soft);
            margin-bottom:18px;
        }

        .side-card h3{
            margin:0 0 12px;
            font-size:22px;
            color:var(--dark);
        }

        .side-card p{
            margin:0 0 12px;
            color:#455b82;
        }

        .check-list{
            list-style:none;
            padding:0;
            margin:0;
        }

        .check-list li{
            position:relative;
            padding-left:28px;
            margin-bottom:12px;
            color:#30476c;
        }

        .check-list li:before{
            content:"✓";
            position:absolute;
            left:0;
            top:0;
            color:var(--accent-2);
            font-weight:bold;
        }

        .contact-list{
            list-style:none;
            padding:0;
            margin:0;
        }

        .contact-list li{
            margin-bottom:12px;
            padding:12px 14px;
            border-radius:16px;
            background:linear-gradient(135deg, #edf3ff 0%, #f5fffc 100%);
            border:1px solid rgba(31,79,209,.10);
            color:#27406a;
        }

        .mini-nav a{
            display:block;
            padding:12px 14px;
            border-radius:14px;
            margin-bottom:10px;
            background:linear-gradient(135deg, #ffffff 0%, #eef4ff 100%);
            border:1px solid rgba(31,79,209,.10);
            color:#214078;
            font-weight:700;
        }

        .mini-nav a:hover{
            transform:translateX(3px);
            background:linear-gradient(135deg, #eef4ff 0%, #ecfffb 100%);
        }

        .social-links{
            display:grid;
            gap:10px;
        }

        .social-links a{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            padding:12px 14px;
            border-radius:15px;
            background:linear-gradient(135deg, #ffffff 0%, #edf4ff 100%);
            border:1px solid rgba(31,79,209,.10);
            font-weight:700;
        }

        .stats{
            display:grid;
            grid-template-columns:repeat(3, minmax(0, 1fr));
            gap:16px;
            margin-top:18px;
        }

        .stat{
            text-align:center;
            padding:18px 14px;
            border-radius:20px;
            background:linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
            border:1px solid var(--line);
        }

        .stat strong{
            display:block;
            font-size:28px;
            color:var(--primary);
            margin-bottom:6px;
        }

        footer{
            padding:30px 34px 36px;
            background:linear-gradient(135deg, #0e1a30 0%, #12357f 55%, #0f8f91 130%);
            color:#e9f3ff;
        }

        .footer-grid{
            display:grid;
            grid-template-columns:1.3fr 1fr 1fr;
            gap:24px;
        }

        footer h3{
            margin:0 0 12px;
            color:#fff;
            font-size:20px;
        }

        footer p, footer li, footer a{
            color:rgba(233,243,255,.92);
        }

        footer ul{
            margin:0;
            padding-left:18px;
        }

        .footer-bottom{
            margin-top:24px;
            padding-top:18px;
            border-top:1px solid rgba(255,255,255,.14);
            font-size:14px;
            color:rgba(233,243,255,.82);
        }

        @media (max-width: 1100px){
            .hero-grid,
            .layout,
            .footer-grid{
                grid-template-columns:1fr;
            }
            .sidebar{
                position:relative;
                top:0;
            }
        }

        @media (max-width: 760px){
            .topbar,
            header.hero,
            .layout,
            footer{
                padding-left:18px;
                padding-right:18px;
            }

            .hero h1{
                font-size:34px;
            }

            .hero-points,
            .feature-grid,
            .stats{
                grid-template-columns:1fr;
            }

            .card,
            .side-card{
                padding:20px;
            }
        }
		
		
		 /* Лівий рекламний блок */
    .side-ad {
        position: fixed;
        top: 48px;
        left: 0;
        width: 250px;
        background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
        border-radius: 0 18px 18px 0;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
        overflow: hidden;
        z-index: 9999;
        transform: translateX(0);
        transition: transform 0.45s ease, box-shadow 0.3s ease;
    }

    .side-ad.hidden {
        transform: translateX(-230px);
    }

    .side-ad:hover {
        box-shadow: 0 16px 38px rgba(0, 0, 0, 0.22);
    }

    .side-ad-header {
        background: linear-gradient(135deg, #0f1b33 0%, #163a84 52%, #2f69ff 100%);
        color: #fff;
        padding: 8px;
        font-size: 18px;
        font-weight: bold;
        position: relative;
    }

    .side-ad-close {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 32px;
        height: 32px;
        border: none;
        border-radius: 50%;
        background: rgba(255,255,255,0.2);
        color: #fff;
        font-size: 18px;
        cursor: pointer;
        transition: background 0.25s ease, transform 0.25s ease;
    }

    .side-ad-close:hover {
        background: rgba(255,255,255,0.35);
        transform: rotate(90deg);
    }

    .side-ad-body {
        padding: 8px;
        color: #333;
        font-size: 12px;
        line-height: 1.1;
		text-align: center
    }

    .side-ad-body img {
        width: 100%;
        border-radius: 12px;
        display: block;
        margin-bottom: 14px;
    }

    .side-ad-btn {
        display: inline-block;
        margin-top: 10px;
        padding: 12px 16px;
        background: linear-gradient(135deg, #0f1b33 0%, #163a84 52%, #2f69ff 100%);
        color: #fff;
        text-decoration: none;
        font-size: 14px;
        font-weight: bold;
        border-radius: 10px;
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .side-ad-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(238, 9, 121, 0.25);
		color: #999;
    }

    /* Кнопка повернення */
    .side-ad-toggle {
        position: fixed;
        top: 120px;
        left: 10px;
        width: 46px;
        height: 46px;
        border: none;
        border-radius: 50%;
        background: linear-gradient(135deg, #ff6a00, #ee0979);
        color: #fff;
        font-size: 22px;
        cursor: pointer;
        box-shadow: 0 10px 25px rgba(0,0,0,0.2);
        z-index: 10000;
        opacity: 0;
        visibility: hidden;
        transform: scale(0.8);
        transition: all 0.35s ease;
    }

    .side-ad-toggle.show {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
    }

    .side-ad-toggle:hover {
        transform: scale(1.08);
    }

    /* Для мобільних */
    @media (max-width: 768px) {
        .side-ad {
            top: auto;
            bottom: 20px;
            width: 250px;
        }

        .side-ad-toggle {
            top: auto;
            bottom: 30px;
        }
    }
	
	    .mini-nav,
        .check-list{
            display:grid;
            gap:10px;
        }

        .mini-nav a{
            display:block;
            padding:12px 14px;
            border-radius:14px;
            background:#f8fafc;
            border:1px solid var(--line);
            color:#0f172a;
            font-weight:600;
        }

        .mini-nav a:hover{
            text-decoration:none;
            background:#f0fdfa;
            border-color:rgba(20,184,166,.25);
        }

        .check-list{
            padding-left:18px;
            margin:0;
            color:#475467;
        }

        .contacts-list{
            list-style:none;
            padding:0;
            margin:0;
            display:grid;
            gap:10px;
            color:#475467;
        }

        .contacts-list strong{
            color:#0f172a;
        }       
		
		.faq-grid{
            display:grid;
            gap:18px;
        }

        .faq-item{
            border:1px solid var(--line);
            border-radius:22px;
            padding:24px 24px 22px;
            background:linear-gradient(180deg,#ffffff 0%, #f8fbfc 100%);
            transition:.2s ease;
        }

        .faq-item:hover{
            transform:translateY(-2px);
            box-shadow:0 16px 30px rgba(15,118,110,.08);
            border-color:rgba(20,184,166,.22);
        }

        .faq-item h3{
            margin:0 0 12px;
            font-size:21px;
            line-height:1.35;
            color:#0f172a;
        }

        .faq-item p{
            margin:0;
            color:#475467;
        }

        .faq-badge{
            display:inline-block;
            margin-bottom:12px;
            padding:6px 12px;
            border-radius:999px;
            background:var(--soft);
            color:var(--accent-3);
            font-size:12px;
            font-weight:700;
            letter-spacing:.02em;
        }