/*==========================================
  PRODUCT HERO
==========================================*/

.product-hero{
    width:100%;
    padding-top:40px;
}

.product-hero img{
    width:100%;
    height:auto;
    display:block;
}

/*==========================================
  ABOUT VAULT
==========================================*/

.vault-about{

    background:#fff;

    padding:140px 80px;

}

.vault-about-container{

    max-width:1600px;

    margin:0 auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:80px;

}

.vault-about-text{

    flex:0 0 42%;

}

.section-label{

    display:inline-block;

    font-size:16px;

    font-weight:600;

    letter-spacing:4px;

    color:#4b6fff;

    margin-bottom:24px;

    text-transform:uppercase;

}

.vault-about-text h2{

    font-size:68px;

    color:#111;

    margin-bottom:30px;

    line-height:1.1;

}

.vault-about-text h3{

    font-size:28px;

    line-height:1.6;

    color:#111;

    margin-bottom:40px;

}

.vault-about-text p{

    font-size:18px;

    line-height:2;

    color:#666;

}

.vault-about-text strong{

    color:#111;

    font-weight:700;

}

.vault-about-image{

    flex:0 0 58%;

}

.vault-about-image img{

    width:108%;

    max-width:none;

    display:block;

    border-radius:20px;

}

.about-line{

    width:90px;

    height:4px;

    background:#4b6fff;

    margin:18px 0 42px;

    border-radius:999px;

}

/*==========================================
  BLOCK 03
==========================================*/

.vault-value{

    background:#ffffff;
    padding:140px 80px 160px;

}

.vault-value-container{

    max-width:1600px;
    margin:0 auto;

}


/*==============================
Heading
==============================*/

.vault-value-heading{

    max-width:1200px;
    margin:0 auto 90px;
    text-align:center;

}

.vault-value-heading h2{

    font-size:60px;
    line-height:1.22;
    font-weight:700;
    color:#111;
    letter-spacing:-0.03em;
    margin-bottom:32px;

}

.vault-value-heading h2 span{

    display:block;

}

.vault-value-heading p{

    max-width:980px;

    margin:0 auto;

    font-size:21px;
    line-height:1.9;

    color:#4a4a4a;

    font-weight:400;

}

/*==============================
Main Visual
==============================*/

.vault-value-visual{

    margin-bottom:70px;

}

.vault-value-visual img{

    width:100%;
    height:auto;
    display:block;

    border-radius:0;

}

/*==============================
  Bottom 3 Points
==============================*/

.vault-value-points{

    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:56px;

    max-width:1600px;

    margin:90px auto 0;

}

.vault-point{

    padding-top:42px;

    border-top:1px solid #d9d9d9;

}

.vault-point h3{

    font-size:40px;

    font-weight:700;

    color:#111;

    margin-bottom:22px;

    line-height:1.2;

}

.vault-point p{

    font-size:19px;

    line-height:2;

    color:#666;

    margin:0;

}

/*==============================
Tablet
==============================*/

@media(max-width:1200px){

.vault-value{

padding:120px 50px;

}

.vault-value-heading h2{

font-size:52px;

}

.vault-value-points{

grid-template-columns:1fr;

gap:50px;

}

}


/*==============================
Mobile
==============================*/

@media(max-width:768px){

.vault-value{

padding:90px 24px;

}

.vault-value-heading{

margin-bottom:60px;

}

.vault-value-heading h2{

font-size:38px;

line-height:1.3;

}

.vault-value-heading p{

font-size:16px;

}

.vault-value-visual{

margin-bottom:60px;

}

.value-item h3{

font-size:22px;

}

.value-item p{

font-size:15px;

line-height:1.9;

}

}

/*==========================================
  ADVANCED FEATURES
==========================================*/

.vault-advanced{

    background:#fff;

    padding:140px 80px;

}

.vault-advanced-container{

    max-width:1600px;

    margin:0 auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:80px;

}

.vault-advanced-text{

    flex:0 0 45%;

}

.vault-advanced-image{

    flex:0 0 58%;

}

.vault-advanced-image img{

    width:100%;

    display:block;

    border-radius:22px;

}

.vault-advanced h2{

    font-size:64px;

    color:#111;

    margin-bottom:0;

    line-height:1.1;

}

/* ==========================================
Block05 Flow
========================================== */

.product-flow{

    padding:160px 8%;
    background:#fff;

}

.flow-inner{

    max-width:1400px;
    margin:auto;

}

.flow-grid{

    margin-top:80px;

    display:grid;

    grid-template-columns:
    1fr
    60px
    1fr
    60px
    1fr
    60px
    1fr;

    align-items:center;

    gap:20px;

}

.flow-card{

    background:#fff;

    border:1px solid #e9e9e9;

    border-radius:26px;

    padding:45px 35px;

    text-align:center;

    box-shadow:

    0 20px 50px rgba(0,0,0,.05);

    transition:.3s;

}

.flow-card:hover{

    transform:translateY(-6px);

    box-shadow:

    0 30px 60px rgba(0,0,0,.08);

}

.flow-number{

    font-size:48px;

    font-weight:700;

    color:#6f5cff;

    margin-bottom:25px;

    letter-spacing:.08em;

}

.flow-card h3{

    font-size:24px;

    margin-bottom:18px;

    color:#111;

}

.flow-card p{

    font-size:16px;

    line-height:1.9;

    color:#666;

}

.flow-arrow{

    text-align:center;

    font-size:34px;

    color:#bcbcbc;

    font-weight:300;

}

@media(max-width:980px){

.flow-grid{

grid-template-columns:1fr;

gap:25px;

}

.flow-arrow{

transform:rotate(90deg);

font-size:28px;

}

}

/*==========================================
  BLOCK 05
==========================================*/

.vault-start{

    background:#f7f8fc;
    padding:140px 80px;

}

.vault-start-container{

    max-width:1600px;
    margin:0 auto;

}

.vault-start-heading{

    max-width:760px;
    margin-bottom:70px;

}

.vault-start h2{

    font-size:64px;
    font-weight:700;
    line-height:1.1;
    color:#111;
    margin:0;

}

.vault-start-flow{

    position:relative;

    display:grid;
    grid-template-columns:repeat(5,1fr);

    gap:30px;

    align-items:start;

}

.vault-start-flow::before{

    content:"";

    position:absolute;

    top:66px;
    left:9%;
    right:9%;

    height:2px;

    background:#d9e0ed;

    z-index:0;

}

.timeline-step{

    position:relative;

    text-align:center;

    z-index:2;

}

.step-label{

    display:block;

    margin-bottom:10px;

    font-size:13px;

    font-weight:700;

    letter-spacing:.18em;

    color:#5b61ff;

}

.timeline-number{

    width:84px;
    height:84px;

    margin:0 auto 26px;

    border-radius:50%;

    background:#fff;

    border:1px solid #eceff5;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:32px;

    font-weight:700;

    color:#5b61ff;

    box-shadow:
    0 10px 28px rgba(0,0,0,.05);

    transition:.3s;

}

.timeline-step:hover .timeline-number{

    transform:translateY(-5px);

    box-shadow:
    0 18px 40px rgba(0,0,0,.10);

}

.timeline-step h3{

    margin-bottom:16px;

    font-size:24px;

    font-weight:700;

    color:#111;

}

.timeline-step p{

    max-width:210px;

    margin:0 auto;

    font-size:15px;

    line-height:1.9;

    color:#666;

}

/*==========================================
Tablet
==========================================*/

@media(max-width:1200px){

.vault-start{

    padding:120px 50px;

}

.vault-start-flow{

    grid-template-columns:repeat(3,1fr);

    gap:60px 40px;

}

.vault-start-flow::before{

    display:none;

}

}

/*==========================================
Mobile
==========================================*/

@media(max-width:768px){

.vault-start{

    padding:90px 24px;

}

.vault-start-heading{

    margin-bottom:60px;

}

.vault-start h2{

    font-size:42px;

}

.vault-start-flow{

    grid-template-columns:1fr;

    gap:55px;

}

.timeline-step{

    text-align:center;

}

.timeline-number{

    width:74px;

    height:74px;

    font-size:28px;

}

.timeline-step h3{

    font-size:22px;

}

.timeline-step p{

    max-width:300px;

}

}

/*=========================
Mobile
=========================*/

/*==========================================*
*VAULT PRICING
*==========================================*/

.vault-pricing{

    background:#fff;

    padding:140px 80px 150px;

}

.vault-pricing-container{

    max-width:1600px;

    margin:0 auto;

}


/*==============================*
*Heading
*==============================*/

.vault-pricing-heading{

    max-width:760px;

    margin-bottom:70px;

}

.vault-pricing-heading h2{

    font-size:64px;

    font-weight:700;

    line-height:1.1;

    color:#111;

    margin:0;

}

.vault-pricing-heading p{

    font-size:18px;

    line-height:2;

    color:#666;

    margin:0;

}


/*==============================*
*Pricing Grid
*==============================*/

.vault-pricing-grid{

    display:grid;

    grid-template-columns:
        repeat(4, 1fr);

    border-top:1px solid #dedede;

    border-left:1px solid #dedede;

}


/*==============================*
*Pricing Card
*==============================*/

.pricing-card{

    padding:42px 36px 46px;

    background:#fff;

    border-right:1px solid #dedede;

    border-bottom:1px solid #dedede;

    min-height:420px;

}

.pricing-card-header{

    padding-bottom:30px;

    margin-bottom:30px;

    border-bottom:1px solid #e8e8e8;

}

.pricing-card-header h3{

    font-size:28px;

    font-weight:700;

    color:#111;

    margin:0 0 22px;

}

.pricing-price{

    display:flex;

    align-items:baseline;

    gap:6px;

}

.pricing-price strong{

    font-size:38px;

    font-weight:700;

    letter-spacing:-0.02em;

    color:#111;

}

.pricing-price span{

    font-size:15px;

    color:#666;

}


/*==============================*
*Features
*==============================*/

.pricing-features{

    list-style:none;

    padding:0;

    margin:0;

}

.pricing-features li{

    position:relative;

    padding-left:20px;

    margin-bottom:17px;

    font-size:15px;

    line-height:1.7;

    color:#555;

}

.pricing-features li::before{

    content:"";

    position:absolute;

    left:0;

    top:0.7em;

    width:7px;

    height:7px;

    border-radius:50%;

    background:#4b6fff;

}


/*==============================*
*Enterprise
*==============================*/

.pricing-enterprise{

    background:#f7f8fc;

}

.pricing-enterprise .pricing-price strong{

    font-size:32px;

}

.pricing-note{

    margin:24px 0 0;

    padding-top:20px;

    border-top:1px solid #e1e3e8;

    font-size:13px;

    line-height:1.8;

    color:#666;

}


/*==============================*
*All Plans Common
*==============================*/

.pricing-common{

    margin-top:55px;

    padding:30px 36px;

    background:#f7f8fc;

    border-left:3px solid #4b6fff;

}

.pricing-common h3{

    margin:0 0 12px;

    font-size:20px;

    font-weight:700;

    color:#111;

}

.pricing-common p{

    margin:0;

    font-size:15px;

    line-height:1.9;

    color:#555;

}


/*==============================*
*Pricing Information
*==============================*/

.pricing-information{

    margin-top:24px;

    padding:28px 36px;

    background:#fafafa;

    border-left:3px solid #d8d8d8;

}

.pricing-information h3{

    margin:0 0 10px;

    font-size:18px;

    font-weight:700;

    color:#111;

}

.pricing-information p{

    margin:0;

    font-size:14px;

    line-height:1.9;

    color:#666;

}


/*==============================*
*CTA
*==============================*/

.pricing-cta{

    display:flex;

    justify-content:center;

    margin-top:60px;

}

.pricing-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:280px;

    padding:18px 42px;

    background:#111;

    color:#fff;

    text-decoration:none;

    font-size:16px;

    font-weight:600;

    letter-spacing:.04em;

    transition:.3s;

}

.pricing-button:hover{

    background:#4b6fff;

}


/*==============================*
*Tablet
*==============================*/

@media(max-width:1200px){

    .vault-pricing{

        padding:120px 50px;

    }

    .vault-pricing-grid{

        grid-template-columns:
            repeat(2, 1fr);

    }

}


/*==============================*
*Mobile
*==============================*/

@media(max-width:768px){

    .vault-pricing{

        padding:90px 24px;

    }

    .vault-pricing-heading{

        margin-bottom:50px;

    }

    .vault-pricing-heading h2{

        font-size:42px;

    }

    .vault-pricing-heading p{

        font-size:16px;

    }

    .vault-pricing-grid{

        grid-template-columns:1fr;

    }

    .pricing-card{

        min-height:auto;

        padding:36px 28px 40px;

    }

    .pricing-card-header h3{

        font-size:25px;

    }

    .pricing-price strong{

        font-size:34px;

    }

    .pricing-common{

        padding:25px 24px;

    }

    .pricing-information{

        padding:24px;

    }

    .pricing-cta{

        margin-top:50px;

    }

    .pricing-button{

        width:100%;

        min-width:0;

    }

}

/*==========================================*
*PRICE COMPARISON
*==========================================*/

.price-comparison{

    background:#fff;

    padding:120px 80px 140px;

}

.price-comparison-inner{

    max-width:1600px;

    margin:0 auto;

}


/*==============================*
*Heading
*==============================*/

.price-comparison-heading{

    margin-bottom:60px;

}

.price-comparison-heading h2{

    font-size:64px;

    font-weight:700;

    line-height:1.1;

    color:#111;

    margin:0 0 0;

}

.price-comparison-heading p{

    font-size:18px;

    line-height:1.9;

    color:#666;

    margin:0;

}


/*==============================*
*Table
*==============================*/

.price-table-wrap{

    width:100%;

    overflow-x:auto;

}

.price-table{

    width:100%;

    border-collapse:collapse;

    table-layout:fixed;

    color:#111;

    background:#fff;

}

.price-table th,
.price-table td{

    padding:24px 24px;

    border-bottom:1px solid #e5e5e5;

    text-align:center;

    font-size:17px;

    line-height:1.5;

}

.price-table thead th{

    padding:26px 20px;

    font-size:22px;

    font-weight:700;

    border-bottom:1px solid #cfcfcf;

}

.price-table thead th:first-child{

    width:34%;

}

.price-table tbody th{

    width:34%;

    text-align:left;

    font-weight:400;

    font-size:17px;

}

.price-table tbody td{

    font-weight:400;

}


/*==============================*
*Price Row
*==============================*/

.price-table .price-row th,
.price-table .price-row td{

    padding-top:28px;

    padding-bottom:28px;

    font-size:21px;

    font-weight:600;

}

.price-table .price-row td{

    font-size:23px;

}


/*==============================*
*Black Dot
*==============================*/

.table-dot{

    display:inline-block;

    font-size:22px;

    line-height:1;

    color:#111;

}


/*==============================*
*Enterprise
*==============================*/

.price-table thead th:last-child{

    background:#f7f8fc;

}

.price-table tbody td:last-child{

    background:#f7f8fc;

}


/*==============================*
*Tablet
*==============================*/

@media(max-width:1200px){

    .price-comparison{

        padding:100px 50px 120px;

    }

    .price-comparison-heading h2{

        font-size:52px;

    }

    .price-table{

        min-width:1000px;

    }

}


/*==============================*
*Mobile
*==============================*/

@media(max-width:768px){

    .price-comparison{

        padding:90px 24px 100px;

    }

    .price-comparison-heading{

        margin-bottom:45px;

    }

    .price-comparison-heading h2{

        font-size:42px;

    }

    .price-comparison-heading p{

        font-size:15px;

    }

    .price-table{

        min-width:900px;

    }

    .price-table th,
    .price-table td{

        padding:20px 18px;

        font-size:15px;

    }

    .price-table thead th{

        font-size:18px;

    }

}

/*==========================================*
*PRICE COMPARISON
*==========================================*/

.price-comparison{

    background:#fff;

    padding:120px 80px 140px;

}

.price-comparison-inner{

    max-width:1600px;

    margin:0 auto;

}


/*==============================*
*Heading
*==============================*/

.price-comparison-heading{

    margin-bottom:60px;

}

.price-comparison-heading h2{

    font-size:64px;

    font-weight:700;

    line-height:1.1;

    color:#111;

    margin:0 0 0;

}

.price-comparison-heading p{

    font-size:18px;

    line-height:1.9;

    color:#666;

    margin:0;

}


/*==============================*
*Table
*==============================*/

.price-table-wrap{

    width:100%;

    overflow-x:auto;

}

.price-table{

    width:100%;

    border-collapse:collapse;

    table-layout:fixed;

    color:#111;

    background:#fff;

}

.price-table th,
.price-table td{

    padding:24px 24px;

    border-bottom:1px solid #e5e5e5;

    text-align:center;

    font-size:17px;

    line-height:1.5;

}

.price-table thead th{

    padding:26px 20px;

    font-size:22px;

    font-weight:700;

    border-bottom:1px solid #cfcfcf;

}

.price-table thead th:first-child{

    width:34%;

}

.price-table tbody th{

    width:34%;

    text-align:left;

    font-weight:400;

    font-size:17px;

}

.price-table tbody td{

    font-weight:400;

}


/*==============================*
*Price Row
*==============================*/

.price-table .price-row th,
.price-table .price-row td{

    padding-top:28px;

    padding-bottom:28px;

    font-size:21px;

    font-weight:600;

}

.price-table .price-row td{

    font-size:23px;

}


/*==============================*
*Black Dot
*==============================*/

.table-dot{

    display:inline-block;

    font-size:22px;

    line-height:1;

    color:#111;

}


/*==============================*
*Enterprise
*==============================*/

.price-table thead th:last-child{

    background:#f7f8fc;

}

.price-table tbody td:last-child{

    background:#f7f8fc;

}


/*==============================*
*Tablet
*==============================*/

@media(max-width:1200px){

    .price-comparison{

        padding:100px 50px 120px;

    }

    .price-comparison-heading h2{

        font-size:52px;

    }

    .price-table{

        min-width:1000px;

    }

}


/*==============================*
*Mobile
*==============================*/

@media(max-width:768px){

    .price-comparison{

        padding:90px 24px 100px;

    }

    .price-comparison-heading{

        margin-bottom:45px;

    }

    .price-comparison-heading h2{

        font-size:42px;

    }

    .price-comparison-heading p{

        font-size:15px;

    }

    .price-table{

        min-width:900px;

    }

    .price-table th,
    .price-table td{

        padding:20px 18px;

        font-size:15px;

    }

    .price-table thead th{

        font-size:18px;

    }

}

/*==========================================*
* APPLICATION CTA
*==========================================*/

.vault-apply{

    background:#fff;

    padding:140px 80px 160px;

    text-align:center;

}

.vault-apply-inner{

    max-width:1200px;

    margin:0 auto;

}

/*==============================*
* Label
*==============================*/

.vault-apply-label{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:28px;

    margin-bottom:42px;

    font-size:15px;

    font-weight:600;

    letter-spacing:.42em;

    color:#111;

}

.vault-apply-label span{

    width:130px;

    height:1px;

    background:#111;

}

/*==============================*
* Heading
*==============================*/

.vault-apply h2{

    margin:0 0 28px;

    font-size:64px;

    line-height:1.2;

    font-weight:700;

    letter-spacing:-0.03em;

    color:#111;

}

/*==============================*
* Description
*==============================*/

.vault-apply p{

    margin:0 0 58px;

    font-size:20px;

    line-height:1.9;

    color:#777;

}

/*==============================*
* Application Button
*==============================*/

.vault-apply-button{

    display:flex;

    align-items:center;

    width:680px;

    max-width:100%;

    height:150px;

    margin:0 auto;

    padding:0 32px 0 48px;

    box-sizing:border-box;

    background:#111;

    border-radius:999px;

    color:#fff;

    text-decoration:none;

    box-shadow:
        0 20px 45px rgba(0,0,0,.14);

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}

/*==============================*
* Card Icon
*==============================*/

.vault-apply-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:70px;

    flex-shrink:0;

}

.vault-apply-icon svg{

    width:42px;

    height:42px;

    fill:none;

    stroke:#fff;

    stroke-width:1.7;

    stroke-linecap:round;

    stroke-linejoin:round;

}

/*==============================*
* Divider
*==============================*/

.vault-apply-divider{

    width:1px;

    height:58px;

    margin-left:28px;

    margin-right:48px;

    background:rgba(255,255,255,.35);

}

/*==============================*
* Button Text
*==============================*/

.vault-apply-text{

    flex:1;

    text-align:left;

    font-size:30px;

    font-weight:600;

    letter-spacing:.04em;

    white-space:nowrap;

}

/*==============================*
* Arrow
*==============================*/

.vault-apply-arrow{

    display:flex;

    align-items:center;

    justify-content:center;

    width:72px;

    height:72px;

    flex-shrink:0;

    border-radius:50%;

    background:#fff;

    color:#111;

    font-size:38px;

    font-weight:300;

    line-height:1;

}

/*==============================*
* Hover
*==============================*/

.vault-apply-button:hover{

    transform:translateY(-4px);

    box-shadow:
        0 28px 55px rgba(0,0,0,.20);

}

/*==============================*
* Tablet
*==============================*/

@media(max-width:900px){

    .vault-apply{

        padding:120px 50px 140px;

    }

    .vault-apply h2{

        font-size:52px;

    }

    .vault-apply-button{

        height:130px;

    }

    .vault-apply-text{

        font-size:26px;

    }

}

/*==============================*
* Mobile
*==============================*/

@media(max-width:768px){

    .vault-apply{

        padding:90px 24px 110px;

    }

    .vault-apply-label{

        gap:15px;

        font-size:12px;

        letter-spacing:.3em;

    }

    .vault-apply-label span{

        width:55px;

    }

    .vault-apply h2{

        font-size:38px;

        line-height:1.3;

        margin-bottom:22px;

    }

    .vault-apply p{

        font-size:16px;

        margin-bottom:42px;

    }

    .vault-apply-button{

        height:100px;

        padding:0 18px 0 24px;

    }

    .vault-apply-icon{

        width:45px;

    }

    .vault-apply-icon svg{

        width:30px;

        height:30px;

    }

    .vault-apply-divider{

        height:42px;

        margin-left:15px;

        margin-right:20px;

    }

    .vault-apply-text{

        font-size:18px;

        letter-spacing:0;

    }

    .vault-apply-arrow{

        width:52px;

        height:52px;

        font-size:28px;

    }

}