html {
    background-color: #fff;
    overflow-x: hidden;
}

header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}

header.scrolled {
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);
}

main {
    padding-top: 90px;
}

.container {
    max-width: 1312px;
    width: 100%;
    margin: 0 auto;
}

.header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 56px;
    padding: 16px 0;
}

.nav-menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 4px;
    gap: 4px;
    background: #F8FAFC;
    border-radius: 59px;
}

.nav-menu a {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 24px;
    border-radius: 26px;
}

.nav-menu a:first-child {
    background: #29293A;
    color: #fff;
}

.white-text {
    color: #FFFFFF !important;
}

.prime-text {
    color: #6366f1 !important;
}

.btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 32px;
    gap: 8px;
    border-radius: 26px;
    flex: 0 0 auto;
}

.btn.trans {
    border: 1px solid #212223;
}

.btn.purp {
    background: #DFE0FB;
    color: #6366f1;
}

.btn.white {
    background: #fff;
    color: #29293A;
}

.btn.black {
    background: #29293A;
    color: #fff;
}

.btn.prime {
    background: #6366F1;
    box-shadow: 0px 32px 13px rgba(99, 102, 241, 0.04), 0px 18px 11px rgba(99, 102, 241, 0.13), 0px 8px 8px rgba(99, 102, 241, 0.22), 0px 2px 4px rgba(99, 102, 241, 0.26);
    color: #fff;
}

.main-section {
    height: 832px;
    display: flex;
    align-items: center;
    background-image: url('../images/bg-frame.webp');
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    z-index: 0;

}

.wrapper-main {
    display: flex;
    gap: 64px;
    align-items: center;
    justify-content: space-between;
}

.wrapper-main > div {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 532px;
}

.section {
    padding-top: 120px;
}

.with-angry-emoji {
    position: relative;
}

.with-angry-emoji::before {
    content: '';
    position: absolute;
    top: -50px;
    left: 0;
    width: 120px;
    height: 120px;
    background-image: url('../images/angry-emoji.webp');
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 3;
    filter: drop-shadow(0px 108px 65px rgba(31, 25, 62, 0.03)) drop-shadow(0px 48px 48px rgba(31, 25, 62, 0.05)) drop-shadow(0px 12px 26px rgba(31, 25, 62, 0.06));
}

.header-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    margin-bottom: 32px;
    text-align: center;
}

.icon-micro {
    display: block;
    border-radius: 16px;
    width: 56px;
    height: 56px;
    background: #DFE0FB;
    background-image: url("data:image/svg+xml,%3Csvg width='33' height='32' viewBox='0 0 33 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 13.65V15.35C9 19.57 12.43 23 16.65 23M16.65 23C20.87 23 24.3 19.57 24.3 15.35V13.65M16.65 23V26M15.26 10.43C16.16 10.1 17.14 10.1 18.04 10.43M15.85 12.55C16.38 12.41 16.93 12.41 17.46 12.55M16.65 19.5C18.86 19.5 20.65 17.71 20.65 15.5V10C20.65 7.79 18.86 6 16.65 6C14.44 6 12.65 7.79 12.65 10V15.5C12.65 17.71 14.44 19.5 16.65 19.5Z' stroke='%236366F1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 32px 32px;
    background-position: center;
    flex: 0 0 auto;
}
.icon-table {
    display: block;
    border-radius: 16px;
    width: 56px;
    height: 56px;
    background: #DFE0FB;
    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%3Cpath d='M22 8.27V4.23C22 2.64 21.36 2 19.77 2H15.73C14.14 2 13.5 2.64 13.5 4.23V8.27C13.5 9.86 14.14 10.5 15.73 10.5H19.77C21.36 10.5 22 9.86 22 8.27Z' stroke='%236366F1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.5 8.52V3.98C10.5 2.57 9.86 2 8.27 2H4.23C2.64 2 2 2.57 2 3.98V8.51C2 9.93 2.64 10.49 4.23 10.49H8.27C9.86 10.5 10.5 9.93 10.5 8.52Z' stroke='%236366F1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.5 19.77V15.73C10.5 14.14 9.86 13.5 8.27 13.5H4.23C2.64 13.5 2 14.14 2 15.73V19.77C2 21.36 2.64 22 4.23 22H8.27C9.86 22 10.5 21.36 10.5 19.77Z' stroke='%236366F1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14.5 17.5H20.5' stroke='%236366F1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M17.5 20.5V14.5' stroke='%236366F1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 24px 24px;
    background-position: center;
    flex: 0 0 auto;
}
.icon-result {
    display: block;
    border-radius: 16px;
    width: 56px;
    height: 56px;
    background: #DFE0FB;
    background-image: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.334 13V9C22.334 4 20.334 2 15.334 2H9.33398C4.33398 2 2.33398 4 2.33398 9V15C2.33398 20 4.33398 22 9.33398 22H13.334M16.334 19.43L17.914 21L21.334 17M7.33398 10.5V13.5M12.334 10.5V13.5M17.334 10.5V13.5' stroke='%236366F1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 24px 24px;
    background-position: center;
    flex: 0 0 auto;
}

.grid-3-col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: space-between;
}

.section-1 .grid-3-col,
.section-2 .grid-3-col {
    gap: 24px;
}

.section-1 .grid-3-col > div,
.section-2 .grid-3-col > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px;
    gap: 16px;
    background: #F8FAFC;
    border-radius: 32px;
    width: 100%;
    text-align: center;
}

.section-1 .grid-3-col > div > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.logo-icon {
    display: block;
    width: 66px;
    height: 56px;
    object-fit: cover;
}

.wrapper-packages {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}

.package {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 56px 32px;
    gap: 40px;
    background: rgba(248, 250, 252, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    text-align: center;
    width: 100%;
}

.package.popular { 
    position: relative;
    background: #6366F1;
    border: 1px solid rgba(99, 102, 241, 0.2);
    box-shadow: 0px 32px 13px rgba(99, 102, 241, 0.04), 0px 18px 11px rgba(99, 102, 241, 0.13), 0px 8px 8px rgba(99, 102, 241, 0.22), 0px 2px 4px rgba(99, 102, 241, 0.26);
}

.package-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.emoji-icon {
    display: block;
    width: 56px;
    height: 56px;
}

.list-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.popular-block {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 24px;
    position: absolute;
    width: fit-content;
    left: 50%;
    transform: translateX(-50%);
    top: -23px;
    background: #29293A;
    border-radius: 32px;
    z-index: 2;
}

.wrapper-test-drive {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80px 0px 56px;
    gap: 24px;
    isolation: isolate;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%), linear-gradient(180deg, #F8FAFC 0%, rgba(248, 250, 252, 0) 100%);
    border-radius: 56px 56px 0px 0px;
}

.test-drive-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    box-shadow: 0px 108px 65px rgba(31, 25, 62, 0.03), 0px 48px 48px rgba(31, 25, 62, 0.05), 0px 12px 26px rgba(31, 25, 62, 0.06);
    border-radius: 32px; 
}

.test-drive-head {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    padding: 24px 56px;
    gap: 16px;
    background: #F8FAFC;
    border-radius: 32px 32px 0 0;
    border-bottom: 1px solid rgba(229, 231, 235, 1)
}

.test-drive-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px 56px;
    gap: 16px;
}

.tags-style {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 4px;
    gap: 4px;
    background: #F8FAFC;
    border-radius: 59px;
}

.tags-style > div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 6px 24px;
    gap: 8px;
    border-radius: 26px;
    color: #A1A2B1;
}

.tags-style > div:first-child {
    background: #29293A;
    color: #fff;
}

.text-message {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 24px;
    gap: 4px;
    background: #F8FAFC;
    border: 1px solid #E5E7EB;
    border-radius: 32px;
}

.test-drive-bottom {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    padding: 0px 0px 16px;
    gap: 8px;
}

.test-drive-bottom > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 12px 24px;
    background: #F8FAFC;
    border: 1px solid #E5E7EB;
    border-radius: 32px;
}

.test-drive-bottom > div:last-child {
    background: #29293A;
    color: #fff;
    border: unset;
}

.grid-2-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.grid-2-col > img {
    display: block;
    border-radius: 30px;
    width: 100%;
    height: auto;
    border: 1px solid rgba(237, 237, 243, 1);
}

.section-3 {
    background-image: url('../images/bg-frame-rotate.webp');
    background-repeat: no-repeat;
    background-size: cover;
}

.section-5 {
    padding-bottom: 120px;
    background-image: url('../images/bg-frame-rotate.webp');
    background-repeat: no-repeat;
    background-size: cover;
}

/* footer */
footer {
    background-color: #f8fafc;
}

.footer {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 48px 0;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
}

.footer-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-links {
    display: flex;
    gap: 32px;
    align-items: center;
}

.flex-btns {
    display: flex;
    gap: 16px;
    align-items: center;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding-top: 32px;
    border-top: 1px solid rgba(41, 41, 58, 0.1);
    text-align: center;
}

.social {
    display: block;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(41, 41, 58, 0.2);
    border-radius: 100%;
}

.social.social-x {
    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%3Cpath d='M18.2439 2.25H21.5519L14.3249 10.51L22.8269 21.75H16.1699L10.9559 14.933L4.98991 21.75H1.67991L9.40991 12.915L1.25391 2.25H8.07991L12.7929 8.481L18.2439 2.25ZM17.0829 19.77H18.9159L7.08391 4.126H5.11691L17.0829 19.77Z' fill='rgb(41, 41, 58)'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.social.social-inst {
    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%3Cpath d='M17.257 5.66797C16.5901 5.66797 16.0898 6.16818 16.0898 6.83512C16.0898 7.50207 16.5901 8.00228 17.257 8.00228C17.9239 8.00228 18.4242 7.50207 18.4242 6.83512C18.4242 6.16818 17.9239 5.66797 17.257 5.66797Z' fill='rgb(41, 41, 58)'/%3E%3Cpath d='M12.0047 7.16895C9.25351 7.16895 7.08594 9.41989 7.08594 12.0877C7.08594 14.7555 9.33688 17.0064 12.0047 17.0064C14.6724 17.0064 16.9234 14.7555 16.9234 12.0877C16.9234 9.41989 14.7558 7.16895 12.0047 7.16895ZM12.0047 15.2557C10.2539 15.2557 8.83667 13.8384 8.83667 12.0877C8.83667 10.3369 10.2539 8.91968 12.0047 8.91968C13.7554 8.91968 15.1727 10.3369 15.1727 12.0877C15.1727 13.8384 13.7554 15.2557 12.0047 15.2557Z' fill='rgb(41, 41, 58)'/%3E%3Cpath d='M16.0059 2H8.08588C4.66778 2 2 4.66778 2 8.00251V15.9225C2 19.2572 4.66778 21.925 8.00251 21.925H15.9225C19.2572 21.925 21.925 19.2572 21.925 15.9225V8.00251C22.0084 4.66778 19.3406 2 16.0059 2ZM20.0909 16.0059C20.0909 18.2568 18.2568 20.1743 15.9225 20.1743H8.00251C5.75157 20.1743 3.8341 18.3402 3.8341 16.0059V8.08588C3.8341 5.83494 5.6682 3.91747 8.00251 3.91747H15.9225C18.1734 3.91747 20.0909 5.75157 20.0909 8.08588V16.0059Z' fill='rgb(41, 41, 58)'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* Account style */
.head-account {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 4px;
    gap: 4px;
    background: #F8FAFC;
    border-radius: 59px;
    width: fit-content;
    margin: 0 auto 35px;
}

.head-account > * {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 24px;
    border-radius: 26px;
    color: #35374F;
}

.head-account > div {
    background: #29293A;
    color: #fff;
}

.head-account > .this-page {
    background: #FFFFFF;
    color: #35374F;
}

.block-head {
    display: flex;
    justify-content: center;
    margin-top: 26px;
    margin-bottom: 16px;
}

input[type="radio"] {
    display: none;
}
.tags-radio,
.toggler-block {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 4px;
    gap: 4px;
    background: #F8FAFC;
    border-radius: 59px;
    width: fit-content;
    margin: 0 auto;
}
.toggler-block {
    margin: 0 auto 16px;
}
.form_radio {
    width: 100%;
}
.tags-radio label {
    white-space: nowrap;
}
.tags-radio label,
.toggler-block > div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 24px;
    border-radius: 26px;
    color: #35374F;
    cursor: pointer;
}
.form_radio input[type=radio]:checked + label,
.toggler-block .select {
    background: #29293A;
    color: #fff;
}
.toggle-content {
    display: none;
}

.toggle-content.active {
    display: block;
    width: 100%;
}

.form-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-end;
}

.form-content textarea {
    display: block;
    padding: 24px;
    background: #F8FAFC;
    border: 1px solid #E5E7EB;
    border-radius: 32px;
    width: 100%;
    color: #29293A;
}

.drop-zone {
  border: 2px dashed #ccc;
  border-radius: 10px;
  padding: 30px;
  text-align: center;
  cursor: pointer;
  transition: background 0.3s;
}

.drop-zone.dragover {
    background: #DFE0FB;
    border-color: #6366f1;
}

.answer-generate {
    display: none
}

.answer-generate.active {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.example-text {
    display: block;
    padding: 24px;
    background: #F8FAFC;
    border: 1px solid #E5E7EB;
    border-radius: 32px;
    width: 100%; 
}

.example-text p {
    color: #29293A !important;
}

.account-page-wrapper {
    padding-bottom: 120px;
}

.input {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 8px;
    border-radius: 16px;
    border: 1px solid #6366f1;  
    width: 100%;
    text-align: center;
    background: #DFE0FB;
    color: #6366f1;
}

.voice-recording-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.icon-delete {
    display: block;
    width: 21px;
    height: 21px;
    background: rgba(255, 59, 48, 1);
    border-radius: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='3' viewBox='0 0 12 3' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 2.25H10.5C10.9142 2.25 11.25 1.91421 11.25 1.5C11.25 1.08579 10.9142 0.75 10.5 0.75H1C0.585786 0.75 0.25 1.08579 0.25 1.5C0.25 1.91421 0.585786 2.25 1 2.25Z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    flex: 0 0 auto;
}

.history-list-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.history {
    display: flex;
    align-items: center;
    gap: 16px;
}

.history .example-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (hover: hover) {
    .nav-menu a:hover {
        background: #35374F;
        color: #fff;
    }
    .head-account > a:hover {
        background: #35374F;
        color: #fff;
    }
    .tags-radio label:hover {
        background: #35374F;
        color: #fff;  
    }
    .toggler-block > div:hover {
        background: #35374F;
        color: #fff;   
    }
    .btn.trans:hover {
        color: #6366f1;
        border: 1px solid #6366f1;
    }
}


@media screen and (max-width: 640px) {
    .container {
        max-width: calc(100% - 32px);
        margin: 0 auto;
    }
    .nav-menu {
        display: none;
    }
    .main-section {
        height: 100%;
    }
    .wrapper-main {
        flex-direction: column;
        gap: 32px;
    }
    .grid-3-col,
    .wrapper-packages,
    .grid-2-col {
        grid-template-columns: 1fr;
    }
    .with-angry-emoji::before {
        content: '';
        top: -60px;
        width: 60px;
        height: 60px;
    }
    .section {
        padding-top: 60px;
    }
    .section-5 {
        padding-bottom: 60px;
    }
    .package.popular {
        margin-top: 24px;
    }
    .test-drive-head {
        flex-direction: column;
        padding: 12px 24px;
        gap: 8px;
        border-radius: 16px 16px 0 0;
        text-align: center;
    }
    .test-drive-block {
        border-radius: 16px;
    }
    .test-drive-bottom {
        flex-wrap: wrap;
    }
    .test-drive-bottom > div {
        padding: 6px 12px;
        border-radius: 16px;
    }
    .test-drive-content {
        padding: 0px 16px;
        gap: 16px;
    }
    .text-message {
        padding: 16px;
        border-radius: 16px;
    }
    .wrapper-test-drive {
        padding: 40px 8px 32px;
        gap: 16px;
        border-radius: 24px 24px 0px 0px;
    }
    .package {
        padding: 28px 16px;
        gap: 24px;
        border-radius: 16px;
    }
    .footer-top {
        flex-direction: column;
        align-items: flex-start
    }
    .footer-bottom {
        flex-direction: column-reverse;
    }
    .tags-radio,
    .toggler-block {
        border-radius: 24px;
    }
    .tags-radio label,
    .toggler-block > div {
        padding: 8px 12px;
        border-radius: 16px;
    }
    .head-account > * {
        padding: 12px 18px;
        border-radius: 16px;
    }
    .head-account {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        row-gap: 16px;
        border-radius: 24px;
        margin-bottom: 24px;
    }
    .head-account > div {
        width: 100%;
        grid-column: span 3;
    }
    .form-content textarea,
    .example-text {
        border-radius: 12px;
    }
    .link-home {
        display: block;
        width: 160px;
        height: auto;
    }
/*    .section-2 .grid-3-col img {
        display: block;
        width: 180px;
        height: auto;
    }*/
}