:root {
    /* BRAND COLORS */
    --blue-01: #0C518F;
    --blue-02: #0E5DA5;
    --blue-03: #1278D4;
    --blue-04: #439EEF;

    --purple-01: #5B46B9;

    --light-blue-01: #B5C8E3;
    --light-blue-02: #DAE3F1;

    --dark-blue-01: #010713;

    /* NEUTRAL COLORS */
    --white: #ffffff;
    --neutral-01: #fafafa;
    --neutral-02: #f2f2f2;
    --neutral-03: #e5e5e5;
    --neutral-04: #d9d9d9;
    --neutral-05: #cccccc;
    --neutral-06: #bfbfbf;
    --neutral-07: #b3b3b3;
    --neutral-08: #a5a5a5;
    --neutral-09: #999999;
    --neutral-10: #8d8d8d;
    --neutral-11: #808080;
    --neutral-12: #737373;
    --neutral-13: #666666;
    --neutral-14: #595959;
    --neutral-15: #4d4d4d;
    --neutral-16: #404040;
    --neutral-17: #343434;
    --neutral-18: #272727;
    --neutral-19: #1a1a1a;
    --neutral-20: #0d0d0d;
    --black: #000000;

    /* SEMANTIC COLORS */
    --red-00: #E66569;
    --red-01: #df3a3f;
    --red-02: #b92c31;
    --red-03: #951d21;
    --red-04: #6b1518;

    --yellow-01: #e5b800;
    --yellow-02: #b28f00;
    --yellow-03: #806600;
    --yellow-04: #665100;

    --green-01: #2eb875;
    --green-02: #29a368;
    --green-03: #248f5b;
    --green-04: #1a6641;


    /* FONT WEIGHT */
    --light: 300;
    --regular: 400;
    --medium: 500;
    --semiBold: 600;
    --bold: 700;
    --extraBold: 800;

    /* FILTERS */
    --filter-black: brightness(0) saturate(100%);
    --filter-white: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(340deg) brightness(104%) contrast(104%);
    --filter-neutral-04: brightness(0) saturate(100%) invert(96%) sepia(0%) saturate(454%) hue-rotate(178deg) brightness(93%) contrast(89%);
    --filter-neutral-05: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(1282%) hue-rotate(231deg) brightness(84%) contrast(88%);
    --filter-neutral-06: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(4414%) hue-rotate(64deg) brightness(82%) contrast(77%);
    --filter-neutral-07: brightness(0) saturate(100%) invert(81%) sepia(5%) saturate(0%) hue-rotate(177deg) brightness(91%) contrast(82%);
    --filter-neutral-10: brightness(0) saturate(100%) invert(62%) sepia(0%) saturate(5826%) hue-rotate(177deg) brightness(93%) contrast(70%);
    --filter-neutral-12: brightness(0) saturate(100%) invert(45%) sepia(4%) saturate(9%) hue-rotate(314deg) brightness(99%) contrast(87%);
    --filter-neutral-19: brightness(0) saturate(100%) invert(6%) sepia(10%) saturate(1492%) hue-rotate(106deg) brightness(92%) contrast(96%);


    --filter-blue: brightness(0) saturate(100%) invert(69%) sepia(20%) saturate(7027%) hue-rotate(186deg) brightness(106%) contrast(89%);
}

/*-----------------------------------*\
  #DESIGN
\*-----------------------------------*/
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: var(--neutral-08);
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: var(--medium);
    font-style: normal;
    font-size: 14px;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--dark-blue-01);
    overflow-x: hidden;
}

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

button {
    cursor: pointer;
    border: 0;
    background: transparent;
    font: inherit;
}

img,
video {
    display: block;
    max-width: 100%;
}

main {
    overflow: hidden;
}


.icon12 {
    width: 12px;
    height: 12px;
}

.icon16 {
    width: 16px;
    height: 16px;
}

.icon18 {
    width: 18px;
    height: 18px;
}

.icon20 {
    width: 20px;
    height: 20px;
}

.icon24 {
    width: 24px;
    height: 24px;
}

.icon28 {
    width: 28px;
    height: 28px;
}

.icon32 {
    width: 32px;
    height: 32px;
}

.icon40 {
    width: 40px;
    height: 40px;
}

/*-----------------------------------*\
  #DESIGN
\*-----------------------------------*/
.main-button {
    font-size: 16px;
    color: var(--neutral-02);
    transition: 0.5s;
    padding: 16px;
    border-radius: 12px;
    background-color: var(--blue-02);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.main-button.padding32 {
    padding: 16px 32px;

}

.main-button:is(:hover, :focus-visible, :focus-within) {
    font-weight: var(--semiBold);
    scale: 1.05;
    color: var(--dark-blue-01);
    background-color: #E7F4FD;
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.45);
    border: solid 1px var(--blue-04);

}

.main-button.white {
    color: var(--dark-blue-01);
    background-color: var(--neutral-02);
}

.main-button.white:is(:hover, :focus-visible, :focus-within) {
    color: var(--neutral-01);
    background-color: var(--blue-02);
    box-shadow: 0 0 14px rgba(14, 93, 165, 0.45);
    border: solid 1px var(--blue-04);
}

.main-button.outline {
    color: var(--neutral-03);
    background-color: transparent;
    border: solid 1px var(--neutral-03);
    max-width: 180px;
    color: var(--neutral-03, #E5E5E5);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    /* 14px */
}


.main-button.outline:is(:hover, :focus-visible, :focus-within) {
    color: var(--neutral-01);
    background-color: rgba(141, 141, 141, 0.1);
    box-shadow: 0 0 14px rgba(14, 93, 165, 0.7);
    border: solid 1px var(--blue-03);
}


.circle-purple {
    width: 200px;
    height: 200px;
    aspect-ratio: 1/1;
    position: absolute;
    border-radius: 9999px;
    background: rgba(91, 70, 185, 0.50);
    filter: blur(60px);
    z-index: -1;
}

.circle-blue {
    width: 200px;
    height: 200px;
    aspect-ratio: 1/1;
    position: absolute;
    border-radius: 9999px;
    background: rgba(18, 120, 212, 0.30);
    filter: blur(60px);
    z-index: -1;
}



.section-title {
    color: #A4BBDD;
    text-align: center;
    text-shadow: 0 4px 16px rgba(255, 255, 255, 0.25);
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 2%;
    display: flex;
    padding: 12px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 100px;
    border: 1px solid #131F31;
}


.section-main-title {
    text-align: center;
    text-shadow: 0 4px 20px rgba(234, 234, 234, 0.25);
    font-size: 56px;
    font-weight: 500;
    line-height: 64px;
    letter-spacing: -0.56px;
    background: linear-gradient(270deg, #FFF 28.51%, rgba(236, 236, 236, 0.40) 93.99%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    mix-blend-mode: lighten;
}

.section-main-title-blue {
    background: linear-gradient(270deg, #3D9DE5 100%, rgba(177, 218, 248, 0.40) 10%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 56px;
    font-weight: 500;
    line-height: 64px;
    letter-spacing: -1%;
}

.section-title-descripton {
    color: rgba(236, 236, 236, 0.65);
    text-align: center;
    font-feature-settings: 'liga' off, 'clig' off;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin-top: 8px;
}

/*-----------------------------------*\
  #TOPBAR
\*-----------------------------------*/
.account-topbar {
    width: 100%;
    min-height: 38px;
    padding: 12px 56px 12px 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10030;
    background: var(--purple-01);
}

.account-topbar__content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.account-topbar__message,
.account-topbar__link {
    color: var(--neutral-02);
    font-size: 14px;
    font-weight: var(--medium);
    line-height: 14px;
}

.account-topbar__link {
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.25s ease, opacity 0.25s ease;
}

.account-topbar__link:is(:hover, :focus-visible) {
    color: var(--white);
    opacity: 0.9;
}

.account-topbar__close {
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 7px;
    right: 32px;
}

.account-topbar__close-icon {
    width: 12px;
    height: 12px;
    position: relative;
    display: block;
}

.account-topbar__close-icon::before,
.account-topbar__close-icon::after {
    content: "";
    width: 12px;
    height: 1.5px;
    border-radius: 999px;
    background: rgba(240, 240, 240, 0.92);
    position: absolute;
    top: 5px;
    left: 0;
}

.account-topbar__close-icon::before {
    transform: rotate(45deg);
}

.account-topbar__close-icon::after {
    transform: rotate(-45deg);
}

.account-topbar+.navbar {
    top: 38px;
    height: 66px;
}


/*-----------------------------------*\
  #NAVBAR
\*-----------------------------------*/

.navbar {
    width: 100%;
    height: 80px;
    padding: 0 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    background-color: transparent;
    z-index: 10000;
}

.navbar-page-overlay {
    position: fixed;
    inset: 0;
    background: rgba(1, 7, 19, 0.46);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    z-index: 9990;
}

body.navbar-dropdown-open {
    overflow: hidden;
}

body.navbar-dropdown-open .navbar-page-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.navbar.scroll {
    border-bottom: 1px solid rgba(126, 126, 126, 0.15);
    background: linear-gradient(180deg, rgba(7, 11, 19, 0.75) 0%, rgba(7, 12, 19, 0.25) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


.navbar-main-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.navbar-left-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 24px;
}

.navbar-logo {
    height: 40px;
}

.navbar-links-main-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    position: relative;
}

.navbar-link {
    font-size: 16px;
    font-weight: var(--regular);
    color: #999999;
    padding: 0 18px;
    transition: 0.5s;
}

.navbar-link:is(:hover, :focus-visible, :focus-within) {
    font-weight: var(--semiBold);
    color: #F2F4F8;
}

.navbar-dropdown-link-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.navbar-dropdown-trigger {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 8px 18px;
    border-radius: 27px;
}

.navbar-dropdown-trigger .navbar-link {
    padding: 0;
}

.navbar-dropdown-arrow {
    width: 20px;
    height: 20px;
    transition: 0.5s;
}


.navbar-dropdown-link-container:is(:hover, :focus-visible, :focus-within),
.navbar-dropdown-trigger {
    cursor: pointer;
}


.navbar-dropdown-link-container:is(:hover, :focus-visible, :focus-within) .navbar-dropdown-arrow,
.navbar-dropdown-link-container.is-open .navbar-dropdown-arrow {
    filter: var(--filter-white);
}

.navbar-dropdown-link-container.is-open .navbar-dropdown-arrow {
    transform: rotate(180deg);
}

.navbar-dropdown-link-container.is-open .navbar-link,
.navbar-dropdown-trigger:is(:hover, :focus-visible, :focus-within) .navbar-link {
    color: #F2F4F8;
    font-weight: var(--semiBold);
}

.navbar-dropdown-menu {
    position: absolute;
    top: calc(100% + 32px);
    left: 0;
    width: 800px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(180deg, rgba(8, 13, 24, 0.96) 0%, rgba(4, 8, 18, 0.97) 100%);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
    z-index: 10020;
}

.navbar-dropdown-link-container.is-open .navbar-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.navbar-dropdown-menu-services {
    width: 800px;
}

.navbar-dropdown-grid {
    display: grid;
    padding: 24px;
    gap: 24px 32px;
}

.navbar-dropdown-grid-tools {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.navbar-dropdown-grid-services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.navbar-dropdown-item {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
    min-height: 56px;
    padding: 12px;
    border-radius: 8px;
    transition: background-color 0.25s ease;
}

.navbar-dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.navbar-dropdown-item-icon {
    width: 40px;
    height: 40px;
}

.navbar-dropdown-item-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.navbar-dropdown-item-copy h4 {
    color: var(--neutral-05);
    font-size: 16px;
    font-weight: var(--bold);
    line-height: 24px;
}

.navbar-dropdown-item-copy p {
    color: #C1C6D7;
    font-size: 12px;
    font-weight: var(--regular);
    line-height: 16px;
}

.navbar-dropdown-footer {
    padding: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.navbar-dropdown-footer span {
    color: #C1C6D7;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.navbar-dropdown-footer-link {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    color: var(--blue-04);
    font-size: 14px;
    font-weight: 500;
    line-height: 14px;
}

.navbar-dropdown-footer-arrow {
    width: 14px;
    height: 14px;
}


.navbar-right-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
}

.navbar-right-container.account {
    gap: 24px;
}

.navbar-profile-link {
    font-size: 16px;
    color: var(--neutral-03);
    transition: 0.5s;
    padding: 0 16px;
}

.navbar-profile-link:is(:hover, :focus-visible, :focus-within) {
    color: var(--white);
    font-weight: var(--semiBold);
}

.notifications-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.notification-icon {
    width: 24px;
    height: 24px;
}

.dot-notification {
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background: var(--accent-blue-04, #439EEF);
    box-shadow: 0 0 8px 0 rgba(173, 198, 255, 0.60);
    position: absolute;
    top: -4px;
    right: -4px;
    display: none;
}

.notifications-nav.active .dot-notification {
    display: block;
}

.account-notifications-shell {
    width: 24px;
    height: 24px;
    position: relative;
}

.account-notifications-menu {
    width: 420px;
    height: 554px;
    position: fixed;
    top: calc(var(--account-header-offset, 104px) + 23px);
    right: 62px;
    z-index: 10041;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: transparent;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    isolation: isolate;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px) scale(0.985);
    transform-origin: top right;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.account-notifications-menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.account-notifications-menu::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: rgba(39, 42, 49, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: none;
}

.account-notifications-menu__inner-glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    opacity: 0.5;
    pointer-events: none;
}

.account-notifications-menu__ambient-glow {
    width: 160px;
    height: 160px;
    position: absolute;
    top: -40px;
    right: -40px;
    z-index: 0;
    border-radius: 9999px;
    background: rgba(173, 198, 255, 0.1);
    filter: blur(32px);
    pointer-events: none;
}

.account-notifications-menu__header,
.account-notifications-menu__tabs,
.account-notifications-menu__list,
.account-notifications-menu__footer {
    position: relative;
    z-index: 1;
    width: 100%;
    flex-shrink: 0;
}

.account-notifications-menu__header {
    height: 61px;
    padding: 16px 16px 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.account-notifications-menu__heading {
    display: flex;
    align-items: center;
    gap: 8px;
}

.account-notifications-menu__heading h3 {
    color: #E1E2EB;
    font-size: 20px;
    font-weight: var(--semiBold);
    line-height: 28px;
    white-space: nowrap;
}

.account-notifications-menu__count {
    min-width: 77px;
    height: 18px;
    padding: 3px 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(173, 198, 255, 0.2);
    border-radius: 9999px;
    background: rgba(67, 158, 239, 0.8);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: var(--semiBold);
    line-height: 12px;
    letter-spacing: 0.6px;
    white-space: nowrap;
}

.account-notifications-menu__mark-read {
    color: #B5C8E3;
    font-size: 12px;
    font-weight: var(--semiBold);
    line-height: 12px;
    white-space: nowrap;
}

.account-notifications-menu__mark-read:disabled {
    opacity: 0.45;
    cursor: default;
}

.account-notifications-menu__tabs {
    width: 168px;
    height: 46px;
    padding: 12px 32px;
    display: flex;
    align-items: center;
    gap: 32px;
}

.account-notifications-menu__tab {
    height: 22px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    color: #ABABAB;
    font-size: 14px;
    font-weight: var(--medium);
    line-height: 14px;
    white-space: nowrap;
}

.account-notifications-menu__tab.active {
    color: #B5C8E3;
    font-weight: var(--semiBold);
}

.account-notifications-menu__tab img {
    width: 19px;
    height: 1.5px;
}

.account-notifications-menu__tab > span {
    width: 53px;
    height: 1.5px;
    display: block;
    border-radius: 9999px;
    background: #439EEF;
    opacity: 0;
}

.account-notifications-menu__tab:not(.active) img {
    opacity: 0;
}

.account-notifications-menu__tab.active > span {
    opacity: 1;
}

.account-notifications-menu__list {
    height: 400px;
    max-height: 400px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
}

.account-notifications-menu__list::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.account-notifications-menu__empty {
    min-height: 180px;
    padding: 72px 24px 24px;
    color: #8FA1BA;
    font-size: 14px;
    text-align: center;
}

.account-notification-item {
    width: 100%;
    height: 120px;
    padding: 16px 16px 17px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    box-shadow: inset 0 -1px rgba(255, 255, 255, 0.05);
}

.account-notification-item:first-child {
    height: 99px;
}

.account-notification-item.unseen {
    background: rgba(202, 218, 255, 0.1);
}

.account-notification-item.seen {
    background: transparent;
}

.account-notification-item.seen .account-notification-item__icon--composite > img {
    clip-path: inset(10px 10px 0 0);
}

.account-notification-item.seen .account-notification-item__unseen-dot {
    display: none;
}

.account-notification-item[hidden] {
    display: none;
}

.account-notification-item__icon {
    width: 32px;
    height: 32px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
}

.account-notification-item__icon > img {
    width: 32px;
    height: 32px;
}

.account-notification-item__icon--composite > img {
    width: 42px;
    height: 42px;
    max-width: none;
    position: absolute;
    top: -10px;
    left: 0;
}

.account-notification-item__icon--service {
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    background: rgba(0, 219, 231, 0.1);
}

.account-notification-item__icon--service > img:first-child {
    width: 18px;
    height: 18px;
}

.account-notification-item__icon--service > .account-notification-item__unseen-dot {
    width: 24px;
    height: 24px;
    max-width: none;
    position: absolute;
    top: -10px;
    left: 18px;
}

.account-notification-item__content {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.account-notification-item__meta {
    width: 100%;
    height: 21px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.account-notification-item__meta h4 {
    color: #E1E2EB;
    font-size: 14px;
    line-height: 21px;
    white-space: nowrap;
}

.account-notification-item.unseen .account-notification-item__meta h4 {
    font-weight: var(--semiBold);
}

.account-notification-item.seen .account-notification-item__meta h4 {
    font-weight: var(--regular);
    opacity: 0.8;
}

.account-notification-item__meta time {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: var(--semiBold);
    line-height: 12px;
    letter-spacing: 0.6px;
    white-space: nowrap;
}

.account-notification-item.unseen .account-notification-item__meta time {
    color: rgba(193, 198, 215, 0.7);
}

.account-notification-item.seen .account-notification-item__meta time {
    color: rgba(193, 198, 215, 0.5);
}

.account-notification-item__content p {
    width: 100%;
    padding-bottom: 3.5px;
    color: #C1C6D7;
    font-size: 14px;
    font-weight: var(--regular);
    line-height: 21px;
}

.account-notification-item.seen .account-notification-item__content p {
    color: rgba(193, 198, 215, 0.8);
}

.account-notification-item__content a {
    color: #ADC6FF;
    font-size: 12px;
    font-weight: var(--semiBold);
    line-height: 12px;
    letter-spacing: 0;
    white-space: nowrap;
}

.account-notification-item.seen .account-notification-item__content a {
    color: #C1C6D7;
    font-family: "Inter", sans-serif;
    letter-spacing: 0.6px;
}

.account-notifications-menu__footer {
    height: 45px;
    padding: 9px 8px 8px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(29, 32, 38, 0.5);
}

.account-notifications-menu__footer button {
    width: 100%;
    height: 28px;
    padding: 8px 0;
    border-radius: 8px;
    color: #C1C6D7;
    font-size: 12px;
    font-weight: var(--medium);
    line-height: 12px;
    letter-spacing: 0.6px;
    text-align: center;
}

@media (max-width: 640px) {
    .account-notifications-menu {
        width: min(420px, calc(100vw - 24px));
        right: 12px;
    }
}

.profile-link-navbar {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
}

.profile-link-navbar .my-profile-icon {
    width: 40px;
    height: 40px;
}

.account-profile-menu-shell {
    width: 40px;
    height: 40px;
    position: relative;
}

.account-profile-menu {
    width: 320px;
    height: 626px;
    position: fixed;
    top: calc(var(--account-header-offset, 104px) + 22px);
    right: 24px;
    z-index: 10040;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    box-shadow:
        0 10px 15px -3px rgba(0, 0, 0, 0.5),
        0 4px 6px -4px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px) scale(0.985);
    transform-origin: top right;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.account-profile-menu-shell.is-open .account-profile-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.account-profile-menu__header,
.account-profile-menu__actions,
.account-profile-menu__credits,
.account-profile-menu__navigation,
.account-profile-menu__preferences {
    width: 100%;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.account-profile-menu__header {
    height: 89px;
    padding: 24px 24px 25px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.account-profile-menu__avatar {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 100px;
}

.account-profile-menu__identity {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.account-profile-menu__identity strong {
    color: #E1E2EB;
    font-family: "Montserrat", sans-serif;
    font-size: 18px;
    font-weight: var(--semiBold);
    line-height: 18px;
    white-space: nowrap;
}

.account-profile-menu__identity span {
    color: #C1C6D7;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: var(--regular);
    line-height: 21px;
    white-space: nowrap;
}

.account-profile-menu__actions {
    height: 73px;
    padding: 16px 16px 17px;
}

.account-profile-menu__upgrade {
    width: 100%;
    height: 40px;
    padding: 10px 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    background: #DAE3F1;
    color: #020B1D;
    font-size: 14px;
    font-weight: var(--semiBold);
    line-height: 14px;
}

.account-profile-menu__credits {
    height: 167px;
    padding: 24px 24px 25px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
}

.account-profile-menu__credits-title {
    height: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.account-profile-menu__credits-title img {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
}

.account-profile-menu__credits-title strong {
    color: #E1E2EB;
    font-size: 16px;
    font-weight: var(--semiBold);
    line-height: 24px;
}

.account-profile-menu__credit-values {
    width: 100%;
    height: 50px;
    padding-top: 8px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.account-profile-menu__credit-values > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.account-profile-menu__credit-values > .account-profile-menu__credit-values-available {
    align-items: flex-end;
    text-align: right;
}

.account-profile-menu__credit-values span {
    color: #C1C6D7;
    font-size: 12px;
    font-weight: var(--regular);
    line-height: 18px;
}

.account-profile-menu__credit-values strong {
    color: #E1E2EB;
    font-size: 16px;
    font-weight: var(--semiBold);
    line-height: 24px;
}

.account-profile-menu__progress {
    width: 100%;
    height: 12px;
    padding-top: 4px;
}

.account-profile-menu__progress::before {
    content: "";
    width: 100%;
    height: 8px;
    display: block;
    border-radius: 9999px;
    background: #32353C;
}

.account-profile-menu__progress span {
    width: 6%;
    height: 8px;
    position: absolute;
    left: 0;
    bottom: 0;
    border-radius: 9999px;
    background: #5B46B9;
}

.account-profile-menu__progress {
    position: relative;
}

.account-profile-menu__navigation {
    height: 107px;
    padding: 16px 0 17px;
}

.account-profile-menu__row,
.account-profile-menu__language-row {
    width: 100%;
    min-height: 37px;
    padding: 8px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #E1E2EB;
}

.account-profile-menu__row {
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.account-profile-menu__row:is(:hover, :focus-visible) {
    background: rgba(255, 255, 255, 0.05);
}

.account-profile-menu__row-main {
    display: flex;
    align-items: center;
    gap: 16px;
}

.account-profile-menu__row-main > :last-child {
    color: #E1E2EB;
    font-size: 14px;
    font-weight: var(--medium);
    line-height: 21px;
    white-space: nowrap;
}

.account-profile-menu__icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.account-profile-menu__icon img {
    width: 20px;
    height: 20px;
}

.account-profile-menu__icon--billing img {
    height: 16px;
}

.account-profile-menu__icon--language {
    width: 22.1px;
    flex-basis: 22.1px;
}

.account-profile-menu__icon--language img {
    width: 22.1px;
}

.account-profile-menu__icon--small {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
}

.account-profile-menu__icon--small img {
    width: 18px;
    height: 18px;
}

.account-profile-menu__badge {
    padding: 2px 8px;
    border-radius: 4px;
    background: #ADC6FF;
    color: #020B1D;
    font-size: 10px;
    font-weight: var(--semiBold);
    line-height: 15px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.account-profile-menu__preferences {
    height: 120px;
    padding: 16px 0 17px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.account-profile-menu__language-row {
    height: 38px;
    min-height: 38px;
    padding-top: 4px;
    padding-bottom: 4px;
}

.account-profile-menu__language {
    width: 112px;
    height: 30px;
    padding: 5px 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #414755;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
}

.account-profile-menu__language span {
    color: #E1E2EB;
    font-size: 14px;
    font-weight: var(--regular);
    line-height: 20px;
}

.account-profile-menu__language img {
    width: 8px;
    height: 4.933px;
}

.account-profile-menu__help {
    min-height: 37px;
    margin-top: 4px;
}

.account-profile-menu__logout-area {
    width: 100%;
    height: 69px;
    padding: 16px 0;
    flex-shrink: 0;
}

.account-profile-menu__logout {
    height: 37px;
    min-height: 37px;
    text-align: left;
}

@media (max-width: 640px) {
    .account-profile-menu {
        width: min(320px, calc(100vw - 24px));
        right: 12px;
    }
}

/*-----------------------------------*\
  #FOOTER
\*-----------------------------------*/
.footer {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(180deg, #000 0%, #00122a 100%);
    padding: 64px 0;
}

.footer-width-container {
    width: 1280px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 32px;
}

.footer-top-container {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 96px;
}

.footer-contact-info-main-container {
    width: 290px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
    flex-shrink: 0;
}

.footer-logo {
    height: 48px;
}

.cybersec-slogan {
    color: rgba(236, 236, 236, 0.65);
    font-size: 14px;
    font-weight: var(--regular);
    line-height: 22px;
    letter-spacing: -2%;
}

.cybersec-contact-links-container {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
    margin-top: 16px;
}

.contact-link {
    color: var(--neutral-02, #F0F0F0);
    font-size: 14px;
    font-weight: var(--medium);
    line-height: 16px;
    transition: 0.5s;
}

.contact-link:is(:hover, :focus-visible, :focus-within) {
    color: var(--blue-03);
    font-size: 16px;
    font-weight: var(--semiBold);
    line-height: 16px;
    cursor: pointer;
}

.contact-link.social {
    text-decoration: underline;
}

.footer-links-main-container {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 120px;
}

.footer-links-single-container {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 24px;
    flex-direction: column;
}

.footer-links-container {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 24px;
    flex-direction: column;
}

.footer-links-title {
    color: #DAE3F1;
    font-size: 18px;
    font-weight: var(--semiBold);
    line-height: 18px;
    letter-spacing: -1%x;
}

.footer-link {
    color: var(--neutral-06);
    font-size: 14px;
    font-weight: var(--regular);
    line-height: 16px;
    transition: 0.5s;
}

.footer-link:is(:hover, :focus-visible, :focus-within) {
    color: var(--neutral-01);
    font-size: 16px;
    font-weight: var(--medium);
}

.footer-arrow-container {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.footer-arrow-btn {
    display: flex;
    width: 56px;
    height: 56px;
    padding: 12px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    aspect-ratio: 1/1;
    border-radius: 100px;
    border: 1px solid rgba(126, 126, 126, 0.15);
    background: rgba(33, 55, 94, 0.40);
    backdrop-filter: blur(12px);
    transition: 0.5s;
}

.arrow-footer {
    width: 32px;
    height: 32px;
}

.footer-arrow-btn:is(:hover, :focus-visible, :focus-within) {

    border: 1px solid var(--blue-03);
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
}

.gdpr-main-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 64px;
}

.gdpr-links-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 24px;
}

.gdpr-link {
    color: var(--neutral-04);
    line-height: 16px;
    font-size: 14px;
    transition: 0.5s;
}

.gdpr-link:is(:hover, :focus-visible, :focus-within) {
    color: var(--white);
    font-size: 16px;
}

.language-switch-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.language-dropdown-arrow {
    width: 20px;
    height: 20px;
}

.language-value {
    color: var(--neutral-02);
    font-size: 14px;
    line-height: 14px;
}

.language-label {
    color: var(--neutral-06);
    font-size: 14px;
    line-height: 14px;
    font-weight: var(--regular);
}

.language-icon {
    width: 20px;
    height: 20px;
    margin-left: 2px;
}

.rights-reserved-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.rights-reserved-text {
    color: var(--neutral-08);
    font-size: 14px;
    font-weight: 400;
    line-height: 14px;
}