/* =========================================================
   CUBEXSOFT DATA RECOVERY SOFTWARE
   Modern Product Page Styles
   File: data-recovery.css
   ========================================================= */


/* =========================================================
   ROOT / PAGE VARIABLES
   ========================================================= */

:root {
    --dr-blue: #2563eb;
    --dr-blue-dark: #12335b;
    --dr-blue-light: #eff6ff;

    --dr-orange: #f97316;
    --dr-green: #159447;

    --dr-text: #172033;
    --dr-text-light: #64748b;
    --dr-border: #e2e8f0;
    --dr-bg: #ffffff;
    --dr-bg-light: #f8fafc;

    --dr-container: 1240px;

    --dr-radius-sm: 6px;
    --dr-radius-md: 10px;
    --dr-radius-lg: 14px;

    --dr-shadow-sm:
        0 2px 8px rgba(15, 23, 42, 0.05);

    --dr-shadow-md:
        0 10px 30px rgba(15, 23, 42, 0.08);

    --dr-shadow-lg:
        0 20px 50px rgba(15, 23, 42, 0.12);
}


/* =========================================================
   MAIN CONTAINER
   ========================================================= */

.dr-container {
    width: 100%;
    max-width: var(--dr-container);
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}


/* =========================================================
   PRODUCT NAVIGATION
   ========================================================= */

/* =========================================================
   STICKY PRODUCT NAVIGATION
========================================================= */

.dr-product-nav {
    position: sticky;
    top: 0;
    z-index: 1000;

    width: 100%;

    background: rgba(255, 255, 255, 0.97);

    border-bottom: 1px solid #dfe7f0;

    box-shadow:
        0 3px 14px rgba(15, 23, 42, 0.045);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


.dr-product-nav-container {
    width: min(1500px, calc(100% - 60px));

    margin: 0 auto;
}


.dr-product-nav-inner {
    min-height: 64px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;
}


/* =========================================================
   NAVIGATION LINKS
========================================================= */

.dr-product-nav-links {
    flex: 1;

    display: flex;
    align-items: center;

    gap: 25px;

    margin: 0;
    padding: 0;

    list-style: none;
}


.dr-product-nav-links li {
    margin: 0;
    padding: 0;
}


.dr-product-nav-links a {
    position: relative;

    display: inline-flex;
    align-items: center;

    min-height: 64px;

    color: #334155;

    font-size: 13px;
    font-weight: 600;

    text-decoration: none;

    white-space: nowrap;

    transition:
        color .2s ease;
}


.dr-product-nav-links a::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 2px;

    background: #2563eb;

    transform: scaleX(0);
    transform-origin: center;

    transition:
        transform .22s ease;
}


.dr-product-nav-links a:hover {
    color: #2563eb;
}


.dr-product-nav-links a:hover::after,
.dr-product-nav-links a.active::after {
    transform: scaleX(1);
}


.dr-product-nav-links a.active {
    color: #2563eb;
}


/* =========================================================
   NAV ACTION BUTTONS
========================================================= */

.dr-product-nav-actions {
    flex: 0 0 auto;

    display: flex;
    align-items: center;

    gap: 9px;
}


.dr-product-nav-download,
.dr-product-nav-buy {
    min-height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    padding: 0 16px;

    border-radius: 7px;

    font-size: 12px;
    font-weight: 700;

    text-decoration: none;

    white-space: nowrap;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}


.dr-product-nav-download svg,
.dr-product-nav-buy svg {
    width: 15px;
    height: 15px;

    stroke-width: 2.4;
}


/* Download */

.dr-product-nav-download {
    background: #eff6ff;

    border: 1px solid #bfdbfe;

    color: #2563eb;
}


.dr-product-nav-download:hover {
    background: #dbeafe;

    border-color: #93c5fd;

    color: #1d4ed8;

    transform: translateY(-1px);
}


/* Buy */

.dr-product-nav-buy {
    background: #2563eb;

    border: 1px solid #2563eb;

    color: #ffffff;

    box-shadow:
        0 5px 14px rgba(37, 99, 235, .18);
}


.dr-product-nav-buy:hover {
    background: #1d4ed8;

    border-color: #1d4ed8;

    color: #ffffff;

    transform: translateY(-1px);

    box-shadow:
        0 7px 18px rgba(37, 99, 235, .25);
}



/* =========================================================
   HERO HIGHLIGHTS
   ========================================================= */

.dr-highlights {
    background: #ffffff;

    padding: 0 0 72px;
}

.dr-highlight-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 18px;
}

.dr-highlight-card {
    min-height: 190px;

    padding: 25px 23px;

    background: #ffffff;

    border: 1px solid var(--dr-border);
    border-radius: var(--dr-radius-md);

    box-shadow: var(--dr-shadow-sm);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.dr-highlight-card:hover {
    transform: translateY(-4px);

    border-color: #bfdbfe;

    box-shadow: var(--dr-shadow-md);
}

.dr-highlight-icon {
    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 17px;

    background: var(--dr-blue-light);

    border-radius: 8px;

    color: var(--dr-blue);

    font-size: 18px;
}

.dr-highlight-card h3 {
    margin: 0 0 9px;

    color: #172033;

    font-size: 17px;
    line-height: 1.35;

    font-weight: 700;
}

.dr-highlight-card p {
    margin: 0;

    color: #64748b;

    font-size: 14px;
    line-height: 1.65;
}


/* =========================================================
   GENERIC DATA RECOVERY SECTION
   Useful for Section 2 onward
   ========================================================= */

.dr-section {
    padding: 82px 0;
}

.dr-section-light {
    background: var(--dr-bg-light);
}

.dr-section-white {
    background: #ffffff;
}

.dr-section-header {
    max-width: 800px;

    margin: 0 auto 45px;

    text-align: center;
}

.dr-section-eyebrow {
    margin-bottom: 10px;

    color: var(--dr-blue);

    font-size: 14px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.dr-section-title {
    margin: 0 0 15px;

    color: #172033;

    font-size: clamp(30px, 3.5vw, 44px);
    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -0.025em;
}

.dr-section-description {
    margin: 0;

    color: #64748b;

    font-size: 17px;
    line-height: 1.7;
}


/* =========================================================
   OVERVIEW CONTENT
   ========================================================= */

.dr-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
    gap: 60px;
    align-items: start;
}

.dr-content h2,
.dr-content h3 {
    color: #172033;
}

.dr-content h2 {
    margin: 0 0 18px;

    font-size: 32px;
    line-height: 1.2;
}

.dr-content h3 {
    margin: 30px 0 12px;

    font-size: 22px;
    line-height: 1.3;
}

.dr-content p {
    margin: 0 0 18px;
    color: #475569;
    font-size: 16px;
    line-height: 1.8;
}

.dr-content ul {
    margin: 24px 0 28px;
    padding: 0;
    list-style: none;
}

.dr-content li {
    position: relative;
    margin: 0 0 13px;
    padding-left: 28px;
    color: #475569;
    font-size: 15px;
    line-height: 1.7;
}

.dr-content li::before {
    content: "\f00c";
    position: absolute;
    left: 0;
    top: 3px;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #159447;
}


/* =========================================================
   INFO CARD
   ========================================================= */

.dr-info-card {
    position: sticky;
    top: 100px;
    padding: 28px;
    background: #f8fbff;
    border: 1px solid #dbe7f5;
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.06);
}

.dr-info-card h3 {
    margin: 0 0 15px;
    color: #12335b;
    font-size: 21px;
    line-height: 1.35;
}

.dr-info-list {
    margin: 0;
    padding: 0;

    list-style: none;
}

.dr-info-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 0;
    border-bottom: 1px solid #edf2f7;
    color: #475569;
    font-size: 14px;
    line-height: 1.5;
}

.dr-info-list li:last-child {
    border-bottom: 0;
}

.dr-info-list i {
    flex: 0 0 auto;

    margin-top: 3px;

    color: var(--dr-blue);
}


/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .dr-hero-grid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(400px, 0.9fr);

        gap: 40px;
    }

    .dr-hero-title {
        font-size: 52px;
    }

    .dr-product-nav-links {
        gap: 18px;
    }

    .dr-product-nav-links a {
        font-size: 13px;
    }

    .dr-highlight-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   RESPONSIVE — MOBILE / SMALL TABLET
   ========================================================= */

@media (max-width: 850px) {

    .dr-product-nav {
        overflow-x: auto;
    }

    .dr-product-nav-inner {
        justify-content: flex-start;

        min-width: max-content;
    }

    .dr-hero {
        padding: 55px 0 50px;
    }

    .dr-hero-grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .dr-hero-content {
        max-width: 760px;
    }

    .dr-hero-title {
        font-size: clamp(42px, 8vw, 56px);
    }

    .dr-hero-description {
        font-size: 17px;
    }

    .dr-hero-visual {
        max-width: 760px;
    }

    .dr-floating-badge {
        right: 15px;
        bottom: 18px;
    }

    .dr-overview-grid {
        grid-template-columns: 1fr;

        gap: 35px;
    }
}


/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .dr-container {
        padding-left: 18px;
        padding-right: 18px;
    }

    .dr-hero {
        padding: 42px 0 42px;
    }

    .dr-eyebrow {
        font-size: 13px;
    }

    .dr-hero-title {
        margin-bottom: 17px;

        font-size: 40px;
        line-height: 1.08;
    }

    .dr-hero-description {
        font-size: 16px;
        line-height: 1.65;
    }

    .dr-hero-trust {
        align-items: flex-start;
        flex-direction: column;

        gap: 9px;
    }

    .dr-hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .dr-btn {
        width: 100%;
    }

    .dr-hero-features {
        grid-template-columns: 1fr;

        gap: 9px;
    }

    .dr-product-screenshot {
        padding: 7px;

        border-radius: 9px;
    }

    .dr-floating-badge {
        position: relative;

        right: auto;
        bottom: auto;

        width: max-content;

        margin: 12px auto 0;
    }

    .dr-highlights {
        padding-bottom: 45px;
    }

    .dr-highlight-grid {
        grid-template-columns: 1fr;

        gap: 13px;
    }

    .dr-highlight-card {
        min-height: auto;
    }

    .dr-section {
        padding: 55px 0;
    }

    .dr-section-header {
        margin-bottom: 32px;
    }

    .dr-section-title {
        font-size: 31px;
    }

    .dr-section-description {
        font-size: 16px;
    }

    .dr-content h2 {
        font-size: 28px;
    }

    .dr-content h3 {
        font-size: 20px;
    }
}


/* =========================================================
   ACCESSIBILITY / REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .dr-btn,
    .dr-highlight-card,
    .dr-product-nav-links a::after {
        transition: none;
    }

    .dr-btn:hover,
    .dr-highlight-card:hover {
        transform: none;
    }
}

@media (max-width: 850px) {

    .dr-overview-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .dr-info-card {
        position: static;
    }

}

/* =========================================================
   SECTION 3 — RECOVERY SOURCES
========================================================= */

.dr-source-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;
}


.dr-source-card {
    position: relative;

    min-height: 245px;

    padding: 27px 25px;

    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 10px;

    box-shadow:
        0 3px 12px rgba(15, 23, 42, 0.04);

    overflow: hidden;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.dr-source-card:hover {
    transform: translateY(-4px);

    border-color: #bfdbfe;

    box-shadow:
        0 12px 30px rgba(15, 23, 42, 0.09);
}


.dr-source-icon {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 18px;

    background: #eff6ff;

    border-radius: 8px;

    color: #2563eb;

    font-size: 19px;
}


.dr-source-number {
    position: absolute;

    top: 22px;
    right: 22px;

    color: #cbd5e1;

    font-size: 13px;
    font-weight: 800;

    letter-spacing: 0.05em;
}


.dr-source-card h3 {
    margin: 0 0 10px;

    color: #172033;

    font-size: 19px;
    line-height: 1.35;

    font-weight: 700;
}


.dr-source-card p {
    margin: 0;

    color: #64748b;

    font-size: 14px;
    line-height: 1.7;
}


/* =========================================================
   FILE SYSTEM STRIP
========================================================= */

.dr-source-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 40px;

    margin-top: 28px;
    padding: 28px 30px;

    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 10px;
}


.dr-source-bottom-content {
    max-width: 620px;
}


.dr-source-bottom-content .dr-section-eyebrow {
    margin-bottom: 7px;
}


.dr-source-bottom-content h3 {
    margin: 0 0 8px;

    color: #172033;

    font-size: 22px;
    line-height: 1.3;
}


.dr-source-bottom-content p {
    margin: 0;

    color: #64748b;

    font-size: 14px;
    line-height: 1.65;
}


.dr-filesystem-list {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    flex-wrap: wrap;

    gap: 8px;
}


.dr-filesystem-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 70px;

    padding: 9px 13px;

    background: #f8fafc;

    border: 1px solid #dbe3ef;
    border-radius: 6px;

    color: #334155;

    font-size: 13px;
    font-weight: 700;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    .dr-source-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .dr-source-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .dr-filesystem-list {
        justify-content: flex-start;
    }

}


@media (max-width: 600px) {

    .dr-source-grid {
        grid-template-columns: 1fr;
    }

    .dr-source-card {
        min-height: auto;
    }

    .dr-source-bottom {
        padding: 22px;
    }

}

/* =========================================================
   SECTION 4 — HOW IT WORKS
   CONNECTED WORKFLOW STYLE
   ========================================================= */

.dr-how-section {
    background: #f8fafc;
}

.dr-how-header {
    max-width: 760px;
    margin: 0 0 52px;
}

.dr-how-header .dr-section-title {
    margin-bottom: 15px;
}


/* WORKFLOW */

.dr-workflow {
    position: relative;
    max-width: 920px;
    margin: 0 auto;
    padding-left: 76px;
}


/* Vertical connecting line */

.dr-workflow::before {
    content: "";

    position: absolute;

    left: 25px;
    top: 26px;
    bottom: 26px;

    width: 2px;

    background: #dbe7f5;
}


/* Individual step */

.dr-workflow-item {
    position: relative;

    min-height: 120px;

    padding-bottom: 28px;
}

.dr-workflow-item:last-child {
    padding-bottom: 0;
}


/* Number marker */

.dr-workflow-marker {
    position: absolute;

    left: -76px;
    top: 0;

    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #ffffff;

    border: 2px solid #2563eb;
    border-radius: 50%;

    z-index: 2;
}

.dr-workflow-marker span {
    color: #2563eb;

    font-size: 13px;
    font-weight: 800;

    letter-spacing: 0.03em;
}


/* Content */

.dr-workflow-content {
    display: flex;
    align-items: flex-start;

    gap: 20px;

    padding: 23px 25px;

    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 10px;

    box-shadow:
        0 3px 12px rgba(15, 23, 42, 0.04);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.dr-workflow-content:hover {
    transform: translateX(4px);

    border-color: #bfdbfe;

    box-shadow:
        0 10px 25px rgba(15, 23, 42, 0.08);
}


/* Icon */

.dr-workflow-icon {
    flex: 0 0 auto;

    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #eff6ff;

    border-radius: 8px;

    color: #2563eb;

    font-size: 18px;
}


/* Text */

.dr-workflow-content h3 {
    margin: 0 0 7px;

    color: #172033;

    font-size: 18px;
    line-height: 1.4;

    font-weight: 700;
}

.dr-workflow-content p {
    max-width: 720px;

    margin: 0;

    color: #64748b;

    font-size: 14px;
    line-height: 1.7;
}


/* =========================================================
   SECTION 4 — RESPONSIVE
   ========================================================= */

@media (max-width: 600px) {

    .dr-how-header {
        margin-bottom: 35px;
    }

    .dr-workflow {
        padding-left: 0;
    }

    .dr-workflow::before {
        display: none;
    }

    .dr-workflow-item {
        min-height: auto;
        padding-bottom: 14px;
    }

    .dr-workflow-marker {
        position: static;

        width: 44px;
        height: 44px;

        margin-bottom: 10px;
    }

    .dr-workflow-content {
        padding: 20px;

        gap: 15px;
    }

    .dr-workflow-icon {
        width: 42px;
        height: 42px;

        font-size: 16px;
    }

    .dr-workflow-content h3 {
        font-size: 17px;
    }

}
/* =========================================================
   SECTION 5 — FEATURES & BENEFITS
========================================================= */

.dr-features-section {
    position: relative;
    padding: 90px 0 100px;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
}


/* =========================================================
   FEATURES HEADER
========================================================= */

.dr-features-header {
    max-width: 820px;
    margin: 0 auto 58px;
    text-align: center;
}

.dr-features-header .dr-section-eyebrow {
    margin-bottom: 12px;
}

.dr-features-header .dr-section-title {
    margin-bottom: 16px;
}

.dr-features-header .dr-section-description {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   FEATURE LIST
========================================================= */

.dr-feature-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}


/* =========================================================
   FEATURE ITEM
========================================================= */

.dr-feature-item {
    position: relative;

    display: grid;
    grid-template-columns: 42px 52px minmax(0, 1fr);
    column-gap: 18px;

    padding: 30px 30px 32px;

    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 10px;

    box-shadow:
        0 3px 14px rgba(15, 23, 42, 0.04);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.dr-feature-item:hover {
    transform: translateY(-3px);

    border-color: #bfdbfe;

    box-shadow:
        0 12px 28px rgba(15, 23, 42, 0.08);
}


/* =========================================================
   FEATURE NUMBER
========================================================= */

.dr-feature-number {
    padding-top: 4px;

    color: #94a3b8;

    font-size: 12px;
    line-height: 1;
    font-weight: 800;

    letter-spacing: 0.08em;
}


/* =========================================================
   FEATURE ICON
========================================================= */

.dr-feature-icon {
    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #eff6ff;

    border: 1px solid #dbeafe;
    border-radius: 9px;

    color: #2563eb;

    font-size: 19px;

    flex-shrink: 0;
}


/* =========================================================
   FEATURE CONTENT
========================================================= */

.dr-feature-content {
    min-width: 0;
}

.dr-feature-content h3 {
    margin: 1px 0 10px;

    color: #12335b;

    font-size: 18px;
    line-height: 1.4;
    font-weight: 700;
}

.dr-feature-content p {
    margin: 0;

    color: #64748b;

    font-size: 14px;
    line-height: 1.75;
}

.dr-feature-content a {
    color: #2563eb;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.dr-feature-content a:hover {
    color: #12335b;
}


/* =========================================================
   IMPORTANT CONTENT EMPHASIS
   Keeps existing strong text visually consistent
========================================================= */

.dr-feature-content strong {
    color: #334155;
    font-weight: 700;
}


/* =========================================================
   FEATURE ITEM — ALTERNATING VISUAL DETAIL
========================================================= */

.dr-feature-item:nth-child(4n + 1) .dr-feature-icon,
.dr-feature-item:nth-child(4n + 4) .dr-feature-icon {
    background: #eff6ff;
    color: #2563eb;
}

.dr-feature-item:nth-child(4n + 2) .dr-feature-icon {
    background: #f0fdf4;
    border-color: #dcfce7;
    color: #159447;
}

.dr-feature-item:nth-child(4n + 3) .dr-feature-icon {
    background: #fff7ed;
    border-color: #ffedd5;
    color: #f97316;
}


/* =========================================================
   LARGE FEATURE — FIRST ITEM
========================================================= */

.dr-feature-item:first-child {
    border-top: 3px solid #2563eb;
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 950px) {

    .dr-features-section {
        padding: 75px 0 80px;
    }

    .dr-feature-list {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 600px) {

    .dr-features-section {
        padding: 60px 0 65px;
    }

    .dr-features-header {
        margin-bottom: 38px;
        text-align: left;
    }

    .dr-features-header .dr-section-description {
        margin-left: 0;
    }

    .dr-feature-list {
        gap: 15px;
    }

    .dr-feature-item {
        grid-template-columns: 36px 46px minmax(0, 1fr);
        column-gap: 13px;

        padding: 23px 19px 25px;
    }

    .dr-feature-number {
        font-size: 11px;
    }

    .dr-feature-icon {
        width: 46px;
        height: 46px;

        font-size: 17px;
    }

    .dr-feature-content h3 {
        font-size: 17px;
        line-height: 1.45;
    }

    .dr-feature-content p {
        font-size: 14px;
        line-height: 1.7;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .dr-feature-item {
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .dr-feature-number {
        padding-top: 0;
    }

    .dr-feature-icon {
        margin-bottom: 2px;
    }

}
/* =========================================
   SECTION 6: WHAT YOU CAN RECOVER
========================================= */

.dr-recover-section {
    background: #ffffff;
}


/* =========================================
   FILE TYPES
========================================= */

.dr-recover-block {
    margin-top: 50px;
}

.dr-recover-block-header {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 28px;
}

.dr-recover-block-number {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #2563eb;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
}

.dr-recover-block-header h3 {
    margin: 2px 0 7px;
    color: #12335b;
    font-size: 24px;
    line-height: 1.35;
    font-weight: 700;
}

.dr-recover-block-header p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.65;
}


/* File grid */

.dr-recover-file-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.dr-recover-file-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 20px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.dr-recover-file-card:hover {
    transform: translateY(-3px);
    border-color: #bfdbfe;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .07);
}

.dr-recover-file-icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    color: #2563eb;
    border-radius: 8px;
    font-size: 18px;
}

.dr-recover-file-content {
    min-width: 0;
}

.dr-recover-file-content h4 {
    margin: 1px 0 7px;
    color: #172033;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 700;
}

.dr-recover-file-content p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.65;
}


/* =========================================
   DEVICES
========================================= */

.dr-recover-device-block {
    margin-top: 75px;
    padding: 42px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
}

.dr-recover-device-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 30px;
}

.dr-recover-device-header h3 {
    margin: 3px 0 8px;
    color: #12335b;
    font-size: 24px;
    line-height: 1.35;
    font-weight: 700;
}

.dr-recover-device-header p {
    max-width: 680px;
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.65;
}

.dr-recover-device-label {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    background: #ffffff;
    border: 1px solid #dbe7f5;
    color: #2563eb;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.dr-recover-device-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.dr-recover-device-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.dr-recover-device-card:hover {
    border-color: #bfdbfe;
    box-shadow: 0 7px 18px rgba(15, 23, 42, .06);
}

.dr-recover-device-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    color: #2563eb;
    border-radius: 7px;
    font-size: 16px;
}

.dr-recover-device-card h4 {
    margin: 1px 0 5px;
    color: #172033;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 700;
}

.dr-recover-device-card p {
    margin: 0;
    color: #64748b;
    font-size: 12.5px;
    line-height: 1.6;
}


/* =========================================
   DATA LOSS SCENARIOS
========================================= */

.dr-loss-section {
    margin-top: 50px;
}

.dr-loss-header {
    max-width: 760px;
    margin-bottom: 30px;
}

.dr-loss-header h3 {
    margin: 4px 0 9px;
    color: #12335b;
    font-size: 26px;
    line-height: 1.35;
    font-weight: 700;
}

.dr-loss-header p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.7;
}

.dr-loss-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.dr-loss-card {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 26px 24px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 3px solid #2563eb;
    border-radius: 8px;
}

.dr-loss-number {
    flex: 0 0 auto;
    color: #2563eb;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.5;
}

.dr-loss-content {
    min-width: 0;
}

.dr-loss-content h4 {
    margin: 0 0 12px;
    color: #172033;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 700;
}

.dr-loss-content ul {
    margin: 0;
    padding-left: 18px;
}

.dr-loss-content li {
    margin: 0 0 8px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
}

.dr-loss-content li:last-child {
    margin-bottom: 0;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1000px) {

    .dr-recover-file-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dr-recover-device-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 760px) {

    .dr-recover-block-header {
        gap: 14px;
    }

    .dr-recover-block-header h3,
    .dr-recover-device-header h3 {
        font-size: 21px;
    }

    .dr-recover-file-grid,
    .dr-recover-device-grid,
    .dr-loss-grid {
        grid-template-columns: 1fr;
    }

    .dr-recover-device-block {
        padding: 28px 20px;
        border-radius: 10px;
    }

    .dr-recover-device-header {
        display: block;
    }

    .dr-recover-device-label {
        margin-top: 18px;
    }

    .dr-loss-section {
        margin-top: 55px;
    }

}

@media (max-width: 520px) {

    .dr-recover-file-card {
        padding: 18px;
    }

    .dr-recover-file-icon {
        width: 42px;
        height: 42px;
        font-size: 16px;
    }

    .dr-loss-card {
        padding: 21px 18px;
    }

}
/* =========================================================
   DATA RECOVERY — NEW PAGE SYSTEM
========================================================= */

.dr-wide-container {
    width: min(1520px, calc(100% - 60px));
    margin: 0 auto;
}


/* =========================================================
   COMMON
========================================================= */

.dr-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.6px;
    color: #12335b;
    text-transform: uppercase;
}

.dr-eyebrow-blue {
    color: #2563eb;
}

.dr-eyebrow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f97316;
    box-shadow: 0 0 0 5px rgba(249,115,22,.10);
}

.dr-section-heading {
    max-width: 900px;
    margin: 0 auto 55px;
    text-align: center;
}

.dr-section-heading h2 {
    margin: 17px 0 16px;
    font-size: clamp(36px, 4vw, 58px);
    line-height: 1.08;
    letter-spacing: -2px;
    color: #12335b;
    font-weight: 800;
}

.dr-section-heading h2 span {
    color: #2563eb;
}

.dr-section-heading p {
    max-width: 820px;
    margin: 0 auto;
    font-size: 17px;
    line-height: 1.75;
    color: #64748b;
}


/* =========================================================
   HERO
========================================================= */

.dr-hero {
    position: relative;
    overflow: hidden;
    padding: 85px 0 0;
    background:
        radial-gradient(circle at 80% 20%,
            rgba(37,99,235,.10),
            transparent 30%),
        linear-gradient(180deg, #f7faff 0%, #ffffff 100%);
}

.dr-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, .88fr) minmax(600px, 1.12fr);
    align-items: center;
    gap: 70px;
}

.dr-hero-content {
    position: relative;
    z-index: 2;
    padding-bottom: 60px;
}

.dr-hero-content h1 {
    margin: 20px 0 24px;
    max-width: 700px;
    font-size: clamp(46px, 5vw, 76px);
    line-height: 1.02;
    letter-spacing: -3px;
    color: #12335b;
    font-weight: 850;
}

.dr-hero-content h1 span {
    display: block;
    color: #2563eb;
}

.dr-hero-description {
    max-width: 680px;
    margin: 0;
    font-size: 18px;
    line-height: 1.75;
    color: #52637a;
}

.dr-hero-rating {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 27px;
    font-size: 14px;
    color: #64748b;
}

.dr-stars {
    color: #f59e0b;
    font-size: 17px;
    letter-spacing: 2px;
}

.dr-hero-rating strong {
    color: #172033;
}

.dr-hero-stats {
    display: flex;
    align-items: center;
    gap: 42px;
    margin-top: 23px;
}

.dr-hero-stats > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dr-hero-stats strong {
    font-size: 25px;
    line-height: 1;
    color: #12335b;
}

.dr-hero-stats span {
    font-size: 13px;
    color: #64748b;
}

.dr-hero-actions {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 32px;
}

.dr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    min-height: 54px;
    padding: 0 25px;
    border-radius: 7px;
    font-size: 15px;
    font-weight: 750;
    text-decoration: none !important;
    transition: all .25s ease;
}

.dr-btn-primary {
    color: #fff !important;
    background: #2563eb;
    box-shadow: 0 12px 28px rgba(37,99,235,.22);
}

.dr-btn-primary:hover {
    color: #fff !important;
    background: #1d4ed8;
    transform: translateY(-2px);
}

.dr-btn-primary span {
    font-size: 20px;
    transition: transform .25s ease;
}

.dr-btn-primary:hover span {
    transform: translateX(4px);
}

.dr-btn-secondary {
    color: #12335b !important;
    background: #fff;
    border: 1px solid #d9e2ef;
}

.dr-btn-secondary:hover {
    border-color: #2563eb;
    color: #2563eb !important;
}

.dr-hero-note {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 21px;
    color: #64748b;
    font-size: 13px;
}

.dr-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    color: #fff;
    background: #159447;
    font-size: 11px;
    font-weight: 800;
}

.dr-note-divider {
    width: 1px;
    height: 15px;
    background: #d7dee8;
    margin: 0 4px;
}


/* =========================================================
   HERO PRODUCT VISUAL
========================================================= */

.dr-hero-visual {
    position: relative;
    min-height: 610px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dr-hero-glow {
    position: absolute;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(37,99,235,.16) 0%,
        rgba(37,99,235,.07) 42%,
        transparent 70%
    );
    filter: blur(4px);
}

.dr-app-window {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 780px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #dce5f0;
    border-radius: 12px;
    box-shadow:
        0 35px 80px rgba(18,51,91,.15),
        0 8px 25px rgba(18,51,91,.08);
}

.dr-app-topbar {
    height: 46px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    background: #f8fafc;
    border-bottom: 1px solid #e5eaf0;
}

.dr-app-dots {
    display: flex;
    gap: 6px;
}

.dr-app-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5e1;
}

.dr-app-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    font-weight: 650;
    color: #64748b;
}

.dr-app-image {
    min-height: 470px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef3f8;
}

.dr-app-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}


/* FLOATING BADGES */

.dr-floating-badge {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 17px;
    background: rgba(255,255,255,.96);
    border: 1px solid #e1e8f1;
    border-radius: 8px;
    box-shadow: 0 16px 40px rgba(18,51,91,.13);
    backdrop-filter: blur(8px);
}

.dr-badge-recovery {
    left: -22px;
    bottom: 95px;
}

.dr-badge-scan {
    right: -18px;
    top: 100px;
}

.dr-floating-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 7px;
    color: #2563eb;
    background: #eff6ff;
    font-weight: 800;
}

.dr-floating-badge div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dr-floating-badge strong {
    font-size: 12px;
    color: #172033;
}

.dr-floating-badge small {
    font-size: 11px;
    color: #64748b;
}


/* =========================================================
   CAPABILITY STRIP
========================================================= */

.dr-capability-strip {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    margin-top: -20px;
    border: 1px solid #dce5ef;
    background: rgba(255,255,255,.97);
    box-shadow: 0 18px 45px rgba(18,51,91,.08);
}

.dr-capability-item {
    min-height: 95px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 17px 18px;
    border-right: 1px solid #e7edf4;
}

.dr-capability-item:last-child {
    border-right: 0;
}

.dr-capability-number {
    flex-shrink: 0;
    color: #2563eb;
    font-size: 11px;
    font-weight: 800;
}

.dr-capability-item div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.dr-capability-item strong {
    font-size: 12px;
    line-height: 1.35;
    color: #172033;
}

.dr-capability-item small {
    font-size: 10px;
    line-height: 1.35;
    color: #7b8798;
}


/* =========================================================
   FILE TYPE CLOUD
========================================================= */

.dr-file-cloud {
    position: relative;
    overflow: hidden;

    padding: 115px 0 125px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f9fbff 100%
        );
}


/* Decorative background shapes */

.dr-file-cloud::before {
    content: "";

    position: absolute;

    width: 650px;
    height: 650px;

    left: -430px;
    top: 80px;

    border-radius: 50%;

    background: rgba(37,99,235,.035);
}

.dr-file-cloud::after {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -300px;
    bottom: 80px;

    border-radius: 50%;

    background: rgba(249,115,22,.035);
}

.dr-file-cloud .dr-wide-container {
    position: relative;
    z-index: 2;
}


/* =========================================================
   MAIN FILE PANEL
========================================================= */

.dr-file-cloud-panel {
    position: relative;

    padding: 42px 48px 48px;

    border: 1px solid #dce6f2;
    border-radius: 12px;

    background:
        radial-gradient(
            circle at 10% 15%,
            rgba(37,99,235,.07),
            transparent 24%
        ),
        radial-gradient(
            circle at 90% 90%,
            rgba(249,115,22,.055),
            transparent 22%
        ),
        #f8fbff;

    box-shadow:
        0 18px 50px rgba(18,51,91,.055);
}


/* =========================================================
   FILE PANEL HEADER
========================================================= */

.dr-file-cloud-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 40px;

    padding-bottom: 32px;

    margin-bottom: 34px;

    border-bottom: 1px solid #dfe8f3;
}

.dr-cloud-label {
    display: inline-block;

    margin-bottom: 10px;

    color: #2563eb;

    font-size: 11px;
    font-weight: 850;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}

.dr-file-cloud-header h3 {
    margin: 0;

    color: #12335b;

    font-size: 25px;
    line-height: 1.3;

    font-weight: 800;

    letter-spacing: -.5px;
}


/* =========================================================
   FORMAT COUNT
========================================================= */

.dr-format-count {
    flex-shrink: 0;

    min-width: 130px;

    padding-left: 28px;

    border-left: 1px solid #dce5ef;

    text-align: left;
}

.dr-format-count strong {
    display: block;

    color: #2563eb;

    font-size: 22px;
    line-height: 1.1;

    font-weight: 850;
}

.dr-format-count span {
    display: block;

    margin-top: 5px;

    color: #64748b;

    font-size: 11px;
}


/* =========================================================
   FORMAT CLOUD
========================================================= */

.dr-format-cloud {
    display: flex;

    flex-wrap: wrap;

    align-items: center;
    justify-content: center;

    gap: 11px;

    max-width: 1320px;

    margin: 0 auto;
}


/* =========================================================
   FORMAT CHIP
========================================================= */

.dr-format-chip {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 70px;
    min-height: 40px;

    padding: 0 16px;

    border: 1px solid #d8e2ee;

    border-radius: 6px;

    background: #ffffff;

    color: #40536c;

    font-size: 12px;

    font-weight: 750;

    letter-spacing: .2px;

    box-shadow:
        0 2px 7px rgba(18,51,91,.025);

    transition:
        transform .2s ease,
        border-color .2s ease,
        color .2s ease,
        box-shadow .2s ease;
}

.dr-format-chip:hover {
    transform: translateY(-3px);

    border-color: #8eb2f5;

    color: #2563eb;

    box-shadow:
        0 8px 18px rgba(37,99,235,.10);
}


/* Slightly larger important formats */

.dr-format-chip.chip-large {
    min-width: 78px;

    font-size: 13px;

    color: #12335b;

    background: #ffffff;
}


/* Blue accent */

.dr-format-chip.chip-blue {
    color: #2563eb;

    border-color: #cbdcf9;

    background: #f7faff;
}


/* Orange accent */

.dr-format-chip.chip-orange {
    color: #e85f0b;

    border-color: #f5d6bf;

    background: #fffaf6;
}


/* =========================================================
   STORAGE SECTION
========================================================= */

.dr-storage-section {
    margin-top: 80px;

    padding-top: 65px;

    border-top: 1px solid #dfe7f0;
}

.dr-storage-heading {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 60px;

    margin-bottom: 35px;
}

.dr-storage-heading h3 {
    margin: 5px 0 0;

    color: #12335b;

    font-size: 34px;
    line-height: 1.15;

    letter-spacing: -1px;
}

.dr-storage-heading h3 span {
    color: #2563eb;
}

.dr-storage-heading p {
    max-width: 470px;

    margin: 0;

    color: #64748b;

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   STORAGE LIST
========================================================= */

.dr-storage-list {
    display: grid;

    grid-template-columns: repeat(6, 1fr);

    border: 1px solid #dce5ef;

    background: #ffffff;
}

.dr-storage-item {
    min-height: 125px;

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 22px;

    border-right: 1px solid #e3eaf2;

    transition:
        background .2s ease,
        transform .2s ease;
}

.dr-storage-item:last-child {
    border-right: 0;
}

.dr-storage-item:hover {
    background: #f8fbff;
}


/* =========================================================
   STORAGE ICON
========================================================= */

.dr-storage-icon {
    flex-shrink: 0;

    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background: #eff6ff;

    color: #2563eb;

    font-size: 20px;
}

.dr-storage-item strong {
    display: block;

    margin-bottom: 5px;

    color: #172033;

    font-size: 13px;

    font-weight: 800;
}

.dr-storage-item small {
    display: block;

    color: #718096;

    font-size: 10px;

    line-height: 1.4;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1250px) {

    .dr-file-cloud-panel {
        padding: 35px 30px 40px;
    }

    .dr-storage-list {
        grid-template-columns: repeat(3, 1fr);
    }

    .dr-storage-item:nth-child(3n) {
        border-right: 0;
    }

    .dr-storage-item:nth-child(-n+3) {
        border-bottom: 1px solid #e3eaf2;
    }

}


@media (max-width: 850px) {

    .dr-file-cloud-header {
        align-items: flex-start;

        flex-direction: column;
    }

    .dr-format-count {
        padding-left: 0;

        padding-top: 15px;

        border-left: 0;

        border-top: 1px solid #dce5ef;
    }

    .dr-storage-heading {
        flex-direction: column;

        align-items: flex-start;

        gap: 15px;
    }

}


@media (max-width: 600px) {

    .dr-file-cloud {
        padding: 75px 0 80px;
    }

    .dr-file-cloud-panel {
        padding: 28px 18px 32px;
    }

    .dr-file-cloud-header h3 {
        font-size: 21px;
    }

    .dr-format-cloud {
        justify-content: flex-start;

        gap: 8px;
    }

    .dr-format-chip,
    .dr-format-chip.chip-large {
        min-width: auto;

        min-height: 36px;

        padding: 0 12px;

        font-size: 11px;
    }

    .dr-storage-list {
        grid-template-columns: 1fr;
    }

    .dr-storage-item {
        border-right: 0 !important;

        border-bottom: 1px solid #e3eaf2;
    }

    .dr-storage-item:last-child {
        border-bottom: 0;
    }

}
/* =========================================================
   HERO CAPABILITY SHOWCASE
========================================================= */

.dr-capability-showcase {
    position: relative;
    z-index: 10;

    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));

    gap: 16px;

    margin-top: -10px;
    padding-bottom: 75px;
}


/* =========================================================
   CAPABILITY CARD
========================================================= */

.dr-capability-card {
    position: relative;

    min-height: 330px;

    padding: 28px 27px 25px;

    overflow: hidden;

    border: 1px solid #dfe7f1;
    border-radius: 10px;

    background: #ffffff;

    box-shadow:
        0 12px 35px rgba(18, 51, 91, 0.055);

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease;
}


/* Decorative bottom glow */

.dr-capability-card::after {
    content: "";

    position: absolute;

    width: 190px;
    height: 190px;

    right: -65px;
    bottom: -95px;

    border-radius: 50%;

    opacity: .65;

    pointer-events: none;
}


/* Hover */

.dr-capability-card:hover {
    transform: translateY(-7px);

    box-shadow:
        0 22px 48px rgba(18, 51, 91, 0.11);

    border-color: #cbd9ea;
}


/* =========================================================
   CARD TOP
========================================================= */

.dr-capability-top {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 20px;
}

.dr-capability-number {
    font-size: 14px;
    font-weight: 850;
    line-height: 1;

    letter-spacing: .2px;
}

.dr-capability-line {
    display: block;

    width: 72px;
    height: 2px;

    opacity: .35;

    border-radius: 2px;
}


/* =========================================================
   LARGE ICON
========================================================= */

.dr-capability-icon {
    position: relative;
    z-index: 2;

    width: 108px;
    height: 108px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 0 25px;

    border-radius: 50%;
}

.dr-capability-icon svg {
    width: 62px;
    height: 62px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2.6;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   HEADING
========================================================= */

.dr-capability-card h3 {
    position: relative;
    z-index: 2;

    margin: 0 0 12px;

    color: #172033;

    font-size: 18px;
    line-height: 1.25;

    font-weight: 800;

    letter-spacing: -.35px;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.dr-capability-card p {
    position: relative;
    z-index: 2;

    max-width: 220px;

    margin: 0;

    color: #64748b;

    font-size: 13px;
    line-height: 1.65;
}


/* =========================================================
   ARROW
========================================================= */

.dr-capability-arrow {
    position: absolute;

    left: 27px;
    bottom: 24px;

    z-index: 3;

    width: 43px;
    height: 43px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #ffffff;

    font-size: 22px;
    font-weight: 700;

    box-shadow:
        0 6px 18px rgba(18, 51, 91, .10);

    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease;
}

.dr-capability-card:hover .dr-capability-arrow {
    transform: translateX(4px);
}


/* =========================================================
   BLUE
========================================================= */

.capability-blue {
    background:
        linear-gradient(
            145deg,
            #ffffff 35%,
            #f8fbff 100%
        );
}

.capability-blue::after {
    background: rgba(37, 99, 235, .10);
}

.capability-blue .dr-capability-number {
    color: #2563eb;
}

.capability-blue .dr-capability-line {
    background: #2563eb;
}

.capability-blue .dr-capability-icon {
    color: #2563eb;
    background: #eaf2ff;
}

.capability-blue .dr-capability-arrow {
    color: #2563eb;
}


/* =========================================================
   ORANGE
========================================================= */

.capability-orange {
    background:
        linear-gradient(
            145deg,
            #ffffff 35%,
            #fffaf5 100%
        );
}

.capability-orange::after {
    background: rgba(249, 115, 22, .10);
}

.capability-orange .dr-capability-number {
    color: #f97316;
}

.capability-orange .dr-capability-line {
    background: #f97316;
}

.capability-orange .dr-capability-icon {
    color: #f97316;
    background: #fff0e4;
}

.capability-orange .dr-capability-arrow {
    color: #f97316;
}


/* =========================================================
   GREEN
========================================================= */

.capability-green {
    background:
        linear-gradient(
            145deg,
            #ffffff 35%,
            #f7fffb 100%
        );
}

.capability-green::after {
    background: rgba(21, 148, 71, .10);
}

.capability-green .dr-capability-number {
    color: #159447;
}

.capability-green .dr-capability-line {
    background: #159447;
}

.capability-green .dr-capability-icon {
    color: #159447;
    background: #e8f8ef;
}

.capability-green .dr-capability-arrow {
    color: #159447;
}


/* =========================================================
   PURPLE
========================================================= */

.capability-purple {
    background:
        linear-gradient(
            145deg,
            #ffffff 35%,
            #fbf9ff 100%
        );
}

.capability-purple::after {
    background: rgba(124, 58, 237, .10);
}

.capability-purple .dr-capability-number {
    color: #7c3aed;
}

.capability-purple .dr-capability-line {
    background: #7c3aed;
}

.capability-purple .dr-capability-icon {
    color: #7c3aed;
    background: #f1eaff;
}

.capability-purple .dr-capability-arrow {
    color: #7c3aed;
}


/* =========================================================
   RESPONSIVE — LARGE TABLET
========================================================= */

@media (max-width: 1350px) {

    .dr-capability-showcase {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }

    .dr-capability-card {
        min-height: 300px;
    }

}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 850px) {

    .dr-capability-showcase {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 560px) {

    .dr-capability-showcase {
        grid-template-columns: 1fr;
        gap: 14px;

        padding-bottom: 50px;
    }

    .dr-capability-card {
        min-height: 285px;

        padding: 25px;
    }

}
/* =========================================================
   SUPPORTED STORAGE SOURCES
   EASEUS-STYLE SIMPLE DEVICE GRID
========================================================= */

.dr-storage-section {
    position: relative;

    padding: 105px 0 115px;

    background: #ffffff;
}


/* =========================================================
   HEADING
========================================================= */

.dr-storage-heading {
    max-width: 1050px;

    margin: 0 auto 55px;

    text-align: center;
}

.dr-storage-heading h2 {
    margin: 17px 0 18px;

    color: #12335b;

    font-size: clamp(40px, 4vw, 56px);

    line-height: 1.08;

    letter-spacing: -2px;

    font-weight: 850;
}

.dr-storage-heading h2 span {
    color: #2563eb;
}

.dr-storage-heading p {
    max-width: 850px;

    margin: 0 auto;

    color: #64748b;

    font-size: 17px;

    line-height: 1.75;
}


/* =========================================================
   DEVICE GRID
========================================================= */

.dr-device-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 30px 65px;

    max-width: 1320px;

    margin: 0 auto;
}


/* =========================================================
   DEVICE BOX
========================================================= */

.dr-device-box {

    min-height: 190px;

    display: flex;

    align-items: center;

    gap: 35px;

    padding: 30px 38px;

    border: 1px solid #dfe7f0;

    border-radius: 9px;

    background: #ffffff;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.dr-device-box:hover {

    transform: translateY(-4px);

    border-color: #cbdcf5;

    box-shadow:
        0 15px 35px rgba(18,51,91,.07);
}


/* =========================================================
   ICON
========================================================= */

.dr-device-icon {

    flex-shrink: 0;

    width: 100px;
    height: 100px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 18px;

    background: #eff6ff;

    color: #2563eb;
}

.dr-device-icon svg {

    width: 65px;
    height: 65px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2.4;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   TEXT
========================================================= */

.dr-device-info h3 {

    margin: 0 0 12px;

    color: #172033;

    font-size: 23px;

    line-height: 1.2;

    font-weight: 800;

    letter-spacing: -.4px;
}

.dr-device-info p {

    max-width: 390px;

    margin: 0;

    color: #64748b;

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   SUBTLE ICON VARIATION
========================================================= */

.dr-device-box:nth-child(2) .dr-device-icon {
    color: #f97316;
    background: #fff3e9;
}

.dr-device-box:nth-child(3) .dr-device-icon {
    color: #159447;
    background: #eaf8f0;
}

.dr-device-box:nth-child(4) .dr-device-icon {
    color: #7c3aed;
    background: #f2edff;
}

.dr-device-box:nth-child(5) .dr-device-icon {
    color: #2563eb;
    background: #eff6ff;
}

.dr-device-box:nth-child(6) .dr-device-icon {
    color: #f97316;
    background: #fff3e9;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    .dr-device-grid {

        grid-template-columns: 1fr;

        gap: 22px;

        max-width: 850px;
    }

}


@media (max-width: 600px) {

    .dr-storage-section {

        padding: 75px 0 80px;
    }

    .dr-storage-heading h2 {

        font-size: 38px;

        letter-spacing: -1px;
    }

    .dr-storage-heading p {

        font-size: 15px;
    }

    .dr-device-box {

        min-height: 160px;

        gap: 22px;

        padding: 25px;
    }

    .dr-device-icon {

        width: 78px;
        height: 78px;

        border-radius: 15px;
    }

    .dr-device-icon svg {

        width: 52px;
        height: 52px;
    }

    .dr-device-info h3 {

        font-size: 19px;
    }

    .dr-device-info p {

        font-size: 13px;
    }

}
.dr-storage-heading {
    max-width: 900px;
    margin: 0 auto 52px;
    text-align: center;
}

.dr-storage-heading .dr-eyebrow {
    margin-bottom: 18px;
}

.dr-storage-heading h2 {
    margin: 0 0 18px;
    color: #12335b;
    font-size: 46px;
    line-height: 1.15;
    letter-spacing: -1.3px;
    font-weight: 800;
}

.dr-storage-heading h2 span {
    color: #2563eb;
}

.dr-storage-heading p {
    max-width: 780px;
    margin: 0 auto;
    color: #64748b;
    font-size: 17px;
    line-height: 1.7;
}
/* =========================================
   WHAT CAN YOU RECOVER
========================================= */

.dr-recovery-formats {
    padding: 100px 0 110px;
    background: #f8fafc;
}

.dr-file-heading {
    max-width: 1050px;
    margin: 0 auto 42px;
    text-align: center;
}

.dr-file-eyebrow {
    margin-bottom: 15px;
    color: #2563eb;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}

.dr-file-heading h2 {
    margin: 0 0 16px;
    color: #12335b;
    font-size: 44px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -1.2px;
}

.dr-file-heading h2 span {
    color: #2563eb;
}

.dr-file-heading p {
    max-width: 900px;
    margin: 0 auto;
    color: #64748b;
    font-size: 17px;
    line-height: 1.7;
}


/* =========================================
   CATEGORY TABS
========================================= */

.dr-format-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 auto 28px;
}

.dr-format-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-height: 46px;
    padding: 0 20px;

    border: 1px solid #d8e4f2;
    border-radius: 24px;

    background: #ffffff;

    color: #344b68;

    font-family: inherit;
    font-size: 14px;
    font-weight: 750;

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.dr-format-tab:hover {
    border-color: #bcd3f5;
    color: #2563eb;
    transform: translateY(-1px);
}

.dr-format-tab.active {
    border-color: #2563eb;
    background: #2563eb;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(37, 99, 235, .18);
}

.dr-tab-icon {
    font-size: 15px;
    line-height: 1;
}


/* =========================================
   FORMAT PANEL
========================================= */

.dr-format-panel {
    display: none;

    max-width: 1380px;
    margin: 0 auto;

    padding: 25px 30px 30px;

    border-top: 1px solid #e1e8f1;
}

.dr-format-panel.active {
    display: block;
}


/* =========================================
   FORMAT TAGS
========================================= */

.dr-format-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px 11px;
}

.dr-format-tags span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 38px;
    padding: 0 14px;

    border: 1px solid #d8e3ef;
    border-radius: 6px;

    background: #ffffff;

    color: #294563;

    font-size: 13px;
    line-height: 1;
    font-weight: 700;

    white-space: nowrap;

    transition:
        color .2s ease,
        border-color .2s ease,
        background .2s ease;
}

.dr-format-tags span:hover {
    color: #2563eb;
    border-color: #bcd3f5;
    background: #f7faff;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1100px) {

    .dr-format-tabs {
        max-width: 900px;
    }

    .dr-format-tab {
        padding: 0 16px;
    }
}


@media (max-width: 700px) {

    .dr-recovery-formats {
        padding: 75px 0 80px;
    }

    .dr-file-heading h2 {
        font-size: 34px;
    }

    .dr-file-heading p {
        font-size: 15px;
    }

    .dr-format-tabs {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;

        padding: 4px 2px 12px;

        scrollbar-width: thin;
    }

    .dr-format-tab {
        flex: 0 0 auto;
    }

    .dr-format-panel {
        padding: 22px 10px;
    }

    .dr-format-tags {
        justify-content: flex-start;
    }

    .dr-format-tags span {
        min-height: 35px;
        padding: 0 11px;
        font-size: 12px;
    }
}

/* =========================================================
   SUPPORTED STORAGE SOURCES
   ========================================================= */

.dr-storage-section {
    padding: 100px 0 115px;
    background: #ffffff;
}

.dr-wide-container {
    width: min(1440px, calc(100% - 80px));
    margin: 0 auto;
}


/* =========================================================
   SECTION HEADER
   ========================================================= */

.dr-storage-heading {
    max-width: 1000px;
    margin: 0 auto 60px;
    text-align: center;
}

.dr-section-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    margin-bottom: 20px;

    color: #2563eb;

    font-size: 12px;
    line-height: 1;
    font-weight: 800;

    letter-spacing: 2px;
    text-transform: uppercase;
}

.dr-kicker-line {
    width: 25px;
    height: 2px;

    background: #f97316;
    border-radius: 2px;
}

.dr-kicker-dot {
    width: 7px;
    height: 7px;

    background: #f97316;
    border-radius: 50%;
}

.dr-storage-heading h2 {
    margin: 0;

    color: #12335b;

    font-size: clamp(42px, 4vw, 58px);
    line-height: 1.1;

    font-weight: 850;
    letter-spacing: -2.2px;
}

.dr-storage-heading h2 span {
    color: #2563eb;
}

.dr-storage-heading p {
    max-width: 820px;

    margin: 20px auto 0;

    color: #64748b;

    font-size: 17px;
    line-height: 1.75;
}


/* =========================================================
   DEVICE GRID
   ========================================================= */

.dr-device-grid {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 28px 55px;

    max-width: 1360px;
    margin: 0 auto;
}


/* =========================================================
   DEVICE CARD
   ========================================================= */

.dr-device-box {
    min-height: 190px;

    display: flex;
    align-items: center;

    gap: 32px;

    padding: 30px 36px;

    background: #ffffff;

    border: 1px solid #dfe7f0;
    border-radius: 10px;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.dr-device-box:hover {
    transform: translateY(-4px);

    border-color: #cbdcf5;

    box-shadow: 0 16px 35px rgba(18, 51, 91, 0.07);
}


/* =========================================================
   ICON
   ========================================================= */

.dr-device-icon {
    flex: 0 0 105px;

    width: 105px;
    height: 105px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 18px;

    color: #2563eb;
    background: #eff6ff;
}

.dr-device-icon svg {
    width: 62px;
    height: 62px;

    fill: none;

    stroke: currentColor;
    stroke-width: 2.3;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* Individual icon colors */

.dr-device-box:nth-child(1) .dr-device-icon {
    color: #2563eb;
    background: #eff6ff;
}

.dr-device-box:nth-child(2) .dr-device-icon {
    color: #f97316;
    background: #fff3e9;
}

.dr-device-box:nth-child(3) .dr-device-icon {
    color: #159447;
    background: #eaf8f0;
}

.dr-device-box:nth-child(4) .dr-device-icon {
    color: #7c3aed;
    background: #f2edff;
}

.dr-device-box:nth-child(5) .dr-device-icon {
    color: #2563eb;
    background: #eff6ff;
}

.dr-device-box:nth-child(6) .dr-device-icon {
    color: #f97316;
    background: #fff3e9;
}


/* =========================================================
   DEVICE TEXT
   ========================================================= */

.dr-device-info {
    flex: 1;
}

.dr-device-info h3 {
    margin: 0 0 10px;

    color: #172033;

    font-size: 23px;
    line-height: 1.25;

    font-weight: 800;
    letter-spacing: -0.4px;
}

.dr-device-info p {
    max-width: 430px;

    margin: 0;

    color: #64748b;

    font-size: 14px;
    line-height: 1.7;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {

    .dr-device-grid {
        grid-template-columns: 1fr;
        max-width: 850px;
        gap: 22px;
    }

}


@media (max-width: 700px) {

    .dr-storage-section {
        padding: 75px 0 80px;
    }

    .dr-wide-container {
        width: calc(100% - 36px);
    }

    .dr-storage-heading {
        margin-bottom: 42px;
    }

    .dr-storage-heading h2 {
        font-size: 39px;
        letter-spacing: -1.2px;
    }

    .dr-storage-heading p {
        font-size: 15px;
    }

    .dr-device-box {
        min-height: 160px;
        gap: 22px;
        padding: 24px;
    }

    .dr-device-icon {
        flex: 0 0 82px;

        width: 82px;
        height: 82px;

        border-radius: 15px;
    }

    .dr-device-icon svg {
        width: 50px;
        height: 50px;
    }

    .dr-device-info h3 {
        font-size: 19px;
    }

    .dr-device-info p {
        font-size: 13px;
    }

}


@media (max-width: 480px) {

    .dr-device-box {
        gap: 18px;
        padding: 20px;
    }

    .dr-device-icon {
        flex-basis: 70px;

        width: 70px;
        height: 70px;
    }

    .dr-device-icon svg {
        width: 44px;
        height: 44px;
    }

    .dr-device-info h3 {
        font-size: 17px;
    }

    .dr-device-info p {
        font-size: 12px;
    }

}
/* =========================================================
   DEVICE ICONS — LUCIDE
   ========================================================= */

.dr-device-icon {
    flex: 0 0 105px;

    width: 105px;
    height: 105px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 18px;

    color: #2563eb;
    background: #eff6ff;
}

.dr-device-icon svg {
    width: 58px;
    height: 58px;

    stroke: currentColor;
    stroke-width: 1.9;

    fill: none;
}


/* Individual icon colors */

.dr-device-box:nth-child(1) .dr-device-icon {
    color: #2563eb;
    background: #eff6ff;
}

.dr-device-box:nth-child(2) .dr-device-icon {
    color: #f97316;
    background: #fff3e9;
}

.dr-device-box:nth-child(3) .dr-device-icon {
    color: #159447;
    background: #eaf8f0;
}

.dr-device-box:nth-child(4) .dr-device-icon {
    color: #7c3aed;
    background: #f2edff;
}

.dr-device-box:nth-child(5) .dr-device-icon {
    color: #2563eb;
    background: #eff6ff;
}

.dr-device-box:nth-child(6) .dr-device-icon {
    color: #f97316;
    background: #fff3e9;
}


/* Mobile */

@media (max-width: 700px) {

    .dr-device-icon {
        flex: 0 0 82px;

        width: 82px;
        height: 82px;

        border-radius: 15px;
    }

    .dr-device-icon svg {
        width: 48px;
        height: 48px;
    }

}

@media (max-width: 480px) {

    .dr-device-icon {
        flex-basis: 70px;

        width: 70px;
        height: 70px;
    }

    .dr-device-icon svg {
        width: 42px;
        height: 42px;
    }

}
/* =========================================================
   STORAGE SOURCES - SECTION HEADER
   ========================================================= */

.dr-storage-heading {
    display: block !important;

    width: 100%;
    max-width: 1100px;

    margin: 0 auto 60px;
    padding: 0;

    text-align: center;

    grid-template-columns: none !important;
    grid-template-rows: none !important;
}


/* ---------------------------------------------------------
   Eyebrow
   --------------------------------------------------------- */

.dr-section-kicker {
    display: inline-flex !important;

    width: auto;

    align-items: center;
    justify-content: center;

    gap: 9px;

    margin: 0 0 20px;

    color: #2563eb;

    font-size: 12px;
    line-height: 1;

    font-weight: 800;
    letter-spacing: 2px;

    text-transform: uppercase;

    text-align: center;
}


/* Orange line */

.dr-kicker-line {
    display: block;

    width: 24px;
    height: 2px;

    background: #f97316;

    border-radius: 2px;
}


/* Orange dot */

.dr-kicker-dot {
    display: block;

    width: 7px;
    height: 7px;

    background: #f97316;

    border-radius: 50%;
}


/* ---------------------------------------------------------
   Main Heading
   --------------------------------------------------------- */

.dr-storage-heading h2 {
    display: block !important;

    width: 100%;
    max-width: 1100px;

    margin: 0 auto;

    padding: 0;

    color: #12335b;

    font-size: clamp(42px, 4vw, 58px);

    line-height: 1.08;

    font-weight: 850;

    letter-spacing: -2.2px;

    text-align: center;

    white-space: nowrap;
}


/* Blue emphasis */

.dr-storage-heading h2 span {
    display: inline;

    color: #2563eb;
}


/* ---------------------------------------------------------
   Description
   --------------------------------------------------------- */

.dr-storage-heading p {
    display: block !important;

    width: 100%;
    max-width: 800px;

    margin: 20px auto 0;

    padding: 0;

    color: #64748b;

    font-size: 17px;

    line-height: 1.7;

    font-weight: 400;

    text-align: center;
}
/* =========================================================
   RECOVERY SOURCES + FILE TYPES
   ========================================================= */

.dr-source-section {
    padding: 100px 0 110px;
    background: #ffffff;
}


.dr-source-container {
    width: min(1420px, calc(100% - 80px));
    margin: 0 auto;
}


/* =========================================================
   MAIN SECTION HEADER
   ========================================================= */

.dr-source-heading {
    display: block !important;

    width: 100%;
    max-width: 900px;

    margin: 0 auto 38px;

    text-align: center;
}


.dr-source-kicker {
    display: inline-flex !important;

    align-items: center;
    justify-content: center;

    gap: 9px;

    margin-bottom: 18px;

    color: #2563eb;

    font-size: 11px;
    line-height: 1;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.dr-kicker-line {
    width: 25px;
    height: 2px;

    background: #f97316;

    border-radius: 2px;
}


.dr-kicker-dot {
    width: 7px;
    height: 7px;

    background: #f97316;

    border-radius: 50%;
}


.dr-source-heading h2 {
    display: block !important;

    width: 100%;

    margin: 0;

    padding: 0;

    color: #12335b;

    font-size: clamp(42px, 4vw, 58px);

    line-height: 1.08;

    font-weight: 850;

    letter-spacing: -2.2px;

    text-align: center;
}


.dr-source-heading h2 span {
    color: #2563eb;
}


.dr-source-heading p {
    display: block !important;

    width: 100%;
    max-width: 780px;

    margin: 18px auto 0;

    color: #64748b;

    font-size: 16px;

    line-height: 1.7;

    text-align: center;
}


/* =========================================================
   MAIN TABS
   ========================================================= */

.dr-source-tabs {

    display: flex;

    width: min(600px, 100%);

    height: 54px;

    margin: 0 auto 38px;

    padding: 3px;

    background: #ffffff;

    border: 1px solid #2563eb;

    border-radius: 30px;

    overflow: hidden;

    box-shadow:
        0 6px 18px rgba(37, 99, 235, .07);
}


.dr-source-tab {

    flex: 1;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    padding: 0 20px;

    border: 0;

    border-radius: 26px;

    background: transparent;

    color: #172033;

    font-family: inherit;

    font-size: 15px;

    font-weight: 750;

    cursor: pointer;

    transition:
        background .25s ease,
        color .25s ease,
        box-shadow .25s ease;
}


.dr-source-tab svg {

    width: 19px;
    height: 19px;

    stroke-width: 2;
}


.dr-source-tab:hover {
    color: #2563eb;
}


.dr-source-tab.active {

    color: #ffffff;

    background: #2563eb;

    box-shadow:
        0 4px 12px rgba(37, 99, 235, .18);
}


/* =========================================================
   MAIN PANELS
   ========================================================= */

.dr-source-panel {
    display: none;
}


.dr-source-panel.active {

    display: block;

    animation:
        drSourceFade .28s ease;
}


@keyframes drSourceFade {

    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   STORAGE DEVICE GRID
   ========================================================= */

.dr-device-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px 32px;

    max-width: 1320px;

    margin: 0 auto;
}


/* =========================================================
   SMALL DEVICE CARDS
   ========================================================= */

.dr-device-card {

    min-height: 145px;

    display: flex;

    align-items: center;

    gap: 23px;

    padding: 21px 26px;

    background: #ffffff;

    border: 1px solid #dfe7f0;

    border-radius: 10px;

    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}


.dr-device-card:hover {

    transform: translateY(-3px);

    border-color: #cbdcf5;

    box-shadow:
        0 12px 30px rgba(18, 51, 91, .065);
}


/* =========================================================
   DEVICE ICON
   ========================================================= */

.dr-device-icon {

    flex: 0 0 76px;

    width: 76px;
    height: 76px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 15px;
}


.dr-device-icon svg {

    width: 42px;
    height: 42px;

    stroke-width: 1.9;
}


/* =========================================================
   ICON COLORS
   ========================================================= */

.dr-blue {

    color: #2563eb;

    background: #eff6ff;
}


.dr-orange {

    color: #f97316;

    background: #fff3e9;
}


.dr-green {

    color: #159447;

    background: #eaf8f0;
}


.dr-purple {

    color: #7c3aed;

    background: #f2edff;
}


/* =========================================================
   DEVICE TEXT
   ========================================================= */

.dr-device-content {

    flex: 1;

    min-width: 0;
}


.dr-device-content h3 {

    margin: 0 0 6px;

    color: #172033;

    font-size: 20px;

    line-height: 1.25;

    font-weight: 800;

    letter-spacing: -.35px;
}


.dr-device-content p {

    max-width: 470px;

    margin: 0;

    color: #64748b;

    font-size: 13.5px;

    line-height: 1.65;
}


/* =========================================================
   FILE CATEGORY TABS
   ========================================================= */

.dr-format-tabs {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 8px;

    max-width: 1320px;

    margin: 0 auto 30px;

    padding: 0;
}


.dr-format-tab {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    min-height: 42px;

    padding: 9px 15px;

    border: 1px solid #dfe7f0;

    border-radius: 7px;

    background: #ffffff;

    color: #526176;

    font-family: inherit;

    font-size: 13px;

    line-height: 1;

    font-weight: 700;

    cursor: pointer;

    white-space: nowrap;

    transition:
        color .2s ease,
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}


.dr-format-tab svg {

    width: 17px;
    height: 17px;

    stroke-width: 1.9;
}


.dr-format-tab:hover {

    color: #2563eb;

    border-color: #cbdcf5;

    background: #f8fbff;
}


.dr-format-tab.active {

    color: #ffffff;

    background: #2563eb;

    border-color: #2563eb;

    box-shadow:
        0 5px 14px rgba(37, 99, 235, .15);
}


/* =========================================================
   FORMAT PANELS
   ========================================================= */

.dr-format-panel {

    display: none;

    max-width: 1320px;

    margin: 0 auto;

    padding: 30px 32px;

    background: #ffffff;

    border: 1px solid #e1e8f0;

    border-radius: 10px;

    animation:
        drFormatFade .25s ease;
}


.dr-format-panel.active {

    display: block;
}


@keyframes drFormatFade {

    from {

        opacity: 0;

        transform: translateY(5px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/* =========================================================
   FORMAT TAGS
   ========================================================= */

.dr-format-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    align-items: center;
}


.dr-format-tags span {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 31px;

    padding: 6px 10px;

    color: #42526a;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 5px;

    font-size: 11.5px;

    line-height: 1;

    font-weight: 650;

    white-space: nowrap;

    transition:
        color .18s ease,
        background .18s ease,
        border-color .18s ease;
}


.dr-format-tags span:hover {

    color: #2563eb;

    background: #eff6ff;

    border-color: #cbdcf5;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

    .dr-source-container {

        width:
            min(100% - 50px, 900px);

    }


    .dr-device-grid {

        grid-template-columns: 1fr;

    }

}


@media (max-width: 750px) {

    .dr-source-section {

        padding: 75px 0 80px;

    }


    .dr-source-container {

        width: calc(100% - 36px);

    }


    .dr-source-heading {

        margin-bottom: 32px;

    }


    .dr-source-heading h2 {

        font-size: 39px;

        line-height: 1.12;

        letter-spacing: -1.1px;

    }


    .dr-source-heading p {

        font-size: 15px;

    }


    .dr-source-tabs {

        height: 52px;

        margin-bottom: 30px;

    }


    .dr-source-tab {

        font-size: 13px;

        gap: 7px;

        padding: 0 10px;

    }


    .dr-source-tab svg {

        width: 17px;
        height: 17px;

    }


    .dr-device-card {

        min-height: 125px;

        gap: 18px;

        padding: 18px 20px;

    }


    .dr-device-icon {

        flex-basis: 66px;

        width: 66px;
        height: 66px;

        border-radius: 13px;

    }


    .dr-device-icon svg {

        width: 36px;
        height: 36px;

    }


    .dr-device-content h3 {

        font-size: 18px;

    }


    .dr-device-content p {

        font-size: 12.5px;

    }


    .dr-format-tabs {

        justify-content: flex-start;

        overflow-x: auto;

        flex-wrap: nowrap;

        padding-bottom: 8px;

        scrollbar-width: thin;

    }


    .dr-format-tab {

        flex-shrink: 0;

    }


    .dr-format-panel {

        padding: 22px;

    }

}


@media (max-width: 480px) {

    .dr-source-heading h2 {

        font-size: 35px;

    }


    .dr-source-tab span {

        font-size: 12px;

    }


    .dr-device-card {

        align-items: flex-start;

        padding: 17px;

    }


    .dr-device-icon {

        flex-basis: 58px;

        width: 58px;
        height: 58px;

    }


    .dr-device-icon svg {

        width: 31px;
        height: 31px;

    }


    .dr-device-content h3 {

        font-size: 16px;

    }


    .dr-device-content p {

        font-size: 12px;

    }


    .dr-format-panel {

        padding: 18px;

    }


    .dr-format-tags {

        gap: 6px;

    }


    .dr-format-tags span {

        min-height: 29px;

        padding: 5px 8px;

        font-size: 10.5px;

    }

}
/* =========================================================
   SECTION 3 — MULTIPLE SCANNING MODES
   ========================================================= */

.dr-scan-section {
    position: relative;
    padding: 105px 0 110px;
    background: #f8fafc;
    overflow: hidden;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.dr-scan-container {
    width: min(1500px, calc(100% - 70px));
    margin: 0 auto;
}


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.dr-scan-grid {

    display: grid;

    /*
       Give the screenshot more room.
    */
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(0, 1.08fr);

    align-items: center;

    column-gap: 65px;

    max-width: 1450px;

    margin: 0 auto;
}


/* =========================================================
   LEFT CONTENT
   ========================================================= */

.dr-scan-content {
    width: 100%;
    max-width: 670px;
}


/* =========================================================
   KICKER
   ========================================================= */

.dr-section-kicker {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 16px;

    color: #2563eb;

    font-size: 11px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.dr-kicker-line {
    width: 25px;
    height: 2px;

    background: #f97316;

    border-radius: 2px;
}


.dr-kicker-dot {
    width: 7px;
    height: 7px;

    background: #f97316;

    border-radius: 50%;
}


/* =========================================================
   HEADING
   ========================================================= */


.dr-scan-content h2 {
    margin: 0;

    color: #12335b;

    font-size: clamp(38px, 3.2vw, 46px);
    line-height: 1.08;
    font-weight: 850;

    letter-spacing: -1.7px;
}


.dr-scan-content h2 span {
    display: block;
    color: #2563eb;
}


/* =========================================================
   INTRO
   ========================================================= */

.dr-scan-intro {

    margin: 16px 0 31px;

    color: #475569;

    font-size: 18px;

    line-height: 1.5;

    font-weight: 650;
}


/* =========================================================
   SCAN OPTIONS
   ========================================================= */

.dr-scan-options {
    width: 100%;
}


/* =========================================================
   INDIVIDUAL SCAN FEATURE
   ========================================================= */

.dr-scan-feature {

    display: flex;

    align-items: flex-start;

    gap: 17px;

    margin: 0;

    padding: 21px 0;

    border-bottom: 1px solid #e2e8f0;
}


.dr-scan-feature:first-child {
    padding-top: 0;
}


.dr-scan-feature:last-child {

    border-bottom: 0;

    padding-bottom: 0;
}


/* =========================================================
   ICON
   ========================================================= */

.dr-scan-feature-icon {

    flex: 0 0 48px;

    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #2563eb;

    background: #eff6ff;

    border: 1px solid #dbeafe;

    border-radius: 11px;
}


.dr-scan-feature-icon.deep {

    color: #7c3aed;

    background: #f3efff;

    border-color: #e9ddff;
}


.dr-scan-feature-icon.partition {

    color: #f97316;

    background: #fff4eb;

    border-color: #fed7aa;
}


.dr-scan-feature-icon svg {

    width: 23px;
    height: 23px;

    stroke-width: 1.9;
}


/* =========================================================
   FEATURE CONTENT
   ========================================================= */

.dr-scan-feature-body {

    flex: 1;

    min-width: 0;
}


.dr-scan-feature-body h3 {

    margin: 0 0 7px;

    color: #172033;

    font-size: 19px;

    line-height: 1.35;

    font-weight: 800;

    letter-spacing: -.35px;
}


.dr-scan-feature-body h3 span {

    color: #2563eb;

    font-weight: 650;
}


.dr-scan-feature-body p {

    max-width: 570px;

    margin: 0;

    color: #64748b;

    font-size: 13.5px;

    line-height: 1.62;
}


/* =========================================================
   SUPPORTING NOTE
   ========================================================= */

.dr-scan-note {

    display: flex;

    align-items: flex-start;

    gap: 9px;

    margin-top: 21px;

    color: #526176;

    font-size: 12.5px;

    line-height: 1.55;
}


.dr-scan-note svg {

    flex: 0 0 auto;

    width: 17px;
    height: 17px;

    margin-top: 1px;

    color: #159447;

    stroke-width: 2;
}


/* =========================================================
   RIGHT SCREENSHOT
   ========================================================= */

.dr-scan-visual {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    align-self: center;
}


/* =========================================================
   SCREENSHOT FRAME
   ========================================================= */

.dr-scan-image-wrap {

    position: relative;

    width: 100%;

    /*
       Allow the screenshot to become substantially larger.
    */
    max-width: 820px;

    padding: 10px;

    background: #ffffff;

    border: 1px solid #dce5ef;

    border-radius: 15px;

    box-shadow:
        0 24px 55px rgba(18, 51, 91, .12),
        0 5px 16px rgba(18, 51, 91, .045);

    overflow: hidden;
}


/* =========================================================
   SCREENSHOT
   ========================================================= */

.dr-scan-image {

    display: block;

    width: 100%;

    height: auto;

    max-width: none;

    border-radius: 8px;

    object-fit: contain;
}


/* Remove the previous hover caption */

.dr-scan-image-wrap::after {
    display: none;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .dr-scan-container {
        width: min(100% - 50px, 900px);
    }

    .dr-scan-grid {

        grid-template-columns: 1fr;

        row-gap: 55px;

        max-width: 850px;
    }

    .dr-scan-content {
        max-width: 850px;
    }

    .dr-scan-image-wrap {
        max-width: 850px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

    .dr-scan-section {
        padding: 75px 0 80px;
    }

    .dr-scan-container {
        width: calc(100% - 36px);
    }

    .dr-scan-grid {
        row-gap: 38px;
    }

    .dr-scan-content h2 {
        font-size: 40px;
        letter-spacing: -1.5px;
    }

    .dr-scan-intro {
        font-size: 16px;
        margin-bottom: 25px;
    }

    .dr-scan-feature {
        gap: 13px;
        padding: 18px 0;
    }

    .dr-scan-feature-icon {
        flex-basis: 43px;
        width: 43px;
        height: 43px;
    }

    .dr-scan-feature-icon svg {
        width: 21px;
        height: 21px;
    }

    .dr-scan-feature-body h3 {
        font-size: 17px;
    }

    .dr-scan-feature-body h3 span {
        display: block;
        margin-top: 2px;
    }

    .dr-scan-feature-body p {
        font-size: 12.5px;
    }

    .dr-scan-image-wrap {
        padding: 7px;
        border-radius: 11px;
    }

}
/* =========================================================
   SMART DISK SELECTION — COMPACT VERSION
   ========================================================= */

.dr-disk-selector-section {
    position: relative;
    padding: 85px 0 90px;
    background: #ffffff;
    overflow: hidden;
}

.dr-disk-selector-container {
    width: min(1500px, calc(100% - 70px));
    margin: 0 auto;
}


/* ---------------------------------------------------------
   MAIN GRID
   --------------------------------------------------------- */

.dr-disk-selector-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    align-items: center;
    column-gap: 65px;

    max-width: 1450px;
    margin: 0 auto;
}


/* ---------------------------------------------------------
   SCREENSHOT
   --------------------------------------------------------- */

.dr-disk-selector-visual {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dr-disk-selector-image-wrap {
    width: 100%;
    max-width: 820px;

    padding: 8px;

    background: #ffffff;

    border: 1px solid #dce5ef;
    border-radius: 14px;

    box-shadow:
        0 14px 35px rgba(18, 51, 91, 0.09),
        0 3px 10px rgba(15, 23, 42, 0.04);

    overflow: hidden;
}

.dr-disk-selector-image {
    display: block;
    width: 100%;
    height: auto;

    border-radius: 8px;

    object-fit: contain;
}


/* ---------------------------------------------------------
   RIGHT CONTENT
   --------------------------------------------------------- */

.dr-disk-selector-content {
    width: 100%;
    max-width: 620px;
}

.dr-section-kicker {
    margin-bottom: 10px;

    color: #2563eb;

    font-size: 12px;
    line-height: 1.2;
    font-weight: 800;

    letter-spacing: 1.5px;
    text-transform: uppercase;
}


/* ---------------------------------------------------------
   COMPACT HEADING
   --------------------------------------------------------- */

.dr-disk-selector-content h2 {
    margin: 0;

    color: #12335b;

    font-size: clamp(38px, 3.2vw, 46px);
    line-height: 1.08;
    font-weight: 850;

    letter-spacing: -1.7px;
}

.dr-disk-selector-content h2 span {
    display: block;
    color: #2563eb;
}


/* ---------------------------------------------------------
   INTRO
   --------------------------------------------------------- */

.dr-disk-selector-intro {
    max-width: 590px;

    margin: 15px 0 25px;

    color: #64748b;

    font-size: 15px;
    line-height: 1.6;
    font-weight: 400;
}


/* ---------------------------------------------------------
   FEATURES
   --------------------------------------------------------- */

.dr-disk-selector-feature {
    display: flex;
    align-items: flex-start;

    gap: 14px;

    padding: 15px 0;

    border-bottom: 1px solid #e5eaf1;
}

.dr-disk-selector-feature:first-of-type {
    padding-top: 0;
}

.dr-disk-selector-feature:last-of-type {
    border-bottom: 0;
    padding-bottom: 0;
}


/* ---------------------------------------------------------
   ICON
   --------------------------------------------------------- */

.dr-disk-selector-icon {
    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: 1px;

    color: #2563eb;

    background: #eff6ff;

    border: 1px solid #dbeafe;
    border-radius: 10px;
}

.dr-disk-selector-icon svg {
    width: 20px;
    height: 20px;

    stroke-width: 2;
}

.dr-disk-selector-icon.blue {
    color: #2563eb;
    background: #eff6ff;
    border-color: #dbeafe;
}

.dr-disk-selector-icon.orange {
    color: #f97316;
    background: #fff7ed;
    border-color: #fed7aa;
}


/* ---------------------------------------------------------
   FEATURE TEXT
   --------------------------------------------------------- */

.dr-disk-selector-feature-body {
    flex: 1;
    min-width: 0;
}

.dr-disk-selector-feature-body h3 {
    margin: 0 0 4px;

    color: #172033;

    font-size: 17px;
    line-height: 1.3;
    font-weight: 750;

    letter-spacing: -0.15px;
}

.dr-disk-selector-feature-body p {
    max-width: 550px;

    margin: 0;

    color: #64748b;

    font-size: 13px;
    line-height: 1.55;
    font-weight: 400;
}


/* ---------------------------------------------------------
   REMOVE / HIDE EXTRA HIGHLIGHT
   --------------------------------------------------------- */

.dr-disk-selector-highlight {
    display: none;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1150px) {

    .dr-disk-selector-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 45px;
    }

    .dr-disk-selector-content h2 {
        font-size: 40px;
    }

}


@media (max-width: 1000px) {

    .dr-disk-selector-section {
        padding: 70px 0 75px;
    }

    .dr-disk-selector-container {
        width: min(900px, calc(100% - 40px));
    }

    .dr-disk-selector-grid {
        grid-template-columns: 1fr;
        row-gap: 45px;
    }

    .dr-disk-selector-content {
        max-width: 760px;
    }

}


@media (max-width: 650px) {

    .dr-disk-selector-section {
        padding: 55px 0 60px;
    }

    .dr-disk-selector-container {
        width: calc(100% - 30px);
    }

    .dr-disk-selector-content h2 {
        font-size: 34px;
        letter-spacing: -1.1px;
    }

    .dr-disk-selector-content h2 span {
        display: inline;
    }

    .dr-disk-selector-intro {
        font-size: 14px;
        margin-bottom: 22px;
    }

    .dr-disk-selector-feature {
        gap: 12px;
        padding: 14px 0;
    }

    .dr-disk-selector-icon {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
    }

    .dr-disk-selector-feature-body h3 {
        font-size: 16px;
    }

    .dr-disk-selector-feature-body p {
        font-size: 12.5px;
    }

}
/* =========================================================
   RECOVERY PREVIEW & FILTERING
   ========================================================= */

.dr-preview-section {
    position: relative;

    padding: 85px 0 90px;

    background: #f8fafc;

    overflow: hidden;
}

.dr-preview-container {
    width: min(1500px, calc(100% - 70px));

    margin: 0 auto;
}


/* ---------------------------------------------------------
   MAIN GRID

   Content LEFT
   Screenshot RIGHT
   --------------------------------------------------------- */

.dr-preview-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.85fr)
        minmax(0, 1.15fr);

    align-items: center;

    column-gap: 60px;

    max-width: 1450px;

    margin: 0 auto;
}


/* ---------------------------------------------------------
   CONTENT
   --------------------------------------------------------- */

.dr-preview-content {
    width: 100%;
    max-width: 620px;
}

.dr-preview-content .dr-section-kicker {
    margin-bottom: 10px;

    color: #2563eb;

    font-size: 12px;
    line-height: 1.2;
    font-weight: 800;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


/* ---------------------------------------------------------
   HEADING
   --------------------------------------------------------- */

.dr-preview-content h2 {
    margin: 0;

    color: #12335b;

    font-size: clamp(38px, 3.2vw, 46px);

    line-height: 1.08;

    font-weight: 850;

    letter-spacing: -1.7px;
}

.dr-preview-content h2 span {
    display: block;

    color: #2563eb;
}


/* ---------------------------------------------------------
   INTRO
   --------------------------------------------------------- */

.dr-preview-intro {
    max-width: 590px;

    margin: 15px 0 25px;

    color: #64748b;

    font-size: 15px;

    line-height: 1.6;

    font-weight: 400;
}


/* ---------------------------------------------------------
   FEATURES
   --------------------------------------------------------- */

.dr-preview-feature {
    display: flex;

    align-items: flex-start;

    gap: 14px;

    padding: 15px 0;

    border-bottom: 1px solid #e2e8f0;
}

.dr-preview-feature:first-of-type {
    padding-top: 0;
}

.dr-preview-feature:last-of-type {
    padding-bottom: 0;

    border-bottom: 0;
}


/* ---------------------------------------------------------
   FEATURE ICON
   --------------------------------------------------------- */

.dr-preview-icon {
    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-top: 1px;

    color: #2563eb;

    background: #eff6ff;

    border: 1px solid #dbeafe;

    border-radius: 10px;
}

.dr-preview-icon svg {
    width: 20px;
    height: 20px;

    stroke-width: 2;
}

.dr-preview-icon.blue {
    color: #2563eb;

    background: #eff6ff;

    border-color: #dbeafe;
}

.dr-preview-icon.orange {
    color: #f97316;

    background: #fff7ed;

    border-color: #fed7aa;
}


/* ---------------------------------------------------------
   FEATURE TEXT
   --------------------------------------------------------- */

.dr-preview-feature-body {
    flex: 1;

    min-width: 0;
}

.dr-preview-feature-body h3 {
    margin: 0 0 4px;

    color: #172033;

    font-size: 17px;

    line-height: 1.3;

    font-weight: 750;

    letter-spacing: -0.15px;
}

.dr-preview-feature-body p {
    max-width: 550px;

    margin: 0;

    color: #64748b;

    font-size: 13px;

    line-height: 1.55;

    font-weight: 400;
}


/* ---------------------------------------------------------
   SCREENSHOT
   --------------------------------------------------------- */

.dr-preview-visual {
    width: 100%;

    display: flex;

    align-items: center;
    justify-content: center;
}

.dr-preview-image-wrap {
    width: 100%;

    max-width: 820px;

    padding: 8px;

    background: #ffffff;

    border: 1px solid #dce5ef;

    border-radius: 14px;

    box-shadow:
        0 14px 35px rgba(18, 51, 91, 0.09),
        0 3px 10px rgba(15, 23, 42, 0.04);

    overflow: hidden;
}

.dr-preview-image {
    display: block;

    width: 100%;

    height: auto;

    max-width: none;

    border-radius: 8px;

    object-fit: contain;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1150px) {

    .dr-preview-grid {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(0, 1.1fr);

        column-gap: 45px;
    }

    .dr-preview-content h2 {
        font-size: 40px;
    }

}


@media (max-width: 1000px) {

    .dr-preview-section {
        padding: 70px 0 75px;
    }

    .dr-preview-container {
        width: min(900px, calc(100% - 40px));
    }

    .dr-preview-grid {
        grid-template-columns: 1fr;

        row-gap: 45px;
    }

    .dr-preview-content {
        max-width: 760px;
    }

    .dr-preview-visual {
        order: 2;
    }

    .dr-preview-image-wrap {
        max-width: 850px;
    }

}


@media (max-width: 650px) {

    .dr-preview-section {
        padding: 55px 0 60px;
    }

    .dr-preview-container {
        width: calc(100% - 30px);
    }

    .dr-preview-content h2 {
        font-size: 34px;

        letter-spacing: -1.1px;
    }

    .dr-preview-content h2 span {
        display: inline;
    }

    .dr-preview-intro {
        margin-bottom: 22px;

        font-size: 14px;
    }

    .dr-preview-feature {
        gap: 12px;

        padding: 14px 0;
    }

    .dr-preview-icon {
        flex: 0 0 40px;

        width: 40px;
        height: 40px;
    }

    .dr-preview-feature-body h3 {
        font-size: 16px;
    }

    .dr-preview-feature-body p {
        font-size: 12.5px;
    }

}
/* =========================================================
   FEATURES & BENEFITS
   Existing 18 Features
   ========================================================= */

.dr-features-section {
    position: relative;

    padding: 105px 0 115px;

    background: #ffffff;

    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;

    overflow: hidden;
}

.dr-features-container {
    width: min(1450px, calc(100% - 70px));

    margin: 0 auto;
}


/* =========================================================
   SECTION HEADING
   ========================================================= */

.dr-features-heading {
    width: 100%;
    max-width: 950px;

    margin: 0 auto 65px;

    text-align: center;
}

.dr-features-heading .dr-section-kicker {
    margin-bottom: 12px;

    color: #2563eb;

    font-size: 12px;
    line-height: 1.2;
    font-weight: 800;

    letter-spacing: 1.6px;

    text-transform: uppercase;
}

.dr-features-heading h2 {
    margin: 0;

    color: #12335b;

    font-size: clamp(40px, 4vw, 54px);

    line-height: 1.08;

    font-weight: 850;

    letter-spacing: -2px;
}

.dr-features-heading h2 span {
    color: #2563eb;
}

.dr-features-heading p {
    max-width: 760px;

    margin: 18px auto 0;

    color: #64748b;

    font-size: 16px;

    line-height: 1.7;

    font-weight: 400;
}


/* =========================================================
   FEATURE GRID
   ========================================================= */

.dr-features-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 20px;

    align-items: stretch;
}


/* =========================================================
   FEATURE ITEM
   ========================================================= */

.dr-feature-item {
    position: relative;

    display: flex;

    gap: 17px;

    min-width: 0;

    padding: 27px 25px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 12px;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.dr-feature-item:hover {
    border-color: #cbd8e8;

    box-shadow:
        0 12px 30px rgba(18, 51, 91, 0.07);

    transform: translateY(-2px);
}


/* =========================================================
   NUMBER
   ========================================================= */

.dr-feature-number {
    flex: 0 0 auto;

    padding-top: 3px;

    color: #cbd5e1;

    font-size: 12px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: 0.5px;
}


/* =========================================================
   CONTENT
   ========================================================= */

.dr-feature-content {
    min-width: 0;

    flex: 1;
}


/* =========================================================
   ICON
   ========================================================= */

.dr-feature-icon {
    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 14px;

    color: #2563eb;

    background: #eff6ff;

    border: 1px solid #dbeafe;

    border-radius: 10px;
}

.dr-feature-icon svg {
    width: 19px;
    height: 19px;

    stroke-width: 2;
}

.dr-feature-icon.blue {
    color: #2563eb;

    background: #eff6ff;

    border-color: #dbeafe;
}

.dr-feature-icon.orange {
    color: #f97316;

    background: #fff7ed;

    border-color: #fed7aa;
}


/* =========================================================
   FEATURE TITLE
   ========================================================= */

.dr-feature-content h3 {
    margin: 0 0 9px;

    color: #172033;

    font-size: 17px;

    line-height: 1.35;

    font-weight: 750;

    letter-spacing: -0.2px;
}


/* =========================================================
   FEATURE DESCRIPTION
   ========================================================= */

.dr-feature-content p {
    margin: 0;

    color: #64748b;

    font-size: 13px;

    line-height: 1.65;

    font-weight: 400;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1200px) {

    .dr-features-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 900px) {

    .dr-features-section {
        padding: 80px 0 90px;
    }

    .dr-features-container {
        width: min(850px, calc(100% - 40px));
    }

    .dr-features-heading {
        margin-bottom: 45px;
    }

    .dr-features-grid {
        gap: 16px;
    }

}


@media (max-width: 650px) {

    .dr-features-section {
        padding: 65px 0 70px;
    }

    .dr-features-container {
        width: calc(100% - 30px);
    }

    .dr-features-heading h2 {
        font-size: 34px;

        letter-spacing: -1.1px;
    }

    .dr-features-heading p {
        font-size: 14px;
    }

    .dr-features-grid {
        grid-template-columns: 1fr;

        gap: 13px;
    }

    .dr-feature-item {
        padding: 22px 20px;

        gap: 13px;
    }

    .dr-feature-number {
        font-size: 11px;
    }

    .dr-feature-icon {
        width: 38px;
        height: 38px;

        margin-bottom: 11px;
    }

    .dr-feature-content h3 {
        font-size: 16px;
    }

    .dr-feature-content p {
        font-size: 12.5px;

        line-height: 1.6;
    }

}
/* =========================================================
   DATA LOSS SCENARIOS
========================================================= */

.dr-loss-section {
    width: 100%;
    padding: 90px 0 95px;
    background: #ffffff;
    overflow: hidden;
}

.dr-loss-container {
    width: min(1400px, calc(100% - 60px));
    margin: 0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.dr-loss-heading {
    max-width: 850px;
    margin: 0 auto 45px;
    text-align: center;
}

.dr-loss-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;

    margin-bottom: 13px;

    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.dr-loss-eyebrow span {
    width: 42px;
    height: 1px;
    background: #bfdbfe;
}

.dr-loss-heading h2 {
    margin: 0;

    color: #12213f;

    font-size: clamp(36px, 3.5vw, 50px);
    line-height: 1.12;
    font-weight: 700;

    letter-spacing: -1.3px;
}

.dr-loss-heading h2 strong {
    color: #2563eb;
    font-weight: 700;
}

.dr-loss-heading p {
    max-width: 760px;

    margin: 16px auto 0;

    color: #64748b;

    font-size: 15px;
    line-height: 1.6;
}


/* =========================================================
   CARD GRID
========================================================= */

.dr-loss-grid {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 20px;
}


/* =========================================================
   CARD
========================================================= */

.dr-loss-card {
    position: relative;

    min-height: 255px;

    display: flex;
    align-items: center;

    padding: 26px 24px;

    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 16px;

    box-shadow:
        0 7px 25px rgba(15, 23, 42, 0.04);

    overflow: hidden;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.dr-loss-card:hover {
    transform: translateY(-2px);

    box-shadow:
        0 14px 35px rgba(15, 23, 42, 0.075);
}


/* =========================================================
   CARD CONTENT
========================================================= */

.dr-loss-card-content {
    position: relative;
    z-index: 2;

    width: calc(100% - 130px);

    display: flex;
    align-items: flex-start;

    gap: 15px;
}


/* =========================================================
   NUMBER
========================================================= */

.dr-loss-number {
    flex: 0 0 auto;

    width: 54px;
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    font-size: 21px;
    font-weight: 700;
}


/* =========================================================
   BLUE CARD
   01 — Unintentional Deletion
========================================================= */

.blue-card .dr-loss-number {
    color: #2563eb;
    background: #eff6ff;
}

.blue-card .dr-loss-text li svg {
    color: #2563eb;
}

.blue-card .dr-loss-visual-circle {
    background:
        radial-gradient(
            circle,
            #eef6ff 0%,
            #f5f9ff 62%,
            rgba(239, 246, 255, 0) 73%
        );
}

.blue-card .dr-loss-visual-circle > svg {
    color: #60a5fa;
}

.blue-card .dr-loss-floating-icon {
    background: #2563eb;

    box-shadow:
        0 6px 16px rgba(37, 99, 235, 0.25);
}


/* =========================================================
   GREEN CARD
   02 — Formatted Drives
========================================================= */

.green-card .dr-loss-number {
    color: #16a34a;
    background: #f0fdf4;
}

.green-card .dr-loss-text li svg {
    color: #16a34a;
}

.green-card .dr-loss-visual-circle {
    background:
        radial-gradient(
            circle,
            #effdf4 0%,
            #f7fdf9 62%,
            rgba(240, 253, 244, 0) 73%
        );
}

.green-card .dr-loss-visual-circle > svg {
    color: #4ade80;
}

.green-card .dr-loss-floating-icon {
    background: #16a34a;

    box-shadow:
        0 6px 16px rgba(22, 163, 74, 0.25);
}


/* =========================================================
   YELLOW CARD
   03 — Inappropriate Operations
========================================================= */

.yellow-card .dr-loss-number {
    color: #ca8a04;
    background: #fefce8;
}

.yellow-card .dr-loss-text li svg {
    color: #ca8a04;
}

.yellow-card .dr-loss-visual-circle {
    background:
        radial-gradient(
            circle,
            #fffbea 0%,
            #fffef5 62%,
            rgba(254, 252, 232, 0) 73%
        );
}

.yellow-card .dr-loss-visual-circle > svg {
    color: #facc15;
}

.yellow-card .dr-loss-floating-icon {
    background: #eab308;

    box-shadow:
        0 6px 16px rgba(234, 179, 8, 0.25);
}


/* =========================================================
   RED CARD
   04 — Other Data Loss Situations
========================================================= */

.red-card .dr-loss-number {
    color: #dc2626;
    background: #fef2f2;
}

.red-card .dr-loss-text li svg {
    color: #dc2626;
}

.red-card .dr-loss-visual-circle {
    background:
        radial-gradient(
            circle,
            #fff1f2 0%,
            #fff7f7 62%,
            rgba(254, 242, 242, 0) 73%
        );
}

.red-card .dr-loss-visual-circle > svg {
    color: #f87171;
}

.red-card .dr-loss-floating-icon {
    background: #dc2626;

    box-shadow:
        0 6px 16px rgba(220, 38, 38, 0.25);
}


/* =========================================================
   TEXT
========================================================= */

.dr-loss-text {
    min-width: 0;
}

.dr-loss-text h3 {
    margin: 2px 0 7px;

    color: #12213f;

    font-size: 20px;
    line-height: 1.25;
    font-weight: 700;

    letter-spacing: -0.25px;
}

.dr-loss-text p {
    max-width: 410px;

    margin: 0 0 14px;

    color: #64748b;

    font-size: 13.5px;
    line-height: 1.55;
}


/* =========================================================
   LIST
========================================================= */

.dr-loss-text ul {
    display: flex;
    flex-direction: column;

    gap: 7px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.dr-loss-text li {
    display: flex;
    align-items: flex-start;

    gap: 8px;

    color: #334155;

    font-size: 13px;
    line-height: 1.4;
}

.dr-loss-text li svg {
    flex: 0 0 auto;

    width: 16px;
    height: 16px;

    margin-top: 1px;

    stroke-width: 2.8;
}


/* =========================================================
   VISUAL
========================================================= */

.dr-loss-visual {
    position: absolute;

    right: 18px;
    top: 50%;

    width: 115px;
    height: 115px;

    transform: translateY(-50%);

    display: flex;
    align-items: center;
    justify-content: center;

    pointer-events: none;
}

.dr-loss-visual-circle {
    position: relative;

    width: 115px;
    height: 115px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
}


/* Main icon */

.dr-loss-visual-circle > svg {
    width: 62px;
    height: 62px;

    stroke-width: 1.5;
}


/* =========================================================
   SMALL FLOATING ICON
========================================================= */

.dr-loss-floating-icon {
    position: absolute;

    right: 0;
    bottom: 8px;

    width: 37px;
    height: 37px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #ffffff;

    box-shadow:
        0 6px 16px rgba(15, 23, 42, 0.15);
}

.dr-loss-floating-icon svg {
    width: 18px;
    height: 18px;

    stroke-width: 2.4;
}


/* =========================================================
   BOTTOM CTA
========================================================= */

.dr-loss-bottom {
    max-width: 1200px;

    margin: 20px auto 0;

    padding: 16px 18px;

    display: flex;
    align-items: center;

    gap: 16px;

    background: #ffffff;

    border: 1px solid #dbeafe;
    border-radius: 14px;

    box-shadow:
        0 6px 22px rgba(15, 23, 42, 0.035);
}

.dr-loss-bottom-icon {
    flex: 0 0 auto;

    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background: #eff6ff;
    color: #2563eb;
}

.dr-loss-bottom-icon svg {
    width: 25px;
    height: 25px;
}

.dr-loss-bottom-text {
    flex: 1;
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 2px;
}

.dr-loss-bottom-text strong {
    color: #12335b;

    font-size: 15px;
    line-height: 1.35;
}

.dr-loss-bottom-text span {
    color: #64748b;

    font-size: 12.5px;
    line-height: 1.4;
}


/* =========================================================
   BUTTON
========================================================= */

.dr-loss-button {
    flex: 0 0 auto;

    min-height: 44px;

    padding: 0 19px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    border-radius: 8px;

    background: #2563eb;
    color: #ffffff;

    font-size: 13px;
    font-weight: 600;

    text-decoration: none;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.dr-loss-button:hover {
    background: #1d4ed8;
    color: #ffffff;

    transform: translateY(-1px);
}

.dr-loss-button svg {
    width: 16px;
    height: 16px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .dr-loss-grid {
        max-width: 760px;
    }

    .dr-loss-card {
        min-height: 270px;
    }

    .dr-loss-card-content {
        width: calc(100% - 105px);
    }

    .dr-loss-visual {
        width: 95px;
        height: 95px;
    }

    .dr-loss-visual-circle {
        width: 95px;
        height: 95px;
    }

    .dr-loss-visual-circle > svg {
        width: 52px;
        height: 52px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

    .dr-loss-section {
        padding: 65px 0 70px;
    }

    .dr-loss-container {
        width: calc(100% - 32px);
    }

    .dr-loss-grid {
        grid-template-columns: 1fr;
        max-width: 560px;
    }

    .dr-loss-card {
        min-height: 245px;
    }

    .dr-loss-bottom {
        max-width: 560px;

        align-items: flex-start;
        flex-wrap: wrap;
    }

    .dr-loss-button {
        width: 100%;
    }
}


@media (max-width: 500px) {

    .dr-loss-heading h2 {
        font-size: 33px;
    }

    .dr-loss-heading p {
        font-size: 14px;
    }

    .dr-loss-card {
        min-height: auto;
        padding: 22px 20px;
    }

    .dr-loss-card-content {
        width: 100%;
    }

    .dr-loss-visual {
        display: none;
    }

    .dr-loss-text h3 {
        font-size: 19px;
    }

    .dr-loss-text p {
        font-size: 13px;
    }

    .dr-loss-text li {
        font-size: 12.5px;
    }
}





/* =========================================================
   PRODUCT OVERVIEW
========================================================= */

.dr-overview-section {
    width: 100%;
    padding: 100px 0 105px;

    background: #ffffff;

    overflow: hidden;
}


.dr-overview-container {
    width: min(1380px, calc(100% - 70px));

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(330px, 0.72fr)
        minmax(0, 1.28fr);

    gap: 70px;

    align-items: center;
}


/* =========================================================
   LEFT PRODUCT IMAGE
========================================================= */

.dr-overview-media {
    display: flex;
    flex-direction: column;
    align-items: center;

    min-width: 0;
}


.dr-overview-box {
    width: 100%;
    max-width: 390px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background:
        radial-gradient(
            circle at center,
            #eff6ff 0%,
            #f8fbff 48%,
            rgba(248, 251, 255, 0) 72%
        );

    border-radius: 30px;
}


.dr-overview-box img {
    display: block;

    width: auto;
    max-width: 100%;

    max-height: 420px;

    object-fit: contain;

    filter:
        drop-shadow(0 18px 25px rgba(15, 23, 42, 0.10));
}


/* =========================================================
   RESOURCE LINKS
========================================================= */

.dr-overview-resources {

    display: flex;
    align-items: flex-start;
    justify-content: center;

    gap: 12px;

    margin-top: 24px;
}


.dr-resource-item {

    width: 78px;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 6px;

    color: #64748b;

    font-size: 12px;
    line-height: 1.2;

    text-decoration: none;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}


.dr-resource-item:hover {

    color: #2563eb;

    transform: translateY(-2px);
}


.dr-resource-icon {

    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #ffffff;

    border: 1px solid #dbe3ee;

    color: #2563eb;

    border-radius: 6px;

    box-shadow:
        0 4px 14px rgba(15, 23, 42, 0.04);
}


.dr-resource-icon svg {

    width: 21px;
    height: 21px;

    stroke-width: 2;
}


.dr-resource-icon.video {
    color: #ef4444;
}


.dr-resource-icon.guide {
    color: #2563eb;
}


.dr-resource-icon.docs {
    color: #2563eb;
}


/* =========================================================
   RIGHT CONTENT
========================================================= */

.dr-overview-content {

    min-width: 0;

    max-width: 820px;
}


.dr-overview-eyebrow {

    margin-bottom: 12px;

    color: #2563eb;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.dr-overview-content h2 {

    margin: 0 0 13px;

    color: #12213f;

    font-size: clamp(36px, 3.5vw, 50px);

    line-height: 1.1;

    font-weight: 700;

    letter-spacing: -1.4px;
}


.dr-overview-content h2 span {

    color: #2563eb;
}


.dr-overview-intro {

    max-width: 760px;

    margin: 0 0 24px;

    color: #64748b;

    font-size: 15px;

    line-height: 1.6;
}


/* =========================================================
   CONTENT POINTS
========================================================= */

/* =========================================================
   PRODUCT OVERVIEW POINTS
========================================================= */

.dr-overview-point {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    width: 100%;
    padding: 7px 0;
}

.dr-overview-point p {
    margin: 0;

    color: #475569;
    font-size: 13.5px;
    line-height: 1.58;
}

.dr-overview-point:first-of-type {
    padding-top: 3px;
}



.dr-overview-point strong {
    color: #172033;
    font-weight: 600;
}

.dr-overview-point a {
    color: #2563eb;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.dr-overview-point a:hover {
    color: #1d4ed8;
}
/* Check icon before each overview point */
.dr-check-icon {
    flex: 0 0 auto;

    width: 22px;
    height: 22px;

    margin-top: 2px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #eaf3ff;
    color: #2563eb;
}

.dr-check-icon svg {
    width: 13px;
    height: 13px;

    stroke-width: 3;
}
/* =========================================================
   CTA BUTTONS
========================================================= */

.dr-overview-actions {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin-top: 22px;
}


.dr-overview-btn {

    min-width: 205px;

    min-height: 58px;

    padding: 9px 18px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    border-radius: 4px;

    color: #ffffff;

    text-decoration: none;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.dr-overview-btn:hover {

    color: #ffffff;

    transform: translateY(-2px);
}


.dr-overview-btn svg {

    width: 22px;
    height: 22px;

    flex: 0 0 auto;
}


.dr-overview-btn span {

    display: flex;

    flex-direction: column;

    gap: 2px;

    font-size: 18px;

    font-weight: 500;

    line-height: 1.2;
}


.dr-overview-btn small {

    font-size: 10px;

    font-weight: 400;

    opacity: 0.9;
}


.dr-overview-btn.download {

    background: #16a34a;

    box-shadow:
        0 7px 18px rgba(22, 163, 74, 0.16);
}


.dr-overview-btn.download:hover {

    background: #15803d;
}


.dr-overview-btn.purchase {

    background: #f97316;

    box-shadow:
        0 7px 18px rgba(249, 115, 22, 0.16);
}


.dr-overview-btn.purchase:hover {

    background: #ea580c;
}


/* =========================================================
   WINDOWS SUPPORT
========================================================= */

.dr-overview-support {

    margin-top: 13px;
}


.dr-overview-support img {

    display: block;

    max-width: 145px;

    height: auto;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1500px) {

    .dr-overview-container {
        width: min(1420px, calc(100% - 80px));
    }

    .dr-overview-box {
        max-width: 410px;
    }

    .dr-overview-point {
        padding: 9px 0;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .dr-overview-container {

        width: min(94%, 850px);

        grid-template-columns: 1fr;

        gap: 50px;

    }


    .dr-overview-media {
        order: 1;
    }


    .dr-overview-content {
        order: 2;

        max-width: 850px;
    }


    .dr-overview-box {
        max-width: 330px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .dr-overview-section {
        padding: 65px 0 70px;
    }


    .dr-overview-container {
        width: calc(100% - 32px);

        gap: 35px;
    }


    .dr-overview-box {
        max-width: 280px;

        padding: 15px;
    }


    .dr-overview-box img {
        max-height: 330px;
    }


    .dr-overview-resources {
        gap: 4px;
    }


    .dr-resource-item {
        width: 68px;
    }


    .dr-resource-icon {
        width: 43px;
        height: 43px;
    }


    .dr-overview-content h2 {
        font-size: 34px;

        letter-spacing: -0.8px;
    }


    .dr-overview-intro {
        font-size: 14px;
    }


    .dr-overview-point {
        grid-template-columns: 32px minmax(0, 1fr);

        gap: 10px;

        padding: 9px 0;
    }


    .dr-overview-point-number {
        width: 31px;
        height: 31px;

        font-size: 11px;
    }


    .dr-overview-point p {
        font-size: 13px;
    }


    .dr-overview-actions {
        flex-direction: column;

        width: 100%;
    }


    .dr-overview-btn {
        width: 100%;

        min-width: 0;
    }

}
/* =========================================================
   HOW DOES DATA RECOVERY WORK?
========================================================= */

.dr-how-section {
    width: 100%;

    padding: 90px 0 95px;

    background: #f8fafc;

    overflow: hidden;
}


.dr-how-container {
    width: min(1300px, calc(100% - 70px));

    margin: 0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.dr-how-heading {

    max-width: 850px;

    margin: 0 auto 45px;

    text-align: center;
}


.dr-how-eyebrow {

    margin-bottom: 12px;

    color: #2563eb;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.dr-how-heading h2 {

    margin: 0;

    color: #12213f;

    font-size: clamp(38px, 4vw, 52px);

    line-height: 1.12;

    font-weight: 700;

    letter-spacing: -1.3px;
}


.dr-how-heading h2 span {

    color: #2563eb;
}


.dr-how-heading p {

    max-width: 700px;

    margin: 16px auto 0;

    color: #64748b;

    font-size: 15px;

    line-height: 1.6;
}


/* =========================================================
   MAIN GRID
========================================================= */

.dr-how-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 0.85fr)
        minmax(0, 1.15fr);

    gap: 55px;

    align-items: center;

    max-width: 1200px;

    margin: 0 auto;
}


/* =========================================================
   LEFT - STEPS
========================================================= */

.dr-how-steps {

    width: 100%;
}


/* =========================================================
   STEP
========================================================= */

.dr-how-step {

    width: 100%;

    border-bottom: 1px solid #e2e8f0;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}


.dr-how-step:first-child {
    border-top: 1px solid #e2e8f0;
}


/* =========================================================
   STEP HEADER
========================================================= */

.dr-how-step-header {

    width: 100%;

    min-height: 78px;

    padding: 13px 6px;

    display: flex;

    align-items: center;

    gap: 14px;

    border: 0;

    background: transparent;

    color: #12213f;

    text-align: left;

    cursor: pointer;

    font-family: inherit;
}


/* =========================================================
   STEP ICON
========================================================= */

.dr-how-step-icon {

    flex: 0 0 auto;

    width: 45px;
    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 11px;
}


.dr-how-step-icon svg {

    width: 22px;
    height: 22px;

    stroke-width: 2;
}


.dr-how-step-icon.blue {

    background: #eff6ff;

    color: #2563eb;
}


.dr-how-step-icon.orange {

    background: #fff3e8;

    color: #f97316;
}


.dr-how-step-icon.green {

    background: #ecfdf3;

    color: #16a34a;
}


/* =========================================================
   TITLE
========================================================= */

.dr-how-step-title {

    flex: 1;

    color: #172554;

    font-size: 17px;

    line-height: 1.4;

    font-weight: 650;
}


/* =========================================================
   ARROW
========================================================= */

.dr-how-step-arrow {

    flex: 0 0 auto;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #64748b;

    transition:
        transform 0.25s ease,
        color 0.2s ease;
}


.dr-how-step-arrow svg {

    width: 18px;
    height: 18px;

    stroke-width: 2.2;
}


/* =========================================================
   ACTIVE STEP
========================================================= */

.dr-how-step.active {

    margin: 7px 0;

    padding: 0 14px;

    border: 1px solid #bfdbfe;

    border-radius: 12px;

    background: #ffffff;

    box-shadow:
        0 7px 25px rgba(37, 99, 235, 0.055);
}


.dr-how-step.active:first-child {
    border-top: 1px solid #bfdbfe;
}


.dr-how-step.active .dr-how-step-arrow {

    color: #2563eb;

    transform: rotate(180deg);
}


/* =========================================================
   DESCRIPTION
========================================================= */

.dr-how-step-content {

    display: none;

    padding:

        0

        22px

        20px

        59px;
}


.dr-how-step.active .dr-how-step-content {

    display: block;
}


.dr-how-step-content p {

    max-width: 520px;

    margin: 0;

    color: #64748b;

    font-size: 14px;

    line-height: 1.6;
}


/* =========================================================
   RIGHT - IMAGE
========================================================= */

.dr-how-visual {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;
}


.dr-how-image-wrap {

    position: relative;

    width: 100%;

    max-width: 650px;

    padding: 10px;

    background: #ffffff;

    border: 1px solid #dce5ef;

    border-radius: 14px;

    box-shadow:
        0 15px 40px rgba(15, 23, 42, 0.08);

    overflow: hidden;
}


.dr-how-image-wrap::before {

    content: "";

    position: absolute;

    width: 330px;
    height: 330px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: #eff6ff;

    filter: blur(2px);

    z-index: 0;
}


.dr-how-image {

    position: relative;

    z-index: 1;

    display: block;

    width: 100%;

    height: auto;

    max-height: 430px;

    object-fit: contain;

    border-radius: 8px;

    transition: opacity 0.15s ease;
}


/* =========================================================
   CTA STRIP
========================================================= */

.dr-how-cta {

    width: 100%;

    max-width: 1200px;

    margin: 35px auto 0;

    padding: 17px 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    background: #ffffff;

    border: 1px solid #dbeafe;

    border-radius: 12px;

    box-shadow:
        0 7px 25px rgba(15, 23, 42, 0.04);
}


/* =========================================================
   CTA LEFT
========================================================= */

.dr-how-cta-left {

    display: flex;

    align-items: center;

    gap: 14px;

    min-width: 0;
}


/* =========================================================
   WINDOWS LOGO
========================================================= */

.dr-how-windows-icon {

    flex: 0 0 auto;

    width: 50px;
    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #eff6ff;

    border: 1px solid #dbeafe;

    border-radius: 10px;

    color: #2563eb;
}


.dr-how-windows-icon svg {

    width: 28px;
    height: 28px;

    fill: currentColor;
}


/* =========================================================
   CTA TEXT
========================================================= */

.dr-how-cta-text {

    min-width: 0;
}


.dr-how-cta-text h3 {

    margin: 0 0 3px;

    color: #12213f;

    font-size: 16px;

    line-height: 1.35;

    font-weight: 700;
}


.dr-how-cta-text p {

    margin: 0;

    color: #64748b;

    font-size: 13px;

    line-height: 1.4;
}


/* =========================================================
   CTA BUTTON
========================================================= */

.dr-how-cta-button {

    flex: 0 0 auto;

    min-height: 44px;

    padding: 0 20px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    border-radius: 7px;

    background: #2563eb;

    color: #ffffff;

    font-size: 13.5px;

    font-weight: 600;

    text-decoration: none;

    white-space: nowrap;

    transition:
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.dr-how-cta-button:hover {

    background: #1d4ed8;

    color: #ffffff;

    transform: translateY(-1px);

    box-shadow:
        0 7px 18px rgba(37, 99, 235, 0.18);
}


.dr-how-cta-button svg {

    width: 16px;
    height: 16px;

    stroke-width: 2.2;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .dr-how-container {

        width: min(94%, 850px);
    }


    .dr-how-grid {

        grid-template-columns: 1fr;

        gap: 35px;

        max-width: 760px;
    }


    .dr-how-visual {

        order: -1;
    }


    .dr-how-image-wrap {

        max-width: 680px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .dr-how-section {

        padding: 65px 0 70px;
    }


    .dr-how-container {

        width: calc(100% - 32px);
    }


    .dr-how-heading {

        margin-bottom: 30px;
    }


    .dr-how-heading h2 {

        font-size: 34px;
    }


    .dr-how-heading p {

        font-size: 14px;
    }


    .dr-how-step-header {

        min-height: 70px;

        gap: 10px;
    }


    .dr-how-step-icon {

        width: 40px;
        height: 40px;
    }


    .dr-how-step-icon svg {

        width: 19px;
        height: 19px;
    }


    .dr-how-step-title {

        font-size: 15px;
    }


    .dr-how-step-content {

        padding:

            0

            15px

            18px

            50px;
    }


    .dr-how-step-content p {

        font-size: 13px;
    }


    .dr-how-cta {

        align-items: flex-start;

        flex-direction: column;

        gap: 15px;

        padding: 16px;
    }


    .dr-how-cta-button {

        width: 100%;
    }

}
/* =========================================================
   TECHNICAL SPECIFICATIONS
========================================================= */

.dr-spec-section {
    width: 100%;
    padding: 95px 0 100px;
    background: #f8fafc;
    overflow: hidden;
}

.dr-spec-container {
    width: min(1400px, calc(100% - 70px));
    margin: 0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.dr-spec-heading {
    max-width: 850px;
    margin: 0 auto 48px;
    text-align: center;
}

.dr-spec-eyebrow {
    margin-bottom: 12px;

    color: #2563eb;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 2px;
    text-transform: uppercase;
}

.dr-spec-heading h2 {
    margin: 0;

    color: #12213f;

    font-size: clamp(38px, 4vw, 52px);
    line-height: 1.1;

    font-weight: 700;
    letter-spacing: -1.4px;
}

.dr-spec-heading h2 span {
    color: #2563eb;
}

.dr-spec-heading p {
    max-width: 720px;

    margin: 15px auto 0;

    color: #64748b;

    font-size: 15px;
    line-height: 1.6;
}


/* =========================================================
   MAIN SPECIFICATION AREA
========================================================= */

.dr-spec-main {
    display: grid;

    grid-template-columns:
        minmax(250px, .62fr)
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 20px;

    align-items: stretch;

    max-width: 1300px;

    margin: 0 auto;
}


/* =========================================================
   PRODUCT BOX
========================================================= */

.dr-spec-product {
    min-height: 390px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 16px;

    background:
        radial-gradient(
            circle at center,
            #eaf3ff 0%,
            #f4f8ff 48%,
            rgba(248, 250, 252, 0) 73%
        );
}

.dr-spec-product-image {
    width: 100%;

    display: flex;

    align-items: center;
    justify-content: center;
}

.dr-spec-product-image img {
    display: block;

    width: auto;

    max-width: 270px;
    max-height: 360px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 18px 25px rgba(15, 23, 42, .12)
        );
}


/* =========================================================
   SPEC CARDS
========================================================= */

.dr-spec-card {
    padding: 24px 25px;

    background: #ffffff;

    border: 1px solid #dbe5f0;

    border-radius: 14px;

    box-shadow:
        0 6px 24px rgba(15, 23, 42, .035);
}


/* =========================================================
   CARD HEADING
========================================================= */

.dr-spec-card-heading {
    display: flex;

    align-items: center;

    gap: 13px;

    padding-bottom: 18px;

    border-bottom: 1px solid #e5ebf2;
}

.dr-spec-card-icon {
    flex: 0 0 auto;

    width: 44px;
    height: 44px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #eff6ff;

    color: #2563eb;
}

.dr-spec-card-icon svg {
    width: 21px;
    height: 21px;

    stroke-width: 2;
}

.dr-spec-card-heading h3 {
    margin: 0;

    color: #12213f;

    font-size: 19px;
    line-height: 1.3;

    font-weight: 700;
}


/* =========================================================
   SPEC ROW
========================================================= */

.dr-spec-row {
    min-height: 63px;

    display: grid;

    grid-template-columns: minmax(125px, .85fr) minmax(130px, 1.15fr);

    gap: 15px;

    align-items: center;

    border-bottom: 1px solid #edf1f5;
}

.dr-spec-row:last-child {
    border-bottom: 0;
}

.dr-spec-label {
    display: flex;

    align-items: center;

    gap: 9px;

    color: #334155;

    font-size: 13px;

    font-weight: 600;
}

.dr-spec-label svg {
    flex: 0 0 auto;

    width: 17px;
    height: 17px;

    color: #2563eb;

    stroke-width: 2;
}

.dr-spec-value {
    color: #475569;

    font-size: 13px;

    line-height: 1.45;
}


/* =========================================================
   WINDOWS + TRIAL GRID
========================================================= */

.dr-spec-info-grid {
    max-width: 1300px;

    margin: 20px auto 0;

    display: grid;

    grid-template-columns: 1.35fr 1fr;

    gap: 20px;
}


/* =========================================================
   WINDOWS COMPATIBILITY
========================================================= */

.dr-spec-windows {
    display: flex;

    align-items: flex-start;

    gap: 16px;

    padding: 23px;

    background: #f2fcf7;

    border: 1px solid #ccebdc;

    border-radius: 14px;
}

.dr-spec-info-icon {
    flex: 0 0 auto;

    width: 47px;
    height: 47px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background: #ffffff;

    color: #2563eb;
}

.dr-spec-info-icon svg {
    width: 25px;
    height: 25px;

    stroke-width: 2;
}

.dr-spec-info-content {
    min-width: 0;
}

.dr-spec-info-content h3 {
    margin: 0 0 5px;

    color: #12213f;

    font-size: 17px;

    line-height: 1.3;

    font-weight: 700;
}

.dr-spec-info-content > p {
    margin: 0;

    color: #64748b;

    font-size: 13px;

    line-height: 1.5;
}


/* =========================================================
   WINDOWS LIST
========================================================= */

.dr-spec-windows-list {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 16px;
}

.dr-spec-windows-list span {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 7px 10px;

    background: #ffffff;

    border: 1px solid #d5eee1;

    border-radius: 7px;

    color: #334155;

    font-size: 11.5px;

    font-weight: 600;
}

.dr-spec-windows-list svg {
    width: 14px;
    height: 14px;

    color: #159447;

    stroke-width: 2.7;
}


/* =========================================================
   TRIAL LIMITATIONS
========================================================= */

.dr-spec-trial {
    display: flex;

    align-items: flex-start;

    gap: 16px;

    padding: 23px;

    background: #fff9f2;

    border: 1px solid #f8dfc4;

    border-radius: 14px;
}

.dr-spec-trial .dr-spec-info-icon {
    color: #f97316;

    background: #fff3e7;
}

.dr-spec-trial-point {
    display: flex;

    align-items: flex-start;

    gap: 8px;

    margin-top: 11px;
}

.dr-spec-trial-point:first-of-type {
    margin-top: 14px;
}

.dr-spec-trial-point > svg {
    flex: 0 0 auto;

    width: 16px;
    height: 16px;

    margin-top: 2px;

    color: #f97316;

    stroke-width: 2.8;
}

.dr-spec-trial-point p {
    margin: 0;

    color: #64748b;

    font-size: 12.5px;

    line-height: 1.5;
}


/* =========================================================
   HELPFUL RESOURCES
========================================================= */

.dr-spec-resources {
    max-width: 1300px;

    margin: 20px auto 0;

    padding: 18px 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    background: #ffffff;

    border: 1px solid #dbe5f0;

    border-radius: 14px;

    box-shadow:
        0 5px 20px rgba(15, 23, 42, .025);
}


/* =========================================================
   RESOURCE INTRO
========================================================= */

.dr-spec-resource-intro {
    display: flex;

    align-items: center;

    gap: 13px;

    min-width: 260px;
}

.dr-spec-resource-main-icon {
    flex: 0 0 auto;

    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #eff6ff;

    color: #2563eb;
}

.dr-spec-resource-main-icon svg {
    width: 23px;
    height: 23px;
}

.dr-spec-resource-intro h3 {
    margin: 0 0 3px;

    color: #12213f;

    font-size: 16px;

    font-weight: 700;
}

.dr-spec-resource-intro p {
    margin: 0;

    color: #64748b;

    font-size: 12px;

    line-height: 1.4;
}


/* =========================================================
   RESOURCE LINKS
========================================================= */

.dr-spec-resource-links {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 10px;
}

.dr-spec-resource-link {
    min-height: 43px;

    padding: 0 14px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    background: #ffffff;

    border: 1px solid #bfdbfe;

    border-radius: 7px;

    color: #2563eb;

    font-size: 12px;

    font-weight: 600;

    text-decoration: none;

    white-space: nowrap;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

.dr-spec-resource-link:hover {
    background: #eff6ff;

    color: #1d4ed8;

    transform: translateY(-1px);
}

.dr-spec-resource-link svg {
    width: 17px;
    height: 17px;

    stroke-width: 2;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .dr-spec-main {
        grid-template-columns: 1fr 1fr;
    }

    .dr-spec-product {
        grid-column: 1 / -1;

        min-height: 260px;
    }

    .dr-spec-product-image img {
        max-height: 260px;
    }

    .dr-spec-info-grid {
        grid-template-columns: 1fr;
    }

    .dr-spec-resources {
        align-items: flex-start;

        flex-direction: column;
    }

    .dr-spec-resource-links {
        width: 100%;

        justify-content: flex-start;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .dr-spec-section {
        padding: 65px 0 70px;
    }

    .dr-spec-container {
        width: calc(100% - 32px);
    }

    .dr-spec-heading {
        margin-bottom: 32px;
    }

    .dr-spec-heading h2 {
        font-size: 34px;
    }

    .dr-spec-heading p {
        font-size: 14px;
    }

    .dr-spec-main {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .dr-spec-product {
        grid-column: auto;

        min-height: 280px;
    }

    .dr-spec-product-image img {
        max-width: 220px;
        max-height: 280px;
    }

    .dr-spec-card {
        padding: 20px 17px;
    }

    .dr-spec-row {
        grid-template-columns: 1fr;

        gap: 4px;

        padding: 12px 0;
    }

    .dr-spec-label {
        font-size: 12px;
    }

    .dr-spec-value {
        padding-left: 26px;

        font-size: 12.5px;
    }

    .dr-spec-windows,
    .dr-spec-trial {
        padding: 18px;
    }

    .dr-spec-resources {
        padding: 17px;
    }

    .dr-spec-resource-links {
        flex-direction: column;

        align-items: stretch;
    }

    .dr-spec-resource-link {
        width: 100%;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 450px) {

    .dr-spec-windows-list {
        flex-direction: column;
    }

    .dr-spec-windows-list span {
        width: fit-content;
    }

    .dr-spec-info-icon {
        width: 42px;
        height: 42px;
    }

}
/* =========================================================
   TRIAL VS FULL VERSION
========================================================= */

.dr-trial-section {
    width: 100%;
    padding: 90px 0 95px;
    background: #f8fafc;
}


.dr-trial-container {
    width: min(1180px, calc(100% - 60px));
    margin: 0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.dr-trial-heading {
    max-width: 760px;
    margin: 0 auto 40px;
    text-align: center;
}


.dr-trial-eyebrow {
    margin-bottom: 10px;

    color: #2563eb;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2px;
    text-transform: uppercase;
}


.dr-trial-heading h2 {
    margin: 0;

    color: #12213f;

    font-size: clamp(36px, 3.5vw, 46px);
    line-height: 1.15;

    font-weight: 700;

    letter-spacing: -1px;
}


.dr-trial-heading h2 span {
    color: #2563eb;
}


.dr-trial-heading p {
    max-width: 650px;

    margin: 13px auto 0;

    color: #64748b;

    font-size: 14.5px;
    line-height: 1.6;
}


/* =========================================================
   TABLE WRAPPER
========================================================= */

.dr-comparison-wrap {
    width: 100%;

    background: #ffffff;

    border: 1px solid #dce5ef;

    border-radius: 14px;

    overflow: hidden;

    box-shadow:
        0 8px 30px rgba(15, 23, 42, 0.045);
}


/* =========================================================
   TABLE
========================================================= */

.dr-comparison-table {
    width: 100%;

    border-collapse: collapse;

    table-layout: fixed;
}


/* =========================================================
   TABLE HEADER
========================================================= */

/* =========================================================
   LIGHT TABLE HEADER
========================================================= */

.dr-comparison-table thead th {
    padding: 20px 24px;

    background: #eef5ff;

    color: #172033;

    text-align: center;

    border-right: 1px solid #dbe7f5;

    border-bottom: 1px solid #dbe7f5;
}

.dr-comparison-table thead th:last-child {
    border-right: 0;
}


/* Feature heading stays left aligned */

.dr-comparison-table .dr-feature-column {
    width: 58%;

    text-align: left;
}


.dr-comparison-table .dr-demo-column,
.dr-comparison-table .dr-full-column {
    width: 21%;
}


/* =========================================================
   HEADER LABELS
========================================================= */

.dr-table-label {
    display: block;

    margin-bottom: 3px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.4px;
}


.dr-table-label.demo {
    color: #64748b;
}


.dr-table-label.full {
    color: #2563eb;
}


.dr-comparison-table thead strong {
    display: block;

    color: #172033;

    font-size: 16px;

    font-weight: 650;
}


.dr-table-label {
    display: block;

    margin-bottom: 3px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.4px;
}


.dr-table-label.demo {
    color: #94a3b8;
}


.dr-table-label.full {
    color: #60a5fa;
}


.dr-comparison-table thead strong {
    display: block;

    font-size: 16px;

    font-weight: 650;
}


/* =========================================================
   TABLE BODY
========================================================= */

.dr-comparison-table tbody td {

    padding: 14px 24px;

    color: #334155;

    font-size: 13px;

    line-height: 1.45;

    border-bottom: 1px solid #e8edf3;

    border-right: 1px solid #e8edf3;
}


.dr-comparison-table tbody td:last-child {
    border-right: 0;
}


.dr-comparison-table tbody tr:last-child td {
    border-bottom: 0;
}


.dr-comparison-table tbody td:not(:first-child) {
    text-align: center;
}


.dr-comparison-table tbody tr:nth-child(even) {
    background: #fbfdff;
}


/* =========================================================
   CHECK ICON
========================================================= */

.dr-check {

    width: 27px;
    height: 27px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #ecfdf3;

    color: #159447;
}


.dr-check svg {

    width: 15px;
    height: 15px;

    stroke-width: 3;
}


.demo-check {

    background: #f0fdf4;

    color: #159447;
}


/* =========================================================
   DEMO LIMITATION
========================================================= */

.dr-highlight-row {
    background: #fffaf5 !important;
}


.dr-highlight-row td:first-child {
    color: #172033;

    font-weight: 600;
}


.dr-preview-label {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 5px 10px;

    background: #fff1e6;

    color: #ea580c;

    border-radius: 5px;

    font-size: 11px;

    font-weight: 600;
}


/* =========================================================
   COST
========================================================= */

.dr-cost-row {
    background: #f8fafc !important;
}


.dr-cost-row td {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
}


.dr-cost-row td:first-child {
    color: #12213f;

    font-size: 14px;

    font-weight: 600;
}


.dr-free-price {

    color: #159447;

    font-size: 18px;
}


.dr-full-price {

    color: #2563eb;

    font-size: 18px;
}


/* =========================================================
   NOTE
========================================================= */

.dr-trial-note {

    max-width: 900px;

    margin: 18px auto 0;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    color: #64748b;

    font-size: 12.5px;

    line-height: 1.5;

    text-align: center;
}


.dr-trial-note svg {

    flex: 0 0 auto;

    width: 16px;
    height: 16px;

    color: #f97316;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 800px) {

    .dr-trial-container {
        width: calc(100% - 32px);
    }

    .dr-comparison-wrap {
        overflow-x: auto;
    }

    .dr-comparison-table {
        min-width: 680px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .dr-trial-section {
        padding: 65px 0 70px;
    }

    .dr-trial-heading {
        margin-bottom: 30px;
    }

    .dr-trial-heading h2 {
        font-size: 34px;
    }

    .dr-trial-heading p {
        font-size: 13.5px;
    }

    .dr-comparison-table thead th {
        padding: 17px 16px;
    }

    .dr-comparison-table tbody td {
        padding: 12px 16px;
    }

    .dr-trial-note {
        align-items: flex-start;
    }

}
/* =========================================================
   CUSTOMER REVIEWS
========================================================= */

.dr-reviews-section {
    padding: 90px 0 100px;
    background: #f8fafc;
}

.dr-reviews-container {
    width: min(1440px, calc(100% - 80px));
    margin: 0 auto;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.dr-reviews-heading {
    max-width: 780px;
    margin: 0 auto 48px;
    text-align: center;
}

.dr-section-kicker {
    margin-bottom: 10px;

    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.6px;
    line-height: 1.3;
    text-transform: uppercase;
}

.dr-reviews-heading h2 {
    margin: 0;

    color: #172033;
    font-size: clamp(34px, 3.2vw, 46px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.8px;
}

.dr-reviews-heading h2 span {
    color: #2563eb;
}

.dr-reviews-heading p {
    max-width: 700px;
    margin: 16px auto 0;

    color: #64748b;
    font-size: 15px;
    line-height: 1.7;
}


/* =========================================================
   REVIEWS GRID
========================================================= */

.dr-reviews-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 24px;

    max-width: 1350px;
    margin: 0 auto;
}


/* =========================================================
   REVIEW CARD
========================================================= */

.dr-review-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 295px;

    padding: 30px 31px 26px;

    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 15px;

    box-shadow:
        0 4px 18px rgba(15, 23, 42, 0.035);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.dr-review-card:hover {
    transform: translateY(-3px);

    border-color: #d5e2f2;

    box-shadow:
        0 12px 30px rgba(15, 23, 42, 0.075);
}


/* =========================================================
   SAMPLE REVIEW LABEL
========================================================= */

.dr-sample-label {
    display: inline-flex;
    align-self: flex-start;

    margin-bottom: 10px;
    padding: 4px 8px;

    border-radius: 4px;

    background: #fff7ed;
    color: #c2410c;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.7px;
    line-height: 1.3;
}

.dr-review-sample {
    border-style: dashed;
}


/* =========================================================
   STARS
========================================================= */

.dr-review-stars {
    display: flex;
    align-items: center;
    gap: 3px;

    margin-bottom: 20px;
}

.dr-review-stars svg {
    width: 16px;
    height: 16px;

    color: #f59e0b;
    fill: #f59e0b;

    stroke-width: 1.8;
}


/* =========================================================
   REVIEW TEXT
========================================================= */

.dr-review-text {
    flex: 1;

    margin: 0;

    color: #475569;

    font-size: 14px;
    font-style: italic;
    line-height: 1.75;
}


/* =========================================================
   REVIEW FOOTER
========================================================= */

.dr-review-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-top: 25px;
    padding-top: 20px;

    border-top: 1px solid #edf1f5;
}


/* =========================================================
   PERSON
========================================================= */

.dr-review-person {
    display: flex;
    align-items: center;
    gap: 11px;
}

.dr-review-avatar {
    flex: 0 0 43px;

    width: 43px;
    height: 43px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #eaf3ff;
    color: #2563eb;

    font-size: 15px;
    font-weight: 700;
}

.dr-avatar-blue {
    background: #eaf1ff;
    color: #2563eb;
}

.dr-avatar-purple {
    background: #f1eaff;
    color: #7c3aed;
}

.dr-avatar-orange {
    background: #fff1e7;
    color: #ea580c;
}


/* =========================================================
   AUTHOR
========================================================= */

.dr-review-author {
    display: flex;
    flex-direction: column;
}

.dr-review-author strong {
    color: #172033;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
}

.dr-review-author span {
    margin-top: 2px;

    color: #64748b;

    font-size: 12px;
    line-height: 1.35;
}


/* =========================================================
   DATE / REVIEW LABEL
========================================================= */

.dr-review-date {
    color: #94a3b8;

    font-size: 11px;
    line-height: 1.4;

    text-align: right;
}


/* =========================================================
   BUTTONS
========================================================= */

.dr-review-actions {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 14px;

    margin-top: 35px;
}

.dr-review-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 44px;

    padding: 0 21px;

    border-radius: 6px;

    font-size: 14px;
    font-weight: 650;

    text-decoration: none;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.dr-review-btn svg {
    width: 16px;
    height: 16px;
    stroke-width: 2.3;
}


/* Primary */

.dr-review-btn-primary {
    background: #159447;
    border: 1px solid #159447;

    color: #ffffff;
}

.dr-review-btn-primary:hover {
    background: #117d3b;
    border-color: #117d3b;

    color: #ffffff;

    text-decoration: none;

    transform: translateY(-1px);
}


/* Secondary */

.dr-review-btn-secondary {
    background: #ffffff;
    border: 1px solid #159447;

    color: #159447;
}

.dr-review-btn-secondary:hover {
    background: #f0fdf4;
    border-color: #12823e;

    color: #12823e;

    text-decoration: none;

    transform: translateY(-1px);
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1000px) {

    .dr-reviews-container {
        width: min(100% - 50px, 850px);
    }

    .dr-reviews-grid {
        grid-template-columns: 1fr;
        max-width: 750px;
    }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 600px) {

    .dr-reviews-section {
        padding: 65px 0 70px;
    }

    .dr-reviews-container {
        width: calc(100% - 30px);
    }

    .dr-reviews-heading {
        margin-bottom: 32px;
    }

    .dr-reviews-heading h2 {
        font-size: 31px;
        letter-spacing: -0.5px;
    }

    .dr-reviews-heading p {
        margin-top: 13px;

        font-size: 14px;
        line-height: 1.65;
    }

    .dr-reviews-grid {
        gap: 18px;
    }

    .dr-review-card {
        min-height: 0;

        padding: 24px 21px 23px;

        border-radius: 12px;
    }

    .dr-review-stars {
        margin-bottom: 16px;
    }

    .dr-review-text {
        font-size: 13.5px;
        line-height: 1.7;
    }

    .dr-review-footer {
        margin-top: 21px;
        padding-top: 17px;
    }

    .dr-review-avatar {
        flex-basis: 39px;
        width: 39px;
        height: 39px;

        font-size: 14px;
    }

    .dr-review-author strong {
        font-size: 13px;
    }

    .dr-review-author span {
        font-size: 11px;
    }

    .dr-review-date {
        display: none;
    }

    .dr-review-actions {
        flex-direction: column;

        gap: 10px;

        margin-top: 27px;
    }

    .dr-review-btn {
        width: 100%;
        max-width: 260px;
    }

}
/* =========================================================
   FAQ OPTION 2
   ROUNDED CARD ACCORDION
========================================================= */

.dr-faq2-section {
    padding: 90px 0 100px;
    background: #f8fafc;
}

.dr-faq2-container {
    width: min(1440px, calc(100% - 80px));
    margin: 0 auto;
}


/* =========================
   HEADING
========================= */

.dr-faq2-heading {
    max-width: 760px;
    margin: 0 auto 45px;
    text-align: center;
}

.dr-faq2-heading .dr-section-kicker {
    margin-bottom: 10px;
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.dr-faq2-heading h2 {
    margin: 0;
    color: #172033;
    font-size: clamp(34px, 3.2vw, 46px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.8px;
}

.dr-faq2-heading h2 span {
    color: #2563eb;
}

.dr-faq2-heading p {
    margin: 14px auto 0;
    color: #64748b;
    font-size: 15px;
    line-height: 1.7;
}


/* =========================
   FAQ LIST
========================= */

.dr-faq2-list {
    max-width: 1180px;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    gap: 12px;
}


/* =========================
   ROUNDED FAQ CARD
========================= */

.dr-faq2-item {
    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 12px;

    overflow: hidden;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.dr-faq2-item:hover {
    border-color: #cbdaf0;
}

.dr-faq2-item.active {
    border-color: #d7e5f7;

    box-shadow:
        0 6px 20px rgba(15, 23, 42, 0.045);
}


/* =========================
   QUESTION
========================= */

.dr-faq2-question {
    width: 100%;

    display: grid;
    grid-template-columns: 45px minmax(0, 1fr) 35px;

    align-items: center;

    gap: 15px;

    padding: 20px 22px;

    background: #ffffff;

    border: 0;
    outline: none;

    color: #172033;

    font-family: inherit;
    text-align: left;

    cursor: pointer;

    transition:
        color 0.2s ease,
        background 0.2s ease;
}

.dr-faq2-question:hover {
    color: #2563eb;
}

.dr-faq2-item.active .dr-faq2-question {
    background: #f8fbff;
}


/* =========================
   NUMBER
========================= */

.dr-faq2-number {
    color: #94a3b8;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.dr-faq2-item.active .dr-faq2-number {
    color: #2563eb;
}


/* =========================
   QUESTION TEXT
========================= */

.dr-faq2-title {
    color: inherit;

    font-size: 15px;
    font-weight: 650;
    line-height: 1.5;
}


/* =========================
   PLUS ICON
========================= */

.dr-faq2-icon {
    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-left: auto;

    border-radius: 50%;

    background: #eef5ff;
    color: #2563eb;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.dr-faq2-icon svg {
    width: 16px;
    height: 16px;

    stroke-width: 2.5;

    transition: transform 0.25s ease;
}

.dr-faq2-item.active .dr-faq2-icon {
    background: #2563eb;
    color: #ffffff;
}

.dr-faq2-item.active .dr-faq2-icon svg {
    transform: rotate(45deg);
}


/* =========================
   ANSWER
========================= */

.dr-faq2-answer {
    display: none;

    max-width: 950px;

    padding: 0 75px 28px 82px;

    color: #475569;

    font-size: 14px;
    line-height: 1.75;
}

.dr-faq2-item.active .dr-faq2-answer {
    display: block;

    animation: drFaq2Fade 0.25s ease;
}

@keyframes drFaq2Fade {

    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================
   ANSWER CONTENT
========================= */

.dr-faq2-answer p {
    margin: 0 0 13px;
}

.dr-faq2-answer p:last-child {
    margin-bottom: 0;
}

.dr-faq2-answer strong {
    color: #172033;
}

.dr-faq2-answer ul,
.dr-faq2-answer ol {
    margin: 10px 0 15px;
    padding-left: 22px;
}

.dr-faq2-answer li {
    margin-bottom: 7px;
}

.dr-faq2-answer a {
    color: #2563eb;
    text-decoration: none;
}

.dr-faq2-answer a:hover {
    text-decoration: underline;
}


/* =========================
   TABLET
========================= */

@media (max-width: 800px) {

    .dr-faq2-container {
        width: min(100% - 45px, 720px);
    }

    .dr-faq2-question {
        grid-template-columns: 35px minmax(0, 1fr) 32px;
        padding: 19px 18px;
    }

    .dr-faq2-answer {
        padding: 0 50px 25px 68px;
    }

}


/* =========================
   MOBILE
========================= */

@media (max-width: 600px) {

    .dr-faq2-section {
        padding: 65px 0 70px;
    }

    .dr-faq2-container {
        width: calc(100% - 30px);
    }

    .dr-faq2-heading {
        margin-bottom: 30px;
    }

    .dr-faq2-heading h2 {
        font-size: 31px;
    }

    .dr-faq2-heading p {
        font-size: 14px;
    }

    .dr-faq2-list {
        gap: 9px;
    }

    .dr-faq2-item {
        border-radius: 10px;
    }

    .dr-faq2-question {
        grid-template-columns: 30px minmax(0, 1fr) 30px;
        gap: 10px;
        padding: 17px 14px;
    }

    .dr-faq2-number {
        font-size: 10px;
    }

    .dr-faq2-title {
        font-size: 13.5px;
    }

    .dr-faq2-icon {
        width: 28px;
        height: 28px;
    }

    .dr-faq2-icon svg {
        width: 14px;
        height: 14px;
    }

    .dr-faq2-answer {
        padding: 0 16px 22px 44px;
        font-size: 13px;
        line-height: 1.7;
    }

}
/* =========================================================
   PRODUCT SCREENSHOTS
========================================================= */

.dr-screenshots-section {
    padding: 90px 0 100px;
    background: #f8fafc;
}

.dr-screenshots-container {
    width: min(1440px, calc(100% - 80px));
    margin: 0 auto;
}


/* =========================
   HEADER
========================= */

.dr-screenshots-heading {
    max-width: 950px;
    margin: 0 auto 40px;
    text-align: center;
}

.dr-screenshots-heading h2 {
    margin: 0 0 15px;

    color: #172033;

    font-size: clamp(32px, 3.2vw, 44px);
    font-weight: 700;
    line-height: 1.18;

    letter-spacing: -0.7px;
}

.dr-screenshots-heading p {
    max-width: 900px;
    margin: 0 auto;

    color: #64748b;

    font-size: 15px;
    line-height: 1.7;
}


/* =========================
   MAIN SCREENSHOT
========================= */

.dr-screenshot-featured {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 18px;

    max-width: 1220px;
    margin: 0 auto;
}


.dr-screenshot-main {
    width: 100%;

    padding: 12px;

    background: #ffffff;

    border: 1px solid #dce5ef;
    border-radius: 14px;

    box-shadow:
        0 12px 35px rgba(15, 23, 42, 0.08);

    overflow: hidden;
}


.dr-screenshot-main img {
    display: block;

    width: 100%;
    height: auto;

    max-height: 650px;

    object-fit: contain;

    border-radius: 7px;
}


/* =========================
   ARROWS
========================= */

.dr-screenshot-arrow {
    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #dbe5f0;
    border-radius: 50%;

    background: #ffffff;
    color: #2563eb;

    cursor: pointer;

    box-shadow:
        0 5px 15px rgba(15, 23, 42, 0.06);

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

.dr-screenshot-arrow:hover {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}

.dr-screenshot-arrow svg {
    width: 19px;
    height: 19px;
}


/* =========================
   CAPTION
========================= */

.dr-screenshot-caption {
    max-width: 1000px;

    margin: 20px auto 28px;

    text-align: center;
}

.dr-screenshot-caption strong {
    color: #172033;

    font-size: 15px;
    font-weight: 650;
    line-height: 1.5;
}


/* =========================
   THUMBNAILS
========================= */

.dr-screenshot-thumbnails {
    display: grid;

    grid-template-columns:
        repeat(6, minmax(0, 1fr));

    gap: 14px;

    max-width: 1220px;

    margin: 0 auto;
}


.dr-screenshot-thumb {
    display: block;

    width: 100%;

    padding: 7px;

    background: #ffffff;

    border: 1px solid #dfe7f0;
    border-radius: 10px;

    cursor: pointer;

    text-align: center;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}


.dr-screenshot-thumb:hover {
    border-color: #9fc0ed;

    transform: translateY(-2px);
}


.dr-screenshot-thumb.active {
    border: 2px solid #2563eb;

    padding: 6px;

    box-shadow:
        0 5px 16px rgba(37, 99, 235, 0.12);
}


.dr-thumb-image {
    display: block;

    width: 100%;

    aspect-ratio: 16 / 10;

    overflow: hidden;

    background: #f8fafc;

    border-radius: 6px;
}


.dr-thumb-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


.dr-thumb-title {
    display: block;

    padding: 8px 2px 3px;

    color: #475569;

    font-size: 12px;
    font-weight: 600;
}

.dr-screenshot-thumb.active .dr-thumb-title {
    color: #2563eb;
}


/* =========================
   TABLET
========================= */

@media (max-width: 1000px) {

    .dr-screenshots-container {
        width: min(100% - 50px, 900px);
    }

    .dr-screenshot-thumbnails {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


/* =========================
   MOBILE
========================= */

@media (max-width: 650px) {

    .dr-screenshots-section {
        padding: 65px 0 70px;
    }

    .dr-screenshots-container {
        width: calc(100% - 30px);
    }

    .dr-screenshots-heading {
        margin-bottom: 28px;
    }

    .dr-screenshots-heading h2 {
        font-size: 30px;
    }

    .dr-screenshots-heading p {
        font-size: 13.5px;
    }


    .dr-screenshot-featured {
        gap: 8px;
    }


    .dr-screenshot-main {
        padding: 7px;
        border-radius: 10px;
    }


    .dr-screenshot-arrow {
        flex: 0 0 34px;

        width: 34px;
        height: 34px;
    }

    .dr-screenshot-arrow svg {
        width: 16px;
        height: 16px;
    }


    .dr-screenshot-caption {
        margin: 16px auto 22px;
    }

    .dr-screenshot-caption strong {
        font-size: 13px;
    }


    .dr-screenshot-thumbnails {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }


    .dr-thumb-title {
        font-size: 11px;
    }

}
/* =========================================================
   FINAL CTA
========================================================= */

.dr-final-cta {
    padding: 55px 0;

    background: #2563eb;
}

.dr-final-cta-container {
    width: min(1440px, calc(100% - 80px));
    margin: 0 auto;
}


/* =========================
   CTA CONTENT
========================= */

.dr-final-cta-content {
    display: flex;

    align-items: center;

    gap: 24px;

    max-width: 1280px;

    margin: 0 auto;
}


/* =========================
   ICON
========================= */

.dr-final-cta-icon {
    flex: 0 0 58px;

    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background: rgba(255, 255, 255, 0.14);

    color: #ffffff;
}

.dr-final-cta-icon svg {
    width: 29px;
    height: 29px;

    stroke-width: 1.9;
}


/* =========================
   TEXT
========================= */

.dr-final-cta-text {
    flex: 1;

    min-width: 0;
}

.dr-final-cta-kicker {
    margin-bottom: 5px;

    color: rgba(255, 255, 255, 0.72);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.5px;
}

.dr-final-cta-text h2 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(27px, 2.6vw, 36px);

    font-weight: 700;

    line-height: 1.2;

    letter-spacing: -0.5px;
}

.dr-final-cta-text h2 span {
    color: #ffffff;
}

.dr-final-cta-text p {
    max-width: 690px;

    margin: 8px 0 0;

    color: rgba(255, 255, 255, 0.82);

    font-size: 14px;

    line-height: 1.6;
}


/* =========================
   BUTTONS
========================= */

.dr-final-cta-actions {
    flex: 0 0 auto;

    display: flex;

    align-items: center;

    gap: 10px;
}


.dr-final-btn {
    min-height: 44px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 0 18px;

    border-radius: 7px;

    font-size: 13px;
    font-weight: 650;

    text-decoration: none;

    white-space: nowrap;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}


.dr-final-btn svg {
    width: 16px;
    height: 16px;

    stroke-width: 2.3;
}


/* Primary */

.dr-final-btn.primary {
    background: #ffffff;

    border: 1px solid #ffffff;

    color: #2563eb;
}

.dr-final-btn.primary:hover {
    background: #f1f5f9;

    border-color: #f1f5f9;

    color: #1d4ed8;

    transform: translateY(-1px);
}


/* Secondary */

.dr-final-btn.secondary {
    background: transparent;

    border: 1px solid rgba(255, 255, 255, 0.55);

    color: #ffffff;
}

.dr-final-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.10);

    border-color: #ffffff;

    transform: translateY(-1px);
}


/* =========================
   TABLET
========================= */

@media (max-width: 1050px) {

    .dr-final-cta-content {
        flex-wrap: wrap;
    }

    .dr-final-cta-text {
        flex: 1 1 calc(100% - 90px);
    }

    .dr-final-cta-actions {
        width: 100%;

        margin-left: 82px;
    }

}


/* =========================
   MOBILE
========================= */

@media (max-width: 650px) {

    .dr-final-cta {
        padding: 45px 0;
    }

    .dr-final-cta-container {
        width: calc(100% - 30px);
    }

    .dr-final-cta-content {
        display: block;

        text-align: center;
    }

    .dr-final-cta-icon {
        margin: 0 auto 18px;
    }

    .dr-final-cta-text h2 {
        font-size: 28px;
    }

    .dr-final-cta-text p {
        font-size: 13px;
    }

    .dr-final-cta-actions {
        width: 100%;

        display: flex;

        flex-direction: column;

        margin: 22px 0 0;

        gap: 9px;
    }

    .dr-final-btn {
        width: 100%;
    }

}
/* =========================================================
   LARGE GLOWING CTA BUTTONS
========================================================= */

.dr-final-cta-actions {
    flex: 0 0 auto;

    display: flex;
    align-items: center;

    gap: 14px;
}


/* =========================
   BUTTON BASE
========================= */

.dr-final-btn {
    min-width: 190px;
    min-height: 56px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    padding: 0 25px;

    border-radius: 9px;

    font-size: 15px;
    font-weight: 700;

    text-decoration: none;

    white-space: nowrap;

    position: relative;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease;
}


/* =========================
   ICON
========================= */

.dr-final-btn svg {
    width: 19px;
    height: 19px;

    stroke-width: 2.4;
}


/* =========================================================
   DOWNLOAD BUTTON
========================================================= */

.dr-final-btn.primary {
    background: #ffffff;

    border: 1px solid #ffffff;

    color: #2563eb;

    box-shadow:
        0 0 0 1px rgba(255,255,255,0.25),
        0 8px 25px rgba(255,255,255,0.22),
        0 0 32px rgba(255,255,255,0.20);

    animation: drDownloadGlow 2.4s ease-in-out infinite;
}


/* Glow animation */

@keyframes drDownloadGlow {

    0%,
    100% {
        box-shadow:
            0 0 0 1px rgba(255,255,255,0.25),
            0 8px 25px rgba(255,255,255,0.20),
            0 0 28px rgba(255,255,255,0.16);
    }

    50% {
        box-shadow:
            0 0 0 1px rgba(255,255,255,0.40),
            0 10px 30px rgba(255,255,255,0.30),
            0 0 42px rgba(255,255,255,0.28);
    }

}


.dr-final-btn.primary:hover {
    background: #f8fbff;

    color: #1d4ed8;

    transform: translateY(-3px);

    box-shadow:
        0 12px 30px rgba(255,255,255,0.30),
        0 0 45px rgba(255,255,255,0.30);
}


/* =========================================================
   BUY BUTTON
========================================================= */

.dr-final-btn.secondary {
    background: #f97316;

    border: 1px solid #f97316;

    color: #ffffff;

    box-shadow:
        0 8px 22px rgba(249,115,22,0.30),
        0 0 24px rgba(249,115,22,0.14);
}


.dr-final-btn.secondary:hover {
    background: #fb923c;

    border-color: #fb923c;

    color: #ffffff;

    transform: translateY(-3px);

    box-shadow:
        0 12px 30px rgba(249,115,22,0.40),
        0 0 38px rgba(249,115,22,0.25);
}


/* =========================
   TABLET
========================= */

@media (max-width: 1050px) {

    .dr-final-cta-actions {
        width: 100%;

        margin-left: 82px;
    }

}


/* =========================
   MOBILE
========================= */

@media (max-width: 650px) {

    .dr-final-cta-actions {
        width: 100%;

        display: flex;

        flex-direction: column;

        margin: 24px 0 0;

        gap: 12px;
    }

    .dr-final-btn {
        width: 100%;

        min-height: 54px;
    }

}
/* =========================================================
   WHY CUBEXSOFT DATA RECOVERY SOFTWARE
   Complete Section CSS
========================================================= */

.dr-why-section {
    position: relative;
    width: 100%;
    overflow: hidden;

    /* Soft blue section background */
    background:
        radial-gradient(
            circle at 7% 12%,
            rgba(37, 99, 235, 0.10) 0,
            rgba(37, 99, 235, 0.045) 180px,
            transparent 360px
        ),
        radial-gradient(
            circle at 94% 76%,
            rgba(124, 58, 237, 0.08) 0,
            rgba(124, 58, 237, 0.035) 180px,
            transparent 360px
        ),
        linear-gradient(
            180deg,
            #f4f8ff 0%,
            #f8fbff 48%,
            #f5f8ff 100%
        );

    padding: 95px 0 100px;
}


/* =========================================================
   BACKGROUND DECORATION
========================================================= */

.dr-why-section::before {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    top: -280px;
    left: -210px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(37, 99, 235, 0.11) 0%,
            rgba(37, 99, 235, 0.045) 42%,
            transparent 72%
        );

    pointer-events: none;
}


.dr-why-section::after {
    content: "";

    position: absolute;

    width: 480px;
    height: 480px;

    right: -230px;
    bottom: -260px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(124, 58, 237, 0.09) 0%,
            rgba(124, 58, 237, 0.035) 42%,
            transparent 72%
        );

    pointer-events: none;
}


/* =========================================================
   CONTAINER
========================================================= */

.dr-why-container {
    position: relative;
    z-index: 2;

    width: min(1440px, calc(100% - 80px));

    margin: 0 auto;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.dr-why-heading {
    position: relative;

    max-width: 850px;

    margin: 0 auto 58px;

    text-align: center;
}


.dr-why-heading h2 {
    margin: 0;

    font-size: clamp(36px, 3.4vw, 52px);

    line-height: 1.12;

    font-weight: 700;

    letter-spacing: -1.4px;

    color: #172033;
}


.dr-why-heading h2 span {
    color: #2563eb;
}


.dr-why-heading p {
    max-width: 760px;

    margin: 20px auto 0;

    font-size: 17px;

    line-height: 1.75;

    color: #64748b;
}


/* =========================================================
   FEATURE GRID
========================================================= */

.dr-why-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 18px;
}


/* =========================================================
   FEATURE CARD
========================================================= */

.dr-why-card {
    position: relative;

    min-height: 235px;

    padding: 34px 28px 30px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    text-align: left;

    background:
        rgba(255, 255, 255, 0.82);

    border: 1px solid
        rgba(37, 99, 235, 0.08);

    border-radius: 18px;

    box-shadow:
        0 8px 28px
        rgba(37, 99, 235, 0.045);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    transition:
        transform 0.28s ease,
        background 0.28s ease,
        border-color 0.28s ease,
        box-shadow 0.28s ease;
}


/* Top accent */

.dr-why-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 28px;

    width: 34px;
    height: 3px;

    border-radius: 0 0 4px 4px;

    background: #2563eb;

    opacity: 0.75;

    transition:
        width 0.28s ease,
        opacity 0.28s ease;
}


/* Hover */

.dr-why-card:hover {
    transform: translateY(-5px);

    background:
        rgba(255, 255, 255, 0.96);

    border-color:
        rgba(37, 99, 235, 0.16);

    box-shadow:
        0 16px 38px
        rgba(37, 99, 235, 0.09);
}


.dr-why-card:hover::before {
    width: 55px;

    opacity: 1;
}


/* =========================================================
   ICON
========================================================= */

.dr-why-icon {
    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 22px;

    border-radius: 12px;

    flex-shrink: 0;
}


.dr-why-icon svg {
    width: 23px;
    height: 23px;

    stroke-width: 2;
}


/* Blue */

.dr-why-icon.blue {
    color: #2563eb;

    background:
        rgba(37, 99, 235, 0.10);
}


/* Orange */

.dr-why-icon.orange {
    color: #f97316;

    background:
        rgba(249, 115, 22, 0.11);
}


/* Green */

.dr-why-icon.green {
    color: #159447;

    background:
        rgba(21, 148, 71, 0.10);
}


/* Purple */

.dr-why-icon.purple {
    color: #7c3aed;

    background:
        rgba(124, 58, 237, 0.10);
}


/* =========================================================
   CARD HEADING
========================================================= */

.dr-why-card h3 {
    margin: 0 0 10px;

    font-size: 18px;

    line-height: 1.35;

    font-weight: 650;

    letter-spacing: -0.25px;

    color: #172033;
}


/* =========================================================
   CARD DESCRIPTION
========================================================= */

.dr-why-card p {
    margin: 0;

    font-size: 14.5px;

    line-height: 1.65;

    color: #64748b;
}


/* =========================================================
   INDIVIDUAL CARD ACCENT COLORS
========================================================= */

.dr-why-card:nth-child(1)::before,
.dr-why-card:nth-child(5)::before {
    background: #2563eb;
}

.dr-why-card:nth-child(2)::before,
.dr-why-card:nth-child(6)::before {
    background: #f97316;
}

.dr-why-card:nth-child(3)::before,
.dr-why-card:nth-child(7)::before {
    background: #159447;
}

.dr-why-card:nth-child(4)::before,
.dr-why-card:nth-child(8)::before {
    background: #7c3aed;
}


/* =========================================================
   SUBTLE CARD NUMBER EFFECT
========================================================= */

.dr-why-card:nth-child(n)::after {
    content: "";

    position: absolute;

    right: 20px;
    bottom: 18px;

    width: 34px;
    height: 34px;

    border-radius: 50%;

    opacity: 0;

    transition: opacity 0.25s ease;
}


.dr-why-card:hover::after {
    opacity: 0.08;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1200px) {

    .dr-why-container {
        width: min(
            100% - 50px,
            1100px
        );
    }


    .dr-why-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 18px;
    }


    .dr-why-card {
        min-height: 220px;
    }

}


/* =========================================================
   SMALL TABLET
========================================================= */

@media (max-width: 768px) {

    .dr-why-section {
        padding: 75px 0 80px;
    }


    .dr-why-container {
        width: min(
            100% - 36px,
            680px
        );
    }


    .dr-why-heading {
        margin-bottom: 40px;
    }


    .dr-why-heading h2 {
        font-size: 34px;

        letter-spacing: -0.8px;
    }


    .dr-why-heading p {
        margin-top: 16px;

        font-size: 15.5px;

        line-height: 1.65;
    }


    .dr-why-grid {
        grid-template-columns: 1fr;

        gap: 14px;
    }


    .dr-why-card {
        min-height: auto;

        padding: 28px 24px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 480px) {

    .dr-why-section {
        padding: 60px 0 65px;
    }


    .dr-why-container {
        width: calc(100% - 28px);
    }


    .dr-why-heading {
        margin-bottom: 32px;
    }


    .dr-why-heading h2 {
        font-size: 30px;

        line-height: 1.18;
    }


    .dr-why-heading p {
        font-size: 14.5px;
    }


    .dr-why-card {
        padding: 25px 22px;

        border-radius: 16px;
    }


    .dr-why-card::before {
        left: 22px;
    }


    .dr-why-icon {
        width: 44px;
        height: 44px;

        margin-bottom: 18px;

        border-radius: 11px;
    }


    .dr-why-icon svg {
        width: 21px;
        height: 21px;
    }


    .dr-why-card h3 {
        font-size: 17px;
    }


    .dr-why-card p {
        font-size: 14px;

        line-height: 1.6;
    }


    .dr-why-section::before {
        width: 300px;
        height: 300px;

        top: -150px;
        left: -150px;
    }


    .dr-why-section::after {
        width: 300px;
        height: 300px;

        right: -150px;
        bottom: -150px;
    }

}


/* =========================================================
   ACCESSIBILITY / REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .dr-why-card {
        transition: none;
    }

    .dr-why-card::before {
        transition: none;
    }

}
/* =========================================
   DATA RECOVERY OFFER OVERLAY
========================================= */

.dr-offer-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 25px;

    background: rgba(10, 18, 32, 0.68);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

.dr-offer-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* Modal */

.dr-offer-modal {
    position: relative;

    width: min(820px, 100%);
    min-height: 430px;

    background: #ffffff;

    box-shadow:
        0 30px 80px rgba(15, 23, 42, 0.30),
        0 10px 30px rgba(15, 23, 42, 0.15);

    overflow: hidden;

    transform: translateY(25px) scale(0.97);

    transition:
        transform 0.35s ease;

    border-radius: 4px;
}

.dr-offer-overlay.is-visible .dr-offer-modal {
    transform: translateY(0) scale(1);
}


/* Header */

.dr-offer-header {
    height: 72px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #151515;

    color: #ffffff;

    font-size: 27px;
    font-weight: 400;

    letter-spacing: -0.3px;
}


/* Close */

.dr-offer-close {
    position: absolute;

    top: 20px;
    right: 20px;

    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;
    background: transparent;

    color: #ffffff;

    cursor: pointer;

    z-index: 5;

    opacity: 0.85;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.dr-offer-close:hover {
    opacity: 1;
    transform: rotate(90deg);
}

.dr-offer-close svg {
    width: 25px;
    height: 25px;
}


/* Body */

.dr-offer-body {
    display: grid;

    grid-template-columns: 42% 58%;

    min-height: 358px;

    padding: 35px 45px;
}


/* Visual */

.dr-offer-visual {
    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;
}

.dr-offer-gift {
    width: 150px;
    height: 150px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at center,
            #eff6ff 0%,
            #dbeafe 45%,
            #ffffff 70%
        );

    color: #2563eb;

    position: relative;
}

.dr-offer-gift::before,
.dr-offer-gift::after {
    content: "";

    position: absolute;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #f97316;
}

.dr-offer-gift::before {
    top: 20px;
    right: 15px;
}

.dr-offer-gift::after {
    bottom: 30px;
    left: 15px;

    background: #2563eb;
}

.dr-offer-gift svg {
    width: 76px;
    height: 76px;

    stroke-width: 1.6;
}


/* Content */

.dr-offer-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    text-align: center;
}

.dr-offer-content h2 {
    margin: 0 auto 18px;

    max-width: 430px;

    color: #172033;

    font-size: 34px;
    line-height: 1.15;

    font-weight: 700;

    letter-spacing: -0.8px;
}

.dr-offer-content h2 span {
    color: #2563eb;
}

.dr-offer-subtitle {
    margin: 0 auto 22px;

    max-width: 430px;

    color: #64748b;

    font-size: 16px;
    line-height: 1.6;
}


/* Discount label */

.dr-offer-code-label {
    margin-bottom: 9px;

    color: #334155;

    font-size: 15px;
}


/* Code */

.dr-offer-code-box {
    display: flex;

    width: 300px;
    max-width: 100%;

    margin: 0 auto;

    border: 1px dashed #94a3b8;
}

.dr-offer-code {
    flex: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 52px;

    background: #ffffff;

    color: #111827;

    font-size: 21px;
    font-weight: 600;

    letter-spacing: 1px;
}

.dr-offer-use {
    min-width: 115px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #2563eb;

    color: #ffffff;

    text-decoration: none;

    font-size: 15px;
    font-weight: 700;

    transition: background 0.2s ease;
}

.dr-offer-use:hover {
    background: #1d4ed8;
}


/* Validity */

.dr-offer-valid {
    margin-top: 18px;

    color: #2563eb;

    font-size: 14px;
    font-weight: 600;
}


/* Don't show again */

.dr-offer-dismiss {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    margin-top: 24px;

    color: #64748b;

    font-size: 14px;

    cursor: pointer;
}

.dr-offer-dismiss input {
    width: 18px;
    height: 18px;

    cursor: pointer;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 700px) {

    .dr-offer-modal {
        width: 100%;
    }

    .dr-offer-header {
        height: 62px;

        font-size: 22px;
    }

    .dr-offer-body {
        grid-template-columns: 1fr;

        padding: 25px 22px 30px;
    }

    .dr-offer-visual {
        margin-bottom: 15px;
    }

    .dr-offer-gift {
        width: 95px;
        height: 95px;
    }

    .dr-offer-gift svg {
        width: 50px;
        height: 50px;
    }

    .dr-offer-content h2 {
        font-size: 27px;
    }

    .dr-offer-subtitle {
        font-size: 14px;
    }

    .dr-offer-code-box {
        width: 280px;
    }

    .dr-offer-close {
        top: 14px;
        right: 12px;
    }
}

@media (max-width: 420px) {

    .dr-offer-overlay {
        padding: 12px;
    }

    .dr-offer-body {
        padding: 20px 16px 25px;
    }

    .dr-offer-content h2 {
        font-size: 24px;
    }

    .dr-offer-code-box {
        width: 100%;
    }

    .dr-offer-code {
        font-size: 18px;
    }

    .dr-offer-use {
        min-width: 100px;
    }
}
/* =========================================================
   SMOOTH SCREENSHOT CAROUSEL TRANSITION
   ========================================================= */

.dr-screenshot-main {
    position: relative;
    overflow: hidden;
}

.dr-screenshot-main img {
    display: block;
    width: 100%;
    height: auto;

    opacity: 1;
    transform: translateX(0);

    transition:
        opacity 0.35s ease,
        transform 0.35s ease;

    will-change: opacity, transform;
}


/* Animation state */

.dr-screenshot-main img.is-changing {
    opacity: 0;
    transform: translateX(12px);
}