/* ============================================================
   BULK PDF MERGE
   JSV TechGroup
============================================================ */

:root {

    --merge-primary: #00b4d8;
    --merge-cyan: #00d4ff;
    --merge-purple: #7a5cff;

    --merge-dark: #06131d;
    --merge-dark-2: #0b2533;

    --merge-text: #10202d;
    --merge-muted: #62747f;

    --merge-border: #dceaf0;

    --merge-soft: #f3f9fb;

    --merge-white: #ffffff;

    --merge-shadow:
            0 20px 60px rgba(10, 48, 68, .10);

    --merge-radius: 22px;
}


/* ============================================================
   RESET
============================================================ */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    overflow-x: hidden;
}

.merge-page,
.merge-page * {
    box-sizing: border-box;
}

.merge-page a {
    text-decoration: none;
}

.merge-page button {
    font: inherit;
}


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

.merge-container {
    width: min(1240px, calc(100% - 10%));
    margin-inline: auto;
}

.merge-section {
    position: relative;
    padding: 110px 0;
}

.white-section {
    background: #fff;
}

.soft-section {
    background: var(--merge-soft);
}

.dark-section {
    color: #fff;

    background:
            radial-gradient(
                    circle at 80% 20%,
                    rgba(0, 212, 255, .12),
                    transparent 32%
            ),
            linear-gradient(
                    135deg,
                    #06131d,
                    #0b2635
            );
}

.section-heading {
    max-width: 850px;
    margin: 0 auto 65px;
    text-align: center;
}

.section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #0099b7;

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

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

    margin-bottom: 14px;
}

.section-heading h2 {
    margin: 0 0 20px;

    color: var(--merge-text);

    font-size: clamp(34px, 4vw, 56px);
    line-height: 1.08;
    letter-spacing: -1.8px;
}

.section-heading p {
    max-width: 760px;
    margin: auto;

    color: var(--merge-muted);

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


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

.merge-hero {
    position: relative;
    min-height: 760px;

    display: flex;
    align-items: center;

    overflow: hidden;

    color: #fff;

    background:
            radial-gradient(
                    circle at 75% 18%,
                    rgba(0, 212, 255, .15),
                    transparent 28%
            ),
            radial-gradient(
                    circle at 15% 80%,
                    rgba(122, 92, 255, .13),
                    transparent 30%
            ),
            linear-gradient(
                    135deg,
                    #040e15,
                    #071d29 55%,
                    #06131d
            );
}

.merge-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
            linear-gradient(
                    rgba(255,255,255,.025) 1px,
                    transparent 1px
            ),
            linear-gradient(
                    90deg,
                    rgba(255,255,255,.025) 1px,
                    transparent 1px
            );

    background-size: 70px 70px;

    mask-image:
            linear-gradient(
                    to bottom,
                    black,
                    transparent
            );

    pointer-events: none;
}

.hero-glow {
    position: absolute;

    width: 450px;
    height: 450px;

    border-radius: 50%;

    border: 1px solid rgba(0, 212, 255, .10);

    pointer-events: none;
}

.hero-glow-one {
    top: -230px;
    right: -120px;

    animation: heroOrbit 18s linear infinite;
}

.hero-glow-two {
    bottom: -280px;
    left: -150px;

    border-color: rgba(122,92,255,.12);

    animation: heroOrbitReverse 22s linear infinite;
}

.hero-grid {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: .92fr 1.08fr;

    align-items: center;

    gap: 70px;

    padding: 120px 0 90px;
}

.merge-breadcrumb {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 25px;

    color: #87ddec;

    font-size: 13px;
}

.merge-breadcrumb a {
    color: #87ddec;
}

.merge-breadcrumb span {
    opacity: .45;
}

.product-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 8px 13px;

    margin-bottom: 22px;

    border:
            1px solid
            rgba(255,255,255,.13);

    border-radius: 50px;

    color: #bdeff7;

    background:
            rgba(255,255,255,.045);

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

    backdrop-filter: blur(10px);
}

.badge-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #00d4ff;

    box-shadow:
            0 0 0 5px rgba(0,212,255,.09);

    animation: badgePulse 2s ease-in-out infinite;
}

.hero-content h1 {
    margin: 0;

    font-size: clamp(48px, 6vw, 82px);

    line-height: .98;

    letter-spacing: -3px;
}

.hero-content h1 span {
    display: block;

    margin-top: 10px;

    background:
            linear-gradient(
                    90deg,
                    #00d4ff,
                    #7a5cff
            );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}

.hero-description {
    max-width: 680px;

    margin: 28px 0 32px;

    color: #bfd3dd;

    font-size: 18px;
    line-height: 1.8;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 13px;
}

.merge-btn {
    min-height: 50px;

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

    gap: 9px;

    padding: 0 22px;

    border-radius: 12px;

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

    transition:
            transform .3s ease,
            box-shadow .3s ease,
            background .3s ease;
}

.merge-btn:hover {
    transform: translateY(-4px);
}

.merge-btn-primary {
    color: #fff;

    background:
            linear-gradient(
                    135deg,
                    var(--merge-primary),
                    var(--merge-purple)
            );

    box-shadow:
            0 15px 35px rgba(0,180,216,.20);
}

.merge-btn-outline {
    color: #fff;

    border:
            1px solid
            rgba(255,255,255,.20);

    background:
            rgba(255,255,255,.045);
}

.merge-btn-light {
    color: #09202d;
    background: #fff;
}

.btn-icon {
    font-size: 18px;
}

.hero-points {
    display: flex;
    flex-wrap: wrap;

    gap: 18px;

    margin-top: 30px;

    color: #9db7c2;

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

.hero-points span {
    margin-right: 5px;

    color: #00d4ff;
}


/* ============================================================
   PRODUCT WINDOW
============================================================ */

.hero-product {
    position: relative;

    min-height: 520px;

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

.product-window {
    position: relative;

    width: min(650px, 100%);

    overflow: hidden;

    border:
            1px solid
            rgba(255,255,255,.13);

    border-radius: 18px;

    background:
            rgba(8,24,34,.94);

    box-shadow:
            0 45px 100px rgba(0,0,0,.45),
            0 0 80px rgba(0,180,216,.07);

    transform:
            perspective(1300px)
            rotateY(-5deg)
            rotateX(2deg);

    animation: windowFloat 6s ease-in-out infinite;

    backdrop-filter: blur(15px);
}

.window-topbar {
    height: 58px;

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

    padding: 0 18px;

    border-bottom:
            1px solid
            rgba(255,255,255,.07);

    background:
            rgba(255,255,255,.035);
}

.window-brand {
    display: flex;
    align-items: center;

    gap: 10px;
}

.window-logo {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    border-radius: 8px;

    color: #fff;

    background:
            linear-gradient(
                    135deg,
                    #00b4d8,
                    #7a5cff
            );

    font-size: 9px;
    font-weight: 900;
}

.window-brand strong {
    display: block;

    color: #edf9fc;

    font-size: 12px;
}

.window-brand small {
    display: block;

    margin-top: 2px;

    color: #66818e;

    font-size: 9px;
}

.window-controls {
    display: flex;
    gap: 6px;
}

.window-controls span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #3b5965;
}

.window-body {
    min-height: 410px;

    display: grid;
    grid-template-columns: 125px 1fr;
}

.window-sidebar {
    padding: 18px 10px;

    border-right:
            1px solid
            rgba(255,255,255,.06);

    background:
            rgba(0,0,0,.10);
}

.side-item {
    display: flex;
    align-items: center;

    gap: 8px;

    padding: 10px 9px;

    margin-bottom: 5px;

    border-radius: 8px;

    color: #78919d;

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

.side-item span {
    font-size: 12px;
}

.side-item.active {
    color: #dffaff;

    background:
            linear-gradient(
                    135deg,
                    rgba(0,180,216,.18),
                    rgba(122,92,255,.12)
            );

    box-shadow:
            inset 2px 0 0 #00d4ff;
}

.merge-dashboard {
    padding: 22px;
}

.dashboard-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 18px;
}

.dashboard-heading small {
    color: #4e7787;

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

    letter-spacing: 1px;
}

.dashboard-heading h3 {
    margin: 4px 0 0;

    color: #e8f8fc;

    font-size: 18px;
}

.status-pill {
    padding: 6px 10px;

    border-radius: 20px;

    color: #69e2bd;

    background:
            rgba(55,208,160,.08);

    border:
            1px solid
            rgba(55,208,160,.12);

    font-size: 8px;
    font-weight: 800;
}

.drop-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 105px;

    margin-bottom: 14px;

    border:
            1px dashed
            rgba(0,212,255,.25);

    border-radius: 12px;

    background:
            rgba(0,212,255,.025);

    transition: .3s;
}

.drop-zone:hover {
    background:
            rgba(0,212,255,.07);

    border-color:
            rgba(0,212,255,.5);
}

.drop-icon {
    width: 29px;
    height: 29px;

    display: grid;
    place-items: center;

    margin-bottom: 7px;

    border-radius: 9px;

    color: #fff;

    background:
            linear-gradient(
                    135deg,
                    #00b4d8,
                    #7a5cff
            );

    font-size: 20px;
}

.drop-zone strong {
    color: #dceef3;

    font-size: 11px;
}

.drop-zone small {
    margin-top: 3px;

    color: #66818e;

    font-size: 8px;
}

.pdf-list {
    display: grid;
    gap: 7px;
}

.pdf-row {
    display: flex;
    align-items: center;

    gap: 9px;

    padding: 9px;

    border:
            1px solid
            rgba(255,255,255,.055);

    border-radius: 9px;

    background:
            rgba(255,255,255,.025);

    transition: .3s;
}

.pdf-row:hover {
    transform: translateX(4px);

    border-color:
            rgba(0,212,255,.22);
}

.pdf-file-icon {
    width: 28px;
    height: 32px;

    display: grid;
    place-items: center;

    border-radius: 5px;

    color: #ff7777;

    background:
            rgba(255,80,80,.09);

    font-size: 7px;
    font-weight: 900;
}

.pdf-name {
    flex: 1;

    color: #cde1e8;

    font-size: 9px;
}

.pdf-name small {
    display: block;

    margin-top: 3px;

    color: #58737f;

    font-size: 7px;
}

.pdf-drag {
    color: #486873;

    font-size: 15px;
}

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

    margin-top: 14px;
}

.dashboard-bottom span {
    color: #597580;

    font-size: 8px;
}

.dashboard-bottom button {
    padding: 9px 13px;

    border: 0;
    border-radius: 8px;

    color: #fff;

    background:
            linear-gradient(
                    135deg,
                    #00b4d8,
                    #7a5cff
            );

    font-size: 8px;
    font-weight: 800;
}

.floating-card {
    position: absolute;

    display: flex;
    align-items: center;

    gap: 8px;

    padding: 10px 13px;

    border:
            1px solid
            rgba(255,255,255,.12);

    border-radius: 11px;

    background:
            rgba(8,24,34,.85);

    box-shadow:
            0 15px 35px rgba(0,0,0,.25);

    backdrop-filter: blur(12px);

    animation:
            floatingCard 5s ease-in-out infinite;
}

.floating-card-one {
    right: -18px;
    top: 80px;
}

.floating-card-two {
    left: -25px;
    bottom: 85px;

    animation-delay: -2s;
}

.floating-icon {
    width: 25px;
    height: 25px;

    display: grid;
    place-items: center;

    border-radius: 7px;

    color: #00d4ff;

    background:
            rgba(0,212,255,.08);

    font-size: 8px;
    font-weight: 900;
}

.floating-card strong {
    display: block;

    color: #dceef3;

    font-size: 9px;
}

.floating-card small {
    display: block;

    margin-top: 2px;

    color: #5f7b87;

    font-size: 7px;
}


/* ============================================================
   WHAT
============================================================ */

.what-grid {
    display: grid;

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

    gap: 22px;
}

.what-card {
    padding: 34px;

    border:
            1px solid
            var(--merge-border);

    border-radius: var(--merge-radius);

    background: #fff;

    box-shadow:
            0 12px 35px rgba(10,50,70,.05);

    transition:
            transform .4s ease,
            box-shadow .4s ease;
}

.what-card:hover {
    transform: translateY(-8px);

    box-shadow:
            0 25px 50px rgba(10,50,70,.10);
}

.big-icon {
    width: 62px;
    height: 62px;

    display: grid;
    place-items: center;

    margin-bottom: 25px;

    border-radius: 17px;

    color: #fff;

    background:
            linear-gradient(
                    135deg,
                    #ff5b5b,
                    #e63d5b
            );

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

    box-shadow:
            0 12px 25px rgba(230,61,91,.16);
}

.blue-icon {
    background:
            linear-gradient(
                    135deg,
                    #00b4d8,
                    #008baa
            );

    box-shadow:
            0 12px 25px rgba(0,180,216,.16);
}

.purple-icon {
    background:
            linear-gradient(
                    135deg,
                    #7a5cff,
                    #5540d6
            );

    box-shadow:
            0 12px 25px rgba(122,92,255,.16);
}

.what-card h3 {
    margin: 0 0 12px;

    font-size: 22px;
}

.what-card p {
    margin: 0;

    color: var(--merge-muted);

    line-height: 1.8;
}


/* ============================================================
   BENEFITS
============================================================ */

.split-heading {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 70px;

    align-items: end;

    margin-bottom: 55px;
}

.split-heading h2 {
    max-width: 650px;

    margin: 0;

    font-size: clamp(35px, 4vw, 55px);

    line-height: 1.08;

    letter-spacing: -1.7px;
}

.split-heading > p {
    margin: 0;

    color: var(--merge-muted);

    font-size: 17px;

    line-height: 1.8;
}

.benefit-grid {
    display: grid;

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

    gap: 18px;
}

.benefit-card {
    position: relative;

    min-height: 255px;

    padding: 30px;

    overflow: hidden;

    border:
            1px solid
            var(--merge-border);

    border-radius: 20px;

    background: #fff;

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

.benefit-card::after {
    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    right: -60px;
    bottom: -60px;

    border-radius: 50%;

    background:
            rgba(0,180,216,.06);

    transition: .4s;
}

.benefit-card:hover {
    transform: translateY(-8px);

    border-color:
            rgba(0,180,216,.35);

    box-shadow:
            0 25px 55px rgba(10,50,70,.08);
}

.benefit-card:hover::after {
    transform: scale(1.6);
}

.benefit-number {
    position: absolute;

    right: 20px;
    top: 20px;

    color: #d7e8ed;

    font-size: 11px;
    font-weight: 900;
}

.benefit-icon {
    width: 52px;
    height: 52px;

    display: grid;
    place-items: center;

    margin-bottom: 22px;

    border-radius: 14px;

    color: #008ca8;

    background:
            #e8f9fc;

    font-size: 18px;
}

.benefit-card h3 {
    margin: 0 0 10px;

    font-size: 20px;
}

.benefit-card p {
    margin: 0;

    color: var(--merge-muted);

    line-height: 1.7;

    font-size: 14px;
}


/* ============================================================
   EXCEL / NO EXCEL
============================================================ */

.workflow-choice {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 25px;
}

.choice-card {
    position: relative;

    padding: 35px;

    overflow: hidden;

    border:
            1px solid
            var(--merge-border);

    border-radius: 24px;

    background: #fff;

    box-shadow:
            0 15px 45px rgba(10,50,70,.05);

    transition: .4s;
}

.choice-card:hover {
    transform: translateY(-8px);

    box-shadow:
            0 25px 60px rgba(10,50,70,.10);
}

.excel-choice {
    border-color:
            rgba(0,180,216,.25);
}

.choice-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 25px;
}

.choice-icon {
    width: 56px;
    height: 56px;

    display: grid;
    place-items: center;

    border-radius: 15px;

    color: #008ca8;

    background:
            #e8f9fc;

    font-size: 11px;
    font-weight: 900;
}

.excel-icon {
    color: #168b63;

    background:
            #e6f8f0;
}

.choice-tag {
    padding: 6px 9px;

    border-radius: 30px;

    color: #6c8089;

    background: #f1f6f8;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 1px;
}

.choice-card h3 {
    margin: 0 0 12px;

    font-size: 25px;
}

.choice-card > p {
    margin: 0 0 22px;

    color: var(--merge-muted);

    line-height: 1.75;
}

.choice-card ul {
    display: grid;

    gap: 10px;

    margin: 0 0 25px;
    padding: 0;

    list-style: none;
}

.choice-card li {
    display: flex;
    align-items: center;

    gap: 9px;

    color: #40535d;

    font-size: 14px;
}

.choice-card li::before {
    content: "✓";

    width: 20px;
    height: 20px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: #008ca8;

    background: #e7f9fc;

    font-size: 10px;
    font-weight: 900;
}

.choice-demo {
    min-height: 90px;

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

    flex-wrap: wrap;

    gap: 7px;

    padding: 15px;

    border-radius: 14px;

    background: #f5fafc;

    color: #526b76;

    font-size: 10px;
    font-weight: 800;
}

.choice-demo b {
    color: #00a7c6;
}

.choice-demo strong {
    color: #7a5cff;
}

.choice-demo em {
    color: #008ca8;
    font-style: normal;
}

.excel-mini-table {
    overflow: hidden;

    border:
            1px solid
            #dceae4;

    border-radius: 12px;

    background: #f5fbf8;

    font-size: 10px;
}

.excel-mini-table > div {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    border-bottom:
            1px solid
            #dceae4;
}

.excel-mini-table > div:last-child {
    border-bottom: 0;
}

.excel-mini-table span,
.excel-mini-table strong {
    padding: 10px;

    color: #49665a;
}

.excel-mini-table strong {
    color: #168b63;

    font-weight: 900;
}


/* ============================================================
   DARK WORKFLOW
============================================================ */

.dark-heading h2 {
    color: #fff;
}

.dark-heading p {
    color: #91aeb9;
}

.dark-heading .section-label {
    color: #00d4ff;
}

.animated-workflow {
    position: relative;

    display: grid;

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

    gap: 25px;
}

.workflow-line {
    position: absolute;

    left: 12%;
    right: 12%;

    top: 40px;

    height: 1px;

    background:
            linear-gradient(
                    90deg,
                    transparent,
                    rgba(0,212,255,.5),
                    rgba(122,92,255,.5),
                    transparent
            );

    transform-origin: left;

    animation:
            workflowLine 4s ease-in-out infinite;
}

.workflow-step {
    position: relative;

    z-index: 2;

    text-align: center;
}

.workflow-icon {
    width: 80px;
    height: 80px;

    display: grid;
    place-items: center;

    margin: 0 auto 25px;

    border-radius: 50%;

    border:
            1px solid
            rgba(0,212,255,.30);

    background:
            #09202d;

    box-shadow:
            0 0 0 10px rgba(0,212,255,.025),
            0 0 35px rgba(0,212,255,.08);

    animation:
            workflowPulse 3s ease-in-out infinite;
}

.workflow-step:nth-child(3) .workflow-icon {
    animation-delay: .5s;
}

.workflow-step:nth-child(4) .workflow-icon {
    animation-delay: 1s;
}

.workflow-step:nth-child(5) .workflow-icon {
    animation-delay: 1.5s;
}

.workflow-icon span {
    color: #00d4ff;

    font-size: 12px;
    font-weight: 900;
}

.workflow-step h3 {
    margin: 0 0 10px;

    font-size: 20px;
}

.workflow-step p {
    max-width: 220px;

    margin: auto;

    color: #829fa9;

    font-size: 13px;

    line-height: 1.7;
}


/* ============================================================
   SCREENSHOTS
============================================================ */

.screenshot-main {
    margin-bottom: 25px;
}

.browser-frame {
    position: relative;

    overflow: hidden;

    padding-top: 34px;

    border:
            1px solid
            #dceaf0;

    border-radius: 18px;

    background: #f1f6f8;

    box-shadow:
            0 30px 70px rgba(10,50,70,.10);
}

.browser-bar {
    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 34px;

    display: flex;
    align-items: center;

    gap: 5px;

    padding-left: 14px;

    border-bottom:
            1px solid
            #dceaf0;

    background: #f8fbfc;
}

.browser-bar span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #bfd0d7;
}

.browser-frame img {
    display: block;

    width: 100%;
    height: auto;

    user-select: none;

    -webkit-user-drag: none;
}

.screenshot-grid {
    display: grid;

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

    gap: 18px;
}

.screenshot-card {
    display: block;

    width: 100%;

    overflow: hidden;

    padding: 0;

    border:
            1px solid
            var(--merge-border);

    border-radius: 16px;

    background: #fff;

    text-align: left;

    cursor: pointer;

    transition:
            transform .35s ease,
            box-shadow .35s ease;
}

.screenshot-card:hover {
    transform: translateY(-6px);

    box-shadow:
            0 20px 45px rgba(10,50,70,.10);
}

.screenshot-card img {
    display: block;

    width: 100%;

    aspect-ratio: 16 / 9;

    object-fit: cover;

    user-select: none;

    -webkit-user-drag: none;
}

.screenshot-card span {
    display: block;

    padding: 15px;

    color: #40535d;

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


/* ============================================================
   VIDEO
============================================================ */

.video-section {
    background:
            #eef7fa;
}

.video-layout {
    display: grid;

    grid-template-columns:
        .75fr 1.25fr;

    gap: 65px;

    align-items: center;
}

.video-copy h2 {
    margin: 0 0 20px;

    font-size: clamp(34px, 4vw, 52px);

    line-height: 1.08;

    letter-spacing: -1.5px;
}

.video-copy p {
    margin: 0 0 25px;

    color: var(--merge-muted);

    line-height: 1.8;
}

.text-link {
    display: inline-flex;

    gap: 10px;

    color: #008ca8;

    font-weight: 800;

    font-size: 14px;
}

.text-link span {
    transition: transform .3s;
}

.text-link:hover span {
    transform: translateX(5px);
}

.video-wrapper {
    position: relative;

    overflow: hidden;

    border-radius: 20px;

    background: #06131d;

    box-shadow:
            0 30px 70px rgba(10,50,70,.15);
}

.video-wrapper video {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 16 / 9;

    object-fit: cover;
}

.video-overlay {
    position: absolute;

    left: 20px;
    bottom: 20px;

    display: flex;
    align-items: center;

    gap: 9px;

    padding: 8px 12px;

    border-radius: 30px;

    color: #d9f7fc;

    background:
            rgba(0,0,0,.45);

    backdrop-filter: blur(10px);

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

    pointer-events: none;
}

.play-symbol {
    width: 22px;
    height: 22px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: #fff;

    background:
            linear-gradient(
                    135deg,
                    #00b4d8,
                    #7a5cff
            );

    font-size: 8px;
}


/* ============================================================
   RELATED
============================================================ */

.related-products {
    display: grid;

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

    gap: 18px;
}

.related-card {
    display: grid;

    grid-template-columns: auto 1fr auto;

    align-items: center;

    gap: 15px;

    padding: 22px;

    border:
            1px solid
            var(--merge-border);

    border-radius: 18px;

    background: #fff;

    transition: .35s;
}

.related-card:hover {
    transform: translateY(-6px);

    border-color:
            rgba(0,180,216,.30);

    box-shadow:
            0 20px 45px rgba(10,50,70,.08);
}

.related-icon {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    border-radius: 13px;

    color: #008ca8;

    background: #e8f9fc;

    font-weight: 900;
}

.related-card span {
    color: #00a0bd;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 1px;
}

.related-card h3 {
    margin: 5px 0;

    color: #203641;

    font-size: 17px;
}

.related-card p {
    margin: 0;

    color: #71818a;

    font-size: 12px;

    line-height: 1.55;
}

.related-card > b {
    color: #00a0bd;

    font-size: 18px;
}


/* ============================================================
   FAQ
============================================================ */

.faq-container {
    max-width: 920px;
}

.faq-list {
    display: grid;

    gap: 10px;
}

.faq-item {
    overflow: hidden;

    border:
            1px solid
            var(--merge-border);

    border-radius: 14px;

    background: #fff;

    transition:
            border-color .3s,
            box-shadow .3s;
}

.faq-item[open] {
    border-color:
            rgba(0,180,216,.30);

    box-shadow:
            0 15px 35px rgba(10,50,70,.06);
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 21px 24px;

    color: #203641;

    cursor: pointer;

    list-style: none;

    font-size: 15px;
    font-weight: 800;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary span {
    flex: 0 0 auto;

    color: #00a0bd;

    font-size: 20px;

    transition: transform .3s;
}

.faq-item[open] summary span {
    transform: rotate(45deg);
}

.faq-item p {
    margin: 0;

    padding: 0 24px 23px;

    color: var(--merge-muted);

    line-height: 1.8;

    font-size: 14px;
}


/* ============================================================
   FINAL CTA
============================================================ */

.final-cta {
    position: relative;

    overflow: hidden;

    padding: 120px 0;

    color: #fff;

    background:
            linear-gradient(
                    135deg,
                    #040e15,
                    #0a2736
            );
}

.final-cta-content {
    position: relative;
    z-index: 2;

    max-width: 800px;

    margin: auto;

    text-align: center;
}

.final-cta .section-label {
    color: #00d4ff;
}

.final-cta h2 {
    margin: 0 0 20px;

    font-size: clamp(40px, 5vw, 64px);

    line-height: 1.05;

    letter-spacing: -2px;
}

.final-cta p {
    max-width: 650px;

    margin: 0 auto 30px;

    color: #9eb9c4;

    font-size: 17px;

    line-height: 1.8;
}

.final-cta .hero-actions {
    justify-content: center;
}

.cta-orb {
    position: absolute;

    width: 500px;
    height: 500px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    border:
            1px solid
            rgba(0,212,255,.10);

    animation:
            ctaOrb 10s linear infinite;
}


/* ============================================================
   LIGHTBOX
============================================================ */

.image-lightbox {
    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

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

    padding: 30px;

    background:
            rgba(2,10,15,.92);

    opacity: 0;

    visibility: hidden;

    transition:
            opacity .3s,
            visibility .3s;

    backdrop-filter: blur(10px);
}

.image-lightbox.active {
    opacity: 1;

    visibility: visible;
}

.image-lightbox img {
    max-width: min(1200px, 95vw);

    max-height: 88vh;

    object-fit: contain;

    border-radius: 12px;

    box-shadow:
            0 30px 100px rgba(0,0,0,.5);

    user-select: none;

    -webkit-user-drag: none;

    transform: scale(.94);

    transition: transform .35s;
}

.image-lightbox.active img {
    transform: scale(1);
}

.lightbox-close {
    position: fixed;

    top: 20px;
    right: 25px;

    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border: 0;

    border-radius: 50%;

    color: #fff;

    background:
            rgba(255,255,255,.10);

    cursor: pointer;

    font-size: 26px;

    z-index: 2;
}


/* ============================================================
   REVEAL ANIMATIONS
============================================================ */

.reveal {
    opacity: 0;

    transform:
            translateY(35px);

    transition:
            opacity .8s ease,
            transform .8s cubic-bezier(.2,.7,.2,1);
}

.reveal.revealed {
    opacity: 1;

    transform:
            translateY(0);
}

.reveal-delay {
    transition-delay: .12s;
}

.reveal-delay-two {
    transition-delay: .22s;
}

.reveal-delay-three {
    transition-delay: .32s;
}


/* ============================================================
   KEYFRAMES
============================================================ */

@keyframes windowFloat {

    0%,
    100% {
        transform:
                perspective(1300px)
                rotateY(-5deg)
                rotateX(2deg)
                translateY(0);
    }

    50% {
        transform:
                perspective(1300px)
                rotateY(-2deg)
                rotateX(1deg)
                translateY(-12px);
    }
}

@keyframes floatingCard {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

@keyframes badgePulse {

    0%,
    100% {
        opacity: .5;
        transform: scale(.85);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes heroOrbit {

    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes heroOrbitReverse {

    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0);
    }
}

@keyframes workflowLine {

    0%,
    100% {
        opacity: .35;
        transform: scaleX(.8);
    }

    50% {
        opacity: 1;
        transform: scaleX(1);
    }
}

@keyframes workflowPulse {

    0%,
    100% {
        transform: scale(1);

        box-shadow:
                0 0 0 10px rgba(0,212,255,.025),
                0 0 35px rgba(0,212,255,.08);
    }

    50% {
        transform: scale(1.05);

        box-shadow:
                0 0 0 15px rgba(0,212,255,.025),
                0 0 50px rgba(0,212,255,.14);
    }
}

@keyframes ctaOrb {

    from {
        transform:
                translate(-50%, -50%)
                rotate(0);
    }

    to {
        transform:
                translate(-50%, -50%)
                rotate(360deg);
    }
}


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

@media (max-width: 1050px) {

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

    .hero-content {
        text-align: center;
    }

    .hero-description {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-actions,
    .hero-points {
        justify-content: center;
    }

    .hero-product {
        max-width: 750px;
        width: 100%;
        margin: auto;
    }

    .what-grid,
    .benefit-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .workflow-choice {
        grid-template-columns: 1fr;
    }

    .video-layout {
        grid-template-columns: 1fr;
    }

    .related-products {
        grid-template-columns: 1fr;
    }

    .split-heading {
        grid-template-columns: 1fr;
        gap: 20px;
    }

}


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

@media (max-width: 700px) {

    .merge-container {
        width: min(100% - 30px, 600px);
    }

    .merge-section {
        padding: 75px 0;
    }

    .merge-hero {
        min-height: auto;
    }

    .hero-grid {
        padding: 95px 0 70px;
    }

    .merge-breadcrumb {
        justify-content: center;

        flex-wrap: wrap;
    }

    .hero-content h1 {
        font-size: clamp(42px, 13vw, 60px);

        letter-spacing: -2px;
    }

    .hero-description {
        font-size: 15px;

        line-height: 1.75;
    }

    .hero-actions {
        flex-direction: column;

        width: 100%;
    }

    .merge-btn {
        width: 100%;
    }

    .hero-points {
        flex-direction: column;

        gap: 9px;
    }

    .hero-product {
        min-height: 390px;
    }

    .product-window {
        transform: none;
    }

    .window-body {
        grid-template-columns: 75px 1fr;
    }

    .window-sidebar {
        padding: 12px 6px;
    }

    .side-item {
        justify-content: center;

        padding: 10px 5px;

        font-size: 0;
    }

    .side-item span {
        font-size: 14px;
    }

    .merge-dashboard {
        padding: 13px;
    }

    .dashboard-heading h3 {
        font-size: 14px;
    }

    .floating-card {
        display: none;
    }

    .what-grid,
    .benefit-grid,
    .screenshot-grid {
        grid-template-columns: 1fr;
    }

    .section-heading {
        margin-bottom: 42px;
    }

    .section-heading h2 {
        font-size: 34px;

        letter-spacing: -1px;
    }

    .split-heading h2 {
        font-size: 35px;
    }

    .choice-card {
        padding: 25px;
    }

    .animated-workflow {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .workflow-line {
        left: 50%;
        top: 40px;
        bottom: 40px;

        width: 1px;
        height: auto;

        background:
                linear-gradient(
                        to bottom,
                        transparent,
                        rgba(0,212,255,.5),
                        rgba(122,92,255,.5),
                        transparent
                );
    }

    .workflow-step p {
        max-width: 300px;
    }

    .video-copy {
        text-align: center;
    }

    .video-copy .section-label {
        justify-content: center;
    }

    .final-cta {
        padding: 85px 0;
    }

    .final-cta h2 {
        font-size: 40px;
    }

}


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

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

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}