:root{
    --black:#111216;
    --bg:#f4f3ef;
    --text:#17181c;
    --muted:#74767d;
    --line:#dededb;
    --purple:#625df0;
    --purple-dark:#504bd2;
    --purple-light:#ebeaff;
    --lime:#d9f26a;
    --orange:#ffb66b;
    --blue:#8dc9ff;
    --pink:#f0a4cf
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden
}

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

button,input,select{font:inherit}

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

.q-header{
    position:sticky;
    top:0;
    z-index:100;
    background:rgba(244,243,239,.9);
    backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(17,18,22,.07)
}

.q-header-inner{
    min-height:76px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px
}

.q-logo{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size:21px;
    font-weight:850;
    letter-spacing:-.05em
}

.q-logo-mark{
    width:35px;
    height:35px;
    display:grid;
    place-items:center;
    border-radius:11px;
    background:var(--bs-primary);
    color:#fff;
    font-size:16px
}

.q-nav{
    display:flex;
    align-items:center;
    gap:5px
}

.q-nav-link{
    padding:9px 12px;
    border-radius:9px;
    color:#64666c;
    font-size:13px;
    font-weight:650
}

.q-nav-link:hover{background:#e9e8e4}

.q-nav-button{
    margin-left:8px;
    padding:11px 16px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    border-radius:11px;
    background:var(--black);
    color:#fff;
    font-size:13px;
    font-weight:750
}

.q-nav-button:hover{
    background:#292b30;
    color:#fff
}

.q-hero{
    padding:72px 0 85px
}

.q-breadcrumb{
    margin-bottom:45px;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    color:#92949a;
    font-size:12px
}

.q-breadcrumb a:hover{color:var(--text)}

.q-breadcrumb-current{color:#5f6167}

.q-hero-grid{
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr);
    gap:72px;
    align-items:center
}

.q-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:24px;
    color:var(--purple-dark);
    font-size:11px;
    font-weight:850;
    letter-spacing:.13em;
    text-transform:uppercase
}

.q-eyebrow-line{
    width:28px;
    height:2px;
    background:var(--purple)
}

.q-hero h1{
    max-width:780px;
    margin:0;
    font-size:clamp(45px,6vw,76px);
    line-height:.99;
    letter-spacing:-.065em;
    font-weight:850
}

.q-hero h1 strong{
    color:var(--purple);
    font-weight:inherit
}

.q-hero-lead{
    max-width:650px;
    margin:27px 0 0;
    color:var(--muted);
    font-size:17px;
    line-height:1.65
}

.q-hero-note{
    margin-top:18px;
    display:flex;
    align-items:center;
    gap:8px;
    color:#92949a;
    font-size:12px
}

.q-hero-note i{color:#4baf80}

.q-art-card{
    position:relative;
    min-height:500px;
    padding:24px;
    overflow:hidden;
    border-radius:31px;
    background:var(--black)
}

.q-art-card:before{
    content:"";
    position:absolute;
    width:240px;
    height:240px;
    right:-150px;
    top:-150px;
    border-radius:50%;
    background:var(--purple)
}

.q-art-card:after{
    content:"";
    position:absolute;
    width:150px;
    height:150px;
    left:-100px;
    bottom:-100px;
    border-radius:50%;
    background:var(--lime)
}

.q-art-inner{
    position:relative;
    z-index:3;
    min-height:452px;
    padding:23px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    background:rgba(255,255,255,.065);
    border:1px solid rgba(255,255,255,.1);
    border-radius:22px
}

.q-art-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px
}

.q-art-label{
    color:#a7a9b0;
    font-size:10px;
    font-weight:800;
    letter-spacing:.13em
}

.q-art-counter{
    padding:7px 10px;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    color:#c6c8ce;
    font-size:10px
}

.q-art-center{padding:30px 0}

.q-art-icon{
    width:58px;
    height:58px;
    margin-bottom:22px;
    display:grid;
    place-items:center;
    border-radius:16px;
    background:var(--lime);
    color:var(--black);
    font-size:24px
}

.q-art-big{
    margin:0;
    color:#fff;
    font-size:clamp(34px,4vw,49px);
    line-height:.98;
    letter-spacing:-.06em;
    font-weight:850
}

.q-art-big span{color:var(--lime)}

.q-art-description{
    max-width:340px;
    margin:18px 0 0;
    color:#999ca5;
    font-size:13px;
    line-height:1.6
}

.q-art-bottom{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:9px
}

.q-art-chip{
    padding:14px;
    border-radius:12px;
    background:rgba(255,255,255,.075)
}

.q-art-chip-icon{
    margin-bottom:12px;
    color:#fff;
    font-size:17px
}

.q-art-chip-title{
    color:#c4c6cc;
    font-size:10px;
    line-height:1.35
}

.q-tool-section{
    padding:0 0 110px
}

.q-tool-layout{
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
    gap:13px
}

.q-tool-card{
    padding:34px;
    border-radius:24px;
    background:#fff;
    border:1px solid var(--line)
}

.q-tool-card-head{
    display:flex;
    gap:16px;
    margin-bottom:30px
}

.q-tool-icon{
    width:50px;
    height:50px;
    flex:0 0 50px;
    display:grid;
    place-items:center;
    border-radius:14px;
    background:var(--purple-light);
    color:var(--purple);
    font-size:21px
}

.q-tool-card h2{
    margin:0;
    font-size:24px;
    line-height:1.15;
    letter-spacing:-.035em;
    font-weight:800
}

.q-tool-card-head p{
    margin:7px 0 0;
    color:var(--muted);
    font-size:13px;
    line-height:1.55
}

.q-form{
    display:grid;
    gap:18px
}

.q-field{
    display:grid;
    gap:8px
}

.q-field label{
    font-size:13px;
    font-weight:750
}

.q-field input,
.q-field select{
    width:100%;
    min-height:51px;
    padding:11px 14px;
    border:1px solid #d8d8d4;
    border-radius:12px;
    background:#fff;
    color:var(--text);
    outline:0;
    font-size:15px
}

.q-field input:focus,
.q-field select:focus{
    border-color:#aaa5ff;
    box-shadow:0 0 0 4px rgba(98,93,240,.1)
}

.q-form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px
}

.q-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:4px
}

.q-button,
.q-reset{
    min-height:49px;
    padding:12px 19px;
    border-radius:11px;
    font-size:13px;
    font-weight:750
}

.q-button{
    border:0;
    background:var(--black);
    color:#fff
}

.q-button:hover{background:#292b30}

.q-reset{
    border:1px solid var(--line);
    background:#fff;
    color:var(--text)
}

.q-result{
    margin-top:24px;
    padding:22px;
    border-radius:17px;
    background:var(--black);
    color:#fff
}

.q-result-label{
    color:#999ca5;
    font-size:11px;
    font-weight:750;
    letter-spacing:.08em;
    text-transform:uppercase
}

.q-result-value{
    margin-top:7px;
    color:var(--lime);
    font-size:35px;
    line-height:1.05;
    letter-spacing:-.045em;
    font-weight:850
}

.q-result-note{
    margin-top:8px;
    color:#9fa2aa;
    font-size:12px;
    line-height:1.55
}

.q-tool-side{
    padding:28px;
    border-radius:22px;
    background:var(--black);
    color:#fff
}

.q-tool-side-kicker{
    margin-bottom:13px;
    color:var(--lime);
    font-size:10px;
    font-weight:850;
    letter-spacing:.13em;
    text-transform:uppercase
}

.q-tool-side h3{
    margin:0;
    font-size:25px;
    line-height:1.05;
    letter-spacing:-.045em;
    font-weight:850
}

.q-tool-side p{
    margin:17px 0 0;
    color:#999ca5;
    font-size:13px;
    line-height:1.65
}

.q-formula{
    margin-top:27px;
    padding:17px;
    border-radius:14px;
    background:rgba(255,255,255,.075)
}

.q-formula-label{
    color:#858891;
    font-size:10px;
    font-weight:800;
    letter-spacing:.1em;
    text-transform:uppercase
}

.q-formula-value{
    margin-top:9px;
    color:#fff;
    font-size:16px;
    font-weight:750
}

.q-side-list{
    margin:24px 0 0;
    padding:0;
    list-style:none
}

.q-side-list li{
    display:flex;
    gap:10px;
    padding:13px 0;
    border-top:1px solid rgba(255,255,255,.09);
    color:#b8bac1;
    font-size:12px;
    line-height:1.5
}

.q-side-list i{color:var(--lime)}

.q-content-section{
    padding:110px 0;
    background:#fff;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line)
}

.q-content-layout{
    display:block
}

.q-content-intro{
    margin-bottom:55px
}

.q-content-kicker{
    margin-bottom:13px;
    color:var(--purple);
    font-size:11px;
    font-weight:850;
    letter-spacing:.13em;
    text-transform:uppercase
}

.q-content-title{
    max-width:900px;
    margin:0;
    font-size:clamp(36px,4.5vw,55px);
    line-height:1;
    letter-spacing:-.06em;
    font-weight:850
}

.q-content-lead{
    max-width:720px;
    margin:18px 0 0;
    color:var(--muted);
    font-size:14px;
    line-height:1.7
}

.q-content-body{
    max-width:900px
}

.q-content-body h2{
    margin:0 0 15px;
    font-size:30px;
    line-height:1.05;
    letter-spacing:-.045em;
    font-weight:850
}

.q-content-body h2:not(:first-child){
    margin-top:48px
}

.q-content-body p{
    margin:0 0 18px;
    color:#5f6168;
    font-size:15px;
    line-height:1.8
}

.q-related{
    margin:34px 0 42px;
}

.q-related-card{
    position:relative;
    min-height:92px;
    padding:18px 54px 18px 18px;
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:16px;
    border:1px solid #dededb;
    border-radius:16px;
    background:#f4f3ef;
    transition:all .2s ease;
}

.q-related-card:hover{
    transform:translateY(-2px);
    border-color:#c9c7c1;
    background:#eeece7;
}

.q-related-icon{
    width:46px;
    height:46px;
    flex:0 0 46px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:#ebeaff;
    color:#625df0;
    font-size:19px;
}

.q-related-card h3{
    margin:0;
    font-size:14px;
    line-height:1.3;
    font-weight:800;
    letter-spacing:-.015em;
}

.q-related-card p{
    margin:5px 0 0;
    color:#74767d;
    font-size:12px;
    line-height:1.45;
}

.q-related-arrow{
    position:absolute;
    right:18px;
    top:50%;
    transform:translateY(-50%);
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#fff;
    color:#74767d;
    font-size:12px;
    transition:all .2s ease;
}

.q-related-card:hover .q-related-arrow{
    background:#111216;
    color:#fff;
}

.q-cta{
    padding:80px 0
}

.q-cta-box{
    position:relative;
    overflow:hidden;
    padding:70px;
    border-radius:28px;
    background:var(--lime);
    color:var(--black)
}

.q-cta-box:before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    right:-170px;
    top:-260px;
    border-radius:50%;
    background:rgba(98,93,240,.2)
}

.q-cta-content{
    position:relative;
    z-index:2;
    max-width:760px
}

.q-cta-title{
    margin:0;
    font-size:clamp(40px,5vw,64px);
    line-height:.98;
    letter-spacing:-.06em;
    font-weight:850
}

.q-cta-text{
    max-width:560px;
    margin:22px 0 0;
    color:#474b25;
    font-size:15px;
    line-height:1.7
}

.q-cta-button{
    margin-top:28px;
    padding:14px 19px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    border-radius:11px;
    background:var(--black);
    color:#fff;
    font-size:13px;
    font-weight:750
}

.q-cta-button:hover{
    background:#292b30;
    color:#fff
}

.q-footer{
    padding:65px 0 28px;
    background:var(--black);
    color:#fff
}

.q-footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(220px, .6fr);
    gap: 80px;
    padding-bottom: 48px;
}

.q-footer-description{
    max-width:310px;
    margin:17px 0 0;
    color:#8f929b;
    font-size:12px;
    line-height:1.7
}

.q-footer-heading{
    margin:0 0 16px;
    color:#fff;
    font-size:12px;
    font-weight:800
}

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

.q-footer-link{
    color:#8f929b;
    font-size:12px
}

.q-footer-link:hover{color:#fff}

.q-footer-bottom{
    margin-top:55px;
    padding-top:20px;
    display:flex;
    justify-content:space-between;
    gap:20px;
    border-top:1px solid rgba(255,255,255,.09);
    color:#70737b;
    font-size:11px
}

@media(max-width:980px){
    .q-nav-link:nth-child(n+3){display:none}

    .q-hero-grid{
        grid-template-columns:1fr;
        gap:45px
    }

    .q-art-card{min-height:430px}

    .q-tool-layout{
        grid-template-columns:1fr
    }

    .q-footer-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(220px, .8fr);
}
}

@media(max-width:640px){

    .q-related-card{
        min-height:88px;
        padding:16px 48px 16px 16px;
    }

    .q-related-icon{
        width:42px;
        height:42px;
        flex-basis:42px;
    }

    .q-related-card h3{
        font-size:13px;
    }

    .q-related-card p{
        font-size:11px;
    }
    
    .q-container{
        width:min(100% - 28px,1240px)
    }

    .q-header-inner{
        min-height:68px
    }

    .q-nav-link{
        display:none
    }

    .q-nav-button{
        margin-left:0
    }

    .q-hero{
        padding:45px 0 65px
    }

    .q-breadcrumb{
        margin-bottom:30px
    }

    .q-hero h1{
        font-size:44px
    }

    .q-art-card{
        min-height:390px;
        padding:15px
    }

    .q-art-inner{
        min-height:360px;
        padding:18px
    }

    .q-art-bottom{
        grid-template-columns:1fr
    }

    .q-tool-card{
        padding:22px
    }

    .q-form-row{
        grid-template-columns:1fr
    }

    .q-content-section{
        padding:75px 0
    }

    .q-content-intro{
        margin-bottom:40px
    }

    .q-content-body h2{
        font-size:26px
    }

    .q-related-card{
        min-height:115px
    }

    .q-cta{
        padding:55px 0
    }

    .q-cta-box{
        padding:40px 25px
    }

    .q-footer-grid{
        grid-template-columns:1fr
    }

    .q-footer-bottom{
        flex-direction:column
    }
}