@import './variables-pc.css';

.home-link {
    color: var(--color-primary-500);
}

.navbar .logo-content {
    background-image: url("../images/icon/uflogo1.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    width: var(--size-234);
    height: var(--size-60);
    display: inline-block;
}

.content-wrapper {
    background-image: url("../images/index/bk2.png");
    background-size: 100% auto;
    background-attachment: fixed;
    z-index: 0;
    position: relative;
}

.main {
    display: flex;
    flex-flow: column;
    align-items: center;
}

.container {
    width: 100%;
}

.home-wrapper {
    text-align: center;
    position: relative;
    padding-top: var(--spacing-44);
    padding-bottom: var(--spacing-48);
    display: flex;
    flex-flow: column;
    gap: var(--spacing-24);
}

.bg1-wrapper {
    background-image: url(../images/index/2-1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    width: calc(100% + 2 * var(--spacing-60));
    height: 120%;
    left: calc(-1 * var(--spacing-60));
    top: calc(-1 * var(--spacing-44));
    z-index: var(--z-index-negative);
}

.home-wrapper .section-header h1 {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-4xl);
    color: var(--color-text-inverse);
    letter-spacing: var(--letter-spacing-wider);
    margin: 0;
}

.check-circle {
    width: var(--size-14);
    height: var(--size-14);
    border-radius: var(--border-radius-full);
    display: inline-block;
    background: var(--color-bg-primary);
    position: relative;
}

.check-circle::before {
    content: "✓";
    position: absolute;
    transform: translate(-50%, -50%);
    color: #f67205;
    font-weight: var(--font-weight-bold);
    top: 50%;
    left: 50%;
    font-size: var(--font-size-md);
}

.home-wrapper .section-content {
    display: flex;
    flex-flow: column;
    align-items: center;
    gap: var(--spacing-24);
}

.home-wrapper .item {
    display: flex;
    align-items: center;
}

.home-wrapper .section-content .feature-list {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
}

.home-wrapper .feature-text {
    color: var(--color-text-inverse);
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-lg);
    letter-spacing: var(--letter-spacing-wide);
    line-height: var(--line-height-loose);
}

.cta-btn {
    background: #f67205;
    font-weight: var(--font-weight-normal);
    position: relative;
    padding: var(--spacing-8) var(--spacing-24) var(--spacing-8) var(--spacing-10);
    border-radius: var(--border-radius-3xl);
    font-size: var(--font-size-lg);
    color: var(--color-text-inverse);
    letter-spacing: var(--letter-spacing-wide);
    transition: background-color var(--transition-fast);
}

.cta-btn:hover {
    background: #ff9f4f;
}

.cta-arrow {
    position: absolute;
    margin-left: var(--spacing-9);
    margin-top: var(--spacing-0_5);
}

.trial-badge {
    position: absolute;
    color: #fdf0f0;
    text-align: center;
    font-weight: var(--font-weight-bold);
    background: var(--color-error);
    border-radius: var(--border-radius-full);
    bottom: -9%;
    right: -7%;
    font-size: var(--font-size-7xl);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-none);
    height: var(--size-412);
    width: var(--size-412);
}

.trial-badge span {
    position: absolute;
    left: 17.8%;
    top: 35%;
    width: 65%;
}

.features-section {
    text-align: center;
    position: relative;
    padding: var(--spacing-20) 0;
    width: 100%;
}

.bg2-wrapper {
    background-image: url(../images/index/2-2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    width: calc(100% + 2 * var(--spacing-60));
    height: 69%;
    left: calc(-1 * var(--spacing-60));
    top: var(--spacing-12);
    z-index: var(--z-index-negative);
}

.features-section .section-title {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
    margin: 0;
    font-size: var(--font-size-5xl);
    letter-spacing: var(--letter-spacing-wide);
}

.features-section .features-main {
    display: flex;
    flex-flow: row;
    margin-top: var(--spacing-48);
    position: relative;
}

.features-section .features-list {
    display: flex;
    flex-flow: column;
    gap: var(--spacing-48);
    width: 84%;
}

.features-section .features-main .feature-image {
    position: absolute;
    width: 58%;
    right: calc(-1 * var(--spacing-40));
    bottom: var(--spacing-36);
}

.feature-block .feature-image {
    width: var(--size-500);
}


.features-section .feature-item {
    display: flex;
    align-items: flex-start;
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
    font-size: var(--font-size-4xl);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-snug);
    gap: var(--spacing-8);
}

img.feature-icon {
    width: var(--size-60);
    height: var(--size-60);
}

.features-section .features-main .feature-content .feature-title {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
    font-size: var(--font-size-4xl);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-snug);
    margin-bottom: var(--spacing-2);
}

.features-section .features-main .feature-content {
    text-align: left;
    width: 52%;
    margin-top: var(--spacing-2);
}

.features-section .features-main .feature-content .feature-description {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-normal);
    width: 68%;
    white-space: normal;
    font-size: var(--font-size-lg);
    letter-spacing: 1.11px;
    line-height: 34px;
}

.feature-blocks-wrapper {
    display: flex;
    flex-flow: column;
    margin-top: var(--spacing-56);
    gap: var(--spacing-64);
}

.features-section .feature-block {
    display: flex;
    flex-flow: row;
    align-items: center;
    gap: var(--spacing-72);
}

@media screen and (max-width: 1023px) {
    .second-block {
        gap: var(--spacing-10) !important;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1279px) {
    .second-block {
        gap: var(--spacing-14) !important;
    }
}

@media screen and (min-width: 1280px) and (max-width: 1439px) {
    .second-block {
        gap: var(--spacing-24) !important;
    }
}

@media screen and (min-width: 1440px) and (max-width: 1659px) {
    .second-block {
        gap: var(--spacing-32) !important;
    }
}

.third-block {
    gap: var(--spacing-52) !important;
}

.features-section .block-content {
    flex: 1;
    text-align: left;
}

.second-block .block-content {
    flex: none !important;
}

.features-section .block-content .block-title {
    display: flex;
    flex-flow: column;
    font-size: var(--font-size-6xl);
    color: var(--color-text-primary);
    letter-spacing: var(--letter-spacing-wider);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-20);
}

.features-section .block-content .block-list .list-item {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-normal);
    white-space: normal;
}

.dot {
    display: inline-block;
    background: var(--color-text-primary);
    border-radius: var(--border-radius-full);
    position: relative;
    width: var(--size-14);
    height: var(--size-14);
}

.block-list {
    font-size: var(--font-size-3xl);
    color: var(--color-text-primary);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-relaxed);
    font-weight: var(--font-weight-normal);
}

.comparison-section {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: var(--spacing-56);
    gap: var(--spacing-24);
}

.bg3-wrapper {
    background-image: url(../images/index/2-3.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    width: calc(100% + 2 * var(--spacing-60));
    height: 94%;
    left: calc(-1 * var(--spacing-60));
    top: var(--spacing-12);
    z-index: var(--z-index-negative);
}

.comparison-section .reason-header {
    background: #f78c3b;
    border-radius: var(--border-radius-3xl);
    padding: var(--spacing-8) var(--spacing-24);
}

.comparison-section .reason-header h2 {
    color: var(--color-text-inverse);
    text-align: center;
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-bold);
    margin: 0;
}

.comparison-content-wrapper {
    background: var(--color-bg-primary);
    border: var(--border-width-thin) solid var(--color-border-light);
    border-radius: var(--border-radius-2xl);
}

.comparison-content {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-around;
}

.table-column {
    color: var(--color-text-primary);
    text-align: center;
    font-weight: var(--font-weight-normal);
}

.table-column.center {
    background: #b4c7ef;
}

.table-column .column-header, .table-column .feature-item {
    border-bottom: var(--border-width-medium) solid var(--color-border-light);
    padding: var(--spacing-8) var(--spacing-28);
    white-space: nowrap;
    margin: 0;
    font-size: var(--font-size-2xl);
    color: var(--color-text-primary);
    letter-spacing: 1px;
    text-align: center;
    font-weight: 400;
}

.comparison-note {
    color: var(--color-text-primary);
    text-align: center;
    font-weight: var(--font-weight-normal);
    opacity: var(--opacity-disabled);
    background: #cedbff;
    border: var(--border-width-thin) solid var(--color-border-light);
    padding: var(--spacing-4) 0;
    border-radius: 0 0 var(--border-radius-2xl) var(--border-radius-2xl);
}

.users-section {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-24);
}

.users-section .section-header {
    background: var(--color-error);
    padding: var(--spacing-8) var(--spacing-16);
    border-radius: var(--border-radius-3xl);
}

.users-section .section-header h2 {
    margin: 0;
    font-size: var(--font-size-5xl);
    color: var(--color-text-inverse);
    letter-spacing: var(--letter-spacing-wide);
    text-align: center;
    font-weight: var(--font-weight-bold);
}

.users-flex, .user-card {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    width: 86%;
    gap: var(--spacing-10);

}

.users-flex {
    gap: var(--spacing-32);
}

.user-card .user-title {
    text-align: right;
    font-size: var(--font-size-5xl);
    color: var(--color-text-primary);
    letter-spacing: var(--letter-spacing-wide);
    font-weight: var(--font-weight-bold);
}

.user-card .user-description {
    font-size: var(--font-size-5xl);
    color: var(--color-text-primary);
    letter-spacing: var(--letter-spacing-wide);
    text-align: center;
    font-weight: var(--font-weight-normal);
}

.pricing-section {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.bg4-wrapper {
    background-image: url(../images/index/2-4.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    width: calc(100% + 2 * var(--spacing-60));
    height: 141%;
    left: calc(-1 * var(--spacing-60));
    bottom: calc(-1 * var(--spacing-52));
    z-index: var(--z-index-negative);
}

.pricing-section .section-header {
    background: #7e4eff;
}

.pricing-section .section-header h2 {
    color: #fff;
    text-align: center;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-5xl);
    white-space: nowrap;
}