.hero-section {
    position: relative;
    margin: 16px;
    padding: 96px 0 76px;
    background: rgba(147, 182, 238, 0.02);
    border-radius: 24px;
    overflow: hidden;
    max-width: 1440px;
}

.hero-bg {
    position: absolute;
    inset: 0;
}

.hero-bg-image {
    position: absolute;
    left: 0;
    top: 0;
    width: 1408px;
    height: 828px;
    background-image: url('../../../assets/img/hero_bg.webp');
    background-color: linear-gradient(0deg, rgba(147, 182, 238, 0.2), rgba(147, 182, 238, 0.2));
    filter: blur(46.8px);
}

.hero-ellipse {
    position: absolute;
    left: 41.61%;
    right: -11%;
    top: -33.94%;
    bottom: 76.58%;
    background: radial-gradient(50% 50% at 50% 50%, #F04848 0%, rgba(240, 122, 72, 0.5) 100%);
    mix-blend-mode: hard-light;
    opacity: .5;
    filter: blur(250px);
    transform: matrix(0.88, -0.47, -0.47, -0.88, 0, 0);
}

.hero-title {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.hero-integrations {
    font-size: clamp(0.875rem, 0.8125rem + 0.2083vw, 1rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    color: #223F61;
    text-align: center;
    margin: 0;
}

.hero-heading {
    font-size: clamp(2.75rem, 1.625rem + 3.75vw, 5rem);
    font-size: 80px;
    line-height: 1;
    font-weight: 500;
    text-transform: capitalize;
    color: #0E1115;
    text-align: center;
    margin: 0;
    letter-spacing: -0.02em;
}

.hero-subtitle {
    font-size: clamp(1.125rem, 1.0625rem + 0.2083vw, 1.25rem);
    letter-spacing: -0.01em;
    color: rgba(14, 17, 21, 0.8);
    text-align: center;
    margin: 0;
}

.hero-cta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    padding: 8px 0;
    width: 135px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    border-radius: 8px;
}

.btn .label {
    font: 500 16px/24px 'DM Sans', sans-serif;
    letter-spacing: -0.02em;
}

.btn-primary {
    background: var(--orange);
    color: #fff;
    padding: 12px 24px;
    height: 48px;
}

.btn-primary:hover {
    background: var(--orange-dark);
}

.hero-cta-note {
    display: block;
    font: 400 12px/16px 'DM Sans', sans-serif;
    letter-spacing: -0.02em;
    color: rgba(14, 17, 21, 0.6);
}

.hero-textarea {
    margin: 0 auto;
    width: 740px;
    height: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 22px;
}

.hero-card {
    width: 740px;
    height: 144px;
    padding: 5px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.64) 0%, rgba(255, 255, 255, 0.16) 100%);
}

.hero-card-inner {
    position: relative;
    width: 100%;
    height: 132px;
    background: #F9FAFC;
    border-radius: 16px;
    padding: 16px 24px;
    box-sizing: border-box;
}

.hero-card-inner textarea {
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%;
    font: 400 18px/24px 'DM Sans', sans-serif;
    letter-spacing: -0.01em;
    color: #0E1115;
    border: none;
    resize: none;
    outline: none;
    background: transparent;
}

.hero-card-text {
    position: relative;
    z-index: 0;
    width: 600px;
    height: 24px;
    font: 400 18px/24px 'DM Sans', sans-serif;
    letter-spacing: -0.01em;
    color: #0E1115;
}

.hero-card-btn {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--orange);
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
}

.hero-card-btn:hover {
    background: var(--orange-dark);
}

.hero-card-btn svg {
    width: 20px;
    height: 20px;
}

.hero-pills {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    align-content: center;
    gap: 8px;
}

.hero-pill {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    height: 36px;
    padding: 6px 14px 6px 10px;
    border-radius: 43px;
    background: rgba(168, 179, 191, 0.3);
    border: 1px solid rgba(168, 179, 191, 0.2);
    mix-blend-mode: plus-darker;
    cursor: pointer;
}

.pill-icon {
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_822_1027)'%3E%3Cpath d='M16 18C16.5304 18 17.0391 18.2107 17.4142 18.5858C17.7893 18.9609 18 19.4696 18 20C18 19.4696 18.2107 18.9609 18.5858 18.5858C18.9609 18.2107 19.4696 18 20 18C19.4696 18 18.9609 17.7893 18.5858 17.4142C18.2107 17.0391 18 16.5304 18 16C18 16.5304 17.7893 17.0391 17.4142 17.4142C17.0391 17.7893 16.5304 18 16 18ZM16 6C16.5304 6 17.0391 6.21071 17.4142 6.58579C17.7893 6.96086 18 7.46957 18 8C18 7.46957 18.2107 6.96086 18.5858 6.58579C18.9609 6.21071 19.4696 6 20 6C19.4696 6 18.9609 5.78929 18.5858 5.41421C18.2107 5.03914 18 4.53043 18 4C18 4.53043 17.7893 5.03914 17.4142 5.41421C17.0391 5.78929 16.5304 6 16 6ZM9 18C9 16.4087 9.63214 14.8826 10.7574 13.7574C11.8826 12.6321 13.4087 12 15 12C13.4087 12 11.8826 11.3679 10.7574 10.2426C9.63214 9.11742 9 7.5913 9 6C9 7.5913 8.36786 9.11742 7.24264 10.2426C6.11742 11.3679 4.5913 12 3 12C4.5913 12 6.11742 12.6321 7.24264 13.7574C8.36786 14.8826 9 16.4087 9 18Z' fill='%23223F61' stroke='%23223F61' stroke-width='0.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_822_1027'%3E%3Crect width='24' height='24' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.pill-text {
    font: 500 14px/20px 'Inter', sans-serif;
    color: #223F61;
}

@media (min-width:1440px) {
    .hero-section {
        margin: 16px auto 0;
    }

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

@media (max-width:1440px) {
    .hero-section {
        margin: 16px;
    }
}

@media (min-width: 1200px) {
    .hero-title {
        max-width: 930px;
        margin: 0 auto;
    }
}

@media (max-width: 1200px) {
    .hero-section {
        padding: 118px 20px 40px;
    }

    .hero {
        height: auto;
        margin: 16px;
    }

    .hero-title {
        position: relative;
        left: auto;
        top: auto;
        width: auto;
        height: auto;
        padding: 64px 16px 24px;
    }

    .hero-textarea {
        position: relative;
        left: auto;
        top: auto;
        width: auto;
        height: auto;
        padding: 0 16px 48px;
    }

    .hero-card,
    .hero-pills {
        width: 100%;
    }

    .hero-bg-image {
        width: 100%;
        height: 100%;
    }
}

@media (max-width: 480px) {
    .hero-title {
        padding: 0;
    }

    .hero-textarea {
        margin-top: 48px;
        padding: 0;
    }

    .hero-heading {
        font-size: 44px;
        margin: 0 -20px;
    }
    .hero-integrations {
        margin: 0 -20px;
    }
}