/* font-family: "Inter", sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

* {
    box-sizing:border-box;
    margin:0;
    padding:0;
}

.d-none {
    display: none !important;
}

body {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    color:rgba(37, 37, 37,0.6);
    background:#f7f7f5;
    font-size: 22px;
    line-height: 150%;
}

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

.container {
    max-width: 100%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

@media (min-width: 576px){
.container { max-width: 540px; }
}

@media (min-width: 768px){
.container { max-width: 720px; }
}

@media (min-width: 992px){
.container { max-width: 960px; }
}

@media (min-width: 1200px){
.container { max-width: 1170px; }
}

@media (min-width: 1400px){
.container { max-width: 1300px; }
}

@media (min-width: 1800px){
.container { max-width: 1700px; }
}

@media (min-width: 1500px){
.container { max-width: 1400px; }
}

@media (min-width: 1600px){
.container { max-width: 1500px; }
}

@media (min-width: 1700px){
.container { max-width: 1600px; }
}

/* ---------- HEADER ---------- */
header {
    display:flex;
    align-items:center;
    justify-content:center;
    padding:30px 0;
    border-bottom:1px solid #e4e4e4;
    background:#ffffff;
    position:relative;
    z-index:5;
}

/* ---------- HERO (background image) ---------- */
.hero {
    position:relative;
    padding:130px 0 40px;
}
.hero:before{
    position: absolute;
    content: "";
    left: -200px;
    top: -60px;
    width: 800px;
    height: 485px;
    background: url('images/hero-left-shape.webp') no-repeat;
    background-size: 100% 100%;
    mix-blend-mode: darken;
}
.hero:after{
    position: absolute;
    content: "";
    right: 0;
    top: 50%;
    width: 208px;
    height: 390px;
    background: url('images/hero-right-shape.webp') no-repeat;
    background-size: 100% 100%;
    mix-blend-mode: darken;
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
}
.hero-logo {
    text-align:center;
    margin-bottom:30px;
}

.hero-logo * {
    max-width: 100%;
}

.hero-inner {
    max-width:945px;
    margin:0 auto;
    position:relative;
    z-index:3;
}
.eyebrow {
    font-family: "Inter", sans-serif;
    font-weight:400;
    font-size:24px;
    line-height:142%;
    letter-spacing:1%;
    color:#252525;
    text-align: center;
    margin-bottom:60px;
}
.hero h1{
    font-size:clamp(52px,9vw,96px);
    line-height:0.95;
    font-weight:800;
    letter-spacing:-1px;
    margin-bottom:22px;
}
.hero p.sub {
    font-size:22px;
    line-height:150%;
    color:rgba(37,37,37,0.6);
    max-width:500px;
    margin:0 auto 65px;
    text-align: center;
}

/* .email-form {
    max-width:460px;
    margin:0 auto;
} */

.email-form form {
    position: relative;
    display:flex;
    align-items:center;
}
.email-form input {
    width: 100%;
    height:80px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
    background:#ffffff;
    border:1px solid #DEDEDE;
    padding: 6px 80px 6px 60px;
    box-shadow:0 1px 2px rgba(0,0,0,0.03);
    outline:none;
    color:#252525;
    border-radius:17px;
    -webkit-border-radius:17px;
    -moz-border-radius:17px;
    -ms-border-radius:17px;
    -o-border-radius:17px;
}

.email-form input::placeholder {
    color:rgba(0,0,0,0.4);
}

.email-form form .search-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    z-index: 9;
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
}
.email-form button {
    position:absolute;
    right:12px;
    top:50%;
    width:56px;
    height:56px;
    min-width:56px;
    border-radius:50%;
    border:none;
    background:#252525;
    color:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transform:translate(0, -50%);
    -webkit-transform:translate(0, -50%);
    -moz-transform:translate(0, -50%);
    -ms-transform:translate(0, -50%);
    -o-transform:translate(0, -50%);
}

.form-note {
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size:16px;
    line-height: 150%;
    color:rgba(0,0,0,0.4);
    margin-top:12px;
}
.form-status {
    font-size:12px;
    margin-top:10px;
    min-height:16px;
    color:#2f7a4f;
}
.form-status.error {
    color:#b3413d;
}
.form-status.success {
    color:#2f7a4f;
}

.socials {
    display:flex;
    justify-content:center;
    gap:12px;
    margin-top:30px;
}
.socials a {
    width:64px;
    height:64px;
    background: rgba(0, 0, 0, 0.004);
    border: 1px solid rgba(0, 0, 0, 0.07);
    color: #252525;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    -webkit-border-radius:12px;
    -moz-border-radius:12px;
    -ms-border-radius:12px;
    -o-border-radius:12px;
}
.socials a:hover {
    background:#252525;
    color:#ffffff;
    border-color:#252525;
}

/* ---------- FEATURES ---------- */
.features-section {
    padding-top: 40px;
    padding-bottom: 70px;
}

.features-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -30px;
}

.features-list > * {
    flex: 0 0 auto;
    max-width: 100%;
    width: 25%;
    padding: 0 30px;
    margin-bottom: 40px;
    border-right: 1px solid rgba(0,0,0,0.18);
}

.features-list > *:nth-child(4n),
.features-list > *:last-child {
    border-right:none;
}

.features-list .feature {
    position: relative;
    padding: 0 0 0 115px;
    min-height: 100px;
}
.features-list .feature .feature-icon {
    position: absolute;
    left: 0;
    top: 0;
    width:100px;
    height:100px;
    border-radius:8px;
    border:1px solid #ECE9E4;
    display:flex;
    align-items:center;
    justify-content:center;
    background: #ffffff;
}

.features-list .feature h3{
    font-family: 'Inter', sans-serif;
    font-weight:600;
    font-size:22px;
    line-height: 125%;
    color: #252525;
    margin-bottom:15px;
}
.features-list .feature p{
    font-size:18px;
    line-height: 135%;
    color:rgba(37, 37, 37,0.6);
}

/* ---------- FOOTER ---------- */
footer {
    position:relative;
    overflow:hidden;
    background:#252525;
    color:#ffffff;
    text-align:center;
    padding:100px 0 135px;
}
footer:before {
    position: absolute;
    content: "";
    right: 0;
    top: 0;
    width: 205px;
    height: 100%;
    background: url('images/footer-bg.webp') no-repeat;
    background-size: 100% 100%;
    mix-blend-mode: color-dodge;
}

footer .f-logo {
    width: 200px;
    margin: 0 auto 35px;
}

footer .f-detail {
    max-width: 395px;
    width: 100%;
    margin: 0 auto 70px;
}

footer p{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size:18px;
    line-height: 150%;
    letter-spacing:-1%;
    color:rgba(255,255,255,0.6);
}
footer .socials a {
    border-color:#3a3a3a;
    background:rgba(224, 213, 200,0.1);
    color:#ffffff;
    width: 50px;
    height: 50px;
    border-radius: 9px;
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    -ms-border-radius: 9px;
    -o-border-radius: 9px;
}
footer .socials a:hover {
    background:#ffffff;
    color:#171717;
}
footer .socials {
    margin-top:26px;
}

.footer-bubble {
    position:absolute;
    border-radius:50%;
    border:1px solid rgba(255,255,255,0.18);
    background:radial-gradient(circle at 32% 28%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.02) 45%, rgba(255,255,255,0) 60%);
}

@media (max-width: 1699px) {
.features-list .feature { padding-left: 90px; min-height: 75px; }
.features-list .feature .feature-icon { width: 75px; height: 75px; }
}

@media (max-width: 1599px) {
.features-list .feature h3 { font-size: 20px; }
}

@media (max-width: 1499px) {
.hero-inner { max-width: 800px; }
}

@media (max-width: 1399px) {
.hero-inner { max-width: 700px; }
.eyebrow { margin-bottom: 40px; }
.hero p.sub { margin-bottom: 40px; }
.features-section { padding-top: 30px; padding-bottom: 50px; }
.features-list > * { width: 50%; }
.features-list > *:nth-child(2n) { border-right: none; }

footer { padding: 70px 0 100px; }
footer .f-detail { margin-bottom: 50px; }
}

@media (max-width: 1199px) {
.hero { padding: 100px 0 30px; }
.hero:before { width: 650px; height: 325px; top: -40px; }
.hero:after { width: 170px; height: 250px; }
.hero-inner { max-width: 700px; }
.eyebrow { font-size: 20px; margin-bottom: 20px; }
.hero-logo * { width: 500px; height: auto; }
.hero p.sub { font-size: 18px; margin-bottom: 20px; }
.features-section { padding-top: 30px; padding-bottom: 35px; }
.features-list > * { width: 50%; }
.features-list > *:nth-child(2n) { border-right: none; }
.email-form input { height: 65px; }
.email-form button { width: 48px; height: 48px; min-width: 48px; }
.socials a { width: 50px; height: 50px; }

footer { padding: 50px 0 75px; }
footer .f-detail { margin-bottom: 35px; }
}

@media (max-width:991px){
.hero:before { width: 500px; height: 250px; left: -125px; }
.features-list { margin: 0 -15px; }
.features-list > * { padding: 0 15px; }
}
@media (max-width:767px){
/* .hero { padding-top: 70px; } */
.hero:after { width: 100px; height: 150px; }
.hero-logo * { max-width: 350px; width: 100%; }
.hero:before { width: 350px; height: 200px; top: -20px; left: -100px; }
.features-list .feature { padding: 90px 0 0; min-height: initial; }
.email-form input { padding: 6px 70px 6px 50px; }
footer { padding: 50px 0; }
footer:before { width: 150px; height: 250px; }
}

@media (max-width:575px){
.features-list > * { width: 100%; border-right: none; }
}