:root{
    --bg:#05090e;
    --bg2:#08121b;
    --panel:#0a1620;
    --panel2:#0d1b27;
    --line:rgba(255,255,255,.09);
    --line2:rgba(91,140,255,.20);
    --text:#f5f7fb;
    --muted:#91a0ad;
    --blue:#5b8cff;
    --blue2:#3568ec;
    --green:#74f879;
    --green2:#3fe582;
    --red:#ff6b74;
    --max:1180px;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
    margin:0;
    color:var(--text);
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
    line-height:1.55;
    background:
        radial-gradient(circle at 78% 0%,rgba(64,100,190,.15),transparent 34rem),
        radial-gradient(circle at 8% 26%,rgba(61,229,130,.055),transparent 30rem),
        var(--bg);
    -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none}

button,input{font:inherit}

.container{
    width:min(calc(100% - 40px),var(--max));
    margin:auto;
}

/* HEADER */

.header{
    position:sticky;
    top:0;
    z-index:100;
    background:rgba(5,9,14,.93);
    backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line);
}

.nav{
    height:78px;
    display:flex;
    align-items:center;
    gap:30px;
}

.logo img{
    width:180px;
    display:block;
}

.navlinks{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:27px;
    color:#aebac4;
    font-size:15px;
    font-weight:620;
}

.navlinks a:hover{color:#fff}

.actions{
    display:flex;
    gap:10px;
}

.btn{
    min-height:44px;
    padding:0 18px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:11px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.035);
    color:#eef3f6;
    font-weight:750;
    font-size:13px;
    cursor:pointer;
    transition:.18s ease;
}

.btn:hover{
    transform:translateY(-1px);
    border-color:rgba(255,255,255,.17);
}

.btn-primary{
    color:#071009;
    border:0;
    background:linear-gradient(135deg,var(--green),var(--green2));
}

/* HERO */

.hero{
    padding:80px 0 45px;
}

.kicker{
    margin-bottom:17px;
    color:var(--green);
    font-size:12px;
    font-weight:850;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.hero h1{
    max-width:800px;
    margin:0 0 18px;
    font-size:clamp(46px,6vw,74px);
    line-height:1;
    letter-spacing:-.052em;
}

.hero p{
    max-width:730px;
    margin:0;
    color:#a8b5bf;
    font-size:18px;
    line-height:1.7;
}

/* SEARCH */

.searchbox{
    margin-top:36px;
    padding:16px;
    display:flex;
    align-items:center;
    gap:12px;
    border:1px solid rgba(91,140,255,.25);
    border-radius:18px;
    background:rgba(10,23,33,.9);
    box-shadow:0 20px 60px rgba(0,0,0,.22);
}

.search-icon{
    padding-left:4px;
    color:var(--blue);
    font-size:24px;
}

.searchbox input{
    min-width:0;
    flex:1;
    height:46px;
    border:0;
    outline:0;
    background:transparent;
    color:#fff;
    font-size:16px;
}

.searchbox input::placeholder{color:#647581}

.clear-search{
    display:none;
    border:0;
    background:transparent;
    color:#82909b;
    cursor:pointer;
    font-size:19px;
}

.popular{
    margin-top:15px;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    color:#7f8d98;
    font-size:12px;
}

.popular button{
    padding:7px 11px;
    border:1px solid var(--line);
    border-radius:999px;
    color:#afbbc4;
    background:rgba(255,255,255,.025);
    cursor:pointer;
}

.popular button:hover{
    color:white;
    border-color:rgba(91,140,255,.3);
}

/* QUICK START */

.section{
    padding:70px 0;
}

.section-title{
    margin-bottom:31px;
}

.section-title small{
    display:block;
    margin-bottom:8px;
    color:var(--green);
    font-size:11px;
    font-weight:850;
    letter-spacing:.17em;
    text-transform:uppercase;
}

.section-title h2{
    margin:0 0 10px;
    font-size:clamp(30px,4vw,45px);
    letter-spacing:-.04em;
}

.section-title p{
    margin:0;
    color:var(--muted);
}

.quick-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
}

.quick{
    padding:23px;
    border:1px solid var(--line);
    border-radius:18px;
    background:rgba(10,23,32,.72);
}

.quick-num{
    width:37px;
    height:37px;
    margin-bottom:18px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:linear-gradient(135deg,var(--blue),#78a2ff);
    font-size:13px;
    font-weight:900;
}

.quick strong{
    display:block;
    margin-bottom:6px;
    font-size:14px;
}

.quick span{
    color:var(--muted);
    font-size:12px;
}

/* WARNING */

.warning{
    margin-top:17px;
    padding:16px 18px;
    border:1px solid rgba(255,190,80,.16);
    border-radius:14px;
    background:rgba(255,170,45,.035);
    color:#b9b0a1;
    font-size:13px;
}

.warning strong{color:#ffd28a}

/* DIAGNOSTICS */

.diagnostic{
    padding:27px;
    border:1px solid var(--line);
    border-radius:22px;
    background:linear-gradient(145deg,rgba(13,28,39,.9),rgba(7,17,24,.92));
}

.diag-head{
    margin-bottom:20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
}

.diag-count{
    color:var(--green);
    font-size:13px;
    font-weight:800;
}

.progress{
    height:5px;
    margin-bottom:24px;
    overflow:hidden;
    border-radius:99px;
    background:rgba(255,255,255,.06);
}

.progress span{
    display:block;
    width:0;
    height:100%;
    background:linear-gradient(90deg,var(--blue),var(--green));
    transition:.2s ease;
}

.checks{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:11px;
}

.check{
    padding:14px;
    display:flex;
    gap:11px;
    align-items:flex-start;
    border:1px solid var(--line);
    border-radius:14px;
    background:rgba(255,255,255,.018);
    cursor:pointer;
}

.check input{
    margin-top:3px;
    accent-color:var(--green);
}

.check strong{
    display:block;
    margin-bottom:3px;
    font-size:13px;
}

.check span{
    color:var(--muted);
    font-size:11px;
}

.reset{
    margin-top:17px;
    border:0;
    background:transparent;
    color:#778792;
    font-size:12px;
    cursor:pointer;
}

.reset:hover{color:white}

/* CATEGORIES */

.faq-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:20px;
    margin-bottom:23px;
}

.count{
    color:#82919c;
    font-size:13px;
}

.count strong{color:#fff}

.categories{
    margin-bottom:27px;
    display:flex;
    gap:8px;
    overflow-x:auto;
    scrollbar-width:none;
}

.categories::-webkit-scrollbar{display:none}

.category{
    flex:0 0 auto;
    padding:8px 13px;
    border:1px solid var(--line);
    border-radius:999px;
    background:rgba(255,255,255,.025);
    color:#9eabb5;
    font-size:12px;
    cursor:pointer;
}

.category.active{
    color:#071009;
    border-color:var(--green);
    background:var(--green);
    font-weight:800;
}

/* FAQ */

.faq-list{
    display:grid;
    gap:10px;
}

.faq-item{
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:16px;
    background:rgba(9,20,28,.73);
}

.faq-item[hidden]{display:none}

.faq-item summary{
    padding:20px 22px;
    display:flex;
    gap:14px;
    align-items:center;
    list-style:none;
    cursor:pointer;
}

.faq-item summary::-webkit-details-marker{display:none}

.tag{
    flex:0 0 auto;
    padding:4px 8px;
    border-radius:7px;
    background:rgba(91,140,255,.10);
    color:#8eb0ff;
    font-size:10px;
    font-weight:800;
}

.faq-title{
    flex:1;
    font-size:14px;
    font-weight:760;
}

.chevron{
    width:22px;
    color:#70808d;
    text-align:center;
    font-size:20px;
    transition:.18s ease;
}

.faq-item[open] .chevron{
    transform:rotate(45deg);
    color:var(--green);
}

.faq-body{
    padding:0 22px 21px;
    color:#9dacb7;
    font-size:13px;
    line-height:1.72;
}

.faq-body p:last-child{margin-bottom:0}

.faq-body ul,
.faq-body ol{
    padding-left:21px;
}

.faq-body li{
    margin:6px 0;
}

.faq-body strong{
    color:#e4eaf0;
}

.no-results{
    display:none;
    padding:45px;
    border:1px dashed var(--line);
    border-radius:18px;
    text-align:center;
    color:var(--muted);
}

/* SUPPORT */

.support{
    padding:35px 0 90px;
}

.support-box{
    padding:38px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    border:1px solid rgba(91,140,255,.22);
    border-radius:23px;
    background:
        radial-gradient(circle at 85% 20%,rgba(91,140,255,.14),transparent 20rem),
        rgba(10,22,31,.88);
}

.support-box h2{
    margin:0 0 7px;
    font-size:29px;
}

.support-box p{
    max-width:650px;
    margin:0;
    color:var(--muted);
    font-size:13px;
}

/* FOOTER */

footer{
    padding:28px 0 35px;
    border-top:1px solid var(--line);
}

.footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.footer img{width:160px}

.footer-links{
    display:flex;
    gap:18px;
    color:#87959f;
    font-size:12px;
}

/* RESPONSIVE */

@media(max-width:950px){
    .navlinks{display:none}
    .actions{margin-left:auto}
    .quick-grid{grid-template-columns:repeat(2,1fr)}
    .checks{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:620px){
    .container{width:min(calc(100% - 26px),var(--max))}
    .nav{height:65px}
    .logo img{width:148px}
    .actions .cabinet{display:none}
    .actions .btn-primary{padding:0 12px;font-size:11px}
    .hero{padding-top:50px}
    .hero h1{font-size:46px}
    .hero p{font-size:15px}
    .searchbox{padding:10px 13px}
    .quick-grid,.checks{grid-template-columns:1fr}
    .section{padding:55px 0}
    .faq-head{display:block}
    .count{margin-top:7px}
    .faq-item summary{padding:17px 16px}
    .faq-body{padding:0 16px 18px}
    .tag{display:none}
    .support-box{display:block;padding:27px}
    .support-box .btn{width:100%;margin-top:20px}
    .footer{display:block}
    .footer-links{margin-top:16px;flex-wrap:wrap}
}