/* ==========================================
   Hero
========================================== */

.hero{

    max-width:1280px;

    margin:40px auto 80px;

    padding:70px 60px;

    background:linear-gradient(135deg,#f8fbff 0%,#eef5ff 100%);

    border-radius:28px;

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:60px;

    align-items:center;

    position:relative;

    overflow:hidden;

}

.hero::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    background:#dcecff;

    border-radius:50%;

    right:-220px;

    top:-180px;

    opacity:.45;

}

.hero::after{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    background:#dcecff;

    border-radius:50%;

    left:-120px;

    bottom:-120px;

    opacity:.35;

}

.hero-content{

    position:relative;

    z-index:2;

}

.hero-content h2{

    font-size:3.4rem;

    line-height:1.35;

    margin-bottom:24px;

    font-weight:700;

}

.hero-content p{

    color:#666;

    font-size:1.08rem;

    line-height:2;

    max-width:520px;

    margin-bottom:36px;

}

.button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:56px;

    padding:0 34px;

    background:#1565c0;

    color:#fff;

    border-radius:999px;

    text-decoration:none;

    font-weight:700;

    transition:.25s;

}

.button:hover{

    background:#0d47a1;

    transform:translateY(-2px);

}

.hero-image{

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

    z-index:2;

}

/* ==========================================
   Hero Illustration
========================================== */

.hero-illustration{

    position:relative;

    width:420px;

    height:330px;

}

.laptop{

    position:absolute;

    right:0;

    top:20px;

    width:290px;

    height:190px;

    background:#334155;

    border-radius:14px;

    padding:10px;

}

.screen{

    width:100%;

    height:100%;

    border-radius:10px;

    background:white;

    overflow:hidden;

    position:relative;

}

.screen::before{

    content:"";

    position:absolute;

    inset:18px;

    border-radius:8px;

    background:

    linear-gradient(#1565c0,#1565c0) 0 0/100% 16px no-repeat,

    repeating-linear-gradient(

        to bottom,

        #eef4ff 0,

        #eef4ff 18px,

        transparent 18px,

        transparent 38px

    );

}

.laptop::after{

    content:"";

    position:absolute;

    left:-20px;

    bottom:-12px;

    width:330px;

    height:12px;

    background:#94a3b8;

    border-radius:12px;

}

.paper{

    position:absolute;

    left:20px;

    bottom:0;

    width:120px;

    height:160px;

    background:white;

    border-radius:14px;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

}

.paper::before{

    content:"";

    position:absolute;

    left:18px;

    top:22px;

    width:84px;

    height:12px;

    background:#dbeafe;

    box-shadow:

    0 28px 0 #dbeafe,

    0 56px 0 #dbeafe,

    0 84px 0 #dbeafe;

}

.calculator{

    position:absolute;

    left:120px;

    bottom:10px;

    width:90px;

    height:130px;

    background:#1565c0;

    border-radius:16px;

}

.calculator::before{

    content:"";

    position:absolute;

    left:15px;

    top:15px;

    width:60px;

    height:22px;

    background:#dbeafe;

    border-radius:4px;

}

.keys{

    position:absolute;

    left:15px;

    top:50px;

    width:60px;

    height:60px;

    background:
    radial-gradient(circle,#fff 30%,transparent 32%);

    background-size:20px 20px;

}

/* ==========================================
   Responsive
========================================== */

@media (max-width:900px){

    .hero{

        grid-template-columns:1fr;

        padding:50px 30px;

        gap:40px;

        margin:20px 16px 60px;

        border-radius:20px;

    }

    .hero-content{

        text-align:center;

    }

    .hero-content p{

        margin:0 auto 30px;

    }

    .hero-content h2{

        font-size:2.5rem;

    }

    .hero-image{

        order:-1;

    }

    .hero-illustration{

        width:320px;

        height:250px;

    }

    .laptop{

        width:220px;

        height:145px;

    }

    .laptop::after{

        width:250px;

    }

    .paper{

        width:90px;

        height:120px;

    }

    .calculator{

        width:70px;

        height:100px;

        left:95px;

    }

}

@media (max-width:600px){

    .hero{

        padding:40px 20px;

        margin:15px 12px 40px;

    }

    .hero-content h2{

        font-size:2rem;

        line-height:1.4;

    }

    .hero-content p{

        font-size:.95rem;

    }

    .button{

        width:100%;

    }

    .hero-illustration{

        width:260px;

        height:200px;

    }

    .laptop{

        width:180px;

        height:120px;

    }

    .laptop::after{

        width:205px;

    }

    .paper{

        width:70px;

        height:100px;

        left:10px;

    }

    .calculator{

        width:55px;

        height:85px;

        left:75px;

    }

}