/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
    position: relative;
    overflow: hidden;
    /*padding-block: 82px 78px;*/
    padding-block-start: 24px;
    background:
            radial-gradient(circle at 14% 35%, rgba(99, 102, 241, .10), transparent 27%),
            radial-gradient(circle at 92% 5%, rgba(139, 92, 246, .07), transparent 25%),
            linear-gradient(180deg, #fcfcff 0%, #f7f8ff 100%);
}
.hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: .92fr 1.08fr;
    align-items: center;
    gap: clamp(32px, 4vw, 48px);
}
/* ===   Hero Content   ========================================================================== */
.hero-copy {
    min-width: 0;
}
.eyebrow {
    margin: 0 0 14px;
    color: var(--primary);
    font-size: 14px;
    font-weight: 800;
}
.eyebrow span {
    width: 20px;
    height: 20px;
    margin-inline-end: 5px;
    display: inline-grid;
    place-items: center;
    color: #fff;
    background: var(--primary);
    border-radius: 50%;
    font-size: 11px;
}
.hero h1 {
    margin: 0;
    color: var(--navy);
    font-size: clamp(36px, 3.6vw, 54px);
    line-height: 1.45;
    letter-spacing: -1.2px;
    text-wrap: balance;
}
.hero h1 span {
    color: var(--primary);
}
.hero-description {
    max-width: 540px;
    margin: 22px 0 30px;
    color: var(--muted);
    font-size: 17px;
    line-height: 2;
    text-wrap: pretty;
}
/* =====   Hero Actions   ========================================================================== */
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
}
.hero-actions .button svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.hero-points {
    margin: 25px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 22px;
    color: #65708a;
    font-size: 13px;
    font-weight: 600;
    list-style: none;
}
.hero-points li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}
.hero-point__icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--primary);
}

.hero-point__icon svg {
    display: block;

    width: 22px;
    height: 22px;
}

/* ====   App Preview   ========================================================================== */
.app-window {
    position: relative;
    overflow: hidden;
    direction: ltr;
    background: rgba(255, 255, 255, .98);
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: 22px;
    box-shadow:
            0 30px 70px rgba(30, 41, 89, .12),
            0 8px 24px rgba(79, 70, 229, .06);
}
.app-window::before {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    inset: -100px auto auto -80px;
    background: rgba(99, 102, 241, .10);
    border-radius: 50%;
    filter: blur(55px);
    pointer-events: none;
}
.window-bar,
.app-layout {
    position: relative;
    z-index: 1;
}
/* ====   Window Bar   ========================================================================== */
.window-bar {
    height: 42px;
    padding-inline: 15px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f7f8fc;
    border-bottom: 1px solid #edf0f6;
}
.window-bar > span {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    background: #cbd2df;
    border-radius: 50%;
}
.window-address {
    width: 44%;
    margin-inline: auto;
    padding: 3px 12px;
    color: #9aa3b6;
    background: #fff;
    border: 1px solid #e9ebf2;
    border-radius: 6px;
    font-family: Arial, sans-serif;
    font-size: 10px;
    line-height: 1.4;
    text-align: center;
    direction: ltr;
}
/* ====   App Layout   ========================================================================== */
.app-layout {
    min-height: 430px;
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    direction: rtl;
}
/* ====   Preview Sidebar   ========================================================================== */
.app-sidebar {
    padding: 22px 13px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #fafbff;
    border-left: 1px solid #edf0f6;
}
.app-sidebar strong {
    margin-bottom: 18px;
    color: var(--navy);
    font-size: 13px;
}
.app-sidebar__item {
    padding: 7px 10px;
    color: #788299;
    border-radius: 7px;
    font-size: 10px;
}
.app-sidebar__item.active {
    color: var(--primary);
    background: var(--primary-soft);
    font-weight: 800;
}
/* ====   Preview Content   ========================================================================== */
.app-content {
    min-width: 0;
    padding: 28px;
}
.preview-heading {
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.preview-heading small,
.schedule-item small,
.progress-card small {
    display: block;
    color: #8b94a8;
    font-size: 10px;
}
.preview-title {
    display: block;
    margin-top: 2px;
    color: var(--navy);
    font-size: 17px;
}
.preview-add {
    flex-shrink: 0;
    padding: 7px 11px;
    color: #fff;
    background: var(--primary);
    border-radius: 7px;
    font-size: 9px;
}
.preview-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 145px;
    align-items: start;
    gap: 18px;
}
/* ====   Schedule Preview   ========================================================================== */
.app-window .schedule-list {
    display: grid;
    gap: 10px;
}
.app-window .schedule-item {
    position: relative;
    min-height: 64px;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #edf0f6;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(30, 41, 89, .04);
}
.app-window .schedule-item::before {
    content: "";
    position: absolute;
    inset-block: 9px;
    inset-inline-start: 0;
    width: 4px;
    border-radius: 4px;
}
.app-window .schedule-item.green::before {
    background: #28b77b;
}
.app-window .schedule-item.blue::before {
    background: #4a8cf5;
}
.app-window .schedule-item.purple::before {
    background: #8b5cf6;
}
.app-window .schedule-item.amber::before {
    background: #f2ad35;
}
.app-window .check {
    width: 17px;
    height: 17px;
    display: grid;
    place-items: center;
    color: #fff;
    background: #26b77a;
    border: 1px solid #cbd3e0;
    border-radius: 4px;
    font-size: 9px;
}
.app-window .schedule-item:not(.green) .check {
    background: #fff;
}
.schedule-item__content {
    min-width: 0;
}
.app-window .schedule-item strong {
    display: block;
    color: #364057;
    font-size: 11px;
}
.schedule-time {
    color: #6f7890;
    font-size: 10px;
    direction: rtl;
    white-space: nowrap;
}
/* ====   Progress Preview   ========================================================================== */
.progress-card {
    padding: 20px 14px;
    text-align: center;
    background: linear-gradient(180deg, #fafaff, #f6f7ff);
    border: 1px solid #e8eaff;
    border-radius: 14px;
}
.progress-card p {
    margin: 0;
    color: #68728a;
    font-size: 10px;
}
.progress-card > strong {
    display: block;
    margin: 10px 0;
    color: var(--primary);
    font-size: 30px;
    font-weight: 800;
}
.progress-card .progress {
    height: 5px;
    margin: 8px 0;
    overflow: hidden;
    background: #e2e7f1;
    border-radius: 9px;
    direction: ltr;
}
.progress-card .progress span {
    width: 75%;
    height: 100%;
    display: block;
    background: var(--primary);
}
/* ====   responsive   ========================================================================== */
@media (max-width: 992px) {
    .hero {
        padding-block: 64px;
    }
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .hero-copy {
        max-width: 680px;
        margin-inline: auto;
        text-align: center;
    }
    .hero-description {
        margin-inline: auto;
    }
    .hero-actions,
    .hero-points {
        justify-content: center;
    }
    .app-window {
        width: 100%;
        max-width: 760px;
        margin-inline: auto;
    }
}
@media (max-width: 600px) {
    .hero {
        padding-block: 48px;
    }
    .hero h1 {
        font-size: 34px;
        line-height: 1.5;
        letter-spacing: -.7px;
    }
    .hero-description {
        margin-block: 18px 25px;
        font-size: 15px;
    }
    .hero-actions {
        flex-direction: column;
    }
    .hero-actions .button {
        width: 100%;
    }
    .hero-points {
        gap: 10px 16px;
        font-size: 12px;
    }
    .hero-point__icon,
    .hero-point__icon svg {
        width: 20px;
        height: 20px;
    }
    .app-sidebar {
        display: none;
    }
    .app-layout {
        min-height: auto;
        grid-template-columns: 1fr;
    }
    .app-content {
        padding: 16px;
    }
    .preview-body {
        grid-template-columns: 1fr;
    }
    .progress-card {
        display: none;
    }
}
@media (max-width: 480px) {
    .hero {
        padding-block: 40px;
    }
    .hero h1 {
        font-size: 30px;
    }
    .eyebrow {
        font-size: 12px;
    }
    .hero-points {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .window-address {
        width: 55%;
    }
    .preview-heading {
        margin-bottom: 16px;
    }
    .preview-title {
        font-size: 15px;
    }
    .preview-add {
        padding: 6px 8px;
        font-size: 8px;
    }
    .app-window .schedule-item {
        grid-template-columns: 18px minmax(0, 1fr);
        padding: 10px 12px;
    }
    .schedule-time {
        grid-column: 2;
        font-size: 9px;
    }
}


/* ==========================================================================
   Benefits
   ========================================================================== */
.benefits {
    padding-block: 38px;
    border-bottom: 1px solid #edf0f6;
}
.benefit-grid {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    list-style: none;
}
/* ====   Benefit Card   ========================================================================== */
.benefit-card {
    min-width: 0;
    padding: 24px;
    display: flex;
    align-items: flex-start;
    gap: 17px;
    border: 1px solid transparent;
    border-radius: 17px;
}
.benefit-blue {
    background: linear-gradient(135deg, #f1f7ff, #edf5ff);
    border-color: #e2edff;
}
.benefit-amber {
    background: linear-gradient(135deg, #fffaf0, #fff6e5);
    border-color: #faedcf;
}
.benefit-green {
    background: linear-gradient(135deg, #f0fbf7, #ebf9f3);
    border-color: #dcf3e8;
}
/* ====   Benefit Icon   ========================================================================== */
.benefit-icon {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    display: grid;
    place-items: center;
    border-radius: 13px;
}
.benefit-icon svg {
    width: 25px;
    height: 25px;
    display: block;
}
.benefit-blue .benefit-icon {
    color: #3478f6;
    background: #dceaff;
}
.benefit-amber .benefit-icon {
    color: #c38a16;
    background: #ffebba;
}
.benefit-green .benefit-icon {
    color: #20a56c;
    background: #cef1df;
}
/* ====   Benefit Content   ========================================================================== */
.benefit-card__content {
    min-width: 0;
}
.benefit-card h3 {
    margin: 0 0 7px;
    color: var(--navy);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.6;
}
.benefit-card p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.9;
}
/* ====   Accessibility   ========================================================================== */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* =====   responsive   ========================================================================== */
@media (max-width: 900px) {
    .benefit-grid {
        grid-template-columns: 1fr;
    }
    .benefit-card {
        max-width: 680px;
        width: 100%;
        margin-inline: auto;
    }
}
@media (max-width: 600px) {
    .benefits {
        padding-block: 30px;
    }
    .benefit-grid {
        gap: 12px;
    }
    .benefit-card {
        padding: 18px;
        gap: 14px;
        border-radius: 14px;
    }
    .benefit-icon {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
        border-radius: 11px;
    }
    .benefit-icon svg {
        width: 22px;
        height: 22px;
    }
    .benefit-card h3 {
        margin-bottom: 4px;
        font-size: 15px;
    }
    .benefit-card p {
        font-size: 12.5px;
        line-height: 1.85;
    }
}



/* ==========================================================================
   Overview
   ========================================================================== */
.overview {
    background: #fff;
}
.overview-grid {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    align-items: center;
    gap: clamp(45px, 6vw, 80px);
}
/* ====   Overview Content   ========================================================================== */
.overview-copy {
    min-width: 0;
}
.overview-label {
    margin: 0 0 12px;
    color: var(--primary);
    font-size: 14px;
    font-weight: 800;
}
.overview-copy h2 {
    margin: 0;
    color: var(--navy);
    font-size: clamp(29px, 3vw, 42px);
    line-height: 1.45;
    text-wrap: balance;
}
.overview-description {
    max-width: 530px;
    margin: 16px 0 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 2;
    text-wrap: pretty;
}
/* ====   Feature List   ========================================================================== */
.feature-checks {
    margin: 26px 0;
    padding: 0;
    display: grid;
    gap: 15px;
    list-style: none;
}
.feature-checks li {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #59647a;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.8;
}
.feature-checks__icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    color: var(--primary);
    background: var(--primary-soft);
    border-radius: 11px;
}
.feature-checks__icon svg {
    width: 21px;
    height: 21px;
    display: block;
}
/* ====   CTA Link   ========================================================================== */
.overview-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: color .2s ease, gap .2s ease;
}
.overview-link svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}
.overview-link:hover {
    color: var(--primary-dark);
    gap: 9px;
}
/* ====   Calendar Preview   ========================================================================== */
.calendar-preview {
    min-width: 0;
    overflow: hidden;
    padding: 26px;
    background: linear-gradient(180deg, #fcfdff, #f8faff);
    border: 1px solid #e6eaf4;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(30, 41, 89, .09), 0 6px 18px rgba(79, 70, 229, .04);
}
.calendar-preview__inner {
    min-width: 0;
}
/* ====   Calendar Header   ========================================================================== */
.calendar-head {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}
.calendar-head strong {
    color: var(--navy);
    font-size: 15px;
}
.calendar-head span {
    color: var(--muted);
    font-size: 12px;
}
/* =====   Week Days   ========================================================================== */
.week-days {
    margin-inline-start: 54px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    color: #8992a5;
    font-size: 10px;
    text-align: center;
}
/* ====   Calendar Grid   ========================================================================== */
.calendar-grid {
    margin-top: 9px;
    display: grid;
    grid-template-columns: 54px repeat(5, minmax(0, 1fr));
    grid-auto-rows: 53px;
    direction: rtl;
}
.calendar-grid > span {
    min-width: 0;
    border-top: 1px solid #edf0f5;
    border-inline-start: 1px solid #f0f2f7;
}
.calendar-time {
    padding-top: 7px;
    color: #9aa2b2;
    border-inline-start: 0 !important;
    font-size: 9px;
    direction: ltr;
}
.calendar-event {
    align-self: stretch;
    margin: 5px 3px;
    padding: 4px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 0 !important;
    border-radius: 6px;
    font-size: 8px;
    font-weight: 700;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* ====   Event Colors   ========================================================================== */
.event-green {
    color: #087851;
    background: #d9f8e9;
}
.event-blue {
    color: #285da8;
    background: #dfedff;
}
.event-purple {
    color: #7041b4;
    background: #eee5ff;
}
.event-amber {
    color: #a76600;
    background: #fff0cd;
}
.event-red {
    color: #a84357;
    background: #ffe4e8;
}
/* ====   Responsive   ========================================================================== */
@media (max-width: 992px) {
    .overview-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }
    .overview-copy {
        max-width: 680px;
        margin-inline: auto;
        text-align: center;
    }
    .overview-description {
        margin-inline: auto;
    }
    .feature-checks {
        width: fit-content;
        max-width: 100%;
        margin-inline: auto;
        text-align: start;
    }
    .calendar-preview {
        width: 100%;
        max-width: 760px;
        margin-inline: auto;
    }
}
@media (max-width: 600px) {
    .overview-grid {
        gap: 35px;
    }
    .overview-label {
        font-size: 13px;
    }
    .overview-copy h2 {
        font-size: 29px;
    }
    .overview-description {
        font-size: 14px;
        line-height: 1.9;
    }
    .feature-checks {
        margin-block: 22px;
        gap: 12px;
    }
    .feature-checks li {
        gap: 9px;
        font-size: 13px;
    }
    .feature-checks__icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        border-radius: 9px;
    }
    .feature-checks__icon svg {
        width: 19px;
        height: 19px;
    }
    .calendar-preview {
        padding: 18px;
        border-radius: 16px;
    }
    .week-days {
        margin-inline-start: 46px;
        font-size: 9px;
    }
    .calendar-grid {
        grid-template-columns: 46px repeat(5, minmax(0, 1fr));
        grid-auto-rows: 48px;
    }
    .calendar-event {
        margin: 4px 2px;
        padding: 3px;
        font-size: 7.5px;
    }
}
@media (max-width: 420px) {
    .overview-copy h2 {
        font-size: 27px;
    }
    .calendar-preview {
        padding: 14px 10px;
    }
    .calendar-head {
        margin-inline: 4px;
        margin-bottom: 16px;
    }
    .calendar-head strong {
        font-size: 13px;
    }
    .calendar-head span {
        font-size: 10px;
    }
    .week-days {
        margin-inline-start: 40px;
        font-size: 8px;
    }
    .calendar-grid {
        grid-template-columns: 40px repeat(5, minmax(0, 1fr));
        grid-auto-rows: 44px;
    }
    .calendar-time {
        font-size: 8px;
    }
    .calendar-event {
        font-size: 7px;
    }
}



/* ==========================================================================
   Steps
   ========================================================================== */
.steps {
    background: #fff;
}
/* =====   Heading   ========================================================================== */
.steps-heading {
    max-width: 620px;
    margin: 0 auto 38px;
    text-align: center;
}
.steps-label {
    margin: 0 0 12px;
    color: var(--primary);
    font-size: 14px;
    font-weight: 800;
}
.steps-heading h2 {
    margin: 0;
    color: var(--navy);
    font-size: clamp(29px, 3vw, 42px);
    line-height: 1.45;
    text-wrap: balance;
}
.steps-description {
    max-width: 620px;
    margin: 16px 0 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 2;
    text-wrap: pretty;
}
/* ====   Steps Grid   ========================================================================== */
.steps-grid {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 54px;
    direction: rtl;
    list-style: none;
}
/* =====   Step Card   ========================================================================== */
.step-card {
    position: relative;
    min-width: 0;
    min-height: 180px;
    padding: 32px 26px 26px;
    display: flex;
    align-items: center;
    gap: 18px;
    background: linear-gradient(135deg, #f8faff 0%, #f3f6ff 100%);
    border: 1px solid #edf0fb;
    border-radius: 18px;
}
/* ====   Step Number   ========================================================================== */
.step-number {
    position: absolute;
    inset-block-start: -14px;
    inset-inline-start: 22px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #4169e8;
    background: #e4edff;
    border: 4px solid #fff;
    border-radius: 50%;
    box-shadow: 0 6px 16px rgba(65, 105, 232, .08);
    font-size: 18px;
    font-weight: 900;
}
/* ====   Step Icon   ========================================================================== */
.step-icon {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    display: grid;
    place-items: center;
    color: #526fea;
}
.step-icon svg {
    width: 46px;
    height: 46px;
    display: block;
}
/* ====   Step Content   ========================================================================== */
.step-content {
    min-width: 0;
}
.step-content h3 {
    margin: 0 0 7px;
    color: var(--navy);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.6;
}
.step-content p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.9;
}
/* =====   Arrows Between Steps   ========================================================================== */
.step-card:not(:last-child)::after {
    content: "←";
    position: absolute;
    inset-inline-end: -24px;
    inset-block-start: 50%;
    color: #5f79ed;
    font-size: 28px;
    font-weight: 400;
    line-height: 1;
    transform: translateY(-50%);
}
/* ====   Responsive   ========================================================================== */
@media (max-width: 992px) {
    .steps-heading {
        margin-bottom: 34px;
    }
    .steps-grid {
        max-width: 680px;
        margin-inline: auto;
        grid-template-columns: 1fr;
        gap: 46px;
    }
    .step-card {
        min-height: 150px;
        padding: 28px 26px;
    }
    .step-card:not(:last-child)::after {
        content: "↓";
        inset-inline-start: 50%;
        inset-inline-end: auto;
        inset-block-start: auto;
        inset-block-end: -37px;
        transform: translateX(-50%);
        font-size: 26px;
    }
}
@media (max-width: 600px) {
    .steps-heading {
        margin-bottom: 32px;
    }
    .steps-label {
        font-size: 13px;
    }
    .steps-heading h2 {
        font-size: 29px;
    }
    .steps-description {
        font-size: 14px;
    }
    .steps-grid {
        gap: 42px;
    }
    .step-card {
        min-height: auto;
        padding: 28px 20px 22px;
        gap: 15px;
        border-radius: 15px;
    }
    .step-number {
        inset-block-start: -13px;
        inset-inline-start: 17px;
        width: 38px;
        height: 38px;
        font-size: 16px;
    }
    .step-icon {
        width: 50px;
        height: 50px;
        flex-basis: 50px;
    }
    .step-icon svg {
        width: 39px;
        height: 39px;
    }
    .step-content h3 {
        font-size: 15px;
    }
    .step-content p {
        font-size: 12.5px;
        line-height: 1.85;
    }
}
@media (max-width: 420px) {
    .steps-heading h2 {
        font-size: 27px;
    }
    .step-card {
        align-items: flex-start;
        padding: 27px 17px 20px;
        gap: 12px;
    }
    .step-icon {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }
    .step-icon svg {
        width: 34px;
        height: 34px;
    }
}


/* ==========================================================================
   Feature Details
   ========================================================================== */
.feature-details {
    padding-bottom: 70px;
    background: #fff;
}
/* ====   Section Heading   ========================================================================== */
.feature-details__heading {
    max-width: 680px;
    margin: 0 auto 52px;
    text-align: center;
}
.feature-details__label {
    margin: 0 0 12px;
    color: var(--primary);
    font-size: 14px;
    font-weight: 800;
}
.feature-details__heading h2 {
    margin: 0;
    color: var(--navy);
    font-size: clamp(29px, 3vw, 42px);
    line-height: 1.45;
    text-wrap: balance;
}
.feature-details__description {
    margin: 11px 0 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.9;
    text-wrap: pretty;
}
/* ====   Feature Row   ========================================================================== */
.feature-row {
    min-height: 280px;
    margin-block: 24px;
    padding: 44px 54px;
    display: grid;
    grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: clamp(45px, 6vw, 75px);
    background: linear-gradient(135deg, #fbfcff 0%, #f7f9ff 100%);
    border: 1px solid #edf0f7;
    border-radius: 22px;
}
/* Reverse rows */
.feature-row--reverse .feature-text {
    order: 2;
}
.feature-row--reverse > :last-child {
    order: 1;
}
/* ====   Feature Text   ========================================================================== */
.feature-text {
    min-width: 0;
}
.feature-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    color: var(--primary);
    background: linear-gradient(135deg, #f0efff, #e8eaff);
    border: 1px solid #dedfff;
    border-radius: 13px;
}
.feature-icon svg {
    width: 25px;
    height: 25px;
    display: block;
}
.feature-text h3 {
    margin: 15px 0 8px;
    color: var(--navy);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.6;
}
.feature-text p {
    max-width: 520px;
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.9;
    text-wrap: pretty;
}
/* ====   Mini UI   ========================================================================== */
.mini-ui,
.devices-preview {
    min-width: 0;
}
.mini-ui {
    padding: 25px;
    background: rgba(255, 255, 255, .97);
    border: 1px solid #e4e8f2;
    border-radius: 17px;
    box-shadow: 0 20px 45px rgba(31, 42, 85, .08), 0 5px 15px rgba(79, 70, 229, .035);
}
.mini-ui__inner {
    min-width: 0;
}
.mini-ui__label {
    display: block;
    color: #8a93a7;
    font-size: 11px;
    font-weight: 700;
}
/* ====   Time Preview   ========================================================================== */
.time-ui__fields {
    margin-top: 14px;
    display: grid;
    grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}
.time-field {
    padding: 12px 14px;
    color: var(--muted);
    background: #f8f9fc;
    border: 1px solid #e9ebf1;
    border-radius: 10px;
    font-size: 11px;
}
.time-field strong {
    display: block;
    margin-top: 4px;
    color: var(--navy);
    font-size: 19px;
    font-weight: 800;
    direction: ltr;
}
.time-ui__fields b {
    color: #9aa3b5;
    font-size: 11px;
    font-weight: 700;
}
/* ====   Project Preview   ========================================================================== */
.project-ui__list {
    display: grid;
    gap: 18px;
}
.project-progress {
    display: grid;
    grid-template-columns:minmax(0, 1fr) auto;
    gap: 5px 10px;
}
.project-progress strong {
    color: var(--navy);
    font-size: 13px;
}
.project-progress small {
    color: var(--muted);
    font-size: 10px;
}
.project-progress__bar {
    grid-column: 1 / -1;
    height: 7px;
    overflow: hidden;
    background: #edf0f6;
    border-radius: 20px;
    direction: ltr;
}
.project-progress__bar i {
    height: 100%;
    display: block;
    background: linear-gradient(90deg, #625bf6, #4f46e5);
    border-radius: inherit;
}
.progress-67 {
    width: 67%;
}
.progress-70 {
    width: 70%;
}
.progress-50 {
    width: 50%;
}
/* ====   Theme Preview   ========================================================================== */
.theme-ui__title {
    color: var(--navy);
    font-size: 14px;
}
.theme-options {
    margin-block: 17px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.theme-options span {
    padding: 11px;
    color: var(--muted);
    background: #f6f7fa;
    border: 1px solid #e8ebf1;
    border-radius: 9px;
    text-align: center;
    font-size: 12px;
}
.theme-options .selected {
    color: var(--primary);
    background: var(--primary-soft);
    border-color: #b9c0ff;
    font-weight: 700;
}
.color-options {
    display: flex;
    align-items: center;
    gap: 12px;
}
.color-options i {
    width: 26px;
    height: 26px;
    display: block;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #dce0e9;
}
.color-primary {
    background: var(--primary);
}
.color-green {
    background: #159e72;
}
.color-blue {
    background: #3182ce;
}
.color-amber {
    background: #d78617;
}
.color-pink {
    background: #d45b7a;
}
/* ====   Devices Preview   ========================================================================== */
.devices-preview {
    display: grid;
    place-items: center;
}
.devices {
    position: relative;
    width: 100%;
    max-width: 360px;
    height: 190px;
    display: grid;
    place-items: center;
}
.device {
    position: absolute;
    display: block;
    background: linear-gradient(135deg, #f4f5ff, #dce8ff);
    border-style: solid;
    border-color: #27345c;
    box-shadow: 0 14px 32px rgba(34, 49, 90, .14);
}
.desktop {
    width: 235px;
    height: 140px;
    border-width: 7px;
    border-radius: 9px;
}
.desktop::after {
    content: "";
    position: absolute;
    width: 70px;
    height: 13px;
    inset-inline-start: 50%;
    bottom: -24px;
    background: #27345c;
    border-radius: 2px;
    transform: translateX(-50%);
}
.tablet {
    width: 82px;
    height: 115px;
    inset-inline-start: 5%;
    inset-block-end: 4px;
    border-width: 5px;
    border-radius: 10px;
}
.phone {
    width: 52px;
    height: 96px;
    inset-inline-end: 8%;
    inset-block-end: 0;
    border-width: 5px;
    border-radius: 11px;
}
/* =====   Responsive   ========================================================================== */
@media (max-width: 992px) {
    .feature-details__heading {
        margin-bottom: 42px;
    }
    .feature-row,
    .feature-row--reverse {
        grid-template-columns: 1fr;
        gap: 35px;
        padding: 38px 42px;
    }
    .feature-row--reverse .feature-text,
    .feature-row--reverse > :last-child {
        order: initial;
    }
    .feature-text {
        max-width: 620px;
        margin-inline: auto;
        text-align: center;
    }
    .feature-icon {
        margin-inline: auto;
    }
    .feature-text p {
        margin-inline: auto;
    }
    .mini-ui,
    .devices-preview {
        width: 100%;
        max-width: 650px;
        margin-inline: auto;
    }
}
@media (max-width: 600px) {
    .feature-details {
        padding-bottom: 50px;
    }
    .feature-details__heading {
        margin-bottom: 32px;
    }
    .feature-details__label {
        font-size: 13px;
    }
    .feature-details__heading h2 {
        font-size: 29px;
    }
    .feature-details__description {
        font-size: 14px;
    }
    .feature-row {
        min-height: auto;
        margin-block: 16px;
        padding: 28px 20px;
        gap: 28px;
        border-radius: 17px;
    }
    .feature-icon {
        width: 44px;
        height: 44px;
        border-radius: 11px;
    }
    .feature-icon svg {
        width: 22px;
        height: 22px;
    }
    .feature-text h3 {
        margin-top: 12px;
        font-size: 19px;
    }
    .feature-text p {
        font-size: 13px;
        line-height: 1.9;
    }
    .mini-ui {
        padding: 19px;
        border-radius: 14px;
    }
    .time-ui__fields {
        gap: 8px;
    }
    .time-field {
        padding: 10px;
        font-size: 10px;
    }
    .time-field strong {
        font-size: 16px;
    }
    .devices {
        height: 165px;
        transform: scale(.9);
    }
}
@media (max-width: 420px) {
    .feature-details__heading h2 {
        font-size: 27px;
    }
    .feature-row {
        padding-inline: 16px;
    }
    .time-ui__fields {
        grid-template-columns: 1fr;
    }
    .time-ui__fields b {
        text-align: center;
    }
    .project-progress {
        grid-template-columns: 1fr;
    }
    .project-progress small {
        grid-row: 2;
    }
    .project-progress__bar {
        grid-row: 3;
    }
    .color-options {
        gap: 9px;
    }
    .color-options i {
        width: 23px;
        height: 23px;
    }
    .devices {
        max-width: 300px;
        transform: scale(.82);
    }
}


/* ==========================================================================
   Use Cases
   ========================================================================== */
.use-cases {
    background: linear-gradient(180deg, var(--surface) 0%, #fbfcff 100%);
}
/* ===   Heading   ========================================================================== */
.use-cases__heading {
    max-width: 700px;
    margin: 0 auto 42px;
    text-align: center;
}
.use-cases__label {
    margin: 0 0 9px;
    color: var(--primary);
    font-size: 14px;
    font-weight: 800;
}
.use-cases__heading h2 {
    margin: 0;
    color: var(--navy);
    font-size: clamp(29px, 3vw, 42px);
    line-height: 1.45;
    text-wrap: balance;
}
.use-cases__description {
    margin: 11px auto 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.9;
    text-wrap: pretty;
}
/* ===   Grid   ========================================================================== */
.uses-grid {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap: 16px;
    list-style: none;
}
/* ====   Card   ========================================================================== */
.use-card {
    min-width: 0;
    min-height: 210px;
    padding: 26px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: rgba(255, 255, 255, .92);
    border: 1px solid #e6eaf2;
    border-radius: 17px;
    box-shadow: 0 8px 24px rgba(31, 42, 85, .035);
}
/* ===   Icon   ========================================================================== */
.use-card__icon {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 14px;
}
.use-card__icon svg {
    width: 27px;
    height: 27px;
    display: block;
}
/* Personal */
.use-card--personal .use-card__icon {
    color: #4f6ff1;
    background: #edf1ff;
}
/* Tasks */
.use-card--tasks .use-card__icon {
    color: #16976e;
    background: #e7f7f1;
}
/* Study */
.use-card--study .use-card__icon {
    color: #3777e8;
    background: #eaf2ff;
}
/* Projects */
.use-card--projects .use-card__icon {
    color: #22947d;
    background: #e9f7f4;
}
/* Freelancer */
.use-card--freelance .use-card__icon {
    color: #4c6ee8;
    background: #edf1ff;
}
/* ====   Content   ========================================================================== */
.use-card h3 {
    margin: 15px 0 7px;
    color: var(--navy);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.6;
}
.use-card p {
    margin: 0;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.9;
    text-wrap: pretty;
}
/* ===   Responsive   ========================================================================== */
@media (max-width: 1180px) {
    .uses-grid {
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }
    .use-card {
        min-height: 195px;
    }

}
@media (max-width: 768px) {
    .use-cases__heading {
        margin-bottom: 34px;
    }
    .uses-grid {
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
    .use-card {
        min-height: 185px;
        padding: 23px 17px;
    }
}
@media (max-width: 520px) {
    .use-cases__label {
        font-size: 13px;
    }
    .use-cases__heading h2 {
        font-size: 29px;
    }
    .use-cases__description {
        font-size: 14px;
    }
    .uses-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .use-card {
        min-height: 0;
        padding: 20px;
        display: grid;
        grid-template-columns: 46px minmax(0, 1fr);
        align-items: center;
        column-gap: 14px;
        text-align: start;
        border-radius: 15px;
    }
    .use-card__icon {
        width: 46px;
        height: 46px;
        grid-row: 1 / 3;
        border-radius: 12px;
    }
    .use-card__icon svg {
        width: 24px;
        height: 24px;
    }
    .use-card h3 {
        margin: 0 0 3px;
        font-size: 15px;
    }
    .use-card p {
        font-size: 12px;
        line-height: 1.8;
    }
}

/* ==========================================================================
   CTA
   ========================================================================== */
.cta-section {
    padding-block: 72px;
    background: var(--surface);
}
.cta-card {
    position: relative;
    min-height: 170px;
    overflow: hidden;
    padding: 32px 140px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    color: #fff;
    background: linear-gradient(120deg, #465de5 0%, #5368ee 48%, #4b60df 100%);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 22px;
    box-shadow: 0 22px 55px rgba(55, 72, 190, .18);
}
/* ===   Content   ========================================================================== */
.cta-copy {
    position: relative;
    z-index: 2;
    max-width: 650px;
}
.cta-copy h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(24px, 2.4vw, 32px);
    font-weight: 850;
    line-height: 1.5;
    text-wrap: balance;
}
.cta-copy p {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, .78);
    font-size: 15px;
    line-height: 1.9;
}
/* ====   CTA Button   ========================================================================== */
.cta-action {
    position: relative;
    z-index: 2;
    min-width: 210px;
    flex-shrink: 0;
    gap: 9px;
    white-space: nowrap;
}
.cta-action svg {
    width: 18px;
    height: 18px;
    display: block;
    flex-shrink: 0;
    transition: transform .2s ease;
}
.cta-action:hover svg {
    transform: translateX(-3px);
}
/* ===   Decorations   ========================================================================== */
.cta-decoration {
    position: absolute;
    display: block;
    color: rgba(255, 255, 255, .11);
    pointer-events: none;
}
.cta-decoration svg {
    width: 100%;
    height: 100%;
    display: block;
}
.cta-decoration--calendar {
    width: 92px;
    height: 92px;
    inset-inline-start: 24px;
    inset-block-start: 27px;
}
.cta-decoration--shapes {
    width: 120px;
    height: 120px;
    inset-inline-end: 18px;
    inset-block-start: 18px;
}
/* ===   Responsive   ========================================================================== */
@media (max-width: 900px) {
    .cta-section {
        padding-block: 60px;
    }
    .cta-card {
        min-height: auto;
        padding: 38px 40px;
        gap: 30px;
    }
    .cta-copy {
        max-width: 520px;
    }
    .cta-action {
        min-width: 185px;
    }
    .cta-decoration--calendar {
        width: 75px;
        height: 75px;
    }
    .cta-decoration--shapes {
        width: 100px;
        height: 100px;
    }
}
@media (max-width: 700px) {
    .cta-section {
        padding-block: 48px;
    }
    .cta-card {
        padding: 36px 24px;
        flex-direction: column;
        align-items: stretch;
        gap: 25px;
        text-align: center;
        border-radius: 18px;
    }
    .cta-copy {
        max-width: 520px;
        margin-inline: auto;
    }
    .cta-copy h2 {
        font-size: 24px;
    }
    .cta-copy p {
        font-size: 14px;
    }
    .cta-action {
        width: 100%;
        min-width: 0;
        align-self: center;
    }
    .cta-decoration--calendar {
        width: 65px;
        height: 65px;
        inset-inline-start: 10px;
        inset-block-start: 18px;
    }
    .cta-decoration--shapes {
        width: 80px;
        height: 80px;

        inset-inline-end: 5px;
        inset-block-end: 4px;
        inset-block-start: auto;
    }
}
@media (max-width: 420px) {
    .cta-card {
        padding: 32px 18px;
        border-radius: 16px;
    }
    .cta-copy h2 {
        font-size: 21px;
    }
    .cta-copy p {
        font-size: 13px;
        line-height: 1.85;
    }
    .cta-decoration {
        opacity: .65;
    }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq {
    background: #fff;
}
.faq-container {
    max-width: 900px;
}
/* ====   Heading   ========================================================================== */
.faq-heading {
    max-width: 650px;
    margin: 0 auto 40px;
    text-align: center;
}
.faq-label {
    margin: 0 0 9px;
    color: var(--primary);
    font-size: 14px;
    font-weight: 800;
}
.faq-heading h2 {
    margin: 0;
    color: var(--navy);
    font-size: clamp(29px, 3vw, 42px);
    line-height: 1.45;
    text-wrap: balance;
}
.faq-description {
    margin: 11px auto 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.9;
    text-wrap: pretty;
}
/* ====   FAQ List   ========================================================================== */
.faq-list {
    display: grid;
    gap: 12px;
}
/* ====   FAQ Item   ========================================================================== */
.faq-item {
    overflow: hidden;
    background: #fff;
    border: 1px solid #e6eaf2;
    border-radius: 14px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.faq-item[open] {
    border-color: #d9dcfb;
    box-shadow: 0 10px 28px rgba(31, 42, 85, .055);
}
/* ===   Question   ========================================================================== */
.faq-item summary {
    min-height: 64px;
    padding: 17px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    color: var(--navy);
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.faq-item summary::-webkit-details-marker {
    display: none;
}
.faq-item summary::marker {
    content: "";
}
.faq-item summary h3 {
    margin: 0;
    color: inherit;
    font-size: 15px;
    font-weight: 750;
    line-height: 1.7;
}
/* ====   Toggle Icon   ========================================================================== */
.faq-toggle {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    color: var(--primary);
    background: var(--primary-soft);
    border-radius: 9px;
}
.faq-toggle svg {
    width: 19px;
    height: 19px;
    display: block;
    transition: transform .2s ease;
}
.faq-item[open] .faq-toggle svg {
    transform: rotate(45deg);
}
/* ====   Answer   ========================================================================== */
.faq-answer {
    padding: 0 20px 20px;
}
.faq-answer p {
    max-width: 760px;
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 2;
}
/* ====   Keyboard Accessibility   ========================================================================== */
.faq-item summary:focus-visible {
    outline: 3px solid rgba(79, 70, 229, .22);
    outline-offset: -3px;
}
/* ====   Responsive   ========================================================================== */
@media (max-width: 600px) {
    .faq-heading {
        margin-bottom: 30px;
    }
    .faq-label {
        font-size: 13px;
    }
    .faq-heading h2 {
        font-size: 29px;
    }
    .faq-description {
        font-size: 14px;
    }
    .faq-list {
        gap: 10px;
    }
    .faq-item {
        border-radius: 12px;
    }
    .faq-item summary {
        min-height: 60px;
        padding: 15px 16px;
        gap: 12px;
    }
    .faq-item summary h3 {
        font-size: 14px;
    }
    .faq-toggle {
        width: 31px;
        height: 31px;
        flex-basis: 31px;
        border-radius: 8px;
    }
    .faq-toggle svg {
        width: 17px;
        height: 17px;
    }
    .faq-answer {
        padding: 0 16px 17px;
    }
    .faq-answer p {
        font-size: 13px;
        line-height: 1.9;
    }
}